* {
  box-sizing: border-box;
}
body {
  font-size: 14px;
  background-image: url('../images/bg.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed; 
  margin: 0;
  padding: 0;
}

.v75_2 {
  width: 100%;
  min-height: 0vh;
  background: rgba(255,255,255,0.97);
  box-shadow: 0px 3px 8px rgba(0, 0.28, 0.5, 0.07);
  opacity: 1;
  position: relative;
  left: unset;
  top: unset;
  overflow: visible;
  display: block;
}

.v75_3 {
  width: 96%;
  max-width: 1116px;
  margin: 40px auto 30px auto; /* keep 32-40px gap from nav */
  background: rgba(255,255,255,1);
  opacity: 1;
  border-radius: 20px;
  box-shadow: 6px 6px 32px #cbe7fa44;
  position: relative;
  padding: 24px 0 0px 0;
  overflow: visible;
  display: flex;
  flex-direction: column;
  min-height: 300px;
}

/* Prevent child containers from stretching */
.v75_3 > * { flex: 0 0 auto; }

.v75_180 {
  width: 100%;
  max-width: 1170px;
  min-height: 72px;
  background: #fff;
  opacity: 1;
  display: flex;
  align-items: center;
  border-radius: 0 0 16px 16px;
  padding: 0 2vw;
  overflow: visible;
  justify-content: space-between;
  position: static;
  margin: 0 auto;
  top: unset; left: unset;
}
.v75_183 {
  width: 143px;
  color: rgba(0, 30, 54, 1);
  font-family: Times New Roman;
  font-weight: Bold;
  font-size: 24px;
  opacity: 1;
  text-align: left;
  margin-bottom: 8px;
}
.v75_230 {
  width: 28px;
  height: 28px;
  opacity: 1;
}
.v75_navs {
  display: flex;
  align-items: center;
  gap: 8px; /* tighter primary nav */
}
.v75_19210,.v75_19211,.v75_19212,.v75_19213,.v75_19214,.v75_19215,.v75_1921 {
  display: inline-flex;
}
.v75_194 {
  display: inline-flex;
  margin-left: 10px; /* give download button breathing room */
}
.v75_193, .v75_195 {
  color: #001e36;
  font-size: 14px;
  font-family:Times New Roman;
  font-weight: bold;
  text-align: center;
  cursor: pointer;
  text-decoration: none;
  padding: 0.5em 1.1em;
  background: none;
  border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  height: 100%;
  min-width: 0;
}
.v75_241 {
  width: 31px;
  height: 31px;
  background: url(../images/v75_241.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  opacity: 1;
}
.v75_245 {
  width: 31px;
  height: 31px;
  background: url(../images/v75_245.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  opacity: 1;
}
.v75_249 {
  width: 31px;
  height: 31px;
  background: url(../images/v75_249.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  opacity: 1;
}
.v75_253 {
  width: 31px;
  height: 31px;
  background: url(../images/v75_253.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  opacity: 1;
}

.v75_193:hover  { background: #f7f7fe; color: #236be8; }  
.v75_195:hover { background: #0056b3; }  
.v75_195 { color: #fff; font-size: 1em; font-family: inherit; background: #1473e6; }

.hero-section {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: start;
  justify-content: center;
  gap: 2vw;
  margin-top: 30px;
  margin-bottom: 10px;
  min-height: 320px;
  margin-left: 2vw;
  margin-right: 2vw;
}
.image_area {
  flex: 1 1 400px;
  min-width: 230px;
  max-width: 1000px;
  aspect-ratio: 10/7;
  position: relative;
  left: unset; top: unset;
  margin-bottom: 28px;
  padding: 0;
  box-sizing: border-box;
}
.img_show {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1s ease-in-out;
  object-fit: contain;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.18);
  border-radius: 10px;
}
.img_show.active { opacity: 1; }

.features {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  justify-content: space-around;
  margin-top: 16px;
  margin-bottom: 40px;
  min-height: 196px;
  margin-left: 2vw;
  margin-right: 2vw;
}
.features article {
  flex: 1 1 200px;
  min-width: 180px;
  max-width: 280px;
  background: #f6f6fa;
  border-radius: 13px;
  box-shadow: 0 2px 18px #dde9fa34;
  padding: 29px 22px 22px 22px;
  margin: 0 auto;
  position: relative;
  overflow: visible;
  display: flex;
  flex-direction: column;
  gap: 0.6em;
  align-items: flex-start;
}
.features article > div[class^="v75_24"] {
  width: 31px; height: 31px; background-size: cover !important; border-radius: 8px; margin-bottom: .7em; position: static;
}
.features article h2 {
  font-size: 1.16em; font-weight: bold; color: #222; margin: 0 0 .18em 0;
}
.features article p {
  font-size: 0.97em; color: #555; margin:0;
}

.cta-section {
  margin: 16px 5vw 0px 1vw;
  text-align: center;
}
.cta-section h1, .cta-section h2 {
  color: #0d0d25;
  margin: .7em auto .1em auto;
  font-weight: 700;
  font-size: 2.1rem;
}
.version-info {
  width: auto;
  text-align: center;
  color: #666;
  font-size: .98em;
  opacity: .94;
  margin: 0 auto 6px auto;
  position: static;
}
.v75_258, .v75_2581 {
  margin: 0 auto 8px auto;
  display: inline-block;
  background: #1473e6;
  border-radius: 8px;
  cursor: pointer;
  min-width: 240px;
  max-width: 300px;
  width: auto;
  height: 43px;
  position: static;
  left: unset; top: unset;
}
.v75_259 {
  width: 100%; height: 100%; color: #fff; text-align: center; font-size: 1.07em; font-weight: bold; border-radius: 8px; display: flex; align-items: center; justify-content: center; text-decoration: none;
  position: static;
}
.v75_258:hover, .v75_2581:hover { background: #0056b3; }

.friend-links {
  background-color: #f9f9f9;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  white-space: normal;
  gap: 12px;
  flex-wrap: wrap;
  position: static;
  overflow: visible;
  font-size: 1em;
  padding-left: 2vw;
  padding-right: 2vw;
  margin-top: auto; /* push to container bottom */
  margin-bottom: 0;
  order: 999; /* ensure it renders last */
  border-radius: 0px 0px 20px 20px
}
.friend-links h3 {
  font-size: 1em;
  margin-right: 10px;
}
.friend-links .links {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.friend-links .links a {
  text-decoration: none;
  color: #007BFF;
  font-size: 14px;
  font-family: Times New Roman;
  transition: color .18s;
}
.friend-links .links a:hover {
  text-decoration: underline;
  color: #0056b3;
}

.v75_201 {
  width: 100%;
  min-height: 85px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  position: static;
  left: unset; top: unset;
  box-shadow: 0px -2px 18px #dde9fa25;
}
.v75_167 {
    width: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  background: none;
  min-height: 54px;
  position: static; left:unset; top:unset;
}
.v79_663, .v79_662 {
  color: #333;
  font-size: 14px;
  text-align: center;
  font-family: Times New Roman;
  font-weight: 400;
  opacity: 0.94;
  margin: 2px auto 0 auto;
  position: static;
}

.popup {
  display: none;
  position: absolute;
  top: 0; left: 0;
  width: 200px;
  padding: 10px;
  background-color: #fff;
  border: 1px solid #ccc;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  z-index: 9999;
}
.qr-code { width: 100%; height: auto; }

.loading { position: fixed; top:0; left:0; width:100vw; height:100vh; background: #fff; display: flex; align-items:center; justify-content: center; z-index:9999; }
.loading.hidden { display: none; }

.cta-row {
  display: flex;
  justify-content: space-between;
  gap: 24px; /* widen spacing (16px -> 24px) */
}
/* Layout split: left 40%, right 60% */
.cta-left { flex: 0 0 40%; max-width: 40%;  }
.cta-right { flex: 0 0 60%; max-width: 60%;  }

/* Buttons share one row */
.cta-btns { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; margin-top: 30px; margin-bottom: 20px; }
/* Normalize spacing inside button wrapper */
.cta-btns .v75_258,
.cta-btns .v75_2581 { margin: 0; display: inline-flex; }

.v75_257 {
  font-size: 16px;
  opacity: 1;
}

@media screen and (max-width: 1240px) {
  .v75_180, .v75_3 { max-width: 98vw; }
}
@media screen and (max-width: 600px) {
  .v75_180 { padding: 0 1vw; flex-direction: column; min-height: 0; }
  .v75_3 { padding: 0 2px; }
  .v75_181 { height: 46px; min-width: 90px; font-size: 0.98em; }
  .friend-links { flex-direction: column; gap: 7px; padding: 10px 1vw; }
  .features article { min-width: 93vw; max-width: 96vw; font-size: 0.93em; }
  .image_area { min-width:96vw; max-width:99vw; }
  .cta-section h1,.cta-section h2{font-size:1.26rem;}
}
@media screen and (max-width: 800px) {
  .cta-row { flex-direction: column; align-items: stretch; gap: 12px; }
  .cta-left, .cta-right { flex: 0 0 100%; max-width: 100%; }
  .cta-right { text-align: left; }
}