/* =========================================
   ONEHUB IT
   Main Website Styles
========================================= */


/* =========================================
   BRAND COLORS
========================================= */

:root {

    --primary-blue: #1752A4;

    --secondary-blue: #3869B2;

    --dark-navy: #102F4E;

    --accent-orange: #F47A20;

    --light-blue: #F5F8FC;

    --white: #FFFFFF;

    --text-dark: #102F4E;

    --text-muted: #64748B;

}


/* =========================================
   GLOBAL
========================================= */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {

    margin: 0;

    color: var(--text-dark);

    background-color: var(--white);

    font-family: 'Poppins', 'Cairo', sans-serif;

}


/* Arabic Font */

html[lang="ar"] body {

    font-family: 'Cairo', 'Poppins', sans-serif;

}


/* =========================================
   NAVBAR
========================================= */

.navbar {

    min-height: 82px;

    background-color: var(--white);

    border-bottom: 1px solid rgba(16, 47, 78, 0.08);

    box-shadow: 0 3px 18px rgba(16, 47, 78, 0.06);

    z-index: 1000;

}


/* =========================================
   LOGO
========================================= */

.navbar-brand {

    display: flex;

    align-items: center;

    padding: 0;

}

.logo {

    width: 145px;

    height: auto;

    display: block;

    transition: transform 0.3s ease;

}

.logo:hover {

    transform: scale(1.03);

}


/* =========================================
   NAVIGATION LINKS
========================================= */

.navbar-nav {

    align-items: center;

    gap: 4px;

}

.nav-link {

    position: relative;

    color: var(--dark-navy) !important;

    font-size: 15px;

    font-weight: 700;

    padding: 10px 14px !important;

    transition:
        color 0.3s ease,
        background-color 0.3s ease;

}


/* Hover */

.nav-link:hover {

    color: var(--primary-blue) !important;

}


/* Animated underline */

.nav-link::after {

    content: "";

    position: absolute;

    bottom: 3px;

    left: 14px;

    right: 14px;

    height: 2px;

    background-color: var(--accent-orange);

    transform: scaleX(0);

    transform-origin: center;

    transition: transform 0.3s ease;

}

.nav-link:hover::after,
.nav-link.active::after {

    transform: scaleX(1);

}


/* Active link */

.nav-link.active {

    color: var(--primary-blue) !important;

    font-weight: 700;

}


/* =========================================
   LANGUAGE SWITCHER
========================================= */

.language-switcher {

    display: flex;

    align-items: center;

    gap: 3px;

    padding: 4px;

    background-color: var(--light-blue);

    border: 1px solid rgba(23, 82, 164, 0.12);

    border-radius: 30px;

}


/* Language buttons */

.language-switcher a {

    display: flex;

    align-items: center;

    justify-content: center;

    min-width: 45px;

    padding: 6px 12px;

    border-radius: 22px;

    color: var(--dark-navy);

    text-decoration: none;

    font-size: 13px;

    font-weight: 600;

    transition:
        background-color 0.3s ease,
        color 0.3s ease;

}


/* Active language */

.language-switcher a.active {

    color: var(--white);

    background-color: var(--primary-blue);

}


/* Hover */

.language-switcher a:not(.active):hover {

    color: var(--primary-blue);

    background-color: rgba(23, 82, 164, 0.08);

}


/* =========================================
   MOBILE TOGGLE
========================================= */

.navbar-toggler {

    border: 1px solid rgba(23, 82, 164, 0.2);

    border-radius: 8px;

    padding: 7px 10px;

}

.navbar-toggler:focus {

    box-shadow: 0 0 0 3px rgba(23, 82, 164, 0.12);

}


/* =========================================
   HERO SECTION
========================================= */

.hero-section {

    min-height: calc(100vh - 82px);

    display: flex;

    align-items: center;

    background:

        radial-gradient(circle at 85% 20%,
            rgba(56, 105, 178, 0.12),
            transparent 30%),

        radial-gradient(circle at 15% 80%,
            rgba(244, 122, 32, 0.08),
            transparent 25%),

        var(--light-blue);

}


/* Hero content */

.hero-content {

    max-width: 750px;

    margin: auto;

    text-align: center;

    padding: 80px 20px;

}


/* Badge */

.hero-badge {

    display: inline-block;

    margin-bottom: 20px;

    padding: 7px 18px;

    border-radius: 30px;

    color: var(--primary-blue);

    background-color: rgba(23, 82, 164, 0.08);

    border: 1px solid rgba(23, 82, 164, 0.12);

    font-size: 14px;

    font-weight: 600;

}


/* Hero heading */

.hero-content h1 {

    margin-bottom: 20px;

    color: var(--dark-navy);

    font-size: clamp(40px, 6vw, 70px);

    font-weight: 700;

    line-height: 1.15;

}


/* Hero paragraph */

.hero-content p {

    margin-bottom: 30px;

    color: var(--text-muted);

    font-size: 18px;

    line-height: 1.8;

}


/* =========================================
   PRIMARY BUTTON
========================================= */

.btn-primary-custom {

    padding: 12px 28px;

    border: none;

    border-radius: 8px;

    color: var(--white);

    background-color: var(--primary-blue);

    font-weight: 600;

    box-shadow: 0 8px 20px rgba(23, 82, 164, 0.2);

    transition:
        background-color 0.3s ease,
        transform 0.3s ease,
        box-shadow 0.3s ease;

}

.btn-primary-custom:hover {

    color: var(--white);

    background-color: var(--dark-navy);

    transform: translateY(-2px);

    box-shadow: 0 10px 25px rgba(16, 47, 78, 0.25);

}


