/********** Custom CSS — Blend Design Studio **********/

/* Tell the browser this site is designed for light theme only. Some Android
   phones auto-darken ("force dark") sites that don't declare this, which can
   invert the whole page to black and make the white navbar blend invisibly
   into the dark background. This opts the site out of that auto-inversion. */
:root {
    color-scheme: light only;
}

/* Offset anchored sections so the sticky navbar doesn't cover the heading */
#home,
#about,
#services,
#gallery,
#contact {
    scroll-margin-top: 90px;
}

/* Force zero default spacing on body — guards against any leftover
   browser default margin showing as a thin white strip below the footer */
body {
    margin: 0;
    padding: 0;
}

.footer {
    margin-bottom: 0 !important;
}

html {
    scroll-behavior: smooth;
}

/* Hero heading a touch smaller on the smallest screens for readability */
@media (max-width: 576px) {
    .header-carousel .display-3 {
        font-size: 2.1rem;
    }
}

/* The carousel's photo-thumbnail navigation dots are a nice-to-have on
   desktop but crowd the hero text and can hang off the edge on small
   screens, so hide them below the tablet breakpoint. !important because
   the carousel plugin can set its own inline display style on this element. */
@media (max-width: 992px) {
    .header-carousel .owl-dots {
        display: none !important;
    }
}

/* Keep every hero slide the exact same height, regardless of each photo's
   own aspect ratio, by cropping with object-fit instead of letting img-fluid
   scale to its natural height. */
.header-carousel .owl-carousel-item {
    position: relative;
    height: 650px;
    overflow: hidden;
}

.header-carousel .owl-carousel-item img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

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

@media (max-width: 576px) {
    .header-carousel .owl-carousel-item {
        height: 420px;
    }
}


/*** Gallery ***/
.gallery-grid .gallery-item {
    overflow: hidden;
    border-radius: 4px;
    cursor: pointer;
    position: relative;
    height: 280px;
}

.gallery-grid .gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: .5s;
}

.gallery-grid .gallery-item:hover img {
    transform: scale(1.08);
}

.gallery-grid .gallery-item::after {
    content: "\f00e";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.5);
    color: #fff;
    font-size: 1.5rem;
    opacity: 0;
    transition: .4s;
    background: rgba(0, 0, 0, 0.35);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gallery-grid .gallery-item:hover::after {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

/* Lightbox */
.lightbox-overlay {
    display: none;
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.92);
    align-items: center;
    justify-content: center;
    padding: 30px;
}

.lightbox-overlay.show {
    display: flex;
}

.lightbox-overlay img {
    max-width: 100%;
    max-height: 90vh;
    border-radius: 4px;
    box-shadow: 0 0 40px rgba(0,0,0,0.5);
}

.lightbox-close {
    position: absolute;
    top: 20px;
    right: 30px;
    color: #fff;
    font-size: 2.5rem;
    line-height: 1;
    cursor: pointer;
    font-weight: 300;
}


/*** Footer column spacing ***/
.footer .row.g-5 > [class*="col-"] {
    padding-left: 1rem;
    padding-right: 1rem;
}

@media (max-width: 991px) {
    .footer .row.g-5 > [class*="col-"] {
        padding-left: 15px;
        padding-right: 15px;
    }
}


/*** Call / WhatsApp floating buttons ***/
.fixed-button {
    position: fixed;
    bottom: 25px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.5rem;
    z-index: 999;
    transition: .3s;
}

.fixed-button:hover {
    color: #fff;
    transform: scale(1.08);
}

.call-button {
    background: var(--primary);
    left: 25px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}

.whatsapp-button {
    background: #25D366;
    right: 25px;
    color: #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}

/* Keep the back-to-top button clear of the WhatsApp button */
.back-to-top {
    right: 25px !important;
    bottom: 95px !important;
}

/* The template used to slide the sticky navbar down from top:-100px on
   scroll, which could catch the logo mid-transition and make it look cut
   off. Keep the navbar always in place (still sticky) and only toggle the
   shadow — see the matching change in js/main.js. */
.navbar.sticky-top {
    top: 0 !important;
}

/* Same idea for the back-to-top button: instead of jQuery fadeIn/fadeOut
   (which could be caught mid-fade while scrolling and look half-cut),
   fade it with CSS and control visibility with a "show" class toggled in
   js/main.js. */
.back-to-top {
    display: flex !important;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .3s ease, visibility .3s ease;
}

.back-to-top.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

@media (max-width: 576px) {
    .fixed-button {
        bottom: 20px;
    }

    .call-button {
        width: 48px;
        height: 48px;
        font-size: 1.25rem;
        left: 18px;
    }

    .whatsapp-button {
        right: 18px;
        width: 48px;
        height: 48px;
        font-size: 1.25rem;
    }

    .back-to-top {
        right: 18px !important;
        bottom: 82px !important;
    }
}

/*** ================================================
     Innovative Home Page Effects & Animations
     ================================================ ***/

/* ---- Hero: slow Ken Burns zoom + moving tint wash ---- */
.header-carousel .owl-carousel-item img {
    animation: heroKenBurns 12s ease-in-out infinite alternate;
}

@keyframes heroKenBurns {
    from { transform: scale(1); }
    to   { transform: scale(1.09); }
}

.owl-carousel-inner::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, rgba(228,142,91,.45), transparent 45%, rgba(0,0,0,.25));
    background-size: 250% 250%;
    animation: heroTintShift 9s ease-in-out infinite;
    mix-blend-mode: overlay;
    pointer-events: none;
}

