/**
 * Template Name: CINETECA - v3.01 (Modern + Responsive FIX)
 * Nota: Mantiene tus mismos selectores (body, #header, .navbar, #hero, etc.)
 * para que NO rompa tu theme propio. Solo corrige bugs, consistencia y mobile.
 */

/* ==========================================================
   0) Design tokens (paleta + tamaños) ✅
   ========================================================== */
:root{
  /* Brand (verde Cineteca) */
  --green-900:#0b3119;
  --green-800:#0f3f1f;
  --green-700:#135229;
  --green-600:#015218;
  --green-500:#1fe91b;
  --mint-400:#34e5a6;

  /* Neutrals */
  --text:#1f2937;
  --muted:#6b7280;
  --bg:#ffffff;
  --surface:#f7faf8;     /* fondo suave verdoso */
  --border:#e5e7eb;

  /* Accents (si quieres conservar el azul en componentes puntuales) */
  --indigo-700:#1d4ed8;

  /* Layout */
  --container: 1140px;
  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 10px 30px rgba(0,0,0,.10);
  --shadow-sm: 0 6px 18px rgba(0,0,0,.08);

  /* Header */
  --header-h: 80px;
  --header-h-scrolled: 60px;

  /* Type */
  --font-body: "Open Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --font-head: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* ==========================================================
   1) Base + Reset limpio ✅
   ========================================================== */
html{ scroll-behavior:smooth; }
*,
*::before,
*::after{ box-sizing:border-box; }

body{
  font-family: var(--font-body);
  color: var(--text);
  background: var(--bg);
  font-size: 16px;
  line-height: 1.6;
  margin: 0;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg, video{
  max-width: 100%;
  height: auto;
  display: block;
}

a{
  color: var(--green-600);
  text-decoration: none;
  transition: color .2s ease, opacity .2s ease;
}
a:hover{ color: var(--green-900); }

:focus-visible{
  outline: 3px solid rgba(31,233,27,.45);
  outline-offset: 2px;
  border-radius: 8px;
}

h1,h2,h3,h4,h5,h6{
  font-family: var(--font-head);
  color: #111827;
  line-height: 1.2;
  margin: 0 0 .6rem 0;
}

p{ margin: 0 0 1rem 0; color: var(--text); }

/* Reduce motion (accesibilidad) */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

/* Container helper (si tu theme ya lo usa, no estorba) */
.container,
.container-fluid{
  width: 100%;
  margin-inline: auto;
  padding-inline: 16px;
}
.container{ max-width: var(--container); }

/* ==========================================================
   2) Preloader ✅
   ========================================================== */
#preloader{
  position: fixed;
  inset: 0;
  z-index: 9999;
  overflow: hidden;
  background: #fff;
}
#preloader:before{
  content:"";
  position: fixed;
  top: calc(50% - 30px);
  left: calc(50% - 30px);
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 6px solid var(--green-500);
  border-top-color: #d2f9eb;
  animation: animate-preloader 1s linear infinite;
}
@keyframes animate-preloader{
  0%{ transform: rotate(0deg); }
  100%{ transform: rotate(360deg); }
}

/* ==========================================================
   3) Back to top ✅
   ========================================================== */
.back-to-top{
  position: fixed;
  right: 15px;
  bottom: 15px;
  z-index: 996;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: var(--green-500);
  display: grid;
  place-items: center;
  visibility: hidden;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .25s ease, transform .25s ease, visibility .25s ease, background .25s ease;
  box-shadow: var(--shadow-sm);
}
.back-to-top i{
  font-size: 24px;
  color: #fff;
  line-height: 0;
}
.back-to-top:hover{ background: var(--mint-400); }
.back-to-top.active{
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}

/* ==========================================================
   4) AOS: sin delay en móvil ✅
   ========================================================== */
@media screen and (max-width: 768px){
  [data-aos-delay]{ transition-delay: 0 !important; }
}

/* ==========================================================
   5) Header (BUG FIX rgba + sticky limpio) ✅
   ========================================================== */
