/*
Theme Name: Lambo
Theme URI: http://lamboxtra.com
Author: theMedia 360 Dev Team
Author URI: http://themedia360.info/
Description: Responsive, clean, light and fast WordPress theme.
Version: 2.0
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: lambo
*/


@import "https://lamboxtra.com/wp-content/themes/lambo/assets/css/tokens.css";
@import "https://lamboxtra.com/wp-content/themes/lambo/assets/css/components.css";

body{
  margin:0;
  padding:0;
  /*overflow-x:hidden;*/
	
  background-color:#1a1b22; /* same dark background */
  color:#ffffff;

  font-family:Arial, sans-serif; /* or your chosen font */
}

body.overlay-open {
  overflow: hidden;
  height: 100vh;
}
		  
.site-wrapper{
  display:flex;
  flex-direction:column;
  min-height:100vh;
}
		  
/* ===============================
   HEADER BASE
================================ */

.site-header{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  z-index:999;
  transition:all 0.35s ease;
}

.homepage {   /* use the class your homepage body has */
  overflow-x: hidden;
}
		  
.header-container{
  max-width:1400px;
  margin:0 auto;
  padding:0 40px;
}

/* RIGHT ACTIONS */
.header-left{
  justify-self:start;
}
		  
.header-right{
  display:flex;
  align-items:center;
  gap:18px;
  justify-self:end;   /* pushes to extreme right */
}

/* Transparent initial state */
.site-header{
  background:transparent;
}

/* Background appears on scroll */
.site-header.scrolled{
  background:#21222b;
  box-shadow:0 2px 10px rgba(0,0,0,0.25);
}


/* ===============================
   HEADER INNER
================================ */

.header-inner{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  height:70px;
}

/* ===============================
   LOGO
================================ */

.logo a{
  font-size:22px;
  font-weight:700;
  color:white;
  text-decoration:none;
}

/* ===============================
   NAVIGATION
================================ */

.main-nav{
  display:flex;
  gap:32px;
  justify-self:center;
}

.main-nav a{
  color:white;
  text-decoration:none;
  font-size:15px;
  opacity:0.85;
  transition:0.25s ease;
  display:flex;
  align-items:center;
}

.main-nav a:hover{
  opacity:.7;
}
		  
.nav-highlight{
  border:1px solid #18c964;
  padding:4px 10px;
  color:#18c964;
}


/* ===============================
   RIGHT ACTIONS
================================ */

.header-actions{
  display:flex;
  align-items:center;
  gap:18px;
}


/* Search icon */

.search-icon{
  color:white;
  cursor:pointer;
  font-size:16px;
}


/* SHOP BUTTON (NO RADIUS) */

.hd-shop-btn{
  background:#18c964;
  color:white;
  padding:10px 18px;
  font-size:14px;
  font-weight:600;
  text-decoration:none;
  border-radius:0;
  transition:0.25s ease;
}

.hd-shop-btn:hover{
  background:#14b356;
}


/* Avatar placeholder */

.admin-avatar{
  width:32px;
  height:32px;
  border-radius:50%;
  background:url('https://i.pravatar.cc/100') center/cover;
}
		  
		  
/* HERO */
.hero{
  position:relative;
  /*width:100vw;
  margin-left:calc(50% - 50vw);*/
  width:100%;
  margin-left:0;
  min-height:75vh;
  overflow:hidden;
  padding-bottom:30px;
}
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(
    90deg,
    rgba(0,0,0,.15) 0%,
    rgba(0,0,0,.35) 45%,
    rgba(0,0,0,.85) 100%
  );
  z-index:2;
  pointer-events:none;
}
.hero-bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 20%;
  z-index:1;
}

/* Move content up */
.hero-inner{
  position:absolute;
  right:80px;
  bottom:140px;
  max-width:520px;
  z-index:5;
}
.hero-content{
  color:white;
  text-align:right;
  display:flex;
  flex-direction:column;
  gap:14px;   /* controls spacing cleanly */
}
.hero-title a {
  color:white;
  /*font-size: 32px;*/
  font-size:clamp(28px, 3.5vw, 42px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-decoration: none;
  margin:0;
  max-width:22ch;   /* forces ~2 lines */
  transition:.25s ease;
}
.hero-title a:hover{
  opacity: 0.7;
}
.hero-excerpt{
  font-size:14px;
  opacity:.85;
  margin:0;
}

/* Magazine cover center-left */
.magazine-cover{
  position:absolute;
  left:60px;
  top:50%;
  transform:translateY(-50%) rotate(-3deg);
  width:170px;
  z-index:7;
  box-shadow:
    0 30px 60px rgba(0,0,0,.45),
    0 6px 10px rgba(0,0,0,.25);
}

/* PINNED STRIP */
.floating-strip{
  bottom:0;
  left:0;
  width:100%;
  z-index:6;
  position:absolute;
}

.strip-inner {
  max-width:1200px;
  margin:0 auto;
  padding:0 60px;
}
	
.strip-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 60px;
}

.strip-item a {
  color: white;
  text-decoration: none;
}

.strip-item a:hover{
  opacity: 0.7;
}

.strip-item hr {
  border: none;
  border-top: 1px solid rgba(255,255,255,0.5);
  margin-bottom: 14px;
}

.strip-item span {
  font-size: 12px;
  opacity: 0.7;
}

.strip-item h3 {
  margin-top: 10px;
  font-size: 16px;
}

/* IT GIRL SECTION */

.it-girl {
  padding:40px 40px 40px;
  margin-top: 25px;
  color:white;
}
.it-girl h2 {
  text-align:left;
  max-width:1000px;
  margin:0 auto 20px;
  padding:0 6px;
  color:white;
}

.editorial-grid {
  max-width:1000px;
  margin:30px auto 0;
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:30px;
  justify-items:center;
}

.ms-card {
  width: 150px;     /* ← controls image size */
  text-align: center;
}

.ms-card img {
  width:100%;
  height:200px;
  object-fit:cover;
  display:block;
}

.ms-card h3 {
  font-size:13px;
  margin-top:30px;
  line-height:1.4;
}

.ms-card a {
  color: white;
  text-decoration: none;
}

.ms-card a:hover{
  opacity: 0.7;
}
/* RESPONSIVE */
@media (max-width: 1024px) {
  .sh-grid {
    grid-template-columns: repeat(3,1fr);
  }
}

@media (max-width: 768px) {
  .strip-grid {
    grid-template-columns: 1fr;
  }

  .sh-grid {
    grid-template-columns: repeat(2,1fr);
  }

  .hero-content {
    right: 20px;
    left: 20px;
    text-align: left;
  }
}

/* ===============================
   FEATURED SECTION
================================ */

.featured-section{
  max-width:1100px;
  margin:70px auto 40px auto;
  padding:0 40px;
}


/* ===============================
   TOP FEATURED STORY
================================ */

.featured-main{
  display:grid;
  grid-template-columns:1.3fr 1fr;
  gap:0;
  align-items:center;
  position:relative;
  margin-bottom:40px; /* spacing before grid */
}


/* Featured Image */

.featured-image{
  position:relative;
  z-index:1;
}

.featured-image img{
  width:100%;
  height:380px;
  object-fit:cover;
  display:block;
}

.featured-content a {
  color: white;
  text-decoration: none;
}

.featured-content a:hover{
  opacity: 0.7;
}

.featured-card a {
  color: white;
  text-decoration: none;
}

.featured-card a:hover{
  opacity: 0.7;
}
/* Right Panel */

.featured-content{
  background:#21222b;
  padding:50px 60px;

  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;   /* center horizontally */

  text-align:center;
  transform:translateY(-20px);

  position:relative;
  z-index:2;

  width:120%;        /* expand panel width */
  margin-left:-20%;  /* keep left alignment balance */
  margin-top: 50px;
}


/* Tag Label */

.tag{
  background:#12B83A;
  color:#fff;
  font-size:12px;
  padding:4px 10px;
  font-weight:600;
  margin-bottom:10px;
}


/* Title */

.featured-content h2{
  font-size:32px;
  line-height:1.1;
  margin-bottom:20px;
  max-width:700px;
}


/* Meta Info */

.meta{
  font-size:12px;
  letter-spacing:1px;
  color:#666;
}

.meta span{
  display:block;
}


/* ===============================
   FEATURED GRID
================================ */

.featured-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:40px;
}


/* Cards */

.featured-card{
  display:flex;
  flex-direction:column;
}


/* Card Image */

.featured-card img{
  width:100%;
  height:160px;
  object-fit:cover;
  margin-bottom:15px;
}


/* Card Title */

.featured-card h3{
  font-size:16px;
  line-height:1.4;
  margin-bottom:10px;
}


/* Author */

.author{
  font-size:11px;
  letter-spacing:1px;
  color:#888;
}


/* ===============================
   RESPONSIVE
================================ */

@media (max-width:1024px){
  .featured-main{
    grid-template-columns:1fr;
  }
/*
  .featured-content{
    transform:none;
    align-items:flex-start;
    text-align:left;
  }
*/
  .featured-grid{
    grid-template-columns:repeat(2,1fr);
  }

}

@media (max-width:600px){

  .featured-grid{
    grid-template-columns:1fr;
  }

}
	
/* ===============================
   NEWSLETTER SECTION
================================ */

.newsletter{
  width:100%;
  background:inherit;
  border-top:1px solid rgba(255,255,255,0.2);
  border-bottom:1px solid rgba(255,255,255,0.2);
  /*margin-top:40px;*/
}


/* INNER CONTAINER */

.newsletter-inner{
  max-width:900px;
  margin:0 auto;
  padding:30px 40px;

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:60px;
}


/* LOGO */

.newsletter-logo h2{
  color:white;
  font-size:36px;
  font-weight:700;
  margin:0;
}


/* CENTER TEXT */

.newsletter-text{
  color:white;
  font-size:16px;
  letter-spacing:2px;
  text-transform:uppercase;
  text-align:center;
  flex:1;
  line-height:1.4;
}


/* BUTTON */

.newsletter-btn{
  background:#18c964;
  color:white;
  padding:14px 28px;
  text-decoration:none;
  font-weight:600;
  font-size:16px;
  display:inline-block;
  transition:all 0.25s ease;
}

.newsletter-btn:hover{
  opacity: 0.7;
}



	
/* ===============================
   LATEST POSTS SECTION
================================ */

.latest-posts{
  max-width:1200px;
  margin:40px auto;
  padding:0 40px;
}


/* ===============================
   GRID LAYOUT (3 PER ROW)
================================ */

.latest-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:30px 40px; /* vertical / horizontal spacing */
}


/* ===============================
   CARD
================================ */

.latest-card{
  display:flex;
  flex-direction:column;
  align-items:flex-end; /* pushes text to right side */
  text-align:right;
}


/* ===============================
   IMAGE
================================ */

.latest-card img{
  width:100%;
  height:240px;      /* uniform height for clean grid */
  object-fit:cover;
  display:block;
}


/* ===============================
   AUTHOR NAME (small label)
================================ */

.latest-author{
  margin-top:14px;
  font-size:12px;
  letter-spacing:2px;
  text-transform:uppercase;
  color:#aaa;
}


/* ===============================
   TITLE
================================ */

a.latest-title{
  margin-top:6px;
  font-size:18px;
  line-height:1.4;
  font-weight:500;
  transition: all .25s ease;
  text-decoration: none;
}

a.latest-title:hover{
  opacity: 0.7;
  cursor: pointer;
}

/* ===============================
   RESPONSIVE
================================ */

@media(max-width:1024px){

  .latest-grid{
    grid-template-columns:repeat(2,1fr);
  }

}

@media(max-width:600px){

  .latest-grid{
    grid-template-columns:1fr;
  }

}
	
.latest-readmore{
  display:flex;
  justify-content:center;
  margin-top:60px;
}

.readmore-btn{
  background:#18c964;
  color:white;
  padding:22px 70px;
  font-size:22px;
  letter-spacing:3px;
  text-decoration:none;
  font-weight:600;
  text-transform:uppercase;
  display:inline-block;
  transition:all 0.25s ease;
}

.readmore-btn:hover{
  color:white;
  transform:translateY(-3px);
  box-shadow:0 12px 25px rgba(0,0,0,0.3);
}


:root{
  --editorial-blue:#2f6f73; /* adjust slightly if needed */
}
/* PAGE WRAPPER */

.issue-layout{
  background:#efe6a8;
  padding:80px 0;
  color:#1a1b22;
  font-family:Arial, sans-serif;
}


/* TOP GRID */

.issue-top{
  display:grid;
  grid-template-columns: 1fr 1fr;
  align-items:start;   /* ⭐ KEY FIX */
}


/* LEFT IMAGE */

.issue-image-large img{
  width:100%;
  height:100%;
  object-fit:cover;
}


/* RIGHT ARTICLE */
.issue-header{
  text-align:center;   /* ⭐ centers ONLY header text */
  margin-bottom:50px;
}


/* BODY TEXT stays editorial */

.issue-columns{
  text-align:left;
}

.issue-article{
  padding:80px;
  display:block;   /* NOT flex */
}

.intro::first-letter{

  font-size:90px;          /* big editorial letter */
  line-height:0.8;
  float:left;              /* makes text wrap around */

  margin-right:12px;
  margin-top:10px;
  color:var(--editorial-blue);
  font-weight:600;
}

/* TYPOGRAPHY */
@import url('https://fonts.googleapis.com/css2?family=Pacifico&display=swap');
.issue-title{
  font-size:64px;
  font-family:'Pacifico', cursive;
  font-weight:600;
  color:var(--editorial-blue);
  margin-bottom:20px;
}

.issue-subtitle{
  font-size:18px;
  margin-bottom:20px;
}

.issue-author{
  font-size:12px;
  letter-spacing:0.08em;
  margin-bottom:40px;
}


/* TWO COLUMN TEXT */

.issue-columns{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px;
  line-height:1.7;
}


/* BOTTOM SECTION */

.issue-bottom{
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:start;   /* ⭐ KEY FIX */
  margin-top:80px;
}



/* BOTTOM IMAGE */

.issue-image-bottom{
  width:100%;
}

.issue-image-bottom img{
  width:100%;
  height:auto;     /* ⭐ REMOVE height:100% */
  display:block;
}


/* QUOTE BLOCK */

.issue-quote-block{
  padding:0 80px;
}

.issue-quote-block blockquote{
  font-size:22px;
  line-height:1.5;
  margin-bottom:30px;
  border-left:4px solid var(--editorial-blue);
  padding-left:20px;
  font-weight:600;
}
	
