@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
/*---Variables converted to native CSS custom properties----*/
:root { 
  --primary: #FF5500; 
  --secondary: #CC2200; 
  --heading-font: 'Kanit', sans-serif; 
  --body-font: 'Inter', sans-serif; 
  --menu-accent: #FF5500;
  --menu-accent-dark: #CC2200;
  --menu-text: #111111;
  --menu-surface: #ffffff;
  --menu-surface-alt: #f5f7f1;
  --menu-border: rgba(67, 120, 45, 0.18);
  --menu-shadow: 0 24px 48px rgba(17, 17, 17, 0.12);
}

#menu-button{display:none;}
.submenu-toggle{display:none;}
.header{
    gap:24px;
}

.logo img{
    display:block;
    width:100%;
}

.search-row{
    display:flex;
    align-items:center;
    overflow:hidden;
    border: 1px #C5C5C5 solid;
    background:var(--menu-surface-alt);
}

.search-row input{
    min-width:160px !important;
    border: none !important;
    background: #F4F4F4 !important;
    color: #717171 !important;
    padding:0.8rem 1rem !important;
    font:400 0.95rem/1.2 var(--body-font) !important;
}

.search-row button{
    border:0;
    background:var(--menu-accent);
    color:#fff;
    width:44px;
    height:44px;
    cursor:pointer;
}
.search-row button:hover {background: #000 !important; color: #fff !important; transition: .8s;}
.menu-overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.5);
    opacity:0;
    visibility:hidden;
    transition:.3s ease;
    z-index:59;
}

.menu-overlay.is-active{
    opacity:1;
    visibility:visible;
}

/***** Start of primary nav ******/
nav.primary {
    padding:0;
    display:block;
    margin:0;
    position:relative;
    transition:
      transform .35s cubic-bezier(.22,1,.36,1),
        opacity .35s ease,
        visibility .35s ease;
    will-change:
        transform,
        opacity;
}

nav.primary > ul {
    margin:0;
    padding:0;
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:flex-end;
    gap:0.25rem;
}

nav.primary ul li {
    display:inline-block;
    margin:0;
    list-style-type:none;
    width:auto;
    position:relative;
}

nav.primary > ul > li > a {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:76px;
    margin:0 2px;
    padding:1rem 1.1rem;
    color:var(--menu-text);
    font:600 0.98rem/1.2 var(--body-font);
    letter-spacing:.02em;
    text-align:center;
    border-radius:12px;
    transition:color .25s ease, background-color .25s ease;
}

nav.primary > ul > li > a:hover,
nav.primary > ul > li > a:focus-visible,
nav.primary > ul > li:hover > a {
    color: #FF5500;
    background: rgba(255,85,0,0.08);
    outline:none;
}

nav.primary ul li li a {
    display:block;
    padding:0.8rem 0.95rem;
    border-radius:12px;
    color:var(--menu-text);
    font:600 0.94rem/1.4 var(--body-font);
    text-align:left;
    background:transparent;
    transition:background-color .25s ease, color .25s ease, transform .25s ease;
}

