/*---------------------------------------------------------------
  Template Name: FireFront | Fire Department & Rescue Landing Page Template
  Description: FireFront – Professional Fire Department & Rescue Landing Page Template designed to showcase fire services, emergency response, and safety missions
  with modern UI.
  Author: Lucid ThemesLab
  Author URL: https://www.templatemonster.com/store/lucid_themeslab/
  Version: 1.0.0
-----------------------------------------------------------------

        CSS INDEX
        ==================
        01.   Basic Styles
        02.   Preloader Style 
        03.   Theme Switch Button Styles 
        04.   Header Top Styles
        05.   Navbar Styles
        06.   Home Banner Styles
        07.   About Section Styles
        08,   Service Section Styles
        09.   Why Choose Section Styles
        10.   Testimonials Section Styles
        12.   CTA Section Styles
        13.   Team Section Styles
        14.   Gallery Section Styles
        15.   Counter Section Styles
        16.   How we Work Section Styles
        17.   Contact Section Styles  
        18.   Footer Section Styles
        19.   Back to top Styles

----------------------------------------------------------------*/

@import url(main.css);

* {
  font-family: var(--secondary-font);
}

a {
  color: inherit;
  text-decoration: none;
}

a:hover {
  color: inherit;
  text-decoration: none;
}

::placeholder {
  color: var(--nav-text) !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Unbounded", sans-serif;
  letter-spacing: 1.0px;
}

.error:not(.form-control) {
  color: #ed2626;
  font-size: 13px;
  margin-bottom: 30px;
  background-color: var(--alt-color);
  font-weight: 600;
  padding: 5px;
  margin-left: 9px !important;
  margin-top: 4px;
  text-transform: capitalize;
}

.error {
  background-color: var(--card-color);
}

.error-pos {
  position: relative;
}

.error-pos .error:not(.form-control) {
  position: absolute;
  top: 98%;
  background-color: var(--alt-color);
  left: 15px;
  margin-left: 20px !important;
  font-size: 14px;
  text-transform: capitalize;
}

.subtile {
  background-color: var(--card-color);
}

@media (max-width: 991.98px) {
  .offcanvas-header {
    background-color: var(--card-color);
    color:  var(--white-color);
  }

  .offcanvas-body {
    background-color: var(--alt-color);
  }

  .offcanvas-header .btn-close {
    all: unset;
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    cursor: pointer;
    background-color: var(--primary-color);
    transition: background-color 0.3s ease;
    color: var(--white-color);
  }

  .offcanvas-header .btn-close:hover {
    background-color: #ffffff33;
  }

  #offcanvasbutton {
    width: 45px;
    height: 45px;
    background-color: var(--primary-color);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.3s ease;
    padding: 0;
    color: var(--white-color);
  }
}

#offcanvasbutton:hover {
  background-color: #ffffff33;
}

#offcanvasbutton i {
  font-size: 1.25rem;
  color: #fff;
}

.site-logo {
  width: 150;
  height: 104;
  height: auto;
  display: block;
}

/*================================================
   Preloader Overlay Styles
=================================================*/

#firefront-preloader {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at center, #1a1a1a 0%, #000 100%);
  z-index: 9999;
  color: #fff;
  transition: opacity 1s ease, visibility 1s ease;
  animation: bgPulse 3s infinite alternate ease-in-out;
}

