@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap");
/* Variables */
/* Mixin */
/* Keyframes */
@keyframes animate-enter22-frames {
  from {
    opacity: 0;
    transform: translate(0, 25px); }
  to {
    opacity: 1;
    transform: translate(0, 0); } }

@keyframes animate-enter21-frames {
  from {
    opacity: 0;
    transform: translate(0, 25px); }
  to {
    opacity: 1;
    transform: translate(0, 0); } }

@keyframes animate-enter20-frames {
  from {
    opacity: 0;
    transform: translate(0, 25px); }
  to {
    opacity: 1;
    transform: translate(0, 0); } }

@keyframes animate-enter33-frames {
  from {
    opacity: 0;
    transform: translate(0, 25px); }
  to {
    opacity: 1;
    transform: translate(0, 0); } }

@keyframes animate-enter10-frames {
  from {
    opacity: 0;
    transform: translate(0, 25px); }
  to {
    opacity: 1;
    transform: translate(0, 0); } }

@keyframes animate-enter9-frames {
  from {
    opacity: 0;
    transform: translate(0, 25px); }
  to {
    opacity: 1;
    transform: translate(0, 0); } }

@keyframes animate-enter7-frames {
  from {
    opacity: 0;
    transform: translate(0, 25px); }
  to {
    opacity: 1;
    transform: translate(0, 0); } }

@keyframes animate-enter42-frames {
  from {
    opacity: 0;
    transform: translate(0, 25px); }
  to {
    opacity: 1;
    transform: translate(0, 0); } }

@keyframes animate-enter40-frames {
  from {
    opacity: 0;
    transform: scale(0.9); }
  to {
    opacity: 1;
    transform: scale(1); } }

@keyframes animate-enter43-frames {
  from {
    opacity: 0;
    transform: scale(0.9); }
  to {
    opacity: 1;
    transform: scale(1); } }

@keyframes animate-enter433-frames {
  from {
    opacity: 0;
    transform: scale(0.9); }
  to {
    opacity: 1;
    transform: scale(1); } }

@keyframes animate-enter19-frames {
  from {
    opacity: 0;
    transform: translate(0, 25px); }
  to {
    opacity: 1;
    transform: translate(0, 0); } }

@keyframes animate-enter35-frames {
  from {
    opacity: 0;
    transform: translate(0, 25px); }
  to {
    opacity: 1;
    transform: translate(0, 0); } }

@keyframes animate-enter36-frames {
  from {
    opacity: 0;
    transform: translate(0, 25px); }
  to {
    opacity: 1;
    transform: translate(0, 0); } }

@keyframes animate-enter34-frames {
  from {
    opacity: 0;
    transform: translate(0, 25px); }
  to {
    opacity: 1;
    transform: translate(0, 0); } }

@keyframes animate-enter25-frames {
  from {
    opacity: 0;
    transform: translate(0, 25px); }
  to {
    opacity: 1;
    transform: translate(0, 0); } }

@keyframes animate-enter37-frames {
  from {
    opacity: 0;
    transform: translate(0, 25px); }
  to {
    opacity: 1;
    transform: translate(0, 0); } }

@keyframes animate-enter38-frames {
  from {
    opacity: 0;
    transform: translate(-25px, 0); }
  to {
    opacity: 1;
    transform: translate(0, 0); } }

@keyframes animate-enter39-frames {
  from {
    opacity: 0;
    transform: translate(25px, 0); }
  to {
    opacity: 1;
    transform: translate(0, 0); } }

@keyframes animate-enter11-frames {
  from {
    opacity: 0;
    transform: translate(0, 25px); }
  to {
    opacity: 1;
    transform: translate(0, 0); } }

@keyframes animate-enter199-frames {
  from {
    opacity: 0;
    transform: translate(25px, 0); }
  to {
    opacity: 1;
    transform: translate(0, 0); } }

@keyframes animate-enter17-frames {
  from {
    opacity: 0;
    transform: translate(25px, 0); }
  to {
    opacity: 1;
    transform: translate(0, 0); } }

@keyframes animate-enter16-frames {
  from {
    opacity: 0;
    transform: translate(25px, 0); }
  to {
    opacity: 1;
    transform: translate(0, 0); } }

@keyframes animate-enter18-frames {
  from {
    opacity: 0;
    transform: translate(25px, 0); }
  to {
    opacity: 1;
    transform: translate(0, 0); } }

@keyframes animate-enter12-frames {
  from {
    opacity: 0;
    transform: translate(25px, 0); }
  to {
    opacity: 1;
    transform: translate(0, 0); } }

@keyframes animate-enter15-frames {
  from {
    opacity: 0;
    transform: translate(25px, 0); }
  to {
    opacity: 1;
    transform: translate(0, 0); } }

@keyframes animate-enter14-frames {
  from {
    opacity: 0;
    transform: translate(25px, 0); }
  to {
    opacity: 1;
    transform: translate(0, 0); } }

@keyframes animate-enter13-frames {
  from {
    opacity: 0;
    transform: translate(25px, 0); }
  to {
    opacity: 1;
    transform: translate(0, 0); } }

@keyframes animate-enter26-frames {
  from {
    opacity: 0;
    transform: translate(0, 25px); }
  to {
    opacity: 1;
    transform: translate(0, 0); } }

@keyframes animate-enter30-frames {
  from {
    opacity: 0;
    transform: translate(0, 25px); }
  to {
    opacity: 1;
    transform: translate(0, 0); } }

@keyframes animate-enter31-frames {
  from {
    opacity: 0;
    transform: translate(0, 25px); }
  to {
    opacity: 1;
    transform: translate(0, 0); } }

@keyframes animate-enter29-frames {
  from {
    opacity: 0;
    transform: translate(0, 25px); }
  to {
    opacity: 1;
    transform: translate(0, 0); } }

@keyframes animate-enter28-frames {
  from {
    opacity: 0;
    transform: translate(0, 25px); }
  to {
    opacity: 1;
    transform: translate(0, 0); } }

@keyframes animate-enter27-frames {
  from {
    opacity: 0;
    transform: translate(0, 25px); }
  to {
    opacity: 1;
    transform: translate(0, 0); } }

@keyframes animate-enter32-frames {
  from {
    opacity: 0;
    transform: translate(0, 25px); }
  to {
    opacity: 1;
    transform: translate(0, 0); } }

@keyframes animate-enter3-frames {
  from {
    opacity: 0;
    transform: translate(0, 25px); }
  to {
    opacity: 1;
    transform: translate(0, 0); } }

@keyframes animate-enter-frames {
  from {
    opacity: 0;
    transform: translate(25px, 0); }
  to {
    opacity: 1;
    transform: translate(0, 0); } }

@keyframes animate-enter1-frames {
  from {
    opacity: 0;
    transform: translate(25px, 0); }
  to {
    opacity: 1;
    transform: translate(0, 0); } }

@keyframes animate-enter2-frames {
  from {
    opacity: 0;
    transform: translate(25px, 0); }
  to {
    opacity: 1;
    transform: translate(0, 0); } }

@keyframes animate-enter23-frames {
  from {
    opacity: 0;
    transform: translate(0, 25px); }
  to {
    opacity: 1;
    transform: translate(0, 0); } }

@keyframes animate-enter24-frames {
  from {
    opacity: 0;
    transform: translate(0, 25px); }
  to {
    opacity: 1;
    transform: translate(0, 0); } }

@keyframes animate-enter44-frames {
  from {
    opacity: 0;
    transform: translate(25px, 0); }
  to {
    opacity: 1;
    transform: translate(0, 0); } }

@keyframes animate-enter45-frames {
  from {
    opacity: 0;
    transform: translate(25px, 0); }
  to {
    opacity: 1;
    transform: translate(0, 0); } }

@keyframes animate-enter46-frames {
  from {
    opacity: 0;
    transform: translate(25px, 0); }
  to {
    opacity: 1;
    transform: translate(0, 0); } }

@keyframes animate-enter47-frames {
  from {
    opacity: 0;
    transform: translate(25px, 0); }
  to {
    opacity: 1;
    transform: translate(0, 0); } }

@keyframes animate-enter48-frames {
  from {
    opacity: 0;
    transform: translate(25px, 0); }
  to {
    opacity: 1;
    transform: translate(0, 0); } }

@keyframes animate-enter49-frames {
  from {
    opacity: 0;
    transform: translate(25px, 0); }
  to {
    opacity: 1;
    transform: translate(0, 0); } }

@keyframes animate-enter50-frames {
  from {
    opacity: 0;
    transform: translate(25px, 0); }
  to {
    opacity: 1;
    transform: translate(0, 0); } }

@keyframes animate-enter51-frames {
  from {
    opacity: 0;
    transform: translate(25px, 0); }
  to {
    opacity: 1;
    transform: translate(0, 0); } }

@keyframes animate-enter52-frames {
  from {
    opacity: 0;
    transform: translate(25px, 0); }
  to {
    opacity: 1;
    transform: translate(0, 0); } }

@keyframes animate-enter53-frames {
  from {
    opacity: 0;
    transform: translate(25px, 0); }
  to {
    opacity: 1;
    transform: translate(0, 0); } }

@keyframes animate-enter54-frames {
  from {
    opacity: 0;
    transform: translate(25px, 0); }
  to {
    opacity: 1;
    transform: translate(0, 0); } }

@keyframes animate-enter55-frames {
  from {
    opacity: 0;
    transform: translate(25px, 0); }
  to {
    opacity: 1;
    transform: translate(0, 0); } }

@keyframes animate-enter56-frames {
  from {
    opacity: 0;
    transform: translate(0, 25px); }
  to {
    opacity: 1;
    transform: translate(0, 0); } }

@keyframes animate-enter57-frames {
  from {
    opacity: 0;
    transform: translate(0, 25px); }
  to {
    opacity: 1;
    transform: translate(0, 0); } }

/* keyframe of vision's animation */
@keyframes animate-Ocean {
  from {
    opacity: 0;
    transform: scale(0.9); }
  to {
    opacity: 1;
    transform: scale(1); } }

@keyframes animate-Forestjungle {
  from {
    opacity: 0;
    transform: scale(0.9); }
  to {
    opacity: 1;
    transform: scale(1); } }

@keyframes animate-Business {
  from {
    opacity: 0;
    transform: scale(0.9); }
  to {
    opacity: 1;
    transform: scale(1); } }

@keyframes animate-Cinema {
  from {
    opacity: 0;
    transform: scale(0.9); }
  to {
    opacity: 1;
    transform: scale(1); } }

@keyframes animate-Resorts {
  from {
    opacity: 0;
    transform: scale(0.9); }
  to {
    opacity: 1;
    transform: scale(1); } }

@keyframes animate-Designers {
  from {
    opacity: 0;
    transform: scale(0.9); }
  to {
    opacity: 1;
    transform: scale(1); } }

@keyframes animate-Financial {
  from {
    opacity: 0;
    transform: scale(0.9); }
  to {
    opacity: 1;
    transform: scale(1); } }

@keyframes animate-PLAYLEARN {
  from {
    opacity: 0;
    transform: scale(0.9); }
  to {
    opacity: 1;
    transform: scale(1); } }

@keyframes animate-Vmall {
  from {
    opacity: 0;
    transform: scale(0.9); }
  to {
    opacity: 1;
    transform: scale(1); } }

@keyframes animate-Creators {
  from {
    opacity: 0;
    transform: scale(0.9); }
  to {
    opacity: 1;
    transform: scale(1); } }

@keyframes animate-Wellbeing {
  from {
    opacity: 0;
    transform: scale(0.9); }
  to {
    opacity: 1;
    transform: scale(1); } }

@keyframes animate-Ecotopia {
  from {
    opacity: 0;
    transform: scale(0.9); }
  to {
    opacity: 1;
    transform: scale(1); } }

@keyframes animate-Humanity {
  from {
    opacity: 0;
    transform: scale(0.9); }
  to {
    opacity: 1;
    transform: scale(1); } }

@keyframes animate-Sport {
  from {
    opacity: 0;
    transform: scale(0.9); }
  to {
    opacity: 1;
    transform: scale(1); } }

/* Class to activate animation */
.animate-enter {
  animation: animate-enter-frames 0.6s ease-in-out 0.3s 1 normal forwards; }

.animate-enter1 {
  animation: animate-enter1-frames 0.6s ease-out 0.6s 1 normal forwards; }

.animate-enter2 {
  animation: animate-enter2-frames 0.6s ease-out 0.9s 1 normal forwards; }

.animate-enter3 {
  animation: animate-enter3-frames 0.6s ease-out 0s 1 normal forwards; }

.animate-enter32 {
  animation: animate-enter32-frames 0.6s ease-in-out 0.3s 1 normal forwards; }

.animate-enter26 {
  animation: animate-enter26-frames 0.6s ease-in-out 1.6s 1 normal forwards; }

.animate-enter27 {
  animation: animate-enter27-frames 0.6s ease-out 0.6s 1 normal forwards; }

.animate-enter28 {
  animation: animate-enter28-frames 0.6s ease-out 0.9s 1 normal forwards; }

.animate-enter29 {
  animation: animate-enter29-frames 0.6s ease-out 1.2s 1 normal forwards; }

.animate-enter30 {
  animation: animate-enter30-frames 0.6s ease-out 1.4s 1 normal forwards; }

.animate-enter31 {
  animation: animate-enter31-frames 0.6s ease-in-out 1.2s 1 normal forwards; }

.animate-enter7 {
  animation: animate-enter7-frames 0.6s ease-out 0s 1 normal forwards; }

.animate-enter9 {
  animation: animate-enter9-frames 0.6s ease-out 0s 1 normal forwards; }

.animate-enter10 {
  animation: animate-enter10-frames 0.6s ease-out 0s 1 normal forwards; }

.animate-enter11 {
  animation: animate-enter11-frames 0.6s ease-out 0s 1 normal forwards; }

.animate-enter12 {
  animation: animate-enter12-frames 0.6s ease-in-out 1.5s 1 normal forwards; }

