/* 1) Variables */
:root {
  --primary: #2e3260;
  --accent: #FFF115;
  --bg: #fff;
  --text: #2e3260;
}

/* 2) Global Reset & Base */
* { margin:0; padding:0; box-sizing:border-box; }
html { font-family: 'Arial', sans-serif; scroll-behavior: smooth; }
body { background: var(--bg); color: var(--text); line-height:1.6; }
.container { width: 90%; max-width:1200px; margin: 0 auto; }

/* 3) Header & Nav */
/* push nav to left, lang-switcher to right */
header .container {
  display: flex;
  align-items: center;
}

/* nav sits right after logo */
header nav {
  margin-left: 40px;
}

/* language selector sits at the far right, before the hamburger */
.lang-switcher {
  margin-left: auto;
}
.lang-switcher select {
  padding: 6px;
  border: 1px solid var(--primary);
  border-radius: 4px;
  background: var(--bg);
  color: var(--text);
  font-weight: 600;
}

/* pull the nav + langs to the right */
header .container {
  display: flex;
  align-items: center;
}

/* logo at start; nav + lang-switcher + toggle get pushed via margin-left:auto */
nav {
  margin-left: auto;
  margin-right: 10x;  /* a little space before the lang codes */
}

/* tighten up the gap between your menu items if desired */
nav ul li + li {
  margin-left: 16px;
}

/* style the lang-codes */
.lang-switcher {
  display: flex;
  gap: 12px;
}

.lang-option {
  cursor: pointer;
  font-weight: 600;
  color: var(--primary);
  transition: color 0.2s;
  padding: 4px 6px;
  border-radius: 4px;
}

.lang-option.active {
  color: var(--accent);
  background: rgba(255, 241, 21, 0.1);
}


header {
  position: sticky; top:0; z-index:1000;
  background: var(--bg);
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
header .container {
  display:flex; align-items:center; justify-content: space-between;
  padding: 10px 0;
}
.logo img { height: 60px; }
nav ul { list-style:none; display:flex; }
nav ul li + li { margin-left: 20px; }
nav ul li a {
  text-decoration:none; color: var(--primary);
  font-weight:600; transition: color .3s;
}
nav ul li a:hover { color: var(--accent); }

/* mobile nav */
.nav-toggle {
  display: none; background: none; border: none; cursor: pointer;
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  display:block; width:25px; height:3px;
  background: var(--primary); border-radius:2px;
  position: relative; transition: .3s;
}
.nav-toggle span::before,
.nav-toggle span::after { content: ''; position: absolute; }
.nav-toggle span::before { top: -8px; }
.nav-toggle span::after { top: 8px; }

@media (max-width: 768px) {
  nav { display:none; position:absolute; top:60px; left:0; width:100%; background:var(--bg); }
  nav ul { flex-direction: column; text-align: center; }
  nav ul li + li { margin: 15px 0; }
  .nav-toggle { display: block; }
  nav.active { display: block; }
}

/* 4) Main Content */
main { padding: 60px 0; }

/* 5) Floater (WhatsApp) */
.support-btn {
  position: fixed; bottom:20px; right:20px;
  width:60px; height:60px; border-radius:50%;
  background: var(--accent); color: var(--primary);
  display:flex; align-items:center; justify-content:center;
  font-size: 28px; text-decoration:none;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2); z-index:1000;
}

/* 6) Footer */
footer {
  background: var(--primary); color: var(--bg);
  padding: 40px 0 20px;
}
footer .footer-links {
  display: flex; flex-wrap: wrap; gap: 40px;
}
.footer-col { flex: 1 1 200px; }
.footer-col h4 { margin-bottom: 15px; }
.footer-col ul { list-style:none; }
.footer-col ul li { margin-bottom:10px; }
.footer-col a { color: var(--bg); text-decoration: none; transition: opacity .3s; }
.footer-col a:hover { opacity: .8; }
.footer-col p { margin-bottom:8px; }
.social { display: flex; gap: 10px; }
.social a { font-size: 40px; color: var(--bg); }
.app-store img { height:40px; margin-right:10px; margin-bottom:10px; }
.pay-icons img { height:50px; margin-right:10px; }
.footer-bottom { text-align:center; margin-top:20px; font-size:14px; }
/* limit the size of the App Store & Play Market badges */
.footer-col.app-store img {
  height: 30px;      /* whatever max height you like */
  width: auto;       /* keep the original aspect ratio */
  margin-right: 8px; /* adjust spacing if needed */
  margin-bottom: 0;  /* remove extra bottom margin */
}
/* container */
.footer-col.app-store .app-badges {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* each badge box is 80px wide */
.footer-col.app-store .app-badge {
  display: block;
  width: 80px;     /* ← both will be exactly 80px wide */
}

/* image fills box */
.footer-col.app-store .app-badge img {
  width: 80px;
  height: auto;
  display: block;
}

/* c) keep your “above” image at 50% */
.content-img {
  display: block;
  justify-self: center;
  height: 300px;
  border-radius: 4px;
  margin: 20px;
}

/* Hide the old nav/toggle if you forgot to remove them */
nav, #nav-toggle { display: none; }

/* Accordion wrapper */
.accordion details {
  border: 1px solid var(--primary);
  border-radius: 4px;
  margin-bottom: 12px;
  overflow: hidden;
}
/* The clickable header */
.accordion summary {
  background: var(--primary);
  color: var(--bg);
  padding: 12px 16px;
  cursor: pointer;
  font-weight: 600;
  list-style: none;            /* remove default marker */
}
/* Hide default triangle */
.accordion summary::-webkit-details-marker {
  display: none;
}
/* The expanded content */
.accordion .accordion-content {
  padding: 16px;
  background: var(--bg);
  color: var(--text);
}

/* (Optional) add a small transition on the content */
.accordion details[open] .accordion-content {
  animation: fadeIn 0.3s ease forwards;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
main.container p {
  margin-bottom: 20px;
}
/* make summary a positioning context */
.accordion summary {
  position: relative;
  padding-right: 30px;    /* room for the arrow */
}

/* down-arrow on the right */
.accordion summary::after {
  content: '\25BC';        /* ▼ */
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.8em;
  transition: transform 0.3s ease;
  color: var(--accent);
}

/* flip it when the panel is open */
.accordion details[open] summary::after {
  transform: translateY(-50%) rotate(180deg);
}

.table-example {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
}
.table-example th,
.table-example td {
  border: 1px solid var(--primary);
  padding: 8px 12px;
  text-align: left;
}
.table-example th {
  background: var(--primary);
  color: var(--bg);
  font-weight: 600;
}
.table-example tr:nth-child(even) td {
  background: #f9f9f9;
}
/* Style the header row */
.table-example th {
  background: var(--primary);
  color: var(--bg);
  font-weight: 600;
}

.table-example tr > td:first-child {
  background: var(--primary);
  color: var(--bg);
  font-weight: 600;
}
/* anywhere in your css/style.css */
main.container p,
.accordion .accordion-content p {
  white-space: pre-line;
}
/* style the video just like your images */
.content-video {
  display: block;
  width: 20%;            /* or whatever fraction you prefer */
  height: auto;
  margin: 20px auto;     /* center it with breathing room */
  border-radius: 4px;    /* optional, matches your images */
  background: #000;      /* nice fallback if poster fails */
}

.video-wrapper {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 ratio */
  margin: 20px 0;
}
.video-wrapper iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
}