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

html, body {
    overflow-x: hidden;
    max-width: 100%;
    position: relative;
}

/* Arabic Montserrat Fonts */
@font-face {
    font-family: 'Montserrat-Arabic';
    src: url('../fonts/ar/Montserrat-Arabic Regular 400.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'Montserrat-Arabic';
    src: url('../fonts/ar/Montserrat-Arabic Thin 250.otf') format('opentype');
    font-weight: 250;
    font-style: normal;
}
@font-face {
    font-family: 'Montserrat-Arabic';
    src: url('../fonts/ar/Montserrat-Arabic ExtraLight 275.otf') format('opentype');
    font-weight: 275;
    font-style: normal;
}
@font-face {
    font-family: 'Montserrat-Arabic';
    src: url('../fonts/ar/Montserrat-Arabic Light 300.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
}
@font-face {
    font-family: 'Montserrat-Arabic';
    src: url('../fonts/ar/Montserrat-Arabic Medium 500.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: 'Montserrat-Arabic';
    src: url('../fonts/ar/Montserrat-Arabic SemiBold 600.otf') format('opentype');
    font-weight: 600;
    font-style: normal;
}
@font-face {
    font-family: 'Montserrat-Arabic';
    src: url('../fonts/ar/Montserrat-Arabic Bold 700.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: 'Montserrat-Arabic';
    src: url('../fonts/ar/Montserrat-Arabic ExtraBold 800.otf') format('opentype');
    font-weight: 800;
    font-style: normal;
}
@font-face {
    font-family: 'Montserrat-Arabic';
    src: url('../fonts/ar/Montserrat-Arabic Black 900.otf') format('opentype');
    font-weight: 900;
    font-style: normal;
}

/* English Montserrat Fonts */
@font-face {
    font-family: 'Montserrat-English';
    src: url('../fonts/en/Montserrat-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'Montserrat-English';
    src: url('../fonts/en/Montserrat-Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
}
@font-face {
    font-family: 'Montserrat-English';
    src: url('../fonts/en/Montserrat-ExtraLight.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
}
@font-face {
    font-family: 'Montserrat-English';
    src: url('../fonts/en/Montserrat-ExtraLightItalic.ttf') format('truetype');
    font-weight: 200;
    font-style: italic;
}
@font-face {
    font-family: 'Montserrat-English';
    src: url('../fonts/en/Montserrat-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}
@font-face {
    font-family: 'Montserrat-English';
    src: url('../fonts/en/Montserrat-LightItalic.ttf') format('truetype');
    font-weight: 300;
    font-style: italic;
}
@font-face {
    font-family: 'Montserrat-English';
    src: url('../fonts/en/Montserrat-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: 'Montserrat-English';
    src: url('../fonts/en/Montserrat-MediumItalic.ttf') format('truetype');
    font-weight: 500;
    font-style: italic;
}
@font-face {
    font-family: 'Montserrat-English';
    src: url('../fonts/en/Montserrat-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}
@font-face {
    font-family: 'Montserrat-English';
    src: url('../fonts/en/Montserrat-SemiBoldItalic.ttf') format('truetype');
    font-weight: 600;
    font-style: italic;
}
@font-face {
    font-family: 'Montserrat-English';
    src: url('../fonts/en/Montserrat-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: 'Montserrat-English';
    src: url('../fonts/en/Montserrat-BoldItalic.ttf') format('truetype');
    font-weight: 700;
    font-style: italic;
}
@font-face {
    font-family: 'Montserrat-English';
    src: url('../fonts/en/Montserrat-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
}
@font-face {
    font-family: 'Montserrat-English';
    src: url('../fonts/en/Montserrat-ExtraBoldItalic.ttf') format('truetype');
    font-weight: 800;
    font-style: italic;
}
@font-face {
    font-family: 'Montserrat-English';
    src: url('../fonts/en/Montserrat-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
}
@font-face {
    font-family: 'Montserrat-English';
    src: url('../fonts/en/Montserrat-BlackItalic.ttf') format('truetype');
    font-weight: 900;
    font-style: italic;
}
@font-face {
    font-family: 'Montserrat-English';
    src: url('../fonts/en/Montserrat-ThinItalic.ttf') format('truetype');
    font-weight: 100;
    font-style: italic;
}

a {
    text-decoration: none;
}

/* Default English fonts */
html {
    font-family: 'Montserrat-English', "Montserrat", sans-serif !important;
    scroll-behavior: smooth;
    overflow-x: hidden;
    max-width: 100vw;
}

body {
    font-family: 'Montserrat-English', "Montserrat", sans-serif !important;
    background-color: #F7F7F7;
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;
}

* {
    font-family: 'Montserrat-English', "Montserrat", sans-serif !important;
}

/* Arabic fonts when lang is 'ar' */
html[lang="ar"] {
    font-family: 'Montserrat-Arabic', "Montserrat", sans-serif !important;
}

html[lang="ar"] body {
    font-family: 'Montserrat-Arabic', "Montserrat", sans-serif !important;
}

html[lang="ar"] * {
    font-family: 'Montserrat-Arabic', "Montserrat", sans-serif !important;
}

.main-container {
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
    position: relative;
}

/* Hero Section */
.hero-section {
    position: relative;
    width: 100%;
    max-width: 100vw;
    height: 100vh;
    background-image: url("images/banar.png");
    background-size: cover;
    background-position: center;
    transition: background-image 0.1s ease-in-out;
    overflow: hidden;
}

.banar-svg-right,
.banar-svg-left {
    pointer-events: none;
}

.banar-svg-right img,
.banar-svg-left img {
    max-width: 100%;
    height: auto;
}

:root {
    --primary-gradient: linear-gradient(270deg, #644E99 0%, #415AA3 40%, #3B6DAE 70.19%, #94C67C 100%);
    --neutral-black: #2E343B;
    --white: #FFFFFF;
}

/* Header يفضل ثابت */
.main-header {
    position: fixed;
    top: 30px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 40px);
    max-width: 1400px;
    z-index: 999999;
    padding: 10px 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 80px;
    border: 1px solid #E0E0E0;
    background: #ffffffff;
    backdrop-filter: blur(10px);
    box-shadow: 0 30px 30px rgba(0, 0, 0, 0.03),
        0 7px 16px rgba(0, 0, 0, 0.04);
    transition: all 0.3s linear;
}

.main-header.one {
    top: 60px;
    display: flex;
    flex-direction: row;
}

.main-header.scrolled {
    top: 0 !important;
    left: 0 !important;
    transform: none;
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 0;
    padding: 12px 40px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
    margin: 0 !important;
}

.main-header.scrolled .logo-container.one {
    width: 100px;
    top: 0;
    right: 20px;
}

/* English - scrolled logo on right */
html[lang="en"] .main-header.scrolled .logo-container.one {
    right: auto;
    left: 20px;
}

/* Mobile - smaller scrolled logo */
@media (max-width: 480px) {
    .main-header.scrolled .logo-container.one {
        width: 90px;
        right: 10px;
    }

    html[lang="en"] .main-header.scrolled .logo-container.one {
        left: 10px;
        right: auto;
    }
}

.tooltip {
    position: absolute;
    top: -3rem;
    left: 18%;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px) scale(0.95);
    transition: all 0.3s ease;
    z-index: 1000;
}

/* English - tooltip on right */
html[lang="en"] .tooltip {
    left: auto;
    right: 13em;
}


.tooltip.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.tooltip.show span {
    right: 7rem;
    bottom: 0.4rem;
    color: #fff;
}

html[lang="en"] .tooltip.show span {
    left: 6rem;
    bottom: 0.4rem;
    color: #fff;
}

/* Mobile - tooltip.show positioning */
@media (max-width: 480px) {
    .tooltip.show {
        right: 15% !important;
        top: 16rem !important;
        left: 0;
    }
    .tooltip.show svg {
        width: 300px;
    }
}

/* iPad - tooltip.show positioning */
@media (min-width: 481px) and (max-width: 768px) {
    .tooltip.show {
        right: 20% !important;
        top: 16rem !important;
        left: 0;
    }
}


.tooltip svg {
    position: absolute;
    inset: 0;
    /* يغطي الـ tooltip كله */
    z-index: -1;
    /* يطلع ورا الكلام */
    pointer-events: none;
    transform: scaleX(-1);
}

/* English - no flip for tooltip svg */
html[lang="en"] .tooltip svg {
    transform: scaleX(1);
}

.btn-tooltip,
.tooltip>span {
    position: relative;
    z-index: 1;
}

.btn-tooltip {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 2px 9px;
    width: 60px;
    height: 28px;
    background: #614F9C;
    border-radius: 16px;
    font-family: "Montserrat", sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 24px;
    display: flex;
    align-items: center;
    letter-spacing: 0.5px;
    color: #FFFFFF;
    /* Inside auto layout */
    flex: none;
    order: 0;
    flex-grow: 0;
    right: 20px;
    top: 20px;
}

html[lang="en"] .btn-tooltip {
    left: 20px;
}

@media (max-width: 768px) {
    .tooltip.show span {
        right: 9rem;
        bottom: 1rem;
    }

    .btn-tooltip {
        right: 10px;
        top: 5px;
    }

    .tooltip {
        padding: 12px 15px;
        font-size: 14px;
        top: -35px;
        left: 5%;
    }
}

@media (max-width: 480px) {
    .btn-tooltip {
        top: 25px;
        right: 0;
    }

    .tooltip.show span {
        right: 4rem;
        top: 0.2rem;
    }
    
    .tooltip {
        padding: 10px 12px;
        font-size: 12px;
        top: -30px;
        left: 2%;
        max-width: 200px;
    }
}

@media (max-width: 768px) {
    html[lang="en"] .tooltip.show {
        right: 15em !important;
        top: 16rem !important;
    }

    html[lang="en"] .tooltip.show span {
        left: 6rem;
        bottom: 1rem;
    }
}

@media (max-width: 480px) {
    html[lang="en"] .tooltip.show span {
        left: 5rem;
        top: -0.3rem;
    }
    html[lang="en"] .tooltip.show {
        right: 6rem !important;
        top: 16rem !important;
    }
    html[lang="en"] .btn-tooltip {
        left: 0;
    }
}

.main-header.scrolled {
    top: 0;
    left: 0;
    transform: none;
    width: 100%;
    max-width: 100%;
    border-radius: 0;
    padding: 12px 40px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}

.main-header {
    transition:
        all 0.2s linear;
}


/* Logo positioning - Arabic (default: left side) */
.logo-container.one {
    position: absolute;
    top: -49px;
    right: 20px;
    transform: none;
    width: 215px;
    z-index: 1000000;
}

@media (max-width: 768px) {
    .logo-container.one {
        top: -25px;
        width: 150px;
        right: 15px;
    }
}

@media (max-width: 480px) {
    .logo-container.one {
        top: -17px;
        width: 100px;
        right: 10px;
    }
}

/* Logo positioning - English (right side) */
html[lang="en"] .logo-container.one {
    right: auto;
    left: 20px;
}

@media (max-width: 768px) {
    html[lang="en"] .logo-container.one {
        left: 15px;
    }
}

@media (max-width: 480px) {
    html[lang="en"] .logo-container.one {
        left: 10px;
    }
}

.company-logo {
    width: 100%;
    height: auto;
}


.main-navigation {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 40px;
}

.nav-link {
    text-decoration: none;
    color: var(--neutral-black);
    font-size: 18px;
    font-weight: 400;
    transition: all 0.3s ease;
}

.nav-link:hover,
.nav-link.active {
    font-weight: 700;
}

/* Right Side & CTA */
.header-right {
    display: flex;
    align-items: center;
    gap: 20px;
}

.header-actions {
    display: flex;
    padding: 12px 24px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 100px;
    background: #425CA6;
    cursor: pointer;
    transition: transform 0.2s ease;
}

/* Language Dropdown Switcher */
.lang-dropdown-wrapper {
    position: absolute;
    left:11em;
    display: inline-block;
}

html[lang="en"] .lang-dropdown-wrapper {
    left: auto;
    right: 11em;
}

@media (max-width: 1035px) {
    .main-header .lang-dropdown-wrapper:not(.mobile .lang-dropdown-wrapper) {
        display: none;
    }
}

.lang-dropdown-trigger {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: transparent;
    border: none;
    border-radius: 30px;
    color: #000;
    font-family: "Montserrat", sans-serif;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    outline: none;
}

.lang-dropdown-trigger:hover {
    background: rgba(0, 0, 0, 0.05);
}

.lang-dropdown-trigger .lang-flag-img {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
}

.lang-dropdown-trigger .lang-text {
    font-size: 16px;
    font-weight: normal;
}

.lang-dropdown-trigger .lang-chevron {
    margin-left: 4px;
    transition: transform 0.3s ease;
}

.lang-dropdown-trigger .lang-chevron.rotate-180 {
    transform: rotate(180deg);
}

.lang-dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 200px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    padding: 8px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.lang-dropdown-menu.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.lang-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 12px;
    color: #28285D;
    font-family: "Montserrat", sans-serif;
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s ease;
}

.lang-option:hover {
    background: #F5F7FA;
}

.lang-option.active {
    background: #EEF2F7;
}

.lang-option .checkmark {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
}

.lang-option .lang-text {
    flex: 1;
    font-size: 16px;
}

.lang-option .lang-flag-img {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
}

/* RTL Support */
html[lang="ar"] .lang-dropdown-menu {
    left: auto;
    right: 0;
}

html[lang="ar"] .lang-dropdown-trigger {
    flex-direction: row-reverse;
}

.main-header.scrolled .lang-dropdown-wrapper {
    left: 13em;
}

/* English - scrolled logo on right */
html[lang="en"] .main-header.scrolled .lang-dropdown-wrapper {
    left: auto;
    right: 13em;
}


@media (max-width: 768px) {
    .header-actions {
        padding: 10px 18px;
    }
}

/* Hide desktop CTA on tablet */
@media (max-width: 1024px) and (min-width: 481px) {
    .header-right .header-actions.one {
        display: none !important;
    }
}

/* Show contact button next to menu icon on mobile */
@media (max-width: 480px) {
    .header-right .header-actions.one {
        display: flex !important;
        padding: 4px 10px;
    }

    .header-right {
        gap: 10px;
        padding-left: 10px;
    }
}

/* Area Filter Range Slider */
.tic-area-filter-wrapper {
    position: relative;
}

@media (max-width: 768px) {
    .tic-area-filter-wrapper {
        width: 100%;
    }
}

.tic-area-filter-trigger {
    display: flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
}

.tic-area-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #E5E7EB;
    border-radius: 16px;
    padding: 24px;
    z-index: 100;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    min-width: 320px;
}

.area-dropdown-title {
    font-family: "Montserrat", sans-serif;
    font-size: 18px;
    font-weight: 500;
    color: #28285D;
    margin: 0 0 24px 0;
}

.range-slider-container {
    position: relative;
    height: 40px;
    margin-bottom: 24px;
}

.range-slider-track {
    position: absolute;
    width: 100%;
    height: 6px;
    background: #E5E7EB;
    border-radius: 3px;
    top: 50%;
    transform: translateY(-50%);
}

.range-slider-progress {
    position: absolute;
    height: 6px;
    background: #425CA6;
    border-radius: 3px;
    top: 0;
    left: 0;
    right: 0;
}

.range-slider-input {
    position: absolute;
    width: 100%;
    height: 6px;
    background: transparent;
    pointer-events: none;
    -webkit-appearance: none;
    top: 50%;
    transform: translateY(-50%);
}

.range-slider-input::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: #425CA6;
    border: 3px solid #fff;
    border-radius: 50%;
    cursor: pointer;
    pointer-events: auto;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.range-slider-input::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: #425CA6;
    border: 3px solid #fff;
    border-radius: 50%;
    cursor: pointer;
    pointer-events: auto;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.area-values {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-bottom: 20px;
}

.area-value-box {
    background: #F7F7F7;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    padding: 12px 20px;
    font-family: "Montserrat", sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #28285D;
    min-width: 120px;
    text-align: center;
    display: flex;
    gap: 5px;
}

.area-separator {
    font-size: 18px;
    color: #9CA3AF;
    font-weight: 300;
}

.area-apply-btn {
    width: 100%;
    background: #425CA6;
    color: white;
    border: none;
    border-radius: 25px;
    padding: 14px 24px;
    font-family: "Montserrat", sans-serif;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.3s ease;
}

.area-apply-btn:hover {
    background: #3a4f8f;
}

[x-cloak] {
    display: none !important;
}

/* Mobile language dropdown */
@media (max-width: 1035px) {
    .mobile .lang-dropdown-wrapper {
        width: 100%;
        margin: 1rem 0;
        position: relative;
        left: auto;
        right: auto;
    }
    
    .mobile .lang-dropdown-wrapper .lang-dropdown-trigger {
        width: 100%;
        justify-content: center;
        padding: 14px 20px;
        background: rgba(255, 255, 255, 0.1);
        border-color: rgba(255, 255, 255, 0.2);
        color: #fff;
    }
    
    .mobile .lang-dropdown-wrapper .lang-dropdown-trigger:hover {
        background: rgba(255, 255, 255, 0.15);
    }
    
    .mobile .lang-dropdown-wrapper .lang-dropdown-menu {
        width: 100%;
        left: 0;
        right: 0;
        position: relative;
        top: 0;
    }
    
    html[lang="en"] .mobile .lang-dropdown-wrapper {
        left: auto;
        right: auto;
    }
}

@media (max-width: 768px) {
    .main-header .lang-dropdown-trigger {
        padding: 8px 14px;
        font-size: 14px;
    }
    
    .main-header .lang-dropdown-trigger .lang-flag-img {
        width: 20px;
        height: 15px;
    }
    
    .main-header .lang-dropdown-trigger .lang-text {
        font-size: 14px;
    }
    
    .main-header .lang-dropdown-menu {
        min-width: 180px;
    }
    
    .main-header .lang-option {
        padding: 10px 14px;
        font-size: 14px;
    }
    
    .main-header .lang-option .lang-flag-img {
        width: 24px;
        height: 24px;
    }
    
    /* Mobile menu specific overrides */
    .mobile .lang-dropdown-trigger .lang-text {
        font-size: 16px;
        color: #000;
    }
    
    .mobile .lang-dropdown-trigger .lang-flag-img {
        width: 24px;
        height: 24px;
    }
}

@media (max-width: 480px) {
    .header-actions {
        padding: 8px 14px;
    }
}

.header-actions:hover {
    transform: scale(1.05);
}

.cta-button {
    color: var(--white);
    font-size: 16px;
    font-weight: 500;
}

@media (max-width: 768px) {
    .cta-button {
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .cta-button {
        font-size: 13px;
    }
}

/* Hamburger Menu Icon */
.mobile-menu-toggle {
    display: none;
    /* Hidden on Desktop */
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    z-index: 1100;
}

.mobile-menu-toggle .bar {
    width: 25px;
    height: 3px;
    background-color: var(--neutral-black);
    border-radius: 5px;
    transition: all 0.3s ease;
}

/* Responsive Logic */
@media (max-width: 1100px) {
    .main-navigation {
        gap: 20px;
    }

    .nav-link {
        font-size: 16px;
    }
}

@media (max-width: 991px) {
    .main-header {
        margin: 0 0px;
        padding: 10px 15px;
        margin-top: 30px;
        width: calc(100% - 20px);
        max-width: calc(100vw - 20px);
    }

    .main-navigation {
        display: none;
    }

    /* Hide Desktop Nav */
    .mobile-menu-toggle {
        display: flex;
    }

    /* Show Hamburger */
}

@media (max-width: 768px) {
    .main-header {
        margin: 0 0px;
        padding: 8px 12px;
        margin-top: 20px;
        width: calc(100% - 20px);
        max-width: calc(100vw - 20px);
        border-radius: 60px;
    }

    .main-header.scrolled {
        padding: 10px 20px;
        width: 100%;
        max-width: 100vw;
    }
}

/* Mobile Overlay Menu */
.mobile-nav-overlay {
    position: fixed;
    top: 0;
    right: -100%;
    width: 100%;
    height: 100vh;
    background: white;
    z-index: 1050;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.5s ease-in-out;
    z-index: 100000;
}

.mobile-nav-overlay.active {
    right: 0;
}

.mobile-navigation-links {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
}

.mobile-nav-link {
    text-decoration: none;
    font-size: 28px;
    color: var(--neutral-black);
    font-weight: 400;
}

.mobile-nav-link.active {
    font-weight: 700;
}

.mobile-cta-wrapper {
    margin-top: 20px;
}

/* Hamburger X Animation */
.mobile-menu-toggle.open .bar:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

.mobile-menu-toggle.open .bar:nth-child(2) {
    opacity: 0;
}

.mobile-menu-toggle.open .bar:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

/* Hero Content - Arabic (default: right side) */
.hero-content {
    position: absolute;
    right: 60px;
    bottom: 4%;
    transform: translateY(-50%);
    z-index: 500000;
    transition: opacity 0.1s ease-in-out;
    font-size:40px;
    color:#fff;
    font-family:"Montserrat", sans-serif
}

/* Hero Content - English (left side) */
html[lang="en"] .hero-content {
    right: auto;
    left: 60px;
}

.hero-title {
    width: 280px;
}

@media (max-width: 768px) {
    .hero-content {
        right: 20px;
        bottom: 10%;
        font-size: 28px;
    }

    html[lang="en"] .hero-content {
        left: 20px;
    }

    .hero-title {
        width: auto;
        max-width: calc(100vw - 40px);
        font-size: 28px;
        line-height: 1.2;
    }

    .banar-svg-right,
    .banar-svg-left {
        max-width: 50%;
    }

    .banar-svg-right img,
    .banar-svg-left img {
        max-width: 100%;
        height: auto;
    }
}

@media (max-width: 480px) {
    .hero-content {
        right: 15px;
        bottom: 15%;
        font-size: 24px;
    }

    html[lang="en"] .hero-content {
        left: 15px;
    }

    .hero-title {
        font-size: 30px;
        max-width: calc(100vw - 30px);
    }

    .hero-subtitle {
        font-size: 24px;
        font-weight: 400;
        padding-top: 20px;
    }

    .banar-svg-right,
    .banar-svg-left {
        display: none !important;
    }
}

/* Pagination Dots */
.pagination-dots {
    position: absolute;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    padding: 12px;
    align-items: center;
    gap: 6px;
    z-index: 5;
    border-radius: var(--Radius-Circle, 999px);
    background: rgba(0, 0, 0, 0.40);
    /* Background Blur/XS */
    backdrop-filter: blur(4px);
}

@media (max-width: 768px) {
    .pagination-dots {
        bottom: 20px;
        padding: 8px;
        gap: 4px;
    }
}

@media (max-width: 480px) {
    .pagination-dots {
        bottom: 15px;
        padding: 6px;
    }
}

.dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #B3B3B3;
    cursor: pointer;
    transition: background-color 0.2s ease;
    transition: all .4s;
}

@media (max-width: 480px) {
    .dot {
        width: 10px;
        height: 10px;
    }
}

.dot.active,
.dot:hover {
    width: 24px;
    height: 12px;
    aspect-ratio: 2/1;
    border-radius: var(--Radius-Circle, 999px);
    background: #FFF;
}

@media (max-width: 480px) {
    .dot.active,
    .dot:hover {
        width: 20px;
        height: 10px;
    }
}





/* Services Section */
.services-section {
    width: 100%;
    padding: 60px;
    max-width: 1500px;
    margin: 0 auto;
    overflow-x: hidden;
}

@media (max-width: 768px) {
    .services-section {
        padding: 40px 20px;
        width: 100%;
        max-width: 100vw;
    }
}

@media (max-width: 480px) {
    .services-section {
        padding: 30px 15px;
        width: 100%;
        max-width: 100vw;
    }
}

.section-header {
    text-align: center;
    margin-bottom: 30px;
}

.section-title {
    color: var(--Text-Primary, #28285D);
    text-align: center;
    font-family: "Montserrat", sans-serif;
    font-size: 42px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

@media (max-width: 768px) {
    .section-title {
        font-size: 32px;
    }
}

@media (max-width: 480px) {
    .section-title {
        font-size: 28px;
    }
}

.services-grid {
    display: flex;
    justify-content: center;
    gap: 24px;
    overflow-x: auto;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 20px;
    width: 100%;
    max-width: 100%;
    height: 358px;
}

.services-grid::-webkit-scrollbar {
    display: none;
}

.services-grid::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}

.services-grid::-webkit-scrollbar-track {
    background: transparent;
}



.service-card.featured {
    width: 420px;
    max-width: 420px;
    flex-shrink: 0;
}

.service-card {
    width: 160px;
    max-width: 160px;
    transition: all 0.4s ease;
}


.service-card:hover {

    flex-direction: column;
    flex-shrink: 0;
    align-self: stretch;
}

.service-card {
    display: flex;
    width: 160px;
    flex-direction: column;
    justify-content: flex-end;
    gap: 20px;
    border-radius: 30px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    /* animation properties */
    transition: all 0.5s ease;
    min-width: 160px;
    max-width: 160px;
}

.service-card .service-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}


.services-grid:not(.active) .service-card:hover img {
    transform: scale(1.05);
    transition: transform 0.4s ease;
}

.services-grid.active .service-card {
    pointer-events: none;
}

.service-svg {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 5;
    pointer-events: none;
}

.service-svg img {
    position: static;
    width: auto;
    height: auto;
}

.card-overlay {
    position: absolute;
    inset: 0;
    border-radius: 30px;
    background: linear-gradient(196deg,
            rgba(68, 68, 68, 0.00) 26.43%,
            rgba(66, 92, 166, 0.90) 77.73%,
            #94C67C 97.78%);
    z-index: 2;
    pointer-events: none;
}

.card-content {
    position: relative;
    bottom: 24px;
    z-index: 100;
    padding: 0 16px;
}

.service-title {
    color: #ffffff;
    font-size: 20px;
    font-weight: 400;
    margin-bottom: 8px;
}

.service-description {
    color: #ffffff;
    font-size: 14px;
    line-height: 20px;
}

.service-card.featured .service-description {
    display: block;
}

.card-action {
    position: absolute;
    top: 10%;
    left: 24px;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    background-color: #5EC2C9;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 10000;
    transform: scaleX(-1);
    margin: -10px;
}

html[lang="en"] .card-action {
    left: auto;
    right: 24px;
    transform: scaleX(1);
}

.service-card:hover .card-action {
    opacity: 1;
}

.service-card.featured .card-action {
    opacity: 1;
}

.card-action i {
    color: #ffffff;
    font-size: 24px;
}

.services-grid.active {
    cursor: grabbing;
    cursor: -webkit-grabbing;
}


@media (max-width: 1024px) {
    .service-card.featured {
        width: 320px;
    }

    .service-card {
        width: 140px;
    }

    .services-grid {
        height: 300px;
    }
}

@media (max-width: 768px) {
    .service-card.featured {
        width: 280px;
    }

    .service-card {
        width: 120px;
    }

    .services-grid {
        height: 260px;
    }
}

@media (max-width: 480px) {
    .service-card.featured {
        width: 270px;
    }

    .service-card {
        width: 270px;
        max-width: 320px;
        flex-shrink: 0;
    }

    .services-grid {
        height: 220px;
    }

    .service-card .service-description {
        display: block;
    }

    .service-card .card-action {
        opacity: 1;
    }
}






/*================= achievements-section ===============*/


.achievements-section {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 0 60px;
    max-width: 1500px;
    margin: 0 auto;
    overflow-x: hidden;
}

@media (max-width: 768px) {
    .achievements-section {
        padding: 0 20px;
        width: 100%;
        max-width: 100vw;
    }
}

@media (max-width: 480px) {
    .achievements-section {
        padding: 0 15px;
        width: 100%;
        max-width: 100vw;
    }
}

.achievements-header {
    margin-bottom: 30px;
    text-align: center;
}

.achievements-title {
    color: var(--Text-Primary, #28285D);
    text-align: center;
    font-family: "Montserrat", sans-serif;
    font-size: 42px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

@media (max-width: 768px) {
    .achievements-title {
        font-size: 32px;
    }
}

.achievements-grid {
    width: 100%;
    display: flex;
    gap: 20px;
    justify-content: center;
    align-items: center;
    height: 649px;
    flex-direction: row-reverse;
}


.featured-achievement-card {
    position: relative;
    display: flex;
    width: 100%;
    max-width: 800px;
    height: 100%;
    padding: 30px;
    align-items: flex-end;
    gap: 10px;
    border-radius: 40px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 51.83%, rgba(66, 92, 166, 0.80) 100%), url(<path-to-image>) lightgray 50% / cover no-repeat;
}

.background-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 40px;
}

.top-stats-container {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 30px;
    gap: 20px;
    isolation: isolate;
    width: 360px;
    height: 183px;
    background: linear-gradient(360deg, #D3D0D8 0%, #9D95A7 100%);
    border-radius: 40px;
    overflow: hidden;
}

/* English - align to start */
html[lang="en"] .top-stats-container {
    align-items: flex-start;
}

.stat-title {
    color: #FFF;
    font-family: "Montserrat", sans-serif;
    font-size: 26px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.stat-number {
    color: #FFF;
    font-family: "Montserrat", sans-serif;
    font-size: 40px;
    font-style: normal;
    font-weight: 600;
    line-height: 71px;
}

.top-stats-container .stat-label {
    position: absolute;
    width: 100%;
    left: 91px;
    top: 100px;
}

.top-stats-container .stat-icon {
    position: absolute;
    width: 100%;
    left: 0;
    bottom: -0;
    transform: scaleX(-1);
}

html[lang="en"] .top-stats-container .stat-icon {
    transform: scaleX(1);
}

.area-stat-card {
    position: relative;
    display: flex;
    width: 340px;
    height: 190px;
    padding: 30px;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    position: absolute;
    left: 30px;
    top: 30px;
    border-radius: 40px;
    background: linear-gradient(80deg, #006B9C 4.24%, #614F9C 95.76%);
    overflow: hidden;
}

/* English - align to start */
html[lang="en"] .area-stat-card {
    align-items: flex-start;
    right: 30px;
    left: auto;
}


.area-label {
    color: #FFF;
    text-align: center;
    font-family: "Montserrat", sans-serif;
    font-size: 40px;
    font-style: normal;
    font-weight: 600;
    position: relative;
    z-index: 2;

}

.area-value {
    color: #FFF;
    text-align: center;
    font-family: "Montserrat", sans-serif;
    font-size: 26px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    position: relative;
    z-index: 2;
}

html[lang="en"] .area-value {
    text-align: start;
}


.chart-container {
    width: 112px;
    height: 112px;
    aspect-ratio: 1/1;
    position: absolute;
    left: 0px;
    bottom: -16px;
    z-index: 2;
    transform: scaleX(-1);
}

html[lang="en"] .chart-container {
    right: -40px;
    left: auto;
    transform: scaleX(1);
}

.svg-label {
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    z-index: 1;
}

@media (max-width: 480px) {
    .area-stat-card {
        position: absolute;
        width: 270px;
        right: 10px;
        height: 140px;
        top: 10px;
        border-radius: 24px;
        gap: 0;
        padding: 1px 30px 30px 30px;
    }

    .top-stats-container {
        position: relative;
        top: unset;
        right: 0px;
        width: 270px;
        height: 140px;
        border-radius: 24px;
    }

    html[lang="en"] .area-stat-card {
        right: auto;
        left: 10px;
    }

    html[lang="en"] .area-stat-card .top-stats-container {
        left: 0px;
    }

    html[lang="en"] .top-stats-container {
        left: 0px !important;
        right: 0;   
    }
}


.secondary-stats {
    position: relative;
    display: flex;
    width: 100%;
    max-width: 500px;
    height: 100%;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 20px;
}


.projects-stat-card {
    display: flex;
    width: 100%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 30px;
    height: 362px !important;
    gap: 50px;
    isolation: isolate;
    background: linear-gradient(360deg, #334780 0%, #425CA6 100%);
    border-radius: 40px;
    overflow: hidden;

}

html[lang="en"] .projects-stat-card {
    gap: 20px !important;
}

.projects-stat-card .card-background svg {
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    z-index: -1;
    border-radius: 40px;
}

.large-stat-number {
    font-family: "Montserrat", sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 100px;
    line-height: 122px;
    text-align: center;
    color: #FFFFFF;
    position: relative;
    z-index: 2;
}

.stat-description {
    font-family: "Montserrat", sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 32px;
    line-height: 39px;
    text-align: center;
    color: #FFFFFF;
    position: relative;
    z-index: 2;
}

.clients-stat-card {
    position: relative;
    display: flex;
    padding: 30px;
    flex-direction: column;
    justify-content: end;
    align-items: center;
    height: 267px;
    gap: 30px;
    flex: 1 0 0;
    align-self: stretch;
    border-radius: 40px;
    background: linear-gradient(0deg, #6552A3 0%, #483A73 100%);
    z-index: 2;
    overflow: hidden;
}

.blur-effect-3 {
    position: absolute;
    left: 212px;
    top: 0;
    width: 100%;
    z-index: 1;

}

.blur-effect-4 {
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    z-index: 1;
}

.stat-content {
    position: relative;
    z-index: 10;
    text-align: center;
}


@media (max-width: 991px) {
    .large-stat-number {
        font-size: 72px;
        line-height: 80px;
    }
}

@media (max-width: 640px) {
    .large-stat-number {
        font-size: 56px;
        line-height: 64px;
    }
}

@media (max-width: 991px) {
    .stat-description {
        font-size: 20px;
        line-height: 28px;
    }
}

@media (max-width: 640px) {
    .stat-description {
        font-size: 18px;
        line-height: 24px;
    }
}

.about-section {
    width: 100%;
    position: relative;
}

.tic-about-section {
    position: relative;
    display: flex;
    justify-content: start;
    align-items: start;
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
    margin-top: 90px;
}

@media (max-width: 768px) {
    .tic-about-section {
        margin-top: 60px;
        padding: 0 20px;
    }
}

@media (max-width: 480px) {
    .tic-about-section {
        margin-top: 40px;
        padding: 0 15px;
    }
}

/* English - justify to end */
html[lang="en"] .tic-about-section {
    justify-content: end;
}

.tic-about-content-box {
    width: 50%;
    margin-right: 85px;
}

@media (max-width: 768px) {
    .tic-about-content-box {
        width: 100%;
        margin-right: 0;
    }
}

.tic-about-content-box .tic-about-title {
    text-align: start;
    font-family: "Montserrat", sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 42px;
    line-height: 51px;
    color: #28285D;
    padding-bottom: 20px;
}

@media (max-width: 768px) {
    .tic-about-content-box .tic-about-title {
        font-size: 32px;
        line-height: 40px;
    }
}

@media (max-width: 480px) {
    .tic-about-content-box .tic-about-title {
        font-size: 28px;
        line-height: 36px;
    }
}

.tic-about-content-box .tic-about-description {
    font-family: "Montserrat", sans-serif;
    font-style: normal;
    font-weight: 300;
    font-size: 24px;
    line-height: 37px;
    color: #5E5E5E;
    width: 100%;
    max-width: 758px;
}

@media (max-width: 768px) {
    .tic-about-content-box .tic-about-description {
        font-size: 20px;
        line-height: 28px;
    }
}

@media (max-width: 480px) {
    .tic-about-content-box .tic-about-description {
        font-size: 18px;
        line-height: 1.5;
    }
}

.tic-about-logo-box {
    position: absolute;
    width: 714px;
    height: 428px;
    left: 120px;
    top: 110px;
}

/* English - position at left 0 */
html[lang="en"] .tic-about-logo-box {
    left: 0;
}

.tic-about-blur-decoration {
    position: absolute;
    right: 0px;
    top: -20px;
}


.tic-feature-outer-wrapper {
    position: relative;
    width: 100%;
    margin-top: 380px;
}

@media (max-width: 768px) {
    .tic-feature-outer-wrapper {
        margin-top: 80px;
    }
}

.tic-feature-main-container {
    background-image: url("../images/3D-Maps-Section.png");
    background-size: cover;
    background-position: center;
    border-radius: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 40px;
    max-width: 1300px;
    margin: 0 auto;
    gap: 30px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.05);
    position: relative;
    align-items: stretch;
}

@media (max-width: 768px) {
    .tic-feature-main-container {
        padding: 20px;
        border-radius: 20px;
    }
}

@media (max-width: 480px) {
    .tic-feature-main-container {
        padding: 15px;
    }
}

.tic-feature-image-side {
    width: 600px;
    height: 600px;
}

@media (max-width: 768px) {
    .tic-feature-image-side {
        width: 100%;
        height: auto;
        min-height: 300px;
    }
}

.tic-feature-map-img {
    width: 100%;
    height: 100%;
    border-radius: 40px;
}

.tic-feature-content-side {
    /* 3D Maps Text Container */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding: 90px 30px;
    gap: 52px;
    isolation: isolate;
    width: 600px;
    height: 600px;
    background: linear-gradient(120.27deg, rgba(255, 255, 255, 0.05) 10.95%, rgba(255, 255, 255, 0.2) 92.05%);
    box-shadow: 0px 4px 50px -1px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(25px);
    border-radius: 40px;
    flex: none;
    order: 1;
    flex-grow: 1;
}



.tic-feature-glass-card {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 30px;
}

.tic-feature-mouse-icon {
    position: relative;
    width: 106px;
    height: 106px;
    left: -150px;
}

@media (max-width: 768px) {
    .tic-feature-mouse-icon {
        left: 0;
        width: 80px;
        height: 80px;
    }
}

@media (max-width: 480px) {
    .tic-feature-mouse-icon {
        width: 60px;
        height: 60px;
    }
}

.tic-feature-text {
    font-family: "Montserrat", sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 43px;
    line-height: 52px;
    text-align: center;
    color: #0F1B3C;
}

@media (max-width: 768px) {
    .tic-feature-text {
        font-size: 30px;
        line-height: 40px;
    }
}

@media (max-width: 480px) {
    .tic-feature-text {
        font-size: 25px;
        line-height: 34px;
    }
}

.tic-feature-view-btn {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 24px 40px;
    gap: 8px;
    width: 171px;
    height: 76px;
    background: #0F1B3C;
    border-radius: 100px;
    font-family: "Montserrat", sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 23px;
    line-height: 28px;
    color: #FFFFFF;
    cursor: pointer;
}

@media (max-width: 768px) {
    .tic-feature-view-btn {
        padding: 18px 30px;
        width: auto;
        height: auto;
        font-size: 18px;
        line-height: 24px;
    }
}

@media (max-width: 480px) {
    .tic-feature-view-btn {
        padding: 14px 24px;
        font-size: 16px;
        line-height: 22px;
    }
}



.partners-section {
    position: relative;
    padding: 50px 0px;
    isolation: isolate;
    /* Gradiant */
    background: linear-gradient(270deg, #644E99 0%, #415AA3 40%, #3B6DAE 70.19%, #94C67C 100%);
    margin-top: 80px;
    overflow: hidden;
}

@media (max-width: 768px) {
    .partners-section {
        padding: 40px 20px;
        margin-top: 60px;
    }
}

@media (max-width: 480px) {
    .partners-section {
        padding: 30px 15px;
        margin-top: 40px;
    }
}

.partners-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 50px;
    max-width: 1500px;
    margin: 0 auto;
}

.partners-title {
    font-family: "Montserrat", sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 42px;
    line-height: 51px;
    text-align: center;
    color: #FFFFFF;
}

@media (max-width: 768px) {
    .partners-title {
        font-size: 32px;
        line-height: 40px;
    }
}

@media (max-width: 480px) {
    .partners-title {
        font-size: 28px;
        line-height: 36px;
    }
}

.partners-grid {
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    gap: 30px;
}

.partner-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.3s ease;
    cursor: pointer;
    /* gap: 160px; */
}

.partner-item:hover {
    transform: scale(1.1);
}

.partner-logo {
    width: 100px;
    height: 146px;

}

.partners-wrapper {
    width: 100%;
    overflow: hidden;
}

.partners-track {
    display: flex;
    gap: 186px;
    width: max-content;
    animation: scroll-left 60s linear infinite;
}

.partners-wrapper:hover .partners-track img {
    animation-play-state: paused;
}

@keyframes scroll-left {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

.partner-logo {
    width: 100px;
    height: auto;
}

.partner-name {
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.bg-svg-partners {
    position: absolute;
    z-index: -1;
    left:0;
}

@media (max-width: 768px) {
    .partners-grid {
        gap: 40px;
    }

    .partners-title {
        font-size: 1.8rem;
    }
}

@media (max-width: 480px) {
    .bg-svg-partners {
        position: absolute;
        z-index: -1;
        left:0;
        right: 150px;
    }
}

.tic-footer-main-wrapper {
    position: relative;
    max-width: 1400px;
    margin: 50px auto;
    overflow: hidden;
}

@media (max-width: 768px) {
    .tic-footer-main-wrapper {
        margin: 30px 15px;
    }
}

@media (max-width: 480px) {
    .tic-footer-main-wrapper {
        margin: 20px 10px !important;
    }
}

.footer-svg {
    position: absolute;
    z-index: 1;
    left:0;
}

.tic-footer-container {
    padding: 60px 50px 20px 50px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
    color: white;
    background: linear-gradient(270deg, #644E99 0%, #415AA3 40%, #3B6DAE 70.19%, #94C67C 100%);
    border-radius: 60px;
    flex-direction: row;
}

@media (max-width: 480px) {
    .tic-footer-container {
        padding: 30px 20px 15px 20px;
        border-radius: 30px !important;    
    }
}

.tic-footer-col {
    flex: 1;
    z-index: 1;
    margin-right:5rem;
}

@media (max-width: 768px) {
    .tic-footer-col {
        margin-right: 0;
        margin-bottom: 20px;
        flex: 100%;
    }
}

.tic-footer-logo {
    width: 120px;
    filter: brightness(0) invert(1);
}

.tic-footer-slogan {
    margin: 15px 0;
    font-weight: 500;
    font-family: "Montserrat", sans-serif;
    font-style: normal;
    font-size: 22px;
    line-height: 27px;
    color: #FFFFFF;
}

.tic-footer-license-box {
    background: white;
    padding: 8px 15px;
    border-radius: 30px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #1a2b4e;
    font-weight: bold;
}

.tic-footer-lic-img {
    width: 40px;
}

.tic-footer-heading {
    margin-bottom: 25px;
    font-family: "Montserrat", sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 22px;
    line-height: 27px;
    color: #FFFFFF;
}

.tic-footer-links {
    list-style: none;
    padding: 0;
}

.tic-footer-number {
    font-family: "Montserrat", sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 20px;
    color: #2E343B;

}

.tic-footer-links li {
    margin-bottom: 12px;
}

.tic-footer-links li a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    transition: 0.3s;
    font-family: "Montserrat", sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 17px;
    line-height: 24px;
    color: #FFFFFF;
}

.tic-footer-links li a:hover {
    color: white;
    padding-left: 5px;
}

.tic-footer-social-grid {
    display: grid;
    grid-template-columns: repeat(3, 40px);
    gap: 15px;
}

.tic-footer-social-grid a {
    color: white;
    font-size: 22px;
    text-decoration: none;
    transition: transform 0.3s;
}

.tic-footer-social-grid a:hover {
    transform: scale(1.1);
}

.footer-input {
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 10px;
}

.tic-footer-input-group {
    display: flex;
    align-items: center;
    background: white;
    border-radius: 40px;
    padding: 5px 5px 5px 10px;
    max-width: 320px;
}

.tic-footer-input {
    border: none;
    outline: none;
    flex: 1;
    font-size: 14px;
    color: #333;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 10px 10px;
    gap: 32px;

    background: #FFFFFF;
    border-radius: 100px;

}

.tic-footer-input::placeholder {
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 24px;
    color: #425CA6;
}

.tic-footer-submit-btn {
    background-color: #5EC2C9;
    border: none;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    color: white;
    cursor: pointer;
    transition: 0.3s;
    display: flex;
    justify-content: center;
    align-items: center;
}

.tic-footer-submit-btn:hover {
    background-color: #3e9e9e;
}

.tic-footer-copyright {
    width: 100%;
    text-align: center;
    margin-top: 20px;
    font-size: 12px;
    opacity: 0.7;
    z-index: 1;

    font-family: "Montserrat", sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 17px;

    color: #FFFFFF;


}

@media (max-width: 768px) {
    .tic-footer-container {
        flex-direction: column;
        padding: 40px 30px;
        border-radius: 30px;
    }

    .tic-footer-col {
        text-align: center;
    }

    .tic-footer-social-grid {
        justify-content: center;
    }

    .tic-footer-input-group {
        margin: 0 auto;
    }
}


.tic-sector-wrapper {
    max-width: 1450px;
    margin: 80px auto;
    padding: 0 25px;
    text-align: center;
    margin-bottom: 20px;
}

@media (max-width: 768px) {
    .tic-sector-wrapper {
        margin: 60px auto 20px;
        padding: 0 20px;
    }
}

@media (max-width: 480px) {
    .tic-sector-wrapper {
        margin: 40px auto 20px;
        padding: 0 15px;
    }
}

.tic-sector-main-title {
    margin-bottom: 30px;
    font-family: "Montserrat", sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 42px;
    line-height: 51px;
    text-align: center;

    /* Text/Primary */
    color: #28285D;
}

@media (max-width: 768px) {
    .tic-sector-main-title {
        font-size: 32px;
        line-height: 40px;
    }
}

.tic-sector-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 20px;
}

.tic-sector-card {
    background: #ffffff;
    padding: 30px 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    cursor: pointer;
    min-height: 200px;

    gap: 14px;

    background: #FFFFFF;
    border-radius: 20px;
    position: relative;
    overflow: hidden;

}

.tic-sector-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
}

/* Icon Styling */
.tic-sector-icon-box {
    width: 45px;
    height: 45px;
    background: #f0f0f0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    color: var(--tic-navy);
    font-size: 18px;
    background: #F5F5F5;
}

.tic-sector-title {
    margin: 0 0 10px 0;

    font-family: "Montserrat", sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 20px;
    line-height: 24px;

    /* Text/Primary */
    color: #28285D;
}

.tic-sector-desc {
    font-family: "Montserrat", sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 20px;
    color: #5E5E5E;
}

/* Active Card Style (Residential) */
.tic-sector-card.tic-sector-active {
    color: white;
    background: #F2F2F2;
    position: relative;

}

.tic-sector-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    z-index: 1;
}

.tic-sector-bg svg {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tic-sector-card.tic-sector-active .tic-sector-icon-box {
    background: rgba(255, 255, 255, 0.9);
    color: #1e5f91;
    position: relative;
    z-index: 2;
}

.tic-sector-card.tic-sector-active .tic-sector-title {
    color: white;
}

.tic-sector-card.tic-sector-active .tic-sector-desc {
    color: rgba(255, 255, 255, 0.9);
}

/* Responsive */
@media (max-width: 768px) {
    .tic-sector-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .tic-sector-grid {
        grid-template-columns: 1fr;
    }
}






:root {
    --tic-primary: #1e2b58;
    --tic-accent: #6c63ff;
    --tic-available: #c8e6c9;
    --tic-sold: #ffcdd2;
    --tic-reserved: #fff9c4;
    --tic-text-gray: #757575;
}


.tic-listing-wrapper {
    position: relative;
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px;
    background: #FFFFFF;
    border: 1px solid #E5E5E5;
    border-radius: 32px;
}

@media (max-width: 768px) {
    .tic-listing-wrapper {
        padding: 15px;
        border-radius: 20px;
        margin: 0 15px;
    }
}

@media (max-width: 480px) {
    .tic-listing-wrapper {
        padding: 10px;
        margin: 0 10px;
    }
}

/* Filter Bar */
.tic-listing-filter-bar {
    display: flex;
    gap: 15px;
    align-items: end;
    margin-bottom: 30px;
    flex-wrap: wrap;
}

.tic-listing-search-box {
    background: #fff;
    padding: 10px 15px;
    border-radius: 25px;
    display: flex;
    align-items: center;
    flex: 1;
    background: #F7F7F7;
    border: 1px solid #E5E5E5;
    max-width: 217px;
    width: 217px;
    height: 48px;

}

.tic-listing-search-box input {
    font-family: "Montserrat", sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 15px;
    line-height: 24px;
    color: #5E5E5E;
}

.tic-listing-search-box input {
    border: none;
    outline: none;
    margin-left: 10px;
    width: 100%;
    background: transparent;
}

.tic-listing-select {
    outline: none;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 10px 14px;
    gap: 6px;
    width: 245px;
    background: #F7F7F7;
    border: 1px solid #E5E5E5;
    border-radius: 40px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    background-image: url("data:image/svg+xml,%3Csvg width='16' height='8' viewBox='0 0 16 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.75 0.75L7.75 6.75L0.75 0.75' stroke='%235E5E5E' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 16px center;
    background-size: 16px 8px;
    font-family: "Montserrat", sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 15px;
    line-height: 24px;
    color: #5E5E5E;

}

/* English - dropdown arrow on right */
html[lang="en"] .tic-listing-select {
    background-position: right 16px center;
}

.tic-listing-view-toggles {
    display: flex;
    box-sizing: border-box;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    padding: 0px 0px 0px 4px;
    gap: 8px;
    height: 48px;
    background: #F7F7F7;
    border: 1px solid #E5E5E5;
    border-radius: 38px;

}

.tic-view-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    border-radius: 50%;
    background: transparent;
}

.tic-view-btn.tic-active {
    background: #425CA6;
    border-radius: 50%;
    color: #fff;
}

/* Grid Layout */
.tic-listing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}

@media (max-width: 1200px) {
    .tic-listing-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .tic-listing-grid {
        grid-template-columns: 1fr;
    }
}

/* Card Styling */
.tic-listing-card {
    background: #fff;
    border-radius: 25px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    padding: 14px;
    background: #F7F7F7;
    border: 1px solid #E5E5E5;
    border-radius: 26px;
}

.tic-listing-header {
    position: relative;
    height: 160px;
    border-radius: 20px;
    overflow: hidden;
}

.tic-listing-header img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}

.tic-listing-badges {
    position: absolute;
    top: 15px;
    right: 15px;
    display: flex;
    gap: 8px;
    z-index: 3;
}

html[lang="en"] .tic-listing-badges {
    right: auto;
    left: 15px;
}

.tic-listing-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 18px;
    z-index: 2;
    color: #fff;
    background: linear-gradient(180deg, rgba(66, 92, 166, 0) 0%, rgba(66, 92, 166, 0.8) 100%);
}

.tic-listing-overlay h4 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    font-family: "Montserrat", sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 20px;
    line-height: 28px;
    color: #FFFFFF;
}

.tic-listing-overlay p {
    margin-top: 6px;
    opacity: 0.9;
    font-family: "Montserrat", sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #FFFFFF;
}

.tic-badge {
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    backdrop-filter: blur(6px);
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 6px 12px;

    width: 110px;
    height: 34px;

    background: #EAEAEA;
    border-radius: 16px;
    font-family: "Montserrat", sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 22px;
    color: #5E5E5E;
}

.tic-status-available {
    background: rgba(200, 230, 201, 0.9);
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 6px 12px;

    width: 99px;
    height: 34px;

    border-radius: 16px;
    font-family: "Montserrat", sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 22px;
    color: #2E7D32;
}

.tic-status-sold {
    background: rgba(255, 205, 210, 0.9);
    color: #C62828;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 6px 12px;
    width: 99px;
    height: 34px;
    border-radius: 16px;
    font-family: "Montserrat", sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 22px;
}

.tic-status-reserved {
    background: rgba(255, 249, 196, 0.9);
    color: #F57F17;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 6px 12px;
    width: 99px;
    height: 34px;
    border-radius: 16px;
    font-family: "Montserrat", sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 22px;
}

.tic-info {
    background: rgba(255, 255, 255, 0.8);
    color: #333;
}


/* Content Specs */
.tic-listing-content {
    padding-top: 20px;
}

.tic-listing-specs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 20px;
}

.tic-listing-specs label {
    display: block;
    font-family: "Montserrat", sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 26px;
    color: #5E5E5E;
}

.tic-listing-specs span {
    font-weight: 600;
    font-family: "Montserrat", sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 26px;
    color: #28285D;
}

/* Dimensions Box */
.tic-listing-dimensions {

    margin-bottom: 20px;
    padding: 12px 14px;
    gap: 10px;
    background: #FFFFFF;
    border-radius: 16px;

}

.tic-listing-dimensions h6 {
    margin: 0 0 10px 0;
    font-weight: 400;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 0px;
    gap: 18px;
    font-family: "Montserrat", sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 26px;
    color: #5E5E5E;
}

.tic-dim-row {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    margin-bottom: 5px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 0px;
    gap: 18px;
}

.tic-dim-row span {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0px;
    gap: 4px;
    font-family: "Montserrat", sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 26px;
    color: #5E5E5E;

}

.tic-dim-row span strong {

    font-family: "Montserrat", sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 26px;
    color: #28285D;
}

/* Buttons */
.tic-listing-actions {
    display: flex;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 0px;
    gap: 14px;
    position: absolute;
    bottom: 10;
}

.tic-btn-details {
    flex: 1;
    padding: 12px;
    border-radius: 25px;
    border: none;
    color: #fff;
    cursor: pointer;
    font-weight: 500;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0px 24px;
    gap: 4px;
    width: 181.67px;
    height: 54px;
    background: #425CA6 ;
    border-radius: 36px;
    font-family: "Montserrat", sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 18px;
    line-height: 26px;
    display: flex;
    align-items: center;
    color: #FFFFFF;

}

.tic-btn-details {
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        background-position 0.6s ease;
    background-size: 200% 200%;
}

.tic-btn-details:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.15);
    /* background-position: right center; */
}

.tic-btn-details:active {
    transform: translateY(0);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}

.tic-btn-call {
    flex: 1;
    padding: 12px;
    border-radius: 25px;
    border: 1.5px solid #5f6caf;
    background: transparent;
    color: #5f6caf;
    cursor: pointer;
    font-weight: 500;
    box-sizing: border-box;

    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0px 24px;
    gap: 4px;

    width: 181.67px;
    height: 54px;

    border: 2px solid #425CA6;
    border-radius: 36px;
    font-family: "Montserrat", sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 18px;
    line-height: 26px;
    display: flex;
    align-items: center;
    color: #425CA6;
}





:root {
    --tic-border-radius: 24px;
    --tic-gap: 16px;
}

.tic-gallery-wrapper {
    max-width: 1450px;
    margin: 0 auto;
    margin-top: 70px;
}

@media (max-width: 768px) {
    .tic-gallery-wrapper {
        margin: 40px 15px;
    }
}

@media (max-width: 480px) {
    .tic-gallery-wrapper {
        margin: 30px 10px;
    }
}

.tic-gallery-container {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-rows: repeat(2, 226px);
    gap: 20px;
    padding-top: 3rem;
}

.tic-gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    transition: transform 0.3s ease;
}

.tic-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Main Image takes 2 rows */
.tic-main-image {
    grid-row: span 2;
}

/* Heart Button Styling */
.tic-heart-btn {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 45px;
    height: 45px;
    background: white;
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    color: #ff5a5f;
    font-size: 20px;
    transition: transform 0.2s ease;
}

.tic-heart-btn:hover {
    transform: scale(1.1);
}

/* View All Overlay Styling */
.tic-view-all-card {
    cursor: pointer;
}

.tic-overlay-blur {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(8px);
    /* Blur effect like the image */
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 22px;
    font-weight: 600;
    transition: background 0.3s ease;
}

.tic-view-all-card:hover .tic-overlay-blur {
    background: rgba(0, 0, 0, 0.5);
}

/* Responsive adjustments */
@media (max-width: 1024px) {
    .tic-gallery-container {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
    }

}

@media (max-width: 600px) {
    .tic-gallery-container {
        grid-template-columns: 1fr;
    }

    .tic-main-image,
    .tic-gallery-item {
        grid-column: span 1;
    }
}


/* Modal Overlay */
.tic-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    z-index: 99999999999999;
    display: none;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(16px);

}

.tic-modal-overlay.active {
    display: flex;
}

/* Close Button */
.tic-modal-close {
    position: absolute;
    top: 10px;
    left: 10%;
    background: white;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333;
    z-index: 10001;
}

/* Content Layout */
.tic-modal-content {
    position: relative;
    width: 90%;
    max-width: 1250px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

/* Main Image */
.tic-modal-main-view {
    width: 100%;
    height: 68vh;
    border-radius: 20px;
    overflow: hidden;
}

.tic-modal-main-view img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.522);
}

/* Navigation Buttons */
.tic-modal-nav {
    position: absolute;
    bottom: 0;
    transform: translateY(-50%);
    background: white;
    border: none;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 1000;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.tic-prev {
    left: 18%;
}

.tic-next {
    right: 18%;
}

/* Thumbnails Strip */
.tic-modal-thumbnails-container {
    background: white;
    padding: 10px;
    border-radius: 20px;
    width: fit-content;
    max-width: 90%;
    overflow-x: auto;
}

.tic-modal-thumbnails-wrapper {
    display: flex;
    gap: 10px;
}

.tic-modal-thumb {
    width: 120px;
    height: 80px;
    border-radius: 12px;
    cursor: pointer;
    object-fit: cover;
    opacity: 0.6;
    transition: all 0.3s ease;
    border: 3px solid transparent;
}

.tic-modal-thumb.active {
    opacity: 1;
    border-color: #007bff;
    /* Blue border like the design */
}

/* Responsive Modal */
@media (max-width: 1300px) {
    .tic-prev {
        left: 10px;
    }

    .tic-next {
        right: 10px;
    }
}

@media (max-width: 768px) {
    .tic-modal-main-view {
        height: 40vh;
    }

    .tic-modal-thumb {
        width: 80px;
        height: 60px;
    }
}











:root {
    --Background-Primary: #fff;
    --Background-Primary-off-white: #f7f7f7;
    --Text-Primary: #28285d;
    --Text-Secondary: #5e5e5e;
    --content-text-icon-secondary: #737373;
    --content-text-icon-primary-inverse: #fff;
    --Border-Secondary: #e5e5e5;
    --Blue: #425ca6;
    --Gradiant: linear-gradient(270deg, #644e99 0%, #415aa3 40%, #3b6dae 70.19%, #94c67c 100%);
    --Radius-M: 12px;
    --Heading-S-font-size: 22px;
    --Heading-S-letter-spacing: 0.5px;
    --Body-L-font-size: 18px;
    --Body-L-line-height: 26px;
    --Body-L-letter-spacing: 0;
    --M: 2px;
}


.property-details-container {
    border-radius: 20px;
    max-width: 1450px;
    margin: 0 auto;
    margin-top: 30px;
}

@media (max-width: 768px) {
    .property-details-container {
        margin: 20px 15px;
    }
}

@media (max-width: 480px) {
    .property-details-container {
        margin: 15px 10px;
    }
}

.property-layout {
    gap: 20px;
    display: flex;
}

@media (max-width: 991px) {
    .property-layout {
        flex-direction: column;
        align-items: stretch;
        gap: 0px;
    }
}

.property-main-content {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    line-height: normal;
    width: 69%;
    margin-left: 0px;
}

@media (max-width: 991px) {
    .property-main-content {
        width: 100%;
    }
}

.property-card {
    border-radius: 20px;
    flex-grow: 1;
    width: 100%;
    background-color: var(--Background-Primary);
    padding: 24px;
}

@media (max-width: 991px) {
    .property-card {
        max-width: 100%;
        margin-top: 20px;
        padding: 20px;
    }
}

.property-header {
    width: 100%;
    font-family: "Montserrat", sans-serif , -apple-system, Roboto, Helvetica, sans-serif;
    display: flex;
    width: 100%;
    align-items: start;
    justify-content: space-between;
    flex-wrap: wrap;
}

@media (max-width: 991px) {
    .property-header {
        max-width: 100%;
    }
}

.property-info {
    display: flex;
    min-width: 240px;
    flex-direction: column;
    align-items: stretch;
    justify-content: start;
    flex: 1;
    flex-shrink: 1;
    flex-basis: 0%;
}

@media (max-width: 991px) {
    .property-info {
        max-width: 100%;
    }
}

.plot-info {
    align-self: start;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 20px;
    color: var(--content-text-icon-secondary);
    font-weight: 400;
    text-transform: uppercase;
    justify-content: start;
}

.plot-number {
    color: var(--content-text-icon-secondary);
    align-self: stretch;
    margin: auto 0;
}

.divider {
    color: var(--content-text-icon-secondary);
    align-self: stretch;
    margin: auto 0;
}

.block-info {
    color: var(--content-text-icon-secondary);
    align-self: stretch;
    margin: auto 0;
}

.property-title-section {
    margin-top: 12px;
    width: 100%;
    color: var(--Text-Primary);
}

@media (max-width: 991px) {
    .property-title-section {
        max-width: 100%;
    }
}

.property-title {
    color: var(--Text-Primary);
    font-size: 36px;
    font-weight: 600;
    line-height: 1;
    margin: 0;
}

@media (max-width: 991px) {
    .property-title {
        max-width: 100%;
    }
}

.location-info {
    display: flex;
    margin-top: 12px;
    width: 100%;
    align-items: center;
    gap: 8px;
    font-size: 24px;
    font-weight: 400;
    justify-content: start;
    flex-wrap: wrap;
}

@media (max-width: 991px) {
    .location-info {
        max-width: 100%;
    }
}

.location-icon {
    aspect-ratio: 1;
    object-fit: contain;
    object-position: center;
    width: 26px;
    align-self: stretch;
    flex-shrink: 0;
    margin: auto 0;
}

.location-text {
    color: var(--Text-Primary);
    align-self: stretch;
    margin: auto 0;
}

.status-chips {
    display: flex;
    min-width: 240px;
    align-items: center;
    gap: 8px;
    font-size: 20px;
    color: var(--Blue);
    font-weight: 600;
    letter-spacing: 0.5px;
    line-height: 1;
    justify-content: start;
}

.status-chip {
    border-radius: 99px;
    background-color: rgba(0, 90, 112, 0.1);
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto 0;
    padding: 10px 14px;
    color: var(--Blue);
}

.property-description {
    margin-top: 20px;
    font-family: "Montserrat", sans-serif;
    font-style: normal;
    font-weight: 300;
    font-size: 24px;
    line-height: 35px;
    letter-spacing: 0.01em;

    color: #454545;
}

@media (max-width: 991px) {
    .property-description {
        max-width: 100%;
    }
}

.section-divider {
    min-height: 1px;
    margin-top: 20px;
    width: 100%;
    background-color: var(--Border-Secondary);
    margin-bottom: 20px;
}

@media (max-width: 991px) {
    .section-divider {
        max-width: 100%;
    }
}

.specifications-section {
    margin-top: 30px;
    width: 100%;
    font-family: Montserrat, -apple-system, Roboto, Helvetica, sans-serif;
}

@media (max-width: 991px) {
    .specifications-section {
        max-width: 100%;
    }
}

.section-title {
    color: var(--Text-Primary);
    font-size: 30px;
    font-weight: 600;
    line-height: 1.2;
    margin: 0;
    text-align: start;
}

@media (max-width: 991px) {
    .section-title {
        max-width: 100%;
    }
}

.specifications-grid {
    display: flex;
    margin-top: 12px;
    width: 100%;
    align-items: center;
    gap: 40px;
    color: var(--Text-Primary);
    text-align: center;
    justify-content: start;
    flex-wrap: wrap;
}

@media (max-width: 991px) {
    .specifications-grid {
        max-width: 100%;
    }
}

.spec-item {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: start;
    margin: auto 0;
}

.spec-header {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 22px;
    font-weight: 500;
    letter-spacing: 0.5px;
    justify-content: start;
}

.spec-icon {
    aspect-ratio: 1;
    object-fit: contain;
    object-position: center;
    width: 24px;
    border-radius: 5px;
    align-self: stretch;
    flex-shrink: 0;
    margin: auto 0;
}

.spec-value {
    color: var(--Text-Primary);
    font-size: var(--Heading-S-font-size);
    letter-spacing: var(--Heading-S-letter-spacing);
    align-self: stretch;
    margin: auto 0;
}

.spec-label {
    color: var(--Text-Primary);
    font-size: var(--Body-L-font-size);
    font-weight: 400;
    line-height: var(--Body-L-line-height);
    letter-spacing: var(--Body-L-letter-spacing);
    align-self: start;
}

.spec-divider {
    align-self: stretch;
    width: 0px;
    flex-shrink: 0;
    height: 39px;
    background-color: var(--Border-Secondary);
    margin: auto 0;
    border: 1px solid rgba(229, 229, 229, 1);
}

.boundary-dimensions-card {
    border-radius: 16px;
    background-color: rgba(247, 247, 247, 1);
    display: flex;
    margin-top: 12px;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    letter-spacing: var(--Body-L-letter-spacing);
    justify-content: center;
    padding: 14px 16px;
}

@media (max-width: 991px) {
    .boundary-dimensions-card {
        max-width: 100%;
    }
}

.boundary-title {
    color: var(--Text-Secondary);
    font-size: 20px;
    font-weight: 500;
    line-height: var(--Body-L-line-height);
    letter-spacing: var(--Body-L-letter-spacing);
    margin: 0;
}

@media (max-width: 991px) {
    .boundary-title {
        max-width: 100%;
    }
}

.boundary-row {
    display: flex;
    margin-top: 14px;
    width: 100%;
    align-items: start;
    gap: 18px;
    justify-content: start;
    flex-wrap: wrap;
}

@media (max-width: 991px) {
    .boundary-row {
        max-width: 100%;
    }
}

.boundary-item {
    display: flex;
    min-width: 240px;
    align-items: center;
    gap: 4px;
    justify-content: start;
    flex: 1;
    flex-shrink: 1;
    flex-basis: 0%;
}

.boundary-label {
    color: var(--Text-Secondary);
    font-size: 18px;
    font-weight: 400;
    line-height: var(--Body-L-line-height);
    letter-spacing: var(--Body-L-letter-spacing);
    align-self: stretch;
    margin: auto 0;
}

.boundary-value {
    color: var(--Text-Primary);
    font-size: 22px;
    font-weight: 500;
    line-height: var(--Body-L-line-height);
    letter-spacing: var(--Body-L-letter-spacing);
    align-self: stretch;
    margin: auto 0;
}

.boundary-divider {
    min-height: 1px;
    margin-top: 14px;
    width: 100%;
    border: 1px solid rgba(230, 230, 230, 1);
}

@media (max-width: 991px) {
    .boundary-divider {
        max-width: 100%;
    }
}

.location-section {
    border-radius: var(--Radius-M);
    margin-top: 30px;
    width: 100%;
}

@media (max-width: 991px) {
    .location-section {
        max-width: 100%;
    }
}

.map-container {
    display: flex;
    flex-direction: column;
    justify-content: end;
    align-items: flex-start;
    overflow: hidden;
    position: relative;
    min-height: 438px;
    margin-top: 12px;
    width: 100%;
    padding: 338px 16px 16px;
}

@media (max-width: 991px) {
    .map-container {
        max-width: 100%;
        padding-top: 100px;
    }
}

.map-image {
    position: absolute;
    inset: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 20px;
}

.map-overlay {
    position: absolute;
    align-self: start;
    z-index: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: Montserrat, -apple-system, Roboto, Helvetica, sans-serif;
    font-weight: 400;
    justify-content: center;
    right: 312px;
    top: 82px;
    width: 208px;
}

.property-marker-card {
    align-items: center;
    display: flex;
    max-width: 100%;
    width: 208px;
    flex-direction: column;
    justify-content: start;
}

.marker-content {
    justify-content: center;
    align-items: stretch;
    border-radius: 10px;
    background-color: var(--Background-Primary);
    display: flex;
    width: 100%;
    flex-direction: column;
    padding: 6px;
}

.marker-image {
    aspect-ratio: 2.58;
    object-fit: contain;
    object-position: center;
    width: 100%;
}

.marker-info {
    display: flex;
    margin-top: 6px;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
}

.marker-title {
    margin: 5px 0;
    font-family: "Montserrat", sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 20px;
    display: flex;
    align-items: center;
    color: #28285D;
}

.marker-location {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--content-text-icon-secondary);
    line-height: 1;
    justify-content: start;
}

.marker-location-icon {
    aspect-ratio: 1;
    object-fit: contain;
    object-position: center;
    width: 12px;
    align-self: stretch;
    flex-shrink: 0;
    margin: auto 0;
}

.marker-location-text {
    align-self: stretch;
    flex: 1;
    flex-shrink: 1;
    flex-basis: 0%;
    margin: auto 0;
}

.map-marker {
    position: relative;
    border-radius: 8px;
    padding: 10px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    top: -30px;
    z-index: -1;
}

.map-marker svg {
    width: 100%;
    height: 100%;
    animation: pulse 1.6s ease-in-out infinite;
    transform-origin: center;
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }

    25% {
        transform: scale(1.1);
    }

    40% {
        transform: scale(1);
    }

    60% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }
}


.marker-content::after {
    content: "";
    position: absolute;
    top: 56%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 10px 10px 0 10px;
    border-style: solid;
    border-color: white transparent transparent transparent;
}

.map-controls {
    position: relative;
    justify-content: center;
    align-items: center;
    border-radius: var(--Radius-M);
    box-shadow: 0 24px 48px -8px rgba(38, 38, 38, 0.12), 0 2px 4px 0 rgba(38, 38, 38, 0.04);
    background-color: var(--Background-Primary);
    align-self: end;
    z-index: 0;
    display: flex;
    flex-direction: column;
    width: 40px;
    padding: 6px;
}

.map-control-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.control-icon {
    aspect-ratio: 1;
    object-fit: contain;
    object-position: center;
    width: 28px;
}

.control-divider {
    background-color: var(--Border-Secondary);
    min-height: 1px;
    margin-top: 8px;
    width: 27px;
    border: 1px solid rgba(229, 229, 229, 1);
}

.property-sidebar {
    position: sticky;
    top: 20px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    line-height: normal;
    width: 31%;
    /* margin-left: 20px; */
    padding: 0 10px;
}

@media (max-width: 991px) {
    .property-sidebar {
        width: 100%;
        position: static;
        top: auto;
    }
}

.sidebar-card {
    border-radius: 20px;
    width: 100%;
    background-color: var(--Background-Primary);
    padding: 24px;
    font-family: Montserrat, -apple-system, Roboto, Helvetica, sans-serif;
}

@media (max-width: 991px) {
    .sidebar-card {
        margin-top: 20px;
        padding: 20px;
    }
}

.price-section {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: start;
    font-size: 36px;
    color: var(--Text-Primary);
    font-weight: 600;
    white-space: nowrap;
    line-height: 1;
    justify-content: start;
}

@media (max-width: 991px) {
    .price-section {
        white-space: initial;
    }
}

.price-display {
    width: 187px;
    max-width: 100%;
    display: flex;
    width: 100%;
    align-items: start;
    gap: 6px;
    justify-content: start;
}

@media (max-width: 991px) {
    .price-display {
        white-space: initial;
    }
}

.currency-icon {
    aspect-ratio: 0.87;
    object-fit: contain;
    object-position: center;
    width: 28px;
    flex-shrink: 0;
}

.price-amount {
    color: var(--Text-Primary);
}

.registration-section {
    margin-top: 20px;
    width: 100%;
    font-weight: 400;
}

.form-header {
    display: flex;
    width: 100%;
    align-items: start;
    gap: 40px 69px;
    font-size: 24px;
    color: var(--Text-Primary);
    justify-content: space-between;
}

.form-title {
    color: var(--Text-Primary);
    margin: 0;
    font-size: 24px;
    font-weight: 400;
}

.form-icon {
    aspect-ratio: 1;
    object-fit: contain;
    object-position: center;
    width: 24px;
    flex-shrink: 0;
}

.registration-form {
    margin-top: 16px;
    width: 100%;
}

.form-field {
    width: 100%;
    margin-bottom: 14px;
}

.form-field:first-child {
    margin-bottom: 14px;
}

.field-label {
    display: flex;
    width: 100%;
    align-items: center;
    font-size: 20px;
    color: var(--Text-Primary);
    letter-spacing: 0.5px;
    line-height: 1;
    justify-content: start;
    margin-bottom: 10px;
}

.form-input {
    align-items: stretch;
    border-radius: 99px;
    display: flex;
    min-height: 54px;
    width: 100%;
    gap: 4px;
    font-size: 18px;
    color: var(--content-text-icon-secondary);
    line-height: 1;
    background-color: var(--Background-Primary-off-white);
    padding: 10px 18px;
    border: none;
    outline: none;
}

.form-input::placeholder {
    color: var(--content-text-icon-secondary);
}

.primary-btn {
    justify-content: center;
    align-items: center;
    border-radius: 99px;
    display: flex;
    min-height: 54px;
    width: 100%;
    gap: 8px;
    font-size: 22px;
    color: var(--content-text-icon-primary-inverse);
    font-weight: 500;
    white-space: nowrap;
    line-height: 1;
    background: #425CA6;
    padding: 0 24px;
    border: none;
    cursor: pointer;
    font-family: "Montserrat", sans-serif;
}

@media (max-width: 991px) {
    .primary-btn {
        white-space: initial;
        padding: 0 20px;
    }
}

.visit-section {
    margin-top: 20px;
    width: 100%;
    font-weight: 400;
}

.visit-form {
    margin-top: 16px;
    width: 100%;
    font-size: 20px;
}

.datetime-row {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 20px;
    justify-content: start;
}

.datetime-field {
    align-items: center;
    border-radius: 22px;
    align-self: stretch;
    display: flex;
    gap: 20px;
    justify-content: start;
    flex: 1;
    flex-shrink: 1;
    flex-basis: 0%;
    background-color: var(--Background-Primary-off-white);
    margin: auto 0;
    padding: 12px 14px;
}

.datetime-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.datetime-labels {
    align-self: stretch;
    width: 93px;
    margin: auto 0;
}

.datetime-label {
    color: var(--Text-Primary);
    display: block;
}

.datetime-placeholder {
    color: var(--content-text-icon-secondary);
    display: block;
}

.datetime-icon {
    aspect-ratio: 1;
    object-fit: contain;
    object-position: center;
    width: 24px;
    border-radius: 5px;
    align-self: stretch;
    flex-shrink: 0;
    margin: auto 0;
}

.visit-type-section {
    margin-top: 14px;
    width: 100%;
    color: var(--Text-Primary);
}

.visit-type-label {
    color: var(--Text-Primary);
    display: block;
    margin-bottom: 12px;
}

.visit-type-options {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 20px;
    white-space: nowrap;
    text-align: center;
    justify-content: start;
    margin-bottom: 15px;
}

@media (max-width: 991px) {
    .visit-type-options {
        white-space: initial;
    }
}

.visit-option {
    justify-content: center;
    align-items: stretch;
    border-radius: 22px;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    flex: 1;
    flex-shrink: 1;
    flex-basis: 0%;
    background-color: var(--Background-Primary-off-white);
    margin: auto 0;
    padding: 16px 20px;
    cursor: pointer;
}

.visit-option.selected {
    border-radius: 22px;

    background:
        linear-gradient(#e2e6f3, #e2e6f3) padding-box,
        var(--Gradiant) border-box;

    border: 2px solid transparent;
}


@media (max-width: 991px) {
    .visit-option {
        white-space: initial;
    }
}

.visit-icon {
    aspect-ratio: 1;
    object-fit: contain;
    object-position: center;
    width: 44px;
    align-self: center;
}

.visit-option-text {
    color: var(--Text-Primary);
    margin-top: 10px;
}

.secondary-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 54px;
    width: 100%;
    padding: 0 24px;
    gap: 8px;

    font-size: 22px;
    font-weight: 500;
    border-radius: 99px;
    cursor: pointer;

    background:
        linear-gradient(#fff, #fff) padding-box,
        var(--Gradiant) border-box;

    border: 2px solid transparent;
    color: var(--Text-Primary);
}

@media (max-width: 991px) {
    .secondary-btn {
        padding: 0 20px;
    }
}

.attachments-card {
    align-items: stretch;
    border-radius: 20px;
    display: flex;
    margin-top: 20px;
    flex-direction: column;
    color: var(--Text-Primary);
    font-weight: 400;
    justify-content: center;
    background-color: var(--Background-Primary);
    padding: 24px;
    font-family: Montserrat, -apple-system, Roboto, Helvetica, sans-serif;
}

@media (max-width: 991px) {
    .attachments-card {
        padding: 0 20px;
    }
}

.attachments-section {
    width: 100%;
}

.attachments-title {
    color: var(--Text-Primary);
    font-size: 24px;
    margin: 0;
}

.files-list {
    margin-top: 14px;
    width: 100%;
    font-size: 22px;
}

.file-item {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 17px;
    justify-content: start;
    text-decoration: none;
    margin-bottom: 18px;
}

.file-item:last-child {
    margin-bottom: 0;
}

.file-icon {
    aspect-ratio: 0.87;
    object-fit: contain;
    object-position: center;
    width: 28px;
    align-self: stretch;
    flex-shrink: 0;
    margin: auto 0;
}

.file-name {
    color: var(--Text-Primary);
    text-decoration: underline;
    align-self: stretch;
    margin: auto 0;
}

.tic-related-projects {
    max-width: 1450px;
    margin: 50px auto;
    padding: 24px;
    background: #FFFFFF;
    border-radius: 20px;
}

@media (max-width: 768px) {
    .tic-related-projects {
        margin: 30px 15px;
        padding: 20px 15px;
    }
}

@media (max-width: 480px) {
    .tic-related-projects {
        margin: 20px 10px;
        padding: 15px 10px;
    }
}

.tic-related-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}

.tic-related-title {
    color: #1e2b58;
    font-size: 28px;
    font-weight: 700;
}

.tic-related-nav {
    display: flex;
    flex-direction:row-reverse;
    gap: 15px;
}

.tic-nav-btn {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    border: 1px solid #eee;
    background: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #757575;
    transition: all 0.3s ease;
}

html[lang="en"] .tic-nav-btn {
    transform: scaleX(-1);
}

.tic-nav-btn:hover {
    background: #f0f0f0;
    color: #1e2b58;
}

.tic-listing-grid.two {
    display: flex !important;
    grid-template-columns: none !important;
    overflow-x: auto;
    scroll-behavior: smooth;
    gap: 25px;
    padding-bottom: 20px;
    scrollbar-width: none;
    cursor: grab;
    user-select: none;
}

.tic-listing-grid.two.active {
    cursor: grabbing;
}

.tic-listing-grid.two::-webkit-scrollbar {
    display: none;
}

.tic-listing-grid.two .tic-listing-card {
    flex: 0 0 448px;
    scroll-snap-align: start;
    pointer-events: auto;
}

@media (max-width: 768px) {
    .tic-listing-grid.two .tic-listing-card {
        flex: 0 0 300px;
    }

    .achievements-grid {
        flex-direction: column;
    }

    .featured-achievement-card {
        flex-direction: column-reverse;
        gap: 30px;
    }

    .achievements-grid {
        height: 100%;
    }

    .featured-achievement-card {
        height: 500px;
        padding: 15px;
    }

    .secondary-stats {
        max-width: 100%;
        gap: 20px;
    }

    .projects-stat-card,
    .clients-stat-card {
        width: 100%;
        height: auto;
        min-height: 250px;
    }

    .tic-listing-badges {
        flex-wrap: wrap;
    }

    .tic-listing-filter-bar {
        flex-direction: column;
    }

    .tic-listing-search-box,
    .tic-listing-select {
        width: 100%;
        max-width: 100%;
    }

    .tic-badge {
        padding: 5px 10px;
        width: 91px;
        height: 34px;
        font-size: 12px;
    }

    .tic-btn-call,
    .tic-btn-details {
        font-size: 15px;
        line-height: 18px;
        padding: 0 10px;
        height: 48px;
    }

    .tic-listing-specs {
        padding: 0 14px;
    }

    .location-info {
        margin-bottom: 10px;
    }

    .tic-listing-overlay h4,
    .tic-listing-specs span,
    .plot-info,
    .property-title,
    .location-text,
    .spec-value,
    .boundary-title,
    .boundary-value,
    .boundary-label,
    .status-chip,
    .datetime-label,
    .visit-form,
    .field-label,
    .spec-label,
    .tic-dim-row span strong {
        font-size: 16px;
    }

    .form-input {
        font-size: 16px;
        padding: 7px 13px;
    }

    .tic-listing-overlay p {
        font-size: 12px;
    }

    .property-description,
    .section-title {
        font-size: 21px;
    }

    .spec-icon {
        width: 20px;
    }

    .specifications-grid {
        justify-content: space-between;
        gap: 25px;
    }

    .visit-icon {
        width: 35px;
    }

    .tic-listing-specs label,
    .tic-listing-dimensions h6,
    .tic-dim-row span {
        font-size: 14px;
    }

    .tic-related-projects {
        padding: 0 15px !important;
    }

    .boundary-item {
        display: flex;
        min-width: 100%;
    }

    .price-section {
        font-size: 30px;
    }

    .datetime-field {
        padding: 25px 10px;
        border-radius: 15px;
    }

    .form-title,
    .secondary-btn,
    .attachments-title,
    .file-name,
    .primary-btn {
        font-size: 20px;
    }

    .map-overlay {
        right: 25%;
    }

    .tooltip {
        position: absolute;
        right: 7%;
        top: 6%;
    }
}

@media (max-width:1200px) {
    .services-section {
        padding: 25px;
    }

    .achievements-section {
        padding: 0 25px;
    }

    .services-grid {
        justify-content: start;
        gap: 17px;
    }

    .property-sidebar {
        margin-left: 0;
    }

    .card-action {
        position: absolute;
        top: 13%;
    }

    .tic-about-section {
        padding: 0 25px;
    }

    .tic-about-logo-box {
        display: none;
    }

    .datetime-row {
        flex-wrap: wrap;
    }

    .tic-about-content-box {
        width: 100%;
        margin-right: 0px;
        text-align: center;
    }

    .tic-about-content-box .tic-about-title {
        text-align: center;
    }

    .tic-about-content-box .tic-about-description {
        font-size: 25px;
    }

    .tic-about-blur-decoration {
        top: -120px;
    }

    .location-icon {
        width: 20px;
        margin-bottom: 5px;
    }

    .tic-feature-main-container {
        flex-direction: column;
    }

    .tic-feature-image-side,
    .tic-feature-content-side {
        width: 100%;
    }

    .footer-svg {
        display: none;
    }

    .partners-track {
        gap: 50px;
    }

    .partner-logo {
        width: 80px;
    }

    .tic-feature-text {
        font-size: 30px;
        line-height: 40px;
    }

    .tic-feature-content-side {
        padding: 25px 20px;
        height: 510px;
    }

    .tic-feature-mouse-icon {
        left: unset;
    }

    .tic-feature-main-container {
        padding: 25px;
    }

    .tic-footer-col {
        margin-top: 10px;
    }

    .tic-footer-main-wrapper {
        margin-bottom: 0;
    }

    .tic-footer-container {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }

    .tic-feature-outer-wrapper {
        margin-top: 60px;
    }

    .tic-sector-main-title {
        font-size: 30px;
    }

    .property-title {
        font-size: 30px;
    }

    .logo-container.one {
        top: -17px;
        width: 180px;
    }

    .main-header.one {
        top: 15px;
    }

}


@media (max-width:500px) {
    .logo-container.one {
        top: -20px;
        width: 130px;
    }

    .main-header.one {
        top: 5px;
    }

    .header-actions.one {
        display: none;
    }

    .banar-svg-right,
    .spec-divider {
        display: none;
    }

    .achievements-title {
        font-size: 21px;
    }

    .stat-title {
        font-size: 18px;
    }

    .stat-number {
        font-size: 30px;
    }

    .area-label {
        color: #FFF;
        text-align: center;
        font-family: "Montserrat", sans-serif;
        font-size: 30px;
    }

    .area-value {
        font-size: 18px;
    }

    .tic-about-content-box .tic-about-description {
        font-size: 23px;
    }


    .partners-track {
        gap: 30px;
    }

    .partner-logo {
        width: 50px;
    }

    .tic-feature-text {
        font-size: 25px;
    }

    .tic-about-section {
        padding: 0 15px;
    }

    .tic-listing-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    }

    .projects-stat-card {
        max-height: 200px;
        gap: 20px;
    }

    .clients-stat-card {
        width: 100%;
        height: auto;
        min-height: 250px;
    }

    .tic-feature-content-side {
        padding: 30px 15px;
        gap: 20px;
        min-height: 350px;
    }

}


html[lang="ar"] .tic-footer-input-group input::placeholder {
    font-weight: 300;
}

/* Taya About Us V1 Block - Gradient Background with Image */
.taya-about-v1-section {
    position: relative;
    width: 100%;
    padding: 0;
    overflow: hidden;
}

@media (max-width: 768px) {
    .taya-about-v1-section {
        padding: 0;
    }

    .tic-feature-content-side {
        width: 100%;
        height: auto;
        padding: 40px 20px;
        gap: 30px;
        min-height: 400px;
    }
}

@media (max-width: 480px) {
    .taya-about-v1-section {
        padding: 0;
    }
}

.taya-about-v1-background {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    min-height: 500px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 80px 60px;
    position: relative;
    mix-blend-mode: multiply;
}

/* .taya-about-v1-background::before {
    content: "";
    position: absolute;
    inset: 0;

    background: linear-gradient(
        270deg,
        rgba(100, 78, 153, 0.65) 0%,
        rgba(82, 121, 237, 0.6) 40%,
        rgba(19, 120, 253, 0.55) 70.19%,
        rgba(148, 198, 124, 0.50) 100%
    );

    z-index: 1;
} */

.taya-about-v1-gradient-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(270deg, #644E99 10%, #415AA3 40%, #3B6DAE 70.19%, #94C67C 100%);
    z-index: 1;
    mix-blend-mode: multiply;
}


.taya-about-v1-svg-left {
    position: absolute;
    left: 0;
    top: 100%;
    transform: translateY(-50%);
    z-index: 2;
    opacity: 0.3;
    pointer-events: none;
}

.taya-about-v1-svg-left svg {
    width: 200px;
    height: auto;
}

.taya-about-v1-svg-right {
    position: absolute;
    right: 0;
    top: 100%;
    transform: translateY(-50%);
    z-index: 2;
    opacity: 0.3;
    pointer-events: none;
}

.taya-about-v1-svg-right svg {
    width: 300px;
    height: auto;
}


@media (max-width: 768px) {
    .taya-about-v1-background {
        min-height: 500px;
        padding: 40px 20px;
    }
    
    .taya-about-v1-svg-left svg {
        width: 120px;
    }
    
    .taya-about-v1-svg-right svg {
        width: 90px;
    }
}

@media (max-width: 480px) {
    .taya-about-v1-background {
        min-height: 400px;
        padding: 30px 15px;
    }
    
    .taya-about-v1-svg-left,
    .taya-about-v1-svg-right {
        display: none;
    }
}

.taya-about-v1-container {
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
    position: relative;
    z-index: 3;
}

.taya-about-v1-content {
    padding-top: 10rem;
    color: #FFFFFF;
    max-width: 1000px;
    width: 100%;
}

/* LTR: Text alignment left to right */
[dir="ltr"] .taya-about-v1-content {
    text-align: left;
}

/* RTL: Text alignment right to left */
[dir="rtl"] .taya-about-v1-content {
    text-align: right;
}

.taya-about-v1-title {
    font-family: "Montserrat", sans-serif;
    color: #FFFFFF;
    margin-bottom: 24px;
    font-size: 92px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

@media (max-width: 768px) {
    .taya-about-v1-title {
        font-size: 42px;
        margin-bottom: 24px;
    }
}

@media (max-width: 480px) {
    .taya-about-v1-title {
        font-size: 32px;
        margin-bottom: 20px;
    }
}

.taya-about-v1-description {
    font-family: "Montserrat", sans-serif;
    line-height: 1.6;
    color: #FFFFFF;
    width: 1043px;
    font-size: 26px;
    font-style: normal;
    font-weight: 300;
    line-height: 1.8;
    width: 100%;
}

/* LTR: Description margin */
[dir="ltr"] .taya-about-v1-description {
    margin: 0;
}

/* RTL: Description margin */
[dir="rtl"] .taya-about-v1-description {
    margin: 0 0 0 auto;
}

@media (max-width: 768px) {
    .taya-about-v1-background {
        padding: 60px 30px;
    }
    
    .taya-about-v1-container {
        padding: 0 30px;
    }
    
    .taya-about-v1-description {
        font-size: 18px;
        line-height: 1.5;
    }
}

@media (max-width: 480px) {
    .taya-about-v1-background {
        padding: 40px 20px;
    }
    
    .taya-about-v1-container {
        padding: 0 20px;
    }
    
    .taya-about-v1-description {
        font-size: 16px;
        line-height: 1.5;
    }
}

/* Taya About Us Cards Block */
.taya-about-cards-section {
    position: relative;
    width: 100%;
    padding: 80px 0;
    overflow: hidden;
}

.taya-about-cards-container {
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
    padding: 0 60px;
}

.taya-about-cards-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    width: 100%;
}

.taya-about-card {
    position: relative;
    padding: 30px;
    border-radius: 40px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    transition: all 0.3s ease;
    overflow: hidden;
}

.taya-about-card-light {
    background: #fff;
    border: 1px solid #fff;
}

.taya-about-card-light:hover {
    background: linear-gradient(135deg, #415AA3 0%, #3B6DAE 50%, #94C67C 100%);
}

.taya-about-card-light:hover::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      135deg,
      #1F6F8B 0%,
      #566FA3 40%,
      #63C3B4 75%,
      #A6E3DC 100%
    );
    z-index: 1;
}

.taya-about-card-light:hover > * {
    position: relative;
    z-index: 2;
}

.taya-about-card-gradient {
    background: linear-gradient(135deg, #415AA3 0%, #3B6DAE 50%, #94C67C 100%);
    position: relative;
}

.taya-about-card-gradient::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      135deg,
      #1F6F8B 0%,
      #566FA3 40%,
      #63C3B4 75%,
      #A6E3DC 100%
    );
    z-index: 1;
}

.taya-about-card-gradient > * {
    position: relative;
    z-index: 2;
}

.taya-about-card-icon {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.taya-about-card-light .taya-about-card-icon {
    background: #415AA3;
    transition: all 0.3s ease;
}

.taya-about-card-light:hover .taya-about-card-icon {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
}

.taya-about-card-gradient .taya-about-card-icon {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
}

.taya-about-card-light .card-icon {
    color: #FFFFFF;
}

.taya-about-card-gradient .card-icon {
    color: #FFFFFF;
}

.taya-about-card-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.taya-about-card-title {
    font-family: "Montserrat", sans-serif;
    margin: 0;
    font-size: 28px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;

}

.taya-about-card-light .taya-about-card-title {
    color: #28285D;
    transition: color 0.3s ease;
}

.taya-about-card-light:hover .taya-about-card-title {
    color: #FFFFFF;
}

.taya-about-card-gradient .taya-about-card-title {
    color: #FFFFFF;
}

.taya-about-card-description {
    font-family: "Montserrat", sans-serif;
    margin: 0;
    font-size: 22px;
    font-style: normal;
    font-weight: 400;
    line-height: 28px;
}

.taya-about-card-light .taya-about-card-description {
    color: #6B7280;
    transition: color 0.3s ease;
}

.taya-about-card-light:hover .taya-about-card-description {
    color: #FFFFFF;
}

.taya-about-card-gradient .taya-about-card-description {
    color: #FFFFFF;
}

@media (max-width: 1024px) {
    .taya-about-cards-container {
        padding: 0 40px;
    }
    
    .taya-about-card {
        padding: 40px 30px;
    }
    
    .taya-about-card-title {
        font-size: 28px;
    }
    
    .taya-about-card-description {
        font-size: 16px;
    }
}

@media (max-width: 768px) {
    .taya-about-cards-section {
        padding: 60px 0;
    }
    
    .taya-about-cards-container {
        padding: 0 30px;
    }
    
    .taya-about-cards-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .taya-about-card {
        padding: 35px 25px;
    }
    
    .taya-about-card-icon {
        width: 70px;
        height: 70px;
    }
    
    .taya-about-card-title {
        font-size: 24px;
    }
    
    .taya-about-card-description {
        font-size: 15px;
    }
}

@media (max-width: 480px) {
    .taya-about-cards-section {
        padding: 40px 0;
    }
    
    .taya-about-cards-container {
        padding: 0 20px;
    }
    
    .taya-about-card {
        padding: 30px 20px;
    }
    
    .taya-about-card-icon {
        width: 60px;
        height: 60px;
    }
    
    .taya-about-card-title {
        font-size: 22px;
    }
    
    .taya-about-card-description {
        font-size: 14px;
    }
}

/* Taya What We Stand For Block */
.taya-what-we-stand-for-section {
    position: relative;
    width: 100%;
    padding: 80px 0;
    background: #F8F9FA;
    overflow: hidden;
}

.taya-what-we-stand-for-container {
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
    padding: 0 60px;
}

.taya-what-we-stand-for-title {
    font-family: "Montserrat", sans-serif;
    color: #28285D;
    margin: 0 0 60px 0;
    text-align: center;
    font-size: 42px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.taya-what-we-stand-for-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    width: 100%;
}

.taya-what-we-stand-for-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 20px;
    padding: 40px 30px;
    background: #FFFFFF;
    border-radius: 30px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.taya-what-we-stand-for-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.taya-what-we-stand-for-icon {
    border-radius: 50%;
    background: #415AA3;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 16px;
    gap: 10px;
}

.taya-what-we-stand-for-icon .item-icon {
    color: #FFFFFF;
}

.taya-what-we-stand-for-item-title {
    font-family: "Montserrat", sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 28px;
    line-height: 1.3;
    color: #28285D;
    margin: 0;
}

.taya-what-we-stand-for-item-description {
    font-family: "Montserrat", sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 22px;
    line-height: 1.6;
    color: #6B7280;
    margin: 0;
}

@media (max-width: 1024px) {
    .taya-what-we-stand-for-container {
        padding: 0 40px;
    }
    
    .taya-what-we-stand-for-title {
        font-size: 40px;
        margin-bottom: 50px;
    }
    
    .taya-what-we-stand-for-grid {
        gap: 30px;
    }
    
    .taya-what-we-stand-for-item {
        padding: 35px 25px;
    }
    
    .taya-what-we-stand-for-item-title {
        font-size: 22px;
    }
    
    .taya-what-we-stand-for-item-description {
        font-size: 15px;
    }
}

@media (max-width: 768px) {
    .taya-what-we-stand-for-section {
        padding: 60px 0;
    }
    
    .taya-what-we-stand-for-container {
        padding: 0 30px;
    }
    
    .taya-what-we-stand-for-title {
        font-size: 32px;
        margin-bottom: 40px;
    }
    
    .taya-what-we-stand-for-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }
    
    .taya-what-we-stand-for-item {
        padding: 30px 20px;
    }
    
    .taya-what-we-stand-for-icon {
        width: 80px;
        height: 80px;
    }
    
    .taya-what-we-stand-for-item-title {
        font-size: 20px;
    }
    
    .taya-what-we-stand-for-item-description {
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .taya-what-we-stand-for-section {
        padding: 40px 0;
    }
    
    .taya-what-we-stand-for-container {
        padding: 0 20px;
    }
    
    .taya-what-we-stand-for-title {
        font-size: 28px;
        margin-bottom: 30px;
    }
    
    .taya-what-we-stand-for-item {
        padding: 25px 15px;
    }
    
    .taya-what-we-stand-for-icon {
        width: 70px;
        height: 70px;
    }
    
    .taya-what-we-stand-for-item-title {
        font-size: 18px;
    }
    
    .taya-what-we-stand-for-item-description {
        font-size: 13px;
    }
}

/* Taya Why Choose Us Block */
.taya-why-choose-us-section {
    position: relative;
    width: 100%;
    padding: 80px 0;
    background: #F7F7F7;
    overflow: hidden;
}

.taya-why-choose-us-container {
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
}

.taya-why-choose-us-title {
    font-family: "Montserrat", sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 42px;
    line-height:normal;
    color: #28285D;
}

.taya-why-choose-us-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: start;
}

/* Left Side: Services List */
.taya-why-choose-us-left {
    display: flex;
    flex-direction: column;
    padding-top: 60px;
}

.taya-why-choose-us-services {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.taya-why-choose-us-service-item {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.service-check-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    margin-top: 4px;
}

.service-content {
    flex: 1;
}

.service-title {
    font-family: "Montserrat", sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 24px;
    line-height: 1.4;
    color: #28285D;
    margin: 0 0 8px 0;
}

.service-description {
    font-family: "Montserrat", sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 22px;
    line-height: 1.6;
    color: #6B7280;
    margin: 0;
}

/* Right Side: Image and Features */
.taya-why-choose-us-right {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.taya-why-choose-us-image-container {
    position: relative;
    width: 100%;
    max-width: 500px;
    transform: rotate(5deg);
}

[dir="ltr"] .taya-why-choose-us-image-container {
    transform: rotate(-5deg);
}

.taya-why-choose-us-gradient-square {
    position: absolute;
    width: 100%;
    aspect-ratio: 1;
    background: linear-gradient(135deg, #94C67C 0%, #415AA3 50%, #644E99 100%);
    border-radius: 50px;
    bottom: -30px;
    left: 0;
    z-index: 1;
    transform: rotate(-10deg);
}

[dir="ltr"] .taya-why-choose-us-gradient-square {
    transform: rotate(10deg);
}

.taya-why-choose-us-image-wrapper {
    position: relative;
    width: 92%;
    aspect-ratio: 1;
    border-radius: 50px;
    overflow: visible;
    z-index: 2;
    margin-right: 30px;
}

.taya-why-choose-us-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50px;
    display: block;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.taya-why-choose-us-features {
    position: absolute;
    bottom: 30px;
    left: 30px;
    right: 30px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.taya-why-choose-us-feature-badge {
    background: #FFFFFF;
    border-radius: 50px;
    padding: 12px 15px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    cursor: pointer;
}

.taya-why-choose-us-feature-badge:first-child {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    background: linear-gradient(90deg, #006B9C 40%, #FFFFFF 140%);
}

.taya-why-choose-us-feature-badge:first-child .feature-title {
    color: #28285D;
}

.taya-why-choose-us-feature-badge:first-child .feature-icon {
    background: #FFFFFF;
}

.taya-why-choose-us-feature-badge:first-child .badge-icon {
    color: #006B9C;
}



.feature-icon {
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 6px;
    background: #F5F5F5;
    border-radius: 50%;
}

.badge-icon {
    color: black;
    transition: color 0.3s ease;
}

.feature-title {
    font-family: "Montserrat", sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 1.4;
    color: #28285D;
    margin: 0;
    white-space: nowrap;
    transition: color 0.3s ease;
}

@media (max-width: 1024px) {
    .taya-why-choose-us-container {
        padding: 0 40px;
    }
    
    .taya-why-choose-us-title {
        font-size: 40px;
        margin-bottom: 40px;
    }
    
    .taya-why-choose-us-content {
        gap: 40px;
    }
    
    .service-title {
        font-size: 18px;
    }
    
    .service-description {
        font-size: 15px;
    }
    
    .taya-why-choose-us-features {
        bottom: 20px;
        left: 20px;
        right: 20px;
        gap: 10px;
    }
    
    .taya-why-choose-us-feature-badge {
        padding: 10px 16px;
    }
    
    .feature-title {
        font-size: 13px;
    }
}

@media (max-width: 768px) {
    .taya-why-choose-us-section {
        padding: 60px 0;
    }
    
    .taya-why-choose-us-container {
        padding: 0 30px;
    }
    
    .taya-why-choose-us-title {
        font-size: 32px;
        margin-bottom: 30px;
    }
    
    .taya-why-choose-us-content {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .taya-why-choose-us-services {
        gap: 20px;
    }
    
    .service-title {
        font-size: 17px;
    }
    
    .service-description {
        font-size: 14px;
    }
    
    .taya-why-choose-us-features {
        bottom: 15px;
        left: 15px;
        right: 15px;
    }
}

@media (max-width: 480px) {
    .taya-why-choose-us-section {
        padding: 40px 0;
    }
    
    .taya-why-choose-us-container {
        padding: 0 20px;
    }
    
    .taya-why-choose-us-title {
        font-size: 28px;
        margin-bottom: 25px;
    }
    
    .taya-why-choose-us-content {
        gap: 30px;
    }
    
    .taya-why-choose-us-services {
        gap: 18px;
    }
    
    .service-title {
        font-size: 16px;
    }
    
    .service-description {
        font-size: 13px;
    }
    
    .taya-why-choose-us-image-wrapper {
        border-radius: 20px;
    }
    
    .taya-why-choose-us-image {
        border-radius: 20px;
    }
    
    .taya-why-choose-us-features {
        grid-template-columns: 1fr;
        bottom: 12px;
        left: 12px;
        right: 12px;
        gap: 8px;
    }
    
    .taya-why-choose-us-feature-badge {
        padding: 8px 14px;
    }
    
    .feature-icon {
        width: 20px;
        height: 20px;
    }
    
    .feature-title {
        font-size: 12px;
    }
}

/* ============================================
   Taya About Us Banner Section Styles
   ============================================ */

.taya-about-banner-section {
    padding: 100px 0;
    overflow: hidden;
    background-color: #F7F7F7;
}

.taya-about-banner-container {
    max-width: 1320px;
    height: 333px;
    margin: 0 auto;
    padding: 34px;
    background: linear-gradient(90deg, #38A1A8 0%, #5EC2C9 100%);
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    position: relative;
    overflow-x: clip;
}

.taya-about-banner-content {
    flex: 1;
    max-width: 636px;
    z-index: 2;
}

.taya-about-banner-title {
    font-family: 'Montserrat-English', 'Montserrat-Arabic', sans-serif;
    margin-bottom: 14px;
    color: #FFF;
    font-size: 35px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

[dir="rtl"] .taya-about-banner-title {
    font-family: 'Montserrat-Arabic', 'Montserrat-English', sans-serif;
}

.taya-about-banner-description {
    font-family: 'Montserrat-English', 'Montserrat-Arabic', sans-serif;
    color: #FFFFFF;
    margin-bottom: 20px;
    font-size: 22px;
    font-style: normal;
    font-weight: 300;
    line-height: 32px;
}

[dir="rtl"] .taya-about-banner-description {
    font-family: 'Montserrat-Arabic', 'Montserrat-English', sans-serif;
}

.taya-about-banner-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: #425CA6;
    color: #FFFFFF;
    padding: 18px 24px;
    border-radius: 100px;
    font-family: 'Montserrat-English', 'Montserrat-Arabic', sans-serif;
    font-size: 20px;
    font-weight: 400;
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
}

[dir="rtl"] .taya-about-banner-button {
    font-family: 'Montserrat-Arabic', 'Montserrat-English', sans-serif;
}

.taya-about-banner-button:hover {
    background-color: #354a8a;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(66, 92, 166, 0.3);
}

.taya-about-banner-button .button-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
}

.taya-about-banner-button .button-icon svg {
    width: 24px;
    height: 24px;
    transform: rotate(180deg) scaleY(-1);
}

[dir="rtl"] .taya-about-banner-button .button-icon svg {
    transform: rotate(0deg) scaleY(1);
}

.taya-about-banner-image-wrapper {
    position: absolute;
    left: -50px;
    top: -102px;
    width: 601px;
    height: 435px;
    z-index: 3;
}

[dir="ltr"] .taya-about-banner-image-wrapper {
    right: -50px;
    left: auto;
}

.taya-about-banner-image-container {
    position: relative;
    width: 100%;
    height: 100%;
}

.taya-about-banner-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
}

.taya-about-banner-svg-decoration {
    position: absolute;
    top: 0%;
    left: 20%;
    width: 503px;
    height: 570px;
    pointer-events: none;
    opacity: 0.3;
    z-index: 1;
    transform: scaleX(-1);
}

[dir="ltr"] .taya-about-banner-svg-decoration {
    left: auto;
    right: 20%;
    transform: scaleX(1);
}

.taya-about-banner-svg-decoration svg {
    width: 100%;
    height: 100%;
}

/* Responsive Styles */
@media (max-width: 1200px) {
    .taya-about-banner-container {
        padding: 30px;
        gap: 30px;
        height: 300px;
    }
    
    .taya-about-banner-title {
        font-size: 30px;
    }
    
    .taya-about-banner-description {
        font-size: 19px;
        line-height: 28px;
    }
    
    .taya-about-banner-button {
        font-size: 18px;
        padding: 16px 22px;
    }
    
    .taya-about-banner-image-wrapper {
        width: 500px;
        height: 380px;
        top: -80px;
    }
}

@media (max-width: 992px) {
    .taya-about-banner-section {
        padding: 60px 0;
    }
    
    .taya-about-banner-container {
        flex-direction: column;
        padding: 40px 30px;
        padding-top: 280px;
        gap: 40px;
        height: auto;
        min-height: 400px;
    }
    
    .taya-about-banner-content {
        max-width: 100%;
        text-align: center;
    }
    
    .taya-about-banner-image-wrapper {
        position: absolute;
        top: -80px;
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
        max-width: 500px;
        height: 350px;
    }
    
    .taya-about-banner-button {
        margin: 0 auto;
    }
}

@media (max-width: 768px) {
    .taya-about-banner-section {
        padding: 50px 0;
    }
    
    .taya-about-banner-container {
        padding: 30px 20px;
        padding-top: 240px;
        border-radius: 30px;
        gap: 30px;
    }
    
    .taya-about-banner-title {
        font-size: 26px;
        margin-bottom: 12px;
    }
    
    .taya-about-banner-description {
        font-size: 17px;
        line-height: 26px;
        margin-bottom: 18px;
    }
    
    .taya-about-banner-button {
        font-size: 17px;
        padding: 14px 20px;
    }
    
    .taya-about-banner-image-wrapper {
        max-width: 400px;
        height: 300px;
        top: -60px;
    }
    
    .taya-about-banner-svg-decoration {
        width: 400px;
        height: 450px;
    }
}

@media (max-width: 480px) {
    .taya-about-banner-section {
        padding: 40px 0;
    }
    
    .taya-about-banner-container {
        padding: 25px 15px;
        padding-top: 200px;
        border-radius: 25px;
        gap: 25px;
    }
    
    .taya-about-banner-title {
        font-size: 22px;
        margin-bottom: 10px;
    }
    
    .taya-about-banner-description {
        font-size: 15px;
        line-height: 24px;
        margin-bottom: 16px;
    }
    
    .taya-about-banner-button {
        font-size: 16px;
        padding: 12px 18px;
    }
    
    .taya-about-banner-button .button-icon {
        width: 20px;
        height: 20px;
    }
    
    .taya-about-banner-button .button-icon svg {
        width: 20px;
        height: 20px;
    }
    
    .taya-about-banner-image-wrapper {
        max-width: 320px;
        height: 250px;
        top: -50px;
    }
    
    .taya-about-banner-image {
        border-radius: 15px;
    }
    
    .taya-about-banner-svg-decoration {
        width: 300px;
        height: 350px;
        opacity: 0.25;
    }

    html[lang="en"] .top-stats-container .stat-icon {
        left: -70px;
    }
}

/* ============================================
   V2 Timeline Block Styles (RTL - Arabic)
   ============================================ */

.v2-timeline-section {
    background: #F7F7F7;
    overflow: hidden;
    direction: rtl;
    padding-bottom:5rem ;
}

.v2-timeline-main-title {
    font-size: 42px;
    font-weight: 500;
    color: #28285D;
    margin-bottom: 0;
    font-family: 'Montserrat-English', 'Montserrat-Arabic', sans-serif;
}

.v2-timeline-horizontal-wrapper {
    display: flex;
    gap: 30px;
    overflow-x: auto;
    overflow-y: visible;
    padding: 0 4rem;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    direction: ltr;
    position: relative;
}

.v2-timeline-horizontal-wrapper[data-total-items]::-webkit-scrollbar {
    display: none;
}

.v2-timeline-card {
    flex: 0 0 250px;
    min-width: 200px;
    transition: transform 0.3s ease;
}

.v2-timeline-card-inner {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.v2-timeline-card.title-above .v2-timeline-card-inner {
    flex-direction: column;
}

.v2-timeline-card.title-below .v2-timeline-card-inner {
    flex-direction: column;
}

.v2-timeline-content-top {
    order: 1;
    padding: 0 10px 20px;
    text-align: right;
}

.v2-timeline-content-bottom {
    order: 3;
    padding: 20px 10px 0;
    text-align: right;
}

.v2-timeline-card.title-above .v2-timeline-image-wrapper {
    order: 2;
}

.v2-timeline-card.title-below .v2-timeline-image-wrapper {
    order: 2;
}

.v2-timeline-image-wrapper {
    position: relative;
    width: 100%;
    height: 380px;
    overflow: hidden;
    cursor: pointer;
    border-radius: 30px;
}

.v2-timeline-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.v2-timeline-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    transition: all 0.4s ease;
    z-index: 1;
}

.v2-timeline-gradient {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 50%;
    background: linear-gradient(to bottom, transparent 0%, #425CA6E5 100%);
    z-index: 2;
    pointer-events: none;
}

.v2-timeline-year {
    position: absolute;
    bottom: 20px;
    right: 20px;
    font-size: 48px;
    font-weight: 700;
    color: #ffffff;
    z-index: 3;
    text-shadow: 2px 2px 8px rgba(0,0,0,0.3);
    font-family: 'Montserrat-English', 'Montserrat-Arabic', sans-serif;
    opacity: 1;
    transition: opacity 0.3s ease;
}

.v2-timeline-description {
    position: absolute;
    top: 20px;
    right: 20px;
    left: 20px;
    bottom: 20px;
    color: #ffffff;
    opacity: 0;
    transform: translateY(100%);
    transition: all 0.5s ease;
    z-index: 2;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.6;
    text-align: right;
    overflow: hidden;
    display: flex;
    align-items: flex-start;
}

.v2-timeline-description p {
    margin: 0;
    color: #ffffff;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 8;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
}

.v2-timeline-title {
    font-size: 32px;
    font-weight: 500;
    color: #28285D;
    margin: 0;
    line-height: 1.4;
    font-family: 'Montserrat-English', 'Montserrat-Arabic', sans-serif;
}

.v2-timeline-card:hover .v2-timeline-image {
    transform: scale(1.05);
}

.v2-timeline-card:hover .v2-timeline-overlay {
    background: #425CA6E5; 
    opacity: 0.9;
}

.v2-timeline-card:hover .v2-timeline-year {
    opacity: 0;
}

.v2-timeline-card:hover .v2-timeline-description {
    opacity: 1;
    transform: translateY(0);
}

.v2-timeline-deco {
    position: absolute;
    z-index: 0;
    opacity: 0.6;
    animation: float 6s ease-in-out infinite;
}

.v2-timeline-deco-1 {
    top: 10%;
    right: 5%;
    width: 180px;
    height: auto;
}

.v2-timeline-deco-2 {
    bottom: 5%;
    left: 8%;
    width: 120px;
    height: auto;
    animation-delay: 2s;
}

@keyframes float {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }
    50% {
        transform: translateY(-20px) rotate(5deg);
    }
}

@media (max-width: 1200px) {
    .v2-timeline-main-title {
        font-size: 36px;
    }
    
    .v2-timeline-card {
        flex: 0 0 230px;
        min-width: 200px;
    }
    
    .v2-timeline-image-wrapper {
        height: 350px;
    }
}

@media (max-width: 992px) {
    .v2-timeline-main-title {
        font-size: 32px;
    }
    
    .v2-timeline-card {
        flex: 0 0 240px;
        min-width: 240px;
    }
    
    .v2-timeline-image-wrapper {
        height: 320px;
    }
    
    .v2-timeline-year {
        font-size: 40px;
    }
}

@media (max-width: 768px) {
    .v2-timeline-main-title {
        font-size: 28px;
    }
    
    .v2-timeline-horizontal-wrapper {
        gap: 20px;
    }
    
    .v2-timeline-card {
        flex: 0 0 220px;
        min-width: 220px;
    }
    
    .v2-timeline-image-wrapper {
        height: 300px;
    }
    
    .v2-timeline-year {
        font-size: 36px;
        bottom: 15px;
        right: 15px;
    }
    
    .v2-timeline-description {
        font-size: 13px;
        bottom: 15px;
        right: 15px;
        left: 15px;
    }
    
    .v2-timeline-title {
        font-size: 16px;
    }
    
}


.ti-arrow-right:before {
    font-family: 'tabler-icons' !important;
}

.fa-solid,
.fa-solid::before,
.fa,
.fas ,
.fas::before {
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 900 !important;
}