body{
    
    background-color: #080707;
    color: aliceblue;
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
}
#home {
  display: flex;
  align-items: center;
  justify-content: center;
}


/* Optional: Adjust image size and spacing if needed */
img.img-fluid {
  max-width: 100%;
  height: auto;
}


.Hire {
  margin-top: 20px; /* Adjust spacing as needed */
}


.Hire{
  color: #f0ad4e;
  padding: 0.7em 1.7em;
  font-size: 18px;
  border-radius: 0.5em;
  background: #050404;
  cursor: pointer;
  border: 1px solid #030303;
  transition: all 0.3s;
  box-shadow: 6px 6px 12px #f0ad4e, -6px -6px 12px #f0ad4e;
}

/*Posts*/
.post-img{
  height: 200px;
  width: auto;
  border: 5px solid rgb(146, 111, 111);
}




.boxer{
  padding: 25px;
  border-radius: 55px;
background: #434242;
box-shadow:  22px 22px 37px #1a1a1a,
             -22px -22px 37px #666666;
}

     /* Style for the video background */
     .video-background {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: -1;
      overflow: hidden;
      filter: blur(10px);
  }

  /* Make sure the content is above the video 
  .content {
      position: relative;
      z-index: 1;
      color: white;
      text-align: center;
      padding: 20px;
  }

  */

  .Tech_icon {
    
    height: 100px;
    width: auto;
    border-radius: 5%;
    box-shadow: 0px 10px 30px #f0ad4e; /* Adjust the values as needed */
  }
  .icon-ig2{
    height: 55px;
    width: 55px;
  }


.cn{
   padding: 20px;
  }
.rw{
  display: flex;
  flex-wrap: wrap;
}
.cl{
   display: flex;
  flex-direction: column;
}
  .projects {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .projects-img {
    width: 100%;
    height: auto;
  }

/* new education */

.circle{
  height: 150px;
  width: 150px;  
  border: 5px solid white;
  border-radius: 50px;
  background: #333333;
  box-shadow:  20px 20px 60px #f0ad4e,
               -20px -20px 60px #f0ad4e;
  
}

.Cert-img{
  height: 350px;
  width: 350px;
  border: 5px solid #f0ad4e;
  
}

.carousel-caption{
  color: #f0ad4e;
  text-shadow: 2px 0px 2px rgb(236, 245, 232);
  font-weight: 900;
}

/* experiment place */
/* Responsive font sizes */
.responsive-text {
  font-size: 1rem; /* Default font size */
}

/* Small screens */
@media (max-width: 767.98px) {
  .responsive-text {
    font-size: 1rem; /* Smaller font size for small screens */
    font-weight:bold; /* Make it bold like <strong> */
  }
}

/* Large screens */
@media (min-width: 992px) {
  .responsive-text {
    font-size: 1.25rem; /* Larger font size for large screens */
    font-weight: normal; /* Regular weight */
  }
}

/*New nav bar */

header[role="banner"] {
  #logo-main {
    display: block;
    margin: 20px auto;
  }
}

#navbar-primary.navbar-default {
  background: transparent;
  border: none;
  .navbar-nav { 
    width: 100%;
    text-align: center;
    > li {
      display: inline-block;
      float: none;
      > a {
        padding-left: 30px;
        padding-right: 30px;
        }
    }
  }
}


.nav-link {
  color: #ffc107; /* Bootstrap warning color */
}

.nav-link:hover {
  color: #d39e00; /* Darker warning color on hover */
}

.custom-toggler-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba(255, 193, 7, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

#contact{
  border-radius: 50px;
  background: #3c3e3c;
  box-shadow:  20px 20px 60px #333533,
               -20px -20px 60px #454745;


}

/* Reset link styles */
#footer a {
  text-decoration: none;
  color: inherit;
}

/* Space between icons */
.icon-item {
  margin: 0 10px;
}

/* Optional: Add any additional styling for icons here */
.icon-item svg {
  width: 24px; /* Adjust size as needed */
  height: 24px; /* Adjust size as needed */
}

.copyright-text {
  font-size: 14px;
  color: #6c757d; /* Adjust color as needed */
  margin: 20px 0;
}

#skills{
  border-radius: 50px;
background: #333333;
box-shadow:  20px 20px 60px #f0ad4e,
             -20px -20px 60px #f0ad4e;
}
#project{
  border-radius: 50px;
  background: #333333;
  box-shadow:  20px 20px 60px #f0ad4e,
               -20px -20px 60px #f0ad4e;
}

#contact{
  border-radius: 50px;
  background: #333333;
  box-shadow:  20px 20px 60px #f0ad4e,
               -20px -20px 60px #f0ad4e;
}

.typing span::after{
  content: '|';
  animation-name: blinking; 
  animation-duration: .71s; 
  animation-iteration-count: infinite;
}
@keyframes blinking{
  from{
      color: transparent; 
  }
  to{
      color: lightgrey; 
  }
}
.Poster{
  filter: drop-shadow(1px 1px 20px #f0ad4e);
}