:root {
  --hebrew-text-direction: rtl;

  --none: 0;
  --max-precent: 100%;

  --full-width: 100vw;
  --full-height: 100vh;

  --hero-image-height: 90vh;

  --about-section-padding: 6% 9%;

  --container-margin: 0 auto;

  /* --body-background-color: #f6f6e9; */
  --body-background-color: aliceblue;
  --navbar-background-color: #1b252f;
  --our-services-background-color: #393E46;
  --footer-background-color: #28323b;
  --our-services-background-color: #1b252f;

  --font-size-base: 100%;
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-semibold: 500;
  --font-weight-bold: 700;
  --font-weight-base: var(--ifm-font-weight-normal);
  --line-height-base: 1.65;

  --primary-color: #f8f812;
  --main-color: white;
  --secondary-color: #ffba34;
  --p-contact-color: aquamarine;
  --about-header-color: #1c244b;
  --about-p-color: #324a6d;
  --our-services-header-color: #fbfbfb;
  --our-services-p-color: #cfcfcf;

  --body-font-family: 'Roboto', sans-serif;
  --about-header-font-family: 'Open Sans Hebrew', sans-serif;
  --about-p-font-family: "Noto Sans Hebrew", Sans-serif;
  --our-services-font-family: 'Noto Sans Hebrew', sans-serif;

  --contact-font-size-xs: 10px;
  --contact-font-size-s: 12px;
  --contact-font-size-m: 16px;
  --contact-font-size-l: 18px;
  --contact-font-size-xl: 20px;

  --contact-padding-top: 10px;

  --navbar-header-font-size-xs: 26px;
  --navbar-header-font-size-s: 30px;
  --navbar-header-font-size-m: 34px;
  --navbar-header-font-size-l: 38px;
  --navbar-header-font-size-xl: 42px;

  --navbar-paragraph-font-size-xs: 18px;
  --navbar-paragraph-font-size-s: 22px;
  --navbar-paragraph-font-size-m: 26px;
  --navbar-paragraph-font-size-l: 30px;
  --navbar-paragraph-font-size-xl: 34px;

  --our-services-header-font-size-xs: 30px;
  --our-services-header-font-size-s: 32px;
  --our-services-header-font-size-m: 44px;
  --our-services-header-font-size-l-xl: 65px;

  --about-header-font-size-xs: 35px;
  --about-header-font-size-s: 45px;
  --about-header-font-size-m: 55px;
  --about-header-font-size-l-xl: 65px;

  --about-p-font-size-xs: 14px;
  --about-p-font-size-s: 16px;
  --about-p-font-size-m: 18px;
  --about-p-font-size-l-xl: 16px;

  --section-subheader-font-size-xs: 16px;
  --section-subheader-font-size-s: 18px;
  --section-subheader-font-size-m: 20px;
  --section-subheader-font-size-l-xl: 22px;
}

body {
  margin: var(--none);
  padding: var(--none);
  font-family: var(--body-font-family);
  width: var(--full-width);
  height: var(--full-height);
  background-color: var(--body-background-color);
}

.navbar {
  background-color: var(--navbar-background-color);
  padding: var(--none);
}

.navbar a {
  pointer-events: none;
}

.container {
  margin: var(--container-margin);
}

.hero-image {
  width: var(---max-precent);
  height: var(--hero-image-height);
  background-image: var(--background-url);
  background-size: cover;
  background-position: center;
  object-fit: cover;
  object-position: 50% 50%;
}

.collage-img {
  background-image: var(--collage-url);
  background-size: cover;
  background-position: center;
  /* margin: 10px 0; */
}

/******************************************************************************************************************************************
  * about section
*******************************************************************************************************************************************/
.about-section {
  padding: var(--about-section-padding);
  /* background-color: var(--about-background-color); */
}

.about-header {
  direction: var(--hebrew-text-direction);
  color: var(--about-header-color);
  font-family: var(--about-header-font-family);
  font-weight: 600;
  text-transform: capitalize;
  font-style: normal;
  text-decoration: none;
  line-height: 1.2em;
  letter-spacing: 0px;
}

.about-p {
  direction: var(--hebrew-text-direction);
  color: var(--about-p-color);
  font-family: var(--about-p-font-family);
  font-weight: 500;
  text-transform: none;
  font-style: normal;
  text-decoration: none;
  line-height: 1.5em;
  letter-spacing: 0px;
}

.about-img {
  height: 382px;
  object-fit: cover;
  object-position: center center;
}