nav.primary ul li li a:hover,
nav.primary ul li li a:focus-visible {
    color:var(--menu-accent-dark);
    background:var(--menu-surface-alt);
    outline:none;
    transform:translateX(4px);
}
/* This controls the Primary nav dropdowns for sublinks. Should not have to edit this too muuch */
nav.primary ul ul {
    display: none;
    position: absolute;
    min-width:240px;
    margin:0;
    /*------
    padding:0.85rem;
    border:1px solid var(--menu-border);
    -------*/
    border-radius:18px;
    background:linear-gradient(135deg, #ffffff 0%, #f9fbf5 100%);
    box-shadow:var(--menu-shadow);
}
nav.primary ul ul ul {
    position: absolute;
    left: calc(100% + 0.75rem);
    top:-0.5rem;
}
nav.primary ul li:hover > ul {  
    display: block;
    line-height:18px;
    z-index: 1000;
}
nav.primary ul ul li {
    float:none;
    width:100%;
    position: relative;
    margin:0;
    display:block;
}

nav.primary ul ul li + li {
    margin-top:0.45rem;
}


nav.primary ul ul ul::before {
    top:1.2rem;
    left:-0.45rem;
    border-top:0;
    border-right:0;
    border-left:1px solid var(--menu-border);
    border-bottom:1px solid var(--menu-border);
}


/** drop down btns**/
.drop-down a:hover{
    color:var(--menu-accent-dark)!important;
    background-color:var(--menu-surface-alt)!important;
}

.menu-close-button{
    display:none;
}


/*-----Mobile Menu------*/
@media screen and (max-width:1200px){
#menu-button{display:block;}
.submenu-toggle{display:block;}

    .header{
        gap:14px;
    }

    #menu-button{
        font-family:var(--body-font);
        font-weight: 400;
        font-size:15px;
        letter-spacing:.04em;
        text-transform:none;
        background: #F5620F !important;
        color:#000 !important;
        border:0;
        padding:12px 18px;
        cursor:pointer;
        transition:background .25s ease, color .25s ease;
    }

    #menu-button:hover{
        background:var(--menu-accent-dark);
        color:#fff;
    }

    .menu-close-button{
        display:flex;
        align-items:center;
        justify-content:center;
        position:absolute;
        top:10px;
        right:10px;
        width:40px;
        height:40px;
        border:0;
        border-radius:8px;
        background: rgba(245,98,15,0.08);
        color: #F5620F;
        font-size:28px;
        line-height:1;
        cursor:pointer;
        z-index:1001;
    }

    .menu-close-button:hover{
        background:rgba(67, 120, 45, 0.16);
    }

    nav.primary .menu-close-button + ul{
        padding-top:60px;
    }

    nav.primary{
        position:fixed;
        background:#ffffff;
        border-left:1px solid var(--menu-border);
        box-shadow:0 20px 40px rgba(0,0,0,.35);
        z-index:1000;
        transition:
            transform .35s cubic-bezier(.22,1,.36,1),
            opacity .35s ease,
            visibility .35s ease;
        will-change:
            transform,
            opacity;
    }

    nav.primary > ul{
        display:flex;
        flex-direction:column;
        align-items:stretch;
        gap:0;
        padding:18px 0 22px;
    }

    nav.primary li{
        display:block;
        width:100%;
    }

    nav.primary li a{
        margin:0;
        padding:14px 18px;
        text-align:left;
        color:var(--menu-text);
        font-family:var(--body-font);
        font-size:15px !important;
        font-weight:600;
        letter-spacing:.35px;
        border-left:4px solid transparent;
        transition:background .25s ease, color .25s ease, border-color .25s ease;
    }

    nav.primary li a:hover{
        color:var(--menu-accent-dark);
        background:rgba(67, 120, 45, .12);
        border-left-color: #F5620F;;
    }

    nav.primary li li a{
        padding-left:28px;
        font-size:14px !important;
        color:var(--menu-text);
        background:#f8faf4;
    }

    nav.primary li li li a{
        padding-left:40px;
        background:#edf3e7;
    }


    nav.primary li > ul{

        display:block;

        max-height:0;

        overflow:hidden;

        transition:max-height .3s ease;
    }

	nav.primary li.open{overflow:visible;}
    nav.primary li.open > ul{
        max-height:1000px;
	
    }

    .submenu-toggle{
        position:absolute;
        top:0;
        right:0;
        width:50px;
        height:50px;
        border:0;
        background:none;
        color:var(--menu-accent);
        font-size:18px;
        cursor:pointer;
    }

    .submenu-toggle:hover{
        color:var(--menu-accent-dark);
    }




    .menu-overlay{
        position:fixed;
        inset:0;
        background:rgba(0,0,0,.6);
        opacity:0;
        visibility:hidden;
        z-index:999;
        transition:
            opacity .3s ease,
            visibility .3s ease;
    }

    .menu-overlay.is-active{

        opacity:1;
        visibility:visible;
    }

    body.menu-open{
        overflow:hidden;
    }

	
	.menu-right{
        top:0;
        right:0;
        width:320px;
        max-width:90vw;
        height:100vh;
        transform:translateX(100%);
		opacity:0;
    }

    .menu-right.is-open{
        transform:translateX(0);
		opacity:1;
    }


    .menu-left{
        top:0;
        left:0;
        width:320px;
        max-width:90vw;
        height:100vh;
        transform:translateX(-100%);
		opacity:0;
    }

    .menu-left.is-open{
        transform:translateX(0);
		opacity:1;
    }


    .menu-fullscreen{

        inset:0;

        width:100vw;
        height:100vh;

        opacity:0;
        visibility:hidden;

        transform:translateX(-100%);
		opacity:0;
    }

    .menu-fullscreen.is-open{

        opacity:1;
        visibility:visible;

         transform:translateX(0);
		 opacity:1;
    }


    .menu-dropdown{
        top:0;
        left:0;
        width:100%;
        max-height:80vh;
        transform:translateY(-100%);
		opacity:0;
		z-index:-100;
        border-top:1px solid var(--menu-border);
        box-shadow:0 18px 34px rgba(0,0,0,.18);
    }

    .menu-dropdown.is-open{
        transform:translateY(0);
		opacity:1;
		z-index: 100;
		top:143px;
    }

    .menu-modal{

        width:min(500px,90vw);
        max-height:85vh;

        top:20%;
        left:50%;

        overflow:auto;

        border-radius:16px;

        opacity:0;
        visibility:hidden;

        transform:
            translate(-50%,-50%)
            scale(.95);
    }

    .menu-modal.is-open{

        opacity:1;
        visibility:visible;

        transform:
            translate(-50%,-50%)
            scale(1);
    }




	
}