/**
 * @file
 * Subtheme specific CSS.
 */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Noto+Serif:ital,wght@0,100..900;1,100..900&display=swap');
/* Put the .ttf files in: /fonts (next to /css)
   Example:
   css/style.css
   fonts/*.ttf
*/

/* =========================
   Noto Serif Ethiopic ExtraCondensed
   ========================= */
@font-face {
    font-family: "Noto Serif Ethiopic ExtraCondensed";
    src: url("../fonts/NotoSerifEthiopic_ExtraCondensed-Thin.ttf") format("truetype");
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Noto Serif Ethiopic ExtraCondensed";
    src: url("../fonts/NotoSerifEthiopic_ExtraCondensed-ExtraLight.ttf") format("truetype");
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Noto Serif Ethiopic ExtraCondensed";
    src: url("../fonts/NotoSerifEthiopic_ExtraCondensed-Light.ttf") format("truetype");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Noto Serif Ethiopic ExtraCondensed";
    src: url("../fonts/NotoSerifEthiopic_ExtraCondensed-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Noto Serif Ethiopic ExtraCondensed";
    src: url("../fonts/NotoSerifEthiopic_ExtraCondensed-Medium.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Noto Serif Ethiopic ExtraCondensed";
    src: url("../fonts/NotoSerifEthiopic_ExtraCondensed-SemiBold.ttf") format("truetype");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Noto Serif Ethiopic ExtraCondensed";
    src: url("../fonts/NotoSerifEthiopic_ExtraCondensed-Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Noto Serif Ethiopic ExtraCondensed";
    src: url("../fonts/NotoSerifEthiopic_ExtraCondensed-ExtraBold.ttf") format("truetype");
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Noto Serif Ethiopic ExtraCondensed";
    src: url("../fonts/NotoSerifEthiopic_ExtraCondensed-Black.ttf") format("truetype");
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

/* =========================
   Noto Serif Ethiopic Condensed
   ========================= */
@font-face {
    font-family: "Noto Serif Ethiopic Condensed";
    src: url("../fonts/NotoSerifEthiopic_Condensed-Thin.ttf") format("truetype");
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Noto Serif Ethiopic Condensed";
    src: url("../fonts/NotoSerifEthiopic_Condensed-ExtraLight.ttf") format("truetype");
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Noto Serif Ethiopic Condensed";
    src: url("../fonts/NotoSerifEthiopic_Condensed-Light.ttf") format("truetype");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Noto Serif Ethiopic Condensed";
    src: url("../fonts/NotoSerifEthiopic_Condensed-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Noto Serif Ethiopic Condensed";
    src: url("../fonts/NotoSerifEthiopic_Condensed-Medium.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Noto Serif Ethiopic Condensed";
    src: url("../fonts/NotoSerifEthiopic_Condensed-SemiBold.ttf") format("truetype");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Noto Serif Ethiopic Condensed";
    src: url("../fonts/NotoSerifEthiopic_Condensed-Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Noto Serif Ethiopic Condensed";
    src: url("../fonts/NotoSerifEthiopic_Condensed-ExtraBold.ttf") format("truetype");
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Noto Serif Ethiopic Condensed";
    src: url("../fonts/NotoSerifEthiopic_Condensed-Black.ttf") format("truetype");
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

/* =========================
   Noto Serif Ethiopic SemiCondensed
   ========================= */
@font-face {
    font-family: "Noto Serif Ethiopic SemiCondensed";
    src: url("../fonts/NotoSerifEthiopic_SemiCondensed-Thin.ttf") format("truetype");
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Noto Serif Ethiopic SemiCondensed";
    src: url("../fonts/NotoSerifEthiopic_SemiCondensed-ExtraLight.ttf") format("truetype");
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Noto Serif Ethiopic SemiCondensed";
    src: url("../fonts/NotoSerifEthiopic_SemiCondensed-Light.ttf") format("truetype");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Noto Serif Ethiopic SemiCondensed";
    src: url("../fonts/NotoSerifEthiopic_SemiCondensed-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Noto Serif Ethiopic SemiCondensed";
    src: url("../fonts/NotoSerifEthiopic_SemiCondensed-Medium.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Noto Serif Ethiopic SemiCondensed";
    src: url("../fonts/NotoSerifEthiopic_SemiCondensed-SemiBold.ttf") format("truetype");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Noto Serif Ethiopic SemiCondensed";
    src: url("../fonts/NotoSerifEthiopic_SemiCondensed-Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Noto Serif Ethiopic SemiCondensed";
    src: url("../fonts/NotoSerifEthiopic_SemiCondensed-ExtraBold.ttf") format("truetype");
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Noto Serif Ethiopic SemiCondensed";
    src: url("../fonts/NotoSerifEthiopic_SemiCondensed-Black.ttf") format("truetype");
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

/* =========================
   Noto Serif Ethiopic (Normal width)
   ========================= */
@font-face {
    font-family: "Noto Serif Ethiopic";
    src: url("../fonts/NotoSerifEthiopic-Thin.ttf") format("truetype");
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Noto Serif Ethiopic";
    src: url("../fonts/NotoSerifEthiopic-ExtraLight.ttf") format("truetype");
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Noto Serif Ethiopic";
    src: url("../fonts/NotoSerifEthiopic-Light.ttf") format("truetype");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Noto Serif Ethiopic";
    src: url("../fonts/NotoSerifEthiopic-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Noto Serif Ethiopic";
    src: url("../fonts/NotoSerifEthiopic-Medium.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Noto Serif Ethiopic";
    src: url("../fonts/NotoSerifEthiopic-SemiBold.ttf") format("truetype");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Noto Serif Ethiopic";
    src: url("../fonts/NotoSerifEthiopic-Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Noto Serif Ethiopic";
    src: url("../fonts/NotoSerifEthiopic-ExtraBold.ttf") format("truetype");
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Noto Serif Ethiopic";
    src: url("../fonts/NotoSerifEthiopic-Black.ttf") format("truetype");
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

/* Usage example:
body { font-family: "Noto Serif Ethiopic ExtraCondensed", serif; }
h1 { font-weight: 700; }
*/

:root {
    --Montserrat: 'Montserrat', sans-serif;
    --Noto-Serif: 'Noto Serif Ethiopic', serif;
    --Noto-Semi: 'Noto Serif Ethiopic SemiCondensed', serif;
}

* {
    font-family: var(--Noto-Serif)
}



.form-control:focus {
    box-shadow: none;
}

.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
    font-size: inherit;
    margin-bottom: unset;
}

html {
    scroll-behavior: smooth;
    font-size: 62.5%;
    overflow-x: hidden;
}

legend {
    display: none;
}

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

p {
    margin-bottom: 0;
}

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

.field--type-text-with-summary li {
    display: list-item;
    list-style: auto;
}

ul {
    padding: 0;
    margin: 0;
}

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

@media (min-width: 1281px) {

    .we-mega-menu-submenu-inner,
    .container,
    .container-lg,
    .container-md,
    .container-sm,
    .container-xl,
    .container-xxl {
        max-width: 1034px !important;
        padding-inline: 0;
    }
}

.btn-group-vertical>.btn-group:after,
.btn-group-vertical>.btn-group:before,
.btn-toolbar:after,
.btn-toolbar:before,
.clearfix:after,
.clearfix:before,
.container-fluid:after,
.container-fluid:before,
.container:after,
.container:before,
.dl-horizontal dd:after,
.dl-horizontal dd:before,
.form-horizontal .form-group:after,
.form-horizontal .form-group:before,
.modal-footer:after,
.modal-footer:before,
.modal-header:after,
.modal-header:before,
.nav:after,
.nav:before,
.navbar-collapse:after,
.navbar-collapse:before,
.navbar-header:after,
.navbar-header:before,
.navbar:after,
.navbar:before,
.pager:after,
.pager:before,
.panel-body:after,
.panel-body:before,
.row:after,
.row:before {
    content: unset;
}

.no-margin {
    margin: 0;
}

.no-padding {
    padding: 0;
}

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

.field[data-blazy] {
    min-width: unset !important;
}

video {
    height: 100%;
}

.slide__media {
    display: none;
}

.slide__caption {
    padding: 0;
}

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



*:focus {
    outline: none;
}

.field--type-entity-reference,
.field--type-image img,
.field--name-field-user-picture img {
    margin-bottom: unset;
}

.node .field--type-image {
    margin: 0;
}

.row {
    --bs-gutter-x: 0 !important;
    --bs-gutter-y: 0 !important;
}




/*========================================= */
/*================ HEADER ============== */
/*========================================= */
#header {
    padding-inline: 130px;
    position: absolute;
    width: 100%;
    top: 47px;
    z-index: 9;
    left: 50%;
    transform: translateX(-50%);
}

#navbar-main {
    background-color: transparent !important;
}

#header .navbar-nav {
    flex-direction: row;
    display: flex;
    align-items: center;
    gap: 52.884px;
    padding-inline-start: 203px;
    flex-wrap: nowrap;
}

.navbar-brand {
    margin: 0;
    min-width: 85px;
}

#header .navbar-nav a {
    position: relative;
    padding: 0 !important;
    color: #fff;
    font-family: "Noto Serif Ethiopic ExtraCondensed";
    font-size: 15.865px;
    font-weight: 400;
    line-height: 37.019px;
    text-transform: uppercase;
    margin: 0;
}

#header .navbar-nav a::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0px;
    width: 100%;
    opacity: 0;
    height: 1px;
    background-color: #C9A24D;
    transform: translateX(-50%);
    transition: opacity 0.3s ease;
    -webkit-transition: opacity 0.3s ease;
    -moz-transition: opacity 0.3s ease;
    -ms-transition: opacity 0.3s ease;
    -o-transition: opacity 0.3s ease;
}

#header .navbar-nav a:hover::after,
#header .navbar-nav a.is-active::after {
    opacity: 1;
}

#header .navbar-nav span {
    display: flex;
    width: 135px;
    padding: 14.924px 0;
    justify-content: center;
    border: 0.878px solid #B48741;
    align-items: center;
    height: 47px;
    color: #FFF;
    font-family: "Noto Serif Ethiopic ExtraCondensed";
    font-size: 13.87px;
    font-style: normal;
    font-weight: 400;
    line-height: 15.802px;
    text-transform: uppercase;
}


#header .navbar-nav span:hover {
    background-color: #B48741;
    color: #FFF;

}



/* ===== Bootstrap toggler visual (no inline styles) ===== */
#header .navbar-toggler {
    border: none;
    padding: 20px 12px;
    border-radius: 10px;
    margin-left: auto;
}

#header .navbar-toggler:focus {
    outline: none;
    box-shadow: none;
}

/* Make a custom hamburger (works even if bootstrap icon missing) */
#header .navbar-toggler .navbar-toggler-icon {
    width: 26px;
    height: 2px;
    display: block;
    background: #fff;
    position: relative;
}

#header .navbar-toggler .navbar-toggler-icon::before,
#header .navbar-toggler .navbar-toggler-icon::after {
    content: "";
    position: absolute;
    left: 0;
    width: 26px;
    height: 2px;
    background: #fff;
}

#header .navbar-toggler .navbar-toggler-icon::before {
    top: -8px;
}

#header .navbar-toggler .navbar-toggler-icon::after {
    top: 8px;
}

.slider-social-wrapper {
    position: relative;
}

#block-bootstrap-barrio-subtheme-socialicons-3 {
    position: absolute;
    bottom: 7px;
    right: 68px;
    z-index: 9999;
    svg {
        font-size: 23.095px;
    }
}


/*========================================= */
/*================ home page ============== */
/*========================================= */

.block-views-blockslider-block-1 {
    padding: 20px;
    overflow: hidden;
    background: #141D38;
    position: relative;
    height: 100dvh;
}

.block-views-blockslider-block-1 .views-field-title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 641px;
    height: 207px;
    background: url(./slider-title.svg) no-repeat center;
    background-size: contain;
    font-size: 0;
}

