/* Tvyal.com Presentation Styles by Aghasi Tavadyan */

:root {
    /* Tvyal.com Brand Colors & Theme Variables */
    --color-main: #003f5c; /* Deep Indigo (Primary) */
    --color-main-rgb: 0, 63, 92;
    --color-second: #ff7c43; /* Bright Orange (Action) */
    --color-second-n2: #f95d6a; /* Coral Red (Secondary Action) */
    --color-dark: #1A1A1A;
    --color-light: #FFFCF5; /* Warm Cream (Background) */
    --color-gray: #f0f0f0;
    --transition-speed: 300ms;

    /* Light Theme (Default) */
    --text-color: var(--color-dark);
    --heading-color: var(--color-main);
    --card-bg-color: rgba(255, 255, 255, 0.9); /* White cards on cream bg */
    --border-color: #ddd;
    --chart-bg-color: #ffffff;
    --chart-padding-color: #fafafa;

    /* Define link colors for light theme */
    --link-color: var(--color-second);
    --link-hover-color: var(--color-second-n2);
}

body.dark-mode {
    /* Dark Theme */
    --text-color: #e0e0e0;
    --heading-color: var(--color-light); /* Cream headings */
    --card-bg-color: rgba(47, 75, 124, 0.9); /* Dark Blue card (#2f4b7c) */
    --border-color: #2f4b7c;
    --chart-bg-color: #1a2b42;
    --chart-padding-color: #0c1a2c; /* Darkest Blue bg */

    /* Define link colors for dark theme */
    --link-color: var(--color-second-n2);
    --link-hover-color: var(--color-second);
}

body { margin: 0; font-family: 'Arial', 'Helvetica', sans-serif; overflow: hidden; background-color: #000; }

.title-logo {
  max-height: 200px; /* Adjust as needed */
  width: auto;
  margin-bottom: 20px;
}

#presentation-container {
    position: absolute; top: 50%; left: 50%;
    width: 1920px; height: 1080px;
    transform: translate(-50%, -50%) scale(0.5);
    transform-origin: center center;
}

.slide {
    position: absolute; width: 100%; height: 100%; box-sizing: border-box;
    padding: 30px 80px 60px 33.33%;
    color: var(--text-color);
    opacity: 0; visibility: hidden;
    transform: translateX(20px);
    transition: all var(--transition-speed) ease-in-out;
    display: flex; flex-direction: column;
    background-image: url('../files/beckground_light.png');
    background-size: cover; background-position: center;
}

h1 {
    font-size: 52px;
    color: var(--heading-color);
    padding-left: 0;
    padding-right: 0%;  /* NEW: Restricts h1 width */
    margin-bottom: 100px;
}

body.dark-mode .slide { background-image: url('../files/beckground_dark.png'); }

.slide.active { opacity: 1; visibility: visible; transform: translateX(0); z-index: 1; }

.two-column-layout {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 40px;
    width: 100%;
}

/* Slide 1: Title */
.slide-title-custom {
    background-image: url('../files/mining_day.jpg');
    color: #fff;
    padding: 0; /* Override default slide padding */
    display: flex;
    align-items: center;
    justify-content: center;
}

body.dark-mode .slide-title-custom {
    background-image: url('../files/mining_night.jpg');
}

.slide-title-custom .title-content {
    background-color: rgba(0, 0, 0, 0.6);
    padding: 50px 70px;
    border-radius: 12px;
    text-align: center;
    max-width: 1000px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.slide-title-custom h1, .slide-title-custom h2, .slide-title-custom h3, .slide-title-custom h4 {
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7);
    color: #fff; /* Ensure text is white */
}

.slide-title-custom h1 { font-size: 72px; }
.slide-title-custom h2 { font-size: 42px; font-weight: 300; }
.slide-title-custom h3 { font-size: 36px; margin-top: 40px; }
.slide-title-custom h4 { font-size: 32px; font-weight: 300; }

.attribution-text {
    position: absolute;
    bottom: 15px;
    right: 25px;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
}

.attribution-text .dark-mode-text { display: none; }
body.dark-mode .attribution-text .dark-mode-text { display: inline; }
body.dark-mode .attribution-text .light-mode-text { display: none; }



/* --- SLIDE 2: CEO QUOTE ANIMATION & LAYOUT --- */

