
 
   .gallery {
     background-color: #f8f9fa;
     padding: 20px 0;
   }
 
   .gallery h2 {
     position: relative;
     padding-bottom: 10px;
     text-align: center;
     margin-bottom: 30px;
   }
 
   .gallery h2::after {
     content: '';
     position: absolute;
     bottom: 0;
     left: 50%;
     transform: translateX(-50%);
     width: 100px;
     height: 2px;
     background-color: #000;
   }
 
   .gallery-grid {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     grid-auto-rows: 250px;
     gap: 15px;
     padding: 15px;
     max-width: 1400px;
     margin: 0 auto;
   }
 
   .grid-item {
     position: relative;
     overflow: hidden;
     border-radius: 8px;
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
     transition: transform 0.3s ease;
     width: 100%;
     height: 100%;
   }
 
   .grid-item:hover {
     transform: scale(1.02);
   }
 
   /* Featured items layout */
   .grid-item:nth-child(1) {
     grid-column: span 2;
     grid-row: span 2;
   }
 
   
 
   .grid-item:nth-child(5),
   .grid-item:nth-child(6) {
     grid-column: span 1;
     grid-row: span 2;
   }
 
   .grid-item:nth-child(2),
   .grid-item:nth-child(9) {
     grid-column: span 2;
   }
 
   .grid-item img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     display: block;
     
   }
 
   @media (max-width: 992px) {
     .gallery-grid {
       grid-template-columns: repeat(3, 1fr);
       grid-auto-rows: 200px;
     }
 
    
     .grid-item:nth-child(1),
     .grid-item:nth-child(2) {
       grid-column: span 2;
       grid-row: span 1;
     }
   }
 
   @media (max-width: 768px) {
     .gallery-grid {
       grid-template-columns: repeat(2, 1fr);
       grid-auto-rows: 180px;
       gap: 10px;
       padding: 10px;
     }
 
     /* Reset all spanning for medium screens */
     .grid-item:nth-child(n) {
       grid-column: span 1;
       grid-row: span 1;
     }
 
     /* Keep only first item featured */
     .grid-item:nth-child(1) {
       grid-column: span 1;
      
       width: 100%;
       
     }
   }
 
   @media (max-width: 576px) {
     .gallery-grid {
       grid-template-columns: 1fr;
       grid-auto-rows: auto;
       gap: 15px;
     }
     
 
     .grid-item:nth-child(1) {
         grid-column: span 1;
         width: 100%;
     }
 
     .grid-item {
       height: 250px;
     }
 
     /* Reset all spanning for mobile */
     .grid-item:nth-child(n) {
       grid-column: span 1;
       grid-row: span 1;
     }
   }
 
   /* Animation */
   @keyframes fadeInUp {
     from {
       opacity: 0;
       transform: translateY(20px);
     }
 
     to {
       opacity: 1;
       transform: translateY(0);
     }
   }
 
   .grid-item {
     animation: fadeInUp 0.6s ease-out forwards;
     opacity: 0;
   }
 
   .grid-item:nth-child(n) {
     animation-delay: calc(0.1s * var(--i));
   }
 
   /* Tablet Responsive */
 @media (max-width: 992px) {
   .gallery-grid1 {
     grid-template-columns: repeat(2, 1fr);
     gap: 20px; 
   }
 
   .gallery-grid1 img,
   .gallery-grid1 img:nth-child(n) {
     grid-column: span 1;
     height: 300px;
    
     margin-top: 0; /* Reset any margin-top */
   }
 }
 
 /* Mobile Responsive */
 @media (max-width: 576px) {
   .gallery-grid1 {
     grid-template-columns: 1fr;
     gap: 20px; 
   }
 
   .gallery-grid1 img,
   .gallery-grid1 img:nth-child(n) {
     grid-column: span 1;
     height: 250px;
     margin-top: 0; /* Reset any margin-top */
   }
 }
 
 
 /* Base mobile styles */
 @media screen and (max-width: 767px) {
   /* Header adjustments */
  
   
   
   
   /* Content section */
   
   
   /* Gallery adjustments */
   .gallery-grid1 {
     grid-template-columns: 1fr;
     gap: 15px;
     padding: 10px;
   }
   
   .gallery-grid1 img {
     height: 200px !important;
     margin-top: 0 !important;
   }
   
  
 }
 
 /* iPhone SE specific adjustments */
 @media screen and (max-width: 375px) {
   
   
   .gallery-grid1 img {
     height: 180px !important;
   }
 }
 
 
 
 
 /* Pixel 7 specific adjustments */
 @media screen and (max-width: 412px) {
   .gallery-grid1 {
     padding: 8px;
   }
  
 }
 
 
 
   /* Hill country */