@keyframes heroTintShift {
    0%   { background-position: 0% 0%; }
    50%  { background-position: 100% 100%; }
    100% { background-position: 0% 0%; }
}

/* Reduce motion for anyone who prefers it */
@media (prefers-reduced-motion: reduce) {
    .header-carousel .owl-carousel-item img,
    .owl-carousel-inner::before {
        animation: none !important;
    }
}

/* ---- Magnetic shine sweep on primary buttons ---- */
.btn-primary {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.btn-primary::after {
    content: "";
    position: absolute;
    top: 0;
    left: -60%;
    width: 40%;
    height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,.55), transparent);
    transform: skewX(-20deg);
    transition: left .7s ease;
    z-index: 1;
    pointer-events: none;
}

.btn-primary:hover::after {
    left: 130%;
}

/* ---- Animated underline draw-in for section titles ---- */
.section-title {
    position: relative;
    display: inline-block;
    padding-bottom: 10px;
}

.section-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    width: 100%;
    background: linear-gradient(90deg, var(--primary), transparent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .8s cubic-bezier(.22,1,.36,1);
}

.section-title.in-view::after {
    transform: scaleX(1);
}

/* ---- Facts: floating icons + glow lift + top-bar reveal ---- */
.fact-item {
    position: relative;
    transition: transform .4s ease, box-shadow .4s ease;
}

.fact-item:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0,0,0,.12);
}

.fact-item .fact-icon img {
    animation: iconFloat 3.2s ease-in-out infinite;
}

.fact-item:nth-child(2) .fact-icon img { animation-delay: .3s; }
.fact-item:nth-child(3) .fact-icon img { animation-delay: .6s; }

@keyframes iconFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-8px); }
}

/* ---- About & Feature image stacks: tilt + shimmer sweep ---- */
.about-img img,
.feature-img img {
    transition: transform .5s ease, box-shadow .5s ease;
}

.about-img:hover img:first-child,
.feature-img:hover img:first-child {
    transform: rotate(-2deg) scale(1.03);
    box-shadow: 0 15px 30px rgba(0,0,0,.18);
}

.about-img:hover img:last-child,
.feature-img:hover img:last-child {
    transform: rotate(2deg) scale(1.03);
    box-shadow: 0 15px 30px rgba(0,0,0,.18);
}

/* Pulsing glow on the "2023" / "800+" stat boxes */
.about .border-primary,
[class*="col-6"] .border-primary {
    animation: statPulse 2.8s ease-in-out infinite;
}

@keyframes statPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(228,142,91,.35); }
    50%      { box-shadow: 0 0 0 8px rgba(228,142,91,0); }
}

/* ---- Services: corner wipe reveal + icon spin + text rise ---- */
.service-item {
    overflow: hidden;
}

.service-item::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 120%, rgba(228,142,91,.85), rgba(0,0,0,.75) 70%);
    clip-path: circle(0% at 50% 100%);
    transition: clip-path .6s ease;
    z-index: 0;
}

.service-item:hover::before {
    clip-path: circle(140% at 50% 100%);
}

.service-item .service-text {
    position: relative;
    z-index: 1;
    background: var(--light);
}

.service-item:hover .service-text {
    background: transparent;
}

.service-item .service-text > img {
    transition: transform .6s ease;
}

.service-item:hover .service-text > img {
    transform: rotate(360deg) scale(1.1);
}

.service-item .service-text h3,
.service-item .service-text p {
    transition: transform .5s ease, opacity .5s ease;
}

.service-item:hover .service-text h3 {
    transform: translateY(-4px);
}

.service-item:hover .service-text p {
    transform: translateY(-2px);
}

/* ---- Gallery: staggered reveal on scroll ---- */
.gallery-grid .gallery-item {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .6s ease, transform .6s ease;
}

.gallery-grid .gallery-item.in-view {
    opacity: 1;
    transform: translateY(0);
}

/* ---- Back to top: spin on hover ---- */
.back-to-top i {
    display: inline-block;
    transition: transform .4s ease;
}

.back-to-top:hover i {
    transform: rotate(360deg);
}

@media (prefers-reduced-motion: reduce) {
    .fact-item .fact-icon img,
    [class*="col-6"] .border-primary {
        animation: none !important;
    }
}

/* ---- Extra-narrow-screen hardening (phones under ~400px) ---- */

/* Belt-and-braces: never allow accidental horizontal scroll, whatever the cause.
   Using "clip" (not "hidden") on the x-axis only — "hidden" here would silently
   force overflow-y to "auto" in the browser's box model, which breaks the sticky
   navbar and makes the logo look clipped every time you scroll. */
html, body {
    overflow-x: clip;
}

/* Shrink the logo a touch on very narrow screens so it never crowds out
   the hamburger toggler in the navbar */
@media (max-width: 400px) {
    .navbar-brand img {
        height: 42px !important;
    }
}

@media (max-width: 360px) {
    .header-carousel .display-3 {
        font-size: 1.8rem;
    }
}

/* Fix: back-to-top button must always sit on the right (bottom:95px/right:25px
   above already handles positioning) — this just guarantees no stray "left"
   value from anywhere can ever pull it to the left edge. */
.back-to-top {
    left: auto !important;
}

/* Fix: trim the tall blank gap around the contact page's map (added the
   "contact-map-section" class to just that one div in contact.html so this
   only affects that section, nothing else on the site). */
.contact-map-section {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
}

.contact-map-section iframe {
    height: 320px !important;
}