/* =========================================
   RTL SUPPORT
========================================= */

html[dir="rtl"] .nav-link::after {

    transform-origin: center;

}

html[dir="rtl"] .navbar-nav {

    font-family: 'Cairo', sans-serif;

}

html[dir="rtl"] .language-switcher {

    font-family: 'Cairo', sans-serif;

}


/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 991.98px) {

    .navbar {

        min-height: 72px;

    }

    .logo {

        width: 125px;

    }

    .navbar-collapse {

        padding: 20px 0;

    }

    .navbar-nav {

        align-items: stretch;

        gap: 2px;

        margin-bottom: 15px !important;

    }

    .nav-link {

        padding: 11px 15px !important;

        border-radius: 6px;

    }

    .nav-link:hover {

        background-color: var(--light-blue);

    }

    .nav-link::after {

        display: none;

    }

    .language-switcher {

        width: fit-content;

        margin-inline: auto;

    }

}


/* =========================================
   SMALL DEVICES
========================================= */

@media (max-width: 575.98px) {

    .logo {

        width: 115px;

    }

    .hero-content {

        padding: 60px 15px;

    }

    .hero-content h1 {

        font-size: 40px;

    }

    .hero-content p {

        font-size: 16px;

    }

}

















/* =========================================
   HERO SLIDER  
========================================= */


/* =========================================
   SLIDER WRAPPER
========================================= */

.hero-slider {
    position: relative;
    overflow: hidden;
    background: linear-gradient(120deg, #1254a4 0%, #087fd1 55%, #00a1e8 100%);
}


/* =========================================
   SLIDE  (~75 % of original viewport height)
========================================= */

.hero-slide {
    min-height: calc(75vh - 62px);
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
}


/* =========================================
   SLIDE BACKGROUND AND THEMES
========================================= */

.hero-slide::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, rgba(9, 36, 77, 0.14), rgba(0, 0, 0, 0.04));
    pointer-events: none;
    z-index: 0;
}

.hero-slide-background {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: 0.13;
    pointer-events: none;
    z-index: 0;
}

.hero-theme-1 {
    background: linear-gradient(120deg, #1254a4 0%, #087fd1 55%, #00a1e8 100%);
}

.hero-theme-2 {
    background: linear-gradient(120deg, #123f83 0%, #1769ac 58%, #178fc1 100%);
}

.hero-theme-3 {
    background: linear-gradient(120deg, #102f4e 0%, #1752a4 56%, #087fd1 100%);
}

.hero-theme-4 {
    background: linear-gradient(120deg, #173c69 0%, #176ca5 56%, #1398b9 100%);
}

.hero-theme-5 {
    background: linear-gradient(120deg, #112e63 0%, #2855a0 56%, #2586be 100%);
}

/* Decorative circle — keeps its z-index above bg but below content */
.hero-slide::after {
    content: "";
    position: absolute;
    width: 140px;
    height: 140px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 30px;
    bottom: -60px;
    left: 5%;
    transform: rotate(25deg);
    z-index: 0;
}


/* =========================================
   LEFT TEXT BLOCK
========================================= */

.hero-text {
    position: relative;
    z-index: 2;
    padding: 40px 20px 50px 0;
}

.hero-label {
    display: inline-block;
    padding: 7px 17px;
    margin-bottom: 16px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 30px;
    color: white;
    font-size: 14px;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.08);
}

.hero-text h1 {
    margin: 0 0 18px;
    color: white;
    font-size: clamp(34px, 4vw, 56px);
    line-height: 1.12;
    font-weight: 700;
    letter-spacing: -1px;
}

.hero-text h1 span {
    color: #ffbd25;
}

.hero-text p {
    max-width: 520px;
    margin-bottom: 20px;
    color: rgba(255, 255, 255, 0.82);
    font-size: 16px;
    line-height: 1.8;
}


/* =========================================
   FEATURE PILLS
========================================= */

.hero-features {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 22px;
}

.hero-features span {
    display: inline-flex;
    align-items: center;
    padding: 7px 13px;
    border-radius: 30px;
    color: white;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.25);
    font-size: 13px;
    backdrop-filter: blur(5px);
}


/* =========================================
   HERO BUTTON
========================================= */

.hero-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 11px 20px;
    border-radius: 8px;
    color: #102f4e;
    background: #ffbd25;
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
}

.hero-btn span {
    font-size: 20px;
    line-height: 1;
}

.hero-btn:hover {
    color: #102f4e;
    background: #ffffff;
    transform: translateY(-3px);
}


/* =========================================
   RIGHT VISUAL WRAPPER
========================================= */

.hero-visual {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px 0;
}


/* =========================================
   PHOTO FRAME
   Square, rounded corners, clean — no overlay.
========================================= */

.visual-photo {
    width: 340px;
    height: 340px;
    border-radius: 22px;
    overflow: hidden;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.30),
        0 0 0 4px rgba(255, 255, 255, 0.10);
    /* subtle white border ring */
}

.visual-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}


/* =========================================
   CAROUSEL CONTROLS
========================================= */

.carousel-control-prev,
.carousel-control-next {
    width: 7%;
    z-index: 5;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    width: 36px;
    height: 36px;
    padding: 8px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.15);
    background-size: 45%;
    backdrop-filter: blur(5px);
}

.carousel-indicators {
    margin-bottom: 20px;
}

.carousel-indicators button {
    width: 28px;
    height: 4px;
    margin: 0 3px;
    border: 0;
    border-radius: 5px;
    background-color: rgba(255, 255, 255, 0.5);
}

.carousel-indicators button.active {
    width: 42px;
    background-color: #ffbd25;
}


