.page-transition-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: #0b0b0f;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 220ms ease, visibility 220ms ease;
}

body.page-transition-active .page-transition-overlay {
    opacity: 1;
    visibility: visible;
}

body.page-transition-active {
    background: #0b0b0f;
}

@media (prefers-reduced-motion: reduce) {
    .page-transition-overlay {
        transition: none !important;
    }
}

/* === Hero Divider (APPENDED) === */
.hero-divider {
    width: 120px;
    height: 2px;
    border: 0;
    margin: -10px 0 34px;
    background: linear-gradient(90deg, rgba(255, 255, 255, .65), rgba(255, 255, 255, 0));
}

@media (max-width:575px) {
    .hero-divider {
        width: 90px;
        margin: -8px 0 28px
    }
}

/* === End Hero Divider === */
/* === Square CTA Buttons Override (APPENDED) === */
.cta-btn {
    border-radius: 0 !important
}

/* === End Square CTA Buttons Override === */
/* === Dynamic Hero Lighten Overlay Override (APPENDED) === */
.reviews-dynamic-hero__overlay {
    background: linear-gradient(120deg, rgba(15, 15, 20, .42), rgba(15, 15, 22, .62) 55%, rgba(15, 15, 25, .75)) !important;
}

.reviews-dynamic-hero__grid {
    filter: grayscale(.15) contrast(.95) brightness(.9) !important;
}

.reviews-dynamic-hero:before {
    background: radial-gradient(circle at 25% 25%, rgba(255, 255, 255, .1), rgba(255, 255, 255, 0) 55%), linear-gradient(180deg, rgba(10, 10, 12, .65), rgba(10, 10, 12, .75) 50%, rgba(10, 10, 12, .85)) !important;
}

/* Slight text shadow for readability after lightening */
.reviews-dynamic-hero .hero-title,
.reviews-dynamic-hero .hero-slide__quote {
    text-shadow: 0 2px 10px rgba(0, 0, 0, .4);
}

/* === End Dynamic Hero Lighten Overlay Override === */
/* === Video Testimonial Compact Variant (APPENDED) === */
.video-testimonial--compact .video-testimonial-row {
    display: block
}

.video-testimonial--compact .video-testimonial-item {
    padding: 10px 4px
}

.video-testimonial--compact .video-testimonial__media-wrap {
    margin: 0 auto 26px;
    max-width: 900px
}

.video-meta-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    background: #0f0f11;
    border: 1px solid rgba(255, 255, 255, .1);
    padding: 18px 22px;
    border-radius: 4px;
    box-shadow: 0 10px 28px -14px rgba(0, 0, 0, .55), 0 4px 14px -6px rgba(0, 0, 0, .45);
    transition: background .45s, border-color .45s, box-shadow .6s
}

.video-meta-bar__info {
    display: flex;
    align-items: center;
    gap: 18px
}

.video-meta-bar__client {
    margin: 0;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    overflow: hidden;
    flex: 0 0 58px;
    display: flex;
    border: 1px solid rgba(255, 255, 255, .18);
    box-shadow: 0 6px 20px -10px rgba(0, 0, 0, .6)
}

.video-meta-bar__client img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(14%) contrast(108%);
    transition: filter .8s ease
}

.video-meta-bar__name {
    margin: 0 0 4px;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: .4px;
    color: #fff
}

.video-meta-bar__project {
    margin: 0;
    font-size: 13px;
    letter-spacing: .5px;
    color: #cfcfcf
}

.video-meta-bar__btn {
    display: inline-block;
    padding: 11px 22px;
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-weight: 600;
    background: #ffffff;
    color: #000;
    border: 1px solid #ffffff;
    position: relative;
    overflow: hidden;
    text-decoration: none;
    border-radius: 2px;
    transition: background .4s, color .4s, border-color .4s, transform .45s cubic-bezier(.19, 1, .22, 1), box-shadow .55s
}

.video-meta-bar__btn:before {
    content: "";
    position: absolute;
    top: 0;
    left: -40%;
    width: 40%;
    height: 100%;
    background: linear-gradient(120deg, rgba(255, 255, 255, .65) 0%, rgba(255, 255, 255, 0) 75%);
    transform: skewX(-18deg);
    opacity: 0;
    transition: transform .7s, opacity .55s
}

.video-meta-bar__btn:hover {
    background: #f5f5f5;
    color: #000;
    transform: translateY(-3px);
    box-shadow: 0 10px 28px -12px rgba(0, 0, 0, .55)
}

.video-meta-bar__btn:hover:before {
    transform: translateX(230%) skewX(-18deg);
    opacity: 1
}

.video-meta-bar__btn:active {
    transform: translateY(2px)
}

.video-testimonial--compact .video-testimonial-item:hover .video-meta-bar {
    background: #141415;
    border-color: rgba(255, 255, 255, .22);
    box-shadow: 0 20px 46px -18px rgba(0, 0, 0, .7), 0 8px 26px -10px rgba(0, 0, 0, .6)
}

.video-testimonial--compact .video-testimonial-item:hover .video-meta-bar__client img {
    filter: grayscale(0) contrast(112%)
}

@media (max-width:680px) {
    .video-meta-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 18px
    }

    .video-meta-bar__info {
        width: 100%
    }

    .video-meta-bar__btn {
        align-self: flex-start
    }
}

@media (prefers-reduced-motion:reduce) {

    .video-meta-bar,
    .video-meta-bar__btn {
        transition: none !important
    }

    .video-meta-bar__btn:before {
        transition: none !important
    }
}

/* === End Video Testimonial Compact Variant === */
/* === Dynamic Reviews Hero (APPENDED) === */
.reviews-dynamic-hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 140px 0 120px;
    color: #fff;
    overflow: hidden
}

.reviews-dynamic-hero:before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 25% 25%, rgba(255, 255, 255, .12), rgba(255, 255, 255, 0) 55%), linear-gradient(180deg, rgba(10, 10, 12, .85), rgba(10, 10, 12, .9) 50%, rgba(10, 10, 12, .96));
    z-index: 1;
    pointer-events: none
}

.reviews-dynamic-hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0
}

.reviews-dynamic-hero__grid {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 2px;
    filter: grayscale(.25) contrast(.9) brightness(.75);
    opacity: .9
}

.reviews-dynamic-hero__grid .grid-tile {
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden
}

/* Language switcher styles */
.lang-switcher{
    display:flex;
    gap:8px;
    align-items:center;
    margin-left:18px;
}
.lang-switcher__btn{
    background:transparent;
    border:1px solid rgba(255,255,255,0.12);
    color:inherit;
    padding:6px 10px;
    font-weight:600;
    font-size:12px;
    letter-spacing:1px;
    text-transform:uppercase;
    border-radius:4px;
    cursor:pointer;
    transition:background .18s, border-color .18s, transform .12s;
}
.lang-switcher__btn:hover{transform:translateY(-1px)}
.lang-switcher__btn[aria-pressed="true"], .lang-switcher__btn.is-active{
    background:#ffffff;
    color:#111;
    border-color:#ffffff;
}
.lang-switcher__btn.is-disabled{
    opacity:.42;
    cursor:not-allowed;
    border-style:dashed;
}

@media(max-width:768px){
    .lang-switcher{margin-left:10px}
    .lang-switcher__btn{padding:6px 8px;font-size:11px}
}

/* Mobile tweaks: position language switcher left of the hamburger, show only the flag */
@media (max-width: 768px) {
    /* Pull switcher out of normal flow and anchor it from the right,
       sitting just to the left of the hamburger button (~54 px wide + container padding) */
    header#header .lang-switcher {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: 60px; /* adjust if hamburger width/padding changes */
        left: auto !important;
        z-index: 1301;
        margin: 0;
    }

    /* Dropdown opens to the left so it doesn't clip off-screen */
    .lang-switcher__menu {
        right: 0;
        left: auto !important;
        top: calc(100% + 6px);
        z-index: 1302;
    }

    /* On mobile show only the flag – hide code and caret */
    .lang-switcher__code,
    .lang-switcher__caret {
        display: none !important;
    }

    /* Compact toggle with just the flag */
    .lang-switcher__toggle { padding: 4px; }
    .lang-switcher__flag.flag-icon { width: 24px; height: 16px; }
}

/* Dropdown variant */
.lang-switcher{position:relative; margin-left:18px; font-family: inherit}
.lang-switcher__toggle{display:inline-flex;align-items:center;gap:8px;background:transparent;border:none;color:white;padding:6px 8px;border-radius:4px;cursor:pointer;font-weight:500;font-size:12px;text-transform:uppercase}
.lang-switcher__toggle .lang-switcher__flag{font-size:22px;line-height:1;display:inline-block;width:auto}
/* Ensure flag-icon pseudo-element is large enough and not clipped by other rules */
.lang-switcher__flag.flag-icon{display:inline-block;width:28px;height:20px;line-height:20px;vertical-align:middle}
.lang-switcher__flag.flag-icon::before{display:inline-block!important;width:16px!important;height:20px!important;background-size:cover!important;background-position:center center!important}
.lang-switcher__toggle .lang-switcher__code{letter-spacing:1px}
.lang-switcher__menu{position:absolute;left:0;top:calc(100% + 6px);background:#0f0f11;border:none;padding:6px;border-radius:6px;min-width:12x;box-shadow:0 8px 30px rgba(0,0,0,.5);z-index:60;transform-origin:top left}
.lang-switcher__menu li{list-style:none;margin:0}
.lang-switcher__item{display:flex;align-items:center;gap:8px;width:100%;padding:6px 8px;border-radius:4px;background:transparent;border:0;color:white;text-align:left;cursor:pointer;font-weight:500;font-size:12px;text-transform:uppercase}
.lang-switcher__item .flag-icon{font-size:20px;line-height:1;display:inline-block;height:18px;width:26px}
.lang-switcher__item:hover{background:rgba(255,255,255,0.03)}
.lang-switcher__item.is-disabled{opacity:.45;cursor:not-allowed}
.lang-switcher__caret{margin-left:6px;opacity:.7}

/* Dropdown open/close animation */
.lang-switcher__menu{opacity:0;transform:translateY(-8px) scale(.96);transition:opacity .32s cubic-bezier(.16,.84,.24,1), transform .32s cubic-bezier(.16,.84,.24,1);pointer-events:none}
.lang-switcher.is-open .lang-switcher__menu{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}

/* Selection animation */
.lang-switcher__item.is-selected{background:rgba(255,255,255,0.06);transition:background .18s}
.lang-switcher__item.is-selected::after{content:'';display:block;height:2px;background:transparent}

/* lang-switcher mobile handled by the block above */

/* Remove focus stroke/outline from dropdown and toggle for a cleaner look */
.lang-switcher__toggle:focus,
.lang-switcher__item:focus,
.lang-switcher__toggle:focus-visible,
.lang-switcher__item:focus-visible{
    outline: none;
    box-shadow: none;
}

/* Slightly size flags to match navbar */
.lang-switcher__flag.flag-icon{font-size:14px;line-height:1;width:auto}
.lang-switcher__item .code{margin-left:6px}

.reviews-dynamic-hero__grid .grid-tile:after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .25);
    mix-blend-mode: multiply;
    transition: background .8s ease
}

.reviews-dynamic-hero__grid .grid-tile:nth-child(3n) {
    animation: pulseTile 9s linear infinite
}

@keyframes pulseTile {

    0%,
    100% {
        filter: brightness(.75)
    }

    40% {
        filter: brightness(1)
    }
}

.reviews-dynamic-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, rgba(15, 15, 20, .6), rgba(15, 15, 22, .85) 55%, rgba(15, 15, 25, .95));
    backdrop-filter: blur(3px);
}

.reviews-dynamic-hero__inner {
    position: relative;
    z-index: 2;
    max-width: 860px
}

.hero-eyebrow {
    font-size: 12px;
    letter-spacing: 2px;
    font-weight: 600;
    margin: 0 0 26px;
    text-transform: uppercase;
    color: #d3d3d3
}

.hero-title {
    font-size: 56px;
    line-height: 1.05;
    font-weight: 600;
    margin: 0 0 26px
}

.hero-title__accent {
    background: linear-gradient(90deg, #ffffff, #bdbdbd);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    display: inline-block
}

.hero-lead {
    font-size: 18px;
    max-width: 640px;
    color: #cfcfcf;
    margin: 0 0 44px;
    line-height: 1.5
}

.hero-slides {
    position: relative;
    margin: 0 0 46px
}

.hero-slide {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .8s cubic-bezier(.19, 1, .22, 1), transform .9s cubic-bezier(.19, 1, .22, 1);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

.hero-slide.is-active {
    opacity: 1;
    transform: translateY(0);
    position: relative
}

.hero-slide__quote {
    font-size: 26px;
    line-height: 1.35;
    font-weight: 500;
    margin: 0 0 14px;
    letter-spacing: .3px
}

.hero-slide__meta {
    font-size: 14px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #b8b8b8;
    margin: 0
}

.hero-controls {
    display: flex;
    gap: 14px;
    margin: 0 0 50px
}

.hero-control {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .25);
    background: rgba(255, 255, 255, .08);
    color: #fff;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .5s ease, border-color .5s ease, transform .5s ease, box-shadow .5s ease
}

.hero-control:hover,
.hero-control:focus-visible {
    background: rgba(255, 255, 255, .18);
    border-color: rgba(255, 255, 255, .45);
    box-shadow: 0 6px 22px -6px rgba(0, 0, 0, .55)
}

.hero-control:active {
    transform: scale(.94)
}

.hero-control:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px
}

.hero-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 16px
}

.hero-scroll-cue {
    position: absolute;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%);
    opacity: .75;
    animation: scrollPulse 3.2s ease-in-out infinite
}

@keyframes scrollPulse {

    0%,
    100% {
        opacity: .25;
        transform: translate(-50%, 0)
    }

    50% {
        opacity: .9;
        transform: translate(-50%, -8px)
    }
}

@media (max-width:991px) {
    .hero-title {
        font-size: 46px
    }

    .hero-slide__quote {
        font-size: 22px
    }
}

@media (max-width:767px) {
    .reviews-dynamic-hero {
        padding: 120px 0 110px
    }

    .hero-title {
        font-size: 40px
    }

    .hero-slide__quote {
        font-size: 20px
    }

    .hero-controls {
        margin-bottom: 36px
    }
}

@media (max-width:575px) {
    .hero-title {
        font-size: 34px
    }

    .hero-lead {
        font-size: 16px;
        margin-bottom: 34px
    }

    .hero-slide__quote {
        font-size: 19px
    }

    .hero-slide__meta {
        font-size: 12px
    }
}

@media (prefers-reduced-motion:reduce) {
    .hero-slide {
        transition: none !important
    }

    .hero-control,
    .hero-scroll-cue {
        animation: none !important
    }
}

/* === End Dynamic Reviews Hero === */
/* -------------------------------------------------- */
/* Hero Divider Adjustment (Trusted Experience line)  */
/* Centers the small gradient rule beneath eyebrow    */
/* -------------------------------------------------- */
.reviews-dynamic-hero .hero-divider {
    margin: -10px auto 34px;
    display: block
}

@media (max-width:575px) {
    .reviews-dynamic-hero .hero-divider {
        margin: -8px auto 28px
    }
}

/* ==================================================
    Video Testimonial Section Gradient (matched to text reviews)
    Mirrors .testimonial-area background + overlay accent
    ================================================== */
.video-testimonial {
    position: relative;
    background: #050505;
    background: linear-gradient(150deg, #000000 0%, #000000 55%, #060606 100%);
    color: #e9e9e9;
    isolation: isolate;
    overflow: hidden
}

.video-testimonial:before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 18% 22%, rgba(255, 255, 255, .06), transparent 60%), radial-gradient(circle at 80% 70%, rgba(255, 255, 255, .05), transparent 65%);
    pointer-events: none;
    mix-blend-mode: screen;
    opacity: .85
}

.video-testimonial .testimonials-eyebrow {
    color: #fff;
    opacity: .85
}

.video-testimonial .testimonials-title {
    color: #fff
}

.video-testimonial .testimonials-lead {
    color: #d2d2d2
}

/* ================= Feedback Section (Reviews Page) ================ */
.feedback-section {
    position: relative;
    background: linear-gradient(135deg, #0a0a0c 0%, #0d0d11 55%, #101018 100%);
    color: #e9e9e9;
    overflow: hidden
}

.feedback-section:before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 12% 18%, rgba(255, 255, 255, .06), transparent 60%), radial-gradient(circle at 88% 82%, rgba(255, 255, 255, .05), transparent 65%);
    pointer-events: none;
    mix-blend-mode: screen;
    opacity: .8
}

.feedback-form {
    max-width: 940px;
    margin: 40px auto 0;
    padding: 0 15px
}

.feedback-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 26px
}

.feedback-field {
    display: flex;
    flex-direction: column;
    gap: 8px
}

.feedback-field--full {
    grid-column: 1/-1
}

.feedback-field label {
    font-size: 13px;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-weight: 600;
    color: #ffffffd9
}

.feedback-field input,
.feedback-field textarea {
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .18);
    color: #fff;
    border-radius: 6px;
    padding: 12px 14px;
    font-size: 15px;
    line-height: 1.4;
    transition: border-color .35s ease, background .35s ease, box-shadow .35s ease
}

.feedback-field input:focus,
.feedback-field textarea:focus {
    outline: none;
    border-color: #ffffff80;
    background: rgba(255, 255, 255, .12);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .15)
}

.feedback-field input::placeholder,
.feedback-field textarea::placeholder {
    color: #b7b7b7
}

.feedback-field textarea {
    resize: vertical;
    min-height: 150px
}

.feedback-help {
    font-size: 13px;
    color: #bdbdbd;
    margin: 20px 0 8px
}

.feedback-actions {
    text-align: right;
    margin-top: 10px
}

.feedback-actions .cta-btn {
    padding: 14px 30px;
    font-size: 15px
}

@media (max-width:575px) {
    .feedback-grid {
        gap: 18px
    }

    .feedback-actions {
        text-align: left
    }

    .feedback-form {
        margin-top: 30px
    }
}

/* ================= Social Share Section (replaces feedback form) ================ */
.social-share-section {
    position: relative;
    background: #ffffff;
    color: #1c1e22;
    overflow: hidden
}

.social-share-section:before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 16% 20%, rgba(20, 90, 255, .08), transparent 60%), radial-gradient(circle at 82% 80%, rgba(255, 165, 0, .08), transparent 65%);
    pointer-events: none;
    opacity: .9
}

.social-share-grid {
    margin: 50px auto 10px;
    display: grid;
    gap: 34px;
    grid-template-columns: repeat(3, 1fr);
    max-width: 1100px
}

