@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,600;0,700;0,800;1,400&display=swap');

html {
  width: 100%;
  scroll-behavior: smooth;
}

*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
  box-sizing: border-box;
}

a:focus,
button:focus {
  outline: 1px solid;
}

:root {
  --primary-color: #2d2dff;
  --secondary-color: #ef6c00;
  --border-color: #ccc;
  --link-color: #1d1d1d;
  --link-color-hover: #f4f4f4;
  --background-color: #ffffff;
  --background-alt-color: #1d1d1d;
  --slider-background-color: #f7f7f7;
  --text-color: #1d1d1d;
  --text-alt-color: #ffffff;
  --space-margin-regular: 120px;
  --space-margin-regular-half: 60px;
  --space-margin-small-screen: 64px;
}

h1 {
  font-size: 2.5rem;
  line-height: 1.2;
}

h2 {
  font-size: 2.0625rem;
  line-height: 1.5;
}

h3 {
  font-size: 1.75rem;
  line-height: 2.5;
}

h4 {
  font-size: 1.4375rem;
  line-height: 1.4;
}

h5 {
  font-size: 1.1875rem;
  line-height: 1.4;
}

h6 {
  font-size: 1rem;
  line-height: 1.5;
}

@media screen and (max-width: 640px) {
  h2 {
    line-height: 1.3;
  }

  h3 {
    line-height: 1.2;
  }
}

span {
  font-size: 1rem;
  letter-spacing: 1px;
  line-height: 3rem;
}

body {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: normal;
  color: var(--text-color);
  margin: 0;
  padding: 0;
  background-color: var(--background-color);
  transition: background-color 300ms;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

/* Cookie-modal */

.cookie-section {
  display: block;
  position: fixed;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9999;
}

.cookie-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: var(--background-alt-color);
  color: var(--text-alt-color);
  padding: 32px;
  box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);
  z-index: 9999;
}

.cookie-inner-container {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  max-width: 800px;
}

.cookie-button-container {
  display: flex;
  flex-direction: row;
  padding: 16px 0;
  width: 100%;
}

.cookie-button-container button {
  margin-right: 16px;
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  background-color: var(--primary-color);
  color: var(--text-alt-color);
  font-size: 1rem;
}

/* Nav */

nav {
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  align-items: center;
  min-height: 100px;
  background-color: transparent;
  color: var(--text-color);
}


/* Underline styles */
nav a {
  display: block;
  position: relative;
  padding: 0.2em 0;
  text-decoration: none;
  color: var(--text-alt-color);
  font-size: 1rem;
  letter-spacing: 1px;
}

/* Fade in */
.desktop-nav a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0.1em;
  background-color: var(--link-color);
  opacity: 0;
  transition: opacity 300ms, transform 300ms;
}

.desktop-nav a:hover::after,
.desktop-nav a:focus::after {
  opacity: 1;
  transform: translate3d(0, 0.2em, 0);
}

.desktop-nav li a:hover::after,
.desktop-nav li a:focus::after {
  transform: translate3d(0, 0, 0);
}

.desktop-nav li a::after {
  opacity: 1;
  transform: scale(0);
  transform-origin: center;
}

.desktop-nav li a:hover::after,
.desktop-nav li a:focus::after {
  transform: scale(1);
}

nav li {
  margin-right: 20px;
}

nav li:last-child {
  margin-right: 0px;
}

