:root {
  --color-primary-100: #E6F7EE;
  --color-primary-200: #C3EACF;
  --color-primary-300: #9FDDB0;
  --color-primary-400: #7BCF91;
  --color-primary-500: #57C172;
  --color-primary-600: #47AD4F;
  --color-primary-700: #3D9745;
  --color-primary-800: #2F7B37;
  --color-primary-900: #215426;

  --color-accent-100: #E3F2FD;
  --color-accent-200: #BBDEFB;
  --color-accent-300: #90CAF9;
  --color-accent-400: #64B5F6;
  --color-accent-500: #1E88E5;
  --color-accent-600: #1976D2;
  --color-accent-700: #1565C0;
  --color-accent-800: #0D47A1;
  --color-accent-900: #0B3D91;
  
  --color-primary-rgb: 71, 173, 79;
  --color-accent-rgb: 30, 136, 229;

  --color-text-heading: #1A1A1A;
  --color-text: #2A2827;
  --color-text-muted: #555453;

  --border-light: #B5B6B7;

  --font-body: 'Nunito', sans-serif;
  --font-heading: 'Raleway', sans-serif;

  --gap: 1rem;
}


/* === SCROLLBAR === */
::-webkit-scrollbar { width: 0.5rem; }
::-webkit-scrollbar-track { background: #e8e8e8; }
::-webkit-scrollbar-thumb { background: #bbb; }
::-webkit-scrollbar-thumb:hover { background: #bbb; }

/* === GLOBAL RESET === */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Lists */
ul, ol, dl { list-style: none; margin: 0; padding: 0; }

/* Images */
img { display: block; }

/* Body */
body {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.5;
    color: var(--color-text);
    background: #ffffff;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
    color: var(--color-text-heading);
    font-family: var(--font-heading);
    font-weight: 800;
    line-height: 1.2;
    margin: 0 0 1rem;
}

h1 { font-size: 4rem; font-weight: 800; }
h2 { font-size: 3rem; font-weight: 800; }
h3 { font-size: 2.5rem; font-weight: 800; }
h4 { font-size: 2rem; font-weight: 700; }
h5 { font-size: 1.5rem; font-weight: 700; }
h6 { font-size: 1.25rem; font-weight: 700; }

@media (max-width: 1199px) {
    h1 { font-size: 3.5rem; }
    h2 { font-size: 2.5rem; }
    h3 { font-size: 2rem; }
    h4 { font-size: 1.75rem; }
    h5 { font-size: 1.25rem; }
    h6 { font-size: 1rem; }
}

@media (max-width: 767px) {
    h1 { font-size: 2.5rem; }
    h2 { font-size: 2rem; }
    h3 { font-size: 1.75rem; }
    h4 { font-size: 1.5rem; }
    h5 { font-size: 1.25rem; }
    h6 { font-size: 1rem; }
}

/* Paragraphs */
p {
    margin-bottom: 1rem;
}

/* Links */
a { color: var(--color-primary-500); text-decoration: none; }
a:hover { color: var(--color-primary-700); }

/* Buttons */
button { font-family: inherit; cursor: pointer; }

/* ====== General Button Styles ====== */
.btn {
    display: inline-block;
    padding: 0.8rem 1.4rem;
    color: #fff;
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 500;
    border: none;
    border-radius: 0.375rem;
    transition: all 0.2s ease;
    text-align: center;
    text-decoration: none;
}

.btn:hover {
    color: #fff;
}

/* ====== Primary Button (Blue) ====== */
.btn-primary {
    background-color: var(--color-primary-500);
}

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

/* ====== Neutral Button (Black) ====== */
.btn-neutral {
    background-color: var(--color-text-heading);
}

.btn-neutral:hover {
    background-color: var(--color-text);
}

/* === CONTAINER === */
.container {
    width: 100%;
    margin: 0 auto;
    padding: 0 1rem;
    box-sizing: border-box;
}

@media (min-width: 480px) { .container { max-width: 540px; } }
@media (min-width: 768px) { .container { max-width: 720px; } }
@media (min-width: 1024px) { .container { max-width: 960px; } }
@media (min-width: 1280px) { .container { max-width: 1240px; } }

/* === ROW === */
.row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap);
    box-sizing: border-box;
}

/* === BASE COLUMN === */
[class*="col-"] {
    flex: 0 0 100%;
    min-width: 0;
    box-sizing: border-box;
}

/* === DESKTOP === */
@media (min-width: 1024px) {
  .col-lg-1  { flex: 0 0 calc((100% - (11 * var(--gap))) / 12 * 1); }
  .col-lg-2  { flex: 0 0 calc((100% - (11 * var(--gap))) / 12 * 2 + var(--gap)); }
  .col-lg-3  { flex: 0 0 calc((100% - (11 * var(--gap))) / 12 * 3 + (2 * var(--gap))); }
  .col-lg-4  { flex: 0 0 calc((100% - (11 * var(--gap))) / 12 * 4 + (3 * var(--gap))); }
  .col-lg-5  { flex: 0 0 calc((100% - (11 * var(--gap))) / 12 * 5 + (4 * var(--gap))); }
  .col-lg-6  { flex: 0 0 calc((100% - (11 * var(--gap))) / 12 * 6 + (5 * var(--gap))); }
  .col-lg-7  { flex: 0 0 calc((100% - (11 * var(--gap))) / 12 * 7 + (6 * var(--gap))); }
  .col-lg-8  { flex: 0 0 calc((100% - (11 * var(--gap))) / 12 * 8 + (7 * var(--gap))); }
  .col-lg-9  { flex: 0 0 calc((100% - (11 * var(--gap))) / 12 * 9 + (8 * var(--gap))); }
  .col-lg-10 { flex: 0 0 calc((100% - (11 * var(--gap))) / 12 * 10 + (9 * var(--gap))); }
  .col-lg-11 { flex: 0 0 calc((100% - (11 * var(--gap))) / 12 * 11 + (10 * var(--gap))); }
  .col-lg-12 { flex: 0 0 100%; }

  /* Offsets */
  .offset-lg-1  { margin-left: calc((100% - (11 * var(--gap))) / 12 * 1 + var(--gap)); }
  .offset-lg-2  { margin-left: calc((100% - (11 * var(--gap))) / 12 * 2 + (2 * var(--gap))); }
  .offset-lg-3  { margin-left: calc((100% - (11 * var(--gap))) / 12 * 3 + (3 * var(--gap))); }
  .offset-lg-4  { margin-left: calc((100% - (11 * var(--gap))) / 12 * 4 + (4 * var(--gap))); }
  .offset-lg-5  { margin-left: calc((100% - (11 * var(--gap))) / 12 * 5 + (5 * var(--gap))); }
  .offset-lg-6  { margin-left: calc((100% - (11 * var(--gap))) / 12 * 6 + (6 * var(--gap))); }
}

/* === TABLET === */
@media (min-width: 768px) {
  .col-md-1  { flex: 0 0 calc((100% - (11 * var(--gap))) / 12 * 1); }
  .col-md-2  { flex: 0 0 calc((100% - (11 * var(--gap))) / 12 * 2 + var(--gap)); }
  .col-md-3  { flex: 0 0 calc((100% - (11 * var(--gap))) / 12 * 3 + (2 * var(--gap))); }
  .col-md-4  { flex: 0 0 calc((100% - (11 * var(--gap))) / 12 * 4 + (3 * var(--gap))); }
  .col-md-5  { flex: 0 0 calc((100% - (11 * var(--gap))) / 12 * 5 + (4 * var(--gap))); }
  .col-md-6  { flex: 0 0 calc((100% - (11 * var(--gap))) / 12 * 6 + (5 * var(--gap))); }
  .col-md-7  { flex: 0 0 calc((100% - (11 * var(--gap))) / 12 * 7 + (6 * var(--gap))); }
  .col-md-8  { flex: 0 0 calc((100% - (11 * var(--gap))) / 12 * 8 + (7 * var(--gap))); }
  .col-md-9  { flex: 0 0 calc((100% - (11 * var(--gap))) / 12 * 9 + (8 * var(--gap))); }
  .col-md-10 { flex: 0 0 calc((100% - (11 * var(--gap))) / 12 * 10 + (9 * var(--gap))); }
  .col-md-11 { flex: 0 0 calc((100% - (11 * var(--gap))) / 12 * 11 + (10 * var(--gap))); }
  .col-md-12 { flex: 0 0 100%; }

  /* Offsets */
  .offset-md-1  { margin-left: calc((100% - (11 * var(--gap))) / 12 * 1 + var(--gap)); }
  .offset-md-2  { margin-left: calc((100% - (11 * var(--gap))) / 12 * 2 + (2 * var(--gap))); }
  .offset-md-3  { margin-left: calc((100% - (11 * var(--gap))) / 12 * 3 + (3 * var(--gap))); }
  .offset-md-4  { margin-left: calc((100% - (11 * var(--gap))) / 12 * 4 + (4 * var(--gap))); }
  .offset-md-5  { margin-left: calc((100% - (11 * var(--gap))) / 12 * 5 + (5 * var(--gap))); }
  .offset-md-6  { margin-left: calc((100% - (11 * var(--gap))) / 12 * 6 + (6 * var(--gap))); }
}

/* === MOBILE === */
@media (max-width: 767px) {
  .col-sm-1  { flex: 0 0 calc((100% - (11 * var(--gap))) / 12 * 1); }
  .col-sm-2  { flex: 0 0 calc((100% - (11 * var(--gap))) / 12 * 2 + var(--gap)); }
  .col-sm-3  { flex: 0 0 calc((100% - (11 * var(--gap))) / 12 * 3 + (2 * var(--gap))); }
  .col-sm-4  { flex: 0 0 calc((100% - (11 * var(--gap))) / 12 * 4 + (3 * var(--gap))); }
  .col-sm-5  { flex: 0 0 calc((100% - (11 * var(--gap))) / 12 * 5 + (4 * var(--gap))); }
  .col-sm-6  { flex: 0 0 calc((100% - (11 * var(--gap))) / 12 * 6 + (5 * var(--gap))); }
  .col-sm-7  { flex: 0 0 calc((100% - (11 * var(--gap))) / 12 * 7 + (6 * var(--gap))); }
  .col-sm-8  { flex: 0 0 calc((100% - (11 * var(--gap))) / 12 * 8 + (7 * var(--gap))); }
  .col-sm-9  { flex: 0 0 calc((100% - (11 * var(--gap))) / 12 * 9 + (8 * var(--gap))); }
  .col-sm-10 { flex: 0 0 calc((100% - (11 * var(--gap))) / 12 * 10 + (9 * var(--gap))); }
  .col-sm-11 { flex: 0 0 calc((100% - (11 * var(--gap))) / 12 * 11 + (10 * var(--gap))); }
  .col-sm-12 { flex: 0 0 100%; }

  /* Offsets */
  .offset-sm-1  { margin-left: calc((100% - (11 * var(--gap))) / 12 * 1 + var(--gap)); }
  .offset-sm-2  { margin-left: calc((100% - (11 * var(--gap))) / 12 * 2 + (2 * var(--gap))); }
  .offset-sm-3  { margin-left: calc((100% - (11 * var(--gap))) / 12 * 3 + (3 * var(--gap))); }
  .offset-sm-4  { margin-left: calc((100% - (11 * var(--gap))) / 12 * 4 + (4 * var(--gap))); }
  .offset-sm-5  { margin-left: calc((100% - (11 * var(--gap))) / 12 * 5 + (5 * var(--gap))); }
  .offset-sm-6  { margin-left: calc((100% - (11 * var(--gap))) / 12 * 6 + (6 * var(--gap))); }
}

/* Align items vertically (cross-axis) */
.items-start    { align-items: flex-start; }
.items-center   { align-items: center; }
.items-end      { align-items: flex-end; }
.items-baseline { align-items: baseline; }
.items-stretch  { align-items: stretch; }

/* Justify content horizontally (main-axis) */
.justify-start    { justify-content: flex-start; }
.justify-center   { justify-content: center; }
.justify-end      { justify-content: flex-end; }
.justify-between  { justify-content: space-between; }
.justify-around   { justify-content: space-around; }
.justify-evenly   { justify-content: space-evenly; }

/* Flex direction */
.flex-row    { flex-direction: row; }
.flex-row-reverse { flex-direction: row-reverse; }
.flex-col    { flex-direction: column; }
.flex-col-reverse { flex-direction: column-reverse; }

/* Flex wrapping */
.flex-wrap       { flex-wrap: wrap; }
.flex-nowrap     { flex-wrap: nowrap; }
.flex-wrap-reverse { flex-wrap: wrap-reverse; }

/* Gap (spacing between flex items) */
.gap-1 { gap: 0.25rem; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.gap-6 { gap: 1.5rem; }
.gap-8 { gap: 2rem; }

/* Flex grow / shrink / basis */
.flex-auto   { flex: 1 1 auto; }
.flex-1      { flex: 1 1 0%; }
.flex-none   { flex: 0 0 auto; }

.color-accent {
    color: var(--color-accent-500) !important;
}

.float-right {
    float: right !important;
}

.d-block { display: inline-block !important; }

.floating-enquirybtn {
    position: fixed;
    bottom: 5rem;
    right: 1.25rem;
    background: var(--color-text-heading);
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    text-align: center;
    line-height: 4.375rem;
    cursor: pointer;
    z-index: 2;
}

/* Hide by default (for mobile + tablets) */
.floating-whtsapp {
    display: none;
}

/* Show only on Desktop (≥ 992px) */
@media (min-width: 992px) {
    .floating-whtsapp {
        position: fixed;
        bottom: 1.25rem;
        right: 1.25rem;
        background: #25D366;
        width: 3rem;
        height: 3rem;
        border-radius: 50%;
        text-align: center;
        line-height: 4.375rem;
        z-index: 2;
        display: block;
    }
}

/* === SITE HEADER === */
.site-header {
    position: absolute;
    z-index: 1;
    width: 100%;
    /* text-align: center; */
}

.site-logo {
    background-color: #fff;
    display: inline-flex;
    padding: 0.75rem 1.5rem;
    border-radius: 0 0 0.75rem 0.75rem;
    box-shadow: 0 0 0.125rem 0.25rem rgba(0, 0, 0, 0.01);
}

.site-logo img {
    width: 6rem;
    margin: 0 auto;
}


/* ===== HERO ===== */
.hero {
    background: url('../img/hero-bg.webp') top center no-repeat;
    background-size: auto;
    position: relative;
    padding: 7em 0;
}

.hero::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(255, 255, 255, 0.5);
    /* background: linear-gradient(180deg, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 1) 100%); */
    /* background: linear-gradient(180deg, rgba(30, 136, 229, 0.7) 0%, rgba(43, 182, 115, 0.7) 50%,rgba(255, 255, 255, 0.7) 100%); */
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(227, 242, 253, 1) 100%);
    z-index: 0;
}

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

