/* 
 * BIOSCIENCES KENYA LTD - Brand Colors & Design Specifications
 * Based on Client Requirements Document
 */

:root {
    /* Brand Colors - Exact Specifications */
    --brand-sky-blue: #00ADEF;
    --brand-navy-blue: #002E5D;
    --brand-green: #3BB54A;
    --brand-yellow: #FFD200;
    --brand-red: #FF3B30;
    
    /* Additional Colors */
    --brand-white: #FFFFFF;
    --brand-light-sky-blue: #E6F6FC;
    --brand-light-gray: #F9F9F9;
    --brand-dark-gray: #333333;
    --brand-medium-gray: #E0E0E0;
    
    /* Footer Colors */
    --footer-navy: #003366;
    --footer-darker-navy: #002B4D;
    
    /* Typography */
    --font-primary: 'Poppins', 'Lato', 'Nunito', sans-serif;
}

/* ============================================
   NAVIGATION BAR (HEADER) - SPECIFICATIONS
   ============================================ */
.main-header--one__bottom,
.main-header-three__upper,
.main-header--one__bottom-inner {
    background-color: var(--brand-navy-blue) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;
}

/* Sticky Navbar */
.stricky-header {
    background-color: var(--brand-navy-blue) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;
}

/* Menu Text - White */
.main-menu__list > li > a,
.sticky-menu .nav-link {
    color: var(--brand-white) !important;
    font-weight: 500;
    transition: all 0.3s ease;
    position: relative;
}

/* Hover Effect - Sky Blue Underline */
.main-menu__list > li > a:hover,
.sticky-menu .nav-link:hover {
    color: var(--brand-white) !important;
    text-decoration: none;
}

.main-menu__list > li > a:hover::after,
.sticky-menu .nav-link:hover::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    right: 0;
    height: 2px;
    background-color: var(--brand-sky-blue);
    border-radius: 1px;
}

/* Active Menu Item */
.main-menu__list > li.active > a,
.sticky-menu .nav-link.active {
    color: var(--brand-white) !important;
}

.main-menu__list > li.active > a::after,
.sticky-menu .nav-link.active::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    right: 0;
    height: 2px;
    background-color: var(--brand-sky-blue);
    border-radius: 1px;
}

/* CTA Button in Navbar - Green to Yellow on Hover */
.header-auth .btn-login,
.header-auth .btn-user,
.sticky-auth .btn-login-sticky,
.sticky-auth .btn-user-sticky {
    background-color: var(--brand-green) !important;
    color: var(--brand-white) !important;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    font-weight: 500;
    transition: all 0.3s ease;
}

.header-auth .btn-login:hover,
.header-auth .btn-user:hover,
.sticky-auth .btn-login-sticky:hover,
.sticky-auth .btn-user-sticky:hover {
    background-color: var(--brand-yellow) !important;
    color: var(--brand-navy-blue) !important;
}

/* ============================================
   HERO SECTION - SPECIFICATIONS
   ============================================ */
.main-slider .swiper-slide {
    position: relative;
}

/* Sky Blue Overlay */
.main-slider .image-layer::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 173, 239, 0.6);
    z-index: 1;
}

/* Alternate Navy Blue Overlay (for variation) */
.main-slider .swiper-slide:nth-child(even) .image-layer::after {
    background: rgba(0, 46, 93, 0.5);
}

/* Yellow Accent Line Under Headline */
.main-slider__title::after {
    content: '';
    display: block;
    width: 100px;
    height: 3px;
    background-color: var(--brand-yellow);
    margin: 15px auto 0;
    border-radius: 2px;
}