/* FOOTER WRAPPER */

.issue-footer{
  padding:80px 20px;
  text-align:center;
}


/* CENTER CONTENT */

.issue-footer-inner{
  max-width:900px;
  margin:0 auto;
}


/* PURCHASE BUTTON */

.purchase-btn{
  display:inline-block;
  background:#18c964;
  color:white;
  padding:18px 36px;
  text-decoration:none;
  font-size:14px;
  letter-spacing:0.1em;
  font-weight:600;
  transition:0.25s ease;
}

.purchase-btn:hover{
  background:#14b356;
}


/* COPYRIGHT TEXT */

.co-footer-copyright{
  margin-top:25px;
  font-size:12px;
  opacity:0.7;
}

/* =========================
   FOOTER
========================= */

.site-footer{
  color:#fff;
  padding:80px 60px;
}


/* CONTAINER */

.footer-container{
  max-width:1400px;
  margin:auto;

  display:grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr;
  gap:60px;
}

.site-footer::before{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:1px;
background:rgba(255,255,255,0.12);
}

/* BRAND SECTION */

.footer-brand{
  display:flex;
  flex-direction:column;
  gap:30px;
}

.footer-logo{
  max-width:150px;
  height:auto;
}

/* LANGUAGE SELECT */

.language-switcher{
  position:relative;
  width:180px;
  cursor:pointer;
  font-size:14px;
}

.lang-current{
  background:#1e2028;
  border:1px solid rgba(255,255,255,.08);
  padding:12px 16px;
  border-radius:8px;
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.lang-current::after{
  content:"▾";
  font-size:12px;
  opacity:.6;
}

.lang-dropdown{
  position:absolute;
  top:110%;
  left:0;
  width:100%;
  background:#1e2028;
  border-radius:8px;
  box-shadow:0 10px 30px rgba(0,0,0,.4);
  display:none;
  padding:10px 0;
  z-index:20;
}

.lang-dropdown div{
  padding:10px 16px;
  transition:.2s;
}

.lang-dropdown div:hover{
  background:rgba(255,255,255,.05);
}

.language-switcher.active .lang-dropdown{
  display:block;
}

/* COLUMNS */

.footer-column{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.footer-column h4{
  font-size:18px;
  font-weight:600;
  margin-bottom:10px;
  opacity:0.8;
}

.footer-column a{
  text-decoration:none;
  color:#d1d1d1;
  font-size:15px;
  transition:0.2s;
}

.footer-column a:hover{
  color:white;
}


/* SOCIAL */

.footer-social .social-icons{
  display:flex;
  gap:14px;
  margin-top:10px;
}

.social-icons a{
  width:32px;
  height:32px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,255,255,0.2);
  text-decoration:none;
  color:white;
}

.footer-divider{
border:none;
height:1px;
background:rgba(255,255,255,0.12);
margin-bottom:60px;
}

.site-footer{
/*margin-top:120px;*/
}



/* =========================
   RESPONSIVE
========================= */

@media(max-width:1000px){

.footer-container{
  grid-template-columns:1fr 1fr;
  gap:40px;
}

}

@media(max-width:600px){

.footer-container{
  grid-template-columns:1fr;
}

}

.cookie-box{
  position:fixed;
  right:30px;
  bottom:30px;
  max-width:360px;
  background:rgb(33, 34, 43);
  color:#fff;
  padding:24px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 20px 50px rgba(0,0,0,.35);

  transform:translateY(120px);
  opacity:0;
  visibility:hidden;
  transition:all .45s cubic-bezier(.22,.9,.3,1);
  z-index:9999;
}

/* 🔥 FIX HERE */
.cookie-box.show {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
}


/* Visible state */
.cookie-box.active{
  transform:translateY(0);
  opacity:1;
  visibility:visible;
}

/* Fade out state */
.cookie-box.fade-out{
  transform:translateY(20px);
  opacity:0;
}

.cookie-box p{
  margin-bottom:16px;
  color:#ccc;
}

.cookie-box a{
  color:#18c964;
}

.cookie-box a:hover{
  opacity:0.7;
}

.cookie-actions{
  display:flex;
  gap:10px;
}

.cookie-accept{
  flex:1;
  background:#18c964;
  color:#fff;
  border:none;
  padding:10px;
  cursor:pointer;
  font-weight:600;
}

.cookie-accept:hover{
  opacity:0.7;
}

.cookie-decline{
  flex:1;
  background:transparent;
  border:1px solid rgba(255,255,255,.2);
  color:#fff;
  padding:10px;
  cursor:pointer;
}

.cookie-decline:hover{
  background:#ddd;
  opacity:0.7;
}

@keyframes fadeIn{
  from{opacity:0; transform:translateY(10px);}
  to{opacity:1; transform:translateY(0);}
}

/* =====================================
   FULLSCREEN OVERLAY SYSTEM
===================================== */

.fullscreen-overlay {
  position: fixed;
  inset: 0;
  background: rgba(26,27,34,0.92);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  z-index: 9999;

  display: flex;
  align-items: center;
  justify-content: center;

  opacity: 0;
  visibility: hidden;
  transition: opacity .4s ease, visibility .4s ease;
}

.fullscreen-overlay.active {
  opacity: 1;
  visibility: visible;
}

.overlay-inner {
  width: 100%;
  padding: 40px;
}

.overlay-content {
  max-width: 800px;
  margin: auto;
  color: #fff;
  animation: fadeUp .4s ease;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

.overlay-close {
  position: absolute;
  top: 30px;
  right: 40px;
  width: 32px;
  height: 32px;
  background: none;
  border: none;
  cursor: pointer;
}

.overlay-close span {
  position: absolute;
  top: 15px;
  left: 0;
  width: 32px;
  height: 2px;
  background: #fff;
  transition: transform .3s ease;
}

.overlay-close span:first-child {
  transform: rotate(45deg);
}

.overlay-close span:last-child {
  transform: rotate(-45deg);
}

.overlay-close:hover span:first-child {
  transform: rotate(45deg) scaleX(1.2);
}

.overlay-close:hover span:last-child {
  transform: rotate(-45deg) scaleX(1.2);
}

.overlay-search input {
  width: 100%;
  max-width: 700px;
  margin: auto;
  display: block;
  background: transparent;
  border: none;
  border-bottom: 2px solid #fff;
  font-size: 32px;
  color: #fff;
  padding: 20px 0;
  outline: none;
  letter-spacing: .05em;
}

.newsletter-box {
  text-align: center;
}

.newsletter-box h2 {
  font-size: 36px;
  margin-bottom: 40px;
}

.newsletter-box input {
  width: 100%;
  max-width: 420px;
  display: block;
  margin: 15px auto;
  padding: 14px;
  background: transparent;
  border: 1px solid #444;
  color: #fff;
}

.newsletter-box button {
  margin-top: 20px;
  padding: 14px 40px;
  background: #18c964;
  border: none;
  color: #fff;
  cursor: pointer;
}

.search-wrapper {
  position: relative;
  width: 60%;
  max-width: 600px;
}

.search-wrapper input {
  width: 100%;
  padding: 18px 20px 18px 50px;
  font-size: 24px;
  border: none;
  border-bottom: 2px solid #fff;
  background: transparent;
  color: #fff;
  outline: none;
}

.search-wrapper input::placeholder {
  color: rgba(255,255,255,0.6);
  letter-spacing: 2px;
}

.search-icon-inside {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  stroke: #fff;
  opacity: 0.8;
  pointer-events: none;
}
.search-submit {
  position:absolute;
  left:10px;
  top:50%;
  transform:translateY(-50%);
  background:none;
  border:none;
  cursor:pointer;
}



.drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(26,27,34,0.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 9998;

  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease;
}

.drawer-overlay.active {
  opacity: 1;
  visibility: visible;
}

.drawer-panel {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 600px;
  max-width: 95%;
  background: #f2f2f2;
  color: #111;
  padding: 60px 50px;
  overflow-y: auto;

  transform: translateX(100%);
  transition: transform .4s cubic-bezier(.77,0,.18,1);
}

.drawer-overlay.active .drawer-panel {
  transform: translateX(0);
}

.drawer-close {
  position: absolute;
  top: 25px;
  right: 30px;
  width: 28px;
  height: 28px;
  background: none;
  border: none;
  cursor: pointer;
}

.drawer-close span {
  position: absolute;
  top: 13px;
  left: 0;
  width: 28px;
  height: 2px;
  background: #111;
  transition: .3s ease;
}

.drawer-close span:first-child {
  transform: rotate(45deg);
}

.drawer-close span:last-child {
  transform: rotate(-45deg);
}

.drawer-close:hover span:first-child {
  transform: rotate(45deg) scaleX(1.2);
}

.drawer-close:hover span:last-child {
  transform: rotate(-45deg) scaleX(1.2);
}

.drawer-content h2 {
  font-size: 32px;
  margin-bottom: 25px;
}

.drawer-content p {
  line-height: 1.7;
  margin-bottom: 20px;
}

/* ==============================
   SINGLE POST LAYOUT
============================== */

.single-post {
  margin-top: 40px;   /* small breathing room below header */
  padding-bottom: 80px;
  color: #e8ebf3;
  position: relative;
}

.single-container {
  max-width: 820px;
  margin: 0 auto;
}

/* ==============================
   HEADER
============================== */

.post-header {
  text-align: center;
  margin-bottom: 40px;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .9s ease, transform .9s cubic-bezier(.22,.9,.3,1);
}

.post-header.reveal {
  opacity: 1;
  transform: translateY(0);
}

.post-title {
  font-size: clamp(36px, 4vw, 52px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 800;
  margin-bottom: 18px;
  color: #ffffff; /* brighter */
}

.post-subtitle {
  font-size: 19px;
  line-height: 1.6;
  color: #c7ccd8; /* brighter */
  max-width: 720px;
  margin: 0 auto 22px;
}

.post-meta {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #b4bac9; /* brighter */
  margin-bottom: 30px;
}

.meta-separator {
  margin: 0 8px;
  color: #8a90a3;
}

/* ==============================
   ACTION BUTTONS
============================== */

.post-actions {
  display: flex;
  justify-content: center;
  gap: 14px;
}

.btn-action {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.2);
  padding: 10px 20px;
  font-size: 13px;
  letter-spacing: 0.08em;
  color: #ffffff;
  cursor: pointer;
  transition: all 0.25s ease;
}

.btn-share {
  font-size: 20px;
  font-weight: 600;
  padding: 6px 14px;
}

.btn-action:hover {
  background: #18c964;
  border-color: #18c964;
  color: #0d1118;
}

/* ==============================
   FEATURED IMAGE PARALLAX
============================== */

.post-featured {
  margin: 60px 0;
  overflow: hidden;
  position: relative;
}

.post-featured img {
  width: 100%;
  height: auto;
  display: block;
  transform: translateY(0);
  transition: transform .15s linear;
  will-change: transform;
}

/* Subtle green glow */
.post-featured img:hover {
  box-shadow: 0 0 40px rgba(24,201,100,0.25);
}

.post-featured figcaption {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: 10px;
  color: rgba(255,255,255,0.55);
}


/* ==============================
   CONTENT
============================== */

.post-content {
  text-align: left;
  font-size: 19px;
  line-height: 1.85;
  color: #d9dce5;
}

/* Drop Cap */
.post-content p:first-of-type::first-letter {
  float: left;
  font-size: 68px;
  line-height: 1;
  font-weight: 700;
  margin-right: 10px;
  color: #d9dce5;
}

.post-content p {
  margin-bottom: 28px;
}

.post-content h2,
.post-content h3,
.post-content h4 {
  color: #ffffff;
  margin: 50px 0 20px;
}

.post-content a {
  color: #18c964;
  text-decoration: none;
}

.post-content a:hover {
  text-decoration: underline;
}

/* ==============================
   BLOCKQUOTE STYLE
============================== */

.post-content blockquote {
  position: relative;
  margin: 60px auto;
  padding: 30px 30px 30px 60px;
  font-size: 22px;
  line-height: 1.6;
  font-weight: 500;
  color: #f5f5f5;
  background: rgba(255,255,255,0.03);
  border-left: 3px solid #18c964;
  max-width: 700px;
}

/* Big decorative quote */
.post-content blockquote::before {
  content: "“";
  position: absolute;
  top: 10px;
  left: 15px;
  font-size: 80px;
  line-height: 1;
  font-weight: 700;
  color: rgba(24,201,100,0.15);
  font-family: Georgia, serif;
}

/* Optional citation styling */
.post-content blockquote cite {
  display: block;
  margin-top: 20px;
  font-size: 13px;
  opacity: 0.6;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ==============================
   POST CONTENT IMAGES
============================== */

.post-content figure {
  margin: 60px auto;
  text-align: center;
}

.post-content figure img {
  max-width: 75%;
  height: auto;
  border-radius: 6px;
  display: block;
  margin: 0 auto;
  transition: transform .4s ease, box-shadow .4s ease;
}

/* Subtle hover micro-effect */
.post-content figure img:hover {
  transform: scale(1.02);
  box-shadow: 0 15px 40px rgba(0,0,0,0.35);
}

/* Caption */
.post-content figcaption {
  margin-top: 14px;
  font-size: 13px;
  opacity: 0.6;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* ===============================
   LAMBO ADVANCED VIDEO SYSTEM
================================ */

.video-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin: 70px 0;
  overflow: hidden;
  border-radius: 4px;
  background: #000;
  cursor: pointer;
  transition: transform .5s ease, box-shadow .5s ease;
}

.video-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  opacity: 0;
  transition: opacity .6s ease;
}

/* Thumbnail */

.video-thumb {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: blur(6px) brightness(.75);
  transform: scale(1.08);
  transition: transform 1.2s ease, opacity .6s ease;
}

/* Gradient */

.video-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(24,201,100,.25),
    rgba(0,0,0,.6)
  );
}

/* Play Button */

.video-play {
  position: absolute;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.85);
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(6px);
  animation: glowPulse 2.5s infinite ease-in-out;
}

.video-play::before {
  content: '';
  border-style: solid;
  border-width: 12px 0 12px 18px;
  border-color: transparent transparent transparent white;
  margin-left: 5px;
}

/* Spinner */

.video-spinner {
  position: absolute;
  width: 40px;
  height: 40px;
  border: 3px solid rgba(255,255,255,.3);
  border-top-color: #18c964;
  border-radius: 50%;
  left: 50%;
  top: 60%;
  transform: translateX(-50%);
  animation: spin 1s linear infinite;
  opacity: 0;
}

