/*
This stylesheet houses styles that are common to every page on this website

Reason: It eliminate the need to call a stylesheet that has other declaration not related to what it will actually be used for e.g defining styles for navbar in each individual webpage main stylesheet whuch would result in loading a file you would never use.
  
Content: 
1. Default elements reset to maintain this websites's consistency accross a variety of browsers.

2. Style declaration for the head & footer section.
*/
* {
  -moz-appearance: none;
    appearance: none;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  tap-highlight-color: transparent;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  /*overflow-x: hidden;*/
}
body {
display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  gap: 100px;
  margin: 0 auto;
font-size: var(--font-size-small);
  background-color: white;
  width: 100vw;
}
.lucide {
  width: 20px;
  height: 20px;
}
h2, h3 {
  font-family: "Rubik";
}
h2 {
  font-weight: 100;
  font-size: var(--font-size-big);
}
h3 {
  font-weight: 300;
  font-size: var(--font-size-medium);
}
img {
  pointer-events: none;
}
button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  transition-duration: 0.3s;
    background-color: #171A20;
    color: white;
    border-radius: 20px;
    border: none;
  overflow: hidden;
  font-family: "Syne";
  align-self: flex-start;
  margin-top: 50px;
}
a {
  font-family: "Rubik";
  text-decoration: none;
  font-size: var(--font-size-small);
}
p {
  font-family: "Rubik";
  font-weight: normal;
  line-height: 1.5;
  width: 100%;
  line-height: 1.5;
}
#loader-wrap {
  position: fixed;
  top: 0;
  width: 100vw;
  height: 120dvh;
  background-color: white;
  z-index: 1000;
  padding-top: 40dvh;
  text-align: center;
}
#loader-wrap > p {
  margin-bottom: 20px;
}
#loader {
  width: 40px;
  height: 40px;
  margin: 0 auto;
  border: 5px solid black;
  border-radius: 50%;
  border-color: transparent black black black;
  animation: load 1s linear infinite;
}
nav {
  position: fixed;
  z-index: 999;
  width: 100vw;
  height: 50px;
  inset: 0;
  margin: 0 auto;
  overflow: hidden;
}
ul#navbar {
  list-style-type: none;
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
  height: 100%;
  padding: 0 4vw;
  background-color: rgba(255, 255, 255, 1.0);
  
}
#logo {
  margin-right: auto;
  font-weight: 750;
  font-family: "Syne", Sans-Serif;
  text-transform: uppercase;
  letter-spacing: -1%;
  list-style-type: none;
  font-size: var(--font-size-logo);
}
nav ul#navbar a {
  font-family: "Rubik";
  text-decoration: none;
  color: black;
}
#menu-checkbox-label {
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
}
.ham-menu {
  transition-duration: 0.3s;
  transform-origin: center;
}
#ql-container {
  list-style-type: none;
  display: inline-flex;
  gap: 5vw;
}
.ql {}
ul#navbar:has(#menu-checkbox:checked) .middle-menu {
  opacity: 0;
  stroke-width: 0;
}
ul#navbar:has(#menu-checkbox:checked) .top-menu {
  transform: translate(5px, 5px) rotate(-45deg);
  
}
ul#navbar:has(#menu-checkbox:checked) .bottom-menu {
  transform: translate(5px, -5px) rotate(45deg);
  
}
#dropdown {
  width: 100vw;
  height: 150dvh;
  background-color: white;
  padding: 0 0 60dvh;
  position: fixed;
  top: 0;
  left: 100vw;
  /*background: url("assets/20260506_161300.png") no-repeat center / cover;*/
  z-index: 998;
  transition-duration: 0.3s;
    display: flex;
  flex-flow: column;
  align-items: center;
  /*justify-content: center;*/
}
#dropdown ul {
  list-style-type: none;
  display: flex;
  flex-flow: column wrap;
  align-items: center;
  gap: 30px;
  margin-top: 20dvh;
}
#dropdown .dropdown-child-element {
  width: 90vw;
  height: 2dvh;
}
#dropdown a {
  padding-left: 30px;
  width: 100%;
  display: block;
  text-decoration: none;
  color: black;
  font-family: "Rubik";
}
body:has(#menu-checkbox:checked) {
overflow: hidden;
}
body:has(#menu-checkbox:checked) #dropdown {
  left: 0;
}

#dropdown-button {
  width: 80%;
  height: 50px;
  margin-top: auto;
  border: 1px solid black;
  align-self: center !important;
}
#dropdown-button:hover, #dropdown-button:active {
  transform: scale(0.98);
}
footer {
  width: 100vw;
  background-color: #171A20;
  display: flex;
  flex-flow: column nowrap;
  align-items: ;
  padding: 20px;
  color: white;
  gap: 10px;
}
.footer-contact {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: underline white;
  color: white;
}

#footer-ql-wrap {
  width: 100%;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  gap: 10%;
  margin-top: 50px;
}

.footer-ql {
  list-style-type: none;
  font-family: "Rubik";
  color: white;
  font-weight: bold;
  width: 40%;
}
.footer-ql li {
  height: 40px;
  display: grid;
  align-items: center;
}
.footer-ql a {
  color: lightgray;
  font-weight: 100;
}
#social-link {
  text-align: center;
}
#social-link-inline {
  display: inline-flex;
  gap: 20px;
  margin: 20px 0;
  
}
address {
  line-height: 40px;
  display: flex;
  flex-flow: column;
}
@media only screen and (min-width: 0) and (max-width: 699px) {
   #ql-container {
    display: none;
  }
}
@media only screen and (min-width: 700px) {
    #menu {
    display: none;
  }
  body:has(#menu-checkbox:checked) #dropdown {
    display: none;
  }
}