@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Rubik:ital,wght@0,300..900;1,300..900&display=swap");

/* REMINDER

  IT ONLY HAS THE NEW CSS USED TO CREATE THE WEBSITE LAYOUT
  TO ADD THE OLD CSS, FOR THE OTHER FILES, PLEASE REFER TO THE OLD CSS FILE IN THE OTHER MODELS
  OR FROM THE NEW WEBSITE WE HAVE CREATED

*/

/* 🎨 COLOR PALETTE */

:root {
  /* Primary Color - Trust & Stability /*/
  --color-primary: #0056ff; /* Royal Blue 

  /* Secondary Color - Energy & Action /*/
  --color-secondary: #ffa726; /* Vibrant Orange*/

  /* Accent Color - Modern & Friendly /*/
  --color-accent: #f06292; /* Bold Coral 

  /* Text Color - Neutral, High Readability / */
  --color-text: #2c2c2c; /* Charcoal Gray 

  /* Background Color - Clean & Light /*/
  --color-background: #fafafa; /* Off-White */
}

/* 🖋️ TYPOGRAPHY GUIDELINES */

/* Headers /
  / Font: 'Poppins', sans-serif; Font-weight: 600 (SemiBold) */

/* Body Text /
  / Font: 'Inter' or 'Roboto', sans-serif; Font-weight: 400 */

/* Data/Stats/Numbers /
  / Font: 'Space Grotesk' or 'IBM Plex Mono', monospace; */

*,
*::after,
*::before {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

svg {
  display: block;
  overflow: hidden;
  margin-bottom: -1px;
}

html {
  overflow-y: scroll;
  overflow-x: hidden;
  scroll-behavior: smooth;
}

.bg-black {
  --tw-bg-opacity: 1;
  background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
}

body {
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
  height: 100%;
  background-color: #fafafa;
  color: #2c2c2c;
}

/* Loader Begins */

.loader-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #f2f2f1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 1;
  transition: opacity 1s ease-in-out;
}

.loader-container.fade-out {
  opacity: 0;
  pointer-events: none;
}

/* Initial spiral-in animation */
@keyframes spiral-in {
  0% {
    transform: scale(0.2) rotate(-360deg);
    opacity: 0;
  }
  50% {
    transform: scale(1.2) rotate(8deg);
    opacity: 0.9;
  }
  100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}

/* Loop animation if loading takes longer */
@keyframes spiral-loop {
  0% {
    transform: scale(0.95) rotate(-8deg);
    opacity: 0.6;
  }
  100% {
    transform: scale(1.05) rotate(8deg);
    opacity: 1;
  }
}

circle {
  opacity: 0;
  transform-origin: center;
}

circle.spiral-in {
  animation: spiral-in 3s ease-in-out forwards;
}

circle.looping {
  animation: spiral-loop 1.5s ease-in-out infinite alternate;
  opacity: 0.6;
}

/* Loading text under logo */
.loading-text {
  margin-top: 1.5rem;
  font-size: 1.1rem;
  color: #2c2c2c;
  opacity: 0;
  animation: text-fade 1s ease-in forwards;
  animation-delay: 1s;
}

@keyframes text-fade {
  to {
    opacity: 1;
  }
}

/* Loader Ends */
.text-custom-maroon {
  color: #0056ff;
}

#nav1 {
  margin: 1.25rem 0;
  display: flex; /* Align items horizontally */
  list-style: none; /* Remove default bullets */
  padding: 0; /* Remove default padding */
}

#nav1 li {
  margin: 0 1.25rem;
  border-bottom: 2px solid transparent; /* Add a transparent border by default */
  transition: border-color 0.3s ease; /* Smooth color transition */
}

#nav1 li:hover {
  border-bottom: 2px solid #f06292; /* Change only the color on hover */
}

.riskprofiler {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem 1rem; /* Adjust padding for smaller screens */
  background-color: #f7f7f7;
}

.socialMediaNav {
  position: fixed;
  width: 50px;
  margin-top: 50px;
  transition: all 0.3s linear;
  box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, 0.4);
  bottom: 4rem;
  z-index: 100;
}
.socialMediaNav li {
  height: 60px;
  position: relative;
}
.socialMediaNav li a {
  color: white;
  display: block;
  height: 100%;
  width: 100%;
  line-height: 60px;
  padding-left: 15%;
  border-bottom: 1px solid rgba(0, 0, 0, 0.4);
  transition: all 0.3s linear;
}
.socialMediaNav li:nth-child(1) a {
  background: #2867b2;
}

