.elementor-163 .elementor-element.elementor-element-d995a4c{--display:flex;--min-height:0px;}.elementor-163 .elementor-element.elementor-element-0afe7c3{--display:flex;}:root{--page-title-display:none;}/* Start custom CSS for html, class: .elementor-element-2a67912 *//* =====================================================
   TABAH UI 003
   CINEMATIC HERO
   PHASE 2 - FOUNDATION
===================================================== */

#tb3{

    position:relative;

    width:100%;

    min-height:100svh;

    min-height:900px;

    overflow:hidden;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#06392F;

}


/*=====================================================
BACKGROUND IMAGE
=====================================================*/

#tb3 .tb3-bg{

    position:absolute;

    inset:0;

    z-index:1;

}

#tb3 .tb3-bg img{

    width:100%;

    height:100%;

    object-fit:cover;

    object-position:center;

    display:block;

}


/*=====================================================
EMERALD OVERLAY
=====================================================*/

#tb3 .tb3-overlay{

    position:absolute;

    inset:0;

    z-index:2;

    background:

        radial-gradient(

            ellipse at center,

            rgba(6,57,47,.18) 0%,

            rgba(6,57,47,.38) 25%,

            rgba(6,57,47,.62) 50%,

            rgba(6,57,47,.82) 100%

        ),

        linear-gradient(

            to bottom,

            rgba(6,57,47,.72) 0%,

            rgba(6,57,47,.46) 25%,

            rgba(6,57,47,.38) 50%,

            rgba(6,57,47,.50) 75%,

            rgba(6,57,47,.82) 100%

        );

}


/*=====================================================
CONTENT CONTAINER
=====================================================*/

#tb3 .tb3-container{

    position:relative;

    z-index:5;

    width:100%;

    max-width:720px;

    padding:120px 40px;

    margin:auto;

    text-align:center;

}


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

#tb3 .tb3-logo{

    margin-bottom:40px;

}

#tb3 .tb3-logo img{

    width:120px;

    height:auto;

    display:block;

    margin:auto;

}


/*=====================================================
TAGLINE
=====================================================*/

#tb3 .tb3-tagline{

    color:#C9A34B;

    font-size:14px;

    font-weight:500;

    letter-spacing:4px;

    text-transform:uppercase;

    margin-bottom:55px;

}


/*=====================================================
HEADING
=====================================================*/

#tb3 .tb3-title{

    margin:0;

    color:#FFFFFF;

    font-size:96px;

    font-weight:400;

    line-height:1;

    letter-spacing:-1px;

    margin-bottom:40px;

}


/*=====================================================
DIVIDER
=====================================================*/

#tb3 .tb3-divider{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:18px;

    margin-bottom:55px;

}

#tb3 .tb3-line{

    width:120px;

    height:1px;

    background:#C9A34B;

}

#tb3 .tb3-diamond{

    width:12px;

    height:12px;

    background:#C9A34B;

    transform:rotate(45deg);

}


/*=====================================================
DESCRIPTION
=====================================================*/

#tb3 .tb3-description{

    max-width:640px;

    margin:0 auto 65px;

    color:rgba(255,255,255,.94);

    font-size:22px;

    line-height:1.9;

    font-weight:300;

}


/*=====================================================
ACTIONS
=====================================================*/

#tb3 .tb3-actions{

    display:flex;

    justify-content:center;

}


/*=====================================================
SECTION FADE
=====================================================*/

#tb3::after{

    content:"";

    position:absolute;

    left:0;

    bottom:0;

    width:100%;

    height:180px;

    background:

        linear-gradient(
            to bottom,
            rgba(252,250,246,0) 0%,
            rgba(252,250,246,.20) 45%,
            rgba(252,250,246,.55) 70%,
            #FCFAF6 100%
        );

    z-index:3;

}


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

@media(max-width:1024px){

#tb3{

min-height:850px;

}

#tb3 .tb3-container{

max-width:650px;

padding:110px 40px;

}

#tb3 .tb3-title{

font-size:74px;

}

#tb3 .tb3-description{

font-size:20px;

}

}


@media(max-width:768px){

#tb3{

min-height:760px;

}

#tb3 .tb3-container{

padding:90px 28px;

}

#tb3 .tb3-logo img{

width:90px;

}

#tb3 .tb3-tagline{

font-size:12px;

letter-spacing:3px;

margin-bottom:40px;

}

#tb3 .tb3-title{

font-size:52px;

margin-bottom:30px;

}

#tb3 .tb3-divider{

margin-bottom:40px;

gap:14px;

}

