.button-row {
    display: flex;
    justify-content: space-between;
    width: 100%;
    max-width: 600px;   
    margin: 0 auto;     
    padding: 20px 0;
}

.grid-images img:hover{
    transform: scale(1.05);                      /* slight zoom */
    box-shadow: 0 0 15px 6px #B256FF;            /* glowing purple border */
    filter: brightness(1.1);                     /* optional extra pop */
    animation: glow-cycle 1.5s ease-in-out infinite alternate;

    transition: 
    transform 0.35s cubic-bezier(0.25, 0.1, 0.25, 1),
    box-shadow 0.4s ease,
    filter 0.3s ease;
}

@keyframes glow-cycle {
    0%   { box-shadow: 0 0 12px 4px #B256FF; }
    50%  { box-shadow: 0 0 18px 7px #D27BFF; }
    100% { box-shadow: 0 0 24px 10px #FFD84A; }
}


/* 3D animation section*/
.threed-animation-section {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px;
  h2 {
    text-align: center;
    font-size: 2rem;
    margin: 40px auto 20px;
    width: 100%;
}
}

.threed-animation-section h2 {
text-align: center !important;
  font-size: 2rem;
  margin-bottom: 40px;
}

.threed-projects-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);  
    gap: 20px;                               
    max-width: 1200px;                       
    margin: 0 auto;
    padding: 40px 20px;
}

.threed-projects-grid img {
    width: 100%;
    display: block;
    border-radius: 10px;
    object-fit: cover;
    box-shadow: 0 0 0 2px #B256FF; 
}

.threed-projects-grid .ee-wide {
    grid-column: 1 / -1;    
}


/* 2D animation secion */
.twod-animation-section {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px;
  h2 {
    text-align: center;
    font-size: 2rem;
    margin: 40px auto 20px;
    width: 100%;
}
}

.twod-animation-section h2 {
text-align: center !important;
  font-size: 2rem;
  margin-bottom: 40px;
}

.twod-projects-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);  
    gap: 20px;                               
    max-width: 1200px;                       
    margin: 0 auto;
    padding: 40px 20px;
}

.twod-projects-grid img {
    width: 100%;
    display: block;
    border-radius: 10px;
    object-fit: cover;
    box-shadow: 0 0 0 2px #FFD84A; 
}

.twod-projects-grid .twod-wide {
    grid-column: span 2; 
    aspect-ratio: 16 / 9;    
}

/* compositing section*/
.compositing-section {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px;
  h2 {
    text-align: center;
    font-size: 2rem;
    margin: 40px auto 20px;
    width: 100%;
}
}

.compositing-section h2 {
text-align: center !important;
  font-size: 2rem;
  margin-bottom: 40px;
}
.compositing-projects-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);  
    gap: 20px;                               
    max-width: 1200px;                       
    margin: 0 auto;
    padding: 40px 20px;
}

.compositing-projects-grid img {
    width: 100%;
    display: block;
    border-radius: 10px;
    object-fit: cover;
    box-shadow: 0 0 0 2px #FD30FF; 
}

@media (max-width: 900px) {
    .threed-projects-grid,
    .compositing-projects-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .twod-projects-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .threed-projects-grid,
    .twod-projects-grid,
    .compositing-projects-grid {
        grid-template-columns: 1fr; /* stack vertically */
    }

    .ee-wide,
    .twod-wide {
        grid-column: span 1 !important;
        aspect-ratio: auto;
    }
}

/*The Eclpise*/

.video-container {
    width: 100%;
    max-width: 1200px;   /* optional: keeps it from getting TOO huge on big screens */
    margin: 0 auto;      /* centers it */
}

.video-container iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    border: none;
    border-radius: 12px;
    display: block;
}

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

.SolidViewImages{
    max-width: 110%;
    height: auto;
    display: block;
}