:root {
  --primary: #142237;
}

@font-face {
  font-family: 'Univers';
  src: url('../fonts/UniversRegular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Univers';
  src: url('../fonts/UniversBold.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'Univers';
  src: url('../fonts/UniversBold.ttf') format('truetype');
  font-weight: bolder;
  font-style: normal;
}

@font-face {
  font-family: 'Univers';
  src: url('../fonts/UniversLight.ttf') format('truetype');
  font-weight: lighter;
  font-style: normal;
}

h1,h2.h3,h4,h5{
  font-family: 'Univers';
}

body{
  font-size: 20px;
}

* {
  font-family: 'Univers';
}

input, button, select, optgroup, textarea{
  font-family: 'Univers';
}

a {
  color: #F28A3D;
  text-decoration: none;
}

a:hover{
  color: #ffae71;
}

a.btn:focus, button.btn:focus{
  box-shadow: none;
}

a.text-decoration-underline{
  color: #fff;
  text-decoration: underline;
  text-decoration-style: dashed !important;
}

.bg-white a.text-decoration-underline{
  color: black;
  text-decoration: underline;
}

.text-bold{
  font-weight: bold;
}

.fw-light{
  font-weight: lighter;
}

.text-orange{
  color: #F28A3D;
}

.w-40{
  width: 40% !important;
}

.cursor-default{
  cursor: default !important;
}

.form-select.text-light {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3e%3cpath d='M7.247 11.14l-4.796-5.481C1.451 5.27 1.95 4 3.204 4h9.592c1.254 0 1.753 1.27.753 1.659l-4.796 5.481a1 1 0 0 1-1.506 0z'/%3e%3c/svg%3e");
}

.w-min{
  width: min-content;
}

.w-90{
  width: 90%;
}

body{
  background-color: #142237;
  color: #fff;
}

.btn-darkBlue{
  background-color: #233147;
  border: 1px solid #fff;
  color: #fff;
}

.btn-orange{
  font-size: 20px;
  background-color: #F28A3D;
  border-radius: 50px;
  color: #fff;
  border: none;
}

.btn-rainbow{
  font-size: 20px;
  background-image: linear-gradient(to right top, #83449B, #75C6D8);
  border-radius: 50px;
  color: #fff;
  border: none;
}

.btn-orange:hover{
  background-image: linear-gradient(to right top, #83449B, #75C6D8);
  border:none;
  color: #fff;
  -moz-box-shadow: 0 0 5px #fff;
  -webkit-box-shadow: 0 0 5px #fff;
  box-shadow: 0 0 5px #fff;
}

.border-radius-20{
  border-radius: 20px;
}

.border-radius-15{
  border-radius: 15px;
}

.border-radius-50{
  border-radius: 50px;
}

.btn-long{
  width: 500px;
}

.pointer{
  cursor: pointer;
}

.mtm-20{
  margin-top: -20px;
}

.mtm-100{
  margin-top: -100px;
}

.z-2{
  z-index: -2;
}

.z-3{
  z-index: -3;
}

.zin-1{
  z-index: 1 !important;
}

.zin-2{
  z-index: 2 !important;
}

.zin-3{
  z-index: 3 !important;
}

.zin-4{
  z-index: 4 !important;
}

.zin-5{
  z-index: 5 !important;
}


.justify-items-center{
  justify-items: center;
}

.justify-items-end{
  justify-items: end;
}

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

#navMain .navbar-collapse{
  background-color: #142237;
}

#navMain{
  height: 86px;
  background-color: #142237;
}

#navMain .logo{
  height: 63px;
}

#navMain .btn-login{
  padding: 5px 20px;
  border-radius: 50px;
  color: #fff;
  border: 1px solid #72AAD2;
  
}

#navMain .btn-login a{
  text-decoration: underline dotted 1px;
  font-size: 18px;
}

.dropdown-menu-dark .dropdown-item.active, .dropdown-menu-dark .dropdown-item:focus{
  background-color: rgba(255, 255, 255, 0.15);
}

#navMain .dropdown-menu, #exploreModal .dropdown-menu{
  background-color: #18335C;
  font-size: 14px;
}

.modal.dark-mode .modal-content{
  background-color: #374355;
}


#differentItems{
  min-height: 180px;
}

#differentItems .threeCollapeseHover{
  width: 210px;
}

.threeCollapeseHover .mix-border{
  height: 65px;
  border: 2px solid transparent;
  border-radius: 22px;
  align-content: center;
  z-index: 4;
  padding: 0;
}

.threeCollapeseHover .hat{
  background-color: #F28A3D;
  width: 70px;
  height: 37px;
  justify-self:center;
  border-radius: 20px 20px 0 0 ;
  box-shadow: 0 0 10px #bbc5d3;
}

.threeCollapeseHover .icons img{
  width: 20px;
  margin: 10px 20px;
}

.threeCollapeseHover .icons{
  background-image: linear-gradient(to top, #83449B, #75C6D8);
  border-radius: 20px 20px 0 0;
  justify-self:center
}

#differentItems .threeCollapeseHover:hover .panel-collapse
{
  height: 200px;
}

#power-of img{
  height: 200px;
}

#pricing_top #differentItems .threeCollapeseHover:hover .panel-collapse{
  height: 150px;
}

#pricing_packages{
  margin-top: 100px;
  background-color: #fff;
  width: 100%;
}

#pricing_packages .bestValue{
  position: absolute;
  top: -15px;
  left: 0;
  right: 0;
  text-align: center;
}

#pricing_packages .bestValue span{
  padding: 10px;
  border-radius: 50px;
  background-image: linear-gradient(to right top, #83449B, #75C6D8);
}

#pricing_packages .item{
  padding: 10px 4px;
}

#pricing_packages .title{
  padding: 10px;
  border-radius: 20px 20px 0 0;
  background-color: #F28A3D;
  height: 80px;
  margin-top: -80px;
  text-align: center;
  font-weight: bold;
  font-size: 18px;
  color: #fff;
  align-content: center;  
  padding: 0 20px;
  position: relative;
}

