@font-face {
   font-family: 'geo';
   src: url('../Assets_LandingPage/fonts/geometos-webfont.woff2') format('woff2'),
      url('../Assets_LandingPage/fonts/geometos-webfont.woff') format('woff');
   font-weight: normal;
   font-style: normal;
   font-display: swap;
}

@font-face {
   font-family: 'rupee';
   src: url('../Assets_LandingPage/fonts/itf_rupee-webfont.woff2') format('woff2'),
      url('../Assets_LandingPage/fonts/itf_rupee-webfont.woff') format('woff');
   font-weight: normal;
   font-style: normal;
   font-display: swap;
}

@font-face {
   font-family: 'vag-bold';
   src: url('../Assets_LandingPage/fonts/vagroundedstd-bold-webfont.woff2') format('woff2'),
      url('../Assets_LandingPage/fonts/vagroundedstd-bold-webfont.woff') format('woff');
   font-weight: normal;
   font-style: normal;
   font-display: swap;
}

@font-face {
   font-family: 'vag-light';
   src: url('../Assets_LandingPage/fonts/vagroundedstd-light-webfont.woff2') format('woff2'),
      url('../Assets_LandingPage/fonts/vagroundedstd-light-webfont.woff') format('woff');
   font-weight: normal;
   font-style: normal;
   font-display: swap;
}

:root {
   --brand-blue: #2a54a0;
   --brand-green: #36b24a;
   --brand-red: #97282a;
   --brand-yellow: #f8a51c;
   --brand-white: #ffffff;
   --light-brown: #eba374;
   --pink-vary-dark: #f7d8bc;
   --pink-dark: #f8e5d3;
   --pink-light: #fcf2e7;
   --grey-dark: #4d4e4e;
   --grey-light: #666666;
   --grey-very-light: #ececec;

   --ff-geo: 'geo';
   --ff-rupee: 'rupee';
   --ff-vag-light: 'vag-light';
   --ff-vag-bold: 'vag-bold';

   --nav-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
   --input-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
   --form-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

.font-geo {
   font-family: var(--ff-geo);
}

.font-rupee {
   font-family: var(--ff-rupee);
}

.font-vag-light {
   font-family: var(--ff-vag-light);
}

.font-vag-bold {
   font-family: var(--ff-vag-bold);
}

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

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

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

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

.bg-pink-dark {
   background-color: var(--pink-dark);
}

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

.bg-grey-dark {
   background-color: var(--grey-dark);
}

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

.bg-pink-very-dark {
   background-color: var(--pink-vary-dark);
}

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

.text-brand-blue {
   color: #87262A;
}

.text-brand-white {
    color: var(--brand-white);
}

.text-brand-green {
   color: var(--brand-green);
}

.text-brand-red {
   color: var(--brand-red);
}

.text-brand-yellow {
   color: var(--brand-yellow);
}

.text-pink-dark {
   color: var(--pink-dark);
}

.text-pink-light {
   color: var(--pink-light);
}

.text-grey-dark {
   color: var(--grey-dark);
}

.text-grey-light {
   color: var(--grey-light);
}

.shadow-1 {
   box-shadow: var(--nav-shadow);
}

.dark-pink-border {
   border: 4px solid var(--pink-dark);
}

.light-pink-border {
   border: 4px solid var(--pink-light);
}

.very-dark-pink-border {
   border: 4px solid var(--pink-vary-dark);
}

body {
   font-family: var(--ff-vag-light);
}

ul li {
   list-style: none;
}

ul li strong {
   color: var(--grey-dark);
}

.primary-nav-inner {
   max-width: 83rem;
}


/* #hero-section {
   position:relative;
   background-image: url('../Assets_LandingPage/images/hero-image.png');
   background-size: 100% auto;
   background-position: bottom left;
   background-repeat: no-repeat;
}




.hero-section {
   display: grid;
   grid-template-columns: 1fr;
   gap: 1.5rem;
   padding-block: 2.5rem;
   
}

.header-logo {
   max-width: 12.5rem;
}

.star-image {
   max-width: 17.5rem;
}

.highlights-heading {
   font-family: var(--ff-geo);
   font-size: clamp(1.5rem, 1.3171rem + 0.7805vw, 2rem);
   position: relative;
   max-width: max-content;
}

.highlight-list {
   display: grid;
   grid-template-columns: 1fr;
   gap: .75rem;
}

.highlight-item {
   position: relative;
   width: 100%;
   max-width: 17.5rem;
   margin-inline: auto;
}

.highlight-item img {
   max-width: 3rem;
   z-index: 10;
}

.highlight-item p {
   color: var(--brand-red);
   font-family: var(--ff-vag-bold);
   font-size: .75rem;
   border: 1px solid var(--brand-yellow);
   padding: .25rem 1rem .25rem 2.5rem;
   height: 80%;
   margin-left: -2rem;
   border-radius: 0 100vh 100vh 0;
   line-height: 1.3;
   z-index: 5;
   background-color: var(--pink-light);
}

.highlight-disclaimer {
   font-size: clamp(0.625rem, 0.5793rem + 0.1951vw, 0.75rem);
}

.hero-form {
   border-radius: 1rem;
   box-shadow: var(--form-shadow);
}

.hero-form .form-control,
.hero-form .form-select {
   background-color: var(--grey-very-light);
   box-shadow: var(--input-shadow);
}

.hero-form .form-control:focus,
.hero-form .form-select:focus {
   border-color: var(--grey-light);
}

.hero-form .form-check-input {
   appearance: none;
   background-image: url('../Assets_LandingPage/images/unchecked.svg');
}

.hero-form .form-check-input:checked {
   border-radius: 0;
   background-color: transparent;
   background-image: url('../Assets_LandingPage/images/checked.svg');
}

.hero-form .form-control::placeholder,
.hero-form .form-select::placeholder {
   color: var(--grey-dark);
}

.submit-label {
   font-size: .5rem;
}

.submit-btn:focus,
.submit-btn:hover,
.submit-btn:active,
.submit-btn:active {
   background-color: var(--brand-yellow);
   color: var(--brand-blue);
} */

 


 
#hero-section {
   width: 100%;
   padding: 2rem 0;
   display: flex;
   justify-content: center;
   align-items: center;
   background-color: #f5f5f5;
}

