/********** Template CSS **********/
:root {
    --primary: #06BBCC;
    --light: #F0FBFC;
    --dark: #181d38;
}

/* Ensure mobile menu is readable when collapsed */
@media (max-width: 991.98px) {
    .navbar .navbar-collapse {
        background: #ffffff;
        border-top: 1px solid #EEEEEE;
        box-shadow: 0 5px 10px rgba(0,0,0,0.08);
    }
    .navbar .navbar-nav .nav-link {
        color: #212529 !important;
        padding: 12px 20px;
    }
    .navbar.nav-transparent .navbar-nav .nav-link {
        color: #212529 !important;
    }
    .navbar .dropdown-menu {
        background: #ffffff;
        border: none;
        border-radius: 0;
        box-shadow: none;
    }
}

/* Carousel transition styles */
.owl-carousel .owl-item {
    transition: transform 0.6s ease-in-out;
    transform: translateZ(0);
    will-change: transform;
    backface-visibility: hidden;
}

.owl-carousel .owl-item.active,
.owl-carousel .owl-item.next,
.owl-carousel .owl-item.prev {
    transform: translateZ(0);
    will-change: transform;
}

.owl-carousel .owl-item.next.left,
.owl-carousel .owl-item.prev.right,
.owl-carousel .owl-item.active.left,
.owl-carousel .owl-item.active.right {
    transform: translateZ(0);
    will-change: transform;
}

.fw-medium {
    font-weight: 600 !important;
}

.fw-semi-bold {
    font-weight: 700 !important;
}

.back-to-top {
    position: fixed;
    display: none;
    right: 45px;
    bottom: 45px;
    z-index: 99;
    transition: all 0.3s ease;
    transform: translateZ(0);
    will-change: transform;
}


/*** Spinner ***/
#spinner {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-out, visibility 0s linear 0.3s;
    z-index: 99999;
    transform: translateZ(0);
}

#spinner.show {
    transition: opacity 0.3s ease-out, visibility 0s linear 0s;
    visibility: visible;
    opacity: 1;
}


/*** Button ***/
.btn {
    font-family: 'Nunito', sans-serif;
    font-weight: 600;
    transition: all 0.2s ease;
    transform: translateZ(0);
    will-change: transform;
    backface-visibility: hidden;
}

.btn.btn-primary,
.btn.btn-secondary {
    color: #FFFFFF;
}

.btn-square {
    width: 38px;
    height: 38px;
}

.btn-sm-square {
    width: 32px;
    height: 32px;
}

.btn-lg-square {
    width: 48px;
    height: 48px;
}

.btn-square,
.btn-sm-square,
.btn-lg-square {
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: normal;
    border-radius: 0px;
}


/*** Topbar ***/
.topbar {
    background: transparent;
    color: #fff;
    padding: 8px 0;
    font-size: 14px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1001; /* Above navbar */
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    background: rgba(24, 29, 56, 0.3);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.topbar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.topbar .info {
    display: flex;
    gap: 20px;
}

.topbar .info-item {
    display: flex;
    align-items: center;
    gap: 6px;
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
}

.topbar .info-item:hover {
    color: var(--primary);
    transform: translateY(-1px);
}

.topbar .info i {
    color: var(--primary);
    transition: all 0.3s ease;
}

.topbar .info-item:hover i {
    transform: scale(1.1);
}

.topbar .actions {
    display: flex;
    gap: 15px;
    align-items: center;
}

/*** Navbar ***/
.navbar {
    background: rgba(0, 0, 0, 0.2) !important;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    /* Use transform-based transitions for smoother, GPU-accelerated movement */
    transition: transform 0.35s ease, background 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    transform: translateZ(0);
    will-change: transform;
    padding: 10px 0;
    height: 75px;
    position: fixed;
    top: 40px; /* Position below topbar */
    left: 0;
    right: 0;
    z-index: 1000;
    width: 100%;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Navbar links styling */
.navbar-light .navbar-nav .nav-link {
    color: #ffffff !important;
    text-shadow: 0 1px 3px rgba(0,0,0,0.7);
    font-weight: 600;
    padding: 10px 18px;
    margin: 0 2px;
    transition: all 0.3s ease;
    position: relative;
    letter-spacing: 0.5px;
    border-radius: 4px;
}

/* Hover effect */
.navbar-light .navbar-nav .nav-link:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-2px);
}

/* Active link */
.navbar-light .navbar-nav .nav-item.active .nav-link {
    color: var(--primary) !important;
}

/* Dropdown menu */
.navbar .dropdown-menu {
    background: rgba(24, 29, 56, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    margin-top: 5px;
    padding: 10px 0;
    min-width: 220px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.dropdown-item {
    color: #fff !important;
    padding: 8px 20px;
    transition: all 0.2s ease;
}

.dropdown-item:hover, .dropdown-item:focus {
    background: rgba(255, 255, 255, 0.1);
    color: var(--primary) !important;
}

.dropdown-divider {
    border-color: rgba(255, 255, 255, 0.1);
}

/* Navbar brand/logo */
.navbar-brand {
    padding: 5px 0;
    margin-right: 30px;
    transition: all 0.3s ease;
}

.navbar-brand img {
    height: 50px;
    width: auto;
    transition: all 0.3s ease;
}

.navbar-brand:hover img {
    transform: scale(1.05);
}

/* Scrolled state */
.navbar.scrolled {
    color: var(--primary) !important;
}

/* Ensure logo is visible on hero */
.navbar-light .navbar-brand {
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0));
    transition: all 0.3s ease;
    padding: 5px 0;
}

.navbar-light .navbar-brand:hover {
    transform: translateY(-2px);
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.242));
}

.navbar .dropdown-toggle::after {
    border: none;
    content: "\f107";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    vertical-align: middle;
    margin-left: 8px;
    transition: transform 0.3s ease;
}

.navbar .dropdown-toggle[aria-expanded="true"]::after {
    transform: rotate(180deg);
}

.navbar-light .navbar-nav .nav-link {
    margin-right: 5px;
    padding: 18px 12px;
    color: #ffffff;
    font-weight: 500;
    font-size: 15px;
    outline: none;
    font-family: 'Nunito', sans-serif;
    position: relative;
    transform: translateZ(0);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.066);
}

.navbar-light .navbar-nav .nav-link::after {
    content: '';
    position: absolute;
    bottom: 20px;
    left: 50%;
    width: 0;
    height: 3px;
    background: var(--primary);
    transition: all 0.2s ease;
    transform: translateX(-50%);
    will-change: width;
}

.navbar-light .navbar-nav .nav-link:hover::after,
.navbar-light .navbar-nav .nav-link.active::after {
    width: 60%;
}

.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link.active {
    color: var(--primary);
}

@media (max-width: 991.98px) {
    .navbar {
        background: rgba(255, 255, 255, 0.95) !important;
        padding: 5px 0;
    }
    
    .navbar-light .navbar-nav .nav-link  {
        margin-right: 0;
        padding: 12px 20px;
        color: var(--dark) !important;
        font-family: 'Nunito', sans-serif;
        transition: all 0.2s ease;
        transform: translateZ(0);
    }

    .navbar-light .navbar-nav .nav-link::after {
        display: none;
    }

    .navbar-light .navbar-nav {
        border-top: 1px solid #EEEEEE;
        background: #fff;
        padding: 15px 0;
        border-radius: 0 0 10px 10px;
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.08);
        align-items: end;
        transform: translateZ(0);
        will-change: transform;
    }
}

.navbar-light .navbar-brand {
    height: 60px;
    padding: 0;
    margin-right: 10px;
    transition: all 0.3s ease;
}

.navbar-brand img {
    height: 50px;
    width: auto;
    object-fit: contain;
    transition: all 0.3s ease;
    transform: translateZ(0);
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.088));
}

/* Visible brand name beside logo: classic, light, and responsive. Inherits navbar color by default. */
.brand-name {
    font-family: 'Nunito', 'Heebo', Georgia, serif;
    font-weight: 700;
    color: var(--primary); /* use brand primary color for good contrast and recognition */
    margin-left: 0.5rem;
    font-size: 0.98rem;
    line-height: 1;
    display: inline-block;
    vertical-align: middle;
    letter-spacing: 0.4px;
    opacity: 1;
}

@media (min-width: 768px) {
    .brand-name { font-size: 1.04rem; }
}

@media (min-width: 1200px) {
    .brand-name { font-size: 1.18rem; }
}

@media (max-width: 576px) {
    /* On small screens keep the brand text beside the logo in a compressed row.
       Use ellipsis to avoid wrapping and keep layout compact and responsive. */
    .navbar-brand {
        flex-direction: row;
        align-items: center;
        gap: 0.4rem;
        min-width: 0;
    }
    .navbar-brand img {
        height: 40px; /* slightly smaller for compact mobile presence */
    }
    .brand-name {
        display: inline-block;
        margin-left: 0.4rem;
        margin-top: 0;
        font-size: 0.86rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 110px; /* keep compact on narrow screens */
        opacity: 1;
    }
}

/* Ensure the brand name remains visible when navbar is transparent over hero images */
.navbar.nav-transparent .brand-name {
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.45);
}

/* When navbar is scrolled to a light background use the primary color */
.navbar.scrolled .brand-name {
    color: var(--primary) !important;
    text-shadow: none;
}

/* Brand text styles removed to allow the navbar to control text appearance. */

@media (max-width: 576px) {
    .navbar-brand .brand-text {
        font-size: 0.8rem;
        letter-spacing: 0.5px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 120px;
    }
}

