/*
Theme Name: Beaver Builder Child Theme
Theme URI: http://www.wpbeaverbuilder.com
Version: 1.01
Description: An example child theme that can be used as a starting point for custom development.
Author: The Beaver Builder Team
Author URI: http://www.fastlinemedia.com
template: bb-theme
*/

/* Add your custom styles here... */ 
:root {
	--title-font: "moret", serif; 
	--body-font: "gotham", sans-serif; 
	--black: #212A3D;
	--white: #fff;
	--blue: #212a3d;
	--dark-red: #bc0601;
	--red: #e92c02;
	--orange: #ef5f01;
	--grey: #efeeed;
	--gradient: linear-gradient(35deg, rgba(255,255,255,0.1) 0%, rgba(239,95,1,1) 20%, rgba(188,6,1,1) 30%, rgba(33,42,61,1) 90%);
}
@font-face {
	font-family: "gotham";
	src: url('https://serduvolden.dk/wp-content/themes/bb-theme-child/GothamBookFont.otf') format('opentype'),
	src:  url('https://serduvolden.dk/wp-content/themes/bb-theme-child/GothamBook.woff2') format('woff2'),
	src:  url('https://serduvolden.dk/wp-content/themes/bb-theme-child/GothamBook.woff') format('woff');
}
h1, h2, h3, h4 {
	font-family: var(--title-font);
	font-weight: 600;
	font-style: normal;
	color: var(--blue);
}
body .fl-page, .fl-page p, h5 {
	font-family: var(--body-font);
	font-weight: 400;
	font-style: normal;
}
a {
	transition: color 0.3s ease-in, background 0.3s ease-in;
}

/* COOKIE */
#coi-banner-wrapper p {
	font-family: "arial", sans-serif !important;
}

/* BUTTONS */
.btn {
	margin-bottom: 10px;
}
.btn.center {
	display: flex;
	justify-content: center;
	width: auto;
}
.btn a {
	display: inline-block;
	height: 100%;
	padding: 20px 35px 20px 35px;
	border-radius: 50px;
	text-align: center;
	border: 1px solid var(--dark-red);
	/* 
	background-image: var(--gradient);
	background-color: var(--white);
 	*/
 	background-color: var(--red);
	color: var(--white);
	line-height: 1;
	transition: background-color 0.3s,border 0.3s;
}
.btn a:hover {
	background-image: none;
	background-color: var(--orange);
	color: var(--white);
	border: 1px solid var(--orange);
	text-decoration: none;
}

/* FORSIDE VIDEO */
@media(max-width:768px){
	.frontpage-video .pp-video-play-icon {
		padding: 20px;
		border: 4px solid var(--grey);
	}
	.frontpage-video .pp-video-play-icon svg {
		height: 30px;
		width: 30px;
	}
}

/* SECTIONS */
.section {
	position: relative;
}
.gradient .fl-row-content-wrap {
	background-color: var(--white);
	background-image: var(--gradient);
}

/* IMAGES */
@media(max-width:768px){

}
@media(min-width:769px){
	.section .floating {
		position: sticky;
		top: 300px;
		z-index: 2;
	}
	.on-top .fl-photo-content {
		margin-top: -120px;
		margin-bottom: -110px;
	}
	.on-top.top-img .fl-photo-content {
		margin-top: 0;
	}
}

/* QUOTES */
@media(max-width:768px){
	.quote p {
		font-size: 30px;
	}
}
@media(min-width:769px){
	.quote p {
		font-size: 36px;
	}
}
.quote p {
	font-family: var(--title-font);
}

/* HEADER */
@media(max-width:768px){
	.header-cta {
		text-align: left;
	}
	.header-cta span {
		font-size: 18px;
	}
}
@media(min-width:769px){
	.header-cta {
		text-align: right;
	}
	.header-cta span {
		font-size: 24px;
	}
}
#header .fl-row-content-wrap {
/* 
	background-color: var(--white);
	background-image: var(--gradient);
 */
}

.header-cta {
	line-height: 1;
}
.header-cta a {
	color: var(--white);
}
.header-cta a:hover {
	text-decoration: none;
	color: var(--grey);
}

.header-cta i {
	padding: 0 10px;
}
.header-cta .cta-phone {
	font-weight: 400;
}

