/*-----------------------------------*\
  #main.css
\*-----------------------------------*/

/**
 * copyright 2022 codewithsadee
 */





/*-----------------------------------*\
  #CUSTOM PROPERTY
\*-----------------------------------*/

:root {
    /**
   * colors
   */
    --prussian-blue: hsla(217, 33%, 17%, 1);
    --oxford-blue-2: hsla(222, 47%, 11%, 1);
    --oxford-blue: hsla(221, 33%, 15%, 1);
    --blue-violet: hsla(262, 83%, 58%, 1);
    --blue-violet_a5: hsla(262, 83%, 58%, 0.05);
    --blue-violet_a10: hsla(262, 83%, 58%, 0.1);
    --alice-blue: hsla(214, 32%, 91%, 1);
    --alice-blue-2: hsla(215, 30%, 92%, 1);
    --cultured: hsla(220, 14%, 96%, 1);
    --gainsboro: hsla(220, 13%, 91%, 1);
    --light-gray: hsla(216, 12%, 84%, 1);
    --white: hsla(0, 0%, 100%, 1);
    --white_a10: hsla(0, 0%, 100%, 0.1);
    --manatee: hsla(218, 11%, 65%, 1);
    --green-cyan: hsla(161, 94%, 30%, 1);
    --cadet-grey: hsla(215, 20%, 65%, 1);
    --electric-indigo: hsla(263, 70%, 50%, 1);
    --maximum-red: hsla(0, 72%, 51%, 1);
    --black: hsla(0, 0%, 0%, 1);
    --gunmetal: hsla(215, 28%, 17%, 1);
    /**
   * gradient color
   */
    --linear-gradient-1: linear-gradient(to top left, hsla(0, 72%, 51%, 0.4) 0%, hsla(262, 83%, 58%, 0.4));
    --linear-gradient-2: linear-gradient(to right, hsla(262, 83%, 58%, 1), hsla(0, 72%, 51%, 1));
    /**
   * typography
   */
    --ff-urbanist: 'Urbanist', sans-serif;
    --headline-lg: 3.6rem;
    --headline-md: 2.6rem;
    --title-lg: 2rem;
    --title-md: 1.8rem;
    --title-sm: 1.7rem;
    --body-lg: 2rem;
    --body-md: 1.7rem;
    --label-lg: 1.5rem;
    --label-md: 1.4rem;
    --fw-700: 700;
    --fw-600: 600;
    --fw-500: 500;
    /**
   * spacing
   */
    --section-padding: 32px;
    /**
   * box shadow
   */
    --shadow-1: 0 0 3px hsl(215, 28%, 17%);
    --shadow-2: 0 5px 13px hsl(215, 28%, 17%);
    --shadow-3: 0 5px 13px hsl(217, 19%, 27%);
    --shadow-4: 0 0 3px hsl(217, 19%, 27%);
    --shadow-5: 0 5px 13px hsla(214, 19%, 29%, 0.2);
    /**
   * border radius
   */
    --radius-circle: 50%;
    --radius-pill: 100px;
    --radius-12: 12px;
    --radius-8: 8px;
    --radius-6: 6px;
    /**
   * transition
   */
    --transition-1: 0.25s ease;
    --transition-2: 0.5s ease;
}





/*-----------------------------------*\
  #RESET
\*-----------------------------------*/

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

li {
    list-style: none;
}

a,
img,
span,
input,
button,
ion-icon {
    display: block;
}

a {
    text-decoration: none;
    color: inherit;
}

img {
    height: auto;
}

input,
button {
    background: none;
    border: none;
    font: inherit;
}

input {
    width: 100%;
}

button {
    cursor: pointer;
}

ion-icon {
    pointer-events: none;
    color: var(--white);
}

html {
    font-family: var(--ff-urbanist);
    font-size: 10px;
    scroll-behavior: smooth;
}

