:root {
    background-color: rgb(230, 227, 227);
    }
  
    body, html {
      margin: 0;
      padding: 0;
      overflow-x: hidden; /* Prevent horizontal scrolling */
  
    }
    body {
      -webkit-font-smoothing: auto !important; /* or initial */
    }
  
    .headerContainer {
      background-color: rgb(230, 227, 227);
    }

    /* Signature was off-center on this page*/

    .sigMarg {

      margin-left: 20px !important;
      padding-top: 30px !important;
    }
  
    .mainHeaderRow {
      margin-left: 7% !important;
      width: 80%;
      align-items: center;
      justify-content: center !important;
      /* margin-top: 50px !important; */
      display: flex;
      gap: 1rem;
      text-align: center !important;
      padding-bottom: 50px;
  }
  
  /*.navList {
      list-style: none;
      flex-wrap: wrap;
      display: flex;
      gap: 2rem;
      
  } */
    

  .col a:hover {
    color: grey;
    text-decoration: underline rgb(188, 67, 19) !important; 
  }

  .col-md-4 h5:hover {
    text-decoration: rgb(188, 67, 19) !important; 
  }



    .headerContent {
    text-align: center;
    justify-content: center;
    background-color: rgb(230, 227, 227);
    padding-bottom: 35px;
    }
  
    .headerContent h4 {
      text-align: center;
      /* width: 70%; */
    }
    
    .headerContent h2 {
      font-family: 'Poiret One' !important;
      font-size: 75px;
      font-weight: bold;
      color: rgb(188, 67, 19) !important; 
    }
  
    #titleNote {
      margin-left: 15%;
      margin-right: 15%;
      justify-content: center;
      text-align: center;
      font-size: 20px !important;
    }
    
    /* IMAGE CONTAINER HEADER AND TOP MARGIN */
  
    /* .imageGridWrapper {
      background-color: lightgray;
    } */
  
    .imageContainer {
      padding-top: 10px;

      background-color: rgb(230, 227, 227);
    }
    
    #imageRow1 {
      justify-content: center;
      margin-bottom: 20px;
      width: 100%;
      margin-top: 60px !important;
      display: flex !important;
      flex-wrap: wrap;
      gap: 1rem;
      margin: 0;
      padding: 0;
    }
  
      /* Test horizonatal grid system */
  .imageRowHorizontalScale{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); /* Three equal columns, fluid resizing */
    gap: 10px; /* Space between grid items */
    flex-wrap: nowrap;
    max-width: auto;
    max-height: auto;


  }

    

  .img11x6-3Row {

    display: grid;
        grid-template-columns: repeat(3, 1fr); /* Three equal columns */
        gap: 10px; /* Space between grid items */
        padding-bottom: 10px;

  }


    .imageContainer h1 {
      justify-content: center;
      text-align: center;
    }
    
    /*.imageContainer h1 {
      justify-content: center;
      text-align: center;
    } */
    
    /* EXAMPLE STYLE */
    
    
        .col-md-4 a:hover {
          text-decoration: underline rgb(188, 67, 19) !important; 
        }
    
        .col-md-4 h5:hover {
          text-decoration: rgb(188, 67, 19) !important; 
        }
    
    .imageResize {
      border-style: solid;
      border-color: grey;
      background-color: white;
      padding: 18px;
    }
  
    
    
    /*.imageResize:hover {
      transform: scale(1.75);
      border: none;
      margin-right: 30%;
      margin-left: 30%;
    } */
    
    .img8-5x11Row {
    text-align: center;
    margin-top: 30px;
    }
    
    .img11x8-5Row {
    text-align: center;
    }
    
      /* IMAGE SIZING */
      .img11x8-5 {
       /* margin-top: 50px;
            width: 400px;
            height: 308px; */
            width: 100%;
            overflow: hidden;
            position: relative;
          }
        
          .img8-5x11 {
            /*width: 308px;
            height: 400px;
            margin-top: 3px;*/
            width: 100%;
            overflow: hidden;
            position: relative;
          }
        
          .img11x6-3 {
            /*width: 400px;
            height: 228px;
            /* margin-top: 35px; */
            /* margin-bottom: 35px; */
            width: 100%;
            overflow: hidden;
            position: relative;
          }
        
    .img11x11 {
      width: 400px;
      height: 400px;
      margin-top: 4px;
    }
  
    .pano {
      /*width: 800px;*/
      width: 100%;
      overflow: hidden;
      position: relative;
      padding: 18px;
    }
  
    /*.pano:hover {
      margin-left: -30px !important;
    }*/
  
    .triptic {
      /*width: 800px;
      height: 516px;
      margin-bottom: 20px;*/
      width: 100%;
      overflow: hidden;
      position: relative;
    }
  
    .galleriesBtn {
      padding-top: 40px;
      margin-right: 5px;
      background-color: rgb(230, 227, 227);
      font-family: 'Poiret One' !important;
      text-align: center;
      text-decoration: none !important;
      text-decoration-style: none !important;
      font-size: 35px;
      color: rgb(188, 67, 19) !important;
  
    }
  
    .galleriesBtn a {
      text-decoration: none !important;
      text-decoration-style: none !important;
      font-size: 40px;
      color: black;
      font-weight: 100;
    }
  
    .galleriesBtn a:hover  {
      color: rgb(188, 67, 19) !important;
    }
  
    .footerWrapper {
      background-color: rgb(230, 227, 227);
    }
    
    .footerContainer {
      background-color: rgb(230, 227, 227);
      justify-content: center;
      width: 80%;
      font-size: 20px;
      margin-left: 12.25%;
      padding-top: 45px;
    }
    
    .footerRow {
      justify-content: center;
      
    }
    
    .footerContainer a {
        color: rgb(188, 67, 19) !important;
    }

          /*Scaling for larger screen*/
          .img11x8-5Row{

            display: grid;
            grid-template-columns: repeat(3, 1fr); /* Three equal columns */
            gap: 10px; /* Space between grid items */
            padding-bottom: 10px;
          
        }
    
    @media (max-width: 576px) {
    
       .img11x8-5Row{

        padding: 10px;
       }
      .imageContainer h1 {
        justify-content: center;
      
        padding-right: 15px;
        padding-left: 20px;
        text-align: center !important;
    
        }
    
        .row{
          display: flex;
          flex-direction: column;
        }
        .img8-5x11Row {
          text-align: center !important;
          margin-top: 30px !important;
          margin-right: 10px !important;
          flex-direction:column;  
          
        }
    
        .imgColCell11x8-5
         { 
            width: 100%;
            overflow: hidden;
            position: relative;
           /* padding-bottom: 75%;  Maintain aspect ratio (8.5/11) */
          
          
         }
         .imgColCell11x6-3{
            width: 100%;
            overflow: hidden;
            position: relative
    
         }
        
        
        
        .imgColCell8-5x11 {
          display: flex;
          justify-content: center;
          align-items: center;
        }
        
        .imageRowHorizontalScale{
          display: flex;
          flex-direction: column;
        }
    
        #horizontalRowID{
            display: flex;
            flex-direction: column;
      
        
          }    

        .footerWrapper {
            margin-right: 10px !important;
          }
      

        #backToTop {
            position: fixed; /* Fixed position */
            bottom: 30px;    /* 10px from the bottom */
            right: 30px;     /* 10px from the right */
            z-index: 9999;   /* Make sure it's on top of other content */
            padding: 8px 16px; /* Padding for size */
            background-color: #666; /* Background color */
            color: white; /* Text color */
            border: none; /* No border */
            cursor: pointer; /* Cursor indicates it's clickable */
            border-radius: 5px; /* Rounded corners */
            opacity: 0.3; /* Slightly transparent */
            display: none; /* Hidden by default */
            transition: opacity 0.5s ease; /* Smooth transition for opacity */
        }
      
        #backToTop.visible {
            display: block; /* Show the button */
        }
      
        #backToTop.hidden-opacity {
            opacity: 0.3; /* Slightly transparent */
        }
      
        #backToTop:hover {
            opacity: 1; /* Fully visible when hovered */
        }
      }
    
      
      
        .col-md-4 a {
          font-size: 30px;
          color: grey !important;
          text-decoration: none;
            }
      
            .col a:hover {
              color: grey;
              text-decoration: underline rgb(188, 67, 19) !important; 
            }
      
            .col-md-4 h5:hover {
              text-decoration: rgb(188, 67, 19) !important; 
            }
      
            .col- {
              text-align: center;
            }
      
            .col a {
              text-decoration: none;
              color: gray;
              font-size: 30px;
              font-weight: 500;
            }
        
      
      /*.imageResize:hover {
          transform: scale(1.5);
          border: none;
          margin-right: 20.5%;
          margin-left: 10.5%;
          z-index: 9998
      
      }*/
      
      /*.leftImage:hover {
        border: none;
      
        margin-right: 5% ;
      }
      
      .rightImage:hover {
        margin-left: 5% ;
      }*/
      
      .img8-5x11Row {
        text-align: center;
        margin-top: 30px;
      } 
      
      /* ROW CELL MARGINS - LEFT AND RIGHT */
      
      
          /* IMAGE SIZING */
          .img11x8-5 {
            /* margin-top: 5px; */
                /*width: 400px;
                height: 308px; */
                width: 100%;
                overflow: hidden;
                position: relative;
               /* padding-bottom: 75%;  Maintain aspect ratio (8.5/11) */
              
              }
            
              .img8-5x11 {
                /*width: 308px;
                height: 400px;
                margin-top: 3px; */
                width: 100%;
                overflow: hidden;
                position: relative;
      
              }
            
              .img11x6-3 {
                /*width: 400px;
                height: 228px; */
                width: 100%;
                overflow: hidden;
                position: relative;
            
               /* margin-top: 15px;
                margin-bottom: 25px; */
              }
            
      .img11x11 {
          width: 400px;
          height: 400px;
          margin-top: 4px;
        }
      
      
        .projectStatementWrapper {
          background-color: rgb(230, 227, 227);
        }
        
        .projectStatement {
          margin-left: 15% !important;
          margin-right: 15% !important;
          padding-top: 65px !important;
          background-color: rgb(230, 227, 227);
        }
        
        .projectStatement h2 {
          text-align: center;
          font-family: 'Poiret One', cursive;
          font-weight: bold;
          font-size: 45px !important;
        }
        
        .projectStatement h3 {
          text-align: center;
        }
        
        .projectStatement p {
          margin-top: 10px !important;
        }
      
        
        .stateRow p {
          text-indent: 40px;
        }
      
        .galleriesBtn {
          padding-top: 40px;
          background-color: rgb(230, 227, 227);
          font-family: 'Poiret One' !important;
          text-align: center;
          text-decoration: none !important;
          text-decoration-style: none !important;
          font-size: 35px;
          color: rgb(188, 67, 19) !important;
      
        }
      
        .galleriesBtn a {
          text-decoration: none !important;
          text-decoration-style: none !important;
          font-size: 40px;
          color: black;
          font-weight: 100;
        }
      
        .galleriesBtn a:hover  {
          color: rgb(188, 67, 19) !important;
        }
      
        .footerWrapper {
          background-color: rgb(230, 227, 227);
        }
      
      .footerContainer {
        background-color: rgb(230, 227, 227);
          justify-content: center;
          width: 80%;
          font-size: 20px;
          margin-left: 12.25%;
          padding-top: 35px;
      }
      
      .footerRow {
          justify-content: center;
          
      }
       
        .footerContainer a {
            color: rgb(188, 67, 19) !important;
        }
      
      
      
            /*Scaling for larger screen*/
            .img11x8-5Row{
      
              display: grid;
              grid-template-columns: repeat(3, 1fr); /* Three equal columns */
              gap: 10px; /* Space between grid items */
              padding-bottom: 10px;
            
          }