nav ul {
  display: flex;
  flex-direction: row;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

nav .logo {
  margin-left: 50px;
  max-width: 150px;
}

.nav-container-left {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.nav-container-right {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-right: 50px;
  margin-top: 8px;
}

.nav-container-right ul {
  margin-right: 50px;
}

.social-media {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin-top: 1px;
}

.social-media a {
  display: flex;
  margin-right: 10px;
}


.social-media a:last-child {
  margin-right: 0px;
}

/* Mobile nav */
.mobile-nav {
  display: none;
}

.mobile-nav-menu {
  display: none;
}

.menu-button {
  position: fixed;
  border: 0;
  width: 63px;
  height: 63px;
  display: grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
  border-radius: 50%;
  overflow: hidden;
  transition: 0.175s;
  background-color: var(--primary-color);
}

.button:hover {
  opacity: 1;
}

/* burger-4 */
.mobile-nav-burger {
  scale: 0.8;
}

.show {
  display: block;
  animation: showmenu 0.3s;
}

.hide {
  display: block;
  animation: hidemenu 0.3s forwards;
}

#menu-button-path {
  transition: d 0.2s ease;
}

.bar-container {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  width: 50%;
  height: 50%;
  margin: auto;
}

.menu-button .bar {
  width: 100%;
  height: 4px;
  background-color: #eee;
  transition: transform 0.3s ease, opacity 0.3s ease;
}


.menu-button.open .bar:nth-child(1) {
  transform: rotate(45deg) translate(7px, 8px);
}

.menu-button.open .bar:nth-child(2) {
  opacity: 0;
}

.menu-button.open .bar:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

@keyframes showmenu {
  0% {
    opacity: 0;
    transform: translateY(50px);
  }

  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}

@keyframes hidemenu {
  0% {
    visibility: visible;
    opacity: 1;
    transform: translateY(0px);
  }

  100% {
    visibility: hidden;
    opacity: 0;
    transform: translateY(50px);
  }
}

@media screen and (max-width: 860px) {
  nav ul {
    display: none;
  }

  nav .logo {
    margin-left: 12px;
    max-width: 150px;
  }

  .mobile-nav-menu li a {
    margin: 0;
  }

  .mobile-nav {
    display: block;
    position: fixed;
    height: 64px;
    width: 64px;
    bottom: 45px;
    right: 38px;
    border-radius: 50%;
    z-index: 9999;
  }

  .mobile-nav-menu {
    position: fixed;
    background-color: var(--background-alt-color);
    bottom: 125px;
    right: 40px;
    z-index: 9999;
    padding: 40px;
    border-radius: 8px;
    box-shadow: rgba(17, 12, 46, 0.55) 0px 48px 100px 0px;
  }

  .mobile-nav-menu li a {
    font-size: 1.5rem;
    color: var(--text-alt-color);
    line-height: 2;
  }

  .nav-container-right {
    margin-right: 28px;
  }

  .social-media a {
    display: flex;
    margin-right: 20px;
  }
}


/* Main */

main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  margin: 0 auto;
  overflow: hidden;
}

/* Back to top button */

#desktop-back-to-top {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 64px;
  height: 64px;
  position: fixed;
  bottom: 45px;
  right: 38px;
  background-color: var(--primary-color);
  border-radius: 50%;
  cursor: pointer;
  z-index: 9998;
}

#desktop-back-to-top a {
  width: 100%;
  height: 100%;
}

#desktop-back-to-top svg path {
  stroke-width: 1px;
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes fade-out {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

.fade-in {
  animation: fade-in 0.2s ease-in-out forwards;
}

.fade-out {
  animation: fade-out 0.2s ease-in-out forwards;
}

@media screen and (max-width: 860px) {
  #desktop-back-to-top {
    display: none;
  }

}

/* Hero */

#bg-hero {
  position: absolute;
  top: 0;
  left: 0;
  height: 38%;
  width: 100%;
  background: linear-gradient(122deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  clip-path: polygon(0% 0%, 100% 0%, 100% 45%, 0% 100%);
  background-size: 400% 400%;
  animation: gradient 15s ease infinite;
  z-index: -1;
}


@media screen and (max-width: 1200px) {
  #bg-hero {
    height: 250px;
    clip-path: polygon(0% 0%, 100% 0%, 100% 60%, 0% 100%);
  }
}

@media screen and (max-width: 640px) {
  #bg-hero {
    height: 230px;
    clip-path: polygon(0% 0%, 100% 0%, 100% 60%, 0% 100%);
  }

}

#hero-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: 100%;
  margin: var(--space-margin-regular) 0;
}

#hero-container {
  padding: 3rem 20%;
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

.hero-image {
  width: 50%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}

.hero-image img {
  width: 100%;
  object-fit: fill;
}

#hero-content {
  display: flex;
  flex-direction: column;
  max-width: 90%;
}

#hero-content span {
  font-size: clamp(3.5rem, 6vw, 14rem);
  font-weight: 700;
  line-height: 1;
  cursor: default;
}

#hero-content h1 {
  display: flex;
  flex-direction: column;
}

#hero-content p {
  margin-top: 100px;
  font-size: clamp(1.3rem, 1.3vw, 1.8rem);
  line-height: 1.35;
  cursor: default;
}