.block-views-blockslider-block-1 .slider-wrapper .views-field-field-media-image:nth-child(1),
.block-views-blockslider-block-1 .slider-wrapper .field--name-field-media-image:nth-child(1) * {
    width: 100%;
    height: 100dvh;
    object-fit: cover;
}

.block-views-blockslider-block-1 .views-field-fieldset {
    position: absolute;
    bottom: 16px;
    right: 5px;
}

.block-views-blockslider-block-1 .slider-floating-link-wrapper .views-field-field-floating-image,
.block-views-blockslider-block-1 .slider-floating-link-wrapper .views-field-field-floating-image * {
    width: auto !important;
    height: auto !important;
}

.slider-floating-link-wrapper a {
    font-size: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 5;

}

/* الصورة نفسها */
#block-bootstrap-barrio-subtheme-floatingimageblock img,
.views-field-field-floating-image img {
    transition: transform 6.2s ease-in-out;
    will-change: transform;
    -webkit-transition: transform 6.2s ease-in-out;
    -moz-transition: transform 6.2s ease-in-out;
    -ms-transition: transform 6.2s ease-in-out;
    -o-transition: transform 6.2s ease-in-out;
}



#block-bootstrap-barrio-subtheme-views-block-authentic-jordaan-block-1 {
    background: url(./blue-back.svg) no-repeat top;
    background-size: cover;
    margin-top: -1px;
    position: relative;
    overflow-x: hidden;
}

#block-bootstrap-barrio-subtheme-views-block-authentic-jordaan-block-1::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 169px;
    background-image: url(./ihhna.svg);
    background-repeat: repeat-x;
    background-position: 0 center;
    /* filter: opacity(0.1); */
    animation: moveBg 10s ease-in-out infinite;
}

@keyframes moveBg {
    0% {
        background-position: 0 center;
    }

    45% {
        background-position: -600px center;
        /* يمين */
    }

    55% {
        background-position: -600px center;
        /* توقف بسيط */
    }

    100% {
        background-position: 0 center;
        /* رجوع */
    }
}


#block-bootstrap-barrio-subtheme-views-block-authentic-jordaan-block-1 .views-row {
    display: flex;
    padding-inline: 121px 192px;
    padding-top: 174px;
    padding-bottom: 171px;
    justify-content: space-between;
}

.authentic-jordanian-left-wrapper img {
    position: absolute;
    bottom: -170px;
    right: 47px;
    transition: transform 6.2s ease-in-out;
    will-change: transform;
    -webkit-transition: transform 6.2s ease-in-out;
    -moz-transition: transform 6.2s ease-in-out;
    -ms-transition: transform 6.2s ease-in-out;
    -o-transition: transform 6.2s ease-in-out;
}

.authentic-jordanian-left-wrapper {
    width: 444px;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 42px;

    .views-field-title span {
        color: var(--fidalgo-qodeinteractive-com-white-16, var(--color-white-16, rgba(255, 255, 255, 0.16)));
        leading-trim: both;
        text-edge: cap;
        font-family: "Noto Serif Ethiopic ExtraCondensed";
        font-size: 46px;
        font-style: normal;
        font-weight: 400;
        line-height: 58px;
        text-transform: uppercase;
        display: inline-block;
    }

    .views-field-body {
        display: flex;
        flex-direction: column;
        gap: 42px;
    }

    .views-field-body h2 {
        color: #CED8D8;
        leading-trim: both;
        text-edge: cap;
        font-family: "Noto Serif Ethiopic ExtraCondensed";
        font-size: 31px;
        font-style: normal;
        font-weight: 300;
        line-height: 39px;
        text-transform: uppercase;
    }

    .views-field-body p {
        color: #CED8D8;
        leading-trim: both;
        text-edge: cap;
        font-family: Montserrat;
        font-size: 16px;
        font-style: normal;
        font-weight: 300;
        line-height: var(--line-height-28, 28px);
    }

    .views-field-nothing a {
        display: flex;
        width: 135px;
        padding: 14.924px 0;
        justify-content: center;
        border: 0.878px solid #B48741;
        align-items: center;
        height: 47px;
        color: #FFF;
        font-family: "Noto Serif Ethiopic ExtraCondensed";
        font-size: 13.87px;
        font-style: normal;
        font-weight: 400;
        line-height: 15.802px;
        text-transform: uppercase;
    }

    .views-field-nothing a:hover {
        background-color: #B48741;
        color: #FFF;
    }


}

.authentic-jordanian-right-wrapper {
    position: relative;

    .views-field-field-second-image {
        position: absolute;
        bottom: 66px;
        left: -101px;
    }
}

/* =========================
   MENU (keep sticky behavior)
   ========================= */

.view-menu {
    position: relative;
    z-index: 1;
    background: url(./menu-back1.png) no-repeat;
    background-position-y: -332px;
    background-size: 100% 100%;
}

.page-node-9 .view-menu .view-header {
    &::after {
        content: "";
        position: absolute;
        inset: 0 auto auto 0;
        width: 100%;
        height: 169px;
        background-image: url(./ihhna.svg) !important;
        background-repeat: repeat-x;
        background-position: 0 center;
        animation: moveBg 10s ease-in-out infinite;
        pointer-events: none;
        z-index: -1;
        opacity: 1;
    }
}

/* Header sticky */
.view-menu .view-header {
    position: sticky;
    top: 0;
    z-index: 10;
    /* ensures it stays above menu content */
    display: flex;
    align-items: center;
    flex-direction: column;
    padding: 34px 0 39px;

    /* fix overlay stacking */
    &::after {
        /* opacity: .03; */
        content: "";
        position: absolute;
        inset: 0 auto auto 0;
        width: 100%;
        height: 169px;
        background-image: url(./ihhna.svg);
        background-repeat: repeat-x;
        background-position: 0 center;
        animation: moveBg 10s ease-in-out infinite;
        pointer-events: none;
        z-index: -1;
        filter: brightness(0);
    }

    p {
        color: #B48741;
        text-align: center;
        font-family: "Noto Serif Ethiopic ExtraCondensed";
        font-size: 18.44px;
        font-style: normal;
        font-weight: var(--font-weight-400, 400);
        line-height: 1;
        text-transform: uppercase;
    }

    h2 {
        color: #141D38;
        text-align: center;
        font-family: "Noto Serif Ethiopic ExtraCondensed";
        font-size: 148.44px;
        font-style: normal;
        font-weight: var(--font-weight-400, 400);
        line-height: 1;
        text-transform: uppercase;
    }
}

@keyframes moveBg {
    0% {
        background-position-x: 0;
    }

    50% {
        background-position-x: 120px;
    }

    100% {
        background-position-x: 0;
    }
}

/* Right column images sticky */
.view-menu .views-field-field-menu-two-image {
    position: relative;

    .field-content {
        position: sticky;
        top: 209px;
        z-index: 5;
        display: flex;
        flex-direction: column;
        gap: 50px;
        align-items: center;
    }
}

/* Left column text sticky */
.view-menu .views-field-fieldset {
    position: relative;

    .our-menu-wrapper {
        position: sticky;
        top: 209px;
        z-index: 5;
        display: flex;
        align-items: start;
        flex-direction: column;
        gap: 21px;

        .views-field-title span {
            color: #512C1D;
            font-family: "Noto Serif Ethiopic ExtraCondensed";
            font-size: 28.112px;
            font-style: normal;
            font-weight: 300;
            line-height: normal;
        }

        .views-field-body p {
            color: #512C1D;
            font-family: Montserrat;
            font-size: 12.427px;
            font-style: normal;
            font-weight: 300;
            line-height: 22.541px;
        }

        .views-field-nothing span {
            display: inline-block;
            color: #512C1D;
            font-family: "Noto Serif Ethiopic ExtraCondensed";
            font-size: 28.112px;
            font-style: normal;
            font-weight: 300;
            line-height: normal;
            padding-top: 72px;
        }
    }
}

#block-bootstrap-barrio-subtheme-views-block-menu-block-1>h2 {
    display: none;

}

.page-node-9 #block-bootstrap-barrio-subtheme-views-block-menu-block-1>h2 {
    display: block;
    height: 378px;
    padding: 276px 134px 67px;
    background: #141D38 url(./MENU.svg) no-repeat;
    background-position: 150px 274px;
    background-size: 126px 37px;
    font-size: 0;

}

.page-node-9 #block-bootstrap-barrio-subtheme-views-block-menu-block-1 .view-header {
    position: static;
    padding-bottom: 70px;

    p,
    h2 {
        opacity: 0;
    }
}

.page-node-9 .reservation-wrapper {
    z-index: 999;
    margin-top: -141vh;
    margin-bottom: -13px;
}

.page-node-9 .view-menu .views-field-fieldset .our-menu-wrapper,
.page-node-9 .view-menu .views-field-field-menu-two-image .field-content,
.page-node-9 .view-menu .views-field-field-media-images .field-content>div {
    top: 100px;
}

.form-select {
    background: url(./select-arrow.svg) no-repeat 98% center !important;
    background-size: 11.5px 6px;
}

.form-date {
    padding-inline-end: 3px !important;
}

/* Grid layout */
.view-menu .views-row {
    display: grid;
    grid-template-columns: 1fr 414px 1fr;
    gap: 94px;
    padding-inline: 195px;
}

#reservation-wrapper-2 section {
    display: grid;
    grid-template-columns: 1fr 1fr;

}

/* Middle stacked/sticky images */
.view-menu .views-field-field-media-images {
    position: relative;
    overflow: visible;

    .field-content {
        display: block;
        font-size: 0;
        /* hide separators */
        /* IMPORTANT: keep your big scroll height if you want long stacking */
        height: 1068vh;
    }

    .field-content>div {
        position: sticky;
        top: 209px;
        display: block;
        margin: 0 auto 30px;
        width: fit-content;
        height: 100dvh;
        /* gives each image a scroll “slot” */
        font-size: 16px;
    }

    img {
        display: block;
        max-width: 98%;
        margin: auto;
        height: auto;
    }

    /* z-index ordering */
    .field-content>div:nth-child(1) {
        z-index: 1;
    }

    .field-content>div:nth-child(2) {
        z-index: 2;
    }

    .field-content>div:nth-child(3) {
        z-index: 3;
    }

    .field-content>div:nth-child(4) {
        z-index: 4;
    }

    .field-content>div:nth-child(5) {
        z-index: 5;
    }

    .field-content>div:nth-child(6) {
        z-index: 6;
    }

    .field-content>div:nth-child(7) {
        z-index: 7;
    }

    .field-content>div:nth-child(8) {
        z-index: 8;
    }

    .field-content>div:nth-child(9) {
        z-index: 9;
    }
}

/* Your “disable sticky” state (kept as-is, just tightened) */
.view-menu.is-unpinned {

    .view-header,
    .views-field-fieldset .our-menu-wrapper,
    .views-field-field-menu-two-image .field-content,
    .views-field-field-media-images .field-content>div {
        position: relative !important;
        top: auto !important;
    }
}


/* ==========================================
   BELOW SECTION: make it come ABOVE on scroll
   (Fix: don’t use top:-142vh; use margin overlap)
   ========================================== */

#block-bootstrap-barrio-subtheme-views-block-authentic-jornian-block-2 {
    position: relative;
    z-index: 99;
    background: #FFF;
    margin-top: -141vh;
    padding-block: 71px 92px;
    padding-inline: 90px;
    z-index: 999;
}

.view-authentic-jordanian .views-row {
    display: flex;
    gap: 112px;
    align-items: flex-start;
    justify-content: center;
}

