/*=====Start Home Banner Section=====*/
.banner {
  background-image: linear-gradient(360deg,
      #000000 0%,
      #300b00 48.21%,
      #611700 96.42%);
  color: #fff;
  padding: 80px 0px 0px 0px;
}

.bannerBg {
  max-width: 416px;
}

.bannerText-h1 {
  font-size: 60px;
  line-height: 70px;
  font-weight: 700;
}

.bannerText-h6 {
  font-size: 16px;
  font-weight: 400;
}

.bannerText-h1,
.bannerText-h6 {
  margin-bottom: 20px;
}

.downloadBtns {
  margin-top: 26px;
  gap: 12px;
}

/*=====End Home Banner Section=====*/

/*=====Start Home Section Earn=====*/
.homeSection-earn .content {
  padding-top: 34px;
  font-weight: 500;
}

.homeSection-earn .content h2 {
  margin-bottom: 10px;
}

.homeSection-earn .content button {
  margin-top: 25px;
}

.homeSection-earn-img,
.homeSection-gold-img {
  width: 100%;
  /*height: 416px;
    max-width: 416px;
	object-fit: cover;*/
  border-radius: 20px;
}

ul#utilityTabNav {
  gap: 16px;
}

li.nav-item {
  width: 100%;
}

.homeSection-earn .homeRelImgHolder {
  position: relative;
  text-align: center;
}

.homeSection-earn .earnlabel1,
.homeSection-earn .earnlabel2,
.homeSection-gold .goldlabel-icon1,
.homeSection-gold .goldlabel-icon2,
.homeSection-gold .goldlabel1,
.homeSection-gold .goldlabel2 {
  position: absolute;
  z-index: 1;
}

.homeSection-earn .earnlabel1 img,
.homeSection-earn .earnlabel2 img,
.homeSection-gold .goldlabel-icon1 img,
.homeSection-gold .goldlabel-icon2 img,
.homeSection-gold .goldlabel1 img,
.homeSection-gold .goldlabel2 img {
  width: 100%;
}

.homeSection-earn .earnlabel1 {
  left: -67px;
  top: 33px;
  width: 160px;
}

.homeSection-earn .earnlabel2 {
  right: -71px;
  bottom: -90px;
  width: 232px;
}

.homeSection-gold .homeSection-earn {
  padding-top: 35px;
}

.homeSection-gold .homeSection-earn .content {
  padding-left: 50px;
  padding-top: 56px;
}

.homeSection-gold .goldlabel-icon1 {
  width: 147px;
  right: -61px;
  top: 64px;
}

.homeSection-gold .goldlabel-icon2 {
  width: 53px;
  bottom: -30px;
  left: 78px;
}

.homeSection-gold .goldlabel1 {
  width: 160px;
  top: 79px;
  left: -63px;
}

.homeSection-gold .goldlabel2 {
  width: 232px;
  right: -121px;
  bottom: -36px;
}

/*=====End Home Section Earn=====*/