.slide-problem .quote-container {
    display: flex;
    align-items: flex-start; /* Aligns items to the top */
    gap: 0px;
}
.international-quote {
  margin-top: 40px; /* Adds space above the second quote */
}

/* Increases the font size of the quote */
.slide-problem .quote-body {
    margin-top: 0;
    margin-right: 20px;
    font-size: 46px;
    line-height: 1.5;
}

.slide-problem .quote-author {
  font-size: 28px;
  font-weight: bold;
  margin-top: 25px;
  text-align: left;
}
.slide-problem .quote-author-title {
  font-size: 24px;
  opacity: 0.8;
  text-align: left;
}

/* Defines the animation */
@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(15px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Prepares words for animation with a stronger shadow */
.quote-body .word {
    display: inline-block;
    opacity: 0;
    animation: fadeSlideUp 0.3s ease forwards; /* Faster animation */
    text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.35); /* More noticeable shadow */
}

/* --- SLIDE 3: THREE CARD GRID LAYOUT --- */
.slide-advantages .three-card-grid {
    display: flex;
    gap: 40px; /* Adds space between the cards */
    width: 100%;
    align-items: stretch; /* Makes cards equal height */
}

.slide-advantages .card {
    flex: 1; /* Allows each card to take up 1/3 of the space */
    padding: 30px;
    border-radius: 12px;
    background: var(--card-bg-color);
    border-top: 5px solid var(--color-second);
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.slide-advantages .card h3 {
    font-size: 30px;
    color: var(--heading-color);
    display: flex;
    align-items: center; /* Aligns emoji with text */
    gap: 10px;
    margin-top: 0;
}

.slide-advantages .card p {
    font-size: 24px;
    line-height: 1.6;
}

/* --- SLIDE 4: ANIMATED DIAGRAM STYLING (v2: Top-to-Bottom) --- */

.slide-value .two-column-layout {
    align-items: center; /* Vertically centers the content */
}

.slide-value .text-column,
.slide-value .viz-column {
    flex: 0 0 50%;
    max-width: 50%;
}

/* Text styling for this specific slide */
.slide-value .text-column p {
    font-size: 30px;
    line-height: 1.7;
}

#data-pipeline-diagram {
    display: flex;
    flex-direction: column; /* Main layout is now vertical */
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 550px; /* Increased height for vertical layout */
    font-family: Arial, sans-serif;
    position: relative; /* Crucial for positioning data packets */
    overflow: hidden;
}

.diagram-row {
    display: flex;
    justify-content: center;
    gap: 20px; /* Adds space between items */
    width: 100%;
}

.diagram-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 24px; /* Creates the "squircle" effect */
    background: rgba(255, 255, 255, 0.7); /* Softer background */
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    width: 170px;
    height: 100px;
    opacity: 0;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.diagram-item-icon { font-size: 36px; }
.diagram-item-label { font-size: 16px; margin-top: 8px; font-weight: bold; text-align: center; }


.diagram-arrow {
    font-size: 40px;
    color: var(--heading-color);
    opacity: 0.7;
}

/* Data Packet Styling */
.data-packet {
    position: absolute;
    width: 10px;
    height: 10px;
    background-color: var(--color-main);
    border-radius: 50%;
    opacity: 0;
    box-shadow: 0 0 8px var(--color-main);
}

/* Animation Keyframes */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.03); } }

/* Diagram color & style tweaks */

.diagram-item {
    background: rgba(255, 255, 255, 0.6); /* Coherent semi-transparent white */
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}


@keyframes animateGradient {
    0% { background-position: 0% 0%; }
    50% { background-position: 0% 100%; }
    100% { background-position: 0% 0%; }
}


.diagram-process-box {
    background: linear-gradient(180deg, var(--color-second), var(--color-second-n2), var(--color-second));
    background-size: 100% 300%; /* Makes the background 3x taller than the box */
    animation: animateGradient 4s ease-in-out infinite;
}

/* Make text inside the colored process box more readable */
.diagram-process-box .diagram-item-label {
    color: var(--color-dark);
}

/* Data Packet Styling */
.data-packet {
    position: absolute;
    width: 12px;
    height: 12px;
    background-color: var(--heading-color);
    border-radius: 50%;
    opacity: 0;
    box-shadow: 0 0 8px var(--heading-color);
}