body {
    background-color: var(--oxford-blue-2);
    color: var(--cadet-grey);
    font-size: 1.6rem;
    line-height: 1.5;
    z-index: 1;
}

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background-color: hsl(0, 0%, 98%);
}

::-webkit-scrollbar-thumb {
    background-color: hsl(0, 0%, 80%);
}

    ::-webkit-scrollbar-thumb:hover {
        background-color: hsl(0, 0%, 70%);
    }





/*-----------------------------------*\
  #REUSED STYLE
\*-----------------------------------*/

.container {
    padding-inline: 12px;
}

.body-bg-shape {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 600px;
    height: 600px;
    background-image: var(--linear-gradient-1);
    border-radius: var(--radius-circle);
    filter: blur(200px);
    z-index: -1;
}

.headline-lg {
    color: var(--white);
    font-size: var(--headline-lg);
    font-weight: var(--fw-700);
}

.headline-md {
    font-size: var(--headline-md);
}

.headline-lg,
.headline-md {
    line-height: 1.35;
}

.title-lg {
    font-size: var(--title-lg);
}

.title-md {
    font-size: var(--title-md);
}

.title-sm {
    font-size: var(--title-sm);
}

.body-lg {
    font-size: var(--body-lg);
}

.body-md {
    font-size: var(--body-md);
}

.label-lg {
    font-size: var(--label-lg);
}

.label-md {
    font-size: var(--label-md);
}

.headline-md,
.title-lg,
.title-md,
.title-sm {
    color: var(--white);
    font-weight: var(--fw-600);
}

.btn-icon {
    width: 39px;
    height: 39px;
    display: grid;
    place-items: center;
    border-radius: var(--radius-circle);
    border: 1px solid var(--blue-violet);
}

    .btn-icon ion-icon {
        --ionicon-stroke-width: 50px;
    }

    .btn-icon.primary {
        background-color: var(--blue-violet);
        transition: var(--transition-1);
    }

        .btn-icon.primary:is(:hover, :focus-visible) {
            background-color: var(--electric-indigo);
            border-color: var(--electric-indigo);
        }

.link\:hover:is(:hover, :focus-visible) {
    color: var(--blue-violet);
}

.section {
    padding-block: var(--section-padding);
}

.btn {
    background-color: var(--blue-violet);
    color: var(--white);
    max-width: max-content;
    font-size: var(--body-md);
    font-weight: var(--fw-600);
    padding: 8px 20px;
    border-radius: var(--radius-pill);
    display: flex;
    align-items: center;
    gap: 4px;
    transition: var(--transition-1);
}

    .btn:is(:hover, :focus-visible) {
        background-color: var(--electric-indigo);
    }

.text-center {
    text-align: center;
}

.section-title {
    margin-block-end: 44px;
}

.card {
    background-color: var(--oxford-blue-2);
    border-radius: var(--radius-8);
}

.card-banner {
    border-radius: var(--radius-8);
}

.img-holder {
    aspect-ratio: var(--width) / var(--height);
    background-color: var(--oxford-blue);
    overflow: hidden;
}

.img-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition-2);
}

.btn-link {
    display: flex;
    align-items: center;
    gap: 4px;
    max-width: max-content;
    color: var(--white);
    font-weight: var(--fw-600);
    letter-spacing: 0.5px;
}

    .btn-link ion-icon {
        color: inherit;
    }

.grid-list {
    display: grid;
    gap: 32px;
}





/*-----------------------------------*\
  #HEADER
\*-----------------------------------*/

.header .logo {
    display: none;
}

.header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background-color: var(--oxford-blue-2);
    box-shadow: var(--shadow-1);
    padding-block: 16px;
    z-index: 4;
}

    .header.active {
        position: fixed;
        animation: slideIn 0.5s ease forwards;
    }

@keyframes slideIn {
    0% {
        transform: translateY(-100%);
    }

    100% {
        transform: translateY(0);
    }
}

.header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-action {
    display: flex;
    gap: 8px;
}

