/*
 * mobile-style.css
 * Project: LuckyDraw (VIB BTS World Tour ARIRANG)
 * Covers: Mobile only (<768px)
 * Generated by: css-builder Agent 06
 */

@media only screen and (max-width: 767px) {

  html,
  body {
    overflow-x: hidden;
    max-width: 100%;
  }

  /* Scroll offset: mobile header = 120px (60px logo + 60px tabs) */
  #section-spin,
  #section-prizes,
  #section-vspin-friday,
  #section-howto,
  #section-info {
    scroll-margin-top: 120px;
  }

  /* ============================================================
     CONTAINER
  ============================================================ */
  .container-inner {
    padding: 0 20px;
    max-width: 100%;
  }

  /* ============================================================
     VIB HEADER
  ============================================================ */
  /* Black fixed header on mobile — 2 rows: logo (60px) + tabs (60px) = 120px total */
  .vib-header {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100 !important;
    background: #000000;
    box-shadow: 0 1px 5px 0 rgba(188, 188, 188, 0.25);
  }

  .header-inner {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    height: auto;
    padding: 0;
    max-width: 100%;
    margin: 0;
  }

  .header-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 60px;
    flex-shrink: 0;

    background: var(--Mono-Mono---1, #000);
  }

  .header-logo img {
    width: 78px;
    height: 38px;
    flex-shrink: 0;
    object-fit: contain;
  }

  /* ============================================================
     SECTION 1: HERO BANNER — MOBILE STRUCTURE
  ============================================================ */
  .hero-banner {
    border-radius: 0;
    position: relative;
    overflow: hidden;
    /* Mobile header = 60px logo row + 60px tab row = 120px total */
    margin-top: 0px;
    height: calc(var(--height-device, 100svh) - 120px);
  }



  /* Mobile bg visible, desktop bg hidden */
  .hero-banner__bg-img--desk {
    display: none !important;
  }

  .hero-banner__bg-img--mob {
    display: block !important;
    object-position: bottom;
    /* align mobile bg to top, per Figma */
  }

  /* hero-left artwork — centered at top of section */
  .hero-banner__inner {
    top: 0;
    padding-top: 30px;
  }

  .hero-banner__inner .container-inner {
    display: flex;
    justify-content: center;
    padding: 0 20px;
    align-items: flex-start;
  }

  .hero-banner__left {
    width: 290px;
    height: calc(var(--height-device, 100svh) / 2.3);
    object-fit: contain;
  }



  /* ============================================================
     SECTION 2: TAB NAVIGATION — row 2 of mobile header (60px)
  ============================================================ */
  .tab-nav {
    position: static;
    width: 100%;
    height: 60px;
    background: transparent;
    box-shadow: none;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .tab-nav::-webkit-scrollbar {
    display: none;
  }

  .tab-nav__container {

    height: 60px;
    gap: 30px;
    padding: 0 20px;
  }

  .tab-nav__item {
    /* button reset */
    background: none;
    border: none;
    outline: none;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;

    height: 60px;
    letter-spacing: 0.12px;
    padding: 0;
    color: var(--Mono-Mono---7, #FFF);
    font-feature-settings: 'liga' off, 'clig' off;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 26px;
  }

  .tab-nav__item--active::after {
    left: 0;
    right: 0;
    height: 2.5px;
    bottom: 0px;

  }

  /* ============================================================
     SECTION 3: LUCKY WHEEL — SINGLE COLUMN
  ============================================================ */
  .lucky-wheel-section {
    padding: 40px 0 2px;
  }

  .lucky-wheel-section__inner {
    flex-direction: column;
    gap: 30px;
  }

  .lucky-wheel-section__content {
    flex: none;
    max-width: 100%;
    width: 100%;
  }

  .lucky-wheel-section__title {
    font-size: 24px;
  }

  /* Points info box stacked */
  .points-info-box {
    flex-direction: column;
    gap: 20px;
    padding: 30px 20px;

    align-items: flex-start;
  }

  .points-info-box__col {
    align-items: flex-start;
  }

  .points-info-box__label {
    font-weight: 400;
    letter-spacing: 0;
  }

  .points-info-box__value {
    font-size: 16px;
    line-height: 26px;
    letter-spacing: 0;
  }

  /* Hide line-break in points value on mobile (single-line layout) */
  .points-info-box__value br {
    display: none;
  }

  .points-info-box__divider {
    width: 100%;
    height: 1px;
    align-self: center;
  }

  /* Full-width wheel */
  .lucky-wheel-section__wheel-wrap {
    width: 100%;
  }

  .wheel-game {
    width: 100%;
  }

  /* Canvas wheel — mobile size 330px */
  #wheelWrap {
    width: 330px;
    height: 330px;
    margin: 0 auto;
    overflow: hidden;
  }

  #centerBtn {
    width: 78px;
    height: 95px;
  }

  /* Post-login mobile banner: full-width responsive height using user-avatar.png
     - overflow: visible lets banner break out of container-inner's 20px padding
     - width: calc(100% + 40px) + margin-left: -20px = full container width
     - height: clamp(177px, 50vw, 380px) scales from 177px@375px to max 380px */
  .page-logged-in .spin-user-card {
    overflow: visible;
  }

  .page-logged-in .spin-user-card__banner {
    display: block;
    height: clamp(177px, 50vw, 380px);
    width: calc(100% + 40px);
    margin-left: -20px;
  }

  /* ============================================================
     SECTION 4: PRIZES
  ============================================================ */
  /* Figma 32085:14900: #FAFAFA bg, black band 408px at top */
  .prizes-section {
    padding: 40px 0 0px;

  }


  /* Dark band taller on mobile: 408px, same gradient */
  .prizes-section__dark-band {
    height: 408px;
    background: linear-gradient(180deg, #000000 0%, #000000 70%, #fafafa 100%);
  }

  /* Title/subtitle are white (on dark band), same as desktop — no override needed */
  .prizes-section__title {
    font-size: 24px;
    line-height: 30px;
    letter-spacing: 0.24px;
  }

  .prizes-section__subtitle {
    color: var(--Mono-Mono-7, #FFF);
    font-feature-settings: 'liga' off, 'clig' off;

    /* Body 16/Semibold */
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 26px;
    /* 162.5% */
  }

  .main-prize-card {
    padding: 30px 20px;
    margin-bottom: 10px;
  }

  .main-prize-card__deco {
    top: auto;
    bottom: -40px;
    right: -40px;
    width: 120px;
    height: 105px;
  }

  .main-prize-card__heading {
    color: var(--Mono-Mono---7, #FFF);
    text-align: center;
    font-feature-settings: 'liga' off, 'clig' off;

    /* Title/Title 3 */
    font-family: Inter;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px;
    margin-bottom: 20px;
  }

  /* Mobile: ticket → hotel → plane, all stacked top to bottom */
  .main-prize-card__items {
    flex-direction: column;
    align-items: center;
    gap: 30px;
  }

  .main-prize-card__center {
    order: -1;
    width: 100%;
  }

  .main-prize-card__side-item {
    width: 100%;
    flex: 0 0 100%;
    gap: 16px;
    align-items: center;
  }

  .main-prize-card__icon {
    width: 100px;
    height: 100px;
  }

  .main-prize-card__item-label {
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.14px;
    min-height: unset;
  }

  .main-prize-card__side-item:last-of-type {
    gap: 5px;
  }


  .main-prize-card__car-label p {
    color: var(--Mono-Mono-7, #FFF);
    text-align: center;
    font-feature-settings: 'liga' off, 'clig' off;

    /* Small 14/Semibold */
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 18px;
    margin: 0;

  }


  .prizes-section__dark-band::before {
    bottom: -145px;
  }

  /* ---- Voucher cards: Owl carousel on mobile ---- */

  /* Badge image — override owl .owl-item img { width:100% } */
  .voucher-card__badge-img,
  .voucher-cards .owl-item .voucher-card__badge-img {
    width: 64px;
    height: auto;
    display: block;
    flex-shrink: 0;
  }


  .voucher-section {
    margin-left: -20px;
    margin-right: -20px;
 
  }

  /* Section title */
  .voucher-section__title {
    font-size: 24px;
    line-height: 30px;
    letter-spacing: 0.24px;
    margin: 0 0 20px 0;
  }

  /* Cards container background (#fafafa per Figma) */
  .voucher-cards {
    gap: 0;

  }

  /* Fallback before Owl loads */
  .voucher-cards:not(.owl-loaded) {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    background: transparent;
  }

  .voucher-cards:not(.owl-loaded) .voucher-card {
    min-width: unset;
    width: 100%;
    height: auto;
    min-height: 130px;
  }

  /* Owl-loaded: extra bottom padding for nav row; stagePadding handles card peek */
  .voucher-cards.owl-loaded {
    position: relative;
    padding-bottom: 56px;
  }

  /* Allow stage to overflow so stagePadding peek is visible */
  .voucher-cards .owl-stage-outer {
    overflow: visible;
  }

  /* Card inside carousel */
  .voucher-cards.owl-loaded .voucher-card {
    min-width: unset;
    width: 100%;
    height: auto;
  }

  /* ---- Nav row: < dots > on same line using absolute positioning ---- */
  /* .owl-nav (prev + next) and .owl-dots are siblings → position both absolute at bottom */

  .voucher-cards .owl-nav {
    position: absolute;
    bottom: 0px;
    left: 0;
    right: 0;
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 0 16px;
    margin: 0;
    pointer-events: none;
    gap: 50px;
    z-index: 99999;
    margin-right: 20px;
  }

  .owl-prev::before {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    background-image: url('/static/bts-world-tour-visa-2/images/icons/arrow-black.svg');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;

    transform: rotate(180deg);
    /* ← xoay 180° thành trỏ trái */
  }


  .owl-next::before {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    background-image: url('/static/bts-world-tour-visa-2/images/icons/arrow-black.svg');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;

    /* không cần rotate */
  }

  .voucher-cards .owl-dots {
    position: absolute;
    bottom: 22px;
    left: 0;
    right: 0;
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 0;
    margin-right: 20px;
  }

  .vib-banner-bottom .container .content-title {


    color: var(--Mono-Mono-1, #000);
    font-feature-settings: 'liga' off, 'clig' off;

    /* Title/Title 2 */
    font-family: Inter;
    font-size: 24px !important;
    font-style: normal;
    font-weight: 600 !important;
    line-height: 30px !important;
    /* 125% */
  }

  /* Nav arrows: 40px dark circle buttons */
  .voucher-cards .owl-prev,
  .voucher-cards .owl-next {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    background: #F2F2F2 !important;
    border: none;
    cursor: pointer;
    color: #FFFFFF !important;
    font-size: 22px !important;
    line-height: 1;
    padding: 0 !important;

    margin: 0;
    pointer-events: all;
  }



  .owl-stage {
    padding: 0px !important;
  }


  .voucher-section__title {
    padding-left: 20px;
  }
 

  #voucher-carousel .owl-stage .owl-item:first-child {
    margin-left: 20px;
  }

  #vspin-carousel .owl-stage .owl-item:last-child {
    width: calc(100vw - 105px) !important;
  }

  /* Dots: 6×6 circles */
  .voucher-cards .owl-dot span {
    background: #E4E4E4 !important;
    width: 6px !important;
    height: 6px !important;
    margin: 0;
    border-radius: 50%;
    display: inline-block;
    transition: background 0.2s;
    margin: 0px !important;
  }

  .voucher-cards .owl-dot.active span {
    background: #FDB814 !important;
    width: 6px;
    height: 6px;
    border-radius: 50%;
  }

  /* Card label */
  .voucher-card__label {
    font-size: 14px;
    font-weight: 500;
    line-height: 18px;
    letter-spacing: 0.14px;
    color: #000000;
    /* min-height: 44px; */
  }

  /* ============================================================
     SECTION 5: V-SPIN FRIDAY
  ============================================================ */
  .vspin-section {
    padding: 40px 0;
    padding-bottom: 0px;
  }

  .vspin-section__title {
    color: var(--Mono-Mono-1, #000);
    font-feature-settings: 'liga' off, 'clig' off;

    /* Title/Title 2 */
    font-family: Inter;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: 30px;
    /* 125% */
  }

  .vspin-section__header {
    margin-bottom: 20px;
  }

  .vspin-section__subtitle {
    color: var(--Mono-Mono-1, #000);
    font-feature-settings: 'liga' off, 'clig' off;

    /* Body 16/Medium */
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 26px;
    /* 162.5% */
  }

  .spin-day-card__date {

    text-align: center;
    font-feature-settings: 'liga' off, 'clig' off;
    font-family: Inter;
    font-size: 30px;
    font-style: normal;
    font-weight: 600;
    line-height: 40px;
    /* 133.333% */
  }

  /* Mobile: Owl carousel on vspin-grid */
  .vspin-grid {
    gap: 0;
  }

  /* Owl: allow stage overflow for card peek */
  .vspin-grid .owl-stage-outer {
    overflow: visible;
  }

  /* Extra bottom padding for nav row: 15px gap + 40px buttons + 8px bottom */
  .vspin-grid.owl-loaded {
    position: relative;
    padding-bottom: 60px;
  }

  /* Cards inside carousel */
  .vspin-grid.owl-loaded .spin-day-card {
    min-width: unset;
    width: 100%;
  }

  /* Fallback (not-loaded): 2 col grid */
  .vspin-grid:not(.owl-loaded) {
    flex-wrap: wrap;
    gap: 12px;
  }

  .vspin-grid:not(.owl-loaded) .spin-day-card {
    flex: 0 0 calc(50% - 6px);
    min-width: 0;
  }

  /* Nav arrows (same pattern as voucher-cards) */
  .vspin-grid .owl-nav {
    position: absolute;
    bottom: -8px;
    left: 0;
    right: 0;
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 0 16px;
    margin: 0;
    pointer-events: none;
    gap: 130px;
    z-index: 99999;
  }

  .vspin-grid .owl-prev,
  .vspin-grid .owl-next {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    background: #F2F2F2 !important;
    border: none;
    cursor: pointer;
    color: #FFFFFF !important;
    font-size: 22px !important;
    line-height: 1;
    padding: 0 !important;
    margin: 0;
    pointer-events: all;
  }


  /* Dots — yellow active (VIB brand) */
  .vspin-grid .owl-dots {
    position: absolute;
    bottom: 13px;
    left: 0;
    right: 0;
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 0;
  }

  .vspin-grid .owl-dot span {
    background: #E4E4E4 !important;
    width: 6px !important;
    height: 6px !important;
    margin: 0 !important;
    border-radius: 50%;
    display: inline-block;
    transition: all 0.2s;
  }

  .vspin-grid .owl-dot.active span {
    background: #FDB814 !important;
    width: 6px;
    height: 6px;
  }

  /* ============================================================
     SECTION 6: HOW TO PARTICIPATE — MOBILE OVERRIDES
  ============================================================ */
  .howto-section {
    padding: 60px 0 0px;
  }

  .steps-list__text {
    margin-bottom: 5px;
  }

  .howto-section__title {
    color: var(--Mono-Mono-1, #000);
    font-feature-settings: 'liga' off, 'clig' off;

    /* Title/Title 2 */
    font-family: Inter;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: 30px;
    /* 125% */
    margin-bottom: 0px;
  }

  .howto-tabs {
    position: sticky;
    top: 60px;
    z-index: 55;

    padding: 20px;
    background: #fafafa;
    margin-left: -20px;
    margin-right: -20px;
  }

  /* Hide pill tabs on mobile */
  .howto-tabs__pills {
    display: none;
  }

  /* Show full-width dropdown on mobile — matches Figma */
  .howto-tabs__dropdown {
    display: block;
    position: relative;
    width: 100%;
    /* margin-bottom: 20px; */
  }

  .howto-tabs__dropdown-btn {
    width: 100%;
    padding: 10px 20px;
    border-radius: 45px;
    border: none;
    background: var(--Banner-Fire-Right, linear-gradient(90deg, #F39423 0.14%, #EE511D 99.86%));

    color: #ffffff;
    font-size: 16px;
    font-weight: 600;
    line-height: 26px;
    letter-spacing: 0.16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    text-align: left;
  }

  .howto-tabs__dropdown-icon {
    flex-shrink: 0;
    margin-left: 8px;
  }

  /* Dropdown list (hidden by default, shown when open) */
  .howto-tabs__dropdown-list {
    display: none;
    position: absolute;
    top: calc(100% + 5px);
    left: 0;
    right: 0;
    background: #ffffff;
    border-radius: 15px;
    box-shadow: 0 5px 10px rgba(188, 188, 188, 0.5);
    list-style: none;
    margin: 0;
    padding: 20px;
    z-index: 100;
    flex-direction: column;
    gap: 15px;
  }

  .howto-tabs__dropdown-list.open {
    display: flex;
  }

  .howto-tabs__dropdown-item {
    font-size: 16px;
    color: #000000;
    cursor: pointer;
    padding: 4px 0;
    font-weight: 400;
    line-height: 26px;
  }

  .howto-tabs__dropdown-item--active {
    font-weight: 700;
  }

  /* Mobile layout: stacked — phone centered above steps */
  .howto-content {
    border: none;
    border-radius: 0;
    min-height: 0;
    background: transparent;
  }

  .howto-content__layout {
    flex-direction: column;
    align-items: center;
    padding: 0;
    min-height: 0;
    gap: 0;
  }

  /* Show phone image on mobile, centered, scaled down — matches Figma */
  .howto-content__mockup {
    display: flex !important;
    justify-content: center;
    margin-bottom: 20px;
    width: 100%;
  }

  .iphone-mockup {

    height: 318px;
  }

  .iphone-mockup__device {

    height: 318px;
  }



  .iphone-mockup__screen {
    top: 3px;
    left: 5px;
    width: 148px;
    height: 310px;
    border-radius: 21px;
  }

  .howto-content {
    overflow: visible;
  }

  /* Full-width steps: white card with subtle shadow — matches Figma mobile Section Container */
  .howto-content__steps {
    flex-shrink: 0;
    width: calc(100vw - 5px);

    padding-top: 0;
    background: #ffffff;
    overflow: hidden;
    padding: 20px;
    box-shadow: 0 1px 5px 0 rgba(188, 188, 188, 0.25);
  }

  /* Smaller steps sub-title on mobile */
  .howto-content__steps-title {
    font-size: 20px;
  }

  /* ============================================================
     SECTION 7: PROGRAM INFO
  ============================================================ */
  .program-info-section {
    padding: 40px 0;
  }

  /* Remove container side padding so table bleeds edge-to-edge */
  .program-info-section .container-inner {
    padding: 0;
  }

  .program-info-section__title {
    color: var(--Mono-Mono-1, #000);
    font-feature-settings: 'liga' off, 'clig' off;

    /* Title/Title 2 */
    font-family: Inter;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: 30px;
    /* 125% */

    padding-left: 20px;
  }

  /* Full-width, top+bottom border only — no border-radius, no side borders */
  .program-info-table {
    border-radius: 0;
    border-left: none;
    border-right: none;
    border-top: 1px solid #E4E4E4;
    border-bottom: 1px solid #E4E4E4;
  }

  /* Row has no padding — label/value each carry their own */
  .program-info-table__row {
    flex-direction: column;
    gap: 0;
    padding: 0;
  }

  .program-info-table__label {
    flex: none;
    width: 100%;
    padding: 15px 20px 0 20px;
    line-height: 26px;

  }


  .program-info-table__row .program-info-table__value p {
    font-weight: 400;
  }

  .vib-banner-bottom .content {
    padding: 0px;
  }

  .program-info-table .program-info-table__divider {
    margin-left: 20px;
    margin-right: 20px;
  }

  .vib-banner-bottom {
    color: var(--Mono-Mono-1, #000);
    font-feature-settings: 'liga' off, 'clig' off;

    /* Body 16/Regular */
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 26px;
    /* 162.5% */
    background: white;
    padding-top: 60px;
  }

  .program-info-table__value {
    width: 100%;
    padding: 10px 20px 20px 20px;

    color: var(--Mono-Mono-1, #000);
    font-feature-settings: 'liga' off, 'clig' off;

    /* Body 16/Regular */
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 26px;
    /* 162.5% */
  }

  /* Divider full-width on mobile */
  .program-info-table__divider {
    margin: 0;
  }

  /* ============================================================
     SECTION 8: CARD CAROUSEL — CSS scroll-snap on mobile (VIB style)
     No arrows, no dots — pure horizontal swipe
  ============================================================ */
  .card-registration-section {
    padding: 40px 0;
  }

  .card-registration-section__title {
    font-size: 22px;
    padding: 0 20px;
  }

  /* Clip overflow on the wrapper so scrollbar doesn't affect layout */
  .card-registration-section__slider-wrap {
    overflow: hidden;
  }

  /* CSS horizontal scroll-snap track */
  #card-carousel {
    display: flex !important;
    overflow-x: scroll;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    gap: 12px;
    padding: 8px 20px 12px;
    /* Scrollbar hidden */
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  #card-carousel::-webkit-scrollbar {
    display: none;
  }

  /* Each card: fixed 160px — 2 cards + ~11px peek of 3rd on 375px */
  #card-carousel .card-item {
    flex: 0 0 160px;
    scroll-snap-align: start;
  }

  #card-carousel .card-item img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
  }

  /* Hide custom nav arrows on mobile — pure swipe only */
  .card-carousel-nav {
    display: none !important;
  }

  /* ============================================================
     SECTION 9: FOOTER
  ============================================================ */
  .footer-inner .container-inner {
    flex-direction: column;
    gap: 24px;
    text-align: center;
  }

  .footer-social {
    justify-content: center;
  }

  #voucher-carousel>div.owl-stage-outer>div.owl-stage,
  #vspin-carousel>div.owl-stage-outer>div.owl-stage {
    padding-left: 0px !important;
  }

  #vspin-carousel .owl-stage-outer {
    margin-left: -20px;
    margin-right: -20px;
    padding-left: 20px;
  }

  #voucher-carousel .owl-stage {
        display: flex;
    align-items: stretch;
  }
   .voucher-cards.owl-loaded .voucher-card {
    height: 100%;
   }

 
}

/* end @media (max-width: 767px) */

@media only screen and (max-width: 410px) {
  .voucher-cards.owl-loaded .voucher-card {
    justify-content: flex-start;
  }
}

/* Disable .btn-cta hover state on mobile screens */
@media screen and (max-width: 767px) {

  .btn-cta:hover,
  .btn-cta:focus {
    opacity: 1 !important;
    transition: none !important;
    color: #000000 !important;
    /* override styleWeb.css a:hover { color: #F7941D } */
  }
}