* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;

  /* HEADER MENU COLOR */
  --headl: #0e4129;
  --headr: #0a424f;

  /* MENU TEXT */
  --hxa: #5dffff;
  --hxb: #ffffff;
  --hxc: #ffffff;

  /* SOFT COLORS */
  --so1: #eafff9;
  --so2: #f1ffed;

  /*TEZ TEXT */
  --texh1: #c0a54e;
  --texh2: #56bda2;
  --texh2s: #56babd;

  --tezh3: #16616b;
  --texh3: #166b63;

  --texh4: #07707d;
  --tezh4: #07707d;
  --texh5: #2d325a;
  --tezh5: #868840;

  --tezh6: #0c3f28;
  --texh6: #0c3f28;
  --tezp: #175557;
  --tezss: #426662;

  --texb: #ffffff;
  --texg: #e0e0e0;
  --teoa: #c8ffc6;
  --teob: #fffebe;
  --teoc: #005975;
  --teod: #ffffff;

  /* SCROLLBAR */
  --sca: #1b1500;
  --scb: #099595;
  --scc: #1b1500;

  /* SIDEPANEL */
  --sia: #095f47;
  --sib: #03494a;
  --sic: #022130;

  /* FOOTER */
  --foa: #001118;
  --fob: #4a000a;
  --foc: #051923;

  /* IMAGES FOR MAIN BACKGROUNDS */
  --aim: url("../IOPIC/AIHOME/TOPA1.jpg");
  --aimb: url("../IOPIC/AIHOME/TOPA1M.jpg");
}

/* ----------------------------------------------- HTML BASE CLASSES ---------------------------------------------------------*/
/* ---------------------------------------------------------------------------------------------------------------------------*/
/* ---------------------------------------------------------------------------------------------------------------------------*/
/* ---------------------------------------------------------------------------------------------------------------------------*/
/* ---------------------------------------------------------------------------------------------------------------------------*/
/* ---------------------------------------------------------------------------------------------------------------------------*/
/* ---------------------------------------------------------------------------------------------------------------------------*/
/* ---------------------------------------------------------------------------------------------------------------------------*/
/* ---------------------------------------------------------------------------------------------------------------------------*/
/* ---------------------------------------------------------------------------------------------------------------------------*/
/* HEADER */
header {
  width: 100%;
  color: #9b9b9b;
  font-size: 0.85rem;
  padding: 0.5rem 1rem;
  background: linear-gradient(to left, #001118, #032432);
  text-align: right;
}
header h1 {
  font-size: 9px !important;
  font-weight: 900;
  color: #35f9a0;
  letter-spacing: 1px;
}
header h1 span {
  color: #dac964;
  letter-spacing: 1px;
}

/* SCROLLBAR ---------------------------*/
/* ------------------------------------ */
/* ------------------------------------ */
/* ------------------------------------ */
/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: var(--scc);
}

/* Handle */
::-webkit-scrollbar-thumb {
  border-radius: 20px;
  background: linear-gradient(to bottom, var(--scb), var(--sca));
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(to top, var(--scb), var(--sca));
}

/* NAVBAR    ---------------------------*/
/* ------------------------------------ */
/* ------------------------------------ */
/* ------------------------------------ */
/* HEADER */
.header {
  display: flex;
  padding: 4px 15px;
  align-items: center;
  position: relative;
  justify-content: space-between;
  background: linear-gradient(to right, var(--headl), var(--headr));
}
.heapic {
  flex-basis: 30%;
  display: flex;
  overflow: hidden;
  width: min-content;
}
.header img {
  width: 100px;
  height: 70px;
  margin: 5px 0px 5px 0px;
  margin-left: 50px;
  filter: brightness(1.2);
}
.header h6 {
  font-size: 20px;
  font-weight: 900;
  flex-basis: 40%;
  color: var(--cia);
  padding: 20px 5px;
  font-family: "Megrim", cursive;
}
/* NAVBAR */
nav ul {
  text-decoration: none;
  display: flex;
  flex-basis: 40%;
}
nav ul li {
  list-style: none;
  position: relative;
}
nav ul li a {
  text-decoration: none;
  color: var(--hxa);
  margin-left: 10px;
  padding: 10px 15px;
  font-size: 1rem;
  font-weight: 900;
}
nav ul li a span {
  color: var(--hxb);
  font-weight: 500;
}
nav a:hover {
  color: var(--hxb);
  transition: 300ms ease-in;
}
nav a:hover span {
  color: var(--hxc);
  transition: 500ms ease-in-out;
  font-weight: 900;
}

/* Hero */
.HERO img {
  width: 389px;
  height: auto;
  padding-bottom: 10px;
}
.DATALOC {
  display: flex;
  align-items: flex-end;
  gap: 10px;
}
.DATE {
  font-size: 4rem;
  font-weight: bold;
  color: var(--tezh6);
  font-family: "Outfit", "sans-serif";
}
.DATEDETAIL {
  display: flex;
  flex-direction: column;
}
.MONTHSYEAR {
  font-size: 2rem;
  margin-top: 10px;
  color: var(--tezh6);
  line-height: 1.1;
  font-family: "Outfit", "sans-serif";
}
.DATEBLO h6 {
  font-size: 1.5rem !important;
  line-height: 1.1;
}

/* Title */
.TIT h6 {
  font-size: 3.7rem !important;
  font-weight: 500;
}
.TIT span {
  font-size: 3.7rem;
  font-weight: 500;
}

/* STYLE HEADER SESSION */
.HEADSES h1 {
  font-family: Outfit, sans-serif;
  font-size: 3.7rem;
  color: var(--tezh6);
  font-weight: 400;
  letter-spacing: 2px;
  word-spacing: 10px;
}
.HEADSES p {
  font-family: Outfit, sans-serif;
  font-size: 2rem !important;
  color: #3da197 !important;
  font-weight: 300;
  letter-spacing: 4px;
  line-height: 3.1rem;
  word-spacing: 10px;
}
.HEADSES img {
  max-width: 349px;
  max-height: auto;
}

.TITLE_DAY {
  font-size: 2rem;
  margin: 2rem 0 0.5rem 0;
  color: var(--tezh6);
  font-weight: 600;
  font-family: "Outfit", sans-serif;
}

/* OPEN AND CLOSE BUTTON */
.openbtn,
.closebtn {
  font-family: "Cinzel", serif;
  display: none;
}

#corpz {
  width: auto;
  margin-left: 10px;
  border: none;
  border-radius: 10px;
  padding: 10px 10px;
  background: linear-gradient(220deg, #e0c04e, #3a2e00);
  transition: all 200ms ease-in-out;
}
#corpz:hover {
  border: none;
  border-radius: 9px;
  padding: 10px 10px;
  letter-spacing: 2px;
  background: linear-gradient(220deg, #e0c04e, #3a2e00);
}
#viet {
  width: auto;
  margin-left: 10px;
  border: none;
  border-radius: 10px;
  padding: 10px 10px;
  background: linear-gradient(220deg, #5a66b8, #0c203c);
  transition: all 200ms ease-in-out;
}
#viet:hover {
  border: none;
  border-radius: 9px;
  padding: 10px 10px;
  letter-spacing: 2px;
  background: linear-gradient(220deg, #5a66b8, #0c203c);
}
.spez {
  display: none;
  position: absolute;
  bottom: 1rem;
  right: 1rem;
}
.spez h5 {
  color: #999999;
  font-size: 0.65rem;
  letter-spacing: 2px;
}
.spim {
  display: none;
  position: absolute;
  bottom: 9rem;
  right: 3rem;
  width: 5rem;
  height: 5rem;
}
.spim img {
  width: 9rem;
  height: 11rem;
  display: block;
}

/* MEDIA QUERY */
/* ------------------------------------------------------- */
/* ------------------------------------------------------- */
/* ------------------------------------------------------- */
/* ------------------------------------------------------- */
@keyframes anim {
  0% {
    font-weight: 400;
    font-size: 15px;
    opacity: 1;
    color: var(--hxa);
    margin-left: 7px;
  }
  40% {
    font-weight: 900;
    opacity: 0.7;
    color: var(--hxb);
    margin-left: 6px;
  }
  100% {
    font-weight: 600;
    font-size: 16px;
    color: var(--hxc);
    margin-left: 5px;
  }
}