.nav-toggle-btn.active .default-icon,
.nav-toggle-btn .active-icon {
    display: none;
}

.nav-toggle-btn .default-icon,
.nav-toggle-btn.active .active-icon {
    display: block;
}

.header .profil-btn {
    overflow: hidden;
}

.nav-toggle-btn {
    font-size: 3.5rem;
}

.navbar {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 0;
    background-color: var(--oxford-blue-2);
    padding-inline: 16px;
    box-shadow: var(--shadow-1);
    z-index: 1;
    overflow: hidden;
}

    .navbar.active {
        height: max-content;
    }

.navbar-link {
    color: var(--white);
    font-weight: var(--fw-600);
    padding: 10px 13px;
}





/*-----------------------------------*\
  #HERO
\*-----------------------------------*/

.hero {
    position: relative;
    --section-padding: 180px 64px;
    text-align: center;
}

.hero-title .span {
    display: inline;
    background-image: var(--linear-gradient-2);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero .section-text {
    color: var(--white);
    opacity: 0.7;
    margin-block: 16px 32px;
}

.hero .btn {
    margin-inline: auto;
}





/*-----------------------------------*\
  #TOP COLLECTION
\*-----------------------------------*/

.top-collection .title-wrapper .btn-link {
    display: none;
}

.top-collection .slider {
    --slider-item: 1;
    position: relative;
    margin-inline: -8px;
    padding: 4px 12px;
    overflow-x: hidden;
}

.top-collection .slider-container {
    position: relative;
    display: flex;
    transition: transform 300ms ease;
}

.top-collection .slider-item {
    min-width: calc(100% / var(--slider-item));
    width: calc(100% / var(--slider-item));
    padding-inline: 12px;
}

.collection-card {
    padding: 12px;
    box-shadow: var(--shadow-1);
}

    .collection-card .card-content {
        padding: 16px;
    }

    .collection-card .card-profile {
        position: relative;
        width: 64px;
        margin-block-start: -50px;
        box-shadow: var(--shadow-2);
        background-color: var(--oxford-blue);
    }

        .collection-card .card-profile img {
            border-radius: var(--radius-6);
        }

        .collection-card .card-profile ion-icon {
            position: absolute;
            bottom: -8px;
            right: -8px;
            color: var(--green-cyan);
            font-size: 2.3rem;
        }

    .collection-card .card-title {
        margin-block-start: 12px;
    }

    .collection-card .card-author {
        display: flex;
        gap: 2px;
        font-style: italic;
    }

        .collection-card .card-author .link {
            font-style: normal;
            color: var(--blue-violet);
        }

    .collection-card .card-text {
        margin-block-start: 4px;
    }

.slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: var(--oxford-blue-2);
    font-size: 1.7rem;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: var(--radius-circle);
    box-shadow: var(--shadow-2);
    transition: var(--transition-1);
}

    .slider-btn:is(:hover, :focus-visible) {
        background-color: var(--blue-violet);
    }

    .slider-btn:disabled {
        display: none;
    }

    .slider-btn.prev {
        left: 10px;
    }

    .slider-btn.next {
        right: 10px;
    }

.top-collection .container > .btn-link {
    margin-inline: auto;
    margin-block-start: 32px;
}





/*-----------------------------------*\
  #DISCOVER
\*-----------------------------------*/