@media screen and (max-width: 1200px) {
  #hero-container {
    width: 100%;
    margin: var(--space-margin-small-screen) 0;
  }

}

@media screen and (max-width: 640px) {
  #hero-content p {
    margin-top: 60px;
  }

  #hero-container {
    padding: 2rem 5%;
  }
}

.cta-container {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  margin-top: 64px;
}

.cta-container a,
.cta-container button {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 16px 32px;
  border-radius: 8px;
  background-color: var(--primary-color);
  color: var(--text-alt-color);
  font-size: 1.2rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.cta-container button {
  height: 61px;
}

.cta-container a {
  margin-left: 32px;
}

@media screen and (max-width: 640px) {
  .cta-container {
    flex-direction: column;
  }

  .cta-container a {
    margin-top: 24px;
    margin-left: 0px;
  }

}

/*  Logo-slider  */

.logo-slider {
  overflow: hidden;
  padding: 0;
  white-space: nowrap;
  position: relative;
  background-color: var(--slider-background-color);
  margin: var(--space-margin-regular-half) 0 var(--space-margin-regular) 0;
  padding: 46px 0;
  width: 100vw;
  z-index: 0;
}

.logos-slide {
  display: inline-block;
  animation: 20s slide infinite linear;
}

.logos-slide .slide {
  display: inline-block;
  vertical-align: middle;
  height: fit-content;
  width: 350px;
  text-align: center;
}

.slide img {
  max-height: 80px;
  font-size: 16px;
  text-align: left;
  font-family: 'Arial';
  font-style: normal;
}

.slide-img-1 {
  width: 150px;
}

.slide-img-2 {
  width: 130px;
}

.slide-img-3 {
  width: 160px;
}

.slide-img-4 {
  width: 180px;
}

.slide-img-5 {
  width: 270px;
}

.slide-img-6 {
  width: 80px;
}

@media screen and (max-width: 1200px) {
  .logo-slider {
    margin: var(--space-margin-small-screen) 0;

  }
}

@media screen and (max-width: 450px) {
  .logos-slide .slide {
    width: 300px;
  }
}

@keyframes slide {
  from {
    transform: translate3d(0%, 0, 0);
    transform-style: preserve-3d;
    will-change: transform;

  }

  to {
    transform: translate3d(-100%, 0, 0);
    transform-style: preserve-3d;
    will-change: transform;
  }
}

.main-content {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  margin: 0 auto;
  width: 100vw;
}

/* Services */

.services-container {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;

}

.services-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 30px;
  border-radius: 8px;
  border: solid 1px #d9d9d9;
}

.service-card-top {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin: 16px 0;
}

@media (max-width: 1205px) {
  .services-container {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 850px) {
  .services-card {
    padding: 18px;
  }

  .service-card-top {
    margin: 8px 0;
  }

  .services-container {
    grid-template-columns: repeat(1, 1fr);
  }
}

/* Projects container */

.projects-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
  gap: 20px;
  width: 100%;
  margin-top: 20px;
}

@media (max-width: 800px) {
  .projects-container {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  }
}

.project-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: start;
  padding: 30px;
  border: 1px solid #d9d9d9;
  border-radius: 8px;
  background-color: #fff;
}

.project-card img {
  width: 100%;
  height: auto;
  border-radius: 8px 8px 8px 8px;
  box-shadow: 0 4px 11px rgba(0, 0, 0, 0.2);
}

.project-card h3 {
  margin: 15px 0 10px;
  font-size: 1.75rem;
  color: #333;
  text-align: center;
  text-wrap: balance;
  line-height: 1.5;
  min-height: 85px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.project-card p {
  font-size: 1rem;
  color: #666;
  min-height: 125px;
}

.project-card a {
  margin-top: 12px;
}

@media screen and (max-width: 800px) {
  .project-card p {
    min-height: 0;
  }
}

/* About */

.about-container {
  display: flex;
  flex-direction: row;
  margin: var(--space-margin-regular) auto;
  max-width: 1400px;
}

.about-inner-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  width: 50%;
  margin-right: 64px;
}

.about-image-container {
  width: 50%;
}

.about-image {
  height: 100%;
  width: 100%;
  object-fit: cover;
  border-radius: 8px;
}

