/* Style for the welcome-to-ship-money section */
.welcome-to-ship-money {
    position: relative; /* Ensures the overlay and content are positioned correctly */
    background-image: url('../images/crew-resources/banner-image.png'); /* Replace with your background image path */
    background-size: cover; /* Ensures the image covers the entire section */
    background-position: center; /* Centers the image */
    background-repeat: no-repeat; /* Prevents the image from repeating */
    height: 445px; /* Adjust the height as needed */
    text-align: center; /* Centers the text */
    padding: 75px 0;
}

/* Overlay color with gradient */
.welcome-to-ship-money::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(313.82deg, rgba(31, 106, 187, 0.8) 13.8%, rgba(63, 183, 253, 0.8) 78.52%, rgba(72, 213, 255, 0.8) 122.95%);
    z-index: 1; /* Ensures the overlay is above the background image */
}
.welcome-to-ship-money .team-behind-text {
    -webkit-text-stroke: 1px #FFFFFF; /* Adds a white stroke to the text */
    color: transparent;
    
}

/* Content inside the section */
.welcome-to-ship-money h2,
.welcome-to-ship-money h1,
.welcome-to-ship-money p {
    position: relative; /* Ensures the text is above the overlay */
    z-index: 2; /* Places the text above the overlay */
    color: #FFFFFF; /* Makes the text color white for better contrast */
    margin: 0;
}

.welcome-to-ship-money p {
    font-size: 24px;
    line-height: 36px;
    font-weight: 700;
}

.crew-resources{
    text-align: center;
    padding: 92px 147px;
}
.crew-resources a {
    color: #FFFFFF;
    text-decoration: none;
}

