@import url("https://fonts.googleapis.com/css2?family=Fira+Mono:wght@400;500;700&display=swap");
* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}

html::-webkit-scrollbar, body::-webkit-scrollbar {
  width: 1em;
}
html::-webkit-scrollbar-track, body::-webkit-scrollbar-track {
  background-color: var(--color-dark);
}
html::-webkit-scrollbar-thumb, body::-webkit-scrollbar-thumb {
  background-color: var(--color-light);
}

html {
  --color-dark: rgb(27, 59, 136);
  --color-light: white;
  --color-accent: rgb(255, 0, 0);
  --color-mid-dark: rgb(211, 211, 211);
  --border-width: 0.2rem;
  --margin: 0.8rem;
  --padding: 0.8rem;
  --gap: 0.8rem;
  --radius: 0.5rem;
  font-size: 10px;
  background-color: var(--color-dark);
}
html::-webkit-scrollbar-track {
  background: orange; /* color of the tracking area */
}
html::-webkit-scrollbar-thumb {
  background-color: blue; /* color of the scroll thumb */
  border-radius: 20px; /* roundness of the scroll thumb */
  border: 3px solid orange; /* creates padding around scroll thumb */
}

body {
  font-family: "Fira Mono", monospace;
  font-size: 1.7rem;
}

p {
  margin: 1rem 0px !important;
}

