/* General Reset */
body,
html {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Josefin Sans", sans-serif;
  overflow-x: hidden;
  overflow-y: auto; /* Ensure vertical scrolling is enabled */
  height: 100%; /* Required for proper scrolling */
}

h1 {
  margin: 0;
}

/* Overall Page Layout */
.about-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  position: relative;
}

/* Header */
.header {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 20px;
}

.nav ul {
  list-style: none;
  padding: 17px 7px 0 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  float: left;
}

.nav-footer ul {
  list-style: none;
  padding: 0 7px 17px 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  float: left;

  letter-spacing: -0.04em;
  text-transform: uppercase;
  font-weight: 700;
}

.logo {
  position: relative;
  width: 100px;
}

.nav {
  position: relative;
}

.nav ul li a {
  text-decoration: none;
  color: #000;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 16px;
}

a:hover {
  color: #0b60ec !important;
}


        .about-rascal-desktop-item {
    /*top: 7px;*/
    /*left: 1811px;*/
    width: 72.4px;
    height: 55.1px;
    cursor: pointer;
}

.image-icon3 {
    /*position: absolute;*/
    /*top: 981px;*/
    /*left: 1825px;*/
    width: 79.3px;
    height: 65.3px;
    object-fit: contain;
}

.path-1-icon3 {
    /*position: absolute;*/
    /*top: 991px;*/
    /*left: 9px;*/
    width: 73.6px;
    height: 61.6px;
    object-fit: contain;
}


/* Content Section */
.content {
  display: flex;
  flex: 1;
  width: 82%;
  margin: 0 auto;
  gap: 0px;
  position: relative;
  vertical-align: middle;
  align-items: center;
}

/* Gallery Section */
.gallery {
  display: grid;
  grid-template-columns: repeat(8, 1fr); /* 8 equal-width columns */
  grid-template-rows: repeat(3, 1fr); /* 3 rows with equal height */
  gap: 16px; /* Space between grid items */
  max-height: 77vh; /* Constrain the grid height to 80% of viewport */
  overflow: auto; /* Enable scrolling within the grid */
}