.brand-icon {
    color: var(--primary);
    font-size: 28px;
}

/* Remove logo glow entirely and keep the image plain. Responsiveness is
   handled by the `.navbar-brand img` rules and media queries elsewhere. */
.logo-glow {
    filter: none !important;
    box-shadow: none !important;
    transition: none !important;
}

/* Ensure transparent navbar variant doesn't reintroduce any filter */
.navbar.nav-transparent .logo-glow {
    filter: none !important;
    box-shadow: none !important;
}

/* Keep scrolled/sticky navbar from reintroducing glow */
.navbar.scrolled .logo-glow {
    filter: none !important;
    box-shadow: none !important;
}
.logo-glow:hover { filter: none !important; box-shadow: none !important; }

/* Brand text overrides removed. If visible brand text is added, it will inherit
   the navbar's default typography and color. */

.navbar-light.sticky-top {
    /* Keep navbar visible initially (placed below the topbar). Previously this was set to -100px
       which hid the navbar until the page was scrolled. We override to match the default
       `.navbar { top: 40px; }` behavior so the navbar is visible on first load. */
    top: 40px;
    transition: top 0.4s ease, background 0.4s ease, box-shadow 0.4s ease;
}

@media (min-width: 992px) {
    .navbar .nav-item .dropdown-menu {
        display: block;
        margin-top: 0;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
        border: none;
        border-radius: 0;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        padding: 10px 0;
        transform: translateY(10px);
        will-change: transform, opacity;
    }

    .navbar .dropdown-menu.fade-down {
        top: 100%;
        transform: rotateX(-75deg);
        transform-origin: 0% 0%;
    }

    .navbar .nav-item:hover .dropdown-menu {
        top: 100%;
        transform: rotateX(0deg) translateY(0);
        visibility: visible;
        transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
        opacity: 1;
    }
    
    .navbar .dropdown-item {
        padding: 10px 20px;
        transition: all 0.2s ease;
        font-family: 'Nunito', sans-serif;
        transform: translateZ(0);
    }
    
    .navbar .dropdown-item:hover {
        background: rgba(6, 187, 204, 0.1);
        color: var(--primary);
        padding-left: 25px;
    }
    
    .navbar-nav {
        justify-content: flex-end;
        width: 100%;
    }
    
    .navbar .btn {
        margin-left: 5px;
        font-family: 'Nunito', sans-serif;
        transition: all 0.2s ease;
    }

    /* Compact, responsive Join CTA inside the navbar */
    .navbar .navbar-cta {
        padding: 8px 14px; /* small by default */
        font-size: 0.9rem;
        line-height: 1;
        /* Make edges square per design request */
        border-radius: 0 !important;
        height: auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Slightly larger on medium screens */
    @media (min-width: 768px) {
        .navbar .navbar-cta {
            padding: 10px 16px;
            font-size: 0.95rem;
        }
    }

    /* On large screens keep it noticeable but not oversized */
    @media (min-width: 992px) {
        .navbar .navbar-cta {
            padding: 12px 20px;
            font-size: 1rem;
        }
    }
}

.topbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 40px;
    background: rgba(24, 29, 56, 0.95);
    z-index: 1000;
    color: #FFFFFF;
    box-shadow: 0 2px 15px rgba(0,0,0,0.2);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

body {
    margin: 0;
    padding: 40px 0 0 0; /* Add padding to account for fixed topbar */
    font-family: 'Heebo', sans-serif;
    color: #666666;
}


/*** Header carousel ***/
@media (max-width: 768px) {
    .header-carousel .owl-carousel-item {
        position: relative;
        min-height: 500px;
        transform: translateZ(0);
        will-change: transform;
        overflow: hidden;
        backface-visibility: hidden;
    }
    
    .header-carousel .owl-carousel-item img {
        position: absolute;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transform: translateZ(0);
        will-change: transform;
    }
}

.header-carousel .owl-nav {
    position: absolute;
    top: 50%;
    right: 8%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
}

.header-carousel .owl-nav .owl-prev,
.header-carousel .owl-nav .owl-next {
    margin: 7px 0;
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    background: transparent;
    border: 1px solid #FFFFFF;
    font-size: 22px;
    transition: all 0.3s ease;
    transform: translateZ(0);
    will-change: transform;
    backface-visibility: hidden;
    -webkit-transform: translateZ(0);
}

.header-carousel .owl-nav .owl-prev:hover,
.header-carousel .owl-nav .owl-next:hover {
    background: var(--primary);
    border-color: var(--primary);
    transform: scale(1.1);
    transition: all 0.3s ease;
    -webkit-transform: scale(1.1);
}

/* Subtler, smaller hero typography */
.header-carousel .owl-carousel-item h5 {
    font-size: 0.9rem !important;
    font-weight: 500;
    letter-spacing: 0.5px;
}

.header-carousel .owl-carousel-item h1 {
    font-size: 2.75rem !important;
    font-weight: 600;
    line-height: 1.15;
    transform: translateZ(0);
    transition: all 0.3s ease;
}

.header-carousel .owl-carousel-item p {
    font-size: 1rem !important;
    font-weight: 400;
    transition: all 0.3s ease;
}

@media (max-width: 768px) {
    .header-carousel .owl-carousel-item h5 {
        font-size: 0.8rem !important;
    }
    .header-carousel .owl-carousel-item h1 {
        font-size: 2rem !important;
        line-height: 1.2;
    }
    .header-carousel .owl-carousel-item p {
        font-size: 0.95rem !important;
    }
}

.header-carousel .container {
    position: relative;
    padding: 45px 0 45px 35px;
    border-left: none;
    transform: translateZ(0);
    will-change: transform;
}

.header-carousel .container::before,
.header-carousel .container::after {
    display: none;
}

@media (min-width: 769px) {
    .header-carousel .owl-carousel-item {
        position: relative;
        min-height: 760px;
        transform: translateZ(0);
        will-change: transform;
        overflow: hidden;
        backface-visibility: hidden;
    }

    .header-carousel .owl-carousel-item img {
        position: absolute;
        width: 100%;
        height: 760px;
        object-fit: cover;
        transform: translateZ(0);
        will-change: transform;
    }

    /* Push hero content downward on desktop */
    .header-carousel .container {
        padding-top: 160px;
        padding-bottom: 60px;
    }
}

.header-carousel {
    position: relative;
    overflow: hidden;
    margin-top: 0;
    padding-top: 0;
    min-height: 100vh;
    display: flex;
    align-items: center;
}

/* Localized bracket wrapper so height matches content */
.header-bracket {
    position: relative;
    display: inline-block;
    padding: 24px 0 24px 24px;
    border-left: 10px solid #FFFFFF;
}

.header-bracket::before,
.header-bracket::after {
    position: absolute;
    content: "";
    left: 0;
    width: 70px;
    height: 10px;
    background: #FFFFFF;
}

.header-bracket::before {
    top: 0;
}

.header-bracket::after {
    top: 100%;
    margin-top: -10px;
}

@media (max-width: 768px) {
    .header-bracket {
        padding: 16px 0 16px 18px;
        border-left: 8px solid #FFFFFF;
    }
    .header-bracket::before,
    .header-bracket::after {
        width: 56px;
        height: 8px;
    }
    .header-bracket::after {
        margin-top: -8px;
    }
}

/* Compact advanced header strip inside hero */
.hero-meta {
    display: inline-flex;
    gap: 10px;
    margin-bottom: 10px;
}

.hero-meta .chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    font-size: 12px;
    color: #fff;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 999px;
    backdrop-filter: saturate(140%) blur(3px);
    transition: all 0.3s ease;
    transform: translateZ(0);
}

.hero-meta .chip i {
    opacity: 0.9;
}

/* Transparent navbar initial state */
/* Navbar scrolled state */
.navbar.scrolled {
    background: rgba(255, 255, 255, 0.98) !important;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1) !important;
    padding: 5px 0;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: all 0.3s ease;
    height: 70px;
}

/* Hide navbar when `.hidden` is applied (used by JS when user scrolls). This will slide
   the navbar up out of view. It is intentionally separate from `.scrolled` so initial
   visible/translucent state is preserved. */
.navbar.hidden {
    /* Hide via translateY for smoother animation and better performance */
    transform: translateY(-130%) !important;
    opacity: 0;
    pointer-events: none;
    will-change: transform, opacity;
}

/* Focus styles for keyboard users (visible outline) */
.navbar .nav-link:focus-visible,
.navbar .dropdown-item:focus-visible {
    outline: 3px solid rgba(6,187,204,0.18);
    outline-offset: 2px;
    border-radius: 4px;
}

.navbar .navbar-cta:focus-visible {
    outline: 3px solid rgba(6,187,204,0.22);
    outline-offset: 2px;
}

/* Adjust padding when navbar is scrolled */
body {
    padding-top: 0;
}

/* Hero section takes full viewport height */
.header-carousel {
    margin-top: 0;
    min-height: 100vh;
    position: relative;
    z-index: 1;
}

@media (max-width: 768px) {
    .header-carousel {
        min-height: 500px;
    }
}

/* Make sure carousel items take full height */
.header-carousel .owl-stage-outer,
.header-carousel .owl-stage,
.header-carousel .owl-item,
.header-carousel .owl-item > div {
    height: 100%;
}

/* Position carousel content */
.header-carousel .container {
    position: relative;
    z-index: 2;
    padding-top: 150px; /* Space for navbar and topbar */
    padding-bottom: 100px;
}