@keyframes bgPulse {
  0% {
    background: radial-gradient(circle at center, #1a1a1a 0%, #000 100%);
  }

  100% {
    background: radial-gradient(circle at center, #2b0b00 0%, #000 100%);
  }
}

/* Icon container */
.firefront-icon {
  position: relative;
  width: 100px;
  height: 100px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--primary-color);
  box-shadow: 0 0 45px rgba(255, 60, 0, 0.45);
  overflow: hidden;
}

/* Animated flame inside */
.firefront-flame {
  position: absolute;
  bottom: 8px;
  width: 48px;
  height: 72px;
  background: radial-gradient(circle at 50% 80%, #ffd480 0%, #ff6b00 40%, #ff3000 85%);
  border-radius: 50% 50% 20% 20%;
  animation: flameMove 1.2s infinite alternate ease-in-out;
  filter: drop-shadow(0 0 15px #ff4000);
}

@keyframes flameMove {
  0% {
    transform: scale(1) translateY(0);
    opacity: 1;
  }

  100% {
    transform: scale(1.15) translateY(-6px);
    opacity: 0.9;
  }
}

/* Fire icon */
.firefront-icon::before {
  content: "\f06d";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  color: #fff;
  font-size: 38px;
  position: relative;
  z-index: 2;
  animation: iconPulse 1.4s infinite ease-in-out;
}

@keyframes iconPulse {

  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }

  50% {
    transform: scale(1.1);
    opacity: 0.85;
  }
}

/* 🔥 Fire Animated Text */
.firefront-title {
  position: relative;
  margin-top: 30px;
  color: rgba(255, 255, 255, 0.2);
  /* base visible text */
  overflow: hidden;
}

.firefront-title::before {
  content: "Fire Front";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(120deg, #ffcc33, #ff6600, #ff3300, #ffcc33);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: fireFlow 1.8s linear infinite;
  filter: brightness(1.5) drop-shadow(0 0 15px #ff4500);
}

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

  100% {
    background-position: 200% 50%;
  }
}

/* Progress bar */
.firefront-progressbar {
  width: 180px;
  height: 6px;
  margin-top: 25px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  overflow: hidden;
  position: relative;
}

.firefront-progress {
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, #ffd480, #ff6b00, #ff3300);
  border-radius: 10px;
  animation: loadBar 3.5s ease-in-out forwards;
}

@keyframes loadBar {
  0% {
    width: 0%;
  }

  100% {
    width: 100%;
  }
}

/* Shimmer effect */
.firefront-progress::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(120deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 60%);
  transform: translateX(-100%);
  animation: shimmer 2.5s infinite;
}

@keyframes shimmer {
  100% {
    transform: translateX(100%);
  }
}

.firefront-tagline {
  margin-top: 12px;
  font-size: 13px;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, 0.8);
  text-transform: uppercase;
  animation: fadeInText 3s infinite alternate;
}

@keyframes fadeInText {
  0% {
    opacity: 0.6;
  }

  100% {
    opacity: 1;
  }
}

/* Fade-out */
#firefront-preloader.hidden {
  opacity: 0;
  visibility: hidden;
}

.banner-main .splide__arrow {
  background: var(--white-color);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.3s ease;
  opacity: 1;
  top: 50%;
}

/* Default icon (SVG) fill color */
.banner-main .splide__arrow svg {
  fill: var(--primary-color);
  transition: fill 0.3s ease;
}

/* On hover: change button background and icon color together */
.banner-main .splide__arrow:hover {
  background: var(--primary-color);
  box-shadow: 0 0.8rem 1.2rem rgba(0, 0, 0, 0.2);
}

.banner-main .splide__arrow:hover svg {
  fill: var(--white-color);
}

/* Responsive spacing */
@media (max-width: 576px) {
 .banner-main .splide__arrow {
  top: 64%;
}
}

/* Default desktop position (as usual) */
.banner-main .splide__arrow--prev {
  left: 1rem;
}

.banner-main .splide__arrow--next {
  right: 1rem;
}

/* Mobile view adjustment */
@media (max-width: 767px) {
 .banner-main .splide__arrows {
    position: absolute;
    right: 10px;
    bottom: 10px; /* ya top: 10px;  agar upar chahiye */
    display: flex;
    gap: 8px;
    z-index: 10;
  }

  .banner-main .splide__arrow {
    position: static; /* Remove default absolute position */
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

 .banner-main .splide__arrow svg {
    width: 16px;
    height: 16px;
  }
}

/*================================================
   Theme Switch Button Styles
=================================================*/

#btnSwitch {
  top: 200px;
  z-index: 2;
}

/* Responsive spacing */
@media (max-width: 576px) {
  #btnSwitch {
    top: 130px;
  }

  .banner-content h2 {
    font-size: 30px;
  }
}

/*================================================
   Header Top Styles
=================================================*/

.social-circle {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: var(--secondary-2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white-text);
}

.social-circle:hover {
  background-color: var(--primary-color);
  transition: 0.3s ease-in;
  color: var(--white-text);
}

.social-circle.profile-circle {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: var(--secondary-color);
  color: var(--white-text);
  display: flex;
  align-items: center;
  justify-content: center;
}

