/* =========================
   GLOBAL RESET
========================= */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Inter', sans-serif;
  background: #ffffff;
  color: #1A1A1A;
  padding-top: 80px;
  line-height: 1.6;
}

section {
  position: relative;
  padding: 80px 0;
}

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

h1, h2, h3 {
  font-family: 'Poppins', sans-serif;
}

h1 {
  font-size: 56px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -1px;
}

h2 {
  font-size: 44px;
  font-weight: 700;
  letter-spacing: -0.5px;
}

h3 {
  font-size: 22px;
  font-weight: 600;
}

p {
  font-size: 16px;
  color: #555;
}

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

.main-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 80px;
  background: #ffffff;
  display: flex;
  align-items: center;
  box-shadow: 0 4px 15px rgba(0,0,0,0.05);
  z-index: 1000;
  transition: all 0.3s ease;
}

.main-header.shrink {
  height: 65px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.08);
}

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

.brand-text {
  font-weight: 700;
  font-size: 22px;
  text-decoration: none;
  color: #0F6B43;
  transition: 0.3s ease;
}

.main-header.shrink .brand-text {
  font-size: 18px;
}
/* HEADER LOGO */

.brand-logo img{
height:60px;
width:auto;
display:block;
}
/* HEADER CTA */

.header-cta{
margin-left:25px;
font-size:14px;
padding:10px 22px;
}

/* active menu */

.nav-links a.active{
color:#0F6B43;
font-weight:600;
}

/* mobile */

@media(max-width:992px){

.header-cta{
display:none;
}

}

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

.nav-links {
  display: flex;
  align-items: center;
}

.nav-links a {
  margin-left: 30px;
  text-decoration: none;
  color: #1A1A1A;
  font-weight: 500;
  transition: 0.3s ease;
}

.nav-links a:hover {
  color: #0F6B43;
}

/* =========================
   HAMBURGER
========================= */

.hamburger {
  display: none;
  flex-direction: column;
  cursor: pointer;
  gap: 5px;
}

.hamburger span {
  width: 25px;
  height: 3px;
  background: #0F6B43;
  transition: 0.3s ease;
}

.hamburger.active span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

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

.hamburger.active span:nth-child(3) {
  transform: rotate(-45deg) translate(6px, -6px);
}

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

.hero {
  padding-top: 180px;
  padding-bottom: 140px;
}

.hero p {
  font-size: 18px;
  max-width: 520px;
  margin-top: 20px;
  margin-bottom: 35px;
  color: #666;
}
.hero h1{
text-shadow:0 6px 20px rgba(0,0,0,0.35);
}

.hero p{
text-shadow:0 3px 10px rgba(0,0,0,0.25);
}
.hero{
position:relative;
overflow:hidden;
transition:background 6s ease;
}
.hero h1{
color:#fff;
text-shadow:0 8px 25px rgba(0,0,0,0.4);
}

.hero p{
color:#e6edf3;
text-shadow:0 3px 12px rgba(0,0,0,0.25);
}
.hero{
background-size:200% 200%;
animation:skyMove 30s ease infinite;
}

@keyframes skyMove{
0%{background-position:0% 50%;}
50%{background-position:100% 50%;}
100%{background-position:0% 50%;}
}

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

.btn-primary-custom {
  background: #0F6B43;
  color: #ffffff;
  padding: 14px 30px;
  border-radius: 10px;
  text-decoration: none;
  display: inline-block;
  font-weight: 600;
  margin-right: 15px;
  transition: 0.3s ease;
}

.btn-primary-custom:hover {
  background: #0B4F32;
}

.btn-outline-custom {
  border: 2px solid #0F6B43;
  color: #0F6B43;
  padding: 14px 30px;
  border-radius: 10px;
  text-decoration: none;
  display: inline-block;
  font-weight: 600;
  transition: 0.3s ease;
}

.btn-outline-custom:hover {
  background: #0F6B43;
  color: #ffffff;
}

.btn-outline-light {
  border: 2px solid #ffffff;
  color: #ffffff;
  padding: 14px 30px;
  border-radius: 10px;
  text-decoration: none;
  display: inline-block;
  font-weight: 600;
  margin-left: 15px;
  transition: 0.3s ease;
}

.btn-outline-light:hover {
  background: #ffffff;
  color: #0F6B43;
}
.success-section .btn-outline-custom{
border:2px solid #0F6B43;
color:#0F6B43;
}

.success-section .btn-outline-custom:hover{
background:#0F6B43;
color:#fff;
}
.leads-section .btn-outline-custom{
border:2px solid #0F6B43;
color:#0F6B43;
font-weight:600;
padding:12px 28px;
opacity:1 !important;
}

