/* ---- reset ---- */
body {
  margin: 0;
  /* font: normal 75% Arial, Helvetica, sans-serif; */
  background-color: #ebf1fa;
}

canvas {
  display: block;
  vertical-align: bottom;
}

/* ---- particles.js container ---- */
#particles-js {
  position: absolute;
  width: 100%;
  height: 100%;
  /* background-color: #ffffff; */
  background-image: url("");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  background: none;
  opacity: 0.5;
}

/* ---- stats.js ---- */
.count-particles {
  background: #0000ff;
  position: absolute;
  top: 48px;
  left: 0;
  width: 80px;
  color: #0000ff;
  font-size: .8em;
  text-align: left;
  text-indent: 4px;
  line-height: 14px;
  padding-bottom: 2px;
  font-family: Helvetica, Arial, sans-serif;
  font-weight: bold;
}

.js-count-particles {
  font-size: 1.1em;
}

#stats,
.count-particles {
  -webkit-user-select: none;
  margin-top: 5px;
  margin-left: 5px;
}

#stats {
  border-radius: 3px 3px 0 0;
  overflow: hidden;
}

.count-particles {
  border-radius: 0 0 3px 3px;
}

/* Hero Text  */

#heroText{
  display: block !important;
  align-content: center;
  margin: 4px;
}
#heroText {
  min-height: 100px; /* Adjust this value based on the height of your text */
}


/* project design */
  
.project-item:hover {
  transform: translateY(-10px);
}
.projectImages{
  /* height: 250px; */
  align-content: center;
}
.projectImages img{
  height: 300px;
  object-fit: cover;
  border-radius: 5px;
  margin-right: 10px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
.projectImages {
  position: relative;
}
  
.proTextCont h2{
  color: #1842b6;
}

/* Container for projects */
.allProjects {
  padding: 0px 20px 20px;
  /* margin-top: 100px;  */
  /* position: relative; */
  /* z-index: 1; */
  background-color: transparent; /* Important for particle visibility */
  /* overflow: auto; Allow scrolling */
  /* max-height: calc(100vh - 100px); Set max height for scrolling */
}

/* new */
/* Magnifying glass overlay */

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

.projectImages .overlay i {
color: #fff;
font-size: 24px;
}

.projectImages img:hover + .overlay,
.projectImages .overlay:hover {
opacity: 1;
}



/* slick button design */

 .slick-next, .slick-prev {
  /* top: unset; */
  /* bottom: 0; */
  }

  .slick-next {
  right: 35px;
  
}
.slick-prev {
  left: 10px;
}

.slick-prev:before, .slick-next:before {

  opacity: 1;
  color: #ffffffaf; /* Change to your desired color */
  /* border: 1px solid black; */
  /* border-radius: 50%; */
  
}

.slick-prev:hover:before, .slick-next:hover:before {
  color: rgb(197, 197, 197); /* Change to the hover color */
}
.slick-prev:before, .slick-next:before {
  font-size: 44px; /* Change to your desired size */
}


/* PRoject View Button */
.glow-on-hover {
  /* width: 220px; */
  /* height: 50px; */
  padding: 10px 20px;
  /* border: none; */
  border-radius: 50px;
  border: none;
  /* outline: none; */
  color: #fff;
  background: #1842b6;
  cursor: pointer;
  position: relative;
  z-index: 0;
  border-radius: 10px;
}

.glow-on-hover:before {
  content: '';
  background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
  position: absolute;
  top: -2px;
  left:-2px;
  background-size: 400%;
  z-index: -1;
  filter: blur(5px);
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  animation: glowing 20s linear infinite;
  opacity: 0;
  transition: opacity .3s ease-in-out;
  border-radius: 10px;
}

.glow-on-hover:active {
  color: #000
}

.glow-on-hover:active:after {
  background: transparent;
}

.glow-on-hover:hover:before {
  opacity: 1;
}

.glow-on-hover:after {
  z-index: -1;
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: #1842b6;
  left: 0;
  top: 0;
  border-radius: 10px;
}

@keyframes glowing {
  0% { background-position: 0 0; }
  50% { background-position: 400% 0; }
  100% { background-position: 0 0; }
}


  /* Animation for project items */
  @keyframes slideInLeft {
      0% {
        opacity: 0;
        transform: translateX(-100%);
      }
      100% {
        opacity: 1;
        transform: translateX(0);
      }
    }
    
    @keyframes slideInRight {
      0% {
        opacity: 0;
        transform: translateX(100%);
      }
      100% {
        opacity: 1;
        transform: translateX(0);
      }
    }
    
    
    .project-item{
      /* display: flex; */
      /* width: 100%; */
      min-height: 260px;
      /* background-color: aqua; */
      background-color: #fff;
      padding: 20px;
      margin: 20px 50px;
      /* position: relative; */
      border-radius: 10px;
      line-height: 2;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      transition: transform 0.3s ease, opacity 0.3s ease;
      opacity: 0.3; /* Ensure the items are hidden by default */
      transition: transform 0.3s ease, opacity 0.3s ease;
    }
    .project-item p{
      font-size: 15px;
    }
    
    .project-item.slide-in-left {
      opacity: 1;
      animation: slideInLeft 1.3s ease-in-out forwards;
    }
    
    .project-item.slide-in-right {
      opacity: 1;
      animation: slideInRight 1.3s ease-in-out forwards;
    }

    /* Project Madal */
       /* Add some basic styling for the modal */
       .modal {
        display: none;
        position: fixed;
        /* z-index: 1; */
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        background-color: rgb(0,0,0);
        background-color: rgba(0,0,0,0.9);
    }

    .modal-content {
      display: flex;
      justify-content: center; /* Horizontal centering */
      align-items: center; /* Vertical centering */
        /* margin: 15% auto; */
        padding: 10px;
        /* width: 80%; */
    }

    .close {
        color: white;
        float: right;
        font-size: 28px;
        font-weight: bold;
    }

    .close:hover,
    .close:focus {
        color: #bbb;
        text-decoration: none;
        cursor: pointer;
    }

    .slick-slide img {
        width: 100%;
    }