/* ---------------------------------------------------
    WEBSITE
    AUTOSPECIALIST IN BMW © WILMAX MONTFOORT
----------------------------------------------------- */

#sitewrapper {
	height: 100%;
}

/* HTML ELEMENTS */

a {
	outline: none;
	text-decoration: none;
}



/* NAV */

.site__nav {
	padding: 1.5rem 2rem;
}

.site__nav ul {
	display: flex;
	list-style: none;
	justify-content: space-between;
	margin: 0;
	padding: 0;
	width: 100%;
}

.nav__brand--logo {
	height: 55px;
	max-width: 100%;
}

.nav__link--item {
	color: #111;
	font-family: 'Joyride STD', Arial, sans-serif;
	font-size: 1.5rem;
	font-weight: bold;
	letter-spacing: -.0125rem;
}


/* HEADER */

.header__hero {
	align-content: center;
	display: flex;
	justify-content: center;
}

.header__hero--image {
	height: 800px;
	object-fit: cover;
	width: 100%;
}

.header__hero--body-wrapper {
	padding-left: 2rem;
	padding-bottom: 4rem;
	position: relative;
}

.header__hero--body {
	/*background-color: rgba(255, 255, 255, 0.85);
	box-shadow: 0 0px 15px rgba(0, 0, 0, 0.15);*/
	padding: 4.5rem;
	width: fit-content;
}

.header__hero--body h2 {
	color: #111;
	font-size: 6.5rem;
	line-height: 1;
	margin-bottom: 0;
	text-transform: uppercase;
}

.header__hero--body h3 {
	font-size: 2rem;
	line-height: 1.125;
	margin-bottom: .5rem;
	text-transform: uppercase;
}

.header__hero--body div.hero--extra--info {
	max-width: 400px;
}

.header__hero--body div.hero--extra--info p {
	color: #101010;
	font-size: .85rem;
	line-height: 1.5;
}



/* CTA */

.cta__body h3 {
	font-size: 1.75rem;
	line-height: 1.125;
	margin-bottom: 0;
	text-transform: uppercase;
}




/* INTRO */

.intro__block {
	padding: 14rem 0;
}

.intro__body h1 {
	color: #101010;
	font-size: 2.5rem;
	line-height: 1.1;
	margin-bottom: .75rem;
	text-transform: uppercase;
}

.intro__body h2 {
	color: #ED0615;
	font-size: 2rem;
	margin-bottom: .5rem;
	text-transform: uppercase;
}

.intro__body p {
	color: #222222;
	font-size: 1.25rem;
}

span.intro__body--quote {
	display: flex;
	font-size: 1.25rem;
	margin-bottom: .75rem;
}

.intro__page--img {
	box-shadow: 0 0px 15px rgba(0, 0, 0, 0.15);
	height: 550px;
	object-fit: cover;
	width: 100%;
}



/* PARAGRAPH */

.paragraph__block {
	padding: 0 0 14rem 0;
}

.paragraph__body h1 {
	color: #101010;
	font-size: 2.5rem;
	line-height: 1.1;
	margin-bottom: .75rem;
	text-transform: uppercase;
}

.paragraph__body h2 {
	color: #101010;
	font-size: 2rem;
	margin-bottom: .5rem;
	text-transform: uppercase;
}

.paragraph__body p {
	color: #222222;
	font-size: 1.25rem;
}

span.paragraph__body--quote {
	display: flex;
	font-size: 1.25rem;
	margin-bottom: .75rem;
}

.paragraph__page--img {
	box-shadow: 0 0px 15px rgba(0, 0, 0, 0.15);
	height: 550px;
	object-fit: cover;
	width: 100%;
}




/* APPOINTMENT */

.appointment__block {
	background-color: #FFF;
	padding: 10rem 0;
}

.appointment__body h2 {
	color: #101010;
	font-size: 5rem;
	margin-bottom: 1rem;
	text-transform: uppercase;
}

.appointment__body h3 {
	color: #101010;
	font-size: 1.75rem;
	margin-bottom: .75rem;
	text-transform: uppercase;
}

.appointment__body div.extra--info {
	max-width: 80%;
}

.appointment__body div.extra--info p {
	color: #101010;
	font-size: .8rem;
	line-height: 1.5;
}

.appointment__block ul {
	display: flex;
	flex-direction: column;
	list-style: none;
	margin: 0;
	padding: 0;
}

.appointment__block ul li {
	padding: .25rem 0;
	white-space: nowrap;
}

.appointment__block ul li i {
	color: #3AAFFF;
	font-size: 1.25rem;
}

.appointment__block ul li span.shorts {
	color: #101010;
	font-family: 'Eina 01', Arial, sans-serif;
	font-size: 1.25rem;
	font-weight: 400;
	line-height: 1;
}

