html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: 'Segoe UI', Arial, sans-serif;
    background: #000;
    color: #222;
    overflow-x: hidden;
    /* scroll-snap-type: y mandatory;
    scroll-behavior: smooth;  */
}

.navbar {
    transition: 0.5s all;
}

.navbar .navbar-nav .nav-item a {
    color: #FFF;
    text-transform: uppercase;
    font-size: 16px;
    background-color: transparent;
}

.scrolled .navbar-nav .nav-item a {
    color: #000;
}

.scrolled {
    background-color: #fff !important;
    transition: 0.5s all;
}

.navbar-nav .dropdown-menu {
    background: black;
    width: 220px;
}

.navbar-nav .dropdown-toggle::after {
    vertical-align: middle;
}

.text-theme {
    color: #9F7E39 !important;
}

/* Mobile dropdown styles */
@media (max-width: 991px) {
    .section-title {
        font-size: 12.59vw !important;
    }

    .dropdown-menu {
        background-color: transparent;
        border: none;
        box-shadow: none;
        padding-left: 2rem;
    }

    .dropdown-item {
        color: #fff;
    }

    .dropdown-item:hover,
    .dropdown-item:focus {
        background-color: transparent;
        color: #ccc;
    }

    .dropdown-divider {
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        margin: 0.3rem 1rem;
    }

    .navbar-nav .dropdown-toggle::after {
        display: none;
        /* Hide default Bootstrap arrow */
    }

    .mobile-dropdown-icon {
        display: inline-block;
        width: 16px;
        height: 16px;
        position: relative;
        margin-left: auto;
        vertical-align: middle;
        margin-top: -2px;
        /* Adjust vertical alignment if needed */
    }

    .mobile-dropdown-icon::before,
    .mobile-dropdown-icon::after {
        content: '';
        position: absolute;
        background-color: #111;
        /* Color of the plus/minus icon */
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        transition: transform 0.3s ease-in-out, background-color 0.3s ease-in-out;
    }

    .mobile-dropdown-icon::before {
        width: 100%;
        height: 2px;
    }

    .mobile-dropdown-icon::after {
        width: 2px;
        height: 100%;
    }

    .mobile-dropdown-icon.open::after {
        transform: translate(-50%, -50%) scaleY(0);
        /* Hide vertical bar to make it a minus */
    }
}

.scrolled .navbar-nav .dropdown-menu {
    background: #fff !important;
    width: 220px;
}

.hero {
    width: 100%;
    min-height: 100vh;
    /* height: 600px; or your preferred height */
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    position: relative;
    box-sizing: border-box;
    /* overflow: hidden; */
    margin: 0;
    padding: 0;
    background-color: #000;
    /* scroll-snap-align: start; */
}

/* Ensure the parallax backgrounds cover the full area */
.parallax-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 120%;
    background-position: center center;
    background-size: cover;
    /* background-repeat: no-repeat; */
    z-index: 1;
    will-change: transform;
    transition: transform 0.1s linear;
    pointer-events: none;
    background-color: #000;
}

.hero-1,
.hero-2,
.hero-3,
.hero-4 {
    background: none !important;
}

.hero-1 {
    background: none;
}

.hero-2 {
    background: none;
}

.hero-3 {
    background: none;
}

.hero-4 {
    background: none;
}

/* .hero-5 {
    background: url('../img/5.jpg') center/cover no-repeat;
} */
.hero-scroll-snap {
    height: 100vh;
    overflow-y: scroll;
    /* scroll-snap-type: y mandatory; */
    /* Optional: for smooth scroll */
    /* scroll-behavior: smooth; */
}

.hero-scroll-snap .hero {
    height: 100vh;
    /* scroll-snap-align: start; */
    position: relative;
}

.hero-scroll-snap {
    scrollbar-width: none;
    /* Firefox */
}

.hero-scroll-snap::-webkit-scrollbar {
    display: none;
    /* Chrome, Safari */
}

.hero-text,
.hero-subtext {
    color: #fff;
    font-weight: bold;
    text-align: left;
    text-transform: uppercase;
    position: relative;
    overflow: hidden;
    transform: translateY(0);
    transition: transform 0.8s cubic-bezier(0.215, 0.610, 0.355, 1.000);
    z-index: 2;
}

/* Hero text in view state */
.hero-text.in-view .staggered-text .line-inner,
.hero-text.in-view .horizontal-reveal .inner,
.hero-text.in-view.masked-animation::after {
    animation-play-state: running;
}

/* Split text animation - for word by word reveal */
.split-text {
    display: inline-block;
    overflow: hidden;
}

.split-text .word {
    display: inline-block;
    overflow: hidden;
    transform: translateY(100%);
    opacity: 0;
    margin-right: 0.5rem;
}