.hero-heading {
    color: var(--color-text-heading);
    font-size: 2.5rem;
    margin-bottom: 0;
}

.hero-heading > span {
    position: relative;
}

.hero-heading > span::before {
    content: '';
    height: 0.3125rem;
    background-color: var(--color-accent-500);
    position: absolute;
    width: 100%;
    bottom: -0.3125rem;
}

.hero-mii {
    display: flex;
    gap: 2rem;
    align-items: center;
    position: relative;
    justify-content: space-between;
    margin: 1em 0 2rem;
    width: 70%;
}

.hero-mii > div:first-child {
    width: 60%;
}

.hero-mii > div:last-child {
    width: 40%;
}

.hero-mii p {
    color: var(--color-text-heading);
    font-size: 1.5rem;
    font-weight: bold;
    font-style: italic;
    letter-spacing: -0.0625rem;
    line-height: 1;
    margin-bottom: 0;
}

.hero-mii::after {
    content: '';
    position: absolute;
    top: 0;
    left: 57%;
    background-color: var(--color-text-heading);
    height: 100%;
    width: 0.1875rem;
}

.hero-highlights {
    display: flex;
    gap: 0.5rem;
    margin-top: 2rem;
}

.hero-highlights > li {
    background: rgba(255, 255, 255, 0.6);
    border-radius: 0.75rem;
    border: 0.0625rem solid rgba(var(--color-primary-rgb), 0.15);
    box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.08);
    padding: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    width: 33%;
}

