/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v7.0.29,
* Autoprefixer: v9.7.6
* Browsers: last 4 version
*/

/* Global Settings */
:root {
  --blue-light: #ebf7ff;
  --choco: #bc6c25; /* hamburger */
  --choco-light: rgba(221, 161, 94, 1);
  --choco-light-2: rgba(221, 161, 94, 0.2);
  --choco-light-1: rgba(221, 161, 94, 0.1);
  --text-color: rgb(71, 70, 70);
  --white: #fff;
}
*,
*::after,
*::before {
  -webkit-box-sizing: inherit;
  box-sizing: inherit;
  margin: 0;
  padding: 0;
}

html {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-size: 62.5%;

  -webkit-text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
}

body {
  font-family: "Montserrat", sans-serif;
}

a,
a:hover,
a:active,
a:focus {
  text-decoration: none;
}

h2 {
  font-family: "Montserrat", sans-serif;
  font-size: 2rem;
  color: var(--text-color);
  text-transform: uppercase;
  letter-spacing: 0.1rem;
}

h2:after {
  display: block;
  content: " ";
  height: 0.1rem;
  width: 7.5rem;
  background-color: var(--choco);
  position: relative;
  top: 1rem;
  margin-bottom: 4rem;
}

p {
  line-height: 3.2rem;
  font-family: "Raleway", sans-serif;
  color: var(--text-color);
  font-size: 1.6rem;
  padding: 0 0 2rem 0;
}

.container {
  padding-right: 1.5rem;
  padding-left: 1.5rem;
  margin: auto;
  width: 80%;
}

/* Buttons */

.btn {
  color: var(--white);
  padding: 1rem 5rem;
  font-size: 1.6rem;
  border-radius: 5px;
  letter-spacing: 0.1rem;
  font-weight: 600;
  -webkit-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  text-align: center;
}

.btn--primary {
  background-color: var(--choco);
  border: 0.1rem solid var(--choco);
}
.btn--secondary {
  border: 0.1rem solid var(--white);
}

.btn--primary:hover {
  background-color: var(--choco-light);
  border: 0.1rem solid var(--choco-light);
}

.btn--secondary:hover {
  background-color: var(--choco-light);
  color: var(--white);
  border: 0.1rem solid var(--choco-light);
}

section {
  padding: 8rem 0;
}
/* Top Navigation */

.top-nav {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  height: 8.5rem;
  z-index: 9999;
  background-color: var(--white);
  -webkit-box-shadow: 0 0.2rem 0.2rem var(--choco-light-2);
  box-shadow: 0 0.2rem 0.2rem var(--choco-light-2);

  display: -ms-grid;

  display: grid;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.top-nav .container {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr -webkit-max-content;
  -ms-grid-columns: 1fr max-content;
  grid-template-columns: 1fr -webkit-max-content;
  grid-template-columns: 1fr max-content;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  height: 100%;
}
.logo {
  height: 7rem;
  width: auto;
  -ms-grid-column: 1;
  -ms-grid-column-span: 1;
  grid-column: 1 / 2;
}

.top-nav__links {
  -ms-grid-column: 3;
  -ms-grid-column-span: 1;
  grid-column: 3/4;
  -webkit-column-gap: 3rem;
  -moz-column-gap: 3rem;
  column-gap: 3rem;

  display: -ms-grid;

  display: grid;
  -ms-grid-columns: -webkit-max-content 3rem -webkit-max-content 3rem -webkit-max-content
    3rem -webkit-max-content 3rem -webkit-max-content;
  -ms-grid-columns: max-content 3rem max-content 3rem max-content 3rem
    max-content 3rem max-content;
  grid-template-columns: repeat(5, -webkit-max-content);
  grid-template-columns: repeat(5, max-content);
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;

  margin-bottom: 0;
  list-style-type: none;
}

.top-nav__links li {
  -ms-flex-item-align: center;
  -ms-grid-row-align: center;
  align-self: center;
}
.top-nav__links li:after {
  display: block;
  content: " ";
  background-color: transparent;
  height: 0.1rem;
  width: 0rem;
  -webkit-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;

  position: relative;
  top: 0.7rem;
}

.top-nav__links li:hover:after {
  width: 100%;
  background-color: var(--choco);
}

.top-nav__links li a {
  text-transform: uppercase;
  color: var(--text-color);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 0.2rem;
  text-decoration: none;
}

/* Header */

.header {
  background-image: -webkit-gradient(
      linear,
      left top,
      left bottom,
      from(rgba(0, 0, 0, 0.8)),
      to(rgba(0, 0, 0, 0.8))
    ),
    url(../images/hero.jpg);
  background-image: -o-linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),
    url(../images/hero.jpg);
  background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),
    url(../images/hero.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 63rem;
  background-attachment: fixed;

  display: -ms-grid;

  display: grid;
  -ms-grid-rows: 1fr -webkit-max-content 1fr;
  -ms-grid-rows: 1fr max-content 1fr;
  grid-template-rows: 1fr -webkit-max-content 1fr;
  grid-template-rows: 1fr max-content 1fr;
  -ms-flex-line-pack: center;
  align-content: center;
}

