.header{
    background-color: rgb(103, 14, 96);
    width: 100%;
}
body {
    background-color: rgb(50, 47, 50);
    font-family: Georgia, 'Times New Roman', Times, serif;
}
.icon{
    height: 50px;
    width: 50px;
    border-radius: 50%;
}
.About{
    padding: 50px;
    color: rgb(250, 250, 250);
    display: flex;
}
.profile {
    color: azure;
    border-radius: 50%;
    border: 3px solid transparent; /* Set initial border color */
    box-shadow: 0 0 20px 5px rgba(221, 27, 255, 0.7); /* Initial glow effect */
    transition: box-shadow 0.3s ease-in-out; /* Smooth transition for the glow effect */
}
.header .nav-link span {
    color: azure;
    font-size: 20px;
    font-family: Georgia, 'Times New Roman', Times, serif;
}
.typing {
    color: azure;
    font-size: 24px;
    font-family: Georgia, 'Times New Roman', Times, serif;
}
.one {
    word-wrap: break-word;
    overflow-wrap: break-word;
    overflow: hidden;
}
.page1{
    padding: 80px;
    color: azure;
}
.card{
    box-shadow: 0 0 20px 5px rgba(221, 27, 255, 0.7);
    transition: transform 0.3s ease-in-out;
    border-radius: 20px; 
    overflow: hidden; 
    border: 10px solid rgb(201, 20, 20);
}

.card-body{
    background-color: rgb(47, 8, 38);
}
.card-title{
    color: aliceblue;
}
.card-text{
    color: azure;
}
.btn{
    background-color:rgb(93, 177, 14) ;
}
.page2{
    display: flex;
}
.hi{
    display: inline;
    color: aliceblue;
}
h5{
    color: aliceblue;
}
.box {
    display: flex;
    align-items: center;
    align-content: center;
    transition: transform 0.3s ease-in-out;
    border: 2px solid rgb(155, 12, 143);
    border-radius: 10px;
    box-shadow: 0 0 20px 5px rgba(221, 27, 255, 0.7);
    padding: 30px;
    margin-bottom: 20px;
    width: fit-content;
}

.box:hover {
    transform: scale(1.05); 
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3); 
}
.project{
    height: 80px;
    width: 80px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    justify-items: center;
    position: relative;
    top: 8px;
}
.page3{
    width: 100%;
}
.inbuilt{
    padding: 15px;
}
.inbuilt a{
    color: rgb(221, 108, 234);
}
.box2{
    border: 2px solid rgb(221, 108, 234);
    height: fit-content;
    text-align: center;
    margin-bottom: 20px;
    max-width: 300px;
    box-shadow: 0 0 20px 5px rgba(221, 27, 255, 0.7);
    border-radius: 20px;
    
}
.position{
    display: flex;
    align-items: center;
    justify-content: center;
    align-content: center;
}
.pic{
    border-radius: 50%;
    position: relative;
    top: 10px;
    height: 100px;
    width: 100px;
    margin-bottom: 10px;
}
.position p{
    padding: 30px;
    
}
.fa {
    padding: 20px;
    font-size: 30px;
    width: 50px;
    text-align: center;
    text-decoration: none;
  }
  
  /* Add a hover effect if you want */
  .fa:hover {
    opacity: 0.7;
  }
  
  /* Set a specific color for each brand */
  
  /* Facebook */
  .fa-instagram {
    border-radius: 50%;
    text-align: center;
    color:rgb(221, 108, 234);

  }
  
  /* Twitter */
  .fa-linkedin {
    border-radius: 50%;
    text-align: center;
    color:rgb(221, 108, 234);

  }
  .icon{
    border: 2px solid rgb(221, 108, 234);
  }

  .icons {
    display: flex;
    justify-content: center;
    align-items: center;
    justify-items: center;
    gap: 20px;
    margin-top: 20px;
}

.icon {
    width: 60px;
    height: 60px;/* Change as needed */
    border-radius: 50%;
   
}
#email{
    background-color: rgb(47, 8, 38);
    border: 2px solid rgb(221, 108, 234); 
    border-radius: 20px;
    height: 50px;
    box-shadow: 0 0 20px 5px rgba(221, 27, 255, 0.7);
    color: aliceblue;
}
#texta{
    background-color: rgb(47, 8, 38);
    border: 2px solid rgb(221, 108, 234); 
    border-radius: 20px;
    height: 50px;
    box-shadow: 0 0 20px 5px rgba(221, 27, 255, 0.7);
    color: aliceblue;
}
#name{
    background-color: rgb(47, 8, 38);
    border: 2px solid rgb(221, 108, 234); 
    border-radius: 20px;
    height: 50px;
    box-shadow: 0 0 20px 5px rgba(221, 27, 255, 0.7);
    color: aliceblue;
}
#send{
    background-color: rgb(221, 108, 234);
    size: 50px;
    border-radius: 30px;
    font-size: 25px;
    box-shadow: 0 0 20px 5px rgba(221, 27, 255, 0.7);
}

.page5{
    text-align: center;
    align-items: center;
    height: 100vh;
}
.fa-github{
    border-radius: 50%;
    text-align: center;
    color:rgb(221, 108, 234);
    font-size: 40px;
    size: 40px;}

