/* v1.0 | 20240304
----------------------------------------------  */

body {
  background-color: var(--bg-dark);
  color: var(--light-secondary);
  font: normal normal 16px/150% 'LinearSans', arial, sans-serif;
  overflow-x: hidden;
}
a, a:visited {
  color: var(--primary-green);
  transition: all .2s;
}
a:hover {
  color: var(--secondary-green);
}


/* Overwrite bootstrap
---------------------------------------------- */
.container {
  width: 90%;
  max-width: 1300px;
  box-sizing: content-box;
}

div > p:last-of-type {
  margin-bottom: 0;
}
.btn,
.btn:visited {
  border-radius: 0;
  color: #ffffff;
}
.btn-arrow-down svg {
  transform: rotate(45deg);
}

/* About Page
---------------------------------------------- */
.about{
  background:url(../images/background2.svg);
    position: relative;
    background-size:cover;
    background-repeat: no-repeat;
    background-position: top;
    min-height: 100vh; 
    margin: 0;
    padding: 0; 
}

.about .intro{
  position: relative;
  font-size:1.125rem;
}
.about .intro::after{
  content: '';
  background:url(../images/line.svg);
  width: 800px;
  height: 800px;
  position: absolute;
  left: -16%;
  top:40%;
}

.about .logo{
  padding-bottom: 120px;
}

@media screen and (max-width: 720px){
  .about-main{
    overflow-x: hidden;
  }
  .about .logo{
    padding-bottom: 60px;
  }
  .about .intro{
    font-size:1rem;
  }
  .about .intro::after{
    left: -80%;
    top: 60%;
  }
}
.about .main-team-slider{
  /* min-height: 75vh; */
}

.about .user-main{
  min-height: 40vh;
}


.about .user-main{
  margin:0 auto;
  padding-top: 45px;
}
.about h1{
  opacity: 0.87;
}
.about p{
  opacity: 0.87;
}

.about small{
  opacity: 0.5;
  margin-bottom: 3px;
}

.about .item{
  background: #1C202C;
  border-radius: 20px;
  cursor: pointer;
  /* width: 100%; */
  width:200px;
  height: 200px;
  /* padding-top: 12px; */
  overflow: hidden; 
  position: relative;
  margin:0 10px;
 
}

.about .main-item{
  position: relative;
  width:auto;
  height: 200px;
}


.about .item img{
  width: 100%;
  /* max-width:175px; */
  height: 200px;
  margin: 0 auto;
  object-fit: cover;
  
}

.about .item .img-top {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 99;
}
 .about .item.is-selected .img-top {
  display: inline;
  animation: fadeIn 0.8s;

}
 .about .item.is-selected img:first-child {
  visibility: hidden;
  
}


.smooth-transition {
  transition: transform 10s ease; /* Adjust duration and easing as needed */
}


@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}


.about .item.is-selected{
  background: rgb(133,90,232);
  background: -moz-linear-gradient(220deg, rgba(133,90,232,1) 0%, rgba(67,44,158,1) 65%);
  background: -webkit-linear-gradient(220deg, rgba(133,90,232,1) 0%, rgba(67,44,158,1) 65%);
  background: linear-gradient(220deg, rgba(133,90,232,1) 0%, rgba(67,44,158,1) 65%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#855ae8",endColorstr="#432c9e",GradientType=1);
}

.about .item.is-selected > .personal-info{
  display: block;
}

.about .item.selected{
  background: rgb(133,90,232);
  background: -moz-linear-gradient(220deg, rgba(133,90,232,1) 0%, rgba(67,44,158,1) 65%);
  background: -webkit-linear-gradient(220deg, rgba(133,90,232,1) 0%, rgba(67,44,158,1) 65%);
  background: linear-gradient(220deg, rgba(133,90,232,1) 0%, rgba(67,44,158,1) 65%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#855ae8",endColorstr="#432c9e",GradientType=1);
}

.about .item:hover{
  background: rgb(255,211,120);
background: -moz-linear-gradient(137deg, rgba(255,211,120,1) 0%, rgba(255,240,210,1) 74%);
background: -webkit-linear-gradient(137deg, rgba(255,211,120,1) 0%, rgba(255,240,210,1) 74%);
background: linear-gradient(137deg, rgba(255,211,120,1) 0%, rgba(255,240,210,1) 74%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffd378",endColorstr="#fff0d2",GradientType=1);
}


@media screen and (max-width: 720px){
  .about .item:hover{
    background: rgb(133,90,232);
  background: -moz-linear-gradient(220deg, rgba(133,90,232,1) 0%, rgba(67,44,158,1) 65%);
  background: -webkit-linear-gradient(220deg, rgba(133,90,232,1) 0%, rgba(67,44,158,1) 65%);
  background: linear-gradient(220deg, rgba(133,90,232,1) 0%, rgba(67,44,158,1) 65%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#855ae8",endColorstr="#432c9e",GradientType=1);
  }
  
}
.about .personal-info {
  width: 100%;
  color: #fff;
  padding: 0px 40px;
  max-width: 600px;
  margin:0 auto;
  min-height: 250px;
  display: none;
  animation: fadeIn 1s;
}

.about .personal-info .name{
  font-size: 18px;
  opacity: .87;
}

.about .personal-info .title{
  font-size: 14px;
  opacity: .5;
}

.about .personal-info .quote{
  font-size: 24px;
  line-height: 1.2;
}
.personal-info.active {
  display: block;
}



.about .icons img{
  width: 16px;
  height: 16px;
  opacity: 0.5;
}
.about .icons img:hover{
  opacity: 1;
}