.split-text .word.revealed {
    animation: revealWord 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes revealWord {
    0% {
        transform: translateY(100%);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Staggered reveal for text lines */
.staggered-text {
    overflow: hidden;
}

.staggered-text .line {
    display: block;
    overflow: hidden;
    position: relative;
}

.staggered-text .line-inner {
    display: block;
    transform: translateY(100%);
    opacity: 0;
}

.in-view .staggered-text .line-inner,
.staggered-text .line-inner.revealed {
    animation: revealLine 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.in-view .staggered-text .line:nth-child(2) .line-inner,
.staggered-text .line:nth-child(2) .line-inner.revealed {
    animation-delay: 0.15s;
}

@keyframes revealLine {
    0% {
        transform: translateY(100%);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Enhanced hero text animations with mask effect */
.masked-animation {
    position: relative;
    overflow: hidden;
}

/* .masked-animation::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0) 100%);
    animation: maskSlide 1.5s cubic-bezier(0.77, 0, 0.175, 1) forwards;
    animation-play-state: paused;
    pointer-events: none;
}

.masked-animation.in-view::after {
    animation-play-state: running;
}

@keyframes maskSlide {
    0% {
        transform: translateX(-100%);
    }

    50% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(100%);
    }
} */

/* Horizontal text reveal animation */
.horizontal-reveal {
    position: relative;
    overflow: hidden;
    display: inline-block;
}

.horizontal-reveal .inner {
    display: block;
    transform: translateX(-100%);
    transition: transform 1s cubic-bezier(0.77, 0, 0.175, 1);
}

.horizontal-reveal.animate-in .inner,
.in-view .horizontal-reveal .inner {
    transform: translateX(0);
}

/* Character-by-character animation for premium effect */
.char-animation .char {
    display: inline-block;
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.3s, transform 0.3s;
}

.char-animation.animate-in .char {
    opacity: 1;
    transform: translateY(0);
}

/* Apply different delays for each character */
.char-animation.animate-in .char:nth-child(1) {
    transition-delay: 0.02s;
}

.char-animation.animate-in .char:nth-child(2) {
    transition-delay: 0.04s;
}

.char-animation.animate-in .char:nth-child(3) {
    transition-delay: 0.06s;
}

.char-animation.animate-in .char:nth-child(4) {
    transition-delay: 0.08s;
}

.char-animation.animate-in .char:nth-child(5) {
    transition-delay: 0.10s;
}

.char-animation.animate-in .char:nth-child(6) {
    transition-delay: 0.12s;
}

.char-animation.animate-in .char:nth-child(7) {
    transition-delay: 0.14s;
}

.char-animation.animate-in .char:nth-child(8) {
    transition-delay: 0.16s;
}

.char-animation.animate-in .char:nth-child(9) {
    transition-delay: 0.18s;
}

.char-animation.animate-in .char:nth-child(10) {
    transition-delay: 0.20s;
}

.char-animation.animate-in .char:nth-child(11) {
    transition-delay: 0.22s;
}

.char-animation.animate-in .char:nth-child(12) {
    transition-delay: 0.24s;
}

.char-animation.animate-in .char:nth-child(13) {
    transition-delay: 0.26s;
}

.char-animation.animate-in .char:nth-child(14) {
    transition-delay: 0.28s;
}

.char-animation.animate-in .char:nth-child(15) {
    transition-delay: 0.30s;
}

.char-animation.animate-in .char:nth-child(16) {
    transition-delay: 0.32s;
}

.char-animation.animate-in .char:nth-child(17) {
    transition-delay: 0.34s;
}

.char-animation.animate-in .char:nth-child(18) {
    transition-delay: 0.36s;
}

.char-animation.animate-in .char:nth-child(19) {
    transition-delay: 0.38s;
}

.char-animation.animate-in .char:nth-child(20) {
    transition-delay: 0.40s;
}

/* Enhanced animations for hero text */
.hero-text.animate-up {
    animation: slideUp 1.2s cubic-bezier(0.215, 0.610, 0.355, 1.000) forwards;
}

.hero-text.animate-down {
    animation: slideDown 1.2s cubic-bezier(0.215, 0.610, 0.355, 1.000) forwards;
}

.hero-subtext.animate-up {
    animation: slideUp 1.2s cubic-bezier(0.215, 0.610, 0.355, 1.000) forwards;
}

.hero-subtext.animate-down {
    animation: slideDown 1.2s cubic-bezier(0.215, 0.610, 0.355, 1.000) forwards;
}

/* The tailored space animations */
.tailored-title {
    overflow: hidden;
}

.tailored-title.animate-in .word {
    display: inline-block;
    animation: fadeInUp 0.8s cubic-bezier(0.215, 0.610, 0.355, 1.000) forwards;
    opacity: 0;
    transform: translateY(50px);
}

.tailored-title.animate-in .word:nth-child(2) {
    animation-delay: 0.15s;
}

.tailored-title.animate-in .word:nth-child(3) {
    animation-delay: 0.3s;
}

.tailored-center-text.animate-in p {
    animation: fadeInRight 0.8s cubic-bezier(0.215, 0.610, 0.355, 1.000) forwards;
    opacity: 0;
    transform: translateX(50px);
}

.tailored-right-text.animate-in {
    animation: fadeInLeft 0.8s cubic-bezier(0.215, 0.610, 0.355, 1.000) forwards;
    opacity: 0;
    transform: translateX(-50px);
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(50px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

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

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInLeft {
    0% {
        opacity: 0;
        transform: translateX(50px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideUp {
    0% {
        opacity: 0;
        transform: translateY(100px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideDown {
    0% {
        opacity: 0;
        transform: translateY(-100px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Section title animation */
.section-title {
    overflow: hidden;
    position: relative;
}

.section-title.animate-in {
    animation: slideReveal 1s cubic-bezier(0.215, 0.610, 0.355, 1.000) forwards;
}

@keyframes slideReveal {
    0% {
        opacity: 0;
        transform: translateY(50px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}


.hero-text-large {
    font-size: 22vw;
    line-height: 1;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.hero-text-medium {
    font-size: 7vw;
    line-height: 1.1;
    letter-spacing: 1px;
    margin-bottom: 32px;
    margin-left: 30px;
    position: absolute;
    bottom: 50px;
}

.hero-products {
    margin-left: 36px;
    margin-bottom: 32px;
    position: absolute;
    right: 0;
    z-index: 99;
    bottom: 0;
}

.hero-products ul {
    list-style: none;
    padding: 0;
    margin: 0 0 12px 0;
}

.hero-products li {
    color: #fff;
    font-size: 1.1vw;
    margin-bottom: 4px;
    opacity: 0.85;
}

.see-all {
    color: #fff;
    font-size: 1vw;
    text-decoration: underline;
    opacity: 0.95;
}

@media (max-width: 900px) {

    .navbar-nav .dropdown-menu,
    .scrolled .navbar-nav .dropdown-menu {
        background: #f5f4ef !important;
        width: 100%;
        padding-left: 0;
    }

    .navbar-nav .dropdown-menu .dropdown-item,
    .scrolled .navbar-nav .dropdown-menu .dropdown-item {
        color: #000 !important;
    }

    .hero-text-large {
        font-size: 18vw;
    }

    .hero-text-medium {
        font-size: 12vw;
        margin-left: 0;
        bottom: 50px;
    }

    .hero-products li,
    .see-all {
        font-size: 2.5vw;
    }

    .menu {
        padding: 0 10px !important;
    }

    .hero-text,
    .hero-products {
        margin-left: 10px;
    }
}

/* Bootstrap overrides for nav-link color */
.menu .nav-link {
    color: #111 !important;
    font-size: 15px;
    letter-spacing: 0.5px;
    transition: color 0.2s;
}

.menu .nav-link:hover {
    color: #bfa16a !important;
}

.hero-1-bg {
    background: url('../img/sofa.jpg') center/cover no-repeat;
}

.hero-2-bg {
    background: url('../img/bed.jpg') center/cover no-repeat;
}

.hero-3-bg {
    background: url('../img/closet.jpg') center/cover no-repeat;
}

.hero-4-bg {
    background: url('../img/wood.jpg') center/cover no-repeat;
}

/* .hero-5-bg {
    background: url('../img/5.jpg') center/cover no-repeat;
} */

.hero>.container-fluid {
    position: relative;
    z-index: 2;
}

.hero-products-fixed {
    position: fixed;
    right: 36px;
    bottom: 32px;
    z-index: 9999;
    color: #fff;
    transition: opacity 0.3s, visibility 0.3s;
}

.hero-products-fixed ul {
    list-style: none;
    padding: 0;
    margin: 0 0 12px 0;
}


.hero-products-fixed a {
    color: #fff;
    font-size: 1.1vw;
    text-decoration: none;
    font-weight: bold;
    opacity: 0.95;
    transition: color 0.2s;
}

.hero-products-fixed a:hover {
    color: #bfa16a;
    text-decoration: underline;
}

@media (max-width: 900px) {
    .hero-products-fixed {
        left: 10px;
        top: 50px;
        padding: 10px 12px;
        width: 100%;
        height: 150px;
    }

    .hero-products-fixed a {
        font-size: 2.5vw;
    }
}

.navbar {
    transition: top 0.4s cubic-bezier(0.4, 0, 0.2, 1), background 0.3s, box-shadow 0.3s;
    top: 0;
    position: fixed;
    width: 100%;
    z-index: 9;
}

.navbar-hide {
    top: -80px !important;
}

@media (max-width: 991.98px) {
    .navbar-hide {
        top: -120px !important;
    }

    .navbar-collapse {
        position: fixed !important;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: #f5f4ef;
        z-index: 2000;
        box-shadow: 0 0 0 8px #333;
        display: flex !important;
        flex-direction: column;
        justify-content: flex-start;
        align-items: stretch;
        padding: 16px 0 0 0;
        border-radius: 8px;
        border: none;
        overflow-y: auto;
        transform: translateY(-100%);
        transition: transform 0.9s cubic-bezier(.4, 0, .2, 1);
        visibility: visible;
        opacity: 1;
        will-change: transform;
        pointer-events: none;
    }

    .navbar-collapse.show {
        transform: translateY(0);
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
    }

    .navbar-collapse.collapsing {
        display: none !important;
    }

    .navbar-collapse:not(.show) {
        visibility: hidden;
        opacity: 0;
        pointer-events: none;
    }

    /* Menu button styling */
    .navbar-toggler.menu-button {
        /* position: absolute; */
        /* left: 16px; */
        /* top: 16px; */
        /* z-index: 2100; */
        width: 92px;
        /* background: #f5f4ef6b; */
        border: none;
        font-size: 15px;
        color: #fff;
        box-shadow: none;
        padding: 6px 10px;
        display: block;
        border-radius: 0;
        margin-left: 10px;
    }

    .scrolled .navbar-toggler.menu-button {
        color: #000 !important;
    }

    .scrolled .mobile-menu-icons2 {
        color: #000 !important;
    }

    .mobile-menu-icons2 {
        /* position: absolute; */
        /* right: 16px; */
        width: 100px;
        /* top: 15px; */
        /* z-index: 2100; */
        border: none;
        font-size: 15px;
        color: #fff;
        box-shadow: none;
        padding: 6px 10px;
        display: flex;
        border-radius: 0;
        justify-content: space-between;
        align-items: center;
        margin-right: 10px;
    }

    /* This class will be added via JavaScript */
    .menu-open .navbar-toggler.menu-button {
        display: none !important;
    }

    .navbar-nav {
        width: 100%;
        flex-direction: column !important;
        padding: 0 0 0 0;
        margin: 0;
    }

    .navbar-nav .nav-item {
        width: 100%;
        margin: 0;
        padding: 0;
    }

    .navbar-nav .nav-item:last-child {
        border-bottom: none;
    }

    .navbar-nav .nav-link {
        font-family: 'Gothic A1', 'Century Gothic', sans-serif;
        font-size: 2rem;
        font-weight: 700;
        color: #111 !important;
        padding: 6px 24px 6px 10px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        background: none;
        border: none;
        width: 100%;
        text-align: left;
        letter-spacing: 0;
    }

    .navbar-nav .nav-link.active {
        color: #111 !important;
    }

    .navbar .navbar-nav .nav-item a {
        font-size: 26px;
        border-bottom: 1px solid #000000;
        font-family: suisse-semibold, sans-serif;
        text-transform: capitalize;
        letter-spacing: -.054rem;
    }

    .navbar-nav .nav-link[aria-disabled="true"] {
        color: #111 !important;
        opacity: 1;
    }

    .navbar-nav .nav-link sup,
    .navbar-nav .nav-link small {
        font-size: 1rem;
        font-weight: 400;
        margin-left: 2px;
    }

    .mobile-menu-close {
        background: #eee;
        border: 1px solid #ccc;
        border-radius: 4px;
        font-size: 1rem;
        font-weight: 600;
        color: #222;
        padding: 2px 4px;
        cursor: pointer;
    }

    /* Top bar with close, logo, icons */
    .navbar-collapse::before {
        content: '';
        display: block;
        height: 48px;
        width: 100%;
    }

    .navbar-collapse .mobile-menu-topbar {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 48px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 16px;
        background: #f5f4ef;
        border-bottom: 1px solid #222;
        z-index: 2100;
    }

    .mobile-menu-logo {
        flex: 1 1 auto;
        text-align: center;
        font-size: 1.5rem;
        font-weight: 700;
        letter-spacing: 0.1em;
        color: #222;
    }

    .mobile-menu-icons {
        display: flex;
        gap: 16px;
        align-items: center;
    }

    .mobile-menu-icons i {
        cursor: pointer;
        transition: color 0.3s ease;
    }

    .mobile-menu-icons i:hover {
        color: #ccc;
    }

    .navbar .container-fluid {
        padding: 0;
    }

    /* Hide d-flex Shop Care Products in topbar, show as menu item */
    .navbar-collapse .d-flex {
        display: none !important;
    }

    /* Remove Bootstrap's default collapse animation */
    .collapsing {
        transition: none !important;
    }
}

.tailored-space {
    background: #fff;
    padding-top: 60px;
    padding-bottom: 60px;
}

.tailored-title {
    font-family: 'Times New Roman', serif;
    font-size: 30px;
    line-height: 1;
    font-weight: 400;
    letter-spacing: 0;
}

.tailored-link {
    font-weight: bold;
    text-decoration: underline;
    color: #111;
    font-size: 12px;
    margin-top: 18px;
    display: inline-block;
}

.tailored-center-text {
    font-size: 20px;
    font-family: 'Times New Roman', serif;
    text-align: left;
}

.tailored-right-text {
    font-size: 14px;
    font-family: 'Times New Roman', serif;
    text-align: left;
}

.tailored-img {
    max-height: 500px;
    object-fit: cover;
    width: 100%;
    border-radius: 0;
}

.tailored-caption {
    font-size: 14px;
    text-align: left;
    width: 100%;
}

@media (max-width: 991.98px) {
    .tailored-title {
        font-size: 6vw;
        text-align: center;
    }

    .tailored-center-text {
        font-size: 3.5vw;
        text-align: center;
    }

    .tailored-right-text {
        font-size: 2.5vw;
        text-align: center;
    }

    .tailored-img {
        max-height: 300px;
    }
}

@media (max-width: 767.98px) {
    .tailored-title {
        font-size: 8vw;
    }

    .tailored-center-text {
        font-size: 5vw;
    }

    .tailored-right-text {
        font-size: 3vw;
    }

    .tailored-img {
        max-height: 200px;
    }

    .tailored-space {
        padding-top: 30px;
        padding-bottom: 30px;
    }

}

.vr {
    opacity: .55;
}

.tailored-space .vr {
    border-left: 2px solid #000 !important;
    background: none !important;
    min-width: 0;
    width: 0;
    height: 140px;
    margin-right: 2rem !important;
}













footer[data-astro-cid-rhv6ztfp] {
    position: relative;
    padding-top: 2rem;
    padding-bottom: 2rem;
    background-color: #fff;
    font-family: "Century Gothic", "Gothic A1", sans-serif;
}

@media (min-width: 64em) {
    footer[data-astro-cid-rhv6ztfp] {
        padding-top: 3.8125rem;
        padding-bottom: 3.8125rem;
    }
}

@media (max-width: 64em) {
    footer[data-astro-cid-rhv6ztfp] .footer-container[data-astro-cid-rhv6ztfp] {
        display: flex;
        flex-direction: column;
    }
}

@media (min-width: 64em) {
    footer[data-astro-cid-rhv6ztfp] .menu-left[data-astro-cid-rhv6ztfp] {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin-bottom: 6.25rem;
    }
}

@media (min-width: 80em) {
    footer[data-astro-cid-rhv6ztfp] .menu-left[data-astro-cid-rhv6ztfp] {
        margin-bottom: 0;
    }
}

footer[data-astro-cid-rhv6ztfp] .menu-left[data-astro-cid-rhv6ztfp] .menu-links[data-astro-cid-rhv6ztfp],
footer[data-astro-cid-rhv6ztfp] .menu-left[data-astro-cid-rhv6ztfp] .legals-links[data-astro-cid-rhv6ztfp] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-left: 0;
}

@media (max-width: 64em) {

    /* footer[data-astro-cid-rhv6ztfp] .menu-left[data-astro-cid-rhv6ztfp] .menu-links[data-astro-cid-rhv6ztfp],
    footer[data-astro-cid-rhv6ztfp] .menu-left[data-astro-cid-rhv6ztfp] .legals-links[data-astro-cid-rhv6ztfp] {
        display: none;
    } */
}

footer[data-astro-cid-rhv6ztfp] .menu-left[data-astro-cid-rhv6ztfp] .menu-links[data-astro-cid-rhv6ztfp] li[data-astro-cid-rhv6ztfp] {
    width: fit-content;
}

@media (hover: hover) and (pointer: fine) {
    footer[data-astro-cid-rhv6ztfp] .menu-left[data-astro-cid-rhv6ztfp] .menu-links[data-astro-cid-rhv6ztfp] li[data-astro-cid-rhv6ztfp]:hover a[data-astro-cid-rhv6ztfp] {
        color: #81a0bb;
    }
}

footer[data-astro-cid-rhv6ztfp] .menu-left[data-astro-cid-rhv6ztfp] .menu-links[data-astro-cid-rhv6ztfp] a[data-astro-cid-rhv6ztfp] {
    color: #2d628c;
    transition: color .2s linear;
    font-family: "Century Gothic", "Gothic A1", sans-serif;
}

footer[data-astro-cid-rhv6ztfp] .menu-left[data-astro-cid-rhv6ztfp] .legals-links[data-astro-cid-rhv6ztfp] {
    margin-top: 35px;
}

footer[data-astro-cid-rhv6ztfp] .menu-left[data-astro-cid-rhv6ztfp] .legals-links[data-astro-cid-rhv6ztfp] li[data-astro-cid-rhv6ztfp] {
    width: fit-content;
}

@media (hover: hover) and (pointer: fine) {
    footer[data-astro-cid-rhv6ztfp] .menu-left[data-astro-cid-rhv6ztfp] .legals-links[data-astro-cid-rhv6ztfp] li[data-astro-cid-rhv6ztfp]:hover a[data-astro-cid-rhv6ztfp] {
        color: #fff;
    }
}

footer[data-astro-cid-rhv6ztfp] .menu-left[data-astro-cid-rhv6ztfp] .legals-links[data-astro-cid-rhv6ztfp] a[data-astro-cid-rhv6ztfp] {
    color: #81a0bb;
    transition: color .2s linear;
    font-family: "Century Gothic", "Gothic A1", sans-serif;
}

footer[data-astro-cid-rhv6ztfp] .menu-right[data-astro-cid-rhv6ztfp] {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 2.5rem;
    width: fit-content;
    height: 100%;
}

@media (min-width: 80em) {
    footer[data-astro-cid-rhv6ztfp] .menu-right[data-astro-cid-rhv6ztfp] {
        gap: 1.25rem;
        justify-content: space-between;
        width: 100%;
    }
}

footer[data-astro-cid-rhv6ztfp] .line[data-astro-cid-rhv6ztfp] {
    width: 100%;
    height: 2px;
    margin-top: 6.25rem;
    background-color: #2d628c33;
}

@media (max-width: 64em) {
    footer[data-astro-cid-rhv6ztfp] .line[data-astro-cid-rhv6ztfp] {
        display: none;
    }
}

footer[data-astro-cid-rhv6ztfp] .legal-info-container[data-astro-cid-rhv6ztfp] {
    margin-top: 6.25rem;
}

@media (min-width: 64em) {
    footer[data-astro-cid-rhv6ztfp] .legal-info-container[data-astro-cid-rhv6ztfp] {
        margin-top: 2.5rem;
    }
}

footer[data-astro-cid-rhv6ztfp] .legal-info-container[data-astro-cid-rhv6ztfp] .logo[data-astro-cid-rhv6ztfp] {
    width: 100%;
    max-width: 19.4375rem;
    height: auto;
}

@media (min-width: 80em) {
    footer[data-astro-cid-rhv6ztfp] .legal-info-container[data-astro-cid-rhv6ztfp] .logo[data-astro-cid-rhv6ztfp] {
        margin-top: auto;
        margin-bottom: 0;
    }
}

footer[data-astro-cid-rhv6ztfp] .copyright-info[data-astro-cid-rhv6ztfp] {
    display: flex;
    justify-content: space-between;
    margin-top: 1.9375rem;
}

@media (min-width: 64em) {
    footer[data-astro-cid-rhv6ztfp] .copyright-info[data-astro-cid-rhv6ztfp] {
        align-items: flex-end;
        justify-content: flex-end;
        margin-top: 2.5rem;
    }
}

footer[data-astro-cid-rhv6ztfp] .copyright-info[data-astro-cid-rhv6ztfp] p[data-astro-cid-rhv6ztfp] {
    opacity: .5;
    font-family: "Century Gothic", "Gothic A1", sans-serif;
}

footer[data-astro-cid-rhv6ztfp][data-theme=dark] {
    background-color: #000;
}

footer[data-astro-cid-rhv6ztfp][data-theme=dark] .menu-left[data-astro-cid-rhv6ztfp] .menu-links[data-astro-cid-rhv6ztfp] a[data-astro-cid-rhv6ztfp] {
    color: #fff;
}

footer[data-astro-cid-rhv6ztfp][data-theme=dark] .menu-left[data-astro-cid-rhv6ztfp] .legals-links[data-astro-cid-rhv6ztfp] a[data-astro-cid-rhv6ztfp] {
    color: #fff9;
}

footer[data-astro-cid-rhv6ztfp][data-theme=dark] .logo[data-astro-cid-rhv6ztfp] path {
    fill: #fff;
}

footer[data-astro-cid-rhv6ztfp][data-theme=dark] .menu-right[data-astro-cid-rhv6ztfp]:after {
    background-color: #ffffff1a;
}

footer[data-astro-cid-rhv6ztfp][data-theme=dark] .line[data-astro-cid-rhv6ztfp] {
    background-color: #ffffff1a;
}

footer[data-astro-cid-rhv6ztfp][data-theme=dark] .copyright-info[data-astro-cid-rhv6ztfp] p[data-astro-cid-rhv6ztfp] {
    color: #fff;
}

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

h2 {
    padding: 0;
    margin: 0;
    font-weight: unset;
    text-wrap: balance;
}

p {
    padding: 0;
    margin: 0;
}

ul {
    list-style-type: none;
}

a {
    color: currentColor;
    text-decoration: none;
    cursor: pointer;
}

a:hover,
a:active {
    outline: 0;
}

.grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 10px;
    margin: 0 auto;
}

@media (min-width: 64em) {
    .grid {
        grid-template-columns: repeat(24, minmax(0, 1fr));
        column-gap: 20px;
        margin: auto;
    }
}

.grid>* {
    grid-column: 1/-1;
}

@media (min-width: 64em) {
    .grid .dk\:col-start-3 {
        grid-column-start: 3;
    }

    .grid .dk\:col-end-10 {
        grid-column-end: 10;
    }

    .grid .dk\:col-end-24 {
        grid-column-end: 24;
    }
}

@media (min-width: 80em) {
    .grid .ml\:col-start-3 {
        grid-column-start: 3;
    }

    .grid .ml\:col-end-9 {
        grid-column-end: 9;
    }

    .grid .ml\:col-start-10 {
        grid-column-start: 10;
    }

    .grid .ml\:col-end-24 {
        grid-column-end: 24;
    }
}

@media (min-width: 105em) {
    .grid .lg\:col-start-4 {
        grid-column-start: 4;
    }

    .grid .lg\:col-end-10 {
        grid-column-end: 10;
    }

    .grid .lg\:col-start-11 {
        grid-column-start: 11;
    }

    .grid .lg\:col-end-21 {
        grid-column-end: 21;
    }
}

.montfort-navy-blue {
    color: #2d628c;
}

.fs-body-s {
    font-size: .75rem;
    line-height: 1.6;
    letter-spacing: .06rem;
}

.fs-s2 {
    line-height: 1.6;
    font-size: 1.25rem;
    letter-spacing: .05rem;
}

.uppercase {
    text-transform: uppercase;
}

.fs-cta-s {
    font-size: .75rem;
    line-height: 1.2;
    letter-spacing: .03rem;
}

.office[data-astro-cid-spfovdek] {
    position: relative;
    max-width: 25rem;
    padding-bottom: 2.5rem;
}

@media (max-width: 64em) {
    .office[data-astro-cid-spfovdek] {
        width: 100%;
    }
}

@media (min-width: 64em) {
    .office[data-astro-cid-spfovdek] {
        display: flex;
        flex-direction: column;
        gap: 4.625rem;
        justify-content: space-between;
        max-width: 13.875rem;
        padding-bottom: 0;
    }
}

.office[data-astro-cid-spfovdek]:after {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    content: "";
}

@media (min-width: 64em) {
    .office[data-astro-cid-spfovdek]:after {
        display: none;
    }
}

.office[data-astro-cid-spfovdek] .top[data-astro-cid-spfovdek] h2[data-astro-cid-spfovdek] {
    max-width: 13.875rem;
    /* min-height: 4rem; */
    margin-bottom: 1.5rem;
}

.office[data-astro-cid-spfovdek] .top[data-astro-cid-spfovdek] p[data-astro-cid-spfovdek] {
    margin-bottom: 1rem;
    color: #999999;
}

.office[data-astro-cid-spfovdek] .bottom[data-astro-cid-spfovdek] a[data-astro-cid-spfovdek] {
    position: relative;
    display: block;
    width: fit-content;
}

.office[data-astro-cid-spfovdek] .bottom[data-astro-cid-spfovdek] a[data-astro-cid-spfovdek]:after {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    content: "";
    transition: transform .6s cubic-bezier(.4, 0, .1, 1);
    transform: scale3d(0, 1, 1);
    transform-origin: right center;
}

@media (hover: hover) and (pointer: fine) {
    .office[data-astro-cid-spfovdek] .bottom[data-astro-cid-spfovdek] a[data-astro-cid-spfovdek]:hover:after {
        transform: scaleZ(1);
        transform-origin: left center;
    }
}

.office[data-astro-cid-spfovdek][data-theme=dark] h2[data-astro-cid-spfovdek],
.office[data-astro-cid-spfovdek][data-theme=dark] p[data-astro-cid-spfovdek],
.office[data-astro-cid-spfovdek][data-theme=dark] a[data-astro-cid-spfovdek] {
    color: #fff;
}

.office[data-astro-cid-spfovdek][data-theme=dark]:after {
    background-color: #ffffff2b;
}

.office[data-astro-cid-spfovdek][data-theme=dark] .bottom[data-astro-cid-spfovdek] a[data-astro-cid-spfovdek]:after {
    background-color: #fff;
}

.projects {
    background-color: #dfdfdf;
    padding: 80px 0 40px;
    position: relative;
    overflow: hidden;
}

.section-title {
    color: #000;
    font-size: 2.5rem;
    font-weight: 600;
    margin-bottom: 40px;
    font-family: "Century Gothic", "Gothic A1", sans-serif;
    padding-left: 15px;
}

.project-card {
    position: relative;
    overflow: hidden;
    border-radius: 0;
    height: 482px;
    /* Fixed height */
}

.project-card img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.project-overlay {
    /* position: absolute; */
    /* bottom: 0; */
    /* left: 0; */
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: flex-end;
    opacity: 1;
    transition: opacity 0.3s ease;
}

/* Update to remove hover effect since we're showing overlay by default */
.project-card:hover img {
    transform: scale(1);
}

.project-info {
    padding: 20px;
    color: #fff;
    width: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(5px);
}

.project-info h3 {
    font-size: 1.5rem;
    margin: 0;
    font-weight: 600;
    font-family: "Century Gothic", "Gothic A1", sans-serif;
}

.project-info p {
    font-size: 1rem;
    margin: 5px 0 0;
    opacity: 0.8;
    font-family: "Century Gothic", "Gothic A1", sans-serif;
}

.carousel-nav {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 30px;
}

.carousel-prev,
.carousel-next {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255);
    border: 1px solid rgba(0, 0, 0, 0.3);
    color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0;
}

.carousel-prev:hover,
.carousel-next:hover {
    background-color: #f2f2f2;
    border: 1px solid #f2f2f2;
    transform: translateY(-2px);
}

.carousel-prev svg,
.carousel-next svg {
    width: 20px;
    height: 20px;
}

@media (max-width: 767px) {

    .carousel-prev,
    .carousel-next {
        width: 40px;
        height: 40px;
    }

    .carousel-prev svg,
    .carousel-next svg {
        width: 16px;
        height: 16px;
    }

    .grid {
        width: max(200px, 100% - 50px);
    }

    .section-title {
        font-size: 2rem;
        margin-bottom: 20px;
    }

    .project-info h3 {
        font-size: 1.2rem;
    }

    .project-info p {
        font-size: 0.9rem;
    }

    .projects {
        padding: 40px 0;
    }

    .project-card {
        height: 482px;
        /* Smaller height for mobile */
    }
}

/* Owl Carousel Customization */
.owl-carousel {
    margin: 0 -10px;
    width: calc(100% + 20px);
    overflow: visible;
}

.owl-carousel .owl-stage-outer {
    overflow: visible;
    padding: 0;
}

.owl-carousel .item {
    transition: opacity 0.3s ease;
    padding: 0 10px;
}


/* Enhanced tailored space animations */
.tailored-link {
    position: relative;
    overflow: hidden;
    display: inline-block;
}

.tailored-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: currentColor;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.6s cubic-bezier(0.77, 0, 0.175, 1);
}

.tailored-link:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}

/* Advanced image hover effects for projects */
.project-card:hover img {
    transform: scale(1.05);
    filter: brightness(0.8);
}

.project-card .project-overlay {
    /* transform: translateY(0); */
    transition: opacity 0.3s ease, transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Animate project info elements individually */
.project-info h3,
.project-info p {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.3s ease, transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition-delay: 0s;
}

/* Root element background color */
html {
    background-color: #000;
}

/* Navbar logo styling for desktop */
.navbar-logo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1060;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Ensure the navbar structure accommodates the centered logo */
@media (min-width: 992px) {
    .navbar .container-fluid {
        position: relative;
    }

    .navbar-collapse {
        justify-content: space-between;
    }

    /* .navbar-nav.me-auto {
        margin-right: 1rem !important;
    } */

}








/* Services */
@font-face {
    font-family: richmond-display;
    src: url(https://use.typekit.net/af/3e2385/00000000000000007753f6bd/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i8&v=3) format("woff2"), url(https://use.typekit.net/af/3e2385/00000000000000007753f6bd/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i8&v=3) format("woff"), url(https://use.typekit.net/af/3e2385/00000000000000007753f6bd/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i8&v=3) format("opentype");
    font-weight: 800;
    font-style: italic;
    font-stretch: normal;
    font-display: auto;
}

@font-face {
    font-family: richmond-display;
    src: url(https://use.typekit.net/af/6f6e62/00000000000000007753f6be/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n9&v=3) format("woff2"), url(https://use.typekit.net/af/6f6e62/00000000000000007753f6be/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n9&v=3) format("woff"), url(https://use.typekit.net/af/6f6e62/00000000000000007753f6be/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n9&v=3) format("opentype");
    font-weight: 900;
    font-style: normal;
    font-stretch: normal;
    font-display: auto;
}

@font-face {
    font-family: richmond-display;
    src: url(https://use.typekit.net/af/72eb1e/00000000000000007753f6c0/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i2&v=3) format("woff2"), url(https://use.typekit.net/af/72eb1e/00000000000000007753f6c0/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i2&v=3) format("woff"), url(https://use.typekit.net/af/72eb1e/00000000000000007753f6c0/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i2&v=3) format("opentype");
    font-weight: 200;
    font-style: italic;
    font-stretch: normal;
    font-display: auto;
}

@font-face {
    font-family: richmond-display;
    src: url(https://use.typekit.net/af/ea41a7/00000000000000007753f6b5/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i4&v=3) format("woff2"), url(https://use.typekit.net/af/ea41a7/00000000000000007753f6b5/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i4&v=3) format("woff"), url(https://use.typekit.net/af/ea41a7/00000000000000007753f6b5/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i4&v=3) format("opentype");
    font-weight: 400;
    font-style: italic;
    font-stretch: normal;
    font-display: auto;
}

@font-face {
    font-family: richmond-display;
    src: url(https://use.typekit.net/af/8d0a9e/00000000000000007753f6b9/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n8&v=3) format("woff2"), url(https://use.typekit.net/af/8d0a9e/00000000000000007753f6b9/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n8&v=3) format("woff"), url(https://use.typekit.net/af/8d0a9e/00000000000000007753f6b9/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n8&v=3) format("opentype");
    font-weight: 800;
    font-style: normal;
    font-stretch: normal;
    font-display: auto;
}

@font-face {
    font-family: richmond-display;
    src: url(https://use.typekit.net/af/77c9b6/00000000000000007753f6bf/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3) format("woff2"), url(https://use.typekit.net/af/77c9b6/00000000000000007753f6bf/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3) format("woff"), url(https://use.typekit.net/af/77c9b6/00000000000000007753f6bf/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3) format("opentype");
    font-weight: 700;
    font-style: normal;
    font-stretch: normal;
    font-display: auto;
}

@font-face {
    font-family: richmond-display;
    src: url(https://use.typekit.net/af/2f4d9e/00000000000000007753f6b8/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3) format("woff2"), url(https://use.typekit.net/af/2f4d9e/00000000000000007753f6b8/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3) format("woff"), url(https://use.typekit.net/af/2f4d9e/00000000000000007753f6b8/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3) format("opentype");
    font-weight: 400;
    font-style: normal;
    font-stretch: normal;
    font-display: auto;
}

@font-face {
    font-family: richmond-display;
    src: url(https://use.typekit.net/af/589994/00000000000000007753f6c1/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n2&v=3) format("woff2"), url(https://use.typekit.net/af/589994/00000000000000007753f6c1/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n2&v=3) format("woff"), url(https://use.typekit.net/af/589994/00000000000000007753f6c1/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n2&v=3) format("opentype");
    font-weight: 200;
    font-style: normal;
    font-stretch: normal;
    font-display: auto;
}

@font-face {
    font-family: richmond-display;
    src: url(https://use.typekit.net/af/a4b642/00000000000000007753f6b6/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i9&v=3) format("woff2"), url(https://use.typekit.net/af/a4b642/00000000000000007753f6b6/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i9&v=3) format("woff"), url(https://use.typekit.net/af/a4b642/00000000000000007753f6b6/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i9&v=3) format("opentype");
    font-weight: 900;
    font-style: italic;
    font-stretch: normal;
    font-display: auto;
}

@font-face {
    font-family: richmond-display;
    src: url(https://use.typekit.net/af/560fe4/00000000000000007753f6ba/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i6&v=3) format("woff2"), url(https://use.typekit.net/af/560fe4/00000000000000007753f6ba/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i6&v=3) format("woff"), url(https://use.typekit.net/af/560fe4/00000000000000007753f6ba/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i6&v=3) format("opentype");
    font-weight: 600;
    font-style: italic;
    font-stretch: normal;
    font-display: auto;
}

@font-face {
    font-family: richmond-display;
    src: url(https://use.typekit.net/af/a1bd9e/00000000000000007753f6b7/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n3&v=3) format("woff2"), url(https://use.typekit.net/af/a1bd9e/00000000000000007753f6b7/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n3&v=3) format("woff"), url(https://use.typekit.net/af/a1bd9e/00000000000000007753f6b7/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n3&v=3) format("opentype");
    font-weight: 300;
    font-style: normal;
    font-stretch: normal;
    font-display: auto;
}

@font-face {
    font-family: richmond-display;
    src: url(https://use.typekit.net/af/679d0d/00000000000000007753f6c2/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i3&v=3) format("woff2"), url(https://use.typekit.net/af/679d0d/00000000000000007753f6c2/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i3&v=3) format("woff"), url(https://use.typekit.net/af/679d0d/00000000000000007753f6c2/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i3&v=3) format("opentype");
    font-weight: 300;
    font-style: italic;
    font-stretch: normal;
    font-display: auto;
}

@font-face {
    font-family: richmond-display;
    src: url(https://use.typekit.net/af/c12bfa/00000000000000007753f6bb/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i7&v=3) format("woff2"), url(https://use.typekit.net/af/c12bfa/00000000000000007753f6bb/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i7&v=3) format("woff"), url(https://use.typekit.net/af/c12bfa/00000000000000007753f6bb/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i7&v=3) format("opentype");
    font-weight: 700;
    font-style: italic;
    font-stretch: normal;
    font-display: auto;
}

@font-face {
    font-family: richmond-display;
    src: url(https://use.typekit.net/af/062d99/00000000000000007753f6bc/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n6&v=3) format("woff2"), url(https://use.typekit.net/af/062d99/00000000000000007753f6bc/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n6&v=3) format("woff"), url(https://use.typekit.net/af/062d99/00000000000000007753f6bc/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n6&v=3) format("opentype");
    font-weight: 600;
    font-style: normal;
    font-stretch: normal;
    font-display: auto;
}

@font-face {
    font-family: 'Mont';
    src: url('https://cdn.prod.website-files.com/665a18870d1e95bfe9fd9110/668864363acccb44625918ef_FONTFABRIC%20-%20MONT%20REGULAR.OTF') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* Service section styles - all scoped to #services */
#services {
    background-color: #fff;
}

#services a:active,
#services a:hover {
    outline: 0;
}

#services img {
    vertical-align: middle;
    max-width: 100%;
    display: inline-block;
}

#services .w-inline-block {
    max-width: 100%;
    display: inline-block;
}

#services a {
    text-decoration: none;
}

#services img {
    display: inline-block;
}

#services .h2,
.customHeading {
    color: #000;
    letter-spacing: .125vw;
    padding-left: 3.56vw;
    font-family: richmond-display, sans-serif;
    font-size: 6.23vw;
    line-height: 1.15;
}

#services .h2.outline {
    -webkit-text-stroke-width: .06vw;
}

#services .h2.services-first-line.receives-formal {
    text-align: right;
}

#services .h2.services-second-line.receives-formal.outline {
    text-align: right;
    height: 7.16vw;
    display: block;
}

#services .button-text-4 {
    color: #777;
    letter-spacing: .019vw;
    font-family: Mont, sans-serif;
    font-size: .93vw;
    line-height: 1.5;
}

#services .button-text-4.receives-formal {
    text-align: center;
    white-space: nowrap;
}

#services .button-text-4.planning-button.receives-formal {
    position: absolute;
    bottom: 1.79vw;
    right: 8.4vw;
    transform: translate(50%);
}

#services .p-big {
    color: #777;
    letter-spacing: .03vw;
    font-family: Mont, sans-serif;
    font-size: 1.46vw;
    line-height: 1.5;
}

#services .p-big.service-number {
    vertical-align: top;
    padding-right: 1.2vw;
    display: inline;
}

#services .p-small {
    color: #777;
    letter-spacing: .024vw;
    font-family: Mont, sans-serif;
    font-size: 1.2vw;
    line-height: 1.5;
}

#services .button {
    border: 1px solid #777;
    border-radius: 50vw;
    padding: .53vw 1.3vw;
    transition: all .2s;
}

#services .button.services-contact-button {
    width: 13.362vw;
}

#services .button.services-contact-button.receives-formal {
    justify-content: center;
    width: 12vw;
    display: flex;
    overflow: hidden;
}

#services .outline {
    color: #fff;
    -webkit-text-stroke-width: .07vw;
    -webkit-text-stroke-color: var(--3black);
}

#services .outline.receives-formal {
    text-indent: .5vw;
    display: inline-block;
    overflow: clip;
}

#services.services {
    position: relative;
    padding: 50px 0;
}

#services .services-heading {
    background-color: #fff;
    padding-top: 3.84vw;
    padding-bottom: 3.84vw;
}

#services .service-section {
    border-bottom: 1px solid var(--3black);
    background-color: var(--3white);
    margin-left: 3.56vw;
    margin-right: 3.56vw;
    padding-top: 1vw;
    padding-bottom: 1vw;
    position: sticky;
}

#services .service-section.first {
    top: 3.1vw;
}

#services .service-section.first.receives-formal {
    z-index: 4;
}

#services .service-section.second {
    top: 9.25vw;
}

#services .service-section.second.receives-formal {
    z-index: 3;
}

#services .service-section.third {
    top: 15.4vw;
}

#services .service-section.third.receives-formal {
    z-index: 2;
}

#services .service-section.fourth {
    top: 21.55vw;
}

#services .service-section.fourth.receives-formal {
    z-index: 1;
}

