body {
  margin:0;
  overflow-x:hidden;
  overflow-y:auto;
  background-color: black;
}

.bgImg{
  display:block;
  width:100%;
  height:100%;
  object-fit: cover;
  position: fixed;
  top: 0;
  left: 0;
  opacity: 1;
  z-index: -10;
}

ul {
  display: flex;
  justify-content: center;
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: rgba(0, 0, 0, 0.7);
  /*#423117*/
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 10;
}

li {
  /* Needed for absolute positioning of dropdown */
  position: relative;
}

li a {
  display: block;
  color: white;
  text-align: center;
  line-height: 8.8vh;
  /* 0.912vw */
  /*padding: 1.887vh 4.559vw;*/
  text-decoration: none;
  font-family: "Thorsa";
  /* Also 1.954vw 4.0428vh (1920/928) 30px*/
  height: 8.45vh;
}

/* Style for non-active links on hover */
li a:hover:not(.active) {
  background-color: rgba(255, 255, 255, 0.1);
  /*#573F1C*/
}

/* Style for the active link */
li .active {
  background-color: rgba(255, 255, 255, 0.2);
  /*#C3A766*/
}

.dropdown-content .active {
  background-color: rgba(255, 255, 255, 0.2);
}

/* Style the dropdown container (hidden by default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: rgba(0, 0, 0, 0.7);
  width: 80%; /* Adjust width as needed */
  z-index: 1; /* Ensure dropdown is above other elements */
  left: 50%; /* Center align dropdown */
  transform: translateX(-50%); /* Fine-tune centering */
}

/* Style the links inside the dropdown */
.dropdown-content a {
  color: white;
  padding: 0/*1.617vh*/ 1.042vw;
  display: block;
  text-align: center; /* Or left if preferred */
  font-family: "Thorsa";
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
  display: block;
}

/* Optional: Keep the main "Welcome to A" button highlighted when hovering the dropdown */
.dropdown:hover .dropbtn:not(.active){
  background-color: rgba(255, 255, 255, 0.1);
}

.framedimg {
  display:block;
  object-fit: contain;
  position: absolute;
  z-index: -1;
  border-color: #4d4d4d;
  border-width: thick;
  animation: fadeIn 3s forwards;
  animation-delay: 0s;
  opacity: 0;
}

.clickable {
	z-index: 1;
	transition: transform 0.3s ease-in-out; 
}

.clickable:hover {
	transform: scale(1.05);
}

p {
  float: center;
  font-family: Arial;
  font-weight: Regular;
  font-style: normal;
  position: relative;
  animation: fadeIn 2s forwards;
  animation-delay: 0s;
  opacity: 0;
  display:block;
  color: white;
  /*clamp(0%, 2.912vh, calc(10.8px + 0.704vw))*/
}

h1 {
  float: center;
  font-family: "Cinzel Decorative";
  font-weight: 400;
  font-style: normal;
  position: relative;
  animation: fadeIn 2s forwards;
  animation-delay: 0s;
  opacity: 0;
  display:block;
  margin-top: 0%;
  color: white;
  /*clamp(0%, 5.824vh, calc(21.6px + 1.408vw))*/
}

.main {
  position:absolute;
  top:8.45vh;
  padding-bottom: 5vh;
  width:100vw;
  min-height:86.55vh;
}

.paragraph {
  display: flex;
  flex-direction: column-reverse;
  align-items: stretch;
  position: relative;
  width: 90vw;
  left: 5vw;
  margin-top: 5vh;
  justify-content: center;
}

.paragraph p {
  text-align:left;
}

.paragraph h1 {
  text-align:left;
}

.heading {
  text-align:center;
  max-width:90vw;
  width:90vw;
  margin-left:5vw;
  margin-top: 5vh;
}

.array {
  display: flex;
  flex-grow: 1;
  align-items: center;
  position: relative;
  width: 90vw;
  left: 5vw;
  margin-top: 5vh;
  justify-content: center;
}

.array img {
  object-fit:contain;
}

.btnImg {
	height:auto;
	position: relative;
}

@media (min-aspect-ratio: 1) {
  p {
	font-size: 1.5rem;
  }
  h1 {
	font-size: 3rem;
  }
  .paragraph p {
    max-width: 47.5%;
	/*clamp(0%, 2.912vh, calc(10.8px + 0.704vw))*/
  }
  .paragraph h1 {
	max-width: 47.5%;
  }
  .sideImg
  {
	width:47.5%;
    height:100%;
	left:52.5%;
  }
  .array {
	flex-direction: row;
  }
  .array img {
    height:100%;
    width:auto;
    max-width:25%;
    margin:auto;
  }
  .btnImg
  {
	width:30%;
  }
  .mobile.mobile {
    display:none;
  }
  li a {
	padding: 0 4.559vw;
	font-size: 1.954vw;
  }
  .dropdown-content a {
	  font-size: 1vw; /*1.563vw*/
  }
}

