@font-face {
  font-family: "Gilroy";
  src: url("../fonts/Gilroy-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Gilroy";
  src: url("../fonts/Gilroy-Semibold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Gilroy";
  src: url("../fonts/Gilroy-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Gilroy";
  src: url("../fonts/Gilroy-Semibold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Gilroy";
  src: url("../fonts/Gilroy-Regular.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Gilroy";
  src: url("../fonts/Gilroy-Regular.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
/* General Reset */
body, ul, li, a, button {
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
  box-sizing: border-box;
  font-family: "Gilroy";
  letter-spacing: 0.5px;
}
.container {
  max-width: 1300px;
}
body {
  overflow-x: hidden;
}
::-webkit-scrollbar {
  display: none;
}
/* Header Styling */
#nav-menu {
  display: none; /* Hide mobile menu */
}
#d-nav-menu {
  display: block; /* Show desktop menu */
}
/* Show mobile menu when 'open' class is added */
#nav-menu.open {
  display: block; /* Show mobile menu when it's open */
}
.header {
  background: #fff;
  position: sticky;
  top: 0;
  left: 0;
  padding: 2vh 0;
  z-index: 999;
}
.md-none {
  display: none;
}
.header-first-col .logo {
  max-width: 150px;
  height: auto;
}
.header-sec-col {
  display: flex;
  align-items: center;
}
.navigation {
  margin-right: 20px;
}
.nav-list > li {
  position: relative;
}
.nav-list > li > a {
  color: #333;
  transition: color 0.3s;
  padding: 10px;
  font-size: 16px;
  font-weight: 500;
}
.nav-list > li > a:hover {
  color: #0d111f;
}
/* Dropdown Menu Styling */
/* Header Styling */
.header {
  background: #fff;
  position: sticky;
  top: 0;
  left: 0;
  padding: 20px 0;
  z-index: 999;
}
.header-first-col .logo {
  max-width: 150px;
  height: auto;
}
.header-sec-col {
  display: flex;
  align-items: center;
}
.navigation {
  margin-right: 20px;
}
.nav-link {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5em;
}
.nav-list {
  display: flex;
  gap: 20px;
  font-size: 14px;
  font-weight: 500;
  color: #11172b;
  position: relative;
}
.nav-list > li {
  position: relative;
}
.nav-list > li > a {
  color: #333;
  transition: color 0.3s;
  padding: 10px;
  font-size: 15px;
}
.nav-list > li > a:hover {
  color: #0d111f;
}
.mob-show {
  display: none;
}
/* Dropdown Menu Styling */
.sub-nav-list {
  position: absolute;
  top: 100%;
  left: 0;
  display: none;
  flex-direction: column;
  background-color: #fff;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 10px 0;
  border-radius: 4px;
  z-index: 1000;
}
img.logo {
  max-width: 52%;
  height: auto;
}
.sub-nav-list li {
  white-space: nowrap;
}
.sub-nav-list li a {
  display: block;
  padding: 10px 20px;
  color: #11172b;
  /*font-size: 16px;*/
  font-size: 14px;
  font-weight: 400;
  transition: color 0.3s;
}
.sub-nav-list li a:hover {
  background-color: #fee45b;
  color: #0d111f;
  cursor: pointer;
}
/* Show Dropdown on Hover */
.nav-list > li:hover .sub-nav-list {
  display: flex;
}
/* Anchor Styling Inside the Button */
.moving-btn a {
  display: inline-block;
  padding: 15px 20px;
  background-color: #fee45b;
  color: #11172b;
  border-radius: 40px;
  font-size: 16px;
  font-weight: 600;
  transition: background-color 0.3s;
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  text-align: center;
  width: 100%;
  max-width: 200px; /* Set a limit for button width */
}
img.logo {
  max-width: 52%;
  height: auto;
}
.sub-nav-list li {
  white-space: nowrap;
}
/* Anchor Styling Inside the Button */
.moving-btn a {
  display: inline-block;
  /*padding: 15px 20px;
  font-size: 16px;*/
  padding: 12px 15px;
  background-color: #fee45b;
  color: #11172b;
  border-radius: 40px;
  font-size: 14px;
  font-weight: 600;
  transition: background-color 0.3s;
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  text-align: center;
  width: 100%;
  max-width: 200px; /* Set a limit for button width */
}
/* Button Styling */
button.moving-btn {
  border: none;
  background-color: transparent;
  outline: none;
  padding: 0;
}
/* Marquee Container Styling */
.marquee-container {
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
}
/* Marquee Text Styling */
.marquee-text {
  display: inline-block;
  white-space: nowrap;
  animation: marquee 20s linear infinite;
}
/* Keyframes for Scrolling Text */
@keyframes marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}
/* Optional hover effect to pause marquee */
.moving-btn:hover .marquee-text {
  animation-play-state: paused;
}
/* Duplicate the text to create a seamless loop */
.marquee-container {
  display: flex;
}
.marquee-text {
  display: inline-block;
  white-space: nowrap;
  animation: marquee 20s linear infinite;
}
.marquee-container span {
  display: inline-block;
  padding-right: 3px; /* Optional space between repeats */
}
/* Hamburger Button */
.hamburger {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  z-index: 1001;
}
/* Mobile Menu */
/* #nav-menu {
  display: none;
  flex-direction: column;
  position: absolute;
  top: 0;
  left: 0;
  background-color: white;
  width: 100%;
  height: fit-content;
  padding: 20px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  transform: translateY(-100%);
  transition: transform 0.3s ease-in-out;
} */
#nav-menu.open {
  display: flex;
  transform: translateY(0);
}
/* Hamburger Button */
.hamburger {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  z-index: 1001;
}
/* Responsive Adjustments */
/* Header End */
/* Hero Section Starts */
/* Hero Section Styling */
section.hero {
  width: 100%;
  min-height: 50em;
  background: url("../images/bg.png") no-repeat center/cover;
  display: flex;
  justify-content: space-around;
  align-items: center;
  text-align: center;
  padding: 0 15px;
  padding-bottom: 1.5em;
  flex-direction: column;
}
.breadcrumb {
  position: absolute;
  /*left: 0;*/
  left: 0px;
  top: 6em;
  background-color: #283667;
  width: 100%;
  padding-left: 20px;
}
h2.breadcrumb-title a {
  font-size: 18px;
  width: fit-content;
  margin: 0;
  padding: 10px;
  padding-left: 0;
  color: #fff;
  font-weight: 400;
}
h2.breadcrumb-title a:nth-child(even) {
  padding-left: 0;
  padding-right: 0;
}
.hero {
  text-align: center;
}
.main-heading {
  font-size: 80px;
  font-weight: bold;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: #f6f6f7;
  white-space: nowrap; /* Prevents wrapping of text in the main heading */
}
.changing-text-container {
  overflow: hidden;
  height: auto; /* Matches the text height */
  line-height: 1.3; /* Prevents extra spacing */
  display: inline-block;
  vertical-align: middle;
  position: relative;
  width: max-content; /* Automatically adjust width to fit the text */
}
.changing-text {
  position: relative;
  transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out; /* Smooth move up and fade in/out */
  display: inline-block;
  transform: translateY(0); /* Default position */
  color: #fbcf4a;
  white-space: nowrap; /* Prevents text from breaking onto multiple lines */
}
@keyframes slide-text {
  0% {
    transform: translateY(0);
  }
  25% {
    transform: translateY(0);
  }
  33% {
    transform: translateY(-100%);
  }
  58% {
    transform: translateY(-100%);
  }
  66% {
    transform: translateY(-200%);
  }
  91% {
    transform: translateY(-200%);
  }
  100% {
    transform: translateY(-300%);
  }
}
.sub-heading {
  margin: 1rem 0;
  color: #ffffff;
  font-size: 24px;
  font-weight: 400;
}
.hero-last-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 2em;
}
.right-hero-section {
  display: flex;
  gap: 0;
  position: relative;
  width: 30%;
  justify-content: flex-end;
}
img.user-bg {
  position: absolute;
  bottom: 0;
  left: 55%;
}
img.user-avatar {
  position: absolute;
  bottom: -4px;
  left: 54%;
  z-index: 9;
  animation: move-diagonal 4s infinite ease-in-out; /* Diagonal animation */
}
/* Keyframes for diagonal movement */
@keyframes move-diagonal {
  0% {
    transform: translate(0, 0); /* Initial position */
  }
  50% {
    transform: translate(-5px, 5px); /* Move diagonally bottom-right */
  }
  100% {
    transform: translate(0, 0); /* Return to initial position */
  }
}
img.quote {
  position: absolute;
  right: -8%;
  bottom: 7em;
}
img.happy-btn {
  position: absolute;
  left: 35%;
  top: -25px;
  bottom: 0;
}
/* 
.start-btn {
  padding: 0.8rem 1.5rem;
  font-size: 1rem;
  color: #24335e;
  background-color: #fff;
  border: none;
  border-radius: 30px;
  cursor: pointer;
  transition: all 0.3s;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
}
i.fa-solid.fa-arrow-right {
  padding: 6px 7px;
  background: #283667;
  color: #fff;
  border-radius: 50%;
  font-size: 12px;
}
span.btn-text {
  font-size: 22px;
  color: #283667;
  font-weight: 500;
}

.start-btn:hover {
  background-color: #ffd700;
} */
/* Third seciton */
section.third-section, section.resources, section.instagram-section, section.second-section, section.card-section, section.bucket-second-section, .section.bucket-third-section, section.bucket-fourth-seciton, section.bucket-read-next-section, section.article-list, section.videos-list, section.infographics, section.listicles, section.booklet-section, section.policy-section, section.inner-articles, section.video-list-item, section.details {
  padding-top: 8vh;
  padding-bottom: 8vh;
  width: 100%;
}
img.moving-element {
  max-width: 190px;
  width: 100%;
  animation: move-top-bottom 4s infinite ease-in-out;
  position: absolute;
  right: 10%;
  top: 0%;
}
img.img-men-1 {
  max-width: 100%;
  height: 30em;
  width: 100%;
  object-fit: cover;
  object-position: top;
  position: relative;
  z-index: 9;
}
h1.title {
  color: #283667;
  font-size: 52px;
  font-weight: 600;
}
p.excerpt {
  font-size: 22px;
  color: #283667;
}
.left-section {
  position: relative;
}
.third-right-section {
  display: flex;
  flex-direction: column;
  row-gap: 1em;
}
.left-section::after {
  content: "";
  width: 80%;
  height: 50%;
  border: 1px solid #000;
  position: absolute;
  bottom: 0;
  z-index: 8;
  border-radius: 16px;
  left: 10%;
}
@keyframes move-top-bottom {
  0% {
    transform: translateY(0); /* Initial position */
  }
  50% {
    transform: translateY(30px); /* Move 20px downward */
  }
  100% {
    transform: translateY(0); /* Return to initial position */
  }
}
button.third-section-btn {
  background: #f7f5f4;
  width: fit-content;
  border: 1px solid #b0b0b0;
}
.third-section-container {
  display: flex;
  flex-direction: column;
  row-gap: 10em;
}
img.moving-element-right {
  max-width: 190px;
  width: 100%;
  animation: move-top-bottom 4s infinite ease-in-out;
  position: absolute;
  left: 0%;
  top: 0%;
}
h1.res-title {
  text-align: center;
  font-size: 54px;
  color: #283667;
  font-weight: 500;
  position: relative;
  margin-bottom: 1em;
}
/* h1.res-title::after {
  content: "";
  background: url("/image/Line\ 1.svg") no-repeat center/cover;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
} */
.footer {
  background-color: #fff;
  color: #333;
  font-family: Arial, sans-serif;
  border-top: 1px solid #283667;
  padding: 80px 0 20px;
}
.footer-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  /* gap: 20px; */
  padding: 40px 0 30px;
}
.footer-logo {
  flex: 1 1 500px;
}
.footer-logo .logo {
  max-width: 320px;
  margin-bottom: 20px;
}
.footer-description {
  max-width: 469px;
  width: 100%;
  font-family: "Gilroy";
  font-size: 18px;
  font-weight: 400;
  line-height: 30px;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: #454748;
}
.footer-links {
  flex: 1 1 650px;
  display: flex;
  justify-content: space-between;
  gap: 6em;
}
.footer-column {
  flex: 1;
}
.footer-heading {
  /* font-size: 16px; */
  /* font-weight: bold; */
  margin-bottom: 20px;
  /* color: #111; */
  font-family: "Gilroy";
  font-size: 17px;
  font-weight: 400;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: #283667;
  font-weight: 500;
}
.footer-list li {
  margin-bottom: 12px;
}
.footer-list a {
  /* font-size: 14px; */
  /* color: #0073e6; */
  transition: color 0.3s ease;
  font-family: "Gilroy";
  font-size: 17px;
  font-weight: 400;
  line-height: 28px;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: #2d2d2d;
}
.footer-column.quick-links {
  padding-left: 70px;
}
.footer-bottom {
  background-color: #fff;
  padding: 0;
  border-top: 1px solid #545454;
  margin-top: 14px;
  padding-top: 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.footer-socials {
  display: flex;
  justify-content: flex-end;
}
.logo-box {
  display: flex;
  align-items: center;
}
.social-icon {
  color: #283667;
  font-size: 22px;
}
/* Add spacing between cards */
.resource-slider .slick-slide {
  padding: 0; /* Adds space around each card */
  margin-right: 1.5em;
}
/* Ensure the wrapper respects the padding */
.resource-wrapper {
  margin: 0 -12px; /* Counteract the padding to align content properly */
}
/* Card styling */
.resource-items {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
  border: 1px solid #11172b;
  border-radius: 24px;
  overflow: hidden;
  background: #fff;
  height: auto;
  /* padding: 16px; */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Optional for better visibility */
}
/* Image styling */
.resource-img {
  width: 100%;
  height: 400px;
  overflow: hidden;
}
.resource-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Add space between slider navigation */
/* .resource-wrapper .slick-prev,
.resource-wrapper .slick-next {
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #283667;
} */
.resource-date {
  font-family: "Gilroy";
  font-size: 18px;
  font-weight: 400;
  line-height: 30px;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: #6f7899;
  margin-bottom: 6px;
}
.resource-title {
  font-family: "Gilroy";
  font-size: 22px;
  font-weight: 500;
  line-height: 26px;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: #283667;
}
.resource-title a {
  font-family: "Gilroy";
  font-size: 22px;
  font-weight: 500;
  line-height: 26px;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: #283667;
}
/* section.instagram-section .container-fluid{
padding-left: 0;
padding-right: 0;
} */
.resource-content {
  padding: 1em;
}
h1.insta-heading {
  text-align: center;
  font-size: 48px;
  color: #1e1e1e;
  font-weight: 600;
  margin-bottom: 1em;
}
.swiper {
  width: 100%;
  height: 100%;
}
.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}
.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}
section.instagram-section {
  display: flex;
  flex-direction: column;
  gap: 2em;
}
/* Second Section */
h1.sec-title {
  font-weight: 600;
  text-align: center;
  color: #283667;
  font-size: 48px;
  margin-bottom: 4vh;
}
span.special-title {
  text-transform: uppercase;
}
.boxes {
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: 4em;
}
.boxes {
  display: flex;
  width: auto;
  white-space: nowrap;
}
h1.box-title {
  color: #283667;
  font-size: 1.3em;
  font-weight: 600;
}
span.marquee-text:nth-child(even) {
  margin-left: -0.3em;
}
p.box-excerpt {
  font-weight: 400;
  font-size: 14px;
  color: #283667;
}
img.box-img {
  height: 100%;
  max-width: 100%;
  width: 6vw;
  max-height: 100px;
  object-fit: cover;
}
/* .box.active-box {
  background: #fee45b;
} */
.box {
  max-width: 300px;
  height: 100%;
  max-height: 320px;
  border: 1px solid #11172b;
  padding: 20px;
  width: 100%;
  border-radius: 30px;
  position: relative;
  z-index: 1;
  background: #fff;
  transition: all 0.5s ease-in-out;
  text-wrap: wrap;
  max-height: 40vh;
  overflow: hidden;
  background: #fff;
}
.box::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 4%;
  border-radius: 35px;
  z-index: -1;
  border: 1px solid #11172b;
  /* background: #fff; */
  right: 8%;
  transition: all 0.5s ease-in-out;
}
.box.active-box::after {
  background-color: #fee45b !important;
}
section.second-section {
  padding-top: 10em;
}
section.second-section {
  height: 100vh;
  width: 100%;
  height: 100%;
  position: relative;
}
section.second-section::after {
  content: "";
  background: url("../images/left pattern.png") no-repeat center / cover;
  position: absolute;
  width: 9%;
  height: 25%;
  left: 0%;
  top: 60%;
}
section.second-section::before {
  content: "";
  background: url("../images/right pattern.png") no-repeat center / cover;
  position: absolute;
  width: 9%;
  height: 25%;
  right: 0%;
  top: 60%;
}
img.avatar {
  max-width: 100%;
  max-height: 40vh;
  height: 100%;
  object-fit: cover;
  position: relative;
  z-index: 9;
  display: none;
  transition: all 0.5s ease-in-out;
}
.changing-avatar {
  display: flex;
  justify-content: center;
  align-items: center;
  /* position: relative; */
}
.avatar-bg {
  width: fit-content;
  height: auto;
  display: inline-block;
  position: relative;
  z-index: 0;
}
.avatar-bg::before {
  content: "";
  background: url("../images/avatar-bg.png") no-repeat center / cover;
  width: 82%;
  height: 87%;
  position: absolute;
  top: 0;
  left: 11%;
  z-index: -1;
}
.avatar-bg::after {
  content: "";
  background: url("../images/front-bg.png") no-repeat center / cover;
  width: 48%;
  height: 10%;
  position: absolute;
  left: 30%;
  z-index: 9;
  bottom: -10%;
}
.avatar.active-avatar {
  display: block;
  transition: all 0.5s ease-in-out;
}
.start-btn {
  position: relative; /* To position pseudo-elements relative to this button */
  padding: 0.8rem 1.5rem;
  font-size: 1rem;
  color: #24335e;
  background-color: #fff;
  border: none;
  border-radius: 30px;
  cursor: pointer;
  transition: all 0.3s ease-in-out; /* Smoother background transition */
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  overflow: hidden; /* Hide text when it moves out of view */
  width: 250px;
}
span.btn-text {
  font-size: 20px;
  color: #283667;
  font-weight: 500;
  display: inline-block;
  transition: transform 0.5s ease, opacity 0.5s ease; /* Smooth transition */
}
.start-btn:hover .btn-text {
  transform: translateY(-100%); /* Move text up */
  opacity: 0; /* Fade out */
}
.start-btn:hover::after {
  content: attr(data-hover-text); /* Dynamically insert hover text */
  position: absolute;
  top: 47%;
  left: 40%;
  transform: translate(-50%, 200%); /* Start below the button */
  font-size: 20px;
  color: #283667;
  font-weight: 500;
  display: inline-block;
  opacity: 0;
  animation: slide-up 0.5s ease forwards; /* Smooth slide-up effect */
}
@keyframes slide-up {
  0% {
    opacity: 0;
    transform: translate(-50%, 100%); /* Start below */
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%); /* Align with button center */
  }
}
i.fa-solid.fa-arrow-right {
  padding: 6px 7px;
  background: #283667;
  color: #fff;
  border-radius: 50%;
  font-size: 12px;
}
.start-btn:hover {
  background-color: #ffd700;
}
.insta-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2em;
}
button.start-btn.insta-btn {
  border: 1px solid #b0b0b0;
  width: 210px;
  background: #f7f5f4;
}
button.start-btn.insta-btn:hover {
  background: linear-gradient(45deg, /* Adjust the angle for Instagram's gradient */ #833ab4 0%, /* Purple */ #fd1d1d 50%, /* Pink */ #fcb045 100% /* Orange/Yellow */
    );
  |
}
button.start-btn.insta-btn:hover {
  background: #283667;
}
button.start-btn.insta-btn:hover::after {
  color: #fff;
  font-weight: 400;
}
img.insta-icon {
  max-width: 20px;
  vertical-align: sub;
}
.resources-swiper {
  position: relative;
  padding: 2em 0 2em 0;
}
.swiper-button-next {
  position: absolute;
  bottom: 0;
}
.swiper-button-next, .swiper-button-prev {
  position: absolute;
  bottom: 0;
  color: #fff;
  top: 90%;
  left: 50%;
  background: #283667;
  padding: 25px;
  border-radius: 50%;
}
.swiper-button-prev {
  left: 45%;
}
.swiper-button-next:after, .swiper-button-prev:after {
  display: none;
}
section.instagram-section {
  padding-top: 2em;
}
.content {
  width: 30px;
  height: 30px;
  border: none;
  background: #283667;
  border-radius: 50%;
  position: relative;
  cursor: pointer;
  display: flex;
  flex-wrap: nowrap;
  overflow: hidden;
  padding-top: 0.3em;
}
.overflow-hidden {
  overflow: hidden;
}
.buttons {
  margin-bottom: 20px;
}
button {
  padding: 10px 25px;
  cursor: pointer;
  overflow: hidden;
}
.content svg {
  flex: 1 0 100%;
}
/* h1.sec-title{
  position: relative;
}

h1.sec-title::after {
  content: "";
  background: url('/image/');
} */
span.special-title.yello-line {
  position: relative;
}
span.special-title.yello-line::after {
  content: "";
  width: 100%;
  height: 20px; /* height for the curved line */
  position: absolute;
  /*bottom: -0.4em;*/
  left: 0;
  background: transparent;
  display: block;
  background-image: url("../images/yellow-line.png");
  background-size: 100% 100%;
}
span.blue-line {
  position: relative;
}
span.blue-line::after {
  content: "";
  width: 100%;
  height: 20px; /* height for the curved line */
  position: absolute;
  bottom: -0.4em;
  left: 0;
  background: transparent;
  display: block;
  background-image: url("../images/blue-line.png");
  background-size: 100% 100%;
}
img#men-1 {
  width: 75%;
}
.investment-title {
  font-size: 52px;
  color: #fff;
  font-weight: 600;
  text-transform: uppercase;
}
img.investment-img {
  width: 100%;
  max-width: 400px;
}
.investment-cards {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 1em;
}
.inv-card {
  /* border: 1px solid #B0B0B0; */
  /* max-height: 300px; */
  /* overflow: hidden; */
  /* background: #F7F5F4; */
  width: 100%;
  height: 100%;
  padding: 30px;
  display: flex;
  flex: 1;
  border-radius: 30px;
  min-height: 100%;
  position: relative;
  transition: all 0.3s ease;
}
/* .button-box {
  width: fit-content;
  height: fit-content;
  background: #fff;
  padding: 20px;
  position: absolute;
  left: -1%;
  bottom: -1%;
} */
section.hero.inner-page {
  background: url("../images/inner-bg.png") no-repeat center/cover;
}
.inv-right-side {
  width: 100%;
  height: 100%;
  overflow: hidden;
  /* max-width: 33vw; */
  padding-left: 10px;
}
img.inv-img {
  width: 100%;
  height: 100%;
  border-radius: 24px;
  object-fit: cover;
  max-height: 290px;
}
h1.inv-title {
  color: #283667;
  font-size: 36px;
  font-weight: 500;
  max-width: 95%;
}
.inv-card {
  position: relative;
  overflow: hidden;
}
.inv-card::before {
  content: "";
  background: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="1640" height="419" viewBox="0 0 1640 419" fill="%23F7F5F4"%3E%3Cmask id="path-1-inside-1_2392_1952" fill="white"%3E%3Cpath fill-rule="evenodd" clip-rule="evenodd" d="M1640 32C1640 14.3269 1625.67 0 1608 0H32C14.3269 0 0 14.3269 0 32V289C0 306.673 14.3269 321 32 321H240C257.673 321 272 335.327 272 353V387C272 404.673 286.327 419 304 419H1608C1625.67 419 1640 404.673 1640 387V321V32Z"%3E%3C/path%3E%3C/mask%3E%3Cpath fill-rule="evenodd" clip-rule="evenodd" d="M1640 32C1640 14.3269 1625.67 0 1608 0H32C14.3269 0 0 14.3269 0 32V289C0 306.673 14.3269 321 32 321H240C257.673 321 272 335.327 272 353V387C272 404.673 286.327 419 304 419H1608C1625.67 419 1640 404.673 1640 387V321V32Z" fill="%23F7F5F4"%3E%3C/path%3E%3Cpath d="M32 1H1608V-1H32V1ZM1 289V32H-1V289H1ZM240 320H32V322H240V320ZM273 387V353H271V387H273ZM1608 418H304V420H1608V418ZM1639 321V387H1641V321H1639ZM1639 32V321H1641V32H1639ZM1608 420C1626.23 420 1641 405.225 1641 387H1639C1639 404.121 1625.12 418 1608 418V420ZM271 387C271 405.225 285.775 420 304 420V418C286.879 418 273 404.121 273 387H271ZM240 322C257.121 322 271 335.879 271 353H273C273 334.775 258.225 320 240 320V322ZM-1 289C-1 307.225 13.7746 322 32 322V320C14.8792 320 1 306.121 1 289H-1ZM1608 1C1625.12 1 1639 14.8792 1639 32H1641C1641 13.7746 1626.23 -1 1608 -1V1ZM32 -1C13.7746 -1 -1 13.7746 -1 32H1C1 14.8792 14.8792 1 32 1V-1Z" fill="%23B0B0B0" mask="url(%23path-1-inside-1_2392_1952)"%3E%3C/path%3E%3C/svg%3E');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transition: all 0.3s ease;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
.inv-card:hover::before {
  background: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="1640" height="419" viewBox="0 0 1640 419" fill="%23283667"%3E%3Cmask id="path-1-inside-1_2392_1952" fill="white"%3E%3Cpath fill-rule="evenodd" clip-rule="evenodd" d="M1640 32C1640 14.3269 1625.67 0 1608 0H32C14.3269 0 0 14.3269 0 32V289C0 306.673 14.3269 321 32 321H240C257.673 321 272 335.327 272 353V387C272 404.673 286.327 419 304 419H1608C1625.67 419 1640 404.673 1640 387V321V32Z"%3E%3C/path%3E%3C/mask%3E%3Cpath fill-rule="evenodd" clip-rule="evenodd" d="M1640 32C1640 14.3269 1625.67 0 1608 0H32C14.3269 0 0 14.3269 0 32V289C0 306.673 14.3269 321 32 321H240C257.673 321 272 335.327 272 353V387C272 404.673 286.327 419 304 419H1608C1625.67 419 1640 404.673 1640 387V321V32Z" fill="%23283667"%3E%3C/path%3E%3Cpath d="M32 1H1608V-1H32V1ZM1 289V32H-1V289H1ZM240 320H32V322H240V320ZM273 387V353H271V387H273ZM1608 418H304V420H1608V418ZM1639 321V387H1641V321H1639ZM1639 32V321H1641V32H1639ZM1608 420C1626.23 420 1641 405.225 1641 387H1639C1639 404.121 1625.12 418 1608 418V420ZM271 387C271 405.225 285.775 420 304 420V418C286.879 418 273 404.121 273 387H271ZM240 322C257.121 322 271 335.879 271 353H273C273 334.775 258.225 320 240 320V322ZM-1 289C-1 307.225 13.7746 322 32 322V320C14.8792 320 1 306.121 1 289H-1ZM1608 1C1625.12 1 1639 14.8792 1639 32H1641C1641 13.7746 1626.23 -1 1608 -1V1ZM32 -1C13.7746 -1 -1 13.7746 -1 32H1C1 14.8792 14.8792 1 32 1V-1Z" fill="%23B0B0B0" mask="url(%23path-1-inside-1_2392_1952)"%3E%3C/path%3E%3C/svg%3E');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.inv-card:hover h1.inv-title, .inv-card:hover p {
  color: #fff;
}
.button-box {
  width: fit-content;
  position: absolute;
  left: 0;
  bottom: 4%;
}
/* Topic Card page styling End Here */
/* Bucket Inside page starts here */
.icon-box {
  width: fit-content;
  border: 2px solid #fff;
  padding: 16px;
  border-radius: 20px;
  position: absolute;
  right: 4%;
  top: -10em;
  transform: rotate(25deg);
}
.icons {
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 100%;
}
.icons img {
  max-width: 70px;
  height: auto;
}
h2.text {
  font-size: 18px;
  color: #fff;
  font-weight: 500;
}
section.hero.investing-banner {
  background: url("../images/invesing-bg.png") no-repeat center/cover;
}
img.invest-quote-right {
  position: absolute;
  right: 17%;
  top: -16%;
  transform: rotate(-20deg);
}
img.invest-quote-left {
  left: 18%;
  position: absolute;
  bottom: -15%;
  transform: rotate(165deg);
}
.shashank-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}
.investment-title.invest-page {
  font-size: 52px;
  color: #fff;
  font-weight: 600;
  text-transform: uppercase;
  max-width: 85% !important;
  text-align: center;
}
img.financial-img {
  max-width: 6em;
}
img.stock-market-img {
  max-width: 7em;
}
img.hanging-box {
  position: absolute;
  left: 5%;
  bottom: 10%;
}
h2.second-sec-title {
  color: #283667;
  font-size: 52px;
  font-weight: 600;
  margin-bottom: 0.8em;
  padding-top: 0.8em;
  position: relative;
}
p.second-sec-excerpt {
  font-size: 18px;
  color: #454748;
  font-weight: 400;
}
.sec-section-title-box {
  width: 100%;
  position: relative;
}
.quotes-box {
  position: absolute;
  left: 0;
  border: 1px solid #000000;
  padding: 10px;
  background: #fee45b;
  border-radius: 2px;
  top: -45%;
  animation: moveTopBottomElement 2s ease-in-out infinite alternate;
}
.quotes-box::after {
  content: "";
  width: 100%;
  height: 100%;
  border: 1px solid #000;
  border-radius: 2px;
  position: absolute;
  left: -15%;
  top: -15%;
  z-index: -1;
}
/* Keyframes for moving the quotes-box */
@keyframes moveTopBottomElement {
  0% {
    top: -10%;
  }
  100% {
    top: -15%; /* Adjust to move it down */
  }
}
section.bucket-third-section {
  background: #283667;
}
img.bucket-section-img {
  width: 100%;
  max-height: 600px;
  object-fit: cover;
  height: 100%;
  position: relative;
  border-radius: 16px;
}
.bucket-img-and-title {
  padding: 5em 0;
  height: 100%;
  width: 100%;
  position: relative;
}
h2.bucket-section-img-title {
  position: absolute;
  z-index: 1;
  left: 2%;
  top: 15%;
  color: #fff;
  font-size: 54px;
  font-weight: 600;
}
h2.hover-box-main-title {
  color: #283667;
  font-size: 54px;
  font-weight: 600;
  text-align: center;
  margin-bottom: 1.5em;
}
.hover-boxes {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 1em;
}
.hover-animation-box {
  width: 25%; /* Default width for all boxes */
  height: 100%;
  min-height: 60vh;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  padding: 20px;
  position: relative;
  z-index: 9;
  transition: all 0.3s ease-in-out; /* Smooth transition for width and opacity */
}
.hover-animation-box::after {
  content: "";
  position: absolute;
  background: #00102414;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  border-radius: 16px;
  z-index: -1;
}
img.share-btn {
  width: 100%;
  height: 100%;
  max-width: 30px;
  cursor: pointer;
}
h2.hover-box-title {
  color: #fff;
  font-size: 24px;
  font-weight: 400;
  opacity: 0;
  transition: all 0.3s ease-in-out;
}
div#hover-box-2 h2.hover-box-title, div#hover-box-3 h2.hover-box-title {
  color: #fff;
}
/* Default state: the first box (hover-box-1) will have 50% width, others at 25% */
.hover-boxes .hover-animation-box {
  width: 25%;
}
/* Hover effect: the hovered box expands to 50% */
.hover-animation-box:hover {
  width: 50%;
}
.hover-animation-box:hover h2.hover-box-title {
  opacity: 1; /* Title becomes visible when the box is hovered */
}
/* Keep the title hidden when box is not hovered */
.hover-animation-box:not(:hover) h2.hover-box-title {
  opacity: 0;
}
.play-btn-box {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.play-btn-box {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 50%;
}
img.play-button-bg {
  position: absolute;
  z-index: -1;
  transition: all 0.3s ease-in-out;
}
.hover-animation-box:hover img.play-button-bg {
  transform: rotate(180deg);
}
section.bucket-read-next-section {
  background: #283667;
}
h2.read-next-title {
  font-size: 54px;
  text-align: center;
  color: #fff;
  font-weight: 400;
  margin-bottom: 1.5em;
}
.read-next-card {
  width: 100%;
  height: 100%;
  max-height: 50vh;
  display: flex;
  justify-content: center;
  padding: 20px;
  position: relative;
  gap: 1em;
}
.rnc-title {
  font-size: 22px;
  color: #283667;
  font-weight: 400;
  text-align: left;
}
section.bucket-read-next-section span.special-title.yello-line {
  text-transform: capitalize;
}
section.bucket-read-next-section .swiper-slide {
  background: transparent;
}
.read-next-card::before {
  content: "";
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="695" height="318" viewBox="0 0 695 318" fill="none"><mask id="path-1-inside-1_1229_1811" fill="white"><path fill-rule="evenodd" clip-rule="evenodd" d="M695 32C695 14.3269 680.673 0 663 0H32C14.3269 0 0 14.3269 0 32V187.957C0 205.63 14.3269 219.957 32 219.957H240C257.673 219.957 272 234.284 272 251.957V286C272 303.673 286.327 318 304 318H663C680.673 318 695 303.673 695 286V219.957V205.464V32Z"/></mask><path fill-rule="evenodd" clip-rule="evenodd" d="M695 32C695 14.3269 680.673 0 663 0H32C14.3269 0 0 14.3269 0 32V187.957C0 205.63 14.3269 219.957 32 219.957H240C257.673 219.957 272 234.284 272 251.957V286C272 303.673 286.327 318 304 318H663C680.673 318 695 303.673 695 286V219.957V205.464V32Z" fill="%23F7F5F4"/><path d="M32 1H663V-1H32V1ZM1 187.957V32H-1V187.957H1ZM240 218.957H32V220.957H240V218.957ZM273 286V251.957H271V286H273ZM663 317H304V319H663V317ZM694 219.957V286H696V219.957H694ZM694 205.464V219.957H696V205.464H694ZM694 32V205.464H696V32H694ZM663 319C681.225 319 696 304.225 696 286H694C694 303.121 680.121 317 663 317V319ZM271 286C271 304.225 285.775 319 304 319V317C286.879 317 273 303.121 273 286H271ZM240 220.957C257.121 220.957 271 234.836 271 251.957H273C273 233.732 258.225 218.957 240 218.957V220.957ZM-1 187.957C-1 206.182 13.7746 220.957 32 220.957V218.957C14.8792 218.957 1 205.078 1 187.957H-1ZM663 1C680.121 1 694 14.8792 694 32H696C696 13.7746 681.225 -1 663 -1V1ZM32 -1C13.7746 -1 -1 13.7746 -1 32H1C1 14.8792 14.8792 1 32 1V-1Z" fill="%23B0B0B0" mask="url(%23path-1-inside-1_1229_1811)"/></svg>');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transition: all 0.3s ease;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
img.rnv-img {
  width: 100%;
  height: 100%;
  border-radius: 24px;
  object-fit: cover;
  /*max-height: 210px;*/
  height: 210px;
}
.resources-banner img.invest-quote-right {
  position: absolute;
  right: 30%;
  top: -3em;
  transform: rotate(-20deg);
}
section.hero {
  background: url("../images/invesing-bg.png") no-repeat center/cover;
}
img.resource-quote-right {
  position: absolute;
  right: 30%;
  bottom: 65%;
  transform: rotate(-20deg);
}
img.resource-quote-left {
  left: 30%;
  position: absolute;
  top: 60%;
  transform: rotate(165deg);
}
.articles-box {
  width: 100%;
  height: auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.article-box {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 1em;
}
img.article-img {
  width: 100%;
  height: 100%;
  max-height: 15em;
  object-fit: cover;
  border-radius: 16px;
}
h2.article-title {
  font-size: 30px;
  color: #283667;
  font-weight: 500;
  line-height: 1.3;
}
.shashank-hover-box {
  width: 100%;
  height: 100%;
  border: 1px solid #b0b0b0;
  background: #f7f5f4;
  border-radius: 16px;
  max-height: 15em;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2em;
  transition: all 0.3s ease-in-out;
}
h2.read-more {
  font-size: 28px;
  font-weight: 500;
  color: #283667;
}
img.arrow_right {
  max-width: 60px;
}
section.videos-list {
  background: #283667;
}
section.videos-list .special-title {
  text-transform: capitalize;
}
.video-list-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: 100%;
  gap: 2em;
}
.video-card {
  width: 100%;
  height: 100%;
  max-height: 26em;
  min-height: 26em;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1.5em;
  border-radius: 16px;
  position: relative;
  z-index: 9;
}
.video-card::after {
  content: "";
  width: 100%;
  height: 100%;
  background-color: #00102424;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 16px;
  z-index: -1;
}
.play-btn-box-for-video {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
h2.video-card-title {
  color: #fff;
  font-size: 24px;
  font-weight: 400;
}
.video-hover-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-radius: 16px;
  padding: 3em;
  position: relative;
  z-index: 9;
}
.video-hover-card img.share-btn {
  position: absolute;
  left: 10%;
  top: -40%;
}
.video-hover-card::after {
  content: "";
  width: 100%;
  height: 100%;
  background-color: #001024a4;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 16px;
  z-index: -1;
  transition: all 0.3s ease-in-out;
}
.svg-box {
  margin-bottom: 1em;
}
.video-hover-card:hover::after {
  background: #fee45bde;
  color: #00529c;
}
.video-hover-card:hover h2.video-card-title {
  color: #00529c;
}
.video-hover-card:hover .svg-box svg path {
  fill: #283667;
}
.video-hover-card:hover .svg-box svg circle {
  stroke: #283667;
}
.infographic-large-card {
  display: flex;
  width: 100%;
  overflow: hidden;
  max-height: 30em;
}
.infographics-card-parent {
  display: flex;
  flex-direction: column;
  gap: 2em;
}
.infographic-large-card img {
  object-fit: cover;
  height: 100%;
  width: 100%;
  max-height: 25em;
  border-radius: 16px;
}
.infor-img-parent {
  overflow: hidden;
  max-width: 65%;
  min-width: 65%;
  max-height: 30em;
  object-fit: cover;
}
.infor-img-parent img {
  object-fit: cover;
  height: 100%;
  width: 100%;
  max-height: 20em;
  border-radius: 16px;
}
.infor-hover-card {
  height: 100%;
  max-width: 35%;
  max-height: 20em;
  min-height: 20em;
  width: 100%;
  object-fit: cover;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2em;
}
.inforgraphic-small-card {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 2em;
}
.shashank-hover-box:hover {
  background: #fee45b;
}
section.listicles {
  background: #283667;
}
section.listicles span.special-title.yello-line {
  text-transform: capitalize;
  font-weight: 600;
}
.listicles-card-parent {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 2em;
}
.listicle-card {
  width: 100%;
  height: auto;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 1em;
}
img.listicle-card-img {
  max-height: 30em;
  object-fit: cover;
  width: 100%;
  border-radius: 16px;
}
.listicle-meta {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  justify-content: flex-start;
  align-items: flex-start;
}
h2.listicles-title {
  font-size: 28px;
  font-weight: 500;
  color: #fff;
}
.listicle-card-dets {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  color: #a5a9ac;
}
p.listicle-author {
  border-right: 1px solid;
  padding-right: 10px;
  font-size: 18px;
  margin: 0;
  font-weight: 400;
}
p.listicle-date {
  padding-left: 10px;
  margin: 0;
  font-size: 18px;
  font-weight: 400;
}
.listicle-small-card {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  gap: 1em;
}
.small-card {
  width: 100%;
  height: auto;
  display: flex;
  gap: 1em;
}
.listicle-small-card-img {
  width: 100%;
  border-radius: 8px;
  max-height: 10em;
  object-fit: cover;
  min-width: 16em;
  max-width: 100%;
}
.footer-column-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.small-card h2.listicles-title {
  font-size: 18px;
}
.small-card p.listicle-author, .small-card p.listicle-date {
  font-size: 16px;
}
.large-btn {
  width: 100%;
  border: 1px solid #919191;
  padding: 2.8em;
  border-radius: 12px;
  background: #d9d9d9;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1em;
  transition: all 0.3s ease-in-out;
  cursor: pointer;
}
.large-btn:hover {
  background: #fee45b;
}
.large-btn p {
  margin: 0;
  color: #283667;
  font-size: 18px;
  font-weight: 500;
}
.large-btn img {
  max-width: 45px;
}
.booklet-area {
  width: 100%;
  overflow: hidden;
  display: flex;
  border: 1px solid #b0b0b0;
  background: #f5f5f5;
  padding: 24px;
  border-radius: 12px;
  gap: 2em;
}
.booklet-img-area {
  width: 65%;
  height: auto;
}
img.booklet-img {
  width: 100%;
  max-height: 20em;
  object-fit: cover;
  border-radius: 16px;
}
.booklet-upload-area {
  width: 35%;
  border: 1px solid #b0b0b0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 1em;
  border-radius: 16px;
  background: #f7f5f4;
  cursor: pointer;
}
img.download-icon {
  max-width: 30px;
}
h2.download {
  font-size: 24px;
  color: #283667;
  font-weight: 500;
  max-width: 80%;
  text-align: center;
  line-height: 1.3;
}
section.policy-section {
  background: #283667;
}
section.policy-section span.special-title {
  text-transform: capitalize;
  font-weight: 500;
}
.policy-card-area {
  display: flex;
  width: 100%;
  height: auto;
  justify-content: flex-start;
  align-items: center;
  gap: 1em;
}
.policy-card {
  width: 100%;
  height: auto;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
}
h2.policy-title {
  font-size: 20px;
  padding: 10px 20px;
  color: #283667;
  font-weight: 500;
}
.policy-card:hover img.policy-img {
  transform: scale(1.1);
}
img.policy-img {
  width: 100%;
  max-height: 10em;
  object-fit: cover;
  border-radius: 16px 16px 0 0;
  transition: all 0.3s ease-in-out;
}
section.hero.resources-inner-banner {
  min-height: 35vh;
  background: url("../images/invesing-bg.png") no-repeat top/cover;
}
.pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 2em;
}
h2.previous, h2.next {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.3em;
  font-size: 16px;
  color: #5b5b5b;
  cursor: pointer;
}
.page-number {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1em;
  font-size: 16px;
  color: #767676;
}
.page-number span {
  cursor: pointer;
}
span.active-page {
  padding: 5px 12px;
  background: #76767654;
  border-radius: 8px;
  color: #283667;
}
section.video-list-item .video-card {
  max-height: 15em;
  min-height: 15em;
}
section.video-list-item .play-btn-box-for-video {
  margin-bottom: 3em;
}
section.video-list-item img.playbtn {
  max-width: 5em;
}
h2.single-video-card-title {
  font-size: 24px;
  color: #283667;
  font-weight: 500;
  margin: 0;
}
.video-card-holder {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 1em;
}
.investment-title.invest-page {
  max-width: 100%;
}
p.details-paragraph {
  font-size: 18px;
  color: #000000;
  font-weight: 400;
}
h2.article-title.inner-title {
  color: #fff;
}
img.playbtn {
  cursor: pointer;
}
.youtube-modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.8);
}
.youtube-modal-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  max-width: 800px;
  background: #000;
  border-radius: 10px;
  padding: 0;
}
.youtube-iframe-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  height: 0;
}
.youtube-iframe-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.youtube-modal-close {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 24px;
  color: #fff;
  cursor: pointer;
}
.no-scroll {
  overflow: hidden;
}
/* .third-section-container .row.align-items-center {
  padding-top: 3em;
  padding-bottom: 3em;
} */
.changing-avatar {
  position: relative;
}
button#next-button, button#prev-button {
  border: none;
  outline: none;
  background: none;
  width: fit-content;
  padding: 0;
  z-index: 99;
}
button#next-button img, button#prev-button img {
  max-width: 100%;
}
button#next-button {
  position: absolute;
  right: 17%;
  bottom: 33%;
  z-index: 99;
}
button#prev-button {
  z-index: 99;
  position: absolute;
  left: 19%;
  bottom: 33%;
}
/* Smooth transition for .box and .avatar */
.box, .avatar {
  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}
