/* Global Variables */
:root {
  --primary-color: #0066cc; /* Trustworthy Blue */
  --secondary-color: #f5a623; /* LIC Gold/Yellowish */
  --accent-color: #004a99; /* Darker Blue for hover/active */
  --text-dark: #333333;
  --text-light: #666666;
  --bg-light: #f9f9f9;
  --white: #ffffff;
  --font-heading: "Poppins", sans-serif;
  --font-body: "Open Sans", sans-serif;
  --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  --transition: all 0.3s ease;
}

/* Reset & Base Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font-body);
  line-height: 1.6;
  color: var(--text-dark);
  background-color: var(--bg-light);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
  margin-bottom: 1rem;
  color: var(--primary-color);
}

a {
  text-decoration: none;
  color: inherit;
  transition: var(--transition);
}

ul {
  list-style: none;
}

img {
  max-width: 100%;
  height: auto;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.btn {
  display: inline-block;
  padding: 12px 24px;
  background-color: var(--primary-color);
  color: var(--white);
  border-radius: 5px;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.9rem;
  border: none;
  cursor: pointer;
}

.btn:hover {
  background-color: var(--accent-color);
  transform: translateY(-2px);
}

.btn-secondary {
  background-color: var(--secondary-color);
  color: var(--white);
}

.btn-secondary:hover {
  background-color: #e0961f;
}

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

.btn-outline:hover {
  background-color: var(--primary-color);
  color: var(--white);
}

/* Header & Navigation */
header {
  background-color: var(--white);
  box-shadow: var(--shadow);
  position: sticky;
  top: 0;
  z-index: 1000;
}

.navbar,
.site-navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 0px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--primary-color);
}

.logo img {
  height: 50px;
}

.nav-links {
  display: flex;
  gap: 30px;
  align-items: center; /* Vertically align menu texts with icons */
  margin: 0; /* Clear default ul margin */
}

.nav-links a {
  font-weight: 500;
  font-size: 1rem;
  color: var(--text-dark);
}

.nav-links a:hover,
.nav-links a.active {
  color: var(--primary-color);
}

.mobile-menu-btn {
  display: none;
  font-size: 1.5rem;
  cursor: pointer;
}

/* Hero Section Slider */
.heroSwiper {
    width: 100%;
    height: 80vh; /* Fixed relative height for uniformity */
    min-height: 560px;
}

.hero-slide {
    position: relative;
    background-size: cover;
    background-position: center;
    padding: 0 20px; /* Replaced fixed top/bottom padding with side padding */
    height: 100%; /* Force all slides to fill the swiper container uniformly */
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 30, 80, 0.6); /* Dark blue color overlay */
    z-index: 0;
}

.hero-content {
    z-index: 1;
}

.hero h1 {
    font-size: 3.5rem;
    color: var(--white);
    margin-bottom: 25px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.hero p {
    font-size: 1.2rem;
    color: var(--white);
    margin-bottom: 30px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    opacity: 0.9;
}

/* Enhanced Services Section */
.services-section {
    background-color: var(--bg-light);
    padding: 80px 0;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 50px;
}

.service-card {
    background: var(--white);
    padding: 40px 30px;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    text-align: center;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.service-card::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; width: 100%; height: 5px;
    background: var(--secondary-color);
    transform: scaleX(0);
    transition: transform 0.4s ease;
    transform-origin: center;
}

.service-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

.service-card:hover::after {
    transform: scaleX(1);
}

.service-icon-wrapper {
    width: 90px;
    height: 90px;
    margin: 0 auto 25px;
    background: var(--white);
    box-shadow: 0 10px 20px rgba(0, 102, 204, 0.1);
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.5s ease;
    border: 2px solid rgba(0,102,204,0.05);
    overflow: hidden;
}

.service-card:hover .service-icon-wrapper {
    border-radius: 50%;
    transform: rotate(10deg);
    background: rgba(0, 102, 204, 0.05);
    border-color: rgba(0,102,204,0.15);
}

.service-icon-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.5s ease;
}

.service-card:hover .service-icon-wrapper img {
    transform: scale(1.1) rotate(-10deg);
}

.service-card h3 {
    margin-bottom: 15px;
    font-size: 1.4rem;
    color: var(--primary-color);
    transition: var(--transition);
}

.service-card:hover h3 {
    color: var(--secondary-color);
}

.service-card p {
    color: var(--text-light);
    line-height: 1.6;
}

/* Enhanced About Section */
.about-preview {
  padding: 60px 0;
  background-color: var(--white);
  text-align: center;
  position: relative;
}

.about-preview::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: radial-gradient(circle at top right, rgba(245,166,35,0.05) 0%, transparent 40%);
    pointer-events: none;
}

.about-content {
  display: flex;
  gap: 50px;
  align-items: center;
  text-align: left;
  margin-top: 30px;
}

