:root {

  --orange: #ff9804;

  --gray: #c8d0dc;

  --dark-blue: #132542;

  --slate-blue: #304a66;

  --window-glass: #2e3f5a;

  --primary-gradient: linear-gradient(

    180deg,

    #d07c03 0%,

    #72503f 42.38%,

    #132542 100%

  );

  --secondary-gradient: linear-gradient(

    138deg,

    rgba(133, 180, 220, 0.9) 16.83%,

    rgba(77, 136, 186, 0.9) 53.78%,

    rgba(43, 69, 103, 0.9) 95.22%

  );

  --glass: rgba(128, 128, 128, 0.3);

}



/* Font Declarations */

@font-face {

  font-family: "Tobias";

  src: url(../fonts/Tobias-SemiBold.woff2) format("woff2");

  font-weight: 600;

  font-style: normal;

}



@font-face {

  font-family: "AvenirLTS";

  src: url(../fonts/AvenirLTStd-Book.woff) format("woff");

  font-weight: 400;

  font-style: normal;

}



@font-face {

  font-family: "AvenirLTS";

  src: url(../fonts/AvenirLTStd-Heavy.woff) format("woff");

  font-weight: 700;

  font-style: normal;

}



html,

body {

  margin: 0;

  padding: 0;

  color: white !important;

  min-height: 100vh;

  font-family: "AvenirLTS", sans-serif;

}



body {

  min-height: 100vh; /* Changed from height to min-height for better content handling */

  margin: 0; /* Ensure no default margins */

  padding: 0; /* Ensure no default padding */

  display: flex;

  flex-direction: column;

  justify-content: flex-start; /* Changed from flex-center (which isn't a valid value) */

  align-items: center;

  overflow-x: hidden;

  overflow-y: auto;

  position: relative;

}



main {

  z-index: 1;

  position: relative;

}



#animate-lottie {

  position: fixed;

  bottom: 0;

  left: 0;

  width: 100%;

  height: 100vh;

  z-index: -1;

  transform: rotate(180deg);

  overflow: hidden;

}



#animate-lottie svg {

  width: 100%;

  height: 100%;

  object-fit: cover;

  position: absolute;

  bottom: 0;

  left: 0;

}



/* Container for Lines */

.lines-overlay {

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  width: 100%;

  height: 100%;

  z-index: -1;

  pointer-events: none;

  overflow: hidden; /* Prevent any overflow */

}



/* Common Line Styles */

.lines-overlay .line {

  position: absolute;

  background-color: rgba(255, 255, 255, 0.4);

  opacity: 0.15;

}



/* Vertical Lines */

.lines-overlay .top-left,

.lines-overlay .top-right,

.lines-overlay .bottom-left,

.lines-overlay .bottom-right {

  width: 1px;

  height: 0; /* Start with 0 height */

  animation: growVertical 2s ease-out forwards;

}



/* Animation for vertical growth */

@keyframes growVertical {

  0% {

    height: 0;

  }

  100% {

    height: 141px;

  }

}



/* Top Vertical Lines */

.lines-overlay .top-left {

  top: 0;

  left: 20%;

  animation-delay: 0s;

}



.lines-overlay .top-right {

  top: 0;

  right: 20%;

  animation-delay: 0.3s;

}



/* Horizontal Lines */

.lines-overlay .top-horizontal,

.lines-overlay .bottom-horizontal,

.lines-overlay .middle-horizontal {

  height: 1px;

  width: 0; /* Start with 0 width */

  animation: growHorizontal 2s ease-out forwards;

}



/* Animation for horizontal growth */

@keyframes growHorizontal {

  0% {

    width: 0;

  }

  100% {

    width: 100%;

  }

}



.lines-overlay .top-horizontal {

  top: 130px;

  left: 0;

  animation-delay: 0.6s;

}



/* Bottom Vertical Lines */

.lines-overlay .bottom-left {

  bottom: 0;

  left: 20%;

  animation-delay: 0.9s;

}



.lines-overlay .bottom-right {

  bottom: 0;

  right: 20%;

  animation-delay: 1.2s;

}



.lines-overlay .bottom-horizontal {

  height: 1px;

  width: 0;

  bottom: 130px;

  left: 0;

  animation-delay: 1.5s;

}



/* middle horizontal line */

.lines-overlay .middle-horizontal {

  top: 50%;

  left: 0;

  animation-delay: 1s;

}



/* Middle Vertical Line */

.lines-overlay .middle {

  width: 1px;

  height: 0; /* Start with 0 height */

  top: 141px;

  left: 50%;

  transform: translateX(-50%);

  animation: growMiddle 2s ease-out forwards;

  animation-delay: 1.8s;

}



/* Animation for middle line growth */

@keyframes growMiddle {

  0% {

    height: 0;

  }

  100% {

    height: calc(100% - 141px - 141px);

  }

}



/* Responsive Adjustments */



@media (max-width: 768px) {

  main.container-fluid {

    padding: 12px;

  }

}