@media (max-width: 767px) {
    .social-share-grid {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media (max-width: 479px) {
    .social-share-grid {
        grid-template-columns: 1fr
    }
}

.social-share-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-decoration: none;
    background: #ffffff;
    border: 1px solid #e2e6ea;
    padding: 26px 22px;
    transition: background .4s ease, border-color .4s ease, transform .4s ease, box-shadow .4s ease, color .4s ease;
    color: #1c1e22;
    box-shadow: 0 4px 12px -6px rgba(0, 0, 0, .08)
}

.social-share-card:focus-visible {
    outline: 2px solid #1c1e22;
    outline-offset: 3px
}

.social-share-card:hover {
    background: #f6f9ff;
    border-color: #c7d4e2;
    box-shadow: 0 10px 28px -10px rgba(20, 35, 70, .25);
    transform: translateY(-4px)
}

.social-icon-wrap {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    background: linear-gradient(140deg, #2563eb, #3b82f6);
    color: #ffffff;
    box-shadow: 0 4px 10px -4px rgba(37, 99, 235, .55)
}

.social-share-name {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
    letter-spacing: .5px
}

.social-share-tip {
    font-size: 14px;
    line-height: 1.55;
    margin: 0;
    color: #4a4f55
}

.social-share-cta {
    margin-top: 48px
}

.social-share-hashtag {
    font-size: 14px;
    color: #5a5f68
}

.social-share-hashtag a {
    color: #2563eb;
    text-decoration: underline;
    text-decoration-color: rgba(37, 99, 235, .35)
}

.social-share-hashtag a:hover {
    text-decoration-color: #2563eb
}

@media (max-width:575px) {
    .social-share-grid {
        gap: 22px;
        margin-top: 40px
    }

    .social-share-card {
        padding: 22px 18px
    }
}

/* Note: .feedback-section styles retained above in case reinstated later */

/* Platform-specific social share colors */
.social-share-section .testimonials-title {
    color: #12141a
}

.video-stories .testimonials-header {
    max-width: 1040px
}

.video-stories .testimonials-title-black {
    margin: 0 0 22px;
    font-size: clamp(2.2rem, 4vw, 3.4rem);
    line-height: 1.08;
    font-weight: 650;
    letter-spacing: .6px;
    color: #12141a
}

.social-share-section .social-share-header {
    max-width: 1040px;
    margin-left: auto;
    margin-right: auto;
    text-align: center
}

.social-share-section .testimonials-eyebrow {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 18px;
    font-weight: 600;
    letter-spacing: 2.5px;
    color: #1d2430;
    font-size: 13px;
    margin: 0 0 18px;
    text-transform: uppercase
}


@media (max-width:767px) {

    .social-share-section .testimonials-eyebrow:before,
    .social-share-section .testimonials-eyebrow:after {
        width: 70px
    }
}

@media (max-width:480px) {
    .social-share-section .testimonials-eyebrow {
        gap: 12px;
        letter-spacing: 2px
    }

    .social-share-section .testimonials-eyebrow:before,
    .social-share-section .testimonials-eyebrow:after {
        width: 46px
    }
}

.social-share-card--facebook .social-icon-wrap {
    background: linear-gradient(135deg, #1877f2, #3b82f6);
    box-shadow: 0 4px 10px -4px rgba(24, 119, 242, .55)
}

.social-share-card--facebook:hover .social-icon-wrap {
    background: linear-gradient(135deg, #166fe0, #2563eb)
}

/* Instagram multi-color gradient */
.social-share-card--instagram .social-icon-wrap {
    background: radial-gradient(circle at 30% 110%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
    box-shadow: 0 4px 10px -4px rgba(214, 36, 159, .55)
}

.social-share-card--instagram:hover .social-icon-wrap {
    filter: brightness(1.05)
}

/* Twitter / X */
.social-share-card--twitter .social-icon-wrap {
    background: #000;
    color: #fff;
    box-shadow: 0 4px 10px -4px rgba(0, 0, 0, .55)
}

.social-share-card--twitter:hover .social-icon-wrap {
    background: #111
}

/* LinkedIn */
.social-share-card--linkedin .social-icon-wrap {
    background: linear-gradient(135deg, #0a66c2, #1183ff);
    box-shadow: 0 4px 10px -4px rgba(10, 102, 194, .55)
}

.social-share-card--linkedin:hover .social-icon-wrap {
    background: linear-gradient(135deg, #095cae, #0a66c2)
}

/* Slight accent border change per platform on hover */
.social-share-card--facebook:hover {
    border-color: #1877f2
}

.social-share-card--instagram:hover {
    border-color: #d6249f
}

.social-share-card--twitter:hover {
    border-color: #000
}

.social-share-card--linkedin:hover {
    border-color: #0a66c2
}

/* Inline SVG icons — match Font Awesome sizing in every context */
.si-tiktok,
.si-youtube {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
    fill: currentColor;
    flex-shrink: 0
}

/* Social share card: YouTube */
.social-share-card--youtube .social-icon-wrap {
    background: linear-gradient(135deg, #ff0000, #cc0000);
    box-shadow: 0 4px 10px -4px rgba(255, 0, 0, .55)
}
.social-share-card--youtube:hover .social-icon-wrap {
    background: linear-gradient(135deg, #e00000, #b30000)
}
.social-share-card--youtube:hover {
    border-color: #ff0000
}

/* Social share card: Pinterest */
.social-share-card--pinterest .social-icon-wrap {
    background: linear-gradient(135deg, #e60023, #ad081b);
    box-shadow: 0 4px 10px -4px rgba(230, 0, 35, .55)
}
.social-share-card--pinterest:hover .social-icon-wrap {
    background: linear-gradient(135deg, #cc001f, #9a0619)
}
.social-share-card--pinterest:hover {
    border-color: #e60023
}

/* Social share card: TikTok */
.social-share-card--tiktok .social-icon-wrap {
    background: #000;
    color: #fff;
    box-shadow: 0 4px 10px -4px rgba(0, 0, 0, .55)
}
.social-share-card--tiktok:hover .social-icon-wrap {
    background: #111
}
.social-share-card--tiktok:hover {
    border-color: #000
}

/* Social share card: Behance */
.social-share-card--behance .social-icon-wrap {
    background: linear-gradient(135deg, #1769ff, #0057ff);
    box-shadow: 0 4px 10px -4px rgba(23, 105, 255, .55)
}
.social-share-card--behance:hover .social-icon-wrap {
    background: linear-gradient(135deg, #1560f0, #004ee0)
}
.social-share-card--behance:hover {
    border-color: #1769ff
}

/* Accessible focus within cards (icon wrap) */
.social-share-card:focus-visible .social-icon-wrap {
    box-shadow: 0 0 0 4px rgba(37, 99, 235, .4)
}

/* === Reviews Hero Video Background & Unified CTA Enhancements (APPENDED) === */
.reviews-hero__video-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 0
}

.reviews-hero__video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(.55) saturate(1.12);
    transform: scale(1.025);
    will-change: transform;
}

.reviews-hero__video-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(12, 12, 15, .58), rgba(12, 12, 15, .84) 50%, rgba(12, 12, 15, .95));
    backdrop-filter: blur(2px);
    mix-blend-mode: normal
}

.reviews-hero__inner {
    position: relative;
    z-index: 2
}

.reviews-hero.reviews-hero--full {
    position: relative;
}

.reviews-hero.reviews-hero--full .reviews-hero__bg {
    display: none
}

/* Unified animated CTA buttons */
.cta-btn {
    --cta-border: rgba(255, 255, 255, .18);
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 34px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .5px;
    text-transform: uppercase;
    border: 1px solid var(--cta-border);
    border-radius: 50px;
    color: #111;
    background: rgba(255, 255, 255, .12);
    overflow: hidden;
    transition: color .55s cubic-bezier(.19, 1, .22, 1), border-color .55s ease, background .55s ease, box-shadow .7s cubic-bezier(.19, 1, .22, 1), transform .5s ease;
    isolation: isolate
}

.cta-btn:before,
.cta-btn:after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    z-index: -1;
    transition: opacity .8s ease, transform 1.4s cubic-bezier(.19, 1, .22, 1)
}

.cta-btn:before {
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 70%);
    opacity: .25
}

.cta-btn:after {
    background: linear-gradient(135deg, #ffffff, #d6d6d6);
    mix-blend-mode: overlay;
    opacity: 0
}

.cta-btn[data-variant="outline"] {
    background: rgba(255, 255, 255, .06);
    color: #fff
}

.cta-btn[data-variant="primary"] {
    background: linear-gradient(135deg, #ffffff, #d7d7d7);
    color: #0f0f11;
    box-shadow: 0 8px 28px -8px rgba(255, 255, 255, .35), 0 2px 8px -2px rgba(0, 0, 0, .55)
}

.cta-btn[data-variant="primary"]:before {
    opacity: .38
}

.cta-btn:hover,
.cta-btn:focus-visible {
    color: #0f0f11;
    border-color: rgba(255, 255, 255, .46);
    background: linear-gradient(135deg, #fff, #dbdbdb);
    box-shadow: 0 10px 34px -6px rgba(0, 0, 0, .58), 0 3px 14px -4px rgba(0, 0, 0, .5)
}

.cta-btn:hover:after,
.cta-btn:focus-visible:after {
    opacity: .6
}

.cta-btn:active {
    transform: translateY(2px)
}

.cta-btn:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px
}

.cta-btn+.cta-btn {
    margin-left: 14px
}

@media (max-width:575px) {
    .cta-btn {
        padding: 13px 26px;
        font-size: 12px
    }

    .cta-btn+.cta-btn {
        margin-left: 8px
    }
}

/* Phrase chips always visible; inactive show a subtle disabled effect */
/* Reset old hidden state */
.reviews-hero__phrase {
    opacity: 1;
    transform: none
}

.reviews-hero__phrase.is-active {
    background: rgba(255, 255, 255, .18);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .25), 0 4px 16px -6px rgba(0, 0, 0, .65);
    color: #fff
}

.reviews-hero__phrase:not(.is-active) {
    opacity: .48;
    filter: grayscale(.35) blur(.2px);
    background: rgba(255, 255, 255, .05);
    color: #d3d3d3
}

.reviews-hero__phrase:not(.is-active):before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(145deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, 0));
    pointer-events: none
}

.reviews-hero__phrase {
    transition: opacity .65s ease, background .65s ease, filter .65s ease, box-shadow .65s ease, color .65s ease
}

@media (prefers-reduced-motion:reduce) {

    .cta-btn:before,
    .cta-btn:after,
    .reviews-hero__phrase {
        transition: none !important
    }
}

/* === End Reviews Hero Video Background & Unified CTA Enhancements === */
/* === Video Stories (friendlier playlist player) === */
.video-stories {
    position: relative;
    background: #f8f9fa;
    color: #333 !important;
    isolation: isolate;
}

.video-stories__layout {
    display: grid;
    grid-template-columns: 1.9fr 1.1fr; /* player left, sidebar right */
    grid-template-areas: 'player sidebar';
    gap: 24px;
    margin-top: 34px;
}

.video-stories__player {
    background: #ffffff;
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 30px -12px rgba(0,0,0,.12);
}

.player-aspect {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9 */
    background: #f5f5f5;
}

.player-aspect iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: none; /* shown when loaded */
}

.player-fallback {
    position: absolute;
    inset: 0;
}

.player-thumb {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    filter: brightness(.9);
}

.player-play {
    position: absolute;
    left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: 72px; height: 72px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.55);
    background: rgba(255,255,255,.1);
    color: #fff;
    display: grid; place-items: center;
    font-size: 22px;
    transition: transform .2s ease, background .3s ease, box-shadow .4s ease, border-color .3s ease;
}
.player-play:hover { transform: translate(-50%, -50%) scale(1.04); background: rgba(255,255,255,.16); box-shadow: 0 8px 22px -10px rgba(0,0,0,.7) }
.player-play:active { transform: translate(-50%, -50%) scale(.97) }
.player-play:focus-visible { outline: 2px solid #fff; outline-offset: 3px }

.player-meta { padding: 18px 18px 20px; border-top: 1px solid rgba(0,0,0,.08) }
.player-title { margin: 0 0 6px; font-size: 20px; font-weight: 600; color: #222 }
.player-desc { margin: 0 0 10px; color: #666; font-size: 14px }
.player-tags { display:flex; flex-wrap:wrap; gap:8px; margin: 0 0 12px; padding: 0; list-style: none }
.player-tags li { padding: 4px 10px; font-size: 12px; border: 1px solid rgba(0,0,0,.12); border-radius: 999px; color: #555 }
.player-controls { display:flex; gap: 10px }
.vs-btn {
    --btn-bg1: #ffffff;
    --btn-bg2: #dcdcdc;
    --btn-text: #0f1113;
    --btn-border: rgba(255,255,255,.85);
    display:inline-flex; align-items:center; gap:10px;
    padding:12px 16px; font-size:13px; letter-spacing:.4px; font-weight:600;
    color: var(--btn-text);
    background: linear-gradient(135deg, var(--btn-bg1), var(--btn-bg2));
    border:1px solid var(--btn-border);
    border-radius: 999px;
    box-shadow: 0 8px 22px -12px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.35);
    transition: transform .15s ease, box-shadow .35s ease, background .35s ease, border-color .35s ease, color .35s ease;
}
.vs-btn i { display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:999px; background: rgba(0,0,0,.08); color: inherit; box-shadow: inset 0 1px 0 rgba(255,255,255,.35) }
.vs-btn span { position: relative; top: 0.5px }
.vs-btn:hover {
    background: linear-gradient(135deg, #ffffff, #e9e9e9);
    box-shadow: 0 12px 30px -12px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.4);
}
.vs-btn:active { transform: translateY(1px) }
.vs-btn:focus-visible { outline:2px solid #fff; outline-offset:2px }

/* Dark-theme variant for hover/active on dark background */
.video-stories .vs-btn {
    --btn-bg1: #ffffff;
    --btn-bg2: #d9dde0;
    --btn-text: #0e1114;
    --btn-border: #ffffff;
}

/* Compact spacing on small screens */
@media (max-width: 575px){
    .vs-btn { padding:10px 14px; font-size:12px }
}

/* === Prev/Next buttons: hero-style solid + outline variants (APPENDED) === */
.player-controls { gap: 12px; flex-wrap: wrap }
.vs-btn {
    border-radius: 6px;
    padding: 12px 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
    box-shadow: 0 10px 26px -14px rgba(0,0,0,.55);
}
.vs-btn i { background: none; box-shadow: none; width: auto; height: auto; font-size: 14px; opacity: .9 }
#vsPrev i { margin-right: 8px }
#vsNext i { margin-left: 8px }

/* Outline (Prev) */
#vsPrev.vs-btn {
    background: transparent;
    color: #333;
    border: 1px solid rgba(0,0,0,.38);
}
#vsPrev.vs-btn:hover { background: rgba(0,0,0,.06); border-color: rgba(0,0,0,.6) }
#vsPrev.vs-btn:focus-visible { outline: 2px solid #333; outline-offset: 2px }

/* Solid (Next) */
#vsNext.vs-btn {
    background: transparent;
    color: #333;
    border: 1px solid rgba(0,0,0,.38);
}
#vsNext.vs-btn:hover { background: rgba(0,0,0,.06); border-color: rgba(0,0,0,.6) }
#vsNext.vs-btn:focus-visible { outline: 2px solid #333; outline-offset: 2px }
/* === End Prev/Next buttons hero-style === */

.video-stories__sidebar { display:flex; flex-direction: column; gap: 14px; grid-area: sidebar }
.video-stories__player { grid-area: player }
.video-stories__details { background:#ffffff; border: 1px solid rgba(0,0,0,.08); border-radius: 12px; padding: 14px }
.video-stories__filters { background:#ffffff; border: 1px solid rgba(0,0,0,.08); border-radius: 12px; padding: 14px }
.vs-label { display:block; font-size:12px; letter-spacing:1px; text-transform: uppercase; color: #555; margin: 0 0 6px }
.vs-search { width: 100% }
.vs-search input { width:100%; background: #f8f9fa; border:1px solid rgba(0,0,0,.18); color:#333; border-radius:8px; padding:10px 12px; font-size:14px }
.vs-search input::placeholder { color:#888 }
.vs-chips { display:flex; flex-wrap: wrap; gap:8px; margin-top: 10px }
.vs-chip { padding:6px 10px; border-radius:999px; background: rgba(0,0,0,.06); border:1px solid rgba(0,0,0,.16); color:#555; font-size:12px; cursor:pointer }
.vs-chip[aria-selected="true"] { background:#333; color:#ffffff; border-color:#333 }

.video-stories__playlist { list-style: none; margin:0; padding:0; display:flex; flex-direction: column; gap: 10px; max-height: 520px; overflow-y: auto }
.playlist-item { display:flex; gap:12px; padding:10px; border-radius:10px; background:#ffffff; border:1px solid rgba(0,0,0,.08); cursor:pointer; transition: background .25s, border-color .25s; width: 100%; flex: 0 0 auto }
.playlist-item[aria-selected="true"], .playlist-item:hover { background:#f8f9fa; border-color: rgba(0,0,0,.22) }
.playlist-thumb { width: 120px; height: 70px; border-radius:8px; overflow:hidden; flex: 0 0 auto }
.playlist-thumb img { width:100%; height:100%; object-fit: cover; display:block; filter: saturate(1.02) contrast(1.02) }
.playlist-meta { display:flex; flex-direction: column; justify-content: center }
.playlist-title { margin: 0 0 4px; font-size:14px; font-weight:600; color:#222 }
.playlist-sub { margin: 0; font-size:12px; color:#666 }

@media (max-width: 991px){
    .video-stories__layout{ grid-template-columns: 1fr; grid-template-areas: 'player' 'sidebar' }
    .video-stories__playlist{ max-height: none; overflow-y: visible }
}

/* Horizontal dock under the player */
.video-stories__dock { margin-top: 14px; background: #ffffff; border: 1px solid rgba(0,0,0,.08); border-radius: 12px; padding: 10px }
.video-stories__dock .video-stories__playlist { flex-direction: row; gap: 12px; overflow-x: auto; overflow-y: hidden; max-height: none; scroll-snap-type: x proximity; padding-bottom: 6px }
.video-stories__dock .playlist-item { flex-direction: column; width: 220px; scroll-snap-align: start }
.video-stories__dock .playlist-thumb { width: 100%; height: 120px }
.video-stories__dock .playlist-meta { align-items: flex-start }
/* Drag scroll cues */
.video-stories__dock .video-stories__playlist { cursor: grab }
.video-stories__dock .video-stories__playlist.is-dragging { cursor: grabbing; user-select: none; -webkit-user-select: none; -ms-user-select: none }

@media (prefers-reduced-motion: reduce){
  .vs-btn, .playlist-item, .player-play { transition: none !important }
}
/* === End Video Stories === */
/* === Video Stories Micro-interactions (animations) === */
/* General press tap animation */
.video-stories .vs-press { animation: vsPress .28s ease-out }
@keyframes vsPress { 0%{ transform: scale(1) } 50%{ transform: scale(.96) } 100%{ transform: scale(1) } }

/* Play ripple on the circular play button */
.video-stories .player-play.vs-ripple::after{
    content:""; position:absolute; inset:0; margin:auto; width:100%; height:100%; border-radius:50%;
    background: radial-gradient(circle, rgba(255,255,255,.35) 0%, rgba(255,255,255,.15) 28%, rgba(255,255,255,0) 60%);
    animation: vsRipple .6s ease-out forwards; pointer-events:none; filter: blur(.5px);
}
@keyframes vsRipple { from{ transform:scale(1); opacity:.8 } to{ transform:scale(1.8); opacity:0 } }

/* Frame pop/glow when video switches/plays */
.video-stories .vs-frame-pop { animation: vsFramePop .5s cubic-bezier(.19,1,.22,1) }
@keyframes vsFramePop { 0%{ box-shadow:0 0 0 0 rgba(255,255,255,.0) } 40%{ box-shadow:0 12px 40px -16px rgba(0,0,0,.8), 0 0 0 3px rgba(255,255,255,.18) } 100%{ box-shadow:0 10px 30px -12px rgba(0,0,0,.65), 0 0 0 0 rgba(255,255,255,0) } }

/* Fade the iframe in when it becomes visible */
.video-stories .vs-fade-in { animation: vsFadeIn .4s ease-out forwards }
@keyframes vsFadeIn { from{ opacity:0; transform: scale(.995) } to{ opacity:1; transform: scale(1) } }

/* Playlist: selected tap pulse */
.video-stories .playlist-item.vs-activate { animation: vsActivate .42s ease-out }
@keyframes vsActivate { 0%{ transform: translateY(0) } 35%{ transform: translateY(-3px) } 100%{ transform: translateY(0) } }

/* Playlist: rebuild/enter animation with per-item stagger via --i */
.video-stories .playlist-item.vs-enter{ opacity:0; transform: translateY(6px); animation: vsItemIn .38s ease-out forwards; animation-delay: calc(var(--i, 0) * 50ms) }
@keyframes vsItemIn { to{ opacity:1; transform: translateY(0) } }

/* Swipe hint on prev/next */
.video-stories .video-stories__playlist.vs-swipe-left{ animation: vsSwipeLeft .28s ease-out }
.video-stories .video-stories__playlist.vs-swipe-right{ animation: vsSwipeRight .28s ease-out }
@keyframes vsSwipeLeft { 0%{ transform: translateX(0) } 50%{ transform: translateX(-6px) } 100%{ transform: translateX(0) } }
@keyframes vsSwipeRight{ 0%{ transform: translateX(0) } 50%{ transform: translateX(6px) } 100%{ transform: translateX(0) } }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
    .video-stories .vs-press,
    .video-stories .player-play.vs-ripple::after,
    .video-stories .vs-frame-pop,
    .video-stories .vs-fade-in,
    .video-stories .playlist-item.vs-activate,
    .video-stories .playlist-item.vs-enter,
    .video-stories .video-stories__playlist.vs-swipe-left,
    .video-stories .video-stories__playlist.vs-swipe-right{ animation: none !important }
}
/* === End Video Stories Micro-interactions === */

/* === Custom Video Modal Styling === */
/* Smoother modal animations */
.mfp-fade.mfp-bg {
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.mfp-fade.mfp-bg.mfp-ready {
    opacity: 0.8;
}
.mfp-fade.mfp-bg.mfp-removing {
    opacity: 0;
}

.mfp-fade.mfp-wrap .mfp-content {
    opacity: 0;
    transform: scale(0.85) translateY(20px);
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.mfp-fade.mfp-wrap.mfp-ready .mfp-content {
    opacity: 1;
    transform: scale(1) translateY(0);
}
.mfp-fade.mfp-wrap.mfp-removing .mfp-content {
    opacity: 0;
    transform: scale(0.9) translateY(-10px);
}

/* Enhanced close button styling */
.mfp-close {
    width: 44px !important;
    height: 44px !important;
    line-height: 44px !important;
    position: absolute !important;
    right: -44px !important;
    top: -44px !important;
    text-align: center !important;
    padding: 0 !important;
    color: #ffffff !important;
    font-style: normal !important;
    font-size: 28px !important;
    font-family: Arial, Baskerville, monospace !important;
    background: rgba(0, 0, 0, 0.6) !important;
    border-radius: 50% !important;
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
    cursor: pointer !important;
    opacity: 0.8 !important;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
}

.mfp-close:hover,
.mfp-close:focus {
    opacity: 1 !important;
    background: rgba(0, 0, 0, 0.8) !important;
    border-color: rgba(255, 255, 255, 0.6) !important;
    transform: scale(1.1) !important;
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.4) !important;
}

.mfp-close:active {
    transform: scale(0.95) !important;
    transition-duration: 0.1s !important;
}

/* Close button positioning adjustments for mobile */
@media screen and (max-width: 800px) {
    .mfp-close {
        right: -10px !important;
        top: -10px !important;
        width: 40px !important;
        height: 40px !important;
        line-height: 40px !important;
        font-size: 24px !important;
    }
}

/* Enhanced iframe container styling */
.mfp-iframe-holder {
    padding: 40px 40px 40px 40px !important;
}

.mfp-iframe-holder .mfp-content {
    line-height: 0 !important;
    width: 100% !important;
    max-width: 900px !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5) !important;
    background: #000 !important;
}

.mfp-iframe-scaler {
    width: 100% !important;
    height: 0 !important;
    overflow: hidden !important;
    padding-top: 56.25% !important; /* 16:9 aspect ratio */
    position: relative !important;
}

.mfp-iframe-scaler iframe {
    position: absolute !important;
    display: block !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.6) !important;
    background: #000 !important;
}

/* Mobile responsive adjustments */
@media screen and (max-width: 600px) {
    .mfp-iframe-holder {
        padding: 20px !important;
    }
    
    .mfp-iframe-holder .mfp-content {
        border-radius: 8px !important;
    }
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
    .mfp-fade.mfp-bg,
    .mfp-fade.mfp-wrap .mfp-content,
    .mfp-close {
        transition: none !important;
    }
    
    .mfp-close:hover,
    .mfp-close:focus,
    .mfp-close:active {
        transform: none !important;
    }
}
/* === End Custom Video Modal Styling === */

/* === Simple Reveal-on-Scroll (global) === */
.reveal {
    opacity: 0;
    transform: translateY(var(--ry, 16px));
    transition: opacity .6s ease, transform .6s ease;
    transition-delay: var(--rd, 0ms);
    will-change: opacity, transform;
}
.reveal.is-inview {
    opacity: 1;
    transform: none;
}
@media (prefers-reduced-motion: reduce){
    .reveal { opacity: 1; transform: none; transition: none !important }
}
/* === End Simple Reveal-on-Scroll === */
/* === Hero section reveal refinements === */
.reviews-dynamic-hero .hero-eyebrow.reveal { --ry: -10px }
.reviews-dynamic-hero .hero-title.reveal { --ry: 10px }
.reviews-dynamic-hero .hero-lead.reveal { --ry: 12px }
.reviews-dynamic-hero .hero-ctas .cta-btn.reveal { --ry: 8px }

/* Divider scales in rather than sliding */
.hero-divider.reveal {
    transform-origin: center;
    transform: scaleX(.25);
    opacity: 0;
}
.hero-divider.reveal.is-inview {
    transform: scaleX(1);
    opacity: 1;
}

/* Slide quote/meta gentle lift */
.hero-slide__quote.reveal { --ry: 10px }
.hero-slide__meta.reveal { --ry: 8px }
/* === End Hero section reveal refinements === */
/* === Site Loader Overlay === */
.site-loader{ position:fixed; inset:0; background: #0b0b0f; z-index:9999; display:grid; place-items:center; opacity:1; transition: opacity .55s ease, visibility .55s ease; visibility:visible }
.site-loader.is-hidden{ opacity:0; visibility:hidden }
.site-loader__inner{ position:relative; width:100vw; height:100vh; display: grid; place-items: center }
.site-loader__video-wrap{ position:absolute; inset:-5vh -5vw; overflow:hidden; border-radius: 0; box-shadow: none }
.site-loader__video{ width:100%; height:100%; object-fit:cover; filter: brightness(.92) contrast(1.02) saturate(1.05) }
.site-loader__spinner{ position:absolute; inset:0; display:flex; gap:8px; justify-content:center; align-items:center; opacity:.85; transition: opacity .3s ease }
.site-loader__spinner.is-hidden{ opacity:0 }
.site-loader__spinner span{ width:8px; height:8px; background:#fff; border-radius:50%; animation: loaderBounce 1s infinite ease-in-out }
.site-loader__spinner span:nth-child(2){ animation-delay: .15s }
.site-loader__spinner span:nth-child(3){ animation-delay: .3s }
@keyframes loaderBounce{ 0%, 80%, 100%{ transform: scale(0) } 40%{ transform: scale(1) } }
/* skip button removed */
@media (max-width:575px){ .site-loader__inner{ width: 96vw } .site-loader__spinner{ bottom: 12px } }
@media (prefers-reduced-motion: reduce){ .site-loader{ transition: none !important } }
/* === End Site Loader Overlay === */
::-moz-selection {
    background-color: #000000;
    color: #fff
}

::selection {
    background-color: #000000;
    color: #fff
}

::-webkit-input-placeholder {
    color: #777777;
    font-weight: 300
}

:-moz-placeholder {
    color: #777777;
    opacity: 1;
    font-weight: 300
}

::-moz-placeholder {
    color: #777777;
    opacity: 1;
    font-weight: 300
}

:-ms-input-placeholder {
    color: #777777;
    font-weight: 300
}

::-ms-input-placeholder {
    color: #777777;
    font-weight: 300
}

body {
    color: #777;
    font-family: "Poppins", sans-serif;
    font-size: 14px;
    font-weight: 300;
    line-height: 1.625em;
    position: relative;
    overflow-x: hidden;
}

ol,
ul {
    margin: 0;
    padding: 0;
    list-style: none
}

select {
    display: block
}

figure {
    margin: 0
}

a {
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s
}

iframe {
    border: 0
}

a,
a:focus,
a:hover {
    text-decoration: none;
    outline: 0
}

.banner-area,
.banner-area *,
.banner-area::before,
.banner-area::after,
.banner-area *::before,
.banner-area *::after {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
}

/* stacking: ensure slides are behind content but active slide sits above overlays */
.banner-slides {
    position: absolute;
    z-index: 0;
}

.banner-slide {
    z-index: 1;
    pointer-events: none;
}

.banner-slide.active {
    z-index: 5 !important;
    pointer-events: auto;
}

/* make loader and social sit above slides */
.banner-loader-wrap,
.banner-social-wrap {
    z-index: 10 !important;
    pointer-events: auto;
}

.banner-about-wrap {
    z-index: 10 !important;
    pointer-events: auto;
}

/* ensure overlays and mobile nav layering w/o clipping header (mobile fix) */
.overlay.overlay-bg { z-index: 2 !important; }
#mobile-nav { z-index: 2000 !important; }
#mobile-body-overly { z-index: 1990 !important; }
/* Keep header above content and overlays; promote to own layer to avoid iOS flicker */
header, #header {
    z-index: 1200 !important;
    /* Avoid transforms on fixed header to prevent mobile cropping/jitter */
    -webkit-transform: none !important;
    transform: none !important;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    will-change: auto;
    /* Respect iOS safe area at the top */
    padding-top: constant(safe-area-inset-top, 0); /* legacy iOS */
    padding-top: env(safe-area-inset-top, 0);
}

/* catch inline debug rules that might remain */
[style*="outline"],
[style*="box-shadow"] {
    outline: none !important;
    box-shadow: none !important;
}

/* ================ Banner Social ================ */
.banner-social-wrap {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 12;
    bottom: 40px;
    transform: translateY(0);
    pointer-events: none;
}

/* ================ Banner About ================ */
.banner-about-wrap {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 12;
    bottom: 40px;
    transform: translateY(0);
    pointer-events: none;
}

/* -------------------------------------------------------------------------
     Full-screen video hero styles for About page
-------------------------------------------------------------------------- */
.video-hero {
    position: relative;
    width: 100%;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #06070c;
}

.video-hero {
    transform: translateZ(0);
}

/* Prevent any hero descendants from causing horizontal overflow */
.video-hero *,
.video-hero *::before,
.video-hero *::after{
    max-width: 100%;
}

.video-hero__media {
    position: absolute;
    inset: -1px 0 0 0;
    width: 100%;
    height: calc(100% + 1px);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    z-index: 1;
    filter: saturate(0.98) contrast(1.02);
}

.video-hero__overlay {
    position: absolute;
    inset: -1px 0 0 0;
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.62) 0%,
        rgba(0, 0, 0, 0.78) 72%
    );
    z-index: 2;
}

/* Keep About hero title block perfectly centered */
.video-hero .banner-content {
    width: min(92vw, 1100px);
    margin-left: auto;
    margin-right: auto;
    margin-top: clamp(200px, 6vh, 96px);
    text-align: center;
    align-items: center;
}

.video-hero .banner-content h1 {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.video-hero .about-hero-title-line {
    display: block;
    white-space: nowrap;
}

@media (max-width: 767.98px) {
    .video-hero .about-hero-title-line {
        white-space: normal;
    }
}

/* About hero: richer staged entrance for title and supporting elements */
.video-hero .banner-content h1.banner-title-animate .word {
    opacity: 0;
    transform: translateY(24px) scale(0.985);
    filter: blur(3px);
}

.video-hero .banner-content h1.banner-title-animate .word.in {
    animation: aboutHeroWordIn 950ms cubic-bezier(0.2, 0.9, 0.2, 1) forwards;
}

.video-hero .banner-about .text-white {
    opacity: 0;
    transform: translateY(16px);
    animation: aboutHeroMetaIn 760ms cubic-bezier(0.2, 0.9, 0.2, 1) 420ms forwards;
}

.video-hero .banner-about .scroll-arrow {
    opacity: 0;
    transform: translateY(12px);
    animation:
        aboutHeroMetaIn 760ms cubic-bezier(0.2, 0.9, 0.2, 1) 620ms forwards,
        scrollArrowFloat 2.1s ease-in-out 1.55s infinite;
}

@keyframes aboutHeroWordIn {
    from {
        opacity: 0;
        transform: translateY(24px) scale(0.985);
        filter: blur(3px);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

@keyframes aboutHeroMetaIn {
    from {
        opacity: 0;
        transform: translateY(16px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .video-hero .banner-content h1.banner-title-animate .word,
    .video-hero .banner-about .text-white,
    .video-hero .banner-about .scroll-arrow {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        animation: none !important;
    }
}

.video-hero__inner {
    position: relative;
    z-index: 3;
    padding: 60px 0;
}

@media (max-width: 576px) {
    .video-hero__media {
        background-image: url('../img/projects/featured/about-mobile.jpg') !important;
        background-position: center center;
        background-size: cover;
    }

    .banner-hero__title {
        font-size: 26px;
    }

    .banner-hero__subtitle {
        font-size: 15px;
    }
}

/* Keep hero content readable on small screens */
@media (max-width: 992px) {
    .video-hero__inner {
        padding: 40px 0;
    }

    .banner-hero__title {
        font-size: 34px;
    }
}

@media (max-width: 576px) {
    .banner-hero__title {
        font-size: 26px;
    }

    .banner-hero__subtitle {
        font-size: 15px;
    }

    .video-hero__media {
        height: 140%;
    }
}

/* Reduce motion for users who requested reduced motion */
@media (prefers-reduced-motion: reduce) {
    .video-hero__media {
        transform: none;
    }
}

.banner-social {
    color: #fff;
    pointer-events: auto;
    display: inline-block;
    padding: 10px 18px;
    border-radius: 40px;
    margin: 0 auto;
    z-index: 13;
}

.banner-social p {
    margin: 0 0 8px;
    font-weight: 600;
    letter-spacing: 1px;
    color: #fff;
    text-shadow: 0 1px 2px
}

.banner-social .social-icons {
    display: inline-block;
}

.banner-about {
    color: #fff;
    pointer-events: auto;
    display: inline-block;
    padding: 10px 18px;
    border-radius: 40px;
    margin: 0 auto;
    z-index: 13;
}

.banner-about p {
    margin: 0 0 8px;
    font-weight: 600;
    letter-spacing: 1px;
    color: #fff;
    text-shadow: 0 1px 2px
}

.banner-about {
    display: inline-block;
}

.contact-links {
    display: inline-block;
    color: #fff;
    margin: 0 10px;
    font-size: 14px;
    font-weight: 400;
    text-decoration: none;
    transition: all .22s ease;
}

.contact-links:hover {
    color: #fff;
    text-decoration: underline;
    transform: translateY(-2px);
}

.banner-social .social-icon {
    color: #fff;
    display: inline-block;
    margin: 0 8px;
    font-size: 16px;
    width: 44px;
    height: 44px;
    line-height: 44px;
    text-align: center;
    border-radius: 50%;
    transition: all .22s ease;
}

.banner-social .social-icon:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    text-decoration: none;
}

.banner-about .social-icon {
    color: #fff;
    display: inline-block;
    margin: 0 8px;
    font-size: 16px;
    width: 44px;
    height: 44px;
    line-height: 44px;
    text-align: center;
    border-radius: 50%;
    transition: all .22s ease;
}

.banner-about .social-icon:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    text-decoration: none;
}

/* Make sure icons are visible on darker slides */
.banner-area .overlay.overlay-bg {
    z-index: 2;
}

.banner-area .banner-slides,
.banner-area .container {
    position: relative;
    z-index: 3;
}

/* Safety: avoid layout causing page width > viewport — mobile only */
@media (min-width: 320px) and (max-width: 750px) {
    .container,
    .row,
    img,
    video,
    section,
    .site-footer,
    header#header {
            max-width: 100vw;
    }
}

/* Projects page: prevent horizontal scroll on mobile */
@media (max-width: 767.98px){
    /* neutralize Bootstrap row negative margins inside projects page sections */
    .projects-slideshow-hero .row,
    .case-studies .row,
    .brands-area .row,
    .footer-legal .row,
    .footer-main .row{
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    /* ensure containers don’t exceed viewport */
    .projects-slideshow-hero,
    .projects-slideshow-hero .psh-stage,
    .projects-slideshow-hero .psh-slides,
    .projects-slideshow-hero .psh-slide,
    .projects-slideshow-hero .psh-sidebar,
    .projects-slideshow-hero .psh-nav,
    .case-studies,
    .brands-area,
    .site-footer{
        max-width: 100vw;
        overflow-x: hidden;
    }
    /* grid clamp + fix min-width for flex/grid items */
    .cs-grid{ max-width: 100vw; overflow-x: hidden }
    .cs-grid > *{ min-width: 0 }
    /* brand carousel rows sometimes use no-gutters; clamp explicitly */
    .active-brand-carusel{ max-width: 100vw; overflow-x: hidden }
}

    /* About page: prevent horizontal scroll on mobile */
    @media (max-width: 767.98px){
        /* neutralize Bootstrap row negative margins inside about page sections */
        .video-hero .row,
        .banner-about-wrap .row,
        .feature-area .row,
        .about-company .row,
        .team-area .row,
        .join-team-area .row,
        .footer-legal .row,
        .footer-main .row{
            margin-left: 0 !important;
            margin-right: 0 !important;
        }
        /* clamp major wrappers to viewport and hide overflow */
        .video-hero,
        .banner-about-wrap,
        .feature-area,
        .about-company,
        .team-area,
        .join-team-area,
        .site-footer{
            max-width: 100vw;
            overflow-x: hidden;
        }
        /* ensure children don’t force overflow */
        .video-hero *,
        .banner-about-wrap *,
        .about-company__inner,
        .team-inner{
            min-width: 0;
        }
    }

/* Banner overlay word-by-word animation */
.overlay-content p {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.6px;
    display: inline-block;
}

.overlay-words {
    display: inline-block;
    white-space: nowrap;
}

.overlay-word {
    display: inline-block;
    opacity: 0;
    transform: translateY(8px) scale(0.98);
    transition: transform 420ms cubic-bezier(.2, .9, .2, 1), opacity 420ms ease;
    will-change: transform, opacity;
    margin-right: 6px;
}

.overlay-word.in {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Banner tag moved into the centered banner content */
.banner-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(0.5rem, 1.6vw, 1rem);
}

#bannerOverlay,
.banner-tag {
    font-weight: 600;
    letter-spacing: 0.6px;
    color: #fff;
    font-size: clamp(14px, 1.3vw, 18px);
    display: inline-block;
    text-align: center;
    margin: 0;
    z-index: 4;
    transform: translateY(-6px);
}

.banner-content h1 {
    color: #fff;
    text-align: center;
    line-height: 1.05;
}

@media (max-width: 575px) {
    #bannerOverlay,
    .banner-tag { font-size: 14px; margin-bottom: 8px; transform: translateY(-4px); }
}

@media (min-width: 992px) {
    #bannerOverlay,
    .banner-tag { transform: translateY(-18px); }
}

/* small responsive tweak */
@media (max-width: 575px) {
    .overlay-content p {
        font-size: 14px;
    }
}

/* Responsive tweaks: rise further on smaller screens */
@media (max-width: 991px) {
    .banner-social-wrap {
        bottom: 30px;
    }

    .banner-social .social-icon {
        width: 40px;
        height: 40px;
        line-height: 40px;
    }
}

@media (max-width: 575px) {
    .banner-social-wrap {
        bottom: 28px;
    }

    .banner-social p {
        font-size: 13px;
    }

    .banner-social .social-icon {
        width: 36px;
        height: 36px;
        line-height: 36px;
        font-size: 14px;
    }

    .banner-social {
        padding: 8px 14px;
    }
}

.btn.active.focus,
.btn.active:focus,
.btn.focus,
.btn.focus:active,
.btn:active:focus,
.btn:focus {
    text-decoration: none;
    outline: 0
}

.card-panel {
    margin: 0;
    padding: 60px
}

.btn i,
.btn-large i,
.btn-floating i,
.btn-large i,
.btn-flat i {
    font-size: 1em;
    line-height: inherit
}

.gray-bg {
    background: #f9f9ff
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Poppins", sans-serif;
    color: #222;
    line-height: 1.2em !important;
    margin-bottom: 0;
    margin-top: 0;
    font-weight: 600
}

.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    margin-bottom: 0;
    margin-top: 0;
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    color: #222
}

h1,
.h1 {
    font-size: 36px
}

h2,
.h2 {
    font-size: 30px
}

h3,
.h3 {
    font-size: 24px
}

h4,
.h4 {
    font-size: 18px
}

h5,
.h5 {
    font-size: 16px
}

h6,
.h6 {
    font-size: 14px;
    color: #222
}

td,
th {
    border-radius: 0px
}

.clear::before,
.clear::after {
    content: " ";
    display: table
}

.clear::after {
    clear: both
}

.fz-11 {
    font-size: 11px
}

.fz-12 {
    font-size: 12px
}

.fz-13 {
    font-size: 13px
}

.fz-14 {
    font-size: 14px
}

.fz-15 {
    font-size: 15px
}

.fz-16 {
    font-size: 16px
}

.fz-18 {
    font-size: 18px
}

.fz-30 {
    font-size: 30px
}

.fz-48 {
    font-size: 48px !important
}

.fw100 {
    font-weight: 100
}

.fw300 {
    font-weight: 300
}

.fw400 {
    font-weight: 400 !important
}

.fw500 {
    font-weight: 500
}

.f700 {
    font-weight: 700
}

.fsi {
    font-style: italic
}

.mt-10 {
    margin-top: 10px
}

.mt-15 {
    margin-top: 15px
}

.mt-20 {
    margin-top: 20px
}

.mt-25 {
    margin-top: 25px
}

.mt-30 {
    margin-top: 30px
}

.mt-35 {
    margin-top: 35px
}

.mt-40 {
    margin-top: 40px
}

.mt-50 {
    margin-top: 50px
}

.mt-60 {
    margin-top: 60px
}

.mt-70 {
    margin-top: 70px
}

.mt-80 {
    margin-top: 80px
}

.mt-100 {
    margin-top: 100px
}

.mt-120 {
    margin-top: 120px
}

.mt-150 {
    margin-top: 150px
}

.ml-0 {
    margin-left: 0 !important
}

.ml-5 {
    margin-left: 5px !important
}

.ml-10 {
    margin-left: 10px
}

.ml-15 {
    margin-left: 15px
}

.ml-20 {
    margin-left: 20px
}

.ml-30 {
    margin-left: 30px
}

.ml-50 {
    margin-left: 50px
}

.mr-0 {
    margin-right: 0 !important
}

.mr-5 {
    margin-right: 5px !important
}

.mr-15 {
    margin-right: 15px
}

.mr-10 {
    margin-right: 10px
}

.mr-20 {
    margin-right: 20px
}

.mr-30 {
    margin-right: 30px
}

.mr-50 {
    margin-right: 50px
}

.mb-0 {
    margin-bottom: 0px
}

.mb-0-i {
    margin-bottom: 0px !important
}

.mb-5 {
    margin-bottom: 5px
}

.mb-10 {
    margin-bottom: 10px
}

.mb-15 {
    margin-bottom: 15px
}

.mb-20 {
    margin-bottom: 20px
}

.mb-25 {
    margin-bottom: 25px
}

.mb-30 {
    margin-bottom: 30px
}

.mb-40 {
    margin-bottom: 40px
}

.mb-50 {
    margin-bottom: 50px
}

.mb-60 {
    margin-bottom: 60px
}

.mb-70 {
    margin-bottom: 70px
}

.mb-80 {
    margin-bottom: 80px
}

.mb-90 {
    margin-bottom: 90px
}

.mb-100 {
    margin-bottom: 100px
}

.pt-0 {
    padding-top: 0px
}

.pt-10 {
    padding-top: 10px
}

.pt-15 {
    padding-top: 15px
}

.pt-20 {
    padding-top: 20px
}

.pt-25 {
    padding-top: 25px
}

.pt-30 {
    padding-top: 30px
}

.pt-40 {
    padding-top: 40px
}

.pt-50 {
    padding-top: 50px
}

.pt-60 {
    padding-top: 60px
}

.pt-70 {
    padding-top: 70px
}

.pt-80 {
    padding-top: 80px
}

.pt-90 {
    padding-top: 90px
}

.pt-100 {
    padding-top: 100px
}

.pt-120 {
    padding-top: 120px !important
}

/* Mobile tweak: header becomes taller / overlays first section, so reduce or adjust
   block spacing to keep visual rhythm. Adjust as needed (set to 90px here). */
@media (min-width: 430px) and (max-width: 768px) {
    .pt-120{ padding-top:120px !important; }
}

.pt-150 {
    padding-top: 150px
}

.pt-170 {
    padding-top: 170px
}

.pb-0 {
    padding-bottom: 0px
}

.pb-10 {
    padding-bottom: 10px
}

.pb-15 {
    padding-bottom: 15px
}

.pb-20 {
    padding-bottom: 20px
}

.pb-25 {
    padding-bottom: 25px
}

.pb-30 {
    padding-bottom: 30px
}

.pb-40 {
    padding-bottom: 40px
}

.pb-50 {
    padding-bottom: 50px
}

.pb-60 {
    padding-bottom: 60px
}

.pb-70 {
    padding-bottom: 70px
}

.pb-80 {
    padding-bottom: 80px
}

.pb-90 {
    padding-bottom: 90px
}

.pb-100 {
    padding-bottom: 100px
}

.pb-120 {
    padding-bottom: 120px
}

.pb-150 {
    padding-bottom: 150px
}

.pr-30 {
    padding-right: 30px
}

.pl-30 {
    padding-left: 30px
}

.pl-90 {
    padding-left: 90px
}

.p-40 {
    padding: 40px
}

.float-left {
    float: left
}

.float-right {
    float: right
}

.text-italic {
    font-style: italic
}

.text-white {
    color: #fff
}

.text-black {
    color: #000
}

.transition {
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s
}

.section-full {
    padding: 100px 0
}

.section-half {
    padding: 75px 0
}

.text-center {
    text-align: center
}

.text-left {
    text-align: left
}

.text-rigth {
    text-align: right
}

.flex {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex
}

.inline-flex {
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: -moz-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex
}

.flex-grow {
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -moz-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1
}

.flex-wrap {
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.flex-left {
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    -webkit-justify-content: flex-start;
    -moz-justify-content: flex-start;
    justify-content: flex-start
}

.flex-middle {
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    -moz-align-items: center;
    align-items: center
}

.flex-right {
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    -webkit-justify-content: flex-end;
    -moz-justify-content: flex-end;
    justify-content: flex-end
}

.flex-top {
    -webkit-align-self: flex-start;
    -moz-align-self: flex-start;
    -ms-flex-item-align: start;
    align-self: flex-start
}

.flex-center {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    justify-content: center
}

.flex-bottom {
    -webkit-align-self: flex-end;
    -moz-align-self: flex-end;
    -ms-flex-item-align: end;
    align-self: flex-end
}

.space-between {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    -moz-justify-content: space-between;
    justify-content: space-between
}

.space-around {
    -ms-flex-pack: distribute;
    -webkit-justify-content: space-around;
    -moz-justify-content: space-around;
    justify-content: space-around
}

.flex-column {
    -webkit-box-direction: normal;
    -webkit-box-orient: vertical;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column
}

.flex-cell {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -moz-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1
}

.display-table {
    display: table
}

.light {
    color: #fff
}

.dark {
    color: #222
}

.relative {
    position: relative
}

.overflow-hidden {
    overflow: hidden
}

.overlay {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0
}

.container.fullwidth {
    width: 100%
}

.container.no-padding {
    padding-left: 0;
    padding-right: 0
}

.no-padding {
    padding: 0
}

.section-bg {
    background: #f9fafc
}

@media (max-width: 767px) {
    .no-flex-xs {
        display: block !important
    }
}

.row.no-margin {
    margin-left: 0;
    margin-right: 0
}

.sample-text-area {
    background: #fff;
    padding: 100px 0 70px 0
}

.sample-text {
    margin-bottom: 0
}

.text-heading {
    margin-bottom: 30px;
    font-size: 24px
}

.typo-list {
    margin-bottom: 10px
}

@media (max-width: 767px) {
    .typo-sec {
        margin-bottom: 30px
    }
}

@media (max-width: 767px) {
    .element-wrap {
        margin-top: 30px
    }
}

b,
sup,
sub,
u,
del {
    color: #000000
}

h1 {
    font-size: 36px
}

h2 {
    font-size: 30px
}

h3 {
    font-size: 24px
}

h4 {
    font-size: 18px
}

h5 {
    font-size: 16px
}

h6 {
    font-size: 14px
}

h1,
h2,
h3,
h4,
h5,
h6 {
    line-height: 1.5em
}

.typography h1,
.typography h2,
.typography h3,
.typography h4,
.typography h5,
.typography h6 {
    color: #777
}

.button-area {
    background: #fff
}

.button-area .border-top-generic {
    padding: 70px 15px;
    border-top: 1px dotted #eee
}

.button-group-area .genric-btn {
    margin-right: 10px;
    margin-top: 10px
}

.button-group-area .genric-btn:last-child {
    margin-right: 0
}

.genric-btn {
    display: inline-block;
    outline: none;
    line-height: 40px;
    padding: 0 30px;
    font-size: .8em;
    text-align: center;
    text-decoration: none;
    font-weight: 500;
    cursor: pointer;
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s
}

.genric-btn:focus {
    outline: none
}

.genric-btn.e-large {
    padding: 0 40px;
    line-height: 50px
}

.genric-btn.large {
    line-height: 45px
}

.genric-btn.medium {
    line-height: 30px
}

.genric-btn.small {
    line-height: 25px
}

.genric-btn.radius {
    border-radius: 0px
}

.genric-btn.circle {
    border-radius: 0px
}

.genric-btn.arrow {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.genric-btn.arrow span {
    margin-left: 10px
}

.genric-btn.default {
    color: #222;
    background: #f9f9ff;
    border: 1px solid transparent
}

.genric-btn.default:hover {
    border: 1px solid #f9f9ff;
    background: #fff
}

.genric-btn.default-border {
    border: 1px solid #f9f9ff;
    background: #fff
}

.genric-btn.default-border:hover {
    color: #222;
    background: #f9f9ff;
    border: 1px solid transparent
}

.genric-btn.primary {
    color: #fff;
    background: #000000;
    border: 1px solid transparent
}

.genric-btn.primary:hover {
    color: #000000;
    border: 1px solid #000000;
    background: #fff
}

.genric-btn.primary-border {
    color: #000000;
    border: 1px solid #000000;
    background: #fff
}

.genric-btn.primary-border:hover {
    color: #fff;
    background: #000000;
    border: 1px solid transparent
}

.genric-btn.success {
    color: #fff;
    background: #4cd3e3;
    border: 1px solid transparent
}

.genric-btn.success:hover {
    color: #4cd3e3;
    border: 1px solid #4cd3e3;
    background: #fff
}

.genric-btn.success-border {
    color: #4cd3e3;
    border: 1px solid #4cd3e3;
    background: #fff
}

.genric-btn.success-border:hover {
    color: #fff;
    background: #4cd3e3;
    border: 1px solid transparent
}

.genric-btn.info {
    color: #fff;
    background: #38a4ff;
    border: 1px solid transparent
}

.genric-btn.info:hover {
    color: #38a4ff;
    border: 1px solid #38a4ff;
    background: #fff
}

.genric-btn.info-border {
    color: #38a4ff;
    border: 1px solid #38a4ff;
    background: #fff
}

.genric-btn.info-border:hover {
    color: #fff;
    background: #38a4ff;
    border: 1px solid transparent
}

.genric-btn.warning {
    color: #fff;
    background: #f4e700;
    border: 1px solid transparent
}

.genric-btn.warning:hover {
    color: #f4e700;
    border: 1px solid #f4e700;
    background: #fff
}

.genric-btn.warning-border {
    color: #f4e700;
    border: 1px solid #f4e700;
    background: #fff
}

.genric-btn.warning-border:hover {
    color: #fff;
    background: #f4e700;
    border: 1px solid transparent
}

.genric-btn.danger {
    color: #fff;
    background: #f44a40;
    border: 1px solid transparent
}

.genric-btn.danger:hover {
    color: #f44a40;
    border: 1px solid #f44a40;
    background: #fff
}

.genric-btn.danger-border {
    color: #f44a40;
    border: 1px solid #f44a40;
    background: #fff
}

.genric-btn.danger-border:hover {
    color: #fff;
    background: #f44a40;
    border: 1px solid transparent
}

.genric-btn.link {
    color: #222;
    background: #f9f9ff;
    text-decoration: underline;
    border: 1px solid transparent
}

.genric-btn.link:hover {
    color: #222;
    border: 1px solid #f9f9ff;
    background: #fff
}

.genric-btn.link-border {
    color: #222;
    border: 1px solid #f9f9ff;
    background: #fff;
    text-decoration: underline
}

.genric-btn.link-border:hover {
    color: #222;
    background: #f9f9ff;
    border: 1px solid transparent
}

.genric-btn.disable {
    color: #222, 0.3;
    background: #f9f9ff;
    border: 1px solid transparent;
    cursor: not-allowed
}

.generic-blockquote {
    padding: 30px 50px 30px 30px;
    background: #f9f9ff;
    border-left: 2px solid #000000
}

@media (max-width: 991px) {
    .progress-table-wrap {
        overflow-x: scroll
    }
}

.progress-table {
    background: #f9f9ff;
    padding: 15px 0px 30px 0px;
    min-width: 800px
}

.progress-table .serial {
    width: 11.83%;
    padding-left: 30px
}

.progress-table .country {
    width: 28.07%
}

.progress-table .visit {
    width: 19.74%
}

.progress-table .percentage {
    width: 40.36%;
    padding-right: 50px
}

.progress-table .table-head {
    display: flex
}

.progress-table .table-head .serial,
.progress-table .table-head .country,
.progress-table .table-head .visit,
.progress-table .table-head .percentage {
    color: #222;
    line-height: 40px;
    text-transform: uppercase;
    font-weight: 500
}

.progress-table .table-row {
    padding: 15px 0;
    border-top: 1px solid #edf3fd;
    display: flex
}

.progress-table .table-row .serial,
.progress-table .table-row .country,
.progress-table .table-row .visit,
.progress-table .table-row .percentage {
    display: flex;
    align-items: center
}

.progress-table .table-row .country img {
    margin-right: 15px
}

.progress-table .table-row .percentage .progress {
    width: 80%;
    border-radius: 0px;
    background: transparent
}

.progress-table .table-row .percentage .progress .progress-bar {
    height: 5px;
    line-height: 5px
}

.progress-table .table-row .percentage .progress .progress-bar.color-1 {
    background-color: #6382e6
}

.progress-table .table-row .percentage .progress .progress-bar.color-2 {
    background-color: #e66686
}

.progress-table .table-row .percentage .progress .progress-bar.color-3 {
    background-color: #f09359
}

.progress-table .table-row .percentage .progress .progress-bar.color-4 {
    background-color: #73fbaf
}

.progress-table .table-row .percentage .progress .progress-bar.color-5 {
    background-color: #73fbaf
}

.progress-table .table-row .percentage .progress .progress-bar.color-6 {
    background-color: #6382e6
}

.progress-table .table-row .percentage .progress .progress-bar.color-7 {
    background-color: #a367e7
}

.progress-table .table-row .percentage .progress .progress-bar.color-8 {
    background-color: #e66686
}

.single-gallery-image {
    margin-top: 30px;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: cover !important;
    height: 200px
}

.list-style {
    width: 14px;
    height: 14px
}

.unordered-list li {
    position: relative;
    padding-left: 30px;
    line-height: 1.82em !important
}

.unordered-list li:before {
    content: "";
    position: absolute;
    width: 14px;
    height: 14px;
    border: 3px solid #000000;
    background: #fff;
    top: 4px;
    left: 0;
    border-radius: 0px;
}

.ordered-list {
    margin-left: 30px
}

.ordered-list li {
    list-style-type: decimal-leading-zero;
    color: #000000;
    font-weight: 500;
    line-height: 1.82em !important
}

.ordered-list li span {
    font-weight: 300;
    color: #777
}

.ordered-list-alpha li {
    margin-left: 30px;
    list-style-type: lower-alpha;
    color: #000000;
    font-weight: 500;
    line-height: 1.82em !important
}

.ordered-list-alpha li span {
    font-weight: 300;
    color: #777
}

.ordered-list-roman li {
    margin-left: 30px;
    list-style-type: lower-roman;
    color: #000000;
    font-weight: 500;
    line-height: 1.82em !important
}

.ordered-list-roman li span {
    font-weight: 300;
    color: #777
}

.single-input {
    display: block;
    width: 100%;
    line-height: 40px;
    border: none;
    outline: none;
    background: #f9f9ff;
    padding: 0 20px
}

.single-input:focus {
    outline: none
}

.input-group-icon {
    position: relative
}

.input-group-icon .icon {
    position: absolute;
    left: 20px;
    top: 0;
    line-height: 40px;
    z-index: 3
}

.input-group-icon .icon i {
    color: #797979
}

.input-group-icon .single-input {
    padding-left: 45px
}

.single-textarea {
    display: block;
    width: 100%;
    line-height: 40px;
    border: none;
    outline: none;
    background: #f9f9ff;
    padding: 0 20px;
    height: 100px;
    resize: none
}

.single-textarea:focus {
    outline: none
}

.single-input-primary {
    display: block;
    width: 100%;
    line-height: 40px;
    border: 1px solid transparent;
    outline: none;
    background: #f9f9ff;
    padding: 0 20px
}

.single-input-primary:focus {
    outline: none;
    border: 1px solid #000000
}

.single-input-accent {
    display: block;
    width: 100%;
    line-height: 40px;
    border: 1px solid transparent;
    outline: none;
    background: #f9f9ff;
    padding: 0 20px
}

.single-input-accent:focus {
    outline: none;
    border: 1px solid #eb6b55
}

.single-input-secondary {
    display: block;
    width: 100%;
    line-height: 40px;
    border: 1px solid transparent;
    outline: none;
    background: #f9f9ff;
    padding: 0 20px
}

.single-input-secondary:focus {
    outline: none;
    border: 1px solid #f09359
}

.default-switch {
    width: 35px;
    height: 17px;
    border-radius: 0px;
    background: #f9f9ff;
    position: relative;
    cursor: pointer
}

.default-switch input {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer
}

.default-switch input+label {
    position: absolute;
    top: 1px;
    left: 1px;
    width: 15px;
    height: 15px;
    border-radius: 0px;
    background: #000000;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -o-transition: all 0.2s;
    transition: all 0.2s;
    box-shadow: 0px 4px 5px 0px rgba(0, 0, 0, 0.2);
    cursor: pointer
}

.default-switch input:checked+label {
    left: 19px
}

.single-element-widget {
    margin-bottom: 30px
}

.primary-switch {
    width: 35px;
    height: 17px;
    border-radius: 0px;
    background: #f9f9ff;
    position: relative;
    cursor: pointer
}

.primary-switch input {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    opacity: 0
}

.primary-switch input+label {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%
}

.primary-switch input+label:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    border-radius: 0px;
    cursor: pointer;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -o-transition: all 0.2s;
    transition: all 0.2s
}

.primary-switch input+label:after {
    content: "";
    position: absolute;
    top: 1px;
    left: 1px;
    width: 15px;
    height: 15px;
    border-radius: 0px;
    background: #fff;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -o-transition: all 0.2s;
    transition: all 0.2s;
    box-shadow: 0px 4px 5px 0px rgba(0, 0, 0, 0.2);
    cursor: pointer
}

.primary-switch input:checked+label:after {
    left: 19px
}

.primary-switch input:checked+label:before {
    background: #000000
}

.confirm-switch {
    width: 35px;
    height: 17px;
    border-radius: 8.5px;
    background: #f9f9ff;
    position: relative;
    cursor: pointer
}

.confirm-switch input {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    opacity: 0
}

.confirm-switch input+label {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%
}

.confirm-switch input+label:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    border-radius: 8.5px;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -o-transition: all 0.2s;
    transition: all 0.2s;
    cursor: pointer
}

.confirm-switch input+label:after {
    content: "";
    position: absolute;
    top: 1px;
    left: 1px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #fff;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -o-transition: all 0.2s;
    transition: all 0.2s;
    box-shadow: 0px 4px 5px 0px rgba(0, 0, 0, 0.2);
    cursor: pointer
}

.confirm-switch input:checked+label:after {
    left: 19px
}

.confirm-switch input:checked+label:before {
    background: #4cd3e3
}

.primary-checkbox {
    width: 16px;
    height: 16px;
    border-radius: 3px;
    background: #f9f9ff;
    position: relative;
    cursor: pointer
}

.primary-checkbox input {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    opacity: 0
}

.primary-checkbox input+label {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    border-radius: 3px;
    cursor: pointer;
    border: 1px solid #f1f1f1
}

.primary-checkbox input:checked+label {
    background: url(../img/content/elements/primary-check.png) no-repeat center center/cover;
    border: none
}

.confirm-checkbox {
    width: 16px;
    height: 16px;
    border-radius: 3px;
    background: #f9f9ff;
    position: relative;
    cursor: pointer
}

.confirm-checkbox input {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    opacity: 0
}

.confirm-checkbox input+label {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    border-radius: 3px;
    cursor: pointer;
    border: 1px solid #f1f1f1
}

.confirm-checkbox input:checked+label {
    background: url(../img/content/elements/success-check.png) no-repeat center center/cover;
    border: none
}

.disabled-checkbox {
    width: 16px;
    height: 16px;
    border-radius: 3px;
    background: #f9f9ff;
    position: relative;
    cursor: pointer
}

.disabled-checkbox input {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    opacity: 0
}

.disabled-checkbox input+label {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    border-radius: 3px;
    cursor: pointer;
    border: 1px solid #f1f1f1
}

.disabled-checkbox input:disabled {
    cursor: not-allowed;
    z-index: 3
}

.disabled-checkbox input:checked+label {
    background: url(../img/content/elements/disabled-check.png) no-repeat center center/cover;
    border: none
}

.primary-radio {
    width: 16px;
    height: 16px;
    border-radius: 8px;
    background: #f9f9ff;
    position: relative;
    cursor: pointer
}

.primary-radio input {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    opacity: 0
}

.primary-radio input+label {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    border-radius: 8px;
    cursor: pointer;
    border: 1px solid #f1f1f1
}

.primary-radio input:checked+label {
    background: url(../img/content/elements/primary-radio.png) no-repeat center center/cover;
    border: none
}

.confirm-radio {
    width: 16px;
    height: 16px;
    border-radius: 8px;
    background: #f9f9ff;
    position: relative;
    cursor: pointer
}

.confirm-radio input {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    opacity: 0
}

.confirm-radio input+label {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    border-radius: 8px;
    cursor: pointer;
    border: 1px solid #f1f1f1
}

.confirm-radio input:checked+label {
    background: url(../img/content/elements/success-radio.png) no-repeat center center/cover;
    border: none
}

.disabled-radio {
    width: 16px;
    height: 16px;
    border-radius: 8px;
    background: #f9f9ff;
    position: relative;
    cursor: pointer
}

.disabled-radio input {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    opacity: 0
}

.disabled-radio input+label {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    border-radius: 8px;
    cursor: pointer;
    border: 1px solid #f1f1f1
}

.disabled-radio input:disabled {
    cursor: not-allowed;
    z-index: 3
}

.disabled-radio input:checked+label {
    background: url(../img/content/elements/disabled-radio.png) no-repeat center center/cover;
    border: none
}

.default-select {
    height: 40px
}

.default-select .nice-select {
    border: none;
    border-radius: 0px;
    height: 40px;
    background: #f9f9ff;
    padding-left: 20px;
    padding-right: 40px
}

.default-select .nice-select .list {
    margin-top: 0;
    border: none;
    border-radius: 0px;
    box-shadow: none;
    width: 100%;
    padding: 10px 0 10px 0px
}

.default-select .nice-select .list .option {
    font-weight: 300;
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    line-height: 28px;
    min-height: 28px;
    font-size: 12px;
    padding-left: 20px
}

.default-select .nice-select .list .option.selected {
    color: #000000;
    background: transparent
}

.default-select .nice-select .list .option:hover {
    color: #000000;
    background: transparent
}

.default-select .current {
    margin-right: 50px;
    font-weight: 300
}

.default-select .nice-select::after {
    right: 20px
}

@media (max-width: 991px) {
    .left-align-p p {
        margin-top: 20px
    }
}

.form-select {
    height: 40px;
    width: 100%
}

.form-select .nice-select {
    border: none;
    border-radius: 0px;
    height: 40px;
    background: #f9f9ff;
    padding-left: 45px;
    padding-right: 40px;
    width: 100%
}

.form-select .nice-select .list {
    margin-top: 0;
    border: none;
    border-radius: 0px;
    box-shadow: none;
    width: 100%;
    padding: 10px 0 10px 0px
}

.form-select .nice-select .list .option {
    font-weight: 300;
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    line-height: 28px;
    min-height: 28px;
    font-size: 12px;
    padding-left: 45px
}

.form-select .nice-select .list .option.selected {
    color: #000000;
    background: transparent
}

.form-select .nice-select .list .option:hover {
    color: #000000;
    background: transparent
}

.form-select .current {
    margin-right: 50px;
    font-weight: 300
}

.form-select .nice-select::after {
    right: 20px
}

.header-top {
    font-size: 12px;
    padding: 8px
}

.header-top a {
    color: #fff
}

.header-top ul li {
    display: inline-block;
    margin-left: 15px
}

.header-top .header-top-right {
    text-align: right
}

.header-top .header-top-right i {
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s
}

.header-top .header-top-right a {
    margin-right: 10px
}

.header-top .header-top-right a:hover {
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s
}

.header-top .header-top-right a:hover i {
    color: #000000
}

.header-top .header-top-left {
    text-align: left
}

.header-top .header-top-left a {
    margin-right: 10px
}

.header-top .lnr {
    display: none
}

@media (max-width: 588px) {
    .header-top .lnr {
        display: block;
        font-weight: bold;
        font-size: 16px;
        color: #fff
    }

    .header-top .text {
        display: none
    }
}

@media (max-width: 767px) {
    .header-top {
        display: none
    }
}

.top-head-btn {
    background: #000000;
    padding: 9px 26px
}

.main-menu {
    padding-top: 1rem;
}

#header {
    padding: 0px 0px 20px 0px;
    /* Add safe-area space inside header and minor cushion to avoid top cropping */
    padding-top: calc(env(safe-area-inset-top, 0) + 6px);
    box-sizing: border-box;
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    transition: padding .35s ease, background-color .35s ease, backdrop-filter .35s ease;
    z-index: 1200;
    background: transparent;
    overflow: visible;
}

#header.header-scrolled {
    /* Shrink vertical padding so the bar becomes more compact */
    padding-top: calc(env(safe-area-inset-top, 0) + 2px);
    padding-bottom: 8px;
    /* Blur background of nav bar */
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    /* Subtle translucent base so blur is visible */
    background-color: rgba(0, 0, 0, 0.685);
    /* Smooth transitions for size + background */
    transition: padding .35s ease, background-color .35s ease, backdrop-filter .35s ease;
    will-change: padding, backdrop-filter, background-color;
    transform: translateZ(0);
}

/* Shrink the logo when scrolled */
#header.header-scrolled #logo img {
    height: 30px !important;
    transition: height .35s ease;
}

/* Shrink nav link font size slightly when scrolled */
#header.header-scrolled .nav-menu > li > a {
    font-size: 12px;
    transition: font-size .35s ease;
}

/* Keep .main-menu padding tighter when scrolled */
#header.header-scrolled .main-menu {
    padding-top: 0.35rem;
    transition: padding-top .35s ease;
}

/* Mobile: slightly tighter shrink */
@media (max-width: 768px) {
    #header.header-scrolled {
        padding-bottom: 6px;
    }
    #header.header-scrolled #logo img {
        height: 22px !important;
    }
}


/* Fallback for browsers without backdrop-filter support */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    #header {
        background-color: rgba(0, 0, 0, 0.75);
        /* More opaque since blur not available */
    }
}

@media (max-width: 673px) {
    #logo {
        margin-left: 20px
    }
}

#header #logo h1 {
    font-size: 34px;
    margin: 0;
    padding: 0;
    line-height: 1;
    font-weight: 700;
    letter-spacing: 3px
}

#header #logo h1 a,
#header #logo h1 a:hover {
    color: #000;
    padding-left: 10px;
    border-left: 4px solid #000000
}

#header #logo img {
    padding: 0;
    margin: 0;
    height: 40px; /* base size; override inline when present */
    display: block;
    transition: height .25s ease, transform .25s ease
}

/* On scroll, make logo a bit smaller (mobile/tablet only) */
@media (max-width: 991.98px){
    #header.header-scrolled #logo img{
        height: 32px !important;
    }
}

@media (max-width: 768px) {
    #header #logo h1 {
        font-size: 28px
    }

    /* Cap logo height on mobile so it doesn't overflow the navbar */
    #header #logo img {
        height: 28px !important;
        width: auto;
    }
}

.nav-menu,
.nav-menu * {
    margin: 0;
    padding: 0;
    list-style: none
}

.nav-menu ul {
    position: absolute;
    display: none;
    top: 100%;
    right: 0;
    z-index: 99
}

.nav-menu li {
    position: relative;
    white-space: nowrap
}

.nav-menu>li {
    float: left
}

.nav-menu li:hover>ul,
.nav-menu li.sfHover>ul {
    display: block
}

.nav-menu ul ul {
    top: 0;
    right: 100%;
}

.nav-menu ul li {
    min-width: 180px
}

.sf-arrows .sf-with-ul {
    padding-right: 30px
}

.sf-arrows .sf-with-ul:after {
    content: "\f107";
    position: absolute;
    right: 15px;
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal
}

.sf-arrows ul .sf-with-ul:after {
    content: "\f105"
}

@media (max-width: 768px) {
    #nav-menu-container {
        display: none
    }
}

