.HeaderContainer { 
  background-color: #3f3e3e;
  width: 100%;
  height: auto;
  padding-bottom: 3vh;
  padding-top: 10px;
}

.mid-container{background-color: #3f3e3e;
  width: 100%;
  height: auto;}

  .firstraw{ padding: 20px 0px;}
  .lastraw{ padding: 30px 0px;}

/* NAVBAR STYLING STARTS */
/* Logo */
  .navbar-brand img{ width: 40px; height: 40px;
    border-radius: 50%;
    margin-right: 5px;
    background-image: url('Resources/LogoNew.gif');
    background-size: cover;      
    background-position: center; 
    background-repeat: no-repeat;
    border: #30bb30 2px solid;
  }

  .navbar-brand {
    color: #30bb30;
    font-weight: bold;
  }

  #Logo a:hover{  
  color: #ffffff;}

/* Menu list */
  .navbar {
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #353434;
    padding: 12px 30px;
    position: sticky;
    top: 0;
  z-index: 1000;
  }

.nav-menu ul {
  display: flex;
  margin: 0;
  padding: 0;
}

.nav-menu ul li {
  list-style: none;
  margin-left: 10px;
  padding: 8px 14px;   /* slightly smaller */
  border-radius: 5px;
}


.nav-menu ul li a {
  display: block;           /* 🔥 makes full area clickable */
  padding: 8px 14px;        /* move padding here */
  width: 100%;
  height: 100%;
  font-size: 18px;
  font-weight: bold;
  color: #30bb30;
  text-decoration: none;
}

.nav-menu ul li:hover {background-color: #ffffff;}

.nav-menu ul a {
  font-size: 18px;    /* better proportion */
  font-weight: bold;
  color: #30bb30;
  text-decoration: none;
}

#aboutMe {
  scroll-margin-top: 60px; /* match navbar height */
}

#profJourney {background-color: #3f3e3e; scroll-margin-top: 60px; }

#profJourney .leftCol {
  border-right: 3px solid #ffffff;
  padding-right: 30px;
}

#profJourney .rightCol {
  padding-left: 30px;
}

