/* General Reset */
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

* {
    
    font-family: "Poppins", sans-serif;
}

#graphic-design-title{

  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-size: 5rem;
  text-align: center;

}



/* ===========hero section style========== */


.ftme-style-text{
  color: transparent;           /* Removes fill color */
  -webkit-text-stroke: 0.5px rgb(255, 255, 255); /* Outline width & color */
  font-size: 5.1rem;
  font-weight: 900;

}




/* Base styles for the gallery */
#gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* Start with 4 columns on desktop */
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  background: #1a1a1a; /* Dark background for your theme */
}

/* Shot container styling */
.shot {
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
  background: none; /* Remove background to match Dribbble */
}

/* Hover effect for desktop */
@media (hover: hover) and (pointer: fine) {
  .shot:hover {
    transform: scale(1.03);
    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.15);
  }
}

/* Shot link styling */
.shot-link {
  text-decoration: none;
  color: inherit;
  display: block;
}

/* Image styling */
.shot img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 8px;
}

/* Shot title styling (hidden on desktop, shown on mobile) */
.shot-title {
  display: none; /* Hide by default on desktop */
  padding: 8px 0;
  font-size: 14px;
  color: #e0e0e0;
  text-align: left;
  background: none;
}

/* Loading indicator */
#loading {
  font-size: 14px;
  color: #bebebe;
  padding: 20px;
  text-align: center;
}

/* Large tablet: 3 columns (992px - 1199px) */
@media (max-width: 1199px) {
  #gallery {
    grid-template-columns: repeat(3, 1fr); /* 3 columns */
    gap: 10px;
    padding: 0 18px;
  }
}

/* Small tablet: 2 columns (768px - 991px) */
@media (max-width: 991px) {
  #gallery {
    grid-template-columns: repeat(2, 1fr); /* 2 columns */
    gap: 10px;
    padding: 0 15px;
  }

  .shot-title {
    font-size: 13px;
    padding: 6px 0;
  }

  #loading {
    font-size: 13px;
    padding: 15px;
  }
}

/* Mobile: 1 column (below 768px) */
@media screen and (max-width: 767px) {
  #gallery {
    grid-template-columns: 1fr; /* 1 column */
    gap: 10px;
    row-gap: 2rem;
    padding: 0 2rem;
  }

  .shot {
    border-radius: 6px;
  }

  /* Show the shot title on mobile */
  .shot-title {
    display: block;
  }

  #loading {
    font-size: 12px;
    padding: 10px;
  }



  .ftme-style-text{
    font-size: 1.4em;
  }



  #graphic-design-title{

    font-family: "Poppins", sans-serif;
    font-weight: 700;
    font-size: 1rem;
  
  }

  #project-word-style{
    font-size: 3.3rem;
  }

  
}