/*=====Start Home Section Pay Bill=====*/
.homeSection-paybill {
  background: linear-gradient(90deg, #000000 0%, #611700 100%);
  color: #fff;
}

.homeSection-paybill .content {
  padding-top: 15px;
  font-weight: 500;
}

.homeSection-paybill h3 {
  margin-top: 45px;
}

.homeSection-paybill .form-check-label {
  font-size: 20px;
  line-height: 25px;
  font-weight: 700;
}

.homeSection-paybill .form-check-label p {
  font-size: 14px;
  line-height: 24px;
  font-weight: 400;
  margin: 6px 0 35px;
  text-transform: capitalize;
}

.homeSection-paybill .customCheckbox:last-child .form-check-label p {
  margin-bottom: 0;
}

.homepaybillTab {
  margin-top: 40px;
}

.tabView .nav-tabs {
  border-bottom: none;
}

.homepaybillTab .tabMenu {
  border-radius: 0;
  background: rgba(255, 255, 255, 0.1);
  color: #fffafa;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  padding: 10px 25px;
  text-decoration: none;
}

.homepaybillTab .nav-item:not(:last-child) .tabMenu {
  border-right: 1px solid #c5c5c56b;
}

.tabView .tabMenu:hover,
.tabView .tabMenu:focus,
.tabView .tabMenu:focus-visible {
  border: none;
}

.tabView .tabMenu:focus-visible {
  box-shadow: none;
}

.homepaybillTab .tabMenu.active {
  background: linear-gradient(180deg, #be2e00 21.05%, #581500 100%);
  color: #fff;
  border: none;
}

.tabView .tab-content {
  padding-top: 15px;
}

.billItemHolder {
  font-size: 16px;
  line-height: 20px;
  font-weight: 500;
  text-align: center;
  margin-top: 30px;
}

.billItemHolder:not(:last-child) {
  margin-right: 30px;
}

.billItemHolder .icon {
  display: inline-block;
  background: #ffffff2b;
  border: 1px solid #ffffff66;
  padding: 17px;
  border-radius: 10px;
  margin-bottom: 10px;
}

.billItemHolder .icon img {
  height: 45px;
  width: 45px;
  object-fit: contain;
}

/*=====End Home Section Pay Bill=====*/

/*=====Start Home Section Pay Bill Now=====*/
.homecard1,
.homecard2 {
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  padding: 53px;
}

.homecard1 {
  background: linear-gradient(180deg, #fff1e3 0%, #ffffff 100%);
}

.homecard2 {
  background: linear-gradient(180deg, #d7e9ff 0%, #ffffff 100%);
}

.homecard2 .highlightText {
  color: #084591;
}

.homecard1 .badge,
.homecard2 .badge {
  font-size: 10px;
  line-height: 13px;
  font-weight: 500;
  padding: 8px 16px;
  margin-bottom: 18px;
}

.homecard1 .badge {
  background: #dd5428;
}

.homecard2 .badge {
  background: #084591;
}

.homeSection-paybillnow .paybillBtn {
  margin-top: 50px;
  font-size: 14px;
  line-height: 24px;
  font-weight: 600;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 9px 24px;
  transition: all 0.3s ease;
}

.homeSection-paybillnow .paybillBtn:hover,
.homeSection-paybillnow .paybillBtn:focus,
.homeSection-paybillnow .paybillBtn:active,
.homeSection-paybillnow .paybillBtn:focus-visible {
  color: #fff !important;
  box-shadow: none;
  opacity: 0.8;
}

.homeSection-paybillnow .homecard1 .paybillBtn {
  background: linear-gradient(180.53deg, #dd5428 0.45%, #772d16 225.94%);
}

.homeSection-paybillnow .homecard2 .paybillBtn {
  background: linear-gradient(180.53deg, #084591 0.45%, #052a58 225.94%);
}

.bg-lineart {
  position: relative;
}

.bg-lineart:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  bottom: -36%;
  left: 0;
  z-index: -1;
  background-image: url("../images/lineart-bg.png");
  background-repeat: no-repeat;
  background-size: contain;
}

/*=====End Home Section Pay Bill Now=====*/

/*=====Start Home Section Why Choose Us=====*/
.homeSection-whychooseus {
  background: linear-gradient(180deg, #2b0a01 0%, #661903 100%);
  color: #fff;
}

.homeSection-whychooseus .heading {
  text-align: center;
  font-size: 20px;
  line-height: 32px;
  font-weight: 400;
  margin-bottom: 80px;
}

.homeSection-whychooseus .heading h2 {
  font-size: 36px;
  line-height: 46px;
  font-weight: 700;
}

/* .whychoosebg {
  width: 100%;
  height: 100%;
} */
.whychoosebg {
  padding: 0;
}

.whychoosebg img {
  width: 100%;
  height: 100%;
  object-position: bottom;
  object-fit: cover;
  position: relative;

}

/*.whychoosebg {
	height: 100%;
	width: 100%;
	background-image: url("../images/whychooseus-bg.svg");
    background-repeat: no-repeat;
    background-size: 120% auto;
    background-position-x: center;
    background-position-y: bottom;
}*/
.labellList {
  padding-bottom: 30px;
}

.labellList .itemHolder {
  padding: 0 0 30px;
  position: relative;
}

.labellList .item {
  background: linear-gradient(89.99deg, #3f0f02 0.01%, #661903 155.33%);
  box-shadow: 0px 4px 18px 0px #00000040;
  border: 1px solid #fff4f4b2;
  border-radius: 100px;
  padding: 15px 21px;
  display: inline-flex;
}

.labellList .item img {
  height: 26px;
  width: 26px;
  object-fit: contain;
}

.labellList .item span {
  padding-left: 10px;
  font-size: 16px;
  font-weight: 500;
  text-wrap: nowrap;
}

.labellList.card1 {
  text-align: right;
}

.labellList.card1 .itemHolder:nth-child(1) {
  margin-right: -40px;
}

.labellList.card1 .itemHolder:nth-child(2) {
  margin-right: 20px;
}

.labellList.card1 .itemHolder:nth-child(3) {
  margin-right: -10px;
}

.labellList.card1 .itemHolder:nth-child(4) {
  margin-right: -30px;
}

.labellList.card2 .itemHolder:nth-child(1) {
  margin-left: -40px;
}

.labellList.card2 .itemHolder:nth-child(2) {
  margin-left: 20px;
}

.labellList.card2 .itemHolder:nth-child(3) {
  margin-left: -10px;
}

.labellList.card2 .itemHolder:nth-child(4) {
  margin-left: -30px;
}

/*=====End Home Section Why Choose Us=====*/

/*=====Start Home Section Trust=====*/
.secHeading {
  font-size: 120px;
  line-height: 151px;
  font-weight: 700;
  position: relative;
  color: #0000000d;
  text-align: center;
  text-transform: uppercase;
  margin-bottom: 30px;
}

.secHeading .smallHeading {
  font-size: 36px;
  line-height: 40px;
  color: #000;
  text-align: center;
  position: absolute;
  z-index: 1;
  bottom: 32px;
  width: 100%;
  text-transform: capitalize;
}

.swiper-container {
  position: relative;
}

.swiper-container>.swiper-slide__content {
  position: absolute;
  top: 0;
}

.btn-view-all {
  background: #183459 !important;
  padding: 4px 16px;
  border-radius: 50px;
  color: #fff !important;
  font-size: 14px;
  font-weight: 600;
}

.swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 200ms linear;
  border-radius: 10px;
}

.swiper-slide.swiper-slide-active {
  transform: scale(1);
}

.swiper-slide .slideItem {
  border-radius: 10px;
  overflow: hidden;
}

.swiper-slide .slideItem {
  position: relative;
}

.swiper-slide .slideItem .overlay {
  display: none;
  align-items: flex-end;
  color: #fff;
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #dd5428 111.27%);
  padding: 35px;
}

.swiper-slide.swiper-slide-active .slideItem .overlay {
  display: flex;
  cursor: pointer;
}

.swiper-slide .slideItem .playIcon {
  position: absolute;
  z-index: 2;
  top: calc(50% - 22px);
  left: calc(50% - 22px);
  height: 44px;
  width: 44px;
}

.swiper-slide .slideItem .overlay .name {
  font-size: 26px;
  line-height: 26px;
  font-weight: 600;
  margin-bottom: 10px;
}

.swiper-slide .slideItem .overlay .city {
  font-size: 16px;
  line-height: 16px;
  font-weight: 500;
}

.swiper-slide .slideItem .overlay .rating {
  display: inline-flex;
  align-items: center;
  height: 100%;
}

.swiper-slide .slideItem .overlay .rating img {
  height: 28px;
}

.video-wrapper {
  position: relative;
  width: 100%;
  height: 70vh;
  /* responsive height */
  background: #000;
  overflow: hidden;
}

.video-wrapper iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
  object-fit: cover;
  /* 🔥 removes black bars */
  border: 0;
}

/* Mobile optimization */
@media (max-width: 768px) {
  .video-wrapper {
    height: 50vh;
  }
}

.videoModal .btn-close {
  fill: #fff;
  position: absolute;
  background-color: rgba(255, 255, 255, 0.5);
  z-index: 1;
  right: 10px;
  top: 10px;
  padding: 5px;
  cursor: pointer;
}

.homeSection-downloadnow .row {
  background: #dd542824;
  border-radius: 20px;
  margin-bottom: 80px;
  align-items: center;
}

/*=====End Home Section Trust=====*/


.homeSection-wearehere h3 {
  line-height: 45px;
  font-weight: 400;
}

.homeSection-wearehere h3>span {
  font-weight: 600;
}

.homeSection-wearehere .contactList {
  padding-top: 70px;
  padding-bottom: 70px;
}

.homeSection-wearehere .contactList .item:not(:last-child) {
  padding-bottom: 20px;
}

.homeSection-wearehere .contactList .item {
  display: flex;
  align-items: center;
}

.homeSection-wearehere .contactList .item img {
  height: 24px;
  width: 24px;
  object-fit: contain;
}

.homeSection-wearehere .contactList .item span {
  font-size: 18px;
  line-height: 22px;
  font-weight: 500;
  padding-left: 10px;
}

.contactList a {
  text-decoration: none;
  color: #000;
}

.contactList a:hover {
  color: #dd5428;
}

.homeSection-wearehere .customercare {
  border: 2px solid #e6e6e6;
  border-radius: 16px;
  background: #fff;
  padding: 35px;
}

.homeSection-wearehere .customercare .title {
  font-size: 18px;
  line-height: 24px;
  font-weight: 500;
  display: flex;
  align-items: center;
}

.homeSection-wearehere .customercare img {
  width: 20px;
  height: 20px;
  object-fit: contain;
  margin-right: 10px;
}

.homeSection-wearehere .customercare .info {
  color: #7c7c7c;
  line-height: 22px;
  padding: 20px 0;
}

.homeSection-wearehere .customercare .primeBtn {
  font-size: 14px;
  background: #dd5428;
}

/*------------------*/
.accordionItem {
  background: #fff;
  border: 1px solid #dedede;
  margin-bottom: 20px;
  border-radius: 10px;
  box-shadow: 0px 33px 72px 0px #8080801a;

  padding: 18px;
  font-size: 14px;
  line-height: 24px;
  font-weight: 400;
}

.accordionItem .title {
  display: flex;
  justify-content: space-between;
  text-decoration: none;
  color: #151515;
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
}

.accordionItem .que {
  width: calc(100% - 25px);
}

.accordionItem .toggleIcon {
  height: 20px;
  width: 20px;
  background: #dd5428;
  border-radius: 10px;
  padding: 0;
  color: #fff;
  display: inline-flex;
  align-items: flex-end;
  justify-content: center;
}

.accordionItem .title .toggleIcon span:nth-child(2) {
  display: inline-block;
}

.accordionItem .title .toggleIcon span:nth-child(1) {
  display: none;
}

.accordionItem .title.collapsed .toggleIcon span:nth-child(2) {
  display: none;
}

.accordionItem .title.collapsed .toggleIcon span:nth-child(1) {
  display: inline-block;
}

.accordionItem .description {
  padding-top: 10px;
  padding-left: 5px;
}

/*=====End Home Section We Are Here=====*/
.homeSection-downloadnow {
  background: linear-gradient(270deg, rgba(221, 84, 40, 0.024) 6.82%, rgba(255, 255, 255, 0.2) 115.39%);

}

.homeSection-downloadnow .bannerText-h1,
.contactBanner .bannerText-h1 {
  font-size: 30px;
  line-height: normal;
}

.homeSection-downloadnow .bannerText-h6,
.contactBanner .bannerText-h6 {
  font-size: 18px;
  font-weight: 400;
  margin-top: 20px;
}

.homeSection-downloadnow .downloadBtns {
  margin-top: 0;
  gap: 12px;
}

/*-----------------Video Slider----------------*/
.homeVideoHolder .slick-slide {
  text-align: center;
}

.homeVideoHolder .slick-active {
  text-align: center;
  padding: 10px;
}

.homeVideoHolder .slick-active.slick-center {
  background: red;
  padding: 0;
}

.homeVideoHolder .slick-slide {
  text-align: center;
}

.homeVideoHolder .videoItem {
  width: 100%;
  height: 15vw;
}

.homeVideoHolder .videoItem iframe {
  width: 100%;
}

/*===============End Home Page Style=============*/

/*=========Start Service Offer Page Style=========*/
.servicbannersliderHolder {
  padding: 40px 40px 0;
}

.servicbannerslider {
  padding-top: 40px;
  border-radius: 30px;
}

.servicbannerslider .bannerText {
  padding-top: 16px;
}

.servicbannerslider .bannerText-h1 {
  font-size: 40px;
  line-height: 60px;
}

.servicbannerslider .bannerText-h6 {
  font-size: 18px;
  margin-top: 25px;
}

/*---------------------*/
.section-paymentReminder {
  padding-top: 45px;
  padding-bottom: 40px;
}

.section-paymentReminder h2 {
  font-weight: 600;
}

.section-paymentReminder .paymentReminderList {
  padding: 15px 0 0;
  margin: 0 -8px;
}

.planItem {
  padding: 16px 8px 0;
}

.planItem .content {
  position: relative;
  background: #ffe9e1;
  border-radius: 8px;
  font-size: 30px;
  line-height: 38px;
  font-weight: 700;
}

.planItem .due {
  background: #ff0000;
  color: #fff;
  font-size: 12px;
  line-height: 20px;
  font-weight: 500;
  top: -15px;
  left: 30px;
  padding: 5px 15px;
  border-radius: 20px;
  position: absolute;
  z-index: 1;
}

/* .planItem .repeatoffer {
  padding: 30px;
} */

.planItem .offername {
  font-size: 14px;
  line-height: 24px;
  font-weight: 500;
}

.planItem .repeat {
  font-size: 14px;
  border-radius: 50px;
  font-weight: 500;
  background: #dd5428;
  padding: 4px 12px;
}


/*---------------------*/
.section-servicelist {
  padding: 0 0 30px;
}

.serviceOfferBannerHolder {
  padding: 0 2% 40px;
}

.serviceOfferBanner {
  background: linear-gradient(90deg,
      rgba(255, 131, 92, 0.3) 0%,
      rgba(255, 160, 7, 0.3) 100%);
  height: 261px;
  border-radius: 30px;
}

.section-servicelist h3 {
  font-weight: 600;
  margin-bottom: 40px;
}

.serviceList {
  display: flex;
  flex-wrap: wrap;
  margin: -7px;
  padding-bottom: 40px;
}

.serviceList .serviceItem {
  /*width: calc(100%/8);*/
  /* width: 140px; */
  padding: 7px;
}

.serviceList .serviceItem .content {
  border-radius: 12px;
  background: #ffe9e2;
  position: relative;
  overflow: hidden;
  text-align: center;
}

.serviceList .serviceItem .iconHolder {
  background: linear-gradient(180deg, #e93901 0%, #c83303 100%);
  border-radius: 0 0 100% 100%;
}

/* .serviceList .serviceItem .iconHolder {
  position: relative;
}
.serviceList .serviceItem .iconHolder:before {
  content: "";
  background: linear-gradient(180deg, #e93901 0%, #c83303 100%);
  position: absolute;
  z-index: 1;
  border-radius: 0 0 200px 200px;
  width: 110%;
  height: 110%;
  top: -10%;
  left: -5%;
} */
.serviceList .serviceItem .iconHolder img {
  width: 48px;
  position: relative;
  z-index: 2;
}

.iconHolder {
  padding: 20px;
}

.serviceName {
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  min-height: 90px;
  padding: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.servicbannersliderHolder {
  padding: 40px 40px 0;
}

/*---------------------------*/
.section-trustedClients {
  padding: 0 40px 40px;
}

.trustedClientsSliderHolder {
  background: rgba(255, 131, 92, 0.2);
  border-radius: 30px;
  padding: 30px 0;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
}

.clientSliderHolder {
  margin: 0 -5px;
}

.clientSliderHolder .slick-slide {
  padding: 0 5px;
}

.clientSliderHolder img {
  background: #fff;
}

/*------------------------*/
.stickyBar-ReferSec {
  position: sticky;
  z-index: 11;
  bottom: 0;
  background: linear-gradient(90deg, #ffbfaa 0%, #fff2c5 100%);
  font-size: 20px;
  line-height: 24px;
  font-weight: 600;
}

.stickyBar-ReferSec .stickyBg {
  height: auto;
  width: 67px;
  margin-top: 15px;
  margin-right: 23px;
}

.stickyBar-ReferSec .btn {
  min-width: 158px;
}

/*=========Start Utility Page Tab Style=========*/
.sectionHeadingbanner {
  background: linear-gradient(180deg, #5e1600 0%, #2c0a01 100%);
  padding: 60px 0px;
  color: #fff;
}

.sectionHeadingbanner .tagline {
  font-size: 20px;
  line-height: 30px;
  font-weight: 700;
  padding: 15px 0;
}

.sectionHeadingbanner .pageHeading {
  font-size: 40px;
  line-height: 60px;
  font-weight: 700;
}

.utilityTab .slick-slide {
  text-align: center;
  position: relative;
  z-index: 1;
  font-size: 16px;
  line-height: 20px;
  font-weight: 500;
  padding: 0 5px;
}

.utilityTab .slick-slide.slick-current:after {
  display: block;
}

.utilityTab .slick-slide:after {
  content: "";
  width: 100%;
  height: 5px;
  background: #fff;
  border-radius: 10px;
  position: absolute;
  z-index: 2;
  bottom: 0;
  left: 0;
  display: none;
}

.subhead {
  font-size: 16px;
  font-weight: 600;
}

.utilityIcon {
  height: 40px;
  width: 40px;
  border-radius: 8px;
  background: #ffffff;
  border: 1px solid #ffffff66;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 1px 1px 4px 1px #0000001c;
}

.utilityTab .utilityIcon img {
  max-width: 20px;
  object-fit: contain;
  filter: invert(1);
}

.tabItem.active {
  background: #dd5428;
  padding: 8px;
  border-radius: 8px;
  color: #ffff;
}

.utilityTab .tabItem {
  cursor: pointer;
  display: flex;
  align-items: center;
  font-size: 16px;
  gap: 12px;
}

.registerLoginPop,
.loginPop {
  z-index: 999;
  position: absolute;
  top: 50px;
  transform: none;
}

.registerLoginPop .popupClose,
.loginPop .popupClose {
  position: absolute;
  right: 20px;
  top: 20px;
  background: #D0D0D0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  text-align: center;
  line-height: 40px;
  font-size: 0
}

.registerLoginPop .popupClose img,
.loginPop .popupClose img {
  width: 14px;
}

.regLogLft {
  width: 50%;
  color: #fff;
  text-align: center;
  padding: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(0deg, #000000 0%, #300B00 48.21%, #611700 96.42%);
  color: #fff;
}

.reglogForm,
.verifyOtp {
  width: 50%;
  padding: 40px;
  background: #fff;
  display: flex;
  align-items: center;
}

.change-box {
  display: flex;
  justify-content: space-between;
  padding: 10px 16px !important;
  background: #f4f4f4;
  border-radius: 8px;
  align-items: center;
  margin: 20px 0px;
}

.change-box .text-part {
  display: flex;
  align-items: center;
  gap: 10px;
}

.change-box .text-part .text {
  display: flex;
  flex-direction: column;
  margin-left: 8px;
}

.button-part button {
  margin: 0px;
  padding: 6px 12px;
  line-height: 1;
  font-size: 12px;
  margin-bottom: 0px !important;
}

.scanner {
  max-width: 190px;
  background: #FFEFEA;
  padding: 30px;
  font-size: 0;
  line-height: 0;
  border-radius: 16px;
  margin: 0 auto;
}

.regFormField h3 {
  font-size: 28px;
}

.scannerInfo {
  padding: 20px 0;
  font-size: 16px;
}

.scannerInfo h5 {
  font-size: 22px;
}

.reglogForm {
  font-size: 16px;
  font-weight: 400
}

.reglogForm>div {
  width: 100%
}

.reglogForm h2 span,
.reglogForm p>span {
  color: #DD5428
}

.regForm>div {
  padding: 0 0 10px
}

.regForm .form-input {
  background: #fff
}

.regForm>div.robotimg {
  max-width: 295px;
  padding: 10px 0 20px
}

.regForm>div.btnContainer {
  padding: 10px 0 0
}

.regForm button {
  max-width: 100%;
  margin-bottom: 10px
}

.signIn,
.signUp,
.resendOtp {
  cursor: pointer;
}

.otpField {
  gap: 20px;
}

.otpField>div {
  width: calc(25% - 5px);
}

.otpField .form-input:focus-visible {
  border-color: #04A85B
}

.otpTimer {
  justify-content: space-between;
  font-size: 14px;
  font-weight: 600
}

.otpTimer img {
  margin-right: 2px;
  vertical-align: middle;
  display: inline-block;
  width: 16px;
}

.verifyOtp p {
  font-size: 14px;
  line-height: 22px;
  margin: 20px 0px;
}

.createPin h5 {
  font-weight: 500;
  margin: 0
}

.createPin label {
  font-size: 14px;
}

.pinCreatedBlock {
  max-width: 430px;
  text-align: center;
}

.robotimg {
  width: 50%;
  margin-top: 20px;
}

.verifyOtp,
.createPin,
.pinCreated {
  display: none;
}

.error {
  color: #FF0000;
  font-size: 14px;
}

/*=========End Utility Page Tab Style=========*/

/*=========Start Utility Page TabContent Mobile Prepaid Style=========*/
.utilityTabContent {
  position: relative;
}

/*.utilityTabContent:before {
	content: "";
	width: 100%;
	height: 264px;
	left: 0;
	top: 0;
	background: linear-gradient(181.08deg, rgba(255, 255, 255, 0.5) 0.9%, rgba(221, 84, 40, 0.5) 152.11%);
	position: absolute;
}*/
.utilityTabContent .mobilebill-ad {
  background-image: url("../images/utility-mobileBill-bg.svg");
  /*min-height: 500px;*/
  background-size: cover;
  background-repeat: no-repeat;
  border-radius: 18px;
  position: relative;
}

/*.utilityTabContent .mobilebill-bgmob {
    background-image: url("../images/mobile-bill-bg.png");
    width: 54%;
    height: 76%;
    position: absolute;
    z-index: 1;
    bottom: 0;
    right: 0;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom;
}*/
.utilityTabContent .contactIntro {
  padding: 52px 39px;
  color: #fff;

  font-size: 20px;
  line-height: 30px;
  font-weight: 700;
}

.utilityTabContent .contactIntro h4 {
  font-style: italic;
  font-weight: 800;
  margin-bottom: 15px;
}

.utilityTabContent .contactIntro .para1 {
  max-width: 62%;
}

.utilityTabContent .contactIntro .para2 {
  max-width: 55%;
}

.utilityTabContent .contactIntro .downloadoptions {
  display: flex;
  margin: 18px 0;
}

.utilityTabContent .contactIntro h5 {
  color: #000 !important;
}

.utilityTabContent .contactIntro .qrcodeImage {
  width: 59px;
}

.prepaid-plan-header h5 {
  font-size: 18px;
  margin: 0px !important;
}

.utilityTabContent .mobilebill-form {
  background: #fff;
  box-shadow: 0px 4px 14px 6px #0000000a;
  border-radius: 12px;
  height: 100%;
  padding: 34px 28px;
}

.utilityTabContent .mobilebill-form h5 {
  margin-bottom: 32px;
}

.utilityTabContent .mobilebill-form h5 {
  margin-bottom: 32px;
}

.utilityTabContent .mobilebill-form .primeBtn {
  border-radius: 20px;
}

.utilityTabContent .mobilebill-form .hasbrowseTextLink {
  position: relative;
}

.utilityTabContent .mobilebill-form .hasbrowseTextLink .form-control {
  padding-right: 110px;
}

.utilityTabContent .mobilebill-form .browseTextLink {
  color: #be2e00;
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  position: absolute;
  right: 0;
  bottom: 0;
  cursor: pointer;
  padding: 16px 18px 16px 0;
}

/*----------------------------------*/
.sectionBrowsePlan .planItem {
  padding: 0;
}

.sectionBrowsePlan .planItem .content {
  border-radius: 12px;
}

.sectionBrowsePlan .planItem .repeatamount:before {
  height: 150%;
  width: 150%;
  top: -25%;
  left: 0px;
  border-radius: 100%;
  background: linear-gradient(180deg, #ff835c 0%, #dd5428 100%);
}



.sectionBrowsePlan .planItem .repeat {
  font-size: 14px;
  line-height: 18px;
}

.sectionBrowsePlan .repeatoffer .offername {
  font-size: 10px;
  line-height: 1;
  font-weight: 500;
}

.tab-content>.active {
  margin-bottom: 40px;
}

/*=====*/
.pendingPaymentList h6 {
  margin-bottom: 20px;
}

.pendingPaymentList {
  margin-bottom: 20px;
}

.mobile-banner img {
  border-radius: 12px;
}

.pendingPaymentList .o-logo img {
  padding: 8px;
}

.pendingPaymentList .planItem .content {
  background: #fff;
  border: 1px solid #cecece42;
  box-shadow: 0px 43px 43px 0px #ababab17;
}

.bankList-horizontal .bankListItem {
  flex-direction: row;
  align-items: center;
  gap: 12px;
  justify-content: flex-start;
  padding: 10px;
}

.pendingPaymentList .repeatoffer {
  display: flex;
  align-items: center;
  /* padding: 15px; */
  gap: 8px;
}

.pendingPaymentList .repeatoffer .offername {
  color: #7c7c7c;
}

.prepaid-filter-heading {
  font-size: 16px;
  font-weight: bold !important;
}

.prepaid-filter-panel {
  padding: 16px 0px 0px 0px;
  border-top: 1px solid #ebebeb;
}

/*=====*/
.suggestedPlanList h5 {
  margin: 25px 0 40px;
}

.suggestedPlanList .planItem .repeatoffer {
  padding: 20px;
}

.suggestedPlanList .planItem .repeatamount {
  padding: 30px 20px 20px 30px;
}

.suggestedPlanList .planItem .content {
  font-size: 24px;
  line-height: 30px;
  font-weight: 600;
}

.suggestedPlanList .planItem .content .repeatamount {
  font-size: 26px;
  line-height: 30px;
  font-weight: 700;
  text-align: center;
}

.suggestedPlanList .planItem .repeatamount:before {
  height: 220%;
  width: 221%;
  top: -47%;
}

.suggestedPlanList .repeatoffer .offername {
  margin-bottom: 6px;
}

/*=====*/
.selectPlanTab {
  border: 1px solid #e0e0e0;
  border-radius: 16px;
  padding: 50px 20px 20px;
}

.sectionBrowsePlan .tabView .nav-item .tabMenu {
  text-decoration: none;
  color: #292d32;
  font-size: 16px;
  line-height: 20px;
  font-weight: 400;
  padding: 10px 12px;
  display: block;
}

.sectionBrowsePlan .tabView .nav-item .tabMenu.active {
  color: #000;
  font-weight: 700;
  border-bottom: 2px solid #000000;
}

.sectionBrowsePlan .planItem:not(:last-child) {
  padding-bottom: 20px;
}

/*---*/
.findPlanList {
  padding-top: 20px;
}

.findPlanList .planItem .content {
  font-size: 16px;
  line-height: 24px;
}

.findPlanList .o-logo {
  padding-right: 8px;
}

.findPlanList .o-logo img {
  height: 50px;
  width: 50px;
  object-fit: contain;
}

.findPlanList .planItem .repeatamount {
  padding: 15px 15px 15px 20px;
}

.findPlanList .planItem .content {
  background: #fff;
  border: 1px solid #e0e0e0;
  box-shadow: 0px 43px 43px 0px #ababab17;
}

.findPlanList .repeatoffer {
  display: flex;
  align-items: center;
  padding: 15px;
}

.findPlanList .repeatoffer .offername {
  color: #7c7c7c;
  margin-top: 2px;
}

.findPlanList .repeatoffer .offername .dot {
  display: inline-block;
  padding: 0 5px;
}

.findPlanList .text1 .validity,
.findPlanList .amount {
  padding-right: 10px;
}

.findPlanList .text1 {
  font-size: 14px;
  line-height: 24px;
  font-weight: 500;
}

.findPlanList .text2 {
  font-size: 12px;
  line-height: 20px;
  font-weight: 400;
}

.findPlanList .text1,
.findPlanList .text2 {
  color: #848484;
  padding: 0 10px;
  border-left: 1px solid #c5c5c566;
}

.findPlanList .planItem .repeat {
  font-size: 18px;
  line-height: 24px;
  font-weight: 600;
}

.findPlanList .planItem .repeatamount {
  min-width: 105px;
}

.teamMemberContent {
  margin-top: 20px;
}

.findPlanList .planItem .repeatamount:before {
  height: 220%;
  width: 220%;
  top: -45%;
}

/*-----*/

.searchPlan {
  border: var(--bs-border-width) solid var(--bs-border-color);
  border-radius: 8px;
}

.searchPlan .form-control,
.searchPlan .btn {
  background: none;
  border: none;
  background: transparent;
  color: #000;
}

.searchPlan .form-control:focus {
  box-shadow: unset;
}

.searchPlan .form-control::placeholder,
.searchPlan .form-control::-ms-input-placeholder {
  color: #222222;
  opacity: 1;
  /* Firefox */
}

.searchPlan .btn-check:checked+.btn,
.searchPlan .btn.active,
.searchPlan .btn.show,
.searchPlan .btn:first-child:active,
.searchPlan .btn:not(.btn-check)+.btn:active {
  color: unset;
  background-color: unset;
  border-color: unset;
}

/*-------*/
/* .instantPayBox {
  background: linear-gradient(180deg, #ffffff -89.04%, #ffbfaa 181.58%);
  border-radius: 16px;
} */
.instantPayHolder {
  padding-bottom: 40px;
}

.instantPayHolder h5 {
  margin-bottom: 20px;
}

.instantPay {
  background: linear-gradient(180deg, #ffffff -89.04%, #ffbfaa 181.58%);
  padding: 15px 20px;
  border-radius: 16px;
}

.instantPayHolder .qrWhiteBg {
  background: #fff;
  border-radius: 10px;
  padding: 7px 12px;
}

.instantPayHolder .qrcodeimg {
  height: 68px;
  width: 68px;
  margin: 0 10px;
}

.instantPayHolder .qrWhiteBg .downloadoptions {
  padding-left: 6px;
  margin: 5px 0;
}

.instantPayHolder .qrWhiteBg .downloadoptions img {
  width: 20px;
  margin-right: 16px;
}

.instantPayHolder .desc {
  font-size: 20px;
  line-height: 30px;
  font-weight: 600;
  font-style: italic;
  color: #772d16;
  display: inline-block;
}

.generateQRcode-modal .modal-dialog {
  max-width: 455px;
}

.generateQRcode-modal .modal-content {
  border-radius: 20px;
  border: 1px solid #dfdfdf;
}

.generateQRcode-modal .modal-body {
  padding: 90px 90px 60px;
}

.generateQRcode-modal .btn-close {
  position: absolute;
  right: 25px;
  top: 25px;
}

.generateQRcode-modal h5 {
  margin-bottom: 0;
}

.generateQRcode-modal img.qr {
  max-width: 264px;
  margin: 30px 0;
}

.sectionBuyPlan .pendingPaymentList,
.sectionBuyPlan .amountDetail {
  border-radius: 16px;
  border: 1px solid #ebebeb;
}

.sectionBuyPlan .pendingPaymentList {
  padding: 20px;
}

.sectionBuyPlan .pendingPaymentList .total {
  font-size: 14px;
  line-height: 24px;
  font-weight: 400;
  margin-bottom: 20px;
}

.sectionBuyPlan .pendingPaymentList .total .cost {
  font-size: 24px;
  line-height: 34px;
  font-weight: 700;
}

.sectionBuyPlan .amountDetail h5 {
  padding-bottom: 30px;
  margin-bottom: 30px;
}

.sectionBuyPlan .amountDetail {
  margin-top: 20px;
  padding: 30px;
  font-size: 18px;
  line-height: 24px;
  font-weight: 500;
}

.sectionBuyPlan .amountDetail .form-check-label {
  padding-left: 10px;
  font-size: 16px;
}

.sectionBuyPlan .amountDetail .form-check-label div:nth-child(2) {
  font-size: 12px;
  color: #7c7c7c;
}

.sectionBuyPlan .amountDetail .detail1 {
  padding-bottom: 20px;
}

.sectionBuyPlan .amountDetail .detail2 {
  padding-bottom: 30px;
}

.sectionBuyPlan .amountDetail .detail3 {
  padding-top: 24px;
  border-top: 1px dashed #d0d0d0;
}

/*---------------------*/
.paymentOptionTab {
  border: 1px solid #ebebeb;
  border-radius: 16px;
  padding: 30px;
}

.tabTite {
  font-size: 18px;
  line-height: 24px;
  font-weight: 600;
  padding-bottom: 25px;
}

.paymentOptionTab .nav-tabs {
  padding-bottom: 35px;
}

.sectionBrowsePlan .paymentOptionTab .tabView .nav-item .tabMenu {
  display: flex;
  align-items: center;
  margin-right: 10px;
}

.sectionBrowsePlan .paymentOptionTab .tabView .nav-item .tabMenu span {
  padding-left: 5px;
}

.sectionBrowsePlan .paymentOptionTab .tabView .nav-item .tabMenu.active {
  /* padding: 12px; */
  border-radius: 5px;
  background: #e4e4e4;
  /* font-size: 18px; */
  color: #000;
  font-weight: 400;
  border-bottom: none;
}

.paymentContentSection {
  padding-top: 20px;
}

.paymentContentSection label {
  font-size: 18px;
  line-height: 24px;
  font-weight: 500;
  color: #000;
  margin-bottom: 15px;
}

.paymentContentSection .form-control {
  background: #f0f0f0;
  border-radius: 12px;
  font-size: 16px;
  line-height: 24px;
  padding: 16px 20px;
}

.paymentContentSection .form-group .success {
  padding-left: 20px;
  padding-top: 10px;
}

.paymentContentSection .upi-icons-list {
  margin-bottom: 20px;
}

.paymentContentSection .btn {
  background: linear-gradient(180deg, #ff835c 0%, #dd5428 100%);
  border-radius: 16px;
  margin-bottom: 30px;
  font-weight: 500;
}

.seperatorText {
  padding: 20px 0;
  font-size: 18px;
  line-height: 24px;
  font-weight: 600;
}

.paymentContentSection .pendingPaymentList .planItem .content {
  border: 2px solid #e8e8e8;
  font-size: 20px;
}

.paymentContentSection .planItem .content .o-logo {
  padding-right: 20px;
}

.paymentContentSection .pendingPaymentList .planItem .repeatamount {
  border-radius: 0 10px 10px 0;
}

.paymentContentSection .planItem .repeatamount:before {
  height: 170%;
  width: 170%;
  top: -35%;
}

.paymentContentSection .planItem .repeatamount {
  border-radius: 0 12px 12px 0;
  min-width: 100px;
}

.paymentContentSection .info {
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  color: #848484;
  padding-bottom: 10px;
}

.paymentContentSection .note {
  font-size: 12px;
  line-height: 24px;
  font-weight: 500;
  color: #848484;
}

.paymentContentSection .selectedBankLogo {
  min-height: 200px;
}

.paymentContentSection .selectedBankLogo img {
  height: 50px;
  display: inline-block;
}

.b-connect-logo-sec {
  margin-top: 30px;
  display: flex;
  justify-content: flex-end;
}

.b-connect-logo-sec img {
  width: 83px;
  height: 30px;
  object-fit: contain;
}

.searchPlan button {
  display: flex;
  align-items: center;
  padding-right: 20px;
}

.searchPlan button img {
  width: 16px;
}

/*=========End Utility Page TabContent Mobile Prepaid Style=========*/

/*=========Start Utility Page TabContent Electricity Bill Style=========*/
.utilityTab-whiteBox {
  border: 1px solid #d3d3d34f;
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0px 0 10px 0 #0000000a;
  margin: 16px 0px 30px 0px;
}

.tabBookingForm.leftBox {
  border-right: 1px solid #d9d9d9;
}

.leftBox {
  padding-right: 40px;
}

.rightBox {
  padding-left: 40px;
}

.tabBookingForm label {
  color: #000;
}

.tabBookingForm .searchPlan .form-control {
  border: none;
}

.tabBookingContent .mobBillDetail {
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
}

.tabBookingContent .mobBillDetail .price {
  font-weight: 800;
}

.tabBookingContent .mobBillDetail .ditem {
  padding-bottom: 10px;
  font-size: 14px;
}

/*=========End Utility Page TabContent Electricity Bill Style=========*/

/*=========Start Utility Page TabContent Credit Cards Style=========*/
.noCreditCard {
  max-width: 320px;
  font-size: 16px;
  line-height: 26px;
}

.noCreditCard img {
  max-width: 142px;
  margin-bottom: 20px;
}

.noCreditCard h5 {
  margin-bottom: 16px;
}

.noCreditCard button {
  background: linear-gradient(180deg, #ff835c 0%, #dd5428 100%);
  margin-top: 20px;
}

/*----------*/
.bankListHolder h6 {
  margin-bottom: 20px;
}

.bankList {
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
}

.bankList img {
  display: inline-block;
  margin-bottom: 10px;
}

.bankListItemHolder {
  margin-bottom: 20px;
}

.bankListItem {
  padding: 20px 10px;
  border: 1px solid #e2e2e2;
  border-radius: 12px;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.loadmoreCard {
  font-size: 14px;
  line-height: 24px;
  font-weight: 600;
  text-align: center;
  text-decoration: underline;
}

/*-------*/
.addCreditCard .form-group label {
  font-weight: 500;
  color: #000;
  margin-bottom: 9px;
}

.addCreditCard .customCheckbox .form-check-input {
  background: #dd5428 !important;
}

.addCreditCard .customCheckbox .form-check-input:checked:after,
.customCheckbox .form-check-input:checked[type="checkbox"]:after {
  border-color: #611700;
}

.addCreditCard .customCheckbox .form-check-label {
  color: #7c7c7c;
  font-size: 14px;
  line-height: 27px;
  font-weight: 500;
}

/*=========End Utility Page TabContent Credit Cards Style=========*/



/* Booking Pages by AJIT   */
body {
  background: #FFF4F0 !important
}

.bookingHeader {
  position: fixed;
  width: 100%;
  z-index: 2;
  top: 0
}

.bookingsliderHolder {
  margin-top: 72px;
}

.bookingSlider {
  height: 466px;
  border-radius: 0
}

.bookingSlider .bannerText-h1 {
  text-transform: capitalize;
}

.bookingSlider .sliderHolder-slickfade .slick-dots {
  bottom: -20px;
}

.bookingSlider .bannerBg {
  max-width: 264px;
  margin-top: -12px;
  float: right;
}

.bookingSlider .container {
  max-width: 1200px;
}

.bookingContainer {
  max-width: 1200px;
  margin: -100px auto 30px;
  background: #fff;
  border-radius: 16px;
  border: 1px solid #D3D3D3;
  box-shadow: 0px 4px 30px 0px #0000001A;
}

.bookingTabs {
  padding: 25px 30px 0
}

.bookingTabs ul,
.flightsTab ul,
.trainClass ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: inline-flex;
  gap: 27px;
}

.bookingTabs ul {
  gap: 12px;
}

.bookingTabs ul li {
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  border: 1px solid #D8D8D8;
  border-radius: 110px;
  cursor: pointer;
  position: relative;
  padding: 4px 20px;
  display: flex;
}

.bookingTabs ul li.active {
  border-color: #BE2E00
}

.bookingTabs ul li a {
  color: #000
}

.bookingTabs ul li img {
  width: 36px;
  display: inline-block;
  vertical-align: middle;
  margin-right: 12px;
}

.tabContainer {
  padding: 20px 30px;
}

.tabbox {
  display: none
}

.tabDetails .tabbox:first-child {
  display: block
}

.flightsTab ul,
.trainClass ul {
  border: 1px solid #DD5428;
  font-weight: 500;
  gap: 0
}

.flightsTab li,
.trainClass li {
  padding: 4px 20px;
  cursor: pointer;
  border-left: 1px solid #DD5428;
  white-space: nowrap;
}

.flightsTab li.active,
.trainClass li.active {
  background: #DD5428;
  color: #fff
}

.flightsTab svg {
  margin-right: 8px;
}

.flightsTab svg path {
  fill: #151515
}

.flightsTab li:first-child,
.trainClass li:first-child {
  border: 0
}

.flightsTab li.active svg path {
  fill: #fff
}

.tabDetails {
  padding: 25px 0 0;
}

.flightBook {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.flightBook>div {
  width: calc(25% - 12px);
  position: relative;
}

.flightBook label {
  display: block;
  font-weight: 500;
  color: #717171;
  padding-bottom: 5px
}

.flightBook input,
.form-input {
  border: 1px solid #D3D3D3;
  background: #fff;
  border-radius: 8px;
  font-weight: 400;
  font-size: 14px;
  padding: 8px 15px !important;
  width: 100%;
  padding: 0px;
  height: 42px;
}

.flightBook .searchBtn {
  height: 100%
}

.inputArrow {
  cursor: pointer;
}

.inputArrow:before {
  width: 40px;
  height: 40px;
  position: absolute;
  left: -28px;
  top: 18px;
  content: "";
  background: url(../../assets/images/input-arrow.svg) no-repeat center center;
}

#multiCity {
  counter-reset: box;
}

#multiCity .flightBook {
  padding-bottom: 20px;
}

#multiCity .flightBook:first-child>div:first-child {
  width: calc(70% - 8px);
}

#multiCity .flightBook:first-child>div:nth-child(2) {
  width: calc(30% - 8px);
}

.addcity {
  border: 1px solid #BE2E00;
  border-radius: 8px;
  padding: 11px 20px;
  background: #fff;
  color: #BE2E00;
  font-size: 16px;
  font-weight: 500
}

.addCityBtn {
  display: flex;
  gap: 20px;
}

.addCityBtn button {
  width: 270px;
}

.addCityBtn svg {
  display: inline-block;
  vertical-align: baseline;
  margin-right: 10px;
}

#multiCity .flightBook:not(:first-of-type) {
  counter-increment: box;
  padding-top: 30px;
}

#multiCity .flightBook>div {
  position: relative;
}

#multiCity .flightBook:not(:first-of-type)>div:first-child:before {
  content: "Trip " counter(box);
  position: absolute;
  left: 0;
  top: -33px;
  font-size: 18px;
  font-weight: 600
}

.removeFlight {
  border: 0;
  background: none;
  color: #BE2E00;
  font-size: 26px;
  font-weight: 600
}

.flightSearchBanner {
  height: 370px;
  text-align: center;
  padding: 70px 0 0
}

.flightSearchBanner .container {
  max-width: 730px;
}

.flightSearchBanner .bannerText-h1 {
  text-transform: capitalize;
  font-size: 40px;
  line-height: 60px;
}

.flightSearchResult {
  display: flex;
  gap: 20px;
  max-width: 1200px;
  margin: 30px auto 60px;
  flex-wrap: wrap;
}

.flightSearchResult h5 {
  color: #fff;
  font-weight: 500;
  width: 100%
}

.filterSec {
  width: calc(25% - 10px);
  border-radius: 16px;
  border: 1px solid #D3D3D3;
  padding: 0 20px;
  background: #fff;
  height: 100%
}

.filterBlock {
  border-bottom: 1px solid #D3D3D3;
  padding: 20px 0
}

.filterBlock:last-child {
  border: 0
}

.filterBlock h6.filterHeading {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #D3D3D3;
  padding-bottom: 20px;
}

.filterBlock h6 {
  margin-bottom: 20px;
}

.filterBlock h6>span {
  color: #BE2E00;
  font-size: 13px;
  font-weight: 300;
  cursor: pointer;
}

.filterBlock .customCheckbox-boxonly {
  padding: 0;
  border: 0;
}

.filterBlock .customCheckbox-boxonly .form-check-input {
  border-color: #848484;
  background-color: #fff;
  border-width: 2px;
}

.filterBlock .customCheckbox-boxonly .form-check-input:checked {
  background-color: #C83303;
  border-color: #C83303
}

.filterBlock ul li {
  display: flex;
  justify-content: space-between;
  padding-bottom: 10px;
  align-items: center;
  line-height: 26px;
  position: relative;
}

.searchResult {
  width: calc(75% - 10px);
}

.range-slider {
  position: relative;
  height: 30px;
}

.range-slider input {
  position: absolute;
  width: 100%;
  height: 6px;
  top: 12px;
  background: none;
  pointer-events: none;
  -webkit-appearance: none;
}

.range-slider input::-webkit-slider-thumb {
  -webkit-appearance: none;
  pointer-events: auto;
  width: 18px;
  height: 18px;
  background: #e55b2d;
  border-radius: 50%;
  cursor: pointer;
}

.range-slider input::-moz-range-thumb {
  pointer-events: auto;
  width: 18px;
  height: 18px;
  background: #e55b2d;
  border-radius: 50%;
  cursor: pointer;
}

.slider-track {
  position: absolute;
  height: 6px;
  width: 100%;
  background: #ddd;
  border-radius: 10px;
  top: 12px;
}

.price-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 12px;
}

.price-labels>span:before {
  content: "₹";
}

.sliderFordate {
  border: 1px solid #D3D3D3;
  margin-bottom: 20px !important;
  display: flex;
  padding: 0 40px;
  border-radius: 16px;
  overflow: hidden;
}

.sliderFordate .slick-slide {
  color: #1D1C2B;
  font-weight: 500;
  background: #fff;
  padding: 10px 20px;
  border-right: 1px solid #D3D3D3;
  text-align: center;
  cursor: pointer;
}

.sliderFordate .slick-slide.active {
  font-weight: 700;
  color: #BE2E00;
  background: #FFF4F0
}

.sliderFordate .slick-arrow {
  background: #fff;
  width: 40px;
  height: 102%;
}

.flightListBlock {
  border: 1px solid #D3D3D3;
  border-radius: 16px;
  background: #fff;
  padding: 20px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
  margin-bottom: 20px;
}

.flightIcon {
  padding: 0 10px 0 30px;
}

.flightIcon img {
  width: 114px;
}

.flightnumber {
  border-radius: 40px;
  padding: 1px 12px;
  background: #C83303;
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  height: 100%;
}

.flightTime {
  display: flex;
  gap: 30px;
  width: 37%;
  padding: 0 20px;
}

.time {
  font-size: 20px;
  font-weight: 600;
  color: #000
}

.time>span {
  font-size: 16px;
  font-weight: 600;
  color: #808080;
  display: block;
  text-align: center;
}

.duration {
  font-size: 12px;
  font-weight: 500;
  color: #848484;
  line-height: 14px;
}

.duration>span {
  display: block;
  font-weight: 600;
  color: #606060;
  text-align: center;
  font-size: 14px;
}

.duration>span:first-child:after {
  content: "";
  background: url(../../assets/images/distance-icon.svg) no-repeat center center;
  width: 92px;
  height: 32px;
  display: block;
  margin: 0 auto;
}

.flightFare {
  font-size: 20px;
  font-weight: 700;
  color: #000
}

.flightFare>span {
  font-size: 13px;
  font-weight: 500;
  color: #04A85B;
  display: block;
}


.flightViewPrice {
  padding: 0 20px 0 0;
}

.flightViewPrice>button {
  background: linear-gradient(180deg, #FF835C 0%, #DD5428 100%);
}



.flightDetailLink {
  border-top: 1px solid #D3D3D3;
  padding: 20px 30px;
  font-weight: 500;
  width: 100%
}

.flightDetailLink>a {
  color: #DD5428;
  text-decoration: none;
  position: relative;
  padding-right: 20px;
  transition: all 0.3s ease-in-out;
}

.flightDetailLink>a:hover {
  padding-right: 10px;
}

.flightDetailLink>a:after,
.sliderFordate .slick-prev:before,
.flightDetailLink>a:after,
.sliderFordate .slick-next:before {
  width: 9px;
  content: "";
  height: 9px;
  border-right: 2px solid #e55b2d;
  border-bottom: 2px solid #e55b2d;
  transform: rotate(-45deg);
  position: absolute;

  top: 5px;
  right: 0;
}

.sliderFordate .slick-prev:before,
.sliderFordate .slick-next:before {
  width: 10px;
  height: 10px;
  position: static;
  display: inline-block;
  z-index: 1;
  border-color: #D3D3D3
}

.sliderFordate .slick-prev {
  left: 0;
  border-right: 1px solid #D3D3D3;
}

.sliderFordate .slick-next {
  right: 0;
  border-left: 1px solid #D3D3D3;
}

.sliderFordate .slick-prev:before {
  transform: rotate(135deg);
  margin-left: 8px;
}

.sliderFordate .slick-next:before {
  margin-right: 8px;
}

.fareDetails {
  display: flex;
  padding: 16px 20px;
  border-top: 1px solid #eee;
  font-size: 16px;
  font-weight: 600;
  color: #555;
}

.fareDetails>span:first-child {
  width: 40%;
}

.fareDetails>span:nth-child(2) {
  width: 60%;
  color: #000;
}

#cancellationPolicy .fareDetails>span {
  width: 50%;
}

.card-header,
.cardHeader {
  background: #FFEFEA;
  padding: 14px 20px;
  font-weight: 600;
  font-size: 18px;
  color: #000;
}

/* Flight Card */
.flight-card {
  border: 1px solid #e5e5e5;
  border-radius: 14px;
  margin-bottom: 24px;
  background: #fff;
}

.flight-header {
  display: flex;
  justify-content: space-between;
  font-weight: 600;
  padding: 20px;
  font-size: 18px;
  border-bottom: 1px solid #e5e5e5;
  color: #222;
}

.flight-header h5 {
  margin: 0;
}


/* Flight Body */
.flight-body {
  /* display: flex;
  align-items: center;
  gap: 80px;*/
  padding: 20px;
  font-size: 16px;
}

.airline .logo {
  font-size: 22px;
  font-weight: bold;
  color: #1a2c8b;
}

.flight-info strong {
  display: block;
  font-size: 16px;
}

.flight-info span {
  display: block;
  line-height: 22px;
}

.flight-info>span:first-child {
  font-size: 16px;
  font-weight: 700
}

.flight-info>span:nth-child(2) {
  font-size: 20px;
  font-weight: 700;
  padding: 10px 0
}

/* Timeline */
.timeline {
  text-align: center;
  color: #606060;
  font-weight: 600;
  width: 140px;
}

.line {
  position: relative;
  margin-top: 6px;
  height: 2px;
  background: #848484;
}

.line .dot {
  position: absolute;
  top: -4px;
  width: 10px;
  height: 10px;
  background: #fff;
  border: 2px solid #848484;
  border-radius: 50%;
}

.line .dot:first-child {
  left: 0;
}

.line .dot:last-child {
  right: 0;
}

.flgihtInfo img,
.flightpayinfo img {
  width: 55px;
}

.flgihtInfo {
  gap: 0 10px;
}

.flgihtInfo>div {
  border-right: 1px solid #CFCFCF;
  padding-right: 20px;
}

.flgihtInfo>div:last-child {
  border: 0;
  padding-left: 20px;
}

.flgihtInfo>div>div {
  font-size: 20px;
  font-weight: 600;
  color: #000;
  margin-bottom: 10px;
}

.flgihtInfo>div>div>span:first-child:after {
  content: "";
  background: url('../../assets/images/right-arrow.svg') no-repeat center center;
  background-size: 16px auto;
  width: 16px;
  height: 16px;
  display: inline-block;
  vertical-align: middle;
  margin: 0 5px;
}

.dateBlock {
  background: #DD5428;
  color: #fff;
  border-radius: 40px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 500;
  margin-right: 10px;
}

.flightNumber {
  font-weight: 600;
  flex-wrap: wrap;
}

.flightNumber>span {
  width: 100%
}

.flightNumber>span:nth-child(2) {
  border: 0.5px solid #C9C9C9;
  display: block;
  border-radius: 40px;
  font-weight: 600;
  text-align: center;
  max-width: 110px;
  font-size: 12px;
  margin-top: 10px;
}

.tripSummery {
  background: #F2F2F2;
  width: 100%;
  border-radius: 8px;
  margin: 20px 0 0;
  padding: 20px;
  gap: 50px
}

/* Section */
.section-title {
  margin: 30px 0 16px;
  font-size: 18px;
}


.detailsTitle {
  border-bottom: 1px solid #ccc;
  padding: 20px;
}

.flightDetailstabs {
  border-bottom: 1px solid #ccc;
  padding: 20px 20px 0;
}

.flightDetailstabs ul {
  display: flex
}

.flightDetailstabs ul li {
  padding: 10px 40px;
  cursor: pointer;
  font-weight: 600;
  font-style: 600;
  font-size: 18px;

}

.flightDetailstabs ul li.active {
  background: linear-gradient(90deg, #FF835C 0%, #DD5428 100%);

  color: #fff;
  border-radius: 10px 10px 0 0;
}

#flightDetails .flight-body {
  gap: 40px
}

.fareSummary {
  padding: 20px 35px;
}

.summaryMid {
  border: 1px solid #ccc;
  border-radius: 20px;
  overflow: hidden;
  margin-bottom: 20px
}

#cancellationPolicy .summaryMid {
  margin: 20px 0
}

.airline img {
  width: 98px;
}

.baggage {
  margin-top: 20px;
}

.baggage .card-header {
  display: flex;
}

.baggage .fareDetails span,
.baggage .card-header span {
  width: 25%;
}

.baggage img {
  margin-right: 8px;
  display: inline-block;
  vertical-align: middle;
}

.baggage .fareDetails span {
  font-size: 14px;
  color: #222
}

.important {
  background: #fff1eb;
  padding: 10px 20px;
  margin-bottom: 20px;
}

.important h4 {
  margin: 0;
  color: #222;
}

.important p {
  margin: 0;
  font-size: 13px;
  color: #444;
}

.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  justify-content: center;
  align-items: center;
  top: 0;
  left: 0;
  display: none;
  z-index: 2;
}

.popup {
  background: #fff;
  max-width: 1200px;
  border-radius: 16px;
  overflow: hidden;
  position: absolute;
  top: 50px;
  margin: 0 auto;
  left: 0;
  right: 0;
  z-index: 3;
  display: none;
}

.popup-header {
  display: flex;
  padding: 20px 30px;
  justify-content: space-between;
  padding-bottom: 10px;
  border-bottom: 1px solid #E2E2E2;
}

.popup-header h6 {
  font-weight: 500
}

.popupClose {
  cursor: pointer;
}

.route {
  padding: 14px 30px 20px;
  border-bottom: 1px solid #E2E2E2;
  border-top: 1px solid #E2E2E2;
  display: flex;
  flex-wrap: wrap;
  font-size: 24px;
  font-weight: 600;
  color: #222;
  align-items: self-end;
}

.route img {
  width: 117px;
  margin-right: 50px;
}

.route>span:nth-child(2) img {
  width: 92px;
  margin: 0 10px;
}

.route>div {
  font-size: 20px;
  color: #848484;
  font-weight: 500;
  width: 100%;
  padding: 20px 0 0
}

.route>div>span:nth-child(2) {
  padding-left: 25px
}

.fare-slider {
  margin-top: 10px;
  padding: 0 20px;
}

.fare-card {
  background: linear-gradient(359.88deg, #FFFFFF 0.1%, #FFE0D7 101.24%);
  border-radius: 12px;
  padding: 20px;
  margin: 10px;
  border: 1px solid #D3D3D3;
  position: relative;
  max-width: 454px;
  box-shadow: 0.5px 0.5px 16px 0px #1A1A1A33
}

.fare-card h6 {
  font-weight: 600;
  margin-bottom: 20px;
}

.fare-card li {
  position: relative;
  padding: 0 0 0 30px;
  margin-bottom: 10px;
  line-height: 24px
}

.fare-card li:before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  background-size: 18px auto !important
}

.fare-card li.tick:before {
  background: url(../../assets/images/tick-icon.svg);
}

.fare-card li.block:before {
  background: url(../../assets/images/block-icon.svg);
}

.fare-card.highlight {
  background: #ffe9dc;
}

.fare-card .primeBtn {
  width: 100%;
  margin-top: 15px;
}


.cardBlock {
  background: #fff;
  border-radius: 8px;
  padding: 15px;
  position: relative;
  margin-bottom: 20px
}

.cardBlock .tag:before {
  content: "";
  background: url(../../assets/images/cardblock-icon.svg);
  width: 32px;
  height: 32px;
  display: inline-block;
  vertical-align: middle;
  margin-right: 10px
}

.tag {
  font-weight: 700;
  color: #BE2E00;
  font-size: 18px
}

.cardBlock .badge {
  position: absolute;
  right: 20px;
  top: 25px;
  background: #DAFFEE;
  color: #008145;
  font-size: 10px;
  padding: 7px 15px;
  font-weight: 700;
  border-radius: 50px
}

.priceHolder {
  font-size: 16px;
  font-weight: 600;
  display: block;
}

.cardBlock>small {
  font-size: 14px;
  font-weight: 400;
  color: #707070
}


.reviewBookingBanner {
  padding: 40px 0 0
}

.reviewBookingBanner>.container {
  justify-content: space-between;
  color: #fff;
  max-width: 1230px;
  padding: 0 20px 15px;
}

.reviewBookingBanner>.container>div>span {
  position: relative;
  padding: 0px 12px
}

.reviewBookingBanner>.container>div>span:after {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 2px;
  background: #fff;
  position: absolute;
  right: 0;
  top: 14px;
}

.reviewBookingBanner>.container>div>span:last-child:after {
  display: none;
}

.reviewBookingBanner .bannerText-h1 {
  text-transform: capitalize;
  font-size: 40px;
  line-height: 60px;
}

.reviewBooking .container {
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 60px;
  max-width: 1230px;
  padding: 0 15px;
}

.reviewBooking .container>h5 {
  margin: 30px 0 10px
}

.reviewBooking .container>h5 {
  width: 100%
}

.reviewBookLft {
  width: calc(70% - 10px)
}

.reviewBookRgt {
  width: calc(30% - 10px)
}

.fareCard {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
  margin-bottom: 18px;
  border: 1px solid #D3D3D3
}

.fareCard>div:not(.total-row) {
  padding: 0 20px 12px
}

.fareCardTitle {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 14px;
  border-bottom: 1px solid #e5e5e5;
  padding-bottom: 12px;
  padding: 15px 20px
}

.fareCharge {
  display: flex;
  justify-content: space-between;
  padding: 12px 20px;
  font-size: 14px;
  color: #333;
  line-height: 20px
}

.total-row {
  background: #e25724;
  color: #fff;
  display: flex;
  justify-content: space-between;
  padding: 14px 16px;
  border-radius: 0 0 14px 14px;
  margin: 16px 0 0;
  font-weight: 800;
  font-size: 16px
}

.coupon-title {
  display: flex;
  align-items: center;
  gap: 10px
}

.coupon-icon {
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold
}

.coupon-input {
  width: 100%;
  padding: 14px;
  border-radius: 10px;
  border: 1px solid #ddd;
  font-size: 14px;
  margin: 16px 0;
  outline: none
}

.coupon-input:focus {
  border-color: #e25724
}

.view-coupon,
.viewAll {
  color: #e25724;
  font-size: 14px;
  cursor: pointer;
  text-decoration: none
}

.view-coupon:hover,
.viewAll:hover {
  text-decoration: underline;
}


.baggageBlock {
  padding: 0 20px 20px;
  font-weight: 500
}

.baggageBlock img {
  margin-right: 15px;
}

.baggageBlock>span {
  display: inline-block;
  width: 50%;
  color: #222
}

.baggageBlock>span>span {
  color: #000
}

.reviewBookLft .line {
  margin-top: 0;
  height: auto;
  background: no-repeat;
}

.reviewBookLft .timeline {
  font-weight: 400
}

.reviewBlock {
  border: 1px solid #D3D3D3;
  background: #fff;
  margin: 20px 0 0;
  border-radius: 16px;
}

.reviewHeader {
  padding: 15px 30px;
  border-bottom: 1px solid #D3D3D3;
  color: #717171;
  position: relative;
}

.reviewHeader svg {
  margin-right: 10px;
}

.reviewHeader>p {
  margin-bottom: 0
}

.reviewHeader>p>span {
  color: #BE2E00;
  font-weight: 700
}

.reviewHeader>h5 {
  color: #222;
  margin: 0
}

.reivewBody {
  padding: 20px 30px;
}

.tripsTags {
  gap: 10px 25px;
  flex-wrap: wrap;
  padding-bottom: 20px;
}

.tripsTags>span:before {
  background: url(../../assets/images/tick-icon.svg) no-repeat center center;
  content: "";
  width: 18px;
  height: 18px;
  display: inline-block;
  vertical-align: middle;
  margin-right: 10px;
}

.reviewFooter {
  padding: 20px 20px 30px;
}

.refundBooking {
  border: 1px solid #848484;
  background: #fff;
  color: #848484;
  margin-right: 20px;
  padding: 11px 20px
}

.refundBooking:hover {
  color: #848484 !important
}

.refundBooking:has(input:checked) {
  background: linear-gradient(180deg, #FF835C 0%, #DD5428 100%);
  color: #fff;
  border-color: #FF835C;
}

.refundBooking .checkBoxParent {
  margin-right: 10px;
}

.refundBooking .form-check-input {
  border-color: #848484;
  background-color: #fff;
  border-width: 3px;
}

.refundBooking:has(input:checked) .form-check-input {
  background-color: #FFF;
  border-color: #fff;
}

.refundBooking:has(input:checked) {
  color: #fff !important
}

.refundBooking:has(input:checked) .form-check-input:checked[type=checkbox] {
  --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23BE2E00' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}

.addPassanger {
  width: 100%;
  display: block;
  color: #BE2E00;
  border: 0.5px dashed #BE2E00;
  background: #FFF3EF;
  text-align: center;
  font-weight: 500;
  cursor: pointer;
}

.addPassanger svg {
  width: 24px;
  height: 24px;
  display: inline-block;
  vertical-align: bottom;
  margin-right: 0;
}

.addPassanger:hover {
  background: linear-gradient(180deg, #FF835C 0%, #DD5428 100%);
  color: #fff;
}

.addPassanger path {
  fill: #fff
}

.contactinfoForm {
  flex-wrap: wrap;
  gap: 20px;
}

.contactinfoForm>div>label {
  display: block;
  font-weight: 500;
  color: #717171;
  margin-bottom: 5px;
}

.contactinfoForm>div {
  width: calc(50% - 10% - 20px);
}

.contactinfoForm>div:first-child {
  width: 20%
}

.contactinfoForm>div:last-child {
  width: 100%
}

.country-input {
  display: inline-flex;
  align-items: center;
  gap: 10px
}

.country-code {
  width: 42px;
  border: none;
  background: transparent;
  font-size: 16px;
  color: #666;
  outline: none;
  text-align: center;
  cursor: pointer
}

.note {
  display: block;
  color: #717171;
  font-weight: 500;
  padding: 10px 0 0
}

.reviewBookLft .form-check-input {
  border-radius: 8px
}

.contactinfoForm .checkBoxParent {
  vertical-align: sub;
  margin-left: 10px;
}

.contactInfo .reviewFooter {
  border-top: 1px solid #84848469
}

.contactInfo .reviewFooter .checkBoxParent {
  vertical-align: sub;
  margin-right: 10px;
}

.checkboxlabel {
  color: #222 !important;
  font-weight: 500
}

.continue {
  margin: 20px 0 0;
  display: inline-block;
}


.passengerFieldSec {
  display: none;
}

.passnote {
  color: #DD5428
}

.selectRadio {
  display: flex;
  gap: 0 16px;
  padding: 15px 0
}

.selectRadio label {
  border: 1px solid #D3D3D3;
  border-radius: 8px;
  padding: 10px;
  font-weight: 600;
  color: #151515;
  width: 234px;
  line-height: 22px
}

.selectRadio label:before {
  content: "";
  width: 42px;
  height: 42px;
  display: inline-block;
  vertical-align: middle;
  margin-right: 15px;
}

.selectRadio label[for="adult"]:before {
  background: url('../../assets/images/adult-icon.svg') no-repeat center center;
}

.selectRadio label[for="child"]:before {
  background: url('../../assets/images/child-icon.svg') no-repeat center center;
}

.selectRadio label[for="infant"]:before {
  background: url('../../assets/images/infant-icon.svg') no-repeat center center;
}

.selectRadio label span>span {
  display: block;
  color: #A2A2A2;
}

.selectRadio label>span {
  display: inline-block;
  vertical-align: middle;
}

.selectRadio .checkBoxParent {
  float: right;
  margin: 10px 0 0;
}

.selectRadio .checkBoxParent input {
  border-radius: 50%;
  border: 1.5px solid #D3D3D3;
  background-color: #fff;
}

.selectRadio .form-check-input:checked[type=radio] {
  --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e")
}

.selectRadio label:has(input:checked) {
  background: #FFF3EF;
  border-color: #FFA78B
}

.passengerField {
  flex-wrap: wrap;
  gap: 16px
}

.passengerField label {
  color: #717171;
  font-weight: 500;
  padding-bottom: 5px;
}

.passengerField>div {
  width: calc(33.33% - 11px);
}

.passengerField select {
  height: 47px
}

.btnContainer {
  padding: 20px 0 0;
  justify-content: flex-end;
  gap: 16px;
}

.reviewBtn.cancelbtn {
  background: #fff;
  border: 1px solid #DD5428;
  color: #DD5428 !important
}

.reviewBtn.cancelbtn:hover {
  background: linear-gradient(180.53deg, #dd5428 0.45%, #772d16 225.94%);
  color: #fff !important
}

.passengerDetail {
  display: none
}

.passengerInfo {
  border: 1px solid #D3D3D3;
  padding: 20px 20px 20px 60px;
  border-radius: 8px;
  justify-content: space-between;
  counter-increment: count;
  position: relative;
  margin-bottom: 24px;
}

.nameInfo {
  font-size: 16px;
  font-weight: 600
}

.status {
  font-size: 12px;
  color: #BE2E00;
  background: #FFDDD2;
  padding: 4px 13px 6px;
  border-radius: 30px;
  margin-left: 15px
}

.nameInfo>span:last-child {
  display: block;
  color: #848484
}

.passengerInfo:before {
  content: "" counter(count);
  position: absolute;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  color: #fff;
  background: #151515;
  left: 20px;
  top: 25px;
  font-weight: 700;
  font-size: 12px;
  line-height: 25px;
  text-align: center;
}

.editDelete {
  gap: 10px;
}

.editDelete>span {
  cursor: pointer;
}

.travelInsBlock .tripsTags {
  padding-bottom: 0
}

.travelInsBlock .reviewFooter {
  padding: 10px 20px 30px
}

.travelInsBlock .reviewHeader>span {
  position: absolute;
  right: 20px;
  top: 50%;
  font-weight: 700;
  font-size: 18px;
  transform: translateY(-50%);
  color: #222
}

.travelInsBlock .reviewHeader>span>span {
  color: #BE2E00
}

.distanceSec {
  font-size: 18px;
  font-weight: 600;
  background: #
}

.distanceSec>span>span {
  background: url('../../assets/images/flight-vector.svg') no-repeat center center;
  width: 23px;
  height: 23px;
  display: inline-block;
  vertical-align: middle;
  margin: 0 10px;
}

.distanceSec>p {
  font-size: 12px;
  font-weight: 400
}

.distanceSec>p>span {
  font-weight: 600
}

.reviewBlock.seatBlock {
  margin: 0
}

.seatBlock .reivewBody {
  padding-bottom: 30px
}

.btnContainer {
  text-align: center;
}

.btnContainer button {
  width: 100%
}

.reviewBlock.cabBlock {
  margin: 0;
}

.pickupBlock {
  flex-wrap: wrap;
  display: flex;
  gap: 20px
}

.pickupBlock label,
.pickupBlock>div.searchbtn {
  display: block;
  width: 100%
}

.pickupBlock>div {
  width: calc(30% - 15px);
  position: relative;
}

.pickupBlock>div:nth-child(4),
.pickupBlock>div:nth-child(5) {
  width: calc(20% - 15px)
}

.pickupBlock .form-input {
  background: #fff;
  border: 1px solid #ccc;
  width: 100%;
}

.pickupBlock>div:nth-child(2) .form-input,
.pickupBlock>div:nth-child(3) .form-input {
  padding-left: 40px
}

.pickupBlock>div:nth-child(2):before {
  content: "";
  background: url('../../assets/images/flight-vector-grey.svg') no-repeat center center;
  width: 23px;
  height: 23px;
  position: absolute;
  left: 14px;
  top: 13px;
}

.pickupBlock>div:nth-child(3):before {
  content: "";
  background: url('../../assets/images/location-grey.svg') no-repeat center center;
  width: 15px;
  height: 20px;
  position: absolute;
  left: 14px;
  top: 13px
}

.searchbtn button {
  width: 100%
}

.pickupOption {
  flex-wrap: wrap;
  border: 1px solid #ccc;
  border-radius: 16px;
  margin: 30px 0;
  justify-content: space-between;
  position: relative;
  box-shadow: 0px 4px 24px 6px #00000024;
}

.pickupOption:last-child {
  margin-bottom: 0
}

.pickupInfo,
.cabPriceBtn {
  padding: 20px;
  gap: 30px;
  align-items: flex-start;
}

.vehicleType {
  position: absolute;
  left: 20px;
  top: -20px;
  border-radius: 12px;
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  line-height: 15px;
  text-align: center;
  margin-top: 5px;
  padding: 5px 15px
}

.cng {
  background: #009157;
}

.petrol {
  background: #CA9D5C;
}

.cabinfo {
  font-weight: 600
}

.rating {
  font-size: 10px;
  border-radius: 16px;
  font-weight: 700;
  display: block;
  background: #009157;
  color: #fff;
  max-width: 45px;
  height: 20px;
  line-height: 13px;
  text-align: center;
  margin-top: 5px;
  padding: 4px 8px
}

.cabTag {
  font-size: 10px;
  border-radius: 10px;
  line-height: 13px;
  background: #DD54281A;
  color: #BE2E00;
  text-align: center;
  padding: 6px 14px
}

.cabPrice {
  font-size: 20px;
  font-weight: 800;
}

.cabPrice>span {
  display: block;
  font-size: 14px;
  color: #666;
  font-weight: 300
}

.cabsFooter {
  border-top: 1px solid #ccc;
  padding: 20px;
  width: 100%;
  font-size: 12px;
  line-height: 18px;
}

.cabsFooter>span {
  margin-right: 20px
}

.cabsFooter>span:first-child:before {
  content: "";
  width: 16px;
  height: 16px;
  background: url('../../assets/images/seats-icon.svg');
  display: inline-block;
  vertical-align: middle;
  margin-right: 7px;
}

.cabsFooter>span:last-child:before {
  content: "";
  width: 6px;
  height: 6px;
  background: #000;
  border-radius: 50%;
  display: inline-block;
  vertical-align: top;
  margin: 5px 7px;
}

.btnContainer {
  padding-bottom: 35px;
}

.paymentDetail .paymentOptionTab {
  background: #fff;
  margin: 32px 0
}

.paymentDetail .reviewHeader {
  justify-content: space-between;
  align-items: center;
}

.paymentDetail .reviewBlock {
  box-shadow: 0px 4px 24px 6px #00000024;
  margin-bottom: 20px;
}

.paymentDetail .reviewHeader button {
  background: #DD5428
}

.editBtn {
  font-size: 14px;
  font-weight: 500;
  border-radius: 40px;
  padding: 8px 25px
}

.editBtn:after {
  content: "";
  display: inline-block;
  width: 17px;
  height: 17px;
  background: url('../../assets/images/edit-icon-white.svg');
  margin-left: 5px;
  vertical-align: middle;
}

.contactDetail {
  color: #f00;
  gap: 50px;
  font-size: 16px;
  font-weight: 500
}

.contactDetail div>span,
.contactDetail div span>a {
  color: #222;
  margin-left: 20px;
  text-decoration: none;
}

.paynote {
  font-size: 12px;
  font-weight: 500;
  color: #6D6C6C;
  line-height: 24px;
}

.pricePayBtn {
  justify-content: flex-end;
  gap: 40px;
  color: #6D6C6C;
  line-height: 24px;
  margin: 20px 0
}

.pricePayBtn>div span {
  color: #BE2E00;
  font-size: 20px;
  font-weight: 800;
  display: block;
}

.filterDropdown {
  display: none;
}

.fieldLabel {
  background: #E8E8E8;
  border-radius: 8px;
  padding: 12px 14px;
  line-height: 26px;
  color: #000;
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
}

.fieldLabel label {
  padding-bottom: 0;
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
}

#oneway .flightBook>div,
#bookTrain>.flightBook>div {
  width: calc(20% - 13px)
}

.fieldLabel input[type="date"] {
  padding: 0;
  background: no-repeat;
  border: 0;
}

/* From / To dropdown */
.dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #fff;
  width: 100%;
  border: 1px solid #ddd;
  z-index: 10
}

.dropdown-menu li {
  cursor: pointer
}

.dropdown-menu li:hover {
  background: #f1f1f1
}

.traveller-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  width: 280px;
  background: #fff;
  border-radius: 10px;
  padding: 15px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  z-index: 10
}

.traveller-dropdown .flex {
  justify-content: space-between;
  margin-bottom: 10px
}

.traveller-dropdown .flex>span {
  font-weight: 500
}

.count {
  display: flex;
  gap: 0 10px
}

.count button {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  padding: 0;
  font-size: 18px;
  font-weight: 400;
  font-family: arial
}

.count>span {
  font-weight: 600
}

#oneway .searchBtn {
  height: 100%
}

.flightClass {
  gap: 0 5px;
}

.flightClass button {
  border: 1px solid #C9C9C9;
  padding: 5px 14px;
  border-radius: 8px;
  background: #fff;
  font-size: 12px;
  line-height: 16px
}

.flightClass button.active {
  background: linear-gradient(180deg, #FF835C 0%, #DD5428 100%);
  border-color: #FF835C;
  color: #fff;
}

.speacialFare {
  border-top: 1px solid #C9C9C9;
  padding: 15px 0 0;
  gap: 0 16px;
  color: #000;
  margin-top: 25px;
}

.speacialFare>div:not(.speacialHead) {
  border: 0.5px solid #C5C5C5;
  font-weight: 700;
  border-radius: 8px;
  padding: 10px 16px;
  line-height: 20px;
  cursor: pointer;
}

.speacialHead {
  font-size: 18px;
  font-weight: 600;
}

.speacialFare>div:not(.speacialHead)>span {
  font-weight: 400;
  color: #6E6E6E;
  display: block;
}

.speacialFare>div.active {
  border-color: #DD5428
}

.offerBanner {
  border-radius: 16px;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 66px;
  color: #000;
  font-weight: 700;
  max-width: 1200px;
  line-height: normal;
  margin: 0 auto 60px;
  height: 400px;
}

.termsBlock {
  max-width: 1200px;
  margin: 0 auto 60px;
  color: #848484;
  font-size: 16px;
}

.termsBlock .font18,
.termsBlock h4 {
  color: #000
}

.termsBlock h4 {
  margin-bottom: 20px;
}

.searchResultMain {
  max-width: 1230px;
  margin: 105px auto 30px;
  padding: 0 15px;
}

.searchResultMain>.resultContainer {
  background: #fff;
  border-radius: 16px;
  border: 1px solid #D3D3D3;
  box-shadow: 0px 4px 30px 0px #0000001A;
}

.searchResultMain:before,
.reviewBookingBanner:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 620px;
  background: linear-gradient(360deg,
      #000000 0%,
      #300b00 48.21%,
      #611700 96.42%);
  width: 100%;
  z-index: -1
}

.farePack {
  flex-wrap: wrap;
  padding: 20px 30px 10px;
  gap: 0 20px;
}

.farePack>div>span {
  display: block;
  font-size: 12px;
  color: #5D5D5D;
  padding: 12px 0 0
}

.farePack>div>span:first-child {
  border: 1px solid #D8D8D8;
  border-radius: 8px;
  padding: 8px 20px;
  color: #000;
  font-weight: 400;
  font-size: 14px;
  width: 230px;
  cursor: pointer;
}

.farePack>div>span.active:first-child {
  background: linear-gradient(180deg, #FF835C 0%, #DD5428 100%);
  color: #fff
}

.farePack>div>span>span {
  display: block;
  font-weight: 700;
  font-size: 20px;
}

.reviewBookingBanner:before {
  height: 207px;
}

.impInfo h6 {
  position: relative;
  font-weight: 600;
  padding-left: 30px
}

.impInfo h6:before {
  content: "";
  background: url('../../assets/images/info-icon.svg') no-repeat center center;
  width: 20px;
  height: 20px;
  position: absolute;
  left: 0;
  top: 3px
}

.impInfo ul {
  margin-left: 15px
}

.reivewBody>h5>span {
  color: #868686;
  font-weight: 400;
  font-size: 14px;
}

.benefitsBlock {
  padding: 0 0 10px
}

.benefitsBlock>span {
  color: #DD5428;
  font-weight: 600;
  display: block;
  padding-bottom: 6px;
}

.benefitsBlock .flex {
  flex-wrap: wrap;
  gap: 0 16px;
}

.benefitsBlock .flex>div {
  border: 1px solid #DEDEDE;
  background: #F5F5F5;
  padding: 12px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
}

.benefitsBlock .flex>div>span {
  display: block;
  font-size: 12px;
  font-weight: 400
}

.successNote {
  background: linear-gradient(90deg, #A7FFBE 0%, #649990 100%);
  font-weight: 600;
  border-radius: 8px;
  padding: 7px 10px 7px 42px;
  position: relative;
  margin: 10px 0;
  display: none;
}

.successNote:before {
  content: "";
  background: url('../../assets/images/success-icon.svg') no-repeat center center;
  width: 20px;
  height: 23px;
  position: absolute;
  left: 12px;
  top: 12px;
}

.radioBlock label {
  display: block;
  padding: 10px 0;
  font-weight: 600;
  line-height: 22px
}

.radioBlock .customCheckbox-boxonly .form-check-input,
.radioBlock .customCheckbox-boxonly .form-check-input:checked {
  background-color: #fff;
  border-color: #1D1B20;
  border-width: 2px;
  border-radius: 50%;
  width: 20px;
  height: 20px;
}

.radioBlock .form-check-input:checked[type=radio] {
  --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23000'/%3e%3c/svg%3e")
}

.radioBlock .checkBoxParent {
  margin: 2px 6px 0 0;
  vertical-align: middle;
}

label:has(#Yes:checked)+.successNote {
  display: block;
}

.bookingDetails {
  border-top: 1px solid #C9C9C9;
  flex-wrap: wrap;
  margin: 20px 0 0;
  padding: 20px 0;
  gap: 16px;
}

.bookingDetails>h6,
.bookingDetails>div:nth-child(5) {
  width: 100%;
  margin-bottom: 0
}

.bookingDetails>div {
  width: calc(33.33% - 11px)
}

.bookingDetails .customCheckbox-boxonly .form-check-input,
.bookingDetails .customCheckbox-boxonly .form-check-input:checked,
.selectState .customCheckbox-boxonly .form-check-input,
.selectState .customCheckbox-boxonly .form-check-input:checked,
.checkboxAgree .customCheckbox-boxonly .form-check-input,
.checkboxAgree .customCheckbox-boxonly .form-check-input:checked {
  background-color: #000;
  border-color: #000;
  width: 18px;
  height: 18px;
  border-radius: 4px;
}

.gstnumber .checkBoxParent,
.checkboxAgree .checkBoxParent {
  line-height: 19px;
  margin-right: 6px
}

.selectState {
  font-size: 16px
}

.selectState>div>label {
  font-weight: 600;
  padding-bottom: 6px;
}

.selectState select {
  background-color: #F0F0F0;
  max-width: 225px;
  margin-bottom: 20px;
}

.gstnumber {
  font-weight: 600
}

.gstnumber>span {
  color: #DD5428
}

.reviewHeader>h5>span {
  color: #5E5E5E;
  font-size: 12px;
  font-weight: 400
}

.continueBtn {
  text-align: right;
}

.continueBtn button {
  max-width: 185px;
}

.seatsNote {
  background: #EAEAEA;
  padding: 3px 10px;
  border-radius: 4px;
  color: #000;
  font-size: 12px;
  text-align: center;
}

.seatsNote a,
.checkboxAgree span {
  color: #DD5428;
  font-weight: 600;
  text-decoration: none;
}

.seatsNote a:hover {
  text-decoration: underline;
}

.flightImg {
  width: 100%
}

.flightimgdist {
  border: 1px solid #D2D2D2;
  border-radius: 4px;
  margin: 20px 0 0;
  background: #FFF2EE;
  position: relative;
}

.seatBlock .distanceSec {
  background: #DD5428;
  color: #fff;
  border-radius: 4px 4px 0 0;
  overflow: hidden;
  padding: 9px 20px;
  line-height: 24px;
}

.seatBlock .distanceSec p {
  margin-bottom: 0
}

.seatBlock .distanceSec>span>span {
  background: none;
  line-height: 20px;
  margin: 0 3px;
  text-align: center;
}

.seatBlock .distanceSec>span>span:after,
.flightpayinfo>.flex>span:nth-child(3):after {
  content: "→";
  font-weight: 900;
  font-size: 24px;
  font-family: monospace;
}

.flightInfoImg {
  position: absolute;
  left: 20px;
  bottom: 20px
}

.flightAddone h6 {
  font-weight: 600;
  margin-bottom: 10px;
}

.flightAddone img {
  width: 100%
}

.flightpayinfo {
  border: 1px solid #DDD;
  border-radius: 16px;
  background: #fff;
  margin-top: 20px
}

.flightpayinfo>div {
  padding: 16px 20px;
  border-bottom: 1px solid #DDDDDD
}

.flightpayinfo>div:last-child {
  border: 0
}

.flightpayinfo>.flex {
  font-size: 18px;
  font-weight: 600;
  flex-wrap: wrap;
  align-items: center;
}

.flightInfo span {
  position: relative;
  padding: 0 0 0 23px;
  color: #707070;
  font-size: 14px;
  font-weight: 400
}

.flightInfo span:before {
  content: "";
  background: url('../../assets/images/flight-vector-grey.svg') no-repeat center center;
  width: 18px;
  height: 18px;
  display: inline-block;
  position: absolute;
  left: 0;
  top: 7px
}

.flightInfo {
  width: 100%;
  gap: 0 20px;
  padding: 0 0 0 86px
}

.flightpayinfo img.userIcon {
  width: 46px;
  margin-right: 20px;
}

.flightpayinfo .flex:nth-child(2)>div>span,
.flightpayinfo .flex:nth-child(1)>span {
  padding: 0 10px;
}

.flightpayinfo>.flex:last-child {
  display: flex;
  justify-content: space-between;
}

.flightpayinfo>.flex:last-child span>span {
  display: block;
  font-size: 12px;
  font-weight: 400
}

.flightpayinfo a {
  color: #000;
  text-decoration: none;
}

.flightpayinfo a:hover {
  text-decoration: underline;
  color: #DD5428
}

.paymentDetails .amountDetail {
  background: #fff;
  margin-top: 0
}

.sectionBuyPlan {
  margin-top: 20px;
}

.sectionBuyPlan .paymentOptionTab {
  background: #fff
}


.contactBanner {
  padding: 40px 40px 0;
  margin-top: 72px;
}

.contactBanner .container {
  max-width: 1230px;
}

.contactBanner .banner {
  border-radius: 20px;
  height: 466px
}

.contactBanner>div>div>div {
  justify-content: space-between;
}

.contactBanner>div>div>div>div {
  max-width: 70%;
  padding: 65px 0 30px
}

.contactBanner img {
  width: 158px;
  margin-top: -106px
}

.contactSec {
  max-width: 1230px;
  margin: -200px auto 60px;
  padding: 0 15px;
  gap: 0 15px
}

.contactLft {
  width: calc(60% - 8px);
  background: #fff;
  box-shadow: 0px 4px 14px 0px #0000000A;
  padding: 30px;
  border-radius: 10px
}

.contactRgt {
  width: calc(40% - 8px);
  background: #fff;
  box-shadow: 0px 4px 14px 0px #0000000A;
  padding: 30px;
  border-radius: 10px
}

.contactForm {
  gap: 10px 15px;
  flex-wrap: wrap;
}

.contactForm>div {
  width: calc(50% - 8px)
}

.contactForm label {
    font-size: 14px;
    font-weight: 600;
    color: #000000;
}

.contactForm>div:nth-last-child(2),
.contactForm .btnContainer {
  width: 100%
}

.contactForm textarea {
  height: 100px;
}

.contactRgt h6:before {
  content: "";
  width: 20px;
  height: 20px;
  position: absolute;
  left: 0;
  top: 19px
}

.contactRgt>div {
  padding: 15px 0 15px 27px;
  position: relative;
  border-bottom: 1px solid #D3D3D3
}

.contactRgt>div:last-child {
  border: 0
}

.officeAddress>p {
  margin-bottom: 0
}

.officeAddress h6:before,
.businessHours h6:before {
  background: url('../../assets/images/address-icon.svg') no-repeat center center;
}

.phoneDetails h6:before {
  background: url('../../assets/images/phone-icon.svg') no-repeat center center;
}

.emailDetails h6:before {
  background: url('../../assets/images/email-icon.svg') no-repeat center center;
}

.contactRgt .flex>span {
  width: 50%
}

.contactRgt a {
  color: #000;
  text-decoration: none;
}

.contactRgt a:hover {
  color: #DD5428;
  text-decoration: underline;
}

.trustedBanner {
  background: linear-gradient(90deg, #000000 0%, #611700 100%);
  height: 434px;
  position: relative;
  display: flex;
  align-items: center;
}

.trustedBanner:before {
  content: "";
  background: url('../../assets/images/trusted-bg.svg') no-repeat left center;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

.trustedBanner>div {
  max-width: 820px;
  padding: 0 20px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  color: #fff;
  display: flex;
  gap: 0 100px;
}

.downloadApp {
  gap: 0 10px;
  background: #fff;
  border-radius: 100px;
  max-width: 160px;
  color: #000;
  padding: 8px 20px
}

.downloadApp img {
  width: 11px;
}

.reviewBlock.hiddenBlock {
  margin-bottom: 20px;
}

.hiddenBlock .reivewBody,
.hideElm {
  display: none;
}

.hiddenBlock .reviewHeader {
  border: 0
}

.hiddenBlock .reivewBody {
  border-top: 1px solid #D3D3D3
}

.hiddenBlock .reivewBody.checkboxAgree {
  border: 0
}

.reviewBlock.hideBorder {
  border: 0
}

.active .reviewBlock.hideBorder {
  border: 1px solid #D3D3D3
}

.blogBanner {
  margin-top: 72px;
}

.blogBanner .container {
  max-width: 1200px;
}

.blogBanner .flex {
  justify-content: space-between;
  gap: 0 80px;
  padding: 60px 0;
}

.blogBanner .flex>div {
  width: 50%
}

.blogBanner .bannerText-h1,
.blogDetailBanner .bannerText-h1 {
  font-size: 52px;
}

.blogBanner .bannerText-h6 {
  font-size: 24px;
  padding-top: 20px
}

.blogContainer {
  padding: 80px 15px 20px;
}

.blogBannersec {
  position: relative;
  overflow: hidden;
}

.blogBannersec .box:before {
  padding-top: 34%
}

.blogBannersec img {
  border-radius: 20px;
}

.blogOverlay {
  background: linear-gradient(172.21deg, rgba(87, 87, 87, 0) 5.35%, #000000 93.33%);
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: flex-end;
  color: #fff;
  padding: 60px;
  font-size: 22px;
  border-radius: 20px;
}

.blogtag {
  border: 1px solid #C0C0C0;
  background-color: #BE2E00;
  padding: 8px 30px;
  font-size: 20px;
  font-weight: 500;
  border-radius: 50px;
  color: #fff;
}

.blogOverlay h4 {
  font-size: 40px;
  font-weight: bold;
  margin: 20px 0px;
  max-width: 60%;
}

.blogOverlay-content p {
  font-size: 16px;
  line-height: 29px;
  max-width: 50%;
}

a.readMoreLink {
  color: #fff;
  font-size: 18px;
  font-weight: 600;
}

.latestBlog {
  padding: 50px 0px 50px 0px;
}

.latestBlog h2 {
  font-weight: 600
}

.blogList {
  gap: 30px 20px;
  flex-wrap: wrap;
  padding: 30px 0px 0px 0px;
}

.blogList>a {
  border: 0px;
  box-shadow: 0px 2px 12px 0px #0000001A;
  padding: 0px;
  border-radius: 16px;
  display: flex;
  width: calc(50% - 10px);
  align-items: center;
  gap: 0 20px;
  text-decoration: none;
}

span.blogImg {
  width: 200px;
  flex: 0 0 auto;
}

.blogList img {
  width: 200px;
}

.blogList span.blogDate {
  color: #000;
  line-height: normal;
}

.box {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
}



.box img {
  object-fit: cover;
  object-position: center center;
  font-family: "object-fit: cover;object-position: center center";
  height: 100% !important;
  transition: all 0.3s ease;
}

.blogList .imageHolder img {
  height: 200px !important;
  object-fit: cover;
  height: 200px !important;
}

.blogInfo .blogtag {
  font-size: 12px;
  font-weight: 600
}

.blogInfo h4 {
  font-size: 20px;
  font-weight: 600;
  color: #000;
  margin: 12px 0px;
  max-width: 80%;
  line-height: 1.4;
}


.blogDetailBanner {
  margin-top: 72px;
  padding: 40px 40px 0
}

.blogDetailBanner .banner {
  border-radius: 20px;
  text-align: center;
}

.blogDetailBanner .bannerText-h1 {
  padding: 68px 15px 100px;
  max-width: 800px;
  margin: 0 auto;
}

.blogDetailContainer {
  max-width: 1200px;
  margin: -50px auto 60px;
}

.blogDetailImg {
  border: 10px solid #FFFFFF;
  border-radius: 20px;
  background: #fff
}

.blogDetailImg img {
  width: 100%;
  border-radius: 20px
}

.authorImg {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
  display: block;
}

.blogAuthor {
  border-bottom: 1px solid #848484;
  padding: 30px 0;
  justify-content: space-between;
}

.authorSocial {
  max-width: 330px;
  flex-wrap: wrap;
  gap: 0 20px
}

.authorImg img {
  height: 80px;
  object-fit: cover;
}

.authorSocial>div>span:nth-child(1) {
  font-size: 24px;
  font-weight: 700
}

.authorSocial>div>span:nth-child(2) {
  font-size: 22px;
  display: block;
}

.social>a {
  margin-right: 5px;
}

.social>a:last-child {
  margin-right: 0
}

.social img {
  width: 46px;
}

.blogDes {
  padding: 40px 0;
  font-size: 20px;
  line-height: 41px;
  overflow: hidden;
}

.blogDes h5 {
  background: linear-gradient(90deg, rgba(221, 84, 40, 0.12) 0%, rgba(119, 45, 22, 0.12) 100%);
  padding: 20px 30px;
  font-size: 22px;
  font-weight: 500;
  margin: 30px 0 20px
}

.blogDes img {
  max-width: 432px;
  border-radius: 20px;
  width: 100%
}

.alignRgt {
  float: right;
  margin-left: 20px;
  margin-top: 20px;
}

.alignLft {
  float: left;
  margin-right: 20px;
  margin-top: 20px;
}

.ourBlog {
  flex-wrap: wrap;
  gap: 20px;
  padding: 70px 0 0;
  font-size: 20px;
}

.ourBlog h2 {
  width: 100%
}

.ourBlog>div {
  width: calc(33.33% - 14px);
  border: 1px solid #DD5428;
  border-radius: 20px;
  padding: 12px;
}

.ourBlog>div:hover img {
  transform: scale(1.1);
}

.ourBlog img {
  border-radius: 10px;
  transition: all 0.3s ease
}

.ourBlog h4 {
  font-weight: 600
}

.ourBlog>div>a {
  color: #000;
  text-decoration: none;
}

.ourBlog>div>a>div:first-child {
  overflow: hidden;
  margin-bottom: 20px;
}

.ourBlog>div>a:hover h4 {
  color: #DD5428
}

#economy {
  display: block;
}

.fareSliderBlock {
  display: none;
}

.searchNews {
  padding: 100px 15px;
  max-width: 760px;
  margin: 0 auto;
}

.searchNews>div {
  position: relative;
}

.searchNews input {
  border-radius: 40px;
  font-size: 20px;
  padding: 16px 70px 16px 30px
}

.searchIcon {
  background: url('../../assets/images/search-icon.png') no-repeat center center #BE2E00;
  background-size: 25px auto;
  position: absolute;
  right: 10px;
  top: 4px;
  width: 55px;
  height: 55px;
  border-radius: 50%;
  cursor: pointer;
}

.hashTags {
  font-size: 18px;
  font-weight: 600;
  line-height: 41px;
  gap: 0 20px;
  justify-content: center;
  padding: 14px 0 0
}

.newsUpdatesCont,
.newsOurBlog {
  max-width: 1230px;
  padding: 45px 15px;
  margin: 0 auto;
}

.newsUpdate {
  text-align: center;
}

.newsUpdate ul li {
  display: inline-block;
  font-size: 24px;
  font-weight: 500;
  padding: 4px 35px;
  width: 230px;
  border-radius: 50px;
  line-height: 41px;
  cursor: pointer;
}

.newsUpdate ul li.active {
  background: linear-gradient(180.53deg, #DD5428 0.45%, #772D16 225.94%);
  color: #fff;
  font-size: 16px;
  font-weight: 700
}

.newsUpdatecontent {
  padding: 50px 0 0
}

.newsUpdatecontent>div>div {
  gap: 60px;
}

.newsUpdatecontent>div>div>div:first-child {
  width: 60%
}

.newsUpdatecontent>div>div>div:last-child {
  width: 40%
}

.newsUpdatecontent img {
  border-radius: 10px;
}

.newsLft h2 {
  font-size: 34px;
  font-weight: 600
}

.imgBlockDetail {
  padding: 35px 0;
  border-bottom: 1px solid #DDD;
  color: #848484;
  font-size: 16px;
  line-height: 25px;
}

.imgBlockDetail>div:nth-child(2) {
  padding: 14px 0
}

.imgBlockDetail .box:before {
  padding-top: 50%
}

.imgBlockDetail img {
  width: 100%
}

.imgBlockDetail h4 {
  font-size: 22px;
  color: #000;
  line-height: 48px
}

.imgBlockDetail .authorImg {
  width: 46px;
  height: 46px;
}

.imgBlockDetail .authorImg img {
  height: 46px;
}

.imgBlockDetail .authorSocial>div>span:nth-child(1) {
  font-size: 18px;
  color: #000
}

.imgBlockDetail .authorSocial>div>span:nth-child(2) {
  color: #747373;
  font-size: 14px;
}

.latestNews {
  padding: 15px 0 0
}

.latestNews>.flex {
  gap: 25px;
  border-bottom: 1px solid #DDD;
  padding: 20px 0
}

.newsImg {
  width: 105px;
}

.newsImg .box:before {
  padding-top: 100%
}

.latestNews .authorImg {
  width: 34px;
  height: 34px;
}

.latestNews .authorSocial {
  gap: 0 10px;
  line-height: 18px
}

.latestNews .authorImg img {
  height: 34px;
}

.latestNews .authorSocial>div>span:nth-child(1) {
  font-size: 14px;
  color: #000
}

.latestNews .authorSocial>div>span:nth-child(2) {
  color: #747373;
  font-size: 12px;
}

.aboutBanner {
  margin-top: 72px;
  overflow: hidden;
}


.aboutBanner .banner {
  background: linear-gradient(181.08deg, rgba(255, 255, 255, 0.5) 22.55%, rgba(221, 84, 40, 0.5) 173.76%);
  color: #000;
  padding: 45px 0 0
}

.aboutBanner .flex {
  justify-content: space-between;
  align-items: flex-end;
  font-size: 16px;
  line-height: 31px;
}

.aboutBanner .flex>div:first-child {
  max-width: 486px;
  padding: 0 0 40px;
}

.aboutBanner .flex>div:nth-child(2) {
  max-width: 390px;
  background: linear-gradient(221.99deg, rgba(190, 46, 0, 0.3) 1.89%, #A23A19 98.9%);
  padding: 33px 54px 0;
  border-radius: 16px 16px 0 0;
  height: 400px;
}

.aboutBanner img {
  width: 281px;
}

.aboutBanner h2 {
  font-size: 52px;
  line-height: 70px;
}

.aboutBanner h2 span {
  color: #BE2E00;
  display: block;
}

.reviewBtn.learnHow {
  background: transparent;
  border: 1px solid #BE2E00;
  color: #BE2E00;
  margin-left: 13px;
}

.reviewBtn.learnHow:hover {
  background: linear-gradient(180deg, #FF835C 0%, #DD5428 100%);
  border-color: #FF835C;
  opacity: 1
}

.learnHow svg {
  width: 20px;
  height: 20px;
  display: inline-block;
  vertical-align: sub;
  margin-right: 8px
}

.reviewBtn.learnHow:hover svg path {
  fill: #fff
}

.aboutShortContent {
  padding: 80px 0;
  text-align: center;
  font-size: 24px;
  line-height: 50px;
  color: #B3B3B3;
  font-weight: 400;
}

.aboutShortContent h2 {
  font-size: 24px;
  color: #000;
  font-weight: 400;
}

.abouteR,
.ourTeam {
  background: linear-gradient(90deg, #000000 0%, #611700 100%);
  color: #fff;
  padding: 72px 0;
  font-size: 16px;
  line-height: 31px
}

.aboutTag,
.chooseTag,
.teamTag,
.supportTag,
.faqTag {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  color: #f58220;
  margin-bottom: 15px;
}

.abouteR h2,
.whyChooseUs h2 {
  font-size: 36px;
}

.ourMissionBlock {
  background: #DD54281A;
  border: 1px solid #FFFFFF66;
  border-radius: 10px
}

.ourMissionBlock>div {
  padding: 30px;
}

.missionHeader {
  border-bottom: 1px solid #FFFFFF47;
}

.missionHeader>h4 {
  font-size: 26px;
}

.missionHeader>h4:before {
  content: "";
  background: url('../../assets/images/mission-icon.svg') no-repeat center center;
  width: 32px;
  height: 32px;
  display: inline-block;
  vertical-align: middle;
  margin-right: 20px;
}

.missionHeader>p,
.chooseBlock>div>div>p {
  margin: 0
}

.missionBody ul {
  margin-top: 20px;
}

.missionBody ul li {
  position: relative;
  padding: 0 0 10px 30px;
}

.missionBody ul li:before {
  content: "";
  background: url('../../assets/images/tick-icon.svg') no-repeat center center;
  width: 18px;
  height: 18px;
  position: absolute;
  left: 0;
  top: 7px
}

.whyChooseUs,
.helpSupport {
  padding: 90px 0;
  text-align: center;
  font-size: 16px;
  line-height: 31px
}

.chooseTag {
  border: 1px solid;
  border-image-source: linear-gradient(0deg, #BE2E00, #BE2E00),
    linear-gradient(0deg, rgba(0, 0, 0, 0.09), rgba(0, 0, 0, 0.09));
  color: #BE2E00;
}

.whyChooseUs>.container>p,
.ourTeam>.container>p {
  max-width: 780px;
  margin: 0 auto;
}

.chooseBlock {
  text-align: left;
  padding: 52px 0 0
}

.chooseBlock.flex {
  gap: 16px;
}

.chooseBlock>div {
  border-radius: 18px;
  padding: 40px 25px 25px;
  border: 1px solid #BE2E0036;
}

.chooseBlock>div:first-child {
  background: linear-gradient(180deg, #FFF1E3 0%, #FFFFFF 100%);
}

.chooseBlock>div:nth-child(2) {
  background: linear-gradient(180deg, #D7E9FF 0%, #FFFFFF 100%);
}

.chooseBlock>div:nth-child(3) {
  background: linear-gradient(180deg, #FFF1E3 0%, #FFFFFF 100%);
}

.choosIcon {
  margin-bottom: 18px;
}

.ourTeam {
  text-align: center;
}

.supportBlock {
  text-align: left;
  background: linear-gradient(180deg, #FFF1E3 0%, #FFFFFF 100%);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.helpSupport>div>.flex {
  gap: 16px
}

.helpSupport>div>.flex>div {
  padding: 60px 60px;
  border-radius: 20px 20px;
  width: calc(50% - 8px)
}

.supportTag {
  background: #DD5428;
  color: #fff
}

.helpSupport h2 {
  color: #BE2E00
}

.helpSupport h2>span {
  display: block;
  font-weight: 400;
  color: #000
}

.customerCare {
  border: 2px solid #E6E6E6;
  border-radius: 16px;
  padding: 30px 30px;
  margin-top: 20px;
  background: #FFF;
  font-size: 14px;
  line-height: 26px;
  color: #7C7C7C
}

.customerCare .font18 {
  font-weight: 500
}

.customerCare h6:before {
  content: "";
  background: url('../../assets/images/customer-care.svg') no-repeat center center;
  width: 30px;
  height: 30px;
  display: inline-block;
  vertical-align: middle;
  margin-right: 10px
}

.customerCare a {
  color: #7C7C7C;
  text-decoration: none;
}

.customerCare a:hover {
  color: #DD5428;
  text-decoration: underline;
}

.customerCare .btn-primary {
  width: 100%
}

.faqBlock {
  background: linear-gradient(180deg, #D7E9FF 0%, #FFFFFF 100%);
  text-align: left;
  color: #747474
}

.faqTag {
  background: #084591;
  color: #fff
}

.faqBlock li {
  background: #fff;
  border: 1px solid #DEDEDE;
  padding: 14px 18px;
  margin-bottom: 20px;
  border-radius: 10px;
  position: relative;
  cursor: pointer;
}

.faqBlock li:after {
  content: "";
  background: url('../../assets/images/round-plus.svg') no-repeat center center;
  width: 27px;
  height: 27px;
  position: absolute;
  right: 20px;
  top: 18px
}

.faqBlock li>span {
  font-weight: 500;
  color: #000
}

.faqBlock ul li .active {
  display: block;
}

.teamSlider {
  padding: 70px 0 0
}

.teamSlider .slick-track {
  display: flex;
  gap: 50px
}

.teamCard {
  width: 160px;
  height: 300px;
  max-width: 160px;
  ;
  border-radius: 100px;
  overflow: hidden;
  background: #fff;
  transition: height 0.4s ease;
  position: relative;
}

/* EVERY EVEN CARD TALL */
.teamCard:nth-child(even) {
  height: 380px;
}

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

/* slick fix */
.teamSlider .slick-slide {
  display: flex !important;
  justify-content: center;
}

.teamOverlay {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  padding: 30px 20px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  font-size: 18px;
  font-weight: 600;
  line-height: 25px;
  opacity: 0;
  transition: all 0.3s ease;
}

.teamOverlay>span {
  display: block;
}

.teamOverlay>span:nth-child(2) {
  font-weight: 400;
  font-size: 16px;
}

.teamCard:hover .teamOverlay {
  opacity: 1
}

/* Train booking */
.pnrSearch {
  gap: 15px
}

.pnrSearch label {
  background: #E8E8E8;
  border-radius: 8px;
  padding: 7px 14px;
  width: calc(100% - 198px);
}

.pnrSearch .form-input {
  background: transparent;
  padding: 0;
  border: 0
}

.pnrSearch button {
  width: 198px;
}

.trainTabSec .tabContainer .tabDetails {
  padding: 0
}

.filterCount {
  position: absolute;
  left: 0;
  top: 7px;
  background: #C83303;
  color: #fff;
  font-size: 8px;
  font-weight: 700;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  text-align: center;
  line-height: 14px
}

.trainFilter .filterBlock ul li {
  padding-left: 20px;
}

.traincardHeader {
  width: 100%;
  padding: 0 30px 20px;
  gap: 15px;
  border-bottom: 1px solid #D3D3D3
}

.trainNamenumber {
  gap: 10px
}

.trainNamenumber:before {
  content: "";
  background: url('../../assets/images/train-route-icon.svg') no-repeat center center;
  width: 20px;
  height: 20px;
  display: inline-block;
  margin-top: 4px
}

.trainDay {
  padding-left: 15px;
  border-left: 1px solid #D5D5D5;
}

.trainDay:before {
  content: "";
  background: url('../../assets/images/train-clock.svg') no-repeat center center;
  width: 20px;
  height: 20px;
  display: inline-block;
  margin-top: 6px;
  vertical-align: text-bottom
}

.trainDay>span {
  display: inline-block;
  padding-left: 10px;
}

.trainDay>span.active {
  color: #BE2E00;
  font-weight: 600
}

.trainList .flightTime,
.trainReviewBooking .flightTime {
  width: 100%;
  gap: 0 100px
}

.trainList .duration>span:first-child:after {
  background: url('../../assets/images/train-between-icon.svg') no-repeat center center;
  width: 92px;
  height: 22px;
}

.trainDetailLink .tabDetails .active {
  display: block;
}

.trainDetailLink {
  padding: 20px 0 20px 18px
}

.timeDataBlock {
  border: 1px solid #D3D3D3;
  background: #F4F4F4;
  border-radius: 8px;
  padding: 15px 20px 10px;
  position: relative;
  margin-right: 15px;
  line-height: 25px;
  width: 211px;
  cursor: pointer;
}

.cancelTag {
  background: #FFE9E2;
  border-radius: 40px;
  padding: 6px 10px;
  line-height: 10px;
  font-size: 10px;
  font-weight: 600;
  color: #BE2E00;
  position: absolute;
  left: 20px;
  top: -10px
}

.dateSlider .slick-track {
  padding: 10px 0 0
}

.timeDataBlock .flex {
  justify-content: space-between;
  font-weight: 600
}

.availble {
  font-size: 12px;
  font-weight: 500;
  color: #222
}

.avail {
  color: #04A85B
}

.waiting {
  color: #BE2E00
}

.dateSlider .slick-arrow {
  width: 60px;
  height: 60px;
  z-index: 1
}

.dateSlider .slick-arrow:before,
.dateSlider .slick-disabled {
  display: none !important;
}

.dateSlider .slick-next {
  background: url('../../assets/images/slider-right-arrow.svg') no-repeat center center;
  right: 0
}

.dateSlider .slick-prev {
  background: url('../../assets/images/slider-right-arrow.svg') no-repeat center center;
  transform: rotate(-180deg) translateY(30px);
}

.trainReviewBooking .container>h5 {
  color: #fff;
  margin: 0 0 10px;
  font-weight: 500
}

.trainReviewBooking .trainDetailLink {
  padding: 0 20px
}

.trainList .time>span,
.trainReviewBooking .time>span {
  text-align: left;
}

.boarDingForm {
  padding: 20px 0;
}

.trainReviewBooking .form-select {
  background-color: #F4F4F4;
  max-width: 80%;
  background: url('../../assets/images/drodpown-change.svg') no-repeat right 0.75rem center #F4F4F4;
  margin-top: 5px;
}

.trainPassanger .reviewHeader,
.irctsDetail .reviewHeader {
  justify-content: space-between;
}

.addtrainPass {
  color: #222;
  font-size: 16px;
  cursor: pointer;
}

.addtrainPass svg {
  display: inline-block;
  vertical-align: middle;
  margin-right: 3px
}

.irctsDetail .reviewHeader>a {
  color: #009216;
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
}

.irctsDetail label {
  padding-bottom: 10px;
  font-weight: 500
}

.irctsDetail label>span {
  display: block;
  font-size: 12px;
  line-height: 14px;
  color: #BE2E00
}

.irctsDetail .form-select {
  margin-bottom: 20px;
}

.irctsDetail p {
  max-width: 80%
}

.irctsDetail .btn-primary {
  background: none;
  border: 0;
  font-size: 16px;
  font-weight: 500;
  color: #B3B3B4
}

.contactInfo .flex {
  gap: 20px;
  padding-bottom: 15px
}

.contactInfo .flex>div {
  width: calc(50% - 10px)
}

.travelInsBlock h5 {
  margin-bottom: 10px
}

.travelInsBlock .refundBooking {
  border: 1px solid #848484;
  background: #fff;
  color: #848484;
  margin-right: 20px;
  padding: 11px 20px;
  text-align: left;
}

.travelInsBlock .refundBooking:hover {
  color: #848484 !important
}

.travelInsBlock .refundBooking .checkBoxParent {
  margin-right: 10px;
}

.travelInsBlock .refundBooking .form-check-input {
  border-color: #848484;
  background-color: #fff;
  border-width: 3px;
}

.travelInsBlock .refundBooking:has(input:checked) .form-check-input {
  background-color: #FFF;
  border-color: #fff;
}

.travelInsBlock .refundBooking:has(input:checked) {
  color: #fff !important
}

.travelInsBlock .refundBooking:has(input:checked) .form-check-input:checked[type=radio] {
  --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23BE2E00' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e")
}

.insuranceDetil {
  padding: 10px 0 0;
  border-bottom: 1px solid #84848469
}

.radioforupgrade {
  padding: 20px 0 0
}

.radioforupgrade>label {
  display: block;
  padding: 0 0 15px;
  font-weight: 500;
}

.radioforupgrade>label .checkBoxParent {
  padding-right: 10px;
  line-height: 20px
}

.radioforupgrade>label:has(input:checked) {
  color: #DD5428 !important;
}

.amountBtn {
  justify-content: space-between;
  padding: 40px 0
}

.amountBtn h5>span {
  display: block;
  color: #848484;
  font-size: 14px;
  font-weight: 400
}

.outerTag {
  padding: 20px 0 0
}

[data-id="#trainPayment"] .depDestBlock {
  font-size: 14px;
  font-weight: 400;
  gap: 30px
}

.depDestBlock>div,
.depDestBlock>div>div {
  position: relative;
  padding-left: 66px;
  line-height: 24px
}

.depDestBlock span {
  font-size: 18px;
  font-weight: 600;
  display: block;
  padding: 0 !important
}

.departure {
  width: 260px;
}

.departure:before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  background: url('../../assets/images/calender-icon.svg') no-repeat center center;
  width: 46px;
  height: 46px;
}

.depDestBlock>.flex {
  justify-content: space-between;
  width: calc(100% - 290px)
}

.boardingSta:before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  background: url('../../assets/images/location-black.svg') no-repeat center center;
  background-size: 24px auto;
  width: 46px;
  height: 46px;
  border: 1px solid #D5D5D5;
  border-radius: 8px;
}

.divider {
  width: 80%;
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  background: #CACACA;
  width: 40%;
  height: 1px
}

.divider:after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 1px solid #CACACA;
  border-bottom: 1px solid #CACACA;
  transform: rotate(-45deg);
  position: absolute;
  right: 0;
  top: -3px;
}

.boardingSta {
  width: 220px
}

.depDestBlock .divider {
  position: absolute;
  top: 50%
}

.scanner {
  background: #ffffff;
}

.popupHolder {
  background: #fff;
  max-width: 30%;
  border-radius: 16px;
  overflow: hidden;
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  margin: 0 auto;
  left: 0;
  right: 0;
  z-index: 1000 !important;
  display: none;
}

.popupHolder label {
  font-size: 14px;
}

.popheader {
  padding: 20px;
  border-bottom: 1px solid #E2E2E2;
  justify-content: space-between;
}

.popheader h5 {
  margin: 0
}

.popBody {
  padding: 20px;
}

.addPassForm {
  gap: 20px;
  flex-wrap: wrap;
}

.addPassForm .form-input {
  background: #fff
}

.addPassForm>div {
  width: calc(33.33% - 14px);
}

.addPassForm>div.btnContainer {
  width: 100%;
  text-align: right;
}

.closePop {
  cursor: pointer;
}

.addPassForm>div>label {
  padding-bottom: 5px;
}

/* Train booking */

.completeKyc {
  background: #FFF4C5;
  padding: 20px 30px;
  font-weight: 500;
  border-radius: 12px;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  width: 75%;
}

.completeKyc strong {
  font-size: 24px;
  line-height: normal;
}

.completeKyc>span:before {
  content: "";
  background: url('../../assets/images/info-icon-red.svg') no-repeat center center;
  width: 24px;
  height: 24px;
  display: inline-block;
  vertical-align: middle;
  margin-right: 5px
}

.completeKyc>a:hover {
  text-decoration: none;
}

.profileSec {
  padding: 34px 0;
  gap: 60px;
  align-items: flex-start
}

body:has(.profileLft) {
    overflow: clip;
}
.profileLft {
    border: 1px solid #DDD;
    border-radius: 12px;
    padding: 20px;
    position: sticky;
    top: 90px;
}

.profileLft li {
  margin-bottom: 10px
}

.profileBlock {
  gap: 0 20px;
  align-items: center;
  flex: 0 0 auto;
  padding: 30px;
}

.firstLetter {
  width: 80px;
  height: 80px;
  line-height: 80px;
  border-radius: 50%;
  background: #DD5428;
  color: #fff;
  font-size: 30px;
  font-weight: 600;
  text-align: center;
}

.profileBlock>.font18 {
  line-height: 22px
}

.profileBlock>.font18>span {
  display: block;
  font-size: 14px;
}

.profileBlock>.font18>span:first-child {
  font-weight: 400;
  font-size: 12px;
  color: #818181
}

.profileBlock>.font18>span:nth-child(2) {
  color: #DD5428;
  cursor: pointer;
}

.profileForm {
  padding: 25px 0 0;
  gap: 20px;
  flex-wrap: wrap;
}

.profileForm>div {
  width: calc(50% - 10px);
}

.profileForm>div.streetAdd,
.profileForm>div.btnContainer {
  width: 100%;
}

.profileForm label {
  font-size: 16px;
  font-weight: 500;
  padding-bottom: 5px
}

.profileForm .form-input {
  background-color: #fff
}

.streetAdd textarea {
  height: 80px
}

.profileForm>div.btnContainer {
  text-align: right;
}

.profileForm button {
  max-width: 170px
}

.deleteAccount {
  background: linear-gradient(90deg, rgba(255, 217, 217, 0.3) 0%, rgba(255, 222, 222, 0.3) 100%);
  padding: 20px 30px;
  border: 1px solid #FF0000;
  border-radius: 12px
}

.deleteAccount h6 {
  color: #FF0000
}

.deleteAccount button {
  background: #FF0000
}

.referTitleBtn {
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #84848469;
  padding-bottom: 20px;
}

.referTitleBtn p {
  margin-bottom: 0
}

.totalEarn {
  background: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 131, 92, 0.5) 185.51%);
  border-radius: 16px;
  margin: 40px 0;
  padding: 30px 0 0 30px;
  clear: both;
  overflow: hidden;
  line-height: 20px;
}

.earnCount {
  font-size: 84px;
  font-weight: 800;
  display: block;
  line-height: 100px;
  color: #8B2D10
}

.totalEarn img {
  max-height: 220px;
  float: right;
  margin-bottom: -10px
}

.cointSummary .flex {
  background: linear-gradient(90deg, rgba(249, 160, 130, 0.3) 0%, rgba(255, 203, 186, 0.3) 100%);
  border-radius: 16px;
  padding: 20px 30px;
  font-size: 18px;
  line-height: 40px;
  gap: 50px
}

.cointSummary .flex span {
  font-size: 26px;
  font-weight: 700;
  display: block;
  line-height: 50px
}

.referFriend {
  padding: 30px 0 0
}

.referralCode {
  padding: 20px 0 80px
}

.referralCode h5 {
  font-weight: 600
}

.referralCode .flex {
  padding: 15px 0 0;
  align-items: center;
  gap: 16px
}

.referralCode .flex>div {
  position: relative;
}

.referralCode .form-input {
  border: 0.6px dashed #7C7C7C;
  background: #fff;
  width: 390px;
  padding-right: 105px
}

.copyCode {
  position: absolute;
  right: 20px;
  top: 7px;
  cursor: pointer;
}

.referBtn svg {
  margin-left: -10px;
  display: inline-block;
  vertical-align: middle;
  margin-right: 8px;
}

.refferinvSec {
  gap: 60px;
  border-bottom: 1px solid #84848469;
  padding-bottom: 20px;
}

.refferinvSec h6 {
  margin-bottom: 20px
}

.refferinvSec a {
  background-color: #084591;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  display: inline-block;
  line-height: 60px;
  text-align: center;
  margin-right: 18px
}

.refferinvSec a:hover {
  background: linear-gradient(180deg, #FF835C 0%, #DD5428 100%)
}

.refferinvSec a:last-child {
  margin: 0
}

.moreDetail {
  padding: 30px 0
}

.referExample {
  max-width: 390px
}

.transactionsList {
  border: 1px solid #D9D9D9;
  border-radius: 16px;
  padding: 25px 34px;
}

.transTable {
  width: 100%
}

.transTable-header,
.transTable-row {
  display: grid;
  grid-template-columns: 2.4fr 1.8fr 1.5fr 1.4fr 1.2fr .8fr;
  align-items: center;
  padding-bottom: 30px
}

.transTable-row {}

.transTable-header {
  font-size: 13px;
  color: #797979;
  text-transform: uppercase;
  font-weight: 600
}

.details {
  display: flex;
  align-items: center;
  gap: 12px
}

.transTable-row .title {
  font-weight: 600;
  line-height: 16px
}

.transTable-row .sub {
  font-size: 10px;
  color: #292D32
}

.transTable-row .time {
  font-size: 12px;
  color: #848484
}

.transTable-row .status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 18px;
  border-radius: 50px;
  background: #1193001F;
  color: #119300;
  font-size: 12px;
  margin: 0;
  font-weight: 500
}

.dot {
  border-radius: 50%;
  display: inline-block;
  font-size: 14px;
}

.amount {
  font-weight: 600
}

.action {
  color: #DD5428;
  font-weight: 500;
  cursor: pointer
}

.action:hover {
  text-decoration: underline
}

.transactionsFilter {
  gap: 14px;
  padding: 25px 0
}

.transactionsFilter .form-input {
  background: #fff
}

.transactionsFilter>div:first-child {
  width: calc(33.33% - 7px);
  max-width: 100%
}

.transactionsFilter>div {
  width: calc(22.22% - 7px);
  max-width: 150px
}

.transactionsFilter>div:last-child {
  width: 8.34%
}

.offersBanner {
  border-radius: 16px;
  overflow: hidden;
}

.offersSec {
  flex-wrap: wrap;
  gap: 30px
}

.offerBlock {
  border: 1px solid #FFC9B8;
  border-radius: 16px;
  padding: 17px 0 27px;
  width: calc(50% - 15px);
  transition: all 0.3s ease;
}


.offershead {
  padding: 0 30px 30px 0;
  justify-content: space-between;
}

.offerStrip {
  background: #DD5428;
  border-top-right-radius: 40px;
  border-bottom-right-radius: 40px;
  padding: 5px 20px;
  color: #fff;
}

.offershead>span:not(.offerStrip) {
  font-size: 10px;
  line-height: 18px
}

.offershead>span>span {
  display: block;
  font-size: 16px;
  font-weight: 600;
  color: #000
}

.offerbody {
  padding: 0 30px;
  color: #000;
  font-size: 18px;
}

.offerbody>.flex {
  gap: 20px
}

.offerFooter {
  padding: 30px 30px 0;
}

.offerFooter button {
  width: 100%;
  border: 1px solid #fff
}

.viewOfferPop {
  max-width: 920px;
}

.viewOfferPop .closePop {
  position: absolute;
  right: 20px;
  top: 10px
}

.viewOfferPop .closePop img {
  width: 15px;
}

.viewOfferPop .popBody {
  padding: 40px
}

.offerDetail {
  gap: 40px;
}

.offerDetail h5 {
  color: #DD5428
}

.offerDetail>div {
  width: calc(50% - 20px);
}

.offerDetail img {
  width: 100%
}

.offerDetail .box:before {
  padding-top: 100%
}

.settingsTab {
  gap: 16px;
  padding: 30px 0 50px
}

.settingsTab>a {
  border: 1px solid #E5E5E5;
  border-radius: 4px;
  font-weight: 500;
  color: #000;
  padding: 4px 20px;
  text-decoration: none;
}

.settingsTab>a:hover,
.settingsTab>a.active {
  background: #FFE9E2;
  color: #DD5428
}

.notificationBlock {
  border: 1px solid #E9E9E9;
  border-radius: 16px;
  padding: 0 36px
}

.notiSec {
  border-bottom: 1px solid #DADADA;
  padding: 20px 0
}

.notiSec>label {
  justify-content: space-between;
}

.notiSec .customCheckbox-boxonly .form-check-input {
  width: 18px;
  height: 18px;
}

.notificationBlock .notiSec:last-child {
  border: 0
}

/* My Account */


/* How It Works  */
.howitworksBanner {
  background: linear-gradient(360deg, #000000 0%, #300B00 48.21%, #611700 96.42%);
  color: #fff;
  font-size: 16px;
  line-height: 30px;
}

.howitworksBanner h2 span {
  color: #DD5428
}

.howitworksBanner .container {
  justify-content: space-between;
  align-items: center;
}

.howitworksBanner .container>div:first-child {
  max-width: 580px;
}

.howitworksBanner .container>div:last-child {
  max-width: 330px;
  margin-right: 70px;
  position: relative;
}

.rewardEarn {
  position: absolute;
  left: -130px;
  top: 70px;
  background: #FFFFFF;
  box-shadow: 0px 7px 16px 0px #ABABAB1A;
  color: #000;
  font-size: 10px;
  text-align: center;
  border-radius: 16px;
  padding: 14px
}

.rewardBtm {
  left: auto;
  right: -70px;
  bottom: 70px;
  top: auto;
}

.rewardTitle {
  font-size: 14px;
  font-weight: 600;
  color: #DD5428;
  line-height: 10px;
  padding: 10px 0 0
}

.rewardEarn>span {
  display: block;
}

.howitworksCon {
  background: #fff
}

.howitworksCon .container {
  position: relative;
  max-width: 1150px;
  padding: 150px 15px 0;
}

.howitworksCon .bigHead {
  position: absolute;
  left: 0;
  top: -19px
}

.howitworkBlock {
  border-bottom: 1px solid #DD542833;
  padding: 65px 0;
  align-items: center;
  gap: 100px;
  justify-content: space-between;
}

.contentBlock {
  max-width: 500px;
  font-size: 16px;
  line-height: 30px;
}

.contentBlock h3 {
  font-weight: 600
}

.contentBlock h3 span {
  color: #DD5428
}

.contentImg {
  max-width: 390px;
}

/* How It Works  */

/* Homepage Section  */
.payBillsSec,
.payBillBanner,
.propertyTravel,
.homeSection-earn,
.everythingCard,
.simpleFastTrans,
.homeSection-videoSlider,
.homeSection-wearehere,
.homeDownloadsec,
.marqueeStrip {
  background: #fff
}

.payBillsSec .container {
  max-width: 1230px;
  padding: 85px 15px 40px;
}

.payBillHeader {
  text-align: center;
}

.badgeBill {
  border: 1px solid #FFEDD5;
  background: #FFF7ED;
  color: #C2410C;
  font-size: 12px;
  font-weight: 500;
  padding: 4px 12px 7px;
}

.badgeBill:before {
  content: "";
  background: #F97316;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 8px;
}

.payBillHeader h1 {
  font-size: 60px;
  font-weight: 600;
  line-height: 80px;
  margin: 15px 0 80px
}

.payBillHeader h1 span {
  color: #DD5428;
  display: block;
}

.paybillBody {
  gap: 30px
}

.paybillBody>div {
  width: calc(50% - 15px)
}

.billRecharge {
  background: linear-gradient(180deg, #FFD2C4 0%, #FFD8CC 189.32%);
  padding: 30px;
  border-radius: 20px
}

.paybillBody h4 {
  font-weight: 600;
  justify-content: space-between;
  padding-bottom:
}

.billRecharge h4 span {
  background: #DD5428;
  color: #fff;
  font-size: 12px;
  font-weight: 400;
  border-radius: 20px 0 0 20px;
  line-height: 18px;
  padding: 10px 20px;
  margin-right: -30px
}

.rechargeOption {
  padding: 30px 0
}

.whiteBlock {
  flex-wrap: wrap;
  gap: 16px
}

.whiteBlock>div {
  width: calc(25% - 12px);
  background: #fff;
  border-radius: 8px;
  padding: 18px 12px;
  align-content: center;
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.whiteBlock>div:hover {
  background: #DD5428;
  color: #fff
}

.whiteBlock>div>span {
  display: block;
  line-height: 0;
  padding-bottom: 12px;
}

.rechargeNote {
  background: #DD5428;
  color: #fff;
  border-radius: 8px;
  padding: 8px 20px;
  line-height: 24px;
  position: relative;
}

.rechargeNote:before {
  content: "";
  position: absolute;
  top: -10px;
  left: 15px;
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-bottom: 20px solid #DD5428;
}

.UtFinaceblock {
  background: #FFF0EB;
  flex-wrap: wrap;
  padding: 30px;
  border-radius: 20px
}

.UtFinaceblock h4 {
  width: 100%;
  margin-bottom: 0
}

.flexCol {
  display: flex;
  flex-direction: column;
  gap: 30px
}

.payBillBanner {
  padding-bottom: 40px
}

.payBillBanner .container {
  max-width: 1230px;
  border-radius: 20px;
  overflow: hidden;
}

.payBillBannerSlider img {
  width: 100%
}

.propertyTravel .container {
  max-width: 1230px;
  padding: 0 15px;
  gap: 20px;
}

.propertyTravel .container>div {
  width: calc(50% - 10px);
}

.property h4 {
  padding-bottom: 24px
}

.homeSection-earn .container {
  padding: 0 15px;
  max-width: 1230px;
}

.homeSection-earn .row>div {
  padding: 0;
}

.homeSection-earn .row div.col-sm-7 {
  padding-right: 70px;
}

.everythingCard {
  padding: 40px 50px 0;
}

.everythingCard .container {
  background: linear-gradient(180deg, #FFE5DD 0%, #FFF1ED 100%);
  max-width: 100%;
  border-radius: 30px;
  position: relative;
}

.everythingCard .container:before {
  background: url('../../assets/images/everything-card-bg.png') repeat center center;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  content: "";
  background-size: 50% auto;
  z-index: 1
}

.everythingCard .container>.flex {
  max-width: 1230px;
  padding: 100px 15px 0;
  margin: 0 auto;
  gap: 100px;
  align-items: end;
}

.everythingCard .container>.flex>div {
  width: calc(50% - 50px);
  position: relative;
  z-index: 2
}

.everythingCard h5 {
  font-weight: 600
}

.everythingCard h1 {
  -webkit-text-stroke: 1px #BE2E00;
  font-size: 60px;
  font-weight: 700;
  letter-spacing: 4%;
  color: transparent;
  line-height: 80px;
  transform: translateZ(0);
}

.everythingCard h6 {
  color: #BE2E00;
  font-weight: 600;
  margin-bottom: 15px
}

.cardNote {
  flex-wrap: wrap;
  gap: 16px
}

.cardNote>span {
  box-shadow: 0px 198px 55px 0px #A3A3A300;
  background: #fff;
  border-radius: 8px;
  padding: 8px 20px;
  font-weight: 500;
}

.cardNote>span:before {
  content: "";
  background: url('../../assets/images/tick-icon.svg') no-repeat center center;
  width: 14px;
  height: 14px;
  margin-right: 8px;
  display: inline-block;
  vertical-align: middle;
  background-size: 14px auto;
}

.cardBtn {
  padding: 20px 0 40px;
  align-items: center;
}

.cardBtn a {
  color: #BE2E00;
  font-weight: 500
}

.cardBtn button {
  margin-right: 20px;
}

.cardImg {
  padding-bottom: 50px
}

.cardImg img {
  display: inline-block;
  margin-right: 20px;
}

.digitalGoldSec {
  padding: 0 0 80px;
  background: linear-gradient(274.59deg, #283A52 2.76%, #5A82B8 113.73%);
  position: relative;
}

.digitalGoldSec:before {
  content: "";
  background: url('../../assets/images/digital-gold-man-img.png') no-repeat left bottom;
  width: 25%;
  height: 713px;
  position: absolute;
  left: -50px;
  top: -200px;
  background-size: 90% auto;
}

.marqueeStrip {
  padding: 100px 0 120px
}

.marqueeStrip .container,
.digitalGoldSec .container {
  max-width: 1230px;
  padding: 0 15px;
  justify-content: flex-end;
}

.topStrip {
  background: #FFD6C9;
  border-radius: 16px;
  padding: 20px;
  gap: 30px;
  font-weight: 500;
  line-height: 18px;
  max-width: 1010px
}

.topStrip span {
  padding-right: 20px
}

.topStrip img {
  width: 40px;
  display: inline-block;
  vertical-align: middle;
  margin-right: 12px
}

.digitalCardBlock {
  gap: 70px;
  align-items: center;
  max-width: 1010px
}

/*.digitalCardBlock > div:first-child{width: calc(46% - 35px); box-shadow: 0px 14px 30px 0px #C7C7C71A; border: 0.5px solid #CFA04F; border-radius: 20px; padding: 30px; position:relative; }*/
/*.digitalCardBlock > div:first-child:before{background: url('../../assets/images/digital-gold-bg.png') no-repeat center center; content: ""; position: absolute; left: 0; top: 0; opacity: 0.05; background-size: 100% auto;  width: 100%; height: 100%}*/
.digitalCardBlock>div:first-child {
  width: calc(44% - 30px);
  color: #fff;
  font-weight: 200
}

.digitalTab {
  position: relative;
  height: 68px
}

.digitalTab svg {
  width: 100%
}

.digitalTab ul {
  position: relative;
  z-index: 1
}

.digitalTab li {
  width: 50%;
  cursor: pointer;
  font-size: 24px;
  ;
  padding: 20px 0;
  font-weight: 700;
  color: #CFA04F;
  text-align: center;
}

li[data-id="silverTab"] {
  color: #A2A2A2
}

.digitalTab li img {
  width: 40px;
  margin-right: 5px
}

.digitalTab .svg-holder {
  width: 100%;
  position: absolute;
  left: 0;
  top: 0
}

#goldTab {
  background: linear-gradient(180deg, rgba(255, 231, 196, 1) 0%, #FFFFFF 100%);
}

#silverTab {
  background: linear-gradient(180deg, #E4E4E4 0%, #FFFFFF 100%);
}

.goldSilverBlock {
  margin-top: -67px;
  border-radius: 30px;
  overflow: hidden;
}

.livebuy {
  background: #fff;
  border-radius: 50px;
  padding: 9px 20px;
  font-size: 12px;
  font-weight: 600
}

.livebuy:before {
  display: inline-block;
  vertical-align: middle;
  content: "";
  background: #FF0000;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 8px
}

.digitalBody>h4 {
  margin: 20px 0;
  font-size: 26px;
  justify-content: space-between;
}

.digitalBody>h4 span {
  font-size: 14px;
  text-decoration: underline;
  font-weight: 400
}

.goldSilverTitle {
  font-size: 68px;
  font-weight: 700;
  background: -webkit-linear-gradient(180deg, #82591F 0%, #F6AE45 100%);
  line-height: 80px;
  text-shadow: FFBE00;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;


}


.digitalCardBlock>div:first-child h4 {
  font-weight: 500;
  margin-bottom: 15px
}

.digitalCardBlock>div a {
  color: #fff;
  text-decoration: underline;
  font-weight: 400
}

.digitalCardBlock>div a:hover {
  text-decoration: none;
}

.digitalCardBlock h5 span {
  color: #FF0000;
  font-size: 16px;
  line-height: 22px;
  padding-left: 20px;
  display: inline-block;
  vertical-align: text-top;
}

.digitalCardBlock h5 span:before {
  display: inline-block;
  vertical-align: middle;
  content: "";
  background: #FF0000;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 8px
}

.digitalCardBlock>div:nth-child(2) {
  width: calc(58% - 30px);
}

.digitalHeading h4 {
  font-weight: 600;
  font-size: 22px;
  margin-top: 20px
}

.digitalHeading h4 span {
  color: #848484;
  padding-left: 25px;
  font-size: 14px;
  font-weight: 400
}

.digitalBody {
  padding: 20px 30px 30px;
  position: relative;
  z-index: 1;
  display: none;
}

.digitalBody.active {
  display: block;
}

.tabhead ul {
  border: 1px solid #DD5428;
  border-radius: 8px;
  display: flex;
  overflow: hidden;
}

.tabhead ul li {
  width: 50%;
  text-align: center;
  padding: 8px 15px;
  color: #DD5428;
  cursor: pointer;
}

.tabhead ul li.active {
  background: #DD5428;
  color: #fff
}

.digitalTabDes {
  padding: 20px 0 0
}

.digitalTabDes button {
  margin-top: 30px;
  width: 100%
}

#goldruppes,
#silverruppes {
  display: block;
}

.tabDes {
  border: #D5AC65 1px solid;
  border-radius: 12px;
  padding: 25px;
  background: #FFF8ED
}

#silverTab .tabDes {
  background: #fff
}

.digitalTabDes h4 {
  justify-content: space-between;
  margin-bottom: 20px;
  font-size: 30px;
}

.digitalTabDes h4 span {
  text-decoration: underline;
}

.digitalTabDes h4 span:nth-child(2) {
  font-size: 18px;
  font-weight: 400;
  text-decoration: none;
}

.rupeesgram {
  gap: 6px;
  flex-wrap: wrap;
}

.rupeesgram span {
  border: 1px solid #EDEDED;
  background: #fff;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  padding: 3px 16px;
  cursor: pointer;
}

.rupeesgram span.active {
  border-color: #DD5428
}

.digitalCardBlock>div:nth-child(2) h5 {
  color: #BE2E00;
  font-weight: 700
}

.digitalCardBlock>div:nth-child(2) h2 {
  font-size: 34px;
  font-weight: 700;
  line-height: 48px;
  margin: 20px 0 30px
}

.digitalCardBlock>div:nth-child(2) {
  line-height: 30px;
}

.digitalCardBlock>div:nth-child(2) a {
  display: inline-block;
  text-decoration: none;
}

.rewardGift {
  background: linear-gradient(180deg, #DD5428 0%, #08254C 100%);
  padding: 0 100px;
  color: #fff;
  overflow: hidden;
  position: relative;
}


.badgegift {
  border: 1px solid #FFEDD5;
  background: #fff;
  color: #C2410C;
  font-size: 12px;
  font-weight: 500;
  padding: 4px 12px 7px;
}

.badgegift:before {
  content: "";
  background: #F97316;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 8px;
}

.rewardContent h1 {
  padding: 20px 0;
  font-size: 60px;
  font-weight: 600;
  line-height: 80px;
}

.rewardContent p>span {
  font-size: 16px;
  font-weight: 600;
  margin-right: 20px
}

.rewardContent p>span:before {
  content: "";
  width: 12px;
  height: 12px;
  background: #fff;
  border-radius: 50%;
  display: inline-block;
  margin-right: 8px
}

.rewardGift>.container.flex {
  gap: 100px
}

.rewardContent {
  width: 50%;
  padding: 100px 0;
  position: relative;
}

.rewardImgsec {
  width: 50%;
  gap: 40px;
  margin-top: -98px
}

.rewardImgsec>div {
  width: 50%
}

.rewardImgsec>div:first-child {
  margin-top: 92px
}

.rewardImgtxt {
  position: relative;
  margin-bottom: 60px
}

.rewardImgtxt .box:before {
  padding-top: 117%
}

.rewardImgsec>div:first-child .rewardImgtxt:first-child .box:before {
  padding-top: 117%
}

.rewardImgsec>div:first-child .rewardImgtxt:nth-child(2) .box:before {
  padding-top: 118%
}

.rewardImgsec>div:first-child .rewardImgtxt:nth-child(2) {
  margin-bottom: -30px
}

.rewardContent:after {
  content: "#Rewards 100%";
  position: absolute;
  left: 0;
  bottom: 30px;
  font-size: 110px;
  font-weight: 700;
  -webkit-text-stroke: 1px #FFFFFF80;
  color: transparent;
  white-space: nowrap;
}







.rewardPrice:before {
  content: "";
  background: url('../../assets/images/price-bg.svg') repeat-x 0;
  width: 100%;
  height: 16px;
  position: absolute;
  left: 0;
  top: -8px;
}

.rewardPrice {
  background: #DD5428;
  font-size: 20px;
  font-weight: 600;
  position: absolute;
  left: 0;
  bottom: -20px;
  width: 100%;
  text-align: center;
  align-items: center;
  justify-content: center;
  padding: 10px 20px 20px;
  gap: 20px;
  border-radius: 0 0 20px 20px
}

.rewardPrice strike {
  font-size: 20px
}

.rewardPrice span {
  font-size: 30px
}


.simpleFastTrans {
  padding: 80px 0 0
}

.simpleFastTrans .container {
  max-width: 1230px;
  padding: 0 15px
}

.simpleFastTrans .badgeBill {
  margin: 0 auto;
  width: 90px;
  display: block;
}

.simpleFastTrans h1 {
  font-size: 60px;
  font-weight: 600;
  text-align: center;
  line-height: 80px;
  padding: 20px 0
}

.simpleFastTrans h1 span {
  display: block;
  color: #DD5428
}

.simpleblockImg {
  gap: 50px;
  padding: 50px 0 0
}

.simpleblockImg>div {
  width: calc(50% - 25px);
}

.simpleBlock {
  background: #B8C8E040;
  padding: 30px 30px 30px 70px;
  border-radius: 20px;
  margin-bottom: 30px;
  position: relative;
  font-size: 16px;
  line-height: 26px;
  transition: all 0.3s ease;
}

.simpleBlock:last-child {
  margin-bottom: 0
}

.blockIcon {
  position: absolute;
  left: 30px;
  top: 30px
}

.simpleBlock h5 {
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 10px;
}

.simpleBlock p {
  margin-bottom: 0
}

.simpleBlock.active {
  background: #FD815A;
  color: #fff
}

.simpleblockImg>div:nth-child(2) {
  background: #FFCDBD;
  border-radius: 40px;
  padding: 50px 70px 0;
  overflow: hidden;
  display: flex;
  align-items: end;
  position: relative;
}

.simpleblockImg>div:nth-child(2) img {
  width: auto;
  height: 100%;
  margin: 50px auto 0;
  display: block;
}

.simpleblockImg>div:nth-child(2) .box {
  width: 100%
}

.simpleblockImg>div:nth-child(2) .box:before {
  padding-top: 115%
}

.homeSection-videoSlider .container {
  max-width: 1230px;
  padding: 0 15px;
}

.simpleBlockImgSec .box {
  display: none;
  position: absolute;
  /* prevents layout jump */
  top: 0;
  left: 0;
  width: 100%;
}

.videoModal .modal-dialog {
  max-width: 1200px;
}



.svg-holder>div {
  display: none;
}

.svg-holder>div.active {
  display: block;
}

/* Homepage Section  */





/* Booking > Pages by AJIT   */

/*Added by suoriya for the BBPS Integration after this it will remove*/

/* Pay Bills - B Connect Menu */
.navbar__links .pay-bills-menu .pay-bills-link {
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  width: 100px;
}

.navbar__links .pay-bills-menu .b-connect-logo {
  width: 62px;
  height: auto;
  max-height: 26px;
  object-fit: contain;
  display: inline-block;
}

/* Hover */
.navbar__links .pay-bills-menu .pay-bills-link:hover {
  opacity: 0.85;
}
/* Mobile */
@media (max-width: 991px) {
  .navbar__links .pay-bills-menu .pay-bills-link {
    gap: 8px;
  }

  .navbar__links .pay-bills-menu .b-connect-logo {
    width: 58px;
    max-height: 24px;
  }
}

/* =========================================================
   PAY BILLS PAGE
========================================================= */

.pay-bills-body {
  background: #ffffff;
}

.pay-bills-page {
  width: 100%;
  padding: 40px 0 50px;
}

.pay-bills-page>.container-fluid {
  max-width: 1500px;
  margin: 0 auto;
  padding-left: 40px;
  padding-right: 40px;
}


/* =========================================================
   MAIN LAYOUT
========================================================= */

.pay-bills-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px;
  align-items: start;
}


/* =========================================================
   RIGHT COLUMN
========================================================= */

.pay-bills-right {
  display: flex;
  flex-direction: column;
  gap: 38px;
}


/* =========================================================
   PANELS
========================================================= */

.pay-bills-panel {
  border-radius: 25px;
  padding: 36px 38px;
  overflow: hidden;
}

.bills-panel {
  background: #ffd3c7;
}

.utility-panel,
.finance-panel {
  background: #fff0eb;
}


/* =========================================================
   PANEL HEADER
========================================================= */

.pay-bills-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 28px;
}

.pay-bills-panel-header h2 {
  margin: 0;
  font-size: 30px;
  line-height: 1.2;
  font-weight: 600;
  color: #080808;
}


/* =========================================================
   ZERO FEE BADGE
========================================================= */

.fee-badge {
  background: #e95224;
  color: #ffffff;
  padding: 13px 25px;
  border-radius: 30px 0 0 30px;
  font-size: 15px;
  font-weight: 500;
  margin-right: -38px;
  white-space: nowrap;
}


/* =========================================================
   CATEGORY GRID
========================================================= */

.category-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}


/* =========================================================
   CATEGORY CARD
========================================================= */

.bill-category-card {
  min-height: 172px;
  background: #ffffff;
  border-radius: 10px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  padding: 18px 12px;

  text-align: center;
  text-decoration: none;

  color: #080808;

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.bill-category-card:hover {
  color: #080808;
  transform: translateY(-4px);

  box-shadow:
    0 8px 20px rgba(0, 0, 0, 0.08);
}


/* =========================================================
   CATEGORY ICON
========================================================= */

.category-icon {
  width: 64px;
  height: 64px;

  border-radius: 50%;

  background: #ffe1d9;
  border: 1.5px solid #f04b21;

  color: #ed4b22;

  display: flex;
  align-items: center;
  justify-content: center;

  margin-bottom: 16px;
}

.category-icon svg {
  width: 27px;
  height: 27px;
}


/* =========================================================
   CATEGORY NAME
========================================================= */

.bill-category-card>span {
  display: block;

  font-size: 17px;
  line-height: 1.35;
  font-weight: 400;

  max-width: 140px;
}


/* =========================================================
   REWARD STRIP
========================================================= */

.reward-strip {
  position: relative;

  margin-top: 36px;

  background: #e95224;

  color: #ffffff;

  border-radius: 9px;

  padding: 15px 24px;

  font-size: 16px;
  font-weight: 500;
}

.reward-pointer {
  position: absolute;

  top: -12px;
  left: 25px;

  width: 0;
  height: 0;

  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 13px solid #e95224;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 1200px) {

  .pay-bills-layout {
    gap: 25px;
  }

  .pay-bills-panel {
    padding: 30px;
  }

  .fee-badge {
    margin-right: -30px;
  }

  .category-grid {
    gap: 14px;
  }

  .bill-category-card {
    min-height: 155px;
  }

}


@media (max-width: 991px) {

  .pay-bills-page {
    padding: 25px 0 40px;
  }

  .pay-bills-page>.container-fluid {
    padding-left: 20px;
    padding-right: 20px;
  }

  .pay-bills-layout {
    grid-template-columns: 1fr;
  }

  .pay-bills-right {
    gap: 25px;
  }

}



/* =========================================================
   PAY BILLS PAGE
========================================================= */

.billPayPage {
  padding: 10px 0 80px;
  background: #fff;
}


/* =========================================================
   HEADER
========================================================= */

.billPayPageHeader {
  text-align: left;
  margin-bottom: 40px;
  display: flex;
  justify-content: space-between;
}

.billPayPageHeader .bConnectLogo img {
  max-width: 150px;
  max-height: 55px;
  margin-bottom: 15px;
}

.billPayPageHeader h1 {
  font-size: 36px;
  font-weight: 600;
  margin: 0 0 10px;
  color: #111;
}

.billPayPageHeader p {
  margin: 0;
  font-size: 16px;
  color: #666;
}


/* =========================================================
   MAIN LAYOUT
========================================================= */

.billPayCategoryLayout {
  /* display: grid; */
  grid-template-columns: 1fr 1fr;
  gap: 36px;
  align-items: start;
}


/* =========================================================
   CATEGORY SECTION
========================================================= */

/* .billPayCategorySection {
    background: #fff0eb;
    border-radius: 24px;
    padding: 32px;
}

.billsRechargeSection {
    background: #ffd3c5;
} */

.billPayRightColumn {
  display: flex;
  flex-direction: column;
}


/* =========================================================
   SECTION HEADER
========================================================= */

.billPaySectionHeader {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 40px 0px;
  justify-content: space-between;
}

.billPaySectionHeader h2 {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  color: #111;
  line-height: normal;
  text-transform: capitalize;
}

.banking-partners-sec {
  margin: 40px 0px;
}

.banking-partners-sec h3 {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 20px;
}

.banking-partners-sec img {
  height: 30px;
  object-fit: contain;
}

.investment-sec {
  margin: 20px 0px 60px 0px;
}

.split-slider-sec {
  margin: 40px 0px;
  background: transparent !important;
}

.split-slider img {
  box-shadow: 1px 1px 3px 3px #bababa1c;
  border-radius: 12px;
  margin: 10px 0px;
  border: 1px solid #cecece51;
}

.billPaySectionHeader span {
  background: #e95324;
  color: #fff;
  padding: 4px 12px;
  border-radius: 30px;
  font-size: 10px;
  white-space: nowrap;
  font-weight: 600;
}

.billPaySectionHeader img.bharat-connect-logo {
  width: 83px;
  height: 30px;
  object-fit: contain;
}

/* =========================================================
   CATEGORY GRID
========================================================= */

.billPayCategoryGrid {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 16px;
}


/* =========================================================
   CATEGORY CARD
========================================================= */

.billPayCategoryCard {
  min-height: 145px;
  background: #ffe2da;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 10px;
  text-align: center;
  text-decoration: none;
  color: #111;
  transition: all 0.2s ease;
}

.billPayCategoryCard:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

.billPayCategoryCard span {
  font-size: 14px;
  line-height: 1.35;
  font-weight: 500;
}


/* =========================================================
   CATEGORY ICON
========================================================= */

.billPayCategoryIcon {
  width: 50px;
  height: 50px;
  border: 1px solid #f15a29;
  background: #e95323;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}

.billPayCategoryIcon img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}


/* =========================================================
   REWARD BAR
========================================================= */

.billPayRewardBar {
  position: relative;
  margin: 30px 0px;
  padding: 8px 24px;
  background: #e95324;
  color: #fff;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 600;
  width: fit-content;
}

.rewardArrow {
  position: absolute;
  top: -12px;
  left: 28px;

  width: 0;
  height: 0;

  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 12px solid #e95324;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1199px) {

  .billPayCategoryGrid {
    grid-template-columns: repeat(3, 1fr);
  }

}


@media (max-width: 991px) {

  .billPayCategoryLayout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {

  .pay-bills-panel {
    padding: 24px 18px;
    border-radius: 20px;
  }

  .pay-bills-panel-header {
    align-items: flex-start;
    flex-direction: column;
    margin-bottom: 22px;
  }

  .pay-bills-panel-header h2 {
    font-size: 25px;
  }

  .zero-balance-account-sec {
    margin-top: 0px;
  }

  .fee-badge {
    margin-left: -18px;
    margin-right: 0;

    padding: 10px 20px;

    font-size: 13px;
  }

  .category-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .bill-category-card {
    min-height: 145px;
  }

  .category-icon {
    width: 56px;
    height: 56px;
    margin-bottom: 12px;
  }

  .bill-category-card>span {
    font-size: 15px;
  }

  .reward-strip {
    margin-top: 24px;
    padding: 13px 16px;
    font-size: 14px;
  }

}


@media (max-width: 400px) {

  .category-grid {
    gap: 10px;
  }

  .bill-category-card {
    min-height: 135px;
    padding: 12px 8px;
  }

  .category-icon {
    width: 50px;
    height: 50px;
  }

  .category-icon svg {
    width: 23px;
    height: 23px;
  }

  .bill-category-card>span {
    font-size: 14px;
  }

}

@media (max-width: 767px) {

  .billPayPage {
    padding: 0px;
  }

  .split-slider-sec {
    margin: 30px 0px 0px 0px;
  }

  .finance-card {
    margin-bottom: 20px;
  }

  .split-slider img {
    margin: 8px;
  }

  .billPayCategoryIcon {
    width: 44px;
    height: 44px;
    margin-bottom: 12px;
  }

  footer .fwhiteBg h5 {
    font-size: 14px;
    line-height: 20px;
    font-weight: 500 !important;
  }

  .billPayPageHeader h1 {
    font-size: 28px;
  }

  .billPaySectionHeader h2 {
    font-size: 18px;
  }

  .billPaySectionHeader {
    margin: 30px 0px;
  }

  .billPaySectionHeader span {
    font-size: 8px;
    padding: 0px 6px;
  }

  .billPayCategoryGrid {
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
  }

  .billPayCategoryCard {
    min-height: 125px;
  }

  .billPayCategoryCard span {
    font-size: 12px;
  }

}

/* =========================================================
   BHARAT CONNECT ASSURED LOGO
========================================================= */

.billPayPageHeader {
  position: relative;
}


.bharatConnectAssuredLogo img {
  display: block;
  width: 130px;
  height: 120px;
  /* max-height: 70px; */
  object-fit: contain;
}

/* Mobile */
@media (max-width: 767px) {

  .bharatConnectAssuredLogo {
    position: static;
    display: flex;
    justify-content: center;
    margin-bottom: 15px;
  }

  .bharatConnectAssuredLogo img {
    width: 125px;
    max-height: 60px;
  }

}

.zero-balance-account-sec {
  position: relative;
  overflow: hidden;
}

.zero-balance-account-sec a {
  position: relative;
  display: block;
  overflow: hidden;
}

.zero-balance-account-sec a::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 35%;
  height: 100%;
  background: linear-gradient(90deg,
      transparent,
      rgba(255, 255, 255, 0.7),
      transparent);
  transform: skewX(-20deg);
  pointer-events: none;
}

.zero-balance-account-sec.flash-active a::after {
  animation: zeroBalanceFlash 1.2s ease-in-out;
}

@keyframes zeroBalanceFlash {
  0% {
    left: -100%;
  }

  100% {
    left: 150%;
  }
}

.splitSlider {
  width: 100%;
  overflow: hidden;
}

.splitSlider .swiper-wrapper {
  width: 100%;
}

.splitSlider .swiper-slide {
  width: 100% !important;
  flex-shrink: 0;
}

.split-slider {
  width: 100%;
}

.split-slider img {
  display: block;
  width: 100%;
  height: auto;
}

.splitSlider .swiper-pagination {
  position: relative;
  margin-top: 15px;
}

.splitSlider .swiper-pagination {
  position: relative;
  margin-top: 15px;
  display: flex;
  bottom: 50px;
  left: 20px;
}

.swiper-pagination-bullet-active {
  background: #dd5428;
}

html,
body {
  overflow-x: hidden;
}

.mobile-nav-menu {
  display: none;
  list-style: none;
  padding: 0;
  margin: 0;
}

.mobile-nav-menu li {
  width: 100%;
  margin: 0;
}

.mobile-nav-menu li a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 64px;
  padding: 12px;
  color: #222;
  text-decoration: none;
  border-bottom: 1px solid #eeeeee;
  background: #fff;
}

.mobile-nav-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mobile-nav-left img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.mobile-nav-left span {
  font-size: 12px;
  font-weight: 600;
}

.mobile-nav-arrow {
  font-size: 28px;
  line-height: 1;
  color: #777;
  font-weight: 300;
}


/* Only mobile */

@media (max-width: 991px) {
  footer {
    padding-bottom: 80px;
  }

  .mobile-nav-menu {
    display: block;
    position: fixed;
    bottom: 0;
    width: 100%;
    display: flex;
    z-index: 1000000;
    box-shadow: 2px -2px 16px 0px #00000021;
  }

}


/* Hide on desktop */

@media (min-width: 992px) {

  .mobile-nav-menu {
    display: none !important;
  }

}

.bill-sec .billPayCategoryCard {
  background: #fff0ec;
  border: 1px solid transparent;
  transition: background 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease,
    transform 0.3s ease;
}


/* Highlighted Cards */

/* Desktop */
.bill-sec .billPayCategoryCard:nth-child(1),
.bill-sec .billPayCategoryCard:nth-child(4),
.bill-sec .billPayCategoryCard:nth-child(7),
.bill-sec .billPayCategoryCard:nth-child(10) {
  background: #fff8f2;
  border: 1.5px solid #f15a29;
  box-shadow: 0 4px 14px rgba(241, 90, 41, 0.10);
}


/* Mobile */
@media (max-width: 767px) {

  .bill-sec .billPayCategoryCard {
    border: none !important;
    box-shadow: none !important;
    animation: none !important;
  }

  .bill-sec .billPayCategoryCard:nth-child(1),
  .bill-sec .billPayCategoryCard:nth-child(3),
  .bill-sec .billPayCategoryCard:nth-child(5),
  .bill-sec .billPayCategoryCard:nth-child(7),
  .bill-sec .billPayCategoryCard:nth-child(9),
  .bill-sec .billPayCategoryCard:nth-child(11) {
    background: #fff8f2;
  }

  .bill-sec .billPayCategoryCard:nth-child(2),
  .bill-sec .billPayCategoryCard:nth-child(4),
  .bill-sec .billPayCategoryCard:nth-child(6),
  .bill-sec .billPayCategoryCard:nth-child(8),
  .bill-sec .billPayCategoryCard:nth-child(10),
  .bill-sec .billPayCategoryCard:nth-child(12) {
    background: #fff0ec;
  }
}


/* Highlighted Icons Animation */

.bill-sec .billPayCategoryCard:nth-child(1) .billPayCategoryIcon,
.bill-sec .billPayCategoryCard:nth-child(4) .billPayCategoryIcon,
.bill-sec .billPayCategoryCard:nth-child(7) .billPayCategoryIcon,
.bill-sec .billPayCategoryCard:nth-child(10) .billPayCategoryIcon {
  animation: highlightIcon 2.8s ease-in-out infinite;
}


/* Animation */

@keyframes highlightIcon {

  0%,
  70%,
  100% {
    transform: translateY(0) scale(1);
  }

  78% {
    transform: translateY(-6px) scale(1.08);
  }

  86% {
    transform: translateY(0) scale(1);
  }

  92% {
    transform: translateY(-3px) scale(1.04);
  }
}


/* Stagger */

.bill-sec .billPayCategoryCard:nth-child(1) .billPayCategoryIcon {
  animation-delay: 0s;
}

.bill-sec .billPayCategoryCard:nth-child(4) .billPayCategoryIcon {
  animation-delay: 0.6s;
}

.bill-sec .billPayCategoryCard:nth-child(7) .billPayCategoryIcon {
  animation-delay: 1.2s;
}

.bill-sec .billPayCategoryCard:nth-child(10) .billPayCategoryIcon {
  animation-delay: 1.8s;
}


/* Hover */

.bill-sec .billPayCategoryCard:nth-child(1):hover,
.bill-sec .billPayCategoryCard:nth-child(4):hover,
.bill-sec .billPayCategoryCard:nth-child(7):hover,
.bill-sec .billPayCategoryCard:nth-child(10):hover {
  background: #ffe9df;
  border-color: #f15a29;
  box-shadow: 0 10px 24px rgba(241, 90, 41, 0.18);
  transform: translateY(-5px);
}


.pay-rent-sec {
  background: url('https://test.erupaiya.com/assets/images/credit-card-bg.webp');
  padding: 80px 0px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  position: relative;
  margin: -20px 0px 40px 0px;
}

.pay-rent-sec .billPaySectionHeader {
  align-items: flex-start;
  gap: 8px;
  margin: 0px;
  flex-direction: column;
  margin-bottom: 30px;
}

.pay-rent-sec .billPaySectionHeader h2 {
  color: #fff;
}

.pay-rent-sec .billPaySectionHeader h3 {
  color: #fff;
  font-size: 16px;
  font-weight: 500;
}

.pay-rent-sec .billPayCategoryGrid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}

.mobile-credit-card-img {
  position: absolute;
  height: 410px;
  object-fit: contain;
  bottom: 0px;
  right: -20%;
  pointer-events: none;
}

.erupaiyaJourneySection {
  position: relative;
  overflow: hidden;
  padding: 110px 0 90px;
  background:
    radial-gradient(circle at 15% 20%, rgba(255, 123, 0, 0.14), transparent 30%),
    radial-gradient(circle at 85% 80%, rgba(255, 77, 0, 0.1), transparent 28%),
    #0b0d12;
}

.erupaiyaJourneyHeading {
  max-width: 780px;
  margin: 0 auto 75px;
  text-align: center;
}

.erupaiyaJourneyHeading span {
  display: inline-block;
  margin-bottom: 14px;
  color: #ff7a00;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
}

.erupaiyaJourneyHeading h2 {
  margin: 0 0 18px;
  color: #ffffff;
  font-size: clamp(32px, 4vw, 58px);
  font-weight: 700;
  line-height: 1.1;
}

.erupaiyaJourneyHeading p {
  margin: 0;
  color: rgba(255, 255, 255, 0.65);
  font-size: 17px;
  line-height: 1.8;
}

.timelineViewport {
  overflow: hidden;
  width: 100%;
}

.timelineTrack {
  display: flex;
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.timelineSlide {
  flex: 0 0 100%;
  min-width: 100%;
  padding: 0 12px;
}

.timelineContent {
  position: relative;
  max-width: 900px;
  min-height: 330px;
  margin: auto;
  padding: 55px 60px;
  text-align: center;
  border: 1px solid rgba(255, 122, 0, 0.25);
  border-radius: 28px;
  background:
    linear-gradient(135deg,
      rgba(255, 122, 0, 0.12),
      rgba(255, 255, 255, 0.03));
  box-shadow:
    0 25px 70px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.timelineContent::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 1px;
  height: 55px;
  transform: translateX(-50%);
  background: linear-gradient(to bottom,
      #ff7a00,
      transparent);
}

.timelineYear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 130px;
  height: 58px;
  margin-bottom: 26px;
  border: 1px solid rgba(255, 122, 0, 0.4);
  border-radius: 100px;
  color: #ff7a00;
  background: rgba(255, 122, 0, 0.08);
  font-size: 30px;
  font-weight: 800;
}

.timelineContent h3 {
  margin: 0 0 18px;
  color: #ffffff;
  font-size: clamp(28px, 3vw, 44px);
  font-weight: 700;
}

.timelineContent p {
  max-width: 680px;
  margin: auto;
  color: rgba(255, 255, 255, 0.68);
  font-size: 18px;
  line-height: 1.8;
}

.timelineProgress {
  position: relative;
  max-width: 900px;
  margin: 55px auto 0;
}

.timelineLine {
  width: 100%;
  height: 3px;
  overflow: hidden;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.1);
}

.timelineFill {
  width: 7.7%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg,
      #ff4d00,
      #ff9800);
  transition: width 0.5s ease;
}

.timelineControls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 25px;
  margin-top: 28px;
}

.timelineArrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(255, 122, 0, 0.4);
  border-radius: 50%;
  color: #ffffff;
  background: rgba(255, 122, 0, 0.08);
  font-size: 22px;
  cursor: pointer;
  transition: 0.3s ease;
}

.timelineArrow:hover {
  border-color: #ff7a00;
  background: #ff7a00;
  transform: translateY(-2px);
}

.timelineDots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

.timelineDot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  cursor: pointer;
  transition: 0.3s ease;
}

.timelineDot.active {
  width: 24px;
  border-radius: 10px;
  background: #ff7a00;
}

@media (max-width: 767px) {
  .erupaiyaJourneySection {
    padding: 75px 0 65px;
  }

  .erupaiyaJourneyHeading {
    margin-bottom: 45px;
    padding: 0 10px;
  }

  .erupaiyaJourneyHeading p {
    font-size: 15px;
    line-height: 1.7;
  }

  .timelineSlide {
    padding: 0 5px;
  }

  .timelineContent {
    min-height: 350px;
    padding: 45px 25px;
    border-radius: 22px;
  }

  .timelineYear {
    width: 110px;
    height: 52px;
    font-size: 25px;
  }

  .timelineContent p {
    font-size: 16px;
    line-height: 1.7;
  }

  .timelineControls {
    gap: 15px;
  }

  .timelineDots {
    max-width: 170px;
  }
}

.visionMissionSection {
  background: #f8faf9;
}

.sectionTag {
  display: inline-block;
  color: #f58220;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1.5px;
}

.sectionTitle {
  font-size: 42px;
  font-weight: 700;
  color: #17212b;
  margin-bottom: 15px;
}

.sectionDescription {
  color: #6c757d;
  font-size: 17px;
  line-height: 1.7;
}

.purposeCard {
  background: #ffffff;
  border: 1px solid #e9ecef;
  border-radius: 20px;
  padding: 45px;
  position: relative;
  overflow: hidden;
  transition: all 0.35s ease;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.04);
}

.purposeCard::after {
  content: "";
  position: absolute;
  width: 180px;
  height: 180px;
  background: rgba(245, 130, 32, 0.07);
  border-radius: 50%;
  right: -70px;
  top: -70px;
}

.purposeCard:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.09);
  border-color: rgba(245, 130, 32, 0.3);
}

.purposeIcon {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background: rgba(245, 130, 32, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 28px;
}

.purposeIcon i {
  font-size: 28px;
  color: #f58220;
}

.purposeLabel {
  display: block;
  color: #f58220;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.5px;
  margin-bottom: 12px;
}

.purposeCard h3 {
  font-size: 30px;
  font-weight: 700;
  color: #17212b;
  margin-bottom: 22px;
  line-height: 1.3;
}

.purposeCard p {
  font-size: 16px;
  color: #69737d;
  line-height: 1.8;
  margin-bottom: 15px;
}

.purposeCard p:last-child {
  margin-bottom: 0;
}

@media (max-width: 991px) {
  .sectionTitle {
    font-size: 34px;
  }

  .purposeCard {
    padding: 35px;
  }
}

@media (max-width: 575px) {
  .visionMissionSection {
    padding: 55px 0;
  }

  .sectionTitle {
    font-size: 28px;
  }

  .sectionDescription {
    font-size: 15px;
  }

  .purposeCard {
    padding: 28px 22px;
    border-radius: 16px;
  }

  .purposeCard h3 {
    font-size: 24px;
  }

  .purposeCard p {
    font-size: 15px;
  }
}

.erAwardsSection {
  padding: 100px 0;
  background:
    radial-gradient(circle at 10% 10%,
      rgba(245, 130, 32, 0.08),
      transparent 25%),
    #ffffff;
  overflow: hidden;
}

.erAwardsHeading {
  max-width: 750px;
  margin: 0 auto 60px;
}

.erAwardsEyebrow {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  color: #f58220;
  margin-bottom: 15px;
}

.erAwardsHeading h2 {
  font-size: 48px;
  font-weight: 700;
  color: #18212b;
  margin-bottom: 18px;
}

.erAwardsHeading p {
  font-size: 17px;
  line-height: 1.7;
  color: #73777c;
}

.erAwardItem {
  padding: 15px;
}

.erAwardVisual {
  height: 240px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 24px;
  background:
    linear-gradient(135deg,
      #fff7f0,
      #ffffff);
  border: 1px solid rgba(245, 130, 32, 0.14);
  margin-bottom: 25px;
  transition: 0.4s ease;
  overflow: hidden;
}

.erAwardVisual img {
  max-width: 100%;
  object-fit: contain;
  transition: 0.4s ease;
}

.erAwardItem:hover .erAwardVisual {
  transform: translateY(-8px);
  box-shadow: 0 20px 50px rgba(245, 130, 32, 0.12);
}

.erAwardItem:hover .erAwardVisual img {
  transform: scale(1.06);
}

.awardYearBadge {
  position: absolute;
  top: 18px;
  right: 18px;
  background: #f58220;
  color: #ffffff;
  padding: 0px 12px;
  border-radius: 30px;
  font-size: 10px;
  font-weight: 700;
}

.erAwardDetails {
  padding: 0 5px;
}

.erAwardDetails h3 {
  font-size: 24px;
  line-height: 1.35;
  font-weight: 700;
  color: #1b232c;
  margin-bottom: 12px;
}

.erAwardDetails p {
  color: #74777b;
  font-size: 15px;
  line-height: 1.7;
  margin-bottom: 15px;
}

.erAwardDetails span {
  color: #f58220;
  font-size: 14px;
  font-weight: 600;
}

.erupaiya-business-platform {
  padding: 80px 0;
  background: #ffffff;
}

.platform-badge {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  color: #f58220;
  margin-bottom: 15px;
}

.platform-title {
  margin-bottom: 18px;
  color: #1b1b1b;
  font-size: 46px;
  font-weight: 600;
  line-height: 1.2;
}

.platform-title span {
  color: #e85d24;
}

.platform-intro {
  max-width: 760px;
  margin: 0 auto;
  color: #6d6d6d;
  font-size: 16px;
  line-height: 1.8;
}

/* Image */

.business-platform-visual {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fafafa;
  border-radius: 30px;
}

.business-platform-visual img {
  position: relative;
  z-index: 2;
  max-height: 380px;
  object-fit: contain;
}

.visual-glow {
  position: absolute;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: rgba(232, 93, 36, 0.08);
}


/* Content */

.content-label {
  display: block;
  margin-bottom: 12px;
  color: #e85d24;
  font-size: 13px;
  font-weight: 600;
}

.business-platform-content h3 {
  margin-bottom: 18px;
  color: #1c1c1c;
  font-size: 34px;
  font-weight: 600;
  line-height: 1.3;
}

.business-platform-content h3 span {
  color: #e85d24;
}

.business-platform-content>p {
  margin-bottom: 28px;
  color: #666666;
  font-size: 15px;
  line-height: 1.8;
}


/* Services */

.platform-service-list {
  margin-bottom: 28px;
}

.platform-service-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid #eeeeee;
}

.service-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  border-radius: 50%;
  color: #e85d24;
  background: #fff4ee;
  font-size: 11px;
  font-weight: 600;
}

.platform-service-item h4 {
  margin-bottom: 4px;
  color: #222222;
  font-size: 15px;
  font-weight: 600;
}

.platform-service-item p {
  margin: 0;
  color: #777777;
  font-size: 13px;
  line-height: 1.6;
}


/* Button */

.platform-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 6px 16px;
  border-radius: 50px;
  background: #e85d24;
  color: #ffffff;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
}

.business-platform-visual svg {
  width: 240px !important;
  height: 240px;
  flex: 0 0 auto;
}

.platform-btn span {
  font-size: 18px;
}

.platform-btn:hover {
  color: #ffffff;
  background: #cf4f1b;
}


/* Responsive */

@media (max-width: 991px) {

  .business-platform-visual {
    min-height: auto;
    margin-bottom: 45px;
  }

  .platform-title {
    font-size: 38px;
  }

}

@media (max-width: 767px) {

  .erupaiya-business-platform {
    padding: 60px 0;
  }

  .platform-title {
    font-size: 30px;
  }

  .platform-intro {
    font-size: 14px;
  }

  .business-platform-content h3 {
    font-size: 26px;
  }

  .business-platform-visual img {
    max-height: 280px;
  }

  .visual-glow {
    width: 240px;
    height: 240px;
  }

}

.bannerText {
  padding: 60px;
}

.erupaiya-faq-section {
  background: #f8f8f8;
}


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

.faq-heading .faq-eyebrow {
  display: inline-block;
  margin-bottom: 8px;
  color: #dd5428;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
}

.faq-heading h2 {
  margin-bottom: 8px;
  color: #242424;
  font-size: 36px;
  font-weight: 700;
}

.faq-heading p {
  margin: 0;
  color: #777;
  font-size: 15px;
}


/* =========================
   LEFT CATEGORY BUTTONS
========================= */

.faq-category-tabs {
  gap: 8px;
}

.faq-category-tabs .nav-link {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 15px 16px;

  border: 1px solid #e7e7e7;
  border-radius: 10px;

  background: #ffffff;
  color: #3d3d3d;

  font-size: 15px;
  font-weight: 600;

  text-align: left;
  cursor: pointer;

  transition: all 0.25s ease;
}

.faq-category-tabs .nav-link:hover {
  border-color: #dd5428;
  color: #dd5428;
  background: #fffaf8;
}

.faq-category-tabs .nav-link i {
  font-size: 14px;
  opacity: 0.6;
  transition: all 0.25s ease;
}

.faq-category-tabs .nav-link.active {
  background: #dd5428;
  border-color: #dd5428;
  color: #ffffff;
}

.faq-category-tabs .nav-link.active i {
  opacity: 1;
}


/* =========================
   RIGHT CONTENT HEADING
========================= */

.faq-content-heading {
  margin-bottom: 18px;
}

.faq-content-heading h3 {
  margin-bottom: 5px;
  color: #252525;
  font-size: 25px;
  font-weight: 700;
}

.faq-content-heading p {
  margin: 0;
  color: #777;
  font-size: 14px;
}


/* =========================
   ACCORDION
   Bootstrap Default Icon
========================= */

.faq-accordion .accordion-item {
  margin-bottom: 10px;
  overflow: hidden;

  border: 1px solid #e8e8e8;
  border-radius: 10px !important;

  background: #ffffff;
}

.faq-accordion .accordion-header {
  margin: 0;
}

.faq-accordion .accordion-button {
  padding: 16px;

  background: #ffffff;
  color: #292929;

  font-size: 16px;
  font-weight: 600;

  box-shadow: none !important;
}

.faq-accordion .accordion-button:not(.collapsed) {
  background: #ffffff;
  color: #dd5428;

  box-shadow: none !important;
}

.faq-accordion .accordion-button:focus {
  border-color: transparent;
  box-shadow: none !important;
}


/* Bootstrap Default Accordion Arrow */

.faq-accordion .accordion-button::after {
  flex-shrink: 0;
  margin-left: auto;
}


/* Accordion Answer */

.faq-accordion .accordion-body {
  padding: 0 55px 18px 20px;

  color: #747474;

  font-size: 14px;
  line-height: 1.7;
}


/* =========================
   TABLET
========================= */

@media (max-width: 991px) {

  .faq-category-tabs {
    margin-bottom: 20px;
  }

}


/* =========================
   MOBILE
========================= */

@media (max-width: 767px) {

  .erupaiya-faq-section {
    padding-top: 45px !important;
    padding-bottom: 45px !important;
  }

  .faq-heading {
    margin-bottom: 30px !important;
  }

  .faq-heading h2 {
    font-size: 28px;
    line-height: 1.3;
  }

  .faq-heading p {
    font-size: 14px;
  }


  /* Category Buttons */

  .faq-category-tabs {
    gap: 7px;
  }

  .faq-category-tabs .nav-link {
    padding: 13px 15px;
    font-size: 14px;
  }


  /* Content Heading */

  .faq-content-heading {
    margin-bottom: 15px;
  }

  .faq-content-heading h3 {
    font-size: 22px;
  }

  .faq-content-heading p {
    font-size: 13px;
  }


  /* Accordion */

  .faq-accordion .accordion-item {
    margin-bottom: 8px;
    border-radius: 8px !important;
  }

  .faq-accordion .accordion-button {
    padding: 16px;
    font-size: 15px;
    line-height: 1.5;
  }

  .faq-accordion .accordion-body {
    padding: 0 40px 16px 16px;
    font-size: 13px;
    line-height: 1.7;
  }

}


/* =========================
   SMALL MOBILE
========================= */

@media (max-width: 575px) {

  .faq-heading .faq-eyebrow {
    font-size: 10px;
  }

  .faq-heading h2 {
    font-size: 26px;
  }

  .faq-category-tabs .nav-link {
    min-height: 48px;
  }

}

.breadcrumb-sec {
  position: absolute;
  bottom: 0px;
  padding: 10px;
  background: linear-gradient(45deg, #ffffff54, transparent);
  z-index: 1;
  width: 100%;
}

.breadcrumb-item a {
  color: #ffffff;
  font-weight: 600;
}

.breadcrumb-item.active {
  color: #fff;
  opacity: .6;
}

.breadcrumb-item+.breadcrumb-item::before {
  color: #fff;
}

.blogOverlay-content span {
  font-size: 14px;
  font-weight: 700;
}

span.blogtag-badge {
  background: #dd5428;
  padding: 6px 12px;
  font-size: 12px;
  border-radius: 50px;
  line-height: normal !important;
  display: flex;
  align-items: center;
  font-weight: 600;
  color: #ffff;
  width: fit-content;
  margin-bottom: 12px;
}

a.blogCardItem span {
  font-size: 12px;
}

.readMoreLink {
  color: #dd5428;
  font-weight: 600;
  font-size: 14px !important;
  text-decoration: underline;
}

.latestBlog {
  padding: 50px 0px 50px 0px;
}

.blogDetailPage {
  padding: 80px 0;
  background: #ffffff;
}

.blogDetailHeader {
  margin-bottom: 35px;
}

.blogDetailMeta {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 20px;
}

.blogDetailMeta .blogDate {
  color: #777;
  font-size: 14px;
}

.blogDetailMeta .blogDate i {
  margin-right: 6px;
  color: #dd5428;
}

.blogDetailHeader h1 {
  max-width: 850px;
  margin-bottom: 18px;
  color: #252525;
  font-size: 46px;
  line-height: 1.2;
  font-weight: 700;
}

.blogDetailIntro {
  max-width: 800px;
  margin: 0;
  color: #707070;
  font-size: 18px;
  line-height: 1.8;
}

.blogDetailImage {
  margin-bottom: 45px;
  overflow: hidden;
  border-radius: 16px;
}

.blogDetailImage img {
  width: 100%;
  display: block;
}

.blogDetailContent {
  color: #5f5f5f;
  font-size: 16px;
  line-height: 1.9;
}

.blogDetailContent p {
  margin-bottom: 22px;
}

.blogDetailContent h2 {
  margin-top: 42px;
  margin-bottom: 18px;
  color: #252525;
  font-size: 28px;
  font-weight: 700;
}

.blogServiceCard {
  height: 100%;
  display: flex;
  gap: 15px;
  padding: 20px;
  border: 1px solid #eeeeee;
  border-radius: 12px;
  background: #ffffff;
}

.blogServiceIcon {
  width: 46px;
  min-width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(221, 84, 40, 0.1);
  color: #dd5428;
  font-size: 21px;
}

.blogServiceCard h5 {
  margin-bottom: 5px;
  color: #252525;
  font-size: 16px;
  font-weight: 700;
}

.blogServiceCard p {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
}

.blogSteps {
  margin: 30px 0;
  padding: 25px;
  border-radius: 14px;
  background: #fafafa;
}

.blogStep {
  display: flex;
  gap: 20px;
  padding: 18px 0;
  border-bottom: 1px solid #e8e8e8;
}

.blogStep:last-child {
  border-bottom: 0;
}

.stepNumber {
  width: 45px;
  min-width: 45px;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #dd5428;
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
}

.blogStep h5 {
  margin-bottom: 5px;
  color: #252525;
  font-size: 17px;
  font-weight: 700;
}

.blogStep p {
  margin: 0;
  font-size: 14px;
}

.blogHighlightBox {
  display: flex;
  gap: 20px;
  margin: 35px 0;
  padding: 25px;
  border-left: 4px solid #dd5428;
  border-radius: 10px;
  background: #fff7f4;
}

.blogHighlightIcon {
  color: #dd5428;
  font-size: 25px;
}

.blogHighlightBox h4 {
  margin-bottom: 8px;
  color: #252525;
  font-size: 19px;
  font-weight: 700;
}

.blogHighlightBox p {
  margin: 0;
}

.blogConclusion {
  margin-top: 40px;
  padding: 35px;
  border-radius: 15px;
  background: #dd5428;
  color: #ffffff;
}

.blogConclusion h3 {
  margin-bottom: 10px;
  color: #ffffff;
  font-size: 26px;
  font-weight: 700;
}

.blogConclusion p {
  color: rgba(255, 255, 255, 0.85);
}

.blogConclusion .readMoreLink {
  color: #ffffff;
  font-weight: 600;
}

.blogShare {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 50px;
  padding-top: 25px;
  border-top: 1px solid #eeeeee;
}

.blogShare>span {
  color: #555;
  font-size: 14px;
  font-weight: 600;
}

.blogShareIcons {
  display: flex;
  gap: 10px;
}

.blogShareIcons a {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #e5e5e5;
  border-radius: 50%;
  color: #444;
  text-decoration: none;
}

.blogShareIcons a:hover {
  border-color: #dd5428;
  background: #dd5428;
  color: #ffffff;
}

.blogBackButton {
  margin-top: 30px;
}

@media (max-width: 767px) {

  .blogDetailPage {
    padding: 50px 0;
  }

  .blogDetailHeader h1 {
    font-size: 28px;
    line-height: normal;
  }

  .blogDetailIntro {
    font-size: 14px;
  }

  .blogDetailContent h2 {
    margin-top: 32px;
    font-size: 22px;
  }

  .blogDetailImage {
    margin-bottom: 30px;
    border-radius: 10px;
  }

  .blogSteps {
    padding: 18px;
  }

  .blogStep {
    gap: 14px;
  }

  .blogHighlightBox {
    padding: 20px;
  }

  .blogConclusion {
    padding: 25px 20px;
  }

  .blogShare {
    align-items: flex-start;
    flex-direction: column;
    gap: 15px;
  }

}

.blogBackButton a {
  color: #dd5428;
}

.profile-bg {
  background: #ffffff29;
  border-radius: 16px;
  margin-bottom: 40px;
  display: flex;
  justify-content: space-between;
  border: 1px solid #ebebeb;
}

.profileContainer {
  margin-top: 100px;
  padding-bottom: 80px;
}

.kyc-btn {
  background: #dd5428;
  color: #fff;
  padding: 4px 20px;
  text-decoration: none;
  font-weight: 600;
  border-radius: 50px;
}

.nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
  background-color: #dd5428;
}

.nav-pills .nav-link {
  color: #000;
  font-weight: 600;
}

label {
  font-weight: 600;
  margin-bottom: 6px;
  text-transform: capitalize;
}

.tab-content h2 {
  font-size: 24px;
  margin-bottom: 20px;
  text-transform: capitalize;
}

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

.form-group label {
  margin-bottom: 0px !important;

}

.form-group strong {
  font-size: 16px;
  text-transform: capitalize;
}

.banking-information-sec .row {
  background: #f9f9f9;
  padding: 16px;
  border-radius: 8px;
  margin: 0px;
  border: 1px solid #ecececce;
}

.sectionBrowsePlan {
  display: block;
  background: #ffffff;
  padding: 20px;
  border-radius: 12px;
  border: 1px solid #e9e9e975;
  box-shadow: 1px 1px 12px #00000011;
}

.btn-theme {
  background: #dd5428 !important;
  color: #fff !important;
  padding: 8px 20px;
  text-decoration: none;
  font-weight: 600;
  border-radius: 50px;
  font-size: 14px;
}

.btn-theme-border {
  border: 1px solid #dd5428;
  color: #dd5428;
  align-items: center;
  padding: 8px 20px;
  text-decoration: none;
  font-weight: 600;
  border-radius: 50px;
  font-size: 14px;
}

.tab-content h3 {
  font-size: 18px;
}

.modal-header {
  background: #dd5428;
  color: #fff;
}

.complete-kyc-sec {
  left: 0px;
  top: 0px;
  background: linear-gradient(180deg, #DD5428 0%, #084591 76.06%);
  text-align: center;
  padding: 50px;
  color: #fff;
}

.coin-sec {
  display: flex;
  flex-direction: column;
  text-align: center;
  align-items: center;
}

.security-sec strong {
  font-size: 20px;
}

.security-sec {
  margin-top: 40px;
  border-top: 1px solid #cecece21;
  padding: 30px 0px;
}

.security-flex {
  display: flex;
  justify-content: space-between;
  margin-top: 16px;
}

.security-card {
  display: flex;
  font-weight: bold;
  align-items: center;
  padding: 12px;
  gap: 10px;
  width: 32%;
  height: auto;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  flex: none;
  order: 0;
  flex-grow: 0;
  font-size: 12px;
}

.security-card svg {
  width: 24px;
  height: 24px;
}

.coin-sec strong {
  font-size: 22px;
  max-width: 50%;
  line-height: normal;
}

.modal-header .btn-close {
  margin-right: 0px;
  opacity: 1;
  filter: invert(1);
  width: 20px;
  height: 20px;
  background-size: 20px;
}

.kyc-stepper {
  display: flex;
  align-items: flex-start;
  width: 100%;
  max-width: 100%;
}

.kyc-step {
  display: flex;
  /* flex-direction: column; */
  align-items: center;
  min-width: 90px;
  gap: 12px;
}

.kyc-step-number {
  width: 30px;
  height: 30px;
  border: 1px solid #bfc3c7;
  border-radius: 50%;
  background: #fff;
  color: #6c757d;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
}

.kyc-step-label {
  font-size: 14px;
  font-weight: 600;
  color: #6c757d;
}

.kyc-step-line {
  flex: 1;
  height: 1px;
  background: #d9d9d9;
  margin-top: 16px;
}

.kyc-step.active .kyc-step-number {
  border-color: #e85a24;
  color: #e85a24;
}

.kyc-step.active .kyc-step-label {
  color: #222;
}

.kyc-step.completed .kyc-step-number {
  background: #e85a24;
  border-color: #e85a24;
  color: #fff;
}

.kyc-step-line.active {
  background: #e85a24;
}


/* Bottom Buttons */

.kyc-action-buttons {
  width: calc(100% + 60px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0px -2px 16px #00000030;
  background: #ffffff;
  margin: 30px -30px -30px -30px;
  padding: 20px 30px;
}

.kyc-action-buttons .btn {
  min-width: 150px;
  padding: 10px 30px;
  border-radius: 50px;
  font-size: 15px;
  font-weight: 600;
}

.btn-cancel {
  background: #fff;
  border: 1px solid #dc3545;
  color: #dc3545;
}

.btn-cancel:hover {
  background: #dc3545;
  border-color: #dc3545;
  color: #fff;
}

.btn-verify {
  background: #e85a24;
  border: 1px solid #e85a24;
  color: #fff;
}

.btn-verify:hover {
  background: #d44b19;
  border-color: #d44b19;
  color: #fff;
}

.pan-sec {
  background: #ffffff;
  padding: 30px;
  border: 1px solid #cecece51;
  border-radius: 16px;
  box-shadow: 0px 0px 8px #bfbfbf29;
  margin-top: 30px;
}

.kyc-stepper-sec {
  padding: 30px;
}

.kyc-stepper-sec .form-group {
  gap: 8px;
  margin-top: 20px;
}

.pan-sec.pan-bg {
  background: #DAEEFF;
  border-color: #DAEEFF;
}

.otp-flex {
  display: flex;
  gap: 16px;
}

.otp-flex input {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 10px 32px;
  gap: 10px;
  width: 50px;
  height: 50px;
  background: #FFFFFF;
  border: 1px solid #DFDFDF;
  border-radius: 8px;
  flex: none;
  order: 1;
  flex-grow: 0;
}

.verify-otp h3 {
  font-size: 22px;
  margin-bottom: 4px;
}

.resent-sec {
  justify-content: space-between;
  margin-top: 20px;
}

.verify-otp {
  margin-top: 30px;
}

.resent-sec .d-flex {
  gap: 8px;
  font-weight: bold;
  align-items: center;

}

.verified-sec svg {
  width: 80px;
  height: 80px;
}

.verified-sec strong {
  font-size: 24px;
  display: block;
  margin: 12px 0px;
  text-transform: capitalize;
}

.kyc-complete-content {
  margin-top: 50px;
  text-align: center;
}

.info-flex {
  display: flex;
  flex-direction: column;
  align-items: self-start;
  margin-top: 30px;
}

.info-flex strong {
  font-size: 22px;
}

.info-flex label {
  line-height: normal;
  margin: 0px 0px 4px 0px;
}

.modal {
  padding: 0px !important;
}

.pan-sec img {
  height: 30px;
}

@media (max-width: 576px) {

  .kyc-step {
    min-width: 65px;
    gap: 8px;
  }

  .kyc-step-number {
    width: 24px;
    height: 24px;
  }

  .kyc-step-line {
    margin-top: 12px;
  }

  .kyc-step-label {
    font-size: 13px;
  }


  .kyc-action-buttons .btn {
    min-width: 120px;
    padding: 10px 30px;
    font-size: 12px;
    font-weight: 600;
  }

  .otp-flex {
    gap: 12px;
  }

  .otp-flex input {
    padding: 10px;
    width: 48px;
    height: 48px;
    text-align: center;
    font-size: 18px;
  }

  .pan-sec {
    padding: 16px;
    border-radius: 12px;
    margin-top: 30px;
  }

  .verified-sec svg {
    width: 60px;
    height: 60px;
  }

  .verified-sec strong {
    font-size: 20px;
    margin: 12px 0px;
  }

  .info-flex strong {
    font-size: 18px;
  }

  .pan-sec {
    margin-top: 20px;
  }
}

:root {
  --primary: #DD5428;
  --primary-dark: #B4431F;
  --primary-soft: #FBEAE3;
  --success: #B4431F;
  --success-soft: #F7E4DA;
  --bg: #F5F6FA;
  --surface: #FFFFFF;
  --border: #E3E6F0;
  --text: #14171F;
  --muted: #5B4A42;
}

body {
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
}

.app-shell {
  margin: 120px auto 60px 0px;
}

.app-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 32px;
}

.app-header .mark {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
}

.app-header .mark svg {
  width: 20px;
  height: 20px;
}

.app-header h1 {
  font-size: 1.15rem;
  font-weight: 600;
  margin: 0;
  letter-spacing: -0.01em;
}

/* ---- layout: rail + content ---- */
.wizard {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  min-height: 640px;
}

.rail {
  background: var(--primary-soft);
  padding: 36px 28px;
  border-right: 1px solid var(--border);

}

.rail-step {
  display: flex;
  gap: 14px;
  padding: 14px 0;
  position: relative;
}

.rail-step .num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  flex: 0 0 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .8rem;
  font-weight: 600;
  background: var(--surface);
  border: 1.5px solid var(--border);
  color: var(--muted);
  transition: all .25s ease;
  z-index: 1;
}

.rail-step .line {
  position: absolute;
  left: 13px;
  top: 38px;
  width: 2px;
  height: calc(100% - 14px);
  background: var(--border);
}

.rail-step:last-child .line {
  display: none;
}

.rail-step .info b {
  display: block;
  font-size: .88rem;
  font-weight: 600;
  color: var(--muted);
  transition: color .25s ease;
}

.rail-step .info span {
  font-size: .76rem;
  color: var(--muted);
  opacity: .75;
}

.info b {
  line-height: 1;
}

.rail-step.active .num {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

.rail-step.active .info b {
  color: var(--text);
}

.rail-step.done .num {
  background: #198754;
  border-color: #198754;
  color: #fff;
}

.rail-step.done .line {
  background: var(--success);
}

.content {
  padding: 40px 48px;
  position: relative;
}

.screen {
  display: none;
  animation: fadeIn .35s ease;
}

.screen.active {
  display: block;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.step-title {
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 4px;
}

.step-sub {
  color: var(--muted);
  font-size: .92rem;
  margin-bottom: 28px;
}

/* ---- search ---- */
.search-wrap {
  position: relative;
  margin-bottom: 28px;
}

.search-wrap svg {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--primary);
}

.search-wrap input {
  width: 100%;
  padding: 10px 10px 10px 50px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: #FBFBFD;
  font-size: .95rem;
  outline: none;
  transition: border-color .2s, background .2s;
}

.search-wrap input:focus {
  border-color: var(--primary);
  background: #fff;
}

.section-label {
  font-size: .78rem;
  font-weight: 600;
  color: var(--muted);
  margin: 22px 0 12px;
}

.bank-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
}

.bank-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 12px;
  text-align: center;
  cursor: pointer;
  background: #fff;
  transition: border-color .18s, transform .18s;
}

.bank-card:hover {
  border-color: var(--primary);
  transform: translateY(-2px);
}

.bank-badge {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  margin: 0 auto 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: .85rem;
}

.bank-card .name {
  font-size: .82rem;
  font-weight: 500;
  line-height: 1.25;
}

.bank-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 6px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  border-radius: 8px;
  transition: background .15s;
}

.bank-row:hover {
  background: #FAFAFD;
}

.bank-row .bank-badge {
  margin: 0;
  width: 36px;
  height: 36px;
  font-size: .72rem;
}

.bank-row .name {
  flex: 1;
  font-weight: 500;
  font-size: .94rem;
}

.bank-row svg {
  color: var(--muted);
}

/* ---- form screen ---- */
.selected-bank-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--primary-soft);
  border-radius: 10px;
  padding: 8px 14px;
  margin-bottom: 26px;
}

.selected-bank-chip .bank-badge {
  width: 28px;
  height: 28px;
  font-size: .62rem;
  margin: 0;
}

.selected-bank-chip span {
  font-size: .86rem;
  font-weight: 600;
  color: var(--primary-dark);
}

.form-field {
  margin-bottom: 20px;
  max-width: 420px;
}

.form-field label {
  display: block;
  font-size: .82rem;
  font-weight: 600;
  margin-bottom: 7px;
  color: var(--text);
}

.form-field input {
  width: 100%;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
  font-size: .95rem;
  outline: none;
  transition: border-color .2s;
  letter-spacing: .02em;
}

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

.form-field small {
  color: var(--muted);
  font-size: .76rem;
}

.btn-primary-custom {
  background: var(--primary);
  border: none;
  color: #fff;
  padding: 10px 26px;
  border-radius: 10px;
  font-weight: 600;
  font-size: .92rem;
  transition: background .18s;
}

.btn-primary-custom:hover {
  background: var(--primary-dark);
  color: #fff;
}

.btn-primary-custom:disabled {
  background: #B9C0E8;
}

.btn-ghost {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  padding: 10px 22px;
  border-radius: 10px;
  font-weight: 600;
  font-size: .92rem;
}

.btn-ghost:hover {
  background: #F5F6FA;
}

/* ---- verifying screen ---- */
.verify-wrap {
  max-width: 420px;
  padding: 20px 0 8px;
}

.spinner-ring {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 4px solid var(--primary-soft);
  border-top-color: var(--primary);
  animation: spin 0.9s linear infinite;
  margin-bottom: 24px;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.verify-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  opacity: 0;
  transform: translateX(-6px);
}

.verify-item.show {
  animation: slideIn .4s ease forwards;
}

@keyframes slideIn {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.verify-item .dot {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--border);
  flex: 0 0 24px;
  transition: background .2s;
}

.verify-item.verified .dot {
  background: var(--success);
}

.verify-item.verified .dot svg {
  opacity: 1;
  transform: scale(1);
}

.verify-item .dot svg {
  opacity: 0;
  transform: scale(.4);
  transition: all .25s ease;
  width: 13px;
  height: 13px;
}

.verify-item .txt b {
  display: block;
  font-size: .88rem;
  font-weight: 600;
}

.verify-item .txt span {
  font-size: .76rem;
  color: var(--muted);
}

/* ---- confirm identity ---- */
.identity-card {
  max-width: 460px;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 22px 24px;
  background: #FBFBFD;
  margin-bottom: 26px;
}

.identity-row {
  display: flex;
  justify-content: space-between;
  padding: 9px 0;
  font-size: .9rem;
  border-bottom: 1px dashed var(--border);
}

.identity-row:last-child {
  border-bottom: none;
}

.identity-row span:first-child {
  color: var(--muted);
}

.identity-row span:last-child {
  font-weight: 600;
}

.otp-boxes {
  display: flex;
  gap: 10px;
  max-width: 420px;
  margin-bottom: 22px;
}

.otp-boxes input {
  width: 48px;
  height: 52px;
  text-align: center;
  font-size: 1.15rem;
  font-weight: 600;
  border-radius: 10px;
  border: 1px solid var(--border);
  outline: none;
}

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

/* ---- success ---- */
.success-wrap {
  text-align: center;
  padding: 36px 0 10px;
}

.success-circle {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: #058337;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 22px;
  animation: pop .45s cubic-bezier(.34, 1.56, .64, 1);
}

@keyframes pop {
  0% {
    transform: scale(0);
    opacity: 0;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.success-circle svg {
  width: 40px;
  height: 40px;
  stroke: #ffffff;
  stroke-width: 3;
  fill: none;
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
  animation: draw .5s ease .35s forwards;
}

@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}

.success-wrap h2 {
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 8px;
}

.success-wrap p {
  color: var(--muted);
  font-size: .92rem;
  max-width: 360px;
  margin: 0 auto 26px;
}

.summary-card {
  max-width: 380px;
  margin: 0 auto 28px;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px 22px;
  text-align: left;
  background: #FBFBFD;
}

.rail-step.done .info b,
.rail-step.done .info span {
  color: #000 !important;
  font-weight: 400;
}

.congratulations-popup {
  background: linear-gradient(rgb(221, 84, 40) 0%, rgb(8, 69, 145) 76.06%);
  padding: 50px;
  text-align: center;
}

.icon-flex {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  color: #ffff;
}

.congratulations-popup {
  background: linear-gradient(180deg, #DD5428 0%, #084591 76.06%);
  text-align: center;
  padding: 50px;
  color: #fff;
}

.icon-flex {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.transaction-page,
.offer-page {
  margin: 120px 0px 60px 0px;
}

.input-group:not(.has-validation)>.dropdown-toggle:nth-last-child(n+3),
.input-group:not(.has-validation)>.form-floating:not(:last-child)>.form-control,
.input-group:not(.has-validation)>.form-floating:not(:last-child)>.form-select,
.input-group:not(.has-validation)>:not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating) {
  border-top-right-radius: 0px !important;
  border-bottom-right-radius: 0px !important;
  border-right: 0px !important;
}

.th-search .input-group-text {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

.table>:not(caption)>*>* {
  padding-top: 12px;
  padding-bottom: 12px;
}

.link-primary {
  background: var(--primary) !important;
  color: #fff !important;
  padding: 8px 10px;
  font-size: 12px !important;
  border-radius: 50px;
}

.link-primary:focus,
.link-primary:hover {
  color: #fff !important;
}

:root {
  --brand-orange: #F0721D;
  --brand-orange-soft: #FDEEE3;
  --brand-navy: #1B2A6B;
  --accent-blue: #2F9BE0;
  --text: #14171F;
  --muted: #6B7280;
  --border: #E3E6F0;
}

.th-title {
  font-size: 1.7rem;
  font-weight: 800;
  margin: 0;
  white-space: nowrap;
}

.th-select {
  min-width: 118px;
}

.th-search {
  max-width: 340px;
}

.th-search .form-control {
  border-color: var(--primary);
}

.th-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.th-brand .mark {
  width: 30px;
  height: 30px;
  border-radius: 6px;
  background: var(--brand-orange);
  color: #fff;
  font-weight: 800;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.th-brand .name {
  font-weight: 800;
  font-size: .82rem;
  line-height: 1.15;
  color: var(--brand-navy);
}

.biller-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  flex: 0 0 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: .8rem;
}

.biller-sub {
  font-size: .78rem;
}

.modal-detail-row {
  display: flex;
  justify-content: space-between;
  padding: .6rem 0;
  border-bottom: 1px dashed #E5E7EB;
  font-size: 14px;
}

.modal-detail-row:last-child {
  border-bottom: none;
}

/* ---- filter trigger button ---- */
.btn-filter {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1.5px solid var(--border);
  background: #fff;
  color: var(--text);
  padding: 6px 14px;
  border-radius: 8px;
  font-weight: 600;
  font-size: .88rem;
}

.btn-filter:hover {
  border-color: var(--brand-orange);
  color: var(--brand-orange);
}

/* ---- filter modal ---- */
#filterModal .modal-dialog {
  max-width: 640px;
}

#filterModal .modal-content {
  border-radius: 18px;
  border: none;
}

#filterModal .modal-title {
  font-size: 1.3rem;
  font-weight: 700;
  opacity: 1;
}

#filterModal .modal-body {
  padding: 30px;
}

#filterModal .modal-footer {
  border-top: 1px solid var(--border);
  padding: 20px 32px;
}

.filter-clear-link {
  color: var(--brand-orange);
  font-weight: 700;
  font-size: 12px;
  text-decoration: none;
  background: #fff;
  border: none;
  margin-left: 10px;
  padding: 0px 12px;
  border-radius: 4px;
}

.filter-clear-link:hover {
  text-decoration: underline;
}

.filter-section {
  margin-bottom: 26px;
}

.filter-section h6 {
  font-size: .94rem;
  font-weight: 700;
  margin-bottom: 14px;
}

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.chip {
  border: 1.5px solid var(--border);
  border-radius: 8px;
  padding: 8px 20px;
  font-size: .86rem;
  font-weight: 600;
  background: #fff;
  color: var(--text);
  cursor: default;
}

.chip.selected {
  border-color: var(--brand-orange);
  background: var(--brand-orange-soft);
  color: var(--brand-orange);
}

.month-row {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 26px;
}

.month-check {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: .88rem;
  font-weight: 500;
}

.month-check input {
  width: 16px;
  height: 16px;
  border-radius: 5px;
  border: 1.5px solid #C7CAD4;
  accent-color: var(--brand-orange);
  cursor: default;
}

.date-row {
  display: flex;
  gap: 16px;
}

.date-field {
  position: relative;
  flex: 1;
}

.date-field input {
  width: 100%;
  padding: 11px 40px 11px 14px;
  border-radius: 10px;
  border: 1.5px solid var(--border);
  font-size: .88rem;
  color: var(--text);
  outline: none;
}

.date-field input::placeholder {
  color: #A9AEBB;
}

.date-field svg {
  position: absolute;
  right: 13px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  pointer-events: none;
}

.btn-reset {
  border: 1.5px solid var(--border);
  color: var(--text);
  background: #fff;
  padding: 10px 24px;
  border-radius: 10px;
  font-weight: 600;
  font-size: .88rem;
}

.btn-reset:hover {
  background: #F5F6FA;
}

.btn-apply-filter {
  background: var(--brand-orange);
  color: #fff;
  border: none;
  padding: 10px 34px;
  border-radius: 10px;
  font-weight: 700;
  font-size: .88rem;
}

.btn-apply-filter:hover {
  background: #D9600E;
  color: #fff;
}

.transaction-page .fw-bold {
  line-height: 1;
}

.badge {
  height: fit-content;
}

.refer-bg {
  background: linear-gradient(180deg, #FFFFFF -76.68%, #084591 78.73%);
  border-radius: 0px;
  padding: 60px 0px 0px 0px;
  margin: 70px 0px 60px 0px;
  color: #fff;
}

.refer-img {
  height: 220px;
}

.refer-bg h2 {
  font-size: 30px;
}

.abs-buttons {
  display: flex;
  gap: 20px;
}

.abs-buttons a {
  display: flex;
  align-items: center;
  padding: 2px 16px;
  gap: 12px;
  background: linear-gradient(180deg, #3670BF 0%, #193459 100%);
  border-radius: 8px;
  color: #fff;
  text-decoration: none;
  font-size: 16px;
  font-weight: 600;
  text-transform: capitalize;
}

.refer-tab-sec {
  margin: 60px 0px;
}

.referral-tabs .nav-item {
  width: auto;
}

.nav-pills .nav-link {
  display: flex;
  align-items: center;
  gap: 12px;
}

.referral-activity {
  margin: 0;
}

.referral-item {
  min-height: 82px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fafafa;
  border-radius: 8px;
}

.referral-user {
  display: flex;
  align-items: center;
  gap: 12px;
}

.user-avatar {
  width: 52px;
  height: 52px;
  min-width: 52px;
  border-radius: 50%;
  background: var(--primary);
  color: #ffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 500;
}

.user-info h6 {
  margin: 0;
  color: #000;
  font-size: 16px;
  font-weight: 500;
}

.referral-action {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ecoin-badge {
  padding: 7px 12px;
  border-radius: 30px;
  background: #f4e8e3;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.ecoin-icon {
  width: 28px;
  height: 28px;
  min-width: 28px;
  border-radius: 50%;
  background: #f29400;
  border: 2px solid #ffd06b;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 2px 2px 0 #2a1c10;
  font-size: 14px;
  font-weight: 600;
}

.ecoin-text {
  color: #25282c;
  font-size: 14px;
  font-weight: 500;
}

.action-menu {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.action-menu:hover {
  background: rgba(255, 255, 255, 0.1);
}

.action-menu i {
  font-size: 20px;
}

.referral-dropdown {
  min-width: 170px;
  padding: 6px;
  border: 0;
  border-radius: 8px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

.referral-dropdown .dropdown-item {
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
}

.referral-dropdown .dropdown-item i {
  color: #f29400;
}

.wallete-sec {
  background: #f0f0f0;
  padding: 60px 120px 30px 30px;
  border-radius: 12px;
  position: relative;
  background: linear-gradient(0deg, #000000 0%, #300B00 48.21%, #611700 96.42%);
  color: #fff;
  text-transform: capitalize;
  font-weight: 500;
  height: 100%;
  overflow: hidden;
}

.wallete-sec .icon svg {
  width: 70px;
  height: 70px;
}

.wallete-sec h3 {
  margin: 0px;
  font-size: 80px;
  font-weight: bold;
  color: #fff;
  line-height: 1;
}

.referral-timeline {
  position: relative;
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  overflow: hidden;
  margin: 20px 0px 10px 0px;
}

.timeline-line {
  position: absolute;
  top: 20px;
  height: 6px;
  border-radius: 20px;
  background: rgba(42, 42, 42, 0.22);
  z-index: 1;
  width: 100%;
}

.timeline-step {
  position: relative;
  z-index: 2;
  width: 42px;
  text-align: center;
}

.timeline-circle {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(40, 40, 40, 0.08);
  background: #f9f4f2;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  padding: 0;
  cursor: pointer;
  box-shadow:
    0 3px 10px rgba(0, 0, 0, 0.08),
    inset 0 0 0 3px rgba(255, 255, 255, 0.4);
  transition: 0.25s ease;
}

.coin-icon {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #f58b00;
  color: #ffffff;
  border: 1.5px solid #ffc363;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  box-shadow: 2px 2px 0 #2d2522;
  transition: 0.25s ease;
}

.timeline-number {
  margin-top: 8px;
  font-size: 15px;
  font-weight: 500;
  color: #292321;
  line-height: 1;
  transition: 0.25s ease;
}

.timeline-step.active .timeline-circle {
  border: 1.5px solid #d9582b;
  box-shadow:
    0 3px 10px rgba(217, 88, 43, 0.15),
    inset 0 0 0 3px rgba(255, 255, 255, 0.35);
}

.timeline-step.active .coin-icon {
  transform: scale(1.05);
}

.timeline-step.active .timeline-number {
  color: #cf5629;
  font-weight: 700;
}

.timeline-step:hover .timeline-circle {
  transform: translateY(-2px);
}

.timeline-step:hover .coin-icon {
  transform: scale(1.06);
}

.milestone-sec {
  background: #f7e7e2;
  padding: 20px;
  border-radius: 12px;
  text-transform: capitalize;
}

.video-sec iframe {
  width: 100%;
  height: 430px;
  border-radius: 12px;
}

.referral-info-section {
  padding-left: 20px;
}

.referral-points {
  padding-left: 20px;
}

.how-it-works-step {
  margin: 20px 0px;
}

.wallete-sec p {
  font-weight: 600;
  font-size: 20px;
  z-index: 1;
  position: relative;
}

.modal-body .wallete-sec {
  border-radius: 0px;
  margin-top: -1px;
  padding: 30px 100px 30px 30px;
}

.conversion-sec {
  align-items: center;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 4px 16px;
  gap: 6px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 40px;
  width: fit-content;
  margin-top: 16px;
  font-weight: 700;
}

/* Logout Modal */

.logout-modal {
  border: 0;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.14);
}

.logout-modal .modal-body {
  padding: 40px 32px 30px;
  position: relative;
}


/* Close */

.logout-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: #f7f7f7;
  color: #555;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.logout-close:hover {
  background: #eeeeee;
  color: #222;
}


/* Icon */

.logout-icon {
  width: 74px;
  height: 74px;
  margin: 0 auto 22px;
  border-radius: 50%;
  background: #fff0ea;
  color: #e65324;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
}

.logout-icon i {
  transform: translateX(1px);
}


/* Content */

.logout-modal h4 {
  font-size: 23px;
  font-weight: 700;
  color: #242424;
  margin-bottom: 10px;
}

.logout-modal p {
  max-width: 340px;
  margin: 0 auto;
  color: #777;
  font-size: 14px;
  line-height: 1.6;
}


/* Buttons */

.logout-buttons {
  display: flex;
  gap: 12px;
  margin-top: 28px;
}

.logout-buttons .btn {
  flex: 1;
  height: 48px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
}


/* Stay Logged In */

.logout-stay-btn {
  background: #fff;
  border: 1px solid #dedede;
  color: #333;
}

.logout-stay-btn:hover {
  background: #f7f7f7;
  border-color: #d5d5d5;
  color: #222;
}


/* Logout */

.logout-confirm-btn {
  background: #e65324;
  border: 1px solid #e65324;
  color: #fff;
}

.logout-confirm-btn:hover {
  background: #d9471c;
  border-color: #d9471c;
  color: #fff;
}


/* Mobile */

@media (max-width: 575.98px) {

  .logout-modal .modal-body {
    padding: 36px 22px 24px;
  }

  .logout-buttons {
    gap: 10px;
  }

  .logout-modal h4 {
    font-size: 21px;
  }

}

@media (max-width: 767px) {

  .referral-timeline {
    min-height: 95px;
    padding: 20px;
    gap: 28px;
    justify-content: flex-start;
    overflow-x: auto;
  }

  .timeline-line {
    top: 41px;
    left: 45px;
    width: 480px;
    right: auto;
  }

  .timeline-step {
    min-width: 42px;
  }

}

@media (max-width: 991px) {

  .referral-item {
    min-height: 76px;
  }

}

@media (max-width:860px) {

  .transaction-page,
  .offer-page {
    margin: 60px 0px 60px 0px;
  }

  .th-title {
    font-size: 20px;
  }

  .wizard {
    grid-template-columns: 1fr;
  }

  .rail {
    display: flex;
    overflow-x: auto;
    gap: 20px;
    border-right: none;
    border-bottom: 1px solid var(--border);
    padding: 20px;
    height: max-content;
  }

  .rail-step {
    padding: 0px;
    width: auto;
    flex: 0 0 auto;
  }

  .app-header h1 {
    font-size: 16px;
  }

  .rail-step .line {
    display: none;
  }

  .content {
    padding: 28px 22px;
  }

  .bank-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .app-shell {
    margin: 90px auto 60px 0px;
  }

  .app-header {
    margin-bottom: 28px;
  }

  .step-title {
    font-size: 20px;
  }

  .step-sub {
    font-size: 12px;
    margin: 10px 0px 16px 0px;
  }

  .form-field input,
  .search-wrap input {
    border-radius: 8px;
  }

  .selected-bank-chip {
    border-radius: 8px;
  }

  .bank-card .name {
    font-size: 12px;
  }

  .wizard {
    display: flex;
    min-height: auto;
    flex-direction: column;
  }

  #profile-tab {
    flex-direction: row !important;
    overflow-x: scroll;
    flex-wrap: nowrap;
  }

  .nav-pills .nav-link {
    width: auto;
    flex: 0 0 auto;
  }

  .profileContainer {
    margin-top: 60px;
    padding-bottom: 60px;
  }

  .banking-information-sec .row {
    margin: inherit;
  }

  .banking-information-sec .row>div {
    padding: 0px;
  }

  .form-group strong {
    font-size: 14px;
  }

  .tab-content h2 {
    font-size: 20px;
    margin-bottom: 12px;
  }

  body:has(header .fixedHeader) .profileBlock {
    padding: 16px;
    position: fixed;
    top: 64px;
    background: #ffffff;
    width: 100%;
    left: 0;
    box-shadow: 2px 2px 16px #00000030;
  }
}

.milestone-sec {
  background: #ffffff;
  padding: 20px;
  border-radius: 12px;
  text-transform: capitalize;
  border: 1px solid #f4f4f4;
  box-shadow: 1px 1px 4px #e7e7e7;
}

.milestone-sec h3 {
  margin-bottom: 0px;
}

.btn-refer {
  border: 1px dashed #F97F05;
  border-radius: 50px;
  padding: 8px 20px;
  font-weight: 600;
  font-size: 12px;
}

.milestone-bg {
  background: #dd5428;
  padding: 6px 20px;
  margin-top: 12px;
  color: #fff;
  text-transform: capitalize;
  font-weight: 500;
  font-size: 12px;
  border-radius: 12px;
}

.reward-modal {
  border: 0;
  border-radius: 24px;
  overflow: hidden;
  background: #070a0d;
}



.reward-modal .modal-body {
  padding: 20px;
  background: #ffffff;
}

.reward-timeline-wrapper {
  position: relative;
  display: grid;
  grid-template-columns: 55px 1fr;
  gap: 16px;
}

.reward-timeline {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 5px 0;
}

.reward-timeline-line {
  position: absolute;
  top: 40px;
  bottom: 40px;
  left: 22px;
  width: 7px;
  border-radius: 20px;
  background: #9b9b9b;
}

.reward-timeline-step {
  position: relative;
  z-index: 2;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #f5f3f2;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 7px 18px rgba(0, 0, 0, 0.35),
    inset 0 0 0 1px #dddddd;
}

.reward-timeline-icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #f18b00;
  border: 2px solid #ffc45f;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 3px 3px 0 #27211d;
}

.reward-cards {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.reward-card {
  padding: 20px;
  border-radius: 12px;
  background: linear-gradient(135deg, #ffffff 0%, #f0eeee 100%);
  border: 1px solid #d8d8d8;
}

.reward-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 15px;
}

.reward-card h3 {
  margin-bottom: 2px;
  color: #22272d;
  font-size: 20px;
  font-weight: 600;
}

.reward-card p {
  margin: 0px;
  color: #282d33;
  font-size: 14px;
  font-weight: 500;
}

.reward-status {
  padding: 6px 12px;
  border-radius: 20px;
  background: #dff4e9;
  color: #16704b;
  font-size: 12px;
  font-weight: 600;
}

.reward-progress {
  width: 100%;
  height: 10px;
  overflow: hidden;
  border-radius: 20px;
  background: #c6c8cc;
  margin: 8px 0px;
}

.reward-progress-bar {
  height: 100%;
  border-radius: inherit;
  background: #df5a2c;
  transition: width 0.4s ease;
}

.reward-count {
  margin-top: 12px;
  color: #6b7178;
  font-size: 14px;
}

.completed-text {
  color: #19734f;
  font-weight: 500;
}

.reward-next {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #c7c7c7;
  color: #24292f;
  font-size: 14px;
  font-weight: 500;
}

.coin-1-img {
  position: absolute;
  left: 0;
  top: 0;
  width: 120px;
}

.coin-2-img {
  width: 120px;
  height: auto;
  position: absolute;
  right: 0;
  bottom: 0;
}

.offer-card {
  cursor: pointer;
}

.offer-img img {
  height: 140px;
  width: 100%;
  object-fit: cover;
  border-radius: 8px;
}

.offer-card .text-part {
  padding: 16px 0px 0px 0px;
}

.offer-card .text-part h3 {
  font-size: 20px;
}

.offer-card .text-part p {
  line-height: 20px;
  text-transform: capitalize;
  font-size: 12px;
}

#offerModal .modal-content {
  border-radius: 20px;
}

#offerModal .modal-body {
  max-height: 70vh;
  overflow-y: auto;
}

#offerModal .offer-modal-img {
  position: sticky;
  top: 0;
}

#offerModal ul li {
  margin-bottom: 10px;
}

#offerModal .modal-footer {
  background: #fff;
  position: sticky;
  bottom: 0;
}

