.elementor-13 .elementor-element.elementor-element-18c9f1b8{--display:flex;--min-height:105px;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:5px 5px;--row-gap:5px;--column-gap:5px;--overflow:auto;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;--z-index:99;}.elementor-13 .elementor-element.elementor-element-18c9f1b8:not(.elementor-motion-effects-element-type-background), .elementor-13 .elementor-element.elementor-element-18c9f1b8 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#000000;}.elementor-13 .elementor-element.elementor-element-1b5c6d6{--display:flex;--min-height:105px;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-between;--align-items:center;--gap:5px 5px;--row-gap:5px;--column-gap:5px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-13 .elementor-element.elementor-element-1b5c6d6:not(.elementor-motion-effects-element-type-background), .elementor-13 .elementor-element.elementor-element-1b5c6d6 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-13 .elementor-element.elementor-element-77af02f{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-13 .elementor-element.elementor-element-77af02f.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-13 .elementor-element.elementor-element-32499380 img{width:100%;}.elementor-13 .elementor-element.elementor-element-1fa3f18{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-13 .elementor-element.elementor-element-1fa3f18.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-13 .elementor-element.elementor-element-697d1f1b img{width:100%;}.elementor-13 .elementor-element.elementor-element-72ecb6ce{--display:flex;--justify-content:center;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-widget-nav-menu .elementor-nav-menu .elementor-item{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item{color:var( --e-global-color-text );fill:var( --e-global-color-text );}.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item:hover,
					.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item.elementor-item-active,
					.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item.highlighted,
					.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item:focus{color:var( --e-global-color-accent );fill:var( --e-global-color-accent );}.elementor-widget-nav-menu .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:before,
					.elementor-widget-nav-menu .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:after{background-color:var( --e-global-color-accent );}.elementor-widget-nav-menu .e--pointer-framed .elementor-item:before,
					.elementor-widget-nav-menu .e--pointer-framed .elementor-item:after{border-color:var( --e-global-color-accent );}.elementor-widget-nav-menu{--e-nav-menu-divider-color:var( --e-global-color-text );}.elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-item, .elementor-widget-nav-menu .elementor-nav-menu--dropdown  .elementor-sub-item{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-13 .elementor-element.elementor-element-4f4d37db .elementor-menu-toggle{margin:0 auto;}.elementor-13 .elementor-element.elementor-element-4f4d37db .elementor-nav-menu .elementor-item{font-family:"Manrope", Sans-serif;font-weight:500;}.elementor-13 .elementor-element.elementor-element-4f4d37db .elementor-nav-menu--main .elementor-item{color:#000000;fill:#000000;}.elementor-13 .elementor-element.elementor-element-3c73c658{--display:flex;--justify-content:center;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-widget-button .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-13 .elementor-element.elementor-element-3be0a53c .elementor-button{background-color:#74A357;font-family:"Manrope", Sans-serif;font-weight:600;border-radius:7px 7px 7px 7px;}.elementor-13 .elementor-element.elementor-element-3be0a53c .elementor-button-content-wrapper{flex-direction:row-reverse;}.elementor-widget-icon.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-primary );}.elementor-widget-icon.elementor-view-framed .elementor-icon, .elementor-widget-icon.elementor-view-default .elementor-icon{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-widget-icon.elementor-view-framed .elementor-icon, .elementor-widget-icon.elementor-view-default .elementor-icon svg{fill:var( --e-global-color-primary );}.elementor-13 .elementor-element.elementor-element-84d4cb8 .elementor-icon-wrapper{text-align:center;}.elementor-13 .elementor-element.elementor-element-84d4cb8.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-f96d07f );}.elementor-13 .elementor-element.elementor-element-84d4cb8.elementor-view-framed .elementor-icon, .elementor-13 .elementor-element.elementor-element-84d4cb8.elementor-view-default .elementor-icon{color:var( --e-global-color-f96d07f );border-color:var( --e-global-color-f96d07f );}.elementor-13 .elementor-element.elementor-element-84d4cb8.elementor-view-framed .elementor-icon, .elementor-13 .elementor-element.elementor-element-84d4cb8.elementor-view-default .elementor-icon svg{fill:var( --e-global-color-f96d07f );}.elementor-13 .elementor-element.elementor-element-84d4cb8 .elementor-icon-wrapper svg{width:auto;}.elementor-theme-builder-content-area{height:400px;}.elementor-location-header:before, .elementor-location-footer:before{content:"";display:table;clear:both;}@media(max-width:1024px){.elementor-13 .elementor-element.elementor-element-3c73c658{--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}}@media(min-width:768px){.elementor-13 .elementor-element.elementor-element-77af02f{--width:25%;}.elementor-13 .elementor-element.elementor-element-1fa3f18{--width:25%;}}@media(max-width:1024px) and (min-width:768px){.elementor-13 .elementor-element.elementor-element-77af02f{--width:50%;}.elementor-13 .elementor-element.elementor-element-1fa3f18{--width:50%;}.elementor-13 .elementor-element.elementor-element-3c73c658{--width:50%;}}@media(max-width:767px){.elementor-13 .elementor-element.elementor-element-77af02f{--width:40%;}.elementor-13 .elementor-element.elementor-element-1fa3f18{--width:40%;}.elementor-13 .elementor-element.elementor-element-3c73c658{--width:60%;--gap:5px 5px;--row-gap:5px;--column-gap:5px;}.elementor-13 .elementor-element.elementor-element-3c73c658.e-con{--align-self:center;}.elementor-13 .elementor-element.elementor-element-3be0a53c .elementor-button{padding:5px 5px 5px 5px;}.elementor-13 .elementor-element.elementor-element-84d4cb8.elementor-element{--align-self:center;}.elementor-13 .elementor-element.elementor-element-84d4cb8 .elementor-icon-wrapper{text-align:center;}.elementor-13 .elementor-element.elementor-element-84d4cb8 .elementor-icon{font-size:29px;}.elementor-13 .elementor-element.elementor-element-84d4cb8 .elementor-icon svg{height:29px;}}/* Start custom CSS for container, class: .elementor-element-77af02f *//* ============================================================
   TASTE OF THE ISLAND
   COMPLETE FINAL HEADER CSS — MOBILE CIRCLE + ICON FIX
   ============================================================

   CLASSES:

   Header       = toi-header
   Inner Row    = toi-row
   Large Logo   = toi-logo-large
   Small Logo   = toi-logo-small
   Menu Parent  = toi-menu
   Button Parent= toi-book

============================================================ */


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

:root{

    --toi-bg: #ffffff;

    --toi-header-h: 110px;

    /* Logo current left spacing */
    --toi-logo-left: 55px;

    /* Button right spacing */
    --toi-button-right: 55px;

}


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

.toi-header{

    width: 100% !important;

    height: var(--toi-header-h) !important;
    min-height: var(--toi-header-h) !important;

    background: var(--toi-bg) !important;

    position: fixed !important;

    top: 0 !important;
    left: 0 !important;
    right: 0 !important;

    z-index: 99999 !important;

    overflow: visible !important;

    transform: translate3d(0,0,0);

    transition:
        transform .42s cubic-bezier(.22,.61,.36,1),
        box-shadow .28s ease !important;

}


/* WordPress Admin Bar */

body.admin-bar .toi-header{

    top: 32px !important;

}


/* Don't cut hanging circle */

.elementor-location-header,
.elementor-location-header .e-con,
.elementor-location-header .e-con-inner,
.toi-header,
.toi-header.e-con,
.toi-header > .e-con-inner,
.toi-header .toi-row,
.toi-row,
.toi-row.e-con,
.toi-row > .e-con-inner,
.toi-logo-large,
.toi-logo-large.e-con,
.toi-logo-large > .e-con-inner{

    overflow: visible !important;

}


/* ============================================================
   INNER HEADER ROW
============================================================ */

.toi-row{

    width: 100% !important;
    max-width: none !important;

    height: var(--toi-header-h) !important;
    min-height: var(--toi-header-h) !important;

    margin: 0 !important;
    padding: 0 !important;

    box-sizing: border-box !important;

    position: relative !important;

    display: block !important;

    overflow: visible !important;

}


/* ============================================================
   LARGE LOGO AREA
   TOP STATE
============================================================ */

.toi-logo-large{

    position: absolute !important;

    left: var(--toi-logo-left) !important;
    top: 0 !important;

    /*
       Larger area again
    */

    width: 245px !important;
    min-width: 245px !important;
    max-width: 245px !important;

    height: var(--toi-header-h) !important;
    min-height: var(--toi-header-h) !important;
    max-height: var(--toi-header-h) !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;

    border: none !important;
    border-radius: 0 !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    overflow: visible !important;

    opacity: 1;

    z-index: 40 !important;

    pointer-events: auto;

    transform: translate3d(0,0,0);

    transition:
        opacity .30s ease,
        transform .38s cubic-bezier(.22,.61,.36,1) !important;

}


/* ============================================================
   LARGE HANGING HALF-CIRCLE
============================================================ */

.toi-logo-large::before{

    content: "";

    position: absolute !important;

    /*
       Bigger circle
       230 × 115 = exact half circle
    */

    width: 230px !important;
    height: 115px !important;

    left: 50% !important;

    /*
       Header = 110px
       Circle starts inside header,
       so it looks attached.
    */

    top: 63px !important;

    margin-left: -115px !important;

    background: var(--toi-bg) !important;

    border-radius:
        0 0
        115px 115px !important;

    opacity: 1;

    pointer-events: none;

    z-index: 5 !important;

    transform: translate3d(0,0,0);

    transition:
        opacity .28s ease,
        transform .38s cubic-bezier(.22,.61,.36,1) !important;

}


/* ============================================================
   LARGE LOGO WIDGET RESET
============================================================ */

.toi-logo-large .elementor-widget-image,
.toi-logo-large .elementor-widget-theme-site-logo{

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    position: relative !important;

    /*
       Logo centered around header/circle join
    */

    top: 17px !important;

    z-index: 10 !important;

}


.toi-logo-large .elementor-widget-container{

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

}


.toi-logo-large img{

    display: block !important;

    width: 160px !important;
    max-width: 160px !important;

    height: auto !important;

    margin: 0 auto !important;

    object-fit: contain !important;

    transform: none !important;

    backface-visibility: hidden;

}


/* ============================================================
   SMALL NORMAL LOGO
   COMPACT SCROLL STATE
============================================================ */

.toi-logo-small{

    position: absolute !important;

    left: var(--toi-logo-left) !important;
    top: 0 !important;

    width: 150px !important;
    min-width: 150px !important;
    max-width: 150px !important;

    height: var(--toi-header-h) !important;
    min-height: var(--toi-header-h) !important;
    max-height: var(--toi-header-h) !important;

    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    background: transparent !important;

    opacity: 0;

    pointer-events: none;

    z-index: 35 !important;

    transform: translate3d(0,5px,0);

    transition:
        opacity .30s ease,
        transform .38s cubic-bezier(.22,.61,.36,1) !important;

}


.toi-logo-small .elementor-widget-image,
.toi-logo-small .elementor-widget-theme-site-logo,
.toi-logo-small .elementor-widget-container{

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

}


.toi-logo-small .elementor-widget-container{

    height: var(--toi-header-h) !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

}


.toi-logo-small img{

    display: block !important;

    width: 115px !important;
    max-width: 115px !important;

    height: auto !important;

    margin: 0 auto !important;

    object-fit: contain !important;

    transform: none !important;

}


/* ============================================================
   DESKTOP MENU
   TRUE CENTER
============================================================ */

@media (min-width:1025px){

    .toi-menu{

        position: absolute !important;

        left: 50% !important;
        top: 50% !important;

        transform:
            translate(-50%,-50%) !important;

        width: max-content !important;
        min-width: 0 !important;
        max-width: max-content !important;

        height: auto !important;
        min-height: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        flex: none !important;

        z-index: 60 !important;

        --width: auto !important;
        --flex-grow: 0 !important;
        --flex-shrink: 0 !important;

    }


    .toi-menu.e-con{

        width: max-content !important;
        max-width: max-content !important;

        min-height: 0 !important;

        flex: none !important;

    }


    .toi-menu > .e-con-inner{

        width: max-content !important;
        max-width: max-content !important;

        margin: 0 !important;
        padding: 0 !important;

        display: flex !important;

        flex-direction: row !important;
        flex-wrap: nowrap !important;

        align-items: center !important;
        justify-content: center !important;

    }


    /* Menu widget */

    .toi-menu .elementor-widget-nav-menu,
    .toi-menu .elementor-widget-n-menu,
    .toi-menu .elementor-widget-wordpress-menu{

        width: max-content !important;
        max-width: max-content !important;

        margin: 0 !important;
        padding: 0 !important;

        flex: none !important;

    }


    .toi-menu .elementor-widget-container{

        width: max-content !important;
        max-width: max-content !important;

        margin: 0 !important;
        padding: 0 !important;

    }


    .toi-menu
    .elementor-nav-menu--main{

        width: max-content !important;
        max-width: max-content !important;

    }


    .toi-menu
    .elementor-nav-menu--main
    .elementor-nav-menu{

        width: max-content !important;

        margin: 0 !important;
        padding: 0 !important;

        display: flex !important;

        flex-direction: row !important;
        flex-wrap: nowrap !important;

        align-items: center !important;
        justify-content: center !important;

    }


    .toi-menu
    .elementor-nav-menu--main
    .elementor-nav-menu > li{

        width: auto !important;

        margin: 0 !important;

        flex: 0 0 auto !important;

        position: relative !important;

    }


    .toi-menu
    .elementor-nav-menu--main
    .elementor-item{

        padding:
            13px 21px !important;

        margin: 0 !important;

        white-space: nowrap !important;

        line-height: 1.2 !important;

    }


    /* Separators */

    .toi-menu
    .elementor-nav-menu--main
    .elementor-nav-menu > li:not(:last-child)::after{

        content: "";

        position: absolute;

        width: 1px;
        height: 18px;

        right: 0;
        top: 50%;

        transform: translateY(-50%);

        background:
            rgba(255,255,255,.35);

    }

}


/* ============================================================
   BOOK NOW PARENT
   VERTICAL CENTER + RIGHT GAP
============================================================ */

.toi-book{

    position: absolute !important;

    right: var(--toi-button-right) !important;

    /*
       Instead of top:50 + translate,
       give full header height.
       Much more stable in Elementor.
    */

    top: 0 !important;
    bottom: auto !important;

    width: max-content !important;
    min-width: 0 !important;
    max-width: max-content !important;

    height: var(--toi-header-h) !important;
    min-height: var(--toi-header-h) !important;
    max-height: var(--toi-header-h) !important;

    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;

    flex-direction: row !important;

    align-items: center !important;
    justify-content: center !important;

    flex: none !important;

    transform: none !important;

    z-index: 60 !important;

    --width: auto !important;
    --flex-grow: 0 !important;
    --flex-shrink: 0 !important;

}


/* Elementor parent */

.toi-book.e-con{

    width: max-content !important;
    max-width: max-content !important;

    height: var(--toi-header-h) !important;
    min-height: var(--toi-header-h) !important;
    max-height: var(--toi-header-h) !important;

    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    flex: none !important;

}


/* Parent inner */

.toi-book > .e-con-inner{

    width: max-content !important;

    height: 100% !important;
    min-height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;

    flex-direction: row !important;

    align-items: center !important;
    justify-content: center !important;

}


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

.toi-book .elementor-widget-button{

    width: max-content !important;
    max-width: max-content !important;

    height: auto !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    position: static !important;

    align-self: center !important;

    flex: none !important;

    transform: none !important;

}


.toi-book
.elementor-widget-button
.elementor-widget-container{

    width: max-content !important;

    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    position: static !important;

}


/* Actual button */

.toi-book .elementor-button{

    width: auto !important;

    min-width: 155px !important;
    min-height: 52px !important;

    margin: 0 !important;

    padding:
        0 25px !important;

    display: inline-flex !important;

    align-items: center !important;
    justify-content: center !important;

    line-height: 1 !important;

    white-space: nowrap !important;

    border-radius: 5px !important;

    transform: none !important;

}


/* Button wrapper */

.toi-book .elementor-button-wrapper{

    width: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

}


/* Button content */

.toi-book
.elementor-button-content-wrapper{

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    line-height: 1 !important;

}


/* Text */

.toi-book
.elementor-button-text{

    margin: 0 !important;
    padding: 0 !important;

    line-height: 1 !important;

}

/* ============================================================
   BOOK NOW ICON
   Keep the circular arrow perfectly centered
============================================================ */

.toi-book
.elementor-button-content-wrapper{

    gap: 7px !important;

}

.toi-book
.elementor-button-icon{

    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;

    margin: 0 !important;
    padding: 0 !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    flex: 0 0 18px !important;

    line-height: 0 !important;

    position: static !important;

    transform: none !important;

    overflow: visible !important;

}

.toi-book
.elementor-button-icon svg{

    display: block !important;

    width: 16px !important;
    height: 16px !important;

    min-width: 16px !important;
    min-height: 16px !important;

    margin: 0 !important;
    padding: 0 !important;

    position: static !important;

    transform: none !important;
    transform-origin: 50% 50% !important;

    overflow: visible !important;

}

.toi-book
.elementor-button-icon i{

    width: 16px !important;
    height: 16px !important;

    margin: 0 !important;
    padding: 0 !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    line-height: 16px !important;

    position: static !important;

    transform: none !important;

}


/* ============================================================
   COMPACT STATE
   NORMAL HEADER ON UP-SCROLL
============================================================ */

.toi-header.toi-compact{

    box-shadow:
        0 5px 22px
        rgba(0,0,0,.13) !important;

}


/* Big Logo Hide */

.toi-header.toi-compact
.toi-logo-large{

    opacity: 0;

    transform:
        translate3d(0,-8px,0);

    pointer-events: none;

}


/* Circle Hide */

.toi-header.toi-compact
.toi-logo-large::before{

    opacity: 0;

    transform:
        translate3d(0,-12px,0);

}


/* Small Logo Show */

.toi-header.toi-compact
.toi-logo-small{

    opacity: 1;

    transform:
        translate3d(0,0,0);

    pointer-events: auto;

}


/* ============================================================
   HIDE HEADER WHILE SCROLL DOWN
============================================================ */

.toi-header.toi-hidden{

    transform:
        translate3d(0,-115%,0) !important;

    box-shadow: none !important;

}


.toi-header.toi-hidden
.toi-logo-large{

    opacity: 0 !important;

}


.toi-header.toi-hidden
.toi-logo-large::before{

    opacity: 0 !important;

}


.toi-header.toi-hidden
.toi-logo-small{

    opacity: 1 !important;

    transform:
        translate3d(0,0,0) !important;

}


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

@media
(min-width:768px)
and
(max-width:1024px){

    :root{

        --toi-header-h: 82px;

        --toi-logo-left: 22px;

        --toi-button-right: 22px;

    }


    .toi-header,
    .toi-row{

        height:
            var(--toi-header-h) !important;

        min-height:
            var(--toi-header-h) !important;

    }


    /* Logo */

    .toi-logo-large{

        width: 190px !important;
        min-width: 190px !important;
        max-width: 190px !important;

    }


    .toi-logo-large::before{

        width: 180px !important;
        height: 90px !important;

        margin-left: -90px !important;

        top: 48px !important;

        border-radius:
            0 0
            90px 90px !important;

    }


    .toi-logo-large
    .elementor-widget-image,
    .toi-logo-large
    .elementor-widget-theme-site-logo{

        top: 10px !important;

    }


    .toi-logo-large img{

        width: 125px !important;
        max-width: 125px !important;

    }


    .toi-logo-small{

        width: 120px !important;
        min-width: 120px !important;
        max-width: 120px !important;

    }


    .toi-logo-small img{

        width: 96px !important;
        max-width: 96px !important;

    }


    /* Button */

    .toi-book .elementor-button{

        min-width: 125px !important;
        min-height: 44px !important;

        padding:
            0 18px !important;

    }

}


/* ============================================================
   MOBILE
   Full hanging circle + aligned CTA / hamburger
============================================================ */

@media(max-width:767px){

    :root{

        --toi-header-h: 72px;

        --toi-logo-left: 10px;

        --toi-button-right: 60px;

    }


    body.admin-bar .toi-header{

        top: 46px !important;

    }


    /*
       Elementor sometimes clips children that hang below the header.
       Keep every header wrapper open so the logo half-circle can
       extend over the hero.
    */

    .elementor-location-header,
    .elementor-location-header .e-con,
    .elementor-location-header .e-con-inner,
    .toi-header,
    .toi-header.e-con,
    .toi-header > .e-con-inner,
    .toi-row,
    .toi-row.e-con,
    .toi-row > .e-con-inner,
    .toi-logo-large,
    .toi-logo-large.e-con,
    .toi-logo-large > .e-con-inner{

        overflow: visible !important;

    }


    .toi-header{

        z-index: 2147482000 !important;

    }


    .toi-header,
    .toi-row{

        height:
            var(--toi-header-h) !important;

        min-height:
            var(--toi-header-h) !important;

        max-height:
            var(--toi-header-h) !important;

    }


    /* ========================================================
       LARGE LOGO — MOBILE TOP STATE
    ======================================================== */

    .toi-logo-large{

        left: var(--toi-logo-left) !important;
        top: 0 !important;

        width: 148px !important;
        min-width: 148px !important;
        max-width: 148px !important;

        height: var(--toi-header-h) !important;
        min-height: var(--toi-header-h) !important;
        max-height: var(--toi-header-h) !important;

        overflow: visible !important;

        z-index: 80 !important;

    }


    /*
       Proper mobile hanging half-circle.
       It begins inside the white header by 16px and hangs
       approximately 56px below it.
    */

    .toi-logo-large::before{

        width: 144px !important;
        height: 72px !important;

        left: 50% !important;
        top: 56px !important;

        margin-left: -72px !important;

        background: var(--toi-bg) !important;

        border-radius:
            0 0
            72px 72px !important;

        opacity: 1;

        z-index: 5 !important;

        pointer-events: none !important;

        transform: translate3d(0,0,0) !important;

    }


    .toi-logo-large
    .elementor-widget-image,
    .toi-logo-large
    .elementor-widget-theme-site-logo{

        top: 10px !important;

        z-index: 20 !important;

        overflow: visible !important;

    }


    .toi-logo-large
    .elementor-widget-container{

        overflow: visible !important;

    }


    .toi-logo-large img{

        width: 100px !important;
        max-width: 100px !important;

        height: auto !important;

        margin: 0 auto !important;

        object-fit: contain !important;

        transform: none !important;

        position: relative !important;

        z-index: 25 !important;

    }


    /* ========================================================
       SMALL LOGO — COMPACT SCROLL STATE
    ======================================================== */

    .toi-logo-small{

        left: var(--toi-logo-left) !important;

        width: 94px !important;
        min-width: 94px !important;
        max-width: 94px !important;

        height: var(--toi-header-h) !important;
        min-height: var(--toi-header-h) !important;
        max-height: var(--toi-header-h) !important;

    }


    .toi-logo-small img{

        width: 76px !important;
        max-width: 76px !important;

    }


    /* ========================================================
       MOBILE MENU / HAMBURGER
       Use the same full header height as the CTA so both are
       vertically centered on exactly the same axis.
    ======================================================== */

    .toi-menu{

        left: auto !important;

        right: 8px !important;

        top: 0 !important;
        bottom: auto !important;

        width: 42px !important;
        min-width: 42px !important;
        max-width: 42px !important;

        height: var(--toi-header-h) !important;
        min-height: var(--toi-header-h) !important;
        max-height: var(--toi-header-h) !important;

        margin: 0 !important;
        padding: 0 !important;

        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        transform: none !important;

        z-index: 90 !important;

    }


    .toi-menu.e-con{

        width: 42px !important;
        min-width: 42px !important;
        max-width: 42px !important;

        height: var(--toi-header-h) !important;
        min-height: var(--toi-header-h) !important;

        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

    }


    .toi-menu .elementor-menu-toggle{

        width: 42px !important;
        height: 42px !important;

        min-width: 42px !important;
        min-height: 42px !important;

        max-width: 42px !important;
        max-height: 42px !important;

        margin: 0 !important;
        padding: 0 !important;

        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        line-height: 1 !important;

        border-radius: 50% !important;

        position: static !important;

        transform: none !important;

        overflow: visible !important;

    }


    /* IMPORTANT: do not force every toggle SVG to display.
       Elementor keeps separate OPEN and CLOSE icons in the toggle and
       its own state CSS decides which one is visible. Forcing all SVGs
       to display makes the hamburger and X appear at the same time. */
    .toi-menu .elementor-menu-toggle svg{

        margin: 0 !important;

        flex: 0 0 auto !important;

        transform-origin: 50% 50% !important;

    }


    /* ========================================================
       BOOK NOW — MOBILE
    ======================================================== */

    .toi-book{

        right:
            var(--toi-button-right) !important;

        top: 0 !important;
        bottom: auto !important;

        height:
            var(--toi-header-h) !important;

        min-height:
            var(--toi-header-h) !important;

        max-height:
            var(--toi-header-h) !important;

        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        transform: none !important;

        z-index: 90 !important;

    }


    .toi-book.e-con{

        height:
            var(--toi-header-h) !important;

        min-height:
            var(--toi-header-h) !important;

        max-height:
            var(--toi-header-h) !important;

        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

    }


    .toi-book .elementor-widget-button,
    .toi-book .elementor-widget-container,
    .toi-book .elementor-button-wrapper{

        height: auto !important;

        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        margin: 0 !important;
        padding: 0 !important;

    }


    .toi-book .elementor-button{

        min-width: 98px !important;
        min-height: 40px !important;

        padding:
            0 12px !important;

        display: inline-flex !important;

        align-items: center !important;
        justify-content: center !important;

        line-height: 1 !important;

        white-space: nowrap !important;

    }


    .toi-book
    .elementor-button-content-wrapper{

        width: auto !important;
        height: 18px !important;

        display: inline-flex !important;

        align-items: center !important;
        justify-content: center !important;

        gap: 6px !important;

        line-height: 1 !important;

    }


    /*
       Icon wrapper + SVG share one fixed 18px box.
       This removes the Elementor icon margin / baseline offset
       that makes the circular arrow look off-center.
    */

    .toi-book
    .elementor-button-icon{

        width: 18px !important;
        height: 18px !important;

        min-width: 18px !important;
        min-height: 18px !important;

        flex: 0 0 18px !important;

        margin: 0 !important;
        padding: 0 !important;

        display: inline-flex !important;

        align-items: center !important;
        justify-content: center !important;

        line-height: 0 !important;

        position: static !important;

        transform: none !important;

        overflow: visible !important;

    }


    .toi-book
    .elementor-button-icon svg{

        width: 16px !important;
        height: 16px !important;

        min-width: 16px !important;
        min-height: 16px !important;

        display: block !important;

        margin: 0 !important;
        padding: 0 !important;

        position: static !important;

        transform: none !important;
        transform-origin: 50% 50% !important;

        overflow: visible !important;

    }


    .toi-book
    .elementor-button-icon i{

        width: 16px !important;
        height: 16px !important;

        display: inline-flex !important;

        align-items: center !important;
        justify-content: center !important;

        margin: 0 !important;
        padding: 0 !important;

        line-height: 16px !important;

        position: static !important;

        transform: none !important;

    }



    /* ========================================================
       ONLY MOBILE SCROLL-UP / COMPACT HEIGHT FIX
       --------------------------------------------------------
       Live DOM inner-row class = toi-header-row.
       Desktop / tablet / top-state mobile remain untouched.
    ======================================================== */

    .toi-header.toi-compact{
        height: 50px !important;
        min-height: 50px !important;
        max-height: 50px !important;

        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    .toi-header.toi-compact > .toi-header-row,
    .toi-header.toi-compact .toi-header-row,
    .toi-header.toi-compact > .toi-row,
    .toi-header.toi-compact .toi-row{
        --min-height: 50px !important;

        height: 50px !important;
        min-height: 50px !important;
        max-height: 50px !important;

        margin-top: 0 !important;
        margin-bottom: 0 !important;

        padding-top: 0 !important;
        padding-bottom: 0 !important;

        box-sizing: border-box !important;
        overflow: visible !important;
    }

    .toi-header.toi-compact .toi-logo-small{
        top: 0 !important;

        height: 50px !important;
        min-height: 50px !important;
        max-height: 50px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .toi-header.toi-compact
    .toi-logo-small .elementor-widget-container{
        height: 50px !important;
        min-height: 50px !important;
        max-height: 50px !important;

        margin: 0 !important;
        padding: 0 !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .toi-header.toi-compact .toi-book,
    .toi-header.toi-compact .toi-book.e-con{
        top: 0 !important;

        height: 50px !important;
        min-height: 50px !important;
        max-height: 50px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        transform: none !important;
    }

    .toi-header.toi-compact .toi-menu,
    .toi-header.toi-compact .toi-menu.e-con{
        top: 0 !important;

        height: 50px !important;
        min-height: 50px !important;
        max-height: 50px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        transform: none !important;
    }

}


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

@media(max-width:400px){

    :root{

        --toi-logo-left: 6px;

        --toi-button-right: 50px;

    }


    .toi-logo-large{

        width: 136px !important;
        min-width: 136px !important;
        max-width: 136px !important;

    }


    .toi-logo-large::before{

        width: 132px !important;
        height: 66px !important;

        margin-left: -66px !important;

        top: 54px !important;

        border-radius:
            0 0
            66px 66px !important;

    }


    .toi-logo-large
    .elementor-widget-image,
    .toi-logo-large
    .elementor-widget-theme-site-logo{

        top: 9px !important;

    }


    .toi-logo-large img{

        width: 90px !important;
        max-width: 90px !important;

    }


    .toi-logo-small{

        width: 84px !important;
        min-width: 84px !important;
        max-width: 84px !important;

    }


    .toi-logo-small img{

        width: 68px !important;
        max-width: 68px !important;

    }


    .toi-menu{

        right: 5px !important;

        width: 40px !important;
        min-width: 40px !important;
        max-width: 40px !important;

    }


    .toi-menu.e-con{

        width: 40px !important;
        min-width: 40px !important;
        max-width: 40px !important;

    }


    .toi-menu .elementor-menu-toggle{

        width: 40px !important;
        height: 40px !important;

        min-width: 40px !important;
        min-height: 40px !important;

        max-width: 40px !important;
        max-height: 40px !important;

    }


    .toi-book .elementor-button{

        min-width: 84px !important;
        min-height: 38px !important;

        padding:
            0 9px !important;

        font-size: 10px !important;

    }


    .toi-book
    .elementor-button-content-wrapper{

        gap: 5px !important;

    }


    .toi-book
    .elementor-button-icon{

        width: 17px !important;
        height: 17px !important;

        min-width: 17px !important;
        min-height: 17px !important;

        flex-basis: 17px !important;

    }


    .toi-book
    .elementor-button-icon svg,
    .toi-book
    .elementor-button-icon i{

        width: 15px !important;
        height: 15px !important;

        min-width: 15px !important;
        min-height: 15px !important;

    }

}


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

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

    .toi-header,
    .toi-logo-large,
    .toi-logo-large::before,
    .toi-logo-small{

        transition: none !important;

    }

}/* End custom CSS */