@import url("https://fonts.googleapis.com/css2?family=Funnel+Sans:ital,wght@0,300..800;1,300..800&display=swap");

:root {
  --red-color: #f1262c;
  --blue-color: #103279;
  --yellow-color: #f3b910;
}

html {
  scroll-behavior: smooth;
}

* {
  cursor: default;
}

.frame-168 {
  display: flex;
  flex-direction: row;
  gap: 48px;
  align-items: center;
  justify-content: flex-start;
  position: relative;
}
.frame-157 {
  flex-shrink: 0;
  width: 903px;
  height: 439px;
  position: relative;
  overflow: hidden;
}
.polygon-7 {
  width: 657.5px;
  height: 438px;
  position: absolute;
  left: -826px;
  top: 439px;
  transform: translate(413px, -438px);
  overflow: visible;
}
.polygon-6 {
  width: 657.5px;
  height: 438px;
  position: absolute;
  left: 245px;
  top: 438.5px;
  transform: translate(0px, -438px);
  overflow: visible;
}
.hva-skjer {
  color: #ffffff;
  text-align: center;
  font-family: "Funnel Sans", sans-serif; /* шрифт */
  font-size: 96.38932800292969px;
  letter-spacing: -0.01em;
  font-weight: 600;
  position: absolute;
  left: 329px;
  top: 152px;
}
.frame-159 {
  display: flex;
  flex-direction: column;
  gap: 0px;
  align-items: flex-start;
  justify-content: flex-start;
  flex-shrink: 0;
  width: 584px;
  position: relative;
  transition: all 0.3s ease;
  text-decoration: none;

  &:hover {
    transform: translateX(10px); /* move slightly to the left */
  }
}
.alle-planlagte-aktiviteter {
  color: var(--red-color);
  text-align: left;
  font-family: "Funnel Sans", sans-serif; /* шрифт */
  font-size: 49.96828842163086px;
  line-height: 122.35%;
  font-weight: 600;
  text-decoration: underline;
  position: relative;
  align-self: stretch;
}
.frame-158 {
  display: flex;
  flex-direction: row;
  gap: 7px;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  position: relative;
}
.calendar {
  color: var(--red-color);
  text-align: left;
  font-family: "Funnel Sans", sans-serif; /* шрифт */
  font-size: 49.96828842163086px;
  line-height: 122.35%;
  font-weight: 600;
  text-decoration: underline;
  position: relative;
}
.frame-160 {
  align-self: stretch;
  flex-shrink: 0;
  width: 27px;
  margin-left: 8px;
  margin-top: 10px;
  height: auto;
  position: relative;
  overflow: visible;
}

.scroll-animate {
  opacity: 1;
  transform: translateX(-800px);
  transition: all 0.6s ease-out;
}

.scroll-animate.show {
  opacity: 1;
  transform: translateX(0);
}