@media (max-aspect-ratio: 1) {
  p {
	font-size: 3rem;
  }
  h1 {
	font-size: 6rem;
  }
  .paragraph p {
    max-width: 100%;
  }
  .paragraph h1 {
    max-width: 100%;
	margin-top: 3vh;
  }
  .sideImg
  {
	width: 100%;
    height: auto;
	position: relative;
  }
  .array {
	flex-direction: column;
  }
  .array img {
    height:auto;
    width:100%;
	margin-top:5vh;
  }
  .array img:first-of-type {
    margin-top:0;
  }
  .btnImg
  {
	width: 100%;
  }
  .pc.pc {
    display:none;
  }
  li a {
	padding: 0 2vw;
	font-size: 4.3vw;
  }
}

.bottomimg {
  border-style: none;
  left: 5%;
  position: relative;
  height: 128.571vw;
  width: 90vw;
  margin-top: 5vh;
  margin-bottom: 5vh;
}

@font-face {
    font-family: 'Thorsa';
    src: url('fonts/thorsa.eot');
    src: url('fonts/thorsa.eot?#iefix') format('embedded-opentype'),
         url('fonts/thorsa.woff2') format('woff2'),
         url('fonts/thorsa.woff') format('woff'),
         url('fonts/thorsa.ttf')  format('truetype'),
         url('fonts/thorsa.svg#Thorsa') format('svg');
}