.animate-enter13 {
  animation: animate-enter13-frames 0.6s ease-out 2.4s 1 normal forwards; }

.animate-enter14 {
  animation: animate-enter14-frames 0.6s ease-out 2.1s 1 normal forwards; }

.animate-enter15 {
  animation: animate-enter15-frames 0.6s ease-out 1.8s 1 normal forwards; }

.animate-enter16 {
  animation: animate-enter16-frames 0.6s ease-out 0.9s 1 normal forwards; }

.animate-enter17 {
  animation: animate-enter17-frames 0.6s ease-out 0.6s 1 normal forwards; }

.animate-enter18 {
  animation: animate-enter18-frames 0.6s ease-in-out 1.2s 1 normal forwards; }

.animate-enter19 {
  animation: animate-enter19-frames 0.6s ease-in-out 0s 1 normal forwards; }

.animate-enter199 {
  animation: animate-enter199-frames 0.3s ease-out 0.3s 1 normal forwards; }

.animate-enter37 {
  animation: animate-enter37-frames 0.3s ease-out 0s 1 normal forwards; }

.animate-enter38 {
  animation: animate-enter38-frames 0.6s ease-in-out 0.3s 1 normal forwards; }

.animate-enter39 {
  animation: animate-enter39-frames 0.6s ease-out 0.3s 1 normal forwards; }

.animate-enter25 {
  animation: animate-enter25-frames 0.6s ease-out 0s 1 normal forwards; }

.animate-enter22 {
  animation: animate-enter22-frames 0.6s ease-in-out 0.1s 1 normal forwards; }

.animate-enter21 {
  animation: animate-enter21-frames 0.6s ease-out 0.1s 1 normal forwards; }

.animate-enter23 {
  animation: animate-enter23-frames 0.6s ease-out 0.1s 1 normal forwards; }

.animate-enter24 {
  animation: animate-enter24-frames 0.6s ease-out 0.1s 1 normal forwards; }

.animate-enter20 {
  animation: animate-enter20-frames 0.6s ease-in-out 0.1s 1 normal forwards; }

.animate-enter33 {
  animation: animate-enter33-frames 0.6s ease-out 0s 1 normal forwards; }

.animate-enter34 {
  animation: animate-enter34-frames 0.6s ease-out 0.1s 1 normal forwards; }

.animate-enter35 {
  animation: animate-enter35-frames 0.6s ease-out 0.1s 1 normal forwards; }

.animate-enter36 {
  animation: animate-enter36-frames 0.6s ease-out 0.3s 1 normal forwards; }

.animate-enter40 {
  animation: animate-enter40-frames 0.6s ease-out 0s 1 normal forwards; }

.animate-enter42 {
  animation: animate-enter42-frames 0.6s ease-out 0s 1 normal forwards; }

.animate-enter43 {
  animation: animate-enter43-frames 0.6s ease-out 0.15s 1 normal forwards; }

.animate-enter433 {
  animation: animate-enter433-frames 0.6s ease-out 0.3s 1 normal forwards; }

.animate-enter44 {
  animation: animate-enter44-frames 0.6s ease-in-out 0s 1 normal forwards; }

.animate-enter45 {
  animation: animate-enter45-frames 0.6s ease-in-out 0.1s 1 normal forwards; }

.animate-enter46 {
  animation: animate-enter46-frames 0.6s ease-in-out 0.2s 1 normal forwards; }

.animate-enter47 {
  animation: animate-enter47-frames 0.6s ease-in-out 0.3s 1 normal forwards; }

.animate-enter48 {
  animation: animate-enter48-frames 0.6s ease-in-out 0.4s 1 normal forwards; }

.animate-enter49 {
  animation: animate-enter49-frames 0.6s ease-in-out 0.5s 1 normal forwards; }

.animate-enter50 {
  animation: animate-enter50-frames 0.6s ease-in-out 0.6s 1 normal forwards; }

.animate-enter51 {
  animation: animate-enter51-frames 0.6s ease-in-out 0.7s 1 normal forwards; }

.animate-enter52 {
  animation: animate-enter52-frames 0.6s ease-in-out 0.8s 1 normal forwards; }

.animate-enter53 {
  animation: animate-enter53-frames 0.6s ease-in-out 0.9s 1 normal forwards; }

.animate-enter54 {
  animation: animate-enter54-frames 0.6s ease-in-out 1s 1 normal forwards; }

.animate-enter55 {
  animation: animate-enter55-frames 0.6s ease-in-out 1.1s 1 normal forwards; }

.animate-enter56 {
  animation: animate-enter56-frames 0.6s ease-in-out 0.3s 1 normal forwards; }

.animate-enter57 {
  animation: animate-enter57-frames 0.6s ease-in-out 0.4s 1 normal forwards; }

/* animation of vision */
.animate-Ocean {
  animation: animate-Ocean 0.5s ease-out 0.1s 1 normal forwards; }

.animate-Forestjungle {
  animation: animate-Forestjungle 0.5s ease-out 0.1s 1 normal forwards; }

.animate-Business {
  animation: animate-Business 0.5s ease-out 0.1s 1 normal forwards; }

.animate-Cinema {
  animation: animate-Cinema 0.5s ease-out 0.1s 1 normal forwards; }

.animate-Resorts {
  animation: animate-Resorts 0.5s ease-out 0.1s 1 normal forwards; }

.animate-Designers {
  animation: animate-Designers 0.5s ease-out 0.1s 1 normal forwards; }

.animate-Financial {
  animation: animate-Financial 0.5s ease-out 0.1s 1 normal forwards; }

.animate-Vmall {
  animation: animate-Vmall 0.5s ease-out 0.1s 1 normal forwards; }

.animate-PLAYLEARN {
  animation: animate-PLAYLEARN 0.5s ease-out 0.1s 1 normal forwards; }

.animate-Creators {
  animation: animate-Creators 0.5s ease-out 0.1s 1 normal forwards; }

.animate-Wellbeing {
  animation: animate-Wellbeing 0.5s ease-out 0.1s 1 normal forwards; }

.animate-Ecotopia {
  animation: animate-Ecotopia 0.5s ease-out 0.1s 1 normal forwards; }

.animate-Humanity {
  animation: animate-Humanity 0.5s ease-out 0.1s 1 normal forwards; }

.animate-Sport {
  animation: animate-Sport 0.5s ease-out 0.1s 1 normal forwards; }

/* CSS */
* {
  box-sizing: border-box;
  font-family: "Montserrat", sans-serif; }

html {
  scroll-behavior: smooth;
  transform: translate(); }

p {
  margin-bottom: 0 !important; }

.container-fluid {
  overflow-x: hidden; }

.group-btn {
  width: calc(60px + 177px + 24px);
  display: flex;
  justify-content: space-between;
  margin-top: 60px; }

.group-btn .btn-more {
  height: 60px;
  width: 177px;
  left: 219px;
  top: 680px;
  border-radius: 30px;
  border: none;
  padding: 8px 30px;
  background-color: #fff;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  text-transform: uppercase;
  transition: box-shadow 0.4s; }

.group-btn .btn-more:hover {
  transition: all cubic-bezier(0.4, 0, 1, 1) 0.5s;
  background: #cc0000;
  color: white; }

.group-btn .btn-play {
  height: 60px;
  width: 60px;
  left: 135px;
  top: 680px;
  border-radius: 50%;
  border: none;
  background-color: #fff;
  transition: box-shadow 0.4s; }

.group-btn .btn-play:hover {
  transition: all cubic-bezier(0.4, 0, 1, 1) 0.5s;
  background: #cc0000;
  color: white; }

.thread {
  color: white;
  font-size: 40px;
  font-weight: 500;
  line-height: 50px;
  letter-spacing: 0.05em;
  margin-bottom: 15px; }

.text-default {
  font-size: 18px;
  font-weight: 400;
  color: white;
  line-height: 28px; }

.skip-link {
  background: #bcbab9;
  height: 30px;
  position: absolute;
  padding: 8px;
  border-radius: 20px;
  transform: translateY(-100%);
  transition: transform 0.3s;
  color: black;
  font-size: 14px;
  font-weight: 400;
  display: flex;
  align-items: center;
  border: 1px solid #0f0f0f; }

.skip-link:hover {
  text-decoration: none;
  color: black; }

#skip-to-search {
  left: 15%; }

.skip-link:focus {
  transform: translateY(0%);
  z-index: 1000; }

/* Header */
header {
  z-index: 1050; }

header .navbar {
  position: absolute;
  width: calc(100% - 30px);
  height: 66px;
  z-index: 100;
  background: linear-gradient(180deg, #000000 0%, rgba(0, 0, 0, 0) 100%); }

header .navbar .navbar-brand {
  margin-left: calc(60px - 1rem);
  margin-right: calc(30px - 0.5rem); }

header .navbar .navbar-brand > img {
  height: 24px;
  width: 120px; }

header .navbar .navbar-collapse .navbar-nav {
  gap: 30px;
  width: 795px;
  justify-content: space-between; }

header .navbar .navbar-collapse .navbar-nav .nav-item .nav-link {
  font-size: 14px;
  font-weight: 400;
  font-size: 13px;
  color: white;
  line-height: 20px;
  text-transform: uppercase;
  padding-left: 0;
  padding-right: 0;
  transition: all ease-out 0.4s;
  border-bottom: 3px solid transparent; }

header .navbar .navbar-collapse .navbar-nav .nav-item .nav-link:hover {
  color: #cc0000;
  border-bottom: 3px solid #cc0000; }

header .navbar .navbar-collapse .button {
  height: 36px;
  width: 115px;
  border-radius: 30px;
  padding: 6px 30px; }

header .navbar .navbar-collapse .navbar-suffixes {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 24px;
  margin-right: calc(60px - 1rem); }

header .navbar .navbar-collapse .navbar-suffixes .search-container {
  position: relative;
  display: inline-block;
  height: 36px;
  width: 36px;
  vertical-align: bottom; }

header .navbar .navbar-collapse .navbar-suffixes .search-container form .searchbutton {
  position: absolute;
  font-size: 22px;
  width: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center; }

header .navbar .navbar-collapse .navbar-suffixes .search-container form .search:focus + .searchbutton {
  transition-duration: 0.4s;
  -moz-transition-duration: 0.4s;
  -webkit-transition-duration: 0.4s;
  -o-transition-duration: 0.4s;
  color: black; }

header .navbar .navbar-collapse .navbar-suffixes .search-container form .search:focus + .searchbutton::before {
  content: url("Components/search-black.svg");
  position: absolute;
  top: 55px;
  height: 24px;
  width: 24px;
  z-index: 10; }

header .navbar .navbar-collapse .navbar-suffixes .search-container form .search:focus + .searchbutton::after {
  content: url("Components/Trailing Icon.svg");
  position: absolute;
  left: 313px;
  top: 55px;
  height: 24px;
  width: 24px;
  float: right;
  z-index: 10; }

header .navbar .navbar-collapse .navbar-suffixes .search-container form .search {
  position: absolute;
  left: 49px;
  /* Button width-1px (Not 50px/100% because that will sometimes show a 1px line between the search box and button) */
  background-color: white;
  outline: none;
  border: none;
  border-radius: 30px;
  padding: 0;
  width: 0;
  height: 100%;
  z-index: 10;
  transition-duration: 0.4s;
  -moz-transition-duration: 0.4s;
  -webkit-transition-duration: 0.4s;
  -o-transition-duration: 0.4s; }

header .navbar .navbar-collapse .navbar-suffixes .search-container form .search:focus {
  width: 343px;
  /* Bar width+1px */ }

header .navbar .navbar-collapse .navbar-suffixes .search-container form .expandright {
  top: 50px;
  left: auto; }

header .navbar .navbar-collapse .navbar-suffixes .search-container form .expandright:focus {
  padding: 0 40px; }

header .navbar .navbar-collapse .navbar-suffixes .btn-signin input {
  background: #cc0000;
  border: none;
  color: white;
  height: 36px;
  width: auto;
  border-radius: 30px;
  padding: 6px 30px; }

header .modal {
  background: url("Components/BG login.png");
  background-size: cover;
  background-position: center; }

header .modal .modal-lg {
  max-height: 558px;
  max-width: 585px; }

header .modal .modal-lg .modal-content {
  padding: 60px;
  border-radius: 16px;
  border: none;
  width: 585px;
  height: 585px; }

header .modal .modal-lg .modal-content .modal-body {
  padding: 0; }

header .modal .modal-lg .modal-content .modal-body form {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  height: 100%; }

header .modal .modal-lg .modal-content .modal-body form button {
  height: 48px;
  width: 465px;
  border-radius: 24px;
  padding: 13px 24px;
  background-color: #cc0000;
  font-size: 14px;
  font-weight: 500;
  line-height: 22px;
  color: white; }

header .modal .modal-lg .modal-content .modal-body form .form-group {
  height: 48px;
  display: flex;
  align-items: center; }

header .modal .modal-lg .modal-content .modal-body form .form-group input {
  height: 48px;
  width: 465px;
  border-radius: 24px;
  padding: 12px 16px 12px calc(16px + 24px + 12px); }

header .modal .modal-lg .modal-content .modal-body form .form-group::before {
  content: url("Components/lock.png");
  width: 24px;
  height: 24px;
  position: absolute;
  left: 16px; }

header .modal .modal-lg .modal-content .modal-body form .form-group:nth-of-type(2)::before {
  content: url("Components/mail.png"); }

header .modal .modal-lg .modal-content .modal-body form .form-group:nth-of-type(1)::before {
  content: url("Components/user.png"); }

header .modal .modal-lg .modal-content .modal-body form .form-check {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 12px;
  padding: 0; }

header .modal .modal-lg .modal-content .modal-body form .form-check input[type="checkbox"],
header .modal .modal-lg .modal-content .modal-body form .form-check input[type="radio"] {
  height: 24px;
  width: 24px;
  margin: 0; }

header .modal .modal-lg .modal-content .modal-body form .form-check .form-check-label {
  font-size: 14px;
  font-weight: 500;
  line-height: 22px;
  color: #616161;
  margin-left: calc(24px + 12px); }

header .modal .modal-lg .modal-content .modal-body form .form-check .form-check-label span {
  color: #cc0000; }

/* Main */
main {
  width: 100%; }

main #section-1 {
  height: 800px;
  width: calc(100%); }

main #section-1 .mix-blend {
  width: calc(100% - 30px);
  height: inherit;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.324698) 8.62%, rgba(0, 0, 0, 0) 24.37%, rgba(0, 0, 0, 0.64) 100%);
  mix-blend-mode: normal;
  position: absolute; }

