* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Roboto", sans-serif;
}
.desktop {
  display: block;
}
.mobile {
  display: none;
}

/* Светлая тема (по умолчанию) */
[data-theme="light"] body {
  background-color: #ffffff;
  color: #212121;
}

/* Тёмная тема */
[data-theme="dark"] body {
  background-color: #121212;
  color: #f1f1f1;
}


[data-theme="light"] header {
  background-color: #ffffff;
  color: #212121;
}

[data-theme="dark"] header {
  background-color: #121212;
  color: #f1f1f1;
}

/* Тёмная тема */
[data-theme="dark"] .header-right,
[data-theme="dark"] .header-right a,
[data-theme="dark"] .header-right p,
[data-theme="dark"] .header-right02 a,
[data-theme="dark"] .header-right02 p {
  color: #ffffff;
}

[data-theme="dark"] .header-right img,
[data-theme="dark"] .header-right02 img {
  filter: invert(1);
}

[data-theme="dark"] .top-main img{
  background-color: #ffffff;
  border-radius: 70px;
}

[data-theme="dark"] .active-link,
[data-theme="dark"] .grid-item-fr a{
  color: #62b89f;
}

[data-theme="dark"] .top-text-left h1,
[data-theme="dark"] .top-text-left p,
[data-theme="dark"] .events-head-left h3,
[data-theme="dark"] .h3-upcoming,
[data-theme="dark"] .grid-h5,
[data-theme="dark"] .flex-in-grid1 p,
[data-theme="dark"] .h3-second-part,
[data-theme="dark"] .h3-explore,
[data-theme="dark"] .h3-popular,
[data-theme="dark"] .city-name,
[data-theme="dark"] .city-name01,
[data-theme="dark"] .h3-how-meetup,
[data-theme="dark"] .p-big,
[data-theme="dark"] .h3-friendship,
[data-theme="dark"] .grid-item-fr h4,
[data-theme="dark"] .h3-NY,
[data-theme="dark"] .p02,
[data-theme="dark"] .h4-NY{
  color: #ffffff;
}

[data-theme="dark"] .p01,
[data-theme="dark"] .p03,
[data-theme="dark"] .second-part-top-txt p,
[data-theme="dark"] .mini-icon-item p,
[data-theme="dark"] .events-near a,
[data-theme="dark"] .p-small,
[data-theme="dark"] .p-NY,
[data-theme="dark"] .event-title{
   color: #b0abab;
}

[data-theme="dark"] .active-link:hover{
   color: #217985;
  text-decoration: underline;
}

[data-theme="dark"] .event-date{
  color: #718096;
}



/* Пример изменения цвета карточек */
[data-theme="dark"] .event-card {
  background: #1e1e1e;
  border-color: #333;
}

/* Пример изменения инпутов */
[data-theme="dark"] .input,
[data-theme="dark"] .filter-select {
  background: #2a2a2a;
  color: #f1f1f1;
  border-color: #444;
}

/* Кнопка переключения темы */
.btn-theme {
  background: transparent;
  border: none;
  font-size: 20px;
  cursor: pointer;
  transition: transform 0.2s;
}

.btn-theme:hover {
  transform: scale(1.1);
}