.video-wrap.loading .video-spinner {
  opacity: 1;
}

@keyframes spin {
  to { transform: translateX(-50%) rotate(360deg); }
}

/* View counter */

.video-views {
  position: absolute;
  left: 18px;
  bottom: 18px;
  font-size: 13px;
  background: rgba(0,0,0,.6);
  padding: 6px 12px;
  border-radius: 20px;
  color: #fff;
}

/* Brand */

.video-brand {
  position: absolute;
  right: 18px;
  bottom: 18px;
  width: 65px;
  animation: floatBrand 4s ease-in-out infinite;
}

.video-brand img {
  width: 100%;
}

/* Progress bar */

.video-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 4px;
  width: 100%;
  background: rgba(255,255,255,.15);
}

.video-progress-bar {
  height: 100%;
  width: 0%;
  background: #18c964;
  transition: width .2s linear;
}

/* Playing state */

.video-wrap.playing iframe {
  opacity: 1;
}

.video-wrap.playing .video-thumb {
  opacity: 0;
  transform: scale(1);
}

.video-wrap.playing {
  transform: scale(.99);
}

/* Glow */

@keyframes glowPulse {
  0% { box-shadow: 0 0 0 rgba(255,255,255,.2); }
  50% { box-shadow: 0 0 28px rgba(24,201,100,.4); }
  100% { box-shadow: 0 0 0 rgba(255,255,255,.2); }
}

@keyframes floatBrand {
  0% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
  100% { transform: translateY(0); }
}

/* ===============================
   MINI PiP MODE
================================ */

.video-wrap.pip-mode {
  position: fixed;
  width: 320px;
  height: 180px;
  bottom: 20px;
  right: 20px;
  z-index: 9999;
  border-radius: 6px;
  box-shadow: 0 20px 60px rgba(0,0,0,.6);
}


/* ==============================
   EMBED FIX (YOUTUBE / VIDEO)
============================== */

.post-content iframe {
  display: block;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border: none;
  margin: 60px 0;
  border-radius: 1px;
}

/* Center embed container if wrapped */
.post-content .wp-block-embed,
.post-content .embed-youtube,
.post-content .video-wrapper {
  margin: 45px auto;
  max-width: 100%;
}

.post-content .wp-block-embed__wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
}

.post-content .wp-block-embed__wrapper iframe {
  width: 100%;
  height: 100%;
}




/* ==============================
   FLOATING READING PROGRESS BAR
============================== */

.reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: #18c964;
  z-index: 9999;
  transition: width .1s linear;
}

/* ==============================
   PREMIUM MOTION STATES
============================== */

/* Initial hidden state */

.post-title,
.post-subtitle,
.post-meta,
.post-actions,
.post-featured img {
  opacity: 0;
  transform: translateY(20px);
  transition: all .8s cubic-bezier(.22,.9,.3,1);
}

/* Micro scale for image */
.post-featured img {
  transform: scale(1.04);
  transition: transform 1.2s cubic-bezier(.22,.9,.3,1),
              opacity .8s ease;
}

/* Active reveal states */

.post-header.reveal .post-title {
  opacity: 1;
  transform: translateY(0);
}

.post-header.reveal .post-subtitle {
  opacity: 1;
  transform: translateY(0);
  transition-delay: .2s;
}

.post-header.reveal .post-meta {
  opacity: 1;
  transform: translateY(0);
  transition-delay: .35s;
}

.post-header.reveal .post-actions {
  opacity: 1;
  transform: translateY(0);
  transition-delay: .5s;
}

/* Image reveal */

.post-featured.reveal img {
  opacity: 1;
  transform: scale(1);
}

/* =========================================
   POST ACTIONS CONTAINER
========================================= */

.post-actions{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:18px;
  flex-wrap:wrap;
  position:relative;
  margin-top:20px;
}


/* =========================================
   PREVENT CLIPPING
========================================= */

.post-header{
  overflow:visible !important;
  position:relative;
  z-index:20;
}

.post-actions{
  position:relative;
  z-index:50;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:18px;
  flex-wrap:wrap;
}


/* =========================================
   SHARE WRAPPER
========================================= */

.share-wrapper{
  position:relative;
  display:inline-block;
  z-index:999;
}


/* =========================================
   SHARE POPUP
========================================= */

.share-popup{
  position:absolute;
  bottom:65px;
  left:50%;
  transform:translateX(-50%) translateY(10px) scale(.95);
  width:260px;
  background:#12151c;
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
  padding:20px;
  box-shadow:0 30px 70px rgba(0,0,0,.65);
  backdrop-filter:blur(12px);

  opacity:0;
  visibility:hidden;

  transition:all .28s cubic-bezier(.22,.9,.3,1);
  z-index:9999;
}

.share-popup.active{
  opacity:1;
  visibility:visible;
  transform:translateX(-50%) translateY(0) scale(1);
}


/* =========================================
   ARROW
========================================= */

.share-popup::after{
  content:"";
  position:absolute;
  bottom:-8px;
  left:50%;
  transform:translateX(-50%) rotate(45deg);
  width:14px;
  height:14px;
  background:#12151c;
  border-right:1px solid rgba(255,255,255,.08);
  border-bottom:1px solid rgba(255,255,255,.08);
}


/* =========================================
   HEADER
========================================= */

.share-popup-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.15em;
  margin-bottom:16px;
  color:#aaa;
}

.share-close{
  cursor:pointer;
  font-size:16px;
}

.share-close:hover{
  color:#18c964;
}


/* =========================================
   ICON GRID (FORCED FIX)
========================================= */

.share-icons{
  display:grid !important;
  grid-template-columns:repeat(3, 1fr) !important;
  gap:14px !important;
  width:100%;
  min-height:80px;
}


/* =========================================
   ICON STYLE
========================================= */

.share-icon{
  display:flex !important;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:48px;

  background:#1b1f29;
  color:#ffffff !important;
  border-radius:12px;
  cursor:pointer;
  transition:all .25s ease;
}

.share-icon svg{
  width:18px;
  height:18px;
  display:block;
  fill:#ffffff !important;
}

.share-icon:hover{
  background:#18c964;
  color:#000 !important;
  transform:translateY(-2px) scale(1.05);
}

.share-icon:hover svg{
  fill:#000 !important;
}


/* =========================================
   COPY LINK BUTTON
========================================= */

.share-icon.copy-link{
  font-size:11px;
  font-weight:600;
  letter-spacing:.08em;
}


/* =========================================
   TOAST
========================================= */

.copy-toast{
  position:fixed;
  bottom:50px;
  left:50%;
  transform:translateX(-50%) scale(.9);
  background:#18c964;
  color:#000;
  padding:12px 24px;
  border-radius:40px;
  font-size:13px;
  font-weight:500;
  opacity:0;
  transition:all .25s ease;
  z-index:999999;
}

.copy-toast.show{
  opacity:1;
  transform:translateX(-50%) scale(1);
}



/* =========================================
   ARTIST CARD SYSTEM
========================================= */

.artist-wrapper{
  position:relative;
  display:inline-block;
}

.artist-card{
  position:absolute;
  bottom:70px;
  left:50%;
  transform:translateX(-50%) scale(.92);
  width:200px;
  background:#12151c;
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
  padding:18px;
  text-align:center;
  box-shadow:0 25px 60px rgba(0,0,0,.6);
  backdrop-filter: blur(10px);
  opacity:0;
  visibility:hidden;
  transition:all .25s cubic-bezier(.22,.9,.3,1);
  z-index:9999;
}

.artist-wrapper:hover .artist-card{
  opacity:1;
  visibility:visible;
  transform:translateX(-50%) scale(1);
}

/* Arrow */
.artist-card::after{
  content:"";
  position:absolute;
  bottom:-8px;
  left:50%;
  transform:translateX(-50%) rotate(45deg);
  width:14px;
  height:14px;
  background:#12151c;
  border-right:1px solid rgba(255,255,255,.08);
  border-bottom:1px solid rgba(255,255,255,.08);
}

.artist-card img{
  width:64px;
  height:64px;
  object-fit:cover;
  border-radius:50%;
  margin-bottom:12px;
}

.artist-info strong{
  display:block;
  font-size:14px;
  margin-bottom:4px;
}

.artist-info span{
  font-size:12px;
  opacity:.6;
}


/* =========================================
   MOBILE ADJUSTMENT
========================================= */

@media(max-width:768px){

  .share-popup{
    width:220px;
    padding:18px;
  }

  .share-icons{
    gap:10px;
  }

  .share-icon{
    padding:12px;
  }

}





/* ==================================
   PREMIUM RELATED PANEL
================================== */

.related-slide {
  position: fixed;
  right: 30px;
  bottom: 30px;
  width: 340px;
  background: #12161f;
  border-radius: 2px;
  box-shadow: 0 25px 70px rgba(0,0,0,.6);
  padding: 18px 20px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: all .4s cubic-bezier(.22,.9,.3,1);
  z-index: 9998;
}

.related-slide.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Header */

.related-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #18c964;
  margin-bottom: 14px;
}

.related-toggle {
  background: none;
  border: none;
  color: #aaa;
  font-size: 20px;
  cursor: pointer;
}

/* Body */

.related-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height .5s ease;
}

.related-slide.expanded .related-body {
  max-height: 500px;
}

/* List */

.related-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.related-list li {
  margin-bottom: 14px;
}

.related-list a {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: #d8dbe3;
  font-size: 14px;
  transition: color .3s ease;
}

.related-list a:hover {
  color: #18c964;
}

/* Thumbnails */

.related-list img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 2px;
}




/* ==============================
   MOBILE OPTIMIZATION
============================== */

@media (max-width: 768px) {

  .post-header,
  .post-content {
    padding-left: 20px;
    padding-right: 20px;
  }

  .post-featured {
    margin-left: 0;
    margin-right: 0;
  }

  .post-featured img {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
  }

}

.mt-80 {
	margin-top: 80px;
}

.mt-40 {
	margin-top: 40px;
}

.mt-20 {
	margin-top: 20px;
}

.mt-100 {
	margin-top: 100px;
}

.mt-120 {
	margin-top: 120px;
}

/* =========================================
   MOBILE HEADER
========================================= */

@media (max-width: 991px){

  .main-nav,
  .header-actions .search-icon {
    display: none;
  }

  .header-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    position:relative;
  }

  .logo{
    z-index:1001;
  }

  .shop-btn{
    z-index:1001;
  }

  /* CENTER HAMBURGER */
  .mobile-toggle{
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    display:flex;
    gap:6px;
    cursor:pointer;
    z-index:1001;
  }

  /* VERTICAL BARS */
  .mobile-toggle span{
    width:3px;
    height:22px;
    background:#fff;
    transition:all .35s ease;
  }

  /* MORPH TO X */
  .mobile-toggle.active span:nth-child(1){
    transform:rotate(45deg) translate(5px,5px);
    height:24px;
  }

  .mobile-toggle.active span:nth-child(2){
    opacity:0;
  }

  .mobile-toggle.active span:nth-child(3){
    transform:rotate(-45deg) translate(-5px,5px);
    height:24px;
  }

}


/* =========================================
   MOBILE MENU OVERLAY
========================================= */

.mobile-menu{
  position:fixed;
  inset:0;
  background:rgba(13,15,20,.96);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  color:#fff;
  z-index:9999;
  display:flex;
  flex-direction:column;
  transform:translateY(-100%);
  transition:transform .45s cubic-bezier(.22,.9,.3,1);
  padding:30px;
}

.mobile-menu.active{
  transform:translateY(0);
}

/* TOP LINE */
.mobile-menu::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:1px;
  background:rgba(255,255,255,.08);
}

/* TOP BAR */
.mobile-menu-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:40px;
}

.mobile-close{
  font-size:28px;
  cursor:pointer;
}

/* NAV LINKS */
.mobile-nav{
  display:flex;
  flex-direction:column;
  gap:22px;
}

.mobile-nav a{
  font-size:22px;
  color:#fff;
  text-decoration:none;
  text-transform:uppercase;
  opacity:0;
  transform:translateY(10px);
  transition:all .4s ease;
}

/* STAGGER ANIMATION */
.mobile-menu.active .mobile-nav a{
  opacity:1;
  transform:translateY(0);
}

.mobile-menu.active .mobile-nav a:nth-child(1){ transition-delay:.05s }
.mobile-menu.active .mobile-nav a:nth-child(2){ transition-delay:.1s }
.mobile-menu.active .mobile-nav a:nth-child(3){ transition-delay:.15s }
.mobile-menu.active .mobile-nav a:nth-child(4){ transition-delay:.2s }
.mobile-menu.active .mobile-nav a:nth-child(5){ transition-delay:.25s }

/* CANADA GLOW */
.mobile-nav a.nav-highlight{
  display:inline-block; /* prevents full-width stretch */
  width:auto;
  align-self:flex-start; /* keeps left alignment */
  padding:10px 16px;
  border:1px solid #18c964;
  color:#18c964;
  text-shadow:0 0 10px rgba(24,201,100,.5);
}

.mobile-nav a.nav-highlight:hover{
  opacity: .7;
}

/* =========================================
   MOBILE SEARCH (inside menu)
========================================= */

.mobile-search{
  margin-top:40px;
}

.mobile-search form{
  position:relative;
}

.mobile-search input{
  width:100%;
  background:transparent;
  border:none;
  border-bottom:2px solid rgba(255,255,255,.2);
  padding:12px 0 12px 40px;
  color:#fff;
  font-size:16px;
}

.mobile-search input:focus{
  outline:none;
  border-color:#18c964;
}

.mobile-search svg{
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%);
  width:18px;
  stroke:#fff;
}

/* =========================================
   AD SECTION WRAPPER
========================================= */

.ad-section{
  background:#21222b; /* your former bg */
  padding:2rem 0;
  position:relative;
}

/* CENTER CONTAINER */
.ad-container{
  max-width:1100px;
  margin:0 auto;
  padding:0 20px;
}

/* WHITE AD BOX */
.ad-box{
  background:#fff;
  padding:20px;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:120px;
  position:relative;
}

/* FORCE HORIZONTAL */
.ad-slot{
  width:100%;
  max-width:970px;
  min-height:90px;
}

/* REMOVE EXTRA GOOGLE SPACE */
.adsbygoogle{
  margin:0 !important;
  padding:0 !important;
}

/* FALLBACK */
.ad-fallback{
  display:none;
  position:absolute;
  inset:0;
  align-items:center;
  justify-content:center;
}