main #section-1 #video-1 {
  width: calc(100% - 30px);
  height: inherit;
  object-fit: cover;
  position: absolute;
  mix-blend-mode: multiply; }

main #section-1 .box-1 {
  position: relative;
  top: 540px;
  padding-left: 135px;
  width: calc(100%);
  height: fit-content; }

main #section-1 .box-1 .thread {
  text-transform: uppercase; }

main #section-1 .box-1 .text-default {
  width: 560px;
  text-shadow: 0 0 4px black; }

main #section-2 {
  background-image: url("Background/BG Unlock a world of ur own.png");
  height: 800px;
  width: 100%;
  background-size: cover;
  display: flex;
  align-items: center; }

main #section-2 > div {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-evenly; }

main #section-2 > div .box-left {
  height: 362px;
  width: 470px;
  position: relative;
  left: 79px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: 0;
  transform: translate(0, 25px); }

main #section-2 > div .box-left .text-default {
  width: 460px; }

main #section-2 > div .box-left .group-btn {
  margin-top: 32px; }

main #section-2 > div .frame-video-right {
  background: url("Components/frame tabet.png");
  background-position: center;
  background-repeat: no-repeat;
  height: 435px;
  width: 601px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  position: unset; }

main #section-2 > div .frame-video-right #video-2 {
  width: 561px;
  height: 395px;
  border-radius: 10px;
  object-fit: cover; }

main #section-3 {
  height: 1040px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center; }

main #section-3 .mix-blend {
  background-color: #001440;
  mix-blend-mode: normal;
  height: 1040px;
  width: calc(100% - 30px);
  position: absolute; }

main #section-3 .bg-mix-blend {
  background-color: transparent;
  position: absolute;
  mix-blend-mode: multiply;
  height: 1040px;
  width: calc(100% - 30px);
  object-fit: cover;
  object-position: center; }

main #section-3 .frame-video-3 {
  display: flex;
  flex-direction: column;
  align-items: center; }

main #section-3 .frame-video-3 #video-3 {
  height: 660px;
  width: 1170px;
  top: 1680px;
  position: absolute;
  border-radius: 0px;
  z-index: 1;
  object-fit: cover; }

main #section-3 .frame-video-3 .box-3 {
  z-index: 2;
  height: 176px;
  width: 970px;
  top: 2104px;
  position: absolute;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  opacity: 0;
  transform: translate(0, 25px); }

main #section-3 .frame-video-3 .box-3 .text-default {
  width: 969.87px; }

main #section-3 .table-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: absolute;
  top: 2410px;
  row-gap: 30px;
  width: 1440px;
  opacity: 0;
  transform: translate(0, 25px); }

main #section-3 .table-content .table-row {
  display: flex;
  width: 1170px;
  margin: 0; }

main #section-3 .table-content .table-row .table-cell {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  text-transform: uppercase;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  height: 60px;
  border-left: 2px solid #fff; }

main #section-3 .table-content .table-row .table-cell:hover {
  transition: all ease-in-out 0.4s;
  border-left: 2px solid #cc0000;
  color: #cc0000; }

main #section-4 {
  background-image: url("Background/BG Avatars hyper realistic and cuting edge.png");
  background-position: center;
  background-size: cover;
  height: 800px;
  width: 100%;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center; }

main #section-4 > div {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  width: 100%; }

main #section-4 > div .frame-video-left {
  background: url("Components/frame tabet.png");
  background-position: center;
  background-repeat: no-repeat;
  height: 435px;
  width: 601px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px; }

main #section-4 > div .frame-video-left .video-on-right {
  width: 561px;
  height: 396px;
  border-radius: 10px;
  object-fit: cover; }

main #section-4 > div .frame-video-left > img {
  width: 562px;
  height: 396px;
  position: absolute;
  object-fit: cover;
  border-radius: 10px; }

main #section-4 > div .box-right {
  width: 470px;
  position: relative;
  display: block;
  opacity: 0;
  transform: translate(0, 25px); }

main #section-4 > div .box-right .text-default {
  width: 422px; }

main #section-5 {
  background-image: url("Background/BG V-AR Marketplace.png");
  height: 800px;
  width: 100%;
  background-size: cover;
  display: flex;
  align-items: center; }

main #section-5 > div {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  width: 100%; }

main #section-5 > div .box-left {
  height: 362px;
  width: 470px;
  position: relative;
  left: 79px;
  height: unset;
  width: 470px;
  transform: translate(0, 25px);
  opacity: 0; }

main #section-5 > div .box-left .thread {
  width: 534px; }

main #section-5 > div .frame-video-right {
  background: url("Components/frame tabet.png");
  background-position: center;
  background-repeat: no-repeat;
  height: 435px;
  width: 601px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px; }

main #section-5 > div .frame-video-right > img {
  object-fit: cover;
  object-position: top;
  width: 560.07px;
  height: 395.34px;
  border-radius: 12px; }

main #section-6 {
  background-image: url("Background/BG Tourism and real estate solution.png");
  height: 800px;
  width: 100%;
  background-size: cover;
  display: flex;
  align-items: center; }

main #section-6 > div {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  width: 100%; }

main #section-6 > div .frame-video-left {
  background: url("Components/frame tabet.png");
  background-position: center;
  background-repeat: no-repeat;
  height: 435px;
  width: 601px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px; }

main #section-6 > div .frame-video-left .video-on-right {
  width: 561px;
  height: 395px;
  border-radius: 10px;
  object-fit: cover; }

main #section-6 > div .box-right {
  width: 470px;
  position: relative;
  display: block;
  opacity: 0;
  transform: translate(0, 25px);
  height: unset;
  width: 470px; }

main #section-6 > div .box-right .text-box {
  display: flex;
  flex-direction: column;
  gap: 15px;
  color: #fff; }

main #section-6 > div .box-right .text-box > h5 {
  font-size: 20px;
  font-weight: 600; }

main #section-6 > div .box-right .text-box > p {
  font-size: 18px;
  font-weight: 400;
  line-height: 28px; }

main #section-6 > div .box-right .thread {
  width: 569px; }

main #section-7 {
  background-image: url("Background/BG Augmented AR-VR business.png");
  height: 800px;
  width: 100%;
  background-size: cover;
  display: flex;
  align-items: center; }

main #section-7 > div {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  width: 100%; }

main #section-7 > div .frame-video-right {
  background: url("Components/frame tabet.png");
  background-position: center;
  background-repeat: no-repeat;
  height: 435px;
  width: 601px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  height: 434.2762145996094px;
  width: 600px; }

main #section-7 > div .frame-video-right > img {
  width: 560.07px;
  height: 395.34px;
  border-radius: 12px;
  object-fit: cover;
  object-position: center; }

main #section-7 > div .box-left {
  height: 362px;
  width: 470px;
  position: relative;
  left: 79px;
  opacity: 0;
  transform: translate(0, 25px);
  height: unset;
  width: 470px; }

main #section-7 > div .box-left .text-default {
  width: 458px; }

main #section-8 {
  height: 800px;
  width: 100%;
  display: none; }

main #section-8 #video-08 {
  width: inherit;
  height: inherit;
  object-fit: cover; }

main #section-8 .box-left {
  height: 362px;
  width: 470px;
  position: relative;
  left: 79px;
  transform: translate(-25px, 0);
  opacity: 0;
  height: 453px;
  width: 470px;
  left: 135px;
  top: 6015px; }

main #section-9 {
  height: 800px;
  width: 100%;
  background-size: cover;
  display: flex;
  align-items: center; }

main #section-9 .mix-blend {
  background-color: #001440;
  mix-blend-mode: normal;
  height: 800px;
  width: calc(100% - 30px);
  position: absolute; }

main #section-9 .bg-mix-blend {
  background-color: transparent;
  position: absolute;
  mix-blend-mode: multiply;
  height: 800px;
  width: calc(100% - 30px); }

main #section-9 .carousel {
  display: flex;
  justify-content: center;
  align-items: center;
  width: inherit;
  gap: 40px; }

main #section-9 .carousel .carousel-inner {
  width: calc(370px + 469px + 130px);
  overflow-y: visible;
  overflow-x: hidden; }

main #section-9 .carousel .carousel-inner .carousel-item .row {
  width: 100%; }

main #section-9 .carousel .carousel-inner .carousel-item .row .col-md-6 {
  height: 480px;
  display: flex;
  align-items: center; }

main #section-9 .carousel .carousel-inner .carousel-item .row .col-md-6 .representative-video {
  width: 370px;
  height: 100%;
  object-fit: cover; }

main #section-9 .carousel .carousel-inner .carousel-item .row .col-md-6 .carousel-caption {
  width: 469px;
  position: unset;
  opacity: 0;
  padding: 0; }

main #section-9 .carousel .carousel-inner .active {
  display: flex;
  align-items: center; }

main #section-9 .carousel .carousel-inner .active .carousel-image {
  height: 480px;
  width: 370px;
  border-radius: 0px; }

main #section-9 .carousel .carousel-inner .active .carousel-caption {
  position: unset;
  animation: animate-enter7-frames 0.6s ease-out 0s 1 normal forwards;
  opacity: 0;
  transform: translate(0, 25px); }

main #section-9 .carousel .carousel-inner .active .carousel-caption h6 {
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
  text-align: left;
  margin-bottom: calc(30px);
  margin-top: 26px;
  width: 477px; }

main #section-9 .carousel .carousel-inner .active .carousel-caption p {
  font-size: 18px;
  font-weight: 600;
  text-align: left;
  line-height: 24px; }

main #section-9 .carousel .carousel-inner .active .carousel-caption p:last-child {
  font-size: 14px;
  font-weight: 400; }

main #section-9 .carousel .carousel-inner .active .carousel-caption::before {
  content: "“";
  font-family: Impact;
  font-size: 96px;
  font-weight: 900;
  line-height: 28px;
  letter-spacing: 0em;
  text-align: left;
  position: absolute;
  left: 0px;
  top: 0px; }

main #section-9 .carousel .carousel-control-prev,
main #section-9 .carousel .carousel-control-next {
  height: 60px;
  width: 60px;
  position: unset;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  background-size: cover; }

main #section-10 {
  background-image: url("Background/BG Architecture Vision.png");
  height: 1618px;
  width: 100%;
  background-size: cover;
  display: none;
  flex-direction: column;
  align-items: center; }

main #section-10 .box-middle {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  height: 149px;
  top: 120px;
  opacity: 0;
  transform: translate(0, 25px); }

main #section-10 .box-middle .thread {
  color: black;
  width: 970px;
  text-transform: uppercase; }

main #section-10 .box-middle .text-default {
  color: black;
  width: 770px; }

main #section-10 .outer-spacex {
  position: relative;
  top: calc(120px + 167px);
  height: 307px;
  width: 1170px;
  display: flex;
  align-items: center;
  gap: 91px;
  opacity: 0;
  transform: scale(0.9); }

main #section-10 .outer-spacex > img {
  height: 307px;
  width: 710px;
  left: 0px;
  top: 0px;
  border-radius: 0px; }

main #section-10 .outer-spacex .outer-spacex-box {
  width: 369px;
  height: 224px;
  display: flex;
  flex-direction: column;
  gap: 8px; }

main #section-10 .outer-spacex .outer-spacex-box h6 {
  font-weight: 500;
  font-size: 32px;
  line-height: 48px; }

main #section-10 .outer-spacex .outer-spacex-box p {
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
  color: #616161; }

main #section-10 .vision {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(100%);
  height: 770px;
  position: relative;
  top: calc(288px - 121px); }

main #section-10 .vision > img {
  opacity: 0;
  transform: scale(0.9);
  height: 770px;
  width: 770px;
  position: absolute;
  top: 60px; }

main #section-10 .vision .mark-location {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 5px;
  opacity: 0;
  transform: scale(0.9); }

main #section-10 .vision .mark-location .location {
  height: 44px !important;
  border-radius: 8px;
  padding: 10px;
  text-align: center;
  background-color: #fff;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.16);
  transition: all ease-in 0.4s; }

main #section-10 .vision .mark-location .location > p {
  font-size: 14px;
  font-weight: 400;
  font-size: 12px;
  line-height: 18px; }

main #section-10 .vision .mark-location .location .location-title {
  font-size: 18px;
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  text-transform: uppercase;
  margin: 0; }

main #section-10 .vision .mark-location:hover .location {
  background: #cc0000;
  color: white; }

main #section-10 .vision .mark-location:hover .location > img {
  src: url("Images/u_location-point_activate.png"); }

main #section-10 .vision .mark-location:hover .location-info {
  -webkit-transform: scale(1);
  transform: scale(1);
  opacity: 1; }

main #section-10 .vision .mark-location .location-info {
  height: auto;
  width: 270px;
  border-radius: 0px;
  transition: all ease 0.7s;
  opacity: 0;
  transform: scale(0);
  z-index: 100;
  box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.16); }

main #section-10 .vision .mark-location .location-info .location-detail-box {
  z-index: 1;
  background-color: #fff;
  width: 270px; }

main #section-10 .vision .mark-location .location-info .location-detail-box > img {
  width: inherit;
  height: 180px; }

main #section-10 .vision .mark-location .location-info .location-detail-box .location-detail {
  padding: 30px 30px 42px 30px;
  text-align: center; }

main #section-10 .vision .mark-location .location-info .location-detail-box .location-detail img {
  position: absolute;
  top: 76px;
  left: -12px; }

main #section-10 .vision .mark-location .location-info .location-detail-box .location-detail h6 {
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
  text-transform: uppercase; }

