/*@import "tailwindcss";*/
@import "./assets/tailwind.css";
@import "./assets/font-awesome/font-awesome.min.css";
@import "./assets/iconoir.css";

body {
    color: #1F2329;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    --container-width: 100%;
    @media (width >= 40rem) {
        --container-width: 40rem;
    }
    @media (width >= 48rem) {
        --container-width: 48rem;
    }
    @media (width >= 64rem) {
        --container-width: 64rem;
    }
    @media (width >= 80rem) {
        --container-width: 80rem;
    }
    @media (width >= 96rem) {
        --container-width: 96rem;
    }
}

@theme {
    --color-primary: #013F96;
    --color-secondary: #1F2329;
    --color-yellow: #FFD941;
    --color-green: #059543;
}

.nav-item {
    height: 88px;
    line-height: 88px;
    text-align: center;
}

.site-logo {
    display: block;
    height: 3rem;
    width: auto;

    @media (width >= 64rem) {
        height: 4rem;
    }

    @media (width >= 96rem) {
        height: 4.5rem;
    }
}

.nav-menu-list {
    position: absolute;
    height: calc(100vh - 60px);
    top: 60px;
    left: 100vw;
}

.nav-item-mobile {
    border-radius: 5px;
    padding: 10px 36px;
    width: 100%;
    display: block;
}

.fade-in-right {
    -webkit-animation: fade-in-right 0.5s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
    animation: fade-in-right 0.5s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

@-webkit-keyframes fade-in-right {
    from {
        left: 100vw;
        opacity: 0;
    }
    to {
        left: 0;
        opacity: 1;
    }
}

@keyframes fade-in-right {
    from {
        left: 100vw;
        opacity: 0;
    }
    to {
        left: 0;
        opacity: 1;
    }
}

.fade-out-right {
    -webkit-animation: fade-out-right 0.5s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
    animation: fade-out-right 0.5s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

@-webkit-keyframes fade-out-right {
    from {
        left: 0;
        opacity: 1;
    }
    to {
        left: 100vw;
        opacity: 0;
    }
}

@keyframes fade-out-right {
    from {
        left: 0;
        opacity: 1;
    }
    to {
        left: 100vw;
        opacity: 0;
    }
}

footer ul {
    font-size: 14px;
    margin-right: 3%;
}

footer ul li {
    margin-bottom: 20px;
    cursor: pointer;
}

footer ul li:hover {
    color: var(--color-primary);
}

footer ul li:first-child {
    font-weight: bold;
    font-size: 18px;
    margin-bottom: 30px;
    cursor: auto;
}

footer ul li:first-child:hover {
    color: #1F2329;
}

#pagination {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

#pagination a {
    border-radius: 5px;
    margin: 0 5px;
    padding: 0 5px;
    min-width: 28px;
    height: 28px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #C4C4C4;
    border: 1px solid #C4C4C4;
    cursor: pointer;
    font-size: 12px;

    @media (width >= 64rem) {
        border-radius: 10px;
        font-size: 18px;
        margin: 0 7px;
        padding: 0 10px;
        min-width: 44px;
        height: 44px;
    }
}

#pagination .prev,
#pagination .next {
    color: var(--color-green);
    font-size: 32px;
    border: none;
    display: none;

    @media (width >= 64rem) {
        display: flex;
    }
}

#pagination .invalid-item {
    color: #C4C4C4;
    cursor: not-allowed;
}

#pagination .first-item,
#pagination .last-item {
    background-color: var(--color-green);
    color: #ffffff;
    border: none;
    width: 52px;

    @media (width >= 64rem) {
        width: 80px;
    }
}

#pagination .active-item {
    background-color: var(--color-green);
    color: #ffffff;
    border: none;
}

@media (width >= 64rem) {
    .product-feature-heading {
        padding-left: 1rem;
    }

    .product-feature-heading-home {
        margin-top: 1.5rem;
        padding-left: 1.25rem;
    }

    .product-feature-heading-list {
        margin-top: 2.25rem;
        padding-left: 1.5rem;
    }

    .home-product-summary-list {
        font-size: 0.9375rem;
        line-height: 2.25rem;
    }
}

.home-hero-banner {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;

    @media (width >= 64rem) {
        padding-top: 5rem;
        padding-bottom: 5rem;
    }

    @media (width >= 96rem) {
        padding-top: 6.5rem;
        padding-bottom: 6.5rem;
    }
}

.home-product-intro {
    padding-top: 4rem;
    padding-bottom: 4rem;

    @media (width >= 64rem) {
        padding-top: 3.75rem;
        padding-bottom: 3.75rem;
    }
}

.home-product-showcase {
    @media (width >= 64rem) {
        padding-top: 2.75rem;
        padding-bottom: 3.25rem;
    }
}

.home-product-grid-wrap {
    @media (width >= 64rem) {
        padding-bottom: 3rem;
    }
}

.home-about-section {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;

    @media (width >= 64rem) {
        padding-top: 4.25rem;
        padding-bottom: 4.25rem;
    }

    @media (width >= 96rem) {
        padding-top: 5rem;
        padding-bottom: 5rem;
    }
}

.home-advantage-section {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;

    @media (width >= 64rem) {
        padding-top: 4rem;
        padding-bottom: 4rem;
    }
}

.home-solution-section {
    @media (width >= 64rem) {
        padding-top: 4.25rem;
        padding-bottom: 4.25rem;
    }
}

.home-news-section-heading {
    @media (width >= 64rem) {
        padding-top: 4.25rem;
        padding-bottom: 1rem;
    }
}

.home-news-section-slider {
    @media (width >= 64rem) {
        padding-bottom: 4rem;
    }
}

.home-partner-section {
    @media (width >= 64rem) {
        padding-top: 2.75rem;
        padding-bottom: 2.75rem;
    }
}