/* ============================================
   Fine Group Industries — Custom Stylesheet
   ============================================ */

/* ---- Hero dots pattern ---- */
.hero-dots {
    background-image: radial-gradient(circle, rgba(255,255,255,0.08) 1px, transparent 1px);
    background-size: 28px 28px;
}

/* ---- Gradient text ---- */
.gradient-text {
    background: linear-gradient(135deg, #cc1f1f 0%, #ff5f3a 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ---- Section divider line ---- */
.section-line {
    display: block;
    width: 52px;
    height: 4px;
    background: linear-gradient(to right, #cc1f1f, #ff4f2a);
    border-radius: 2px;
}

/* ---- Glass card ---- */
.glass-card {
    background: rgba(255,255,255,0.06);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255,255,255,0.10);
}

/* ---- Buttons ---- */
.btn-primary { transition: transform 0.25s ease, box-shadow 0.25s ease; }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(204,31,31,0.45); }

/* ---- Navbar scroll effect ---- */
#navbar.scrolled {
    background: rgba(255,255,255,0.98) !important;
    box-shadow: 0 6px 28px rgba(0,0,0,0.08);
}

/* ---- Active nav link ---- */
.nav-active { color: #cc1f1f !important; }

/* ---- Scroll-to-top button ---- */
#scroll-top {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.25s ease;
}
#scroll-top.visible { opacity: 1; pointer-events: all; }
#scroll-top:hover  { transform: translateY(-3px); }

/* ---- Footer quick links ---- */
.footer-link {
    display: inline-block;
    transition: padding-left 0.2s ease, color 0.2s ease;
}
.footer-link:hover { padding-left: 6px; }

/* ============================================
   Swiper / Hero slider customisation
   ============================================ */
.hero-swiper { width: 100%; }

.hero-swiper .swiper-pagination-bullet {
    width: 28px;
    height: 4px;
    border-radius: 2px;
    background: rgba(255,255,255,0.4);
    opacity: 1;
    transition: width 0.3s ease, background 0.3s ease;
}
.hero-swiper .swiper-pagination-bullet-active {
    width: 50px;
    background: #cc1f1f;
}

/* Hero slide entrance animation (each time it becomes active) */
.hero-swiper .swiper-slide-active h1,
.hero-swiper .swiper-slide-active p,
.hero-swiper .swiper-slide-active span,
.hero-swiper .swiper-slide-active a {
    animation: heroFadeUp 0.85s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.hero-swiper .swiper-slide-active span  { animation-delay: 0.1s; }
.hero-swiper .swiper-slide-active h1    { animation-delay: 0.25s; }
.hero-swiper .swiper-slide-active p     { animation-delay: 0.45s; }
.hero-swiper .swiper-slide-active a     { animation-delay: 0.6s; }

@keyframes heroFadeUp {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ============================================
   Category cards
   ============================================ */
.cat-card { transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1); }
.cat-card:hover { transform: translateY(-6px); }

/* ============================================
   Mission/Vision/Philosophy cards
   ============================================ */
.mvp-card { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.mvp-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 24px 50px rgba(0,0,0,0.10);
}

/* ============================================
   Custom scrollbar
   ============================================ */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #f1f5f9; }
::-webkit-scrollbar-thumb { background: #cc1f1f; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #9b1515; }

/* ============================================
   AOS adjustments
   ============================================ */
[data-aos] { transition-property: opacity, transform; }

/* ============================================
   Mobile tweaks
   ============================================ */
@media (max-width: 640px) {
    .hero-swiper .swiper-slide h1 { font-size: 2.25rem; line-height: 1.1; }
    .hero-swiper .swiper-pagination-bullet { width: 22px; }
    .hero-swiper .swiper-pagination-bullet-active { width: 38px; }
}