.discover-card {
    padding: 8px;
    border: 1px solid var(--gunmetal);
    box-shadow: var(--shadow-5);
    transition: var(--transition-1);
}

    .discover-card:is(:hover, :focus-within) {
        box-shadow: var(--shadow-3);
        transform: translateY(-8px);
    }

    .discover-card .card-banner {
        position: relative;
    }

    .discover-card:is(:hover, :focus-within) .img-cover {
        transform: scale(1.1);
    }

    .discover-card .btn {
        padding: 8px 16px;
        font-size: var(--label-md);
        position: absolute;
        top: calc(100% + 50px);
        left: 50%;
        transform: translate(-50%, -50%);
        transition: var(--transition-2);
    }

    .discover-card:is(:hover, :focus) .btn {
        top: 50%;
    }

    .discover-card .card-profile {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-block-start: 12px;
    }

        .discover-card .card-profile .img {
            border-radius: var(--radius-circle);
        }

    .discover-card .card-title {
        margin-block: 12px;
    }

    .discover-card .card-meta {
        background-color: var(--prussian-blue);
        display: flex;
        justify-content: space-between;
        padding: 8px;
        border-radius: var(--radius-8);
    }

    .discover-card .card-price {
        color: var(--white);
        display: flex;
        gap: 4px;
        font-weight: var(--fw-500);
    }

    .discover-card .countdown {
        position: absolute;
        bottom: 12px;
        left: 50%;
        transform: translateX(-50%);
        min-width: max-content;
        background-image: var(--linear-gradient-2);
        color: var(--white);
        font-weight: var(--fw-700);
        padding: 4px 16px;
        border-radius: var(--radius-pill);
        display: flex;
        align-items: center;
        gap: 4px;
    }

        .discover-card .countdown ion-icon {
            --ionicon-stroke-width: 50px;
            font-size: 2.2rem;
        }

.discover .btn-link {
    margin-inline: auto;
    margin-block-start: 32px;
}





/*-----------------------------------*\
  #SELLERS
\*-----------------------------------*/

.seller-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
}

    .seller-card .card-banner {
        position: relative;
        background-color: var(--oxford-blue);
    }

        .seller-card .card-banner img {
            border-radius: inherit;
        }

        .seller-card .card-banner ion-icon {
            position: absolute;
            top: -4px;
            right: -8px;
            font-size: 2rem;
            color: var(--green-cyan);
        }

    .seller-card .user-name {
        margin-block-start: 2px;
    }

    .seller-card .btn-icon {
        flex-shrink: 0;
        margin-inline-start: auto;
        border: 1px solid var(--blue-violet_a10);
        background-color: var(--bg, var(--blue-violet_a5));
        color: var(--color, var(--blue-violet));
        transition: var(--transition-1);
    }

        .seller-card .btn-icon ion-icon {
            color: var(--color);
            --ionicon-stroke-width: 55px;
        }

        .seller-card .btn-icon:is(:hover, :focus-visible) {
            --bg: var(--blue-violet);
            --color: var(--white);
        }





/*-----------------------------------*\
  #QNA
\*-----------------------------------*/

.qna .section-title {
    margin-block-end: 16px;
}

.qna-list {
    margin-block-start: 60px;
    display: grid;
    gap: 16px;
}

.qna-card {
    box-shadow: var(--shadow-1);
    border-radius: var(--radius-6);
    overflow: hidden;
}

.qna-btn {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    text-align: left;
    padding: 20px;
}

    .qna-btn ion-icon {
        flex-shrink: 0;
    }

.qna-card.active .qna-btn {
    background-color: var(--gunmetal);
}

    .qna-card.active .qna-btn > * {
        color: var(--blue-violet);
    }

    .qna-card.active .qna-btn ion-icon {
        transform: rotate(0.5turn);
    }

.qna-content .body-md {
    padding: 20px;
}

.qna-content {
    display: none;
}

.qna-card.active .qna-content {
    display: block;
}





/*-----------------------------------*\
  #CONTACT
\*-----------------------------------*/

.contact .section-title {
    margin-block-end: 16px;
}

.contact .btn {
    margin-inline: auto;
    margin-block-start: 24px;
}





/*-----------------------------------*\
  #NEWSLETTER
\*-----------------------------------*/

.newsletter {
    position: relative;
    margin-block-end: -200px;
}

.newsletter-card {
    position: relative;
    background-color: var(--oxford-blue-2);
    padding: 40px 24px;
    border-radius: var(--radius-12);
    box-shadow: var(--shadow-1);
    overflow: hidden;
    z-index: 1;
}

    .newsletter-card .card-text {
        margin-block: 8px 32px;
    }

