/* Bootstrap 5 Responsive Media Queries */

/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
    /* XS only styles */
    header .navbar .navbar-contact-btn {
        margin-top: 20px;
    }
    .banner-overlay h1{
        font-size: 40px;
        letter-spacing: 6px;
    }
    .who-we-are::before, .what-we-do::before, .liquidity-future::before {
        top: 8px;
    }
    .who-we-are:after, .liquidity-future:after, .build-future:before{
        left: 8px;
    }
    .what-we-do::after {
        right: 8px;
    }
    .who-we-are{
        padding: 60px 0;
    }
    .common-heading p{
        font-size: 16px;
    }
    .common-heading h2, .build-future h2{
        font-size: 24px;
    }
    .common-heading{
        gap: 16px !important;
    }
    .common-heading h5{
        font-size: 15px;
        text-align: center;
    }
    .core-values-heading{
        height: 24px;
        margin-left: auto;
    }
    .coming-soon-block h3{
        font-size: 16px;
    }
    .coming-soon-block p{
        font-size: 14px;
    }
    .coming-soon-block{
        padding: 60px 24px;
    }
    .core-values-heading h3{
        margin-left: auto;
    }
    .core-values-heading h3{
        font-size: 20px;
    }
    .core-values{
        padding-right: 0;
    }
    .single-value{
        width: 100%;
    }
    .what-we-do, .liquidity-future, .build-future {
        padding: 52px 10px;
    }

    .build-future form{
        padding-bottom: 100px;
    }
    .build-future::after {
        top: 60%;
        transform: translateY(-50%);
    }
    footer:before, footer:after{
        display: none;
    }
    .footer-video{
        height: 200px;
    }
    footer{
        background-color: #080808;
    }
    .footer-content{
        top: 5%;
    }
    .footer-column{
        padding-top: 53px;
    }
    .small-banner h1{
        font-size: 30px;
    }
    .content-wrapper h2,   .content-wrapper h3{
        font-size: 25px;
    }
    .content-wrapper{
        padding: 40px 0;
    }
    .small-banner{
        padding: 100px 0;
    }
    .coming-soon-block{
        background-size: cover;
    }
    .coming-soon-block:hover {
        background-size: cover;
    }
}

/* Small devices (landscape phones, 576px to 767.98px) */
@media (min-width: 576px) and (max-width: 767.98px) {
    /* SM only styles */
    header .navbar .navbar-contact-btn {
        margin-top: 20px;
    }

    .who-we-are::before, .what-we-do::before, .liquidity-future::before {
        top: 15px;
    }
    .who-we-are:after, .liquidity-future:after, .build-future:before{
        left: 15px;
    }
    .what-we-do::after {
        right: 1px;
    }
    footer:before, footer:after{
        display: none;
    }
    .footer-video{
        height: 200px;
    }
    footer{
        background-color: #080808;
    }
    .footer-content{
        top: 5%;
    }
    .footer-column{
        padding-top: 53px;
    }
}

/* Medium devices (tablets, 768px to 991.98px) */
@media (min-width: 768px) and (max-width: 991.98px) {
    /* MD only styles */
    header .navbar .navbar-contact-btn {
        margin-top: 20px;
    }
    .who-we-are, .what-we-do, .liquidity-future{
        padding: 90px 0;
    }
    .who-we-are::before, .what-we-do::before, .liquidity-future::before {
        top: 30px;
    }
    .who-we-are:after, .liquidity-future:after, .build-future:before{
        left: 20px;
    }
    .common-heading p{
        font-size: 20px;
    }
    .common-heading h2{
        font-size: 32px;
    }
    .what-we-do::after {
        right: 20px;
    }
    .single-what-we-do{
        max-width: 400px;
        margin: 0 auto 16px auto;
    }
    .liquidity-future .common-heading{
        text-align: center;
        padding: 0 68px;
    }
    .coming-soon-block{
        max-width: 570px;
    }
    .single-choose-step-inner .step-number {
        margin-top: -52px;
    }
    .build-future form{
        padding-bottom: 100px;
    }
    .build-future::after {
        top: 52%;
        transform: translateY(-50%);
    }
    .footer-content{
        top: 5%;
    }
    footer:before, footer:after{
        display: none;
    }
    .footer-column{
        padding-top: 53px;
    }
    footer{
        background-color: #080808;
    }
    .footer-logo{
        height: 100%;
        display: flex;
        align-items: center;
    }
    .footer-video{
        height: 300px;
    }
    .cubes{
        text-align: center;
    }
    .cubes img{
        width: 70%;
        margin: 0 auto;
        text-align: center;
    }
    .build-future{
        padding: 80px 0;
    }
    .build-future h2{
        font-size: 32px;
    }

    /* Make core-values-heading full width on tablet */
    .core-values-heading {
        max-width: 100%;
        width: 100%;
        height: auto;
        padding: 20px 0;
        text-align: right;
    }
    .core-values-heading h3{
        margin-left: auto;
    }
    .core-values .single-value:nth-last-child(1){
        margin: 0 auto;
    }

    /* Make single-value 2 per row */
    .single-value {
        flex: 0 0 calc(50% - 8px);
        max-width: calc(50% - 8px);
    }

    /* Center the last item when it's alone in the last row */
    .core-values .single-value:last-child:nth-child(odd) {
        margin-left: auto;
        margin-right: auto;
    }
}