/* =========================================
   ENTRANCE ANIMATIONS
   JS adds .anim-in to trigger each.
========================================= */

/* Left text elements — slide up + fade */
.animate-label,
.animate-title,
.animate-para,
.animate-features,
.animate-btn {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.55s ease, transform 0.55s ease;
}

/* Photo — scale up from slightly smaller + fade */
.animate-photo {
    opacity: 0;
    transform: scale(0.88);
    transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.34, 1.3, 0.64, 1);
}

/* Active state */
.animate-label.anim-in,
.animate-title.anim-in,
.animate-para.anim-in,
.animate-features.anim-in,
.animate-btn.anim-in {
    opacity: 1;
    transform: translateY(0);
}

.animate-photo.anim-in {
    opacity: 1;
    transform: scale(1);
}

/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {

    .animate-label,
    .animate-title,
    .animate-para,
    .animate-features,
    .animate-btn,
    .animate-photo {
        opacity: 1;
        transform: none;
        transition: none;
    }
}


/* =========================================
   RTL
========================================= */

html[dir="rtl"] .hero-text {
    padding: 40px 0 50px 20px;
}

html[dir="rtl"] .hero-text h1 {
    letter-spacing: 0;
}

html[dir="rtl"] .hero-features {
    direction: rtl;
}

html[dir="rtl"] .hero-btn span {
    transform: rotate(180deg);
}


/* =========================================
   RESPONSIVE  —  TABLET
========================================= */

@media (max-width: 991.98px) {

    .hero-slide {
        min-height: auto;
    }

    .hero-text {
        text-align: center;
        padding: 50px 20px 25px;
    }

    html[dir="rtl"] .hero-text {
        padding: 50px 20px 25px;
    }

    .hero-text p {
        margin-left: auto;
        margin-right: auto;
    }

    .hero-features {
        justify-content: center;
    }

    .hero-visual {
        padding: 20px 0 30px;
    }

    .visual-photo {
        width: 280px;
        height: 280px;
    }

    .carousel-control-prev,
    .carousel-control-next {
        width: 5%;
    }
}


/* =========================================
   RESPONSIVE  —  MOBILE
========================================= */

@media (max-width: 575.98px) {

    .hero-text {
        padding-top: 40px;
    }

    .hero-text h1 {
        font-size: 32px;
    }

    .hero-text p {
        font-size: 14px;
    }

    .hero-features {
        gap: 6px;
    }

    .hero-features span {
        font-size: 11px;
        padding: 6px 10px;
    }

    .hero-visual {
        padding: 12px 0 24px;
    }

    .visual-photo {
        width: 220px;
        height: 220px;
        border-radius: 16px;
    }

    .carousel-control-prev,
    .carousel-control-next {
        display: none;
    }

    .carousel-indicators {
        margin-bottom: 12px;
    }
}














/* =========================================
   ABOUT ONEHUB IT
========================================= */

.about-onehub {

    position: relative;

    padding: 100px 0;

    overflow: hidden;

    background-color: var(--white);

}


/* =========================================
   ABOUT CONTENT
========================================= */

.about-content {

    max-width: 620px;

}


/* Small label */

.about-label {

    display: inline-block;

    margin-bottom: 16px;

    padding: 7px 17px;

    border-radius: 30px;

    color: var(--primary-blue);

    background-color: rgba(23, 82, 164, 0.08);

    border: 1px solid rgba(23, 82, 164, 0.12);

    font-size: 14px;

    font-weight: 700;

}


/* Heading */

.about-title {

    margin-bottom: 22px;

    color: var(--dark-navy);

    font-size: clamp(32px, 4vw, 48px);

    font-weight: 700;

    line-height: 1.2;

}


/* Paragraph */

.about-text {

    margin-bottom: 16px;

    color: var(--text-muted);

    font-size: 16px;

    line-height: 1.9;

}


/* =========================================
   ABOUT LINK
========================================= */

.about-link {

    display: inline-flex;

    align-items: center;

    gap: 12px;

    margin-top: 10px;

    padding: 11px 20px;

    border-radius: 8px;

    color: var(--white);

    background-color: var(--primary-blue);

    text-decoration: none;

    font-size: 14px;

    font-weight: 700;

    box-shadow: 0 8px 20px rgba(23, 82, 164, 0.18);

    transition:
        background-color 0.3s ease,
        transform 0.3s ease,
        box-shadow 0.3s ease;

}

.about-link span {

    font-size: 20px;

    line-height: 1;

    transition: transform 0.3s ease;

}

.about-link:hover {

    color: var(--white);

    background-color: var(--dark-navy);

    transform: translateY(-3px);

    box-shadow: 0 12px 25px rgba(16, 47, 78, 0.22);

}

.about-link:hover span {

    transform: translateX(4px);

}


/* =========================================
   LOGO AREA
========================================= */

.about-logo-wrapper {

    position: relative;

    min-height: 390px;

    display: flex;

    align-items: center;

    justify-content: center;

}


/* Logo container */

.about-logo-box {

    position: relative;

    z-index: 2;

    width: 310px;

    height: 310px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background-color: var(--white);

    border: 1px solid rgba(23, 82, 164, 0.12);

    box-shadow:

        0 25px 60px rgba(16, 47, 78, 0.12),

        0 0 0 15px rgba(23, 82, 164, 0.035);

}


/* Logo */

.about-logo {

    width: 210px;

    max-width: 75%;

    height: auto;

    display: block;

}


/* =========================================
   DECORATIVE SHAPES
========================================= */

.about-logo-shape {

    position: absolute;

    border-radius: 50%;

    pointer-events: none;

}


/* Blue shape */