.leads-section .btn-outline-custom:hover{
background:#0F6B43;
color:#fff;
}

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

.stats-section {
  background: linear-gradient(135deg, #0F6B43, #0B4F32);
  color: #ffffff;
  text-align: center;
}

.stats-section h2 {
  font-size: 48px;
  font-weight: 700;
  color: #F4D20C;
  letter-spacing: 1px;
}

.stats-section p {
  font-size: 15px;
  margin-top: 10px;
  color: #ffffff;
  opacity: 0.9;
}
/* =========================
   TRUSTED PLATFORMS SLIDER
========================= */

.platforms-section {
  background: #ffffff;
  padding: 120px 0;
}

.platforms-slider {
  overflow: hidden;
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
}

.platforms-track {
  display: flex;
  align-items: center;
  gap: 100px;
  animation: scrollPlatforms 20s linear infinite;
}

.platform-item {
  display: flex;
  align-items: center;
  justify-content: center;
}

.platform-item img {
  height: 50px;
  opacity: 0.6;
  filter: grayscale(100%);
  transition: all 0.3s ease;
}

.platform-item img:hover {
  opacity: 1;
  filter: grayscale(0%);
  transform: translateY(-3px);
}

@keyframes scrollPlatforms {

  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}
/* =========================
   SERVICES
========================= */

.services-section {
  background: #ffffff;
}

.section-subtitle {
  font-size: 18px;
  color: #666;
  max-width: 650px;
  margin: 15px auto 0;
}

.service-card {
  background: #ffffff;
  padding: 50px;
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.06);
  transition: all 0.35s ease;
  height: 100%;
  border-top: 4px solid #0F6B43;
  position: relative;
  overflow: hidden;
}

.service-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 45px rgba(0,0,0,0.08);
}
/* =========================
   SERVICE CARD GLOW EFFECT
========================= */

.service-card::before,
.service-card::after{
    pointer-events: none;
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 18px;
  padding: 2px;
  background: linear-gradient(120deg,#0F6B43,#F4D20C);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.service-card:hover::before {
  opacity: 1;
}

.service-card:hover {
  transform: translateY(-10px) scale(1.02);
  box-shadow: 0 25px 50px rgba(15,107,67,0.18);
}

/* =========================
   WHY SECTION
========================= */

.why-section {
  background: linear-gradient(135deg, #0F6B43, #0B4F32);
  color: #ffffff;
}

.section-subtitle-light {
  font-size: 18px;
  color: #d8f2e6;
  max-width: 650px;
  margin: 15px auto 0;
}

.why-card {
  background: rgba(255,255,255,0.1);
  padding: 45px;
  border-radius: 18px;
  transition: all 0.35s ease;
  height: 100%;
  border: 1px solid rgba(255,255,255,0.15);
}

.why-card:hover {
  background: rgba(255,255,255,0.18);
  transform: translateY(-8px);
}

.why-card h3 {
  color: #F4D20C;
}
.why-section p {
  color: #ffffff;
  opacity: 0.9;
}


/* =========================
   SUCCESS SECTION
========================= */

.case-card {
  background: #ffffff;
  padding: 50px;
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.06);
  transition: all 0.35s ease;
  height: 100%;
  border-top: 4px solid #F4D20C;
}

.case-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 45px rgba(0,0,0,0.08);
}

.case-metric {
  font-size: 32px;
  font-weight: 700;
  color: #0F6B43;
}

/* =========================
   LEADS SECTION
========================= */

.leads-section {
  background: #f9fafb;
  text-align: center;
}

.lead-card {
  background: #ffffff;
  padding: 15px;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.05);
  transition: 0.3s ease;
}

.lead-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 45px rgba(0,0,0,0.08);
}
/* =========================
   TESTIMONIALS
========================= */

.testimonials-section{
background:#f9fafb;
text-align:center;
}

.testimonial-slider{
padding-bottom:40px;
}

.testimonial-card{
background:#fff;
padding:40px;
border-radius:18px;
box-shadow:0 10px 30px rgba(0,0,0,0.06);
transition:0.3s ease;
height:100%;
}

.testimonial-card:hover{
transform:translateY(-6px);
box-shadow:0 20px 40px rgba(0,0,0,0.08);
}

.testimonial-rating{
color:#F4D20C;
font-size:20px;
margin-bottom:15px;
}

.testimonial-text{
font-style:italic;
color:#555;
margin-bottom:20px;
}