#services .service-title {
    color: var(--3black);
    font-family: richmond-display, sans-serif;
    font-size: 3.5vw;
    line-height: 1.17;
}

#services .service-title.receives-formal {
    display: inline;
}

#services .service-details {
    justify-content: space-between;
    align-items: center;
    margin-top: 5vw;
    margin-left: 3.56vw;
    margin-right: 3.56vw;
    padding-left: 2.8vw;
    display: flex;
}

#services .strikethrough {
    text-decoration: line-through;
}

.planning-symbol {
    width: 17.36vw;
    height: 17.36vw;
    position: relative;
}

.planning-symbol-horizontal-line {
    background-color: var(--3white);
    height: .066vw;
}

#services .symbol-element.receives-formal {
    border: .067vw solid var(--3black);
    position: absolute;
    /* transition: transform 2s cubic-bezier(0.13, 0.37, 0.06, 0.99), opacity 2s cubic-bezier(0.13, 0.37, 0.06, 0.99); */
}

.symbol-element.receives-formal.formal {
    border-color: var(--3black);
}

.symbol-element.receives-formal.planning-symbol-horizontal-line {
    border-style: none;
    width: 100%;
    height: .067vw;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.symbol-element.receives-formal.planning-symbol-horizontal-line.has-animation.end {
    width: 0%;
}

.symbol-element.receives-formal.planning-symbol-vertical-line {
    background-color: var(--3white);
    border-style: none;
    width: .067vw;
    height: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.symbol-element.receives-formal.planning-symbol-vertical-line.has-animation.end {
    height: 0%;
}

.symbol-element.receives-formal.planning-symbol-horizontal-line-extended {
    border-style: none;
    background-color: var(--3black);
    width: 100%;
    height: .067vw;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 0;
}

.symbol-element.receives-formal.planning-symbol-vertical-line-extended {
    border-style: none;
    background-color: var(--3black);
    width: .067vw;
    height: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 0;
}

#services .symbol-element.receives-formal.planning-symbol-outer-circle {
    border-radius: 50%;
    width: 13.25vw;
    height: 13.25vw;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#services .symbol-element.receives-formal.design-symbol-inner-circle-1 {
    border-radius: 50%;
    width: 10.6vw;
    height: 10.6vw;
    top: 50%;
    left: 40%;
    transform: translate(-50%, -50%);
}

#services .symbol-element.receives-formal.design-symbol-inner-circle-1.has-animation.end {
    left: 60%;
}