.about-shape-one {

    width: 180px;

    height: 180px;

    top: 20px;

    right: 8%;

    background-color: rgba(23, 82, 164, 0.08);

}


/* Orange shape */

.about-shape-two {

    width: 100px;

    height: 100px;

    bottom: 35px;

    left: 12%;

    background-color: rgba(244, 122, 32, 0.12);

}


/* =========================================
   RTL SUPPORT
========================================= */

html[dir="rtl"] .about-content {

    text-align: right;

}

html[dir="rtl"] .about-link span {

    transform: rotate(180deg);

}

html[dir="rtl"] .about-link:hover span {

    transform: rotate(180deg) translateX(4px);

}

html[dir="rtl"] .about-shape-one {

    right: auto;

    left: 8%;

}

html[dir="rtl"] .about-shape-two {

    left: auto;

    right: 12%;

}


/* =========================================
   TABLET
========================================= */

@media (max-width: 991.98px) {

    .about-onehub {

        padding: 80px 0;

    }

    .about-content {

        max-width: 700px;

        margin: 0 auto;

        text-align: center;

    }

    html[dir="rtl"] .about-content {

        text-align: center;

    }

    .about-logo-wrapper {

        min-height: 330px;

        margin-top: 10px;

    }

    .about-logo-box {

        width: 270px;

        height: 270px;

    }

    .about-logo {

        width: 185px;

    }

    .about-shape-one {

        width: 150px;

        height: 150px;

    }

    .about-shape-two {

        width: 85px;

        height: 85px;

    }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 575.98px) {

    .about-onehub {

        padding: 65px 0;

    }

    .about-title {

        font-size: 32px;

    }

    .about-text {

        font-size: 14px;

        line-height: 1.8;

    }

    .about-logo-wrapper {

        min-height: 270px;

    }

    .about-logo-box {

        width: 220px;

        height: 220px;

    }

    .about-logo {

        width: 150px;

    }

    .about-shape-one {

        width: 110px;

        height: 110px;

        top: 15px;

    }

    .about-shape-two {

        width: 65px;

        height: 65px;

        bottom: 20px;

    }

}








/* =========================================
   PROJECT FIELDS
========================================= */

.project-fields {
    padding: 100px 0;
    position: relative;
    overflow: hidden;
    background: linear-gradient(120deg, #1254a4 0%, #087fd1 55%, #00a1e8 100%);
}

/* Subtle decorative shape — mirrors hero slider's ::after */
.project-fields::before {
    content: '';
    position: absolute;
    width: 220px;
    height: 220px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 40px;
    bottom: -80px;
    left: 3%;
    transform: rotate(25deg);
    pointer-events: none;
}

.project-fields::after {
    content: '';
    position: absolute;
    width: 150px;
    height: 150px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 30px;
    top: -50px;
    right: 5%;
    transform: rotate(-18deg);
    pointer-events: none;
}


/* =========================================
   SECTION HEADER
========================================= */

.fields-header {
    text-align: center;
    max-width: 600px;
    margin: 0 auto 60px;
}

.fields-label {
    display: inline-block;
    margin-bottom: 16px;
    padding: 7px 17px;
    border-radius: 30px;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.30);
    font-size: 14px;
    font-weight: 700;
}

.fields-title {
    margin-bottom: 14px;
    color: #ffffff;
    font-size: clamp(28px, 4vw, 42px);
    font-weight: 700;
    line-height: 1.2;
}

.fields-subtitle {
    color: rgba(255, 255, 255, 0.80);
    font-size: 16px;
    line-height: 1.8;
    margin-bottom: 0;
}


/* =========================================
   FIELD CARD
========================================= */

.field-card {
    position: relative;
    padding: 36px 30px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(6px);
    height: 100%;
    display: flex;
    flex-direction: column;
    transition:
        transform 0.3s ease,
        background 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}

.field-card:hover {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.30);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18);
}

/* Accent card (AI) — highlighted with gold */
.field-card--accent {
    background: rgba(255, 189, 37, 0.15);
    border-color: rgba(255, 189, 37, 0.45);
}

.field-card--accent:hover {
    background: rgba(255, 189, 37, 0.22);
    border-color: rgba(255, 189, 37, 0.65);
    box-shadow: 0 16px 40px rgba(255, 189, 37, 0.18);
}

.field-card--accent .field-icon {
    background: rgba(255, 189, 37, 0.18);
    border-color: rgba(255, 189, 37, 0.40);
    color: #ffbd25;
}

.field-card--accent .field-link {
    color: #ffbd25;
}

.field-card--accent .field-link:hover {
    color: #ffffff;
}


/* =========================================
   ICON
========================================= */

.field-icon {
    width: 56px;
    height: 56px;
    margin-bottom: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: #ffffff;
    flex-shrink: 0;
}

.field-icon svg {
    width: 26px;
    height: 26px;
}


/* =========================================
   CARD TEXT
========================================= */

.field-title {
    margin-bottom: 12px;
    color: #ffffff;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
}

.field-detail {
    color: rgba(255, 255, 255, 0.78);
    font-size: 14px;
    line-height: 1.85;
    margin-bottom: 0;
    flex-grow: 1;
}


/* =========================================
   CARD LINK
========================================= */

.field-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 20px;
    color: rgba(255, 255, 255, 0.85);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition: color 0.25s ease, gap 0.25s ease;
}

.field-link span {
    font-size: 16px;
    line-height: 1;
    transition: transform 0.25s ease;
}

.field-link:hover {
    color: #ffbd25;
    gap: 10px;
}

.field-link:hover span {
    transform: translateX(3px);
}


/* =========================================
   RTL SUPPORT
========================================= */

html[dir="rtl"] .fields-header {
    text-align: center;
}