.nav-menu a {
    padding: 0 8px 0px 8px;
    text-decoration: none;
    display: inline-block;
    color: #fff;
    font-weight: 500;
    font-size: 12px;
    text-transform: uppercase;
    outline: none
}

/* Smooth transitions for nav links */
.nav-menu a,
#mobile-nav ul li a {
    transition: color 220ms ease;
}

.nav-menu>li {
    margin-left: 10px;
}

.nav-menu ul {
    margin: 22px 0 0 0;
    padding: 10px;
    box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
    background: #fff
}

.nav-menu ul li {
    transition: 0.3s
}

.nav-menu ul li a {
    padding: 5px 10px;
    color: #333;
    transition: 0.3s;
    display: block;
    font-size: 12px;
    text-transform: none
}

.nav-menu ul li:hover>a {
    color: #000000;
}

/* Desktop top-level hover/active styles */
.nav-menu>li>a,
.nav-menu>li>a:focus {
    position: relative;
}

/* Animated underline for top-level desktop links */
.nav-menu>li>a::after {
    content: "";
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: -3px;
    height: 2px;
    /* thinner underline */
    background: #f9f9ff;
    border-radius: 2px;
    transform-origin: left center;
    /* grow from left to right */
    transform: scaleX(0);
    transition: transform 260ms cubic-bezier(.2, .9, .2, 1);
    opacity: 0.95;
}

