body {
    background-image: url('../img/dev-policy-bg@2x-9489caa49496.jpg');
    color: #ffffff;
    font-family: 'Arial', sans-serif;
    overflow-x: hidden;
  }

  .hero-section {
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: space-around;
    height: 100vh;
    padding: 20px;
  }

  .hero-section h1 {
    padding-top: 60px;
    font-size: 3rem;
    font-weight: bold;
  }

  .hero-section h1 span {
    color: #ff4a4a;
  }

  .hero-section button {
    background-color: #ff4a4a;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    font-size: 1rem;
    cursor: pointer;
    margin-top: 20px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
}

.hero-section a {
  text-decoration: none;
  color: #fff;
}


  .hero-section button:hover {
    background-color: #e63e3e;
  }

  .hero-image{
    margin-top: 30px;
    padding-left: 30px;
    width: 350px;
    height: 350px;
    background-size: cover;
    background: url("../img/WhatsApp\ Image\ 2024-11-26\ at\ 12.17.15_6cfc375d.jpg") center center/cover no-repeat;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  }
/* 
  nav a {
    color: #ffffff;
    margin: 0 10px;
    text-decoration: none;
  }

  #nav a.active {
    color: #fff
}

#nav a.active::after, #nav a:hover::after {
  content: "";
  width: 40%;
  height: 2px;
  background-color: #d70707;
  position: absolute;
  bottom: -4px;
  left: 20px;
}

#nav a {
  padding: 0 20px;
  position: relative;
} */

#nav {
  background-color: transparent; /* Light background for better visibility */ /* Sticky header */
  top: 0; /* Sticks to the top */
  z-index: 1000; /* Ensures it stays above other content */
}

#nav img {
  height: 40px; /* Adjust logo size */
  width: auto;
}

.nav-links a {
  color: #fff;
  /*Darkcolorforcontrast*/margin: 0 15px;
  /*Addspacingbetweenlinks*/text-decoration: none;
  /*Removeunderline*/font-weight: 500;
  /*Slightlyboldforemphasis*/transition: color 0.3s ease-in-out;
   /* Smooth color transition */:;
  -webkit-transition: color 0.3s ease-in-out;
  -moz-transition: color 0.3s ease-in-out;
  -ms-transition: color 0.3s ease-in-out;
  -o-transition: color 0.3s ease-in-out;
}

.nav-links a:hover {
  color: #d70707; /* Highlight on hover */
}

.nav-links .active {
  color: #d70707; /* Highlight active link */
  font-weight: 600; /* Slightly bolder for active link */
  border-bottom: 2px solid #d70707; /* Bottom border for active state */
}

#itro{
  padding-left: 30px;
}

/* about page */

#education{
  background-color: #8da2fb1a;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  padding: 40px 0;
}


#education i{
  color: #d70707;
  padding-bottom: 15px;
  font-weight: 800;
  font-size: 20px;
}

#education .hov address{
  padding-bottom: 0;
}

#education .edu{
  font-size:10px ;
}

#detels{
  padding: 30px 0; 
}

section{
  color: #fff;
}

img{
  height: 330px;
  width: 330px;
}

#info {
  display: flex;
  align-items: center;
  justify-content:space-around;
  padding: 20px;
}
#info div{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-around;
  padding-top: 20px;
}

#info h1{
  color: #d70707;
  font-weight: 900;
}

#container{
  padding:10px;
  width: 100%;
}

#container h3,
#skill-goups h3{
color: #d70707;
}



#container .experience-buttons a{
  color: #fff;
  text-decoration: none;
  font-size: 20px;
}
#container .experience-buttons a:hover{
  color: #d70707;
}

#container .button {
  padding: 10px 20px;
  display: flex;
  justify-content: space-around;
}

#container .button a{
  font-size: 15px;
  font-weight: 600;
  /* padding-right: 30px; */
} 

