/* Generali */
html {
	scroll-behavior: smooth;
}

/* === STYLE GUIDES === */

/* -- Color Palette -- */

:root {
	--white: #FFFFFF;
	--darkwhite: rgba(245, 245, 247, 0.4);
	--lightgrey: #F0F0F4;
	--grey: #8C96A0;
	--darkgrey: #333333;
	--black: #222222;
	--orange: #ef8634;
	--blue:#1FBCE8;
	--red: #ffa7b8;
	--darkred: #FF606D;
	--green: #9FCB74;
	--shadow: rgba(51,51,51, 0.1)
}

/* -- Background Color -- */

.back-white {
	background-color: var(--white);
}

.back-black {
	background-color: var(--darkgrey);
}

.back-grey {
	background-color: var(--grey);
}

.back-darkwhite {
	background-color: var(--darkwhite);
}

.back-img {
	background-image: url('xxx.png');
	background-size: cover;
}

/* -- Tipography Font, Color & Allineament -- */

body {
	font-family: 'Open Sans', sans-serif;
	font-display: swap;
}

.white {
	color: var(--white) !important;
}

.black {
	color: var(--black) !important;
}

.dark-grey {
	color: var(--darkgrey) !important;
}

.orange {
	color: var(--orange) !important;
}

.blue {
	color: var(--blue) !important;
}

.red {
	color: var(--red) !important;
}

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

.center {
	text-align:center;
}

.left {
	text-align:left;
}

.right {
	text-align:right;
}

/*  -- Tipography Size -- */

h1 {
	font-size: 54px;
	line-height: 1.5;
	font-weight: 700;
	font-family: 'Raleway', sans-serif;
}

h2 {
	font-size: 40px;
	line-height: 1.5;
	font-weight: 700;
	font-family: 'Raleway', sans-serif;
}

h3 {
	font-size: 32px;
	line-height: 1.5;
	font-weight: 700;
	font-family: 'Raleway', sans-serif;
}

h4 {
	font-size: 24px;
	line-height: 1.5;
	font-weight: 700;
	font-family: 'Raleway', sans-serif;
}

h5 {
	font-size: 20px;
	line-height: 1.5;
	font-weight: 700;
	font-family: 'Raleway', sans-serif;
}

h6 {
	font-size: 18px;
	line-height: 1.5;
	font-weight: 700;
	font-family: 'Raleway', sans-serif;
}

p {
	font-size: 18px;
	line-height: 1.5;
	font-weight: 400;
}

.span1 {
	font-size: 16px;
	line-height: 1.5;
	font-weight: 400;
}

.span2 {
	font-size: 14px;
	line-height: 1.5;
	font-weight: 400;
}

.span3 {
	font-size: 12px;
	line-height: 1.5;
	font-weight: 400;
	}

.span3 {
	font-size: 10px;
	line-height: 1.5;
	font-weight: 400;
}

.btk-c-link {
	text-decoration: none;
}

.btk-c-link.btk-c-link:hover {
	color:var(--white);
	text-decoration: none;
}

.btk-c-link--underline {
	color:var(--white);
	text-decoration: underline;
}

.btk-c-link--underline:hover {
	color:var(--white);
	text-decoration: underline;
}

@media screen and (max-width: 640px) {

	h1 {
		font-size: 32px;
		line-height: 48px;
	}

	h2 {
		font-size: 24px;
		line-height: 36px;
	}

	h3 {
		font-size: 20px;
		line-height: 27px;
	}

	h4 {
		font-size: 18px;
		line-height: 27px;
		font-weight: 700;
	}
}

@media (min-width: 640px) and (max-width: 960px) {

	h1 {
		font-size: 32px;
		line-height: 48px;
	}

	h2 {
		font-size: 24px;
		line-height: 36px;
	}

	h3 {
		font-size: 20px;
		line-height: 27px;
	}

	h4 {
		font-size: 18px;
		line-height: 27px;
		font-weight: 700;
	}
}

@media (min-width: 960px) {

	h1 {
		font-size: 40px;
		line-height: 60px;
	}

	h2 {
		font-size: 32px;
		line-height: 48px;
	}

	h3 {
		font-size: 24px;
		line-height: 36px;
	}

	h4 {
		font-size: 20px;
		line-height: 34px;
		font-weight: 700;
	}
}

/* === LAYOUTS ELEMENTS === */