main #section-10 .vision .mark-location .location-info .location-detail-box .location-detail p {
  font-size: 14px;
  font-weight: 400;
  font-size: 12px;
  line-height: 18px;
  text-align: justify; }

main #section-10 .vision #Ocean {
  top: calc(-123px - 44px);
  left: calc(887px + 770px - 552px);
  width: 97px;
  height: 73px; }

main #section-10 .vision #Ocean .location {
  height: 44px;
  width: 97px; }

main #section-10 .vision #Ocean .location-info {
  position: absolute;
  left: calc(61px + 97px);
  top: calc(-135px); }

main #section-10 .vision #Forestjungle {
  top: -123px;
  left: 527px;
  width: 172px;
  height: 77px; }

main #section-10 .vision #Forestjungle .location {
  height: 44px;
  width: 172px; }

main #section-10 .vision #Forestjungle .location-info {
  position: absolute;
  left: calc(-270px - 51px);
  top: calc(-185px); }

main #section-10 .vision #Business {
  top: -139px;
  left: 568px;
  width: 170px;
  height: 95px; }

main #section-10 .vision #Business .location {
  height: 62px;
  width: 170px; }

main #section-10 .vision #Business .location-info {
  position: absolute;
  left: calc(249px + 170px);
  top: calc(-145px); }

main #section-10 .vision #Cinema {
  left: 280px;
  top: 0px;
  width: 109px;
  height: 95px; }

main #section-10 .vision #Cinema .location {
  height: 62px;
  width: inherit; }

main #section-10 .vision #Cinema .location-info {
  position: absolute;
  left: calc(-270px - 154px);
  top: calc(-305px); }

main #section-10 .vision #Financial {
  left: 256px;
  top: 47px;
  width: 171px;
  height: 95px; }

main #section-10 .vision #Financial .location {
  height: 62px;
  width: 171px; }

main #section-10 .vision #Financial .location-info {
  position: absolute;
  left: calc(15px + 171px);
  top: calc(-375px); }

main #section-10 .vision #Resorts {
  left: 425px;
  top: -37px;
  width: 117px;
  height: 95px; }

main #section-10 .vision #Resorts .location {
  height: 62px;
  width: 117px; }

main #section-10 .vision #Resorts .location-info {
  position: absolute;
  left: calc(150px + 117px);
  top: calc(-255px); }

main #section-10 .vision #Designers {
  left: 45px;
  top: 79px;
  width: 137px;
  height: 95px; }

main #section-10 .vision #Designers .location {
  height: 62px;
  width: inherit; }

main #section-10 .vision #Designers .location-info {
  position: absolute;
  left: calc(-270px - 134px);
  top: calc(-395px); }

main #section-10 .vision #Vmall {
  left: -283px;
  top: 203px;
  width: 99px;
  height: 95px; }

main #section-10 .vision #Vmall .location {
  height: 62px;
  width: inherit; }

main #section-10 .vision #Vmall .location-info {
  position: absolute;
  left: calc(-121px - 270px);
  top: calc(-75px); }

main #section-10 .vision #Creators {
  left: -201px;
  top: 324px;
  width: 130px;
  height: 95px; }

main #section-10 .vision #Creators .location {
  height: 62px;
  width: inherit; }

main #section-10 .vision #Creators .location-info {
  position: absolute;
  left: calc(105px + 130px);
  top: calc(-205px); }

main #section-10 .vision #Wellbeing {
  left: -470px;
  top: 211px;
  width: 142px;
  height: 77px; }

main #section-10 .vision #Wellbeing .location {
  height: 44px;
  width: inherit; }

main #section-10 .vision #Wellbeing .location-info {
  position: absolute;
  left: calc(-270px - 285px);
  top: calc(-135px); }

main #section-10 .vision #Ecotopia {
  left: -388px;
  top: 236px;
  width: 128px;
  height: 95px; }

main #section-10 .vision #Ecotopia .location {
  height: 62px;
  width: inherit; }

main #section-10 .vision #Ecotopia .location-info {
  position: absolute;
  left: calc(17px + 128px);
  top: calc(-95px); }

main #section-10 .vision #Humanity {
  left: -805px;
  top: 329px;
  width: fit-content;
  height: 95px; }

main #section-10 .vision #Humanity .location {
  height: 62px;
  width: inherit; }

main #section-10 .vision #Humanity .location-info {
  position: absolute;
  left: calc(-270px - 227px);
  top: calc(-165px); }

main #section-10 .vision #Sport {
  left: -804px;
  top: 392px;
  width: 97px;
  height: 95px; }

main #section-10 .vision #Sport .location {
  height: 62px;
  width: 97px; }

main #section-10 .vision #Sport .location-info {
  position: absolute;
  left: calc(231px + 97px);
  top: calc(-225px); }

main #section-10 .vision #PLAYLEARN {
  width: 140px;
  height: 95px;
  top: 158px;
  left: -79px; }

main #section-10 .vision #PLAYLEARN .location {
  width: inherit;
  height: 62px; }

main #section-10 .vision #PLAYLEARN .location-info {
  position: absolute;
  left: calc(124px + 140px);
  top: calc(-45px); }

main #section-10 .slide-small-screen {
  display: none; }

main #section-11 {
  height: 991px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center; }

main #section-11 .mix-blend {
  background-color: #001440;
  mix-blend-mode: normal;
  height: 991px;
  width: calc(100% - 30px);
  position: absolute; }

main #section-11 .bg-mix-blend {
  object-fit: cover;
  object-position: center;
  position: absolute;
  mix-blend-mode: multiply;
  height: 991px;
  width: calc(100% - 30px); }

main #section-11 .box-middle {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  top: 120px;
  opacity: 0;
  transform: translate(0, 25px); }

main #section-11 .box-middle .thread {
  width: 577px; }

main #section-11 .box-middle .text-default {
  width: 570px; }

main #section-11 .content-container {
  display: flex;
  flex-direction: column;
  row-gap: 30px;
  margin-top: calc(301px - 121px); }

main #section-11 .content-container .content-row {
  width: calc(270px * 4 + 30px * 3);
  height: auto;
  justify-content: center;
  align-items: center;
  row-gap: 24px;
  margin: 0; }

main #section-11 .content-container .content-row .content-item {
  height: 270px;
  width: 270px;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  padding: 0;
  opacity: 0;
  transform: translate(0, 25px); }

main #section-11 .content-container .content-row .content-item img {
  height: auto;
  width: 80px;
  z-index: 1; }

main #section-11 .content-container .content-row .content-item p {
  color: white;
  font-size: 18px;
  font-weight: 600;
  line-height: 28px;
  z-index: 1;
  height: auto;
  width: 210px;
  text-align: center; }

main #section-11 .content-container .content-row .content-item:before {
  content: "";
  background: #fff;
  height: 270px;
  width: 270px;
  opacity: 0.08;
  position: absolute; }

main #section-12 {
  background-image: url("Background/BG about freedomx _ Metaverse.png");
  height: 1673px;
  width: 100%;
  background-size: cover;
  background-position: center;
  display: flex;
  flex-direction: column;
  align-items: center; }

main #section-12 .about-freedomx {
  position: relative;
  height: 674px;
  width: 100%;
  display: flex;
  justify-content: space-evenly;
  gap: 100px;
  align-items: center; }

main #section-12 .about-freedomx .box-left {
  height: 362px;
  width: 470px;
  position: relative;
  left: 79px;
  transform: translate(0, 25px);
  opacity: 0;
  height: 353px;
  width: 470px;
  display: flex;
  flex-direction: column;
  justify-content: center; }

main #section-12 .about-freedomx .box-left .thread,
main #section-12 .about-freedomx .box-left .text-default {
  color: black; }

main #section-12 .about-freedomx .box-left .thread {
  text-transform: uppercase; }

main #section-12 .about-freedomx .frame-video-right {
  background: url("Components/frame tabet.png");
  background-position: center;
  background-repeat: no-repeat;
  height: 435px;
  width: 601px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  height: 434.2762145996094px;
  width: 600px;
  position: unset; }

main #section-12 .about-freedomx .frame-video-right > video {
  object-fit: cover;
  height: 395px;
  width: 560px;
  border-radius: 12px; }

main #section-12 .row-group-circle {
  position: relative;
  height: 999px;
  width: 100%;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center; }

main #section-12 .row-group-circle .box-middle {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  transform: translate(0, 25px);
  opacity: 0;
  top: 40px;
  height: 49px; }

main #section-12 .row-group-circle .box-middle .thread {
  color: black;
  height: 49px;
  width: 749px; }

main #section-12 .row-group-circle .group-circle {
  width: 970px;
  display: flex;
  flex-direction: column;
  align-items: center; }

main #section-12 .row-group-circle .group-circle #bg-linked-nodes {
  position: relative;
  left: -133px;
  top: -385px;
  width: 570px;
  height: 570px;
  z-index: 0; }

main #section-12 .row-group-circle .group-circle #bg-rounded {
  position: relative;
  left: -107px;
  top: 177.45px;
  width: 570px;
  height: 570px;
  z-index: -1; }

main #section-12 .row-group-circle .group-circle #bg-group-circle {
  position: absolute;
  top: 225.45px;
  width: 970px;
  height: 570px;
  z-index: 0; }

main #section-12 .row-group-circle .group-circle .node {
  width: 220px;
  height: 220px;
  border-radius: 50%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0px 0px 20px 0px rgba(0, 20, 64, 0.2); }

main #section-12 .row-group-circle .group-circle .node .inner-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #fff;
  width: 200px;
  height: 200px;
  border-radius: 50%; }

main #section-12 .row-group-circle .group-circle .node .inner-node > img {
  width: 70px;
  height: 70px;
  border-radius: 50%; }

main #section-12 .row-group-circle .group-circle .node .inner-node .node-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px; }

main #section-12 .row-group-circle .group-circle .node .inner-node .node-box p {
  font-size: 20px;
  font-weight: 600;
  line-height: 30px;
  text-align: center; }

main #section-12 .row-group-circle .group-circle #real {
  background: linear-gradient(135deg, #330099 0%, #cc0000 100.31%);
  top: -938px;
  left: -345px;
  box-shadow: 0px 0px 20px 0px rgba(0, 20, 64, 0.2); }

main #section-12 .row-group-circle .group-circle #real .inner-node .node-box {
  width: 123px; }

main #section-12 .row-group-circle .group-circle #virtual {
  background: linear-gradient(45deg, #330099 0%, #cc0000 100%);
  top: -860px;
  left: -345px;
  box-shadow: 0px 0px 20px 0px rgba(0, 20, 64, 0.2); }

main #section-12 .row-group-circle .group-circle #virtual .inner-node .node-box {
  width: 137px; }

main #section-12 .row-group-circle .group-circle #physical-digital {
  background-color: #fff;
  border-style: inset;
  border: 20px solid #cc0000;
  width: 190px;
  height: 190px;
  top: -1210px;
  left: -129px; }

main #section-12 .row-group-circle .group-circle #physical-digital .node-box {
  width: 86px;
  text-align: center; }

main #section-12 .row-group-circle .group-circle #real-avatar::after,
main #section-12 .row-group-circle .group-circle #virtual-avatar::after {
  content: "";
  background: linear-gradient(45deg, #330099 0%, #cc0000 100%);
  opacity: 0.3;
  position: absolute;
  width: inherit;
  height: inherit;
  border-radius: 50%;
  z-index: 0; }

main #section-12 .row-group-circle .group-circle #real-avatar {
  width: 200px;
  height: 200px;
  top: -1662px;
  left: -200px; }

main #section-12 .row-group-circle .group-circle #real-avatar .node-box {
  background-color: #fff;
  border-radius: 50%;
  box-shadow: 0px 0px 10px 0px rgba(0, 20, 64, 0.2);
  width: 160px;
  height: 160px;
  padding: 10px;
  z-index: 1; }

main #section-12 .row-group-circle .group-circle #real-avatar .node-box > img {
  width: 140px;
  height: 140px;
  object-fit: cover;
  object-position: top;
  border-radius: 50%;
  box-shadow: 0px 0px 10px 0px rgba(0, 20, 64, 0.2); }

main #section-12 .row-group-circle .group-circle #virtual-avatar {
  width: 200px;
  height: 200px;
  top: -1366px;
  left: -200px; }

main #section-12 .row-group-circle .group-circle #virtual-avatar .node-box {
  background-color: #fff;
  border-radius: 50%;
  box-shadow: 0px 0px 10px 0px rgba(0, 20, 64, 0.2);
  width: 160px;
  height: 160px;
  padding: 10px;
  z-index: 1; }

main #section-12 .row-group-circle .group-circle #virtual-avatar .node-box > video {
  width: 140px;
  height: 140px;
  object-fit: cover;
  object-position: top;
  border-radius: 50%;
  box-shadow: 0px 0px 10px 0px rgba(0, 20, 64, 0.2); }

main #section-12 .row-group-circle .group-circle .goggle {
  position: relative;
  top: -1840px;
  left: 244px;
  width: 485px;
  height: 265px;
  display: flex;
  flex-direction: column;
  align-items: center; }

main #section-12 .row-group-circle .group-circle .goggle > img {
  position: absolute;
  width: inherit;
  height: inherit; }

main #section-12 .row-group-circle .group-circle .goggle > div {
  z-index: 1;
  display: flex;
  align-items: center;
  position: relative;
  top: -15px; }

main #section-12 .row-group-circle .group-circle .goggle > div .inner-goggle {
  width: 230px;
  height: 177px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px; }

main #section-12 .row-group-circle .group-circle .goggle > div .inner-goggle > img {
  width: 70px; }

main #section-12 .row-group-circle .group-circle .goggle > div .inner-goggle .goggle-box {
  width: 250px;
  text-align: center; }

main #section-12 .row-group-circle .group-circle .goggle > div .inner-goggle .goggle-box h6 {
  font-size: 20px;
  font-weight: 600;
  line-height: 30px;
  margin: 0; }

main #section-12 .row-group-circle .group-circle .goggle > div .inner-goggle .goggle-box p {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px; }

