@font-face {
    font-family: "Oilvare Base";
    src: url("/fonts/OilvareBase-Regular.woff2") format("woff2"),
        url("/fonts/OilvareBase-Regular.woff") format("woff"),
        url("/fonts/OilvareBase-Regular.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}

/* Custom Primary Colors */
.text-primary {
    color: #00e0e0;
}
.text-secondary {
    color: #7d7b7b;
}

.bg-primary {
    background-color: #00e0e0;
}
.bg-secondary {
    background-color: #7d7b7b;
}

body {
    font-family: "Oilvare Base", sans-serif;
}

.brand-gray {
    color: #7d7b7b;
}

/* TIMEZ EDUCATION gray */
.timex-cyan {
    color: #00e0e0;
}

/* Main CSS file (e.g., app.css) */

/* General styling for ALL navigation links (desktop and mobile) */
.nav-link {
    padding: 5px 10px; /* Generous padding for easy tapping */
    border-radius: 8px; /* Soft rounded corners */
    font-weight: 500; /* Medium font weight */
    color: #374151; /* Dark gray text color */
    transition: all 0.2s ease-in-out;
}

/* Hover effect for ALL navigation links */
.nav-link:hover {
    color: #00e0e0; /* Your brand color on hover */
    background-color: #f0fafa; /* A very light teal background */
}

/* --- ACTIVE STATE STYLES --- */

/* Active style for DESKTOP menu */
.nav-link.nav-active {
    color: #00e0e0; /* Brand color */
    font-weight: 700; /* Bold */
}

/* Active style for MOBILE menu (more prominent for clarity) */
.nav-link.nav-active-mobile {
    color: #0d9488; /* A darker, more readable teal */
    background-color: #ccfbf1; /* A light teal background */
    font-weight: 700; /* Bold */
}

.custom-nav {
    background: rgba(0, 224, 224, 0.8);
    border-radius: 50%;
    width: 50px;
    height: 50px;

    color: black;
    transition: all 0.3s ease;
}

.custom-nav::after {
    font-size: 20px;
    font-weight: bold;
}

.custom-nav:hover {
    background: #00caca;

    transform: scale(1.1);
}

.btn-custom {
    background-color: #00e0e0;
    color: #000;
    font-weight: bold;
}

.btn-custom:hover {
    background-color: #00c0c0;
}

.circle-border {
    border: 6px solid #00e0e0;
    border-radius: 50%;
    padding: 6px;
    display: inline-block;
}

/* Keep images tidy */
.exam-card {
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 12px 22px rgba(0, 0, 0, 0.12);
}

.testimonials-pagination.swiper-pagination .swiper-pagination-bullet {
    background-color: #a1a1aa;
    opacity: 1;
}

.testimonials-pagination.swiper-pagination .swiper-pagination-bullet-active {
    background-color: #00e0e0;
}

.hero-swiper .custom-nav {
    width: 44px;
    height: 44px;
    background-color: rgba(0, 0, 0, 0.4);
    border-radius: 50%;
    color: white; /* This styles the SVG arrow inside */
    transition: background-color 0.3s ease;
}

.hero-swiper .custom-nav:hover {
    background-color: rgba(0, 0, 0, 0.7);
}

/* Swiper uses ::after pseudo-elements for the arrow icons, so we resize them */
.hero-swiper .custom-nav::after {
    font-size: 18px;
    font-weight: bold;
}

/* Styling specifically for Hero Pagination */
.hero-pagination.swiper-pagination .swiper-pagination-bullet {
    background-color: #ffffff;
    opacity: 0.6;
    width: 10px;
    height: 10px;
    transition: all 0.3s ease;
}

.hero-pagination.swiper-pagination .swiper-pagination-bullet-active {
    opacity: 1;
    transform: scale(1.2);
    background-color: #00e0e0; /* Your theme's accent color */
}