* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: #ffffff !important;
}

.title {
  color: white;
}

.textanimate .text {
  position: relative;
  color: #4070F4;
  font-size: 30px;
  font-weight: 600;
}

.textanimate .text.first-text {
  color: #000000;
}

.text.sec-text:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  background-color: #ffffff;
  border-left: 2px solid #4070F4;
  animation: animate 4s steps(12) infinite;
}

@keyframes animate {
  40%,
  60% {
    left: calc(100% + 4px);
  }
  100% {
    left: 0%;
  }
}

/* Add a smooth transition to the scroll behavior */
body {
  scroll-behavior: smooth !important; 
}

/* Style the navigation links */
.navbar-nav .nav-link {
  color: #ffffff !important;
  font-weight: 400;
  text-decoration: none;
  transition: color 0.3s ease-in-out; /* Add a smooth color transition */
}

/* Style the active navigation link */
.navbar-nav .nav-link.active,
.navbar-nav .nav-link:hover {
  
  color: #4070f4 !important;
  text-decoration: underline;
  text-decoration-color: #ff0000;
}

/* Add a hover effect for navigation links */
.navbar-nav .nav-link:hover {
  text-decoration: underline;
  color: #4070f4 !important;
  
  text-decoration-color: #ff0000;
}

/* Add an animation effect for the clicked navigation link */
.navbar-nav .nav-link.active::after {
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  transform: scaleX(0); /* Initial scale to hide the line */
  transition: transform 0.3s ease-in-out; /* Add a smooth scale transition */
}

/* Apply the scale transformation on click */
.navbar-nav .nav-link:active::after {
  transform: scaleX(1);
}

.header {
  margin-top: 100px;
  margin-bottom: 50px;
}

.image1 {
  background-position: center;
  background-attachment: fixed;
}



col {
  width: 60% !important;
}

/* Responsive Styles */
@media screen and (max-width: 1000px) {
  .mobile-preview {
    margin-top: 60px;
  }

  .mobile-preview h1 {
    font-size: 30px !important;
  }

  .mobile-preview h2 {
    font-size: 35px !important;
    letter-spacing: 2px;
    margin-bottom: 0px !important;
  }

  .hireMebtn {
    display: block !important;
    width: 80% !important;
    margin: auto !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
  }

  .hireMebtn:hover {
    background-color: #4070F4 !important;
  }

  .textanimate {
    margin-bottom: 25px;
  }

  col {
    display: block !important;
    margin: auto !important;
    width: 100% !important;
  }

  .description img {
    margin-top: 20px;
    margin-bottom: -40px;
  }

  .bg {
    margin-top: 60px !important;
  }

  .mv {
    display: block;
    margin: 0px;
    width: 100% !important;
  }

  .dev2 {
    justify-content: center;
    align-items: start;
    position: relative;
    display: flex !important;
    float: left !important;
  }

  .projects-div {
    margin: auto;
    padding: 0;
    margin-top: -200px !important;
    margin-bottom: 10px;
  }

  .projects-div h1 {
    color: #4070F4 !important;
  }

  .col-sm {
    margin-bottom: 10px !important;
  }

  .divcolsection {
    display: inline-flex;
    width: 100%;
  }

  .myChart {
    width: 500px;
    height: 0;
  }

  .col-5 {
    display: block !important;
    margin: auto !important;
    width: 100% !important;
  }

  .h1tagdiv h1 {
    margin-top: 25px !important;
    font-size: 40px !important;
  }

  .h2tagdiv h1 {
    margin-top: 25px !important;
    font-size: 40px !important;
  }

  .custom-shadow {
    display: inline;
  }

  .graph-dev-align {
    padding-bottom: 25px;
  }

  .graph-dev-align h1 {
    margin-top: 20px !important;
    margin-bottom: 0px;
  }

  .h1tags-div-display {
    color: #4070F4 !important;
  }
  .sectfour {
    border: #0d6efd 5px solid;
    border-radius: 15px;
    background-color: azure;
    color: black;
    padding: 20px;
  }

  .sectfour h6 b {
    color: #000 !important;
    font-weight: 600;
  }
  .row .col-4{
    display: block;
    width: 90%! important;
  }
}