html, body {
  color: #ffffffff !important;
}

body {
  justify-content: center;
  line-height: 1.6;
  background: rgb(72, 182, 153);
  background-color:#042e4d;
  font-size: 18px;
  font-family: "-apple-system", "BlinkMacSystemFont", "Roboto", "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#home {
  margin-top: 2rem;
  margin-left: 4rem;
}

#home img {
  width: 200px;
  height: 200px;
  margin: auto;
  border-radius: 150px;
  margin-bottom: -40px;
  border: 3px solid gold;
  animation: pulse 3s infinite;
  box-shadow: 10px 5px 8px rgba(0, 0, 0, 0.1);
}

@keyframes pulse {
  0%, 100% {
      transform: scale(1);
      box-shadow: 10px 5px 8px rgba(0, 0, 0, 0.1);
  }
  50% {
      transform: scale(1.1);
      box-shadow: 10px 5px 8px rgba(0, 0, 0, 0.1);
  }
}

#home h2, #home h2 span {
  text-align: left;
  font-family: 'Geologic',sans-serif;
  margin-bottom: -35px;
  font-size: 3rem;
  font-weight:700;
  color: gold;
}

#home h2 span {
  margin-left: 1.5rem;
  text-align: center;
  font-size: 1.5rem;
  color: gold;
  margin-bottom: 2rem;
}

#home p, #vision p {
  color: #ffffffff;
  text-align: left;
  font-size: 1.5rem;
  line-height: 1.5;
  margin-top: 20px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

@media (max-width: 900px) {
  #home {
      margin-left: 4rem;
  }
  #home img {
      margin-left: 4.5rem;
  }
  #home h2 span {
      margin: auto;
      margin-bottom: 3px;
  }
  #home p {
      font-size: 1.4rem;
  }
}

@media (max-width: 750px) {
  #home {
      margin-left: 3rem;
  }
  #home p {
      font-size: 1.3rem;
  }
  #home h2 {
      font-size: 3rem;
  }
}

@media (max-width: 500px) {
  #home {
      margin-left: 1.9rem;
  }
  #home img {
      margin-left: 3.5rem;
  }
  #home h2 {
      font-size: 2rem;
  }
  #home p {
      margin-left: -2rem;
      font-size: 1.2rem;
  }
  #knowledge p {
      color: #ffffffff;
      font-size: 1.2rem;
  }
}

#page {
  position: relative;
  transition: 1s all ease-in-out;
}

#page.menuopen {
  opacity: .6;
  transform: scale(1.1);
}

#vision {
  margin-left: 4rem;
}

#vision span, #vision span2 {
  font-size: 2.3rem;
}

@media (max-width: 720px) {
  #vision {
      margin-left: 3rem;
  }
  #vision p {
      font-size: 1.4rem;
  }
  #vision span, #vision span2 {
      font-size: 2rem;
  }
}

@media (max-width: 500px) {
  #vision {
      margin-left: 0;
  }
  #vision p {
      font-size: 1.2rem;
  }
  #vision span, #vision span2 {
      font-size: 1.7rem;
  }
}

section p {
  font-size: 1.5rem;
  color: #ffffffff;
  font-weight: lighter;
}

header {
  z-index: 99999;
}

header nav {
  display: flex;
  height: 60px;
  justify-content: center;
  align-items: center;
  padding: 0 15px;
  position: fixed;
  left: 0;
  right: 0;
  width: 600px;
  margin: 0 auto;
  top: 10px;
  backdrop-filter: blur(30px);
  border-radius: 200px;
  z-index: 9;
  border: 1.5px solid gold;
  border-left-color: crimson;
  border-right-color: crimson;
  transition: 1s all cubic-bezier(0.075, 0.82, 0.165, 1);
  color: goldenrod;
}

@media (max-width: 720px) {
  #knowledge p {
      font-size: 1.4rem;
  }
  header nav {
      font-size: 70%;
      padding: 0 6px;
      width: 600px;
  }
}