.ad-fallback img{
  max-width:100%;
  height:auto;
}

/* ADBLOCK MESSAGE */
.adblock-message{
  display:none;
  position:absolute;
  inset:0;
  background:#111;
  color:#eee;
  padding:30px;
  font-size:14px;
  line-height:1.6;
  align-items:center;
  justify-content:center;
  text-align:center;
}

/* LABEL OUTSIDE */
.ad-label{
  position:absolute;
  right:20px;
  bottom:8px;
  font-size:11px;
  letter-spacing:.2em;
  color:rgba(255,255,255,.4);
}

.ad-fallback,
.adblock-message{
  display:none;
  position:absolute;
  inset:0;
  align-items:center;
  justify-content:center;
  text-align:center;
}

.adblock-message{
  background:#111;
  color:#eee;
  padding:40px;
  font-size:15px;
  line-height:1.6;
}




/* =========================================
   CANADA DEDICATED SECTION
========================================= */

/* Center page content properly inside wrapper */
.ca-page-wrapper,
.ca-site-wrapper,
.ca-content-wrapper {
  width:100%;
}
	
.page-padding {
  padding-left: 20px;
  padding-right: 20px;
}

	
/* =========================================
   MAGAZINE SECTION WRAPPER
========================================= */

.magazine{
  width:100%;
  padding:100px 0 40px; /* +20px extra top space */
  box-sizing:border-box;
  overflow-x:hidden; /* prevents right overflow */
}

/* Editorial width controller */
.magazine-inner{
  max-width:1300px;
  margin:0 auto;
  padding:0 40px; /* REAL left & right spacing */
  box-sizing:border-box;
}


/* =========================================
   HEADER
========================================= */

.magazine-header {
  display: flex;
  align-items: center;
  margin-bottom: 40px;
}

.magazine-header h1 {
  font-size: 24px;
  letter-spacing: 1px;
  margin: 0;
}

.magazine-header .rule {
  flex: 1;
  height: 4px;
  background: #fff;
  margin-left: 20px;
}


/* =========================================
   GRID (NO WIDTH CONTROL HERE)
========================================= */

.magazine-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}


/* =========================================
   COVER
========================================= */

.mg-cover {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.mg-cover img {
  width: 100%;
  display: block;
}

a.mg-subscribe {
  margin-top: 20px;
  background: #12B83A;
  color: #fff !important;
  border: none;
  padding: 14px 22px;
  font-weight: bold;
  letter-spacing: 1px;
  cursor: pointer;
  text-decoration: none;
  transition: .25s ease;
}

a.mg-subscribe:hover{
  opacity:.85;
}


/* =========================================
   CARDS
========================================= */

.mg-card {
  position: relative;
}

.mg-card img {
  width: 100%;
  height:160px;              /* lock height */
  object-fit:cover;          /* crop nicely */
  object-position:center;
  display:block;
  margin-bottom: 15px;
}

@media (max-width:1024px){
  .mg-card img{
    height:160px;
  }
}

@media (max-width:640px){
  .mg-card img{
    height:130px;
  }
}

.mg-tag {
  display: inline-block;
  font-size: 12px;
  font-weight: 400;
  color: rgba(255, 255, 255, .9);
  margin-bottom: 8px;
  letter-spacing: 1px;
}

.mg-card h2 {
  margin: 8px 0 14px;
}

.mg-card h2 a{
  font-size: clamp(18px, 2.5vw, 22px);
  line-height: 1.25;
  color: #fff;
  text-decoration: none;
  transition: .25s ease;
}

.mg-card h2 a:hover{
  opacity: 0.7;
}


/* =========================================
   ADS BADGE
========================================= */

.mg-ads {
  position: absolute;
  bottom: 0;
  right: 0;
  background: #000;
  color: #fff;
  font-size: 12px;
  padding: 6px 10px;
  font-weight: bold;
}


/* =========================================
   RESPONSIVE
========================================= */

/* Tablet */
@media (min-width: 768px) {
  .magazine-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .mg-cover {
    grid-column: span 2;
  }
}

/* Desktop */
@media (min-width: 1200px) {
  .magazine-grid {
    grid-template-columns: 1.2fr 1fr 1fr 1fr;
  }

  .mg-cover {
    grid-column: span 1;
  }
}

/* Mobile adjustments */
@media (max-width: 1024px){
  .magazine{
    padding:60px 30px 30px;
  }
}

@media (max-width: 767px) {
  .magazine{
    padding:50px 20px 20px;
  }

  .magazine-header .rule {
    display: none;
  }

  .mg-ads {
    display: none;
  }
}
	

	
/* =========================================
   INLINE NEWSLETTER (Editorial Aligned)
========================================= */

.nl-newsletter{
  padding:40px 0;
}

/* Centered container with borders */
.nl-newsletter-inner{
  max-width:1300px;
  margin:0 auto;
  padding:30px 60px;

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:40px;

  border-top:2px solid rgba(255,255,255,.15);
  border-bottom:2px solid rgba(255,255,255,.15);

  box-sizing:border-box;
}
	
.nl-logo {
  font-size: 36px;
  font-weight: 900;
  letter-spacing: -1px;
}
.nl-newsletter-text {
  font-size: 20px;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin: 0;
  margin-top: 10px; 
}
a.nl-signup {
  background: #12B83A;
  color: #fff !important;
  text-decoration: none;
  border: none;
  padding: 16px 28px;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
}
a.nl-signup:hover{
  opacity: 0.7;
}

@media (min-width: 768px) {
.nl-newsletter-inner {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
.nl-read-more {
    flex-wrap: nowrap;
    gap: 40px;
    padding: 30px 40px;
  }
}

	
/* replace primary color */
.gd-primary {
    color: #fff;
    background: #12B83A linear-gradient(90deg, #12B83A, #00f2a9)!important;
}

/* =========================================
   EDITORIAL GRID SYSTEM
========================================= */

.editorial-container{
  width:100%;
  max-width:1300px;
  margin:0 auto;
  padding:40px 60px;
  box-sizing:border-box; /* critical */
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:50px;
}
	
/* =========================================
   CARD
========================================= */

.editorial-card{
  position:relative;
  transition:transform .45s cubic-bezier(.22,.9,.3,1);
  will-change:transform;
  min-width:0; /* critical for grid shrink */
}

.editorial-card a{
  text-decoration:none;
  color:inherit;
  display:block;
}

.editorial-card:hover{
  transform:translateY(-10px);
}

/* =========================================
   IMAGE (Background Version)
========================================= */

.editorial-image{
  position:relative;
  overflow:hidden;
  border-radius:0px;
  height:225px;
  background:#111;
}
	
.editorial-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* Works with your media-content background-image */
.editorial-thumb,
.media-content{
  width:100%;
  height:100%;
  display:block;
  background-size:cover !important;
  background-position:center !important;
  transition:transform .7s ease;
}

/* Hover zoom */
.editorial-card:hover .editorial-thumb,
.editorial-card:hover .media-content{
  transform:scale(1.07);
}

/* Gradient accent glow */
.editorial-image::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(
    120deg,
    rgba(24,201,100,.35),
    transparent 60%
  );
  opacity:0;
  transition:opacity .35s ease;
  z-index:2;
  pointer-events:none;
}

.editorial-card:hover .editorial-image::before{
  opacity:1;
}

/* Soft green glow shadow */
.editorial-card:hover .editorial-image{
  box-shadow:0 20px 55px rgba(24,201,100,.25);
}

/* =========================================
   CONTENT
========================================= */

.editorial-content{
  margin-top:20px;
}

.editorial-author{
  font-size: .875rem;
  color:rgba(255,255,255,.65);
  display:block;
  margin-bottom:12px;
  letter-spacing:.06em;
  text-transform:normal;
}

.editorial-title{
  font-size:20px;
  line-height:1.6;
  font-weight:500;
  color:#f5f5f5;
  transition:all .25s ease;
}

.editorial-card:hover .editorial-title{
  color:#18c964;
}

/* =========================================
   LAZY FADE-IN ANIMATION
========================================= */

.fade-in{
  opacity:0;
  transform:translateY(35px);
  transition:opacity .9s ease, transform .9s ease;
}

.fade-in.visible{
  opacity:1;
  transform:translateY(0);
}

/* =========================================
   RESPONSIVE
========================================= */

@media(max-width:1200px){
  .editorial-container{
    gap:40px;
  }
}

@media(max-width:1024px){
  .editorial-container{
    grid-template-columns:repeat(2,1fr);
    gap:35px;
  }

  .editorial-image{
    height:260px;
  }
}

@media(max-width:640px){
  .editorial-container{
    grid-template-columns:1fr;
    padding:60px 20px;
    gap:30px;
  }

  .editorial-image{
    height:240px;
  }

  .editorial-title{
    font-size:20px;
  }
}
.fade-in {
  opacity:0;
  transform:translateY(35px);
}
.no-js .fade-in {
  opacity:1;
  transform:none;
}

/* =========================================
   EDITORIAL HEADER (Aligned with Grid)
========================================= */

.editorial-header{
  max-width:1300px;
  margin:0 auto;
  padding:0 60px 25px;
  box-sizing:border-box;
}

/* Title */
.latest-title{
  font-size:38px;
  font-weight:700;
  margin-top:30px;
  margin-bottom:20px;
  color:#fff;
}


/* =========================================
   LINKS ROW
========================================= */

.latest-links{
  display:flex;
  align-items:center;
  gap:48px;
  flex-wrap:wrap;
}

/* Label (ex: LEARN MORE ABOUT) */
.nl-label{
  font-size:13px;
  font-weight:900;
  letter-spacing:2px;
  text-transform:uppercase;
  text-decoration: none!important;
  color:rgba(255,255,255,.65);
}


/* Links */
.nl-link{
  font-size:13px;
  letter-spacing:2px;
  text-decoration:none;
  color:rgba(255,255,255,.75);
  padding-bottom:4px;
  position:relative;
  transition:all .25s ease;
}

/* Soft animated underline */
.nl-link::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:100%;
  height:1px;
  background:rgba(255,255,255,.35);
  transform:scaleX(1);
  transform-origin:left;
  transition:all .3s ease;
}

/* Hover */
.nl-link:hover{
  color:#12B83A;
}

.nl-link:hover::after{
  background:#12B83A;
  transform:scaleX(.6);
}


/* =========================================
   RESPONSIVE
========================================= */

@media(max-width:1024px){
  .editorial-header{
    padding:0 40px 40px;
  }

  .latest-title{
    font-size:34px;
  }

  .latest-links{
    gap:30px;
  }
}

@media(max-width:768px){
  .editorial-header{
    padding:0 25px 35px;
  }

  .latest-title{
    font-size:28px;
  }

  .latest-links{
    gap:18px;
  }
}
	
/* =========================================
   READ MORE BUTTON
========================================= */

/* Wrapper (important for centering) */
.read-more-wrapper{
  margin-top:20px;
  margin-bottom:50px;
  text-align:center;
}

/* Button */
.mg-read-more-btn{
  display:inline-block;
  background:#18c964;
  color:#fff !important;
  text-decoration:none;
  padding:16px 32px;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  transition:all .25s ease;
}

/* Hover */
.mg-read-more-btn:hover{
  opacity:0.7;
}



/* =========================================
   WHAT'S NEXT HERO
========================================= */

.wn-hero{
  position:relative;
  width:100%;
  height:100vh;
  min-height:650px;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#000;
}

/* Background image */
.wn-hero-bg{
  position:absolute;
  inset:0;
  z-index:1;
}

.wn-hero-bg img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
  transform:scale(1.05);
}

/* Dark cinematic overlay */
.wn-hero-overlay{
  position:absolute;
  inset:0;
  z-index:2;
  background:
    linear-gradient(to bottom, rgba(0,0,0,.2) 0%, rgba(0,0,0,.6) 60%, rgba(0,0,0,.85) 100%);
}

/* Content container */
.wn-hero-inner{
  position:relative;
  z-index:3;
  width:100%;
  max-width:1400px;
  padding:0 80px;
  display:grid;
  grid-template-columns: 1fr 1.2fr;
  grid-template-rows: auto auto auto;
  gap:40px;
  align-items:end;
}

/* Top label */
.wn-hero-label{
  grid-column:1 / -1;
  font-size:14px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(255,255,255,.7);
  font-weight:600;
}

/* Headline */
.wn-hero-title{
  grid-column:2;
  font-size:clamp(40px, 6vw, 80px);
  line-height:1.05;
  font-weight:600;
  color:#fff;
  margin:0;
}

/* Excerpt block */
.wn-hero-excerpt{
  grid-column:1;
  max-width:420px;
  font-size:18px;
  line-height:1.6;
  color:rgba(255,255,255,.8);
}

/* Meta */
.wn-hero-meta{
  grid-column:2;
  display:flex;
  gap:30px;
  font-size:14px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(255,255,255,.65);
}

/* =========================================
   RESPONSIVE
========================================= */

@media(max-width:1200px){

  .wn-hero-inner{
    padding:0 50px;
  }

  .wn-hero-excerpt{
    font-size:16px;
  }
}

@media(max-width:900px){

  .wn-hero{
    height:auto;
    padding:140px 0 80px;
  }

  .wn-hero-inner{
    grid-template-columns:1fr;
    gap:25px;
    padding:0 30px;
  }

  .wn-hero-title{
    grid-column:1;
  }

  .wn-hero-excerpt{
    grid-column:1;
    max-width:100%;
  }

  .wn-hero-meta{
    grid-column:1;
    flex-direction:column;
    gap:10px;
  }
}

@media(max-width:600px){

  .wn-hero{
    padding:120px 0 60px;
  }

  .wn-hero-title{
    font-size:34px;
  }

  .wn-hero-excerpt{
    font-size:15px;
  }
}

/* =========================================
   POST CONTENT WRAPPER
========================================= */

.post-section{
  padding:40px 0;
}

.post-container{
  max-width:900px;
  margin:0 auto;
  padding:0 20px;
  box-sizing:border-box;
}
		
/* =========================================
   SHOP SECTION (UPGRADED)
========================================= */

.post-shop{
  padding:60px 0;
  border-top:1px solid rgba(255,255,255,.08);
}

.post-shop-inner{
  max-width:1300px;
  margin:0 auto;
  padding:0 60px;
  box-sizing:border-box;
}

.post-shop-header{
  margin-bottom:60px;
}

.post-shop-header h2{
  font-size:28px;
  font-weight:600;
  letter-spacing:.05em;
}