#pricing_packages .content{
  background-color: #DADBE4;
  box-shadow: 0 0 20px #DADBE4;
  text-align: center;
}

#pricing_packages .content.best{
  background-color: #FCE2CF;
}


#pricing_packages .pricePackages{
  min-height: 450px;
  transition: scale 0.5s;
}

#pricing_packages .pricePackages:hover{
  scale: 105%;
}

#pricing_packages .content img.package{
  margin: 40px 0 20px 0 ;
  height: 72px;
}

#pricing_packages .content .name{
  font-size: 30px;
  font-weight: bold;
}

#pricing_packages .content .price{
  font-size: 48px;
  color: #F28A3D;
  font-weight: bold;
}

#pricing_for .icon{
  height: 32px;
}

#pricing_packages .warpper{
  min-height: 310px;
}

.bg-silver{
  background: #EAECF0;
}

.bg-silver-1{
  background: #6A7483;
}

#pricing_for .bg-silver{
  background: #EAECF0;
  padding: 20px;
}

.line-with-dots.green{
  background-color: #d6f200; /* neon yellow */
  width: 66%;
}

.line-with-dots.green::before,
.line-with-dots.green::after{
  background-color: #d6f200; /* neon yellow */
}

.line-with-dots.blue{
  background-color: #6DC7B0; /* neon yellow */
  width: 33%;
}

.line-with-dots.blue::before,
.line-with-dots.blue::after{
  background-color: #6DC7B0; /* neon yellow */
}

.line-with-dots.orange{
  background-color: #F28A3D; /* neon yellow */
  width: 100%;
}

.line-with-dots.orange::before,
.line-with-dots.orange::after{
  background-color: #F28A3D; /* neon yellow */
}



.line-with-dots {
  position: relative;
  height: 4px;
  border-radius: 2px;
  margin: 15px 0;
}

.line-with-dots::before,
.line-with-dots::after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.line-with-dots::before {
  left: 0;
}

.line-with-dots::after {
  right: 0;
}



#differentItems .threeCollapeseHover .panel-collapse
{
  margin-top: -10px;
  left: 15px;
  width: 180px;
  z-index: 3;
}

#navMain{
  height: 86px;
  background-color: #142237;
  border-bottom: 1px solid #466983;
}

#navMain .btn-login img{
  margin-left: 6px;
}

.screen-content {
  height: 690px;
}

#glossary{
  border-top: 10px solid;
  padding:20px 0;
}

#glossary .title{
  font-size: 25px;
  font-weight: bold;
}

#glossary .title img{
  height: 26px;
  margin-right: 15px;
}

#glossary .mavs{
  font-size: 14px;
  border-bottom: 1px solid black;
}

#glossary .card{
  background-color: #F0F0F0;
  border-radius: 15px;
  padding: 10px;
  margin:10px 0;
  box-shadow: 0 2px 5px;
  min-height: 120px;
}

#glossary .mavsData *{
  font-size: 10px;
}


#holding-content .position-absolute{
  z-index: 2;
}

.hiddenStyle{
  font-size: 12px;
  height: 2px;
  background-image: linear-gradient(to right bottom, rgba(131,68,155,0.5), rgba(114,170,210,0.5));
  padding: 10px;
  margin: -10px 10px;
  overflow: hidden;
  border-radius: 0 0 20px 20px;
  transition: height 0.5s;
}

.hiddenStyle span{
  display: none;
  font-size: 12px;
  margin-top: 10px;
}

.hoverStyle:hover .hiddenStyle{
  height: 80px;
}

#suggested_section .hoverStyle{
  height: 60px;
}

#suggested_section .hoverStyle:hover .hiddenStyle{
  height: 50px;
  color: #fff;
}

#suggested_section .hiddenStyle span
{
  font-size: 15px;
  font-weight: bold;
}

.hoverStyle:hover .btn-orange{
  background-image: linear-gradient(to right top, #83449B, #75C6D8);
}

.hoverStyle:hover .hiddenStyle span{
  display: block;
}


#quotes-content{
  height: 300px;
  padding: 20px;
  justify-items: flex-end;
  align-content: center;
}

#quotes-content .position-absolute{
  top:20px;
  left:20px;
}

img#quotes_2{
  position: absolute;
  bottom: 20px;
  right: 50px;
  width: 300px;
}


h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
  color: #fff;
}

.fz-68{
  font-size: 68px;
}

.fz-64{
  font-size: 64px;
}

.fz-60{
  font-size: 60px;
}


.fz-70{
  font-size: 70px;
}

.fz-55{
  font-size: 55px;
}

.fz-50{
  font-size: 50px;
}

.fz-48{
  font-size: 48px;
}

.fz-40{
  font-size: 40px;
}

.fz-38{
  font-size: 38px;
}

.fz-35{
  font-size: 35px;
}

.fz-32{
  font-size: 32px;
}

.fz-30{
  font-size: 30px;
}
.fz-28{
  font-size: 28px;
}

.fz-25{
  font-size: 25px;
}

.fz-24{
  font-size: 24px;
}

.fz-22{
  font-size: 22px;
}

.fz-20{
  font-size: 20px;
}

.fz-18{
  font-size: 18px;
}

.fz-16{
  font-size: 16px;
}

.fz-15{
  font-size: 15px;
}

.fz-12{
  font-size: 12px;
}
.fz-11{
  font-size: 11px;
}
.fz-10{
  font-size: 10px;
}

.bg-white{
  color: black;
}

.bg-darkBlue{
  background-color: #142237;
}

.bg-darkBlue-1{
  background-color: #2A384D;
}

.bg-darkBlue-2{
  background-color: #314460;
}

.bg-overlay{
  background-color: rgba(0, 0, 0, 0.5);
  top: 0;
  left: 0;
  z-index: 1000;
  justify-items: center;
  align-content: center;
  position: absolute;
}


