/*--------------------------------------------------------------
# Customizing Header Transparent & Nav Menu
--------------------------------------------------------------*/
#header.transparent{background: transparent !important;}
#header.transparent .logo-color{position: absolute !important; top: 0px; right: 0px; bottom: 0px; left: 0px; visibility: hidden !important; opacity: 0 !important;}
#header.transparent .logo-white{position: initial !important; visibility: initial !important; opacity: 1 !important;}
#header.transparent .link-tools .tds-icon{fill: #ffffff;}
#header.transparent .nav-menu ul li .main-nav-item{color: #ffffff !important;}
#header.transparent .mobile-nav-toggle i{color: #ffffff !important;}
#header.header-show{box-shadow: none !important;}
#header .mobile-nav .mobile-nav-header .mobile-nav-toggle i{color: var(--nav-menu-links-color) !important;}


/*--------------------------------------------------------------
# fullscreen video background section
--------------------------------------------------------------*/
#fullscreen_video_background{width: 100%; height: calc(100vh - 200px); height: calc(100svh - 200px); position: relative; margin-bottom: 0px;}
#fullscreen_video_background #video_background {width: 100%; height: calc(100vh - 200px); height: calc(100svh - 200px); object-fit: cover; border: none !important; position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: -1;}
#fullscreen_video_background .video-background-overly {background: rgb(10 69 135 / 30%);}
/* #fullscreen_video_background .video-background-overly::before {content: ""; display: block; background: #ffffff; left: 0; position: absolute; right: 0; width: 100%; height: 100px; transform-origin: left; bottom: -100px; z-index: 0}
#fullscreen_video_background .video-background-overly::after {content: ""; display: block; background: #ffffff; left: 0; position: absolute; right: 0; width: 100%; height: 100px; transform: skewY(-3deg); transform-origin: left; bottom: -100px; z-index: 0} */

#fullscreen_video_background .video-background-overly::before {content: ""; display: block; background: var(--light); border-radius: 0px 0px 0px 30px; position: absolute; left: 0; width: 50%; height: 200px; transform-origin: right; transform: skewY(5deg); bottom: -200px; z-index: 0}
#fullscreen_video_background .video-background-overly::after {content: ""; display: block; background: var(--light); border-radius: 0px 0px 30px 0px; position: absolute; right: 0; width: 50%; height: 200px; transform-origin: left; transform: skewY(-5deg); bottom: -200px; z-index: 0}

#fullscreen_video_background .video-background-carousel {position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px;}
#fullscreen_video_background .video-background-carousel .video-background-carousel-titel{position: absolute; right: 0px; bottom: 0px; left: 0px; color: #ffffff;}
#fullscreen_video_background .video-background-carousel .video-background-carousel-titel{top: 100px;}
@media (max-width: 991px) {#fullscreen_video_background .video-background-carousel .video-background-carousel-titel{top: 60px;}}
#fullscreen_video_background .video-background-carousel .video-background-carousel-titel p{line-height: 140%; font-size: 17px;}
@media (min-width: 768px){#fullscreen_video_background .video-background-carousel .video-background-carousel-titel p{font-size: 18px;}}


/*--------------------------------------------------------------
# Customers Section
--------------------------------------------------------------*/
#customers-section{padding-top: 60px !important; padding-bottom: 60px !important; margin: 0px !important;}


/*--------------------------------------------------------------
# Case Studies Projects Section
--------------------------------------------------------------*/
#case-studies-projects-section .project-tem {position: relative; overflow: hidden;}
#case-studies-projects-section .project-tem .overly-links{background: transparent; width: 100%; height: 100%; position: absolute; top: 0px; right: 0px; bottom: 0px; z-index: 1;}
#case-studies-projects-section .project-tem .overly-links .overly-container{width: 100%; height: 100%; position: relative;}
#case-studies-projects-section .project-tem .overly-links .overly-container .name{width: 100%; position: absolute; top: 0px; right: 0px; left: 0px; color: #ffffff;}

#case-studies-projects-section .project-tem .overly-links .overly-container .name .name-link{background: rgb(0 0 0 / 20%); padding: 2px; color: #ffffff !important; line-height: 19px; font-size: 19px; transition: all 0.2s ease;}
#case-studies-projects-section .project-tem .overly-links .overly-container .name .name-link:hover{line-height: 22px; font-size: 22px;}
#case-studies-projects-section .project-tem .overly-links .overly-container .swiper-slide-link{background: rgb(0 0 0 / 20%); border-radius: 50%; position: absolute; bottom: 0px; line-height: 21px; font-size: 21px; color: #ffffff; outline: none !important; transition: all 0.2s ease;}
#case-studies-projects-section .project-tem .overly-links .overly-container .swiper-slide-link:hover{font-size: 24px !important; line-height: 24px !important;}
#case-studies-projects-section .project-tem .overly-links .overly-container .services{width: calc(100% - 40px); position: absolute; bottom: 0px;}
#case-studies-projects-section .project-tem .overly-links .overly-container .services .service-link{border: solid 1px var(--line); border-radius: 3px; line-height: 12px; font-size: 12px; font-weight: 500;}