#services .symbol-element.receives-formal.planning-symbol-diamond {
    width: 9.38vw;
    height: 9.38vw;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)rotate(135deg);
}

#services .symbol-element.receives-formal.planning-symbol-diamond.has-animation.end {
    transform: translate(-50%, -50%)rotate(45deg);
}

#services .symbol-element.receives-formal.design-symbol-outer-circle {
    border-radius: 50%;
    width: 13.25vw;
    height: 13.25vw;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#services .symbol-element.receives-formal.planning-symbol-inner-circle {
    border-radius: 50%;
    width: 9.28vw;
    height: 9.28vw;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#services .symbol-element.receives-formal.design-symbol-inner-circle-2 {
    border-radius: 50%;
    width: 10.6vw;
    height: 10.6vw;
    top: 50%;
    left: 44%;
    transform: translate(-50%, -50%);
}

#services .symbol-element.receives-formal.design-symbol-inner-circle-2.has-animation.end {
    left: 56%;
}

#services .symbol-element.receives-formal.design-symbol-inner-circle-3 {
    border-radius: 50%;
    width: 10.6vw;
    height: 10.6vw;
    top: 50%;
    left: 48%;
    transform: translate(-50%, -50%);
}

#services .symbol-element.receives-formal.design-symbol-inner-circle-3.has-animation.end {
    left: 52%;
}