.hero-highlights > li > div:first-child {
    line-height: 1;
    height: 2.5rem;
    flex: 0 0 2.5rem;
    max-width: 2.5rem;
    position: relative;
}

.hero-highlights > li > div:first-child img {
    height: 2.5rem;
}

.hero-highlights > li > div:last-child {
    line-height: 1;
    flex: 1 1 0;
}

.hero-highlights > li h5 {
    font-size: 0.85rem;
    margin-bottom: 0.25rem;
}

.hero-highlights > li p {
    margin-bottom: 0;
    font-size: 1rem;
    font-weight: bold;
    color: var(--color-accent-700);
}

.hero-right {
    position: relative;
    display: flex;
    justify-content: end;
}

.hero-form {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%);
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-bottom: 0;
    border-radius: 1rem 1rem 0 0;
    padding: 1.25rem;
    width: 100%;
}

.hero-form-heading {
    font-size: 1.25rem;
    font-weight: 700;
}

.hero-form .enquiry-form .form-group {
    margin-bottom: 0.5rem;
}

/* ===== WHY CHOSOE US ===== */
.usp {
    padding: 0 0 5rem;
    background-color: var(--color-accent-100);
    /* background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(227, 242, 253, 1) 50%); */
}

.usp-inner {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.usp-title {
    font-size: 2.5rem;
    margin-bottom: 0;
}

.usp-desc {
    font-size: 1.2rem;
    margin-bottom: 0;
}

.usp-content {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.usp-card {
    background-color: #EEEEEE;
    border-radius: 0.75rem;
    border: 0.0625rem solid #BBBBBB;
    padding: 1rem 7rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1rem;
}

.usp-card-icon {
    width: 3rem;
}

.usp-card-title {
    color: #111111;
    font-size: 1rem;
    font-weight: 700;
    margin: 0;
    text-align: center;
}

.usp-card-1 {
    background-color: #FFEBD6;
    border-color: #FFD1A8;
}

.usp-card-1 .usp-card-title {
    color: #6E3D00;
}

.usp-card-2 {
    background-color: #D0F0FF;
    border-color: #A3D8FF;
}

.usp-card-2 .usp-card-title {
    color: #00335A;
}

.usp-card-3 {
    background-color: #E5DBFF;
    border-color: #C0B0FF;
}

.usp-card-3 .usp-card-title {
    color: #3A0066;
}

.usp-card-4 {
    background-color: #DFFFE6;
    border-color: #B8F1C0;
}

.usp-card-4 .usp-card-title {
    color: #004D2E;
}

.usp-card-5 {
    background-color: #FFD6E0;
    border-color: #FFADC4;
}

.usp-card-5 .usp-card-title {
    color: #660022;
}

/* ===== BENEFITS ===== */
.benefits {
    background: url('../img/Banner--5.webp') center center no-repeat;
    background-size: cover;
    overflow: hidden;
}

.benefits-mbl-heading {
    display: none;
}

.benefits-points {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    z-index: 0;
}

.benefits-item {
    position: absolute;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 20rem;
    background: rgba(0, 0, 0, 0.4);
    padding: 1rem;
    flex-wrap: wrap;
    border-radius: 3rem;
}

.benefits-item-icon {
    background-color: #fff;
    border-radius: 50%;
    height: 4rem;
    flex: 0 0 4rem;
    max-width: 4rem;
    position: relative;
}

.benefits-item-icon > img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
}

.benefits-item-title {
    flex: 1 1 0;
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 600;
}

.benefits-item:nth-child(1) {
    top: 3rem;
    left: 50%;
    transform: translateX(-50%);
}

.benefits-item:nth-child(2) {
    top: 9rem;
    left: 3rem;
}

.benefits-item:nth-child(3) {
    top: 9rem;
    right: 3rem;
}

.benefits-item:nth-child(4) {
    top: 21rem;
    left: 0;
}

.benefits-item:nth-child(5) {
    top: 21rem;
    right: 0;
}

.benefits-item::before,
.benefits-item::after {
    content: '';
    position: absolute;
    border: 1px dashed #fff;
}

.benefits-item::before {
    left: 50%;
    transform: translate(-50%);
    top: 100%;
}

.benefits-item::after {
    top: 140%;
}

.benefits-item:nth-child(1)::before {
    height: 70%;
}

.benefits-item:nth-child(2)::before,
.benefits-item:nth-child(3)::before,
.benefits-item:nth-child(4)::before,
.benefits-item:nth-child(5)::before {
    height: 40%;
}

.benefits-item:nth-child(1)::after {
    display: none;
}

.benefits-item:nth-child(2)::after,
.benefits-item:nth-child(4)::after {
    left: 50%;
}

.benefits-item:nth-child(3)::after,
.benefits-item:nth-child(5)::after {
    right: 50%;
}

.benefits-item:nth-child(2)::after,
.benefits-item:nth-child(3)::after {
    width: 66%;
}

.benefits-item:nth-child(4)::after,
.benefits-item:nth-child(5)::after {
    width: 56%;
}


/* .benefits-item:nth-child(5)::before {
    content: '';
    width: 2px;
    height: 40%;
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    top: 100%;
    border: 1px dashed #fff;
}

.benefits-item:nth-child(5)::after {
    content: '';
    width: 50%;
    height: 2px;
    position: absolute;
    right: 50%;
    top: 140%;
    border: 1px dashed #fff;
} */

.benefits-content {
    position: relative;
}

.benefits-circle {
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 0.0625rem solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    width: 30rem;
    height: 30rem;
    position: relative;
    top: 15rem;
    margin: 0 auto;
    z-index: 1;
}

.benefits-inner-circle {
    background: #1E88E5;
    background: radial-gradient(circle, rgba(30, 136, 229, 1) 0%, rgba(87, 193, 114, 1) 100%);
    border-radius: 50%;
    width: 26rem;
    height: 26rem;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: -0.125rem -0.375rem 0.375rem rgba(0, 0, 0, 0.1);
    z-index: 1;
}

.arc-outline {
    width: 34rem;
    height: 34rem;
    border: 0.625rem solid #FFF;
    border-bottom: none;
    border-top-left-radius: 38rem;
    border-top-right-radius: 38rem;
    background: transparent;
    position: absolute;
    top: -2rem;
    left: -2rem;
    z-index: 1;
}

.benefits-title {
    color: #fff;
    font-size: 1.75rem;
    padding: 5.5rem 2.5rem 0;
    margin-bottom: 0;
}


/* ===== REQUIREMENTS ===== */
.requirements {
    max-width: 70%;
    margin: 6.7rem auto 0;
    padding: 6rem 2.5em 2.5rem;
    border: 0.0625rem dashed var(--border-light);
    border-radius: 1rem;
    position: relative;
}

.requirements-title {
    font-size: 1.5rem;
    background: #fff;
    border-radius: 3rem;
    border: 0.0625rem dashed var(--border-light);
    padding: 0.75rem 1.25rem;
    text-align: center;
    position: absolute;
    top: -1.70rem;
    left: 50%;
    transform: translateX(-50%);
}

.requirements-card {
    background-color: var(--color-accent-100);
    border: 0.0625rem dashed var(--color-accent-300);
    border-radius: 1.5rem;
    padding: 4.25rem 1.5rem 1.5rem;
    text-align: center;
    position: relative;
}

.requirements-icon {
    background-color: #fff;
    border: 0.125rem dashed var(--color-accent-300);
    position: absolute;
    border-radius: 50%;
    top: -2rem;
    left: 50%;
    transform: translateX(-50%);
    width: 5rem;
    height: 5rem;
}

.requirements-icon img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.requirements-heading {
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 0.75rem;
}

.requirements-point {
    color: var(--color-primary-500);
    font-size: 3rem;
    font-weight: 700;
    font-style: italic;
    line-height: 1;
    margin-bottom: 0;
    letter-spacing: -0.1rem;
}

.requirements-point > span {
    color: var(--color-text-heading);
    font-size: 1rem;
    letter-spacing: normal;
}


/* ===== TESTIMONIALS ===== */
.testimonials {
    margin-top: 6rem;
}

.testimonial-title {
    font-size: 2rem;
    margin-bottom: 0;
}

.testimonial-item {
    border-right: 0.25rem solid var(--border-light);
    border-bottom: 0.25rem solid var(--border-light);
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    border-radius: 1rem;
}

.testimonial-item .quote {
    font-size: 0.875rem;
    color: var(--color-text-muted);
    margin-bottom: 0;
}

.testimonial-rating {
    display: flex;
}

.testimonial-item .meta {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.testimonial-item .meta img {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
}

.testimonial-item .name {
    font-size: 1em;
    margin-bottom: 0;
}

.testimonial-item .location {
    font-size: 0.875em;
    margin-bottom: 0;
}


/* ===== PROCESS ===== */
.process {
    margin-top: 6rem;
    padding-bottom: 10rem;
    position: relative;
    background: 
        radial-gradient(57.93% 52.99% at 56.11% 47.99%, rgba(255,255,255,0) 0%, rgba(71,173,79,0.19) 50%, rgba(255,255,255,0) 100%),
        linear-gradient(236deg, rgba(255, 255, 255, 0) 0.9%, rgba(30, 136, 229, 0.3) 25%, rgba(255, 255, 255, 0) 70%),
        linear-gradient(235deg, rgba(255, 255, 255, 0) 45%, rgba(71, 173, 79, 0.23) 62%, rgba(255, 255, 255, 1) 100%);
}

.process-title {
    background-color: #fff;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    top: 0;
    font-size: 1.75rem;
    padding: 1rem 6rem;
    border-radius: 0 0 1rem 1rem;
    margin-bottom: 0;
    border-bottom: 0.25rem solid var(--color-accent-500);
}

.process-content {
    padding-top: 13.75rem;
}

.step {
    display: flex;
    flex-direction: column;
    gap: 3rem;
    align-items: center;
}

.step-icon {
    border: 0.125rem dashed var(--color-accent-500);
    width: 6rem;
    height: 6rem;
    border-radius: 50%;
    position: relative;
}

.step-icon::before {
    content: '';
    background-color: var(--color-accent-500);
    height: 5rem;
    width: 5rem;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
}

.step-icon::after {
    content: '';
    border: 0.0625rem dashed var(--color-accent-500);
    height: 3rem;
    position: absolute;
    left: 50%;
    top: 100%;
}

.step-icon img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.step-content {
    padding: 1.5rem;
    position: relative;
    background: linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
    border: 1.5rem solid var(--color-accent-500);
    border-right: none;
    border-bottom: none;
    border-radius: 1rem 0 0 0;
}

.step-number {
    color: var(--color-text-heading);
    font-weight: 600;
    font-size: 0.875rem;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}

.step-heading {
    font-size: 1rem;
    margin-bottom: 0.375rem;
}

.step-desc {
    font-size: 0.8125rem;
    margin-bottom: 0;
}

.step-1 .step-icon,
.step-1 .step-icon::after,
.step-1 .step-content {
    border-color: #E53935;
}

.step-1 .step-icon::before {
    background-color: #E53935;
}

.step-1 .step-heading {
    color: #E53935;
}

.step-2 .step-icon,
.step-2 .step-icon::after,
.step-2 .step-content {
    border-color: #FB8C00;
}

.step-2 .step-icon::before {
    background-color: #FB8C00;
}

.step-2 .step-heading {
    color: #FB8C00;
}

.step-3 .step-icon,
.step-3 .step-icon::after,
.step-3 .step-content {
    border-color: #C0CA33;
}

.step-3 .step-icon::before {
    background-color: #C0CA33;
}

.step-3 .step-heading {
    color: #C0CA33;
}

.step-4 .step-icon,
.step-4 .step-icon::after,
.step-4 .step-content {
    border-color: #43A047;
}

.step-4 .step-icon::before {
    background-color: #43A047;
}

.step-4 .step-heading {
    color: #43A047;
}

.step-2 {
    margin-top: -2.5rem;
}

.step-3 {
    margin-top: -5rem;
}

.step-4 {
    margin-top: -7.5rem;
}


/* ===== CTA + FOMO ===== */
.cta {
    background: url('../img/women_on_road_with_sokudo_scooty.webp') center center no-repeat;
    background-size: cover;
    position: relative;
}

.cta::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(90deg, rgba(255, 255, 255, 1) 0%,  rgba(255, 255, 255, 0) 100%);
}

.cta-content {
    position: relative;
    z-index: 1;
}

.fomo-title {
    font-size: 2.5rem;
}

.fomo-logo-row {
    display: flex;
    align-items: center;
    position: relative;
    width: 80%;
    justify-content: space-between;
    margin: 2em 0 3em;
}

.fomo-logo-row::after {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--color-text-heading);
    height: 100%;
    width: 0.375rem;
}

