body {
    font-family: "Inter", sans-serif;
    font-weight: 300;
    font-style: normal;
    background-color: black;
    color: white;
    animation: slideUp 0.7s ease forwards;
}

/*@keyframes slideUp {
    from {
        transform: translateY(80%);
    }

    to {
        transform: translateY(0);
    }
}

body.page-exit {
    transform: translateX(-100%);
    transition: transform 0.6s ease;
}

*/

section {
    height: 100vh;
    scroll-snap-align: start;
}

h1, h2, h3 {
    font-family: "Instrument Serif", serif;
}

h1 {
    font-weight: normal;
    text-align: center;
}

html, body {
  margin: 0;
  padding: 0;
}

body {
  min-height: 100vh;
  margin: 0;
  display: flex;
  flex-direction: column;
}

main {
  /* Tell the main content area to grow and take up all remaining space */
  flex-grow: 1; 
}

/* HEADER */
.site-header {
    width:100%;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:20px 50px;
    box-sizing:border-box;
    padding-left:30px;
    padding-right:80px;
    margin-bottom: 20px;
    position: relative;
}

.headerLogo img {
    width:60px;
    height:auto;
}

.headerNav {
    display:flex;
    gap:50px;
    align-items:center;
}

.headerNav a {
    color:white;
    text-decoration:none;
    font-size:16px;
}

.nav-link {
  text-decoration: none;         
  font-weight: 500;             
}

.nav-link {
  text-decoration: none;
  color: #fff;
  position: relative;       
  padding-bottom: 4px;      
}

.nav-link::after {
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);      
  height: 2px;               
  bottom: 0;
  left: 0;
  background-color: #fff;
  transform-origin: bottom right;
  transition: transform 0.3s ease-out; 
}

.nav-link:hover::after {
  transform: scaleX(1);      
  transform-origin: bottom left;
}

@media (max-width:500px) {
    .site-header {
        padding:20px;
        flex-direction:row;
        align-items:center;
        justify-content: space-between;
    }

    .headerLogo img {
        width:45px;
    }

    .headerNav {
        gap:20px;
        margin-left: auto;
        display: flex;  
    }

    .headerNav a {
        font-size:15px;
        padding: 0;
        margin: 0;
    }
}

/* HOME */
.bubble-container {
    position: relative;
    width: min(100vw, 500px);
    margin: 0 auto;
    margin-top: 90px;
    transform: translateY(-50px);
}

.homeBubble {
    width: 100%;
    display: block;
    z-index: 5;
}

.bubble-link {
    position: relative;
    z-index: 10;
    display: block;
}

.sector {
    position: absolute;
    inset: 0;
    z-index: 20;
}

.top {
    clip-path: polygon(
        50% 50%,
        20% 0%,
        80% 0%
    );
}

.right {
    clip-path: polygon(
        50% 50%,
        100% 20%,
        100% 80%
    );
}

.bottom {
    clip-path: polygon(
        50% 50%,
        80% 100%,
        20% 100%
    );
}

.left {
    clip-path: polygon(
        50% 50%,
        0% 80%,
        0% 20%
    );
}

.text {
    opacity: 0;
    overflow: hidden;
    transition: 0.6s ease-in-out;
    position:absolute;
    z-index: 3;

}

.top-text{
    top: -10%;
    left:50%;
     font-size: 30px;
    transform:translateX(-50%);
     font-family: "Instrument Serif", serif;
}

.right-textB{
    right:-50%;
    top:50%;
     font-size: 30px;
      font-family: "Instrument Serif", serif;
    transform:translateY(-50%);
}

.bottom-text{
    top: 100%;
    left:51%;
    font-size: 30px;
    font-family: "Instrument Serif", serif;
    transform:translateX(-50%);
   white-space: nowrap;
}

.left-textB{
    left:-52%;
    top:50%;
    font-size: 30px;
    transform:translateY(-50%);
    font-family: "Instrument Serif", serif;
}