/* Animation Keyframes */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes moveRight { from { transform: translateX(0); } to { transform: translateX(280px); } }
@keyframes moveRight2 { from { transform: translateX(280px); } to { transform: translateX(560px); } }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }




/* --- STYLES FOR SLIDE 5 SUCCESS STORIES --- */

.slide-proof .slide-content {
  display: flex;
  flex-direction: row; /* Puts cases side-by-side */
  gap: 40px;
  align-items: stretch; /* This is correct: makes columns equal height */
  /* REMOVED height: 40%; */
  box-sizing: border-box;
  padding-bottom: 80px; /* A larger, cleaner padding */
}

.case-study-block {
  flex: 1; /* Each case takes 50% width */
  display: flex;
  flex-direction: column; /* Stacks text and button */
}

.slide-proof h3 {
  font-size: 36px; /* INCREASED */
}

.slide-proof p {
  font-size: 26px; /* INCREASED (this will work now) */
  line-height: 1.5;
  flex-grow: 1; /* Pushes button to the bottom */
}

.demo-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 24px 24px; /* INCREASED PADDING (your 2x height) */
  font-size: 30px;
  font-weight: bold;
  color: var(--color-dark);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 200ms ease;
  margin-top: 15px;
  text-decoration: none;
  background: linear-gradient(180deg, var(--color-second), var(--color-second-n2), var(--color-second));
  background-size: 100% 300%;
  animation: animateGradient 4s ease-in-out infinite;
}
/* The .demo-btn:hover rule is already correct (now that the typo is fixed) */



.demo-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

/* --- STYLES FOR DEMO MODAL --- */

#demo-modal-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: all 300ms ease-in-out;
}

#demo-modal-overlay.active {
  opacity: 1;
  visibility: visible;
}

#demo-modal-window {
  position: relative;
  width: 80%;
  height: 80%;
  background: #222; /* Dark background for loading */
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.5);
  transform: scale(0.9);
  transition: all 300ms ease-in-out;
  overflow: hidden; /* Clips the iframe */
}

#demo-modal-overlay.active #demo-modal-window {
  transform: scale(1);
}

#modal-close-btn {
  position: absolute;
  top: -10px;
  right: -10px;
  width: 44px;
  height: 44px;
  background: #fff;
  border: none;
  border-radius: 50%;
  font-size: 32px;
  line-height: 44px;
  text-align: center;
  color: #333;
  cursor: pointer;
  z-index: 210;
  box-shadow: 0 2px 10px rgba(0,0,0,0.4);
  transition: all 200ms ease;
}

#modal-close-btn:hover {
  transform: scale(1.1) rotate(90deg);
  background: var(--color-second);
  color: #fff;
}

#modal-iframe {
  width: 100%;
  height: 100%;
  border: none;
  opacity: 0; /* Hidden by default, JS fades it in */
  transition: opacity 300ms ease;
}


/* --- Loading Spinner --- */
#modal-content-loader {
  display: block; /* Shown by default, JS hides it */
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: #aaa;
  z-index: 205;
}
#modal-content-loader p {
  font-size: 18px;
}
.spinner {
  width: 50px;
  height: 50px;
  border: 5px solid #555;
  border-top-color: var(--color-second);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto 15px;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}


/* --- STYLES FOR SLIDE 6 RESEARCH --- */

.slide-research .two-column-layout {
    align-items: center; /* Vertically center the text and chart */
}

.slide-research .text-column {
    margin-top: 0px;
    flex: 0 0 30%;
    padding-right: 30px;
}

.slide-research .viz-column {
    flex: 0 0 70%;
}

.slide-research .text-column p, .slide-research .text-column li { font-size: 24px; line-height: 1.7; }
.chart-container { display: flex; flex-direction: column; height: 100%; }
body.dark-mode .chart-canvas-wrapper {
    background-color: var(--chart-color);;
}
#chart-controls { display: flex; gap: 10px; margin-bottom: 15px; justify-content: center; }
.chart-toggle-btn {
    padding: 8px 16px; border: 1px solid var(--border-color);
    background-color: transparent; color: var(--text-color);
    cursor: pointer; border-radius: 20px; transition: all 200ms ease; font-size: 14px;
}


/* --- Optional: Adds colored underlines to chart toggle buttons --- */
#toggle-it-btn {
    border-bottom: 3px solid var(--color-main); /* Green underline */
    padding-bottom: 5px;
}
#toggle-trade-btn {
    border-bottom: 3px solid var(--color-second); /* Yellow underline */
    padding-bottom: 5px;
}