/* =========================================
   GRID (Desktop)
========================================= */

.post-shop-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:40px;
}


/* =========================================
   PRODUCT CARD
========================================= */

.shop-item{
  position:relative;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}


/* Editor badge */
.shop-badge{
  position:absolute;
  top:14px;
  left:14px;
  background:#18c964;
  color:#000;
  font-size:11px;
  letter-spacing:.12em;
  padding:6px 10px;
  z-index:3;
}


/* =========================================
   IMAGE WRAP
========================================= */

.shop-image-wrap{
  position:relative;
  overflow:hidden;
  background:#111;
}

.shop-image img{
  width:100%;
  height:420px;
  object-fit:cover;
  display:block;
  transition:transform .6s ease;
  will-change:transform;
}


/* Subtle parallax (JS controlled) */
.shop-image.parallax img{
  transition:transform .15s linear;
}


/* =========================================
   ADD TO CART BUTTON (Refined)
========================================= */

.shop-btn{
  position:absolute;
  bottom:20px;
  left:50%;
  transform:translateX(-50%);
  background:rgba(0,0,0,.55);
  border:1px solid #fff;
  color:#fff;
  padding:14px 24px;
  font-size:12px;
  letter-spacing:.15em;
  text-transform:uppercase;
  border-radius:2px; /* requested */
  opacity:0;
  transition:all .3s ease;
  cursor:pointer;
  white-space:nowrap; /* prevents line break */
}

.shop-item:hover .shop-btn{
  opacity:1;
}

.shop-btn-inner{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}

a.shop-btn{
  text-decoration: none;		
}

/* Cart Icon */
.shop-cart-icon{
  width:16px;
  height:16px;
  stroke-width:2;
  flex-shrink:0;
}

/* Hover */
.shop-btn:hover{
  background:#fff;
  color:#000;
}



/* =========================================
   META
========================================= */

.shop-meta{
  margin-top:18px;
}

.shop-title{
  font-size:16px;
  font-weight:500;
  margin-bottom:6px;
}

.shop-price{
  font-size:14px;
  color:rgba(255,255,255,.65);
}

.shop-price del{
  opacity:.5;
  margin-right:8px;
}

.shop-price ins{
  text-decoration:none;
  font-weight:600;
}

.shop-title a{
  color:inherit;
  text-decoration:none;
  transition:.25s ease;
}

.shop-title a:hover{
  color:#18c964;
}


/* =========================================
   MOBILE HORIZONTAL SCROLL
========================================= */

@media(max-width:1024px){

  .post-shop-grid{
    display:flex;
    overflow-x:auto;
    gap:24px;
    scroll-snap-type:x mandatory;
    padding-bottom:10px;
  }

  .shop-item{
    min-width:280px;
    scroll-snap-align:start;
  }

  .post-shop-grid::-webkit-scrollbar{
    display:none;
  }

  .shop-image img{
    height:360px;
  }
}

@media(max-width:768px){
  .post-shop-inner{
    padding:0 25px;
  }
}


.category-page{
  padding:120px 0 60px;
}

.category-header{
  max-width:1300px;
  margin:0 auto 60px;
  padding:0 60px;
  position:relative;
  text-align:center;
  box-sizing:border-box;
}

.category-title{
  font-size:48px;
  font-weight:700;
  margin:0;
}

.category-yt-btn{
  position:absolute;
  top:0;
  right:60px;

  padding:10px 20px;
  border:1px solid #fff;
  background:transparent;
  color:#fff;
  text-decoration:none;
  font-size:13px;
  letter-spacing:.08em;
  text-transform:uppercase;

  transition:.25s ease;
}

.category-yt-btn:hover{
  background:#fff;
  color:#000;
}

.category-newsletter{
  margin-bottom:30px;
}

.category-posts{
  grid-template-columns:repeat(4,1fr);
}

.no-hover .editorial-card:hover{
  transform:none;
}

.no-hover .editorial-card:hover .editorial-image::before{
  opacity:0;
}

.no-hover .editorial-card:hover .editorial-image{
  box-shadow:none;
}

.no-hover .editorial-card:hover .editorial-title{
  color:#f5f5f5;
}

@media(max-width:1200px){
  .category-posts{
    grid-template-columns:repeat(3,1fr);
  }
}

@media(max-width:900px){
  .category-posts{
    grid-template-columns:repeat(2,1fr);
  }

  .category-header{
    padding:0 30px;
  }

  .category-yt-btn{
    right:30px;
  }
}

@media(max-width:640px){
  .category-posts{
    grid-template-columns:1fr;
  }

  .category-title{
    font-size:20px;
  }

  .category-yt-btn{
    position:static;
    display:inline-block;
    margin-bottom:20px;
  }
}

.category-filters{
  margin-top:15px;
  display:flex;
  justify-content:center;
  gap:28px;
  flex-wrap:wrap;
}

.filter-btn{
  background:none;
  border:none;
  color:rgba(255,255,255,.6);
  font-size:13px;
  letter-spacing:.12em;
  text-transform:uppercase;
  cursor:pointer;
  padding:6px 0;
  position:relative;
  transition:.25s ease;
}

.filter-btn::after{
  content:"";
  position:absolute;
  bottom:-4px;
  left:0;
  width:100%;
  height:1px;
  background:#fff;
  transform:scaleX(0);
  transform-origin:left;
  transition:.3s ease;
}

.filter-btn.active{
  color:#fff;
}

.filter-btn.active::after{
  transform:scaleX(1);
}

.filter-btn:hover{
  color:#fff;
}

/* =========================================
   CATEGORY GRID — WIDER IMAGES (Balanced Height)
========================================= */

.category-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 55px;
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Ensure cards shrink properly */
.category-grid .editorial-card {
  min-width: 0;
}

/* =========================================
   IMAGE SIZING
========================================= */

/* Desktop Large */
.category-grid .editorial-image {
  height: 225px; /* Reduced as requested */
  border-radius: 0;
  overflow: hidden;
  background: #111;
}

.category-grid .editorial-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* =========================================
   CONTENT SPACING — TIGHTER
========================================= */

.category-grid .editorial-content {
  margin-top: 10px; /* tighter spacing */
}

.category-grid .editorial-author {
  font-size: 14px;
  margin-bottom: 3px;
  color: rgba(255,255,255,.6);
  letter-spacing: .04em;
}

.category-grid .editorial-title {
  font-size: 20px;
  line-height: 1.6;
  font-weight: 500;
  color: #f5f5f5;
  margin: 0;
}

.category-grid .editorial-title a:hover{
  opacity: 0.7;
}

/* Remove extra anchor spacing */
.category-grid .editorial-card a {
  display: block;
}

/* =========================================
   RESPONSIVE BREAKPOINTS
========================================= */

/* Laptop */
@media(max-width:1200px){
  .category-grid{
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
  }

  .category-grid .editorial-image{
    height: 220px;
  }
}

/* Tablet */
@media(max-width:768px){
  .category-grid .editorial-image{
    height: 220px;
  }
}

/* Mobile */
@media(max-width:640px){
  .category-grid{
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .category-grid .editorial-image{
    height: 200px;
  }
}

/* =========================================
   CATEGORY NEWSLETTER — RESPONSIVE FIX
========================================= */

/* Tablet */
@media (max-width: 1024px) {

  .category-newsletter .nl-newsletter-inner {
    padding: 25px 30px;
    gap: 25px;
  }

  .category-newsletter .nl-newsletter-text {
    font-size: 18px;
  }

}


/* Mobile */
@media (max-width: 768px) {

  .category-newsletter .nl-newsletter-inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 30px 20px;
    gap: 18px;
  }

  .category-newsletter .nl-logo {
    font-size: 28px;
  }

  .category-newsletter .nl-newsletter-text {
    font-size: 16px;
    letter-spacing: .05em;
    line-height: 1.4;
  }

  .category-newsletter .nl-signup {
    width: 100%;
    max-width: 280px;
    text-align: center;
  }

}


/* Small Mobile */
@media (max-width: 480px) {

  .category-newsletter .nl-newsletter-inner {
    padding: 25px 16px;
  }

  .category-newsletter .nl-newsletter-text {
    font-size: 15px;
  }

}


	
/* =========================================
   CATEGORY FILTER SECTION
========================================= */

.category-filter-section {
  margin-bottom: 20px;
}

.category-filter-inner {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 60px;

  display: flex;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap;
}

/* Label */
.filter-label {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.6);
}

/* Tabs wrapper */
.filter-tabs {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

/* Buttons */
.filter-btn {
  background: transparent;
  border: none;
  color: rgba(255,255,255,.7);
  font-size: 14px;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  padding-bottom: 4px;
  position: relative;
  transition: all .25s ease;
}

/* Underline */
.filter-btn::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: rgba(255,255,255,.3);
  transition: all .3s ease;
}

/* Hover */
.filter-btn:hover {
  color: #12B83A;
}

.filter-btn:hover::after {
  background: #12B83A;
}

/* Active */
.filter-btn.active {
  color: #12B83A;
}

.filter-btn.active::after {
  background: #12B83A;
}

/* Responsive */
@media(max-width:768px){
  .category-filter-inner{
    padding: 0 25px;
    gap: 20px;
  }
}

/* =========================================
   CATEGORY HEADER MOBILE FIX
========================================= */

@media (max-width: 768px){

.category-header{
    position: relative;
    display: block;        /* remove flex stacking */
    text-align: center;    /* keep title centered */
  }

.category-yt-btn{
    position: absolute;
    top: -45px;            /* pushes it above title */
    right: 0;
    font-size: 12px;
    padding: 8px 12px;
    white-space: nowrap;
  }

}



/* =========================================
   HERO MOBILE FIX
========================================= */

@media (max-width:1024px){
/* Let hero grow naturally */
.hero{
    min-height:auto;
    padding-bottom:40px;
}

/* Stop absolute positioning */
.hero-inner{
    position:relative;
    right:auto;
    bottom:auto;
    margin:160px 20px 30px;  /* increased top spacing */
    text-align:right;
    max-width:100%;
}

.hero-content{
    text-align:right;
    align-items:flex-end;
}

/* Hide floating magazine on small screens */
.magazine-cover{
    display:none;
}

/* Move strip back into normal flow */
.floating-strip{
    position:relative !important;
    bottom:auto !important;
    left:auto !important;
    margin-top:20px;
    /*padding:0 20px 10px;*/
	padding:0 20px; /* adds equal left & right spacing */
    box-sizing:border-box;
}

/* Convert strip to slider layout */
.strip-inner{
    padding:0; /* prevent double padding */
  }

.strip-grid{
    display:flex;
	width:100%;
    overflow:hidden;
    scroll-snap-type:x mandatory;
    gap:0;
  }

.strip-item{
    min-width:100%;
    padding-right:20px;
    scroll-snap-align:start;
  }

.strip-item h3{
	font-size: 1em;
    word-break:break-word;
    overflow-wrap:break-word;
  }

}


/* =========================================
   STRIP DOTS → DASH STYLE (MOBILE ONLY)
========================================= */

/* Hide by default everywhere */
.strip-dots{
  display:none;
}

/* Only show on tablet & mobile */
@media (max-width:1024px){

.strip-dots{
    display:flex;
    justify-content:center;
    gap:8px;
    margin-top:10px; /* reduced space */
}

.strip-dots .dot{
    width:28px;
    height:3px;
    border-radius:2px;
    background:rgba(255,255,255,.35);
    border:none;
    transition:all .3s ease;
}

.strip-dots .dot.active{
    background:#12B83A;
    width:36px;
}

}


.it-girl {
  position: relative;
  overflow: hidden; /* prevents accidental page overflow */
}

.it-girl .editorial-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 40px;
}


@media (max-width: 1024px){

.it-girl .editorial-grid{
    display: flex;
    gap: 20px;

    overflow-x: auto;
    overflow-y: hidden;

    padding: 0 20px 10px;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;

    /* prevents page overflow */
    width: 100%;
}
	
  .it-girl .ms-card img{
    width: 100%;
    height: 350px;   /* ↓ reduce height */
    object-fit: cover;
    display: block;
  }

}

/* Hide scrollbar (clean look) */
.it-girl .editorial-grid::-webkit-scrollbar{
    display: none;
}

.it-girl .editorial-grid{
    scrollbar-width: none;
}

/* Cards become fixed width instead of shrinking */
.it-girl .ms-card{
    flex: 0 0 70%;
    max-width: 280px;
  }

.it-girl .editorial-grid{
  scroll-snap-type: x mandatory;
}

.it-girl .ms-card{
  scroll-snap-align: start;
}


}


/* ===============================
   MOBILE FIX – FEATURED CONTENT
=============================== */
@media (max-width:1024px){

.featured-section{
    padding:0 16px !important;
}

.featured-main{
    display:block !important;
  }

.featured-content{
  }

.featured-content h2{
    font-size:18px !important;
    line-height:1.2;
	letter-spacing: 0.05em;
    max-width:100% !important;
  }

/* Ensure image doesn't overflow */
.featured-image img{
    width:100%;
    height:260px;
    object-fit:cover;
    display:block;
  }

}

/* Surgical Hard Patch (Forces Perfect Centering) */
@media (max-width:768px){

.featured-content{
    position:relative;
    left:50%;
    transform:translateX(-50%) !important;

    width:calc(100% - 40px) !important;
    max-width:600px;

    padding:40px 20px !important;
    margin:0 !important;

    text-align:center !important;
    align-items:center !important;
}
	
.featured-content h2{
    font-size:16px !important;
    line-height:1.2;
	letter-spacing: 0.05em;
    max-width:100% !important;
    width:100%;
}

/* Ensure image doesn't overflow */
.featured-image img{
    width:100%;
    height:260px;
    object-fit:cover;
    display:block;
}

}

/* ===============================
   ABOUT HERO
================================= */

.about-hero{
  padding:70px 20px 50px;
  text-align:center;
  max-width:900px;
  margin:0 auto;
}

.about-hero h1{
  font-size:48px;
  margin-bottom:20px;
}

.about-hero p{
  font-size:18px;
  opacity:.8;
  line-height:1.7;
}


/* ===============================
   TABS SECTION
================================= */

.about-core{
  padding:40px 20px;
  max-width:900px;
  margin:0 auto;
}

.tab-buttons{
  display:flex;
  justify-content:center;
  gap:20px;
  margin-bottom:20px;
  flex-wrap:wrap;
}