#container .button a:hover {
  color:#d70707;
}
#container .hov {
  padding: 20px;
  display: flex;
  /* align-items: center; */
  flex-direction: column;
  /* justify-content: space-between; */
}
#container .hov:hover{
  background-color:#8da2fb1a ;
  border-radius: 20px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  -ms-border-radius: 20px;
  -o-border-radius: 20px;
} 

section {
  width: 100%; /* Full width */
  padding: 50px 0; /* Add vertical padding */
  background-color: transparent; /* Optional background color */
  overflow-x: hidden;
}

#education {
  text-align: center; /* Center align text */
  padding: 20px; /* Add padding inside */
  background-color:#8da2fb1a ; /* White background for the content block */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Optional shadow for depth */
  border-radius: 8px; /* Rounded corners */
}

#education i {
  font-size: 24px; /* Adjust icon size */
  color: #d70707; /* Primary color for the icon */
  margin-bottom: 10px; /* Space below the icon */
}

#education .hov {
  margin-top: 15px;
}

#education .p {
  font-weight: bold; /* Make the degree stand out */
  margin-bottom: 5px;
}

#education address {
  font-style: normal; /* Remove italic style */
  color: #555; /* Muted text color */
}

#education .edu {
  color: #007bff; /* Highlight the timeline */
  font-weight: 500;
}


#topic{
  display: flex;
  padding:20px 10px;

}

#topic:hover{
  border-radius: 20px;
  background-color: #8da2fb1a;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  -ms-border-radius: 20px;
  -o-border-radius: 20px;
}

#topic img{
  padding-right: 40px;
  height:200px;
  width: 280px;
}

#skill-goups .skills{
  padding: 10px;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
}

#skill-goups .skills:hover{
  background-color:rgba(156, 163, 175,0.3);
}

#animeshan{
  display:flex;
  align-items: center;
  justify-content: space-around;
  padding:30px ;
}

#animeshan div{
  height:50px;
  width:50px;
  border-radius: 50%;
  background-color: transparent;
  border:3px solid #fff;
  position: relative;
  animation: slide 4s infinite alternate;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
}

@keyframes slide {
  0% {
      left: 0; /* Start from the left */
  }
  100% {
      left: 300px; /* Move to the right */
  }
}


/* contact  page!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!1*/

#nav{
  display: flex;
  align-items: center;
  justify-content: space-around;
}

#nav img{
height: 40px;
width: 40px;
}

#next-pojects{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  padding: 30px;
}

#next-pojects span{
  color: #d70707;
}

#messages-group{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  padding: 40px 0;
}

#messages  .topic{
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  padding:20px;
  width: 200px;
  height: 200px;
  background-color: #1c1f2b;
  text-align: center;
  position: relative;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
}

@property --angle{
  syntax:"<angle>";
  initial-value: 0deg;
  inherits: false;
}

#messages .topic::after,
#messages .topic::before{
  content: "";
  height: 103%;
  width: 103%;
  position: absolute;
  background-image: conic-gradient(from var(--angle), transparent 50%,red);
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  z-index: -1;
  border-radius: 10px;
  animation: 3s spin linear infinite;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  -webkit-animation: 3s spin linear infinite;
}

#messages .topic::before{
  filter: blur(1.5rem);
  opacity: 0.5;
  -webkit-filter: blur(1.5rem);
}

@keyframes spin{
  from{
    --angle:0deg;
  }
  to{
    --angle:360deg;
  }
}
#messages i{
font-size: 40px;
padding-bottom: 20px;
} 

#messages h3{
  padding-bottom: 20px;
}

#messages a{
  text-decoration: none;
  color: #fff;
  background-color: transparent;
  border: 2px solid #fff;
  padding:5px 0;
  border-radius:20px;
  -webkit-border-radius:20px;
  -moz-border-radius:20px;
  -ms-border-radius:20px;
  -o-border-radius:20px;
} 

#messages a:hover{
  background-color: #8da2fb1a;
  color: #ff4a4a;
}

#gif{
  display: flex;
  align-items: center;
  justify-content: space-around;
}