.hero-container {
   display: flex;
   width: 100%;
   max-width: none;
   gap: 2rem;
   padding: 0 1rem 0 0;
   align-items: flex-start;
} 

.hero-left {
   padding: 0;
   flex: 8;
   display: flex;
   flex-direction: column;
   gap: 1rem;
}

.hero-row {
   display: flex;
   gap: 1rem;
   width: 100%;
   height: auto;
   align-items: flex-start;
} 

/* First Column: Hero Image */
.hero-image-column {
   margin-top: 1rem;
   flex: 7;
   display: flex;
   justify-content: center;
   align-items: flex-start;
}

.hero-image-column img {
   margin-top: 5rem;
   width: 100%;
   height: 100%;
   object-fit: contain;
   /* border-radius: 5px; */
}

/* Second Column: Banner Image */
.banner-image-column {
   margin-top: 5rem;
   flex: 3;
   display: flex;
   justify-content: center;
   align-items: center;
}

.banner-image-column img {
   width: 100%;
   height: 100%;
   object-fit: contain; 
   border-radius: 5px;
}


.header-logo {
   max-width: 12.5rem;
}

.star-image {
   max-width: 17.5rem;
}

.hero-highlights{
   padding: 0.5rem;
}
.highlights-heading {
   font-family: var(--ff-geo);
   font-size: clamp(1.5rem, 1.3171rem + 0.7805vw, 2rem);
   position: relative;
   max-width: max-content;
}

.highlight-list {
   display: grid;
   grid-template-columns: 1fr;
   gap: .75rem;
}

.highlight-item {
   position: relative;
   width: 100%;
   max-width: 17.5rem;
   margin-inline: auto;
}

