/* ========== Colors ========== */
:root {
  --color-white: #FFFFFF;
  --color-grey: #B3B3B3;
  --color-accent-light: #36A9E1;
  --color-accent-dark: #2D2E83;
}

/* ========== Fonts ========== */
@font-face {
  font-family: "DinNextLt";
  src: url("../fonts/din-next-lt-w23-regular.ttf");
  font-weight: 300;
}
@font-face {
  font-family: "DinNextLt";
  src: url("../fonts/din-next-lt-w23-medium.ttf");
  font-weight: 500;
}
@font-face {
  font-family: "DinNextLt";
  src: url("../fonts/din-next-lt-w23-heavy.ttf");
  font-weight: 900;
}
/* ========== Initialize setup ========== */
*,
*::after,
*::before {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "DinNextLt", Helvetica, sans-serif, serif, arial;
  font-weight: 300;
  transition: all 0.35s linear;
}

html {
  font-size: 40%;
  direction: rtl;
  scroll-behavior: smooth;
}
@media (min-width: 48.8em) {
  html {
    font-size: 50%;
  }
}
@media (min-width: 64em) {
  html {
    font-size: 62.5%;
  }
}

body {
  font-size: 1.8rem;
  color: var(--color-accent-dark);
  background-color: var(--color-white);
  font-family: "DinNextLt", Helvetica, sans-serif, serif, arial;
  font-weight: 300;
  position: relative;
  overflow-x: hidden;
  line-height: 1.75;
}
body.active {
  overflow: hidden;
}

::-webkit-scrollbar {
  width: 1.4rem;
  height: 1.4rem;
}

::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);
}

::-webkit-scrollbar-thumb {
  background-color: #BBB;
  outline: 1px solid #BBB;
}

:focus {
  outline: 1px solid var(--color-accent-light);
}

a {
  text-decoration: none;
}

figure,
p {
  margin: 0;
}

p {
  color: var(--color-accent-dark);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 900;
  margin: 0;
}

ul,
ol {
  padding: 0;
  margin: 0;
  list-style: none;
}

button {
  cursor: pointer;
}

fieldset {
  border: none;
}

/* ========== General Classes ========== */
.container {
  padding: 0 3rem;
  max-width: 100%;
  width: 100%;
  margin: 0 auto;
}
@media (min-width: 48.8em) {
  .container {
    max-width: 110rem;
  }
}
@media (min-width: 64em) {
  .container {
    max-width: 137rem;
  }
}

.dir-ltr {
  direction: ltr;
}

.dir-rtl {
  direction: rtl;
}

.is-accent {
  color: var(--color-accent-light);
}

.is-white {
  color: var(--color-white);
}

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

.bg-dark {
  background-color: var(--color-accent-dark);
}

.font-heavy {
  font-weight: 900;
}

.fRegular {
  font-weight: 300;
}

.f14 {
  font-size: 1.4rem;
}

.text-center {
  text-align: center;
}

/* ========== General styles ========== */
.relative {
  position: relative;
  z-index: 0;
}

.section {
  padding: 17rem 0;
}

.section-title {
  font-size: 4rem;
}

