@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css");

* {
    box-sizing: border-box;
}

body {
    margin: 0px;
    padding: 0px;

}

.container {
    max-width: 1440px !important;
}

.navbar {
    background-color: #001b41 !important;
}

.footer {
    background-color: #004A98 !important;
}

.hero {
    background-color: #002559 !important;
    overflow-y: auto;
    min-height: 300px;
}

    .hero + .container {
        background-color: #001b41 !important;
        border-radius: 25px !important;
        /* transform: translateY(-250px); */
        top: -250px;
        position: relative;
        width: 80% !important;
    }


.navbar-brand {
    max-width: 500px !important;
}

.fix {
    top: -100px;
    position: relative;
}

.imgup {
    transform: translateY(-50px) !important;
}

:hover {
    opacity: 1;
}

.bh:hover {
    background-color: rgb(15, 176, 205);
    /* Change the background color and opacity as desired */
    transition: background-color 0.3s ease;
    color: white;
}

.bh1:hover {
    background-color: rgb(128, 224, 251);
    /* Change the background color and opacity as desired */
    transition: background-color 0.3s ease;
    color: rgb(44, 131, 203)e;
}

.bh2:hover {
    background-color: rgb(254, 226, 128);
    /* Change the background color and opacity as desired */
    transition: background-color 0.3s ease;
    color: rgb(241, 160, 41);
}

.bh3:hover {
    background-color: rgb(234, 197, 255);
    /* Change the background color and opacity as desired */
    transition: background-color 0.3s ease;
    color: rgb(145, 121, 187);
}

.bh4:hover {
    background-color: rgb(231, 230, 230);
    /* Change the background color and opacity as desired */
    transition: background-color 0.3s ease;
}

.kb {
    background-image: url('/images/background1.jpg');
}

/*.footer a {
   font-size: 20px;
   color: white !important;
   display: block;
}*/

.footer a:hover {
    text-decoration: underline;
}



@media screen and (max-width: 500px) {
    .imgup {
        transform: translateY(15px) !important;
    }

    .navbar-brand {
        width: 70% !important;
    }

    .footer a {
        padding: 10px 2px !important;
    }

    .footer img {
        padding-top: 10px;
    }
}

/*
    ANIMATIONS
*/

.sectionHiddenRight {
    opacity: 0;
    transform: translateX(50%) ;
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.sectionHiddenLeft {
    opacity: 0;
    transform: translateX(-50%);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.sectionHiddenUp{
    opacity: 0;
    transform: translateY(50%);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.sectionHiddenUp100 {
    opacity: 0;
    transform: translateY(-100%);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fadeInHidden {
    opacity: 0;
    transition: opacity 1.5s ease-out;
}

.fadeInShow{
    opacity:1;
}

.itemBlock:nth-child(2) {
    transition-delay: 200ms;
}

.itemBlock:nth-child(3) {
    transition-delay: 400ms;
}

.itemBlock:nth-child(4) {
    transition-delay: 600ms;
}
.itemBlock:nth-child(5) {
    transition-delay: 800ms;
}

.institutionalItem:nth-child(2) {
    transition-delay: 200ms;
}
.institutionalItem:nth-child(3) {
    transition-delay: 400ms;
}



.showSectionAxieY {
    opacity: 1;
    transform: translateY(0);
}

.showSectionAxieX {
    opacity: 1;
    transform: translateX(0);
}





@media (max-width: 991px) {
    .menu-box-shadow {
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        transition: max-height 0.4s ease-in-out, opacity 0.4s ease-in-out;
    }

    .menu-open {
        max-height: 500px; 
        opacity: 1;
    }
}

/*********/


/*
    Instructional
*/
@media (max-width: 500px){
    .margin-circle {
        margin-right: 0 !important;
        margin-top: 10px !important;
        
    }
    .center-circle {
        display: flex;
        justify-content: center;
    }
    .center-title {
        text-align: center;
    }
}

.institutionalItem {
    display: flex;
    align-items: center;
    flex-wrap: wrap; 
}

.circle {
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: bold;
    border-radius: 50%; 
    flex-shrink: 0;
}

/*********/



/*
    CheckOut Process

*/

.steps-block-margin {
    margin-right: 30px;
    margin-left: 32px;
}
.steps-block {
    margin-left: 32px;
}


/*
    Total Display
*/
@media (max-width: 768px) {
    .label-container {
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
    }

       

    .label-required {
        font-size: 1rem;
        margin-right: 5px;
    }

    select {
        width: 100%; /* Asegura que los selectores ocupen el ancho en pantallas pequeñas */
    }
}


/*
    Product Table
*/

@media (max-width: 768px) {
    .product-header{
        display:none;
    }

    .product-table {
        display: block;
    }
    .product-logo {
        justify-content:center
    }

    .product-table tbody {
        display: flex;
        flex-direction: column;
    }


        .product-table tr {
            display: flex;
            flex-direction: column;
            border: 1px solid #ddd;
            margin-bottom: 10px;
            padding: 10px;
            background: white;
            border-radius: 5px;
            box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);

        }

        .product-table td {
            display: block;
            text-align: center;
            padding: 5px 0;
        }

        .product-table img {
            max-width: 100px;
            margin-bottom: 10px;
        }

        .product-table .center-text {
            text-align: center;
            font-size: 1rem;
        }
}