.newsletter .input-field {
    background-color: var(--oxford-blue-2);
    font-size: var(--body-md);
    color: var(--white);
    padding: 12px 24px;
    box-shadow: var(--shadow-1);
    border-radius: var(--radius-pill);
    outline: none;
    margin-block-end: 16px;
}

    .newsletter .input-field::placeholder {
        color: var(--manatee);
    }

    .newsletter .input-field:focus {
        box-shadow: var(--shadow-4);
    }

.newsletter .btn {
    margin-inline: auto;
}

.newsletter .bg-icon {
    position: absolute;
    font-size: 7.2rem;
    opacity: 0.05;
    z-index: -1;
}

.newsletter .bg-icon-1 {
    top: -24px;
    left: -24px;
    transform: rotate(-45deg);
}

.newsletter .bg-icon-2 {
    bottom: -16px;
    right: -16px;
}





/*-----------------------------------*\
  #FOOTER
\*-----------------------------------*/

.footer {
    background-color: var(--oxford-blue);
}

.footer-top {
    padding-block-start: calc(var(--section-padding) + 200px);
    border-block-end: 1px solid var(--white_a10);
}

    .footer-top .container {
        display: grid;
        gap: 32px;
    }

.footer-brand .footer-text {
    color: var(--light-gray);
    margin-block-start: 24px;
}

.footer-list-title {
    margin-block-end: 24px;
}

.footer-link {
    display: flex;
    align-items: center;
    gap: 2px;
    padding-block: 5px;
    color: var(--light-gray);
}

    .footer-link ion-icon {
        color: inherit;
    }

.footer-list-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.footer-list ul:first-child {
    margin-block-end: 24px;
}

.footer-list-item ion-icon {
    color: var(--blue-violet);
    font-size: 2rem;
    --ionicon-stroke-width: 40px;
}

.footer-bottom {
    padding-block: 30px;
    color: var(--light-gray);
}

.copyright .span {
    display: inline;
    color: var(--maximum-red);
}





/*-----------------------------------*\
  #BACK TO TOP
\*-----------------------------------*/

.back-to-top {
    background-color: var(--blue-violet);
    position: fixed;
    bottom: 10px;
    right: 20px;
    z-index: 4;
    visibility: hidden;
    opacity: 0;
    transition: var(--transition-1);
}

    .back-to-top.active {
        visibility: visible;
        opacity: 1;
        transform: translateY(-10px);
    }





/*-----------------------------------*\
  #MEDIA QUERIES
\*-----------------------------------*/

/**
 * responsive for large than 575px screen
 */

@media (min-width: 575px) {

    /**
   * REUSED STYLE
   */

    .container {
        max-width: 480px;
        width: 100%;
        margin-inline: auto;
    }



    /**
   * HEADER
   */

    .header .container {
        max-width: unset;
    }



    /**
   * NEWSLETTER
   */

    .newsletter .input-wrapper {
        position: relative;
    }

    .newsletter .input-field {
        margin-block-end: 0;
        padding-inline-end: 140px;
    }

    .newsletter .btn {
        position: absolute;
        top: 4px;
        right: 4px;
        bottom: 4px;
    }
}





/**
 * responsive for large than 768px screen
 */