i.fa-circle.panic{
  font-size: 34px;
  color: #DE6844;
}

i.fa-circle.comfort{
  font-size: 34px;
  color: #6CC3B1;
}


i.fa-circle.stretch{
  font-size: 34px;
  color: #B0BF4A;
}

img.pillar-icon{
  height: 42px;
  margin-top: -5px;
}

.comfort-block{
  height: 100%;
  width: 3px;
  background-color: #6CC3B1;
}

.panic-block{
  height: 100%;
  width: 3px;
  background-color: #DE6844;
}

.mild-stretch-block{
  height: 95%;
  width: 3px;
  background-color: #B6CE32;
}

.deep-stretch-block{
  height: 95%;
  width: 3px;
  background-color: #8A9B25;
}

.circle-block{
  width: 40px;
  height: 40px;
  padding: 10px;
  border-radius: 50%;
  display: inline-block;
  line-height: 100%;
  text-align: center;
  margin-right: 15px;
}

.mindset.circle-block, .btn.mindset, .bg-mindset{
  background-image: linear-gradient(to bottom,#E55A7E, #BB518A, #83449B);
}

.situation.circle-block, .btn.situation, .bg-situation{
  background-image: linear-gradient(to bottom,#75C6D8, #72AAD2, #6E89CA);
}

.abilities.circle-block, .btn.abilities, .bg-abilities{
  background-image: linear-gradient(to bottom,#F7CE6D, #F5AE57, #F28A3D);
}

.tactics.circle-block{
  background-image: linear-gradient(to bottom,#41446E, #666B9F);
}

.excecution.circle-block{
  background-image: linear-gradient(to bottom,#3D4185, #8493E0);
}

.refinement.circle-block{
  background-image: linear-gradient(to bottom,#717CBB, #BACFF8);
}

.form-control.dark-form, .form-select.dark-form, .form-control.dark-form:autofill, .form-select.dark-form:autofill, .form-control.dark-form:focus, .form-select.dark-form:focus{
  background-color: #374355 !important;
  border-radius: 10px;
  border: none;
  color: #ABABAB;
  font-size: 16px;
}

input:-webkit-autofill{
  -webkit-text-fill-color: #374355 !important;
}

.checkbox-form{
  transform: scale(1.5);
}

.individual-options{
  display: none;
}

.individuals_wik{
  height: 500px;
  background-size: cover;
}

.individuals_wik .green-light{
  height: 31px;
}

.individuals_wik .item{
  background-color: rgba(42, 56, 77, 0.7);
  width: 180px;
  min-height: 220px;
  padding: 20px;
}

.bg-dark-silver-1{
  background-color: #2A384D;
}

.bg-dark-silver-1 .green-check{
  height: 30px;
}

.gallery {
  width: 100%;
}

.gallery-container {
  align-items: center;
  display: flex;
  height: 400px;
  margin: 0 auto;
  position: relative;
}

.gallery-item {
  height: 150px;
  opacity: .4;
  position: absolute;
  transition: all 0.5s ease-in-out;
  width: 150px;
  z-index: 0;
  background: #2A384D;
  max-width: 100%;
}

.gallery-item .content{
  height: 0;
  opacity: 0;
  transition: all 0.75;
  overflow: hidden;
}

.gallery-item.gallery-item-selected .content{
  height: 100%;
  opacity: 100%;
}


.gallery-item.gallery-item-selected {
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.6), 0 0 60px rgba(0, 0, 0, 0.45), 0 0 110px rgba(0, 0, 0, 0.25), 0 0 100px rgba(0, 0, 0, 0.1);
  height: 300px;
  opacity: 1;
  left: 50%;
  transform: translateX(-50%);
  width: 800px;
  z-index: 2;
}

.gallery-item.gallery-item-previous,
.gallery-item.gallery-item-next {
  height: 200px;
  opacity: 1;
  width: 200px;
  z-index: 1;
}

.gallery-item.gallery-item-previous {
  left: 25%;
  transform: translateX(-50%);
}

.gallery-item.gallery-item-next {
  left: 75%;
  transform: translateX(-50%);
}

.gallery-item.gallery-item-first {
  left: 20%;
  transform: translateX(-50%);
}

.gallery-item.gallery-item-last {
  left: 80%;
  transform: translateX(-50%);
}

.gallery-controls {
  display: flex;
  justify-content: center;
  margin: 30px 0;
}

.gallery-controls button {
  border: 0;
  cursor: pointer;
  font-size: 16px;
  margin: 0 20px;
  padding: 0 12px;
  text-transform: capitalize;
}

.gallery-controls button:focus {
  outline: none;
}

.gallery-controls-previous {
  position: relative;
}

.gallery-controls-previous::before {
  border: solid #000;
  border-width: 0 2px 2px 0;
  content: '';
  display: inline-block;
  height: 4px;
  left: -10px;
  padding: 2px;
  position: absolute;
  top: 0;
  transform: rotate(135deg) translateY(-50%);
  transition: left 0.15s ease-in-out;
  width: 4px;
}

.gallery-controls-previous:hover::before {
  left: -18px;
}

.gallery-controls-next {
  position: relative;
}

.gallery-controls-next::before {
  border: solid #000;
  border-width: 0 2px 2px 0;
  content: '';
  display: inline-block;
  height: 4px;
  padding: 2px;
  position: absolute;
  right: -10px;
  top: 50%;
  transform: rotate(-45deg) translateY(-50%);
  transition: right 0.15s ease-in-out;
  width: 4px;
}

.gallery-controls-next:hover::before {
  right: -18px;
}

.gallery-nav {
  bottom: -15px;
  display: flex;
  position: absolute;
  justify-content: center;
  width: 100%;
}

.gallery-nav ul{
  list-style: none;
  display: flex;
  justify-content: center;
  padding: 0;
  margin: 0;
}

.gallery-nav li {
  background: #ccc;
  border-radius: 50%;
  height: 10px;
  margin: 0 16px;
  width: 10px;
  align-self: center;
}

.gallery-nav li.gallery-item-selected {
  background: #555;
}


.screen-content video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: 0;
  -ms-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}

.screen-content .overlay {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: black;
  opacity: 0.5;
  z-index: 1;
}

#holding-content .label{
  font-size: 68px;
  line-height: 75px;
  width: 500px;
}

#holding-content .questions{
  float: right;
  width: 700px;
  font-size: 20px;
  font-weight: bold;
}

.btn-circle{
  border-radius: 50px;
  border: none;
}

.btn-white{
  background-color: #fff;
  border: 1px solid #72AAD2;
}

.btn-transparent{
  background-color: transparent;
  border: 1px solid #72AAD2;
}


#holding-content .questions button{
  background-color: #F28A3D;
  border-radius: 50px;
  border: none;
  padding: 15px 25px;
}

#headerVideo{
  position: relative;
  height: 100vh;
  min-height: 25rem;
  width: 100%;
  overflow: hidden;
}

