:root {
  --red: #ea827e;
  --light-red: #ea827e3b;
  --blue: #0f4454;
  --white: #ffffff;
  --light-gray: #667784;
  --light-gray-down: #909aa23e;
  --light-white: #f1fffb;
  --dull-white: #eaeaea;
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

@font-face {
  font-family: "bozon-demibols";
  src: url("d-font/Bozon-DemiBold.ttf") format("truetype");
}

@font-face {
  font-family: "bozon-bold";
  src: url("d-font/Bozon-Bold.ttf") format("truetype");
}

@font-face {
  font-family: "bozon-regular";
  src: url("d-font/Bozon-Regular.ttf") format("truetype");
}

html {
  font-size: 62.5%;
  scroll-behavior: smooth;
}

body {
  overflow-x: hidden;
}

h1 {
  font-family: "bozon-bold";
  font-size: 4.2rem;
  font-weight: 900;
}

h2 {
  font-family: "bozon-bold";
  font-size: 3.2rem;
  font-weight: 900;
}

h3 {
}

h4 {
  font-family: "bozon-demibols";
  font-size: 2.1rem;
}

h5 {
  font-family: "bozon-demibols";
  font-size: 1.6rem;
}

h6 {
  font-size: 1.2rem;
  font-family: "bozon-demibols";
  font-weight: 300;
}

p {
  font-family: "bozon-regular";
  font-size: 1.6rem;
  line-height: 2.6rem;
  font-weight: 400;
}

a {
  display: block;
  text-decoration: none;
  font-family: "bozon-demibols";
  font-size: 1.6rem;
  font-weight: 400;
}

li {
  list-style: none;
}

input {
  font-family: "bozon-regular";
  font-size: 1.6rem;
}

input::placeholder {
  font-family: "bozon-regular";
  font-size: 1.6rem;
}
.pp-tc-li {
  font-size: 1.6rem;
  font-family: "bozon-regular";
  list-style-type: disc;
}
/* ============= */
.wrapper-heading {
  margin: auto;
  padding: 4rem 4rem 0rem 4rem;
}

.wrapper {
  margin: auto;
  padding: 4rem 4rem;
}

.grid {
  display: grid;
  gap: 2rem;
}

.grid-two-cols {
  grid-template-columns: 1fr 1fr;
}

.grid-three-cols {
  grid-template-columns: 1fr 1fr 1fr;
}

.grid-four-cols {
  grid-template-columns: 1fr 1fr 1fr 1fr;
}

.grid-five-cols {
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}

/* ========reuse code btn========= */
/* ========reuse code btn========= */
.banner-top-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5rem;
  padding: 1.5rem;
  background-color: var(--red);
  margin: 2rem auto 0;
  text-transform: uppercase;
  border-radius: 5rem;
  position: relative;
  text-align: center;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.banner-top-btn h6 {
  color: var(--white);
  padding-left: 1rem;
  margin: 0;
}

.banner-top-btn .img-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 1rem;
}

.banner-top-btn .img-wrapper::before {
  content: "";
  position: absolute;
  width: 4rem;
  height: 4rem;
  background-color: var(--blue) !important;
  border-radius: 50%;
  z-index: 0;
}

.banner-top-btn .img-wrapper img {
  position: relative;
  z-index: 1;
  width: 1.5rem;
  /* Optional: adjust image size */
  height: auto;
  margin-top: 0.7rem;
}

.p-r-14 {
  font-size: 1.4rem;
  font-family: "bozon-regular";
}

/* ========reuse code btn========= */
/* ========reuse code btn========= */

/* ========pre loader========= */
/* ========pre loader========= */

.pre-loader-h1 {
  color: white;
  font-size: 6.5rem;
  font-weight: bold;
  margin-bottom: 0px;
  letter-spacing: -2px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  font-family: "bozon-bold";
  visibility: hidden;
}

.pre-loader-h1-2 {
  color: white;
  font-size: 5rem;
  font-weight: bold;
  /* margin-bottom: 30px; */
  letter-spacing: -2px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  font-family: "bozon-bold";
  opacity: 0;
  visibility: hidden;
}
.main-loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: var(--red);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 0; /* Removed padding */
}

.loader_inner {
  position: absolute;
  top: 60%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  width: 100%;
  padding: 0 30em 0 28rem;
  box-sizing: border-box;
}

.percentage-text {
  color: white;
  font-size: 8.5rem;
  font-weight: bold;
  margin-bottom: 30px;
  letter-spacing: -2px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  font-family: "bozon-bold";
}

.progress-container {
  width: 100%;
  height: 8px;
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

.progress-bar {
  height: 100%;
  background-color: white;
  width: 0%;
  transition: width 0.1s ease-out;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.loading-text {
  color: white;
  font-size: clamp(14px, 2.5vw, 18px);
  margin-top: 20px;
  opacity: 0.8;
  font-weight: 300;
  animation: pulse 2s infinite;
  font-family: "bozon-regular";
}

@keyframes pulse {
  0%,
  100% {
    opacity: 0.8;
  }

  50% {
    opacity: 1;
  }
}

.loading-complete {
  transform: translateY(-100vh);
  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* When loader is gone, this will show the site */
.website-content.show {
  opacity: 1 !important;
  transform: translateY(0) !important;
  z-index: 1 !important;
  transition: all 1s ease-out;
}

/* ========pre loader========= */
/* ========pre loader========= */

/* =========header========= */
/* =========header========= */
/* =========header========= */
/* =========header========= */
.header {
  position: relative;
}

#menu-toggle {
  display: none;
}

#main-header {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  background: var(--white);
  z-index: 1000;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  will-change: transform;
}

/* Hide navbar on scroll down */
#main-header.hide {
  transform: translateY(-100%);
  box-shadow: none;
}

