body, html {
  height: 100%;
  margin: 0;
  font: "Lato", serif;
  color: #777;
}

.bgimg-1, .bgimg-2 {
  position: relative;
  opacity: 0.65;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;

}
.bgimg-1 {
  background-image: url("images/stockboard1.jpg");
  min-height: 100%;
}

.bgimg-2 {
  background-image: url("images/richcat3RevALit2.jpg");
  background-position: left top;
  opacity: 1;
  min-height: 800px;
}
.bgimg-3 {
  background-image: url("images/mag4lit1.png");
  min-height: 550px;
  position: relative;
  opacity: 1;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.bgimg-4 {
  background-image: url("images/Background4.jpeg");
  min-height: 100px;
  position: relative;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.caption {
  position: absolute;
  left: 60%; /* Move the span to the center horizontally */
  top: 30%;
  transform: translateX(-50%); /* Adjust for center alignment */
  width: 100%;
  text-align: center;
  color: #000000; /* Set the text color */
  opacity: 1; /* Set the opacity */
}

.caption span.border {
  background-color: transparent;
  color: #000000;
  opacity: 1; /* Set the opacity */
  padding: 18px;
  font-size: 25px;
  letter-spacing: 10px;
}

h2 {
  letter-spacing: 5px;
  text-transform: uppercase;
  font: "Lato", serif;
  color: #111;
}

/* Turn off parallax scrolling for tablets and phones */
@media only screen and (max-device-width: 1024px) {
  .bgimg-1, .bgimg-2, .bgimg-3, .bgimg-4 {
    background-attachment: scroll;
  }
} 

.h1-div {
  padding: 0px 0px 0px 0px;
  font-family: "Lato", serif;
  font-size: clamp(8px, 1.5vw, 16px);
  text-align: center;
  position: absolute;
  top: 55px;
  width: 100%;

  background-color: #b4e9ff;
  color: #000000;
  opacity: 1;
}

.rectangle {
  border-radius: 15px;
  padding: 10px;
  font-family: "Lato", serif;
  font-size: clamp(12px, 2vw, 24px);
  font-weight: bolder;
  line-height: 1.4;
  position: absolute;
  left: 20%;
  top: 6vmin;
  transform: translateY(50%);
  width: (250px, 50.0vw, 300px);
  height: clamp(150px, 20.0vw, 300px);
  background-color: #affff2;
  color: #000000;
  opacity: 0;
  transition: all 2s ease;
}
#rectangle.active {
    box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.95); /* Add drop shadow */
}    
.rectangle2 {
    border-radius: 15px;
    padding: 20px;
    font-family: "Lato", serif;
    font-size: clamp(14px, 3vw, 28px);
    font-weight: bolder;
    position: absolute;
    left: 10px;
    top: 35vmin;
    transform: translateY(50%);
    width: 85%;
    height: 30vm;
    min-height: 200px;
    background-color: #b8ffdc;
    color: #000000;
    opacity: 0;
    transition: all 2s ease;
}
#rectangle2.active {
    box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.95); /* Add drop shadow */
}   

#fearTitle {
    color: #1b1b1b;
    font-family: "Lato", serif;
    font-size: 2.8vmin;
    font-weight: bold;
    margin: 0; 
}   
.richdiv {
  position: absolute;
  left: 50%; /* Move the span to the center horizontally */
  top: 17%;
  transform: translateX(-50%); /* Adjust for center alignment */
  width: 100%;
  text-align: center;
  color: #000000; /* Set the text color */
  opacity: 1; /* Set the opacity */
  font-size: clamp(14px, 3.5vw, 24px);
  font-family: Hahmlet, serif;
  font-weight: bolder;
}

.richdiv span.richspan {
  background-color: transparent;
  font-family: Lato;
  color: #000000;
  opacity: 1; /* Set the opacity */
  padding: 18px;
}

.richdiv2 {
  position: absolute;
  left: 50%; /* Move the span to the center horizontally */
  top: 53%;
  transform: translateX(-50%); /* Adjust for center alignment */
  width: 100%;
  text-align: center;
  color: #000000; /* Set the text color */
  opacity: 1; /* Set the opacity */
  font-size: clamp(14px, 3.5vw, 24px);
  font-family: Lato, serif;
  font-weight: bolder;
}

.richdiv2 span.richspan2 {
  background-color: transparent;
  font-family: Lato;
  color: #000000;
  opacity: 1; /* Set the opacity */
  padding: 18px;
}
/* -------------------------- */
.AIText {
  color: #0a3900;
  font-weight: bolder;
}

.scene {
  position: relative;
  top: 30%;

  width: 210px;
  height: 300px;
  margin: 40px auto;
  perspective: 1000px;
}

.carousel {
  top: 40%;
  width: 100%;
  height: 100%;
  position: absolute;
  transform: translateZ(-250px);
  transform-style: preserve-3d;
  transition: transform 1s;
}

.carousel__cell {
  position: absolute;
  width: 175px;
  height: 300px;
  left: 10px;
  top: 10px;
  border: 2px solid black;
  color: white;
  text-align: center;
}