.nav-menu>li>a:hover::after,
.nav-menu>li>a:focus::after {
    transform: scaleX(1);
}

/* Active/selected menu item */
.nav-menu>li.menu-item-active>a,
.nav-menu>li.current-menu-item>a,
.nav-menu>li>a.active {
    color: #f9f9ff;
    font-weight: 700;
}

/* Keep underline visible for active items */
.nav-menu>li.menu-item-active>a::after,
.nav-menu>li.current-menu-item>a::after,
.nav-menu>li>a.active::after {
    left: 8px;
    right: 8px;
    transform: scaleX(1);
}

.nav-menu ul ul {
    margin-right: 10px;
    margin-top: 0
}

#mobile-nav-toggle {
    position: fixed;
    right: 16px;
    z-index: 2100;
    /* header padding-top ≈ 6px, .main-menu padding-top = 16px, logo = 28px tall
       → vertical center of the nav row = 6px + 16px + 14px = 36px from top */
    top: calc(env(safe-area-inset-top, 0) + 34px);
    transform: translateY(-50%);
    color: #fff;
    border: 0;
    background: none;
    font-size: 24px;
    display: none;
    transition: top .25s ease, width .2s ease, height .2s ease, font-size .2s ease, color .2s ease;
    outline: none;
    cursor: pointer
}

@media (max-width: 960px) {
    #mobile-nav-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 40px;
        width: 48px;
        padding: 0;
    }

    #nav-menu-container {
        display: none
    }
}

/* Mobile-specific header pinning adjustments */
@media (max-width: 767.98px){
    header, #header{
        top: 0; left: 0; right: 0;
        -webkit-transform: none !important;
        transform: none !important;
    }
    #header.header-scrolled{
        position: fixed;
    }
}

/* Alternative (commented): Use position: sticky to avoid manual offset reservation.
   Replace 'fixed' with 'sticky' and remove body padding if preferred.
   header, #header{ position: sticky; top:0; } */

#mobile-nav {
    position: fixed;
    top: 0;
    padding-top: 100px;
    /* space for logo — adjust (e.g. 80–140px) */
    bottom: 0;
    z-index: 998;
    background: #000000;
    left: -100%;
    width: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    transition: 0.4s;
    display: flex;
    /* enable centering */
    flex-direction: column;
    justify-content: center;
    /* vertical centering of links */
    align-items: center;
    /* horizontal centering */
}

#mobile-nav ul {
    padding: 0;
    margin: 0;
    list-style: none;
    width: 100%;
    max-width: 480px;
    /* optional: constrain menu width */
    display: flex;
    flex-direction: column;
    align-items: center;
}

#mobile-nav ul li {
    position: relative
}

#mobile-nav ul li a {
    color: #fff;
    font-size: 14px;
    text-transform: uppercase;
    overflow: hidden;
    text-align: center;
    padding: 14px 0;
    /* slightly larger touch area */
    position: relative;
    text-decoration: none;
    width: 100%;
    display: block;
    outline: none;
    font-weight: 700;
}

#mobile-nav ul li a:hover,
#mobile-nav ul li a:focus {
    color: #fff;
    background: rgba(255, 255, 255, 0.04);
    /* subtle feedback */
}

/* Mobile: animated underline (shorter and closer to text) */
#mobile-nav ul li a {
    position: relative;
}

#mobile-nav ul li a::after {
    content: "";
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 10px;
    height: 1px;
    /* thinner underline */
    background: #fff;
    transform-origin: left center;
    /* grow left→right */
    transform: scaleX(0);
    transition: transform 220ms cubic-bezier(.2, .9, .2, 1);
    opacity: 0.95;
}

#mobile-nav ul li a:hover::after,
#mobile-nav ul li a:focus::after {
    transform: scaleX(1);
}

#mobile-nav ul li li {
    padding-left: 30px
}

#mobile-nav ul .menu-has-children i {
    position: absolute;
    right: 0;
    z-index: 99;
    padding: 15px;
    cursor: pointer;
    color: #fff
}

#mobile-nav ul .menu-has-children i.fa-chevron-up {
    color: #000000
}

#mobile-nav ul .menu-has-children li a {
    text-transform: none
}


#mobile-nav ul .menu-item-active a,
#mobile-nav ul li a.menu-item-active,
#mobile-nav ul li a.active {
    color: #000000;
    background: rgba(255, 255, 255, 0.06);
}

/* Keep mobile underline visible for active links */
#mobile-nav ul .menu-item-active a::after,
#mobile-nav ul li a.menu-item-active::after,
#mobile-nav ul li a.active::after {
    transform: scaleX(1);
}

/* Make nested active links readable */
#mobile-nav ul li.menu-item-active>a,
#mobile-nav ul li.current-menu-item>a {
    font-weight: 800;
}

#mobile-body-overly {
    width: 100%;
    height: 100%;
    z-index: 997;
    top: 0;
    left: 0;
    position: fixed;
    background: rgba(0, 0, 0, 0.7);
    display: none;
}

/* mobile logo at top of mobile nav */
#mobile-nav .mobile-nav-logo {
    position: absolute;
    top: 18px;
    left: 0;
    right: 0;
    text-align: center;
    z-index: 999;
}

#mobile-nav .mobile-nav-logo img {
    /* make mobile nav logo a bit bigger so it's clearly visible */
    max-height: 100px;
    width: 40%;
}

/* social icons fixed at bottom */
#mobile-nav .mobile-nav-social {
    position: absolute;
    bottom: 28px;
    left: 0;
    right: 0;
    text-align: center;
}

#mobile-nav .mobile-nav-social a {
    color: #fff;
    margin: 0 10px;
    font-size: 18px;
    text-decoration: none;
    opacity: 0.95;
}

#mobile-nav .mobile-nav-social a:hover {
    opacity: 1;
}

/* Make sure nested submenu links remain left-aligned with smaller indent */
#mobile-nav ul li li a {
    text-align: left;
    padding-left: 30px;
}

body.mobile-nav-active {
    overflow: hidden
}

body.mobile-nav-active #mobile-nav {
    left: 0
}

body.mobile-nav-active #mobile-nav-toggle {
    color: #fff
}

.section-gap {
    padding: 120px 0
}
/* Align with mobile .pt-120 adjustment so sections using both stay proportional */
@media (max-width:575px){
    .section-gap{ padding:90px 0; }
}

.section-title {
    padding-bottom: 30px
}

.section-title h2 {
    margin-bottom: 20px
}

.section-title p {
    font-size: 16px;
    margin-bottom: 0
}

@media (max-width: 991.98px) {
    .section-title p br {
        display: none
    }
}

.alert-msg {
    color: #008000
}

.primary-btn {
    background-color: #000000;
    line-height: 42px;
    padding-left: 30px;
    padding-right: 30px;
    border-radius: 4px;
    /* rectangle shape */
    border: none;
    color: #fff;
    display: inline-block;
    font-weight: 500;
    position: relative;
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    cursor: pointer;
    position: relative
}

.primary-btn:focus {
    outline: none;
}

.primary-btn span {
    position: static;
    transform: none;
    top: auto;
    right: auto;
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s
}

.primary-btn:hover {
    color: #fff;
}

.primary-btn:hover span {
    color: #fff;
    right: 20px;
}

.primary-btn.white {
    border: 1px solid #fff;
    color: #fff
}

.primary-btn.white span {
    color: #fff
}

.primary-btn.white:hover {
    background: #fff;
    color: #000000
}

.primary-btn.white:hover span {
    color: #000000
}

.site-footer .primary-btn.white:hover {
    background: #000;
    color: #fff;
}

.psh-sidebar .primary-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    width: auto;
}

.psh-sidebar .primary-btn span {
    position: static;
    transform: none;
    right: auto;
    top: auto;
}

.psh-sidebar .primary-btn svg {
    flex-shrink: 0;
}

.psh-sidebar .primary-btn:hover,
.psh-sidebar .primary-btn:hover span,
.psh-sidebar .primary-btn:hover svg {
    color: #000 !important;
}

.primary-btn:hover {
    background: #000;
    color: #fff;
}

.primary-btn:hover span {
    color: inherit;
}

.pd-hero-cta .primary-btn {
    display: inline-flex !important;
    align-items: center;
    gap: 10px;

    width: fit-content !important;
    min-width: unset;
    max-width: none;
    white-space: nowrap;
}

.pd-hero-cta .primary-btn {
    flex: 0 0 auto;
    align-self: center;
}

.pd-hero-cta .primary-btn svg {
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .primary-btn {
        height: auto;
        padding-left: 20px;
        padding-right: 20px;
    }
}

/* When header is scrolled, shrink reserved height (affects hamburger vertical center) */
@media (max-width: 767.98px){
    body.nav-scrolled{ --mobile-header-height:58px; }
}

/* Shrink hamburger button when scrolled (keep 40+ px target) */
/* Scrolled center = header-top-pad(2px) + main-menu-pad-top(6px) + half-logo-height(11px) = 19px */
@media (max-width: 960px){
    body.nav-scrolled #mobile-nav-toggle{
        width: 42px;
        height: 36px;
        right: 14px;
        font-size: 22px;
        top: calc(env(safe-area-inset-top, 0) + 22.3px);
        transform: translateY(-50%);
    }
}

.overlay {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0
}

.banner-area {
    background: url(../img/projects/featured/footer-image.jpg) center;
    background-size: cover
}

/* Banner slides (background carousel) */
.banner-slides {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    overflow: hidden;
    z-index: 0;
    /* behind content */
}

.banner-slide {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.banner-slide.active {
    opacity: 1;
}

/* Ensure banner content sits above slides and overlay */
.banner-content {
    position: relative;
    z-index: 5;
}

/* Left-align title on larger screens, keep centered on small screens */
.banner-content h1 {
    text-align: center;
    font-size: 32px;
    /* default smaller size */
    line-height: 1.1em;
}

/* Entrance animation for banner title - per-word stagger */
.banner-title-animate {
    opacity: 1;
}

.banner-title-animate .word {
    display: inline-block;
    opacity: 0;
    transform: translateY(14px);
}

.banner-title-animate.in .word {
    animation: bannerWordIn 1000ms cubic-bezier(0.2, 0.9, 0.2, 1) forwards;
}

/* Also support animating when each word gets the .in class (JS sets this on words) */
.banner-title-animate .word.in {
    animation: bannerWordIn 1000ms cubic-bezier(0.2, 0.9, 0.2, 1) forwards;
}

@keyframes bannerWordIn {
    from {
        opacity: 0;
        transform: translateY(14px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Global reveal animation for page elements */
.reveal {
    opacity: 0;
    transform: translateY(12px);
    will-change: opacity, transform;
    transition: opacity 800ms cubic-bezier(0.2, 0.9, 0.2, 1), transform 800ms cubic-bezier(0.2, 0.9, 0.2, 1);
}

.reveal.in-view {
    opacity: 1;
    transform: translateY(0);
}

.reveal[data-reveal-delay] {
    transition-delay: 0ms;
}

.reveal.in-view[data-reveal-delay] {
    transition-delay: attr(data-reveal-delay ms);
}

/* Slight variant for images (so they pop a bit slower) */
.reveal-img {
    opacity: 0;
    transform: translateY(8px) scale(0.995);
    will-change: opacity, transform;
    transition: opacity 900ms cubic-bezier(0.2, 0.9, 0.2, 1), transform 900ms cubic-bezier(0.2, 0.9, 0.2, 1);
}

.reveal-img.in-view {
    opacity: 1;
    transform: translateY(0) scale(1);
}

@media (min-width: 576px) {
    .banner-content h1 {
        font-size: 40px;
    }
}

@media (min-width: 992px) {
    .banner-content {
        text-align: center;
        /* keep centered per request */
        padding-left: 0;
        max-width: 720px;
    }

    .banner-content h1 {
        text-align: center;
        font-size: 48px;
        /* desktop reduced size */
    }
}

/* left-side meta (slide counter) */
.banner-side-meta {
    position: absolute;
    left: 40px;
    top: 40%;
    transform: translateY(-50%);
    z-index: 5;
}

.slide-counter {
    color: rgba(255, 255, 255, 0.85);
    font-size: 14px;
    letter-spacing: 1px;
}

.slide-counter span {
    opacity: 0.7;
    display: block;
    font-size: 12px;
}

.view-project {
    display: inline-block;
    margin-top: 18px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 14px;
    text-decoration: underline;
}

@media (max-width: 991px) {
    .banner-side-meta {
        display: none;
    }

    .view-project {
        display: none;
    }
}

/* loader bar */
.banner-loader-wrap {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 6px;
    /* reduced from 10px */
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.banner-loader {
    width: 80%;
    max-width: 1000px;
    height: 3px;
    /* reduced from 6px */
    background: rgba(255, 255, 255, 0.08);
    border-radius: 2px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12) inset;
}

.banner-loader-bar {
    height: 100%;
    width: 100%;
    background: rgba(255, 255, 255, 0.9);
    transform-origin: left center;
    transform: scaleX(0);
    transition: transform linear;
    opacity: 0.95;
}

@media (max-width: 767.98px) {
    .banner-area .fullscreen {
        /* Use viewport height so the background fills the whole mobile screen */
        height: 100vh !important;
        min-height: 100vh !important;
    }

    /* Ensure slide backgrounds also fill the viewport on small devices */
    .banner-slide {
        min-height: 100vh;
    }

    /* Make banner-area itself cover viewport to avoid gaps from parent sizing */
    .banner-area {
        height: 100vh;
    }
}

.banner-area .primary-btn {
    padding-left: 30px;
    padding-right: 30px
}

.banner-slide::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.35);
    /* dark overlay */
    pointer-events: none;
    z-index: 1;
    transition: background 400ms ease;
}

.overlay-bg {
    background-color: rgba(0, 0, 0, 0.831)
}

#home .overlay-bg {
    background-color: rgba(0, 0, 0, 0.5) !important;
}

#home .banner-slide::before {
    background: rgba(0, 0, 0, 0.22);
}

#home .banner-content {
    transform: translateY(-3.5vh);
    text-align: center;
    align-items: center;
}

#home .banner-content h1 {
    margin-top: 0;
    line-height: 1.08;
}

@media (max-width: 767.98px) {
    #home .banner-content {
        transform: translateY(-2vh);
    }
}

.banner-content {
    text-align: center
}

.banner-content h1 {
    color: #fff;
    font-size: 48px;
    font-weight: 700;
    line-height: 1em;
    margin-top: 20px;
    margin-bottom: 20px
}

@media (max-width: 414px) {
    .banner-content h1 {
        font-size: 25px
    }
}

.banner-content p {
    max-width: 900px
}

.header-btn {
    background-color: #000000;
    border-radius: 0;
    padding-left: 30px;
    padding-right: 30px;
    border: 1px solid transparent;
    color: #fff
}

.header-btn:hover {
    border: 1px solid #fff;
    background: transparent;
    color: #fff
}

.banner-img {
    text-align: right
}

@media (max-width: 767px) {
    .banner-img {
        width: 60%;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }
}

.single-service h4 {
    margin-bottom: 20px
}

.single-service p {
    margin-bottom: 0
}

.single-service:hover {
    background-color: #04091e;
    border-color: #04091e
}

.single-service:hover h4 {
    color: #000000
}

@media (max-width: 1024px) {
    .single-service {
        padding: 22px
    }
}

@media (max-width: 991px) {
    .single-service {
        margin-bottom: 30px
    }
}

/* About Area Styles */
.about-area {
    background-color: #f8f9fa;
    position: relative;
    overflow: hidden;
    text-align: center;
}

.about-area .about-content {
    position: relative;
    z-index: 1;
}

.about-area .about-content {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}

.about-area .about-label {
    position: fixed;
    top: 50%;
    left: 12%;
    font-size: 180px;
    font-weight: 900;
    color: rgba(0, 0, 0, 5%);
    text-transform: uppercase;
    letter-spacing: 200px;
    z-index: 0;
    pointer-events: none;
    white-space: nowrap;
    opacity: 0;
    animation: fadeIn 1.5s ease-out 0.5s forwards;
}

@media (max-width: 1200px) {
    .about-area .about-label {
        font-size: 140px;
        letter-spacing: 8px;
    }
}

@media (max-width: 768px) {
    .about-area .about-label {
        font-size: 100px;
        letter-spacing: 5px;
    }
}

@media (max-width: 480px) {
    .about-area .about-label {
        font-size: 70px;
        letter-spacing: 3px;
    }
}

.about-area .about-title {
    font-size: 48px;
    font-weight: 600;
    color: #000000;
    line-height: 1.2;
    margin-bottom: 50px;
    text-align: left;
    opacity: 0;
    transform: translateY(-30px);
    animation: fadeInDown 1s ease-out 0.2s forwards;
}

@media (max-width: 768px) {
    .about-area .about-title {
        font-size: 36px;
        margin-bottom: 40px;
    }
}

@media (max-width: 480px) {
    .about-area .about-title {
        font-size: 28px;
        margin-bottom: 30px;
    }
}

.about-area .about-text-container {
    margin-bottom: 50px;
}

.about-area .about-text-container .row {
    align-items: flex-start;
    margin-left: -18px;
    margin-right: -18px;
}

.about-area .about-text-container p {
    font-size: 16px;
    line-height: 1.8;
    color: #000000;
    margin-bottom: 0;
    text-align: left;
    opacity: 0;
    transform: translateY(30px);
    height: auto;
    max-width: 100%;
}

@media (max-width: 991px) {
    .about-area .about-text-container p {
        margin-bottom: 30px;
    }
}

@media (max-width: 768px) {
    .about-area .about-text-container p {
        text-align: left;
        font-size: 15px;
    }
}

.about-area .about-paragraph-1 {
    animation: fadeInUp 1s ease-out 0.4s forwards;
}

.about-area .about-paragraph-2 {
    animation: fadeInUp 1s ease-out 0.6s forwards;
}

.about-area .about-btn-wrap {
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 1s ease-out 0.8s forwards;
    text-align: left;
}

.about-area .discover-btn {
    background-color: transparent;
    color: #000000;
    border: 2px solid #000000;
    border-radius: 0;
    padding: 10px 25px;
    font-weight: 600;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.about-area .discover-btn:hover {
    background-color: #000000;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.about-area .discover-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s;
}

.about-area .discover-btn:hover::before {
    left: 100%;
}

/* Animation Keyframes */
@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(50px) scale(0.9);
    }

    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes borderPulse {

    0%,
    100% {
        opacity: 0.3;
        transform: scale(1);
    }

    50% {
        opacity: 0.6;
        transform: scale(1.05);
    }
}

/* Hover animations for the entire why-us section */
.why-us-area:hover .why-us-title {
    transform: translateY(-5px);
    transition: transform 0.3s ease;
}

.why-us-area:hover .why-us-text-container p {
    transform: translateY(-3px);
    transition: transform 0.3s ease;
}

/* About why-us Styles */
.why-us-area {
    background-color: #f8f9fa;
    position: relative;
    overflow: hidden;
    text-align: center;
}

.why-us-area .why-us-content {
    position: relative;
    z-index: 1;
}

.why-us-area .why-us-content {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}

.why-us-area .why-us-label {
    position: fixed;
    top: 50%;
    left: 11%;
    right: 50%;
    font-size: 180px;
    font-weight: 900;
    color: rgba(0, 0, 0, 5%);
    text-transform: uppercase;
    letter-spacing: 100px;
    z-index: 0;
    pointer-events: none;
    white-space: nowrap;
    opacity: 0;
    animation: fadeIn 1.5s ease-out 0.5s forwards;
}

.about-right {
    text-align: right;
}

/* center the labels for both About and Why Choose Us */
.about-content .about-label {
    display: block;
    text-align: center;
    margin: 0 auto 8px;
}

.about-right .about-label {
    display: block;
    text-align: center;
    margin: 0 auto 8px;
}

.why-us-right {
    text-align: right;
}

/* center the labels for both About and Why Choose Us */
.why-us-content .why-us-label {
    display: block;
    text-align: center;
    margin: 0 auto 8px;
}

.why-us-right .why-us-label {
    display: block;
    text-align: center;
    margin: 0 auto 8px;
}

@media (max-width: 1200px) {
    .why-us-area .why-us-label {
        font-size: 120px;
        letter-spacing: 8px;
    }
}

@media (max-width: 768px) {
    .why-us-area .why-us-label {
        font-size: 100px;
        letter-spacing: 5px;
    }
}

@media (max-width: 480px) {
    .why-us-area .why-us-label {
        font-size: 70px;
        letter-spacing: 3px;
    }
}

.why-us-area .why-us-title {
    font-size: 48px;
    font-weight: 600;
    color: #000000;
    line-height: 1.2;
    margin-bottom: 50px;
    text-align: left;
    opacity: 0;
    transform: translateY(-30px);
    animation: fadeInDown 1s ease-out 0.2s forwards;
}

@media (max-width: 768px) {
    .why-us-area .why-us-title {
        font-size: 36px;
        margin-bottom: 40px;
    }
}

@media (max-width: 480px) {
    .why-us-area .why-us-title {
        font-size: 28px;
        margin-bottom: 30px;
    }
}

.why-us-area .why-us-text-container {
    margin-bottom: 50px;
}

.why-us-area .why-us-text-container .row {
    align-items: flex-start;
    margin-left: -18px;
    margin-right: -18px;
}

.why-us-area .why-us-text-container p {
    font-size: 16px;
    line-height: 1.8;
    color: #000000;
    margin-bottom: 0;
    text-align: left;
    opacity: 0;
    transform: translateY(30px);
    height: auto;
    max-width: 100%;
}

.about-area .about-text-container [class*="col-"],
.why-us-area .why-us-text-container [class*="col-"] {
    padding-left: 18px;
    padding-right: 18px;
    display: flex;
}

@media (max-width: 991px) {
    .about-area .about-text-container .row,
    .why-us-area .why-us-text-container .row {
        margin-left: -15px;
        margin-right: -15px;
    }

    .about-area .about-text-container [class*="col-"],
    .why-us-area .why-us-text-container [class*="col-"] {
        padding-left: 15px;
        padding-right: 15px;
    }
}

@media (max-width: 991px) {
    .why-us-area .why-us-text-container p {
        margin-bottom: 30px;
    }
}

@media (max-width: 768px) {
    .why-us-area .why-us-text-container p {
        text-align: left;
        font-size: 15px;
    }
}

.why-us-area .why-us-paragraph-1 {
    animation: fadeInUp 1s ease-out 0.4s forwards;
}

.why-us-area .why-us-paragraph-2 {
    animation: fadeInUp 1s ease-out 0.6s forwards;
}

.why-us-area .why-us-btn-wrap {
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 1s ease-out 0.8s forwards;
    text-align: left;
}

