/*-----------------------------------------------------------------------------------
	VisualLee
	Author: Lee Leong
	Version: 1.0
-----------------------------------------------------------------------------------*/
html {
  scroll-behavior: smooth; /* Enables smooth scrolling */
}

body{
	margin:0;
	padding:0;
    background:#FFFFFF;
    overflow-x:hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.page-container{overflow: hidden;} /* Prevents unwanted scroll space when scroll FX used. */
a,button{transition: background .3s ease-in-out;outline: none!important;} /* Prevent blue selection glow on Chrome and Safari */
a:hover{text-decoration: none; cursor:pointer;}
.scroll-fx-lock-init{position:fixed!important;top: 0;bottom: 0;left: :0;right: 0;z-index:99999;} /* ScrollFX Lock */
.blocs-grid-container{display: grid!important;grid-template-columns: 1fr 1fr;grid-template-rows: auto auto;column-gap: 1.5rem;row-gap: 1.5rem;} /* CSS Grid */
nav .dropdown-menu /*  .nav-link{color:rgba(255,255,255,1)!important;} Maintain Downdown Menu Link Color in Navigation */
/* nav .dropdown-menu .nav-link{color:rgba(255,255,255,1)!important;} Maintain Downdown Menu Link Color in Navigation in Darkmode */


/* Preloader */

.page-preloader{position: fixed;top: 0;bottom: 0;width: 100%;z-index:100000;background:#FFFFFF url("img/pageload-spinner.gif") no-repeat center center;animation-name: preloader-fade;animation-delay: 2s;animation-duration: 0.5s;animation-fill-mode: both;}
.preloader-complete{animation-delay:0.1s;}
@keyframes preloader-fade {0% {opacity: 1;visibility: visible;}100% {opacity: 0;visibility: hidden;}}

/* = Web Fonts
-------------------------------------------------------------- */
/* Zuume-MediumItalic */
@font-face {
	font-family:'Zuume-MediumItalic';
	src: url('fonts/Zuume-MediumItalic/Zuume-MediumItalic.woff2');
	src: url('fonts/Zuume-MediumItalic/Zuume-MediumItalic.woff2') format('woff2'),
	url('fonts/Zuume-MediumItalic/Zuume-MediumItalic.woff') format('woff'),
	url('fonts/Zuume-MediumItalic/Zuume-MediumItalic.eot?#iefix') format('embedded-opentype'),
	url('fonts/Zuume-MediumItalic/Zuume-MediumItalic.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
	font-display:swap;
}

/* Zuume-Black */
@font-face {
	font-family: 'Zuume-Black';
	src: url('fonts/Zuume-Black/Zuume-Black.woff2') format('woff2'),
		 url('fonts/Zuume-Black/Zuume-Black.woff') format('woff'),
		 url('fonts/Zuume-Black/Zuume-Black.eot?#iefix') format('embedded-opentype'),
		 url('fonts/Zuume-Black/Zuume-Black.ttf') format('truetype');
	font-weight: 900;
	font-style: normal;
	font-display: swap;
}

/* Zuume-Black (Italic) */
@font-face {
	font-family: 'Zuume-Black';
	src: url('fonts/Zuume-BlackItalic/Zuume-BlackItalic.woff2') format('woff2'),
		 url('fonts/Zuume-BlackItalic/Zuume-BlackItalic.woff') format('woff'),
		 url('fonts/Zuume-BlackItalic/Zuume-BlackItalic.eot?#iefix') format('embedded-opentype'),
		 url('fonts/Zuume-BlackItalic/Zuume-BlackItalic.ttf') format('truetype');
	font-weight: 900;
	font-style: italic;
	font-display: swap;
}

/* Zuume-Bold */
@font-face {
	font-family: 'Zuume-Bold';
	src: url('fonts/Zuume-Bold/Zuume-Bold.woff2') format('woff2'),
		 url('fonts/Zuume-Bold/Zuume-Bold.woff') format('woff'),
		 url('fonts/Zuume-Bold/Zuume-Bold.eot?#iefix') format('embedded-opentype'),
		 url('fonts/Zuume-Bold/Zuume-Bold.ttf') format('truetype');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

/* Zuume-BoldItalic */
@font-face {
	font-family: 'Zuume-Bold';
	src: url('fonts/Zuume-BoldItalic/Zuume-BoldItalic.woff2') format('woff2'),
		 url('fonts/Zuume-BoldItalic/Zuume-BoldItalic.woff') format('woff'),
		 url('fonts/Zuume-BoldItalic/Zuume-BoldItalic.eot?#iefix') format('embedded-opentype'),
		 url('fonts/Zuume-BoldItalic/Zuume-BoldItalic.ttf') format('truetype');
	font-weight: 700;
	font-style: italic;
	font-display: swap;
}

/* Zuume-ExtraBold */
@font-face {
	font-family: 'Zuume-ExtraBold';
	src: url('fonts/Zuume-ExtraBold/Zuume-ExtraBold.woff2') format('woff2'),
		 url('fonts/Zuume-ExtraBold/Zuume-ExtraBold.woff') format('woff'),
		 url('fonts/Zuume-ExtraBold/Zuume-ExtraBold.eot?#iefix') format('embedded-opentype'),
		 url('fonts/Zuume-ExtraBold/Zuume-ExtraBold.ttf') format('truetype');
	font-weight: 800;
	font-style: normal;
	font-display: swap;
}

/* Zuume-ExtraBoldItalic */
@font-face {
	font-family: 'Zuume-ExtraBold';
	src: url('fonts/Zuume-ExtraBoldItalic/Zuume-ExtraBoldItalic.woff2') format('woff2'),
		 url('fonts/Zuume-ExtraBoldItalic/Zuume-ExtraBoldItalic.woff') format('woff'),
		 url('fonts/Zuume-ExtraBoldItalic/Zuume-ExtraBoldItalic.eot?#iefix') format('embedded-opentype'),
		 url('fonts/Zuume-ExtraBoldItalic/Zuume-ExtraBoldItalic.ttf') format('truetype');
	font-weight: 800;
	font-style: italic;
	font-display: swap;
}

/* Zuume-ExtraLight */
@font-face {
	font-family: 'Zuume-ExtraLight';
	src: url('fonts/Zuume-ExtraLight/Zuume-ExtraLight.woff2') format('woff2'),
		 url('fonts/Zuume-ExtraLight/Zuume-ExtraLight.woff') format('woff'),
		 url('fonts/Zuume-ExtraLight/Zuume-ExtraLight.eot?#iefix') format('embedded-opentype'),
		 url('fonts/Zuume-ExtraLight/Zuume-ExtraLight.ttf') format('truetype');
	font-weight: 200;
	font-style: normal;
	font-display: swap;
}

/* Zuume-ExtraLightItalic */
@font-face {
	font-family: 'Zuume-ExtraLight';
	src: url('fonts/Zuume-ExtraLightItalic/Zuume-ExtraLightItalic.woff2') format('woff2'),
		 url('fonts/Zuume-ExtraLightItalic/Zuume-ExtraLightItalic.woff') format('woff'),
		 url('fonts/Zuume-ExtraLightItalic/Zuume-ExtraLightItalic.eot?#iefix') format('embedded-opentype'),
		 url('fonts/Zuume-ExtraLightItalic/Zuume-ExtraLightItalic.ttf') format('truetype');
	font-weight: 200;
	font-style: italic;
	font-display: swap;
}

/* Zuume-Italic */
@font-face {
	font-family: 'Zuume-Italic';
	src: url('fonts/Zuume-Italic/Zuume-Italic.woff2') format('woff2'),
		 url('fonts/Zuume-Italic/Zuume-Italic.woff') format('woff'),
		 url('fonts/Zuume-Italic/Zuume-Italic.eot?#iefix') format('embedded-opentype'),
		 url('fonts/Zuume-Italic/Zuume-Italic.ttf') format('truetype');
	font-weight: normal;
	font-style: italic;
	font-display: swap;
}

/* Zuume-Light */
@font-face {
	font-family: 'Zuume-Light';
	src: url('fonts/Zuume-Light/Zuume-Light.woff2') format('woff2'),
		 url('fonts/Zuume-Light/Zuume-Light.woff') format('woff'),
		 url('fonts/Zuume-Light/Zuume-Light.eot?#iefix') format('embedded-opentype'),
		 url('fonts/Zuume-Light/Zuume-Light.ttf') format('truetype');
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}

/* Zuume-LightItalic */
@font-face {
	font-family: 'Zuume-Light';
	src: url('fonts/Zuume-LightItalic/Zuume-LightItalic.woff2') format('woff2'),
		 url('fonts/Zuume-LightItalic/Zuume-LightItalic.woff') format('woff'),
		 url('fonts/Zuume-LightItalic/Zuume-LightItalic.eot?#iefix') format('embedded-opentype'),
		 url('fonts/Zuume-LightItalic/Zuume-LightItalic.ttf') format('truetype');
	font-weight: 300;
	font-style: italic;
	font-display: swap;
}

/* Zuume-Medium */
@font-face {
	font-family: 'Zuume-Medium';
	src: url('fonts/Zuume-Medium/Zuume-Medium.woff2') format('woff2'),
		 url('fonts/Zuume-Medium/Zuume-Medium.woff') format('woff'),
		 url('fonts/Zuume-Medium/Zuume-Medium.eot?#iefix') format('embedded-opentype'),
		 url('fonts/Zuume-Medium/Zuume-Medium.ttf') format('truetype');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

/* Zuume-Regular */
@font-face {
	font-family: 'Zuume-Regular';
	src: url('fonts/Zuume-Regular/Zuume-Regular.woff2') format('woff2'),
		 url('fonts/Zuume-Regular/Zuume-Regular.woff') format('woff'),
		 url('fonts/Zuume-Regular/Zuume-Regular.eot?#iefix') format('embedded-opentype'),
		 url('fonts/Zuume-Regular/Zuume-Regular.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

/* Zuume-SemiBold */
@font-face {
	font-family: 'Zuume-SemiBold';
	src: url('fonts/Zuume-SemiBold/Zuume-SemiBold.woff2') format('woff2'),
		 url('fonts/Zuume-SemiBold/Zuume-SemiBold.woff') format('woff'),
		 url('fonts/Zuume-SemiBold/Zuume-SemiBold.eot?#iefix') format('embedded-opentype'),
		 url('fonts/Zuume-SemiBold/Zuume-SemiBold.ttf') format('truetype');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

/* DMSans */
@font-face {
	font-family: 'DMSans-Black';
	src: url('fonts/DMSans/DMSans-Black.ttf') format('truetype');
	font-weight: 900;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'DMSans-BlackItalic';
	src: url('fonts/DMSans/DMSans-BlackItalic.ttf') format('truetype');
	font-weight: 900;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'DMSans-Bold';
	src: url('fonts/DMSans/DMSans-Bold.ttf') format('truetype');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'DMSans-BoldItalic';
	src: url('fonts/DMSans/DMSans-BoldItalic.ttf') format('truetype');
	font-weight: 700;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'DMSans-ExtraBold';
	src: url('fonts/DMSans/DMSans-ExtraBold.ttf') format('truetype');
	font-weight: 800;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'DMSans-ExtraBoldItalic';
	src: url('fonts/DMSans/DMSans-ExtraBoldItalic.ttf') format('truetype');
	font-weight: 800;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'DMSans-ExtraLight';
	src: url('fonts/DMSans/DMSans-ExtraLight.ttf') format('truetype');
	font-weight: 200;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'DMSans-ExtraLightItalic';
	src: url('fonts/DMSans/DMSans-ExtraLightItalic.ttf') format('truetype');
	font-weight: 200;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'DMSans-Italic';
	src: url('fonts/DMSans/DMSans-Italic.ttf') format('truetype');
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'DMSans-Light';
	src: url('fonts/DMSans/DMSans-Light.ttf') format('truetype');
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'DMSans-LightItalic';
	src: url('fonts/DMSans/DMSans-LightItalic.ttf') format('truetype');
	font-weight: 300;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'DMSans-Medium';
	src: url('fonts/DMSans/DMSans-Medium.ttf') format('truetype');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'DMSans-MediumItalic';
	src: url('fonts/DMSans/DMSans-MediumItalic.ttf') format('truetype');
	font-weight: 500;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'DMSans-Regular';
	src: url('fonts/DMSans/DMSans-Regular.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'DMSans-SemiBold';
	src: url('fonts/DMSans/DMSans-SemiBold.ttf') format('truetype');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'DMSans-SemiBoldItalic';
	src: url('fonts/DMSans/DMSans-SemiBoldItalic.ttf') format('truetype');
	font-weight: 600;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'DMSans-Thin';
	src: url('fonts/DMSans/DMSans-Thin.ttf') format('truetype');
	font-weight: 100;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'DMSans-ThinItalic';
	src: url('fonts/DMSans/DMSans-ThinItalic.ttf') format('truetype');
	font-weight: 100;
	font-style: italic;
	font-display: swap;
}




/* = Blocs
-------------------------------------------------------------- */

.bloc{
	width:100%;
	clear:both;
	background: 50% 50% no-repeat;
	padding:0 20px;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	position:relative;
	display:flex;
}
.bloc .container{
	padding-left:0;
	padding-right:0;
	position:relative;
}


/* Sizes */

.bloc-md{
	padding:50px 20px;
}
.bloc-sm{
	padding:20px;
}

/* = Full Width Blocs 
-------------------------------------------------------------- */

.full-width-bloc{
	padding-left:0;
	padding-right:0;
}
.full-width-bloc .row{
	margin-left:0;
	margin-right:0;
}
.full-width-bloc .container{
	width:100%;
	max-width:100%!important;
}
.full-width-bloc .carousel img{
	width:100%;
	height:auto;
}

/* Background Styles */

.bg-center,.bg-l-edge,.bg-r-edge,.bg-t-edge,.bg-b-edge,.bg-tl-edge,.bg-bl-edge,.bg-tr-edge,.bg-br-edge,.bg-repeat{
	-webkit-background-size: cover!important;
	-moz-background-size: cover!important;
	-o-background-size: cover!important;
	background-size: cover!important;
    background-position: center;
	background-repeat: no-repeat;
}

.bg-center{
	-webkit-background-size: cover;
    background-position: center;
	background-repeat: no-repeat;
}


/* Background Textures */

.bloc-bg-texture::before{
	content:"";
	background-size: 2px 2px;
	position: absolute;
	top: 0;
	bottom: 0;
	left:0;
	right:0;
}

.texture-pixels::before{
	background: url("img/texture-pixel.gif");
	background-size: 2px 2px;
}


/* Background Effects */

.parallax__container {
	clip: rect(0, auto, auto, 0);
	height: 100%;
	left: 0;
	overflow: hidden;
	position: absolute;
	top: 0;
	width: 100%;
	z-index:-1;
}
.parallax {
	position: fixed;
	top: 0;
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
	width: 100%;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

/* Dark theme */

.d-bloc{
	color:rgba(255,255,255,.7);
}
.d-bloc button:hover{
	color:rgba(255,255,255,.9);
}
.d-bloc .icon-round,.d-bloc .icon-square,.d-bloc .icon-rounded,.d-bloc .icon-semi-rounded-a,.d-bloc .icon-semi-rounded-b{
	border-color:rgba(255,255,255,.9);
}
.d-bloc .divider-h span{
	border-color:rgba(255,255,255,.2);
}
.d-bloc .a-btn,.d-bloc .navbar a, .d-bloc a .icon-sm, .d-bloc a .icon-md, .d-bloc a .icon-lg, .d-bloc a .icon-xl, .d-bloc h1 a, .d-bloc h2 a, .d-bloc h3 a, .d-bloc h4 a, .d-bloc h5 a, .d-bloc h6 a, .d-bloc p a{
	color:rgba(255,255,255,.6);
}
.d-bloc .a-btn:hover,.d-bloc .navbar a:hover,.d-bloc a:hover .icon-sm, .d-bloc a:hover .icon-md, .d-bloc a:hover .icon-lg, .d-bloc a:hover .icon-xl, .d-bloc h1 a:hover, .d-bloc h2 a:hover, .d-bloc h3 a:hover, .d-bloc h4 a:hover, .d-bloc h5 a:hover, .d-bloc h6 a:hover, .d-bloc p a:hover{
	color:rgba(255,255,255,1);
}
.d-bloc .navbar-toggle .icon-bar{
	background:rgba(255,255,255,1);
}
.d-bloc .btn-wire,.d-bloc .btn-wire:hover{
	color:rgba(255,255,255,1);
	border-color:rgba(255,255,255,1);
}
.d-bloc .card{
	color:rgba(0,0,0,.5);
}
.d-bloc .card button:hover{
	color:rgba(0,0,0,.7);
}
.d-bloc .card icon{
	border-color:rgba(0,0,0,.7);
}
.d-bloc .card .divider-h span{
	border-color:rgba(0,0,0,.1);
}
.d-bloc .card .a-btn{
	color:rgba(0,0,0,.6);
}
.d-bloc .card .a-btn:hover{
	color:rgba(0,0,0,1);
}
.d-bloc .card .btn-wire, .d-bloc .card .btn-wire:hover{
	color:rgba(0,0,0,.7);
	border-color:rgba(0,0,0,.3);
}


/* Light theme */

.d-bloc .card,.l-bloc{
	color:rgba(0,0,0,.5);
}
.d-bloc .card button:hover,.l-bloc button:hover{
	color:rgba(0,0,0,.7);
}
.l-bloc .icon-round,.l-bloc .icon-square,.l-bloc .icon-rounded,.l-bloc .icon-semi-rounded-a,.l-bloc .icon-semi-rounded-b{
	border-color:rgba(0,0,0,.7);
}
.d-bloc .card .divider-h span,.l-bloc .divider-h span{
	border-color:rgba(0,0,0,.1);
}
.d-bloc .card .a-btn,.l-bloc .a-btn,.l-bloc .navbar a,.l-bloc a .icon-sm, .l-bloc a .icon-md, .l-bloc a .icon-lg, .l-bloc a .icon-xl, .l-bloc h1 a, .l-bloc h2 a, .l-bloc h3 a, .l-bloc h4 a, .l-bloc h5 a, .l-bloc h6 a, .l-bloc p a{
	color:rgba(0,0,0,.6);
}
.d-bloc .card .a-btn:hover,.l-bloc .a-btn:hover,.l-bloc .navbar a:hover, .l-bloc a:hover .icon-sm, .l-bloc a:hover .icon-md, .l-bloc a:hover .icon-lg, .l-bloc a:hover .icon-xl, .l-bloc h1 a:hover, .l-bloc h2 a:hover, .l-bloc h3 a:hover, .l-bloc h4 a:hover, .l-bloc h5 a:hover, .l-bloc h6 a:hover, .l-bloc p a:hover{
	color:rgba(0,0,0,1);
}
.l-bloc .navbar-toggle .icon-bar{
	color:rgba(0,0,0,.6);
}
.d-bloc .card .btn-wire,.d-bloc .card .btn-wire:hover,.l-bloc .btn-wire,.l-bloc .btn-wire:hover{
	color:rgba(0,0,0,.7);
	border-color:rgba(0,0,0,.3);
}

/* Background Effects */

.parallax__container {
	clip: rect(0, auto, auto, 0);
	height: 100%;
	left: 0;
	overflow: hidden;
	position: absolute;
	top: 0;
	width: 100%;
	z-index:-1;
}
.parallax {
	position: fixed;
	top: 0;
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
	width: 100%;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

/* = NavBar
-------------------------------------------------------------- 

.navbar-dark .nav .dropdown-menu .nav-link{
	color: rgb(255, 255, 255);
}*/

/* = Sticky Nav
-------------------------------------------------------------- */

.sticky-nav.sticky{
	position:fixed;
	top: 0;
    left: 0; /* Ensure it starts from the left edge */
    right: 0; /* Ensure it extends to the right edge */
    width: 100%; /* Ensure it spans the full width */
	z-index:1000;
	box-shadow:0 1px 2px rgba(0,0,0,.3);
	 transition: all .2s ease-out;
}
/* Navbar Icon */
.svg-menu-icon{
	fill: none;
	stroke: rgba(0,0,0,0.5);
	stroke-width: 3px;
	fill-rule: evenodd;
}
.navbar-dark .svg-menu-icon{
	stroke: rgba(255,255,255,1);
}
.menu-icon-thin-bars{
	stroke-width: 1px;
}
.menu-icon-thick-bars{
	stroke-width: 5px;
}
.menu-icon-rounded-bars{
	stroke-width: 3px;
	stroke-linecap: round;
}
.menu-icon-filled{
	fill: rgba(0,0,0,0.5);
	stroke-width: 0px;
}
.navbar-dark .menu-icon-filled{
	fill: rgba(255,255,255,0.5);
}
.navbar-toggler-icon{
	background: none!important;
	pointer-events: none;
	width: 33px;
	height: 33px;
}
/* Handle Multi Level Navigation */
.dropdown-menu .dropdown-menu{
	border:none}
@media (min-width:576px){
	
.navbar-expand-sm .dropdown-menu .dropdown-menu{
	border:1px solid rgba(0,0,0,0);
	position:absolute;
	left:100%;
	top:-7px}.navbar-expand-sm .dropdown-menu .submenu-left{
	right:100%;
	left:auto}}@media (min-width:768px){
	.navbar-expand-md .dropdown-menu .dropdown-menu{
	border:1px solid rgba(0,0,0,0);
	border:1px solid rgba(0,0,0,0);
	position:absolute;
	left:100%;
	top:-7px}.navbar-expand-md .dropdown-menu .submenu-left{
	right:100%;
	left:auto}}@media (min-width:992px){
	.navbar-expand-lg .dropdown-menu .dropdown-menu{
	border:1px solid rgba(0,0,0,0);
	position:absolute;
	left:100%;
	top:-7px}.navbar-expand-lg .dropdown-menu .submenu-left{
	right:100%;
	left:auto}
}

/* Apply increased spacing for mobile and tablet screens when menu is collapsed */
    
@media (max-width: 768px) { /* Adjust max-width as needed */
    .navbar-collapse {
        opacity: 0; /* Initially fully transparent */
        transform: translateY(-10px); /* Start slightly above its original position */
        height: 0; /* Collapse to 0 height initially */
        overflow: hidden; /* Prevent overflowing content */
        transition: opacity 0.3s ease, transform 0.3s ease, height 0.3s ease; /* Smooth effect */
    }

    /* When navbar is expanded (after the collapse class is removed) */
    .navbar-collapse.show {
        opacity: 1; /* Make fully visible */
        transform: translateY(0); /* Reset to original position */
        height: auto; /* Expand to the full height of the content */
        border:0px;
    }
}

    
@media (max-width: 768px) { /* Adjust max-width as needed */
    .nav-item {
    padding-top:15px;
}
    
@media (max-width: 768px) { /* Adjust max-width as needed */
    .nav-item-padding-top {
    padding-top: 35px;
}
    }

@media (max-width: 768px) { /* Adjust max-width as needed */
    .nav-item-padding-bottom {
    padding-top:15px;
    margin-bottom: 25px;
}
    }

/* Navbar expanded state */
.navbar-collapse.show {
    opacity: 1; /* Fully visible */
    transform: scaleY(1); /* Full height */
}
}
/* = Open menus on hover
-------------------------------------------------------------- */
@media (min-width: 992px){
	.hover-open-submenu li:hover > .dropdown > .dropdown-menu, .hover-open-submenu .dropdown-menu > li:hover .dropdown-menu{
	display: block;
}
.hover-open-submenu li .dropdown .dropdown-menu{
	margin-top:0;
}
}

/* = Buttons
-------------------------------------------------------------- */

.btn-d,.btn-d:hover,.btn-d:focus{
	color:#FFF;
	background:rgba(0,0,0,.3);
}

/* Prevent ugly blue glow on chrome and safari */
button{
	outline: none!important;
}

.btn-sq{
	border-radius: 0px;
}





.card-sq, .card-sq .card-header, .card-sq .card-footer{
	border-radius:0;
}
.card-rd{
	border-radius:30px;
}
.card-rd .card-header{
	border-radius:29px 29px 0 0;
}
.card-rd .card-footer{
	border-radius:0 0 29px 29px;
}
/* = Masonary
-------------------------------------------------------------- */
.card-columns .card {
	margin-bottom: 0.75rem;
}
@media (min-width: 576px) {
	.card-columns {
	-webkit-column-count: 3;
	-moz-column-count: 3;
	column-count: 3;
	-webkit-column-gap: 1.25rem;
	-moz-column-gap: 1.25rem;
	column-gap: 1.25rem;
	orphans: 1;
	widows: 1;
}
.card-columns .card {
	display: inline-block;
	width: 100%;
}
}




/* ScrollToTop button */
.scrollToTop {
    width: 100px;
    height: 100px;
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: block;
    background-repeat: no-repeat;
    background-size: contain;
    border:0;
    opacity: 1; /* Ensure it's visible */
    z-index: 999;
    cursor: pointer;
    padding: 0; /* Remove padding if there's any */
    overflow: hidden; /* Prevent images from overflowing the button */
    border-radius: 50%; /* Ensure the button is circular */
    background-image: url('img/WhatsApp_Sticky_Button.png'); /* Set the default image */
    transition: background-image 0.5s ease, box-shadow 0.3s ease;
    box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.2); /* Enhance shadow on hover */
}

/* Hover effect */
.scrollToTop:hover {
    background-image: url('img/WhatsApp_Sticky_Button_Hover.png'); /* Set the hover image */
    box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.4); /* Enhance shadow on hover */
    border:0;
}

/* Optional: Show the button on scroll down */
.showScrollTop {
    opacity: 1;
    pointer-events: all;
    display: block;
    opacity: 1;
}



/* = Custom Styling
-------------------------------------------------------------- */

.container{
	max-width:1140px;
}

.navbar-logo{
	text-transform:none;
	text-decoration:none;
	font-size:20px;
}
.img-style{
	width:168px;
}
label{
	font-family:"Zuume-MediumItalic";
	color:var(--swatch-var-4517)!important;
	font-size:16px;
	letter-spacing:05px;
	font-weight:normal;
}

.heroimg{
  max-width: 100%; /* Image will never exceed the container width */
  height: auto;    /* Height scales proportionally */
  display: block;  /* Prevents inline image gaps (optional) */
}
.p-style{
	width:100%;
	font-family: 'DMSans', sans-serif; /* Added fallback to sans-serif */
	font-size:18px;
}

.p-style-white {
    width: 100%;
    font-family: 'DMSans', sans-serif; /* Added fallback to sans-serif */
    color: white;
    font-weight: 400; /* Explicitly set weight */
    font-size:18px;
}

.p-style-white-smallprint {
    width: 100%;
    font-family: 'DMSans', sans-serif; /* Added fallback to sans-serif */
    color: white;
    font-weight: 400; /* Explicitly set weight */
    font-size:14px;
}

.btn-style{
	width:100%;
}

/* Default padding for small screens (576px and below) */
.services-padding-fix {
    padding-top: 50px;
    padding-bottom: 10px;
}

/* For screens between 576px and 768px */
@media (max-width: 768px) {
    .services-padding-fix {
        padding-top: 50px; /* Adjusted proportionally */
        padding-bottom: 30px;
    }
}

/* For screens between 769px and 991px */
@media (max-width: 991px) {
    .services-padding-fix {
        padding-top: 50px; /* Adjusted proportionally */
        padding-bottom: 30px;
    }
}

/* For screens above 992px */
@media (min-width: 992px) {
    .services-padding-fix {
        padding-top: 50px; /* Full screen (default value) */
        padding-bottom: 50px;
    }
}

/* Add right border to the Remote Color Grading div */
.remote-color-grading {
    border-right: 1px solid #70706C; /* Adjust thickness and color */
    padding-right: 0; /* To prevent extra space due to padding */
}

/* Add left border to the Visual Lee Grading Suite div */
.visuallee-color-grading {
    border-left: 1px solid #70706C; /* Adjust thickness and color */
    padding-left: 0; /* To prevent extra space due to padding */
}

.online-color-grading {
    padding-bottom:0px;
}

/* Media query for screens below 767px */
@media (max-width: 767px) {
    /* Remove right border for Remote Color Grading div on small screens */
    .remote-color-grading {
        border-right: 0; /* Remove border */
        padding-bottom:40px;
    }

    /* Remove left border for Visual Lee Grading Suite div on small screens */
    .visuallee-color-grading {
        border-left: 0; /* Remove border */
        padding-bottom:40px;
    }
    
    .online-color-grading {
    padding-bottom:40px;
    }
}



/* H1 Zuume */
.h1-style{
	font-family:"Zuume-Regular";
}

.h1-style-white-light {
    font-family:"Zuume-Light";
	color:white;
    font-size: 62px;
}

.h1-style-white-medium {
    font-family:"Zuume-Medium";
	color:white;
    font-size: 62px;
}

.h1-style-white-bold {
    font-family:"Zuume-Bold";
	color:white;
    font-size: 62px;
}


.h1-style-yellow-light {
    font-family:"Zuume-Light";
    font-weight: 300;
    color:#FCFF00;
    font-size: 62px;
}

.h1-style-yellow-regular {
    font-family:"Zuume-Regular";
    color:#FCFF00;
    font-size: 62px;
}

.h1-style-yellow-medium {
    font-family:"Zuume-Medium";
    color:#FCFF00;
    font-size: 62px;
}

.h1-style-yellow-bold {
    font-family:"Zuume-Bold";
    color:#FCFF00;
    font-size: 62px;
}

/* H2 Zuume */
/* White h2 Styles */
.h2-style-white-light {
    font-family: "Zuume-Light";
    color: white;
    font-size: 52px;
}

.h2-style-white-regular {
    font-family: "Zuume-Regular";
    color: white;
    font-size: 52px;
}

.h2-style-white-medium {
    font-family: "Zuume-Medium";
    color: white;
    font-size: 52px;
}

.h2-style-white-semibold {
    font-family: "Zuume-SemiBold";
    color: white;
    font-size: 52px;
}

.h2-style-white-bold {
    font-family: "Zuume-Bold";
    color: white;
    font-size: 52px;
}

.h2-style-white-extrabold {
    font-family: "Zuume-ExtraBold";
    color: white;
    font-size: 52px;
}

.h2-style-white-black {
    font-family: "Zuume-Black";
    color: white;
    font-size: 52px;
}

/* Yellow h2 Styles */
.h2-style-yellow-light {
    font-family: "Zuume-Light";
    color: #FCFF00;
    font-size: 52px;
}

.h2-style-yellow-regular {
    font-family: "Zuume-Regular";
    color: #FCFF00;
    font-size: 52px;
}

.h2-style-yellow-medium {
    font-family: "Zuume-Medium";
    color: #FCFF00;
    font-size: 52px;
}

.h2-style-yellow-semibold {
    font-family: "Zuume-SemiBold";
    color: #FCFF00;
    font-size: 52px;
}

.h2-style-yellow-bold {
    font-family: "Zuume-Bold";
    color: #FCFF00;
    font-size: 52px;
}

.h2-style-yellow-extrabold {
    font-family: "Zuume-ExtraBold";
    color: #FCFF00;
    font-size: 52px;
}

.h2-style-yellow-black {
    font-family: "Zuume-Black";
    color: #FCFF00;
    font-size: 52px;
}

/* Black h2 Styles */
.h2-style-black-light {
    font-family: "Zuume-Light";
    color: #000000;
    font-size: 52px;
}

.h2-style-black-regular {
    font-family: "Zuume-Regular";
    color: #000000;
    font-size: 52px;
}

.h2-style-black-medium {
    font-family: "Zuume-Medium";
    color: #000000;
    font-size: 52px;
}

.h2-style-black-semibold {
    font-family: "Zuume-SemiBold";
    color: #000000;
    font-size: 52px;
}

.h2-style-black-bold {
    font-family: "Zuume-Bold";
    color: #000000;
    font-size: 52px;
}

.h2-style-black-extrabold {
    font-family: "Zuume-ExtraBold";
    color: #000000;
    font-size: 52px;
}

.h2-style-black-black {
    font-family: "Zuume-Black";
    color: #000000;
    font-size: 52px;
}

/* H3 DMSans Styles */

/* White h3 Styles */
.h3-style-white-light {
    font-family: "DMSans-Light", sans-serif;
    color: white;
    font-size: 25px;
    font-weight: 300; /* Light */
}

.h3-style-white-regular {
    font-family: "DMSans-Regular", sans-serif;
    color: white;
    font-size: 25px;
    font-weight: 400; /* Regular */
}

.h3-style-white-medium {
    font-family: "DMSans-Medium", sans-serif;
    color: white;
    font-size: 25px;
    font-weight: 500; /* Medium */
}

.h3-style-white-semibold {
    font-family: "DMSans-SemiBold", sans-serif;
    color: white;
    font-size: 25px;
    font-weight: 600; /* SemiBold */
}

.h3-style-white-bold {
    font-family: "DMSans-Bold", sans-serif;
    color: white;
    font-size: 25px;
    font-weight: 700; /* Bold */
}

.h3-style-white-extrabold {
    font-family: "DMSans-ExtraBold", sans-serif;
    color: white;
    font-size: 25px;
    font-weight: 800; /* ExtraBold */
}

.h3-style-white-black {
    font-family: "DMSans-Black", sans-serif;
    color: white;
    font-size: 25px;
    font-weight: 900; /* Black */
}

/* Yellow h3 Styles */
.h3-style-yellow-light {
    font-family: "DMSans-Light", sans-serif;
    color: #FCFF00;
    font-size: 25px;
    font-weight: 300; /* Light */
}

.h3-style-yellow-regular {
    font-family: "DMSans-Regular", sans-serif;
    color: #FCFF00;
    font-size: 25px;
    font-weight: 400; /* Regular */
}

.h3-style-yellow-medium {
    font-family: "DMSans-Medium", sans-serif;
    color: #FCFF00;
    font-size: 25px;
    font-weight: 500; /* Medium */
}

.h3-style-yellow-semibold {
    font-family: "DMSans-SemiBold", sans-serif;
    color: #FCFF00;
    font-size: 25px;
    font-weight: 600; /* SemiBold */
}

.h3-style-yellow-bold {
    font-family: "DMSans-Bold", sans-serif;
    color: #FCFF00;
    font-size: 25px;
    font-weight: 700; /* Bold */
}

.h3-style-yellow-extrabold {
    font-family: "DMSans-ExtraBold", sans-serif;
    color: #FCFF00;
    font-size: 25px;
    font-weight: 800; /* ExtraBold */
}

.h3-style-yellow-black {
    font-family: "DMSans-Black", sans-serif;
    color: #FCFF00;
    font-size: 25px;
    font-weight: 900; /* Black */
}

/* Black h3 Styles */
.h3-style-black-light {
    font-family: "DMSans-Light", sans-serif;
    color: #000000;
    font-size: 25px;
    font-weight: 300; /* Light */
}

.h3-style-black-regular {
    font-family: "DMSans-Regular", sans-serif;
    color: #000000;
    font-size: 25px;
    font-weight: 400; /* Regular */
}

.h3-style-black-medium {
    font-family: "DMSans-Medium", sans-serif;
    color: #000000;
    font-size: 25px;
    font-weight: 500; /* Medium */
}

.h3-style-black-semibold {
    font-family: "DMSans-SemiBold", sans-serif;
    color: #000000;
    font-size: 25px;
    font-weight: 600; /* SemiBold */
}

.h3-style-black-bold {
    font-family: "DMSans-Bold", sans-serif;
    color: #000000;
    font-size: 25px;
    font-weight: 700; /* Bold */
}

.h3-style-black-extrabold {
    font-family: "DMSans-ExtraBold", sans-serif;
    color: #000000;
    font-size: 25px;
    font-weight: 800; /* ExtraBold */
}

.h3-style-black-black {
    font-family: "DMSans-Black", sans-serif;
    color: #000000;
    font-size: 25px;
    font-weight: 900; /* Black */
}

/* H4 DMSans Styles */

/* White h4 Styles */
.h4-style-white-light {
    font-family: "DMSans-Light", sans-serif;
    color: white;
    font-size: 20px;
    font-weight: 300; /* Light */
}

.h4-style-white-regular {
    font-family: "DMSans-Regular", sans-serif;
    color: white;
    font-size: 20px;
    font-weight: 400; /* Regular */
}

.h4-style-white-medium {
    font-family: "DMSans-Medium", sans-serif;
    color: white;
    font-size: 20px;
    font-weight: 500; /* Medium */
}

.h4-style-white-semibold {
    font-family: "DMSans-SemiBold", sans-serif;
    color: white;
    font-size: 20px;
    font-weight: 600; /* SemiBold */
}

.h4-style-white-bold {
    font-family: "DMSans-Bold", sans-serif;
    color: white;
    font-size: 20px;
    font-weight: 700; /* Bold */
}

.h4-style-white-extrabold {
    font-family: "DMSans-ExtraBold", sans-serif;
    color: white;
    font-size: 20px;
    font-weight: 800; /* ExtraBold */
}

.h4-style-white-black {
    font-family: "DMSans-Black", sans-serif;
    color: white;
    font-size: 20px;
    font-weight: 900; /* Black */
}

/* Yellow h4 Styles */
.h4-style-yellow-light {
    font-family: "DMSans-Light", sans-serif;
    color: #FCFF00;
    font-size: 20px;
    font-weight: 300; /* Light */
}

.h4-style-yellow-regular {
    font-family: "DMSans-Regular", sans-serif;
    color: #FCFF00;
    font-size: 20px;
    font-weight: 400; /* Regular */
}

.h4-style-yellow-medium {
    font-family: "DMSans-Medium", sans-serif;
    color: #FCFF00;
    font-size: 20px;
    font-weight: 500; /* Medium */
}

.h4-style-yellow-semibold {
    font-family: "DMSans-SemiBold", sans-serif;
    color: #FCFF00;
    font-size: 20px;
    font-weight: 600; /* SemiBold */
}

.h4-style-yellow-bold {
    font-family: "DMSans-Bold", sans-serif;
    color: #FCFF00;
    font-size: 20px;
    font-weight: 700; /* Bold */
}

.h4-style-yellow-extrabold {
    font-family: "DMSans-ExtraBold", sans-serif;
    color: #FCFF00;
    font-size: 20px;
    font-weight: 800; /* ExtraBold */
}

.h4-style-yellow-black {
    font-family: "DMSans-Black", sans-serif;
    color: #FCFF00;
    font-size: 20px;
    font-weight: 900; /* Black */
}

/* Black h4 Styles */
.h4-style-black-light {
    font-family: "DMSans-Light", sans-serif;
    color: #000000;
    font-size: 20px;
    font-weight: 300; /* Light */
}

.h4-style-black-regular {
    font-family: "DMSans-Regular", sans-serif;
    color: #000000;
    font-size: 20px;
    font-weight: 400; /* Regular */
}

.h4-style-black-medium {
    font-family: "DMSans-Medium", sans-serif;
    color: #000000;
    font-size: 20px;
    font-weight: 500; /* Medium */
}

.h4-style-black-semibold {
    font-family: "DMSans-SemiBold", sans-serif;
    color: #000000;
    font-size: 20px;
    font-weight: 600; /* SemiBold */
}

.h4-style-black-bold {
    font-family: "DMSans-Bold", sans-serif;
    color: #000000;
    font-size: 20px;
    font-weight: 700; /* Bold */
}

.h4-style-black-extrabold {
    font-family: "DMSans-ExtraBold", sans-serif;
    color: #000000;
    font-size: 20px;
    font-weight: 800; /* ExtraBold */
}

.h4-style-black-black {
    font-family: "DMSans-Black", sans-serif;
    color: #000000;
    font-size: 20px;
    font-weight: 900; /* Black */
}

/* p-style for DM Sans in all font weights */

/* White p Styles */
.p-style-white-light {
    font-family: "DMSans-Light", sans-serif;
    color: white;
    font-size: 18px;
}

.p-style-white-regular {
    font-family: "DMSans-Regular", sans-serif;
    color: white;
    font-size: 18px;
}

.p-style-white-medium {
    font-family: "DMSans-Medium", sans-serif;
    color: white;
    font-size: 18px;
}

.p-style-white-semibold {
    font-family: "DMSans-SemiBold", sans-serif;
    color: white;
    font-size: 18px;
}

.p-style-white-bold {
    font-family: "DMSans-Bold", sans-serif;
    color: white;
    font-size: 18px;
}

.p-style-white-extrabold {
    font-family: "DMSans-ExtraBold", sans-serif;
    color: white;
    font-size: 18px;
}

.p-style-white-black {
    font-family: "DMSans-Black", sans-serif;
    color: white;
    font-size: 18px;
}

/* Lightest Grey p Styles */
.p-style-lightestgrey-light {
    font-family: "DMSans-Light", sans-serif;
    color: #EFEFE1;
    font-size: 18px;
}

.p-style-lightestgrey-regular {
    font-family: "DMSans-Regular", sans-serif;
    color: #EFEFE1;
    font-size: 18px;
}

.p-style-lightestgrey-medium {
    font-family: "DMSans-Medium", sans-serif;
    color: #EFEFE1;
    font-size: 18px;
}

.p-style-lightestgrey-semibold {
    font-family: "DMSans-SemiBold", sans-serif;
    color: #EFEFE1;
    font-size: 18px;
}

.p-style-lightestgrey-bold {
    font-family: "DMSans-Bold", sans-serif;
    color: #EFEFE1;
    font-size: 18px;
}

.p-style-lightestgrey-extrabold {
    font-family: "DMSans-ExtraBold", sans-serif;
    color: #EFEFE1;
    font-size: 18px;
}

.p-style-lightestgrey-black {
    font-family: "DMSans-Black", sans-serif;
    color: #EFEFE1;
    font-size: 18px;
}

/* Yellow p Styles */
.p-style-yellow-light {
    font-family: "DMSans-Light", sans-serif;
    color: #FCFF00;
    font-size: 18px;
}

.p-style-yellow-regular {
    font-family: "DMSans-Regular", sans-serif;
    color: #FCFF00;
    font-size: 18px;
}

.p-style-yellow-medium {
    font-family: "DMSans-Medium", sans-serif;
    color: #FCFF00;
    font-size: 18px;
}

.p-style-yellow-semibold {
    font-family: "DMSans-SemiBold", sans-serif;
    color: #FCFF00;
    font-size: 18px;
}

.p-style-yellow-bold {
    font-family: "DMSans-Bold", sans-serif;
    color: #FCFF00;
    font-size: 18px;
}

.p-style-yellow-extrabold {
    font-family: "DMSans-ExtraBold", sans-serif;
    color: #FCFF00;
    font-size: 18px;
}

.p-style-yellow-black {
    font-family: "DMSans-Black", sans-serif;
    color: #FCFF00;
    font-size: 18px;
}

/* Black p Styles */
.p-style-black-light {
    font-family: "DMSans-Light", sans-serif;
    color: #000000;
    font-size: 18px;
}

.p-style-black-regular {
    font-family: "DMSans-Regular", sans-serif;
    color: #000000;
    font-size: 18px;
}

.p-style-black-medium {
    font-family: "DMSans-Medium", sans-serif;
    color: #000000;
    font-size: 18px;
}

.p-style-black-semibold {
    font-family: "DMSans-SemiBold", sans-serif;
    color: #000000;
    font-size: 18px;
}

.p-style-black-bold {
    font-family: "DMSans-Bold", sans-serif;
    color: #000000;
    font
}

/* Define your class with more specificity */
p a.a-yellow {
    color: #FCFF00; /* Text color */
    text-decoration: none; /* Remove underline */
    font-weight: bold;
    transition: color 0.3s ease, text-decoration 0.5s ease; /* Transition effect */
}

p a.a-yellow:hover {
    color: #EFEFE1; /* Change color on hover */
    text-decoration: none; /* Add underline on hover */
    font-weight: bold;
}

.link-yellow-bg{
    color:#353532;
    font-weight:bold;
    text-decoration: none;
    transition: color 0.5s ease; /* Transition on color and text-decoration */
}

.link-yellow-bg:hover {
    color: #000; /* Change color when hovering */
}

.p-3-style{
	width:78.14%;
	font-size:14px;
}
.p-2-style{
	width:100%;
}
.img-about-ima-style{
	width:452px;
}
.img-video-call-ic-style{
	height:60px;
}
.footer-link{
	font-size:12px;
}
.p-footer-style{
	font-size:10px;
    font-family: 'DM Sans', sans-serif;
    color:#000;
}
.custom-btn {
    display: inline-block;
    padding: 10px 20px;
    background-color: #FCFF00; /* Yellow */
    color: #000; /* Black text */
    font-family: 'DM Sans', sans-serif;
    font-weight: 700; /* Bold weight */
    text-align: center;
    border-radius: 0px;
    transition: background-color 0.5s ease;
    text-decoration: none; /* Remove underline */
    width: 125px;
    margin-left:18px;
}

.custom-btn:hover {
    color: #000;
    background-color: #FFFFFF; /* White on hover */
    transition: background-color 0.5s ease;
}

@media (max-width: 768px) { /* Adjust max-width as needed */
    .custom-btn {
    margin-left:0px;
}
    }

/* Below 576px - stack buttons vertically with no padding */
@media (max-width: 576px) {
    .about-email-button,
    .about-whatsapp-button {
        padding-right: 0;
        margin-bottom: 10px; /* Space between buttons */
    }
}

/* Between 576px and 992px - set horizontal padding */
@media (min-width: 576px) and (max-width: 992px) {
    .about-email-button,
    .about-whatsapp-button {
        padding-right: 10px;
        margin-bottom: 0; /* Remove bottom margin since they’re side by side */
    }
}

/* Only apply additional styling at large/full width (992px and above) */
@media (min-width: 992px) {
    .about-email-button,
    .about-whatsapp-button {
        padding-right: 10px;
    }
}

/* Remove padding and margin from containers */
#hero-video, 
#hero-video .container, 
#hero-video .row, 
#hero-video .col-12 {
    padding: 0;
    margin: 0;
}

/* Set height for the video container to 66.7vh */
#hero-video {
    height: 66.7vh;  /* 2/3 of the viewport height */
    position: relative;
    overflow: hidden;  /* Ensure no overflow */
}

/* Ensure the iframe fills the entire container */
#hero-video iframe {
    width: 100%;
    border: none;  /* Remove the border around the iframe */
    object-fit: cover;  /* Make sure the video fills the container and maintains its aspect ratio */
}





/* = Colour
-------------------------------------------------------------- */

/* Swatch Variables */
:root{
	
	--swatch-var-2869:#000000; /* Black */
    
	--swatch-var-1068:#FCFF00; /* Yellow 100% Opacity */
	
	--swatch-var-4517:#FCFF00; /* Yellow 100% Opacity */
	
	--swatch-var-7155:#1E1E1D; /* Darkest Grey */
    
	--swatch-var-3435:#70706C; /* Darker Grey */
    
	--swatch-var-3774:#A0A098; /* Medium Grey */
    
	--swatch-var-2220:#DBDBCE; /* Lighter Grey */
	
	--swatch-var-2193:#EFEFE1; /* Lightest Grey */
    
    --swatch-var-8173:#FFFFFF; /* White */
	
}


/* Background colour styles */

.bgc-7155{
	background-color:var(--swatch-var-7155);
}
.bgc-2869{
	background-color:var(--swatch-var-2869);
}
.bgc-4517{
	background-color:var(--swatch-var-4517);
}
.bgc-2193{
	background-color:var(--swatch-var-2193);
}
.bgc-3774{
	background-color:var(--swatch-var-3774);
}
.bgc-5642{
    background-color:var(--swatch-var-7155);
}

.bgc-white{
    background-color:var(--swatch-var-8173);
}
.bgc-2220{
    background-color:var(--swatch-var-2220);
}
/* Button colour styles */

.btn-c-2869 {
    background:var(--swatch-var-2869);
	color:rgba(255,255,255,1)!important;
    transition: background 0.5s ease, color 0.5s ease; /* Add transition here */
    font-family: 'DM Sans', sans-serif;
    font-weight: Bold;
    font-size: 16px;
}

.btn-c-2869:hover{
	background:var(--swatch-var-2220);
	color:rgba(0,0,0,1)!important;
}

.btn-c-1234 {
    background:var(--swatch-var-4517);
	color:rgba(0,0,0,1)!important;
    transition: background 0.5s ease, color 0.5s ease; /* Add transition here */
    font-family: 'DM Sans', sans-serif;
    font-weight: Bold;
    font-size: 16px;
}

.btn-c-1234:hover{
	background:var(--swatch-var-8173);
	color:rgba(0,0,0,1)!important;
}

/* Link colour styles */

.ltc-1068:hover{
	color: #FCFF00 !important;
    transition: color 0.5s ease;
}

.ltc-1068 {
  color: var(--swatch-var-8173);
  font-family: 'DM Sans', sans-serif;
  font-weight: 700; /* Bold weight */
}

.scroll-fx-in-fade {
    transition: opacity 0.3s ease-in-out; /* Adjust the speed here */
    opacity: 0; /* Initial state */
}

.scroll-fx-in-range.scroll-fx-in-fade {
    opacity: 1; /* Fade to fully visible when in range */
}

/* Step 1: Initial State */
.prefade {
    opacity: 0; /* Initially make the element invisible */
    transition: opacity 1.5s ease-out; /* Faster transition for opacity (0.5s) */
}

/* Step 2: Trigger the fade-in when in view */
.prefade.fade-in {
    opacity: 1; /* Fade the element to fully visible */
}



/* Bloc image backgrounds */

/* Background styling */
.bg-6205599 {
    background-image: url("img/6205599_Color Grading Post Production Monitor Video Editing_By_Phong_Croco_Artlist_4K0.jpg");
    background-image: -webkit-image-set(url("img/6205599_Color-Grading-Post-Production-Monitor-Video-Editing_By_Phong_Croco_Artlist_4K0.webp") 1x, url("img/6205599_Color-Grading-Post-Production-Monitor-Video-Editing_By_Phong_Croco_Artlist_4K0.webp") 2x);
    background-image: image-set(url("img/6205599_Color Grading Post Production Monitor Video Editing_By_Phong_Croco_Artlist_4K0.jpg") 1x, url("img/6205599_Color Grading Post Production Monitor Video Editing_By_Phong_Croco_Artlist_4K0.jpg") 2x, url("img/6205599_Color-Grading-Post-Production-Monitor-Video-Editing_By_Phong_Croco_Artlist_4K0.webp") 1x, url("img/6205599_Color-Grading-Post-Production-Monitor-Video-Editing_By_Phong_Croco_Artlist_4K0.webp") 2x);

    background-size: cover; /* Image scales with container */
    background-position: center center;
    background-repeat: no-repeat;

    width: 100vw; /* Full viewport width */
    height: auto; /* Allow the height to be determined by the content */
    padding: 50px 0; /* Optional: adjust top and bottom padding as needed */
    overflow: hidden; /* Prevent overflow */
    display: flex;
    align-items: center center;
}

/* = modal lightbox
-------------------------------------------------------------- */
.modal-open {
    overflow: hidden;
}

.modal-open .modal {
    overflow-x: hidden;
    overflow-y: auto;
}

.modal {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1060;
    display: none;
    width: 100%;
    height: 100%;
    overflow: hidden;
    outline: 0;
}

.modal-dialog {
    position: relative;
    width: auto;
    margin: .5rem;
    pointer-events: none;
}

.modal.fade .modal-dialog {
    transition: transform .3s ease-out;
    transform: translate(0, -50px);
}

@media (prefers-reduced-motion: reduce) {
    .modal.fade .modal-dialog {
        transition: none;
    }
}

.modal.show .modal-dialog {
    transform: none;
}

.modal.modal-static .modal-dialog {
    transform: scale(1.02);
}

.modal-dialog-scrollable {
    height: calc(100% - 1rem);
}

.modal-dialog-scrollable .modal-content {
    max-height: 100%;
    overflow: hidden;
}

.modal-dialog-scrollable .modal-body {
    overflow-y: auto;
}

.modal-dialog-centered {
    display: flex;
    align-items: center;
    min-height: calc(100% - 1rem);
}

.modal-content {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    pointer-events: auto;
    background-color: #1E1E1D;
    background-clip: padding-box;
    border: 1px solid rgba(0, 0, 0, .2);
    border-radius: .3rem;
    outline: 0;
}

.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1040;
    width: 100vw;
    height: 100vh;
    background-color: #000;
}

.modal-backdrop.fade {
    opacity: 0;
}

.modal-backdrop.show {
    opacity: .9;
}

.modal-header {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1rem;
    border-bottom: 1px solid #dee2e6;
    border-top-left-radius: calc(.3rem - 1px);
    border-top-right-radius: calc(.3rem - 1px);
}

.modal-header .btn-close {
    padding: .5rem .5rem;
    margin: -.5rem -.5rem -.5rem auto;
}

.modal-title {
    margin-bottom: 0;
    line-height: 1.5;
}

.modal-body {
    position: relative;
    flex: 1 1 auto;
    padding: 1rem;
}

.modal-footer {
    display: flex;
    flex-wrap: wrap;
    flex-shrink: 0;
    align-items: center;
    justify-content: flex-end;
    padding: .75rem;
    border-top: 1px solid #dee2e6;
    border-bottom-right-radius: calc(.3rem - 1px);
    border-bottom-left-radius: calc(.3rem - 1px);
}

.modal-footer > * {
    margin: .25rem;
}

@media (min-width: 576px) {
    .modal-dialog {
        max-width: 500px;
        margin: 1.75rem auto;
    }
    
    .modal-dialog-scrollable {
        height: calc(100% - 3.5rem);
    }
    
    .modal-dialog-centered {
        min-height: calc(100% - 3.5rem);
    }

    .modal-sm {
        max-width: 300px;
    }
}

@media (min-width: 992px) {
    .modal-lg,
    .modal-xl {
        max-width: 800px;
    }
}

@media (min-width: 1200px) {
    .modal-xl {
        max-width: 1140px;
    }
}

.modal-fullscreen {
    width: 100vw;
    max-width: none;
    height: 100%;
    margin: 0;
}

.modal-fullscreen .modal-content {
    height: 100%;
    border: 0;
    border-radius: 0;
}

.modal-fullscreen .modal-header {
    border-radius: 0;
}

.modal-fullscreen .modal-body {
    overflow-y: auto;
}

.modal-fullscreen .modal-footer {
    border-radius: 0;
}

@media (max-width: 575.98px) {
    .modal-fullscreen-sm-down {
        width: 100vw;
        max-width: none;
        height: 100%;
        margin: 0;
    }

    .modal-fullscreen-sm-down .modal-content {
        height: 100%;
        border: 0;
        border-radius: 0;
    }

    .modal-fullscreen-sm-down .modal-header {
        border-radius: 0;
    }

    .modal-fullscreen-sm-down .modal-body {
        overflow-y: auto;
    }

    .modal-fullscreen-sm-down .modal-footer {
        border-radius: 0;
    }
}

@media (max-width: 767.98px) {
    .modal-fullscreen-md-down {
        width: 100vw;
        max-width: none;
        height: 100%;
        margin: 0;
    }

    .modal-fullscreen-md-down .modal-content {
        height: 100%;
        border: 0;
        border-radius: 0;
    }

    .modal-fullscreen-md-down .modal-header {
        border-radius: 0;
    }

    .modal-fullscreen-md-down .modal-body {
        overflow-y: auto;
    }

    .modal-fullscreen-md-down .modal-footer {
        border-radius: 0;
    }
}

@media (max-width: 991.98px) {
    .modal-fullscreen-lg-down {
        width: 100vw;
        max-width: none;
        height: 100%;
        margin: 0;
    }

    .modal-fullscreen-lg-down .modal-content {
        height: 100%;
        border: 0;
        border-radius: 0;
    }

    .modal-fullscreen-lg-down .modal-header {
        border-radius: 0;
    }

    .modal-fullscreen-lg-down .modal-body {
        overflow-y: auto;
    }

    .modal-fullscreen-lg-down .modal-footer {
        border-radius: 0;
    }
}

@media (max-width: 1199.98px) {
    .modal-fullscreen-xl-down {
        width: 100vw;
        max-width: none;
        height: 100%;
        margin: 0;
    }

    .modal-fullscreen-xl-down .modal-content {
        height: 100%;
        border: 0;
        border-radius: 0;
    }

    .modal-fullscreen-xl-down .modal-header {
        border-radius: 0;
    }

    .modal-fullscreen-xl-down .modal-body {
        overflow-y: auto;
    }

    .modal-fullscreen-xl-down .modal-footer {
        border-radius: 0;
    }
}

@media (max-width: 1399.98px) {
    .modal-fullscreen-xxl-down {
        width: 100vw;
        max-width: none;
        height: 100%;
        margin: 0;
    }

    .modal-fullscreen-xxl-down .modal-content {
        height: 100%;
        border: 0;
        border-radius: 0;
    }

    .modal-fullscreen-xxl-down .modal-header {
        border-radius: 0;
    }

    .modal-fullscreen-xxl-down .modal-body {
        overflow-y: auto;
    }

    .modal-fullscreen-xxl-down .modal-footer {
        border-radius: 0;
    }
}

/* = Table styling */
/* Remove the outside border of the entire table */
.table-container {
    border: none; /* Ensure there's no border around the whole table */
}

/* Add a border between each row */
.row-table {
    border-bottom: 1px solid #FCFF00;  /* Adds a 1px yellow border between rows */
}

/* Remove the bottom border on the last row */
.row-table:last-child {
    border-bottom: none;
}

/* Add 1px yellow border between the title and price columns */
.row-table .col-lg-5-table {
    border-right: 1px solid #FCFF00;  /* Adds a border between the title and price */
    padding-right: 15px;  /* Optional: Adds some space between the text and the border */
}

/* Remove the border on the last column (price column) */
.row-table .col-lg-5-table:last-child {
    border-right: none;
    padding-right: 0;
}


/* = Bloc Padding Multi Breakpoint
-------------------------------------------------------------- */

@media (min-width: 576px) {
    .bloc-xxl-sm{padding:200px 20px;}
    .bloc-xl-sm{padding:150px 20px;}
    .bloc-lg-sm{padding:100px 20px;}
    .bloc-md-sm{padding:50px 20px;}
    .bloc-sm-sm{padding:20px;}
    .bloc-no-padding-sm{padding:0 20px;}
}
@media (min-width: 768px) {
    .bloc-xxl-md{padding:200px 20px;}
    .bloc-xl-md{padding:150px 20px;}
    .bloc-lg-md{padding:100px 20px;}
    .bloc-md-md{padding:50px 20px;}
    .bloc-sm-md{padding:20px 20px;}
    .bloc-no-padding-md{padding:0 20px;}
}
@media (min-width: 992px) {
    .bloc-xxl-lg{padding:200px 20px;}
    .bloc-xl-lg{padding:150px 20px;}
    .bloc-lg-lg{padding:100px 20px;}
    .bloc-md-lg{padding:50px 20px;}
    .bloc-sm-lg{padding:20px;}
    .bloc-no-padding-lg{padding:0 20px;}
}


/* = Mobile adjustments 
-------------------------------------------------------------- */
@media (max-width: 1024px)
{
    .bloc.full-width-bloc, .bloc-tile-2.full-width-bloc .container, .bloc-tile-3.full-width-bloc .container, .bloc-tile-4.full-width-bloc .container{
        padding-left: 0; 
        padding-right: 0;  
    }
}
@media (max-width: 991px)
{
    .container{width:100%;}
    .bloc{padding-left: constant(safe-area-inset-left);padding-right: constant(safe-area-inset-right);} /* iPhone X Notch Support*/
    .bloc-group, .bloc-group .bloc{display:block;width:100%;}
}
@media (max-width: 767px)
{
    .bloc-tile-2 .container, .bloc-tile-3 .container, .bloc-tile-4 .container{
        padding-left:0;padding-right:0;
    }
    .btn-dwn{
       display:none; 
    }
    .voffset{
        margin-top:5px;
    }
    .voffset-md{
        margin-top:20px;
    }
    .voffset-lg{
        margin-top:30px;
    }
    form{
        padding:5px;
    }
    .close-lightbox{
        display:inline-block;
    }
    .blocsapp-device-iphone5{
	   background-size: 216px 425px;
	   padding-top:60px;
	   width:216px;
	   height:425px;
    }
    .blocsapp-device-iphone5 img{
	   width: 180px;
	   height: 320px;
    }
}
@media (max-width: 575px){
	.navbar-logo{
		font-size:18px;
	}
	.footer-link{
		text-align:center;
	}
	
}