#headerVideo .roller{
  height: 80px;
  overflow: hidden;
}

#headerVideo .scroll-text{
  position: absolute;
  animation:  slide 12s infinite;
  top:0;
}

#headerVideo .btn-box:hover .hidden-text{
  left:280px;
  opacity: 100%;
}

#headerVideo .hidden-text{
  z-index: -1;
  position: absolute;
  left: 0;
  top: 0;
  transition: all 0.5s;
  font-size: 15px;
  width: 450px;
  border-bottom: 1px solid #fff;
  opacity: 0%;
}

@keyframes slide {
  0%{
    top:0;
  }
  33%{
    top: -6rem;    
  }
  66%{
    top: -11rem;
  }
}

.mw-95{
  max-width: 95%;
}

.mw-90{
  max-width: 90%;
}

#assessment_landing .bg-white{
  margin-top: 100px;
}

#assessment_landing .card-wrapper{
  max-width: 780px;
}


#assessment_landing .bg-white.situation{
  background-color: #374355;
}

#assessment_landing .card{
  border-radius: 20px;
  box-shadow: 0 0 20px silver;
}

#assessment_landing .card .banner{
  position: relative;
  margin-top: -140px;
}

#assessment_landing .card .banner img{
  border-radius: 25px;
}


#assessment_landing .card .label{
  text-align: center;
  position: absolute;
  font-size: 25px;
  font-weight: bold;
  width: 100%;
}

#assessment_landing .card .quote{
  text-align: center;
  font-weight: lighter;
  position: absolute;
  font-size: 25px;
  width: 390px;
}

#assessment_landing #about.card .label{
  top: 40px;
}

#assessment_landing #about.card .quote{
  bottom: 50px;
  left: 50px;
}

#assessment_landing #abilities.card .quote{
  bottom: 30px;
  left: 20px;
}

#assessment_landing #mindset.card .quote{
  bottom: 30px;
  right: 5px;
}

#assessment_landing #situation.card .label{
  top: auto;
  bottom: 30px;
}

#assessment_landing #situation.card .quote{
  top: 30px;
  bottom: auto;
}

#assessment_landing .carousel-container {
  width: 300px; /* Width of the carousel */
  height: 200px; /* Visible area height */
  overflow: hidden; /* Hide overflowing content */
  position: relative;
}

#assessment_landing .owl-stage{
  padding: 1px;
  overflow: hidden;
  height: 220px;
}

#assessment_landing .owl-stage .w-100{
  width: 99% !important;
}


.progress-bar-wrapper ul.progress-bar-new {
  width: 100%;
  margin: 0;
  padding: 0;
  font-size: 0;
  list-style: none;
}

.progress-bar-wrapper li.section {
  display: inline-block;
  padding-top: 45px;
  font-size: 10px;
  font-weight: bold;
  line-height: 16px;
  width: 20%;
  color: #fff;
  vertical-align: top;
  position: relative;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
}

.progress-bar-wrapper li.section:before {
  content: '•';
  position: absolute;
  top: 2px;
  left: calc(50% - 15px);
  z-index: 1;
  width: 30px;
  height: 30px;
  border-radius: 17px;
  line-height: 28px;
  background: #fff;
  border: 2px solid yellow;
}

.progress-bar-wrapper .status-bar {
  height: 2px;
  width: 80%;
  background: #fff;
  position: relative;
  top: 20px;
  margin: 0 auto;
}


.progress-bar-wrapper .current-status {
  position: absolute;
  height: 2px;
  width: 25%;
  border-radius: 1px;
  background: mediumseagreen;
}

.progress-bar-wrapper .current-status.mindset{
  left: 25%;
}

.progress-bar-wrapper .current-status.abilities{
  left: 50%;
}

.progress-bar-wrapper .current-status.situation{
  left: 75%;
}

.progress-bar-wrapper li.section.visited:before {
  content: '\2714';
  animation: changeBackground .5s linear;
  animation-fill-mode: forwards;
  color: #fff !important;
  border: none;
}


.progress-bar-wrapper li.section.mindset::before{
  color: #E55A7E;
  border-color: #E55A7E;
}

.progress-bar-wrapper li.section.abilities::before{
  color: #F7CE6D;
  border-color: #F7CE6D;
}

.progress-bar-wrapper li.section.situation::before{
  color: #75C6D8;
  border-color: #75C6D8;
}

.progress-bar-wrapper li.section.result::before{
  color: #F28A3D;
  border-color: #F28A3D;
}