.why-us-area .contact-btn {
    background-color: transparent;
    color: #000000;
    border: 2px solid #000000;
    border-radius: 0;
    padding: 10px 25px;
    font-weight: 600;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.why-us-area .contact-btn:hover {
    background-color: #000000;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.why-us-area .contact-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s;
}

.why-us-area .contact-btn:hover::before {
    left: 100%;
}


/* Hover animations for the entire why-us section */
.why-us-area:hover .why-us-title {
    transform: translateY(-5px);
    transition: transform 0.3s ease;
}

.why-us-area:hover .why-us-text-container p {
    transform: translateY(-3px);
    transition: transform 0.3s ease;
}


.gallery-area .single-gallery {
    margin-bottom: 30px
}

.gallery-area .single-gallery .content {
    position: relative;
    max-width: 100%;
    margin: auto;
    overflow: hidden
}

.gallery-area .single-gallery .content .primary-btn {
    border-radius: 0px
}

@media (max-width: 414px) {
    .gallery-area .single-gallery .content .primary-btn {
        font-size: 10px
    }
}

.gallery-area .single-gallery .content .content-overlay {
    background-color: #373642;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    opacity: 0;
    border-radius: 10px;
    border: 1px solid #000000;
    -webkit-transition: all 0.4s ease-in-out 0s;
    -moz-transition: all 0.4s ease-in-out 0s;
    transition: all 0.4s ease-in-out 0s
}

.gallery-area .single-gallery .content-overlay {
    margin: 20px
}

@media (max-width: 414px) {
    .gallery-area .single-gallery .content-overlay {
        margin: 0px
    }
}

.gallery-area .single-gallery .content:hover .content-overlay {
    opacity: .8
}

.gallery-area .single-gallery .content-details {
    position: absolute;
    text-align: center;
    padding-left: 1em;
    padding-right: 1em;
    width: 100%;
    top: 50%;
    left: 50%;
    opacity: 0;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -webkit-transition: all 0.3s ease-in-out 0s;
    -moz-transition: all 0.3s ease-in-out 0s;
    transition: all 0.3s ease-in-out 0s
}

.gallery-area .single-gallery .content-title {
    width: 60%;
    border-bottom: 1px solid #000000;
    font-size: 18px;
    color: #fff;
    font-weight: 500;
    padding: 20px 0px
}

@media (max-width: 414px) {
    .gallery-area .single-gallery .content-title {
        width: 92%;
        font-size: 15px
    }
}

.gallery-area .single-gallery .content:hover .content-details {
    top: 50%;
    left: 50%;
    opacity: 1
}

.gallery-area .single-gallery .content-image {
    width: 100%
}

.gallery-area .single-gallery .content-details p {
    color: #fff;
    font-size: 0.8em
}

.gallery-area .single-gallery .fadeIn-bottom {
    top: 80%
}

.feature-area {
    background-color: #f8f9fa
}

.feature-area .single-feature {
    background: #fff;
    padding: 32px;
    border-radius: 10px;
    margin-bottom: 30px;
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s
}

.feature-area .single-feature h4 {
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s
}

.feature-area .single-feature .title .lnr {
    color: #222;
    font-weight: 600;
    font-size: 25px;
    margin-right: 15px
}

.feature-area .single-feature p {
    margin-bottom: 0px;
    margin-top: 15px
}

.feature-area .single-feature:hover {
    background-color: #04091e;
    cursor: pointer
}

.feature-area .single-feature:hover h4,
.feature-area .single-feature:hover .lnr {
    color: #000000
}

@media (max-width: 1024px) {
    .feature-area .single-feature {
        padding: 30px
    }
}

.testimonial-area .owl-dots {
    text-align: center;
    bottom: 5px;
    margin-top: 70px;
    width: 100%;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden
}

.testimonial-area .owl-dot {
    height: 10px;
    width: 10px;
    display: inline-block;
    background: rgba(198, 176, 105, 0.2);
    margin-left: 5px;
    margin-right: 5px;
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s
}

.testimonial-area .owl-dot.active {
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    background: #000000
}

.single-testimonial {
    background-color: #fff;
    border: 1px solid #000000;
    padding: 25px 30px 25px 30px;
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s
}

.single-testimonial:hover {
    cursor: pointer
}

.single-testimonial .thumb {
    margin-right: 30px
}

.single-testimonial h4 {
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    margin-bottom: 5px
}

.single-testimonial:hover h4 {
    color: #000000;
    cursor: pointer
}

.single-testimonial .star .checked {
    color: #000000
}

@media (max-width: 575px) {
    .single-testimonial {
        margin: 15px
    }
}

.callto-action-wrap {
    background: -webkit-linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(../img/projects/featured/CTA.jpg) center;
    background: -o-linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(../img/projects/featured/CTA.jpg) center;
    background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(../img/projects/featured/CTA.jpg) center;
    background-size: cover;
    text-align: center;
    color: #fff
}

.callto-action-wrap h1 {
    color: #fff
}

.callto-action-wrap p {
    max-width: 560px;
    margin: 20px 0
}

.callto-action-wrap .primary-btn {
    border-radius: 0px;
    border: 1px solid transparent
}

.callto-action-wrap .primary-btn:hover {
    background: transparent;
    border-color: #fff;
    color: #fff
}

.blog-area .owl-dots {
    text-align: center;
    bottom: 5px;
    margin-top: 70px;
    width: 100%;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden
}

.blog-area .owl-dot {
    height: 10px;
    width: 10px;
    display: inline-block;
    background: rgba(198, 176, 105, 0.2);
    margin-left: 5px;
    margin-right: 5px;
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s
}

.blog-area .owl-dot.active {
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    background: #000000
}

.blog-area .single-blog-post .thumb img {
    border-radius: 10px
}

.blog-area .single-blog-post .tags {
    margin: 20px 0px
}

.blog-area .single-blog-post .tags li {
    display: inline-block;
    border: 1px solid #eee;
    padding: 4px 12px;
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s
}

.blog-area .single-blog-post .tags li:hover {
    background-color: #000000
}

.blog-area .single-blog-post .tags li:hover a {
    color: #fff
}

.blog-area .single-blog-post .tags li a {
    font-weight: 400;
    font-size: 12px;
    color: #222
}

.blog-area .single-blog-post .title {
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    margin: 20px 0
}

.blog-area .single-blog-post .title:hover {
    color: #000000
}

.blog-area .single-blog-post .date {
    color: #222;
    font-weight: 300
}

@media (max-width: 575px) {
    .blog-area .single-blog-post {
        margin: 15px
    }
}

.brands-area {
    background-color: #ffffff;
}

.brands-area .brand-wrap {
    padding: 40px 0;
}

/* carousel item size */
.brands-area .brand-wrap .single-brand {
    height: 120px;
    width: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px;
    overflow: hidden;

    text-align: center;
    filter: grayscale(100%);
    opacity: .5;
    transition: all 0.3s ease 0s;
}

/* logo size normalization */
.brands-area .brand-wrap .single-brand img,
.brands-area .brand-wrap .owl-carousel .owl-item img {
    max-width: 130px !important;
    max-height: 70px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain;
}


/* hover */
.brands-area .brand-wrap .single-brand:hover {
    filter: grayscale(0%);
    opacity: 1;
}


/* keep carousel aligned */
.brands-area .owl-carousel .owl-stage {
    display: flex;
    align-items: center;
}

.brands-area .owl-carousel .owl-item {
    display: flex;
    justify-content: center;
}

.footer-area {
    padding-top: 100px;
    background-color: #111111;
}

.footer-area h6 {
    margin-bottom: 25px;
    font-size: 18px;
    font-weight: 600;
}

.copy-right-text i,
.copy-right-text a {
    color: #ffffff
}

.footer-social a {
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s
}

.footer-social a:hover i {
    color: #ffffff
}

.footer-social i {
    color: #cccccc;
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s
}

@media (max-width: 991.98px) {
    .footer-social {
        text-align: left
    }
}

.single-footer-widget input {
    border: none;
    width: 80% !important;
    font-weight: 300;
    background: #f9f9ff;
    padding-left: 20px;
    border-radius: 0;
    font-size: 14px;
    padding: 10px 18px;
    border: 1px solid #f9f9ff
}

/* Footer showcase image */
.footer-image {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    border-radius: 0;
}

/* Footer image container */
.footer-col.footer-image-col {
    width: 100%;
    max-width: 450px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* keep footer responsive */
.site-footer .footer-inner {
    display: grid;
    grid-template-columns: 
        minmax(220px, 1fr)
        minmax(180px, 1fr)
        minmax(180px, 1fr)
        minmax(250px, 1fr);
    gap: 50px;
    align-items: start;
}

@media (max-width: 991px) {
    .site-footer .footer-inner {
        grid-template-columns: 1fr;
    }

    .footer-col.footer-image-col {
        max-width: 100%;
    }
}

/* Footer contact discover button adjustments */
.email-btn {
    padding: 10px 22px;
    font-size: 14px;
    border: 2px solid #fff;
    background: transparent;
    color: #fff;
}

.email-btn:hover {
    background: #fff;
    color: #000;
    border: 2px solid #fff;
    cursor: pointer;
}

/* Modal form monochrome inputs */
.modal-content .form-control {
    background: transparent;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.modal-content .form-control::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.modal-content .form-control:focus {
    box-shadow: none;
    border-color: rgba(255, 255, 255, 0.12);
}

/* Inline toast message used in the contact modal */
.toast-message {
    padding: 10px 14px;
    border-radius: 6px;
    font-size: 14px;
    line-height: 1.3;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
    max-width: 100%;
    display: inline-block;
}

.toast-success {
    background: rgba(46, 204, 113, 0.12);
    color: #a7f0bf;
    border: 1px solid rgba(46, 204, 113, 0.18);
}

.toast-error {
    background: rgba(255, 99, 71, 0.08);
    color: #ffb6a6;
    border: 1px solid rgba(255, 99, 71, 0.12);
}

.single-footer-widget input:focus {
    background: #f9f9ff;
    box-shadow: none;
    border: 1px solid #f9f9ff
}

.single-footer-widget .bb-btn {
    color: #ffffff;
    color: #000000;
    font-weight: 300;
    border-radius: 0;
    z-index: 9999;
    cursor: pointer
}

.single-footer-widget .info {
    position: absolute;
    margin-top: 20%;
    color: #000000;
    font-size: 12px
}

.single-footer-widget .info.valid {
    color: green
}

.single-footer-widget .info.error {
    color: red
}

.single-footer-widget .click-btn {
    background-color: #000000;
    color: #fff;
    border-radius: 0;
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
    padding: 8px 12px;
    border: 0
}

.single-footer-widget ::-moz-selection {
    background-color: #191919 !important;
    color: #fff
}

.single-footer-widget ::selection {
    background-color: #191919 !important;
    color: #fff
}

.single-footer-widget ::-webkit-input-placeholder {
    color: #fff;
    font-weight: 300
}

.single-footer-widget :-moz-placeholder {
    color: #fff;
    opacity: 1;
    font-weight: 300
}

.single-footer-widget ::-moz-placeholder {
    color: #777;
    opacity: 1;
    font-weight: 300
}

.single-footer-widget :-ms-input-placeholder {
    color: #fff;
    font-weight: 300
}

.single-footer-widget ::-ms-input-placeholder {
    color: #fff;
    font-weight: 300
}

@media (max-width: 991.98px) {
    .single-footer-widget {
        margin-bottom: 30px
    }
}

@media (max-width: 800px) {
    .social-widget {
        margin-top: 30px
    }
}

.footer-text {
    padding-top: 20px;
    color: #dbdbdb;
}

.footer-links {
    padding: 0;
    margin: 0;
    list-style: none;
    line-height: 2.5em;
    color: #fff;
    text-decoration: none;
}

.footer-link {
    color: #fff;
    text-decoration: none;

}

/* Footer quick links: present as a vertical, accessible list */
.footer-links {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: -10px 8px;
    /* reduced horizontal gap between columns */
}

.footer-links li {
    margin: 0;
}

.footer-links .footer-link {
    display: inline-block;
    color: #fff;
    opacity: 0.95;
    transition: color .18s ease, transform .12s ease, opacity .12s ease;
}

.footer-links .footer-link:hover,
.footer-links .footer-link:focus {
    color: #ffffff;
    opacity: 1;
    text-decoration: underline;
}

.footer-links .footer-link:focus {
    outline: 2px solid rgba(255, 255, 255, 0.12);
    outline-offset: 3px;
}

@media (max-width: 767px) {
    .footer-links {
        grid-template-columns: 1fr;
        margin-top: 12px;
    }
}

.quick-links {
    padding: 0;
    margin: 0;
    list-style: none;
    line-height: 2.5em;
    color: #fff;
    text-decoration: none;
}

.quick-link {
    color: #fff;
    text-decoration: none;

}

/* Footer quick links: present as a vertical, accessible list */
.quick-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: -10px 8px;
    /* reduced horizontal gap between columns */
}

.quick-links li {
    margin: 0;
}

.quick-links .quick-link {
    display: inline-block;
    color: #fff;
    opacity: 0.95;
    transition: color .18s ease, transform .12s ease, opacity .12s ease;
}

.quick-links .quick-link:hover,
.quick-links .quick-link:focus {
    color: #ffffff;
    opacity: 1;
    text-decoration: underline;
}

.quick-links .quick-link:focus {
    outline: 2px solid rgba(255, 255, 255, 0.12);
    outline-offset: 3px;
}

@media (max-width: 767px) {
    .quick-links {
        grid-template-columns: 1fr;
        margin-top: 12px;
    }
}


.footer-title {
    color: #fff
}

.footer-text a,
.footer-text i {
    color: #fff
}

.whole-wrap {
    background-color: #fff
}

.generic-banner {
    margin-top: 60px;
    background-color: #000000;
    text-align: center
}

.generic-banner .height {
    height: 600px
}

@media (max-width: 767.98px) {
    .generic-banner .height {
        height: 400px
    }
}

.generic-banner .generic-banner-content h2 {
    line-height: 1.2em;
    margin-bottom: 20px
}

@media (max-width: 991.98px) {
    .generic-banner .generic-banner-content h2 br {
        display: none
    }
}

.generic-banner .generic-banner-content p {
    text-align: center;
    font-size: 16px
}

@media (max-width: 991.98px) {
    .generic-banner .generic-banner-content p br {
        display: none
    }
}

.generic-content h1 {
    font-weight: 600
}

.about-generic-area {
    background: #fff
}

.about-generic-area p {
    margin-bottom: 20px
}

.white-bg {
    background: #fff
}

.section-top-border {
    padding: 50px 0;
    border-top: 1px dotted #eee
}

.switch-wrap {
    margin-bottom: 10px
}

.switch-wrap p {
    margin: 0
}

.about-video-left h6 {
    color: #000000;
    font-weight: 300;
    letter-spacing: 2px;
    font-size: 12px
}

.about-video-left h1 {
    padding: 20px 0
}

@media (max-width: 413px) {
    .about-video-left h1 br {
        display: none
    }
}

.about-video-left p {
    margin-bottom: 0px
}

.about-video-left p span {
    font-size: 16px;
    font-weight: 300;
    color: #222
}

.about-video-left .primary-btn {
    border-radius: 0;
    border: 1px solid transparent
}

.about-video-left .primary-btn:hover {
    background: transparent;
    border-color: #000000;
    color: #000000
}

.about-video-right {
    background: url(../img/backgrounds/video-bg.jpg) no-repeat center;
    background-size: cover;
    height: 330px
}

.about-video-right .overlay-bg {
    background: #04091e;
    opacity: .8
}

.about-video-right .play-btn {
    z-index: 2
}

@media (max-width: 960px) {
    .about-video-right {
        margin-top: 100px
    }
}

@media (max-width: 991px) {
    .project-details-right {
        margin-top: 50px
    }
}

.project-details-right .details-info .names li {
    font-weight: 400;
    color: black
}

.project-details-right .details-info .desc li {
    margin-left: 20px
}

.project-details-right .details-info .desc .star .checked {
    color: #000000
}

.project-details-right .social-links i {
    color: #777;
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    margin-right: 10px
}

.project-details-right .social-links i:hover {
    color: #000000
}

.link-nav {
    margin-top: 10px;
    margin-bottom: 0px
}

.about-content {
    margin-top: 110px;
    padding: 50px 0px;
    text-align: center
}

@media (max-width: 767px) {
    .about-content {
        margin-top: 70px
    }
}

.about-content h1 {
    font-size: 48px;
    font-weight: 600
}

.about-content a {
    color: #fff;
    font-weight: 300;
    font-size: 14px
}

.about-content .lnr {
    margin: 0px 10px;
    font-weight: 600
}

.contact-page-area .map-wrap {
    margin-bottom: 120px
}

@media (max-width: 991px) {
    .contact-page-area .map-wrap {
        margin-bottom: 50px
    }
}

.contact-page-area .contact-btns {
    font-size: 18px;
    font-weight: 600;
    text-align: center;
    padding: 40px;
    color: #fff;
    margin-bottom: 30px
}

.contact-page-area .contact-btns:hover {
    color: #fff
}

.contact-page-area .form-area input {
    padding: 15px
}

.contact-page-area .form-area input,
.contact-page-area .form-area textarea {
    border-radius: 0;
    font-size: 12px
}

.contact-page-area .form-area textarea {
    height: 190px;
    margin-top: 0px
}

.contact-page-area .form-area .primary-btn {
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s
}

.contact-page-area .form-area .primary-btn:hover {
    border: 1px solid #000000;
    color: #000000 !important
}

.contact-page-area .single-contact-address {
    margin-bottom: 20px
}

.contact-page-area .single-contact-address h5 {
    font-weight: 300;
    font-size: 16px;
    margin-bottom: 5px
}

.contact-page-area .single-contact-address .lnr {
    font-size: 30px;
    font-weight: 500;
    color: #000000;
    margin-right: 30px
}

.blog-home-banner {
    background: url(../img/content/blog/blog-home-banner.jpg) bottom;
    background-size: cover;
    padding: 130px 0px
}

.blog-home-banner .primary-btn {
    border-radius: 0px;
    background: #fff;
    color: #222;
    font-weight: 600;
    border: 1px solid transparent;
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s
}

.blog-home-banner .primary-btn:hover {
    background: transparent;
    border-color: #fff;
    color: #fff
}

.blog-home-banner .overlay-bg {
    background: rgba(0, 0, 0, 0.5)
}

.blog-page {
    background: #f9f9ff
}

.blog-header-content h1 {
    max-width: 500px;
    margin-left: auto;
    margin-right: auto
}

@media (max-width: 414px) {
    .blog-header-content h1 {
        font-size: 30px
    }
}

.blog-header-content p {
    margin: 20px 0px
}

.top-category-widget-area .single-cat-widget {
    position: relative;
    text-align: center
}

.top-category-widget-area .single-cat-widget .overlay-bg {
    background: rgba(0, 0, 0, 0.85);
    margin: 7%;
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s
}

.top-category-widget-area .single-cat-widget img {
    width: 100%
}

.top-category-widget-area .single-cat-widget .content-details {
    top: 32%;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    color: #fff;
    bottom: 0px;
    position: absolute
}

.top-category-widget-area .single-cat-widget .content-details h4 {
    color: #fff
}

.top-category-widget-area .single-cat-widget .content-details span {
    display: inline-block;
    background: #fff;
    width: 60%;
    height: 1%
}

.top-category-widget-area .single-cat-widget:hover .overlay-bg {
    background: rgba(198, 176, 105, 0.85);
    margin: 7%;
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s
}

@media (max-width: 991px) {
    .top-category-widget-area .single-cat-widget {
        margin-bottom: 50px
    }
}

.post-content-area .single-post {
    margin-bottom: 50px
}

.post-content-area .single-post .meta-details {
    text-align: right;
    margin-top: 35px
}

@media (max-width: 767px) {
    .post-content-area .single-post .meta-details {
        text-align: left
    }
}

.post-content-area .single-post .meta-details .tags {
    margin-bottom: 30px
}

.post-content-area .single-post .meta-details .tags li {
    display: inline-block;
    font-size: 14px
}

.post-content-area .single-post .meta-details .tags li a {
    color: #222;
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s
}

.post-content-area .single-post .meta-details .tags li a:hover {
    color: #000000
}

@media (max-width: 1024px) {
    .post-content-area .single-post .meta-details {
        margin-top: 0px
    }
}

.post-content-area .single-post .user-name a,
.post-content-area .single-post .date a,
.post-content-area .single-post .view a,
.post-content-area .single-post .comments a {
    color: #777;
    margin-right: 10px;
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s
}

.post-content-area .single-post .user-name a:hover,
.post-content-area .single-post .date a:hover,
.post-content-area .single-post .view a:hover,
.post-content-area .single-post .comments a:hover {
    color: #000000
}

.post-content-area .single-post .user-name .lnr,
.post-content-area .single-post .date .lnr,
.post-content-area .single-post .view .lnr,
.post-content-area .single-post .comments .lnr {
    font-weight: 900;
    color: #222
}

.post-content-area .single-post .feature-img img {
    width: 100%
}

.post-content-area .single-post .posts-title h3 {
    margin: 20px 0px
}

.post-content-area .single-post .excert {
    margin-bottom: 20px
}

.post-content-area .single-post .primary-btn {
    background: #fff !important;
    color: #222 !important;
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    border-radius: 0px !important
}

.post-content-area .single-post .primary-btn:hover {
    background: #000000 !important;
    color: #fff !important
}

.blog-pagination {
    padding-top: 60px;
    padding-bottom: 120px
}

.blog-pagination .page-link {
    border-radius: 0
}

.blog-pagination .page-item {
    border: none
}

.page-link {
    background: transparent;
    font-weight: 400
}

.blog-pagination .page-item.active .page-link {
    background-color: #000000;
    border-color: transparent
}

.blog-pagination .page-link {
    position: relative;
    display: block;
    padding: 0.5rem 0.75rem;
    margin-left: -1px;
    line-height: 1.25;
    color: #777;
    border: none
}

.blog-pagination .page-link .lnr {
    font-weight: 600
}

.blog-pagination .page-item:last-child .page-link,
.blog-pagination .page-item:first-child .page-link {
    border-radius: 0
}

.blog-pagination .page-link:hover {
    color: #fff;
    text-decoration: none;
    background-color: #000000;
    border-color: #eee
}

.widget-wrap {
    background: #fafaff;
    padding: 20px 0px;
    border: 1px solid #eee
}

@media (max-width: 991px) {
    .widget-wrap {
        margin-top: 50px
    }
}

.widget-wrap .single-sidebar-widget {
    margin: 30px 30px;
    padding-bottom: 30px;
    border-bottom: 1px solid #eee
}

.widget-wrap .single-sidebar-widget:last-child {
    border-bottom: none;
    margin-bottom: 0px
}

.widget-wrap .search-widget form.search-form input[type=text] {
    color: #fff;
    padding: 10px 22px;
    font-size: 14px;
    border: none;
    float: left;
    width: 80%;
    border-bottom-left-radius: 20px;
    border-top-left-radius: 20px;
    background: #000000
}

.widget-wrap .search-widget ::-webkit-input-placeholder {
    color: #fff
}

.widget-wrap .search-widget ::-moz-placeholder {
    color: #fff
}

.widget-wrap .search-widget :-ms-input-placeholder {
    color: #fff
}

.widget-wrap .search-widget :-moz-placeholder {
    color: #fff
}

.widget-wrap .search-widget form.search-form button {
    float: left;
    width: 20%;
    padding: 10px;
    background: #000000;
    color: white;
    font-size: 17px;
    border: none;
    cursor: pointer;
    border-bottom-right-radius: 20px;
    border-top-right-radius: 20px
}

.widget-wrap .search-widget form.search-form::after {
    content: "";
    clear: both;
    display: table
}

.widget-wrap .user-info-widget {
    text-align: center
}

.widget-wrap .user-info-widget a h4 {
    margin-top: 40px;
    margin-bottom: 5px;
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s
}

.widget-wrap .user-info-widget .social-links li {
    display: inline-block;
    margin-bottom: 10px
}

.widget-wrap .user-info-widget .social-links li a {
    color: #222;
    padding: 10px;
    font-size: 14px;
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s
}

.widget-wrap .user-info-widget .social-links li a:hover {
    color: #000000
}

.widget-wrap .popular-post-widget .popular-title {
    background: #000000;
    color: #fff;
    text-align: center;
    padding: 12px 0px
}

.widget-wrap .popular-post-widget .popular-post-list {
    margin-top: 30px
}

.widget-wrap .popular-post-widget .popular-post-list .thumb img {
    width: 100%
}

.widget-wrap .popular-post-widget .single-post-list {
    margin-bottom: 20px
}

.widget-wrap .popular-post-widget .single-post-list .details {
    margin-left: 12px
}

.widget-wrap .popular-post-widget .single-post-list .details h6 {
    font-weight: 600;
    margin-bottom: 10px
}

.widget-wrap .popular-post-widget .single-post-list .details p {
    margin-bottom: 0px
}

.widget-wrap .ads-widget img {
    width: 100%
}

.widget-wrap .post-category-widget .category-title {
    background: #000000;
    color: #fff;
    text-align: center;
    padding: 12px 0px
}

.widget-wrap .post-category-widget .cat-list li {
    padding-top: 15px;
    padding-bottom: 8px;
    border-bottom: 2px dotted #eee;
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s
}

.widget-wrap .post-category-widget .cat-list li p {
    font-weight: 300;
    font-size: 14px;
    margin-bottom: 0px;
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s
}

.widget-wrap .post-category-widget .cat-list li a {
    color: #777
}

.widget-wrap .post-category-widget .cat-list li:hover {
    border-color: #000000
}

.widget-wrap .post-category-widget .cat-list li:hover p {
    color: #000000
}

.widget-wrap .newsletter-widget .newsletter-title {
    background: #000000;
    color: #fff;
    text-align: center;
    padding: 12px 0px
}

.widget-wrap .newsletter-widget .col-autos {
    width: 100%
}

.widget-wrap .newsletter-widget p {
    text-align: center;
    margin: 20px 0px
}

.widget-wrap .newsletter-widget .bbtns {
    background: #000000;
    color: #fff;
    font-size: 12px;
    font-weight: 400;
    padding: 8px 20px;
    border-radius: 0
}

.widget-wrap .newsletter-widget .input-group-text {
    background: #fff;
    border-radius: 0px;
    vertical-align: top
}

.widget-wrap .newsletter-widget .input-group-text i {
    color: #ccc;
    margin-top: -1px
}

.widget-wrap .newsletter-widget .form-control {
    border-left: none !important;
    border-right: none !important;
    border-radius: 0px;
    font-size: 13px;
    color: #ccc;
    padding: 9px;
    padding-left: 0px
}

.widget-wrap .newsletter-widget .form-control:focus {
    box-shadow: none;
    border-color: #ccc
}

.widget-wrap .newsletter-widget ::-webkit-input-placeholder {
    font-size: 13px;
    color: #ccc
}

.widget-wrap .newsletter-widget ::-moz-placeholder {
    font-size: 13px;
    color: #ccc
}

.widget-wrap .newsletter-widget :-ms-input-placeholder {
    font-size: 13px;
    color: #ccc
}

.widget-wrap .newsletter-widget :-moz-placeholder {
    font-size: 13px;
    color: #ccc
}

.widget-wrap .newsletter-widget .text-bottom {
    margin-bottom: 0px
}

.widget-wrap .tag-cloud-widget .tagcloud-title {
    background: #000000;
    color: #fff;
    text-align: center;
    padding: 12px 0px;
    margin-bottom: 30px
}

.widget-wrap .tag-cloud-widget ul li {
    display: inline-block;
    border: 1px solid #eee;
    background: #fff;
    padding: 4px 14px;
    margin-bottom: 10px;
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s
}

.widget-wrap .tag-cloud-widget ul li:hover {
    background: #000000
}

.widget-wrap .tag-cloud-widget ul li:hover a {
    color: #fff
}

.widget-wrap .tag-cloud-widget ul li a {
    font-size: 12px;
    color: black
}

.single-post-area {
    padding-top: 80px;
    padding-bottom: 80px
}

.single-post-area .meta-details {
    margin-top: 20px !important
}

.single-post-area .social-links li {
    display: inline-block;
    margin-bottom: 10px
}

.single-post-area .social-links li a {
    color: #222;
    padding: 7px;
    font-size: 14px;
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s
}

.single-post-area .social-links li a:hover {
    color: #000000
}

.single-post-area .quotes {
    margin-top: 20px;
    padding: 30px;
    background-color: #fff;
    box-shadow: -20.84px 21.58px 30px 0px rgba(176, 176, 176, 0.1)
}

.single-post-area .arrow {
    position: absolute
}

.single-post-area .arrow .lnr {
    font-size: 20px;
    font-weight: 600
}

.single-post-area .thumb .overlay-bg {
    background: rgba(0, 0, 0, 0.8)
}

.single-post-area .navigation-area {
    border-top: 1px solid #eee;
    padding-top: 30px
}

.single-post-area .navigation-area .nav-left {
    text-align: left
}

.single-post-area .navigation-area .nav-left .thumb {
    margin-right: 20px;
    background: #000
}

.single-post-area .navigation-area .nav-left .thumb img {
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s
}

.single-post-area .navigation-area .nav-left .lnr {
    margin-left: 20px;
    opacity: 0;
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s
}

.single-post-area .navigation-area .nav-left:hover .lnr {
    opacity: 1
}

.single-post-area .navigation-area .nav-left:hover .thumb img {
    opacity: .5
}

@media (max-width: 767px) {
    .single-post-area .navigation-area .nav-left {
        margin-bottom: 30px
    }
}

.single-post-area .navigation-area .nav-right {
    text-align: right
}

.single-post-area .navigation-area .nav-right .thumb {
    margin-left: 20px;
    background: #000
}

.single-post-area .navigation-area .nav-right .thumb img {
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s
}

.single-post-area .navigation-area .nav-right .lnr {
    margin-right: 20px;
    opacity: 0;
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s
}

.single-post-area .navigation-area .nav-right:hover .lnr {
    opacity: 1
}

.single-post-area .navigation-area .nav-right:hover .thumb img {
    opacity: .5
}

.comments-area {
    background: #fafaff;
    border: 1px solid #eee;
    padding: 50px 20px;
    margin-top: 50px
}

@media (max-width: 414px) {
    .comments-area {
        padding: 50px 8px
    }
}

.comments-area h4 {
    text-align: center;
    margin-bottom: 50px
}

.comments-area a {
    color: #222
}

.comments-area .comment-list {
    padding-bottom: 30px
}

.comments-area .comment-list:last-child {
    padding-bottom: 0px
}

.comments-area .comment-list.left-padding {
    padding-left: 25px
}

@media (max-width: 413px) {
    .comments-area .comment-list .single-comment h5 {
        font-size: 12px
    }

    .comments-area .comment-list .single-comment .date {
        font-size: 11px
    }

    .comments-area .comment-list .single-comment .comment {
        font-size: 10px
    }
}

.comments-area .thumb {
    margin-right: 20px
}

.comments-area .date {
    font-size: 13px;
    color: #cccccc
}

.comments-area .comment {
    color: #777777
}

.comments-area .btn-reply {
    background-color: #fff;
    color: #222;
    padding: 8px 30px;
    display: block;
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s
}

.comments-area .btn-reply:hover {
    background-color: #000000;
    color: #fff
}

.comment-form {
    text-align: center;
    background: #fafaff;
    border: 1px solid #eee;
    padding: 50px 20px;
    margin-top: 50px
}

.comment-form h4 {
    text-align: center;
    margin-bottom: 50px
}

.comment-form .name {
    padding-left: 0px
}

@media (max-width: 991px) {
    .comment-form .name {
        padding-right: 0px
    }
}

.comment-form .email {
    padding-right: 0px
}

@media (max-width: 991px) {
    .comment-form .email {
        padding-left: 0px
    }
}

.comment-form .form-control {
    padding: 10px;
    background: #fff;
    border: none;
    border-radius: 0px;
    width: 100%;
    font-size: 13px;
    color: #777777
}

.comment-form .form-control:focus {
    box-shadow: none
}

.comment-form ::-webkit-input-placeholder {
    font-size: 13px;
    color: #777
}

.comment-form ::-moz-placeholder {
    font-size: 13px;
    color: #777
}

.comment-form :-ms-input-placeholder {
    font-size: 13px;
    color: #777
}

.comment-form :-moz-placeholder {
    font-size: 13px;
    color: #777
}

.comment-form .primary-btn {
    border-radius: 0px !important;
    border: 1px solid transparent
}

.comment-form .primary-btn:hover {
    background: transparent;
    border-color: #000000 !important;
    color: #000000 !important
}

/* ===============================
   Showcase Area Styles
================================ */
.showcase-area {
    padding: 0;
}

.showcase-item {
    position: relative;
    height: 400px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.4s ease;
}

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

.showcase-bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.6s ease;
}

.showcase-item:hover .showcase-bg {
    transform: scale(1.1);
    filter: brightness(0.7);
}

.showcase-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.652);
    transition: all 0.4s ease;
    z-index: 1;
}