main #section-12 .row-group-circle .group-circle .goggle > h1 {
  font-weight: 600;
  font-size: 32px;
  line-height: 54px;
  margin: 0;
  z-index: 1;
  position: relative;
  top: -50px; }

main #section-12 .row-group-circle .group-circle .goggle > h4 {
  font-weight: 600;
  font-size: 20px;
  line-height: 30px;
  margin: 0;
  z-index: 1;
  position: relative;
  top: calc(79px - 15px - 15px); }

main #section-12 .row-tag {
  width: 1000px;
  position: relative;
  top: 0px;
  opacity: 0;
  transform: translate(0, 25px); }

main #section-12 .row-tag .col-md-4 {
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center; }

main #section-12 .row-tag .col-md-4 h6 {
  font-size: 20px;
  font-weight: 700;
  line-height: 30px;
  letter-spacing: 0em; }

main #section-12 .row-tag .col-md-4 p {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0em; }

main #section-12 .row-tag .col-md-4:nth-child(3n + 2)::before, main #section-12 .row-tag .col-md-4:nth-child(3n + 3)::before {
  content: "";
  height: 57px;
  width: 1px;
  left: 0px;
  background: #0000004c;
  position: absolute; }

main #section-12 .row-img {
  display: flex;
  justify-content: center;
  gap: 16px;
  overflow-x: hidden;
  height: fit-content;
  width: 1440px;
  position: relative;
  top: 0px; }

main #section-12 .row-img .photo {
  height: 349px;
  width: 265.21px; }

main #section-13 {
  height: 900px;
  width: 100%; }

main #section-13 .mix-blend {
  background-color: #001440;
  mix-blend-mode: normal;
  height: 900px;
  width: calc(100% - 30px);
  position: absolute;
  z-index: 1; }

main #section-13 .bg-mix-blend {
  object-fit: cover;
  object-position: center;
  position: absolute;
  mix-blend-mode: multiply;
  height: 900px;
  width: calc(100% - 30px);
  z-index: 1; }

main #section-13 .box-middle {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  top: 120px;
  transform: translate(0, 25px);
  opacity: 0;
  z-index: 1; }

main #section-13 .box-middle .thread {
  height: 50px;
  width: auto;
  text-transform: uppercase; }

main #section-13 .group-elements {
  z-index: 10;
  display: flex;
  justify-content: center;
  position: relative;
  top: calc(200px - 60px); }

main #section-13 .group-elements .touch-model {
  background-color: transparent;
  height: 550px;
  width: 550px;
  mix-blend-mode: normal; }

main #section-13 .group-elements .touch-model #model2 {
  display: none; }

main #section-13 .group-elements .elements-on-left ul,
main #section-13 .group-elements .elements-on-right ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 0; }

main #section-13 .group-elements .elements-on-left ul li,
main #section-13 .group-elements .elements-on-right ul li {
  color: white;
  display: flex;
  align-items: center;
  gap: 20px;
  height: 60px;
  width: 310px;
  font-size: 18px;
  font-weight: 600;
  line-height: 28px; }

main #section-13 .group-elements .elements-on-left {
  transform: translate(-25px, 0);
  opacity: 0; }

main #section-13 .group-elements .elements-on-left li::before {
  content: url("Components/Group 232.png"); }

main #section-13 .group-elements .elements-on-right {
  transform: translate(25px, 0);
  opacity: 0; }

main #section-13 .group-elements .elements-on-right li {
  text-align: end;
  justify-content: flex-end; }

main #section-13 .group-elements .elements-on-right li::after {
  content: url("Components/Group 232.png"); }

main #section-14 {
  background: #fff;
  height: 1160px;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between; }

main #section-14 .bg-mix-blend {
  background-image: url("Background/CSE.jpeg");
  background-position: center;
  background-size: cover;
  height: 478px;
  width: calc(100% - 30px);
  position: absolute; }

main #section-14 .mix-blend {
  background: linear-gradient(180deg, rgba(11, 11, 41, 0.83) -18.72%, rgba(139, 139, 143, 0.62) 38.11%, rgba(211, 211, 211, 0.78) 62.69%, #fafafa 93.7%);
  background-position: center;
  background-size: cover;
  height: 480px;
  width: calc(100% - 30px);
  position: absolute; }

main #section-14 > table {
  display: none;
  height: 454px;
  width: 905px;
  left: calc(535px + 100% - 1440px);
  top: 0;
  background: url("Components/image 11.png");
  background-size: cover;
  background-position: center;
  position: relative; }

main #section-14 > table tbody {
  height: inherit; }

main #section-14 > table tbody tr {
  border-bottom: 1px solid white; }

main #section-14 > table tbody tr td {
  border-left: 1px solid white; }

main #section-14 .box-left {
  z-index: 10;
  height: 362px;
  width: 470px;
  position: relative;
  left: 79px;
  top: 173px;
  left: 67px;
  flex-direction: column;
  align-items: center;
  text-align: center;
  height: 177px;
  width: 100%;
  transform: translate(0, 25px);
  opacity: 0; }

main #section-14 .box-left .thread {
  width: 653px;
  color: #000000;
  text-align: center;
  text-transform: uppercase; }

main #section-14 .box-left .text-default {
  width: 653px;
  text-align: center;
  color: #000000;
  font-size: 16px;
  line-height: 24px; }

main #section-14 .slide-small-screen {
  display: flex;
  justify-content: center; }

main #section-14 .slide-small-screen .row {
  height: auto;
  position: relative;
  bottom: 60px;
  width: 1170px;
  margin: 0;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: center;
  z-index: 1;
  transform: translate(0, 25px);
  opacity: 0; }

main #section-14 .slide-small-screen .row .col-md-4 {
  background: #ffffff;
  height: 259px;
  max-width: 300px;
  border-radius: 0px;
  padding: 24px 15px;
  display: flex;
  justify-content: center;
  box-shadow: 1px 1px 4px 0px #00000026;
  transition: all 1s ease-in; }

main #section-14 .slide-small-screen .row .col-md-4 p {
  font-size: 20px;
  font-weight: 600;
  font-size: 18px;
  line-height: 28px;
  text-align: center;
  padding-top: 15px; }

main #section-14 .slide-small-screen .row .col-md-4 p > a {
  display: none;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px; }

main #section-14 .slide-small-screen .row .col-md-4::before {
  content: "";
  width: 40px;
  height: 3px;
  background-color: #cc0000;
  position: absolute;
  transition: width ease-out 0.6s; }

main #section-14 .slide-small-screen .row .col-md-4:hover {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.12) 0%, rgba(255, 255, 255, 0) 172.5%), linear-gradient(0deg, #ffffff, #ffffff); }

main #section-14 .slide-small-screen .row .col-md-4:hover::before {
  width: 200px; }

main #section-15 {
  display: none;
  background-image: url("Background/BG Our team.png");
  height: calc(2951px - 1006px - 661px);
  width: 100%;
  background-size: cover;
  display: flex;
  flex-direction: column;
  align-items: center; }

main #section-15 .box-middle {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  top: 120px;
  opacity: 0;
  transform: translate(0, 25px); }

main #section-15 .box-middle .thread {
  color: black;
  text-align: center; }

main #section-15 .box-middle .text-default {
  color: black;
  line-height: 28px; }

main #section-15 .slide-small-screen {
  position: relative;
  top: calc(300px - 121px); }

main #section-15 .slide-small-screen .row {
  justify-content: space-between;
  width: 1170px; }

main #section-15 .slide-small-screen .row .team-member {
  width: 270px;
  height: 482px;
  padding: 0;
  display: flex;
  justify-content: center; }

main #section-15 .slide-small-screen .row .team-member .card {
  border: none;
  width: inherit;
  height: inherit;
  background: none;
  opacity: 0;
  transform: translate(25px, 0); }

main #section-15 .slide-small-screen .row .team-member .card .card-img-top {
  background-color: #c4c4c4;
  mix-blend-mode: normal;
  width: 100%;
  height: 270px;
  object-fit: cover;
  object-position: top; }

main #section-15 .slide-small-screen .row .team-member .card .card-body {
  text-align: center;
  transition: all ease 0.6s;
  display: flex;
  flex-direction: column;
  align-items: center; }

main #section-15 .slide-small-screen .row .team-member .card .card-body h4 {
  font-size: 20px;
  font-weight: 600;
  line-height: 24px; }

main #section-15 .slide-small-screen .row .team-member .card .card-body p {
  font-size: 14px;
  font-weight: 400;
  line-height: 24px; }

main #section-15 .slide-small-screen .row .team-member .card .card-body h6 {
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  opacity: 0.6; }

main #section-15 .slide-small-screen .row .team-member .card .card-body button {
  display: none;
  height: 40px;
  width: 146px;
  border-radius: 20px;
  padding: 9px 20px;
  color: white;
  background-color: #cc0000;
  border: none;
  font-size: 14px;
  font-weight: 500;
  line-height: 22px;
  transition: all ease 1s;
  position: absolute;
  bottom: 16px; }

main #section-15 .slide-small-screen .row .team-member .card:hover .card-body {
  background-color: white; }

main #section-15 .slide-small-screen .row .team-member .card:hover .card-body button {
  display: inline-block; }

main #section-15 .slide-small-screen .row .team-member .modal[aria-modal="true"] .modal-xl {
  max-height: 600px;
  max-width: 1170px; }

main #section-15 .slide-small-screen .row .team-member .modal[aria-modal="true"] .modal-xl .modal-content {
  height: 600px;
  width: 1170px;
  border: none;
  padding: 60px;
  display: flex;
  flex-direction: row;
  column-gap: 48px; }

main #section-15 .slide-small-screen .row .team-member .modal[aria-modal="true"] .modal-xl .modal-content .content-left {
  display: flex;
  flex-direction: column;
  row-gap: 30px; }

main #section-15 .slide-small-screen .row .team-member .modal[aria-modal="true"] .modal-xl .modal-content .content-left > img {
  width: 300px;
  height: 300px;
  object-fit: cover;
  object-position: top; }

main #section-15 .slide-small-screen .row .team-member .modal[aria-modal="true"] .modal-xl .modal-content .content-left .member-brief {
  display: flex;
  flex-direction: column;
  text-align: left; }

main #section-15 .slide-small-screen .row .team-member .modal[aria-modal="true"] .modal-xl .modal-content .content-left .member-brief .member-name {
  font-size: 32px;
  font-weight: 600;
  line-height: 48px;
  letter-spacing: 0px; }

main #section-15 .slide-small-screen .row .team-member .modal[aria-modal="true"] .modal-xl .modal-content .content-left .member-brief .member-position {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  line-height: 24px;
  letter-spacing: 0em; }

main #section-15 .slide-small-screen .row .team-member .modal[aria-modal="true"] .modal-xl .modal-content .content-left .member-brief .member-country {
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  color: rgba(0, 0, 0, 0.6); }

main #section-15 .slide-small-screen .row .team-member .modal[aria-modal="true"] .modal-xl .modal-content .content-left .member-network {
  display: flex;
  justify-content: left;
  gap: 24px;
  width: 100%;
  height: 24px; }

main #section-15 .slide-small-screen .row .team-member .modal[aria-modal="true"] .modal-xl .modal-content .content-left .member-network i {
  color: #757575;
  font-size: 24px; }

main #section-15 .slide-small-screen .row .team-member .modal[aria-modal="true"] .modal-xl .modal-content .content-right {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 30px; }

main #section-15 .slide-small-screen .row .team-member .modal[aria-modal="true"] .modal-xl .modal-content .content-right .close {
  position: absolute;
  height: 44px;
  width: 44px;
  right: 16px;
  top: 16px;
  border-radius: 24px;
  padding: 10px;
  box-shadow: 0px 0px 20px 0px rgba(0, 20, 64, 0.2); }

main #section-15 .slide-small-screen .row .team-member .modal[aria-modal="true"] .modal-xl .modal-content .content-right .member-biography {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden; }

main #section-15 .slide-small-screen .row .team-member .modal[aria-modal="true"] .modal-xl .modal-content .content-right .member-biography p {
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
  letter-spacing: 0em;
  color: #000000; }

main #section-16 {
  background: white;
  height: 661px;
  width: 100%;
  background-size: cover;
  display: none;
  flex-direction: column;
  align-items: center; }

main #section-16 .box-middle {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  height: 50px;
  width: 970px;
  position: relative;
  top: 120px; }

main #section-16 .box-middle .thread {
  color: black;
  height: 50px;
  text-transform: uppercase;
  margin: 0; }

main #section-16 > .row {
  width: 1170px;
  align-items: center;
  row-gap: 35px;
  position: relative;
  top: calc(230px - 50px); }

main #section-16 > .row .col-md-3 {
  display: flex;
  justify-content: center;
  opacity: 0;
  transform: translate(25px, 0); }

main #section-17 {
  height: 960px;
  width: 100%;
  background-size: cover;
  display: flex;
  flex-direction: column;
  align-items: center; }

main #section-17 .mix-blend {
  background: #001440;
  mix-blend-mode: normal;
  opacity: 4%;
  height: 960px;
  width: calc(100% - 30px);
  border-radius: 0px;
  position: absolute; }

main #section-17 .box-middle {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  top: 120px;
  gap: 14px;
  opacity: 0;
  transform: translate(0, 25px); }

main #section-17 .box-middle .thread {
  color: black;
  text-transform: uppercase; }

main #section-17 .box-middle .text-default {
  color: #616161; }

main #section-17 .box-middle > button {
  visibility: visible;
  border: none;
  height: 24px;
  width: 134px;
  border-radius: 0px;
  background-color: transparent;
  display: flex;
  justify-content: space-between;
  align-items: center; }

main #section-17 .box-middle > button a {
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  text-decoration: none;
  color: #000000; }

main #section-17 .slide-small-screen {
  position: relative;
  top: calc(312px - 132px); }

main #section-17 .slide-small-screen > .row {
  width: 1170px; }

main #section-17 .slide-small-screen > .row .col-md-4 {
  opacity: 0;
  transform: translate(25px, 0); }

