/* ===== Scrollbar CSS ===== */

  /* Firefox */
    body.page-template-tpl-header-side-nav,
    body.page-template-tpl-header-side-nav > .wrapper > .inner-wrapper > #header-wrapper #header section.elementor-section .elementor-container {
        scrollbar-width: none; scrollbar-color: var(--wdtPrimaryColor) transparent; }

  /* Chrome, Edge, and Safari */
    body.page-template-tpl-header-side-nav::-webkit-scrollbar,
    body.page-template-tpl-header-side-nav > .wrapper > .inner-wrapper > #header-wrapper #header section.elementor-section .elementor-container::-webkit-scrollbar {
        width: 0px; display: none; }
    body.page-template-tpl-header-side-nav::-webkit-scrollbar-track,
    body.page-template-tpl-header-side-nav > .wrapper > .inner-wrapper > #header-wrapper #header section.elementor-section .elementor-container::-webkit-scrollbar-track {
        background: transparent; }
    body.page-template-tpl-header-side-nav::-webkit-scrollbar-thumb,
    body.page-template-tpl-header-side-nav > .wrapper > .inner-wrapper > #header-wrapper #header section.elementor-section .elementor-container::-webkit-scrollbar-thumb {
        background-color: var(--wdtPrimaryColor); border-radius: 0px; }



/*==== NEW - Header-Side-Navigation ====*/

@media screen and (min-width: 1025px) {
    body.page-template-tpl-header-side-nav .techai-sidenav-container .wrapper,
    body.page-template-tpl-header-side-nav .techai-sidenav-container { padding-left: 100px; }

    body.page-template-tpl-header-side-nav .techai-sidenav-content { width: 100px; border-right: 1px solid var(--wdtBorderColor);
        position: fixed; left: 0px; top: 0px; bottom: 0px; z-index: 1; padding: 20px; display: flex; flex-direction: column; align-items: center;
        background-color: var(--wdtTertiaryColor); background-image: url('../images/techai-red-bg.webp'); background-color: var(--wdtSecondaryColor);
        background-repeat: no-repeat; background-size: cover; background-position: center center; }

    body.page-template-tpl-header-side-nav .techai-sidenav-content > *:is(div, nav) { flex: 1 1 33.33%; padding: 10px 0px; align-content: center;
        position: relative; width: 100%; text-align: center; }
    body.page-template-tpl-header-side-nav .techai-sidenav-content > div:first-child { align-content: flex-start; }
    body.page-template-tpl-header-side-nav .techai-sidenav-content > div:last-child { align-content: flex-end; }

    body.page-template-tpl-header-side-nav #header-wrapper { display: none; }

}

@media screen and (max-width: 1024px) {
    
    body.page-template-tpl-header-side-nav .techai-sidenav-container .wrapper,
    body.page-template-tpl-header-side-nav .techai-sidenav-container { padding-left: 0px; }

    body.page-template-tpl-header-side-nav .techai-sidenav-content { display: none; }
    
}

    .techai-sidenav-logo > a { writing-mode: sideways-rl; width: 120px; transform: rotate(-90deg); transform-origin: calc(30% + 30px) calc(0% + 50px); }


    .techai-sidenav-social ul { padding: 0; list-style-type: none; margin: 0; }
    .techai-sidenav-social ul li > a { padding: 5px; border: 1px solid var(--wdtAccentTxtColor); border-radius: 50%; 
        width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; font-size: 0.9rem;background-color: var(--wdtAccentTxtColor); }
    .wdt-dark-bg .techai-sidenav-social ul li > a { color: var(--wdtPrimaryColor); }
    .wdt-dark-bg .techai-sidenav-social ul li > a:hover { background-color: var(--wdtLinkHoverColor);  border-color: var(--wdtLinkHoverColor);color: var(--wdtAccentTxtColor); }


/* Menu - Toggle Icon Style */

    
.elementor-widget-wdt-hamburger-header-menu .elementor-widget-container { display: flex; }

