@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
  scroll-behavior: smooth;
}
 
@keyframes fadeInAnimation {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
     }
}

.body{
  /*background: #dbdbdb;*/
     animation: fadeInAnimation ease 1s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

.main{
  width: 100%;
  /*height: 100vh;*/
  margin-top:60px;
  /*margin-bottom:60px;*/
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FFFFFF;
}

.main-content{
  width: 100%;
  /*height: 100vh;*/
  /*margin-bottom:60px;*/
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FFFFFF;
}

.text{
  padding-top:40px;
  padding-bottom:0px;
  position:relative;
  max-width: 80%;
  width: 100%;
  margin: auto;
}

.text h3{
  text-size:24px;
}

.content-image{
  border-radius: 20px;
  padding:1px;
  position:relative;
  max-width: 100%;
  width: 100%;
  margin: auto;
}

.content-image-dual{
  border-radius: 10px;

  display:inline;
  position:relative;
  max-width: 48%;
  width: 95%;
  margin: 10px;
}

.text p{
  line-height:2.0;
}

.image-header{
  position: relative;
  object-fit:cover;
  height: 400px;
  width: 100%;
}

.image-header img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-card{
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 80%;
  width: 100%;
  border-radius: 25px;
  padding: 30px;
  background: #ffffff;
  border: 1px solid #ffffff40;
  /*box-shadow: 0 5px 20px rgba(0,0,0,0.2);*/
}

.content{
  width: 100%;
  /*height: 50vh;*/
  padding-top:20px;
  padding-bottom:50px;
  display: block;
  align-items: center;
  justify-content: center;
  background-color:#3F00FF;
}
.content-card{
  color:#000000;
  background-color:white;
  margin:0 auto;
  margin-top:40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 80%;
  width: 100%;
  padding:30px;
  border-radius: 25px;
  border: 1px solid #ffffff40;
  box-shadow: 0 5px 20px rgba(0,0,0,0.2);
}

.content-card a{
  color:#000000;
  text-decoration:none;
  background-color:white;
  margin:0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 100%;
  width: 100%;
}

.content-card a:visited{
  color:#000000;
}

.content-card:hover{
  background-color:white;
  margin:0 auto;
  margin-top:40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 80%;
  width: 100%;
  padding:30px;
  border-radius: 25px;
  border: 1px solid #ffffff40;
  box-shadow: 0 5px 20px rgba(0,0,0,0.8);
}

.image{
  position: relative;
  height: 150px;
  width: 150px;
}

.image .profile-pic{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  /*box-shadow: 0 5px 20px rgba(0,0,0,0.4);*/
}
.image-content{
  position: relative;
  object-fit:cover;
  height: 400px;
  width: 100%;
  margin-bottom:10px;
}

.image-content .content-pic{
  border-radius: 10px;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /*box-shadow: 0 5px 20px rgba(0,0,0,0.4);*/
}
.data{
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 15px;
}
.data h2{
  font-size: 33px;
  font-weight: 600;
}

.data h3{
  font-size: 24px;
  font-weight: 600;
  color:white;
}

.data h4{
  font-size: 24px;
  font-weight: 600;
  color:#3F00FF;
}

span{
  font-size: 18px;
}

.company-year{
  font-size: 16px;
  margin-top: 8px; 
  background-color:#f4f4f4; 
  border-radius:16px; 
  padding-left:24px; 
  padding-right:24px; 
  padding-top:8px; 
  padding-bottom:8px; 
  color:grey;
}
  
.row{
  display: flex;
  align-items: center;
  margin-top: 30px;
}
.row .info{
  text-align: center;
  padding: 0 20px;
}

.row .info a{
  color:#000000;
  text-decoration:none;
  text-align: center;
}

.row .info a:hover{
  color:#4D4DFF;
  text-decoration:underline;
  text-align: center;
}

.buttons{
  display: flex;
  align-items: center;
  margin-top: 30px;
}
.buttons .btn{
  color: #fff;
  text-decoration: none;
  margin: 0 10px;
  padding: 8px 25px;
  border-radius: 25px;
  font-size: 18px;
  white-space: nowrap;
  background: #3F00FF;
  /*background: linear-gradient(to left, #007FFF 0%, #3F00FF 100%); */
}
.buttons .btn:hover{
  background: #4D4DFF;
  box-shadow: inset 0 3px 1px rgba(0,0,0,0.2);
}

input{
	margin-top:8px;
	padding:10px;
}

.sidepanel  {
  width: 0;
  position: fixed;
  z-index: 2;
  height: 100%;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 16px;
}

.sidepanel p {
  padding: 8px 8px 32px 32px;
  text-decoration: none;
  font-size: 14px;
  color: white;
  display: block;
  transition: 0.3s;
}

.sidepanel a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: white;
  display: block;
  transition: 0.3s;
}