.progress-bar-wrapper li.section.visited.about::before, .status-bar .current-status.about{
  background-image: linear-gradient(to bottom, #41446E 0%, #666B9F 100%);
}

.progress-bar-wrapper li.section.visited.mindset::before, .status-bar .current-status.mindset{
  background-image: linear-gradient(to bottom,#E55A7E, #BB518A, #83449B);
}

.progress-bar-wrapper li.section.visited.situation::before, .status-bar .current-status.situation{
  background-image: linear-gradient(to bottom,#75C6D8, #72AAD2, #6E89CA);
}

.progress-bar-wrapper li.section.visited.abilities::before, .status-bar .current-status.abilities{
  background-image: linear-gradient(to bottom,#F7CE6D, #F5AE57, #F28A3D);
}






.progress-bar-wrapper li.section.visited.current:before {
  box-shadow: 0 0 0 2px mediumseagreen;
}


.bg-dark-card{
  background-color: #2e3b4e;
}

#toppanel{
  position: relative;
  height: 100vh;
  min-height: 25rem;
  width: 100%;
  overflow: hidden;
}

#toppanel h2{
  font-size: 64px;
  font-weight: 200;
}

#toppanel h3{
  font-size: 22px;
}

#toppanel .content{
  background-image: linear-gradient(to bottom, #142237 0%, transparent 50%, #142237 100%);
  position: inherit;
}

#toppanel #pannel_image{
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: 0;
  
  -ms-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  
}

#toppanel.hiws2{
  height: 400px;
}

#toppanel.hiws2 .overlay{
  height: 300px;
}


#toppanel.hiws2 #pannel_image{
  top:300px;
  position: relative;
  width: 100%;
  height: unset;
  min-width: unset;
  min-height: unset;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 20%, black 80%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, black 20%, black 80%, transparent 100%);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;

  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

#how_it_workds_science img.pillars{
  height: 216px;
}

#how_it_workds_science img.zones{
  width: 254px;
}

.cardItem{
  min-height: 140px;
  width: 100%;
  background-color: #E1EAF8;
  transition: opacity 0.5s ease-in-out;
  border-radius: 20px;
  font-size: 15px;
  text-align: center;
  margin-top: 5px;
}

.cardItem .topItem{
  border-radius: 20px;
}

.cardItem .topItem.white{
  background-color: #E1EAF8;
  box-shadow: 0px 5px 10px silver;
  border-radius: 0 0 20px 20px;
  padding: 20px;
}

.cardItem .topItem.white.comfort{
  background-color: #BBE4E7;
}

.cardItem .topItem.white.stretch{
  background-color: #DFE9BF;
}

.cardItem .topItem.white.panic{
  background-color: #F1CAC5;
}


.cardItem .topItem.mindset{
  background-image: linear-gradient(to bottom, #E55A7E, #BB518A, #83449B);
}

.cardItem .topItem.abilities{
  background-image: linear-gradient(to bottom, #F7CE6D, #F5AE57, #F28A3D);
}

.cardItem .topItem.situation{
  background-image: linear-gradient(to bottom, #75C6D8, #72AAD2, #6E89CA);
}


.cardItem .topItem img{
  margin-top: -60px;
  height: 133px;
}


#headerVideo video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: 0;
  -ms-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}

#headerVideo .container {
  position: relative;
  z-index: 2;
}

#headerVideo .overlay {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  opacity: 0.5;
  z-index: 1;
}

.team-item{
  width: 200px;
  justify-self: center;
  text-align: center;
}

.team-item img{
  width: 200px !important;
}

#about-us-quote{
  position: absolute;
  left: 0; 
  bottom: 0;
  height: 234px;
}

#hiws_top{
  height: 650px;
  width: 100%;
  background: url('../img/bg_hiws.jpg');
}

#pricing_top{
  height: auto;
  width: 100%;
  background: url('../img/bg_pricing.jpg');
  background-size: cover;
}

#pricing_for .bg-orange.collapsed{
  background-color: black;
}

#pricing_for .bg-orange{
  background-color: #F28A3D;
}

.customCollapse{
  cursor: pointer;
}

.faq .item{
  border-bottom: 1px solid #fff;
  padding: 20px 0;
}

#FAQ .topic{
  padding: 20px;
  margin: 10px 0;
  background-color: #16253C;
}

#FAQ .topic i{
  margin-right: 10px;
}

#FAQ .topic i.right{
  float:right;
}

#FAQ .topic .question{
  border-bottom: 1px solid #c0c0c05c;
  padding: 10px;
}

#FAQ .bg-image{
  background-repeat: no-repeat; 
  background-attachment: scroll;
}



#hiws_top .content, #pricing_top .content{
  justify-self: center;
  padding: 50px;
}

img.blueprints{
  left: 100px;
  top: -150px;
}

.targetId:target{ padding-top: 100px;margin-top: -100px}


.bg-master-text{
  position: absolute;
  right: 0;
  top: 0;
  font-size: 160px;
  line-height: 200px;
  opacity: 10%;
  font-weight: bold;
}

#contact-form *{
  font-size: 16px;
}

#contact-form textarea{
  height: 125px;
}

#founder-img{
  margin-top: -120px;
}

.mix-border{
  color: #fff;
  position: relative;
  background-clip: padding-box;
  background-color: #2e3b4e;
  border-radius: 50px;
  z-index: 4;
  padding: 0;
}

.mix-border::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  margin: -2px;
  background-image: linear-gradient(to right bottom, #83449B, #75C6D8);
  border-radius: inherit;
}

.mix-border span{
    width: 100%;
    height: 100%;
    display: block;
    padding: 7.5px 15px;
    margin: 0px;
    border-radius: 20px;
    background: #2e3b4e;
    z-index: 3;
    align-content: center;
    font-weight: bold;
}

.threeCollapeseHover{
  width: 320px;
  position: relative;
}

.threeCollapeseHover *{
  font-size: 15px;
}

.threeCollapeseHover:hover .panel-collapse{
  height: 170px;
  
}

.threeCollapeseHover:hover .collapse .panel-body{
  padding: 20px 15px 10px 15px;
  display: block;
}