/* Horizontal Images (4 columns wide) */
.gallery-item.horizontal {
  grid-column: span 4; /* Spans 4 columns */
  grid-row: span 1; /* Spans 1 row */
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Vertical Images (1 column wide, 2 rows tall) */
.gallery-item.vertical {
  grid-column: span 1; /* Spans 1 column */
  grid-row: span 2; /* Spans 2 rows */
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 2-Column-Wide Images (2 columns, 2 rows tall) */
.gallery-item.two-col {
  grid-column: span 2; /* Spans 2 columns */
  grid-row: span 2; /* Spans 2 rows */
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Mobile Layout */
@media screen and (max-width: 450px) {
  body {
    overflow-y: auto; /* Ensure scrolling is always possible */
  }

  .nav ul {
    display: none; /* Hide navigation links on mobile */
  }

  .main-image-wrapper,
  .main-image {
    display: none;
  }

  .footer,
  .path-1-icon3,
  .image-icon3,
  .about-rascal-desktop-item {
    display: none !important;
  }

  .gallery {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 equal-width columns */
    grid-auto-rows: minmax(120px, auto); /* Row heights adjust based on content */
    gap: 8px; /* Smaller gap for mobile */
    max-height: 100vh;
  }

.gallery-item.horizontal {
    grid-column: span 2;
    grid-row: span 2;
    min-height: 240px;
}

  /* Vertical Image (1 column wide, 2 rows tall) */
  .gallery-item.vertical {
    grid-column: span 1;
    grid-row: span 3;
    min-height: 360px; /* Ensure enough height for vertical images */
  }

  /* 2-Column-Wide Image (2 columns, 2 rows tall) */
  .gallery-item.two-col {
    grid-column: span 2;
    grid-row: span 3;
    min-height: 360px; /* Ensure enough height for 2-row images */
  }
}


/* Mobile Layout Adjustment */
 

/* Ensure grid flows properly for mobile */
@media screen and (max-width: 450px) {
 

      .gallery-item:nth-child(5) {
        order: 1; /* Correct flow on mobile */
      }
    
      .gallery-item:nth-child(7) {
        order: 2; /* Correct flow next to the 5th item */
      }
      .gallery-item:nth-child(8) {
        order: 3; /* Correct flow next to the 5th item */
      }
}

  

/* Modal Styling */
.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  justify-content: center;
  align-items: center;
}

.modal-content {
  max-width: 80%;
  max-height: 80%;
}

.close {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 30px;
  color: white;
  cursor: pointer;
}

/* Footer */
.footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
}

.footer a {
  text-decoration: none;
  color: #000;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 16px;
  letter-spacing: -0.04em;
}

.left-links,
.right-links {
  display: flex;
  align-items: center;
  gap: 10px;
}


/** Photography 2 css **/
 
 
  .gallery2 {
  display: grid;
  grid-template-columns: repeat(10, 1fr); /* 10 equal-width columns */
  grid-template-rows: repeat(3, 1fr); /* 3 rows with equal height */
  gap: 16px; /* Space between grid items */
  max-height: 77vh; /* Constrain the grid height to 80% of viewport */
  overflow: auto; /* Enable scrolling within the grid */
}

      /* Specific Grid Layouts */
      .gallery-item.horizontal-4col {
            grid-column: span 4;
            grid-row: span 1;
            width: 100%;
            height: 100%;
            object-fit: cover;
      }

      .gallery-item.vertical-3row {
            grid-column: span 2;
            grid-row: span 3;
            width: 100%;
            height: 100%;
            object-fit: cover;
      }

      .gallery-item.two-col-2row {
            grid-column: span 2;
            grid-row: span 2;
            width: 100%;
            height: 100%;
            object-fit: cover;
      }

      .gallery-item.one-col-3row {
        grid-column: span 1;
        grid-row: span 3;
          width: 100%;
          height: 100%;
          object-fit: cover;
      }

  .gallery-item.horizontal-2row {
    grid-column: span 4;
    grid-row: span 2;
    width: 100%;
    height: 93%;
    object-fit: fill;
}
      .gallery-item.horizontal-1row {
        grid-column: span 1;
        grid-row: span 1;
          width: 100%;
          height: 100%;
          object-fit: cover;
      }


  @media screen and (max-width: 450px) {
        .gallery2 {
          display: grid;
          grid-template-columns: repeat(2, 1fr); /* 2 equal-width columns */
          grid-auto-rows: auto; /* Let row heights adjust based on image content */
          gap: 8px; /* Space between items */
          max-height: 100%; /* Allow images to display their full height */
        }
    
        /* Ensure images retain their natural height */
        .gallery-item {
          width: 100%;
          height: auto; /* Maintain full image height */
          object-fit: contain; /* Ensure the full image is visible */
        }
    
        /* Order adjustments for mobile */
        .gallery-item:nth-child(3) {
          order: 1; /* Horizontal-4col stays in its own row */
          grid-column: span 2;
          grid-row: span 1;
        }
    
        .gallery-item:nth-child(2) {
          order: 2; /* Two-col-2row next to each other */
          grid-column: span 1;
        }
    
        .gallery-item:nth-child(7) {
          order: 3; /* Two-col-2row next to the second */
          grid-column: span 1;
        }
    
        .gallery-item:nth-child(1) {
          order: 4; /* Vertical-3row below horizontal */
          grid-column: span 2;
        }
    
        .gallery-item:nth-child(4) {
          order: 5; /* Vertical-3row below horizontal */
          grid-column: span 2;
        }
    
        .gallery-item:nth-child(8) {
          order: 6; /* Horizontal-2row below everything */
          grid-column: span 2;
        }
    
        .gallery-item:nth-child(5),
        .gallery-item:nth-child(6) {
          order: 7; /* Horizontal-1row items last */
          grid-column: span 1;
        }
  }