.fomo-logo-row > div {
    width: 50%;
}

.fomo-logo-row > div:last-child img {
    text-align: center;
    margin: 0 auto;
}

.fomo-logo-row p {
    color: var(--color-text-heading);
    font-size: 4rem;
    font-weight: bold;
    font-style: italic;
    letter-spacing: -0.125rem;
    line-height: 0.8;
}

.cta-form {
    background: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(255, 255, 255, 0) 100%);
    border-radius: 1rem 1rem 0 0;
    padding: 2.5rem;
    margin-top: -5rem;

}

.enquiry-heading {
    color: #fff;
    font-size: 1.5rem;
}

.enquiry-form .form-group {
    margin-bottom: 1rem;
}

.enquiry-form .form-group-submit {
    margin-bottom: 0;
    margin-top: 2rem;
}

.form-group-submit .btn {
    width: 100%;
    align-items: center;
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    padding: 1rem;
}

.form-control {
    background-color: #fff;
    border: 0.0625rem solid var(--border-light);
    border-radius: 0.375rem;
    color: var(--color-text-heading);
    display: block;
    padding: 0.75rem 1.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.5;
    height: 3rem;
    width: 100%;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

select.form-control {
    background-color: #fff;
    color: var(--color-text-heading);
    padding: 0.75rem 1rem;
}

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    color: var(--color-text-heading);
}