.showcase-item:hover .showcase-overlay {
    background: rgba(0, 0, 0, 0.5);
}

.showcase-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 2;
    color: white;
    transition: all 0.4s ease;
}

.showcase-content h3 {
    color: rgb(162, 162, 162);
    font-size: 2.5rem;
    font-weight: 600;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
    transition: all 0.4s ease;
}

.showcase-content p {
    font-size: 0.9rem;
    font-weight: 300;
    letter-spacing: 1px;
    text-transform: uppercase;
    opacity: 0.9;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
    transition: all 0.4s ease;
}

.showcase-item:hover .showcase-content h3 {
    transform: translateY(-10px);
    color: #fff;
}

.showcase-item:hover .showcase-content p {
    transform: translateY(5px);
    opacity: 1;
}

/* Responsive Design */
@media (max-width: 768px) {
    .showcase-item {
        height: 300px;
    }

    .showcase-content h3 {
        font-size: 2rem;
    }

    .showcase-content p {
        font-size: 0.8rem;
    }
}

@media (max-width: 576px) {
    .showcase-item {
        height: 250px;

        /* Showcase panel hover movement / parallax */
        .showcase-panel {
            background-size: cover !important;
            background-position: 50% 50% !important;
            transition: transform 420ms cubic-bezier(.2, .9, .2, 1), background-position 420ms cubic-bezier(.2, .9, .2, 1);
            will-change: transform, background-position;
        }

        .showcase-panel:hover {
            transform: scale(1.03);
        }

        @media (max-width: 900px) {

            /* reduce movement on small screens */
            .showcase-panel:hover {
                transform: none;
            }
        }
    }

    .showcase-content h3 {
        font-size: 1.5rem;
    }

    .showcase-content p {
        font-size: 0.7rem;
    }
}


/* Countries — black & white modern cards */
.countries-bw {
    background: #0f0f10;
    color: #fff;
    padding: 60px 0;
    font-family: 'Poppins', Arial, sans-serif;
}

.countries-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

.countries-title {
    text-align: center;
    font-size: 28px;
    margin: 0 0 6px;
    font-weight: 700;
    color: #fff;
}

.countries-sub {
    text-align: center;
    color: #bdbdbd;
    margin: 0 0 28px;
    font-size: 15px;
}

.countries-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 20px;
    align-items: stretch;
}

.country-card {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.01));
    border: 1px solid rgba(255, 255, 255, 0.04);
    padding: 20px;
    border-radius: 12px;
    display: flex;
    gap: 14px;
    align-items: center;
    transition: transform 220ms ease, box-shadow 220ms ease;
}

.country-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
}

.flag {
    width: 64px;
    height: 48px;
    flex: 0 0 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 8px;
    filter: grayscale(100%) contrast(90%);
    border: 1px solid rgba(255, 255, 255, 0.03);
    background: #121212;
}

.flag img {
    width: 100%;
    height: auto;
    display: block;
}

.meta h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
}

.meta .muted {
    margin: 6px 0 0;
    color: #bdbdbd;
    font-size: 13px;
}

@media (max-width: 880px) {
    .countries-inner {
        padding: 0 20px;
    }

    .countries-bw {
        padding: 40px 0;
    }

    .flag {
        width: 56px;
        height: 40px;
    }

    .meta h3 {
        font-size: 15px;
    }
}

@media (max-width: 520px) {
    .countries-grid {
        grid-template-columns: 1fr;
    }

    .country-card {
        gap: 12px;
        padding: 16px;
    }

    .flag {
        width: 56px;
        height: 40px;
    }
}

@keyframes bounceDown {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(15px);
    }
}

/* Fullscreen showcase panels — upgraded interactions */
.showcase-area {
    padding: 0;
}

.showcase-full {
    display: flex;
    width: 100%;
    height: 100vh;
}

.showcase-panel {
    flex: 1 1 33.333%;
    background-size: cover;
    background-position: center;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    transition: flex 1200ms cubic-bezier(.16, 1, .3, 1), transform 780ms ease, filter 900ms ease;
    cursor: pointer;
    will-change: flex, transform;
}

.panel-mask {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(6, 6, 6, 0.45), rgba(6, 6, 6, 0.6));
    display: flex;
    align-items: center;
    justify-content: flex-start;
    transition: background 900ms ease;
}

.panel-content {
    text-align: left;
    max-width: 420px;
    padding: 32px;
    margin-left: 24px;
    transition: max-width 1000ms cubic-bezier(.16, 1, .3, 1), padding 900ms ease, margin 900ms ease;
    overflow: visible;
}

.panel-content h3 {
    font-size: 28px;
    margin: 0 0 8px;
    font-weight: 700;
    color: #cfcfcf;
    white-space: nowrap;
    transition: color 700ms ease, opacity 820ms ease, transform 1000ms cubic-bezier(.16, 1, .3, 1);
    transform-origin: left center;
}

.panel-content p {
    margin: 0;
    color: #d0d0d0;
}

/* SHOW PROJECT BUTTON — black & white fill animation, square corners */
.show-project {
    display: inline-flex;
    z-index: 0;
    gap: 10px;
    position: relative;
}

.show-project {
    z-index: 5;
    padding: 10px 18px;
    text-decoration: none;
    color: #ffffff;
    font-weight: 700;
    background: transparent;
    /* transparent by default */
    border: 1px solid #fff;
    /* white border */
    margin-top: 12px;
    transition: color 620ms ease, transform 700ms cubic-bezier(.16, 1, .3, 1), background 620ms ease;
    border-radius: 0;
}

.show-project * {
    position: relative;
    z-index: 0;
}

.show-project .arrow {
    display: inline-block;
    transition: transform 760ms cubic-bezier(.16, 1, .3, 1);
}

.show-project::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #ffffff;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 820ms cubic-bezier(.16, 1, .3, 1);
    z-index: -1;
}

.show-project:hover::before {
    transform: scaleX(1);
}

.show-project:hover {
    color: #000000;
    /* text becomes black on hover (over white fill) */
    background: #ffffff;
    z-index: 2 !important;
}

/* make button text black and white alternating when background changes */
.show-project:focus {
    outline: 2px solid rgba(255, 255, 255, 0.12);
}

/* Hide description and button until hovered/expanded/focused */
.panel-content p,
.show-project {
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
    transition: opacity 760ms cubic-bezier(.16, 1, .3, 1), transform 820ms cubic-bezier(.16, 1, .3, 1);
}

/* add animation for description reveal */
.panel-content p {
    transform-origin: left top;
    transition: opacity 820ms cubic-bezier(.16, 1, .3, 1), transform 880ms cubic-bezier(.16, 1, .3, 1);
}

/* Reveal on desktop hover (when a single panel is hovered) or when panel is expanded (mobile/tap or keyboard focus) */
.showcase-full:hover .showcase-panel:hover .panel-content p,
.showcase-full:hover .showcase-panel:hover .show-project,
.showcase-panel.expanded .panel-content p,
.showcase-panel.expanded .show-project,
.showcase-panel:focus .panel-content p,
.showcase-panel:focus .show-project {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}

/* Desktop hover behaviour: focus one panel and shrink others */
@media (hover: hover) and (min-width: 901px) {

    /* separators between panels (pure white) */
    .showcase-panel {
        border-right: 1px solid #fff;
        border-left: 1px solid #fff;
    }

    /* when hovering the container, shrink others to thin titles-only columns */
    .showcase-full:hover .showcase-panel {
        flex: 0.34 1 12%;
        overflow: visible;
        transition: flex 1200ms cubic-bezier(.16, 1, .3, 1), opacity 900ms ease, filter 900ms ease;
    }

    /* the hovered panel expands to full-width (other panels only show titles) */
    .showcase-full:hover .showcase-panel:hover {
        flex: 4.8 1 76%;
    }

    .showcase-full:hover .showcase-panel:hover .panel-content h3 {
        color: #fff;
        opacity: 1;
        transform: translateY(-2px) scale(1);
    }

    .showcase-full:hover .showcase-panel:hover .panel-mask {
        background: linear-gradient(180deg, rgba(6, 6, 6, 0.38), rgba(6, 6, 6, 0.56));
    }
}

/* ensure the anchor itself sits above the pseudo-element so the text remains visible */
.show-project {
    z-index: 3;
}

/* Hide other panels' background images while keeping their titles visible when a panel is hovered */
@media (hover: hover) and (min-width: 901px) {
    .showcase-full:hover .showcase-panel:not(:hover) {
        /* keep background images visible for non-hovered panels (user requested)	*/
        opacity: 1;
    }

    /* ensure the non-hover panels show only their title: reveal h3, hide description and button */
    .showcase-full:hover .showcase-panel:not(:hover) .panel-content {
        padding-left: 22px;
        max-width: none;
        width: max-content;
    }

    .showcase-full:hover .showcase-panel:not(:hover) .panel-content h3 {
        color: #fff;
        opacity: 0.82;
        transform: translateX(-4px) scale(0.94);
    }

    .showcase-full:hover .showcase-panel:not(:hover) .panel-content p,
    .showcase-full:hover .showcase-panel:not(:hover) .show-project {
        opacity: 0 !important;
        pointer-events: none !important;
    }
}

/* When a panel has .expanded (used for keyboard/tap) it should take focus */
.showcase-panel.expanded {
    flex: 4.5 !important;
    z-index: 5;
}

.showcase-panel.expanded .panel-content h3 {
    color: #fff;
}

.showcase-full.has-expanded .showcase-panel:not(.expanded) {
    display: block;
    flex: 0.8 1 14%;
    opacity: 0.25;
    pointer-events: none;
}

/* Mobile behaviour: stack and allow tap-to-expand */
@media (max-width: 900px) {
    .showcase-full {
        flex-direction: column;
        height: auto;
    }

    .showcase-panel {
        width: 100%;
        min-height: 50vh;
    }

    .showcase-panel.expanded {
        min-height: 100vh;
    }

    .showcase-full.has-expanded .showcase-panel:not(.expanded) {
        display: none;
    }

    .panel-content {
        margin-left: 18px;
        padding: 18px;
    }

    /* On mobile always show description and button */
    .panel-content p,
    .show-project {
        opacity: 1 !important;
        transform: none !important;
        pointer-events: auto !important;
    }

    /* keep X hidden on mobile (user request) */
    .close-panel {
        display: none;
    }
}

/* accessibility: keyboard focus */
.showcase-panel:focus {
    outline: 3px solid rgba(255, 255, 255, 0.08);
    transform: translateY(-3px);
}

/* Word-by-word description animation */
.panel-content p .word {
    display: inline-block;
    opacity: 0;
    transform: translateY(10px);
    will-change: transform, opacity;
}

.showcase-full:hover .showcase-panel:hover .panel-content p .word,
.showcase-panel.expanded .panel-content p .word,
.showcase-panel:focus .panel-content p .word {
    animation: wordIn 640ms cubic-bezier(.16, 1, .3, 1) forwards;
    animation-delay: var(--delay, 0ms);
}

@keyframes wordIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* helper class: play words animation when activated via JS */
.showcase-panel.words-active .panel-content p .word {
    animation: wordIn 640ms cubic-bezier(.16, 1, .3, 1) forwards !important;
    animation-delay: var(--delay, 0ms) !important;
}

/* -------------------------------------------------------------------------
   Hide native scrollbars visually across browsers while preserving scrolling
   - keeps scroll functionality, simply hides the UI chrome
   - Covers WebKit, Firefox, and modern Chromium browsers
 ------------------------------------------------------------------------- */

/* For modern Chromium/WebKit browsers */
*::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
}

/* For Firefox: thumb/track colors are made transparent */
* {
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE 10+ */
}

/* Some browsers respect this - ensure any visible track/thumb are transparent */
*::-webkit-scrollbar-thumb {
    background: transparent !important;
}

/* Optional: if any custom elements rely on visible scrollbars for layout, you
   can re-enable them by adding the class `show-scrollbar` to the element.
   For example: `html.show-scrollbar * { scrollbar-width: auto; }` */


/* Timeline inline styles (scoped) */
.timeline-view {
    padding: 30px 0
}

.timeline-inner {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 28px;
    max-width: 1000px;
    margin: 0 auto;
    padding: 10px 20px
}

/* ensure the timeline aligns with Bootstrap container on very large screens */
.timeline-inner {
    box-sizing: border-box
}

@media(min-width:1200px) {

    /* Bootstrap .container width at >=1200px is 1140px; match it so the timeline centers with the page */
    .timeline-inner {
        max-width: 900px
    }
}

/* center vertical line */
.timeline-inner::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    background: rgba(0, 0, 0, 0.08);
    transform: translateX(-50%)
}

/* progress fill (placed on top of the center line) */
.timeline-inner__progress {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    transform: translateX(-50%);
    pointer-events: none;
}

.timeline-inner__fill {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 0;
    background: #000000;
    opacity: 0.95;
    transform-origin: top;
}

/* each item uses a 3-column grid: left | center(gutter/line) | right */
.timeline-item {
    display: grid;
    grid-template-columns: 1fr 40px 1fr;
    align-items: start;
    gap: 12px;
    position: relative;
    padding: 8px 0;
    transition: opacity .6s cubic-bezier(.2, .8, .2, 1), transform .6s cubic-bezier(.2, .8, .2, 1)
}

/* initial off-screen positions (different for odd/even) */
.timeline-item:not(.in-view):nth-child(odd) {
    opacity: 0;
    transform: translateX(-80px) translateY(8px)
}

.timeline-item:not(.in-view):nth-child(even) {
    opacity: 0;
    transform: translateX(80px) translateY(8px)
}

.timeline-item.in-view {
    opacity: 1;
    transform: none
}

/* dot marker in the center column */
.timeline-item::before {
    content: "";
    grid-column: 2;
    justify-self: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #000000;
    border: 4px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    margin-top: 6px
}

.year-stamp {
    color: #333;
    font-weight: 700;
    font-size: 18px;
    align-self: start
}

.project-card {
    background: #ffffff;
    padding: 18px;
    border-radius: 0;
    border: 1px solid rgba(0, 0, 0, 0.08);
    max-width: 420px
}

.project-card h4 {
    margin: 0 0 8px;
    color: #222
}

.project-card p {
    margin: 0 0 12px;
    color: #666666
}

/* project thumbnail inside project-card */
.project-thumb {
    display: block;
    width: 100%;
    height: 160px;
    object-fit: cover;
    border-radius: 0;
    margin: 0 0 12px;
    border: 1px solid rgba(0, 0, 0, 0.08)
}

@media(max-width:879px) {
    .project-thumb {
        height: 140px
    }
}

.project-card .primary-btn {
    display: inline-block;
    padding: 8px 14px;
    background: transparent;
    color: #000000;
    text-decoration: none;
    border: 2px solid rgba(0, 0, 0, 0.08);
    border-radius: 2px;
    font-weight: 600;
    letter-spacing: 0.6px;
    position: relative;
    overflow: hidden;
    transition: all .32s ease;
}

/* Read-more button animations */
.project-card .primary-btn {
    transition: transform .24s cubic-bezier(.2, .9, .2, 1), background-color .18s ease, color .18s ease, box-shadow .18s ease;
}

/* hover/focus effect */
.project-card .primary-btn:hover,
.project-card .primary-btn:focus {
    transform: translateY(-3px);
    background: #000000;
    color: #ffffff;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.16);
    outline: 0;
}

/* shimmer stripe like .discover-btn */
.project-card .primary-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -120%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.15), transparent);
    transition: left .5s
}

.project-card .primary-btn:hover::before {
    left: 120%
}

/* visible focus for keyboard users */
.project-card .primary-btn:focus-visible {
    outline: 3px solid rgba(0, 0, 0, 0.15);
    outline-offset: 3px
}

/* entrance pulse when parent item reveals */
.timeline-item.in-view .project-card .primary-btn {
    animation: btn-entrance .6s cubic-bezier(.2, .9, .2, 1) 0s 1;
}

@keyframes btn-entrance {
    0% {
        transform: translateY(8px) scale(.98);
        opacity: .0
    }

    60% {
        transform: translateY(-6px) scale(1.06);
        opacity: 1
    }

    100% {
        transform: translateY(0) scale(1)
    }
}

/* temporary pulse class: subtle attention on reveal */
.project-card .primary-btn.btn-pulse {
    animation: btn-pulse .75s cubic-bezier(.2, .9, .2, 1) 0s 1
}

@keyframes btn-pulse {
    0% {
        transform: scale(1);
        opacity: 1
    }

    40% {
        transform: scale(1.09)
    }

    70% {
        transform: scale(.99)
    }

    100% {
        transform: scale(1)
    }
}

/* respect reduced motion */
@media (prefers-reduced-motion: reduce) {

    .project-card .primary-btn,
    .timeline-item.in-view .project-card .primary-btn {
        transition: none !important;
        animation: none !important;
        transform: none !important;
    }

    /* also disable shimmer stripe */
    .project-card .primary-btn::before {
        transition: none !important;
        left: auto !important
    }
}

/* place content left or right of the center line */
.timeline-item:nth-child(odd) .year-stamp,
.timeline-item:nth-child(odd) .project-card {
    grid-column: 1
}

.timeline-item:nth-child(even) .year-stamp,
.timeline-item:nth-child(even) .project-card {
    grid-column: 3
}

/* text alignment for year stamp */
.timeline-item:nth-child(odd) .year-stamp {
    text-align: right;
    padding-right: 12px
}

.timeline-item:nth-child(even) .year-stamp {
    text-align: left;
    padding-left: 12px
}

@media(max-width:879px) {

    /* reserve a left gutter for the line and markers */
    .timeline-inner::before {
        left: 36px;
        transform: none
    }

    .timeline-inner__progress {
        left: 36px;
        transform: none
    }

    .timeline-inner {
        padding-left: 72px
    }

    /* two-column layout with two rows: year (top) and card (bottom) */
    .timeline-item {
        grid-template-columns: 56px 1fr;
        grid-template-rows: auto 1fr;
        padding-left: 0;
        align-items: start;
        gap: 8px
    }

    /* dot spans both rows and centers vertically */
    .timeline-item::before {
        grid-column: 1;
        grid-row: 1/3;
        justify-self: center;
        align-self: center;
        margin: 0;
        z-index: 0
    }

    /* year label in top row next to dot */
    .timeline-item .year-stamp {
        grid-column: 2;
        grid-row: 1;
        margin: 0 0 6px 0;
        padding: 0;
        text-align: left;
        align-self: center
    }

    /* project card occupies second row */
    .timeline-item .project-card {
        grid-column: 2;
        grid-row: 2;
        max-width: none;
        width: 100%;
        box-sizing: border-box;
        position: relative;
        z-index: 2;
        margin: 0
    }

    /* ensure odd items don't stay in the left column on mobile */
    .timeline-item:nth-child(odd) .project-card {
        grid-column: 2
    }

    .project-card .primary-btn {
        margin-top: 14px
    }

    /* simpler vertical reveal on small screens */
    .timeline-item:not(.in-view) {
        transform: translateY(18px) translateX(0)
    }

    /* user requested mobile overrides: reset grid placement and left-align years */
    .timeline-item:nth-child(odd) .year-stamp {
        text-align: left;
        /* padding-right: 12px; */
    }

    .timeline-item:nth-child(odd) .year-stamp,
    .timeline-item:nth-child(odd) .project-card {
        grid-column: auto;
    }

    .timeline-item:nth-child(even) .year-stamp {
        text-align: left;
        /* padding-left: 12px; */
    }

    .timeline-item:nth-child(even) .year-stamp,
    .timeline-item:nth-child(even) .project-card {
        grid-column: auto;
    }
}


.team-area--dark {
    background: #f8f9fa;
    color: #333;
    min-height: 100vh;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 120px 0 100px;
    box-sizing: border-box
}

.team-area--dark .team-inner {
    width: 100%;
    max-width: 1580px;
    margin: 0 auto;
    padding: 0 60px;
    box-sizing: border-box
}

.team-area--dark .team-header {
    text-align: center;
    margin: 0 0 90px
}

.team-area--dark .team-label {
    font-size: 12px;
    letter-spacing: 2px;
    font-weight: 600;
    margin: 0 0 14px;
    opacity: .9;
    color: #333
}

.team-area--dark .team-title {
    margin: 0;
    font-size: 72px;
    line-height: 1.05;
    font-weight: 700;
    letter-spacing: 1px;
    color: #222222
}

@media (max-width:1100px) {
    .team-area--dark .team-title {
        font-size: 56px
    }
}

@media (max-width:780px) {
    .team-area--dark .team-title {
        font-size: 44px
    }
}

@media (max-width:520px) {
    .team-area--dark .team-title {
        font-size: 36px
    }
}

.team-row {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 70px
}

@media (max-width:1350px) {
    .team-row {
        gap: 48px
    }
}

@media (max-width:1080px) {
    .team-row {
        gap: 40px
    }
}

@media (max-width:980px) {
    .team-row {
        grid-template-columns: repeat(2, 1fr);
        gap: 60px 46px
    }
}

@media (max-width:560px) {
    .team-row {
        grid-template-columns: 1fr;
        gap: 50px
    }
}

.team-person {
    display: flex;
    flex-direction: column
}

.team-figure {
    margin: 0;
    display: flex;
    flex-direction: column
}

.team-figure {
    position: relative
}

.team-figure img {
    width: 100%;
    height: 520px;
    object-fit: cover;
    display: block;
    filter: grayscale(18%);
    transition: transform .7s cubic-bezier(.19, 1, .22, 1), filter .6s ease, box-shadow .7s cubic-bezier(.19, 1, .22, 1)
}

@media (max-width:1350px) {
    .team-figure img {
        height: 480px
    }
}

@media (max-width:1080px) {
    .team-figure img {
        height: 420px
    }
}

@media (max-width:780px) {
    .team-figure img {
        height: 380px
    }
}

@media (max-width:560px) {
    .team-figure img {
        height: 340px
    }
}

.team-figure:hover img {
    transform: translateY(-10px) scale(1.02);
    filter: grayscale(0);
    box-shadow: 0 30px 40px -20px rgba(0, 0, 0, .55)
}

/* Flip card structure */
.team-flip {
    position: relative;
    perspective: 1300px;
    height: 520px
}

.team-face {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform-style: preserve-3d
}

.team-face--front {
    z-index: 2
}

.team-face--front img {
    height: 100%;
    width: 100%;
    object-fit: cover
}

.team-face--back {
    background: #ffffff;
    color: #333;
    padding: 28px 26px 24px;
    justify-content: center;
    align-items: flex-start;
    transform: rotateY(180deg);
    font-size: 14px;
    line-height: 1.55;
    letter-spacing: .2px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1)
}

.team-face--back p {
    margin: 0
}

.team-flip {
    transform-style: preserve-3d;
    transition: transform .9s cubic-bezier(.19, 1, .22, 1)
}

.team-figure:hover .team-flip,
.team-figure:focus-within .team-flip {
    transform: rotateY(180deg)
}

.team-figure:hover img,
.team-figure:focus-within img {
    transform: none;
    box-shadow: none
}

.team-figure:hover img {
    filter: grayscale(18%)
}

/* Hide caption while flipped for clarity */
.team-figure:hover .team-caption,
.team-figure:focus-within .team-caption {
    opacity: 0.15;
    transition: opacity .4s ease
}

@media (max-width:1350px) {

    .team-flip,
    .team-face--front img,
    .team-face--back {
        height: 480px
    }
}

@media (max-width:1080px) {

    .team-flip,
    .team-face--front img,
    .team-face--back {
        height: 420px
    }
}

@media (max-width:780px) {

    .team-flip,
    .team-face--front img,
    .team-face--back {
        height: 380px
    }
}

@media (max-width:560px) {

    .team-flip,
    .team-face--front img,
    .team-face--back {
        height: 340px
    }
}

.team-caption {
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    font-size: 14px;
    line-height: 1.35
}

.team-name {
    font-weight: 600;
    font-size: 14px;
    color: #222
}

.team-role {
    font-weight: 400;
    opacity: .75;
    font-size: 13px;
    color: #666
}

.team-person:focus-within .team-figure img {
    outline: 3px solid #333;
    outline-offset: 3px
}

/* reveal animation */
.team-person {
    opacity: 0;
    transform: translateY(40px);
    animation: teamFade .9s cubic-bezier(.19, 1, .22, 1) forwards
}

.team-person:nth-child(1) {
    animation-delay: .05s
}

.team-person:nth-child(2) {
    animation-delay: .15s
}

.team-person:nth-child(3) {
    animation-delay: .25s
}

.team-person:nth-child(4) {
    animation-delay: .35s
}

@keyframes teamFade {
    0% {
        opacity: 0;
        transform: translateY(40px)
    }

    60% {
        opacity: 1
    }

    100% {
        opacity: 1;
        transform: translateY(0)
    }
}

@media (prefers-reduced-motion:reduce) {
    .team-person {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important
    }

    .team-figure img {
        transition: none !important
    }

    .team-flip {
        transition: none !important;
        transform: none !important
    }

    .team-face--back {
        transform: none !important;
        opacity: 0;
        position: absolute
    }

    .team-figure:hover .team-face--back,
    .team-figure:focus-within .team-face--back {
        opacity: 1
    }
}

.scroll-arrow {
    display: inline-block;
    position: relative;
    color: #ffffff;
    font-size: 10px;
    animation: scrollArrowFloat 1.8s ease-in-out infinite;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .35));
}

.scroll-arrow__svg {
    display: block
}

@keyframes scrollArrowFloat {
    0% {
        transform: translateY(0);
        opacity: .85
    }

    50% {
        transform: translateY(12px);
        opacity: 1
    }

    100% {
        transform: translateY(0);
        opacity: .85
    }
}

@media (prefers-reduced-motion:reduce) {
    .scroll-arrow {
        animation: none
    }
}


