/* ==========================================================================
   India Is Us — i2u Social Foundation
   Custom design system on top of Bootstrap 5
   ========================================================================== */

:root {
  /* Brand palette */
  --brand-green: #1f7a5e;
  --brand-green-deep: #14614a;
  --brand-green-dark: #14261f;
  --brand-accent: #e6b054;
  --brand-accent-soft: #f2d08a;

  /* Surfaces & text */
  --bg: #f8f8f4;
  --surface: #ffffff;
  --card: #fdfdfb;
  --ink: #2b2b2b;
  --ink-muted: #6b7280;
  --secondary-soft: #e8f3ee;
  --line: rgba(43, 43, 43, 0.09);

  --on-dark: #fbfbf7;
  --on-dark-muted: rgba(251, 251, 247, 0.72);

  /* Gradients */
  --gradient-primary: linear-gradient(135deg, var(--brand-green-deep), var(--brand-green));
  --gradient-warm: linear-gradient(135deg, var(--brand-accent), #f0c46a);
  --gradient-veil: linear-gradient(180deg, rgba(16, 38, 30, .74) 0%, rgba(16, 38, 30, .42) 45%, rgba(11, 27, 21, .70) 100%);

  /* Shadows & radii */
  --shadow-soft: 0 1px 2px rgba(20, 38, 31, .05), 0 8px 24px -12px rgba(20, 38, 31, .18);
  --shadow-lift: 0 24px 48px -24px rgba(20, 38, 31, .35);
  --radius: 1.5rem;
}

/* ---------- Base ---------- */
* { border-color: var(--line); }

html { scroll-behavior: smooth; }

body {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  background-color: var(--bg);
  width: 100vw;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, .font-display {
  font-family: "Poppins", "Inter", sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
}

a { text-decoration: none; }

.section { padding: 60px 0; }
@media (max-width: 767.98px) { .section { padding: 4rem 0; } }

.text-muted-ink { color: var(--ink-muted) !important; }
.text-on-dark { color: var(--on-dark) !important; }
.text-on-dark-muted { color: var(--on-dark-muted) !important; }
.text-brand { color: var(--brand-green) !important; }
.text-accent { color: var(--brand-accent) !important; }
.bg-brand { background: var(--gradient-primary) !important; }
.bg-soft { background-color: var(--secondary-soft) !important; }
.bg-dark-green { background-color: var(--brand-green-dark) !important; }

.lead-muted { color: var(--ink-muted); font-size: 16px; line-height: 1.35; }

/* ---------- Eyebrow label ---------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--brand-green);
  background: var(--secondary-soft);
  border-radius: 999px;
  box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
  padding: 6px 14px;
}
.eyebrow--on-dark {
  color: var(--on-dark);
  background: rgba(255, 255, 255, .12);
  backdrop-filter: blur(8px);
}

/* ---------- Buttons ---------- */
.btn {
  border-radius: 999px;
  font-weight: 600;
  padding: 14px 18px;
  transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease;
}
.btn:hover { transform: translateY(-2px); }

.btn-brand {
  background: var(--gradient-primary);
  color: var(--on-dark);
  border: none;
  box-shadow: var(--shadow-soft);
}
.btn-brand:hover, .btn-brand:focus { color: var(--on-dark); box-shadow: var(--shadow-lift); }

.btn-accent {
  background: var(--gradient-warm);
  color: #2b2b2b;
  border: none;
}
.btn-accent:hover, .btn-accent:focus { color: #2b2b2b; }

.btn-ghost-light {
  border: 1px solid rgba(255, 255, 255, .35);
  color: var(--on-dark);
  background: rgba(255, 255, 255, .08);
  backdrop-filter: blur(8px);
}
.btn-ghost-light:hover, .btn-ghost-light:focus { color: var(--on-dark); background: rgba(255, 255, 255, .18); }

.btn-outline-brand { border: 1px solid var(--brand-green); color: var(--brand-green); }
.btn-outline-brand:hover { background: var(--brand-green); color: var(--on-dark); }

/* ---------- Navbar ---------- */
.site-nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1030;
  padding: 1rem 0;
  transition: background-color .35s ease, box-shadow .35s ease, padding .35s ease;
}
.site-nav.scrolled {
  background: rgba(20, 38, 31, .92);
  backdrop-filter: blur(14px);
  padding: .5rem 0;
  box-shadow: 0 10px 30px -20px rgba(0, 0, 0, .8);
}
.site-nav .nav-link {
  color: var(--on-dark-muted);
  font-size: .9rem;
  font-weight: 500;
  padding: .5rem .9rem;
}
.site-nav .nav-link:hover, .site-nav .nav-link:focus { color: var(--on-dark); }

.brand-mark {
  width: 42px; height: 42px;
  border-radius: 1rem;
  background: var(--gradient-primary);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--on-dark);
}
.navbar-toggler { border-color: rgba(255,255,255,.3); }
.navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255,0.85)' stroke-width='2' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}
@media (max-width: 991.98px) {
  .site-nav .navbar-collapse {
    background: rgba(20, 38, 31, .97);
    border-radius: var(--radius);
    margin-top: .75rem;
    padding: 1rem;
  }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  color: var(--on-dark);
  overflow: hidden;
}
.hero__media { position: absolute; inset: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero__media::after { content: ""; position: absolute; inset: 0; background: var(--gradient-veil); }
.hero__inner { position: relative; z-index: 2; padding: 9rem 0 5rem; }
.hero h1 { font-size: 65px; line-height: 1; }
.hero p.lead { color: #ffffffd9;font-weight:400; max-width: 600px; font-size: 16px; line-height: 1.3; }

.glass-card {
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .18);
  backdrop-filter: blur(16px);
  border-radius: var(--radius);
  padding: 20px;
  position: absolute;
  max-width: 400px;
  bottom: 4rem;
  right: 0%;
  color: var(--on-dark);
}
.glass-card{
    animation: floatCard 4s ease-in-out infinite;
}

@keyframes floatCard{
    0%{
        transform:translateY(0);
    }
    25%{
        transform:translateY(-4px);
    }
    50%{
        transform:translateY(4px);
    }
    75%{
        transform:translateY(-4px);
    }
    100%{
        transform:translateY(0);
    }
}
/* ---------- Cards ---------- */
.soft-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  transition: transform .3s ease, box-shadow .3s ease;
  height: 100%;
}
.soft-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lift); }