.carousel__cell:nth-child(9n+1) { background: hsla( 388, 55%, 50%, 0.9); }
.carousel__cell:nth-child(9n+2) { background: hsla( 199, 70%, 64%, 0.9); color:#000;  }
.carousel__cell:nth-child(9n+3) { background: hsla(237, 100%, 59%, 0.9); }
.carousel__cell:nth-child(9n+4) { background: hsla(42, 100%, 63%, 0.9); color:#000; }
.carousel__cell:nth-child(9n+5) { background: hsla(291, 74%, 33%, 0.9); }
.carousel__cell:nth-child(9n+6) { background: hsla(17, 100%, 42%, 0.9); }
.carousel__cell:nth-child(9n+7) { background: hsla(267, 100%, 75%, 0.9); color: #000; }
.carousel__cell:nth-child(9n+8) { background: hsla(181, 100%, 18%, 0.9); }
.carousel__cell:nth-child(9n+0) { background: hsla(0, 0%, 0%, 0.9); }

.carousel__cell:nth-child(1) { transform: rotateY(  0deg) translateZ(250px); }
.carousel__cell:nth-child(2) { transform: rotateY( 40deg) translateZ(250px); }
.carousel__cell:nth-child(3) { transform: rotateY( 80deg) translateZ(250px); }
.carousel__cell:nth-child(4) { transform: rotateY(120deg) translateZ(250px); }
.carousel__cell:nth-child(5) { transform: rotateY(160deg) translateZ(250px); }
.carousel__cell:nth-child(6) { transform: rotateY(200deg) translateZ(250px); }
.carousel__cell:nth-child(7) { transform: rotateY(240deg) translateZ(250px); }
.carousel__cell:nth-child(8) { transform: rotateY(280deg) translateZ(250px); }
.carousel__cell:nth-child(9) { transform: rotateY(320deg) translateZ(250px); }

.container {
  max-width: 1024px;
  margin: 0 auto;
  padding: 0 2rem;
  height: 100%;
}

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 4%;
  padding: 12% 0;
}

.card:nth-child(2) {
  transform: translateY(-50px); /* Move the middle card up */
}

.card {
  --card-width: 300px; /* Default width */
  --card-height: 400px; /* Default height */
  width: var(--card-width);
  height: var(--card-height);
  padding: 25px 15px 15px 15px;
  background: rgba(255, 255, 255, 0.1);
  border: 2px solid rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(10px);
  border-radius: 25px;
}

.card:hover {
  box-shadow: 12px 13px 50px -28px rgba(0, 0, 0, 1);
}

.card_title {
  text-align: center;
  font-weight: bold;
  font-size: 24px;
  font-family: Lato, serif;
  margin-bottom: 20px;
  color: #fff;
  text-shadow: 5px 5px 5px #000;
}

.features {
  margin: 40px 0;
  list-style-position: inside;
}

.features li {
  padding-bottom: 10px;
}

a.cta_btn {
  width: 100%;
  display: inline-block;
  text-align: center;
  background: rgba(21, 23, 24, 0.7);
  border-radius: 29px;
  padding: 20px 0;
  color: white;
  text-decoration: none;
  letter-spacing: 2px;
  transition: background .3s ease;
}

a.cta_btn:hover {
  background: #168200;
}
a.esr_btn {
    padding: 10px;
    display: inline-block;
    text-align: center;
    background: rgba(21, 23, 24, 0.3);
    border-radius: 15px;
    border: 2px solid rgba(255, 255, 255, 0.5);
    color: white;
    text-decoration: none;
    letter-spacing: 2px;
    transition: background .3s ease;
  }
  
  a.esr_btn:hover {
    background: #168200;
  }

.link {
  position: fixed;
  background-color: #D12322;
  padding: 23px 40px;
  right: -99px;
  border-radius: 5px;
  top: 50%;
  transform: translateY(-50%);
  transform: rotate(-90deg);
  font-size: 18px;
  font-weight: 500;
  color: #FFF;
  text-decoration: none;
  text-transform: capitalize;
  transition: all .1s ease-in-out;
}

.link i {
  padding-left: 7px;
}

.link:hover {
  text-decoration: underline;
  background-color: black;
}

@media only screen and (max-width: 1024px) {
  .grid {
    grid-template-columns: 1fr 1fr;
    gap: 2%;
    padding-bottom: 25%;
  }
}
@media only screen and (max-width: 500px) {
  .grid {
    grid-template-columns: 1fr;
    gap: 2%;
    padding-bottom: 25%;
  }
  .card:nth-child(2) {
  transform: translateY(-0px); /* Move the middle card up */
}
}


.topnav {
    background-color: #333;
    overflow: hidden;
    position: fixed; /* Fix the menu at the top */
    top: 0;
    width: 100%; /* Ensure the menu spans the full width */
    z-index: 1000; /* Ensure the menu is on top of other elements */
}

.topnav a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
}

.topnav a:hover {
    background-color: #88ffed;
    color: black;
}

.topnav a.active {
    background-color: #00aea3;
    color: white;
}

.topnav .icon {
    display: none;
}

/* Media query for screens smaller than 600px */
@media screen and (max-width: 680px) {
  .topnav a {
    display: none;
  }
  .topnav a.icon {
    float: left;
    display: block;
  }
}

@media screen and (max-width: 680px) {
  .topnav.responsive {
    background-color: #333;
    overflow: hidden;
    position: fixed; /* Fix the menu at the top */
    top: 0;
    width: 100%; /* Ensure the menu spans the full width */
    z-index: 1000; /* Ensure the menu is on top of other elements */
  }
  .topnav.responsive .icon {
    position: absolute;
    left: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}

#loading {
    visibility: hidden; /* Keep the div in place but hidden */
}
#loading.visible {
    visibility: visible; /* Show the div when it has the 'visible' class */
}

.underliner {
  text-decoration: underline;
}