html[dir="rtl"] .field-card {
    text-align: right;
}

html[dir="rtl"] .field-link span {
    transform: rotate(180deg);
}

html[dir="rtl"] .field-link:hover span {
    transform: rotate(180deg) translateX(3px);
}

html[dir="rtl"] .project-fields::before {
    left: auto;
    right: 3%;
}

html[dir="rtl"] .project-fields::after {
    right: auto;
    left: 5%;
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 991.98px) {
    .project-fields {
        padding: 80px 0;
    }

    .fields-header {
        margin-bottom: 48px;
    }
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 575.98px) {
    .project-fields {
        padding: 65px 0;
    }

    .fields-title {
        font-size: 28px;
    }

    .fields-subtitle {
        font-size: 14px;
    }

    .field-card {
        padding: 28px 22px;
    }

    .field-icon {
        width: 48px;
        height: 48px;
        margin-bottom: 18px;
    }

    .field-icon svg {
        width: 22px;
        height: 22px;
    }

    .field-title {
        font-size: 16px;
    }
}













/* =========================================
   OUR PARTNER (TESTIMONIAL / SLIDER)
========================================= */

.our-partners {
    position: relative;
    padding: 100px 0 90px;
    background-color: var(--light-blue);
    overflow: hidden;
}

/* Header */
.partners-header {
    max-width: 650px;
    margin: 0 auto 40px;
}

.partners-label {
    display: inline-block;
    font-size: 15px;
    font-weight: 700;
    font-style: italic;
    color: var(--accent-orange);
    margin-bottom: 8px;
}

.partners-title {
    color: var(--dark-navy);
    font-size: clamp(30px, 4vw, 44px);
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin: 0 0 14px;
}

.partners-divider {
    width: 60px;
    height: 3px;
    background: var(--primary-blue);
    margin: 0 auto;
    border-radius: 2px;
}

/* Slide Card */
.partner-card {
    max-width: 780px;
    margin: 0 auto;
    text-align: center;
    padding: 10px 20px 45px;
}

/* Circular Logo Frame */
.partner-avatar-wrapper {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 24px;
}

.partner-avatar {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    padding: 5px;
    background: var(--white);
    border: 3px solid var(--accent-orange);
    box-shadow: 0 10px 25px rgba(16, 47, 78, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: transform 0.3s ease;
}

.partner-card:hover .partner-avatar {
    transform: scale(1.04);
}

.partner-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

/* Quoted Brief */
.partner-quote {
    color: var(--text-muted);
    font-size: 17px;
    line-height: 1.9;
    margin: 0 auto 18px;
    max-width: 700px;
}

/* Star Rating */
.partner-rating {
    color: #e53935;
    font-size: 22px;
    letter-spacing: 4px;
    line-height: 1;
    margin-bottom: 18px;
}

/* Partner Name */
.partner-name {
    color: var(--dark-navy);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 8px;
}

/* Badge: Number of Projects */
.partner-projects-badge {
    display: inline-block;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    color: var(--primary-blue);
    background-color: rgba(23, 82, 164, 0.08);
    border: 1px solid rgba(23, 82, 164, 0.18);
}

/* =========================================
   SIDE NAVIGATION BUTTONS (Circular)
========================================= */

.partner-nav-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: none;
    opacity: 1;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 10;
}

/* Left button (accent/coral highlight like reference image) */
.partner-nav-prev {
    left: 10px;
    background-color: rgba(244, 122, 32, 0.85);
    color: var(--white);
    box-shadow: 0 4px 14px rgba(244, 122, 32, 0.35);
}

.partner-nav-prev:hover {
    background-color: var(--accent-orange);
    color: var(--white);
    transform: translateY(-50%) scale(1.08);
}

/* Right button (muted/slate like reference image) */
.partner-nav-next {
    right: 10px;
    background-color: #64748b;
    color: var(--white);
    box-shadow: 0 4px 14px rgba(100, 116, 139, 0.3);
}

.partner-nav-next:hover {
    background-color: var(--dark-navy);
    color: var(--white);
    transform: translateY(-50%) scale(1.08);
}

.nav-arrow {
    font-size: 26px;
    line-height: 1;
    font-weight: 400;
}

/* =========================================
   DOT INDICATORS
========================================= */

.partner-indicators {
    position: relative;
    margin: 15px 0 0;
    gap: 6px;
}

.partner-indicators button {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: none;
    background-color: #cbd5e1;
    opacity: 1;
    transition: all 0.3s ease;
}

.partner-indicators button.active {
    background-color: var(--accent-orange);
    width: 24px;
    border-radius: 10px;
}

/* =========================================
   RTL SUPPORT
========================================= */

html[dir="rtl"] .partner-card {
    font-family: 'Cairo', sans-serif;
}

html[dir="rtl"] .partner-title {
    letter-spacing: 0;
}

html[dir="rtl"] .partner-name {
    letter-spacing: 0;
}

html[dir="rtl"] .partner-nav-prev {
    left: auto;
    right: 10px;
}

html[dir="rtl"] .partner-nav-next {
    right: auto;
    left: 10px;
}

html[dir="rtl"] .nav-arrow {
    transform: scaleX(-1);
    display: inline-block;
}

/* =========================================
   RESPONSIVE DESIGN
========================================= */

@media (max-width: 991.98px) {
    .our-partners {
        padding: 80px 0 70px;
    }

    .partner-quote {
        font-size: 15px;
    }

    .partner-avatar {
        width: 120px;
        height: 120px;
    }
}