.img-wrapper {
  position: relative;
}
.img-wrapper::before {
  content: "";
  display: block;
  padding-top: 67%;
}
.img-wrapper .img {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.img-wrapper .img img {
  display: block;
  width: 100%;
  min-height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.accent-title {
  font-size: 3rem;
  font-weight: 900;
  color: var(--color-accent-light);
}

/* ========== form styles ========== */
.form-group {
  display: flex;
  align-items: center;
  margin-bottom: 2rem;
}
.form-group:last-child {
  margin-bottom: 0;
}
.form-group label {
  font-size: 2rem;
  width: 10rem;
  -webkit-margin-end: 3rem;
          margin-inline-end: 3rem;
}
.form-control {
  flex-grow: 1;
  font-size: 1.8rem;
  height: 4.5rem;
  padding: 0.5rem 2rem;
  border: 1px solid var(--color-accent-dark);
}

/* ========== FlexBox Classes ========== */
.flex {
  display: flex;
}
.flex-column {
  flex-direction: column;
}
.flex-col-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.flex-wrap {
  flex-wrap: wrap;
}
.flex-shrink-0 {
  flex-shrink: 0;
}

.items-baseline {
  align-items: baseline;
}
.items-center {
  align-items: center;
}
.items-end {
  align-items: end;
}

.justify-center {
  justify-content: center;
}
.justify-between {
  justify-content: space-between;
}
.justify-even {
  justify-content: space-evenly;
}

/* ========== Style SVG ========== */
.svg-resize-55 {
  width: 5.5rem;
  height: 5.5rem;
}
.svg-resize-60 {
  width: 6rem;
  height: 6rem;
}
.svg-resize-75 {
  width: 7.5rem;
  height: 7.5rem;
}
.svg-resize-80 {
  width: 8rem;
  height: 8rem;
}

.accent-btn {
  font-size: 2rem;
  font-weight: 500;
  text-align: center;
  min-width: 12rem;
  height: 3.7rem;
  color: var(--color-white);
  background-color: var(--color-accent-dark);
  border-radius: 0.7rem;
  padding-top: 0.3rem;
  position: relative;
  z-index: 0;
}
@media (min-width: 37.5em) {
  .accent-btn {
    min-width: 17rem;
  }
}
.accent-btn::after {
  position: absolute;
  z-index: -1;
  content: "";
  inset: 0;
  height: 100%;
  width: 0%;
  background-color: var(--color-white);
  border-radius: 0.7rem;
  transition: all 0.5s ease-out;
}
.accent-btn.active, .accent-btn:hover, .accent-btn:focus {
  border-color: var(--color-white);
  color: var(--color-accent-dark);
}
.accent-btn.active::after, .accent-btn:hover::after, .accent-btn:focus::after {
  width: 100%;
}

.social-btn {
  width: 5.5rem;
  height: 5.5rem;
  border-radius: 100%;
  -webkit-margin-end: 1.4rem;
          margin-inline-end: 1.4rem;
  transition-duration: 0.75s;
}
.social-btn:last-child {
  -webkit-margin-end: 0;
          margin-inline-end: 0;
}
.social-btn:hover, .social-btn:focus {
  cursor: pointer;
  transform: rotate(360deg);
}

header {
  background-color: var(--color-white);
}

.navbar {
  height: 24.4rem;
  background-color: var(--color-accent-light);
  border-bottom-left-radius: 5.4rem;
  border-bottom-right-radius: 5.4rem;
}
.navbar .container {
  height: 100%;
  display: grid;
}
@media (min-width: 37.5em) {
  .navbar {
    padding: 0 3.5rem;
  }
}
.navbar.fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1030;
  height: auto;
  padding: 2rem 0;
  border-radius: 0;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.07);
}
.navbar.fixed .navbar-container {
  margin-bottom: 0;
}
.navbar.fixed .logo .svg {
  margin-bottom: 0;
  width: 15rem;
  height: 5rem;
}
.navbar-container {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  justify-content: center;
  align-self: end;
  margin-bottom: 6rem;
}
@media (min-width: 37.5em) {
  .navbar-container {
    flex-direction: row;
    justify-content: space-between;
  }
}
.navbar-nav .nav-link {
  -webkit-margin-end: 1.2rem;
          margin-inline-end: 1.2rem;
}
.navbar-nav .nav-link:last-child {
  -webkit-margin-end: 0;
          margin-inline-end: 0;
}
.navbar .logo .svg {
  width: 21rem;
  height: 8.7rem;
  margin-bottom: 2rem;
}
.navbar .logo:hover, .navbar .logo:focus {
  transform: scale(1.05);
}

.header {
  height: 64rem;
  text-align: center;
  margin: 0 10rem;
  display: grid;
  place-items: center;
}
.header .main-logo {
  width: 100%;
  max-width: 63rem;
  height: 26rem;
  -o-object-fit: contain;
     object-fit: contain;
}

#about {
  color: var(--color-white);
  background: center/cover var(--color-accent-dark) url("../img/watermark.svg");
}
#about .about {
  position: relative;
  z-index: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
@media (min-width: 37.5em) {
  #about .about {
    flex-direction: row;
    align-items: baseline;
  }
}
#about .about::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 53%;
  transform: translateY(-50%);
  height: 1px;
  width: 60%;
  margin: 0 auto;
  background-color: var(--color-white);
  transition: all 0s;
}
@media (min-width: 37.5em) {
  #about .about::after {
    height: 100%;
    width: 1px;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
  }
}
#about .about-item {
  max-width: 40rem;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
#about .about-item__icon-container {
  width: 13.8rem;
  height: 13.8rem;
  border-radius: 2.8rem;
  background-color: var(--color-white);
  display: grid;
  place-items: center;
}
#about .about-item__title {
  line-height: 10rem;
  font-size: 4rem;
  font-weight: 900;
  color: var(--color-accent-light);
}
#about .about-item__text {
  color: var(--color-white);
  text-align: center;
  font-size: 3rem;
}
#about .about-item:first-child {
  padding-bottom: 10rem;
  margin-bottom: 10rem;
}
@media (min-width: 37.5em) {
  #about .about-item:first-child {
    margin-bottom: 0;
    padding-bottom: 0;
    -webkit-margin-end: 20rem;
            margin-inline-end: 20rem;
  }
}
#about .about-item:hover, #about .about-item:focus {
  cursor: pointer;
  transform: translateY(-2rem);
}
#about .about-item:hover .about-item__icon-container, #about .about-item:focus .about-item__icon-container {
  box-shadow: 0 0 2rem rgba(0, 0, 0, 0.5);
}

