@import url("root.css");

:root {
  --header: 8rem;
}

@media (min-width: 768px) {
  :root {
    --header: 10rem;
  }
}

.header {
  position: fixed;

  top: 0;

  left: 0;

  right: 0;

  background-color: #fff;

  z-index: 500;

  transition: all 300ms ease;
}

.headerside {
  height: var(--header);

  display: flex;

  justify-content: space-between;

  align-items: center;
}

.headersideleft {
  height: 100%;

  display: flex;

  justify-content: flex-start;

  align-items: center;

  column-gap: 5rem;
}

.logo {
  height: 100%;

  display: flex;

  justify-content: flex-start;

  align-items: center;

  width: var(--header);

  flex: 1;
}

.logo img {
  width: 100%;
}

.menulinks {
  height: 100%;

  display: flex;

  justify-content: flex-start;

  align-items: center;

  column-gap: 3rem;
}

@media (min-width: 1400px) {
  .menulinks {
    column-gap: 5rem;
  }
}

.mainli {
  color: var(--text-color);

  cursor: pointer;

  font-weight: 500;

  position: relative;

  transition: all 300ms ease;

  height: 100%;

  display: inline-flex;

  align-items: center;

  justify-content: center;
}

.mainli i {
  display: inline-block;

  transition: all 300ms ease;
}

.maina {
  color: var(--text-color);

  transition: all 300ms ease;
}

.mainli:hover i {
  transform: rotate(-45deg);
}

.mainli:hover,
.mainli:hover .maina {
  color: var(--colororange);
}

.dropdownmenus {
  position: absolute;

  z-index: 5;

  top: 100%;

  left: -5rem;

  background-color: #fff;

  padding: 1rem;

  display: flex;

  flex-direction: column;

  align-items: flex-start;

  min-width: 25rem;

  transition: transform 0.3s ease-in-out;

  transform-origin: top right;

  transform: perspective(600px) rotateX(-90deg);
}

.droplink {
  width: 100%;

  border-radius: 0.3rem;

  font-size: 1.5rem;

  color: var(--text-color);

  display: block;

  padding: 1rem;

  transition: all 300ms ease;
}

.droplink:hover {
  background-color: var(--colororange);

  color: #fff;
}

.droplink:not(:last-child) {
  margin-bottom: 0.3rem;
}

.mainli:hover .dropdownmenus {
  display: block;

  transform: perspective(600px) rotateX(0deg);
}

.headersideright {
  height: 100%;

  display: flex;

  justify-content: flex-end;

  align-items: center;

  column-gap: 1rem;
}

@media (min-width: 768px) {
  .headersideright {
    column-gap: 2rem;
  }
}

.headersiderightlink {
  color: var(--text-color);

  transition: all 300ms ease;

  font-weight: 500;

  font-size: 1.5rem;
}

.headersiderightlink:hover {
  color: var(--colororange);
}

.headersiderightlink i {
  margin-right: 0.3rem;
}

.slide {
  height: 35rem;

  background-color: #eaeaee;

  margin-top: var(--header);
}

@media (min-width: 576px) {
  .slide {
    height: 45rem;
  }
}

@media (min-width: 768px) {
  .slide {
    height: 55rem;
  }
}

@media (min-width: 1200px) {
  .slide {
    height: 100%;
  }
}

.slideside {
  height: 100%;

  position: relative;

  overflow: hidden;

  background-repeat: no-repeat;

  background-size: cover;

  background-position: center;
}

.slideside::before {
  content: "";

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background-color: var(--text-color);

  opacity: 0.6;
}

.slidesidetext {
  height: 100%;

  display: flex;

  flex-direction: column;

  align-items: flex-start;

  justify-content: center;

  position: relative;
}

@media (min-width: 576px) {
  .slidesidetext {
    width: 70%;
  }
}

@media (min-width: 768px) {
  .slidesidetext {
    width: 60%;
  }
}

@media (min-width: 1200px) {
  .slidesidetext {
    width: 50%;
  }
}

.slidesidetext h1 {
  color: #fff;

  font-size: 2.5rem;

  font-weight: 900;

  margin-bottom: 2rem;
}

@media (min-width: 400px) {
  .slidesidetext h1 {
    font-size: 3rem;
  }
}

@media (min-width: 576px) {
  .slidesidetext h1 {
    font-size: 3.5rem;
  }
}

@media (min-width: 768px) {
  .slidesidetext h1 {
    font-size: 4rem;
  }
}

@media (min-width: 992px) {
  .slidesidetext h1 {
    font-size: 5rem;
  }
}