.authentic-right-second-section-wrapper {
    display: flex;
    flex-direction: column;
    gap: 36px;
    width: 376px;
    padding-top: 80px;

    .views-field-title {
        display: flex;
        flex-direction: column;
        gap: 21px;

        .views-label-title {
            color: #B48741;
            font-family: "Noto Serif Ethiopic ExtraCondensed";
            font-size: 18.44px;
            font-style: normal;
            font-weight: var(--font-weight-400, 400);
            line-height: 1;
            text-transform: uppercase;
        }

        .field-content {
            color: #662B25;
            leading-trim: both;
            text-edge: cap;
            font-family: "Noto Serif Ethiopic ExtraCondensed";
            font-size: 79.44px;
            font-style: normal;
            font-weight: var(--font-weight-400, 400);
            line-height: 73.7px;
            /* 92.774% */
            text-transform: uppercase;
        }
    }

    .views-field-body p {
        color: #512C1D;
        font-family: Montserrat;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 28.9px;
    }

    .views-field-nothing a {
        display: flex;
        width: 135px;
        padding: 14.924px 0;
        justify-content: center;
        align-items: center;
        color: #512C1D;
        font-family: "Noto Serif Ethiopic ExtraCondensed";
        font-size: 13.87px;
        font-style: normal;
        font-weight: 400;
        line-height: 15.802px;
        text-transform: uppercase;
        border: 0.878px solid #512C1D;

        &:hover {
            background-color: #512C1D;
            color: #FFF;
        }
    }
}

.authentic-left-second-section-wrapper- {
    position: relative;

    .views-field-field-floating-image img {
        position: absolute;
        bottom: -48px;
        right: -100px;
    }
}

/* ==============================
   Reservation Section (match screenshot)
   Targets your wrapper + webform + image block
   ============================== */

.reservation-wrapper {

    background: url(./reser.png) no-repeat top center;
    background-size: 100% 100%;
    padding: 140px 150px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 55px;
    position: relative;
    overflow: hidden;
    z-index: 999;
}

/* =========================================================
   Reservation Webform Styles
   Apply styles to:
   1) Block wrapper: #block-bootstrap-barrio-subtheme-webform
   2) Direct form:   #block-bootstrap-barrio-subtheme-webform-4
========================================================= */

/* LEFT: form block width */
#block-bootstrap-barrio-subtheme-webform,
#block-bootstrap-barrio-subtheme-webform-4 {
    width: 550px;
}

/* form width + layout */
#block-bootstrap-barrio-subtheme-webform form,
#block-bootstrap-barrio-subtheme-webform-4 {
    width: 435px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* remove default spacing */
#block-bootstrap-barrio-subtheme-webform .content,
#block-bootstrap-barrio-subtheme-webform-4 .content {
    padding: 0;
}

/* Head */
#block-bootstrap-barrio-subtheme-webform .reservation-form-head,
#block-bootstrap-barrio-subtheme-webform-4 .reservation-form-head {
    margin: 0 0 26px;
}

#block-bootstrap-barrio-subtheme-webform .reservation-kicker,
#block-bootstrap-barrio-subtheme-webform-4 .reservation-kicker {
    color: var(--fidalgo-qodeinteractive-com-white-16, var(--color-white-16, rgba(255, 255, 255, 0.16)));
    font-family: "Noto Serif Ethiopic ExtraCondensed";
    font-size: 83px;
    font-style: normal;
    font-weight: 300;
    line-height: 116px;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-inline-start: -36px;
    margin-bottom: 17px;
}

#block-bootstrap-barrio-subtheme-webform .reservation-title,
#block-bootstrap-barrio-subtheme-webform-4 .reservation-title {
    color: var(--fidalgo-qodeinteractive-com-white, var(--color-white-solid, #FFF));
    font-family: Montserrat;
    font-size: var(--font-size-36, 34px);
    font-style: normal;
    font-weight: var(--font-weight-300, 200);
    line-height: var(--line-height-41, 41px);
    letter-spacing: 3.4px;
    text-transform: uppercase;
    padding-bottom: 7px;
}

#block-bootstrap-barrio-subtheme-webform .reservation-note,
#block-bootstrap-barrio-subtheme-webform-4 .reservation-note {
    color: var(--fidalgo-qodeinteractive-com-tiara, var(--color-cyan-83, #CED8D8));
    font-family: Montserrat;
    font-size: var(--font-size-17, 17px);
    font-style: normal;
    font-weight: var(--font-weight-300, 300);
    line-height: var(--line-height-28, 28px);
}

/* labels */
#block-bootstrap-barrio-subtheme-webform label,
#block-bootstrap-barrio-subtheme-webform-4 label {
    display: none;
}

/* fields wrapper spacing */
#block-bootstrap-barrio-subtheme-webform .form-item,
#block-bootstrap-barrio-subtheme-webform-4 .form-item {
    margin: 0 0 18px !important;
}

/* selects + inputs + date */
#block-bootstrap-barrio-subtheme-webform select.form-select,
#block-bootstrap-barrio-subtheme-webform input.form-control,
#block-bootstrap-barrio-subtheme-webform-4 select.form-select,
#block-bootstrap-barrio-subtheme-webform-4 input.form-control {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 0;
    padding: 12px 0 14px;
    outline: none;
    box-shadow: none;

    /* typography (keep as you wrote) */
    color: var(--fidalgo-qodeinteractive-com-white, var(--color-white-solid, #FFF));
    font-family: Montserrat, sans-serif;
    font-size: var(--font-size-17, 17px);
    font-style: normal;
    font-weight: var(--font-weight-300, 300);
    line-height: var(--line-height-24, 24px);

    /* select arrow spacing */
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-right: 22px;

}

/* placeholder / option colors */
#block-bootstrap-barrio-subtheme-webform select.form-select option,
#block-bootstrap-barrio-subtheme-webform-4 select.form-select option {
    color: #FFF;
    background-color: #10172b;
}

/* remove bootstrap focus glow */
#block-bootstrap-barrio-subtheme-webform select.form-select:focus,
#block-bootstrap-barrio-subtheme-webform input.form-control:focus,
#block-bootstrap-barrio-subtheme-webform-4 select.form-select:focus,
#block-bootstrap-barrio-subtheme-webform-4 input.form-control:focus {
    border-bottom-color: rgba(255, 255, 255, 0.55);
    box-shadow: none;
    outline: none;
}

/* dropdown (pure CSS) - kept as in your code */
#block-bootstrap-barrio-subtheme-webform select.form-select,
#block-bootstrap-barrio-subtheme-webform-4 select.form-select {
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-right: 22px;
}

/* date icon color (webkit) */
#block-bootstrap-barrio-subtheme-webform input[type="date"]::-webkit-calendar-picker-indicator,
#block-bootstrap-barrio-subtheme-webform-4 input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(1);
    opacity: 0.65;
}

/* submit button */
#block-bootstrap-barrio-subtheme-webform .form-actions,
#block-bootstrap-barrio-subtheme-webform-4 .form-actions {
    margin-top: 18px !important;
}

#block-bootstrap-barrio-subtheme-webform button,
#block-bootstrap-barrio-subtheme-webform-4 button {
    color: var(--fidalgo-qodeinteractive-com-white, var(--color-white-solid, #FFF));
    text-align: center;
    font-family: Montserrat;
    font-size: var(--font-size-12, 12px);
    font-style: normal;
    font-weight: var(--font-weight-400, 400);
    line-height: var(--line-height-18, 18px);
    letter-spacing: var(--letter-spacing-1_2, 1.2px);
    text-transform: uppercase;

    display: flex;
    padding: 17px 51px;
    align-items: flex-start;

    border: var(--stroke-weight-1, 1px) solid var(--color-orange-56, #B58C67);
    background: transparent;

    border-radius: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
}

#block-bootstrap-barrio-subtheme-webform form .form-actions,
#block-bootstrap-barrio-subtheme-webform-4 .form-actions {
    align-self: auto !important;
}

#block-bootstrap-barrio-subtheme-webform button:hover,
#block-bootstrap-barrio-subtheme-webform-4 button:hover {
    background-color: var(--color-orange-56, #B58C67);
    color: #fff;
}

/* Powered by text */
#block-bootstrap-barrio-subtheme-webform .webform-type-processed-text p,
#block-bootstrap-barrio-subtheme-webform-4 .webform-type-processed-text p {
    font-family: Montserrat, sans-serif;
    margin: 16px 0 0;
    color: var(--fidalgo-qodeinteractive-com-tiara, var(--color-cyan-83, #CED8D8));
    text-align: start;

    font-size: var(--font-size-16, 16px);
    font-style: normal;
    font-weight: var(--font-weight-300, 300);
    line-height: var(--line-height-28, 28px);
}

/* remove processed-text wrapper margins */
#block-bootstrap-barrio-subtheme-webform .webform-type-processed-text,
#block-bootstrap-barrio-subtheme-webform-4 .webform-type-processed-text {
    margin-bottom: 0 !important;
}

/* RIGHT: image block */
#block-bootstrap-barrio-subtheme-formimage {
    flex: 0 0 auto;
}

#reservation-wrapper-2 .reservation-close-btn {
    position: absolute;
    top: 22px;
    right: 34px;
    background: transparent;
    border: none;
    font-size: 35px;
    line-height: 1;
    color: #fff;
    cursor: pointer;
    z-index: 10;
    padding: 0;
}

#reservation-wrapper-2 .reservation-close-btn:hover {
    opacity: 0.7;
}

#reservation-wrapper-2 {
    margin: 0 !important;
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    transition: .4s ease-in-out;
    -webkit-transition: .4s ease-in-out;
    transform: translateY(-200%);
    -webkit-transform: translateY(-200%);
    -moz-transform: translateY(-200%);
    -ms-transform: translateY(-200%);
    -o-transform: translateY(-200%);
    -webkit-transition: .4s ease-in-out;
    -moz-transition: .4s ease-in-out;
    -ms-transition: .4s ease-in-out;
    -o-transition: .4s ease-in-out;
}


/* responsive */
@media (max-width:1200px) {
    .reservation-wrapper {
        padding: 90px 60px;
        gap: 50px;
    }

    #block-bootstrap-barrio-subtheme-webform {
        width: 480px;
    }

    #block-bootstrap-barrio-subtheme-formimage img {
        width: 420px;
        border-radius: 220px 220px 0 0;
    }
}

@media (max-width:992px) {
    .reservation-wrapper {
        flex-direction: column;
        align-items: flex-start;
        padding: 70px 24px;
    }

    #block-bootstrap-barrio-subtheme-webform {
        width: 100%;
        max-width: 560px;
    }

    #block-bootstrap-barrio-subtheme-formimage img {
        width: 100%;
        max-width: 520px;
    }
}