.about-image {
  flex: 1;
  position: relative;
}

.about-image img {
  border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
  box-shadow: -15px 15px 0px rgba(245, 166, 35, 0.15);
  transition: all 0.5s ease;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}

.about-image:hover img {
    border-radius: 50%;
    transform: rotate(5deg) scale(1.05);
}

.about-text {
  flex: 2;
}

.about-text h3 {
    font-size: 2rem;
    line-height: 1.3;
    margin-bottom: 25px;
    position: relative;
    padding-bottom: 20px;
}

.about-text h3::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0;
    width: 60px;
    height: 4px;
    background-color: var(--secondary-color);
    border-radius: 2px;
}

.about-text p {
    color: var(--text-light);
    font-size: 1.1rem;
    line-height: 1.8;
}

/* Base Titles */
.section-title {
  text-align: center;
  margin-bottom: 15px;
  position: relative;
  padding-bottom: 15px;
  /* display: inline-block; */
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: 0; left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 4px;
    background-color: var(--secondary-color);
    border-radius: 2px;
}

/* Plans Section */
.feature-plans {
  padding: 80px 0;
  background-color: var(--white);
}

.plans-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 30px;
}

.plan-card {
  background: var(--white);
  border-radius: 10px;
  box-shadow: var(--shadow);
  transition: var(--transition);
  text-align: left;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
}

.plan-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 30px rgba(0,0,0,0.15);
}

.plan-image {
  width: 100%;
  height: 200px;
  overflow: hidden;
}

.plan-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.plan-card:hover .plan-image img {
  transform: scale(1.1);
}

.plan-content {
  padding: 30px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.plan-icon {
  font-size: 1.5rem;
  color: var(--white);
  background-color: var(--secondary-color);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 175px;
  right: 30px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  z-index: 2;
}

.plan-content h3 {
  margin-top: 10px;
  margin-bottom: 15px;
  font-size: 1.25rem;
}

.plan-content p {
  color: var(--text-light);
  margin-bottom: 20px;
  flex-grow: 1;
}

.plan-card .btn {
  align-self: flex-start;
}

/* Why Choose Us */
.why-choose {
  background-color: var(--bg-light);
  color: var(--text-dark);
  padding: 80px 0;
  text-align: center;
}

.why-choose .section-title {
  color: var(--primary-color);
  margin-bottom: 20px;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
  margin-top: 50px;
}

.feature-item {
    padding: 40px 30px;
    background: var(--white);
    border-radius: 15px;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    border: 1px solid rgba(0,0,0,0.03);
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.feature-item::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(135deg, rgba(0,102,204,0.02) 0%, transparent 100%);
    z-index: -1;
}

.feature-item:hover {
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
    transform: translateY(-10px);
    border-color: rgba(0,102,204,0.1);
}

.feature-item i {
    font-size: 3rem;
    color: var(--secondary-color);
    margin-bottom: 25px;
    display: inline-block;
    transition: transform 0.5s ease;
}

.feature-item:hover i {
    transform: scale(1.1) rotate(5deg);
}

.feature-item h3 {
    color: var(--primary-color);
    font-size: 1.5rem;
    margin-bottom: 15px;
    transition: color 0.3s ease;
}

.feature-item:hover h3 {
    color: var(--secondary-color);
}

.feature-item p {
    color: var(--text-light);
    opacity: 0.9;
}

/* Footer */
footer {
  background-color: #003366;
  color: var(--white);
  padding: 60px 0 20px;
}

.footer-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 40px;
  margin-bottom: 40px;
}

.footer-col h3 {
  color: var(--secondary-color);
  margin-bottom: 20px;
  font-size: 1.2rem;
}

.footer-links a {
  display: block;
  margin-bottom: 10px;
  color: #cccccc;
}

.footer-links a:hover {
  color: var(--white);
  padding-left: 5px;
}

.contact-info li {
  margin-bottom: 10px;
  color: #cccccc;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.copyright {
  text-align: center;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  color: #999;
  font-size: 0.9rem;
}

/* Page Headers */
.page-header {
    background: linear-gradient(rgba(0, 102, 204, 0.8), rgba(0, 74, 153, 0.9)), url("../img/about_hero.png");
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    padding: 100px 0;
    text-align: center;
    color: var(--white);
}

.page-header h1 {
    font-size: 3.5rem;
    margin-bottom: 20px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    color: var(--white);
}

.page-header .lead {
    font-size: 1.4rem;
    max-width: 600px;
    margin: 0 auto;
    opacity: 0.9;
}

/* Contact Form */
.contact-container {
  padding: 80px 0;
}

.contact-form {
  background: var(--white);
  padding: 40px;
  border-radius: 10px;
  box-shadow: var(--shadow);
  max-width: 600px;
  margin: 0 auto;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: 600;
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
  font-family: inherit;
}