.tab-btn{
  background:transparent;
  border:1px solid rgba(255,255,255,.2);
  padding:10px 22px;
  cursor:pointer;
  transition:.3s;
  color: #fff;
}

.tab-btn.active,
.tab-btn:hover{
  background:#18c964;
  color:#fff;
  border-color:#18c964;
}

.tab-content{
  display:none;
  text-align:center;
  font-size:17px;
  line-height:1.7;
  opacity:.85;
}

.tab-content.active{
  display:block;
}

/* ===============================
   STORE SECTION
================================= */

.about-store{
  padding:100px 20px;
  background:#111318;
}

.store-inner{
  max-width:1200px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
}

.store-text h2{
  font-size:36px;
  margin-bottom:20px;
}

.store-text p{
  line-height:1.7;
  opacity:.8;
  margin-bottom:30px;
}

.store-btn{
  display:inline-block;
  padding:12px 28px;
  border:1px solid #fff;
  text-transform:uppercase;
  font-size:14px;
  transition:.3s;
  color: #fff;
  text-decoration: none;
}

.store-btn:hover{
  background:#fff;
  color:#000;
}

.store-highlights{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:25px;
}

.store-card{
  padding:25px;
  border:1px solid rgba(255,255,255,.1);
  transition:.3s;
}

.store-card:hover{
  background:#1a1c22;
  transform:translateY(-5px);
}


/* ===============================
   TRUST SECTION
================================= */

.about-trust{
  padding:100px 20px;
  text-align:center;
}

.about-trust h2{
  font-size:32px;
  margin-bottom:50px;
}

.trust-grid{
  max-width:1100px;
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:40px;
}

.trust-card{
  display:block;
  padding:40px 30px;
  border:1px solid rgba(255,255,255,.1);
  transition:.3s;
  color:#fff;
  text-decoration: none;
}

.trust-card:hover{
  background:#18c964;
  color:#fff;
  transform:translateY(-5px);
}

.trust-card h3{
  margin-bottom:15px;
}


/* ===============================
   RESPONSIVE
================================= */

@media(max-width:1024px){

  .store-inner{
    grid-template-columns:1fr;
  }

  .store-highlights{
    grid-template-columns:1fr 1fr;
  }

  .trust-grid{
    grid-template-columns:1fr 1fr;
  }
}

@media(max-width:640px){

  .about-hero h1{
    font-size:36px;
  }

  .store-highlights{
    grid-template-columns:1fr;
  }

  .trust-grid{
    grid-template-columns:1fr;
  }
}

	/* ===============================
   GLOBAL CONTAINER
================================= */

.about-container{
  max-width:1200px;
  margin:0 auto;
  padding:0 20px;
}

.section-title{
  font-size:34px;
  margin-bottom:60px;
  text-align:center;
}


/* ===============================
   TEAM SECTION
================================= */

.about-team{
  padding:120px 0;
  background:#0f1117;
}

.team-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:60px;
}

.team-card{
  display:flex;
  gap:30px;
  align-items:flex-start;
}

.team-image img{
  width:140px;
  height:140px;
  object-fit:cover;
  border-radius:4px;
}

.team-info h3{
  font-size:22px;
  margin-bottom:6px;
}

.team-info span{
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:.08em;
  opacity:.6;
  display:block;
  margin-bottom:15px;
}

.team-info p{
  line-height:1.6;
  opacity:.85;
}


/* ===============================
   INVESTOR SECTION
================================= */

.about-investor{
  padding:120px 0;
  background:#14161d;
}

.investor-inner{
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:80px;
  align-items:center;
}

.investor-content h2{
  font-size:36px;
  margin-bottom:25px;
}

.investor-content p{
  line-height:1.7;
  opacity:.85;
  margin-bottom:20px;
}

.investor-meta{
  margin-top:25px;
  font-size:14px;
  letter-spacing:.05em;
  opacity:.7;
}

.investor-meta span{
  font-weight:600;
}

.highlight-box{
  padding:40px;
  border:1px solid rgba(255,255,255,.1);
  transition:.3s;
}

.highlight-box:hover{
  background:#18c964;
  color:#000;
  transform:translateY(-5px);
}

.highlight-box h4{
  margin-bottom:15px;
  font-size:20px;
}


/* ===============================
   RESPONSIVE
================================= */

@media(max-width:1024px){

  .team-grid{
    grid-template-columns:1fr;
  }

  .investor-inner{
    grid-template-columns:1fr;
    gap:50px;
  }

  .team-card{
    flex-direction:column;
  }

  .team-image img{
    width:120px;
    height:120px;
  }
}

@media(max-width:640px){

  .section-title{
    font-size:28px;
  }

  .investor-content h2{
    font-size:28px;
  }
}


      /* =========================================
   GLOBAL PAGE SYSTEM
========================================= */

.global-page-wrapper{
  padding:140px 0 80px;
  background:#0d0f14;
}

.global-page-container{
  max-width:900px;
  margin:0 auto;
  padding:0 30px;
}

/* =========================================
   PAGE HEADER
========================================= */

.global-page-header{
  border-bottom:1px solid rgba(255,255,255,.08);
  padding-bottom:30px;
}


.global-page-title{
  font-size:clamp(32px,4vw,48px);
  font-weight:600;
  letter-spacing:-0.02em;
  color:#f3f4f6; /* lighter than body */
  margin-bottom:14px;
}

.global-page-updated{
  font-size:13px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(255,255,255,.45);
}

/* =========================================
   CONTENT TYPOGRAPHY
========================================= */

.global-page-content{
  font-size:18px;
  line-height:1.75;
  color:rgba(255,255,255,.82); /* darker than headings */
}

/* Paragraph spacing */
.global-page-content p{
  margin-bottom:28px;
}

/* Headings */
.global-page-content h2,
.global-page-content h3,
.global-page-content h4{
  color:#f1f3f5; /* lighter than body */
  margin:50px 0 18px;
  font-weight:600;
  letter-spacing:-0.01em;
}

.global-page-content h2{
  font-size:28px;
}

.global-page-content h3{
  font-size:22px;
}

.global-page-content strong{
  color:#f9fafb;
  font-weight:600;
}

/* Lists */
.global-page-content ul,
.global-page-content ol{
  margin:20px 0 30px 20px;
}

.global-page-content li{
  margin-bottom:12px;
}

/* =========================================
   CUSTOM DASH LINK STYLE
========================================= */

.global-page-content a{
  position:relative;
  text-decoration:none;
  color:#18c964;
  font-weight:500;
  padding-bottom:4px;
  transition:.3s ease;
}

/* Custom short dash underline */
.global-page-content a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:60%;
  height:1px;
  background:#18c964;
  transition:.3s ease;
}

/* Hover */
.global-page-content a:hover{
  color:#00f2a9;
}

.global-page-content a:hover::after{
  width:40%;
}

/* =========================================
   BLOCKQUOTE
========================================= */

.global-page-content blockquote{
  border-left:3px solid #18c964;
  padding-left:20px;
  margin:40px 0;
  font-style:italic;
  opacity:.9;
}

/* =========================================
   RESPONSIVE
========================================= */

@media(max-width:768px){

  .global-page-wrapper{
    padding:120px 0 60px;
  }

  .global-page-container{
    padding:0 20px;
  }

  .global-page-content{
    font-size:16px;
  }

}



/* ===================================
   HERO
=================================== */

.reach-hero{
  padding:140px 20px 100px;
  text-align:center;
  background:#0f1117;
}

.reach-hero h1{
  font-size:48px;
  margin-bottom:20px;
}

.reach-hero p{
  font-size:18px;
  opacity:.75;
}



/* ===================================
   INFO BLOCK
=================================== */

.reach-info{
  padding:100px 0;
  background:#14161d;
}

.reach-container{
  max-width:1100px;
  margin:0 auto;
  padding:0 20px;
}

.reach-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:50px;
}

.reach-card h3{
  font-size:18px;
  margin-bottom:15px;
}

.reach-card p{
  margin-bottom:8px;
}

.reach-card a{
  color:#18c964;
}


/* ===================================
   STATS SECTION (FIXED ALIGNMENT)
=================================== */

.reach-stats{
  padding:100px 0;
  background:#0f1117;
}

.stats-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:40px;
}

.stat-box{
  background:#14161d;
  padding:40px 20px;
  text-align:center;

  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;

  min-height:180px; /* forces equal height */
}

.stat-box h2{
  font-size:42px;
  color:#18c964;
  margin-bottom:10px;
}

.stat-box p{
  opacity:.75;
}

/* Rate Card Fix */
.stat-box.rate-card{
  justify-content:center;
  background: none!important;
}

.rate-btn{
  display:inline-block;
  padding:14px 28px;
  border:1px solid #fff;
  color:#fff;
  transition:.3s ease;
  text-decoration: none;
}

.rate-btn:hover{
  background:#18c964;
  color:#fff;
}


/* ===================================
   FORM STYLING
=================================== */

.reach-form {
  padding:100px 0;
  background:#14161d;
}

#simple-contact-form-wrap{
  max-width:600px;
  margin:40px auto 0;
}
	
.reach-form h2 {
  padding:14px 30px;	
}	
	
.scf-row{
  margin-bottom:25px;
}

.scf-row label{
  display:block;
  font-size:14px;
  margin-bottom:8px;
  opacity:.7;
}

.scf-row input,
.scf-row textarea{
  width:100%;
  padding:14px;
  background:#0f1117;
  border:1px solid rgba(255,255,255,.1);
  color:#fff;
}

#scf-button{
  background:#18c964;
  border:none;
  padding:14px 30px;
  color:#fff;
  font-weight:600;
  cursor:pointer;
}

#scf-button:hover{
  opacity:.85;
}




/* ===================================
   RESPONSIVE
=================================== */

@media(max-width:1024px){

  .reach-grid{
    grid-template-columns:1fr;
    gap:40px;
  }

  .stats-grid{
    grid-template-columns:repeat(2,1fr);
  }
}

@media(max-width:640px){

  .stats-grid{
    grid-template-columns:1fr;
  }

  .reach-hero h1{
    font-size:34px;
  }
}



/* =========================================
   ADVERTISE PAGE
========================================= */

.advertise-wrapper{
  background:#0d0f14;
  color:#fff;
}

/* Container */
.adv-container{
  max-width:1100px;
  margin:0 auto;
  padding:0 30px;
}

/* ================================= HERO */
.adv-hero{
  padding:130px 0 80px;
/*padding:160px 0 120px;*/
  text-align:center;
}

.adv-title{
  font-size:clamp(40px,5vw,60px);
  font-weight:700;
  margin-bottom:20px;
}

.adv-subtitle{
  font-size:20px;
  max-width:700px;
  margin:0 auto 40px;
  opacity:.8;
}

.adv-cta-btn{
  display:inline-block;
  padding:16px 40px;
  background:#18c964;
  color:#fff;
  font-weight:600;
  text-decoration:none;
  transition:.3s ease;
}

.adv-cta-btn:hover{
  transform:translateY(-3px);
  box-shadow:0 10px 30px rgba(24,201,100,.3);
}
/* ================================= WHY */
.adv-why{
  padding:100px 0;
}

.adv-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:40px;
  margin-top:50px;
}

.adv-card{
  padding:40px;
  background:#151822;
  border:1px solid rgba(255,255,255,.05);
  transition:.3s ease;
}

.adv-card:hover{
  transform:translateY(-6px);
  border-color:#18c964;
}

/* ================================= AUDIENCE */
.adv-audience{
  padding:100px 0;
  background:#11141c;
}

.audience-columns{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:50px;
  margin-top:50px;
}

.audience-columns h4{
  margin-bottom:20px;
  font-size:18px;
  color:#18c964;
}

.audience-columns ul{
  list-style:none;
  padding:0;
}

.audience-columns li{
  margin-bottom:12px;
  opacity:.8;
}

/* ================================= FORMATS */
.adv-formats{
  padding:100px 0;
}

.formats-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:40px;
  margin-top:50px;
}

.format-box{
  padding:40px;
  background:#151822;
  transition:.3s ease;
}

.format-box:hover{
  background:#18c964;
  color:#fff;
}

/* ================================= FINAL */
.adv-final{
  padding:120px 0;
  text-align:center;
  background:#11141c;
}

.adv-buttons{
  margin-top:40px;
  display:flex;
  justify-content:center;
  gap:30px;
}

.adv-contact-btn{
  padding:14px 32px;
  background:#18c964;
  color:#fff;
  text-decoration:none;
}

.adv-outline-btn{
  padding:14px 32px;
  border:1px solid #18c964;
  color:#18c964;
  text-decoration:none;
}

.adv-outline-btn:hover{
  background:#18c964;
  color:#fff;
}

/* ================================= RESPONSIVE */
@media(max-width:1024px){

  .adv-grid{
    grid-template-columns:1fr;
  }

  .audience-columns{
    grid-template-columns:1fr;
  }

  .formats-grid{
    grid-template-columns:1fr;
  }

  .adv-buttons{
    flex-direction:column;
  }

}

/* ================= STATS ================= */

.adv-stats{
  padding:120px 0;
  background:#11141c;
}

.stats-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:40px;
  text-align:center;
}

.stat-box h2{
  font-size:48px;
  color:#18c964;
  margin-bottom:10px;
}

.stat-box p{
  opacity:.7;
  letter-spacing:.05em;
}

@media(max-width:1024px){
  .stats-grid{
    grid-template-columns:repeat(2,1fr);
  }
}
	
/* ================= PERFORMANCE ================= */

.adv-performance{
  padding:120px 0;
  background:#0d0f14;
}

.adv-performance h2{
  text-align:center;
  margin-bottom:60px;
}

.performance-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:40px;
}

.performance-box{
  padding:40px;
  background:#151822;
  text-align:center;
  transition:.3s ease;
}

.performance-box:hover{
  transform:translateY(-6px);
  border:1px solid #18c964;
}

.performance-box h3{
  font-size:42px;
  color:#18c964;
  margin-bottom:15px;
}

.performance-box p{
  opacity:.8;
}

@media(max-width:1024px){
  .performance-grid{
    grid-template-columns:repeat(2,1fr);
  }
}

/* ================= RATE MODAL ================= */

.rate-modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.85);
  display:flex;
  align-items:center;
  justify-content:center;
  visibility:hidden;
  opacity:0;
  transition:.3s ease;
  z-index:9999;
}

.rate-modal.active{
  visibility:visible;
  opacity:1;
}

.rate-modal-inner{
  background:#11141c;
  padding:60px;
  width:90%;
  max-width:600px;
  text-align:center;
  position:relative;
}