@media (max-width: 767px) {

  .reward-modal .modal-header {
    padding: 20px;
  }

  .reward-modal .modal-body {
    padding: 20px 15px;
  }

  .reward-timeline-wrapper {
    grid-template-columns: 40px 1fr;
    gap: 12px;
  }

  .reward-timeline-line {
    left: 17px;
  }

  .reward-timeline-step {
    width: 36px;
    height: 36px;
  }

  .reward-timeline-icon {
    width: 24px;
    height: 24px;
    font-size: 11px;
  }

  .reward-card {
    padding: 18px;
    border-radius: 16px;
  }

  .reward-card h3 {
    font-size: 19px;
  }

  .reward-card p,
  .reward-count,
  .reward-next {
    font-size: 15px;
  }

}

/* Chrome, Safari, Edge, Opera */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

.popup-active {
  overflow: hidden;
}

.popup-active ul.mobile-nav-menu {
  display: none;
}

body.no-header.popup-active:after {
  width: 100%;
  height: 100%;
  background: #00000051;
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.operatorSelectBox {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 20px;
  border: var(--bs-border-width) solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
}

input#prepaidOperator {
  border: 0px;
  padding: 0px;
}

img#prepaidOperatorIcon {
  width: 30px;
}

input:-internal-autofill-selected {
  background-color: transparent !important;
}