.calculator-frame {
  width: 100%;
  height: 800px;
  border: none;
  box-shadow: var(--shadow);
  border-radius: 10px;
}

/* Responsive */
@media (max-width: 768px) {
  .navbar,
  .site-navbar {
    padding-left: 15px;
    padding-right: 15px;
  }

  .nav-links {
    display: none; /* simple hide for mobile for now, usually needs JS toggle */
  }

  .mobile-menu-btn {
    display: block;
  }

  .about-content {
    flex-direction: column;
  }

  .hero h1 {
    font-size: 2rem;
  }
}
/* Layout for Plans Page */
.row {
  display: flex;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
}
.col-lg-8, .col-lg-4 {
  padding-right: 15px;
  padding-left: 15px;
  width: 100%;
}

@media (min-width: 992px) {
  .col-lg-8 {
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
  }
  .col-lg-4 {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
}

.position-sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 100px;
  z-index: 1020;
}

/* Query Widget (Sidebar) */

.query-widget {
  background: linear-gradient(to right, #0b1a2aea 20%, rgba(11, 26, 42, 0.4) 100%), url('../img/query-widget.webp');
  background-size: cover;
  background-position: right center;
  padding: 40px 30px;
  border-radius: 8px;
  color: var(--white);
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}

.query-title {
  font-size: 1.8rem;
  margin-bottom: 25px;
  color: var(--white);
  font-weight: 700;
}

.query-contact-list {
  list-style: none;
  margin-bottom: 20px;
}

.query-contact-list li {
  margin-bottom: 15px;
  font-size: 1.2rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 15px;
  color: #f5a623;
}

.query-email {
  font-size: 1.1rem;
  margin-bottom: 30px;
  color: var(--white);
  font-weight: 500;
}

.sidebar-form {
  background: var(--white);
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.05);
  /* border: 1px solid rgba(0,0,0,0.05); */
  border-top: solid 5px var(--brand-gold);
  margin-bottom: 30px;
}

.sidebar-form-group {
  margin-bottom: 15px;
}

.sidebar-form-group input,
.sidebar-form-group textarea {
  width: 100%;
  padding: 12px 15px;
  border: 1px solid #ddd;
  border-radius: 5px;
  background: #f9f9f9;
  color: var(--text-dark);
  font-family: inherit;
  font-size: 0.95rem;
  transition: all 0.3s ease;
}

.sidebar-form-group input::placeholder,
.sidebar-form-group textarea::placeholder {
  color: #888;
}

.sidebar-form-group input:focus,
.sidebar-form-group textarea:focus {
  outline: none;
  border-color: var(--secondary-color);
  background: var(--white);
  box-shadow: 0 0 0 3px rgba(245, 166, 35, 0.2);
}

.query-btn {
  display: block;
  width: 100%;
  text-align: center;
  background-color: #f5a623;
  color: var(--white);
  padding: 15px 20px;
  border-radius: 30px;
  font-weight: 600;
  font-size: 1.1rem;
  text-decoration: none;
  transition: all 0.3s ease;
  border: none;
  cursor: pointer;
  margin-top: 10px;
}

.query-btn:hover {
  background-color: #d48b1a;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(245, 166, 35, 0.4);
  color: var(--white);
}

@media (max-width: 992px) {
  .plans-layout-wrapper {
    grid-template-columns: 1fr;
  }
  .sidebar-wrapper {
    position: static;
  }
}
/* About Us Page Redesign Styles */

/* Hero Section */
.about-hero {
    background: linear-gradient(rgba(0, 102, 204, 0.8), rgba(0, 74, 153, 0.9)), url("../img/about_hero.png");
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    padding: 100px 0;
    text-align: center;
    color: var(--white);
}