/* Large devices (desktops, 992px to 1199.98px) */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .who-we-are::before, .what-we-do::before, .liquidity-future::before {
        top: 15px;
    }
    .who-we-are:after, .liquidity-future:after, .build-future:before{
        left: 15px;
    }
    .what-we-do::after {
        right: 1px;
    }
    footer:before, footer:after{
        display: none;
    }
    .footer-video{
        height: 650px;
    }
    footer{
        background-color: #080808;
    }
    .footer-content{
        top: 5%;
    }
    .footer-column{
        padding-top: 53px;
    }
    .single-choose-step-inner .step-number {
        margin-top: -52px;
    }
    .footer-logo{
        height: 100%;
        display: flex;
        align-items: center;
    }
    .navbar-nav{
        gap: 30px;
    }
}

/* X-Large devices (large desktops, 1200px to 1399.98px) */
@media (min-width: 1200px) and (max-width: 1399.98px) {
    /* XL only styles */
}

/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {
    /* XXL breakpoint styles */
}

/* Container max-widths reference
 * SM: 540px
 * MD: 720px
 * LG: 960px
 * XL: 1140px
 * XXL: 1320px
 */

/* Max-width media queries (for specific range targeting) */

/* Extra small devices only (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
  /* XS only styles */
}

/* Small devices only (landscape phones, 576px to 767.98px) */
@media (min-width: 576px) and (max-width: 767.98px) {
  /* SM only styles */
}

/* Medium devices only (tablets, 768px to 991.98px) */
@media (min-width: 768px) and (max-width: 991.98px) {
  /* MD only styles */
}

/* Large devices only (desktops, 992px to 1199.98px) */
@media (min-width: 992px) and (max-width: 1199.98px) {
  /* LG only styles */
}

/* X-Large devices only (large desktops, 1200px to 1399.98px) */
@media (min-width: 1200px) and (max-width: 1399.98px) {
  /* XL only styles */
}

/* Specific orientation queries */

/* Portrait orientation */
@media (orientation: portrait) {
  /* Portrait styles */
}

/* Landscape orientation */
@media (orientation: landscape) {
  /* Landscape styles */
}

/* Combined queries (example: medium devices and landscape) */
@media (min-width: 768px) and (orientation: landscape) {
  /* Medium devices in landscape orientation */
}

/* Print styles */
@media print {
  /* Print-specific styles */
  .no-print {
    display: none !important;
  }

  a[href]:after {
    content: " (" attr(href) ")";
  }

  abbr[title]:after {
    content: " (" attr(title) ")";
  }
}

/* Common responsive utility classes */

/* Hide on specific breakpoints */
.d-none {
  display: none !important;
}

.d-sm-none {
  @media (min-width: 576px) {
    display: none !important;
  }
}

.d-md-none {
  @media (min-width: 768px) {
    display: none !important;
  }
}

.d-lg-none {
  @media (min-width: 992px) {
    display: none !important;
  }
}

.d-xl-none {
  @media (min-width: 1200px) {
    display: none !important;
  }
}

.d-xxl-none {
  @media (min-width: 1400px) {
    display: none !important;
  }
}

/* Display on specific breakpoints */
.d-sm-block {
  @media (min-width: 576px) {
    display: block !important;
  }
}

.d-md-block {
  @media (min-width: 768px) {
    display: block !important;
  }
}

.d-lg-block {
  @media (min-width: 992px) {
    display: block !important;
  }
}

.d-xl-block {
  @media (min-width: 1200px) {
    display: block !important;
  }
}

.d-xxl-block {
  @media (min-width: 1400px) {
    display: block !important;
  }
}

/* Additional responsive utilities (similar to Bootstrap's) */

/* Text alignment responsive classes */
.text-sm-start {
  @media (min-width: 576px) {
    text-align: left !important;
  }
}

.text-md-start {
  @media (min-width: 768px) {
    text-align: left !important;
  }
}

