/* Importing Google fonts - Inter */
 @import url('https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,100..900&display=swap');
 @import url('https://fonts.cdnfonts.com/css/ica-rubrik-black');
 @import url('https://fonts.cdnfonts.com/css/poppins');

html {
   font-size: 100%;
   overflow-x: hidden;
}

* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   text-decoration: none;
   border: none;
   outline: none;
   font-family: 'Poppins', sans-serif;
}

body {
   width: 100%;
   height: 100%;
   margin: 0;
   overflow: hidden; /* Prevent scrolling */
   background-color: black;
   color: white;
   position: relative; /* To position absolute elements correctly */
}

::selection {

   background-color: #10a4b0; /* Yellow background color */
 
   color: black; /* Optional: Set text color within the selection */
 
 }

.divider {
   width: 50%; /* Width of the divider */
   height: 2px; /* Thickness of the divider */
   background-color: #10a4b0; /* Color of the divider */
   margin: 0px auto; /* Center the divider and add vertical space */
}

/* Navigation Bar */
header {
   position: fixed;
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 15px 20px;
   background-color: black;
   transition: background-color 0.3s ease;
   width: 100%;
   top: 0;
   left: 0;
   z-index: 1500;
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.logo {
   display: flex;
   align-items: center;
}


.logo:hover {
   transform: scale(1.1);
   transition: transform 0.3s ease, color 0.3s ease;
}

.logo-text {
   margin-top: 50;
   color: white;
   font-size: 1.2rem;
}

.nav-links {
   list-style: none;
   display: flex;
   gap: 15px;
}

.nav-links a {
   font-size: 1rem;
   font-weight: 500;
   color: white;
   padding: 8px 12px;
   border-radius: 5px;
}

.nav-links a.active,
.nav-links a.current {
   background: linear-gradient(134deg, #10a4b0, #008996);
   color: white;
}

.nav-links a:hover,
.nav a.active {
   background: linear-gradient(134deg, #10a4b0, #008996);
   color: white;
}

.scrolled {
   background-color: black;
   transition: color 0.3s ease;
}

.golden{
   color: #10a4b0;
}

/* Mobile Responsive Adjustments */
@media (max-width: 768px) {
   .navbar {
       background-color: black;
       flex-direction: row;
       padding: 10px 15px;
   }

   .toggle-btn {
       display: block;
       margin-left: 30%;
   }

   .nav-links {
       flex-direction: column;
       position: absolute;
       top: 50px;
       left: 0;
       background-color: black;
       width: 100%;
       padding: 0; /* Remove padding for animation */
       border-radius: 5px;
       text-align: center;
       opacity: 0; /* Start with opacity 0 */
       max-height: 0; /* Start with max-height of 0 */
       overflow: hidden; /* Hide overflow to prevent content from showing */
       transition: max-height 0.5s ease, opacity 0.5s ease; /* Add transition for max-height and opacity */
   }

   .nav-links.active {
       opacity: 1; /* Fully visible when active */
       max-height: 300px; /* Set a max-height that is greater than the content height */
       padding: 10px 0; /* Add padding when active */
   }

   .nav-links a {
       font-size: 0.8rem;
       text-align: center;
       padding: 10px; /* Add padding for better touch targets */
   }
}

/* Mobile Responsive Adjustments */
@media (max-width: 480px) {
   .menu-toggle {
       font-size: 1rem;
   }

   .logo, .logo-text {
       font-size: 1rem;
   }
   .contact{
      padding-top: 50px;
   }
}

@media (max-width: 480px) {
   .social-icons a {
      margin-top: 30px !important;
      margin-bottom: 5% !important;
      margin-left: 4px !important;
      margin-right: 4px !important;
      width: 2.7rem !important;
      height: 2.7rem !important;
      font-size: 1.5rem !important;
      border: 0.1rem solid #10a4b0 !important;
  }
}

/* Custom Scrollbar Styles */
::-webkit-scrollbar {
   width: 12px; /* Width of the scrollbar */
   height: 12px; /* Height of the scrollbar */
}

::-webkit-scrollbar-track {
   background: linear-gradient(180deg, #0a0a0a, #222113); /* Background of the scrollbar track */
}

::-webkit-scrollbar-thumb {
   background: linear-gradient(180deg, #10a4b0, #10a4b069); /* Gradient for the scrollbar thumb */
   border-radius: 10px; /* Rounded corners for the scrollbar thumb */
}


::-webkit-scrollbar-corner {
   background: transparent; /* Background for the corner where scrollbars meet */
}


/* Hamburger Menu */
.block {
   height: 40px; 
   width: 40px;  
   border-radius: 5px;
   display: flex;
   align-items: center;
   justify-content: center;
   margin-left: 40%;
   transition: all 1s ease;
   background: linear-gradient(134deg, #10a4b0, #00eaff);
}

.cta {
   height: 40px; 
   width: 40px;  
   cursor: pointer;
}

.toggle-btn {
   height: 2px;
   border-radius: 6px;
   width: 18px; 
   background-color: #fff;
   position: relative;
   top: 50%;
   left: 0;
   transition: all 0.3s ease-in-out;
   text-align: center;
}

.toggle-btn:before {
   content: "";
   height: 2px;
   border-radius: 6px;
   width: 18px; 
   box-shadow: 0 -10px 0 0 #fff;
   position: absolute;
   top: 0;
   left: 0;
   transition: all 0.3s ease-in-out;
   text-align: center;
}

.toggle-btn:after {
   content: "";
   height: 2px;
   border-radius: 6px;
   width: 18px; 
   box-shadow: 0 10px 0 0 #fff;
   position: absolute;
   top: 0;
   left: 0;
   transition: all 0.3s ease-in-out;
   text-align: center;
}

.active .toggle-btn {
   background-color: transparent;
   transition: all 0.2s ease-in-out;
}

.active .toggle-btn:before {
   left: 6px;
   transform: translateY(6px) rotate(-45deg);
}

.active .toggle-btn:after {
   left: 6px;
   transform: translateY(-8px) rotate(45deg);
}

/* Removes Hamburger Menu on larger screeens as it for mobile devices only */
@media (min-width: 769px) {
   #menuToggle, .toggle-btn,.toggle-btn:after,.toggle-btn:before,.block ,.mobile-typing-text {
       display: none;
   }
}




/* ANIMATIONS */

@keyframes slideDown {
   from {
       opacity: 0; /* Start fully transparent */
       transform: translateY(-50px); /* Start 50px above */
   }
   to {
       opacity: 1; /* End fully opaque */
       transform: translateY(0); /* End at its original position */
   }
}

/*     animation: animate 5s linear infinite;
   outline: none; */

@keyframes animate{
   0%,18%,20%,50.1%,60%,65.1%,80%,90.1%,92% {color: #ba901c;
       text-shadow: none;
}
18.1%,20.1%,30%,50%,60.1%,65%,80.1%,90%,92.1%,100%
{
   color: white;
   text-shadow: 0 0 10px #ba901c,
   0 0 20px #ba901c,
   0 0 40px #ba901c,
   0 0 80px #ba901c,
   0 0 160px #ba901c,

}
}

.aboutsec{
   width: 100vw;
   height: auto;
   margin-top: 25px;



}

:root {
  --primary-color: #ffffff;
  --secondary-color: #333;
  --background-color: #000000;
  --text-color: #ffffff;
  --heading-color: #ffffff;
  --golden-color: #10a4b0;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Arial', sans-serif;
  background-color: var(--background-color);
  color: var(--text-color);
  line-height: 1.6;
  margin: 0;
  padding: 0;
}

.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 20px;
}

.profile {
  text-align: center;
  padding: 30px 0;
}

.profile img {
  width: 300px;
  height: auto;
  border-radius: 50%;
  border: 5px solid var(--golden-color);
}

.profile h1 {
  font-size: 2.5rem;
  color: var(--heading-color);
  margin-top: 15px;
}

.profile p {
  font-size: 1.2rem;
  margin: 10px 0;
}

.section {
  margin: 30px 0;
}

.section h2 {
  font-size: 2rem;
  color: var(--heading-color);
  margin-bottom: 15px;
  /* border-left: 5px solid var(--primary-color); */
  padding-left: 10px;
}

.timeline {
  position: relative;
  margin-left: 40px;
  padding-left: 40px;
  border-left: 3px solid var(--primary-color);
}

.timeline-item {
  position: relative;
  margin-bottom: 30px;
}

.timeline-item::before {
  content: '';
  position: absolute;
  left: -55px;
  top: 0;
  width: 20px;
  height: 20px;
  background-color: var(--golden-color);
  border-radius: 50%;
  border: 3px solid var(--background-color);
  border: 3px solid #ffffff;
}

.timeline-item p {
  margin: 0;
  padding-left: 10px;
}

.timeline-item span {
  font-weight: bold;
  color: var(--primary-color);
}

.skills {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

.skill {
  width: 100%;
  max-width: 500px;
}

.skill-name {
  display: flex;
  justify-content: space-between;
}

.skill-bar {
  background-color: #ddd;
  border-radius: 5px;
  overflow: hidden;
  margin-top: 5px;
}

.skill-bar-inner {
  height: 15px;
  background-color: var(--golden-color);
}

.otherskills ul {
  list-style: none;
  padding-left: 0;
}

.otherskills ul li {
  padding: 5px 0;
  position: relative;
  padding-left: 20px;
}

.otherskills ul li::before {
  content: '\2022';
  color: var(--golden-color);
  font-weight: bold;
  display: inline-block;
  width: 15px;
  margin-left: -20px;
}

.certifications ul {
  list-style: none;
  padding-left: 0;
}

.certifications ul li {
  padding: 5px 0;
  position: relative;
  padding-left: 20px;
  color: white;
}

.certifications ul li::before {
  content: '\2022';
  color: var(--golden-color);
  font-weight: bold;
  display: inline-block;
  width: 15px;
  margin-left: -20px;
}

.contact{
   background: linear-gradient(to bottom,black 10%,   black 100%);
   text-align: center;
}

/* Social Icons */
.social-icons a {
   display: inline-flex;
   justify-content: center;
   align-items: center;
   width: 5rem;
   height: 5rem;
   background-color: transparent;
   border: 0.2rem solid #10a4b0;
   font-size: 2.5rem;
   border-radius: 50%;
   margin: 3rem 1rem;
   transition: 0.3s ease;
   color: #10a4b0;
}

.social-icons a:hover {
   color: black;
   transform: scale(1.2) translateY(-5px);
   background-color: #10a4b0;
   box-shadow: 0 0 20px #10a4b0;
}

footer {
  text-align: center;
  padding: 10px;
  color: #fff;
  font-size: 0.8rem;
}

@media (max-width: 768px) {
  .skills {
      flex-direction: column;
  }
  .profile h1{
    font-size: 2rem
  }

  .profile p{
    font-size: 1rem
  }

  .profile img{
    width: 200px;
  }
}
/* Default styles */
.animated-content {
   opacity: 0; /* Start hidden */
   transform: translateY(20px); /* Start slightly below */
   animation: fadeInUp 2s ease forwards; /* Animation for smooth effect */
   
   border-radius: 8px;
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* Keyframes for the fade-in effect */
@keyframes fadeInUp {
   0% {
      opacity: 0;
      transform: translateY(20px);
   }
   100% {
      opacity: 1;
      transform: translateY(0);
   }
}

/* Additional animations for sub-elements */
.animated-content h2,
.animated-content h3,
.animated-content p {
   opacity: 0; /* Start hidden */
   transform: translateY(10px); /* Start slightly below */
   animation: fadeInUpSub 0.6s ease forwards; /* Sub-element fade-in animation */
}

/* Keyframes for sub-elements */
@keyframes fadeInUpSub {
   0% {
      opacity: 0;
      transform: translateY(10px);
   }
   100% {
      opacity: 1;
      transform: translateY(0);
   }
}

/* Delay for h2 */
.animated-content h2 {
   animation-delay: 0.2s;
}

/* Delay for h3 */
.animated-content h3 {
   animation-delay: 0.4s;
}

/* Delay for p */
.animated-content p {
   animation-delay: 0.6s;
}

.animated-section {
   opacity: 0; /* Start hidden */
   transform: translateY(20px); /* Start slightly below */
   transition: opacity 2s ease, transform 0.6s ease; /* Transition for smooth effect */

   border-radius: 8px;
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* Fade-in effect when the section is visible */
.animated-section.visible {
   opacity: 1; /* Fully visible */
   transform: translateY(0); /* Move to original position */
}