::-moz-placeholder { /* Firefox 19+ */
    color: var(--color-text-heading);
}

:-ms-input-placeholder { /* IE 10+ */
    color: var(--color-text-heading);
}

:-moz-placeholder { /* Firefox 18- */
    color: var(--color-text-heading);
}

.form-control:focus,
.form-control:focus-visible {
    outline: none;
    border: 0.0625rem solid var(--color-accent-500);
}


/* ===== FOOTER ===== */
.site-footer {
    padding: 4rem 0 1.25rem;
}

.certifications {
    display: flex;
    gap: 2.5rem;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.certifications li img {
    max-width: 5rem;
    transition: filter 0.3s ease;
}

.certifications li img:hover {
    filter: saturate(0);
}

.footer-connect {
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    margin: 1.5rem auto 0;
    max-width: 70%;
}

.footer-connect-left {
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.contacts {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
}

.contacts li a {
    color: var(--color-text);
    display: flex;
    align-items: center;
    gap: 0.125rem;
    font-weight: bold;
    transition: all 0.3s ease;
}

.contacts li a:hover {
    color: var(--color-accent-500);
}

.social {
    display: flex;
    gap: 0.25rem;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.social li img {
    width: 1.5rem;
}


/* ==============================
   ENQUIR FORM
============================== */
/* Close Button (X) */
.closeBtn,
.closeBtn:hover,
.closeBtn:focus {
    position: absolute;
    top: -0.75rem;
    right: -0.75rem;
    font-size: 1.25rem;
    cursor: pointer;
    z-index: 1001;
    background: var(--color-text-heading);
    color: #fff;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    text-align: center;
    line-height: 1.75rem;
    border: 0.125rem solid #fff;
    box-shadow: 0px 0px 0.625rem rgba(0, 0, 0, 0.3);
}

/* Popup Overlay */
#popupOverlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999;
}

/* Popup Form */
#enquiryPopup {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    width: 90%;
    max-width: 34rem;
    background-color: #fff;
    padding: 1.5rem;
    border-radius: 0.625rem;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 1rem rgba(0,0,0,0.3);
    z-index: 1000;
}


#enquiryPopup .enquiry-form .form-group {
    margin-bottom: 0.5rem;
}