#header{
  height: var(--header-h);
  z-index: 997;
  position: sticky;
  top: 0;
  transition: background .3s ease, height .3s ease, box-shadow .3s ease;
  /* ✅ FIX: rgba bien escrito */
  background: rgba(1, 83, 24, 0.90);
  backdrop-filter: blur(8px);
}
#header.header-transparent{
  background: transparent;
  backdrop-filter: none;
  box-shadow: none;
}
#header.header-scrolled{
  height: var(--header-h-scrolled);
  background: rgba(19, 82, 41, 0.92);
  box-shadow: var(--shadow-sm);
}

#header .logo h1{
  font-size: 26px;
  margin: 0;
  padding: 0;
  line-height: 1;
  font-weight: 800;
  letter-spacing: .02em;
}
#header .logo h1 a,
#header .logo h1 a:hover{
  color:#fff;
  text-decoration:none;
}
#header .logo img{
  max-height: 42px;
}

/* ==========================================================
   6) Navigation ✅ (más moderna + accesible)
   ========================================================== */
.navbar{ padding: 0; }

.navbar ul{
  margin: 0;
  padding: 0;
  display: flex;
  list-style: none;
  align-items: center;
  gap: 2px;
}
.navbar li{ position: relative; }

.navbar a,
.navbar a:focus{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0 10px 26px;
  font-size: 15px;
  font-weight: 600;
  font-family: "Poppins", var(--font-body);
  color: rgba(255,255,255,.85);
  white-space: nowrap;
  transition: color .2s ease, opacity .2s ease;
}

.navbar a i,
.navbar a:focus i{
  font-size: 12px;
  line-height: 0;
  margin-left: 6px;
}

.navbar > ul > li > a:before{
  content:"";
  position: absolute;
  left: 26px;
  bottom: 6px;
  height: 2px;
  width: 0;
  background-color: var(--green-500);
  border-radius: 999px;
  opacity: 0;
  transition: width .25s ease, opacity .25s ease;
}
.navbar a:hover:before,
.navbar li:hover > a:before,
.navbar .active:before{
  width: 26px;
  opacity: 1;
}
.navbar a:hover,
.navbar .active,
.navbar .active:focus,
.navbar li:hover > a{
  color: #fff;
}

/* Dropdown */
.navbar .dropdown ul{
  display: block;
  position: absolute;
  left: 22px;
  top: calc(100% + 18px);
  margin: 0;
  padding: 10px 0;
  z-index: 99;
  opacity: 0;
  visibility: hidden;
  background: #fff;
  box-shadow: var(--shadow);
  transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
  transform: translateY(6px);
  border-radius: 12px;
  border: 1px solid var(--border);
}
.navbar .dropdown ul li{ min-width: 220px; }

.navbar .dropdown ul a{
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 600;
  text-transform: none;
  color: #0f172a;
}
.navbar .dropdown ul a:hover,
.navbar .dropdown ul .active:hover,
.navbar .dropdown ul li:hover > a{
  color: var(--green-600);
  background: rgba(31,233,27,.08);
}

.navbar .dropdown:hover > ul{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  top: 100%;
}

/* Sub-dropdown */
.navbar .dropdown .dropdown ul{
  top: 0;
  left: calc(100% - 16px);
  visibility: hidden;
}
.navbar .dropdown .dropdown:hover > ul{
  opacity: 1;
  top: 0;
  left: 100%;
  visibility: visible;
}
@media (max-width: 1366px){
  .navbar .dropdown .dropdown ul{ left: -90%; }
  .navbar .dropdown .dropdown:hover > ul{ left: -100%; }
}

/* Mobile toggle */
.mobile-nav-toggle{
  color:#fff;
  font-size: 28px;
  cursor:pointer;
  display:none;
  line-height: 0;
  transition: transform .2s ease;
}
.mobile-nav-toggle:hover{ transform: scale(1.04); }

@media (max-width: 991px){
  .mobile-nav-toggle{ display:block; }
  .navbar ul{ display:none; }
}

