/* Fonts */

@font-face {
  font-family: 'FiraSans';
  src: url('/static/samubau/fonts/FiraSans-Regular.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'FiraSans-Light';
  src: url('/static/samubau/fonts/FiraSans-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

h1, h2, h3, h4{
	font-family: FiraSans;
}

h5, h6, p, a, input, li{
	font-family: FiraSans-Light;
}

a{
	text-decoration: none;
}

/* Colors */

h1, h3, h5, a, .c2{	
	color: white; /* White */
}

h2, h4, h6, p, li, .c1{
	color: #F97316; /* Orange */
}

.c3{
	color: black;
}

#nav-ham:hover, .hover:hover{
	color: #874205;
}
/* Background Colors */

.btn{
	background-color: #ad6321 /* Dark orange */
}

.btn:hover, #nav-btn:hover{
	background-color: #874205; /* Darker orange */
} 

.bg-1{
	background-color: #6b7280; /* Dark grey */
}

.bg-2{
	background-color: #F97316; /* Orange */
}

.bg-3{
	background-color: #4B5563; /* Light grey */
}

.bg-4{
	background-color: #ad6321 /* Dark orange */
}

.bg-img{
	min-width: 100%;
}


/* General */

h1, h2, a{
	font-size: clamp(20px, 4vw, 36px);
}

h3, h4, .xl-txt{
	font-size: clamp(18px, 3.5vw, 32px);
}

h5, h6,{
	font-size: clamp(12px, 2.2vw, 20px); 
}

p, li, .l-txt{
	font-size: clamp(16px, 3vw, 28px);
}

.mini-txt{
	font-size: clamp(12px, 2.2vw, 20px);
}

h1, h2, h3, h4, h5, h6, p{
	margin: .5rem 0;
}

body, ul{
	margin: 0;
}

ul{
	list-style-type: none;
}

body, header, footer, main, main>div{
	width: 100vw;
	width: 100%;
}

main{
	position: relative;
	top: 3rem;
}

footer{
	position: relative;

	min-height: 3rem;
	
	display: flex;
	justify-content: space-between;
}

footer>div{
	margin: 1rem;
}

.btn{
	border-radius: 2px;

	padding: .4rem .8rem;
}

.sc-only{
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
}

.img-d{
	display: none;
}

img, picture, source{
	object-fit: cover;
	object-position: center;
}

div, img, h1, h2, h3, h4, h5, h6, p{
	content-visibility: auto;
}

@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Nav */
nav{
	position: fixed;
	z-index: 100;

	width: 100%;
	height: 4rem;
}

#nav{
	height: 3rem;

	display: flex;
	justify-content: space-between;
	align-items: flex-start;

	padding: .6rem 1rem .4rem;
}

#logo-and-name{
	display: flex;
}

#nav-logo{
	margin-right: 1rem;
	height: 2.5rem;
}

#nav-btn{
	border-radius: 2px;

	max-height: 2.5rem;

	padding: .2rem .5rem;
	display: flex;
	align-items: center; 
}

#nav-ham{
	display: flex;
	align-items: center;
	justify-content: center;

	font-size: 2.5rem;
}

#nav-ham-img{
	height: 2.5rem;
}

#nav-list{
	position: fixed;
	right: -110vw;
	z-index: 100;

	width: 100vw;
	height: calc(100vh - 4rem);
}

.nav-li{
	margin-left: calc(2vw + 2rem);
}

#nav-menu{
	content-visibility: visible;
  opacity: 1;
  transition: transform 0.6s ease, opacity 0.6s ease;
}

.nav-menu-show{
  transform: translateX(-110vw);
  opacity: 0;
}

#open-nav-sub-menu-img{
	display: none;
}
/* Hero */

#hero-div{
	height: calc(70vh - 4rem);
	
	position: relative;
}

#hero-img{
	position: absolute;
	z-index: -1;

	height: calc(70vh - 4rem);
	width: 100%;
	object-position: left;
}

#hero-img>img{
	height: calc(70vh - 4rem);
}

#hero-text{	
	position: absolute;
	margin-top: 0rem;

	width: 90%;

	padding: 2rem 5vw 5vh ;
}

#hero-title{
	padding-bottom: 1.5rem;
}

#hero-buttons{
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-top: 2rem;
}

.hero-btn{
	margin-bottom: 1rem;
}