.socialMediaNav li a i {
  position: absolute;
  top: 17px;
  font-size: 27px;
}
.socialMediaNav ul li a span {
  display: none;
  font-weight: bold;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.socialMediaNav a:hover {
  z-index: 1000;
  width: 200px;
}
.socialMediaNav ul li:hover a span {
  padding-left: 30%;
  display: block;
}


.whatsapp-icon {
  padding-left: 5px;
  width: 2.5rem;
}

/* Whatsapp Button */
.whatsapp-btn {
  color: #25d366;
  background-color: #e1f1f7;

  position: fixed;
  bottom: 1.5rem;
  right: 0.5rem;
  z-index: 3000;
  text-align: center;
  border-radius: 5px;
  cursor: pointer;

  display: flex;
  align-items: center;
}

.whatsapp-btn .connect2 {
  font-size: 1.5rem;
  font-weight: 700;
  padding-right: 10px;
  background-color: #e1f1f7;
  opacity: 1;
}
.whatsapp-icon {
  width: 3.25rem;
  fill: #25d366;
  background-color: #e1f1f7;
}

.riskprofiler-content {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  width: 100%; /* Full width for small screens */
  max-width: 80%; /* Restrict width on larger screens */
  height: 100vh; /* Allow height to adjust based on content */
  padding: 2rem; /* Add padding for spacing */
  background-image: url(/images/riskprofierhero.png);
  background-size: cover; /* Ensure the image scales properly */
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 15px;
}

.team-members-box {
  margin-top: -2.5%;
}

.carousel-button {
  display: inline-block;
  margin: 0.5rem;
  padding: 0.8rem 1.5rem;
  font-size: 1rem;
  color: #fff;
  border-radius: 8px;
  text-decoration: none;
  background-color: #0056ff;
  /* background-color: rgba(0, 0, 0, 0.7); Semi-transparent background */
  transition: all 0.1s ease;
}

.carousel-button:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px #0142c2;
}

.carousel-button.secondary {
  color: #fff;
  background-color: #ffa726;
  transition: all 0.1s ease;
}

.carousel-button.secondary:hover {
  transform: translateY(-5px);
  background-color: #d98b14;
  box-shadow: 0 10px 30px rgb(248, 175, 64);
}

#modalBtn {
  position: absolute;
  margin-top: -5rem;
  z-index: -1;
}

@media (max-width: 1200px) {
  .riskprofiler-content {
    max-width: 100%;
  }
}

@media (max-width: 1000px) {
  .riskprofiler-content {
    padding: 1rem;
  }
}

.button {
  transition: 0.5s ease;
}

.button:hover {
  background-color: #0056ff;
}

