html{
    font-size: 18px;
}

@font-face {
    font-family: 'Lato';
    src: url(Assets/lato-light-webfont.woff) format('woff'),
         url(Assets/lato-light-webfont.woff2) format('woff2');
}
@font-face {
    font-family: 'Slabo 13px';
    src: url(Assets/slabo13px-regular-webfont.woff) format('woff'),
         url(Assets/slabo13px-regular-webfont.woff2) format('woff2');
}




img{
    border-radius: 20px;
    object-fit: cover;
}
.bg-deep{
    background-color: #151018;
    padding-top: 80px;
    padding-bottom: 80px;
}
.bg-grey{
    background-color: #262131;
    padding-top: 80px;
    padding-bottom: 80px;
}
.bg-green{
    background-color: #4A9A86;
    padding-top: 80px;
    padding-bottom: 80px;
}

.bg-transparent{
    background-color: transparent;
    padding-top: 80px;
    padding-bottom: 80px;
}


.bg-linear-grey-green{
    background: linear-gradient(to bottom, #262131 , #4A9A86);
    padding-top: 80px;
    padding-bottom: 80px;
}

.bg-linear-green-grey{
    background: linear-gradient(to bottom, #4A9A86 , #262131);
    padding-top: 80px;
    padding-bottom: 80px;
}

.bg-linear-black-green{
    background: linear-gradient(to bottom, #151018 10%, #4A9A86 110%);
    padding-top: 80px;
    padding-bottom: 80px;
}

.feature-showcase{
    padding-bottom: 8rem;
    padding-top: 8rem;
}


.btn.btn-green{
    background-color: #4A9A86;
    color: white;
}

.btn.btn-grey{
    background-color: #262131;
    color: white;
}

.dropdown-item .text-light :hover{
 color: #262131;
}


img.card-img{
        object-fit: cover;
        border-radius: 20px;
}


img.card-icon{
       object-fit: contain;
       object-position: center;
       width: 8rem;
       margin-left: 2rem;
  
}
.card-content{
        text-align: center;
        padding-top: 32px;
        color:white;
        display: flex;
        flex-direction: column;
        justify-content: space-center;
        align-items: center;
        height: 12rem;
}

.my-card-2{
    max-width: 32rem;
    .card-img{
        height: 32rem;
    }
}

.my-card-3{
    max-width: 21rem;
    height: 28rem;
    .card-img{
        height:16rem;
    }  
}

.my-card-4{
    max-width: 17rem;
    .card-img{
        height:10rem;
    }
}



.overlay-card-4{
    position: relative;
    max-width: 17rem;
    height:24rem;
    border-radius: 20px;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: end;
    .card-content{
        text-align: center;
        padding: 0.5rem;
        z-index: 1;
        justify-content: end;
    }
}
.overlay-card-4::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 55%;
    background-color: rgba(0, 0, 0, 0.6); 
    border-radius: 0 0 20px 20px;
  }


.navbar.nav-transparent{
    background-color: transparent !important;
}
.navbar{
    z-index: 1;
}

.nav-link.nav-active{
    border-radius: 10px;
    border-color: white;
    border-width: 1px;
    border-style: solid;
}


.hero{
    height: 100vh;
    position: relative;
}

#home-hero-content{
    max-width: 48rem;
}
#vr-hero-content{
    max-width: 48rem;
}

#home-first-content{
    max-width: 56rem;
    animation-duration: 0.5s !important;
}


#home-hero-image{
    border-radius: 0px;
    object-position: left;
}

#home-last{
    background-color: #2A2E3A;
    border-radius: 20px;
    padding: 5rem;
}

#about-hero{
    background-image: url(Assets/About\ us-1.jpeg);
    background-size: cover;
    background-position: center;
    height: 100%;
    &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(40, 25, 30, 0.7);
}
}

.hero-text{
    z-index: 1;
    max-width: 48rem;
    color: white;
}

#software-hero{
    position:relative;
    background-image: url(Assets/software-1.jpeg);
    background-size: cover;
    height: 48rem;
    background-position: center;
    &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height:100%;
        background-color: rgba(0, 0, 5, 0.6);

}
}

#mobile-hero{
    position:relative;
    background-image: url(Assets/mobile-1.JPG);
    background-size: cover;
    height: 36rem;
    background-position: center;
    &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height:100%;
        background-color: rgba(0, 0, 20, 0.5);

}
}

@keyframes slide-up {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}


