@font-face {
  font-family: "SansPro";
  font-display: swap;
  src: url('https://d122f4822rob2u.cloudfront.net/fonts/SourceSansPro-Regular.ttf');;
}

@font-face {
  font-family: "Roboto-Medium";
  font-display: swap;
  font-weight: 500;
  src: url('https://d122f4822rob2u.cloudfront.net/fonts/Roboto-Medium.ttf');;
}



@font-face {
  font-family: "righteous";
  font-display: swap;
  src: url('https://d122f4822rob2u.cloudfront.net/fonts/Righteous-Regular.ttf');;
}

html{
  scroll-padding-top: 90px;
  font-family: 'SansPro';
  font-size: 1.0em;
}


.boldBody{
  font-size: 1.1em;
}

.lightBody{
  font-size: 1.1em;
}

.rising-dots-container {
  position: relative;
  overflow: hidden;
  /*  ↑ transparent → opaque in the first 60 px from the top   */
  mask-image:        linear-gradient(to bottom, transparent 0, #000 60px);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 60px);
}

.rising-dots-container img {
  position: relative; /* Ensure image is positioned for layering */
  z-index: 2; /* Bring image above the dots */
}

.rising-icon {
  position: absolute;
  bottom: 0;
  font-size: 1rem;        /* tweak size to taste */
  color: rgb(145, 145, 145);
  animation: rise 4s linear forwards;
  pointer-events: none;   /* optional: icons don’t intercept clicks */
  z-index: 1;             /* stay behind main content */
}

/* existing keyframes */
@keyframes rise {
  0%   { transform: translateY(0);       opacity: 1; }
  80%  {                                 opacity: 1; }
  100% { transform: translateY(-400px);  opacity: 0; }
}


#topBtn {
  display: none; /* Hidden by default */
  position: fixed; /* Fixed/sticky position */
  bottom: 20px; /* Place the button at the bottom of the page */
  right: 20px; /* Place the button 30px from the right */
  z-index: 99; /* Make sure it does not overlap */
  border: none; /* Remove borders */
  outline: none; /* Remove outline */
  background-color: #AA00FF; /* Set a background color */
  color: white; /* Text color */
  cursor: pointer; /* Add a mouse pointer on hover */
  padding: 10px; /* Some padding */
  border-radius: 10px; /* Rounded corners */
  font-size: 13px; /* Increase font size */
}

.darkhover {
  -webkit-filter: brightness(100%);
  cursor: pointer;
}

.darkhover:hover {
  -webkit-filter: brightness(80%);
  filter: brightness(80%);
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  -ms-transition: all 1s ease;
  transition: all 1s ease;
}

.darkhover-selected {
  -webkit-filter: brightness(80%);
}


@media only screen and (max-width: 500px) {
  .save_menu{
    max-width: calc(100vw - 40px); 
    overflow-x: auto;
  }
}
@media only screen and (min-width: 500px) {
  .save_menu{
    max-width: 400px; 
    overflow-x: auto;
  }
}


#topBtn:hover {
  background-color: #555; /* Add a dark-grey background on hover */
}


.underground{
  background-color: #191308;
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)),
  url('images/index_background2.svg');
  background-attachment: fixed;
  background-size: cover;
  height: 100%;
  font-family: 'SansPro';
  font-size: 1.1em;

  }

  .dubai{
    
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0)),
    url('images/dubai.gif');
    width: 100%;
    min-height: 800px;
    background-position: center;
    background-size: cover;
  }

  .stars{
    background-color: #191308;
    background-image: url('images/stars.svg');
    background-attachment: fixed;
    background-size: cover;
    height: 100%;
    }

    .register_holder {
      display: flex;
      align-items: center;
      justify-content: center;
    }


  .grass_bg{
    background-color: #191308;
    background-image: url('images/grass_bg.png');
    background-attachment: fixed;
    background-size: cover;
    }

.active_1{
  background-color: lightgoldenrodyellow;
}

.btn-outline-light:hover{
  color: black !important;
}

.btn-outline-light:focus{
  color: black !important;
}



  .tooltip-inner {
    color: black;
    background-color: rgb(255,255,255, 0);
    opacity: 0.5;
  }

  .tooltip.bs-tooltip-top .tooltip-arrow::before {
    border-top-color: rgb(255,255,255, 0);
  }

  .tooltip.bs-tooltip-bottom .tooltip-arrow::before {
    border-bottom-color: rgb(255,255,255, 0);
  }

  .tooltip.bs-tooltip-start .tooltip-arrow::before {
    border-left-color: rgb(255,255,255, 0);
  }

  .tooltip.bs-tooltip-end .tooltip-arrow::before {
    border-right-color: rgb(255,255,255, 0);
  }


.search-table-outer {
  overflow-x: auto;
  /* border:1px solid grey; */
  padding-top: 10px;
  padding-bottom: 10px;
}

.search-table th{ min-width: 100px; padding:3px }
.search-table td{ min-width: 100px; padding:3px }


  .btn-primary.darkmenu.selected{
    border: 2px solid black;
    background-color: 	#E8C7DE;
    color: black
  }



  .btn-primary.darkmenu:hover {
    color:black;
    background-color: white;
    border-color: black; /*# set the color you want here*/
  }

  .btn-primary.darkmenu{
    background-color: #292b2c;
    border: 1px solid grey;
  }

.ctr{
  margin-top: 150px; 
  margin-bottom: 150px;
}

.ctr2{
  margin-top: 80px; 
  margin-bottom: 80px;
}

.ctr3{
  margin-top: 120px; 
  margin-bottom: 120px;
}

.ctr4{
  margin-top: 40px; 
  margin-bottom: 40px;
}

.ctr5{
  margin-top: 220px; 
  margin-bottom: 40px;
}

.fixed_alert{
  position: fixed;
  top: 0px;
  left: 50%;
  transform: translate(-50%, 0%);
  width: 92%;
  animation: slidedown 0.2s 0.2s ease-out forwards;
}
@keyframes slidedown {
  to {
    top: 47px;
  }
}


