/**
 * @file
 * Subtheme specific CSS.
 */

    /* ========================= font ============================= */

    html {
        scroll-padding-top: 120px;
    }

    /* امنع تحديد النص في كل الموقع */
    html,
    body {
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    /* اسمح بالتحديد داخل عناصر الإدخال */
    input,
    textarea,
    select {
        -webkit-user-select: text;
        -moz-user-select: text;
        -ms-user-select: text;
        user-select: text;
    }

    /* خلي العناصر القابلة للنقر ما تتأثر (اختياري) */
    a,
    button,
    [role="button"],
    [tabindex] {
        -webkit-user-select: none;
        user-select: none;
    }

    /* set to your header height */

    @font-face {
        font-family: 'GeSsTwoMedium';
        src: url('./GeSsTwoMedium.otf');
    }

    @font-face {
        font-family: 'GeSsTwoBold';
        src: url('./GeSsTwoBold.otf');
    }

    @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

    /* * {
    font-family: 'GeSsTwoMedium';
} */
    .poppins-semibold {
        font-family: "Poppins", sans-serif;
        font-weight: 600;
        font-style: normal;
    }

    .block-field-blocktaxonomy-termservicefield-weight2 {
        display: none;
    }

    [dir="rtl"] * {
        font-family: 'GeSsTwoMedium';
    }

    /* ========================= font ============================= */

    /* ========================= global ============================= */

    :root {
        --main-color: #1a6f86;
        --secondary-color: #11657b;
        --gray-color: #707070;
        --font-bold: 'centurygothic_bold';
        --main-font: "Poppins", sans-serif;
    }

    html {
        scroll-behavior: smooth;
        overflow-x: hidden;
    }

    a {
        transition: 0.3s ease;
        text-decoration: none !important;
        outline: none !important;
        color: #000;
    }

    li {
        list-style: none;
        display: inline-block;
    }

    .views-row li {
        list-style: unset;
        display: list-item;
    }

    ul {
        padding: 0;
        margin: 0;
    }

    *,
    ::before,
    ::after {
        /* transition: 0.3s ease;*/
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }

    .no-margin {
        margin: 0;
    }

    .col-12,
    .no-padding {
        padding: 0;
    }

    body {
        overflow-x: hidden !important;
        /* max-width: 1400px; */
        margin: 0 auto !important;
        /* font-family: var(--main-font); */
        background: var(--bs-white) !important;
    }

    .container,
    .container-lg,
    .container-md,
    .container-sm,
    .container-xl {
        max-width: 100%;
        width: 93.5%;
        margin: 0 auto;
    }

    img {
        max-width: 100%;
        width: auto;
    }

    video {
        width: 100%;
        height: 100%;
    }

    .slide__media {
        display: none;
    }

    .slide__caption {
        padding: 0 !important;
    }

    .main-content.col {
        padding: 0;
    }

    .path-frontpage .main-content.col {
        padding: 0;
    }

    #block-bootstrap-barrio-subtheme-page-title {
        display: none;
    }

    html[dir="rtl"] .language-switcher-language-url .links span[hreflang="ar"] {
        display: none;
    }

    html[dir="ltr"] .language-switcher-language-url .links span[hreflang="en"] {
        display: none;
    }

    html .language-switcher-language-url .links span a {
        color: #F5F7F9;
        text-align: start;
        font-size: 15px;
        font-style: normal;
        font-weight: 600;
        background: url('./lang.svg') no-repeat left center;
        padding-left: 25px;
    }

    /* [dir="rtl"] .language-switcher-language-url .links span a {
    background: url('./lang.svg') no-repeat right center;
} */

    .node__content {
        margin: 0;
    }

    .row {
        /* overflow-x: hidden; */
    }

    /***************common classes************/

    /* ========== header ========== */

    header#header {
        position: fixed;
        z-index: 99;
        left: 0;
        top: 0;
        height: 100%;
        border-inline-end: 1px solid #6DA0AE;
        /* display: none; */
    }

    #navbar-top {
        padding: 0;
    }

    header#header {
        border: unset;
    }

    header#header #navbar-main {
        background: var(--main-color) !important;
        height: 100%;
        padding: 8px;
    }

    header#header #navbar-main {
        /* background: rgba(0, 95, 121, 0.27) !important; */
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        gap: 18px;
        padding-top: 70px;
        padding-inline: 4px;

        .navbar-brand {
            margin: 0;
        }
    }


    #block-bootstrap-barrio-subtheme-floatingmenu {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;

        a {
            color: #Fff;
            padding: 5px;
            display: flex;
            width: 36px;
            height: 36px;
            border: 2px solid #fff;
            border-radius: 50%;
            align-items: center;
            justify-content: center;
        }


    }

    #block-bootstrap-barrio-subtheme-floatingmenu li:last-child {
        transform: rotate(267deg);
        margin-top: 27px;
    }

    #block-bootstrap-barrio-subtheme-floatingmenu li:last-child a {
        all: unset;
        color: #fff;
        cursor: pointer;
        font-size: var(--main-font);
    }

    header#header .navbar-brand img {
        width: 75px;
        height: 422px;
    }

    .featured-top {
        position: absolute;
        z-index: 9;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        display: none;
    }

    /* ========== header ========== */
    /* ========== slider ========== */

    .view-slider,
    .view-slider .slide__description {
        position: relative;
    }

    .view-slider .slide__description .views-field-field-media-image {
        position: relative;
    }

    .view-slider .slide__description .views-field-field-media-image::after {
        content: "";
        width: 100%;
        height: 100%;
        background: rgba(36, 107, 133, 0.56);
        position: absolute;
        left: 0;
        top: 0;
        z-index: 1;
    }

    .view-slider .slide__description .views-field-field-media-image img {
        width: 100%;
        height: 100vh;
    }

    .view-slider .slide__description .views-field-title {
        position: absolute;
        bottom: 12%;
        left: 12%;
        z-index: 9;
        font-size: 31px;
        font-style: normal;
        font-weight: 600;
        line-height: 65px;
        color: var(--bs-white);
    }

    .slick-dots {
        display: flex;
        gap: 5px;
        position: absolute;
        bottom: 12%;
        right: 9%;
    }

    .slick-dots li {
        width: 25px;
        height: 25px;
        display: grid;
        place-items: center;
    }

    .slick-dots button {
        width: 15px;
        height: 15px;
        border-radius: 100%;
        background: var(--bs-white);
        border: unset;
        font-size: 0;
    }

    .slick-dots .slick-active {
        border: 1.5px solid var(--bs-white);
        border-radius: 100%;
        padding: 2.5px;
    }

    .slick-dots .slick-active button {
        width: 8px;
        height: 8px;
    }


    /* ========== slider ========== */

    /* ========== footer ========== */

    footer {
        display: none;
    }

    /* ========== footer ========== */

    /* ========== sidebar ========== */

    .path-frontpage #sidebar_first {
        display: none;
    }

    #sidebar_first {
        padding-inline-start: 94px;
    }

    aside {
        height: 100%;
    }

    #sidebar_first.sidebar .block {
        min-height: 100vh;
        background: var(--main-color);
        border: unset;
        margin: 0;
        height: 100%;
        border-inline-start: 2px solid #ffffff36;
    }

    .sidebar_first {
        width: 22% !important;
    }

    #sidebar_first.sidebar ul {
        padding-top: 88px;
    }

    #sidebar_first.sidebar ul li {
        display: block;
        height: 80px;

    }

    #sidebar_first.sidebar ul li a {
        color: #dadada;
        font-size: 18px;
        font-style: normal;
        font-weight: 500;
        line-height: 31px;
        display: flex;
        height: 100%;
        align-items: flex-start;
        position: relative;
    }

    #sidebar_first.sidebar ul li a::before {
        content: " -";
        color: #dadada;
        margin-inline-end: 12px;
    }

    #sidebar_first.sidebar ul li a:hover,
    #sidebar_first.sidebar ul li a.is-active {
        /* font-weight: 600; */
        color: rgb(215 130 135);

    }

    #block-bootstrap-barrio-subtheme-aboutmenu li a::after {
        content: "";
        width: 46px;
        height: 71.01px;
        background: url('./menu-arrow.svg') no-repeat right;
        background-size: contain;
        position: absolute;
        top: -20px;
        right: -43px;
        z-index: 9;

        opacity: 0;
        transform: translateX(10px);
        transition: opacity 0.3s ease, transform 0.3s ease;
        pointer-events: none;
    }

    /* Arrow visible only on .show-arrow class */
    #block-bootstrap-barrio-subtheme-aboutmenu li a.show-arrow::after {
        opacity: 1;
        transform: translateX(0);
    }

    #sidebar_first.sidebar #block-bootstrap-barrio-subtheme-pagetitle>ul>li {
        display: none;
    }

    #sidebar_first.sidebar #block-bootstrap-barrio-subtheme-pagetitle ul li.active {
        display: block;
    }

    /* ========== sidebar ========== */

    /* ========== about itcc ========== */

    .view-about-itcc .views-row {
        display: flex;
    }

    .view-about-itcc .views-row .views-field-fieldset {
        width: 65%;
        padding-top: 90px;
        padding-inline-start: 60px;
        padding-inline-end: 165px;
    }

    .view-about-itcc .views-row .views-field-fieldset .views-field-title {
        font-size: 31px;
        font-style: normal;
        font-weight: 700;
        line-height: 38.389px;
        margin-bottom: 20px;
    }

    .view-about-itcc .views-row .views-field-fieldset .views-field-body {
        color: var(--gray-color);
        text-align: justify;
        font-size: 15px;
        font-style: normal;
        font-weight: 500;
        line-height: 24.43px;
    }

    .view-about-itcc .views-row .views-field-fieldset .views-field-body .field-content ul li {
        list-style: disc;
        list-style-position: inside;
        display: list-item;
    }

    .view-about-itcc .views-row .views-field-field-media-image {
        width: 35%;
        height: 100%;
        position: relative;
    }

    .view-about-itcc .views-row .views-field-field-media-image::after {
        content: "";
        position: fixed;
        right: 0;
        top: 0;
        width: 387px;
        height: 100vh;
        background-color: #F3F3F3;
        z-index: 5;
    }

    .view-about-itcc .views-row .views-field-field-media-image .media--blazy {
        height: 100vh;
        padding-block: 90px;
    }

    .view-about-itcc .views-row .views-field-field-media-image img {
        position: fixed;
        right: 0;
        max-width: 515px;
        height: 80%;
        object-fit: cover;
        border-radius: 80px 0px 0px 80px;
        z-index: 10;
    }

    /* ========== about itcc ========== */

    /* ========== capabilities ========== */

    .view-capabilities .views-row {
        display: flex;
    }

    .view-capabilities .views-row .views-field-fieldset {
        width: 65%;
        padding-top: 90px;
        padding-inline-start: 60px;
        padding-inline-end: 165px;
    }

    .view-capabilities .views-row .views-field-fieldset .views-field-title {
        font-size: 33px;
        font-style: normal;
        font-family: var(--main-font);
        font-weight: 700;
        line-height: 38.389px;
        margin-bottom: 30px;
    }

    .view-capabilities .views-row .views-field-fieldset .views-field-field-multi-body li {
        color: var(--gray-color);
        /* text-align: justify; */
        font-size: 15px;
        font-style: normal;
        font-weight: 500;
        line-height: 24.43px;
        border-radius: 10px;
        border: 1px solid #CECECE;
        margin-bottom: 20px;
        padding: 20px;
    }

    .view-capabilities .views-row .views-field-fieldset .views-field-field-multi-body li .more-text li {
        border-radius: unset;
        border: unset;
        margin-bottom: unset;
        padding: unset;
        display: list-item;
        list-style: disc;
        list-style-position: inside;

    }

    .view-capabilities .views-row .views-field-fieldset .views-field-field-multi-body li strong {
        color: #000;
    }

    .view-capabilities .views-row .views-field-fieldset .views-field-field-multi-body li .toggle-btn {
        display: flex;
        gap: 5px;
        margin-top: 18px;
    }

    .view-capabilities .views-row .views-field-fieldset .views-field-field-multi-body li .toggle-btn .icon {
        border-radius: 40.363px;
        background: #EEE;
        display: grid;
        place-items: center;
        width: 25.17px;
        height: 25.17px;
        color: #747474;
    }

    .view-capabilities .views-row .views-field-fieldset .views-field-field-multi-body li .toggle-btn .label {
        color: var(--main-color);
        font-size: 15px;
        font-style: normal;
        font-weight: 600;
        line-height: 25px;
    }

    .view-capabilities .views-row .views-field-field-media-image {
        width: 35%;
        height: 100%;
        position: relative;
    }

    .view-capabilities .views-row .views-field-field-media-image::after {
        content: "";
        position: fixed;
        right: 0;
        top: 0;
        width: 387px;
        height: 100vh;
        background-color: #F3F3F3;
        z-index: 5;
    }

    .view-capabilities .views-row .views-field-field-media-image .media--blazy {
        height: 100vh;
        padding-block: 90px;
    }


    .view-capabilities .views-row .views-field-field-media-image img {
        position: fixed;
        right: 0;
        max-width: 515px;
        height: 80%;
        object-fit: cover;
        border-radius: 80px 0px 0px 80px;
        z-index: 9;
    }

    /* ========== capabilities ========== */

    /* ========== Values ========== */

    .view-value .views-row {
        display: flex;
    }

    .view-value .views-row .views-field-fieldset {
        width: 65%;
        padding-top: 90px;
        padding-inline-start: 60px;
        padding-inline-end: 165px;
    }

    .view-value .views-row .views-field-fieldset .views-field-title {
        font-size: 33px;
        font-style: normal;
        font-weight: 700;
        line-height: 38.389px;
        margin-bottom: 30px;
    }

    .view-value .views-row .views-field-fieldset .views-field-body {
        color: var(--gray-color);
        text-align: justify;
        font-size: 15px;
        font-style: normal;
        font-weight: 500;
        line-height: 24.43px;
    }

    .view-value .views-row .views-field-field-media-image {
        width: 35%;
        height: 100%;
        position: relative;
    }


    .view-value .views-row .views-field-field-media-image::after {
        content: "";
        position: fixed;
        right: 0;
        top: 0;
        width: 387px;
        height: 100vh;
        background-color: #F3F3F3;
        z-index: 5;
    }

    .view-value .views-row .views-field-field-media-image .media--blazy {
        height: 100vh;
        padding-block: 90px;
    }

    .view-value .views-row .views-field-field-media-image img {
        position: fixed;
        right: 0;
        max-width: 515px;
        height: 80%;
        object-fit: cover;
        z-index: 10;
        border-radius: 80px 0px 0px 80px;
    }

    /* ========== Values ========== */

    .ui-accordion .ui-accordion-content {
        border: none !important;
        background: #fff;
        height: 100% !important;

        li p {
            margin: 0 !important;
        }

    }

    li p {
        margin: 0 !important;
    }

    /* ========== vision ========== */

    .view-vision .views-row {
        display: flex;
    }

    .view-vision .views-row .views-field-fieldset {
        width: 65%;
        padding-top: 90px;
        padding-inline-start: 60px;
        padding-inline-end: 165px;
    }

    .view-vision .views-row .views-field-fieldset .views-field-title {
        font-size: 33px;
        font-style: normal;
        font-weight: 700;
        font-family: var(--main-font);
        line-height: 38.389px;
        margin-bottom: 30px;
    }

    .view-vision .views-row .views-field-fieldset .views-field-body {
        color: var(--gray-color);
        text-align: justify;
        font-size: 15px;
        font-style: normal;
        font-weight: 500;
        line-height: 24.43px;

        ul {
            margin-inline-start: 20px;
        }
    }

    .view-vision .views-row .views-field-fieldset .views-field-body li {
        /* margin-bottom: 33px; */
        display: list-item;
        list-style: outside;
        text-align: left;
        line-height: 199%;
        word-spacing: 6px;
    }

    .view-vision .views-row .views-field-fieldset .views-field-body li::marker {
        /* color: var(--main-color); */
    }

    .view-vision .views-row .views-field-fieldset .views-field-body li strong {
        color: var(--main-color);
    }

    .view-vision .views-row .views-field-field-media-image {
        width: 35%;
        height: 100%;
        position: relative;
    }

    .view-vision .views-row .views-field-field-media-image::after {
        content: "";
        position: fixed;
        right: 0;
        top: 0;
        width: 387px;
        height: 100vh;
        background-color: #F3F3F3;
        z-index: 5;
    }

    .view-vision .views-row .views-field-field-media-image .media--blazy {
        height: 100vh;
        padding-block: 90px;
    }

    .view-vision .views-row .views-field-field-media-image img {
        position: fixed;
        right: 0;
        max-width: 515px;
        height: 80%;
        z-index: 10;
        object-fit: cover;
        border-radius: 80px 0px 0px 80px;
    }

    /* ========== vision ========== */

    /* ========== vision ========== */

    .view-mission .views-row {
        display: flex;
    }

    .view-mission .views-row .views-field-fieldset {
        width: 65%;
        padding-top: 90px;
        padding-inline-start: 60px;
        padding-inline-end: 165px;
    }

    .view-mission .views-row .views-field-fieldset .views-field-title {
        font-size: 33px;
        font-style: normal;
        font-weight: 600;
        line-height: 38.389px;
        margin-bottom: 30px;
    }

    .view-mission .views-row .views-field-fieldset .views-field-body {
        color: var(--gray-color);
        text-align: justify;
        font-size: 15px;
        font-style: normal;
        font-weight: 500;
        line-height: 24.43px;

        h2 {
            color: #000;
            margin-inline-start: -10px;
        }
    }

    .view-mission .views-row .views-field-fieldset .views-field-body li {
        margin-bottom: 10px;
        display: list-item;
        list-style: outside;
        /* color: var(--main-color); */
        margin-inline-start: 17px;
    }

    .view-mission .views-row .views-field-fieldset .views-field-body li::marker {
        /* color: var(--main-color); */
    }

    .view-mission .views-row .views-field-fieldset .views-field-field-strategy {
        margin-top: 35px;

        ul {
            margin-inline-start: 20px;
        }
    }

    .view-mission .views-row .views-field-fieldset .views-field-field-strategy .views-label-field-strategy {
        font-size: 17px;
        font-style: normal;
        font-weight: 700;
        line-height: 173%;
        color: #000;
    }

    .view-mission .views-row .views-field-fieldset .views-field-field-strategy li {
        /* margin-bottom: 20px; */
        display: list-item;
        list-style: outside;
        color: var(--gray-color);
        text-align: justify;
        font-size: 15px;
        font-style: normal;
        font-weight: 500;
        line-height: 24.43px;
        border: unset;
    }

    .view-mission .views-row .views-field-field-media-image {
        width: 35%;
        height: 100%;
        position: relative;
    }

    .view-mission .views-row .views-field-field-media-image::after {
        content: "";
        position: fixed;
        right: 0;
        top: 0;
        width: 387px;
        height: 100vh;
        background-color: #F3F3F3;
        z-index: 5;
    }

    .view-mission .views-row .views-field-field-media-image .media--blazy {
        height: 100vh;
        padding-block: 90px;
    }

    .view-mission .views-row .views-field-field-media-image img {
        position: fixed;
        right: 0;
        max-width: 515px;
        height: 80%;
        z-index: 10;
        object-fit: cover;
        border-radius: 80px 0px 0px 80px;
    }

    /* ========== vision ========== */

    /* ========== vision ========== */

    .block-views-blockclient-block-1,
    .block-views-blockpartner-block-1 {
        padding-top: 90px;
    }

    .block-views-blockclient-block-1>h2,
    .block-views-blockpartner-block-1>h2 {
        font-size: 33px;
        font-style: normal;
        font-family: var(--main-font);
        font-weight: 600;
        line-height: 38.389px;
        margin-bottom: 75px;
        text-align: center;
    }

    .view-client .row,
    .view-partner .row {
        display: flex !important;
        flex-wrap: wrap;
    }

    .view-client .row .views-row .views-field-nothing,
    .view-partner .row .views-row .views-field-nothing {
        padding: 8px;
        margin-bottom: 35px;
        border-radius: 18.05px;
        border: 0.902px solid #DDD;
        background: #FFF;
        display: grid;
        place-items: center;
        transition: all 0.5s;
    }

    .view-client .row .views-row .views-field-nothing:hover,
    .view-partner .row .views-row .views-field-nothing:hover {
        border-radius: 18.05px;
        border: 0.902px solid #1A6F86;
        box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.15);
        transition: all 0.5s;
    }

    .view-client .row .views-row img,
    .view-partner .row .views-row img {
        width: auto;
        height: 71.905px;
    }

    /* ========== vision ========== */

    /* ========== product / service ========== */


    #block-bootstrap-barrio-subtheme-views-block-new-block-3,
    #block-bootstrap-barrio-subtheme-views-block-project-block-3,
    #block-bootstrap-barrio-subtheme-views-block-service-category-block-2,
    #block-bootstrap-barrio-subtheme-views-block-product-category-block-2 {
        padding-top: 90px;
    }

    #block-bootstrap-barrio-subtheme-views-block-new-block-3 ul,
    #block-bootstrap-barrio-subtheme-views-block-project-block-3 ul {
        padding-top: 20px !important;
    }

    #block-bootstrap-barrio-subtheme-views-block-new-block-3 h2,
    #block-bootstrap-barrio-subtheme-views-block-project-block-3 h2,
    #block-bootstrap-barrio-subtheme-views-block-service-category-block-2 h2,
    #block-bootstrap-barrio-subtheme-views-block-product-category-block-2 h2 {
        color: var(--bs-white);
        font-size: 18px;
        font-style: normal;
        font-weight: 600;
        line-height: 33px;
        border: unset;
        position: relative;
        padding-inline-start: 10px;
        margin-top: 20px;
        cursor: pointer;

    }

    #block-bootstrap-barrio-subtheme-views-block-new-block-3 h2::before,
    #block-bootstrap-barrio-subtheme-views-block-project-block-3 h2::before,
    #block-bootstrap-barrio-subtheme-views-block-service-category-block-2 h2::before,
    #block-bootstrap-barrio-subtheme-views-block-product-category-block-2 h2::before {
        content: "-";
        font-size: 17px;
        font-style: normal;
        font-weight: 500;
        line-height: 33px;
        color: var(--bs-white);
        position: absolute;
        left: 0;
        top: 40%;
        transform: translateY(-50%);
        z-index: 1;
    }

    #block-bootstrap-barrio-subtheme-views-block-new-block-3 h2::after,
    #block-bootstrap-barrio-subtheme-views-block-project-block-3 h2::after,
    #block-bootstrap-barrio-subtheme-views-block-service-category-block-2 h2::after,
    #block-bootstrap-barrio-subtheme-views-block-product-category-block-2 h2::after {
        content: "";
        width: 46px;
        height: 71.01px;
        background: url('./menu-arrow.svg') no-repeat right;
        background-size: contain;
        position: absolute;
        top: -20px;
        right: -43px;
        z-index: 9;
        display: none;
    }

    #block-bootstrap-barrio-subtheme-views-block-new-block-3 .views-field-title a,
    .project-menu .views-field-title a,
    #block-bootstrap-barrio-subtheme-views-block-service-category-block-2 .views-field-name a,
    #block-bootstrap-barrio-subtheme-views-block-product-category-block-2 .views-field-name a {
        color: #ffffffc7;
        font-size: 15.71px;
        font-style: normal;
        font-weight: 500;
        line-height: 25.329px;
        border-bottom: 1px solid #ffffffc7;
        display: block;
        width: 100%;
        padding-block: 18px;
        position: relative;
        padding-inline-end: 37px;
    }

    #block-bootstrap-barrio-subtheme-views-block-new-block-3 .views-field-title a::before,
    .project-menu .views-field-title a::before {
        display: none;
    }

    #block-bootstrap-barrio-subtheme-views-block-new-block-3 .item-list,
    .project-menu .item-list {
        padding-inline-end: 5px;
    }

    #block-bootstrap-barrio-subtheme-views-block-new-block-3 li:last-child .views-field-title a,
    .project-menu li:last-child .views-field-title a,
    #block-bootstrap-barrio-subtheme-views-block-service-category-block-2 .views-row:last-child .views-field-name a,
    #block-bootstrap-barrio-subtheme-views-block-product-category-block-2 .views-row:last-child .views-field-name a {
        border: unset;
    }

    .block-views-blockservice-category-block-1,
    .block-views-blockproduct-category-block-1 {
        padding-top: 90px;
    }

    .block-views-blockproduct-category-block-1 .view-content {
        row-gap: 20px;
    }

    .project-menu>.row,
    .view-service-category>.row,
    .view-product-category>.row {
        overflow-x: visible !important;
        display: flex !important;
    }

    .project-menu>.row .views-row a,
    .view-service-category>.row .views-row a,
    .view-product-category>.row .views-row a {
        padding-bottom: 25px;
    }

    .view-service-category>.row .views-row fieldset,
    .view-product-category>.row .views-row fieldset {
        background: #F9F9FB;
    }

    .view-service-category>.row .views-row fieldset img,
    .view-product-category>.row .views-row fieldset img {
        width: 100%;
        height: 255px;
        object-fit: cover;
    }

    .view-service-category>.row .views-row fieldset .views-field-name a,
    .view-product-category>.row .views-row fieldset .views-field-name a {
        color: var(--main-color);
        font-size: 17.206px;
        font-style: normal;
        font-weight: 600;
        line-height: 19.977px;
        display: block;
        margin: 15px 15px;
    }

    /* .view-service-category>.row .views-row a, */
    .view-service-category>.row .views-row fieldset .views-field-view-taxonomy-term a,
    .view-product-category>.row .views-row fieldset .views-field-view-taxonomy-term a {
        color: #909090;
        font-size: 12.746px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
        display: block;
        width: max-content;
        border-bottom: 1px solid #909090;
        margin: 0 15px 15px;
    }


    .project-menu>.row .views-row .views-field-view,
    .view-product-category>.row .views-row .views-field-view {
        height: 0;
        /* Initially collapsed */
        overflow: hidden;
        /* Hide the content when collapsed */
        opacity: 0;
        transition: height 0.3s ease, opacity 0.3s ease;
        /* Smooth transition for height and opacity */
    }

    #block-bootstrap-barrio-subtheme-views-block-new-block-3 ul li {
        width: 100%;
    }

    #block-bootstrap-barrio-subtheme-views-block-new-block-3 ul,
    #block-bootstrap-barrio-subtheme-views-block-project-block-3 ul,
    .view-product-category>.row .views-row .views-field-view ul {
        padding: 0 !important;
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding-top: 12px !important;

        .field-content {
            display: flex;

        }

        li {
            height: auto !important;
        }

        a {
            color: #fff;
            font-size: 16px !important;
            line-height: 22px !important;
        }


    }

    .view-product-category>.row .views-row .toggle-button {
        background-color: transparent;
        border: none;
        font-size: 20px;
        cursor: pointer;
        color: #fff;
        padding: 5px;
        margin-left: 10px;
        transition: transform 0.3s ease;
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        /* Smooth animation for toggle button */
    }

    .view-product-category>.row .views-row .views-field-name .field-content {
        display: flex;
        align-items: center;
        width: 100%;
        position: relative;
    }


    .block-system-main-block .view-taxonomy-term .feed-icons,
    .block-system-main-block .view-taxonomy-term .view-content article {
        display: none;
    }

    .service-inner,
    .product-inner {
        padding-top: 90px;
    }

    .service-inner .block-field-blocktaxonomy-termservicename,
    .product-inner .block-field-blocktaxonomy-termproductname {
        color: #000;
        font-size: 33px;
        font-style: normal;
        font-weight: 600;
        line-height: 38.389px;
        margin-bottom: 25px;
    }

    .service-inner .block-field-blocktaxonomy-termservicefield-media-image img,
    .product-inner .block-field-blocktaxonomy-termproductfield-media-image img {
        /* width: 100%; */
        height: auto;
    }

    .service-inner .block-field-blocktaxonomy-termservicedescription,
    .product-inner .block-field-blocktaxonomy-termproductdescription {
        color: var(--gray-color);
        text-align: justify;
        font-size: 15px;
        font-style: normal;
        font-weight: 500;
        line-height: 24.43px;
        margin-block: 35px;

        li {
            display: list-item;
            list-style-type: disc;
            list-style-position: inside;
        }
    }

    .service-inner .block-views-blockservice-block-1,
    .product-inner .block-views-blockproduct-block-1 {
        margin-bottom: 35px;
    }

    .block-field-blocktaxonomy-termproductfield-weight2 {
        display: none;
    }

    .service-inner .ui-accordion .ui-accordion-header,
    .product-inner .ui-accordion .ui-accordion-header {
        background: #E6E6E6 url('./plus.svg') no-repeat 96% center;
        color: #515151;
        padding: 22px 45px;
        font-size: 21px;
        font-family: var(--main-font);
        font-style: normal;
        font-weight: 600;
        line-height: normal;
        margin-top: 14px;
        border: none;
    }

    .service-inner .ui-accordion .ui-accordion-header.ui-accordion-header-active,
    .product-inner .ui-accordion .ui-accordion-header.ui-accordion-header-active {
        color: var(--bs-white);
        background: var(--main-color) url('./minus.svg') no-repeat 96% center;
    }

    .service-inner .block-views-blockservice-block-1 fieldset,
    .product-inner .block-views-blockproduct-block-1 fieldset {
        display: flex;
        justify-content: space-between;
        padding-block: 35px;
    }

    .service-inner .block-views-blockservice-block-1 fieldset .views-field-body,
    .product-inner .block-views-blockproduct-block-1 fieldset .views-field-body {
        width: 58%;
        color: var(--gray-color);
        text-align: justify;
        font-size: 15px;
        font-style: normal;
        font-weight: 500;
        line-height: 24.43px;

        p {
            margin: 0 !important;
        }
    }

    .service-inner .block-views-blockservice-block-1 fieldset .views-field-field-media-image,
    .product-inner .block-views-blockproduct-block-1 fieldset .views-field-field-media-image {
        width: 40%;
    }

    /* ========== product / service ========== */

    /* ========== project ========== */

    .block-views-blockproject-block-1 {
        padding: 48px 0px;
    }

    .block-views-blockproject-block-1 .row {
        display: flex !important;
    }

    .block-views-blockproject-block-1 .row .views-row {
        margin-bottom: 35px;
    }

    .block-views-blockproject-block-1 .row .views-row fieldset {
        background: #F9F9FB;
    }

    .block-views-blockproject-block-1 .row .views-row fieldset .views-field-field-media-image img {
        width: 100%;
        height: 255px;
        object-fit: cover;
    }

    .block-views-blockproject-block-1 .row .views-row fieldset {

        .views-field.views-field-field-media-image,
        .views-field.views-field-field-media-image * {
            width: 100%;
        }
    }

    .block-views-blockproject-block-1 .row .views-row fieldset .views-field-title a {
        color: var(--main-color);
        font-size: 17.206px;
        font-style: normal;
        font-weight: 600;
        line-height: 19.977px;
        display: block;
        margin: 15px;
    }

    .block-views-blockproject-block-1 .row .views-row fieldset .views-field-view-node a {
        color: #909090;
        font-size: 12.746px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
        display: block;
        width: max-content;
        margin: 0 15px 15px;
        border-bottom: 1px solid #909090;
    }

    #block-bootstrap-barrio-subtheme-views-block-project-block-2 {
        padding-top: 80px;
        margin: 0 70px;
    }

    #block-bootstrap-barrio-subtheme-views-block-project-block-2 .views-field-field-media-image img {
        /* width: 100%;
        height: 358px; */
    }

    #block-bootstrap-barrio-subtheme-views-block-project-block-2 fieldset {
        background: #F8F8F8;
        margin-block: 30px;
        padding: 30px;
    }

    #block-bootstrap-barrio-subtheme-views-block-project-block-2 .field-content {
        color: var(--gray-color);
        font-size: 14px;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
        margin-block: 10px 36px;
    }

    #block-bootstrap-barrio-subtheme-views-block-project-block-2 .views-field-field-scope-of-work .field-content {
        /* margin: 0; */
    }

    #block-bootstrap-barrio-subtheme-views-block-project-block-2 .views-label {
        color: var(--main-color);
        font-size: 17px;
        font-family: var(--main-font);
        font-style: normal;
        font-weight: 600;
        line-height: normal;
        margin-bottom: 12px;
    }

    #block-bootstrap-barrio-subtheme-views-block-project-block-2 .views-field-title .field-content {
        font-size: 33px;
        font-style: normal;
        font-weight: 600;
        line-height: 38.389px;
        margin-bottom: 35px;
        color: #000;
        display: block;
    }

    /* ========== project ========== */

    /* ========== new ========== */

    .block-views-blocknew-block-1 {
        padding-top: 90px;
    }

    .block-views-blocknew-block-1 .row {
        display: flex !important;
    }

    .block-views-blocknew-block-1 .row .views-row {
        margin-bottom: 35px;

        .field-content,
        .views-field-fieldset {
            height: 100%;

        }
    }

    .block-views-blocknew-block-1 .row .views-row fieldset {
        background: #F9F9FB;
        height: 100%;
    }

    .career .block-inline-blockbasic {
        p {
            margin: 0;
        }

    }

    .block-views-blocknew-block-1 .row .views-row fieldset .views-field-field-media-image img {
        width: 100%;
        height: 255px;
        object-fit: cover;
    }

    .block-views-blocknew-block-1 .row .views-row fieldset .views-field-title a {
        color: var(--main-color);
        font-size: 17.206px;
        font-style: normal;
        font-weight: 600;
        line-height: 19.977px;
        display: block;
        margin: 15px;
    }

    .block-views-blocknew-block-1 .row .views-row fieldset .views-field-field-date {
        color: #D78287;
        font-size: 12.746px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
        display: block;
        margin: 15px 15px 0;
    }

    .block-views-blocknew-block-1 .row .views-row fieldset .views-field-view-node a {
        color: #909090;
        font-size: 12.746px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
        display: block;
        width: max-content;
        margin: 0 15px 15px;
        border-bottom: 1px solid #909090;
    }

    #block-bootstrap-barrio-subtheme-views-block-new-block-2 {
        padding-top: 80px;
        margin: 0 70px;
    }

    #block-bootstrap-barrio-subtheme-views-block-new-block-2 .views-field-field-media-image img {
        /* width: 100%; */
        height: auto;
    }

    #block-bootstrap-barrio-subtheme-views-block-new-block-2 fieldset {
        background: #F8F8F8;
        margin-block: 30px;
        padding: 30px;
    }

    #block-bootstrap-barrio-subtheme-views-block-new-block-2 .views-field-body {
        padding: 30px;
        background: #F8F8F8;
        color: var(--gray-color);
        font-size: 15px;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
        margin-top: 20px;
        text-align: justify;
    }

    #block-bootstrap-barrio-subtheme-views-block-new-block-2 .views-field-title .field-content {
        font-size: 33px;
        font-style: normal;
        font-weight: 700;
        line-height: 38.389px;
        margin-bottom: 35px;
        color: #000;
        display: block;
    }

    /* #block-bootstrap-barrio-subtheme-views-block-new-block-2 .views-field-field-date .views-label, */
    #block-bootstrap-barrio-subtheme-views-block-new-block-2 .views-field-field-date {
        color: #D78287;
        font-size: 12.746px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
        display: flex;
        gap: 5px;
        margin-bottom: 5px;
    }

    /* ========== project ========== */

    /* ========== forms ========== */

    .form-section {
        padding-top: 90px;
    }

    /* ========== forms ========== */

    form.user-login-form {
        max-width: 75%;
        margin: auto;
    }




    /* menu */

    .burger_menu {
        position: fixed;
        top: 18px;
        left: 24px;
        z-index: 99;
        width: 50px;
        height: 50px;
        background: url('./menu.png') var(--main-color) no-repeat center;
        cursor: pointer;
        background-size: 35px;

    }

    .burger_menu.active::after {
        display: none;
    }

    /* Keep your existing style */
    .burger_menu::after {
        content: "- Main Menu";
        position: absolute;
        right: -160px;
        top: 50%;
        transform: translateY(-50%);
        color: #ffffff;
        white-space: nowrap;
        font-size: 21px;
        font-style: normal;
        font-weight: 600;
        padding: 15px 10px;
        background-color: var(--main-color);
        opacity: 1;
        /* Default visible */
        transition: opacity 0.3s ease;
    }

    .burger_menu.hide-label::after {
        opacity: 0;
        /* Hidden state */
    }


    .path-frontpage .burger_menu::after {
        display: none;
    }

    .side_menu {

        background: #144253C2;
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        z-index: 91;
        display: none;
        opacity: 0;
        transition: ease 1.5s;
    }

    .side_menu.show {
        opacity: 1;
        background: url("./vid.gif") no-repeat center;
        background-size: cover;
        display: block;
    }

    .side_menu>section {
        /* display: flex; */
        background: #144253C2;
        flex-wrap: nowrap;
        padding: 110px 190px;
        height: 100%;
    }

    .side_menu>section>nav {
        width: auto;
    }

    nav#block-bootstrap-barrio-subtheme-aboutmenu-2 {
        width: 40%;
    }

    nav#block-bootstrap-barrio-subtheme-aboutmenu-2 h2 {
        color: #FFF;
        /* font-family: Poppins; */
        font-size: 24.673px;
        font-style: normal;
        font-weight: 600;
        line-height: 51.735px;
        margin-bottom: 15px;
    }

    nav#block-bootstrap-barrio-subtheme-aboutmenu-2 li.menu-item {
        width: 100%;
        margin-bottom: 10px;
    }

    nav#block-bootstrap-barrio-subtheme-aboutmenu-2 li.menu-item a {
        color: #ECECEC;
        font-size: 20.408px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
    }

    nav#block-bootstrap-barrio-subtheme-mainmenu {
        width: 60%;
    }

    nav#block-bootstrap-barrio-subtheme-mainmenu ul {
        display: flex;
        flex-wrap: wrap;
        gap: 50px;
    }

    nav#block-bootstrap-barrio-subtheme-mainmenu li.menu-item {
        width: 44%;
    }

    nav#block-bootstrap-barrio-subtheme-mainmenu li.menu-item a {
        color: #FFF;
        font-size: 24.673px;
        font-style: normal;
        font-weight: 400;
        line-height: 51.735px;
        /* 209.677% */
    }



    /* forms */
    .form-required::after,
    .form-section .block-webform form .js-form-wrapper #edit-phone---wrapper .fieldset-legend::after {
        content: '';
        vertical-align: super;
        display: inline-block;
        background-image: url(../../images/required.svg);
        background-repeat: no-repeat;
        background-size: 7px 7px;
        width: 7px;
        height: 7px;
        margin: 0 0.3em;
    }

    .form-section .block-webform {
        background: #F9F9F9;
        padding: 55px 88px;
        margin-top: 10px;
    }

    .form-section .block-webform h2 {
        color: #1A6F86;
        font-size: 19.716px;
        font-style: normal;
        font-weight: 600;
        line-height: 18.958px;
        text-transform: capitalize;
        margin-bottom: 28px;
    }

    .form-section .block-webform form {
        display: flex;
        flex-wrap: wrap;
        gap: 22px;
        justify-content: space-between;
    }

    .form-section .block-webform form .js-form-wrapper {
        width: 48%;
    }

    .form-section .block-webform form #edit-phone---wrapper {
        width: 100%;
    }

    .path-webform .burger_menu::after {
        opacity: 0;
    }

    .form-section .block-webform form .js-form-item {
        width: 48%;
        display: flex;
        flex-direction: column;
    }

    .form-item--error-message {
        display: none;
    }

    /* 
    .form-section .block-webform form .form-type-tel {
        width: 100% !important;
    } */

    .form-section .block-webform form .fieldset-legend,
    .form-section .block-webform form .js-form-item label {
        color: #000;
        font-size: 15.925px;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
        text-transform: capitalize;
        margin-bottom: 10px;


    }



    .form-section .block-webform #edit-phone--wrapper legend {
        font-size: 16px;
    }



    .form-section .block-webform form .js-form-item select,
    .form-section .block-webform form .js-form-item input {
        border-radius: 7.583px;
        border: 0.758px solid #E4E4E4;
        height: 50px;
    }

    .form-section .block-webform form .js-form-item.js-form-type-textarea,
    .form-section .block-webform form .js-form-item.js-form-item-choose-file-to-be-downloaded {
        width: 100%;
    }


    .form-section .block-webform form .js-form-item.js-form-type-checkbox {
        width: 100%;

        input {
            border-color: var(--main-color);
        }
    }

    .form-section .block-webform form .js-form-item.js-form-type-checkbox {
        width: 100%;
        display: flex;
        align-items: flex-end;
        min-height: auto;
        gap: 5px;
        flex-direction: row;
    }

    .form-section .block-webform form .js-form-item.js-form-type-checkbox input {
        width: 15px;
        height: 15px;
        border-radius: 3px;
    }

    .form-section .block-webform form .js-form-item.js-form-type-checkbox label.form-check-label {
        color: #375384;
        font-family: var(--main-font);
        font-size: 11.65px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
        margin: 0;
    }

    #edit-add-your-cv-upload::file-selector-button {
        color: white;
        border: none;
        padding: 8px 16px;
        border-radius: 4px;
        cursor: pointer;
        padding: 13px 24px;
        display: flex;
        background: #D73F3F;
        border-radius: 8px;
        color: #FFF;
        /* font-family: Poppins; */

    }

    .form-section .block-webform form #ajax-wrapper {
        width: 100% !important;
    }

    .form-section .block-webform form .js-form-item-add-your-cv {
        width: 100% !important;
    }

    .form-section .block-webform form .form-actions button {
        display: flex;
        min-width: 144.839px;
        height: 42.466px;
        padding: 11.375px 46.257px;
        justify-content: center;
        align-items: center;
        gap: 7.583px;
        border-radius: 7.583px;
        background: #1A6F86;
        border: 0;
    }


    .form-section-contact {
        padding: 90px 0;
    }


    .form-section-contact .layout.row {
        gap: 60px;
    }

    .c-form-contact {
        width: 60% !important;
    }


    .c-info-contact>.block-views {
        padding: 55px 30px;
        border-radius: 20px;
        background: #1A6F86;
        color: #fff;
        height: 100%;
        position: relative;
        z-index: 90;
        overflow: hidden;

        .views-row {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
    }

    .iti__country-list.iti__hide {
        display: none;
    }

    #edit-choosing-the-department option:first-child {
        color: #a0a0a0;
        /* Placeholder color */
    }

    .c-info-contact>.block-views::after {
        content: "";
        position: absolute;
        bottom: -67px;
        right: -56px;
        background: url(./back-us.png) rgba(0, 0, 0, 0.10) no-repeat;
        background-size: 164px;
        background-position: center;
        border-radius: 20px;
        z-index: 0;
        padding: 132px;
        border-radius: 42%;
        z-index: -1;

    }

    .c-info-contact .views-field.views-field-title {
        color: #FFF;
        font-size: 24px;
        font-style: normal;
        font-weight: 500;
        line-height: 160%;
        letter-spacing: 0.48px;
    }

    .c-info-contact .views-field.views-field-body {
        color: rgba(255, 255, 255, 0.60);
        font-size: 16px;
        font-style: normal;
        font-weight: 500;
        line-height: 160%;
        letter-spacing: 0.32px;
    }

    .c-info-contact .views-field {
        display: flex;
        gap: 5px;
        color: #FFF;
        font-size: 17.376px;
        font-style: normal;
        font-weight: 500;
        line-height: 23.191px;
        margin-bottom: 15px;
        flex-wrap: wrap;
    }

    .c-info-contact .views-field a {
        color: #fff;
    }

    .c-info-contact .views-field.views-field-field-map iframe {
        width: 100%;
        height: 200px;
        border-radius: 10px;
        box-shadow: 0 0 0px 5px #fff;
    }

    .c-info-contact .views-field-field-location {
        margin-bottom: 20px;
    }

    .c-info-contact .views-field-field-location a {
        text-decoration: underline;
    }

    .views-field-field-map {
        justify-content: center;
    }


    .c-form-contact .block-webform form {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
    }


    .c-form-contact .block-webform form .js-form-item {
        width: 48%;
    }

    .c-form-contact .block-webform form .js-form-item label {
        color: #000;
        font-size: 15.925px;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
        text-transform: capitalize;
        margin-bottom: 10px;
    }

    .c-form-contact .block-webform form .js-form-item select {
        color: #a0a0a0;

    }

    .c-form-contact .block-webform form .js-form-item select,
    .c-form-contact .block-webform form .js-form-item input {
        border-radius: 7.583px;
        border: 0.758px solid #E4E4E4;
        height: 50px;
    }

    .c-form-contact .block-webform form .js-form-item input::placeholder {
        color: #a0a0a0;
    }

    .c-form-contact .block-webform form .js-form-item.js-form-type-textarea,
    .c-form-contact .block-webform form .js-form-item.js-form-item-choose-file-to-be-downloaded {
        width: 100%;
    }


    .c-form-contact .block-webform form .js-form-item.js-form-type-checkbox {
        width: 100%;
    }

    .c-form-contact .block-webform form .js-form-item.js-form-type-checkbox {
        width: 100%;
        display: flex;
        align-items: center;
        min-height: auto;
        gap: 5px;
    }

    .c-form-contact .block-webform form .js-form-item.js-form-type-checkbox input {
        width: 15px;
        height: 15px;
        border-radius: 3px;
    }

    .c-form-contact .block-webform form .js-form-item.js-form-type-checkbox label.form-check-label {
        color: #375384;
        font-size: 11.65px;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
        margin: 0;
    }


    .c-form-contact .block-webform form .form-actions button {
        display: flex;
        min-width: 144.839px;
        height: 42.466px;
        padding: 11.375px 46.257px;
        justify-content: center;
        align-items: center;
        gap: 7.583px;
        border-radius: 7.583px;
        background: #1A6F86;
        border: 0;
    }


    .c-page-milestones .c-left {
        width: 65%;
        padding-top: 90px;
        padding-inline-start: 60px;
        padding-inline-end: 165px;
    }

    .c-page-milestones .c-left h2 {
        font-size: 33px;
        font-style: normal;
        font-weight: 600;
        line-height: 38.389px;
        margin-bottom: 30px;
    }



    .c-page-milestones .c-right {
        width: 35%;
        height: 100%;
        /* position: relative; */
        position: relative;
    }

    .c-page-milestones .c-right::after {
        content: "";
        position: fixed;
        right: 0;
        top: 0;
        width: 300px;
        height: 100vh;
        background-color: #F3F3F3;
        z-index: 5;
    }


    .c-page-milestones .c-right .field--name-body {
        height: 100vh;
        padding-block: 90px;
    }


    .c-page-milestones .c-right img {
        position: fixed;
        z-index: 9;
        right: 0;
        max-width: 515px;
        height: 80%;
        object-fit: cover;
        border-radius: 80px 0px 0px 80px;
        top: 50%;
        transform: translateY(-50%);
    }


    /* تأكد من أن القائمة تأخذ الطول المناسب وتعرض بشكل عامودي */
    .block-views-blockmilestones-block-1 .item-list ul {
        max-height: 600px;
        /* حسب التصميم لديك */
        overflow: hidden;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
    }

    /* عناصر السلايدر */
    .block-views-blockmilestones-block-1 .item-list ul li {
        display: block;
    }

    .block-views-blockmilestones-block-1 .item-list ul .slick-list {
        height: 500.475px !important;
    }

    .block-views-blockmilestones-block-1 button.slick-arrow {
        border-radius: 30.166px;
        color: #11657B;
        border: 0;
        font-size: 0;
        background: #F5F5F5;
        width: 38px;
        height: 38px;
        margin-inline-start: 11px;
    }

    /* تغيير اتجاه الأسهم إن أردت تخصيصها بشكل مشابه للتصميم */
    .block-views-blockmilestones-block-1 .slick-arrow.slick-prev::before {
        content: "▲";
        /* سهم للأعلى */
        font-size: 15px;
    }

    .block-views-blockmilestones-block-1 .slick-arrow.slick-next::before {
        content: "▼";
        /* سهم للأسفل */
        font-size: 15px;
    }


    .block-views-blockmilestones-block-1 .c-group {
        display: flex;
        gap: 20px;
        padding: 30px 0;
        position: relative;
        z-index: 555;
        transition: .3s;
    }

    .block-views-blockmilestones-block-1 .c-group:hover .views-field-field-count {
        background-color: rgb(215 130 135);
        width: 62.331px;
        height: 62.331px;
        border-radius: 50%;
        box-shadow: 1px 0 0 #a2a2a2;
        font-size: 20px;

    }

    .block-views-blockmilestones-block-1 .c-group:hover .views-field.views-field-title {
        color: rgb(215 130 135);
        font-size: 21px;
    }

    .block-views-blockmilestones-block-1 .c-group:nth-child(1)::before {
        background: #11657B;
        top: 50%;
    }

    .block-views-blockmilestones-block-1 .slick-slide.slick-active:last-of-type .c-group::before {
        height: 2px;
    }

    .block-views-blockmilestones-block-1 .c-group:before {
        position: absolute;
        content: "";
        width: 2px;
        height: 104%;
        background: #11657B;
        left: 29px;
        z-index: -1;
        top: 0px;
    }

    .block-views-blockmilestones-block-1 .views-field-field-count {
        border-radius: 30.166px;
        background: #11657B;
        display: flex;
        width: 60.331px;
        height: 60.331px;
        padding: 12px 25px;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 10px;
        color: #fff;
        font-size: 18px;

        transition: all .5s;
    }

    .block-views-blockmilestones-block-1 .views-field.views-field-title {
        color: #1C1F35;
        font-size: 20px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
        transition: .3s;
        transition: all .5s;
        margin-bottom: 10px;
    }

    .block-views-blockmilestones-block-1 .views-field.views-field-body {
        color: rgba(0, 0, 0, 0.60);
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
    }

    #block-views-blockmission-block-1 .views-field-field-strategy .list-group {
        margin: 0 0 0.25em 20px !important;
    }

    .page-node-4 #block-bootstrap-barrio-subtheme-views-block-product-block-1 {
        /* display: none; */
    }

    .ui-state-active .ui-icon,
    .ui-button:active .ui-icon,
    .ui-icon-triangle-1-e {
        display: none !important;
    }

    .select2-container--default .select2-selection--multiple .select2-selection__rendered {
        display: flex;
        align-items: center;


    }

    .select2-container--default .select2-selection--multiple .select2-selection__choice {
        all: unset;
        color: var(--main-color);

    }

    .select2-container--default .select2-selection--multiple .select2-selection__choice::after {
        content: "-";
        color: var(--main-color);
        padding-inline: 10px;
    }


    input.select2-search__field {
        border: none !important;
    }

    .select2.select2-container::after {
        content: '';
        position: absolute;
        top: 50%;
        right: 16px;
        width: 0;
        height: 0;
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        border-top: 6px solid var(--main-color);
        z-index: 2;
    }

    .download {
        font-size: 31px;
        font-family: var(--main-font);
        font-style: normal;
        font-weight: 600;
        line-height: 38.389px;
        margin-bottom: 54px;
        padding-inline-start: 27px;
    }

    .captcha {
        width: 100%;

        legend {
            display: none;

        }

        .captcha__description {
            display: none;
        }
    }

    .webform-confirmation {
        position: fixed;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        background: #f9f9f9;
        padding: 25px 35px;
        border: 1px solid #ddd;
        border-radius: 10px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        text-align: center;
        font-family: Arial, sans-serif;
        color: #333;
    }

    .webform-confirmation__message {
        font-size: 18px;
        margin-bottom: 20px;
        color: #2d2d2d;
    }

    .webform-confirmation__back a {
        display: inline-block;
        padding: 10px 20px;
        background-color: var(--main-color);
        color: white;
        text-decoration: none;
        border-radius: 5px;
        font-weight: bold;
        transition: background-color 0.3s ease;
    }

    .webform-confirmation__back a:hover {
        color: #fff !important;
        background-color: var(--gray-color);
    }


    .block-views-blocknew-block-1 .view-filters {
        display: none;
    }

    .block-views-blocknew-block-1 .view-filters.show {
        display: block;

        #edit-submit-new {
            margin-inline: 10px;
            background-color: #11657B;
            color: #fff;
            border: none;
        }
    }

    .block-views-blocknew-block-1 .view-filters .form-item-sort-by {
        display: none;
    }

    .filter-btn {
        color: #000;
        font-family: var(--main-font);
        font-weight: 600;
        letter-spacing: 1;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .filter-btn::before {
        content: "";
        display: flex;
        width: 36px;
        height: 36px;
        background: url(./fil.svg) #eaeaea no-repeat center;
        border-radius: 10px;
        align-items: center;
        align-content: center;

    }



    .career .block-webform form .js-form-item-choose-the-desire-position,
    .career .block-webform form .js-form-item-current-position-employer,
    .career .block-webform form .js-form-item-highest-qualification {
        width: 100% !important;
    }

    .path-search-advance {
        height: 100vh;
        background: #f9f9f9 !important;
    }

    .path-search-advance #main-wrapper {
        background: transparent !important;
        position: absolute;
        left: 50%;
        top: 28%;
        transform: translate(-50%, -50%);

        .form-actions,
        .form-type-textfield {
            margin: 0 !important;
        }
    }



    .path-search-advance #main-wrapper form>.d-flex {
        padding: 11px;
        background-color: #fff;
        box-shadow: 0px 4px 14px 0px #E5E5E5;
        flex-wrap: nowrap !important;
        border-radius: 7px;
    }

    .path-search-advance #main-wrapper form>.d-flex input.form-autocomplete {
        width: 600px;
        border: none;
        background: url(./search.svg) no-repeat 15px !important;
        background-position: 2% center !important;
        background-size: 20px !important;
        opacity: .5;
        padding-inline-start: 60px;
        font-size: 19px;
        font-weight: 600;
    }

    .path-search-advance #main-wrapper form>.d-flex button {
        padding: 4px 40px;
        font-size: 21px;
        font-weight: 600;
        background: var(--main-color);
        border: none;
        border-radius: 7px;
    }

    .path-search-advance .ui-widget.ui-widget-content li a:first-child {
        all: unset !important;
        display: flex !important;
        gap: 10px !important;
        width: 100% !important;
        padding: 10px !important;
        font-family: var(--main-font) !important;
        font-weight: 400 !important;
        font-style: normal !important;
        font-size: 20px !important;
        line-height: 100% !important;
        letter-spacing: 0% !important;
        color: #C4C4C4 !important;
        align-items: center !important;
    }

    .path-search-advance .ui-widget.ui-widget-content {
        top: 303.125px !important;
        left: 342.375px !important;
        display: flex;
        flex-direction: column;
        gap: 12px;
        width: 758px !important;
        padding: 40px 29px;
        box-shadow: 0px 4px 35px 0px #DCDCDC;
        border-radius: 10px;
        border: none;
        height: 317px;
        overflow-y: scroll;

        li a a {
            all: unset !important;
            display: flex !important;
            gap: 10px !important;
            width: 100% !important;
            padding: 10px !important;
            font-family: var(--main-font) !important;
            font-weight: 400 !important;
            font-style: normal !important;
            font-size: 20px !important;
            line-height: 100% !important;
            letter-spacing: 0% !important;
            color: #C4C4C4 !important;
            align-items: center !important;
        }


        li a a::before {
            content: "";
            display: inline-block;
            width: 24px;
            height: 24px;
            background: url(./clock.svg) no-repeat;
        }

        li a:hover {
            background-color: #F6F6F6;
        }

        .ui-state-wrapper {
            all: unset;
            border: none !important;
            background-color: #F6F6F6 !important;

        }
    }

    .gg {
        h2 {
            padding-inline: 10px;
            padding-top: 35px;
        }

        .col-12 {
            padding: 0 !important;
            border: none !important;
        }
    }

    .page-node-122 {
        padding: 80px 60px 80px 100px;

        .col-12 {
            padding: 0;
            padding-bottom: 90px;
            border-bottom: 1px solid #e1e1e1;
        }



        .block-views-blockproject-block-3>h2,
        .block-views-blockproduct-category-block-3>h2,
        nav h2 {
            padding-top: 15px;
            font-family: var(--main-font);
            font-weight: 600;
            font-style: Medium;
            font-size: 17px;
            leading-trim: NONE;
            line-height: 25px;
            letter-spacing: -0.37px;
        }
    }

    .page-node-122 .menu--about-us-map ul {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 10px;
        padding-top: 10px;

        a {
            font-size: 16px;
            font-family: var(--main-font);
            font-weight: 500;
        }
    }

    .block-views-blockproject-block-3 .view-content,
    .block-views-blockproduct-category-block-3 .view-content {
        flex-direction: column;
        gap: 5px;

        .col-md-6,
        .col-md-4 {
            width: 100% !important;
            margin: 0 !important;
        }

        a {
            font-size: 16px;
            font-family: var(--main-font);
            font-weight: 500;
        }
    }

    .menu--home-map-site-menu {
        padding-top: 25px;
    }

    .menu--home-map-site-menu ul {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding-inline-start: 181px;
        gap: 20px;

        a {
            color: #000;
            font-size: 16px;
            font-family: var(--main-font);
            font-weight: 600;
        }
    }

    .page-node-4 .block-inline-blockbasic {
        position: absolute;
        right: 77px;
        bottom: 15%;
        background: #fff;
        padding: 23.852px;
        border-radius: 19px;
        z-index: 15;

        .field--name-body {
            display: flex;
            align-items: flex-end;
            gap: 20px;
        }

        strong {
            font-size: 77px;
            color: #116177;
        }

        p {
            color: #116177;
            font-size: 29.584px;
            font-style: normal;
            font-weight: 500;
            line-height: 36.142px;

        }
    }


    #pre-load {
        background: #000;
        position: fixed;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 9999999999;
        opacity: 1;
        transition: opacity 0.5s ease;
        pointer-events: auto;
    }

    #pre-load .loader-inner {
        --loader-background: linear-gradient(0deg,
                rgba(17, 97, 119, 0.2) 0%,
                rgba(17, 97, 119, 0.2) 100%);
        position: relative;
        height: 250px;
        aspect-ratio: 1;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #pre-load .loader-inner .loader-logo {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 80px;
        height: 80px;
        display: flex;
        align-items: center;
        justify-content: center;
        animation: color-change 2s infinite ease-in-out;
        z-index: 999;
    }

    #pre-load .loader-inner .loader-logo svg {
        width: 100%;
        height: 100%;
        fill: #116177;
    }

    #pre-load .loader-inner .box {
        position: absolute;
        background: var(--loader-background);
        border-radius: 50%;
        border-top: 1px solid #116177;
        box-shadow: rgba(17, 97, 119, 0.3) 0 10px 10px 0;
        backdrop-filter: blur(5px);
        animation: ripple 2s infinite ease-in-out;
    }

    #pre-load .loader-inner .box:nth-child(1) {
        width: 25%;
        aspect-ratio: 1/1;
        z-index: 99;
    }

    #pre-load .loader-inner .box:nth-child(2) {
        inset: 30%;
        z-index: 98;
        border-color: rgba(17, 97, 119, 0.8);
        animation-delay: 0.2s;
    }

    #pre-load .loader-inner .box:nth-child(3) {
        inset: 20%;
        z-index: 97;
        border-color: rgba(17, 97, 119, 0.6);
        animation-delay: 0.4s;
    }

    #pre-load .loader-inner .box:nth-child(4) {
        inset: 10%;
        z-index: 96;
        border-color: rgba(17, 97, 119, 0.4);
        animation-delay: 0.6s;
    }

    #pre-load .loader-inner .box:nth-child(5) {
        inset: 0;
        z-index: 95;
        border-color: rgba(17, 97, 119, 0.2);
        animation-delay: 0.8s;
    }

    @keyframes ripple {
        0% {
            transform: scale(1);
            box-shadow: rgba(17, 97, 119, 0.3) 0 10px 10px 0;
        }

        50% {
            transform: scale(1.3);
            box-shadow: rgba(17, 97, 119, 0.3) 0 30px 20px 0;
        }

        100% {
            transform: scale(1);
            box-shadow: rgba(17, 97, 119, 0.3) 0 10px 10px 0;
        }
    }

    @keyframes color-change {
        0% {
            opacity: 0.7;
        }

        50% {
            opacity: 1;
        }

        100% {
            opacity: 0.7;
        }
    }

    .view-search .view-content {
        min-height: 200px;
        max-height: 500px;
        overflow: scroll;
        padding-top: 32px;
        gap: 10px;
        position: absolute;

        a {
            color: #116177;
            font-size: 18px;
        }
    }


    .select2-container--default .select2-results>.select2-results__options {
        display: flex !important;
        flex-direction: column !important;
    }

    .iti__country-list {
        /* width: 18% !important; */
        display: flex;
        flex-direction: column;
    }

    .webform-submission-career-form #edit-phone---wrapper legend {
        font-size: 0.5rem !important;
    }

    #block-bootstrap-barrio-subtheme-views-block-service-category-block-2 .views-field-name a::after,
    #block-bootstrap-barrio-subtheme-views-block-new-block-3 .views-field-title a::after,
    #block-bootstrap-barrio-subtheme-views-block-project-block-3 .views-field-title a::after,
    #block-bootstrap-barrio-subtheme-views-block-product-category-block-2 .views-field-name a::after {
        content: "";
        background: url(./menu-arrow.svg) no-repeat center center;
        background-size: contain;
        width: 46px;
        height: 71px;
        position: absolute;
        top: 0;
        right: -43px;
        z-index: 9;

        opacity: 0;
        transform: translateY(-10px);
        transition: opacity 0.3s ease, transform 0.3s ease;
        pointer-events: none;
    }

    #block-bootstrap-barrio-subtheme-views-block-service-category-block-2 .views-field-name a:hover,
    #block-bootstrap-barrio-subtheme-views-block-product-category-block-2 .views-field-name a:hover {
        color: #D78287;
    }

    /* Show on hover */
    #block-bootstrap-barrio-subtheme-views-block-service-category-block-2 .views-field-name a:hover::after,
    #block-bootstrap-barrio-subtheme-views-block-new-block-3 .views-field-title a:hover::after,
    #block-bootstrap-barrio-subtheme-views-block-project-block-3 .views-field-title a:hover::after,
    #block-bootstrap-barrio-subtheme-views-block-product-category-block-2 .views-field-name a:hover::after {
        opacity: 1;
        transform: translateY(0);
    }

    /* Show if active, but not if temporarily disabled */

    #block-bootstrap-barrio-subtheme-views-block-service-category-block-2 .views-field-name a.active-link:not(.temporarily-disabled)::after,
    #block-bootstrap-barrio-subtheme-views-block-new-block-3 .views-field-title a.active-link:not(.temporarily-disabled)::after,
    #block-bootstrap-barrio-subtheme-views-block-project-block-3 .views-field-title a.active-link:not(.temporarily-disabled)::after,
    #block-bootstrap-barrio-subtheme-views-block-product-category-block-2 .views-field-name a.active-link:not(.temporarily-disabled)::after {
        opacity: 1;
        transform: translateY(0);
    }


    #ui-id-1:focus,
    #ui-id-1:focus-visible {
        outline: none !important;
        box-shadow: none !important;
    }

    /* خلفية عامة */
    body.path-user {
        background: linear-gradient(135deg, #11657B, #1a6f86);
        font-family: "Cairo", "Segoe UI", Tahoma, sans-serif;
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;


        /* صندوق الفورم */
        #block-bootstrap-barrio-subtheme-content {
            width: 100%;
            max-width: 420px;
            background: #fff;
            border-radius: 16px;
            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
            padding: 40px 35px;
            animation: fadeIn 0.8s ease;
        }

        /* العنوان */
        h1.title {
            text-align: center;
            font-size: 28px;
            font-weight: 700;
            color: #116177;
            margin-bottom: 25px;
            position: relative;
        }

        h1.title::after {
            content: "";
            display: block;
            width: 60px;
            height: 3px;
            background: #11657B;
            margin: 12px auto 0;
            border-radius: 2px;
        }

        /* Tabs */
        nav.tabs {
            display: flex;
            justify-content: center;
            margin-bottom: 25px;
        }

        nav.tabs ul.nav {
            display: flex;
            gap: 12px;
            list-style: none;
            padding: 0;
        }

        nav.tabs .nav-link {
            padding: 7px 16px;
            border-radius: 20px;
            text-decoration: none;
            font-weight: 600;
            color: #116177;
            border: 1px solid #116177;
            transition: 0.3s;
        }

        nav.tabs .nav-link.active,
        nav.tabs .nav-link:hover {
            background: #116177;
            color: #fff;
        }

        /* الحقول */
        .user-login-form label {
            font-weight: 600;
            margin-bottom: 6px;
            color: #333;
        }

        .user-login-form .form-control {
            width: 100%;
            padding: 12px 14px;
            border: 1px solid #ccc;
            border-radius: 10px;
            margin-bottom: 18px;
            font-size: 15px;
            transition: 0.3s;
        }

        .user-login-form .form-control:focus {
            border-color: #116177;
            box-shadow: 0 0 6px rgba(30, 87, 168, 0.3);
            outline: none;
        }

        /* زر الدخول */
        .user-login-form .btn-primary {
            width: 100%;
            background: #116177;
            border: none;
            border-radius: 10px;
            padding: 12px;
            font-size: 16px;
            font-weight: 700;
            transition: background 0.3s, transform 0.2s;
        }

        .user-login-form .btn-primary:hover {
            background: #11657B;
            transform: translateY(-2px);
        }

        /* أنيميشن دخول */
        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(30px);
            }

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

        /* موبايل */
        @media (max-width: 576px) {
            #block-bootstrap-barrio-subtheme-content {
                padding: 25px 20px;
            }

            h1.title {
                font-size: 22px;
            }
        }
    }

    .webform-submission-form strong.error.form-item--error-message {
        display: none !important;
    }



    .form-section .block-webform form .js-form-type-processed-text {
        width: 100%;
    }

    .phone-number-body-wrapper,
    .email-body-wrapper {
        color: #fff;
    }


    @media (max-width: 700px) {
        .path-search-advance #main-wrapper {
            transform: translate(0, 0);
            position: static;
            margin-inline: 100px 20px;
            margin-top: 150px;
        }

        .path-search-advance #main-wrapper form>.d-flex input.form-autocomplete {
            width: 100%;
            border: none;
            background: url(./search.svg) no-repeat 15px !important;
            background-position: 2% center !important;
            background-size: 20px !important;
            opacity: .5;
            padding-inline-start: 40px;
            font-size: 19px;
            max-width: max-content;
            font-weight: 600;
            min-width: auto;
        }

        .path-search-advance #main-wrapper form>.d-flex {
            flex-direction: column;
            gap: 10px;
        }

        .path-search-advance .ui-widget.ui-widget-content {
            top: unset !important;
            width: min-content !important;
            max-width: 450px;
            position: relative;
            left: 87px !important;
        }
    }


    @media (max-width: 450px) {
        .path-search-advance .ui-widget.ui-widget-content {
            max-width: 300px !important;
            padding: 10px !important;
        }

        .path-search-advance .ui-widget.ui-widget-content li a:first-child {
            font-size: 13px !important;
            padding: 0 !important;
            line-height: 1.5 !important;
        }
    }