.social-circle.profile-circle:hover {
  background-color: var(--primary-color);
  color: var(--white-text);
}

/*================================================
   Navbar Styles
=================================================*/

.nav-link {
  position: relative;
}

.nav-item.active .nav-link {
  color: var(--prime-text) !important;
}

.btn-close {
  background: unset;
}

.nav-item.active .nav-link {
  position: relative;
  display: inline-block;
  /* Important for text-width underline */
}

.nav-item.active .nav-link::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  border-bottom: 1px solid var(--prime-border);
}

/* Thinner on mobile */
@media (max-width: 576px) {
  .nav-item.active .nav-link::after {
    border-bottom: 0.5px solid var(--prime-border);
  }
}


/* Navbar general styles */
.navbar-nav .nav-link {
  color: var(--heading-text);
  transition: color 0.3s ease;
}

/* Responsive spacing */
@media (min-width: 992px) {
  .offcanvas.offcanvas-end {
    position: static;
    transform: none;
    visibility: visible !important;
    background-color: transparent;
    border: none;
    display: flex !important;
    flex-grow: 1;
    padding: 0;
  }

  .offcanvas-body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0;
  }

  .offcanvas-header {
    display: none;
  }

  .navbar-toggler {
    display: none;
  }
}

/* Sticky Navbar */
nav.navbar {
  position: sticky;
  top: 0;
  z-index: 1050;
  background-color: var(--body-color);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  transition: all 0.5s;
}

/*================================================
 Home Banner Styles
=================================================*/