@media (max-width: 500px) {
  header nav {
      width: 420px;
  }
}

header nav a {
  color: goldenrod;
  text-decoration: none;
  font-weight: 700;
  display: block;
  padding: 10px 12px;
  line-height: 1;
  font-size: 16px;
  letter-spacing: 2px;
  transition: .3s all cubic-bezier(0.075, 0.82, 0.165, 1) .6s;
}

header nav a:hover {
  border-bottom: 1px solid goldenrod;
  border-radius: 20px;
}

header nav button {
  background: rgba(61, 58, 58, .2);
  backdrop-filter: blur(5px);
  border: 1px solid rgb(105, 105, 105);
  position: absolute;
  z-index: 99;
  left: 0;
  margin: auto;
  right: 0;
  top: 0;
  bottom: 0;
  width: 60px;
  height: 60px;
  border-radius: 100%;
  outline: 0;
  border: 0;
  cursor: pointer;
  transition: .3s all cubic-bezier(0.075, 0.82, 0.165, 1) .2s;
  transform: scale(0);
}

header nav button span {
  width: 40%;
  color: rgb(255, 255, 255);
  height: 2px;
  display: block;
  margin: 5px auto;
  transform: scalex(0);
  transition: .6s transform cubic-bezier(0.075, 0.82, 0.165, 1) 0s, .3s margin ease-in 0s;
}

header nav button:hover {
  border-color: rgba(255, 255, 255, .5);
}

header nav button:hover span {
  margin: 10px auto;
}

header.sticky #logo {
  top: 0;
  transform: scale(.8);
  opacity: 0;
  transition-delay: .5s;
}

header.sticky nav {
  top: 20px;
  padding: 0;
  width: 90px;
  height: 90px;
  transition-delay: .5s;
}

header.sticky nav button {
  transform: scale(1);
  transition-delay: .6s;
}

header.sticky nav button span {
  transform: scalex(1);
  transition: .6s transform cubic-bezier(0.075, 0.82, 0.165, 1) .8s, .3s;
}

