/* Mission & Vision Section - Fixed Layout for .NET Core */


/*#region mission-vision-styles */

/* Mission & Vision Section */

/*.mission-vision .container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}*/

.mission-vision {
    padding: 80px 0 0 0;
    background: #ffffff;
}

    .mission-vision .content-wrapper {
        display: grid;
        grid-template-columns: 1fr 1.3fr;
        gap: 60px;
        align-items: start;
    }

    /* Images Column */
    .mission-vision .images-column {
        position: relative;
    }

    .mission-vision .image-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr;
        gap: 15px;
        height: 600px; /* Fixed height for proper proportions */
    }

    .mission-vision .image-box {
        border-radius: 4px;
        /*overflow: hidden;*/
        position: relative;
    }

        /* Top left - small */
        .mission-vision .image-box.top-left {
            grid-column: 1;
            grid-row: 1;
        }

        /* Top right - LARGE (spans 2 rows) */
        .mission-vision .image-box.top-right {
            grid-column: 2;
            grid-row: 1 / 3; /* Spans both rows */
        }

        /* Bottom left - small */
        .mission-vision .image-box.bottom {
            grid-column: 1;
            grid-row: 2;
        }

        .mission-vision .image-box img {
            /* width: 100%;
            height: 100%;*/
            object-fit: cover;
            display: block;
        }

        .mission-vision .image-box.bottom img {
            float: right;
        }

    /* Foundation Seal - positioned between the two small images on left */
    .mission-vision .foundation-seal {
        position: absolute;
        bottom: 50%; /*45%;*/ /* Position between top-left and bottom images */
        left: 0; /*23%;*/ /* Position on the left column */
        transform: translate(-50%, 50%);
        width: 100px;
        height: 100px;
        background: white;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        padding: 5px;
        z-index: 10;
    }

        .mission-vision .foundation-seal img {
            /*width: 100%;
            height: 100%;*/
            border-radius: 50%;
        }

/* Text Column */
/* .mission-vision .text-column {
        padding-top: 0;
    }

        .mission-vision .text-column h2 {
            font-size: 2.5rem;
            color: #1e3a5f;
            margin-bottom: 30px;
            font-weight: 700;
        }

mission-vision .text-column strong {
    font-weight: 600;
    color: #1e3a5f;
}*/




/* Tablet Styles */
@media (max-width: 1024px) {
    .mission-vision{
        padding-bottom:80px;
    }
    .mission-vision .content-wrapper {
        gap: 40px;
    }

    .mission-vision .text-column h2 {
        font-size: 2.2rem;
    }

    .mission-vision .image-grid {
        height: auto; /*500px;*/
    }
}

/* Mobile Styles */
@media (max-width: 768px) {
    .mission-vision {
        padding: 50px 0;
    }

        .mission-vision .content-wrapper {
            grid-template-columns: 1fr;
            gap: 40px;
        }

        /* Mobile: Text comes first, images below */
        .mission-vision .text-column {
            order: 1;
        }

        .mission-vision .images-column {
            order: 2;
        }

        .mission-vision .text-column h2 {
            font-size: 2rem;
            margin-bottom: 20px;
        }

        .mission-vision .text-column p {
            font-size: 0.95rem;
        }

        .mission-vision .text-column ul li {
            font-size: 0.95rem;
        }

        .mission-vision .image-grid {
            gap: 10px;
           /* height: 400px;*/
        }

        .mission-vision .foundation-seal {
            width: 80px;
            height: 80px;
        }

        .mission-vision .image-box.bottom img {
            width: 100%;
        }

        .mission-vision .image-box.top-right img {
            height: 100%;
        }

        .mission-vision .image-box.top-left img{
            width:100%;
        }
}

@media (max-width: 480px) {
    .mission-vision .text-column h2 {
        font-size: 1.75rem;
    }

    .mission-vision .btn-primary {
        text-align: center;
        padding: 12px 30px;
    }

    .mission-vision .image-grid {
       /* height: 300px;*/
    }

    .mission-vision .foundation-seal {
        width: 60px;
        height: 60px;
    }
}


/*#endregion */

/*#region Application */

/* Application Information Section - For .NET Core */

/*.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}*/

/* Application Information Section */
.application-info {
    background: linear-gradient(135deg, #3d5a7a 0%, #2d4a6a 100%);
    padding: 80px 0;
    color: #ffffff;
}

    .application-info .info-wrapper {
        display: grid;
        grid-template-columns: 1fr 1.5fr;
        gap: 40px;
        align-items: center;
    }

    /*.info-wrapper > div:last-child,
    .info-wrapper > div:last-child div {
        height: 100%;
    }*/

    /* Text Content */
    .application-info .text-content h2 {
        /*font-size: 3rem;*/
        color: #F4C542;
        /*margin-bottom: 30px;
        font-weight: 700;
        line-height: 1.2;*/
    }

    .application-info .text-content p {
        font-size: 1.1rem;
        line-height: 1.8;
        color: #ffffff;
        margin-bottom: 30px;
    }

        .application-info .text-content p strong {
            font-weight: 600;
        }

    .application-info .btn-apply {
        display: inline-block;
        background: #F4C542;
        color: #1e3a5f;
        padding: 14px 35px;
        text-decoration: none;
        border-radius: 4px;
        font-weight: 700;
        font-size: 1rem;
        transition: background-color 0.3s ease, transform 0.2s ease;
    }

        .application-info .btn-apply:hover {
            background: #ffd966;
            transform: translateY(-2px);
            text-decoration: none;
            color: #1e3a5f;
        }

    /* Images Content */
    .application-info .images-content {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }

    .application-info .image-item {
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    }

        .application-info .image-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

/* Tablet Styles */
@media (max-width: 1024px) {
    .application-info .info-wrapper {
        gap: 40px;
    }

    .application-info .text-content h2 {
        font-size: 2.5rem;
    }

    .application-info .text-content p {
        font-size: 1rem;
    }
}

/* Mobile Styles */
@media (max-width: 768px) {
    .application-info {
        padding: 50px 0;
    }

        .application-info .info-wrapper {
            grid-template-columns: 1fr;
            gap: 40px;
        }

        .application-info .text-content h2 {
            font-size: 2rem;
        }

        .application-info .text-content p {
            font-size: 0.95rem;
        }

        /* Images stacked vertically on mobile */
        .application-info .images-content {
            grid-template-columns: 1fr;
            gap: 15px;
        }
}

@media (max-width: 480px) {
    .application-info .text-content h2 {
        font-size: 1.75rem;
    }

    .application-info .btn-apply {
        text-align: center;
        padding: 12px 30px;
    }

    .application-info .images-content {
        grid-template-columns: 1fr;
    }
}

/*#endregion */