/* -- General Element -- */

.btk-l-hero {
	height: 100vh;
	background-size: cover;
}

.btk-l-menu {
	height: 80px;
}

.btk-l-sec {
	padding: 5rem 0;
}

.btk-l-sec--top {
	padding: 5rem 0 0 0;
}

.btk-l-sec--bottom {
	padding: 0 0 5rem 0;
}

.btk-l-sec__main {
	background-image: linear-gradient(180deg, rgba(34, 34, 34, 0.7), rgba(51, 51, 51, 0.7)), url('../img/hero.png');
	background-blend-mode: multiply;
	padding-bottom: 5rem;
	
}

/* -- Flex Direction Element -- */

@media (min-width: 640px) {

	.uk-flex-row\@s {
		flex-direction: row;
	}

	.uk-flex-column\@s {
		flex-direction: row;
	}
}

@media (min-width: 960px) {

	.uk-flex-row\@m {
		flex-direction: row;
	}

	.uk-flex-column\@m {
		flex-direction: row;
	}
}

@media (min-width: 1200px) {

	.uk-flex-row\@l {
		flex-direction: row;
	}

	.uk-flex-column\@l {
		flex-direction: row;
	}
}

@media (min-width: 1600px) {

	.uk-flex-row\@xl {
		flex-direction: row;
	}

	.uk-flex-column\@xl {
		flex-direction: row;
	}
}

/* -- Header Element -- */

.btk-c-logo {
	height: 3.5rem;
	margin-right: 3rem;
}

.btk-c-logo img {
	width: 100%;
}

.uk-navbar-nav>li>a {
	color:var(--white);
	text-transform: none !important;
	font-family: 'Open Sans' !important;
}

.uk-navbar-nav>li>a:hover {
	color: var(--orange);
	text-transform: none !important;
	font-family: 'Open Sans' !important;
}

.uk-navbar-nav>li.uk-active>a {
	color: var(--orange);
	text-transform: none !important;
	font-family: 'Open Sans' !important;
}

.btk-c-menu__cta {
	font-weight: 800;
}

.uk-navbar-container:not(.uk-navbar-transparent) {
	background-color: var(--black);
	box-shadow: 0px 2px 10px 0 var(--darkgrey);
}

.btk-l-menu ul {
	list-style: none;
}

.uk-offcanvas-bar li {
	margin-bottom: 2rem;
}

@media screen and (max-width: 960px) {

	.btk-c-logo {
		height: 40px;
		margin-left: 1.5rem;
	}
}

/* === COMPONENTS === */

/* -- Button -- */

.btk-c-button__simple {
	width: 100%;
	height: 3.5rem;
	background-color: var(--orange);
	border-radius: 0.25rem;
	line-height: 48px;
	color:var(--white);
	text-transform: none !important;
}

.btk-c-button__simple p {
	color: var(--white) !important;
	margin: 0 !important;
}

.btk-c-button__simple i {
	color: var(--white);
	margin: 0 1rem 0 0;
}

.btk-c-button__outline {
	width: 100%;
	background-color: transparent;
	border-radius: 0.25rem;
	line-height: 48px;
	color: var(--grey);
	border: 2px solid var(--grey);
	text-transform: none !important;
}

.btk-c-spinner {
    display: none;
}

.btk-c-button__simple.btk-active .btk-c-spinner {
    margin-right: 1rem;
    display: block;
    outline: none;
}

/* -- Image -- */

.btk-c-image svg {
	height: 100%;
}

/* -- Field -- */

.btk-c-field__input {
	height: 3.5rem;
	background-color: var(--white);
	border-radius: 0.5rem;
	border: none;
}

.btk-c-field__select {
	height: 3.5rem !important;
	background-color: var(--white);
	border-radius: 0.5rem;
	border: none;
	color: #666666;
	font-size: 14px;
}

.tagify {
	padding: 0.5rem !important;
	font-size: 14px;
	color: var(--darkgrey) !important;
}

.tagify {
	--tag-bg: var(--blue) !important;
	--tag-hover: var(--blue) !important;
	--tag-remove-btn-bg--hover: var(--darkred) !important;
	--tag-invalid-bg: var(--darkred) !important;
	--tag-invalid-color: var(--white) !important;
	--tag-text-color: var(--white) !important;
	--tag-text-color--edit: var(--white) !important;
	--tag-remove-bg: var(--darkred) !important;
}