/* Add shadow only when visible */
#main-header.shadow {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.navbar {
  margin: auto;
  padding: 0rem 4rem;
  height: 8rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* display: none; */
}

.navbar img {
  width: 145px;
  height: 51.6px;
}

.nav-ul ul {
  display: flex;
  align-items: center;
  gap: 3rem;
}

.nav-ul ul li a {
  color: var(--blue);

  font-weight: 600;
  text-decoration: none;
}

.nav-btn {
  background-color: var(--red);
  width: 20rem;
  height: 5.3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5rem;
}

.nav-btn a {
  color: var(--white);
  text-decoration: none;
  font-size: 1.4rem;
}

.nav-btn-mobile {
  display: none;
}

.header-icons {
  display: none;
}

.header-social-iconss {
  display: none;
}

.header-social-icons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
}

.header-social-icons img {
  width: 25px;
  height: 25px;
}

.ri-close-large-line {
  color: var(--red);
}

.burger-icon {
  display: none;
}

/* =========banner========= */
/* =========banner========= */
/* =========banner========= */
/* =========banner========= */
.banner {
  margin: auto;
  padding: 0rem 4rem;
  /* margin-top: 10.5rem; */
}

.banner-bg {
  height: calc(100vh - 4rem - 4rem);
  position: relative;
  width: 100%; 
  background-image: url(assets/mainBanner.webp);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 2rem;
  overflow: hidden;
  /* Ensures border-radius clips the background */
}

.banner-top-data {
  text-align: center;
  padding-top: 7rem;
  margin-bottom: 4rem;
}

.banner-top-data h1 {
  width: 40%;
  margin: 0 auto;
  color: var(--white);
}

.banner-top-data p {
  margin-top: 2rem;
  color: var(--white);
}

.banner-bottom {
  position: absolute;
  bottom: -2rem;
}

.banner-bottom-data {
  backdrop-filter: blur(10px);
  background: #ffffff30;
  padding: 1.5rem;
  border-radius: 2rem;
}

.banner-bottom-sub-data {
  display: flex;
  align-items: center;
  gap: 3rem;
}

.banner-bottom-sub-img img {
  width: 88px;
  height: 88px;
}

.banner-bottom-sub-para {
  color: var(--white);
}

.banner-bottom-sub-para h5:nth-child(1) {
  padding-bottom: 1.5rem;
}

.banner-bottom-sub-para p:nth-child(2) {
}

/* =========about========= */
/* =========about========= */
/* =========about========= */
/* =========about========= */
.about {
  position: relative;
  width: 100%;
  height: 100%;
}

.about .wrapper-heading {
  text-align: center;
}

.about .wrapper-heading h4 {
  padding-bottom: 1rem;
  color: var(--light-gray);
}

.about .wrapper-heading h1 {
  color: var(--blue);
  margin: 0 auto;
  width: 50%;
}

.wh-para1 {
  color: var(--light-gray);
  padding: 4rem 0 0rem 0;
}

.wh-para1 span {
  color: var(--light-gray);
  font-weight: 600;
}

.wh-para2 {
  color: var(--light-gray);
  padding: 2rem 0;
  width: 90%;
  margin: 0 auto;
}

.wh-para2 span {
  color: var(--light-gray);
  font-weight: 600;
}

/* =====read more===== */
.about-read-more {
  height: 0rem;
  overflow: hidden;
  transition: all 0.3s linear;
}

.about-read-more p span {
  color: var(--light-gray);
  font-weight: 600;
}

.show-more {
  height: 6rem;
}

.about-read-more p {
  color: var(--light-gray);
  width: 90%;
  margin: 0 auto;
}

.about-rm {
  color: var(--red);
  cursor: pointer;
  border-bottom: 3px solid var(--red);
  display: inline-flex;
  font-size: 1.4rem;
  font-family: "bozon-bold";
}

/* =========Key Highlights========= */
/* =========Key Highlights========= */
/* =========Key Highlights========= */
/* =========Key Highlights========= */
.key-highlights {
  position: relative;
  width: 100%;
}

.key-highlights .grid {
  gap: 5rem;
}

.key-highlights .wrapper-heading h2 {
  padding-left: 5rem;
  color: var(--blue);
}

