/********** Template CSS **********/

/* Color variables used by copied sections (contact form, call-to-action) */
:root {
    --accent-color: #0D6B68;
    /* site primary — icons, focus, button */
    --surface-color: #ffffff;
    /* card / input backgrounds */
    --default-color: #444444;
    /* body / input text */
    --contrast-color: #ffffff;
    /* text on top of the accent color */
    --background-color: #ffffff;
    /* section / overlay background */
    --heading-color: #282828;
    /* headings */
    --heading-font: "Space Grotesk", sans-serif;
    /* heading / cta-btn font */
    --primary: #0D6B68;
    /* alias used by startup2 sections (e.g. testimonial dots) */
    --light: color-mix(in srgb, var(--accent-color) 6%, #ffffff);
    /* soft brand tint */
    --lime: #BCD530;
    /* Kenpelo lime-green accent (from the logo) */
    --lime-dark: #A6BC22;
    /* darker lime for hover states */
}

/* Lime accent utilities (Kenpelo brand secondary) */
.text-lime {
    color: var(--lime) !important;
}

.bg-lime {
    background-color: var(--lime) !important;
}

.border-lime {
    border-color: var(--lime) !important;
}

.btn-lime {
    background: var(--lime);
    color: #0b2b28;
}

.btn-lime:hover,
.btn-lime:focus {
    background: var(--lime-dark);
    color: #0b2b28;
}

/* Dark section theme — locally flips the color variables so text is readable
   over a dark background/image (used by the call-to-action section). */
.dark-background {
    --background-color: #060606;
    --default-color: #ffffff;
    --heading-color: #ffffff;
    --surface-color: #252525;
    --contrast-color: #ffffff;
}

/* Prevent any transient horizontal overflow (e.g. an image before it's been
   constrained by img-fluid) from forcing mobile browsers into a zoomed-out
   initial layout — that's what makes fixed, centered elements like the
   preloader appear briefly offset before snapping into place. */
html,
body {
    overflow-x: hidden;
}

/* Features section: soft brand-tinted background, only as wide as the content */
.features-bg-section>.container {
    background-color: color-mix(in srgb, var(--accent-color) 6%, #ffffff);
}

/*** Services (Kenpelo two-row layout) ***/
.service-icon {
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-size: 18px;
    color: var(--accent-color);
    background: color-mix(in srgb, var(--accent-color) 12%, #ffffff);
    transition: .3s;
}

.d-flex:hover>.service-icon {
    color: #fff;
    background: var(--accent-color);
}

/* Placeholder box where the real service image will go */
.service-img-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 380px;
    color: var(--accent-color);
    background: color-mix(in srgb, var(--accent-color) 8%, #ffffff);
    border: 2px dashed color-mix(in srgb, var(--accent-color) 30%, #ffffff);
}

.service-img-placeholder i {
    font-size: 64px;
}

.service-img-placeholder span {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: .7;
}

/* Categorised service lists (check-bullet items under each subsection) */
.service-list li {
    position: relative;
    padding-left: 26px;
    margin-bottom: 8px;
    font-size: 15px;
    color: var(--default-color);
}

.service-list li::before {
    content: "\f058";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    left: 0;
    top: 2px;
    color: var(--accent-color);
}

/*** preloader ***/
/* 20. preloader */
/* line 611, ../../SAIFUL/Running_project/248. Magazine & News/assets/scss/_common.scss */
.preloader {
    background-color: #f7f7f7;
    width: 100%;
    height: 100%;
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-transition: .6s;
    -o-transition: .6s;
    transition: .6s;
}


/* line 627, ../../SAIFUL/Running_project/248. Magazine & News/assets/scss/_common.scss */
.preloader .preloader-circle {
    width: 100px;
    height: 100px;
    position: relative;
    border-style: solid;
    border-width: 3px;
    border-top-color: var(--accent-color);
    border-bottom-color: transparent;
    border-left-color: transparent;
    border-right-color: transparent;
    z-index: 10;
    border-radius: 50%;
    -webkit-box-shadow: 0 1px 5px 0 rgba(35, 181, 185, 0.15);
    box-shadow: 0 1px 5px 0 rgba(35, 181, 185, 0.15);
    background-color: #ffffff;
    -webkit-animation: zoom 2000ms infinite ease;
    animation: zoom 2000ms infinite ease;
    -webkit-transition: .6s;
    -o-transition: .6s;
    transition: .6s;
}

/* line 648, ../../SAIFUL/Running_project/248. Magazine & News/assets/scss/_common.scss */
.preloader .preloader-circle2 {
    border-top-color: var(--lime);
}

/* line 651, ../../SAIFUL/Running_project/248. Magazine & News/assets/scss/_common.scss */
.preloader .preloader-img {
    position: absolute;
    top: 50%;
    z-index: 200;
    left: 0;
    right: 0;
    margin: 0 auto;
    text-align: center;
    display: inline-block;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    padding-top: 6px;
    -webkit-transition: .6s;
    -o-transition: .6s;
    transition: .6s;
}

/* line 669, ../../SAIFUL/Running_project/248. Magazine & News/assets/scss/_common.scss */
.preloader .preloader-img img {
    max-width: 55px;
}

/* line 672, ../../SAIFUL/Running_project/248. Magazine & News/assets/scss/_common.scss */
.preloader .pere-text strong {
    font-weight: 800;
    color: var(--accent-color);
    text-transform: uppercase;
}

@-webkit-keyframes zoom {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
        -webkit-transition: .6s;
        -o-transition: .6s;
        transition: .6s;
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
        -webkit-transition: .6s;
        -o-transition: .6s;
        transition: .6s;
    }
}

@keyframes zoom {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
        -webkit-transition: .6s;
        -o-transition: .6s;
        transition: .6s;
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
        -webkit-transition: .6s;
        -o-transition: .6s;
        transition: .6s;
    }
}



/*** Button ***/
.btn {
    transition: .5s;
}

/* Floating back-to-top button (fixed to the bottom-right) */
.back-to-top {
    position: fixed;
    display: none;
    right: 45px;
    bottom: 45px;
    z-index: 99;
}

.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;
}


/*** Navbar ***/
.sticky-top {
    top: -150px;
    transition: .5s;
}

.navbar {
    padding: 15px 0;
    font-family: "Space Grotesk", sans-serif;
    font-size: 18px;
}

.navbar .navbar-nav .nav-link {
    margin-left: 30px;
    padding: 0;
    outline: none;
    color: var(--bs-dark);
    transition: color .35s ease;
}

.navbar .navbar-nav .nav-link:hover {
    color: var(--bs-primary)
}

.navbar .navbar-nav .nav-link.active {
    color: var(--lime)
}

/* Active nav link: small dot at the bottom-left, fades in smoothly */
.navbar .navbar-nav .nav-link:not(.nav-cta) {
    position: relative;
}

.navbar .navbar-nav .nav-link:not(.nav-cta)::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -7px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--lime);
    opacity: 0;
    transition: opacity .35s ease;
}

