/*==================================================
    VETNOL COMPONENTS
    File : assets/css/components.css
==================================================*/

/*==================================================
                HEADER
==================================================*/

.site-header{

    position:fixed;

    top:0;
    left:0;

    width:100%;

    z-index:1000;

    transition:all .35s ease;

}

.site-header.scrolled{

    background:var(--glass-bg);

    backdrop-filter:blur(18px);

    box-shadow:var(--shadow-md);

}

/*==================================================
                NAVBAR
==================================================*/

.navbar{

    height:82px;

    display:flex;

    align-items:center;

    justify-content:space-between;

}

.nav-logo{

    display:flex;

    align-items:center;

    gap:14px;

}

.nav-logo img{

    width:54px;

    height:54px;

    object-fit:contain;

}

.logo-title{

    font-size:1.45rem;

    font-weight:700;

    color:var(--primary);

}

.logo-subtitle{

    font-size:.82rem;

    color:var(--text-light);

}

.nav-menu{

    display:flex;

    align-items:center;

    gap:34px;

}

.nav-item{

    position:relative;

}

.nav-link{

    font-weight:500;

    transition:.3s;

}

.nav-link::after{

    content:"";

    position:absolute;

    bottom:-8px;
    left:0;

    width:0;

    height:2px;

    background:var(--gradient-main);

    transition:.35s;

}

.nav-link:hover::after,

.nav-link.active::after{

    width:100%;

}

.nav-link:hover{

    color:var(--primary);

}

/*==================================================
                DROPDOWN
==================================================*/

.dropdown{

    position:relative;

}

.dropdown-menu{

    position:absolute;

    top:120%;

    left:0;

    min-width:260px;

    background:var(--surface);

    border-radius:20px;

    border:1px solid var(--border);

    box-shadow:var(--shadow-xl);

    opacity:0;

    visibility:hidden;

    transform:translateY(15px);

    transition:.35s;

    overflow:hidden;

}

.dropdown:hover .dropdown-menu{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}

.dropdown-menu a{

    display:block;

    padding:15px 22px;

}

.dropdown-menu a:hover{

    background:rgba(8,44,92,.05);

    color:var(--primary);

}

/*==================================================
                MEGA MENU
==================================================*/

.mega-menu{

    position:absolute;

    left:50%;

    transform:translateX(-50%);

    width:900px;

    background:var(--surface);

    border-radius:28px;

    border:1px solid var(--border);

    padding:40px;

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:30px;

    opacity:0;

    visibility:hidden;

    top:120%;

    transition:.35s;

    box-shadow:var(--shadow-xl);

}

.dropdown:hover .mega-menu{

    opacity:1;

    visibility:visible;

    top:100%;

}

.mega-menu h4{

    margin-bottom:16px;

}

.mega-menu a{

    display:block;

    margin-bottom:10px;

}

/*==================================================
                MOBILE MENU
==================================================*/

.mobile-menu{

    position:fixed;

    inset:0;

    background:rgba(2,6,23,.96);

    backdrop-filter:blur(16px);

    z-index:2000;

    transform:translateX(100%);

    transition:.45s;

}

.mobile-menu.active{

    transform:translateX(0);

}

.mobile-menu nav{

    margin-top:100px;

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:28px;

}

.mobile-menu a{

    color:#fff;

    font-size:1.25rem;

    font-weight:600;

}

/*==================================================
                HERO COMPONENT
==================================================*/

.hero-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:60px;

    align-items:center;

}

.hero-image{

    position:relative;

}

.hero-image img{

    width:100%;

    border-radius:40px;

}

.hero-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:10px 18px;

    border-radius:999px;

    background:rgba(8,44,92,.08);

    color:var(--primary);

    font-weight:600;

}

/*==================================================
                FEATURE GRID
==================================================*/

.feature-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

    gap:32px;

}

/*==================================================
                SERVICE CARD
==================================================*/

.service-card{

    background:var(--surface);

    border-radius:28px;

    padding:36px;

    border:1px solid var(--border);

    transition:.35s;

    text-align:center;

}

.service-card:hover{

    transform:translateY(-12px);

    box-shadow:var(--shadow-xl);

}