.header .container {
  -ms-grid-row: 2;
  -ms-grid-row-span: 1;
  grid-row: 2 / 3;
  display: -ms-grid;
  display: grid;
  -ms-grid-rows: -webkit-max-content 5rem -webkit-max-content;
  -ms-grid-rows: max-content 5rem max-content;
  grid-template-rows: -webkit-max-content -webkit-max-content;
  grid-template-rows: max-content max-content;
  row-gap: 5rem;
}

.header__text {
  font-size: 5.4rem;
  font-weight: 500;
  color: var(--blue-light);
}

.header__buttons .btn:first-child {
  margin-right: 3rem;
}

/* About us */

#about {
  display: -ms-grid;
  display: grid;
  -ms-grid-rows: -webkit-max-content -webkit-max-content;
  -ms-grid-rows: max-content max-content;
  grid-template-rows: -webkit-max-content -webkit-max-content;
  grid-template-rows: max-content max-content;
  -ms-grid-columns: 65% 35%;
  grid-template-columns: 65% 35%;
}

#about > *:nth-child(1) {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
}

#about > *:nth-child(2) {
  -ms-grid-row: 1;
  -ms-grid-column: 2;
}

#about > *:nth-child(3) {
  -ms-grid-row: 2;
  -ms-grid-column: 1;
}

#about > *:nth-child(4) {
  -ms-grid-row: 2;
  -ms-grid-column: 2;
}

#about h2 {
  -ms-grid-column: 1;
  -ms-grid-column-span: 1;
  grid-column: 1 / 2;
  -ms-grid-row: 1;
  -ms-grid-row-span: 1;
  grid-row: 1 / 2;
  -ms-grid-row-align: end;
  align-self: end;
}

.about__text {
  -ms-grid-row: 2;
  -ms-grid-row-span: 1;
  grid-row: 2 / 3;
  -ms-grid-column: 1;
  -ms-grid-column-span: 1;
  grid-column: 1 / 2;
}

.about__text p:last-child {
  color: var(--choco);
}
.about__img {
  -ms-grid-row: 1;
  -ms-grid-row-span: 2;
  grid-row: 1 / 3;
  -ms-grid-column: 2;
  -ms-grid-column-span: 1;
  grid-column: 2 / 3;
}

#about__islamic-star {
  height: 65rem;
  width: auto;
  opacity: 0.1;

  position: relative;
  left: -15rem;
}

/* Testimonials */

#testimonials {
}

.testimonials__container {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 5rem 1fr 5rem 1fr;
  grid-template-columns: repeat(3, 1fr);
  -webkit-column-gap: 5rem;
  -moz-column-gap: 5rem;
  column-gap: 5rem;
}

.testimonial__text {
  line-height: 2.2rem;
  font-family: "Raleway", sans-serif;
  color: var(--text-color);
  font-size: 1.6rem;
  padding: 0 0 2rem 0;
}

.testimonial {
  padding: 4rem;
  height: 25rem;
  position: relative;
  background-color: var(--choco-light-2);
  -webkit-box-shadow: 0 2rem 5rem var(--choco-light-2);
  box-shadow: 0 2rem 5rem var(--choco-light-2);

  display: -ms-grid;

  display: grid;
  -ms-flex-line-pack: justify;
  align-content: space-between;
}
.testimonial__author {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: -webkit-max-content 2rem -webkit-max-content;
  -ms-grid-columns: max-content 2rem max-content;
  grid-template-columns: -webkit-max-content -webkit-max-content;
  grid-template-columns: max-content max-content;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-column-gap: 2rem;
  -moz-column-gap: 2rem;
  column-gap: 2rem;
}

.testimonial__author-img {
  height: 3.5rem;
  width: auto;
}