.dd {
  overflow-y: scroll;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.key-highlights-box .grid {
  gap: 3rem;
}

.key-highlights-box img {
  width: 100%;
  height: auto;
  max-height: 620px;
  object-fit: cover;
  border-radius: 2rem;
}

.highlights-box-right {
  border: 1px solid var(--light-gray-down);
  padding: 3.3rem;
  border-radius: 2rem;
  transition: all 0.3s ease-in-out;
  background-color: var(--light-red);
}

.highlights-box-right:hover {
  background-color: var(--blue);
}

.highlights-box-right:hover h5 {
  color: white;
}

.highlights-box-right h4 {
  color: var(--red);
  padding-bottom: 2rem;
  font-family: "bozon-bold";
}

.highlights-box-right h5 {
  color: var(--light-gray);
  line-height: 3rem;
}

.key-mobile {
  display: none !important;
}

/* ========= vision & mission========= */
/* ========= vision & mission========= */
/* ========= vision & mission========= */
/* ========= vision & mission========= */
.vis-mis {
  position: relative;
  width: 100%;
  height: 100%;
}

.vis-mis .wrapper {
  padding-top: 0;
}

.vis-mis-bg {
  padding: 4rem;
  background-color: var(--blue);
  border-radius: 2rem;
}

.vis-mis-bg h4 {
  color: var(--white);
  font-weight: 400;
}

.vis-mis-heading h1 {
  color: var(--white);
  padding-top: 1rem;
}

.vis-mis-heading {
  padding-bottom: 1.5rem;
}

.vis-min-box-data {
  background-color: var(--white);
  padding: 3rem;
  border-radius: 2rem;
  text-align: left;
  transition: all 0.3s ease-in-out;
}

.vis-min-box-data h2 {
  color: var(--red);
  padding-bottom: 2rem;
}

.vis-min-box-data:hover {
  background-color: var(--red);
}

.vis-min-box-data:hover h2,
.vis-min-box-data:hover h5 {
  color: var(--white);
}

.vis-min-box-data h4 {
  padding-bottom: 3rem;
  color: var(--red);
  font-weight: 600;
}

.vis-min-box-data h5 {
  line-height: 3.5rem;
  color: var(--light-gray);
}

.vis-mis-box {
  text-align: right;
}

.vis-mis-box img {
  width: 90%;
  height: 100%;
  object-fit: cover;
  border-radius: 2rem;
}
.vm-left {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  gap: 2rem;
}
/* =========  Values & Brand Personality========= */
/* =========  Values & Brand Personality========= */
/* =========  Values & Brand Personality========= */
/* =========  Values & Brand Personality========= */

.value-brand-box .grid-three-cols {
  grid-template-columns: 1fr 0.1fr 1fr;
}
.value-owl .owl-nav {
  margin-top: -30px !important;
}

.value-brand-box .grid {
  gap: 0;
}

.value-brand {
  position: relative;
  width: 100%;
  padding-top: 25rem;
  /* Push content down to float on image */
}

.value-brand-bg {
  background-image: url(assets/ourvaluebg.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 50rem;
  /* Adjust height as per image visibility */
  z-index: -1;
}

.value-brand-box {
  position: relative;
  background-color: var(--white);
  border: 1px solid var(--light-gray-down);
  border-radius: 2rem;
  padding: 0rem 3rem;
  overflow: hidden;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);
  /* bottom: 7rem; */
}

.value-line {
  background-color: var(--light-gray-down);
  width: 0.2rem;
  height: 80%;
  margin: auto;
}

.value-brand-left {
  padding: 3rem;
}

.vb-para1 {
  color: var(--light-gray);
  font-weight: 600;
}

.vb-head1 {
  color: var(--blue);
  line-height: 5rem;
  margin-top: 2rem;
  width: 90%;
}

/* .vb-head2 {
  color: var(--blue);
  line-height: 5rem;
  margin-bottom: 3rem;
} */

.vb-para .vb-para2 {
  color: var(--light-gray);
  padding-top: 4rem;
  padding-bottom: 3rem;
}

.vb-para .vb-para3 {
  color: var(--light-gray);

  padding-bottom: 3rem;
}

.vb-line {
  height: 80%;
  width: 2px;
  background-color: var(--light-gray-down);
  margin: 2rem 0;
  margin: auto 0;
}

/* =====value-brand slider======= */
.value-brand-right {
  overflow: hidden;
  padding: 3rem 1rem;
}

.value-brand-data {
  padding: 3rem 0rem;
}

.value-brand-data img {
  width: 90px !important;
  height: 90px !important;
}

.value-brand-data h4 {
  color: var(--red);
  line-height: 2.7rem;
  width: 77%;
  padding: 2rem 0px;
  font-family: "bozon-bold";
}

.value-brand-data p {
  color: var(--light-gray);
  padding: 1rem 0 3rem 0;
  font-family: "bozon-demibols";
}

.value-brand-right .owl-nav {
  display: block !important;
  background-color: var(--red);
  width: 77px;
  height: 35px;
  border-radius: 5rem;
  position: absolute;
  right: 10%;
}

.value-brand-right .owl-nav .owl-prev {
  color: var(--white) !important;
  position: absolute !important;
  left: 0% !important;
  top: 6%;
}

.owl-nav .owl-prev i,
.owl-nav .owl-next i {
  font-size: 2rem;
}

.value-brand-right .owl-nav .owl-prev:hover,
.value-brand-right .owl-nav .owl-next:hover {
  background-color: transparent !important;
}

.value-brand-right .owl-nav .owl-next {
  color: var(--white) !important;
  position: absolute !important;
  right: 0% !important;
  top: 6%;
}

/* =========Meet Our Founders========= */
/* =========Meet Our Founders========= */
/* =========Meet Our Founders========= */
/* =========Meet Our Founders========= */
.founder {
  position: relative;
  width: 100%;
  height: 100%;
  /* padding: 0rem 4rem; */
  overflow: hidden;
}

.founder .wrapper {
  padding: 0rem 4rem 4rem 4rem;
}

.founder .grid {
  gap: 0rem;
}

.founder-bg {
  background-color: var(--light-red);
  border-radius: 2rem;
}

.founder-left {
  padding: 5rem;
}

.founder-left .f-para1 {
  font-weight: 600;
  color: var(--light-gray);
}

.founder-left .f-head1 {
  color: var(--blue);
  line-height: 5rem;
  margin-top: 3rem;
}

.founder-left .f-head2 {
  color: var(--blue);
  line-height: 8rem;
}

.founder-left .f-para2 {
  margin-top: 3rem;
  color: var(--light-gray);
}

.founder-left .f-para2 span {
  font-weight: 600;
}

.founder-right {
  background-color: var(--red);
  overflow: hidden;
  border-top-right-radius: 2rem;
  border-bottom-right-radius: 2rem;
  padding: 5rem 5rem 9rem 5rem;
}

.founder-data {
  background-color: var(--blue);
  padding: 3rem;
  border-radius: 2rem;
  width: 89%;
}

.founder-data img {
  width: 138px !important;
  height: 138px;
  border-radius: 2rem;
}

.founder-data h4 {
  color: var(--red);
  margin-top: 2rem;
  font-family: "bozon-bold";
}

.founder-data span {
  color: var(--red);
  padding-top: 0.5rem;
  display: block;
  font-style: italic;
  font-size: 1.4rem;
  font-family: "bozon-demibols";
}

.founder-data .founder-right-para1 {
  color: var(--dull-white);
  padding: 3rem 0;
  /* text-align: justify; */
}

.founder-data .founder-right-para1 strong {
  font-weight: 400;
}

.founder-social-link {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.founder-social-link img {
  width: 20px !important;
  height: 20px !important;
  border-radius: 0% !important;
}

.founder-social-link a {
  color: var(--white);
  text-decoration: underline;
  font-size: 1.4rem;
}

.founders-owl .owl-nav {
  display: block !important;
  background-color: var(--blue) !important;
  width: 84px !important;
  height: 36px;
  border-radius: 5rem;
  position: absolute;
  right: 2%;
  bottom: -7rem;
}

.founders-owl .owl-nav .owl-prev {
  color: var(--white) !important;
  position: absolute !important;
  left: 0% !important;
  top: 6%;
}

.founders-owl .owl-nav .owl-prev:hover,
.founders-owl .owl-nav .owl-next:hover {
  background-color: transparent !important;
}

.founders-owl .owl-nav .owl-next {
  color: var(--white) !important;
  position: absolute !important;
  right: 0% !important;
  top: 6%;
}

/* ========accordion======= */
/* ========accordion======= */
/* ========accordion======= */
/* ========accordion======= */
.accordion-container .wrapper {
  padding: 0rem 4rem 4rem 4rem;
}

.acc-heading {
  margin: 0px 8rem 15px 5rem;
}

.acc-heading .acc-para11 {
  color: var(--light-gray);
  font-weight: 600;
}

.acc-heading .acc-para22 {
  color: var(--light-gray);
  padding-bottom: 3rem;
}

.acc-heading h1 {
  padding: 1rem 0 3rem 0;
  color: var(--blue);
}

.accordion-item {
  margin-bottom: 15px;
  border-radius: 2rem;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  background-color: #fff;
  margin: 15px 0rem 15px 0rem;
  background-color: var(--blue);
  padding: 2rem;
}

.last-acc-item {
  margin: 15px 0rem 0px 0rem !important;
}

.accordion-header {
  margin: 0px 35px 0px 35px;
  color: #fff;
  padding: 20px 0px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background-color 0.3s ease;
}

.accordion-title {
  display: flex;
  align-items: center;
  gap: 3rem;
}

.accordion-title.active .acc-head {
  font-size: 0.5rem;
}

.accordion-number,
.accordion-heading {
  transition: font-size 0.3s ease;
  font-size: 2.1rem;
  font-family: "bozon-bold";
  color: var(--red);
}

/* Active State - when .accordion-item has 'active' class */
.accordion-item.active .accordion-number,
.accordion-item.active .accordion-heading {
  font-size: 1.7rem;
}

.accordion-icon {
  transition: transform 0.3s ease;
}

.accordion-content {
  max-height: 0;
  overflow: hidden;
  margin: 0 15px;
  padding: 0 20px;
  background-color: var(--blue);
  transition: max-height 0.5s ease, padding 0.5s ease;
}

.accordion-content.active {
  max-height: 600px;
  padding: 20px 20px 0px 20px;
  /* margin remains same to prevent jump */
}

.accordion-item.active .accordion-header {
  border-bottom: 2px solid var(--light-gray-down);
  /* margin: 10px 35px 0px 35px; */
}

.accordion-item.active .accordion-icon {
  transform: rotate(180deg);
}

.accordion-text {
  line-height: 1.6;
  color: var(--white);
  margin-bottom: 3rem;
  font-family: "bozon-demibols";
}

.accordion-image {
  width: 100%;
  border-radius: 6px;
  margin-top: 15px;
  margin-bottom: 3rem;
  /* spacing below image */
  overflow: hidden;
  font-family: "bozon-demibols";
}

.accordion-image img {
  width: 100%;
  height: auto;
  display: block;
  margin-top: 1rem;
}

/* ========join the charge======= */
/* ========join the charge======= */
/* ========join the charge======= */
/* ========join the charge======= */
.join-charge {
  position: relative;
  width: 100%;
}

.join-charge .wrapper {
  padding: 0rem 4rem 4rem 4rem;
}

.join-charge-bg {
  background-image: url(assets/join-charge.png);
  background-repeat: no-repeat;
  width: 100%;
  background-size: cover;
  background-position: center;
  border-radius: 2rem;
  padding: 10rem 5rem;
}

.join-charge-bg .grid {
  align-items: end;
}

.join-charge-box h1 {
  color: var(--white);
  line-height: 5rem;
  width: 80%;
}

.jc-para1 {
  padding-top: 3rem;
  color: var(--white);
  width: 75%;
  margin-bottom: 5rem;
  font-size: 2.1rem;
}

.join-charge-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5rem;
  padding: 1.5rem;
  background-color: var(--red);
  margin: 2rem auto 0;
  text-transform: uppercase;
  border-radius: 5rem;
  position: relative;
}

.join-charge-btn h6 {
  color: var(--white);
  padding-left: 1rem;
  margin: 0;
}

.join-charge-btn .img-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 1rem;
}

