.hero-banner {
     background-image: url("../images/hero-banner.png");
     height: 340px;
     background-size: cover;
     background-position: center;
     position: relative;
     display: flex;
     align-items: center;
 }

 /* Lighter overlay (left strong → right transparent) */
 .hero-banner::before {
     content: "";
     position: absolute;
     inset: 0;

 }

 /* Keep content above overlay */
 .hero-content {
     position: relative;
     z-index: 2;
     color: #ffffff;
 }

 /* Subtitle (Red highlight) */
 .hero-subtitle {
     color: #d94148;
     font-weight: 600;
     letter-spacing: 1px;
     margin-bottom: 5px;
 }

 /* Main heading */
 .hero-title {
     font-size: 2.4rem;
     font-weight: 700;
     margin-bottom: 10px;
 }

 /* Tagline with subtle highlight */
 .hero-tagline {
     color: #ffffff;
     /* pure white for max visibility */
     font-weight: 500;
     background: rgba(10, 44, 85, 0.75);
     /* strong navy background */
     display: inline-block;
     padding: 6px 12px;
     border-left: 4px solid #d94148;
     /* red accent */
     border-radius: 4px;
 }

 /* Optional: responsive */
 @media (max-width: 768px) {
     .hero-title {
         font-size: 1.8rem;
     }
 }

 /* Base animation */
 .animate {
     opacity: 0;
     transform: translateY(30px);
     animation: fadeUp 0.8s ease forwards;
 }

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

 /* Delays for stagger effect */
 .delay-1 {
     animation-delay: 0.2s;
 }

 .delay-2 {
     animation-delay: 0.5s;
 }

 .delay-3 {
     animation-delay: 0.8s;
 }

 .notice-bar {
     display: flex;
     align-items: center;
     background: #adbbc9c6;
     border-radius: 6px;
     padding: 8px 12px;
     overflow: hidden;
     gap: 12px;
 }

 /* Left label */
 .notice-label {
     background: #d94148;
     padding: 4px 10px;
     border-radius: 4px;
     font-weight: 600;
     color: white;
     white-space: nowrap;
 }

 /* Scrolling container */
 .notice-track {
     overflow: hidden;
     flex: 1;
 }

 /* Moving text */
 .notice-content {
     display: inline-block;
     white-space: nowrap;
     animation: scrollText 20s linear infinite;
     color: #0a2c55;
     font-size: 14px;
 }

 /* Dots between messages */
 .dot {
     margin: 0 12px;
     color: #d94148;
 }

 /* Pause button */
 .notice-btn {
     background: #0a2c55;
     color: #fff;
     border: none;
     padding: 5px 12px;
     border-radius: 20px;
     cursor: pointer;
 }

 /* Animation */
 @keyframes scrollText {
     from {
         transform: translateX(0%);
     }

     to {
         transform: translateX(-50%);
     }
 }

 /* Pause on hover */
 .notice-track:hover .notice-content {
     animation-play-state: paused;
 }

 body {
     background: #f5f7fb;
 }

 /* Card */
 .custom-card {
     background: #fff;
     border-radius: 12px;
     padding: 15px;
     box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
     height: 100%;
 }

 /* Header */
 .card-header-custom {
     margin-bottom: 15px;
 }

 .badge-title {
     background: #1d3b72;
     color: #fff;
     padding: 8px 16px;
     border-radius: 8px;
     font-weight: 500;
     display: inline-block;
 }

 .view-all {
     font-size: 14px;
     color: #1d3b72;
     text-decoration: none;
     font-weight: 500;
 }

 /* Announcement list */
 .announcement-list {
     max-height: 300px;
     overflow-y: auto;
 }

 .announcement-list ul {
     list-style: none;
     padding-left: 0;
     margin: 0;
 }

 .announcement-list li {
     padding: 10px 0;
     border-bottom: 1px solid #eee;
     font-size: 14px;
     display: flex;
     justify-content: space-between;
     align-items: center;
 }

 .announcement-list li a {
     font-weight: 400;
     color: var(--color-paragraph);
 }

 /* FAQ */
 .faq-scroll {
     max-height: 300px;
     overflow-y: auto;
 }

 .custom-accordion {
     border: none;
     margin-bottom: 10px;
 }

 .accordion-button {
     background: #f8f9fc;
     border-radius: 10px !important;
     font-size: 14px;
     box-shadow: none;
 }

 .accordion-button:not(.collapsed) {
     background: #e9f0ff;
     color: #1d3b72;
 }

 .accordion-body {
     font-size: 13px;
     color: #555;
 }



 /* FULL WIDTH BACKGROUND */
 .about-wrapper {
     position: relative;
     padding: 80px 0;
     background-color: #483b70;
     background-image: url("../images/diamond-upholstery.png");
 }

 /* subtle pattern overlay (optional premium touch) */
 .about-wrapper::before {
     content: "";
     position: absolute;
     inset: 0;

     opacity: 0.05;
 }

 /* WHITE CARDS */
 .about-card {
     background: #fff;
     border-radius: 16px;
     padding: 30px;
     height: 100%;
     box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
     position: relative;
     z-index: 1;
 }

 /* TITLE */
 .about-title {
     font-size: 32px;
     font-weight: 700;
     color: #0a2c55;
     margin-bottom: 20px;
     position: relative;
 }

 /* underline accent */
 .about-title::after {
     content: "";
     width: 60px;
     height: 4px;
     background: #d94148;
     position: absolute;
     left: 0;
     bottom: -8px;
     border-radius: 2px;
 }

 /* TEXT */
 .about-card p {
     font-size: 15px;
     color: #555;
     line-height: 1.7;
     margin-bottom: 15px;
 }

 /* IMAGE CARD */
 .image-card {
     padding: 0;
     overflow: hidden;
 }

 .image-card img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     border-radius: 16px;
     transition: transform 0.5s ease;
 }

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

 /* RESPONSIVE */
 @media (max-width: 992px) {
     .about-wrapper {
         padding: 50px 0;
     }

     .about-title {
         font-size: 26px;
     }
 }



 /* SECTION BACKGROUND */
 .news-members-section {
     padding: 70px 0;
     background: linear-gradient(120deg, #f5f7fb, #eef2ff);
 }

 /* WHITE CARD */
 .white-card {
     background: #fff;
     padding: 25px;
     border-radius: 16px;
     box-shadow: 0 10px 35px rgba(0, 0, 0, 0.06);
     height: 100%;
 }

 /* TITLE */
 .section-title {
     font-size: 22px;
     font-weight: 700;
     color: #0a2c55;
     margin-bottom: 20px;
     position: relative;
 }

 .section-title::after {
     content: "";
     width: 50px;
     height: 3px;
     background: #d94148;
     position: absolute;
     left: 0;
     bottom: -8px;
 }

 /* PHOTO GRID */
 /* PHOTO GRID */
 .photo-grid {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 15px;
 }

 /* PHOTO ITEM */
 .photo-item {
     position: relative;
     border-radius: 12px;
     overflow: hidden;
     cursor: pointer;
 }

 /* IMAGE */
 .photo-item img {
     width: 100%;
     height: 160px;
     object-fit: cover;
     transition: 0.4s ease;
 }

 /* CONTENT OVERLAY */
 .photo-content {
     position: absolute;
     bottom: 0;
     width: 100%;
     padding: 12px;
     background: linear-gradient(to top, rgba(0, 0, 0, 0.75), transparent);
     color: #fff;
     transition: 0.3s ease;
 }

 /* TEXT */
 .photo-content h6 {
     font-size: 14px;
     font-weight: 600;
     margin: 0;
 }

 .photo-content p {
     font-size: 12px;
     margin: 0;
     opacity: 0.85;
 }

 /* HOVER EFFECT */
 .photo-item:hover img {
     transform: scale(1.1);
 }

 .photo-item:hover .photo-content {
     background: linear-gradient(to top, rgba(10, 44, 85, 0.9), transparent);
 }

 /* MEMBERS GRID */
 .members-grid {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 15px;
 }

 /* MEMBER CARD */
 .member-card {
     background: #f8faff;
     border-radius: 14px;
     padding: 25px 15px;
     text-align: center;
     cursor: pointer;
     transition: 0.3s ease;
     border: 2px solid transparent;
 }

 /* ICON */
 .member-card .icon {
     font-size: 28px;
     margin-bottom: 10px;
 }

 /* TEXT */
 .member-card h5 {
     font-size: 14px;
     font-weight: 600;
     color: #0a2c55;
     margin: 0;
 }

 /* HOVER EFFECT */
 .member-card:hover {
     background: #0a2c55;
     color: #fff;
     transform: translateY(-5px);
 }

 .member-card:hover h5 {
     color: #fff;
 }

 /* SPECIAL HIGHLIGHT CARD */
 .member-card.highlight {
     background: linear-gradient(135deg, #0a2c55, #d94148);
     color: #fff;
 }

 .member-card.highlight h5 {
     color: #fff;
 }

 /* RESPONSIVE */
 @media (max-width: 768px) {
     .photo-item img {
         height: 120px;
     }
 }



 /* MODAL BASE */
 .custom-modal {
     border-radius: 16px;
     overflow: hidden;
     border: none;
 }

 /* CLOSE BUTTON */
 .custom-close {
     position: absolute;
     top: 15px;
     right: 15px;
     background: #fff;
     border: 1px solid white;
     font-size: 22px;
     line-height: 1;
     border-radius: 50%;
     width: 35px;
     height: 35px;
     cursor: pointer;
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
     z-index: 10;
 }

 .custom-close:hover {
     background: #d94148;
     color: #fff;
 }

 /* LEFT CONTENT */
 .modal-logo {
     width: 140px;
 }

 .modal-title {
     font-size: 26px;
     font-weight: 700;
     color: #0a2c55;
 }

 .modal-subtitle {
     font-size: 14px;
     color: #666;
     margin-bottom: 15px;
 }

 /* LIST */
 .modal-list {
     list-style: none;
     padding: 0;
 }

 .modal-list li {
     font-size: 14px;
     margin-bottom: 8px;
     color: #333;
 }

 /* BUTTONS */
 .register-btn {
     background: linear-gradient(135deg, #0a2c55, #d94148);
     color: #fff;
     padding: 10px 20px;
     border-radius: 8px;
     margin-right: 10px;
     text-decoration: none;
 }

 .secondary-btn {
     border: 1px solid #0a2c55;
     color: #0a2c55;
     padding: 10px 20px;
     border-radius: 8px;
 }

 /* RIGHT SIDE */
 .modal-right {
     background: url('https://bjmf.in/img/worldcon-2026-new.png') center/cover no-repeat;
     position: relative;
     background-size: 80%;
 }

 /* OVERLAY */
 .modal-right .overlay {
     position: absolute;
     inset: 0;
     background: rgba(10, 44, 85, 0.8);
     display: flex;
     align-items: center;
     justify-content: center;
 }

 /* BADGE */
 .badge-live {
     background: #d94148;
     color: #fff;
     padding: 8px 14px;
     border-radius: 20px;
     font-size: 12px;
 }

 .modal-right::before {
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
 }

 /* FULL WIDTH BACKGROUND */
 .counter-section {
     position: relative;
     padding: 80px 0;
     background: linear-gradient(135deg, #e8f0ff, #ffe9eb);
     /* 👈 light navy + light red */
     overflow: hidden;
 }

 /* TEXTURE PATTERN */
 .counter-section::before {
     content: "";
     position: absolute;
     inset: 0;
     background: url('https://www.transparenttextures.com/patterns/cubes.png');
     opacity: 0.08;
 }

 /* COUNTER BOX */
 .counter-box {
     background: #ffffff;
     border-radius: 16px;
     padding: 30px 15px;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
     transition: 0.3s ease;
 }

 /* ICON */
 .counter-icon {
     font-size: 32px;
     margin-bottom: 10px;
 }

 /* NUMBER */
 .counter-box h2 {
     font-size: 34px;
     font-weight: 700;
     margin-bottom: 5px;
     color: #0a2c55;
     /* 👈 navy for visibility */
 }

 /* TEXT */
 .counter-box p {
     margin: 0;
     font-size: 14px;
     color: #666;
 }

 /* HOVER EFFECT */
 .counter-box:hover {
     transform: translateY(-8px);
     box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
 }

 /* OPTIONAL ACCENT BORDER (makes it pop) */
 .counter-box::after {
     content: "";
     display: block;
     width: 40px;
     height: 3px;
     background: #d94148;
     margin: 10px auto 0;
     border-radius: 2px;
 }

 /* RESPONSIVE */
 @media (max-width: 768px) {
     .counter-box h2 {
         font-size: 28px;
     }
 }


 /* Breadcrumb SECTION  */
 .breadcrumb-section {
     padding: 12px 0;
     background: #fff;
     border-bottom: 1px solid #e5e9f2;
 }

 /* WRAPPER */
 .breadcrumb-wrapper {
     display: flex;
     justify-content: space-between;
     align-items: center;
     flex-wrap: wrap;
 }

 /* TITLE */
 .page-title {
     font-size: 20px;
     /* 👈 smaller */
     font-weight: 600;
     color: #0a2c55;
     margin: 0;
 }

 /* BREADCRUMB */
 .custom-breadcrumb {
     margin: 0;
     background: transparent;
     font-size: 13px;
 }

 /* LINKS */
 .custom-breadcrumb .breadcrumb-item a {
     text-decoration: none;
     color: #555;
     transition: 0.2s;
 }

 .custom-breadcrumb .breadcrumb-item a:hover {
     color: #d94148;
 }

 /* ACTIVE */
 .custom-breadcrumb .breadcrumb-item.active {
     color: #0a2c55;
     font-weight: 500;
 }

 /* SEPARATOR */
 .breadcrumb-item+.breadcrumb-item::before {
     content: "/";
     color: #aaa;
 }

 /* RESPONSIVE */
 @media (max-width: 768px) {
     .breadcrumb-wrapper {
         flex-direction: column;
         align-items: flex-start;
         gap: 5px;
     }
 }

 .social-links {
     display: flex;
     gap: 10px;
 }

 /* ICON STYLE */
 .social-links a {
     width: 38px;
     height: 38px;
     display: flex;
     align-items: center;
     justify-content: center;
     background: #f1f5ff;
     color: #0a2c55;
     border-radius: 50%;
     font-size: 14px;
     transition: 0.3s ease;
     text-decoration: none;
 }

 /* HOVER EFFECT */
 .social-links a:hover {
     background: linear-gradient(135deg, #0a2c55, #d94148);
     color: #fff;
     transform: translateY(-3px);
 }

 /* OPTIONAL: platform-specific hover colors */
 .social-links a:nth-child(1):hover {
     background: #1877f2;
 }

 /* Facebook */
 .social-links a:nth-child(2):hover {
     background: #ff0000;
 }

 /* YouTube */
 .social-links a:nth-child(3):hover {
     background: #e4405f;
 }

 /* Instagram */
 .social-links a:nth-child(4):hover {
     background: #0077b5;
 }

 /* LinkedIn */
 .social-links a:nth-child(5):hover {
     background: #000;
 }

 /* X (Twitter) */



 .specialization-section {
     padding: 80px 0;

     .section-title {
         text-align: center;
         font-size: 32px;
         font-weight: 700;
         color: #0a2c55;
         margin-bottom: 50px;
     }

     /* GRID */
     .specialization-grid {
         display: grid;
         grid-template-columns: repeat(4, 1fr);
         gap: 25px;
     }

     /* CARD */
     .spec-card {
         background: #fff;
         border-radius: 16px;
         padding: 30px 20px;
         text-align: center;
         cursor: pointer;
         position: relative;
         overflow: hidden;
         border: 1px solid #e6e6e6;
         transition: all 0.4s ease;
     }

     /* ICON */
     .spec-card i {
         font-size: 40px;
         color: #d94148;
         margin-bottom: 15px;
         transition: 0.4s;
     }

     /* TITLE */
     .spec-card h4 {
         font-size: 18px;
         color: #0a2c55;
         margin: 0;
         transition: 0.4s;
     }

     /* HOVER EFFECT */
     .spec-card::before {
         content: "";
         position: absolute;
         width: 100%;
         height: 0%;
         background: linear-gradient(135deg, #0a2c55, #d94148);
         top: 0;
         left: 0;
         z-index: 0;
         transition: height 0.4s ease;
         border-radius: 16px;
     }

     .spec-card:hover::before {
         height: 100%;
     }

     /* CONTENT ABOVE HOVER */
     .spec-card i,
     .spec-card h4 {
         position: relative;
         z-index: 1;
     }

     /* HOVER COLORS */
     .spec-card:hover i,
     .spec-card:hover h4 {
         color: #fff;
     }

     /* LIFT EFFECT */
     .spec-card:hover {
         transform: translateY(-8px);
         box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
     }

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

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