/* Make sure images cover the full area */
.header-carousel .owl-carousel-item img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Adjust for mobile */
@media (max-width: 991.98px) {
    .navbar {
        background: rgba(0, 0, 0, 0.7) !important;
        top: 0;
        padding-top: 40px; /* Space for topbar */
    }
    
    .topbar {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        background: rgba(24, 29, 56, 0.9) !important;
    }
    
    .navbar-collapse {
        background: rgba(0, 0, 0, 0.95);
        padding: 15px;
        margin: 10px -15px;
        border-radius: 8px;
    }
}

/* Adjust text colors when scrolled */
.navbar.scrolled .navbar-nav .nav-link {
    color: var(--dark) !important;
    text-shadow: none;
}

.navbar.scrolled .navbar-nav .nav-link:hover {
    color: var(--primary) !important;
}

/* Make sure dropdowns are visible */
.navbar .dropdown-menu {
    border: none;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    margin-top: 5px;
    border-radius: 4px;
}

/* Mobile menu button */
.navbar-toggler {
    border: none;
    padding: 0.5rem;
}

.navbar-toggler:focus {
    box-shadow: none;
    outline: none;
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

.navbar.scrolled .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

.navbar.scrolled .navbar-nav .nav-link {
    color: var(--dark) !important;
    text-shadow: none;
}

.navbar.scrolled .navbar-brand img {
    /* Keep the brand image size on scrolled/sticky navbar but do not remove
       visual glow via `filter` here — `.logo-glow` controls the glow so we
       avoid overriding it. */
    height: 45px;
}

.navbar.nav-transparent .navbar-brand h2,
.navbar.nav-transparent .navbar-nav .nav-link,
.navbar.nav-transparent a.btn {
    color: #FFFFFF !important;
}

.navbar.nav-transparent .navbar-brand,
.navbar.nav-transparent a.btn {
    height: 76px;
}

.navbar.nav-transparent .navbar-brand img {
    height: 60px;
    width: auto;
}

/* Ensure the logo glow persists when the navbar becomes scrolled/sticky.
   Some JS toggles `.scrolled` on the navbar; previously `.navbar.scrolled`
   removed the filter. Reapply a slightly stronger glow for the scrolled state
   so the branding remains consistent and visible. */
.navbar.scrolled .logo-glow {
    filter: drop-shadow(0 2px 2px rgba(0,0,0,0.28))
            drop-shadow(0 0 14px rgba(255,255,255,0.75))
            drop-shadow(0 0 26px rgba(6,187,204,0.45));
}

.navbar.nav-transparent .navbar-nav .nav-link {
    padding: 28px 20px;
}

/* Make CTA button look like plain text when transparent */
.navbar.nav-transparent a.btn {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

/* Mobile toggler visibility on transparent navbar */
.navbar.nav-transparent .navbar-toggler {
    border-color: rgba(255, 255, 255, 0.5);
}
.navbar.nav-transparent .navbar-toggler-icon {
    filter: invert(1) brightness(2);
}

.topbar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1100;
    height: 46px;
    display: flex;
    align-items: center;
    background: linear-gradient(90deg, rgba(24,29,56,0.98) 0%, rgba(24,29,56,0.92) 40%, rgba(6,187,204,0.35) 85%, rgba(6,187,204,0.15) 100%);
    border-bottom: 1px solid rgba(255,255,255,0.1);
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.topbar .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 1.5rem; /* match navbar brand px-4 */
    padding-right: 1.5rem;
}

.topbar .info {
    display: inline-flex;
    gap: 20px;
    font-size: 13px;
    color: #FFFFFF;
}

.topbar .info-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 20px;
    background: rgba(255,255,255,0.08);
    transition: all 0.2s ease;
    transform: translateZ(0);
    will-change: transform;
}

.topbar .info-item:hover {
    background: rgba(6,187,204,0.2);
    transform: translateY(-2px);
}

.topbar .info i {
    color: var(--primary);
    font-size: 14px;
}

.topbar .actions {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.topbar .social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    color: #FFFFFF;
    background: rgba(255,255,255,0.1);
    transition: all 0.2s ease;
    transform: translateZ(0);
    will-change: transform;
}

.topbar .social-link:hover {
    color: var(--primary);
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-3px);
}

.topbar .btn-sm {
    padding: 5px 15px;
    font-weight: 600;
    transition: all 0.2s ease;
    border: none;
    transform: translateZ(0);
    will-change: transform;
}

.topbar .btn-sm:hover {
    transform: translateY(-2px) translateZ(0);
    box-shadow: 0 5px 15px rgba(6,187,204,0.4);
}

.topbar.hidden {
    transform: translateY(-100%);
    transition: transform 0.4s ease;
}

.navbar.nav-transparent.has-topbar {
    margin-top: 44px;
    transition: margin-top 0.4s ease;
}

.sticky-top.topbar-collapsed.nav-transparent {
    margin-top: 0;
    transition: margin-top 0.4s ease;
}

/* Responsive tweaks for topbar */
@media (max-width: 768px) {
    body { padding-top: 40px; }
    .topbar { height: 40px; }
    .topbar .info { gap: 10px; font-size: 12px; }
    .topbar .info-item { padding: 3px 8px; }
    .topbar .actions { gap: 8px; }
    .topbar .social-link { width: 26px; height: 26px; font-size: 12px; }
    .topbar .btn-sm { padding: 3px 10px; font-size: 12px; }
    /* Ensure enough vertical space on tablets */
    .header-carousel .owl-carousel-item {
        min-height: 500px;
    }
    .header-carousel .owl-carousel-item img {
        height: 100%;
        object-fit: cover;
    }
    /* Move content lower under the header */
    .header-carousel .container {
        padding-top: 100px;
        padding-bottom: 44px;
    }
    /* Reduce chips and allow wrapping */
    .hero-meta {
        flex-wrap: wrap;
        gap: 6px;
    }
    .hero-meta .chip {
        font-size: 11px;
        padding: 4px 8px;
    }
    .hero-meta .chip:nth-child(n+3) {
        display: none;
    }
    /* Fit bracket width within screen */
    .header-bracket {
        max-width: 90%;
    }
    
    .navbar-brand img {
        height: 50px;
    }
}

@media (max-width: 576px) {
    body { padding-top: 0; }
    .topbar { display: none; }
    .navbar.nav-transparent.has-topbar { margin-top: 0; }
    .topbar .info { gap: 5px; font-size: 11px; }
    .topbar .info-item { padding: 2px 6px; font-size: 10px; }
    /* Hide location on very small screens for space */
    .topbar .info span:nth-child(3) { display: none; }
    .topbar .actions { gap: 5px; }
    .topbar .social-link { width: 22px; height: 22px; font-size: 10px; }
    .topbar .btn-sm { display: none; }
    /* Ensure enough vertical space on small phones */
    .header-carousel .owl-carousel-item {
        min-height: 500px;
    }
    .header-carousel .owl-carousel-item img {
        height: 100%;
    }
    .header-carousel .container {
        padding-top: 90px;
        padding-bottom: 36px;
    }
    /* Hide chips to declutter */
    .hero-meta { display: none; }
    /* Slightly smaller heading spacing */
    .header-carousel .owl-carousel-item h1 { margin-bottom: 0.5rem; }
    .header-carousel .owl-carousel-item p { margin-bottom: 1rem; }
    .header-bracket { max-width: 92%; }
    
    .navbar-brand img {
        height: 45px;
    }
}

/* Hide topbar and lift navbar up on tablets and smaller (mobile-friendly layout) */
@media (max-width: 991.98px) {
    .topbar {
        display: none !important;
        height: 0 !important;
        visibility: hidden;
        opacity: 0;
        pointer-events: none;
    }

    /* When topbar is hidden, move the navbar to the top so it appears sticky at the page top */
    .navbar {
        top: 0 !important;
        padding-top: 8px;
        padding-bottom: 8px;
    }

    /* Ensure page content isn't pushed extra by previous topbar spacing */
    body {
        padding-top: 0;
    }

    /* Reduce hero top padding when topbar is hidden on smaller screens */
    .header-carousel .container {
        padding-top: 100px;
    }
}

@media (min-width: 992px) {
    .topbar .container {
        padding-left: 3rem; /* match navbar brand px-lg-5 */
        padding-right: 3rem;
    }
    
    .navbar.nav-transparent .navbar-nav .nav-link {
        padding: 28px 20px;
    }
    
    .navbar-brand img {
        height: 75px;
    }
}