@media (max-width: 700px) {
  .openbtn {
    display: block;
  }
  .closebtn {
    display: flex;
  }
  /* LOGO */
  .heapic {
    flex-basis: 50%;
  }
  .header img {
    margin-left: 5px;
    aspect-ratio: 10/9;
  }

  /* NAVBAR */
  nav ul {
    margin: 10px auto;
    display: block;
  }
  nav ul li {
    margin: 30px auto;
  }
  nav ul li a {
    padding: 10px 10px;
    font-size: 1.5rem;
  }
  nav ul li a span {
    animation: anim 1.5s linear forwards infinite;
  }
  #viet,
  #corpz {
    margin-left: 50px;
  }

  /* SIDEPANEL */
  .sidepanel {
    width: 0px;
    opacity: 0;
    border: none;
    position: fixed;
    z-index: 5000;
    height: 100vh;
    top: 0;
    right: 0;
    background: linear-gradient(120deg, var(--sia), var(--sib), var(--sic));
    overflow-x: hidden;
    transition: all 0.5s ease-in-out;
    padding-top: 60px;
  }

  .sidepanel a {
    padding: 15px 80px 15px 50px;
    text-decoration: none;
    color: var(--hxb);
    width: 190px;
    transition: 0.3s;
  }
  .sidepanel a span {
    color: var(--hxc);
  }
  .sidepanel .closebtn {
    position: absolute;
    top: 1rem;
    right: 0.5rem;
    font-size: 36px;
  }

  .openbtn {
    font-size: 20px;
    cursor: pointer;
    background-color: rgba(45, 0, 11, 0.195);
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 5px;
  }
  .openbtn:hover {
    background-color: #444;
  }
  .show {
    display: none;
  }
  .spez,
  .spim {
    display: block;
  }
}
/* ENDS HERE */

/* ------------------------------------------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------------------------------------------- */
/* -----------------------------------------------HTML CLASSES A - Z ALL --------------------------------------------------- */
/* ------------------------------------------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------------------------------------------- */

/* ------------------------------------------------------------------------------------------------------------ */
/* -----------------------------------------------------AA----------------------------------------------------- */
/* -------------------------------------------------AAAAAAAAAAA------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------ */
/* AVIOR MAIN MAIN MAIN --------------------------------------------------------------------------------------- */
.AVIOR {
  width: 100%;
  display: block;
  overflow: hidden !important;
  background: white;
}

/* ANCHOR INIT */
html a {
  text-decoration: none;
}

/* ANCHOR CLASSES */
.ACT a {
  font-size: 1.7rem;
  color: white;
  font-weight: 400;
  padding: 1rem 1rem;
  border-radius: 0.7rem;
  background: linear-gradient(to right, #3a2e00, #e0c04e);
  transition: all 0.3s ease;
  font-family: "Outfit", sans-serif;
  letter-spacing: 2px;
}
.ACT a:hover {
  opacity: 0.9;
  transform: scale(1.05);
}

.ASA a {
  font-size: 16px;
  color: #919049;
  font-weight: 900;
}
.ASA a span {
  padding: 7px 15px;
  border-radius: 1rem;
  font-size: 12px;
  font-weight: 700;
  background: #616026;
  color: #e2e182;
  transition: all 400ms ease-in-out;
}
.ASA a span:hover {
  padding: 7px 1rem;
  background: #3a9079;
  letter-spacing: 4px;
  font-weight: 900;
  transform: scale(1.1);
  animation: ASA 900ms linear infinite;
}
@keyframes ASA {
  0% {
    background: #283011;
    opacity: 0.2;
  }
  50% {
    background: #1a3f43;
    opacity: 1;
  }
  100% {
    background: #0f2919;
    opacity: 0.6;
  }
}

/* POSITION CLASSES */
.ASIA {
  position: relative !important;
}
.PIC {
  place-items: center;
}

.PATITLE {
  display: flex;
  flex-direction: row !important;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}
.PATITLE h1 {
  padding-top: 79px;
}

.DX {
  display: none;
}
.NX {
  display: block;
}
.ZX {
  display: inline-block;
}

.PTT {
  padding: 0rem 1rem;
}
.PBB {
  padding-bottom: 2rem;
}

.PH3 {
  padding: 2rem 1rem 1rem;
}

.FSB {
  justify-content: space-between;
}
.FFE {
  justify-content: flex-end;
}
.FCC {
  justify-content: center;
}
.FFS {
  justify-content: flex-start;
}

.AIC {
  align-items: center;
}

.GP1 {
  gap: 1rem;
}

.FDE {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}

.TCT {
  text-align: center;
}
.TLT {
  text-align: left;
}
.TRT {
  text-align: right;
}

.BR1 {
  border-radius: 1rem;
}
.BR2 {
  border-radius: 2rem;
}

.LS2 {
  letter-spacing: 2px;
}
.LS5 {
  letter-spacing: 5px;
}

.LH4 {
  line-height: 4vh;
}

.FFF {
  flex-wrap: wrap;
}

.MRB {
  margin-bottom: 5px;
}
.MRR {
  margin-right: 0.5rem;
}
.MRL {
  margin-left: 0.5rem;
}

.PB2D7 {
  padding-bottom: 2.7rem;
}

.TXX h6,
.TXX p {
  width: 40ch;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* ------------------------------------------------------------------------------------------------------------ */
/* -----------------------------------------------------AA----------------------------------------------------- */
/* -------------------------------------------------AAAAAAAAAAA------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------ */
/* AVIOR TOP CLASS -------------------------------------------------------------------------------------------- */
.ATOP {
  background-position: center;
  background: linear-gradient(
      310deg,
      rgba(4, 98, 98, 1) 27%,
      rgba(68, 151, 132, 1) 44%,
      rgba(88, 187, 171, 1) 60%,
      rgb(245, 245, 255) 74%
    ),
    var(--aim);
}

/* ------------------------------------------------------------------------------------------------------------ */
/* -----------------------------------------------------AA----------------------------------------------------- */
/* -------------------------------------------------AAAAAAAAAAA------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------ */
/* AVIOR ANIMATION CLASS -------------------------------------------------------------------------------------------- */
/* BLINKING ANIMATION */
@keyframes blink {
  0% {
    opacity: 0.3;
  }
  50% {
    opacity: 1;
    transform: scale(1.1);
  }
  100% {
    opacity: 0.7;
  }
}
.ANIMBLINK {
  animation: blink 2s linear infinite;
}

@keyframes mover {
  0% {
    opacity: 0.3;
    transform: translateX(-10%);
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.3;
    transform: translateX(110%);
  }
}
.ANIMOVER {
  animation: mover 2s linear infinite;
  animation-duration: 20s;
}

@keyframes movel {
  0% {
    opacity: 0.3;
    transform: translateX(110%);
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.3;
    transform: translateX(-10%);
  }
}
.ANIMOVEL {
  animation: movel 2s linear infinite;
  animation-duration: 20s;
}

/* ------------------------------------------------------------------------------------------------------------ */
/* -----------------------------------------------------BB----------------------------------------------------- */
/* -------------------------------------------------BBBBBBBBBB------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------ */
/* AVIOR BOX CLASS -------------------------------------------------------------------------------------------- */
/* Youtube display */
.YTDP {
  display: flex;
  justify-content: center;
  height: 700px;
  align-items: center;
  padding: 2rem 0;
}
.YTDP iframe {
  width: 100%;
  height: 100%;
  border-radius: 1rem;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
}

/* 4 BOXES WITH ONE COVER */
.BOXCOVER {
  padding: 0.2rem 0;
  align-items: center;
}
.BOXCOVER .BOXIN {
  padding: 1.1rem 1.1rem 1.1rem 1.5rem;
  background: #18523b linear-gradient(to top, #18523b, #347f6b, #51b8a3);
  border-radius: 2rem;
  margin: 5px 0;
  transition: all 900ms ease-in-out;
}
.BOXCOVER .BOXIN a {
  color: #0c3f28;
  font-size: 14px;
  font-weight: 900;
  padding: 0.5rem 0.5rem;
  background: #18523b linear-gradient(to right, #bac9c3, #ffffff);
  border-radius: 0.5rem;
  transition: all 900ms ease-in-out;
}
.BOXCOVER .BOXIN a:hover {
  background: #18523b linear-gradient(to right, #aeafaf, #d8d8d8);
}
.BOXCOVER .BOXIN:hover {
  transform: scale(0.95);
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}
.BOXCOVER .BOXIN .BOX {
  display: flex;
  justify-content: flex-end;
}

/* STYLE TEXT 4 IN BOXS */
.BOXCOVER .BOXIN h3 {
  color: #ffffff !important;
  font-size: 5rem !important;
}
.BOXCOVER .BOXIN h6 {
  color: #ffffff !important;
  font-size: 1.5rem !important;
}
.BOXCOVER .BOXIN p {
  color: #ffffff !important;
}

/* Logo Partners */
.LOGOP {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  align-items: center;
  justify-items: center;
}
.LOGOP img {
  width: 200px;
  height: 200px;
  object-fit: cover;
}

input[type="checkbox"] {
  display: none;
}
.ContinerLogoPartner {
  text-align: center;
}
.ContinerLogoPartner img {
  transition: transform 0.25s ease;
  cursor: zoom-in;
  width: -webkit-fill-available;
}
input[type="checkbox"]:checked ~ label > img {
  transform: scale(2);
  cursor: zoom-out;
}

/* swiper */
.swiper-button-next,
.coupons-swiper-container,
.sessions-swiper-container {
  --swiper-navigation-color: #e0c04e !important;
  --swiper-pagination-color: #e0c04e !important;
}
.swiper-pagination-bullet {
  background: #cceee5 !important;
}
.swiper-pagination-bullet-active {
  background: #e0c04e !important;
}

/* Banner Swiper Styles */
.banner-swiper-container {
  --swiper-navigation-color: #e0c04e !important;
  --swiper-pagination-color: #e0c04e !important;
  --swiper-navigation-size: 30px !important;
}

.banner-swiper-container::part(button-prev),
.banner-swiper-container::part(button-next) {
  background-color: rgba(0, 0, 0, 0.3);
  padding: 20px;
  border-radius: 0%;
}

.banner-swiper-container::part(button-prev):hover,
.banner-swiper-container::part(button-next):hover {
  background-color: rgba(0, 0, 0, 0.5);
}

/* Masonry Layout */
.masonry-scroller {
  height: 500px;
  overflow: hidden;
  position: relative;
}
.masonry-container {
  animation: scroll 30s linear infinite;
}
.masonry-grid {
  width: 100%;
}
.masonry-item {
  margin: 16px 8px;
  break-inside: avoid;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #333;
  font-weight: bold;
  border-radius: 8px;
  transition: transform 0.3s ease;
}
.masonry-item:hover {
  transform: scale(1.03);
  z-index: 10;
}
@keyframes scroll {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-50%);
  }
}