.sidepanel a:hover {
  color: #4D4DFF;
}

.sidepanel .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
}

.openbtn {
  font-size: 20px;
  cursor: pointer;
  background-color: white;
  color: #3F00FF;
  padding: 10px 15px;
  border: none;
}

.openbtn:hover {
  background-color:#4D4DFF;
  color:white;
}

#navbar {
  z-index: 1;
  position: fixed;
  top: 0;
  width: 100%;
  display: block;
  transition: top 0.3s;
}

.footer{
	padding-top:20px;
	padding-bottom:20px;
	width:100%;
	display: flex;
	justify-content: center;
	background-color:#FAFAFA;
	color:#999999;
}

.chevron{
	color: #3F00FF;
}

.chevron:hover{
	color: #4D4DFF;
}

.buttons_2{
  display: flex;
  align-items: center;
  margin-top: 30px;
  display: flex;
  justify-content: center;
}
.buttons_2 .btn{
  color: #FFFFFF;
  border: 3px solid white;
  text-decoration: none;
  margin: 0 10px;
  padding: 8px 25px;
  border-radius: 25px;
  font-size: 18px;
  white-space: nowrap;
  background: #3F00FF;
  
  /*background: linear-gradient(to left, #007FFF 0%, #3F00FF 100%); */
}
.buttons_2 .btn:hover{
  /*background: #E1EBEE;*/
  box-shadow: inset 0 3px 1px rgba(0,0,0,0.2);
}

.contact{
  width: 100%;
  /*height: 50vh;*/
  padding-top:20px;
  padding-bottom:50px;
  display: block;
  align-items: center;
  justify-content: center;
  background-color:#FFFFFF;
}

.test{
	color:#3F00FF;
	padding:0 20px;
}

.test:hover{
	color:#4D4DFF;
}

.header{
	width:100%;
	height:480px;
}

/* Style the buttons */
.btn {
  border: 1px solid white;
  background:none;
  border-radius: 8px;
  padding: 4px 8px; 
  cursor: pointer;
  color:white;
}

/* Add a light grey background on mouse-over */
.btn:hover {
  background:#4D4DFF;

}

/* Add a dark background to the active button */
.btn.active {
  background-color: white;
  color: #3F00FF;
  border: 1px solid white;
}

.filterDiv {
  display: none; /* Hidden by default */
}

/* The "show" class is added to the filtered elements */
.show {
  display: block;
}

.coming-soon{
  display: block;
  align-items: center;
  justify-content: center;
  color: white;
  font-size:64px;
  position: relative;
  top: 30%;
}

.content-soon{
  width: 100%;
  height: 100%;
  padding-top:20px;
  padding-bottom:50px;
  display: block;
  align-items: center;
  justify-content: center;
  background-color:#3F00FF;
}

/* Top right text */
.top-right {
  position: absolute;
  top: 8px;
  right: 8px;
  padding:4px;
  border-radius:4px;
  background-color:#FFFFFF;
  color:#3F00FF;
  font-size:12px;

}

.top-left {
  position: absolute;
  top: 8px;
  left: 8px;
  padding:4px;
  border-radius:4px;
  background-color:red;
  color:white;
  font-size:12px;
  box-shadow: 0 0 4px 2px rgba(255, 0, 0, 0.6);
}

.top-left-nda {
  position: absolute;
  top: 8px;
  left: 8px;
  padding:4px;
  border-radius:4px;
  background-color:#3F00FF;
  color:white;
  font-size:12px;
  box-shadow: 0 0 4px 2px rgba(0,0,0, 0.2);
}

.bottom-left-highlight {
  position: absolute;
  bottom: 8px;
  left: 8px;
  padding:4px;
  border-radius:4px;
  background-color:#3F00FF;
  color:white;
  font-size:12px;
  box-shadow: 0 0 4px 2px rgba(0,0,0, 0.2);
}

.top-right-2 {
  position: absolute;
  top: 8px;
  right: 8px;
  padding:4px;
  border-radius:4px;
  background-color:red;
  color:white;
  font-size:12px;
  box-shadow: 0 0 4px 2px rgba(255, 0, 0, 0.6);
}

.image-sneak{
  position: relative;
  object-fit:cover;
  height: 100%;
  width: 100%;
}


.image-sneak .sneak-pic{
  border-radius: 10px;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /*box-shadow: 0 5px 20px rgba(0,0,0,0.4);*/
}

.sneak-content{
  position: relative;
  object-fit:cover;
  height: 100%;
  width: 100%;

}

.sneak-image{
  border-radius: 10px;
  padding:1px;
  position:relative;
  max-width: 100%;
  width: 100%;
  margin: auto;
}