.testimonial-author strong{
display:block;
color:#0F6B43;
}

.testimonial-author span{
font-size:14px;
color:#777;
}
/* =========================
   CTA SECTION
========================= */

.cta-section {
  background: linear-gradient(135deg, #0F6B43, #0B4F32);
  color: #ffffff;
  text-align: center;
}

.cta-section h2 {
  font-size: 48px;
}

.cta-subtitle {
  font-size: 18px;
  max-width: 700px;
  margin: 0 auto 40px auto;
  color: #d8f2e6;
}
/* =========================
   CONTACT SECTION
========================= */

.contact-section {
  background: #f9fafb;
}

.contact-section input,
.contact-section textarea {
  border-radius: 10px;
  padding: 14px;
  border: 1px solid #ddd;
}

.contact-section input:focus,
.contact-section textarea:focus {
  outline: none;
  border-color: #0F6B43;
  box-shadow: 0 0 0 2px rgba(15,107,67,0.1);
}
/* =========================
   FOOTER SOCIAL
========================= */

.footer-social{
margin-top:20px;
display:flex;
align-items:center;
gap:16px;
}

.footer-social a{
color:#ccc;
font-size:20px;
transition:0.3s ease;
}

.footer-social a:hover{
color:#F4D20C;
transform:translateY(-2px);
}



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

.main-footer{
background:#111;
color:#ffffff;
padding:100px 0 40px 0;
}

.footer-logo img{
max-height:80px;
width:auto;
display:block;
margin-bottom:10px;
}

.footer-brand{
color:#F4D20C;
}

.footer-links{
list-style:none;
padding:0;
}

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

.footer-links a{
text-decoration:none;
color:#cccccc;
transition:0.3s ease;
}

.footer-links a:hover{
color:#F4D20C;
}

/* bottom copyright */

.footer-bottom{
margin-top:30px;
font-size:14px;
color:#aaa;
}


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

@media(max-width:768px){

.main-footer{
text-align:center;
}

.footer-social{
justify-content:center;
}

}

/* =========================
   SCROLL ANIMATION
========================= */

.fade-start {
  opacity: 0;
  transform: translateY(40px);
  transition: all 0.8s ease;
}

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

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

@media (max-width: 992px) {

  .nav-links {
    position: fixed;
    top: 80px;
    right: -100%;
    height: calc(100vh - 80px);
    width: 260px;
    background: #ffffff;
    flex-direction: column;
    padding: 40px 30px;
    box-shadow: -5px 0 20px rgba(0,0,0,0.08);
    transition: right 0.3s ease;
    z-index: 999;
  }

  .nav-links a {
    margin: 15px 0;
  }

  .nav-links.active {
    right: 0;
  }

  .hamburger {
    display: flex;
  }

  h1 {
    font-size: 42px;
  }

  h2 {
    font-size: 34px;
  }

  .hero {
    padding-top: 140px;
  }
}

@media (max-width: 768px) {
  section {
    padding: 100px 0;
  }

  h1 {
    font-size: 36px;
  }
}
/* =========================
   SUCCESS PAGE HERO
========================= */

.page-hero {
  padding: 160px 0 100px 0;
  text-align: center;
}

.page-subtitle {
  font-size: 18px;
  color: #666;
  margin-top: 15px;
}

/* =========================
   SUCCESS PAGE HERO
========================= */

.page-hero {
  padding: 180px 0 120px 0;
  background: linear-gradient(180deg, #ffffff 0%, #f9fafb 100%);
  text-align: center;
}

.page-hero h1 {
  font-size: 56px;
  letter-spacing: -1px;
}

.page-subtitle {
  font-size: 20px;
  color: #666;
  margin-top: 20px;
}

/* =========================
   CASE STUDIES PREMIUM
========================= */

.case-item {
  padding: 80px;
  border-radius: 24px;
  margin-bottom: 120px;
  background: #ffffff;
  box-shadow: 0 30px 80px rgba(0,0,0,0.05);
  position: relative;
  overflow: hidden;
}

.case-item::before {
  content: "";
  position: absolute;
  width: 120px;
  height: 120px;
  background: rgba(15,107,67,0.05);
  border-radius: 50%;
  top: -40px;
  right: -40px;
}

/* Tag */

.case-tag {
  display: inline-block;
  background: #F4D20C;
  color: #000;
  font-weight: 600;
  padding: 6px 16px;
  border-radius: 30px;
  font-size: 13px;
  margin-bottom: 25px;
}

/* Metrics */

.case-metrics {
  display: flex;
  gap: 50px;
  margin-top: 35px;
}

.case-metrics strong {
  display: block;
  font-size: 32px;
  color: #0F6B43;
}

.case-metrics span {
  font-size: 14px;
  color: #666;
}

/* =========================
   SCREENSHOT STYLE
========================= */

.case-image-placeholder,
.case-image {
  background: #ffffff;
  border-radius: 20px;
  box-shadow: 0 25px 60px rgba(0,0,0,0.08);
  padding: 15px;
}

.case-image img {
  width: 100%;
  border-radius: 14px;
}

/* Responsive */

@media (max-width: 992px) {
  .case-item {
    padding: 40px;
  }

  .case-metrics {
    flex-direction: column;
    gap: 20px;
  }
}
/* SERVICE DETAIL PAGE */

.service-hero {
  padding: 180px 0 100px 0;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafb 100%);
  text-align: center;
}

.service-image-wrapper {
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(0,0,0,0.08);
}

.service-image-wrapper img {
  width: 100%;
  display: block;
}

.service-content {
  padding: 120px 0;
}

.service-content-wrapper {
  max-width: 800px;
  margin: 0 auto;
  font-size: 18px;
  line-height: 1.8;
}
/*Lead Gallery PAGE */
.lead-card {
    background:#fff;
    padding:15px;
    border-radius:16px;
    box-shadow:0 10px 30px rgba(0,0,0,0.05);
    transition:0.3s ease;
}

.lead-card:hover {
    transform:translateY(-6px);
    box-shadow:0 20px 40px rgba(0,0,0,0.08);
}
/* =========================
   LEADS LIGHTBOX
========================= */

.lead-thumb {
  cursor: zoom-in;
  transition: 0.3s ease;
}

.lead-thumb:hover {
  transform: scale(1.02);
}

/* Lightbox overlay */

.lightbox {
  display: none;
  position: fixed;
  z-index: 9999;
  padding: 40px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.9);
  text-align: center;
}