.break {
  width: 100%;
}

  .w100 {
    font-weight: 100;
    font-size: 1.0em;
  }

  @media only screen and (min-width: 800px) {  
    .w400 {
      font-weight: 400;
      font-size: 1.6em;
    }  
  }

  @media only screen and (max-width: 800px) {  
    .w400 {
      font-weight: 400;
      font-size: 1.2em;
    }  
  }
  

  @media only screen and (min-width: 800px) {  
    .w300 {
      font-weight: 400;
      font-size: 1.4em;
    }  
  }

  @media only screen and (max-width: 800px) {  
    .w300 {
      font-weight: 400;
      font-size: 1.2em;
    }  
  }

  @media only screen and (min-width: 800px) {     
    .w600 {
      font-weight: 400;
      font-size: 3em;
    }
  }

  @media only screen and (max-width: 800px) {  
    .w600 {
      font-weight: 400;
      font-size: 1.6em;
    }  
  }

  @media only screen and (min-width: 800px) {     
    .w700 {
      font-weight: 600;
      font-size: 3em;
    }
  }

  @media only screen and (max-width: 800px) {     
    .w700 {
      font-weight: 600;
      font-size: 2em;
    }
  }  


  @media only screen and (min-width: 800px) {     
    .w800 {
      font-weight: 800;
      font-size: 3.5em;
    }
  }

  @media only screen and (max-width: 800px) {     
    .w800 {
      font-weight: 800;
      font-size: 2.5em;
    }
  }  

  .w900 {
    font-weight: 900;
  }  

  @media only screen and (max-width: 800px) {  
    .accordtext {
      font-weight: 400;
      font-size: 1.1em;
    }  
  }


.white{
color:white;
}

.lightblue {
  color:#3CFEFE;
}

.purple {
  color: #AA00FF
}

.lightgrey{
  background-color: #E5E4E4;
  border: 2px solid grey;
}

.btn-secondary.selected{
  color: black;
  border: 1px solid black !important;

}


.selected{
  background-color: #E5E4E4;
  border: 3px solid black;
}

.selected:hover{
  border: 3px solid black !important;
}


.selected1{
  background-color: #E5E4E4;
  border: 3px solid black;
}



.selected0{
  background-color: #f1f0ef;
  border: 1px solid black;
}

.databaseSelected{
  display: none;
}

.selected2{
  background-color: white;
  border: 1px solid black;
}

.selected3{
  background-color: white;
  border: 2px solid black;
}

.selected3:hover{
  background-color: white;
  border: 2px solid black !important;
}

.selected4{
  background: rgba(255, 255, 255, 0.2) !important;
}

.selected5{
  background: white !important;
  /* make button look selected */
  border: 1px solid black !important;
  color: black !important;
  /* shadow */
  box-shadow: 0 0 10px rgba(0,0,0,0.5);
}

.selected6{
  background-color: white;
  border-color: black;
  color: #000;
}


.font-primary {
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
  color: transparent; /* Make the text color transparent */
  background-clip: text; /* Clip the background to the text */
  -webkit-background-clip: text; /* For Safari */
  --tw-gradient-from: #9CACFF;
  --tw-gradient-to: rgb(214 173 255 / 0);
  --tw-gradient-stops: var(--tw-gradient-from), #D6ADFF, var(--tw-gradient-to);
  --tw-gradient-to: #D7B8FF;
}

.font-primary-darker {
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
  color: transparent; /* Make the text color transparent */
  background-clip: text; /* Clip the background to the text */
  -webkit-background-clip: text; /* For Safari */
  --tw-gradient-from: #3556ff;
  --tw-gradient-to: rgb(214 173 255 / 0);
  --tw-gradient-stops: var(--tw-gradient-from), #a042ff, var(--tw-gradient-to);
  --tw-gradient-to: #994aff;
}


.font-primary-dark{
  color: #793EC7 !important;
}


.btn-primary {
background-color: #5271ff; /* Darker blue for contrast */
color: #ffffff; /* White text for high contrast */
}
.btn-primary:hover {
  color: white;
  background-color: #3b58cc; /* Slightly darker blue on hover */

}
.btn-primary:focus {
color: white;
background-color: #3b58cc; /* Slightly darker blue on hover */
}


.btn-primary.selected {
  color:black !important;
  background-color: #d6d7f2; /* 50% transparent purple */
  border: 1px solid black;
}

.btn-primary.disabled{
  background-color: rgb(88, 88, 88) !important;
  border: 1px solid black !important;
}

.btn-primary:disabled{
  background-color: rgb(88, 88, 88) !important;
  border: 1px solid black !important;
}

.btn-outline-dark:hover{
  color:black !important;
  background-color: #d6d7f2; /* 50% transparent purple */
  border: 1px solid black;
}



.beam_control
{
  width: 300px;
  height: 400px;
  position: fixed;
  top: 70%;
  left: 50%;
  transform: translate(-50%, -100%);
  border: solid black 2px;
}

.beam_control_sub
{
  position: absolute;
  top: 20%;
  left: 0; 
  right: 0; 
  margin-left: auto; 
  margin-right: auto; 
  text-align: center;
}

.closebeam
{
  position: absolute;
  top: 0%;
  left: 75%;
}

.lightgrey:hover {
  color: black;
  background-color: white;
  border: 2px solid black;

}


.btn_dark_database {
  color: white;
  border-color: white;
  background-size: 200% 100%;
  background-position: right bottom;
  transition: all .2s ease-out;
}

.btn_dark_database:hover {
  color: white;
  border-color: white;
  background: rgba(255, 255, 255, 0.2) !important;
}