div[id*="menuToggle"] { display: inline-grid; /* position: relative; z-index: 1; */ -webkit-user-select: none; user-select: none; }
div[id*="menuToggle"] a { text-decoration: none; color: var(--wdtLinkColor); transition: color 0.3s ease; }
div[id*="menuToggle"] a:hover { color: var(--wdtLinkHoverColor); }

div[id*="menuToggle"] input[type="checkbox"], div[id*="menuToggle"] .wdt-trigger-item { 
  grid-area: 1/1; display: inline-flex; flex-wrap: wrap; align-content: center; z-index: 2;
  font-size: clamp(2.5rem, 2.2404rem + 1.1538vw, 3.625rem) /* Max-58 Min 40 */;
  width: clamp(2.5rem, 2.2404rem + 1.1538vw, 3.625rem) /* Max-58 Min 40 */; 
  height: clamp(2.5rem, 2.2404rem + 1.1538vw, 3.625rem) /* Max-58 Min 40 */; }

div[id*="menuToggle"] input[type="checkbox"] { -webkit-appearance: none; appearance: none;
  display: block; position: relative; cursor: pointer; opacity: 0; z-index: 3; -webkit-touch-callout: none; }

div[id*="menuToggle"] input[type="checkbox"] ~ .wdt-trigger-item i { display: flex; font-size: inherit; }
div[id*="menuToggle"] input[type="checkbox"] ~ .wdt-trigger-item i svg .line { fill: none; stroke: var(--wdtLinkColor); stroke-width: 4; 
  transition: stroke-dasharray .6s cubic-bezier(.4,0,.2,1), stroke-dashoffset .6s cubic-bezier(.4,0,.2,1); }   

.wdt-dark-bg div[id*="menuToggle"] input[type="checkbox"] ~ .wdt-trigger-item i svg .line { stroke: var(--wdtAccentTxtColor); }

div[id*="menuToggle"] input[type="checkbox"] ~ .wdt-trigger-item i svg .line1,
div[id*="menuToggle"] input[type="checkbox"] ~ .wdt-trigger-item i svg .line3 { stroke-dasharray: 40 207; stroke-width: 4; margin-top: -22px;}

div[id*="menuToggle"] input[type="checkbox"] ~ .wdt-trigger-item i svg .line2 { stroke-dasharray: 60 60; stroke-width: 4; }

div[id*="menuToggle"] input[type="checkbox"]:checked ~ .wdt-trigger-item i svg .line1,
div[id*="menuToggle"] input[type="checkbox"]:checked ~ .wdt-trigger-item i svg .line3 { 
  stroke-dasharray: 90 207; stroke-dashoffset: -134; stroke-width: 4; }

div[id*="menuToggle"] input[type="checkbox"]:checked ~ .wdt-trigger-item i svg .line2{
  stroke-dasharray: 1 60; stroke-dashoffset: -30; stroke-width: 4; }

  

div[id*="menuToggle"] .hamburger-menu-container { position: absolute; width: 400px; margin: 0; padding: 50px; left: 80px; 
    background-color: var(--wdtTertiaryColor); list-style-type: none; -webkit-font-smoothing: antialiased; 
    transition: var(--wdt-Ad-Transition); height: 100vh; top: 50%; align-content: center; overflow-y: scroll; }

div[id*="menuToggle"] .hamburger-menu-container ul li { list-style-type: none; line-height: normal; padding: 0; 
  font-family: var(--wdtFontTypo_Alt); font-weight: var(--wdtFontWeight_Alt); font-size: clamp(1.375rem, 1.3462rem + 0.1282vw, 1.5rem); /* Min-22 & Max-24 */ }

div[id*="menuToggle"] .hamburger-menu-container ul li.menu-item > ul.sub-menu li a { font-size: clamp(1.125rem, 1.0962rem + 0.1282vw, 1.25rem); /* Min-18 & Max-20 */ }

div[id*="menuToggle"] input[type="checkbox"]:not(:checked) ~ div.hamburger-menu-container { 
  transform-origin: 0% 0%; transform: translate(0%, -50%); opacity: 0; visibility: hidden; } 
div[id*="menuToggle"] input[type="checkbox"]:checked ~ div.hamburger-menu-container { transform: translate(0%, -50%); }