/* Active box and avatar styling */
.box.active-box, .avatar.active-avatar {
  /* Make the active box and avatar fully visible */
  transform: scale(1); /* Optional: you can add scaling effect when active */
}
.box:not(.active-box), .avatar:not(.active-avatar) {
  /* Make non-active boxes and avatars transparent */
  transform: scale(0.9); /* Optional: slight shrink effect for non-active elements */
}
.bucket-second-section ol li {
  list-style: decimal;
}
.bucket-second-section ul {
  margin-left: 25px;
  margin-bottom: 1.3em;
}
.bucket-second-section h4 {
  font-size: 1.3rem;
  font-weight: 500;
  margin-bottom: 0.5em;
}
.bucket-second-section ul li {
  list-style: initial;
}
section.third-section {
  padding-top: 10em;
  padding-bottom: 10em;
}
.bucket-second-section p, .bucket-second-section li, .bucket-second-section div, .bucket-second-section span {
  font-size: 18px;
  color: #000000;
  font-weight: 400;
}
section.bucket-second-section h3 {
  font-size: 1.4rem;
  font-weight: 600;
}
section.hero.investing-banner {
  background: none;
}
.banner-img-box {
  width: 100%;
  height: auto;
}
section.hero {
  min-height: 55em;
  padding-top: 1.5em;
}
.banner-img {
  width: 100%;
  max-height: 40em;
  object-fit: cover;
}
section.bucket-second-section h3 {
  font-size: 1.4rem;
  font-weight: 600;
  margin-bottom: 1.3em;
}
.bucket-second-section p {
  margin-bottom: 1.3em;
  font-size: 18px;
  color: #000000;
  font-weight: 400;
}
section.bucket-second-section {
  padding-top: 5vh;
}
section.hero.investing-banner {
  padding-top: 4vh;
}
img.large-img {
  max-width: 10em;
}
#eapps-instagram-feed-1 {
  width: 100%;
  padding-bottom: 3em;
}
section.details.bucket-second-section h2 {
  font-size: 1.4rem;
  font-weight: 600;
  margin-bottom: 1.3em;
}
section.details.bucket-second-section p {
  margin-bottom: 1.3em;
  font-size: 18px;
  color: #000000;
  font-weight: 400;
  text-align: justify;
}
.insta-wrapper .swiper {
  overflow: initial;
}
.insta-wrapper .swiper-button-next, .insta-wrapper .swiper-button-prev {
  top: 110%;
}
.insta-wrapper {
  gap: 0em;
}
.swiper.insta-swiper .swiper-slide {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 1em;
}
h3.yt-heading {
  text-align: start;
  font-size: 24px;
  line-height: 1.3;
  font-weight: 500;
  color: #283667;
}
img.home_playicon_img {
  max-width: 50px;
}
.home_playicon {
  width: fit-content;
  position: absolute;
  left: 45%;
  top: 25%;
}
img.playbtn {
  height: auto;
}
button.start-btn.insta-btn:nth-child(2):hover {
  background: red !important;
}
.left-section::after {
  transition: all 0.3s ease;
}
.row.align-items-center:hover .left-section::after {
  background: #283667;
  border: 1px solid #283667;
}
.insta-wrapper .swiper-button-prev {
  top: 35% !important;
  left: -1%;
  padding-left: 30px;
  padding-right: 18px;
  background: rgba(0, 0, 0, 0.9);
}
.insta-wrapper .swiper-button-next {
  position: absolute;
  bottom: 0;
  left: 98%;
  top: 35% !important;
  padding-right: 30px;
  padding-left: 18px;
  background: rgba(0, 0, 0, 0.9);
}
.insta-wrapper .swiper-button-prev img, .insta-wrapper .swiper-button-next img {
  max-width: 50px;
}
.insta-wrapper .swiper {
  overflow: hidden;
}
/* lightbox style */
.lightbox {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.8);
}
lightbox-content {
  display: block;
  margin: auto;
  max-width: 100%;
  max-height: 100%;
  position: absolute;
  left: 25%;
  top: 25%;
}
img#lightbox-image {
  width: auto;
  height: 100%;
  position: absolute;
  left: 38%;
}
.close {
  position: absolute;
  top: 20px;
  right: 35px;
  color: white;
  font-size: 30px;
  font-weight: bold;
  cursor: pointer;
}
.clickable-image {
  cursor: pointer;
}
.investment-title {
  font-size: 52px;
  color: #fff;
  font-weight: 600;
  text-transform: uppercase;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0px;
  flex-direction: column;
}
a.article-box-img {
  width: 100%;
  height: auto;
}
span.yellow-title {
  color: #fbcf4a;
}
img.resource-quote-left, img.resource-quote-right {
  display: none;
}
.investment-title.invest-page.main-heading {
  white-space: pre-wrap;
}
img.hanging-box {
  position: absolute;
  left: 0;
  width: fit-content;
  bottom: -14em;
}
p.p_mobile {
  display: none;
}
.infographic-large-card a {
  width: 100%;
}
.three-dimensional {
  color: #fbcf4a;
  text-align: center;
  /*text-shadow: 0px 0px 0 #7f6bfe, -5px 1px 0 #7f6bfe, -7px 2px 0 #7f6bfe, 0px 0px 18px rgba(0, 0, 0, .2);*/
  /*-webkit-text-stroke: 1px #7f6bfe;*/
  /*-webkit-text-stroke-color: #7f6bfe;*/
  /*text-transform: none;*/
  /*font-weight: bold;*/
  /*letter-spacing: -2px;*/
}
.investment-title, .investment-title.invest-page {
  font-size: 80px;
  font-weight: 600;
  align-items: center;
  color: #f6f6f7;
  line-height: 1.2;
  text-transform: capitalize;
}
section.booklet-section {
  padding-top: 0;
}
span.three-dimensional {
  font-size: 65px;
}
section.details.bucket-second-section img {
  border-radius: 8px;
  width: 100%;
}
#IAPTable tr.head {
  background: #283667;
  color: #fff;
}
#IAPTable tr {
  /* Styles for table rows */
  background-color: #f9f9f9; /* Light grey background */
  border-bottom: 1px solid #ddd; /* Grey border between rows */
}
#IAPTable td {
  /* Styles for table cells */
  padding: 8px; /* Padding around the cell content */
  text-align: left; /* Aligns text to the left */
  border-right: 1px solid #ddd; /* Grey border to the right of each cell */
  text-align: center;
}
.shareSocial .socialList {
  display: flex;
  flex-flow: row;
  align-items: center;
  margin-bottom: 0;
  position: fixed;
  transform: rotate(-90deg);
  right: -6em;
  width: fit-content;
  top: 20em;
  z-index: 9999;
  border-radius: 10px;
}
}
@media (max-width: 767px) {
  .shareSocial {
    flex-flow: column;
  }
}
.shareSocial .socialTitle {
  margin: 0 15px 0 0;
  font-size: 20px;
}
@media (max-width: 767px) {
  .shareSocial .socialTitle {
    margin-bottom: 15px;
    text-align: center;
  }
}
.shareSocial .socialList {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: flex-start;
  justify-content: center;
  flex-flow: row wrap;
}
.shareSocial .socialList li {
  margin: 5px;
}
.shareSocial .socialList li:first-child {
  padding-left: 0;
}
.shareSocial .socialList li a {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  border-radius: 100%;
  text-decoration: none;
  background-color: #999;
  color: #fff;
  transition: 0.35s;
}
.shareSocial .socialList li a i {
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: top left;
  transform: scale(1) translate(-50%, -50%);
  transition: 0.35s;
}
.shareSocial .socialList li a:hover i {
  transform: scale(1.5) translate(-50%, -50%);
}
.shareSocial .socialList li:nth-child(1) a {
  background-color: transparent;
}
.shareSocial .socialList li:nth-child(2) a {
  background-color: transparent;
}
.shareSocial .socialList li:nth-child(3) a {
  background-color: transparent;
}
.shareSocial .socialList li:nth-child(4) a {
  background-color: transparent;
}
.shareSocial .socialList li:nth-child(5) a {
  background-color: transparent;
}
.shareLink .permalink {
  position: relative;
  border-radius: 30px;
}
.shareLink .permalink .textLink {
  text-align: center;
  padding: 12px 60px 12px 30px;
  height: 45px;
  width: 450px;
  font-size: 16px;
  letter-spacing: 0.3px;
  color: #494949;
  border-radius: 25px;
  border: 1px solid #f2f2f2;
  background-color: #f2f2f2;
  outline: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  transition: all 0.3s ease;
}
@media (max-width: 767px) {
  .shareLink .permalink .textLink {
    width: 100%;
  }
}
.shareLink .permalink .textLink:focus {
  border-color: #d8d8d8;
}
.shareLink .permalink .textLink::-moz-selection {
  color: #fff;
  background-color: #ff0a4b;
}
.shareLink .permalink .textLink::selection {
  color: #fff;
  background-color: #ff0a4b;
}
.shareLink .permalink .copyLink {
  position: absolute;
  top: 50%;
  right: 25px;
  cursor: pointer;
  transform: translateY(-50%);
}
.shareLink .permalink .copyLink:hover:after {
  opacity: 1;
  transform: translateY(0) translateX(-50%);
}
.shareLink .permalink .copyLink:after {
  content: attr(tooltip);
  width: 140px;
  bottom: -40px;
  left: 50%;
  padding: 5px;
  border-radius: 4px;
  font-size: 0.8rem;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  background-color: #000000;
  color: #ffffff;
  transform: translateY(-10px) translateX(-50%);
  transition: all 300ms ease;
  text-align: center;
}
.shareLink .permalink .copyLink i {
  font-size: 20px;
  color: #ff0a4b;
}
.resource-content {
  display: none;
}
section.hero.resources-inner-banner.d-flex.align-items-center .investment-title.invest-page span {
  font-size: 60px;
}
.saarthi-popup-link {
  display: flex;
  justify-content: center;
  margin: 20px;
}
.saarthi-popup-link a {
  background: #333;
  color: #fff;
  padding: 10px 30px;
  border-radius: 5px;
  font-size: 17px;
  text-decoration: none;
}
.saarthi-popup-container {
  display: none; /* Hidden by default */
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(21, 17, 17, 0.8);
  align-items: center;
  justify-content: center;
}
.saarthi-popup-container:target {
  display: flex; /* Show the popup */
}
.saarthi-popup-content {
  background-color: #fefefe;
  width: auto; /* Adjust based on content size */
  border-radius: 16px;
  position: relative;
}
.saarthi-close {
  float: right;
  font-size: 50px;
  color: #aaa;
  position: absolute;
  right: 0.1em;
  top: 0.4em;
  line-height: 0;
}
.saarthi-close:hover {
  color: #fff;
}
.saarthi-news-app-promo {
  color: #fff;
  background-color: #283667;
  padding: 4em 6em;
  text-align: center;
  border-radius: 8px;
}
.saarthi-news-app-promo img {
  width: 200px;
  margin: 0 5px;
  border-radius: 8px;
}
.saarthi-news-app-promo-subsection {
  display: flex;
  justify-content: center; /* Centering the elements within the section */
  align-items: center;
}
.saarthi-news-app-promo-text p {
  font-size: 24px; /* Adjusted for better readability */
}
.saarthi-news-app-promo-subsection > img {
  display: none !important;
}
section.hero.investing-banner {
  min-height: 48em;
}
a.booklet-link {
  padding: 100px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}