.threeCollapeseHover .panel-collapse{
  background-color: #142237;
  position: absolute;
  border: none;
  margin-top: -10px;
  width: 260px;
  justify-self: center;
  text-align: center;
  box-shadow: 0 0 10px #bbc5d3;
  border-radius: 0 0 20px 20px;
  left: 28px;
  z-index: 1;
  transition: height 1s;
}

.threeCollapeseHover .collapse{
  padding: 10px 0!important;
  height: 10px;
  overflow: hidden;
  display: block;
}

.threeCollapeseHover .collapse .panel-body{
  padding: 20px 15px 10px 15px;
}


.threeCollapeseHover .mix-border:hover{
  background-color: #1a2e4d;
  color: #fff;
}

.rounded{
  border-radius: 20px !important;
}

.dark-box-frame{
  display: flex;
}

.dark-box {
  z-index: 4;
  width: 280px;
  background-color: #EAEBED;
}

.dark-box-frame .box{
  background-color: #3e4b5e;
}

div.feedback{
  font-size: 10px;
  width: 150;
  text-align: left;
  z-index: 1;
}

div.feedback .red-bubble {
  color: white;              /* chữ trắng */
  width: 130px;              /* chiều rộng */
  padding: 5px;
  font-family: sans-serif;
  font-style: normal;
  line-height: 1.2;
  /* bo góc */
  border-top-left-radius: 20px;
  border-top-right-radius: 90px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

div.feedback a div{
  background-color: #142237;
  padding:5px;
  border-radius: 20px;
  width:160px;
  border: 1ps solid #814C9F;
  box-shadow: 0 0 1px 1px;
}

#LearningPillar img.pillars{
  height: 110px;
}

#LearningPillar .block .content{
  min-height: 230px;
}

#LearningPillar .block img{
  height: 55px;
}

#LearningPillar .block.mindset{
  background-color: #FBEEF2;
}

#LearningPillar .block.mindset.active{
  border: 3px solid #BB518A;
}

#LearningPillar .block.mindset.active, #LearningPillar .block.mindset:hover{
  background-color: #f1cad6;
}

#LearningPillar .block.abilities{
  background-color: #FEF9F0;
}

#LearningPillar .block.abilities.active{
  border: 3px solid #F5AE57;
}

#LearningPillar .block.abilities.active, #LearningPillar .block.abilities:hover{
  background-color: #ffe9c1;
}

#LearningPillar .block.situation{
  background-color: #F1F9FB;
}

#LearningPillar .block.situation.active{
  border: 3px solid #72AAD2; 
}

#LearningPillar .block.situation.active, #LearningPillar .block.situation:hover{
  background-color: #c1e2e9;
}




.scroll-btn {
  position: sticky;
  bottom: 10px;
  background: #fff;
  color: black;
  padding: 10px 12px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 20px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.3);
  justify-self: center;
  height: 46px;
  width: 35px;
}

.pillarLearning{
  background-color: #374355;
  width: 100%;
  border-radius: 10px;
  overflow: hidden;
  height:100%;
}

.pillarLearning .content{
  min-height: 150px;
}

.pillarLearning .top{
  width: 100%;
  height: 170px;
  background-size: cover;
  background-position-y:center;
  border-radius: 10px;
  padding: 20px;
  align-content: flex-end;
}

.learning_detail .pillarLearning .top{
  height: 230px;
}

.pillarLearning .top.mindset{
  background-image: url('../img/learning_mindset.png');
}

.pillarLearning .top.abilities{
  background-image: url('../img/learning_abilities.png');
}

.pillarLearning .top.situation{
  background-image: url('../img/learning_situation.png');
  background-position-y: bottom;
}

#exploreModal .modal-content{
  border-radius: 30px;
}

#exploreModal .modal-header{
  padding: 0;
  border-bottom: 0;
}

#exploreModal .modal-header .close{
  width: 100px;
}

#exploreModal .nav-pills .nav-link.active, #exploreModal .nav-pills .show>.nav-link {
    color: #fff;
    background-color: #142237;
}

#exploreModal .nav-item{
  margin-left: -10px;
  width: 33%;
}

#exploreModal .nav-pills .nav-link {
    color: #142237;
    border-radius: 0 0 10px 0;
    border: 1px solid #142237;
    border-left: 0;
    border-top: 0;
}

#exploreModal .pillar-img{ 
  width: 270px;
  height: 315px;
  background-position: top;
}

#exploreModal img.mavs{
  height: 52px;
}

#exploreModal.mindset .pillar-img{
  background-image: url('../img/learning_mindset.png');
}

#exploreModal.abilities .pillar-img{
  background-image: url('../img/learning_abilities.png');
}

#exploreModal.situation .pillar-img{
  background-image: url('../img/learning_situation.png');
}

#exploreModal .color-header img{
  height: 26px;
}

.btn-action-type{
  font-size: 9px;
  background-color: #EAECF0;
  align-items: center;
  border-radius: 20px 30px 0 20px;
  font-weight: bold;
  text-transform: capitalize;
  border: none;
  padding: 5px;
  min-height: 37px;
}

.btn-action-type.active{
  color: #fff;
}

