@import url(theme.css);

section{
    background: var(--content-background-color);
    display: flex;
    justify-content: center; 
    align-items: center; 
    min-height: 100vh;
    width: 100%; 
    padding-bottom: var(--padding-m);
    margin-top: calc(3*var(--margin-l)) !important;
}

#Servicecard-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;    
    gap: 20px;
    margin-top: var(--margin-ml);
}

.modalities-card {
    display: flex;
    max-width: 70%;
    padding: var(--padding-l);
    background: var(--normal-background-color);
    border-radius:var(--card-border-radius);
    box-shadow: 0 4px var(--card-border-radius) rgba(0, 0, 0, 0.1);
    gap: 20px;
    flex-wrap: wrap; 
    justify-content: center; 
  }

  .modalities-card:hover{
    background: var(-normal-background-color);
  }
  
  .card-image {
    flex: 1 1 40%;
  }
  
  .card-image img {
    width: 100%;
    border-radius: var(--card-border-radius);
    object-fit: cover;
    height: 300px;
  }
  
  .card-content {
    flex: 1 1 55%;
    display: flex;
    flex-direction: column;
  }
  
  .card-content h4 {
    font-size: var(--h4-font-size);
    margin-bottom: var(--margin-s);
    color: var(--primary-color);
    font-family: var(--main-heading-font);
}
  
  .card-content .description {
    font-size: calc(1.2*var(--paragraph-font-size));
    color: var(--card-text-color);
    margin-bottom: var(--margin-m);
    font-family: var(--body-font);
    line-height: 1.3;
  }
  
  .benefits {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: var(--margin-ms);
  }
  
  .benefit-card {
    background-color:var(--icon-background-color);
    padding: var(--padding-ms) var(--padding-m);
    border-radius: 10px;
    font-family: var(--main-heading-font);
    font-size: var(--paragraph-font-size);
    animation: bounceOut 0.8s ease forwards;
    animation-delay: var(--delay);
    opacity: 0;
    color: var(--secondary-color);
  }
  
  .session-duration {
    font-size: calc(1.1*var(--paragraph-font-size));
    font-family: var(--main-heading-font);
    margin-top: var(--margin-s);
  }
  
  @keyframes bounceOut {
    0% {
      transform: scale(0.8);
      opacity: 0;
    }
    50% {
      transform: scale(1.1);
      opacity: 1;
    }
    100% {
      transform: scale(1);
      opacity: 1;
    }
  }
  
  .benefit-card:nth-child(1) { --delay: 0.5s; }
  .benefit-card:nth-child(2) { --delay: 0.6s; }
  .benefit-card:nth-child(3) { --delay: 0.7s; }
  .benefit-card:nth-child(4) { --delay: 0.8s; }
  

  @media (max-width: 768px) {
    .modalities-card {
      flex-direction: column;
      max-width: 90%;
      padding: var(--padding-m);
      gap: var(--margin-m);
    }
  
    .card-image {
      flex: 1 1 100%;
    }
  
    .card-image img {
      height: 200px;
    }
  
    .card-content {
      flex: 1 1 100%;
    }
  
    .card-content h4 {
      font-size: calc(1.1 * var(--h4-font-size));
      text-align: center;
    }
  
    .card-content .description {
      font-size: var(--paragraph-font-size);
      text-align: justify;
    }
  
    .benefits {
      justify-content: center;
    }
  
    .benefit-card {
      font-size: 0.95rem;
      padding: var(--padding-s) var(--padding-m);
      text-align: center;
    }
  
    .session-duration {
      text-align: center;
      font-size: var(--paragraph-font-size);
    }
  }