/* Mobile nav overlay */
.navbar-mobile{
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: rgba(11, 49, 25, 0.95);
  transition: .25s ease;
  z-index: 999;
}
.navbar-mobile .mobile-nav-toggle{
  position:absolute;
  top: 16px;
  right: 16px;
}
.navbar-mobile ul{
  display:block;
  position:absolute;
  top: 62px;
  right: 16px;
  bottom: 16px;
  left: 16px;
  padding: 10px 0;
  border-radius: 16px;
  background-color:#fff;
  overflow-y:auto;
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: var(--shadow);
}
.navbar-mobile > ul > li > a:before{ left: 18px; }
.navbar-mobile a,
.navbar-mobile a:focus{
  padding: 12px 18px;
  font-size: 15px;
  color: var(--green-700);
}
.navbar-mobile a:hover,
.navbar-mobile .active,
.navbar-mobile li:hover > a{
  color: var(--green-600);
  background: rgba(31,233,27,.10);
}
.navbar-mobile .dropdown ul,
.navbar-mobile .dropdown .dropdown ul{
  position: static;
  display: none;
  margin: 8px 12px;
  padding: 8px 0;
  opacity: 1;
  visibility: visible;
  background: #fff;
  box-shadow: none;
  border-left: 2px solid rgba(31,233,27,.35);
  border-radius: 10px;
}
.navbar-mobile .dropdown > .dropdown-active,
.navbar-mobile .dropdown .dropdown > .dropdown-active{
  display:block;
}

/* ==========================================================
   7) Hero ✅ (más moderno + mejor contraste)
   ========================================================== */
#hero{
  width: 100%;
  position: relative;
  padding: 120px 0 0 0;
  isolation: isolate;
}
#hero:before{
  content:"";
  position:absolute;
  inset: 0;
  /* menos “plástico” que 0.91 y con verde oscuro */
  background: rgba(11, 49, 25, 0.62);
  z-index: -1;
}

#hero h1{
  margin: 0 0 16px 0;
  font-size: 42px;
  font-weight: 800;
  line-height: 1.1;
  color: rgba(255,255,255,.92);
}
#hero h1 span{
  color: #fff;
  border-bottom: 4px solid var(--green-500);
}
#hero h2{
  color: rgba(255,255,255,.86);
  margin-bottom: 22px;
  font-size: 22px;
  max-width: 56ch;
}

#hero .btn-get-started{
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .04em;
  display: inline-block;
  padding: 12px 28px;
  border-radius: 999px;
  transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
  color: #0b3119;
  background: var(--green-500);
  box-shadow: var(--shadow-sm);
}
#hero .btn-get-started:hover{
  background: var(--mint-400);
  transform: translateY(-1px);
}

#hero .animated{
  animation: up-down 2s ease-in-out infinite alternate-reverse both;
}

@media (min-width: 1024px){
  #hero{ background-attachment: fixed; }
}

@media (max-width: 991px){
  #hero{ padding-top: 90px; }
  #hero .animated{ animation: none; }
  #hero .hero-img{ text-align:center; }
  #hero .hero-img img{ max-width: 62%; margin-inline:auto; }
  #hero h1{ font-size: 32px; }
  #hero h2{ font-size: 18px; }
}
@media (max-width: 575px){
  #hero .hero-img img{ width: 82%; }
}

@keyframes up-down{
  0%{ transform: translateY(10px); }
  100%{ transform: translateY(-10px); }
}

.hero-waves{
  display:block;
  margin-top: 56px;
  width:100%;
  height: 30px;
  z-index: 5;
  position: relative;
}

/* Waves animation (igual que tu base) */
.wave1 use{ animation: move-forever1 10s linear infinite; animation-delay: -2s; }
.wave2 use{ animation: move-forever2 8s linear infinite;  animation-delay: -2s; }
.wave3 use{ animation: move-forever3 6s linear infinite;  animation-delay: -2s; }

@keyframes move-forever1{ 0%{ transform: translate(85px, 0%); } 100%{ transform: translate(-90px, 0%); } }
@keyframes move-forever2{ 0%{ transform: translate(-90px, 0%); } 100%{ transform: translate(85px, 0%); } }
@keyframes move-forever3{ 0%{ transform: translate(-90px, 0%); } 100%{ transform: translate(85px, 0%); } }

/* ==========================================================
   8) Sections ✅
   ========================================================== */
section{
  padding: 48px 0;
  overflow: visible; /* ✅ evita cortar sombras/menús */
}

.section-bg{ background-color: var(--surface); }