.page-header {
    background: linear-gradient(rgba(24, 29, 56, .7), rgba(24, 29, 56, .7)), url(../img/carousel-1.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.page-header-inner {
    background: rgba(15, 23, 43, .7);
}

.breadcrumb-item + .breadcrumb-item::before {
    color: var(--light);
}


/*** Section Title ***/
.section-title {
    position: relative;
    display: inline-block;
    text-transform: uppercase;
}

.section-title::before {
    position: absolute;
    content: "";
    width: calc(100% + 80px);
    height: 2px;
    top: 4px;
    left: -40px;
    background: var(--primary);
    z-index: -1;
}

.section-title::after {
    position: absolute;
    content: "";
    width: calc(100% + 120px);
    height: 2px;
    bottom: 5px;
    left: -60px;
    background: var(--primary);
    z-index: -1;
}

.section-title.text-start::before {
    width: calc(100% + 40px);
    left: 0;
}

.section-title.text-start::after {
    width: calc(100% + 60px);
    left: 0;
}


/*** Service ***/
.service-item {
    background: var(--light);
    transition: all 0.3s ease;
    transform: translateZ(0);
    will-change: transform;
}

.service-item:hover {
    margin-top: -10px;
    background: var(--primary);
    transform: translateY(-10px) translateZ(0);
}

.service-item * {
    transition: all 0.3s ease;
    transform: translateZ(0);
    will-change: transform;
}

.service-item:hover * {
    color: var(--light) !important;
}

/* New service-card styles (scoped) */
.service-slider-section { background: #ffffff; }
.service-card {
    background: #ffffff;
    /* primary-tinted border and subtle shadow at rest; no radius */
    border: 1px solid rgba(6,187,204,0.12);
    border-radius: 0;
    box-shadow: 0 6px 18px rgba(6,187,204,0.06);
    transition: box-shadow 260ms ease, transform 260ms cubic-bezier(.2,.9,.2,1), border-color 200ms ease;
    will-change: transform, box-shadow, border-color;
}
.service-card:hover,
.service-card:focus-within {
    /* keep no radius on hover as requested, but lift and strengthen shadow */
    border-radius: 0;
    transform: translateY(-6px);
    box-shadow: 0 20px 44px rgba(6,187,204,0.14);
    border-color: rgba(6, 187, 204, 0.636);
}

/* Make the middle service card look "featured" by default on larger screens
   Targets the middle column (second child) inside the services row so it
   appears elevated and highlighted even when not hovered. Adjusts the
   icon wrapper similarly. This is desktop-first; when columns stack on
   small screens the natural flow will apply (no forced featured state).
*/
@media (min-width: 768px) {
    .service-slider-section .row > .col-lg-4:nth-child(2) .service-card,
    .service-slider-section .row > .col-md-4:nth-child(2) .service-card {
        transform: translateY(-6px);
        box-shadow: 0 20px 44px rgba(6,187,204,0.14);
        border-color: rgba(6, 187, 204, 0.636);
    }
    .service-slider-section .row > .col-lg-4:nth-child(2) .service-icon-wrapper,
    .service-slider-section .row > .col-md-4:nth-child(2) .service-icon-wrapper {
        transform: translateY(-6px);
        box-shadow: 0 14px 36px rgba(6,187,204,0.14);
    }
}
.service-icon-wrapper {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--primary), #00c08a);
    margin: 0 auto;
    box-shadow: 0 6px 18px rgba(6, 187, 204, 0.516);
    transition: transform 220ms cubic-bezier(.2,.9,.2,1), box-shadow 220ms ease;
}
.service-card:hover .service-icon-wrapper { transform: translateY(-6px); box-shadow: 0 14px 36px rgba(6,187,204,0.14); }
.service-card h5 { font-weight: 700; margin: 0 0 0.75rem; font-size: 1.125rem; }
.service-card h5::after {
    content: "";
    display: block;
    width: 60px;
    height: 4px;
    margin: 10px auto 0;
    background: var(--primary);
    border-radius: 4px;
    box-shadow: 0 6px 18px rgba(6,187,204,0.06);
}
.service-card p { color: #3f4a47; line-height: 1.6; }

/* Desktop spacing: ensure gap from About section */
@media (min-width: 992px) {
    .about-section { margin-bottom: 3.5rem; }
    .service-slider-section { margin-top: 2.5rem; }
}

@media (prefers-reduced-motion: reduce) {
    .service-card,
    .service-icon-wrapper { transition: none !important; transform: none !important; }
}

/* Spacing and typography for the Services section header (scoped) */
.service-slider-section .text-center.mb-4 {
    margin-bottom: 1.75rem; /* base gap under the header block */
}
.service-slider-section .section-title {
    display: inline-block;
    padding: .28rem .9rem;
    margin-bottom: .6rem;
    font-size: .9rem;
    border-radius: 6px;
    box-shadow: none;
}
.service-slider-section h2 {
    font-size: 1.75rem;
    margin-bottom: var(--service-heading-gap, 1.25rem);
    font-weight: 700;
    color: #072022;
}

@media (min-width: 992px) {
    .service-slider-section .text-center.mb-4 { margin-bottom: 2.75rem; }
    .service-slider-section h2 { font-size: 2rem; margin-bottom: var(--service-heading-gap, 1.75rem); }
}

/* Responsive gap for the Services section heading: 'Our Core Product Categories' */
.service-slider-section {
    /* default (mobile) */
    --service-heading-gap: 1rem;
}
@media (min-width: 576px) {
    .service-slider-section { --service-heading-gap: 1.5rem; }
}
@media (min-width: 768px) {
    .service-slider-section { --service-heading-gap: 2rem; }
}
@media (min-width: 992px) {
    .service-slider-section { --service-heading-gap: 2.5rem; }
}

@media (max-width: 576px) {
    .service-slider-section .text-center.mb-4 { margin-bottom: 1rem; }
    .service-slider-section h2 { font-size: 1.25rem; }
    .service-slider-section .section-title { padding: .15rem .6rem; font-size: .8rem; }
}


/*** Categories & Courses ***/
.category img,
.course-item img {
    transition: all 0.3s ease;
    transform: translateZ(0);
    will-change: transform;
}

.category a:hover img,
.course-item:hover img {
    transform: scale(1.1) translateZ(0);
}

/* Polished category card styles */
.course-item {
    /* square corners as requested */
    border-radius: 0;
    overflow: hidden;
    /* subtle thin border to separate cards from background */
    border: 1px solid rgba(15,20,18,0.04);
    /* crisper gentle shadow for a professional look */
    box-shadow: 0 10px 28px rgba(6,187,204,0.05);
    transition: transform 260ms cubic-bezier(.2,.9,.2,1), box-shadow 260ms ease, border-color 200ms ease;
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #ffffff;
}
.course-item .position-relative {
    position: relative;
    overflow: hidden;
}
.course-item .position-relative::before {
    /* smaller, subtler gradient to anchor text without overpowering */
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 28%;
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.12) 100%);
    pointer-events: none;
}
.course-item img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    display: block;
}
.course-item .text-center { padding-top: 1rem; padding-bottom: 1rem; }
.course-item h5 { font-size: 1rem; margin-bottom: .35rem; font-weight: 700; color: #072022; }
.course-item p.small { margin-bottom: 0.6rem; color: #6b6f6d; }
.course-item .btn {
    border-radius: 20px;
    padding: .35rem .85rem;
    box-shadow: 0 6px 18px rgba(6,187,204,0.06);
}
.course-item:hover {
    transform: translateY(-6px);
    box-shadow: 0 26px 60px rgba(6,187,204,0.10);
    border-color: rgba(6,187,204,0.06);
}

/* Number badge for category tiles (top-left) */
.course-item .category-number {
    position: absolute;
    left: 12px;
    top: 12px;
    z-index: 6;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: var(--primary, #06bbcc);
    color: #fff;
    font-weight: 600;
    border-radius: 50%;
    box-shadow: 0 6px 16px rgba(6,187,204,0.12);
    font-size: 14px;
}

/* Slightly lift the badge on hover along with the card */
.course-item:hover .category-number,
.course-item:focus-within .category-number {
    transform: translateY(-4px);
}

@media (min-width: 768px) {
    .course-item img { height: 160px; }
}
@media (min-width: 992px) {
    .course-item img { height: 180px; }
}


/*** Team ***/
.team-item img {
    transition: all 0.3s ease;
    transform: translateZ(0);
    will-change: transform;
}

.team-item:hover img {
    transform: scale(1.1) translateZ(0);
}


/*** Testimonial ***/
.testimonial-carousel::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    height: 100%;
    width: 0;
    background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
    z-index: 1;
}

.testimonial-carousel::after {
    position: absolute;
    content: "";
    top: 0;
    right: 0;
    height: 100%;
    width: 0;
    background: linear-gradient(to left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
    z-index: 1;
}

@media (min-width: 768px) {
    .testimonial-carousel::before,
    .testimonial-carousel::after {
        width: 200px;
    }
}

@media (min-width: 992px) {
    .testimonial-carousel::before,
    .testimonial-carousel::after {
        width: 300px;
    }
}

.testimonial-carousel .owl-item .testimonial-text,
.testimonial-carousel .owl-item.center .testimonial-text * {
    transition: all 0.3s ease;
    transform: translateZ(0);
    will-change: transform;
}

.testimonial-carousel .owl-item.center .testimonial-text {
    background: var(--primary) !important;
}

.testimonial-carousel .owl-item.center .testimonial-text * {
    color: #FFFFFF !important;
}

.testimonial-carousel .owl-dots {
    margin-top: 24px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.testimonial-carousel .owl-dot {
    position: relative;
    display: inline-block;
    margin: 0 5px;
    width: 15px;
    height: 15px;
    border: 1px solid #CCCCCC;
    transition: all 0.3s ease;
    transform: translateZ(0);
    will-change: transform;
}

.testimonial-carousel .owl-dot.active {
    background: var(--primary);
    border-color: var(--primary);
}


/*** Footer ***/
.footer .btn.btn-social {
    margin-right: 5px;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--light);
    font-weight: normal;
    border: 1px solid #FFFFFF;
    border-radius: 35px;
    transition: all 0.2s ease;
    transform: translateZ(0);
    will-change: transform;
}

.footer .btn.btn-social:hover {
    color: var(--primary);
}

.footer .btn.btn-link {
    display: block;
    margin-bottom: 5px;
    padding: 0;
    text-align: left;
    color: #FFFFFF;
    font-size: 15px;
    font-weight: normal;
    text-transform: capitalize;
    transition: all 0.2s ease;
    transform: translateZ(0);
    will-change: transform;
}

.footer .btn.btn-link::before {
    position: relative;
    content: "\f105";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-right: 10px;
}

.footer .btn.btn-link:hover {
    letter-spacing: 1px;
    box-shadow: none;
}

.footer .copyright {
    padding: 25px 0;
    font-size: 15px;
    border-top: 1px solid rgba(256, 256, 256, .1);
}

.footer .copyright a {
    color: var(--light);
}

.footer .footer-menu a {
    margin-right: 15px;
    padding-right: 15px;
    border-right: 1px solid rgba(255, 255, 255, .1);
}

.footer .footer-menu a:last-child {
    margin-right: 0;
    padding-right: 0;
    border-right: none;
}

.dropdown-menu {
    border-radius: 0;
}

.columns-2 {
    columns: 2;
    column-gap: 1.5rem;
}
@media (max-width: 576px) {
    .columns-2 { columns: 1; }
}

/* Trusted companies cards (scoped to avoid interfering with Bootstrap) */
.trusted-section {
    padding: min(8vh,4rem) 0;
    color: #111;
}
.trusted-section h2 {
    font-family: 'Lato', Arial, sans-serif;
    font-weight: 700;
    letter-spacing: 0.02em;
    font-size: clamp(1.6rem, 1.5rem + 1vw, 2.2rem);
    margin-bottom: 1.25rem;
}
.trusted-container {
    margin-top: 1.5rem;
}
.trusted-card {
    display: flex;
    flex-direction: column;
    background: transparent;
}

/* Thin, modern borderline for trusted cards — subtle by default and more visible on hover/focus.
   Uses a light neutral hairline so it reads as refined rather than heavy. Hover/focus adds a
   soft brand-colored glow and small lift to give the UI a more advanced, tactile feel. */
.trusted-card {
    border: 1px solid rgba(15,23,43,0.06); /* subtle hairline */
    border-radius: 1rem; /* matches inner radii for balanced look */
    transition: transform 0.32s cubic-bezier(.2,.9,.2,1),
                box-shadow 0.32s cubic-bezier(.2,.9,.2,1),
                border-color 0.22s ease;
    will-change: transform, box-shadow;
    background-clip: padding-box; /* prevent background bleed when using rounded borders */
}

/* Hover and keyboard focus state — keep it tasteful and accessible */
.trusted-card:hover,
.trusted-card:focus-within {
    transform: translateY(-6px);
    box-shadow: 0 12px 30px rgba(6,187,204,0.06), 0 2px 8px rgba(6,6,6,0.04);
    border-color: rgba(6,187,204,0.12);
}

/* Slightly stronger outline for keyboard users */
.trusted-card:focus-within {
    outline: none;
    box-shadow: 0 12px 30px rgba(6,187,204,0.09), 0 0 0 3px rgba(6,187,204,0.06);
}

/* On very small screens keep subtlety (no large lifts) */
@media (max-width: 480px) {
    .trusted-card:hover,
    .trusted-card:focus-within {
        transform: translateY(-2px);
        box-shadow: 0 6px 18px rgba(6,187,204,0.05);
    }
}
.tc-card-inner {
    position: relative;
    width: 100%;
    /* Prefer modern aspect-ratio when available for smoother scaling; keep height
       fallback for older browsers. Aspect ratio chosen to keep image area visually
       prominent and consistent across cards. */
    aspect-ratio: 4 / 3;
    height: 18.75rem; /* fallback for older browsers */
    background: var(--clr, #fff);
    border-radius: 1.25rem;
    border-bottom-right-radius: 0;
    overflow: hidden;
}
.tc-box {
    width: 100%;
    height: 100%;
    background: #fff;
    border-radius: 1.25rem;
    overflow: hidden;
    position: relative;
}
.tc-imgBox {
    position: absolute;
    inset: 0;
}
.tc-imgBox img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.tc-icon {
    position: absolute;
    bottom: -6px;
    right: -6px;
    width: 6rem;
    height: 6rem;
    background: var(--clr, #fff);
    border-top-left-radius: 50%;
    display: block;
}
.tc-icon::before,
.tc-icon::after {
    content: "";
    position: absolute;
    width: 1.25rem;
    height: 1.25rem;
    background: transparent;
}
.tc-icon::before {
    bottom: .375rem;
    left: -1.25rem;
    border-bottom-right-radius: 1.25rem;
    box-shadow: 0.313rem 0.313rem 0 0.313rem #fff;
}
.tc-icon::after {
    top: -1.25rem;
    right: .375rem;
    border-bottom-right-radius: 1.25rem;
    box-shadow: 0.313rem 0.313rem 0 0.313rem var(--clr, #fff);
}
.tc-iconBox {
    position: absolute;
    inset: 0.625rem;
    background: #282828;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.3s ease;
}
.tc-iconBox span {
    color: #fff;
    font-size: 1.25rem;
}
.tc-iconBox:hover { transform: scale(1.08); }

.tc-iconBox:focus-visible {
    outline: 3px solid rgba(6,187,204,0.25);
    outline-offset: 3px;
    transform: scale(1.05);
}

.tc-iconBox:focus { /* ensure keyboard users see a hint even if :focus-visible not supported */
    box-shadow: 0 0 0 3px rgba(6,187,204,0.12);
}

.tc-content {
    padding: 0.938rem 0.625rem;
}
.tc-content h3 {
    text-transform: capitalize;
    font-size: clamp(1.1rem, 1rem + .6vw, 1.35rem);
    margin: 0 0 .4rem 0;
}
.tc-content p {
    margin: 0.625rem 0 1rem;
    color: #565656;
    font-size: .95rem;
}
.trusted-card ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.625rem;
}
.trusted-card ul li {
    text-transform: uppercase;
    background: var(--clr-tag, #e6e6e6);
    color: #282828;
    font-weight: 700;
    font-size: 0.8rem;
    padding: 0.375rem 0.625rem;
    border-radius: 0.188rem;
}
.trusted-section .branding { color: #7f6a5c; }
.trusted-section .packaging { color: #436b6a; }
.trusted-section .marketing { color: #7d3961; }

.trusted-container > .col-lg-4:nth-of-type(1) .tc-iconBox { background: #d3b19a; }
.trusted-container > .col-lg-4:nth-of-type(2) .tc-iconBox { background: #70b3b1; }
.trusted-container > .col-lg-4:nth-of-type(3) .tc-iconBox { background: #d05fa2; }

@media (max-width: 576px) {
    .tc-card-inner { height: 220px; }
}

/* Thin, modern borderline for trusted cards — subtle by default and more visible on hover/focus.
   Uses a light neutral hairline so it reads as refined rather than heavy. Hover/focus adds a
   soft brand-colored glow and small lift to give the UI a more advanced, tactile feel. */
.trusted-card {
    border: 1px solid rgba(15,23,43,0.06); /* subtle hairline */
    border-radius: 0 !important; /* matches inner radii for balanced look */
    transition: transform 0.32s cubic-bezier(.2,.9,.2,1),
                box-shadow 0.32s cubic-bezier(.2,.9,.2,1),
                border-color 0.22s ease;
    will-change: transform, box-shadow;
    background-clip: padding-box; /* prevent background bleed when using rounded borders */
}

/* Hover and keyboard focus state — keep it tasteful and accessible */
.trusted-card:hover,
.trusted-card:focus-within {
    transform: translateY(-6px);
    box-shadow: 0 12px 30px rgba(6,187,204,0.06), 0 2px 8px rgba(6,6,6,0.04);
    border-color: rgba(6,187,204,0.12);
}

/* Slightly stronger outline for keyboard users */
.trusted-card:focus-within {
    outline: none;
    box-shadow: 0 12px 30px rgba(6,187,204,0.09), 0 0 0 3px rgba(6,187,204,0.06);
}

/* On very small screens keep subtlety (no large lifts) */
@media (max-width: 480px) {
    .trusted-card:hover,
    .trusted-card:focus-within {
        transform: translateY(-2px);
        box-shadow: 0 6px 18px rgba(6,187,204,0.05);
    }
}
.tc-card-inner {
    position: relative;
    width: 100%;
    /* Prefer modern aspect-ratio when available for smoother scaling; keep height
       fallback for older browsers. Aspect ratio chosen to keep image area visually
       prominent and consistent across cards. */
    aspect-ratio: 4 / 3;
    height: 18.75rem; /* fallback for older browsers */
    background: var(--clr, #fff);
    border-radius: 1.25rem;
    border-bottom-right-radius: 0;
    overflow: hidden;
}
.tc-box {
    width: 100%;
    height: 100%;
    background: #fff;
    border-radius: 1.25rem;
    overflow: hidden;
    position: relative;
}
.tc-imgBox {
    position: absolute;
    inset: 0;
}
.tc-imgBox img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.tc-icon {
    position: absolute;
    bottom: -6px;
    right: -6px;
    width: 6rem;
    height: 6rem;
    background: var(--clr, #fff);
    border-top-left-radius: 50%;
    display: block;
}
.tc-icon::before,
.tc-icon::after {
    content: "";
    position: absolute;
    width: 1.25rem;
    height: 1.25rem;
    background: transparent;
}
.tc-icon::before {
    bottom: .375rem;
    left: -1.25rem;
    border-bottom-right-radius: 1.25rem;
    box-shadow: 0.313rem 0.313rem 0 0.313rem #fff;
}
.tc-icon::after {
    top: -1.25rem;
    right: .375rem;
    border-bottom-right-radius: 1.25rem;
    box-shadow: 0.313rem 0.313rem 0 0.313rem var(--clr, #fff);
}
.tc-iconBox {
    position: absolute;
    inset: 0.625rem;
    background: #282828;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.3s ease;
}
.tc-iconBox span {
    color: #fff;
    font-size: 1.25rem;
}
.tc-iconBox:hover { transform: scale(1.08); }

.tc-iconBox:focus-visible {
    outline: 3px solid rgba(6,187,204,0.25);
    outline-offset: 3px;
    transform: scale(1.05);
}

.tc-iconBox:focus { /* ensure keyboard users see a hint even if :focus-visible not supported */
    box-shadow: 0 0 0 3px rgba(6,187,204,0.12);
}

.tc-content {
    padding: 0.938rem 0.625rem;
}
.tc-content h3 {
    text-transform: capitalize;
    font-size: clamp(1.1rem, 1rem + .6vw, 1.35rem);
    margin: 0 0 .4rem 0;
}
.tc-content p {
    margin: 0.625rem 0 1rem;
    color: #565656;
    font-size: .95rem;
}
.trusted-card ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.625rem;
}
.trusted-card ul li {
    text-transform: uppercase;
    background: var(--clr-tag, #e6e6e6);
    color: #282828;
    font-weight: 700;
    font-size: 0.8rem;
    padding: 0.375rem 0.625rem;
    border-radius: 0.188rem;
}
.trusted-section .branding { color: #7f6a5c; }
.trusted-section .packaging { color: #436b6a; }
.trusted-section .marketing { color: #7d3961; }

.trusted-container > .col-lg-4:nth-of-type(1) .tc-iconBox { background: #d3b19a; }
.trusted-container > .col-lg-4:nth-of-type(2) .tc-iconBox { background: #70b3b1; }
.trusted-container > .col-lg-4:nth-of-type(3) .tc-iconBox { background: #d05fa2; }

@media (max-width: 576px) {
    .tc-card-inner { height: 220px; }
}

/* Additional mobile-first tweaks for very small screens to ensure the cards
   remain compact and accessible. These reduce the inner image block height,
   scale the icon, and reduce content padding so the cards fit nicely on phones. */
@media (max-width: 480px) {
    .tc-card-inner {
        height: 180px; /* compress image block on very small devices */
        border-radius: 1rem;
    }

    .tc-icon {
        width: 4.25rem;
        height: 4.25rem;
        bottom: -4px;
        right: -4px;
    }

    .tc-iconBox {
        inset: 0.45rem;
    }

    .tc-iconBox span { font-size: 1rem; }

    .tc-content {
        padding: 0.6rem 0.5rem;
    }

    .tc-content h3 { font-size: 1.05rem; }

    .trusted-card ul li {
        font-size: 0.72rem;
        padding: 0.25rem 0.5rem;
    }
}

/* Medium devices: slightly smaller images so text area remains visible without
   pushing the page too far on mobile. Maintain aspect ratio and ensure images
   cover the box area. */
@media (min-width: 481px) and (max-width: 767px) {
    .tc-card-inner { height: 220px; }
    .tc-icon { width: 5rem; height: 5rem; }
    .tc-iconBox span { font-size: 1.1rem; }
}

/* Improve image rendering and performance across viewports */
.tc-imgBox img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
}

/* Ensure tag chips wrap nicely on narrow screens */
.trusted-card ul {
    gap: .45rem;
}

/* Product cards (new) */
.product-cards {
    padding: min(6vh,3.5rem) 0;
}
.product-card {
    border: 1px solid rgba(15,23,43,0.06);
    border-radius: 0 !important;
    overflow: hidden;
    background: #ffffff;
    transition: transform 0.28s ease, box-shadow 0.28s ease;
    display: flex;
    flex-direction: column;
}
.product-card:hover,
.product-card:focus-within {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(6,187,204,0.06);
}
.pc-image {
    aspect-ratio: 4 / 3;
    height: auto;
    overflow: hidden;
    position: relative;
}
.pc-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.pc-badge {
    position: absolute;
    right: 0.8rem;
    bottom: 0.8rem;
    background: linear-gradient(90deg, #00c08a, #06bbcc);
    color: #fff;
    padding: 6px 10px;
    font-size: 0.82rem;
    border-radius: 6px;
    box-shadow: 0 6px 18px rgba(6,187,204,0.12);
}
.pc-body { display: flex; flex-direction: column; }
.pc-title {
    font-size: 1.125rem;
    margin: 0 0 .35rem 0;
    font-weight: 700;
}
.pc-meta {
    font-size: 0.9rem;
    color: #6b7280;
}
.pc-desc {
    color: #555555;
    line-height: 1.5;
    margin-bottom: 1rem;
}
.pc-divider {
    height: 1px;
    background: linear-gradient(90deg, rgba(0,0,0,0.04), rgba(6,187,204,0.12), rgba(0,0,0,0.04));
    margin: 0.5rem 0 0.8rem;
    border-radius: 1px;
}
.pc-readmore {
    color: var(--primary);
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}
.pc-readmore:hover {
    text-decoration: underline;
}

@media (max-width: 576px) {
    .pc-title { font-size: 1.03rem; }
    .pc-desc { font-size: .95rem; }
    .pc-badge { padding: 5px 8px; font-size: 0.75rem; }
}


/* Service details layout (scoped) */
.service-layout .service-sidebar .list-group-item {
    cursor: pointer;
    transition: background-color 0.18s ease, transform 0.18s ease;
}
.service-layout .service-sidebar .list-group-item:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(6,187,204,0.12);
}
.service-layout .service-sidebar .list-group-item.active {
    background: linear-gradient(90deg, rgba(6,187,204,0.06), rgba(6,187,204,0.02));
    border-left: 3px solid var(--primary);
}
.service-layout .service-detail img.object-fit-cover {
    object-fit: cover;
}
.clickable-card { cursor: pointer; }
.clickable-card:focus, .clickable-card:hover { transform: translateY(-6px); box-shadow: 0 8px 30px rgba(6,11,20,0.06); transition: transform 0.18s ease, box-shadow 0.18s ease; }

@media (max-width: 991.98px) {
    .service-layout .service-sidebar { margin-bottom: 1rem; }
    .service-layout .service-detail .card-body { padding: 1rem; }
}

/* Detail content typography and blockquote */
.detail-content p { margin-bottom: 0.85rem; color: #333; line-height: 1.6; }
.detail-content h6 { margin-top: 0.8rem; font-size: 0.98rem; }
.detail-content blockquote.blockquote { margin: .75rem 0; padding-left: .75rem; border-left: 4px solid rgba(6,187,204,0.18); background: rgba(6,187,204,0.02); }
.detail-content .blockquote p { margin: 0; font-style: italic; color: #114; }

.service-detail .card-body { padding: 1.25rem; }
.service-detail img { border-radius: .25rem 0 0 .25rem; height: 100%; object-fit: cover; }

.service-layout #detail-categories .badge { background: transparent; border: 1px solid rgba(0,0,0,0.06); color: #333; }

/* Slight shadow for the right panel on large screens */
.service-detail { box-shadow: 0 6px 24px rgba(6,11,20,0.04); }


/* Product carousel (index) */
.product-carousel .product-slide { padding: 12px; outline: none; }
.product-carousel .product-slide .card { border-radius: 12px; overflow: hidden; transition: transform 0.25s ease, box-shadow 0.25s ease; }
/* Product slider styles with fade effect */
.product-carousel .product-slide .card-img-top { 
    height: 200px; 
    object-fit: cover; 
    display: block; 
    transition: all 0.5s ease;
}

.product-carousel .product-slide .card-body { 
    padding: 14px; 
    transition: all 0.5s ease;
}

/* Active slide styling - now handled by .center class */

/* Side slides styling with smooth transitions */
/* Farthest slides (more faded) */
.product-carousel .owl-item:not(.center):not(.center ~ .center) .product-slide .card,
.product-carousel .owl-item:not(.center):not(.center ~ .center ~ .center) .product-slide .card {
    opacity: 0.65;
    filter: blur(1.2px);
    transform: scale(0.9);
    transition: all 0.4s ease;
}

/* Slides adjacent to center (less faded) */
.product-carousel .owl-item.center + .owl-item:not(.center) .product-slide .card,
.product-carousel .owl-item.center ~ .center + .owl-item:not(.center) .product-slide .card,
.product-carousel .owl-item:not(.center) + .center .product-slide .card,
.product-carousel .center ~ .center + .owl-item:not(.center) .product-slide .card {
    opacity: 0.82;
    filter: blur(0.5px);
    transform: scale(0.95);
    transition: all 0.4s ease;
}

/* Hover effect on side slides */
.product-carousel .owl-item:not(.center) .product-slide .card:hover {
    opacity: 0.9 !important;
    filter: blur(0.3px) !important;
    transform: scale(0.97) !important;
}

/* Active/center slide */
.product-carousel .owl-item.center .product-slide .card {
    opacity: 1 !important;
    filter: none !important;
    transform: translateY(-10px) scale(1.02) !important;
    box-shadow: 0 14px 36px rgba(6,187,204,0.18) !important;
    z-index: 2;
    transition: all 0.4s ease;
}

/* Navigation buttons */
.product-carousel .owl-nav button { 
    position: absolute; 
    top: 50%; 
    transform: translateY(-50%); 
    background: rgba(255,255,255,0.9) !important; 
    border: none !important; 
    width: 44px; 
    height: 44px; 
    border-radius: 50%; 
    box-shadow: 0 6px 20px rgba(6,11,20,0.12);
    transition: all 0.3s ease;
    z-index: 5;
}

.product-carousel .owl-nav button:hover {
    background: var(--primary) !important;
    color: white !important;
}

.product-carousel .owl-nav .owl-prev { left: -22px; }
.product-carousel .owl-nav .owl-next { right: -22px; }
.product-carousel .owl-dots { margin-top: 1.5rem; }

@media (max-width: 767.98px) {
    .product-carousel .product-slide .card-img-top { height: 160px; }
}

/* Radial tunnel gradient background */
.product-slider-section {
    position: relative;
    background: radial-gradient(
        circle at center,
        #0b5e8b 0%,
        #0c496d 20%,
        #09324d 40%,
        #0b3958 60%,
        #051b31 80%,
        #020a13 100%
    );
    color: #ffffff;
    overflow: hidden;
}

.product-slider-section::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 150%;
    height: 200%;
    background: radial-gradient(
        ellipse at center,
        rgba(6, 187, 204, 0.15) 0%,
        rgba(6, 187, 204, 0.1) 30%,
        rgba(6, 187, 204, 0.05) 60%,
        transparent 100%
    );
    transform: translate(-50%, -50%);
    pointer-events: none;
    animation: pulse 12s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.8;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.05);
        opacity: 1;
    }
}
.product-slider-section .section-title { color: rgba(255,255,255,0.92); }
.product-slider-section h1 { color: #fff; font-weight: 700; }
.product-slider-section .product-carousel { padding-top: 6px; padding-bottom: 6px; }

/* reduce section height and tighten spacing for a compact look */
.product-slider-section .container-xxl { padding-top: 1.5rem; padding-bottom: 1.75rem; }
.product-slider-section .product-slide .card-img-top { height: 150px; }

/* Make cards pop on the dark background */
.product-slider-section .product-slide .card { background: #ffffff; border-radius: 10px; }
.product-slider-section .product-slide .card-body { background: #ffffff; }

/* hide arrow nav for this section and use dots instead */
.product-slider-section .product-carousel .owl-nav { display: none; }

/* place dots vertically centered on the right side */
.product-slider-section .product-carousel .owl-dots {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 25;
}
.product-slider-section .product-carousel .owl-dots .owl-dot { width: 14px; height: 14px; }
.product-slider-section .product-carousel .owl-dots .owl-dot span {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255,255,255,0.28);
    border: 1px solid rgba(255,255,255,0.18);
}
.product-slider-section .product-carousel .owl-dots .owl-dot.active span,
.product-slider-section .product-carousel .owl-dots .owl-dot:hover span {
    background: #fff;
    box-shadow: 0 6px 18px rgba(6,11,20,0.18);
}

@media (max-width: 991.98px) {
    .product-slider-section .product-carousel .owl-dots { right: 8px; }
}

@media (max-width: 767.98px) {
    .product-slider-section { padding-top: 1rem; padding-bottom: 1rem; }
    .product-slider-section .product-slide .card-img-top { height: 120px; }
    /* move dots to bottom center on small screens for better reachability */
    .product-slider-section .product-carousel .owl-dots { position: static; transform: none; flex-direction: row; justify-content: center; margin-top: .75rem; }
}

/* Why Choose Us Section (scoped) */
.why-choose-section {
    background: linear-gradient(180deg, rgba(6,187,204,0.04) 0%, rgba(13,43,68,0.01) 100%);
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
}
.why-choose-section .section-title { color: var(--primary); }
.why-choose-section h1 { font-weight: 700; color: var(--dark); }
.why-choose-section p { color: #5e6b75; }
.why-choose-section .why-stat { font-family: 'Nunito', sans-serif; }

.why-card {
    background: linear-gradient(180deg, #ffffff, #fbfdff);
    border-radius: 0 !important; /* square edges per request */
    border: 1px solid rgba(6,11,20,0.04);
    transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.2s ease;
}
.why-card:hover,
.why-card:focus-within {
    transform: translateY(-8px);
    box-shadow: 0 18px 40px rgba(6,11,20,0.08);
    border-color: rgba(6,187,204,0.12);
}
.why-icon { font-size: 20px; }
.why-card h5 { margin-bottom: 0.25rem; font-size: 1.05rem; }
.why-card p { margin-bottom: 0; color: #6b7280; }

/* Small touch: align stats nicely */
.why-choose-section .why-stat { line-height: 1; }

@media (max-width: 991.98px) {
    .why-choose-section { padding-top: 2.25rem; padding-bottom: 2.25rem; }
}

@media (max-width: 576px) {
    .why-choose-section .why-stat { font-size: 1.25rem; }
    .why-card { padding: 14px !important; }
}

/* Left card styling (Why Choose) */
.why-left-card {
    background: linear-gradient(180deg, #ffffff, #fbfdff);
    border-radius: 0 !important; /* square edges */
    padding: 0;
    /* subtle outer hairline and modern soft elevated shadow */
    border: 1px solid rgba(6,187,204,0.04);
    box-shadow: 0 20px 40px rgba(2,6,23,0.06), 0 6px 18px rgba(6,187,204,0.03) inset;
    position: relative;
    overflow: visible;
    transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.2s ease;
}
.why-left-card::before {
    /* thin accent stripe on the left for a modern editorial feel */
    content: '';
    position: absolute;
    left: -6px;
    top: 18px;
    bottom: 18px;
    width: 6px;
    border-radius: 0 !important; /* square accent to match card edges */
    background: linear-gradient(180deg, rgba(6,187,204,1), rgba(13,43,68,0.9));
    box-shadow: 0 6px 18px rgba(6,187,204,0.06);
}
.why-left-card .card-body { position: relative; z-index: 2; }

/* inner thin vertical hairline to separate content from the accent */
.why-left-card .card-body::before {
    content: "";
    position: absolute;
    left: 72px; /* aligns just inside the content area */
    top: 20px;
    bottom: 20px;
    width: 1px;
    background: rgba(6,187,204,0.06);
    opacity: 0.95;
    border-radius: 0 !important;
}

/* hover/focus: add a teal-tinted glow and slightly lift the card */
.why-left-card:hover,
.why-left-card:focus-within {
    transform: translateY(-6px);
    box-shadow: 0 30px 60px rgba(6,187,204,0.10), 0 8px 30px rgba(2,6,23,0.06);
    border-color: rgba(6,187,204,0.12);
}

.stat-box .stat-number {
    font-size: 1.5rem;
    line-height: 1;
    min-width: 56px;
    text-align: left;
    font-family: 'Nunito', sans-serif;
}
.stat-box h6 { font-size: 0.95rem; margin-bottom: 0.15rem; }
.stat-box small { color: #7b8790; }

/* Enhance feature cards further: gradient icon, subtle border and hover lift */
.why-card {
    background: linear-gradient(180deg, #ffffff, #fbfdff);
    border-radius: 12px;
    border: 1px solid rgba(6,11,20,0.04);
    transition: transform 0.28s cubic-bezier(.2,.9,.2,1), box-shadow 0.28s cubic-bezier(.2,.9,.2,1), border-color 0.18s ease;
}
.why-card .why-icon {
    width: 56px;
    height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    box-shadow: 0 8px 20px rgba(6,11,20,0.06);
    transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.why-card .why-icon {
    border-radius: 8px; /* rounded-square */
}
.why-card .why-icon.bg-primary { background: linear-gradient(135deg, #06bbcc, #00c08a) !important; }
.why-card .why-icon.bg-success { background: linear-gradient(135deg, #28c76f, #1fb67a) !important; }
.why-card .why-icon.bg-warning { background: linear-gradient(135deg, #ffb020, #ff7a18) !important; }

/* About section custom styles (scoped) */
.about-section {
    padding-top: 3.25rem;
    padding-bottom: 3.25rem;
}
.about-image-wrapper {
    width: 100%;
    position: relative;
    overflow: visible;
}
.about-main-img {
    width: 100%;
    height: 520px;
    object-fit: cover;
    /* square corners per request */
    border-radius: 0;
    /* stronger elevation shadow to lift the image visually */
    box-shadow: 0 40px 90px rgba(2, 6, 23, 0.564), 0 10px 30px rgba(2,6,23,0.12) inset;
    /* thin decorative border to make the image feel like a card */
    border: 2px solid rgba(6, 187, 204, 0.753);
}
.about-small-img {
    position: absolute;
    top: 18px;
    right: -36px;
    width: 140px;
    height: 140px;
    object-fit: cover;
    /* light, modern 3px primary-colored border for emphasis without heaviness */
    border: 2px solid var(--primary);
    /* no rounding per design: keep square corners */
    border-radius: 0;
    /* white background helps the border read clearly on busy images */
    background: #ffffff;
    /* soft, low-cost shadow using brand tint for a pleasant lift */
    box-shadow: 0 10px 24px rgba(6,187,204,0.10);
    transition: box-shadow 180ms ease, transform 180ms ease;
}
.about-right .about-pill {
    display: inline-block;
    background: rgba(6,187,204,0.08);
    color: var(--primary);
    padding: 6px 12px;
    border-radius: 20px;
    font-weight: 600;
    margin-bottom: 12px;
}
.about-right .about-title {
    font-size: 2.25rem;
    margin-top: 6px;
    margin-bottom: 18px;
    color: #072022;
    line-height: 1.05;
    font-weight: 800;
}
.about-right .about-title::after {
    content: "";
    display: block;
    width: 84px;
    height: 6px;
    margin-top: 10px;
    background: var(--primary);
    border-radius: 6px;
    box-shadow: 0 6px 18px rgba(6,187,204,0.12);
}
.about-card {
    background: #ffffff;
    padding: 20px 22px;
    border-radius: 8px;
    /* remove borders and lines as requested: keep card flat */
    border: none;
    box-shadow: none;
}
.about-card p { color: #2e3a36; margin-bottom: 12px; text-align: justify; line-height: 1.7; }
.about-card .about-link {
    display: inline-block;
    color: var(--primary);
    font-weight: 700;
    text-decoration: none;
}
.about-tagline {
    color: #7a8682;
    margin-top: 14px;
    margin-bottom: 8px;
}
.about-cta { border-radius: 8px; }

/* primary themed CTAs and outline variants scoped to the about area */
.about-right .btn.btn-primary.about-cta {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    color: #fff !important;
}
.about-right .btn.btn-outline-primary.about-cta {
    color: var(--primary) !important;
    border-color: var(--primary) !important;
}
.about-right .btn.btn-outline-primary.about-cta:hover {
    background: rgba(6,187,204,0.06);
}

/* CTA hover interactions for the About section (performant, subtle) */
.about-right .btn.about-cta {
    transition: transform 220ms cubic-bezier(.2,.9,.2,1), box-shadow 220ms ease, background 220ms ease, color 220ms ease;
    will-change: transform, box-shadow;
}

.about-right .btn.btn-primary.about-cta:hover,
.about-right .btn.btn-primary.about-cta:focus {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(6,187,204,0.20);
    background: linear-gradient(90deg, var(--primary), #00c08a) !important;
    border-color: transparent !important;
}

.about-right .btn.btn-outline-primary.about-cta:hover,
.about-right .btn.btn-outline-primary.about-cta:focus {
    transform: translateY(-3px);
    box-shadow: 0 14px 36px rgba(6,187,204,0.12);
    background: var(--primary);
    color: #ffffff !important;
    border-color: var(--primary) !important;
}

.about-right .about-cta i {
    transition: transform 220ms cubic-bezier(.2,.9,.2,1);
    display: inline-block;
}
.about-right .btn.about-cta:hover i {
    transform: translateX(6px);
}

/* Focus-visible accessibility hint */
.about-right .btn.about-cta:focus-visible {
    outline: 3px solid rgba(6,187,204,0.18);
    outline-offset: 3px;
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
    .about-right .btn.about-cta,
    .about-right .about-cta i {
        transition: none !important;
        transform: none !important;
    }
}

@media (max-width: 991.98px) {
    .about-main-img { height: 360px; }
    .about-small-img { display: none !important; }
    .about-right .about-title { font-size: 1.6rem; }
}

@media (max-width: 576px) {
    .about-main-img { height: 260px; }
    .about-right { padding-top: 0.5rem; }
    .about-right .about-title { font-size: 1.35rem; }
}
/* Hover scaling + smooth shadow transitions for about images */
/* Hover scaling + smooth shadow transitions for about images - optimized for performance */
.about-image-wrapper .about-main-img,
.about-image-wrapper .about-small-img {
    transition: transform 220ms cubic-bezier(.2,.9,.2,1), box-shadow 220ms ease;
    will-change: transform;
    backface-visibility: hidden;
    transform: translateZ(0);
}
.about-image-wrapper:hover .about-main-img {
    transform: translateY(-6px) scale(1.02);
    box-shadow: 0 34px 72px rgba(2,6,23,0.28), 0 8px 22px rgba(2,6,23,0.08) inset;
}
.about-image-wrapper:hover .about-small-img {
    transform: translateY(-6px) scale(1.03);
    box-shadow: 0 28px 56px rgba(2, 6, 23, 0.368);
}

/* Disable the hover effect on touch devices to avoid accidental scaling */
@media (hover: none) {
    .about-image-wrapper .about-main-img,
    .about-image-wrapper .about-small-img {
        transition: none;
        transform: none;
        box-shadow: none;
    }
}

/* Entrance animation tweak: make initial state slightly translated left for smoother slide-in
   we let wow.js / animate.css toggle classes; this ensures a soft and GPU-accelerated transform */
.about-left .about-image-wrapper {
    transform: translateX(-22px);
    opacity: 0;
    transition: transform 700ms cubic-bezier(.2,.9,.2,1), opacity 600ms ease;
}
.about-left.wow.fadeInLeft .about-image-wrapper {
    transform: translateX(0);
    opacity: 1;
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .about-image-wrapper .about-main-img,
    .about-image-wrapper .about-small-img,
    .about-left .about-image-wrapper {
        transition: none !important;
        transform: none !important;
        opacity: 1 !important;
    }
}
.why-card .why-icon.bg-info { background: linear-gradient(135deg, #3ab0ff, #0096ff) !important; }
.why-card:hover .why-icon,
.why-card:focus-within .why-icon { transform: translateY(-6px) scale(1.03); box-shadow: 0 22px 40px rgba(6,11,20,0.08); }

/* small spacing tweak for the right column cards */
.why-card .d-flex { align-items: flex-start; }

@media (max-width: 767.98px) {
    .why-left-card::before { top: 12px; bottom: 12px; }
    .why-left-card { box-shadow: 0 10px 30px rgba(10,22,40,0.05); }
}

/* Blog Section Styles */
.blog-item {
    position: relative;
    height: 100%;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.05);
    overflow: hidden;
    background: #ffffff;
    border-radius: 8px !important;
}

.blog-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(6, 187, 204, 0.15);
    border-color: rgba(6, 187, 204, 0.2);
}

.blog-img {
    position: relative;
    overflow: hidden;
    height: 220px;
}

.blog-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.5s ease;
}

.blog-item:hover .blog-img img {
    transform: scale(1.05);
}

.blog-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(6, 187, 204, 0.7);
    opacity: 0;
    transition: all 0.3s ease;
}

.blog-item:hover .blog-overlay {
    opacity: 1;
}

.blog-overlay a {
    display: inline-flex;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    color: var(--primary);
    border-radius: 50%;
    transition: all 0.3s ease;
    opacity: 0;
    transform: translateY(20px);
}

.blog-overlay a:hover {
    background: var(--dark);
    color: #ffffff;
}

.blog-item:hover .blog-overlay a {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.2s;
}

.blog-tag {
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 1;
}

.blog-tag .badge {
    font-weight: 500;
    padding: 5px 12px;
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 0.5px;
    border-radius: 30px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.blog-item h4 {
    font-size: 1.25rem;
    margin-bottom: 10px;
    transition: all 0.3s ease;
    line-height: 1.4;
}

.blog-item:hover h4 {
    color: var(--primary);
}

.blog-item p {
    color: #666;
    margin-bottom: 15px;
    font-size: 0.95rem;
    line-height: 1.6;
}

.blog-item a.text-uppercase {
    color: var(--dark);
    font-weight: 600;
    font-size: 0.85rem;
    letter-spacing: 0.5px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    transition: all 0.3s ease;
}

.blog-item a.text-uppercase i {
    margin-left: 5px;
    transition: all 0.3s ease;
}

.blog-item:hover a.text-uppercase {
    color: var(--primary);
}

.blog-item:hover a.text-uppercase i {
    transform: translateX(5px);
}

/* Responsive adjustments */
@media (max-width: 991.98px) {
    .blog-img {
        height: 180px;
    }
    
    .blog-item h4 {
        font-size: 1.1rem;
    }
}

@media (max-width: 767.98px) {
    .blog-item {
        margin-bottom: 30px;
    }
    
    .blog-img {
        height: 200px;
    }
}

@media (max-width: 575.98px) {
    .blog-img {
        height: 180px;
    }
    
    .blog-item {
        max-width: 400px;
        margin-left: auto;
        margin-right: auto;
    }
}


/* Gallery Overlay Styles */
.gallery-item {
    position: relative;
    transition: transform 0.3s ease;
}

.gallery-item:hover {
    transform: translateY(-5px);
}

.gallery-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(6, 187, 204, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.gallery-item:hover .gallery-overlay {
    opacity: 1;
}

.gallery-overlay i {
    color: #fff;
    font-size: 3rem;
}

/* Lightbox Video Support */
.lb-data .lb-close {
    z-index: 9999;
}

@media (max-width: 768px) {
    .gallery-overlay i {
        font-size: 2rem;
    }
}

/* Lightbox Video Container */
.lightbox-video-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
    height: 0;
    overflow: hidden;
    max-width: 100%;
}

.lightbox-video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Lightbox Styles */
.lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.lightbox.show {
    opacity: 1;
}

.lightbox-content {
    position: relative;
    max-width: 90%;
    max-height: 90%;
}

.lightbox-content img {
    max-width: 100%;
    max-height: 80vh;
    display: block;
}

.lightbox .close {
    position: absolute;
    top: 20px;
    right: 30px;
    font-size: 2rem;
    color: #fff;
    cursor: pointer;
    z-index: 10000;
}

.lightbox-caption {
    color: #fff;
    text-align: center;
    padding: 10px;
    font-size: 1.1rem;
}

.lightbox .prev, .lightbox .next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 2rem;
    color: #fff;
    cursor: pointer;
    padding: 10px;
}

.lightbox .prev {
    left: 20px;
}

.lightbox .next {
    right: 20px;
}

@media (max-width: 768px) {
    .lightbox-content {
        max-width: 95%;
        max-height: 95%;
    }
    
    .lightbox-content img {
        max-height: 70vh;
    }
    
    .lightbox .prev, .lightbox .next {
        font-size: 1.5rem;
    }
    
    .lightbox .prev {
        left: 10px;
    }
    
    .lightbox .next {
        right: 10px;
    }
}

/* Ensure lightbox is properly positioned */
.lightbox {
    transform: translateZ(0);
    will-change: opacity;
}

/* Fix for video iframes in lightbox */
.lightbox-video-container iframe {
    background: #000;
}