/* Mobile nav fixes - prevent dot overlap with CTA button */
@media (max-width: 991.98px) {
    .navbar-nav {
        padding-bottom: 15px;
    }

    .navbar-nav .nav-item:last-child {
        margin-bottom: 20px;
    }

    .navbar-nav .nav-link:not(.nav-cta) {
        padding: 12px 0 !important;
    }

    .navbar-nav .nav-link:not(.nav-cta)::after {
        bottom: 2px;
    }

    .navbar-nav .nav-link.nav-cta {
        margin-top: 10px;
        align-self: flex-start;
        display: inline-flex !important;
        padding: 8px 8px 8px 18px !important;
    }
}

.navbar .navbar-nav .nav-link.active:not(.nav-cta)::after {
    opacity: 1;
}

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

.navbar .dropdown-menu .dropdown-item:hover,
.navbar .dropdown-menu .dropdown-item.active {
    color: var(--bs-white);
    background: var(--bs-primary);
}

@media (max-width: 991.98px) {
    .navbar .navbar-nav .nav-link {
        margin-left: 0;
        padding: 10px 0;
    }
}

@media (min-width: 992px) {
    .navbar .nav-item .dropdown-menu {
        display: block;
        border: none;
        margin-top: 0;
        top: 150%;
        opacity: 0;
        visibility: hidden;
        transition: .5s;
    }

    .navbar .nav-item:hover .dropdown-menu {
        top: 100%;
        visibility: visible;
        transition: .5s;
        opacity: 1;
    }
}