.testimonial__author-name {
  font-family: "Raleway", sans-serif;
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--text-color);
}

.testimonial::before {
  content: "\201C";
  position: absolute;
  top: -2.75rem;
  left: -1rem;
  line-height: 0.82;
  font-size: 20rem;
  color: var(--choco-light-2);
  font-family: sans-serif;
  z-index: 1;
}

/* Services */

#services {
  background-color: var(--choco-light-1);
}
.services__container {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 5rem 1fr 5rem 1fr;
  grid-template-columns: repeat(3, 1fr);
  -webkit-column-gap: 5rem;
  -moz-column-gap: 5rem;
  column-gap: 5rem;
}

.service {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: -webkit-max-content 2.5rem 1fr;
  -ms-grid-columns: max-content 2.5rem 1fr;
  grid-template-columns: -webkit-max-content 1fr;
  grid-template-columns: max-content 1fr;
  -ms-grid-rows: 6rem 1.5rem -webkit-max-content;
  -ms-grid-rows: 6rem 1.5rem max-content;
  grid-template-rows: 6rem -webkit-max-content;
  grid-template-rows: 6rem max-content;
  row-gap: 1.5rem;
  -webkit-column-gap: 2.5rem;
  -moz-column-gap: 2.5rem;
  column-gap: 2.5rem;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.service > *:nth-child(1) {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
}

.service > *:nth-child(2) {
  -ms-grid-row: 1;
  -ms-grid-column: 3;
}

.service > *:nth-child(3) {
  -ms-grid-row: 3;
  -ms-grid-column: 1;
}

.service > *:nth-child(4) {
  -ms-grid-row: 3;
  -ms-grid-column: 3;
}

.service__icon {
  height: 6rem;
  width: 6rem;
  -ms-grid-column: 1;
  -ms-grid-column-span: 1;
  grid-column: 1 /2;
}

.service__name {
  -ms-grid-column: 2;
  -ms-grid-column-span: 1;
  grid-column: 2 / 3;
  font-size: 1.6rem;
  font-weight: 600;
}

.service__description {
  -ms-grid-column: 2;
  -ms-grid-column-span: 1;
  grid-column: 2/3;
  -ms-grid-row: 2;
  -ms-grid-row-span: 1;
  grid-row: 2 /3;
}

/* Contact Us */
#contact {
  background-color: var(--choco-light-1);
}
.contact__container {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 5rem 1fr;
  grid-template-columns: 1fr 1fr;
  -webkit-column-gap: 5rem;
  -moz-column-gap: 5rem;
  column-gap: 5rem;
}

.contact__maps {
  -ms-grid-column: 1;
  -ms-grid-column-span: 1;
  grid-column: 1/2;
  -ms-grid-row: 1;
  -ms-grid-row-span: 1;
  grid-row: 1/2;
  z-index: 1;
}

.contact__details {
  -ms-grid-column: 2;
  -ms-grid-column-span: 1;
  grid-column: 2 / 3;
  padding: 4rem;

  display: -ms-grid;

  display: grid;
  -ms-grid-rows: -webkit-max-content 2rem -webkit-max-content 2rem -webkit-max-content;
  -ms-grid-rows: max-content 2rem max-content 2rem max-content;
  grid-template-rows: repeat(3, -webkit-max-content);
  grid-template-rows: repeat(3, max-content);
  row-gap: 2rem;
  -ms-flex-line-pack: center;
  align-content: center;
}

.contact__detail {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: -webkit-max-content 1rem 1fr;
  -ms-grid-columns: max-content 1rem 1fr;
  grid-template-columns: -webkit-max-content 1fr;
  grid-template-columns: max-content 1fr;
  -webkit-column-gap: 1rem;
  -moz-column-gap: 1rem;
  column-gap: 1rem;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.contact__icon {
  height: 3.5rem;
}

.contact__icon.zelle {
  border-radius: 0.5rem;
}

.contact__address {
  font-size: 1.6rem;
}

.contact__number,
.contact__email,
.contact__facebook {
  font-size: 1.6rem;
  color: var(--text-color);
}

.contact__detail a:hover {
  color: #dda15e;
}

/* Footer */
.footer {
  padding: 4rem 0;
  background-color: rgba(0, 0, 0, 0.9);

  color: var(--blue-light);
  font-size: 1.6rem;
}

.footer a {
  color: var(--blue-light);
  font-size: 1.6rem;
}

.footer .container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}