:root {
            --maroon: #70181f;
            --green: #427d3a;
            --black: #000000;
            --white: #ffffff;
        }


        body {
            background: #ffffff;

        }
 .chat-icon {
     position: fixed;
     bottom: 30px;
     right: 30px;
     width: 65px;
     height: 65px;
     background: #70181f;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
     transition: transform 0.3s ease;
     z-index: 1000;
 }

 .chat-icon * {
     pointer-events: none;
 }

 .chat-icon:hover {
     transform: scale(1.1);
 }

 .chat-icon svg {
     width: 32px;
     height: 32px;
     fill: white;
 }

 .chat-popup {
     position: fixed;
     bottom: 110px;
     right: 30px;
     width: 400px;
     height: 600px;
     background: rgba(255, 255, 255, 0.95);
     backdrop-filter: blur(10px);
     border-radius: 20px;
     box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
     display: none;
     flex-direction: column;
     overflow: hidden;
     z-index: 999;
     transform-origin: bottom right;
 }

 .chat-popup.active {
     display: flex;
     animation: slideIn 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
 }

 @keyframes slideIn {
     from {
         opacity: 0;
         transform: scale(0.5) translateY(50px);
     }

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

 .chat-header {
     background: linear-gradient(135deg, #667eea 0%, #570003 100%);
     padding: 20px;
     color: white;
     display: flex;
     align-items: center;
     justify-content: space-between;
 }

 .chat-header-content {
     display: flex;
     align-items: center;
     gap: 12px;
 }

 .bot-avatar {
     width: 45px;
     height: 45px;
     background: rgba(255, 255, 255, 0.2);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     border: 2px solid rgba(255, 255, 255, 0.3);
 }

 .bot-avatar svg {
     width: 24px;
     height: 24px;
     fill: white;
 }

 .header-text h3 {
     font-size: 18px;
     margin-bottom: 3px;
 }

 .header-text p {
     font-size: 12px;
     opacity: 0.9;
 }

 .close-btn {
     cursor: pointer;
     width: 30px;
     height: 30px;
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: 50%;
     transition: background 0.3s;
 }

 .close-btn:hover {
     background: rgba(255, 255, 255, 0.2);
 }

 .chat-messages {
     flex: 1;
     padding: 20px;
     overflow-y: auto;
     background: #f8f9fa;
 }

 .message {
     margin-bottom: 15px;
     animation: fadeIn 0.3s ease;
 }

 @keyframes fadeIn {
     from {
         opacity: 0;
         transform: translateY(10px);
     }

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

 .message.bot {
     display: flex;
     gap: 10px;
 }

 .message.user {
     display: flex;
     justify-content: flex-end;
 }

 .message-content {
     max-width: 75%;
     padding: 12px 16px;
     border-radius: 15px;
     font-size: 14px;
     line-height: 1.5;
 }

 .message.bot .message-content {
     background: white;
     color: #333;
     border-bottom-left-radius: 5px;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 }

 .message.user .message-content {
     background: linear-gradient(135deg, #667eea 0%, #570003 100%);
     color: white;
     border-bottom-right-radius: 5px;
 }

 .typing-indicator {
     display: none;
     align-items: center;
     gap: 10px;
     margin-bottom: 15px;
 }

 .typing-indicator.active {
     display: flex;
 }

 .typing-dots {
     background: white;
     padding: 12px 16px;
     border-radius: 15px;
     border-bottom-left-radius: 5px;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
     display: flex;
     gap: 4px;
 }

 .typing-dots span {
     width: 8px;
     height: 8px;
     background: #667eea;
     border-radius: 50%;
     animation: typing 1.4s infinite;
 }

 .typing-dots span:nth-child(2) {
     animation-delay: 0.2s;
 }

 .typing-dots span:nth-child(3) {
     animation-delay: 0.4s;
 }

 @keyframes typing {

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

     30% {
         transform: translateY(-10px);
         opacity: 1;
     }
 }

 .chat-input {
     padding: 20px;
     background: white;
     border-top: 1px solid #e0e0e0;
 }

 .input-wrapper {
     display: flex;
     gap: 10px;
     align-items: center;
     background: #f8f9fa;
     padding: 10px 15px;
     border-radius: 25px;
     border: 2px solid transparent;
     transition: all 0.3s;
 }

 .input-wrapper:focus-within {
     border-color: #667eea;
     background: white;
 }

 .input-wrapper input {
     flex: 1;
     border: none;
     outline: none;
     background: transparent;
     font-size: 14px;
     color: #333;
 }

 .input-wrapper input::placeholder {
     color: #999;
 }

 .send-btn {
     width: 35px;
     height: 35px;
     background: linear-gradient(135deg, #667eea 0%, #570003 100%);
     border: none;
     border-radius: 50%;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: transform 0.2s;
 }

 .send-btn:hover {
     transform: scale(1.1);
 }

 .send-btn svg {
     width: 18px;
     height: 18px;
     fill: white;
 }

 .mini-avatar {
     width: 30px;
     height: 30px;
     background: linear-gradient(135deg, #667eea 0%, #570003 100%);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
 }

 .mini-avatar svg {
     width: 16px;
     height: 16px;
     fill: white;
 }

 ::-webkit-scrollbar {
     width: 6px;
 }

 ::-webkit-scrollbar-track {
     background: transparent;
 }

 ::-webkit-scrollbar-thumb {
     background: #ccc;
     border-radius: 3px;
 }

 ::-webkit-scrollbar-thumb:hover {
     background: #999;
 }


 /* Demo Content */
 .demo-content {
     max-width: 1400px;
     margin: 0 auto;
     padding: 60px 30px;
 }

 .demo-hero {
     background: linear-gradient(135deg, #667eea 0%, #570003 100%);
     border-radius: 24px;
     padding: 80px 60px;
     color: #fff;
     text-align: center;
     margin-bottom: 40px;
 }

 .demo-hero h1 {
     font-size: 48px;
     margin-bottom: 20px;
     font-weight: 700;
 }

 .demo-hero p {
     font-size: 18px;
     opacity: 0.95;
     max-width: 800px;
     margin: 0 auto;
     line-height: 1.6;
 }

 .demo-section {
     background: #fff;
     border-radius: 16px;
     padding: 40px;
     margin-bottom: 30px;
     box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
 }

 .demo-section h2 {
     color: #667eea;
     margin-bottom: 20px;
 }

 .demo-section p {
     color: #64748b;
     line-height: 1.8;
 }

 /* Responsive */
 @media (max-width: 1200px) {
     .mega-menu {
         min-width: 700px;
     }

     .mega-menu-grid {
         grid-template-columns: repeat(2, 1fr);
     }
 }

 @media (max-width: 992px) {
     body {
         padding-top: 100px;
     }

     .top-info-bar {
         padding: 8px 0;
     }

     .top-info-left {
         gap: 10px;
         font-size: 12px;
     }

     .mobile-toggle {
         display: block;
     }

     .header-actions .btn-action,
     .nav-wrapper {
         display: none;
     }

     .search-box {
         display: none;
     }

     .mobile-menu-overlay {
         display: block;
     }
 }

 @media (max-width: 768px) {
     .top-info-item {
         font-size: 11px;
     }

     .top-info-right {
         display: none;
     }

     .logo-icon {
         width: 45px;
         height: 45px;
         font-size: 20px;
     }

     .logo-title {
         font-size: 18px;
     }

     .logo-subtitle {
         font-size: 10px;
     }

     .header-container {
         padding: 0 20px;
     }

     .header-top {
         padding: 14px 0;
     }

     .demo-hero {
         padding: 50px 30px;
     }

     .demo-hero h1 {
         font-size: 32px;
     }

     .demo-hero p {
         font-size: 16px;
     }

     .demo-section {
         padding: 25px;
     }
 }

 /*Header end*/


 .vc-desk-section {
     position: relative;
     overflow: hidden;
 }

 /* Animated background particles */
 .vc-desk-section::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background:
         radial-gradient(circle at 20% 50%, rgba(120, 119, 198, 0.3) 0%, transparent 50%),
         radial-gradient(circle at 80% 80%, rgba(74, 144, 226, 0.3) 0%, transparent 50%);
     /*animation: pulse 8s ease-in-out infinite;*/
     pointer-events: none;
 }

 @keyframes pulse {

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

     50% {
         opacity: 0.8;
         transform: scale(1.1);
     }
 }

 .container {
     position: relative;
     z-index: 1;
 }

 /* Image container with futuristic styling */
 .vc-image-wrapper {
     position: relative;
     animation: fadeInLeft 1s ease-out;
 }

 @keyframes fadeInLeft {
     from {
         opacity: 0;
         transform: translateX(-50px);
     }

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

 .vc-image-container {
     position: relative;
     border-radius: 20px;
     overflow: hidden;
     box-shadow:
         0 20px 60px rgba(0, 0, 0, 0.5),
         inset 0 0 0 1px rgba(255, 255, 255, 0.1);
 }

 .vc-image-container::before {
     content: '';
     position: absolute;
     top: -2px;
     left: -2px;
     right: -2px;
     bottom: -2px;
     background: linear-gradient(45deg, #667eea, #570003, #f093fb, #4facfe);
     border-radius: 20px;
     z-index: -1;
     animation: borderRotate 4s linear infinite;
 }

 @keyframes borderRotate {
     0% {
         filter: hue-rotate(0deg);
     }

     100% {
         filter: hue-rotate(360deg);
     }
 }

 .vc-image {
     position: relative;
     border-radius: 18px;
     overflow: hidden;
     background: #1a1a2e;
 }

 .vc-image img {
     width: 100%;
     height: auto;
     display: block;
     transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
 }

 .vc-image:hover img {
     transform: scale(1.05);
 }

 .vc-image::after {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
     pointer-events: none;
 }

 /* Content area */
 .vc-content-wrapper {
     animation: fadeInRight 1s ease-out;
 }

 @keyframes fadeInRight {
     from {
         opacity: 0;
         transform: translateX(50px);
     }

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

 .vc-content {
     background: rgba(255, 255, 255, 0.05);
     backdrop-filter: blur(20px);
     border-radius: 24px;
     padding: 40px;
     border: 1px solid rgba(255, 255, 255, 0.1);
     box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
     position: relative;
     overflow: hidden;
 }

 .vc-content::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 4px;
     background: linear-gradient(90deg, #667eea, #570003, #f093fb);
     animation: shimmer 3s linear infinite;
 }

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

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

 .vc-title {
     font-size: 2.5rem;
     font-weight: 700;
     background: linear-gradient(135deg, #667eea 0%, #570003 50%, #f093fb 100%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
     margin-bottom: 20px;
     animation: fadeInUp 0.8s ease-out 0.2s both;
 }

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

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

 .vc-university {
     color: #fff;
     font-size: 1.1rem;
     margin-bottom: 12px;
     animation: fadeInUp 0.8s ease-out 0.3s both;
 }

 .vc-university strong {
     background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
 }

 .vc-date {
     color: rgba(255, 255, 255, 0.7);
     font-size: 0.95rem;
     margin-bottom: 25px;
     padding-left: 20px;
     border-left: 3px solid #667eea;
     animation: fadeInUp 0.8s ease-out 0.4s both;
 }

 .vc-date strong {
     color: #fff;
 }

 .vc-content p {
     color: rgba(255, 255, 255, 0.85);
     font-size: 1rem;
     line-height: 1.8;
     margin-bottom: 18px;
     animation: fadeInUp 0.8s ease-out 0.5s both;
 }

 .vc-content p:first-of-type {
     font-style: italic;
     color: rgba(255, 255, 255, 0.9);
 }

 /* Read More button */
 .read-more {
     display: inline-flex;
     align-items: center;
     gap: 10px;
     padding: 14px 32px;
     background: linear-gradient(135deg, #667eea 0%, #570003 100%);
     color: white;
     text-decoration: none;
     border-radius: 50px;
     font-weight: 600;
     font-size: 1rem;
     transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
     box-shadow: 0 10px 30px rgba(102, 126, 234, 0.4);
     position: relative;
     overflow: hidden;
     margin-top: 15px;
     animation: fadeInUp 0.8s ease-out 0.6s both;
 }

 .read-more::before {
     content: '';
     position: absolute;
     top: 0;
     left: -100%;
     width: 100%;
     height: 100%;
     background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
     transition: left 0.5s;
 }

 .read-more:hover::before {
     left: 100%;
 }

 .read-more:hover {
     transform: translateY(-3px);
     box-shadow: 0 15px 40px rgba(102, 126, 234, 0.6);
 }

 .read-more::after {
     content: '→';
     font-size: 1.2rem;
     transition: transform 0.3s;
 }

 .read-more:hover::after {
     transform: translateX(5px);
 }

 /* Decorative elements */
 .deco-circle {
     position: absolute;
     border-radius: 50%;
     background: linear-gradient(135deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1));
     filter: blur(40px);
     animation: float 6s ease-in-out infinite;
 }

 .deco-circle-1 {
     width: 300px;
     height: 300px;
     top: -100px;
     right: -100px;
 }

 .deco-circle-2 {
     width: 200px;
     height: 200px;
     bottom: -50px;
     left: -50px;
     animation-delay: 2s;
 }

 @keyframes float {

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

     50% {
         transform: translateY(-20px) rotate(180deg);
     }
 }

 /* Responsive design */
 @media (max-width: 991px) {
     .vc-title {
         font-size: 2rem;
     }

     .vc-content {
         padding: 30px;
         margin-top: 30px;
     }

     .vc-image-wrapper {
         margin-bottom: 0;
     }
 }

 @media (max-width: 576px) {
     .vc-title {
         font-size: 1.75rem;
     }

     .vc-content {
         padding: 25px;
     }

     body {
         padding: 30px 0;
     }
 }

 /* Glow effect on hover */
 .vc-content:hover {
     border-color: rgba(102, 126, 234, 0.3);
     box-shadow:
         0 20px 60px rgba(0, 0, 0, 0.3),
         0 0 40px rgba(102, 126, 234, 0.2);
 }

 /* Quote styling */
 .vc-content p:first-of-type::before {
     content: '"';
     font-size: 3rem;
     color: rgba(102, 126, 234, 0.3);
     position: absolute;
     left: 10px;
     top: 35px;
     font-family: Georgia, serif;
 }

 /*facilities section*/
 .facilities-section {
     position: relative;
     background: linear-gradient(180deg, #ffffff 0%, #f8f9fa 100%);
     padding: 80px 0;
 }

 /* Decorative background elements */
 .facilities-section::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 300px;
     background:
         radial-gradient(circle at 20% 10%, rgba(79, 172, 254, 0.03) 0%, transparent 50%),
         radial-gradient(circle at 80% 20%, rgba(102, 126, 234, 0.03) 0%, transparent 50%);
     pointer-events: none;
 }

 .container {
     position: relative;
     z-index: 1;
 }

 /* Title Section */
 .facilities-title {
     font-size: 3rem;
     font-weight: 700;
     text-align: center;
     color: #1a1a2e;
     margin-bottom: 20px;
     position: relative;
     display: inline-block;
     left: 50%;
     transform: translateX(-50%);
 }

 .facilities-title::after {
     content: '';
     position: absolute;
     bottom: -15px;
     left: 50%;
     transform: translateX(-50%);
     width: 80px;
     height: 4px;
     background: linear-gradient(90deg, #667eea 0%, #570003 100%);
     border-radius: 2px;
 }

 .facilities-title::before {
     content: '';
     position: absolute;
     bottom: -15px;
     left: 50%;
     transform: translateX(-50%);
     width: 80px;
     height: 4px;
     background: linear-gradient(90deg, #667eea 0%, #570003 100%);
     border-radius: 2px;
     filter: blur(8px);
     opacity: 0.5;
 }

 /* Facility Card */
 .facility-card {
     position: relative;
     border-radius: 20px;
     overflow: hidden;
     background: #fff;
     box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
     transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
     height: 350px;
     cursor: pointer;
 }

 .facility-card::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: linear-gradient(135deg, rgba(102, 126, 234, 0.9) 0%, rgba(118, 75, 162, 0.9) 100%);
     opacity: 0;
     transition: opacity 0.5s ease;
     z-index: 2;
 }

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

 .facility-card:hover {
     transform: translateY(-15px);
     box-shadow: 0 20px 60px rgba(102, 126, 234, 0.25);
 }

 /* Image */
 .facility-card img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
 }

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

 /* Label */
 .facility-label {
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
     padding: 25px 30px;
     background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, transparent 100%);
     color: white;
     font-size: 1.5rem;
     font-weight: 600;
     z-index: 3;
     transition: all 0.5s ease;
 }

 .facility-card:hover .facility-label {
     padding: 35px 30px;
     background: transparent;
     font-size: 1.8rem;
 }

 /* Decorative corner accent */
 .facility-card::after {
     content: '';
     position: absolute;
     top: 20px;
     right: 20px;
     width: 50px;
     height: 50px;
     border-top: 3px solid rgba(255, 255, 255, 0);
     border-right: 3px solid rgba(255, 255, 255, 0);
     transition: all 0.5s ease;
     z-index: 4;
 }

 .facility-card:hover::after {
     border-top-color: rgba(255, 255, 255, 0.8);
     border-right-color: rgba(255, 255, 255, 0.8);
     width: 70px;
     height: 70px;
 }

 /* Icon overlay on hover */
 .facility-icon {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%) scale(0);
     width: 80px;
     height: 80px;
     background: rgba(255, 255, 255, 0.2);
     backdrop-filter: blur(10px);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     z-index: 4;
     transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
     border: 2px solid rgba(255, 255, 255, 0.3);
 }

 .facility-card:hover .facility-icon {
     transform: translate(-50%, -50%) scale(1);
 }

 .facility-icon svg {
     width: 40px;
     height: 40px;
     fill: white;
 }

 /* Shine effect */
 .facility-card .shine {
     position: absolute;
     top: -100%;
     left: -100%;
     width: 100%;
     height: 100%;
     background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.3), transparent);
     transition: all 0.6s;
     z-index: 3;
 }

 .facility-card:hover .shine {
     left: 100%;
     top: 100%;
 }

 /* Animation on scroll */
 .facility-card {
     animation: fadeInUp 0.8s ease-out both;
 }

 .facility-card:nth-child(1) {
     animation-delay: 0.1s;
 }

 .facility-card:nth-child(2) {
     animation-delay: 0.2s;
 }

 .facility-card:nth-child(3) {
     animation-delay: 0.3s;
 }

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

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

 /* Subtle pulse on cards */
 @keyframes subtlePulse {

     0%,
     100% {
         box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
     }

     50% {
         box-shadow: 0 10px 40px rgba(102, 126, 234, 0.15);
     }
 }

 /* Responsive */
 @media (max-width: 991px) {
     .facilities-title {
         font-size: 2.5rem;
     }

     .facility-card {
         height: 300px;
     }
 }

 @media (max-width: 576px) {
     .facilities-title {
         font-size: 2rem;
     }

     .facility-card {
         height: 280px;
     }

     .facility-label {
         font-size: 1.3rem;
         padding: 20px 25px;
     }

     .facility-card:hover .facility-label {
         font-size: 1.5rem;
     }

     .facilities-section {
         padding: 60px 0;
     }

     body {
         padding: 40px 0;
     }
 }

 /* Additional info text that appears on hover */
 .facility-info {
     position: absolute;
     bottom: 80px;
     left: 30px;
     right: 30px;
     color: white;
     font-size: 0.95rem;
     opacity: 0;
     transform: translateY(20px);
     transition: all 0.5s ease 0.1s;
     z-index: 4;
     line-height: 1.6;
 }

 .facility-card:hover .facility-info {
     opacity: 1;
     transform: translateY(0);
 }


 /*extra*/
 .extra {
     /*background: linear-gradient(180deg, #f8f9fa 0%, #ffffff 100%);*/
     padding: 80px 0;
     position: relative;
     overflow: hidden;
 }

 /* Animated background elements */
 .extra::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background:
         radial-gradient(circle at 10% 20%, rgba(102, 126, 234, 0.05) 0%, transparent 40%),
         radial-gradient(circle at 90% 80%, rgba(118, 75, 162, 0.05) 0%, transparent 40%);
     pointer-events: none;
 }

 .container {
     position: relative;
     z-index: 1;
 }

 /* Card Styling */
 .rank-card {
     background: #ffffff;
     border-radius: 24px;
     padding: 40px;
     position: relative;
     overflow: hidden;
     border: 1px solid rgba(102, 126, 234, 0.1);
     box-shadow:
         0 10px 40px rgba(0, 0, 0, 0.06),
         0 0 0 1px rgba(102, 126, 234, 0.05);
     transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
     display: flex;
     flex-direction: column;
     min-height: 100%;
 }

 /* Gradient border effect */
 .rank-card::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 5px;
     background: linear-gradient(90deg, #667eea 0%, #570003 50%, #f093fb 100%);
     background-size: 200% 100%;
     animation: gradientShift 3s ease infinite;
 }

 @keyframes gradientShift {

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

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

 .rank-card:hover {
     transform: translateY(-10px);
     box-shadow:
         0 20px 60px rgba(102, 126, 234, 0.15),
         0 0 0 1px rgba(102, 126, 234, 0.1);
     border-color: rgba(102, 126, 234, 0.2);
 }

 /* Decorative corner elements */
 .rank-card::after {
     content: '';
     position: absolute;
     bottom: 0;
     right: 0;
     width: 150px;
     height: 150px;
     background: radial-gradient(circle at bottom right, rgba(102, 126, 234, 0.08) 0%, transparent 70%);
     pointer-events: none;
     transition: all 0.5s ease;
 }

 .rank-card:hover::after {
     width: 200px;
     height: 200px;
     background: radial-gradient(circle at bottom right, rgba(102, 126, 234, 0.12) 0%, transparent 70%);
 }

 /* Title */
 .rank-title {
     font-size: 1.5rem;
     font-weight: 700;
     color: #1a1a2e;
     margin-bottom: 30px;
     position: relative;
     padding-bottom: 15px;
     line-height: 1.4;
 }

 .rank-title::after {
     content: '';
     position: absolute;
     bottom: 0;
     left: 0;
     width: 60px;
     height: 3px;
     background: linear-gradient(90deg, #667eea 0%, #570003 100%);
     border-radius: 2px;
 }

 /* Special styling for first card title */
 .col-md-6:first-child .rank-title {
     background: linear-gradient(135deg, #667eea 0%, #570003 100%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
 }

 /* List Styling */
 .rank-list {
     list-style: none;
     padding: 0;
     margin: 0 0 30px 0;
     flex: 1;
 }

 .rank-list li {
     padding: 18px 0 18px 40px;
     position: relative;
     color: #444;
     font-size: 1rem;
     line-height: 1.7;
     border-bottom: 1px solid rgba(0, 0, 0, 0.05);
     transition: all 0.3s ease;
 }

 .rank-list li:last-child {
     border-bottom: none;
 }

 .rank-list li:hover {
     padding-left: 45px;
     color: #667eea;
 }

 /* Custom bullet icon */
 .rank-list li::before {
     content: '';
     position: absolute;
     left: 0;
     top: 50%;
     transform: translateY(-50%);
     width: 24px;
     height: 24px;
     background: linear-gradient(135deg, #667eea 0%, #570003 100%);
     border-radius: 6px;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: all 0.3s ease;
 }

 .rank-list li::after {
     content: '✓';
     position: absolute;
     left: 7px;
     top: 50%;
     transform: translateY(-50%);
     color: #0e40d3;
     font-size: 14px;
     font-weight: bold;
 }

 .rank-list li:hover::before {
     transform: translateY(-50%) rotate(360deg);
     box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
 }

 /* Links in list */
 .rank-list li a {
     color: #667eea;
     text-decoration: none;
     font-weight: 500;
     transition: all 0.3s ease;
     position: relative;
     display: inline-block;
 }

 .rank-list li a::after {
     content: '→';
     margin-left: 8px;
     display: inline-block;
     transition: transform 0.3s ease;
 }

 .rank-list li a:hover {
     color: #570003;
 }

 .rank-list li a:hover::after {
     transform: translateX(5px);
 }

 /* Strong text styling */
 .rank-list li strong {
     color: #667eea;
     font-weight: 700;
     background: linear-gradient(135deg, #667eea 0%, #570003 100%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
 }

 /* Button */
 .rank-btn {
     display: inline-flex;
     align-items: center;
     gap: 10px;
     padding: 16px 32px;
     background: linear-gradient(135deg, #667eea 0%, #570003 100%);
     color: white;
     text-decoration: none;
     border-radius: 50px;
     font-weight: 600;
     font-size: 1rem;
     transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
     box-shadow: 0 8px 24px rgba(102, 126, 234, 0.3);
     position: relative;
     overflow: hidden;
     align-self: flex-start;
 }

 .rank-btn::before {
     content: '';
     position: absolute;
     top: 0;
     left: -100%;
     width: 100%;
     height: 100%;
     background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
     transition: left 0.5s;
 }

 .rank-btn:hover::before {
     left: 100%;
 }

 .rank-btn:hover {
     transform: translateY(-3px);
     box-shadow: 0 12px 32px rgba(102, 126, 234, 0.4);
     color: white;
 }

 /* Icon in button */
 .rank-btn::after {
     content: '';
     width: 20px;
     height: 20px;
     background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="white" viewBox="0 0 24 24"><path d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z"/></svg>');
     background-size: contain;
     transition: transform 0.3s ease;
 }

 .rank-btn:hover::after {
     transform: translateX(5px);
 }

 /* Card animations */
 .rank-card {
     animation: fadeInUp 0.8s ease-out both;
 }

 .col-md-6:first-child .rank-card {
     animation-delay: 0.1s;
 }

 .col-md-6:nth-child(2) .rank-card {
     animation-delay: 0.2s;
 }

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

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

 /* Badge for special items */
 .badge-accent {
     display: inline-block;
     padding: 4px 12px;
     background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
     color: white;
     border-radius: 20px;
     font-size: 0.75rem;
     font-weight: 600;
     margin-left: 8px;
     vertical-align: middle;
 }

 /* Responsive */
 @media (max-width: 768px) {
     .extra {
         padding: 60px 0;
     }

     .rank-card {
         padding: 30px 25px;
     }

     .rank-title {
         font-size: 1.3rem;
     }

     .rank-list li {
         font-size: 0.95rem;
         padding: 15px 0 15px 35px;
     }

     .rank-btn {
         padding: 14px 28px;
         font-size: 0.95rem;
         width: 100%;
         justify-content: center;
     }
 }

 /* Hover glow effect */
 @keyframes glow {

     0%,
     100% {
         box-shadow:
             0 10px 40px rgba(0, 0, 0, 0.06),
             0 0 0 1px rgba(102, 126, 234, 0.05);
     }

     50% {
         box-shadow:
             0 15px 50px rgba(102, 126, 234, 0.12),
             0 0 0 1px rgba(102, 126, 234, 0.1);
     }
 }

 /* Floating particles effect */
 .rank-card .particle {
     position: absolute;
     width: 4px;
     height: 4px;
     background: rgba(102, 126, 234, 0.3);
     border-radius: 50%;
     pointer-events: none;
     opacity: 0;
     animation: float-particle 6s ease-in-out infinite;
 }

 .rank-card:hover .particle {
     opacity: 1;
 }

 .particle:nth-child(1) {
     top: 20%;
     left: 10%;
     animation-delay: 0s;
 }

 .particle:nth-child(2) {
     top: 60%;
     left: 80%;
     animation-delay: 1s;
 }

 .particle:nth-child(3) {
     top: 40%;
     left: 50%;
     animation-delay: 2s;
 }

 @keyframes float-particle {

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

     50% {
         transform: translateY(-30px) scale(1.5);
         opacity: 0.6;
     }
 }




 .futuristic-gallery {
     padding: 60px 20px;
     /*background: radial-gradient(circle at top, #0f2027, #000);*/
     text-align: center;
 }

 .gallery-title {
     color: #00ffe0;
     font-size: 36px !important;
     margin-bottom: 40px;
     letter-spacing: 2px;
 }

 .gallery-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
     gap: 25px;
     max-width: 1200px;
     margin: auto;
 }

 .gallery-item {
     position: relative;
     border-radius: 16px;
     overflow: hidden;
     cursor: pointer;
     background: rgba(255, 255, 255, 0.06);
     backdrop-filter: blur(10px);
     border: 1px solid rgba(0, 255, 224, 0.25);
     transition: 0.4s ease;
 }

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

 .gallery-item:hover {
     transform: scale(1.05);
     /*box-shadow: 0 0 30px rgba(0,255,224,0.6);*/
 }

 .gallery-item:hover img {
     transform: scale(1.1);
 }

 /* Lightbox */
 .gallery-lightbox {
     display: none;
     position: fixed;
     inset: 0;
     background: rgba(0, 0, 0, 0.92);
     z-index: 9999;
     align-items: center;
     justify-content: center;
 }

 .gallery-lightbox img {
     max-width: 90%;
     max-height: 85vh;
     border-radius: 16px;
     box-shadow: 0 0 40px rgba(0, 255, 224, 0.8);
     animation: zoomIn 0.5s ease;
 }

 .close-btn {
     position: absolute;
     top: 20px;
     right: 30px;
     font-size: 36px;
     color: #00ffe0;
     cursor: pointer;
 }

 @keyframes zoomIn {
     from {
         transform: scale(0.7);
         opacity: 0;
     }

     to {
         transform: scale(1);
         opacity: 1;
     }
 }


 .heritage-section {
     max-width: 1400px;
     margin: 0 auto;
     padding: 80px 0;
 }

 .section-header {
     text-align: center;
     margin-bottom: 60px;
     animation: fadeInDown 0.8s ease-out;
 }

 .section-header h2 {
     font-size: 3em !important;
     color: #dd0535;
     margin-bottom: 15px;
     font-weight: 300;
     letter-spacing: 2px;
     text-transform: uppercase;
 }

 .section-header .divider {
     width: 100px;
     height: 3px;
     background: linear-gradient(90deg, transparent, #f0c674, transparent);
     margin: 0 auto 20px;
 }

 .section-header p {
     color: #ccc;
     font-size: 1.1em;
     font-style: italic;
 }

 .heritage-wrap {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
     gap: 30px;
 }

 .heritage-col {
     background: rgba(255, 255, 255, 0.05);
     backdrop-filter: blur(10px);
     border-radius: 20px;
     padding: 40px 35px;
     border: 1px solid rgba(255, 255, 255, 0.1);
     transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
     position: relative;
     overflow: hidden;
     animation: fadeInUp 0.8s ease-out backwards;
 }

 .heritage-col:nth-child(1) {
     animation-delay: 0.1s;
 }

 .heritage-col:nth-child(2) {
     animation-delay: 0.2s;
 }

 .heritage-col:nth-child(3) {
     animation-delay: 0.3s;
 }

 .heritage-col::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 4px;
     background: linear-gradient(90deg, #f0c674, #e8b863);
     transform: scaleX(0);
     transition: transform 0.4s ease;
 }

 .heritage-col:hover::before {
     transform: scaleX(1);
 }

 .heritage-col:hover {
     transform: translateY(-8px);
     background: rgba(255, 255, 255, 0.08);
     border-color: rgba(240, 198, 116, 0.3);
     box-shadow: 0 20px 60px rgba(240, 198, 116, 0.15);
 }

 .heritage-col.dark {
     background: rgb(42 42 145 / 85%);
 }

 .heritage-col.light {
     background: rgb(0 0 0 / 97%);
 }

 .heritage-col ul {
     list-style: none;
 }

 .heritage-col ul li {
     color: #e0e0e0;
     font-size: 1.05em;
     padding: 18px 0 18px 35px;
     border-bottom: 1px solid rgba(255, 255, 255, 0.08);
     position: relative;
     cursor: pointer;
     transition: all 0.3s ease;
 }

 .heritage-col ul li:last-child {
     border-bottom: none;
 }

 .heritage-col ul li::before {
     content: '◆';
     position: absolute;
     left: 0;
     color: #f0c674;
     font-size: 0.8em;
     transition: all 0.3s ease;
 }

 .heritage-col ul li:hover {
     color: #f0c674;
     padding-left: 45px;
     letter-spacing: 0.5px;
 }

 .heritage-col ul li:hover::before {
     left: 10px;
     transform: scale(1.3);
 }

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

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

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

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

 @media (max-width: 768px) {
     .section-header h2 {
         font-size: 2em;
     }

     .heritage-wrap {
         grid-template-columns: 1fr;
     }

     .heritage-col {
         padding: 30px 25px;
     }

     .heritage-col ul li {
         font-size: 0.95em;
         padding: 15px 0 15px 30px;
     }
 }

 .decorative-element {
     position: fixed;
     width: 300px;
     height: 300px;
     border-radius: 50%;
     background: radial-gradient(circle, rgba(240, 198, 116, 0.1), transparent);
     pointer-events: none;
     z-index: -1;
 }

 .decorative-element:nth-child(1) {
     top: 10%;
     left: 5%;
     animation: float 8s ease-in-out infinite;
 }

 .decorative-element:nth-child(2) {
     bottom: 10%;
     right: 5%;
     animation: float 6s ease-in-out infinite reverse;
 }

 @keyframes float {

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

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


 /*evenets*/
 .events-section {
     max-width: 1400px;
     margin: 0 auto;
     background: white;
     border-radius: 24px;
     padding: 50px;
     box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
     animation: fadeIn 0.8s ease-out;
 }

 .section-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-bottom: 20px;
 }

 .events-title {
     font-size: 2.5em;
     color: #1a1a2e;
     font-weight: 700;
     position: relative;
     padding-bottom: 10px;
 }

 .events-title::after {
     content: '';
     position: absolute;
     bottom: 0;
     left: 0;
     width: 60px;
     height: 4px;
     background: linear-gradient(90deg, #667eea, #570003);
     border-radius: 2px;
 }

 .view-more {
     color: #667eea;
     text-decoration: none;
     font-weight: 600;
     font-size: 0.95em;
     padding: 12px 28px;
     border: 2px solid #667eea;
     border-radius: 50px;
     transition: all 0.3s ease;
     text-transform: uppercase;
     letter-spacing: 0.5px;
 }

 .view-more:hover {
     background: linear-gradient(135deg, #667eea, #570003);
     color: white;
     transform: translateY(-2px);
     box-shadow: 0 8px 20px rgba(102, 126, 234, 0.3);
 }

 .divider {
     height: 2px;
     background: linear-gradient(90deg, transparent, #e0e0e0, transparent);
     margin-bottom: 40px;
 }

 .content-grid {
     display: grid;
     grid-template-columns: 2fr 1fr;
     gap: 40px;
 }

 .left-content {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 30px;
 }

 .featured-event {
     background: linear-gradient(135deg, #667eea 0%, #570003 100%);
     border-radius: 20px;
     overflow: hidden;
     box-shadow: 0 15px 35px rgba(102, 126, 234, 0.3);
     transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
     cursor: pointer;
     animation: slideInLeft 0.8s ease-out;
 }

 .featured-event:hover {
     transform: translateY(-10px);
     box-shadow: 0 25px 50px rgba(102, 126, 234, 0.4);
 }

 .featured-event img {
     width: 100%;
     height: 280px;
     object-fit: cover;
     transition: transform 0.5s ease;
 }

 .featured-event:hover img {
     transform: scale(1.08);
 }

 .featured-content {
     padding: 30px;
     color: white;
 }

 .event-date {
     display: inline-block;
     background: rgba(255, 255, 255, 0.2);
     backdrop-filter: blur(10px);
     padding: 8px 18px;
     border-radius: 20px;
     font-size: 0.85em;
     font-weight: 600;
     margin-bottom: 15px;
     letter-spacing: 0.5px;
 }

 .featured-title {
     font-size: 1.4em;
     font-weight: 700;
     margin-bottom: 12px;
     line-height: 1.4;
 }

 .featured-desc {
     font-size: 0.95em;
     line-height: 1.6;
     opacity: 0.95;
 }

 .news-list {
     display: flex;
     flex-direction: column;
     gap: 20px;
 }

 .news-item {
     display: flex;
     gap: 18px;
     padding: 20px;
     background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
     border-radius: 16px;
     text-decoration: none;
     color: #2d3748;
     border: 1px solid #e2e8f0;
     transition: all 0.3s ease;
     animation: fadeInUp 0.6s ease-out backwards;
 }

 .news-item:nth-child(1) {
     animation-delay: 0.1s;
 }

 .news-item:nth-child(2) {
     animation-delay: 0.2s;
 }

 .news-item:nth-child(3) {
     animation-delay: 0.3s;
 }

 .news-item:nth-child(4) {
     animation-delay: 0.4s;
 }

 .news-item:hover {
     transform: translateX(8px);
     box-shadow: 0 8px 25px rgba(102, 126, 234, 0.15);
     border-color: #667eea;
     background: white;
 }

 .news-item img {
     width: 100px;
     height: 70px;
     object-fit: cover;
     border-radius: 12px;
     flex-shrink: 0;
     transition: transform 0.3s ease;
 }

 .news-item:hover img {
     transform: scale(1.05);
 }

 .news-item span {
     font-size: 0.95em;
     line-height: 1.6;
     display: -webkit-box;
     -webkit-line-clamp: 3;
     -webkit-box-orient: vertical;
     overflow: hidden;
     font-weight: 500;
     transition: color 0.3s ease;
 }

 .news-item:hover span {
     color: #667eea;
 }

 .right-sidebar .news-list {
     background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
     padding: 30px;
     border-radius: 20px;
     border: 1px solid #e2e8f0;
     animation: slideInRight 0.8s ease-out;
 }

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

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

 @keyframes slideInLeft {
     from {
         opacity: 0;
         transform: translateX(-50px);
     }

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

 @keyframes slideInRight {
     from {
         opacity: 0;
         transform: translateX(50px);
     }

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

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

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

 @media (max-width: 1200px) {
     .content-grid {
         grid-template-columns: 1fr;
     }

     .left-content {
         grid-template-columns: 1fr;
     }
 }

 @media (max-width: 768px) {
     .events-section {
         padding: 30px 20px;
     }

     .events-title {
         font-size: 1.8em;
     }

     .section-header {
         flex-direction: column;
         align-items: flex-start;
         gap: 15px;
     }

     .news-item {
         flex-direction: column;
     }

     .news-item img {
         width: 100%;
         height: 200px;
     }
 }

 .badge {
     position: absolute;
     top: 20px;
     right: 20px;
     background: rgba(255, 255, 255, 0.95);
     color: #667eea;
     padding: 8px 16px;
     border-radius: 20px;
     font-size: 0.75em;
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 1px;
 }

 .featured-event {
     position: relative;
 }

 /*banner*/


 .sid-cover-section {
     position: relative;
     width: 100%;
     height: 820px;
     max-height: 820px;
     overflow: hidden;
     background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
 }

 .slick-list {
     position: relative;
     width: 100%;
     height: 100%;
     overflow: hidden;
 }

 .slick-track {
     position: relative;
     width: 100%;
     height: 100%;
     display: flex;
 }

 .slide {
     position: absolute;
     width: 100%;
     height: 100%;
     opacity: 0;
     transform: scale(1.1);
     transition: opacity 1.2s ease-in-out, transform 1.2s ease-in-out;
     z-index: 1;
 }

 .slide.slick-active {
     opacity: 1;
     transform: scale(1);
     z-index: 2;
 }

 .slide.slick-prev-slide {
     opacity: 0;
     transform: scale(0.95) translateX(-100px);
 }

 .slide-link {
     display: block;
     width: 100%;
     height: 100%;
     position: relative;
     overflow: hidden;
 }

 .slide-link::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: linear-gradient(135deg, rgba(102, 126, 234, 0.3) 0%, rgba(118, 75, 162, 0.3) 100%);
     z-index: 2;
     opacity: 0;
     transition: opacity 0.6s ease;
 }

 .slide.slick-active .slide-link::before {
     opacity: 1;
 }

 .web-cover-4k {
     width: 100%;
     height: 820px;
     object-fit: cover;
     object-position: center;
     filter: brightness(0.7);
     transition: transform 8s ease-out, filter 0.6s ease;
 }

 .slide.slick-active .web-cover-4k {
     transform: scale(1.08);
     filter: brightness(0.85);
 }

 /* Content Overlay */
 .slide-content {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     z-index: 10;
     text-align: center;
     color: white;
     width: 90%;
     max-width: 900px;
     opacity: 0;
     transition: opacity 0.8s ease 0.4s, transform 0.8s ease 0.4s;
 }

 .slide.slick-active .slide-content {
     opacity: 1;
     transform: translate(-50%, -50%);
 }

 .slide-content h1 {
     font-size: 4em !important;
     font-weight: 700 !important;
     margin-bottom: 20px;
     text-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
     letter-spacing: 1px;
     animation: slideInDown 1s ease-out 0.5s both;
 }

 .slide-content p {
     font-size: 1.3em !important;
     margin-bottom: 30px;
     text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
     line-height: 1.6;
     animation: slideInUp 1s ease-out 0.7s both;
 }

 .slide-content .btn-explore {
     display: inline-block;
     padding: 16px 40px;
     background: #70181f;
     color: white;
     text-decoration: none;
     border-radius: 50px;
     font-weight: 600;
     font-size: 1.1em;
     transition: all 0.3s ease;
     box-shadow: 0 10px 30px rgba(102, 126, 234, 0.4);
     animation: slideInUp 1s ease-out 0.9s both;
 }

 .slide-content .btn-explore:hover {
     transform: translateY(-3px);
     box-shadow: 0 15px 40px #70181f;
 }

 /* Navigation Arrows */
 .slick-arrow {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     z-index: 100;
     width: 60px;
     height: 60px;
     background: rgba(255, 255, 255, 0.1);
     backdrop-filter: blur(10px);
     border: 2px solid rgba(255, 255, 255, 0.3);
     border-radius: 50%;
     cursor: pointer;
     transition: all 0.3s ease;
     display: flex;
     align-items: center;
     justify-content: center;
     color: white;
     font-size: 24px;
 }

 .slick-arrow:hover {
     background: rgba(102, 126, 234, 0.8);
     border-color: rgba(102, 126, 234, 1);
     transform: translateY(-50%) scale(1.1);
 }

 .slick-prev {
     left: 40px;
 }

 .slick-next {
     right: 40px;
 }

 .slick-arrow svg {
     width: 24px;
     height: 24px;
     fill: white;
 }

 /* Dots */
 .slick-dots {
     position: absolute;
     bottom: 40px;
     left: 50%;
     transform: translateX(-50%);
     z-index: 100;
     list-style: none;
     display: flex;
     gap: 15px;
     padding: 15px 25px;
     background: rgba(255, 255, 255, 0.1);
     backdrop-filter: blur(10px);
     border-radius: 50px;
     border: 1px solid rgba(255, 255, 255, 0.2);
 }

 .slick-dots li button {
     width: 12px;
     height: 12px;
     background: rgba(255, 255, 255, 0.4);
     border: none;
     border-radius: 50%;
     cursor: pointer;
     transition: all 0.4s ease;
     text-indent: -9999px;
     padding: 0;
 }

 .slick-dots li.active button,
 .slick-dots li button:hover {
     background: white;
     width: 40px;
     border-radius: 10px;
 }

 /* Progress Bar */
 .progress-bar {
     position: absolute;
     bottom: 0;
     left: 0;
     height: 4px;
     background: linear-gradient(90deg, #667eea, #570003);
     width: 0%;
     z-index: 101;
     transition: width 0.1s linear;
 }

 @keyframes slideInDown {
     from {
         opacity: 0;
         transform: translateY(-50px);
     }

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

 @keyframes slideInUp {
     from {
         opacity: 0;
         transform: translateY(50px);
     }

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

 @media (max-width: 768px) {
     .sid-cover-section {
         height: 500px;
         max-height: 500px;
     }

     .web-cover-4k {
         height: 500px;
     }

     .slide-content h1 {
         font-size: 2.5em;
     }

     .slide-content p {
         font-size: 1.1em;
     }

     .slick-arrow {
         width: 45px;
         height: 45px;
         font-size: 18px;
     }

     .slick-prev {
         left: 20px;
     }

     .slick-next {
         right: 20px;
     }

     .slick-dots {
         bottom: 20px;
     }
 }

 /* Decorative Elements */
 .decorative-circle {
     position: absolute;
     border-radius: 50%;
     background: radial-gradient(circle, rgba(102, 126, 234, 0.2), transparent);
     pointer-events: none;
     z-index: 5;
     animation: float 6s ease-in-out infinite;
 }

 .circle-1 {
     width: 400px;
     height: 400px;
     top: -100px;
     right: -100px;
 }

 .circle-2 {
     width: 300px;
     height: 300px;
     bottom: -50px;
     left: -50px;
     animation-delay: 2s;
 }

 @keyframes float {

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

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


 /*whychoose*/


 .why-hit-section {
     max-width: 1500px;
     margin: 0 auto;
     position: relative;
     z-index: 1;
     padding: 80px 0px;
 }

 .text-center {
     text-align: center;
 }

 .section-header {
     margin-bottom: 80px;
     animation: fadeInDown 1s ease-out;
 }

 .section-title-1 {
     font-size: 3.5em;
     color: #1a1a2e;
     font-weight: 300;
     margin-bottom: 20px;
     letter-spacing: 2px;
     position: relative;
     display: inline-block;
 }

 .section-title-1::before {
     content: '';
     position: absolute;
     top: -20px;
     left: 50%;
     transform: translateX(-50%);
     width: 60px;
     height: 2px;
     background: linear-gradient(90deg, transparent, #570003, transparent);
 }

 .section-title-1::after {
     content: '';
     position: absolute;
     bottom: -15px;
     left: 50%;
     transform: translateX(-50%);
     width: 120px;
     height: 1px;
     background: linear-gradient(90deg, transparent, #570003, transparent);
 }

 .section-subtitle {
     font-size: 1.15em;
     color: #6b7280 !important;
     margin-top: 30px;
     font-style: italic;
     font-weight: 300;
     letter-spacing: 0.5px;
 }

 .cards-grid {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 35px;
     margin-top: 60px;
 }

 .info-card {
     background: white;
     border-radius: 0;
     overflow: hidden;
     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
     transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
     cursor: pointer;
     position: relative;
     border: 1px solid #e5e7eb;
     animation: fadeInUp 1s ease-out backwards;
 }

 .info-card:nth-child(1) {
     animation-delay: 0.2s;
 }

 .info-card:nth-child(2) {
     animation-delay: 0.3s;
 }

 .info-card:nth-child(3) {
     animation-delay: 0.4s;
 }

 .info-card:nth-child(4) {
     animation-delay: 0.5s;
 }

 .info-card::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 2px;
     height: 100%;
     background: linear-gradient(180deg, #570003, #b8975a);
     transform: scaleY(0);
     transform-origin: top;
     transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
     z-index: 10;
 }

 .info-card:hover::before {
     transform: scaleY(1);
 }

 .info-card:hover {
     transform: translateY(-10px);
     box-shadow: 0 25px 50px rgba(0, 0, 0, 0.12);
     border-color: #570003;
 }

 .card-image-wrapper {
     position: relative;
     width: 100%;
     height: 300px;
     overflow: hidden;
     background: #f9fafb;
 }

 .info-card img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
     filter: grayscale(0.3);
 }

 .info-card:hover img {
     transform: scale(1.05);
     filter: grayscale(0);
 }

 .card-overlay {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: linear-gradient(180deg, transparent 0%, rgba(26, 26, 46, 0.8) 100%);
     opacity: 0;
     transition: opacity 0.6s ease;
     display: flex;
     align-items: flex-end;
     padding: 30px;
 }

 .info-card:hover .card-overlay {
     opacity: 1;
 }

 .overlay-number {
     font-size: 5em;
     color: rgba(201, 169, 97, 0.3);
     font-weight: 700;
     line-height: 1;
 }

 .icon-badge {
     position: absolute;
     top: 20px;
     right: 20px;
     width: 60px;
     height: 60px;
     background: white;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
     z-index: 10;
     transition: all 0.4s ease;
 }

 .info-card:hover .icon-badge {
     background: #570003;
     transform: rotate(360deg);
 }

 .icon-badge svg {
     width: 30px;
     height: 30px;
     fill: #570003;
     transition: fill 0.4s ease;
 }

 .info-card:hover .icon-badge svg {
     fill: white;
 }

 .card-content {
     padding: 40px 30px;
     text-align: center;
     background: white;
     position: relative;
 }

 .card-number {
     position: absolute;
     top: -25px;
     left: 30px;
     font-size: 4em;
     color: #f3f4f6;
     font-weight: 700;
     z-index: 1;
     transition: color 0.4s ease;
 }

 .info-card:hover .card-number {
     color: rgba(201, 169, 97, 0.2);
 }

 .info-card h5 {
     font-size: 1.4em;
     color: #1a1a2e;
     margin-bottom: 18px;
     font-weight: 400;
     letter-spacing: 1px;
     position: relative;
     z-index: 2;
     transition: color 0.4s ease;
 }

 .info-card:hover h5 {
     color: #570003;
 }

 .info-card p {
     font-size: 0.95em;
     color: #6b7280;
     line-height: 1.8;
     margin: 0;
     position: relative;
     z-index: 2;
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 }

 .decorative-line {
     width: 40px;
     height: 1px;
     background: #570003;
     margin: 20px auto;
     transition: width 0.4s ease;
 }

 .info-card:hover .decorative-line {
     width: 80px;
 }

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

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

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

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

 @media (max-width: 1200px) {
     .cards-grid {
         grid-template-columns: repeat(2, 1fr);
     }
 }

 @media (max-width: 768px) {
     .section-title-1 {
         font-size: 2.2em;
     }

     .section-subtitle {
         font-size: 1em;
     }

     .cards-grid {
         grid-template-columns: 1fr;
         gap: 30px;
     }

     .card-content {
         padding: 35px 25px;
     }
 }

 /* Floating ornament */
 .ornament {
     position: absolute;
     width: 150px;
     height: 150px;
     border: 1px solid rgba(201, 169, 97, 0.2);
     border-radius: 50%;
     pointer-events: none;
 }

 .ornament-1 {
     top: 50px;
     right: 100px;
     animation: rotate 20s linear infinite;
 }

 .ornament-2 {
     bottom: 100px;
     left: 80px;
     animation: rotate 25s linear infinite reverse;
 }

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

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

 /*spotlist*/

 .news-spotlight-section {
     max-width: 1400px;
     margin: 0 auto;
 }

 .content-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 50px;
     padding: 10px;
 }

 .section-column {
     animation: fadeInUp 0.8s ease-out;
 }

 .section-column:nth-child(2) {
     animation-delay: 0.2s;
 }

 .section-header {
     margin-bottom: 40px;
     position: relative;
     padding-bottom: 20px;
 }

 .section-header::after {
     content: '';
     position: absolute;
     bottom: 0;
     left: 0;
     width: 60px;
     height: 2px;
     background: linear-gradient(90deg, #570003, transparent);
 }

 .section-title-2 {
     font-size: 2.2em;
     color: #1a1a2e;
     font-weight: 300;
     letter-spacing: 1px;
     margin-bottom: 10px;
 }

 .section-subtitle-2 {
     font-size: 1em;
     color: #6b7280 !important;
     font-style: italic;
     font-weight: 300;
 }

 /* NEWS LIST STYLES */
 .news-list {
     background: white;
     border: 1px solid #e5e7eb;
     padding: 10px;
 }

 .news-item {
     padding: 25px 30px;
     border-bottom: 1px solid #f3f4f6;
     transition: all 0.3s ease;
     cursor: pointer;
     position: relative;
 }

 .news-item:last-child {
     border-bottom: none;
 }

 .news-item::before {
     content: '';
     position: absolute;
     left: 0;
     top: 0;
     width: 3px;
     height: 100%;
     /*background: #570003;*/
     transform: scaleY(0);
     transition: transform 0.3s ease;
 }

 .news-item:hover {
     background: #fafbfc;
     padding-left: 35px;
 }

 .news-item:hover::before {
     transform: scaleY(1);
 }

 .news-item-grid {
     display: grid;
     grid-template-columns: 80px 1fr auto;
     gap: 20px;
     align-items: center;
 }

 .news-thumbnail {
     width: 80px;
     height: 80px;
     border-radius: 4px;
     overflow: hidden;
     flex-shrink: 0;
 }

 .news-thumbnail img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform 0.4s ease;
     filter: grayscale(0.2);
 }

 .news-item:hover .news-thumbnail img {
     transform: scale(1.1);
     filter: grayscale(0);
 }

 .news-content {
     flex: 1;
 }

 .news-category {
     display: inline-block;
     font-size: 0.75em;
     color: #570003;
     text-transform: uppercase;
     letter-spacing: 1px;
     margin-bottom: 8px;
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
     font-weight: 600;
 }

 .news-title {
     font-size: 1.05em;
     color: #1a1a2e;
     line-height: 1.6;
     margin: 0;
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
     transition: color 0.3s ease;
 }

 .news-item:hover .news-title {
     color: #570003;
 }

 .news-time {
     display: flex;
     align-items: center;
     gap: 8px;
     font-size: 0.85em;
     color: #9ca3af;
     white-space: nowrap;
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 }

 .news-time::before {
     content: '';
     width: 6px;
     height: 6px;
     background: #570003;
     border-radius: 50%;
 }

 /* SPOTLIGHT STYLES */
 .spotlight-box {
     background: white;
     border: 1px solid #e5e7eb;
     overflow: hidden;
     position: relative;
 }

 .spotlight-image {
     width: 100%;
     height: 400px;
     overflow: hidden;
     position: relative;
 }

 .spotlight-image img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform 0.6s ease;
     filter: brightness(0.85);
 }

 .spotlight-box:hover .spotlight-image img {
     transform: scale(1.05);
     filter: brightness(1);
 }

 .spotlight-image::after {
     content: '';
     position: absolute;
     bottom: 0;
     left: 0;
     width: 100%;
     height: 50%;
     background: linear-gradient(to top, rgba(26, 26, 46, 0.8), transparent);
 }

 .spotlight-highlight {
     padding: 35px 40px;
     position: relative;
 }

 .spotlight-highlight::before {
     content: '';
     position: absolute;
     top: 0;
     left: 40px;
     width: 40px;
     height: 2px;
     background: #570003;
 }

 .spotlight-date {
     display: inline-block;
     font-size: 0.8em;
     color: #570003;
     text-transform: uppercase;
     letter-spacing: 1.5px;
     margin-bottom: 15px;
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
     font-weight: 600;
 }

 .spotlight-title {
     font-size: 1.6em !important;
     color: #1a1a2e !important;
     font-weight: 400;
     line-height: 1.5;
     margin-bottom: 15px;
     transition: color 0.3s ease;
 }

 .spotlight-box:hover .spotlight-title {
     color: #570003 !important;
 }

 .spotlight-desc {
     font-size: 1em !important;
     color: black !important;
     line-height: 1.8;
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 }

 /* BUTTON STYLES */
 .view-all-btn {
     margin-top: 30px;
     text-align: center;
 }

 .btn-view-all {
     display: inline-block;
     padding: 14px 45px;
     background: transparent;
     color: #1a1a2e;
     border: 1px solid #d1d5db;
     text-decoration: none;
     font-size: 0.9em;
     text-transform: uppercase;
     letter-spacing: 2px;
     transition: all 0.3s ease;
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
     font-weight: 500;
     cursor: pointer;
 }

 .btn-view-all:hover {
     background: #1a1a2e;
     color: white;
     border-color: #1a1a2e;
     transform: translateY(-2px);
     box-shadow: 0 5px 15px rgba(26, 26, 46, 0.2);
 }

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

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

 @media (max-width: 1024px) {
     .content-grid {
         grid-template-columns: 1fr;
         gap: 60px;
     }

     .news-item-grid {
         grid-template-columns: 70px 1fr;
         gap: 15px;
     }

     .news-time {
         grid-column: 2;
         margin-top: 8px;
     }
 }

 @media (max-width: 768px) {
     body {
         padding: 50px 15px;
     }

     .section-title-2 {
         font-size: 1.8em;
     }

     .news-item {
         padding: 20px;
     }

     .news-item-grid {
         grid-template-columns: 60px 1fr;
         gap: 12px;
     }

     .news-thumbnail {
         width: 60px;
         height: 60px;
     }

     .spotlight-highlight {
         padding: 25px 20px;
     }

     .spotlight-highlight::before {
         left: 20px;
     }

     .spotlight-title {
         font-size: 1.3em;
     }
 }

 /* Scrollbar Styling */
 .news-list {
     max-height: 600px;
     overflow-y: auto;
 }

 .news-list::-webkit-scrollbar {
     width: 6px;
 }

 .news-list::-webkit-scrollbar-track {
     background: #f3f4f6;
 }

 .news-list::-webkit-scrollbar-thumb {
     background: #570003;
     border-radius: 3px;
 }

 .news-list::-webkit-scrollbar-thumb:hover {
     background: #b8975a;
 }


 /*blog*/

 .news-dark-section {
     max-width: 1400px;
     margin: 0 auto;
     position: relative;
     padding: 80px 0;
 }

 .text-center {
     text-align: center;
 }

 /* HEADER */
 .section-header {
     margin-bottom: 60px;
     animation: fadeInDown 0.8s ease-out;
 }

 .small-title {
     font-size: 0.85em;
     color: #570003;
     text-transform: uppercase;
     letter-spacing: 3px;
     margin-bottom: 15px;
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
     font-weight: 600;
 }

 .main-title {
     font-size: 3.5em;
     color: #ffffff;
     font-weight: 300;
     letter-spacing: 2px;
     margin-bottom: 50px;
 }

 /* TABS */
 .news-tabs {
     display: flex;
     justify-content: center;
     gap: 10px;
     list-style: none;
     margin-bottom: 50px;
     flex-wrap: wrap;
     animation: fadeInUp 0.8s ease-out 0.2s backwards;
 }

 .news-tabs .nav-item {
     margin: 0;
 }

 .news-tabs .nav-link {
     padding: 12px 30px;
     background: transparent;
     color: #b8b8c8;
     border: 1px solid rgba(255, 255, 255, 0.15);
     text-decoration: none;
     font-size: 0.85em;
     text-transform: uppercase;
     letter-spacing: 2px;
     transition: all 0.4s ease;
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
     font-weight: 500;
     cursor: pointer;
     position: relative;
     overflow: hidden;
 }

 .news-tabs .nav-link::before {
     content: '';
     position: absolute;
     bottom: 0;
     left: 50%;
     transform: translateX(-50%) scaleX(0);
     width: 100%;
     height: 2px;
     background: #570003;
     transition: transform 0.4s ease;
 }

 .news-tabs .nav-link:hover,
 .news-tabs .nav-link.active {
     color: #570003;
     border-color: #570003;
 }

 .news-tabs .nav-link.active::before {
     transform: translateX(-50%) scaleX(1);
 }

 /* TAB CONTENT */
 .tab-content {
     animation: fadeIn 0.6s ease-out;
 }

 .tab-pane {
     display: none;
 }

 .tab-pane.active {
     display: block;
     animation: fadeInUp 0.6s ease-out;
 }

 /* NEWS GRID */
 .news-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 35px;
     margin-bottom: 35px;
 }

 /* NEWS CARD */
 .news-card {
     background: rgba(255, 255, 255, 0.05);
     backdrop-filter: blur(10px);
     border: 1px solid rgba(255, 255, 255, 0.1);
     overflow: hidden;
     transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
     cursor: pointer;
     position: relative;
     animation: fadeInUp 0.8s ease-out backwards;
 }

 .news-card:nth-child(1) {
     animation-delay: 0.1s;
 }

 .news-card:nth-child(2) {
     animation-delay: 0.2s;
 }

 .news-card:nth-child(3) {
     animation-delay: 0.3s;
 }

 .news-card:nth-child(4) {
     animation-delay: 0.4s;
 }

 .news-card:nth-child(5) {
     animation-delay: 0.5s;
 }

 .news-card:nth-child(6) {
     animation-delay: 0.6s;
 }

 .news-card::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 3px;
     background: linear-gradient(90deg, #570003, #b8975a);
     transform: scaleX(0);
     transition: transform 0.4s ease;
 }

 .news-card:hover::before {
     transform: scaleX(1);
 }

 .news-card:hover {
     transform: translateY(-10px);
     background: rgba(255, 255, 255, 0.08);
     border-color: rgba(201, 169, 97, 0.3);
     box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
 }

 /* NEWS IMAGE */
 .news-img {
     position: relative;
     width: 100%;
     height: 280px;
     overflow: hidden;
 }

 .news-img img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform 0.6s ease;
     filter: brightness(0.8);
 }

 .news-card:hover .news-img img {
     transform: scale(1.08);
     filter: brightness(1);
 }

 .news-img::after {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: linear-gradient(180deg, transparent 0%, rgba(26, 26, 46, 0.6) 100%);
 }

 /* BADGE */
 .badge {
     position: absolute;
     top: 20px;
     left: 20px;
     padding: 8px 18px;
     background: #570003;
     color: #1a1a2e;
     font-size: 0.75em;
     text-transform: uppercase;
     letter-spacing: 1.5px;
     z-index: 10;
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
     font-weight: 700;
     box-shadow: 0 4px 15px rgba(201, 169, 97, 0.4);
 }

 /* NEWS BODY */
 .news-body {
     padding: 35px 30px;
     position: relative;
     background: linear-gradient(135deg, #667eea 0%, #570003 100%);
 }

 .news-body h5 {
     font-size: 1.6em !important;
     color: #ffffff;
     font-weight: 400;
     margin-bottom: 15px;
     line-height: 1.4;
     transition: color 0.3s ease;
 }

 .news-card:hover .news-body h5 {
     color: #570003;
 }

 .news-body p {
     font-size: 1em !important;
     color: #b8b8c8;
     line-height: 1.7;
     margin-bottom: 20px;
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 }

 .news-body a {
     color: white !important;
     text-decoration: none;
     font-size: 0.9em;
     text-transform: uppercase;
     letter-spacing: 1.5px;
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
     font-weight: 600;
     display: inline-flex;
     align-items: center;
     gap: 8px;
     transition: all 0.3s ease;
     position: relative;
 }

 .news-body a::after {
     content: '→';
     transition: transform 0.3s ease;
 }

 .news-body a:hover {
     gap: 12px;
     color: #ffffff;
 }

 .news-body a:hover::after {
     transform: translateX(5px);
 }

 /* DECORATIVE LINE */
 .decorative-line {
     width: 50px;
     height: 2px;
     background: #570003;
     margin-bottom: 20px;
     transition: width 0.4s ease;
 }

 .news-card:hover .decorative-line {
     width: 80px;
 }

 /* ANIMATIONS */
 @keyframes fadeInDown {
     from {
         opacity: 0;
         transform: translateY(-40px);
     }

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

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

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

 @keyframes fadeIn {
     from {
         opacity: 0;
     }

     to {
         opacity: 1;
     }
 }

 /* RESPONSIVE */
 @media (max-width: 1024px) {
     .news-grid {
         grid-template-columns: repeat(2, 1fr);
     }
 }

 @media (max-width: 768px) {
     body {
         padding: 60px 15px;
     }

     .main-title {
         font-size: 2.2em;
     }

     .news-grid {
         grid-template-columns: 1fr;
         gap: 25px;
     }

     .news-tabs {
         gap: 8px;
     }

     .news-tabs .nav-link {
         padding: 10px 20px;
         font-size: 0.75em;
     }

     .news-body {
         padding: 25px 20px;
     }

     .news-body h5 {
         font-size: 1.3em;
     }
 }

 /* ORNAMENTAL ELEMENTS */
 .ornament {
     position: absolute;
     width: 200px;
     height: 200px;
     border: 1px solid rgba(201, 169, 97, 0.1);
     border-radius: 50%;
     pointer-events: none;
 }

 .ornament-1 {
     top: -50px;
     right: 100px;
     animation: rotate 30s linear infinite;
 }

 .ornament-2 {
     bottom: -80px;
     left: 80px;
     animation: rotate 40s linear infinite reverse;
 }

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

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




 .faculty-container {
     display: flex;
     min-height: 100vh;
     max-width: 1400px;
     margin: 0 auto;
     gap: 30px;
     padding: 30px 20px;
     margin-top: 60px;
 }

 /* LEFT SIDEBAR - FIXED */
 .left-sidebar {
     width: 350px;
     position: sticky;
     top: 30px;
     height: fit-content;
     flex-shrink: 0;
 }

 .teacher-cards-wrapper {
     display: flex;
     flex-direction: column;
     gap: 20px;
 }

 .teacher-card {
     background: #ffffff;
     border-radius: 16px;
     padding: 20px;
     cursor: pointer;
     transition: all 0.3s ease;
     box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
     border: 1px solid transparent;
 }

 .teacher-card:hover {
     transform: translateY(-4px);
     box-shadow: 0 8px 24px rgba(13, 110, 253, 0.15);
     border-color: #667eea;
 }

 .teacher-card.active {
     border-color: #667eea;
     background: linear-gradient(135deg, rgba(13, 110, 253, 0.05) 0%, rgba(0, 198, 255, 0.05) 100%);
 }

 .teacher-card-content {
     display: flex;
     flex-direction: column;
     align-items: center;
     text-align: center;
 }

 .teacher-img {
     width: 100px;
     height: 100px;
     border-radius: 50%;
     overflow: hidden;
     margin-bottom: 15px;
     border: 1px solid #f1f3f5;
     transition: 0.3s;
 }

 .teacher-card:hover .teacher-img {
     border-color: #667eea;
     transform: scale(1.05);
 }

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

 .teacher-info h5 {
     font-size: 1.2rem;
     font-weight: 600;
     margin-bottom: 5px;
     color: #212529;
 }

 .designation {
     display: block;
     font-size: 0.9rem;
     color: #6c757d;
     margin-bottom: 12px;
 }

 .course-badge {
     display: inline-block;
     background: rgba(13, 110, 253, 0.1);
     color: #667eea;
     font-size: 0.85rem;
     padding: 6px 14px;
     border-radius: 20px;
     font-weight: 500;
     margin-bottom: 12px;
 }

 .view-profile-btn {
     width: 100%;
     padding: 8px 20px;
     border: 1px solid #667eea;
     background: transparent;
     color: #667eea;
     border-radius: 8px;
     font-weight: 600;
     cursor: pointer;
     transition: all 0.3s ease;
 }

 .view-profile-btn:hover {
     background: #667eea;
     color: white;
 }

 /* RIGHT CONTENT - SCROLLABLE */
 .right-content {
     flex: 1;
     min-width: 0;
 }

 .profile-hero {
     background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
     color: #fff;
     padding: 40px;
     border-radius: 16px 16px 0 0;
     box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
 }

 .profile-hero-content {
     display: flex;
     align-items: center;
     gap: 40px;
 }

 .hero-text {
     flex: 1;
 }

 .profile-hero h1 {
     font-size: 2.5rem;
     font-weight: 700;
     margin-bottom: 8px;
     color: #fff;
 }

 .profile-hero h5 {
     color: #ff6b6b;
     font-weight: 500;
     margin-bottom: 25px;
     font-size: 1.2rem;
 }

 .hero-info {
     list-style: none;
     padding: 0;
     margin: 0;
 }

 .hero-info li {
     margin-bottom: 12px;
     font-size: 1rem;
     color: #e0e0e0;
     display: flex;
     align-items: center;
     gap: 10px;
 }

 .hero-info li span {
     color: #fff;
 }

 .hero-image {
     width: 200px;
     height: 200px;
     flex-shrink: 0;
 }

 .hero-image img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     border-radius: 12px;
     border: 4px solid rgba(255, 255, 255, 0.1);
 }

 .hero-summary {
     background: #5b5b5b;
     color: #eaeaea;
     padding: 20px 40px;
     font-size: 1rem;
     line-height: 1.6;
     border-radius: 0 0 16px 16px;
     box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
 }

 .content-card {
     background: white;
     border-radius: 16px;
     padding: 35px;
     margin-top: 25px;
     box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
 }

 .section-title {
     font-size: 1.5rem;
     font-weight: 700;
     margin-bottom: 30px;
     color: #212529;
     position: relative;
     padding-bottom: 12px;
 }

 .section-title::after {
     content: '';
     position: absolute;
     left: 0;
     bottom: 0;
     width: 60px;
     height: 3px;
     background: #70181f;
     border-radius: 2px;
 }

 /* TIMELINE */
 .timeline {
     position: relative;
     padding-left: 35px;
 }

 .timeline::before {
     content: "";
     position: absolute;
     left: 8px;
     top: 0;
     width: 2px;
     height: 100%;
     background: #70181f;
 }

 .timeline-item {
     position: relative;
     margin-bottom: 35px;
 }

 .timeline-item .dot {
     position: absolute;
     left: -31px;
     top: 6px;
     width: 18px;
     height: 18px;
     background: #fff;
     border: 3px solid #70181f;
     border-radius: 50%;
     z-index: 2;
     transition: 0.3s;
 }

 .timeline-item:hover .dot {
     transform: scale(1.3);
     box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.1);
 }

 .timeline-content {
     background: #f8f9fa;
     padding: 20px;
     border-radius: 12px;
     border-left: 3px solid #70181f;
 }

 .timeline-header {
     display: flex;
     justify-content: space-between;
     align-items: start;
     margin-bottom: 10px;
 }

 .timeline-header h6 {
     font-weight: 700;
     font-size: 1.1rem;
     color: #212529;
 }

 .company-logo {
     width: 45px;
     height: 45px;
     border-radius: 8px;
     object-fit: cover;
 }

 .company {
     font-size: 0.9rem;
     color: #6c757d;
     margin-bottom: 12px;
 }

 .timeline-content ul {
     padding-left: 20px;
     margin: 0;
 }

 .timeline-content ul li {
     font-size: 0.95rem;
     color: #495057;
     margin-bottom: 6px;
     line-height: 1.6;
 }

 /* EDUCATION */
 .education-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
     gap: 25px;
 }

 .education-item {
     display: flex;
     gap: 15px;
     padding: 20px;
     background: #f8f9fa;
     border-radius: 12px;
     transition: 0.3s;
 }

 .education-item:hover {
     background: #e9ecef;
     transform: translateX(5px);
 }

 .edu-logo {
     width: 50px;
     height: 50px;
     flex-shrink: 0;
     border-radius: 8px;
 }

 .education-item h6 {
     font-weight: 700;
     margin-bottom: 5px;
     color: #212529;
 }

 .edu-sub {
     font-size: 0.9rem;
     color: #6c757d;
     margin-bottom: 3px;
 }

 .edu-degree {
     font-size: 0.9rem;
     color: #495057;
     font-weight: 500;
 }

 /* SKILLS */
 .skills-wrap {
     display: flex;
     flex-wrap: wrap;
     gap: 12px;
 }

 .skill-pill {
     display: flex;
     align-items: center;
     gap: 8px;
     background: #f8f9fa;
     padding: 10px 18px;
     border-radius: 25px;
     font-size: 0.95rem;
     color: #212529;
     border: 2px solid #e9ecef;
     transition: 0.3s;
     font-weight: 500;
 }

 .skill-pill:hover {
     background: #667eea;
     color: white;
     border-color: #667eea;
     transform: translateY(-2px);
 }

 .skill-pill::before {
     content: "✓";
     color: #28a745;
     font-size: 1rem;
     font-weight: 700;
 }

 .skill-pill:hover::before {
     color: white;
 }

 /* AWARDS */
 .awards-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
     gap: 20px;
 }

 .award-item {
     padding: 20px;
     background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
     border-radius: 12px;
     border-left: 4px solid #ffc107;
     transition: 0.3s;
 }

 .award-item:hover {
     transform: translateY(-4px);
     box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
 }

 .award-item h6 {
     font-weight: 700;
     margin-bottom: 8px;
     color: #212529;
     font-size: 1.05rem;
 }

 .award-item p {
     font-size: 0.9rem;
     color: #6c757d;
     margin: 0;
 }

 hr {
     border: none;
     height: 1px;
     background: linear-gradient(90deg, transparent, #dee2e6, transparent);
     margin: 35px 0;
 }

 /* RESPONSIVE */
 @media (max-width: 992px) {
     .faculty-container {
         flex-direction: column;
     }

     .left-sidebar {
         width: 100%;
         position: relative;
         top: 0;
     }

     .teacher-cards-wrapper {
         flex-direction: row;
         overflow-x: auto;
         padding-bottom: 10px;
     }

     .teacher-card {
         min-width: 250px;
     }

     .profile-hero-content {
         flex-direction: column-reverse;
         text-align: center;
     }

     .hero-info li {
         justify-content: center;
     }
 }

 @media (max-width: 576px) {
     .profile-hero {
         padding: 25px;
     }

     .profile-hero h1 {
         font-size: 1.8rem;
     }

     .content-card {
         padding: 20px;
     }
 }


        .events-carousel-section {
            padding: 80px 20px 20px;
            background: #ffffff;
            position: relative;
        }

        /* Book Ticket Button at Top */
        .events-register-btn-wrapper {
            text-align: center;
            margin-bottom: 30px;
        }

        .events-register-btn-wrapper button {
            background: transparent;
            border: 2px solid var(--maroon);
            color: var(--maroon);
            padding: 12px 30px;
            border-radius: 30px;
            font-size: 1rem;
            font-weight: 600;
            display: inline-flex;
            align-items: center;
            gap: 10px;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .events-register-btn-wrapper button:hover {
            background: var(--maroon);
            color: var(--white);
            transform: translateY(-2px);
            box-shadow: 0 5px 20px rgba(112, 24, 31, 0.4);
        }

        /* Section Header */
        .events-carousel-header {
            text-align: center;
            margin-bottom: 20px;
        }

        .events-carousel-title {
            font-family: 'Bebas Neue', sans-serif;
            font-size: 4.5rem;
            font-weight: 400;
            letter-spacing: 2px;
            margin-bottom: 15px;
            line-height: 1;
            color: var(--black);
        }

        .events-carousel-title .events-title-highlight {
            color: var(--maroon);
        }

        .events-carousel-subtitle {
            font-size: 1rem;
            color: rgba(0, 0, 0, 0.6);
            font-weight: 400;
            margin-bottom: 60px;
        }

        .events-carousel-subtitle span {
            margin: 0 15px;
        }

        /* Carousel Container */
        .events-carousel-container {
            position: relative;
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 70px;
        }

        .events-carousel-wrapper {
            overflow: hidden;
            position: relative;
            width: 100%;
        }

        .events-carousel-track {
            display: flex;
            gap: 25px;
            transition: transform 0.5s cubic-bezier(0.645, 0.045, 0.355, 1);
            width: max-content;
        }

        /* Event Card */
        .events-carousel-card {
            width: 320px;
            min-width: 320px;
            max-width: 320px;
            height: 450px;
            border-radius: 20px;
            overflow: hidden;
            position: relative;
            cursor: pointer;
            transition: all 0.4s ease;
            flex-shrink: 0;
        }

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

        .events-carousel-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(180deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.8) 100%);
            z-index: 1;
        }

        .events-carousel-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.4s ease;
        }

        .events-carousel-card:hover .events-carousel-image {
            transform: scale(1.1);
        }

        /* Event Card Content */
        .events-carousel-content {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            padding: 25px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            z-index: 2;
        }

        /* Top Section */
        .events-carousel-top {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
        }

        .events-carousel-badge {
            background: var(--maroon);
            color: var(--white);
            padding: 8px 18px;
            border-radius: 25px;
            font-size: 0.75rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .events-carousel-signin {
            background: var(--maroon);
            color: var(--white);
            padding: 8px 20px;
            border-radius: 25px;
            font-size: 0.85rem;
            font-weight: 600;
            border: none;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .events-carousel-signin:hover {
            background: var(--white);
            color: var(--maroon);
            transform: scale(1.05);
        }

        /* Bottom Section */
        .events-carousel-bottom {
            display: flex;
            flex-direction: column;
            gap: 15px;
        }

        .events-carousel-event-title {
            font-size: 1.8rem;
            font-weight: 700;
            line-height: 1.2;
            color: var(--white);
        }

        .events-carousel-details {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .events-carousel-detail-item {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 0.9rem;
            color: rgba(255, 255, 255, 0.9);
        }

        .events-carousel-detail-item i {
            color: var(--maroon);
            font-size: 1rem;
        }

        .events-carousel-book-btn {
            background: var(--maroon);
            color: var(--white);
            padding: 14px 30px;
            border-radius: 30px;
            font-size: 0.95rem;
            font-weight: 700;
            border: none;
            cursor: pointer;
            transition: all 0.3s ease;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
        }

        .events-carousel-book-btn:hover {
            background: var(--white);
            color: var(--maroon);
            transform: translateX(5px);
        }

        /* Carousel Navigation */
        .events-carousel-nav {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(10px);
            border: 2px solid var(--maroon);
            width: 50px;
            height: 50px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s ease;
            z-index: 100;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
        }

        .events-carousel-nav:hover {
            background: var(--maroon);
            border-color: var(--maroon);
            transform: translateY(-50%) scale(1.1);
        }

        .events-carousel-nav i {
            font-size: 1.5rem;
            color: var(--maroon);
        }

        .events-carousel-nav:hover i {
            color: var(--white);
        }

        .events-carousel-nav.events-carousel-prev {
            left: 0;
        }

        .events-carousel-nav.events-carousel-next {
            right: 0;
        }

        /* Carousel Dots */
        .events-carousel-dots {
            display: flex;
            justify-content: center;
            gap: 12px;
            margin-top: 40px;
            padding: 20px 0;
        }

        .events-carousel-dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: rgba(112, 24, 31, 0.3);
            cursor: pointer;
            transition: all 0.3s ease;
            border: 2px solid transparent;
        }

        .events-carousel-dot:hover {
            background: rgba(112, 24, 31, 0.6);
            transform: scale(1.2);
        }

        .events-carousel-dot.events-dot-active {
            background: var(--maroon);
            width: 40px;
            border-radius: 6px;
            border: 2px solid var(--maroon);
        }

        /* View All Events Button */
        .events-view-all-wrapper {
            text-align: center;
            margin-top: 50px;
        }

        .events-view-all-btn {
            background: var(--maroon);
            color: var(--white);
            padding: 16px 40px;
            border-radius: 35px;
            font-size: 1.1rem;
            font-weight: 700;
            border: none;
            cursor: pointer;
            transition: all 0.3s ease;
            text-transform: uppercase;
            letter-spacing: 1px;
            display: inline-flex;
            align-items: center;
            gap: 12px;
        }

        .events-view-all-btn:hover {
            background: var(--black);
            transform: translateY(-3px);
            box-shadow: 0 8px 25px rgba(112, 24, 31, 0.4);
        }

        .events-view-all-btn i {
            font-size: 1.2rem;
            transition: transform 0.3s ease;
        }

        .events-view-all-btn:hover i {
            transform: translateX(5px);
        }

        /* Responsive */
        @media (max-width: 1200px) {
            .events-carousel-card {
                width: 280px;
                min-width: 280px;
                max-width: 280px;
                height: 420px;
            }

            .events-carousel-title {
                font-size: 3.5rem;
            }
        }

        @media (max-width: 768px) {
            .events-carousel-title {
                font-size: 2.5rem;
            }

            .events-carousel-subtitle {
                font-size: 0.85rem;
            }

            .events-carousel-card {
                width: 260px;
                min-width: 260px;
                max-width: 260px;
                height: 400px;
            }

            .events-carousel-event-title {
                font-size: 1.5rem;
            }

            .events-carousel-container {
                padding: 0 50px;
            }

            .events-carousel-nav {
                width: 40px;
                height: 40px;
            }

            .events-carousel-nav i {
                font-size: 1.2rem;
            }

            .events-view-all-btn {
                padding: 14px 35px;
                font-size: 1rem;
            }
        }

        @media (max-width: 576px) {
            .events-carousel-container {
                padding: 0 50px;
            }

            .events-carousel-card {
                width: 280px;
                min-width: 280px;
                max-width: 280px;
                height: 420px;
            }

            .events-view-all-btn {
                padding: 12px 30px;
                font-size: 0.95rem;
            }
            
            .events-carousel-wrapper {
                display: flex;
                justify-content: center;
            }
        }

        /* Animations */
        @keyframes eventsCarouselFadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .events-carousel-header {
            animation: eventsCarouselFadeInUp 0.8s ease-out;
        }

        .events-carousel-card {
            animation: eventsCarouselFadeInUp 1s ease-out;
        }

        .events-carousel-card:nth-child(1) { animation-delay: 0.1s; }
        .events-carousel-card:nth-child(2) { animation-delay: 0.2s; }
        .events-carousel-card:nth-child(3) { animation-delay: 0.3s; }
        .events-carousel-card:nth-child(4) { animation-delay: 0.4s; }
        .events-carousel-card:nth-child(5) { animation-delay: 0.5s; }


        .user-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%; /* if you want circular avatars */
}