/* Testimonial cards marquee Start */
.testimonials-marquee-section {
  background: linear-gradient(161deg, #94E7FD -3%, #EAFFF9 88%);
  overflow: hidden;
}

.marquee-wrapper {
  width: 100%;
  overflow: hidden;
  position: relative;
}

.testimonial-marquee {
  display: flex;
  gap: 32px;
  flex-wrap: nowrap;
  width: max-content;
  animation: marquee-left 100s linear infinite;
  cursor: grab;
  animation-play-state: running;
  /* Direction control */
}

.testimonial-marquee:hover {
    animation-play-state: paused; /* stops on hover */
}

.testimonial-marquee[data-direction="right"] {
  animation-name: marquee-right;
  animation-duration: 100s; 
}

.testimonial-card {
  /*min-width: 320px;
  max-width: 400px;*/
  min-width: 220px; /* narrower cards */
  max-width: 280px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 2px 12px rgba(52, 115, 176, 0.06);
  padding: 24px;
  margin-bottom: 12px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
}

.testimonial-author {
  font-size: 1rem;  
  margin-top: 12px;
  font-weight: 500;
  text-align: center;   /* ✅ center inside */
  width: 100%;    
}

@keyframes marquee-left {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); } /* ✅ Only shift by half, since we doubled content */
}

@keyframes marquee-right {
  0%   { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}
/* Testimonial cards marquee End */

/* Comapny Timelines marquee Start */
.timeline-marquee {
  overflow: hidden;
  width: 100%;
}

.timeline-track {
  display: flex;
  min-width: max-content;
  animation: timeline-scroll 80s linear infinite;
  cursor: grab;
  animation-play-state: running;
}

.timeline-track:hover {
    animation-play-state: paused; /* stops on hover */
}

.timeline-track img {
  height: 550px;   /* or whatever size you want */
  width: auto;     /* keep proportions */
}

@keyframes timeline-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Responsive */
@media (max-width: 768px) {
  .image-content {
        width: 100% !important;
        flex: 0 0 100%;
    }

    #timelineCarousel img {
        width: 100%;
        height: auto;
    }

    .waypoints-text {
        text-align: center;
        margin-bottom: 1rem;
    }
}

/* Comapany Timelines marquee End */

/* Comapny Trusted by marquee Start */
    .our-client-marquee {
          overflow: hidden;
          position: relative;
          width: 100%;
          background: #fff; /* optional */
        }
        .marquee-track {
          display: flex;
          width: max-content;
          animation: marquee-our-client 40s linear infinite; /* adjust speed */
        }
        .marquee-item {
          flex: 0 0 auto;
          padding: 0 1.5rem;
        }
        @keyframes marquee-our-client {
          from { transform: translateX(0); }
          to { transform: translateX(-50%); }
        }
        @media (max-width: 768px) {
          .marquee-item .img-fluid {
                max-width: 60% !important;
                height: auto;
            }
        }
        @media (max-width: 576px) {
          .marquee-item .img-fluid {
                max-width: 60% !important;
                height: auto;
            }
        }
/* Comapny Trusted by marquee End */

/* Default navigation bar with opacity */
.home-nav {
    background-color: rgb(13, 110, 184, 0); /* Black background with 50% opacity */
    transition: background-color 0.3s ease; /* Smooth transition for background changes */
}

/* Navigation bar without opacity */
.home-nav.scrolled {
    background-color: rgb(13, 110, 184); /* Fully opaque black background */
}

.home-video img, .home-video-2 img{
    width: -webkit-fill-available;
}
.home-video {
    position: relative;
}
.home-video-2 iframe {
    width: 100% !important; /* Full width */
    height: 119vh !important; /* Full viewport height */
    border: none; /* Remove any border */
    display: block; /* Ensure no extra space below the iframe */
}
.maritime-payment-solutions {
    padding: 65px 0 118px;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 99;
    transform: translate(-50%, -50%);
}
.maritime-payment-solutions .heading-large {
    font-size: 48px;
    line-height: 60px;
    margin-bottom: 10px;
    color: #FFFFFF;
}
.maritime-payment-solutions .team-behind-text {
    color: transparent;
    -webkit-text-stroke: 1px #FFFFFF;
    line-height: 130px;
}
.maritime-payment-solutions .crew-resources-description {
    color: #FFFFFF;
    font-size: 24px;
    font-weight: 700;
}

