:root {
  --font-primary: "Nunito", sans-serif;
  --bg-main: #f5f5f5;
  --bg-accent: #3bb3c3;
  --bg-interactive: #28a745;
  --bg-interactive-light: rgba(40, 167, 69, 0.1);
  --bg-transparent: transparent;
  --text-dark: #212529;
  --text-primary: #2f3a4a;
  --text-light: white;
  --text-accent: #3bb3c3;
  --text-muted: #9c9ea4;
  --text-icon-dark: #333;
  --border-light: #e5e7eb;
  --border-accent-transparent: rgba(40, 167, 69, 0.3);
  --shadow-light: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-medium: rgba(0, 0, 0, 0.2);
  --shadow-none: rgba(0, 0, 0, 0);
  --shadow-button: 0 4px 10px rgba(40, 167, 69, 0.3);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: var(--font-primary);
  background: var(--bg-main);
}

.content {
  height: 2000px;
  padding-top: 100px;
}

html {
  touch-action: manipulation;
}

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 1280px;
  background: var(--bg-main);
  z-index: 1000;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.navbar.hidden {
  top: -100px; /* Move navbar out of view */
}

.logo-container {
  flex: 0 1 auto;
  min-width: 60px;
}

.nav-controls {
  display: flex;
  gap: 15px;
  align-items: center;
}

.logo {
  display: flex;
  align-items: center;
  gap: 0rem;
  height: 100%; /* Fill available space */
  color: var(--text-primary);
  font-size: 1.6rem;
  font-weight: 900;
  margin-left: 28px;
  text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.6);
}

.sub-logo {
  font-weight: 800; /* Makes 'ONLINE' bold */
  color: var(--text-dark); /* Change color to blue (or any color you prefer) */
  font-size: 1.3rem; /* Slightly larger than the rest of the text */
  text-transform: uppercase; /* Ensure consistency in capitalization */
  margin-left: 5px; /* Adjust the value as needed */
}

.logo img {
  height: 70px; /* For the main logo */
  width: auto;
  filter: drop-shadow(1px 1px 0px rgba(0, 0, 0, 0.6));
}

.language-btn {
  background-color: var(--bg-transparent);
  color: var(--text-primary);
  padding: 0.65rem 1.5rem;
  border-radius: 8px;
  border: 1px solid var(--text-primary);
  cursor: pointer;
  display: inline-flex; /* Keep for vertical alignment of text if needed */
  align-items: center;
  font-size: 1rem;
  font-weight: 700;
  font-family: var(--font-primary);
  text-transform: none;
}

.share {
  background-color: var(--bg-transparent);
  color: var(--text-primary);
  padding: 0.65rem 1.5rem;
  border-radius: 8px;
  border: 1px solid var(--text-primary);
  cursor: pointer;
  display: inline-flex; /* Use flexbox for alignment */
  align-items: center; /* Center items vertically */
  font-size: 1rem;
  font-weight: 700;
  font-family: var(--font-primary);
  text-transform: none;
}

.share-dropdown {
  position: fixed;
  /* Default to hidden off-screen or via display:none and toggle with .active */
  display: none; /* Initially hidden */
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh; /* Full viewport height */
  background: var(--bg-main); /* Solid background */
  border-radius: 0; /* No radius for full screen */
  box-shadow: none; /* No shadow for full screen */
  padding: 20px; /* Add some padding */
  overflow-y: auto; /* Allow scrolling if content overflows */
  transition: opacity 0.3s ease-in-out; /* Optional: for fade effect */
  z-index: 1001; /* Ensure it's above other content but below language modal if active */
  box-sizing: border-box;
  flex-direction: column; /* To align close button and icons */
  align-items: center; /* Center content like title/icons */
}

.share-dropdown.active {
  display: flex; /* Use flex to show */
  opacity: 1; /* For fade effect */
  /* right: 0; No longer needed, left:0 and width:100% handles it */
}

.close-share-dropdown-btn {
  color: var(--text-muted);
  position: absolute;
  top: 20px;
  right: 30px;
  font-size: 32px;
  font-weight: bold;
  cursor: pointer;
  z-index: 1002; /* Above other share content */
}