.crew-resources-description {
    font-size: 24px;
    line-height: 36px;
    font-weight: 700;
}
.crew-resources .row{
    row-gap: 60px;
    margin-top: 56px;
}
.crew-resources-card{
    background: linear-gradient(230.42deg, #2292F0 30.82%, #9DFDFF 126%, #37A4F2 171.08%);
    border-radius: 12px;
    height: 263px;
    padding: 20px;
    color: #FFFFFF;
    text-align: left;
    text-transform: capitalize;
    position: relative;
    transition: background 2s ease-in-out; 
}
/* Hover effect for the background */
.crew-resources-card:hover {
    background: linear-gradient(230.42deg, #37A4F2 30.82%, #9DFDFF 126%, #2292F0 171.08%);
}

.crew-resources-card span{
    position: absolute;
    right: 20px;
}

.crew-resources-card:hover span{
    transform: rotate(45deg); /* Rotates the image by 30 degrees */
    transition: transform 0.3s ease-in-out; /* Smooth animation over 0.3 seconds */
}

.crew-resources-card h3{
    margin-top: 16px;
    font-size: 24px;
    line-height: 32px;
    font-weight: 700;
}

.frequently-asked-questions {
    text-align: center;
}
.accordion {
    padding: 0 100px;
}

/* Remove border from accordion items */
.accordion-item {
    border-bottom: 1px solid #CDD6DA; /* Removes the border around each accordion item */
    border-left: 0;
    border-right: 0;
    border-top: 0;
    padding: 30px 0;
}
.accordion-item:last-of-type {
    border: none;
}

/* Remove border from accordion buttons */
.accordion-button {
    background-color: transparent !important; /* Removes the background color */
    border: none; /* Removes the border */
    box-shadow: none; /* Removes the default shadow */
    color: #000; /* Optional: Set text color to black */
    font-size: 32px;
    line-height: 120%;
    font-weight: 700;
}

/* Remove border from accordion headers */
.accordion-header {
    background-color: transparent !important; /* Ensures the header has no background */
}
.accordion-body {
    text-align: left;
    font-size: 20px;
    line-height: 180%;
    font-weight: 400;
}

/* Optional: Remove border from the accordion collapse */
.accordion-collapse {
    border: none; /* Removes the border around the collapsible content */
}
.accordion-button:not(.collapsed), .accordion-button:focus {
    box-shadow: none;
    color: #000;
}

/* Optional: Add hover effect for better UX */
.accordion-button:hover {
    background-color: rgba(0, 0, 0, 0.05); /* Light hover effect */
}
.accordion-button:not(.collapsed)::after {
    background-image: url('../images/icons/up-arrow.png'); 
    transform: rotate(0deg); /* Rotates the icon */
}
.accordion-button::after {
    background-image: url('../images/icons/left-arrow.png');
    height: 24px;
    align-self: baseline;
}

.more-questions{
    text-align: center;
    margin-top: 144px;
}

.more-questions-card span {
    margin-left: 10px;
}

.more-questions-card .text-dark:hover span img{
    transform: rotate(45deg); /* Rotates the image by 30 degrees */
    transition: transform 0.3s ease-in-out; /* Smooth animation over 0.3 seconds */
}

.more-questions .team-behind-text {
    font-size: 142px;
}

.more-questions-description {
    font-size: 48px;
    line-height: 78px;
    font-weight: 700;
}
.more-questions-card {
    gap: 20px;
}
.more-questions-card a{
    text-decoration: none;
}
.get-a-shipMoney-card {
    padding: 50px 97px;
}

.get-a-shipMoney-card .team-behind-text {
    line-height: 140px;

}
.get-a-shipMoney-card .heading-large{
    /*margin-top: -100px;*/
}

.get-a-shipMoney-card .team-behind-text span {
    color: #3479FF;
    -webkit-text-stroke: 0px #FFFFFF;
}

.get-a-shipmoney-card-img {
    padding-left: 390px;
    margin-top: -380px;
}
.get-a-shipMoney-card-steps {
    display: none;
}

.keeping-your-money-safe {
    padding-left: 101px;
    padding-right: 159px;
}

.keeping-your-money-safe .heading-large{
    margin-bottom: 24px;
    padding-left: 60px;
}
.keeping-your-money-safe-text {
    font-size: 24px;
    line-height: 36px;
    font-weight: 700;
    padding-left: 60px;
}
.keeping-your-money-safe-card-content {
    display: flex;
    padding: 52px 60px;
    column-gap: 52px;
    border-bottom: 1px solid #CDD6DA;

}
.keeping-your-money-safe-card-content-point {
    color: #3EB4FB;
    font-size: 36px;
    font-weight: 700;
    line-height: 120%;
}
.keeping-your-money-safe-card-content-text {
    font-weight: 700;
    font-size: 24px;
    line-height: 140%;
}
.need-more-help-remember-section {
    background: linear-gradient(304.89deg, #1F6ABB 31.87%, #3FB7FD 89.83%, #48D5FF 119.33%);
}

.need-more-help-remember {
    padding: 141px 160px 70px;
    display: flex;
    column-gap: 105px;
    color: #FFFFFF;
}

.need-more-help {
    flex: 0 0 52%;
}
.need-more-help .heading-large, .remember .heading-large {
    color: #FFFFFF;
    line-height: 86px;
    margin: 0;
    text-transform: capitalize;
}

.need-more-help-text{
    font-size: 24px;
    line-height: 36px;
    font-weight: 700;
    margin-top: 24px;
}

.remember-cards{
    margin-top: 51px;
    display: flex;
    row-gap: 80px;
    flex-direction: column;
}

.remember-card h2 {
    font-size: 32px;
    line-height: 45px;
    font-weight: 700;
    margin-top: 48px;
    margin-bottom: 16px;
}
.remember-card .remember-card-text {
    font-size: 20px;
    line-height: 33px;
    font-weight: 400;
}
.need-more-help .btn-contact-us {
    text-transform: capitalize;
}

@media (min-width: 1200px) {
    .more-questions .team-behind-text{
        font-size: 130px;
    }

    .keeping-your-money-safe .heading-large {
        font-size: 65px;
    }

    .need-more-help .heading-large, .remember .heading-large{
        font-size: 56px;
    }
}

@media (max-width: 576px) { 
    .welcome-to-ship-money .heading-large {
        font-size: 48px;
        line-height: 62px;
    }
    .welcome-to-ship-money .team-behind-text {
        line-height: 78px;
        font-size: 64px;
    }

    .crew-resources {
        padding: 60px 18px;
    }
    .crew-resources .heading-large, .frequently-asked-questions .heading-large {
        font-size: 48px;
        line-height: 62px;
    }
    .crew-resources .row {
        row-gap: 32px;
    }
    .accordion {
        padding: 0 35px;
    }
    .more-questions .team-behind-text {
        font-size: 64px;
        line-height: 78px;
    }
    .more-questions-description {
        font-size: 24px;
        line-height: 36px;
    }
    .more-questions-card {
        flex-direction: column;
        gap: 16px !important;
        margin-bottom: 16px;
        align-items: center;
    }
    .more-questions {
        margin: 60px 0;
    }

    .more-questions-card div {
        margin-bottom: 0 !important;
        width: fit-content;
        
    }
    .get-a-shipMoney-card {
        padding: 30px 18px;
    }

    .get-a-shipMoney-card .heading-large {
        font-size: 30px;
        line-height: 35px;
        margin-top: 0px;
    }
    .get-a-shipMoney-card .team-behind-text {
        font-size: 75px;
        line-height: 63px;
    }
    .get-a-shipmoney-card-img{
        display: none;
        margin: 0;
        padding: 0;
    }
    .get-a-shipMoney-card-steps, .get-a-shipMoney-card-step {
        display: flex;
        flex-direction: column;
    }
    .get-a-shipMoney-card-steps {
        gap: 30px;
    }
    .get-a-shipMoney-card-step img{
        max-width: fit-content;
        align-self: center;
    }
    .get-a-shipMoney-card-step-header {
        display: flex;
        gap: 30px;
    }
    .number-step {
        font-size: 57px;
        line-height: 66px;
        font-weight: 700;
    }
    .number-summary h5{
        font-size: 30px;
        line-height: 35px;
        font-weight: 700;
    }
    .number-summary p{
        font-size: 20px;
        line-height: 30px;
        font-weight: 400;
    }
    .keeping-your-money-safe{
        padding: 0 18px;
    }
    .keeping-your-money-safe .heading-large {
        padding: 0;
        font-size: 42px;
        line-height: 62px;
        text-align: center;
    }
    .keeping-your-money-safe-text {
        padding: 0;
        text-align: center;
    }
    .keeping-your-money-safe-card-content {
        padding: 32px 0;
    }
    

    .need-more-help-remember {
        padding: 60px 18px;
        flex-direction: column;
        text-align: center;
    }
    .need-more-help {
        margin-bottom: 112px;
    }
    .need-more-help .heading-large, .remember .heading-large {
        font-size: 64px;
        line-height: 72px;
    }
}