.planItem.prepaid-mobile-summary .content {
  padding: 8px;
}

/* ============================================================
   PREPAID BROWSE PLANS - PROFESSIONAL UI
============================================================ */

.prepaid-section-title {
  margin-bottom: 14px;
}

.prepaid-mobile-summary {
  border-radius: 10px;
}

.prepaid-operator-logo {
  width: 42px;
  height: 42px;
  min-width: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  object-fit: contain;
  border: 1px solid #cecece42;
  border-radius: 4px;
  box-shadow: 1px 1px 2px 2px #00000008;
}

.prepaid-operator-logo img {
  width: 34px;
  height: 34px;
  object-fit: contain;
}

.prepaid-mobile-number {
  font-size: 14px;
  line-height: 1.3;
}

.prepaid-operator-summary {
  font-size: 12px;
  margin-top: 3px;
}

.prepaid-change-btn:hover {
  text-decoration: underline;
}

.prepaid-divider {
  margin: 24px 0;
}

button#browseChangeMobile {
  background: #dd5428;
  font-size: 12px;
  border: 0px;
  padding: 4px 10px;
  line-height: normal;
  border-radius: 50px;
  color: #fff;
  font-weight: 600;
}

.repeatamount {
  display: flex;
  align-items: center;
}

/* ============================================================
   FILTER PANEL
============================================================ */