.close-share-dropdown-btn:hover,
.close-share-dropdown-btn:focus {
  color: var(--text-dark);
  text-decoration: none;
}

.share-icons {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4 columns */
  gap: 1.5rem;
  width: 100%; /* Take full width of the padded modal */
  max-width: 800px; /* Optional: constrain max width of the icon grid */
  margin-top: 50px; /* Space below a potential title or close button */
}

.share-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem;
  border-radius: 8px;
  transition: background 0.2s;
  cursor: pointer;
}

.share-icon:hover {
  background: var(--bg-main);
}

.share-icon svg {
  width: 52px; /* Increased default size for original icons */
  height: 52px; /* Increased default size for original icons */
  /* Ensure SVG itself doesn't have a background if it's meant to be transparent */
  background-color: transparent !important;
  fill: #808080; /* Default to grey */
}

.share-icon:hover svg {
  fill: var(--text-accent); /* Teal on hover */
}

/* Override for the new icons (Embed, Copy, Email) to keep their size appropriately adjusted */
.share-icon:has(span) svg {
  width: 47px; /* Adjusted size */
  height: 47px; /* Adjusted size */
  stroke: #808080; /* Default to grey for stroke-based icons */
  fill: none; /* Ensure fill is not applied to stroke-based icons unless intended */
}

.share-icon:hover:has(span) svg {
  stroke: var(--text-accent); /* Teal on hover for stroke-based icons */
}

.share-icon span {
  /* Style for the text below new icons */
  font-size: 0.75rem; /* Smaller text for the label */
  color: var(--text-primary);
  margin-top: 0.3rem;
  background-color: transparent; /* Ensure span background is transparent */
}

.share-title {
  font-family: var(--font-primary);
  font-weight: 900;
  margin-bottom: 1.5rem;
  text-align: center;
}

/* Hero Section */
.hero {
  background: var(--bg-main);
  min-height: auto;
  height: auto;
  padding: 8rem 0; /* Adjust as needed */
  display: flex;
  align-items: center; /* Center content vertically */
  justify-content: center; /* Center content horizontally */
  position: relative;
  overflow: hidden;
}

/* Hero Content */
.hero-content {
  max-width: 900px; /* Adjust this value as needed */
  text-align: left;
  color: var(--text-dark);
  z-index: 1;
  margin-right: -4rem; /* Add space between content and images */
  margin-left: 35rem;
  flex-shrink: 0; /* Prevent content from shrinking */
  background-color: var(--bg-transparent);
}

.hero-title {
  font-size: 2.8rem;
  font-weight: 900;
  margin-bottom: 2rem;
  line-height: 1.2;
  max-width: 700px;
  color: var(--text-primary);
  font-family: var(--font-primary);
  background-color: var(--bg-transparent);
}

.hero-subtitle {
  font-size: 2.8rem;
  color: var(--text-accent);
  font-family: var(--font-primary);
  background-color: var(--bg-transparent);
}

.hero-text {
  font-size: 1rem;
  margin-bottom: 2rem;
  max-width: 400px;
  opacity: 0.9;
  font-family: var(--font-primary);
  font-weight: 500;
}

.hero-buttons {
  display: flex;
  gap: 1rem;
}

.subscribe-btn {
  background-color: var(--bg-interactive); /* Green */
  color: var(--text-light); /* White text on green button */
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  font-weight: 800;
  font-family: var(--font-primary);
  box-shadow: var(--shadow-button);
  transition:
    background-color 0.3s,
    transform 0.2s;
}

.subscribe-btn:hover {
  background-color: #218838; /* Darker green on hover */
  transform: translateY(-2px);
}

.subscribe-btn svg {
  background-color: var(--bg-transparent);
  stroke: var(--text-light); /* White icon stroke */
}