.banner-main .splide__slide {
  background-size: cover;
  background-position: center;
  min-height: 800px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.banner-main .slide-1 {
  background: linear-gradient(0deg, rgba(var(--dark-rgb), 0.7), rgba(var(--dark-rgb), 0.7)),
    url("../../assets/images/background-img/bg_1.webp");
  background-size: cover;
  background-position: center;
}

.banner-main .slide-2 {
  background: linear-gradient(0deg, rgba(var(--dark-rgb), 0.7), rgba(var(--dark-rgb), 0.7)),
    url("../../assets/images/background-img/bg_2.webp");
  background-size: cover;
  background-position: center;
}

.banner-main .slide-3 {
  background: linear-gradient(0deg, rgba(var(--dark-rgb), 0.7), rgba(var(--dark-rgb), 0.7)),
    url("../../assets/images/background-img/bg_3.webp");
  background-size: cover;
  background-position: center;
}

.banner-content {
  max-width: 900px;
  margin: 0 auto;
}

@media (max-width: 991px) {
  .banner-main .splide__slide {
    min-height: 400px;
  }

  .banner-text.display-1 {
    font-size: 2rem;
  }

  .banner-text.fs-1 {
    font-size: 1rem;
  }
}

/*================================================
 About Section Styles
=================================================*/
.about-section {
  position: relative;
  overflow: hidden;
}

.about-img {
  width: 100%;
  max-height: 500px;
  object-fit: cover;
  transition: transform 0.4s ease;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.about-img:hover {
  transform: scale(1.03);
}

.highlight-box {
  background: var(--alt-color);
  border-left: 4px solid var(--primary-color);
}

.highlight-img {
  width: 150px;
  height: auto;
}

.feature-item {
  font-weight: 600;
  color: var(--para-text);
  padding: 0.5rem 0;
  display: flex;
  align-items: center;
  transition:  0.3s ease;
}

.feature-item:hover {
  color: var(--primary-color);
  transform: translateX(5px);
}

@media (max-width: 768px) {
  .highlight-box {
    flex-direction: column;
    text-align: center;
  }

  .highlight-img {
    width: 200px;
    margin-bottom: 10px;
  }

  .about-img {
    max-height: 350px;
  }
}

.circle-bg {
  width: 25px;
  height: 25px;
  background-color: var(--primary-color);
  border-radius: 50%;
  text-align: center;
}

/*================================================
 Service Section Styles
=================================================*/

.services-section {
  background: var(--alt-color);
  position: relative;
  overflow: hidden;
}

.services-section::before {
  content: "";
  position: absolute;
  top: -80px;
  left: -80px;
  width: 200px;
  height: 200px;
  background: rgba(255, 0, 0, 0.1);
  border-radius: 50%;
  z-index: 0;
}

.services-section::after {
  content: "";
  position: absolute;
  bottom: -100px;
  right: -100px;
  width: 300px;
  height: 300px;
  background: rgba(255, 0, 0, 0.08);
  border-radius: 50%;
  z-index: 0;
}

.service-card {
  background: var(--card-color);
  border-radius: 15px;
  padding: 40px 30px;
  text-align: center;
  transition: all 0.4s ease;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.service-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0%;
  height: 100%;
  background: var(--theme-gradient);
  transition: all 0.4s ease;
  z-index: -1;
  border-radius: 15px;
}

.service-card:hover::before {
  width: 100%;
}

.service-icon {
  font-size: 50px;
  color: var(--primary-color);
  margin-bottom: 20px;
  transition: all 0.3s ease;
}

.service-card:hover .service-icon {
  color:  var(--white-color);
  transform: scale(1.1);
}

.service-card h5 {
  font-weight: 700;
  margin-bottom: 15px;
}

.service-card:hover h5,
.service-card:hover p {
  color:  var(--white-color) !important;
}

.section-title h2 {
  position: relative;
  display: inline-block;
}

.section-title h2::after {
  content: "";
  position: absolute;
  width: 60px;
  height: 4px;
  background: var(--theme-gradient);
  left: 50%;
  bottom: -10px;
  transform: translateX(-50%);
  border-radius: 5px;
}

/*================================================
   How it works Section Styles
=================================================*/

.step-card {
  transition: all 0.4s ease;
  background-color: var(--card-color);
  border: 2px solid var(--prime-border-color);
  border-radius: 1rem;
  padding: 2rem 1.5rem;
  position: relative;
  z-index: 1;
  overflow: hidden;
  text-align: center;
}

.step-card:hover {
  background-color: var(--primary-color);
  transform: translateY(-8px);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  border-color: var(--primary-color);
}

.icon-box .icon-box-img {
  width: 60px;
  height: 52px;
}

/* Icon Box Styling */
.step-card .icon-box {
  background-color: var(--light-bg);
  border: 2px dashed var(--primary-color);
  border-radius: 50%;
  padding: 15px;
  width: 90px;
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  transition: all 0.4s ease;
}

.step-card:hover .icon-box {
  background-color: var(--secondary-color);
  border-color: var(--secondary-color);
}

.step-card:hover .icon-box img {
  filter: brightness(0) invert(1);
}

/* Text Colors on Hover */
.step-card h5,
.step-card p {
  transition: color 0.3s ease;
}

.step-card:hover h5,
.step-card:hover p {
  color:  var(--white-color) !important;
}

/*================================================
   Why Choose Section Styles
=================================================*/
.why-choose {
  position: relative;
  overflow: hidden;
}

.image-box {
  width: 100%;
  max-height: 600px;
  object-fit: cover;
  transition: transform 0.4s ease;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.image-box:hover {
  transform: scale(1.03);
}

@media (max-width: 768px) {
  .image-box {
    max-height: 350px;
  }
}

.info-box {
  background-color: var(--card-color);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.info-box:hover {
  transform: translateY(-5px);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

/* Mobile Responsive Adjustment */
@media (max-width: 767.98px) {
  .image-box {
    max-height: 300px;
  }

  .icon-img {
    width: 50px;
    height: 50px;
  }
}

.icon-img {
  width: 80;
  height: 80;
  height: auto;
  display: block;
}

/*================================================
   Testimonials Section Styles
=================================================*/
.testimonials .card {
  position: relative;
  border: 0;
  padding-top: 45px;
}

.testimonials .card-body {
  border: 0 !important;
  border-radius: 15px;
  padding-top: 65px;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

.testimonials .card-img {
  width: 90px !important;
  height: 90px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  position: absolute;
  top: 0;
  left: calc(50% - 45px);
  z-index: 1;
  background-color: var(--card-bg);
}

.testimonials .splide__arrow--next {
  right: 0em;
}

.testimonials .splide__arrow--prev {
  left: 0em;
}

/* Splide arrows */
.testimonials .splide__arrow {
  background: var(--primary-color);
  color:  var(--white-color)!important;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.testimonials .splide__arrow:hover {
  box-shadow: 0 6px 20px rgba(250, 29, 29, 0.4);
}

.testimonials .splide__arrow svg {
    fill: var(--white-color);
}
/*================================================
   CTA Section Styles
=================================================*/
.card-img-top {
  width: 75px !important;
  height: 75px !important;
  border-radius: 50%;
  margin: auto;
}

.callmain img {
  width: 450px;
  position: absolute;
  left: calc(40% - 30px);
  top: 25%;
}

@media (max-width: 1199px) {
  .callmain img {
    width: 350px;
    position: absolute;
    left: calc(50% - 100px);
    top: 25%;
  }
}

@media (max-width: 991px) {
  .callmain img {
    display: none;
  }
}

.social-circle.profile-circle {
  transition: 0.3s ease;
}

/*================================================
   Team Section Styles
=================================================*/

   /* ===============================
   TEAM SECTION STYLES
=============================== */
.team-card {
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
  transition: all 0.4s ease;
  display: flex;
  flex-direction: column;
}

.team-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.team-img {
  width: 100%;
  overflow: hidden;
  aspect-ratio: 3 / 4; /* Keeps consistent image ratio */
}

.team-img img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* fills box without stretching */
  transition: transform 0.4s ease;
}

.team-card:hover img {
  transform: scale(1.05);
}

.team-info {
  flex-grow: 1;
}

.team-info h5 {
  font-size: 1.1rem;
}

.team-info p {
  font-size: 0.95rem;
}

.team-social {
  display: flex;
  justify-content: center;
  gap: 12px;
}

.team-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--primary-color);
  color: #fff;
  font-size: 0.9rem;
  transition: all 0.3s ease;
}

.team-social a:hover {
  background: var(--secondary-2);
}

/* ===============================
   RESPONSIVE DESIGN
=============================== */
@media (max-width: 991px) {
  .section-title h2 {
    font-size: 28px;
  }
  .team-img {
    aspect-ratio: 4 / 5;
  }
}

@media (max-width: 767px) {
  .team-img {
    aspect-ratio: 1 / 1.1;
  }
  .team-info {
    padding: 20px 15px;
  }
  .team-info h5 {
    font-size: 1rem;
  }
  .team-info p {
    font-size: 0.9rem;
  }
}

@media (max-width: 575px) {
  .team-img {
    aspect-ratio: 1 / 1.2;
  }
  .team-info {
    padding: 15px 10px;
  }
  .team-social a {
    width: 32px;
    height: 32px;
    font-size: 0.85rem;
  }
}
@media (max-width: 575.98px) {
  .team-card {
    width: 65%!important;        /* reduce width on small screens */
    margin: 0 auto;    /* center the card horizontally */
  }
}

/*================================================
  Gallery Section Styles
=================================================*/

.gallery-item {
  height: 280px;
  position: relative;
}

.gallery-item img {
  transition: transform 0.3s ease;
}

.gallery-item:hover img {
  transform: scale(1.1);
}

.gallery-item .overlay {
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.gallery-item:hover .overlay {
  opacity: 1;
}

.gallery-item {
  position: relative;
  max-height: 280px;
  min-height: 220px;
  overflow: hidden;
  border-radius: 10px;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

/* lightbox styles */
.lb-data .lb-close {
  background: url(../../assets/images/icons/close.png) top right no-repeat;
}

.lb-nav a.lb-prev {
  background: url(../../assets/images/icons/prev.png) left 48% no-repeat;
}

.lb-nav a.lb-next {
  background: url(../../assets/images/icons/next.png) right 48% no-repeat;
}

.lb-cancel {
  background: url(../../assets/images/icons/loading.gif) no-repeat;
}

/*================================================
  Counter Section Styles
=================================================*/

.stats-section {
  position: relative;
  background: url('https://templatekit.jegtheme.com/damqar/wp-content/uploads/sites/165/2021/09/fireman-wearing-protective-uniform-standing-next-to-a-fire-engine-in-a-garage-of-a-fire-department-e1632634816618.jpg') center/cover fixed;
  color:  var(--white-color);
  overflow: hidden;
}

.stats-section .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  background: linear-gradient(135deg, rgba(250, 29, 29, 0.2), rgba(0, 0, 0, 0.8));
  z-index: 1;
}

.stats-section .container {
  position: relative;
  z-index: 2;
}

.stat-box {
  transition: all 0.3s ease;
}

.stat-box:hover {
  transform: translateY(-5px);
}

.icon {
  font-size: 40px;
  background: var(--fire-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.counter {
  font-size: 40px;
  font-weight: 700;
  color:  var(--white-color);
  margin-bottom: 5px;
  transition: 0.3s;
}

@media (max-width: 768px) {
  .counter {
    font-size: 32px;
  }

  .icon {
    font-size: 32px;
  }
}

/*================================================
  How we Work Section Styles
=================================================*/
.how-we-work {
  background: var(--secondary-color);
  color: var(--white-color);
  position: relative;
  overflow: hidden;
}

/* Timeline container */
.timeline {
  position: relative;
  margin-top: 3rem;
  padding-left: 90px; /* enough for icon + content */
}

/* Vertical line */
.timeline::before {
  content: "";
  position: absolute;
  left: 60px; /* Adjusted for perfect touch */
  top: 0;
  width: 2px;
  height: 100%;
  background: rgba(255, 255, 255, 0.25);
  z-index: 0;
}

/* Each step */
.timeline-step {
  position: relative;
  margin-bottom: 3rem;
  animation: fadeInUp 0.8s ease both;
}

.timeline-step:last-child {
  margin-bottom: 0;
}

/* Icon design */
.timeline-icon {
  position: absolute;
  left: -60px; /* icon on left */
  top: 0;
  width: 60px;
  height: 60px;
  background: var(--fire-gradient);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: var(--white-color);
  box-shadow: 0 0 15px rgba(250, 29, 29, 0.5);
  border: 2px solid var(--secondary-color);
  z-index: 2;
}

/* Content box */
.timeline-content {
  margin-left: 10px;
  background: var(--fire-dark);
  padding: 20px 30px;
  border-radius: 12px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  transition: all 0.4s ease;
}

.timeline-content:hover {
  background: rgba(250, 29, 29, 0.1);
  transform: translateY(-5px);
}

/* Animation */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive fix */
@media (max-width: 768px) {
  .timeline {
    padding-left: 70px;
  }

  .timeline::before {
    left: 45px; /* move line closer to icon */
  }

  .timeline-icon {
    width: 45px;
    height: 45px;
    font-size: 18px;
    left: -45px;
  }

  .timeline-content {
    /* margin-left: 80px; */
    padding: 15px 20px;
  }
}


/*================================================
   Contact Section Styles  
=================================================*/

.contact-iconbg {
  max-width: 50px;
  max-height: 50px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

#contactmain input,
#contactmain textarea {
  background-color: var(--input-bg);
  color: var(--input-text);
  border: 1px solid transparent;
  padding: 12px 15px;
  border-radius: 10px;
  width: 100%;
  font-size: 1rem;
  transition: all 0.3s ease;
}

#contactmain input::placeholder,
textarea::placeholder {
  opacity: 1;
  font-size: 1rem;
}

#contactmain input:focus,
#contactmain textarea:focus {
  outline: none;
  background-color: var(--input-bg);
  color: var(--input-text);
}

@media (max-width: 768px) {

  #contactmain input::placeholder,
  #contactmain textarea::placeholder {
    font-size: 0.95rem;
  }
}

/*================================================
   Footer Section Styles
=================================================*/
.footer-callbg {
  background-image:
    linear-gradient(rgba(var(--dark-rgb), 0.9), rgba(var(--dark-rgb), 0.9)),
    url("../../assets/images/background-img/bg_1.webp");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  min-height: 250px;
  display: flex;
  align-items: center;
}

.footer-ul {
  columns: 2;
}

/*================================================
   Back to top Styles
=================================================*/
#backtotop {
  position: fixed;
  bottom: 30px;
  right: 30px;
  padding: 7px;
  transition: background-color 0.3s, opacity 0.5s, visibility 0.5s;
  opacity: 0;
  visibility: hidden;
  z-index: 1000;
}

#backtotop:hover {
  cursor: pointer;
}

#backtotop.show {
  opacity: 1;
  visibility: visible;
}

.alertmsg {
  z-index: 9999;
}

/*================================================
   Partners Section Styles
=================================================*/
.partners-section {
  background: var(--secondary-color);
}

.partners-section h2 {
  font-weight: 700;
  margin-bottom: 30px;
  color: var(--white-color);
}

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

.partner-card {
  background:  var(--white-color);
  padding: 20px;
  border-radius: 15px;
  width: 150px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.partner-logo {
  max-height: 80px;
  object-fit: contain;
  filter: grayscale(50%);
  opacity: 0.7;
  transition: all 0.3s ease;
}

.partner-logo:hover {
  filter: grayscale(0);
  opacity: 1;
  transform: scale(1.1);
}

/* Splide arrows */
#partners-slider .splide__arrow {
  background: var(--secondary-2);
  color:  var(--white-color)!important;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  opacity: 1;
}

#partners-slider .splide__arrow:hover {
  background: var(--primary-color);
  box-shadow: 0 6px 20px rgba(250, 29, 29, 0.4);
}

#partners-slider .splide__arrow:before {
  content: '';
}