#services .section-title {
  margin-bottom: 5rem;
}
#services .services-wrapper {
  display: grid;
  grid-gap: 5rem;
  grid-template-columns: repeat(2, minmax(14rem, 1fr));
}
@media (min-width: 37.5em) {
  #services .services-wrapper {
    grid-template-columns: repeat(3, minmax(14rem, 1fr));
  }
}
#services .services-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 3rem;
  border-radius: 2.8rem;
}
#services .services-item:hover, #services .services-item:focus {
  cursor: pointer;
  background: no-repeat -3rem 10rem/20rem rgba(179, 179, 179, 0.07) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='113.27' height='81.194' viewBox='0 0 113.27 81.194'%3E%3Cpath id='Path_169' data-name='Path 169' d='M310.762,5710.183a17.323,17.323,0,0,1,6.345-6.345,17.538,17.538,0,0,1,8.686-2.342,17.4,17.4,0,0,1,16.776,12.882l12.446,46.448a17.367,17.367,0,0,1-33.553,8.982l-1.6-5.965-5.854,10.14h0l-.069.115a17.34,17.34,0,0,1-6.274,6.251l-.007-.01-.014.01a17.2,17.2,0,0,1-17,.188c-.122-.057-.24-.12-.358-.188a17.364,17.364,0,0,1-6.138-6.018c-2.65-4.592.734-4.076,2.658-2.62a12.247,12.247,0,0,0,18.145-2.931l11.977-20.747a5.237,5.237,0,0,1,9.785.909l4.866,18.162a6.889,6.889,0,0,0,13.541-1.787,7.4,7.4,0,0,0-.042-.906,7.125,7.125,0,0,0-.188-.882l-12.444-46.446a6.859,6.859,0,0,0-6.657-5.1,6.929,6.929,0,0,0-3.244.788,7.092,7.092,0,0,0-2.732,2.654l-17.835,30.893c-14.85,25.72-18.4-3.525-25.489,23.488a17.353,17.353,0,0,1-33.985-6.749,17.66,17.66,0,0,1,.432-2.233l12.446-46.448a17.375,17.375,0,0,1,31.808-4.195l7.84,13.581c-2.343,4.06-5.292,11.745-8.739,5.791-1.993-3.452-7.776-14.977-10.691-16.662a6.723,6.723,0,0,0-3.441-.908,6.859,6.859,0,0,0-6.657,5.1l-12.445,46.446a7.508,7.508,0,0,0-.188.882,7.607,7.607,0,0,0-.042.906,6.887,6.887,0,0,0,13.541,1.787l3.639-13.583c4.375-16.328,14.841,1.542,23.233-12.994Z' transform='translate(-242.343 -5701.496)' fill='%23fff' opacity='0.45' style='mix-blend-mode: overlay;isolation: isolate'/%3E%3C/svg%3E%0A");
  transform: translateY(-2rem);
}
#services .services-item:hover .services-item__title, #services .services-item:focus .services-item__title {
  font-weight: 500;
}
#services .services-item__icon-container {
  width: 13.8rem;
  height: 13.8rem;
  border-radius: 2.8rem;
  background-color: var(--color-accent-dark);
  display: grid;
  place-items: center;
}
#services .services-item__title {
  font-size: 3rem;
  font-weight: 300;
  max-width: 26rem;
  width: 100%;
  margin: auto;
  margin-top: 2.7rem;
  color: var(--color-accent-dark);
}

footer .section {
  padding: 0;
}

.footer {
  padding: 10rem 0;
  background-color: var(--color-accent-light);
}

.contact {
  position: relative;
  z-index: 0;
  padding: 10rem 0;
  background-color: var(--color-grey);
}
.contact-subtitle {
  color: var(--color-white);
  font-size: 3rem;
}
.contact-figure {
  position: absolute;
  top: -5rem;
  left: 50%;
  transform: translateX(-50%);
  display: grid;
  place-items: center;
  width: 11rem;
  height: 11rem;
  border-radius: 100%;
  border: 0.8rem solid var(--color-white);
  background-color: var(--color-accent-dark);
}
.contact-wrapper {
  display: grid;
  grid-gap: 7rem;
}
@media (min-width: 37.5em) {
  .contact-wrapper {
    grid-template-columns: repeat(2, minmax(14rem, 1fr));
  }
}
@media (min-width: 1400px) {
  .contact-wrapper {
    grid-gap: 3rem;
    grid-template-columns: repeat(4, minmax(14rem, 1fr));
  }
}
.contact-item {
  min-height: 16rem;
  border-radius: 1.8rem;
  background-color: var(--color-white);
}
.contact-item:hover, .contact-item:focus {
  transform: translateX(-1px) translateY(-1px);
  box-shadow: 0 0 1.5rem rgba(0, 0, 0, 0.25);
}
.contact-item__title {
  transform: translateY(-2.5rem);
  height: 5rem;
  border-radius: 0.8rem;
  background-color: var(--color-accent-dark);
  width: 80%;
  margin: 0 auto;
  text-align: center;
  color: var(--color-white);
  font-size: 3rem;
  padding-top: 0.25rem;
}
.contact-item__body {
  padding: 0 1.8rem;
  text-align: center;
  font-size: 2.8rem;
  display: grid;
  place-items: center;
}

.copyrights {
  background-color: var(--color-white);
  padding: 6rem 0;
}
.copyrights-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.copyrights-content p {
  color: var(--color-accent-dark);
  font-size: 2.1rem;
}
.copyrights .accent-btn {
  border: 1px solid var(--color-accent-dark);
}