.section-title{ padding-bottom: 32px; }
.section-title h2{
  font-size: 13px;
  font-weight: 700;
  padding: 0;
  line-height: 1.2;
  margin: 0 0 10px 0;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  font-family: "Poppins", var(--font-body);
}
.section-title h2::after{
  content:"";
  width: 110px;
  height: 2px;
  display:inline-block;
  background: var(--green-500);
  margin: 4px 10px;
  border-radius: 999px;
}
.section-title p{
  margin: 0;
  font-size: 34px;
  font-weight: 900;
  text-transform: uppercase;
  font-family: "Poppins", var(--font-body);
  color: #0f172a;
}
@media (max-width: 575px){
  .section-title p{ font-size: 26px; }
}

/* ==========================================================
   9) Breadcrumbs ✅ (más estable con header sticky)
   ========================================================== */
.breadcrumbs{
  padding: 18px 0;
  background-color: #f8fafc;
  min-height: 40px;
  /* en lugar de margin-top fijo, dejamos que el layout respire con sticky */
}
.breadcrumbs h2{
  font-size: 22px;
  font-weight: 600;
  margin: 0;
}
.breadcrumbs ol{
  display:flex;
  flex-wrap:wrap;
  list-style:none;
  padding:0;
  margin:0;
  font-size: 14px;
  color: var(--muted);
}
.breadcrumbs ol li + li{ padding-left: 10px; }
.breadcrumbs ol li + li::before{
  display:inline-block;
  padding-right: 10px;
  color: #9ca3af;
  content:"/";
}
@media (max-width: 768px){
  .breadcrumbs .d-flex{ display:block !important; }
  .breadcrumbs ol{ display:block; }
  .breadcrumbs ol li{ display:inline-block; }
}

/* ==========================================================
   10) About ✅
   ========================================================== */
.about{ padding: 40px 0 0 0; }

.about .icon-boxes h3{
  font-size: 28px;
  font-weight: 900;
  color: #0f172a;
  margin-bottom: 12px;
}

.about .icon-box{ margin-top: 28px; }

.about .icon-box .icon{
  float:left;
  display:flex;
  align-items:center;
  justify-content:center;
  width: 64px;
  height: 64px;
  border: 2px solid rgba(31,233,27,.35);
  border-radius: 999px;
  transition: .25s ease;
  background: rgba(31,233,27,.06);
}

.about .icon-box .icon i{
  color: var(--green-600);
  font-size: 30px;
}

