.modal{
  display:none;
}
.timeline-container {
position: relative;
padding-left:7%;
margin: auto;
}

.timeline-item {
display: flex;
margin-bottom: 1em;
margin-top: 1em;

}
.timeline-content > img{
width: 35%;
display: block;
margin-left: auto;
margin-right: auto;
}

.timeline-dot {
width: 12px;
height: 10px;
background-color: aliceblue;
border-radius: 50%;
position: relative;
left: -5px; /* Adjust this value to align the dot on the line */
}

.timeline-content {
border-radius: 0.4em;
box-shadow: 0 3px 6px rgba(0,0,0,0.1);
width: 76%;
font-size:0.9em;
padding:2em;
padding-top:1em;
background-color:#19284b;
/* Adjust spacing between dot and content */
}
.timeline-content > h3{
color:white;
font-size:2em;
}
#particles-js {
position: relative;
top:0;
left:0;
right:0;
bottom:0;
width: 100%;
background:linear-gradient(90deg, #fafafd, #ebf1ff);
background-position: 50% 50%;
padding-top:2em;
margin-top:0em;
display:grid;grid-template-columns:50% 50%;text-align:left;

}
.rsteps{
margin-left: auto;
margin-right: auto;
background-color:#1b3c9a;
position:relative;
border-radius:0.3em;
padding:10%;
}
.rsteps > div{
font-weight:bold;
}
@keyframes slideIn {
from {
transform: translateX(-100%); /* Starts off-screen to the left */
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
.toprow8 {
animation-duration: 1s; /* Duration of the slide-in effect */
animation-fill-mode: forwards; /* Keeps the element in the final state after the animation */
}

.toprow8.scrolled {
animation-name: slideIn; /* Apply the slide-in animation */
}
.featureholds{
font-size:1.4em;
}
#griditit.shrunk {
padding: 0;
border: none;
box-shadow: none;
display:none !important;
}
/* For Chrome, Safari, and Opera */
::-webkit-scrollbar {
width: 20px !important; /* Increase width of scrollbar */
z-index: 10000000 !important;
}

::-webkit-scrollbar-track {
background: #f1f1f1 !important; /* Change the track (background) color */
}

::-webkit-scrollbar-thumb {
background: #888; /* Change the scrollbar color */
}

::-webkit-scrollbar-thumb:hover {
background: #555; /* Change the scrollbar color on hover */
}

/* For Internet Explorer and Edge */
body {
scrollbar-width: thick; /* Increase width of scrollbar */
scrollbar-color: #888 #f1f1f1; /* Change the scrollbar and track color */
}
.intakeProcess{
      padding:1em;
      background-color:aliceblue;
      border-radius:1em;
  }

  .swal-button{
  background-color:#478eff !important;
}

.sourcerep{
  background-color:#95b0f9;
  padding:1em;
  font-size:0.8em;
  border-radius:1em;
  margin-top:1em;
  opacity:0;
  height:0;
  transition: opacity 2s;
}

.viewSources{
  font-weight:bold;
  color:#333;
  text-decoration: none;

}

.sourcerep > label{
  font-size:1.1em;
  width:100%;

}
.fa-arrow-right{
  font-size:1em;
  color:#0d172e;
}

.sourcerep > i{
  color:#ffd1d1;
  font-size:0.6em;
}
h1 > i{
font-size:inherit;
color:inherit;
}
.sourcerep > a{
  color:white;
}

  .introBox{
      padding: 0.4em 2em !important;
      text-align:center !important;
      z-index:2;
  }

  .intromini{
      z-index:2;
  }
  .ddl{
      text-align:center;
      border-radius:1em;
      border:none;
      background-color:#4d557e;
      color:aliceblue;padding:0.4em 0.6em;
  }

  .ddl > option{
      background-color:#333;
          }

          .introBox > h1{
              margin-top:0em !important;
          }
input{
z-index:99;
position:relative;
}

.featureContHold >div >p{
text-align:left;padding:0 3vw;font-family:Montserrat;

}

.featureContNew{
width:80vw;
margin-left:auto;
margin-right:auto;
border-radius:1em;
padding:4vh;
color:#333 !important;
font-size:3vh;
display:none;
padding-top:8vh;
}

.featureContNew > p{
text-align:left;
padding:0em 4vw;
}
.featureContHold{
display:grid;
grid-template-columns: 40% 40%;
justify-content:center;
column-gap:1em;
row-gap:1em;
font-size:1.2em;
}

.monkea > a{
color:#333;
text-decoration:none;
font-family:'Dancing Script';
font-size:4vh;
}

.monkea > a:hover{
color:pink;
}

.featureContHold > div{
background-color:#fafcff;
border-radius:1em;
padding:1em;

}
body{
margin:0em;
font-size:1vw;
background:linear-gradient(90deg, #fafafd, #ebf1ff) !important;
min-height: 100%;
display: flex;
flex-direction: column; /* This ensures the body grows with its content */
}
h3 > i{
color:#9191ff !important;
}
.griditit{
display:grid;
grid-template-columns: repeat(8, 1fr);
gap: 2px;
height:100%;
transition: width 0.1s;
width:50vw;
}
.info-section {
  color: #333;
  font-weight:300;
  font-size:1.3em;
  font-family:Merriweather !important;
  border-radius: 0.4em;
  margin-bottom: 1em;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 82, .15);
  padding: 1em 2em;
  background:#b7caff;
  width: 48%;
  text-align:left;
  margin-left:2em;

}
li{
  margin-bottom:0.3em;
}
#widthagain{
transition: width 0.1s;

}
.figure:hover{
cursor: pointer;
}
ul{
  height:auto;
  list-style-type: circle;
  border:none !important;
}
.agrid{
  display: grid;
  grid-template-columns: auto auto;
}
li{
  font-family:Montserrat;
}
.figure {
width: 30px;
height: 30px;
background-color: aliceblue; /* Default color */
border-radius: 50%; /* Makes the divs circular */
margin: 5px;
transition: transform 0.3s, font-size 0.3s;
position: relative;
display: flex;
align-items: center;
justify-content: center;
color: white; /* Text color */
font-size: 0; /* Initially hide the text */
overflow: hidden; /* Keep the text inside the circle */
z-index: 1;
}
.highlighted {
animation: pulse 2s infinite;
}

