:root {
        --blue-light: #011845;
        --green: #06B458;
        --digital: #003AAA;
        --overlay-bg: rgba(0,0,0,0.4);
      }

      *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

      html, body {
        font-family: Arial, Helvetica, sans-serif;
        background: var(--blue-light);
        overflow: hidden;
	font-size:1rem;
      }

      /* --- HEADER --- */
      .header {
        width: 100%; height: 10vh; min-height: 200px; background: rgba(6,23,66,0.85);
        backdrop-filter: blur(1vh); display: flex; flex-direction: column;
        justify-content: center; padding: 5vh 10vw 3vh; position: fixed;
        top:0; left:0; z-index:100; border-bottom:1px solid rgba(255,255,255,0.1);
      }
      .header .top-row { display:flex; justify-content:space-between; align-items:center; margin-bottom:1vh; }
      .header .logo img { width:25vw; }
      .header-qr { display:flex; align-items:center; gap:1vw; font-size:0.9rem; color:white; opacity:0.9; }
      .header-qr img { width:10vw; height:10vw; border-radius:1vw; background:white; padding:0.5vw; transition: transform 0.3s ease; }

      /* --- FOOTER --- */
      .footer {
        width:100%; height:10vh; min-height: 200px; background: rgba(6,23,66,0.85); 
        backdrop-filter: blur(1vh); display:flex; justify-content:center; align-items:center;
        gap:3vw; padding:0.5rem 2rem; position:fixed; bottom:0; left:0; z-index:99; border-top:1px solid rgba(255,255,255,0.1);
      }
      .footer-logo { display:flex; flex-direction:column; align-items:center; color:white; text-align:center; }
      .footer-logo p { font-size:0.7rem; opacity:0.7; margin-bottom:0.3rem; }
      .footer-logo img { width:20vw; height:auto; opacity:0.9; transition: transform 0.3s, opacity 0.3s; }
      #fullscreenBtn {position: absolute; bottom: 10px; right: 10px; width: 40px; height: 40px; background: transparent; border: none; cursor: pointer; opacity: 0; z-index: 1000;}
      #fullscreenBtn:focus { outline: none;}
      .footer .footer-logo img[alt="Deloitte"] {max-width:18vw; width: auto;}

      /* --- GALLERY --- */
      .gallery { display:flex; justify-content:center; align-items:center; gap:5vw; height:100vh; margin-top:10vh; }
      .col { display:flex; flex-direction:column; gap:5vw; }
      .image { width:20vw; aspect-ratio:9/13; display:flex; flex-direction:column; border-radius:10px; overflow:hidden; background:var(--blue-light); box-shadow:0 0.5vh 1.5vh rgba(0,0,0,0.3); cursor:pointer; transition: transform 0.3s, box-shadow 0.3s; }
      .image.green { background-color: var(--green); }
      .image.digital { background-color: var(--digital); }
      .image img { width:100%; aspect-ratio:12/9; object-fit:cover; border-radius:10px 10px 0 0; display:block; }
      .caption { width:100%; padding:1.5vw; font-size:2rem; font-weight:bold; color:white; line-height:1.1; word-wrap:break-word; }

      /* --- OVERLAY --- */
      .overlay { position:fixed; top:0; left:0; width:100vw; height:100vh; background:var(--overlay-bg); display:flex; justify-content:center; align-items:flex-start; z-index:98; backdrop-filter:blur(0.6vh); opacity:0; visibility:hidden; transition:0.4s; padding-top:20vh; }
      .overlay.active { opacity:1; visibility:visible; }
      .overlay .card { position:relative; background:var(--blue-light); border-radius:30px; width:40%; height:auto; display:flex; flex-direction:column; box-shadow:0 1vh 3vh rgba(0,0,0,0.4); color:white; transition:0.3s; transform:translateY(0); }
      .overlay .card.green { background-color:var(--green); }
      .overlay .card.digital { background-color:var(--digital); }
      .overlay .card-img {width:100%; aspect-ratio: 12/9; overflow:hidden; border-radius:30px 30px 0 0; position:relative; display:flex; justify-content:center; align-items:center;flex-shrink: 0;}
      .overlay .card-img img {max-width:100%; max-height:100%; object-fit:cover; display:block;}
      .overlay .card-info { flex:1; padding:1.5vh 2vw; display:flex; flex-direction:column; justify-content:space-between; gap:1vh; }
      .overlay .cat { position:absolute; top:15px; left:15px; border-radius:2vh; padding:0.6vh 1.5vw; font-weight:bold; font-size:1rem; }
      .overlay h1 { font-size:4rem; margin-bottom:0.3vh; }
      .overlay .desc { flex:1; font-size:2rem; line-height:1.3; max-height:none; overflow-y:visible; }
      .desc-qr { display:flex; justify-content:space-between; align-items:flex-end; gap:1vw; }
      .desc-qr p { flex:1; }
      #qrCodeContainer img { width:5vh; height:5vh; min-width:40px; min-height:40px; border-radius:0.4vh; background:white; padding:0.3vh; }
      #closeBtn { position:absolute; width:40px;height:40px; top:-50px; right:-20px; color:white; border:none; background:none; border-radius:0.6vh; cursor:pointer; font-size:2rem; z-index:10; transition:0.3s; }


      /* --- CATEGORY SWITCH --- */
      .toggle-container { display:flex; align-items:center; gap:1vw; }
      .toggle-label { color:white; font-size:2.2rem; font-weight:bold; opacity:0.9; }
      .switch { position:relative; display:inline-block; width:70px; height:30px; }
      .switch input { opacity:0; width:0; height:0; }
      .slider { position:absolute; cursor:pointer; top:0; left:0; right:0; bottom:0; background:var(--green); transition:0.4s; border-radius:34px; }
      .slider:before { content:""; position:absolute; height:24px; width:24px; left:3px; bottom:3px; background:white; border-radius:50%; transition:0.4s; }
      input:checked + .slider { background:var(--digital); }
      input:checked + .slider:before { transform:translateX(40px); }

      /* --- INTRO SCREEN --- */
      #intro-screen { position:fixed; top:0; left:0; width:100%; height:100vh; z-index:100000; display:flex; justify-content:center; align-items:center; flex-direction:column; overflow:hidden; transition:1s; }
      #intro-screen.hide { opacity:0; transform:scale(1.05); pointer-events:none; }
      #intro-screen .intro-overlay { position:absolute; top:0; left:0; width:100%; height:100%; backdrop-filter:blur(12px) brightness(0.6); background: rgba(6,23,66,0.65); z-index:1; transition:1s; }
      #intro-screen.hide .intro-overlay { backdrop-filter:blur(0) brightness(1); background:transparent; }
      #intro-screen .intro-content { position:relative; z-index:2; text-align:center; color:white; animation:fadeIn 1.2s ease; transition:0.8s; }
      #intro-screen.hide .intro-content { opacity:0; transform:translateY(-40px); }
      #intro-screen .logo img { width:50vw; margin-bottom:8vh; }
      .touch-explore { display:flex; align-items:center; justify-content:center; gap:2vw; font-size:2vh; font-weight:bold; text-transform:uppercase; margin-bottom:4vh; animation:floatText 1.2s ease-in-out infinite alternate; }
      .marker { display:inline-block; font-size:2vh; margin:3vw; animation:pulseChevron 1.2s ease-in-out infinite alternate; }
      .category-buttons { display:flex; justify-content:center; gap:2rem; }
      .cat-btn {padding: clamp(0.6rem, 1vw + 0.4rem, 1.5rem) clamp(1.2rem, 2vw + 0.4rem, 3rem); font-size:2rem; border: none; border-radius: 50px; font-weight: bold; cursor: pointer; color: white; box-shadow: 0 0 15px rgba(0, 0, 0, 0.3); transition: 0.3s;}
      .cat-btn.green { background: var(--green); }
      .cat-btn.digital { background: var(--digital); }
      .cat-btn.green { background:var(--green); }
      .cat-btn.digital { background:var(--digital); }
      .intro-content img.hand{width:4vh; height:auto; animation:handTap 1s ease-in-out infinite; padding-bottom: 3vh;}


      /* --- ANIMATIONS --- */
      @keyframes fadeIn { 0%{opacity:0; transform:translateY(20px);} 100%{opacity:1; transform:translateY(0);} }
      @keyframes handTap { 0%{transform:translateX(0);opacity:0.8;} 50%{transform:translateX(-1vh);opacity:1;} 100%{transform:translateX(0);opacity:0.8;} }

      

      @media only screen and (max-width:1920px) {
	.header {
	min-height:120px;
	}
  .footer {
	min-height:120px;
	}
	.header .logo img {
  	width: 15vw;
	}
	.toggle-label {
  	font-size: 1.2rem;
	}
	.image {
	aspect-ratio: 9/13;
	}
	.caption {
	font-size:1.7rem;
	}
	.overlay .card {
	width:50%;
	flex-direction:row;
	}
	.overlay .card-img {
	width:50%;
	border-radius:30px 0px 0px 30px;
	}
	.overlay .card-img img {
  	max-width: inherit;
  	max-height: 100%;
	}
	.overlay h1 {
	font-size:1.8rem;
	}
	.overlay .desc {
	font-size:1.2rem;
	}
	.desc-qr {
 	flex-direction: column;
	}
	.footer-logo img {
  	width: 10vw;
	}
	.footer .footer-logo img[alt="Deloitte"] {
  	max-width: 9vw;
	}
      }

@media only screen and (max-width:768px) {
	.header .logo img {
  	width: 25vw;
	}
	.overlay .card {
	width:60%;
	flex-direction:column;
	}
	.overlay .card-img {
	width:100%;
	border-radius:30px 30px 0px 0px;
	}
	.caption {
	font-size:1rem;
	}
	.overlay h1 {
	font-size:2rem;
	}
	.overlay .desc {
	font-size:1rem;
	}
	.footer-logo img {
  	width: 20vw;
	}
	.footer .footer-logo img[alt="Deloitte"] {
  	max-width: 10vw;
	}
      }

 @media only screen and (max-width:479px) {
	.overlay {
	padding-top:0px;
	align-items: center;
}
	.overlay .card {
	width:90%;
	flex-direction:column;
	}
	.overlay h1 {
	font-size:1.5rem;
	}
	.overlay .card-img {
	aspect-ration:12/5;
	}
      }