.ad-1{
    display: grid;

    background: url('assets/JPEG/ad-1-support.jpg');
    background-repeat: no-repeat;
    background-position: center 20%;
    background-size: cover;

    padding: var(--size-300);
    width: 100%;
    height: 400px;

    align-content: center;
    text-align: center;
    place-items: center;
    margin: 12px 0px;
}

.ad-1 article{
    font-size: var(--fs-600);
    font-weight: var(--fw-bold);
    color: var(--clr-base-100);
    justify-content: center;
    text-shadow:  4px 4px 8px var(--clr-base-900);
    max-width: 20ch;
}

.accordion{
    width: 95%;
    font-size: var(--fs-600);
    font-weight: var(--fw-bold);
    margin: 4px auto 16px auto;
    color: var(--clr-base-100);
    overflow: hidden;
}

.accordion-header{
    position: relative;
    z-index: 5;
    display: flex;
    justify-content: space-between;
    padding: var(--size-200) var(--size-600);
    background-color: var(--tertiary-accent-400);
    border-radius: 0 0 32px 32px;
}

.accordion-header svg{
    width: 40px;
    height: 40px;
    fill: var(--clr-base-100);
}

.accordion-btn{
    background: none;
    border: none;
    cursor: pointer;
    opacity: 0.75;
}

.accordion-body-wrapper{
    --body-color: hsl(0,1.2%,15.9%);

    position: relative;
    bottom: 50px;
    background-color: var(--body-color);
    border-radius: 32px;

    color: var(--clr-base-100);
    opacity: 0;
    width: 100%;
    height: 0px;
    margin: 0 auto;
}

.accordion-body-wrapper * {
    user-select: text;
}

.accordion-body{
    padding: var(--size-800)
}

.map-wrapper{
    padding: var(--size-200);
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    place-items: center;
    gap: 1rem;
    user-select: none;
}

.map-wrapper iframe{
    margin: 0.5rem 1rem;
    width: 200px;
    height: 200px;
    border-radius: 32px;
}

.ticket-pane{
  /*background*/
  background: url('./assets/JPEG/ticket-ad.jpg');
  background-size: cover;
  background-position: center 35%;

  width: 95vw;
  height: 800px;
  padding: var(--size-600);
  margin: 0 auto;
  margin-top: 2rem;
  margin-bottom: 1.5rem;
}

.ticket-pane article{
  font-size: var(--fs-700);
  font-weight: var(--fw-bold);
  color: var(--clr-base-100);
  max-width: 100%;
  max-height: 100%;
}

.contacts-grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    place-items: center;
    padding: var(--size-500);
}

.contacts-card{
    width: 400px;
    height: 300px;
    background-color: var(--secondary-color);
}

#contacts-message{
    background: url('assets/JPEG/woman-using-phone-car.jpg');
    background-size: cover;
    background-position: center right;
}

#contacts-chat{
    
}

.title{
    font-size: var(--fs-500);
    font-weight: var(--fw-bold);
}

.text-content{
    font-size: var(--size-400);
    font-weight: var(--fw-regular);
    list-style: circle;
}