@font-face {
  font-family: 'Cinzel Decorative';
  src: url('./fonts/CinzelDecorative-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Cinzel Decorative';
  src: url('./fonts/CinzelDecorative-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Cinzel Decorative';
  src: url('./fonts/CinzelDecorative-Black.ttf') format('truetype');
  font-weight: 900; 
  font-style: normal;
  font-display: swap;
}

@keyframes fadeIn {
    to {
        opacity: 1;
    }
}

@keyframes fadeOut {
    to {
        opacity: 0;
    }
}

@keyframes reviewFade1 {
  0% {
    opacity: 0;
	display: block;
  }
  2% {
    opacity: 1;
    display: block;
  }
  3% {
    opacity: 1;
    display: block;
  }
  5% {
	opacity:0;
	display:none;
  }
  100% {
	opacity:0;
	display:none;
  }
}

@keyframes reviewFade2 {
  0% {
    opacity: 0;
	display: none;
  }
  5% {
    opacity: 0;
	display: none;
  }
  7% {
    opacity: 1;
    display: block;
  }
  8% {
    opacity: 1;
    display: block;
  }
  10% {
	opacity:0;
	display:none;
  }
  100% {
	opacity:0;
	display:none;
  }
}

@keyframes reviewFade3 {
  0% {
    opacity: 0;
	display: none;
  }
  10% {
    opacity: 0;
	display: none;
  }
  12% {
    opacity: 1;
    display: block;
  }
  13% {
    opacity: 1;
    display: block;
  }
  15% {
	opacity:0;
	display:none;
  }
  100% {
	opacity:0;
	display:none;
  }
}

@keyframes reviewFade4 {
  0% {
    opacity: 0;
	display: none;
  }
  15% {
    opacity: 0;
	display: none;
  }
  17% {
    opacity: 1;
    display: block;
  }
  18% {
    opacity: 1;
    display: block;
  }
  20% {
	opacity:0;
	display:none;
  }
  100% {
	opacity:0;
	display:none;
  }
}

@keyframes reviewFade5 {
  0% {
    opacity: 0;
	display: none;
  }
  20% {
    opacity: 0;
	display: none;
  }
  22% {
    opacity: 1;
    display: block;
  }
  23% {
    opacity: 1;
    display: block;
  }
  25% {
	opacity:0;
	display:none;
  }
  100% {
	opacity:0;
	display:none;
  }
}

@keyframes reviewFade6 {
  0% {
    opacity: 0;
	display: none;
  }
  25% {
    opacity: 0;
	display: none;
  }
  27% {
    opacity: 1;
    display: block;
  }
  28% {
    opacity: 1;
    display: block;
  }
  30% {
	opacity:0;
	display:none;
  }
  100% {
	opacity:0;
	display:none;
  }
}

@keyframes reviewFade7 {
  0% {
    opacity: 0;
	display: none;
  }
  30% {
    opacity: 0;
	display: none;
  }
  32% {
    opacity: 1;
    display: block;
  }
  33% {
    opacity: 1;
    display: block;
  }
  35% {
	opacity:0;
	display:none;
  }
  100% {
	opacity:0;
	display:none;
  }
}

@keyframes reviewFade8 {
  0% {
    opacity: 0;
	display: none;
  }
  35% {
    opacity: 0;
	display: none;
  }
  37% {
    opacity: 1;
    display: block;
  }
  38% {
    opacity: 1;
    display: block;
  }
  40% {
	opacity:0;
	display:none;
  }
  100% {
	opacity:0;
	display:none;
  }
}

@keyframes reviewFade9 {
  0% {
    opacity: 0;
	display: none;
  }
  40% {
    opacity: 0;
	display: none;
  }
  42% {
    opacity: 1;
    display: block;
  }
  43% {
    opacity: 1;
    display: block;
  }
  45% {
	opacity:0;
	display:none;
  }
  100% {
	opacity:0;
	display:none;
  }
}

@keyframes reviewFade10 {
  0% {
    opacity: 0;
	display: none;
  }
  45% {
    opacity: 0;
	display: none;
  }
  47% {
    opacity: 1;
    display: block;
  }
  48% {
    opacity: 1;
    display: block;
  }
  50% {
	opacity:0;
	display:none;
  }
  100% {
	opacity:0;
	display:none;
  }
}

@keyframes reviewFade11 {
  0% {
    opacity: 0;
	display: none;
  }
  50% {
    opacity: 0;
	display: none;
  }
  52% {
    opacity: 1;
    display: block;
  }
  53% {
    opacity: 1;
    display: block;
  }
  55% {
	opacity:0;
	display:none;
  }
  100% {
	opacity:0;
	display:none;
  }
}

@keyframes reviewFade12 {
  0% {
    opacity: 0;
	display: none;
  }
  55% {
    opacity: 0;
	display: none;
  }
  57% {
    opacity: 1;
    display: block;
  }
  58% {
    opacity: 1;
    display: block;
  }
  60% {
	opacity:0;
	display:none;
  }
  100% {
	opacity:0;
	display:none;
  }
}

@keyframes reviewFade13 {
  0% {
    opacity: 0;
	display: none;
  }
  60% {
    opacity: 0;
	display: none;
  }
  62% {
    opacity: 1;
    display: block;
  }
  63% {
    opacity: 1;
    display: block;
  }
  65% {
	opacity:0;
	display:none;
  }
  100% {
	opacity:0;
	display:none;
  }
}

@keyframes reviewFade14 {
  0% {
    opacity: 0;
	display: none;
  }
  65% {
    opacity: 0;
	display: none;
  }
  67% {
    opacity: 1;
    display: block;
  }
  68% {
    opacity: 1;
    display: block;
  }
  70% {
	opacity:0;
	display:none;
  }
  100% {
	opacity:0;
	display:none;
  }
}

@keyframes reviewFade15 {
  0% {
    opacity: 0;
	display: none;
  }
  70% {
    opacity: 0;
	display: none;
  }
  72% {
    opacity: 1;
    display: block;
  }
  73% {
    opacity: 1;
    display: block;
  }
  75% {
	opacity:0;
	display:none;
  }
  100% {
	opacity:0;
	display:none;
  }
}

@keyframes reviewFade16 {
  0% {
    opacity: 0;
	display: none;
  }
  75% {
    opacity: 0;
	display: none;
  }
  77% {
    opacity: 1;
    display: block;
  }
  78% {
    opacity: 1;
    display: block;
  }
  80% {
	opacity:0;
	display:none;
  }
  100% {
	opacity:0;
	display:none;
  }
}

@keyframes reviewFade17 {
  0% {
    opacity: 0;
	display: none;
  }
  80% {
    opacity: 0;
	display: none;
  }
  82% {
    opacity: 1;
    display: block;
  }
  83% {
    opacity: 1;
    display: block;
  }
  85% {
	opacity:0;
	display:none;
  }
  100% {
	opacity:0;
	display:none;
  }
}

@keyframes reviewFade18 {
  0% {
    opacity: 0;
	display: none;
  }
  85% {
    opacity: 0;
	display: none;
  }
  87% {
    opacity: 1;
    display: block;
  }
  88% {
    opacity: 1;
    display: block;
  }
  90% {
	opacity:0;
	display:none;
  }
  100% {
	opacity:0;
	display:none;
  }
}

@keyframes reviewFade19 {
  0% {
    opacity: 0;
	display: none;
  }
  90% {
    opacity: 0;
	display: none;
  }
  92% {
    opacity: 1;
    display: block;
  }
  93% {
    opacity: 1;
    display: block;
  }
  95% {
	opacity:0;
	display:none;
  }
  100% {
	opacity:0;
	display:none;
  }
}

@keyframes reviewFade20 {
  0% {
    opacity: 0;
	display: none;
  }
  95% {
    opacity: 0;
	display: none;
  }
  97% {
    opacity: 1;
    display: block;
  }
  98% {
    opacity: 1;
    display: block;
  }
  100% {
	opacity:0;
	display:none;
  }
}