#tb3 .tb3-line{

width:70px;

}

#tb3 .tb3-diamond{

width:10px;

height:10px;

}

#tb3 .tb3-description{

font-size:17px;

line-height:1.8;

margin-bottom:50px;

}

}

/* =====================================================
   TABAH UI 003
   CINEMATIC HERO
   PHASE 3 - COMPONENTS
=====================================================*/


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

#tb3 .tb3-button{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:18px;

    min-width:300px;

    height:64px;

    padding:0 34px;

    background:#C9A34B;

    color:#06392F;

    text-decoration:none;

    text-transform:uppercase;

    letter-spacing:2px;

    font-size:13px;

    font-weight:700;

    border-radius:100px;

    border:1px solid rgba(255,255,255,.15);

    backdrop-filter:blur(8px);

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

    box-shadow:
        0 12px 35px rgba(0,0,0,.18);

}


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

#tb3 .tb3-arrow{

    display:flex;

    align-items:center;

    justify-content:center;

    width:26px;

    height:26px;

    transition:transform .35s ease;

}

#tb3 .tb3-arrow svg{

    width:18px;

    height:18px;

}


/*=====================================================
BUTTON HOVER
=====================================================*/

#tb3 .tb3-button:hover{

    background:#D7B35A;

    transform:translateY(-4px);

    box-shadow:
        0 18px 45px rgba(0,0,0,.28);

}

#tb3 .tb3-button:hover .tb3-arrow{

    transform:translateX(5px);

}

#tb3 .tb3-button:active{

    transform:translateY(-1px);

}


/*=====================================================
SCROLL INDICATOR
=====================================================*/

#tb3 .tb3-scroll{

    position:absolute;

    left:%;

    bottom:40px;

    transform:translateX(0%);

    z-index:20;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-align:center;

    width:120px;

    text-decoration:none;

}

#tb3 .tb3-scroll:hover{

    opacity:.8;

}


/*=====================================================
SCROLL TEXT
=====================================================*/

#tb3 .tb3-scroll-text{

    font-size:11px;

    text-transform:uppercase;

    letter-spacing:4px;

    color:#FFFFFF;

}


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

#tb3 .tb3-scroll-icon{

    display:block;

    width:100%;

    text-align:center;

    font-size:22px;

    line-height:1;

    margin-top:8px;

}


/*=====================================================
FOCUS STATES
=====================================================*/

#tb3 .tb3-button:focus-visible,

#tb3 .tb3-scroll:focus-visible{

    outline:2px solid #C9A34B;

    outline-offset:6px;

}


/*=====================================================
MICRO DETAILS
=====================================================*/

#tb3 .tb3-logo img{

    filter:

        drop-shadow(0 8px 18px rgba(0,0,0,.28));

}

#tb3 .tb3-title{

    text-shadow:

        0 8px 30px rgba(0,0,0,.22);

}

#tb3 .tb3-description{

    text-shadow:

        0 2px 12px rgba(0,0,0,.18);

}


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

@media(max-width:768px){

#tb3 .tb3-button{

    min-width:260px;

    height:58px;

    padding:0 28px;

    font-size:12px;

    letter-spacing:1.8px;

}

#tb3 .tb3-scroll{

    bottom:28px;

}

#tb3 .tb3-scroll-text{

    letter-spacing:3px;

}

}

/* =====================================================
   TABAH UI 003
   CINEMATIC HERO
   PHASE 4 - MOTION
=====================================================*/


/*=====================================================
SMOOTH SCROLL
=====================================================*/

html{

    scroll-behavior:smooth;

}


/*=====================================================
INITIAL STATES
=====================================================*/

#tb3 .tb3-logo,
#tb3 .tb3-tagline,
#tb3 .tb3-title,
#tb3 .tb3-divider,
#tb3 .tb3-description,
#tb3 .tb3-actions,
#tb3 .tb3-scroll{

    opacity:0;

    transform:translateY(25px);

}


/*=====================================================
ANIMATION TIMINGS
=====================================================*/

#tb3 .tb3-logo{

    animation:tb3Fade .9s ease forwards;

    animation-delay:.2s;

}

#tb3 .tb3-tagline{

    animation:tb3Fade .9s ease forwards;

    animation-delay:.35s;

}

#tb3 .tb3-title{

    animation:tb3Fade .9s ease forwards;

    animation-delay:.5s;

}

#tb3 .tb3-divider{

    animation:tb3Fade .9s ease forwards;

    animation-delay:.65s;

}

#tb3 .tb3-description{

    animation:tb3Fade .9s ease forwards;

    animation-delay:.8s;

}