@media screen and (max-width: 1430px) {
  .about-image-container {
    margin-right: 16px;
  }

  .about-container {
    width: 90%;
    margin: var(--space-margin-small-screen) auto;
  }

  .about-inner-container {
    width: 100%;
  }

  .about-image-container {
    display: none;
  }
}

@media screen and (max-width: 1200px) {
  .about-container h3 {
    margin: 42px 0 12px;
  }

  .about-container {
    margin: var(--space-margin-small-screen) auto;
  }
}

@media screen and (max-width: 640px) {
  .about-inner-container {
    margin-right: 0;
  }
}

/* Parallax */
/* 
.parallax {
  position: relative;
  overflow: hidden;
  height: 500px;
  width: 100%;
}

.parallax img {
  position: absolute;
  width: 100%;
}

.background {
  top: 0;
  left: 0;
  transform: translateZ(-1px) scale(2);
}

.foreground {
  bottom: 0;
  right: 0;
}

*/
.about-text-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;

}

.wrapper {
  height: 1000px;
  overflow-y: auto;
  overflow-x: hidden;
  perspective: 10px;
}

.header {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  transform-style: preserve-3d;
  z-index: -1;
}

.background {
  transform: translateZ(-10px) scale(2);
}

.foreground {
  transform: translateZ(-5px) scale(1.5);
}

.background,
.foreground {
  position: absolute;
  height: 100%;
  width: 100%;
  object-fit: cover;
  z-index: -1;
}

/* Footer */

footer {
  display: block;
  position: relative;
  width: auto;
  margin: var(--space-margin-regular) auto 0 auto;
  z-index: 0;
}

.footer-primary {
  background-color: var(--background-alt-color);
  width: 100%;
  position: relative;
  overflow: hidden;
  border-radius: 8rem 8rem 0 0;
}

.footer-top {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-top: 16px;
  padding-bottom: 16px;
  position: relative;
  overflow: hidden;
}

.footer-top ul {
  display: flex;
  flex-direction: row;
  list-style-type: none;
  margin: 0;
  padding: 0;
  margin-right: 50px;
}

.footer-top ul a {
  text-decoration: none;
  color: var(--text-alt-color);
  margin-right: 20px;
}

.footer-bottom {
  aspect-ratio: 100 / 20;
  object-fit: cover;
  width: 100vw;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  justify-content: center;
  position: relative;
  overflow: visible;
  margin-top: -90px;
}

.footer-logo {
  object-fit: cover;
  object-position: 50% 0%;
  width: 96vw;
  position: absolute;
  inset: 29% auto auto;
  filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
}

.site-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--text-alt-color);
  width: 100%;
}

@media screen and (max-width: 1024px) {
  footer {
    margin: var(--space-margin-small-screen) auto 0 auto;
  }

  .footer-bottom {
    margin-top: -20px;
  }

  .footer-primary {
    border-radius: 3rem 3rem 0 0;
  }
}

/* Custom */

.wrapper {
  text-wrap: nowrap;
}

.text-container {
  max-width: 800px;
}

.special-h2 {
  font-size: 2.5rem;
  font-weight: 400;
  margin-bottom: 42px;
}

.uppercase {
  text-transform: uppercase;
}

.strong-color-primary {
  color: var(--primary-color);
}

.strong-color-secondary {
  color: var(--secondary-color);
}

@media screen and (max-width: 1200px) {
  .special-h2 {
    font-size: 2rem;
    font-weight: 400;
  }
}

/* Empty space */

.empty-space-40 {
  height: 40px;
}

.empty-space-80 {
  height: 80px;
}

.empty-space-120 {
  height: 120px;
}

@media screen and (max-width: 640px) {
  .about-text-container .empty-space-40 {
    height: 0px;
  }
}

/* Containers */

.content-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  margin: var(--space-margin-regular) auto;
  max-width: 1400px;
}

.container-50-50 {
  display: flex;
  flex-direction: row;
}

@media screen and (max-width: 1430px) {
  .content-container {
    width: 90%;
    margin: var(--space-margin-small-screen) auto;
  }
}

/* Logo */