.card {

  position: relative;

  background-color: transparent;

  padding: 20px;

  text-align: center;

  overflow: hidden;

  z-index: 0;

  border: none;

}



.card .btn {

  display: flex;

  height: 40px;

  padding: 4px;

  justify-content: center;

  align-items: center;

  flex-shrink: 0;

  align-self: stretch;



  border-radius: 999px;

  border: 1px solid rgba(255, 255, 255, 0.4);



  background: rgba(128, 128, 128, 0.3);



  color: #fff;

  text-align: center;



  font-family: "AvenirLTS", sans-serif;

  font-size: 14px;

  font-style: normal;

  font-weight: 600;

  line-height: 48px; /* 342.857% */

  text-transform: capitalize;

}



.card .btn:hover {

  background-color: #4a5a7a; /* Hover effect */

}



.border-gradient {

  z-index: 2;

  background: conic-gradient(

    from 270deg,

    rgba(255, 255, 255, 0.4) 0%,

    rgba(255, 255, 255, 0.2) 30%,

    rgba(255, 255, 255, 0.1) 60%,

    rgba(255, 255, 255, 0) 100%

  ) !important;

}

.border-gradient::after {

  content: "";

  display: block;

  position: absolute;

  height: 97%;

  width: 100%;

  top: 3%;

  left: 0;

  background: #304b69;

  /* inset: 1.5px; */

  border-radius: 45px;

  z-index: -1;

  transition: opacity 0.3s ease;

}



/* text styles */

.text-orange {

  color: var(--orange);

}



.bg-orange {

  background-color: var(--orange) !important;

}



.bg-gray {

  background-color: var(--gray) !important;

}



.bg-slate-blue {

  background-color: var(--slate-blue) !important;

}



.bg-dark-blue {

  background-color: var(--dark-blue) !important;

}



.bg-secondary-gradient {

  background: var(--secondary-gradient) !important;

}



.bg-primary-gradient {

  background: var(--primary-gradient) !important;

}



.font-avenir {

  font-family: "AvenirLTS", sans-serif;

}



.font-tobias {

  font-family: "Tobias", sans-serif;

}



.font-12 {

  font-size: 12px;

}



.font-14 {

  font-size: 14px;

}



.font-16 {

  font-size: 16px;

}



.font-20 {

  font-size: 20px;

}



.font-24 {

  font-size: 24px;

}



.font-32 {

  font-size: 32px;

}



.font-weight-300 {

  font-weight: 300;

}



.font-weight-350 {

  font-weight: 350;

}



.font-weight-400 {

  font-weight: 400;

}



.font-weight-500 {

  font-weight: 500;

}



.font-weight-700 {

  font-weight: 700;

}



.line-height-16 {

  line-height: 16px;

}



.line-height-18 {

  line-height: 18px;

}



.line-height-24 {

  line-height: 24px;

}



.line-height-29 {

  line-height: 29px;

}



.line-height-32 {

  line-height: 32px;

}



.line-height-48 {

  line-height: 48px;

}

/* /.end text styles */



.btn-rounded {

  display: inline-flex;

  align-items: center;

  gap: 1rem;

  padding: 1rem;

  white-space: nowrap;

  color: #fff;

  border-radius: 999px;

  border: 0.7px solid rgba(255, 255, 255, 0.4);

  background: rgba(128, 128, 128, 0.3);

  background-blend-mode: luminosity;

  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);

  backdrop-filter: blur(50px);

}



.btn-custom {

  background-color: #17314d;

  color: #fff;

  width: 70px;

  height: 70px;

  border-color: #586d84;

}



.btn-glass {

  background: var(--glass);

}



.rounded-div {

  width: 90px;

  height: 90px;

  display: flex;

  justify-content: center;

  align-items: center;

  background-color: #7b9dac;

}



/* custom spacing */



/* 32px */

.pt-32 {

  padding-top: 2rem;

}

.pb-32 {

  padding-bottom: 2rem;

}

.pl-32 {

  padding-left: 2rem;

}

.pr-32 {

  padding-right: 2rem;

}

.p-32 {

  padding: 2rem;

}

.mt-32 {

  padding-top: 2rem;

}

.mb-32 {

  padding-bottom: 2rem;

}

.ml-32 {

  padding-left: 2rem;

}

.mr-32 {

  padding-right: 2rem;

}

.m-32 {

  padding: 2rem;

}



.border-radius-16 {

  border-radius: 16px;

}



/* border stylying top left and bottom right*/

.notch-tl-br {

  clip-path: polygon(

    0 32px,

    32px 0,

    100% 0,

    100% calc(100% - 32px),

    calc(100% - 32px) 100%,

    0 100%

  ) !important;

}



/* border stylying bottom right*/

.notch-br {

  clip-path: polygon(

    0% 0%,

    100% 0%,

    100% calc(100% - 20px),

    calc(100% - 20px) 100%,

    0% 100%

  ) !important;

}