.highlighted:hover {
animation: none; /* Stop the pulsating */
}

@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.1); }
100% { transform: scale(1); }
}
#progressBar {
background-color: #ddd;
border-radius: 10px; /* Rounded borders */
margin: 0 auto; /* Center the progress bar */
margin-bottom:2em;
margin-top:4%;
}

#progress {
height: 10px;
width: 0%;
background-color: #176ae5;
border-radius: 10px; /* Rounded borders */
transition: width 0.2s ease-in-out; /* Smooth transition for width change */
}

.no-transition {
transition: none;
}
#percentDisplay{
font-size:4em;
display:absolute;
bottom:15%;
right:5%;
}

.firstlist{
margin-top:2%;
background-color: #0000002e;
padding: 1em;
position:relative;
margin-left:auto;
margin-right:auto;
width:85%;
}
p{
color:white;
margin-left:5%;
width:100%;
font-size:1.2vw;
line-height:1.4em;
}
.firstlist > div{
margin-top:4%;
margin-bottom:6%;
}
a:link, a:visited {
color: #333; /* Or any color you prefer */
text-decoration: none; /* Optional: removes underline */
}
.briefs > a:link, .briefs > a:visited {
color: aliceblue; /* Or any color you prefer */
text-decoration: none; /* Optional: removes underline */
}
.deeb{
color:white;
font-family: 'Montserrat';
font-size:1.7em;
margin-bottom:0.3em;
}
.deeb>i{
color:cornflowerblue;
}

.deeb:hover{
opacity:1;
}
.deeb1:hover{
cursor:pointer;
color:#6b66da;
}
.deeb2:hover{
cursor:pointer;
color:#f84f39;
}
.deeb3:hover{
cursor:pointer;
color:#9191ff;
}
.deeb4:hover{
cursor:pointer;
color:cornflowerblue;
}
.deeb5:hover{
cursor:pointer;
color:steelblue;
}
.deeb6:hover{
cursor:pointer;
color:lightcoral;
}
.deeb7:hover{
cursor:pointer;
color:#f84f39;
}

.deeb8:hover{
cursor:pointer;
color:#6b66da;
}
.deeb1{
opacity:0.95;
}.deeb2{
opacity:0.9;
}.deeb3{
opacity:0.8;
}.deeb4{
opacity:0.75;
}.deeb5{
opacity:0.7;
}.deeb6{
opacity:0.6;
}.deeb7{
opacity:0.55;
}.deeb8{
opacity:0.5;
}
.deeb9{
opacity:0.4;
}
.deeb9:hover{
cursor:pointer;
color:cornflowerblue;
}
.deeb10{
opacity:0.35;
}
.deeb10:hover{
cursor:pointer;
color:#f84f39;
}
.deeb11{
opacity:0.3;
}
.deeb10:hover{
cursor:pointer;
color:#f84f39;
}
.deeb12{
opacity:0.25;
}
.imgcon > img{
width:100%;
border-radius:0.4em;
}
.imgcon{
display:grid;
grid-template-columns: auto auto auto auto auto;
gap:1em;
}
.deeb11:hover{
cursor:pointer;
color:#4ae5ef;
}
.deeb13{
opacity:0.2;
}
.deeb12:hover{
cursor:pointer;
color:cornflowerblue;
}

.deeb13:hover{
cursor:pointer;
color:#f84f39;
}

.deeb span {
font-size: 0.8em;
color: white;
display:block;
opacity: 0;
height:0;
font-family:montserrat;
overflow:hidden;
visibility: hidden;
margin-top:0;
transition: margin 1s ease, height 1s ease, opacity 1s ease, visibility 1s ease;

}
.deeb:hover span {
display:block;
opacity: 1;
margin-top:1em;
height:6em;
visibility: visible;
}
.button2{
color:white !important;
background-color:#203058f7 !important;
border-radius:0.2em !important;
border:none !important;
width: auto !important;
}
.button2:hover{
background-color:#13224b !important;

}
.vertical-div {
transform: rotate(-90deg);
transform-origin: left top;
position: relative;
}
.fa-duotone{
color: #4c6ecd;
font-size: 1em;
}
.pepe{
  color:#333;text-align:left;font-size:1.4em;margin-left:2em;width:66%;padding-left:1em;border-left:solid 1px #d7d7ff;
}
.timeline-content > p{
margin-left:0;
font-size:1.4em;
}
.homelefttop > label{
  font-size:1.7em;
  font-family:Montserrat;
  font-weight:500;
  text-align: left;
  display: block;
  margin-left:1.6em;
}
.fa-angles-right{
color:#264ec1;
font-size:inherit;
}
.fa-star{
color:#6eb5fe;
}
h3{font-size:1.6em;}
html{
scroll-behavior:smooth;overflow-x: hidden;height:100%;width:100%;background-color:#1b1a27;
}
.homelefttop{
display:block;width:80%;margin-top:7em;margin-left:20%;
}
.hometitle{
color:#26253b;padding:0em 1em;font-size:2.7em;font-weight:normal;text-align:left !important;margin-bottom:0.4em;
}
@media (max-width: 480px) {
.hometitle {
font-size:6em       /* Further adjust padding for very small screens */
}
}