.journey {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.testimonial {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 0;
  margin: 2rem 0;
}

figure {
  box-shadow: 0px 4px 22px 0px rgba(0, 0, 0, 0.05);
  border-style: solid;
  border-width: 1px 1px 1px 1px;
  border-color: #e5e5e5;
}

.testimonial h2 {
  padding: 2rem 0;
}

.whatwedo {
  padding: 0;
}

.whatwedoimg {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 75%;
}

.portfolioForecast {
  margin: 1% 22.5%;
}

.riskProfileHeight {
  margin-top: -3%;
}

.subscribe {
  padding: 2rem 0;
  margin: 2rem 0;
}

.animate-slide-in {
  opacity: 0;
  transform: translate(50px, -50px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}
.animate-slide-in.visible {
  opacity: 1;
  transform: translate(0, 0);
}

.animate-slide-in2 {
  opacity: 0;
  transform: translate(-50px, -50px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}
.animate-slide-in2.visible {
  opacity: 1;
  transform: translate(0, 0);
}

#imageAbt {
  margin-left: 12.5%;
}

/* heropage */

@keyframes waveAnimation {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

.wave {
  position: absolute;
  width: 200%;
  height: 100px;
  background-repeat: repeat-x;
}
.wave1 {
  top: 0;
}
.wave2 {
  top: 0;
  opacity: 0.7;
  animation: waveAnimation 8s linear infinite;
}
.wave3 {
  top: 0;
  opacity: 0.5;
  animation: waveAnimation 12s linear infinite;
}

heading {
  font-size: 2.5rem;
}

.our-team .team-content {
  width: 100%;
  height: auto;
  background: #323232;
  padding: 27px 0;
  border-left: 5px solid #3cb5d3;
  border-right: 5px solid #3cb5d3;
  box-shadow: 0 15px 25px 0 rgba(3, 7, 15, 0.1);
  position: absolute;
  bottom: 0;
  right: 0;
  transition: all 0.5s ease 0s;
}

.aboutStatement {
  margin-top: 1%;
}

.galleryImg {
  height: 300px;
  width: 300px;
}

.flexGallery {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  margin: 2rem 0;
}

.flexGallery img {
  height: 200px;
  width: 300px;
}

.formWidth {
  width: 55rem;
}

.formDiv {
  margin-left: 15%;
}

.mobileWidth {
  width: 50%;
}

#outputTbl {
  margin: 1rem 3rem;
}

.formPoint {
  margin: 2rem 0 0 8%;
}

.buttonPush {
  margin-top: 1.75rem;
}

.dropdownSearch {
  width: 400%;
}

#tooltip {
  position: relative;
  cursor: pointer;
}

#tooltipText {
  position: absolute;
  left: 50%;
  top: -50px; /* Adjust based on your preference */
  transform: translateX(-50%);
  background-color: #000;
  color: #fff;
  white-space: nowrap; /* Allows text to wrap naturally */
  padding: 10px 15px;
  border-radius: 7px;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.5s ease;
  z-index: 100; /* Ensure it's on top of other elements */
}

#tooltipText::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  border: 10px solid transparent;
  border-top-color: #000;
}

#tooltip:hover #tooltipText {
  visibility: visible;
  opacity: 1;
}

.flexContact {
  display: flex;
  flex-direction: row;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
    /* or scale: 0; */
  }
  100% {
    opacity: 1;
    /* or scale: 1; */
  }
}

.fade-in {
  animation: fadeIn 2s ease-in-out;
}