/* Hero Button - Green to Yellow on Hover */
.main-slider__button-box .thm-btn {
    background-color: var(--brand-green) !important;
    color: var(--brand-white) !important;
    border: none;
    padding: 15px 35px;
    border-radius: 5px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.main-slider__button-box .thm-btn:hover {
    background-color: var(--brand-yellow) !important;
    color: var(--brand-navy-blue) !important;
}

/* Navigation Arrows/Dots in Sky Blue */
.main-slider__nav .swiper-button-prev,
.main-slider__nav .swiper-button-next {
    color: var(--brand-sky-blue) !important;
}

.swiper-pagination-bullet {
    background-color: var(--brand-sky-blue) !important;
}

/* ============================================
   FEATURED PRODUCTS - SPECIFICATIONS
   ============================================ */
.shop-one {
    background-color: var(--brand-white) !important;
    padding: 80px 0;
}

/* Title - Navy Blue, Centered */
.shop-one .sec-title__title {
    color: var(--brand-navy-blue) !important;
    text-align: center;
}

/* Yellow Accent Line Under Title */
.shop-one .sec-title__title::after {
    content: '';
    display: block;
    width: 100px;
    height: 3px;
    background-color: var(--brand-yellow);
    margin: 15px auto 0;
    border-radius: 2px;
}

/* Product Card - Name in Navy Blue */
.shop-one__title,
.product-card__title {
    color: var(--brand-navy-blue) !important;
}

/* Product Card - Description in Gray */
.shop-one__desc,
.product-card__description {
    color: var(--brand-dark-gray) !important;
}

/* Product Card Button - Green to Yellow on Hover */
.shop-one__cart,
.product-card__view-btn {
    background-color: var(--brand-green) !important;
    color: var(--brand-white) !important;
    transition: all 0.3s ease;
}

.shop-one__cart:hover,
.product-card__view-btn:hover {
    background-color: var(--brand-yellow) !important;
    color: var(--brand-navy-blue) !important;
}

/* Product Card Hover Border - Sky Blue Glow */
.product-card:hover,
.shop-one__item:hover {
    border: 2px solid var(--brand-sky-blue) !important;
    box-shadow: 0 0 20px rgba(0, 173, 239, 0.3) !important;
}

/* Spacing */
.shop-one__item {
    margin-bottom: 30px;
}

/* ============================================
   ABOUT US SECTION - SPECIFICATIONS
   ============================================ */
.about-four {
    background-color: var(--brand-light-sky-blue) !important;
    padding: 100px 0;
}

/* Title - Navy Blue */
.about-four .sec-title__title {
    color: var(--brand-navy-blue) !important;
}

/* Optional Yellow Accent Line Above Heading */
.about-four .sec-title__title::before {
    content: '';
    display: block;
    width: 100px;
    height: 3px;
    background-color: var(--brand-yellow);
    margin: 0 auto 15px;
    border-radius: 2px;
}

/* Body Text - Dark Gray */
.about-four__text {
    color: var(--brand-dark-gray) !important;
}

/* Learn More Button - Green */
.about-four .thm-btn {
    background-color: var(--brand-green) !important;
    color: var(--brand-white) !important;
    border: none;
    padding: 15px 35px;
    border-radius: 5px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.about-four .thm-btn:hover {
    background-color: var(--brand-yellow) !important;
    color: var(--brand-navy-blue) !important;
}

/* ============================================
   GALLERY SECTION - SPECIFICATIONS
   ============================================ */
.gallery-one {
    background-color: var(--brand-white) !important;
    padding: 80px 0;
}

/* Title - Navy Blue, Underline in Sky Blue */
.gallery-one .sec-title__title {
    color: var(--brand-navy-blue) !important;
}

.gallery-one .sec-title__title::after {
    content: '';
    display: block;
    width: 100px;
    height: 3px;
    background-color: var(--brand-sky-blue);
    margin: 15px auto 0;
    border-radius: 2px;
}

/* Gallery Item Hover - Sky Blue Overlay with Zoom */
.gallery-one__item {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
}

.gallery-one__item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 173, 239, 0.7);
    opacity: 0;
    transition: all 0.3s ease;
    z-index: 1;
    border-radius: 10px;
}

.gallery-one__item:hover::before {
    opacity: 1;
}

.gallery-one__item__image img {
    transition: transform 0.3s ease;
}

.gallery-one__item:hover .gallery-one__item__image img {
    transform: scale(1.1);
}

/* ============================================
   FAQ SECTION - SPECIFICATIONS
   ============================================ */
.faq-section {
    background-color: var(--brand-white) !important;
    padding: 80px 0;
}

.faq-section .sec-title__title {
    color: var(--brand-navy-blue) !important;
}

/* Question Text - Sky Blue */
.accordion-button {
    color: var(--brand-sky-blue) !important;
    font-weight: 600;
    background-color: var(--brand-white) !important;
    border: none;
}

.accordion-button:not(.collapsed) {
    color: var(--brand-sky-blue) !important;
    background-color: var(--brand-white) !important;
}

/* Answer Text - Dark Gray */
.accordion-body {
    color: var(--brand-dark-gray) !important;
}

/* Divider Line - Light Gray */
.accordion-item {
    border-bottom: 1px solid var(--brand-medium-gray) !important;
}

/* Contact Note Link */
.faq-section a {
    color: var(--brand-sky-blue) !important;
}

.faq-section a:hover {
    color: var(--brand-navy-blue) !important;
}

/* ============================================
   NEWS & ARTICLES SECTION - SPECIFICATIONS
   ============================================ */
.blog-one {
    background-color: var(--brand-light-gray) !important;
    padding: 100px 0;
}