/******************************************************************************************************************************************
  * our services section
*******************************************************************************************************************************************/
.our-services-section {
  direction: var(--hebrew-text-direction);
  display: flex;
  justify-content: space-between;
  background-color: var(--our-services-background-color);
  background-color: var(--our-services-background-color);
  padding: 5% 0;
}

.our-services-section-header {
  padding: 10px;
}

.our-services-section .row {
  display: flex;
  flex-wrap: wrap;
  margin-left: var(--none);
  margin-right: var(--none);
}

.our-services-section .col {
  flex: 0 0 var(--max-precent);
  max-width: var(---max-precent);
}

.our-services-section .header {
  line-height: 1em;
  letter-spacing: 0px;
  word-spacing: 0em;
  color: var(--our-services-header-color);
  font-family: var(--our-services-font-family);
  font-weight: 800;
  text-transform: uppercase;
  font-style: normal;
  text-decoration: none;
  line-height: 1em;
  letter-spacing: 0px;
  word-spacing: 0em;
}

.our-services-section .subheader {
  color: var(--primary-color);
  font-family: var(--our-services-font-family);
  font-weight: 400;
  text-transform: none;
  font-style: normal;
  text-decoration: none;
  line-height: 26px;
  letter-spacing: 0px;
  word-spacing: 0em;
}

.our-services-section .card {
  background-color: var(--our-services-background-color);
  padding: 0px;
  border: var(--primary-color);
  border-radius: var(--none);
  border-width: 3px;
  border-style: solid;
  flex-basis: auto;
  flex-grow: 1;
  flex-shrink: 1;
  align-self: auto;
  text-align: center;
  justify-content: flex-start;
  text-align: right;

}

.our-services-section .card h3 {
  color: var(--primary-color);
  font-family: var(--our-services-font-family);
  font-size: 34px;
  font-weight: 800;
  text-transform: uppercase;
  font-style: normal;
  text-decoration: none;
  line-height: 1.2em;
  letter-spacing: 1px;
  word-spacing: 0em;
  padding: 0 5%;
  margin: 32px 0 0;
}

.our-services-section .card p {
  color: var(--our-services-p-color);
  font-size: 18px;
  font-weight: 400;
  text-transform: none;
  font-style: normal;
  text-decoration: none;
  line-height: 1.5em;
  letter-spacing: 0px;
  word-spacing: 0em;
  margin: 9% 5% 5%;
}

.our-services-section .call-logo,
.our-services-section .whatsapp-logo,
.our-services-section .sms-logo,
.our-services-section .mail-logo {
  display: flex;
  justify-content: center;
  align-items: center;
}

.our-services-section .call-logo:hover,
.our-services-section .whatsapp-logo:hover,
.our-services-section .sms-logo:hover,
.our-services-section .mail-logo:hover {
  background-color: var(--our-services-background-color);
}

.our-services-section .card-contact .row {
  border-top: var(--primary-color) 1px solid;
}

.our-services-section .col-3 {
  /* border: var(--our-services-background-color) 1px solid; */
}

.card-contact {
  display: inline-block;
  line-height: 3;
  background-color: var(--primary-color);
  transition: all .3s;
  width: var(---max-precent)
}

.our-services-section .animation p {
  flex: 1 1 auto;
}

.col-margin {
  margin-top: 10px;
}


/******************************************************************************************************************************************
  * footer
*******************************************************************************************************************************************/
footer {
  direction: var(--hebrew-text-direction);
  text-align: center;
  background-color: var(--footer-background-color);
  color: var(--main-color);
  padding: 1rem 0;
}

footer .col {
  border: 1px solid var(--secondary-color);
  width: 25vw;
}

footer p {
  display: inline-block;
  margin: var(--none);
  vertical-align: middle;
}

footer .imgLogo {
  display: inline-block;
  max-width: var(---max-precent);
  height: 10vh;
  vertical-align: middle;
}

footer .col {
  flex-basis: 0 !important;
}

.contact {
  display: flex;
  justify-content: center;
  text-align: center;
  padding-top: var(--contact-padding-top);
  text-wrap: nowrap;
}

.contact a {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
}

.contact-text {
  color: var(--p-contact-color);
  font-size: var(--contact-font-size-xl);
  padding-top: var(--contact-padding-top);

}

.contact>a:hover {
  .contact-text {
    color: var(--secondary-color);
  }
}

.sep-line {
  width: 1px;
  padding: var(--none);
  margin: 5px;
  background-color: var(--secondary-color);
}

/******************************************************************************************************************************************
  * media queries
*******************************************************************************************************************************************/
@media only screen and (orientation: portrait) {}