.about-hero h1 {
    font-size: 3.5rem;
    margin-bottom: 20px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.about-hero .lead {
    font-size: 1.4rem;
    max-width: 600px;
    margin: 0 auto;
    opacity: 0.9;
}

/* Common Image Styles */
.shadow-img {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.rounded-img {
    border-radius: 12px;
}

.aspect-square {
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

/* Split Section */
.about-split-section {
    padding: 80px 0;
    background-color: var(--white);
}

.about-split-section .about-content {
    display: flex;
    align-items: center;
    gap: 50px;
}

.about-split-section .about-text {
    flex: 1;
}

.about-split-section .about-text h2 {
    font-size: 2.2rem;
    margin-bottom: 20px;
    position: relative;
    padding-bottom: 15px;
}

.about-split-section .about-text h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 60px;
    height: 3px;
    background-color: var(--secondary-color);
}

.about-split-section .about-text p {
    font-size: 1.1rem;
    margin-bottom: 15px;
    color: var(--text-light);
}

.about-image-wrapper {
    flex: 1;
    position: relative;
}

.about-image-wrapper::before {
    content: '';
    position: absolute;
    top: -20px;
    right: -20px;
    width: 100%;
    height: 100%;
    border: 3px solid var(--secondary-color);
    border-radius: 12px;
    z-index: 0;
}

.about-img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: auto;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.about-image-wrapper:hover .about-img {
    transform: translate(10px, -10px);
}

/* Values Grid Section */
.bg-light-blue {
    background-color: #f0f8ff; /* Alice Blue */
}

.about-values-section {
    padding: 80px 0;
}

.section-title {
    font-size: 2.5rem;
    color: var(--primary-color);
    margin-bottom: 10px;
    text-align: center;
}

.section-subtitle {
    font-size: 1.2rem;
    color: var(--text-light);
    text-align: center;
    margin-bottom: 50px;
}

.values-flex {
    display: flex;
    gap: 40px;
    align-items: stretch;
}

.values-image-container {
    flex: 0 0 40%;
}

.values-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.values-grid {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
}

.value-card {
    background: var(--white);
    padding: 30px;
    border-radius: 10px;
    box-shadow: var(--shadow);
    transition: var(--transition);
    border-top: 4px solid transparent;
}

.value-card:hover {
    transform: translateY(-5px);
    border-top-color: var(--secondary-color);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
}

.value-icon {
    font-size: 2.5rem;
    color: var(--secondary-color);
    margin-bottom: 20px;
}

.value-card h3 {
    font-size: 1.3rem;
    margin-bottom: 15px;
    color: var(--primary-color);
}

.value-card p {
    color: var(--text-light);
    font-size: 0.95rem;
    line-height: 1.6;
}

/* Responsive adjustments */
@media (max-width: 992px) {
    .about-split-section .about-content,
    .values-flex {
        flex-direction: column;
    }

    .about-image-wrapper::before {
        display: none;
    }

    .about-image-wrapper:hover .about-img {
        transform: none;
    }

    .values-image-container {
        flex: 1;
        width: 100%;
        max-width: 500px;
        margin: 0 auto;
    }
}

/* What We Offer Section */
.what-we-offer-section {
    padding: 80px 0;
    background-color: var(--bg-light);
}

.offer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

.offer-card {
    background: var(--white);
    border-radius: 12px;
    text-align: center;
    transition: var(--transition);
    border: 1px solid rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    padding-bottom: 25px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.03);
}

.offer-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(0, 102, 204, 0.1);
    border-color: rgba(0, 102, 204, 0.2);
    background: var(--white);
}

.offer-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    margin-bottom: 20px;
    transition: transform 0.5s ease;
}

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

.offer-card h3 {
    font-size: 1.25rem;
    color: var(--text-dark);
    margin-bottom: 15px;
    padding: 0 20px;
}

.offer-card p {
    color: var(--text-light);
    font-size: 0.95rem;
    margin-bottom: 20px;
    flex-grow: 1;
    padding: 0 20px;
}

.read-more-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--primary-color);
    font-weight: 600;
    font-size: 0.9rem;
    margin-top: auto;
    transition: var(--transition);
}

.read-more-link:hover {
    gap: 12px;
    color: var(--accent-color);
}

/* Offer CTA Box */
.offer-cta-box {
    margin-top: 60px;
    padding: 40px;
    background: linear-gradient(135deg, rgba(0, 102, 204, 0.03) 0%, rgba(0, 102, 204, 0.08) 100%);
    border-radius: 12px;
    text-align: center;
    border: 1px solid rgba(0, 102, 204, 0.1);
}

.offer-cta-box p {
    font-size: 1.1rem;
    color: var(--text-dark);
    margin-bottom: 25px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}
/* Calculator Specific Styles */

/* Container */
.calc-box1 {
    background: #fff;
    padding: 14px 16px;
    /* tighter */
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
    margin-bottom: 14px;
}

/* Headings above the form */
.brdcrumb {
    margin-bottom: .5rem;
}

h1.text-center {
    margin: .25rem 0 1rem;
    font-size: 1.45rem;
}

/* Form rhythm */
.calc-box1 .form-row {
    margin-bottom: .5rem;
}

/* was 10px */
.calc-box1 .form-group {
    margin-bottom: .5rem;
}

.calc-box1 .cust-lable {
    font-weight: 600;
    font-size: .85rem;
    color: #2f2f2f;
    margin-bottom: .25rem;
}

/* Inputs & selects – compact */
.calc-box1 .form-control,
.calc-box1 .custom-select {
    height: 34px;
    /* compact height */
    padding: .25rem .5rem;
    font-size: .9rem;
    line-height: 1.2;
}

/* Input group icon pill */
.calc-box1 .input-group-text {
    padding: .25rem .5rem;
    font-size: .95rem;
    background: #f7f7f9;
    border-color: #e6e6ea;
}

/* Error rows keep layout steady but tight */
#cflerror,
#formErr,
#errPlan,
#errSa {
    min-height: 16px;
}

