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

:root {
    --lato: "Lato", sans-serif;
    --main-color: #7B2F6A;
    --dark-color: #231F20;
    --bedge-color: #F8F3EF;
}

.path-user main#content {
    position: relative;
    max-width: 500px;
    margin: 0 auto;
    margin-top: 60px;
    box-shadow: 0px 0px 10px 2px lightgray;
    border-radius: 15px;
    padding: 15px;
}

.breadcrumb li {
    position: absolute;
    top: 179px;
    left: 155px;
    display: flex;
    align-items: center;
    gap: 3px;
    color: #646464;
    font-family: Lato;
    font-size: 21.134px;
    font-style: normal;
    font-weight: 400;
    line-height: 46.018px;
    gap: 9px;
    /* 217.742% */
}

.breadcrumb li::before {
    content: "";
    width: 37.809px;
    height: 0.852px;
    background: #646464;
}

*:focus {
    outline: none;
    box-shadow: none !important;
}

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

.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6,
p,
.field--type-entity-reference {
    margin-bottom: 0;
}

body {
    /* overflow-x: hidden; */
    font-family: var(--lato);
}

.row {
    margin: 0;
}

.row>* {
    padding-inline: 0;
}

.node__content {
    margin-top: 0 !important;
}

main.main-content {
    min-height: 400px;
}

a {
    text-decoration: none;
}

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

.slide__media {
    display: none;
}

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

video {
    height: 100%;
}

.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,
.slick-track:before,
.slick-track:after {
    content: unset;
}

.slide__caption {
    padding: 0;
}

.path-checkout #main,
.path-cart #main,
.page-view-product-index #main,
.path-taxonomy #main,
.path-node #main {
    /* padding-block: 63px; */
    /* background: #f8f8f8; */
}

.path-product #main {
    /* padding-top: 63px; */
    /* background: #f8f8f8; */
}

@media (min-width: 1200px) {

    .container-xxl,
    .container-xl,
    .container-lg,
    .container-md,
    .container-sm,
    .container {
        padding-inline: 0;
    }
}

.form-submit::before {
    content: unset !important;
}

.field--type-image img,
.node .field--type-image,
.field--name-field-user-picture img {
    margin: 0 !important;
}




/* header  */


header .navbar-brand {
    position: relative;
    z-index: 99;
    padding: 38px 0 0 55px;
}

.views-field-nothing a,
.field--name-field-link a {
    position: relative;
    display: inline-flex;
    align-items: center;
    color: #7B2F6A;
    font-family: var(--lato);
    font-size: 15.5px;
    font-weight: 400;
    text-decoration: none;
    padding-left: 49px;
    width: fit-content;
    transition: all .35s ease;
    -webkit-transition: all .35s ease;
    -moz-transition: all .35s ease;
    -ms-transition: all .35s ease;
    -o-transition: all .35s ease;
}

/* السهم */
.views-field-nothing a::before,
.field--name-field-link a::before {
    content: "";
    position: absolute;
    left: 0;
    width: 38px;
    height: 38px;
    background: url("./more.svg") no-repeat center;
    background-size: contain;
    transition: all .35s ease;
    -webkit-transition: all .35s ease;
    -moz-transition: all .35s ease;
    -ms-transition: all .35s ease;
    -o-transition: all .35s ease;
}

/* hover animation */
.views-field-nothing a:hover::before,
.field--name-field-link a:hover::before {
    transform: translateX(220%);

}


.views-field-nothing a:hover,
.field--name-field-link a:hover {
    padding-left: 0;
    padding-right: 49px;
}


.container,
.container-lg,
.container-md,
.container-sm,
.container-xl {
    width: 100% !important;
    max-width: 100% !important;
}

/* ==========================================================
   RIGHT BAR (closed) keeps ONLY: logo + burger + socials
   OPEN = fullscreen layout like screenshot (2 cols + divider + Get in Touch)
   ========================================================== */

:root {
    --z2mm-purple: #7B2F6A;
    --bar-w: 128px;
    --line: rgba(255, 255, 255, .22);
}

#CollapsingNavbar {
    position: absolute;
    top: 0;
    right: 0;
    height: 100dvh;
    width: var(--bar-w);
    z-index: 9999;
    background: var(--z2mm-purple);

    display: block !important;
    overflow: hidden;
    transition: width .7s ease;
    -webkit-transition: width .7s ease;
    -moz-transition: width .7s ease;
    -ms-transition: width .7s ease;
    -o-transition: width .7s ease;
}

#CollapsingNavbar .hamza-wrapper {
    height: 100%;
    width: 100%;
    position: relative;

}

/* ---------------- CLOSED (bar) ---------------- */
#CollapsingNavbar.is-closed {
    width: var(--bar-w);
}

#CollapsingNavbar.is-closed .hamza-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 22px 10px 28px;
    gap: 14px;
}

/* hide both menus + text parts of get in touch, keep ONLY socials */
#CollapsingNavbar.is-closed nav {
    display: none !important;
}

/* Get in touch block: hide everything except the last div (icons) */
#CollapsingNavbar.is-closed #block-bootstrap-barrio-subtheme-getintouch2 {
    display: block !important;
    width: 100%;
}

#CollapsingNavbar.is-closed #block-bootstrap-barrio-subtheme-getintouch2 .get-in-touch-wrapper>h1,
#CollapsingNavbar.is-closed #block-bootstrap-barrio-subtheme-getintouch2 .get-in-touch-wrapper>div:nth-of-type(1) {
    display: none !important;
}

#CollapsingNavbar.is-closed #block-bootstrap-barrio-subtheme-getintouch2 .get-in-touch-wrapper>div:nth-of-type(2) {
    display: flex !important;
    flex-direction: column;
    gap: 14px;
    justify-content: center;
    align-items: center;
    padding-bottom: 10px;
}

#CollapsingNavbar.is-closed #block-bootstrap-barrio-subtheme-getintouch2 .field--name-field-media-image {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 18px;
}

#CollapsingNavbar.is-closed #block-bootstrap-barrio-subtheme-getintouch2 img {
    width: 23px;
    height: 23px;
    filter: brightness(0) invert(1);
    opacity: .95;
}

/* burger */
#leftMenuToggle {
    background: transparent !important;
    border: 0 !important;
    color: #fff !important;
    padding: 10px 8px !important;
    box-shadow: none !important;
    outline: none !important;
    cursor: pointer;
}

#leftMenuToggle .left-menu-icon {
    display: inline-block;
    font-size: 0;
    /* we will show icon only */
}

#leftMenuToggle::before {
    content: "";
    display: block;
    width: 18px;
    height: 14px;
    background:
        linear-gradient(#fff, #fff) 0 0/100% 2px no-repeat,
        linear-gradient(#fff, #fff) 0 50%/100% 2px no-repeat,
        linear-gradient(#fff, #fff) 0 100%/100% 2px no-repeat;
    opacity: .95;
}

/* optional vertical label like screenshot */
#CollapsingNavbar.is-closed::after {
    content: "From Vision to Venture";
    position: absolute;
    left: 50%;
    top: 52%;
    transform: translate(-50%, -50%) rotate(-90deg);
    color: rgba(255, 255, 255, .85);
    font-size: 12px;
    letter-spacing: .7px;
    white-space: nowrap;
    color: var(--hollow-org-uk-white, var(--color-white-solid, #FFF));
    font-family: Lato;
    font-size: 15.1px;
    font-style: normal;
    font-weight: 400;
    line-height: var(--line-height-28, 28px);
    /* 185.43% */
}

/* ---------------- OPEN (fullscreen) ---------------- */
#CollapsingNavbar.is-open {
    width: 100vw;

}

#CollapsingNavbar.is-open .hamza-wrapper {
    height: 100%;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr 420px;
    gap: 0;
    padding: 189px 149px;
    padding-inline-end: 0;
    overflow: hidden;
    align-content: start;
    background: var(--z2mm-purple) url(./Layer_1.svg) no-repeat;
    background-size: 119px 37.188px;
    background-position: 50px 40px;
}

/* show menus + full get in touch */
#CollapsingNavbar.is-open nav {
    display: block !important;
}

#CollapsingNavbar.is-open #block-bootstrap-barrio-subtheme-getintouch2 {
    position: relative;
}

#CollapsingNavbar.is-open #block-bootstrap-barrio-subtheme-getintouch2::before {
    content: "";
    position: absolute;
    top: 0;
    left: -42px;
    width: 1px;
    height: 664px;
    background: var(--line);
}

#CollapsingNavbar.is-open #block-bootstrap-barrio-subtheme-getintouch2 .get-in-touch-wrapper>h1,
#CollapsingNavbar.is-open #block-bootstrap-barrio-subtheme-getintouch2 .get-in-touch-wrapper>div:nth-of-type(1) {
    display: block !important;
}

#CollapsingNavbar.is-open #block-bootstrap-barrio-subtheme-getintouch2 .get-in-touch-wrapper>div:nth-of-type(2) {
    display: flex !important;
}

/* close button (X) */
#CollapsingNavbar.is-open .field--name-field-media-image {
    display: flex;
    gap: 12px;
}

#CollapsingNavbar.is-open #leftMenuToggle {
    position: absolute;
    top: 21px;
    right: 40px;
    width: 42px;
    height: 42px;
    padding: 0 !important;
}

#CollapsingNavbar.is-open #leftMenuToggle::before {
    content: "×";
    width: auto;
    height: auto;
    background: none;
    font-size: 34px;
    line-height: 29px;
    font-weight: 300;
    display: block;
    text-align: center;
    opacity: .95;
}

/* place menus */
#block-bootstrap-barrio-subtheme-firstmenu {
    grid-column: 1;

    ul {
        flex-direction: column;
    }
}

#block-bootstrap-barrio-subtheme-secondmenu {
    grid-column: 2;

    ul {
        flex-direction: column;
    }
}

/* menu link style like screenshot */
#CollapsingNavbar nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

#CollapsingNavbar nav .nav-item {
    margin: 0 0 35px;
    width: max-content;
}

#CollapsingNavbar nav a {
    color: #fff !important;
    text-decoration: none !important;
    font-size: 34px;
    font-weight: 600;
    letter-spacing: .2px;
    opacity: .92;
    line-height: 1;
    position: relative;
    display: flex;
    align-items: flex-end;
    width: fit-content;
}

#CollapsingNavbar nav a::after {
    content: "";
    background: url(./more.svg) no-repeat center;
    filter: invert(1) brightness(23);
    background-size: contain;
    display: inline-block;
    position: static;
    width: 32px;
    height: 32px;
    opacity: 0;
    transition: all .3s;
    -webkit-filter: invert(1) brightness(23);
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -ms-transition: all .3s;
    -o-transition: all .3s;
}

#CollapsingNavbar nav a:hover {
    text-decoration: underline !important;
}

#CollapsingNavbar nav a:hover::after {
    opacity: 1;
    transform: translateX(20px);
    -webkit-transform: translateX(20px);
    -moz-transform: translateX(20px);
    -ms-transform: translateX(20px);
    -o-transform: translateX(20px);
}

/* get in touch column + divider */
#block-bootstrap-barrio-subtheme-getintouch2 {
    grid-column: 3;
    /* border-left: 1px solid var(--line); */
}

#block-bootstrap-barrio-subtheme-getintouch2 .get-in-touch-wrapper h1 {
    color: #fff;
    font-size: 30px;
    font-weight: 500;
    margin: 0 0 22px;
}

#block-bootstrap-barrio-subtheme-getintouch2 a {
    color: #fff !important;
    text-decoration: none !important;
    display: block;
    font-size: 22px;
    margin: 0 0 12px;
    opacity: .92;
}

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

#block-bootstrap-barrio-subtheme-getintouch2 .get-in-touch-wrapper>div:nth-of-type(2) {
    margin-top: 18px;
    gap: 14px;
}

#block-bootstrap-barrio-subtheme-getintouch2 img {
    width: 22px;
    height: 22px;
    filter: brightness(0) invert(1);
    opacity: .95;
}

/* hide vertical label when open */
#CollapsingNavbar.is-open::after {
    content: none;
}

/* responsive */
@media (max-width: 1200px) {
    #CollapsingNavbar.is-open .hamza-wrapper {
        grid-template-columns: 1fr 1fr 360px;
        padding: 36px 34px;
        padding-top: 207px;
    }

    #CollapsingNavbar nav a {
        font-size: 28px;
    }
}

@media (max-width: 900px) {
    #CollapsingNavbar.is-open .hamza-wrapper {
        grid-template-columns: 1fr;
        padding: 26px 22px;
    }

    #block-bootstrap-barrio-subtheme-firstmenu,
    #block-bootstrap-barrio-subtheme-secondmenu,
    #block-bootstrap-barrio-subtheme-getintouch {
        grid-column: 1;
        margin-top: 90px;
    }

    #block-bootstrap-barrio-subtheme-getintouch {
        border-left: 0;
        padding-left: 0;
        border-top: 1px solid var(--line);
        padding-top: 22px;
    }
}


#block-bootstrap-barrio-subtheme-views-block-top-footer-block-1 {
    .node__content {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-bottom: 64px;
        border-bottom: 1px solid #D7D7DA;
        padding-inline-end: 104px;
    }
}

.site-footer__top {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    justify-items: center;
    align-items: center;
    padding: 77px 0;

    .region {
        width: 100% !important;
    }
}

.site-footer__top p {
    margin-top: 0 !important;
}

.site-footer__bottom {
    margin-top: 0 !important;
}

.region-footer-fifth ul {

    justify-content: center;

    svg {
        font-size: 24px !important;
        filter: opacity(0.6);

    }

    svg:hover {
        filter: opacity(1);
    }
}

.site-footer {
    padding-block: 80px 30px !important;
    padding-inline: 72px !important;

}