#services .symbol-element.receives-formal.design-symbol-inner-circle-4 {
    border-radius: 50%;
    width: 10.6vw;
    height: 10.6vw;
    top: 50%;
    left: 52%;
    transform: translate(-50%, -50%);
}

#services .symbol-element.receives-formal.design-symbol-inner-circle-4.has-animation.end {
    left: 48%;
}

#services .symbol-element.receives-formal.design-symbol-inner-circle-5 {
    border-radius: 50%;
    width: 10.6vw;
    height: 10.6vw;
    top: 50%;
    left: 56%;
    transform: translate(-50%, -50%);
}

#services .symbol-element.receives-formal.design-symbol-inner-circle-5.has-animation.end {
    left: 44%;
}

#services .symbol-element.receives-formal.design-symbol-inner-circle-6 {
    border-radius: 50%;
    width: 10.6vw;
    height: 10.6vw;
    top: 50%;
    left: 60%;
    transform: translate(-50%, -50%);
}

#services .symbol-element.receives-formal.design-symbol-inner-circle-6.has-animation.end {
    left: 40%;
}

#services .symbol-element.receives-formal.execution-circle-1 {
    border-style: none;
    width: 55%;
    height: 55%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transform-origin: center;
}

#services .symbol-element.receives-formal.execution-circle-1.execution-circle.has-animation.end {
    transform: translate(-50%, -50%)rotate(29.2deg);
}

#services .symbol-element.receives-formal.execution-circle-2,
#services .symbol-element.receives-formal.execution-circle-3,
#services .symbol-element.receives-formal.execution-circle-4 {
    border-style: none;
    transform-origin: center;
}

#services .symbol-element.receives-formal.execution-circle-2 {
    border-style: none;
    width: 70%;
    height: 70%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#services .symbol-element.receives-formal.execution-circle-2.execution-circle.has-animation.end {
    transform: translate(-50%, -50%)rotate(-30.8deg);
}

#services .symbol-element.receives-formal.execution-circle-3 {
    border-style: none;
    width: 85%;
    height: 85%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#services .symbol-element.receives-formal.execution-circle-3.execution-circle {
    transform: translate(-50%, -49.65%);
}

#services .symbol-element.receives-formal.execution-circle-3.execution-circle.has-animation.end {
    transform: translate(-50%, -49.65%)rotate(11.62deg);
}

#services .symbol-element.receives-formal.execution-circle-4 {
    border-style: none;
    width: 100%;
    height: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#services .symbol-element.receives-formal.execution-circle-4.execution-circle.has-animation.end {
    transform: translate(-50%, -50%)rotate(35.45deg);
}

/* #services .symbol-element.receives-formal.execution-circle{filter:invert(86%) sepia(1%) saturate(238%) hue-rotate(201deg) brightness(114%) contrast(89%);} */
#services .design-symbol,
#services .execution-symbol {
    width: 13.25vw;
    height: 13.25vw;
    position: relative;
    right: 2.065vw;
}

#services .installation-symbol {
    width: 15.25vw;
    height: 14.25vw;
    position: relative;
    right: 1.065vw;
}

#services .mobiledesignbutton {
    color: #ededef;
    letter-spacing: .019vw;
    font-family: Mont, sans-serif;
    font-size: .93vw;
    line-height: 1.5;
}

#services .mobiledesignbutton.receives-formal {
    text-align: center;
    white-space: nowrap;
}

#services .mobiledesignbutton.planning-button.receives-formal {
    position: absolute;
    bottom: 1.79vw;
    right: 8.4vw;
    transform: translate(50%);
}

.receives-formal {
    transition-property: filter, color, background-color, width, height, transform, border-color, top, left, bottom, opacity, font-size, -webkit-text-stroke-color;
    transition-duration: 2s;
    transition-timing-function: cubic-bezier(0.13, 0.37, 0.06, 0.99);
}