main #section-17 .slide-small-screen > .row .col-md-4 > a {
  display: flex;
  flex-direction: column;
  gap: 30px;
  text-decoration: none; }

main #section-17 .slide-small-screen > .row .col-md-4 > a > img {
  width: inherit;
  height: 250px;
  object-fit: cover;
  object-position: center; }

main #section-17 .slide-small-screen > .row .col-md-4 > a .article {
  display: flex;
  flex-direction: column;
  gap: 15px; }

main #section-17 .slide-small-screen > .row .col-md-4 > a .article .article-type {
  color: #cc0000;
  line-height: 22px;
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase; }

main #section-17 .slide-small-screen > .row .col-md-4 > a .article .article-title {
  height: 60px;
  color: black;
  font-size: 20px;
  font-weight: 600;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; }

main #section-17 .slide-small-screen > .row .col-md-4 > a .article .article-brief {
  height: 72px;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #616161;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; }

main #section-17 .slide-small-screen > .row .col-md-4 > a .article-author {
  display: flex;
  align-items: center;
  gap: 15px; }

main #section-17 .slide-small-screen > .row .col-md-4 > a .article-author > img {
  height: 40px;
  width: 40px;
  border-radius: 50%;
  object-fit: cover;
  object-position: top; }

main #section-17 .slide-small-screen > .row .col-md-4 > a .article-author .author-info > div {
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  color: #101828; }

main #section-17 .slide-small-screen > .row .col-md-4 > a .article-author .author-info p {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: rgba(0, 0, 0, 0.6); }

/* Footer */
footer {
  width: 100%; }

footer .upper-footer {
  height: 430px;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 24px; }

footer .upper-footer #footer-video {
  width: calc(100% - 30px);
  height: inherit;
  object-fit: cover;
  position: absolute; }

footer .upper-footer .mix-blend {
  background-color: rgba(0, 20, 64, 0.6);
  position: absolute;
  height: inherit;
  width: calc(100% - 30px); }

footer .upper-footer .row-logo {
  height: fit-content;
  padding-left: 15px; }

footer .upper-footer .row-network {
  height: fit-content;
  padding-left: 15px; }

footer .upper-footer .row-network .social-network {
  width: 333px;
  display: flex;
  justify-content: space-between; }

footer .upper-footer .row-network .social-network i {
  font-size: 24px; }

footer .upper-footer > .row {
  width: 1170px;
  z-index: 1; }

footer .upper-footer > .row > img {
  height: 40px;
  width: 200px;
  border-radius: 0px; }

footer .upper-footer > .row .col-md-3 {
  display: flex;
  justify-content: center;
  flex-direction: column;
  gap: 30px; }

footer .upper-footer > .row .col-md-3 .contact-info {
  color: white; }

footer .upper-footer > .row .col-md-3 .contact-info .contact-mail a {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  text-decoration: none;
  color: white; }

footer .upper-footer > .row .col-md-3 .contact-type {
  color: white;
  font-size: 18px;
  font-weight: 600;
  line-height: 28px; }

footer .upper-footer > .row .col-md-6 {
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 30px;
  padding-left: 49px; }

footer .upper-footer > .row .col-md-6 .contact-type {
  color: white;
  font-size: 18px;
  font-weight: 600;
  line-height: 24px; }

footer .upper-footer > .row .col-md-6 p {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  line-height: 24px; }

footer .upper-footer > .row .col-md-6 .form-group {
  width: 100%;
  margin: 0;
  height: 48px; }

footer .upper-footer > .row .col-md-6 .form-group .form-control {
  height: 48px;
  width: 521px;
  border-radius: 24px;
  padding: 12px 24px;
  position: absolute;
  bottom: 0; }

footer .upper-footer > .row .col-md-6 .form-group label[for="email"] {
  text-transform: uppercase;
  height: 40px;
  width: 144px;
  position: relative;
  left: calc(100% - 144px - 4px);
  top: calc((48px - 40px) / 2);
  border-radius: 30px;
  padding: 8px 30px;
  background: #cc0000;
  margin: 0;
  z-index: 1; }

footer .lower-footer {
  background: #001440;
  height: 100px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center; }

footer .lower-footer #back-to-top {
  position: relative;
  left: calc(50% - 60px);
  top: -50px;
  width: 68px;
  height: 68px; }

footer .lower-footer .row {
  width: 1170px;
  color: #fff;
  margin: 0;
  position: absolute; }

footer .lower-footer .row .col-md-3,
footer .lower-footer .row .col-md-4,
footer .lower-footer .row .col-md-5 {
  display: flex;
  align-items: center;
  justify-content: center; }

footer .lower-footer .row .font-brief {
  font-size: 14px;
  font-weight: 400;
  line-height: 24px; }

footer .lower-footer .row ul {
  list-style: none;
  display: flex;
  padding: 0%;
  margin: 0;
  gap: 30px; }

footer .lower-footer .row ul li {
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  opacity: 0.6; }

