/* Hero Section */
.exchange-hero {
    background-color: #f6fffa;
    padding: 300px 60px 60px;
    position: relative; /* Create a positioning context for the vectors */
    overflow: hidden; /* Hide any overflow from the vectors */
}

.exchange-hero .banner {
    padding: 40px;
    background-color: var(--lb-blue-dark);
    color: white;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative; /* Ensure the content stays above the vectors */
    z-index: 0; /* Place the banner content above the vectors */
    overflow: hidden;
}

/* Left Vector */
.exchange-hero .left.vector {
    position: absolute;
    top: 50%; /* Center vertically */
    left: -20%; /* Push it slightly outside the banner */
    transform: translateY(-50%); /* Adjust for vertical centering */
    width: 40%; /* Limit the width to 40% of the banner */
    height: auto; /* Maintain aspect ratio */
    overflow: hidden; /* Hide overflow */
    z-index: -1; /* Place it behind the banner content */
}

/* Right Vector */
.exchange-hero .right.vector {
    position: absolute;
    top: 50%; /* Center vertically */
    right: -20%; /* Push it slightly outside the banner */
    transform: translateY(-50%); /* Adjust for vertical centering */
    width: 40%; /* Limit the width to 40% of the banner */
    height: auto; /* Maintain aspect ratio */
    overflow: hidden; /* Hide overflow */
    z-index: -1; /* Place it behind the banner content */
}

/* Hero Heading */
.exchange-hero h1 {
    font-family: CabinetGrotesk-Bold, sans-serif;
    font-size: 52px;
    margin-bottom: 1.25rem;
}

/* Hero Body */
.exchange-hero .body {
    max-width: 40rem;
}

/* Hero Paragraph */
.exchange-hero p {
    font-family: 'schibsted-grotesk', sans-serif;
    font-size: 1.25rem;
    font-weight: 200;
    margin-bottom: 2rem;
}

/* Hero Button */
.exchange-hero-btn {
    font-weight: 300;
    font-size: 18px;
    background-color: var(--lb-green);
    border: none;
    color: white;
    padding: 13px 41px;
    border-radius: 35px;
    cursor: pointer;
}

/* Marquee */

.marquee {
    margin-top: 3.75rem;
    padding: 0.8125rem 2.5625rem;
    font-size: 1.125rem;
    display: inline-block;
    animation: marquee 10s linear infinite;
}

.marquee-content{
    display: flex;
    gap: 2.5rem;
}

.left{
    display: flex;
}

.left .icon {
    width: 40px;
    height: auto;
    margin-right: 20px;
}

.currency {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    gap: 2.5rem;
}

.currency .name, .currency .numbers {
    font-family: 'schibsted-grotesk', sans-serif;
    font-size: 16px;
    font-weight: 300;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.25rem;
    color: var(--lb-blue-dark)
}

.currency .short, .currency .change {
    font-size: 14px;
    font-weight: 200;
    color: var(--black-mid);
}

.currency .numbers {
    text-align: right;
}


.exchange-pathways .heading {
    max-width: 800px;
    margin: 0 auto;
}

.exchange-pathways {
    padding: 60px 40px 100px;
    text-align: center;
}

.exchange-pathways p {
    font-family: 'schibsted-grotesk', sans-serif;
    font-size: 22px;
    font-weight: 200;
    color: var(--lb-blue-pt);
}

.exchange-pathways h2 {
    font-family: CabinetGrotesk-Bold, sans-serif;
    margin-bottom: 1.25rem;
    color: var(--lb-blue-dark);
}


.exchange-pathways .section-body {
    display: flex;
    justify-content: space-between;
    gap: 2.5rem;
    margin-top: 3.75rem;
    align-items: center;
}

.slide-counter {
    display: none;
}

.slide {
    width: 10px;
    height: 10px;
    background-color: #d9d9d9;
    border-radius: 50%;
}

.slide.active{
    background-color: var(--lb-green);
}

.section-body .steps {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    flex: 1;
}

.exchange-pathways .step{
    display: flex;
    gap: 1.25rem;
    border: 1px solid var(--gray-dark);
    border-radius: 8px;
    padding: 1.25rem;
}

