*{
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}
body {
    
    font-family: Arial, sans-serif;
  }
  header{
    overflow: unset;
  }
  .display-none{
    display: none;
  }
  
  
  .optional-header {
    
    height: 50vh;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    color: rgb(0, 0, 0);
    margin-bottom: 20px;
    position: relative;
  }
  
  .navbar-dark .navbar-nav .nav-link{
    
    color: rgb(255, 255, 255);
  }

  .navbar-dark .navbar-nav .nav-link.active {
    background-color: white;
    color: black;
    margin: 0px;
    border-top-right-radius: 8px;
    border-top-left-radius: 8px;
  }
  .nav-item{
    padding: 0px;
  }
  
  .optional-header .header-text {
    text-align: center;
  } 
  #header-text{
    opacity: 1;
    color: black;
    background-color: rgba(233, 242, 249, 0.605);
    border-radius: 7px;
    padding: 5px;
  } 
  
  /* Navbar Styling */
  .navbar {
    transition: background-color 2s ease-in-out;
    background-color: transparent; 
    margin-top: 0px;
    padding: 0px;
    padding-top: 5px;
    
  }
  
  
  .navbar-nav {
    position: relative;
    text-align: center;
   
    justify-content: center;
    justify-self: center;
    margin-left: 20%;
    padding: 0px;
    
  }
  
  
  .nav-link {
    padding: 10px;
    
    display: inline-flex;
    text-align: center;
    justify-content: center;
    align-items: center;
    
  }
  #myContact{
    
    box-shadow: 4px 4px 3px black;
    border: 2px solid black;
    position: relative;
    display: flex;
    flex-flow: column;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 10px;
    justify-content: center;
    align-items: center;
    
    
    text-align: center;
  }
  #myContact table{
    border: 2px solid black;
    width: fit-content;
    align-content: center;
    justify-content: center;

  }
  #myContact table tr{
    margin: 2px;

  }
  .fa-linkedin-square{
    color: white;
  }

  #contactForm{
    padding: 5px;
  }
  
  
  .card-image{
    border-radius: 50%;
    margin: 20px;
    width: auto;
  }
  /* Hide Dropdown Arrow */
  .dropdown-toggle::after {
    display: none;
  }
  
  /* Brand and Hamburger Styling */
  .navbar-brand {
    display: none; 
    position:static;
    margin-left: 5px;
    
  }
 


/* Dropdown Menu Item Styles */
.dropdown-menu{
  width: max-content;
  margin: 2px;
  padding: 5px;
}
.dropdown-item {
  border-radius: 8px;
  margin: 5px;
  margin-left: 2px;
  padding: 5px;
  text-align: center;
}

.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item.active {
  
  background-color: black;
  color: white; 
  
}
/* Footer Styles */

.footer {
  background-color: rgb(28, 28, 28);
  color: white;
  padding: 20px 0;
  text-align: center;
  bottom: 0px !important;
  margin-top: auto;
}

.footer-options {
  list-style: none;
  padding: 5px;
  margin: 5px;
  text-align: left;
}

.footer-options li {
  margin-bottom: 10px;
}

.footer-options li:last-child {
  margin-right: 0;
}

/* Social Icons Styles */
.social-icons {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: right;
}

.social-icons li {
  display: inline-block;
  margin-right: 10px;
}

.social-icon .fab{
  color: white;
  font-size: 1.2em;
  margin-right: 15px;
  transition: transform 0.3s ease-in-out;
  
}



.popover {
  max-width: 200px; 
}
.tooltip {
  max-width: 200px; 
}


.social-icon {
  position: relative; 
}


.social-icon .fab:hover {
  transform: scale(1.5);
  color:blue;
}

/* Footer Text Styles */
.footer-text {
  color: white;
  margin-top: 5px;
  text-align: center;
  position: relative;
  display: block;
  justify-content: center;
  
}

.footer-text p {
  margin-bottom: 5px;
}
.welcome-section {
  max-width: 80%; 
  margin: 20px auto; 
  padding: 3vw; 
  text-align: center;
  animation: slideIn 1.5s ease-in-out; 
  border-top: 3px solid #9000ffb2; 
  border-left: 3px solid #9000ffb2; 
  background-color: whitesmoke; 
  border-radius: 1em; 
  box-shadow: 5px 5px 4px #000000; 
  color: #000000b2;
}
.carousel-control-prev-icon,.carousel-control-next-icon{
  background-color: rgb(0, 0, 0);
  color: aliceblue;
  padding: 20px;
  border-radius: 10px;
}
.balconyclasssection{
  margin: 20px;

}
fieldset{
  border: 3px solid black;
}
fieldset legend{
  text-align:left;
  margin-left: 10%;
}
.section-title {
  color: #333;
  font-size: 2em;
  text-align: center;
  margin-bottom: 20px;
}

/* Profile Container */
.profile-container {
  text-align: justify;
  margin-bottom: 40px;
}