.mindset .btn-action-type.active, .mindset .btn-content-group.active .title, .mindset div.feedback .red-bubble{
  background-image: linear-gradient(to bottom,#E55A7E, #BB518A, #83449B);
}

.abilities .btn-action-type.active, .abilities .btn-content-group.active .title, .abilities div.feedback .red-bubble{
  background-image: linear-gradient(to bottom,#F7CE6D, #F5AE57, #F28A3D);
}

.situation .btn-action-type.active, .situation .btn-content-group.active .title, .situation div.feedback .red-bubble{
  background-image: linear-gradient(to bottom,#75C6D8, #72AAD2, #6E89CA);
}

.mindset .filter-category.active{
  background-image: linear-gradient(to bottom,#E55A7E, #BB518A, #83449B);
  color: #fff;
}

.filter-resource.active{
  background-color: #fff;
  color: black;
}

.abilities .filter-category.active{
  background-image: linear-gradient(to bottom,#F7CE6D, #F5AE57, #F28A3D);
  color: #fff;
}

.situation .filter-category.active{
  background-image: linear-gradient(to bottom,#75C6D8, #72AAD2, #6E89CA);
  color: #fff;
}


.btn-content-group{
  font-size: 9px;
  justify-content:center;
  align-items: center;
  position: relative;
  min-height: 75px;
  overflow: hidden;
  text-wrap: auto;
}

.btn-content-group .wrapper{
  border-radius: 10px 10px 0 0;
  background-color: #EAECF0;
  position: absolute;
  top: 20px;
  width: 100%;
  height: 100%;
}

.btn-content-group .title{
  background-color: #142237;
  color: #fff;
  padding: 2px;
  min-height: 32px;
  position: absolute;
  bottom: 0;
  width: 100%;
  align-content: center;
  border-radius: 10px 10px 0 0;
}

.btn-content-group i{
    position: absolute;
    left: auto;
    right: auto;
    top: 0;
}


#exploreModal .main{
  margin-top: -50px;
}

i.hubs-icon{
  background-image: url('../img/icon/hubs_icon.png?t=1');
  background-size: 200px;
  background-repeat: no-repeat;
  display: block;
  width: 22px;
  height: 22px;
}

.btn-content-group i.hubs-icon{
  height: 36px;
  width: 36px;
}

i.hubs-icon.quick{
    background-position: -14px -255px;
}
i.hubs-icon.reflection{
    background-position: -14px -288px;
}
i.hubs-icon.behavior{
    background-position: -14px -323px;
}
i.hubs-icon.feedback{
    background-position: -14px -357px;
}
i.hubs-icon.reframing{
    background-position: -14px -392px;
}
i.hubs-icon.observation{
    background-position: -14px -426px;
}


i.hubs-icon.entrepreneurs{
    background-position: -14px -150px;
}
i.hubs-icon.switchers{
    background-position: -14px -104px;
}
i.hubs-icon.professionals{
    background-position: -14px -196px;
}
i.hubs-icon.students{
    background-position: -14px -11px;
}
i.hubs-icon.leaders{
    background-position: -14px -57px;
}
i.hubs-icon.freelancers{
    background-position: -14px -290px;
}
i.hubs-icon.retirees-seniors{
    background-position: -14px -244px;
}

i.hubs-icon.light, .btn-action-type.active i.hubs-icon{
  background-position-x: -135px !important;
}
 
i.hubs-icon.mindset{
  background-position-x: -53px;
}

i.hubs-icon.abilities{
  background-position-x: -14px;
}

i.hubs-icon.situation{
  background-position-x: -93px;
}

.btn-content-group i.hubs-icon.mindset{
  background-position-x: -67px;
  background-size: 270px
}

.btn-content-group i.hubs-icon.abilities{
  background-position-x: -14px;
  background-size: 270px
}

.btn-content-group i.hubs-icon.situation{
  background-position-x: -123px;
  background-size: 270px
}

#doing-content .action, #pills-learning .content .item{
  background-color: #2A384D;
  border-radius: 10px;
  display: flex;
  padding: 5px 10px;
  align-items: center;
  margin: 10px 2px;
}


#exploreModal .action-content{
  height: 450px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: silver #2c2f4a;;
  /*
  scrollbar-width: none; /* Firefox */
  /*-ms-overflow-style: none; /* IE/Edge */
}


#exploreModal .action-content .content{
  min-height: 100px;
}
 

.dark-box .item{
  height: 60px;
  align-content: center;
  margin-left: 20px;
  font-weight: bold;
  font-size: 23px;
  opacity: 50%;
  transition: all 0.5;
}

.dark-box .item .circle-block{
  color: #fff;
  padding:0;
  align-content: center;
}

.dark-box .item:hover{
  opacity: 100%;
  font-weight: bold;
  font-size: 28px;
}


.dark-box-frame .hidden-text .box{
  background-color: #142237;
  border-radius: 0 20px 20px 0;
  box-shadow: 0 0 5px #fff;
  font-size: 15px;
  width: 200px;
  padding: 15px;
  position: inherit;
  z-index: 3;
}

i.showpass{
  position: absolute;
  top: 13px;
  right: 20px;
  cursor: pointer;
  font-size: 15px;
}

.why-item-parent{
  height: 290px;
  z-index: 1;
}

.why-item{
  justify-self: anchor-center;
}

.why-item-box{
  background-color: #253B5B;
  color: #fff;
  border-radius: 20px;
  text-align: center;
  padding:20px;
  position: relative;
  width: 220px;
  justify-items: center;
  z-index: 1000;
}

.why-item-box img{
  left: -20px;
  width: 260px;
  transition: width 0.5s;
  margin-bottom: 20px;
}

.why-item:hover img{
  width: 200px;
  left: 20px;
}

.why-item-content{
  height: 50px;
  width: 215px;
  background-image:  linear-gradient(to right, #83449B 0%, #72AAD2 53%,#72AAD2 100%);
  border-radius: 20px;
  margin-top: -30px;
  justify-self: center;
  transition: height 0.5s;
}

.why-item-content .layer{
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: all 0.5;
  background-color: #E1EAF8;
  transition: opacity 0.5s ease-in-out;
  border-radius: 20px;
  font-size: 15px;
  text-align: center;
  align-content: center;
  margin-top: 5px;
  padding: 10px;
}


.why-item:hover .why-item-content{
  height: 190px;
}

.why-item:hover .why-item-content .layer{
  opacity: 100%;
}

.about-left{
  margin-left: 100px;
}

#footer{
  background-color:rgba(26, 26, 26, 0.3);
}

.footer .logo{
  width: 333px;
}

.footer .quicklink a{
  margin: 10px 0;
  color: #fff;
}


.orange_light{
  position: absolute;
  top: 0;
  left: -100px;
  max-width: 100%;
}


@media (min-resolution: 1.25dppx) and (max-width: 1536px)
{
  #toppanel #pannel_image{
    top: 60% !important;
    left: 55%;
  }
}


@media (max-width: 1450px) {

  #holding-content .position-absolute img{
    max-width: 80% !important;
  }

  #assessment_landing .owl-stage{
    height: 180px;
  }

  #glossary .card{
    min-height: 160px;
  }

  
  #toppanel #pannel_image{
    top: 60% !important;
    left: 55%;
  }
  
}