.header{
    background-color: rgb(103, 14, 96);
    width: 100%;
}
body {
    background-color: rgb(50, 47, 50);
    font-family: Georgia, 'Times New Roman', Times, serif;
}
.icon{
    height: 50px;
    width: 50px;
    border-radius: 50%;
}
.About{
    padding: 50px;
    color: rgb(250, 250, 250);
    display: flex;
}
.profile {
    color: azure;
    border-radius: 50%;
    border: 3px solid transparent; /* Set initial border color */
    box-shadow: 0 0 20px 5px rgba(221, 27, 255, 0.7); /* Initial glow effect */
    transition: box-shadow 0.3s ease-in-out; /* Smooth transition for the glow effect */
}
.header .nav-link span {
    color: azure;
    font-size: 20px;
    font-family: Georgia, 'Times New Roman', Times, serif;
}
.typing {
    color: azure;
    font-size: 24px;
    font-family: Georgia, 'Times New Roman', Times, serif;
}
.one {
    word-wrap: break-word;
    overflow-wrap: break-word;
    overflow: hidden;
}
.page1{
    padding: 80px;
    color: azure;
}
.card{
    box-shadow: 0 0 20px 5px rgba(221, 27, 255, 0.7);
    transition: transform 0.3s ease-in-out;
    border-radius: 20px; 
    overflow: hidden; 
    border: 10px solid rgb(201, 20, 20);
}

.card-body{
    background-color: rgb(47, 8, 38);
}
.card-title{
    color: aliceblue;
}
.card-text{
    color: azure;
}
.btn{
    background-color:rgb(93, 177, 14) ;
}
.page2{
    display: flex;
}
.hi{
    display: inline;
    color: aliceblue;
}
h5{
    color: aliceblue;
}
.box {
    display: flex;
    align-items: center;
    align-content: center;
    transition: transform 0.3s ease-in-out;
    border: 2px solid rgb(155, 12, 143);
    border-radius: 10px;
    box-shadow: 0 0 20px 5px rgba(221, 27, 255, 0.7);
    padding: 30px;
    margin-bottom: 20px;
    width: fit-content;
}

.box:hover {
    transform: scale(1.05); 
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3); 
}
.project{
    height: 80px;
    width: 80px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    justify-items: center;
    position: relative;
    top: 8px;
}
.page3{
    width: 100%;
}
.inbuilt{
    padding: 15px;
}
.inbuilt a{
    color: rgb(221, 108, 234);
}
.box2{
    border: 2px solid rgb(221, 108, 234);
    height: fit-content;
    text-align: center;
    margin-bottom: 20px;
    max-width: 300px;
    box-shadow: 0 0 20px 5px rgba(221, 27, 255, 0.7);
    border-radius: 20px;
    
}
.position{
    display: flex;
    align-items: center;
    justify-content: center;
    align-content: center;
}
.pic{
    border-radius: 50%;
    position: relative;
    top: 10px;
    height: 100px;
    width: 100px;
    margin-bottom: 10px;
}
.position p{
    padding: 30px;
    
}
.fa {
    padding: 20px;
    font-size: 30px;
    width: 50px;
    text-align: center;
    text-decoration: none;
  }
  
  /* Add a hover effect if you want */
  .fa:hover {
    opacity: 0.7;
  }
  
  /* Set a specific color for each brand */
  
  /* Facebook */
  .fa-instagram {
    border-radius: 50%;
    text-align: center;
    color:rgb(221, 108, 234);

  }
  
  /* Twitter */
  .fa-linkedin {
    border-radius: 50%;
    text-align: center;
    color:rgb(221, 108, 234);

  }
  .icon{
    border: 2px solid rgb(221, 108, 234);
  }

  .icons {
    display: flex;
    justify-content: center;
    align-items: center;
    justify-items: center;
    gap: 20px;
    margin-top: 20px;
}

.icon {
    width: 60px;
    height: 60px;/* Change as needed */
    border-radius: 50%;
   
}
#email{
    background-color: rgb(47, 8, 38);
    border: 2px solid rgb(221, 108, 234); 
    border-radius: 20px;
    height: 50px;
    box-shadow: 0 0 20px 5px rgba(221, 27, 255, 0.7);
    color: aliceblue;
}
#texta{
    background-color: rgb(47, 8, 38);
    border: 2px solid rgb(221, 108, 234); 
    border-radius: 20px;
    height: 50px;
    box-shadow: 0 0 20px 5px rgba(221, 27, 255, 0.7);
    color: aliceblue;
}
#name{
    background-color: rgb(47, 8, 38);
    border: 2px solid rgb(221, 108, 234); 
    border-radius: 20px;
    height: 50px;
    box-shadow: 0 0 20px 5px rgba(221, 27, 255, 0.7);
    color: aliceblue;
}
#send{
    background-color: rgb(221, 108, 234);
    size: 50px;
    border-radius: 30px;
    font-size: 25px;
    box-shadow: 0 0 20px 5px rgba(221, 27, 255, 0.7);
}

.page5{
    text-align: center;
    align-items: center;
    height: 100vh;
}
.fa-github{
    border-radius: 50%;
    text-align: center;
    color:rgb(221, 108, 234);
    font-size: 40px;
    size: 40px;}