.rate-close{
  position:absolute;
  top:20px;
  right:25px;
  cursor:pointer;
  font-size:28px;
}

.rate-preview{
  margin:40px 0;
}

.rate-tier{
  padding:20px;
  border-bottom:1px solid rgba(255,255,255,.05);
}

	.pdf-preview-wrapper{
  margin:40px 0;
  height:420px;
  border:1px solid rgba(255,255,255,.08);
  overflow:hidden;
}

.pdf-preview{
  width:100%;
  height:100%;
  border:none;
}

.rate-actions{
  margin-top:20px;
}

.download-btn{
  background:#18c964;
  padding:14px 28px;
  color:#fff;
  font-weight:600;
  display:inline-block;
}

.artist-hero{
  padding:140px 0 80px;
  background:#0d0f14;
  border-bottom:1px solid rgba(255,255,255,.05);
}

.artist-hero-inner{
  max-width:1100px;
  margin:0 auto;
  padding:0 40px;
  display:flex;
  align-items:center;
  gap:40px;
}

.artist-photo img{
  width:160px;
  height:160px;
  border-radius:50%;
  object-fit:cover;
  border:3px solid #18c964;
}

.artist-name{
  font-size:42px;
  margin:0 0 10px;
}

.artist-meta{
  font-size:14px;
  letter-spacing:.1em;
  opacity:.7;
}

.meta-divider{
  margin:0 10px;
}

.artist-bio{
  padding:80px 0;
}

.artist-container{
  max-width:800px;
  margin:0 auto;
  padding:0 40px;
}

.artist-bio h2{
  margin-bottom:20px;
  font-size:28px;
}

.artist-bio p{
  line-height:1.8;
  font-size:18px;
  opacity:.85;
}

	.artist-tabs{
  padding:80px 0;
  background:#11131a;
}

.tabs-nav{
  display:flex;
  gap:20px;
  margin-bottom:40px;
}

.tab-btn{
  background:none;
  border:none;
  color:#fff;
  opacity:.5;
  font-size:16px;
  cursor:pointer;
  padding-bottom:8px;
}

.tab-btn.active{
  opacity:1;
  border-bottom:2px solid #18c964;
}

.tab-panel{
  display:none;
}

.tab-panel.active{
  display:block;
}

.artist-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:30px;
}

.artist-card img{
  width:100%;
  height:200px;
  object-fit:cover;
  margin-bottom:15px;
}

	.similar-artists{
  padding:80px 0;
}

.similar-grid{
  display:flex;
  gap:40px;
  flex-wrap:wrap;
}

.similar-item{
  text-align:center;
  text-decoration:none;
  color:#fff;
}

.similar-item img{
  width:110px;
  height:110px;
  border-radius:50%;
  object-fit:cover;
  margin-bottom:12px;
  transition:.3s;
}

.similar-item:hover img{
  transform:scale(1.05);
}

@media(max-width:768px){

  .artist-hero-inner{
    flex-direction:column;
    text-align:center;
  }

  .artist-grid{
    grid-template-columns:1fr;
  }

  .similar-grid{
    justify-content:center;
  }

}


/* ==============================
   404 PAGE
============================== */

.error-404{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  background:#0d0f14;
  padding:40px;
}

.error-inner{
  max-width:700px;
}

.error-code{
  font-size:140px;
  margin:0;
  color:#18c964;
  letter-spacing:-5px;
}

.error-title{
  font-size:28px;
  margin:20px 0 10px;
}

.error-text{
  font-size:16px;
  opacity:.7;
  margin-bottom:40px;
}

.error-actions{
  display:flex;
  justify-content:center;
  gap:20px;
  flex-wrap:wrap;
}

.error-btn{
  padding:12px 28px;
  text-decoration:none;
  border:1px solid #18c964;
  transition:.3s ease;
}

.error-btn.primary{
  background:#18c964;
  color:#000;
}

.error-btn.secondary{
  background:transparent;
  color:#18c964;
}

.error-btn:hover{
  opacity:.85;
}

/* ==============================
   404 TRENDING SECTION
============================== */

.error-trending{
  padding:80px 0 120px;
  background:#0d0f14;
}

.error-trending-inner{
  max-width:1100px;
  margin:0 auto;
  padding:0 40px;
}

.error-trending-title{
  font-size:20px;
  margin-bottom:40px;
  text-align:center;
  letter-spacing:.08em;
  text-transform:uppercase;
  opacity:.8;
}

.error-trending-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:40px;
}

.error-trending-card a{
  display:block;
  text-decoration:none;
  color:#fff;
  transition:opacity .3s ease;
}

.error-trending-card a:hover{
  opacity:.85;
}

.error-trending-image{
  overflow:hidden;
  margin-bottom:15px;
}

.error-trending-image img{
  width:100%;
  height:220px;
  object-fit:cover;
  display:block;
}

.error-trending-author{
  font-size:12px;
  opacity:.6;
  letter-spacing:.1em;
  text-transform:uppercase;
}

.error-trending-heading{
  font-size:18px;
  margin-top:8px;
  line-height:1.4;
}
	
@media(max-width:1024px){
  .error-trending-grid{
    grid-template-columns:repeat(2,1fr);
  }
}

@media(max-width:768px){
  .error-trending-grid{
    grid-template-columns:1fr;
  }

  .error-trending{
    padding:60px 0 80px;
  }
}

/* ===============================
   ABOUT HERO
================================= */

.about-hero{
  padding:100px 20px 25px;
  text-align:center;
  max-width:900px;
  margin:0 auto;
}

.about-hero h1{
  font-size:48px;
  margin-bottom:20px;
}

.about-hero p{
  font-size:18px;
  opacity:.8;
  line-height:1.7;
}


/* ===============================
   TABS SECTION
================================= */

.about-core{
  padding:40px 20px;
  max-width:900px;
  margin:0 auto;
}

.tab-buttons{
  display:flex;
  justify-content:center;
  gap:20px;
  margin-bottom:20px;
  flex-wrap:wrap;
}

.tab-btn{
  background:transparent;
  border:1px solid rgba(255,255,255,.2);
  padding:10px 22px;
  cursor:pointer;
  transition:.3s;
  color: #fff;
}

.tab-btn.active,
.tab-btn:hover{
  background:#18c964;
  color:#fff;
  border-color:#18c964;
}

.tab-content{
  display:none;
  text-align:center;
  font-size:17px;
  line-height:1.7;
  opacity:.85;
}

.tab-content.active{
  display:block;
}

/* ===============================
   STORE SECTION
================================= */

.about-store{
  padding:100px 20px;
  background:#111318;
}

.store-inner{
  max-width:1200px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
}

.store-text h2{
  font-size:36px;
  margin-bottom:20px;
}

.store-text p{
  line-height:1.7;
  opacity:.8;
  margin-bottom:30px;
}

.store-btn{
  display:inline-block;
  padding:12px 28px;
  border:1px solid #fff;
  text-transform:uppercase;
  font-size:14px;
  transition:.3s;
  color: #fff;
  text-decoration: none;
}

.store-btn:hover{
  background:#fff;
  color:#000;
}

.store-highlights{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:25px;
}

.store-card{
  padding:25px;
  border:1px solid rgba(255,255,255,.1);
  transition:.3s;
}

.store-card:hover{
  background:#1a1c22;
  transform:translateY(-5px);
}


/* ===============================
   TRUST SECTION
================================= */

.about-trust{
  padding:100px 20px;
  text-align:center;
}

.about-trust h2{
  font-size:32px;
  margin-bottom:50px;
}

.trust-grid{
  max-width:1100px;
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:40px;
}

.trust-card{
  display:block;
  padding:40px 30px;
  border:1px solid rgba(255,255,255,.1);
  transition:.3s;
  color:#fff;
  text-decoration: none;
}

.trust-card:hover{
  background:#18c964;
  color:#fff;
  transform:translateY(-5px);
}

.trust-card h3{
  margin-bottom:15px;
}


/* ===============================
   RESPONSIVE
================================= */

@media(max-width:1024px){

  .store-inner{
    grid-template-columns:1fr;
  }

  .store-highlights{
    grid-template-columns:1fr 1fr;
  }

  .trust-grid{
    grid-template-columns:1fr 1fr;
  }
}

@media(max-width:640px){

.about-hero h1{
    font-size:36px;
  }

  .store-highlights{
    grid-template-columns:1fr;
  }

  .trust-grid{
    grid-template-columns:1fr;
  }
}

	/* ===============================
   GLOBAL CONTAINER
================================= */

.about-container{
  max-width:1200px;
  margin:0 auto;
  padding:0 20px;
}

.section-title{
  font-size:34px;
  margin-bottom:60px;
  text-align:center;
}


/* ===============================
   TEAM SECTION
================================= */

.about-team{
  padding:120px 0;
  background:#0f1117;
}

.team-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:60px;
}

.team-card{
  display:flex;
  gap:30px;
  align-items:flex-start;
}

.team-image img{
  width:140px;
  height:140px;
  object-fit:cover;
  border-radius:4px;
}

.team-info h3{
  font-size:22px;
  margin-bottom:6px;
}

.team-info span{
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:.08em;
  opacity:.6;
  display:block;
  margin-bottom:15px;
}

.team-info p{
  line-height:1.6;
  opacity:.85;
}


/* ===============================
   INVESTOR SECTION
================================= */

.about-investor{
  padding:120px 0;
  background:#14161d;
}

.investor-inner{
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:80px;
  align-items:center;
}

.investor-content h2{
  font-size:36px;
  margin-bottom:25px;
}

.investor-content p{
  line-height:1.7;
  opacity:.85;
  margin-bottom:20px;
}

.investor-meta{
  margin-top:25px;
  font-size:14px;
  letter-spacing:.05em;
  opacity:.7;
}

.investor-meta span{
  font-weight:600;
}

.highlight-box{
  padding:40px;
  border:1px solid rgba(255,255,255,.1);
  transition:.3s;
}

.highlight-box:hover{
  background:#18c964;
  color:#000;
  transform:translateY(-5px);
}

.highlight-box h4{
  margin-bottom:15px;
  font-size:20px;
}


/* ===============================
   RESPONSIVE
================================= */

@media(max-width:1024px){

  .team-grid{
    grid-template-columns:1fr;
  }

  .investor-inner{
    grid-template-columns:1fr;
    gap:50px;
  }

  .team-card{
    flex-direction:column;
  }

  .team-image img{
    width:120px;
    height:120px;
  }
.about-investor {
    padding: 100px 20px;
}
}

@media(max-width:640px){

  .section-title{
    font-size:28px;
  }

  .investor-content h2{
    font-size:28px;
  }
}

/* ===================================
   HERO
=================================== */

.reach-hero{
  padding:140px 20px 100px;
  text-align:center;
  background:#0f1117;
}

.reach-hero h1{
  font-size:48px;
  margin-bottom:20px;
}

.reach-hero p{
  font-size:18px;
  opacity:.75;
}



/* ===================================
   INFO BLOCK
=================================== */

.reach-info{
  padding:100px 0;
  background:#14161d;
}

.reach-container{
  max-width:1100px;
  margin:0 auto;
  padding:0 20px;
}

.reach-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:50px;
}

.reach-card h3{
  font-size:18px;
  margin-bottom:15px;
}

.reach-card p{
  margin-bottom:8px;
}

.reach-card a{
  color:#18c964;
}


/* ===================================
   STATS SECTION (FIXED ALIGNMENT)
=================================== */

.reach-stats{
  padding:100px 0;
  background:#0f1117;
}

.stats-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:40px;
}

.stat-box{
  background:#14161d;
  padding:40px 20px;
  text-align:center;

  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;

  min-height:180px; /* forces equal height */
}

.stat-box h2{
  font-size:42px;
  color:#18c964;
  margin-bottom:10px;
}

.stat-box p{
  opacity:.75;
}

/* Rate Card Fix */
.stat-box.rate-card{
  justify-content:center;
  background: none!important;
}

.rate-btn{
  display:inline-block;
  padding:14px 28px;
  border:1px solid #fff;
  color:#fff;
  transition:.3s ease;
  text-decoration: none;
}

.rate-btn:hover{
  background:#18c964;
  color:#fff;
}


/* ===================================
   FORM STYLING
=================================== */

.reach-form {
  padding:100px 0;
  background:#14161d;
}

#simple-contact-form-wrap{
  max-width:600px;
  margin:40px auto 0;
}
	
.reach-form h2 {
  padding:14px 30px;	
}	
	
.scf-row{
  margin-bottom:25px;
}

.scf-row label{
  display:block;
  font-size:14px;
  margin-bottom:8px;
  opacity:.7;
}

.scf-row input,
.scf-row textarea{
  width:100%;
  padding:14px;
  background:#0f1117;
  border:1px solid rgba(255,255,255,.1);
  color:#fff;
}

#scf-button{
  background:#18c964;
  border:none;
  padding:14px 30px;
  color:#fff;
  font-weight:600;
  cursor:pointer;
}

#scf-button:hover{
  opacity:.85;
}




/* ===================================
   RESPONSIVE
=================================== */

@media(max-width:1024px){

  .reach-grid{
    grid-template-columns:1fr;
    gap:40px;
  }

  .stats-grid{
    grid-template-columns:repeat(2,1fr);
  }
}

@media(max-width:640px){

  .stats-grid{
    grid-template-columns:1fr;
  }

  .reach-hero h1{
    font-size:34px;
  }
}


/* ==========================
   CAREER HERO
========================== */

.career-hero{
  position:relative;
  height:60vh;
  background:url('https://lamboxtra.com/wp-content/uploads/lambo-xtra-editorial-team.jpg') center/cover no-repeat;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}

.career-hero-overlay{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.6);
}

.career-hero-inner{
  position:relative;
  z-index:2;
  color:#fff;
}

.career-hero h1{
  font-size:48px;
  margin-bottom:16px;
}

.career-hero p{
  font-size:18px;
  opacity:.85;
}

/* ==========================
   DESCRIPTION
========================== */

.career-description{
  padding:80px 0;
}

.career-container{
  max-width:1100px;
  margin:0 auto;
  padding:0 40px;
}

/* ==========================
   FILTER
========================== */

.career-filter{
  padding:40px 0;
  border-top:1px solid rgba(255,255,255,.08);
  border-bottom:1px solid rgba(255,255,255,.08);
}

.career-filter select{
  padding:10px 14px;
  background:#111;
  color:#fff;
  border:1px solid #333;
}

