/* =========================================================
   WELCOME HERO
   ========================================================= */

.welcome-hero {
    position: relative;

    display: flex;

    width: 100%;
    height: 240px;

    align-items: center;
    justify-content: center;

    overflow: hidden;

    background: #06101C;
    margin-top: 78px;}


/* =========================================================
   VIDEO
   ========================================================= */

.welcome-hero__video {
    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    z-index: 0;
}


/* =========================================================
   OVERLAY
   ========================================================= */

.welcome-hero__overlay {
    position: absolute;

    inset: 0;

    z-index: 1;

    background: rgba(0, 0, 0, 0.18);

    pointer-events: none;
}


/* =========================================================
   CONTENT
   ========================================================= */

.welcome-hero .container {
    position: relative;

    z-index: 2;

    display: flex;

    width: 100%;
    height: 100%;

    align-items: center;
    justify-content: center;
}


.welcome-hero__content {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 100%;
}


/* =========================================================
   TITLE
   ========================================================= */

.welcome-hero__title {
    margin: 0;

    color: var(--Neutral-White, #FFF);

    text-align: center;

    font-family: "Outfit", sans-serif;
    font-size: 32px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;

    letter-spacing: 0.64px;

    text-transform: capitalize;
}


/* =========================================================
   ACCOUNT PAGE
   ========================================================= */

.account-page {
    width: 100%;
    padding: 40px 0;

background: var(--Neutral-300, #F4F4F4);
    font-family: "Outfit", sans-serif;
}

.account-page .container {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}


/* =========================================================
   BOOTSTRAP TABS
   ========================================================= */

.account-tabs {
    display: flex;

    width: 521px;

    margin: 0 auto 40px;
    padding: 4px;

    align-items: center;

    border: 0;
    border-radius: 8px;
justify-content: space-between;
    background: var(--Neutral-White, #FFF);
}


/* Remove Bootstrap defaults */

.account-tabs .nav-item {
    margin: 0;
}


.account-tabs .account-tabs__link {
display: flex;
height: 44px;
padding: 0 32px;
justify-content: center;
align-items: center;

    border: 0 !important;
    border-radius: 4px;

    background: transparent;
color: var(--Neutral-700, #656565);
leading-trim: both;
text-edge: cap;
font-family: "Outfit";
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: normal;
text-transform: capitalize;

    text-decoration: none;

    cursor: pointer;
}


.account-tabs .account-tabs__link:hover {
    border: 0 !important;

border-radius: var(--radius-xs, 4px);
background: var(--Core-Navy, #100D26);}


.account-tabs .account-tabs__link:focus {
    border: 0 !important;

    box-shadow: none;
}


/* ACTIVE TAB */

.account-tabs .account-tabs__link.active {
    border: 0 !important;

    background: var(--Core-Navy, #100D26);

    color: var(--Neutral-White, #FFF);
}


/* =========================================================
   BOOTSTRAP TAB CONTENT
   ========================================================= */

.account-page .tab-content {
    width: 100%;
}


.account-page .tab-pane {
    width: 100%;
}


/* =========================================================
   ACCOUNT + BILLING
   ========================================================= */

.account-details {
    display: flex;

    width: 100%;

    align-items: stretch;

    gap: 40px;
}


.account-card {
 display: flex;
padding: 40px;
flex-direction: column;
align-items: flex-start;
gap: 40px;
flex: 1 0 0;
border-radius: var(--radius-m, 12px);
border: 1px solid var(--Neutral-500, #D0D0D0);
background: var(--Neutral-White, #FFF);
}


/* =========================================================
   ACCOUNT CARD HEADING
   ========================================================= */

.account-card__heading {
    display: flex;
    flex-direction: column;

    gap: 24px;
}


.account-card__heading h2 {
    margin: 0;

    color: var(--Core-Navy, #100D26);

    font-family: "Outfit", sans-serif;
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;

    letter-spacing: 0.48px;

    text-transform: capitalize;
}


.account-card__heading p {
    margin: 0;

    color: var(--Neutral-700, #656565);

    font-family: "Outfit", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 181.1%;
}


/* =========================================================
   ACCOUNT FORM
   ========================================================= */

.account-form {
    display: flex;

    width: 100%;

    flex-direction: column;
    align-items: stretch;

    gap: 20px;
}


.account-form__row {
    display: flex;

    width: 100%;

    align-items: stretch;

    gap: 20px;
}


.account-form__field {
    display: flex;

    min-width: 0;
    flex: 1 1 0;

    flex-direction: column;
}


/* =========================================================
   INPUTS
   ========================================================= */

.account-form__field input,
.account-form__field select {
    display: flex;

    width: 100%;
    height: 52px;

    padding: 0 20px;

    align-items: center;

    gap: 12px;

    border-radius: var(--radius-s, 8px);

    border: 1px solid var(--Neutral-500, #D0D0D0);

    outline: none;

    background: var(--Neutral-White, #FFF);

    color: var(--Neutral-600, #9B9B9B);

    font-family: "Outfit", sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;

    box-sizing: border-box;
}


.account-form__field input::placeholder {
    color: var(--Neutral-600, #9B9B9B);

    opacity: 1;
}


.account-form__field input:focus,
.account-form__field select:focus {
    border-color: var(--Core-Navy, #100D26);

    box-shadow: none;
}


/* SELECT */

.account-form__field select {
    appearance: none;
    -webkit-appearance: none;

    cursor: pointer;
}


/* =========================================================
   SAVE BUTTON
   ========================================================= */

.account-form__button {
    display: flex;

    width: 100%;
    height: 52px;

    padding: 0 20px;

    align-items: center;
    justify-content: center;

    gap: 12px;

    border-radius: var(--radius-s, 8px);

    border: 1px solid var(--Core-Navy, #100D26);

    background: var(--Neutral-White, #FFF);

    color: var(--Core-Navy, #100D26);

    font-family: "Outfit", sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;

    cursor: pointer;

    transition:
        background-color .2s ease,
        color .2s ease;
        margin-top: 4px;
}


.account-form__button:hover {
    background: var(--Core-Navy, #100D26);

    color: var(--Neutral-White, #FFF);
}


/* =========================================================
   UPDATE PASSWORD
   ========================================================= */

.password-section {
    display: flex;

    width: 100%;

    margin-top: 40px;
padding: 40px;
align-items: center;
gap: 80px;
align-self: stretch;
border-radius: var(--radius-m, 12px);
border: 1px solid var(--Neutral-500, #D0D0D0);
background: var(--Neutral-White, #FFF);
}


.password-section__heading {
    display: flex;

    width: 320px;
    flex: 0 0 320px;

    flex-direction: column;

    gap: 24px;
}


.password-section__heading h2 {
    margin: 0;

    color: var(--Core-Navy, #100D26);

    font-family: "Outfit", sans-serif;
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;

    letter-spacing: .48px;

    text-transform: capitalize;
}


.password-section__heading p {
    margin: 0;
color: var(--Neutral-700, #656565);
leading-trim: both;
text-edge: cap;
font-family: "Outfit";
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 181.1%; /* 28.976px */
}


/* =========================================================
   PASSWORD FORM
   ========================================================= */

.password-form {
    display: flex;

    min-width: 0;
    flex: 1 1 auto;

    align-items: center;

    gap: 20px;
}


.password-form__field {
    display: flex;

    min-width: 0;
    flex: 1 1 0;
}


.password-form__field input {
    width: 100%;
    height: 52px;

    padding: 0 20px;

    border-radius: var(--radius-s, 8px);

    border: 1px solid var(--Neutral-500, #D0D0D0);

    outline: none;

    background: var(--Neutral-White, #FFF);

    color: var(--Neutral-700, #656565);

    font-family: "Outfit", sans-serif;
    font-size: 14px;
    font-weight: 500;
}


.password-form__field input::placeholder {
    color: var(--Neutral-600, #9B9B9B);
}


.password-form__field input:focus {
    border-color: var(--Core-Navy, #100D26);

    outline: none;
}


/* PASSWORD BUTTON */

.password-form__button {
    display: flex;

    width: 165px;
    height: 52px;

    flex: 0 0 165px;

padding: 0 32px;

    align-items: center;
    justify-content: center;

    border-radius: var(--radius-s, 8px);

    border: 1px solid var(--Core-Navy, #100D26);

    background: var(--Neutral-White, #FFF);

    color: var(--Core-Navy, #100D26);

    font-family: "Outfit", sans-serif;
    font-size: 14px;
    font-weight: 500;

    cursor: pointer;

    transition:
        background-color .2s ease,
        color .2s ease;
        margin-left: 4px;
}


.password-form__button:hover {
    background: var(--Core-Navy, #100D26);

    color: #FFF;
}


/* =========================================================
   ORDER HISTORY
   ========================================================= */

.order-history {
    width: 100%;
}


.order-table {
    display: flex;

    width: 100%;

    flex-direction: column;

    overflow: hidden;

    border-radius: var(--radius-s, 8px);

    border: 1px solid var(--Neutral-800, #3C3C3C);

    background: var(--Neutral-White, #FFF);
        max-width: 1211px;
    margin: auto;
}


/* =========================================================
   TABLE ROW
   ========================================================= */

.order-table__row {
    display: flex;

    width: 100%;
    min-height: 60px;
display: flex;
padding: 18px 24px;
align-items: center;
align-self: stretch;
    align-items: center;
}


.order-table__row--header {
    min-height: 48px;

    background: var(--Core-Navy, #100D26);
}


/* =========================================================
   TABLE CELLS
   ========================================================= */

.order-table__cell {
    min-width: 0;
    color: var(--Neutral-800, #3C3C3C);

    font-family: "Outfit", sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}


.order-table__row--header .order-table__cell {
    color: var(--Neutral-White, #FFF);

    font-weight: 500;
}


/* =========================================================
   COLUMN WIDTHS
   ========================================================= */

.order-table__cell:nth-child(1) {
    width: 14%;
    flex: 0 0 14%;
}


.order-table__cell:nth-child(2) {
    width: 40%;
    flex: 0 0 40%;
}


.order-table__cell:nth-child(3) {
    width: 18%;
    flex: 0 0 18%;
}


.order-table__cell:nth-child(4) {
    width: 16%;
    flex: 0 0 16%;
}


.order-table__cell:nth-child(5) {
    width: 12%;
    flex: 0 0 12%;

    text-align: right;
}


/* =========================================================
   SERVICE
   ========================================================= */

.order-table__service {
    display: flex;

    flex-direction: column;

    gap: 6px;
}


.order-table__service strong {
    color: var(--Neutral-800, #3C3C3C);

    font-size: 14px;
    font-weight: 500;
}


.order-table__service small {
    color: var(--Neutral-700, #656565);

    font-size: 10px;
}


/* =========================================================
   TABLE STRIPES
   ========================================================= */

.order-table__row:nth-child(odd) {
background: var(--Neutral-300, #F4F4F4);}


.order-table__row--header {
    background: var(--Core-Navy, #100D26) !important;
    display: flex;
padding: 18px 24px;
align-items: center;
align-self: stretch;
}


/* =========================================================
   DOWNLOAD
   ========================================================= */

.order-table__cell a {
    color: var(--Core-Orange, #FF4700);

    font-weight: 500;

    text-decoration: none;
}


.order-table__cell a:hover {
    text-decoration: underline;
}

/* ========================================================= 
   CHANGES SAVED MODAL 
   ========================================================= */ 
 
.account-modal { 
    position: fixed; 
    inset: 0; 
 
    display: none; 
 
    width: 100%; 
    height: 100%; 
 
    padding: 24px; 
 
    align-items: center; 
    justify-content: center; 
 
    z-index: 9999; 
} 
 
.account-modal--open { 
    display: flex; 
} 
 
/* OVERLAY */ 
 
.account-modal__backdrop { 
    position: absolute; 
    inset: 0; 
 
    background: var(--Core-Navy, #100D26); 
    opacity: .8; 
} 
 
/* MODAL BOX */ 
 
.account-modal__dialog { 
    position: absolute !important;

    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    display: flex; 
 
    width: 520px; 
    max-width: calc(100% - 48px); 
 
    padding: 48px; 
 
    flex-direction: column; 
    align-items: flex-start; 
 
    gap: 32px; 
 
    border-radius: var(--radius-l, 16px); 
 
    background: var(--Neutral-White, #FFF); 
 
    z-index: 1; 
} 
 
/* MODAL TITLE */ 
 
.account-modal__dialog h2 { 
    margin: 0; 
 
    color: var(--Core-Navy, #100D26); 
 
    font-family: "Outfit", sans-serif; 
    font-size: 32px; 
    font-style: normal; 
    font-weight: 400; 
    line-height: normal; 
 
    letter-spacing: .64px; 
 
    text-transform: capitalize; 
} 
 
/* MODAL TEXT */ 
 
.account-modal__dialog p { 
    margin: -12px 0 0; 
 
    color: var(--Neutral-700, #656565); 
 
    font-family: "Outfit", sans-serif; 
    font-size: 16px; 
    font-style: normal; 
    font-weight: 400; 
    line-height: 181.1%; 
} 
 
/* MODAL BUTTON */ 
 
.account-modal__button { 
    display: flex; 
 
    width: 100%; 
    height: 56px; 
 
    padding: 0 32px; 
 
    align-items: center; 
    justify-content: center; 
 
    gap: 12px; 
 
    border: 0; 
 
    border-radius: var(--radius-s, 8px); 
 
    background: var(--Core-Orange, #FF4700); 
 
    color: var(--Neutral-White, #FFF); 
 
    font-family: "Outfit", sans-serif; 
    font-size: 16px; 
    font-weight: 500; 
 
    cursor: pointer; 
 
    transition: background-color .2s ease; 
} 
 
.account-modal__button:hover { 
    background: var(--Core-Navy, #100D26); 
}

.swipe{
    display: none;
}


/* =========================================================
   NO ORDERS EMPTY STATE
   ========================================================= */

.orders-empty {
    width: 100%;
    padding: 64px 48px;
    max-width: 1212px;
border-radius: var(--radius-s, 8px);
background: var(--Neutral-White, #FFF);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
}

.orders-empty__content {
    width: 100%;
    max-width: 928px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.orders-empty__title {
    margin: 0 0 16px;

color: var(--Core-Navy, #100D26);
text-align: center;
font-family: "Outfit";
font-size: 24px;
font-style: normal;
font-weight: 400;
line-height: normal;
letter-spacing: 0.48px;
text-transform: capitalize;
}

.orders-empty__text {
    width: 400px;
    max-width: 100%;

    margin: 0 0 16px;
color: var(--Neutral-700, #656565);
text-align: center;
/* P/Std */
font-family: Outfit;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 181.1%; /* 28.976px */
}

.orders-empty__button {
display: flex;
height: 56px;
padding: 0 32px;
justify-content: center;
align-items: center;
gap: 12px;

    border-radius: 8px;
    border: 1px solid var(--Core-Orange, #FF4700);

    background: var(--Core-Orange, #FF4700);
color: var(--Neutral-White, #FFF);
font-family: "Outfit";
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: normal;
text-transform: capitalize;

    text-decoration: none;

    transition: all 0.2s ease;
}

.orders-empty__button:hover {
    background: var(--Core-Navy, #100D26);
    border-color: var(--Core-Navy, #100D26);
    color: #fff;
}