.join-charge-btn .img-wrapper::before {
  content: "";
  position: absolute;
  width: 4rem;
  height: 4rem;
  background-color: var(--blue) !important;
  border-radius: 50%;
  z-index: 0;
}

.join-charge-btn .img-wrapper img {
  position: relative;
  z-index: 1;
  width: 1.5rem;
  /* Optional: adjust image size */
  height: auto;
  margin-top: 0.7rem;
}

.join-charge-box-right {
  background: #ffffff30;
  width: 100%;
  /* height: 150px; */
  /* margin: auto; */
  border-radius: 2rem;
}

.jcb-flex {
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  gap: 2rem;
  width: 100%;
  border-radius: 2rem;
  padding: 2rem;
}

.jcb-flex img {
  width: 9.9rem;
  height: 9.9rem;
}

.jcb-flex h4 {
  color: var(--white);
  width: 100%;
  font-family: "bozon-bold";
}

/* ========map======= */
/* ========map======= */
/* ========map======= */
/* ========map======= */
.map {
  position: relative;
  width: 100%;
  height: 100%;
}

.mobile-map {
  display: none;
}

.map-img img {
  width: 100%;
  height: auto;
}

.map-heading {
  position: absolute;
  top: 18rem;
  text-align: center;
  margin: 0 auto;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 85%;
}