/* Responsive mobile breakpoint*/
@media only screen and (max-width: 415px) {
  .thread {
    font-size: 32px;
    line-height: 48px;
    margin-bottom: 5px; }
  .text-default {
    font-size: 16px;
    line-height: 24px; }
  body {
    width: 100% !important;
    max-width: 100% !important;
    padding-right: 0 !important;
    padding-left: 0 !important; }
  body header {
    width: 100% !important;
    background: #001440;
    align-items: unset;
    transition: all ease 1.5s; }
  body header .navbar {
    width: 100%;
    padding: 0.5rem 0;
    background: unset;
    justify-content: center; }
  body header .navbar .navbar-brand {
    width: fit-content;
    display: flex;
    justify-content: center;
    margin: 0;
    position: absolute; }
  body header .navbar .navbar-toggler {
    z-index: 1;
    position: absolute;
    right: 0;
    border: none; }
  body header .navbar .navbar-toggler .navbar-toggler-icon {
    background-image: url(Components/menu.png); }
  body header .navbar .navbar-collapse {
    width: 100%;
    position: relative;
    top: calc(66px - 0.5rem); }
  body header .navbar .navbar-collapse .navbar-nav {
    width: 100%;
    position: relative;
    gap: 24.6px;
    align-items: center; }
  body header .navbar .navbar-collapse .navbar-nav .nav-item {
    width: fit-content; }
  body header .navbar .navbar-collapse .navbar-nav .nav-item .nav-link {
    text-align: center; }
  body header .navbar .navbar-collapse .navbar-suffixes {
    margin: 0;
    position: relative;
    top: 53px;
    flex-wrap: wrap;
    display: flex;
    justify-content: center; }
  body header .navbar .navbar-collapse .navbar-suffixes .btn-signin {
    width: 100%;
    display: flex;
    justify-content: center; }
  body header .navbar .navbar-collapse .navbar-suffixes .search-container .expandright {
    left: calc(100% - 366px / 2);
    right: unset;
    top: 60px; }
  body header .navbar .navbar-collapse .navbar-suffixes .search-container .search:focus {
    width: 366px;
    left: calc(100% - 366px / 2);
    top: 60px; }
  body header .navbar .navbar-collapse .navbar-suffixes .search-container .search:focus + .searchbutton::before {
    top: 66px;
    left: -137px; }
  body header .navbar .navbar-collapse .navbar-suffixes .search-container .search:focus + .searchbutton::after {
    top: 66px;
    left: 189px; }
  body header .modal .modal-dialog {
    max-width: 100%;
    justify-content: center; }
  body header .modal .modal-dialog .modal-content {
    height: 548px;
    width: 366px;
    border-radius: 16px;
    padding: 24px; }
  body header .modal .modal-dialog .modal-content .modal-body {
    width: 100%;
    height: 100%; }
  body header .modal .modal-dialog .modal-content .modal-body form .form-group {
    width: 100%; }
  body header .modal .modal-dialog .modal-content .modal-body form .form-group input {
    width: 100%; }
  body header .modal .modal-dialog .modal-content .modal-body form button {
    width: 100%; }
  body main {
    max-width: 414px;
    width: 100%; }
  body main #section-1 {
    width: 100%; }
  body main #section-1 #video-1 {
    width: 100%; }
  body main #section-1 .mix-blend {
    width: 100%; }
  body main #section-1 .box-1 {
    display: flex;
    justify-content: center;
    padding-left: 0; }
  body main #section-1 .box-1 .text-default {
    height: 224px;
    width: calc(88%);
    left: 24px;
    top: 592px; }
  body main #section-2 {
    height: 836px; }
  body main #section-2 > div {
    flex-direction: column;
    gap: 60px; }
  body main #section-2 > div .box-left {
    width: 88%;
    left: 0; }
  body main #section-2 > div .box-left .text-default {
    width: 100%; }
  body main #section-2 > div .frame-video-right {
    height: 265px;
    width: 366px;
    padding: 11px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat; }
  body main #section-2 > div .frame-video-right #video-2 {
    height: 240.63218688964844px;
    width: 100%;
    border-radius: 6px; }
  body main #section-3 {
    height: 1207px; }
  body main #section-3 .mix-blend {
    width: 100%;
    height: inherit; }
  body main #section-3 .bg-mix-blend {
    width: 100%;
    height: inherit; }
  body main #section-3 .frame-video-3 #video-3 {
    width: 366px;
    height: 230px;
    position: relative;
    top: 60px; }
  body main #section-3 .frame-video-3 .box-3 {
    width: 366px;
    height: 180px;
    text-align: left;
    position: relative;
    top: calc(60px + 30px); }
  body main #section-3 .frame-video-3 .box-3 .text-default {
    width: 366px; }
  body main #section-3 .table-content {
    width: 100%; }
  body main #section-3 .table-content .table-row {
    width: 366px;
    row-gap: 30px;
    justify-content: space-between; }
  body main #section-3 .table-content .table-row .table-cell {
    width: 173px !important;
    padding: 0px 15px;
    text-align: left;
    justify-content: unset; }
  body main #section-4 {
    height: 864px; }
  body main #section-4 > div {
    flex-direction: column-reverse;
    row-gap: 60px; }
  body main #section-4 > div .box-right {
    width: 366px; }
  body main #section-4 > div .box-right .text-default {
    width: inherit; }
  body main #section-4 > div .frame-video-left {
    width: 366px;
    height: 265px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 12px; }
  body main #section-4 > div .frame-video-left .video-on-right {
    width: 100%;
    height: 100%;
    border-radius: 6px; }
  body main #section-5 {
    height: 864px; }
  body main #section-5 > div {
    flex-direction: column;
    row-gap: 60px; }
  body main #section-5 > div .box-left {
    left: 0;
    width: 366px; }
  body main #section-5 > div .box-left .thread {
    width: 100%; }
  body main #section-5 > div .box-left .text-default {
    width: 100%; }
  body main #section-5 > div .frame-video-right {
    height: 265px;
    width: 366px;
    padding: 11px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat; }
  body main #section-5 > div .frame-video-right > img {
    width: 100%;
    height: 100%; }
  body main #section-6 {
    height: 1060px; }
  body main #section-6 > div {
    width: 100%;
    flex-direction: column-reverse;
    row-gap: 60px; }
  body main #section-6 > div .frame-video-left {
    height: 265px;
    width: 366px;
    padding: 11px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat; }
  body main #section-6 > div .frame-video-left .video-on-right {
    width: 100%;
    height: 100%; }
  body main #section-6 > div .box-right {
    width: 366px;
    row-gap: 60px; }
  body main #section-6 > div .box-right .thread {
    width: 100%; }
  body main #section-6 > div .box-right .text-box {
    gap: 5px; }
  body main #section-6 > div .box-right .text-box h5 {
    margin-bottom: 0; }
  body main #section-7 {
    height: 844px; }
  body main #section-7 > div {
    flex-direction: column;
    row-gap: 60px;
    width: 100%; }
  body main #section-7 > div .box-left {
    left: 0;
    width: 366px; }
  body main #section-7 > div .box-left .thread {
    width: 100%; }
  body main #section-7 > div .box-left .text-default {
    width: 100%; }
  body main #section-7 > div .frame-video-right {
    height: 265px;
    width: 366px;
    padding: 11px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat; }
  body main #section-7 > div .frame-video-right > img {
    width: 100%;
    height: 100%; }
  body main #section-9 {
    height: 951px; }
  body main #section-9 .bg-mix-blend {
    object-fit: cover;
    object-position: center;
    width: 100%;
    height: inherit; }
  body main #section-9 .mix-blend {
    width: 100%;
    height: inherit; }
  body main #section-9 .carousel {
    height: inherit; }
  body main #section-9 .carousel > button {
    display: none; }
  body main #section-9 .carousel .carousel-inner {
    width: 366px;
    height: inherit;
    overflow-y: hidden;
    overflow-x: auto;
    display: flex;
    flex-direction: row;
    gap: 380px; }
  body main #section-9 .carousel .carousel-inner .carousel-item {
    width: 271px;
    display: flex;
    align-items: center; }
  body main #section-9 .carousel .carousel-inner .carousel-item .row {
    flex-direction: column;
    margin-left: 0;
    margin-right: 0;
    row-gap: 30px; }
  body main #section-9 .carousel .carousel-inner .carousel-item .row .col-12 {
    overflow-y: scroll;
    width: 366px !important; }
  body main #section-9 .carousel .carousel-inner .carousel-item .row .col-12 .representative-video {
    height: 355px;
    width: 100%;
    object-fit: cover;
    object-position: center; }
  body main #section-9 .carousel .carousel-inner .carousel-item .row .col-12 .carousel-caption {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 255px;
    padding-top: 40px; }
  body main #section-9 .carousel .carousel-inner .carousel-item .row .col-12 .carousel-caption::before {
    top: unset; }
  body main #section-9 .carousel .carousel-inner .carousel-item .row .col-12 .carousel-caption h6 {
    width: inherit; }
  body main #section-10 {
    height: 1754px; }
  body main #section-10 .box-middle {
    width: 366px;
    top: 60px;
    text-align: left;
    height: fit-content; }
  body main #section-10 .box-middle .thread {
    width: inherit; }
  body main #section-10 .box-middle .text-default {
    width: inherit; }
  body main #section-10 .vision {
    top: 60px; }
  body main #section-10 .vision > img {
    width: 366px;
    height: 366px; }
  body main #section-10 .vision .mark-location {
    width: fit-content !important;
    height: fit-content !important; }
  body main #section-10 .vision .mark-location > img {
    width: 13.31px;
    height: 13.31px; }
  body main #section-10 .vision .mark-location .location {
    width: fit-content !important;
    height: 18.61px !important;
    padding: 3.8px;
    border-radius: 3.8px; }
  body main #section-10 .vision .mark-location .location .location-title {
    font-size: 8px;
    line-height: 11px;
    letter-spacing: 0px; }
  body main #section-10 .vision .mark-location:hover .location-info {
    transform: scale(0);
    opacity: 0; }
  body main #section-10 .vision #Ocean {
    top: calc(-262px + 61px);
    left: 505px; }
  body main #section-10 .vision #Forestjungle {
    left: 232px;
    top: calc(-227px + 61px); }
  body main #section-10 .vision #Cinema {
    left: 141px;
    top: calc(-176.51px + 61px); }
  body main #section-10 .vision #Designers {
    top: calc(-137px + 61px);
    left: 22px; }
  body main #section-10 .vision #Business {
    left: 263.83000000000004px;
    top: calc(-244px + 61px); }
  body main #section-10 .vision #Resorts {
    left: 208px;
    top: calc(-194px + 61px); }
  body main #section-10 .vision #Financial {
    left: 138px;
    top: calc(-159px + 61px); }
  body main #section-10 .vision #PLAYLEARN {
    left: -14px;
    top: calc(-100px + 61px); }
  body main #section-10 .vision #Ecotopia {
    left: -150px;
    top: calc(-58px + 61px); }
  body main #section-10 .vision #Wellbeing {
    top: calc(-73px + 61px);
    left: -203px; }
  body main #section-10 .vision #Vmall {
    top: calc(-77px + 61px);
    left: -91px; }
  body main #section-10 .vision #Humanity {
    top: calc(-25px + 61px);
    left: -358px; }
  body main #section-10 .vision #Creators {
    top: calc(-21px + 61px);
    left: -69px; }
  body main #section-10 .vision #Sport {
    top: calc(13px + 61px);
    left: -365px; }
  body main #section-10 .slide-small-screen {
    width: 366px;
    height: 555px;
    overflow: scroll;
    justify-content: unset;
    overflow-y: hidden;
    overflow-x: auto;
    display: flex;
    position: relative;
    top: -120px; }
  body main #section-10 .slide-small-screen .row {
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    margin: 0;
    position: unset;
    width: 100%;
    height: inherit;
    gap: 16px; }
  body main #section-10 .slide-small-screen .row .col-2 {
    max-width: 271px;
    height: inherit;
    padding: 0 !important; }
  body main #section-10 .slide-small-screen .row .col-2 .location-info {
    width: 100%;
    background-color: white; }
  body main #section-10 .slide-small-screen .row .col-2 .location-info .location-detail-box > img {
    width: 271px;
    height: 180px; }
  body main #section-10 .slide-small-screen .row .col-2 .location-info .location-detail-box .location-detail {
    height: 304px;
    padding: 24px; }
  body main #section-10 .slide-small-screen .row .col-2 .location-info .location-detail-box .location-detail h6 {
    font-size: 18px;
    font-weight: 600;
    line-height: 28px;
    letter-spacing: 0px; }
  body main #section-10 .slide-small-screen .row .col-2 .location-info .location-detail-box .location-detail p {
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    letter-spacing: 0px;
    text-align: justify; }
  body main #section-10 .outer-spacex {
    width: 100%;
    height: 442.26px;
    flex-direction: column-reverse;
    top: -50px;
    row-gap: 60px; }
  body main #section-10 .outer-spacex > img {
    width: 366px;
    height: 158.26px; }
  body main #section-11 {
    height: 1177px; }
  body main #section-11 .mix-blend {
    width: 100%;
    height: inherit; }
  body main #section-11 .bg-mix-blend {
    width: 100%;
    height: inherit; }
  body main #section-11 .box-middle {
    width: 366px;
    text-align: left;
    top: 60px; }
  body main #section-11 .box-middle .thread {
    width: inherit; }
  body main #section-11 .box-middle .text-default {
    width: inherit; }
  body main #section-11 .content-container {
    width: 100%;
    align-items: center;
    gap: 16px;
    margin-top: 120px; }
  body main #section-11 .content-container .content-row {
    width: 366px;
    gap: 16px; }
  body main #section-11 .content-container .content-row .content-item {
    width: 175px;
    height: 175px; }
  body main #section-11 .content-container .content-row .content-item::before {
    width: 175px;
    height: 175px; }
  body main #section-11 .content-container .content-row .content-item > img {
    width: 60px;
    height: 60px; }
  body main #section-11 .content-container .content-row .content-item > p {
    line-height: 22px;
    font-size: 14px;
    width: 145px !important; }
  body main #section-12 {
    height: 1334px; }
  body main #section-12 .about-freedomx {
    height: fit-content; }
  body main #section-12 .about-freedomx .box-left {
    left: 0;
    width: 366px;
    top: 60px;
    height: fit-content; }
  body main #section-12 .about-freedomx .box-left .thread {
    font-size: 32px; }
  body main #section-12 .about-freedomx .frame-video-right {
    width: 366px;
    height: 265px;
    padding: 11px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    top: 40px; }
  body main #section-12 .about-freedomx .frame-video-right .representative-video {
    width: 100%;
    height: 100%; }
  body main #section-12 .row-group-circle {
    height: fit-content;
    top: 80px; }
  body main #section-12 .row-group-circle .box-middle {
    width: 366px;
    text-align: left; }
  body main #section-12 .row-group-circle .box-middle .thread {
    width: 100%;
    font-size: 32px; }
  body main #section-12 .row-group-circle .group-circle {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%; }
  body main #section-12 .row-group-circle .group-circle .node {
    padding: 4px;
    width: 79.48px;
    height: 79.48px; }
  body main #section-12 .row-group-circle .group-circle .node .inner-node {
    width: calc(100%);
    height: calc(100%); }
  body main #section-12 .row-group-circle .group-circle .node .inner-node > img {
    width: 31.29px;
    height: 31.29px; }
  body main #section-12 .row-group-circle .group-circle .node .inner-node .node-box {
    width: 39px;
    gap: 3px; }
  body main #section-12 .row-group-circle .group-circle .node .inner-node .node-box > p {
    font-size: 6.27px;
    line-height: 9.4px; }
  body main #section-12 .row-group-circle .group-circle #bg-group-circle {
    width: 356.67px;
    height: 208.83px;
    position: relative;
    left: unset;
    top: calc(225.45px - 45.59px); }
  body main #section-12 .row-group-circle .group-circle #bg-rounded {
    width: 208.83px;
    height: 208.83px;
    left: -46px;
    top: -27px; }
  body main #section-12 .row-group-circle .group-circle #bg-linked-nodes {
    width: 187.01px;
    height: 187.01px;
    left: -51.52000000000001px;
    top: -226px; }
  body main #section-12 .row-group-circle .group-circle #real {
    left: -127px;
    top: -415px; }
  body main #section-12 .row-group-circle .group-circle #virtual {
    left: -127px;
    top: -385px; }
  body main #section-12 .row-group-circle .group-circle #physical-digital {
    width: calc(62.57px + 6.27px / 2);
    height: calc(62.57px + 6.27px / 2);
    border: 6.27px solid #cc0000;
    left: -49px;
    top: -513px; }
  body main #section-12 .row-group-circle .group-circle #physical-digital .node-box {
    width: 26.91px; }
  body main #section-12 .row-group-circle .group-circle #physical-digital .node-box h2 {
    font-size: 11.28px;
    line-height: 16.92px; }
  body main #section-12 .row-group-circle .group-circle #physical-digital .node-box p {
    font-size: 6.27px;
    line-height: 9.4px; }
  body main #section-12 .row-group-circle .group-circle #real-avatar {
    width: 50.06px;
    height: 50.06px;
    left: -82px;
    top: -652px; }
  body main #section-12 .row-group-circle .group-circle #real-avatar .node-box {
    padding: 3px;
    width: 100%;
    height: 100%; }
  body main #section-12 .row-group-circle .group-circle #real-avatar .node-box > img {
    width: 100%;
    height: 100%; }
  body main #section-12 .row-group-circle .group-circle #virtual-avatar {
    width: 50.06px;
    height: 50.06px;
    left: -82px;
    top: -531px; }
  body main #section-12 .row-group-circle .group-circle #virtual-avatar .node-box {
    padding: 3px;
    width: 100%;
    height: 100%; }
  body main #section-12 .row-group-circle .group-circle #virtual-avatar .node-box video {
    width: 100%;
    height: 100%; }
  body main #section-12 .row-group-circle .group-circle .goggle {
    width: 187.61px;
    height: 102.71px;
    left: 90px;
    bottom: 299px;
    top: -698px; }
  body main #section-12 .row-group-circle .group-circle .goggle h1 {
    font-size: 11.28px;
    line-height: 16.92px;
    top: -18px; }
  body main #section-12 .row-group-circle .group-circle .goggle h4 {
    font-size: 6.27px;
    line-height: 9.4px;
    top: 28px; }
  body main #section-12 .row-group-circle .group-circle .goggle > div {
    top: -8px; }
  body main #section-12 .row-group-circle .group-circle .goggle > div .inner-goggle {
    width: 78.22px;
    height: 65.77px;
    gap: 3px; }
  body main #section-12 .row-group-circle .group-circle .goggle > div .inner-goggle > img {
    width: 31.33px;
    height: 31.33px; }
  body main #section-12 .row-group-circle .group-circle .goggle > div .inner-goggle .goggle-box {
    width: inherit; }
  body main #section-12 .row-group-circle .group-circle .goggle > div .inner-goggle .goggle-box h6 {
    font-size: 6.27px;
    line-height: 9.4px; }
  body main #section-12 .row-group-circle .group-circle .goggle > div .inner-goggle .goggle-box p {
    font-size: 6.27px;
    line-height: 11.28px; }
  body main #section-13 {
    height: 1328px;
    display: flex;
    flex-direction: column;
    align-items: center; }
  body main #section-13 .mix-blend {
    width: 100%;
    height: inherit; }
  body main #section-13 .bg-mix-blend {
    width: 100%;
    height: inherit; }
  body main #section-13 .box-middle {
    width: 366px;
    text-align: left;
    top: 60px; }
  body main #section-13 .box-middle .thread {
    width: 100%; }
  body main #section-13 .group-elements {
    flex-direction: column;
    row-gap: 30px;
    width: 366px; }
  body main #section-13 .group-elements .touch-model {
    width: 366px;
    height: 366px;
    order: 0; }
  body main #section-13 .group-elements .touch-model #model1 {
    display: none; }
  body main #section-13 .group-elements .touch-model #model2 {
    display: block; }
  body main #section-13 .group-elements .elements-on-left {
    order: 1; }
  body main #section-13 .group-elements .elements-on-left > ul {
    row-gap: 24px;
    margin: 0; }
  body main #section-13 .group-elements .elements-on-left > ul > li {
    font-size: 14px;
    width: 100%;
    height: 22px; }
  body main #section-13 .group-elements .elements-on-right {
    order: 2; }
  body main #section-13 .group-elements .elements-on-right > ul {
    row-gap: 24px;
    margin: 0; }
  body main #section-13 .group-elements .elements-on-right > ul > li {
    text-align: start;
    font-size: 14px;
    width: 100%;
    height: 22px;
    justify-content: flex-start; }
  body main #section-13 .group-elements .elements-on-right > ul > li::after {
    content: none; }
  body main #section-13 .group-elements .elements-on-right > ul > li::before {
    content: url("Components/Group 232.png"); }
  body main #section-14 {
    height: 782px;
    align-items: center;
    justify-content: unset;
    row-gap: 30px; }
  body main #section-14 .bg-mix-blend {
    width: 100%;
    height: 263px; }
  body main #section-14 .mix-blend {
    width: 100%;
    height: 265px; }
  body main #section-14 .box-left {
    width: 375px;
    height: fit-content;
    left: unset;
    top: 223px;
    text-align: left; }
  body main #section-14 .box-left .thread {
    width: inherit;
    font-size: 30px;
    line-height: 48px; }
  body main #section-14 .box-left .text-default {
    width: inherit;
    font-size: 16px;
    line-height: 24px; }
  body main #section-14 table {
    width: 100%;
    height: 208px;
    position: unset; }
  body main #section-14 table tbody tr {
    height: calc(208px / 3); }
  body main #section-14 table tbody tr td {
    width: calc(100% / 4); }
  body main #section-14 table tbody tr td:nth-of-type(1) {
    border-left: none; }
  body main #section-14 .slide-small-screen {
    width: 366px;
    overflow: scroll;
    justify-content: unset;
    overflow-y: hidden;
    overflow-x: auto;
    position: relative;
    top: calc(223px + 72px); }
  body main #section-14 .slide-small-screen > .row {
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    position: unset;
    width: 100%;
    height: 267px;
    margin: 0; }
  body main #section-14 .slide-small-screen > .row .col-2 {
    height: 264px;
    width: 300px;
    border-radius: 0px;
    padding: 24px; }
  body main #section-14 .slide-small-screen > .row .col-2 p {
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0px;
    text-align: left;
    width: max-content; }
  body main #section-15 {
    height: 741px; }
  body main #section-15 .box-middle {
    width: 366px;
    top: 60px; }
  body main #section-15 .box-middle .thread,
  body main #section-15 .box-middle .text-default {
    width: 100%;
    text-align: left; }
  body main #section-15 .slide-small-screen {
    width: 366px;
    overflow: scroll;
    justify-content: unset;
    overflow-y: hidden;
    overflow-x: auto;
    top: calc(300px - 180px);
    margin: 0; }
  body main #section-15 .slide-small-screen .row {
    flex-wrap: nowrap;
    column-gap: 30px;
    width: 100%; }
  body main #section-15 .slide-small-screen .row .team-member .modal .modal-dialog {
    display: flex;
    justify-content: center; }
  body main #section-15 .slide-small-screen .row .team-member .modal .modal-dialog .modal-content {
    height: 700px !important;
    width: 366px !important;
    padding: 24px !important;
    flex-direction: column !important;
    row-gap: 15px;
    overflow-y: auto;
    overflow-x: hidden; }
  body main #section-15 .slide-small-screen .row .team-member .modal .modal-dialog .modal-content .content-left {
    row-gap: 24px !important; }
  body main #section-15 .slide-small-screen .row .team-member .modal .modal-dialog .modal-content .content-left > img {
    height: 296px !important;
    width: 296px !important;
    order: 2; }
  body main #section-15 .slide-small-screen .row .team-member .modal .modal-dialog .modal-content .content-left .member-brief {
    order: 0; }
  body main #section-15 .slide-small-screen .row .team-member .modal .modal-dialog .modal-content .content-left .member-network {
    order: 1; }
  body main #section-15 .slide-small-screen .row .team-member .modal .modal-dialog .modal-content .content-right .close {
    box-shadow: none !important;
    background-color: whitesmoke; }
  body main #section-16 {
    height: 913px; }
  body main #section-16 .box-middle {
    width: 366px;
    top: 60px;
    height: auto; }
  body main #section-16 .box-middle .thread {
    width: 100%;
    text-align: left;
    font-size: 36px;
    height: auto; }
  body main #section-16 > .row {
    width: 366px; }
  body main #section-16 > .row .col-md-3 img {
    width: 100%; }
  body main #section-17 {
    height: 844px; }
  body main #section-17 .mix-blend {
    width: 100%;
    height: inherit; }
  body main #section-17 .box-middle {
    width: 366px;
    top: 60px; }
  body main #section-17 .box-middle .thread,
  body main #section-17 .box-middle .text-default,
  body main #section-17 .box-middle button {
    width: 100%;
    text-align: left; }
  body main #section-17 .slide-small-screen {
    width: 366px;
    overflow: scroll;
    justify-content: unset;
    overflow-y: hidden;
    overflow-x: auto;
    top: calc(312px - 192px);
    margin: 0; }
  body main #section-17 .slide-small-screen > .row {
    width: 100%;
    height: 454px;
    flex-wrap: nowrap; }
  body main #section-17 .slide-small-screen > .row .col-md-4 a {
    gap: 15px; }
  body main #section-17 .slide-small-screen > .row .col-md-4 a > img {
    height: 180px;
    width: 271px; }
  body footer .upper-footer {
    height: 804px;
    row-gap: 60px; }
  body footer .upper-footer #footer-video {
    width: 100%; }
  body footer .upper-footer .mix-blend {
    width: 100%; }
  body footer .upper-footer > .row {
    width: 366px;
    row-gap: 30px; }
  body footer .upper-footer > .row .form-group .form-control {
    width: 100% !important; }
  body footer .upper-footer .row-logo {
    padding: 0; }
  body footer .upper-footer .row-contact > div {
    padding: 0 !important; }
  body footer .upper-footer .row-network {
    padding: 0; }
  body footer .upper-footer .row-network .social-network {
    width: inherit; }
  body footer .lower-footer {
    height: 174px; }
  body footer .lower-footer .row {
    width: 100%;
    margin: 0;
    row-gap: 20px; }
  body footer .lower-footer .row .col-12 p {
    text-align: center;
    padding: 0 26px; }
  body footer .lower-footer .row .col-12:nth-of-type(1) {
    order: 1; }
  body footer .lower-footer .row .col-12:nth-of-type(2) {
    order: 0; }
  body footer .lower-footer .row .col-12:nth-of-type(3) {
    order: 0; }
  body footer .lower-footer #back-to-top {
    top: -90px;
    left: unset;
    position: relative; } }