/* Banner about default visibility */
.banner-about-wrap {
    opacity: 1;
    transform: none;
    transition: none;
    pointer-events: auto
}

.banner-about-wrap.is-visible {
    opacity: 1;
    transform: none;
    pointer-events: auto
}

@media (prefers-reduced-motion:reduce) {
    .banner-about-wrap {
        transition: none
    }
}


.about-company {
    position: relative;
    isolation: isolate;
    padding: 120px 0 110px;
    background: #050505;
    background: linear-gradient(150deg, #000000 0%, #000000 55%, #060606 100%);
    color: #e9e9e9;
    overflow: hidden
}

.about-company:before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 18% 22%, rgba(255, 255, 255, .06), transparent 60%);
    pointer-events: none;
    mix-blend-mode: screen;
    opacity: .8
}

.about-company__inner {
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 clamp(40px, 5vw, 90px);
    display: grid;
    grid-template-columns: minmax(0, 1fr) 520px;
    gap: clamp(60px, 7vw, 140px);
    align-items: center
}

@media (max-width:1100px) {
    .about-company__inner {
        grid-template-columns: 1fr;
    }
}

.about-company__text {
    max-width: 860px
}

.about-company__eyebrow {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2.4px;
    margin: 0 0 18px;
    display: inline-block;
    position: relative;
    padding-left: 46px;
    color: #fff;
    opacity: .85
}

.about-company__eyebrow:before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 34px;
    height: 2px;
    background: linear-gradient(90deg, #f0f0f0, #bdbdbd);
    transform: translateY(-50%);
}

.about-company__title {
    margin: 0 0 32px;
    font-size: clamp(2.4rem, 4.2vw, 4.2rem);
    line-height: 1.05;
    font-weight: 700;
    letter-spacing: .5px;
    color: #fff
}

.about-company__title-accent {
    background: linear-gradient(100deg, #f5f5f5, #c8c8c8 55%, #8e8e8e);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    position: relative
}

.about-company__lead {
    font-size: 18px;
    line-height: 1.55;
    margin: 0 0 26px;
    color: #d7d7d7;
    max-width: 68ch
}

.about-company__text p {
    font-size: 15.5px;
    line-height: 1.6;
    margin: 0 0 22px;
    max-width: 74ch
}

.about-company__text p:last-of-type {
    margin-bottom: 0
}

.about-company__signature-block {
    margin-top: 46px;
    display: flex;
    flex-direction: column;
    font-size: 14px;
    letter-spacing: .5px
}

.about-company__signature-label {
    font-weight: 500;
    opacity: .7;
    text-transform: uppercase;
    margin-bottom: 6px
}

.about-company__signature-name {
    font-family: inherit;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: .8px
}

.about-company__portrait {
    position: relative
}

.about-company__figure {
    margin: 0;
    position: relative;
    overflow: hidden
}

.about-company__figure:before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .55) 85%);
    opacity: .85;
    pointer-events: none;
    z-index: 1
}

.about-company__figure img {
    display: block;
    width: 100%;
    height: 680px;
    object-fit: cover;
    filter: grayscale(12%) contrast(108%);
    transition: transform 1.2s cubic-bezier(.19, 1, .22, 1), filter .9s ease
}

@media (max-width:1400px) {
    .about-company__figure img {
        height: 640px
    }
}

@media (max-width:1100px) {
    .about-company__figure img {
        height: 520px
    }
}

@media (max-width:620px) {
    .about-company__figure img {
        height: 460px
    }
}

.about-company__figure:hover img {
    transform: scale(1.04);
    filter: grayscale(0) contrast(110%)
}

.about-company__figcaption {
    position: absolute;
    left: 0;
    bottom: 0;
    padding: 26px 30px 30px;
    color: #fff;
    font-size: 14px;
    letter-spacing: .6px;
    font-weight: 500;
    z-index: 2
}

/* entrance animation */
.about-company [data-animate] {
    opacity: 0;
    transform: translateY(40px);
    animation: aboutFade .9s cubic-bezier(.19, 1, .22, 1) forwards
}

.about-company__text[data-animate] {
    animation-delay: .05s
}

.about-company__portrait[data-animate] {
    animation-delay: .18s
}

@keyframes aboutFade {
    0% {
        opacity: 0;
        transform: translateY(40px)
    }

    60% {
        opacity: 1
    }

    100% {
        opacity: 1;
        transform: translateY(0)
    }
}

@media (prefers-reduced-motion:reduce) {
    .about-company [data-animate] {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important
    }

    .about-company__figure img {
        transition: none !important
    }
}

/* =============================================
                             Join Our Team Section
                             ============================================= */
.join-team-area {
    background: #ffffff;
    position: relative;
    isolation: isolate;
    padding: 120px 0 110px;
    overflow: hidden;
    background: linear-gradient(145deg, #ffffff 0%, #fafafa 55%, #f2f2f2 100%)
}

.join-team-area:before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 28% 22%, rgba(0, 0, 0, .08), transparent 60%), radial-gradient(circle at 78% 72%, rgba(0, 0, 0, .05), transparent 65%);
    pointer-events: none;
    mix-blend-mode: normal;
    opacity: .55
}

.join-team-header {
    margin-bottom: 10px
}

.join-team-label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 3px;
    margin: 0 0 18px;
    display: inline-block;
    position: relative;
    padding-left: 46px;
    color: #2c2c2c;
    opacity: .85
}

.join-team-label:before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 34px;
    height: 2px;
    background: linear-gradient(90deg, #4d4d4d, #a0a0a0);
    transform: translateY(-50%)
}

.join-team-title {
    margin: 0 0 24px;
    font-size: clamp(2.3rem, 4.1vw, 4.1rem);
    line-height: 1.05;
    font-weight: 650;
    letter-spacing: .5px;
    color: #141414
}

.join-team-accent {
    background: linear-gradient(100deg, #9a9a9a, #5c5c5c 55%, #2a2a2a);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent
}

.join-team-lead {
    font-size: 17px;
    line-height: 1.55;
    margin: 0 auto 42px;
    max-width: 70ch;
    color: #4a4a4a
}

.join-team-grid {
    margin-top: 8px
}

.join-team-item {
    margin-bottom: 34px
}

.join-team-card {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, .07);
    padding: 28px 24px 30px;
    position: relative;
    overflow: hidden;
    height: 100%;
    transition: background .6s, border-color .6s, transform .65s cubic-bezier(.19, 1, .22, 1), box-shadow .6s
}

.join-team-card:before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(140deg, rgba(0, 0, 0, .06) 0%, rgba(0, 0, 0, 0) 55%);
    opacity: 0;
    transition: opacity .55s
}

.join-team-card__title {
    font-size: 18px;
    letter-spacing: .6px;
    font-weight: 600;
    color: #151515;
    margin: 0 0 16px;
    position: relative;
    padding-top: 2px
}

.join-team-card__title:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -8px;
    width: 36px;
    height: 2px;
    background: linear-gradient(90deg, #676767, #b0b0b0);
    border-radius: 2px
}

.join-team-card__text {
    font-size: 14.5px;
    line-height: 1.55;
    color: #505050;
    margin: 24px 0 0 0
}

.join-team-card:hover {
    background: #ffffff;
    border-color: rgba(0, 0, 0, .18);
    transform: translateY(-8px);
    box-shadow: 0 10px 28px -8px rgba(0, 0, 0, .25), 0 4px 14px -4px rgba(0, 0, 0, .15)
}

.join-team-card:hover:before {
    opacity: 1
}

.join-team-closing {
    color: #545454;
    font-size: 15px;
    max-width: 620px;
    margin: 0 auto 30px;
    line-height: 1.55
}

.join-team-cta {
    margin-top: 6px;
    letter-spacing: 1px;
    position: relative;
    overflow: hidden;
    border-radius: 0 !important
}

.join-team-cta:before {
    content: "";
    position: absolute;
    top: 0;
    left: -40%;
    width: 40%;
    height: 100%;
    background: linear-gradient(120deg, rgba(255, 255, 255, .65) 0%, rgba(255, 255, 255, 0) 80%);
    transform: skewX(-18deg);
    opacity: 0;
    transition: transform .7s, opacity .55s
}

.join-team-cta:hover:before {
    transform: translateX(230%) skewX(-18deg);
    opacity: 1
}

/* reduce motion */
@media (prefers-reduced-motion:reduce) {

    .join-team-card,
    .join-team-card:hover {
        transform: none !important
    }

    .join-team-cta:before,
    .join-team-cta:hover:before {
        transition: none !important;
        transform: none !important;
        opacity: .4
    }
}

/* =============================================
    Redesigned Footer (site-footer)
    ============================================= */
.site-footer {
    --footer-bg: #050505;
    --footer-bg-alt: #0b0b0b;
    --footer-border: rgba(255, 255, 255, .06);
    --footer-text: #c9c9c9;
    --footer-heading: #ffffff;
    --footer-accent: #f5f5f5;
    --footer-link: #d9d9d9;
    --footer-link-hover: #ffffff;
    --footer-radius: 0;
    position: relative;
    background: linear-gradient(160deg, #000000 0%, #050505 55%, #080808 100%);
    color: var(--footer-text);
    font-size: 14px;
    line-height: 1.55;
    isolation: isolate;
    margin-top: 0
}

.site-footer:before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 14% 28%, rgba(255, 255, 255, .07), transparent 60%), radial-gradient(circle at 82% 70%, rgba(255, 255, 255, .05), transparent 65%);
    pointer-events: none;
    mix-blend-mode: screen;
    opacity: .9
}

.footer-main {
    padding: 110px 0 70px;
    position: relative;
    z-index: 1
}

.footer-inner {
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 clamp(40px, 5vw, 90px);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: clamp(40px, 4.5vw, 90px)
}

@media (max-width:680px) {
    .footer-inner {
        grid-template-columns: 1fr;
    }
}

.footer-col-title {
    margin: 0 0 22px;
    font-size: 13px;
    letter-spacing: 2.5px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--footer-heading);
    position: relative;
    padding-left: 40px;
    opacity: .9
}

.footer-col-title:before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 28px;
    height: 2px;
    background: linear-gradient(90deg, #f0f0f0, #bdbdbd);
    transform: translateY(-50%)
}

.footer-brand .footer-logo img {
    max-width: 260px;
    width: 100%;
    height: auto;
    display: block;
    margin: 0 0 34px
}

.footer-summary {
    font-size: 14.5px;
    line-height: 1.6;
    margin: 0 0 28px;
    max-width: 56ch;
    color: #d2d2d2
}

.footer-cta {
    border-radius: 0px;
    margin-top: 4px;
    letter-spacing: .5px;
    position: relative;
    overflow: hidden
}

.footer-cta:before {
    content: "";
    position: absolute;
    top: 0;
    left: -40%;
    width: 40%;
    height: 100%;
    background: linear-gradient(120deg, rgba(255, 255, 255, .3) 0%, rgba(255, 255, 255, 0) 75%);
    transform: skewX(-18deg);
    opacity: 0;
    transition: transform .7s, opacity .55s
}

.footer-cta:hover:before {
    transform: translateX(230%) skewX(-18deg);
    opacity: 1
}

.footer-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px
}

.footer-links a {
    display: inline-block;
    font-size: 14px;
    color: var(--footer-link);
    text-decoration: none;
    position: relative;
    transition: color .35s
}

.footer-links a:focus,
.footer-links a:hover {
    color: var(--footer-link-hover)
}

.footer-links a:before {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 0;
    height: 1px;
    background: linear-gradient(90deg, #ffffff, #9d9d9d);
    transition: width .4s
}

.footer-links a:hover:before,
.footer-links a:focus:before {
    width: 100%
}

.footer-social {
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
    display: flex;
    gap: 18px
}

.footer-social a {
    display: inline-flex;
    width: 42px;
    height: 42px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--footer-border);
    border-radius: 0px;
    color: #e0e0e0;
    font-size: 15px;
    transition: background .45s, border-color .45s, color .45s, transform .65s cubic-bezier(.19, 1, .22, 1)
}

.footer-social a:hover {
    background: #161616;
    border-color: rgba(255, 255, 255, .18);
    color: #ffffff;
    transform: translateY(-4px)
}

@media (prefers-reduced-motion:reduce) {

    .footer-social a,
    .footer-social a:hover {
        transition: none !important;
        transform: none !important
    }
}

.footer-small-note {
    font-size: 12.5px;
    margin: 6px 0 0;
    max-width: 38ch;
    opacity: .75;
    line-height: 1.5
}

.footer-contact {
    display: flex;
    flex-direction: column
}

.footer-contact .footer-social {
    margin-top: 8px
}

.footer-rule {
    border: 0;
    height: 2px;
    background: linear-gradient(90deg, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, .25) 40%, rgba(255, 255, 255, .08) 75%, rgba(255, 255, 255, 0) 100%);
    margin: 10px 0 34px 0;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .04), 0 2px 6px -1px rgba(0, 0, 0, .6)
}

.footer-contact .footer-social,
.site-footer .footer-social {
    justify-content: left
}

.footer-legal {
    position: relative;
    z-index: 2;
    background: #000000;
    border-top: 1px solid rgba(255, 255, 255, .06);
    backdrop-filter: blur(2px)
}

.footer-legal-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    padding: 20px clamp(40px, 5vw, 90px)
}

@media (max-width:760px) {
    .footer-legal-inner {
        flex-direction: column;
        align-items: flex-start
    }
}

.legal-copy {
    margin: 0;
    font-size: 12.5px;
    color: #9e9e9e
}

.legal-copy a {
    color: #cfcfcf;
    text-decoration: none;
    position: relative
}

.legal-copy a:hover {
    color: #ffffff
}

.legal-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 26px;
    font-size: 12.5px
}

/* Footer direct contacts (phone + email) */
.footer-contacts{ list-style:none; padding:0; margin:6px 0 12px; }
.footer-contacts li{ display:flex; align-items:center; gap:10px; margin:6px 0; color:#cfcfcf }
.footer-contacts i{ width:18px; text-align:center; opacity:.9 }
.footer-contacts a{ color:#ffffff; text-decoration:none; border-bottom:1px solid transparent; transition:border-color .2s ease, color .2s ease }
.footer-contacts a:hover,
.footer-contacts a:focus{ color:#ffffff; border-color: rgba(255,255,255,.35) }
.footer-contacts .footer-location {
  align-items: flex-start;
}
.footer-contacts .footer-location i {
  padding-top: 4px;
}
.footer-contacts .footer-location a {
  line-height: 1.45;
}

/* Legal modal (Privacy, Terms) - global styles */
.legal-modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;padding:20px;z-index:9999;opacity:0;visibility:hidden;transition:opacity .28s ease, visibility .28s ease}
.legal-modal-backdrop.open{opacity:1;visibility:visible}
.legal-modal{background:#fff;color:#111;box-shadow:0 24px 64px rgba(0,0,0,.22),0 6px 20px rgba(0,0,0,.14);width:min(720px,92vw);max-width:92vw;max-height:90vh;display:flex;flex-direction:column;transform:translateY(14px);transition:transform .28s ease,box-shadow .28s ease}
.legal-modal-backdrop.open .legal-modal{transform:none}
.legal-modal-header{display:flex;align-items:center;justify-content:space-between;padding:18px 24px;border-bottom:1px solid rgba(0,0,0,.09);flex-shrink:0}
.legal-modal-title{margin:0;text-transform:uppercase;letter-spacing:.12em;font-size:.9rem}
.legal-modal-title::after{content:"";display:block;width:38px;height:2px;background:#111;margin-top:8px}
.legal-modal-close{background:transparent;border:1px solid rgba(0,0,0,.2);width:36px;height:36px;display:grid;place-items:center;cursor:pointer;color:#111;transition:background .2s ease,color .2s ease,border-color .2s ease;flex-shrink:0}
.legal-modal-close:hover{background:#111;color:#fff;border-color:#111}
.legal-modal-body{padding:24px;overflow-y:auto;flex:1;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.legal-modal-body a{color:#111;text-decoration:underline}
/* Legal document content */
.lm-doc{font-size:.875rem;color:#444;line-height:1.75}
.lm-meta{font-size:.78rem;color:#999;margin:0 0 20px;padding-bottom:14px;border-bottom:1px solid rgba(0,0,0,.07)}
.lm-section{margin-bottom:22px}
.lm-section:last-child{margin-bottom:0}
.lm-heading{font-size:.73rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:#111;margin:0 0 10px;padding-bottom:7px;border-bottom:1px solid rgba(0,0,0,.07)}
.lm-doc p{margin:0 0 8px}
.lm-doc p:last-child{margin-bottom:0}
.lm-doc ul{margin:4px 0 10px;padding-left:1.4em}
.lm-doc ul li{margin-bottom:3px}
.lm-doc strong{color:#222;font-weight:600}
/* Nav legal dropdown */
.nav-legal-item{position:relative}
.nav-legal-trigger{white-space:nowrap}
.nav-legal-caret{font-size:.6rem;margin-left:3px;vertical-align:middle;display:inline-block;transition:transform .2s ease}
.nav-legal-item:hover .nav-legal-caret,.nav-legal-item:focus-within .nav-legal-caret{transform:rotate(180deg)}
.nav-legal-sub{position:absolute;top:calc(100% + 6px);left:50%;transform:translateX(-50%) translateY(6px);background:#fff;min-width:180px;list-style:none;padding:6px 0;margin:0;box-shadow:0 6px 28px rgba(0,0,0,.13);opacity:0;visibility:hidden;transition:opacity .2s ease,visibility .2s ease,transform .2s ease;z-index:1000}
.nav-legal-item:hover .nav-legal-sub,.nav-legal-item:focus-within .nav-legal-sub{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.nav-legal-sub a{display:block;padding:9px 16px;font-size:.72rem;letter-spacing:.04em;text-transform:uppercase;color:#555;text-decoration:none;white-space:nowrap;transition:color .15s,background .15s}
.nav-legal-sub a:hover,.nav-legal-sub a:focus{color:#111;background:#f8f8f8}

/* Prevent background scroll when any modal is open */
body.modal-open{overflow:hidden}

.legal-links a {
    color: #a8a8a8;
    text-decoration: none;
    position: relative;
    transition: color .35s
}

.legal-links a:hover {
    color: #ffffff
}

.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
    border: 0 !important
}

/* Inline policy links */
.footer-inline-policies {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: 14px
}

.footer-inline-policies a {
    padding: 0;
    margin: 0
}

.footer-inline-policies .footer-sep {
    color: #7d7d7d;
    font-size: 13px;
    line-height: 1
}

/* =============================================
     Redesigned Testimonials Component
     ============================================= */
.testimonials-header {
    max-width: 860px;
    margin: 0 auto 70px;
    padding: 0 15px
}

.testimonials-eyebrow {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 3px;
    margin: 0 0 18px;
    display: inline-block;
    position: relative;
    padding-left: 46px;
    color: #000;
    opacity: .8
}

.testimonials-eyebrow:before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 34px;
    height: 2px;
    background: linear-gradient(90deg, #020202, #fff);
    transform: translateY(-50%)
}

.testimonials-title {
    margin: 0 0 22px;
    font-size: clamp(2.2rem, 4vw, 3.4rem);
    line-height: 1.08;
    font-weight: 650;
    letter-spacing: .6px;
    color: #fff
}

.testimonials-lead {
    font-size: 16.5px;
    line-height: 1.6;
    margin: 0 auto;
    max-width: none;
    white-space: nowrap;
    color: #040404
}

.video-stories .testimonials-lead,
.social-share-section .testimonials-lead {
    max-width: 980px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    white-space: normal
}

@media (max-width: 991px) {
    .testimonials-lead {
        white-space: normal;
    }
}

/* Dark background variant */
.testimonial-area {
    position: relative;
    background: rgb(red, green, blue);
    background: linear-gradient(150deg, #f2f2f2 0%, #f8f9fa 55%, #f5f6f7 100%);
    color: #333333;
    isolation: isolate;
    overflow: hidden
}

.testimonial-area:before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 18% 22%, rgba(0, 0, 0, .03), transparent 60%), radial-gradient(circle at 80% 70%, rgba(0, 0, 0, .02), transparent 65%);
    pointer-events: none;
    mix-blend-mode: multiply;
    opacity: .85
}

.testimonial-area .testimonials-eyebrow {
    color: #333;
    opacity: .85
}

.testimonial-area .testimonials-title {
    color: #222
}

.testimonial-area .testimonials-lead {
    color: #666666
}

/* Carousel wrapper for spacing */
.testimonials-carousel-wrapper {
    position: relative
}

.testimonials-carousel {
    position: relative
}

/* Cards */
.testimonial-card {
    padding: 0 5px
}

.testimonial-card__inner {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, .08);
    padding: 30px 28px 34px;
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
    overflow: hidden;
    transition: background .6s, border-color .6s, transform .65s cubic-bezier(.19, 1, .22, 1), box-shadow .65s
}

.testimonial-card__inner:before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(140deg, rgba(0, 0, 0, .02) 0%, rgba(0, 0, 0, 0) 55%);
    opacity: 0;
    transition: opacity .55s
}

.testimonial-card__inner:hover {
    background: #f8f9fa;
    border-color: rgba(0, 0, 0, .15);
    transform: translateY(-8px);
    box-shadow: 0 14px 40px -14px rgba(0, 0, 0, .15), 0 6px 18px -8px rgba(0, 0, 0, .1)
}

.testimonial-card__inner:hover:before {
    opacity: 1
}

@media (prefers-reduced-motion:reduce) {

    .testimonial-card__inner,
    .testimonial-card__inner:hover {
        transition: none !important;
        transform: none !important
    }
}

.testimonial-avatar {
    margin: 0 0 22px;
    display: inline-flex;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
    border: 1px solid rgba(0, 0, 0, .08);
    box-shadow: 0 6px 18px -8px rgba(0, 0, 0, .15)
}

.testimonial-avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(12%) contrast(108%);
    transition: filter 1s ease, transform 1.2s cubic-bezier(.19, 1, .22, 1)
}

.testimonial-card__inner:hover .testimonial-avatar img {
    filter: grayscale(0) contrast(112%);
    transform: scale(1.04)
}

.testimonial-quote {
    margin: 0 0 26px;
    font-size: 15px;
    line-height: 1.65;
    color: #444444;
    position: relative;
    padding: 0
}

.testimonial-quote.testimonial-quote--preserve {
    white-space: pre-wrap;
    word-break: break-word
}

.testimonial-quote:before {
    content: "“";
    position: absolute;
    left: -6px;
    top: -8px;
    font-size: 46px;
    line-height: 1;
    color: rgba(255, 255, 255, .16);
    font-family: Georgia, serif
}

.testimonial-meta {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 10px
}

.testimonial-name {
    font-style: normal;
    font-weight: 600;
    letter-spacing: .6px;
    font-size: 15px;
    color: #222222;
    position: relative;
    display: inline-block;
    padding-left: 40px
}

.testimonial-name:before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 28px;
    height: 2px;
    background: linear-gradient(90deg, #333333, #666666);
    transform: translateY(-50%);
    opacity: .9
}

.testimonial-date {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    line-height: 1.3;
    letter-spacing: .35px;
    text-transform: uppercase;
    color: #7a7a7a
}

.testimonial-rating {
    display: flex;
    gap: 4px;
    font-size: 15px;
    line-height: 1
}

.testimonial-rating .star {
    color: #cccccc;
    transition: color .45s
}

.testimonial-rating .star.is-active {
    color: #333333
}

.testimonial-card__inner:hover .testimonial-rating .star.is-active {
    color: #222222
}

/* Owl dots alignment retained */
.testimonial-area .owl-dots {
    margin-top: 50px
}

/* Dark pagination dots for light testimonial background */
.testimonial-area .owl-dot {
    background: rgba(0, 0, 0, .15) !important;
    border-radius: 3px;
    width: 12px;
    height: 12px
}

.testimonial-area .owl-dot.active {
    background: #333333 !important;
    box-shadow: 0 0 0 4px rgba(0, 0, 0, .08);
}

.testimonial-area .owl-dot:hover {
    background: rgba(0, 0, 0, .25) !important
}

/* Scroll-snap fallback if JS disabled (horizontal) */
@supports (scroll-snap-type:x mandatory) {
    .testimonials-carousel:not(.owl-loaded) {
        display: flex;
        overflow-x: auto;
        gap: 20px;
        padding-bottom: 10px;
        scroll-snap-type: x mandatory
    }

    .testimonials-carousel:not(.owl-loaded) .testimonial-card {
        flex: 0 0 320px;
        scroll-snap-align: start
    }
}

/* Subtle entrance animation */
.site-footer .footer-col {
    opacity: 0;
    transform: translateY(28px);
    animation: footerFade .9s cubic-bezier(.19, 1, .22, 1) forwards
}

.site-footer .footer-col:nth-child(1) {
    animation-delay: .05s
}

.site-footer .footer-col:nth-child(2) {
    animation-delay: .15s
}

.site-footer .footer-col:nth-child(3) {
    animation-delay: .25s
}

.site-footer .footer-col:nth-child(4) {
    animation-delay: .35s
}

@keyframes footerFade {
    0% {
        opacity: 0;
        transform: translateY(28px)
    }

    60% {
        opacity: 1
    }

    100% {
        opacity: 1;
        transform: translateY(0)
    }
}

@media (prefers-reduced-motion:reduce) {
    .site-footer .footer-col {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important
    }
}

/* Fallback if primary-btn inside footer feels too tall */
.site-footer .primary-btn {
    padding: 12px 26px;
    font-size: 13px
}

/* Light cleanup: hide old footer spacing if .footer-area removed */
.footer-area {
    display: none
}

/* --------------------------------------------------------------
    Back to Top Button (added Oct 2025)
    Visual style borrows from footer/testimonial dark theme:
    - dark translucent background that brightens on hover
    - subtle border + backdrop blur for modern glassy feel
    - uses existing accent transitions & font-awesome icon
-------------------------------------------------------------- */
.back-to-top {
    position: fixed;
    right: 26px;
    bottom: 32px;
    z-index: 1200;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #ffffff;
    background: rgba(0, 0, 0, .8);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 50%;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(14px) scale(.9);
    transition: opacity .35s ease, transform .35s cubic-bezier(.22, .61, .36, 1), background .35s ease, border-color .35s ease, box-shadow .35s ease;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    text-decoration: none
}

.back-to-top i {
    line-height: 1;
    pointer-events: none
}

.back-to-top:hover {
    background: rgba(0, 0, 0, 1);
    color: #fff;
    border-color: rgba(255, 255, 255, .5);
    box-shadow: 0 6px 18px -4px rgba(0, 0, 0, 0.55)
}

.back-to-top:active {
    transform: translateY(2px) scale(.88)
}

.back-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1)
}

@media (prefers-reduced-motion:reduce) {
    .back-to-top {
        transition: none
    }

    .back-to-top:active {
        transform: none
    }
}

@media (max-width: 575px) {
    .back-to-top {
        right: 18px;
        bottom: 22px;
        width: 46px;
        height: 46px;
        font-size: 18px
    }
}

/* Slight offset when footer is in view so it doesn't overlap important links */
.back-to-top.in-footer-zone {
    transform: translateY(-14px)
}

/* =============== Reviews Page: Video Testimonial =============== */
.video-testimonial-row {
    row-gap: 50px
}

.video-testimonial__media-wrap {
    position: relative;
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0f0f0f;
    border: 1px solid rgba(255, 255, 255, .08);
    padding: 60px 20px;
    border-radius: 4px;
    overflow: hidden
}

.video-testimonial__media-wrap .video-thumb {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    filter: brightness(.78) saturate(1.05);
    transition: filter .6s, transform 1.2s cubic-bezier(.19, 1, .22, 1);
    transform: scale(1.05);
    z-index: 0
}

.video-testimonial__media-wrap:hover .video-thumb {
    filter: brightness(.9) saturate(1.15);
    transform: scale(1.1)
}

.video-testimonial__media-wrap .overlay.overlay-bg {
    pointer-events: none;
    z-index: 1
}

.video-testimonial__media-wrap .play-btn {
    position: relative;
    z-index: 2
}

.video-testimonial__media-wrap .overlay.overlay-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, 0));
    opacity: .15;
    mix-blend-mode: screen
}

.video-testimonial__card {
    background: #0f0f0f;
    border: 1px solid rgba(255, 255, 255, .08);
    padding: 34px 32px 36px;
    box-shadow: 0 10px 28px -12px rgba(0, 0, 0, .6);
    border-radius: 4px
}

.video-testimonial__header {
    display: flex;
    align-items: center;
    gap: 22px;
    margin: 0 0 18px
}

.video-testimonial__client {
    margin: 0;
    display: inline-flex;
    width: 74px;
    height: 74px;
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .16);
    box-shadow: 0 6px 20px -10px rgba(0, 0, 0, .6)
}

.video-testimonial__client img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(14%) contrast(105%);
    transition: filter .8s ease
}

.video-testimonial__card:hover .video-testimonial__client img {
    filter: grayscale(0) contrast(112%)
}

.video-testimonial__name {
    margin: 0 0 4px;
    font-size: 18px;
    font-weight: 600;
    color: #fff;
    letter-spacing: .5px
}

.video-testimonial__project {
    margin: 0;
    font-size: 13px;
    letter-spacing: .5px;
    color: #cfcfcf
}

.video-testimonial__project a {
    color: #fff;
    text-decoration: none;
    position: relative
}

.video-testimonial__project a:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, #fff, rgba(255, 255, 255, .2));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .45s cubic-bezier(.19, 1, .22, 1)
}

.video-testimonial__project a:hover:after {
    transform: scaleX(1)
}

.video-testimonial__excerpt {
    margin: 0 0 18px;
    font-size: 15px;
    line-height: 1.6;
    color: #d5d5d5
}

.video-testimonial__bullets {
    margin: 0;
    padding: 0 0 0 18px;
    color: #bfbfbf;
    font-size: 13.5px;
    line-height: 1.55
}

.video-testimonial__bullets li {
    margin: 4px 0
}

@media (max-width:991px) {
    .video-testimonial__card {
        padding: 28px 26px
    }

    .video-testimonial__media-wrap {
        min-height: 240px;
        padding: 46px 18px
    }
}

@media (max-width:575px) {
    .video-testimonial__header {
        flex-direction: row
    }

    .video-testimonial__client {
        width: 62px;
        height: 62px
    }
}

/* ==================== Reviews Hero ==================== */
.reviews-hero {
    position: relative;
    min-height: 82vh;
    display: flex;
    align-items: flex-end;
    padding: 0 0 90px;
    background: #050505;
    background: radial-gradient(circle at 28% 24%, rgba(255, 255, 255, .08), rgba(0, 0, 0, 0) 60%), linear-gradient(140deg, #000 0%, #040404 55%, #060606 100%);
    color: #fff;
    overflow: hidden
}

.reviews-hero__bg:before,
.reviews-hero__bg:after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    mix-blend-mode: screen;
}

.reviews-hero__bg:before {
    background: radial-gradient(circle at 70% 65%, rgba(255, 255, 255, .07), transparent 0%)
}

.reviews-hero__bg:after {
    background: linear-gradient(180deg, rgba(0, 0, 0, .0) 0%, rgba(0, 0, 0, .9) 92%)
}

.reviews-hero__inner {
    max-width: 960px
}

.reviews-hero__title {
    font-size: clamp(2.6rem, 5vw, 4.2rem);
    line-height: 1.05;
    font-weight: 650;
    margin: 0 0 22px;
    letter-spacing: .5px
}

.reviews-hero__lead {
    font-size: 17px;
    color: #d0d0d0;
    margin: 0 0 34px;
    max-width: 640px
}

.reviews-hero__phrases {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0 0 40px;
    position: relative
}

.reviews-hero__phrase {
    position: relative;
    padding: 10px 18px;
    font-size: 12px;
    letter-spacing: 2px;
    font-weight: 600;
    border: 1px solid rgba(255, 255, 255, .14);
    color: #cfcfcf;
    border-radius: 40px;
    text-transform: uppercase;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .55s ease, transform .55s cubic-bezier(.19, 1, .22, 1), background .45s ease, color .45s ease
}

.reviews-hero__phrase.is-active {
    opacity: 1;
    transform: translateY(0);
    background: rgba(255, 255, 255, .08);
    color: #fff
}

.reviews-hero__phrase:not(.is-active) {
    pointer-events: none
}

.reviews-hero__cta {
    margin-top: 4px
}

.reviews-hero__scroll-cue {
    position: absolute;
    left: 50%;
    bottom: 20px;
    transform: translateX(-50%);
    color: #ffffff66;
    animation: scrollCue 3.4s infinite ease-in-out
}

.reviews-hero__scroll-cue .scroll-dot {
    animation: scrollDot 1.6s infinite ease-in-out
}

@keyframes scrollCue {

    0%,
    60%,
    100% {
        opacity: .4;
        transform: translate(-50%, 0)
    }

    30% {
        opacity: 1;
        transform: translate(-50%, -6px)
    }
}

@keyframes scrollDot {
    0% {
        transform: translateY(0);
        opacity: .9
    }

    50% {
        transform: translateY(6px);
        opacity: .4
    }

    100% {
        transform: translateY(0);
        opacity: .9
    }
}

@media (max-width:991px) {
    .reviews-hero {
        min-height: 68vh;
        padding-bottom: 70px
    }

    .reviews-hero__title {
        font-size: clamp(2.2rem, 6vw, 3.4rem)
    }
}

@media (max-width:575px) {
    .reviews-hero__phrases {
        gap: 8px
    }

    .reviews-hero__phrase {
        font-size: 11px;
        padding: 8px 14px
    }
}

@media (prefers-reduced-motion:reduce) {

    .reviews-hero__phrase,
    .reviews-hero__scroll-cue {
        animation: none !important;
        transition: none !important
    }
}

/* ==================== Video Testimonial Carousel Tweaks ==================== */
.video-testimonial-carousel .owl-dots {
    margin-top: 50px;
    text-align: center
}

/* =============================================================
     Video Testimonial Carousel Dot Layout Override (horizontal under meta bar)
     ============================================================= */
.video-testimonial--compact .video-testimonial-carousel .owl-stage-outer {
    margin-bottom: 34px;
}

/* reserve space for dots */
.video-testimonial--compact .video-testimonial-carousel .owl-dots {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    display: flex;
    flex-direction: row;
    gap: 10px;
    margin: 0;
    padding: 6px 14px;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(4px);
    border-radius: 40px;
    z-index: 5
}

.video-testimonial--compact .video-testimonial-carousel .owl-dots .owl-dot {
    width: 14px;
    height: 14px;
    position: relative
}

.video-testimonial--compact .video-testimonial-carousel .owl-dots .owl-dot span {
    margin: 0;
    width: 100%;
    height: 100%;
    background: #4d4d4d;
    opacity: .65;
    transition: background .25s, transform .25s, opacity .25s;
    border-radius: 50%;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.15)
}

.video-testimonial--compact .video-testimonial-carousel .owl-dots .owl-dot.active span {
    background: #fff;
    opacity: 1;
    transform: scale(1.25);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35)
}

.video-testimonial--compact .video-testimonial-carousel .owl-dots .owl-dot:hover span {
    opacity: 1;
    background: #e8e8e8
}

@media (max-width:767px) {
    .video-testimonial--compact .video-testimonial-carousel .owl-stage-outer {
        margin-bottom: 46px
    }

    .video-testimonial--compact .video-testimonial-carousel .owl-dots {
        bottom: 4px;
        padding: 6px 12px
    }

    .video-testimonial--compact .video-testimonial-carousel .owl-dots .owl-dot {
        width: 12px;
        height: 12px
    }
}

@media (prefers-reduced-motion:reduce) {
    .video-testimonial--compact .video-testimonial-carousel .owl-dots .owl-dot span {
        transition: none
    }
}

.video-testimonial-carousel .owl-dot {
    width: 14px;
    height: 14px;
    margin: 0 5px;
    background: rgba(255, 255, 255, .18) !important;
    border-radius: 50%;
    transition: background .4s
}

.video-testimonial-carousel .owl-dot.active {
    background: #fff !important;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, .16)
}

.video-testimonial-carousel .owl-dot:hover {
    background: rgba(255, 255, 255, .32) !important
}

/* ==================== Reviews Hero Full Screen Enhancements ==================== */
.reviews-hero--full {
    min-height: 100vh;
    align-items: center;
    padding-top: 140px;
    padding-bottom: 120px
}

.reviews-hero__title-accent {
    background: linear-gradient(90deg, #ffffff, #bdbdbd);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    display: inline-block
}

.reviews-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 18px
}

.secondary-btn {
    display: inline-block;
    padding: 12px 28px;
    font-size: 13px;
    letter-spacing: 1px;
    font-weight: 500;
    text-transform: uppercase;
    border: 1px solid rgba(255, 255, 255, .32);
    color: #e0e0e0;
    background: rgba(255, 255, 255, .06);
    border-radius: 3px;
    transition: background .4s, color .4s, border-color .4s, box-shadow .5s
}

.secondary-btn:hover {
    background: rgba(255, 255, 255, .18);
    color: #fff;
    border-color: rgba(255, 255, 255, .5);
    box-shadow: 0 8px 24px -10px rgba(0, 0, 0, .65)
}

.secondary-btn:active {
    transform: translateY(2px)
}

@media (max-width:575px) {
    .reviews-hero__actions {
        gap: 12px
    }

    .secondary-btn {
        padding: 11px 22px;
        font-size: 12px
    }
}

/* ==================== Video Testimonial Contrast & Nav ==================== */
.video-testimonial {
    background: #0b0b0b;
    background: linear-gradient(155deg, #0a0a0a 0%, #050505 55%, #0d0d0d 100%);
}

.video-testimonial__card {
    background: #121212;
    border-color: rgba(255, 255, 255, .12)
}

.video-testimonial__excerpt {
    color: #e0e0e0
}

.video-testimonial__bullets {
    color: #bdbdbd
}

.owl-nav-btn {
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .18);
    width: 54px;
    height: 54px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    cursor: pointer;
    transition: background .4s, border-color .4s, transform .45s cubic-bezier(.19, 1, .22, 1), box-shadow .5s;
    color: #ffffff;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    margin: 0 6px;
    font-size: 19px
}

.owl-nav-btn:hover {
    background: rgba(255, 255, 255, .22);
    border-color: rgba(255, 255, 255, .4);
    box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .7)
}