.md-para1 {
  color: var(--light-gray);
  margin-top: 5rem;
  font-size: 2.1rem;
  font-family: "bozon-demibols";
}

.map-heading h1 {
  color: var(--blue);
  padding: 1rem 0 3rem 0;
}

.md-para2 {
  color: var(--light-gray);
  line-height: 3.2rem;
}

.map-loc1-all {
  position: absolute;
  bottom: 36%;
  left: 33%;
  width: 20%;
}

.map-loc1-hover {
  position: absolute;
  top: -12rem;
  left: 0%;
  visibility: hidden;
  opacity: 0;
  margin-bottom: 2rem;
  background-color: var(--red);
  padding: 2rem;
  flex-direction: column;
  border-radius: 1rem;
  transition: all 0.3s ease-in-out;
  pointer-events: none;
  /* prevents invisible hover box from interfering */
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}

.map-loc1-all:hover .map-loc1-hover {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

.map-arrow {
  clip-path: polygon(100% 0, 0 0, 50% 100%);
  background-color: var(--red);
  width: 20px;
  height: 20px;
  position: absolute;
  top: 9.2rem;
  left: 11%;
}

.map-loc1-hover img {
  width: 100px;
}

.map-loc1-hover h4 {
  margin-top: 1rem;
  color: var(--white);
}

.map-loc1 {
  cursor: pointer;
}

.map-loc1 img {
  width: 35px;
}

.map-loc1 h4 {
  color: var(--blue);
  padding-top: 1rem;
  font-family: "bozon-bold";
}

/* ========== */
.map-loc1-all1 {
  position: absolute;
  bottom: 11%;
  left: 30%;
  width: 20%;
}

.map-loc1-hover1 {
  position: absolute;
  top: -12rem;
  left: 0%;
  visibility: hidden;
  opacity: 0;
  margin-bottom: 2rem;
  background-color: var(--red);
  padding: 2rem;
  flex-direction: column;
  border-radius: 1rem;
  transition: all 0.3s ease-in-out;
  pointer-events: none;
  /* prevents invisible hover box from interfering */
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
  text-align: center;
}

.map-loc1-all1:hover .map-loc1-hover1 {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

.map-arrow1 {
  clip-path: polygon(100% 0, 0 0, 50% 100%);
  background-color: var(--red);
  width: 20px;
  height: 20px;
  position: absolute;
  top: 9.2rem;
  left: 11%;
}

.map-loc1-hover1 img {
  width: 100px;
}

.map-loc1-hover1 h4 {
  margin-top: 1rem;
  color: var(--white);
}

.map-loc11 {
  cursor: pointer;
}

.map-loc11 img {
  width: 35px;
}

.map-loc11 h4 {
  font-weight: 600;
  color: var(--blue);
  padding-top: 1rem;
  font-family: "bozon-bold";
}

.map-some-data {
  background-color: #f9cfcd;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px,
    rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
  position: absolute;
  bottom: 31%;
  right: 28%;
  padding: 2.5rem;
  width: 16%;
  border-radius: 2rem;
  text-align: center;
}

.map-some-data P {
  color: var(--blue);
  font-family: "bozon-bold";
}

/* ========faqs========= */
/* ========faqs========= */
/* ========faqs========= */
/* ========faqs========= */
.faqs {
  position: relative;
  width: 100%;
}

.faqs-box {
  background-color: var(--blue);
  border-radius: 2rem;
  padding: 5rem 3rem 5rem 3rem;
}

.faq-header-first {
  text-align: center;
  margin-bottom: 6rem;
}

.faq-header-first h4 {
  color: var(--white);
  margin-bottom: 10px;
  font-weight: 400;
  font-family: "bozon-demibols" !important;
}

.faq-header-first h1 {
  color: #f47b6c;
  margin-bottom: 5px;
}

/* ---------faq code-------- */

.faq-container .wrapper {
  padding: 0rem 4rem 4rem 4rem;
}

.faq-item.active {
  background-color: #fbe6e5 !important;
}
.faq-item.closing {
  background-color: var(--blue); /* back to original, smoothly */
}
.faq-heading {
  margin: 0px 8rem 15px 5rem;
}

.faq-heading .faq-para11 {
  color: var(--light-gray);
  font-weight: 600;
}

.faq-heading .faq-para22 {
  color: var(--light-gray);
  padding-bottom: 3rem;
}

.faq-heading h1 {
  padding: 1rem 0 3rem 0;
  color: var(--blue);
}

.faq-item {
  margin-bottom: 15px;
  border-radius: 1rem;
  overflow: hidden;
  background-color: var(--blue);
  margin: 15px 0rem;
  transition: background-color 0.3s ease;
}
.faq-item.closing {
  background-color: var(--blue); /* transition to default */
}
.last-faq-item {
  margin: 15px 0rem 0px 0rem !important;
}

.faq-header {
  margin: 0px 35px;
  color: #fff;
  padding: 20px 0px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: self-start;
  /* transition: background-color 0.5s ease; */
  transition: all 0.3s ease;
  gap: 2rem;
}

.faq-title {
  display: flex;
  align-items: self-start;
  gap: 2rem;
}

.faq-number,
.faq-heading-text {
  transition: font-size 0.3s ease;
  font-size: 2.1rem;
  font-family: "bozon-bold";
  color: var(--red);
}
.faq-item.animating-open .faq-number,
.faq-item.animating-open .faq-heading-text {
  transition: font-size 0.3s ease;
}
.faq-item.active .faq-number,
.faq-item.active .faq-heading-text {
  font-size: 1.7rem;
}

.faq-number,
.faq-heading-text,
.faq-icon {
  color: var(--white);
  /* transition: color 0.3s ease, transform 0.3s ease; */
  font-size: 2.1rem;
  transition: color 0.3s ease, transform 0.3s ease, font-size 0.3s ease;
}

.faq-item.active .faq-number,
.faq-item.active .faq-heading-text,
.faq-item.active .faq-icon {
  color: var(--blue);
}

.faq-icon {
  font-size: 2rem;
}

.faq-item.active .faq-icon {
  transform: rotate(180deg);
}

.faq-icon {
  transition: transform 0.3s ease;
}

.faq-item.active .faq-icon {
  transform: rotate(180deg);
}

.faq-content {
  max-height: 0;
  overflow: hidden;
  margin: 0 15px;
  padding: 0 20px;
  /* background-color: var(--blue); */
  transition: max-height 0.5s ease;
}

.faq-content.active {
  max-height: 600px;
  padding: 0px 20px 0px 20px;
}

.faq-text {
  line-height: 1.6;
  color: var(--light-gray);
  margin-bottom: 2rem;
  font-family: "bozon-regular";
  margin-left: 3.2rem;
  margin-right: 3.2rem;
}

/* =========contact us ========= */
/* =========contact us ========= */
/* =========contact us ========= */
/* =========contact us ========= */
.contact {
  position: relative;
  width: 100%;
  height: 100%;
}

.contact .wrapper {
  padding-top: 0rem;
}

.contact .grid {
  gap: 0;
}

.contact-box {
  border: 1px solid var(--light-gray-down);
  padding: 5rem;
  border-top-left-radius: 2rem;
  border-bottom-left-radius: 2rem;
}

.contact-box h4 {
  color: var(--light-gray);
}

.contact-box h1 {
  color: var(--blue);
  padding: 2rem 0 2rem 0;
  width: 90%;
}

.contact-box p {
  color: var(--light-gray);
  /* text-align: justify; */
  width: 77%;
}

/* ------- */
.contact-box-right {
  background-color: var(--red);
  padding: 3rem 5rem;
  border-top-right-radius: 2rem;
  border-bottom-right-radius: 2rem;
}

.contact-input-flex {
  display: flex;
  align-items: center;
  gap: 1.2rem;
}

.contact-input-flex input {
  width: 100%;
  padding: 1.5rem 3rem;
  border: none;
  outline: none;
  border-radius: 1rem;
  color: var(--blue);
}

input::placeholder {
  color: var(--blue);
}

input {
  color: var(--blue);
}

.cif-inpur input {
  display: flex;
  align-items: center;
  gap: 1.2rem;
}

.cfi-message {
  width: 100%;
  padding: 2.5rem 3rem;
  border-radius: 1rem;
  border: none;
  outline: none;
  color: var(--blue) !important;
}

.contact-agreement {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 3rem;
}

/* =====custom dropdown select option=========  
     =====custom dropdown select option=========   */
.custom-select-wrapper {
  position: relative;
  width: 112%;
}

.custom-select {
  position: relative;
  user-select: none;
}

.select-trigger {
  background: #fff;
  padding: 1.5rem 3rem;
  border: none;
  outline: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 1rem;
  color: var(--blue);
}

.select-trigger span {
  font-family: "bozon-regular";
  font-size: 1.6rem;
}

.select-trigger .arrow i {
  font-size: 2rem;
  margin-left: 10px;
}

.custom-options {
  position: absolute;
  top: 88%;
  left: 0;
  right: 0;
  background: #667784;
  z-index: 99;
  display: none;
  flex-direction: column;
  border-bottom-left-radius: 1rem;
  border-bottom-right-radius: 1rem;
}

.custom-option {
  padding: 0.8rem 3rem;
  cursor: pointer;
  color: var(--white);
  transition: all 0.2s ease-in-out;
  font-size: 1.2rem;
  font-family: "bozon-regular";
}

.custom-option:hover {
  color: var(--red);
}

.custom-option.selected {
  color: var(--red);
}

/* =====custom dropdown select option=========  
     =====custom dropdown select option=========   */

/* ===========for check box design in contact us======= */
/* ===========for check box design in contact us======= */

.checkbox-wrapper-19 {
  box-sizing: border-box;
  --background-color: #fff;
  --checkbox-height: 19px;
}

@-moz-keyframes dothabottomcheck-19 {
  0% {
    height: 0;
  }

  100% {
    height: calc(var(--checkbox-height) / 2);
  }
}

@-webkit-keyframes dothabottomcheck-19 {
  0% {
    height: 0;
  }

  100% {
    height: calc(var(--checkbox-height) / 2);
  }
}

@keyframes dothabottomcheck-19 {
  0% {
    height: 0;
  }

  100% {
    height: calc(var(--checkbox-height) / 2);
  }
}

@keyframes dothatopcheck-19 {
  0% {
    height: 0;
  }

  50% {
    height: 0;
  }

  100% {
    height: calc(var(--checkbox-height) * 1.2);
  }
}

@-webkit-keyframes dothatopcheck-19 {
  0% {
    height: 0;
  }

  50% {
    height: 0;
  }

  100% {
    height: calc(var(--checkbox-height) * 1.2);
  }
}

@-moz-keyframes dothatopcheck-19 {
  0% {
    height: 0;
  }

  50% {
    height: 0;
  }

  100% {
    height: calc(var(--checkbox-height) * 1.2);
  }
}

.checkbox-wrapper-19 input[type="checkbox"] {
  display: none;
}

.checkbox-wrapper-19 .check-box {
  height: var(--checkbox-height);
  width: var(--checkbox-height);
  background-color: transparent;
  border: calc(var(--checkbox-height) * 0.1) solid #ffffff;
  border-radius: 5px;
  position: relative;
  display: inline-block;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -moz-transition: border-color ease 0.2s;
  -o-transition: border-color ease 0.2s;
  -webkit-transition: border-color ease 0.2s;
  transition: border-color ease 0.2s;
  cursor: pointer;
}

.checkbox-wrapper-19 .check-box::before,
.checkbox-wrapper-19 .check-box::after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  position: absolute;
  height: 0;
  width: calc(var(--checkbox-height) * 0.2);
  background-color: #ffffff;
  display: inline-block;
  -moz-transform-origin: left top;
  -ms-transform-origin: left top;
  -o-transform-origin: left top;
  -webkit-transform-origin: left top;
  transform-origin: left top;
  border-radius: 5px;
  content: " ";
  -webkit-transition: opacity ease 0.5;
  -moz-transition: opacity ease 0.5;
  transition: opacity ease 0.5;
}

.checkbox-wrapper-19 .check-box::before {
  top: calc(var(--checkbox-height) * 0.72);
  left: calc(var(--checkbox-height) * 0.41);
  box-shadow: 0 0 0 calc(var(--checkbox-height) * 0) var(--background-color);
  -moz-transform: rotate(-135deg);
  -ms-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
  transform: rotate(-135deg);
}

.checkbox-wrapper-19 .check-box::after {
  top: calc(var(--checkbox-height) * 0.37);
  left: calc(var(--checkbox-height) * 0.05);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.checkbox-wrapper-19 input[type="checkbox"]:checked + .check-box,
.checkbox-wrapper-19 .check-box.checked {
  border-color: #ffffff;
}

.checkbox-wrapper-19 input[type="checkbox"]:checked + .check-box::after,
.checkbox-wrapper-19 .check-box.checked::after {
  height: calc(var(--checkbox-height) / 2);
  -moz-animation: dothabottomcheck-19 0.2s ease 0s forwards;
  -o-animation: dothabottomcheck-19 0.2s ease 0s forwards;
  -webkit-animation: dothabottomcheck-19 0.2s ease 0s forwards;
  animation: dothabottomcheck-19 0.2s ease 0s forwards;
}

.checkbox-wrapper-19 input[type="checkbox"]:checked + .check-box::before,
.checkbox-wrapper-19 .check-box.checked::before {
  height: calc(var(--checkbox-height) * 1.2);
  -moz-animation: dothatopcheck-19 0.4s ease 0s forwards;
  -o-animation: dothatopcheck-19 0.4s ease 0s forwards;
  -webkit-animation: dothatopcheck-19 0.4s ease 0s forwards;
  animation: dothatopcheck-19 0.4s ease 0s forwards;
}

/* ===========for check box design in contact us======= */
/* ===========for check box design in contact us======= */
.ca-agree {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.ca-agree p {
  color: var(--white);
  font-size: 1.4rem;
}

.ca-agree a {
  font-size: 1.4rem;
  color: var(--white);
  text-decoration: underline;
  font-family: "bozon-regular";
}

.contact-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5rem;
  padding: 1.5rem;
  background-color: var(--blue);
  margin: 5rem auto 0;
  text-transform: uppercase;
  border-radius: 5rem;
  position: relative;
  border: none;
  cursor: pointer;
  left: 50%;

  transform: translate(-50%, -6%);
}

.contact-button h6 {
  color: var(--white);
  padding-left: 1rem;
  margin: 0;
}

.contact-button .img-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 1rem;
}

.contact-button .img-wrapper::before {
  content: "";
  position: absolute;
  width: 4rem;
  height: 4rem;
  background-color: var(--red) !important;
  border-radius: 50%;
  z-index: 0;
}

.contact-button .img-wrapper img {
  position: relative;
  z-index: 1;
  width: 1.5rem;
  /* Optional: adjust image size */
  height: auto;
  margin-top: 0.7rem;
}

/* =======footer======== */
/* =======footer======== */
/* =======footer======== */
/* =======footer======== */
footer {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: var(--blue);
}

footer .grid-four-cols {
  grid-template-columns: 0.6fr 1fr 1fr 0.5fr;
}

.footer-box1 p {
  color: var(--red);
  padding-bottom: 1.4rem;
  font-family: "bozon-bold";
}

.footer-box1 ul li {
  padding: 1rem 0;
}

.footer-box1 ul li a {
  color: var(--light-white);
  font-size: 1.4rem;
  font-family: "bozon-regular";
}

/* ----  */
.footer-box2 p {
  color: var(--red);
  padding-bottom: 1.4rem;
  font-family: "bozon-bold";
}

.footer-box2 ul li {
  padding: 0.7rem 0;
}

.footer-box2 ul li a span {
  color: var(--red);
  font-size: 1.4rem;
  font-family: "bozon-bold";
}

.footer-box2 ul li a {
  color: var(--light-white);
  font-size: 1.4rem;
  font-family: "bozon-regular";
}

.footer-box2-para-mob {
  color: var(--light-white) !important;
}

/* <!-- ------  --> */

.footer-box3 p {
  color: var(--red);
  padding-bottom: 1.4rem;
  font-family: "bozon-bold";
  font-size: 1.4rem;
}

footer .footer-para2 {
  padding-bottom: 2.5rem;
}

.footer-box3 ul {
  display: flex;
  gap: 5rem;
  /* padding: 1rem 0; */
}

.footer-box3 ul li p {
}

.fb3-img {
  display: flex;
  align-items: center;
  gap: 2rem;
}

/* ----------  */
.footer-box4 {
  display: flex;
  align-items: flex-end;
  justify-content: end;
  gap: 1rem;
  height: 62%;
}

.fb4-flex {
  display: flex;
  gap: 1.3rem;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.fb4-flex img {
  width: 25px;
  height: 25px;
}

.f-gmes-icon {
  width: 130px;
}

/* .f-ff {
  width: 30px !important;
  height: 30px !important;
} */

.subfooter {
  border-top: 1px solid var(--light-gray-down);
  background-color: var(--blue);
}

.subfooter-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* max-width: 165rem; */
  margin: auto;
  padding: 2rem 4rem;
  width: 100%;
}

.subfooter-box div p {
  color: var(--light-white);
}

.subfooter-box div a {
  color: var(--red);
  text-decoration: underline;
}

.footer-sub-company p,
.footer-sub-company a {
  font-size: 1.2rem;
}
.devindia a {
  color: var(--white);
  text-decoration: none !important;
  font-size: 1.2rem;
}
.devindia a span {
  color: var(--white);
}
/* ==========scroll to top btn========= */
#scrollToTopBtn {
  position: fixed;
  bottom: 90px;
  right: 20px;
  z-index: 1000;
  cursor: pointer;
  display: none;
  /* Hidden by default */
  border: none;
  background-color: transparent;
}

#scrollToTopBtn img {
  width: 50px;
  height: 50px;
  border-radius: 1rem;
  border: 2px solid var(--red);
}

.offset-scroll {
  /* scroll-margin-top:250px;   */
}

/* .reveal-section {
  opacity: 0;
  transform: translateY(50px); 
} */