@charset "UTF-8";


.card-parent {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}

.card-background{
  grid-column-start: 1;
  grid-row-start: 1;
  grid-row-end: 8;
  z-index: 1;
}

.card-icon-1{
  grid-column-start: 1;
  grid-row-start: 2;
  grid-row-end: 4;
  background-image: url("./src/personal-icon.png");
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: contain;
  z-index: 2;
}

.card-icon-2{
  grid-column-start: 1;
  grid-row-start: 2;
  grid-row-end: 4;
  background-image: url("./src/education-icon.png");
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: contain;
  z-index: 2;
}

.card-icon-3{
  grid-column-start: 1;
  grid-row-start: 2;
  grid-row-end: 4;
  background-image: url("./src/corporation-icon.png");
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: contain;
  z-index: 2;
}

.card-icon-4{
  grid-column-start: 1;
  grid-row-start: 2;
  grid-row-end: 4;
  background-image: url("./src/business-icon.png");
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: contain;
  z-index: 2;
}

.card-title-overlay{
  grid-column-start: 1;
  grid-row-start: 4;
  grid-row-end: 5;
  text-align: center;
  padding-top: 40px;
  color: white;
  z-index: 3;
}

.card-text-1{
  grid-column-start: 1;
  grid-row-start: 5;
  grid-row-end: 6;
  color: white;
  padding-left: 10px;
  padding-right: 10px;
  text-align: center;
  z-index: 3;
}
.card-text-2{
  grid-column-start: 1;
  grid-row-start: 6;
  grid-row-end: 7;
  color: white;
  padding-left: 10px;
  padding-right: 10px;
  text-align: center;
  z-index: 3;
}

.card-button-parent{
  grid-column-start: 1;
  grid-row-start: 7;
  grid-row-end: 8;
  align-content: center;
  text-align: center;
  z-index: 3;
}

.card-button{
  align-self: center;
}

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

.sphererow {
  display: flex;
  flex-direction: row;
  width: 100%;
}

.col-md-lic-big {
  flex: 0 0 auto;
  width: 67%;
}
.col-md-lic-small {
  flex: 0 0 auto;
  width: 32%;
}

.home-navbar {
  background: rgba(255, 255, 255, 0.2);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);

}

.home-grid{
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}

.home-carousel{
  height: 100vh;
}

.home-carousel1{
  background: url(src/background-gradient-2.png);
  background-size: cover;
  -moz-background-size: cover;
}

.carousel2 { z-index: -99; } /* keeps this behind all content */
.carousel2 .item2 {
    position: fixed;
    width: 100%;
    height: 100vh;
    -webkit-transition: opacity 1s;
    -moz-transition: opacity 1s;
    -ms-transition: opacity 1s;
    -o-transition: opacity 1s;
    transition: opacity 1s;

}
.carousel2 .one {
    background: url(src/frontpage1.png);
    background-size: cover;
    -moz-background-size: cover;
    z-index: -99;
}
.carousel2 .two {
    background: url(src/frontpage2.png);
    background-size: cover;
    -moz-background-size: cover;
    z-index: -99;
}
.carousel2 .three {
    background: url(src/frontpage3.png);
    background-size: cover;
    -moz-background-size: cover;
    z-index: -99;
}
.carousel2 .active.left {
    left:0;
    opacity:0;
    z-index:2;
}

.footer-z {
  z-index: 5;
}

.carousel-z{
  z-index: 1;
}

.carousel-img{
  object-fit: none;
  height: 100vh;
}
.py-5-home {
  padding-bottom: 3rem !important;
}

.text-white {
  color: white;
}


.carousel .carousel-indicators li {
  background-color: #fff;
  background-color: rgba(255, 255, 255, 0.25);
}

.carousel .carousel-indicators .active {
  background-color: #fff;
}

.carousel-caption-right {
  position: absolute;
  right: 20px;
  bottom: 40%;
  top: 40%;
  z-index: 10;
  padding-top: 30px;
  padding-bottom: 20px;
  color: #fff;
  text-align: center;
}

.carousel-caption-block{

  vertical-align: center;
  margin-top: auto;
  margin-bottom: auto;
}

.carousel-center-image {
  position: absolute;
  right: 10%;
  left: 10%;
  margin-left: auto;
  margin-right: auto;
  bottom: 20%;
  top: 10%;
  z-index: 9;
  padding-top: 20px;
  padding-bottom: 20px;
  color: #fff;
  text-align: center;
  vertical-align: middle;
  align-content: center;
  align-items: center;
}

.carousel-center-image{
  max-height: 70vh;

}

.carousel-left-image{
  position: absolute;
  right: 80%;
  left: 0px;
  bottom: 0px;
  top: 40%;
  z-index: 7;
  color: #fff;
  text-align: center;
  vertical-align: middle;
  align-content: center;
  align-items: center;
}

.carousel-left-image{
  max-height: 60vh;
  width: 40vw;
}

.hidden-mobile{

}

@media (max-width: 900px) {
        .hidden-mobile {
          display: none;
        }

        .carousel-caption-right {
          bottom: 15%;
          top: 10%;
          right: 10%;
          left: 10%;
          margin-left: auto;
          margin-right: auto;

        }
}


.carousel-h5{
  font-weight:lighter;
}

.carousel-h5-bold{
  font-weight: bolder;
}

.h5-float-left{
  float: left;
}

.h5-float-right{
  float: right;
}

.body-background {
    background: url(src/frontpage1.png) repeat 0 0;
    background-position: bottom;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.sphere-nav-link{

  background: rgba(255, 255, 255, 0.5);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #000;
}

.min-height-container{
  min-height: 100vh;
}

.dash-list{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;

}

.dash-list-item{
  border: 1px solid transparent;
  border-color: rgba(0, 0, 0, 0.1);
  border-radius: 20%
  padding-bottom: 5;
}

.dash-padding{
  padding-bottom: 10px;

}

.dash-nav-item{
  padding-top: 10px;
}

.sphere-tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}

/* Tooltip text */
.sphere-tooltip .sphere-tooltiptext {
  visibility: hidden;
  background: rgba(144, 144, 144, 0.4);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: black;
  text-align: center;
  padding: 5px 0;
  padding-left: 5px;
  padding-right: 5px;
  border-radius: 6px;

  /* Position the tooltip text - see examples below! */
  position: absolute;
  z-index: 1;
}

/* Show the tooltip text when you mouse over the tooltip container */
.sphere-tooltip:hover .sphere-tooltiptext {
  visibility: visible;
}

.sphere-tooltip .sphere-tooltiptext {
  width: 120px;
  bottom: 100%;
  left: 50%;
  margin-left: -60px; /* Use half of the width (120/2 = 60), to center the tooltip */
}

.sphere-invis{
  display: none;
}
.sphere-message {
    position: fixed;
    top: 20;
    left: 0;
    width: 100%;
}