@media (min-width: 1500px) {
  .slidesidetext h1 {
    font-size: 6.5rem;
  }
}

.slidesidetext p {
  color: #fff;

  opacity: 0.8;

  font-weight: 300;

  font-size: 1.45rem;
}

@media (min-width: 576px) {
  .slidesidetext p {
    font-size: 1.5rem;
  }
}

@media (min-width: 768px) {
  .slidesidetext p {
    font-size: 1.6rem;
  }
}

.servicebox {
  border-radius: 1rem;

  overflow: hidden;

  position: relative;

  margin-bottom: 2rem;
}

.serviceimages {
  width: 100%;

  height: 100%;

  aspect-ratio: 1;

  border-radius: 1rem;

  position: relative;
}

@media (min-width: 450px) {
  .serviceimages {
    aspect-ratio: 16/9;
  }
}

@media (min-width: 576px) {
  .serviceimages {
    aspect-ratio: 1;
  }
}

@media (min-width: 768px) {
  .serviceimages {
    aspect-ratio: 4/3;
  }
}

@media (min-width: 992px) {
  .serviceimages {
    aspect-ratio: 1;
  }
}

.serviceimages::before {
  content: "";

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background-color: #000;

  opacity: 0.5;

  transition: all 800ms ease;
}

.servicebox:hover .serviceimages::before {
  opacity: 0.8;
}

.serviceimages img {
  height: 100%;

  object-fit: cover;
}

.servicebox .content {
  position: absolute;

  bottom: 0;

  left: 0;

  right: 0;

  z-index: 1;

  padding: 2rem;

  width: 100%;

  display: flex;

  flex-direction: column;

  flex: 1;

  align-items: flex-start;

  justify-content: center;
}

.servicebox .content h3 {
  font-size: 1.4rem;

  font-weight: 800;

  color: #fff;

  margin-bottom: 2rem;

  position: relative;

  display: inline-block;
}

@media (min-width: 400px) {
  .servicebox .content h3 {
    font-size: 1.6rem;
  }
}

.servicebox .content h3::after {
  content: "";

  position: absolute;

  left: 0;

  bottom: -1rem;

  right: 100%;

  height: 0.2rem;

  background-color: var(--colororange);

  transition: all 800ms ease;
}

.servicebox:hover .content h3::after {
  right: 0;
}

.servicebox .content h3 a {
  color: #fff;

  transition: all 300ms ease;
}

.servicebox .content p {
  font-size: 1.45rem;

  color: #fff;

  line-height: 0;

  opacity: 0;

  transition: all 300ms ease;

  visibility: hidden;
}

.servicebox:hover .content p {
  visibility: visible;

  line-height: inherit;

  opacity: 0.8;
}

.services {
  position: relative;

  overflow: hidden;

  background-image: radial-gradient(
      rgba(255, 139, 71, 0.32) 1px,

      transparent 1px
    ),
    radial-gradient(rgba(255, 139, 71, 0.32) 1px, transparent 1px);

  background-size: 32px 32px;

  background-position: 0 0, 16px 16px;

  background-color: #ffffff;

  z-index: 0;
}

@media (min-width: 768px) {
  .services::before {
    content: "";

    position: absolute;

    top: 0;

    left: 0;

    bottom: 0;

    width: 15rem;

    background-color: var(--colororange);

    clip-path: polygon(0 0, 0% 100%, 60% 9%);

    opacity: 1;

    z-index: -1;
  }

  .services::after {
    content: "";

    position: absolute;

    top: 0;

    right: 0;

    bottom: 0;

    width: 15rem;

    background-color: var(--colororange);

    clip-path: polygon(61% 87%, 100% 100%, 100% 0);

    opacity: 1;

    z-index: -1;
  }
}

@media (min-width: 992px) {
  .services::before {
    width: 20rem;
  }

  .services::after {
    width: 20rem;
  }
}

@media (min-width: 1200px) {
  .services::before {
    width: 25rem;
  }

  .services::after {
    width: 25rem;
  }
}

@media (min-width: 1500px) {
  .services::before {
    width: 30rem;
  }

  .services::after {
    width: 30rem;
  }
}

.counter {
  padding: 0 0 8rem 0;

  background-image: radial-gradient(
      rgba(255, 139, 71, 0.32) 1px,

      transparent 1px
    ),
    radial-gradient(rgba(255, 139, 71, 0.32) 1px, transparent 1px);

  background-size: 32px 32px;

  background-position: 0 0, 16px 16px;

  background-color: #ffffff;
}