.chart-toggle-btn.active {
  background-color: var(--color-main);
  color: white;
  background-color: rgba(var(--color-main-rgb), 0.75);
}
body.dark-mode .chart-toggle-btn.active { background-color: var(--heading-color); border-color: var(--heading-color); }

/* Make sure buttons are visible in dark mode */
body.dark-mode .chart-toggle-btn {
    border-color: #666;  /* lighter border for visibility */
    color: #e0e0e0;      /* light text */
}

body.dark-mode .chart-toggle-btn.active {
    background-color: var(--heading-color);
    border-color: var(--heading-color);
    color: #1A1A1A;
}


.chart-padding-layer {
  background-color: var(--chart-bg-color); /* Actual canvas container */
  border-radius: 6px; /* Slightly smaller for visual inset */
  width: 100%;
  height: 100%;
  padding: 12px; /* Optional: extra inner space if needed */
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chart-canvas-wrapper {
    position: relative;
    flex-grow: 1;
    min-height: 0; /* allow flexbox to shrink */
    max-height: 600px; /* constrain height for square ratio */
    aspect-ratio: 1 / 1; /* make it square */
    padding: 8px;
    border-radius: 12px;
    background-color: var(--chart-padding-color);
    padding: 15px;
    box-sizing: border-box;
}

/* Slide 7: Roadmap */

.slide-roadmap .phase-box h3 {
    font-size: 32px;  /* Add this rule */
}


/* --- SLIDE 7: DATA FACTORY ANIMATION (v3) --- */


.slide-roadmap .card h3 {
    font-size: 30px;
    color: var(--heading-color);
    display: flex;
    align-items: center; /* Aligns emoji with text */
    gap: 10px;
    margin-top: 0;
}


.slide-roadmap .card p {
    font-size: 24px;
    line-height: 1.6;
}

#factory-animation-container {
  /* This is the main stage */
  position: absolute;
  bottom: 0;
  left: 0;
  width: 1920px;
  height: 340px; /* New height based on 188px image + belt */
  overflow: hidden; /* Clips the animation */
  z-index: 5;
}

/* 1. The Conveyor Belt */

/* 1. The Conveyor Belt */
#factory-conveyor-belt {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 1920px;
  height: 175px; /* Height of your conveyor slice PNG */
  background-repeat: repeat-x;
  z-index: 10;
  animation: move-conveyor-belt 0.287s linear infinite; /* TWEAK: 80px / 278.75px/s = 0.287s */
}


@keyframes move-conveyor-belt {
  from { background-position: 0 0; }
  to { background-position: 77px 0; } /* Moves by width of your PNG */
}

/* 2. The Black Box (Server) */
#factory-black-box {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 80px; /* Sits on top of the belt */
  width: auto; /* 250px is a good size */
  height: 250px;
  z-index: 100; /* On top of everything */
}


#factory-black-shine-box {
  position: absolute;
  left: 40%;
  width: 350px;
  height: 240px;
  bottom: 80px; /* Sits on top of the belt */
  z-index: 90;
  background: linear-gradient(
    110deg,
    var(--color-main) 0%,
    var(--color-second) 50%,
    var(--color-main) 100%
  );
  background-size: 200% 100%;
  animation: move-shine 2s linear infinite;
  mix-blend-mode: screen; /* 'screen' or 'color-dodge' for light effect */
}


#factory-black-base-box {
  position: absolute;
  left: 40%;
  width: 350px;
  height: 240px;
  bottom: 80px; /* Aligns with the shine box */
  z-index: 80; /* One layer below the shine box */
  background-color: var(--color-main);
}





/* Common class for Rubbish, Gold, and Shine */
.factory-item {
  position: absolute;
  width: 248px;
  height: 150px;
  bottom: 140px; /* Sits on the belt */
  opacity: 0; /* Hidden by default */
  z-index: 50; /* Above belt, below box */
  /* This is the starting position: 50% (960px) - half-width (155px) */
  left: 830px;
}





#factory-shine-box {
  z-index: 51; /* TWEAK: Place ON TOP of the gold (z-index: 50) */
  background: linear-gradient(
    110deg,
    transparent 20%,
    rgba(255, 255, 255, 0.7) 40%,
    transparent 60%
  );
  background-size: 200% 100%;
  animation: move-shine 2s linear infinite;
  mix-blend-mode: screen; /* TWEAK: 'screen' or 'color-dodge' work best */
}


