@import url('./tokens.css');
.section-carousel
{
    max-width: 1440px;
    margin: 0 auto; 
    padding-top:var(--base-180);
    padding-bottom:var(--base-180);
    padding-left:var(--base-24);
    padding-right:var(--base-24);
    
    
}
.section-carousel h1
{
    font-family: var(--type-header);
    font-size: var(--base-64);
    font-weight: var(--weight-medium);
    color: var(--primary-100);
    line-height: 1.2;
    margin-bottom: var(--base-48);
    text-align: left;
}

.header-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.carousel-controls {
    display: flex;
    gap: var(--base-16);
}

.carousel-btn {
    background-color: var(--neutral-20);
    color: var(--primary-100);
    padding: var(--base-16);
    border: none;
    border-radius: var(--base-48);
    font-size: var(--base-24);
    font-weight: var(--weight-medium);

}

.carousel-btn:hover {
    background-color: var(--primary-100);
    color: var(--neutral-00);
   cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 16 16"><circle cx="8" cy="8" r="6" fill="black" opacity="0.3"/></svg>'), auto;
}
.card-carousel 
{
    background-color: var(--neutral-20);
    border-radius: var(--base-24);
    padding:var(--base-24);
    gap: 24px;
    flex-direction: row;
    align-items: center;
    justify-content: space-between; /* Changed from center to space-between */
  
}
.card-carousel img
{
    width: 454px;
    height: 545px;
    object-fit: cover;
    border-radius: var(--base-16);
}
.card-inactive {
    display: none;
}

.card-active {
    display: flex; /* Changed from block to flex */
    animation: slideInRight 0.3s ease-out;
}

/* Animation Classes */
@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}
.move3  {
    animation: move3 linear;
    animation-timeline: view();
  }

@keyframes move3 {
    0% {
        transform: scale(0.7) translate(0px, 0px);
    }
    30% {
      transform: scale(0.8) translate(0px, 0px);
  }
    60% {
        transform: scale(1) translate(0px, 100px);
    }
    75% {
        transform: scale(0.9) translate(0px, 170px);
    }
    90% {
        transform: scale(0.8) translate(0px, 250px);
    }
    100% {
      transform: scale(0.7) translate(0px, 250px);
  }
}
.card-content {
display:flex;
flex-direction: column;
padding:var(--base-24);
}

.card-content p {
    font-family: var(--type-body);
    font-size: var(--base-24);
    color: var(--neutral-80);
    margin-bottom: var(--base-48);
    line-height: 1.5;
}

.card-content h3 {
    font-family: var(--type-header);
    font-size: var(--base-20);
    font-weight: var(--weight-semibold);
    color: var(--neutral-100);
    line-height: 1.2;
    margin-bottom:var(--base-8);
}

.card-content h4 {
    font-family: var(--type-body);
    font-size: var(--base-20);
    color: var(--neutral-70);
    font-weight: var(--weight-regular);
    line-height: 1.2;
    margin-top:0px;
}

@media only screen and (max-width: 992px)
{
    .card-carousel
    {
        flex-direction: column;
    }
    .card-carousel img
    {
        width: 100%;
    }
    .section-carousel h1 
    {
        font-size: var(--base-48);
    }  
    .header-section
    {
        flex-direction: column;
        padding-bottom: var(--base-24);
    } 
    .card-carousel
    {
        padding: var(--base-8);
    }
    .card-content
    {
        padding: var(--base-8);
    }
        .card-content p
    {
        font-size: var(--base-18);
        margin-bottom: var(--base-24);
    }
    .card-carousel img
    {
        height: 344px;
    }
    .card-carousel h4
    {
       margin-bottom: 0px;
    }
    
}