.highlight-item img {
   max-width: 3rem;
   z-index: 10;
}

.highlight-item p {
   color: var(--brand-red);
   font-family: var(--ff-vag-bold);
   font-size: .75rem;
   border: 1px solid var(--brand-red);
   padding: .25rem 1rem .25rem 2.5rem;
   height: 80%;
   margin-left: -2rem;
   border-radius: 0 100vh 100vh 0;
   line-height: 1.3;
   z-index: 5;
   background-color: var(--pink-light);
}

.highlight-disclaimer {
   font-size: clamp(0.625rem, 0.5793rem + 0.1951vw, 0.75rem);
}



/* Right Column */
.hero-right {
   margin-top: 5rem;
   flex: 4;
   /* 30% width */
   /* background-color: #ffffff; */
   /* padding: 2rem; */
   /* border-radius: 5px; */
   /* box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); */
}

.hero-form {
   height: 100%;
   width: 80%;
   border-radius: 1rem;
   box-shadow: var(--form-shadow);
}

.hero-form .form-control,
.hero-form .form-select {
   background-color: var(--grey-very-light);
   box-shadow: var(--input-shadow);
}
    .needs-validation input::placeholder{
        color:#212529 !important;
    }
    .hero-form .form-control:focus,
    .hero-form .form-select:focus {
        border-color: var(--grey-light);
    }

.hero-form .form-check-input {
   appearance: none;
   background-image: url('../Assets_LandingPage/images/unchecked.svg');
}

.hero-form .form-check-input:checked {
   border-radius: 0;
   background-color: transparent;
   background-image: url('../Assets_LandingPage/images/checked.svg');
}

.hero-form .form-control::placeholder,
.hero-form .form-select::placeholder {
   color: var(--brand-red);
}
.submit-label {
   font-size: .5rem;
   color: var(--brand-red);
}


.submit-btn:focus,
.submit-btn:hover,
.submit-btn:active,
.submit-btn:active {
   background-color: var(--brand-red);
   color: var(--brand-white);
}

/* .hero-form {
   display: flex;
   flex-direction: column;
   gap: 1.5rem;
} */

.form-group {
   display: flex;
   flex-direction: column;
}

.form-group label {
   font-size: 0.9rem;
   margin-bottom: 0.5rem;
   color: #333;
}

.form-group input,
.form-group select {
   padding: 0.8rem;
   border: 1px solid #ccc;
   border-radius: 4px;
   font-size: 1rem;
}

.form-check {
   display: flex;
   align-items: center;
   gap: 0.5rem;
   font-size: 0.9rem;
   color: #333;
}

.hero-form button {
   padding: 0.8rem 1rem;
   background-color: var(--brand-red);
   border: none;
   border-radius: 4px;
   font-size: 1rem;
   font-weight: bold;
   color: var(--brand-white);
   cursor: pointer;
}

.hero-form button:hover {
   background-color: #e3aa00;
}


.h2-heading,
.h3-heading {
   position: relative;
}

.h2-heading::before,
.h3-heading::before {
   content: '';
   position: absolute;
   left: 50%;
   bottom: 0;
   transform: translateX(-50%);
   height: .25rem;
   width: 6.25rem;
   border-radius: 1rem;
   background-color: var(--brand-red);
}

.h2-heading {
   font-size: clamp(1.125rem, 0.9878rem + 0.5854vw, 1.5rem);
   padding: .75rem 0;
}

.h3-heading {
   font-family: var(--ff-geo);
   font-size: clamp(1.25rem, 1.1128rem + 0.5854vw, 1.625rem);
   padding: .75rem 0;
}

.h4-heading {
   font-family: var(--ff-geo);
   font-size: clamp(1.5rem, 1.3171rem + 0.7805vw, 2rem);
}

.section-para {
   font-size: clamp(0.9375rem, 0.8689rem + 0.2927vw, 1.125rem);
   max-width: 62.5rem;
   line-height: 1.4;
}