/* Stats */

.impact-img{
  height: 100%;
  width: 100%;
  object-fit: cover;
  position: relative;
}

.impact-img .floating-para{
  position: absolute;
  bottom:35px;
  left:50%;
  transform: translateX(-50%);
  min-width: 400px;
  padding: 1rem;
  background-color: #00000094;
  border-radius: 10px;
  color:#fff;
}
.impact-img .floating-para p{
  margin-bottom:0;
}
.impact-img img{
  height: 100%;
  width: 100%;
  object-fit: cover;
}
.stat-card { padding: 20px; height:240px}
.stat-card .stat-value {
  font-family: "Poppins", sans-serif;
  font-size:30px;
  font-weight: 600;

  line-height: 1;
}

.stat-card p{
    color: var(--brand-green);
    font-size: 20px;
    line-height: 1.35;
}
.stat-icon {
  width: 44px; height: 44px; border-radius: .9rem;
  background: var(--secondary-soft);
  color: var(--brand-green);
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 15px;
}
.stat-icon i{
  font-size: 24px;
}
/* Focus areas */
.focus-card {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  min-height: 260px;
  display: flex;
  align-items: flex-end;
  box-shadow: var(--shadow-soft);
}
.focus-card img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .6s ease;
}
.focus-card::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(16,38,30,0) 30%, rgba(16,38,30,.85) 100%);
}
.focus-card:hover img { transform: scale(1.08); }
.focus-card__body { position: relative; z-index: 2; padding: 1.5rem; color: var(--on-dark); }
.focus-card__body h3 { font-size: 18px; margin-bottom: .25rem; }
.focus-card__body p { font-size: 14px; color: var(--on-dark-muted); margin: 0; }

/* Story cards */
.story-card { overflow: hidden; display: flex; flex-direction: column;height:420px }
.story-card__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.story-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.story-card:hover .story-card__media img { transform: scale(1.06); }
.story-card__date {
  position: absolute; top: 1rem; right: 1rem;
  background: rgba(255,255,255,.92);
  color: var(--ink);
  font-size: 13px; font-weight: 600;
  padding: .35rem .8rem; border-radius: 999px;
}
.story-card__body { padding: 1.5rem; display: flex; flex-direction: column; gap: .6rem; flex: 1; }
.pill {
  display: inline-block;
  font-size: 12px; font-weight: 600;
  padding: .3rem .75rem; border-radius: 999px;
  background: var(--secondary-soft); color: var(--brand-green-deep);
}
.pill--muted { background: rgba(43,43,43,.06); color: var(--ink-muted); }
.link-arrow { color: var(--brand-green); font-weight: 600; font-size: 16px; }
.link-arrow:hover { color: var(--brand-green-deep); }