.counterbox {
  border-radius: 1rem;

  display: flex;

  justify-content: space-between;

  align-items: center;

  justify-content: center;

  background-image: repeating-linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.1) 0,

    rgba(255, 255, 255, 0.1) 1px,

    transparent 0,

    transparent 50%
  );

  background-size: 35px 35px;

  background-color: var(--colororange);

  padding: 2rem;

  flex-wrap: wrap;

  row-gap: 2rem;
}

@media (min-width: 992px) {
  .counterbox {
    padding: 4rem 0;

    flex-wrap: nowrap;

    row-gap: 0;
  }
}

@media (min-width: 1200px) {
  .counterbox {
    width: 100%;

    margin: 0 auto;
  }
}

.counterboxitem {
  width: calc(100% / 2);

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  text-align: center;

  position: relative;
}

@media (min-width: 450px) {
  .counterboxitem {
    width: calc(100% / 3);
  }
}

@media (min-width: 992px) {
  .counterboxitem {
    width: calc(100% / 5);

    flex: 1;
  }
}

.counterboxitem p {
  font-size: 2rem;

  font-weight: 900;

  color: #fff;

  margin-bottom: 0.5rem;
}

@media (min-width: 576px) {
  .counterbox p {
    font-size: 2.5rem;
  }
}

@media (min-width: 1400px) {
  .counterbox p {
    font-size: 3rem;
  }
}

.counterboxitem .countertext {
  font-size: 1.3rem;

  opacity: 0.8;

  color: #fff;
}

@media (min-width: 400px) {
  .counterboxitem .countertext {
    font-size: 1.4rem;
  }
}

@media (min-width: 576px) {
  .counterboxitem .countertext {
    font-size: 1.5rem;
  }
}

@media (min-width: 992px) {
  .counterboxitem:not(:last-child)::before {
    content: "";

    position: absolute;

    right: 0;

    top: 0;

    bottom: 0;

    width: 0.25rem;

    background-color: #fff;

    opacity: 0.3;
  }
}

.contactinfotext {
  width: 100%;

  display: flex;

  flex-direction: column;

  align-items: flex-start;

  justify-content: center;

  margin-bottom: 1rem;

  border-bottom: 0.1rem dashed #eaeaee;

  padding-bottom: 1rem;
}

.contactinfotext h2 {
  font-weight: 700;

  font-size: 1.6rem;

  margin-bottom: 1rem;
}

@media (min-width: 768px) {
  .contactinfotext h2 {
    font-size: 1.8rem;
  }
}

@media (min-width: 992px) {
  .contactinfotext h2 {
    font-size: 2rem;
  }
}

.contactinfotext p {
  font-size: 1.4rem;

  opacity: 0.8;
}

@media (min-width: 576px) {
  .contactinfotext p {
    font-size: 1.5rem;
  }
}

.contactinfo {
  margin-bottom: 2rem;

  width: 100%;

  display: flex;

  flex-direction: column;

  align-items: flex-start;

  justify-content: center;
}

.contactinfo h3 {
  font-size: 1.4rem;

  font-weight: 500;

  margin-bottom: 1rem;
}

.contactinfo h3 i {
  margin-right: 0.5rem;
}

.contactinfo a {
  color: var(--text-color);

  transition: color 300ms ease;

  opacity: 0.8;

  font-size: 1.4rem;
}

@media (min-width: 576px) {
  .contactinfo a {
    font-size: 1.5rem;
  }
}

@media (min-width: 768px) {
  .contactinfo a {
    font-size: 1.6rem;
  }
}

.contactinfo a:hover {
  color: var(--colororange);
}

.contactform {
  position: relative;

  padding: 0 2rem;

  margin-top: 2rem;
}

@media (min-width: 768px) {
  .contactform {
    margin-top: 0;
  }
}

@media (min-width: 1200px) {
  .contactform {
    padding: 0 5rem;
  }
}

