/* ==========================================================
   PORTAL SHON HOME
========================================================== */

.portal-home {
    min-height: 100vh;
    padding-top: 50px !important;
    padding-bottom: 86px !important;
    background: var(--institutional-blue);
    color: #fff;
    font-family: "Inter", sans-serif;
}

.portal-home__hero {
    margin-bottom: 10px;
}

.portal-home__logo {
    display: block;
    margin-right: auto;
    margin-left: auto;
    filter: drop-shadow(0 16px 34px rgba(0,0,0,.20));
}

.portal-home__title {
    color: #f7f2e8;
    font-size: 2.5rem;
    font-weight: 700;
    letter-spacing: 0;
}

.portal-home__subtitle {
    font-size: large;
    color: rgba(255,255,255,.70);
    font-weight: 400;
}

.portal-search-card {
    overflow: hidden;
    color: #fff;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.14) !important;
    border-radius: 18px;
    box-shadow: 0 18px 44px rgba(0,0,0,.18) !important;
    backdrop-filter: blur(12px);
}

.portal-search-card__body {
    padding: 22px 24px !important;
}

.portal-search-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    margin-right: 10px;
    color: #d7b36a;
    font-size: 1.45rem;
    background: rgba(215,179,106,.12);
    border: 1px solid rgba(215,179,106,.24);
    border-radius: 14px;
    vertical-align: middle;
}

.portal-search-card h5 {
    display: flex;
    align-items: center;
    color: #fff;
    margin-bottom: 16px !important;
}

.portal-search-card .input-group-text,
.portal-search-card .form-control,
.portal-search-card .form-select {
    border-color: rgba(255,255,255,.20);
}

.portal-search-card .input-group-text {
    color: rgba(255,255,255,.78);
    background: rgba(23,23,53,.76);
}

.portal-search-card .form-control,
.portal-search-card .form-select {
    color: #171735;
    background-color: rgba(255,255,255,.94);
}

.portal-btn-gold,
.portal-btn-gold:focus {
    color: #171735;
    background: #d7b36a;
    border-color: #d7b36a;
    font-weight: 700;
}

.portal-btn-gold:hover {
    color: #171735;
    background: #e4c680;
    border-color: #e4c680;
}

.portal-btn-blue,
.portal-btn-blue:focus {
    color: #fff;
    background: #171735;
    border-color: #171735;
    font-weight: 700;
}

.portal-btn-blue:hover {
    color: #fff;
    background: #24254e;
    border-color: #24254e;
}

.portal-btn-outline,
.portal-btn-outline:focus {
    color: #e7edf8;
    border-color: rgba(120,145,201,.82);
    font-weight: 700;
}

.portal-btn-outline:hover {
    color: #171735;
    background: #e7edf8;
    border-color: #e7edf8;
}

.portal-cta-card {
    min-height: 100%;
    border-radius: 20px;
    box-shadow: 0 18px 44px rgba(0,0,0,.18) !important;
}

.portal-cta-card .card-body {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.portal-cta-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin-bottom: 18px;
    font-size: 1.75rem;
    border-radius: 20px;
}

.portal-cta-card h4 {
    color: #fff;
}

.portal-cta-card p {
    color: rgba(255,255,255,.70) !important;
}

.portal-cta-card--start {
    background: rgba(14,18,47,.78);
    border: 1px solid rgba(82,109,169,.58) !important;
}

.portal-cta-card--start .portal-cta-card__icon {
    color: #cfd8ee;
    background: rgba(82,109,169,.16);
    border: 1px solid rgba(120,145,201,.42);
}

.portal-cta-card--main {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(145deg, rgba(215,179,106,.18), rgba(23,23,53,.94) 46%),
        rgba(23,23,53,.94);
    border: 1px solid rgba(215,179,106,.70) !important;
    box-shadow: 0 20px 50px rgba(0,0,0,.22), inset 0 1px 0 rgba(215,179,106,.18) !important;
}

.portal-cta-card--main::before {
    position: absolute;
    inset: 0;
    pointer-events: none;
    content: "";
    background: linear-gradient(115deg, rgba(215,179,106,.18), transparent 34%);
}

.portal-cta-card--main .card-body {
    position: relative;
}

.portal-cta-card--main .portal-cta-card__icon {
    color: #171735;
    background: #d7b36a;
    border: 1px solid rgba(255,255,255,.24);
}

@media (max-width: 767.98px) {
    .portal-home {
        padding-top: 42px !important;
        padding-bottom: 62px !important;
    }

    .portal-search-card__body {
        padding: 20px !important;
    }

    .portal-search-card__icon {
        flex: 0 0 auto;
    }
}

/* ==========================================================
   POPULAR PRODUCTS
========================================================== */

.popular-products-section {
    padding: 72px 0;
    background: #f4f1ea;
}

.product-section {
    padding: 68px 0;
    background: #F7F3EC;
}

.product-section + .campaign-section,
.campaign-section + .product-section {
    margin-top: 0;
}

.product-carousel {
    display: flex;
    gap: 22px;
    overflow-x: auto;
    padding: 6px 4px 18px;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.product-carousel::-webkit-scrollbar {
    display: none;
}

.section-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 34px;
}

.section-header h2 {
    margin: 5px 0 8px;
}

.section-header p {
    max-width: 580px;
    margin: 0;
    color: #726f78;
}

.section-tag {
    color: #b89a62;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.section-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    color: #151833;
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
    text-transform: uppercase;
}

.section-link:hover {
    color: #b89a62;
}

@media (max-width: 767.98px) {

    .popular-products-section {
        padding: 52px 0;
    }

    .section-header {
        align-items: flex-start;
        flex-direction: column;
        margin-bottom: 24px;
    }

    .product-card {
        flex-basis: 82%;
        max-width: 300px;
    }

}
/*==================================================
  BANNER
==================================================*/

.banner-section{

    margin-bottom:0;

    background:#151833;

}

.banner-section img{

    width:100%;

    height:auto;

    display:block;

}

.carousel-item{

    overflow:hidden;

}

.carousel-item img{

    transition:.4s;

}

.carousel-item:hover img{

    transform:scale(1.02);

}

.carousel-indicators button{

    width:12px;

    height:12px;

    border-radius:50%;

}

.carousel-control-prev,

.carousel-control-next{

    width:7%;

}