@media only screen and (orientation: landscape) {}

@media only screen and (max-width: 600px) {
  .contact-text {
    font-size: var(--contact-font-size-xs);
  }

  .about-header {
    text-align: center;
    font-size: var(--about-header-font-size-xs);

  }

  .about-p {
    text-align: center;
    font-size: var(--about-p-font-size-xs);
  }

  h1 {
    font-size: var(--navbar-header-font-size-xs);
  }

  .card-text {
    font-size: var(--navbar-paragraph-font-size-xs);
  }

  i {
    display: none;
  }

  .our-services-section .header {
    font-size: var(--our-services-header-font-size-xs);
  }

  .our-services-section .subheader {
    font-size: var(--section-subheader-font-size-xs);
  }

  .our-services-section .col {
    flex: 0 0 var(--max-precent);
    max-width: var(---max-precent);
  }
}

@media only screen and (min-width: 600px) and (max-width: 768px) {
  .contact-text {
    font-size: var(--contact-font-size-s);
  }

  .about-header {
    text-align: center;
    font-size: var(--about-header-font-size-s);

  }

  .about-p {
    text-align: center;
    font-size: var(--about-p-font-size-s);
  }

  h1 {
    font-size: var(--navbar-header-font-size-s);
  }

  .our-services-section .header {
    font-size: var(--our-services-header-font-size-s);
  }

  .our-services-section .subheader {
    font-size: var(--section-subheader-font-size-s);
  }

  .our-services-section .col {
    flex: 0 0 var(--max-precent);
    max-width: var(---max-precent);
  }

  .card-text {
    font-size: var(--our-services-header-font-size-s);
  }

}

@media only screen and (min-width: 768px) and (max-width: 992px) {
  .contact-text {
    font-size: var(--contact-font-size-m);
  }

  .about-header {
    font-size: var(--about-header-font-size-m);

  }

  .about-p {
    font-size: var(--about-p-font-size-m);
  }

  h1 {
    font-size: var(--navbar-header-font-size-m);
  }

  .our-services-section .header {
    font-size: var(--our-services-header-font-size-m);
  }

  .our-services-section .subheader {
    font-size: var(--section-subheader-font-size-m);
  }

  .our-services-section .col {
    flex: 0 0 50%;
    max-width: 50%;
  }

  .card-text {
    font-size: var(--our-services-header-font-size-m);
  }

  .about-img {
    width: 100%;
    height: 100%;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .contact-text {
    font-size: var(--contact-font-size-l);
  }

  h1 {
    font-size: var(--navbar-header-font-size-l);
  }

  .card-text {
    font-size: var(--navbar-paragraph-font-size-l);
  }

  .about-header {
    font-size: var(--about-header-font-size-l-xl);

  }

  .about-p {
    font-size: var(--about-p-font-size-l-xl);
  }

  .our-services-section .header {
    font-size: var(--our-services-header-font-size-l-xl);
  }

  .our-services-section .subheader {
    font-size: var(--section-subheader-font-size-l-xl);
  }

  .our-services-section .col {
    flex: 0 0 50%;
    max-width: 50%;
  }
}

@media only screen and (min-width: 1200px) {
  .contact-text {
    font-size: var(--contact-font-size-xl);
  }

  h1 {
    font-size: var(--navbar-header-font-size-xl);
  }

  .card-text {
    font-size: var(--navbar-paragraph-font-size-xl);
  }

  .about-header {
    font-size: var(--about-header-font-size-l-xl);

  }

  .about-p {
    font-size: var(--about-p-font-size-l-xl);
  }

  .our-services-section .header {
    font-size: var(--our-services-header-font-size-l-xl);
  }

  .our-services-section .subheader {
    font-size: var(--section-subheader-font-size-l-xl);
  }

  .our-services-section .col {
    flex: 0 0 25%;
    max-width: 25%;
  }

  .about-img {
    width: 100%;
    /* height: 100%; */
  }
}

/* @media (max-width: 1024px) {
  .about-img {
    width: 100%;
    height: 360px;
  }
} */

/******************************************************************************************************************************************
  * animation classes
*******************************************************************************************************************************************/
.animation {
  animation-duration: 2s;
}

.slideInUp {
  animation-name: slideInUp;
}

.fadeInUp {
  animation-name: fadeInUp;
}

.fadeIn {
  animation-name: fadeIn;
}

@keyframes slideInUp {
  0% {
    transform: translate3d(0, var(--max-precent), 0);
    visibility: visible;
  }

  100% {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translate3d(0, var(--max-precent), 0);
  }

  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}