/* HEADER */
.container-header {
  max-width: 1512px;
  margin: 0 auto; /* центрирует по горизонтали */
  padding: 0 16px; /* небольшой отступ по бокам, чтобы не прилипало */
}
.nav-menu {
  margin-top: 11px;
  background-color: #fff;
  width: 100%;
}
.container {
  max-width: 1196px;
  margin: 0 auto;
}
.header-flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.form-header {
  display: flex;
  align-items: center;
  position: relative;
}
.img-logo {
  margin-right: 40px;
}
.input {
  font-size: 16px;
  font-weight: 400;
  border: 1px solid #d9d9d9;
  background: #fff;
  cursor: pointer;
}
.input-events {
  color: #707070;
  border-radius: 8px 0 0 8px;
  padding: 13px 150px 13px 42px;
  background: url("../icons/search.svg") no-repeat 10px center;
  background-size: 22px 22px;
  padding-left: 37px; /* отступ, чтобы текст не наехал на иконку */
}
.input-place {
  padding: 13px 93px 13px 0;
}
.form-header::after {
  content: "Mountain View, CA";
  position: absolute;
  left: 553px;
}
.btn-red {
 padding: 1px;
  position: absolute;
  left: 100.01%;
  border-radius: 0 8px 8px 0;
  background: #f65858;
  border: none;
  cursor: pointer;
}
.btn-red:active {
  transform: scale(0.97);
  transition: transform 0.1s;
}
.btn-red:hover {
  background-color: #3c0808;
}
.header-right {
  display: flex;
  align-items: center;
  gap: 22px;
}
.header-right div {
  display: flex;
  align-items: center;
  gap: 4px;
}
.header-right div img {
  width: 22px;
}
.txt-english {
  font-weight: 500;
  font-size: 14px;
  line-height: 143%;
  text-align: center;
  color: #212121;
  cursor: pointer;
}
.header-right div p:hover {
  text-decoration: underline;
  color: #00798a;
}
.header-right a {
  text-decoration: none;
  font-weight: 500;
  font-size: 14px;
  line-height: 143%;
  color: #212121;
  cursor: pointer;
}
.header-right a:hover {
  text-decoration: underline;
  color: #00798a;
}
.btn-green {
  background: #00798a;
  border-radius: 8px;
  border: none;
  font-weight: 500;
  font-size: 14px;
  line-height: 143%;
  color: #fff;
  padding: 8px 16px;
  cursor: pointer;
}
.btn-green:hover {
  background-color: #008f6d;
}
.btn-green:active {
  transform: scale(0.97);
  transition: transform 0.1s;
}
/* MAIN */
.top-main {
  display: flex;
  align-items: center;
  gap: 75px;
  margin-top: 81px;
  margin-bottom: 97px;
}
h1 {
  max-width: 600px;
  font-weight: 700;
  font-size: 42px;
  line-height: 124%;
  color: #212121;
  margin: 0;
}
.txt-in-top {
  max-width: 580px;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: #212121;
  padding-top: 24px;
  padding-bottom: 24px;
}
.btn-green01 {
  background: #00798a;
  border-radius: 8px;
  border: none;
  font-weight: 400;
  font-size: 16px;
  line-height: 150%;
  color: #fff;
  padding: 8px 16px;
  cursor: pointer;
}
.btn-green01:hover {
  background-color: #008f6d;
}
.btn-green01:active {
  transform: scale(0.97);
  transition: transform 0.1s;
}
/* EVENTS */
.events-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.events-head-left {
  display: flex;
  align-items: center;
  gap: 8px;
}
.events-head h3 {
  font-weight: 600;
  font-size: 28px;
  line-height: 129%;
  color: #212121;
}
.active-link {
  text-decoration: none;
  font-weight: 500;
  font-size: 16px;
  line-height: 150%;
  color: #00798a;
  cursor: pointer;
}
.active-link:hover {
  color: #072c31;
  text-decoration: underline;
}
.active-link:active {
  transform: scale(0.97);
  transition: transform 0.1s;
}
.grid {
  margin-top: 24px;
  margin-bottom: 40px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 36px;
}
.grid-item:hover {
  padding: 5px;
  cursor: pointer;
  transform: scale(1.03);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
  transition: transform 0.5s ease, box-shadow 0.3s ease;
}
.grid-item2:hover {
  padding: 5px;
  cursor: pointer;
  transform: scale(1.03);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
  transition: transform 0.5s ease, box-shadow 0.3s ease;
}
.grid-h5 {
  font-weight: 600;
  font-size: 20px;
  line-height: 120%;
  color: #212121;
  padding-top: 12px;
  padding-bottom: 8px;
}
.grid-p1 {
  font-weight: 500;
  font-size: 14px;
  line-height: 143%;
  color: #707070;
  padding-bottom: 8px;
}
.flex-in-grid1 {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 400;
  font-size: 14px;
  line-height: 143%;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: #212121;
  padding-bottom: 12px;
}
.flexes-inline {
  display: flex;
  align-items: center;
  gap: 16px;
}
.flex-in-grid2 {
  display: flex;
  align-items: center;
  gap: 6px;
}
.flex-in-grid3 {
  display: flex;
  align-items: center;
  gap: 6px;
}
.txt-and-link {
  margin-top: 100px;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.scroll-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 40px;
}

