/*
Theme Name: Techniekmuseum HEIM Custom Theme
Theme URI: https://www.techniekmuseumheim.nl/
Author: Techniekmuseum HEIM Team
Author URI: https://www.techniekmuseumheim.nl/
Description: Techniekmuseum HEIM Custom Theme is an engaging, responsive WordPress theme designed for science and technology museums, educational institutions, and interactive exhibitions. It features clean layouts, event integration, and support for multilingual content.
Version: 1.0
Text Domain: techniekmuseumheim
Tags: museum, science, technology, education, responsive, interactive, custom-theme
*/



body{
	margin: 0;
	font-family: Arial, 'U57CR', Helvetica, sans-serif;
}
* {
    box-sizing: border-box;
}

img.custom-logo {
    max-width: 260px;
    width: 100%;
    height: 78px;
}


.tech-content-area {
    font-size: 16px;
    padding-top: 20px;
    padding-bottom: 20px;
    line-height: 24px;
}

.container
{
    max-width: 1200px;
    width: 100%;
    margin: auto;
    padding: 0 20px;
}
.su-button-style-flat span {
    background-color: #e91a24;
}

.tech-content-area h1 {
    font-size: 36px;
    font-weight: bold;
    text-align: center;
    line-height: 45px;
}

.tech-content-area h2 {
    font-size: 30px;
    font-weight: bold;
    line-height: 40px;
}

.tech-content-area h3 {
    font-size: 25px;
    font-weight: bold;
    line-height: 35px;
   
}

.tech-content-area h4 {
    font-size: 20px;
    font-weight: bold;
    line-height: 30px;
    
}

.tech-content-area h5 {
    font-size: 18px;
    font-weight: bold;
    line-height: 28px;
 }

.tech-content-area h6 {
    font-size: 16px;
    font-weight: bold;
    line-height: 25px;
   
}

.tech-content-area ol li {
    list-style: decimal;

}

.tech-content-area ul li {

    list-style: disc;
}

.tech-content-area ol,
.tech-content-area ul {
    box-sizing: border-box;
    padding-left: 30px;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
    margin: 10px 0 !important;

}

.tech-content-area table {

    border-collapse: collapse;
    width: 100%;
    margin-top: 20px;
    margin-bottom: 20px;
}

.tech-content-area td {
    border: 1px solid #ccc;
    padding: 8px;
    font-size: 16px;
}

.tech-content-area dl {
    margin: 20px;
    padding: 0;
    font-family: Arial, sans-serif;
    border: 1px solid #ddd;
    border-radius: 5px;
    background-color: #f9f9f9;
}

.tech-content-area dt {
    font-weight: bold;
    margin: 10px 0 5px;
    padding: 10px;
    background-color: #eee;
    border-bottom: 1px solid #ddd;
}

.tech-content-area dd {
    margin: 0 0 10px 20px;
    padding: 10px;
    border-left: 2px solid #ddd;
    background-color: #fff;
}


.tech-content-area li {
    line-height: 30px;
}

.tech-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;

}
.tech-main-header {
    padding: 8px 0;
    background: linear-gradient(90deg,rgba(233, 26, 36, 0.29) 57%, rgba(0, 0, 0, 0.53) 94%);
}

/* Add FontAwesome arrow only to top-level menu items with children */
.menu-item-has-children>a::after {
    content: "\f078";
    font-family: "FontAwesome";
    margin-left: 5px;
    color: #000;
    position: absolute;
    top: 0px;
    right: -18px;
    font-size: 10px;
}

/* Hide arrow for nested submenu items */
.sub-menu .menu-item-has-children>a::after {
    display: block;
    right: 0;
}

.tech-navigationcl {
    position: relative;
    left: auto;
    padding-top: 0;
    display: inline-block;
    width: 100%;
}

.tech-navigationcl a {
    display: block;
    position: relative;
    margin: 0;
    height: auto;
    font-size: 17px;
    line-height: 40px;
    color: #000;
    overflow: visible;
    text-decoration: none;

}

.sub-menu li a {
    line-height: 24px;
    margin: 5px 0;
    Color: #000;

}

.tech-navigationcl li {
    position: relative;
    display: inline-block;
    padding: 0 20px;
}

.nav-select {
    display: inline-block;
    visibility: visible;
    width: 100%;
    text-align: right;
}

.tech-navigationcl a:hover, .tech-navigationcl a:focus {
    color: #e91a24;
}
.menu-item-has-children>a:hover::after {
	color: #e91a24;
}
.current-menu-item a{
	color: #e91a24;
}
.tech-navbar-togglecl {
    display: none;
}

.sub-menu {
    display: none;
    position: absolute;
    left: 0;
    background: #e3b1b3;
    width: 180px;
    text-align: left;
    padding: 10px 0;
    box-shadow: 0 0 6px #ddd;
    top: 34px;
    word-break: break-word;
    z-index: 999;
}

.menu-item:hover .sub-menu {
    display: block;
}

.sub-menu li {
    width: 100%;
}