@keyframes slide-left {
    0% {
        opacity: 0;
        transform: translateX(-20px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slide-right {
    0% {
        opacity: 0;
        transform: translateX(20px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slide-left-obvious {
    0% {
        opacity: 0;
        transform: translateX(-200px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slide-right-obvious {
    0% {
        opacity: 0;
        transform: translateX(200px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

.slide-up {
    opacity: 0;
}

.slide-up.animate {
    animation: slide-up 1s forwards 0.2s;
}


.slide-left{
    opacity: 0;
}

.slide-left.animate {
    animation: slide-left 1s forwards 0.2s;
}

.slide-right{
    opacity: 0;
}

.slide-right.animate{
    animation: slide-right 1s forwards 0.2s;
}

.slide-left-obvious{
    opacity: 0;
}

.slide-left-obvious.animate{
    animation: slide-left-obvious 1s forwards 0.5s;
}

.slide-right-obvious{
    opacity: 0;
}

.slide-right-obvious.animate{
    animation: slide-right-obvious 1s forwards 0.5s;
}

.divider{
    top: 0;
    left: 0;
    width: 100%;
    height: 8rem; 
}
.black-green-right{
    background: linear-gradient(to bottom left, #151018 50%,  #4A9A86 50%); 
}
.green-grey-left{
    background: linear-gradient(to bottom right, #4A9A86 50%,  #262131 50%); 
}
.green-grey-right{
    background: linear-gradient(to bottom left, #4A9A86 50%,  #262131 50%); 
}
.grey-green-left{
    background: linear-gradient(to bottom right, #262131 50%,  #4A9A86 50%); 
}
.green-black-left{
    background: linear-gradient(to bottom right, #4A9A86 50%,  #151018 50%); 
}

.timeline-container{
    position: relative;
    width: 50%;
    background-color: transparent;
    padding-left: 3rem;
    padding-right: 3rem;
    padding-bottom: 5rem;
}

.left-container{
   left:0;
   
}


.timeline-text{
    background-color: #4A9A86;
    border-radius: 20px;
    padding: 2rem;
}

.timeline-img{
    width: 100%;
    object-fit: cover;
    height: 10rem;
}

.timeline-dot{
    background-color: #4A9A86;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    position: absolute;
    right:-1rem;
    top: 35%;
}

.timeline-dot-next{
    background-color: #4A9A86;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    position: absolute;
    right:-1rem;
    top: calc(135% + 0.5rem);
}

.timeline-tag{
    position: absolute;
    left: calc(100% + 3rem);
    top: 35%;
    width: 20rem;
}

.right-container{
    left:50%;
    .timeline-tag{
        left:-24rem;
        text-align: right;
    }
}

.left-line{
  right:-0.25rem; 
}

.line{
  position:absolute;
  width: 0.5rem;
  height: 27rem;
  background-color: #4A9A86;
  z-index: 1;
  opacity: 0;
  top:-5rem;
  transition: opacity 1s ease 1s;
  transform : top 1s ease;
}

.line.animate{
    opacity: 1;
    top:0;
}

.right-line{
    left:-0.25rem;
  }
  


#mobile-contact{
    position: relative;
    background-image: url(Assets/mobile-5.JPG);
    background-position: center;
    background-size: cover;
    height: 24rem;
    &::before{
        content: '';
        background-color: rgba(0, 0, 20, 0.5);
        position: absolute;
        width: 100%;
        height: 100%;
        top:0;
        left: 0;
    }

}

.icon-item{
    width: 12rem;
    margin-bottom: 3rem;
}

.overlay-container{
    position: relative;
    background-position: center; 
    background-size: cover;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    min-height: 16rem;
}

.vr-container{
    height: 48rem;
}

.overlay-background{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 20px;
    background: rgba(0, 0, 0, 0.5); 
    opacity: 0;
    transition: opacity 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.overlay-icon{
    position: relative;
    text-align: center;
    opacity: 0;
    top: 3rem;
    transition: top 0.5s ease;
    margin-bottom: 1rem;
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
}

.overlay-text{
    position: relative;
    text-align: center;
    opacity: 0;
    top: 4rem;
    transition: top 0.8s;
    color: white;
}

.overlay-container:hover .overlay-background {
    opacity: 1;
}

.overlay-container:hover .overlay-icon,
.overlay-container:hover .overlay-text {
    opacity: 1; 
    top:0;
}

.carousel-item{
    display: flex;
    justify-content: center;
    align-items: center;

}

.contact-map{
    padding-bottom: 3rem;
}

.carousel-image{
    width: 100%;
    height: 48rem;
}

#map-small{
    display: none;
}

.contact-content{
    padding-left: 10rem;
  
}

@media (max-width: 1100px) {
    html{
        font-size: 16px !important;
    }
    h1{
        font-size: 2.027rem !important;
        font-family: 'Slabo 13px';
    }
    h2{
        font-size: 1.802rem !important;
        font-family: 'Slabo 13px';
    }
    h3{
        font-size: 1.602rem !important;
        font-family: 'Slabo 13px';
    }
    h4{
        font-size: 1.424rem !important;
        font-family: 'Slabo 13px';
    }
    h5{
        font-size: 1.266rem !important;
        font-family: 'Slabo 13px';
    }
    h6{
        font-size: 1.125rem !important;
        font-family: 'Slabo 13px';
    }
    p{
        font-family: 'Lato';
        font-weight: 300;
    
    }
    .divider{
        height:4rem;
    }
    #software-hero{
        height:36rem;
    }

    .timeline-tag{
        display:none;
    }    
    .timeline-dot{
        right: -3rem;
    }
    .timeline-dot-next{
        right: -3rem;
    }
   .right-container{
      left:0;
      .timeline-tag{
          left: calc(100% + 3rem);
          text-align: left;
      }
    }
    .right-line{
        right: -2.35rem;
        left: auto;
    }
    .left-line{
        right:-2.35rem;
    }
    .line{
        height: 31.5rem;
    }
    #line::after{
       height: 205rem;
    }
    .timeline-container{
        padding-left: 1rem;
        padding-right: 1rem;
        width: 80% !important;
        .slide-right.animate{
            animation: slide-left 1s forwards 0.2s;
        }
    }
    .hero{
        height: auto;
    }
    #home-hero-content{
        padding-left: 2rem;
        padding-right: 2rem;
        min-height: 32rem;        
    }
    #home-hero-img{
        max-height: 32rem;
    }
    .my-card-2{
        .card-img{
            max-height: 16rem;
        }
    }
    #about-hero{
        min-height: 48rem;
    }
    #home-last{
        padding: 2rem;
    }
    .bg-grey{
        padding-bottom: 40px;
        padding-top: 40px;
    }
    .bg-green{
        padding-bottom: 40px;
        padding-top: 40px;
    }
    .bg-deep{
        padding-bottom: 40px;
        padding-top: 40px;
    }
    .bg-transparent{
        padding-top: 40px;
        padding-bottom: 40px;
    }
    .bg-linear-black-green{
        padding-top: 40px;
        padding-bottom: 40px;
    }
    .dropdown-item{
        color: white !important;
    }
    
    .dropdown-divider{
        background-color: transparent !important;
    }
    
    .dropdown-menu{
        background-color: transparent !important; 
        border-color: transparent !important;
    }
    .feature-showcase{
        padding-bottom: 4rem;
        padding-top: 4rem;
    }
    #mobile-hero{
        height: 24rem;
    }
    .overlay-card-4{
        height: 20rem;
        max-width: 20rem;
        margin-bottom: 2rem;
    }
    .icon{
        width: 5rem;
        height: 5rem;
    }
    .icon-item{
        width: 10rem;
    }
    #carouselExampleIndicators{
        max-height: 16rem;
    }
    .vr-container{
        height: 24rem;
    }
    .vr-showcase{
        height: 40rem;
    }
    .carousel-indicators{
        position: relative !important;
        top: 1rem !important;
    }
    .carousel-control-prev{
        position: absolute !important;
        top: 50% !important;
    }
    .carousel-control-next{
        position: absolute !important;
        top: 50% !important;     
    }
    #map-large{
        display: none;
    }
    #map-small{
        display: block;
    }
    .contact-content{
        padding-left: 3rem;
    }
    #contact{
        height: 100vh ;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

}
@media (min-width:1100px) {
    h1{
        font-size: 3.815rem !important;
        font-family: 'Slabo 13px';
    }
    h2{
        font-size: 3.052rem !important;
        font-family: 'Slabo 13px';
    }
    h3{
        font-size: 2.44115rem !important;
        font-family: 'Slabo 13px';
    }
    h4{
        font-size: 1.953rem !important;
        font-family: 'Slabo 13px';
    }
    h5{
        font-size: 1.563rem !important;
        font-family: 'Slabo 13px';
    }
    h6{
        font-size: 1.25rem !important;
        font-family: 'Slabo 13px';
    }
    p{
        font-family: 'Lato';
        font-weight: 300;
    
    }
}