/*** "Get In Touch" nav CTA button ***/
.navbar .navbar-nav .nav-link.nav-cta {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: var(--bs-primary);
    color: #fff !important;
    padding: 7px 7px 7px 20px;
    border-radius: 8px;
    transition: .3s;
}

.navbar .navbar-nav .nav-link.nav-cta:hover {
    background: color-mix(in srgb, var(--bs-primary) 85%, #000);
    color: #fff !important;
}

.nav-cta .nav-cta-icon {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--lime);
    color: #0b2b28;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    transition: .3s;
}

.nav-cta:hover .nav-cta-icon {
    transform: rotate(45deg);
}

/*** Logo (image logo option for navbar + footer) ***/
.navbar-brand img {
    max-height: 58px;
    width: auto;
    margin-right: 8px;
}

/* Footer logo a bit bigger */
.footer-brand img {
    max-height: 90px;
}

/* Offset anchor targets so the sticky navbar doesn't cover section headings */
#home,
#about,
#services,
#contact {
    scroll-margin-top: 90px;
}

/*** Hero Header ***/
/* Fluid heading/subtitle: one continuous clamp()-based scale from phone to
   desktop instead of jumping between fixed sizes at each breakpoint, so the
   heading shrinks smoothly and stays proportionally larger than the subtitle
   at every width. The upper bound matches Bootstrap's own display-2 / fs-5
   defaults (4.5rem / 1.25rem), so desktop is unchanged. fs-5 needs
   !important to beat Bootstrap's own !important on that utility class. */
.hero-header .display-2 {
    font-size: clamp(1.75rem, 1rem + 4vw, 4.5rem);
}

.hero-header .fs-5 {
    font-size: clamp(0.95rem, 0.85rem + 0.5vw, 1.25rem) !important;
}

/* Hero responsive fixes — buttons stay side-by-side (flex-wrap on the
   parent handles wrapping if they ever don't fit), just more compact. */
@media (max-width: 575.98px) {
    .hero-header .btn {
        padding: 10px 20px !important;
        font-size: 14px;
    }
}


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

.header-carousel {
    position: relative;
    padding: 45px 90px 45px 0;
}

.header-carousel::before {
    position: absolute;
    content: "";
    top: 0;
    right: 0;
    width: calc(50% + 45px);
    height: 100%;
    background: var(--bs-primary);
    z-index: -1;
}

