@font-face {
    font-family: 'Noah Text';
    src: url('../fonts/Noah Text Thin.otf') format('opentype');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Noah Text';
    src: url('../fonts/Noah Text Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Noah Text';
    src: url('../fonts/Noah Text Medium.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Noah Text';
    src: url('../fonts/Noah Text Bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Noah Text';
    src: url('../fonts/Noah Text Black.otf') format('opentype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

body {
    font-family: 'Noah Text', Arial, sans-serif;
    font-weight: 400;
    color: #fff;
    font-size: 18px;
    line-height: 27px;
    background: #000;
}

*{
	margin: 0;
	padding: 0;
}
p{
	font-size: 14px;
	padding: 0 0 20px 0;
}
h1 {
	margin-top:3px;
	margin-bottom:25px;
}

ul,
li,
ol{
	padding: 0;
	margin: 0;
	list-style: none;
}
img{
	border: none;
	padding: 0;
	margin: 0;
}
.cls{
	clear: both;
}
a{
	outline: none;
	color: #d93913;
	text-decoration: none;
}

a:hover{
	color: #a92903;
	text-decoration: none;
}

.menuicon{
	position: absolute;
	right: 20px;
	top: 30px;
	cursor: pointer;
	display: none;
}
.mobilemenuheader{
	padding: 10px 10px;
	overflow: hidden;
	border-bottom: none;
}
.mobile-menu-logo{
	float: left;
	padding: 20px 0 0 0;
}
.mobile-menu-logo img{
	width: 100%;
	height: auto;
	display: inline-block;
	max-width: 100px;
}
.menu-close-button{
	float: right;
	cursor: pointer;
	margin: 10px 0 0 0;
}
.overlay-menu{
	position: fixed;
	top: 0;
	left: -200%;
	z-index: 999999;
	width: 100%;
	height: 100%;
	max-width: 480px;
	background-color: #000;
}
.overlay-menu--is-open{
	left: 0;
}
.menubox{
	padding: 20px 30px;
	overflow: hidden;
}
.menubox ul li{
	padding: 10px 0 10px 0;
}
.menubox ul li a{
	font-size:30px;
	padding:11px;
	display: block;
	text-decoration: none;
	color: #fff;
}
.menubox ul li a:hover{
	color: #d93913;
	text-decoration: none;
}

/* main style start here */

.row{
	display: flex;
	flex-wrap: wrap;
}
.container{
	max-width: 1160px;
	margin: 0 auto;
	position: relative;
	padding: 0 10px;
}
.header-area{
	width: 100%;
	height: 100px;
	left: 0;
	top: 0;
	z-index: 99999;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
	background: #000000;
	position: fixed;
}
.header-container{
	position: relative;
	margin: 0 100px 0 100px;
}
.header-middle{
	position: absolute;
	left: 50%;
	top: 0;
	margin: 0 0 0 -75px;
}
.logo{
	margin-top: 0;
}
.navigation{
	text-align: center;
	padding: 35px 0 0 0;
}
.navigation ul li{
	position: relative;
	display: inline-block;
	padding: 0 3.5% 0 3.5%;
}
.navigation ul li a{
	font-size: 24px;
	font-weight: 600;
	display: block;
	padding: 0 15px 30px 55px;
	color: #fff;
	text-decoration: none;
}
.navigation ul li a:hover{
	color: #d93913;
	text-decoration: none;
}
.sticky .navigation ul li a:hover{
	color: #d93913;
	text-decoration: none;
}
.navigation ul li ul{
	width: 160px;
	position: absolute;
	top: 60px;
	padding: 20px;
	left: auto;
	background: #000;
	text-align: left;
	visibility: hidden;
	margin: 0 0 0 -20px;
	z-index: 99999;
}
.navigation ul li ul li{
	width: 100%;
	text-align: left;
	padding: 10px 0;
}
.navigation ul li ul li a{
	padding: 0;
}
.navigation ul li ul li a:hover{
	color: #d93913;
	text-decoration: none;
}
.navigation ul li ul li:first-child{
	border-top: none;
}
.navigation ul li:hover>ul{
	visibility: visible;
}
.banner-area{
	padding: 0;
	position: relative;
	margin: 100px 0 0 0;
}

.about-area {
    /* Add the background image here */
    background-image: url('../images/bg-space.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    /* Keep your existing padding and overflow */
    padding: 100px 0 100px 0;
    overflow: hidden;
    /* Optional: Keep parallax if you like the effect of text moving over stars */
    background-attachment: fixed;
}
@media (max-width: 768px) {
    .about-area {
        background-attachment: scroll;
        padding: 50px 0 50px 0; /* Optional: reduce padding on mobile */
    }
}

.about-content{
	overflow: hidden;
}
.about-content-right{
	width: 47%;
	float: right;
}
.about-picture img{
	width: 100%;
	height: auto;
	display: block;
}
.about-content-left{
	width: 45%;
	float: left;
}
.about-info{
	text-align: center;
	overflow: hidden;
	padding: 50px 0 0 0;
}
.about-info h1{
	font-weight: 700;
	font-size: 36px;
	line-height: 40px;
	padding: 0 0 40px 0;
}
.about-info p{
font-size: 16px;
	line-height: 24px;
	padding: 0 0 25px 0;
}
.read-more a{
	display: inline-block;
	padding: 12px 45px 12px 45px;
	background: #a92903;
	color: #fff;
	text-decoration: none;
	font-weight: 700;
}
.read-more a:hover{
	background: #d93913;
	color: #fff;
}
.home-product-area{
	background: #000000;
	padding: 50px 0 50px 0;
	overflow: hidden;
}
.single-product{
	margin: 0 10%;
}
.services-area{
	background: #000;
	padding: 70px 0;
	overflow: hidden;
}
.services-item{
	width: 18%;
	margin: 1% 1% 1% 1%;
}
.services-inner{
	text-align: center;
	overflow: hidden;
}
.services-icon{
	padding: 0 0 10px 0;
}

.services-icon img {
	width: 100px;
	height: 100px;
	display: block;
}

.services-inner {
	font-size: 19px;<br>
	line-height: 1px;
	padding-bottom: 5px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
}

.footer-area{
	background: #000;
	padding: 70px 0;
	overflow: hidden;
	color: #fff;
}
.footer-col{
	width: 25%;
}
.footer-col-inner{
	padding: 0 10px 0 0;
	overflow: hidden;
}
h4.footer-title{
	font-size: 18px;
	padding: 0 0 20px 0;
}
.footer-col-inner p{
	line-height: 24px;
	padding: 0 0 20px 0;
}
.footer-col-inner ul li{
	padding: 0 0 10px 0;
}
.footer-col-inner a{
	color: #fff;
	text-decoration: none;
}
.footer-col-inner a:hover{
	color: #d93913;
	text-decoration: none;
}
.contact{
	padding: 15px 0 0 0;
}
.contact a{
	display: inline-block;
	padding: 12px 45px 12px 45px;
	background: #a92903;
	color: #fff;
	text-decoration: none;
	font-weight: 700;
}
.contact a:hover{
	background: #d93913;
	color: #fff;
}

/* Gallery logic scoped to this container only */
.gallery-container {
    --gal-roundness: 5px;
    --gal-speed: 0.2s;
    --gal-glow: rgba(255, 255, 255, 0.5);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
    padding: 40px;
    min-height: 100vh;
}
.gallery-item {
    position: relative;
    width: 200px;
    height: 200px;
    border-radius: var(--gal-roundness);
    overflow: hidden;
    background: #111;
    border: 1px solid #1a1a1a;
    transition: border-color var(--gal-speed), box-shadow var(--gal-speed);
}
.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: brightness(var(--gal-dim)) saturate(0.8);
    transition: filter var(--gal-speed) ease;
}
.gallery-item:hover {
    border-color: #555;
    box-shadow: 0 0 15px var(--gal-glow);
    z-index: 2;
}
.gallery-item:hover img {
    filter: brightness(1.2) saturate(1.2);
}

#fbBox { background-color: #000 !important; }

.moviegallery-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;              /* controls both horizontal & vertical spacing */
}
.moviegallery-item {
	box-sizing: border-box;
	width: 22%;             /* 4 per row on desktop, tweak as needed */
	position: relative;
	border-radius: 11px;
	overflow: hidden;
	background: #111;
	border: 1px solid #333;
	transition: border-color var(--gal-speed), box-shadow var(--gal-speed);
}
/* Mobile */
@media (max-width: 800px) {
    .moviegallery-item {
        width: 48%;
    }
}

.gallery-nav {
    max-width: 800px;      /* Hier kap je de breedte af */
    margin: 5px auto;     /* Centreert de box */
    text-align: center;    /* Zet de links in het midden */
    line-height: 2;        /* Geeft wat ruimte tussen de regels als ze omhoog klappen */
    word-wrap: break-word; /* Zorgt dat lange namen niet uit de box lopen */
}

.gallery-nav a {
    text-decoration: none;
    font-weight: bold;
    margin:0 5px 0 5px;
}

.gallery-nav a:hover {
}

/* NEW ARTICLE */

.content-block {
    margin: 20px 0;
}

/* FLOAT THE WHOLE BLOCK */
.content-block.align-left {
    float: left;
    margin: 0 25px 15px 0;
    width: 40%;
    max-width: 420px;
}

.content-block.align-right {
    float: right;
    margin: 0 0 15px 25px;
    width: 40%;
    max-width: 420px;
}

.content-block.align-center {
    text-align: center;
    width: 100%;
}

.content-block.align-center .content-image {
    width: 60%;
    max-width: 600px;
}

.content-image {
    width: 100%;
    height: auto;
}