.prepaid-filter-heading {
  margin-bottom: 0;
}

.prepaid-clear-filter {
  border: 0;
  background: transparent;
  color: #bf0606;
  font-size: 12px;
  padding: 0;
  cursor: pointer;
}

.prepaid-clear-filter:hover {
  text-decoration: underline;
}

.prepaid-plan-filters {
  margin-top: 18px;
}

.prepaid-filter-group {
  margin-bottom: 22px;
}

.prepaid-filter-group:last-child {
  margin-bottom: 0;
}

.prepaid-filter-group-title {
  color: #222;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 10px;
}

.prepaid-filter-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.prepaid-filter-btn {
  border: 1px solid #dddddd;
  background: #ffffff;
  color: #333333;
  border-radius: 20px;
  padding: 6px 13px;
  font-size: 12px;
  line-height: 1;
  transition: background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;
  cursor: pointer;
}

.prepaid-filter-btn:hover {
  border-color: #bf0606;
  color: #bf0606;
}

.prepaid-filter-btn.active {
  background: #dd5428;
  border-color: #dd5428;
  color: #ffffff;
}

.prepaid-plans-main {
  margin: 40px 0px 0px 0px;
  border-left: 1px solid #cecece51;
  padding-left: 20px;
}

.prepaid-plan-validity {
  font-size: 16px;
  font-weight: 600;
  margin-top: 12px;
}