#enquiryPopup .enquiry-form .form-group-submit {
    margin-top: 1rem;
}

/* ==============================
   MAIL THANK YOU OR ERROR
============================== */
.thank-you {
    text-align: center;
    margin: 2rem 0;
}

.thank-you img {
    margin: 0 auto;
}


/* ==============================
   RESPONSIVE
============================== */
@media (max-width: 991px) {
    .site-logo {
        padding: 0.5rem 1rem;
    }

    .site-logo img {
        width: 5rem;
    }

    .hero {
        padding: 7em 0 3rem;
    }

    .hero-heading {
        font-size: 2rem;
    }

    .hero-heading > span::before {
        display: none;
    }

    .hero-mii {
        width: 100%;
    }

    .hero-mii > div:first-child {
        width: 40%;
    }

    .hero-mii > div:last-child {
        width: 60%;
    }

    .hero-mii::after {
        left: 40%;
    }

    .hero-highlights {
        flex-direction: column;
    }

    .hero-highlights > li {
        width: 100%;
        padding: 1rem;
    }

    .hero-highlights > li h5 {
        font-size: 1rem;
    }

    .hero-highlights > li p {
        font-size: 1.2rem;
    }

    .hero-right {
        margin-top: 1.5rem;
    }

    .hero-form {
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 1) 100%);
        border-bottom: 1px solid rgba(0, 0, 0, 0.15);
        border-radius: 1rem;
        margin-top: 1rem;
    }

    .usp {
        padding: 0 0 4rem;
    }

    .usp-title {
        font-size: 2rem;
    }

    .usp-desc {
        font-size: 1rem;
    }

    .usp-card {
        padding: 1rem;
    }

    .usp-card-title {
        font-size: 0.9rem;
    }

    .benefits-mbl-heading {
        background: radial-gradient(circle, rgba(30, 136, 229, 1) 0%, rgba(87, 193, 114, 1) 100%);
        padding: 1rem;
        border-radius: 0 0 1rem 1rem;
        display: block;
    }

    .benefits-mbl-heading .benefits-mbl-title {
        color: #fff;
        font-size: 1.25rem;
        margin-bottom: 0;
        text-align: center;
    }

    .benefits-points {
        position: relative;
        padding: 2rem 0;
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .benefits-item {
        position: static;
        transform: none !important;
        width: 100%;
    }

    .benefits-circle {
        display: none;
    }

    .requirements {
        padding: 4rem 1rem 2rem;
        margin: 4.7rem 1rem 0;
        max-width: 100%;
    }

    .requirements .row {
        gap: 4rem;
    }

    .requirements-title {
        font-size: 1.2rem;
        width: 90%;
    }

    .testimonials {
        margin-top: 4rem;
    }

    .process {
        margin-top: 4rem;
        padding-bottom: 4rem;
    }

    .process-title {
        font-size: 1.5rem;
        width: 90%;
        padding: 1rem;
    }

    .process-content {
        padding-top: 8rem;
    }

    .step {
        margin-top: 0;
        gap: 1rem;
    }

    .step-icon {
        width: 4rem;
        height: 4rem;
    }

    .step-icon::before {
        height: 3rem;
        width: 3rem;
    }

    .step-icon::after {
        height: 1rem;
    }

    .step-icon img {
        width: 45%;
    }

    .step-content {
        border: 0.5rem solid var(--color-accent-500);
        border-radius: 1rem;
        padding: 1rem;
        position: relative;
    }

    .step-content::after {
        content: '';
        border: 0.0625rem dashed var(--color-accent-500);
        height: 1rem;
        position: absolute;
        left: 50%;
        top: calc(100% + 0.5rem);
    }

    .step-1 .step-content::after {
        border-color: #E53935;
    }

    .step-2 .step-content::after {
        border-color: #FB8C00;
    }

    .step-3 .step-content::after {
        border-color: #C0CA33;
    }

    .step-4 .step-content::after {
        display: none;
    }

    .cta-content {
        padding-top: 4rem;
    }

    .fomo-title {
        font-size: 2rem;
    }

    .fomo-logo-row {
        width: 100%;
    }

    .cta-form {
        padding: 1.5rem;
        margin-top: 2rem;
    }

    .cta::after {
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 1) 100%);
    }

    .site-footer {
        padding-top: 4rem;
    }

    .footer-connect {
        max-width: 100%;
        justify-content: center;
    }

    .certifications {
        gap: 2rem;
    }

    .certifications li img {
        max-width: 4rem;
    }

    .floating-enquirybtn {
        display: none;
    }
}