.codeview-logo {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='150' height='60' viewBox='0 0 549.4 104.1' fill='%23ffffff'%3e%3c!-- Generator: Adobe Illustrator 28.6.0, SVG Export Plug-In . SVG Version: 1.2.0 Build 709) --%3e%3cg%3e%3cg id='Layer_1'%3e%3cg%3e%3cpath d='M8.1,66.2c0-17.4,14.1-31.6,32.1-31.5,11.5.1,22.1,5.3,27.5,16.9l-14.1,7.7c-2.7-5.2-7.5-8.5-13.4-8.5-8.6,0-15,6.9-15,15.3s6.4,15.3,15,15.3,10.7-3.3,13.4-8.5l14.1,7.7c-5.4,11.6-16.1,16.8-27.5,16.9-18,.1-32.1-14.2-32.1-31.5Z'/%3e%3cpath d='M71.4,66.1c0-17.3,14.1-31.5,32.4-31.5s32.5,14.4,32.5,31.5-14.1,31.6-32.5,31.6-32.4-14.2-32.4-31.6ZM119,66.2c0-8.5-6.5-15.5-15.3-15.5s-15.2,7-15.2,15.5,6.4,15.5,15.2,15.5,15.3-7,15.3-15.5Z'/%3e%3cpath d='M140.9,66.4c0-18.6,12.8-31.6,31.4-31.6s11.8,2.2,16.2,5.7V8.9h17.3v57.5c0,18.1-13.8,31.5-32.5,31.5s-32.4-14.2-32.4-31.5ZM188.6,66.4c0-8.5-6.5-15.5-15.3-15.5s-15.2,7-15.2,15.5,6.4,15.3,15.2,15.3,15.3-6.9,15.3-15.3Z'/%3e%3cpath d='M213.5,65.8c0-17.3,12.6-31.5,31-31.5s29.9,14,29.9,30.3v5.1h-44.4c1.2,8,7.4,13.3,15.9,13.3s12-3.1,14.7-8.7l13.2,6.6c-5.2,10.7-15.1,16.9-27.8,16.9-18.6,0-32.6-12.9-32.6-32ZM257.4,60.1c-.7-6.2-5.8-10.9-13-10.9s-12.4,4.8-13.6,10.9h26.7Z'/%3e%3cpath d='M275.7,36.4h18.2l15.7,44.5,15.6-44.5h18.2l-18.5,49.9c-2.9,7.7-8.1,11.6-15.5,11.6s-12.8-3.9-15.6-11.6l-18.2-49.9ZM309.7,81.5h-.1.1Z'/%3e%3cpath d='M348.1,16.9c0-5.8,4.8-10.6,10.6-10.6s10.5,4.8,10.5,10.6-4.7,10.6-10.5,10.6-10.6-4.7-10.6-10.6ZM367.3,36.4v59.8h-17.1v-59.8h17.1Z'/%3e%3cpath d='M377.4,65.8c0-17.3,12.6-31.5,31-31.5s29.9,14,29.9,30.3v5.1h-44.4c1.2,8,7.4,13.3,15.9,13.3s12-3.1,14.7-8.7l13.2,6.6c-5.2,10.7-15.1,16.9-27.8,16.9-18.6,0-32.6-12.9-32.6-32ZM421.3,60.1c-.7-6.2-5.8-10.9-13-10.9s-12.4,4.8-13.6,10.9h26.7Z'/%3e%3cpath d='M452.6,85.2l-11.5-48.8h16.1l10.4,45.5c0,.2-.1.2.4.2s.2-.1.2-.1l8.8-34.6c2.3-8.6,7.2-12.8,14.6-12.8s12.3,4.2,14.4,12.6l8.8,34.9c0,.1,0,.2.4.2s.4-.1.4-.4l10-45.5h15.8l-11,48.8c-1.9,8.7-8.8,12.7-15.3,12.7s-12.2-4.2-14.4-12.7l-8.9-35.6s.1-.1-.2-.1-.1.1-.1.1l-8.9,35.6c-2.1,8.5-7.4,12.7-14.4,12.7s-13.4-4.1-15.5-12.7Z'/%3e%3c/g%3e%3c/g%3e%3c/g%3e%3c/svg%3e");
  background-position: center;
  background-repeat: no-repeat;
  width: 225px;
  height: 100px;
}

@media screen and (max-width: 640px) {
  .codeview-logo {
    width: 200px;
  }
}