.prepaid-plan-validity span {
  font-size: 14px;
  font-weight: 500;
}

/* ============================================================
   SEARCH
============================================================ */

.prepaid-search-holder {
  margin-bottom: 20px;
}

.prepaid-search-box {
  position: relative;
}

.prepaid-search-box .form-control {
  height: 46px;
  padding-left: 42px;
  padding-right: 85px;
  border-radius: 8px;
}

.prepaid-search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  z-index: 3;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
}

.prepaid-search-icon img {
  width: 18px;
  height: 18px;
}

.prepaid-search-btn {
  min-width: 76px;
  height: 46px;
  border-radius: 0 8px 8px 0;
}


/* ============================================================
   RESULTS HEADER
============================================================ */

.prepaid-plan-header div {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.prepaid-plan-result-count {
  color: #777;
  font-size: 12px;
}

.prepaid-plan-header {
  margin-bottom: 20px;
}

/* ============================================================
   PLAN LIST
============================================================ */

.prepaid-plan-list {
  max-height: 620px;
  overflow-y: auto;
  padding: 8px;
  margin: -8px;
}

.prepaid-plan-list::-webkit-scrollbar {
  width: 5px;
}

.prepaid-plan-list::-webkit-scrollbar-thumb {
  background: #d8d8d8;
  border-radius: 10px;
}


/* ============================================================
   PLAN CARD
============================================================ */

.prepaid-plan-card {
  border-radius: 10px;
  margin-bottom: 12px;
  transition: box-shadow 0.2s ease,
    transform 0.2s ease;
  background: #ffffff;
  padding: 20px;
  box-shadow: 1px 1px 8px 0px #92929242;
  position: relative;
}

.offer-badge {
  background: #193459;
  color: #fff;
  position: absolute;
  right: 0px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 50px 0px 0px 50px;
  text-transform: capitalize;
}

.prepaid-plan-card:hover {
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.07);
}

