/* --- Base Styles --- */
.application-process-section {
    padding: 60px 20px;
    background-color: #92b5d8; /* Light background similar to image */
    text-align: center;
    border: #000000;
    border-radius: 25%;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
}

.section-title {
    font-size: 2.5em;
    font-weight: 700;
    color: #1a237e; /* Dark Blue title */
    margin-bottom: 5px;
}

.section-subtitle {
    font-size: 1.5em;
    color: #000000;
    margin-bottom: 40px;
    font-weight: bolder;
}

/* --- Steps Container (Flexbox) --- */
.process-steps-container {
    display: flex;
    justify-content: space-between; /* Distribute steps evenly */
    flex-wrap: wrap; /* Allow wrapping on small screens */
    gap: 20px; /* Gap between columns */
}

/* --- Individual Step --- */
.process-step {
    flex-basis: calc(16.66% - 20px); /* 6 steps, 100/6 = 16.66% */
    text-align: center;
    position: relative; /* For the absolute positioning of the underline */
    padding-bottom: 30px; /* Space for the underline */
}

/* --- Icon Wrapper (The colored circle/arch) --- */
.icon-wrapper {
    width: 60px;
    height: 60px;
    margin: 0 auto 15px;
    border-radius: 50% 50% 0 0; /* Creates the rounded top arch shape */
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.icon-wrapper i {
    color: white;
    font-size: 28px;
}

/* --- Colors (Matching the image) --- */
.blue-bg { background-color: #4285f4; }
.green-bg { background-color: #0f9d58; }
.dark-bg { background-color: #4f5b66; }
.yellow-bg { background-color: #fbbc05; }
.navy-bg { background-color: #1a237e; }
.red-bg { background-color: #db4437; }

/* --- Step Number (01, 02, etc.) --- */
.step-number {
    font-size: 1.5em;
    font-weight: 700;
    color: #000000; /* Dark grey for the number */
    margin-bottom: 5px;
    font-weight: bolder;
}

/* --- Step Title (Consultation, etc.) --- */
.step-title {
    font-size: 1em;
    font-weight: 500;
    font-weight: bolder;
    color: #000000; /* Dark text */
    line-height: 1.2;
    
}

/* --- Line Underline --- */
.line-underline {
    position: absolute;
    bottom: 0;
    left: 10%; /* Start it just inside the step column */
    width: 80%;
    height: 4px;
    border-radius: 2px;
}

.line-underline.black {
    background-color: black;
}

.line-underline.red {
    background-color: #db4437;
}


/* --- Responsive Design for Mobile/Tablets --- */
@media (max-width: 992px) {
    .process-step {
        /* On medium screens, show 3 columns */
        flex-basis: calc(33.33% - 20px); 
        margin-bottom: 40px;
    }
}

@media (max-width: 576px) {
    .process-steps-container {
        justify-content: center;
    }
    .process-step {
        /* On small screens, show 2 columns */
        flex-basis: calc(50% - 20px); 
    }

    .section-title {
        font-size: 2em;
    }
}


.h1-logo {
    /* **1. Define the Height** Using 'em' or 'vw' makes the logo scale with the heading text size. 
       1.2em is slightly taller than the font, which usually looks good. */
    height: 1.7em; 
    
    /* **2. Maintain Aspect Ratio** This ensures the image doesn't get stretched or squished. */
    width: auto; 
    
    /* 3. Vertical alignment (Crucial for images in headlines) */
    vertical-align: middle; 
    
    /* 4. Gap between image and text */
    margin-right: 10px;
}



.h2-logo {
    /* **1. Define the Height** Using 'em' or 'vw' makes the logo scale with the heading text size. 
       1.2em is slightly taller than the font, which usually looks good. */
    height: 1.2em; 
    
    /* **2. Maintain Aspect Ratio** This ensures the image doesn't get stretched or squished. */
    width: auto; 
    
    /* 3. Vertical alignment (Crucial for images in headlines) */
    vertical-align: middle; 
    
    /* 4. Gap between image and text */
    margin-right: 5px;
}

.rotated-image {
    /* Rotates the image by 45 degrees clockwise */
    transform: rotate(330deg); 
}

html {
  /* This property is the magic that enables smooth scrolling */
  scroll-behavior: smooth; 
}


/*  style for country colleges section*/

.university-card {
    border-radius: 10px;
    transition: transform 0.2s, box-shadow 0.2s;
    border: 1px solid #e0e0e0;
    min-height: 120px; /* Give cards a minimum height for consistent layout */
}

.university-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1) !important;
}

.university-logo {
    width: 60px; /* Adjust logo size */
    height: 60px;
    object-fit: contain; /* Ensure logo scales within its box */
    border-radius: 8px; /* Slightly rounded corners for logos */
}


.flag-icon {
    font-size: 1.2em; /* Adjust flag icon size */
    vertical-align: middle; /* Align flag with text */
}