/* Riders spacing tighter (keeps your .pad-10) */
.calc-box1 .pad-10 {
    padding: .25rem 0 !important;
}

/* Button: smaller footprint without changing classes/ids */
#matBtn {
    padding: .35rem .9rem;
    font-size: .95rem;
    border-radius: .35rem;
}

/* Spinners smaller & aligned */
#cflloader .spinner-border,
#cflloader .spinner-grow {
    width: 1rem;
    height: 1rem;
}

/* Tables under “About” block */
.table {
    margin-bottom: .75rem;
}

.table thead th {
    padding: .4rem .5rem;
}

.table td,
.table th {
    padding: .35rem .5rem;
    font-size: .9rem;
}

/* List spacing in the info section */
.mt-4 {
    margin-top: 1.25rem !important;
}

.mb-3 {
    margin-bottom: .75rem !important;
}

.lead {
    font-size: 1rem;
    margin-bottom: .5rem;
}

.list-unstyled li {
    margin-bottom: .25rem;
}

/* Results container spacing */
.box-section2.mt-1 {
    margin-top: .5rem !important;
}

/* Compact spacing for rider sections */
.calc-box1 .pad-10 {
    padding: 0 !important;
    /* Remove inner vertical padding */
    margin-bottom: .35rem !important;
    /* Subtle gap between rider rows */
}

.calc-box1 .pad-10 .form-group {
    margin-bottom: 0 !important;
    /* Remove group bottom space */
}

.calc-box1 .form-group>label {
    margin-bottom: .15rem;
    /* Align labels nicely */
}

/* If the PHP includes produce extra <p> or <div> spacing */
.calc-box1 .pad-10 * {
    margin-top: 0 !important;
    margin-bottom: .15rem !important;
}

