@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;300;400;500;600;700;800;900&family=Roboto:wght@300;400;500;700;900&display=swap');

*{
	font-family: 'Poppins', sans-serif;
	font-size: 18px;
}

:root {
	--bg-green : #273329;
	--text-yellow: #f0cb84;
	--loader-yellow: #a18858;
}

html {
    scroll-behavior: smooth;
}

::-webkit-scrollbar {
	width:12px;
}

::-webkit-scrollbar-thumb {
	background: linear-gradient(var(--text-yellow), var(--bg-green)) ;
	border-radius: 3px;
}

.form-control:focus {
  border: 1px solid #000!important;
}

.2nd_font{
	font-family: 'Roboto', sans-serif;
}

.fs-12 {
	font-size : 12px;
}

.text-success {
	color: var(--bg-green)!important;
}

header {
	width: 100%;
	height: 100px;
}

header img {
	width: 180px;
}

header .top-line li a {
	text-decoration:none;
	color:  var(--text-yellow)!important;
}

.bg-green {
	background : var(--bg-green);
}

.page-wrap{
	padding: 2rem 0;
}

.showImg img{
	transition: transform .4s;
}

.showImg img:hover {
 transform: scale(1.05);
 z-index: 10;
}


/* btn streken */
.btn_streken{
	position: relative;
	background : var(--bg-green)!important;
	color: #fff;
}

.btn_streken:hover {
	color: var(--text-yellow);
	transition: 0.2s;
	transition-delay: 0.8s;
}

.btn_streken::before{
	content:'';
	position:absolute;
	top:0;
	left:0;
	width: 100%;
	height:100%;
	z-index: -1;
	transform: scale(0);
	transform-origin: top left;
}
.btn_streken:hover::before{
	transform: scale(1);
	transition: 0.5s;
	transition-delay: 0.8s;
}

.btn_streken::after {
	content: '';
	height: 70px;
	width: 35px;
	background: url(https://lundsbillakkering.no/wp-content/uploads/2023/11/btn_streken.png) no-repeat;
	position: absolute;
	top:-22px;
	left:0;
	background-size: 31px;
	z-index: -1;
}
.btn_streken:hover::after {
	animation: draw 0.6s linear forwards;
}

@keyframes draw {
	0% {
		top:-22px;
		left:0;
	}
	20% {
		top:-22px;
		left:100%;
	}
	40% {
		top:calc(100% - 22px);
		left:100%;
	}
	60% {
		top:calc(100% - 22px);
		left:0;
	}
	80% {
		top:calc(0% - 22px);
		left:0;
	}
	100% {
		top:calc(100% - 22px);
		left:100%;
	}
}

.btn_streken span {
	position: absolute;
}

.btn_streken span:nth-child(1),
.btn_streken span:nth-child(3) {
	width: 100%;
	height: 2px;
	
}

.btn_streken span:nth-child(1) {
	top:0;
	left:0;
	transform-origin: left;
	transform:scaleX(0);
}

.btn_streken:hover span:nth-child(1) {
	transform: scaleX(1);
	transition: 0.2s;
	transition-delay: 0s;
}

.btn_streken span:nth-child(3) {
	bottom:0;
	left:0;
	transform-origin: right;
	transform:scaleX(0);
}
.btn_streken:hover span:nth-child(3) {
	transform: scaleX(1);
	transition: 0.2s;
	transition-delay: 0.4s;
}

.btn_streken span:nth-child(2),
.btn_streken span:nth-child(4) {
	width: 2px;
	height: 100%;

}
.btn_streken span:nth-child(2) {
	top:0;
	right:0;
	transform-origin: top;
	transform:scaleY(0);
}
.btn_streken:hover span:nth-child(2) {
	transform: scaleY(1);
	transition: 0.2s;
	transition-delay: 0.2s;
}
.btn_streken span:nth-child(4) {
	top:0;
	left:0;
	transform-origin: bottom;
	transform:scaleY(0);
}
.btn_streken:hover span:nth-child(4) {
	transform: scaleY(1);
	transition: 0.2s;
	transition-delay: 0.6s;
}

.progress {
  transition: .2s;
  width: 0;
  height: 2px;
  background: var(--bg-green);
  position: fixed;
  top:0;
  left:0;
}

#preloader{
  align-items:center;
  background-color:#fff;
  display:flex;
  height:100%;
  justify-content:center;
  margin:auto;
  position:fixed;
  width:100%;
  opacity: .7;
  z-index:9999999
}
.circles-animation{background-color:#fff;filter:blur(6px) contrast(20);height:320px;width:320px}
.circles-animation .circle-1,
.circles-animation .circle-2{
  background:var(--bg-green);
  border-radius:50%;height:50px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:50px}
.circles-animation .circle-1{-webkit-animation:circle-l 2s ease infinite;animation:circle-l 2s ease infinite;left:20%}
.circles-animation .circle-2{-webkit-animation:circle-r 2s ease infinite;animation:circle-r 2s ease infinite;background:var(--loader-yellow);left:80%}
@-webkit-keyframes circle-l{0%{left:20%;transform:scale(1)}50%{left:50%;transform:scale(2)}to{left:20%;transform:scale(1)}}
@keyframes circle-l{0%{left:20%;transform:scale(1)}50%{left:50%;transform:scale(2)}to{left:20%;transform:scale(1)}}
@-webkit-keyframes circle-r{0%{left:80%;transform:scale(1)}50%{left:50%;transform:scale(2)}to{left:80%;transform:scale(1)}}
@keyframes circle-r{0%{left:80%;transform:scale(1)}50%{left:50%;transform:scale(2)}to{left:80%;transform:scale(1)}}
.loader{border-radius:50%;height:80px;position:relative;width:80px}.loader .pulse{background:var(--loader-yellow);border-radius:inherit;height:100%;position:absolute;transform:scale(.1);transition:opacity .2s linear;width:100%}
.loader .pulse .pulse1{-webkit-animation:pulse 2.2s linear infinite;animation:pulse 2.2s linear infinite}
.loader .pulse .pulse2{-webkit-animation:pulse 2.2s linear -1s infinite;animation:pulse 2.2s linear -1s infinite}
@-webkit-keyframes pulse{to{opacity:0;transform:scale(1.6)}}
@keyframes pulse{to{opacity:0;transform:scale(1.6)}}.section{padding-bottom:7.5rem;padding-top:5rem;position:relative}



::view-transition-old(root) {
	animation: fade-out 350ms cubic-bezier(0,0,0.2,1),
	slide-to-right 350ms cubic-bezier(0,0,0.2,1);
}

::view-transition-new(root) {
	animation: fade-in 350ms cubic-bezier(0,0,0.2,1),
	slide-to-left 350ms cubic-bezier(0,0,0.2,1);
	mix-blend-mode:normal;
}

@keyframes fade-in {
	from {
		opacity: 0;
	} to {
		opacity: 1;
	}
}

@keyframes fade-in {
	from {
		opacity: 1;
	} to {
		opacity: 0;
	}
}

@keyframes slide-to-left{
	from {
		transform: translateX(-4rem);
	} to {
		transform: translateX(0rem);
	}
}

@keyframes slide-to-right{
	from {
		transform: translateX(4rem);
	} to {
		transform: translateX(0rem);
	}
}


.map:hover {
	filter: grayscale(100%); 
}


@media screen and (max-width:576px) {
	.navbar-toggler-icon {
		font-size: 18px!important;
	}
	.navbar-brand img {
		width: 120px;
	}
	.top-line {
		display: none!important;
	}
	footer h6 {
		font-size: 12px!important;
	}
}