@media (max-width: 767px) {
    
}

@media (max-width: 480px) {
    
}
/* Hide by default (Desktop) */
.mobile-section-footer {
    display: none;
}

/* Show on Mobile Only */
@media (max-width: 767px) {
    .mobile-section-footer {
        display: flex;
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        z-index: 9999;
        background: #ffe660;
        padding: 2px 0;
        justify-content: center;
        align-items: center;
        box-shadow: 0 -2px 6px rgba(0,0,0,0.1);
        animation: floatPulse 2.2s infinite ease-in-out;
    }

    .mobile-section-footer a.btn {
        width: 33.33%;
        text-align: center;
        font-size: 12px;
        font-weight: 600;
        color: #fff;
        padding: 10px 0;
        border-radius: 0;
        border-right: 1px solid #fff;
    }

    .mobile-section-footer a.btn:last-child {
        border-right: none;
    }

    /* Button Colors */
    .btn-enquire {
        background: #ff7a00;
    }

    .btn-whatsapp {
        background: #25D366;
    }

    .btn-call {
        background: #007bff;
    }

    /* Floating + Pulse Animation */
    @keyframes floatPulse {
        0%, 100% {
            transform: translateY(0);
        }
        50% {
            transform: translateY(-4px) scale(1.02);
        }
    }
}