@import url("https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,100..900;1,9..144,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&family=Space+Grotesk:wght@300..700&display=swap");

@import url("https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,100..900;1,9..144,100..900&family=Outfit:wght@100..900&family=Roboto:ital,wght@0,100..900;1,100..900&family=Space+Grotesk:wght@300..700&display=swap");

* {
  font-family: "Outfit", sans-serif;
  font-optical-sizing: auto;
  font-weight: normal;
  font-style: normal;
}

/* * {
  font-family: "Fraunces", serif;
  font-optical-sizing: auto;
  font-weight: normal;
  font-style: normal;
} */

html,
body {
  /* overflow-x: hidden !important; */
}

body {
  font-family: "Outfit", sans-serif !important;
  font-size: 14px;
  line-height: 24px;
  color: rgba(32, 32, 32, 0.5);
  background-color: var(--light-color) !important;
  overflow-x: hidden;
}

:root {
  --primary-color: #ea580c;
  --secondary-color: #27272a;
  --accent-color: #fdba74;
  --black-color: #080808;
  --secondary-txt-color: #6b7280;
  --light-color: #fff7ed;
  --gradient-1: linear-gradient(
    90deg,
    #27272a 0%,
    #342c2b 7.14%,
    #41302c 14.29%,
    #4e342d 21.43%,
    #5b382d 28.57%,
    #693c2e 35.71%,
    #76402d 42.86%,
    #84432c 50%,
    #92462b 57.14%,
    #a04a29 64.29%,
    #af4d27 71.43%,
    #bd5023 78.57%,
    #cc531e 85.71%,
    #db5517 92.86%,
    #ea580c 100%
  );
  --gradient-2: linear-gradient(
    90deg,
    #ea580c 0%,
    #ec601a 7.14%,
    #ee6824 14.29%,
    #ef6f2d 21.43%,
    #f17734 28.57%,
    #f37e3c 35.71%,
    #f48542 42.86%,
    #f68c49 50%,
    #f7924f 57.14%,
    #f89956 64.29%,
    #f9a05c 71.43%,
    #faa662 78.57%,
    #fbad68 85.71%,
    #fcb36e 92.86%,
    #fdba74 100%
  );
  --gradient-3: linear-gradient(
    90deg,
    #fff7ed 0%,
    #fdf7ee 14.29%,
    #fcf6ef 28.57%,
    #faf6f0 42.86%,
    #f9f5f2 57.14%,
    #f7f5f3 71.43%,
    #f6f4f4 85.71%,
    #f4f4f5 100%
  );
}

a {
  text-decoration: none;
}
p {
  color: var(--secondary-txt-color);
}
h2 {
  font-family: "Fraunces", serif;
  font-size: 46px;
}
h2 span {
  font-family: "Fraunces", serif;
  font-weight: 600;
  font-size: 46px;
  font-style: italic;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Fraunces", serif;
}
em {
  font-style: italic;
  font-weight: 600;
}
.text-primary {
  color: var(--primary-color) !important;
}
.text-secondary {
  color: var(--secondary-color) !important;
}
body {
  background-color: var(--light-color);
}

button:focus,
.form-control:focus,
.btn-primary:focus,
input:focus,
.btn:focus {
  outline: none !important;
  box-shadow: none !important;
}

.text-muted {
  color: var(--secondary-color) !important;
}

.btn.btn-primary {
  background: var(--secondary-color);
  transition: all 0.4s ease-in-out;
  font-weight: 500;
  padding: 10px 14px;
  font-size: 14px;
  border-color: var(--secondary-color);
}

.btn.btn-primary:hover,
.btn-outline-primary:hover {
  transition: all 0.1s ease-in-out;
  background: var(--primary-color) !important;
  border-color: var(--secondary-color);
}

/* secondary */
.btn.btn-secondary {
  background: var(--primary-color);
  transition: all 0.4s ease-in-out;
  font-weight: 500;
  padding: 10px 14px;
  font-size: 14px;
  border-color: var(--primary-color);
}