.tagify__input {
	margin: auto 0;
}

.tagify__tag {
	margin: 0.25rem 0.25rem;
}

.tagify__tag-text {
	font-size: 12px;
	line-height: 18px !important;
	color: var(--white);
}

.tagify.btk-c-field__input {
	min-height: 2.5rem !important;
	height: auto;
}


/* -- Card -- */

.btk-c-card {
	background-color: var(--white);
	border-radius: 0.5rem;
	padding: 1rem;
	margin: 1rem;
}

.btk-c-card img {
	object-fit: contain;
}

#brand .btk-c-card {
	height: 80px;
}

@media screen and (max-width: 640px) {

	#brand .btk-c-card {
		padding: 0.5rem;
		margin: 0.5rem;
		height: 100px !important;
	}
}

@media (min-width: 640px) and (max-width: 960px) {

	#brand .btk-c-card {
		padding: 1rem;
		margin: 0.5rem;
		height: 130px !important;
	}
}

@media (min-width: 960px) and (max-width: 1200px) {

	#brand .btk-c-card {
		padding: 0.5rem;
		margin: 0.5rem
	}
}

/* -- Form Elements -- */

/* Form Section */ 

::placeholder {
	font-size: 14px;
	color: #666666;
}

.btk-c-field__group label {
	font-size: 14px;
}

.uk-form-danger {
	font-size: 14px;
	display: none;
	color: var(--red);
}

.btk-c-form__alert {
	display: none;
	border-radius: 4px;
	background-color: var(--green);
	color:var(--white);
	text-align: center;
	padding: 0 1rem;
	margin-top: 1rem;
}


#form .btk-c-sec__title {
	width: 50%;
	margin-bottom: 1rem;
}

.was-validated .btk-c-field__input:invalid {
	border: 1px solid var(--red);
}

.was-validated .btk-c-field__checkbox:invalid {
	border: 1px solid var(--red);
}

.was-validated .btk-c-field__select:invalid {
	border: 1px solid var(--red);
}

.was-validated .btk-c-field__textarea:invalid {
	border: 1px solid var(--red);
}

.was-validated .btk-c-field__input:invalid~.uk-form-danger {
	display: block;
}

.was-validated .btk-c-field__checkbox:invalid~.uk-form-danger {
	display: block;
}

.was-validated .btk-c-field__select:invalid~.uk-form-danger {
	display: block;
}

.was-validated .btk-c-field__textarea:invalid~.uk-form-danger {
	display: block;
}

.was-validated .btk-c-form__alert.btk-success {
	display: block !important;
}


@media screen and (max-width: 960px) {

	.btk-c-field__group {
		width: 95%;
		margin-left: auto;
		margin-right: auto;
	}

	#form .btk-c-sec__title {
		width: 90%;
		margin-bottom: 1rem;
	}
}

/* === LANDING ELEMENT === */

/* -- Hero Section -- */

.btk-c-claim {
	width: 100%;
	margin: 2rem auto 0 auto;
}

.btk-c-hero__form {
	padding: 1.5rem 1rem;
	background-color: rgba(255, 255, 255, 0.3);
	border-radius: 0.5rem;
	box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
	width: 70%;
}

.btk-c-form__title {
	margin-bottom: 3.5rem;
}

.btk-c-form__title h1 {
	margin-bottom: 0;
}

.btk-c-claim h3 {
	font-weight: 400;
	margin: 0;
}

.btk-c-claim h3 span {
	font-weight: 800;
}

.btk-c-form__title p {
	margin: 0;
}

.btk-c-form__row {
	margin-top: 1rem;
  grid-gap: 1.5rem
}

.btk-c-form__row:first-of-type {
	margin-bottom: 1rem;
}

.btk-c-field__group:first-of-type {
	margin: 0;
}

#hero-form .btk-c-button__simple {
	margin-top: 1.5rem;
}

#hero-form .btk-c-field__input {
	box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1);
}

#hero-form .btk-c-field__select {
	box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1);
}

#hero-form .btk-c-button__simple {
	box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1);
}

#hero-side-form .btk-c-button__simple {
	margin-top: 1.5rem;
	width: 200px;
	border-radius: 0 0.5rem 0.5rem 0;
}

