* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
html {
  font-size: 55.5%;
}

body {
  font-family: "Rubik", sans-serif;
  line-height: 1;
  font-weight: 400;
  color: #555;
  overflow-x: hidden; /* Prevent body overflow */
}

.container {
  max-width: 140rem;
  padding: 0 3.2rem;
  margin: 0 auto;
}

.container-scroll {
  overflow-x: auto;
}

.grid {
  display: grid;
  gap: 5rem;
}

.grid--2-cols {
  grid-template-columns: repeat(2, 1fr);
}

.grid--3-cols {
  grid-template-columns: repeat(3, 1fr);
  min-width: 100%;
}

@media (max-width: 1200px) {
  .grid--3-cols {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .grid--3-cols {
    grid-template-columns: 1fr;
  }
}

::-webkit-scrollbar {
  height: 12px;
}

::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
  background: #555;
}

.grid--4-cols {
  grid-template-columns: repeat(4, 1fr);
}

.grid--center-v {
  align-items: center;
}

/* ### header */

.header {
  max-width: 150rem;
  margin: 0 auto;
  padding: 0 4.6rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9.6rem;
  align-items: center;
  height: 9.6rem;
}

.header-background {
  background-color: #eef6fc;
}

.logo {
  height: 2.4rem;
}

/* Navigation */

.main-nav-list {
  list-style: none;
  display: flex;
  gap: 3.2rem;
  align-items: center;
  white-space: nowrap;
}

.main-nav-link:link,
.main-nav-link:visited {
  display: inline-block;
  text-decoration: none;
  color: #333;
  font-weight: 500;
  font-size: 1.8rem;
  transition: all 0.3s;
}

.main-nav-link:hover,
.main-nav-link:active {
  color: #04356e;
}

.main-nav-link.nav-cta:link,
.nav-cta:visited {
  padding: 1.2rem 2.4rem;
  border-radius: 9px;
  background-color: #14539b;
  color: #fff;
}

.main-nav-link.nav-cta:hover,
.nav-cta:active {
  background-color: #04356e;
}

.hero {
  max-width: 130rem;
  margin: 0 auto;
  padding: 0 3.2rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9.6rem;
  align-items: center;
}

.section-hero {
  background-color: #eef6fc;
  padding: 4.4rem 0 4.4rem 0;
}

.heading-primary,
.heading-secondary,
.heading-tertiary {
  font-weight: 700;
  color: #333;
  letter-spacing: -0.5px;
}

.heading-primary {
  font-size: 5.2rem;
  line-height: 1.05;
  margin-bottom: 3.2rem;
}

.heading-secondary {
  font-size: 4.2rem;
  line-height: 1.2;
  margin-bottom: 5rem;
}

.heading-tertiary {
  font-size: 2.5rem;
  line-height: 1.2;
  margin-bottom: 3rem;
}

.subheading {
  display: block;
  font-size: 1.8rem;
  font-weight: 500;
  color: #04356e;
  text-transform: uppercase;
  margin-bottom: 1.2rem;
  letter-spacing: 0.75px;
}

.hero-description {
  font-size: 2rem;
  line-height: 1.6;
  margin-bottom: 4.8rem;
}

.btn:link,
.btn:visited {
  display: inline-block;
  background-color: #a8d1f2;
  text-decoration: none;
  font-size: 2rem;
  font-weight: 600;
  padding: 1.6rem 3.2rem;
  border-radius: 9px;
  border: none;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.3s;
}

.btn--full:link,
.btn--full:visited {
  background-color: #14539b;
  color: #fff;
}
#eef6fc
.btn--full:hover,
.btn--full:active {
  background-color: #04356e;
}

.btn--outline:link,
.btn--outline:visited {
  background-color: #fff;
  color: #555;
}

.btn--outline:hover,
.btn--outline:active {
  background-color: #e9f4fd;
  box-shadow: inset 0 0 0 3px #fff;
}

.hero-img {
  width: 75%;
  /* border-radius: 5%; */
}