.contact {
  background: radial-gradient(
        circle,
        transparent 20%,

        #ffffff 20%,

        #ffffff 80%,

        transparent 80%,

        transparent
      )
      0% 0% / 64px 64px,
    radial-gradient(
        circle,
        transparent 20%,

        #ffffff 20%,

        #ffffff 80%,

        transparent 80%,

        transparent
      )
      32px 32px / 64px 64px,
    linear-gradient(rgba(0, 0, 0, 0.025) 2px, transparent 2px) 0px -1px / 32px 32px,
    linear-gradient(90deg, rgba(0, 0, 0, 0.025) 2px, #ffffff 2px) -1px 0px / 32px
      32px #ffffff;

  background-size: 64px 64px, 64px 64px, 32px 32px, 32px 32px;

  background-color: #ffffff;
}

.footer {
  background-color: var(--text-color);

  overflow: hidden;
}

.footerlogo {
  width: 10rem;

  margin-bottom: 1rem;
}

@media (min-width: 768px) {
  .footerlogo {
    width: 12rem;
  }
}

.footerboxbackground {
  background-color: #fff;

  position: relative;

  z-index: 0;

  padding: 2rem;
}

@media (min-width: 768px) {
  .footerboxbackground {
    padding: 2rem 0;
  }
}

@media (min-width: 992px) {
  .footerboxbackground {
    padding: 2rem;
  }
}

@media (min-width: 1200px) {
  .footerboxbackground {
    padding: 5rem 0;
  }
}

.footerboxbackground::before {
  content: "";

  position: absolute;

  top: 0;

  bottom: 0;

  left: -50rem;

  right: -50rem;

  background-color: #fff;

  z-index: -1;
}

@media (min-width: 768px) {
  .footerboxbackground::before {
    width: 50vw;

    right: 100%;

    left: auto;
  }
}

.footerboxbackground p {
  font-size: 1.45rem;

  color: var(--text-color);

  opacity: 0.8;
}

.footerbox {
  width: 100%;

  display: flex;

  flex-direction: column;

  align-items: flex-start;

  justify-content: flex-start;

  margin-bottom: 2rem;
}

@media (min-width: 1200px) {
  .footerbox {
    margin-bottom: 0;

    padding-left: 2rem;
  }
}

.footerbox h4 {
  font-size: 1.4rem;

  font-weight: 700;

  position: relative;

  display: inline-block;

  margin-bottom: 2rem;

  color: #fff;
}

.footerbox h4::after {
  content: "";

  position: absolute;

  left: 0;

  bottom: -1rem;

  right: 50%;

  height: 0.15rem;

  background-color: var(--colororange);

  border-radius: 5rem;
}

.footerbox ul li {
  padding: 0.5rem 0;

  transition: all 300ms ease;
}

.footerbox ul li a {
  font-size: 1.4rem;

  color: rgba(255, 255, 255, 0.6);

  transition: all 300ms ease;
}

@media (min-width: 768px) {
  .footerbox ul li a {
    font-size: 1.5rem;
  }
}

.footerbox ul li:hover a {
  color: rgba(255, 255, 255, 1);
}

.actionflow {
  width: 100%;

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  margin-bottom: 2rem;
}

.actionflowimage {
  border-radius: 50%;

  border: 1rem solid #fff;

  box-shadow: rgba(149, 157, 165, 0.1) 0px 8px 24px;

  position: relative;

  transition: all 300ms ease;
}

.actionflowimage img {
  height: 100%;

  aspect-ratio: 1;

  object-fit: cover;

  border-radius: 50%;
}

.actionflowsection {
  position: relative;

  background-image: radial-gradient(#ffffff 1.5px, transparent 1.5px),
    radial-gradient(#ffffff 1.5px, transparent 1.5px);

  background-size: 32px 32px;

  background-position: 0 0, 16px 16px;

  background-color: #f1f1f1;
}

.actionflowwidth {
  margin: 0 auto;

  width: 22rem;
}

@media (min-width: 576px) {
  .actionflowwidth {
    width: 45rem;
  }
}

@media (min-width: 768px) {
  .actionflowwidth {
    width: 50rem;
  }
}

@media (min-width: 992px) {
  .actionflowwidth {
    width: 80rem;
  }
}

@media (min-width: 1200px) {
  .actionflowwidth {
    width: 90rem;
  }
}

@media (min-width: 1500px) {
  .actionflowwidth {
    width: 100rem;
  }
}

.actionflow .content {
  width: 100%;

  display: flex;

  justify-content: center;

  align-items: center;

  text-align: center;

  margin-top: 2rem;
}

.actionflow .content h3 {
  font-size: 1.5rem;

  font-weight: 500;
}

@media (min-width: 1200px) {
  .actionflow .content h3 {
    font-size: 1.6rem;
  }
}

@media (min-width: 992px) {
  .secondary {
    margin-top: 8rem;
  }
}

.actionflownumber {
  position: absolute;

  top: -0.5rem;

  left: -0.5rem;

  width: 5rem;

  height: 5rem;

  display: flex;

  justify-content: center;

  align-items: center;

  background-color: #fff;

  border-radius: 50%;

  font-size: 1.6rem;

  font-weight: 500;

  border: 1rem solid #f1f1f1;

  transition: all 300ms ease;
}

.secondary .actionflownumber {
  top: auto;

  left: auto;

  bottom: -0.5rem;

  right: -0.5rem;
}

.actionflow:hover .actionflownumber {
  background-color: var(--colororange);

  color: #fff;
}

.actionflow:hover .actionflowimage {
  border: 1rem solid var(--colororange);
}

.alldetail {
  margin-top: 4rem;

  text-align: center;
}

.alldetail a {
  padding: 1.2rem 2.4rem;

  border-radius: 0.3rem;

  color: #fff;

  background-color: var(--colororange);

  transition: all 300ms ease;

  font-size: 1.4rem;

  font-weight: 500;
}

@media (min-width: 400px) {
  .alldetail a {
    font-size: 1.5rem;

    padding: 1.5rem 3rem;
  }
}

.alldetail a:hover {
  background-color: #000;

  color: #fff;
}

.alldetail a i {
  margin-right: 0.5rem;
}

.gallery {
  background-image: radial-gradient(
      rgba(255, 139, 71, 0.32) 1px,

      transparent 1px
    ),
    radial-gradient(rgba(255, 139, 71, 0.32) 1px, transparent 1px);

  background-size: 32px 32px;

  background-position: 0 0, 16px 16px;

  background-color: #ffffff;
}

.galleryrowwidth {
  margin: 0 auto;

  justify-content: center;
}

@media (min-width: 350px) {
  .galleryrowwidth {
    width: 28rem;
  }
}

@media (min-width: 576px) {
  .galleryrowwidth {
    width: auto;
  }
}

@media (min-width: 992px) {
  .galleryrowwidth {
    width: 80rem;
  }
}

@media (min-width: 1200px) {
  .galleryrowwidth {
    width: 90rem;
  }
}

@media (min-width: 1500px) {
  .galleryrowwidth {
    width: 100rem;
  }
}

.gallerybox {
  position: relative;

  margin-bottom: 2rem;
}

.galleryboximage {
  border-radius: 1rem;

  overflow: hidden;

  aspect-ratio: 4/3;
}

@media (min-width: 768px) {
  .galleryboximage {
    aspect-ratio: 1;
  }
}

.galleryboximage img {
  width: 100%;

  height: 100%;

  object-fit: cover;

  transition: all 300ms ease;
}

.gallerybox:hover .galleryboximage img {
  transform: scale(1.05);

  filter: brightness(0.8);
}

.ribbon {
  font-size: 1.4rem;

  color: #fff;
}

@media (min-width: 576px) {
  .ribbon {
    font-size: 1.5rem;
  }
}

.ribbon {
  --f: 0.5em; /* control the folded part*/

  --r: 0.8em; /* control the ribbon shape */

  position: absolute;

  bottom: 20px;

  left: calc(-1 * var(--f));

  padding-inline: 1rem;

  line-height: 2;

  background: var(--colororange);

  border-top: var(--f) solid #0005;

  border-right: var(--r) solid #0000;

  clip-path: polygon(
    0 100%,

    0 var(--f),
    var(--f) 0,

    var(--f) var(--f),
    100% var(--f),
    calc(100% - var(--r)) calc(50% + var(--f) / 2),
    100% 100%
  );

  z-index: 2;
}

.news {
  background-image: radial-gradient(
      rgba(255, 139, 71, 0.32) 1px,

      transparent 1px
    ),
    radial-gradient(rgba(255, 139, 71, 0.32) 1px, transparent 1px);

  background-size: 32px 32px;

  background-position: 0 0, 16px 16px;

  background-color: #ffffff;
}

.blogbox {
  width: 100%;

  display: flex;

  flex-direction: column;

  align-items: flex-start;

  margin-bottom: 2rem;
}

.blogboximage {
  border-radius: 1rem;

  overflow: hidden;

  position: relative;
}

.blogboximage img {
  height: 100%;

  object-fit: cover;

  transition: all 900ms ease;
}

.blogbox:hover .blogboximage img {
  transform: scale(1.1);

  filter: brightness(0.5);
}

.blogbox .content {
  padding: 2rem;

  width: 100%;

  display: flex;

  flex-direction: column;

  align-items: flex-start;

  flex: 1;
}

.blogbox .content h3 {
  font-size: 1.6rem;

  font-weight: 600;

  margin-bottom: 1rem;
}

.blogbox .content h3 a {
  color: var(--text-color);

  background-image: linear-gradient(
    transparent calc(100% - 2px),
    currentColor 2px
  );

  background-size: 0 100%;

  background-repeat: no-repeat;

  transition: background-size 400ms;

  line-height: 1.3;
}

.blogbox:hover .content h3 a {
  background-size: 100% 100%;

  color: var(--colororange);
}

.blogbox .content p {
  flex: 1;

  opacity: 0.8;

  margin-bottom: 1rem;
}

.bloglink {
  font-size: 1.5rem;

  color: var(--text-color);

  transition: all 300ms ease;

  display: inline-block;

  font-weight: 500;
}

.bloglink i {
  margin-left: 0.2rem;

  transition: all 300ms ease;

  display: inline-block;
}

.bloglink:hover {
  color: var(--text-color);
}

.bloglink:hover i {
  color: var(--colororange);

  transform: translateX(0.2rem);
}

.ribbon2 {
  font-size: 1.5rem;

  color: #fff;
}

.ribbon2 {
  --r: 0.8em; /* control the cutout */

  border-block: 0.5em solid #0000;

  padding-inline: calc(var(--r) + 0.25em) 0.5em;

  line-height: 1.8;

  clip-path: polygon(
    0 0,

    100% 0,

    100% 100%,

    0 100%,

    var(--r) calc(100% - 0.25em),
    0 50%,

    var(--r) 0.25em
  );

  background: radial-gradient(0.2em 50% at right, #000a, #0000) border-box,
    var(--colororange) padding-box; /* the color  */

  width: fit-content;

  z-index: 2;

  position: absolute;

  top: 1rem;

  right: 1rem;
}

.news .row {
  justify-content: center;
}

.slidelink {
  display: inline-block;

  border-radius: 0.3rem;

  padding: 1rem 2rem;

  background-color: var(--colororange);

  color: #fff;

  transition: all 300ms ease;

  margin-top: 2rem;

  font-size: 1.5rem;
}

.slidelink i {
  margin-right: 0.3rem;
}

.slidelink:hover {
  color: #fff;

  background-color: #000;
}

.banner {
  background-image: url("data:image/svg+xml,<svg id='patternId' width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'><defs><pattern id='a' patternUnits='userSpaceOnUse' width='50' height='29.442' patternTransform='scale(2) rotate(0)'><rect x='0' y='0' width='100%' height='100%' fill='%23e75005ff'/><path d='M35.569-17.373 22.959 4.468l-12.61-21.841Zm0 29.442-12.61 21.84-12.61-21.84Zm25-14.721-12.61 21.841-12.61-21.841zm0 29.441-12.61 21.842-12.61-21.842Zm-33.478 0L39.7 4.95l12.61 21.84zM10.569-2.652l-12.61 21.841-12.61-21.841Zm0 29.441-12.61 21.842-12.61-21.842Zm-33.478 0L-10.3 4.95l12.61 21.84zm25-14.72L14.7-9.773l12.61 21.842zm0 29.441L14.7 19.67l12.61 21.841z'  stroke-width='1' stroke='%23b73e01ff' fill='none'/></pattern></defs><rect width='800%' height='800%' transform='translate(0,0)' fill='url(%23a)'/></svg>");
  padding: 12rem 0 4rem 0;
}

@media (min-width: 768px) {
  .banner {
    padding: 14rem 0 4rem 0;
  }
}

.bannercontent {
  display: flex;

  flex-direction: column;

  align-items: flex-start;

  justify-content: center;
}

.bannercontent h2 {
  font-size: 2.5rem;

  font-weight: 900;

  color: #fff;

  margin-bottom: 1rem;
}

@media (min-width: 576px) {
  .bannercontent h2 {
    font-size: 3rem;
  }
}

@media (min-width: 1600px) {
  .bannercontent h2 {
    font-size: 4rem;
  }
}

.bannercontent ul {
  display: flex;

  justify-content: flex-start;

  align-items: center;

  column-gap: 2rem;

  flex-wrap: wrap;
}

.bannercontent ul li:not(:last-child)::after {
  content: "\F3C1";

  position: absolute;

  font-family: "remixicon";

  right: -1.1rem;

  top: 1.1rem;

  color: #fff;

  font-size: 0.3rem;
}

.bannercontent ul li {
  font-size: 1.5rem;

  color: #fff;

  position: relative;
}

.bannercontent ul li a {
  color: #fff;

  transition: color 300ms ease;
}

.bannercontent ul li.active {
  text-decoration: underline;

  font-weight: 700;
}

.newsmainimage {
  border-radius: 1rem;

  overflow: hidden;

  margin-bottom: 2rem;
}

@media (min-width: 768px) {
  .newsmainimage {
    aspect-ratio: 20/9;
  }
}

.newsmainimage img {
  height: 100%;

  object-fit: cover;
}

.cleanText p {
  margin-bottom: 1rem;

  font-size: 1.5rem;
}

@media (min-width: 1500px) {
  .cleanText p {
    font-size: 1.6rem;
  }
}

.cleanText ul {
  padding: 0 0 1rem 2rem;

  list-style-type: disc;
}

.cleanText ul li {
  font-size: 1.5rem;

  padding: 0.5rem 0;
}

.cleanText ul li p {
  margin: 0;
}

.cleanText ol {
  padding: 0 0 1rem 2rem;

  list-style-type: decimal;
}

.cleanText ol li {
  font-size: 1.5rem;

  padding: 0.5rem 0;
}

.cleanText ol li p {
  margin: 0;
}

.cleanText h1,
.cleanText h2,
.cleanText h3,
.cleanText h4,
.cleanText h5,
.cleanText h6 {
  margin-bottom: 1rem;

  font-size: 2rem;

  font-weight: 800;
}

.cleanText table {
  width: 100%;

  border-collapse: collapse;

  margin-top: 2rem;

  margin-bottom: 1rem;

  background-color: #fff;
}

.cleanText table th,
.cleanText table td {
  padding: 1rem;

  font-size: 1.5rem;

  border: 0.1rem solid #eaeaea;
}

.newsinlinetext {
  width: 100%;

  display: flex;

  flex-direction: column;

  align-items: flex-start;

  padding: 1rem 2rem;
}

.newsinlinetitle {
  margin-bottom: 1rem;

  padding: 0 2rem;
}

.newsinlinetitle h1 {
  font-size: 1.8rem;

  font-weight: 900;
}

@media (min-width: 576px) {
  .newsinlinetitle h1 {
    font-size: 2rem;
  }
}

@media (min-width: 768px) {
  .newsinlinetitle h1 {
    font-size: 2.2rem;
  }
}

.newsother {
  padding: 2rem;

  width: 100%;

  display: flex;

  flex-direction: column;

  align-items: flex-start;

  background-color: #fff;

  border-radius: 1rem;

  box-shadow: rgba(149, 157, 165, 0.1) 0px 8px 24px;

  margin-top: 2rem;
}

@media (min-width: 768px) {
  .newsother {
    position: sticky;

    top: 12rem;

    margin-top: 0;
  }
}

.newsotheritem {
  width: 100%;

  border-radius: 0.3rem;

  padding: 0.5rem;

  display: flex;

  justify-content: flex-start;

  align-items: center;

  justify-content: flex-start;
}

.newsotheritem figure {
  width: 6rem;

  height: 6rem;

  border-radius: 0.3rem;

  overflow: hidden;
}

.newsotheritem figure img {
  height: 100%;

  object-fit: cover;

  transition: all 900ms ease;
}

.newsotheritem:hover figure img {
  transform: scale(1.1);

  filter: brightness(0.5);
}

.newsotheritem .content {
  width: calc(100% - 6rem);

  display: flex;

  justify-content: flex-start;

  align-items: center;

  padding-left: 1rem;
}

.newsotheritem .content h3 {
  font-size: 1.4rem;

  font-weight: 500;
}

@media (min-width: 992px) {
  .newsotheritem .content h3 {
    font-size: 1.5rem;
  }
}

.newsotheritem .content h3 a {
  color: #000;

  transition: color 300ms ease;
}

.newsotheritem:hover .content h3 a {
  color: var(--colororange);
}

.masonry-gallery {
  column-count: 2;

  column-gap: 1rem;

  width: 100%;

  margin: auto;
}

@media (min-width: 450px) {
  .masonry-gallery {
    column-count: 3;
  }
}

@media (min-width: 768px) {
  .masonry-gallery {
    column-count: 4;
  }
}

@media (min-width: 992px) {
  .masonry-gallery {
    column-count: 5;
  }
}

@media (min-width: 1200px) {
  .masonry-gallery {
    column-count: 6;
  }
}

.masonry-gallery-item {
  width: 100%;

  display: block;

  margin-bottom: 1rem;

  break-inside: avoid;

  border-radius: 1rem;

  overflow: hidden;
}

.masonry-gallery-item img {
  height: 100%;

  object-fit: cover;

  transition: all 900ms ease;
}

.masonry-gallery-item:hover img {
  transform: scale(1.1);

  filter: brightness(0.5);
}

.pageinlinetitle {
  margin-bottom: 1rem;
}

.pageinlinetitle h1 {
  font-size: 2.2rem;

  font-weight: 800;
}

@media (min-width: 1500px) {
  .pageinlinetitle h1 {
    font-size: 2.5rem;
  }
}

.pageinlineimage {
  border-radius: 1rem;

  overflow: hidden;

  margin-bottom: 2rem;
}

@media (min-width: 768px) {
  .pageinline {
    padding-left: 2rem;
  }

  .pageinlineimage {
    margin-bottom: 0;
  }
}

.sponsorlogo {
  border-radius: 0.5rem;

  border: 0.1rem solid #eaeaea;

  margin-bottom: 2rem;

  width: 100%;

  display: flex;

  justify-content: center;

  align-items: center;
}

.sponsorlogo img {
  aspect-ratio: 16/9;

  object-fit: contain;
}

.videobox {
  width: 100%;

  display: flex;

  flex-direction: column;

  margin-bottom: 2rem;

  padding: 1rem;

  border-radius: 1rem;

  background-color: #f1f1f1;
}

.videoimage {
  border-radius: 1rem;

  overflow: hidden;

  position: relative;
}

.playbutton {
  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  display: flex;

  justify-content: center;

  align-items: center;

  background-color: rgba(0, 0, 0, 0.2);
}

.videoimage img {
  object-fit: cover;

  aspect-ratio: 16/9;

  transition: all 900ms ease;
}

.videobox:hover .videoimage img {
  transform: scale(1.1);

  filter: brightness(0.5);
}

.videobox .content {
  padding: 2rem;

  width: 100%;

  display: flex;

  flex-direction: column;

  align-items: flex-start;

  flex: 1;
}

.videobox .content h3 {
  font-size: 1.5rem;

  font-weight: 600;

  margin-bottom: 1rem;

  flex: 1;
}

.playlink {
  font-size: 1.4rem;

  font-weight: 500;

  color: #000;

  transition: all 300ms ease;
}

.playlink:hover {
  color: var(--colororange);
}

.playbuttonlink {
  border: 0.2rem solid #fff;

  width: 6rem;

  height: 6rem;

  border-radius: 50%;

  display: flex;

  justify-content: center;

  align-items: center;

  color: #fff;

  font-size: 3.5rem;

  background-color: rgba(255, 255, 255, 0.2);

  transition: all 300ms ease;
}

.playbuttonlink:hover {
  background-color: rgba(255, 255, 255, 0.4);

  color: #fff;
}

.activitytext {
  margin-top: 2rem;
}

@media (min-width: 1200px) {
  .activitytext {
    width: 100rem;

    margin: 2rem auto 0 auto;
  }
}

.mobilemenu {
  border-top: 0.1rem solid #eaeaea;

  display: none;
}

.mobilemenucontent {
  padding: 1rem 0;

  display: flex;

  flex-direction: column;
}

.mobilemenucontent a {
  width: 100%;

  display: block;

  padding: 1rem;

  border-radius: 0.3rem;

  transition: all 300ms ease;

  color: #000;

  font-size: 1.5rem;
}

.mobilemenucontent a:hover {
  background-color: var(--colororange);

  color: #fff;
}

.mobilemenudropdown {
  display: block;

  border-radius: 0.3rem;

  padding: 1rem;

  background-color: transparent;

  color: #000;

  border: none;

  text-align: left;

  transition: all 300ms ease;

  font-size: 1.5rem;
}

.mobilemenudropdown:hover {
  background-color: var(--colororange);

  color: #fff;
}

.mobiledropdowncontent {
  background-color: #fbfbfb;

  border-radius: 0.3rem;

  padding: 1rem;

  row-gap: 0.2rem;

  display: flex;

  flex-direction: column;

  align-items: flex-start;

  width: 100%;

  display: none;
}

.imagesubcat {
  width: 100%;

  display: flex;

  justify-content: flex-start;

  align-items: center;

  column-gap: 0.5rem;

  margin-bottom: 2rem;

  flex-wrap: wrap;
}

.imagesubitem {
  border-radius: 0.3rem;

  background-color: #fff;

  font-size: 1.4rem;

  color: var(--text-color);

  transition: all 300ms ease;

  cursor: pointer;

  padding: 0.6rem 1.2rem;
}

.imagesubitem.active,
.imagesubitem.active:hover,
.imagesubitem.active:focus {
  background-color: var(--colororange);

  color: #fff;
}

.imagesubitem:hover {
  background-color: #f9f9f9;

  color: var(--text-color);
}

.sponsorc {
  background-color: var(--colororange);

  border-radius: 0.3rem;

  text-align: center;

  margin-bottom: 2rem;

  padding: 1rem;
}

.sponsorc p {
  font-size: 1.4rem;

  font-weight: 500;

  color: #fff;
}

@media (min-width: 768px) {
  .sponsorc p {
    font-size: 1.5rem;
  }
}

.jc-centered {
  justify-content: center;
}