@keyframes move-shine {
  from { background-position: 150% 0; }
  to { background-position: -150% 0; }
}

/* 5. The Data Rubbish (Input) */
#factory-rubbish {
  /* Start position: way off-screen to the left */
  transform: translateX(-1115px); /* 805px to center + 310px width */
}

/* 6. The Data Gold (Output) */
#factory-gold {
  opacity: 0;
  /* Start position is at the center, matching the shine box */
}


/* --- SLIDE 8: WHY ME? --- */

.slide-why-me .text-column h3 {
    font-size: 32px;
}
.slide-why-me .text-column p {
    font-size: 26px;
    line-height: 1.7;
}

.slide-why-me .two-column-layout {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 40px;
    width: 100%;
}


.slide-why-me .text-column {
    flex: 0 0 60%;      /* 50% of the remaining 67% space */
    max-width: 60%;
    padding-left: 0;
}

.slide-why-me .image-column {
    flex: 0 0 40%;      /* 50% of the remaining 67% space */
    max-width: 40%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: column;
    gap: 60px;
    padding-top: 30px
}


.photo-container {
  position: relative;
  width: 100%;
  max-width: 550px;
}
.photo { width: 100%; border-radius: 8px; transition: opacity var(--transition-speed) ease; }
.photo.hover { position: absolute; top: 0; left: 0; opacity: 0; }
.photo-container:hover .photo.hover { opacity: 1; }
.caption { font-size: 16px; color: #666; font-style: italic; text-align: center; margin-top: 15px; }

/* Slide 9: Contact */
.closing-content { display: flex; align-items: center; gap: 50px; }
.closing-text { flex: 1.5; font-size: 30px; line-height: 1.8; }
.contact-card {
    flex: 1; background: var(--card-bg-color); padding: 40px; border-radius: 8px;
    border-top: 6px solid var(--color-main);
}
.contact-card h2 { margin: 0 0 15px 0; font-size: 32px; color: var(--heading-color); }
.contact-card p { margin: 0; font-size: 24px; line-height: 1.6; }
.contact-card hr { border: none; height: 1px; background: var(--border-color); margin: 15px 0; }

#indicator-selector {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 10px;
    flex-wrap: wrap; /* Allows buttons to wrap on smaller screens if needed */
}
.indicator-btn {
    padding: 6px 12px;
    font-size: 16px;
    font-weight: 600;
    border: 1px solid var(--border-color);
    background-color: transparent;
    color: var(--text-color);
    cursor: pointer;
    border-radius: 16px;
    transition: all 200ms ease;
}
.indicator-btn.active {
    background-color: var(--color-second);
    border-color: var(--color-second);
    color: white;
    font-weight: bold;
}


/* --- FINAL GLOBAL LAYOUT & TITLE SLIDE FIX --- */

/* 1. General rule for the main content area */
.slide-content {
    position: absolute;
    top: 20%; /* ALWAYS start content at 22% from the top */
    left: 33.33%;
    width: calc(100% - 33.33% - 80px); /* Calculate content area width */
    bottom: 60px;
    padding: 0; /* Ensure no padding on the container itself */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding-top: 0px;
}

/* 2. General rule for all h1 titles (except title slide) */
h1 {
    position: absolute;
    top: 30px;
    left: 33.33%; /* Use 'left' for correct absolute positioning */
    width: calc(100% - 33.33% - 80px);
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

/* --- OVERRIDES FOR THE CUSTOM TITLE SLIDE --- */

/* 3. Restore the title slide's specific flexbox layout */
.slide-title-custom {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

/* 4. Restore the title slide's h1 styling */
.slide-title-custom h1 {
    position: static; /* IMPORTANT: Revert from absolute positioning */
    width: auto;      /* Let it size to its content */
    font-size: 72px;  /* Restore its unique font size */
}

/* 5. Hide the empty .slide-content wrapper on the title slide */
.slide-title-custom .slide-content {
    display: none;
}

/* --- UI CONTROLS (REDESIGNED FOR VISIBILITY) --- */
#ui-controls, #progress-dots {
    position: fixed;
    z-index: 10;
}

/* Lift the whole UI bar up from the bottom edge */
#ui-controls {
    bottom: 35px;
    width: 100%;
    height: 34px; /* Set a fixed height */
}