.notch-br-lg {

  clip-path: polygon(

    0% 0%,

    100% 0%,

    100% calc(100% - 36px),

    calc(100% - 36px) 100%,

    0% 100%

  ) !important;

}



.notch-tl-lg {

  clip-path: polygon(36px 0%, 100% 0%, 100% 100%, 0% 100%, 0% 36px) !important;

}



.card.card-active .card-text {

  color: var(--orange);

}

.card,

.card-body,

.card > .btn,

.card > div {

  z-index: 1;

  position: relative;

  overflow: hidden;

}

/* border animation */

.border-animation::before {

  content: "";

  position: absolute;

  z-index: -2;

  left: -50%;

  top: -50%;

  width: 200%;

  height: 200%;

  background: linear-gradient(to bottom right, var(--orange) 30%, #355570 70%);

  opacity: 0; /* Hidden by default */

  transition: opacity 0.3s ease; /* Smooth fade-in */

}



/* Apply the border animation when card is active */

.card.notch-tl-br.card-active.border-animation::before {

  opacity: 1;

  animation: rotate 4s linear infinite;

  will-change: transform;

}



.border-animation::after {

  content: "";

  position: absolute;

  z-index: -1;

  left: 2.5px;

  top: 2.5px;

  width: calc(100% - 4px);

  height: calc(100% - 4px);

  background: #2a3a5a;

  border-radius: 16px;

  clip-path: polygon(

    0 32px,

    32px 0,

    100% 0,

    100% calc(100% - 32px),

    calc(100% - 32px) 100%,

    0 100%

  );

}



.card.border-card-gradient {

  background: linear-gradient(

    160deg,

    rgba(255, 255, 255, 0.4) 0%,

    rgba(255, 255, 255, 0.2) 30%,

    rgba(255, 255, 255, 0.1) 60%,

    rgba(255, 255, 255, 0) 100%

  ) !important;

}



.border-card-gradient::after {

  content: "";

  position: absolute;

  z-index: -1;

  left: 1.5px;

  top: 1.5px;

  width: calc(100% - 2px);

  height: calc(100% - 2px);

  background: #2a3a5a;

  border-radius: 16px;

  clip-path: polygon(

    0 32px,

    32px 0,

    100% 0,

    100% calc(100% - 32px),

    calc(100% - 32px) 100%,

    0 100%

  );

}

/* /.end border animation */



@keyframes rotate {

  100% {

    transform: rotate(1turn);

  }

}



.bg-linear-gradient-1 {

  background: linear-gradient(to right, #1d415c, #365b71);

}



.loader-wrapper {

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background: rgba(21, 38, 64, 0.5);

  backdrop-filter: blur(20px);

  display: flex;

  align-items: center;

  justify-content: center;

  z-index: 1050;

  opacity: 1;

  transition: opacity 0.5s ease-in-out;

}



/* Fade-out effect */

.loader-wrapper.fade-out {

  animation: fadeOut 0.5s ease-out forwards;

}



/* Spinner animation */

.spinner img {

  width: 80px;

  height: 80px;

  animation: spin 1s linear infinite;

}



@keyframes spin {

  from {

    transform: rotate(0deg);

  }

  to {

    transform: rotate(360deg);

  }

}



@keyframes fadeOut {

  0% {

    opacity: 1;

    visibility: visible;

  }

  100% {

    opacity: 0;

    visibility: hidden;

  }

}



/* ring button */

.ring-div {

  position: relative;

  width: 100%;

  height: 100px; /* Setting a specific height */

  display: flex;

  justify-content: flex-start; /* Correct value for start alignment */

  align-items: center;

}



.ring-div .btn {

  position: absolute;

  z-index: 1;

  padding: 0;

  top: 50%;

  left: 45px;

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

  width: 69px;

  height: 69px;

}



.ring-div #ring {

  position: relative;

  height: 91px;

  width: 91px;

  margin-left: 0;

  z-index: 0;

}



/* Button Styles animation */

.button-animation {

  z-index: 2;

  background: conic-gradient(

    from var(--r),

    #d07c03 0%,

    #72503f 10%,

    #132542 20%

  );

  animation: rotating 3s linear infinite;

}

.button-animation::after {

  content: "";

  display: block;

  position: absolute;

  height: 97%;

  width: 99%;

  top: 0.5px;

  left: 0.5px;

  background: #416683;

  /* inset: 1.5px; */

  border-radius: 45px;

  z-index: -1;

  transition: opacity 0.3s ease;

}



@property --r {

  syntax: "<angle>";

  inherits: false;

  initial-value: 0deg;

}

@keyframes rotating {

  0% {

    --r: 0deg;

  }

  100% {

    --r: 360deg;

  }

}



.modal .modal-content {

  background: linear-gradient(

    160deg,

    rgba(255, 255, 255, 0.4) 0%,

    rgba(255, 255, 255, 0.2) 30%,

    rgba(255, 255, 255, 0.1) 60%,

    rgba(255, 255, 255, 0) 100%

  ) !important;

  padding: 48px;

  border-radius: 16px;

}