body {
  margin: 0;
  padding: 0;
  font-family: "Exo", sans-serif;
  background-color: #000000;
  color: #ffffff;
  min-height: 100vh;
}

* {
  box-sizing: border-box;
}

.home {
  min-height: 100vh;
}

.navbar {
  background: rgba(0, 0, 0, 0.85) !important;
  backdrop-filter: blur(10px);
}

.navbar-toggler-icon {
  background-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");
}

.navbar-nav .nav-link:hover {
  color: #f64f0b !important;
}

.section-wrapper {
  padding: 4rem 0;
}

.glass-card {
  background: rgba(255, 255, 255, 0.03);
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(12px);
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

.glass-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 26px 65px rgba(0, 0, 0, 0.95);
  border-color: #f64f0b;
}

.accent-title {
  color: #f64f0b;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.section-subtitle {
  color: #ffffff;
  font-weight: 700;
  font-size: 1rem;
  opacity: 0.8;
}

.home-title {
  color: #f64f0b;
  font-size: 3.1rem;
  font-weight: 900;
}

.home-role {
  font-size: 1.1rem;
  opacity: 0.8;
}

.home-details .btn:hover {
  background-color: #f64f0b !important;
  color: #000 !important;
  border: none !important;
}

.social-icon {
  transition: transform 0.2s ease;
}

.social-icon:hover {
  transform: scale(1.8);
}
/* base look */
.project-btn {
  background-color: #000000 !important;
  color: #ffffff !important;
  border: 10cm;
}

/* hover look */
.project-btn:hover {          /* ← no space here */
  background-color: #f64f0b !important;
  color: #000 !important;
  border: none !important;
}
.skill-content{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 2rem;
    margin: 40px;
}
.bar{
    align-items: center;
    display: flex;
    justify-content: space-between;
    padding: 18px 0px;
    position: relative;;
}
.skill-head,.skill-perc{
    font-size: 20px;
    font-weight: bold;
}
.base-bar{
    width: 100%;
    height: .6rem;
    background-color: black;
    border-radius: .5rem;
    position: absolute;
    bottom: 0;
}
#html-bar{
    background-color: antiquewhite;
    width: 90%;
}
.floating-icon {
  position: fixed;        /* Makes it stay in place when scrolling */
  bottom: 40px;           /* Distance from bottom of the screen */
  right: 40px;            /* Distance from right of the screen */
  z-index: 9999;          /* Keeps it above other elements */
}

.floating-icon img {
  width: 30px;            /* Initial width */
  height: auto;           /* Maintains aspect ratio */
  max-width: 15vw;        /* Responsive: scales on smaller screens */
  transition: transform 0.2s ease;
  cursor: pointer;        /* Optional: cursor pointer on hover */
}

.floating-icon img:hover {
  transform: scale(1.1);  /* Slight zoom on hover */
}