/* ---------- Before / After slider ---------- */
.ba {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  user-select: none;
  cursor: ew-resize;
  box-shadow: var(--shadow-soft);
}
.ba img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ba__before { clip-path: inset(0 calc(100% - var(--pos, 50%)) 0 0); }
.ba__handle {
  position: absolute; top: 0; bottom: 0;
  left: var(--pos, 50%);
  width: 3px; background: #fff;
  box-shadow: 0 0 0 1px rgba(0,0,0,.12);
  z-index: 3;
}
.ba__handle::after {
  content: "⇆";
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 40px; height: 40px; border-radius: 50%;
  background: #fff; color: var(--brand-green);
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; box-shadow: var(--shadow-soft);
}
.ba__tag {
  position: absolute; bottom: .9rem; z-index: 3;
  font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: #fff; background: rgba(16,38,30,.6);
  padding: .3rem .7rem; border-radius: 999px;
  backdrop-filter: blur(6px);
}
.ba__tag--left { left: .9rem; }
.ba__tag--right { right: .9rem; }

.img-responsive {
    display: block;
    height: auto;
    max-width: 100%;
}

/* ---------- Timeline ---------- */
/*======================================
      Horizontal Timeline
======================================*/

.impact-timeline-section{
    background:#fff;
}

.impact-label{

    display:inline-block;

    text-transform:uppercase;

    letter-spacing:4px;

    color:#0b7a56;

    font-weight:700;

    font-size:15px;

    margin-bottom:18px;
}

.impact-heading{

    font-size:64px;

    font-weight:800;

    color:#222;

    margin-bottom:90px;
}

.impact-timeline{

    position:relative;

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    gap:30px;
}

.impact-line{

    position:absolute;

    top:34px;

    left:0;

    right:0;

    height:1px;

    background:#e4e4e4;

    z-index:0;
}

.impact-item{

    position:relative;

    flex:1;

    z-index:2;
}

.impact-year{

    width:72px;

    height:72px;

    border-radius:50%;

    background:#fff;

    border:1px solid #e6e6e6;

    display:flex;

    justify-content:center;

    align-items:center;

    font-weight:700;

    font-size:18px;

    color:#0b7a56;

    box-shadow:0 8px 20px rgba(0,0,0,.08);
    transition:.3s;

    margin-bottom:45px;
}

.impact-item:hover .impact-year{

    background:#0b7a56;

    color:#fff;

    border:none;
}

.impact-content h4{

    font-size:18px;

    font-weight:700;

    color:#222;

    line-height:1.4;

    margin-bottom:18px;
}

.impact-content p{

    color:#707070;
    font-size:16px;
    line-height:1.4;

    margin:0;
}
.impact-timeline{
    gap:0;
}

.impact-item{
    padding-right:35px;
}
/*====================
      Responsive
=====================*/

@media(max-width:991px){

    .impact-heading{

        font-size:46px;

        margin-bottom:60px;
    }

    .impact-timeline{

        overflow-x:auto;

        padding-bottom:15px;

        gap:60px;
    }

    .impact-item{

        min-width:260px;
    }

}

@media(max-width:576px){

    .impact-heading{

        font-size:34px;
    }

    .impact-year{

        width:60px;

        height:60px;

        font-size:22px;
    }

    .impact-content h4{

        font-size:20px;
    }

    .impact-content p{

        font-size:16px;
    }

}


/* ---------- Quote ---------- */
.testimonial-section{

    background:#0b6f49;

    padding:40px 0;

    text-align:center;

    overflow:hidden;
}

.testimonial-tag{

    display:inline-block;

    text-transform:uppercase;

    letter-spacing:4px;

    color:#f6b126;

    font-weight:700;

    font-size:15px;

    /* margin-bottom:55px; */
}

.quote-icon{

    font-size:70px;

    color:#f6b126;

    margin-bottom:0px;
}

.testimonial-text{

    max-width:720px;
    margin:0 auto 35px;

    color:#fff;

    font-size:24px;

    line-height:1.35;

    font-weight:300;
}

.testimonial-item h4{

    color:#fff;

    font-size:18px;

    font-weight:600;

    margin-bottom:0px;
}

.testimonial-item span{

    color:rgba(255,255,255,.7);

    font-size:15px;
}

/* Slick */

.testimonial-slider{

    position:relative;

    padding-bottom:50px;
}