h2.article-title br {
  display: none;
}
h2.listicles-title br {
  display: none;
}
.social-toggle-button {
  display: none; /* Hidden on desktop */
  background: transparent;
  color: #000;
  font-size border: none;
  padding: 10px;
  cursor: pointer;
}
.shareSocial .socialList li {
  transform: rotate(90deg);
}
/* Desktop view */
@media (min-width: 768px) {
  .social-toggle-button {
    display: none; /* No toggle button for desktop */
  }
  .socialList {
    display: block; /* Always visible on desktop */
  }
}
/* Mobile view */
@media (max-width: 767px) {
  .social-toggle-button {
    display: block;
    position: fixed;
    right: -12px;
    top: 21em;
    font-size: 1.5em;
    border: none;
    padding: 0;
  }
  .shareSocial .socialList {
    display: none;
  }
  .socialList {
    display: none; /* Hidden by default */
  }
  .socialList.active {
    display: inline-flex; /* Show list when toggled */
  }
  .socialList {
    max-height: 0; /* Hidden initially */
    opacity: 0; /* Invisible initially */
  }
  .socialList.active {
    max-height: 500px; /* Adjust as per your content height */
    opacity: 1; /* Fully visible */
  }
  .shareSocial .socialList {
    background: #f1d95c;
    border-radius: 10px;
  }
  button#toggleSocial svg {
    fill: #f1d95c;
  }
  .shareSocial .socialList {
    right: -8em;
  }
}
.gap-3 {
  gap: 0.2rem !important;
}
.ThankUParticipation {
  font-size: 60px;
  color: #ffca00;
  font-weight: bold;
  margin-bottom: 20px;
}
.WomenEncourage {
  font-size: 35px;
  color: #fff;
  margin-bottom: 10px;
}
.AtmanirbherShareIcon {
  font-size: 36px; /*margin-top: 20px;*/ margin-right: 20px;
}
.maleTitle, .femaleTitle {
  font-size: 25px;
  font-weight: 500;
}
.messageWhiteText {
  width: 70%;
  font-size: 35px;
  color: #fff;
  margin: 20px auto;
  text-align: center;
}
.messageYellowText {
  width: 60%;
  font-size: 45px;
  color: #ffca00;
  margin: 0px auto;
  text-align: center;
  line-height: 45px;
}
.ThankYouParticipation {
  font-size: 60px;
  color: #ffca00;
  font-weight: bold;
  margin-bottom: 20px;
}
.shareEncourage {
  font-size: 35px;
  color: #fff;
  margin-bottom: 10px;
}
@media (max-width: 1366px) {
  .select-gender {
    font-size: 32px !important;
  }
  .gender {
    font-size: 20px !important;
  }
  .maleTitle, .femaleTitle {
    font-size: 20px !important;
  }
  .form-check .form-check-input {
    margin-top: 8px !important;
  }
  .subline {
    font-size: 25px !important;
  }
  .mT60 {
    margin-top: 118px !important;
  }
  .messageWhiteText {
    width: 70% !important;
    font-size: 25px !important;
  }
  .messageYellowText {
    width: 80% !important font-size: 35px !important;
    line-height: 35px !important;
  }
  .form-check-inline {
    margin-right: 0px !important;
  }
  .modal-body {
    padding: 60px 30px !important;
  }
}
@media (max-width: 1200px) {}
@media (max-width: 992px) {}
@media (max-width: 768px) {
  .mT30 {
    margin-top: 0px !important;
  }
  .mB30 {
    margin-bottom: 0px !important;
  }
}
@media (max-width: 576px) {
  .atmanirbher-screen-1 .screen-content {
    margin-bottom: 40px;
  }
  .ThankUParticipation {
    font-size: 40px;
    margin-bottom: 10px;
  }
  .modal-body {
    padding: 50px 20px !important;
  }
  .WomenEncourage {
    font-size: 25px;
  }
  .dark-blue-outer-box {
    background-image: none !important;
    background-color: #1d2649;
    border: 1px solid #fff;
    border-radius: 20px;
  }
  .quiz-title {
    border-bottom: 1px solid #2c3869;
  }
}
@media (max-width: 400px) {
  .select-gender {
    font-size: 35px !important;
  }
  .atmanirbher-screen-1 .screen-title span {
    font-size: 40px !important;
  }
  .atmanirbher-screen-1 .screen-content {
    margin-bottom: 40px;
  }
  .ThankUParticipation {
    font-size: 40px;
    margin-bottom: 10px;
  }
  .modal-body {
    padding: 50px 20px !important;
  }
  .WomenEncourage {
    font-size: 25px;
  }
}
.form-check-input[type=radio] {
  cursor: pointer !important;
}
.investor-items {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 20px;
  max-width: 1300px;
  margin-left: auto !important;
  margin-right: auto !important;
}
.investor-blocks, .investor-infographics {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 20px;
  padding: 30px 20px;
  color: white;
  text-align: center;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}