#tb3 .tb3-actions{

    animation:tb3Fade .9s ease forwards;

    animation-delay:.95s;

}

#tb3 .tb3-scroll{

    animation:tb3Fade .9s ease forwards;

    animation-delay:1.3s;

}


/*=====================================================
MAIN FADE
=====================================================*/

@keyframes tb3Fade{

    from{

        opacity:0;

        transform:translateY(25px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


/*=====================================================
FLOATING SCROLL INDICATOR
=====================================================*/

#tb3 .tb3-scroll-icon{

    animation:tb3Float 2.8s ease-in-out infinite;

}

@keyframes tb3Float{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(8px);

    }

    100%{

        transform:translateY(0);

    }

}


/*=====================================================
BACKGROUND PARALLAX PREPARATION
=====================================================*/

#tb3 .tb3-bg{

    will-change:transform;

}


/*=====================================================
BUTTON GLOW
=====================================================*/

#tb3 .tb3-button{

    position:relative;

    overflow:hidden;

}

#tb3 .tb3-button::before{

    content:"";

    position:absolute;

    inset:0;

    background:

        linear-gradient(

            120deg,

            transparent 25%,

            rgba(255,255,255,.25) 50%,

            transparent 75%

        );

    transform:translateX(-140%);

    transition:transform .9s ease;

}

#tb3 .tb3-button:hover::before{

    transform:translateX(140%);

}


/*=====================================================
REDUCED MOTION
=====================================================*/

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

*{

animation:none !important;

transition:none !important;

scroll-behavior:auto !important;

}

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-9a1f07b *//* =====================================================
   TABAH UI 010
   PART 2A - CSS
===================================================== */

#tb10{

    padding:120px 0;

    background:#FCFAF6;

}

#tb10 *{

    box-sizing:border-box;

}

#tb10 .tb10-container{

    width:min(1400px,92%);
    margin:auto;

}


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

#tb10 .tb10-header{

    max-width:820px;

    margin:0 auto 90px;

    text-align:center;

}

#tb10 .tb10-eyebrow{

    display:inline-block;

    margin-bottom:18px;

    font-size:12px;

    font-weight:600;

    letter-spacing:4px;

    text-transform:uppercase;

    color:#C7A15B;

}

#tb10 .tb10-header h2{

    margin:0;

    font-family:"Cormorant Garamond",serif;

    font-size:68px;

    font-weight:600;

    line-height:1.02;

    color:#12493F;

}

#tb10 .tb10-divider{

    width:90px;

    height:2px;

    margin:32px auto;

    background:#C7A15B;

    border-radius:999px;

}

#tb10 .tb10-header p{

    max-width:760px;

    margin:0 auto;

    font-size:18px;

    line-height:1.85;

    color:#5F6670;

}


/*=====================================================
GRID
=====================================================*/

#tb10 .tb10-grid{

    display:grid;

    grid-template-columns:repeat(2,minmax(420px,560px));

    justify-content:center;

    gap:40px;

    align-items:start;

}


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

#tb10 .tb10-card{

    background:#FFFFFF;

    border-radius:28px;

    border:1px solid transparent;

    overflow:hidden;

    box-shadow:

        0 10px 35px rgba(0,0,0,.05);

    transition:

        transform .35s ease,

        box-shadow .35s ease,

        border-color .35s ease;

}

#tb10 .tb10-card:hover{

    transform:translateY(-8px);

    border-color:#C7A15B;

    box-shadow:

        0 25px 60px rgba(0,0,0,.08);

}


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

#tb10 .tb10-toggle{

    width:100%;

    padding:34px;

    display:flex;

    flex-direction:column;

    align-items:center;

    text-align:center;

    border:none;

    background:none;

    cursor:pointer;

}

#tb10 .tb10-category{

    margin-bottom:16px;

    font-size:11px;

    font-weight:600;

    letter-spacing:3px;

    text-transform:uppercase;

    color:#C7A15B;

}

#tb10 .tb10-toggle h3{

    margin:0;

    max-width:320px;

    font-family:"Cormorant Garamond",serif;

    font-size:36px;

    line-height:1.05;

    font-weight:600;

    color:#12493F;

}

#tb10 .tb10-view{

    display:flex;

    align-items:center;

    gap:10px;

    margin-top:28px;

    font-size:15px;

    font-weight:600;

    color:#12493F;

    transition:.3s;

}

#tb10 .tb10-toggle:hover .tb10-view{

    color:#C7A15B;

}

#tb10 .tb10-arrow{

    transition:transform .35s ease;

}