.long-para {
   font-size: clamp(0.9375rem, 0.8689rem + 0.2927vw, 1.125rem);
   line-height: 1.3;
}

.nav-pills .nav-link {
   font-family: var(--ff-geo);
   font-size: clamp(1.125rem, 0.8963rem + 0.9756vw, 1.75rem);
   color: var(--grey-light);
   position: relative;
}

.nav-pills .nav-item {
   display: block;
   width: 10rem;
   flex-basis: 10rem;
   flex-grow: 1;
}

.nav-pills .nav-link::before {
   content: '';
   position: absolute;
   left: 50%;
   bottom: 0;
   transform: translateX(-50%);
   height: .25rem;
   width: 5rem;
   border-radius: 1rem;
   background-color: var(--grey-light);
}

.nav-pills .nav-link.active::before {
   background-color: var(--brand-yellow);
}

.nav-pills .nav-link.active {
   color: var(--brand-red);
   background-color: transparent;
}

.nav-pills .nav-link.active+.tab-option-para {
   color: var(--brand-red);
}

.tab-option-para {
   color: var(--grey-light);
   margin-top: .75rem;
   font-weight: 500;
   font-size: clamp(0.875rem, 0.8182rem + 0.2424vw, 1rem);
}

.option-content-pill {
   font-family: var(--ff-geo);
   font-size: clamp(1.125rem, 0.8963rem + 0.9756vw, 1.75rem);
   color: white;
   text-transform: uppercase;
   max-width: max-content;
   background-color: var(--brand-red);
   padding: .75rem 2.5rem;
   border-radius: .325rem;
}

.tab-h3 {
   font-size: clamp(1rem, 0.8864rem + 0.4848vw, 1.25rem);
   color: #000;
}

.term-grid {
   display: grid;
   align-items: center;
   justify-content: center;
   grid-template-columns: 1fr;
   gap: .5rem;
   margin: 1.5rem 0 2rem;
}

.term-grid .term-para {
   font-size: clamp(1rem, 0.8864rem + 0.4848vw, 1.25rem);
   background-color: white;
   border-radius: .325rem;
   padding: .5rem 1rem;
   text-align: center;
   width: 100%;
}

.scenario-heading {
   font-family: var(--ff-geo);
   font-size: clamp(1.125rem, 0.8963rem + 0.9756vw, 1.75rem);
   color: var(--brand-red);
}

.example-image-wrapper {
   max-width: 62.5rem;
}



.scenario-blue-heading {
   font-family: var(--ff-vag-bold);
   color: var(--brand-blue);
   font-size: clamp(1.125rem, 0.8963rem + 0.9756vw, 1.75rem);
   max-width: 62.5rem;
}

.scenario-div .table-responsive {
   max-width: 50rem;
   margin-inline: auto;
}

.table-term {
   max-width: 51.25rem;
   font-size: clamp(0.875rem, 0.8293rem + 0.1951vw, 1rem);
}

.table> :not(caption)>*>* {
   background: transparent;
   color: unset;
}

.table-responsive {
   max-width: 62.5rem;
   /* max-width: max-content; */
   font-size: clamp(0.9375rem, 0.8918rem + 0.1951vw, 1.0625rem);
}

.table-responsive::-webkit-scrollbar {
   display: none;
}

.table-responsive {
   -ms-overflow-style: none;
   scrollbar-width: none;
}

.table.striped thead tr,
.table.striped tbody tr {
   background-color: var(--pink-light);
}

small {
   max-width: 51.25rem;
   font-size: clamp(0.625rem, 0.5793rem + 0.1951vw, 0.75rem);
}

#why-pension-slider .splide__track {
   max-width: calc(100% - 2.5rem);
}

#why-pension-slider .why-slide {
   border-radius: 1rem;
   line-height: 1.2;
}

#why-pension-slider .why-slide img {
   max-width: 5rem;
}

#why-pension-slider .why-slide .slide-nums {
   color: var(--brand-red);
   font-family: var(--ff-vag-bold);
   font-size: clamp(2rem, 1.8171rem + 0.7805vw, 2.5rem);
}