.btn.btn-secondary:hover,
.btn-outline-secondary:hover {
  transition: all 0.1s ease-in-out;
  background: var(--secondary-color) !important;
  border-color: var(--secondary-color);
}

.btn-secondary-outline {
  border: 1px solid var(--secondary-color);
  color: var(--secondary-color) !important;
}

/* header css */
.rounded_12 {
  border-radius: 12px;
}

/* Base Navbar Styling */
.custom-navbar {
  z-index: 9;
  box-shadow: 0 4px 4px 0 rgb(154 154 154 / 10%);
}

/* Logo */
.logo-img {
  height: 40px;
  width: auto;
}

/* Navigation Links */
.nav-link-custom {
  font-family: "Outfit", sans-serif !important;
  font-size: 14px;
  color: var(--secondary-color);
  padding: 0 12px !important;
  font-weight: 600;
}

.nav-link-custom:hover {
  color: var(--secondary-color);
  font-weight: 600;
}

.nav-link-custom.active {
  font-family: "Outfit", sans-serif !important;
  color: var(--primary-color);
  font-weight: 600;
}

/* ======= Hearder End=============== */

.container {
  width: 100%;
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 40px;
  padding-right: 40px;
}

.page-wrapper {
  margin-top: 83px;
}

.bg-lightBody {
  background-color: var(--light-blue);
}

.textBlack {
  color: var(--secondary-color) !important;
}
.footer a {
  text-decoration: none;
}

.footer a:hover {
  color: var(--primary-color) !important;
  font-weight: 500;
}

.footer {
  background: linear-gradient(180deg, #27272a 0%, #686868 100%);
}

.bg-brand-color {
  background-color: var(--primary-color);
}

.contact-box input::placeholder {
  color: #fff !important;
}

.copy-box {
  border-top: 2px solid #fff;
}

/* herosection */
.hero {
  background: url("../images/img/Hero.png") center center / cover no-repeat;
}
.hero-title {
  font-family: "Fraunces", serif;
  font-size: 60px;
  font-style: normal;
  font-weight: 400;
}

.hero-title span {
  font-family: "Fraunces", serif;
}
.know-more-btn {
  border: 0.8px solid rgba(255, 255, 255, 0.3) !important;
  background: rgba(255, 255, 255, 0.2) !important;
}

.hero-image {
  min-height: 560px;
  background: url("../images/img/hero-img.png") center center / cover no-repeat;
}

.story-section {
  padding: 90px 0;
  background-color: var(--light-color);
}

.story-title {
  color: var(--secondary-color);
  font-family: "Fraunces", serif;
}

.story-title span,
.story-title em {
  color: #ff7e5f;
  font-family: "Fraunces", serif;
  background: var(--gradient-2);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 600;
}

.story-title em {
  font-style: italic;
}

.story-description {
  color: var(--secondary-txt-color);
}

.story-description p {
  margin-bottom: 16px;
}

.story-description strong {
  color: var(--secondary-color);
}
.story-link:hover {
  color: var(--secondary-color);
}

.gradient-title {
  color: #ff7e5f;
  font-family: "Fraunces", serif;
  background: var(--gradient-2);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 600;
}

.gradient-bg {
  background: var(--gradient-2);
}

/* =====================================
   TESTIMONIAL
===================================== */

.testimonial-item {
  width: calc((100% - 48px) / 3);
}

.testimonial-card {
  min-height: 180px;
  position: relative;
  transition: 0.3s ease;
}

.testimonial-card.active {
  border-left: 2px solid var(--primary-color) !important;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.08) !important;
}

.testimonial-card:not(.active) {
  opacity: 0.55;
  transform: scale(0.97);
}

.avatar {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  background: var(--primary-color);
  font-size: 11px;
}

.quote-mark {
  position: absolute;
  right: 20px;
  bottom: 20px;
  color: #e5e7eb;
  font-family: "Fraunces", serif;
  font-size: 60px;
}

.testimonial-btn {
  width: 38px;
  height: 38px;
}

.testimonial-btn:last-child {
  background: var(--primary-color);
  border-color: var(--primary-color);
}

.testimonial-dot {
  width: 6px;
  height: 5px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: #d6d3d1;
}