/* ==========================
   JOB LIST
========================== */

.career-jobs{
  padding:60px 0;
}

.job-card{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:30px;
  border-bottom:1px solid rgba(255,255,255,.08);
  transition:.25s ease;
}

.job-card:hover{
  background:#12151c;
}

.job-title{
  font-size:22px;
  margin-bottom:10px;
}

.job-meta{
  display:flex;
  gap:20px;
  font-size:14px;
  opacity:.7;
}

.apply-btn{
  padding:10px 20px;
  background:#18c964;
  color:#fff;
  font-weight:300;
  text-decoration:none;
}

.apply-btn:hover{
  opacity:.85;
}

.closed-badge{
  font-size:14px;
  opacity:.5;
}

/* ==========================
   MOBILE
========================== */

@media(max-width:768px){

  .job-card{
    flex-direction:column;
    align-items:flex-start;
    gap:20px;
  }

  .career-hero h1{
    font-size:32px;
  }

}

/* =========================
   AUTHOR HERO
========================= */

.author-hero{
  padding:120px 20px 60px;
  text-align:center;
  background:#0f1117;
}

.author-container{
  max-width:1100px;
  margin:0 auto;
}

.author-title{
  font-size:42px;
  font-weight:700;
  margin-bottom:15px;
  color:#fff;
}

.author-bio{
  max-width:700px;
  margin:0 auto;
  font-size:16px;
  line-height:1.6;
  opacity:.75;
  color:#bbb;
}

/* =========================
   POSTS GRID
========================= */

.author-posts{
  padding:60px 20px 80px;
  background:#0d0f14;
}

.author-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:30px;
}

.author-card{
  background:#171a22;
  transition:.3s ease;
  text-decoration: none;
}

.author-card a{
  text-decoration: none;
}
	
.author-card:hover{
  transform:translateY(-6px);
}

.author-image img{
  width:100%;
  height:260px;
  object-fit:cover;
  display:block;
}

.author-content{
  padding:20px;
}

.author-date{
  font-size:12px;
  opacity:.6;
  letter-spacing:.08em;
  color: #fff;
  opacity: 0.7;
}

.author-post-title{
  font-size:18px;
  margin-top:10px;
  line-height:1.3;
  color:#fff;
}

/* =========================
   READ MORE
========================= */

.author-readmore{
  text-align:center;
  margin-top:50px;
}

.author-readmore-btn{
  display:inline-block;
  padding:14px 30px;
  background:#18c964;
  color:#000;
  font-weight:600;
  text-decoration:none;
  transition:.3s ease;
}

.author-readmore-btn:hover{
  opacity:.85;
}
	
/* =========================
   PAGINATION
========================= */

.author-pagination{
  text-align:center;
  margin-top:50px;
}

.author-pagination .page-numbers{
  display:inline-block;
  margin:0 6px;
  padding:8px 14px;
  background:#1c1f27;
  color:#fff;
  text-decoration:none;
  font-size:14px;
}

.author-pagination .current{
  background:#18c964;
  color:#000;
}

/* =========================
   RESPONSIVE
========================= */

@media(max-width:1024px){
  .author-grid{
    grid-template-columns:repeat(2,1fr);
  }
}

@media(max-width:768px){
  .author-grid{
    grid-template-columns:1fr;
  }

  .author-title{
    font-size:30px;
  }
}

/* ======================
CASE STUDIES HERO
====================== */

.case-hero{
  background:#111;
  padding:120px 20px 80px;
  text-align:center;
  color:#fff;
}

.case-label{
  text-transform:uppercase;
  letter-spacing:.2em;
  font-size:12px;
  opacity:.6;
}

.case-hero h1{
  font-size:42px;
  margin:20px 0;
}

.case-sub{
  max-width:700px;
  margin:0 auto;
  opacity:.8;
}


/* ======================
LAYOUT
====================== */

.case-container{
  max-width:1200px;
  margin:0 auto;
  padding:80px 40px;
}

.case-container.narrow{
  max-width:800px;
  margin-top: 40px;
  margin-bottom: 40px;
}

.case-margin  {
  margin-top: 40px;
  margin-bottom: 40px;	
}

.case-padding  {
  padding-top: 40px;
  padding-bottom: 40px;	
}
	
.strategy-columns {
  padding-bottom: 40px;	
}
/* ======================
OVERVIEW
====================== */

.case-overview{
  background:#f8f8f8;
  color: #111;
}

.case-overview .case-container{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  align-items:center;
}

.case-image img{
  width:100%;
  margin:40px 40px;
  border-radius:4px;
}

.case-tags{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:20px;
}

.case-tags li{
  background:#111;
  color:#fff;
  padding:6px 12px;
  font-size:12px;
  border-radius:20px;
}


/* ======================
OBJECTIVES
====================== */

.objectives-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:40px;
  margin-top:40px;
}

.objective-card{
  background:#fff;
  color: #111;
  padding:30px;
  border-radius:4px;
  box-shadow:0 10px 30px rgba(0,0,0,0.05);
}


/* ======================
RESULTS
====================== */

.case-results{
  background:#111;
  color:#fff;
}

.results-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:40px;
  margin-top:60px;
  text-align:center;
}

.result-box h3{
  font-size:48px;
  margin-bottom:10px;
}


/* ======================
CTA
====================== */

.case-cta{
  background:#000;
  color:#fff;
  text-align:center;
  padding:100px 20px;
}
	
.cta-buttons {
   padding-top: 25px;
}

.cta-buttons .primary-btn{
  background:#18c964;
  padding:14px 30px;
  border-radius:30px;
  color:#fff;
  font-weight:600;
  text-decoration: none;
  margin-right: 10px;
}
	
.cta-buttons .primary-btn:hover{
   background: none;
   border:1px solid #fff;
}
	
.secondary-btn{
  border:1px solid #fff;
  padding:14px 30px;
  border-radius:30px;
  color:#fff;
  text-decoration: none;
}
	
.cta-buttons .secondary-btn:hover{
  background:#18c964;
  border: 0px;
}
	
.case-map {
  padding: 100px 0;
  background: #0d0f14;
  color: #fff;
}

.case-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
}

.section-title {
  text-align: center;
  font-size: 36px;
  margin-bottom: 12px;
}

.section-sub {
  text-align: center;
  opacity: .7;
  margin-bottom: 60px;
}

.map-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 60px;
  align-items: center;
}

.map-visual img {
  width: 100%;
  border-radius: 4px;
}

.map-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
}

.map-stat {
  background: #1a1c24;
  padding: 30px;
  border-radius: 4px;
  text-align: center;
}

.map-stat h3 {
  font-size: 32px;
  margin-bottom: 8px;
  color: #18c964;
}

@media(max-width: 900px) {
  .map-grid {
    grid-template-columns: 1fr;
  }
}

.roi-section {
  padding: 100px 0;
  background: #111;
  color: #fff;
}

.roi-box {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  background: #1a1c24;
  padding: 60px;
  border-radius: 4px;
}

.roi-inputs label {
  display: block;
  margin-bottom: 20px;
  font-size: 14px;
}

.roi-inputs input {
  width: 100%;
  padding: 10px;
  margin-top: 6px;
  background: #0d0f14;
  border: 1px solid #333;
  color: #fff;
}

.roi-btn {
  margin-top: 20px;
  background: #18c964;
  border: none;
  padding: 12px 24px;
  cursor: pointer;
  font-weight: 600;
}

.roi-results {
  text-align: center;
}

#roiRevenue {
  font-size: 40px;
  margin: 20px 0;
  color: #18c964;
}

#roiPercent {
  font-size: 28px;
}

@media(max-width: 900px) {
  .roi-box {
    grid-template-columns: 1fr;
  }
}


/* ==============================
GLOBAL
================================= */

.wn-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 50px 40px;
}

.wn-container.narrow {
  max-width: 800px;
}

.wn-section-title {
  font-size: 32px;
  margin-bottom: 30px;
}



/* ==============================
HERO
================================= */

.wn-landing-hero {
  position: relative;
  height: 90vh;
  background: url('https://lamboxtra.com/wp-content/uploads/ChatGPT-Image-Feb-21-2026-10_04_31-AM-1.png') center/cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
}

/* Overlay */
.wn-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.3) 0%,
    rgba(0,0,0,0.4) 60%,
    rgba(0,0,0,0.6) 100%
  );
  z-index: 1;
  pointer-events: none; /* THIS fixes click issue */
}

/* Content */
.wn-hero-content {
  position: relative;
  z-index: 2; /* ensures it's above overlay */
  max-width: 700px;
}

.wn-title {
  font-size: 64px;
  margin: 20px 0;
  color: #fff;
}

.wn-subtitle {
  margin-bottom: 40px;
  color: rgba(255,255,255,0.85);
}

.wn-scroll-btn {
  border: 1px solid #fff;
  padding: 12px 30px;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
}
.wn-scroll-btn:hover {
	opacity: .8;
}


/* ==============================
MAJOR INTERVIEWS
================================= */

.wn-major-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 30px;
}
	
/* Overlay for each card */
.wn-featured-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.75) 0%,
    rgba(0,0,0,0.4) 50%,
    rgba(0,0,0,0.1) 100%
  );
  z-index: 1;
  pointer-events: none;
}

.wn-featured-card {
  position: relative;
  overflow: hidden;
}

.wn-featured-card.large {
  grid-row: span 2;
}

.wn-featured-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.wn-card-content {
  position: absolute;
  bottom: 20px;
  left: 20px;
  z-index: 2; /* important */
  color: #fff;
}

.wn-card-content h3 {
  margin: 8px 0 4px; /* top | sides | bottom */
  font-size: 20px; /* optional if you want consistency */
  line-height: 1.3;
}
	
.wn-author {
  margin-top: 3px;
  font-size: 12px;
  opacity: 0.75;
  letter-spacing: 0.05em;
}
	
.wn-featured-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.wn-featured-card:hover img {
  transform: scale(1.05);
}

.wn-card-label {
  display: inline-block;
  font-size: 11px;
  letter-spacing: .15em;
  text-transform: uppercase;
  padding: 4px 10px;
  border: 1px solid #18c964;
  color: #18c964;
  text-decoration: none;
  margin-bottom: 10px;
  transition: all 0.25s ease;
}

.wn-card-label:hover {
  background: #18c964;
  color: #fff;
  cursor: pointer;
}

/* ==============================
ALL INTERVIEWS
================================= */

.wn-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}

.wn-card img {
  width: 100%;
  margin-bottom: 15px;
}

.wn-meta {
/*  font-size: 12px;
  opacity: .6;
  margin-bottom: 8px;*/
}

/* Title */
.wn-card a {
  text-decoration: none;
} 
	
.wn-card h3 {
  font-size: 1rem;
  margin: 6px 0 6px;   /* tighten bottom spacing */
  line-height: 1.25;
  color: #FFF;
  text-decoration: none;
  margin-bottom: 0;
}
	
.wn-card h3:hover{
  opacity: 0.82;
}

/* Author */
.wn-meta {
  font-size: 12px;
  opacity: 0.6;
  margin: 0;            /* remove extra space */
}

.wn-card-media {
  display: block;
  overflow: hidden;
}

.wn-card-media img {
  width: 100%;
  height: 230px;        /* set fixed height */
  object-fit: cover;
  display: block;
}
.wn-title a {
  color: #fff;
  text-decoration: none;
}

.wn-title a:hover {
  opacity: .8;
}
	
/* ==============================
   WHAT'S NEXT PAGINATION
================================= */

.wn-pagination {
  margin-top: 80px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
}

.wn-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid rgba(255,255,255,.3);
  color: #fff;
  text-decoration: none;
  font-size: 0.9rem;
  transition: all .25s ease;
}

.wn-pagination .page-numbers:hover {
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.6);
}

.wn-pagination .page-numbers.current {
  background: #fff;
  color: #000;
  border-color: #fff;
}
	

/* ==============================
WHY SECTION
================================= */

.wn-why {
  background: #111;
  padding: 100px 0;
}

.wn-benefits {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  margin-top: 50px;
}

.wn-benefit h4 {
  margin-bottom: 10px;
  color: #18c964;
}



/* ==============================
CTA
================================= */

.wn-cta {
  background: #000;
  text-align: center;
  padding: 120px 20px;
}

.wn-primary-btn {
    background: #18c964;
    padding: 14px 40px;
    display: inline-block;
    margin-top: 30px;
    font-weight: 600;
    color: #fff;
    text-decoration: none;
}

.wn-primary-btn:hover{
	background: #14b356;
}

/* ==============================
RESPONSIVE
================================= */

@media (max-width: 900px) {

  .wn-major-grid {
    grid-template-columns: 1fr;
  }

  .wn-grid {
    /*grid-template-columns: 1fr;*/
  }

  .wn-benefits {
    grid-template-columns: 1fr;
  }

  .wn-title {
    font-size: 42px;
  }
}

@media (max-width: 768px) {

  .wn-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .wn-card {
    margin-bottom: 10px;
  }

  .wn-card img {
    margin-bottom: 12px;
  }

  .wn-card h3 {
    font-size: 1.2rem;
    margin: 8px 0 4px;
    line-height: 1.25;
  }

  .wn-meta {
    font-size: 0.85rem;
  }

}
	
.wn-card {
  transition: transform .3s ease;
}

.wn-card:hover {
  transform: translateY(-4px);
}
	
/* Image wrapper */
.wn-card-media {
  position: relative;
  display: block;
  overflow: hidden;
}

/* Image */
.wn-card-media img {
  width: 100%;
  display: block;
  transition: transform .5s ease;
}

/* Overlay */
.wn-card-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0);
  transition: background .3s ease;
}

/* Hover Effects */
.wn-card-media:hover img {
  transform: scale(1.04);
}

.wn-card-media:hover::after {
  background: rgba(0,0,0,.2);
}

a .wn-card-media {
	text-decoration: none;
}




@media (max-width: 600px) {
.adv-title {
    font-size: clamp(20px, 5vw, 30px);
    font-weight: 700;
    margin-bottom: 20px;
}
.adv-performance {
    padding: 80px 0;
}
.performance-grid {
        grid-template-columns: 1fr!important;
}
.stats-grid {
        grid-template-columns: 1fr!important;
}
.footer-container{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:40px;
}

/* FIRST ITEM (LOGO) FULL WIDTH */
.footer-container > div:first-child{
    grid-column: 1 / -1;
}
.about-hero h1 {
    font-size: 24px;
    font-weight: 700;
}
}