@media (min-width: 768px) {

    /**
   * CUSTOM PROPERTY
   */

    :root {
        /**
     * typography
     */
        --headline-md: 3rem;
        /**
     * spacing
     */
        --section-padding: 48px;
    }



    /**
   * REUSED STYLE
   */

    .container,
    .header .container {
        max-width: 768px;
    }

    .grid-list {
        grid-template-columns: 1fr 1fr;
        gap: 24px;
    }

    .section-text {
        max-width: 575px;
        margin-inline: auto;
    }



    /**
   * HEADER
   */

    .logo-small {
        display: none;
    }

    .header .logo {
        display: block;
    }



    /**
   * HERO
   */

    .hero {
        --section-padding: 240px 80px;
    }



    /**
   * TOP COLLECTION
   */

    .top-collection .title-wrapper .btn-link {
        display: flex;
        margin: 0;
    }

    .top-collection .title-wrapper {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
    }

    .top-collection .slider {
        --slider-item: 2;
        margin-inline: -16px;
        padding-inline: 8px;
    }

    .top-collection .slider-item {
        padding-inline: 12px;
    }

    .top-collection .container > .btn-link {
        display: none;
    }



    /**
   * DISCOVER
   */

    .discover .btn-link {
        margin-block-start: 60px;
    }



    /**
   * NEWSLETTER
   */

    .newsletter {
        margin-block-end: -130px;
    }

    .newsletter-card {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: center;
        gap: 32px;
    }

    .newsletter .text-center {
        text-align: left;
    }

    .newsletter .headline-md {
        --headline-md: 2.6rem;
    }

    .newsletter-card .card-text {
        margin-block-end: 0;
    }



    /**
   * FOOTER
   */

    .footer-top {
        padding-block-start: calc(var(--section-padding) + 80px);
    }

        .footer-top .container {
            grid-template-columns: 1fr 1fr;
        }

    .footer-brand {
        padding-inline-end: 40px;
    }
}





/**
 * responsive for large than 992px screen
 */

@media (min-width: 992px) {

    /**
   * CUSTOM PROPERTY
   */

    :root {
        /**
     * typography
     */
        --headline-lg: 6rem;
    }



    /**
   * REUSED STYLE
   */

    .container,
    .header .container {
        max-width: 950px;
    }

    .grid-list {
        grid-template-columns: repeat(3, 1fr);
    }



    /**
   * HEADER
   */

    .header {
        background: none;
        box-shadow: none;
    }

        .header.active {
            background: var(--oxford-blue-2);
            box-shadow: var(--shadow-1);
        }

    .nav-toggle-btn {
        display: none;
    }

    .header-action {
        gap: 12px;
    }

    .navbar,
    .navbar.active {
        all: unset;
        display: block;
        margin-inline: auto 24px;
    }

    .navbar-list {
        display: flex;
        gap: 12px;
    }



    /**
   * TOP COLLECTION
   */

    .top-collection .slider {
        --slider-item: 3;
    }



    /**
   * QNA
   */

    .qna .container {
        max-width: 55%;
    }



    /**
   * NEWSLETTER
   */

    .newsletter-card {
        padding-inline: 32px;
    }

    .newsletter .bg-icon {
        font-size: 15rem;
    }

    .newsletter .bg-icon-1 {
        top: -36px;
        left: -36px;
    }

    .newsletter .bg-icon-2 {
        bottom: -30px;
        right: -30px;
    }



    /**
   * FOOTER
   */

    .footer-top .container {
        grid-template-columns: 3fr 0.8fr 0.8fr 0fr;
    }
}





/**
 * responsive for large than 1200px screen
 */