.footer-wrapper-1 {
    display: flex;
    width: 369px;
    flex-direction: column;
    align-items: flex-start;
    gap: 40px;

    h2 {
        color: var(--www-isiglobal-com-cod-gray, var(--color-grey-8, #151515));
        font-family: Lato;
        font-size: 68.1px;
        font-style: normal;
        font-weight: 400;
        line-height: var(--line-height-79_2, 79.2px);
        /* 116.3% */
        letter-spacing: var(--letter-spacing--2_16, -2.16px);
    }

    a {
        display: flex;
        padding: 10px 20px 10px 20px;
        justify-content: center;
        align-items: center;
        gap: var(--item-spacing-8, 8px);
        border-radius: 160px;
        background: #151515 !important;
        color: var(--hollow-org-uk-white, var(--color-white-solid, #FFF)) !important;
        font-family: Lato;
        font-size: 13.8px;
        font-style: normal;
        font-weight: var(--font-weight-500, 500);
        line-height: var(--line-height-15, 15px);
        letter-spacing: var(--letter-spacing-0_3, 0.3px);
        text-transform: uppercase;
        flex-direction: row-reverse;
    }

    a::before {
        content: "";
        background: url(./arrow-white.svg) no-repeat center;
        background-size: contain;
        display: inline-block;
        position: static;
        width: 24px;
        height: 24px;
    }

    a:hover {
        transform: none;
        -webkit-transform: none;
        -moz-transform: none;
        -ms-transform: none;
        -o-transform: none;
    }

    a:hover::before {
        transform: none;
        -webkit-transform: none;
        -moz-transform: none;
        -ms-transform: none;
        -o-transform: none;
    }
}



.footer-wrapper-2 {
    display: flex;
    width: 544px;
    flex-direction: column;
    align-items: flex-start;
    gap: 31px;

    .field--name-body {
        color: #000;
        -webkit-text-stroke-width: 0.2px;
        -webkit-text-stroke-color: #4A4949;
        font-family: Lato;
        font-size: 24.6px;
        font-style: normal;
        font-weight: 300;
        line-height: var(--line-height-32_27, 32.27px);
        /* 131.179% */
    }

    a {
        color: var(--www-isiglobal-com-cod-gray, var(--color-grey-8, #151515));
        font-family: Lato;
        font-size: 26.5px;
        font-style: normal;
        font-weight: 400;
        line-height: var(--line-height-36_32, 36.32px);
        letter-spacing: var(--letter-spacing--0_56, -0.559px);
        text-decoration-line: underline;
        text-decoration-style: solid;
        text-decoration-skip-ink: auto;
        text-decoration-thickness: auto;
        text-underline-offset: auto;
        text-underline-position: from-font;
        display: flex;
        align-items: center;

    }

    a::after {
        content: "";
        width: 34.59px;
        height: 40.59px;
        background: url(./footer-link.svg) no-repeat center;
        background-size: contain;
        display: inline-block;
        margin-left: 10px;
    }
}

footer,
.site-footer,
.site-footer * {
    background: #fff !important;
    color: #000 !important;
    /* width: 100%; */
}

.region-footer-sixth {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;

}

.site-footer .block {
    padding: 0 !important;
    margin: 0 !important;
}

.region-footer-second {
    position: relative;
}

.region-footer-second::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 100%;
    background: #D7D7DA;
    transform: translateX(-52px);
}

.region-footer-fourth {
    position: relative;
}

.region-footer-fourth::before {
    content: "";
    position: absolute;
    top: 0;
    right: 34px;
    width: 1px;
    height: 100%;
    background: transparent;

}

.region-footer-third>div,
.region-footer-fourth>div {
    opacity: 0;
}

.region-footer-second>div,
.region-footer-third>div,
.region-footer-fourth>div {
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    gap: 11px;

    h2 {
        color: #151515 !important;
        font-family: Lato;
        font-size: 15.3px;
        font-style: normal;
        font-weight: var(--font-weight-400, 400);
        line-height: var(--line-height-20_8, 20.8px);
        /* 135.948% */
        letter-spacing: var(--letter-spacing-0_64, 0.64px);
        text-transform: uppercase;
    }

    p,
    a {
        color: #7A7A85 !important;
        font-family: Lato;
        font-size: 15.3px;
        font-style: normal;
        font-weight: var(--font-weight-400, 400);
        line-height: var(--line-height-20_8, 20.8px);
        letter-spacing: var(--letter-spacing-0_64, 0.64px);
        text-transform: uppercase;
    }


}

.region-footer-second>div:hover,
.region-footer-third>div:hover,
.region-footer-fourth>div:hover {
    * {
        color: #000 !important;
    }
}


#block-bootstrap-barrio-subtheme-bottomfootermenu ul {
    justify-content: flex-end;

    a {
        color: #666 !important;
        font-family: Lato;
        font-size: 14.8px;
        font-style: normal;
        font-weight: var(--font-weight-300, 300);
        line-height: 19px;
        /* 128.378% */

    }
}

#block-bootstrap-barrio-subtheme-copywrite p {
    color: #666 !important;
    font-family: Lato;
    font-size: 14.8px;
    font-style: normal;
    font-weight: var(--font-weight-300, 300);
    line-height: 19px;
    /* 128.378% */
    text-align: center;
}

/* 
home
*/


.top-section-home-section {
    .node__content {
        display: grid;
        grid-template-columns: 1fr 1fr;
        justify-items: end;
        align-items: center;
        height: 100vh;
        overflow: hidden;
        position: relative;
        top: -108px;
        gap: 167px;

        .home-page-top-section {
            display: flex;
            flex-direction: column;
            gap: 53px;
            display: flex;
            width: 488px;
            flex-direction: column;
            gap: 53px;
            flex-shrink: 0;
            margin-bottom: 70px;
        }

        .field--name-field-main-title h2 {
            color: #231F20;
            font-family: Lato;
            font-size: 44.8px;
            font-style: normal;
            font-weight: 900;
            line-height: 54px;
            letter-spacing: var(--letter-spacing--1, -1px);

            span {
                color: var(--main-color);
            }
        }

        .field--name-body p {
            color: #464646;
            font-family: Lato;
            font-size: 16.4px;
            font-style: normal;
            font-weight: 400;
            line-height: 25px;
            /* 152.439% */
        }

        .field--name-field-media-image,
        .field--name-field-media-image * {
            width: 561px;
            height: 100%;
            object-fit: cover;
        }

        .field--name-field-link a {
            text-decoration: none;
            padding-left: 34px;
            transition: transform .35s ease;
            color: #7B2F6A;
            font-family: Lato;
            font-size: 17px;
            font-weight: 600;
            transition: all 0.3s ease;
            -webkit-transition: all 0.3s ease;
            -moz-transition: all 0.3s ease;
            -ms-transition: all 0.3s ease;
            -o-transition: all 0.3s ease;
        }

        .field--name-field-link a::before {
            width: 23.276px;
            height: 23.276px;
            background: url(./arrow.svg.svg) no-repeat center;
            background-size: contain;
            transition: all 0.3s ease;
            -webkit-transition: all 0.3s ease;
            -moz-transition: all 0.3s ease;
            -ms-transition: all 0.3s ease;
            -o-transition: all 0.3s ease;
        }

        .field--name-field-link a:hover {
            padding-left: 0;
        }

        .field--name-field-link a:hover::before {
            transform: translateX(137px);
            -webkit-transform: translateX(137px);
            -moz-transform: translateX(137px);
            -ms-transform: translateX(137px);
            -o-transform: translateX(137px);
        }

    }

    .block-content-basic {
        position: absolute;
        bottom: 40px;
        left: 144px;

        p {
            font-family: Lato;
            font-size: 16.6px;
            font-style: normal;
            font-weight: 500;
            line-height: 25.2px;
        }

        a {
            color: #7B2F6A;
            font-family: Lato;
            font-size: 16.6px;
            font-style: normal;
            font-weight: 500;
            line-height: 25.2px;
            /* 151.807% */
            text-decoration-line: underline;
            text-decoration-style: solid;
            text-decoration-skip-ink: auto;
            text-decoration-thickness: auto;
            text-underline-offset: auto;
            text-underline-position: from-font;
        }
    }

    .block-content-basic::before {
        content: "";
        width: 50px;
        height: 50px;
        position: absolute;
        left: -107px;
        top: 50%;
        transform: translateY(-50%);
        background: url(./Down.gif) no-repeat center;
        background-size: contain;
    }
}


.home-page-our-story-section {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #fff;

    .node__content {
        height: 80vh;
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        padding-top: 56px;
        padding-inline: 78px 40px;
    }

    .field--name-title h2 {
        color: var(--www-isiglobal-com-cod-gray, var(--color-grey-8, #151515));
        font-family: Lato;
        font-size: 37.3px;
        font-style: normal;
        font-weight: 700;
        line-height: 52px;
    }

    .body-link-our-story-wrapper {
        width: 525px;
        flex-shrink: 0;
        display: flex;
        flex-direction: column;
        gap: 35px;

        .field--name-body P {
            /* color: #DBD5D2; */
            font-family: Lato;
            font-size: 23.5px;
            font-style: normal;
            font-weight: 400;
            line-height: 41px;
        }
    }
}

/* OUR STORY: ONLY black fill overlay, base stays grey */
.home-page-our-story-section .field--name-body p {
    --base: #DBD5D2;
    /* الرمادي */
    --fill: #111;
    /* الأسود (اللي بعبي) */
    color: var(--base);
    /* fallback فقط */
}

/* "At Z2M," دائماً أسود */
.home-page-our-story-section .field--name-body p .z2m-lead {
    color: #111 !important;
    font-weight: 700;
}

@supports (-webkit-background-clip:text) or (background-clip:text) {
    .home-page-our-story-section .field--name-body p {
        color: transparent;
        -webkit-background-clip: text;
        background-clip: text;

        /* Layer 1 (black) grows, Layer 2 (grey) always full */
        background-image:
            linear-gradient(90deg, var(--fill) 0 0),
            linear-gradient(90deg, var(--base) 0 0);
        background-repeat: no-repeat, no-repeat;
        background-position: 0 0, 0 0;

        /* الحالة الافتراضية: الأسود 0%، الرمادي 100% */
        background-size: 0% 100%, 100% 100%;
    }

    /* reset back to grey (no animation) */
    .home-page-our-story-section.fill-reset .field--name-body p {
        background-size: 0% 100%, 100% 100%;
    }

    /* animate fill ONLY */
    .home-page-our-story-section.fill-animate .field--name-body p {
        animation: z2mFill .7s ease forwards;
        -webkit-animation: z2mFill .7s ease forwards;
    }

    @keyframes z2mFill {
        from {
            background-size: 0% 100%, 100% 100%;
        }

        to {
            background-size: 100% 100%, 100% 100%;
        }
    }

    /* keep lead phrase solid black */
    .home-page-our-story-section .field--name-body p .z2m-lead {
        background: none !important;
        -webkit-background-clip: initial;
        background-clip: initial;
        color: #111 !important;
    }
}

.why-choose-z2m-home-section {
    position: relative;
    /* مش sticky */
    z-index: 5;
    /* أعلى من Our Story عشان يغطيه */

    /* حسب تصميمك */
    .views-row {
        display: flex;
        grid-template-columns: 1fr 1fr;
        justify-items: center;
        align-items: flex-start;
        justify-content: center;
        gap: 210px;
        padding-block: 105px;
        background: #000;
        transition: all 0.5s ease;
        -webkit-transition: all 0.5s ease;
        -moz-transition: all 0.5s ease;
        -ms-transition: all 0.5s ease;
        -o-transition: all 0.5s ease;
    }

    .views-row:nth-child(odd) {
        flex-direction: row-reverse;
    }

    .views-row:hover {
        background: #fff;

    }

    .views-row:hover * {
        color: #000 !important;
    }

    .views-row:hover .views-field-nothing {
        filter: invert(0) brightness(16.5);
    }

    .views-row:hover .views-field-nothing a::before {
        background: url(./invert-arrow.svg) no-repeat center;
        background-size: contain;
    }

    .title-body-link-why-choose-home-wrapper {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 35px;
        align-self: stretch;
        width: 367px;
        padding-top: 64px;

        .views-field-title {
            width: 100%;

            a {
                color: #FFF;
                font-family: Lato;
                font-size: 35.293px;
                font-style: normal;
                font-weight: 900;
                line-height: 45.025px;
                /* 127.575% */
                pointer-events: none;
            }
        }

        .views-field-body p {
            color: #FFF;
            font-family: Lato;
            font-size: 16.063px;
            font-style: normal;
            font-weight: var(--font-weight-400, 400);
            line-height: 25.326px;
        }

        .views-field-nothing {
            filter: invert(1) brightness(4.5);
        }
    }
}

.region-footer-first img {
    width: 129px;
    height: 42.456px;
}

.slider-image-home-section {
    position: relative;
    z-index: 9;

    .node__content {
        height: 100vh;
    }

    .field--name-field-media-image,
    .field--name-field-media-image * {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .slider-image-title-body-wrapper {
        position: absolute;
        bottom: 41px;
        left: 54px;
        width: 604px;

        .field--name-title h2 {
            color: #FFF;
            font-family: Lato;
            font-size: 46.771px;
            font-style: normal;
            font-weight: 900;
            line-height: 65.203px;
            width: 605px;
        }

        .field--name-body p {
            color: #FFF;
            font-family: Lato;
            font-size: 22.59px;
            font-style: normal;
            font-weight: 400;
            line-height: 31.9px;
        }
    }
}

/* Slider image: reveal tiles overlay (add-on only) */
.slider-image-home-section .z2m-reveal-wrap {
    position: relative;
    overflow: hidden;
    /* عشان البلاطات تختفي صح */
}

.slider-image-home-section .z2m-overlay-grid {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    z-index: 5;
    pointer-events: none;
    /* ما يمنع الكليك/الهوفر على السكشن */
}

.slider-image-home-section .z2m-tile {
    background: #fff;
    transform-origin: bottom;
    transform: scaleY(1);
    will-change: transform;
}


.expectional-power-home-section .views-row {
    position: relative;
    z-index: 999;
    min-height: 80vh;
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding-inline: 230px;

    .views-field-field-media-image {
        margin-bottom: 59px;
    }

    .views-field-field-main-title {
        color: #151515;
        text-align: center;
        font-family: Lato;
        font-size: 35.167px;
        font-style: normal;
        font-weight: 700;
        line-height: 49px;
        text-transform: uppercase;
        padding-bottom: 26px;

        span {
            color: #7B2F6A;
            font-family: Lato;
            font-size: 35.167px;
            font-style: normal;
            font-weight: 900;
            line-height: 49px;
            text-decoration-line: underline;
            text-decoration-style: solid;
            text-decoration-skip-ink: auto;
            text-decoration-thickness: auto;
            text-underline-offset: auto;
            text-underline-position: from-font;
            text-transform: uppercase;
        }
    }

    .views-field-body p {
        color: #5C5C5C;
        text-align: center;
        font-family: Lato;
        font-size: 17.977px;
        font-style: normal;
        font-weight: 400;
        line-height: 32.8px;
        padding-inline: 33px;
        padding-bottom: 15px;

    }
}

/* ==========================================================
   HOW IT WORKS — STATIC STEPS (NO ANIMATION)
   ========================================================== */

/* SECTION */
.how-it-works-section {
    background: #231F20;
    position: relative;
    z-index: 9;
    height: auto !important;
    min-height: 100vh;
}

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

.how-it-works-section .view-header {
    position: sticky;
    top: 0;
    z-index: 999;
    background: #231f20;
}

.how-it-works-section .how-it-works-wrapper {
    display: flex;
    justify-content: space-between;
    padding-inline: 80px;
    padding-top: 107px;
}

.how-it-works-section .how-it-works-wrapper h2 {
    color: #FFF;
    font-family: Lato;
    font-size: 37.7px;
    font-weight: 700;
    line-height: 59px;
    letter-spacing: 1.66px;
    text-transform: uppercase;
    margin: 0;
}

.how-it-works-section .how-it-works-wrapper>div {
    width: 521px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.how-it-works-section .how-it-works-wrapper p {
    color: #FFF;
    font-size: 16.7px;
    line-height: 26px;
    margin: 0;
}

.how-it-works-section .how-it-works-wrapper a {
    color: #fff;
    text-decoration: none;
    font-size: 15.5px;
    position: relative;
    padding-left: 49px;
}

.how-it-works-section .how-it-works-wrapper a::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 38px;
    height: 38px;
    background: url("./invert-arrow.svg") no-repeat center;
    background-size: contain;
    filter: brightness(2.5) invert(1);
}

/* ================= CARDS (STATIC STEPS) ================= */

.how-it-works-section .view-content {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    padding-inline: 61px;
    padding-top: 98px;
}

/* Base card */
.how-it-works-section .views-row {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding-inline-start: 15px;
    border-inline-start: 1px solid rgba(255, 255, 255, .30);
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    height: 250px;
    position: sticky;
    top: 300px;
    background: #231f20;

}

/* STEPS OFFSET (Diagonal) */
.how-it-works-section .views-row:nth-child(1) {
    margin-top: 200px;
    z-index: 1;

}

.how-it-works-section .views-row:nth-child(2) {
    margin-top: 500px;
    z-index: 2;

}

.how-it-works-section .views-row:nth-child(3) {
    margin-top: 700px;
    z-index: 3;

}

.how-it-works-section .views-row:nth-child(4) {
    margin-top: 1100px;
    z-index: 4;


}

.how-it-works-section .views-row:nth-child(5) {
    margin-top: 1400px;
    z-index: 5;



}

/* Typography */
.how-it-works-section .views-field-title {
    color: #FFF;
    font-size: 22.5px;
    line-height: 33px;
}

.how-it-works-section .views-field-body {
    color: #FFF;
    font-size: 14.9px;
    line-height: 24.3px;
}

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

@media (max-width: 1200px) {
    .how-it-works-section .how-it-works-wrapper {
        padding-inline: 40px;
    }

    .how-it-works-section .view-content {
        grid-template-columns: repeat(2, 1fr);
        gap: 26px;
        padding-inline: 40px;
    }

    .how-it-works-section .views-row {
        margin-top: 0 !important;
        /* no steps on tablet */
    }
}

@media (max-width: 640px) {
    .how-it-works-section .how-it-works-wrapper {
        flex-direction: column;
        gap: 18px;
        padding-top: 70px;
    }

    .how-it-works-section .view-content {
        grid-template-columns: 1fr;
        padding-top: 36px;
    }

    .how-it-works-section .views-row {
        margin-top: 0 !important;
    }
}

/* ================= القسم التالي ================= */

/* ================= القسم التالي ================= */




.our-venture-home-section {
    position: relative;
    /* height: 100vh; */
    padding-bottom: 80px;
    z-index: 999999;
    border-bottom: 1px solid #D7D7DA;
    background: #F8F3EF;
    transition: transform 0.3s ease-out;
    will-change: transform;

    .image-wrapper {
        position: relative;

        .views-field-field-logo-image {
            position: absolute;
            top: 50%;
            width: 100%;
            height: 100%;
            left: 50%;
            transform: translate(-50%, -50%);
            display: flex;
            justify-content: center;
            background: #00000050;
            align-items: center;

            img {
                filter: brightness(888);
                -webkit-filter: brightness(888);
                max-width: 173px;
            }
        }
    }

    .our-ventureheader-wrapper {
        display: flex;
        padding-inline: 35px;
        padding-block: 140px 90px;
        justify-content: space-between;

        h2 {
            color: var(--www-freshpet-com-dune, var(--color-grey-19, #35312E));
            font-family: Lato;
            font-size: var(--font-size-40, 40px);
            font-style: normal;
            font-weight: 700;
            line-height: var(--font-size-48, 48px);
            letter-spacing: var(--letter-spacing--0_4, -0.4px);
            text-transform: uppercase;
        }

        p {
            width: 648px;
            color: var(--www-freshpet-com-dune, var(--color-grey-19, #35312E));
            font-family: Lato;
            font-size: 18px;
            font-style: normal;
            font-weight: 500;
            line-height: 27px;
        }
    }

    .view-content {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
        gap: 15px;
        padding-inline: 35px;

        .views-row {
            display: flex;
            height: 513px;
            flex-direction: column;
            flex: 1 0 0;
            justify-content: flex-start;
            border-radius: 20px !important;
            overflow: hidden;
            width: 100%;
            border-radius: 30px;
            background: var(--color-white-solid, #FFF);
        }

        .views-field-field-media-image,
        .views-field-field-media-image * {
            width: 100%;
            height: 296.068px;
            object-fit: cover;
        }

        .views-field.views-field-title {
            height: 56px;
            color: var(--color-grey-19, #35312E);
            font-family: Lato;
            font-size: var(--line-height-24, 24px);
            font-style: normal;
            font-weight: var(--font-weight-400, 400);
            line-height: var(--line-height-28_8, 28.8px);
            /* 120% */
        }

        .views-field-field-breif {
            color: var(--www-freshpet-com-dune, var(--color-grey-19, #35312E));
            font-family: Lato;
            font-size: var(--font-size-16, 16px);
            font-style: normal;
            font-weight: 500;
            line-height: 22px;
            height: 56px;
        }

        .our-venture-title-breif-link-wrapper {
            display: flex;
            padding: 24px 10px 0 26px;
            flex-direction: column;
            align-items: flex-start;
            gap: var(--item-spacing-12, 12px);
            flex: 1 0 0;
            align-self: stretch;
            background: #fff;
            height: 210px;
        }
    }
}


/* ==========================================================
   WORDS FROM FRIENDS — 3 COL GRID (no big vertical gaps)
   Uses GRID rows masonry trick (dense) + spans by JS
   ========================================================== */

.view-friends-word {
    background: #231F20;
    padding: 70px 0 98px;
}

.view-friends-word .view-header {
    padding: 0 80px 34px;
}

.view-friends-word .view-header h2 {
    color: #FFF;
    font-family: Lato;
    font-size: 69.642px;
    font-style: normal;
    font-weight: 700;
    line-height: 69.655px;
    letter-spacing: -1.266px;
    text-transform: uppercase;
}

.view-friends-word .view-header p {
    color: #FFF;
    font-family: Lato;
    font-size: 29.123px;
    font-style: normal;
    font-weight: 400;
    line-height: 69.655px;
    letter-spacing: -1.266px;
}

/* ===== GRID 3 columns ===== */
.view-friends-word .view-content.row {
    margin: 0;
    padding: 0 60px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    /* gap: 8px; */
    column-gap: 26px;
    row-gap: 15px;
    align-items: flex-start;
    grid-auto-rows: 0.%;
}

/* kill bootstrap row gutters if any */
.view-friends-word .view-content.row::before,
.view-friends-word .view-content.row::after {
    display: none;
}

.view-friends-word .view-content.row>.views-row {
    margin: 0;
    width: auto;
}

/* ===== Card ===== */
.view-friends-word .views-row article {
    background: #fff;
    border-radius: 22px;
    padding: 28px 28px 22px;
    box-shadow: 0 18px 45px rgba(0, 0, 0, .22);
}

/* quote */
.view-friends-word .field--name-body {
    position: relative;
}

.view-friends-word .field--name-body p {
    color: var(--hollow-org-uk-black, var(--color-black-solid, #000));
    font-family: Lato;
    font-size: 18.412px;
    font-style: normal;
    font-weight: 400;
    line-height: 25.777px;
    /* 140% */
    padding: 12px 20px;
}

.view-friends-word .field--name-body p::before {
    content: "“";
    position: absolute;
    font-family: auto;
    left: -13px;
    top: 0;
    font-size: 44px;
    line-height: 1;
    font-weight: 700;
    color: #111;
}

/* author row */
.view-friends-word .title-position-image-wrapper {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 26px;
}

.view-friends-word .title-position-image-wrapper img {
    width: 45px !important;
    height: 45px !important;
    border-radius: 999px;
    object-fit: cover;
    display: block;
}

.view-friends-word .title-position-wrapper h2 {
    margin: 0;
    color: #111;
    font-family: Lato, sans-serif;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
    text-transform: none;
}

.view-friends-word .title-position-wrapper .field--name-field-position {
    margin-top: 4px;
    color: rgba(0, 0, 0, .55);
    font-family: Lato, sans-serif;
    font-size: 14px;
}

/* footer */
.view-friends-word .view-footer {
    padding: 74px 80px 0;
    text-align: center;
}

.view-friends-word .view-footer p {
    color: #FFF;
    text-align: center;
    font-family: Lato;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 30px;
    display: flex;
    justify-content: center;
    gap: 16px;
}

.view-friends-word .view-footer a {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 3px;
    color: #EAD4E5;
    font-family: Lato;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 30px;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: auto;
    text-decoration-thickness: auto;
    text-underline-offset: 25%;
    text-underline-position: from-font;
}

/* responsive */
@media (max-width: 1200px) {
    .view-friends-word .view-header {
        padding: 0 40px 26px;
    }

    .view-friends-word .view-content.row {
        padding: 0 40px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 22px;
    }

    .view-friends-word .view-footer {
        padding: 22px 40px 0;
    }

    .view-friends-word .field--name-body p {
        font-size: 18px;
    }
}

@media (max-width: 700px) {
    .view-friends-word .view-header {
        padding: 0 18px 18px;
    }

    .view-friends-word .view-header h2 {
        font-size: 30px;
    }

    .view-friends-word .view-content.row {
        padding: 0 18px;
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .view-friends-word .views-row article {
        border-radius: 18px;
        padding: 22px 20px 18px;
    }

    .view-friends-word .field--name-body p {
        font-size: 16px;
        padding-left: 34px;
    }

    .view-friends-word .field--name-body p::before {
        font-size: 40px;
        top: -8px;
    }
}



.voice-of-growth-top-section {
    background: #fff;
    padding: 120px 0 75px;
    height: 89.3vh;
}

/* remove bootstrap gutters effect if exists */
.voice-of-growth-top-section .view-content.row {
    margin: 0;
}

/* main article container */
.voice-of-growth-top-section article.node--type-top-section {
    max-width: 1220px;
    margin: 0 auto;
    padding: 0 43px;
}

/* big heading paragraph */
.voice-of-growth-top-section .field--name-field-main-title p {
    margin: 0;
    color: #1b1b1b;
    font-family: Lato, sans-serif;
    font-weight: 800;
    font-size: 66px;
    line-height: 1.12;
    letter-spacing: -0.5px;
    max-width: 779px;
}

/* body block: purple lead + gray paragraph */
.voice-of-growth-top-section .field--name-body {
    margin-top: 44px;
    max-width: 539px;
}

/* purple lead line (the <span> inside body) */
.voice-of-growth-top-section .field--name-body p>span {
    display: block;
    color: #7B2F6A;
    font-family: Lato;
    font-size: 16.4px;
    font-style: normal;
    font-weight: 700;
    line-height: 25px;
    margin-bottom: 20px;
}

/* rest of paragraph */
.voice-of-growth-top-section .field--name-body p {
    margin: 0;
    color: #464646;
    font-family: Lato;
    font-size: 16.4px;
    font-style: normal;
    font-weight: 400;
    line-height: 25px;
}

/* ===== Scroll down block under it (same id you have) ===== */
.voice-of-growth-top-section .block-content-basic {
    max-width: fit-content;
    margin: 0 auto;
}

/* Center the "Scroll down – From Vision to Venture" like screenshot */
.voice-of-growth-top-section .block-content-basic .field--name-body p {
    color: var(--webintensive-com-ebony-clay, var(--color-azure-21, #273145));
    font-family: Lato;
    font-size: 16.6px;
    font-style: normal;
    font-weight: var(--font-weight-500, 500);
    line-height: 25.2px;
}

/* style the link in purple */
.voice-of-growth-top-section .block-content-basic a {
    color: #7B2F6A;
    font-family: Lato;
    font-size: 16.6px;
    font-style: normal;
    font-weight: var(--font-weight-500, 500);
    line-height: 25.2px;
    /* 151.807% */
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: auto;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;
}

/* add the arrow above the scroll text (pseudo element) */
.voice-of-growth-top-section .block-content-basic .field--name-body p::before {
    content: "";
    display: block;
    margin: 0 auto 14px;
    background: url("./Down.gif") no-repeat center;
    background-size: contain;
    width: 50px;
    height: 50px;
}

/* If you don't have Down.gif, use CSS arrow fallback */
@supports not (background: url("x") no-repeat center) {
    .voice-of-growth-top-section .block-content-basic .field--name-body p::before {
        content: "↓";
        width: auto;
        height: auto;
        background: none;
        font-size: 34px;
        line-height: 1;
        color: #000;

    }
}

/* ===== Responsive ===== */
@media (max-width: 1200px) {
    .voice-of-growth-top-section article.node--type-top-section {
        padding: 0 40px;
    }

    .voice-of-growth-top-section .block-content-basic {
        padding: 28px 40px 0;
    }

    .voice-of-growth-top-section .field--name-field-main-title p {
        font-size: 54px;
        max-width: 720px;
    }
}

@media (max-width: 1000px) {
    .site-loader.is-done {
        transform: translateX(270%) !important;
        -webkit-transform: translateX(270%) !important;
        -moz-transform: translateX(270%) !important;
        -ms-transform: translateX(270%) !important;
        -o-transform: translateX(270%) !important;
    }

    .front-page-left-section .views-field-nothing a {
        transform: translateX(0) !important;
        -webkit-transform: translateX(0) !important;
        -moz-transform: translateX(0) !important;
        -ms-transform: translateX(0) !important;
        -o-transform: translateX(0) !important;
    }

    .rigth-side-front-page-wrapper {
        width: auto !important;
    }

    .page-node-81 .contact-us-section .col-12 {
        padding-inline: 16px 84px !important;
        grid-template-columns: 1fr !important;
    }
}

.page-node-1 .breadcrumb li {
    display: none;

}

@media (max-width: 700px) {
    .front-page-left-section .views-field-nothing a {
        bottom: -155px;
    }

    .voice-of-growth-top-section {
        padding: 56px 0 44px;
    }

    .voice-of-growth-top-section article.node--type-top-section {
        padding: 0 72px 0 32px;
    }

    .voice-of-growth-top-section .block-content-basic {
        padding: 22px 18px 0;
    }

    .voice-of-growth-top-section .field--name-field-main-title p {
        font-size: 34px;
        max-width: 100%;
    }

    .voice-of-growth-top-section .field--name-body {
        margin-top: 26px;
    }

    .voice-of-growth-top-section .field--name-body p,
    .voice-of-growth-top-section .field--name-body p>span {
        font-size: 16px;
    }
}

/* ==========================================================
   THE JOURNEY — TOP SECTION
   Same system as Voice of Growth
   ========================================================== */

.the-journy-top-section {
    background: #ffffff;
    padding: 120px 0 0;
    min-height: calc(100vh - 92px);
}

/* remove bootstrap gutters */
.the-journy-top-section .view-content.row {
    margin: 0;
}

/* main article container */
.the-journy-top-section article.node--type-top-section {
    /* max-width: 1138px; */
    margin: 0 auto;
    padding: 0 230px 0 143px;
}

/* ===== Main title ===== */
.the-journy-top-section .field--name-field-main-title p {
    margin: 0;
    letter-spacing: -0.5px;
    max-width: 586.916px;
    color: #231F20;
    font-family: Lato;
    font-size: 55.59px;
    font-style: normal;
    font-weight: 900;
    line-height: 67.005px;
}

/* highlighted word (vision) */
.the-journy-top-section .field--name-field-main-title span {
    background: #000;
    color: #fff;
    padding: 0 8px 2px;
    display: inline-block;
}

/* ===== Body block ===== */
.the-journy-top-section .field--name-body {
    margin-top: 94px;
    max-width: 540px;
    margin-inline-start: auto;
}

/* purple lead sentence */
.the-journy-top-section .field--name-body p span {
    display: block;
    color: #7B2F6A;
    font-family: Lato, sans-serif;
    font-size: 16.4px;
    font-weight: 700;
    line-height: 25px;
}

/* normal paragraph text */
.the-journy-top-section .field--name-body p {
    margin: 0;
    color: #464646;
    font-family: Lato, sans-serif;
    font-size: 16.4px;
    font-weight: 400;
    line-height: 25px;
}

/* ===== Scroll down block ===== */
.the-journy-top-section .block-content-basic {
    /* margin-top: 90px; */
    display: flex;
    justify-content: center;
}

.the-journy-top-section .block-content-basic .field--name-body p {
    color: #273145;
    font-family: Lato, sans-serif;
    font-size: 16.6px;
    font-weight: 500;
    line-height: 25.2px;
    text-align: center;
}

/* purple link */
.the-journy-top-section .block-content-basic a {
    color: #7B2F6A;
    font-family: Lato, sans-serif;
    font-size: 16.6px;
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* arrow above text */
.the-journy-top-section .block-content-basic .field--name-body p::before {
    content: "";
    display: block;
    margin: 0 auto 16px;
    width: 44px;
    height: 44px;
    background: url("./Down.gif") no-repeat center;
    background-size: contain;
}

/* fallback arrow */
@supports not (background: url("x")) {
    .the-journy-top-section .block-content-basic .field--name-body p::before {
        content: "↓";
        font-size: 34px;
        color: #000;
        background: none;
    }
}

#block-bootstrap-barrio-subtheme-languageblock {
    opacity: 0;
}

/* ===== Responsive ===== */
@media (max-width: 1200px) {
    .the-journy-top-section article.node--type-top-section {
        padding: 0 40px;
    }

    .the-journy-top-section .field--name-field-main-title p {
        font-size: 54px;
    }
}

@media (max-width: 700px) {
    .the-journy-top-section {
        padding: 70px 0 50px;
    }

    .the-journy-top-section article.node--type-top-section {
        padding: 0 18px;
    }

    .the-journy-top-section .field--name-field-main-title p {
        font-size: 30px;
        max-width: 80%;
    }

    .the-journy-top-section .field--name-body {
        margin-top: 26px;
        padding-inline-end: 73px;
        margin-inline-start: 0;
    }

    .the-journy-top-section .field--name-body p,
    .the-journy-top-section .field--name-body p span {
        font-size: 16px;
    }
}


/* ==========================================================
   JOURNEY CONCEPT SECTION (match screenshot)
   Target: .journey-consept-section
   No HTML edits required
   ========================================================== */

.journey-consept-section {
    background: #231F20;
    padding: 95px 0 70px;
}

/* limit width + side padding like design */
.journey-consept-section .view {
    /* max-width: 1220px; */
    /* margin: 0 auto; */
    padding: 1px 125px;
}

/* ===== Big heading ===== */
.journey-consept-section .view-header h2 {
    margin: 0 0 134px;
    color: #FFF;
    font-family: Lato;
    font-size: 55px;
    font-style: normal;
    font-weight: 700;
    line-height: 55.01px;
    letter-spacing: -1px;
    max-width: 830px;
}

/* ===== list area ===== */
.journey-consept-section .view-content.row {
    margin: 0;
}

.journey-consept-section .views-row {
    margin: 0;
}

/* each paragraph row */
.journey-consept-section .paragraph--type--journey-consept {
    position: relative;
    display: grid;
    grid-template-columns: -0.5fr 0fr 0.5fr;
    align-items: center;
    column-gap: 26px;
    padding: 32px 0;
    border-top: 1px solid rgba(255, 255, 255, .08);
    justify-items: center;
    justify-content: space-between;
    padding-inline-start: 28px;
}

/* remove first top border look (like screenshot spacing) */
.journey-consept-section .paragraph--type--journey-consept:first-child {
    border-top-color: rgba(255, 255, 255, .08);
}

/* ===== left number (01..05) created by CSS ===== */
.journey-consept-section .paragraph--type--journey-consept::before {
    content: attr(data-idx);
    color: rgba(255, 255, 255, .70);
    font-family: Lato, sans-serif;
    font-size: 12px;
    letter-spacing: 1px;
    justify-self: start;
    color: #FFF;
    font-family: Lato;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 30px;
}

/* title + icon wrapper */
.journey-consept-section .title-icon-consept-wrapper {
    display: flex;
    align-items: center;
    gap: 14px;
    /* grid-column: 2; */
    flex-direction: row-reverse;
    justify-content: flex-end;
    width: 367px;
}

/* title */
.journey-consept-section .field--name-field-title {
    color: #FFF;
    -webkit-text-stroke-width: 0.3px;
    -webkit-text-stroke-color: #FFF;
    font-family: Lato;
    font-size: 30px;
    font-style: normal;
    font-weight: 400;
    line-height: 44.8px;
    /* 149.333% */
}

/* icon */
.journey-consept-section .title-icon-consept-wrapper img {
    width: 25px !important;
    height: 25px !important;
    object-fit: contain;
    display: block;

}

/* description */
.journey-consept-section .field--name-field-body {
    grid-column: 3;
    max-width: 476px;
}

.journey-consept-section .field--name-field-body p {
    margin: 0;
    color: #C9C9C9;
    font-family: Lato;
    font-size: 17px;
    font-style: normal;
    font-weight: 400;
    line-height: 30px;
}

/* ===== footer ===== */
.journey-consept-section .view-footer {
    margin-top: 140px;
    display: flex;
    justify-content: center;
}

.journey-consept-section .view-footer p {
    margin: 0;
    color: #FFF;
    text-align: center;
    font-family: Lato;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 30px;
    /* margin-top: 100px; */
    display: flex;
    gap: 14px;
    align-items: center;
}

.journey-consept-section .view-footer a {
    color: #EAD4E5;
    font-family: Lato;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 30px;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: auto;
    text-decoration-thickness: auto;
    text-underline-offset: 25%;
    text-underline-position: from-font;
    /* margin-top: 100px; */
}

/* ===== Responsive ===== */
@media (max-width: 1200px) {
    .journey-consept-section .view {
        padding: 0 40px;
    }

    .journey-consept-section .view-header h2 {
        font-size: 36px;
        max-width: 560px;
    }

    .journey-consept-section .paragraph--type--journey-consept {
        grid-template-columns: 62px 300px 1fr;
    }
}

@media (max-width: 900px) {
    .journey-consept-section .paragraph--type--journey-consept {
        grid-template-columns: 52px 1fr;
        row-gap: 10px;
        align-items: start;
    }

    .journey-consept-section .title-icon-consept-wrapper {
        grid-column: 2;
    }

    .journey-consept-section .field--name-field-body {
        grid-column: 2;
        max-width: 100%;
    }
}

@media (max-width: 600px) {
    .journey-consept-section {
        padding: 70px 0 55px;
    }

    .journey-consept-section .view {
        padding: 0 18px;
    }

    .journey-consept-section .view-header h2 {
        font-size: 23px;
        line-height: 1.5;
        margin-bottom: 34px;
        width: auto;
    }
}


/* ==========================================================
   TOP SECTION — OUR STORY (match screenshot)
   Target: .top-section-our-story-section
   No HTML changes required
   ========================================================== */

.top-section-our-story-section {
    background: #ffffff;
    padding: 120px 0 0;
    min-height: calc(100vh - 108px);
}

/* remove bootstrap gutters */
.top-section-our-story-section .view-content.row {
    margin: 0;
}

/* main container like design */
.top-section-our-story-section article.node--type-top-section {
    /* max-width: 1220px; */
    margin: 0 auto;
    padding: 0px 130px 0 150px;
    position: relative;
}

/* ===== LEFT heading ===== */
.top-section-our-story-section .field--name-field-main-title {
    max-width: 720px;
}

.top-section-our-story-section .field--name-field-main-title p {
    width: 473px;
    margin: 0;
    color: #231F20;
    font-family: Lato;
    font-size: 44.8px;
    font-style: normal;
    font-weight: 900;
    line-height: 54px;
    letter-spacing: var(--letter-spacing--1, -1px);
}

/* purple part */
.top-section-our-story-section .field--name-field-main-title p>span {
    display: block;
    color: #7B2F6A;
    font-family: Lato;
    font-size: 44.8px;
    font-style: normal;
    font-weight: 900;
    line-height: 54px;
    letter-spacing: var(--letter-spacing--1, -1px);
}

/* ===== RIGHT paragraph (pushed to right like screenshot) ===== */
.top-section-our-story-section .field--name-body {
    margin-top: 0;
    max-width: 520px;
    margin-left: auto;
    /* push to the right */
    margin-right: 0;
    padding-top: 35px;
    /* align with heading block visually */
}

.top-section-our-story-section .field--name-body p {
    margin: 0;
    color: #464646;
    font-family: Lato, sans-serif;
    font-size: 16.4px;
    font-weight: 400;
    line-height: 25px;
    /* color: #464646; */
    font-family: Lato;
    /* font-size: 16.4px; */
    font-style: normal;
    font-weight: 400;
    line-height: 25px;
    width: 423px;
}

/* ===== Scroll down block under it (same block id you have) ===== */
.top-section-our-story-section .block-content-basic {
    margin-top: 90px;
    display: flex;
    justify-content: center;
}

.top-section-our-story-section .block-content-basic .field--name-body p {
    color: #273145;
    font-family: Lato, sans-serif;
    font-size: 16.6px;
    font-weight: 500;
    line-height: 25.2px;
    text-align: center;
}

/* purple link */
.top-section-our-story-section .block-content-basic a {
    color: #7B2F6A;
    font-family: Lato, sans-serif;
    font-size: 16.6px;
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* arrow above scroll text */
.top-section-our-story-section .block-content-basic .field--name-body p::before {
    content: "";
    display: block;
    margin: 0 auto 16px;
    width: 44px;
    height: 44px;
    background: url("./Down.gif") no-repeat center;
    background-size: contain;
}

/* fallback arrow */
@supports not (background: url("x")) {
    .top-section-our-story-section .block-content-basic .field--name-body p::before {
        content: "↓";
        font-size: 34px;
        color: #000;
        background: none;
        width: auto;
        height: auto;
    }
}

/* ===== Responsive ===== */
@media (max-width: 1200px) {
    .top-section-our-story-section article.node--type-top-section {
        padding: 0 40px;
    }

    .top-section-our-story-section .field--name-field-main-title p {
        font-size: 54px;
    }

    .top-section-our-story-section .field--name-body {
        padding-top: 22px;
    }
}

@media (max-width: 900px) {
    .top-section-our-story-section .field--name-body {
        margin-left: 0;
        /* stack under heading on small screens */
        max-width: 100%;
        padding-top: 26px;
    }
}

@media (max-width: 700px) {
    .top-section-our-story-section {
        padding: 70px 0 50px;
    }

    .top-section-our-story-section article.node--type-top-section {
        padding: 0 18px;
    }

    .top-section-our-story-section .field--name-field-main-title p {
        font-size: 34px;
        max-width: 100%;
    }

    .top-section-our-story-section .field--name-body p {
        font-size: 16px;
    }
}

.our-story-why-choose-section .node__content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 100vh;
    align-items: start;
    background: #FAFAFA;
}

.title-body-why-choose-wrapper {
    height: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    padding: 196px 167px;
    gap: 35px;

    h2 {
        color: #222;
        font-family: Lato;
        font-size: 35.293px;
        font-style: normal;
        font-weight: 900;
        line-height: 45.025px;

    }

    .field--name-body {
        color: #222;
        font-family: Lato;
        font-size: 16.063px;
        font-style: normal;
        font-weight: var(--font-weight-400, 400);
        line-height: 25.326px;
        display: flex;
        flex-direction: column;
        gap: 20px;
    }
}

.block-views-blockwhy-choose-z2m-block-1 {

    .field--name-field-media-image,
    .field--name-field-media-image * {
        width: 100%;
        height: 95%;
        object-fit: cover;
        overflow: hidden;
        transition: all 0.7s ease;
        -webkit-transition: all 0.7s ease;
        -moz-transition: all 0.7s ease;
        -ms-transition: all 0.7s ease;
        -o-transition: all 0.7s ease;
    }
}

.block-views-blockwhy-choose-z2m-block-1:hover .field--name-field-media-image,
.block-views-blockwhy-choose-z2m-block-1:hover .field--name-field-media-image * {
    height: 100%;
}


/* ==========================================================
   OUR PRACTICE (match screenshot)
   Wrapper: .view-our-practice (block_1)
   ========================================================== */

.view-our-practice {
    background: #fff;
    padding: 110px 0 90px;
}

/* remove bootstrap row gutters */
.view-our-practice .view-content.row {
    margin: 0;
}

/* center content width like design */
.view-our-practice .view-content.row>.views-row {
    min-height: 100vh;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 80px;
}

/* small label "— Our Practice" (we add via ::before without HTML changes) */
.view-our-practice .views-field-field-main-title {
    position: relative;
    margin-top: 22px;
}

.view-our-practice .views-field-field-main-title::before {
    content: "—  Our Practice";
    display: block;
    color: #646464;
    font-family: Lato;
    font-size: 17.032px;
    font-style: normal;
    font-weight: 400;
    line-height: 37.087px;
    /* 217.742% */
}

/* BIG heading paragraph */
.view-our-practice .views-field-field-main-title p {
    margin: 0;
    text-transform: uppercase;
    color: #151515;
    font-family: Lato;
    font-size: 29.17px;
    font-style: normal;
    font-weight: 700;
    line-height: 49px;
    text-transform: uppercase;
}

/* black highlight blocks for the spans */
.view-our-practice .views-field-field-main-title p span {
    display: inline;
    background: #1b1b1b;
    color: #fff;
    padding: 6px 10px;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

/* body paragraph */
.view-our-practice .views-field-body {
    margin-top: 22px;
    max-width: 980px;
}

.view-our-practice .views-field-body p {
    margin: 0;
    color: #6a6a6a;
    font-family: Lato, sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.9;
}

/* image */
.view-our-practice .views-field-field-media-image {
    margin-top: 46px;
}

/* ===============================
   OUR PRACTICE IMAGE FIXED HOVER
   =============================== */

/* wrapper */
.view-our-practice .views-field-field-media-image {
    width: 100%;
    height: 325px;
    display: flex;
    overflow: hidden;
    transition: height 0.7s ease;
    align-items: center;
}

/* الصورة */
.view-our-practice .views-field-field-media-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /*transform: scale(1.1);
    */
    /*تعويضالقصبالبداية*/
    transition: transform 0.5s ease;
    -webkit-transition: transform 0.5s ease;
    -moz-transition: transform 0.5s ease;
    -ms-transition: transform 0.5s ease;
    -o-transition: transform 0.5s ease;
}

/* hover على السكشن كله */
.view-our-practice:hover .views-field-field-media-image {
    height: 620px;
    /* الحجم الكبير */
}

.view-our-practice:hover .views-field-field-media-image img {}


/* ===== Responsive ===== */
@media (max-width: 1200px) {
    .view-our-practice .view-content.row>.views-row {
        padding: 0 40px;
    }

    .view-our-practice .views-field-field-main-title p {
        font-size: 38px;
    }
}

@media (max-width: 800px) {
    .view-our-practice {
        padding: 70px 0 60px;
    }

    .view-our-practice .view-content.row>.views-row {
        padding: 0 18px;
    }

    .view-our-practice .views-field-field-main-title p {
        font-size: 30px;
    }

}

/* ================================
   OUR VALUES (match screenshot)
   ================================ */

/* section bg */
.our-story-our-values-section {
    background: #f7f2ec;
    /* warm off-white */
    padding: 80px 0 95px;
}

/* center title */
.view-our-values .view-header {
    text-align: center;
    margin-bottom: 44px;
}

.view-our-values .view-header h2 {
    margin: 0;
    color: #111;
    font-family: Lato, sans-serif;
    font-weight: 800;
    font-size: clamp(34px, 4.4vw, 56px);
    line-height: 1.1;
}

/* grid 3 cols */
.view-our-values .view-content.row {
    margin: 0;
    padding: 0 70px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 26px;
    align-items: stretch;
}

/* kill row pseudo */
.view-our-values .view-content.row::before,
.view-our-values .view-content.row::after {
    display: none;
}

.view-our-values .view-content.row>.views-row {
    margin: 0;
    width: auto;
    background: #fff;
    border-radius: 26px;
    padding: 30px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .06);
    position: relative;
    min-height: 333px;
    display: flex;
    flex-direction: column;
    height: 340px;
    justify-content: flex-start;
}

.view-our-values .view-content.row>.views-row:nth-child(3) {
    order: -1;
}

/* icon box top-left */
.view-our-values .views-field-field-media-image {
    margin-bottom: 92px;
    /* large top whitespace like screenshot */
}

.view-our-values .views-field-field-media-image img {
    width: 48px !important;
    height: 48px !important;
    object-fit: contain;
}



.view-our-values .views-field-title .field-content {
    color: #131313;
    font-family: Lato;
    font-size: 26px;
    font-style: normal;
    font-weight: 700;
    line-height: 36px;
}

.view-our-values .views-field-body {
    margin-top: 6px;
    max-width: 92%;
}

.view-our-values .views-field-body p {
    color: #131313;
    font-family: Lato;
    font-size: 15.5px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    /* 154.839% */
}

/* responsive */
@media (max-width: 1200px) {
    .view-our-values .view-content.row {
        padding: 0 40px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .view-our-values .view-content.row>.views-row {
        min-height: 340px;
    }
}

@media (max-width: 700px) {
    .our-story-our-values-section {
        padding: 54px 0 60px;
    }

    .view-our-values .view-content.row {
        padding: 0 18px;
        grid-template-columns: 1fr;
    }

    .view-our-values .views-field-field-media-image {
        margin-bottom: 52px;
    }

    .view-our-values .views-field-title .field-content {
        font-size: 24px;
    }
}

/* ==========================================================
   Partner Centered Approach (match screenshot)
   ========================================================== */

.partner-centered-approach-section {
    background: #0b0b0b;
    color: #fff;
    padding: 90px 0 120px;
    position: sticky;

    z-index: 9;
    top: 0;
    left: 0;
    width: 100%;

    .w-100 {}

    /* height: 94vh; */
}

/* remove bootstrap row gutters */
.view-partner-centered-approach .view-content.row,
.view-partner-centered-approach .view-content.row>.views-row {
    margin: 0;
}

/* small top label "— How It Works" */
.view-partner-centered-approach .view-header {
    padding: 0 138px 6px;
}

.view-partner-centered-approach .view-header h2 {
    color: #FFF;
    font-family: Lato;
    font-size: 17.032px;
    font-style: normal;
    font-weight: 400;
    line-height: 2;
    display: flex;
    position: relative;
    padding-inline-start: 45px;
}

.view-partner-centered-approach .view-header h2::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 36px;
    height: 1px;
    background: rgba(255, 255, 255);
    transform: translateY(-50%);
}

/* 2 columns layout */
.partner-centered-approach-section .node__content {
    padding: 0 138px;
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 90px;
    align-items: end;
    margin-top: 10px;
}

.partner-centered-approach-wrapper {}

/* left block */
.partner-centered-approach-wrapper .field--name-field-main-title p {
    margin: 0 0 18px;
    color: #7B2F6A;
    font-family: Lato, sans-serif;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: .2px;
}

.partner-centered-approach-wrapper .field--name-field-main-title h2 {
    width: 490px;
    margin: 0;
    color: #FFF;
    font-family: Lato;
    font-size: 62px;
    font-style: normal;
    font-weight: 900;
    line-height: 65px;
    text-transform: uppercase;
}

/* paragraphs */
.partner-centered-approach-wrapper .field--name-body {
    margin-top: 26px;
}

.partner-centered-approach-wrapper .field--name-body p {
    margin: 0 0 22px;
    color: #FFF;
    font-family: Lato;
    font-size: 23px;
    font-style: normal;
    font-weight: 400;
    line-height: 30px;
    /* 130.435% */
    max-width: 490px;
}

.partner-centered-approach-wrapper .field--name-body p:nth-child(2),
.partner-centered-approach-wrapper .field--name-body p:nth-child(3) {
    color: #FFF;
    font-family: Lato;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 28px;
    /* 175% */
}

.layout,
.layout-builder__layout,
.layout-builder__layout .row,
.layout-builder__layout .col-12 {
    overflow: visible !important;
}

/* right list */
.field--name-field-paragraph-title {
    margin: 0;
    padding: 0;
    display: grid;
    gap: 46px;
}

.field--name-field-paragraph-title .paragraph--type--title-paragraph {
    position: relative;
    width: 352.058px;

}

.field--name-field-paragraph-title .field--name-field-title {
    margin: 0;
    color: #FFF;
    font-family: Lato;
    font-size: 35.206px;
    font-style: normal;
    font-weight: 900;
    line-height: 35.206px;
}

/* line after each title */
.field--name-field-paragraph-title .paragraph--type--title-paragraph::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background: rgba(255, 255, 255, .32);
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
}

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

    .view-partner-centered-approach .view-header,
    .partner-centered-approach-section .node__content {
        padding: 0 40px;
    }

    .partner-centered-approach-wrapper {
        grid-template-columns: 1fr;
        gap: 44px;
    }

    .partner-centered-approach-wrapper .field--name-body {
        max-width: 100%;
    }

    .field--name-field-paragraph-title .field--name-field-title {
        font-size: 36px;
    }
}

@media (max-width: 700px) {
    .partner-centered-approach-section {
        padding: 60px 0 70px;
    }

    .view-partner-centered-approach .view-header,
    .partner-centered-approach-section .node__content {
        padding: 0 18px;
    }

    .partner-centered-approach-wrapper .field--name-field-main-title h2 {
        font-size: 44px;
    }

    .partner-centered-approach-wrapper .field--name-body p {
        font-size: 16px;
    }

    .field--name-field-paragraph-title .field--name-field-title {
        font-size: 30px;
    }

    .field--name-field-paragraph-title .paragraph--type--title-paragraph {
        padding-right: 78px;
    }

    .field--name-field-paragraph-title .paragraph--type--title-paragraph::after {
        width: 60px;
    }
}


/* ==========================================================
   Mill Journal Top Section (match screenshot) - FULL CSS
   ========================================================== */

.mill-journy-top-section {
    background: #ffffff;
    padding: 120px 0 0;
    min-height: calc(100vh - 92px);

}

/* remove bootstrap row effects */
.mill-journy-top-section .view-content.row {
    margin: 0;
}

.mill-journy-top-section .view-content.row::before,
.mill-journy-top-section .view-content.row::after {
    display: none;
}

/* main article container */
.mill-journy-top-section article.node--type-top-section {
    margin: 0 auto;
    padding: 0px 130px 0 150px;
    position: relative;
}

/* big heading */
.mill-journy-top-section .field--name-field-main-title p {
    margin: 0;
    color: #231F20;
    font-family: Lato;
    font-size: 55.59px;
    font-style: normal;
    font-weight: 900;
    line-height: 67.005px;
    letter-spacing: -0.5px;
    max-width: 720px;
}

/* body paragraph */
.mill-journy-top-section .field--name-body {
    margin-top: 44px;
    max-width: 526px;
}

.mill-journy-top-section .field--name-body p {
    margin: 0;
    color: #464646;
    font-family: Lato, sans-serif;
    font-size: 16.4px;
    font-weight: 400;
    line-height: 25px;
}

/* Scroll down block (same shared block id) */
.mill-journy-top-section .block-content-basic {
    max-width: fit-content;
    margin: 0 auto;
}

.mill-journy-top-section .block-content-basic .field--name-body p {
    color: var(--webintensive-com-ebony-clay, var(--color-azure-21, #273145));
    font-family: Lato, sans-serif;
    font-size: 16.6px;
    font-weight: 500;
    line-height: 25.2px;
    text-align: center;
}

/* link in purple */
.mill-journy-top-section .block-content-basic a {
    color: #7B2F6A;
    font-family: Lato, sans-serif;
    font-size: 16.6px;
    font-weight: 500;
    line-height: 25.2px;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* arrow above */
.mill-journy-top-section .block-content-basic .field--name-body p::before {
    content: "";
    display: block;
    margin: 0 auto 14px;
    background: url("./Down.gif") no-repeat center;
    background-size: contain;
    width: 50px;
    height: 50px;
}

/* responsive */
@media (max-width:1200px) {
    .mill-journy-top-section article.node--type-top-section {
        padding: 0 40px;
    }

    .mill-journy-top-section .field--name-field-main-title p {
        font-size: 54px;
        max-width: 720px;
    }

    .mill-journy-top-section .block-content-basic {
        padding: 28px 40px 0;
    }
}

@media (max-width:700px) {
    .mill-journy-top-section {
        padding: 56px 0 44px;
        height: auto;
    }

    .mill-journy-top-section article.node--type-top-section {
        padding: 0 62px 0 20px;
        line-height: 42.005px;
    }

    .mill-journy-top-section .field--name-field-main-title p {
        font-size: 34px;
        max-width: 100%;
    }

    .mill-journy-top-section .field--name-body {
        margin-top: 26px;
    }

    .mill-journy-top-section .block-content-basic {
        padding: 22px 18px 0;
    }
}


/* ===============================
   STORIES GRID – EXACT GRID AREAS
   =============================== */

.block-views-blockstories-block-1 .view-stories .view-content.row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, auto);
    gap: 31px;
    margin: 0;
    padding: 0 80px;
}

/* remove bootstrap junk */
.block-views-blockstories-block-1 .view-stories .view-content.row::before,
.block-views-blockstories-block-1 .view-stories .view-content.row::after {
    display: none;
}

.block-views-blockstories-block-1 .view-stories .view-content.row>.views-row {
    margin: 0;
    width: auto;
    height: 437px;
}

/* images */
.block-views-blockstories-block-1 .view-stories .views-field-field-media-image {
    overflow: hidden;
    border-radius: 12px;
}

/* ===============================
   GRID AREAS (EXACT AS YOUR CODE)
   =============================== */

/* div1 */
.block-views-blockstories-block-1 .view-stories .view-content.row>.views-row:nth-child(1) {
    grid-area: 1 / 1 / 2 / 3;
}

/* div2 */
.block-views-blockstories-block-1 .view-stories .view-content.row>.views-row:nth-child(2) {
    grid-area: 1 / 3 / 2 / 4;
}

/* div3 */
.block-views-blockstories-block-1 .view-stories .view-content.row>.views-row:nth-child(3) {
    grid-area: 2 / 1 / 3 / 2;
}

/* div4 */
.block-views-blockstories-block-1 .view-stories .view-content.row>.views-row:nth-child(4) {
    grid-area: 2 / 2 / 3 / 3;
}

/* div5 */
.block-views-blockstories-block-1 .view-stories .view-content.row>.views-row:nth-child(5) {
    grid-area: 2 / 3 / 3 / 4;
}

/* div6 */
.block-views-blockstories-block-1 .view-stories .view-content.row>.views-row:nth-child(6) {
    grid-area: 3 / 1 / 4 / 2;
}

/* div7 */
.block-views-blockstories-block-1 .view-stories .view-content.row>.views-row:nth-child(7) {
    grid-area: 3 / 2 / 4 / 4;
}

/* ===============================
   HEIGHT CONTROL (MATCH LOOK)
   =============================== */

.block-views-blockstories-block-1 .view-stories .views-row:nth-child(1) .views-field-field-media-image,
.block-views-blockstories-block-1 .view-stories .views-row:nth-child(7) .views-field-field-media-image {
    height: 260px;
}

.block-views-blockstories-block-1 .view-stories .views-row:nth-child(2) .views-field-field-media-image {
    height: 100%;
    /* min-height: 560px; */
}

.block-views-blockstories-block-1 .view-stories .views-row:nth-child(3) .views-field-field-media-image,
.block-views-blockstories-block-1 .view-stories .views-row:nth-child(4) .views-field-field-media-image,
.block-views-blockstories-block-1 .view-stories .views-row:nth-child(5) .views-field-field-media-image,
.block-views-blockstories-block-1 .view-stories .views-row:nth-child(6) .views-field-field-media-image {
    height: 220px;
}

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

@media (max-width: 1200px) {
    .block-views-blockstories-block-1 .view-stories .view-content.row {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: auto;
        padding: 0 40px;
    }

    .block-views-blockstories-block-1 .view-stories .view-content.row>.views-row {
        grid-area: auto !important;
    }

    .block-views-blockstories-block-1 .view-stories .views-field-field-media-image {
        height: 220px !important;
    }
}

@media (max-width: 700px) {
    .block-views-blockstories-block-1 .view-stories .view-content.row {
        grid-template-columns: 1fr;
        padding: 0 18px;
    }
}

/* ==========================================================
   STORIES (match screenshot style) — no HTML changes
   Keep your grid-areas CSS as-is, add this styling layer
   ========================================================== */

.stories-section {
    background: #fff;
    padding: 70px 0 90px;
}

.block-views-blockstories-block-1 .view-stories .view-header {
    padding: 0 155px 57px;
}

.block-views-blockstories-block-1 .view-stories .view-header h2 {
    color: var(--shakuro-com-mirage, var(--color-blue-11, #131623));
    font-family: Lato;
    font-size: 43.15px;
    font-style: normal;
    font-weight: 400;
    line-height: 55.8px;
    letter-spacing: -0.68px;
}

/* the grid container already done by you */
.block-views-blockstories-block-1 .view-stories .view-content.row {
    padding: 0 150px;
}

/* CARD */
.block-views-blockstories-block-1 .view-stories .view-content.row>.views-row {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Image block */
.block-views-blockstories-block-1 .view-stories .views-field-field-media-image {
    border-radius: 12px;
    overflow: hidden;
    background: #eee;
}

.block-views-blockstories-block-1 .view-stories .views-field-field-media-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    display: block;
    transform: scale(1);
    transition: transform .45s ease, filter .45s ease;
}

/* hover effect like screenshot (soft zoom) */
.block-views-blockstories-block-1 .view-stories .view-content.row>.views-row:hover .views-field-field-media-image img {
    transform: scale(1.03);
}

.block-views-blockstories-block-1 .view-stories {

    .views-field.views-field-field-media-image,
    .views-field.views-field-field-media-image * {
        width: 100%;
        height: 293px !important;
    }
}

/* Title */
.block-views-blockstories-block-1 .view-stories .views-field-title {
    margin-top: 0;
}

.block-views-blockstories-block-1 .view-stories .views-field-title a {
    display: block;
    line-height: 1.35;
    text-decoration: none;
    max-width: 95%;
    color: var(--shakuro-com-mirage, var(--color-blue-11, #131623));
    font-family: Lato;
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: 32.4px;
    /* 135% */
}

.block-views-blockstories-block-1 .view-stories .view-content.row>.views-row:hover .views-field-title a {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Date */
.block-views-blockstories-block-1 .view-stories .views-field-created {
    margin-top: -4px;
}

.block-views-blockstories-block-1 .view-stories .views-field-created .datetime {
    color: var(--shakuro-com-santas-gray, var(--color-grey-65, #9D9DAD));
    font-family: Lato;
    font-size: 11.6px;
    font-style: normal;
    font-weight: 400;
    line-height: 13.44px;
}

/* make the “big” cards feel like screenshot (more padding below image) */
.block-views-blockstories-block-1 .view-stories .view-content.row>.views-row:nth-child(1),
.block-views-blockstories-block-1 .view-stories .view-content.row>.views-row:nth-child(2),
.block-views-blockstories-block-1 .view-stories .view-content.row>.views-row:nth-child(7) {
    gap: 12px;
}

/* responsive */
@media (max-width: 1200px) {
    .block-views-blockstories-block-1 .view-stories .view-header {
        padding: 0 40px 20px;
    }

    .block-views-blockstories-block-1 .view-stories .view-content.row {
        padding: 0 40px;
    }
}

@media (max-width: 700px) {
    .block-views-blockstories-block-1 .view-stories .view-header {
        padding: 0 18px 16px;
    }

    .block-views-blockstories-block-1 .view-stories .view-content.row {
        padding: 0 18px;
    }

    .block-views-blockstories-block-1 .view-stories .view-header h2 {
        font-size: 18px;
    }


}


/* ==========================================================
   Story Details (block-views-blockstories-block-2) — match screenshot
   ========================================================== */

.block-views-blockstories-block-2 {
    background: #fff;
    padding: 70px 0 90px;
}

/* kill bootstrap row spacing */
.block-views-blockstories-block-2 .view-content.row,
.block-views-blockstories-block-2 .view-content.row>.views-row {
    margin: 0 !important;
}

/* main wrapper width like screenshot */
.block-views-blockstories-block-2 .view-content.row>.views-row {
    max-width: 1220px;
    margin: 0 auto !important;
    padding: 0 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding-inline-end: 134px;
}

/* -------- top bar (Back to Blog + Date) -------- */
.block-views-blockstories-block-2 .date-link-story-wrappeer {
    border: 0;
    padding: 0;
    margin: 0 0 18px;
}

.block-views-blockstories-block-2 .date-link-story-wrappeer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

/* Back to Blog style + left line */
.block-views-blockstories-block-2 .date-link-story-wrappeer .views-field-nothing a {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--www-averi-ai-woodsmoke, var(--color-blue-4, #09090B));
    text-align: center;
    font-family: Lato;
    font-size: 11.3px;
    font-style: normal;
    font-weight: 400;
    line-height: 14.4px;
    letter-spacing: 0.48px;
    padding-left: 12px;
}

.block-views-blockstories-block-2 .date-link-story-wrappeer .views-field-nothing a:hover {
    transform: unset;
    -webkit-transform: unset;
    -moz-transform: unset;
    -ms-transform: unset;
    -o-transform: unset;
}

.block-views-blockstories-block-2 .date-link-story-wrappeer .views-field-nothing a::before {
    content: "";
    background: url(./back.svg) no-repeat left center;
    background-size: contain;
    display: inline-block;
    width: 9px;
    height: 9px;
}

/* date right */
.block-views-blockstories-block-2 .date-link-story-wrappeer .views-field-created .datetime {
    color: #9a9a9a;
    font-family: Lato, sans-serif;
    font-size: 12px;
    font-weight: 500;
}

/* -------- title -------- */
.block-views-blockstories-block-2 .views-field-title {
    margin: 8px 0 22px;
    color: #111;
    font-family: Lato, sans-serif;
    font-size: 38px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.2px;
    max-width: 980px;
}

/* -------- image -------- */
.block-views-blockstories-block-2 .views-field-field-media-image {
    margin: 0 0 26px;

}

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

.block-views-blockstories-block-2 .views-field-field-media-image .field__item {
    width: 100%;
    border-radius: 18px;
    overflow: hidden;
}

.block-views-blockstories-block-2 .views-field-field-media-image img {
    width: 100% !important;
    height: 380px !important;
    /* controls the “big banner” look */
    object-fit: cover;
    display: block;
}

/* -------- body -------- */
.block-views-blockstories-block-2 .views-field-body .field-content {
    /* max-width: 980px; */
}

.block-views-blockstories-block-2 .views-field-body p {
    margin: 0;
    color: #4b4b4b;
    font-family: Lato, sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 28px;
}

/* -------- responsive -------- */
@media (max-width: 1200px) {
    .block-views-blockstories-block-2 .view-content.row>.views-row {
        padding: 0 40px;
    }

    .block-views-blockstories-block-2 .views-field-title {
        font-size: 32px;
    }

    .block-views-blockstories-block-2 .views-field-field-media-image img {
        height: 320px !important;
    }
}

@media (max-width: 700px) {
    .block-views-blockstories-block-2 {
        padding: 52px 50px 70px 0;
    }

    .block-views-blockstories-block-2 .view-content.row>.views-row {
        padding: 0 18px;
    }

    .block-views-blockstories-block-2 .views-field-title {
        font-size: 24px;
    }

    .block-views-blockstories-block-2 .views-field-field-media-image img {
        height: 240px !important;
    }
}

/* =========================
   SimpleNews Subscribe (clean like screenshot)
   ========================= */

.simple-news-section {
    background: #fff;
    padding: 70px 0;
}

/* container width like design */
.simple-news-section .simplenews-subscriber-form {
    max-width: 1220px;
    margin: 0 auto;
    padding: 0 80px;
}

/* hide all extras */
.simple-news-section fieldset,
.simple-news-section legend,
.simple-news-section .fieldset-wrapper,
.simple-news-section .checkbox,
.simple-news-section .description,
.simple-news-section small,
.simple-news-section #edit-message,
.simple-news-section label {
    display: none !important;
}

/* 3 columns: title | input | button */
.simple-news-section form {
    display: flex;
    align-items: center;
    /* column-gap: 0px; */
    padding-block: 70px;
    border-block: 1px solid rgba(0, 0, 0, .08);
    justify-content: space-between;
}

/* remove bootstrap margins */
.simple-news-section .form-wrapper,
.simple-news-section .js-form-item,
.simple-news-section .form-actions {
    margin: 0 !important;
}

/* input */
.simple-news-section input[type="email"] {
    border: 0 !important;
    border-bottom: 1px solid rgba(0, 0, 0, .18) !important;
    border-radius: 0 !important;
    padding: 10px 0 !important;
    height: auto !important;
    box-shadow: none !important;
    font-size: 14px;
    color: #111;
    background: transparent !important;
}

/* button like link */
.simple-news-section button#edit-submit {
    background: transparent !important;
    border: 0 !important;
    padding: 10px 0 !important;
    box-shadow: none !important;
    color: #111 !important;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}

.simple-news-section button#edit-submit:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* left title injected by JS */
.simple-news-section .sn-title {
    margin: 0;
    color: #131623;
    font-family: Lato;
    font-size: 40px;
    font-style: normal;
    font-weight: 400;
    line-height: 46px;
    letter-spacing: -2px;
}

.simple-news-section .sn-sub {
    margin: 6px 0 0;
    color: #9D9DAD;
    font-family: Lato;
    font-size: 19.8px;
    font-style: normal;
    font-weight: 400;
    line-height: 32px;
}

/* responsive */
@media (max-width: 992px) {
    .simple-news-section .simplenews-subscriber-form {
        padding: 0 40px;
    }

    .simple-news-section form {
        column-gap: 30px;
    }
}

@media (max-width: 700px) {
    .simple-news-section .simplenews-subscriber-form {
        padding: 0 18px;
    }

    .simple-news-section form {
        grid-template-columns: 1fr;
        row-gap: 14px;
        border-bottom: 0;
    }

    .privacy-policy {
        padding-inline: 20px 80px !important;
    }
}

/* =========================================
   Contact Us Section (match screenshot)
   ========================================= */

.contact-us-section {
    background: #f6f1ec;
    padding: 138px 0 90px;
    min-height: 100vh;
    margin-top: -92px;
}

/* remove gutters */
.contact-us-section .layout.row,
.contact-us-section .layout.row.no-gutters {
    margin: 0 !important;
}

/* main 2 columns */
.contact-us-section .layout-builder__layout {}

/* remove bootstrap col width behavior */
.contact-us-section .col-12 {
    max-width: 1280px !important;
    margin: 0 auto;
    padding-inline: 0 151px !important;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 0;
    align-items: center;

}

/* left text block */
.contact-us-section .contact-us-wrapper p {
    margin: 0 0 28px;
    font-family: Lato, sans-serif;
    font-size: 13px;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: #111;
    position: relative;
    padding-left: 18px;
}

.contact-us-section .contact-us-wrapper p::before {
    content: "•";
    position: absolute;
    left: 0;
    top: 0;
}

/* heading */
.contact-us-section .contact-us-wrapper h2 {
    margin: 0;
    color: #231F20;
    font-family: Lato;
    font-size: 65.5px;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
    letter-spacing: -2.16px;
    max-width: 480px;

}

.contact-us-section .contact-us-wrapper h2 strong {
    color: #231F20;
    font-family: Lato;
    font-size: 66.9px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    letter-spacing: var(--letter-spacing--2_16, -2.16px);
}

.contact-us-wrapper {
    padding-top: 43px;
}

/* links block */
.contact-us-section .links-wrapper {
    margin-top: 120px;
    display: grid;
    gap: 18px;
    max-width: 360px;
}

.contact-us-section .links-wrapper a {
    color: #231F20;
    -webkit-text-stroke-width: 0.2px;
    -webkit-text-stroke-color: #231F20;
    font-family: Lato;
    font-size: 26.5px;
    font-style: normal;
    font-weight: 300;
    line-height: var(--line-height-36_32, 36.32px);
    /* 137.057% */
    letter-spacing: var(--letter-spacing--0_56, -0.559px);
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: auto;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;
    display: flex;
    align-items: center;
    gap: 12px;
}

.contact-us-section .links-wrapper a:nth-child(1)::after {
    content: "";
    display: block;
    width: 39.59px;
    height: 39.59px;
    background: url(./footer-link.svg) no-repeat center;
    background-size: contain;
    margin-top: 6px;
}

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

/* right form */
.contact-us-section .block-webform {
    margin-top: 6px;
}

/* remove default spacing */
.contact-us-section .block-webform form,
.contact-us-section .block-webform .form-wrapper,
.contact-us-section .block-webform .js-form-item {
    margin: 0 !important;
}

.contact-us-section .block-webform .mb-3 {
    margin-bottom: 29px !important;
}

/* first/last row = 2 columns */
.contact-us-section .block-webform .form-row.two-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 36px;
}

/* labels like screenshot */
.contact-us-section .block-webform label {
    display: block;
    margin: 0 0 3px;
    color: rgba(144, 144, 144, 0.89);
    font-family: Lato;
    font-size: 14.4px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

/* inputs underline only */
.contact-us-section .block-webform input.form-control,
.contact-us-section .block-webform textarea.form-control,
.contact-us-section .block-webform select.form-select {
    width: 100%;
    border: 0 !important;
    border-bottom: 1px solid rgba(0, 0, 0, .22) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0px 0 4px !important;
    font-family: Lato, sans-serif;
    font-size: 14px;
    color: #111;
}

.contact-us-section .block-webform textarea.form-control {
    max-height: 82px;
}

/* textarea height like screenshot */
.contact-us-section .block-webform textarea {
    resize: none;
    min-height: 85px;
    padding-top: 14px !important;
}

/* focus */
.contact-us-section .block-webform input:focus,
.contact-us-section .block-webform textarea:focus,
.contact-us-section .block-webform select:focus {
    outline: none !important;
    border-bottom-color: rgba(123, 47, 106, .8) !important;
}

/* select - custom arrow circle on right */
.contact-us-section .block-webform .form-item-hear-about-us {
    position: relative;
}

.contact-us-section .block-webform .form-item-hear-about-us select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 58px !important;
}

.contact-us-section .block-webform .form-item-hear-about-us::after {
    content: "";
    position: absolute;
    right: -3px;
    top: 37%;
    width: 34px;
    transform: translateY(-50%);
    height: 34px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .06);
    pointer-events: none;
}

.contact-us-section .block-webform .form-item-hear-about-us::before {
    content: "";
    position: absolute;
    right: 12px;
    top: 30%;
    transform: translateY(-50%);
    width: 10px;
    height: 10px;
    border-right: 1px solid rgba(0, 0, 0, .55);
    border-bottom: 1px solid rgba(0, 0, 0, .55);
    transform: rotate(45deg) translateY(-50%);
    pointer-events: none;
}

/* privacy note */
.contact-us-section #edit-privacy-note p {
    color: #757575;
    font-family: Lato;
    font-size: 14.4px;
    font-style: normal;
    font-weight: var(--font-weight-400, 400);
    line-height: normal;
    max-width: 400px;
}

/* submit button */
.contact-us-section #edit-actions {
    margin-top: 18px !important;
}

.contact-us-section #edit-actions-submit {
    background: #111 !important;
    border: 0 !important;
    color: #fff !important;
    border-radius: 999px !important;
    padding: 12px 26px !important;
    font-family: Lato, sans-serif;
    font-size: 13px;
    font-weight: 500;
    box-shadow: none !important;
}

/* responsive */
@media (max-width: 1200px) {
    .contact-us-section .layout-builder__layout {
        padding: 0 40px;
        column-gap: 70px;
    }

    .contact-us-section .contact-us-wrapper h2 {
        font-size: 44px;
    }

    .contact-us-section .links-wrapper {
        margin-top: 120px;
    }
}

@media (max-width: 900px) {
    .contact-us-section .layout-builder__layout {
        grid-template-columns: 1fr;
        row-gap: 50px;
    }

    .contact-us-section .links-wrapper {
        margin-top: 34px;
    }
}

@media (max-width: 700px) {
    .contact-us-section .layout-builder__layout {
        padding: 0 18px;
    }

    .contact-us-section .block-webform .form-row.two-cols {
        grid-template-columns: 1fr;
        gap: 0;
    }
}


/* ==========================================================
   Need to Know - Top Section (FAQ)  (match screenshot)
   ========================================================== */

.need-know-top-section {
    background: #ffffff;
    padding: 120px 0 0;
    min-height: calc(100vh - 108px);
}

/* remove gutters */
.need-know-top-section .layout.row,
.need-know-top-section .layout.row.no-gutters,
.need-know-top-section .view-to .view-content.row {
    margin: 0 !important;
}

.need-know-top-section .col-12 {
    padding: 0 !important;
}

/* layout like screenshot */
.need-know-top-section .node__content {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0px 73px;
    display: grid;
    grid-template-columns: 1;
    column-gap: 140px;
    align-items: start;
}

/* H2 title (left big) */
.need-know-top-section .field--name-field-main-title p {
    margin: 0;
    font-family: Lato, sans-serif;
    font-weight: 800;
    font-size: 58px;
    line-height: 1.05;
    color: #111;
    max-width: 520px;
}

/* body column (right) */
.need-know-top-section .field--name-body {
    padding-top: 40px;
    max-width: 463px;
}

/* purple intro line */
.need-know-top-section .field--name-body span {
    display: block;
    margin: 0 0 18px;
    color: #7B2F6A;
    font-family: Lato, sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: 1.3;
}

/* paragraph */
.need-know-top-section .field--name-body p {
    margin: 0;
    color: rgba(0, 0, 0, .62);
    font-family: Lato, sans-serif;
    font-size: 14px;
    line-height: 24px;
}

/* remove quotes spacing look */
.need-know-top-section .field--name-body p br {
    line-height: 0;
}

/* ===== Scroll down block (Need to Know / FAQ) ===== */
.need-know-top-section .block-content-basic {
    display: flex;
    justify-content: center;
}

/* text */
.need-know-top-section .block-content-basic .field--name-body p {
    color: #273145;
    font-family: Lato, sans-serif;
    font-size: 16.6px;
    font-weight: 500;
    line-height: 25.2px;
    text-align: center;
    margin: 0;
    margin-top: 173px;
}

/* purple link */
.need-know-top-section .block-content-basic a {
    color: #7B2F6A;
    font-family: Lato, sans-serif;
    font-size: 16.6px;
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* arrow above text */
.need-know-top-section .block-content-basic .field--name-body p::before {
    content: "";
    display: block;
    margin: 0 auto 16px;
    width: 44px;
    height: 44px;
    background: url("./Down.gif") no-repeat center;
    background-size: contain;
}

/* fallback arrow */
@supports not (background: url("x")) {
    .need-know-top-section .block-content-basic .field--name-body p::before {
        content: "↓";
        font-size: 34px;
        color: #000;
        background: none;
    }
}

/* responsive */
@media (max-width: 1200px) {
    .need-know-top-section .node__content {
        padding: 0 40px;
        column-gap: 70px;
    }

    .need-know-top-section .field--name-field-main-title p {
        font-size: 46px;
    }
}

@media (max-width: 900px) {
    .need-know-top-section {
        padding: 80px 0 70px;
    }

    .need-know-top-section .node__content {
        grid-template-columns: 1fr;
        row-gap: 26px;
    }

    .need-know-top-section .field--name-body {
        padding-top: 0;
    }
}

@media (max-width: 700px) {
    .need-know-top-section .node__content {
        padding: 0 84px 0 20px;
    }

    .need-know-top-section .field--name-field-main-title p {
        font-size: 38px;
    }
}

/* ==========================================================
   People Asking Section (match screenshot)
   ========================================================== */

.people-asking-section {
    background: #231F20;
    padding: 140px 80px;
    color: #fff;
}

/* remove bootstrap gutters inside */
.people-asking-section .layout.row,
.people-asking-section .layout.row>[class*="col-"],
.people-asking-section .view-content.row {
    margin: 0 !important;
    padding: 0 !important;
}

/* main container spacing */
.people-asking-section .layout-builder__layout {
    padding: 0 110px;
}

/* 2 columns: left text block + right accordion */
.people-asking-section .layout-builder__layout>.col-12 {
    display: grid;
    grid-template-columns: 1fr 1.25fr;
    gap: 21px;
    align-items: start;
}

/* left title block */
.people-asking-section .block-content-basic {
    align-self: start;
}

.people-asking-section .block-content-basic .field--name-body p {
    margin: 0;
    color: #FFF;
    font-family: Lato;
    font-size: 41.5px;
    font-style: normal;
    font-weight: 700;
    line-height: 58.46px;
    /* 140.867% */
    letter-spacing: -0.547px;
}

/* right accordion wrapper */
.people-asking-section .view-people-asking {
    width: 100%;
}

/* card */
.people-asking-section .view-people-asking .views-row {
    background: #fff;
    color: #121212;
    border-radius: 28px;
    padding: 34px 38px;
    margin: 0 0 26px;
    /* box-shadow: 0 18px 40px rgba(0, 0, 0, .35); */
    border-radius: 25.72px;
    background: var(--color-white-solid, #FFF);
    padding: 38.854px 31.286px;
}

/* clickable title row */
.people-asking-section .view-people-asking .views-field-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    cursor: pointer;
    user-select: none;
}

.people-asking-section .view-people-asking .views-field-title .field-content {
    color: var(--www-firesidedc-com-mine-shaft, var(--color-grey-14, #232323));
    font-family: Lato;
    font-size: 17.1px;
    font-style: normal;
    font-weight: 700;
    line-height: 28.81px;
}

/* icon (JS appends .toggle-icon) */
.people-asking-section .view-people-asking .toggle-icon {
    font-size: 28px;
    font-weight: 300;
    color: #EF4C23;
    line-height: 1;
    flex: 0 0 auto;
}

/* body animation */
.people-asking-section .view-people-asking .views-field-body {
    overflow: hidden;
    transition: max-height .4s ease;
}

/* body text */
.people-asking-section .view-people-asking .views-field-body .field-content {
    padding-top: 16px;
}

.people-asking-section .view-people-asking .views-field-body p {
    margin: 0;
    max-width: 820px;
    color: var(--www-firesidedc-com-tapa, var(--color-grey-45, #757370));
    font-family: Lato;
    font-size: 15.2px;
    font-style: normal;
    font-weight: 400;
    line-height: 24.19px;
}

/* open state tweak (optional) */
.people-asking-section .view-people-asking .views-row.is-open {
    border-radius: 28px;
}

/* ==========================================================
   Responsive
   ========================================================== */
@media (max-width: 1200px) {
    .people-asking-section .layout-builder__layout {
        padding: 0 40px;
    }

    .people-asking-section .layout-builder__layout>.col-12 {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .people-asking-section .block-content-basic .field--name-body p {
        font-size: 44px;
    }
}

@media (max-width: 700px) {
    .people-asking-section {
        padding: 70px 20px;
    }

    .people-asking-section .layout-builder__layout {
        padding: 0 18px;
    }

    .people-asking-section .block-content-basic .field--name-body p {
        font-size: 34px;
    }

    .people-asking-section .view-people-asking .views-row {
        padding: 22px 20px;
        border-radius: 22px;
    }

    .people-asking-section .view-people-asking .views-field-title .field-content {
        font-size: 17px;
    }
}


/* ==========================================================
   Our Ventures Top Section (match screenshot)
   ========================================================== */

.our-ventures-top-section {
    background: #ffffff;
    padding: 120px 0 0;
    min-height: calc(100vh - 108px);
}

/* remove bootstrap gutters */
.our-ventures-top-section .layout.row,
.our-ventures-top-section .layout.row>[class*="col-"],
.our-ventures-top-section .view-content.row {
    margin: 0 !important;
    padding: 0 !important;
}

/* control left spacing like screenshot */
.our-ventures-top-section .container {
    max-width: 1320px;
}

/* main node spacing */
.our-ventures-top-section .node__content {
    padding: 0 150px;
}

/* big title */
.our-ventures-top-section .field--name-field-main-title p {
    margin: 0;
    font-family: Lato, sans-serif;
    font-size: 58px;
    font-weight: 900;
    line-height: 1.2;
    letter-spacing: -0.3px;
    color: #121212;
    max-width: 560px;
    position: relative;
}


/* highlight words */
.our-ventures-top-section .field--name-field-main-title p span:first-of-type {
    background: #1a1a1a;
    color: #fff;
    padding: 2px 10px 4px;
    border-radius: 2px;
    display: inline-block;
}

.our-ventures-top-section .field--name-field-main-title p span:last-of-type {
    color: #7B2F6A;
    font-weight: 900;
}

/* description */
.our-ventures-top-section .field--name-body {
    margin-top: 22px;
}

.our-ventures-top-section .field--name-body p {
    margin: 0;
    color: #464646;
    font-family: Lato;
    font-size: 16.4px;
    font-style: normal;
    font-weight: 400;
    line-height: 25px;
    max-width: 520px;
}

/* ==========================================================
   Scroll down block (same as your previous one)
   ========================================================== */

.our-ventures-top-section .block-content-basic {
    margin-top: 90px;
    display: flex;
    justify-content: center;
}

.our-ventures-top-section .block-content-basic .field--name-body p {
    color: #273145;
    font-family: Lato, sans-serif;
    font-size: 16.6px;
    font-weight: 500;
    line-height: 25.2px;
    text-align: center;
}

.our-ventures-top-section .block-content-basic a {
    color: #7B2F6A;
    font-family: Lato, sans-serif;
    font-size: 16.6px;
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 4px;
}

.our-ventures-top-section .block-content-basic .field--name-body p::before {
    content: "";
    display: block;
    margin: 0 auto 16px;
    width: 44px;
    height: 44px;
    background: url("./Down.gif") no-repeat center;
    background-size: contain;
}

@supports not (background: url("x")) {
    .our-ventures-top-section .block-content-basic .field--name-body p::before {
        content: "↓";
        font-size: 34px;
        color: #000;
        background: none;
    }
}

/* ==========================================================
   Responsive
   ========================================================== */
@media (max-width: 1200px) {
    .our-ventures-top-section .node__content {
        padding: 0 40px;
    }

    .our-ventures-top-section .field--name-field-main-title p {
        font-size: 46px;

    }
}

@media (max-width: 700px) {
    .our-ventures-top-section {
        padding: 80px 0 60px;
    }

    .our-ventures-top-section .node__content {
        padding: 0 18px;
    }

    .our-ventures-top-section .field--name-field-main-title p {
        font-size: 37px;
        padding-inline-end: 50px;
    }

    .our-ventures-top-section .block-content-basic {
        margin-top: 60px;
    }
}

.block-views-blockour-ventures-block-2 {
    .views-row {
        display: flex;
        justify-content: center;
        padding-block: 140px;
        gap: 80px;
        border-bottom: 1px solid rgba(0, 0, 0, .08);
    }

    .views-row:nth-child(1) {
        background: #FAFAFA;
        order: -2;

    }

    .views-field.views-field-field-media-image,
    .views-field.views-field-field-media-image * {
        width: 837.267px;
        height: 525.612px;
        object-fit: cover;
    }

    .views-row:nth-child(even) {
        flex-direction: row-reverse;

        .views-field-field-logo-image {
            position: absolute;
            left: auto;
            right: -29%;
            bottom: -16%;

        }
    }

    .views-field-field-logo-image {
        width: 301.885px;
        height: 301.885px;
        display: flex;
        background: #000;
        border-radius: 50%;
        align-items: center;
        justify-content: center;
    }

    .views-field-fieldset {
        display: flex;
        width: 303.595px;
        height: 184.479px;
        flex-direction: column;
        align-items: flex-start;
        gap: 28.332px;
        padding-top: 50px;
    }

    .inner-venture-title-body-link-wrapper {
        display: flex;
        flex-direction: column;
        gap: 28px;
    }

    .views-field-title {
        color: #35312E;
        font-family: Lato;
        font-size: 28.163px;
        font-style: normal;
        font-weight: var(--font-weight-400, 400);
        line-height: 33.796px;
    }

    .views-field-body {
        color: var(--webintensive-com-mine-shaft, var(--color-grey-20, #333));
        font-family: Lato;
        font-size: 17.781px;
        font-style: normal;
        font-weight: 400;
        line-height: 29.212px;
    }


    .views-field-fieldset-1 {
        position: relative;
    }

    .views-field-field-logo-image {
        position: absolute;
        left: -29%;
        bottom: -10%;
    }
}

/* ================================
   Our Venture Brands (Exact look)
   ================================ */

.our-venture-brands-section,
.our-venture-bottom-section {
    background: #0b0b0b;
    color: #fff;
}

/* remove container limits إذا بدك Full width */
.our-venture-brands-section .container,
.our-venture-bottom-section .container {
    max-width: 100% !important;
}

/* remove bootstrap gutters */
.our-venture-brands-section .row,
.our-venture-brands-section .row>[class*="col-"],
.our-venture-bottom-section .row,
.our-venture-bottom-section .row>[class*="col-"] {
    margin: 0 !important;
    padding: 0 !important;
}

/* ----- grid lines clean (gap method) ----- */
.view.view-brands .view-content.row {
    --cols: 5;
    display: grid;
    grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
    margin: 0 !important;

    /* this is the "line" */
    gap: 1px;
    background: rgba(255, 255, 255, 0.14);

    /* outer border */
    padding: 1px;

    /* background feel (subtle gradient like screenshot) */
    background-image:
        radial-gradient(800px 360px at 30% 20%, rgba(255, 255, 255, 0.06), transparent 60%),
        radial-gradient(900px 420px at 80% 40%, rgba(255, 255, 255, 0.05), transparent 55%);
    background-blend-mode: screen;
}

/* each cell */
.view.view-brands .view-content.row>.views-row {
    margin: 0 !important;
    min-height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px 18px;
    background: #0b0b0b;
    position: relative;
    /* slight depth */
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25);

    a {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0;
    }

    img {
        filter: brightness(888);
        -webkit-filter: brightness(888);
        width: 116px;
        height: 199px;
    }
}

/* empty placeholders (JS adds these) */
.view.view-brands .view-content.row>.views-row.is-empty {
    pointer-events: none;
}

.view.view-brands .view-content.row>.views-row.is-empty * {
    display: none !important;
}

/* logo image */
.view.view-brands .views-field-field-media-image img {
    max-width: 220px;
    max-height: 86px;
    width: auto;
    height: auto;
    display: block;
    filter: brightness(0) invert(1);
    opacity: 0.98;
}

/* bottom CTA area (كما عندك) */
.our-venture-bottom-section {
    padding: 210px 0 158px;
    position: relative;
}

/* subtle vertical guide lines like screenshot sides */
.our-venture-bottom-section::before,
.our-venture-bottom-section::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: rgba(255, 255, 255, 0.08);
}

.our-venture-bottom-section::before {
    left: 0;
}

.our-venture-bottom-section::after {
    right: 0;
}

.bottom-our-venture-wrapper {
    text-align: center;
    max-width: 980px;
    margin: 0 auto;
    padding: 0 18px;
}

.bottom-our-venture-wrapper h2 {
    margin: 0 0 30px;
    font-family: Lato, sans-serif;
    font-weight: 900;
    letter-spacing: .5px;
    text-transform: uppercase;
    line-height: 1.05;
}

.bottom-our-venture-wrapper h2 span:first-child {
    display: block;
    font-size: 42px;
    font-weight: 900;
    line-height: 1.1;
}

.bottom-our-venture-wrapper h2 span:last-child {
    display: block;
    font-size: 78px;
    font-weight: 900;
    line-height: 1.05;
}

.bottom-our-venture-wrapper p {
    font-family: Lato, sans-serif;
    font-size: 24px;
    font-weight: 400;
    opacity: .92;
}

/* responsive columns */
@media (max-width: 1200px) {
    .view.view-brands .view-content.row {
        --cols: 4;
    }

    .view.view-brands .view-content.row>.views-row {
        min-height: 160px;
    }

    .bottom-our-venture-wrapper h2 span:last-child {
        font-size: 52px;
    }
}

@media (max-width: 768px) {
    .view.view-brands .view-content.row {
        --cols: 2;
    }

    .our-venture-bottom-section {
        padding: 90px 0 95px;
    }

    .bottom-our-venture-wrapper h2 span:last-child {
        font-size: 40px;
    }
}



/* ==========================================================
   Top Section - Our Venture (block_3)  (match screenshot)
   ========================================================== */

.top-section-our-venture-0-section {
    padding: 68px 0 90px;
}

/* remove gutters */
.top-section-our-venture-0-section .row,
.top-section-our-venture-0-section .row>[class*="col-"] {
    margin: 0 !important;
    padding: 0 !important;
}

/* main layout: left text + right logo */
.top-section-our-venture-0-section .view-our-ventures .view-content .views-row {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    align-items: center;
    column-gap: 90px;
    margin: 0 !important;
    padding: 50px 152px;
    padding-inline-end: 200px;
}

/* left wrapper */
.top-section-our-venture-0-section .views-field-field-link a {
    position: relative;
    display: inline-flex;
    align-items: center;
    color: #7B2F6A;
    font-family: var(--lato);
    font-size: 15.5px;
    font-weight: 400;
    text-decoration: none;
    padding-left: 49px;
    transition: transform .35s ease;
}

.top-section-our-venture-0-section .views-field-field-link a::before {
    content: "";
    position: absolute;
    left: 0;
    width: 38px;
    height: 38px;

    background: url("./more.svg") no-repeat center;
    background-size: contain;

    transition: transform .35s ease;
}

.top-section-our-venture-0-section .our-venture-top-section-wrapper {
    border: 0;
    padding: 0;
    margin: 0;
    min-width: 0;
}

.top-section-our-venture-0-section .views-field-title {
    margin: 0 0 34px;
}

.top-section-our-venture-0-section .views-field-title .field-content {
    color: #231F20;
    font-family: Lato;
    font-size: 55.59px;
    font-style: no rmal;
    font-weight: 900;
    line-height: 67.005px;
    /* 120.536% */
}

/* body */
.top-section-our-venture-0-section .views-field-field-top-section-body {
    max-width: 520px;
}

.top-section-our-venture-0-section .views-field-field-top-section-body p {
    color: #464646;
    font-family: Lato;
    font-size: 16.4px;
    font-style: normal;
    font-weight: 400;
    line-height: 25px;
    /* 152.439% */
}

.top-section-our-venture-0-section .views-field-field-top-section-body p strong {
    color: #464646;
    font-family: Lato;
    font-size: 29.4px;
    font-style: normal;
    font-weight: 700;
    line-height: 25px;
    /* 152.439% */
}

/* "Go Website" link (add via CSS, no markup change) */
.top-section-our-venture-0-section .views-field-field-top-section-body {
    position: relative;
    padding-bottom: 32px;
    /* space for CTA */
}



/* right logo */
.top-section-our-venture-0-section .views-field-field-top-inner-image {
    display: flex;
    justify-content: center;
    align-items: center;
}

.top-section-our-venture-0-section .views-field-field-top-inner-image img {
    max-width: 520px;
    width: 100%;
    height: auto;
    display: block;
}

/* use your previous "scroll down" block styles under this section */
.top-section-our-venture-0-section .block-content-basic {
    margin-top: 70px;
    display: flex;
    justify-content: center;
}

/* ---------- responsive ---------- */
@media (max-width: 1200px) {
    .top-section-our-venture-0-section .view-our-ventures .view-content.row {
        column-gap: 48px;
    }

    .top-section-our-venture-0-section .views-field-title .field-content {
        font-size: 46px;
    }
}

@media (max-width: 991px) {
    .top-section-our-venture-0-section {
        padding: 40px 0 60px;
    }

    .top-section-our-venture-0-section .view-our-ventures .view-content.row {
        grid-template-columns: 1fr;
        row-gap: 40px;
    }

    .top-section-our-venture-0-section .views-field-field-top-section-body {
        max-width: 100%;
    }

    .top-section-our-venture-0-section .views-field-field-top-inner-image img {
        max-width: 420px;
    }
}


/* ==========================================================
   Scroll Down – From Vision to Venture (shared component)
   ========================================================== */

.top-section-our-venture-0-section .block-content-basic {
    display: flex;
    justify-content: center;
    margin-top: 80px;
}

.top-section-our-venture-0-section .block-content-basic .field--name-body p {
    position: relative;
    margin: 0;
    padding-top: 58px;
    text-align: center;
    color: #273145;
    font-family: Lato, sans-serif;
    font-size: 16.6px;
    font-weight: 500;
    line-height: 25.2px;
}

/* arrow above text */
.top-section-our-venture-0-section .block-content-basic .field--name-body p::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 44px;
    height: 44px;
    transform: translateX(-50%);
    background: url("./Down.gif") no-repeat center;
    background-size: contain;
}

/* purple link */
.top-section-our-venture-0-section .block-content-basic .field--name-body a {
    color: #7B2F6A;
    font-family: Lato, sans-serif;
    font-size: 16.6px;
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* fallback arrow (if SVG missing) */
@supports not (background: url("x")) {
    .block-content-basic .field--name-body p::before {
        content: "↓";
        background: none;
        font-size: 34px;
        color: #000;
        width: auto;
        height: auto;
    }
}

/* ==========================================================
   Our Journey section (match screenshot)
   Target: .our-journy-section / block_4
   ========================================================== */

.our-journy-section {
    padding: 70px 0 0px;
}

/* kill bootstrap gutters */
.our-journy-section .row,
.our-journy-section .row>[class*="col-"] {
    margin: 0 !important;
    padding: 0 !important;
}

/* center intro title + paragraph */
.our-journy-section .views-field-field-second-section-text {
    max-width: 980px;
    margin: 0 auto 40px;
    text-align: center;
}

.our-journy-section .views-field-field-second-section-text h1 {
    margin: 0 0 14px;
    color: #151515;
    font-family: Lato;
    font-size: 29.17px;
    font-style: normal;
    font-weight: 700;
    line-height: 43px;
    text-transform: uppercase;
}

.our-journy-section .views-field-field-second-section-text h1 span {
    display: inline-block;
    padding: 6px 10px;
    background: #151515;
    color: #fff;
    line-height: 1;
    border-radius: 2px;
    margin-right: 6px;
}

.our-journy-section .views-field-field-second-section-text p {
    margin: 0 auto;
    color: #5C5C5C;
    text-align: center;
    font-family: Lato;
    font-size: 16.977px;
    font-style: normal;
    font-weight: 400;
    line-height: 26.8px;
}

/* two columns wrapper */
.our-journy-section .paragraph--type--our-ventur-paragraph {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* gap: 34px; */
    align-items: stretch;
    margin-top: 74px;
    width: 100%;
    padding-inline: 54px;
}

.our-journy-section .our-journy-paragraph-wrapper {
    background: #f3f3f3;
    padding: 51px 71px;
    /* border-radius: 4px; */
    height: 100%;
}

/* left card */
.our-journy-section .our-journy-paragraph-wrapper .field--name-field-title {
    color: #222;
    font-family: Lato;
    font-size: 29.293px;
    font-style: normal;
    font-weight: 700;
    line-height: 45.025px;
    margin-bottom: 29px;
    /* 127.575% */
}

.our-journy-section .our-journy-paragraph-wrapper .field--name-field-body {
    color: #464646;
    font-family: Lato;
    font-size: 16.063px;
    font-style: normal;
    font-weight: var(--font-weight-400, 400);
    line-height: 25.326px;
    /* 157.664% */
}

.our-journy-section .our-journy-paragraph-wrapper .field--name-field-body p {
    color: #464646;
    font-family: Lato;
    font-size: 16.063px;
    font-style: normal;
    font-weight: var(--font-weight-400, 400);
    line-height: 25.326px;
    /* 157.664% */
}

.our-journy-section {

    .field.field--name-field-media-image,
    .field.field--name-field-media-image * {
        width: 100%;
        height: 471px;
        object-fit: cover;
    }
}

/* right image */
.our-journy-section .our-journy-paragraph-wrapper .field--name-field-media-image {
    height: 100%;
}

.our-journy-section .our-journy-paragraph-wrapper .field--name-field-media-image img {
    width: 100%;
    height: 100%;
    min-height: 360px;
    object-fit: cover;
    border-radius: 4px;
    display: block;
}

/* responsive */
@media (max-width: 992px) {
    .our-journy-section .our-journy-paragraph-wrapper {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .our-journy-section .views-field-field-second-section-text {
        margin-bottom: 24px;
        padding: 0 14px;
    }

    .our-journy-section .views-field-field-second-section-text h1 {
        font-size: 22px;
    }

    .our-journy-section .our-journy-paragraph-wrapper .field--name-field-media-image img {
        min-height: 260px;
    }
}


/* ==========================================================
   Photo Gallery (Our Ventures block_5) — match screenshot
   ========================================================== */

.photo-gallery-section {
    padding-block: 76px;
}

/* remove gutters */
.photo-gallery-section .row,
.photo-gallery-section .row>[class*="col-"] {
    margin: 0 !important;
    padding: 0 !important;
}

/* grid wrapper (the multi-image field output) */


.photo-gallery-section .views-field-field-images .field-content {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3px;
    align-items: stretch;
    padding-inline: 54px;
}

.page-node-70 .photo-gallery-section .views-field-field-images .field-content {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 3px;
    align-items: stretch;
    padding-inline: 54px;
}

/* each image container (your markup repeats <div> ... <img> ... </div>) */
.photo-gallery-section .views-field-field-images .field-content>div {
    position: relative;
    overflow: hidden;
}

.photo-gallery-section .views-field-field-images .field-content>div * {
    width: 100%;
    height: 400px;
    object-fit: cover;
}

.block-views-blockour-ventures-block-2 .views-field-field-logo-image img {
    height: 123px;
    width: 200px;
    object-fit: contain;
    filter: brightness(9999999);
    -webkit-filter: brightness(9999999);
}

.photo-gallery-section .views-field-field-images img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* responsive */
@media (max-width: 992px) {
    .photo-gallery-section .views-field-field-images .field-content {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
}

@media (max-width: 576px) {
    .photo-gallery-section .views-field-field-images .field-content {
        grid-template-columns: 1fr;
        gap: 10px;
    }
}

.our-venture-friends-word-section {
    .view-friends-word .view-header h2 {
        color: #FFF;
        font-family: Lato;
        font-size: 39.64px;
        font-style: normal;
        font-weight: 700;
        line-height: 69.655px;
        text-align: center;
    }

    .view-friends-word .view-header p {
        color: #FFF;
        font-family: Lato;
        font-size: 29.123px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        letter-spacing: -1.266px;
        text-align: center;
    }

    .view-friends-word {
        background: #000;
    }

    .block-content-basic {
        padding-block: 123px;
        background: #000;
        border-top: 1px solid #ffffff05;

        .bottom-hashim-wrapper {
            display: flex;
            flex-direction: column;
            align-items: center;

            p:nth-child(1) {
                color: var(--hollow-org-uk-white, var(--color-white-solid, #FFF));
                text-align: center;
                font-family: Lato;
                font-size: 41.8px;
                font-style: normal;
                font-weight: 900;
                line-height: 82px;
                text-transform: uppercase;
            }

            p {
                color: var(--hollow-org-uk-white, var(--color-white-solid, #FFF));
                text-align: center;
                font-family: Lato;
                font-size: 24.8px;
                font-style: normal;
                font-weight: 400;
                line-height: 74px;
            }

            h2 {
                color: var(--hollow-org-uk-white, var(--color-white-solid, #FFF));
                font-family: Lato;
                font-size: 76.8px;
                font-style: normal;
                font-weight: 900;
                line-height: 82px;
                text-transform: uppercase;
            }
        }
    }
}

.block-views-blockwhy-choose-z2m-block-2 .view-why-choose-z2m .view-content {
    display: flex;
    flex-direction: column-reverse;
}


/* ===================== LOADER (like image) ===================== */
.page-node-81 {
    background-color: #000;

    .navbar-expand-lg {
        position: absolute;
    }

    header .navbar-brand {
        z-index: 9;
    }

    .site-footer {
        display: none;
    }

    .contact-us-section {
        margin-top: 0;
        position: relative;
        z-index: 99;
    }
}

.site-loader {
    position: fixed;
    inset: 0;
    background: #0b0b0b;
    z-index: 999;
    display: grid;
    place-items: center;
    pointer-events: none;
    transition: all 1s ease;
    -webkit-transition: all 1s ease !important;
    -moz-transition: all 1s ease !important;
    -ms-transition: all 1s ease;
    -o-transition: all 1s ease;

}

.site-loader .loader-center {
    display: grid;
    gap: 9px;
    place-items: center;
    background: url(./dark-logo.svg) no-repeat top center;
    background-size: 87px;
    transition: all 1s ease;
    -webkit-transition: all 1s ease;
    /* filter: contrast(1.5); */
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    -o-transition: all 1s ease;
}

.site-loader .loader-center img {
    width: 86px;
    height: auto;
    opacity: 0;
    transform-origin: center;
    transition: all 1s ease;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    -o-transition: all 1s ease;
    will-change: transform, opacity;
}

.site-loader .loader-percent {

    color: #fff;
    line-height: 1;
    letter-spacing: .5px;
    transition: all 1s ease;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    -o-transition: all 1s ease;
    color: var(--white, #FFF);
    text-align: center;
    font-family: Lato;
    font-size: 31px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

/* ===== END STATE: background disappears, percent fades, logo grows + moves RIGHT ===== */
.site-loader.is-done {
    background: #fff;
    width: 100%;
    transform: translateX(70%);
    left: auto;
    overflow: hidden;
    transition: all 1s ease;
    z-index: 99;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    -o-transition: all 1s ease;
    -webkit-transform: translateX(73%);
    -moz-transform: translateX(70%);
    -ms-transform: translateX(70%);
    -o-transform: translateX(70%);
}

.site-loader.is-done .loader-percent {
    opacity: 0;
    transition: opacity .22s ease;
    -webkit-transition: opacity .22s ease;
    -moz-transition: opacity .22s ease;
    -ms-transition: opacity .22s ease;
    -o-transition: opacity .22s ease;
    font-family: lato;
}

.site-loader.is-done .loader-center img {
    transform: translateX(62vw) scale(11.9);
    opacity: 1;
    transition: transform .7s cubic-bezier(.2, .9, .2, 1);
    transition: all 1s ease !important;
    -webkit-transition: all 1s ease !important;
    -moz-transition: all 1s ease !important;
    -ms-transition: all 1s ease !important;
    -o-transition: all 1s ease !important;
}

/* Responsive tweak */
@media (max-width: 900px) {
    .site-loader.is-done .loader-center img {
        transform: translateX(26vw) scale(1.6);
    }
}

/* ===================== SECTION LAYOUT (your structure unchanged) ===================== */
.front-hero {
    min-height: 100vh;


}

.front-hero__row {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 2.7fr 1fr;
    background: #000;
}

.front-hero__left {
    background: transparent;
    padding: 46px 46px 56px;
    display: grid;
    align-content: center;
}

.front-hero__right {
    background: #fff;
    padding: 46px 46px 56px;
    display: grid;
    position: relative;
    align-content: center;
    z-index: 99;
}

/* Left image card */
.front-page-left-section {
    width: min(760px, 92%);
    margin: 0 auto;
    position: relative;
    border-radius: 2px;
    /* overflow: hidden; */
    box-shadow: 0 30px 80px rgba(0, 0, 0, .35);

    /* background: #fff; */
    .views-field-nothing a {
        /* filter: invert(1) brightness(11.5); */
        color: #fff;
        z-index: 9;
        transform: translateX(-38px);
        -webkit-transform: translateX(-38px);
        -moz-transform: translateX(-38px);
        -ms-transform: translateX(-38px);
        -o-transform: translateX(-38px);
    }

    .views-field-nothing a::before {
        filter: invert(5) brightness(80);
        -webkit-filter: invert(5) brightness(80);
    }


}

.front-page-left-section .views-field-nothing a:hover {
    text-decoration: underline;
}

.front-page-left-section .views-field-nothing a:hover::before {
    filter: unset;
    background: url(./wewe.png) no-repeat center;
    background-size: contain;
    -webkit-filter: unset;
}

.front-page-left-section>img {
    width: 100%;
    height: auto;
    display: block;
}

.front-page-left-section::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0, 0, 0, .85) 0%, rgba(0, 0, 0, .35) 55%, rgba(0, 0, 0, .15) 100%);
    pointer-events: none;
}

.text-front-page-wrapper {
    position: absolute;
    /* left: 42px; */
    top: 36%;
    left: -39px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 33px;
}

.text-front-page-wrapper h2 {
    color: var(--hollow-org-uk-white, var(--color-white-solid, #FFF));
    text-shadow: 0 0 25px #000;
    font-family: Lato;
    font-size: 48.6px;
    font-style: normal;
    font-weight: var(--font-weight-700, 700);
    line-height: var(--line-height-55_2, 55.2px);
    margin: 0 0 12px;
}

.text-front-page-wrapper p {
    margin: 0;
    max-width: 503px;
    color: #FFF;
    font-family: Lato;
    font-size: 17px;
    font-style: normal;
    font-weight: var(--font-weight-400, 400);
    line-height: var(--line-height-26, 26px);
    position: relative;
}

.text-front-page-wrapper p::after {
    position: absolute;
    left: 0;
    bottom: -20px;
    content: "";
    width: 73.91px;
    height: 1px;
    background: #6B6B6B;


}


.front-page-left-section .views-field-field-link {
    position: absolute;
    left: 42px;
    bottom: 34px;
    z-index: 2;
}

/* Links */
.hero-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .2px;
    text-decoration: none;
}

.hero-link__icon {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    font-size: 14px;
    line-height: 1;
}

.hero-link--apply {
    color: rgba(255, 255, 255, .9);
}

.hero-link--apply .hero-link__icon {
    border: 1px solid rgba(255, 255, 255, .25);
    color: rgba(255, 255, 255, .9);
}

.rigth-side-front-page-wrapper {
    width: min(420px, 100%);
    display: flex;
    flex-direction: column;
    gap: 70px;
    margin: 0 auto;
}

.rigth-side-front-page-wrapper .views-field-nothing a:hover::before {
    transform: translateX(174%);
    -webkit-transform: translateX(174%);
    -moz-transform: translateX(174%);
    -ms-transform: translateX(174%);
    -o-transform: translateX(174%);
}

.text-right-wrapper h2 {
    color: #131313;
    font-family: Lato;
    font-size: 17.2px;
    font-style: normal;
    font-weight: 900;
    line-height: normal;
    margin: 0 0 14px;
}

.text-right-wrapper p {
    color: #777;
    font-family: Lato;
    font-size: 16.4px;
    font-style: normal;
    font-weight: 400;
    line-height: 25px;
    margin: 0 0 18px;
    position: relative;
}



.right-divider {
    height: 1px;
    width: 92px;
    background: #e5e7eb;
    margin-top: 4px;
}

.hero-link--go {
    color: #7b2f6a;
}

.hero-link--go .hero-link__icon {
    border: 1px solid rgba(123, 47, 106, .35);
    color: #7b2f6a;
}

/* Responsive */
@media (max-width: 900px) {
    .front-hero__row {
        grid-template-columns: 1fr;
    }

    .front-hero__right {
        min-height: 420px;
    }

    .front-page-left-section {
        width: 100%;
    }

    .text-front-page-wrapper {
        left: 22px;
        bottom: 70px;
    }

    .front-page-left-section .views-field-field-link {
        left: 22px;
    }

    .site-loader.is-done .loader-center img {
        top: 18px;
        left: 18px;
        width: 56px;
    }
}

@media (max-width: 520px) {

    .front-hero__left,
    .front-hero__right {
        padding: 28px 18px;
        height: 100dvh;
    }

    .text-front-page-wrapper h2 {
        font-size: 30px;
    }

    .site-loader .loader-percent {
        font-size: 34px;
    }
}

.page-node-81 {

    .contact-us-section {
        position: fixed;
        inset: 0;
        z-index: 999999;
        visibility: hidden;
        opacity: 0;
        pointer-events: none;
        background: rgb(0, 0, 0);
        transition: all .4s ease;
        -webkit-transition: all .4s ease;
        -moz-transition: all .4s ease;
        -ms-transition: all .4s ease;
        -o-transition: all .4s ease;
    }

    /* slide container: we ONLY move it, we don't restyle inside */
    .contact-us-section>.w-100 {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        transform: translateX(-101%);
        transition: transform .5s cubic-bezier(.2, .9, .2, 1);
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        -webkit-transition: transform .5s cubic-bezier(.2, .9, .2, 1);
        -moz-transition: transform .5s cubic-bezier(.2, .9, .2, 1);
        -ms-transition: transform .5s cubic-bezier(.2, .9, .2, 1);
        -o-transition: transform .5s cubic-bezier(.2, .9, .2, 1);
        background: url(./Layer_1.svg) no-repeat 55px 49px;
        background-size: 119px 37px;
    }

    /* open state */
    .contact-us-section.is-open {
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
    }

    .contact-us-section.is-open>.w-100 {
        transform: translateX(0);
    }

    /* lock page scroll behind */
    body.contact-panel-open {
        overflow: hidden !important;
    }

    .contact-us-section .col-12 {
        max-width: 1280px !important;
        margin: 0 auto;
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 0;
        align-items: center;
        position: absolute;
        inset: 0;
        padding-inline: 0 !important;

    }

    .contact-us-wrapper * {
        color: #fff !important;
    }

    .contact-us-section .block-webform input.form-control,
    .contact-us-section .block-webform textarea.form-control,
    .contact-us-section .block-webform select.form-select {
        filter: invert(2) brightness(4.5);
        -webkit-filter: invert(2) brightness(4.5);
        border-bottom: 1px solid rgb(0 0 0 / 57%) !important;
    }

    .contact-us-section #edit-actions-submit {
        background: #ffffff !important;
        color: #000000 !important;
    }

    .contact-us-section .links-wrapper a:nth-child(2) {
        display: none;
    }

    .contact-us-section #edit-privacy-note p,
    .contact-us-section .block-webform label {
        color: #fff !important;
        ;
    }

    .form-required::after {
        filter: grayscale(1) opacity(3.5) brightness(8.5);
        -webkit-filter: grayscale(1) opacity(3.5) brightness(8.5);
    }

    .contact-us-section .block-webform .form-item-hear-about-us::before {
        border-right: 1px solid rgb(255 255 255 / 55%);
        border-bottom: 1px solid rgb(255 255 255 / 55%);
    }

    .contact-us-section .block-webform .form-item-hear-about-us::after {
        background: rgb(255 255 255 / 6%);
    }

    /* Floating side link – FULL HEIGHT */
    .contact-float-link {
        position: fixed;
        top: 0;
        right: 0;
        height: 100vh;
        /*👈100%ارتفاعالشاشة*/
        background: #ffffff;
        padding: 0 14px;
        writing-mode: vertical-rl;
        text-orientation: mixed;
        font-size: 14px;
        font-weight: 500;
        color: #7b2f6a;
        text-decoration: none;
        z-index: 1000000;
        border-left: 1px solid #eee;
        display: flex;
        /*👇توسيطالنصعموديًا*/
        align-items: center;
        justify-content: center;
        opacity: 0;
        pointer-events: none;
        transition: opacity .4s ease;
        -webkit-transition: opacity .4s ease;
        -moz-transition: opacity .4s ease;
        -ms-transition: opacity .4s ease;
        -o-transition: opacity .4s ease;
    }

    /* visible only when panel is open */
    .contact-float-link.is-visible {
        opacity: 1;
        pointer-events: auto;
        transform: rotate(180deg);
        -webkit-transform: rotate(180deg);
        -moz-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
        -o-transform: rotate(180deg);
    }

}


/* Wrapper */
.privacy-policy {
    font-family: inherit;
    color: #1F1F1F;
}

/* Main title */
.privacy-policy__title {
    font-size: 48px;
    font-weight: 700;
    line-height: 1.15;
    color: #1F1F1F;
    margin-bottom: 12px;
}

/* Last modified */
.privacy-policy__meta {
    font-size: 14px;
    color: #6B7280;
}

/* Section headings (H2) */
.privacy-policy__heading {
    font-size: 28px;
    font-weight: 700;
    color: #7B2F6A;
    /* البنفسجي */
    margin: 48px 0 16px;
}

/* Sub headings (H3 / H4) */
.privacy-policy__subheading {
    font-size: 20px;
    font-weight: 600;
    color: #1F1F1F;
    margin: 24px 0 12px;
}

.privacy-policy__subheading--small {
    font-size: 16px;
}

/* Paragraphs */
.privacy-policy__text {
    font-size: 16px;
    line-height: 1.8;
    color: #2B2B2B;
    margin-bottom: 16px;
}

/* Inline text */
.privacy-policy__text-inline {
    color: #2B2B2B;
}

/* Lists */
.privacy-policy__list {
    padding-left: 20px;
    margin: 16px 0 24px;
}

.privacy-policy__list-item {
    font-size: 16px;
    line-height: 1.8;
    margin-bottom: 8px;
    color: #2B2B2B;
}

/* Labels / emphasis */
.privacy-policy__label,
.privacy-policy__brand {
    font-weight: 600;
    color: #1F1F1F;
}

/* Links */
.privacy-policy a,
.privacy-policy__link {
    color: #7B2F6A;
    text-decoration: none;
    font-weight: 500;
}

.privacy-policy__link:hover {
    text-decoration: underline;
}

/* Highlight boxes */
.privacy-policy__box {
    background: #FAF7F9;
    border-left: 4px solid #7B2F6A;
    padding: 16px 20px;
    margin: 24px 0;
}

/* Notices */
.privacy-policy__notice {
    background: #F5F5F5;
    padding: 16px 20px;
    margin: 24px 0;
}

.privacy-policy__notice--warning {
    background: #FFF5F5;
    border-left: 4px solid #B91C1C;
}

/* Placeholder text مثل [CONTACT] */
.privacy-policy__placeholder {
    color: #7B2F6A;
    font-weight: 600;
}

.privacy-policy {
    padding: 50px 156px 80px 66px;
}

.page-node-82 .block-views-blockcustom-breadcrumb-block-1 {
    display: none;
}