#partners-slider .partners-section .splide__arrow svg {
  fill: var(--white-color);
}

#partners-slider .splide__pagination {
  display: none;
}

#partners-slider .splide__arrow svg{
  fill: var(--white-color);
  opacity: 1;
}

#partners-slider .splide__arrow--prev {
    left: -2em;
}
#partners-slider .splide__arrow--next {
    right: -2em;
}
@media (max-width: 767px) {
 .splide.top-center {
    position: relative; 
    padding-top: 50px;   
  }

.splide.top-center .splide__arrows {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%); 
    display: flex;
    gap: 8px; 
    z-index: 15;
  }

.splide.top-center .splide__arrow {
    position: static; 
    background: rgba(0,0,0,0.6);
    color: #fff;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }

 .splide.top-center .splide__arrow svg {
    width: 16px;
    height: 16px;
  }
}
.partner-card {
  width: 200px;      
  height: 80px;      
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;    
  padding: 5px;       
  border-radius: 8px; 
  background-color: #fff; 
}

.partner-card img.partner-logo {
  max-width: 60%;
  max-height: 100%;
  object-fit: contain;  
  display: block;
}

@media (max-width: 767px) {
.partner-card img.partner-logo {
  max-width: 80%;
  max-height: 100%;
}
}

/*================================================
   Why Choose Styles
=================================================*/

