/* General */
body {
  font-family: 'Poppins', sans-serif;
  scroll-behavior: smooth;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Prevent dragging images */
img {
  -webkit-user-drag: none;
  user-drag: none;
  pointer-events: auto;
}

/* Tooltip */
#rc-tooltip {
  transition: opacity 0.3s ease;
  opacity: 0.95;
}

/* Carousel */
.carousel-control-prev-icon,
.carousel-control-next-icon {
  filter: invert(1);
}

.carousel-fade .carousel-item {
  transition: opacity 2s ease-in-out;
}

/* HERO & Carousel */
.hero {
  height: 100vh;
  position: relative;
  overflow: hidden;
  /* color: white; */
}

.carousel-inner .carousel-item {
  height: 100%;
  background-size: cover;
  background-position: center;
}


.carousel-item {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Remove height: 100% from .carousel-item if transitions freeze */

/* Portfolio */
/* Portfolio Grid */
.portfolio-grid {
  max-width: 1200px;
  margin: 0 auto 60px auto; /* centered and some bottom space */
}

.portfolio-item {
  margin-bottom: 16px;     /* vertical gap between items */

}


.portfolio-img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  border-radius: 16px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.portfolio-img:hover {
  transform: scale(1.03);
  box-shadow: 0 20px 40px rgba(0,0,0,0.25);
}

/* Filter button active */
.filter-btn.active {
  background-color: #0d6efd;
  color: #fff;
}

.abouttxt{
    font-size: 20px;
  }


/* Tablet */
@media (max-width: 992px) {
  .portfolio-item {
    width: 45%; /* 2 columns */
  }
  .proimg {
    max-width: 80%; /* a bit smaller */
  }
  .abouttxt{
    font-size: 14px;
  }
}

/* Mobile */
@media (max-width: 576px) {
  .portfolio-item {
    width: 45%; /* 2 columns */
  }
  .proimg {
    max-width: 60%; /* smaller on small screens */
    margin-left: auto;
    margin-right: auto;
    display: block; /* center the image */
  }
  .abouttxt{
    font-size: 13px;
  }
}

/* Footer color */
footer {
  background-color: #0b0b0b;
  color: #aaa;
}

#contact a:hover i {
    color: #0d6efd; /* Bootstrap primary color on hover */
    transform: scale(1.2);
    transition: 0.3s;
}

#contact h5 {
    margin-top: 0.5rem;
}