.view-gallery {
    background: #F4F2E1;
    position: relative;
    padding-bottom: 114px;
    margin-bottom: -17px;

    .view-header h2 {
        color: #662B25;
        text-align: center;
        leading-trim: both;
        text-edge: cap;
        font-family: "Noto Serif Ethiopic ExtraCondensed";
        font-size: 54.44px;
        font-style: normal;
        font-weight: 300;
        line-height: 73.7px;
        padding-block: 100px 50px;
        /* 135.378% */
    }

    .field-content {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
        gap: 37px;
        padding-inline: 37px;
    }

    .views-field-field-floating-image img {

        position: absolute;
        bottom: 38px;
        left: 53%;
    }

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

/* ===============================
   FOOTER – match screenshot layout
   =============================== */

.site-footer {
    background: #141D38 !important;
    color: rgba(255, 255, 255, .78);
    padding: 110px 0 0px;
    position: relative;
    z-index: 999;
}

/* remove bootstrap row gutters */
.site-footer .row {
    margin: 0;
}

.page-node-17 .site-footer__top {
    position: relative;
}

.page-node-17 .site-footer__top::before {
    content: "";
    position: absolute;
    top: -25px;
    left: 50%;
    transform: translateX(-50%);
    width: 84%;
    height: 1px;
    background: #898E9B;
}

/* --- TOP: 3 columns --- */
.site-footer__top {
    margin: 0 auto;
    padding: 0 98px 84px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 40px;
    align-items: start;
}

/* each region full width in grid */
.site-footer__top .region {
    width: 100%;
}

/* blocks titles */
.site-footer__top h2 {
    all: unset;
    color: var(--fidalgo-qodeinteractive-com-white, var(--color-white-solid, #FFF));
    text-align: center;
    leading-trim: both;
    text-edge: cap;
    font-family: "Noto Serif Ethiopic ExtraCondensed";
    font-size: 20px;
    font-style: normal;
    font-weight: 300;
    line-height: var(--line-height-27, 27px);
    letter-spacing: 1px;
    text-transform: uppercase;
    margin: auto;
    width: 100%;
    display: block;
}

/* text */
.site-footer__top .field--name-body,
.site-footer__top .field--name-body a,
.site-footer__top .field--name-body p {
    color: var(--fidalgo-qodeinteractive-com-tiara, var(--color-cyan-83, #CED8D8));
    text-align: center;
    leading-trim: both;
    text-edge: cap;
    font-family: Montserrat;
    font-size: var(--font-size-17, 17px);
    font-style: normal;
    font-weight: var(--font-weight-300, 300);
    line-height: var(--line-height-28, 28px);
    /* 164.706% */
}

/* links */


.site-footer__top a:hover {
    color: #fff;
}

/* vertical separators between columns */
.site-footer__top .region-footer-first,
.site-footer__top .region-footer-second {
    position: relative;
    justify-content: center;
    /* padding-right: 70px; */
}

.site-footer__top .region-footer-first::after,
.site-footer__top .region-footer-second::after {
    content: "";
    position: absolute;
    top: -24px;
    right: 0%;
    background: rgba(255, 255, 255, .25);
    width: 1px;
    height: 152px;
}

/* --- Newsletter block --- */
#block-bootstrap-barrio-subtheme-simplenewssubscription {
    width: 100%;
}

/* hide unneeded labels/descriptions/checkbox section */
#block-bootstrap-barrio-subtheme-simplenewssubscription .form-item-message,
#block-bootstrap-barrio-subtheme-simplenewssubscription label,
#block-bootstrap-barrio-subtheme-simplenewssubscription .description,
#block-bootstrap-barrio-subtheme-simplenewssubscription #edit-message,
#block-bootstrap-barrio-subtheme-simplenewssubscription #edit-subscriptions-wrapper {
    display: none !important;
}

/* add newsletter title like screenshot */
#block-bootstrap-barrio-subtheme-simplenewssubscription::before {
    content: "SUBSCRIBE TO OUR NEWSLETTER!";
    display: block;
    color: #fff;
    font-family: "Noto Serif Ethiopic ExtraCondensed", serif;
    font-size: 22px;
    font-weight: 400;
    letter-spacing: 0px;
    text-transform: uppercase;
    margin: 0 0 22px;
    font-family: "Noto Serif Ethiopic ExtraCondensed";
    font-size: 20px;
    font-style: normal;
    font-weight: 300;
    line-height: 32px;
    text-transform: uppercase;
}

/* make input + button on one line */
#block-bootstrap-barrio-subtheme-simplenewssubscription form {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    margin-top: 6px;
}

/* remove margins from wrappers */
#block-bootstrap-barrio-subtheme-simplenewssubscription .form-wrapper,
#block-bootstrap-barrio-subtheme-simplenewssubscription .form-item {
    margin: 0 !important;
}

/* email input */
#block-bootstrap-barrio-subtheme-simplenewssubscription input.form-control {
    width: 254px;
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 10px 0 12px;
    font-family: Montserrat, sans-serif;
    font-size: 16px;
    font-weight: 300;
    box-shadow: none;
    outline: none;
    color: #94A3B8;
    font-family: "Noto Serif Ethiopic ExtraCondensed";
    font-size: 16px;
    font-style: normal;
    font-weight: 300;
    line-height: 16px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.39);
    background: #141D38;
    padding: 16px;
}

#block-bootstrap-barrio-subtheme-simplenewssubscription input.form-control::placeholder {
    color: rgba(255, 255, 255, .45);
}

#block-bootstrap-barrio-subtheme-simplenewssubscription input.form-control:focus {
    border-bottom-color: rgba(255, 255, 255, .55);
    box-shadow: none;
    outline: none;
}

/* subscribe button (looks like link) */
#block-bootstrap-barrio-subtheme-simplenewssubscription .form-actions {
    margin: 0 !important;
}

#block-bootstrap-barrio-subtheme-simplenewssubscription button {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    color: #fff !important;
    font-family: "Noto Serif Ethiopic ExtraCondensed", serif;
    font-size: 18px;
    font-weight: 400;
    letter-spacing: 1px;
    text-transform: capitalize;
    box-shadow: none !important;
    padding-bottom: 13px !important;
    border-bottom: 1px solid #46516A !important;
    background: #141D38;
    border-radius: 0;
    margin-bottom: 11px;
    padding-inline: 12px !important;
}

#block-bootstrap-barrio-subtheme-simplenewssubscription button:hover {
    opacity: .85;
}


/* left social menu */
#block-bootstrap-barrio-subtheme-socialicons ul.nav {
    display: flex;
    gap: 22px;
    align-items: center;
    padding: 0;
    margin: 0;
    list-style: none;
}

#block-bootstrap-barrio-subtheme-socialicons a {
    color: #fff;
    opacity: .9;
    font-size: 22px;
    padding: 0;
}

#block-bootstrap-barrio-subtheme-socialicons a:hover {
    opacity: 1;
}

/* center logo (you said you'll handle the image + line; this is placeholder alignment) */


.site-footer .block {
    all: unset;
}

.site-footer__bottom {
    max-width: 1214px;
    margin: auto;
    padding-block: 79px 40px;
    border: none;
    background: url(./footer.svg) no-repeat top center;
    background-size: contain;
}

.region-footer-fifth {
    justify-content: space-between;
}

#block-bootstrap-barrio-subtheme-copyright p {
    color: var(--fidalgo-qodeinteractive-com-tiara, var(--color-cyan-83, #CED8D8));
    text-align: right;
    font-family: Montserrat;
    font-size: 13px;
    font-style: normal;
    font-weight: 300;
    line-height: var(--line-height-20, 20px);
    /* 153.846% */
    letter-spacing: var(--letter-spacing-2, 2px);
}

/* --- Responsive --- */
@media (max-width:1200px) {

    .site-footer__top,
    .site-footer__bottom {
        padding: 0 50px;
    }

    .site-footer__top {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .site-footer__top .region-footer-first,
    .site-footer__top .region-footer-second {
        padding-right: 0;
    }

    .site-footer__top .region-footer-first::after,
    .site-footer__top .region-footer-second::after {
        display: none;
    }


    #block-bootstrap-barrio-subtheme-simplenewssubscription input.form-control {
        width: 100%;
        max-width: 420px;
    }

    .site-footer__bottom .region-footer-fifth {
        grid-template-columns: 1fr;
        justify-items: start;
        gap: 20px;
    }

    #block-bootstrap-barrio-subtheme-copyright {
        grid-column: auto;
        justify-self: start;
    }

    .site-footer__bottom .region-footer-fifth::before,
    .site-footer__bottom .region-footer-fifth::after {
        display: none;
    }
}

#block-bootstrap-barrio-subtheme-views-block-top-section-block-1 .views-row,
#block-bootstrap-barrio-subtheme-views-block-about-us-block-1 .view-about-us .views-row {
    background: #141D38;
    padding: 281px 124px 255px;

    .views-field-title {
        display: flex;
        max-width: 740px;
        flex-direction: column;
        align-items: flex-start;
        gap: 23px;

        .views-label-title {
            color: var(--demo-gloriathemes-com-nugget, var(--color-yellow-43, #BB961F));
            font-family: "Noto Serif Ethiopic ExtraCondensed";
            font-size: 16px;
            font-style: normal;
            font-weight: 600;
            line-height: var(--line-height-15_41, 15.41px);
            letter-spacing: 2px;
            text-transform: uppercase;
        }

        .field-content {
            /*height: 173px;*/
            /*align-self: stretch;*/
            /*font-size: 0;*/
            /*background: url(./For-those.svg) no-repeat center;*/
            /*background-size: contain;*/
        }
    }

    .views-field-body {
        max-width: 740px;
        color: #F4F2E1;
        font-family: Montserrat;
        font-size: 15px;
        font-style: normal;
        font-weight: 300;
        line-height: var(--line-height-27_2, 27.2px);
        /* 181.333% */
        padding-top: 17px;
        letter-spacing: var(--letter-spacing-0_35, 0.35px);
    }
}

#block-bootstrap-barrio-subtheme-views-block-top-section-block-1 .views-row {
    padding: 281px 90px 338px;
}

#block-bootstrap-barrio-subtheme-views-block-top-section-block-1 .views-row .views-field-body,
#block-bootstrap-barrio-subtheme-views-block-top-section-block-1 .views-row .views-field-body p {
    color: #F4F2E1 !important;
    font-family: Montserrat !important;
    font-size: 15px !important;
    font-style: normal !important;
    font-weight: 300 !important;
    line-height: var(--line-height-27_2, 27.2px) !important;
    /* 181.333% */
    letter-spacing: var(--letter-spacing-0_35, 0.35px) !important;
    max-width: 878px !important;

}

#block-bootstrap-barrio-subtheme-eventscatering,
#block-bootstrap-barrio-subtheme-eventscatering * {
    width: 538px;
    height: 100%;
    object-fit: cover;
}

#block-bootstrap-barrio-subtheme-views-block-top-section-block-1 .views-row .views-field-title .field-content {
    height: 58px !important;
    align-self: stretch !important;
    /*font-size: 0 !important;*/
    /*background: url(./Designed.svg) no-repeat center !important;*/
    /*background-size: contain !important;*/
}

.about-us-images-wrapper {
    /* margin-top: -200px; */
    padding-inline: 123px;
    padding-bottom: 30px;
    display: flex;
    flex-direction: column;
    gap: 22px;
    background: url(./backabout.svg) no-repeat center bottom;
    background-size: 100%;
    position: relative;

    .views-field-field-media-image img {
        margin-top: -200px;
    }

}

/* ============================
   About Us block_2 (same style as authentic block_2)
   ============================ */

#block-bootstrap-barrio-subtheme-views-block-about-us-block-2 {
    /* نفس الفكرة */
    background: #FFF;
    padding-block: 71px 92px;
    padding-inline: 90px;
}

#block-bootstrap-barrio-subtheme-views-block-about-us-block-2 .view-about-us .views-row {
    display: flex;
    gap: 112px;
    align-items: center;
    justify-content: center;
}

/* Left image wrapper (same as authentic-left...) */
#block-bootstrap-barrio-subtheme-views-block-about-us-block-2 .view-about-us .views-field-field-media-image {
    position: relative;
}

/* Right content wrapper (same as authentic-right...) */
#block-bootstrap-barrio-subtheme-views-block-about-us-block-2 .get-to-know-wraapper {
    display: flex;
    flex-direction: column;
    gap: 36px;
    width: 492px;

}

#block-bootstrap-barrio-subtheme-views-block-about-us-block-2 .get-to-know-wraapper .views-field-title {
    display: flex;
    flex-direction: column;
    gap: 21px;
}

#block-bootstrap-barrio-subtheme-views-block-about-us-block-2 .get-to-know-wraapper .views-field-title .views-label-title {
    color: #B48741;
    leading-trim: both;
    text-edge: cap;
    font-family: "Noto Serif Ethiopic ExtraCondensed";
    font-size: 18.44px;
    font-style: normal;
    font-weight: var(--font-weight-400, 400);
    line-height: 1;
    text-transform: uppercase;
}

#block-bootstrap-barrio-subtheme-views-block-about-us-block-2 .get-to-know-wraapper .views-field-title .field-content {
    color: #662B25;
    leading-trim: both;
    text-edge: cap;
    font-family: "Noto Serif Ethiopic ExtraCondensed";
    font-size: 79.44px;
    font-style: normal;
    font-weight: var(--font-weight-400, 400);
    line-height: 1;
    text-transform: uppercase;
}