/* MENU */
@media(max-width:768px){
	#topmenu nav {
	overflow-x: scroll;
  scroll-behavior: smooth;
  -ms-overflow-style: none;
  scrollbar-width: none;
	}
	#topmenu #menu-main {
		flex-wrap: unset;
		width: max-content;
	}
}
@media(min-width:769px){

}

/* FOOTER */
.footer .fl-row-content-wrap {
/* 
	background-color: var(--white);
	background-image: var(--gradient);
 */
}
.socials {
	display: flex;
	justify-content: center;
	gap: 30px;
	font-size: 36px;
}
.socials .social a {
	color: var(--white);
}
.socials .social a:hover {
	color: var(--red);
}

/* PANIC */
.fl-builder-content-49 {
	position: fixed;
	bottom: 20px;
	right: 20px;
	z-index: 99;
}
.exit-btn {
	width: 150px;
	text-align: center;
	background-color: var(--red);
	color: var(--white);
}
.exit-btn:hover {

}
.exit-btn a {
	display: block;
	width: 100%;
	height: 100%;
	color: var(--white);
	text-decoration: none;
	padding: 20px;
	
}
.exit-btn a i {
	display: block;
	font-size: 24px;
	margin-bottom: 5px;
}
.exit-btn a:hover {
	background-color: var(--orange);
}

/* FACTS */
@media(max-width:768px){

}
@media(min-width:769px){

}
.facts {
	position: relative;
	z-index: 1;
}
.facts .facts-bg {
	position: sticky; /* Makes the background "stick" */
	top: 0; /* Position where the sticky behavior starts */
	height: 100vh; /* Full viewport height */
	width: 100%; /* Full width */
	/* background: var(--gradient); */
	z-index: -1; /* Keeps it behind the content */
}
.facts .facts-wrapper {
	margin-left: auto;
	margin-right: auto;
	max-width: 800px; /* Adjust width for readability */
	padding: 20px;
	z-index: 1; /* Ensures content is on top */
}

@media(max-width:768px){
	.fact {
		font-size: 24px;
		padding: 20px 30px;
	}
	.fact .highlight {
		font-size: 90px;
	}
	.fact .fact-source {
		margin-top: 5px;
	}
}
@media(min-width:769px){
	.fact {
		font-size: 36px;
		padding: 100px 80px;
	}
	.fact .highlight {
		font-size: 140px;
	}
}
.fact {
	font-family: var(--title-font);
}
.fact.blue-theme {
	background-color: var(--blue);
	color: var(--white);
}
.fact.blue-theme .highlight {
	color: var(--dark-red);
}
.fact.red-theme {
	background-color: var(--dark-red);
	color: var(--white);
}
.fact.red-theme .highlight {
	color: var(--orange);
}
.fact.grey-theme {
	background-color: var(--grey);
	color: var(--blue);
}
.fact.grey-theme .highlight {
	color: var(--blue);
}

.fact .highlight {
	font-weight: 700;
	font-style: italic;
	line-height: 1;
}
.fact .fact-source {
	font-size: 14px;
}

/* LOGOWALL */
@media(max-width:768px){
	.logo-wall {
		gap: 30px;
	}
	.logo-wall .logo {
		flex: 0 0 44%;
	}
	.logo-wall .logo img {
		max-width: 150px;
		max-height: 100px;
	}
}
@media(min-width:769px){
	.logo-wall {
		gap: 40px;
	}
	.logo-wall .logo {
		flex: 0 0 25%;
	}
	.logo-wall .logo img {
		max-width: 150px;
		max-height: 100px;
	}
}
.logo-wall {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
}

/* SIGNS of violence */
/* bullet */
@media(max-width:768px){
	ul.signs {
		padding-left: 20px;
	}
	.signs li {
		font-size: 16px;
	}
}
@media(min-width:769px){
	ul.signs {
		padding-left: 50px;
	}
	.signs li {
		font-size: 18px;
	}
}
.signs {
	list-style-type: none;
}
.signs li {
	padding-bottom: 10px;
}
.signs li i {
	margin-right: 5px;
}

.signs .list-item {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40px;
	background-color: rgba(255,255,255,0.2);
	min-height: 350px;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}