/* Card Container */
.CARD_CONTAINER {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}
.CARD {
  position: relative;
  height: 450px;
  background-color: white;
  border-radius: 2rem;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.CARD::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: linear-gradient(
    to top,
    rgba(9, 54, 31, 1) 25%,
    rgba(10, 64, 48, 0.1) 80%
  );
  z-index: 1;
}
.CARD img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.CARD_CONTENT {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0 2rem 1rem 2rem;
  color: white;
  z-index: 2;
  max-height: 190px;
  overflow: hidden;
  transition: all 0.3s ease;
}
.CARD_CONTENT.expanded {
  max-height: 400px;
  overflow-y: auto;
  background-color: rgba(9, 54, 31, 0.9);
  padding-top: 1rem;
}
.CARD_CONTENT h3 {
  font-size: 1.1rem !important;
  color: white !important;
  text-align: left;
  font-family: "Abril Fatface", serif;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 0.5rem;
}
.CARD_CONTENT.expanded h3 {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}
.CARD_CONTENT p {
  font-size: 0.9rem !important;
  margin-bottom: 0.5rem;
  color: white !important;
  text-align: left;
  line-height: 1.5;
}
.CARD_CONTENT p:first-of-type {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.CARD_CONTENT.expanded p:first-of-type {
  display: block;
  -webkit-line-clamp: unset;
  line-clamp: unset;
  white-space: normal;
}
.CARD_META {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}
.CARD_META p {
  font-size: 0.8rem !important;
  margin-bottom: 0.5rem;
  color: white !important;
  text-align: left;
  line-height: 1.4;
}
.CARD_META strong {
  font-weight: 600;
}
.READ_MORE {
  cursor: pointer;
  font-weight: bold !important;
  color: #ffffff;
}

/* PRODUCT Container */
.PDU_CONTAINER {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}
.PDU {
  display: flex;
  height: 280px;
  border-radius: 2rem;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.PDU_swiper {
  width: 100%;
  padding: 2rem 0;
  position: relative;
}
.PDU_LOGO {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 120px;
  height: 60px;
  background-color: white;
  border-radius: 0 0 32px 0;
  overflow: hidden;
}
.PDU_LOGO img {
  width: 60%;
  height: 60%;
  padding: 0.5rem;
  object-fit: contain !important;
}
.PDU_LEFT {
  width: 52%;
  background-color: white;
  position: relative;
}
.PDU_LEFT img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.PDU_RIGHT {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 48%;
  background: #18523b linear-gradient(to top, #18523b, #347f6b, #51b8a3);
  padding: 1rem;
  color: white;
}
.PDU_RIGHT .CONTENT {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.PDU_RIGHT h1 {
  font-size: 4.5 rem !important;
  color: white !important;
  font-family: "Outfit", sans-serif;
  text-align: left !important;
}
.PDU_RIGHT h2 {
  font-size: 3.6rem !important;
  color: white !important;
  font-family: "Outfit", sans-serif !important;
  text-align: left !important;
}
.PDU_RIGHT h3 {
  font-size: 1.3rem !important;
  color: white !important;
  font-family: "Outfit", sans-serif;
  text-align: left !important;
  font-weight: 400;
}
.PDU_RIGHT h5 {
  font-size: 1.3rem !important;
  color: white !important;
  font-family: "Outfit", sans-serif;
  text-align: left !important;
}
.PDU_RIGHT h6 {
  font-size: 0.9rem !important;
  color: white !important;
  font-family: "Outfit", sans-serif;
  text-align: left !important;
  font-weight: 400;
  letter-spacing: 1px;
}
.PDU_RIGHT p {
  font-size: 1.7rem !important;
  color: white !important;
  font-family: "Outfit", sans-serif;
  text-align: left !important;
}
.PDU_RIGHT a {
  font-size: 1rem;
  color: white;
  font-weight: 400;
  padding: 0.7rem 1rem;
  border-radius: 0.7rem;
  background: linear-gradient(to right, #3a2e00, #e0c04e);
  transition: all 0.3s ease;
  font-family: "Outfit", sans-serif;
  letter-spacing: 2px;
}
.PDU_RIGHT a:hover {
  opacity: 0.9;
  transform: scale(1.05);
}

/* BIG BOX WITH IMAGES AND MORE INFORMATION */
.BIGBOX {
  padding: 0.2rem 0;
  align-items: center;
  overflow-x: hidden !important;
}
.BIGBOX .BIGBI {
  background: fixed linear-gradient(to top, #f4fcff, #f3fff3, #fffeea);
}
.BIGBOX .BIGBI {
  padding: 0.5rem 1rem;
  margin: 5px 0;
  overflow: hidden !important;
  border-radius: 1rem;
  transition: all 2s cubic-bezier(0.23, 1, 0.32, 1);
  box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 5px 0px,
    rgba(0, 0, 0, 0.1) 0px 0px 1px 0px;
}
.BIGBOX .BIGBI h5 {
  padding-bottom: 2.5px;
  font-size: 15px !important;
  font-family: "Quicksand", sans-serif !important;
  font-weight: 900 !important;
  margin-top: 5px;
  transition: all 400ms ease-in;
}
.BIGBOX .BIGBI h6 {
  padding-bottom: 2.5px;
  font-size: 12px !important;
  font-family: "Quicksand", sans-serif !important;
  font-weight: 900 !important;
  transition: all 400ms ease-in;
}
.BIGBOX .BIGBI p {
  padding-bottom: 2.5px;
  font-size: 13px !important;
  font-family: "Quicksand", sans-serif !important;
  font-weight: 500 !important;
  color: #95934a !important;
}
.BIGBOX .BIGBI:hover {
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
  transform: scale(0.95);
}
.BIGBOX .BIGBI a {
  width: min-content;
  color: white;
  font-size: 14px;
  font-weight: 900;
  padding: 0.5rem 1rem;
  background: fixed linear-gradient(to right, #3f7b9563, #42953f63);
  border-radius: 0.5rem;
  transition: all 900ms ease-in-out;
}
.BIGBOX .BIGBI a:hover {
  background: fixed linear-gradient(to right, #95823f, #20b78c);
  padding: 0.5rem 2rem;
  border-left: 4px solid gold;
}
.BIGBOX .BIGBI:hover h6 {
  color: #6c6b1d;
}
.BIGBOX .BIGBI button {
  border: none;
  cursor: pointer;
  margin-top: 1rem;
  background: fixed linear-gradient(to right, #31573e, #1b3947);
  color: white;
  font-size: 9px;
  padding: 0.25rem 0.5rem;
  border-radius: 2rem;
}
.BIGBOX .BIGBI button:hover {
  background: #19ac56;
}
.BIGBOX .BIGBI a.BUTTON {
  all: unset;
  display: inline-block;
  border: none;
  cursor: pointer;
  margin-top: 1rem !important;
  background: fixed linear-gradient(to right, #31573e, #1b3947);
  color: white;
  font-size: 9px;
  padding: 0.25rem 0.5rem;
  border-radius: 2rem;
}
.BIGBOX .BIGBI a.BUTTON:hover {
  background: #19ac56;
}

/* PROMOTION BOX WITH IMAGES AND MORE INFORMATION */
.PROMOBOX {
  padding: 2rem 0;
  overflow: hidden !important;
  justify-content: space-between;
}
.PROMOTION {
  overflow: hidden !important;
  box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
  border-radius: 1rem;
  background: fixed linear-gradient(220deg, #f3fbff, #ecffeb, #fff9ee);
  margin: 5px 0;
  transition: all 700ms ease-in;
}
.PROMOTION:hover {
  box-shadow: rgba(255, 253, 253, 0.1) 0px 10px 50px;
  transform: scale(0.95);
  background: fixed linear-gradient(220deg, #f3e2ff, #fdffd1, #d8e4ff);
}
.PROMIM {
  overflow: hidden !important;
}
.PROMIM .LOGO {
  position: absolute;
  top: 0;
  left: 0;
  border-bottom-right-radius: 5rem;
  background: fixed linear-gradient(30deg, #a49e61, #fffabf, #a49e61);
  padding: 0.5rem 0.5rem;
  overflow: hidden !important;
}
.PROMOTION .PROMIN {
  text-align: left !important;
}
.PROMOTION .PROMIN h6 {
  font-size: 12px !important;
  color: #b2bc98 !important;
  font-family: Arial, Helvetica, sans-serif;
}
.PROMOTION .PROMIN h3 {
  font-size: 20px !important;
  color: #ba9251 !important;
}
.PROMOTION .TAG h6 span {
  color: #82873f !important;
}
.PROMOTION .PROA {
  padding-top: 7.5px;
  margin-top: 5px;
}
.PROMOTION .PROA a {
  font-size: 12px !important;
  font-weight: 900;
  padding: 5px 1rem;
  border-radius: 10px 45px 10px 10px;
  background: #faffa2;
  color: #61642f;
  transition: all 900ms ease-in;
}
.PROMOTION:hover a {
  animation: proa 900ms linear infinite;
}
@keyframes proa {
  0% {
    background-color: #c0fff3;
    opacity: 0.2;
  }
  50% {
    background-color: #fff5bd;
    opacity: 1;
    letter-spacing: 1px;
  }
  100% {
    background-color: #b6ffde;
    opacity: 0.5;
  }
}
.PROMOTION .COPYRIGHT {
  font-size: 9px !important;
  font-weight: 900;
  color: #d5d5d5;
  position: absolute;
  bottom: 5px;
  right: 5px;
}

/* BLOG BOX FOR READERS AND VIEWERS */
.BLOGS {
  display: flex;
  flex-direction: row !important;
  gap: 1.5rem;
  z-index: 1;
  padding: 0rem 5rem 2rem;
  align-items: center;
  justify-content: center;
}
.BLOGS .BLOGIN {
  width: 400px;
  height: 500px;
  box-sizing: border-box;
  overflow: hidden;
  background: linear-gradient(to top, #0e3f29 0%, #337c68 15%, #75ffea 100%);
  border-radius: 1rem;
  overflow: hidden;
}
.BLOGS .BLOGIN .CONTENT {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  justify-content: space-between;
}
.BLOGS .BLOGIN .BLOGIMG img {
  width: 100%;
  height: 180px !important;
  object-fit: cover;
}
.BLOGS .BLOGIN .LOGO img {
  width: 5rem;
  height: 5rem;
  position: absolute;
  bottom: -35px;
  right: 39%;
}
.BLOGS .BLOGIN {
  box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px,
    rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
  transition: all 400ms ease-in;
}
.BLOGS .BLOGIN:hover {
  transform: translateY(-10px) scale(0.96);
}
.BLOGS .BLOGIN h5 {
  font-size: 23px !important;
  color: var(--hxb) !important;
  padding-bottom: 5px;
}
.BLOGS .BLOGSS p {
  font-size: 13px !important;
  color: var(--hxb) !important;
  padding-bottom: 5px;
}
.BLOGS .AUTHOR p {
  font-size: 13px !important;
  font-weight: bold;
  color: var(--hxb) !important;
  padding-bottom: 5px;
}
.BLOGS .BLOA a {
  padding: 0.5rem 1rem;
  width: 100%;
  color: white;
  font-size: 18px;
  font-weight: 900;
  transition: all 900ms linear;
}
.BLOGS .BLOA a:hover {
  color: white;
  padding: 0.5rem 2rem;
  width: max-content;
  text-align: center;
  background: fixed #8a754265;
  letter-spacing: 5px;
  border-radius: 1rem;
}

/* BADGE BOX FOR READERS AND VIEWERS */
@keyframes badgez {
  0% {
    background-color: #46bd7e;
  }
  50% {
    background-color: #829b38;
  }
  100% {
    background-color: #c07738;
  }
}
.BADGE::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 0.25rem;
  height: 5rem;
  background-color: #3498db;
  animation: badgez 900ms linear infinite;
  border-radius: 1rem;
}
.BADGE {
  padding: 0.5rem;
  border: 0.5px solid #eaeaea;
  border-radius: 1rem;
  margin-bottom: 10px;
  transition: all 200ms ease;
  box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px,
    rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
}
.BADGE .ICON {
  flex-basis: 15%;
  padding: 0.5rem;
}
.BADGE .ICON img {
  border-radius: 0.5rem;
}
.BADGE .INFO {
  flex-basis: 85%;
  padding: 0.5rem;
}
.BADGE .INFO p {
  font-size: 14px !important;
  color: #a2a4a5 !important;
  padding-top: 10px;
}
.BADGE:hover {
  border: 1px solid rgb(175, 212, 121);
  box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px,
    rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
  transform: scale(0.99);
}

/* ------------------------------------------------------------------------------------------------------------ */
/* -----------------------------------------------------DD----------------------------------------------------- */
/* -------------------------------------------------DDDDDDDDDD------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------ */
/* AVIOR DETAILS CLASS -------------------------------------------------------------------------------------------- */
.AVIOR .COUNTRIES {
  display: inline-flex;
  padding: 1rem 1rem;
  border-radius: 1rem;
  background: fixed linear-gradient(45deg, #ebffb5, #bdffe9);
  margin-bottom: 1rem;
}
.AVIOR .COUNTRIES img {
  width: 15px;
}
.AVIOR .COUNTRIES button {
  display: inline-flex;
  cursor: pointer;
  padding: 7px;
  border: 1px solid #e3e3e3;
  border-radius: 10px;
  margin-bottom: 10px;
  margin-right: 10px;
  background: linear-gradient(to right, #fffbe1, #fffbd9);
}
.AVIOR .COUNTRIES .PIN {
  padding: 2.5px 7.5px;
  text-wrap: nowrap !important;
}

@keyframes detailz {
  0% {
    opacity: 0;
    transform: translateX(25px);
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}
.DETAILZ {
  animation: detailz 900ms linear forwards;
}
.DETAILZ {
  width: 100%;
  border: 1px solid #ffffff;
  background: #ffffff !important;
  border-radius: 1rem;
  padding: 0.25rem;
  margin-bottom: 10px;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
  transition: all 2s ease-in-out;
}
.DETAILZ:hover {
  box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 50px;
  border: 1px solid #efffef;
}
.DETAILZ .CIS {
  padding: 0.25rem;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.DETAILZ .CIS .PP {
  padding: 0.25rem;
}
.DETAILZ .CIS .PPZ {
  padding: 0.5rem 0.5rem 0.25rem 0.25rem;
}
.DETAILZ .CIS .FX10 {
  flex-basis: 10%;
}
.DETAILZ .CIS .FX20 {
  flex-basis: 20%;
}
.DETAILZ .CIS .FX70 {
  flex-basis: 70%;
}
.DETAILZ .CIS .DF4 {
  flex-basis: 40%;
}
.DETAILZ .CIS .DF6 {
  flex-basis: 60%;
}
.DETAILZ .CIS .DFI3 {
  flex-basis: 32.3333333%;
}

.DETAILZ .CIS .DF5X4 {
  flex-basis: 50%;
}
.DETAILZ .CIS .DF5X6 {
  flex-basis: 50%;
}

.CIS:hover {
  background: fixed linear-gradient(to right, #ffffff, #b1ffe4);
  border-radius: 1rem;
}
.DETAILZ:hover .BOOTH {
  background: linear-gradient(220deg, #00395d, #54ff90);
  letter-spacing: 2px;
}
.DETAILZ:hover .BOOTH h2 {
  color: #cbffe7;
  text-shadow: 2px 2px #87878728;
}
.DETAILZ:hover .BOOTH h2 span {
  color: #cbffe7;
  text-shadow: 2px 2px #87878728;
}
.DETAILZ .BOOTH {
  background: #e0e0e0;
  color: #0ba598;
  border-radius: 10px;
  padding: 0.5rem 0.5rem;
}
.DETAILZ .BOOTH span {
  color: #0f776e;
}
.DETAILZ .COMPANY {
  padding: 0.5rem;
}
.DETAILZ .COMPANY span {
  display: none;
  font-size: 9px !important;
  color: #c2c2c2 !important;
}

@keyframes status {
  0% {
    color: #bbffa4;
    font-weight: 400;
  }
  100% {
    color: #ffff00;
    font-weight: 900;
  }
}
.DETAILZ .COMPANY .STATUS h4 {
  color: #99ff00 !important;
  font-size: 20px !important;
  animation: status 900ms linear infinite;
}
.DETAILZ .COMPANY .NA h4 {
  color: #ff540b !important;
}
.DETAILZ h2 {
  font-size: 2rem;
  font-family: "Abril Fatface", serif;
}
.DETAILZ .COMPANY h5 {
  font-size: 14px !important;
  font-weight: 900;
  color: #69592f !important;
}
.DETAILZ .COMPANY h6 {
  font-size: 13px !important;
  font-weight: 900;
  color: #5a9350 !important;
}

.DETAILZ a {
  font-size: 9px !important;
  font-weight: 900;
  color: #feffff;
  border-radius: 1rem;
  padding: 9px 9px;
  background: #074864;
  transition: all 200ms ease-in;
}
.DETAILZ a:hover {
  background: #ffd900;
  color: #38360e;
}
.DETAILZ i {
  font-size: 9px;
  color: #001d29;
  text-align: center;
  border-radius: 1rem;
  padding: 2px 10px;
  background: #ffb649;
}
.DETAILZ .CONTACT {
  text-align: center;
}
.DETAILZ .CIN {
  padding: 0.5rem 0.5rem;
}
.DETAILZ .CIN p {
  font-size: 12px !important;
  font-weight: 500;
  color: #383636 !important;
}

@media (max-width: 700px) {
  .DETAILZ .COMPANY span {
    display: block;
  }
  .DETAILZ .BOOTH {
    padding: 2rem 0.5rem;
    font-size: 12px !important;
  }
  .DETAILZ .CIS {
    text-align: left;
  }
  .DETAILZ .CIS .DF5X4 {
    flex-basis: 40%;
  }
  .DETAILZ .CIS .DF5X6 {
    flex-basis: 60%;
  }
  .DETAILZ .COMPANY h5 {
    font-size: 11px !important;
  }
  .DETAILZ a {
    font-size: 7px !important;
  }
  .DETAILZ .DF3 {
    margin-bottom: 0.5rem;
  }
}

/* FOR MAP DETAILS ----------------------- MAP */
/* FOR MAP DETAILS ----------------------- MAP */
/* FOR MAP DETAILS ----------------------- MAP */
/* FOR MAP DETAILS ----------------------- MAP */
.MAPTITLE h2 {
  font-size: 5rem !important;
  font-weight: 400;
  padding: 1rem 0;
  font-family: "Abril Fatface", serif;
  color: #d4e2b5;
}
.MPIC {
  padding: 1rem 1rem;
  border-radius: 1rem;
  margin: 10px 2.5px;
  box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, rgba(0, 0, 0, 0.07) 0px 2px 4px,
    rgba(0, 0, 0, 0.07) 0px 4px 8px, rgba(0, 0, 0, 0.07) 0px 8px 16px,
    rgba(0, 0, 0, 0.07) 0px 16px 32px, rgba(0, 0, 0, 0.07) 0px 32px 64px;
}
.MINFO {
  padding: 1rem 1rem;
  border-radius: 1rem;
  margin: 10px 2.5px;
  background: #ffffe1;
}
.MINFO h3 {
  padding: 14px 0;
  font-size: 2rem !important;
  font-weight: 900 !important;
  font-family: "Outfit", sans-serif;
  color: #7d743e;
}
.AVIOR .MCLICK {
  display: inline-flex;
}
.AVIOR .MCLICK img {
  width: 15px;
}
.AVIOR .MCLICK button {
  display: inline-flex;
  cursor: pointer;
  padding: 7px;
  border: 1px solid #e3e3e3;
  border-radius: 10px;
  margin-bottom: 10px;
  margin-right: 10px;
  background: linear-gradient(to right, #fffbe1, #fffbd9);
  transition: all 200ms linear;
}
.AVIOR .MCLICK button:hover {
  background: linear-gradient(220deg, #6d6800, #3e5932);
  color: #fffea7;
}
.AVIOR .MCLICK .MPIN {
  padding: 2.5px 7.5px;
  text-wrap: nowrap !important;
}
.AVIOR .MTAGS {
  padding: 0.25rem 0;
}
.AVIOR .MTAGS .MTAG {
  padding: 10px 1rem;
  color: #ebf9aa;
  margin-right: 10px;
  margin-bottom: 5px;
  border-radius: 5rem;
  background: #778247;
}

.MHR {
  padding: 1rem 2rem;
}
.MHR hr {
  border: 1px solid #ececec;
  border-radius: 1rem;
}

.MCOMP {
  padding: 0.5rem 0.5rem;
  border-radius: 1rem;
  margin-top: 0.25rem;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 50px;
}
.MAPCOM {
  padding: 9px;
  border-radius: 10px;
  border: 1px solid #fbfbfb;
  background: fixed linear-gradient(220deg, #fffff2, #efffff);
  margin: 5px 1px;
  transition: all 500ms ease-in;
}
.MAPCOM .MCIS img {
  border-radius: 5px;
}
.MAPINN {
  padding: 2px 10px;
}
.MAPINN h6 {
  font-size: 12px !important;
  color: #6a6e2d;
  padding-bottom: 5px;
}
.MAPINN h6 span {
  font-size: 16px !important;
  color: #247b5b;
}
.MAPINN p {
  font-size: 11px !important;
  color: #2c7880;
  font-weight: 900;
}
.MAPCOM .MHIDE {
  padding: 15px 7.5px;
}
.MAPCOM .MHIDE p {
  font-size: 12px !important;
  font-weight: 500 !important;
  color: #5f5454;
}
.MAPCOM:hover {
  transform: scale(0.95);
  background: #d9ffe4;
  box-shadow: rgba(17, 17, 26, 0.05) 0px 4px 16px,
    rgba(17, 17, 26, 0.05) 0px 8px 32px;
}
.MAPCOM:hover .MAPINN h6 {
  color: #00a058;
}
.MAPCOM:hover .MBOOTH h6 {
  color: #927537;
}

@keyframes mapcom {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.MAPCOM {
  animation: mapcom 900ms linear;
}

/* ------------------------------------------------------------------------------------------------------------ */
/* -----------------------------------------------------FF----------------------------------------------------- */
/* -------------------------------------------------FFFFFFFFFFF------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------ */
/* AVIOR FLEX CLASS -------------------------------------------------------------------------------------------- */

.FZF {
  flex-wrap: wrap;
  align-content: space-between;
  justify-content: space-between;
  align-items: center;
}
.FC {
  display: flex;
  flex-direction: column !important;
}

.FE {
  display: flex;
  flex-direction: row !important;
}
.FF {
  display: flex;
  flex-direction: row !important;
}

.F8 {
  flex-basis: 78%;
}
.F7 {
  flex-basis: 69%;
}
.F6 {
  flex-basis: 58%;
}
.F5 {
  flex-basis: 49.5%;
}
.F4 {
  flex-basis: 38%;
}
.F3 {
  flex-basis: 29.5%;
}
.F2 {
  flex-basis: 18%;
}
.F0 {
  flex-basis: auto;
}

.FI {
  flex-basis: content;
}
.FFI {
  flex-basis: 20px;
}
.FFK {
  flex-basis: 50px;
}

.F2F5 {
  flex-basis: 24%;
}
.F3F5 {
  flex-basis: 32%;
}
.F3F100 {
  flex-basis: 32.5%;
}

.F15 {
  flex-basis: 15%;
}
.F85 {
  flex-basis: 85%;
}
.F55 {
  flex-basis: 54.5%;
}
.F45 {
  flex-basis: 44.5%;
}

/* FORM CLASSES */
.REGISTER {
  align-items: center;
}
.REGISTER {
  background: linear-gradient(150deg, #4d6336, #0d434d, #323f04, #0c3a11);
}
.REGISTER h2 {
  font-size: 10rem !important;
  color: #3affbd;
  font-family: "Abril Fatface", serif;
}
.REGISTER h5 {
  font-size: 1.5rem;
  color: #1cff99;
  font-weight: 600;
  padding-bottom: 1rem;
}
.REGISTER p {
  font-size: 0.75rem;
  color: white;
  font-weight: 600;
}
.REGISTER img {
  border-radius: 1rem;
}

.RFORM fieldset {
  padding: 10px 10px;
  margin: 5px 2px;
  border: 1px solid #106663;
  border-radius: 5px;
  color: white;
}
.RFORM fieldset:hover {
  border: 1px solid rgb(0, 255, 149);
  color: #1cff99;
  font-weight: 700;
}
.RFORM fieldset input {
  padding: 5px 5px;
  border-radius: 16px;
  background: linear-gradient(to right, cyan, white);
}
.RFORM fieldset input {
  border: none;
  outline: none;
  width: max-content;
}
.RFORM fieldset input[type="text"]:focus {
  border: 1px solid #1e3e232f;
  color: rgb(9, 103, 61);
}
.RFORM legend {
  font-size: 12px;
  padding: 2px 10px;
}
.RFORM fieldset select {
  padding: 7px 5px;
  border-radius: 10px;
  background: linear-gradient(to right, cyan, white);
}
.RFORM fieldset select option {
  font-size: 12px;
  color: #757527;
  padding: 10px 5px;
  border-radius: 10px;
  background: linear-gradient(to right, cyan, white);
  font-weight: 500;
}
.RFORM fieldset select[option]:focus {
  border: 1px solid #1e3e232f;
  color: rgb(9, 103, 61);
}
.RFORM .btp {
  padding: 10px 0px;
}
.RFORM .btp i {
  font-size: 12px;
  color: cyan;
}
.RFORM .btp button {
  padding: 10px 50px;
  border-radius: 7px;
  background: linear-gradient(to right, rgb(0, 0, 103), rgb(0, 40, 86));
  transition: all 400ms ease-in;
}
.RFORM .btp button:hover {
  padding: 10px 50px;
  background: linear-gradient(to right, rgb(0, 245, 208), rgb(0, 255, 123));
}
.RFORM .btp button {
  color: white;
  border: 10px;
}
.RFORM h6 {
  font-size: 9px;
  color: #808b40;
}

/* ------------------------------------------------------------------------------------------------------------ */
/* -----------------------------------------------------II----------------------------------------------------- */
/* -------------------------------------------------IIIIIIIIII------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------ */
/* AVIOR IMAGE CLASS -------------------------------------------------------------------------------------------- */
.IMA {
  width: 100%;
  overflow: hidden !important;
  pointer-events: none;
}
.IMA img {
  width: 100%;
  display: block;
  object-fit: cover;
}
.IMAFC {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* FOR MAP PART */
.MAPA img {
  transition: all 700ms ease-in;
}
.MAPA:hover img {
  filter: brightness(1.35);
  transform: scale(0.975);
}
@keyframes youtube {
  0%,
  100% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(360deg);
    background: white;
    border: 2px solid #a4a6aa;
    color: #143234;
  }
}
.YOUTUBE h5 {
  position: absolute;
  top: 20rem;
  left: 42rem;
  animation: youtube 5200ms linear infinite;
  font-size: 0.85rem !important;
}
.YOUTUBE h5 {
  box-shadow: #10847f 0px 0px 0px 3px, #16fe01 0px 0px 0px 6px,
    #ffd501 0px 0px 0px 9px, #ff4d01 0px 0px 0px 12px, #00fff2 0px 0px 0px 15px;
  padding: 0.65rem 0.85rem;
  border-radius: 50%;
  border: 2px solid white;
  color: white;
}
@media (max-width: 700px) {
  .YOUTUBE h5 {
    position: absolute;
    top: 4.5rem;
    left: 12.5rem;
    transform: translate(-50%, -50%);
  }
}

/* ------------------------------------------------------------------------------------------------------------ */
/* -----------------------------------------------------LL----------------------------------------------------- */
/* -------------------------------------------------LLLLLLLLLLL------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------ */
/* AVIOR LOGO MOTION CLASS -------------------------------------------------------------------------------------------- */
@keyframes loger {
  0% {
    opacity: 0.3;
    transform: translateX(-20%);
  }
  40% {
    opacity: 0.7;
    transform: translateX(-18%);
  }
  60% {
    opacity: 1;
    transform: translateX(-7%);
  }
  80% {
    opacity: 0.5;
    transform: translateX(-3%);
  }
  100% {
    opacity: 0.2;
    transform: translateX(-2%);
  }
}
.LOGER {
  animation: loger 1s linear infinite;
  animation-duration: 3s;
  transition: all 900ms ease-in-out;
}
@keyframes logel {
  0% {
    opacity: 0.3;
    transform: translateX(-2%);
  }
  40% {
    opacity: 0.7;
    transform: translateX(-5%);
  }
  60% {
    opacity: 1;
    transform: translateX(-13%);
  }
  80% {
    opacity: 0.5;
    transform: translateX(-18%);
  }
  100% {
    opacity: 0.1;
    transform: translateX(-20%);
  }
}
.LOGEL {
  animation: logel 1s linear infinite;
  animation-duration: 3s;
  transition: all 900ms ease-in-out;
}
/* ANIMATION */
.LOGOZ {
  padding: 0.5rem 2rem;
  overflow: hidden !important;
  width: min-content;
}
.LOGOZ .EQUA img {
  width: 3rem;
  height: auto;
  border-radius: 1rem;
  margin: 15px;
  overflow: hidden !important;
}
.LOGOZ .RECT img {
  width: 5rem;
  height: auto;
  border-radius: 1rem;
  margin: 15px;
  overflow: hidden !important;
}

/* ------------------------------------------------------------------------------------------------------------ */
/* -----------------------------------------------------MM----------------------------------------------------- */
/* -------------------------------------------------MMMMMMMMMM------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------ */
/* AVIOR MAP CLASS -------------------------------------------------------------------------------------------- */

/* ------------------------------------------------------------------------------------------------------------ */
/* -----------------------------------------------------QQ----------------------------------------------------- */
/* -------------------------------------------------QQQQQQQQQQQ------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------ */
/* AVIOR QUOTE CLASS -------------------------------------------------------------------------------------------- */

/* QUOTE CLASS */
.QUOTE {
  display: inline-flex;
}
.QUOTE .QIC {
  flex-basis: 50px;
}
.QUOTE .QIC h5 {
  font-size: 70px !important;
  color: #b8c05b !important;
}
.QUOTE .QIN {
  flex-basis: 90%;
  padding: 1rem 0;
}
.QUOTE .QIN h5 {
  font-size: 16px !important;
  color: #82773c !important;
}

/* ------------------------------------------------------------------------------------------------------------ */
/* -----------------------------------------------------PP----------------------------------------------------- */
/* -------------------------------------------------PPPPPPPPPP------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------ */
/* AVIOR PADDING CLASS ---------------------------------------------------------------------------------------- */

.PA {
  padding: 5rem 5rem;
}
.PS {
  padding: 2rem 4rem;
}
.PI {
  padding: 0.2rem 0.5rem;
}
.PT {
  padding: 0.5rem 0;
}
.PTX {
  padding: 0rem 1rem;
}

.PT1D3 {
  padding-top: 1.3rem !important;
}
.PT1D2 {
  padding-top: 1.1rem !important;
}
.PT3 {
  padding-top: 3rem !important;
}
.PT5 {
  padding-top: 5rem !important;
}
.PB1 {
  padding-bottom: 1rem !important;
}

.PLR {
  padding: 0rem 1rem;
}

.PX1 {
  padding: 1rem 1rem;
}
.PX2 {
  padding: 2rem 2rem;
}
.PX5 {
  padding: 5rem 5rem;
}

.PA2 {
  padding: 1.5rem 1rem 1rem;
}
.PH2 {
  padding: 2rem 1rem 2rem;
}

.P1 {
  padding: 1rem 1rem;
}
.PY {
  padding: 0.5rem 0.5rem;
}

/* ------------------------------------------------------------------------------------------------------------ */
/* -----------------------------------------------------TT----------------------------------------------------- */
/* -------------------------------------------------TTTTTTTTTTT------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------ */
/* AVIOR TAG CLASS -------------------------------------------------------------------------------------------- */

.TTGREEN span {
  padding: 0.25rem 1rem;
  font-size: 1rem;
  font-weight: 700;
  color: #649d62;
  border-radius: 2rem;
  background: fixed linear-gradient(to right, #d2f7d1, #edffba);
}

/* ------------------------------------------------------------------------------------------------------------ */
/* -----------------------------------------------------TT----------------------------------------------------- */
/* -------------------------------------------------TTTTTTTTTTT------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------ */
/* AVIOR TEXT CLASS -------------------------------------------------------------------------------------------- */

.AVIOR .TEZ h2 {
  font-size: 60px;
  color: #f5ff9e00;
  font-family: "Abril Fatface", serif;
}
.AVIOR .TEZ h3 {
  font-size: 45px;
  color: var(--tezh3);
  font-family: "Outfit", sans-serif;
}
.AVIOR .TEZ h4 {
  font-size: 28px;
  color: var(--tezh4);
  font-family: "Outfit", sans-serif;
}
.AVIOR .TEZ h5 {
  font-size: 22px;
  color: var(--tezh5);
  font-family: "Outfit", sans-serif;
}
.AVIOR .TEZ h6 {
  font-size: 2rem;
  color: var(--tezh6);
  font-family: "Outfit", sans-serif;
}
.AVIOR .TEZ p {
  font-size: 16px;
  color: var(--tezp);
  font-family: "Outfit", sans-serif;
}
.AVIOR .TEZ .HEADDER {
  font-size: 2rem;
  color: var(--texh6);
  font-family: "Outfit", sans-serif;
  font-weight: 900;
}

.AVIOR .TEZ h3 span {
  color: var(--texh3);
}
.AVIOR .TEZ h4 span {
  color: var(--texh4);
}
.AVIOR .TEZ h5 span {
  color: var(--texh5);
}
.AVIOR .TEZ h6 span {
  color: var(--texh6);
}
.AVIOR .TEZ p span {
  color: var(--texp);
}
.AVIOR .TEZ .HEADDER span {
  font-size: 2rem;
  color: #3da197;
  font-weight: 900;
}

/* BIG TEXT FOR WELCOME */
.AVIOR .TBIG span {
  font-size: 16rem;
  font-family: "Cinzel", serif;
  color: #f9ffda;
  transition: all 200ms ease-in-out;
}
.AVIOR:hover .TBIG span {
  color: #e3ffed;
  text-shadow: 5px 2px #97936f34;
  filter: blur(10);
}
.AVIOR .TTBIG span {
  font-size: 16rem;
  font-weight: 500;
  font-family: "Libre Baskerville", serif;
  color: #e9f0ee;
  text-shadow: 2px 2px #c3c3c39d;
  text-rendering: optimizeSpeed;
}
.AVIOR .TSS p {
  font-size: 14px;
  color: #dddddd;
  font-weight: 500;
}

.AVIOR .LIA h3 {
  font-size: 4rem;
  background: #fddf65;
  background: linear-gradient(to right, #fddf65 0%, #cf1512 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(2px 2px 2px #424242);
}
.AVIOR .LIW h3 {
  color: white !important;
  text-shadow: 2px 2px 6px #424242;
}

/* ROTATING ANIMATION */
@keyframes TANIM {
  0% {
    background-position: 0%;
  }
  100% {
    background-position: 200%;
  }
}
.AVIOR .TANIM {
  background: linear-gradient(220deg, #e6dd66, #ffc296, #a7ff81);
  background-size: 200%;
  background-clip: text;
  color: transparent;
  animation: TANIM 2s infinite;
}
.AVIOR .TTG {
  text-shadow: 1px 1px #ebffa344;
}

/* FOR TIMER */
.TIMEH h1 {
  font-size: 2rem;
  color: #48a69c !important;
  padding-bottom: 1rem;
}
.TIMEH h1 span {
  font-size: 2rem;
  color: #48a69c !important;
  padding-bottom: 1rem;
}
.TIMER span {
  font-size: 5rem;
  font-weight: 600;
  color: var(--tezss);
}
.TIMER .TIMIN {
  font-size: 2.5rem;
  color: #33504d;
}

/* ------------------------------------------------------------------------------------------------------------ */
/* -----------------------------------------------------TT----------------------------------------------------- */
/* -------------------------------------------------TTTTTTTTTTT------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------ */
/* AVIOR AGENDA PAGE CLASS ------------------------------------------------------------------------------------ */
.AGENDA .BB {
  border: 1px solid rgb(223, 223, 223);
  padding: 1rem 0.5rem;
  align-items: center;
}
.AGENDA .ENTER h2 {
  padding-bottom: 7px;
  color: #d8cc93;
  font-size: 10rem !important;
  font-family: "Abril Fatface", serif;
}
.AGENDA .ENTER h5 {
  padding-bottom: 7px;
  color: #257a64;
  font-size: 2rem !important;
  font-family: "Abril Fatface", serif;
}
.AGENDA .ENTER p {
  padding-bottom: 7px;
  color: #486a61;
  font-size: 0.95rem !important;
  font-weight: 900;
}
.AGENDA .ENTRE {
  border: 1px solid #f0f0f0;
  transition: all 900ms ease-in;
}
.AGENDA .ENTRE:hover {
  border: 1px solid #fff8cf;
  border-radius: 0.5rem;
  transform: scale(0.975);
  background: linear-gradient(150deg, #fff9f6, #f5ffe2, #ffefbd, #f6e5b2);
}
.AGENDA .ENTREZ {
  background: fixed linear-gradient(to right, #fffcf4, #fdfff6);
  border-radius: 1rem;
}
.AGENDA .ENTRE:hover .ENTREZ {
  background: fixed linear-gradient(to right, #ffefbd, #eedca7);
  border-radius: 1rem;
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}
.AGENDA .ENTRE h4 {
  font-size: 1.25rem !important;
  font-weight: 900;
  color: #006253;
  padding-bottom: 9px;
  font-family: "Outfit", sans-serif;
}
.AGENDA .ENTRE .TIME h6 {
  font-size: 1rem !important;
  font-weight: 900;
  color: #97a862;
  padding-top: 10px;
}
.AGENDA .ENTRE h6 {
  font-size: 0.85rem !important;
  font-weight: 900;
  color: #666433;
  padding-bottom: 5px;
}
.AGENDA .ENTRE p {
  font-size: 0.95rem !important;
  font-weight: 900;
  color: #335266;
}
.AGENDA .ENTRE .TAG {
  border-radius: 4rem;
  background: #5e613c;
  padding: 5px 15px;
  margin-right: 5px;
  margin-bottom: 5px;
}
.AGENDA .ENTRE .TAG p {
  font-size: 0.65rem !important;
  font-weight: 900;
  color: #ffffff;
}
.AGENDA .ENTRE a {
  font-size: 0.85rem;
  color: #008f61;
  font-weight: 900 !important;
  transition: all 900ms ease-in;
  border: 1px solid #b3c8a4;
  border-radius: 3rem;
  padding: 5px 10px;
}
.AGENDA .ENTRE a span {
  font-size: 0.75rem;
  color: #fff4d3;
}
.AGENDA .ENTRE a:hover {
  padding: 5px 15px;
  color: #6c603c;
  letter-spacing: 2px;
  border-radius: 2rem;
  background-color: #deff7b;
  border: none;
}
.AGENDA .ENTRE a:hover span {
  color: #134d60;
}

/* ------------------------------------------------------------------------------------------------------------ */
/* -----------------------------------------------------DD----------------------------------------------------- */
/* -------------------------------------------------TTTTTTTTTTT------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------ */
/* AVIOR DEFAULT CLASS ------------------------------------------------------------------------------------ */
.DEFAULT .IMA {
  width: 30%;
  margin: auto;
}
.DEFAULT .TIMEH h6 span {
  font-size: 7px !important;
  font-weight: 900 !important;
  letter-spacing: 4px !important;
}

/* ------------------------------------------------------------------------------------------------------------ */
/* -----------------------------------------------------FOOTER------------------------------------------------- */
/* -------------------------------------------------FOOTER IS HERE FOR YOU------------------------------------- */
/* ------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------ */
/* -----------------------------------------------------FOOTER------------------------------------------------- */
/* -------------------------------------------------FOOTER IS HERE FOR YOU------------------------------------- */
/* ------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------ */
/* -----------------------------------------------------FOOTER------------------------------------------------- */
/* -------------------------------------------------FOOTER IS HERE FOR YOU------------------------------------- */
/* ------------------------------------------------------------------------------------------------------------ */
/* AVIOR PADDING CLASS ---------------------------------------------------------------------------------------- */
footer {
  width: 100%;
  position: relative;
  background: linear-gradient(0deg, #439885, #083820, #439885);
  overflow: hidden !important;
}
footer .FP2 {
  padding: 2rem 4rem;
}
footer hr {
  border: 1px solid #4e6d51;
}

.IMGSOC {
  width: 3rem;
  height: 3rem;
}

footer .TOPZ {
  background: linear-gradient(to right, #ffffff, #f7fcff, #ffffff);
}
footer .MIDZ {
  padding: 0 3rem;
}
footer .LOGO {
  width: 70% !important;
  height: auto;
}
footer .PICT {
  width: 100% !important;
  height: auto;
}
footer h1 {
  color: var(--hxb);
  font-size: 2.8rem;
  letter-spacing: 2px;
  padding: 15px 0px;
}
footer h2 {
  color: var(--hxb) !important;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 1px;
}
footer h3 {
  color: var(--hxb) !important;
  font-weight: 600;
}
footer .MIDZ h4 {
  color: #d6d2b6 !important;
}
footer h5 {
  color: var(--hxb) !important;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 2px;
}
footer h6 {
  font-size: 18px !important;
  color: var(--hxb) !important;
  font-weight: 500;
  letter-spacing: 3px;
  word-spacing: 3px;
}
footer .MIDZ p {
  font-size: 11px !important;
  color: var(--hxb) !important;
}
footer .MIDZ .MIDZR {
  padding-left: 5rem;
  padding: 2rem;
}
footer image {
  width: 3rem;
  height: 5rem;
}
@media (max-width: 700px) {
  footer .MIDZ .MIDZR {
    padding: 2rem 1.5rem;
  }
  footer .FP2 {
    padding: 2rem 1rem;
  }
}

footer .LOWZ a {
  color: var(--hxb) !important;
  font-weight: 600;
  font-size: 20px;
  letter-spacing: 2px;
  padding-bottom: 1rem;
  transition: all 200ms ease-in;
}
footer .LOWZ a span {
  color: var(--hxb);
  transition: all 2s ease-out;
}
footer .LOWZ a:hover span {
  display: inline-flex;
  color: var(--hxb);
  font-size: 12px;
}
footer .LOWZ a:hover {
  color: var(--hxb) !important;
  letter-spacing: 2px;
  font-size: 22px !important;
}
footer .LOWZ h3 {
  color: var(--hxb) !important;
  padding-bottom: 5px;
  font-size: 3rem;
}

footer .COPZ a {
  font-size: 14px;
  font-weight: 600;
  color: var(--hxb);
  transition: all 900ms ease-in;
}
footer .COPZ a span {
  font-size: 12px;
  font-weight: 900;
  color: var(--hxb);
}
footer .COPZ a:hover {
  color: var(--hxb) !important;
  letter-spacing: 1px;
  font-size: 16px !important;
}

/* SEMINAR SECTION TABS */
.seminar-tabs {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #d6e5e1;
  border-radius: 20px;
  margin: 3rem auto;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}
.tab-button {
  background: transparent;
  color: #0c3f28;
  border: none;
  padding: 1.5rem 1.5rem;
  border-radius: 20px;
  cursor: pointer;
  font-family: "Outfit", sans-serif;
  font-weight: 700;
  font-size: 1.5rem;
  transition: all 0.3s ease;
  white-space: nowrap;
  flex: 1;
  text-align: center;
}
.tab-button:hover {
  color: #3a8470;
}
.tab-button.active {
  background: linear-gradient(to top, #1b5841, #54cfb6);
  color: white;
  box-shadow: 0 4px 15px rgba(88, 187, 171, 0.3);
  transform: translateY(-1px);
}

/* SEMINAR SECTION STYLES */
.seminar-day {
  display: none;
}

.seminar-day.active {
  display: block;
}

/* Grid layouts for different numbers of seminars */
.seminar-grid {
  display: grid;
  gap: 2rem;
  margin-bottom: 3rem;
}

/* 4 seminars layout (like day 27) */
.seminar-grid-4 {
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto;
}

.seminar-grid-4 .seminar-card:first-child {
  grid-column: 1 / -1;
  max-width: 1200px;
  margin: 0 auto;
}

/* 5 seminars layout (like day 29) */
.seminar-grid-5 {
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto auto;
}

.seminar-grid-5 .seminar-card:first-child {
  grid-column: 1 / -1;
  max-width: 1200px;
  margin: 0 auto;
}

.seminar-grid-5 .seminar-card:last-child {
  grid-column: 1 / -1;
  max-width: 1200px;
  margin: 0 auto;
}

/* Default grid for other counts */
.seminar-grid:not(.seminar-grid-4):not(.seminar-grid-5) {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

/* Seminar Card Styles */
.seminar-card {
  background: white;
  overflow: hidden;
  transition: all 0.3s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.seminar-card:hover {
  transform: translateY(-5px);
}

.seminar-card-link {
  text-decoration: none;
  color: inherit;
  height: 100%;
  display: block;
}

.card-image {
  position: relative;
  height: 600px;
  overflow: hidden;
  background: #f5f5f5;
}

.card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 100% 20%;
  transition: transform 0.3s ease;
}

.play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.9;
  transition: all 0.3s ease;
}

.seminar-card:hover .play-button {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.1);
}

.seminar-card:hover .card-image img {
  transform: scale(1.05);
}

.card-content {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-top: 10px;
}

.seminar-subtitle {
  font-size: 1.25rem;
  color: #3da197;
  font-family: "Outfit", sans-serif;
  font-weight: 500;
  margin-bottom: 0.5rem;
}

.seminar-title {
  text-align: left;
  margin: 0;
  padding: 0;
  font-size: 1.5rem;
  font-weight: 600;
  color: #0c3f28;
  font-family: "Outfit", sans-serif;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (min-width: 1025px) and (max-width: 1728px) {
  .card-image {
    height: 400px;
  }
}

/* END SEMINAR SECTION */