#block-bootstrap-barrio-subtheme-views-block-about-us-block-2 .get-to-know-wraapper .views-field-body {
    color: #512C1D;
    font-family: Montserrat;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 28.9px;
}

/* (اختياري) لو بدك تعمل زر لاحقاً بنفس ستايل View More */
#block-bootstrap-barrio-subtheme-views-block-about-us-block-2 .get-to-know-wraapper .views-field-nothing a {
    display: flex;
    width: 135px;
    padding: 14.924px 0;
    justify-content: center;
    align-items: center;
    color: #512C1D;
    font-family: "Noto Serif Ethiopic ExtraCondensed";
    font-size: 13.87px;
    font-style: normal;
    font-weight: 400;
    line-height: 15.802px;
    text-transform: uppercase;
    border: 0.878px solid #512C1D;
}

#block-bootstrap-barrio-subtheme-views-block-about-us-block-2 .get-to-know-wraapper .views-field-nothing a:hover {
    background-color: #512C1D;
    color: #FFF;
}

/* Responsive نفس المنطق */
@media (max-width: 1200px) {
    #block-bootstrap-barrio-subtheme-views-block-about-us-block-2 {
        padding-inline: 40px;
    }

    .view-about-us .views-row {
        gap: 60px;
    }
}

@media (max-width: 992px) {
    #block-bootstrap-barrio-subtheme-views-block-about-us-block-2 {
        top: auto;
        /* بالموبايل لا تعمل overlay */
        padding-inline: 24px;
    }

    .view-about-us .views-row {
        flex-direction: column;
        align-items: center;
    }

    #block-bootstrap-barrio-subtheme-views-block-about-us-block-2 .get-to-know-wraapper {
        width: 100%;
        max-width: 520px;
        padding-top: 20px;
    }
}


/* ============================
   About Us block_3 – 3x2 gallery like screenshot
   ============================ */

#block-bootstrap-barrio-subtheme-views-block-about-us-block-3 {
    background: #fff;
}

#block-bootstrap-barrio-subtheme-views-block-about-us-block-3 .view-content {
    margin: 0;
}

/* container */
.view-about-us.view-display-id-block_3 .views-row {
    width: 100%;
}

/* the field wrapper */
.view-about-us.view-display-id-block_3 .views-field-field-media-images {
    width: 100%;
}

/* IMPORTANT: kill the inline commas/spaces if any + make grid */
.view-about-us.view-display-id-block_3 .views-field-field-media-images .field-content {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
    padding: 0;
    margin: 0;
    font-size: 0;
    margin-bottom: -7px;
    PADDING-TOP: 41PX;
    BACKGROUND: #f5f3ee;
}

/* each image item */
.view-about-us.view-display-id-block_3 .views-field-field-media-images .field-content>div {
    margin: 0 !important;
    padding: 0 !important;
    position: relative;
    overflow: hidden;
}

/* images */
.view-about-us.view-display-id-block_3 .views-field-field-media-images img {
    display: block;
    width: 100%;
    height: 397px;
    /* adjust if needed */
    object-fit: cover;
}

/* responsive */
@media (max-width: 992px) {
    .view-about-us.view-display-id-block_3 .views-field-field-media-images .field-content {
        grid-template-columns: repeat(2, 1fr);
    }

    .view-about-us.view-display-id-block_3 .views-field-field-media-images img {
        height: 280px;
    }
}

@media (max-width: 576px) {
    .view-about-us.view-display-id-block_3 .views-field-field-media-images .field-content {
        grid-template-columns: 1fr;
    }

    .view-about-us.view-display-id-block_3 .views-field-field-media-images img {
        height: auto;
    }
}

.reservation-wrapper-page {
    background: #10172b;
    display: flex;
    justify-content: space-between;
    gap: 91px;

    #block-bootstrap-barrio-subtheme-webform {
        padding: 243px 0 107px 234px;
        width: auto;
    }

    #block-bootstrap-barrio-subtheme-webform .reservation-kicker {
        color: #B7B5A9;
        font-family: "Noto Serif Ethiopic ExtraCondensed";
        font-size: 60.529px;
        font-style: normal;
        font-weight: 300;
        line-height: 1;
        letter-spacing: 2.882px;
        text-transform: uppercase;
        margin: 0;
        margin-bottom: 39px;
    }

    #block-bootstrap-barrio-subtheme-webform #edit-processed-text-01 p {
        margin: 0;
    }
}

/* ============================
   2) CSS: style قريب للصورة
   ============================ */
.event-form-wrapper {
    display: flex;
    min-height: 100vh;
    background: #fff;
    background: url(./event-back.svg) no-repeat center bottom;
    background-size: cover;
    position: relative;
    justify-content: center;
    /* margin-top: -31px; */
}

/* left form column */
#block-bootstrap-barrio-subtheme-catering {
    flex: 0 0 42%;
    padding: 60px 73px 60px 46px;
    position: relative;
    z-index: 8;
    top: -187px;
    background: #fff;
}

#block-bootstrap-barrio-subtheme-eventscatering {
    position: relative;
    z-index: 8;
    top: -187px;
    background: #fff;
}

#block-bootstrap-barrio-subtheme-webform-2 form {
    max-width: 520px;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

/* title */
#block-bootstrap-barrio-subtheme-webform-2 #edit-processed-text strong {
    margin: 0 0 30px;
    color: #141D38;
    font-family: "Noto Serif Ethiopic ExtraCondensed";
    font-size: 31.58px;
    font-style: normal;
    font-weight: 600;
    line-height: 77.148px;
    letter-spacing: 0.469px;
}

#block-bootstrap-barrio-subtheme-webform-2 #edit-processed-text p {
    margin: 0;
    font-size: 28px;
    line-height: 1.25;
    color: #141D38;
    font-weight: 600;
}

/* inputs layout (label floating top like screenshot) */
#block-bootstrap-barrio-subtheme-webform-2 .js-form-item {
    position: relative;
    margin-bottom: 26px !important;

    strong {
        color: #141D38;
        font-family: "Noto Serif Ethiopic ExtraCondensed";
        font-size: 31.58px;
        font-style: normal;
        font-weight: 600;
        line-height: 77.148px;
        letter-spacing: 0.469px;
    }
}

#block-bootstrap-barrio-subtheme-webform-2 .js-form-item>label {
    position: absolute;
    left: 0;
    top: -2px;
    transform: translateY(-100%);
    font-size: 13px;
    letter-spacing: .04em;
    color: rgba(20, 29, 56, .45);
    font-weight: 500;
    text-transform: none;
    color: #9E9E9E;
    font-family: Montserrat;
    font-size: 16.073px;
    font-style: normal;
    font-weight: 400;
    line-height: 23.586px;
    letter-spacing: 1.339px;
    -webkit-transform: translateY(-100%);
    -moz-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    -o-transform: translateY(-100%);
}

#block-bootstrap-barrio-subtheme-webform-2 input.form-control,
#block-bootstrap-barrio-subtheme-webform-2 select.form-select,
#block-bootstrap-barrio-subtheme-webform-2 textarea.form-textarea {
    border: 0;
    border-bottom: 1px solid rgba(20, 29, 56, .15);
    border-radius: 0;
    /*background: transparent;
    */
    padding: -1px 0 0px;
    box-shadow: none !important;
    outline: none !important;
    border-bottom: 1.339px solid #E7E7E7;
    display: block;
    width: 100%;
    padding: 1.2rem .75rem 0;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    background-color: #fff;
    background-clip: padding-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: .375rem;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    color: #9E9E9E;
    font-family: Montserrat;
    font-size: 16.073px;
    font-style: normal;
    font-weight: 400;
    line-height: 23.586px;
    letter-spacing: 1.339px;
    border-radius: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
}

#block-bootstrap-barrio-subtheme-webform-2 input.form-control:focus,
#block-bootstrap-barrio-subtheme-webform-2 select.form-select:focus,
#block-bootstrap-barrio-subtheme-webform-2 textarea.form-textarea:focus {
    border-bottom-color: #141D38;
}

/* select arrow cleaner */
#block-bootstrap-barrio-subtheme-webform-2 select.form-select {
    padding-right: 34px;
    background-image: none;
}

/* textarea like screenshot */
#block-bootstrap-barrio-subtheme-webform-2 textarea.form-textarea {
    resize: none;
    min-height: 98px;
}

.form-required::after {
    filter: grayscale(.1) opacity(0.5) grayscale(1);
}

/* submit button */
#block-bootstrap-barrio-subtheme-webform-2 .form-actions {
    margin: 0;
}

#block-bootstrap-barrio-subtheme-webform-2 form .form-actions {
    align-self: flex-start !important;
}

#block-bootstrap-barrio-subtheme-webform-2 button {
    background: #6A2E28;
    border: 0;
    border-radius: 0;
    padding: 14px 34px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    background: #662B25;
    display: flex;
    min-height: 60.272px;
    padding: 21.403px 40px 22.796px 40.181px;
    justify-content: center;
    align-items: flex-start;
    color: #FFF;
    text-align: center;
    font-family: Montserrat;
    font-size: 14.733px;
    font-style: normal;
    font-weight: var(--font-weight-600, 600);
    line-height: 14.733px;
    /* 100% */
    letter-spacing: 1.68px;
    text-transform: uppercase;
}

#block-bootstrap-barrio-subtheme-webform-2 button:hover {
    filter: brightness(.92);
}

/* right image column */
#block-bootstrap-barrio-subtheme-reservationformimage {
    flex: 1;
    position: relative;
    overflow: hidden;
}


#block-bootstrap-barrio-subtheme-reservationformimage img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* overlay tint like screenshot */
#block-bootstrap-barrio-subtheme-reservationformimage::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .22);
    pointer-events: none;
}

/* responsive */
@media (max-width: 992px) {
    .event-form-wrapper {
        flex-direction: column;
        min-height: auto;
        margin-bottom: -18px;
    }

    #block-bootstrap-barrio-subtheme-webform-2 {
        flex: 1 1 auto;
        padding: 50px 22px;
    }

    #block-bootstrap-barrio-subtheme-webform-2 form {
        max-width: 100%;
    }

    #block-bootstrap-barrio-subtheme-reservationformimage {
        height: 360px;
    }
}

/* اللون الافتراضي (قبل الكتابة) */
#block-bootstrap-barrio-subtheme-webform-2 input.form-control,
#block-bootstrap-barrio-subtheme-webform-2 select.form-select,
#block-bootstrap-barrio-subtheme-webform-2 textarea.form-textarea {
    color: #DCDCDC;
}

/* لما يبلّش يكتب / يكون فيه قيمة */
#block-bootstrap-barrio-subtheme-webform-2 input.form-control:not(:placeholder-shown),
#block-bootstrap-barrio-subtheme-webform-2 textarea.form-textarea:not(:placeholder-shown) {
    color: #000;
}

/* للـ select لما يختار قيمة */
#block-bootstrap-barrio-subtheme-webform-2 select.form-select:valid {
    color: #000;
}

/* أثناء الفوكس (اختياري – إحساس أفضل) */
#block-bootstrap-barrio-subtheme-webform-2 input.form-control:focus,
#block-bootstrap-barrio-subtheme-webform-2 select.form-select:focus,
#block-bootstrap-barrio-subtheme-webform-2 textarea.form-textarea:focus {
    color: #000;
}




/* =========================================================
   CONTACT PAGE STYLE (matches screenshot)
   Based on your wrappers:
   .contact-page
   .contact-top
   .contact-bottom
   .contact-bottom__left / __middle / __right
========================================================= */

/* Page background */
.contact-page {
    background: url(./contact-back.svg) #141d38 no-repeat center center;
    /* background-size: 100% 100%; */
    padding: 58px 0 0;
    margin-bottom: -12px;
    position: relative;
    overflow: hidden;
}

/* subtle grid lines like screenshot */
.contact-page:before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .10;
    background:
        linear-gradient(to right, rgba(255, 255, 255, .12) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, .12) 1px, transparent 1px);
    background-size: 280px 280px;
}