.service-icon{

    width:90px;

    height:90px;

    border-radius:24px;

    margin:auto;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:38px;

    color:var(--primary);

    background:rgba(8,44,92,.08);

}

.service-card h3{

    margin-top:24px;

}

.service-card p{

    margin-top:14px;

}
/*==================================================
                SPECIES CARD
==================================================*/

.species-card{

    position:relative;

    overflow:hidden;

    background:var(--surface);

    border:1px solid var(--border);

    border-radius:32px;

    transition:all .4s ease;

    box-shadow:var(--shadow-md);

}

.species-card:hover{

    transform:translateY(-12px);

    box-shadow:var(--shadow-xl);

}

.species-card-image{

    position:relative;

    overflow:hidden;

}

.species-card-image img{

    width:100%;

    height:260px;

    object-fit:cover;

    transition:transform .8s ease;

}

.species-card:hover .species-card-image img{

    transform:scale(1.08);

}

.species-card-body{

    padding:28px;

}

.species-card-title{

    font-size:1.45rem;

    font-weight:700;

    margin-bottom:10px;

}

.species-meta{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

    margin-top:18px;

}

.species-meta span{

    padding:8px 14px;

    border-radius:999px;

    background:rgba(8,44,92,.08);

    color:var(--primary);

    font-size:.82rem;

    font-weight:600;

}

/*==================================================
                BREED CARD
==================================================*/

.breed-card{

    background:var(--surface);

    border-radius:30px;

    border:1px solid var(--border);

    overflow:hidden;

    transition:.35s;

}

.breed-card:hover{

    transform:translateY(-8px);

    box-shadow:var(--shadow-lg);

}

.breed-card img{

    width:100%;

    height:230px;

    object-fit:cover;

}

.breed-content{

    padding:24px;

}

.breed-content h3{

    margin-bottom:10px;

}

.breed-info{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:12px;

    margin-top:18px;

}

/*==================================================
                DOCTOR CARD
==================================================*/

.doctor-card{

    text-align:center;

    background:var(--surface);

    border-radius:32px;

    padding:36px;

    border:1px solid var(--border);

    transition:.35s;

}

.doctor-card:hover{

    transform:translateY(-10px);

}

.doctor-photo{

    width:140px;

    height:140px;

    margin:auto;

    border-radius:50%;

    overflow:hidden;

    border:6px solid rgba(8,44,92,.08);

}

.doctor-photo img{

    width:100%;

    height:100%;

    object-fit:cover;

}

.doctor-name{

    margin-top:22px;

}

.doctor-speciality{

    color:var(--secondary);

    margin-top:6px;

    font-weight:600;

}

.doctor-social{

    display:flex;

    justify-content:center;

    gap:16px;

    margin-top:24px;

}

/*==================================================
                TESTIMONIAL CARD
==================================================*/

.testimonial-card{

    background:var(--surface);

    border-radius:30px;

    padding:36px;

    border:1px solid var(--border);

    position:relative;

}

.testimonial-card::before{

    content:"❝";

    position:absolute;

    right:24px;

    top:20px;

    font-size:72px;

    color:rgba(8,44,92,.08);

}

.testimonial-stars{

    color:#FBBF24;

    font-size:1.2rem;

    margin-bottom:20px;

}

.testimonial-user{

    display:flex;

    align-items:center;

    gap:16px;

    margin-top:24px;

}

.testimonial-user img{

    width:58px;

    height:58px;

    border-radius:50%;

    object-fit:cover;

}

/*==================================================
                BLOG CARD
==================================================*/

.blog-card{

    overflow:hidden;

    border-radius:30px;

    background:var(--surface);

    border:1px solid var(--border);

    transition:.35s;

}

.blog-card:hover{

    transform:translateY(-8px);

}

.blog-image{

    overflow:hidden;

}

.blog-image img{

    width:100%;

    height:240px;

    object-fit:cover;

    transition:.7s;

}

.blog-card:hover .blog-image img{

    transform:scale(1.06);

}

.blog-content{

    padding:28px;

}

.blog-date{

    color:var(--secondary);

    font-size:.9rem;

    font-weight:600;

}

/*==================================================
                STATS CARD
==================================================*/