.latest-btn {
  background-color: var(--bg-interactive-light); /* Light green */
  color: var(--text-dark); /* Dark text on light green button */
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  border: 1px solid var(--border-accent-transparent); /* Green-based border */
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  font-weight: 700;
  font-family: var(--font-primary);
  box-shadow: var(--shadow-light);
  transition:
    background-color 0.3s,
    transform 0.2s;
}

.latest-btn:hover {
  background-color: rgba(40, 167, 69, 0.2); /* Slightly darker light green */
  transform: translateY(-2px);
}

.latest-btn svg {
  background-color: var(--bg-transparent);
  stroke: var(--text-dark); /* Match button text color */
}

/* Hero Images */
.hero-images {
  width: 1050px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  flex-shrink: 0;
  overflow: hidden; /* Prevent overflow */
}

.hero-images img {
  width: 100%;
  border-radius: 12px;
  object-fit: cover;
  transform: rotate(8deg);
}

/* Default desktop styling */
.desktop-image {
  display: block;
}

.mobile-image {
  display: none;
}

.language-container {
  display: flex;
  max-width: 1300px;
  margin: auto;
  align-items: center;
  gap: 10px;
  background: var(--bg-main);
  padding: 10px;
  border-top: 2px solid var(--border-light); /* You can change the color and thickness here */
  border-bottom: 2px solid var(--border-light); /* Same here */
}

.language-scroll {
  display: flex;
  align-items: center;
  overflow-x: auto;
  scroll-behavior: smooth;
  gap: 13px;
  padding: 5px;
  max-width: 1200px;
  margin: auto;
  margin: 0 -60px; /* Adds space between the scroll buttons and the language items */
  flex-wrap: nowrap; /* ADDED */
}

.language-scroll::-webkit-scrollbar {
  display: none; /* Hide scrollbar */
}

.language-item {
  display: flex;
  align-items: center;
  gap: 5px;
  background: var(--bg-main);
  padding: 8px 18px;
  border-radius: 8px;
  box-shadow: 0 1px 5px var(--shadow-none);
  transition: transform 0.2s ease-in-out;
  cursor: pointer;
  flex: 0 0 auto; /* ADDED - crucial change */
}

.language-item:hover {
  transform: scale(1.1);
}

.language-item img {
  width: 35px; /* Adjust flag size */
  height: auto;
  border-radius: 3px;
}

.language-item span {
  font-weight: 900;
  font-size: 1rem;
  color: var(--text-muted);
  text-transform: uppercase;
  font-family: var(--font-primary);
  white-space: nowrap; /* Add this line */
  width: auto !important; /* ADDED */
}

.scroll-btn {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  padding: 5px;
  margin: 0 55px; /* Adds space on both sides */
}

.scroll-btn.left {
  background-color: var(--bg-transparent);
  color: var(--text-icon-dark);
}

.scroll-btn.right {
  background-color: var(--bg-transparent);
  color: var(--text-icon-dark);
}

/* Power Section */

.p-info-spacer {
  height: 6rem; /* Adjust this to control the spacing */
  background-color: var(--bg-main);
}

.p-info-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10rem;
  padding: 0rem 3rem;
  align-items: center;
  max-width: 1300px;
  margin: auto;
  background-color: var(--bg-main);
}

.p-info-image img {
  width: 100%; /* Ensure it fills the container */
  max-width: 300px; /* Adjust as needed */
  height: auto; /* Maintain aspect ratio */
  border-radius: 50%; /* Makes it circular */
  box-shadow: 0 4px 12px var(--shadow-medium); /* Optional shadow */
  object-fit: cover; /* Ensures the image covers the circular area properly */
  transform: translateX(65px); /* Moves it right by 20px */
}

.p-info-text h1 {
  font-size: 2.8rem;
  font-family: var(--font-primary);
  margin-bottom: 2rem;
  color: var(--text-accent);
  font-weight: 900;
}

.p-info-text p {
  font-size: 1rem;
  font-family: var(--font-primary);
  font-weight: 500;
  line-height: 1.6;
  width: 90%;
}

