/****************
Imports
/****************/
	@import url('https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css');
	@import url('https://unpkg.com/swiper/swiper-bundle.min.css');

/****************
Fonts
****************/
	@import url('https://fonts.googleapis.com/css2?family=Montserrat+Alternates:wght@300;600&display=swap');
	@import url('https://fonts.googleapis.com/css2?family=Krona+One&display=swap');

/****************
Basic settings
****************/
html,
body {
	overflow-x: hidden;
}

body {
	scroll-behavior: smooth;
	margin-bottom: 80px;
}

/****************
Text
****************/
p,
.form-group,
.heading,
.h-like-p,
.list-inline-item {
	font-family: 'Montserrat Alternates', sans-serif;
  	font-size: calc(16px + 12 * ((100vw - 320px) / 1240));
	line-height: 180%;
}

a {
	text-decoration: none;
	color: #FFD120;
}

a:hover {
	text-decoration: underline;
	color: #FFD120;
}

.heading {
	margin-top: 24px;
	display: inline-block; 
	position: relative;
}

.heading:after {
	content: "";
	background-color: #FFD120;
    position: absolute;
    display: inline-block;
    height: 8px;
    width: 100%;
    top: 60%;
    left: 0;
    z-index: -90;
}

.highlight {
	font-family: 'Krona One', sans-serif;
	font-size: calc(20px + 48 * ((100vw - 320px) / 1240));
}

em {
	font-style: normal;
	font-weight: bold;
}

/****************
Elements
****************/
.header-main {
	position: fixed;
	z-index: 90;
	width: 100%;
}

.one-page {
	padding-top: 128px;
	min-height: 100vh;
}

.website-screenshot {
	box-shadow: 0px 0px 24px 4px rgba(0, 0, 0, 0.25);
	width: 103%;
	border-radius: 8px;
	margin-top: 16px;
	transition: all 0.15s ease-in-out; 
}

/****************
Components
****************/

/* menu */
.brand img {
	width: 112px;
	height: 112px;
}

.nav-main__list {
	float: right;
	margin-top: 32px;
}

.nav-main__item,
.btn {
	border-radius: 32px;
	border: none;
	background-color: #fff;
	padding: 16px 24px;
	color: #000;
	box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, 0.25);
}

.nav-main__list a:hover,
.btn:hover,
.nav-main__item.active {
	background-color: #000;
	color: #fff;
}

/* buttons  */

.btn {
	font-family: 'Montserrat Alternates', sans-serif!important;
  	font-size: calc(16px + 12 * ((100vw - 320px) / 1240))!important;
}

.btn-primary {
	background-color: #000;
	color:  #fff;
}

/* gallery slider */
.has-swiper {
	position: relative;
}

.has-swiper .swiper-button-next,
.has-swiper .swiper-button-prev {
	top: 30%!important;
	background-color: #000;
	color: #fff;
}

.has-swiper .swiper-button-next {
	right: -48px;

}
.has-swiper .swiper-button-prev {
	left: -48px;	
}

.has-swiper .swiper-button-next:after,
.has-swiper .swiper-button-prev:after {
	font-size: inherit!important;
}

.swiper-slide {
	transition: all 0.15s ease-in-out; 
}

.swiper-slide:hover {
	transform: scale(1.025);
	z-index: 90;
}

.swiper-slide:hover .website-screenshot {
	box-shadow: 0px 0px 40px 4px rgba(0, 0, 0, 0.25);
}

/****************
Form
****************/

form {
	padding: 24px;
	border: 2px solid #000;
}

.form-group {
	margin-bottom: 16px;
}

.form-control {
	background-color: transparent!important;
	border: 0!important;
	border-bottom-width: 2px!important;
	border-bottom-style: solid!important;
	border-bottom-color: #000!important;
	color: #000000!important;
	border-radius: 0!important;
	outline: none!important;
  	box-shadow: none!important;
  	padding: 4px 0!important;
  	font-size:  inherit!important;
  	font-weight: inherit!important;
  	line-height: inherit!important;
}

.form-control:focus {
	border-bottom-color: #FFD120!important;
}

/* hack to avoid input autocomplete style */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus {
  -webkit-text-fill-color: #000000;
  background-color: transparent;
  transition: background-color 999999999s ease-in-out 0s;
}



/****************
Small devices (landscape phones, 576px and up)
****************/
@media (max-width: 576px) {
	.brand img {
		width: 64px;
		height: 64px;
	}

	.nav-main__list {
		position: fixed;
		bottom: 40px;
		left: 0;
		width: 100%;
		text-align: center;
		margin: 0;
	}

	.nav-main__item {
		padding: 16px;
	}

	.one-page {
		padding-top: 80px;
	}

	.website-screenshot {
		margin-left: 1px;
		margin-top: 0;
		width: 98%;
		object-fit: contain;
		box-shadow: 0 8px 16px 0px rgba(0, 0, 0, 0.25);
	}

	/* removing scale on mobile */
	.swiper-slide:hover {
		transform: scale(1);
	}
}


/****************
DARK MODE
****************/
@media (prefers-color-scheme: dark) {
	body {
		color: #DCDCDC;
		background: #222222;
	}

	.heading {
		text-shadow: 0px 2px 1px #222222;
	}

	.nav-main__item, .button,
	.has-swiper .swiper-button-next,
	.has-swiper .swiper-button-prev {
		background-color:  #222222;
		color: #DCDCDC;
		box-shadow:  -2px -2px 8px 0px rgb(255 255 255 / 25%);
	}

	.nav-main__list a:hover,
	.btn:hover,
	.nav-main__item.active {
		background-color: #DCDCDC;
		color: #222222;
	}

	form {
		border-color: #ffffff;
	}

	.form-control {
		border-bottom-color: #ffffff!important;
		color: #ffffff!important;
	}

	.btn-primary {
		background-color: #fff;
		color:  #000;
	}

	/* hack to avoid input autocomplete style */
	input:-webkit-autofill,
	input:-webkit-autofill:hover, 
	input:-webkit-autofill:focus,
	textarea:-webkit-autofill,
	textarea:-webkit-autofill:hover,
	textarea:-webkit-autofill:focus {
	  -webkit-text-fill-color: #ffffff;
	  background-color: transparent;
	  transition: background-color 999999999s ease-in-out 0s;
	}
}


/****************
PRINT
****************/
@media print {

}