:root {

  --primary-color: #e31e24;

  --secondary-color: #1a1a1a;

  --accent-color: #ffc107;

  --text-color: #333;

  --light-bg: #f8f9fa;

  --dark-bg: #111;

  --glass-bg: rgba(255, 255, 255, 0.1);

  --glass-border: rgba(255, 255, 255, 0.2);

}



* {

  box-sizing: border-box;

}



html,

body {

  overflow-x: hidden;

  width: 100%;

  position: relative;

  margin: 0;

  padding: 0;

}



body {

  font-family: 'Outfit', sans-serif;

  color: var(--text-color);

  background-color: #fff;

  -webkit-font-smoothing: antialiased;

}



/* Global Icon Color */

i[class^="fas fa-"],

i[class^="fab fa-"],

i[class^="far fa-"],

.text-primary {

  color: var(--primary-color) !important;

}



/* Exceptions for icons inside buttons or specific elements */

.btn i,

.nav-link i,

.badge i,

.whatsapp-float i,

.call-float i,

.step-number {

  color: inherit !important;

}



/* Navbar */

.navbar {

  transition: all 0.3s ease;

  padding: 1rem 0;

  background: #fff !important;

  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);

  z-index: 1050;

}



.navbar.scrolled {

  padding: 0.6rem 0;

}



.navbar-brand img {

  height: 55px !important;

  width: auto;

  max-width: 100%;

  transition: all 0.3s ease;

}



.navbar.scrolled .navbar-brand img {

  height: 45px !important;

}



.nav-link {

  font-weight: 600;

  margin: 0 12px;

  color: #1a1a1a !important;

  position: relative;

  opacity: 0.9;

  transition: all 0.3s ease;

  text-transform: uppercase;

  font-size: 0.9rem;

  letter-spacing: 0.5px;

}



.nav-link:hover {

  color: var(--primary-color) !important;

  opacity: 1;

}



.nav-link::after {

  content: '';

  position: absolute;

  bottom: -5px;

  left: 12px;

  right: 12px;

  height: 3px;

  background: var(--primary-color);

  transform: scaleX(0);

  transition: transform 0.3s ease;

}



.nav-link:hover::after {

  transform: scaleX(1);

}



/* Hero Slider */

.hero-slider {

  height: 100vh;

  min-height: 600px;

  width: 100%;

  position: relative;

  overflow: hidden;

}



.mainSlider {

  height: 100%;

  width: 100%;

}



.swiper-slide {

  background-size: cover !important;

  background-position: center !important;

  display: flex;

  align-items: center;

  color: #fff;

  width: 100%;

}



.swiper-slide h1 {

  font-size: clamp(2rem, 8vw, 4rem);

  font-weight: 700;

  margin-bottom: 1.5rem;

  line-height: 1.2;

}



.swiper-slide p {

  font-size: clamp(1rem, 3vw, 1.25rem);

  margin-bottom: 2rem;

  opacity: 0.9;

  max-width: 700px;

}



/* Stats */

.stat-item {

  padding: 20px;

}



/* How It Works */

.process-step {

  position: relative;

  width: 100px;

  height: 100px;

  margin: 0 auto;

  background: #fff;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);

}



.step-number {

  position: absolute;

  top: -10px;

  right: -10px;

  width: 35px;

  height: 35px;

  background: var(--primary-color) !important;

  color: #fff !important;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  font-weight: 700;

  border: 4px solid #fff;

}



/* Testimonials */

.testimonial-card {

  background: #fff;

  border-radius: 20px;

  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);

  margin: 20px;

}



/* FAQ */

.accordion-button:not(.collapsed) {

  background-color: var(--primary-color);

  color: #fff !important;

}



.accordion-button:not(.collapsed) i {

  color: #fff !important;

}



.accordion-button:focus {

  box-shadow: none;

  border-color: rgba(0, 0, 0, .125);

}



/* WhatsApp & Call Float */

.whatsapp-float,

.call-float {

  position: fixed;

  right: 30px;

  color: #fff !important;

  padding: 12px 25px;

  border-radius: 50px;

  display: flex;

  align-items: center;

  text-decoration: none;

  font-weight: 600;

  z-index: 1000;

  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);

}



.whatsapp-float {

  bottom: 30px;

  background-color: #25d366;

  box-shadow: 0 10px 25px rgba(37, 211, 102, 0.3);

}



.call-float {

  bottom: 95px;

  background-color: var(--primary-color);

  box-shadow: 0 10px 25px rgba(227, 30, 36, 0.3);

}



.whatsapp-float i,

.call-float i {

  font-size: 22px;

  margin-right: 10px;

  color: #fff !important;

}



.whatsapp-float:hover,

.call-float:hover {

  transform: translateY(-5px) scale(1.05);

  color: #fff !important;

}



/* Buttons */

.btn-primary {

  background-color: var(--primary-color);

  border-color: var(--primary-color);

  font-weight: 600;

  transition: all 0.3s ease;

  padding: 12px 30px;

  border-radius: 50px;

  color: #fff !important;

}