.header-carousel .owl-dots {
    position: absolute;
    top: 50%;
    right: 38px;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.header-carousel .owl-dot {
    position: relative;
    display: inline-block;
    margin: 5px 0;
    width: 15px;
    height: 15px;
    border: 2px solid var(--bs-white);
    transition: .5s;
}

.header-carousel .owl-dot.active {
    height: 30px;
    background: var(--bs-white);
}


/*** Miscellaneous ***/

/*** About ***/
.about-img {
    position: relative;
    overflow: hidden;
}

.about-img::after {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: url(../img/bg-about-img.png) top left no-repeat;
    background-size: contain;
}





/*** offer Service ***/

.offer-services .single-offers {
    position: relative
}

.offer-services .single-offers .offers-caption {
    position: absolute;
    top: 50%;
    transform: translateY(-50%)
}

.offer-services .single-offers .offers-caption .cat-icon img {
    margin-bottom: 30px
}

@media (max-width: 575px) {
    .offer-services .single-offers .offers-caption .cat-icon img {
        margin-bottom: 9px
    }
}

.offer-services .single-offers .offers-caption .cat-cap {
    padding: 0 102px
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .offer-services .single-offers .offers-caption .cat-cap {
        padding: 0 10px
    }
}

@media (max-width: 575px) {
    .offer-services .single-offers .offers-caption .cat-cap {
        padding: 0 10px
    }
}

.offer-services .single-offers .offers-caption .cat-cap h5>a {
    color: #fff;
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 21px;
    display: block;
    -webkit-transition: .2s;
    -moz-transition: .2s;
    -o-transition: .2s;
    transition: .2s;
    text-transform: capitalize
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .offer-services .single-offers .offers-caption .cat-cap h5>a {
        font-size: 21px
    }
}

@media (max-width: 575px) {
    .offer-services .single-offers .offers-caption .cat-cap h5>a {
        font-size: 23px;
        margin-bottom: 10px
    }
}

.offer-services .single-offers .offers-caption .cat-cap p {
    margin-bottom: 36px;
    color: #fff;
    font-size: 16px;
    -webkit-transition: .2s;
    -moz-transition: .2s;
    -o-transition: .2s;
    transition: .2s
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .offer-services .single-offers .offers-caption .cat-cap p {
        font-size: 15px
    }
}

@media (max-width: 575px) {
    .offer-services .single-offers .offers-caption .cat-cap p {
        margin-bottom: 0px
    }
}

.offer-services .single-offers .offers-caption .cat-cap a {
    color: #1c165c;
    font-size: 16px;
    font-weight: 600;
    -webkit-transition: .2s;
    -moz-transition: .2s;
    -o-transition: .2s;
    transition: .2s
}

.offer-services .single-offers .offers-caption:hover .cat-cap h5 {
    color: #000
}

/*--------------------------------------------------------------
# Contact Section
--------------------------------------------------------------*/
.contact .info-wrap {
    background-color: var(--surface-color);
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
    padding: 30px;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.contact .info-wrap iframe {
    flex: 1 1 auto;
    /* map grows to fill leftover height — no gap */
    min-height: 270px;
}

@media (max-width: 575px) {
    .contact .info-wrap {
        padding: 20px;
    }
}

.contact .info-item {
    margin-bottom: 40px;
}

.contact .info-item i {
    font-size: 20px;
    color: var(--accent-color);
    background: color-mix(in srgb, var(--accent-color), transparent 92%);
    width: 44px;
    height: 44px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50px;
    transition: all 0.3s ease-in-out;
    margin-right: 15px;
}

.contact .info-item h3 {
    padding: 0;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 5px;
}

.contact .info-item p {
    padding: 0;
    margin-bottom: 0;
    font-size: 14px;
}

.contact .info-item:hover i {
    background: var(--accent-color);
    color: var(--contrast-color);
}

.contact .php-email-form {
    background-color: var(--surface-color);
    height: 100%;
    padding: 30px;
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
}

@media (max-width: 575px) {
    .contact .php-email-form {
        padding: 20px;
    }
}

.contact .php-email-form input[type=text],
.contact .php-email-form input[type=email],
.contact .php-email-form textarea {
    width: 100%;
    font-size: 14px;
    padding: 10px 15px;
    box-shadow: none;
    border-radius: 0;
    color: var(--default-color);
    background-color: var(--surface-color);
    border: 1px solid color-mix(in srgb, var(--default-color), transparent 80%);
    outline: none;
}

.contact .php-email-form input[type=text]:focus,
.contact .php-email-form input[type=email]:focus,
.contact .php-email-form textarea:focus {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 1px var(--accent-color);
}

.contact .php-email-form input[type=text]::placeholder,
.contact .php-email-form input[type=email]::placeholder,
.contact .php-email-form textarea::placeholder {
    color: color-mix(in srgb, var(--default-color), transparent 70%);
}

.contact .php-email-form .loading,
.contact .php-email-form .error-message,
.contact .php-email-form .sent-message {
    display: none;
    /* hidden until validate.js reveals them on submit */
}

.contact .php-email-form button[type=submit] {
    color: var(--contrast-color);
    background: var(--accent-color);
    border: 0;
    padding: 10px 30px;
    transition: 0.4s;
    border-radius: 8px;
}

.contact .php-email-form button[type=submit]:hover {
    background: color-mix(in srgb, var(--accent-color), transparent 25%);
}




/*--------------------------------------------------------------
# Call To Action Section
--------------------------------------------------------------*/
.call-to-action {
    position: relative;
    clip-path: inset(0);
}

.call-to-action img {
    position: fixed;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

.call-to-action:before {
    content: "";
    background: color-mix(in srgb, var(--background-color), transparent 50%);
    position: absolute;
    inset: 0;
    z-index: 2;
}

.call-to-action .container {
    position: relative;
    z-index: 3;
}

.call-to-action h3 {
    color: var(--default-color);
    font-size: 28px;
    font-weight: 700;
}

.call-to-action p {
    color: var(--default-color);
}

.call-to-action .cta-btn {
    font-family: var(--heading-font);
    font-weight: 500;
    font-size: 16px;
    letter-spacing: 1px;
    display: inline-block;
    padding: 12px 40px;
    border-radius: 8px;
    transition: 0.5s;
    margin: 10px;
    background: var(--accent-color);
    color: var(--contrast-color);
}

.call-to-action .cta-btn:hover {
    background: color-mix(in srgb, var(--accent-color) 90%, white 15%);
}



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

/* Equal-height cards: Owl Carousel doesn't equalize slide height on its own,
   so stretch each card via flex and let the quote grow to fill whatever
   space is left after the (fixed-height) name/role header. */
.testimonial-carousel .owl-stage {
    display: flex;
}

.testimonial-carousel .owl-item {
    display: flex;
    height: auto;
}

.testimonial-carousel .testimonial-item {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.testimonial-carousel .testimonial-item>div:last-child {
    flex: 1;
}

/* Owl clips both axes by default to mask sliding, which was cropping the
   center card's box-shadow once the card's own top margin (that used to
   double as shadow clearance) was removed. Keep the horizontal clip needed
   for the slide animation but stop clipping vertically. */
.testimonial-carousel .owl-stage-outer {
    overflow-x: hidden;
    overflow-y: visible;
}

/* Testimonial responsiveness */
@media (max-width: 991.98px) {
    .testimonial-carousel .owl-item .testimonial-item {
        margin: 0 10px 10px;
    }

    .testimonial-item .d-flex {
        padding: 20px 15px !important;
        flex-wrap: wrap;
        justify-content: center;
        text-align: center;
    }

    .testimonial-item .d-flex .ps-4 {
        padding-left: 0 !important;
        margin-top: 10px;
    }

    .testimonial-item .pt-4.pb-5.px-5 {
        padding: 20px 15px !important;
        font-size: 14px;
        text-align: center;
    }

    .testimonial-avatar {
        width: 50px !important;
        height: 50px !important;
        font-size: 22px !important;
    }
}

@media (max-width: 575.98px) {
    .testimonial-item .d-flex {
        flex-direction: column;
        padding: 15px !important;
    }

    .testimonial-item .d-flex .ps-4 {
        margin-top: 8px;
        text-align: center;
    }

    .testimonial-item .ps-4 h4 {
        font-size: 16px;
    }

    .testimonial-item .ps-4 small {
        font-size: 11px;
    }

    .testimonial-item .pt-4.pb-5.px-5 {
        padding: 15px !important;
        font-size: 13px;
    }
}

.testimonial-carousel .owl-dot {
    position: relative;
    display: inline-block;
    margin: 0 5px;
    width: 15px;
    height: 15px;
    background: #DDDDDD;
    border-radius: 2px;
    transition: .5s;
}

.testimonial-carousel .owl-dot.active {
    width: 30px;
    background: var(--primary);
}

.testimonial-carousel .owl-item.center {
    position: relative;
    z-index: 1;
}

.testimonial-carousel .owl-item .testimonial-item {
    transition: .5s;
}

/* Icon avatar in place of a photo */
.testimonial-avatar {
    width: 60px;
    height: 60px;
    background: color-mix(in srgb, var(--accent-color) 12%, #ffffff);
    color: var(--accent-color);
    font-size: 28px;
}

/* Side cards: soft brand tint (startup2 uses a light-blue --light here) */
.testimonial-carousel .testimonial-item {
    background: color-mix(in srgb, var(--accent-color) 6%, #ffffff) !important;
}

.testimonial-carousel .owl-item.center .testimonial-item {
    background: #FFFFFF !important;
    box-shadow: 0 0 30px #DDDDDD;
}

/*** Newsletter ***/
.newsletter {
    background: url(../img/hero-bg.jpg) bottom right no-repeat;
    background-size: cover;
}

@media (min-width: 992px) {
    .newsletter .container {
        max-width: 100% !important;
    }

    .newsletter .newsletter-text {
        padding-right: calc(((100% - 960px) / 2) + .75rem);
    }
}

@media (min-width: 1200px) {
    .newsletter .newsletter-text {
        padding-right: calc(((100% - 1140px) / 2) + .75rem);
    }
}

@media (min-width: 1400px) {
    .newsletter .newsletter-text {
        padding-right: calc(((100% - 1320px) / 2) + .75rem);
    }
}


@media (min-width: 767.98px) {
    .footer-about {
        margin-bottom: -75px;
    }
}


/*** Kenpelo lime accents (secondary brand pops) ***/

/* Call-to-action button: lime with dark text (stands out on the dark section) */
.call-to-action .cta-btn {
    background: var(--lime);
    color: #0b2b28;
}

.call-to-action .cta-btn:hover {
    background: var(--lime-dark);
    color: #0b2b28;
}

/* Footer quick-links: small green dot instead of an arrow */
.link-animated .footer-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--bs-primary);
    vertical-align: middle;
    position: relative;
    top: -2px;
}

/* Service icon hover: lime tile with dark icon */
.d-flex:hover>.service-icon {
    color: #0b2b28;
    background: var(--lime);
}

/* Testimonial active dot in lime */
.testimonial-carousel .owl-dot.active {
    background: var(--lime);
}

/* Hero credential badge hover keeps lime family */
.bg-lime:hover {
    background-color: var(--lime-dark) !important;
}


/*** Smoothness & subtle hover effects (Kenpelo) ***/

/* 1. Smooth anchor scrolling is handled by jQuery (main.js) for a controlled,
   slower glide, so CSS scroll-behavior is left off to avoid double-smoothing. */

/* 3. Image hover-zoom — gentle scale inside a clipped frame */
.img-hover-zoom {
    overflow: hidden;
}

.img-hover-zoom img {
    display: block;
    transition: transform .6s ease;
}

.img-hover-zoom:hover img {
    transform: scale(1.06);
}

/* 4. Card hover-lift — facts, testimonials */
.facts .shadow,
.testimonial-carousel .testimonial-item {
    transition: transform .35s ease, box-shadow .35s ease;
}

.facts .shadow:hover,
.testimonial-carousel .testimonial-item:hover {
    transform: translateY(-6px);
    box-shadow: 0 .6rem 1.6rem rgba(0, 0, 0, .12) !important;
}

/* Why-Choose-Us: lift the icon badge when hovering the item */
.features-bg-section .col-12 .bg-primary.rounded {
    transition: transform .35s ease;
}

.features-bg-section .col-12:hover .bg-primary.rounded {
    transform: translateY(-6px);
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .img-hover-zoom img,
    .facts .shadow,
    .testimonial-carousel .testimonial-item,
    .features-bg-section .col-12 .bg-primary.rounded {
        transition: none;
    }
}

/**********************************************/