/*
::::::::::::::::::::::::::::::::::::::::::::::::::::
        Bootstrap 5 breakpoints
::::::::::::::::::::::::::::::::::::::::::::::::::::
*/

/*
X-Small devices (portrait phones, less than 576px)
No media query for `xs` since this is the default in Bootstrap "mobile first"
*/

/* ==================================== General ==================================== */
.header-custom {
    font-size: 1.5rem;
    font-weight: bold;
}

.header-sm-custom {
    font-size: 1.3rem;
    font-weight: bold;
}

.subheader-custom {
    font-size: 1rem;
}

.subheader-sm-custom {
    font-size: 0.9rem;
}

.btn-cta-custom {
    font-size: 0.8rem !important;
}

.card.card-custom .card-title {
    font-weight: bold;
}

.card.card-custom .card-text {
    font-size: 0.9rem;
}

/* ==================================== END: General ==================================== */
/* ==================================== Layout.cshtml ===================================== */
#section_header nav.navbar .navbar-brand img {
    width: 16.4rem;
}

#section_header .btn.btn-outline-secondary {
    padding: 4px 14px;
    font-size: 0.8rem;
}

#section_header nav.navbar i.bi {
    font-size: 1rem
}

#btn-responsive-login {
    padding: 0 10px !important;
}

#section_header nav.navbar button.navbar-toggler {
    padding: 0 0;
    font-size: 0.8rem;
}
/* ==================================== END: Layout.cshtml ===================================== */



/* ==================================== Index.cshtml ===================================== */
#section_divisions i.bi.logo {
    color: var(--primary-color);
    font-size: 3.5rem;
}

#section_awards img.img-fluid {
    width: 65%;
}

#section_awards div.award-card h1 {
    font-size: 1.2rem;
    font-weight: bold;
}

#section_awards div.award-card p {
    font-size: 1rem;
}

#section_awards p i.bi {
    font-size: 1.2rem;
    color: var(--primary-color-dark);
}

#section_news .card.card-custom .card-title {
    font-size: 1rem;
}

#section_news .card.card-custom .card-text {
    font-size: 0.8rem;
}

#section_employee .card.card-custom .card-title {
    font-size: 1.2rem;
    color: var(--primary-color);
}

#section_employee .card.card-custom .card-text {
    font-size: 0.8rem;
}
/* ==================================== END: Index.cshtml ===================================== */

/* ============================== Opportunities.cshtml ==========================*/
#div_positions ul li {
    margin: 10px 10px;
    padding-left: 3rem;
    padding-right: .2rem;
    padding-top: .2rem;
    padding-bottom: .2rem;
    border-radius: 8px;
    box-shadow: 2px 3px 11px 0px #00000057;
    font-size: .9rem;
}

#div_positions .number-bubble {
    background-color: var(--secondary-color);
    color: white;
    font-size: 1.1rem;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    border-bottom-left-radius: 16px;
    padding: 7px 15px;
    font-weight: bold;
    position: absolute;
    left: -1.1rem;
    top: -.5rem;
}

#div_positions .btn.btn-outline-primary {
    padding: 0px 8px;
    font-size: 1rem;
}
/* ============================== END: Opportunities.cshtml ==========================*/

/* =========================== EOM ============================= */

.container.container-certificate .img-fluid.avatar {
    width: 75%;
}