.margin-right-sm {
  margin-right: 1.6rem !important;
}

.valued-info {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  margin-top: 6rem;
}

.valued-imgs {
  display: flex;
}

.valued-text {
  font-size: 1.8rem;
  font-weight: 600;
}

.section-how {
  padding: 5rem 0;
}

.step-img {
  width: 100%;
}

.step-number {
  font-size: 8rem;
  font-weight: 600;
  color: #ddd;
  margin-bottom: 1.2rem;
}

.step-description {
  font-size: 1.6rem;
  line-height: 1.8;
}

.step-img-box {
  display: flex;
  align-items: center;
  justify-content: center;
}

.section-docker {
  padding: 9.6rem 0;
  background: #eef6fc;
}

.list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}

.list-item {
  font-size: 1.8rem;
  display: flex;
  align-items: center;
  gap: 1.6rem;
}

.list-icon {
  width: 3rem;
  height: 3rem;
  color: #14539b;
}

.docker-header {
  text-align: center;
  margin-bottom: 4rem;
}

.docker-name {
  color: #14539b;
  font-weight: 600;
  font-size: 2rem;
  text-transform: uppercase;
  letter-spacing: 0.75;
  margin-bottom: 3rem;
}

.docker-client {
  font-size: 2.5rem;
  font-weight: 600;
  color: #333;
  margin-bottom: 1.6rem;
}

.docker-text {
  font-size: 1.6rem;
  line-height: 1.6;
  color: #6f6f6f;
}

.docker-change {
  text-align: center;
  margin-top: 4rem;
}

.docker-restart {
  text-align: left;
  margin-top: 2rem;
}

.docker {
  background-color: #fff;
  border-radius: 20px;
  padding: 4.8rem;
  width: 95%;
  border: thin solid #14539b;
}

.footer {
  padding: 5.6rem 0;
  background-color: #eef6fc;
  border-top: thin solid #ddd;
}

.footer-heading {
  font-size: 1.8rem;
  font-weight: 500;
  margin-bottom: 1rem;
}

.footer-nav {
  list-style: none;
  display: flex;
  flex-direction: column;
}

.footer-link:link,
.footer-link:visited {
  text-decoration: none;
  font-size: 1.6rem;
  color: #6f6f6f;
  transition: all 0.3s;
}

.footer-link:hover,
.footer-link:active {
  color: #555;
}

.copyright {
  font-size: 1.4rem;
  line-height: 1.6;
  color: #6f6f6f;
  margin-top: 1rem;
}

.logo-col {
  display: flex;
  flex-direction: column;
}

.footer-logo {
  display: block;
  margin-bottom: 3.2rem;
}

.grid--footer {
  grid-template-columns: 1fr 1fr;
}

.nav-col {
  justify-self: center;
}

.sticky .header {
  position: fixed;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 8rem;
  padding-top: 0;
  padding-bottom: 0;
  background-color: rgba(255, 255, 255, 0.97);
  z-index: 999;
  box-shadow: 0 1.2rem 3.2rem rgba(0, 0, 0, 0.03);
}

.sticky .section-hero {
  margin-top: 9.6rem;
}

.login-section {
  /* display: grid; */
  width: 40%;
  max-width: 500px;
  grid-template-rows: 0.5fr 0.5fr;
  padding: 3rem;
  justify-items: center;
  border: thin solid #ddd;
  background-color: #eef6fc;
  box-shadow: 0 1.2rem 3.2rem rgba(0, 0, 0, 0.15);
}

.login-width {
  width: 100%;
}

.login-titile {
  display: flex;
  flex-wrap: nowrap;
  font-size: 4rem;
  border-bottom: thin solid #ddd;
  margin-bottom: 2rem;
}

.login-text {
  font-size: 2rem;
}

.login-button {
  display: flex;
  justify-content: center;
  margin-top: 2rem;
}

.login-main {
  display: flex;
  padding: 2rem;
  justify-content: center;
}