.about .icon-box:hover .icon{
  background: var(--green-500);
  border-color: var(--green-500);
}
.about .icon-box:hover .icon i{ color:#fff; }

.about .icon-box .title{
  margin-left: 85px;
  font-weight: 900;
  margin-bottom: 6px;
  font-size: 18px;
}
.about .icon-box .title a{ color:#111827; transition: .2s ease; }
.about .icon-box .title a:hover{ color: var(--green-600); }

.about .icon-box .description{
  margin-left: 85px;
  line-height: 24px;
  font-size: 14px;
  color: var(--muted);
}

/* Si no existe esa imagen en tu theme, no afecta */
.about .video-box{
  background: url("../img/about.png") center center no-repeat;
  background-size: contain;
  min-height: 300px;
}

/* Play button (lo mantengo, pero lo “verdeo” un poco) */
.about .play-btn{
  width: 94px;
  height: 94px;
  background: radial-gradient(var(--green-500) 50%, rgba(31,233,27,.25) 52%);
  border-radius: 50%;
  display: block;
  position: absolute;
  left: calc(50% - 47px);
  top: calc(50% - 47px);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.about .play-btn::after{
  content:"";
  position:absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-40%) translateY(-50%);
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 15px solid #fff;
  z-index: 100;
  transition: all 300ms ease;
}
.about .play-btn::before{
  content:"";
  position:absolute;
  width: 120px;
  height: 120px;
  animation: pulsate-btn 2s steps(60) infinite;
  opacity: 1;
  border-radius: 50%;
  border: 5px solid rgba(31,233,27,.45);
  top: -15%;
  left: -15%;
  background: transparent;
}
.about .play-btn:hover::after{
  border-left: 15px solid var(--green-900);
  transform: scale(20);
}
.about .play-btn:hover::before{
  animation: none;
  border-color: transparent;
}

@keyframes pulsate-btn{
  0%{ transform: scale(.6); opacity: 1; }
  100%{ transform: scale(1); opacity: 0; }
}

/* ==========================================================
   11) Features ✅
   ========================================================== */
.features .icon-box{
  display:flex;
  align-items:center;
  padding: 18px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  box-shadow: 0 2px 0 rgba(0,0,0,0.02);
}
.features .icon-box i{
  font-size: 28px;
  padding-right: 10px;
  line-height: 1;
  color: var(--green-600);
}
.features .icon-box h3{
  font-weight: 900;
  margin: 0;
  padding: 0;
  line-height: 1.2;
  font-size: 15px;
}
.features .icon-box h3 a{
  color: #0f172a;
  transition: .2s ease;
}
.features .icon-box h3 a:hover{ color: var(--green-600); }
.features .icon-box:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
  border-color: rgba(31,233,27,.35);
}

/* ==========================================================
   12) Counts ✅
   ========================================================== */
.counts{
  background: var(--surface);
  padding: 70px 0 60px;
}
.counts .count-box{
  padding: 34px 22px 26px;
  width: 100%;
  position: relative;
  text-align: center;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 2px 0 rgba(0,0,0,0.02);
}
.counts .count-box i{
  position:absolute;
  top: -24px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 18px;
  background: var(--green-500);
  padding: 12px;
  color: #0b3119;
  border-radius: 999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 48px;
  height: 48px;
  box-shadow: var(--shadow-sm);
}
.counts .count-box span{
  font-size: 34px;
  display:block;
  font-weight: 900;
  color: #0f172a;
}
.counts .count-box p{
  padding: 0;
  margin: 0;
  font-family: var(--font-head);
  font-size: 14px;
  color: var(--muted);
}

/* ==========================================================
   13) Details ✅
   ========================================================== */
.details .content + .content{ margin-top: 80px; }
.details .content h3{
  font-weight: 900;
  font-size: 24px;
  color: #0f172a;
}
.details .content ul{ list-style:none; padding:0; margin: 0 0 1rem 0; }
.details .content ul li{ padding-bottom: 10px; color: var(--text); }
.details .content ul i{
  font-size: 18px;
  padding-right: 6px;
  color: var(--green-600);
}
.details .content p:last-child{ margin-bottom: 0; }

/* ==========================================================
   14) Gallery ✅
   ========================================================== */
.gallery .gallery-item{
  overflow:hidden;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255,255,255,.75);
}
.gallery .gallery-item img{ transition: transform .35s ease; }
.gallery .gallery-item:hover img{ transform: scale(1.06); }

/* ==========================================================
   15) Testimonials ✅
   ========================================================== */
.testimonials{
  padding: 50px 0;
  background: url("../img/cta-bg.jpg") no-repeat;
  background-position: center center;
  background-size: cover;
  position: relative;
}
.testimonials::before{
  content:"";
  position:absolute;
  inset: 0;
  background: rgba(11,49,25,.78);
}
.testimonials .section-header{ margin-bottom: 40px; }
.testimonials .testimonials-carousel,
.testimonials .testimonials-slider{ overflow:hidden; }

.testimonials .testimonial-item{
  text-align:center;
  color:#fff;
  position: relative;
}
.testimonials .testimonial-item .testimonial-img{
  width: 96px;
  border-radius: 50%;
  border: 6px solid rgba(255,255,255,.18);
  margin: 0 auto;
}
.testimonials .testimonial-item h3{
  font-size: 20px;
  font-weight: 900;
  margin: 12px 0 6px 0;
  color:#fff;
}
.testimonials .testimonial-item h4{
  font-size: 14px;
  color: rgba(255,255,255,.85);
  margin: 0 0 15px 0;
}
.testimonials .testimonial-item .quote-icon-left,
.testimonials .testimonial-item .quote-icon-right{
  color: rgba(255,255,255,.45);
  font-size: 24px;
}
.testimonials .testimonial-item .quote-icon-left{ left:-5px; position: relative; }
.testimonials .testimonial-item .quote-icon-right{ right:-5px; position: relative; top: 10px; }
.testimonials .testimonial-item p{
  font-style: italic;
  margin: 0 auto 15px auto;
  color: rgba(255,255,255,.92);
  max-width: 70ch;
}

