main {
  margin-top: 12em;
}

.wrapper {
  display: inline-block;
  filter: drop-shadow(2px 2px 7px rgba(255, 255, 0, 0.478));
}

.text-justify {
  text-align: justify;
}

.frame {
  background-color: #092783;
  color: #00c6ff;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  height: 100%;
  border-radius: 10px;
  padding: 4rem 4.5rem;
  font-size: 1.2rem;
  font-weight: 600;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  clip-path: shape(from 25.76px 11.26px, curve to calc(1.72% + 28.97px) 14.5px with calc(0% + 30px) 1px, curve to calc(5.17% + 26.9px) 21px with calc(3.45% + 27.93px) 28px, curve to calc(8.62% + 24.83px) 9.5px with calc(6.9% + 25.86px) 14px, curve to calc(12.07% + 22.76px) 3.5px with calc(10.34% + 23.79px) 5px, curve to calc(15.52% + 20.69px) 14px with calc(13.79% + 21.72px) 2px, curve to calc(18.97% + 18.62px) 17px with calc(17.24% + 19.66px) 26px, curve to calc(22.41% + 16.55px) 13.5px with calc(20.69% + 17.59px) 8px, curve to calc(25.86% + 14.48px) 10.5px with calc(24.14% + 15.52px) 19px, curve to calc(29.31% + 12.41px) 3.5px with calc(27.59% + 13.45px) 2px, curve to calc(32.76% + 10.34px) 15.5px with calc(31.03% + 11.38px) 5px, curve to calc(36.21% + 8.28px) 18px with calc(34.48% + 9.31px) 26px, curve to calc(39.66% + 6.21px) 14px with calc(37.93% + 7.24px) 10px, curve to calc(43.1% + 4.14px) 14px with calc(41.38% + 5.17px) 18px, curve to calc(46.55% + 2.07px) 13.5px with calc(44.83% + 3.1px) 10px, curve to calc(50% + 0px) 13.5px with calc(48.28% + 1.03px) 17px, curve to calc(53.45% + -2.07px) 16.5px with calc(51.72% + -1.03px) 10px, curve to calc(56.9% + -4.14px) 23.5px with calc(55.17% + -3.1px) 23px, curve to calc(60.34% + -6.21px) 25.5px with calc(58.62% + -5.17px) 24px, curve to calc(63.79% + -8.28px) 27px with calc(62.07% + -7.24px) 27px, curve to calc(67.24% + -10.34px) 16px with calc(65.52% + -9.31px) 27px, curve to calc(70.69% + -12.41px) 6px with calc(68.97% + -11.38px) 5px, curve to calc(74.14% + -14.48px) 16px with calc(72.41% + -13.45px) 7px, curve to calc(77.59% + -16.55px) 25px with calc(75.86% + -15.52px) 25px, curve to calc(81.03% + -18.62px) 18px with calc(79.31% + -17.59px) 25px, curve to calc(84.48% + -20.69px) 16px with calc(82.76% + -19.66px) 11px, curve to calc(87.93% + -22.76px) 25.5px with calc(86.21% + -21.72px) 21px, curve to calc(91.38% + -24.83px) 26.5px with calc(89.66% + -23.79px) 30px, curve to calc(94.83% + -26.9px) 23px with calc(93.1% + -25.86px) 23px, curve to calc(98.28% + -28.97px) 18.5px with calc(96.55% + -27.93px) 23px, curve to calc(100% - 26.11px) 18.11px with calc(100% - 30px) 14px, curve to calc(100% - 14.11px) 26.11px with calc(100% - 22.22px) 22.22px, curve to calc(100% - 3.5px) calc(2.63% + 28.42px) with calc(100% - 6px) calc(0% + 30px), curve to calc(100% - 6.5px) calc(7.89% + 25.26px) with calc(100% - 1px) calc(5.26% + 26.84px), curve to calc(100% - 8px) calc(13.16% + 22.11px) with calc(100% - 12px) calc(10.53% + 23.68px), curve to calc(100% - 3.5px) calc(18.42% + 18.95px) with calc(100% - 4px) calc(15.79% + 20.53px), curve to calc(100% - 10.5px) calc(23.68% + 15.79px) with calc(100% - 3px) calc(21.05% + 17.37px), curve to calc(100% - 12px) calc(28.95% + 12.63px) with calc(100% - 18px) calc(26.32% + 14.21px), curve to calc(100% - 12.5px) calc(34.21% + 9.47px) with calc(100% - 6px) calc(31.58% + 11.05px), curve to calc(100% - 14px) calc(39.47% + 6.32px) with calc(100% - 19px) calc(36.84% + 7.89px), curve to calc(100% - 11px) calc(44.74% + 3.16px) with calc(100% - 9px) calc(42.11% + 4.74px), curve to calc(100% - 13px) calc(50% + 0.00px) with calc(100% - 13px) calc(47.37% + 1.58px), curve to calc(100% - 9px) calc(55.26% + -3.16px) with calc(100% - 13px) calc(52.63% + -1.58px), curve to calc(100% - 13.5px) calc(60.53% + -6.32px) with calc(100% - 5px) calc(57.89% + -4.74px), curve to calc(100% - 13.5px) calc(65.79% + -9.47px) with calc(100% - 22px) calc(63.16% + -7.89px), curve to calc(100% - 7px) calc(71.05% + -12.63px) with calc(100% - 5px) calc(68.42% + -11.05px), curve to calc(100% - 7.5px) calc(76.32% + -15.79px) with calc(100% - 9px) calc(73.68% + -14.21px), curve to calc(100% - 16px) calc(81.58% + -18.95px) with calc(100% - 6px) calc(78.95% + -17.37px), curve to calc(100% - 21.5px) calc(86.84% + -22.11px) with calc(100% - 26px) calc(84.21% + -20.53px), curve to calc(100% - 12px) calc(92.11% + -25.26px) with calc(100% - 17px) calc(89.47% + -23.68px), curve to calc(100% - 5.5px) calc(97.37% + -28.42px) with calc(100% - 7px) calc(94.74% + -26.84px), curve to calc(100% - 6.39px) calc(100% - 19.39px) with calc(100% - 4px) calc(100% - 30px), curve to calc(100% - 19.39px) calc(100% - 4.39px) with calc(100% - 8.79px) calc(100% - 8.79px), curve to calc(98.28% - 28.97px) calc(100% - 12px) with calc(100% - 30px) calc(100% - 0px), curve to calc(94.83% - 26.9px) calc(100% - 14px) with calc(96.55% - 27.93px) calc(100% - 24px), curve to calc(91.38% - 24.83px) calc(100% - 4.5px) with calc(93.1% - 25.86px) calc(100% - 4px), curve to calc(87.93% - 22.76px) calc(100% - 17.5px) with calc(89.66% - 23.79px) calc(100% - 5px), curve to calc(84.48% - 20.69px) calc(100% - 17.5px) with calc(86.21% - 21.72px) calc(100% - 30px), curve to calc(81.03% - 18.62px) calc(100% - 17px) with calc(82.76% - 19.66px) calc(100% - 5px), curve to calc(77.59% - 16.55px) calc(100% - 18px) with calc(79.31% - 17.59px) calc(100% - 29px), curve to calc(74.14% - 14.48px) calc(100% - 11.5px) with calc(75.86% - 15.52px) calc(100% - 7px), curve to calc(70.69% - 12.41px) calc(100% - 11.5px) with calc(72.41% - 13.45px) calc(100% - 16px), curve to calc(67.24% - 10.34px) calc(100% - 16.5px) with calc(68.97% - 11.38px) calc(100% - 7px), curve to calc(63.79% - 8.28px) calc(100% - 23px) with calc(65.52% - 9.31px) calc(100% - 26px), curve to calc(60.34% - 6.21px) calc(100% - 20.5px) with calc(62.07% - 7.24px) calc(100% - 20px), curve to calc(56.9% - 4.14px) calc(100% - 23px) with calc(58.62% - 5.17px) calc(100% - 21px), curve to calc(53.45% - 2.07px) calc(100% - 21.5px) with calc(55.17% - 3.1px) calc(100% - 25px), curve to calc(50% - 0px) calc(100% - 19.5px) with calc(51.72% - 1.03px) calc(100% - 18px), curve to calc(46.55% - -2.07px) calc(100% - 22.5px) with calc(48.28% - -1.03px) calc(100% - 21px), curve to calc(43.1% - -4.14px) calc(100% - 19.5px) with calc(44.83% - -3.1px) calc(100% - 24px), curve to calc(39.66% - -6.21px) calc(100% - 11px) with calc(41.38% - -5.17px) calc(100% - 15px), curve to calc(36.21% - -8.28px) calc(100% - 6px) with calc(37.93% - -7.24px) calc(100% - 7px), curve to calc(32.76% - -10.34px) calc(100% - 4px) with calc(34.48% - -9.31px) calc(100% - 5px), curve to calc(29.31% - -12.41px) calc(100% - 11.5px) with calc(31.03% - -11.38px) calc(100% - 3px), curve to calc(25.86% - -14.48px) calc(100% - 16px) with calc(27.59% - -13.45px) calc(100% - 20px), curve to calc(22.41% - -16.55px) calc(100% - 11.5px) with calc(24.14% - -15.52px) calc(100% - 12px), curve to calc(18.97% - -18.62px) calc(100% - 6.5px) with calc(20.69% - -17.59px) calc(100% - 11px), curve to calc(15.52% - -20.69px) calc(100% - 6px) with calc(17.24% - -19.66px) calc(100% - 2px), curve to calc(12.07% - -22.76px) calc(100% - 11.5px) with calc(13.79% - -21.72px) calc(100% - 10px), curve to calc(8.62% - -24.83px) calc(100% - 9.5px) with calc(10.34% - -23.79px) calc(100% - 13px), curve to calc(5.17% - -26.9px) calc(100% - 7px) with calc(6.9% - -25.86px) calc(100% - 6px), curve to calc(1.72% - -28.97px) calc(100% - 4.5px) with calc(3.45% - -27.93px) calc(100% - 8px), curve to 28.59px calc(100% - 14.09px) with 30px calc(100% - 1px), curve to 22.59px calc(100% - 28.59px) with 27.17px calc(100% - 27.17px), curve to 10px calc(97.37% - 28.42px) with 18px calc(100% - 30px), curve to 1.5px calc(92.11% - 25.26px) with 2px calc(94.74% - 26.84px), curve to 12.5px calc(86.84% - 22.11px) with 1px calc(89.47% - 23.68px), curve to 14.5px calc(81.58% - 18.95px) with 24px calc(84.21% - 20.53px), curve to 14px calc(76.32% - 15.79px) with 5px calc(78.95% - 17.37px), curve to 19.5px calc(71.05% - 12.63px) with 23px calc(73.68% - 14.21px), curve to 18px calc(65.79% - 9.47px) with 16px calc(68.42% - 11.05px), curve to 23px calc(60.53% - 6.32px) with 20px calc(63.16% - 7.89px), curve to 18.5px calc(55.26% - 3.16px) with 26px calc(57.89% - 4.74px), curve to 5.5px calc(50% - 0px) with 11px calc(52.63% - 1.58px), curve to 1px calc(44.74% - -3.16px) with 0px calc(47.37% - -1.58px), curve to 12.5px calc(39.47% - -6.32px) with 2px calc(42.11% - -4.74px), curve to 20px calc(34.21% - -9.47px) with 23px calc(36.84% - -7.89px), curve to 23.5px calc(28.95% - -12.63px) with 17px calc(31.58% - -11.05px), curve to 22px calc(23.68% - -15.79px) with 30px calc(26.32% - -14.21px), curve to 14px calc(18.42% - -18.95px) with 14px calc(21.05% - -17.37px), curve to 7.5px calc(13.16% - -22.11px) with 14px calc(15.79% - -20.53px), curve to 15px calc(7.89% - -25.26px) with 1px calc(10.53% - -23.68px), curve to 27.5px calc(2.63% - -28.42px) with 29px calc(5.26% - -26.84px), curve to 23.76px 25.76px with 26px 30px, curve to 25.76px 11.26px with 21.51px 21.51px);
  filter: drop-shadow(2px 5px 30px #00c6ff);
}

.list-style {
  list-style: none;
  padding-left: 0;
}

.list-style li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.5rem;
}