.owl-nav-btn:active {
    transform: translateY(2px) scale(.94)
}

.video-testimonial-carousel .owl-nav {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 34px
}

@media (max-width:575px) {
    .owl-nav-btn {
        width: 48px;
        height: 48px;
        font-size: 17px
    }
}

@media (prefers-reduced-motion:reduce) {
    .owl-nav-btn {
        transition: none !important
    }
}

/* ==================== Video Testimonial Side Layout ==================== */
.video-testimonial--compact .video-testimonial-item--side {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 30px;
    position: relative
}

/* Media now larger (63%) and detail panel narrower (~37%) */
.video-testimonial--compact .video-testimonial-item--side .video-testimonial__media-wrap {
    flex: 0 0 63%;
    margin: 0
}

.video-testimonial--compact .video-testimonial-item--side .video-meta-bar {
    flex: 0 0 37%;
    max-width: 37%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-height: 100%;
    padding: 24px 26px
}

.video-testimonial--compact .video-testimonial-item--side .video-meta-bar__info {
    margin-bottom: 22px
}

.video-testimonial--compact .video-testimonial-item--side .video-meta-bar__btn {
    align-self: flex-start;
    margin-top: auto
}

/* Provide a subtle divider line when wide */
.video-testimonial--compact .video-testimonial-item--side:before {
    content: "";
    position: absolute;
    left: 63%;
    top: 12%;
    bottom: 12%;
    width: 1px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, .08), rgba(255, 255, 255, .26), rgba(255, 255, 255, .08));
    pointer-events: none
}

/* Hover elevation synergy */
.video-testimonial--compact .video-testimonial-item--side:hover .video-meta-bar {
    background: #141415;
    border-color: rgba(255, 255, 255, .22)
}

@media (max-width:991px) {
    .video-testimonial--compact .video-testimonial-item--side {
        flex-direction: column;
        gap: 26px
    }

    .video-testimonial--compact .video-testimonial-item--side .video-testimonial__media-wrap {
        flex: initial;
        width: 100%
    }

    .video-testimonial--compact .video-testimonial-item--side:before {
        display: none
    }

    .video-testimonial--compact .video-testimonial-item--side .video-meta-bar {
        min-height: 0;
        padding: 22px 24px;
        max-width: 100%;
        flex: initial
    }
}

@media (max-width:575px) {
    .video-testimonial--compact .video-testimonial-item--side {
        gap: 22px
    }

    .video-testimonial--compact .video-testimonial-item--side .video-meta-bar {
        padding: 20px 20px
    }
}

/* ==================== Video Meta Bar Left Alignment & Details ==================== */
.video-testimonial--compact .video-testimonial-item--side .video-meta-bar {
    align-items: flex-start;
    text-align: left
}

/* Align avatar with first text line by reducing image size slightly and aligning start */
.video-testimonial--compact .video-testimonial-item--side .video-meta-bar__info {
    justify-content: flex-start;
    align-items: flex-start
}

.video-testimonial--compact .video-testimonial-item--side .video-meta-bar__client {
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    margin-top: 2px
}

.video-testimonial--compact .video-testimonial-item--side .video-meta-bar__name {
    line-height: 1.15
}

.video-meta-bar__details {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    font-size: 12px;
    letter-spacing: .5px;
    color: #b7b7b7;
    max-width: 520px
}

.video-meta-bar__details li {
    position: relative;
    padding-left: 12px;
    line-height: 1.3
}

.video-meta-bar__details li:before {
    content: "";
    position: absolute;
    left: 0;
    top: 7px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: linear-gradient(180deg, #e2e2e2, #a7a7a7)
}

.video-testimonial--compact .video-testimonial-item--side .video-meta-bar__btn {
    margin-top: 26px
}

@media (max-width:991px) {
    .video-meta-bar__details {
        gap: 6px 14px
    }

    .video-testimonial--compact .video-testimonial-item--side .video-meta-bar__btn {
        margin-top: 18px
    }
}

@media (max-width:575px) {
    .video-meta-bar__details {
        font-size: 11px;
        gap: 6px 12px
    }

    .video-meta-bar__details li:before {
        top: 6px;
        width: 5px;
        height: 5px
    }
}

/* ==================== Vertical Meta Bar Variant ==================== */
.video-meta-bar--vertical {
    align-items: flex-start !important;
    padding: 22px 22px
}

.video-meta-bar--vertical .video-meta-bar__info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    width: 100%
}

.video-meta-bar--vertical .video-meta-bar__client {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    margin: 0
}

.video-meta-bar--vertical .video-meta-bar__name {
    margin: 0;
    font-size: 15px
}

.video-meta-bar--vertical .video-meta-bar__project {
    margin: 0 0 4px;
    font-size: 12px;
    letter-spacing: .6px;
    color: #c9c9c9
}

.video-meta-bar--vertical .video-meta-bar__details {
    margin: 6px 0 4px;
    gap: 6px 14px;
    font-size: 11.5px;
    max-width: 100%
}

.video-meta-bar--vertical .video-meta-bar__btn {
    margin-top: 14px
}

@media (max-width:991px) {
    .video-meta-bar--vertical {
        padding: 20px 20px
    }

    .video-meta-bar--vertical .video-meta-bar__details {
        font-size: 11.5px
    }
}

@media (max-width:575px) {
    .video-meta-bar--vertical {
        padding: 18px 18px
    }

    .video-meta-bar--vertical .video-meta-bar__client {
        width: 44px;
        height: 44px
    }

    .video-meta-bar--vertical .video-meta-bar__name {
        font-size: 14px
    }

    .video-meta-bar--vertical .video-meta-bar__btn {
        margin-top: 12px
    }
}

/* ==================== Width Adjustment: Narrower Detail Panel (32%) ==================== */
.video-testimonial--compact .video-testimonial-item--side .video-testimonial__media-wrap {
    flex: 0 0 68%;
}

/* ==================== About Video Area ==================== */
.about-video-area {
    background: #0c0c0d;
    position: relative;
    overflow: hidden
}

.about-video-left {
    color: #e5e5e5
}

.about-video-eyebrow {
    letter-spacing: 2px;
    font-size: 12px;
    font-weight: 600;
    color: #9da0a5;
    margin: 0 0 14px
}

.about-video-title {
    font-size: clamp(2rem, 4.2vw, 3.2rem);
    line-height: 1.1;
    font-weight: 650;
    color: #fff;
    margin: 0 0 24px
}

.about-video-title-accent {
    background: linear-gradient(90deg, #ffffff, #c7c7c7);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent
}

.about-video-lead {
    font-size: 15px;
    line-height: 1.55;
    color: #cbcbcb;
    margin: 0 0 24px;
    max-width: 520px
}

.about-video-points {
    list-style: none;
    margin: 0 0 28px;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;
    max-width: 540px
}

.about-video-points li {
    position: relative;
    padding-left: 14px;
    font-size: 12.5px;
    letter-spacing: .5px;
    color: #bdbdbd
}

.about-video-points li:before {
    content: "";
    position: absolute;
    left: 0;
    top: 6px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: linear-gradient(180deg, #fff, #909090)
}

.about-video-right {
    position: relative;
    min-height: 360px
}

.about-video-wrapper {
    position: relative;
    width: 100%;
    max-width: 560px;
    aspect-ratio: 16/9;
    background: #111;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 18px 46px -20px rgba(0, 0, 0, .7), 0 8px 28px -10px rgba(0, 0, 0, .55);
    display: flex;
    align-items: center;
    justify-content: center;
    isolation: isolate
}

.about-video-thumb {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    filter: brightness(.85) contrast(1.05);
    transition: filter .6s, transform 1.2s cubic-bezier(.19, 1, .22, 1);
    transform: scale(1.05)
}

.about-video-wrapper:hover .about-video-thumb {
    filter: brightness(.92) contrast(1.1);
    transform: scale(1.09)
}

.about-video-trigger {
    background: rgba(0, 0, 0, .55);
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 50%;
    width: 96px;
    height: 96px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    z-index: 2;
    transition: background .45s, border-color .45s, transform .55s cubic-bezier(.19, 1, .22, 1), box-shadow .6s
}

.about-video-trigger__icon {
    width: 58px;
    filter: drop-shadow(0 4px 14px rgba(0, 0, 0, .6))
}

.about-video-trigger:hover {
    background: rgba(255, 255, 255, .12);
    border-color: #fff;
    box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .65);
    transform: translateY(-3px)
}

.about-video-trigger:active {
    transform: translateY(2px) scale(.94)
}

.about-video-wrapper.is-loaded .about-video-trigger {
    display: none
}

.about-video-iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    z-index: 3
}

@media (max-width:991px) {
    .about-video-wrapper {
        max-width: 100%;
        min-height: 300px
    }

    .about-video-trigger {
        width: 86px;
        height: 86px
    }

    .about-video-trigger__icon {
        width: 50px
    }
}

@media (max-width:575px) {
    .about-video-title {
        font-size: clamp(1.8rem, 7vw, 2.4rem)
    }

    .about-video-wrapper {
        min-height: 260px
    }

    .about-video-points {
        gap: 8px 14px
    }

    .about-video-trigger {
        width: 74px;
        height: 74px
    }

    .about-video-trigger__icon {
        width: 44px
    }
}

@media (prefers-reduced-motion:reduce) {
    .about-video-thumb {
        transition: none !important;
        transform: none !important
    }

    .about-video-trigger {
        transition: none !important
    }
}

/* ==================== Center Alignment Overrides for Reviews Dynamic Hero ==================== */
.reviews-dynamic-hero__inner {
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center
}

.reviews-dynamic-hero__header {
    text-align: center
}

.reviews-dynamic-hero .hero-slides {
    align-self: center
}

.reviews-dynamic-hero .hero-ctas {
    display: flex;
    justify-content: center
}

.reviews-dynamic-hero .hero-title {
    margin-left: auto;
    margin-right: auto
}

html[lang="en"] .reviews-dynamic-hero .hero-title,
html[lang="ru"] .reviews-dynamic-hero .hero-title {
    max-width: 1000px;
    text-align: center
}

html[lang="en"] .reviews-dynamic-hero .hero-lead,
html[lang="ru"] .reviews-dynamic-hero .hero-lead {
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
    text-align: center
}

@media (min-width:992px) {
    .reviews-dynamic-hero__inner {
        max-width: 1000px
    }

    html[lang="en"] .reviews-dynamic-hero .hero-title,
    html[lang="en"] .reviews-dynamic-hero .hero-title__accent,
    html[lang="ru"] .reviews-dynamic-hero .hero-title,
    html[lang="ru"] .reviews-dynamic-hero .hero-title__accent {
        white-space: nowrap
    }
}

.video-testimonial--compact .video-testimonial-item--side .video-meta-bar {
    flex: 0 0 32%;
    max-width: 32%;
}

.video-testimonial--compact .video-testimonial-item--side:before {
    left: 68%;
}

@media (max-width:991px) {

    /* Collapse back to full width detail below media on tablet/mobile */
    .video-testimonial--compact .video-testimonial-item--side .video-testimonial__media-wrap {
        flex: initial;
        width: 100%
    }

    .video-testimonial--compact .video-testimonial-item--side .video-meta-bar {
        flex: initial;
        max-width: 100%
    }

    .video-testimonial--compact .video-testimonial-item--side:before {
        left: auto
    }
}

.page-contact-bg { background: #f6f7fb; }

.contact-page-area {
  padding-top: 80px;
  padding-bottom: 80px;
}

.contact-section-label {
  font-size: 12px;
  letter-spacing: .18em;
  font-weight: 600;
  color: #9aa1ac;
  text-transform: uppercase;
  display: block;
  margin-bottom: 8px;
}

.contact-section-title {
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 700;
  color: #0f0f11;
  line-height: 1.2;
  margin: 0 0 8px;
  letter-spacing: -.01em;
}

.contact-section-title::after {
  content: "";
  display: block;
  width: 60px;
  height: 3px;
  margin: 12px 0 16px;
  background: linear-gradient(90deg, #0f0f11, #bfbfbf);
}

.contact-section-lead {
  color: #616a76;
  margin-bottom: 28px;
  max-width: 480px;
}

.contact-form-card {
  background: #fff;
  border: 1px solid #e9eaf0;
  padding: 30px;
  box-shadow: 0 12px 32px rgba(16,22,26,.06);
}

.contact-form .form-group { margin-bottom: 16px; }

.contact-form .form-control,
.contact-form .common-input,
.contact-form .common-textarea {
  border: 1px solid #cbcdd6 !important;
  padding: 12px 14px;
  border-radius: 0 !important;
  font-size: 14px;
  color: #0f0f11;
  background: #fafafa;
  transition: border-color .2s, box-shadow .2s;
}

.contact-form .form-control::placeholder,
.contact-form .common-input::placeholder,
.contact-form .common-textarea::placeholder { color: #9aa1ac; }

.contact-form .form-control:focus,
.contact-form .common-input:focus,
.contact-form .common-textarea:focus {
  outline: none;
  border-color: #111 !important;
  box-shadow: 0 0 0 3px rgba(17,17,17,.12);
  background: #fff;
}

.form-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 8px;
}

.alert-msg {
  font-size: 13px;
  color: #4b5563;
  flex: 1;
}

.contact-submit-btn {
  display: inline-block;
  background: #0f0f11;
  color: #fff;
  border: none;
  padding: 13px 32px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, background .2s;
}

.contact-submit-btn:hover {
  background: #222;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,0,0,.18);
}

.contact-submit-btn:active { transform: translateY(0); }

.contact-map-section {
  padding: 0 0 80px;
}

.contact-map-header {
  max-width: 760px;
  margin: 0 auto 28px;
}

.contact-map-header .contact-section-title::after {
  margin-left: auto;
  margin-right: auto;
}

.contact-map-header .contact-section-lead {
  max-width: none;
  margin: 0 auto;
}

.contact-map-card {
  background: #fff;
  border: 1px solid #e9eaf0;
  box-shadow: 0 12px 32px rgba(16,22,26,.06);
  overflow: hidden;
}

.contact-map-card iframe {
  display: block;
  width: 100%;
  min-height: 430px;
  border: 0;
}

.contact-map-link {
  margin: 18px 0 0;
  text-align: center;
}

.contact-map-link a {
  color: #0f0f11;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(15,15,17,.35);
  transition: border-color .2s ease, color .2s ease;
}

.contact-map-link a:hover,
.contact-map-link a:focus {
  color: #000;
  border-color: #000;
}

@media (max-width: 767.98px) {
  .contact-map-section {
    padding-bottom: 56px;
  }

  .contact-map-card iframe {
    min-height: 340px;
  }
}

/* === Contact Modal (APPENDED Oct 2025) === */
.contact-modal .modal-content{
    background:#0f0f11;
    color:#fff;
    border:1px solid rgba(255,255,255,.08);
    border-radius:0;
    box-shadow:0 24px 68px -18px rgba(0,0,0,.75), 0 12px 32px -14px rgba(0,0,0,.6);
    overflow:hidden;
}
/* Modern topbar */
.contact-modal .modal-header{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:14px 16px;
    background:linear-gradient(180deg,#101214,#0f0f11);
    border-bottom:1px solid rgba(255,255,255,.12);
}
.contact-modal .modal-header::after{
    content:"";
    position:absolute; left:0; right:0; bottom:0; height:1px;
    background:linear-gradient(90deg, rgba(255,255,255,.18), rgba(255,255,255,0));
    pointer-events:none;
}
.contact-modal .modal-title{ margin:0; color:#fff; font-weight:700; letter-spacing:.2px; font-size:18px }
.contact-modal .contact-modal__close{
    width:36px; height:36px;
    display:inline-flex; align-items:center; justify-content:center;
    border:1px solid rgba(255,255,255,.18);
    background:transparent; color:#fff; opacity:.95; border-radius:0;
    transition:transform .2s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease;
}
.contact-modal .contact-modal__close:hover,
.contact-modal .contact-modal__close:focus{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.28); transform:translateY(-1px) }
.contact-modal .contact-modal__close:focus-visible{ outline:2px solid rgba(255,255,255,.5); outline-offset:2px }
.contact-modal .contact-modal__close span{ color:#fff; }
/* Title and thin close icon refinement */
.contact-modal .modal-title{ font-size:20px; font-weight:600; letter-spacing:.3px }
.contact-modal .contact-modal__close{ position:relative; font-size:0; color:transparent }
.contact-modal .contact-modal__close span{ display:none }
.contact-modal .contact-modal__close::before,
.contact-modal .contact-modal__close::after{
    content:""; position:absolute; top:50%; left:50%; width:16px; height:1px; background:rgba(255,255,255,.92); transform-origin:center; transition:background .2s ease, width .2s ease
}
.contact-modal .contact-modal__close::before{ transform:translate(-50%,-50%) rotate(45deg) }
.contact-modal .contact-modal__close::after{ transform:translate(-50%,-50%) rotate(-45deg) }
.contact-modal .contact-modal__close:hover::before,
.contact-modal .contact-modal__close:hover::after,
.contact-modal .contact-modal__close:focus::before,
.contact-modal .contact-modal__close:focus::after{ background:#fff; width:18px }
.contact-modal .modal-body{ padding-top:16px }
.contact-modal label{ color:#cfcfcf }
.contact-modal .form-control{
    background:#0b0b0c;
    color:#fff;
    border:1px solid rgba(255,255,255,.12);
    border-radius:0;
    padding:12px 14px;
}
.contact-modal .form-control::placeholder{ color:#8f96a3 }
.contact-modal .form-control:focus{
    outline:2px solid rgba(255,255,255,.45);
    box-shadow:0 0 0 3px rgba(255,255,255,.18);
    border-color:#fff;
}
.contact-modal .modal-footer{ border-top:1px solid rgba(255,255,255,.06) }
.contact-modal .contact-btn-cancel{
    background:transparent;
    color:#fff;
    border:1px solid rgba(255,255,255,.18);
    border-radius:0;
    transition:transform .2s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease;
}
.contact-modal .contact-btn-cancel:hover,
.contact-modal .contact-btn-cancel:focus{ transform:translateY(-1px); box-shadow:0 8px 18px -10px rgba(0,0,0,.6); border-color:rgba(255,255,255,.3) }
.contact-modal .contact-btn-primary{
    background:#fff;
    color:#000;
    border:0;
    border-radius:0;
    font-weight:600;
    transition:transform .2s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
}
.contact-modal .contact-btn-primary:hover,
.contact-modal .contact-btn-primary:focus{ background:#f5f5f5; transform:translateY(-1px); box-shadow:0 10px 24px -12px rgba(0,0,0,.6) }
.contact-modal .contact-btn-primary.is-loading{ opacity:.75; cursor:progress }
.contact-modal .toast-message{ margin-top:10px; padding:10px 12px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.04); color:#fff; border-radius:0 }
.contact-modal .toast-success{ border-color:rgba(18,199,85,.45); background:rgba(18,199,85,.08) }
.contact-modal .toast-error{ border-color:rgba(234,84,85,.45); background:rgba(234,84,85,.08) }
@media (prefers-reduced-motion:reduce){
    .contact-modal .contact-btn-cancel,
    .contact-modal .contact-btn-primary{ transition:none }
}
/* === End Contact Modal === */