.prepaid-plan-card .content {
  border-radius: 10px;
}

.prepaid-plan-card .amount {
  font-size: 21px;
  font-weight: 600;
}

.prepaid-plan-card .text1 {
  gap: 22px;
  margin-left: 22px;
}

.prepaid-plan-card .validity {
  min-width: 70px;
}

.prepaid-plan-card .text2 {
  color: #666;
  font-size: 12px;
  line-height: 1.5;
  margin-top: 10px;
  max-width: 600px;
}

.prepaid-plan-card .repeat {
  cursor: pointer;
}

.prepaid-select-plan {
  border: 0;
  background: transparent;
  color: #bf0606;
  font-weight: 500;
  padding: 0;
}


/* ============================================================
   STATES
============================================================ */

.prepaid-plan-state {
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  border-radius: 10px;
  background: #fafafa;
}


/* ============================================================
   RESPONSIVE
============================================================ */

@media (max-width: 991px) {

  .prepaid-plan-list {
    max-height: none;
    overflow-y: visible;
  }

  .prepaid-filter-panel {
    margin-bottom: 28px;
  }

  .prepaid-plan-card .text1 {
    margin-left: 15px;
    gap: 15px;
  }

}

@media (max-width: 576px) {

  .prepaid-plan-card .repeatoffer {
    width: calc(100% - 65px);
  }

  .prepaid-plan-card .text1 {
    margin-left: 0;
    margin-top: 10px;
  }

  .prepaid-plan-card .text2 {
    margin-top: 10px;
  }

  .prepaid-search-box .form-control {
    padding-right: 70px;
  }

  .prepaid-search-btn {
    min-width: 60px;
    font-size: 12px;
  }

}