.list-style li::before {
  content: "■";
  position: absolute;
  left: 0;
  color: green;
  font-size: 1.5rem;
  top: -7px;
}

.publication-style {
  list-style: none;
  padding-left: 0;
}

.publication-style li {
  position: relative;
  padding-left: 1.85rem;
  margin-bottom: 0.5rem;
  /* margin-top: -0.2em; */
  line-height: 1.5;
}

.publication-style li::before {
  content: ">";
  position: absolute;
  left: 0;
  top: 1px;
  color: wheat;
  background-color: green;
  border-radius: 50%;
  width: 0.9em;
  height: 0.9em;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.5rem;
}


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

.step {
  border-radius: 12px;
  text-align: center;
  position: relative;
  animation: slideUp 0.6s ease both;
  width: 100%;
  height: 100%;
  perspective: 2000px;
  /* gives 3D depth */
  width: 280px;
  height: 250px;
  transform-style: preserve-3d;
  transition: transform 0.6s;
}

.flip-side {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border: 2px solid #0077ff;
  border-radius: 12px;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  transition: transform 0.8s;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
}

.flip-front {
  background-color: darkcyan;
  box-shadow: 3px 3px 10px rgba(19, 5, 147, 0.607);
  color: white;
  font-weight: 600;
  font-size: 1.1rem;
}