.btn-dark-1 {
  display: block;
  color: white;
  border-color: white;
  background: linear-gradient(to right, white 50%, #28242c 50%);
  background-size: 200% 100%;
  background-position: right bottom;
  transition: all .2s ease-out;
}

.btn-dark-1:hover {
  display: block;
  color: black;
  border-color: white;
  background-position: left bottom;

}

.no-border {
  border: 0;
  box-shadow: none; /* You may want to include this as bootstrap applies these styles too */
}


.btn-primary2
{
  background-color: #0275d8;
  color: white;
}



.form-control{
  border-color: black;
}

.form-select {
  text-align: center;
}

@media only screen and (min-width: 1200px) {
  .pt-10 {
    padding-top: 120px;
  }
}
@media only screen and (max-width: 1200px) {
  .pt-10 {
    padding-top: 30px;
  }
}

.animated1 {
	height:200px;
  margin: 0;
	padding: 0;
	overflow: hidden;
}
.animated2 {
	margin: 0 !important;
	padding: 0 !important;
  width:100%;
}
.wrapper {
	height: 300px;
	width: 100%;
	background: #110425;
	overflow: hidden !important;
}

.active_dark {
  color: #D8D8D8	 !important;
}

.active_dark:hover {
  color: white !important;
}

.rails {
	position: relative;
  overflow:hidden;
	bottom: -70px;
	height: 315px;
	width: 1920px;
	background: url('images/rails.png');
	background-repeat: repeat-x;
	background-position: top center;
	background-size: contain;
	animation: translateX 5s infinite linear both;
}
.train {
	position: relative;
	bottom: 250px;
	height: 315px;
	width: 1500px;
  left: 35%;
  transform: translateX(-50%);
	background: url('images/train.png');
	background-repeat: no-repeat;
	background-position: top center;
	background-size: contain;
}

.lights {
	position: relative;
	bottom: 630px;
	height: 315px;
	width: 1920px;
	background: url('images/lights.png');
	background-repeat: repeat-x;
	background-position: top center;
	background-size: contain;
	animation: translateX 4s infinite linear both;
}


.results {
  max-width: 2000px;
}

@keyframes translateX {
	0% {background-position: 0px 0px;}
	100% {background-position:  1920px 0px;}
}

footer {
  position: fixed;
  bottom: 0;
  width: 100%;
}

.navbar1 {
  background:transparent;
}

.viewportheight {
  min-height:87vh;
}

.viewportheight2 {
  min-height:93vh;
}

.predictorcolour {
 background-color: #F6F0F9;
}

.open{
  position: relative;
  animation-fill-mode: forwards;
  animation-name: move;
  animation-duration: 0.5s;
}

.curveborder {
  border-radius: 10px;
}

.flex-fixed-width-item {
  flex: 0 0 360px;
}

@keyframes move {
  from {
      left: 110%;
  }
  to {
      left: 0%;
  }
}

.fade-in-slow{
  -webkit-animation: 0.2s ease 0s normal forwards 1 fadein;
  animation: 0.2s ease 0s normal forwards 1 fadein;
  opacity:1
}

.fade-in-slow2{
  -webkit-animation: 0.2s ease 0s normal forwards 1 fadein;
  animation: 0.2s ease 0s normal forwards 1 fadein;
  opacity:1
}

.fade-in-slow3{
  -webkit-animation: 1s ease 0s normal forwards 1 fadein;
  animation: 1s ease 0s normal forwards 1 fadein;
  opacity:1
}

.fade-in-slow4{
  -webkit-animation: 1s ease 0s normal forwards 1 fadein;
  animation: 1s ease 0s normal forwards 1 fadein;
  opacity:1
}

@keyframes fadein{
  0% { opacity:0; }
  75% { opacity:0; }
  100% { opacity:1; }
}

@-webkit-keyframes fadein{
  0% { opacity:0; }
  75% { opacity:0; }
  100% { opacity:1; }
}

.fade-in-fast{
  -webkit-animation: 0.1s ease 0s normal forwards 1 fadein;
  animation: 0.1s ease 0s normal forwards 1 fadein;
  opacity:1
}

@keyframes fadein{
  0% { opacity:0; }
  33% { opacity:0; }
  100% { opacity:1; }
}

@-webkit-keyframes fadein{
  0% { opacity:0; }
  33% { opacity:0; }
  100% { opacity:1; }
}

.good:hover {
  background-color: #4CAF50; /* Green */
  color: black;
}

.average:hover {
  background-color: yellow; /* Yellow */
  color: black;
}

.poor:hover {
  background-color: red; /* Red */
  color: black;
}

@media only screen and (min-width: 1200px) {
.chart_height
{
  height: 75vh
}
}

@media only screen and (max-width: 1200px) {
  .chart_height
  {
    height: 35vh
  }
  }

     

  @media only screen and (min-width: 1200px) {
    .form_height
    {
      height: 75vh
    }
    }  


.detailed_button
{
  background-color: #df9eff;
  border-color: black; 
  color:black;

}

.detailed_button:hover {
  color:black;
  background-color: #f3dbff;
  border-color: black; /*# set the color you want here*/
}

.form_summary {
  width: 30px; 
}

#menuarrow {
  position: fixed;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  background: #AA00FF;
  width: 35px;
  height: 50px;
  z-index:15;
  display: flex;
  align-items: center;

}

.menu_text {
  display: flex;
  text-align: center;
  margin:auto;
}

#load{
	position: fixed;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	z-index: 9999;
	background: black;
}

.rotate {
  transition: 0.70s;
  -webkit-transition: 0.70s;
  -moz-transition: 0.70s;
  -ms-transition: 0.70s;
  -o-transition: 0.70s;
}