/*==== Menu Style ====*/

div[id*="menuToggle"] .hamburger-menu-container ul li:is(.close-nav, .go-back, .see-all) { display: none; }
div[id*="menuToggle"] .hamburger-menu-container > ul { margin: 0; padding: 0; width: 100%; }

/*==== Menu Toggle Style ====*/

div[id*="menuToggle"] .hamburger-menu-container ul > li > a { margin: 0; padding: 10px 10px; width: 100%; display: block; clear: both; }
div[id*="menuToggle"] .hamburger-menu-container ul > li.menu-item-has-children { cursor: pointer; }

div[id*="menuToggle"] .hamburger-menu-container ul { text-align: left; }
div[id*="menuToggle"] .hamburger-menu-container ul li ul.children,
div[id*="menuToggle"] .hamburger-menu-container ul li ul.sub-menu,
div[id*="menuToggle"] .hamburger-menu-container ul li.has-mega-menu > ul { padding: 0; padding-left: 1.5rem;
    visibility: visible; opacity: 1; position: relative; border-radius: 0; margin: 0; width: 100%; transition: var(--wdt-Ad-Transition);
    /*height: calc(var(--nav-height) * -1);*/ border: none; -webkit-box-shadow: none; box-shadow: none; display: none; }


div[id*="menuToggle"] .hamburger-menu-container ul li.menu-item-depth-2 > ul, 
div[id*="menuToggle"] .hamburger-menu-container ul li.menu-item-depth-4 > ul, 
div[id*="menuToggle"] .hamburger-menu-container ul li.menu-item-depth-6 > ul, 
div[id*="menuToggle"] .hamburger-menu-container ul li.menu-item-depth-8 > ul, 
div[id*="menuToggle"] .hamburger-menu-container ul li.menu-item-depth-10 > ul, 
div[id*="menuToggle"] .hamburger-menu-container ul > li:nth-child(n+2) ul li.menu-item-depth-1 > ul, 
div[id*="menuToggle"] .hamburger-menu-container ul > li:nth-child(n+2) ul li.menu-item-depth-3 > ul, 
div[id*="menuToggle"] .hamburger-menu-container ul > li:nth-child(n+2) ul li.menu-item-depth-5 > ul, 
div[id*="menuToggle"] .hamburger-menu-container ul > li:nth-child(n+2) ul li.menu-item-depth-7 > ul, 
div[id*="menuToggle"] .hamburger-menu-container ul > li:nth-child(n+2) ul li.menu-item-depth-9 > ul { left: 0 !important; }

div[id*="menuToggle"] .hamburger-menu-container ul li ul.children > li > a, 
div[id*="menuToggle"] .hamburger-menu-container ul li ul.sub-menu > li > a, 
div[id*="menuToggle"] .hamburger-menu-container ul li.has-mega-menu ul.menu > li > a { 
    border-bottom: 1px solid rgba(var(--wdtHeadAltColorRgb),0); padding: 8px;
}

/* Menu - Toggle Icon Style */

div[id*="menuToggle"] .hamburger-menu-container ul li[class*="has-children"] > a { position: relative; }
div[id*="menuToggle"] .hamburger-menu-container ul li[class*="has-children"] > a > span { 
    display: grid; grid-template-columns: auto 16px; gap: 5px; width: 100%; }
div[id*="menuToggle"] .hamburger-menu-container ul li[class*="has-children"] > a > span:before,
div[id*="menuToggle"] .hamburger-menu-container ul li[class*="has-children"] > a > span:after {
    content: ""; position: relative; right: 0; bottom: 0; background-color: var(--wdtPrimaryColor); display: inline-block; top: 0; 
    margin: auto; left: 0; grid-column: 2/3; grid-row: 1/2; place-self: center; transition: var(--wdt-Ad-Transition); 
}
div[id*="menuToggle"] .hamburger-menu-container ul li[class*="has-children"] > a > span:before {
    width: 16px; height: 2px; }
