body {
           max-width: 1500px;
           margin: 0 auto;

        }

        a {
            text-decoration: none;
        }

        .header {
            width: 80%;
            display: flex; /* Makes the header a row */
            flex-wrap: wrap; 
            margin: 0 auto;
            justify-content: space-between; /* Aligns logo to left and menu to right */
            align-items: center; /* Aligns content vertically within the header */
            padding: 20px 20px; /* Optional padding for the header */
        }

        .logo {
            font-family: "epicursive", cursive;
            font-size: 24px;
            font-size: 60pt;
            font-weight:400;
            color: #333;
        }
        .menu {
            display: flex;
            gap: 10px;
        }
        .menu a {
            color: #333; /* Dark text color */
            font-family: 'Raleway', sans-serif;
            text-decoration: none;
            padding: 0px 20px;
        }
        .menu a:hover {
            color: dimgrey; /* dark grey hover effect */
        }
        .hamburger {
            display: none;
            flex-direction: column;
            cursor: pointer;
        }
        .hamburger div {
            width: 25px;
            height: 3px;
            background-color: #333; /* Dark color for hamburger lines */
            margin: 4px 0;
        }

        .bannertop {
          display: flex;
          width: 60%;
          flex-wrap: wrap; 
          margin: auto;
          align-items: center;
          padding: 52px;
        }

        .bannertopimg {
          width: 58%;
        }

        .bannertopimg img {
          width: 400px ;
          /*float: right;*/
        }


        .line1  {
          font-family: 'Lato', sans-serif;
          font-weight: bo2240px; /* Adjust caption size if needed */
          text-transform: uppercase; /* Optional: make caption text uppercase */
          line-height: 0.2;
        }

        .line2  {
          font-family: "epicursive"; 
          color: #9f7452;
          font-size: 21pt;
          line-height: 0.2;
        }

        .quote p{
            line-height: 0.8;
        }

       .image-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
            gap: 50px;
            width: 80%;
            margin: 20px auto;
        }
        .image-grid .square {
            position: relative;
            height: 330px;
            background-size: cover;
            filter: grayscale(100%);
            transition: filter 0.3s;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .image-grid .square:hover {
            filter: grayscale(0%);
        }

        .image-grid .square .title {
            font-family: "epicursive", cursive;
            color: white;
            font-size: 63px;
            transition: transform 0.5s;
            text-decoration: none;
        }


        .image-grid .square:hover .title {
            transform: scale(1.1);
            text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
        }

        

        .icon-container {
            text-align: center; /* Center the icon */
            margin: 50px; /* Add spacing above the icon */
        }


        .square1 { background-image: url('img/kepler.png'); }
        .square3 { background-image: url('img/raro.png'); }
        .square4 { background-image: url('img/routeburne.png'); }
        .square6 { background-image: url('img/shangerila.png'); }
        .square8 { background-image: url('img/santorini.png'); }
        .square9 { background-image: url('img/prague.png'); }

        .photo1 { background-image: url('img/shanghai.jpg'); }
        .photo2 { background-image: url('img/night.jpg'); }
        .photo3 { background-image: url('img/yunnan.jpg'); }
        .photo4 { background-image: url('img/jakata.jpg'); }
        .photo5 { background-image: url('img/auckland.jpg'); }
        .photo6 { background-image: url('img/aropolis.jpg'); }

        .footer {
            position: absolute;
            left: 0;
            right: 0;
            height: 180px;
            background-color: #232428;
            margin: 180px auto 0;
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
            color: #acb197;
            font-family: 'Raleway', sans-serif;
            font-size: 11pt;
            flex-direction: column;
            padding: 15px;
            line-height: 1.2; 
        }

        hr {
            width: 30%;
            border: none;
            border-top: 1px solid #b89266; /* Color and thickness */
            margin: 100px auto 0; /* Center the line and add spacing */
        }

        .footer p {
            margin: 5px 0; /* Adjust margin for smaller gap */
        }

/* World Page */
        .underline {
            position: relative;
        }

        .underline::after {
            content: '';
            position: absolute;
            left: 19px;
            bottom: -2px; /* Adjust this value to move the underline closer or further from the text */
            width: 57%;
            height: 1px; /* Thin underline */
            background-color: #333; /* Color of the underline */
        }

        .worldmap {
            position: absolute;
            left: 0;
            right: 0;
            background-color: #232428;
            background-image: url('img/map.gif');
            background-size: contain; /* Ensure the whole image is visible */
            background-repeat: no-repeat;
            background-position: center;
            height: 470px;
            width: 100%;
        }

       .wimage-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
            gap: 50px;
            width: 80%;
            margin: 570px auto 0 auto;
        }
        .wimage-grid .square {
            position: relative;
            height: 330px;
            background-size: cover;
            filter: grayscale(100%);
            transition: filter 0.3s;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .wimage-grid .square:hover {
            filter: grayscale(0%);
        }

        .wimage-grid .square .title {
            font-family: "epicursive", cursive;
            color: white;
            font-size: 63px;
            transition: transform 0.5s;
            text-decoration: none;
        }


        .wimage-grid .square:hover .title {
            transform: scale(1.1);
            text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
        }

        .world1 { background-image: url('img/tokyo.jpg'); }
        .world11 { background-image: url('img/shangerila.png'); }
        .world2 { background-image: url('img/raro.png'); }
        .world3 { background-image: url('img/abu.jpg'); }
        .world4 { background-image: url('img/paris.jpg'); }
        .world5 { background-image: url('img/zermatt.png'); }
        .world6 { background-image: url('img/vienna.jpg'); }
        .world7 { background-image: url('img/athens.jpg'); }
        .world8 { background-image: url('img/santorini.png'); }
        .world9 { background-image: url('img/manatua.jpg'); }
        .world10 { background-image: url('img/luang.jpg'); }
        .world12 { background-image: url('img/xian.jpg'); }

/* NZ Page */
        .underlinenz {
             position: relative;
        }

        .underlinenz::after {
            content: '';
            position: absolute;
            left: 19px;
            bottom: -2px; /* Adjust this value to move the underline closer or further from the text */
            width: 73%;
            height: 1px; /* Thin underline */
            background-color: #333; /* Color of the underline */
        }

        .nzmap {
            width: 464px;
            height: 800px;
            background-color: #232428; 
            margin-top: 20px;
            background-image: url('img/nz.gif');  
            background-position: 20px 20px; 
            background-repeat: no-repeat;
        }

        .nzcontainer{
            display: flex;
            width: 100%;       
        }

        .nzgrid{
            margin-left: 30px;
        }

        .nz1 { background-image: url('img/hooker.jpg'); }
        .nz2 { background-image: url('img/omanawanui.jpg'); }
        .nz3 { background-image: url('img/mclaren.jpg'); }
        .nz4 { background-image: url('img/tarawera.jpg'); }
        .nz5 { background-image: url('img/taranaki.jpg'); }
        .nz6 { background-image: url('img/spirit1.jpg'); }
        .nz7 { background-image: url('img/routeburne.png'); }
        .nz8 { background-image: url('img/douful.png'); }
        .nz9 { background-image: url('img/kepler.png'); }
        .nz10 { background-image: url('img/mercy.jpg'); }
        .nz11 { background-image: url('img/muriwai.jpg'); }
        .nz12 { background-image: url('img/dunedin.jpg'); }
       

/* Travelog */
        .trvlog {
            
        max-width: 1200px; /* Optional for large screens */
        width: 90%; /* More flexible */
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        align-items: center;

        }

        .logtitle {
            font-family: 'Helvetica', sans-serif;
            font-weight: bold;
            font-size: 42px; /* Adjust the size as needed */
            padding-top: 50px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .centered-image {
            max-width: 100%;
            height: auto;
            display: block;
            margin-top: 50px; /* Add 50px margin to the top */
            /*width: 600px;  Set the image width to 600px */
            max-height: 900px; /* Set the maximum height to 900px */
            display: block;
            margin-left: auto;
            margin-right: auto;
        }

        .intro-text {
            font-family: 'Helvetica', sans-serif;
            font-size: 16px; /* Small font size */
            text-align: center;
            color: #484848;
            margin-top: 20px; /* Adjust the spacing as needed */
            width: 800px; 
            margin-left: auto;
            margin-right: auto;
        }  

        p{
            font-family: 'Helvetica', sans-serif;
            font-size: 16px; /* Comfortable reading size */
            line-height: 1.8; /* Good line spacing for readability */
            margin: 20px 0; /* Space between paragraphs */
            text-align: justify; /* Justify text for a clean look */
        } 


        .Tquote-wrap{
          position: relative;         /* anchor for the absolute quote */
          padding-left: 80px;         /* space so text doesn't overlap the big “ */
        }
         

        .Tquote {    
            position: absolute;
            left: 0;
            top: -56px;                 /* tweak vertical alignment */
            font-size: 100px;
        } 


        .credit {
          text-align: right;      /* Align to the right */
          color: #888888;         /* Grey color */
          font-size: 13px;        /* Font size 12px */
          margin-top: 10px;       /* Optional spacing */
        }
          



        .logimg {
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
            margin-top: 20px; /* Adjust the spacing as needed */
        }

        .trimage{

          display: flex;
          gap: 22px;               /* Modern spacing between images */
          align-items: flex-start; /* Align the top edges */
          justify-content: space-between;
          flex-wrap: wrap;         /* Wrap on small screens */
          margin-top: 20px;
        }


        .trimage img {
          height: 512px;           /* Set a consistent portrait height */
          width: auto;             /* Keep aspect ratio */
          object-fit: contain;     /* Ensure no cropping */
          display: block;
        }


        .left-image, .right-image {
            width: calc(50% - 10px); /* Each image takes up half the width minus half the space between */
            height: auto; /* Maintain the aspect ratio */
            object-fit: contain;
        }

        .images4 {
            margin-top: 50px;
            height: 900px;
            display: grid;
            grid-template-columns: 1fr 1fr;
            grid-template-rows: 1fr 1fr;
            gap: 10px;
        }
        .images4 div {
            display: flex;
            overflow: hidden;
        }

        .logtopleft {
            justify-content: flex-end;
        }

        .logtopright {
            display: flex;
            justify-content: center;
            align-items: flex-end;
            overflow: hidden;
        }

        .logbottomleft {
            display: flex;
            justify-content: center;
            align-items: flex-start;
            overflow: hidden;
        }

        .logtopright img,
        .logbottomleft img {
            width: 100%;
            height: auto;
            object-fit: contain;
        }

        .back-button {
            font-size: 14px; /* Make the text bigger */
            color: #484848; /* Text color */
            border: 1.5px solid #484848; /* Outline color */
            text-transform: uppercase; /* Text in caption */
            padding: 10px 40px; /* Add some padding */
            background-color: transparent; /* Transparent background */
            cursor: pointer; /* Pointer cursor on hover */
            float: right; /* Align to right */
            margin-top: 50px;
            margin-right: 30px;
            border-radius: 50px; 
        }

        .trvlog a:link {
            color: black;
        }

        .trvlog a:hover {
            color: dimgrey;
        }

        .trvlog a:visited {
            color: #9f7452;
        }


        }

@media (min-width: 768px) and (max-width: 1424px) {
  .trimage {
    flex-wrap: nowrap; /* keep them on one line on iPad */
  }

  .trimage img {
    /* Three equal columns, accounting for two gaps (22px * 2) */
    flex: 0 0 calc((100% - 44px) / 3);
    width: calc((100% - 44px) / 3); /* explicit width to prevent flex quirks */
    max-height: 420px;              /* optional cap for consistent look */
  }
}


@media (max-width: 768px) {
            .menu {
                display: none;
                flex-direction: column;
                width: 100%;
            }
            .menu a {
                padding: 10px;
                border-top: 1px solid #ddd; 
            }

            .underlinenz::after{
                display: none;
            }

            .hamburger {
                display: flex;
            }

            .bannertop {
            width: 100%;
            }

            .nzcontainer {
            flex-direction: column;
            }

            .nzmap{
                 width: 100%;
                 margin: 10px 0; 
            }

            .trvlog {
                width: 100%;
                padding: 0 10px; /* Add padding to the sides for better readability */
            }

               
            .logtitle {
                font-size: 32px; /* Adjust the size for mobile */
                padding-top: 30px;
            }

            .centered-image, .intro-text {
                width: 100%; /* Make the image and text take full width */
            }

            .logimg {
                flex-direction: column; /* Stack images vertically */
                align-items: center; /* Center images horizontally */
            }

            .left-image, .right-image {
                width: 100%; /* Make each image take full width */
                margin-bottom: 20px; /* Add space between images */
            }



/*            p {
                font-size: 14px; /* Adjust font size for mobile */
                padding: 0 10px; /* Add padding to the sides for better readability */
            }*/

        }