.codeview-logo-footer {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%' fill='%23ffffff' viewBox='0 0 549.4 104.1' %3e%3c!-- Generator: Adobe Illustrator 28.6.0, SVG Export Plug-In . SVG Version: 1.2.0 Build 709) --%3e%3cg%3e%3cg id='Layer_1'%3e%3cg%3e%3cpath d='M8.1,66.2c0-17.4,14.1-31.6,32.1-31.5,11.5.1,22.1,5.3,27.5,16.9l-14.1,7.7c-2.7-5.2-7.5-8.5-13.4-8.5-8.6,0-15,6.9-15,15.3s6.4,15.3,15,15.3,10.7-3.3,13.4-8.5l14.1,7.7c-5.4,11.6-16.1,16.8-27.5,16.9-18,.1-32.1-14.2-32.1-31.5Z'/%3e%3cpath d='M71.4,66.1c0-17.3,14.1-31.5,32.4-31.5s32.5,14.4,32.5,31.5-14.1,31.6-32.5,31.6-32.4-14.2-32.4-31.6ZM119,66.2c0-8.5-6.5-15.5-15.3-15.5s-15.2,7-15.2,15.5,6.4,15.5,15.2,15.5,15.3-7,15.3-15.5Z'/%3e%3cpath d='M140.9,66.4c0-18.6,12.8-31.6,31.4-31.6s11.8,2.2,16.2,5.7V8.9h17.3v57.5c0,18.1-13.8,31.5-32.5,31.5s-32.4-14.2-32.4-31.5ZM188.6,66.4c0-8.5-6.5-15.5-15.3-15.5s-15.2,7-15.2,15.5,6.4,15.3,15.2,15.3,15.3-6.9,15.3-15.3Z'/%3e%3cpath d='M213.5,65.8c0-17.3,12.6-31.5,31-31.5s29.9,14,29.9,30.3v5.1h-44.4c1.2,8,7.4,13.3,15.9,13.3s12-3.1,14.7-8.7l13.2,6.6c-5.2,10.7-15.1,16.9-27.8,16.9-18.6,0-32.6-12.9-32.6-32ZM257.4,60.1c-.7-6.2-5.8-10.9-13-10.9s-12.4,4.8-13.6,10.9h26.7Z'/%3e%3cpath d='M275.7,36.4h18.2l15.7,44.5,15.6-44.5h18.2l-18.5,49.9c-2.9,7.7-8.1,11.6-15.5,11.6s-12.8-3.9-15.6-11.6l-18.2-49.9ZM309.7,81.5h-.1.1Z'/%3e%3cpath d='M348.1,16.9c0-5.8,4.8-10.6,10.6-10.6s10.5,4.8,10.5,10.6-4.7,10.6-10.5,10.6-10.6-4.7-10.6-10.6ZM367.3,36.4v59.8h-17.1v-59.8h17.1Z'/%3e%3cpath d='M377.4,65.8c0-17.3,12.6-31.5,31-31.5s29.9,14,29.9,30.3v5.1h-44.4c1.2,8,7.4,13.3,15.9,13.3s12-3.1,14.7-8.7l13.2,6.6c-5.2,10.7-15.1,16.9-27.8,16.9-18.6,0-32.6-12.9-32.6-32ZM421.3,60.1c-.7-6.2-5.8-10.9-13-10.9s-12.4,4.8-13.6,10.9h26.7Z'/%3e%3cpath d='M452.6,85.2l-11.5-48.8h16.1l10.4,45.5c0,.2-.1.2.4.2s.2-.1.2-.1l8.8-34.6c2.3-8.6,7.2-12.8,14.6-12.8s12.3,4.2,14.4,12.6l8.8,34.9c0,.1,0,.2.4.2s.4-.1.4-.4l10-45.5h15.8l-11,48.8c-1.9,8.7-8.8,12.7-15.3,12.7s-12.2-4.2-14.4-12.7l-8.9-35.6s.1-.1-.2-.1-.1.1-.1.1l-8.9,35.6c-2.1,8.5-7.4,12.7-14.4,12.7s-13.4-4.1-15.5-12.7Z'/%3e%3c/g%3e%3c/g%3e%3c/g%3e%3c/svg%3e");
  background-position: center;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0%;
  width: 96vw;
  position: absolute;
  inset: 18% auto auto;
}

/* Icons */