div[id*="menuToggle"] .hamburger-menu-container ul li[class*="has-children"] > a > span:after {
    width: 2px; height: 16px; -webkit-transition:var(--wdt-Ad-Transition); transition: var(--wdt-Ad-Transition); }
div[id*="menuToggle"] .hamburger-menu-container ul li[class*="has-children"].wdt-active > a > span:after {
    visibility: hidden; opacity: 0; }
div[id*="menuToggle"] .hamburger-menu-container ul li[class*="has-children"] > a.wdt-active > span:after,
div[id*="menuToggle"] .hamburger-menu-container ul li[class*="has-children"] > a.wdt-active > span::before {rotate: -45deg;}


/* New Custom Style */

body.page-template-tpl-header-side-nav #header section.elementor-section[class*="sticky"] div[id*="menuToggle"] div.hamburger-menu-container { 
  width: 550px; height: 100vh; }
body.page-template-tpl-header-side-nav #header section.elementor-section[class*="sticky"] 
div[id*="menuToggle"] input[type="checkbox"]:not(:checked) ~ div.hamburger-menu-container {
  left: calc(var(--hamber-left) * -1); transform: translate(var(--header-height), -50%); top: 30px; 
  opacity: 0; visibility: hidden;clip-path: inset(0 100% 0 0); } 
body.page-template-tpl-header-side-nav #header section.elementor-section[class*="sticky"] 
div[id*="menuToggle"] input[type="checkbox"]:checked ~ div.hamburger-menu-container { clip-path: inset(0 0 0 0);
  left: calc(var(--hamber-left) * -1); transform: translate(var(--header-height), -50%); top: 30px; }

body.page-template-tpl-header-side-nav #header section.elementor-section[class*="sticky"] div[id*="menuToggle"] .hamburger-menu-container ul li { 
  font-size: clamp(1.625rem, 1.4808rem + 0.641vw, 2.25rem); /* Min-26 & Max-36 */ }
body.page-template-tpl-header-side-nav #header section.elementor-section[class*="sticky"] 
div[id*="menuToggle"] input[type="checkbox"] ~ div.hamburger-menu-container { display: flex; align-items: center;
  background-image: linear-gradient(135deg, rgba(0,0,0,1) 0,rgba(0,0,0,1) 50%, rgba(0,0,0,1) 100%); overflow-y: scroll; }

body.page-template-tpl-header-side-nav #header section.elementor-section[class*="sticky"] div[id*="menuToggle"] a { color: var(--wdtAccentTxtColor); }

body.page-template-tpl-header-side-nav #header section.elementor-section[class*="sticky"] div[id*="menuToggle"] a:focus,
body.page-template-tpl-header-side-nav #header section.elementor-section[class*="sticky"] div[id*="menuToggle"] a:hover,

body.page-template-tpl-header-side-nav #header section.elementor-section[class*="sticky"] div[id*="menuToggle"] li.current-menu-item > a,
body.page-template-tpl-header-side-nav #header section.elementor-section[class*="sticky"] div[id*="menuToggle"] li.current-page-item > a, 
body.page-template-tpl-header-side-nav #header section.elementor-section[class*="sticky"] div[id*="menuToggle"] li.current-menu-ancestor > a, 
body.page-template-tpl-header-side-nav #header section.elementor-section[class*="sticky"] div[id*="menuToggle"] li.current-page-ancestor > a,

body.page-template-tpl-header-side-nav #header section.elementor-section[class*="sticky"] div[id*="menuToggle"] li.current_menu_item > a, 
body.page-template-tpl-header-side-nav #header section.elementor-section[class*="sticky"] div[id*="menuToggle"] li.current_page_item > a, 
body.page-template-tpl-header-side-nav #header section.elementor-section[class*="sticky"] div[id*="menuToggle"] li.current_menu_ancestor > a, 
body.page-template-tpl-header-side-nav #header section.elementor-section[class*="sticky"] div[id*="menuToggle"] li.current_page_ancestor > a { 
    color: var(--wdtPrimaryColor); }


/* Bottom spacing */
body.page-template-tpl-header-side-nav #primary > :last-child { margin-bottom: 0; }