.blue_button {
  border: solid thin #328cca;
  height: 4.2rem;
  font-size: 2rem;
  border-radius: 5px;
  color: #fff;
  background-image: -moz-linear-gradient(top, #3798db, #14539b);
  background-image: -o-linear-gradient(top, #3798db, #14539b);
  background-image: -ms-linear-gradient(top, #3798db, #14539b);
  background-image: -webkit-linear-gradient(top, #3798db, #14539b);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #3798db), color-stop(1, #14539b));
  filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr=#3798db, EndColorStr=#14539b)";
  background-image: linear-gradient(top, #3798db, #14539b);
  width: 90%;
  background-color: #2b96f1;
  -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  cursor: pointer;
}

.blue_button:hover {
  background-image: -moz-linear-gradient(top, #3fadf9, #3493f9);
  background-image: -o-linear-gradient(top, #3fadf9, #3493f9);
  background-image: -webkit-linear-gradient(top, #3fadf9, #3493f9);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #3fadf9), color-stop(1, #3493f9));
  filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr=#3fadf9, EndColorStr=#3493f9)";
  background-image: linear-gradient(top, #3fadf9, #3493f9);
}

.blue_width {
  width: 65%;
  font-size: 1.3rem;
  background-color: #2b96f1;
}

.red_button {
  border: solid thin #cc3232;
  height: 4.2rem;
  font-size: 2rem;
  border-radius: 5px;
  color: #fff;
  background-image: -moz-linear-gradient(top, #db3737, #9b1414);
  background-image: -o-linear-gradient(top, #db3737, #9b1414);
  background-image: -ms-linear-gradient(top, #db3737, #9b1414);
  background-image: -webkit-linear-gradient(top, #db3737, #9b1414);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #db3737), color-stop(1, #9b1414));
  filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr=#db3737, EndColorStr=#9b1414)";
  background-image: linear-gradient(top, #db3737, #9b1414);
  width: 90%;
  background-color: #f12b2b;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  display: block;
  margin: 0 auto;
}

.red_button:hover {
  background-image: -moz-linear-gradient(top, #f93f3f, #f93434);
  background-image: -o-linear-gradient(top, #f93f3f, #f93434);
  background-image: -webkit-linear-gradient(top, #f93f3f, #f93434);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f93f3f), color-stop(1, #f93434));
  filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr=#f93f3f, EndColorStr=#f93434)";
  background-image: linear-gradient(top, #f93f3f, #f93434);
}

.red_width:hover {
  background-image: -moz-linear-gradient(top, #f93f3f, #f96234);
  background-image: -o-linear-gradient(top, #f93f3f, #f96234);
  background-image: -webkit-linear-gradient(top, #f93f3f, #f96234);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f93f3f), color-stop(1, #f96234));
  filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr=#f93f3f, EndColorStr=#f96234)";
  background-image: linear-gradient(top, #f93f3f, #f96234);
}

.red_width {
  width: 65%;
  font-size: 1.3rem;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #db3636), color-stop(1, #d2452c));
}

.field {
  clear: both;
  margin-top: 2rem;
}

.hidden {
  overflow: hidden;
}

.styled-table {
  border-collapse: collapse;
  margin: 2rem;
  margin-left: auto;
  margin-right: auto;
  font-size: 1.5rem;
  font-family: sans-serif;
  width: 95%;
  table-layout: fixed;
  justify-self: center;
  box-shadow: 0 0 2rem rgba(0, 0, 0, 0.15);
}

.styled-table thead tr {
  background-color: #a8d1f2;
  color: #ffffff;
  text-align: left;
}

.styled-table th,
.styled-table td {
  padding: 1.2rem 1.5rem;
  word-wrap: break-word;
  text-align: center;
}

.styled-table tbody tr {
  border-bottom: thin solid #dddddd;
}

.styled-table tbody tr:nth-of-type(even) {
  background-color: #f3f3f3;
}

.styled-table tbody tr:last-of-type {
  border-bottom: 0.2rem solid #a8d1f2;
}

.styled-table tbody tr.active-row {
  font-weight: bold;
  color: #a999e6;
}