.grid2 {
  padding: 10px;
  display: flex;
  gap: 36px;
  overflow-x: auto;
  scrollbar-width: none; /* скрыть полосу прокрутки */
  
  scroll-behavior: smooth; /* плавный скролл */
}
.grid-item2 {
  flex: 0 0 auto; /* чтобы не сжимались */
  scroll-snap-align: start; /* каждая карточка — точка прилипания */
  width: 280px; /* фиксированная ширина (или % по желанию) */
  transition: transform 0.3s ease;
}
.grid2::-webkit-scrollbar {
  display: none; /* скрыть  */
}

.scroll-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  background: rgba(255, 255, 255, 0.8);
  border: none;
  cursor: pointer;
  font-size: 22px;
  padding: 8px 12px;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  transition: background 0.3s;
}

.scroll-btn:hover {
  background: rgba(255,255,255,1);
}

.scroll-btn.left { left: 0; }
.scroll-btn.right { right: 0; }

.scroll-img{
  width: 272px;
}

.second-part-top {
  background: rgba(151, 202, 209, 0.08);
  display: flex;
  align-items: center;
  gap: 74px;
  padding-right: 56px;
  margin-bottom: 59px;
}
.second-part-top:hover {
  transform: scale(1.03);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.second-part-top-txt {
  padding: 36px 0 36px 56px;
}
.h3-second-part {
  font-weight: 600;
  font-size: 28px;
  line-height: 129%;
  color: #212121;
}
.second-part-top-txt p {
  font-weight: 400;
  font-size: 16px;
  line-height: 150%;
  color: #212121;
  padding-top: 16px;
  padding-bottom: 16px;
}
.btn-red01 {
  background: #e32359;
  border-radius: 8px;
  color: white;
  padding: 8px 67px;
  border: none;
  cursor: pointer;
}
.btn-red01:hover {
  background: #5b031c;
}
.btn-red01:active {
  transform: scale(0.97);
  transition: transform 0.1s;
}


.modal{
    height: 100vh;
    width: 100%;
    background-color: rgba(0,0,0, 0.5);
    position: fixed;
    top: 0;
    left: 0;
    display: none;
    justify-content: center;
    align-items: center; 
    animation: fadeIn 0.2s ease;
}
.active{
    display: flex !important ;
}
.modal_content{
    background-color: white;
    color: black;
    width: 750px;
    padding: 10px;
}
/* .btnOpen{
    border: 1px solid black;
    background-color: white;
    color: black;
    padding: 5px 10px;
    margin: 20px;
    font-size: 14px;
    font-weight: 400;
} */
.btnCloseModal{
    border: none;
    background-color: rgb(198, 66, 66);
    border-radius: 8px;
    color: white;
    padding: 5px 10px;
    margin: 0 0 10px 670px;
    font-size: 12px;
    font-weight: 400;
    cursor: pointer;
}
.btnCloseModal:hover {
  background: #5b031c;
}
.btnSubmit{
    cursor: pointer;
    border: none;
    border-radius: 8px;
    background-color: rgb(7, 99, 58);
    color: white;
    padding: 10px 15px;
    margin-top: 15px;
    margin-bottom: 20px;
    margin-left: 50px;
    font-size: 14px;
    font-weight: 400;
    width: 100px;
}
.btnSubmit:hover {
 background-color: rgb(24, 175, 107);
}
.h3-modal{
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 10px;
    font-weight: 600;
    /* text-transform: uppercase; */
    font-size: 20px;

}
.image-modal{
    width: 347px;
    cursor: pointer;
}
.image-modal:hover {
  background: #5b031c;
}
.image-modal:active {
  transform: scale(0.97);
  transition: transform 0.1s;
}

.input-modal{
    width: 200px;
    height: 32px;
    border: 1px solid rgb(147, 136, 136);
    border-radius: 8px;
}
.label-modal{
    font-weight: 400;
    font-size: 14px;
    text-decoration-line: underline;
}
.divForLabelInput{
    display: flex;
    flex-direction: column;
    
    gap: 8px;
}
@keyframes fadeIn{
    from{
        opacity: 0;
        transform: scale(0.9);
    }
    to{
        opacity: 1;
        transform: scale(1);
    }
}
.imagePlusForm{
    display: flex;
    align-items: center;
    justify-content:space-evenly;
    
}



.h3-explore,
.h3-how-meetup {
  margin-bottom: 24px;
  font-weight: 600;
  font-size: 28px;
  line-height: 129%;
  color: #212121;
}
.mini-icons-row {
  display: flex;
  gap: 16px;
  margin-bottom: 64px;
}
.mini-icon-item {
  background: rgba(151, 202, 209, 0.08);
  border-radius: 8px;
  max-width: 135px;
}
.mini-icon-item:hover {
  transform: scale(1.03);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
}
.mini-icon-item img {
  padding: 22px 57.5px 6px 57.5px;
}
.mini-icon-item p {
  font-weight: 500;
  font-size: 16px;
  line-height: 150%;
  text-align: center;
  color: #212121;
  padding-bottom: 16px;
}
.h3-popular {
  font-weight: 600;
  font-size: 28px;
  line-height: 129%;
  color: #212121;
  margin-bottom: 16px;
}
.p-popular {
  font-weight: 400;
  font-size: 16px;
  line-height: 150%;
  color: #707070;
}
.cities-circle {
  display: flex;
  gap: 41.75px;
  margin-top: 28px;
  margin-bottom: 64px;
}
.city-name {
  font-weight: 600;
  font-size: 20px;
  line-height: 140%;
  text-align: center;
  color: #212121;
  padding-top: 24px;
  /* display: inline-block; /* обязательно для transform */
  /* transition: transform 0.2s ease, color 0.2s ease; */
}
.city-name:hover {
  /* transform: scale(1.05); */
  text-decoration: underline;
  color: #00798a;
  cursor: pointer;
}
.containers-flex {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
  margin-bottom: 64px;
}
.first-container,
.second-container {
  background: rgba(151, 202, 209, 0.08);
  border-radius: 8px;
  display: flex;
  gap: 24px;
  align-items: flex-start;
  padding: 32px 130px 24px 24px; /*одинаковый padding*/
}
.first-container:hover {
  cursor: pointer;
  transform: scale(1.03);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.second-container:hover {
  cursor: pointer;
  transform: scale(1.03);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.p-big {
  font-weight: 600;
  font-size: 20px;
  line-height: 120%;
  color: #212121;
}
.p-small {
  font-weight: 400;
  font-size: 16px;
  line-height: 150%;
  color: #212121;
  padding-top: 16px;
  padding-bottom: 16px;
}
.h3-friendship {
  font-weight: 600;
  font-size: 28px;
  line-height: 129%;
  color: #212121;
  margin-bottom: 16px;
}
.p-friendship {
  font-weight: 400;
  font-size: 16px;
  line-height: 150%;
  color: #707070;
  margin: 0 320px 28px 0;
}
.grid-friendship {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-bottom: 44px;
}
.grid-item-fr {
  padding-bottom: 14px;
  padding-left: 5px;
}
.grid-item-fr:hover {
  transform: scale(1.03);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
}
.grid-item-fr h4 {
  font-weight: 600;
  font-size: 18px;
  line-height: 156%;
  color: #212121;
  margin-top: 24px;
  margin-bottom: 12px;
}
.grid-item-fr p {
  font-weight: 400;
  font-size: 16px;
  line-height: 150%;
  color: #707070;
  padding-bottom: 16px;
  padding-right: 15px;
}
.grid-item-fr a {
  text-decoration: none;
  font-weight: 400;
  font-size: 16px;
  line-height: 150%;
  color: #00798a;
}
.grid-item-fr a:hover {
  cursor: pointer;
  color: #072c31;
  text-decoration: underline;
}
.footer-all {
  /* max-width: 1512px; */
  width: 100%;
  background: #212121;
  margin: 0 auto;
}
.container-footer {
  max-width: 1120px;
  margin: 0 auto;
}
.first-footer {
  border-bottom: 1px solid #707070;
}
.first-footer-flex {
  display: flex;
  align-items: center;
  gap: 55px;
  padding: 24px 0 25px 0;
}
.first-footer p {
  font-weight: 600;
  font-size: 16px;
  line-height: 150%;
  color: #f6f7f8;
}
.btn-gray {
  border: 2px solid #fff;
  border-radius: 6px;
  background: #212121;
  color: #fff;
  font-weight: 600;
  font-size: 16px;
  line-height: 150%;
  padding: 10px 14px;
}
.btn-gray:hover {
  cursor: pointer;
  transform: scale(1.03);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.btn-gray:active {
  transform: scale(0.97);
  transition: transform 0.1s;
}
.second-footer {
  padding-top: 24px;
}
.links {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  padding-bottom: 41px;
}
.link-item {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.a-big {
  text-decoration: none;
  font-weight: 400;
  font-size: 16px;
  line-height: 150%;
  color: #f6f7f8;
  cursor: pointer;
}
.a-big:hover {
  text-decoration: underline;
}
.a-small {
  text-decoration: none;
  font-weight: 400;
  font-size: 14px;
  line-height: 143%;
  color: #c5c4c4;
  cursor: pointer;
}
.a-small:hover {
  text-decoration: underline;
}

.p-follow {
  font-weight: 400;
  font-size: 16px;
  line-height: 150%;
  color: #f6f7f8;
  padding-bottom: 12px;
}
.social-links {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 50px;
}
.social-links-left {
  display: flex;
  align-items: center;
  gap: 32px;
}
.links-right {
  display: flex;
  align-items: center;
  gap: 12px;
}
.social-icons:hover {
  cursor: pointer;
  transform: scale(1.07);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.fourth-footer {
  padding-bottom: 40px;
}
.links-flex {
  display: flex;
  align-items: center;
  gap: 24px;
}
.links-flex p {
  font-weight: 400;
  font-size: 14px;
  line-height: 143%;
  color: #fff;
}
.links-fourth-footer {
  text-decoration: none;
  font-weight: 400;
  font-size: 14px;
  line-height: 143%;
  color: #c5c4c4;
}
.links-fourth-footer:hover {
  text-decoration: underline;
  cursor: pointer;
}
.animate__animated.animate__fadeIn {
  --animate-duration: 6s;
  --animate-delay: 7s;
}
.animate__animated.animate__fadeInRight {
  --animate-duration: 27s;
  --animate-delay: 3s;
}
.animate__animated.animate__fadeInUp {
  --animate-duration: 1s;
  --animate-delay: 2s;
}
.btn-red-back {
  background: #db2149;
  border-radius: 8px;
  border: none;
  font-weight: 500;
  font-size: 14px;
  line-height: 143%;
  color: #fff;
  padding: 8px 16px;
  cursor: pointer;
}
.btn-red-back:active {
  transform: scale(0.97);
  transition: transform 0.1s;
}
.events-plus-map {
  display: grid;
  grid-template-columns: 2.5fr 1fr; /* левый шире, правый уже */
  gap: 100px;
  align-items: start; /* чтобы они выровнялись по верхнему краю */
  margin-top: 81px;
}
.h3-NY {
  font-weight: 600;
  font-size: 28px;
  line-height: 129%;
  color: #000;
  margin-bottom: 16px;
}
.events-near {
  padding-bottom: 101px;
}
.events-near a {
  text-decoration: none;
  border-bottom: 4px solid #00798a;
  font-weight: 500;
  font-size: 20px;
  line-height: 140%;
  text-align: center;
  color: #00798a;
}

.filters {
  margin-top: 25px;
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.filter-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 200px;
}

/* .filter-group label {
  font-weight: 600;
  color: #4a5568;
  font-size: 0.9rem;
} */

.filter-select {
  padding: 12px 16px;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  background: white;
  font-size: 1rem;
  color: #2d3748;
  cursor: pointer;
  transition: all 0.3s ease;
  appearance: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 12px center;
  background-repeat: no-repeat;
  background-size: 16px;
  padding-right: 40px;
}

.filter-select:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.filter-select:hover {
  border-color: #cbd5e0;
}

.events-list {
  cursor: pointer;
  max-width: 900px;
  /* padding: 40px; */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  /* карточки будут автоматически перестраиваться — 3, 2 или 1 колонка в зависимости от ширины окна, без резких скачков. */
  gap: 15px;
}

.event-card {
  max-width: 450px;
  background: white;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  border: 1px solid #e2e8f0;
  opacity: 0;
  transform: translateY(10px);
  animation: fadeIn 0.3s ease forwards;
}

@keyframes fadeIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.event-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

.event-image {
  padding: 15px 24px 0 24px;
  width: 100%;
  height: 200px;
}

.event-content {
  padding: 24px;
}

.event-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #2d3748;
  margin-bottom: 12px;
  line-height: 1.4;
}

.event-description {
  color: #718096;
  margin-bottom: 16px;
  line-height: 1.5;
}

.event-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}

.event-badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.event-badge.online {
  background: #e6fffa;
  color: #00b894;
}

.event-badge.offline {
  background: #fff5e6;
  color: #f39c12;
}

.event-badge.category {
  background: #f0f4ff;
  color: #667eea;
}

.event-date {
  color: #4a5568;
  font-weight: 500;
  margin-bottom: 8px;
}

.event-attendees {
  color: #718096;
  padding-bottom: 10px;
  font-size: 0.9rem;
}

.no-events {
  text-align: center;
  padding: 60px 20px;
  color: #718096;
  font-size: 1.1rem;
  margin-left: 280px;
}

.no-events-icon {
  font-size: 2rem;
  margin-bottom: 20px;
  opacity: 0.5;
}

/* .btns-filter{
    margin-top: 16px;
    margin-bottom: 56px;
    display: flex;
    gap: 17px;
}
.filter-btn{
    background: #f6f7f8;
    border-radius: 40px;
    border: none;
    font-weight: 500;
    font-size: 14px;
    line-height: 100%;
    color: #212121;
    padding: 16px 42px 16px 16px;
    cursor: pointer;
    position: relative;
   
}
.filter-btn::after{
    position: absolute;
    content: "";
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    color: #000;
    background-image: url("../icons/Vector-down.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
} */
/* .filter-btn:hover{
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.filter-btn:active{
    transform: scale(0.97);
    transition: transform 0.1s;
} */
.h4-NY {
  font-weight: 700;
  font-size: 20px;
  line-height: 140%;
  color: #212121;
}
.p-NY {
  font-weight: 500;
  font-size: 12px;
  line-height: 133%;
  color: #212121;
}
.map-column iframe {
  margin-top: 14px;
  width: 100%;
  height: 285px;
  border: none;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.map-link {
  display: inline-block;
  margin-top: 8px;
  color: #00798a;
  text-decoration: none;
  font-weight: 500;
}
.map-link:hover {
  text-decoration: underline;
}
.flex-column-item {
  border-top: 1px solid #d9d9d9;
  max-width: 604px;
  padding: 16px 0 13px 5px;
  margin-bottom: 55px;
}
.flex-column-item:hover {
  transform: scale(1.02);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
}
.another-div-no-ideas {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.p01 {
  font-weight: 500;
  font-size: 14px;
  line-height: 143%;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: #7c6f50;
}
.p02 {
  font-weight: 500;
  font-size: 16px;
  line-height: 150%;
  color: #212121;
  padding-top: 4px;
  padding-bottom: 4px;
}
.p03 {
  font-weight: 500;
  font-size: 14px;
  line-height: 143%;
  color: #707070;
}
.p04 {
  font-weight: 400;
  font-size: 14px;
  line-height: 143%;
  color: #707070;
  padding-top: 48px;
}
.p05 {
  font-weight: 400;
  font-size: 14px;
  line-height: 143%;
  padding-top: 48px;
  color: #e32359;
  position: relative;
}
.p05::before {
  position: absolute;
  color: #707070;
  content: "";

  left: -12%;
  top: 85%;

  width: 4px;
  height: 4px;
  background-image: url("../icons/point.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.p04-p05 {
  display: flex;
  align-items: center;
  gap: 16px;
}