:root {
            --primary-color: #FF211A;
            --primary-light: #FFFFFF;
            --text-dark: #1F2937;
            --text-light: #6B7280;
        }
        .portfolio-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 20px;
        }

        .portfolio-item {
            border-radius: 12px;
            overflow: hidden;
            transition: transform 0.3s ease;
        }

        .portfolio-item:hover {
            transform: translateY(-4px);
        }

        /* Tab styles */
        .tab-button {
            padding: 12px 24px;
            font-weight: 500;
            border-bottom: 2px solid transparent;
            transition: all 0.3s ease;
        }

        .tab-button.active {
            border-bottom-color: var(--primary-color);
            color: var(--primary-color);
        }

        /* Certificate card */
        .certificate-card {
            background: white;
            border-radius: 12px;
            padding: 20px;
            transition: transform 0.3s ease;
            border: 1px solid #E5E7EB;
        }

        .certificate-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        }

        /* Social links */
        .social-link {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
            background: var(--primary-light);
            color: var(--primary-color);
        }

        .social-link:hover {
            transform: translateY(-2px);
            background: var(--primary-color);
            color: white;
        }

        /* Contact button */
        .contact-btn {
            padding: 12px 24px;
            border-radius: 50px;
            font-weight: 500;
            transition: all 0.3s ease;
            background: var(--primary-color);
            color: white;
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }

        .contact-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(255, 33, 26, 0.3);
        }



/*adding some wild stuff*/

.gallery-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

.gallery-main {
  position: relative;
  width: 100%;
  max-width: 100%;
}

.gallery-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Carousel styling */
.carousel-container {
  display: none; /* Hidden by default, shown on mobile/tablet */
  overflow: hidden;
  position: relative;
}

.carousel-images {
  display: flex;
  transition: transform 0.5s ease;
}

.carousel-images img , .carousel-images video{
  width: 100%;
  max-width: 100%;
  flex: 0 0 auto; /* Prevent images from stretching */
}

/* Mobile & Tablet Carousel */
@media (max-width: 768px) {

  .modalu{
    display: none !important;
  }
  .gallery-main{
      display: none !important;
  }
  .carousel-container {
    display: block; /* Show carousel on mobile/tablet */
  }

  .carousel-images , .carousel-images video{
    /* Allow scroll in horizontal direction */
    flex-wrap: nowrap;
    overflow-x: auto;
  }

  .carousel-images img , .carousel-images video{
    width: 100%; /* Make images take full width of the container */
    height: 30vh;
  }

}

.gallery-video {
    width: 100%;
    height: 100%;
}

.video-container.maximized {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999;
}