.testimonial-slider .slick-slide{

    outline:none;
}

/* dots */

.testimonial-slider .slick-dots{

    position:absolute;

    bottom:0;

    width:100%;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:12px;

    list-style:none;

    padding:0;

    margin:0;
}

.testimonial-slider .slick-dots li{

    width:12px;

    height:12px;

    border-radius:50%;

    background:rgba(255,255,255,.35);

    cursor:pointer;

    transition:.3s;
}

.testimonial-slider .slick-dots li button{

    display:none;
}

.testimonial-slider .slick-dots .slick-active{

    width:42px;

    border-radius:30px;

    background:#f6b126;
}

/* arrows */

.testimonial-slider .slick-prev,
.testimonial-slider .slick-next{

    width:40px;

    height:40px;

    border-radius:50%;

    border:1px solid rgba(255,255,255,.25);

    z-index:5;
}

.testimonial-slider .slick-prev{

    left:50%;

    transform:translateX(-150px);

    bottom:-15px;

    top:auto;
}

.testimonial-slider .slick-next{

    right:50%;

    transform:translateX(150px);

    bottom:-15px;

    top:auto;
}

 /* .testimonial-slider .slick-prev:before,
.testimonial-slider .slick-next::before{

    font-size:30px;

    color:#fff;

    opacity:1;
} */

.testimonial-slider .slick-prev:before {
    content: '←' !important;
    font-family: "slick" !important;
    font-size: 22px !important;
    /* color: var(--brand-green) !important; */
    opacity: 1 !important;
}

.testimonial-slider .slick-next:before {
    content: '→' !important;
    font-family: "slick" !important;
    font-size: 22px !important;
    /* color: var(--brand-green) !important; */
    opacity: 1 !important;
}

.testimonial-slider .slick-prev:hover,
.testimonial-slider .slick-next:hover{

    background:rgba(255,255,255,.08);
}
.slick-dotted.slick-slider{
margin-bottom: 0 !important;
}
/* Responsive */

@media(max-width:992px){

    .testimonial-section{

        padding:80px 0;
    }

    .testimonial-text{

        font-size:36px;
    }

    .testimonial-item h4{

        font-size:26px;
    }

    .testimonial-item span{

        font-size:18px;
    }

}

@media(max-width:576px){

    .testimonial-text{

        font-size:28px;
    }

    .quote-icon{

        font-size:55px;
    }

}
/* ---------- Report progress ---------- */
.metric-bar { height: 8px; background: rgba(43,43,43,.08); border-radius: 999px; overflow: hidden; }
.metric-bar span { display: block; height: 100%; border-radius: 999px; background: var(--gradient-primary); }

/* ---------- Partner marquee ---------- */
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee__track { display: flex; gap: 3.5rem; width: max-content; animation: marquee 28s linear infinite; }
.marquee__item { font-family: "Poppins", sans-serif; font-weight: 700; font-size: 2.7rem; color: var(--ink-muted); opacity: .7; white-space: nowrap; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- CTA ---------- */
.cta {
  position: relative;
  /* border-radius: var(--radius); */
  overflow: hidden;
  color: var(--on-dark);
  isolation: isolate;
}
.cta img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.cta::after { content: ""; position: absolute; inset: 0; background: var(--gradient-veil); z-index: -1; }

/* ---------- Map / reach ---------- */
.reach-badge {
  background: var(--gradient-warm);
  color: #2b2b2b;
  border-radius: var(--radius);
  padding: 1.5rem 2rem;
  display: inline-block;
  box-shadow: var(--shadow-soft);
}
.pin-dot {
  position: absolute; width: 12px; height: 12px; border-radius: 50%;
  background: var(--brand-accent); box-shadow: 0 0 0 6px rgba(230,176,84,.25);
}
.pin-dot::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  border: 2px solid var(--brand-accent);
  animation: pin-pulse 2.4s ease-out infinite;
}
@keyframes pin-pulse { 0% { opacity: .85; transform: scale(.6); } 100% { opacity: 0; transform: scale(2.4); } }