.testimonials .swiper-pagination{ margin-top: 20px; position: relative; }
.testimonials .swiper-pagination .swiper-pagination-bullet{
  width: 10px; height: 10px;
  opacity: 1;
  background-color: rgba(255,255,255,.35);
}
.testimonials .swiper-pagination .swiper-pagination-bullet-active{
  background-color: var(--green-500);
}
@media (min-width: 1024px){
  .testimonials{ background-attachment: fixed; }
}
@media (min-width: 992px){
  .testimonials .testimonial-item p{ width: 80%; }
}

/* ==========================================================
   16) Team ✅
   ========================================================== */
.team{ background:#fff; }
.team .member{
  text-align:center;
  margin-bottom: 80px;
  position: relative;
}
.team .member .pic{
  border-radius: var(--radius);
  overflow:hidden;
  box-shadow: var(--shadow-sm);
}
.team .member img{ transition: transform .35s ease; }
.team .member:hover img{ transform: scale(1.06); }

.team .member .member-info{
  position:absolute;
  bottom: -76px;
  left: 10px;
  right: 10px;
  background: rgba(255,255,255,.95);
  padding: 14px 14px;
  border-radius: 14px;
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
}
.team .member h4{
  font-weight: 900;
  margin-bottom: 8px;
  font-size: 16px;
  color: #0f172a;
  position: relative;
  padding-bottom: 10px;
}
.team .member h4::after{
  content:"";
  position:absolute;
  display:block;
  width: 50px;
  height: 2px;
  background: var(--green-500);
  bottom: 0;
  left: calc(50% - 25px);
  border-radius: 999px;
}
.team .member span{
  font-style: italic;
  display:block;
  font-size: 13px;
  color: var(--muted);
}
.team .member .social{ margin-top: 10px; }
.team .member .social a{ transition: .2s ease; color: #0f172a; }
.team .member .social a:hover{ color: var(--green-600); }
.team .member .social i{ font-size: 16px; margin: 0 4px; }

/* ==========================================================
   17) Pricing ✅
   ========================================================== */
.pricing .box{
  padding: 22px;
  background:#fff;
  text-align:center;
  box-shadow: 0 2px 0 rgba(0,0,0,0.02);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  position: relative;
  overflow:hidden;
}
.pricing h3{
  font-weight: 800;
  margin: -22px -22px 18px -22px;
  padding: 18px 14px;
  font-size: 15px;
  color: #111827;
  background: #f3f4f6;
}
.pricing h4{
  font-size: 34px;
  color: var(--green-600);
  font-weight: 900;
  font-family: "Poppins", var(--font-body);
  margin-bottom: 18px;
}
.pricing h4 sup{ font-size: 18px; top: -12px; left: -3px; }
.pricing h4 span{ color: var(--muted); font-size: 14px; font-weight: 600; }

.pricing ul{
  padding:0;
  list-style:none;
  color: var(--text);
  text-align:center;
  line-height: 20px;
  font-size: 14px;
}
.pricing ul li{ padding-bottom: 14px; }
.pricing ul i{ color: var(--green-500); font-size: 16px; padding-right: 6px; }
.pricing ul .na{ color: #cbd5e1; text-decoration: line-through; }

.pricing .btn-wrap{
  margin: 18px -22px -22px -22px;
  padding: 18px 14px;
  background: #f3f4f6;
}
.pricing .btn-buy{
  background: var(--green-500);
  display:inline-block;
  padding: 10px 28px;
  border-radius: 999px;
  color: #0b3119;
  font-size: 14px;
  font-weight: 900;
  font-family: var(--font-head);
  transition: transform .2s ease, background .2s ease;
}
.pricing .btn-buy:hover{
  background: var(--mint-400);
  transform: translateY(-1px);
}
.pricing .featured h3{
  color:#0b3119;
  background: var(--green-500);
}
.pricing .advanced{
  width: 200px;
  position:absolute;
  top: 18px;
  right: -68px;
  transform: rotate(45deg);
  z-index:1;
  font-size: 13px;
  padding: 2px 0 4px;
  background: var(--green-500);
  color: #0b3119;
  font-weight: 900;
}

/* ==========================================================
   18) FAQ ✅
   ========================================================== */
.faq .faq-list{ padding: 0; }
.faq .faq-list ul{ padding: 0; list-style:none; margin: 0; }
.faq .faq-list li + li{ margin-top: 14px; }
.faq .faq-list li{
  padding: 18px;
  background:#fff;
  border-radius: var(--radius);
  position: relative;
  border: 1px solid var(--border);
  box-shadow: 0 2px 0 rgba(0,0,0,0.02);
}
.faq .faq-list a{
  display:block;
  position:relative;
  font-family: "Poppins", var(--font-body);
  font-size: 15px;
  line-height: 24px;
  font-weight: 800;
  padding: 0 30px;
  outline:none;
  cursor:pointer;
  color: #111827;
}
.faq .faq-list .icon-help{
  font-size: 22px;
  position:absolute;
  right:0;
  left: 18px;
  color: var(--mint-400);
}
.faq .faq-list .icon-show,
.faq .faq-list .icon-close{
  font-size: 22px;
  position:absolute;
  right: 10px;
  top: 6px;
  color: var(--muted);
}
.faq .faq-list p{
  margin-bottom:0;
  padding: 10px 0 0 0;
  color: var(--muted);
}
.faq .faq-list .icon-show{ display:none; }
.faq .faq-list a.collapsed{ color:#111827; }
.faq .faq-list a.collapsed:hover{ color: var(--green-600); }
.faq .faq-list a.collapsed .icon-show{ display:inline-block; }
.faq .faq-list a.collapsed .icon-close{ display:none; }

@media (max-width: 1200px){
  .faq .faq-list{ padding: 0; }
}

/* ==========================================================
   19) Contact ✅
   ========================================================== */
.contact .info{
  width: 100%;
  background:#fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 2px 0 rgba(0,0,0,0.02);
  padding: 18px;
}
.contact .info i{
  font-size: 20px;
  color: var(--green-600);
  float:left;
  width: 44px;
  height: 44px;
  background: rgba(31,233,27,.10);
  display:flex;
  justify-content:center;
  align-items:center;
  border-radius: 999px;
  transition: .2s ease;
}
.contact .info h4{
  padding: 0 0 0 60px;
  font-size: 20px;
  font-weight: 900;
  margin-bottom: 5px;
  color:#0f172a;
}
.contact .info p{
  padding: 0 0 0 60px;
  margin-bottom:0;
  font-size: 14px;
  color: var(--muted);
}
.contact .info .email,
.contact .info .phone{ margin-top: 26px; }

.contact .info .email:hover i,
.contact .info .address:hover i,
.contact .info .phone:hover i{
  background: var(--green-500);
  color: #0b3119;
}

.contact .php-email-form{
  width:100%;
  background:#fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 2px 0 rgba(0,0,0,0.02);
  padding: 18px;
}
.contact .php-email-form .form-group{ padding-bottom: 10px; }
.contact .php-email-form .error-message{
  display:none;
  color:#fff;
  background:#ef4444;
  text-align:left;
  padding: 14px;
  font-weight: 900;
  border-radius: 12px;
}
.contact .php-email-form .sent-message{
  display:none;
  color:#0b3119;
  background: rgba(31,233,27,.35);
  text-align:center;
  padding: 14px;
  font-weight: 900;
  border-radius: 12px;
}
.contact .php-email-form .loading{
  display:none;
  background:#fff;
  text-align:center;
  padding: 14px;
}
.contact .php-email-form .loading:before{
  content:"";
  display:inline-block;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  margin: 0 10px -6px 0;
  border: 3px solid var(--green-500);
  border-top-color: #eee;
  animation: animate-loading 1s linear infinite;
}
.contact .php-email-form input,
.contact .php-email-form textarea{
  border-radius: 12px;
  box-shadow:none;
  font-size: 14px;
  border: 1px solid var(--border);
  padding: 10px 12px;
  width: 100%;
}
.contact .php-email-form input{ height: 44px; }
.contact .php-email-form textarea{ min-height: 120px; }

.contact .php-email-form button[type=submit]{
  background: var(--green-500);
  border: 0;
  padding: 12px 26px;
  color: #0b3119;
  transition: transform .2s ease, background .2s ease;
  border-radius: 999px;
  font-weight: 900;
}
.contact .php-email-form button[type=submit]:hover{
  background: var(--mint-400);
  transform: translateY(-1px);
}

@keyframes animate-loading{
  0%{ transform: rotate(0deg); }
  100%{ transform: rotate(360deg); }
}

/* ==========================================================
   20) Footer ✅
   ========================================================== */
#footer{
  background: var(--green-700);
  padding: 0 0 30px 0;
  color:#fff;
  font-size: 14px;
}
#footer .footer-top{ padding: 60px 0 30px 0; }

#footer .footer-top .footer-info{
  margin-bottom: 15px;
  background: var(--green-900);
  color:#fff;
  border-top: 4px solid var(--green-500);
  text-align:left;
  padding: 28px 20px;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
#footer .footer-top .footer-info h3{
  font-size: 22px;
  margin: 0 0 16px 0;
  line-height: 1.1;
  font-weight: 900;
}
#footer .footer-top .footer-info p{
  font-size: 14px;
  line-height: 24px;
  margin-bottom: 0;
  font-family: var(--font-head);
  color: rgba(255,255,255,.90);
}

#footer .footer-top .social-links a{
  font-size: 18px;
  display:inline-block;
  color:#fff;
  line-height: 1;
  padding: 8px 0;
  margin-right: 6px;
  border-radius: 999px;
  text-align:center;
  width: 38px;
  height: 38px;
  transition: .2s ease;
  background: rgba(255,255,255,.10);
}
#footer .footer-top .social-links a:hover{
  background: var(--green-500);
  color: #0b3119;
}