@media (max-width: 767.98px) {
    .our-partners {
        padding: 65px 0 55px;
    }

    /* Move side buttons so they don't cover text on smaller mobile screens */
    .partner-nav-btn {
        width: 38px;
        height: 38px;
    }

    .nav-arrow {
        font-size: 20px;
    }

    .partner-avatar {
        width: 100px;
        height: 100px;
    }

    .partner-quote {
        font-size: 14px;
        line-height: 1.75;
    }

    .partner-rating {
        font-size: 18px;
    }
}






/* =========================================
   SIDE NAVIGATION BUTTONS (Circular)
========================================= */

.partner-nav-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: none;
    opacity: 1;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--dark-navy);
    /* Dark brand blue */
    color: var(--white);
    box-shadow: 0 4px 14px rgba(16, 47, 78, 0.25);
    transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    z-index: 10;
}

/* Hover: Orange brand color for both LTR and RTL */
.partner-nav-btn:hover {
    background-color: var(--accent-orange);
    color: var(--white);
    transform: translateY(-50%) scale(1.08);
    box-shadow: 0 6px 18px rgba(244, 122, 32, 0.4);
}

/* Bootstrap icon sizing inside circular button */
.partner-nav-btn .carousel-control-prev-icon,
.partner-nav-btn .carousel-control-next-icon {
    width: 20px;
    height: 20px;
    filter: brightness(0) invert(1);
    /* Pure white arrow */
}

/* Positions in LTR */
.partner-nav-prev {
    left: 10px;
    right: auto;
}

.partner-nav-next {
    right: 10px;
    left: auto;
}

/* =========================================
   RTL SUPPORT
========================================= */

html[dir="rtl"] .partner-card {
    font-family: 'Cairo', sans-serif;
}

html[dir="rtl"] .partner-title,
html[dir="rtl"] .partner-name {
    letter-spacing: 0;
}

/* Reflect button positions for RTL */
html[dir="rtl"] .partner-nav-prev {
    left: auto;
    right: 10px;
}

html[dir="rtl"] .partner-nav-next {
    right: auto;
    left: 10px;
}

/* Hover: Orange brand color for both buttons */
.partner-nav-btn:hover {
    background-color: var(--accent-orange);
    color: var(--white);
    transform: translateY(-50%) scale(1.08);
    box-shadow: 0 6px 18px rgba(244, 122, 32, 0.4);
}

/* Default LTR Positions */
.partner-nav-prev {
    left: 10px;
    right: auto;
}

.partner-nav-next {
    right: 10px;
    left: auto;
}

.nav-arrow {
    font-size: 26px;
    line-height: 1;
    font-weight: 400;
}













/* =========================================
   REGISTER REQUEST
   Same gradient + glass style as .project-fields
   Append to the end of public/css/app.css
========================================= */

.register-request {
    padding: 100px 0;
    position: relative;
    overflow: hidden;
    background: linear-gradient(120deg, #1254a4 0%, #087fd1 55%, #00a1e8 100%);
}

/* Decorative outlines (mirrored from .project-fields) */
.register-request::before {
    content: '';
    position: absolute;
    width: 220px;
    height: 220px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 40px;
    bottom: -80px;
    right: 3%;
    transform: rotate(-25deg);
    pointer-events: none;
}

.register-request::after {
    content: '';
    position: absolute;
    width: 150px;
    height: 150px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 30px;
    top: -50px;
    left: 5%;
    transform: rotate(18deg);
    pointer-events: none;
}


/* =========================================
   SECTION HEADER
========================================= */

.register-header {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 600px;
    margin: 0 auto 50px;
}

.register-label {
    display: inline-block;
    margin-bottom: 16px;
    padding: 7px 17px;
    border-radius: 30px;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.30);
    font-size: 14px;
    font-weight: 700;
}

.register-title {
    margin-bottom: 14px;
    color: #ffffff;
    font-size: clamp(28px, 4vw, 42px);
    font-weight: 700;
    line-height: 1.2;
}

.register-subtitle {
    margin-bottom: 0;
    color: rgba(255, 255, 255, 0.80);
    font-size: 16px;
    line-height: 1.8;
}


/* =========================================
   FORM CARD
========================================= */

.register-card {
    position: relative;
    z-index: 1;
    max-width: 820px;
    margin: 0 auto;
    padding: 44px 40px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(6px);
}


/* Success message */
.register-alert {
    margin-bottom: 28px;
    padding: 14px 18px;
    border-radius: 10px;
    color: #102f4e;
    background: #ffbd25;
    border: 1px solid rgba(255, 189, 37, 0.45);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.7;
}


/* =========================================
   FIELDS
========================================= */

.register-field-label {
    display: block;
    margin-bottom: 8px;
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
}

.register-input {
    display: block;
    width: 100%;
    padding: 13px 16px;
    border-radius: 10px;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.28);
    font-family: inherit;
    font-size: 15px;
    line-height: 1.5;
    transition:
        border-color 0.25s ease,
        background 0.25s ease,
        box-shadow 0.25s ease;
}

.register-input::placeholder {
    color: rgba(255, 255, 255, 0.55);
}

.register-input:hover {
    border-color: rgba(255, 255, 255, 0.45);
}

.register-input:focus {
    outline: none;
    background: rgba(255, 255, 255, 0.16);
    border-color: #ffbd25;
    box-shadow: 0 0 0 3px rgba(255, 189, 37, 0.22);
}

.register-textarea {
    min-height: 130px;
    resize: vertical;
}

/* Browser autofill would otherwise turn the field white */
.register-input:-webkit-autofill,
.register-input:-webkit-autofill:focus {
    -webkit-text-fill-color: #ffffff;
    caret-color: #ffffff;
    box-shadow: 0 0 0 1000px #1a5fae inset;
    transition: background-color 9999s ease-in-out 0s;
}