.rotate-rotated {
  transition: 0.70s;
  -webkit-transition: 0.70s;
  -moz-transition: 0.70s;
  -ms-transition: 0.70s;
  -o-transition: 0.70s;
  -webkit-transform: rotate(360deg);
  -moz-transform: rotate(360deg);
  -o-transform: rotate(360deg);
  -ms-transform: rotate(360deg);
  transform: rotate(360deg);
}
/*
.flash {
  animation-name: glowing;
  animation-duration: 0.2s; 
  animation-iteration-count: 1;
  animation-play-state: running; 
  animation-timing-function: ease-out; 
  animation-delay: 2.5s;
}



.flash1 {
  animation-name: glowing;
  animation-duration: 0.2s; 
  animation-iteration-count: 1;
  animation-play-state: running; 
  animation-timing-function: ease-out; 
  animation-delay: 2.6s;
}

.flash2 {
  animation-name: glowing;
  animation-duration: 0.2s; 
  animation-iteration-count: 1;
  animation-play-state: running; 
  animation-timing-function: ease-out; 
  animation-delay: 2.7s;
}

.flash3 {
  animation-name: glowing;
  animation-duration: 0.2s; 
  animation-iteration-count: 1;
  animation-play-state: running; 
  animation-timing-function: ease-out; 
  animation-delay: 2.8s;
}

.flash4 {
  animation-name: glowing;
  animation-duration: 0.2s; 
  animation-iteration-count: 1;
  animation-play-state: running; 
  animation-timing-function: ease-out; 
  animation-delay: 2.9s;
}

.flash5 {
  animation-name: glowing;
  animation-duration: 0.2s; 
  animation-iteration-count: 1;
  animation-play-state: running; 
  animation-timing-function: ease-out; 
  animation-delay: 0.1s;
}

.flash6 {
  animation-name: glowing;
  animation-duration: 0.2s; 
  animation-iteration-count: 1;
  animation-play-state: running; 
  animation-timing-function: ease-out; 
  animation-delay: 0.2s;
}

.flash7 {
  animation-name: glowing;
  animation-duration: 0.2s; 
  animation-iteration-count: 1;
  animation-play-state: running; 
  animation-timing-function: ease-out; 
  animation-delay: 0.3s;
}

.flash8 {
  animation-name: glowing;
  animation-duration: 0.2s; 
  animation-iteration-count: 1;
  animation-play-state: running; 
  animation-timing-function: ease-out; 
  animation-delay: 0.4s;
}
*/