/* Service media queries */
@media screen and (max-width: 991px) {
    #services .h2 {
        font-size: 12.59vw;
    }

    #services .h2.services-first-line.receives-formal,
    .customHeading {
        text-align: left;
        letter-spacing: .2518vw;
        font-size: 42px;
    }

    #services .h2.services-second-line.receives-formal.outline {
        text-align: left;
        width: 96.5vw;
        height: 29.37vw;
        padding-left: 3.5vw;
        font-size: 12.59vw;
        top: 0;
    }

    #services .h2.receives-formal {
        position: relative;
    }

    #services .button-text-4,
    #services .button-text-4.receives-formal {
        font-size: 3.26vw;
    }

    #services .button-text-4.planning-button.receives-formal {
        display: none;
    }

    #services .p-big.service-number {
        font-size: 4.2vw;
        display: block;
    }

    #services .p-small {
        font-size: 3.26vw;
    }

    #services .p-small.services-text {
        width: 63.28vw;
    }

    #services .button {
        padding: 1.17vw 4.66vw;
    }

    #services .button.services-contact-button.receives-formal {
        width: 47.08vw;
    }

    #services .outline.receives-formal {
        flex-flow: row;
        width: 31vw;
        font-size: 12.6vw;
        line-height: 1.17;
        display: inline-flex;
    }

    /* #services.services{margin-top:21vw;} */
    #services .services-heading.receives-formal {
        z-index: 4;
        position: relative;
    }

    #services .service-section.first.receives-formal {
        margin-top: 0vw;
        padding-top: 6vw;
        top: 0;
    }

    #services .service-section.second.receives-formal {
        top: 22.2vw;
    }

    #services .service-section.third.receives-formal {
        top: 39.4vw;
    }

    #services .service-section.fourth.receives-formal {
        top: 56.6vw;
    }

    #services .service-title.receives-formal {
        font-size: 7.46vw;
    }

    #services .service-details {
        padding-left: 0;
    }

    #services .planning-symbol {
        width: 27.74vw;
        height: 27.74vw;
    }

    #services .symbol-element.receives-formal {
        border-width: 1px;
    }

    .symbol-element.receives-formal.planning-symbol-horizontal-line.has-animation {
        height: .1vw;
    }

    #services .symbol-element.receives-formal.planning-symbol-vertical-line.has-animation {
        width: .1vw;
    }

    #services .symbol-element.receives-formal.planning-symbol-outer-circle {
        width: 21vw;
        height: 21vw;
    }

    #services .symbol-element.receives-formal.design-symbol-inner-circle-1.has-animation {
        width: 17.95vw;
        height: 17.95vw;
    }

    #services .symbol-element.receives-formal.planning-symbol-diamond.has-animation {
        width: 14.85vw;
        height: 14.85vw;
    }

    #services .symbol-element.receives-formal.design-symbol-outer-circle {
        width: 22.38vw;
        height: 22.38vw;
    }

    #services .symbol-element.receives-formal.planning-symbol-inner-circle {
        width: 14.7vw;
        height: 14.7vw;
    }

    #services .symbol-element.receives-formal.design-symbol-inner-circle-2.has-animation,
    #services .symbol-element.receives-formal.design-symbol-inner-circle-3.has-animation,
    #services .symbol-element.receives-formal.design-symbol-inner-circle-4.has-animation,
    #services .symbol-element.receives-formal.design-symbol-inner-circle-5.has-animation,
    #services .symbol-element.receives-formal.design-symbol-inner-circle-6.has-animation {
        width: 17.95vw;
        height: 17.95vw;
    }

    #services .design-symbol {
        width: 22.38vw;
        height: 22.38vw;
        right: 2.68vw;
    }

    #services .execution-symbol {
        width: 22vw;
        height: 25vw;
        right: 2vw;
    }

    #services .mobiledesignbutton,
    #services .mobiledesignbutton.receives-formal {
        font-size: 3.26vw;
    }

    #services .mobiledesignbutton.planning-button.receives-formal {
        display: block;
    }
}

@media screen and (max-width: 767px) {
    #services .button {
        padding-top: 2vw;
        padding-bottom: 2vw;
    }

    #services .installation-symbol {
        width: 27.25vw;
        height: 27.25vw;
        right: -5px;
    }
}

/* Global styles for animations that should apply to #services */
#services .receives-formal,
.customHeading {
    transition-property: filter, color, background-color, width, height, transform, border-color, top, left, bottom, opacity, font-size, -webkit-text-stroke-color;
    transition-duration: 2s;
    transition-timing-function: cubic-bezier(0.13, 0.37, 0.06, 0.99);
}

#services .button:hover {
    background-color: var(--3white);
}

#services .button:hover>div {
    color: var(--3black);
}

#services .button {
    transition: background-color 0.3s;
}

#services .button>div {
    transition: color 0.3s;
}

/* Mission, Vision & Core Values Section */
.mission-vision-section {
    background-color: #f4f1e8;
    padding: 80px 0;
    position: relative;
}

.mission-vision-section h2 {
    font-family: "Times New Roman", serif;
    font-size: 48px;
    font-weight: 400;
    color: #222;
    margin-bottom: 60px;
    letter-spacing: 0.5px;
}

.mission-box {
    position: relative;
    height: 400px;
    overflow: hidden;
    border-radius: 0;
}

.mission-box img {
    object-fit: contain;
    transition: transform 0.5s ease;
}

.mission-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 30px;
    background: rgba(0, 0, 0, 0.4);
    color: white;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.mission-content h3 {
    font-family: "Times New Roman", serif;
    font-size: 42px;
    font-weight: 400;
    margin-bottom: 20px;
}

.mission-content p {
    font-size: 18px;
    line-height: 1.6;
    max-width: 80%;
}

.core-values {
    margin-top: 80px;
}

.value-box {
    padding: 20px;
    height: 100%;
}

