*{
    margin: .3em 0 0 0;
    padding: 0;
    box-sizing: border-box;
    text-align: justify;
}

 p {font-size: .9em;}
    


body {
    font-family: Arial, sans-serif;
    color: #333;
    line-height: 1.4;
    background-color: #fff; 
    font-size: 1em;
}

/* --- Layout Container --- */
#wrapper {
    width: 95%; /* Adjusted for a wider layout based on original */
    max-width: 600px;/* Increased to accommodate the 500px column + large image */
    margin: 0 20px;
    /*margin: -.10px;*/
    padding: 0 20px;
    /*padding: 0px*/
    position: relative;
    /* Use grid for modern layout control, matching original spacing */
    display: grid;
    grid-template-columns: 500px 1fr; /* Fixed left column, flexible right */
    gap: 30px; /* Space between columns */
    
}

       
        /* You can safely combine these two blocks into one in your stylesheet */
#LargeOne {
    display: block;
    height: auto;
    max-width: 550px; 
    /*border: 2px solid #000000; */ /*this one controls border around big one*/
/*    margin-top: -5em;  
    margin-top: -15em; 
    margin-top: -25em;  */
    opacity: 1;
    transition: opacity 0.2s ease-in-out;
}

/* --- Header with Double Line --- */
header {
    grid-column: 1 / -1; /* Header spans full width */
 
}

header h1 {
    font-size: 2em; /* Set a standard size */
    text-transform: none; /* Removed commented out capitalization */
    margin-top:10px;
    margin-bottom: 10px;
    position: relative;
    display: block;
    letter-spacing: .39em; /* Exact spacing from original */
}

/* This creates the double line that extends to the end of the wrapper */
header h1::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -12px; /* Adjusted slightly lower to clear your letter-spacing */
    width: 100%; /* Extends to the end of the container */
    height: 6px; /* Total height of the double line area */
    border-top: 2px solid #000; /* Top line */
    border-bottom: 2px solid #000; /* Bottom line */
}

/* --- Navigation --- */
nav {
    grid-column: 1/-1; /* Nav spans full width */
    margin-top: 10px; /* Space for the double lines */
    margin-bottom: 0px; /* Added spacing below nav */
}

nav .nav {
    list-style: none;
    display: flex; /* Use flexbox for horizontal layout */
    padding-left: 0;
    margin-left: 0;
}

nav .nav li {
    padding: 0 0 0 0; /* Exact padding from original */
    margin: 0px;
}

nav .nav a {
    text-decoration: none;
    color: #000;
}

nav .nav a:hover {
    color: #03F; /* Blue on hover */
}

nav ul {
  display: flex;
  gap: 30px; /* This creates a reliable 10px space between items */
  margin-top: -40px;
}

nav ul {
    display: flex;
    gap: 30px; 
    margin-top: -2em; /* Matches the image's 5px spacing below the double line */
}

/* --- Left Column Content --- */
#leftcolumn {
    /* Grid placement is handled by parent grid definition */
    width: 500px; /* Specific width matching original */
}

#leftcolumn h3 {
    text-align: center;
    margin-bottom: 20px;
    margin-top: -40px;
        margin-top: -30px;

}

#leftcolumn p {
    margin-bottom: 1em; /* Standard paragraph spacing */
}

.first-word {
    font-weight: bold;
}

.ThumbText {
     margin: 0em 0em 1em 0em; /* Exact margins from original */
    text-align: left;
    font-size: .8em;
}

td a {
    font: bold;
    font-size: .8em;
    text-decoration: none;
    color: black !important;
}

/* Alternating Row Colors */
tr:nth-child(even) {
  background-color: #e6f2ff; /* Pale Blue */
}

tr:nth-child(odd) {
  background-color: #fafafa; /* Off-White */
}

/* Mouse Over State: Target the cells (td) to ensure text color change */
tr:hover {
  background-color: #007bff !important; /* Blue background */
}

tr:hover td {
  color: #ffffff !important;           /* Forces text to white */
  text-decoration: none !important;    /* Removes underlines from text */
}

/* If your text contains links (<a> tags), use this as well */
tr:hover td a {
  color: #ffffff !important;
  text-decoration: none !important;
}