/* Lightbox image */

.lightbox-img {
  max-width: 90%;
  max-height: 85vh;
  margin-top: 5vh;
  border-radius: 14px;
  box-shadow: 0 25px 70px rgba(0,0,0,0.5);
  animation: lightboxFade 0.25s ease;
}

/* Close button */

.lightbox-close {
  position: absolute;
  top: 25px;
  right: 40px;
  font-size: 40px;
  color: #fff;
  cursor: pointer;
}

/* Animation */

@keyframes lightboxFade {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
/* =========================
   LIGHTBOX NAVIGATION
========================= */

.lightbox-prev,
.lightbox-next {
  position: absolute;
  top: 50%;
  font-size: 40px;
  color: #fff;
  cursor: pointer;
  user-select: none;
  padding: 10px 15px;
  transform: translateY(-50%);
}

.lightbox-prev {
  left: 30px;
}

.lightbox-next {
  right: 30px;
}

.lightbox-prev:hover,
.lightbox-next:hover {
  opacity: 0.7;
}
/* =========================
   HERO PARTICLES
========================= */

.hero-particles {
  position: relative;
  overflow: hidden;
  min-height: 650px;
}

#heroParticles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: 0.8;
}

.hero .container {
  position: relative;
  z-index: 2;
}
/* =========================
   HERO PARTICLES NETWORK
========================= */

.hero-particles {
  position: relative;
  overflow: hidden;
  min-height: 650px;
}

#heroParticles{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  pointer-events:none;
  opacity:0.9;
}

.hero .container {
  position: relative;
  z-index: 2;
}
/* =========================
   SERVICES STAGGER ANIMATION
========================= */

.service-item {
  opacity: 0;
  transform: translateY(40px);
  transition: all 0.7s ease;
}

.service-item.show {
  opacity: 1;
  transform: translateY(0);
}
/* =========================
   BRAND COLOR TEXT
========================= */

.text-green{
  color:#0F6B43;
}

.text-gold{
  color:#0F6B43;
  border-bottom:3px solid #F4D20C;
  padding-bottom:2px;
}

/* Platform review text */

.platform-review-text{
  font-size:16px;
  color:#666;
  margin-bottom:50px;
}
/* =========================
   HERO BUTTON MOBILE FIX
========================= */

@media (max-width:768px){

.hero .btn-primary-custom,
.hero .btn-outline-custom{
display:block;
width:100%;
margin-right:0;
margin-bottom:15px;
text-align:center;
}

}
/* =========================
   CONTACT PAGE
========================= */

.contact-page-section{
background:#f9fafb;
}