.choose-card {
  background: var(--card-color);
  border-radius: 15px;
  padding: 40px 30px;
  text-align: center;
  transition: all 0.4s ease;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  border-top: 4px solid transparent;
}

.choose-card:hover {
  transform: translateY(-10px);
  border-top: 4px solid var(--secondary-2);
  box-shadow: 0 8px 30px rgba(250, 29, 29, 0.15);
}

.choose-card svg {
  font-size: 45px;
  color: var(--primary-color);
  margin-bottom: 20px;
  transition: 0.3s;
}

.choose-card:hover svg {
  transform: scale(1.15);
  color: var(--secondary-2)
}

.choose-card h5 {
  font-weight: 700;
  margin-bottom: 15px;
  color: var(--heading-text);
}

/*================================================
   Donation CTA Section Styles
=================================================*/
    .donation-section {
      padding: 100px 0;
      position: relative;
      overflow: hidden;
    }

    .donation-section::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
     background: linear-gradient(0deg, rgba(var(--dark-rgb), 0.7), rgba(var(--dark-rgb), 0.7)), url("../../assets/images/background-img/bg_2.webp")center/cover fixed;;
    }

    .donation-content {
      position: relative;
      z-index: 1;
      text-align: center;
      max-width: 700px;
      margin: auto;
    }

    .progress {
      height: 20px;
      border-radius: 10px;
      background-color: #f0f0f0;
      overflow: hidden;
    }

    .progress-bar {
      background: var(--fire-gradient);
      width: 0%;
      transition: width 2s ease-in-out;
    }

    .progress-bar.animate {
      width: 70%;
    }

    .donate-btn {
      background: var(--fire-gradient);
      color:  var(--white-color);
      border: none;
      padding: 12px 35px;
      font-size: 1.1rem;
      border-radius: 50px;
      transition: all 0.3s ease;
      text-decoration: none;
      display: inline-block;
    }

    .donate-btn:hover {
      transform: translateY(-3px);
      box-shadow: 0 6px 20px rgba(250, 29, 29, 0.3);
      color: var(--white-color);
    }

    .donation-icon {
      font-size: 3rem;
      margin-bottom: 20px;
      animation: pulse 1.8s infinite;
    }

    @keyframes pulse {
      0%, 100% { transform: scale(1); opacity: 1; }
      50% { transform: scale(1.15); opacity: 0.8; }
    }