/* Profile Text */
.profile-text {
  font-size: 1.2em;
}

/* Project Card */
.project-card {
  border: 1px solid #ccc;
  padding: 20px;
  margin-bottom: 20px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

/* Project Title */
.project-title {
  color: #333;
  font-size: 1.5em;
  margin-bottom: 10px;
}

/* Project Description */
.project-description {
  font-size: 1.2em;
  margin-bottom: 15px;
}

/* Project Options (Visit and Feedback) */
.project-options {
  text-align: center;
}

.project-link,
.project-feedback-btn {
  display: inline-block;
  padding: 10px 20px;
  margin: 5px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.project-link {
  background-color: #007bff;
  color: #fff;
}

.project-feedback-btn {
  background-color: #28a745;
  color: #fff;
}


/* Skill Category Heading */
.category-heading {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 15px;
}

/* Skill Card */
#skills{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin: auto;
  margin-top: 3px;
  gap: 30px;
  padding-bottom: 5vh;
}
.skill-card {
  background: linear-gradient(135deg, #3494e6, #3bdf6f);
  color: #ffffff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease-in-out;
  width: 200px;
  text-align: center;
  cursor: pointer;
  margin-bottom: 15px; 
}


.skill-card:hover {
  transform: translateY(-10px);
  box-shadow: 5px 5px 8px black;
}


.skill-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}
.arrow-border {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  justify-self: center;
  align-items: center;
 
  border: 5px solid #3494e6; 
   /* Remove bottom border */
}

.arrow-border::after {
  content: '';
  position: absolute;
  bottom: -20px; 
  left: 50%;
  border-width: 10px 10px 0px; 
  border-style: solid;
  border-color: #3494e6 transparent transparent transparent; /* Border color */
  transform: translateX(-50%);
}
.flex-container-swroom {
  margin: auto;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  
}

.section-swroom {
  flex: 1;
  width: fit-content;
  margin: 10px;
  padding: 10px;
  border: 1px solid #8f8f8f;
  border-radius: 8px;
}

.section-swroom table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
}

.section-swroom th, .section-swroom td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

.section-swroom th {
  background-color: #f2f2f2;
}

.section-swroom ul {
  list-style-type: none;
  padding: 0;
}

.section-swroom li {
  margin-bottom: 8px;
}
#interests li{
  margin-left: 20px;
  padding: 2px;
  width: fit-content;
  list-style-type: "→ ";
  transition: all 0.5s ease-in-out;
}
#interests li:hover{
  transform: translateX(5px);
  background-color: #cfcfcf;
  border: 2px soild orange;
}
#education,
    #work-experience {
      flex: 1;
      margin: 20px;
      padding: 20px;
      border: 1px solid #ddd;
    }

.experience-card li{
  list-style-type: " → ";
  padding: 10px;
  margin: 5px;
}



.appearAnima{
  animation: appear 3s;
}
.slideFromLeft{
  animation: slideFromLeft 4s !important;
}
.slideup{

  animation: slideup 4s !important;
}
.slidedown{

  animation: slidedown 3s !important;
}


/*Animations*/
@keyframes appear {
  0%{opacity: 0;}
  20%{opacity: 0.2;}
  30%{opacity: 0.3;}
  50%{opacity: 0.5;}
  100%{opacity: inherit;}
}
@keyframes slideFromLeft {
  0%{right: 5rem;}
  100%{right: 0px;}
  
}
@keyframes slideup {
  0%{top: 10px; visibility: hidden;}
  50%{visibility: visible;}
  100%{top: 0px;}
  
}
@keyframes slidedown {
  0%{bottom: 200px;}
  100%{bottom: 0px;}
  
}
@keyframes slideIn {
  0%{
    opacity: 0;
    transform: translateY(-20%);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}


  
  @media (min-width: 600px) {
    .navbar-brand {
      display: block;
    }
    
    
  }
  @media (max-width: 900px) {
    .navbar-brand {
      display: block;
    }
    .dropdown-menu{
      justify-content: center;
      width: auto;
      margin: auto;
      padding: auto;
    }
    .navbar {
      
      background-color: transparent; 
      margin-top: 0px;
      padding-top: 10px;
      
      
    }
    .navbar-dark .navbar-nav .nav-link.active {
      background-color: white;
      color: black;
      margin: 0px;
      border-radius: 8px;
      
    }
    }
    @media (min-width: 340px) and (max-width: 420px) {
      .justify-content-center{
        margin: auto;
        margin-left: 5vw;
        padding: 4vw;
        /* justify-content: center;
        justify-self: center;
        display: flex; */
      }

    }
    /* @media (min-width: 420px) and (max-width: 540px) {
      .justify-content-center{
        margin: auto;
        margin-left: 7vw;
        padding: 3vw;
      }

    }
    @media (min-width: 540px) and (max-width: 600px) {
      .justify-content-center{
        margin: auto;
        margin-left: 9vw;
        padding: 3vw;
      }

    } */