.contact-info p{
margin-bottom:20px;
font-size:16px;
}

.contact-form-wrapper{
background:#ffffff;
padding:40px;
border-radius:16px;
box-shadow:0 15px 40px rgba(0,0,0,0.06);
}
/* =========================
   BLOG
========================= */

.blog-card{
background:#fff;
padding:30px;
border-radius:16px;
box-shadow:0 10px 30px rgba(0,0,0,0.05);
height:100%;
transition:0.3s ease;
}

.blog-card:hover{
transform:translateY(-6px);
box-shadow:0 20px 40px rgba(0,0,0,0.08);
}

.blog-content{
font-size:18px;
line-height:1.8;
max-width:800px;
}

.blog-category{
display:inline-block;
background:#F4D20C;
color:#000;
font-size:12px;
padding:4px 12px;
border-radius:20px;
margin-top:15px;
margin-bottom:10px;
font-weight:600;
letter-spacing:0.3px;
transition:0.2s ease;
}
/* Blog Single page */
.blog-card:hover .blog-category{
background:#0F6B43;
color:#fff;
}
.table-of-contents{
background:#f9fafb;
padding:20px;
border-radius:12px;
margin-bottom:30px;
}

.table-of-contents ul{
padding-left:20px;
}

.table-of-contents li{
margin-bottom:8px;
}
.breadcrumbs{
font-size:14px;
color:#777;
margin-bottom:15px;
}

.breadcrumbs a{
color:#0F6B43;
text-decoration:none;
}

.breadcrumbs a:hover{
text-decoration:underline;
}
/* =========================
   RESOURCES
========================= */

.resource-card{
background:#fff;
padding:30px;
border-radius:16px;
box-shadow:0 10px 30px rgba(0,0,0,0.05);
transition:0.3s ease;
}

.resource-card:hover{
transform:translateY(-6px);
box-shadow:0 20px 40px rgba(0,0,0,0.08);
}
/* RESOURCE POPUP */

.resource-popup{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.6);
display:none;
align-items:center;
justify-content:center;
z-index:9999;
}

.popup-inner{
background:#fff;
padding:40px;
border-radius:14px;
max-width:420px;
width:90%;
text-align:center;
position:relative;
}

.popup-close{
position:absolute;
top:12px;
right:16px;
font-size:22px;
cursor:pointer;
}
/* =========================
PREMIUM COOKIE CONSENT
========================= */

.cookie-consent{
position:fixed;
bottom:25px;
left:50%;
transform:translateX(-50%);
z-index:9999;
display:none;
animation:cookieSlide 0.6s ease;
}

.cookie-box{
background:rgba(20,20,20,0.95);
backdrop-filter:blur(12px);
border-radius:14px;
padding:22px 24px;
max-width:520px;
width:90vw;
box-shadow:0 10px 40px rgba(0,0,0,0.5);
border:1px solid rgba(255,255,255,0.08);
}

.cookie-text h5{
font-size:16px;
font-weight:600;
margin-bottom:6px;
color:#fff;
}

.cookie-text p{
font-size:14px;
color:#bbb;
margin-bottom:15px;
line-height:1.5;
}

.cookie-actions{
display:flex;
align-items:center;
gap:10px;
flex-wrap:wrap;
}

.cookie-btn{
padding:10px 18px;
border-radius:6px;
border:none;
font-size:14px;
cursor:pointer;
font-weight:600;
}

/* ACCEPT */

.cookie-btn.accept{
background:#0f6b43;
color:#fff;
}

.cookie-btn.accept:hover{
background:#0d5c3a;
}

/* REJECT */

.cookie-btn.reject{
background:#333;
color:#fff;
}

.cookie-btn.reject:hover{
background:#444;
}

/* POLICY LINK */

.cookie-link{
font-size:13px;
color:#F4D20C;
text-decoration:none;
}

.cookie-link:hover{
text-decoration:underline;
}

/* ANIMATION */

@keyframes cookieSlide{

from{
transform:translate(-50%,40px);
opacity:0;
}

to{
transform:translate(-50%,0);
opacity:1;
}

}

/* MOBILE */

@media(max-width:600px){

.cookie-box{
padding:20px;
}

.cookie-actions{
flex-direction:column;
align-items:stretch;
}

.cookie-btn{
width:100%;
}

}
.footer-legal{
font-size:14px;
color:#bbb;
}

.footer-legal a{
color:#bbb;
text-decoration:none;
margin:0 6px;
}

.footer-legal a:hover{
color:#F4D20C;
}

.footer-divider{
margin:0 6px;
opacity:0.4;
}