.testimonial-dot.active {
  width: 16px;
  background: var(--primary-color);
}

/* ========================================
   PRINCIPLES
======================================== */

.principles-section {
  background: var(--gradient-1);
}

.principles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: rgba(255, 255, 255, 0.12);
}

.principle-item {
  min-height: 195px;
  border-right: 1px solid rgba(255, 255, 255, 0.25);
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}

.principle-item:nth-child(3n) {
  border-right: 0;
}

.principle-item:nth-child(n + 4) {
  border-bottom: 0;
}

.principle-number {
  color: rgba(255, 255, 255, 0.18);
  font-family: "Fraunces", serif;
  font-size: 30px;
}

.principle-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  color: #fff;
  background: linear-gradient(135deg, #fdba74, var(--primary-color));
  border-radius: 9px;
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.2);
  font-size: 14px;
}

.principle-item h5 {
  font-family: "Fraunces", serif;
  font-size: 16px;
}

.principle-item p {
  max-width: 320px;
  line-height: 1.5;
}

/* Hover background */
.principle-item:hover {
  background: linear-gradient(135deg, var(--primary-color) 0%, #fb923c 100%);

  transform: translateY(-2px);
  z-index: 2;
}

/* Number */
.principle-item:hover .principle-number {
  color: rgba(255, 255, 255, 0.95);
}

/* Heading */
.principle-item:hover h5 {
  color: #fff !important;
}

/* Description */
.principle-item:hover p {
  color: rgba(255, 255, 255, 0.85) !important;
}

/* Icon */
.principle-item:hover .principle-icon {
  background: #fff;
  color: var(--primary-color);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

/* Smooth icon */
.principle-icon {
  transition: all 0.3s ease;
}

/* ========================================
   FAQ
======================================== */

.faq-question {
  padding: 20px 24px;
  color: var(--secondary-color) !important;
  background: #fff !important;
  box-shadow: none !important;
  font-size: 16px;
  font-weight: 600;
}

.faq-question::after {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  background-color: var(--secondary-color);
  background-image: none;
  content: "+";
  color: #fff;
  font-size: 20px;
  line-height: 30px;
  text-align: center;
}

.faq-question:not(.collapsed)::after {
  background-color: var(--accent-color);
  content: "×";
  color: #fff;
  transform: none;
}

.faq-answer {
  padding: 18px 24px 22px;
  border-top: 1px solid #e5e7eb;
  color: var(--secondary-txt-color);
  font-size: 14px;
  line-height: 1.65;
}

.accordion-button:not(.collapsed)::after {
  background-image: none !important;
  /* transform: rotate(-180deg); */
}

/* ========================================
   CTA SECTION
======================================== */

.cta-section {
  background: var(--accent-color);
}

/* ========================================
   BREADCRUMB HERO
======================================== */

.breadcrumb-hero {
  min-height: 565px;
  display: flex;
  align-items: center;
  color: #fff;
  background: url("../images/img/Bredcrumbes.png") center center / cover no-repeat;
}

.breadcrumb-title em {
  font-family: "Fraunces", serif;
  font-style: italic;
}

.breadcrumb-title strong {
  font-family: "Fraunces", serif;
  font-weight: 700;
}

.breadcrumb-description {
  max-width: 680px;
  color: rgba(255, 255, 255, 0.65);
}

.breadcrumb-note {
  /* display: flex; */
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: fit-content;
  max-width: 100%;
  padding: 10px 20px;
  color: rgba(255, 255, 255, 0.75);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 50px;
}

.breadcrumb-dot {
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  background: #16a34a;
  border-radius: 50%;
}

.bg-gradient-brand {
  background: var(--gradient-2);
}
.icon-box {
  width: 48px;
  height: 48px;
}

/* ========================================
   TIMELINE
======================================== */

.timeline {
  position: relative;
}

.timeline::before {
  content: "";
  position: absolute;
  top: 25px;
  bottom: 25px;
  left: 24px;
  width: 1px;
  background: #e5e7eb;
}

.timeline-item {
  position: relative;
  display: flex;
  gap: 16px;
  padding-bottom: 32px;
}

.timeline-item:last-child {
  padding-bottom: 0;
}

.timeline-content {
  padding-top: 2px;
}

.timeline-content h4 {
  font-weight: 500;
}
.icon-tick {
  width: 25px;
  height: 25px;
}

/* ========================================
   CONTACT
======================================== */

.contact-form {
  position: relative;
  margin-top: -180px;
  z-index: 2;
}

.contact-input {
  min-height: 56px;
  border-color: #ddd6fe;
  border-radius: 10px;
  font-size: 14px;
}

textarea.contact-input {
  min-height: 130px;
}

.contact-input:focus {
  border-color: var(--primary-color);
}

.contact-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  flex: 0 0 62px;
  color: #fff;
  background: var(--secondary-color);
  border-radius: 50%;
  font-size: 24px;
}

.lsp-section table {
  font-size: 11px;
}

.lsp-section th {
  width: 50%;
  background-color: #f8fafc;
  font-weight: 600;
  text-transform: uppercase;
}

.lsp-section td,
.lsp-section th {
  padding: 8px 10px;
}

.grievance-timeline {
  --progress: 0%;
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  isolation: isolate;
}

.grievance-timeline::before {
  content: "";
  position: absolute;
  top: 29px;
  left: 12.5%;
  width: 75%;
  border-top: 2px dotted #d7dee8;
  z-index: -2;
}

.grievance-timeline::after {
  content: "";
  position: absolute;
  top: 29px;
  left: 12.5%;
  width: var(--progress);
  border-top: 3px solid #0b376d;
  z-index: -1;
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}



/* ========================================
   TIMELINE BUTTON
======================================== */

.grievance-level-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: center;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.grievance-level-btn:hover {
  transform: translateY(-3px);
}



/* ========================================
   NUMBER CIRCLE
======================================== */

.grievance-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-bottom: 5px;
  color: #aab4c3;
  background: #fff;
  border: 2px solid #dce3ec;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 600;
  transition:
    color 0.3s ease,
    border-color 0.3s ease;
}