/* Validation */
.register-input.is-invalid {
    border-color: #ffb3ac;
    background: rgba(255, 120, 110, 0.12);
}

.register-error {
    margin-top: 6px;
    color: #ffd6d2;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.6;
}


/* =========================================
   SUBMIT BUTTON  (same look as .hero-btn)
========================================= */

.register-actions {
    margin-top: 32px;
    text-align: center;
}

.register-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 12px 28px;
    border: 0;
    border-radius: 8px;
    color: #102f4e;
    background: #ffbd25;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
}

.register-btn span {
    font-size: 20px;
    line-height: 1;
}

.register-btn:hover {
    background: #ffffff;
    transform: translateY(-3px);
}

.register-btn:focus-visible {
    outline: 3px solid #ffffff;
    outline-offset: 3px;
}


/* =========================================
   RTL SUPPORT
========================================= */

html[dir="rtl"] .register-card {
    text-align: right;
}

/* Email / phone stay left-to-right internally but align to the right in Arabic */
html[dir="rtl"] .register-input[dir="ltr"] {
    text-align: right;
}

html[dir="rtl"] .register-btn span {
    transform: rotate(180deg);
}

html[dir="rtl"] .register-request::before {
    right: auto;
    left: 3%;
    transform: rotate(25deg);
}

html[dir="rtl"] .register-request::after {
    left: auto;
    right: 5%;
    transform: rotate(-18deg);
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 991.98px) {
    .register-request {
        padding: 80px 0;
    }

    .register-header {
        margin-bottom: 40px;
    }
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 575.98px) {
    .register-request {
        padding: 65px 0;
    }

    .register-title {
        font-size: 28px;
    }

    .register-subtitle {
        font-size: 14px;
    }

    .register-card {
        padding: 28px 20px;
    }

    .register-btn {
        width: 100%;
        justify-content: center;
    }
}


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

    .register-input,
    .register-btn {
        transition: none;
    }
}









/* =========================================
   PARTNER PROJECT GALLERY
   White section (alternates with the blue ones)
   Append to the end of public/css/app.css
========================================= */

.partner-gallery {
    position: relative;
    padding: 100px 0;
    overflow: hidden;
    background-color: var(--white);
}


/* =========================================
   SECTION HEADER  (same look as About label/title)
========================================= */

.gallery-header {
    text-align: center;
    max-width: 600px;
    margin: 0 auto 60px;
}

.gallery-label {
    display: inline-block;
    margin-bottom: 16px;
    padding: 7px 17px;
    border-radius: 30px;
    color: var(--primary-blue);
    background-color: rgba(23, 82, 164, 0.08);
    border: 1px solid rgba(23, 82, 164, 0.12);
    font-size: 14px;
    font-weight: 700;
}

.gallery-title {
    margin-bottom: 14px;
    color: var(--dark-navy);
    font-size: clamp(28px, 4vw, 42px);
    font-weight: 700;
    line-height: 1.2;
}

.gallery-subtitle {
    margin-bottom: 0;
    color: var(--text-muted);
    font-size: 16px;
    line-height: 1.8;
}


/* =========================================
   CARD
========================================= */

.gallery-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 14px;
    background-color: var(--white);
    border: 1px solid rgba(23, 82, 164, 0.12);
    box-shadow: 0 10px 30px rgba(16, 47, 78, 0.07);
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}

.gallery-card:hover {
    transform: translateY(-5px);
    border-color: rgba(23, 82, 164, 0.25);
    box-shadow: 0 18px 40px rgba(16, 47, 78, 0.14);
}


/* =========================================
   PHOTO
========================================= */

.gallery-photo {
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background-color: var(--light-blue);
}

.gallery-photo img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
    transition: transform 0.5s ease;
}

.gallery-card:hover .gallery-photo img {
    transform: scale(1.05);
}


/* =========================================
   CARD TEXT
========================================= */

.gallery-body {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    padding: 26px 26px 28px;
}

.gallery-card-title {
    margin-bottom: 10px;
    color: var(--dark-navy);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
}

.gallery-brief {
    flex-grow: 1;
    margin-bottom: 22px;
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.85;
}


/* =========================================
   BUTTON  (same look as .about-link)
========================================= */

.gallery-btn {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 11px 20px;
    border-radius: 8px;
    color: var(--white);
    background-color: var(--primary-blue);
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
    box-shadow: 0 8px 20px rgba(23, 82, 164, 0.18);
    transition:
        background-color 0.3s ease,
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.gallery-btn span {
    font-size: 20px;
    line-height: 1;
    transition: transform 0.3s ease;
}

.gallery-btn:hover {
    color: var(--white);
    background-color: var(--dark-navy);
    transform: translateY(-3px);
    box-shadow: 0 12px 25px rgba(16, 47, 78, 0.22);
}

.gallery-btn:hover span {
    transform: translateX(4px);
}

.gallery-btn:focus-visible {
    outline: 3px solid rgba(23, 82, 164, 0.35);
    outline-offset: 3px;
}


/* =========================================
   RTL SUPPORT
========================================= */

html[dir="rtl"] .gallery-card {
    text-align: right;
}

html[dir="rtl"] .gallery-btn span {
    transform: rotate(180deg);
}

html[dir="rtl"] .gallery-btn:hover span {
    transform: rotate(180deg) translateX(4px);
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 991.98px) {
    .partner-gallery {
        padding: 80px 0;
    }

    .gallery-header {
        margin-bottom: 48px;
    }
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 575.98px) {
    .partner-gallery {
        padding: 65px 0;
    }

    .gallery-title {
        font-size: 28px;
    }

    .gallery-subtitle {
        font-size: 14px;
    }

    .gallery-body {
        padding: 22px 20px 24px;
    }

    .gallery-card-title {
        font-size: 17px;
    }
}


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

    .gallery-card,
    .gallery-photo img,
    .gallery-btn,
    .gallery-btn span {
        transition: none;
    }

    .gallery-card:hover,
    .gallery-card:hover .gallery-photo img {
        transform: none;
    }
}