/* ============================================================
   BBPS SUCCESS MODAL
============================================================ */

.bbps-success-modal {
  position: relative;
  border-radius: 18px;
}


/* ============================================================
   CLOSE BUTTON
============================================================ */




/* ============================================================
   BHARAT CONNECT ASSURED LOGO
============================================================ */



/* LOGO SIZE */


/* ============================================================
   SUCCESS CONTENT
============================================================ */

.bbps-success-modal .modal-body {
  padding-top: 45px !important;
}


/* ============================================================
   SUCCESS ICON
============================================================ */

.bbpsSuccessIcon {
  width: 70px;
  height: 70px;

  border-radius: 50%;

  margin: 10px auto 15px;

  display: flex;
  align-items: center;
  justify-content: center;

  background: #e8f8ee;
  color: #198754;

  font-size: 40px;
  font-weight: 700;
}


/* ============================================================
   SUCCESS TITLE
============================================================ */

.bbps-success-title {
  font-size: 20px;
  font-weight: 700;
  color: #198754;
  margin-bottom: 8px;
}


/* ============================================================
   SUCCESS MESSAGE
============================================================ */



/* ============================================================
   TRANSACTION DETAILS
============================================================ */

.bbpsSuccessDetails {
  width: 100%;
  margin: 20px auto 0;
}







.bbps-success-table td {
  padding: 12px;

  font-size: 11px;
  font-weight: 600;

  color: #222;

  word-break: break-word;
}


/* ============================================================
   ACTION BUTTONS
============================================================ */

.bbps-success-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
}


.bbps-view-receipt-btn,
.bbps-close-btn {
  min-width: 130px;
  padding: 10px 20px;

  border-radius: 8px;

  font-size: 14px;
  font-weight: 600;
}


/* ============================================================
   RESPONSIVE
============================================================ */



/* ============================================================
    BHARAT CONNECT ASSURED LOGO
 ============================================================ */



/* ============================================================
   LOGO — LARGE & CLEAR
============================================================ */


/* ============================================================
   CLOSE BUTTON
============================================================ */




/* ============================================================
   SUCCESS MODAL CONTENT
============================================================ */

.bbps-success-modal {
  position: relative;
  border-radius: 18px;
}

</style>< !--============================================================PAYMENT SUCCESS AUDIO============================================================--><audio id="bbpsSuccessAudio"
preload="auto"
><source src="<?= base_url('assets/audio/bbps-payment-success.mp3') ?>"
type="audio/mpeg"
></audio><style>
/* ============================================================
   BBPS SUCCESS TRANSACTION TABLE
   ============================================================ */

.bbpsSuccessDetails {
  width: 100%;
}

.bbps-success-table {
  width: 100%;
  table-layout: fixed;
  border-radius: 8px;
  overflow: hidden;
}

.bbps-success-table th {
  width: 50%;
  padding: 8px;
  background: #f5f6f8;
  color: #555;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  border: 1px solid #e5e7eb;
}

.bbps-success-table td {
  width: 50%;
  padding: 8px;
  background: #fff;
  color: #222;
  font-size: 10px;
  font-weight: 600;
  text-align: center;
  word-break: break-word;
  border: 1px solid #e5e7eb;
}

/* ============================================================
   BBPS CONFIRMATION MODAL
   ============================================================ */

.bbps-confirm-dialog {
  max-width: 400px;
  width: calc(100% - 30px);
}

.bbps-confirm-modal {
  position: relative;
  border: none;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 15px 45px rgba(0, 0, 0, 0.18);
  overflow: hidden;
}

/* ============================================================
   CLOSE BUTTON
   ============================================================ */

.bbps-confirm-close {
  position: absolute;
  top: 15px;
  right: 15px;

  width: 32px;
  height: 32px;

  border-radius: 50%;
  opacity: 0.65;

  z-index: 10;
}

.bbps-confirm-close:hover {
  opacity: 1;
}

/* ============================================================
   BODY
   ============================================================ */

.bbps-confirm-body {
  padding: 45px 30px 30px;
  text-align: center;
}

/* ============================================================
   TITLE
   ============================================================ */

.bbps-confirm-title {
  margin: 0 0 28px;

  font-size: 24px;
  font-weight: 700;
  line-height: 1.3;

  color: #222222;
}

/* ============================================================
   BUTTON CONTAINER
   ============================================================ */

.bbps-confirm-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;

  width: 100%;
}

/* ============================================================
   COMMON BUTTON STYLE
   ============================================================ */

.bbps-confirm-yes-btn,
.bbps-confirm-no-btn {
  flex: 1;

  padding: 8px 18px;

  border: none;
  border-radius: 8px;

  font-size: 15px;
  font-weight: 600;

  cursor: pointer;

  transition:
    background-color 0.2s ease,
    transform 0.15s ease,
    box-shadow 0.2s ease;
}

.bbps-confirm-yes-btn:active,
.bbps-confirm-no-btn:active {
  transform: scale(0.98);
}

/* ============================================================
   YES - GREEN
   ============================================================ */

.bbps-confirm-yes-btn {
  background: #198754;
  color: #ffffff;

  box-shadow: 0 4px 10px rgba(25, 135, 84, 0.20);
}

.bbps-confirm-yes-btn:hover {
  background: #157347;
  color: #ffffff;

  box-shadow: 0 6px 14px rgba(25, 135, 84, 0.28);
}

/* ============================================================
   NO - GRAY
   ============================================================ */

.bbps-confirm-no-btn {
  background: #6c757d;
  color: #ffffff;

  box-shadow: 0 4px 10px rgba(108, 117, 125, 0.18);
}

.bbps-confirm-no-btn:hover {
  background: #5c636a;
  color: #ffffff;

  box-shadow: 0 6px 14px rgba(108, 117, 125, 0.25);
}

/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 480px) {

  .bbps-confirm-dialog {
    width: calc(100% - 24px);
  }

  .bbps-confirm-body {
    padding: 42px 20px 24px;
  }

  .bbps-confirm-title {
    font-size: 22px;
    margin-bottom: 24px;
  }

  .bbps-confirm-buttons {
    gap: 10px;
  }

  .bbps-confirm-yes-btn,
  .bbps-confirm-no-btn {
    padding: 8px 12px;
    font-size: 14px;
  }
}


/* ============================================================
   BBPS SUCCESS MODAL
   ============================================================ */

.bbps-success-dialog {
  max-width: 620px;
  width: calc(100% - 30px);
}

.bbps-success-modal {
  position: relative;
  border: 0;
  border-radius: 18px;
}


/* ============================================================
   CLOSE BUTTON
   ============================================================ */

.bbps-success-close {
  position: absolute;
  top: 0px;
  right: -50px;
  z-index: 10;
  width: 32px;
  height: 32px;
  padding: 0;
  opacity: 2;
  background-color: #fff;
  border-radius: 50px;
}

.bbps-success-close:hover {
  opacity: 1;
}


/* ============================================================
   SUCCESS ICON
   ============================================================ */

.bbpsSuccessIcon {
  width: 78px;
  height: 78px;

  border-radius: 50%;

  margin: 0 auto;

  display: flex;
  align-items: center;
  justify-content: center;

  background: #e8f8ee;

  color: #198754;

  font-size: 44px;
  font-weight: 700;

  border: 5px solid #d5f2df;
}


/* ============================================================
   SUCCESS TITLE
   ============================================================ */



/* ============================================================
   SUCCESS MESSAGE
   ============================================================ */


/* ============================================================
   BHARAT CONNECT LOGO
   ============================================================ */



/* ============================================================
   SUCCESS TRANSACTION DETAILS
   ============================================================ */

.bbpsSuccessDetails {
  width: 100%;
  margin: 20px auto 0;
  text-align: center;
}




.bbps-detail-row {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 20px;

  padding: 12px 0;

  border-bottom: 1px solid #e5e5e5;
}


.bbps-detail-row:last-child {
  border-bottom: 0;
}


.bbps-detail-label {
  color: #666;

  font-size: 15px;

  white-space: nowrap;
}


.bbps-detail-value {
  color: #222;

  font-size: 15px;

  text-align: right;

  word-break: break-all;
}


/* ============================================================
   ACTION BUTTONS
   ============================================================ */

.bbps-success-actions {
  display: flex;

  justify-content: center;

  gap: 12px;
}


/* VIEW RECEIPT - BLUE */

.bbps-view-receipt-btn {
  min-width: 150px;
  background: #dd5428;
  border: 1px solid #dd5428;
  color: #fff;
  font-weight: 600;
  padding: 11px 24px;
  border-radius: 7px;
}



/* CLOSE - BROWN */

.bbps-close-btn {
  min-width: 120px;

  background: #795548;

  border: 1px solid #795548;

  color: #fff;

  font-weight: 600;

  padding: 11px 24px;

  border-radius: 7px;
}

.bbps-close-btn:hover {
  background: #5d4037;

  border-color: #5d4037;

  color: #fff;
}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 576px) {

  .bbps-success-dialog {
    width: calc(100% - 20px);
  }

  .bbps-success-title {
    font-size: 24px;
  }

  .bbps-success-message {
    font-size: 12px;
  }

  .bbps-detail-row {
    align-items: flex-start;

    flex-direction: column;

    gap: 5px;
  }

  .bbps-detail-value {
    text-align: left;
  }

  .bbps-success-actions {
    flex-direction: column;
  }

  .bbps-view-receipt-btn,
  .bbps-close-btn {
    width: 100%;
  }
}


/* ============================================================
   SUCCESS ICON
   ============================================================ */

.bbps-success-icon-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 5px;
  margin-bottom: 18px;
}

.bbps-success-icon {
  width: 82px;
  height: 82px;
  border-radius: 50%;

  display: flex;
  align-items: center;
  justify-content: center;

  background: #e8f8ee;

  border: 6px solid #f4fcf7;

  box-shadow:
    0 0 0 1px rgba(25, 135, 84, 0.08);
}

.bbps-success-icon span {
  color: #198754;
  font-size: 46px;
  font-weight: 700;
  line-height: 1;
}


/* ============================================================
   SUCCESS TITLE
   ============================================================ */
.sucess-logo-sec {
  margin-bottom: 20px;
}

.bbps-success-message {
  margin-top: 8px;
  margin-bottom: 22px;

  color: #444;

  font-size: 14px;
  line-height: 1.5;
}


/* ============================================================
   ASSURED BY BHARAT CONNECT
   ============================================================ */

.bbps-assured-logo {
  position: absolute;
  top: 16px;
  right: 18px;
  margin: 0 !important;
  z-index: 10;
}

.bbps-assured-logo .bharat-connect-logo {
  width: 130px;
  height: 120px;
  object-fit: contain;
  display: block;
}

.bbps-assured-text {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  padding: 9px 18px;

  border: 1px solid #e2e8e5;
  border-radius: 30px;

  background: #fff;

  color: #666;

  font-size: 13px;
}

.bbps-assured-text strong {
  color: #333;
  font-weight: 700;
}

.bbps-assured-check {
  width: 22px;
  height: 22px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;

  background: #198754;
  color: #fff;

  font-size: 13px;
  font-weight: 700;
}


/* ============================================================
   SUCCESS DETAILS
   ============================================================ */

.bbps-success-details {
  width: 100%;

  padding: 5px 16px;

  background: #f8f9fa;

  border-radius: 12px;

  text-align: left;
}


.bbps-detail-row {
  display: flex;

  justify-content: space-between;
  align-items: flex-start;

  gap: 20px;

  padding: 13px 0;

  border-bottom: 1px solid #e9ecef;
}


.bbps-detail-row:last-child {
  border-bottom: 0;
}


.bbps-detail-label {
  color: #6c757d;

  font-size: 13px;

  flex-shrink: 0;
}


.bbps-detail-value {
  color: #212529;

  font-size: 13px;

  text-align: right;

  word-break: break-word;
}


.bbps-reference-id {
  max-width: 210px;

  font-family: monospace;

  font-size: 11px;
}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 576px) {

  .bbps-success-modal {
    margin: 15px;
  }

  .bbps-detail-row {
    gap: 10px;
  }

  .bbps-detail-value {
    max-width: 65%;
  }

  .bbps-reference-id {
    font-size: 10px;
  }

  /* ============================================================
   BBPS CONFIRMATION MODAL
   ============================================================ */

  .bbps-confirm-dialog {
    max-width: 520px;
    width: calc(100% - 30px);
  }


  /* ============================================================
   MODAL
   ============================================================ */

  .bbps-confirm-modal {
    position: relative;
    border: 0;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
  }


  /* ============================================================
   CLOSE BUTTON
   ============================================================ */

  .bbps-confirm-close {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 10;

    width: 34px;
    height: 34px;

    border-radius: 50%;

    background-color: #f5f5f5;

    opacity: 1;
    padding: 0;

    display: flex;
    align-items: center;
    justify-content: center;
  }

  .bbps-confirm-close:hover {
    background-color: #eeeeee;
  }


  /* ============================================================
   MODAL BODY
   ============================================================ */

  .bbps-confirm-modal .modal-body {
    padding: 42px 45px 38px;
  }


  /* ============================================================
   CONFIRMATION ICON
   ============================================================ */

  .bbps-confirm-icon {
    width: 90px;
    height: 90px;

    margin: 0 auto 20px;

    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #fff4d6;
    color: #d99a00;

    font-size: 58px;
    font-weight: 700;
    line-height: 1;

    border: 8px solid #fff9eb;
  }


  /* ============================================================
   TITLE
   ============================================================ */

  .bbps-confirm-title {
    margin: 0 0 10px;

    font-size: 27px;
    font-weight: 700;

    color: #222;
  }


  /* ============================================================
   MESSAGE
   ============================================================ */

  .bbps-confirm-message {
    margin: 0 auto 22px;

    max-width: 390px;

    font-size: 15px;
    line-height: 1.6;

    color: #6c757d;
  }


  /* ============================================================
   AMOUNT BOX
   ============================================================ */

  .bbps-confirm-amount-box {
    background: #f8f9fa;

    border-radius: 10px;

    padding: 14px 18px;

    margin: 0 auto 25px;

    max-width: 360px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;
  }

  .bbps-confirm-amount-label {
    font-size: 14px;
    color: #666;
  }

  .bbps-confirm-amount {
    font-size: 20px;
    color: #222;
  }


  /* ============================================================
   CONFIRMATION BUTTONS
   ============================================================ */

  .bbps-confirm-buttons {
    display: flex;
    gap: 12px;
    width: 100%;
  }


  /* ============================================================
   YES, CONTINUE
   ============================================================ */

  .bbps-confirm-yes-btn:focus {
    box-shadow: 0 0 0 3px rgba(25, 135, 84, 0.20);
  }

  .bbps-confirm-yes-btn:disabled {
    opacity: 0.65;
    cursor: not-allowed;
  }


  /* ============================================================
   NO, CANCEL
   ============================================================ */

  .bbps-confirm-no-btn {
    flex: 1;

    border: none;
    border-radius: 8px;

    padding: 13px 18px;

    font-size: 15px;
    font-weight: 600;

    color: #fff;
    background: #6c757d;

    transition: all 0.2s ease;
  }

  .bbps-confirm-no-btn:hover {
    background: #5c636a;
    color: #fff;
  }

  .bbps-confirm-no-btn:focus {
    box-shadow: 0 0 0 3px rgba(108, 117, 125, 0.20);
  }
}

@media (max-width: 576px) {

  .bbps-success-close {
    top: 20px;
    right: 20px;
    background-color: #dd5428;
  }

  .bbps-success-modal .modal-body {
    padding-top: 30px !important;
  }

  .bbps-assured-logo {
    position: static;
    margin: 20px auto 0px auto !important;
    z-index: 10;
  }

  .bbps-success-actions {
    flex-direction: column;
  }

  .bbps-view-receipt-btn,
  .bbps-close-btn {
    width: 100%;
  }
}

.prepaid-plan-amount {
  font-size: 30px;
  font-weight: 700;
  line-height: normal;
}

.prepaid-plan-description {
  margin: 12px 0px;
  border-top: 1px solid #cecece;
  padding-top: 12px;
  font-size: 12px;
}

#prepaidPlanSearchBtn {
  background: #dd5428;
  color: #fff;
  font-weight: 500;
}

.form-control::placeholder {
  color: #cecece !important;
  opacity: 1;
}
.social-flex ul {
    display: flex;
    gap: 12px;
    padding: 0px;
    margin: 0px;
}
.social-flex ul li {
    list-style: none;
}
/* for login popup */
.regLogLft {
  display: none;
}

.reglogForm,
.verifyOtp {
  width: 100%;
}

.btnContainer {
  padding: 0px !important;
}

.robotimg {
  margin: 0px 0px -24px 0px;
}

.popupHolder h2 {
  font-size: 24px;
  line-height: normal;
}

.regFormField p {
  font-size: 14px;
  margin: 14px 0px;
}

.btnContainer p {
  margin: 4px 0px 0px 0px;
}

.regForm button {
  margin: 10px 0px;
}
.providerItem {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    border-bottom: 1px solid #cecece33;
}
.providerItem img {
    width: 40px;
    height: 40px;
    border-radius: 8px;
}
.sectionElectricity {
    margin-top: -60px;
}
#sectionBBPS .utilityIcon img {
    filter: brightness(1) invert(1);
}
#sectionBBPS .utilityIcon {
    background: #dd5428;
    box-shadow: none;
}
.small-text {
    color: gray;
    font-size: 12px;
}
.due-sec {
    background: #fde4dc;
    padding: 12px;
    border-radius: 8px;
    align-items: center;
    justify-content: space-between;
}
div#dueAmount {
    color: #dd5428;
    font-size: 30px;
    font-weight: 600;
    line-height: 36px;
}
.due-date {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.due-date .icon {
    background: #dd5428;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
}
div#creditCardPaymentOptions {
    font-size: 14px;
}
div#creditCardPaymentOptions {
    font-size: 14px;
    border-bottom: 1px solid #cecece51;
    margin: 20px 0px;
    padding-bottom: 10px;
}
.ad-banner-sec {
    height: 100%;
    background: #ebebeb;
    display: flex;
    justify-content: center;
    padding: 30px;
    border-radius: 12px;
    color: #000000;
    text-transform: capitalize;
}
.welcome-user.isUser:hover .myAccountmenu {
    display: block;
}
.verifyOtp {
    padding: 40px 40px 10px 40px!important;
}
.createPin,.pinCreated {
    padding: 40px;
}
.teamMemberCard.directorCard {
    text-align: center;
}
.teamMemberImage {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    overflow: hidden;
    margin: auto;
}
.form-control, .form-select {
    font-size: 14px;
    border-radius: 8px!important;
    height: 42px;
}
.regForm div {
    padding-bottom: 10px;
}
.help-sec ul {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0px;
}
.help-sec ul li {
    list-style: none;
}
.help-sec ul li a {
    color: #fff;
    text-decoration: none;
}