.window-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%232d2dff' class='bi bi-window' viewBox='0 0 16 16' %3e%3cpath d='M2.5 4a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1m2-.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0m1 .5a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1' /%3e%3cpath d='M2 1a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2zm13 2v2H1V3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1M2 14a1 1 0 0 1-1-1V6h14v7a1 1 0 0 1-1 1z' /%3e%3c/svg%3e");
  background-position: center;
  background-repeat: no-repeat;
  width: 50px;
  height: 50px;
}

.search-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%232d2dff' class='bi bi-search' viewBox='0 0 16 16' %3e%3cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0' /%3e%3c/svg%3e");
  background-position: center;
  background-repeat: no-repeat;
  width: 50px;
  height: 50px;
}

.fingerprint-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%232d2dff' class='bi bi-fingerprint' viewBox='0 0 16 16' %3e%3cpath d='M8.06 6.5a.5.5 0 0 1 .5.5v.776a11.5 11.5 0 0 1-.552 3.519l-1.331 4.14a.5.5 0 0 1-.952-.305l1.33-4.141a10.5 10.5 0 0 0 .504-3.213V7a.5.5 0 0 1 .5-.5Z' /%3e%3cpath d='M6.06 7a2 2 0 1 1 4 0 .5.5 0 1 1-1 0 1 1 0 1 0-2 0v.332q0 .613-.066 1.221A.5.5 0 0 1 6 8.447q.06-.555.06-1.115zm3.509 1a.5.5 0 0 1 .487.513 11.5 11.5 0 0 1-.587 3.339l-1.266 3.8a.5.5 0 0 1-.949-.317l1.267-3.8a10.5 10.5 0 0 0 .535-3.048A.5.5 0 0 1 9.569 8m-3.356 2.115a.5.5 0 0 1 .33.626L5.24 14.939a.5.5 0 1 1-.955-.296l1.303-4.199a.5.5 0 0 1 .625-.329' /%3e%3cpath d='M4.759 5.833A3.501 3.501 0 0 1 11.559 7a.5.5 0 0 1-1 0 2.5 2.5 0 0 0-4.857-.833.5.5 0 1 1-.943-.334m.3 1.67a.5.5 0 0 1 .449.546 10.7 10.7 0 0 1-.4 2.031l-1.222 4.072a.5.5 0 1 1-.958-.287L4.15 9.793a9.7 9.7 0 0 0 .363-1.842.5.5 0 0 1 .546-.449Zm6 .647a.5.5 0 0 1 .5.5c0 1.28-.213 2.552-.632 3.762l-1.09 3.145a.5.5 0 0 1-.944-.327l1.089-3.145c.382-1.105.578-2.266.578-3.435a.5.5 0 0 1 .5-.5Z' /%3e%3cpath d='M3.902 4.222a5 5 0 0 1 5.202-2.113.5.5 0 0 1-.208.979 4 4 0 0 0-4.163 1.69.5.5 0 0 1-.831-.556m6.72-.955a.5.5 0 0 1 .705-.052A4.99 4.99 0 0 1 13.059 7v1.5a.5.5 0 1 1-1 0V7a3.99 3.99 0 0 0-1.386-3.028.5.5 0 0 1-.051-.705M3.68 5.842a.5.5 0 0 1 .422.568q-.044.289-.044.59c0 .71-.1 1.417-.298 2.1l-1.14 3.923a.5.5 0 1 1-.96-.279L2.8 8.821A6.5 6.5 0 0 0 3.058 7q0-.375.054-.736a.5.5 0 0 1 .568-.422m8.882 3.66a.5.5 0 0 1 .456.54c-.084 1-.298 1.986-.64 2.934l-.744 2.068a.5.5 0 0 1-.941-.338l.745-2.07a10.5 10.5 0 0 0 .584-2.678.5.5 0 0 1 .54-.456' /%3e%3cpath d='M4.81 1.37A6.5 6.5 0 0 1 14.56 7a.5.5 0 1 1-1 0 5.5 5.5 0 0 0-8.25-4.765.5.5 0 0 1-.5-.865m-.89 1.257a.5.5 0 0 1 .04.706A5.48 5.48 0 0 0 2.56 7a.5.5 0 0 1-1 0c0-1.664.626-3.184 1.655-4.333a.5.5 0 0 1 .706-.04ZM1.915 8.02a.5.5 0 0 1 .346.616l-.779 2.767a.5.5 0 1 1-.962-.27l.778-2.767a.5.5 0 0 1 .617-.346m12.15.481a.5.5 0 0 1 .49.51c-.03 1.499-.161 3.025-.727 4.533l-.07.187a.5.5 0 0 1-.936-.351l.07-.187c.506-1.35.634-2.74.663-4.202a.5.5 0 0 1 .51-.49' /%3e%3c/svg%3e");
  background-position: center;
  background-repeat: no-repeat;
  width: 50px;
  height: 50px;
}