header.sticky nav a {
  padding: 0;
  opacity: 0;
  letter-spacing: 0;
  transform: scale(.3);
  transition-delay: .2s;
}  /* thered copy*/  
  .container {
    position: relative;
    display: flex;
    justify-content:center;
    align-items: center;
    flex-wrap: wrap;
    gap: 30px;
    padding: 10px auto;

  }
  skill-buttons {
    margin-bottom: 20px;
}


  .container .custom-card {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    width: 400px;
    max-width: 100%;
    height: 355px;
    background:transparent;
    border-radius: 20px;
    transition: 0.5s;
  }  
    .container .custom-card .img-box {
      position: absolute;
      top: 1px;
      width: 400px;
      height: 300px;
      background: #333;
      border-radius: 12px;
      overflow:hidden;
    }
    .container .custom-card .img-box2 {
      position: absolute;
      top: 1px;
      width: 300px;
      height: 230px;
      background: #333;
      
      overflow:hidden;
    }.container .custom-card .img-box2 img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 12px;
    

    }
    
    .container .custom-card .img-box img {
      
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      margin-bottom: auto;
    }
    .container .custom-card .custom-content {
      position: absolute;
      margin-top:20px;
      top: 290px;
      width: 100%;
      height: 200px;
      padding: 0 30px;
     
      overflow: hidden;
      transition: 0.5s;
       }	
    .container .custom-card .custom-content h2 {
      font-size: 1.6rem;
      font-weight: 700;
      color: gold;
    }
    .container .custom-card .custom-content p {
      color: rgb(255, 255, 255);
      font-size: 1.3rem;
      text-align: left;	
      
  
    }
   .container .custom-card .custom-content li{
      text-align: left;
      
      font-size: 1rem;
      
  
    }
    .container .custom-card .custom-content li a{
      color: cri;
      font-size: 1.1rem;
      
  
    }
    .custom-card .custom-content p a {
    color:crimson;
  
    }
  /* fourth copy*/
    
    @media screen and (width <= 500px) {
      .container .custom-card {
        width: 400px;
  
        border-radius: 15px;
      }
      .container .custom-card .img-box {
        width: 400px;
        border-radius: 10px;
      }
      .container .custom-card .custom-content p {
        font-size: 1rem;
      }
      .container .custom-card .custom-content a {
        font-size: 1rem;
      }
       #knowledge p{
      font-size: 1.2rem;
      
    }
    }
     
  
    /* second copy*/




    .prog{
      display:flex;
      flex-wrap: wrap;
      text-align: left;

    }
    .prog h5{
      color: rgb(255, 255, 255);
              font-family: 'montserrat';
              font-size: 1.2rem;
      font-weight: lighter;
  
    }
    .prog .skill-bar{
      display:flex;
       width: 220px;
                background-color: #f3f3f3;
                height: 20px;
                border-radius: 4px;
                overflow: hidden;
    }
    .prog .skill-bar-fill {
                height: 20px;
                background-color: rgb(91, 250, 85);
  }
  
    
  .prog2{
    display:flex;
    flex-wrap: wrap;
    text-align: left;

    }
    .prog2 h5{
      color: rgb(255, 255, 255);
              font-family: 'montserrat';
              font-size: 1.2rem;
      font-weight: lighter;
  
    
    }
    .prog h5 span{
      color:gold;
              font-family: 'montserrat';
              font-size: 1.1rem;
    }
    .prog2 h5 span{
      color: goldenrod;
              font-family: 'montserrat';
              font-size: 1.1rem;
    }
    .prog2 .skill-bar{
       display:flex;
       width: 130px;
               background-color: #f3f3f3;	  
               height: 20px;
               border-radius: 4px;
               overflow: hidden;
    }
    .prog2 .skill-bar p{
      color:#333;
    }
    .prog2 .skill-bar-fill {
              height: 20px;
              background-color: rgb(91, 250, 85);
  }
  @media (max-width: 720px) {
  .prog{
      display:flex;
      width:100%;
      flex-wrap: wrap;
      text-align: center;
      
    }
    .prog .skill-bar{
      display:flex;
       width: 150px;
                background-color: #f3f3f3;
                height: 15px;
                border-radius: 4px;
                overflow: hidden;
    }
    .prog2{
      display:flex;
      width:100%;
      flex-wrap: wrap;
      text-align: center;
      
    }
    .prog2 .skill-bar{
      display:flex;
       width: 150px;
                background-color: #f3f3f3;
                height: 15px;
                border-radius: 4px;
                overflow: hidden;
    }
    #knowledge button{
      margin-left:12rem;
    }
  
  }
  @media (width <= 500px) {
    #knowledge p{
      font-size: 1.2rem;
      
    }
  .prog{
      display:flex;
      width:100%;
      flex-wrap: wrap;
      text-align: center;
      
    }
    .prog .skill-bar{
      display:flex;
       width: 240px;
                background-color: #f3f3f3;
                height: 15px;
                border-radius: 4px;
                overflow: hidden;
    }
    .prog2{
      display:flex;
      width:100%;
      flex-wrap: wrap;
      text-align: center;
      
    }
    .prog2 .skill-bar{
      display:flex;
       width: 230px;
                background-color: #f3f3f3;
                height: 15px;
                border-radius: 4px;
                overflow: hidden;
    }
    #knowledge button{
      margin-left:7rem;
    }
    #knowledge p{
      
      font-size: 1.2rem;
    }
  
  }
  
  .containerd {
    position: relative;
    display: flex;
    justify-content:center;
    align-items: center;
    flex-wrap: wrap;
    gap: 200px 20px;
    padding: 20px 10px;
  }
  .containerd .custom-card {
    position: relative;
    display: flex;
    align-items: flex-start;
    width: 550px;
    max-width: 100%;
    height: 450px;
    background:transparent;
    border-radius: 20px;
    transition: 0.5s;
  }
  
  
  .containerd .custom-card .img-boxs {
    position: absolute;
    top: 1px;
    width: 550px;
    height: 400px;
    background: #333;
    border-radius: 12px;
    overflow:hidden;
  }
  
  .containerd .custom-card .img-boxs img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    margin-bottom: auto;
  }
  .containerd .custom-card .custom-content {
    position: absolute;
    top: 400px;
    width: 100%;
    height: 350px;
    text-align: center;
  
    overflow: hidden;
    transition: 0.5s;
    
  }	
  .containerd .custom-card .custom-content h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: gold;
  }
  .containerd .custom-card .custom-content p {
    color: rgb(255, 255, 255);
    font-size: 1.1rem;
    text-align: center;	
  }
  .containerd .custom-card .custom-content p a {
    color: red;
    font-size: 1rem;
    font-weight:bold;
    text-decoration:underline;         
    
  }
  .containerd .custom-card .custom-content li{
    text-align: left;
    color: #000;
    font-size: 1rem;
    
  
  }
  .containerd .custom-card .custom-content li a{
    color: rgb(255, 255, 255);
    font-size: 1.1rem;
  
  }




  
  @media (width <= 720px) {
    .containerd .custom-card {
      width: 520px;
      border-radius: 15px;
    }
    .containerd .custom-card .img-boxs {
      width: 520px;
      height: 400px;
      border-radius: 10px;
    }
    .containerd .custom-card .custom-content p {
      font-size: 1.2rem;
    }
    .containerd .custom-card .custom-content a {
      font-size: 1.3rem;
    }
  }
  
  @media (width <= 500px) {
    .containerd .custom-card {
      left:-1.7rem;
      width: 400px;
      border-radius: 15px;
    }
    .containerd .custom-card .img-boxs {
      width: 400px;
      height: 400px;
      border-radius: 10px;
    }
    .containerd .custom-card .custom-content p {
      font-size: 1rem;
    }
    .containerd .custom-card .custom-content a {
      font-size: 1rem;
    }
  }
  
                  
  #contact.social-links{
    margin:5px auto;
    transform:rotate(0deg);
    position:absolute ;
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 200px;
    z-index: 9;
    -webkit-backdrop-filter: blur(5px);
        backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: 1s all cubic-bezier(0.075, 0.82, 0.165, 1) 0.2s;
    animation:moveup 0.5s linear 1;
    animation-delay: 4s;
    Visibility: visible;
    animation-fill-mode: forwards;
    color: orangereds;
    font-size: 10px;
    font-family: sans-serif;
    font-style: italic;
  }
  @keyframes moveup{
    0%{
      transform: translateY(100px) rotate(0deg);
      visibility: visible;
    }
    100%{
      transform: translateY(0) rotate(0deg);
      visibility: visible;
    }
   }
  
   #contact .social-links a{
    text-decoration: none;
    color:white;
    padding-right: 35px;
    font-style: italic;
    font-size: 15px; 
    
  }
  #contact .social-links a:hover{
    color:yellow;
    transform:scale(1.2);
  
  
  }
  #contact .social-links img{
     height: 45px;
     width: 45px;
  mix-blend-mode: screen;
     border-radius: 50%;
    border: .2rem solid var(--goldenrod);  
  }
  @media (width<=500px){
    #contact .social-links a{
    padding-right: 10px;
  
    }
    #contact h1{
      font-size:1.5rem;
    }
     #contact p span{
      font-size:0.9rem;
    }
    #contact p{
      font-size:1rem;
    }
  }
  section {top:2rem;padding:50px;justify-content:center;align-items:center;background:transparent;color:rgb(255, 255, 255);font-family:'open sans';position:relative;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}#knowledge p {font-weight:lighter;font-family:'Segoe UI','Open Sans','Helvetica Neue',sans-serif;}#vision p {margin-top:5rem;font-weight:lighter;font-family:'Segoe UI','Open Sans','Helvetica Neue',sans-serif;}#knowledge h3 {text-align:center;color:gold;font-family:'montserrat';font-size:1.5rem;margin-left:50px;}section:after {position:absolute;left:0;top:0;background:transparent;opacity:0.5;height:100%;width:100%;}section h1 {font-size:2rem;z-index:2;text-align:left;color:gold;}section p span {text-align:center;font-family:'montserrat';font-size:2.3rem;color:gold;}section p .span1 {font-size:1.4rem;}#vision button {display:inline-block;padding:10px 20px;background-color:#4caf50;color:white;text-decoration:none;border-radius:4px;font-size:16px;border:none;transition:background-color 0.3s ease;}#vision button:hover {border-bottom:1px solid goldenrod;border-radius:20px;}#vision button:active {background-color:#398439;}#knowledge button {display:inline-block;padding:10px 20px;background-color:#4caf50;color:white;text-decoration:none;border-radius:4px;font-size:16px;border:none;transition:background-color 0.3s ease;}#knowledge button:hover {border-bottom:1px solid goldenrod;border-radius:20px;}#knowledge button:active {background-color:#398439;}#contact {margin-left:3rem;padding:20px 0,0,20px;margin-top:8rem;}#contact h2 {font-size:24px;margin-bottom:10px;}.contact-container {display:column;}#contact p {text-align:left;font-weight:lighter;font-family:'Segoe UI','Open Sans','Helvetica Neue',sans-serif;font-size:1.3rem;}.contact-info {display:column;align-items:center;margin-bottom:10px;}.contact-info a {color:gold;text-decoration:none;}.contact-info a:hover {text-decoration:underline;}

  .prog,
  .prog2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    grid-gap: 1rem;
  }
  
  .skill-bar {
    height: 20px;
    background-color: #e0e0e0;
    border-radius: 10px;
    margin-bottom: 1rem;
  }
  
  .skill-bar-fill {
    height: 100%;
    background-color: #007bff;
    border-radius: 10px;
  }
  
  .skill-bar h5 {
    font-size: 1rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
  }
  
  .skill-bar span {
    font-size: 0.9rem;
    font-weight: normal;
  }
  
  /* Responsive Styles */
  @media (max-width: 768px) {
    #knowledge {
      padding: 2rem 1rem;
    }
  
    #knowledge h1 {
      font-size: 2rem;
    }
  
    #knowledge h3 {
      font-size: 1.5rem;
    }
  
    #knowledge p {
      font-size: 1rem;
    }
  
    #knowledge button {
      font-size: 0.9rem;
    }
  
    .prog,
    .prog2 {
      grid-template-columns: 1fr;
    }
  }.gallery {
    margin-top: -100px;
    padding: 80px 0;
    background-color: transparent;
}
.section-title {text-align:center;font-size:40px;font-weight:800;margin-bottom:50px;color:#333;text-transform:uppercase;letter-spacing:2px;}.gallery-container {display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px;padding:20px;}.custom-card {background:blur(5px gray);border-radius:8px;box-shadow:10px 10px 10px 10px rgba(255,255,255,0.1);border-radius:8px;overflow:hidden;transition:transform 0.3s;text-align:center;min-height:250px;position:relative;}.custom-card:hover {transform:translateY(-5px);}.img-box img {background-blend-mode:blur(5px);border-radius:8px;box-shadow:10px 5px 8px 8px rgba(0,0,0,0.1);width:100%;height:200px;object-fit:cover;mix-blend-mode:screen;border-radius:4px;}.custom-content {padding:15px;}section {margin-bottom:-110px;}.custom-content h2 {font-size:1.5em;color:goldenrod;margin-bottom:10px;margin-left:50px;}.custom-content .description {font-size:1.1em;color:#ffffffff;line-height:1.6;margin:0;}.experience {display:block;font-size:1em;color:#666;margin-top:10px;}#projects {padding:80px 0;background-color:transparent;text-align:center;}#projects h1 {font-size:40px;font-weight:800;margin-bottom:50px;margin-left:50px;color:goldenrod;text-transform:uppercase;letter-spacing:2px;}.projects-container {display:grid;grid-template-columns:repeat(auto-fill,minmax(350px,1fr));gap:20px;padding:20px;}.project-card {background-blend-mode:blur(5px);border-radius:8px;box-shadow:10px 10px 10px 10px rgba(255,255,255,0.1);overflow:hidden;transition:transform 0.3s;text-align:center;min-height:450px;position:relative;}.project-card:hover {transform:translateY(-5px);}.image-box img {width:100%;height:50%;object-fit:contain;mix-blend-mode:screen;border-radius:4px;}.project-content {padding:15px;}.project-content h2 {margin-top:-20px;font-size:1.1em;color:gold;margin-bottom:10px;}.project-content p {font-size:1em;color:#ffffffff;line-height:1.5rem;margin:0 auto;font-weight:lighter;}.project-link {display:inline-block;margin-top:10px;color:white;text-decoration:none;border:1px solid red;border-radius:4px;padding:5px;background-color:#4bad4b;}.project-link:hover {text-transform:uppercase;}#overlay {display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(255,255,255,0.8);z-index:999;}.spinner {border:16px solid #f3f3f3;border-top:16px solid goldenrod;border-radius:50%;width:120px;height:120px;animation:spin 2s linear infinite;position:fixed;top:50%;left:40%;transform:translate(-50%,-50%);z-index:1000;display:flex;justify-content:center;align-items:center;flex-direction:column;}#logo {width:180px;height:180px;border-radius:50%;position:absolute;z-index:1000;}.percentage {position:absolute;font-size:24px;color:#3498db;z-index:1001;}@keyframes spin {0% {transform:rotate(0deg);}100% {transform:rotate(360deg);}}.skill-buttons {display:flex;justify-content:center;gap:20px;margin-bottom:20px;flex-wrap:wrap;}.skill-buttons button {background-color:#007BFF;color:white;border:none;border-radius:5px;padding:10px 15px;cursor:pointer;transition:background-color 0.3s;flex:1;max-width:250px;min-width:150px;}.skill-buttons a {background-color:#398439;}.skill-buttons a:hover {background-color:#398439 !important;border-bottom:5px solid goldenrod;box-shadow:5px 5px 5px goldenrod;}@media screen and (width <= 600px) {.skill-buttons {flex-direction:column;text-align:center;}.skill-buttons button {width:200px;max-width:none;align-items:center;margin:0 auto;}}
.skill-buttons button:hover {
    background-color: #398439;
    border-bottom: 5px solid goldenrod;
  box-shadow: 5px 5px 5px goldenrod

}

button:hover{
  background-color: #398439;
    border-bottom: 5px solid goldenrod;
  box-shadow: 5px 5px 5px goldenrod;

}

.skill-section h3 {
    margin-top: 20px;
    color: #ffffff;
}



.skill-bar {
    background-color: 2% white, transparent; /* Set background to transparent */
    overflow: hidden;
    height: 20px;
    margin: 10px 0;
    border-right: 0.1px solid crimson;
    border-bottom-right-radius: 5px;
    border-top-right-radius: 5px;
    animation: progress-animation 7s ease-in-out ;
  }
  
  @keyframes progress-animation {
      0% {
          width: 0%;
      }
      50% {
          width: 100%;
      }
      100% {
          width: 100%;
      }
  }
.skill-bar-fill {
    background-color: #007BFF;
    height: 100%;
    transition: width 0.4s ease;
}


h5 {
    margin: 10px 0 5px;
    color: #ffffff;
}
h2 span,p span {
  float: left;

}
span {
    float: right;
    color: #ffffff;
}
#contact {
  padding: 40px;
  border-radius: 10px;
  margin: 20px auto;
  max-width: 100%;
}