/* How we generate page */
.process-card{
background:#fff;
padding:30px;
border-radius:12px;
box-shadow:0 10px 30px rgba(0,0,0,0.08);
text-align:center;
transition:0.3s;
}

.process-card:hover{
transform:translateY(-6px);
}
/*Our process page*/
.process-timeline{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:30px;
}

.process-step{
background:#fff;
padding:30px;
border-radius:10px;
box-shadow:0 10px 25px rgba(0,0,0,0.07);
}

.step-number{
font-size:28px;
font-weight:700;
color:#0f6b43;
}

/* CTA Section of About how and process */
.cta-section{
background:#0f6b43;
padding:100px 0;
text-align:center;
color:#ffffff;
}

.cta-section h2{
color:#ffffff;
font-weight:700;
font-size:42px;
margin-bottom:15px;
}

.cta-section p{
color:#e6f2ec;
font-size:18px;
margin-bottom:30px;
}

.cta-section .btn-primary-custom{
background:#f4d20c;
color:#000;
padding:14px 32px;
border-radius:8px;
font-weight:600;
}

.cta-section .btn-primary-custom:hover{
background:#ffd500;
}
.cta-section{
background:#0f6b43;
padding:100px 0;
text-align:center;
color:#ffffff;
}

.cta-section h2{
color:#ffffff;
font-weight:700;
font-size:42px;
margin-bottom:15px;
}

.cta-section p{
color:#e6f2ec;
font-size:18px;
margin-bottom:30px;
}

.cta-section .btn-primary-custom{
background:#f4d20c;
color:#000;
padding:14px 32px;
border-radius:8px;
font-weight:600;
}

.cta-section .btn-primary-custom:hover{
background:#ffd500;
}
/* Our Process page steps*/
.process-timeline{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:40px;
margin-top:40px;
}

.process-step{
background:#fff;
padding:35px;
border-radius:12px;
box-shadow:0 12px 30px rgba(0,0,0,0.08);
transition:0.3s;
}

.process-step:hover{
transform:translateY(-6px);
}

.step-number{
font-size:30px;
font-weight:700;
color:#0f6b43;
display:block;
margin-bottom:10px;
}
.case-item{
padding:40px 0;
border-bottom:1px solid #eee;
}

.case-tag{
display:inline-block;
background:#0F6B43;
color:#fff;
padding:5px 12px;
border-radius:20px;
font-size:12px;
}

.case-desc{
margin-top:15px;
color:#555;
line-height:1.6;
}

.case-metrics{
display:flex;
gap:15px;
flex-wrap:wrap;
}

.metric-box{
background:#f8f9fa;
padding:10px 15px;
border-radius:10px;
}

.metric-box strong{
display:block;
font-size:18px;
color:#0F6B43;
}

.metric-box span{
font-size:13px;
color:#666;
}

.case-image-wrap{
border-radius:15px;
overflow:hidden;
box-shadow:0 15px 40px rgba(0,0,0,0.08);
transition:0.3s;
}

.case-image-wrap img{
width:100%;
}

