@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300..700&display=swap');
 * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    html{
      height: 100%;
      width: 100%;
    scroll-behavior: smooth;
    }

    body {
      margin: 0;
        font-family: "Comfortaa", sans-serif;
        font-optical-sizing: auto;
        font-weight: 500;
          font-style: normal;
          background-color: #1b1b1b;
          color: #939598;
      height: 100%;
      width: 100%;
    scroll-behavior: smooth;
    }


       section {
      width: 100vw;
      height: 100vh;
        display: flex;
        flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 20px;
    }
        .intro {
      flex-direction: column;
      text-align: center;
      text-align: left;

    }

     .contact {
      flex-direction: column;
      text-align: center;
       text-align: left;

    }

    p.name{
        font-size: 2.4rem;
        font-weight: 700;
        margin-bottom: 1rem;
        color: #bcbec0;
    }
    p.contactno {
        font-size: 2.06rem;
        margin-bottom: 2rem;
        color: #6d6e71;

    }

        p.email {
        font-size: 1.875rem;
        margin-bottom: 2rem;
        color: #bcbec0;

    }

    .cont{
        width: 80vw;
    }
  .aboutu{
        width: 80vw;
    }




.link-container {
  display: flex;
  gap: 35px;
  justify-content: center;
  align-items: center;
}

.about-link img {
  width: 438px; /* Adjust as needed */
  height: auto;
  transition: all 0.3s ease;
}
.films-link img {
  width: 223px; /* Adjust as needed */
  height: auto;
  /* transition: filter 0.3s ease; */
}

.about-link img:hover {
  width: 438px; /* Adjust as needed */
  /*content: url("../images/svgs/thisisthat_web.svg");*/
  height: auto;
}
.films-link img:hover {
 /*content: url("../images/svgs/films_web.svg");*/
  width: 223px; /* Adjust as needed */
  height: auto;
}

    

/* Hover effect using filter (works well for monochrome SVGs) */
/* .svg-link:hover img {
  filter: brightness(0) saturate(100%) invert(90%) sepia(92%) saturate(748%) hue-rotate(330deg) brightness(95%) contrast(90%);
} */




     .about-container {
      display: flex;
      flex-direction: column;
      gap: 20px;
      margin-bottom: 10%;
    }



    h1{
        font-size: 2.0rem;
        margin-bottom: 0;
        line-height: 3.8rem;
    }
    h2{
        font-size: 2.0rem;
        margin-top: 0;
        margin-bottom: 0;

    }

    p{
        font-size: 2.0rem;
        margin-top: 0;
    }
/*******************edited on 20/2/26
    a {
      text-decoration: none;
      color: #939598;
      /* font-size: 2.4rem; */
 /***********   }
     a:hover {
      text-decoration: none;
      color: #c4161c;
    }***********/
    a {
  text-decoration: none;
  color: #939598;
}

a:hover {
  text-decoration: none;
  color: #c4161c;
}

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4 per row */
  gap: 25px;
  justify-items: center;
  align-items: start;
  padding: 20px;
}

.tile {
  cursor: pointer;
  text-align: center;
  width: 100%;
  max-width: 250px;
  transition: transform 0.25s ease;
}

.tile img {
  width: 100%;
  height: 160px; /* uniform height */
  object-fit: cover; /* crop to fill */
  border-radius: 10px;
  display: block;
}

.tile:hover {
  transform: scale(1.03);
}

.label {
  margin-top: 8px;
  font-weight: bold;
  color: #fff;
  font-size: 14px;
}
/*

.label {
  padding: 15px;
  font-size: 1.2rem;
  color: #ccc;
}*/

.container {
  width: 90%;
  margin: 0 auto;
}

/* Lightbox styles */
.lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.95);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 999;
  flex-direction: column;
}

.video-wrapper {
  width: 100vw;
  height: 100vh;
  position: relative;
}

.lightbox iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}
.lightbox .close {
  color: #fff;
  font-size: 2rem;
  margin-top: 20px;
  cursor: pointer;
}





.svg-link:visited img {
  filter: none;
}



/* Mobile view adjustments */
@media (max-width: 600px) {
.about-link:visited img {
  content: url("../images/svgs/thisisthat_mob.svg");
  width: 320px;
  height: auto;
}

.films-link:visited img {
  content: url("../images/svgs/films_mob.svg");
  width: 336px;
  height: auto;
}
  .about-link img {
    width: 320px;
    height: auto;

    content: url("../images/svgs/thisisthat_mob.svg");
  }

  .films-link img {
    width: 336px;
    height: auto;

    content: url("../images/svgs/films_mob.svg");
  }

 /* .about-link img:hover {
    width: 320px;
    height: auto;

    content: url("../images/svgs/thisisthat_mob_hover.svg");
  }

  .films-link img:hover {
    width: 336px;
    height: auto;

    content: url("../images/svgs/films_mob_hover.svg");
  }
*/
.about-link img:hover {
    width: 320px;
    height: auto;
   /* content: url("../images/svgs/thisisthat_mob.svg");*/
}

.films-link img:hover {
    width: 336px;
    height: auto;
   /* content: url("../images/svgs/films_mob.svg");*/
}

  .link-container {
    flex-direction: column;
    align-items: flex-start;
    padding-left: 10px;
    gap: 10px;
  }

  .cont {
    width: 90vw;
  }

  .aboutu {
    width: 80vw;
  }

  h1 {
    font-size: 1.875rem;
    line-height: 2.8rem;
  }

  p {

    font-size: 1.875rem;

  }

  p a {
    font-size: 1.875rem;

  }


  section {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
    padding: 20px;
  }


  p.name {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: #bcbec0;
  }

  p.contactno {
    font-size: 1.5rem;
    margin-bottom: 2rem;
    color: #6d6e71;

  }

  p.email {
    margin-top: -1rem;
    font-size: 1.5rem;
    margin-bottom: 2rem;
    color: #bcbec0;

  }



.social-icon {
  margin: 0 10px;
  font-size: 28px;
  text-decoration: none;
  transition: transform 0.3s ease, color 0.3s ease;
}

/* Instagram gradient */
.social-icon.instagram {
  color: #E1306C;
}
.social-icon.instagram:hover {
  color: #C13584;
  transform: scale(1.4);
}

/* Facebook blue */
.social-icon.facebook {
  color: #1877F2;
}
.social-icon.facebook:hover {
  color: #145dbf;
  transform: scale(1.4);
}

/* YouTube red */
.social-icon.youtube {
  color: #FF0000;
}
.social-icon.youtube:hover {
  color: #cc0000;
  transform: scale(1.4);
}
@media (max-width: 1024px) {
  .grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

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

@media (max-width: 480px) {
  .grid {
    grid-template-columns: repeat(1, 1fr);
  }
}


}