/* keep content above grid */
.contact-top,
.contact-bottom {
    position: relative;
    z-index: 1;
    background: url(./contact-back.svg) no-repeat !important;
}


/* Global container width + side padding */
.contact-top,
.contact-bottom {
    padding-inline: 125px !important;
    margin: 0 auto;
    padding: 0;
}

/* ---------------- TOP (title + text + map) ---------------- */
.contact-top {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-block: 260px 171px;
}

#block-bootstrap-barrio-subtheme-views-block-top-section-block-2 {
    margin: 0;
}

#block-bootstrap-barrio-subtheme-views-block-top-section-block-2 .views-field-title {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#block-bootstrap-barrio-subtheme-views-block-top-section-block-2 .views-label-title {
    color: var(--demo-gloriathemes-com-nugget, var(--color-yellow-43, #BB961F));
    font-family: "Noto Serif Ethiopic ExtraCondensed";
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: var(--line-height-15_41, 15.41px);
    /* 96.312% */
    letter-spacing: 2px;
    text-transform: uppercase;
}

#block-bootstrap-barrio-subtheme-views-block-top-section-block-2 .views-field-title .field-content {
    /*font-size: 0;*/
    /*width: 768px;*/
    /*height: 58px;*/
    /*background: url(./For-inquiries.svg) no-repeat center !important;*/
    /*background-size: contain !important;*/
    /*margin-block: 24px;*/
}

#block-bootstrap-barrio-subtheme-views-block-top-section-block-2 .views-field-body p {
    color: #F4F2E1;
    font-family: Montserrat;
    font-size: 15px;
    font-style: normal;
    font-weight: 300;
    line-height: var(--line-height-27_2, 27.2px);
    /* 181.333% */
    letter-spacing: var(--letter-spacing-0_35, 0.35px);
    max-width: 820px;
}

/* Map frame like screenshot */
#block-bootstrap-barrio-subtheme-views-block-top-section-block-2 .views-field-field-map {
    margin-top: 83px;
}

#block-bootstrap-barrio-subtheme-views-block-top-section-block-2 .views-field-field-map p {
    margin: 0;
}

#block-bootstrap-barrio-subtheme-views-block-top-section-block-2 .views-field-field-map iframe {
    width: 100% !important;
    border: 0 !important;
    display: block;
    background: #fff;
    border-radius: 2px;
    height: 411px !important;
}

/* ---------------- BOTTOM (3 columns) ---------------- */
/* IMPORTANT: remove your inline grid-template-columns: 1fr 1fr 1fr
   We override it here to match screenshot proportions */
.contact-bottom {
    display: grid !important;
    grid-template-columns: 1.25fr 1fr 304px !important;
    gap: 48px;
    align-items: start;
    padding-bottom: 96px;
}

.contact-bottom__left {
    margin-top: -57px;

}

/* Titles in bottom columns */
.contact-bottom__left h2 {
    color: var(--fidalgo-qodeinteractive-com-white, var(--color-white-solid, #FFF));
    font-family: "Noto Serif Ethiopic ExtraCondensed";
    font-size: var(--font-size-36, 36px);
    font-style: normal;
    font-weight: var(--font-weight-300, 300);
    line-height: var(--line-height-41, 41px);
    letter-spacing: 1.4px;
    text-transform: uppercase;
    margin: 0 0 19px;
}

.opening-wrapper h2,
.contact-bottom__middle h2 {
    margin: 0 0 21px;
    color: var(--fidalgo-qodeinteractive-com-white, var(--color-white-solid, #FFF));
    leading-trim: both;
    text-edge: cap;
    font-family: "Noto Serif Ethiopic ExtraCondensed";
    font-size: 20px;
    font-style: normal;
    font-weight: 300;
    line-height: var(--line-height-27, 27px);
    letter-spacing: 1px;
    text-transform: uppercase;
}

.contact-us-address-wrapper {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-inline: 36px 0;
}

/* left small intro line */
.contact-bottom__left .webform-type-processed-text p {
    margin: 0 0 30px;
    color: var(--fidalgo-qodeinteractive-com-tiara, var(--color-cyan-83, #CED8D8));
    font-family: Montserrat;
    font-size: var(--font-size-17, 17px);
    font-style: normal;
    font-weight: 300;
    line-height: 28px;
}

/* Form fields look */
.contact-bottom__left input.form-control,
.contact-bottom__left select.form-select,
.contact-bottom__left textarea.form-textarea {
    background: transparent;
    border: 0;
    border-bottom: 1px solid #B9B9B9;
    border-radius: 0;
    color: #B9B9B9;
    padding: 9px 0 0px;
    margin-bottom: 30px;
    box-shadow: none;
    outline: none;
    font-family: Montserrat, sans-serif;
    font-size: 13px;

    option {
        color: #fff;
        background-color: #10172b;
    }
}

.contact-bottom__left select.form-select {
    background: url(./dropdown-arrow.svg.svg) no-repeat 98% top !important;
}

.contact-bottom__left textarea.form-textarea {
    max-height: 69px;
}

.contact-bottom__left input.form-control:focus,
.contact-bottom__left select.form-select:focus,
.contact-bottom__left textarea.form-textarea:focus {
    border-bottom-color: rgba(255, 255, 255, .55);
    box-shadow: none;
    outline: none;
}

/* Hide labels (screenshot style) */
.contact-bottom__left label {
    color: #B9B9B9;
    font-family: Montserrat;
    font-size: var(--font-size-16, 16px);
    font-style: normal;
    font-weight: var(--font-weight-300, 300);
    line-height: normal;
}

/* Submit button like screenshot */
.contact-bottom__left .form-actions {
    margin-top: 18px !important;
}

.contact-bottom__left button {
    border: 0.878px solid #B48741;
    display: flex;
    width: 154px;
    padding: 14.924px;
    justify-content: center;
    align-items: center;
    color: #FFF;
    font-family: "Noto Serif Ethiopic ExtraCondensed";
    font-size: 13.87px;
    font-style: normal;
    font-weight: 400;
    line-height: 15.802px;
    /* 113.932% */
    text-transform: uppercase;
    background: transparent;
}

.contact-bottom__left button:hover {
    background: #B48741;
    color: #fff;
    border-color: #B48741;
}

/* ---------------- Middle info column ---------------- */
.contact-bottom__right .opening-wrapper h2,
.contact-bottom__middle .contact-information-wrapper h2 {
    color: var(--fidalgo-qodeinteractive-com-white, var(--color-white-solid, #FFF));
    leading-trim: both;
    text-edge: cap;
    font-family: "Noto Serif Ethiopic ExtraCondensed";
    font-size: 20px;
    font-style: normal;
    font-weight: 300;
    line-height: var(--line-height-27, 27px);
    /* 135% */
    letter-spacing: 1px;
    text-transform: uppercase;
}

.contact-bottom__left label::after {
    filter: brightness(21.5) opacity(1) grayscale(8) contrast(0);
}

#block-bootstrap-barrio-subtheme-socialicons-2 svg {
    font-size: 23.9px !important;

}

.opening-wrapper {
    padding-bottom: 100px;
}

.opening-wrapper p,
.opening-wrapper a,
.contact-bottom__middle p,
.contact-bottom__middle a {
    color: var(--fidalgo-qodeinteractive-com-tiara, var(--color-cyan-83, #CED8D8));
    leading-trim: both;
    text-edge: cap;
    font-family: Montserrat;
    font-size: var(--font-size-17, 17px);
    font-style: normal;
    font-weight: var(--font-weight-300, 300);
    line-height: var(--line-height-28, 28px);
    /* 164.706% */
}

.contact-bottom__middle a:hover {
    color: rgba(255, 255, 255, .85);
}

/* spacing between groups */
.contact-bottom__middle .contact-us-wrapper {
    margin-bottom: 26px;
}

.contact-bottom__middle .address-wrapper {
    margin-bottom: 26px;
}

/* ---------------- Right column (icons + watermark circle) ---------------- */
.contact-bottom__right {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0px;
    /* padding-top: 44px; */
    /* pushes it down like screenshot */
}

#block-bootstrap-barrio-subtheme-socialicons-2 ul {
    display: flex;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

#block-bootstrap-barrio-subtheme-socialicons-2 a {
    color: rgba(255, 255, 255, .75);
    display: inline-flex;
    width: 28px;
    height: 28px;
    align-items: center;
    justify-content: center;
}

#block-bootstrap-barrio-subtheme-socialicons-2 a:hover {
    color: rgba(255, 255, 255, .95);
}

/* watermark circle */
#block-bootstrap-barrio-subtheme-floatingimageblock {
    position: relative;
    margin: 68px auto;
}

#block-bootstrap-barrio-subtheme-floatingimageblock img {
    max-width: 235px;
    height: auto;
    display: block;
}

#block-bootstrap-barrio-subtheme-floatingimageblock a {
    /* display: none; */
    /* hide plus if you want screenshot exact */
    /* display: none; */
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    font-size: 0;
}

.about-us-images-wrapper .about-us-floating-link-wrapper {
    position: relative;

    .views-field-fieldset-2 {
        position: absolute;
        top: 50%;
        left: 29%;
        margin-top: -200px;
    }

    .views-field-nothing a {
        position: absolute;
        top: 77%;
        left: 0;
        width: 100%;
        height: 115%;
        margin-top: -200px;
        transform: translateY(-50%);
        font-size: 0;
    }

    .views-field-field-floating-image {
        margin-top: -200px;
    }
}

/* ---------------- Responsive ---------------- */
@media (max-width: 1300px) {

    .contact-top,
    .contact-bottom {
        padding: 0 30px;
    }

    .contact-bottom {
        grid-template-columns: 1fr 1fr !important;
        gap: 45px;
    }

    .contact-bottom__right {
        grid-column: 1 / -1;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding-top: 10px;
    }

    #block-bootstrap-barrio-subtheme-reservationformimage img {
        height: 48vh;
    }

    .reservation-wrapper-page {
        gap: 0;
        flex-direction: column;
    }

    #header {
        padding-inline: 74px;
    }

    #header .navbar-nav {
        gap: 17.884px;
        padding-inline-start: 95px;
    }

    .about-us-images-wrapper .about-us-floating-link-wrapper {
        .views-field-fieldset-2 {
            position: absolute;
            top: 50%;
            transform: translate(-50%, -50%);
            left: 50%;
            margin-top: 0;
            width: 308px;
        }
    }

    .about-us-images-wrapper {
        padding-inline: 5%;
    }

}

@media (max-width: 768px) {
    .contact-page {
        padding: 60px 0 70px;
    }

    .contact-top,
    .contact-bottom {
        padding: 0 18px;
    }



    #block-bootstrap-barrio-subtheme-views-block-top-section-block-2 .views-field-field-map iframe {
        height: 250px !important;
    }

    .contact-bottom {
        grid-template-columns: 1fr !important;
        gap: 32px;
        align-items: start;
        justify-items: start;
    }

    .contact-bottom__right {
        padding-top: 0;
    }

    .about-us-images-wrapper .about-us-floating-link-wrapper {
        .views-field-field-floating-image {
            margin: -200px auto;
            width: 200px;
        }
    }

    #block-bootstrap-barrio-subtheme-views-block-top-section-block-2 .views-field-field-map {
        margin-block: 20px;
    }

    #block-bootstrap-barrio-subtheme-floatingimageblock {
        margin: 0;
    }
}