.signs .list-item::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.4);
	z-index: 1;
}
.signs .list-item:nth-child(1) {
	background-image: url("https://serduvolden.dk/wp-content/uploads/2025/03/flower-1.jpg");
}
.signs .list-item:nth-child(2) {
	background-image: url("https://serduvolden.dk/wp-content/uploads/2025/03/flower-2.jpg");
}
.signs .list-item:nth-child(3) {
	background-image: url("https://serduvolden.dk/wp-content/uploads/2025/03/flower-3.jpg");
}
.signs .list-item:nth-child(4) {
	background-image: url("https://serduvolden.dk/wp-content/uploads/2025/03/flower-4.jpg");
}
.signs .list-item:nth-child(5) {
	background-image: url("https://serduvolden.dk/wp-content/uploads/2025/03/flower-5.jpg");
}
.signs .list-item .item-text {
	position: relative;
	font-family: var(--title-font);
	font-size: 42px;
	text-align: center;
	z-index: 2;
}

/* CAROUSEL */
@media(max-width:768px){
	.carousel {
		margin: 0 0 10px 10px;
		gap: 10px;
	}
	.carousel-container.mobile-only {
		display: block;
	}
	.carousel-item {
		width: calc(100% / 1.2);
	}
	.carousel-nav {
		display: none !important;
	}
}
@media(min-width:769px){
	.carousel-container.hide-carousel {
		margin-top: 0 !important;
	}
	.carousel-container.hide-carousel .carousel-nav,
	.carousel-container.hide-carousel .nav-dots {
		display: none;
	}
	.carousel {
		position: relative;
	}
	.carousel-container::after {
		content: "";
		position: absolute;
		bottom: 31px;
		right: 0;
		height: 100%;
		width: var(--gradient-width);
		pointer-events: none;
	}
	.carousel-container.mobile-only {
		display: none;
	}
	.carousel-item {
		width: calc(100% / (var(--items-visible) * 1.2));
	}
	.carousel-item.last-item {
		margin-right: var(--gradient-width);
	}
}
.carousel-container {
	--items-visible: var(--visible);
	--gradient-width: 0px;
	position: relative;
	overflow: hidden;
	width: 100%; /* Adjust to fit your layout */
}

.carousel {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-ms-overflow-style: none;  /* Hide scrollbar for IE and Edge */
	scrollbar-width: none;  /* Hide scrollbar for Firefox */
	list-style-type: none;
	padding-left: 0;
	gap: 20px;
}
.carousel::-webkit-scrollbar {
	display: none;
}
    
.carousel-item {
	flex: 0 0 auto;  /* Adjust based on how many items you want visible */	
	text-align: left;
	user-select: none;
}
.carousel-item.snap {
	scroll-snap-stop: always;
	scroll-snap-align: start;
}

.carousel-nav {
    display: flex;
    gap: 10px;
    justify-content: right;
    pointer-events: none;
    z-index: 1;
    margin-bottom: 20px;
    margin-right: var(--gradient-width);
}

.carousel-nav button {
    border: none;
    color: #000;
    width: 50px;
    height: 50px;
    border-radius: 0px;
    cursor: pointer;
    transition: background 0.3s, color 0.3s;
    pointer-events: auto;
}
.carousel-nav button.prev {
    padding: 8px 8px 8px 8px;
}
.carousel-nav button.next {
    padding: 8px 8px 10px 10px;
}

.carousel-nav button:hover {
    background: #fff;
}
.carousel-nav button i {
	font-size: 30px;
}
.nav-dots {
  text-align: center;
  margin-top: 10px;
}

.carousel-container .nav-dots button {
  padding: 0;
  background-color: transparent;
  border-radius: 100%;
  width: 10px;
  height: 10px;
  margin: 5px;
}

.carousel-container.theme-light .carousel-nav button {
	background: rgba(255,255,255,1);
}
.carousel-container.theme-light .carousel-nav button i {
	color: var(--red) !important;
}
.carousel-container.theme-light .carousel-nav button:hover i {
	color: var(--orange) !important;
}
.carousel-container.theme-light .nav-dots button.active {
	background-color: var(--white);
}
.carousel-container.theme-light .nav-dots button {
	border: 1px solid var(--white);
}

.carousel-container.theme-dark .carousel-nav button {
	background: var(--blue);
}
.carousel-container.theme-dark .carousel-nav button i {
	color: var(--grey) !important;
}
.carousel-container.theme-dark .carousel-nav button:hover i {
	color: var(--red) !important;
}
.carousel-container.theme-dark .nav-dots button.active {
	background-color: var(--blue);
}
.carousel-container.theme-dark .nav-dots button {
	border: 1px solid var(--blue);
}
/* CAROUSEL end */