/*=====================================================
EXPANDABLE AREA
=====================================================*/

#tb10 .tb10-expand{

    display:grid;

    grid-template-rows:0fr;

    transition:grid-template-rows .45s ease;

}

#tb10 .tb10-card.active .tb10-expand{

    grid-template-rows:1fr;

}

#tb10 .tb10-body{

    overflow:hidden;

    padding:0 34px;

    opacity:0;

    transform:translateY(-10px);

    transition:

        opacity .30s ease,

        transform .30s ease;

}

#tb10 .tb10-card.active .tb10-body{

    padding:0 34px 34px;

    opacity:1;

    transform:translateY(0);

}

/*=====================================================
DESCRIPTION
=====================================================*/

#tb10 .tb10-description{

    margin:0;

    font-size:16px;

    line-height:1.75;

    color:#5F6670;

}


/*=====================================================
SECTIONS
=====================================================*/

#tb10 .tb10-section{

    margin-top:28px;

    padding-top:22px;

    border-top:1px solid #E8E3DA;

}

#tb10 .tb10-section h4{

    margin:0 0 12px;

    font-size:12px;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

    color:#12493F;

}


/*=====================================================
LISTS
=====================================================*/

#tb10 .tb10-section ul{

    margin:0;

    padding:0;

    list-style:none;

}

#tb10 .tb10-section li{

    position:relative;

    padding-left:18px;

    margin-bottom:8px;

    font-size:15px;

    line-height:1.5;

    color:#5F6670;

}

#tb10 .tb10-section li:last-child{

    margin-bottom:0;

}

#tb10 .tb10-section li::before{

    content:"";

    position:absolute;

    left:0;

    top:9px;

    width:6px;

    height:6px;

    border-radius:50%;

    background:#C7A15B;

}


/*=====================================================
LOCATION
=====================================================*/

#tb10 .tb10-location{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

}

#tb10 .tb10-location span{

    display:flex;

    align-items:center;

    gap:8px;

    color:#5F6670;

    font-size:15px;

}

#tb10 .tb10-location i{

    color:#C7A15B;

}


/*=====================================================
INFO
=====================================================*/

#tb10 .tb10-info{

    display:grid;

    grid-template-columns:1fr 1fr;

    margin-top:28px;

    border-top:1px solid #E8E3DA;

    border-bottom:1px solid #E8E3DA;

}

#tb10 .tb10-info div{

    padding:20px 16px;

}

#tb10 .tb10-info div:first-child{

    border-right:1px solid #E8E3DA;

}

#tb10 .tb10-info strong{

    display:block;

    margin-bottom:6px;

    font-size:24px;

    font-weight:700;

    color:#12493F;

}

#tb10 .tb10-info span{

    display:block;

    font-size:11px;

    font-weight:600;

    letter-spacing:2px;

    text-transform:uppercase;

    color:#7A8087;

}


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

#tb10 .tb10-button{

    display:flex;

    justify-content:center;

    align-items:center;

    width:100%;

    height:56px;

    margin-top:24px;

    border:2px solid #12493F;

    border-radius:999px;

    background:#FFFFFF;

    color:#12493F;

    text-decoration:none;

    font-size:15px;

    font-weight:600;

    transition:.3s ease;

}

#tb10 .tb10-button:hover{

    background:#12493F;

    color:#FFFFFF;

}


/*=====================================================
ACTIVE STATES
=====================================================*/

#tb10 .tb10-card.active .tb10-arrow{

    transform:rotate(180deg);

}

#tb10 .tb10-card.active .tb10-view-text{

    content:"Show Less";

}


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

@media (max-width:1200px){

#tb10 .tb10-grid{

    grid-template-columns:repeat(2,minmax(320px,1fr));

    justify-content:center;

}

}

@media (max-width:768px){

#tb10{

    padding:90px 0;

}

#tb10 .tb10-header{

    margin-bottom:60px;

}

#tb10 .tb10-header h2{

    font-size:48px;

}

#tb10 .tb10-grid{

    grid-template-columns:1fr;

}

#tb10 .tb10-toggle{

    padding:26px;

}

#tb10 .tb10-toggle h3{

    font-size:32px;

}

#tb10 .tb10-body{

    padding:0 26px;

}

#tb10 .tb10-card.active .tb10-body{

    padding:0 26px 26px;

}

#tb10 .tb10-info{

    grid-template-columns:1fr;

}

#tb10 .tb10-info div:first-child{

    border-right:none;

    border-bottom:1px solid #E8E3DA;

}

}/* End custom CSS */