/* Social Buttons */
.btn-social {
  background: var(--primary-color);
  color: #fff;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  text-decoration: none;
}

.btn-social:hover {
  background: var(--fire-gradient);
  transform: scale(1.1);
  color: #fff;
}

/* Contact Boxes */
.contact-box {
  transition: all 0.3s ease;
}

.contact-box:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 20px rgba(250, 29, 29, 0.3);
}

/* Input Field */
.footer-section input.form-control {
  border-radius: 4px;
  padding: 10px 15px;
}

@media (max-width: 768px) {
  .contact-box {
    flex-direction: row;
    justify-content: flex-start;
  }

  .d-flex.flex-sm-row {
    flex-direction: column !important;
  }
}

/*================================================
   News Section Styles
=================================================*/
.news-card {
  border-radius: 15px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.news-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 30px rgba(250, 29, 29, 0.3);
}

.news-card img {
  width: 100%;
  height: 180px;
  object-fit: cover;
}

.news-card-body {
  padding: 20px;
  text-align: left;
}

.news-card-body a.read-more {
  color: var(--fire-primary);
  font-weight: 600;
  text-decoration: none;
  display: inline-block;
  margin-top: 10px;
  transition: all 0.3s ease;
}

.news-card-body a.read-more:hover {
  text-decoration: underline;
  transform: translateX(3px);
}