.gif {
   position: absolute;
    width: 200px;
    height: 200px;
    left: -49%;
    top: 30%;
    opacity: 0;
    transition: 0.8s ease-in-out;
}

.top:hover ~ .top-text{
    opacity:1;
}

.right:hover ~ .right-textB{
    opacity:1;
}

.bottom:hover ~ .bottom-text{
    opacity:1;
}

.left:hover ~ .left-textB {
    opacity:1;
}

.left:hover ~ .gif {
    opacity:0.8;
}

.cursor-text {
    position: fixed;
    color: white;
    font-size: 14px;
    z-index: 999999;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.cursor-text.show {
    display: block;
    opacity:1;
}

.homeBubble:hover ~ .cursor-text {
    opacity: 1;
}

@media (max-width: 500px) {
    .bubble-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        transform: translateY(-100px);
    }
    
    .homeBubble:hover .text,
    .sector:hover + .text {
        opacity: 1;
    }

    .text {
        position: static;      
        opacity: 0;            
        transform: none;
        margin-top: 10px;
        text-align: center;
        overflow: hidden;
        white-space: nowrap;
        animation: typing 2s steps(20, end) forwards;
}
    
    .top-text {
    margin-top: 20px;
    animation-delay: 0.5s;
}

    .right-textB {
    margin-top: 20px;
    animation-delay: 2s;
}

   .bottom-text {
    margin-top: 20px;
    animation-delay: 3.5s;
}

   .left-textB {
    margin-top: 20px;
    animation-delay: 5s;
    position: relqtive;
    z-index: 1;
   }

 .gif {
        display: block;

        position: absolute;
        width: 250px;
        height: 250px;
        object-fit: cover;

        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);

        z-index: -1;
    }
}

@keyframes typing {
    from {
        width: 0;
        opacity: 1;
    }

    to {
        width: 100%;
        opacity: 1;
    }
}

/* PROJECTS */
.projects-gallery {
    width: 90%;
    max-width: 1200px;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(10, 80px);
    position: relative;
}

.photoP {
    width: 100%;
    height: auto;
    object-fit: contain;
}

.photoP1 {
    grid-column: 1 / 3;
    grid-row: 1 / 4;
    opacity: 0.5;
}

.photoP2 {
    grid-column: 9 / 12;
    grid-row: 1 / 3;
}

.photoP3 {
    grid-column: 4 / 7;
    grid-row: 2 / 7;
}

.photoP4 {
    grid-column: 10 / 13;
    grid-row: 6 / 9;
}

.photoP5 {
    grid-column: 2 / 6;
    grid-row: 6 / 9;
}

.photoP6 {
    grid-column: 6 / 9;
    grid-row: 8 / 10;
    opacity: 0.5;
}

.photoP7 {
    grid-column: 8 / 10;
    grid-row: 4 / 6;
    opacity: 0.5;
}

.projects-heading {
    grid-column: 5 / 9;
    grid-row: 3 / 6;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
    z-index:5;
}

.countryName {
    position: absolute;
    bottom: 100%;
    left: 0;
    margin-bottom: 0.15em;
    color: #fff;
    font-size: 1.25rem;
    white-space: nowrap;
}

.photo-link {
    display: block;
    position: relative;
}

.photo-link img {
    display: block;
    transition: transform 0.4s ease, filter 0.4s ease;
    transform-origin: center center;
}

.photo-link:hover img {
    transform: scale(1.03);
    filter: drop-shadow(0 0 10px rgba(255,255,255,0.35));
    position: relative;
    z-index: 10;
}

.photoP1 {
    transform: translate(-20px, 20px);
}

.photoP2 {
    transform: translate(20px, -30px);
}

.photoP3 {
    transform: translate(-10px, 10px);
}

.photoP4 {
    transform: translate(30px, 0px);
}

.photoP5 {
    transform: translate(-20px, -20px);
}

.photoP6 {
    transform: translate(20px, 30px);
}

.photoP7 {
    transform: translate(0px, -20px);
}

