/* Exparily.digital — main stylesheet
   Colors & variables follow the brand you provided:
   Headings: #81d5ff
   Text: #d9f2ff
   Accents/buttons: #81d5ff
   Button text: #313131
   Button hover: #d9f2ff
   Background: #313131
*/

:root{
  --bg: #313131;
  --heading: #81d5ff;
  --text: #d9f2ff;
  --accent: #81d5ff;
  --btn-text: #313131;
  --btn-hover: #d9f2ff;
  --muted: rgba(217,242,255,0.75);
  --card-bg: rgba(255,255,255,0.03);
  --glass: rgba(255,255,255,0.04);
  --radius: 14px;
  --container-max: 1200px;
  --font-sans: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

*{box-sizing:border-box}
html,body{
  height:100%;
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family: var(--font-sans);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.5;
  font-size:16px;
}

/* Headings */
.exparily-digital h1,
.exparily-digital h2,
.exparily-digital h3,
.exparily-digital h4,
.exparily-digital h5 {
  color: #81d5ff;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 1rem;
  text-transform: none;
  letter-spacing: 0.5px;
  text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

.exparily-digital h1 {
  font-size: 2.8rem;
}

.exparily-digital h2 {
  font-size: 2.2rem;
}

.exparily-digital h3 {
  font-size: 1.8rem;
}

.exparily-digital h4 {
  font-size: 1.5rem;
}

.exparily-digital h5 {
  font-size: 1.2rem;
}

/* Section titles (extra emphasis) */
.exparily-digital-section-title {
  font-size: 2.4rem;
  font-weight: 800;
  color: #81d5ff;
  margin-bottom: 2rem;
  position: relative;
  display: inline-block;
}

.exparily-digital-section-title::after {
  content: "";
  display: block;
  width: 60px;
  height: 3px;
  background: #81d5ff;
  margin: 0.6rem auto 0;
  border-radius: 2px;
}

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

/* =====================
   Navbar
===================== */
.exparily-digital-navbar {
  background: #222;
  border-bottom: 2px solid #81d5ff;
}

.exparily-digital-navbar .navbar-brand img {
  max-height: 80px;
}

.exparily-digital-navbar .nav-link {
  color: #d9f2ff;
  font-weight: 500;
  padding: 0.5rem 1rem;
  transition: all 0.3s ease;
  border-radius: 6px;
}

.exparily-digital-navbar .nav-link:hover {
  background: rgba(129, 213, 255, 0.15);
  color: #81d5ff;
}

.exparily-digital-navbar .nav-link.active {
  color: #313131;
  background: #81d5ff;
  font-weight: 700;
}

/* Hero */
.exparily-digital-hero {
  padding: 64px 0;
  height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  text-align: center;
  background: url("../images/hero.jpg") center/cover no-repeat; /* Replace with your image */
}

.exparily-digital-hero-content{
  max-width:900px;
  margin:0 auto;
  padding:28px;
}
.exparily-digital-hero-heading{
  font-size:clamp(1.6rem, 3.6vw, 2.6rem);
  color:var(--heading);
  margin:0 0 12px 0;
  font-weight:700;
  letter-spacing: -0.02em;
}
.exparily-digital-hero-text{
  color:var(--muted);
  font-size:1.05rem;
  margin-bottom:18px;
}

/* Buttons */
.exparily-digital-btn{
  display:inline-block;
  padding:.65rem 1.05rem;
  border-radius:10px;
  background:var(--accent);
  color:var(--btn-text);
  font-weight:700;
  border:1px solid transparent;
  text-decoration:none;
  transition: background .12s ease, transform .08s ease, box-shadow .08s ease;
  box-shadow: 0 6px 18px rgba(12,18,22,0.12);
}
.exparily-digital-btn:hover,
.exparily-digital-btn:focus{
  background:var(--btn-hover);
  color:var(--btn-text);
  transform:translateY(-2px);
  outline:none;
}
.exparily-digital-btn:active{ transform:translateY(0) }

.exparily-digital-btn-outline{
  background:transparent;
  border:1px solid rgba(255,255,255,0.06);
  color:var(--muted);
  padding:.6rem 1rem;
  border-radius:10px;
}
.exparily-digital-btn-outline:hover{
  background:rgba(255,255,255,0.02);
  color:var(--accent);
  border-color:rgba(129,213,255,0.15);
}

/* Small components */
.exparily-digital-section-title{
  color:var(--heading);
  font-weight:700;
  margin-bottom:8px;
}
.exparily-digital-lead{ color:var(--muted); margin-top:6px; }

/* Brief disclaimer card */
.exparily-digital-brief-card{
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border-radius:var(--radius);
  border: 1px solid rgba(255,255,255,0.03);
  box-shadow:0 8px 24px rgba(0,0,0,0.35);
}
.exparily-digital-disclaimer-text{ color:var(--muted); font-size:1rem; }



/* Feature cards */
.exparily-digital-feature-card{
  background:var(--glass);
  color:var(--text);
  border-radius:12px;
  transition: transform .12s ease, box-shadow .12s ease;
}
.exparily-digital-feature-card:hover{
  transform:translateY(-6px);
  box-shadow:0 16px 40px rgba(0,0,0,0.45);
}
.exparily-digital-feature-card h4{ color:var(--heading); margin-bottom:8px; }

/* About */
.exparily-digital-about-image-wrapper{ max-width:500px; margin:0 auto; }
.exparily-digital-about-img{ width:100%; height:auto; display:block; }

/* Reviews */
.exparily-digital-review-card {
  background: rgba(255, 255, 255, 0.05); /* subtle transparent background */
  border-radius: 16px;
  padding: 24px;
  color: var(--text);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  backdrop-filter: blur(6px); /* glass effect */
}

.exparily-digital-review-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

.exparily-digital-review-card i {
  color: var(--accent);
  font-size: 1.4rem;
  margin-bottom: 12px;
}

.exparily-digital-review-card p {
  line-height: 1.6;
  font-size: 1rem;
  color: var(--text);
}

.exparily-digital-review-card .review-author {
  margin-top: 16px;
  font-weight: 600;
  color: var(--accent);
  font-size: 0.95rem;
}

/* Footer */
.exparily-digital-footer{
  padding-top:32px;
  padding-bottom:48px;
  background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(0,0,0,0.03));
  border-top:1px solid rgba(255,255,255,0.02);
}
.exparily-digital-footer-logo{ height:80px; width:auto; display:inline-block; }
.exparily-digital-footer-link{ color:var(--muted); text-decoration:none; font-weight:600; }
.exparily-digital-footer-link:hover{ color:var(--accent); text-decoration:underline; }
.exparily-digital-footer-heading{ color:var(--heading); font-weight:700; }
.exparily-digital-footer-text{ color:var(--muted); max-width:820px; margin:0 auto; }

/* Popup / Age overlay */
.exparily-digital-popup-overlay {
  position: fixed;
  inset: 0;
  display: none; /* controlled by JS */
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.9); /* slightly transparent */
  backdrop-filter: blur(8px);       /* background blur */
  -webkit-backdrop-filter: blur(8px); /* Safari support */
  z-index: 1200;
  padding: 20px;
}