#why-pension-slider .why-slide .slide-text-para {
   font-family: var(--ff-vag-bold);
   color: var(--grey-dark);
   padding-bottom: .75rem;
   font-size: clamp(1rem, 0.9543rem + 0.1951vw, 1.125rem);
   position: relative;
   margin-bottom: .75rem;
}

#why-pension-slider .why-slide .slide-text-para::before {
   content: '';
   position: absolute;
   left: 0;
   bottom: 0;
   height: .25rem;
   width: 3rem;
   border-radius: 1rem;
   background-color: var(--brand-yellow);
}

#why-pension-slider .why-slide .slide-date-para {
   color: var(--grey-light);
   font-size: clamp(0.875rem, 0.8293rem + 0.1951vw, 1rem);
}

#why-pension-slider .splide__pagination {
   bottom: -2.5rem;
}

#why-pension-slider .splide__pagination__page {
   background: var(--pink-dark);
   height: .75rem;
   width: .75rem;
}

#why-pension-slider .splide__pagination__page.is-active {
   background: var(--pink-vary-dark);
   transform: scale(1);
   opacity: 1;
}

#why-pension-slider .splide__arrow {
   background: transparent;
}

.faq-accordion {
   max-width: 62.5rem;
}

.faq-accordion .accordion-item {
   border-color: var(--brand-red);
}

.accordion-button {
   background-color: transparent;
   font-family: var(--ff-vag-bold);
   color: var(--grey-dark);
   font-size: clamp(1rem, 0.8628rem + 0.5854vw, 1.375rem);
   padding: 1rem .5rem;
}

.faq-accordion .accordion-item .accordion-body {
   padding: 0 .5rem 1rem;
   font-size: clamp(0.875rem, 0.7835rem + 0.3902vw, 1.125rem);
   color: var(--grey-light);
   line-height: 1.2;
}

.accordion-button:not(.collapsed) {
   background-color: transparent;
   color: var(--brand-red);
}

.accordion-button::after,
.accordion-button:not(.collapsed)::after {
   background-image: url('../Assets_LandingPage/images/down.svg');
}

.footer-text {
   font-size: clamp(0.875rem, 0.8293rem + 0.1951vw, 1rem);
}

.floating-download-brochure {
   position: fixed;
   top: 50%;
   transform: translateY(-50%);
   display: flex;
   background-color: var(--brand-red);
   z-index: 100;
   border-radius: 2rem 2rem 0 0;
   letter-spacing: .5px;
   right: -77px;
   transform: rotate(-90deg);
   overflow: hidden;
}

.download-brochure-link {
   padding: .5rem 1.5rem;
   cursor: pointer;
}

@media only screen and (max-width: 768px) {
   #hero-section {
      display: flex;
      flex-direction: column;
      align-items: center; /* Center all content horizontally */
      padding: 0; /* Remove padding from #hero-section */
   }

   .hero-container {
      display: flex;
      flex-direction: column;
      width: 100%;
      gap: 1rem; /* Maintain spacing between sections */
   }

   .banner-image-column {
      order: 1; /* Banner image remains first */
      text-align: center;
      margin: 1rem auto; /* Add margin from the top */
      padding: 0 1rem; /* Add equal padding from right and left */
   }

   .banner-image-column img {
      max-width: 100%;
      height: auto;
   }

   .hero-highlights {
      justify-content: center;
      order: 2; /* Highlights come after the banner image */
      width: 100%;
      text-align: center; /* Center align highlights */
      margin-bottom: 1rem; /* Adjust margin for consistency */
      padding: 0; /* Add equal padding from right and left */
   }

   .highlight-list {
      display: grid;
      grid-template-columns: 1fr;
      gap: 1rem;
      padding: 0;
   }

   .highlight-item {
      display: flex;
      align-items: center;
      justify-content: center; /* Center align items */
      gap: 1rem;
   }

   .highlight-item img {
      max-width: 3rem;
      height: auto;
   }

   /* Hide Hero Image Column on Mobile */
   .hero-image-column {
      display: none;
   }

   /* Adjust Form Placement */

   .hero-right{
      display: flex;
      justify-content: center;
      margin-top: 0;
      margin-left: 0.5rem;
      margin-bottom: 0.5rem;
   }
   .hero-form {
      background: rgba(255, 255, 255, 0.95);
      border-radius: 10px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      padding: 1.5rem;
      width: calc(100% - 2rem); /* Form width with small padding */
      margin-top: 1rem; /* Add small gap below the banner */
      position: relative;
      z-index: 3;
      text-align: center; /* Center align form content */
   }
}