.text-lg-start {
  @media (min-width: 992px) {
    text-align: left !important;
  }
}

.text-xl-start {
  @media (min-width: 1200px) {
    text-align: left !important;
  }
}

.text-xxl-start {
  @media (min-width: 1400px) {
    text-align: left !important;
  }
}

/* Margin and padding responsive utility classes */
/* These are examples - Bootstrap has a comprehensive set of spacing utilities */

@media (min-width: 768px) {
  .mt-md-0 {
    margin-top: 0 !important;
  }

  .mb-md-4 {
    margin-bottom: 1.5rem !important;
  }

  .py-md-5 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }
}

/* Flexbox responsive utilities */
@media (min-width: 992px) {
  .flex-lg-row {
    flex-direction: row !important;
  }

  .justify-content-lg-between {
    justify-content: space-between !important;
  }

  .align-items-lg-center {
    align-items: center !important;
  }
}

/* Order classes for flexbox */
@media (min-width: 768px) {
  .order-md-1 {
    order: 1 !important;
  }

  .order-md-2 {
    order: 2 !important;
  }
}

/* Position utilities */
@media (min-width: 992px) {
  .position-lg-absolute {
    position: absolute !important;
  }

  .position-lg-relative {
    position: relative !important;
  }
}

/* Width utilities */
@media (min-width: 768px) {
  .w-md-50 {
    width: 50% !important;
  }

  .w-md-100 {
    width: 100% !important;
  }
}

/* Additional common patterns for responsive design */

/* Responsive typography */
@media (min-width: 768px) {
  h1, .h1 {
    font-size: 2.5rem;
  }

  h2, .h2 {
    font-size: 2rem;
  }
}

@media (min-width: 1200px) {
  h1, .h1 {
    font-size: 3rem;
  }

  h2, .h2 {
    font-size: 2.5rem;
  }
}

/* Responsive images */
.img-fluid {
  max-width: 100%;
  height: auto;
}

/* Responsive tables */
.table-responsive {
  display: block;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media (min-width: 992px) {
  .table-responsive {
    display: table;
    overflow-x: visible;
  }
}

/* Mobile styles for single-choose-step layout */
@media (max-width: 767.98px) {
    /* Modify the layout of step details for mobile */
    .single-choose-step-inner {
        flex-direction: column;
        padding: 20px 20px !important;
    }

    /* Create a flex container for h3 and h4 to be on the same row */
    .single-choose-step-inner .step-number {
        margin-top: 0;
        width: 100%;
        margin-bottom: 15px;
    }

    /* Create a heading row container */
    .single-choose-step-inner .heading-row {
        display: flex;
        align-items: center;
        width: 100%;
        margin-bottom: 10px;
        position: relative; /* Position relative for pseudo-element */
    }

    /* Add the pseudo-element to heading-row for mobile */
    .single-choose-step-inner .heading-row:after {
        content: '';
        position: absolute;
        bottom: -10px;
        left: 0;
        width: 110px;
        height: 2px;
        background: var(--Brand-Green-green-500, #14C8C2);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.5s ease, visibility 0.5s ease;
    }

    /* Show the line on hover */
    .single-choose-step:hover .single-choose-step-inner .heading-row:after {
        opacity: 1;
        visibility: visible;
    }

    /* Style h3 and h4 to be side by side */
    .single-choose-step-inner .heading-row h3 {
        margin-right: 15px;
        color: var(--Brand-Blue-blue-50, #E9F3FF);
        font-family: var(--font-nebula-hollow);
        font-size: 60px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        transition: color 0.5s ease;
    }

    .single-choose-step-inner .heading-row h4 {
        color: var(--Brand-Blue-blue-50, #E9F3FF);
        font-family: var(--font-zero-twos);
        font-size: 20px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        transition: color 0.5s ease;
    }

    /* Hover state colors */
    .single-choose-step:hover .single-choose-step-inner .heading-row h3,
    .single-choose-step:hover .single-choose-step-inner .heading-row h4 {
        color: var(--Brand-Green-green-500, #14C8C2);
    }

    /* Make paragraph full width and on its own row */
    .single-choose-step-inner .step-details {
        width: 100%;
    }

    /* Adjust the height of the step on mobile */
    .single-choose-step {
        height: auto !important;
        min-height: auto !important;
    }

    /* Ensure the step expands properly on hover */
    .single-choose-step:hover {
        min-height: auto !important;
    }

    /* Ensure paragraph is visible on hover */
    .single-choose-step:hover .single-choose-step-inner .step-details p {
        display: block;
        opacity: 1;
        visibility: visible;
    }
}