.stats-card{

    text-align:center;

    padding:36px;

    border-radius:28px;

    background:var(--surface);

    border:1px solid var(--border);

}

.stats-number{

    font-size:3rem;

    font-weight:800;

    color:var(--primary);

}

.stats-title{

    margin-top:10px;

    color:var(--text-light);

}

/*==================================================
                TIMELINE
==================================================*/

.timeline{

    position:relative;

    margin:60px 0;

}

.timeline::before{

    content:"";

    position:absolute;

    left:24px;

    top:0;

    width:4px;

    height:100%;

    background:var(--primary);

}

.timeline-item{

    position:relative;

    padding-left:70px;

    margin-bottom:40px;

}

.timeline-item::before{

    content:"";

    position:absolute;

    left:14px;

    top:6px;

    width:22px;

    height:22px;

    border-radius:50%;

    background:var(--secondary);

    border:4px solid #fff;

}

.timeline-content{

    padding:24px;

    border-radius:24px;

    background:var(--surface);

    border:1px solid var(--border);

}

/*==================================================
                FAQ CARD
==================================================*/

.faq-card{

    border:1px solid var(--border);

    border-radius:24px;

    overflow:hidden;

    background:var(--surface);

}

.faq-question{

    padding:22px 28px;

    cursor:pointer;

    font-weight:600;

}

.faq-answer{

    display:none;

    padding:0 28px 24px;

}

.faq-card.active .faq-answer{

    display:block;

}
/*==================================================
                PRICING CARD
==================================================*/

.pricing-card{

    position:relative;

    background:var(--surface);

    border:1px solid var(--border);

    border-radius:32px;

    padding:40px;

    text-align:center;

    transition:all .35s ease;

    overflow:hidden;

}

.pricing-card:hover{

    transform:translateY(-10px);

    box-shadow:var(--shadow-xl);

}

.pricing-card.featured{

    border:2px solid var(--primary);

}

.pricing-badge{

    position:absolute;

    top:20px;

    right:-40px;

    width:150px;

    text-align:center;

    background:var(--secondary);

    color:#fff;

    padding:8px;

    transform:rotate(45deg);

    font-size:.8rem;

    font-weight:700;

}

.price{

    font-size:3rem;

    font-weight:800;

    color:var(--primary);

    margin:20px 0;

}

.price span{

    font-size:1rem;

    color:var(--text-light);

}

.pricing-features{

    margin:30px 0;

}

.pricing-features li{

    padding:10px 0;

    border-bottom:1px dashed var(--border);

}

/*==================================================
                TEAM CARD
==================================================*/

.team-card{

    background:var(--surface);

    border-radius:30px;

    overflow:hidden;

    border:1px solid var(--border);

    transition:.35s;

}

.team-card:hover{

    transform:translateY(-8px);

    box-shadow:var(--shadow-lg);

}

.team-image{

    position:relative;

    overflow:hidden;

}

.team-image img{

    width:100%;

    height:320px;

    object-fit:cover;

    transition:.7s;

}

.team-card:hover .team-image img{

    transform:scale(1.06);

}

.team-overlay{

    position:absolute;

    inset:0;

    background:rgba(8,44,92,.65);

    display:flex;

    justify-content:center;

    align-items:center;

    gap:18px;

    opacity:0;

    transition:.35s;

}

.team-card:hover .team-overlay{

    opacity:1;

}

.team-info{

    padding:28px;

    text-align:center;

}

/*==================================================
                GALLERY CARD
==================================================*/

.gallery-card{

    position:relative;

    overflow:hidden;

    border-radius:28px;

    cursor:pointer;

}

.gallery-card img{

    width:100%;

    height:280px;

    object-fit:cover;

    transition:.8s;

}

.gallery-card:hover img{

    transform:scale(1.08);

}

.gallery-overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(to top,
        rgba(8,44,92,.85),
        transparent);

    display:flex;

    align-items:flex-end;

    padding:28px;

    color:#fff;

    opacity:0;

    transition:.35s;

}

.gallery-card:hover .gallery-overlay{

    opacity:1;

}

/*==================================================
                PRODUCT CARD
==================================================*/

