/* 1. General */

body {
  background-color: #f7f7f7;
}

a[disabled] {
  cursor: default;
}

/* 1.3. Col Container Modifications */

.section-download .col-container > div a .label {
  position: absolute;
  top: -10px;
  left: 0;
  width: 100%;
}

.section-navi .col-container > div > a {
  width: 100%;
  background: #dad6f7;
  border-radius: 10px;
  text-align: center;
  display: inline-block;
  padding: 10px 0;
  font-size: 20px !important;
  color: #383838 !important;
}

.section-navi .col-container > div > a:hover {
  text-decoration: none;
  box-shadow: 0 0 2px 1px rgba(0,0,0,.15);
}

.section-features .card-wrapper h3 ,
.section-values .card-wrapper h3 {
  margin-top: .7em !important;
}

/* 1.5. Section Modal */

.section-modal .content .code-select {
    margin: auto;
    display: block;
    width: 20px;
    height: 20px;
}

.section-modal .content .code-select:hover img {
  transform: scale(1.1);
  filter: brightness(0) !important;
}

/* 2. Section Banner */

.section-banner h2 {
  margin: 33px 0 44px !important;
  font-size: 22px !important;
}

.section-banner h2.learn {
  margin: 43px 0 33px !important;
}

.section-banner .overview-image {
  max-width: 100%;
  border-radius: 3vw;
  box-shadow: 3px 3px 6px 2px rgba(0,0,0,.1);
  border: 1px solid #ccc;
  width: 100%;
  padding-top: 56.25%;
  display: block;
  transition: opacity .5s, transform .5s;
  opacity: .9;
  position: relative;
  overflow: hidden;
}

.section-banner .overview-image:hover {
  opacity: 1;
  transform: scale(1.01);
}

/* ------------------- */
/* 3. Section Download */

.section-download {
  padding: 1px 60px 40px;
}

.section-download.dark-section a:not(.mw-collapsible-text) {
  text-shadow: none;
}

.section-download h2 {
  margin-bottom: 20px !important;
}

.section-download p {
  margin-bottom: 26px !important;
}

@media (max-width: 550px) {
  .section-download .col-container-wrapper {
    display: flex;
    flex-wrap: wrap;
  }

  .section-download .col-container-wrapper > div {
    flex: 1 1 100%;
  }
}

/* --------------- */
/* 4. Section Navi */

.section-navi {
  padding: 40px 0;
}

/* --------------- */
/* 5. Section Apps */

.section-apps {
  padding: 10px 0 40px;
}

.section-apps a {
  text-align: center;
}

.section-apps span {
  color: white;
  width: 100%;
  display: inline-block;
  margin-top: 10px;
}

/* ------------------- */
/* 6. Section Features */

.section-features {
  margin-top: 40px;
}

.section-features .item-row > div p {
  text-align: justify;
}

.section-features .live-mode a.image {
  background-color: black;
}

/* 6.1. Section values */

.section-values .item-row > div p {
  text-align: justify;
}

.section-values .research-project a.image {
  background-color: #b1dcfb;
}

/* ------------------- */
/* 7. Section Upcoming */

.section-upcoming {
  padding: 1px 0 25px;
  margin-top: 40px;
}

.section-upcoming i {
  margin-bottom: 15px;
}

.section-upcoming .lkrg i {
  background-color: black;
}

/* 8. Section Investor */

.section-investor {
  padding: 1px 0 40px;
}

.section-investor h2 {
  margin: 25px 0 30px !important;
}

.section-investor p {
  text-align: center;
  font-size: 19px !important;
  margin-top: 25px !important;
}

.section-investor img.image {
  width: 100%;
  height: auto;
  max-width: 800px;
  display: block;
  margin: auto;
  transition: transform 0.3s; /* Add this line for transition */
}

.section-investor img.image:hover {
  transform: scale(1.05); /* Add this line for hover effect */
}