@media (max-width: 500px) {
  .projects-gallery {
        grid-template-columns: repeat(13, 1fr); /* same layout */
       grid-template-rows: repeat(12, 50px);
        gap: 4px;                               /* smaller spacing */
        width: 95%;
    }

    .photoP {
        width: 100%;
        height: auto;
    }
    
    .photoP1 {
    grid-column: 1 / 5;
    grid-row: 1 / 4;
    opacity: 0.6;
}

.photoP2 {
    grid-column: 8 / 13;
    grid-row: 1 / 3;
}

.photoP3 {
    grid-column: 6 / 10;
    grid-row: 3 / 7;
}

.photoP4 {
    grid-column: 8 / 13;
    grid-row: 8 / 11;
}

.photoP5 {
    grid-column: 1 / 7;
    grid-row: 6 / 10;
}

.photoP6 {
    grid-column: 2 / 7;
    grid-row: 8 / 10;
    opacity: 0.6;
}

.photoP7 {
    grid-column: 10 / 14;
    grid-row: 4 / 11;
    opacity: 0.6;
}

    .projects-heading h1 {
        font-size: clamp(1.8rem, 6vw, 3rem);
    }
}

@media (max-width:800px) {
    header {
        padding:30px 0;
    }

    nav {
        gap:15px;
    }

    .projects {
        gap:30px;
    }
    
    .projects-gallery h1 {
      font-size:60px;
}
}

@media (max-width:500px) {
header {
    flex-direction: column;
    gap:20px;
    text-align:center;
}


.logo img {
    width:45px;
}


nav {
    gap:20px;
}
}

.projects-gallery h1 {
  font-size:55px;
}

.countryName {
    font-size: 10px;
}
 
/* MALAYSIA */
.malaysia {
  margin-top:0px;
  padding-top: 0px;
}

.malaysiaHeading {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    font-size: 60px;
}

.malaysia-text {
  text-align: center;
  padding: 2vw;
}

.malaysiaTimeline{
    width:100%;
    margin-top: 0px;
}

.entry{
    display:grid;
    grid-template-columns: 1fr auto 1fr;
    align-items:center;
    column-gap:80px;
    margin:0;
    padding:0;
}

.left-text{
    word-spacing: 100px;
    justify-self: center;
    text-align: left;
    opacity:.35;
    transition:opacity .3s ease-in-out;
}

.right-text{
    word-spacing: 100px;
    justify-self: center;
    text-align: left;
    opacity:.35;
    transition:opacity .3s ease-in-out;
}

.malaysiaPhoto{
    display:block;
    width:auto;
    height:auto;
    max-width:400px;
    max-height:600px;
    margin:0;
    padding:0;
    transition: transform 0.3s ease-in-out,
    box-shadow 0.3s ease-in-out;
    z-index: 1;
}

.gallery-img {
    display:block;
    width:auto;
    height:auto;
    max-width:400px;
    max-height:600px;
    margin:0;
    padding:0;
}

.entry:hover .left-text,
.entry:hover .right-text{
    opacity:1;
}

.malaysiaPhoto:hover {
    transform: scale(1.03);
    box-shadow: 0 0 15px rgba(255,255,255,0.3), 0 0 40px rgba(255,255,255,0.3);
    z-index: 10;
}

.lightbox{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.95);
    justify-content:center;
    align-items:center;
    z-index:9999;
}

.lightbox.active{
    display:flex;
}

#lightbox-img{
    max-width:90vw;
    max-height:90vh;
    object-fit:contain;
}

.close {
    position: absolute;
    top: 20px;
    right: 30px;
    background: transparent;
    border: none;
    outline: none;
    padding: 0;
    color: white;
    font-size: 40px;
    cursor: pointer;
}

.prev,
.next{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    background:none;
    border:none;
    color:white;
    font-size:40px;
    cursor:pointer;
}

.prev{
    left:40px;
}

.next{
    right:40px;
}

