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

@font-face {
   font-family: 'rupee';
   src: url('assets/fonts/itf_rupee-webfont.woff2') format('woff2'),
        url('assets/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/fonts/vagroundedstd-bold-webfont.woff2') format('woff2'),
        url('assets/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/fonts/vagroundedstd-light-webfont.woff2') format('woff2'),
        url('assets/fonts/vagroundedstd-light-webfont.woff') format('woff');
   font-weight: normal;
   font-style: normal;
   font-display: swap;
}

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

   --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-red); }
.bg-brand-green { background-color: var(--brand-green); }
.bg-brand-red { background-color: var(--brand-red); }
.bg-brand-yellow { background-color: var(--brand-red); }
.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: var(--brand-red); }
.text-brand-green { color: var(--brand-green); }
.text-brand-red { color: var(--brand-red); }
.text-brand-yellow { color: var(--brand-red); }
.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); }
.text-white-light {color: var(--white-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('../LandingPage/assets/images/hero-image.png');
   background-size: 100%;
   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: flex;
   align-items: center;
   justify-content: center;
   flex-wrap: wrap;
   /* display: grid;
   grid-template-columns: 1fr 1fr 1fr; */
   gap: .75rem;
}

.highlight-item {
   position: relative;
   max-width: 16rem;
}

.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.1;
   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('../LandingPage/assets/images/unchecked.svg');
}

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

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

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

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

.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: 60rem;
   line-height: 1.3;
}

.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-red);
}

.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 1.5rem;
   border-radius: .5rem;
}

.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: 75rem;
}

.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-red);
}

#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/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 (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;
      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: 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 5% left;
      background-size: 40rem;
   }
}