.btn-primary:hover {

  background-color: #c61a1f;

  border-color: #c61a1f;

  transform: translateY(-2px);

  box-shadow: 0 5px 15px rgba(227, 30, 36, 0.4);

}



/* Sections */

section {

  padding: 100px 0;

  overflow: hidden;

  width: 100%;

}



.section-title {

  text-align: center;

  margin-bottom: 60px;

}



.section-title h2 {

  font-size: clamp(1.75rem, 5vw, 2.5rem);

  font-weight: 700;

  position: relative;

  display: inline-block;

  padding-bottom: 15px;

}



.section-title h2::after {

  content: '';

  position: absolute;

  bottom: 0;

  left: 50%;

  transform: translateX(-50%);

  width: 80px;

  height: 4px;

  background: var(--primary-color);

  border-radius: 2px;

}



/* Cards */

.card {

  border: none;

  border-radius: 20px;

  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);

  transition: all 0.3s ease;

  overflow: hidden;

}



.card:hover {

  transform: translateY(-10px);

  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);

}



.service-card {

  padding: 40px;

  text-align: center;

}



.service-icon {

  font-size: 3rem;

  margin-bottom: 20px;

}



/* District Grid */

.district-grid {

  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));

  gap: 15px;

  background: #fff;

  padding: 30px;

  border-radius: 20px;

  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);

}



.district-item {

  padding: 10px 15px;

  border-radius: 10px;

  transition: all 0.3s ease;

  font-weight: 500;

  color: var(--text-color);

  display: flex;

  align-items: center;

  word-break: break-word;

}



.district-item:hover {

  background: var(--light-bg);

  color: var(--primary-color);

  transform: translateX(5px);

}



/* Footer */

footer {

  background: var(--secondary-color);

  color: #fff;

}



footer a {

  transition: color 0.3s ease;

}



footer a:hover {

  color: var(--primary-color) !important;

}



/* Responsive Adjustments */

@media (max-width: 1199.98px) {

  .swiper-slide h1 {

    font-size: 3.5rem;

  }

}



@media (max-width: 991.98px) {

  .navbar-brand img {

    height: 40px !important;

    max-width: 180px;

  }



  .navbar-collapse {

    background: #fff;

    padding: 20px;

    border-radius: 15px;

    margin-top: 15px;

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);

  }



  .nav-link {

    margin: 5px 0;

    padding: 10px 0;

    border-bottom: 1px solid #f0f0f0;

  }



  .nav-link:last-child {

    border-bottom: none;

  }



  .nav-link::after {

    display: none;

  }



  .swiper-slide h1 {

    font-size: clamp(1.75rem, 6vw, 2.75rem);

  }



  .swiper-slide p {

    font-size: 1rem;

  }



  section {

    padding: 60px 0;

  }



  .section-title h2 {

    font-size: 2rem;

  }



  .sticky-top {

    position: relative !important;

    top: 0 !important;

    z-index: 1 !important;

  }

}



@media (max-width: 767.98px) {

  section {

    padding: 50px 0;

  }



  .section-title {

    margin-bottom: 30px;

  }



  .section-title h2 {

    font-size: 1.75rem;

  }



  .swiper-slide h1 {

    font-size: 1.85rem;

  }



  .slider-logo img {

    height: 50px !important;

  }



  .stat-item {

    padding: 10px 5px;

  }



  .stat-item h2 {

    font-size: 1.5rem !important;

  }



  .stat-item p {

    font-size: 0.75rem;

  }



  .whatsapp-float,

  .call-float {

    right: 15px;

    padding: 10px;

    width: 45px;

    height: 45px;

    justify-content: center;

  }



  .whatsapp-float {

    bottom: 15px;

  }



  .call-float {

    bottom: 70px;

  }



  .whatsapp-float span,

  .call-float span {

    display: none;

  }



  .whatsapp-float i,

  .call-float i {

    margin-right: 0;

    font-size: 20px;

  }



  .district-grid {

    grid-template-columns: repeat(2, 1fr);

    padding: 15px;

    gap: 10px;

  }



  .swiper-button-next,

  .swiper-button-prev {

    display: none !important;

  }

}



@media (max-width: 575.98px) {

  .hero-slider {

    height: auto;

    min-height: 550px;

    padding: 100px 0 60px;

  }



  .swiper-slide {

    min-height: 450px;

  }



  .swiper-slide h1 {

    font-size: 1.75rem;

  }



  .swiper-slide p {

    font-size: 0.95rem;

    margin-bottom: 1.5rem;

  }



  .btn-lg {

    padding: 10px 20px;

    font-size: 0.9rem;

  }



  .section-title h2 {

    font-size: 1.5rem;

  }



  .district-grid {

    grid-template-columns: 1fr;

  }



  .stat-item {

    margin-bottom: 15px;

  }



  .display-4 {

    font-size: 1.75rem !important;

  }



  .lead {

    font-size: 0.95rem !important;

  }



  .page-header {

    padding: 30px 0 !important;

  }

}



/* Fix for iOS Safari 100vh issue */

@supports (-webkit-touch-callout: none) {

  .hero-slider {

    height: -webkit-fill-available;

  }

}