.roboto {
    font-family: "Roboto", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-variation-settings:
        "wdth" 100;
}


.inter {
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
}

body {
    font-family: 'Roboto', sans-serif;
    color: #4a4a4a;
}

.font-lato {
    font-family: "Lato", sans-serif;
}

h1,
h2,
h3,
h4 {
    font-family: "Lato", sans-serif;
}

.text-primary {
    color: #011f5c !important;
}

.bg-primary {
    background-color: #011f5c;
}

.bg-secondary {
    background-color: #f0f7fe;
}

.text-secondary {
    color: #f0f7fe !important;
}

.primary-gradient {
    background: linear-gradient(90deg, #011f5c 0%, #0077ff 100%);

}

.secondary-gradient {
    background: linear-gradient(90deg, #4dabf7 0%, #14b8a6 100%);

}

.warm-gradient {
    background: linear-gradient(90deg, #f97316 0%, #fb923c 100%);
}

.warm-text {
    color: #f97316;
}

.text-light {
    color: #4dabf7;
}

.border-primary {
    border: #011f5c 1px solid;
}

.whatsapp-float {
    position: fixed;
    right: 20px;
    /* distance from left */
    bottom: 20px;
    /* distance from bottom */
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #25D366;
    border-radius: 50%;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s;
}

.whatsapp-float:hover {
    transform: scale(1.1);
}

.whatsapp-float img {
    width: 35px;
    height: 35px;
}

/* Fix: Ensure arrows appear above everything */
.swiper-button-next,
.swiper-button-prev {
    z-index: 20 !important;
    width: 32px !important;
    height: 32px !important;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Make arrow icons smaller & visible */
.swiper-button-next::after,
.swiper-button-prev::after {
    font-size: 14px !important;
    color: #000 !important;
    font-weight: 700;
}

/* Optional: hover style */
.swiper-button-next:hover,
.swiper-button-prev:hover {
    background: #2563eb;
    /* Tailwind blue-600 */
}

.swiper-button-next:hover::after,
.swiper-button-prev:hover::after {
    color: #fff !important;
}

.zoom-bg {
    position: relative;
}

.zoom-bg::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image: url('/website/img/bg.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 1;
    animation: zoomEffect 15s ease-in-out infinite alternate;
}

@keyframes zoomEffect {
    from {
        transform: scale(1);
    }
    to {
        transform: scale(1.2);
    }
}

.select2-container .select2-selection--single {
    height: auto !important;
    padding: 5px;
}

.tab-btn {
    width: 100%;
    text-align: left;
    padding: 12px 16px;
    font-weight: 500;
    transition: all 0.2s;
    background: white;
}

.tab-btn:hover {
    background: #f0f4ff;
    color: #011f5c;
}

.tab-btn.active {
    background: #f0f4ff;
    color: #011f5c;
    border: 1px solid #dfe5f2;
}

.text-warning{
    color: #f97316;
}

.bg-warning{
    background: #f97316;
}

.bg-success{
    background: #11871e;
}

.bg-danger{
    background: red;
}

.bg-yellow{
    background: yellow;
}

.border-primary{
    border: 1px solid #011f5c;
}

.text-danger{
    color: red;
}

.border-secondary{
   border: 1px solid #dfe5f2; 
}

.text-success{
    color: #11871e;
}

.border-success{
     border: 1px solid #11871e; 
     opacity: 50%;
}

@keyframes strongBlink {
    70%, 100% { opacity: 1; }
    70% { opacity: 0.7; }
}

.animate-strong-blink {
    animation: strongBlink 1s linear infinite;
}

@keyframes borderBlink {
    0%, 100% {
        border-color: #facc15;   /* yellow-400 */
    }
    50% {
        border-color: #8d740f;   /* red-400 */
    }
}

.animate-border-blink {
    animation: borderBlink 1s ease-in-out infinite;
}

.animate-glow-blink {
    animation: smoothGlow 2s ease-in-out infinite;
}

@keyframes smoothGlow {
    0% {
        box-shadow: 0 0 0px rgba(250, 204, 21, 0.4);
    }
    50% {
        box-shadow: 0 0 25px rgba(250, 204, 21, 0.9);
    }
    100% {
        box-shadow: 0 0 0px rgba(250, 204, 21, 0.4);
    }
}

.left-panel-login{
    background:
        linear-gradient(180deg, rgba(9,42,91,0.95) 0%, rgba(14,61,130,0.92) 100%);
    color:#fff;
    
}