.product-card{

    background:var(--surface);

    border-radius:28px;

    border:1px solid var(--border);

    overflow:hidden;

    transition:.35s;

}

.product-card:hover{

    transform:translateY(-8px);

}

.product-image{

    position:relative;

    overflow:hidden;

}

.product-image img{

    width:100%;

    height:240px;

    object-fit:cover;

}

.product-tag{

    position:absolute;

    top:18px;

    left:18px;

    padding:6px 14px;

    border-radius:999px;

    background:var(--secondary);

    color:#fff;

    font-size:.8rem;

}

.product-body{

    padding:24px;

}

.product-price{

    color:var(--primary);

    font-size:1.6rem;

    font-weight:700;

}

/*==================================================
                APPOINTMENT CARD
==================================================*/

.appointment-card{

    display:flex;

    align-items:center;

    gap:24px;

    padding:24px;

    background:var(--surface);

    border:1px solid var(--border);

    border-radius:24px;

}

.appointment-date{

    width:80px;

    height:80px;

    border-radius:20px;

    background:var(--gradient-main);

    color:#fff;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    font-weight:700;

}

.appointment-info{

    flex:1;

}

/*==================================================
                CHAT MESSAGE
==================================================*/

.chat-window{

    display:flex;

    flex-direction:column;

    gap:18px;

}

.message{

    max-width:80%;

    padding:14px 18px;

    border-radius:22px;

    line-height:1.6;

}

.message.user{

    align-self:flex-end;

    background:var(--primary);

    color:#fff;

}

.message.bot{

    align-self:flex-start;

    background:var(--surface-2);

}

/*==================================================
                TOOLTIP
==================================================*/

.tooltip{

    position:relative;

}

.tooltip::after{

    content:attr(data-title);

    position:absolute;

    left:50%;

    bottom:120%;

    transform:translateX(-50%);

    padding:8px 12px;

    background:#111827;

    color:#fff;

    border-radius:8px;

    white-space:nowrap;

    opacity:0;

    visibility:hidden;

    transition:.3s;

    font-size:.8rem;

}

.tooltip:hover::after{

    opacity:1;

    visibility:visible;

}

/*==================================================
                TABS
==================================================*/

.tabs{

    display:flex;

    gap:12px;

    flex-wrap:wrap;

}

.tab-btn{

    padding:12px 22px;

    border-radius:999px;

    border:1px solid var(--border);

    background:var(--surface);

    cursor:pointer;

    transition:.3s;

}

.tab-btn.active{

    background:var(--primary);

    color:#fff;

}

.tab-content{

    display:none;

    margin-top:30px;

}

.tab-content.active{

    display:block;

}

/*==================================================
                PROGRESS BAR
==================================================*/

.progress{

    width:100%;

    height:10px;

    background:var(--surface-2);

    border-radius:999px;

    overflow:hidden;

}

.progress-bar{

    height:100%;

    width:0;

    background:var(--gradient-main);

    transition:width .6s ease;

}

/*==================================================
                NOTIFICATION BADGE
==================================================*/

.notification{

    position:relative;

}

.notification-count{

    position:absolute;

    top:-8px;

    right:-8px;

    min-width:22px;

    height:22px;

    padding:0 6px;

    border-radius:999px;

    background:var(--danger);

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:.75rem;

    font-weight:700;

}
/*==================================================
                CHAT INPUT
==================================================*/

.chat-input{

    display:flex;

    align-items:center;

    gap:12px;

    padding:16px;

    border-top:1px solid var(--border);

    background:var(--surface);

}

.chat-input input{

    flex:1;

    border:none;

    background:var(--surface-2);

    padding:14px 18px;

    border-radius:999px;

}

.chat-send{

    width:48px;

    height:48px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:var(--primary);

    color:#fff;

    transition:all .3s ease;

}

.chat-send:hover{

    background:var(--secondary);

    transform:scale(1.08);

}

/*==================================================
                TYPING INDICATOR
==================================================*/

.typing{

    display:flex;

    align-items:center;

    gap:6px;

    padding:12px 18px;

    background:var(--surface-2);

    width:max-content;

    border-radius:20px;

}

.typing span{

    width:8px;

    height:8px;

    border-radius:50%;

    background:var(--primary);

    animation:typing 1.4s infinite ease-in-out;

}