/* Active number */

.grievance-level-btn.active .grievance-number {
  color: #0b376d;
  border-color: #0b376d;
}


/* ========================================
   CONTACT BOXES
======================================== */

.grievance-contact {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 52px;
  padding: 0.75rem;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 0.5rem;
}

.grievance-contact > i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 35px;
  flex: 0 0 28px;
  color: #fff;
  background: var(--primary-color);
  border-radius: 0.375rem;
}

.grievance-contact strong,
.grievance-contact small {
  display: block;
}


.grievance-connector {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 54px;
  background: var(--light-color);
}

.grievance-connector::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  transform: translateX(-50%);
  background: #d9dee7;
}

/* Keep pill above line */

.grievance-connector .badge {
  position: relative;
  z-index: 1;
  padding: 7px 18px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  border: 1px solid;
}

.connector-warning::before {
  background: #f6c453;
}

.connector-warning .badge {
  color: #99501b;
  background: #fff3cd;
  border-color: #f6c453;
}

.connector-info::before {
  background: #6ed3e5;
}
.connector-info .badge {
  color: #176078;
  background: #d9f7fc;
  border-color: #6ed3e5;
}


.connector-danger::before {
  background: #f58a9d;
}

.connector-danger .badge {
  color: #a71942;
  background: #ffe3e8;
  border-color: #f58a9d;
}

.bg-danger-subtle {
  border: 1px solid rgba(210, 21, 66, 0.3) !important;
  background: #ffe4e6 !important;
}
.bg-info-subtle {
  color: #155e75;
  border: 1px solid rgba(8, 145, 178, 0.3);
  background: #cffafe;
}
.bg-warning-subtle {
  border: 1px solid rgba(245, 158, 11, 0.35);
  background: #fef3c7;
  color: #92400e;
}
.bg-primary-subtle {
  border: 1px solid rgba(5, 46, 100, 0.2);
  background: #ebf0fa;
  color: #052e64;
}
.border-primary {
  border: 2px solid #052e64 !important;
}