/* Position toggles in the corners */
#theme-toggle {
    position: absolute;
    left: 40px;
    bottom: 0;
}
#lang-selector {
    position: absolute;
    right: 40px;
    bottom: 0;
}

/* Center the slide counter */
#slide-counter {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}



/* Style for the dots in the center */
#progress-dots {
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 12px;
}
.dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.4);
    cursor: pointer;
    transition: all 150ms ease-in-out;
}
.dot.active {
    background: rgba(255, 255, 255, 0.9);
    transform: scale(1.1);
}

/* Redesigned "frosted glass" style for toggles and counter */
.toggle-switch, #slide-counter {
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 20px;
    box-shadow: 0 4px 30px rgba(0,0,0,0.2);
}

/* Make the toggle switches slightly larger */
.toggle-switch {
    width: 70px;
    height: 34px;
    cursor: pointer;
    position: relative;
    display: flex;
    align-items: center;
}

/* Adjust the moving slider inside the toggle */
.toggle-switch .slider {
    width: 28px;
    height: 28px;
    background: #fff;
    border-radius: 50%;
    position: absolute;
    left: 3px;
    transition: transform var(--transition-speed) ease;
}
#theme-toggle.active .slider, #lang-toggle.active .slider {
    transform: translateX(36px);
}


/* --- STYLES FOR NEW LANGUAGE BUBBLE --- */
#language-bubble {
  position: absolute;
  right: 40px;  /* Aligns with the lang selector's right edge */
  bottom: 50px; /* (34px toggle height + 16px space) */
  background-color: var(--color-second);
  color: #fff;
  padding: 10px 18px;
  border-radius: 20px;
  font-size: 16px;
  font-weight: bold;
  box-shadow: 0 4px 15px rgba(0,0,0,0.3);
  z-index: 100;

  /* Start hidden and scaled down */
  opacity: 0;
  transform: scale(0.8);
  transform-origin: bottom right;

  /* Add a "pop" transition */
  transition: all 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
  animation: pulse-bubble 2s infinite ease-in-out 1.3s;

  /* Add a "pointer" shape */
  border-bottom-right-radius: 4px;
}

@keyframes pulse-bubble {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}


/* --- FIX FOR THEME TOGGLE EMOJIS --- */
.theme-label {
  width: 50%; /* Each label takes half the toggle width */
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  color: #fff;
  text-shadow: 1px 1px 3px rgba(0,0,0,0.6);
  z-index: 1;
  line-height: 34px;
  transition: opacity 0.3s ease;
}

#theme-toggle .theme-label:first-child {
  opacity: 1;
}

#theme-toggle .theme-label:last-child {
  opacity: 0.3;
}

/* When dark mode is active, swap visibility */
#theme-toggle.active .theme-label:first-child {
  opacity: 0.3;
}

#theme-toggle.active .theme-label:last-child {
  opacity: 1;
}


/* --- STYLES FOR NEW TRI-LANGUAGE TOGGLE --- */
#lang-selector {
  display: flex;
  /* Stronger background for better visibility */
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 20px;
  box-shadow: 0 4px 30px rgba(0,0,0,0.2);
  overflow: hidden;
  height: 34px;
  box-sizing: border-box;
}

.lang-option {
  padding: 0 15px;
  font-size: 14px;
  color: #fff;
  font-weight: bold;
  text-shadow: 1px 1px 3px rgba(0,0,0,0.4);
  cursor: pointer;
  transition: background-color 300ms ease;
  line-height: 32px; /* Center text vertically */
}

.lang-option:not(:last-child) {
  border-right: 1px solid rgba(255, 255, 255, 0.2);
}

.lang-option.active {
  background-color: rgba(255, 255, 255, 0.4);
}

.lang-option:hover:not(.active) {
  background-color: rgba(255, 255, 255, 0.2);
}


/* Adjust the slide counter */
#slide-counter {
    font-size: 16px;
    color: #fff;
    padding: 5px 15px;
    font-weight: bold;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.4);
}


/* --- Presentation Logo Styles --- */

/* 1. This styles the .presentation-logo-container div on each slide */
.presentation-logo-container {
  position: absolute;
  left: 2.5%;
  height: 0;
  width: 22%; /* previously 25% */
  padding-top: 18%;
  top: 30%;
  transform: translateY(-50%);
  z-index: 5;
  opacity: 1; /* Make it visible by default */
  visibility: visible;
}