.typing span:nth-child(2){

    animation-delay:.2s;

}

.typing span:nth-child(3){

    animation-delay:.4s;

}

/*==================================================
                SKELETON LOADING
==================================================*/

.skeleton{

    position:relative;

    overflow:hidden;

    background:#e5e7eb;

    border-radius:12px;

}

.dark .skeleton{

    background:#334155;

}

.skeleton::before{

    content:"";

    position:absolute;

    inset:0;

    transform:translateX(-100%);

    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.45),
        transparent
    );

    animation:skeletonLoading 1.4s infinite;

}

.skeleton-image{

    width:100%;

    height:220px;

}

.skeleton-title{

    width:70%;

    height:22px;

    margin:20px;

}

.skeleton-text{

    width:90%;

    height:14px;

    margin:12px 20px;

}

/*==================================================
                CAROUSEL
==================================================*/

.carousel{

    position:relative;

    overflow:hidden;

}

.carousel-track{

    display:flex;

    transition:transform .5s ease;

}

.carousel-slide{

    min-width:100%;

}

.carousel-btn{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    width:52px;

    height:52px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:rgba(255,255,255,.92);

    color:var(--primary);

    box-shadow:var(--shadow-md);

}

.carousel-prev{

    left:20px;

}

.carousel-next{

    right:20px;

}

.carousel-dots{

    display:flex;

    justify-content:center;

    gap:10px;

    margin-top:24px;

}

.carousel-dot{

    width:12px;

    height:12px;

    border-radius:50%;

    background:var(--border);

    cursor:pointer;

}

.carousel-dot.active{

    background:var(--primary);

}

/*==================================================
                ALERTS
==================================================*/

.alert{

    padding:18px 22px;

    border-radius:18px;

    margin-bottom:20px;

    display:flex;

    align-items:center;

    gap:12px;

}

.alert-success{

    background:rgba(34,197,94,.10);

    color:var(--success);

    border-left:5px solid var(--success);

}

.alert-warning{

    background:rgba(245,158,11,.10);

    color:var(--warning);

    border-left:5px solid var(--warning);

}

.alert-danger{

    background:rgba(239,68,68,.10);

    color:var(--danger);

    border-left:5px solid var(--danger);

}

.alert-info{

    background:rgba(59,130,246,.10);

    color:var(--info);

    border-left:5px solid var(--info);

}

/*==================================================
                EMPTY STATE
==================================================*/

.empty-state{

    padding:70px 30px;

    text-align:center;

}

.empty-state img{

    width:220px;

    margin:auto;

}

.empty-state h3{

    margin-top:24px;

}

.empty-state p{

    margin-top:12px;

    max-width:520px;

    margin-inline:auto;

}

/*==================================================
                COOKIE BANNER
==================================================*/

.cookie-banner{

    position:fixed;

    left:30px;

    right:30px;

    bottom:30px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    padding:22px 28px;

    background:var(--surface);

    border:1px solid var(--border);

    border-radius:24px;

    box-shadow:var(--shadow-xl);

    z-index:1500;

}

.cookie-actions{

    display:flex;

    gap:12px;

}

/*==================================================
                FOOTER WIDGET
==================================================*/

.footer-widget{

    margin-bottom:30px;

}

.footer-widget h4{

    margin-bottom:20px;

    color:#fff;

}

.footer-widget ul{

    display:flex;

    flex-direction:column;

    gap:12px;

}

.footer-widget a{

    color:#cbd5e1;

}

.footer-widget a:hover{

    color:#fff;

    padding-left:6px;

}

/*==================================================
                SOCIAL ICONS
==================================================*/

.social-list{

    display:flex;

    gap:14px;

    flex-wrap:wrap;

}

.social-list a{

    width:44px;

    height:44px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:rgba(255,255,255,.08);

    color:#fff;

    transition:.3s;

}

.social-list a:hover{

    background:var(--primary);

    transform:translateY(-4px);

}

/*==================================================
                RESPONSIVE
==================================================*/