.flip-back {
  background: #f8fafc;
  box-shadow: 3px 3px 10px rgba(19, 5, 147, 0.607);
  color: #334155;
  transform: rotateY(180deg);
}

.step:hover .flip-front {
  transform: rotateX(180deg);
}

.step:hover .flip-back {
  transform: rotateX(360deg);
}

.step h3 {
  color: var(--primary-color);
  margin-bottom: 0.5rem;
}

.step p {
  font-size: 0.95rem;
}

.relative {
  position: relative;
  width: 100%;
  height: 100%;
  border: 2px solid #0077ff;
  border-radius: 12px;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
}

/* HTML: <div class="ribbon">Your text content</div> */
.ribbon {
  font-size: 28px;
  font-weight: bold;
  color: #fff;
}

.ribbon {
  --r: .4em;
  /* control the ribbon shape (the radius) */
  --c: #FA6900;

  position: absolute;
  top: 10px;
  left: calc(-1*var(--r));
  line-height: 1.8;
  padding: 0 .5em calc(2*var(--r));
  border-radius: var(--r) 0 0 var(--r);
  background:
    radial-gradient(100% 50% at left, var(--c) 98%, #0000 101%) 100% 0/.5lh calc(100% - 2*var(--r)),
    radial-gradient(100% 50% at right, #0005 98%, #0000 101%) 0 100%/var(--r) calc(2*var(--r)),
    conic-gradient(from 90deg at var(--r) calc(100% - 2*var(--r)), #0000 25%, var(--c) 0) 0 0/calc(101% - .5lh) 100%;
  background-repeat: no-repeat;
}

.prepare {
  transform: translate(-11%, 10%);
  max-width: 400px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  height: 100%;
  border-radius: 10px;
  padding: 4rem 2rem;
  font-size: 1.2rem;
  font-weight: 600;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

.bg-publication {
  background: linear-gradient(rgba(0, 128, 0, 0.877), rgba(0, 0, 255, 0.844));
  color: white;
  height: 100%;
  border-radius: 10px;
  padding: 4rem 4.5rem;
  font-size: 1.2rem;
  font-weight: 600;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

.bg-publication h3 {
  font-weight: 900;
  font-size: 1.5rem;
  text-shadow: 2px 2px 10px darkblue;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

@media screen and (max-width:768px) {
  .bg-publication {
    padding: 4rem 1.5rem;
  }

  .expecting-list-style {
    /* padding: auto; */
    padding-left: 0rem;
  }

  main {
    margin-top: 7em;
  }
}

@media screen and (max-width:992px) {
  main {
    margin-top: 6em;
  }
}

.a-z-style {
  background-color: #0077ff;
  color: white;
  font-weight: 600;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  transition: transform 0.8s;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  padding: 2em 3em;
}

.a-z-style:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
  background-color: darkslateblue;
  color: white;
  font-weight: 600;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  transition: transform 0.8s;
}

.btn-fee {
  max-width: 350px;
  background-color: #0077ff;
  color: white;
  font-weight: 600;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  transition: transform 0.8s;
  box-shadow: 2px 6px 12px rgba(10, 176, 162, 0.304);
  padding: 0.5em;
  margin: auto;
}

.faq-container {
  max-width: 700px;
  margin: auto;
  font-family: Arial;
}

.faq-item {
  border: 1px solid #ddd;
}

.faq-question {
  width: 100%;
  padding: 15px;
  font-size: 18px;
  font-weight: 600;
  border: none;
  outline: none;
  text-align: left;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.1em;
}

.faq-question:hover {
  background: #00c6ff;
}

.icon {
  font-size: 22px;
  font-weight: bold;
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
  padding: 0 15px;
  box-shadow: 2px 2px 10px rgba(19, 5, 147, 0.607);
  border-radius: 2px;
  margin-bottom: 0.5em;
}

.faq-answer p {
  padding: 10px 0;
}

.icon {
  display: inline-block;
  transition: transform 0.3s ease;
}

/* Rotated state */
.icon.rotate {
  transform: rotate(45deg);
  /* + becomes × */
}

.expecting-list-style {
  list-style: none;
  padding-left: 1.75em;
  font-size: 1.1rem;
  font-weight: 400;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

}

.expecting-list-style li {
  line-height: 2.2;
}

.expect-style {
  max-width: 50rem;
  box-shadow: 2px 2px 10px rgba(19, 5, 147, 0.607);
  background-color: rgba(128, 128, 128, 0.108);
  padding: 1em;
  margin: auto;
  font-size: 1.2rem;
  font-weight: 400;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}