/* Mobile tweaks */
@media (max-width: 576px) {
    .calc-box1 {
        padding: 12px;
    }

    .calc-box1 .form-control,
    .calc-box1 .custom-select {
        height: 36px;
    }

    h1.text-center {
        font-size: 1.3rem;
    }
}
		@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700');

		@font-face {
			font-family: 'FontAwesome';
			src: url('../fonts/fontawesome-webfont.eot?v=4.6.3');
			src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.6.3') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.6.3') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.6.3') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.6.3') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.6.3#fontawesomeregular') format('svg');
			font-weight: normal;
			font-style: normal;
		}

		body {
			font-family: 'Roboto', sans-serif;
			font-size: 14px;
			color: #333;
			background-color: #f5f5f5;
		}

		h1,
		h2,
		h3,
		h4,
		h5,
		h6 {
			font-family: 'Roboto', sans-serif;
			font-weight: 500;
			color: #333;
		}

		a {
			color: #0056b3;
			text-decoration: none;
		}

		a:hover {
			color: #0056b3;
			text-decoration: underline;
		}

		.container {
			max-width: 1200px;
		}





		.custnav {
			background-color: #00529c;
			padding: 0;
		}

		.custnav .navbar-brand {
			color: #fff;
			font-weight: bold;
		}

		.custnav .navbar-nav .nav-link {
			color: #fff;
			padding: 15px 10px;
		}

		.custnav .navbar-nav .nav-link:hover {
			background-color: #00376f;
		}

		.section-first {
			padding: 20px 0;
		}

		.main-box {
			background-color: #fff;
			padding: 20px;
			box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
			margin-bottom: 20px;
		}

		.calc-box1 {
			background-color: #fff;
			padding: 20px;
			border: 1px solid #e0e0e0;
			border-radius: 5px;
		}

		.form-group label {
			font-weight: 500;
		}

		.form-control {
			border-radius: 0;
		}

		.btn-primary {
			background-color: #00529c;
			border-color: #00529c;
			border-radius: 0;
		}

		.btn-primary:hover {
			background-color: #00376f;
			border-color: #00376f;
		}

		.footer-part {
			background-color: #333;
			color: #fff;
			padding: 20px 0;
		}

		.footer-part a {
			color: #fff;
		}

		.footer-part a:hover {
			text-decoration: underline;
		}

		/* Helper classes from original file */
		.hide { display: none; }
		.text-center { text-align: center; }
		.text-right { text-align: right; }
		.text-danger { color: #dc3545; }
		.text-success { color: #28a745; }
		.text-warning { color: #ffc107; }
		.text-info { color: #17a2b8; }
		.text-muted { color: #6c757d; }
		.small { font-size: 80%; }
		.mt-1 { margin-top: 0.25rem; }
		.mt-2 { margin-top: 0.5rem; }
		.mt-3 { margin-top: 1rem; }
		.mt-4 { margin-top: 1.5rem; }
		.mb-1 { margin-bottom: 0.25rem; }
		.mb-2 { margin-bottom: 0.5rem; }
		.mb-3 { margin-bottom: 1rem; }
		.mb-4 { margin-bottom: 1.5rem; }
		.pl-3 { padding-left: 1rem; }
		.pr-3 { padding-right: 1rem; }
		.pt-3 { padding-top: 1rem; }
		.pb-3 { padding-bottom: 1rem; }
		.p-3 { padding: 1rem; }
		.m-0 { margin: 0; }
		.p-0 { padding: 0; }
		
		/* Specific Calculator Styles */
		.calc-box1 {
			background: #fff;
			padding: 14px 16px;
			border-radius: 6px;
			box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
			margin-bottom: 14px;
		}
		.brdcrumb { margin-bottom: .5rem; }
		h1.text-center { margin: .25rem 0 1rem; font-size: 1.45rem; }
		.calc-box1 .form-row { margin-bottom: .5rem; }
		.calc-box1 .form-group { margin-bottom: .5rem; }
		.calc-box1 .cust-lable { font-weight: 600; font-size: .85rem; color: #2f2f2f; margin-bottom: .25rem; }
		.calc-box1 .form-control, .calc-box1 .custom-select { height: 34px; padding: .25rem .5rem; font-size: .9rem; line-height: 1.2; }
		.calc-box1 .input-group-text { padding: .25rem .5rem; font-size: .95rem; background: #f7f7f9; border-color: #e6e6ea; }
		#cflerror, #formErr, #errPlan, #errSa { min-height: 16px; }
		.calc-box1 .pad-10 { padding: .25rem 0 !important; }
		#matBtn { padding: .35rem .9rem; font-size: .95rem; border-radius: .35rem; }
		#cflloader .spinner-border, #cflloader .spinner-grow { width: 1rem; height: 1rem; }
		.table { margin-bottom: .75rem; }
		.table thead th { padding: .4rem .5rem; }
		.table td, .table th { padding: .35rem .5rem; font-size: .9rem; }
		.inputErr { color: red; font-size: 12px; }
		.lpcBtn {
			background-color: #007bff;
			color: white;
			border: none;
			padding: 10px 20px;
			cursor: pointer;
			width: 100%;
			font-size: 16px;
		}
		.lpcBtn:hover { background-color: #0056b3; }
		.result-box { margin-top: 20px; border: 1px solid #ddd; padding: 15px; background: #f9f9f9; }
		.tnc { text-align: center; font-size: 12px; margin-top: 10px; }
		
		/* Additional styles from lines 30-1941 (Summarized/Selected for exactness) */
		.label-cont { float: left; width: 100%; padding-left: 20px; text-align: left; }
		.frmError { font-size: 12px; color: #CC3300; text-align: left; margin: 0; padding: 0; }
		.inputrow { background: #CAE4FF !important; margin: 0px; }
		.calc-options { vertical-align: middle !important; text-align: left; margin-top: 15px; }
		.comment-head { background-color: #4994d7; }
		.comment-head h2 { color: #FFFFFF; padding: 10px; text-align: center; }
		.com-box1 { background: #FFFFEA; }
		.com-box2 { background: #FFFFFF; }
		.buySuccess { background-color: #B8F5B1; color: #333; margin: 5px; padding: 5px; text-align: center; }
		.buyError { background: #FF9F9F no-repeat 5px 10px; color: #333; margin: 3px; padding: 5px; }
		.error { background: #FF9F9F no-repeat 5px 10px; color: #333; margin: 10px; padding: 10px; }
		.success { background: #B8F5B1 url(images/icon_ok.png) no-repeat 5px 10px; color: #333; margin: 5px 10px; padding: 10px 10px 10px 70px; }
		.processing { background: #FFFFCC url(images/loader.gif) no-repeat 5px 10px; color: #333; margin: 5px auto; width: 200px; padding: 10px 10px 10px 70px; }
		.calc-result { border: solid 1px #e0e3e3; }
		.calc-result div.head { color: #fff; background-color: #17a2b8 !important; color: #fff !important; text-align: center; font-weight: bold; }
		.calc-result div.subhead { color: #fff; background-color: #76bbc6; color: #343a40; text-align: center; font-weight: 600; }
		.result { display: block; padding: 5px; background-color: #CAE4FF !important; }
		.resultDiv { display: block; padding: 5px; background-color: #eaeff4 !important; border: 1px solid #e0e3e3; }
		.resultSubDiv { display: block; padding: 5px; background-color: #fff !important; margin: 5px 0; border: 1px solid #e0e3e3; }
		.resultDiv h3 { text-align: center; font-size: 1rem; font-weight: bold; color: #00376F; background-color: #f7f7f7; border: 1px solid #e0e3e3; padding: 3px; line-height: 2; }
		.resultDiv h2 { font-size: 24px; color: #005680; padding: 10px; text-align: center; background-color: #dee2e6; margin-bottom: -5px; }
		.ajdiv { padding: 5px; background-color: #fff; margin: 10px 0; border: 1px solid #e0e3e3; }

		/* Sidebar Styles */
		.button-more {
			width: 100%;
			padding: 0;
			margin: 5px 0 0px 0px;
		}

		.button-more a {
			width: 100%;
			padding: 0;
			margin: 0;
			background: #4994d7;
			color: #fff;
			text-align: center;
			display: inline-block;
			padding: 10px 0px;
			font-size: 17px;
			font-weight: 600;
			text-decoration: none;
		}

		.box-section3 {
			width: 100%;
			float: left;
			padding: 0;
			margin: 0px 0px 0px 0px;
			background: #FFFFFF;
			box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
		}

		.box-section3 ul {
			margin: 0;
			padding: 0;
			list-style: none;
		}

		.box-section3 li {
			font-size: 14px;
			letter-spacing: 0.2px;
			color: #555555;
			padding: 9.9px 0px;
			margin: 0px 10px;
			list-style: none;
			border-bottom: 1px solid #dadada;
			line-height: 20px;
			text-align: left;
		}

		.box-section3 li a {
			text-decoration: none;
			color: #555555;
			display: block;
		}

		.box-section3 li a:hover {
			color: #002851;
		}

		.box-section3 li:last-child {
			border-bottom: none;
		}
/* premium-design.css - Professional Financial Tool Styling */

:root {
    --brand-blue: #00529c;
    --brand-dark: #00376f;
    --brand-gold: #f9cf18;
    --brand-light-blue: #ebf5ff;
    --text-main: #2c3e50;
    --text-muted: #6c757d;
    --bg-page: #f4f7f9;
    --card-shadow: 0 10px 30px rgba(0, 55, 111, 0.08); /* Subtle blue tint in shadow */
    --hover-shadow: 0 15px 35px rgba(0, 55, 111, 0.12);
    --border-radius: 12px;
    --transition-speed: 0.3s;
}

body {
    background-color: var(--bg-page);
    color: var(--text-main);
    font-family: 'Roboto', 'Segoe UI', sans-serif; /* Ensure clean font */
}

/* Page Header Override */
.section-first {
    padding-top: 40px;
    padding-bottom: 60px;
}

/* Main Calculator Card */
.calc-box1, .main-box {
    background: #ffffff;
    border: none;
    border-radius: var(--border-radius);
    box-shadow: var(--card-shadow);
    padding: 30px;
    margin-bottom: 30px;
    transition: box-shadow var(--transition-speed);
}

.calc-box1:hover, .main-box:hover {
    box-shadow: var(--hover-shadow);
}

/* Headlines */
h1.text-center {
    color: var(--brand-dark);
    font-weight: 700;
    margin-bottom: 1.5rem;
    font-size: 2.2rem;
    letter-spacing: -0.5px;
}

h2, h3 {
    color: var(--brand-blue);
    font-weight: 600;
}

/* Form Elements */
.form-group label.cust-lable {
    font-weight: 600;
    color: var(--brand-dark);
    font-size: 0.95rem;
    margin-bottom: 8px;
    display: block;
}

.form-control, .custom-select {
    height: 48px; /* Taller inputs */
    border-radius: 8px;
    border: 1px solid #dce4ec;
    background-color: #fcfdfe;
    font-size: 1rem;
    padding-left: 15px;
    transition: all 0.2s ease;
}

.form-control:focus, .custom-select:focus {
    border-color: var(--brand-blue);
    box-shadow: 0 0 0 3px rgba(0, 82, 156, 0.15);
    background-color: #fff;
}

.input-group-text {
    background-color: var(--brand-light-blue);
    border: 1px solid #dce4ec;
    border-right: none;
    border-radius: 8px 0 0 8px;
    color: var(--brand-blue);
}

.form-control, .custom-select {
    border-radius: 0 8px 8px 0; /* Align with input group */
}

/* Primary Action Button */
#matBtn, .btn-primary {
    background: linear-gradient(135deg, var(--brand-blue) 0%, var(--brand-dark) 100%);
    border: none;
    border-radius: 30px; /* Pill shape */
    padding: 12px 40px;
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 15px rgba(0, 82, 156, 0.3);
    transition: transform 0.2s, box-shadow 0.2s;
    width: 100%; /* Full width on mobile, max-width adjusted below */
    max-width: 300px;
    margin-top: 10px;
}

#matBtn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 82, 156, 0.4);
}

/* Rider Checkboxes - Modern Toggle Style */
.custom-control-label {
    padding-left: 5px;
    font-size: 1rem;
    cursor: pointer;
    color: var(--text-main);
}

.custom-control-label::before {
    border-radius: 4px;
    border: 2px solid #cbd5e0;
    width: 1.25rem;
    height: 1.25rem;
}

.custom-checkbox .custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--brand-blue);
    border-color: var(--brand-blue);
}

/* Sidebar Styling */
.box-section3 {
    border-radius: 0 0 var(--border-radius) var(--border-radius);
    overflow: hidden; /* For border radius */
    border: none;
    background: #fff;
    box-shadow: var(--card-shadow);
    margin-top: 0; /* Ensure it touches the button above */
}

.box-section3 ul li {
    padding: 15px 20px;
    border-bottom: 1px solid #f0f0f0;
    transition: background-color 0.2s;
}

.box-section3 ul li:last-child {
    border-bottom: none;
}

.box-section3 ul li:hover {
    background-color: var(--brand-light-blue);
}

.box-section3 ul li a {
    color: var(--text-main);
    font-weight: 500;
    display: block;
    text-decoration: none;
}

.box-section3 ul li a:hover {
    color: var(--brand-blue);
}

.button-more {
    margin-bottom: 0; /* Remove gap between button and box */
}

.button-more a {
    background-color: var(--brand-gold);
    color: var(--brand-dark);
    font-weight: 700;
    border-radius: 8px 8px 0 0;
    box-shadow: none; /* Remove shadow to blend better or keep it? User didn't specify, but flat connection usually implies no shadow between them. Let's keep shadow for now but maybe verify. Actually, if they are flush, shadow might look weird. Let's remove bottom shadow from button or make it z-index higher. For now, just radius. */
    box-shadow: 0 -4px 10px rgba(0,0,0,0.05); /* Shadow upwards only */
}

/* Breadcumb subtle */
.brdcrumb {
    font-size: 0.85rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
}

.brdcrumb a {
    color: var(--brand-blue);
    font-weight: 600;
}

/* Result Box Polish */
#ajbox .card {
    border: 1px solid #e1e8ed !important;
    border-radius: 12px !important;
    overflow: hidden;
}

#ajbox .card-header, .thead-light th {
    background-color: #f8f9fa;
    border-bottom: 1px solid #e1e8ed;
    color: var(--brand-dark);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.5px;
}

/* Tablet/Desktop Grid Fixes */

/* --- Floating Action Buttons --- */
.floating-action-buttons {
    position: fixed;
    bottom: 30px;
    right: 30px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    z-index: 9999; /* Ensure it stays on top of everything */
}

.float-btn {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-size: 28px;
    text-decoration: none;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
}

.whatsapp-btn {
    background-color: #25d366;
}

.call-btn {
    background-color: var(--primary-color);
}

.float-btn:hover {
    transform: translateY(-5px) scale(1.1);
    color: var(--white);
    text-decoration: none;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

/* Pulsing effect for WhatsApp */
.whatsapp-btn::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    border-radius: 50%;
    border: 2px solid #25d366;
    animation: pulse 2s infinite;
    z-index: -1;
}

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

@media (max-width: 768px) {
    .floating-action-buttons {
        bottom: 20px;
        right: 20px;
        gap: 10px;
    }
    .float-btn {
        width: 50px;
        height: 50px;
        font-size: 24px;
    }
}
/* Overrides for text decoration on all links */
a:hover {
    text-decoration: none !important;
}

/* WhatsApp Nav Button Custom Color */
.header-whatsapp .btn-success {
    background-color: #25d366 !important;
    border-color: #25d366 !important;
}
.header-whatsapp .btn-success:hover {
    background-color: #128c7e !important;
    border-color: #128c7e !important;
}
/* Swiper Navigation Arrows Customization */
.services-carousel-wrapper {
    position: relative;
    padding: 0 80px; /* Give more space for arrows on sides */
}

/* Base styles for the next/prev buttons */
.services-next,
.services-prev {
    color: var(--primary-color) !important;
    background: var(--white);
    width: 45px !important;
    height: 45px !important;
    border-radius: 50%;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    top: 50% !important;
    transform: translateY(-50%);
    margin-top: -15px !important; /* Adjust offset for pagination space */
}

/* Positioning them completely outside the slide area */
.services-prev {
    left: 0 !important;
}

.services-next {
    right: 0 !important;
}

/* Smaller icons inside the circle */
.services-next::after,
.services-prev::after {
    font-size: 1.2rem !important;
    font-weight: 900;
}

/* Hover effects */
.services-next:hover,
.services-prev:hover {
    background: var(--primary-color);
    color: var(--white) !important;
}

@media (max-width: 768px) {
    .services-carousel-wrapper {
        padding: 0 10px; /* Less space on mobile */
    }
    .services-next,
    .services-prev {
        display: none !important; /* Hide arrows on mobile to save space, relies on swipe */
    }
}
/* Override blue button text color on hover */
.btn-primary:hover,
.btn:hover {
    color: var(--white) !important;
}
/* Smooth transitions for all buttons */
.btn, .btn-primary, .btn-secondary, .btn-outline, #matBtn, .lpcBtn {
    transition: all 0.3s ease-in-out !important;
}