.container.container-certificate .img-fluid.img-badge {
    width: 40%;
}
/* =========================== END: EOM ============================= */

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
    /* ==================================== General ==================================== */
    .header-custom {
        font-size: 1.2rem;
    }

    .header-sm-custom {
        font-size: 1rem;
    }

    .subheader-custom {
        font-size: 0.8rem;
    }

    .subheader-sm-custom {
        font-size: 0.7rem;
    }

    .btn-cta-custom {
        font-size: 0.7rem !important;
    }

    .card.card-custom .card-text {
        font-size: 0.8rem;
    }

    #section_hero.logistics .carousel-caption, 
    #section_hero.distribution .carousel-caption, 
    #section_hero.storage .carousel-caption, 
    #section_hero.employment .carousel-caption, 
    #section_hero.login .carousel-caption, 
    #section_hero.opportunities .carousel-caption, 
    #section_hero.terms .carousel-caption, 
    #section_hero.error .carousel-caption, 
    #section_hero.news .carousel-caption {
        bottom: 0;
        left: 5%;
    }


    /* ==================================== END: General ==================================== */



    /* ==================================== Layout.cshtml ===================================== */
    #section_header nav.navbar .navbar-brand img {
        width: 18rem;
    }

    #section_header .btn.btn-secondary {
        padding: 0px 10px;
        font-size: 1rem;
    }

    #section_header nav.navbar button.navbar-toggler {
        font-size: 1rem;
    }
    /* ==================================== END: Layout.cshtml ===================================== */



    /* ==================================== Index.cshtml ===================================== */
    #section_divisions i.bi.logo {
        font-size: 3rem;
    }

    #section_awards img.img-fluid {
        width: 55%;
    }

    #section_employee .card.card-custom .card-title {
        font-size: 1rem;
    }
    /* ==================================== END: Index.cshtml ===================================== */

    /* ========================== Distribution.cshtml =========================== */
    #section_top_features p a {
        font-size: 0.8rem;
    }
    /* ========================== END: Distribution.cshtml =====================*/

    /* =========================== EOM ============================= */

    .container.container-certificate .img-fluid.avatar {
        width: 55%;
    }
    /* =========================== END: EOM ============================= */
}

/*Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {

    /* ==================================== General ==================================== */
    .header-custom {
        font-size: 1.4rem;
    }

    .header-sm-custom {
        font-size: 1.1rem;
    }

    .subheader-custom {
        font-size: 0.9rem;
    }

    .subheader-sm-custom {
        font-size: 0.8rem;
    }

    .btn-cta-custom {
        font-size: 0.7rem !important;
    }

    .card.card-custom .card-text {
        font-size: 0.8rem;
    }
    /* ==================================== END: General ==================================== */



    /* ==================================== Layout.cshtml ===================================== */
    #section_header nav.navbar .navbar-brand img {
        width: 20rem;
    }
    /* ==================================== END: Layout.cshtml ===================================== */


    /* ==================================== Index.cshtml ===================================== */
    #section_divisions i.bi.logo {
        font-size: 2.6rem;
    }

    #section_awards div.award-card h1 {
        font-size: 1rem;
    }

    #section_awards div.award-card p {
        font-size: 0.8rem;
    }

    #section_awards p i.bi {
        font-size: 1rem;
    }

    #section_testimonials div.bg-right img {
        width: 60%;
        transform: translate(33%, -36%);
    }

    #section_news .card.card-custom .card-title {
        font-size: 0.9rem;
    }

    #section_news .card.card-custom .card-text {
        font-size: 0.7rem;
    }

    #section_employee .card.card-custom .card-title {
        font-size: 1rem;
    }

    #section_employee .card.card-custom .card-text {
        font-size: 0.9rem;
    }
    /* ==================================== END: Index.cshtml ===================================== */

    /* ========================== Distribution.cshtml =========================== */
    #section_top_features p a {
        font-size: 0.9rem;
    }
    /* ========================== END: Distribution.cshtml =====================*/


    /* ============================== Opportunities.cshtml ==========================*/
    #div_positions ul li {
        margin: 10px 10px;
        padding-right: .5rem;
        padding-top: .5rem;
        padding-bottom: .5rem;
        font-size: 1rem;
    }

    #div_positions .number-bubble {
        font-size: 1.2rem;
    }

    #div_positions .btn.btn-outline-primary {
        padding: 5px 18px;
    }
    /* ============================== END: Opportunities.cshtml ==========================*/

    /* =========================== EOM ============================= */

    .container.container-certificate .img-fluid.avatar {
        width: 45%;
    }

    .container.container-certificate .img-fluid.img-badge {
        width: 25%;
    }
    /* =========================== END: EOM ============================= */
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {

    /* ==================================== General ==================================== */
    .header-sm-custom {
        font-size: 1.3rem;
    }

    .subheader-sm-custom {
        font-size: 0.9rem;
    }

    .card.card-custom .card-text {
        font-size: 0.9rem;
    }
    /* ==================================== General ==================================== */

    /* ==================================== Layout.cshtml ===================================== */
    #section_header nav.navbar .navbar-brand img {
        width: 16rem;
    }

    #section_header nav.navbar ul li {
        font-size: 0.6rem;
    }

    #section_header .btn.btn-secondary {
        padding: 2px 9px;
        font-size: 1.2rem;
    }

    #section_header nav.navbar i.bi {
        font-size: 1.2rem
    }

    #section_divisions i.bi.logo {
        font-size: 3.8rem;
    }

    #section_header div.offcanvas {
        background: none;
    }
    /* ==================================== END: Layout.cshtml ===================================== */



    /* ==================================== Index.cshtml ===================================== */
    #section_awards div.award-card h1 {
        font-size: 1.1rem;
    }

    #section_awards div.award-card p {
        font-size: 0.9rem;
    }

    #section_awards p i.bi {
        font-size: 1rem;
    }

    #section_news .card.card-custom .card-title {
        font-size: 1rem;
    }

    #section_news .card.card-custom .card-text {
        font-size: 0.8rem;
    }

    #section_employee .card.card-custom .card-title {
        font-size: 1.2rem;
    }
    /* ==================================== END: Index.cshtml ===================================== */

    /* =========================== EOM ============================= */

    .container.container-certificate .img-fluid.avatar {
        width: 100%;
    }

    .container.container-certificate .img-fluid.img-badge {
        width: 55%;
    }
    /* =========================== END: EOM ============================= */
}

