@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 {
  --color-primary: #001357;

  --color-secondary: #eab308;
  --color-secondary-hover: #eab308;

  --color-accent: #eab308;

  --color-text: #060813;

  --color-background: #f7f8fd;
}

*,
*::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: var(--color-background);

  color: var(--color-text);
}

/* Loader Begins */
/* 1️⃣ Logo Button look */
.logo-button {
  border: 4px solid #d4af37; /* Royal Gold */
  border-radius: 1rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.logo-button.pressed {
  transform: scale(0.9);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

/* Loader underline animation */

.loader {
  font-weight: bold;
  font-family: "Segoe UI", sans-serif;
  font-size: 24px;
  text-align: center;
  color: #d4af37; /* Royal Gold */
  padding-bottom: 8px;
  background: linear-gradient(currentColor 0 0) 0 100% / 0% 3px no-repeat;
  animation: underlineFill 2s linear infinite;
}
.loader:before {
  content: "Our Motto : Conscious Planning...";
}

@keyframes underlineFill {
  to {
    background-size: 100% 3px;
  }
}

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

#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 var(--color-accent); /* 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: 100000;
}
.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: red;
}

.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: 1;
  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: var(--color-primary);
  /* 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 var(--color-primary);
}

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

.carousel-button.secondary:hover {
  transform: translateY(-5px);
  background-color: var(--color-secondary-hover);
  box-shadow: 0 10px 30px var(--color-secondary-hover);
}

#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: var(--color-primary);
}

.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 */

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;
}

.flexGalleryFD {
  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: var(--color-primary);
  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: var(--color-primary);
  border: 2px solid var(--color-primary);
  border-radius: 12px;
}

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

.color {
  background-image: linear-gradient(to bottom right, #b86512, #ebb178);
  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: 1rem;
  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;
}

.containerInsurance {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 2rem;
  width: 100%;
  margin: 0% auto;
  padding: 0;
}

.text-box {
  width: 80%;
  font-weight: 400;
  font-size: 1.125rem;
  text-align: justify;
}

#policyText p {
  margin: 1.75rem 0;
}

#faqText p {
  margin: 1.15rem 0;
}

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

/* 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;
  }

  .frontPageNav {
    background-color: #f9f6f1;
  }

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

  .flexGalleryFD {
    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, #b86512, #ebb178);
    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));
  }
}