.exchange-pathways .step.active {
    background: linear-gradient(180deg, #e1ffee2e 0%, #d9f8d22e 100%);
}

.step .number{
    flex: 0 0 auto;
    font-size: 16px;;
    width: 30px;
    height: 30px;
    background-color: var(--gray-mid);
    color: var(--black-mid);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: CabinetGrotesk-Bold, sans-serif;
}

.step.active .number {
    background-color: var(--lb-green);
    color: white;
}

.step-body {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    text-align: left;
}

.step-title {
    font-family: CabinetGrotesk-Bold, sans-serif;
    font-size: 20px;
    color: var(--lb-blue-dark);
}

.steps .step-description {
    font-family: 'schibsted-grotesk', sans-serif;
    font-size: 16px;
    color: var(--black-mid);
}

.section-body .gif {
    flex: 2;
    border-radius: 12px;
    border: 1px solid var(--gray-dark);
}

.perks-section {
    padding: 60px 40px 100px;
    text-align: center;
}

.perks-section h2 {
    font-family: CabinetGrotesk-Bold, sans-serif;
    margin-bottom: 1.25rem;
    color: var(--lb-blue-dark);
}

.perks {
    margin-top: 5rem; /* 80px */
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Default: 5 items per row */
    gap: 1.25rem; /* 20px gap between cards */
    width: 100%; /* Allow the grid to span the full width of the container */
}

/* Platform card items */
.perk-card-item {
    display: flex;
    flex-direction: column;
    padding: 1.25rem; /* 20px */
    background-color: var(--gray-light);
    border: 1px solid var(--gray-dark);
    border-radius: 0.75rem; /* 12px */
    box-sizing: border-box;
    min-width: 200px; /* Ensure cards never shrink below 200px */
    width: 100%; /* Allow cards to grow dynamically */
}

/* Platform body */
.perk-body p{
    font-family: 'schibsted-grotesk', sans-serif;
    text-align: left;
    color: var(--lb-blue-text);
    font-size: 18px;
    font-weight: 300;
}

/* Platform icon */
.perk-icon {
    width: 3rem; /* 48px */
    height: 3rem; /* 48px */
    margin-bottom: 1.25rem; /* 20px */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    border-radius: 50%;
}

.green {
    color: var(--lb-green);
}

.blue {
    color: #0b81ff;
}

.purple {
    color: #9747ff;
}

.yellow {
    color: #ffd42a;
}

.warnings {
    display: flex;
    padding: 160px 60px;
    gap: 2rem;
    font-family: 'schibsted-grotesk', sans-serif;
    font-size: 18px;
    font-weight: 200;
    background-color: #f6fffa;
}

.warnings h2 {
    font-family: CabinetGrotesk-Medium, sans-serif;
    font-size: 36px;
    margin: 20px auto;
    text-align: left;
    font-weight: 300;
}


/* Responsive Adjustments */

@media (max-width: 1200px) {
    .warnings{
        padding: 40px;
        flex-direction: column;
    }

    .warnings .inner-section {
        max-width: 800px;
        margin: auto;
    }


    
}


@media (max-width: 768px) {
    .exchange-hero .left.vector,
    .exchange-hero .right.vector {
        width: 50%; /* Increase the width for smaller viewports */
    }

    .exchange-hero .left.vector {
        left: -25%; /* Adjust positioning for smaller screens */
    }

    .exchange-hero .right.vector {
        right: -25%; /* Adjust positioning for smaller screens */
    }

    .exchange-hero h1 {
        font-size: 48px;
    }

    .exchange-hero .exchange-hero-btn {
        width: 100%;
        padding: 18px 41px;
    }

    section h2 {
        font-size: 40px;
    }

    .perks {
        grid-template-columns: repeat(2, 1fr);
    }

    .exchange-pathways .section-body {
        flex-direction: column;
    }

    .slide-counter {
        display: flex;
        gap: 10px;
    }

    .exchange-pathways .step {
        display: none;
    }

    .exchange-pathways .step.active {
        display: flex;
        padding: 40px;
    }

    .step.active .step-title {
        font-size: 22px;
    }

    .step.active .step-description {
        line-height: 1.5rem;
        font-size: 18px;
    }

}

@media (max-width: 580px) {
    .perks {
        grid-template-columns: repeat(1, 1fr);
        max-width: 400px;
        margin: auto;
    }
}

@media (max-width: 480px) {
    .exchange-hero .left.vector,
    .exchange-hero .right.vector {
        width: 60%; /* Allow the vectors to take up more space */
    }

    .exchange-hero .left.vector {
        left: -30%; /* Adjust positioning for very small screens */
    }

    .exchange-hero .right.vector {
        right: -30%; /* Adjust positioning for very small screens */
    }

    
}