/* 1. Target links inside a hovered row */
tr:hover a {
  color: #ffffff !important;
  text-decoration: none !important;
  border-bottom: none !important; /* Some modern themes use borders instead of underlines */
}

/* 2. Target the links in their normal state to remove underlines globally in the table */
table tr td a {
  text-decoration: none;
}

h3 { 
    text-align: center;
}


/* --- Thumbnails Gallery --- */
.thumbnail-gallery {
    display: flex;       /* Aligns thumbnails in a row */
    flex-wrap: wrap;     /* Allows them to wrap cleanly to the next line if needed */
    gap: 10px;           /* Puts a neat, consistent 10px gap between each thumbnail */
    justify-content: flex-start; /* Overrides the global text-align: justify */
    margin-bottom: 20px; /* Gives space before the copyright notice */
}

.thumbnail-item {
    margin: 0;           /* CRITICAL: Strips default HTML figure margins */
    padding: 0;
}

.thumbnail {
    opacity: 0.65;
    transition: opacity .2s ease-in-out;
    cursor: pointer;
    border: 2px solid #000000;/* Removes any default border */
}

.thumbnail:hover {
    opacity: 1; /* Full opacity on hover */
}

#LargeOne {
    display: block;
    height: auto;
    max-width: 550px; 
    /*border: 2px solid #000000;*/ 
    margin-top: -4em;
    
    /* Ensure opacity starts at 1 */
    opacity: 1;
    
    /* 0.5s provides a elegant, noticeable fade */
    transition: opacity 0.2s ease-in-out; 
}

#LargeOne {
    opacity: 1;
    transition: opacity .2s ease-in-out;
    /* Optional: ensures the image doesn't jump if sizes vary */
    display: block; 
}

/* --- Footer --- */
.Copyright {
    margin-top: 10px; /* Increased top margin for separation */
    font-size: 0.8em;
    text-align: center;
    clear: both; /* Ensures it stays below floated elements if any are reintroduced */
    grid-column: 1 / -1; /* Span full grid width */
}

/* --- Responsive Adjustments --- */

/* Tablet View (Screens smaller than 1024px) */
@media screen and (max-width: 1024px) {
    #wrapper {
        grid-template-columns: 1fr; /* Stack columns vertically */
        max-width: 90%;
        gap: 10px;
    }

    /* iPad Fix: Forces text alignment to center over the global justify rule */
    header h1 {
        text-align: center !important;
    }

    #leftcolumn {
        width: 100%; /* Allow left column to fill width */
    }

    .Around {
       /*  margin-top: 2em; Remove the negative margin used for desktop alignment */
        padding-top: 2em;
        text-align: center;
        order: -1; /* Moves the large image above the text for better mobile flow */
    }

    #LargeOne {
        max-width: 100%; /* Ensure image doesn't overflow screen */
        width: auto;
    
        
        /* You can safely combine these two blocks into one in your stylesheet */
#LargeOne {
    display: block;
    height: auto;
    max-width: 550px; 
    /*border: 2px solid #000000;*/ 
    margin-top: 4em; /* Adjusted here */
    opacity: 1;
    transition: opacity 0.2s ease-in-out; 
}
        
        
    
    .Travel p a {
        font-size: .9em;
        line-height: .9em;
        margin-bottom: .1em;
    }
}

/* Phone View (Screens smaller than 768px) */
@media screen and (max-width: 768px) {
    header h1 {
        font-size: 1.2em;
        letter-spacing: 0.1em; /* Reduce spacing so name doesn't wrap awkwardly */
        text-align: center !important;
    }

    nav ul {
        display: flex;         /* Turns the list into a flex container */
        list-style-type: none; /* Removes those default bullet points */
        padding: 0;            /* Removes default browser padding */
        margin-top: 0px;       /* iPad/Mobile spacing fix to prevent header lines overlap */
    }

    nav li {
        margin-right: 15px;    /* Adds some breathing room between links */
    }
    
    p {
        font-size: .9em;
        margin-bottom: .2em;
        text-align: justify;
    }

    .thumbnail-gallery {
        justify-content: center; /* Center thumbnails on small screens */
    }

    #leftcolumn h3 {
        margin-top: 10px;
        
        margin-top: 0px;/* Reset the negative desktop margin */
    }
}