#footer .footer-top h4{
  font-size: 16px;
  font-weight: 900;
  color:#fff;
  position: relative;
  padding-bottom: 12px;
}

#footer .footer-top .footer-links{ margin-bottom: 30px; }
#footer .footer-top .footer-links ul{
  list-style:none;
  padding:0;
  margin:0;
}
#footer .footer-top .footer-links ul i{
  padding-right: 6px;
  color: rgba(52,229,166,.95);
  font-size: 16px;
  line-height: 1;
}
#footer .footer-top .footer-links ul li{
  padding: 10px 0;
  display:flex;
  align-items:center;
}
#footer .footer-top .footer-links ul li:first-child{ padding-top: 0; }
#footer .footer-top .footer-links ul a{
  color:#fff;
  transition: .2s ease;
  display:inline-block;
  line-height: 1.2;
}
#footer .footer-top .footer-links ul a:hover{ color: rgba(52,229,166,.95); }

#footer .footer-top .footer-newsletter form{
  margin-top: 18px;
  background:#fff;
  padding: 6px 10px 6px 15px;
  position: relative;
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
}
#footer .footer-top .footer-newsletter form input[type=email]{
  border:0;
  padding: 10px 8px;
  width: calc(100% - 110px);
  outline:none;
}
#footer .footer-top .footer-newsletter form input[type=submit]{
  position:absolute;
  top: 0;
  right: -2px;
  bottom: 0;
  border:0;
  font-size: 14px;
  padding: 0 20px;
  background: var(--green-500);
  color: #0b3119;
  transition: .2s ease;
  border-radius: 999px;
  font-weight: 900;
}
#footer .footer-top .footer-newsletter form input[type=submit]:hover{
  background: var(--mint-400);
}

#footer .copyright{
  border-top: 1px solid rgba(114,180,56,.55);
  text-align:center;
  padding-top: 26px;
}
#footer .credits{
  padding-top: 10px;
  text-align:center;
  font-size: 13px;
  color: rgba(255,255,255,.85);
}

@media (max-width: 575px){
  #footer .footer-top .footer-info{
    margin: 0 0 22px 0;
  }
}
/* Footer upgrades */
.site-footer .footer-title{
  font-weight: 700;
  letter-spacing: .02em;
}

.site-footer .footer-address{
  margin: 0 0 12px 0;
  font-style: normal;
  opacity: .95;
}

.site-footer .footer-contact li{
  margin-bottom: 8px;
}

.site-footer .footer-contact a{
  text-decoration: none;
}

.site-footer .footer-cta-btn{
  display: inline-block;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(255,255,255,.12);
  text-decoration: none;
  font-weight: 600;
}

.site-footer .footer-cta-btn:hover{
  background: rgba(255,255,255,.18);
}