@charset "UTF-8";
:root {
  --dark-grey: #222;
  --primary: #be0000;
  --dark: #212529;

  /* Bootstrap */
  --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

/* Bootstrap ******************************************************* */
*, ::after, ::before {
	box-sizing: border-box;
}

@media (prefers-reduced-motion: no-preference) {
  :root {
    scroll-behavior: smooth;
  }
}

body {
	font-family: var(--bs-font-sans-serif);
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	color: var(--dark);
	-webkit-text-size-adjust: 100%;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {/* Bootstrap */
	margin-top: 0;
	margin-bottom: .5rem;
	font-weight: 500;
	line-height: 1.2;
}
h1, .h1 { font-size: calc(1.375rem + 1.5vw); }
h2, .h2 { font-size: calc(1.325rem + 0.9vw); }
h3, .h3 { font-size: calc(1.3rem + 0.6vw);   }
h4, .h4 { font-size: calc(1.275rem + 0.3vw); }
h5, .h5 { font-size: 1.25rem; }
h6, .h6 { font-size: 1rem;    }

@media (min-width: 1200px) {
  h1, .h1 { font-size: 2.5rem;  }
  h2, .h2 { font-size: 2rem;    }
  h3, .h3 { font-size: 1.75rem; }
  h4, .h4 { font-size: 1.5rem;  }
}

p {
	margin-top: 0;
	margin-bottom: 1rem;
}

ol, ul { padding-left: 2rem; }

ol, ul, dl {
  margin-top: 0;
  margin-bottom: 1rem;
}

ol ol, ul ul, ol ul, ul ol {
  margin-bottom: 0;
}

a {
	color: var(--primary);
	text-decoration: underline;
}
/* a:hover {
  color: #0a58ca;
} */

img, svg {
	vertical-align: middle;
}

button { border-radius: 0; }

button:focus {
  outline: dotted 1px;
  outline: -webkit-focus-ring-color auto 5px;
}

input, button, select, optgroup, textarea {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}
button, select {
	text-transform: none;
}

[type="button"]:not(:disabled), [type="reset"]:not(:disabled), [type="submit"]:not(:disabled), button:not(:disabled) {
	cursor: pointer;
}
[role=button] {
  cursor: pointer;
}

.lead {
	font-size: 1.25rem;
	font-weight: 300;
}

.list-unstyled {
  padding-left: 0;
  list-style: none;
}

.dropdown {
  position: relative;
  display: table;
}

.dropdown-menu {
  position: absolute;
  /* top: 100%; */
  /* left: 0; */
  z-index: 1000;
  display: none;
  min-width: 10rem;
  padding: 0.5rem 0;
  margin: 0.125rem 0 0;
  font-size: 1rem;
  color: var(--dark);
  text-align: left;
  list-style: none;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 0.25rem;
}
/* .dropdown-menu2[style] {
  right: auto !important;
} */

.dropdown-menu.show { display: block; }

.dropdown-menu-dark {
  color: #dee2e6;
  background-color: #3b3b3b;
  border-color: rgba(0, 0, 0, 0.15);
}
.dropdown-menu-dark .dropdown-item {
  color: #dee2e6;
}
.dropdown-menu-dark .dropdown-item:hover, .dropdown-menu-dark .dropdown-item:focus {
  color: #fff;
  background-color: rgba(255, 255, 255, 0.15);
}
.dropdown-menu-dark .dropdown-item.active, .dropdown-menu-dark .dropdown-item:active {
  color: #fff;
  background-color: var(--primary);
}

.dropdown-menu-dark .dropdown-item.disabled, .dropdown-menu-dark .dropdown-item:disabled {
  color: #adb5bd;
}
.dropdown-menu-dark .dropdown-divider {
  border-color: rgba(0, 0, 0, 0.15);
}
.dropdown-menu-dark .dropdown-item-text {
  color: #dee2e6;
}
.dropdown-menu-dark .dropdown-header {
  color: #adb5bd;
}

.dropdown-item {
  display: block;
  width: 100%;
  padding: 0.25rem 1rem;
  clear: both;
  font-weight: 400;
  color: var(--dark);
  text-align: inherit;
  text-decoration: none;
  white-space: nowrap;
  background-color: transparent;
  border: 0;
}
.dropdown-item:hover, .dropdown-item:focus {
  color: #1e2125;
  background-color: #f8f9fa;
}
.dropdown-item.active, .dropdown-item:active {
  color: #fff;
  text-decoration: none;
  background-color: var(--primary);
  /* background-color: #0d6efd; */
}
.dropdown-item.disabled, .dropdown-item:disabled {
  color: #6c757d;
  pointer-events: none;
  background-color: transparent;
}

.container, .container-fluid, .container-xxl, .container-xl, .container-lg, .container-md, .container-sm {
  width: 100%;
  padding-right: var(--bs-gutter-x, 0.75rem);
  padding-left: var(--bs-gutter-x, 0.75rem);
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 576px) {
  .container-sm, .container {
    max-width: 540px;
  }
}
@media (min-width: 768px) {
  .container-md, .container-sm, .container {
    max-width: 720px;
  }
}
@media (min-width: 992px) {
  .container-lg, .container-md, .container-sm, .container {
    max-width: 960px;
  }
}
@media (min-width: 1200px) {
  .container-xl, .container-lg, .container-md, .container-sm, .container {
    max-width: 1140px;
  }
}
@media (min-width: 1400px) {
  .container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container {
    max-width: 1320px;
  }
}

.row {
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 0;
  display: flex;
  flex-wrap: wrap;
  margin-top: calc(var(--bs-gutter-y) * -1);
  margin-right: calc(var(--bs-gutter-x) / -2);
  margin-left: calc(var(--bs-gutter-x) / -2);
}
.row > * {
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  padding-right: calc(var(--bs-gutter-x) / 2);
  padding-left: calc(var(--bs-gutter-x) / 2);
  margin-top: var(--bs-gutter-y);
}

.row-cols-1 > * {
  flex: 0 0 auto;
  width: 100%;
}
.col-12 {
  flex: 0 0 auto;
  width: 100%;
}
@media (min-width: 576px) {
  .row-cols-sm-2 > * {
    flex: 0 0 auto;
    width: 50%;
  }

  .col-sm-6 {
    flex: 0 0 auto;
    width: 50%;
  }
}
@media (min-width: 768px) {
  .row-cols-md-2 > * {
    flex: 0 0 auto;
    width: 50%;
  }

  .col-md-3 {
    flex: 0 0 auto;
    width: 25%;
  }
}

.g-3, .gx-3 {
  --bs-gutter-x: 1rem;
}
.g-3, .gy-3 {
	--bs-gutter-y: 1rem;
}

.link-secondary { color: #6c757d; }
.link-secondary:hover, .link-secondary:focus {
  color: #565e64;
}

.d-block {
  display: block !important;
}

.border-top  { border-top: 1px solid #dee2e6 !important; }

.mb-0 { margin-bottom: 0      !important; }
.mb-2 { margin-bottom: 0.5rem !important; }
.mb-3 { margin-bottom: 1rem   !important; }
.mb-4 { margin-bottom: 1.5rem !important; }
.me-4 { margin-right : 1rem   !important; }
.p-2  { padding: .5rem !important; }
.p-5  { padding: 3rem  !important; }
.pt-3 { padding-top   : 1rem   !important; }
.pt-4 { padding-top   : 1.5rem !important; }
.pb-3 { padding-bottom: 1rem   !important; }



.fw-bold { font-weight: 700 !important; }
.text-center { text-align: center !important; }

.bg-light { background-color: #f8f9fa !important; }
.bg-dark  { background-color: var(--dark) !important; }
.rounded { border-radius: .25rem !important; }

.justify-content-center {
	justify-content: center !important;
}

.text-muted {
	color: #6c757d !important;
}

/* Modify Bootstrap ************************************************ */
.btn-primary {
  /* color: #fff; */
  background-color: var(--primary);
  border-color    : var(--primary);
}

.btn-primary:hover {
  color: #fff;
  background-color: #d70b0b;
  border-color    : #ca0a0a;
}

/* End Modify Bootstrap ******************************************** */
/* Extend Bootstrap ************************************************ */
@media screen and (max-width: 960px) {
  p { overflow-wrap: break-word; }
}
/* expand body if not much content  */
.container {
  flex-grow: 1;
}
/* On overflow add ...*/
h5 { 
  text-overflow: ellipsis;
  overflow: hidden;
}
/* End Extend Bootstrap ******************************************** */
body { 
  margin: 0px;
  color: black;
  background-color: white;

  scroll-behavior: smooth;

  display: flex;
  height: 100vh;
  flex-direction: column;
}

a[href^="tel"] {
  color: inherit; /* Inherit text color of parent element. */
  text-decoration: none; /* Remove underline. */
  /* Additional css `propery: value;` pairs here */
}
a[x-apple-data-detectors] {
  color: inherit !important;
  text-decoration: none !important;
  font-size: inherit !important;
  font-family: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
}
/* Target iPadOs, iOS end ****************************************** */


#navBar {
  background-color: var(--dark-grey);
  backdrop-filter: blur(20px);
  position: fixed;
  top: 0;
  width: 100%;

  display: flex;
  /* flex-direction: column-reverse; */

  padding: .5rem;

  z-index: 100;
  box-shadow: 0px 0px 32px #000;

  justify-content: space-between;
}

#logo {

  margin-bottom: 8px;

  display: inline-block;
  box-sizing: content-box;
  animation: shrink 1s linear infinite;
  /* -webkit-animation: shrink 1s linear infinite; */

  animation-play-state: paused;
  animation-delay: calc(var(--scroll) * -1s);      
}

/* Use max-width */
@media screen and (max-width: 600px) {
  @keyframes shrink { 0% { height: 22vw; } }
  #welcome     { font-size: 1.0rem; }
  #description { font-size: 0.8rem; }
}

@keyframes shrink {
  0%   { 
    width: calc(100vw - 16px);
    height: 11vw;
    padding-top: 0px;
  }
  80% {
    height: 24px;
    width : 108px;
    padding-top: 35px;
  }
  100% { 
    height: 24px;
    width : 108px;
    padding-top: 0px;
    margin-bottom: 0px;
  }
}

#welcome {
  text-align: center;
  display: inline-block;
  animation: welcome 1s linear infinite;

  animation-play-state: paused;
  animation-delay: calc(var(--scroll) * -1s);      
}

#description {
  text-align: center;
  /* font-size: 2rem; */
  color: rgba(255,255,255,0.67);

  display: inline-block;
  animation: disappear 1s linear infinite;

  animation-play-state: paused;
  animation-delay: calc(var(--scroll) * -1s);
}

@keyframes welcome {
  0%   { 
    width: calc(100vw - 16px);
    margin-top: 40px;
    opacity: 1;
  }
  30% {
    opacity: 0;
  }
  80% {
    width : 0px;
    font-size: 0rem;
    margin-top: 0px;
    margin: 0;
    opacity: 0;

  }
  100% { 
    width : 0px;
    font-size: 0rem;
    margin: 0px;
  }
}

/* 11vw --> 108px */

@keyframes disappear {
  0%   { 
    width: calc(100vw - 16px);
    opacity: 1;
  }
  30% {
    opacity: 0;
  }
  80% {
    width : 0px;
    font-size: 0rem;
    margin: 0;
    opacity: 0;

  }
  100% { 
    width : 0px;
    font-size: 0rem;
    margin: 0px;
  }
}
/* Menu */

.menu {
  display: flex;
  flex-direction: row;
  margin: 0;
  /* padding-left: var(--bs-gutter-x,.75rem); */
  padding-left: 0;
}


.menu li {
  list-style-type: none;
  list-style: none;
}

.menu a {
  color: white;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  /* line-height: 0; */

  padding: .5rem;
  transition: 0.3s;
}

.menu > li:first-child a {
  width: 150px;
  padding-bottom: 0;
}

img {
  max-width:calc(100vw - 16px);
}

.menu .menu-item:hover { color: var(--primary); }

.space-filler {
  width: 100vw;
  margin-top: calc( 11.5vw + 88px + 46.4px + 8px + 16px + 30px);
} 

.space-filler-collapsed {
  width: 100%;
  min-height: 64px;
} 
.marketing .col-lg-3,
.marketing .col-lg-4,
.marketing .col-lg-5,
.marketing .col-lg-6 {
  margin-bottom: 1.5rem;
  text-align: center;
}

/* footer ********************************************************** */
footer,
footer .link-secondary {
  transition: 0.3s;
  /* color: rgba(255,255,255,0.67); */
  color: rgba(255, 255, 255, 0.80);
  text-decoration: none;
}

/* contact, info */
span.no-copy {
  unicode-bidi: bidi-override;
  direction: rtl;
  white-space: nowrap;
}
span.no-copy.mm:before { content:"ed.hcet" }
span.no-copy.mm:after  { content:""        }
span.no-copy.pp:before { content:"7983"    }
span.no-copy.pp:after  { content:"671 (0) 94+" }


/*  Other? */
.media {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: flex-start;
}

/* icons *********************************************************** */
.icon-xs { font-size: .75em; }
/* icons end ******************************************************* */


/* dropdown ******************************************************** */
.language {
  margin: .4rem .5rem .6rem .5rem;
  padding: 0px;
  transition: 0.3s;
  background-color: transparent;
  /* padding: .5rem; */
  /* background-color: white; */
  /* color: black; */

  border-radius: 50%;
  border: none;
  outline: none;
  transition: 0.3s;
  opacity: calc(1 - var(--scroll));

}

.language:focus,
.language:hover {
  opacity: 1;
	outline: 0;
	box-shadow: 0 0 0 .25rem rgba(253, 13, 13, 0.25);
}

.langauge-a {
  background-color: transparent;
  border: none;
  padding: 0;
  text-decoration: underline;
}

#navBar:hover .language {
  opacity: 1;
}

.language img {
  border-radius: 50%;
}

.service img {
  width: 155px;
  height: 155px;
  padding: 15px;
  background-color: rgba(255, 255, 255, 1);
  border-radius: 150px;
  border: 1px solid rgba(0,0,0,.125);
}

.why-us-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.why-us-container .media {
  width: 75%;
}

.no-wrap {
  white-space: nowrap;
}

.scroll {
  --scroll:0.99999;
}