.sub-menu .sub-menu {
    left: auto;
    right: 100%;
    top: -10px;

}

.nav-select .sub-menu>li>.sub-menu {
    display: none;
    position: absolute;

}

.nav-select .menu__list>li:hover>.sub-menu,
.nav-select .sub-menu>li:hover>.sub-menu {
    display: block;
}

.campaign-list-item_key-features ul li {
    list-style: none;

}

.campaign-list-item_key-features ul {
    padding-left: 0;
}


.aligncenter {

    display: block;
    margin: auto;
}

.tech-content-area table {
    margin: 25px 0;
    border-collapse: collapse;
    width: 100%;
}

th {
    border: 1px solid #ccc;
}

.tech-footer {
    text-align: center;
	background: linear-gradient(90deg,rgba(233, 26, 36, 0.29) 57%, rgba(0, 0, 0, 0.53) 94%); 
	padding:20px 0 10px;
}
.nav-menu li.menu-item-has-children:hover>a::after {
    transform: rotate(-180deg);
}
.box-image img {
    width: 100%;
}

@media only screen and (max-width: 579px) {
	   .tech-content-area table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
}
@media only screen and (max-width: 1599px) {
.sub-menu {
    left: -94px;
}
}
/*—-------------------------------------------------------*/
@media only screen and (max-width: 991px) {

    .menu-item-has-children>a::after,
    .sub-menu .menu-item-has-children>a::after {
        display: none;
    }

    .table-auto {
        overflow-x: scroll;
        width: 100%;
    }


    *:not(.simulator) {
        scrollbar-width: thin;
    }

    .tech-navigationcl {
        position: absolute;
        right: 0;
        top: 100%;
        width: 100%;
        cursor: pointer;
        text-align: left;
        background: #e3b1b3;
        left: auto;
        box-shadow: 0 0 4px #ddd;
        display: none;
        padding: 14px 14px 14px 0;
        Z-index:999;
    }

    .tech-navbar-togglecl {
        display: block !important;
    }

    .tech-navbar-togglecl {
       background-color: #050104;
        width: 40px;
        height: 40px;
        position: absolute;
        top: 20px;
        right: 15px;
        text-align: center;
        cursor: pointer;
        border-radius: 3px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: transparent;
    }

    .tech-navbar-togglecl span {
        width: 20px;
        height: 2px;
        background-color: #fff;
        display: inline-block;
        position: relative;
        top: 7px;
        right: 0;
    }

    .tech-navbar-togglecl span::before,
    .tech-navbar-togglecl span::after {
        content: "";
        position: absolute;
        background-color: #fff;
        width: 100%;
        height: 2px;
        left: 0;
        top: -7px;
    }

    .tech-navbar-togglecl span::after {
        top: 7px;
    }

    .tech-navigationcl li {
        position: relative;
        display: inline-block;
        Padding: 0 20px;
        margin: 0;
        width: 100%;
        box-sizing: border-box;

    }


    .tech-navigationcl a {
        font-size: 15px;
        color: #000;
        height: auto;
        padding: 5px 10px;
        margin: 0;
        line-height: 36px;
        text-align: center;
    }

    .tech-navigationcl ul {
        visibility: visible;
        position: relative;
        display: block;
        left: 0;
        top: 0;
        margin: 0 !important;
        width: 100%;
        padding: 0 !important;
    }

    .tech-navigationcl ul a {
        height: auto;
        width: 100%;
        overflow: visible;
        line-height: 26px;
        background-image: none;
        border-width: 0;
        text-align: left;
    }

    .tech-navigationcl li:hover>ul {
        visibility: visible;
        top: auto;
    }

    .tech-toggle-menu {
        position: absolute;
        right: -7px;
        width: 40px;
        height: 30px;
        font-size: 15px;
        transform: rotate(0deg);
        text-align: center;
        top: 7px;
        cursor: pointer;
        z-index: 999;
        display: block;
        color: #000;
    }
    .tech-toggle-menu i {
        transition: transform 0.3s ease;
    }
 
    .tech-toggle-menu.on i {
        transform: rotate(180deg);
    }
    .sub-menu .tech-toggle-menu {
        top: 10px;
    }

    .nav-select {
        display: inline-block;
        visibility: visible;
        width: 100%;
        text-align: left;
        margin: 0;
    }

    .sub-menu {
        display: block;
        position: relative;
        left: 0;
        background: transparent;
        width: 100%;
        text-align: left;
        padding: 0 !important;
        box-shadow: none;
        top: auto;
    }

    .sub-menu .sub-menu {
        left: 0;
        right: 0;
        top: 0;
    }

    .nav-select .sub-menu>li>.sub-menu {
        display: block;
        position: relative;

    }

    .nav-select .menu__list>li:hover>.sub-menu,
    .nav-select .sub-menu>li:hover>.sub-menu {
        display: block;
    }
    img.custom-logo {
	    max-width: 180px;
	    height: 60px;
	}
	.tech-navbar-togglecl {
		top: 13px;
		right: 0;
	}


}