@media screen and (min-width: 1900px) and (max-width: 1920px)
    and (min-height: 600px) and (max-height: 800px) {
    #toppanel #pannel_image{
      top: 60% !important;
    }
}


@media (max-width: 1000px) {

  .mtm-20, .mtm-100{
    margin-top: auto;
}


  #pricing_packages .title{
    margin-top: 0;
  }

  #hiws_top img{
    right: 0;
    top: -100px !important;
	  max-width:60% !important;
    opacity: 10%;
  }

  img.blueprints{
    top:-200px;
    left: 0;
    opacity: 10%;
	max-width:90%;
  }


}

@media (max-width: 1200px) {
  #quotes-content .fz-38{
    font-size: 30px;
  }

  .about-left{
    margin-left: 50px;
  }

}

@media (max-width: 1000px) {

  .fz-70, .fz-60, .fz-68, .fz-64{
    font-size: 32px;
  }

  #headerVideo .roller{
    height: 55px;
  }

  #headerVideo .roller .fz-55{
    font-size: 40px;
  }
  
  .about-left{
    margin-left: 0;
  }


  @keyframes slide {
    0%{
      top:0;
    }
    33%{
      top: -3.5rem;    
    }
    66%{
      top: -6.5rem;
    }
  }

  .fz-40{
    font-size: 28px;
  }

  #quotes-content .fz-38{
    font-size: 28px !important;
  }

 
  .bg-master-text{
    font-size: 120px;
  }
  
  .threeCollapeseHover .collapse{
    height: auto;
    position: inherit;
    left: 0;
  }

  .threeCollapeseHover .collapse .panel-body{
    padding: 20px 15px 10px 15px;
    display: block;
  }

  #differentItems .threeCollapeseHover .panel-collapse{
    left: 0;
  }

  .dark-box-frame .dark-box{
    width: 230px;
  }

  .dark-box-frame .hidden-text{
    left: 220px;
  }

  .dark-box-frame .hidden-text .box{
    width: 150px;
    padding-right: 5px;
  }

  .dark-box-frame:hover .hidden-text{
    left: 220px;
  }
  
}

@media (max-width: 760px)
{

  #navMain .dropdown-menu{
    background: transparent;
    text-align: right;
  }

  #navMain .dropdown{
    text-align: right;
  }

  .about-left{
    margin-left: 0;
  }

  #holding-content .label{
    font-size: 40px;
    width: 100%;
  }

  #headerVideo .roller .fz-55{
    font-size: 30px;
  }

  #quotes-content .fz-38{
    font-size: 22px !important;
  }

  #toppanel h2{
    font-size: 30px;
  }
  
  .overlay #pannel_image{
    width: unset !important; 
    height: 100% !important;
  }

  #hiws_top .content, #pricing_top .content{
    padding: 20px;
  }

  .individuals_wik{
    height: auto;
  }

  @keyframes slide {
    0%{
      top:0;
    }
    33%{
      top: -2rem;    
    }
    66%{
      top: -4rem;
    }
  }

  #quotes-content img{
    height: 100px;
  }

  .fz-38{
    font-size: 26px;
  }
  
  #holding-content .content *{
    margin-top: 0;
    font-size: 16px;
  }

  #holding-content .hiddenStyle{
    height: 100px !important;
  }

  .why-item-parent{
    height: 400px;
  }

  .why-item .why-item-content{
    height: 190px;
  }
  
  .why-item .why-item-content .layer{
    opacity: 100%;
  }

  #about-us-quote{
    height: 150px;
  }

  #headerVideo .btn-box .hidden-text{
    top:90px;
    opacity: 100%;
    width: 100%;
  }

  .orange_light{
    top: 480px;
    left: -150px;

  }
  
  #assessment_landing .fz-25{
    font-size: 20px;
  }

  #assessment_landing #about.card .label{
    top: 25px;
  }

  #assessment_landing #about.card .quote, #assessment_landing #abilities.card .quote{
    left: 0;
  }

  #assessment_landing #mindset.card .quote{
    bottom: 30px;
    right: 10px;
  }
  
  #assessment_landing #situation.card .label{
    top: auto;
    bottom: 40px;
  }
  
  #assessment_landing #situation.card .quote{
    top: 40px;
    bottom: auto;
  }

  .hoverStyle .hiddenStyle{
    height: 80px;
  }

  #suggested_section .hoverStyle .hiddenStyle{
    height: 50px;
    color: #fff;
  }

  .hoverStyle .hiddenStyle span{
    display: block;
  }

}

@media (max-width: 580px)
{

  #assessment_landing .owl-stage{
    height: 140px;
  }

  #assessment_landing .card .quote{
    width: 250px;
  }
  

  #assessment_landing .fz-25{
    font-size: 15px;
  }

  #assessment_landing #about.card .label{
    top: 15px;
  }
  
  #assessment_landing #about.card .quote{
    width: 200px;
    bottom: 20px;
    left: 10px;
  }

  #assessment_landing #abilities.card .quote{
    bottom: 20px;
    left: 10px;
  }



  #assessment_landing #mindset.card .quote{
    bottom: 10px;
    right: 10px;
  }

  #assessment_landing #situation.card .label{
    top: auto;
    bottom: 20px;
  }
  
  #assessment_landing #situation.card .quote{
    top: 20px;
    bottom: auto;
  }

}