/* ------------ GOOGLE FONTS ------------ */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');

/* ------------ VARIABLES ------------ */


/* ----------- SLIDER ------------ */



.swiper{
 margin-top: 0px;
  max-width:90%;
}
.circle-gradient {
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, #9DEBF5, #4EC3D4);
}
.swiper-wrapper{
  max-width:90%;
  height: 20em;
  display: flex;
  align-items: center;
}

.card{
  width: 14em;
  height: 90%;
  background-color: #fff;
  border-radius: 2em;
  box-shadow: 0 0 2em rgba(0, 0, 0, .2);
  padding: 2em 1em;

  display: flex;
  align-items: center;
  flex-direction: column;

  margin: 0 2em;
}

.card__image{
  width: 7em;
  height: 7em;
  border-radius:50%;
  border: 5px solid var(--color);
  padding: 3px;
  margin-bottom: 2em;
}

.card__image img{
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.card__content{
  display: flex;
  align-items: center;
  flex-direction: column;
}

.card__title{
  font-size: 1.5rem;
  font-weight: 500;
  position: relative;
  top: .2em;
}

.card__name{
  color: var(--color);
}

.card__text{
  text-align: center;
  font-size: 1.1rem;
  margin: 1em 0;
}

.card__btn{
  background-color: var(--color);
  color: #FAB10A;
  font-size: 1rem;
  text-transform: uppercase;
  font-weight: 600;
  border: none;
  padding: .5em;
  border-radius: .5em;
  margin-top: .5em;
  cursor: pointer;
}

.popup {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            justify-content: center;
            align-items: center;
            z-index: 999;
            margin-top: 50px;
        }

        .popup-content {
            background: #fff;
            padding: 20px;
            border-radius: 10px;
            text-align: center;
            position: relative;
            max-width: 90%;
            max-height: 90%;
            overflow: auto;
        }

        .popup h1 {
            position: absolute;
            top: 10px;
            right: 10px;
            cursor: pointer;
            font-size: 24px;
            color: #333;
        }

        .popup-content img {
            max-width: 100%;
            height: auto;
        }

        @media only screen and (max-width: 600px) {
            .popup-content {
                max-width: 95%;
                max-height: 70%;
            }

            .popup-content img {
                max-height: 50vh;
                max-width: 40vh;
            }
        }

        .container-xxl iframe {
            max-width: 100%;
            max-height: 100%;
        }

        @media only screen and (max-width: 768px) {
            .container-xxl iframe {
                height: 300px;
            }
        }
        
        @keyframes fadeIn {
          from {
              opacity: 0;
          }
          to {
              opacity: 1;
          }
      }

      @keyframes minimizePopup {
          from {
              transform: scale(1);
              opacity: 1;
          }
          to {
              transform: scale(0.1);
              opacity: 0;
          }
      }