#contact h1 {
  text-align: center;
  font-size: 2.5rem;
  color: #FFD700; /* Gold color for the heading */
  margin-bottom: 20px;
}

#contact p {
  text-align: center;
  font-size: 1.2rem;
  color: #ffffff;
  margin-bottom: 30px;
}

.contact-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
}

.contact-info {
  display: flex;
  align-items: center;
  color: #ffffff;
  font-size: 1.1rem;
}

.contact-info i {
  margin-right: 10px;
  color: #FFD700; /* Gold color for icons */
  font-size: 1.5rem;
}

.contact-info a {
  color: #007BFF; /* Blue color for links */
  text-decoration: none;
  transition: color 0.3s;
}

.contact-info a:hover {
  color: #FFD700; /* Change link color to gold on hover */
}

.social-links {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 20px;
}

.social-links a img {
  width: 40px;
  height: 40px;
  transition: transform 0.3s;

}

.social-links a:hover img {
  transform: scale(1.1);
  border:2px solid goldenrod;
  
}

footer {
  text-align: center;
  font-size: 16px;
  color: #ffffff;
  background-color: transparent;
  font-family: 'Courier New', Courier, monospace;
  padding: 10px;
  border-radius: 5px;
  margin-top: 20px;
}
.skills span {
  position: absolute;
  opacity: 0;
  animation: fade-in 9s infinite;
}
@keyframes fade-in {0%,10% {opacity:0;}20%,30% {opacity:1;}40%,90% {opacity:0;}}.skills span:nth-child(1) {animation-delay:0s;}.skills span:nth-child(2) {animation-delay:3s;}.skills span:nth-child(3) {animation-delay:6s;}.contact-container {display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:20px;flex-wrap:wrap;background:transparent;border-radius:8px;padding:20px;}.contact-info {flex:1;min-width:300px;padding-right:20px;gap:35px;align-items:center;}.info-item {margin-bottom:15px;background:transparent;padding:15px;border-radius:5px;transition:transform 0.2s;margin-left:40px;}.info-item:hover {transform:scale(1.02);}.contact-form-container {background:transparent;padding:20px;border-radius:8px;box-shadow:0 2px 10px rgba(0,0,0,0.2);width:50%;margin:0 auto;}h2 {margin-bottom:15px;font-size:1.5em;color:goldenrod;text-align:center;}label {display:block;margin-bottom:5px;font-weight:bold;}input[type="text"],textarea {width:100%;padding:10px;margin-bottom:15px;border:1px solid #ccc;border-radius:4px;transition:border-color 0.3s;background-color:#042e4d;}input[type="text"]:focus,textarea:focus {border-color:#28a745;color:goldenrod;}input::placeholder {color:#ffffff;font-style:italic;opacity:1;}textarea::placeholder {color:#ffffff;font-style:italic;opacity:1;}input,textarea {padding:10px;border:1px solid #ccc;border-radius:4px;width:100%;box-sizing:border-box;}button {padding:10px 15px;margin-right:10px;border:none;border-radius:4px;cursor:pointer;transition:background-color 0.3s;}button[type="submit"] {background-color:#28a745;color:white;}button[type="submit"]:hover {background-color:#218838;border-radius:12px;}button[type="reset"] {background-color:#dc3545;color:white;}button[type="reset"]:hover {background-color:#c82333;border-radius:15px;}.social-media {margin-top:20px;width:100%;}.social-links img {width:30px;height:auto;margin:0 5px;}@media (max-width:600px) {.contact-container {flex-direction:column;padding:10px;}.info-item {font-size:70%;padding:10px;}.contact-form-container {width:100%;margin-top:20px;margin-left:-20px;}}.enrollment-form {margin-top:20px;border:1px solid #ccc;padding:15px;background-color:transparent;}.enrollment-form label {display:block;margin-top:10px;color:gold;}.enrollment-form input,.enrollment-form select {width:100%;padding:8px;margin-top:5px;color:goldenrod;background-color:transparent;}.enrollment-form button {margin-top:20px;margin-left:25px;min-width:100px;}.enrollment-link {display:inline-block;padding:10px 15px;background-color:#007bff;color:white;text-decoration:none;border-radius:5px;transition:background-color 0.3s;}
.enrollment-link:hover {
  background-color: #0056b3; /* Darker shade on hover */
}