@media (max-width: 1200px) {
    #block-bootstrap-barrio-subtheme-views-block-authentic-jordaan-block-1 .views-row {
        padding-inline: 121px 55px;
    }

    .view-menu .view-header {
        .view-menu .view-header {
            h2 {
                font-size: 100.44px;
            }
        }
    }

    .view-menu .views-row {
        grid-template-columns: 1fr 280px 1fr;
        padding-inline: 94px;
        gap: 70px;
    }


    .view-menu .views-field-field-menu-two-image {
        .field-content {
            gap: 10px;
        }

        .field--name-field-media-image img {
            height: 200px;
        }
    }

    #block-bootstrap-barrio-subtheme-simplenewssubscription form {
        justify-content: center;
    }

    #block-bootstrap-barrio-subtheme-simplenewssubscription::before {
        text-align: center;
    }

    #block-bootstrap-barrio-subtheme-simplenewssubscription {
        padding-block-end: 25px;
    }

    .contact-page {
        padding: 214px 0 0;
    }

    .site-footer__bottom {
        margin-top: 38px;
        padding-block: 63px 40px !important;
    }

    #block-bootstrap-barrio-subtheme-views-block-top-section-block-2 .views-field-field-map iframe {
        margin-bottom: 80px;
    }

    .event-form-wrapper {
        background-size: contain;
    }

    #block-bootstrap-barrio-subtheme-catering {
        padding: 25px 29px 0px 46px;
    }
}



/* ===== Mobile / Tablet ===== */
@media (max-width: 991.98px) {
    #header {
        padding-inline: 27px 18px;
        top: 18px;
        left: 0;
        transform: none;
    }

    /* collapsed container becomes dropdown panel */
    #CollapsingNavbar {
        position: absolute;
        top: calc(100% + 12px);
        left: 18px;
        right: 18px;
        border-radius: 16px;
        background: rgba(10, 10, 10, 0.92);
        border: 1px solid rgba(255, 255, 255, 0.12);
        overflow: hidden;

        /* we will control open/close by JS class */
        display: none;
    }

    /* when open */
    body.nav-open #CollapsingNavbar {
        display: block;
    }

    /* menu list */
    #header .navbar-nav {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 14px;
        padding-inline-start: 14px;
    }

    #header .navbar-nav .nav-item {
        width: 100%;
    }

    #header .navbar-nav a {
        display: block;
        padding: 12px 10px !important;
        line-height: 1.2;
        font-size: 16px;
        border-radius: 10px;
    }

    #header .navbar-nav a::after {
        display: none;
    }

    #header .navbar-nav a:hover,
    #header .navbar-nav a.is-active {
        background: rgba(201, 162, 77, 0.14);
    }

    /* Book a table becomes full-width button in mobile */
    #header .navbar-nav .book-a-table {
        margin-top: 10px;
    }

    #header .navbar-nav .book-a-table .nav-link,
    #header .navbar-nav .book-a-table span {
        width: 100%;
        height: 50px;
        border-radius: 12px;
    }

    /* optional overlay */
    /* .nav-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.45);
        opacity: 0;
        pointer-events: none;
        transition: opacity .2s ease;
        z-index: 998;
    } */

    body.nav-open .nav-overlay {
        opacity: 1;
        pointer-events: auto;
    }

    /* lock page scroll when open */
    body.nav-open {
        overflow: hidden;
    }


    .block-views-blockslider-block-1 .views-field-title {
        width: 341px !important;
    }

    .block-views-blockslider-block-1 .slider-floating-link-wrapper .views-field-field-floating-image,
    .block-views-blockslider-block-1 .slider-floating-link-wrapper .views-field-field-floating-image * {
        width: 250px !important;
    }

    .authentic-jordanian-left-wrapper {
        font-size: 39px;
        width: auto;
    }

    #block-bootstrap-barrio-subtheme-views-block-authentic-jordaan-block-1 .views-row {
        flex-direction: column;
        padding-inline: 22px;
    }

    .authentic-jordanian-left-wrapper img {
        right: 0;
    }

    #block-bootstrap-barrio-subtheme-views-block-authentic-jordaan-block-1 .views-row {
        gap: 162px;
    }

    #block-bootstrap-barrio-subtheme-webform form,
    #block-bootstrap-barrio-subtheme-webform-4,
    .authentic-right-second-section-wrapper {
        width: auto;
    }

    .authentic-jordanian-right-wrapper .views-field-field-second-image {
        position: absolute;
        bottom: -135px;
        left: 0;
    }

    .view-menu .views-row {
        display: grid;
        grid-template-columns: 1fr;
        gap: 56px;
        padding-inline: 26px;
        padding-top: 30px;
    }

    .view-menu .view-header {
        background: #f7f7f1;
        padding: 34px 0 0;

    }

    .view-menu .views-field-field-media-images {
        order: 3;
    }

    .view-menu .views-field-field-menu-two-image .field--type-image {
        display: flex;
        align-items: flex-end;
    }

    .view-menu .views-field-field-media-images img {
        height: 503px;
    }

    .view-authentic-jordanian .views-row {
        flex-direction: column-reverse;
        gap: 37px;
    }

    .authentic-left-second-section-wrapper- .views-field-field-floating-image img {
        right: 0;
    }

    .authentic-right-second-section-wrapper {
        padding-top: 0;
    }

    #block-bootstrap-barrio-subtheme-webform .reservation-kicker,
    #block-bootstrap-barrio-subtheme-webform-4 .reservation-kicker {
        font-size: 41px;
        margin-inline-start: 0;
    }

    #block-bootstrap-barrio-subtheme-webform select.form-select,
    #block-bootstrap-barrio-subtheme-webform input.form-control,
    #block-bootstrap-barrio-subtheme-webform-4 select.form-select,
    #block-bootstrap-barrio-subtheme-webform-4 input.form-control {
        width: 82%;
    }

    #block-bootstrap-barrio-subtheme-views-block-authentic-jornian-block-2 {
        padding-inline: 21px;
    }

    .view-menu .views-field-field-menu-two-image .field-content {
        flex-direction: row;
        justify-content: space-between;
    }

    .view-menu .views-field-field-menu-two-image .field-content>div {
        display: flex;
        justify-content: flex-end;
    }

    .view-gallery .field-content {
        grid-template-columns: 1fr;

    }

    .view-gallery .view-header h2 {
        padding-block: 50px;
    }

    #block-bootstrap-barrio-subtheme-simplenewssubscription::before {
        text-align: center;
    }

    .view-gallery .views-field-field-floating-image img {
        left: 47%;
    }

    .site-footer__bottom {
        padding-inline: 20px;
        background-size: 161%;
    }

    .site-footer__bottom .region-footer-fifth {
        display: flex;
        flex-wrap: nowrap;
        padding-block: 80px 40px;
        gap: 5px;
        margin-top: 42px;
    }

    #block-bootstrap-barrio-subtheme-socialicons ul.nav {
        flex-wrap: nowrap;
    }

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

    #reservation-wrapper-2 #block-bootstrap-barrio-subtheme-formimage-2 {
        display: none;
    }

    .reservation-wrapper-page #block-bootstrap-barrio-subtheme-webform {
        padding: 203px 0 107px 23px;
    }

    #block-bootstrap-barrio-subtheme-views-block-top-section-block-1 .views-row,
    #block-bootstrap-barrio-subtheme-views-block-about-us-block-1 .view-about-us .views-row {
        padding: 181px 27px 338px;
    }

    #block-bootstrap-barrio-subtheme-eventscatering,
    #block-bootstrap-barrio-subtheme-eventscatering * {
        width: 100%;

    }

    #block-bootstrap-barrio-subtheme-views-block-top-section-block-2 .views-field-title .field-content {

        width: auto;
    }

    .contact-page {
        padding: 167px 0 0;
    }

    .contact-top,
    .contact-bottom {
        padding-inline: 5% !important;
    }

    .contact-bottom__left {
        margin-top: 20px;
    }

    .contact-bottom {
        grid-template-columns: 1fr !important;
    }

    .contact-us-address-wrapper {
        padding: 0;
    }

    .contact-bottom__right {
        flex-direction: column;
    }

    .opening-wrapper {
        padding-bottom: 0px;
    }
}

@media (max-width:500px) {
    .page-node-9 #block-bootstrap-barrio-subtheme-views-block-menu-block-1 .view-header {
        display: none;
    }

}

@media (max-width: 450.98px) {


    #block-bootstrap-barrio-subtheme-views-block-top-section-block-1 .views-row,
    #block-bootstrap-barrio-subtheme-views-block-about-us-block-1 .view-about-us .views-row {
        .views-field-title {
            .field-content {
                /*height: 99px;*/
            }
        }
    }

    .page-node-17 .site-footer {
        padding: 26px 0 0px;
    }

    .page-node-9 #block-bootstrap-barrio-subtheme-views-block-menu-block-1 .view-header {
        position: static;
        padding-bottom: 0;
        /* display: none; */
        height: 0;
    }

    #block-bootstrap-barrio-subtheme-views-block-about-us-block-1 .view-about-us .views-row {
        padding: 181px 27px 226px;
    }

    #reservation-wrapper-2 {
        height: 100vh;
    }

    .site-footer__bottom .region-footer-fifth {
        padding-block: 0;
        gap: 5px;
        margin-top: 19px;
    }

    #block-bootstrap-barrio-subtheme-eventscatering {
        top: -49px;
    }


    .reservation-wrapper-page {
        #block-bootstrap-barrio-subtheme-webform .reservation-kicker {
            font-size: 51.529px;
        }
    }

    #block-bootstrap-barrio-subtheme-views-block-about-us-block-2 .view-about-us .views-row {
        gap: 0;
    }

    #block-bootstrap-barrio-subtheme-views-block-about-us-block-2 .get-to-know-wraapper .views-field-title .field-content {
        font-size: 52.44px;
    }
}

@media (max-width: 400.98px) {
    .view-menu .view-header h2 {
        font-size: 115.44px;
    }

    .view-gallery .views-field-field-floating-image img {
        left: 27%;
    }

    .authentic-jordanian-left-wrapper img {
        right: 12px;
    }

    .block-views-blockslider-block-1 .views-field-title {
        width: 301px !important;
    }

    .view-gallery .view-header h2 {
        font-size: 44.44px;
    }

    #block-bootstrap-barrio-subtheme-webform .reservation-title,
    #block-bootstrap-barrio-subtheme-webform-4 .reservation-title {
        font-size: var(--font-size-36, 28px);
    }



}


.persons-popup {
    position: absolute;
    z-index: 9999;
    width: 360px;
    max-width: calc(100vw - 24px);
    background: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 12px;
    box-shadow: 0 18px 45px rgba(0, 0, 0, .14);
    padding: 16px;
    display: none;
}

.persons-popup.is-open {
    display: block;
}

.persons-popup__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
}

.persons-popup__label {
    display: flex;
    flex-direction: column;
    font-family: var(--Montserrat);
    gap: 4px;
}

.persons-popup__label strong {
    font-size: 16px;
    font-weight: 600;
    font-family: var(--Montserrat);
}

.persons-popup__label small {
    font-size: 12px;
    font-family: var(--Montserrat);
    color: #6b7280;
}

.persons-popup__stepper {
    display: flex;
    align-items: center;
    gap: 14px;
    user-select: none;
}

.persons-popup__btn {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    border: 1px solid #cbd5e1;
    background: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
}

.persons-popup__btn:disabled {
    opacity: .45;
    cursor: not-allowed;
}

.persons-popup__count {
    min-width: 22px;
    text-align: center;
    font-size: 16px;
    font-weight: 600;
}

.persons-popup__note {
    margin-top: 12px;
    font-size: 12px;
    color: #6b7280;
    line-height: 1.4;
}

.persons-popup__footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 14px;
}

.persons-popup__apply {
    border: 0;
    background: transparent;
    color: #fff;
    background-color: #141d38;
    border: none;
    font-weight: 700;
    cursor: pointer;
    padding: 6px 8px;
    font-family: var(--Montserrat);
}

.persons-popup__apply:hover {}

/* ===============================
   LOGIN PAGE – GENERAL LAYOUT
   =============================== */

.page-user-login {
    background-color: #0f1b3d;
    /* Dark blue theme */
    min-height: 100vh;
}

/* Fix content overlap with absolute header */
.page-user-login #main-wrapper {
    background: #141D38;
    padding-top: 140px;
    /* adjust if header height changes */
}