/* Responsive tablet breakpoint */
@media only screen and (min-width: 415px) and (max-width: 913px) {
  .thread {
    font-size: 30px;
    width: 100% !important; }
  .text-default {
    font-size: 14px;
    width: 100% !important; }
  .frame-video-left,
  .frame-video-right {
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    height: 290px !important;
    padding: 9px 11px !important; }
  .frame-video-left > video,
  .frame-video-right > video {
    width: 100% !important;
    height: 100% !important; }
  .frame-video-left > img,
  .frame-video-right > img {
    width: 100% !important;
    height: 100% !important;
    border-radius: 10px !important; }
  header {
    width: 100% !important;
    background: #001440;
    align-items: unset;
    transition: all ease 1.5s; }
  header .navbar {
    width: 100%;
    padding: 0.5rem 0;
    background: unset;
    justify-content: center; }
  header .navbar .navbar-brand {
    width: fit-content;
    display: flex;
    justify-content: center;
    margin: 0;
    position: absolute; }
  header .navbar .navbar-toggler {
    z-index: 1;
    position: absolute;
    right: 0;
    border: none; }
  header .navbar .navbar-toggler .navbar-toggler-icon {
    background-image: url(Components/menu.png); }
  header .navbar .navbar-collapse {
    width: 100%;
    position: relative;
    top: calc(66px - 0.5rem); }
  header .navbar .navbar-collapse .navbar-nav {
    width: 100%;
    position: relative;
    gap: 24.6px;
    align-items: center; }
  header .navbar .navbar-collapse .navbar-nav .nav-item {
    width: fit-content; }
  header .navbar .navbar-collapse .navbar-nav .nav-item .nav-link {
    text-align: center; }
  header .navbar .navbar-collapse .navbar-suffixes {
    margin: 0;
    position: relative;
    top: 53px;
    flex-wrap: wrap;
    display: flex;
    justify-content: center; }
  header .navbar .navbar-collapse .navbar-suffixes .btn-signin {
    width: 100%;
    display: flex;
    justify-content: center; }
  header .navbar .navbar-collapse .navbar-suffixes .search-container .expandright {
    left: calc(100% - 366px / 2);
    right: unset;
    top: 60px; }
  header .navbar .navbar-collapse .navbar-suffixes .search-container .search:focus {
    width: 366px;
    left: calc(100% - 366px / 2);
    top: 60px; }
  header .navbar .navbar-collapse .navbar-suffixes .search-container .search:focus + .searchbutton::before {
    top: 66px;
    left: -137px; }
  header .navbar .navbar-collapse .navbar-suffixes .search-container .search:focus + .searchbutton::after {
    top: 66px;
    left: 189px; }
  header .modal .modal-dialog {
    max-width: 100%;
    justify-content: center; }
  header .modal .modal-dialog .modal-content {
    height: 548px;
    width: 366px;
    border-radius: 16px;
    padding: 24px; }
  header .modal .modal-dialog .modal-content .modal-body {
    width: 100%;
    height: 100%; }
  header .modal .modal-dialog .modal-content .modal-body form .form-group {
    width: 100%; }
  header .modal .modal-dialog .modal-content .modal-body form .form-group input {
    width: 100%; }
  header .modal .modal-dialog .modal-content .modal-body form button {
    width: 100%; }
  body {
    padding-left: 0 !important;
    padding-right: 0 !important; }
  body main #section-1 {
    display: flex;
    justify-content: center; }
  body main #section-1 .mix-blend {
    width: 100%; }
  body main #section-1 > video {
    width: 100% !important; }
  body main #section-1 .box-1 {
    padding-left: 0;
    width: calc(100% - 30px); }
  body main #section-2 .box-left {
    left: 0; }
  body main #section-3 .mix-blend,
  body main #section-3 .bg-mix-blend {
    width: 100%; }
  body main #section-3 .frame-video-3 > video {
    width: calc(100% - 30px) !important;
    height: unset !important; }
  body main #section-3 .frame-video-3 .box-3 {
    width: 100%;
    top: 1997px; }
  body main #section-3 .frame-video-3 .box-3 .thread,
  body main #section-3 .frame-video-3 .box-3 .text-default {
    width: calc(100% - 30px) !important; }
  body main #section-3 .table-content {
    width: 100%; }
  body main #section-3 .table-content .table-row {
    width: calc(100% - 30px); }
  body main #section-3 .table-content .table-row .table-cell {
    font-size: 12px; }
  body main #section-5 .box-left {
    left: 0; }
  body main #section-6 .box-right .text-box {
    gap: 10px; }
  body main #section-7 .box-left {
    left: 0; }
  body main #section-9 .bg-mix-blend,
  body main #section-9 .mix-blend {
    width: 100%; }
  body main #section-9 .carousel {
    gap: unset;
    justify-content: space-evenly; }
  body main #section-9 .carousel .carousel-inner {
    width: calc(100% - 80px - 20px); }
  body main #section-9 .carousel .carousel-inner .carousel-item {
    justify-content: center; }
  body main #section-9 .carousel .carousel-inner .carousel-item .row {
    overflow: hidden; }
  body main #section-9 .carousel .carousel-inner .carousel-item .row .col-sm-6:last-of-type {
    align-items: flex-start;
    padding-top: 40px;
    overflow: overlay; }
  body main #section-9 .carousel .carousel-inner .carousel-item .carousel-caption {
    width: 100%; }
  body main #section-9 .carousel .carousel-inner .carousel-item .carousel-caption h6,
  body main #section-9 .carousel .carousel-inner .carousel-item .carousel-caption p {
    width: 100%; }
  body main #section-9 .carousel .carousel-inner .carousel-item .representative-video {
    width: 100% !important; }
  body main #section-9 .carousel .carousel-control-next,
  body main #section-9 .carousel .carousel-control-prev {
    height: 40px;
    width: 40px; }
  body main #section-11 {
    justify-content: center; }
  body main #section-11 .bg-mix-blend,
  body main #section-11 .mix-blend {
    width: 100% !important; }
  body main #section-11 .content-container {
    width: calc(100%); }
  body main #section-11 .content-container .content-row {
    width: 100%;
    row-gap: 5px; }
  body main #section-11 .content-container .content-row .content-item {
    width: 200px;
    height: 200px; }
  body main #section-11 .content-container .content-row .content-item::before {
    height: 200px;
    width: 200px; }
  body main #section-12 .box-left {
    left: 0% !important;
    width: calc(100% - 30px) !important; }
  body main #section-12 .frame-video-right {
    width: 414px !important;
    position: relative !important;
    top: -100px; }
  body main #section-12 .row-group-circle {
    justify-content: space-around; }
  body main #section-12 .row-group-circle .box-middle {
    width: 100%; }
  body main #section-12 .row-group-circle .group-circle {
    width: 100%;
    transform: scale(0.8); }
  body main #section-12 .row-group-circle .group-circle #bg-group-circle {
    top: unset; }
  body main #section-12 .row-group-circle .group-circle #bg-rounded {
    top: unset; }
  body main #section-12 .row-group-circle .group-circle #bg-linked-nodes {
    position: absolute;
    top: unset;
    left: 10px; }
  body main #section-12 .row-group-circle .group-circle .goggle {
    position: absolute;
    top: 150px;
    left: 409px; }
  body main #section-12 .row-group-circle .group-circle #virtual-avatar {
    top: 435px;
    left: 100px;
    position: absolute; }
  body main #section-12 .row-group-circle .group-circle #virtual {
    top: 325px;
    left: -45px;
    position: absolute; }
  body main #section-12 .row-group-circle .group-circle #real {
    position: absolute;
    top: 24px;
    left: -45px; }
  body main #section-12 .row-group-circle .group-circle #real-avatar {
    position: absolute;
    left: 100px;
    top: -57px; }
  body main #section-12 .row-group-circle .group-circle #physical-digital {
    position: absolute;
    top: 188px;
    left: 193px; }
  body main #section-13 .mix-blend,
  body main #section-13 .bg-mix-blend {
    width: 100%; }
  body main #section-13 .elements-on-right ul li,
  body main #section-13 .elements-on-left ul li {
    font-size: 16px !important;
    width: 255px !important; }
  body main #section-14 {
    align-items: center; }
  body main #section-14 .bg-mix-blend,
  body main #section-14 .mix-blend {
    width: 100%; }
  body main #section-14 .box-left {
    width: calc(100% - 30px);
    left: 0;
    top: 328px; }
  body main #section-14 .slide-small-screen {
    width: 100%; }
  body main #section-14 .slide-small-screen .row {
    width: 100%; }
  body main #section-14 .slide-small-screen .row .col-md-4 {
    padding: 12px;
    width: calc(100% / 3 - 8px * 4);
    max-width: calc(100% / 3 - 8px * 4); }
  body main #section-15 .slide-small-screen {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center; }
  body main #section-15 .slide-small-screen .row {
    width: 100%; }
  body main #section-15 .slide-small-screen .row .team-member {
    width: 195px; }
  body main #section-17 .mix-blend,
  body main #section-17 .bg-mix-blend {
    width: 100%; }
  body main #section-17 .slide-small-screen {
    width: 100%;
    display: flex;
    justify-content: center; }
  body main #section-17 .slide-small-screen .row {
    width: 100%; }
  body footer .upper-footer #footer-video,
  body footer .upper-footer .mix-blend {
    width: 100%; }
  body footer .upper-footer .row {
    width: 100%; }
  body footer .upper-footer .row-contact .col-md-3 .contact-info {
    width: 100%; }
  body footer .upper-footer .row-contact .col-md-3 .contact-info .contact-mail {
    width: 100%; }
  body footer .upper-footer .row-contact .col-md-3 .contact-info .contact-mail a {
    width: 100%;
    word-wrap: break-word; }
  body footer .upper-footer .row-contact .col-md-6 {
    padding-left: 15px; }
  body footer .upper-footer .row-contact .col-md-6 .form-group .form-control {
    width: 380px; }
  body footer .upper-footer .row-contact .col-md-6 .form-group label[for="email"] {
    top: calc((60px - 40px) / 2); }
  body footer .lower-footer .row {
    width: 100%; }
  body footer .lower-footer .row ul {
    align-items: center; } }