@import url('header.css');
@import url('hero.css');
@import url('sidebar.css');
@import url('services.css');
@import url('process.css');
@import url('industries.css');
@import url('technologies.css');
@import url('contact.css');
@import url('footer.css');

html {
    font-size: 16px;
}

/* General Styles */
body {
    font-family: Roboto, Arial, sans-serif;
    background: url('/assets/images/main-background.svg');
    margin: 0;
    padding: 0;
    color: #fff;
    background-color: #111;
}

main {
    padding: 0 calc(4vw + 2rem);
    background-size: 100px;
    padding-bottom: 5vh;
    max-width: 1920px;
    margin: 0 auto;
}

section {
    max-width: 100%;
    overflow-x: hidden; /* Contain section elements within the viewport */
}

* {
    box-sizing: border-box; /* Prevent padding and border from affecting width calculations */
}

.section-header {
    font-size: 2.5rem;
    margin-top: 0;
    padding: 2rem 0 0 0;
    position: relative;
    text-transform: uppercase;
    text-align: center;
}

.section-header::after {
    content: "";
    display: block;
    width: 4rem;
    height: 3px;
    background-color: #53A2BE;
    margin: 0.5rem auto;
}

.section-intro {
    max-width: 700px;
    margin: 0 auto 1rem;
    font-size: 1rem;
    color: #bbb;
    line-height: 1.6;
}

.material-symbols-outlined {
  font-variation-settings:
  'FILL' 0,
  'wght' 400,
  'GRAD' 0,
  'opsz' 24
}

.cta {
  display: flex;
  flex-direction: column;
  justify-items: center;
  align-items: center;
}

.cta a {
  min-width: 20%;
  text-align: center;
}

section {
    margin-top: 0;
}

::selection {
    background: #53A2BE;
    color: #404;
}

@media (max-width: 500px) {
    body {
        font-size: 14px;
    }

    .index-main {
        padding: 0 1rem 0 calc(4vw + 2rem);
    }
}


/* Responsive data styles, need to be after the import */
@media (max-width: 966px) {
    .data-tab {
      justify-content: unset;
    }
  }

  /* Responsive desktop dev styles, need to be after the import */
@media (max-width: 1297px) {
    .desktop-tab {
      justify-content: unset;
    }
  }