/* =========================================
   FOOTER  -  CONTACT US
   Dark navy footer with gold accents
   Append to the end of public/css/app.css
========================================= */

.site-footer {
    position: relative;
    padding: 80px 0 0;
    overflow: hidden;
    color: rgba(255, 255, 255, 0.75);
    background:
        radial-gradient(circle at 90% 0%,
            rgba(56, 105, 178, 0.28),
            transparent 38%),
        radial-gradient(circle at 5% 100%,
            rgba(244, 122, 32, 0.10),
            transparent 30%),
        var(--dark-navy);
}

/* Brand accent line on top */
.site-footer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #ffbd25, var(--accent-orange));
}


/* =========================================
   BRAND COLUMN
========================================= */

.footer-logo-box {
    display: inline-flex;
    margin-bottom: 20px;
    padding: 10px 18px;
    border-radius: 12px;
    background-color: var(--white);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.20);
}

.footer-logo {
    width: 130px;
    height: auto;
    display: block;
}

.footer-about {
    max-width: 360px;
    margin-bottom: 24px;
    color: rgba(255, 255, 255, 0.75);
    font-size: 14px;
    line-height: 1.9;
}


/* =========================================
   SOCIAL ICONS
========================================= */

.footer-social {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.footer-social a {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    color: var(--white);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.20);
    transition:
        color 0.3s ease,
        background-color 0.3s ease,
        border-color 0.3s ease,
        transform 0.3s ease;
}

.footer-social a svg {
    width: 18px;
    height: 18px;
}

.footer-social a:hover {
    color: var(--dark-navy);
    background-color: #ffbd25;
    border-color: #ffbd25;
    transform: translateY(-3px);
}


/* =========================================
   COLUMN HEADINGS
========================================= */

.footer-heading {
    position: relative;
    margin-bottom: 26px;
    padding-bottom: 14px;
    color: var(--white);
    font-size: 17px;
    font-weight: 700;
}

.footer-heading::after {
    content: "";
    position: absolute;
    bottom: 0;
    inset-inline-start: 0;
    width: 36px;
    height: 3px;
    border-radius: 3px;
    background-color: #ffbd25;
}


/* =========================================
   QUICK LINKS
========================================= */

.footer-links {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.footer-links a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: rgba(255, 255, 255, 0.78);
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    transition: color 0.25s ease;
}

.footer-links a::before {
    content: "";
    width: 10px;
    height: 2px;
    border-radius: 2px;
    background-color: #ffbd25;
    transition: width 0.25s ease;
}

.footer-links a:hover {
    color: #ffbd25;
}

.footer-links a:hover::before {
    width: 18px;
}


/* =========================================
   CONTACT LIST
========================================= */

.footer-contact-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.footer-contact-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.footer-contact-icon {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    color: #ffbd25;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.20);
}

.footer-contact-icon svg {
    width: 19px;
    height: 19px;
}

.footer-contact-info {
    min-width: 0;
}

.footer-contact-label {
    display: block;
    margin-bottom: 2px;
    color: rgba(255, 255, 255, 0.55);
    font-size: 12px;
    font-weight: 600;
}

.footer-contact-info a {
    display: block;
    color: var(--white);
    text-decoration: none;
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.7;
    overflow-wrap: anywhere;
    transition: color 0.25s ease;
}

/* Numbers and emails stay left-to-right, even inside Arabic text */
.footer-contact-info a[dir="ltr"] {
    unicode-bidi: isolate;
}

.footer-contact-info a:hover {
    color: #ffbd25;
}


/* =========================================
   BOTTOM BAR
========================================= */

.footer-bottom {
    margin-top: 60px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.footer-bottom-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 20px;
    padding: 22px 0;
}

.footer-copy {
    margin: 0;
    color: rgba(255, 255, 255, 0.60);
    font-size: 13px;
}

.footer-top-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--white);
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
    transition: color 0.25s ease;
}

.footer-top-link:hover {
    color: #ffbd25;
}


/* =========================================
   RTL SUPPORT
========================================= */

html[dir="rtl"] .site-footer::before {
    background: linear-gradient(270deg, #ffbd25, var(--accent-orange));
}

/* Phones / email keep LTR digits but align to the right in Arabic */
html[dir="rtl"] .footer-contact-info a[dir="ltr"] {
    text-align: right;
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 991.98px) {

    .site-footer {
        padding: 65px 0 0;
    }

    .footer-bottom {
        margin-top: 50px;
    }
}

/* Two-column contact list when the column is full width */
@media (min-width: 768px) and (max-width: 991.98px) {

    .footer-contact-list {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px 30px;
    }
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 575.98px) {

    .site-footer {
        padding: 55px 0 0;
    }

    .footer-about {
        font-size: 13px;
    }

    .footer-heading {
        margin-bottom: 22px;
    }

    .footer-bottom {
        margin-top: 40px;
    }

    .footer-bottom-inner {
        flex-direction: column;
        justify-content: center;
        text-align: center;
    }
}


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

    .footer-social a,
    .footer-links a,
    .footer-links a::before,
    .footer-contact-info a,
    .footer-top-link {
        transition: none;
    }

    .footer-social a:hover {
        transform: none;
    }
}