/*
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.
*/
*,
*::before,
*::after {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  tap-highlight-color: transparent;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

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: var(--bg-white);
  font-family: "Rubik";
  width: 100vw;
  overflow-x: hidden;
}

.bold {
  font-weight: bold;
}

.gray {
  color: var(--hero-gray);
}

.lucide {
  width: 20px;
  height: 20px;
}

h2,
h3 {
  font-family: "Rubik";
}

h2 {
  font-weight: 500;
  font-size: var(--font-size-big);
}

h3 {
  font-weight: 300;
  font-size: var(--font-size-medium);
}

img {
  pointer-events: none;
}

a {
  color: var(--text-black);
  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;
}

nav {
  position: fixed;
  z-index: 999;
  width: 100vw;
  height: 50px;
  inset: 0;
  margin: 0 auto;
  overflow: hidden;
}

footer {
  width: 100vw;
  /*background-color: #171A20;*/
  background-color: var(--bg-black);
  display: flex;
  flex-flow: column nowrap;
  padding: 20px;
  color: var(--text-white);
  gap: 10px;
}

address {
  line-height: 40px;
  display: flex;
  flex-flow: column;
}

#loader-wrap {
  position: fixed;
  top: 0;
  width: 100vw;
  height: 120dvh;
  background-color: var(--bg-white);
  z-index: 1000;
  padding-top: 40dvh;
  text-align: center;
  display: flex;
  flex-flow: column;
  align-items: center;
  gap: 20px;
}

#loader-wrap>p {
  margin-bottom: 20px;
}

#loader {
  width: 40px;
  height: 40px;
  margin: 0 auto;
  border: 5px solid var(--text-black);
  ;
  border-radius: 50%;
  border-color: transparent var(--text-black) var(--text-black) var(--text-black);
  animation: load 1s linear infinite;
}

.btn {
  background-color: var(--bg-black);
  color: var(--text-white);
  border-radius: 15px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-family: "Syne";
  padding: 0 20px;
  font-size: 1.1em;
  gap: 5px;
  text-align: center;
}

.btn-short {
  height: 40px;
}

.btn-tall {
  height: 50px;
}

.btn-negative {
  background-color: var(--bg-white);
  color: var(--text-black);
}

.btn-negative-stroke {
  background-color: var(--bg-white-transparent);
  color: var(--text-white);
  border: 1px solid var(--text-white);
}

.btn:hover,
.btn:active {
  transform: scale(0.98);
}

.flex-start {
  align-self: flex-start;
}

.btn-dd {
  margin-top: auto;
  width: 80%;
}

.btn-navbar {
  width: 100px;
}

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: var(--bg-white);
  gap: 20px;
}

#logo {
  font-weight: 750;
  font-family: "Syne", Sans-Serif;
  text-transform: uppercase;
  letter-spacing: -1%;
  list-style-type: none;
  font-size: var(--font-size-logo);
}

.margin-right {
  margin-right: auto;
}

#dd-checkbox-label {
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
}

.ham-stroke {
  transition-duration: 0.3s;
  transform-origin: center;
}

#ql-wrap {
  list-style-type: none;
  display: inline-flex;
  gap: 5vw;
}

ul#navbar:has(#dd-checkbox:checked) .middle-stroke {
  opacity: 0;
  stroke-width: 0;
}

ul#navbar:has(#dd-checkbox:checked) .top-stroke {
  transform: translate(5px, 5px) rotate(-45deg);

}

ul#navbar:has(#dd-checkbox:checked) .bottom-stroke {
  transform: translate(5px, -5px) rotate(45deg);

}

#dd {
  width: 100vw;
  height: 150dvh;
  background-color: var(--bg-white);
  padding: 0 0 60dvh;
  position: fixed;
  top: 0;
  left: 100vw;
  z-index: 998;
  transition-duration: 0.3s;
  display: flex;
  flex-flow: column;
  align-items: center;
}

#dd ul {
  list-style-type: none;
  display: flex;
  flex-flow: column wrap;
  align-items: center;
  gap: 30px;
  margin-top: 20dvh;
  padding: 0;
  max-width: 80%;
}

#dd .dd-child {
  width: 90vw;
  height: 2dvh;
}

body:has(#dd-checkbox:checked) {
  overflow: hidden;
}

body:has(#dd-checkbox:checked) #dd {
  left: 0;
}

.footer-contact {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: underline var(--text-white);
  color: var(--text-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: var(--text-white);
  font-weight: bold;
  width: 40%;
}

.footer-ql li {
  height: 40px;
  display: grid;
  align-items: center;
}

.footer-ql a {
  color: var(--text-white);
  font-weight: 100;
}

#social-link {
  text-align: center;
}

#social-link-inline {
  display: inline-flex;
  gap: 20px;
  margin: 20px 0;

}

@media only screen and (min-width: 0) and (max-width: 699px) {
  #ql-wrap {
    display: none;
  }

  .btn-navbar {
    display: none;
  }
}

@media only screen and (min-width: 700px) {
  body:has(#dd-checkbox:checked) {
    overflow: scroll;
  }

  body:has(#dd-checkbox:checked) #dd {
    display: none;
  }

  #dd-toggle {
    display: none;
  }

  #dd {
    display: none;
  }

  .btn-navbar {
    display: grid;
  }
}