/* ---------- Footer ---------- */
.site-footer { background: var(--brand-green-dark); color: var(--on-dark-muted); padding: 4.5rem 0 2rem; }
.site-footer h5 { color: var(--on-dark); font-size: .95rem; letter-spacing: .04em; margin-bottom: 1rem; }
.site-footer a { color: var(--on-dark-muted); font-size: .9rem; display: inline-block; padding: .2rem 0; }
.site-footer a:hover { color: var(--brand-accent); }
.site-footer .form-control {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.16);
  color: var(--on-dark);
  border-radius: 999px;
  padding: .7rem 1.1rem;
}
.site-footer .form-control::placeholder { color: rgba(251,251,247,.5); }
.site-footer .form-control:focus { background: rgba(255,255,255,.12); box-shadow: none; border-color: var(--brand-accent); color: var(--on-dark); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.12); margin-top: 3rem; padding-top: 1.5rem; font-size: .82rem; }

/* ---------- Reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .marquee__track { animation: none; }
}



/* ===========================
   Bootstrap 5 Utility Classes
   for Bootstrap 3.0.3
=========================== */

/* Row Gap */
.g-5{
    margin:-24px;
}
.g-5 > [class*="col-"]{
    padding:24px;
}

/* Flex */
.d-flex{
    display:flex;
}

.flex-wrap{
    flex-wrap:wrap;
}

.align-items-end{
    align-items:flex-end;
}

/* Gap */
.gap-1{gap:.25rem;}
.gap-2{gap:.5rem;}
.gap-3{gap:1rem;}
.gap-4{gap:1.5rem;}
.gap-5{gap:3rem;}

/* Margin Top */
.mt-0{margin-top:0!important;}
.mt-1{margin-top:.25rem!important;}
.mt-2{margin-top:.5rem!important;}
.mt-3{margin-top:1rem!important;}
.mt-4{margin-top:1.5rem!important;}
.mt-5{margin-top:3rem!important;}

/* Margin Bottom */
.mb-0{margin-bottom:0!important;}
.mb-1{margin-bottom:.25rem!important;}
.mb-2{margin-bottom:.5rem!important;}
.mb-3{margin-bottom:1rem!important;}
.mb-4{margin-bottom:1.5rem!important;}
.mb-5{margin-bottom:3rem!important;}

/* Padding Top */
.pt-0{padding-top:0!important;}
.pt-1{padding-top:.25rem!important;}
.pt-2{padding-top:.5rem!important;}
.pt-3{padding-top:1rem!important;}
.pt-4{padding-top:1.5rem!important;}
.pt-5{padding-top:3rem!important;}

/* Margin Start (Left) */
.ms-1{margin-left:.25rem!important;}
.ms-2{margin-left:.5rem!important;}
.ms-3{margin-left:1rem!important;}
.ms-4{margin-left:1.5rem!important;}
.ms-5{margin-left:3rem!important;}

/* Lead Paragraph */
.lead{
    font-size:1.25rem;
    font-weight:300;
    line-height:1.6;
}

/* Border Top */
.border-top{
    border-top:1px solid #dee2e6;
}

/* Bootstrap Heading */
.h1,.h2,.h3,.h4,.h5,.h6{
    font-weight:500;
    line-height:1.2;
}

.h1{font-size:2.5rem;}
.h2{font-size:2rem;}
.h3{font-size:1.75rem;}
.h4{font-size:1.5rem;}
.h5{font-size:1.25rem;}
.h6{font-size:1rem;}



/* =====================================
   Missing Bootstrap 5 Utilities
   (Not included in previous CSS)
===================================== */

/* Flex Justify */
.justify-content-center{
    justify-content:center;
}

/* Margin Bottom */
.mb-5{
    margin-bottom:3rem !important;
}

.mb-1{
    margin-bottom:.25rem !important;
}

/* Margin Top */
.mt-1{
    margin-top:.25rem !important;
}

.mt-2{
    margin-top:.5rem !important;
}

.mt-3{
    margin-top:1rem !important;
}

/* Bootstrap Display Heading */
.display-6{
    font-size:34px;
    font-weight:700;
    line-height:1.2;
}

/* Rounded Corners */
.rounded-4{
    border-radius:1rem;
}

/* Font Weight */
.fw-semibold{
    font-weight:600;
}

/* Font Sizes */
.text-lg{
    font-size:20px;
}

.text-sm{
    font-size:16px;
}

/* Grid Gap */
.g-4{
    margin:-12px;
}

.g-4 > [class*="col-"]{
    padding:12px;
}

.text-center{
text-align:center !important;
}

/* =====================================
   Additional Bootstrap 5 Utilities
===================================== */

/* Padding */
.p-5{
    padding:3rem !important;
}

.py-0{
    padding-top:0 !important;
    padding-bottom:0 !important;
}

.py-5{
    padding-top:3rem !important;
    padding-bottom:3rem !important;
}

