/* ============================================================
   Arvikahq.click — Main stylesheet
   Colors:
     headings / accents: #831b1b
     text: #313131
     background: #e6dfff
     buttons: #831b1b with text #e6dfff
     button hover: #313131
============================================================ */

/* -----------------------
   Variables
------------------------*/
:root{
  --bg: #e6dfff;
  --text: #313131;
  --accent: #831b1b;
  --btn-text: #e6dfff;
  --btn-hover: #313131;
  --container-max: 1100px;
  --radius: 12px;
  --shadow: 0 10px 30px rgba(19,19,19,0.08);
  --font: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

/* -----------------------
   Base
------------------------*/
*{box-sizing:border-box}
html,body{height:100%}
body.arvikahq-click-body{
  margin:0;
  font-family:var(--font);
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.6;
}

/* Utility container */
.container{max-width:var(--container-max);margin:0 auto;padding:0 20px}

/* Headings */
h1,h2,h3,h4,h5,h6{
  color:var(--accent);
  margin:0 0 12px 0;
  text-shadow: 0 0 0 rgba(0,0,0,0); /* base for accessibility */
  -webkit-text-stroke: 0.3px rgba(0,0,0,0.06);
  font-weight:600;
}

/* Links */
a{color:var(--text);text-decoration:none}
a:hover{color:var(--accent)}

/* -----------------------
   NAVBAR
------------------------*/
.arvikahq-click-navbar{
  background:transparent;
  padding:18px 0;
  position:relative;
  z-index:1000;
}

.arvikahq-click-logo{max-height:64px;display:block;margin:0 auto 4px}

.arvikahq-click-nav .nav-link{
  color:var(--text);
  font-weight:600;
  letter-spacing:0.2px;
  padding:8px 10px;
  transition:color .22s ease, border-bottom .22s ease;
}

.arvikahq-click-nav .nav-link.active,
.arvikahq-click-nav .nav-link:hover{
  color:var(--accent);
  border-bottom:3px solid rgba(131,27,27,0.12);
}

/* mobile toggler color */
.navbar-toggler{border:none;font-size:18px;color:var(--text)}

/* -----------------------
   HERO
------------------------*/
.arvikahq-click-hero{
  position:relative;
  height:80vh;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:30px 20px;
  background-image: url('../images/hero.jpg');
  background-size:cover;
  background-position:center;
}

/* subtle overlay for readability */
.arvikahq-click-hero .hero-overlay{
  position:absolute;inset:0;background:linear-gradient(180deg, rgba(230,223,255,0.2), rgba(230,223,255,0.2));backdrop-filter: blur(0.2px);
}

.arvikahq-click-hero .hero-content{position:relative;z-index:2;max-width:920px;padding:20px}

.hero-title{
  font-size: clamp(1.6rem, 3.6vw, 2.6rem);
  color:var(--accent);
  margin-bottom:12px;
  text-wrap:balance;
  -webkit-text-stroke: 0.2px rgba(0,0,0,0.06);
}

.hero-sub{
  font-size:1.05rem;
  color:var(--text);
  max-width:780px;margin:0 auto 22px;
}

/* hero button */
.btn-arvikahq{
  background:var(--accent);
  color:var(--btn-text);
  border:none;
  padding:12px 28px;
  border-radius:10px;
  font-weight:700;
  transition:background .22s ease, transform .12s ease;
}

.btn-arvikahq:hover{background:var(--btn-hover);color:var(--btn-text);transform:translateY(-2px)}

/* outline button */
.btn-outline-arvikahq{
  background:transparent;
  border:2px solid var(--accent);
  color:var(--accent);
  padding:10px 22px;
  border-radius:10px;
  font-weight:600;
}

/* Disclaimer Short Card */
.arvikahq-disclaimer-card {
  background: #ffffff;
  border: 2px solid #831b1b;
  border-radius: 14px;
  padding: 2rem;
  color: #313131;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.arvikahq-disclaimer-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}

/* Disclaimer Title */
.disclaimer-title {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  font-size: 1.75rem;
  font-weight: 700;
  color: #831b1b;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-shadow: -1px -1px 0 #e6dfff, 1px -1px 0 #e6dfff,
               -1px 1px 0 #e6dfff, 1px 1px 0 #e6dfff;
}

/* Disclaimer Text */
.disclaimer-text {
  font-size: 1.05rem;
  line-height: 1.65;
  color: #313131;
  max-width: 720px;
  margin: 0 auto;
}

/* Outline Button */
.btn-outline-arvikahq {
  display: inline-block;
  padding: 0.6rem 1.4rem;
  border: 2px solid #831b1b;
  border-radius: 8px;
  background: transparent;
  color: #831b1b;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  transition: all 0.3s ease;
}

.btn-outline-arvikahq:hover {
  background: #831b1b;
  color: #e6dfff;
  border-color: #831b1b;
}

/* Games Section */
.arvikahq-click-play {
  background: #e6dfff;
  padding: 4rem 1rem;
}

.arvikahq-click-play .section-title {
  font-size: 2rem;
  font-weight: 700;
  color: #831b1b;
  text-align: center;
  margin-bottom: 2rem;
  text-shadow: -1px -1px 0 #ffffff, 1px -1px 0 #ffffff,
               -1px 1px 0 #ffffff, 1px 1px 0 #ffffff;
}

/* Single Column Grid */
.games-grid {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  max-width: 900px;
  margin: 0 auto;
}

/* Game Card */
.arvikahq-game-card {
  background: #ffffff;
  border: 2px solid #831b1b;
  border-radius: 12px;
  padding: 1rem;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.arvikahq-game-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

/* Responsive 16:9 Frame */
.game-frame {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 aspect ratio */
  overflow: hidden;
  border-radius: 8px;
}

.game-frame iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 8px;
}

/* -----------------------
   FEATURES - 4 Cards in Single Row
------------------------*/
.arvikahq-click-features {
  padding: 60px 0;
  background: #e6dfff;
}

.arvikahq-click-features .features-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4 equal columns */
  gap: 24px;
  max-width: 1100px;
  margin: 0 auto;
}

/* Feature Card */
.feature-card {
  background: #fff;
  border-radius: 14px;
  padding: 28px 22px;
  min-height: 220px;
  border: 2px solid rgba(131, 27, 27, 0.15);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.feature-card:hover {
  transform: translateY(-8px);
  border-color: #831b1b;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12);
}

.feature-icon {
  font-size: 36px;
  color: #831b1b;
  margin-bottom: 14px;
}

.feature-card h4 {
  font-size: 1.25rem;
  font-weight: 700;
  color: #313131;
  margin-bottom: 10px;
}

.feature-card p {
  font-size: 0.95rem;
  color: #555;
  line-height: 1.5;
  margin: 0;
}

/* Responsive: stack on small screens */
@media (max-width: 992px) {
  .arvikahq-click-features .features-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 576px) {
  .arvikahq-click-features .features-row {
    grid-template-columns: 1fr;
  }
}

/* -----------------------
   ABOUT
------------------------*/
.arvikahq-about-img{max-width:420px;border-radius:12px}

/* -----------------------
   REVIEWS
------------------------*/
.arvikahq-click-reviews {
  background: #faf9ff;
}

.review-card {
  background: #fff;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,0.08);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  text-align: center;
}

.review-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 28px rgba(0,0,0,0.12);
}

.review-stars {
  font-size: 1rem;
  color: #f5b400;
  letter-spacing: 2px;
}

.review-text {
  font-size: 1rem;
  line-height: 1.6;
  color: #333;
  margin-bottom: 14px;
}

.reviewer-name {
  font-size: 0.9rem;
  color: #555;
  font-weight: 600;
}

/* Alternate background accent for style-a / style-b */
.review-card.style-a {
  border-top: 4px solid #6c63ff;
}

.review-card.style-b {
  border-top: 4px solid #ff6b6b;
}

/* -----------------------
   CONTACT FORM
------------------------*/
.arvikahq-click-contact{
  background:transparent;
  padding:8px;
  border-radius:10px;
}

.arvikahq-click-input{
  background:#fff;
  border:1px solid rgba(131,27,27,0.08);
  color:var(--text);
  padding:12px 14px;
  border-radius:8px;
  transition:box-shadow .18s ease, border-color .18s ease;
}

.arvikahq-click-input::placeholder{color:#8a7a8a}

.arvikahq-click-input:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 6px 20px rgba(131,27,27,0.06);
}

/* submit button handled above (.btn-arvikahq) */

/* -----------------------
   FOOTER
------------------------*/
.arvikahq-click-footer{
  padding:40px 20px;
  background:transparent;
  color:var(--text);
}

.arvikahq-click-footer-logo{max-height:56px;margin-bottom:8px}
.arvikahq-click-footer-links a{color:var(--text);font-weight:600}
.arvikahq-click-footer-links a:hover{color:var(--accent)}
.arvikahq-click-footer-disclaimer{
  background:rgba(131,27,27,0.03);
  border-radius:10px;padding:18px;margin:10px auto;text-align:center;
  border:1px solid rgba(131,27,27,0.06)
}
.disclaimer-heading{color:var(--accent);font-weight:700;margin-bottom:6px}
.disclaimer-text{color:var(--text)}

/* -----------------------
   DISCLAIMER POPUP
------------------------*/
.arvikahq-click-disclaimer-overlay{
  position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  background: rgba(49,49,49,0.6);
  z-index:3000;opacity:0;visibility:hidden;transition:opacity .28s ease, visibility .28s;
}

.arvikahq-click-disclaimer-overlay.active{opacity:1;visibility:visible}

.arvikahq-click-disclaimer-popup{
  background:#fff;color:var(--text);padding:24px;border-radius:12px;max-width:560px;
  box-shadow:0 18px 40px rgba(19,19,19,0.12);text-align:center;
}

.popup-title{color:var(--accent);font-size:1.25rem;margin-bottom:8px}
.popup-text{color:var(--text);font-size:0.98rem;line-height:1.45}

/* Leave button */
.btn-arvikahq-leave{
  background:transparent;border:2px solid rgba(49,49,49,0.08);color:var(--text);
  padding:10px 18px;border-radius:8px;font-weight:700;
}
.btn-arvikahq-leave:hover{background:var(--btn-hover);color:var(--btn-text);border-color:var(--btn-hover)}

/* -----------------------
   SCROLL TO TOP
------------------------*/
.arvikahq-click-scroll-top{
  position:fixed;right:22px;bottom:22px;width:46px;height:46px;border-radius:50%;
  background:var(--accent);color:var(--btn-text);display:none;align-items:center;justify-content:center;border:none;z-index:1500;
  font-size:18px;cursor:pointer;
}
.arvikahq-click-scroll-top:hover{transform:scale(1.05);background:var(--btn-hover);color:var(--btn-text)}

/* -----------------------
   Responsive
------------------------*/
@media (max-width: 992px){
  .games-grid{grid-template-columns: 1fr 1fr}
  .arvikahq-click-hero{height:70vh}
}

@media (max-width: 720px){
  .games-grid{grid-template-columns: 1fr}
  .feature-card{min-height:unset}
  .arvikahq-click-hero{height:60vh;padding:24px}
  .arvikahq-click-navbar .container{padding:0 10px}
  .arvikahq-click-logo{max-height:56px}
}

/* small adjustments to ensure accessible contrast */
@media (prefers-reduced-motion: reduce){
  *{transition:none!important}
}


/* -----------------------
   LEGAL PAGES
------------------------*/
.arvikahq-click-legal {
  background: #e6dfff;
  color: #313131;
  font-size: 1rem;
  line-height: 1.7;
  text-align: left; /* default for paragraphs */
}

.legal-heading {
  font-size: 2.2rem;
  color: #831b1b;
  text-shadow: 1px 1px 0 #e6dfff;
  border-bottom: 2px solid #831b1b;
  display: inline-block;
  padding-bottom: 6px;
  margin: 0 auto 20px auto;
  text-align: center;
}

.arvikahq-click-legal h1 {
  text-align: center; /* ensures the main heading centers */
}

.legal-subheading {
  font-size: 1.3rem;
  color: #831b1b;
  margin-bottom: 0.5rem;
}

.arvikahq-click-legal p {
  margin-bottom: 1.2rem;
}