/* Center main content */
.page-user-login #content {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 80px;
}

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

.page-user-login .user-login-form {
    max-width: 420px;
    background-color: #ffffff;
    padding: 40px 35px;
    border-radius: 14px;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.25);
}

/* ===============================
   FORM LABELS
   =============================== */

.page-user-login .user-login-form label {
    font-size: 14px;
    font-weight: 600;
    color: #0f1b3d;
    margin-bottom: 6px;
}

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

.page-user-login .user-login-form .form-item {
    margin-bottom: 22px;
}

.page-user-login .user-login-form input.form-control {
    height: 48px;
    border-radius: 8px;
    border: 1px solid #d6d6d6;
    padding: 0 14px;
    font-size: 15px;
    transition: all 0.25s ease;
}

.page-user-login .user-login-form input.form-control:focus {
    border-color: #c8a15a;
    /* Gold */
    box-shadow: 0 0 0 0.15rem rgba(200, 161, 90, 0.25);
}

/* ===============================
   SUBMIT BUTTON
   =============================== */

.page-user-login .user-login-form .form-actions {
    margin-top: 30px;
}

.page-user-login .user-login-form button[type="submit"] {
    width: 100%;
    height: 50px;
    background-color: #c8a15a;
    /* Gold */
    border: none;
    border-radius: 30px;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
}

.page-user-login .user-login-form button[type="submit"]:hover {
    background-color: #b18c45;
    color: #ffffff;
    transform: translateY(-1px);
}

/* ===============================
   REMOVE UNWANTED SPACING
   =============================== */

.page-user-login .layout-main-wrapper {
    padding-bottom: 80px;
}

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

@media (max-width: 576px) {
    .page-user-login #main-wrapper {
        padding-top: 120px;
    }

    .page-user-login .user-login-form {
        margin: 0 15px;
        padding: 30px 20px;
    }
}

.error-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.error-page-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center;
    background: #141D38;
    margin-top: -50px;
    margin-bottom: -50px;
}

.error-code {
    color: #fff;
    text-align: center;
    font-family: "Noto Serif Ethiopic ExtraCondensed", serif;
    font-size: 148.44px;
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    text-transform: uppercase;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}

.error-title {
    color: #fff;
    font-family: "Noto Serif Ethiopic ExtraCondensed", serif;
    font-size: 36px;
    font-weight: 400;
    text-transform: uppercase;
}

.error-description {
    color: #ffffff;
    font-size: 18px;
}

.error-actions {
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
}

.error-content .btn-primary {
    display: flex;
    width: 235px;
    padding: 14.924px 0;
    justify-content: center;
    align-items: center;
    color: #fff !important;
    background: #512C1D !important;
    font-family: "Noto Serif Ethiopic ExtraCondensed", serif;
    font-size: 19.87px;
    font-style: normal;
    font-weight: 400;
    line-height: 15.802px;
    text-transform: uppercase;
    border: 0.878px solid #512C1D !important;
    text-decoration: none;
    transition: all 0.3s ease;
}

.btn-custom-404:hover {
    background-color: #512C1D;
    color: #fff;
}

.btn-custom-404 i {
    margin-right: 5px;
}

.helpful-links {
    border-top: 1px solid #dee2e6;
    padding-top: 2rem;
}

.helpful-links h4 {
    color: #141D38;
    font-family: "Noto Serif Ethiopic ExtraCondensed", serif;
    font-size: 20px;
    text-transform: uppercase;
}

.helpful-links ul li {
    margin: 0.5rem 0;
}

.helpful-links ul li a {
    color: #512C1D;
    text-decoration: none;
    font-family: "Noto Serif Ethiopic ExtraCondensed", serif;
    transition: color 0.3s ease;
}

.helpful-links ul li a:hover {
    color: #141D38;
    text-decoration: underline;
}

.field--name-field-real-time-seo {
    display: none;
}

/* Fullscreen black overlay */
#block-bootstrap-barrio-subtheme-hideafter1s {
    position: fixed;
    inset: 0;
    /* top:0; right:0; bottom:0; left:0 */
    width: 100%;
    height: 100vh;
    z-index: 999999;

    background: #141D38;
    /* أسود */
    display: flex;
    justify-content: center;
    align-items: center;

    opacity: 1;
    visibility: visible;

    transition: opacity 0.5s ease, visibility 0.5s ease;
}

/* hide effect */
#block-bootstrap-barrio-subtheme-hideafter1s.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

#block-bootstrap-barrio-subtheme-hideafter1s * {
    font-size: 0;
}


.webform-submission-reservation-form .form-actions,
.webform-submission-reservation-top-form .form-actions{
    display: none !important;
}


:root {
    --bg-color: #642828;
    /* Deep Red */
    --text-color: #ffffff;
    /* White text as requested */
    --accent-color: #b48c64;
    /* Gold/Brown from previous iteration */
    --font-primary: 'Montserrat', sans-serif;
}

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



.booking-container {
    width: 100%;
    max-width: 400px;
    padding: 2rem;
}

.booking-container .form-group {
    margin-bottom: 2rem;
    position: relative;
    border-bottom: 1px solid var(--accent-color);
    opacity: 1;
    /* Increased opacity for better contrast with new colors */
}

.booking-container select,
.booking-container input {
    width: 100%;
    background: transparent;
    border: none;
    color: var(--text-color);
    font-size: 1.2rem;
    font-family: inherit;
    font-weight: 400;
    /* Increased weight for visibility */
    padding: 10px 0;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    outline: none;
    cursor: pointer;
}

.booking-container .form-group::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
    width: 8px;
    height: 8px;
    border-bottom: 2px solid var(--accent-color);
    /* Thicker chevron */
    border-right: 2px solid var(--accent-color);
    pointer-events: none;
    margin-right: 5px;
    margin-top: -2px;
}

.booking-container .no-arrow::after {
    display: none;
}

.booking-container .submit-btn {
    width: 100%;
    background: transparent;
    color: var(--text-color);
    border: 1px solid var(--accent-color);
    padding: 15px;
    font-size: 1rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-top: 1rem;
    cursor: pointer;
    transition: background 0.3s, color 0.3s;
    font-family: inherit;
    text-decoration: none;
    /* For anchor tag usage */
    display: block;
    /* For anchor tag usage */
    text-align: center;
    /* For anchor tag usage */
}

.booking-container  .submit-btn:hover {
    background: var(--accent-color);
    color: var(--bg-color);
}

.booking-container ::placeholder {
    color: var(--text-color);
    opacity: 0.7;
}

/* Custom Guest Picker Styles */
.booking-container .custom-select-container {
    cursor: pointer;
}

.booking-container .selected-option {
    padding: 10px 0;
    width: 100%;
}

.booking-container .custom-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: #ffffff;
    color: #333;
    /* Dark text for inside the white card */
    padding: 1rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 10;
    border-radius: 4px;
    margin-top: 5px;
}

.booking-container .custom-dropdown.active {
    display: block;
}

.booking-container .guest-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.booking-container .counter-controls {
    display: flex;
    align-items: center;
    gap: 10px;
}

.booking-container .counter-btn {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid var(--accent-color);
    background: transparent;
    color: var(--accent-color);
    font-size: 1.2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.booking-container .guest-footer {
    text-align: right;
}

.booking-container .apply-btn {
    background-color: var(--bg-color);
    color: #fff;
    border: none;
    padding: 5px 15px;
    border-radius: 4px;
    cursor: pointer;
    font-family: var(--font-primary);
}


.contact-bottom__middle {
    display: none;
}

/*.contact-bottom {*/
/*    display: grid !important;*/
/*    grid-template-columns: 2.25fr 1fr 400px !important;*/
    /* gap: 48px; */
/*    align-items: start;*/
/*    padding-bottom: 96px;*/
/*}*/

.contact-bottom {
    display: flex !important;
    grid-template-columns: 1.25fr 1fr 304px !important;
    gap: 48px;
    align-items: start;
    padding-bottom: 96px;
    justify-content: space-around;
    flex-wrap: wrap;
}

.contact-bottom .contact-bottom__left {
    min-width: 40%;
}



.view.view-menu.view-id-menu.view-display-id-block_1 .view-header  h3{
    display:none;
}



























#block-bootstrap-barrio-subtheme-views-block-top-section-block-1 .views-row .views-field-title .field-content,
#block-bootstrap-barrio-subtheme-views-block-top-section-block-2 .views-field-title .field-content,
#block-bootstrap-barrio-subtheme-webform .reservation-kicker,
.page-node-9 #block-bootstrap-barrio-subtheme-views-block-menu-block-1>h2{
    color: #F2EFDB;
    font-size: 42px !important;
}

.page-node-9 #block-bootstrap-barrio-subtheme-views-block-menu-block-1>h2 {
    text-transform: uppercase;
    padding: 268px 149px 67px;
    background: #141D38 no-repeat;
}


.view.view-about-us.view-id-about_us.view-display-id-block_1 .views-field.views-field-title span.field-content {
    color: #F2EFDB;
    font-size: 41px !important;
}


.block-views-blockslider-block-1 .views-field-title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 641px;
    /*height: 207px;*/
    background: initial;
    background-size: contain;
    font-size: 54px;
    color: #F2EFDB;
    text-align: center;
    line-height: 1.9;
    text-transform: uppercase;
}


























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

.block-views-blockslider-block-1 .views-field-title {
    font-size: 34px;
    top: 60%;
}

#block-bootstrap-barrio-subtheme-views-block-top-section-block-1 .views-row .views-field-title .field-content,
#block-bootstrap-barrio-subtheme-views-block-top-section-block-2 .views-field-title .field-content,
#block-bootstrap-barrio-subtheme-webform .reservation-kicker,
.page-node-9 #block-bootstrap-barrio-subtheme-views-block-menu-block-1>h2{
    font-size: 22px !important;
}
.view.view-about-us.view-id-about_us.view-display-id-block_1 .views-field.views-field-title span.field-content {
    font-size: 22px !important;
}


.page-node-9 #block-bootstrap-barrio-subtheme-views-block-menu-block-1>h2 {
    padding: 202px 139px 49px;
    height: initial;
}

#block-bootstrap-barrio-subtheme-views-block-authentic-jordaan-block-1 .views-row{
        /*padding-top: 50px;*/

}
#block-bootstrap-barrio-subtheme-socialicons-2 ul {
    margin-top: 20px;
}

    
}

@media screen and (max-width: 768px) {
.block-views-blockslider-block-1 {
    padding: 0px;
}

body {
    overflow-x: clip;
}


#block-bootstrap-barrio-subtheme-socialicons-3 {

    right: 20px;
}


.view-menu .views-field-field-media-images {
    z-index: 1;
}



.view-menu .views-field-field-menu-two-image {
    z-index: 1;
}
.view-menu .views-field-fieldset {
     .our-menu-wrapper {
        .views-field-nothing span {
          
            padding-top: 0px;
        }
    }
}


.view.view-menu.view-id-menu.view-display-id-block_1 .view-header h3 {
    display: inline-block;
    color: #512C1D;
    font-family: "Noto Serif Ethiopic ExtraCondensed";
    font-size: 28.112px;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
    /* padding-top: 72px; */
    text-align: left;
    width: 100%;
    padding-left: 25px;
    padding-bottom: 5px;
}
    .view.view-menu.view-id-menu.view-display-id-block_1 .views-field.views-field-nothing {
    display: none;
}



.view-menu .views-field-field-media-images {
    .field-content>div {
        top: 245px;

    }
}


body.page-node-9.path-node.node--type-page .view.view-menu.view-id-menu.view-display-id-block_1 .field-content p {
    font-size: 14px;
}

  
.event-form-wrapper {
    background: none;
    margin-bottom: -60px;
}


#block-bootstrap-barrio-subtheme-catering{
    top:0px;
} 

#block-bootstrap-barrio-subtheme-views-block-top-section-block-1 .views-row{
    padding: 181px 27px 30px;
}
    
   
}






}