.tools-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%232d2dff' class='bi bi-tools' viewBox='0 0 16 16'%3e%3cpath d='M1 0 0 1l2.2 3.081a1 1 0 0 0 .815.419h.07a1 1 0 0 1 .708.293l2.675 2.675-2.617 2.654A3.003 3.003 0 0 0 0 13a3 3 0 1 0 5.878-.851l2.654-2.617.968.968-.305.914a1 1 0 0 0 .242 1.023l3.27 3.27a.997.997 0 0 0 1.414 0l1.586-1.586a.997.997 0 0 0 0-1.414l-3.27-3.27a1 1 0 0 0-1.023-.242L10.5 9.5l-.96-.96 2.68-2.643A3.005 3.005 0 0 0 16 3q0-.405-.102-.777l-2.14 2.141L12 4l-.364-1.757L13.777.102a3 3 0 0 0-3.675 3.68L7.462 6.46 4.793 3.793a1 1 0 0 1-.293-.707v-.071a1 1 0 0 0-.419-.814zm9.646 10.646a.5.5 0 0 1 .708 0l2.914 2.915a.5.5 0 0 1-.707.707l-2.915-2.914a.5.5 0 0 1 0-.708M3 11l.471.242.529.026.287.445.445.287.026.529L5 13l-.242.471-.026.529-.445.287-.287.445-.529.026L3 15l-.471-.242L2 14.732l-.287-.445L1.268 14l-.026-.529L1 13l.242-.471.026-.529.445-.287.287-.445.529-.026z'/%3e%3c/svg%3e");
  background-position: center;
  background-repeat: no-repeat;
  width: 50px;
  height: 50px;
}

.pen-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%232d2dff' class='bi bi-vector-pen' viewBox='0 0 16 16'%3e%3cpath fill-rule='evenodd' d='M10.646.646a.5.5 0 0 1 .708 0l4 4a.5.5 0 0 1 0 .708l-1.902 1.902-.829 3.313a1.5 1.5 0 0 1-1.024 1.073L1.254 14.746 4.358 4.4A1.5 1.5 0 0 1 5.43 3.377l3.313-.828zm-1.8 2.908-3.173.793a.5.5 0 0 0-.358.342l-2.57 8.565 8.567-2.57a.5.5 0 0 0 .34-.357l.794-3.174-3.6-3.6z'/%3e%3cpath fill-rule='evenodd' d='M2.832 13.228 8 9a1 1 0 1 0-1-1l-4.228 5.168-.026.086z'/%3e%3c/svg%3e");
  background-position: center;
  background-repeat: no-repeat;
  width: 50px;
  height: 50px;
}

.cart-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%232d2dff' class='bi bi-cart' viewBox='0 0 16 16'%3e%3cpath d='M0 1.5A.5.5 0 0 1 .5 1H2a.5.5 0 0 1 .485.379L2.89 3H14.5a.5.5 0 0 1 .491.592l-1.5 8A.5.5 0 0 1 13 12H4a.5.5 0 0 1-.491-.408L2.01 3.607 1.61 2H.5a.5.5 0 0 1-.5-.5M3.102 4l1.313 7h8.17l1.313-7zM5 12a2 2 0 1 0 0 4 2 2 0 0 0 0-4m7 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4m-7 1a1 1 0 1 1 0 2 1 1 0 0 1 0-2m7 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2'/%3e%3c/svg%3e");
  background-position: center;
  background-repeat: no-repeat;
  width: 50px;
  height: 50px;
}

/* Google calendar */

@media screen and (max-width: 640px) {
  .hur54b {
    padding: 10px !important;
  }

  .Xfsokf {
    right: 26px !important;
  }
}

.qxCTlb {}