#portfolio{scroll-margin-top: 60px; margin-bottom: 20px; gap: 20px;}
.webappPort{ border: #3f3e3e 3px solid; border-radius: 10px; height: auto; text-align: center; margin-top: 60PX;}
.webappPort:hover {border:#3f3e3e 3px solid; background-color: #3f3e3e14;}

.portfolioItems{gap: 10px; align-content: center;}

.contact-section h3{font-size: clamp(18px, 1.3vw, 22px);; font-weight: bold; text-align: left; color: #ffffff;}

.intprof,
.intEdu {color: #ffffff;}

.intEdu p, .intprof p{ text-align: center; font-weight: bold; color: #30bb30; padding-top: 5px; margin-bottom: 30px;  font-size: clamp(22px, 1.8vw, 26px);}

/* personal Photo */
  #personalPhoto{    width: 70%;
    aspect-ratio: 1 / 1; 
    border-radius: 50%;
    margin-top: 20px;
    margin-bottom: 20px;
    align-items: center;
    background-image: url('Resources/layth3.png');
    background-size: cover;      
    background-position: center; 
    background-repeat: no-repeat;
    border:#30bb30 5px solid ;
  }

.sectionsContainer{text-align: left; font-size: 16px;  width:100%; background-color:#ffffff ; margin-bottom: 20px; color: #3f3e3e;  border-radius: 30px; padding: 20px 40px; margin-top: 10px;}
.col-lg p{font-size: 40px; font-weight: bold; text-align: center; color: #3f3e3e;}
#subsection{font-size: 20px; font-weight: bold; color: #30bb30; text-align:left; }
#colLink li a{color: #3f3e3e; text-decoration: underline;}
.sectionslabelLi {font-size: 18px; }

.showMore{ width: 50%; height: 45%; background-color:#3f3e3e; border-radius: 10px; color:#30bb30; display: flex; justify-content: center; align-items: center; font-weight:500;}
.showMore:hover{ background-color: #30bb30; color: #3f3e3e; font-weight:500;}

.social:hover{ transform: scale(1.1);  }

.sci {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;        /* 🔥 THIS is critical */
  align-items: center;
  margin-top: 1vw;
}

.socialpart {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;        /* allow icons to wrap */
}

.social {
  width: 42px;            /* slightly smaller */
  height: 42px;
}

@media (max-width: 576px) {
  .sci {
    flex-direction: column;
    align-items: center;
    gap: 15px;
  }

  .socialpart {
    justify-content: center;
  }

  .social {
    width: 36px;
    height: 36px;
  }
}


.sectionslabel {font-weight: bold; color: #30bb30; padding-top: 5px; margin-bottom: 10px;   font-size: clamp(20px, 1.5vw, 24px); text-align: justify;}
.Bio {font-size: 16px; width: 98%; height: auto; color: #3f3e3e; text-align: justify;}

.button{ background-color: #30bb30; padding: 12px 15px; border-radius: 20px; width: 150px; text-align: center; margin-left: -30px;}
.button:hover{background-color: #ffffff;}
.sci a{color: #ffffff; font-weight: 600;}
.sci a:hover {color: #30bb30;}

.buttonAbout {width: 150px; margin-left: 30px;}
.buttonAbout a{color: #ffffff; font-weight: 600;}
.buttonAbout .button:hover {background-color: #3f3e3e;}
.buttonAbout a:hover{color: #ffffff;}

.buttonProf {margin: 30px 0px; width: 150px;   display: flex; justify-content: center; margin-left: 15px;}
.buttonProf a{color: #ffffff; font-weight: 600;}
.buttonProf .button:hover {background-color: #ffffff;}
.buttonProf  a:hover{color:#3f3e3e;}

#SELECTEDTRAININGS {font-size: 30px; font-weight: bold; text-align: center; color: #3f3e3e; margin-top: 20px; margin-bottom: 50px;}
#ACADEMICDEGREES {font-size: 30px; font-weight: bold; text-align: center; color: #3f3e3e; margin-top: 20px; margin-bottom: 50px;}
#WORKEXPERIENCE {font-size: 30px; font-weight: bold; text-align: center; color: #3f3e3e; margin-top: 20px; margin-bottom: 50px;}

#about {font-size: 30px; font-weight: bold; text-align: center; color: #3f3e3e; margin-top: 20px;}
#skills {font-size: 30px; font-weight: bold; text-align: center; color: #3f3e3e; margin-top: 20px;}
#mission {font-size: 30px; font-weight: bold; text-align: center; color: #3f3e3e; margin-top: 20px;}
#vision{font-size: 30px; font-weight: bold; text-align: center; color: #3f3e3e; margin-top: 20px;}

.col-lg-4{ text-align: center;}
.col-lg-4 a {font-size: 20px; font-weight: 500; text-align: center; color: #30bb30; margin-top: 20px; margin-bottom: 20px; text-decoration: underline;}
.col-lg-4 a:hover{color:#3f3e3e; font-weight:bold;}

#submenu{ text-align: center;}
#submenu a {font-size: 20px; font-weight: 500; text-align: center; color: #30bb30; margin-top: 20px; margin-bottom: 20px; text-decoration: underline;}
#submenu a:hover{color:#3f3e3e; font-weight:bold;}

.collaboration {color: white; font-weight: 350; padding-bottom: 15vh; float: left; font-size: clamp(16px, 1.5vw, 20px); text-align: justify;}
#researchCollaboration {    width: 160px;
    height: 120px;
    border-radius: 10%;
    margin-top: 40px;
    margin-bottom: 20px;
    background-image: url('Resources/researchCollaboration.png');
    background-size: cover;      /* makes the image cover the div */
    background-position: center; /* centers the image */
    background-repeat: no-repeat; /* prevents tiling */}

   #newArticle{    width: 120px;
    height: 80px;
    border-radius: 10%;
    margin-top: 10px;
    margin-bottom: 20px;
    background-image: url('Resources/NewArticle.png');
    background-size: cover;      
    background-position: center; 
    background-repeat: no-repeat;}
   

    #techUsed {font-size: 16px; text-align: left; color: #30bb30; font-weight: bold; text-align: justify;  font-style: italic;}

    #courseDate{float: right; display: inline; font-weight: 400;}
    #courseDesc{text-align: justify; margin-bottom: 30px;}
    #skillsList ul li b {margin-top: 50px;}

    #Metrics {display: flex; margin-top: 75px;}

    #Metrics table {width: 100%;}
    #Metrics table td{border-right: #ffffff 3px solid; width: 25%;}

.stats-container {
    display: flex;
    justify-content: space-around; /* Distributes 5 items evenly */
    align-items: center;
    width: 100%;
    flex-wrap: wrap; /* Allows wrapping on smaller screens */
}

.stat-item {
    display: flex;
    align-items: center;
    padding: 0px 20px;
    flex: 1;
    min-width: 180px; /* Prevents items from getting too squashed */
    border-right: 2px solid rgba(255, 255, 255);
}

.stat-item:last-child {
    border-right: none;
}

.stat-item:first-child {
    flex: 1.2; /* makes the first item wider */
}

.number-wrapper {
    display: flex;
    align-items: flex-start;
    color: #ffffff;
    margin-right: 12px;
}

.number {
    font-size: 65px; /* Scaled down slightly to fit 5 items better */
    font-weight: bold;
    line-height: 1;
}

.plus {
    font-size: 35px;
    font-weight: bold;
    margin-top: 5px;
}

.label {
    font-size: 15px;
    line-height: 1.2;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Mobile Responsive adjustment */
@media (max-width: 768px) {
    .stat-item {
        border-right: none;
        justify-content: center;
        flex: 0 0 50%; /* Shows 2 items per row on tablets */
        margin-bottom: 20px;
    }
}

.typing-text {
  font-size: clamp(20px, 1.5vw, 24px);
  font-weight: bold;
  color: #ffffff;
  margin-top: -15px;
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  
  /* Remove the border and the blink animation here */
  animation: typing 3.5s steps(45, end) forwards; 
}

/* The typing effect: moving width from 0 to 100% */
@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}
/* The blinking cursor effect */
@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: #30bb30 }
}


.footer {
  display: flex; /* Make the footer a flex container */
  justify-content: space-between; /* Space the children to opposite ends */
  font-size: 16px;
  font-weight: bold;
  width: 100%;
  height: auto;
  padding-top: 20px;
  padding-bottom: 20px;
  background-color: #3f3e3e;
  color: #30bb30;

}

/* For responsive design */
.footer-left {
  text-align: left; /* Align text to the left */
  padding-left: 18vw;
}

.footer-right {
  text-align: right; /* Align text to the right */
  padding-right: 20vw;
}

/* Initial hidden state */
.contact-section {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
  transition-delay: var(--delay, 0s);
}

/* Visible state when scrolled into view */
.contact-section.visible {
  opacity: 1;
  transform: translateY(0);
}



  /* DROPDOWN MENU */
.services {
  position: relative; 
}

.dropdown {
  background-color: #ffffff;
  padding: 1em 0;
  position: absolute; /*WITH RESPECT TO PARENT*/
  display: none;
  border-radius: 8px;
  top: 35px;
}

.dropdown li + li {
  margin-top: 10px;
}

.dropdown li {
  padding: 0.5em 1em;
  width: 8em;
  text-align: center;
}

.dropdown li:hover {
  background-color: #666866;
}

.services:hover .dropdown {
  display: block;
}

a {
  text-decoration: none;
}

.navbar li {
  list-style: none;
}

.Lists li{ margin-bottom: 10px; margin-top: 25px; font-size: 18px; }
.TrainLists li{ margin-bottom: 10px; font-size: 18px; font-weight: bold; color:  #30bb30}
.TrainLists{margin-bottom: 50px;}
.publists {text-align: justify;}
.publists li{font-size: 18px; font-weight: bold; color:  #30bb30; font-size: 18px;}
.publists table{background-color: #666866;}

 table{border-collapse: collapse;}
.resInt tr{ border: none;}
.resInt li {text-align: left; border: none;}

  .menu-toggle {
  display: none; /* Hide by default */
}

@media (max-width: 768px) {
  .nav-menu ul {
    flex-direction: column;
    align-items: center;
  }
}

/* Media query for smaller screens */
@media (max-width: 768px) {
.footer {
    font-size: 14px; /* Reduce font size on smaller screens */
}
.menu-toggle {
  display: block; /* Show only on mobile/tablets */
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #ffffff;
}

.nav-menu{
  display: none; /* Hide menu initially on small screens */
  flex-direction: column;
}

.nav-menu.show {
  display: flex; /* Show when toggled */
}
}

/* Media query for very small screens like mobile */
@media (max-width: 480px) {
.footer {
    font-size: 12px; /* Further reduce font size */
}
.footer {
  font-size: 14px; /* Reduce font size on smaller screens */
}
.menu-toggle {
display: block; /* Show only on mobile/tablets */
background: none;
border: none;
font-size: 24px;
cursor: pointer;
color: #ffffff;
}

.nav-menu {
display: none; /* Hide menu initially on small screens */
flex-direction: column;
}

.nav-menu.show {
display: flex; /* Show when toggled */
}
}

@media screen and (max-width: 768px) {
  .copyRights {
      justify-content: center;
      text-align: center;
      margin-top: 20px;
  }
}