.f-info-spacer {
  height: 6rem; /* Adjust this to control the spacing */
  background-color: var(--bg-accent);
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 1280px; /* Adjust based on layout needs */
  clip-path: path(
    "M0 20 Q50 0, 100 20 T200 20 T300 20 T400 20 T500 20 T600 20 T700 20 T800 20 T900 20 T1000 20 T1100 20 T1200 20 T1300 20 T1400 20 T1500 20 L1500 100 L0 100 Z"
  );
}

footer {
  background-color: var(--bg-accent);
  padding: 15px 20px;
  font-size: 14px;
  border-top: 0px solid var(--bg-accent);
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 1280px; /* Adjust as needed */
}

/* Footer Row 1 Layout */
.footer-top {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr; /* First column is twice as large */
  gap: 30px;
  padding-top: 100px; /* Adjust spacing before row 2 */
  padding-bottom: 10px; /* Adjust spacing before row 2 */
  background-color: var(--bg-accent);
}

/* Titles Styling */
.footer-top h4 {
  margin-bottom: 30px;
  font-size: 1.2rem;
  font-weight: 900;
  color: var(--text-primary);
  text-transform: uppercase;
  background-color: var(--bg-accent);
}

/* Styling for Row 1 Text (Unique Class) */
.footer-top-text {
  background-color: var(--bg-accent);
  color: var(--text-light);
  font-size: 1rem;
  font-weight: 500;
  text-align: left;
  font-family: var(--font-primary);
}

.footer-top-text p {
  margin-bottom: 20px; /* Adjust spacing as needed */
  background-color: var(--bg-accent);
}

.footer-top-text p svg {
  margin-left: 8px; /* Adjust spacing */
  vertical-align: middle; /* Align with text */
  background-color: var(--bg-accent);
}

/* Footer Row 2 Styling */
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 0px solid var(--bg-accent);
  background-color: var(--bg-accent);
  padding-top: 10px;
}

.footer-bottom div {
  background-color: var(--bg-accent);
  padding: 5px 10px; /* Adjust as needed */
}

/* Footer Links */
footer a {
  text-decoration: none;
  color: var(--text-light);
  margin-left: 15px;
  background-color: var(--bg-accent);
}

footer a:hover {
  text-decoration: underline;
}

#copyright {
  background-color: var(--bg-accent); /* Adjust color as needed */
  color: var(--text-light); /* Ensure text is readable */
  padding: 5px 10px; /* Add some spacing */
  display: inline-block; /* Ensure background only covers content */
  border-radius: 5px; /* Optional: Adds rounded corners */
}

/* Make images responsive by default */
img {
  max-width: 100%;
  height: auto;
}

/* Improve touch targets */
button,
.share-icon {
  min-width: 44px;
  min-height: 44px;
}

/* Language Modal Styles */
.modal {
  display: none;
  position: fixed;
  z-index: 2000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: var(--bg-main); /* Changed to solid background */
  overflow: hidden; /* Prevent body scroll when modal is open */
}

.modal-popup-content {
  background-color: var(--bg-main); /* Ensure consistency */
  padding: 20px; /* Adjusted padding for full screen */
  border: none; /* Removing border for cleaner full-screen look */
  border-radius: 0; /* Full screen, no radius */
  width: 100%; /* Full width */
  max-width: 100%; /* Full width */
  box-shadow: none; /* No shadow for full screen */
  position: relative; /* Keep for absolute positioning of close button */
  height: 100vh; /* Full viewport height */
  max-height: 100vh; /* Full viewport height */
  display: flex;
  flex-direction: column;
  box-sizing: border-box; /* Include padding and border in the element's total width and height */
}

.modal-popup-content h2 {
  text-align: center;
  font-family: var(--font-primary);
  font-weight: 900;
  color: var(--text-primary);
  margin-top: 20px; /* Add some space from the top edge */
  margin-bottom: 25px;
  font-size: 1.8rem;
  flex-shrink: 0; /* Prevent header from shrinking */
}

.close-language-modal-btn {
  color: var(--text-muted);
  position: absolute;
  top: 20px; /* Adjusted for new padding */
  right: 30px; /* Adjusted for new padding */
  font-size: 32px;
  font-weight: bold;
  cursor: pointer;
  z-index: 2001; /* Ensure it's above other modal content */
}