.news-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 30px rgba(250, 29, 29, 0.25);
}

.accent-bar{
  height: 6px;
  background: var(--fire-gradient);
}

/* Contact Box Hover */
.contact-box {
  transition: all 0.3s ease;
  gap: 15px;
}

.contact-box:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 20px rgba(250, 29, 29, 0.3);
}

.contact-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;       /* fixed width */
  height: 60px;      /* fixed height */
  flex: 0 0 auto;    /* prevent stretching in flex containers */
  border-radius: 50%;
  color: #fff;
  font-size: 1.5rem;
  transition: all 0.3s ease;
}

/* Individual Icon Colors */
.phone-icon {
  background: var(--primary-color);
}

.email-icon {
  background: var(--white-color);
  color: var(--primary-color)!important;
}

.location-icon {
  background: var(--primary-color);
}

.contact-icon:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 15px rgba(255, 255, 255, 0.3);
}

@media(max-width:768px) {
  .contact-box {
    flex-direction: row;
    justify-content: flex-start;
  }
}


/* Section Background */
.cta-section {
  background:var(--secondary-color);
  position: relative;
  overflow: hidden;
}

/* Card Container */
.cta-card {
  background: rgba(20, 20, 20, 0.6);
  border: 2px solid var(--primary-color);
  text-align: center;
  backdrop-filter: blur(10px);
}

/* Title & Text */
.cta-title {
  font-size: 2.5rem;
  font-weight: 900;
  background: var(--fire-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);
}

/* Buttons */
.btn-fire {
  background: var(--fire-gradient);
  border: none;
  color: #fff!important;
  transition: 0.3s;
}

.btn-fire:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(255, 60, 0, 0.5);
}

.btn-outline-fire {
  border: 2px solid var(--primary-color);
  color: var(--primary-color);
  background: transparent;
  transition: 0.3s;
}

.btn-outline-fire:hover {
  background: var(--fire-gradient);
   border: 2px solid var(--primary-color);
  color:  var(--white-color);
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(255, 60, 0, 0.4);
}

/* Responsive Adjustments */
@media(max-width: 768px) {
  .cta-title {
    font-size: 2rem;
  }

  .cta-text {
    font-size: 1rem;
  }
}

/* Responsive Adjustments */
@media(max-width: 991px) {
  .banner-text {
    font-size: 30px!important;
  }

  .banner-content p {
    font-size: 18px!important;
  }
}