.investor-blocks {
  /*min-height: 250px;*/
  min-height: 400px;
}
.investor-infographics {
  height: 260px;
}
.investor-blocks h3, .investor-blocks h4 {
  font-weight: 700;
  margin: 0;
}
.investor-blocks h3 {
  font-size: 36px;
  line-height: 48px;
}
.investor-blocks h4 {
  font-size: 36px;
  font-weight: 600;
}
.tittle-box {
  font-size: 26px;
  font-weight: 500;
}
.sebi-tittle {
  font-size: 31px;
  font-weight: 700;
  line-height: 42px;
}
.real-update-txt {
  font-size: 24px;
  margin: 0;
}
.infographics-tittle {
  font-size: 28px;
  text-transform: uppercase;
  text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.6);
}
.highlight-yellow, .highlight-blue {
  color: #FFD700;
  font-weight: 600;
}
.cta-link {
  color: #ffffff;
  text-decoration: none;
  font-size: 18px;
  font-weight: 400;
  border-bottom: 2px solid #FFD700;
  padding: 10px 8px 6px 7px;
}
.ctalink-btn {
  margin-top: 10px;
}
.card-btn {
  background-color: #f7f5f4;
  border: 1px solid #b0b0b0;
  border-radius: 20px;
  padding: 16px;
  text-align: center;
  transition: 0.2s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.card-btn:hover {
  background-color: #fee45b;
}
.card-icons-container {
  margin-bottom: 30px;
}
.card-icons {
  width: 60px;
  height: 60px;
  border: 2px solid #4a5568;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.arrow-box {
  width: 24px;
  height: 24px;
  stroke: #4a5568;
  stroke-width: 2;
  fill: none;
}
.title-read {
  color: #283667;
  font-size: 26px;
  font-weight: 400;
  margin: 0;
  line-height: 1.3;
}
.team-animations {
  background-color: #FEE45B;
  border: 2px solid #283667;
  padding: 20px;
  border-radius: 20px;
  transform: rotate(-5deg);
  width: 260px;
  text-align: left;
}
.team-img {
  width: 70%;
}
.teambio {
  color: black;
  font-weight: 600;
  font-size: 18px;
  margin-top: 6px;
}
.journey-tittle {
  text-align: center;
}
.app-icon {
  border-radius: 10px;
  width: 66px;
  margin-bottom: 15px;
  background-color: #ededed;
  padding: 6px;
}
.sebi-tittle {
  font-size: 31px;
  font-weight: 700;
  margin: 0 0 0px;
  line-height: 42px;
}
.journey-img {
  margin-left: 5rem;
  transform: rotate(4deg);
}
.journey-bio {
  background-color: #fee45b;
  padding: 13px;
  width: 230px;
  font-weight: 600;
  border-radius: 16px;
  font-size: 18px;
  position: absolute;
  transform: rotate(10.5deg);
  margin: 4px auto -2px;
}
.hanging-resource {
  background-color: #283667;
  border-color: white;
  padding: 10px 20px;
  color: white;
  position: absolute;
  bottom: -77%;
  left: 0;
}
.hanging-resource .teambio {
  color: white;
  transform: rotate(-2.5deg);
}
@media only screen and (max-width: 768px) {
  .team-animations {
    background-color: #FEE45B;
    border: 2px solid #283667;
    padding: 15px;
    border-radius: 20px;
    transform: rotate(-5deg);
    width: 176px;
    text-align: left;
  }
  .teambio {
    color: black;
    font-weight: 600;
    font-size: 11px;
    margin-top: 6px;
  }
  .journey-bio {
    background-color: #fee45b;
    padding: 8px;
    width: 172px;
    font-weight: 600;
    border-radius: 16px;
    font-size: 13px;
    position: absolute;
    transform: rotate(10.5deg);
    margin: 4px auto -2px;
  }
  .investor-items {
    margin-top: 3rem;
  }
  .hanging-resource {
    display: none;
  }
}
.betaVersion {
  color: #867ee2;
  font-size: 14px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.2px;
  padding: 10px;
}
.errorOuter {
  margin: 0 auto;
  padding: 30px;
  background-color: #fff;
  color: #000;
  text-align: center;
  border-radius: 20px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}
.errorOuter h1 {
  color: #3f4f99;
  font-weight: bold;
  font-size: 150px;
  margin-bottom: 30px;
}
.mT150 {
  margin-top: 150px;
}
.button {
  display: inline-block;
  padding: 15px 20px;
  background-color: #fee45b;
  color: #11172b;
  border-radius: 40px;
  font-size: 16px;
  font-weight: 600;
  transition: background-color 0.3s;
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  text-align: center;
  width: 100%;
  max-width: 200px; /* Set a limit for button width */
}
@media (min-width: 240px) {
  .errorOuter h1 {
    font-size: 70px;
  }
  .font28 {
    font-size: 22px;
  }
  .font20 {
    font-size: 18px;
  }
  .button {
    width: 120px;
  }
}
@media (min-width: 280px) {
  .errorOuter h1 {
    font-size: 100px;
  }
  .font28 {
    font-size: 22px;
  }
  .font20 {
    font-size: 18px;
  }
  .button {
    width: 160px;
  }
}
@media (min-width: 320px) {
  .errorOuter h1 {
    font-size: 100px;
  }
  .font28 {
    font-size: 22px;
  }
  .font20 {
    font-size: 18px;
  }
  .button {
    width: 160px;
  }
}
@media (min-width: 360px) {
  .errorOuter h1 {
    font-size: 100px;
  }
  .font28 {
    font-size: 22px;
  }
  .font20 {
    font-size: 18px;
  }
  .button {
    width: 180px;
  }
}
@media (min-width: 375px) {
  .errorOuter h1 {
    font-size: 100px;
  }
  .font28 {
    font-size: 22px;
  }
  .font20 {
    font-size: 18px;
  }
  .button {
    width: 180px;
  }
}
@media (min-width: 384px) {
  .errorOuter h1 {
    font-size: 100px;
  }
  .font28 {
    font-size: 22px;
  }
  .font20 {
    font-size: 18px;
  }
  .button {
    width: 180px;
  }
}
@media (min-width: 390px) {
  .errorOuter h1 {
    font-size: 100px;
  }
  .font28 {
    font-size: 22px;
  }
  .font20 {
    font-size: 18px;
  }
  .button {
    width: 180px;
  }
}
@media (min-width: 411px) {
  .errorOuter h1 {
    font-size: 100px;
  }
  .font28 {
    font-size: 22px;
  }
  .font20 {
    font-size: 18px;
  }
  .button {
    width: 180px;
  }
}
@media (min-width: 480px) {
  .errorOuter h1 {
    font-size: 120px;
  }
  .font28 {
    font-size: 25px;
  }
  .font20 {
    font-size: 18px;
  }
  .button {
    width: 180px;
  }
}
@media (min-width: 540px) {
  .errorOuter h1 {
    font-size: 120px;
  }
  .font28 {
    font-size: 25px;
  }
  .font20 {
    font-size: 18px;
  }
  .button {
    width: 180px;
  }
}
@media (min-width: 600px) {
  .errorOuter h1 {
    font-size: 120px;
  }
  .font28 {
    font-size: 25px;
  }
  .font20 {
    font-size: 18px;
  }
  .button {
    width: 180px;
  }
}
@media (min-width: 640px) {
  .errorOuter h1 {
    font-size: 120px;
  }
  .font28 {
    font-size: 25px;
  }
  .font20 {
    font-size: 18px;
  }
  .button {
    width: 180px;
  }
}
/*@media (max-width: 640px) {
.button {
    width: 140px;
}
}*/
@media (min-width: 768px) {
  .errorOuter h1 {
    font-size: 135px;
  }
  .font28 {
    font-size: 28px;
  }
  .font20 {
    font-size: 18px;
  }
  .button {
    width: 180px;
  }
}
@media (min-width: 800px) {
  .errorOuter h1 {
    font-size: 140px;
  }
  .font28 {
    font-size: 28px;
  }
  .font20 {
    font-size: 18px;
  }
  .button {
    width: 180px;
  }
}
@media (min-width: 912px) {
  .errorOuter h1 {
    font-size: 140px;
  }
  .font28 {
    font-size: 28px;
  }
  .font20 {
    font-size: 18px;
  }
  .button {
    width: 180px;
  }
}
@media (min-width: 1024px) {
  .errorOuter h1 {
    font-size: 150px;
  }
  .font28 {
    font-size: 28px;
  }
  .font20 {
    font-size: 20px;
  }
  .button {
    width: 180px;
  }
}
@media (min-width: 1280px) {
  .errorOuter h1 {
    font-size: 150px;
  }
  .font28 {
    font-size: 28px;
  }
  .font20 {
    font-size: 20px;
  }
  .button {
    width: 180px;
  }
}
@media (min-width: 1366px) {
  .errorOuter h1 {
    font-size: 150px;
  }
  .font28 {
    font-size: 28px;
  }
  .font20 {
    font-size: 20px;
  }
  .button {
    width: 180px;
  }
}
@media (min-width: 1900px) {
  .errorOuter h1 {
    font-size: 150px;
  }
  .font28 {
    font-size: 28px;
  }
  .font20 {
    font-size: 20px;
  }
  .button {
    width: 180px;
  }
}
@media (min-width: 1920px) {
  .errorOuter h1 {
    font-size: 150px;
  }
  .font28 {
    font-size: 28px;
  }
  .font20 {
    font-size: 20px;
  }
  .button {
    width: 180px;
  }
}
.font-13 {
  font-size: 13px;
}