h2 {
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.o-pages-group[data-url="/"] {
  display: flex;
  flex-direction: column;
}
.o-pages-group[data-url="/"] > .body .home-text {
  font-size: xx-large;
}
.o-pages-group[data-url="/"] > .foot {
  margin-top: auto;
  background-color: var(--color-mid-dark);
  min-height: 50rem;
  padding: var(--padding);
}
.o-pages-group[data-url="/"] > .foot > .logo {
  margin: calc(var(--margin) * 5) 0px;
}
.o-pages-group[data-url="/"] > .foot .footer-note {
  padding-top: calc(var(--padding) * 4);
}

.o-page {
  padding-bottom: 3rem;
}
.o-page > .body > .heading {
  display: relative;
}
.o-page > .body > .heading, .o-page > .body > .heading > * {
  height: 32rem;
}
.o-page > .body > .heading > * {
  position: absolute;
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.o-page > .body > .heading > .bg-image {
  background-color: var(--color-dark);
  background-image: url("/assets/web/images/hero_image.jpg");
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
  background-repeat: no-repeat;
}
.o-page > .body > .heading > .text {
  color: white;
  font-size: 4rem;
  font-weight: bolder;
  display: flex;
  justify-items: center;
  align-items: center;
}
.o-page > .body > .heading > .text > .content {
  width: 100%;
  border-bottom: var(--border-width) solid var(--color-light);
  padding-left: var(--padding);
}
.o-page > .body > .content {
  padding: 1rem;
}
.o-page > .body > .content h1 {
  margin: 3rem 0px;
}
.o-page > .body > .content p {
  margin: 0.5rem 0px;
}
.o-page[data-url="/"] > .body > .heading > .bg-image > img, .o-page[data-url="/"] > .body > .heading > .bg-image > video {
  width: 100%;
  height: 32rem;
  object-fit: cover;
}
.o-page[data-url="/about"] > .body .founder-image {
  width: 100%;
  padding: var(--padding);
  margin: var(--margin) 0px;
  background-color: var(--color-mid-dark);
}
.o-page[data-url="/about"] > .body .founder-image > img {
  border-radius: var(--radius);
}
.o-page[data-url="/contacts"] > .body > .content > .contact-details > .item {
  margin: 1rem 0px;
}
.o-pages-group[data-url="/"] {
  background-color: var(--color-light);
  min-height: 100vh;
  position: relative;
}

@media (min-width: 900px) {
  .o-nav.one {
    max-width: 30%;
  }
  .o-pages-group[data-url="/"] {
    position: relative;
    left: 30%;
    max-width: 70%;
  }
}
/*
by default a menu is 
.closed = 
.vertical = 
open-at : 300px 

*/
.o-nav.one {
  position: fixed;
  z-index: 100;
  height: 100%;
  width: 100%;
  background-color: var(--color-dark);
  border-right: var(--border-width) solid var(--color-light);
  font-size: larger;
  font-weight: bolder;
  overflow-y: auto;
  color: var(--color-light);
  color: var(--color-light);
  display: grid;
  align-items: center;
  grid-template-areas: none head body foot;
}
.o-nav.one > * {
  padding: 0.4rem;
  padding-right: 0px;
}
.o-nav.one a:link, .o-nav.one a:visited {
  color: var(--color-light);
  text-decoration: none;
}
.o-nav.one::-webkit-scrollbar {
  width: 1em;
}
.o-nav.one::-webkit-scrollbar-track {
  background-color: var(--color-dark);
}
.o-nav.one::-webkit-scrollbar-thumb {
  background-color: var(--color-light);
}
.o-nav.one > .head {
  display: flex;
  justify-content: center;
  align-items: center;
}
.o-nav.one > .head > .title {
  display: flex;
  justify-content: center;
  align-items: center;
}
.o-nav.one > .head > .title > .nav-icon {
  margin-right: auto;
}
.o-nav.one > .head > .title > .logo {
  margin-right: auto;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.o-nav.one > .body {
  padding-right: 0px;
}
.o-nav.one > .body .o-link:link, .o-nav.one > .body .o-link:visited, .o-nav.one > .body .o-links-group {
  padding: 0.5rem;
  padding-bottom: 0.6rem;
  padding-right: 0px;
}
.o-nav.one > .body .o-link:link, .o-nav.one > .body .o-link:visited {
  padding-top: 1rem;
  display: flex;
  flex-direction: column;
}
.o-nav.one > .body .o-link:link:not(.category)::after, .o-nav.one > .body .o-link:visited:not(.category)::after {
  content: "";
  background-color: var(--color-light);
  height: var(--border-width);
  width: 90%;
  transition: width 0.2s;
}
.o-nav.one > .body .o-link:hover.o-link::after {
  width: 100%;
}
.o-nav.one > .body .o-links-group > .head {
  font-style: italic;
  font-size: medium;
}
.o-nav.one > .body .o-links-group > .body {
  padding-left: 1.3rem;
}
.o-nav.one > .foot {
  font-size: 1.2rem;
}

.o-nav.one.mobiled {
  height: auto;
}
.o-nav.one.mobiled > .head > .title > .logo > img {
  width: 5rem;
}
.o-nav.one.mobiled > .head > .title {
  margin-right: auto;
}
.o-nav.one.mobiled > .head > .title > .nav-icon {
  margin-right: 1rem;
}
.o-nav.one.mobiled > .head > .title > .logo {
  margin-right: auto;
  background-image: url("/assets/web/images/logo_horizontal_dark_bg.png");
  width: 20rem;
  height: 3.5rem;
  margin: 0.5rem;
}
.o-nav.one.desktoped > .head > .title > .nav-icon {
  display: none;
}
.o-nav.one.desktoped > .head > .title > .logo {
  background-image: url("/assets/web/images/logo_dark_bg.png");
  width: 17rem;
  height: 17rem;
}

.o-nav.one.closed > .body, .o-nav.one.closed > .foot {
  display: none;
}

a:link, a:visited {
  color: var(--color-accent);
  text-decoration: none;
}

.o-links-group.social > .body, .o-links-group.contacts > .body {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(24rem, 1fr));
  gap: var(--gap);
}
.o-links-group.social > .body > .o-link, .o-links-group.contacts > .body > .o-link {
  padding: var(--padding);
  border-bottom: var(--border-width) solid var(--color-accent);
}
.o-link.quotation {
  margin: var(--margin);
  display: inline-block;
  padding: var(--padding);
  border-bottom: var(--border-width) solid var(--color-accent);
}

.o-act {
  display: inline-block;
  padding: calc(var(--padding) * 1) calc(var(--padding) * 2);
  font-size: 1.5rem;
}
.o-act:link, .o-act:visited {
  color: white;
  background-color: var(--color-accent);
  border-radius: 1000px;
  border: calc(var(--border-width) * 2) solid var(--color-accent);
  transition: border-color 0.5s;
}
.o-act:hover {
  border-color: var(--color-dark);
}

.o-act.quotation {
  margin: var(--margin);
  margin-left: 0px;
}

.o-d-ls > .head > .title {
  font-size: 2.5rem;
  margin: calc(var(--margin) * 4) 0px;
  color: var(--color-mid-dark);
}
.o-d-ls > .body {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}
.o-d-ls[data-of=services] > .body {
  display: grid;
  gap: var(--gap);
}
.o-d-ls[data-of=services] > .body > .o-d-it {
  padding: var(--padding);
  background-color: var(--color-mid-dark);
  border-radius: var(--radius);
}
.o-d-ls[data-of=services] > .body > .o-d-it > .body > .o-d-attr {
  margin: 1rem 0px;
}
.o-d-ls[data-of=services] > .body > .o-d-it > .body > .o-d-attr.image {
  display: none;
}
.o-d-ls[data-of=services] > .body > .o-d-it > .body > .o-d-attr.image > img {
  width: 100%;
}
.o-d-ls[data-of=services] > .body > .o-d-it > .body > .o-d-attr.title {
  font-size: larger;
  font-weight: bold;
}
.o-d-ls[data-of=clients] > .body {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(24rem, 1fr));
  gap: var(--gap);
}
.o-d-ls[data-of=clients] > .body > .o-d-it {
  padding: 1rem;
  border: var(--border-width) solid var(--color-mid-dark);
  border-radius: var(--radius);
}
.o-d-ls[data-of=clients] > .body > .o-d-it > .body > .o-d-attr {
  margin: 1rem 0px;
  text-align: center;
}
.o-d-ls[data-of=clients] > .body > .o-d-it > .body > .o-d-attr.image > img {
  border-radius: var(--radius);
  width: 50%;
}
.o-d-ls[data-of=clients] > .body > .o-d-it > .body > .o-d-attr.title {
  font-size: larger;
}
.o-d-ls[data-of=work] > .body {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(25rem, 1fr));
  gap: var(--gap);
}
.o-d-ls[data-of=work] > .body > .o-d-it > .body > .o-d-attr > img {
  width: 100%;
  border-radius: var(--radius);
}
input, textarea, button {
  font: inherit;
  padding: var(--padding);
}

button {
  background-color: var(--color-accent);
  color: white;
  border-radius: 3rem;
  outline: none;
  border: none;
  margin: 3rem;
}

.form-container #form > div {
  margin: 1rem 0px;
  display: flex;
  flex-direction: column;
}

/*# sourceMappingURL=index.css.map */