@keyframes glowing {

  0% { color: white; background-color: #28242c; border-color: white; }
  20% { color: #808080; background-color: #949296; border-color: #808080; }  
  30% { color: black; background-color: white; border-color: black; }
  60% { color: black; background-color: white; border-color: black; }
  80% { color: #808080; background-color: #949296; border-color: #808080; }
  100% { color: white; background-color: #28242c; border-color: white; }
}

.circle {
  width: 100px;
  height: 100px;
  background: green;
  border-radius: 50%
}

.dropdown-menu {
  max-height: 500px;
  overflow-y: auto;
}

.bg-transparent {
  background-color: rgba(255, 255, 255, 0.1) !important;
}

.google-button {
  display:block;
  margin:auto;
  border-width: 0;
  background: white;
  color: #737373;
  border-radius: 5px;
  white-space: nowrap;
  box-shadow: 1px 1px 0px 1px rgba(0,0,0,0.05);
  transition-property: background-color, box-shadow;
  transition-duration: 150ms;
  transition-timing-function: ease-in-out;
  padding: 0;}
  
.google-button:hover {
    box-shadow: 1px 4px 5px 1px rgba(0,0,0,0.1);
  }
  
    
.google-button__icon {
  display: inline-block;
  vertical-align: middle;
  margin: 8px 0 8px 8px;
  width: 18px;
  height: 18px;
  box-sizing: border-box;
}

.google-button__icon--plus {
  width: 27px;
}

.google-button__text {
  display: inline-block;
  vertical-align: middle;
  padding: 0 12px;
  font-size: 14px;
  font-weight: bold;
  font-family: 'Roboto',arial,sans-serif;
}

.g-sign-in-button {
  margin: 10px;
  display: inline-block;
  width: 240px;
  height: 50px;
  background-color: #4285f4;
  color: #fff;
  border-radius: 1px;
  box-shadow: 0 2px 4px 0 rgba(0,0,0,.25);
  transition: background-color .218s, border-color .218s, box-shadow .218s;
}
.g-sign-in-button:hover {
  cursor: pointer;
  -webkit-box-shadow: 0 0 3px 3px rgba(66,133,244,.3);
  box-shadow: 0 0 3px 3px rgba(66,133,244,.3);
}
.g-sign-in-button:active {
  background-color: #3367D6;
  transition: background-color 0.2s;
}
.g-sign-in-button .content-wrapper {
  height: 100%;
  width: 100%;
  border: 1px solid transparent;
}
.g-sign-in-button img {
    width: 18px;
    height: 18px;
}
.g-sign-in-button .logo-wrapper {
   padding: 15px;
   background:#fff;
   width: 48px;
   height: 100%;
   border-radius: 1px; 
   display: inline-block;
}
.g-sign-in-button .text-container {
    font-family: Roboto,arial,sans-serif;
    font-weight: 500;
    letter-spacing: .21px;
    font-size: 16px;
    line-height: 48px;
    vertical-align: top;
    border: none;
    display: inline-block;
    text-align: center;
    width: 180px;
}


.google-button__text2 {
  display: inline-block;
  vertical-align: middle;
  padding: 0 4px;
  font-size: 14px;
  font-family: 'Roboto',arial,sans-serif;
  color: white;
}

.google-button__icon2 {
  display: inline-block;
  vertical-align: middle;
  margin: 8px 0 8px 8px;
  width: 18px;
  height: 18px;
  box-sizing: border-box;
}

.google-button2 {
  height: 38px;
  border-width: 0;
  background: white;
  color: #737373;
  border-radius: 5px;
  white-space: nowrap;
  box-shadow: 1px 1px 0px 1px rgba(0,0,0,0.05);
  transition-property: background-color, box-shadow;
  transition-duration: 150ms;
  transition-timing-function: ease-in-out;
  padding: 0;}
  
.google-button2:hover {
    box-shadow: 1px 4px 5px 1px rgba(0,0,0,0.1);
    background-color: #5d95f0 !important;
  }

  .fade_in_fast{
    -webkit-animation: 0.5s ease 0s normal forwards 1 fadein;
    animation: 0.5s ease 0s normal forwards 1 fadein;
    opacity:1
  }

  .fade_in_slow{
    -webkit-animation: 2s ease 0s normal forwards 1 fadein;
    animation: 2s ease 0s normal forwards 1 fadein;
    opacity:1
  }

  .helper{
    display: inline-block;
    height: 100%;
    vertical-align: middle;
  }



  @keyframes glowing2 {
    0% { box-shadow: 0 0 -5px #e3d6f3; }
    40% { box-shadow: 0 0 10px #e3d6f3; }
    60% { box-shadow: 0 0 10px #e3d6f3; }
    100% { box-shadow: 0 0 -5px #e3d6f3; }
  }
  
  .button-glow {
    animation: glowing2 3000ms infinite;
  }

@media only screen and (min-width: 700px) {
  .earth_holder
  {
    overflow: hidden;
    /* Magic */
    display: flex;
    align-items: center; /* vertical */
    justify-content: center; /* horizontal */
    height: 600px
  }

  .earth{
    height: 730px
  }

}

@media only screen and (max-width: 700px) {
  .earth_holder
  {
    overflow: hidden;
    /* Magic */
    display: flex;
    align-items: center; /* vertical */
    justify-content: center; /* horizontal */
    height: 300px
  }
  
  .earth{
    height: 400px
  }

}

.button_data{
  min-width: 150px;
}

.primary_selected_discipline{
  background-color: #E8C7DE !important;
  color: black !important;
}

.primary_selected_type{
  background-color: #E8C7DE !important;
  color: black !important;
}

.primary_selected_type2{
  background-color: #E8C7DE !important;
  color: black !important;
}

.report_image{
  max-width: 200px;
  max-height: 300px;
}

.report_image:hover{
  max-width: 210px;
}

.report_data{
  min-height: 390px;
}

.greyed{
  color:gray !important;
}

.text-grey{
  color: #d3d3d3;
}

.text-danger{
  display: none;
  margin-left: auto;
  margin-right: auto;

}

.btn-success{
  background-color: #559E55;
  color: white;
}

@media only screen and (max-width: 500px) {
  iframe[src*=youtube] {
    width: 330px;
    height: 200px;
  }
}

.big-image {
  height: 310px;
  width: 100%;
  position: relative;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url('https://civilsaistatic.s3.ap-southeast-1.amazonaws.com/excavation_photo.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.big-image_bearing {
  height: 300px;
  width: 100%;
  position: relative;
  background: none;
}

.big-image_piling {
  height: 300px;
  width: 100%;
  position: relative;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url('https://civilsaistatic.s3.ap-southeast-1.amazonaws.com/piling.png');
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.big-image_retaining {
  height: 300px;
  width: 100%;
  position: relative;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url('https://civilsaistatic.s3.ap-southeast-1.amazonaws.com/retaining_wall.png');
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.big-image_database {
  height: 450px;
  width: 100%;
  position: relative;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url('https://civilsaistatic.s3.ap-southeast-1.amazonaws.com/database_bg.png');
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.big-image_slope {
  height: 300px;
  width: 100%;
  position: relative;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url('https://civilsaistatic.s3.ap-southeast-1.amazonaws.com/slope.png');
  background-repeat: no-repeat;
  background-attachment: fixed;
}


.big-image_steel {
  height: 300px;
  width: 100%;
  position: relative;
  background-size: cover;
  background-position: 50% 100%;
  background-image: url('https://civilsaistatic.s3.ap-southeast-1.amazonaws.com/steel_frame_bg.jpeg');
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.big-image_frame {
  height: 250px;
  width: 100%;
  position: relative;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url('https://civilsaistatic.s3.ap-southeast-1.amazonaws.com/frame_background.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.big-image_beam {
  height: 250px;
  width: 100%;
  position: relative;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url('https://civilsaistatic.s3.ap-southeast-1.amazonaws.com/beam_bg.png');
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.overlay {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.75);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.overlay2 {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.8);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}




.overlay p {
  margin: 0;
}

.selected_border{
  border-width: 1;
  border-color: black !important;
}

.initial_hidden{
  display: none;
}

.table_hidden{
  display: none;
}

.show_important{
  display: block !important;
}

.pastel_green{
  background-color: #C1E1C1;
}

.dark_gradient{
  background: linear-gradient(#212529, 70%, #141414) !important;
}

.dark_gradient_inverse{
  background: linear-gradient(#141414, 70%, black) !important;
}

.frame_img {
  position: relative;
  display: inline-block;
}

.frame_overlay {
  position: absolute;
  top: 30px;

  right: 30px;
  z-index: 5;
}

.frame_overlay2 {
  position: absolute;
  top: 40px;
  right: 25px;
  z-index: 5;
}



.frame_overlay3 {
  position: absolute;
  top: 40px;
  left: 60px;
}

.frame_overlay4 {
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 3;
}


.slick-slide {
  margin: 0px 20px;
}


.slick-slider {
 position: relative;
 display: block;
 box-sizing: border-box;
 -webkit-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 user-select: none;
 -webkit-touch-callout: none;
 -khtml-user-select: none;
 -ms-touch-action: pan-y;
 touch-action: pan-y;
 -webkit-tap-highlight-color: transparent;
}

.slick-list {
 position: relative;
 display: block;
 overflow: hidden;
 margin: 0;
 padding: 0;
}

.slick-list:focus {
 outline: none;
}

.slick-list.dragging {
 cursor: pointer;
 cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list {
   -webkit-transform: translate3d(0, 0, 0);
      -moz-transform: translate3d(0, 0, 0);
       -ms-transform: translate3d(0, 0, 0);
        -o-transform: translate3d(0, 0, 0);
           transform: translate3d(0, 0, 0);
}

.slick-track {
 position: relative;
 top: 0;
 left: 0;
 display: block;
}
.slick-track:before,
.slick-track:after {
 display: table;
 content: '';
}
.slick-track:after {
 clear: both;
}
.slick-loading .slick-track {
 visibility: hidden;
}

.slick-slide {
 display: none;
 float: left;
 height: 100%;
 min-height: 1px;
}
[dir='rtl'] .slick-slide {
 float: right;
}
.slick-slide img {
 display: block;
  margin: auto;
  max-width:200px;
  max-height:70px;
  width: auto;
  height: auto;
}
.slick-slide.slick-loading img {
 display: none;
}
.slick-slide.dragging img {
 pointer-events: none;
}
.slick-initialized .slick-slide {
 display: block;
}
.slick-loading .slick-slide {
 visibility: hidden;
}
.slick-vertical .slick-slide {
 display: block;
 height: auto;
 border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
   display: none;
}

a[type='button'] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.canvas_section
{
    display: block;
    margin: 0 auto;
}

.tableFixHead          { overflow: auto; height: 90vh; }
.tableFixHead thead td { position: sticky; top: -2px; z-index: 1; font-weight: bold;}
.tableFixHead thead th { position: sticky; top: -2px; left: -2px; z-index: 20; font-weight: bold;}

.tableFixHeadMin          { overflow: auto;}
.tableFixHeadMin thead td { position: sticky; top: -2px; z-index: 1; font-weight: bold;}
.tableFixHeadMin thead th { position: sticky; top: -2px; left: -2px; z-index: 20; font-weight: bold;}



.nav-tabs .nav-item-item{
  color: purple;
}

.render_offscreen{
  position: absolute !important; top: -3000px !important;
}

.stick_column{
  position:sticky !important; 
  left: -2px !important;
}

.button_strike:hover{
  text-decoration: line-through;
  background:none;
  color:white !important;
}

.form_strike:hover{
  text-decoration: line-through;
  color:black !important;

}

.menu_holder{
  visibility: hidden;
  position: fixed;
  top: 70px;
  right: 10px;
  z-index: 5;
  width: 150px; height: 60px;
}

.inline_menu{
  display: inline-block;
}


.calculator_category:hover{
  background-color: #585c64;
}

.calculator_category{
  background: none;
}

.calculator_selected{
  background-color: #585c64;
}


.index_title{
  /* font family bold maven pro */
  font-family: 'Roboto-Medium', sans-serif;
}




.canvas_align{
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);               
}


.fingerprint {
  width: 100%;
  height: 100%;
}

.fingerprint.scanning::after {
  content: '';
  position: absolute;
  width: 75%;
  height: 8px;
  background-image: linear-gradient(to bottom,
    rgba(170, 184, 190, 0),
    rgba(170, 184, 190, .8));
  animation: scanning 1.5s linear infinite;
}

@keyframes scanning {
    100% { transform: translate(0, 300px); }
}


.heading-with-image {
  display: table;  
}

.heading-with-image span {
  display: table-cell;
  vertical-align: middle;
}

.heading-with-image span:first-child {
  padding-right: 16px;
}

.hero-divider {
  min-height: 50vh;
  position: relative;
}

.hero-divider .inner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.hero-center-image {
  border-radius: 5px;
  margin: 0 auto;
  display: block;
}

.dropdown-menu-center {
  left: 50% !important;
  right: auto !important;
  text-align: center !important;
  transform: translate(-50%, 0) !important;
}

  .accordion-button-darkmode::after {
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !important;
  }

  .stars-banner {
    background-image: url('images/stars-banner.svg');
    border-image: linear-gradient(#793EC7, black) 100 !important;
    /* shift background image down */
    background-position: 0px 50px;
    border-style: solid;
    border-right: none;
    border-left: none;

  }
  
  .primary-darkmode {
    color: #b899e1;
    text-decoration: none;
}

.primary-darkmode:hover {
  color: #e3d6f3;
  text-decoration: none;
}

.calculatorHeading {
  margin-top: 100px;
}

/* For mobile devices */
@media only screen and (max-width: 767px) {
  .calculatorHeading {
    margin-top: 100px;
  }
}

/* .database_holder{
  min-height: 350px;
} */


.border-gradient-thin{
  border-radius: 0px;
  border-image: linear-gradient(#680070, #00596f) 10 !important;
  border-width: 2px;
  border-style: solid;
}

.border-gradient{
  border-radius: 0px;
  border-image: linear-gradient(#F577FF, #49DBFF) 10 !important;
  border-width: 5px;
  border-style: solid;
}


/* ─── Unordered lists with custom icons ─────────────── */
ul.customList,
ul.customList-cross {
  list-style: none;          /* remove default bullets */
  margin: 0;
  padding-left: 0;
}

ul.customList li,
ul.customList-cross li {
  position: relative;        /* anchor the pseudo-icon  */
  padding-left: 1.75em;      /* room for the icon      */
  margin-block: 0.35em;      /* tidy vertical rhythm   */
  line-height: 1.4;
}

/* ─── Shared pseudo-icon rules ──────────────────────── */
ul.customList li::before,
ul.customList-cross li::before {
  position: absolute;
  left: 0;
  top: 0.15em;               /* vertical alignment tweak */
  width: 1em;                /* fixes inconsistent widths */
  font-size: 1em;
  font-family: "Segoe UI Symbol", "Noto Color Emoji", sans-serif;
  line-height: 1;            /* keeps icon height tight  */
  text-rendering: optimizeLegibility;
}

/* ✔︎  CHECKMARK list  ----------------------------------*/
ul.customList li::before {
  content: "\2714\FE0E";     /* check + variation selector—text style */
  color: #34b233;            /* the green you wanted */
}

/* ✖︎  CROSS list  --------------------------------------*/
ul.customList-cross li::before {
  content: "\2716\FE0E";     /* cross + variation selector—text style */
  color: #000;               /* original black (change if you prefer) */
}


b{
  font-family: 'SansPro';
  font-size: 1em;
}

.visually-hidden {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}


@media (max-width: 992px) {
  /* Style for screens smaller than "lg" */
  .border-end-lg {
    border-right: none !important;
  }
}

.modal-content{
  border-radius: 10px;
}

.card{
  border-radius: 10px;
}

.card-header{
  background: none;
  border-radius: 10px;
}

.card-footer{
  background: none;
  border-radius: 10px;
}

.min_col_width{
  min-width: 70px;
}

.min_col_width_lg{
  min-width: 150px;
}



@media only screen and (max-width: 1000px) {
  .fe_canvas{
    height: 40vh
  }
}
@media only screen and (min-width: 1000px) {
  .fe_canvas{
    height: 70vh
  }
}

.blur_text {
  filter: blur(2px);
  user-select: none;
  pointer-events: none;
}

.codes_select:hover{
  cursor: pointer !important;
}

.youtube_border:hover{
  /* make border color white */
  border: 1px solid white;
  /* border radius 5 */
  border-radius: 10px;
  overflow: hidden;
}


.upload-area {
  border: 2px dashed #b4b4b4;
  border-radius: 5px;
  padding: 25px;
  position: relative;
  overflow: hidden;
  background-color: #e9edf0;
}

.upload-area-active:hover {
  border: 2px dashed #868686;
  background-color: #eff2f4;
}

.upload-area-active{
  cursor: pointer;
}

.upload-area-small {
  border: 2px dashed #b4b4b4;
  border-radius: 5px;
  padding: 10px;
  position: relative;
  overflow: hidden;
  background-color: #e9edf0;
  min-height: 95px;
  width: 100%;
}

.upload-area-dark {
  border: 2px dashed #4d4d4d;
  border-radius: 5px;
  padding: 25px;
  position: relative;
  overflow: hidden;
  max-width: 500px;
  background-color: rgba(100, 100, 100, 0.08);
}

.upload-area-dark-active:hover {
  background-color: rgba(100, 100, 100, 0.16);
}

.upload-area-dark-active{
  cursor: pointer;
}



.loading-holder {
  border-top: 1px solid #d3d3d3;
  border-bottom: 1px solid #d3d3d3;
  background-color: #f7f7f8;
  display: block;
  max-width: 100%;
  padding: 20px 12px;
  word-wrap: break-word;
  position: relative;
}

/* Add this if you want to differentiate user and AI messages */
.message-holder {
  background-color: #f0f0f0;
  max-width: 100%;
  padding: 20px 20px;
  word-wrap: break-word;
}


.message-holder-row{
  max-width: 100%;
  position: relative;
}

.message{
  display:block;
  margin: auto;
}

.user-message {
  border: none;
  background-color: #ffffff;
  border-top: 1px solid #d3d3d3;
}

.ai-message {
  border-top: 1px solid #d3d3d3;
  background-color: #f7f7f8;
}


.progress-bar {
  background-color: #b899e1;
}

.chat-input-shadow {
  border: 1px solid lightgrey;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  border-radius: 5px;
}

.vh-100{
  height: calc(100vh - 52px) !important;
}

.min-vh-100{
  min-height: calc(100vh - 52px) !important;
}


.gpt_input {
  width: 100%;
  font-size: 18px !important;
  min-height: 1em; 
  resize: none;
  box-sizing: border-box;
  border: 1px solid #ccc;
  box-shadow: none !important;
}

/* #titleholder {
  display: flex;
  align-items: flex-end;
  justify-content: center;
} */



.pdf-icon{
  color:#971a26 !important;
}

.scrollable-tbody {
  height: 35vh;
  overflow: auto;
  display: block;
  min-width:100%;
}

.table.scrollabletable tbody {
  display: block;
}

.table.scrollabletable thead,
.table.scrollabletable tbody tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}

.scrollable-thead {
  width: calc(100% - 15px) !important; /* 17px is a common width for scrollbars */
}


.modalSideMenu {
  padding-top: 0px;
  max-width:120px;
}

.modalSideMenu .btnSelected {
  background-color: #343a40 !important;
}

.modalSideMenu .btn {
  background-color: transparent;
  z-index: 9999 !important;
  border-radius: 5px;
  outline: 0 !important;
  padding-top: 8px;
  font-size: 1em;
  border: none;
}

.modalSideMenu .btn:hover {
  background-color: #343a40;
  color: #28242c;
  border: none;
}

.bg-black{
  background-color: black;
}

.btn-outline-light.dimmed {
  border: #000;
  background-color: transparent;
}

.btn-outline-light.dimmed:hover {
  background-color: #343a40;
  border: none;
  color: white !important;
}

.btn-outline-light.dimmed:focus {
  background-color: #343a40 !important;
  border: none;
  color: white !important;
}

.btn-outline-light.dimmed:active {
  background-color: #343a40 !important;
  border: none;
  color: white !important;
}

.btn-outline-light.dimmed.dropdown-toggle.show{
  background-color: #343a40 !important;
  border: none;
  color: white !important;
}

.nav-link.show.btn{
  color: white !important;
}

@media (max-width: 1200px) { /* This corresponds to Bootstrap's 'md' breakpoint */
  .modalSideMenu {
    display: none;
  }
}

.nav-link:hover{
  background-color: #eeefff !important; /* 50% transparent purple */
}

.navbar .nav-link.active {
  font-weight: normal !important; /* Prevent bold font on active link */
  background-color: #eeefff !important; /* 50% transparent purple */
}

.navbar .nav-link.show.btn {
  color: black !important; /* Change color of active link */
  font-weight: normal !important; /* Prevent bold font on active link */
}

.navbar .btn.nav-link,
.navbar .btn.nav-link:focus,
.navbar .btn.nav-link:active {
  font-weight: normal !important;
}


.bg_light_gradient {
  background: linear-gradient(300deg,#fcfcfc,#f0eef3,#f8f8f8);
  background-size: 180% 180%;
  animation: gradient-animation 24s ease infinite;
}

@keyframes gradient-animation {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}


@media (max-width: 700px) {
  #design_view{
    max-height: calc(100vh - 300px) !important;
  }
}

@media (min-width: 700px) {
  #design_view{
    max-height: calc(100vh - 240px) !important;
  }
}




@media only screen and (max-width: 1525px) {
  #side_menu_offcanvas_body{
    padding-left: 3px;
    padding-right: 3px;
  }
}

@media only screen and (min-width: 1525px) {
  #side_menu_offcanvas_body{
    padding-left: 10px;
    padding-right: 10px;
  }
}

@media (min-width: 768px) {
  .h-md-100 {
      height: 100%;
  }
}

.bg-responsive {
  background: transparent;
}

@media (min-width: 768px) {
  .bg-responsive {
    background: white;
  }
}

.btn-hover-white:hover {
  color: black;
  background-color: #fff;
  border-color: #fff;
}

.user_upload_item:hover{
  background-color: #f0f0f0;
}

.pdf_button:hover{
  background-color: white;
}

#pdf-container {
  width: 100%;
  /* height 100% of parent - 40px */
  height: calc(100% - 40px);
  overflow-y: scroll;
  overflow-x: hidden;
}


/* if screensize is less then 800px then regs_list height is 3vh if greater than this then 60vh */
@media (max-width: 700px) {
  #regs_list{
    height: 40vh;
    overflow-y: auto;
  }
}

@media (min-width: 700px) {
  #regs_list{
    height: 70vh;
    overflow-y: auto;
  }
}


.btn-outline-secondary{
  color:#161c2d;
  border-color: #c9c9c9;
}

.btn-outline-secondary:hover{
  color: black;
  background-color: white;
  border-color: #b3b3b3;
}

.map-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.card-overlay {
  width:100%;
  height:100%;
  position: absolute;
  z-index: 100; /* Make sure the z-index is above the Leaflet map */
}



.slide{
  text-align: center; /* horizontally center the text */
  color: black;
}

.flex-column-fill {
  display: flex;
  flex-direction: column;
  height: 100%;
}

#user_docs_list {
  flex-grow: 1;
  overflow-y: auto;
}



.btn-design-menu{
    border-radius: 0px;
    text-align: start;
    font-weight: normal;
    border: none;
}
.btn-design-menu:hover{
    background-color: #f1f0ef !important;
    color: #28242c;
}
.btn-design-menu:focus,.btn:active{
    background-color: #f1f0ef !important;
    color: #28242c;
    font-weight: bold;
}




.li-cross {
  position: relative;
  padding-left: 1.5em;  /* space to preserve indentation on wrap */
}

.li-cross::before{
  content: "✗";
  position: absolute;
  left: 0;
  color: red;
  
}

.dropdown-toggle.custom-icon::after {
  display: none;

}

.my-fixed-width-column {
  width: 170px; /* Or whatever width you want */
  flex-shrink: 0; /* Prevents the column from shrinking */
}

.flex-fill {
  flex-grow: 1;
  max-width: calc(100vw - 0px); /* minus the width of your fixed-width column */
}


body {
  max-width: 100vw;
}


.border_light_grey{
  border-color: #444a4f !important;
}

.form-check-input:checked {

  background-color: #793EC7;
  border-color: #000;
}

.spinner-border{
  overflow: hidden;
}

.tooltip-inner {
  padding: 10px 10px; /* Adjust the padding values as needed */
}

strong{
  font-family: 'SansPro';
  font-size: 1.1em;
}

a{
  color: #793EC7
}


.bg-primary {
  background-color: #5271ff !important;
}

.bg-primary-banner{
  background-color: #e1d4f2 !important;
}

.min-vh-75{
  min-height: 80vh !important;
}

.min-vh-90{
  min-height: 90vh !important;
}

.design_tools_page{
  height: calc(100vh - 62px);
}

.bg_dark_gradient{
  background: rgb(35,37,37);
  background: linear-gradient(135deg, rgba(35,37,37,1) 0%, rgba(39,39,39,1) 100%);
  border: 1px solid rgb(70, 70, 70);
}

.side_menu_selected{
  background-color: #e3e2e0 !important;
}

.map-overlay {
  width:100%;
  height:100%;
  position: absolute;
  background-color: rgba(0, 0, 0, 0.5); /* Adjust the last value (0.5) for the desired level of transparency */
  z-index: 99; /* Make sure the z-index is above the Leaflet map */
}

#civilsgpt_card{
  background-color: #fcfcfc;
}

.card-hover-animation:hover {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); /* Add shadow */
  /* darken background color by 5% */
  background-color: #d6d7f23d !important;
}


.background2{
  background: linear-gradient(270deg, #ffffff, #f1f4ff, #ffffff);
  background-size: 600% 600%;

  -webkit-animation: AnimationName 30s ease infinite;
  -moz-animation: AnimationName 30s ease infinite;
  animation: AnimationName 30s ease infinite;
}

@-webkit-keyframes AnimationName {
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
@-moz-keyframes AnimationName {
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
@keyframes AnimationName {
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}




.pricing{
  font-size: 0.9em !important;
}

/* CSS for making all table columns equal width */
table.equal-width-columns th, 
table.equal-width-columns td {
  width: 25%; /* Divide the table width equally among 4 columns */
}

/* Optional: Ensure table layout is fixed to respect the width */
table.equal-width-columns {
  table-layout: fixed;
  width: 100%; /* Ensure the table spans the full container width */
}

.btn-outline-purple{
  border: 1px solid #715bcc !important;
}



.marquee {
  --gap: 1rem;
  display: flex;
  overflow: hidden;
  user-select: none;
  gap: var(--gap);
}

.marquee__content {
  flex-shrink: 0;
  display: flex;
  justify-content: space-around;
  min-width: 100%;
  gap: var(--gap);
  animation: scroll 20s linear infinite; /* Apply animation */
}

.marquee__content2 {
  flex-shrink: 0;
  display: flex;
  justify-content: space-around;
  min-width: 100%;
  gap: var(--gap);
  animation: scroll 30s linear infinite; /* Apply animation */
}

.marquee__content img {
  width: 200px;
}

.marquee__content li{
  list-style: none;
}

.marquee__content2 img {
  width: 200px;
}

.marquee__content2 li{
  list-style: none;
}

@keyframes scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(-100% - var(--gap)));
  }
}



.courseCarousel .carousel-indicators{
  bottom: auto;                 /* remove the default bottom:0    */
  width:  auto;                 /* let the row hug its contents   */
  left:   50%;                  /* keep it centred as before      */
  transform: translateX(-50%);  /* (matches your start-50 + translate) */
}

.courseCarousel .carousel-indicators button{
  background-color: #000000;    /* indicator colour */
  width: 30px;                  /* indicator width  */
  margin: 0 .25rem;             /* neat spacing     */
}


/* put this after the Bootstrap CSS */
#learnToolsCarousel .carousel-control-prev,
#learnToolsCarousel .carousel-control-next{
  top: 30px;      /* ⇢ 75 px from the top of the carousel */
  bottom: auto;   /* cancel the “stretch-to-bottom” that Bootstrap sets */
}

.link-dark-hover:hover {
  text-decoration: underline;
}

.badge-dot{
  width: .45rem;
  height: .45rem;
}