.upcoming-events-section {
  display: flex;
  flex-direction: column;
  gap: 31.61px;
  align-items: flex-start;
  justify-content: flex-start;
  position: relative;
  max-width: 1280px;
  margin: auto;
  margin-top: 100px;
  margin-bottom: 200px;
}
.event-content-holder {
  display: flex;
  flex-direction: column;
  gap: 34.86px;
  align-items: center;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
  margin-bottom: 50px;
}
.event-content-section {
  display: flex;
  flex-direction: row;
  gap: 25.13px;
  align-items: flex-start;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
}
.event-icon {
  flex-shrink: 0;
  width: 287.78px;
  height: 288.59px;
  position: relative;
}
.event-content {
  display: flex;
  flex-direction: column;
  gap: 9.73px;
  align-items: flex-start;
  justify-content: flex-start;
  flex-shrink: 0;
  width: 614.46px;
  position: relative;
}
.event-info-section {
  display: flex;
  flex-direction: column;
  gap: 8.11px;
  align-items: flex-start;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.event-info-title {
  color: var(--blue-color);
  text-align: left;
  font-family: "Funnel Sans", sans-serif;
  font-size: 40.56349563598633px;
  font-weight: 600;
  text-decoration: underline;
  position: relative;
  align-self: stretch;
}
.event-info-main {
  display: flex;
  flex-direction: column;
  gap: 0px;
  align-items: flex-start;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.event-info-time {
  color: var(--blue-color);
  text-align: left;
  font-family: "Funnel Sans", sans-serif;
  font-size: 40.5435791015625px;
  font-weight: 400;
  position: relative;
  align-self: stretch;
}
.event-info-place {
  color: var(--blue-color);
  text-align: left;
  font-family: "Funnel Sans", sans-serif;
  font-size: 40.5435791015625px;
  font-weight: 400;
  position: relative;
  align-self: stretch;
}
.event-info-links {
  display: flex;
  flex-direction: row;
  gap: 12.16px;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  position: relative;
}
.link-find-out-more,
.link-registration {
  background: var(--blue-color);
  padding: 11.35px 9.73px;
  display: flex;
  flex-direction: row;
  gap: 8.11px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  text-decoration: none;

  /* анімація */
  transition: all 0.25s ease;
  cursor: pointer;
}

/* Hover ефект */
.link-find-out-more:hover,
.link-registration:hover {
  transform: translateY(-2px);
  filter: brightness(1.1);
  box-shadow: 0 6px 14px rgba(0,0,0,0.15);
}

/* Натискання */
.link-find-out-more:active,
.link-registration:active {
  transform: translateY(1px) scale(0.97);
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  filter: brightness(0.95);
}
.rombe-2 {
  flex-shrink: 0;
  width: 20.27px;
  height: 13.55px;
  position: relative;
  overflow: visible;
}
.link-text-more {
  color: #ffffff;
  text-align: left;
  font-family: "Inter-Bold", sans-serif;
  font-size: 25.512256622314453px;
  font-weight: 700;
  position: relative;
  text-decoration: none;
}
.rombe-22 {
  flex-shrink: 0;
  width: 20.27px;
  height: 13.55px;
  position: relative;
  overflow: visible;
}
.link-registration-text {
  color: #ffffff;
  text-align: left;
  font-family: "Inter-Bold", sans-serif;
  font-size: 25.512256622314453px;
  font-weight: 700;
  position: relative;
  text-decoration: none;
}
.event-price {
  padding: 11.35px 9.73px 11.35px 9.73px;
  display: flex;
  flex-direction: row;
  gap: 8.11px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
}
.event-price-text {
  color: var(--red-color);
  text-align: left;
  font-family: "Inter-Bold", sans-serif;
  font-size: 25.512256622314453px;
  font-weight: 700;
  position: relative;
}
.event-imgs-gallery {
  display: flex;
  flex-direction: row;
  gap: 28.37px;
  align-items: center;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.event-gallery-img {
  background: #d9d9d9;
  flex-shrink: 0;
  width: 625.81px;
  height: 625.81px;
  position: relative;
}
.rombe-23 {
  flex-shrink: 0;
  width: 20.27px;
  height: 13.55px;
  position: relative;
  overflow: visible;
}
.rombe-24 {
  flex-shrink: 0;
  width: 20.27px;
  height: 13.55px;
  position: relative;
  overflow: visible;
}






@media (max-width: 1800px) {
  .frame-168, .upcoming-events-section {
    zoom: 0.9375;
  }
}

@media (max-width: 1600px) {
  .frame-168, .upcoming-events-section {
    zoom: 0.8333;
  }
}

@media (max-width: 1500px) {
  .frame-168, .upcoming-events-section {
    zoom: 0.78125;
  }
}

@media (max-width: 1400px) {
  .frame-168, .upcoming-events-section {
    zoom: 0.729;
  }
}

@media (max-width: 1280px) {
  .frame-168, .upcoming-events-section {
    zoom: 0.6666;
  }
}

@media (max-width: 1100px) {
  .frame-168, .upcoming-events-section {
    zoom: 0.5729;
  }
}

@media (max-width: 1000px) {
  .frame-168, .upcoming-events-section {
    zoom: 0.5208;
  }
}

@media (max-width: 900px) {
  .frame-168, .upcoming-events-section {
    zoom: 0.4687;
  }
}

@media (max-width: 850px) {
  .frame-168, .upcoming-events-section {
    zoom: 0.4427;
  }
}

@media (max-width: 768px) { /* планшеты и телефоны */ 
  .frame-168 {
    flex-wrap: wrap;
  }
}

@media (max-width: 692px) {
  .frame-159 {
    margin-left: 120px;
  }
}

@media (max-width: 680px) {
  .upcoming-events-section {
    width: 70%;
  }
}

@media (max-width: 550px) {
  .upcoming-events-section {
    width: 80%;
  }
}

@media (max-width: 450px) {
  .frame-159 {
    margin-left: 50px;
  }

  .upcoming-events-section {
    width: 90%;
  }

  .event-content {
    width: 460px;
  }

  .frame-157 {
    zoom: 0.9;
  }
  
  .upcoming-events-section {
    zoom: 0.5;
  }

  .event-info-links {
    zoom: 1.1;
  }
}

@media (max-width: 430px) {
  .upcoming-events-section {
    zoom: 0.45;
  }
}
@media (max-width: 400px) {
  .frame-157 {
    zoom: 0.8;
  }
}

@media (max-width: 390px) {
  .upcoming-events-section {
    zoom: 0.43;
  }
}