#hero-side-form .btk-c-field__input {
	border-radius: 0.5rem 0 0 0.5rem;
}

#hero-side-form .btk-c-form__row {
	margin-bottom: 1rem;
}

@media screen and (max-width: 960px) {

	.btk-c-form__title h1 {
		font-size: 28px;
		line-height: 1.3;
	}

	.btk-c-hero__form {
		width: 95%;
		padding: 1rem 0.5rem;
	}
	
	.btk-c-form__row {
		margin: 0;
	}

	.btk-c-field__group:first-of-type {
	margin: 0 auto;
}

	.btk-c-field__group:nth-child(2) {
		margin: 0 auto;
	}

	.btk-c-field__group:nth-child(3) {
		margin: 0 auto;
	}

	.btk-c-field__group {
		margin-bottom: 0.5rem;
	}

	.btk-c-form__title {
		margin-bottom: 1.5rem;
	}

	#hero .btk-l-box__image {
		display: none;
	}
}

@media screen and (max-width: 640px) {

	#hero-side-form {
		margin-top: 1rem;
	}

	#hero-side-form .btk-c-field__input {
		border-radius: 0.5rem;
	}

	#hero-side-form .btk-c-field__group {
		margin: 0;
		width: 100%;
	}

	#hero-side-form .btk-c-button__simple {
		border-radius: 0.5rem;
		width: 100%;
	}
}

@media (min-width: 640px) and (max-width: 960px) {

	#hero-side-form {
		margin-top: 1rem;
	}

	#hero-side-form .btk-c-field__group {
		margin: 0;
		width: 100%;
	}
}

@media (min-width: 960px) and (max-width: 1200px) {

	.btk-c-hero__form {
		width: 80%;
		padding: 1.5rem 1rem;
	}

}

/* -- Text Section -- */

.btk-l-box__text h2{
	width: 80%;
}

.btk-l-box__text p{
	width: 80%;
}

.btk-l-box__image img {
	width: 80%;
	height: 380px;
	object-fit: contain;
}

#hero .btk-l-box__image img {
	width: 80%;
	height: unset;
}

@media screen and (max-width: 960px) {

	.btk-l-box__text {
		width: 90%;
		margin: 0 auto;
	}

	.btk-l-box__text h2{
		width: 100%;
	}
	
	.btk-l-box__text p{
		width: 100%;
	}

	.btk-l-box__image {
		margin-bottom: 2rem;
	}

	.btk-l-box__image img {
		width: 100%;
		margin: 0 auto;
	}


}

/* -- Plan Section --*/

.btk-c-plans {
	align-items: stretch;
}

.btk-c-plan {
	padding: 1.5rem;
	width: 100%;
	box-shadow: 0px 2px 4px 0 var(--shadow);
}

.btk-c-plan img {
	height: 80px;
	margin-bottom: 1rem;
}

.btk-c-plan span {
	font-size: 40px;
	font-weight: 900;
}

.btk-c-plan__list {
	margin-bottom: 1rem;
}

.btk-c-plan__row {
	margin: 0 0 1rem 0;
}

.btk-c-plan__row p {
	margin: 0;
}

.btk-c-plan__row i {
	font-size: 1.5rem;
	margin-right: 0.75rem;
}

.btk-c-plan__button a {
	align-self: flex-end;
	width: 100%;
}

@media screen and (max-width: 640px) {

	#plan .btk-c-card {
		margin: 0 0 1rem 0 !important;
	}
}

/* -- Modal Form -- */

.uk-modal-title {
	font-size: 1.5rem;
}

.btk-c-form__modal .btk-c-button__simple {
	margin-top: 1.5rem;
	max-width: 250px;
}

.btk-c-form__modal .btk-c-field__group {
	margin-left: 0;
	margin-right: 0;
	margin-bottom: 1rem;
}

.btk-c-form__modal .btk-c-field__input {
	border: 2px solid var(--lightgrey);
}

.btk-c-form__modal .uk-form-danger {
	color: var(--darkred);
}

.uk-modal-body {
	border-radius: 0.5rem;
}

.uk-modal {
	background: rgba(0,0,0,.8);
}

/* -- Infobar -- */

.btk-c-infobar {
	height: 64px;
}

.btk-c-infobar p {
	padding: 0.5rem 0;
	color: var(--white);
}

.form-error {
	font-size: 14px;
	color: var(--red);
}