.value-icon {
    width: 80px;
    height: 80px;
    margin: 0 0 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.value-icon img {
    max-width: 100%;
    max-height: 100%;
}

.value-box h4 {
    font-family: "Times New Roman", serif;
    font-size: 24px;
    font-weight: 400;
    margin-bottom: 15px;
    color: #fff;
}

.value-box p {
    font-size: 16px;
    line-height: 1.5;
    color: #999;
}

@media (max-width: 991px) {
    .mission-vision-section h2 {
        font-size: 36px;
    }

    .mission-content h3 {
        font-size: 32px;
    }

    .mission-content p {
        font-size: 16px;
        max-width: 90%;
    }

    .value-box {
        margin-bottom: 30px;
    }
}

@media (max-width: 767px) {
    .mission-vision-section {
        padding: 50px 0;
    }

    .mission-vision-section h2 {
        font-size: 30px;
        margin-bottom: 40px;
    }

    .mission-box {
        height: 300px;
        margin-bottom: 20px;
    }

    .mission-content h3 {
        font-size: 28px;
    }

    .mission-content p {
        font-size: 14px;
        max-width: 95%;
    }

    .value-icon {
        width: 100%;
        height: 60px;
    }

    .value-box h4 {
        font-size: 20px;
        color: #9F7E39 !important;
    }

    .value-box p {
        font-size: 14px;
    }
}

/* Animations for Mission, Vision & Core Values */
.mission-box {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.mission-box.animate-in {
    opacity: 1;
    transform: translateY(0);
}

.mission-box:hover img {
    transform: scale(1.05);
}

.value-box {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.value-box.animate-in {
    opacity: 1;
    transform: translateY(0);
}

/* Add CSS for the Sectors We Specialize In section */
.sectors-we-specialize-in {
    padding: 80px 0;
    background-color: #fff;
}

.section-title {
    font-size: 6.23vw;
    font-weight: 700;
    margin-bottom: 50px;
}

.view-all-container {
    display: flex;
    align-items: center;
    /* margin-bottom: 30px; */
}

.view-all {
    font-size: 1.2rem;
    font-weight: 600;
    text-transform: uppercase;
    margin-right: 15px;
}

.view-all:hover i.fa-chevron-right {
    transform: translateX(5px);
}

.view-all:hover i.fa-chevron-left {
    transform: translateX(-5px);
}

.view-all i {
    transition: .5s;
}

.view-all-link {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    background-color: #f0f0f0;
    border-radius: 50%;
    transition: all 0.3s ease;
}

.view-all-link:hover {
    background-color: #000;
}

.view-all-link:hover svg {
    color: #fff;
}

.service-box {
    border-radius: 10px;
    transition: all 0.3s ease;
    border: 1px solid #444;
}

.service-box:hover {
    background-color: #222 !important;
}

.service-box-title {
    font-size: 2.2rem;
    font-weight: 700;
}

.service-description {
    font-size: 1.1rem;
    line-height: 1.6;
    color: #ccc;
}

.category-item {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

.talk-to-us-link {
    display: flex;
    align-items: center;
    color: #000;
    text-decoration: none;
    transition: all 0.3s ease;
    background: #dfdfdf;
    padding: 10px;
    border-radius: 33px;
}

.talk-to-us {
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
}

.talk-to-us-link svg {
    transition: transform 0.3s ease;
}

.talk-to-us-link:hover {
    color: #fff;
    background: #777;
}

.talk-to-us-link:hover svg {
    transform: translateX(5px);
}

.bg-black {
    background-color: #000 !important;
}

/* Logo Box Styling */
.logo-box {
    background-color: #000;
    border: 1px solid #333;
    border-radius: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    aspect-ratio: 1/1;
    height: 100%;
    max-height: 400px;
    position: relative;
    overflow: hidden;
    padding: 20px;
}

.logo-box-img {
    max-width: 70%;
    max-height: 70%;
    display: block;
    margin: 0 auto;
    filter: brightness(0) invert(1);
    opacity: 0.8;
}

.logo-box:hover {
    background-color: #111;
}

.logo-text {
    font-size: 6rem;
    font-weight: 500;
    color: transparent;
    z-index: 2;
    font-family: 'Gothic A1', sans-serif;
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.7);
    letter-spacing: 0.1em;
    text-transform: lowercase;
}

.logo-grid-lines {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        linear-gradient(to right, rgba(255, 255, 255, 0.1) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
    background-size:
        calc(100% / 6) 100%,
        100% calc(100% / 6);
    z-index: 1;
}

.logo-box::before,
.logo-box::after {
    content: '';
    position: absolute;
    width: 15px;
    height: 15px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    z-index: 3;
}

.logo-box::before {
    top: 10px;
    left: 10px;
    border-right: none;
    border-bottom: none;
}

.logo-box::after {
    bottom: 10px;
    right: 10px;
    border-left: none;
    border-top: none;
}

.logo-img {
    max-width: 70%;
    max-height: 70%;
    z-index: 2;
    /* filter: brightness(0) invert(1); Makes the logo white */
    opacity: 0.9;
}


/* Info icon and tooltip styles */
.info-icon {
    display: inline-block;
    margin-left: 8px;
    position: relative;
    cursor: pointer;
}

.service-item .info-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 5px;
}

.info-icon i {
    color: #777;
    font-size: 16px;
    transition: color 0.3s ease;
}

.info-icon:hover i {
    color: #000;
}

.tooltip-content {
    display: none;
    position: absolute;
    background-color: #000000;
    color: #ffffff;
    padding: 15px;
    border-radius: 5px;
    width: 250px;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 10px;
    z-index: 100;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.tooltip-content:before {
    content: '';
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 0 10px 10px 10px;
    border-style: solid;
    border-color: transparent transparent #000000 transparent;
}

.info-icon:hover .tooltip-content,
.tooltip-content.active {
    display: block;
    opacity: 1;
}

.tooltip-content p {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
}

/* Ensure service titles have proper positioning for the icons */
.service-title {
    position: relative;
    display: flex;
    align-items: center;
}

/* Container for info icons */
.service-title .info-icon {
    margin-left: 15px;
}

/* Make sure the tooltip stays within the service section */
.service-section {
    position: relative;
}

/* Adjust info icons container to appear in a row after the title */
.service-title {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
}

/* Ensure the icons are properly spaced */
.service-title .info-icon+.info-icon {
    margin-left: 10px;
}

/* Service item styles */
.service-item {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    position: relative;
}

/* Info icon and tooltip styles */
.info-icon {
    display: inline-block;
    position: relative;
    cursor: pointer;
}


.service-item .tooltip-content {
    left: 50%;
    transform: translateX(-50%);
}

.tooltip-content:before {
    content: '';
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 0 10px 10px 10px;
    border-style: solid;
    border-color: transparent transparent #000000 transparent;
}

.info-icon:hover .tooltip-content,
.tooltip-content.active {
    display: block;
    opacity: 1;
}

.tooltip-content p {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
}

/* Ensure service titles have proper positioning for the icons */
.service-title {
    position: relative;
    display: flex;
    align-items: center;
}

/* Container for info icons */
.service-title .info-icon {
    margin-left: 15px;
}

/* Make sure the tooltip stays within the service section */
.service-section {
    position: relative;
}

/* Adjust info icons container to appear in a row after the title */
.service-title {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
}

/* Ensure the icons are properly spaced */
.service-title .info-icon+.info-icon {
    margin-left: 10px;
}

/* Search Overlay */
.search-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.95);
    z-index: 9999;
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.search-overlay.active {
    display: flex;
    opacity: 1;
}

.search-container {
    width: 80%;
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    height: 100%;
    padding-top: 100px;
}

.search-header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}

.search-header h2 {
    font-family: 'Gothic A1', sans-serif;
    font-size: 2.5rem;
    font-weight: 600;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.search-close {
    background: none;
    border: none;
    color: #fff;
    font-size: 2.5rem;
    cursor: pointer;
    padding: 0;
    transition: color 0.3s ease;
}

.search-close:hover {
    color: #ccc;
}

.search-form {
    width: 100%;
    display: flex;
    margin-bottom: 40px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    padding-bottom: 10px;
}

.search-form input {
    flex-grow: 1;
    background: transparent;
    border: none;
    color: #fff;
    font-size: 1.5rem;
    padding: 10px 0;
    font-family: 'Gothic A1', sans-serif;
}

.search-form input:focus {
    outline: none;
}

.search-form input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.search-button {
    background: transparent;
    border: none;
    color: #fff;
    font-size: 1.5rem;
    cursor: pointer;
    transition: color 0.3s ease;
}

.search-button:hover {
    color: #ccc;
}

.search-results {
    width: 100%;
    overflow-y: auto;
    max-height: 60vh;
}

.search-result-item {
    padding: 15px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.search-result-item:last-child {
    border-bottom: none;
}

.search-result-item h3 {
    margin: 0 0 10px 0;
    font-size: 1.2rem;
    font-weight: 500;
}

.search-result-item a {
    color: #fff;
    text-decoration: none;
    transition: color 0.3s ease;
}

.search-result-item a:hover {
    color: #ccc;
}

.search-result-item p {
    margin: 0;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
}

@media (max-width: 767px) {
    .search-container {
        width: 90%;
        padding-top: 80px;
    }

    .search-header h2 {
        font-size: 2rem;
    }

    .search-form input {
        font-size: 1.2rem;
    }
}

/* Set owl carousel image height */
.owl-carousel .project-card img {
    height: 482px !important;
    object-fit: cover;
    width: 100%;
}

@media (max-width: 767px) {
    .owl-carousel .project-card img {
        height: 300px;
    }
}

/* Service Slider Styles */
.service-slider {
    position: relative;
    overflow: hidden;
}

.service-slider .owl-item {
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    /* Removed display and visibility properties here */
}

.service-slider .owl-item.active {
    opacity: 1;
    /* Removed display and visibility properties here */
}

.service-slider .service-slide {
    padding: 20px;
}

/* The following rules are no longer needed as Owl Carousel manages them */
.service-slider .owl-stage-outer {
    /* Owl Carousel manages this */
}

.service-slider .owl-stage {
    /* Owl Carousel manages this */
}

.service-slider .owl-item {
    /* Owl Carousel manages this */
}

.menu-open .mobile-menu-icons2 {
    display: none !important;
}

/* Service Slider Styles */
.service-slider .owl-dots {
    text-align: center;
    margin-top: 20px;
}

.service-slider .owl-dot {
    display: inline-block;
    margin: 0 5px;
}

.service-slider .owl-dot span {
    width: 10px;
    height: 10px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    display: block;
    transition: all 0.3s ease;
}

.service-slider .owl-dot.active span {
    background: #fff;
    transform: scale(1.2);
}

/* RTL specific styles for service slider */
html[dir="rtl"] .service-slider .owl-dots {
    direction: rtl;
}

/* Slide animations for service slider */
.service-slider .owl-item {
    position: relative;
    overflow: hidden;
}

/* LTR Slide Animations */
html[dir="ltr"] .service-slider .slideInLeft {
    animation: slideInLeft 1s forwards;
}

html[dir="ltr"] .service-slider .slideOutRight {
    animation: slideOutRight 1s forwards;
}

/* RTL Slide Animations */
html[dir="rtl"] .service-slider .slideInRight {
    animation: slideInRight 1s forwards;
}

html[dir="rtl"] .service-slider .slideOutLeft {
    animation: slideOutLeft 1s forwards;
}

/* Animation Keyframes */
@keyframes slideInLeft {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }

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

@keyframes slideOutRight {
    from {
        transform: translateX(0);
        opacity: 1;
    }

    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }

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

@keyframes slideOutLeft {
    from {
        transform: translateX(0);
        opacity: 1;
    }

    to {
        transform: translateX(-100%);
        opacity: 0;
    }
}
















.symbol-element.receives-formal.design-symbol-inner-circle-1 {
    border-radius: 50%;
    width: 10.6vw;
    height: 10.6vw;
    top: 50%;
    left: 40%;
    transform: translate(-50%, -50%);
}

.symbol-element.receives-formal.design-symbol-inner-circle-1.has-animation.end {
    left: 60%;
}

.symbol-element.receives-formal.planning-symbol-diamond {
    width: 9.38vw;
    height: 9.38vw;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)rotate(135deg);
}

.symbol-element.receives-formal.planning-symbol-diamond.has-animation.end {
    transform: translate(-50%, -50%)rotate(45deg);
}

.symbol-element.receives-formal.design-symbol-outer-circle {
    border-radius: 50%;
    width: 13.25vw;
    height: 13.25vw;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.symbol-element.receives-formal.planning-symbol-inner-circle {
    border-radius: 50%;
    width: 9.28vw;
    height: 9.28vw;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.symbol-element.receives-formal.design-symbol-inner-circle-2 {
    border-radius: 50%;
    width: 10.6vw;
    height: 10.6vw;
    top: 50%;
    left: 44%;
    transform: translate(-50%, -50%);
}

.symbol-element.receives-formal.design-symbol-inner-circle-2.has-animation.end {
    left: 56%;
}

.symbol-element.receives-formal.design-symbol-inner-circle-3 {
    border-radius: 50%;
    width: 10.6vw;
    height: 10.6vw;
    top: 50%;
    left: 48%;
    transform: translate(-50%, -50%);
}

.symbol-element.receives-formal.design-symbol-inner-circle-3.has-animation.end {
    left: 52%;
}

.symbol-element.receives-formal.design-symbol-inner-circle-4 {
    border-radius: 50%;
    width: 10.6vw;
    height: 10.6vw;
    top: 50%;
    left: 52%;
    transform: translate(-50%, -50%);
}

.symbol-element.receives-formal.design-symbol-inner-circle-4.has-animation.end {
    left: 48%;
}

.symbol-element.receives-formal.design-symbol-inner-circle-5 {
    border-radius: 50%;
    width: 10.6vw;
    height: 10.6vw;
    top: 50%;
    left: 56%;
    transform: translate(-50%, -50%);
}

.symbol-element.receives-formal.design-symbol-inner-circle-5.has-animation.end {
    left: 44%;
}

.symbol-element.receives-formal.design-symbol-inner-circle-6 {
    border-radius: 50%;
    width: 10.6vw;
    height: 10.6vw;
    top: 50%;
    left: 60%;
    transform: translate(-50%, -50%);
}

.symbol-element.receives-formal.design-symbol-inner-circle-6.has-animation.end {
    left: 40%;
}


@media screen and (max-width: 991px) {

    .symbol-element.receives-formal.design-symbol-inner-circle-1.has-animation {
        width: 17.95vw;
        height: 17.95vw;
    }

    .symbol-element.receives-formal.planning-symbol-diamond.has-animation {
        width: 14.85vw;
        height: 14.85vw;
    }

    .symbol-element.receives-formal.design-symbol-outer-circle {
        width: 22.38vw;
        height: 22.38vw;
    }

    .symbol-element.receives-formal.planning-symbol-inner-circle {
        width: 14.7vw;
        height: 14.7vw;
    }

    .symbol-element.receives-formal.design-symbol-inner-circle-2.has-animation,
    .symbol-element.receives-formal.design-symbol-inner-circle-3.has-animation,
    .symbol-element.receives-formal.design-symbol-inner-circle-4.has-animation,
    .symbol-element.receives-formal.design-symbol-inner-circle-5.has-animation,
    .symbol-element.receives-formal.design-symbol-inner-circle-6.has-animation {
        width: 17.95vw;
        height: 17.95vw;
    }

    .design-symbol {
        width: 22.38vw;
        height: 22.38vw;
        right: 2.68vw;
    }
}

@media (max-width: 600px) {
    .lg-close {
        font-size: 32px !important;
        top: 10px !important;
        right: 10px !important;
        width: 44px !important;
        height: 44px !important;
    }
}

.parallax-item {
    position: relative;
    overflow: hidden;
    /* display: flex; */
    /* align-items: center; */
    /* justify-content: center; */
    font-weight: bold;
    width: 100%;
    min-height: 100vh;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.parallax-item h2 {
    font-size: 3rem;
    text-transform: uppercase;
    background-color: whitesmoke;
    padding: 1rem;
    border-radius: 1rem;
    position: relative;
    z-index: 1;
}

.parallaxBg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* slightly larger for smoothness */
    object-fit: cover;
    z-index: 0;
    will-change: transform;
}

.parallax-item:first-child {
    /* background: url("../img/2.jpg");
    background-size: cover; */
}

.parallax-item:nth-child(2) {
    /* background: url("../img/3.jpg");
    background-size: cover; */
}

.parallax-item:nth-child(3) {
    /* background: url("../img/4.jpg");
    background-size: cover; */
}

@media screen and (max-width: 768px) {
    .parallax-item h2 {
        font-size: 1.5rem;
    }

    .masked-text {
        font-size: 12.59vw !important;
    }

    .subimages {
        width: 100%;
        height: 240px !important;
        object-fit: cover;
    }
}

@media only screen and (max-width: 600px) {
    .mainBanner h1 {
        font-size: 35px !important;
    }
}

.breadcrumb-item::before {
    color: #999 !important;
}

.breadcrumb-item::before {
    float: left;
    padding-right: var(--bs-breadcrumb-item-padding-x);
    color: var(--bs-breadcrumb-divider-color);
    content: var(--bs-breadcrumb-divider, "/");
}

.breadcrumb-item {
    padding-left: var(--bs-breadcrumb-item-padding-x);
}

body[class="arabic"] .breadcrumb-item:last-child::before {
    content: '' !important;
}

body[class="english"] .breadcrumb-item:first-child::before {
    content: '' !important;
}

.lg-outer,
.lg,
.lg-inner,
.lg-toolbar,
.lg-thumb-outer,
.lg-thumb {
    direction: ltr !important;
    text-align: left !important;
}


.masked-text {
    font-size: 5.5rem;
    font-weight: bold;
    color: transparent;
    background-image: url('../img/back1.jfif');
    background-size: 200%;
    /* Enlarged for smooth animation */
    background-position: 0 50%;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: animate-background 5s infinite alternate linear;
    text-align: center;
}

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

    100% {
        background-position: 100% 50%;
    }
}

.centered {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.mainBanner {
    position: relative;
    text-align: center;
}

.mainBanner img {
    max-width: 100%;
    height: auto;
}

.mainBanner h1 {
    position: absolute;
    font-size: 66px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-transform: uppercase;
    color: white;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);
}

.subimages {
    width: 100%;
    height: 550px;
    object-fit: cover;
}

/* Timeline CSS */
.timeline {
    position: relative;
    margin: 60px auto;
    max-width: 1200px;
}

.timeline::before {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 100%;
    background: #e0e6ed;
    border-radius: 2px;
    z-index: 0;
}

.timeline-progress {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 0%;
    background: linear-gradient(180deg, #555 0%, #000 100%);
    border-radius: 2px;
    z-index: 0;
    transition: height 0.3s ease-out;
}

.timeline-item {
    position: relative;
    margin: 0;
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.6s ease-out;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.timeline-item.animate {
    opacity: 1;
    transform: translateY(0);
}

.timeline-number {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 50px;
    background: #fff;
    border: 4px solid #e0e6ed;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: bold;
    color: #666;
    z-index: 3;
    transition: all 0.4s ease-out;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.timeline-item.active .timeline-number {
    background: linear-gradient(135deg, #555 0%, #000 100%);
    border-color: #000;
    color: white;
    transform: translateX(-50%) scale(1.1);
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
}

.timeline-content {
    padding: 30px;
    border-radius: 15px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    position: relative;
    width: 45%;
    transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
}


.timeline-content h3 {
    font-size: 1.8rem;
    font-weight: 600;
    margin-bottom: 15px;
    color: #2d3748;
    line-height: 1.4;
}

.timeline-content p {
    font-size: 1.1rem;
    line-height: 1.7;
    color: #4a5568;
}

.timeline-image {
    width: 45%;
    height: 350px;
    object-fit: contain;
    border-radius: 15px;
    transition: transform 0.3s ease-out;
}

.timeline-image:hover {
    transform: translateY(-5px);
}

/* Item 1: Text left, Image right */
.timeline-item:nth-child(1) .timeline-content {
    order: 1;
    text-align: right;
}

.timeline-item:nth-child(1) .timeline-image {
    order: 2;
}

/* Item 2: Image left, Text right */
.timeline-item:nth-child(2) .timeline-image {
    order: 1;
}

.timeline-item:nth-child(2) .timeline-content {
    order: 2;
    text-align: left;
}

/* Item 3: Text left, Image right */
.timeline-item:nth-child(3) .timeline-content {
    order: 1;
    text-align: right;
}

.timeline-item:nth-child(3) .timeline-image {
    order: 2;
}

/* Item 4: Image left, Text right */
.timeline-item:nth-child(4) .timeline-image {
    order: 1;
}

.timeline-item:nth-child(4) .timeline-content {
    order: 2;
    text-align: left;
}

/* Item 5: Text left, Image right */
.timeline-item:nth-child(5) .timeline-content {
    order: 1;
    text-align: right;
}

.timeline-item:nth-child(5) .timeline-image {
    order: 2;
}


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




/* font style 1 */
@import url('https://fonts.googleapis.com/css2?family=Heebo:wght@400;600&family=Poppins:wght@100;500;600;800;900&family=Lobster+Two:ital,wght@0,400;0,700;1,400&display=swap');
/* -------- TYPE SELECTORS --------- */

/* -------- CLASS --------- */

.main-title {
    display: flex;
    justify-content: center;
    align-items: center;
}

.main-title .box {
    transform-style: preserve-3d;
    animation: animate 7s ease-in-out infinite alternate;
}

.main-title .box span {
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.5) 90%, transparent);
    text-transform: uppercase;
    line-height: 0.76em;
    position: absolute;
    color: #fff;
    font-size: 3.5em;
    white-space: nowrap;
    font-weight: bold;
    padding: 0px 10px;
    transform-style: preserve-3d;
    text-shadow: 0 10px 15px rgba(0, 0, 0, 0.3);
    transform: translate(-50%, -50%) rotateX(calc(var(--i) * 22.5deg)) translateZ(109px);
}

.main-title .box span i {
    font-style: initial;
}

.main-title .box span i:nth-child(1) {
    color: #5c5fc4;
}

.main-title .box span i:nth-child(2) {
    color: #c4c15c;
}

@keyframes animate {
    0% {
        transform: perspective(500px) rotateX(0deg) rotate(5deg);
    }

    100% {
        transform: perspective(50px) rotateX(360deg) rotate(5deg);
    }
}


/* font style 2 */
.neon-text {
    font-size: 6.23vw;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 0 5px #9C7F3B, 0 0 10px #9C7F3B, 0 0 20px #9C7F3B, 0 0 40px #9C7F3B, 0 0 80px #9C7F3B;
    animation: glow 1.5s infinite alternate;
    margin-bottom: 20px;
    margin-top: 20px;
}

@keyframes glow {
    0% {
        text-shadow: 0 0 5px #9C7F3B, 0 0 10px #9C7F3B, 0 0 20px #9C7F3B, 0 0 40px #9C7F3B, 0 0 80px #9C7F3B;
    }

    100% {
        text-shadow: 0 0 10px #b9850b, 0 0 20px #b9850b, 0 0 40px #b9850b, 0 0 80px #b9850b, 0 0 160px #b9850b;
    }
}

@media (max-width: 991px) {
    .neon-text {
        font-size: 12.59vw !important;
    }
}

/* font style 3 */

.style3 {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #e4bb68;
}

.style3 .string {
    display: flex;
    flex-direction: column;
    text-align: center;
    animation: move 4s infinite;
}

.greeting {
    position: relative;
    top: 8.6vmin;
    animation: white-out 5s infinite;
}

.closure::after {
    content: '';
    position: absolute;
    height: 25vmin;
    width: 40vmin;
    transform: translate(-35vmin, -23.5vmin);
    background: #fff;
}

.closure::before {
    content: '';
    position: absolute;
    height: 23vmin;
    width: 40vmin;
    transform: translate(-29vmin, 7vmin);
    background: #fff;
}

.en {
    color: #fa8231;
}

.es {
    color: #000;
}

.de {
    color: #c678dd;
}

.it {
    color: orange;
}

@keyframes move {
    25% {
        transform: translatey(-5.8vmin);
        opacity: 1;
    }

    50% {
        transform: translatey(-11vmin);
    }

    75% {
        transform: translatey(-16.5vmin);
    }
}

.service-slider-nav {
    position: relative;
}

.service-slider-nav .owl-dots {
    display: flex;
    gap: 8px;
    margin: 0;
    position: static;
}

@media (min-width: 576px) {
    .service-slider-nav {
        justify-content: flex-start;
    }

    .service-slider-nav .owl-dots {
        margin-left: 24px;
        align-items: center;
    }
}

.owl-dots button {
    border-radius: 100px;
}

.owl-dot span {
    width: 12px;
    height: 12px;
    background: #fff;
    border-radius: 50%;
    display: block;
    opacity: 0.5;
    transition: opacity 0.3s;
}

.owl-dot.active span {
    opacity: 1;
    background: #b1934f;
}

.owl-carousel .owl-item {
    transition: opacity 0.5s;
}

.owl-carousel .owl-animated-out {
    opacity: 0;
}

.owl-carousel .owl-animated-in {
    opacity: 1;
}

@media (min-width: 992px) {
    .navbar-center-logo {
        flex: 0 0 auto;
        text-align: center;
        position: relative;
        z-index: 2;
    }

    .navbar-center-logo img {
        height: 45px;
        display: block;
        margin: 0 auto;
    }

    .right-menu-list {
        flex-direction: row !important;
    }
}





.custom-timeline {
    position: relative;
    width: 100%;
    padding-left: 30px;
    border-left: 4px solid #e0e6ed;
    margin-left: 10px;
}

.custom-timeline .timeline-step {
    position: relative;
    margin-bottom: 40px;
}

.custom-timeline .dot {
    position: absolute;
    left: -48px;
    top: 6px;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    font-size: 20px;
    text-align: center;
    font-weight: bold;
    line-height: 35px;
    background: linear-gradient(135deg, #000000 0%, #000 100%);
    border-color: #000;
    color: white;
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
    z-index: 1;
}

.custom-timeline .content h3 {
    font-size: 1.8rem;
    font-weight: 600;
    margin-bottom: 15px;
    color: #2d3748;
    line-height: 1.4;
}

.custom-timeline .content p {
    font-size: 1rem;
    line-height: 1.7;
    color: #4a5568;
}

.cusomtimeline-image {
    width: 24%;
    height: 300px;
    border-radius: 15px;
}

@media only screen and (max-width: 600px) {
    .cusomtimeline-image {
        width: 90% !important;
    }

    #services .services-heading {
        background-color: #fff;
        padding-top: 5.84vw;
        padding-bottom: 5.84vw;
    }

    .masked-text {
        text-align: left;
        padding-left: 10px;
    }

    .animText {
        width: 290px !important;
        height: 200px !important;
        object-fit: contain;
    }

    .animSectorText {
        width: 290px !important;
        height: 200px !important;
        object-fit: contain;
    }

    #services .service-section {
        margin-left: 2.56vw;
        margin-right: 2.56vw;
    }

    .animSectorText1 {
        width: 350px;
        height: 300px;
        object-fit: contain;
        display: block;
    }

    .visionPhoto {
        width: 90% !important;
    }
}

.animText {
    width: 410px;
    height: 300px;
    object-fit: contain;
    display: block;
}

.animSectorText {
    width: 410px;
    height: 300px;
    object-fit: contain;
    display: block;
}

.animSectorText1 {
    width: 580px;
    height: 300px;
    object-fit: contain;
    display: block;
}

.custom-timeline {
    position: relative;
}

.custom-timeline .timeline-progress {
    position: absolute;
    left: -1.5px;
    /* Adjust to center over the border */
    top: 0;
    width: 4px;
    height: 0;
    background: linear-gradient(135deg, #000000 0%, #000000 100%);
    border-radius: 2px;
    z-index: 1;
    transition: height 0.3s cubic-bezier(.4, 2, .6, 1);
    pointer-events: none;
}