@media (min-width: 1200px) {

    /**
   * REUSED STYLE
   */

    :root {
        /**
     * spacing
     */
        --section-padding: 56px;
    }



    /**
   * REUSED STYLE
   */

    .container,
    .header .container {
        max-width: 1120px;
    }



    /**
   * TOP COLLECTION
   */

    .top-collection .slider {
        --slider-item: 4;
    }



    /**
   * DISCOVER
   */

    .discover .grid-list {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ===== Display ===== */
.d-flex {
    display: flex !important;
}

.d-inline-flex {
    display: inline-flex !important;
}

/* ===== Direction ===== */
.flex-row {
    flex-direction: row !important;
}

.flex-row-reverse {
    flex-direction: row-reverse !important;
}

.flex-column {
    flex-direction: column !important;
}

.flex-column-reverse {
    flex-direction: column-reverse !important;
}

/* ===== Wrap ===== */
.flex-wrap {
    flex-wrap: wrap !important;
}

.flex-nowrap {
    flex-wrap: nowrap !important;
}

.flex-wrap-reverse {
    flex-wrap: wrap-reverse !important;
}

/* ===== Justify Content ===== */
.justify-content-start {
    justify-content: flex-start !important;
}

.justify-content-end {
    justify-content: flex-end !important;
}

.justify-content-center {
    justify-content: center !important;
}

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

.justify-content-around {
    justify-content: space-around !important;
}

.justify-content-evenly {
    justify-content: space-evenly !important;
}

/* ===== Align Items ===== */
.align-items-start {
    align-items: flex-start !important;
}

.align-items-end {
    align-items: flex-end !important;
}

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

.align-items-baseline {
    align-items: baseline !important;
}

.align-items-stretch {
    align-items: stretch !important;
}

/* ===== Align Content ===== */
.align-content-start {
    align-content: flex-start !important;
}

.align-content-end {
    align-content: flex-end !important;
}

.align-content-center {
    align-content: center !important;
}

.align-content-between {
    align-content: space-between !important;
}

.align-content-around {
    align-content: space-around !important;
}

.align-content-stretch {
    align-content: stretch !important;
}

/* ===== Align Self ===== */
.align-self-start {
    align-self: flex-start !important;
}

.align-self-end {
    align-self: flex-end !important;
}

.align-self-center {
    align-self: center !important;
}

.align-self-baseline {
    align-self: baseline !important;
}

.align-self-stretch {
    align-self: stretch !important;
}

/* ===== Grow / Shrink ===== */
.flex-grow-0 {
    flex-grow: 0 !important;
}

.flex-grow-1 {
    flex-grow: 1 !important;
}

.flex-shrink-0 {
    flex-shrink: 0 !important;
}

.flex-shrink-1 {
    flex-shrink: 1 !important;
}

/* ===== Flex (Shorthand) ===== */
.flex-fill {
    flex: 1 1 auto !important;
}

.flex-1 {
    flex: 1 !important;
}

/* ===== Order ===== */
.order-first {
    order: -1 !important;
}

.order-last {
    order: 999 !important;
}

.order-0 {
    order: 0 !important;
}

.order-1 {
    order: 1 !important;
}

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

.order-3 {
    order: 3 !important;
}


.mx-1 {
    margin: 0px 10px !important;
}

.HowItsWork {
    width: 100%;
}

.itemsBox {
    width: calc(100% / 4 - 20px);
    margin: 10px;
    text-align:center;
}
.itemsBox1 {
    width: calc(100% - 20px);
    margin: 10px;
    text-align: center;
}
.itemsBox5 {
    width: calc(100% / 5 - 20px);
    margin: 10px;
    text-align: center;
}
.itemsBox2 {
    width: calc(100% / 2 - 20px);
    margin: 10px;
    text-align: center;
}

.itemsBox h5, .itemsBox5 h5, .itemsBox1 h5, .itemsBox2 h5 {
    font-size: 20px;
    font-weight: 600;
}

.form-group {
    position: relative;
    width: 100%;
    margin-bottom: 15px;
    text-align: left;
}

.spanErrr {
    position: absolute;
    right: 0px;
    top: 0px;
}

.form-control {
    border: solid 1px #7c3bed;
    padding: 6px;
    outline: none;
    width: 100%;
    background: none !important;
    color: #e3e3e3;
}

    .form-control option {
        color:#000 !important;
    }
table.table {
    text-align:left;
    width:100%;
    border-collapse:collapse;
}
table.table tr td {
    text-align:left;
    border:solid 1px hsla(262, 83%, 58%, 1);
    padding:10px;
}
@media(max-width:1199px) {
    .itemsBox, .itemsBox5, .itemsBox2 {
        width: calc(100% / 2 - 20px);
    }
}

@media(max-width:640px) {
    .itemsBox, .itemsBox5, .itemsBox2 {
        width: calc(100% / 1 - 0px);
    }
}