.close-language-modal-btn:hover,
.close-language-modal-btn:focus {
  color: var(--text-dark);
  text-decoration: none;
}

.language-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 15px;
  overflow-y: auto;
  padding: 10px 20px 20px 20px; /* Adjusted padding */
  flex-grow: 1;
}

.language-grid .language-item {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  background: var(--bg-main);
  padding: 12px;
  border-radius: 8px;
  box-shadow: none;
  transition:
    transform 0.2s ease-in-out,
    box-shadow 0.2s ease-in-out;
  cursor: pointer;
  text-align: left;
  border: none;
}

.language-grid .language-item:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 4px 12px var(--shadow-medium);
}

.language-grid .language-item img {
  display: none;
}

.language-grid .language-item .native-lang-name {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text-primary);
  font-family: var(--font-primary);
  text-transform: none; /* Ensure original casing */
}

.language-grid .language-item .english-lang-name {
  font-weight: 500;
  font-size: 0.85rem;
  color: var(--text-muted);
  font-family: var(--font-primary);
  text-transform: none; /* Ensure original casing */
}

@media (max-width: 768px) {
  .navbar {
    padding: 0 1rem;
    height: 70px;
  }

  .logo img {
    height: 50px;
  }

  .logo-text {
    display: none;
  }

  .hero {
    flex-direction: column-reverse;
    padding: 4rem 1rem 2rem;
    height: auto;
  }

  .hero-content {
    margin: 0;
    padding: 1rem;
    text-align: center;
  }

  .hero-title,
  .hero-subtitle {
    font-size: 2rem;
    line-height: 1.3;
    max-width: 100%;
  }

  .hero-text {
    font-size: 1rem;
    margin: 0 auto 2rem;
    max-width: 300px;
  }

  .hero-buttons {
    flex-direction: column;
    gap: 1rem;
    max-width: 300px;
    margin: 0 auto;
  }

  .subscribe-btn,
  .latest-btn {
    width: 100%;
    justify-content: center;
    padding: 1rem;
  }

  .hero-images {
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    padding: 0 1rem;
    grid-template-columns: 1fr;
  }

  .hero-images img {
    transform: rotate(0);
    margin-bottom: 1rem;
  }

  .desktop-image {
    display: none;
  }

  /* Show mobile-specific image */
  .mobile-image {
    display: block;
    /* Add mobile-specific styling */
    border-radius: 8px;
    max-height: 400px;
    object-fit: cover;
  }

  .p-info-section {
    grid-template-columns: 1fr;
    gap: 2rem;
    padding: 2rem;
  }

  .p-info-image img {
    transform: translateX(0);
    max-width: 200px;
    margin: 0 auto;
  }

  .p-info-text h1 {
    font-size: 2rem;
  }

  .p-info-text p {
    width: 100%;
  }

  .footer-top {
    grid-template-columns: 1fr;
    padding: 2rem;
  }

  .share {
    padding: 0.5rem 1rem; /* Adjusted padding for text-only button on mobile */
  }

  .share span {
    display: inline; /* Ensure text "share" is visible */
  }

  .share-dropdown {
    padding: 15px;
  }

  .share-dropdown.active {
  }

  .share-icons {
    grid-template-columns: repeat(2, 1fr); /* 2 columns on mobile */
    gap: 1rem;
  }

  .share svg {
    height: 24px;
    width: 24px;
    margin-left: 0;
  }

  .language-container {
    padding: 10px 0;
    border-top: none;
    border-bottom: none;
    position: relative;
  }

  .scroll-btn {
    display: none !important; /* Hide scroll buttons on mobile */
  }

  .language-scroll {
    margin: 0;
    gap: 8px;
    padding: 5px 10px;
    -webkit-overflow-scrolling: touch; /* Better scroll on mobile */
  }

  .language-item {
    padding: 8px 15px;
    min-width: 120px; /* Minimum width for better touch targets */
  }

  .language-item:active {
    transform: scale(0.95);
    background: var(--bg-transparent);
  }

  .language-item img {
    width: 25px !important; /* Smaller flags on mobile */
  }

  .language-item span {
    font-size: 0.8rem !important; /* Smaller text */
  }

  /* Optional: Add gradient fade effect */
  .language-scroll {
    mask-image: linear-gradient(
      to right,
      transparent 0%,
      black 10%,
      black 90%,
      transparent 100%
    );
  }
  /* Modal responsive adjustments */
  .language-grid {
    grid-template-columns: repeat(2, 1fr); /* 2 columns on smaller screens */
    padding: 10px; /* Adjust padding for smaller screens */
  }
  .modal-popup-content {
    /* width: 90%; Keep it responsive for smaller screens - now it's 100% */
    padding: 15px; /* Adjust padding for smaller screens */
    /* max-height: 85vh; Adjust if needed for smaller screens - now 100vh */
  }
  .modal-popup-content h2 {
    font-size: 1.5rem;
    margin-top: 15px;
    margin-bottom: 20px;
  }
  .language-grid .language-item {
    padding: 10px;
    gap: 5px;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .language-grid .language-item .native-lang-name,
  .language-grid .language-item .english-lang-name {
    font-size: 0.85rem;
  }
}

@media (max-width: 480px) {
  .language-grid {
    grid-template-columns: repeat(1, 1fr); /* 1 column on very small screens */
  }
  .language-btn {
    padding: 0.65rem 1rem; /* Adjust padding for text-only button */
  }
  .share-icons {
    grid-template-columns: repeat(
      1,
      1fr
    ); /* 1 column on very small screens for share icons */
    gap: 1rem;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  /* Target tablets and smaller desktops for width adjustment */
  /* .modal-popup-content {
        max-width: 80vw; Adjust max-width for tablets if 900px is too wide - now 100%
    } */
  .language-grid {
    grid-template-columns: repeat(3, 1fr); /* Maybe 3 columns on tablet */
  }
}

@media (min-width: 769px) and (max-width: 820px) {
  .hero {
    flex-direction: column-reverse !important;
    padding: 6rem 1.5rem 2rem !important;
    height: auto !important;
  }

  .hero-content {
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
    width: 100% !important;
  }

  .hero-title,
  .hero-subtitle {
    font-size: 2.8rem !important; /* Adjusted for tablet */
    line-height: 1.25 !important;
    max-width: 100% !important;
    margin-bottom: 1.5rem !important;
  }

  .hero-text {
    font-size: 1.1rem !important;
    margin: 0 auto 2rem !important;
    max-width: 500px !important; /* Wider text for tablet */
  }

  .hero-buttons {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 1rem !important;
    max-width: 100% !important;
  }

  .subscribe-btn,
  .latest-btn {
    width: auto !important;
    padding: 1rem 2rem !important;
    font-size: 1.1rem !important;
  }

  .hero-images {
    width: 100% !important;
    max-width: 600px !important;
    margin: 0 auto 2rem !important;
    padding: 0 !important;
    grid-template-columns: 1fr !important;
  }

  .hero-images img {
    transform: rotate(3deg) !important; /* Subtle rotation for tablet */
    margin-bottom: 1.5rem !important;
    max-height: 400px !important;
    object-fit: contain !important;
  }

  /* Force show mobile image on tablet */
  .desktop-image {
    display: none !important;
  }

  .mobile-image {
    display: block !important;
    transform: none !important;
  }
}

/* Kindle Fire HD 8.9\" (810px width) specific fixes */
@media (width: 810px) and (height: 1080px) {
  .hero-title,
  .hero-subtitle {
    font-size: 2.8rem !important;
  }

  .hero-images img {
    max-height: 320px !important;
  }
}

/* iPad Portrait (768px) specific fixes */
@media (width: 768px) and (height: 1024px) {
  .hero {
    padding-top: 8rem !important;
  }

  .hero-images {
    max-width: 500px !important;
  }

  .hero-images img {
    max-height: 350px !important;
  }
}

/* Removed .language-btn svg {} as icon is removed */