@media (max-width:500px) {
    .malaysia {
        margin-top:0;
        padding-top:0;
    }

    .malaysia h1 {
        margin-top:0;
        margin-bottom:20px;
    }

    .entry {
        display:flex;
        flex-direction:column;
        align-items:center;
        column-gap:0;
        row-gap:0px;
        margin-bottom:10px;
    }
    
    .left-text,
    .right-text {
        justify-self:center;
        text-align:center;
        word-spacing:20px;
        font-size:16px;
        opacity: 1;
    }

    .malaysiaPhoto,
    .gallery-img {
        width:auto;
        height:auto;
        max-width:90vw;
        max-height:500px;
        margin:0 auto;
    }

    .malaysiaPhoto:hover {
        transform:scale(1.02);
        box-shadow:
        0 0 10px rgba(255,255,255,0.3),
        0 0 25px rgba(255,255,255,0.2);
    }

    .malaysiaTimeline {
        width:100%;
    }
    
     .prev {
        left:5px;
        font-size: 30px;
    }

    .next {
        right:5px;
        font-size: 30px;
    }

    .malaysiaHeading {
        position: absolute;
        top: 40%;
        left: 50%;
        font-size: 40px;
        transform: translateX(-50%);
        width: 100%;
        text-align: center;
        margin-top: 30px;
    }
}

/* AUSTRALIA */
.australia {
  margin-top:0px;
  padding-top: 0px;
}

.australiaHeading {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    font-size: 60px;
}

.australia-text {
  text-align: center;
  padding: 2vw;
}

.australiaTimeline{
    width:100%;
    margin-top: 0px;
}

.australiaPhoto{
    display:block;
    width:auto;
    height:auto;
    max-width:400px;
    max-height:600px;
    margin:0;
    padding:0;
    transition: 
    transform 0.3s ease-in-out,
    box-shadow 0.3s ease-in-out;
    z-index: 1;
}

.australiaPhoto:hover {
    transform: scale(1.03);
    box-shadow: 0 0 15px rgba(255,255,255,0.3), 0 0 40px rgba(255,255,255,0.3);
    z-index: 10;
}

@media (max-width:500px) {
    .australia {
        margin-top:0;
        padding-top:0;
    }

    .australia h1 {
        margin-top:0;
        margin-bottom:20px;
    }

    .australiaPhoto,
    .gallery-img {
        width:auto;
        height:auto;
        max-width:90vw;
        max-height:500px;
        margin:0 auto;
    }

    .australiaPhoto:hover {
        transform:scale(1.02);
        box-shadow:
        0 0 10px rgba(255,255,255,0.3),
        0 0 25px rgba(255,255,255,0.2);
    }
    
     .australiaTimeline {
        width:100%;
    }

    .australiaHeading {
        position: absolute;
        top: 40%;
        left: 50%;
        font-size: 40px;
        transform: translateX(-50%);
        width: 100%;
        text-align: center;
        margin-top: 30px;
    }
}


/* THAILAND */
.thailand {
  margin-top:0px;
  padding-top: 0px;
}

.thailandHeading {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    font-size: 60px;
}

.thailand-text {
  text-align: center;
  padding: 2vw;
}

.thailandTimeline{
    width:100%;
    margin-top: 0px;
}

.thailandPhoto{
    display:block;
    width:auto;
    height:auto;
    max-width:400px;
    max-height:600px;
    margin:0;
    padding:0;
    transition: 
    transform 0.3s ease-in-out,
    box-shadow 0.3s ease-in-out;
    z-index: 1;
}

.thailandPhoto:hover {
    transform: scale(1.03);
    box-shadow: 0 0 15px rgba(255,255,255,0.3), 0 0 40px rgba(255,255,255,0.3);
    z-index: 10;
}

@media (max-width:500px) {
    .thailand {
        margin-top:0;
        padding-top:0;
    }

    .thailans h1 {
        margin-top:0;
        margin-bottom:20px;
    }

    .thailandPhoto,
    .gallery-img {
        width:auto;
        height:auto;
        max-width:90vw;
        max-height:500px;
        margin:0 auto;
    }

    .thailandPhoto:hover {
        transform:scale(1.02);
        box-shadow:
        0 0 10px rgba(255,255,255,0.3),
        0 0 25px rgba(255,255,255,0.2);
    }
    
     .thailandTimeline {
        width:100%;
    }
    
    .thailandHeading {
        position: absolute;
        top: 40%;
        left: 50%;
        font-size: 40px;
        transform: translateX(-50%);
        width: 100%;
        text-align: center;
        margin-top: 30px;
    }
}