/* Auto Horizontal Margin */
.mx-auto{
    margin-left:auto !important;
    margin-right:auto !important;
}
/* =====================================
   Additional Bootstrap 5 Utilities
===================================== */

/* Flex Alignment */
.align-items-center{
    align-items:center;
}

/* Flex Justify */
.justify-content-between{
    justify-content:space-between;
}

/* Margin Bottom */
.mb-3{
    margin-bottom:1rem !important;
}

/* Margin End (Right) */
.me-2{
    margin-right:.5rem !important;
}

/* Responsive Image */
.img-fluid{
    display:block;
    max-width:100%;
    height:auto;
}

/* =====================================
   Additional Bootstrap 5 Utilities
===================================== */

/* Flex Gap */
.gap-2{
    gap:.5rem;
}

/* Heading */
.h5{
    font-size:1.25rem;
    font-weight:500;
    line-height:1.2;
}

/* Auto Top Margin (Pushes item to bottom in flex) */
.mt-auto{
    margin-top:auto !important;
}

/* ==========================================
   BEFORE / AFTER SLICK SLIDER
========================================== */

.before-after-section {
    overflow: hidden;
}

.before-after-slider {
    position: relative;
    margin: 0 -12px;
}

/* Each Slick slide */
.before-after-slider .ba-slide {
    padding: 0 12px;
    outline: none;
}

/* Keep all cards equal */
.before-after-slider .ba-slide h4 {
    font-size: 18px;
    font-weight: 700;
}

.before-after-slider .ba-slide p {
    font-size: 15px;
    line-height: 1.5;
    margin-bottom: 0;
}

/* Slick slide */
.before-after-slider .slick-slide {
    outline: none;
}

/* Prevent horizontal overflow */
.before-after-slider .slick-list {
    overflow: hidden;
}

/* ==========================
   ARROWS
========================== */

.before-after-slider .slick-prev,
.before-after-slider .slick-next {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #ffffff;
    border: 1px solid rgba(31, 122, 94, 0.20);
    box-shadow: 0 6px 20px rgba(20, 38, 31, 0.15);
    z-index: 10;

    top: 40%;
    transform: translateY(-50%);
}

.before-after-slider .slick-prev {
    left: -28px;
}

.before-after-slider .slick-next {
    right: -28px;
}

.before-after-slider .slick-prev:before {
    content: '←' !important;
    font-family: "slick" !important;
    font-size: 22px !important;
    color: var(--brand-green) !important;
    opacity: 1 !important;
}

.before-after-slider .slick-next:before {
    content: '→' !important;
    font-family: "slick" !important;
    font-size: 22px !important;
    color: var(--brand-green) !important;
    opacity: 1 !important;
}

.before-after-slider .slick-prev:hover,
.before-after-slider .slick-next:hover {
    background: var(--brand-green);
}

.before-after-slider .slick-prev:hover:before,
.before-after-slider .slick-next:hover:before {
    color: #fff;
}

/* ==========================
   DOTS
========================== */

.before-after-slider .slick-dots {
    position: relative;
    bottom: auto;

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

    margin: 30px 0 0;
    padding: 0;

    list-style: none;
}

.before-after-slider .slick-dots li {
    width: 10px;
    height: 10px;
    margin: 0 5px;
}

.before-after-slider .slick-dots li button {
    width: 10px;
    height: 10px;
    padding: 0;
}

.before-after-slider .slick-dots li button:before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--brand-green);
    opacity: .25;
}

.before-after-slider .slick-dots li.slick-active button:before {
    opacity: 1;
}

/* ==========================
   TABLET
========================== */

@media (max-width: 991px) {

    .before-after-slider {
        margin: 0 -10px;
    }

    .before-after-slider .ba-slide {
        padding: 0 10px;
    }

    .before-after-slider .slick-prev {
        left: -10px;
    }

    .before-after-slider .slick-next {
        right: -10px;
    }
}

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

@media (max-width: 767px) {

    .before-after-slider {
        margin: 0;
    }

    .before-after-slider .ba-slide {
        padding: 0 5px;
    }

    .before-after-slider .slick-prev,
    .before-after-slider .slick-next {
        width: 38px;
        height: 38px;
        top: 38%;
    }

    .before-after-slider .slick-prev {
        left: 5px;
    }

    .before-after-slider .slick-next {
        right: 5px;
    }

    .before-after-slider .slick-prev:before,
    .before-after-slider .slick-next:before {
        font-size: 18px;
    }

    .before-after-slider .slick-dots {
        margin-top: 25px;
    }
}