/* Title - Navy Blue, Underline in Yellow */
.blog-one .sec-title__title {
    color: var(--brand-navy-blue) !important;
}

.blog-one .sec-title__title::after {
    content: '';
    display: block;
    width: 100px;
    height: 3px;
    background-color: var(--brand-yellow);
    margin: 15px auto 0;
    border-radius: 2px;
}

/* Blog Post Title - Sky Blue */
.blog-one__single-content h2 a {
    color: var(--brand-sky-blue) !important;
}

.blog-one__single-content h2 a:hover {
    color: var(--brand-navy-blue) !important;
}

/* Blog Post Summary - Gray */
.blog-one__single-content p {
    color: var(--brand-dark-gray) !important;
}

/* Read More Button - Green to Yellow on Hover */
.blog-one__single .thm-btn,
.blog-one__single a.thm-btn {
    background-color: var(--brand-green) !important;
    color: var(--brand-white) !important;
    border: none;
    padding: 10px 25px;
    border-radius: 5px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.blog-one__single .thm-btn:hover,
.blog-one__single a.thm-btn:hover {
    background-color: var(--brand-yellow) !important;
    color: var(--brand-navy-blue) !important;
}

/* ============================================
   FOOTER - SPECIFICATIONS
   ============================================ */
.footer-one {
    background-color: var(--footer-navy) !important;
}

.footer-one__top {
    background-color: var(--footer-navy) !important;
}

/* Footer Text - White */
.footer-widget *,
.footer-one__bottom * {
    color: var(--brand-white) !important;
}

/* Footer Links - Sky Blue on Hover */
.footer-widget a,
.footer-one__bottom a {
    color: var(--brand-white) !important;
    transition: all 0.3s ease;
}

.footer-widget a:hover,
.footer-one__bottom a:hover {
    color: var(--brand-sky-blue) !important;
}

/* Social Media Icons - Sky Blue Circle Background */
.footer-one__bottom-social-links a,
.footer-widget .social-links a {
    background-color: var(--brand-sky-blue) !important;
    color: var(--brand-white) !important;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.footer-one__bottom-social-links a:hover,
.footer-widget .social-links a:hover {
    background-color: var(--brand-yellow) !important;
    color: var(--brand-navy-blue) !important;
}

/* Footer Bottom Bar - Darker Navy */
.footer-one__bottom {
    background-color: var(--footer-darker-navy) !important;
    padding: 20px 0;
}

.footer-one__bottom-text {
    color: var(--brand-medium-gray) !important;
    text-align: center;
}

.footer-one__bottom-text * {
    color: var(--brand-medium-gray) !important;
}

/* ============================================
   RESPONSIVE DESIGN - SPECIFICATIONS
   ============================================ */
@media (max-width: 991px) {
    /* Mobile Nav becomes Hamburger Menu */
    .mobile-nav__toggler {
        display: block;
    }
    
    .main-menu__list {
        display: none;
    }
    
    /* Cards Stack Vertically */
    .shop-one__item,
    .product-card {
        margin-bottom: 30px;
    }
    
    /* Buttons Full-Width on Small Screens */
    .thm-btn {
        width: 100%;
        margin-bottom: 15px;
    }
    
    /* Spacing Between Sections */
    section {
        margin-bottom: 30px;
    }
}

@media (max-width: 768px) {
    /* Adjust Padding for Mobile */
    .shop-one,
    .about-four,
    .gallery-one,
    .faq-section,
    .blog-one {
        padding: 60px 0;
    }
    
    /* Full-Width Buttons */
    .thm-btn {
        width: 100%;
        padding: 12px 20px;
    }
}

/* ============================================
   TYPOGRAPHY - SPECIFICATIONS
   ============================================ */
body {
    font-family: var(--font-primary);
}

h1, h2, h3, h4, h5, h6,
.sec-title__title {
    font-family: var(--font-primary);
    font-weight: 600;
}

body, p {
    font-weight: 400;
}

/* ============================================
   BUTTONS - GENERAL SPECIFICATIONS
   ============================================ */
.thm-btn {
    background-color: var(--brand-green) !important;
    color: var(--brand-white) !important;
    border: none;
    padding: 15px 35px;
    border-radius: 5px;
    font-weight: 600;
    transition: all 0.3s ease;
    text-transform: none;
}

.thm-btn:hover {
    background-color: var(--brand-yellow) !important;
    color: var(--brand-navy-blue) !important;
}

/* ============================================
   SECTION TITLES - GENERAL SPECIFICATIONS
   ============================================ */
.sec-title__title {
    color: var(--brand-navy-blue) !important;
    font-weight: 600;
}

.sec-title__tagline {
    color: var(--brand-sky-blue) !important;
    font-weight: 500;
}