/* JAPAN */
.japan {
  margin-top:0px;
  padding-top: 0px;
}

.japanHeading {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    font-size: 60px;
}

.japan-text {
  text-align: center;
  padding: 2vw;
}
  
.japanTimeline{
    width:100%;
    margin-top: 0px;
}

.japanPhoto{
    display:block;
    width:auto;
    height:auto;
    max-width:400px;
    max-height:600px;
    margin:0;
    padding:0;
    transition: 
    transform 0.3s ease-in-out,
    box-shadow 0.3s ease-in-out;
    z-index: 1;
}

.japanPhoto:hover {
    transform: scale(1.03);
    box-shadow: 0 0 15px rgba(255,255,255,0.3), 0 0 40px rgba(255,255,255,0.3);
    z-index: 10;
}

@media (max-width:500px) {
    .japan {
        margin-top:0;
        padding-top:0;
    }

    .japan h1 {
        margin-top:0;
        margin-bottom:20px;
    }

    .japanPhoto,
    .gallery-img {
        width:auto;
        height:auto;
        max-width:90vw;
        max-height:500px;
        margin:0 auto;
    }

    .japanPhoto:hover {
        transform:scale(1.02);
        box-shadow:
        0 0 10px rgba(255,255,255,0.3),
        0 0 25px rgba(255,255,255,0.2);
    }
    
     .japanTimeline {
        width:100%;
    }

    .japanHeading {
        position: absolute;
        top: 40%;
        left: 50%;
        font-size: 40px;
        transform: translateX(-50%);
        width: 100%;
        text-align: center;
        margin-top: 30px;
    }
}

/* ABOUT */
.about {
    display: grid;
    grid-template-columns: 1fr 1fr; 
    gap: 40px;
    width: 100%;
    min-height: 100vh;
    align-items: center;
    transform: translateY(-80px);
}

.left-column {
    padding: 60px;
    display: flex;
    flex-direction: column; 
    gap: 30px;
    margin-left: 30px;
    width: 100%;
    align-items: flex-start; 
    padding-right: 5vw; 
}

.left-column a {
    position: relative;
    color: white;
    text-decoration: none;
    width: fit-content;
    font-size: 20px;
    font-family: "Inter", sans-serif;
    font-weight: 300;
    font-style: normal;
}

.left-column a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0px;
    width: 0%;
    height: 2px;
    background: white;
    transition: width 0.3s ease;
    transform-origin: bottom right;
    transform: scaleX(0);    
}

.left-column a:hover::after {
    width: 100%;
    transform: scaleX(1);    
}

.left-column img {
    width: 100%;
    max-width: 300px;
    height: auto;
}

.right-column {
    display: flex;
    flex-direction: column; 
    gap: 40px;
    width: 100%;
    max-width: 500px;
    align-items: flex-start; 
    padding-left: 5vw; 
}

.right-column p {
  margin-top: 0px;
}

.right-column h1{
  margin-bottom: 10px;
  margin-top: 0px;
  font-size: 50px;
}

.about-page {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

@media (max-width: 500px) {

    .about {
        display: flex;
        flex-direction: column;
        gap: 30px;
        padding-top: 50px;
        padding-left: 5vw;
        padding-right: 5vw;
        box-sizing: border-box;
    }

    .left-column,
    .right-column {
        display: contents;
    }

    .aboutHeading {
        order: 1;
    }

    .aboutText1,
    .aboutText2,
    .aboutText3,
    .aboutText4 {
        order: 2;
    }
    
    .left-column img {
        order: 3;
    }

    .linkedIn,
    .instagram,
    .email {
        order: 4;
    }
    
    .right-column p {
        margin: 0px;
    }
}