.mps-buttons {
    display: flex;
    margin-top: 39px;
    justify-content: center;
    gap: 24px;
}
.mps-buttons .btn-outline-light{
    width: 222px;
    font-size: 16px;
    line-height: 30px;
    font-weight: 700;
}
.mps-buttons .btn-outline-light:hover{
    color: #FFFFFF;
}
.mps-buttons .btn-light{
    padding: 9px 12px;
    width: 222px;
}
.dps {
    background: linear-gradient(161.86deg, #94E7FD -3.03%, #EAFFF9 87.66%);
    padding: 131px 0;
    text-align: center;
    margin-top: -10px;
}
.dps h2 {
    font-size: 40px;
    line-height: 50px;
    font-weight: 700;
    margin-bottom: 47px;
    padding: 0 175px;
}
.dps-card {
    display: flex;
    background: #FFFFFF;
    border-radius: 60px;
    color: #2D2D2D;
    padding: 20px 40px;
    gap: 22px;
}
.dps-card span {
    align-content: center;
    font-size: 20px;
    line-height: 32px;
    font-weight: 700;
}
.dps-cards {
    display: flex;
    justify-content: center;
    gap: 34px;
    margin-bottom: 24px;
}

.our-global-reach {
    text-align: center;
    padding: 111px 0 12px;
}
.our-global-reach .team-behind-text {
    font-size: 64px;
    line-height: 78px;
}

.our-global-reach-cards {
    display: flex;
    justify-content: center;
    gap: 100px;
    margin-top: 64px;
    margin-bottom: 54px;
}
.our-global-reach-card{
    display: flex;
    flex-direction: column;
    flex: 1;
    align-items: center;
    gap: 20px;
}

.global-reach-card-image {
    height: 85px;
}

.our-global-reach-card .our-global-reach-card-text {    
    align-content: flex-end !important;   
}

.our-global-reach-card h4{
    /*margin-top: 29px;*/
    font-size: 32px;
    line-height: 32px;
    font-weight: 700;
}
.our-global-reach-card h6{
    font-size: 20px;
    line-height: 24px;
    font-weight: 400;
    margin: 0;
}

.transforming-crew-payment {
    margin-top: 90px;
}
.transforming-crew-payment .team-behind-text {
    font-size: 167px;
    line-height: 130px;
}
.access-your-crew-funds-anytime {
    padding: 61px 0 62px;
    color: #FFFFFF;
    text-align: center;
    background: linear-gradient(309.6deg, #1F6ABB 2.52%, #3FB7FD 47.53%, #48D5FF 122.37%);
}
.access-your-crew-funds-anytime-content {
    display: flex;
    justify-content: center;
    gap: 48px;
}
.access-your-crew-funds-anytime-content h4 {
    font-size: 32px;
    line-height: 48px;
    font-weight: 700;
}
.access-your-crew-funds-anytime-content button {
    padding: 9px 32px;
    font-size: 16px;
    line-height: 30px;
    font-weight: 700;
}
.why-use-shipmoney {
    padding: 133px 135px;
}
.why-use-shipmoney .heading-large {
    margin-bottom: 0;
}
.why-use-shipmoney .team-behind-text {
    padding-left: 138px;
}
.why-use-shipmoney-cards {
    padding: 0 101px 0 74px;
    display: flex;
    gap: 46px;
    flex-direction: column;
}
.why-use-shipmoney-card {
    display: flex;
    gap: 80px;
}
.why-use-shipmoney-card-content {
    padding: 120px 20px;
}
.why-use-shipmoney-card-content h2{
    font-size: 31px;
    line-height: 48px;
    font-weight: 700;
}
.why-use-shipmoney-card-content .crew-resources-description {
    line-height: 38px;
    font-weight: 400;
    font-size: 24px;
}
.our-clients {
    padding: 20px 50px;
    padding-bottom: 100px;
}
.our-clients header {
    display: flex;
    justify-content: center;
    gap: 20px;
}
.our-clients .heading-large {
    align-content: center;
}
.crew-network-payments {
    display: flex;
    gap: 51px;
    justify-content: center;
    padding: 207px 207px 0; 
    display: none;
}

.crew-network-payments .heading-large {
    color: #FFF;
    font-size: 48px;
    line-height: 56px;
}
.crew-network-payments-content {
    font-size: 20px;
    line-height: 30px;
    font-weight: 600;
    color: #FFF;
}
.crew-payments span img:hover,  .network-payments span img:hover{
    transform: rotate(45deg); /* Rotates the image by 30 degrees */
    transition: transform 0.3s ease-in-out; /* Smooth animation over 0.3 seconds */
}
.crew-payments span,  .network-payments span{
    position: absolute;
    position: absolute;
    right: 40px;
    bottom: 120px;
}
.crew-payments, .network-payments {
    background: url(images/home-page/crew-background.png) no-repeat;
    height: 687px;
    padding: 44px 41px;
    background-size: contain;
    width: 487px;
    position: relative;
}
.how-we-can-change-game{
    background: linear-gradient(313.82deg, #1F6ABB 13.8%, #3FB7FD 78.52%, #48D5FF 122.95%);
}
.testimonials {
    background: linear-gradient(161.86deg, #94E7FD -3.03%, #EAFFF9 87.66%);
    padding:115px 0px;
    text-align: center;
}
.testimonials .heading-large {
    margin-bottom: 28px;
}
.testimonials h5{
    font-size: 36px;
    line-height: 100%;
    font-weight: 700;
    margin-bottom: 74px;
}
.how-we-can-change-game-content {
    padding: 114px 52px 71px;
}
.how-we-can-change-game-content .heading-large {
    color: #FFFFFF;
    margin-bottom: 0;
}
.how-we-can-change-game-content .team-behind-text {
    color: transparent;
    -webkit-text-stroke: 1px #FFFFFF;
}
.how-we-can-change-game-content .sub-heading {
    text-align: center;
    margin-top: -60px;
}
.current-problem {
    color: #FFFFFF;
    padding: 0 33px;
}
.current-problem-cards, .our-solutions-cards {
    display: flex;
    gap: 70px;
}
.our-solutions-cards {
    gap: 32px;
}
.current-problem-heading, .our-solutions-heading {
    font-size: 32px;
    line-height: 36px;
    font-weight: 750;
    margin-bottom: 40px;
}
.current-problem-card, .our-solutions-card {
    display: flex;
    gap: 17px;
}
.current-problem-card-content, .our-solutions-card-content {
    margin-bottom: 0;
    font-size: 24px;
    line-height: 36px;
    font-weight: 700;
}
.current-problem-card img,  .our-solutions-card img{
    align-self: flex-start;
}

.our-solutions-section {
    background: #C8F2FF;
}
.our-solutions-content {
    padding: 64px 84px;
}
.our-solutions-heading {
    color:#3473B0;
}
.our-solutions-card {
  /*  border-right: 1px solid #2D2D2D;*/
    padding-right: 30px;
}
.our-solutions-card:last-of-type{
    border: none;
}
.ShipMoney-innovative-edge {
    text-align: center;
    margin-top: 67px;
}
.ShipMoney-innovative-edge-heading, .ShipMoney-innovative-edge-heading2 {
    font-size: 40px;
    line-height: 36px;
    font-weight: 750;
}
.ShipMoney-innovative-edge-heading2 {
    font-weight: 400;
    font-style: italic;
}

.ShipMoney-innovative-edge .crew-resources-description {
    font-weight: 400;
    margin-top: 32px;
}
.need-help-with-your-card {
    padding: 100px 80px;
    display: flex;
    align-items: center;
}
.need-help-with-your-card-content {
    padding-left: 100px;
}
.need-help-with-your-card-content .heading-large{
    font-size: 64px;
    line-height: 130%;
    text-transform: capitalize;
}
.testimonials-carousal{
    overflow: hidden;
}
.testimonials-carousal .case-study-card {
    color:#000000;
    text-align: center;
    background: #FFFFFF;
    padding: 42px 35px;
    display: flex;
    flex-direction: column; /* Stack items vertically */
    /*height: 100%; */
    border: 1px solid #FFFFFF;
    margin: 0 6px;
    align-items: center;
    min-width: 25% !important;
    min-height: -webkit-fill-available;
    justify-content: space-between;

}
.testimonials-carousal .case-study-card .heading-large {
    font-size: 24px;
    line-height: 100%;
    text-transform: none;
}

.testimonials-carousal .case-study-cards{
    gap:20px;
    min-width: 100% !important;
}

.testimonials-carousal .case-study-card p {
    flex: 1; /* Allow the paragraph to take up available space */
    font-size: 16px;
    line-height: 26px;
    font-weight: 400;
}
.testimonial-author {
    margin-top: 40px; /* Push the testimonial-author section to the bottom */
    text-align: center; /* Center-align the content */
}

.testimonial-author h4 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 4px;
    line-height: 100%;
}

.testimonial-author .testimonial-author-member {
    font-size: 16px; /* Adjust font size for the role */
    font-weight: 300;
    line-height: 100%;
    margin: 0 !important; /* Remove default margin */
}
.our-client-carousal {
    display: none;
}
.our-client-carousal .case-study-card { 
    border: 0;
}

.testimonials-carousal .control-arrows {
    margin-right: 10px;
    justify-content: center;
}
/* Marquee container */
.clients-marquee-container {
    overflow: hidden; /* Hide overflowing content */
    white-space: nowrap; /* Prevent text from wrapping */
    width: 100%; /* Full width */
    background-color: #FFFFFF; /* Optional: Light background */
    padding: 10px 0; /* Optional: Add padding */
}

/* Marquee animation */
.clients-marquee {    
    display: flex;
    min-width: max-content;
    animation: clients-marquee 60s linear infinite; 
}

.clients-marquee span {
    font-size: 16px; 
    color: #007bff; 
    font-weight: bold; 
}

/* Keyframes for marquee animation */
@keyframes clients-marquee {
    from {
        transform: translateX(0); /* start immediately visible */
    }
    to {
        transform: translateX(-100%); /* move left */
    }
}

@media (min-width: 1200px) {
    .why-use-shipmoney-cards {
        padding: 0 30px !important; 
    }

    .why-use-shipmoney-card img{
        height: 100% !important;
    }

    .why-use-shipmoney{
        padding-left: 127px;
        padding-right: 127px;
    }

    .why-use-shipmoney-card{
        gap: 42px;
    }

    .need-help-with-your-card-content{
        padding-left: 50px;
        flex: 1;
    }

    .need-help-with-your-card{
        padding: 100px 50px;
    }

    .need-help-with-your-card img{
        flex: 1;
        height: 100%;
    }
    .need-help-with-your-card-content .heading-large{
        font-size: 45px;
    }
}
@media (max-width: 768px) {
  .marquee {
    gap: 16px;
  }
  .testimonial-card {
    min-width: 230px;
    max-width: 90vw;
    padding: 16px;
  }
}
@media (max-width: 576px) {
    .testimonials-carousal .case-study-cards{
        min-width: max-content !important;
    }
    
    .home-page{
        margin-top: 90px;
    }
    .home-nav {
        background-color: rgb(13, 110, 184);
    }
    .maritime-payment-solutions {
        padding: 42px 18px;
        position: unset;
        transform: none;
    }
    .maritime-payment-solutions .heading-large, .how-we-can-change-game-content .heading-large {
        font-size: 24px;
        line-height: 32px;
    }
    .maritime-payment-solutions .team-behind-text {
        font-size: 64px;
        line-height: 59px;
        color: #FFFFFF;
        -webkit-text-stroke: 1px #000000;
    }
    .maritime-payment-solutions .heading-large, .maritime-payment-solutions .crew-resources-description {
        color: #000000;
    }
    .mps-buttons {
        flex-direction: column;
        padding: 0 58px;
        gap: 16px;
        align-items: center;
    }
    .mps-buttons .btn-light{
        padding: 9px 12px;
        width: 222px;
        color: #FFFFFF;
        background: #000000;
        border-color: #000000;
    }
    .mps-buttons .btn-outline-light{
        color: #000000;
        background: #FFFFFF;
        border-color: #000000;
    }
    .mps-buttons .btn-outline-light:hover{
        color: #000000;
    }
    .dps {
        padding: 32px 0;
    }
    .dps h2{
        padding: 0 18px;
        font-size: 24px;
        line-height: 32px;
    }
    .dps-cards {
        flex-direction: column;
        gap: 24px;
        align-items: center;
    }
    .dps-card {
        justify-content: center;
        gap: 8px;
        width: fit-content;
    }
    .our-global-reach {
        padding: 80px 18px 34px;
    }
    .our-global-reach header {
        display: flex;
        flex-direction: column;
        margin-bottom: 24px;
    }
    .our-global-reach .heading-large {
        margin-bottom: 0;
        font-size: 64px;
    }
    .our-global-reach-cards {
        flex-direction: column;
        gap: 80px;
    }
    .transforming-crew-payment .team-behind-text, .why-use-shipmoney .team-behind-text, .how-we-can-change-game-content .team-behind-text, .our-clients .team-behind-text {
        font-size: 46px;
        line-height: 59px;
    }
    .transforming-crew-payment .heading-large {
        font-size: 32px;
        line-height: 32px;
    }
    .access-your-crew-funds-anytime-content {
        flex-direction: column;
        padding: 0 62px;
        gap: 32px;
    }
    .access-your-crew-funds-anytime-content button {
        align-self: center;
        width: 144px;
    }
    .why-use-shipmoney {
        padding: 53px 18px;
    }
    .why-use-shipmoney .heading-large {
        font-size: 32px;
        line-height: 32px;
    }
    .why-use-shipmoney .team-behind-text{
        padding-left: 70px;
    }
    .why-use-shipmoney-cards {
        padding: 0;
    }
    .why-use-shipmoney-card{
        flex-direction: column;
        gap: 32px;
    }
    .why-use-shipmoney-card-content{
        padding: 0 20px;
    }
    .how-we-can-change-game-content {
        padding: 31px 18px;
    }
    .how-we-can-change-game-content header {
        padding: 0 60px;
    }
    .how-we-can-change-game-content .sub-heading {
        margin-top: 0;
        display: flex;
        flex-direction: column;
    }
    .how-we-can-change-game-content .heading-large {
        align-self: flex-end;
    }
    .current-problem-cards, .our-solutions-cards {
        flex-direction: column;
        gap: 32px;
    }
    .current-problem {
        padding: 0 22px;
    }
    .our-clients .heading-large {
        font-size: 32px;
        line-height: 32px;
        margin-bottom: 0;
    }
    .our-solutions-content {
        padding: 46px 35px;
    }
    .need-help-with-your-card {
        padding: 34px 18px 132px;
        flex-direction: column;
        gap: 32px;
    }
    .need-help-with-your-card-content {
        padding-left: 0;
    }

    .testimonials {
        padding: 64px 0px;
    }
    .testimonials .heading-large {
        font-size: 42px;
        line-height: 56px;
        margin-bottom: 16px;
    }
    .testimonials h5 {
        font-size: 24px;
        margin-bottom: 60px;
    }
    .testimonials-carousal .case-study-card {
        margin: 0;
        max-width: 250px !important;
    }
    .our-clients header {
        gap: 11px;
    }
    .our-client-carousal {
        margin-top: 33px;
        display: block;
    }
    .need-help-with-your-card-content .heading-large {
        font-size: 40px;
        line-height: 150%;
    }
    .our-client-carousal .case-study-cards .col-md-4 {
        padding: 0;
    }
    .our-client-carousal .case-study-card {
        padding: 0;
        text-align: center;
    }
    .our-client-carousal .case-study-card img{
        margin-bottom: 30px;
    }
    .our-solutions-card {
        border: 0;
        padding: 0;
    }
    .our-client-carousal .col-md-4 {
        flex: 0 0 calc(50% - 10px); /* 2 cards per row */
        max-width: calc(50% - 10px); /* 2 cards per row */
    }
    .home-video-2 iframe {
        height: 33vh !important; /* Full viewport height */
    }
}