/* Make the injected SVG fill its container like the img */
.presentation-logo-container svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* 2. This makes the <img> tag fill its container */
.presentation-logo-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* 3. This hides the logo container ONLY on the title slide */
.slide-title-custom .presentation-logo-container {
  opacity: 0;
  visibility: hidden;
}


/* 4. Animation Keyframes (Using STROKE) - LIGHT MODE */
@keyframes logoColorShift {
  0% {
    stroke: #003f5c !important; /* Explicit color instead of var() */
  }
  50% {
    stroke: #a05195 !important; /* Purple accent */
  }
  100% {
    stroke: #003f5c !important; /* Back to start */
  }
}

/* 4b. Animation Keyframes for DARK MODE */
@keyframes logoColorShiftDark {
  0% {
    stroke: #003f5c !important; /* Light blue for dark mode */
  }
  50% {
    stroke: #a05195 !important; /* Pink accent */
  }
  100% {
    stroke: #58b4ff !important; /* Back to start */
  }
}

/* 5. Target the animated logo */
.anim-logo svg path {
  /* Apply the light mode animation */
  animation: logoColorShift 6s ease-in-out infinite;
  /* Override inline stroke attribute */
  stroke: #003f5c !important;
  /* Ensure smooth animation */
  animation-fill-mode: both;
  transition: stroke 0.3s ease;
}

/* 5b. Apply dark mode animation */
body.dark-mode .anim-logo svg path {
  animation: logoColorShiftDark 6s ease-in-out infinite;
  stroke: #58b4ff !important;
}


/* --- GLOBAL FONT-SIZE REDUCTION FOR ARMENIAN (hy) --- */
/* This block reduces all fonts by 10% when 'lang-hy' is active */

body.lang-hy h1 { font-size: 46px; }
body.lang-hy .slide-title-custom h1 { font-size: 64px; }
body.lang-hy .slide-title-custom h2 { font-size: 37px; }
body.lang-hy .slide-title-custom h3 { font-size: 32px; }
body.lang-hy .slide-title-custom h4 { font-size: 28px; }
body.lang-hy .attribution-text { font-size: 12px; }
body.lang-hy .slide-problem .quote-body { font-size: 41px; }
body.lang-hy .slide-problem .quote-author { font-size: 25px; }
body.lang-hy .slide-problem .quote-author-title { font-size: 21px; }
body.lang-hy .slide-advantages .card h3 { font-size: 27px; }
body.lang-hy .slide-advantages .card p { font-size:   19px; }
body.lang-hy .slide-value .text-column p { font-size: 24px; }
body.lang-hy .diagram-item-icon { font-size: 32px; }
body.lang-hy .diagram-item-label { font-size: 14px; }
body.lang-hy .diagram-arrow { font-size: 36px; }
body.lang-hy .slide-proof h3 { font-size: 32px; }
body.lang-hy .slide-proof p { font-size: 22px; }
body.lang-hy .demo-btn { font-size: 27px; }
body.lang-hy #modal-close-btn { font-size: 28px; }
body.lang-hy #modal-content-loader p { font-size: 16px; }
body.lang-hy .slide-research .text-column p,
body.lang-hy .slide-research .text-column li { font-size: 21px; }
body.lang-hy .chart-toggle-btn { font-size: 12px; }
body.lang-hy .slide-roadmap .phase-box h3 { font-size: 28px; }
body.lang-hy .slide-roadmap .card h3 { font-size: 27px; }
body.lang-hy .slide-roadmap .card p { font-size: 21px; }
body.lang-hy .slide-why-me .text-column h3 { font-size: 28px; }
body.lang-hy .slide-why-me .text-column p { font-size: 23px; }
body.lang-hy .caption { font-size: 16px; }
body.lang-hy .closing-text { font-size: 27px; }
body.lang-hy .contact-card h2 { font-size: 28px; }
body.lang-hy .contact-card p { font-size: 21px; }
body.lang-hy .indicator-btn { font-size: 14px; }
body.lang-hy #language-bubble { font-size: 14px; }
body.lang-hy .theme-label { font-size: 16px; }
body.lang-hy .lang-option { font-size: 14px; }
body.lang-hy #slide-counter { font-size: 14px; }