.appointment__body p {
	font-size: 1.25rem;
}

.appointment__page--img {
	/*box-shadow: 0 0px 15px rgba(0, 0, 0, 0.15);*/
	height: auto;
	object-fit: cover;
	max-width: 100%;
}



/* ---------------------------------------------------
	REVIEW WIDGET
----------------------------------------------------- */

.review__block {
	background: linear-gradient(to top right, #000000, #333333);
	padding: 3rem 0rem;
}

.review__summary--wrapper {
	align-items: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.review__summary--body {
	width: 100%
}

.summary--counter {
	color: #111;
	font-size: 2rem;
	font-weight: 600;
}

.summary--stars {
	color: #ED0615;
	font-size: 1.5rem;
}

.summary--stars i {
	margin-left: .125rem;
	margin-right: .125rem;
}

.summary--details {
	color: #111;
	font-size: 1.15rem;
}

.review__widget--item {
	background-color: #FFF;
	border-radius: 0;
	box-shadow: 0 0 .85rem rgba(0, 0, 0, 0.125);
	padding: 2rem;
}

.widget--item--body {
	width: 100%
}

.review--header {
	margin-bottom: .5rem;
}

.review--header i {
	color: #ED0615;
	font-size: 1.4rem;
	margin-right: .05rem;
}

.review--header span.review--counter {
	color: #ED0615;
	font-family: 'Joyride STD', Arial, sans-serif;
	font-size: 1.4rem;
	margin-right: .05rem;
}

.review--body {
	min-height: 75px;
	margin-bottom: .5rem;
}

.review--body p {
	color: #111;
	font-size: 1.1rem;
	line-height: 1.35;
}

.review--details p {
	color: #111;
	font-size: 1rem;
	margin-bottom: 0;
}

.review__footer--wrapper {
	display: flex;
	justify-content: center;
}

.review__footer--wrapper img.review--logo--gosalon {
	height: 1.85rem;
}


/* SERVICES INTRO */

.services__introblock {
	background-color: #101010;
	padding: 7.5rem 0 0 0;
	position: relative;
	clip-path: polygon(0 25%, 100% 0, 100% 100%, 0 100%);
}

.services__introblock h2 {
	display: inline-flex;
	font-size: 7rem;
	margin-bottom: 0rem;
	background: linear-gradient(to right, #EAEAEA, #39AFFF, #0053E8, #ED0615);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	text-fill-color: transparent;
}


/* SERVICES */

.services__block {
	background-color: #101010;
	padding: 2rem 0 4rem 0;
}

.service__body {
	display: flex;
}

.service__body .inner--content {
	border: 1.5px solid #444;
	padding: 2rem;
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}

.service__body h3 {
	color: #FFF;
	font-size: 1.75rem;
	font-weight: bold;
	line-height: 1.1;
	margin-bottom: .5rem;
	text-transform: uppercase;
}

.service__body p {
	color: #FFF;
	font-size: 1.15rem;
}

.textheader--dash--lightblue {
	color: #6cc6ff;
	letter-spacing: -9px;
}

.textheader--dash--darkblue {
	color: #0a5698;
	letter-spacing: -9px;
}

.textheader--dash--red {
	color: #ee0716;
	letter-spacing: -9px;
}

.service__item--img {
	height: auto;
	object-fit: cover;
	max-width: 100%;
}

.service__body i {
	color: #BBB;
	font-size: 5.5rem;
	margin-bottom: 1.5rem;
	transition: .3s ease-in-out all;
	text-shadow: 0 .5px 5px #FFF;
}

/* end block */

.services__endblock {
	background-color: #101010;
	padding: 0 0 7.5rem 0;
	position: relative;
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0 75%);
}

.services__endblock h3 {
	color: #FFF;
	font-size: 3rem;
	margin-bottom: 0rem;
}

.services__endblock h4 {
	color: #ED0615;
	font-size: 2rem;
	margin-bottom: 0rem;
}



/* FEATURES */
.wilmaxfeatures__block {
	background: url('../../assets/images/page/wilmax-specialist-in-bmw-features.jpg') no-repeat center center;
	background-size: cover;
	min-height: 75vh;
	position: relative;
	display: flex;
	align-items: center;
}

.wilmaxfeatures__block .text--wrapper {
	text-align: left;
	max-width: 600px;
	padding: 2rem;

}

.wilmaxfeatures__block .img--wrapper img {
	margin-bottom: 1.5rem;
	width: 100%;
}

.wilmaxfeatures__block h2 {
	color: #101010;
	font-size: 4rem;
	font-weight: bold;
	line-height: 1;
	margin-bottom: 0.5rem;
	text-transform: uppercase;
}

.wilmaxfeatures__block p {
	color: #101010;
	font-size: 1.25rem;
	line-height: 1.5;
}

.wilmaxfeatures__block p a {
	color: #101010;
	transition: .3s ease-in-out all;
}

.wilmaxfeatures__block p a:hover {
	color: #ED0615;
}


.wilmaxfeatures__block .container {
	height: 100%;
}

.wilmaxfeatures__block .row {
	height: 100%;
}

.wilmaxfeatures__block .col-12 {
	display: flex;
	justify-content: flex-end;
	align-items: center;
}



/* ARTICLES */

.articles__block {
	background-color: #FFF;
	padding: 8rem 0 8rem 0;
}

.article__hero {
	box-shadow: 0 0px 15px rgba(0, 0, 0, 0.15);
	margin-bottom: 2.5rem;
	overflow: hidden;
}

.article__hero--img {
	height: 370px;
	object-fit: cover;
	width: 100%;
}

.article__heading {
	padding-left: .75rem;
	padding-right: .75rem;
}

.article__heading h3 {
	color: #101010;
	font-size: 2rem;
	margin-bottom: .75rem;
	text-transform: uppercase;
}

.article__body {
	padding-left: .75rem;
	padding-right: .75rem;
}

.article__body p {
	color: #101010;
	font-size: 1.125rem;
	line-height: 1.75rem;
}



/* FOOTER */

footer {
	background: linear-gradient(to top right, #000000, #333333);
}

footer .footer__body ul {
	display: flex;
	flex-direction: column;
	list-style: none;
	margin: 0;
	padding: 0;
}

.footer__top {
	background: linear-gradient(to right, #3AAFFF 0%, #3AAFFF 5%, #0053E9 5%, #0053E9 10%, #ED0615 10%, #ED0615 15%, #f6f6f6 15%, #f6f6f6 100%);
}

.footer__heading {
	font-size: 1.25rem;
	margin-bottom: .75rem;
}

.footer__link {
	padding-bottom: .25rem;
	padding-top: .25rem;
}

.footer__text {
	padding-bottom: .25rem;
	padding-top: .25rem;
}

.footer__body .row {
	padding-left: 5%;
}

footer h3 {
	color: #FFF;
	font-size: 1.75rem;
	font-weight: bold;
}

.footer__text p {
	color: #F6F6F6;
	font-family: 'Eina 01', Arial, sans-serif;
	font-size: 1.25rem;
	font-weight: 400;
	letter-spacing: -.0125rem;
	line-height: 1;
}

.footer__link--item {
	color: #F6F6F6;
	font-family: 'Eina 01', Arial, sans-serif;
	font-size: 1.25rem;
	font-weight: 400;
	letter-spacing: -.0125rem;
	line-height: 1;
	transition: color .2s ease-in-out;
}

.footer__link--item:hover {
	color: #3AAFFF;
}

footer .footer__end ul {
	display: flex;
	flex-direction: row;
	list-style: none;
	margin: 0;
	padding: 0;
}

.footer__logo .footer--logo {
	height: auto;
	width: 100%;
}

.footer__end a {
	color: #999;
	font-family: 'Eina 01', Arial, sans-serif;
	font-size: .95rem;
	font-weight: 400;
	letter-spacing: -.0125rem;
	line-height: 1;
	transition: color .2s ease-in-out;
}

.footer__end a:hover {
	color: #6cc6ff;
}



/* FAQ */

.faq__block {
	background: url('../../assets/images/page/wilmax-specialist-in-bmw-classics.jpg') no-repeat center center;
	padding: 8rem 0;
	background-size: cover;
}

.faq__wrapper {
	/*background: linear-gradient(to top right, #ce000d 0%, #ee0716 50%, #ff0011 100%);*/
	padding: 2.5rem;
}

.faq__wrapper .inner--block {
	background: #FFF;
	box-shadow: 0 0px 10px rgba(0, 0, 0, 0.1);
	padding: 3rem;
}

.faq__wrapper h2 {
	color: #010101;
	font-family: 'Joyride STD', Arial, sans-serif;
	font-size: 2rem;
	text-transform: uppercase;
}

.faq__wrapper h3 {
	font-family: 'Eina 01', Arial, sans-serif;
	font-size: 1.5rem;
}

.faq__wrapper .accordion-body p {
	font-size: 1rem !important;
}

.accordion-button:not(.collapsed) {
	color: #222;
	background-color: #eee;
}

h2.accordion-header .accordion-button {
	font-family: 'Eina 01', Arial, sans-serif;
	font-size: 1.125rem;
	font-weight: 600;
}

h2.accordion-header .accordion-button:focus {
	border: none !important;
	outline: none !important;
}

.accordion-button:focus {
	box-shadow: none;
}

.accordion-button:not(.collapsed)::after {
	background-image: var(--bs-accordion-btn-icon);
}

.accordion-body iframe {
	height: 700px;
}

.accordion-item {
	border-width: 1.5px;
}

.accordion-button:hover,
.accordion-button:not(.collapsed) {
	background-color: #222;
	color: #FFF;
}

.accordion-item:first-of-type {
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}

.accordion-item:first-of-type .accordion-button {
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}

.accordion-item:last-of-type {
	border-bottom-right-radius: 0;
	border-bottom-left-radius: 0;
}




/* LOGOS */

.logos ul {
	display: flex;
	flex-direction: row;
	list-style: none;
	justify-content: space-between;
	margin: 0;
	padding: 0;
}

.logo__item {
	display: flex;
	justify-content: center;
}

.logo__item--img {
	height: 60px;
	max-width: 100%;
}



/* BUTTONS */

button.btn__content--1,
a.btn__content--1 {
	background-color: #F3F3F3;
	border: 1.5px solid #F3F3F3;
	border-radius: 3rem;
	color: #000;
	display: inline-block;
	font-family: 'Eina 01', Arial, sans-serif;
	font-size: 1.25rem;
	font-weight: 600;
	letter-spacing: .0125rem;
	text-decoration: none !important;
	transition: all .2s ease-in-out;
	padding: .5rem 1.25rem .8rem 1.25rem;
}

button.btn__content--1:hover,
a.btn__content--1:hover {
	border: 1.5px solid #3E42F7;
	background-color: #3E42F7;
	color: #FFF;
}

button.btn__ctafooter,
a.btn__ctafooter {
	background-color: #DDD;
	border: 2px solid #DDD;
	border-radius: 0;
	color: #222;
	display: inline-block;
	font-family: 'Joyride STD', Arial, sans-serif;
	font-size: 1.35rem;
	font-weight: 600;
	letter-spacing: -.0125rem;
	text-decoration: none !important;
	transition: all .2s ease-in-out;
	padding: .75rem 1.25rem .55rem 1.25rem;
	white-space: nowrap;
}

button.btn__ctafooter:hover,
a.btn__ctafooter:hover {
	border: 2px solid #111;
	background-color: #111;
	color: #FFF;
}


button.btn__content,
a.btn__content {
	background-color: #EDEDED;
	border: 2px solid #EDEDED;
	border-radius: 0;
	color: #222;
	display: inline-block;
	font-family: 'Joyride STD', Arial, sans-serif;
	font-size: 1.35rem;
	font-weight: 600;
	letter-spacing: -.0125rem;
	text-decoration: none !important;
	transition: all .2s ease-in-out;
	padding: .75rem 1.25rem .55rem 1.25rem;
	white-space: nowrap;
}

button.btn__content:hover,
a.btn__content:hover {
	border: 2px solid #111;
	background-color: #111;
	color: #FFF;
}

button.btn__appointment,
a.btn__appointment {
	background-color: #EDEDED;
	border: 2px solid #EDEDED;
	border-radius: 0;
	color: #111;
	display: inline-block;
	font-family: 'Joyride STD', Arial, sans-serif;
	font-size: 1.35rem;
	font-weight: 600;
	letter-spacing: -.0125rem;
	text-decoration: none !important;
	transition: all .2s ease-in-out;
	padding: .75rem 1.25rem .55rem 1.25rem;
}

button.btn__appointment:hover,
a.btn__appointment:hover {
	border: 2px solid #111;
	background-color: #111;
	color: #FFF;
}



/* TYPO */

h1,
h2,
h3,
h4 {
	font-family: 'Joyride STD', Arial, sans-serif;
	letter-spacing: -.025rem;
	line-height: 1;
	margin-bottom: 0;
}

p {
	font-family: 'Eina 01', Arial, sans-serif;
	font-weight: 400;
	line-height: 1.5;
	margin-bottom: 0;
}

h1 {
	font-size: 3rem;
	font-weight: bold;
}

h2 {
	font-size: 2rem;
	font-weight: bold;
}

h3 {
	color: #010101;
	font-size: 1.5rem;
	font-weight: bold;
}

p {
	color: #010101;
	font-size: 1.125rem;
}



/* Colors */

.text-feathergrey {
	color: #EEE;
}

.text-grey {
	color: #AAA;
}

.text-blue {
	color: #3E42F7;
}

.text-white {
	color: #FFF;
}

.text-dark {
	color: #000;
}

.bg-darkgrey {
	background-color: #222;
}

.bg-blue {
	background-color: #3E42F7;
}

.bg-ash {
	background-color: #F6F6F6;
}

.bg-grey {
	background-color: #AAA;
}