:root {
    --primary: #4d99d7;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', sans-serif;
}

/* Utility Classes for the Primary Color */
.primary-bg {
    background-color: var(--primary);
}

.primary-text {
    color: var(--primary);
}

.primary-border {
    border-color: var(--primary);
}

/* Ensure images are responsive */
img {
    max-width: 100%;
    height: auto;
}

#prev-btn,
#next-btn {
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.collapsible-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.6s ease, opacity 0.6s ease;
    opacity: 0;
}

.collapsible-content.open {
    max-height: 1150px;
    /* Large enough for content */
    opacity: 1;
}

.portfolio-img:hover {
    transform: scale(1.03);
    transition: transform 0.3s ease;
  }