.exparily-digital-popup-card{
  max-width:720px;
  width:100%;
  background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border-radius:12px;
  padding:28px;
  border:1px solid rgba(255,255,255,0.03);
  box-shadow:0 12px 36px rgba(0,0,0,0.6);
}
.exparily-digital-popup-card h2{ color:var(--heading); }
.exparily-digital-popup-card p{ color:var(--muted); }

/* Scroll top */
.exparily-digital-scroll-top{
  display:none;
  position:fixed;
  right:18px;
  bottom:18px;
  width:44px;
  height:44px;
  border-radius:8px;
  background:var(--accent);
  color:var(--btn-text);
  border:none;
  box-shadow:0 8px 20px rgba(0,0,0,0.4);
  font-size:1.1rem;
  cursor:pointer;
  z-index:1000;
}

/* Responsive tweaks */
@media (max-width:767px){
  .exparily-digital-hero{ padding:40px 0; min-height:46vh; }
  .exparily-digital-hero-content{ padding:16px; }
  .exparily-digital-feature-card{ padding:18px; }
  .exparily-digital-brief-card{ padding:18px; }
}

/* Accessibility & focus states */
a, button{ outline-color: rgba(129,213,255,0.28); }
a:focus, button:focus { box-shadow:0 0 0 4px rgba(129,213,255,0.08); border-radius:10px; }

/* Forms (if you add later) */
input, textarea, select{
  background: rgba(255,255,255,0.02);
  color:var(--text);
  border:1px solid rgba(255,255,255,0.04);
  padding:.6rem .8rem;
  border-radius:10px;
}

/* Small prints */
.small { font-size:.9rem; color:var(--muted) }


/* Contact Section */
.exparily-digital-contact {
  background: #313131;
  color: #d9f2ff;
  padding: 60px 0;
}

/* Force Section Title Center */
.exparily-digital-contact .exparily-digital-section-title {
  display: block;
  width: 100%;
  text-align: center !important;
  font-size: 2.4rem;
  font-weight: 700;
  color: #81d5ff;
  margin-bottom: 1rem;
  line-height: 1.3;
}


.exparily-digital-highlight {
  color: #d9f2ff;
}

/* Intro Paragraph */
.exparily-digital-contact-intro {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 2rem auto;
  font-size: 1.1rem;
  line-height: 1.6;
  color: #d9f2ff;
}

/* Contact Card */
.exparily-digital-contact-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px); /* Safari */
  border-radius: 16px;
}

/* Labels */
.exparily-digital-contact-card label {
  color: #d9f2ff;
  font-weight: 500;
}

/* Inputs & Textarea */
.exparily-digital-contact-card .form-control {
  background: rgba(255, 255, 255, 0.08);
  border: none;
  color: #d9f2ff;
  border-radius: 8px;
}

.exparily-digital-contact-card .form-control:focus {
  outline: none;
  box-shadow: 0 0 0 2px #81d5ff;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

/* Button */
.exparily-digital-btn {
  background: #81d5ff;
  color: #313131;
  font-weight: 600;
  padding: 12px 32px;
  border: none;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.exparily-digital-btn:hover {
  background: #d9f2ff;
  color: #313131;
}

/* Force all section titles (including legal pages) to center */
section .exparily-digital-section-title {
  display: block;
  width: 100%;
  text-align: center !important;
  font-size: 2.4rem;
  font-weight: 700;
  color: #81d5ff;
  margin-bottom: 2rem;
}



/* Legal Sections */
.exparily-digital-legal {
  background: #313131;
  color: #d9f2ff;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.exparily-digital-legal-text {
  font-size: 1.1rem;
  line-height: 1.8;
  color: #d9f2ff;
}

.exparily-digital-legal-text h4 {
  color: #81d5ff;
  font-size: 1.4rem;
  margin-top: 2rem;
  margin-bottom: 0.75rem;
  font-weight: 600;
}

.exparily-digital-legal-text p {
  margin-bottom: 1.5rem;
}

.exparily-digital-legal strong {
  color: #81d5ff;
}