.case-image-wrap:hover{
transform:scale(1.03);
}
.case-hero{
background: linear-gradient(135deg,#0F6B43,#0a4f32);
color:#fff;
padding:100px 0;
}

.case-hero h1{
font-size:42px;
margin-bottom:20px;
}

.case-hero .lead{
max-width:700px;
margin:auto;
opacity:0.9;
}

.case-category{
margin-top:10px;
opacity:0.7;
}

.case-metrics{
background:#f8f9fa;
padding:50px 0;
}

.case-metrics h2{
color:#0F6B43;
font-size:32px;
}

.case-image{
max-width:800px;
}

.case-content{
max-width:800px;
margin:auto;
}

.case-content h2{
margin-top:40px;
font-size:26px;
color:#0F6B43;
}

.case-content p{
line-height:1.7;
color:#444;
}
.case-summary{
max-width:700px;
margin:20px auto;
opacity:0.9;
font-size:18px;
}

.hero-metrics{
display:flex;
justify-content:center;
gap:40px;
margin-top:30px;
flex-wrap:wrap;
}

.hero-metrics strong{
display:block;
font-size:28px;
color:#F4D20C;
}

.hero-metrics span{
font-size:14px;
opacity:0.8;
}
/* HERO */
.case-hero{
background: linear-gradient(135deg,#0F6B43,#0a4f32);
color:#fff;
padding:120px 0 140px;
text-align:center;
}

.case-summary{
max-width:700px;
margin:20px auto;
font-size:18px;
opacity:0.9;
}

.hero-metrics{
display:flex;
justify-content:center;
gap:40px;
margin-top:30px;
flex-wrap:wrap;
}

.hero-metrics strong{
display:block;
font-size:28px;
color:#F4D20C;
}

/* IMAGE */
.case-image-section{
margin-top:-80px;
}

.case-image{
width:100%;
max-width:100%;
height:auto;
display:block;
border-radius:12px;
}
.case-image-section{
padding:0 15px;
text-align:center;
}

.case-image-section img{
max-width:100%;
height:auto;
}

/* CONTENT CARD */
.case-content-card{
background:#fff;
padding:50px;
border-radius:18px;
box-shadow:0 20px 60px rgba(0,0,0,0.08);
margin-top:-100px;
position:relative;
z-index:2;
max-width:900px;
margin-left:auto;
margin-right:auto;
}

.case-block{
margin-top:15px;
line-height:1.8;
color:#444;
}

.case-content-card h2{
margin-top:40px;
font-size:26px;
color:#0F6B43;
}

.case-content-card h2::after{
content:'';
width:50px;
height:3px;
background:#F4D20C;
display:block;
margin-top:10px;
}

/* TESTIMONIAL */
.testimonial-card{
background:#f8f9fa;
padding:30px;
border-radius:15px;
margin-top:40px;
text-align:center;
box-shadow:0 10px 30px rgba(0,0,0,0.05);
}

.testimonial-rating{
color:#F4D20C;
font-size:20px;
margin-bottom:10px;
}

.testimonial-text{
font-size:16px;
font-style:italic;
color:#333;
margin-bottom:15px;
}

.testimonial-user{
font-size:14px;
color:#555;
}

/* RESULT */
.result-highlight{
background:#0F6B43;
color:#fff;
padding:25px;
border-radius:12px;
margin-top:30px;
font-size:18px;
}

/* CTA */
.cta-section{
background: linear-gradient(135deg,#0F6B43,#0a4f32);
color:#fff;
padding:100px 0;
margin-top:60px;
}
/* =========================
   ANIMATED TIMELINE
========================= */

.process-wrapper-animated{
position:relative;
margin-top:80px;
}

/* vertical line */
.timeline-progress{
position:absolute;
left:50%;
top:0;
width:3px;
height:0%;
background:#0F6B43;
transform:translateX(-50%);
transition:height 0.2s ease-out;
}

/* layout */
.process-timeline{
display:flex;
flex-direction:column;
gap:80px;
}

/* step */
.process-step{
position:relative;
width:50%;
padding:20px 30px;
opacity:0;
transform:translateY(40px);
transition:all 0.6s ease;
}

/* alternating left/right */
.process-step:nth-child(odd){
left:0;
text-align:right;
}

.process-step:nth-child(even){
left:50%;
}

/* dot */
.step-dot{
position:absolute;
top:20px;
width:60px;
height:60px;
border-radius:50%;
background:#ddd;
display:flex;
align-items:center;
justify-content:center;
font-weight:700;
color:#333;
transition:0.3s;
}

/* dot positions */
.process-step:nth-child(odd) .step-dot{
right:-30px;
}

.process-step:nth-child(even) .step-dot{
left:-30px;
}

/* active state */
.process-step.active{
opacity:1;
transform:translateY(0);
}

.process-step.active .step-dot{
background:#0F6B43;
color:#fff;
box-shadow:0 0 0 8px rgba(15,107,67,0.15);
}
@media(max-width:768px){

.timeline-progress{
left:20px;
}

.process-step{
width:100%;
left:0 !important;
text-align:left !important;
padding-left:60px;
}

.step-dot{
left:0 !important;
right:auto !important;
}

}
/* =========================
   404 SPACE EXPERIENCE
========================= */

.error-404-pro{
min-height:100vh;
display:flex;
align-items:center;
justify-content:center;
position:relative;
overflow:hidden;
color:#fff;
text-align:center;
background:#020617;
}

/* CANVAS */
#starfield{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index:0;
}

/* CONTENT ABOVE */
.error-404-pro .container{
position:relative;
z-index:2;
}

/* ROCKET */
.rocket{
font-size:50px;
position:absolute;
top:20%;
left:50%;
cursor:pointer;
transition:transform 0.2s ease;
}

/* SCORE */
.score-box{
position:absolute;
top:20px;
right:20px;
background:rgba(255,255,255,0.1);
padding:8px 15px;
border-radius:20px;
font-size:14px;
}

/* TEXT */
.error-code{
font-size:120px;
font-weight:800;
}

.error-text{
color:#cbd5f5;
max-width:500px;
margin:15px auto;
}

/* BUTTON */
.btn-outline-custom{
border:2px solid #fff;
color:#fff;
}

.btn-outline-custom:hover{
background:#fff;
color:#000;
}
.blog-card .btn-outline-custom{
border:2px solid #0F6B43;
color:#0F6B43;
}
.section .btn-outline-custom{
border:2px solid #0F6B43;
color:#0F6B43;
}
.btn-outline-custom{
border:2px solid #0F6B43;
color:#0F6B43;
background:#f9fafb;
}

.btn-outline-custom:hover{
background:#0F6B43;
color:#fff;
}
/* =========================
   NEWSLETTER FIXED UI
========================= */

.newsletter-form{
margin-top:20px;
}

/* INPUT + BUTTON ROW */
.newsletter-row{
display:flex;
gap:10px;
}

/* INPUT */
.newsletter-row input{
flex:1;
padding:14px;
border-radius:8px;
border:1px solid #444;
background:#111;
color:#fff;
}

/* BUTTON */
.newsletter-row button{
background:#0F6B43;
color:#fff;
border:none;
padding:14px 24px;
border-radius:8px;
cursor:pointer;
white-space:nowrap;
transition:0.3s ease;
}

.newsletter-row button:hover{
background:#0a4f32;
}
/* =========================
   NEWSLETTER FIX (FINAL)
========================= */

.newsletter-row{
display:flex;
gap:12px;
width:100%;
}

/* FIX INPUT COMPLETELY */
.newsletter-row input{
flex:1 1 auto;
width:100%;
min-width:200px;   /* VERY IMPORTANT */
height:52px;
padding:0 16px;
border-radius:8px;
border:1px solid #444;
background:#111;
color:#fff;
font-size:15px;
outline:none;
display:block;
}

/* BUTTON */
.newsletter-row button{
flex:0 0 auto;
height:52px;
padding:0 24px;
background:#0F6B43;
color:#fff;
border:none;
border-radius:8px;
cursor:pointer;
white-space:nowrap;
}

/* MOBILE */
@media(max-width:576px){

.newsletter-row{
flex-direction:column;
}

.newsletter-row input,
.newsletter-row button{
width:100%;
}

}
/* =========================
   CHECKBOX
========================= */

.newsletter-consent{
margin-top:10px;
display:flex;
align-items:flex-start;
gap:8px;
font-size:13px;
color:#aaa;
}

.newsletter-consent input{
margin-top:3px;
accent-color:#0F6B43;
cursor:pointer;
}

.newsletter-consent label{
line-height:1.4;
cursor:pointer;
}

.newsletter-consent a{
color:#0F6B43;
text-decoration:underline;
}
@media(max-width:576px){

.newsletter-row{
flex-direction:column;
}

.newsletter-row button{
width:100%;
}

}
/* =========================
   WHATSAPP FLOAT BUTTON
========================= */

.whatsapp-float{
position:fixed;
bottom:150px; /* above tawk.to */
right:20px;
width:55px;
height:55px;
background:#25D366;
color:#fff;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-size:26px;
box-shadow:0 8px 25px rgba(0,0,0,0.2);
z-index:999;
transition:0.3s ease;
}

.whatsapp-float:hover{
transform:scale(1.1);
background:#1ebe5d;
}
/*FAQ*/
/* FAQ Section */
.faq-section {
  padding: 60px 0;
}

.faq-title {
  text-align: center;
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 40px;
}

/* FAQ Item */
.faq-item {
  border-bottom: 1px solid #eee;
  margin-bottom: 10px;
}

/* Question */
.faq-question {
  width: 100%;
  background: none;
  border: none;
  padding: 18px 0;
  text-align: left;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Icon */
.faq-question .icon {
  font-size: 22px;
  transition: transform 0.3s ease;
}

/* Answer */
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}

.faq-answer p {
  padding: 10px 0 20px;
  color: #555;
}

/* Active State */
.faq-item.active .faq-answer {
  max-height: 200px;
}

.faq-item.active .icon {
  transform: rotate(45deg);
}
/* =========================
   GIF LOADER
========================= */

#siteLoader{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:#000; /* or your brand color */
display:flex;
align-items:center;
justify-content:center;
z-index:9999;
transition:opacity 0.5s ease, visibility 0.5s ease;
}

.loader-gif{
width:120px; /* adjust size */
height:auto;
}

/* HIDE */
body.loaded #siteLoader{
opacity:0;
visibility:hidden;
}