@keyframes slideInRight {
  0% {
    transform: translateX(100%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

.slide-in-right {
  animation: slideInRight 2s ease-in-out forwards;
}

@keyframes slideInLeft {
  0% {
    transform: translateX(-100%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

.slide-in-left {
  animation: slideInLeft 2s ease-in-out forwards;
}

.marquee {
  display: flex;
  block-size: 150px;
  margin-block: var(--marquee-item-height);
  position: relative;
  overflow-x: hidden;
  mask-image: linear-gradient(
    to right,
    hsl(0 0% 0% / 0),
    hsl(0 0% 0% / 1) 20%,
    hsl(0 0% 0% / 1) 80%,
    hsl(0 0% 0% / 0)
  );
}

.marquee--8 {
  --marquee-item-width: 100px;
  --marquee-item-height: 10px;
  --marquee-duration: 36s;
  --marquee-items: 8;
}

.marquee--3 {
  --marquee-item-width: 150px;
  --marquee-item-height: 150px;
  --marquee-duration: 24s;
  --marquee-items: 3;
}

.marquee--6 {
  --marquee-item-width: 166px;
  --marquee-item-height: 100px;
  --marquee-duration: 32s;
  --marquee-items: 6;
}

.marquee__item {
  --marquee-item-offset: max(
    calc(var(--marquee-item-width) * var(--marquee-items)),
    calc(100% + var(--marquee-item-width))
  );
  --marquee-delay: calc(
    var(--marquee-duration) / var(--marquee-items) *
      (var(--marquee-items) - var(--marquee-item-index)) * -1
  );
  position: absolute;
  inset-inline-start: var(--marquee-item-offset);
  transform: translateX(-50%);
  animation: go linear var(--marquee-duration) var(--marquee-delay, 0s) infinite;
}

.marquee__item:nth-child(4n) {
  border-top-right-radius: 1rem;
}

.marquee__item:nth-child(4n + 1) {
  border-bottom-right-radius: 1rem;
}

.marquee__item:nth-child(4n + 2) {
  border-bottom-left-radius: 1rem;
}

.marquee__item:nth-child(4n + 3) {
  border-top-left-radius: 1rem;
}

.marquee--8 .marquee__item:nth-of-type(1) {
  --marquee-item-index: 1;
}

.marquee--8 .marquee__item:nth-of-type(2) {
  --marquee-item-index: 2;
}

.marquee--8 .marquee__item:nth-of-type(3) {
  --marquee-item-index: 3;
}

.marquee--8 .marquee__item:nth-of-type(4) {
  --marquee-item-index: 4;
}

.marquee--8 .marquee__item:nth-of-type(5) {
  --marquee-item-index: 5;
}

.marquee--8 .marquee__item:nth-of-type(6) {
  --marquee-item-index: 6;
}

.marquee--8 .marquee__item:nth-of-type(7) {
  --marquee-item-index: 7;
}

.marquee--8 .marquee__item:nth-of-type(8) {
  --marquee-item-index: 8;
}

.marquee--3 .marquee__item:nth-of-type(1) {
  --marquee-item-index: 1;
}

.marquee--3 .marquee__item:nth-of-type(2) {
  --marquee-item-index: 2;
}

.marquee--3 .marquee__item:nth-of-type(3) {
  --marquee-item-index: 3;
}

.marquee--6 .marquee__item:nth-of-type(1) {
  --marquee-item-index: 1;
}

.marquee--6 .marquee__item:nth-of-type(2) {
  --marquee-item-index: 2;
}

.marquee--6 .marquee__item:nth-of-type(3) {
  --marquee-item-index: 3;
}

.marquee--6 .marquee__item:nth-of-type(4) {
  --marquee-item-index: 4;
}

.marquee--6 .marquee__item:nth-of-type(5) {
  --marquee-item-index: 5;
}

.marquee--6 .marquee__item:nth-of-type(6) {
  --marquee-item-index: 6;
}

@keyframes go {
  to {
    inset-inline-start: calc(var(--marquee-item-width) * -1);
  }
}

.position-image-right {
  justify-self: end;
}

.position-image-left {
  justify-self: start;
}

.row {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  margin-top: 3rem;
  margin: 0 1.5rem;
}

.row2 {
  margin-top: 2rem !important;
}

#knowledgePartner {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  margin: 1.5rem;
}

#knowledgePartner div {
  margin: 0 4rem;
}

#knowledgePartner img {
  width: 250px;
  height: 100px;
}

.marquee--8 {
  --marquee-item-width: 200px;
}

.planningImg {
  height: 24rem;
  margin-left: -2rem;
  margin-top: 1rem;
}

.labelMargin {
  margin-left: -10%;
}

.fiveLabelMargin {
  margin-left: -5%;
}

/* For the Our Products in index.html */

.explore-product {
  display: flex; /* Use Flexbox for alignment */
  align-items: center; /* Vertically center the items */
  text-decoration: none; /* Remove underline from the link */
  color: white;
  background-color: rgb(26, 86, 219);
  width: fit-content; /* Inherit color from parent element */
  padding: 10px; /* Add padding if needed */
  transition: all 1s ease;
  border-radius: 2px;
}

.explore-product:hover {
  background-color: white;
  color: rgb(26, 86, 219);
  border: 2px solid rgb(26, 86, 219);
  border-radius: 12px;
}

.material-symbols-outlined {
  margin-left: 5px; /* Add space between text and icon */
}

.color {
  background-image: linear-gradient(to bottom right, #1a68c7, #97bbe6);
  color: white;
  padding: 0.7rem;
  margin-right: 0.5rem;
  border-radius: 100%;
  font-size: 2rem !important;
}
.illustration {
  display: flex; /* Create a flex container */
  justify-content: space-between; /* Space out the columns evenly */
  margin: 2rem 0;
}

.illustration > div {
  flex-direction: row;
  flex-grow: 1;
  margin: 0 10px; /* Add some margin between columns */
}

.col-obj {
  display: flex;
  justify-content: space-between;
  margin: 10px 0;
}

.col-obj p {
  display: flex; /* Use flexbox to align items inside <p> */
  align-items: center; /* Center align items vertically */
  justify-content: start;
  text-align: center;
  margin: 1rem 0;
  font-size: 0.8rem;
  font-weight: 700;
  width: 100%;
}

.hidden-element {
  position: absolute;
  left: -9999px; /* Moves it out of view */
}

.gridCols1 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Password Protection */

#content {
  display: none;
}

/* Fullscreen overlay */
#password-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8); /* Semi-transparent background */
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/* Centered container for password prompt */
.password-container {
  text-align: center;
  background: #222;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.password-container input {
  padding: 10px;
  margin: 10px 0;
  width: 80%;
  border: none;
  border-radius: 5px;
}

#password-input {
  color: black;
}

.password-container button {
  padding: 10px 20px;
  background: #4caf50;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.password-container button:hover {
  background: #45a049;
}

#error-message {
  color: red;
  font-size: 14px;
}

/* End */
@media screen and (max-width: 1023px) {
  .dropdownSearch {
    width: 120%;
  }
}

@media screen and (max-width: 880px) {
  .formWidth {
    width: 50rem;
  }

  .buttonPush {
    margin-top: 1.25rem;
  }
}

@media screen and (max-width: 800px) {
  .formWidth {
    width: 47rem;
  }
}

@media screen and (max-width: 768px) {
  .flexContact {
    flex-direction: column;
  }

  .labelMargin {
    margin-left: 0 !important;
  }

  .fiveLabelMargin {
    margin: 0 !important;
  }

  .gridMobile {
    margin: 0 5%;
  }

  .flexMobile {
    display: flex;
    flex-direction: column !important;
    text-align: center;
    align-items: center;
  }

  .formDiv {
    margin-left: 0%;
  }

  .formWidth {
    width: 80%;
  }

  .formPoint {
    margin: 10%;
  }

  .mobile-top {
    margin-top: 0.5rem;
  }

  .flexMobile div {
    margin: 1rem 0;
  }

  .aboutStatement {
    text-align: center;
    align-items: center;
    margin-top: 2rem;
  }

  .flexGallery {
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .flexGallery img {
    margin: 1rem 0;
  }

  .mobileService {
    margin-top: 2rem;
  }

  .mobileService h2 {
    text-align: center;
  }

  .mobileService p {
    text-align: center;
  }

  .mobileReverse {
    display: flex;
    flex-direction: column-reverse;
  }

  .position-image {
    justify-self: center !important;
  }

  .row {
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .row iframe {
    margin: 1rem 0;
  }

  #knowledgePartner {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    margin: 1.5rem;
  }

  #knowledgePartner div {
    margin: 1rem auto;
  }

  #knowledgePartner img {
    width: 50%;
    height: 50%;
    margin: 0 auto;
  }

  .row div {
    margin: 1rem 0;
  }

  #mobileDown span {
    display: block;
    margin-top: 0.5rem;
    text-align: center;
  }

  #mobileDown > div {
    justify-content: center;
    align-items: center;
  }

  .planningImg {
    display: none;
  }

  .mobileDiv {
    display: block !important;
  }
  .mobileWidth {
    width: 100%;
  }

  .mobileHidden {
    display: none;
  }

  .color {
    background-image: linear-gradient(to bottom right, #1a68c7, #97bbe6);
    color: white;
    padding: 0.5rem;
    margin-right: 0.1rem;
    border-radius: 100%;
    font-size: 2rem !important;
  }

  .col-obj {
    justify-content: space-between !important;
    margin: 10px 0;
  }

  .col-obj p {
    justify-content: center;
    margin: 1rem 0;
    font-size: 0.6rem;
    font-weight: 700;
    width: 100%;
  }

  .illustration {
    margin-left: -7.5%;
  }

  .illustration > div {
    flex-direction: row;
    flex-grow: 1;
    margin: 0 4px; /* Add some margin between columns */
  }

  .mobileContainer {
    margin: 0 5%;
  }

  #productImg {
    display: none;
  }

  .formMargin {
    margin: 2.5rem 5%;
  }

  .navSectionMobile {
    width: 100%;
  }

  #researchSelectBtnPanel {
    flex-direction: column;
  }

  #imageAbt {
    margin-left: 0% !important;
  }

  .portfolioForecast {
    margin: 1% 1%;
  }

  .whatwedoimg {
    display: none;
  }

  .gridCols1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}