@media (max-width:992px){

    .hero-grid{

        grid-template-columns:1fr;

        text-align:center;

    }

    .mega-menu{

        display:none;

    }

    .appointment-card{

        flex-direction:column;

        text-align:center;

    }

    .cookie-banner{

        flex-direction:column;

        align-items:flex-start;

    }

}

@media (max-width:768px){

    .doctor-photo{

        width:110px;

        height:110px;

    }

    .carousel-btn{

        width:42px;

        height:42px;

    }

    .team-image img{

        height:260px;

    }

    .pricing-card{

        padding:30px 22px;

    }

    .cookie-banner{

        left:15px;

        right:15px;

        bottom:15px;

    }

}

@media (max-width:576px){

    .chat-input{

        flex-direction:column;

        align-items:stretch;

    }

    .chat-send{

        width:100%;

        border-radius:14px;

    }

    .carousel-btn{

        display:none;

    }

}

/*==================================================
        CRITICAL LAYOUT & HEADER RECOVERY STYLES
==================================================*/

/* Navbar & Container Layout */
header.navbar, .navbar {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: var(--surface, #ffffff);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    padding: 14px 0;
}

header.navbar .container, .navbar .container {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: min(92%, 1320px);
    margin-inline: auto;
}

/* Logo Alignment & Strict Image Sizing */
.logo, .nav-logo {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    text-decoration: none !important;
    font-size: 1.45rem;
    font-weight: 700;
    color: var(--primary, #082C5C) !important;
}

.logo img, .nav-logo img, header .logo img, header img {
    width: 48px !important;
    height: 48px !important;
    max-width: 48px !important;
    max-height: 48px !important;
    object-fit: contain !important;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Navigation Links */
.nav-menu, .nav-links {
    display: flex !important;
    align-items: center !important;
    gap: 26px !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.nav-menu a, .nav-links a {
    text-decoration: none;
    color: var(--text, #0F172A);
    font-weight: 500;
    font-size: 0.95rem;
    transition: color 0.3s ease;
}

.nav-menu a:hover, .nav-menu a.active, .nav-links a:hover {
    color: var(--primary, #082C5C);
}

.mobile-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 1.6rem;
    cursor: pointer;
    color: var(--primary, #082C5C);
}

/* Page Hero Header Section */
.page-hero {
    background: linear-gradient(135deg, #082C5C 0%, #0D4B9A 100%);
    color: #ffffff;
    padding: 60px 0 70px 0;
    text-align: center;
}

.page-hero h1 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-top: 10px;
    margin-bottom: 12px;
    color: #ffffff;
}

.page-hero p {
    font-size: 1.05rem;
    opacity: 0.92;
    max-width: 680px;
    margin: 0 auto;
    color: #F8FAFC;
}

.breadcrumb {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 0.9rem;
    opacity: 0.88;
}

.breadcrumb a {
    color: #ffffff;
    text-decoration: none;
}

.breadcrumb span {
    color: rgba(255, 255, 255, 0.7);
}

/* Section Components & Cards */
.section {
    padding: 70px 0;
}

.section-tag {
    display: inline-block;
    padding: 6px 16px;
    background: rgba(8, 44, 92, 0.1);
    color: var(--primary, #082C5C);
    font-weight: 600;
    font-size: 0.85rem;
    border-radius: 20px;
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.btn, .btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    background-color: var(--primary, #082C5C);
    color: #ffffff !important;
    font-weight: 600;
    border-radius: 12px;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn:hover, .btn-primary:hover {
    background-color: var(--primary-light, #0D4B9A);
    transform: translateY(-2px);
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 20px;
}

.stat-card {
    background: var(--surface, #ffffff);
    padding: 20px;
    border-radius: 16px;
    border: 1px solid var(--border, #E2E8F0);
    text-align: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}

.stat-card h3 {
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary, #082C5C);
    margin-bottom: 4px;
}

.stat-card p {
    font-size: 0.85rem;
    color: var(--text-light, #475569);
    margin: 0;
}

/* Footer Bottom Layout */
.footer-bottom {
    border-top: 1px solid var(--border, #E2E8F0);
    padding: 20px 0;
    text-align: center;
    color: var(--text-light, #475569);
    font-size: 0.9rem;
}

/*==================================================
                END OF FILE
==================================================*/