/* CSS Custom Properties for Figma Design System */
:root{
    /* ++++++++++++++++ Color property tokens +++++++++++++++*/
   --neutral-100:#02050E;
   --neutral-95:#0E131B;
   --neutral-90: #1C1F27;
   --neutral-80: #20242D;
   --neutral-75: #2B303A;
   --neutral-70: #3B404E;
   --neutral-60: #6E7584;
   --neutral-50: #838B9A;
   --neutral-40: #9AA1B1;
   --neutral-30: #B1B8C8;
   --neutral-25: #C9D0DE;
   --neutral-20: #E2E8F5;
   --neutral-15: #EAEFFA;
   --neutral-10: #F4F6FD;
   --neutral-5: #F8FAFF;
   --neutral-00: #FFFFFF;
   --primary-110:#03064E;
   --primary-100:#0007AE;
   --primary-95:#1118C0;
   --primary-90:#1F2BD5;
   --primary-80:#0C4CDC;
   --primary-70:#1C64F2;
   --primary-60:#3F83F8;
   --primary-60:#3F83F8;
   --primary-50:#3F83F8;
   --primary-40:#76A9FA;
   --primary-30:#A4CAFE;
   --primary-20:#C3DDFD;
   --primary-15:#E1EFFE;
   --primary-10:#EBF5FF;

/* ++++++++++++++++ Spacing and Font size property tokens +++++++++++++++*/
   --base-4: 4px; 
   --base-8:8px;
   --base-14:14px;
   --base-16:16px;
   --base-18:18px; 
   --base-20:20px;
   --base-22:22px;
   --base-24:24px;
   --base-32:28px; 
   --base-40:36px; 
   --base-48:48px; 
   --base-64:64px;
   --base-80:68px;
   --base-88:88px;
   --base-96:96px;
   --base-128:128px;
   --base-136:136px;
   --base-148:148px;
   --base-156:156px;
   --base-164:164px;
   --base-164:164px;
   --base-172:172px;
   --base-180:180px;
   --base-188:188px;
   --base-196:196px;
   --base-204:204px;
   --base-212:212px;
   /* ++++++++++++++++ Font-family property tokens +++++++++++++++*/
   --type-body: "IBM Plex Mono", monospace;
   --type-header:"rubik", sans-serif;
   --type-logo:'IBM Plex Sans Condensed', sans-serif;
   /* ++++++++++++++++ Font-weight property tokens +++++++++++++++*/
   --weight-extralight:200;
   --weight-light:300;
   --weight-regular:400;
   --weight-medium:500;
   --weight-semibold:600;
   --weight-bold:700;
   --weight-extrabold:800;
   --weight-black:900;
}
.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);
}
.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);
    }
}

.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;
    }
    
}