/* CSS Document */
body{
    height: 100vh;
}

.menu-offcanvas {
    background-color: #7dabc2;
   
    padding: 25px;
    border: none;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto;

    /* --- ADD THESE LINES --- */
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column; /* Stack items vertically (header on top of menu) */
    /* --- END ADD --- */
}

/* 2. Style the header section (no changes needed here) */
.menu-offcanvas .app-header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -ms-flex-negative: 0;
        flex-shrink: 0; /* Prevents the header from shrinking */
}

.menu-offcanvas .header-icon {
    color: white;
    font-size: 1.8rem;
}

.menu-offcanvas .heart-icon img {
    width: 35px;
    height: auto;
}

/* 3. Make the menu section fill the remaining space and center its content */
.menu-offcanvas .section-menu {
    /* --- ADD THESE LINES --- */
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;          /* This makes the menu section take up all available vertical space */
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;         /* Turn the menu section ITSELF into a flex container */
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;  /* Stack its own items (the links) vertically */
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center; /* This is the magic: it centers the links vertically */
    /* --- END ADD --- */
}

/* 4. Style the navigation links and icons (no changes needed here) */
.menu-offcanvas .nav-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    padding: 15px 0;
    color: white;
    text-decoration: none;
    font-size: 1.1rem;
}

.menu-offcanvas .nav-item i {
    font-size: 1.2rem;
    margin-right: 20px;
    width: 30px;
    text-align: center;
}

.section-preview {
    position: absolute;
    background-color: rgb(255 255 255 / 43%);;

    height: 47%;  
    top: 50%;

    right: 0;

    -webkit-transform: translateX(35%) translateY(-50%);
            transform: translateX(35%) translateY(-50%);


    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;

 
}

.section-preview-razpisi{
        position: absolute;
    background-color: white;

    height: 60%;  
    

    top: 50%;
    

    right: 0;

    -webkit-transform: translateX(66%) translateY(-50%);
            transform: translateX(66%) translateY(-50%);


    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;

}



.indicator.indicator-green {
    background-color: #5a9a84;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    margin-bottom:2.3rem;
 
}

.indicator.indicator-yellow {
    background-color: #c4b76a;
     width: 15px;
    height: 15px;
    border-radius: 50%;
    margin-bottom:2.3rem;

}

.indicator.indicator-gray {
    background-color: #808c99;
     width: 15px;
    height: 15px;
    border-radius: 50%;
    margin-bottom:2.3rem;

}

.menu-item{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    background-color: white;
    -webkit-box-shadow: 0px 3px 6px #00000029;
            box-shadow: 0px 3px 6px #00000029;
border-radius: 15px;
padding: 5rem 2rem;
}

.menu-item i{
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    color: #7EACCD;
    font-size: 3rem!important;
}

.menu-item span{
    color: black;
    text-align: center;
    font-weight: 700;
}




.menu-grid {
    display: grid;
    /* Create a 2-column grid */
    grid-template-columns: 1fr 1fr;
    /* Define the gap between grid items */
    gap: 1rem;
}

.menu-item-card {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    background-color: white;
    border-radius: 12px;
    padding: 1.5rem 1rem; /* Drastically reduced padding */
    text-decoration: none;
    -webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); /* Softer shadow */
    border: 1px solid #e9ecef;
    -webkit-transition: -webkit-transform 0.2s ease-in-out, -webkit-box-shadow 0.2s ease-in-out;
    transition: -webkit-transform 0.2s ease-in-out, -webkit-box-shadow 0.2s ease-in-out;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out, -webkit-box-shadow 0.2s ease-in-out;
    aspect-ratio: 1 / 1; /* Makes the cards perfectly square */
}

.menu-item-card:hover,
.menu-item-card:focus {
    -webkit-transform: translateY(-5px);
            transform: translateY(-5px); /* "Lift" effect on hover */
    -webkit-box-shadow: 0 8px 20px rgba(0, 51, 102, 0.1);
            box-shadow: 0 8px 20px rgba(0, 51, 102, 0.1); /* Stronger shadow on hover */
}

.menu-item-card i {
    color: #7EACCD; /* A more vibrant icon color */
    font-size: 2.25rem; /* Slightly smaller icon size */
    margin-bottom: 0.75rem;
}

.menu-item-card span {
    color: #343a40;
    text-align: center;
    font-weight: 600;
    font-size: 0.9rem;
    line-height: 1.3;
}


.domov-menu{
    position: absolute;
    bottom: 30px;
    color: white;
    font-size: 3rem;
    left: 50%;
    -webkit-transform: translate(-50%, 0);
            transform: translate(-50%, 0);
}
 .cursor{
    cursor:pointer;
 }