#hero-form-btn{
  opacity: 0;
  transform: translateY(20vh);
  animation: fadeUp 0.6s ease forwards;
}

#hero-tel-btn{	
  opacity: 0;
  transform: translateY(20vh);
  animation: fadeUp 1s ease forwards;
}

/* Pop up */

.popup2{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);

    display: flex;
    align-items: center;
    justify-content: center;

    z-index: 9999;
}

.popup2-content {
    background: white;
    padding: 25px 35px;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

.popup2 button {
    margin-top: 15px;
    padding: 8px 15px;
    border: none;
    background: #2ecc71;
    color: white;
    border-radius: 5px;
    cursor: pointer;
}


.popup{
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1000;

	height: 100%;
	width: 100%;

	display: flex;
  align-items: center;
  justify-content: center;
}

.cookie-popup-content{
	border-radius: 3px;
	box-shadow: 0 10px 30px rgba(0,0,0,0.4);

	width: 80vw;
	max-width: 400px;
	background-color: rgb(255, 245, 245);

	padding: 1rem 2rem;
}

.popup-btns{
	display: flex;
	justify-content: center;
}

.popup-btn{
	margin: 1rem;

	border: none;

	background-color: #ad6321;
	
	padding: 0 .5rem;
}

.popup-btn>p{
	color: white;
}

.hidden {
    display: none;
}

/* Offer Form */

#offer-form-div{
  position: relative;
  
  height: auto;
  width: 100%;

  background: rgba(0, 0, 0, 0.6);
}

#form-bg{
	position: absolute;

  opacity: .6;
}

#offer-form{
	margin: 3rem 2rem;

  position: relative;

  border-radius: 3px;

  height: auto;
  background-color: rgba(200, 200, 200, .7);

  padding: 2vw;
}

#offer-form-top{
  display: flex;
  flex-direction: column;
}

.offer-input{
  margin-bottom: 0.5rem;

  border-radius: 4px;

  font-size: clamp(10px, 3.4vw, 19px);  
  background-color: rgb(255, 255, 255, .6);

  padding-left: 2rem;
}

#offer-text{
  height: 15rem;
  width: 100%;

  border-radius: 4px;

  font-size: clamp(10px, 3.4vw, 19px);
  background-color: rgb(255, 255, 255, .6);

  padding: 0.5rem;
  padding-left: 2rem;
}

#offer-selects{
  display: flex;
  flex-direction: column;
}

#offer-form-bottom{
  display: flex;
  flex-direction: column;
  align-items: center;
}

#offer-btn{
  margin: 2vh;

  border: none;
  border-radius: 3px;

  padding: 1rem;
  font-weight: 700;
}

#user-infos{
  display: flex;
  flex-direction: column;
  align-items: center;
}

.offer-input{
  width: 100%;
  border: 1px rgba(56,43,40, .3) solid !important;
}

#offer-text{
  border: 1px rgba(56,43,40, .3) solid !important;
  resize: none;
}

input:focus,textarea:focus {
  outline: 1px rgb(56,43,40) solid;
}

/* media query: laptops and bigger device */
@media screen and (min-width: 992px) {

.img-m{
	display: none;
}

.img-d{
	display: block;
}

#hero-div{
	width: 100%;
	height: 32rem;
}

#hero-img{
	position: absolute;

	height: 32rem;
	width: 100%;

	z-index: -1;
}

#hero-img>img{
	height: 32rem;
}

}

@media screen and (min-width: 1300px) {

/* Nav */
nav{
	display: flex;
}

#nav{
	flex-grow: 1;
}

#nav-ham{
	visibility: hidden;
}

#nav-menu{
	opacity: 1;
	transform: none;
}

#nav-list{
	position: static;

	height: auto;
	width: auto;

	display: flex;
	padding-left: 0;
}

.nav-li{
	margin: 1.3rem .7rem 0;
}

#nav-sub-menu{
	content-visibility: visible;
  transition: transform 0.5s ease, opacity 0.5s ease;
}

.nav-menu-sub-hide{
  opacity: 0;
}

#open-nav-sub-menu-img{
	display: inline;

	height: 1rem;
	width: 1rem;
}

#nav-sub-list{
	position: fixed;
	right: 5rem;

	padding: .8rem 1.6rem .8rem 1.2rem;
}

.nav-sub-li{
	margin: .2rem;
}
}