/* css styles */

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap");

/*
@tailwind base;
@tailwind components;
@tailwind utilities;
*/

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
  scroll-behavior: smooth;
  color-scheme: dark;
}

.splash {
    background-image: url("img/herobg.png");
    background-size: cover;
    background-repeat: no-repeat;
  }

.hash-span {
    margin-top: -100px;
    padding-bottom: 100px;
    display: block;
  }
  
  .black-gradient {
    background: #000000; /* fallback for old browsers */
    background: -webkit-linear-gradient(
      to right,
      #434343,
      #000000
    ); /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(
      to right,
      #434343,
      #000000
    ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  }
  
  .violet-gradient {
    background: #804dee;
    background: linear-gradient(-90deg, #804dee 0%, #3c335000 100%);
    background: -webkit-linear-gradient(
      -90deg,
      #804dee 0%,
      rgba(60, 51, 80, 0) 100%
    );
  }
  
  .green-pink-gradient {
    background: "#00cea8";
    background: linear-gradient(90.13deg, #00cea8 1.9%, #bf61ff 97.5%);
    background: -webkit-linear-gradient(-90.13deg, #00cea8 1.9%, #bf61ff 97.5%);
  }
  
  .orange-text-gradient {
    background: #f12711; /* fallback for old browsers */
    background: -webkit-linear-gradient(
      to top,
      #f12711,
      #f5af19
    ); /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(
      to top,
      #f12711,
      #f5af19
    ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  
  .green-text-gradient {
    background: #11998e; /* fallback for old browsers */
    background: -webkit-linear-gradient(
      to top,
      #11998e,
      #38ef7d
    ); /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(
      to top,
      #11998e,
      #38ef7d
    ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  
  .blue-text-gradient {
    /* background: -webkit-linear-gradient(#eee, #333); */
    background: #56ccf2; /* fallback for old browsers */
    background: -webkit-linear-gradient(
      to top,
      #2f80ed,
      #56ccf2
    ); /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(
      to top,
      #2f80ed,
      #56ccf2
    ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  
  .pink-text-gradient {
    background: #ec008c; /* fallback for old browsers */
    background: -webkit-linear-gradient(
      to top,
      #ec008c,
      #fc6767
    ); /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(
      to top,
      #ec008c,
      #fc6767
    ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  
  /* canvas- styles */
  .canvas-loader {
    font-size: 10px;
    width: 1em;
    height: 1em;
    border-radius: 50%;
    position: relative;
    text-indent: -9999em;
    animation: mulShdSpin 1.1s infinite ease;
    transform: translateZ(0);
  }
  
  @keyframes mulShdSpin {
    0%,
    100% {
      box-shadow: 0em -2.6em 0em 0em #ffffff,
        1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2),
        2.5em 0em 0 0em rgba(255, 255, 255, 0.2),
        1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2),
        0em 2.5em 0 0em rgba(255, 255, 255, 0.2),
        -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2),
        -2.6em 0em 0 0em rgba(255, 255, 255, 0.5),
        -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7);
    }
    12.5% {
      box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.7),
        1.8em -1.8em 0 0em #ffffff, 2.5em 0em 0 0em rgba(255, 255, 255, 0.2),
        1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2),
        0em 2.5em 0 0em rgba(255, 255, 255, 0.2),
        -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2),
        -2.6em 0em 0 0em rgba(255, 255, 255, 0.2),
        -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5);
    }
    25% {
      box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.5),
        1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7), 2.5em 0em 0 0em #ffffff,
        1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2),
        0em 2.5em 0 0em rgba(255, 255, 255, 0.2),
        -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2),
        -2.6em 0em 0 0em rgba(255, 255, 255, 0.2),
        -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
    }
    37.5% {
      box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2),
        1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5),
        2.5em 0em 0 0em rgba(255, 255, 255, 0.7), 1.75em 1.75em 0 0em #ffffff,
        0em 2.5em 0 0em rgba(255, 255, 255, 0.2),
        -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2),
        -2.6em 0em 0 0em rgba(255, 255, 255, 0.2),
        -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
    }
    50% {
      box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2),
        1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2),
        2.5em 0em 0 0em rgba(255, 255, 255, 0.5),
        1.75em 1.75em 0 0em rgba(255, 255, 255, 0.7), 0em 2.5em 0 0em #ffffff,
        -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2),
        -2.6em 0em 0 0em rgba(255, 255, 255, 0.2),
        -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
    }
    62.5% {
      box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2),
        1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2),
        2.5em 0em 0 0em rgba(255, 255, 255, 0.2),
        1.75em 1.75em 0 0em rgba(255, 255, 255, 0.5),
        0em 2.5em 0 0em rgba(255, 255, 255, 0.7), -1.8em 1.8em 0 0em #ffffff,
        -2.6em 0em 0 0em rgba(255, 255, 255, 0.2),
        -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
    }
    75% {
      box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2),
        1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2),
        2.5em 0em 0 0em rgba(255, 255, 255, 0.2),
        1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2),
        0em 2.5em 0 0em rgba(255, 255, 255, 0.5),
        -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.7), -2.6em 0em 0 0em #ffffff,
        -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
    }
    87.5% {
      box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2),
        1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2),
        2.5em 0em 0 0em rgba(255, 255, 255, 0.2),
        1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2),
        0em 2.5em 0 0em rgba(255, 255, 255, 0.2),
        -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.5),
        -2.6em 0em 0 0em rgba(255, 255, 255, 0.7), -1.8em -1.8em 0 0em #ffffff;
    }
  }


  .design-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 100px 0;
    font-family: Jost;
  }
  
  .design {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .timeline {
    width: 100%;
    height: auto;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
  }
  
  .timeline-content {
    padding: 10px;
    background: #221a36;
    border-radius: 5px;
    color: white;
    padding: 1.50rem;
    transition: 0.4s ease;
    overflow-wrap: break-word !important;
    margin: 1rem;
    margin-bottom: 20px;
    border-radius: 6px;
  }
  
  .timeline-component {
    margin: 0px 20px 20px 20px;
  }
  
  @media screen and (min-width: 768px) {
    .timeline {
      display: grid;
      grid-template-columns: 1fr 3px 1fr;
    }
    .timeline-middle {
      position: relative;
      background-image: linear-gradient(45deg, #8e6df2, #5327bb, #381986);
      width: 3px;
      height: 100%;
    }
    .main-middle {
      opacity: 0;
    }
    .timeline-circle {
      position: absolute;
      top: 0;
      left: 50%;
      width: 25px;
      height: 25px;
      border-radius: 50%;
      background:  #8e6df2;
      -webkit-transform: translateX(-50%);
              transform: translateX(-50%);
    }
  }

  /* company logo */
  .company-info {
    display: flex;
    align-items: center;
    margin-top: 0.5rem;
  }
  .company-logo {
    width: 30px;
    height: 30px;
    border-radius: 50%;

  }

/* tech balls */
.tech-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  max-width: 800px; /* Optional: to center and limit total width */
  margin: 0 auto;    /* Optional: to center the grid horizontally */
  gap: 40px;
}
.tech-item {
  width: 112px;
  height: 112px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #232631;
  border-radius: 50%;
  position: relative;
  transition: transform 0.3s ease-in-out;
}
.tech-item img {
  width: 80%;
  height: 80%;
  object-fit: contain;
}
.tech-item:hover {
  transform: translateY(-10px);
}
.tech-item .tech-name {
  position: absolute;
  bottom: -20px;
  font-size: 12px;
  color: #fff;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}
.tech-item:hover .tech-name {
  opacity: 1;
}

/* Project Grid */

.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 2rem;
  margin-top: 1rem;
}

.project-card {
  background-color: #221a36;
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  text-align: center;
}

.project-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 30px rgba(0, 0, 0, 0.4);
}

.project-card img {
  width: 100%;
  height: 180px;
  object-fit: cover;
}

/* Contact Box */
.content-section h1 {
  text-align: center; /* Centers the text horizontally */
  width: 100%; /* Ensures it spans full width */
  margin-bottom: 20px; /* Adds space below the heading */
  font-size: 2rem; /* Adjust size as needed */
  color: white; /* Adjust color as needed */
}
.contact-container {
  display: flex;
  flex-direction: column;
  padding: 20px;
  border-radius: 15px;
  max-width: 50rem;
  text-align: center;
  background-color: #221a36;
  align-items: center;
  align-self: center;
}

.contact-icon {
  width: 30px; /* Adjust size as needed */
  height: auto; /* Maintain aspect ratio */
  margin-right: 8px; /* Space between icon and text */
  vertical-align: middle; /* Align icon with text */
  align-self: center;
}

.contact-info {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}
.contact-info a {
  color: #fff;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 10px;
}
.contact-info a:hover {
  text-decoration: underline;
}