body {
            font-family: Arial;
            text-align: center;
            /* margin-top: 150px; */
          
        }

        h1 {
            margin-top: 150px;
            margin-bottom: 10px;
            font-size:18px;
            font-weight: normal;
        }

        h2 {
            margin-bottom: 18px;
            font-weight: normal;
            font-size:17px;
        }

        h3 {
            font-weight: normal;
            font-size:16px;
            margin-bottom: 3px;
        }
        /* Hyperlink styling */
        a {
            color: black;
            text-decoration: none;
            font-size: 16px;
        }

        a:hover {
            text-decoration: underline;
        }

        /* Radio labels */
        .radio-group label {
            display: block;
            margin: 10px 0;
            cursor: pointer;
            text-decoration: none;
            list-style: none;
            font-size: 16px;
        }

        .radio-group label:hover {
            text-decoration: underline;
        }

        input[type="radio"] {
            margin-right: 8px;
        }

    input[type="radio"] {
  display: none;
}



.image-container {
  /* margin-top: 20px; */
  /* column-gap: 24px; horizontal spacing */
  /* row-gap: 254px;    vertical spacing (ROWS) */
  /* column-count: 3;  */
  /* column-gap: 14px; */
    column-count: 5; 
  column-gap: 10px;
}

.image-container a {
  break-inside: avoid;
  display: inline-block;
  width: 100%;
  margin-bottom: 24px;
}

/* Images fill grid cells */
.image-container img,
.image-container video {
  /* width: 100%; */
  width: 100%;
  height: auto;
  display: inline-block;
  /* object-fit: cover; */
  /* flex-direction: column; */
}

.hover-video {
  /* width: 300px; */
  height: auto;
  cursor: pointer;
  transition: transform 0.2s ease;
}

img.cu{
  height: 50%;
  width: 50%;
}
/* .img-cc {
  height: 50%;
  width: 50%;
} */
/* 
.hover-video:hover {
  transform: scale(1.05);
} */

/* MOBILE STYLES */
@media (max-width: 768px) {

  body {
    padding: 20px;
  }

  h1 {
    margin-top: 85px;   /* was 150px → too big for mobile */
    margin-bottom: 5px;
    font-size: 20px;
  }

  h2 {
    font-size: 19px;
    margin-bottom: 16px;
  }

       h3 {
            font-weight: normal;
            font-size:18px;
            margin-bottom: 3px;
        }

  a {
    margin-top: 10px ;
    font-size: 18px;   /* easier to tap */
  }

  .radio-group label {
    font-size: 18px;
    margin: 14px 0;
  }

  /* Portfolio grid fix */
  .image-container {
    column-count: 1;   /* 1 column on mobile */
    column-gap: 0;
  }

  /* Optional: make images full-width cleanly */
  .image-container img,
  .image-container video {
    width: 100%;
  }

  /* Optional: center smaller images */
  img.cu {
    width: 100%;
    height: auto;
  }
}

/*  TABLET  */
@media (min-width: 769px) and (max-width: 1200px) {
  .image-container {
    column-count: 2;
  }
}