@media only screen and (max-width: 480px) {
   #hero-section {
      padding: 0; /* Remove padding from all sides */
   }

   .banner-image-column {
      margin-top: 1rem; /* Add a small margin from the top */
      padding: 0 1rem; /* Add equal padding from right and left */
   }

   .hero-highlights {
      padding: 0 1rem; /* Add equal padding from right and left */
   }

   .hero-form {
      margin-top: 1rem; /* Maintain a consistent gap */
      width: calc(100% - 2rem); /* Form width with small padding */
      padding: 1.5rem; /* Maintain padding inside the form */
   }
}





@media only screen and (min-width: 768px) {
   .hero-section {
      padding-block: 3.125rem;
   }

   .highlight-list {
      grid-template-columns: repeat(2, 1fr);
      gap: 1.25rem;
   }

   .highlight-item img {
      max-width: 4rem;
   }

   .highlight-item p {
      padding: .325rem 1rem .325rem 2.5rem;
      margin-left: -2rem;
   }

   .term-grid {
      grid-template-columns: 1fr 1fr;
      gap: .5rem 1.5rem;
   }

   .term-grid .term-para {
      background-color: transparent;
   }

   .term-grid .term-para:nth-child(odd) {
      background: transparent;
      background: linear-gradient(90deg, transparent, white);
   }

   .term-grid .term-para:nth-child(even) {
      background: transparent;
      background: linear-gradient(-90deg, transparent, white);
   }

}

@media only screen and (min-width: 992px) {
   .header-logo {
      max-width: 16rem;
   }

   #hero-section {
      background-position: bottom left;
      background-size: 32rem;
   }

   .hero-section {
      grid-template-columns: 1fr 1fr;
      align-items: end;
      gap: 0 2.5rem;
      padding-block: 4rem;
   }

   .highlight-list {
      /* grid-template-columns: repeat(2, 1fr); */
      gap: 1.25rem;
   }

   .highlight-item p {
      font-size: .8rem;
   }

   .term-grid {
      gap: .75rem 3rem;
      margin: 2rem 0 3rem;
   }

   #why-pension-slider .splide__track {
      max-width: calc(100% - 6rem);
   }

   #why-pension-slider .why-slide img {
      max-width: 6.25rem;
   }

   .accordion-button {
      padding: 1.25rem .5rem;
   }

   .faq-accordion .accordion-item .accordion-body {
      padding: 0 .5rem 1.25rem;
   }

   .accordion-button::after,
   .accordion-button:not(.collapsed)::after {
      width: 1.5rem;
      height: 1.5rem;
      background-size: 1.5rem;
   }


}

@media only screen and (min-width: 1200px) {
   #hero-section {
      background-position: top 20% left;
      background-size: 30rem;
   }

   .hero-section {
      grid-template-columns: 2fr 1fr;
      grid-template-rows: 1fr 1fr;
      gap: 2rem 2.5rem;
      padding-block: 6rem 4rem;
   }

   .hero-form {
      grid-column: 2 / 3;
      grid-row: 1 / -1;
   }

   .highlight-list {
      grid-template-columns: repeat(3, 1fr);
      gap: 1rem;
   }
}

@media only screen and (min-width: 1400px) {
   #hero-section {
      background-position: top 7.5% left;
      background-size: 35rem;
   }
}