:root {
    --white-color: #fff;
    --bg-color: #fff;
    --gray-color: #ccc;
  }
  

  
  .nav-item .nav-link {
    color: var(--white-color);
  }
  
/* Default Light Mode (Background Image) */
.hero {
  height: 100vh;
  background-image: url("./images/techwhite.png");
  background-repeat: no-repeat;
  background-position: 60% 0%;
  background-size: cover;
  background-attachment: fixed;
}

/* Dark Mode (Background Image) */
body.dark-mode .hero {
  background-image: url("./images/tech.png");
}

  
  #skills i {
    height: 100px;
    width: 100px;
  }
  
  #portfolio img {
    height: 300px;
    object-fit: cover;
  }
  
  #about .img,
  #about img,
  .hire-text h2 {
    position: relative;
  }
  
  #about .img::before {
    content: "";
    left: 50%;
    width: 4px;
    position: absolute;
    height: calc(100% + 140px);
    background: var(--gray-color);
  }
  
  #about img,
  #about .hire-text h2 {
    width: 140px;
  }
  
  #about .hire-text h2 {
    height: 140px;
  }
  
  .social-icons a {
    width: 40px;
    height: 40px;
  }
  
  footer .social-icons a {
    width: 30px;
    height: 30px;
  }
  
  #cv img {
    width: 230px;
  }
  
  #contact {
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
    background-image: url("./images/contact-bg.jpeg");
  }
  
  @media screen and (max-width: 990px) {
    #skills .card {
      width: calc(100% / 2 - 10px) !important;
    }
  }
  
  @media screen and (max-width: 668px) {
    #skills .card,
    #portfolio .card-wrapper {
      width: 100% !important;
    }
   #about .hire-text h2 {
     height: 70px;
     width: 70px;
   }
  }

  .heading {
    text-align: center;
    color: #454343;
    font-size: 30px;
    font-weight: 700;
    position: relative;
    margin-bottom: 70px;
    text-transform: uppercase;
    z-index: 999;
}
.white-heading{
    color: #ffffff;
}
.heading:after {
    content: ' ';
    position: absolute;
    top: 100%;
    left: 50%;
    height: 40px;
    width: 180px;
    border-radius: 4px;
    transform: translateX(-50%);
    background: url(img/heading-line.png);
    background-repeat: no-repeat;
    background-position: center;
}
.white-heading:after {
    background: url(https://i.ibb.co/d7tSD1R/heading-line-white.png);
    background-repeat: no-repeat;
    background-position: center;
}

.heading span {
    font-size: 18px;
    display: block;
    font-weight: 500;
}
.white-heading span {
    color: #ffffff;
}



.card-wrapper {
  margin-bottom: 20px;
}

.card {
  border: none;
  transition: transform 0.3s;
}

.card:hover {
  transform: scale(1.05);
}

.card-body {
  padding: 15px;
}

.card-title {
  margin: 10px 0;
  font-size: 1.25rem;
  font-weight: bold;
}

.portfolio-img {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 8px;
  aspect-ratio: 16/9; 
}

.text-center {
  text-align: center;
}

.text-secondary {
  color: #6c757d;
}

body {
  transition: background-color 0.4s ease, color 0.4s ease; 
  scroll-behavior: smooth;
}

body.light-mode {
  background-color: #fff;
  color: #000;
}

body.light-mode h2 {
  color: black;
}

body.light-mode h4 {
  color: black;
}

body.light-mode li {
  color: black;
}

body.dark-mode {
  background-color: #000;
  color: #fff;
}

body.dark-mode h2 {
  color: white;
}

body.dark-mode li {
  color: white;
}

body.dark-mode h4 {
  color: white;
}



/* Default Light Mode Text Styles */
.hero h2, .hero h4 {
  color: #000 !important; /* Black text for light mode */
}

/* Dark Mode Text Styles */
body.dark-mode .hero h2, 
body.dark-mode .hero h4 {
  color: #fff !important; /* White text for dark mode */
}


/* Container for the toggle switch */
.toggle-container {
  display: flex;
  justify-content: flex-start; /* Align the elements */
  align-items: center;
  margin-top: 20px;
  width: 100%;
  padding-right: 20px; /* Space to the right of the toggle container */
}

/* Style for the toggle switch */
.toggle-checkbox {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.toggle-slot {
  position: relative;
  height: 2.5em; /* Maintain current height */
  width: 5.5em; /* Adjust width to fit the toggle button and icons */
  border: 3px solid #e4e7ec;
  border-radius: 10em;
  background-color: white;
  box-shadow: 0px 6px 15px #e4e7ec;
  transition: background-color 250ms;
  bottom: 0.5em;
}

/* When the checkbox is checked (dark mode) */
.toggle-checkbox:checked ~ .toggle-slot {
  background-color: #374151;
  width: 5.5em;
}

/* Toggle Button */
.toggle-button {
  transform: translate(0.3em, 0.3em); /* Position it on the left by default */
  position: absolute;
  height: 1.5em; /* Reduced size */
  width: 1.5em;  /* Reduced size */
  border-radius: 50%;
  background-color: #ffeccf;
  box-shadow: inset 0px 0px 0px 0.5em #ffbb52;
  transition: background-color 250ms, border-color 250ms, transform 500ms cubic-bezier(.26, 2, .46, .71);
}

/* Toggle button position when checkbox is checked (dark mode) */
.toggle-checkbox:checked ~ .toggle-slot .toggle-button {
  background-color: #485367;
  box-shadow: inset 0px 0px 0px 0.5em white;
  transform: translate(3.4em, 0.3em); /* Position to the right in dark mode */
  left: 0em;
}

/* Sun icon */
.sun-icon {
  position: absolute;
  height: 1.4em; /* Slightly smaller */
  width: 1.4em;  /* Slightly smaller */
  color: #ffbb52;
}

.sun-icon-wrapper {
  position: absolute;
  height: 1.4em; /* Reduced size */
  width: 1.4em;  /* Reduced size */
  opacity: 1;
  transform: translate(3.5em, 0.3em) rotate(15deg); /* Adjusted position to the right */
  transform-origin: 50% 50%;
  transition: opacity 150ms, transform 500ms cubic-bezier(.26, 2, .46, .71);

}

/* When toggle is checked, hide sun icon */
.toggle-checkbox:checked ~ .toggle-slot .sun-icon-wrapper {
  opacity: 0;
  transform: translate(0.3em, 0.3em) rotate(0deg);
}

/* Moon icon */
.moon-icon {
  position: absolute;
  height: 1.4em; /* Slightly smaller */
  width: 1.4em;  /* Slightly smaller */
  color: white;
}

.moon-icon-wrapper {
  position: absolute;
  height: 1.4em; /* Reduced size */
  width: 1.4em;  /* Reduced size */
  opacity: 0;
  transform: translate(0.3em, 0.3em) rotate(0deg); /* Position moon to the left initially */
  transform-origin: 50% 50%;
  transition: opacity 150ms, transform 500ms cubic-bezier(.26, 2.5, .46, .71);
}

/* When checkbox is checked (dark mode), show moon icon and position it on the left */
.toggle-checkbox:checked ~ .toggle-slot .moon-icon-wrapper {
  opacity: 1;
  transform: translate(0.3em, 0.3em) rotate(-15deg); /* Position moon to the left */
}

/* When toggle is checked (dark mode), show sun icon and position it on the right */
.toggle-checkbox:checked ~ .toggle-slot .sun-icon-wrapper {
  opacity: 1;
  transform: translate(3.5em, 0.3em) rotate(15deg); /* Position sun to the right */
}




/* Dark Mode */
body.dark-mode label {
  color: black !important; /* White labels for dark mode */
}







/* Light Mode */
body.light-mode .navbar {
  top: 0; 
  width: 100%; 
  background-color: white !important; 
  color: black !important; 
  z-index: 9999;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); 
  max-width: 2000px;
}


body.light-mode .navbar .navbar-brand {
  color: black !important; 
}



body.light-mode .navbar .nav-link {
  color: black !important;
  margin-right: 20px; 
}

body.light-mode .navbar .nav-link:hover {
  color: #007bff !important; 
  text-decoration: none;
}

/* Dark Mode */
body.dark-mode .navbar {
  width: 100%; 
  background-color: black !important; 
  color: white !important; 
  z-index: 9999;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); 
  max-width: 2000px;
}



body.dark-mode .navbar .navbar-brand {
  color: white !important; 
}


body.dark-mode .navbar .nav-link {
  color: white !important; 
  margin-right: 20px; 
}

body.dark-mode .navbar .nav-link:hover {
  color: #007bff !important;
  text-decoration: none;
}

/* Dark Mode: Make the hamburger icon white */
body.dark-mode .navbar-toggler-icon {
  background-color: white;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='white' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='white' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}


/* Ensure links are properly aligned on small screens */
@media (max-width: 992px) {
  .navbar-nav {
    margin-left: 0; /* Remove the left margin to fit smaller screen size */
  }
}