/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {

    /* ==================================== General ==================================== */
    .header-sm-custom {
        font-size: 1.5rem;
    }

    .subheader-sm-custom {
        font-size: 1rem;
    }

    .header-custom {
        font-size: 1.6rem;
    }

    .subheader-custom {
        font-size: 1rem;
    }

    .btn-cta-custom {
        font-size: 0.8rem !important;
    }

    .card.card-custom .card-text {
        font-size: 1rem;
    }

    .card.card-custom .card-title {
        font-size: 1.3rem;
    }
    /* ==================================== END: General ==================================== */


    /* ==================================== Layout.cshtml ===================================== */
    #section_header nav.navbar .navbar-brand img {
        width: 22rem;
    }

    #section_header nav.navbar ul li {
        font-size: 0.75rem;
    }
    /* ==================================== END: Layout.cshtml ===================================== */


    /* ==================================== Index.cshtml ===================================== */
    #section_awards img.img-fluid {
        width: 45%;
    }

    #section_news .card.card-custom .card-title {
        font-size: 1.1rem;
    }

    #section_news .card.card-custom .card-text {
        font-size: 0.9rem;
    }

    #section_employee .card.card-custom .card-title {
        font-size: 1.2rem;
    }

    #section_employee .card.card-custom .card-text {
        font-size: 1rem;
    }
    /* ==================================== END: Index.cshtml ===================================== */

    /* ========================== Distribution.cshtml =========================== */
    #section_top_features p a {
        font-size: 1rem;
    }
    /* ========================== END: Distribution.cshtml =====================*/
}

/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {

    /* ==================================== General ==================================== */
    .header-sm-custom {
        font-size: 1.4rem;
    }

    .header-custom {
        font-size: 1.8rem;
    }

    .subheader-custom {
        font-size: 1.4rem;
    }

    .btn-cta-custom {
        font-size: 1rem !important;
    }

    .card.card-custom .card-text {
        font-size: 1.1rem;
    }

    .card.card-custom .card-title {
        font-size: 1.5rem;
    }
    /* ==================================== END: General ==================================== */



    /* ==================================== Layout.cshtml ===================================== */
    #section_header nav.navbar .navbar-brand img {
        width: 23rem;
    }

    #section_header nav.navbar i.bi {
        font-size: 1.4rem
    }

    #section_header .btn.btn-secondary {
        padding: 2px 14px;
        font-size: 1.3rem;
    }

    #section_header nav.navbar ul li {
        font-size: 0.8rem;
    }
    /* ==================================== END: Layout.cshtml ===================================== */



    /* ==================================== Index.cshtml ===================================== */
    #section_awards img.img-fluid {
        width: 52%;
    }

    #section_awards div.award-card h1 {
        font-size: 1.2rem;
    }

    #section_awards div.award-card p {
        font-size: 1rem;
    }

    #section_awards p i.bi {
        font-size: 1.2rem;
    }

    #section_employee .card.card-custom .card-title {
        font-size: 1.2rem;
    }

    #section_employee .card.card-custom .card-text {
        font-size: 1.1rem;
    }
    /* ==================================== END: Index.cshtml ===================================== */

    /* ========================== Distribution.cshtml =========================== */
    #section_top_features p a {
        font-size: 1.4rem;
    }
    /* ========================== END: Distribution.cshtml =====================*/
}