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

 .bg-hero-pattern {
     background: linear-gradient(135deg, #083459 0%, #0BA5DF 50%, #083459 100%);
 }

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

 .timeline-line {
     background: linear-gradient(to bottom, #FCC312, #0BA5DF, #FCC312);
 }

 .cta-gradient {
     background: linear-gradient(to right, #0BA5DF 0%, #083459 100%);
 }

 .timeline-container::before {
     content: '';
     position: absolute;
     top: 40px;
     left: 0;
     right: 0;
     height: 2px;
     background: #0BA5DF;
     opacity: 0.2;
     z-index: 0;
 }

 @media (max-width: 1024px) {
     .timeline-container::before {
         display: none;
     }
 }
 .icon-tilt{
display:inline-block;
animation: randomRotate 1s ease-in-out infinite;
transform-origin:center;
}

@keyframes randomRotate{

0%{
transform: rotate(-4deg);
}

20%{
transform: rotate(5deg);
}

40%{
transform: rotate(9deg);
}

60%{
transform: rotate(6deg);
}

80%{
transform: rotate(-1deg);
}

100%{
transform: rotate(1deg);
}

}

  .particle {
           position: absolute;
    width: 6px;
    height: 6px;
    background: white;
    border-radius: 50%;
    filter: blur(1px);
    animation: float 15s infinite linear;
    opacity: 0.3;
        }

        /* smooth float animation */

        @keyframes floatDots {

            0% {
                transform: translateY(-40px);
                opacity: 0;
            }

            20% {
                opacity: .3;
            }

            50% {
                transform: translateY(40px);
                opacity: .6;
            }

            80% {
                opacity: .3;
            }

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

        }

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

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

        .particle:nth-child(3) {
            left: 15%;
            top: 30%;
            animation-delay: -3s;
        }

        .particle:nth-child(4) {
            left: 20%;
            top: 80%;
            animation-delay: -4s;
        }

        .particle:nth-child(5) {
            left: 30%;
            top: 40%;
            animation-delay: -5s;
        }

        .particle:nth-child(6) {
            left: 40%;
            top: 70%;
            animation-delay: -6s;
        }

        .particle:nth-child(7) {
            left: 50%;
            top: 20%;
            animation-delay: -7s;
        }

        .particle:nth-child(8) {
            left: 60%;
            top: 50%;
            animation-delay: -8s;
        }

        .particle:nth-child(9) {
            left: 70%;
            top: 30%;
            animation-delay: -9s;
        }

        .particle:nth-child(10) {
            left: 80%;
            top: 70%;
            animation-delay: -10s;
        }

        .particle:nth-child(11) {
            left: 85%;
            top: 40%;
            animation-delay: -11s;
        }

        .particle:nth-child(12) {
            left: 90%;
            top: 60%;
            animation-delay: -12s;
        }

        .particle:nth-child(13) {
            left: 35%;
            top: 10%;
            animation-delay: -13s;
        }

        .particle:nth-child(14) {
            left: 65%;
            top: 85%;
            animation-delay: -14s;
        }

        .wave {
            animation: waveMove 8s linear infinite;
        }

        .wave2 {
            animation: waveMove 12s linear infinite reverse;
            opacity: .6;
        }

        @keyframes waveMove {
            0% {
                transform: translateX(0);
            }

            100% {
                transform: translateX(-500px);
            }
        }
            @keyframes floatPlus {
        0%, 100% { 
            transform: translateY(0) rotate(0deg); 
            opacity: 0.3; 
        }
        50% { 
            transform: translateY(-25px) rotate(15deg); 
            opacity: 0.9; 
        }
    }

    .animate-float-slow {
        animation: floatPlus 7s ease-in-out infinite;
    }

    .animate-float-fast {
        animation: floatPlus 4.5s ease-in-out infinite;
    }
     .animate-spin-slow {
                animation: spin 3s linear infinite;
            }

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

                to {
                    transform: rotate(360deg);
                }
            }
    .active-btn {
         background: linear-gradient(to right, #0BA5DF, #083459);
         color: white !important;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    }

    /* Default (Inactive) Button Style */
    .default-btn {
        background-color: white !important;
        color: #083459 !important;
        border: 1px solid rgba(11, 165, 223, 0.3) !important;
    }

    .default-btn:hover {
        background-color: #E8F4F8 !important;
    }
    @keyframes waveMove {
        0% { transform: translateX(0); }
        100% { transform: translateX(-50%); }
    }
    .animate-wave {
        animation: waveMove 15s linear infinite;
    }
    @keyframes float {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-15px); }
    }
    .animate-float {
        animation: float 4s ease-in-out infinite;
    }
    .animate-float-delayed {
        animation: float 5s ease-in-out infinite;
        animation-delay: 2s;
    }
    .animate-fadeIn {
        animation: fadeIn 1s ease-out forwards;
    }
    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(20px); }
        to { opacity: 1; transform: translateY(0); }
    }
@keyframes pulse-dot {
    0%, 100% { opacity: 0.3; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.2); }
}

.animate-dot {
    animation: pulse-dot 4s infinite ease-in-out;
}
@keyframes cross-move {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 0;
  }
  10% {
    opacity: 0.6;
  }
  90% {
    opacity: 0.6;
  }
  100% {
    transform: translate(-400px, -600px) scale(1.2);
    opacity: 0;
  }
}

.animate-cross-all {
  animation: cross-move 10s linear infinite;
  pointer-events: none;
}
@keyframes float-vertical-complex {
    0%, 100% { 
        transform: translateY(0) scale(0.6); 
        opacity: 0.2; 
    }
    50% { 
        transform: translateY(-50px) scale(1.3); 
        opacity: 0.7; 
    }
}

.animate-dot-float {
    animation: float-vertical-complex var(--duration, 6s) infinite ease-in-out;
    animation-delay: var(--delay, 0s);
}
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
/* ── Article tab bar ───────────────────────────────── */
#tab-container-scroll {
    -ms-overflow-style: none; /* IE / Edge */
    scrollbar-width: none; /* Firefox */
}

    #tab-container-scroll::-webkit-scrollbar {
        display: none; /* Chrome / Safari */
    }

.article-tab-btn {
    cursor: pointer;
    border: 2px solid transparent;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.active-btn {
    background-color: #083459 !important;
    color: #ffffff !important;
    border-color: #083459 !important;
    box-shadow: 0 4px 12px rgba(8, 52, 89, 0.25);
}

.default-btn {
    background-color: #f0f8ff;
    color: #455A64;
    border-color: transparent;
}

    .default-btn:hover {
        background-color: #E2F4FB;
        color: #083459;
        border-color: #0BA5DF;
    }

/* Mobile scroll indicator fade on right edge */
@media (max-width: 767px) {
    .tab-scroll-wrap {
    position: relative;
}

.tab-scroll-wrap::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 40px;
    background: linear-gradient(to right, transparent, rgba(255,255,255,0.95));
    pointer-events: none;
}
}