/*            Sectional Pages                */
.content {
    margin: 0 auto;
    padding: 20px;
    width: 90vw;
    box-sizing: border-box;
}
/* new code*/
.layout {
    width: 70vw;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start ; /* keep items aligned to the left */
}

.grid {
    display: grid;
    gap: 10px 20px;
  /*  grid-template-columns: 1fr 2fr;  or your % choice */
}

.row {
    display: contents !important; /* lets children participate directly in grid */
    grid-template-columns: inherit !important; /* allows children to align to grid cells */

}
.cell {
    vertical-align: central;
    padding: 5px 0;
}

.cell.link {
    font-weight: bold;
}

.cell.desc {
   
    line-height: 1.4;
}
.span2 {
    grid-column: span 2; /* spans across both columns */
}
.span3 {
    grid-column: span 3; /* spans across both columns */
}
.stack {
    display: flex;
    flex-direction: column; /* stacks vertically */
    gap: 10px; /* space between items */
}

/*Personal Section*/
/* Personal Development Content Grids */
.Personal_Content--01 {    grid-template-columns: 1fr 6fr ;}   /* Default     */
.Personal_Content--02 {    grid-template-columns: 1fr 2fr ;}  /* businessagenda01    */
.Personal_Content--03 {    grid-template-columns: 1fr 4fr ;}  /*  Life Skills 01     */
.Personal_Content--04 {    grid-template-columns: 1fr 3fr ;} /*   education01  */
.Personal_Content--05 {    grid-template-columns: 1fr 4fr ;}/* Life Skills 05     */
.Personal_Content--06 {    grid-template-columns: 1fr 1fr ;}/* psychology05     */
.Professional_Content--01 {    grid-template-columns:1fr 3fr;}/* Default   */
.Professional_Content--02 {    grid-template-columns: 1fr 2fr;}/*   Development01  */
.Professional_Content--03 {    grid-template-columns: 1fr 3fr;}/**//*   Self Analysis01  */
.Professional_Content--04 {    grid-template-columns: 1fr 3fr;}/*  Training 03  */
.Professional_Content--05 {    grid-template-columns: 1fr 4fr;}/*  Training 08 & Teamwork 06 */
.Professional_Content--06 {    grid-template-columns: 1fr 1fr;}/*  Training 08 & Teamwork 06 */
.Contact__01{    grid-template-columns: 1fr 1fr 1fr;}/* Contact 01 */
.Software_Content--01{    grid-template-columns: 1fr 1fr 4fr ;}/* Software 01 */}
.centre_content {
    display: flex;
    justify-content: center;
}


/* Personal Development Plan PDP*/
.PersonalDevPlan-container {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
}

.PersonalDevPlan01 {
    flex: 1 1 200px;
    max-width: 220px;
    min-height: 250px;
    border: thin solid #008000;
    border-radius: 10px;
    padding: 10px;
    text-align: center;
}

    .PersonalDevPlan01 h4 {
        margin-bottom: 0.5rem;
    }

    .PersonalDevPlan01 a {
        display: block;
        margin-top: 1rem;
        color: #006400;
        font-weight: bold;
    }
/* Desktop styles (medium and larger screens) */
@media (min-width: 768px) {
   .content {
        width: 75vw;
    } 
   
   .PersonalDevPlan01 img {
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 10vw; /* smaller, proportional image */
    }

    .lifeskills10 {
        width: 60vw;
    }

    .psychology04 {
        width: 25vw;
    }
    .Personal_Content--06 img{
        width: 20vw;
    }
    .psychology06 {
        display: block;
        height: 50vh;
        padding: 20px;
    }


        .psychology06 img {
            width: 35vw
        }
    .psychology07{
        width: 40vw;
    }
    .psychology10 {
        width: 20vw;
    }
    .psychology11 {
        width: 20vw;
    }
    .psychology12 {
        width: 20vw;
    }
}
/*Professional Section*/
.communication02 {
    display: flex;
    gap: 1vw;
}

    .communication02 img {
        width: 25vw;
        aspect-ratio: 4 / 3; /* or 3/2 or 16/9 — your choice */
        object-fit: cover;
    }

.professional_default_plan {
    position: relative;
    float: left;
    width: 35vw;
    height: auto;
    margin: 5px;
    padding: 5px;
    text-align: left;
   
}

    .professional_default_plan img {
       
    }

    .professional_default_plan a {
        position: absolute;
        bottom: 20px;
    }
.pdp-container {
    text-align: center;
    margin: auto;
    position: relative;
}

.pdp-cards {
    display: flex;
    justify-content: center;
    gap: 2%;
    flex-wrap: wrap;
}

.pdp-card {
    width: 30%;
    min-width: 250px;
    text-align: left;
    padding: 1%;
}

.pdp-image {
    width: 80%;
    display: block;
    margin-bottom: 1rem;
    max-width: 100%;
    height: auto;
}
/* Self Analysis 03 & 05 & 06 & 07 & 08 */
.img_div {
    display: flex;
    justify-content: center;
    gap: 20px;
}
.img_width_15 {
    width: 15vw;
}
.img_width_20 {
    width: 20vw;
}
.img_width_30 {
    width: 30vw;
}
.img_width_40  {
        width: 40vw;
    }
.img_width_60 {
    width: 60vw;
}
img_width_80vw {
    width: 80vw;
}
.self_analysis07 {
    border: 2px solid darkgreen;
    width: 60vw;
}
/* Pofessional training02 */
.training-section {
    width: 100%;
}

    .training-section p {
        margin-bottom: 1rem;
    }

.training-row {
    display: flex;
    flex-wrap: nowrap;
    gap: 20px;
    margin-bottom: 30px;
}

.training-title p {
    font-size: x-large;
    font-weight: bold;
    text-align: center;
}

.training-block {
    display: flex;
    align-items: center; /* vertical centering */
    gap: 15px;
}

    .training-block img {
        width: 200px;
        height: auto;
    }

.training-label {
    font-size: large;
    color: #3399FF;
    text-align: center;
}

.training-label-large {
    font-size: x-large;
    color: #3399FF;
    text-align: center;
}

.training-images img {
    display: block;
    width: 30vw;
    height: auto;
    margin-bottom: 10px;
}

.training-image-primary {
    width: 30vw !important;
}

@media (min-width: 768px) {
    .training-content {
        width: 75vw;
    }
}

.contact01 {
    height: 150px;
    padding: 10px;
    margin: 5px;
    background-color: lemonchiffon;
    border: thin solid #008000;
    border-radius: 10px;
    float: left;
    width: 320px;
    text-align: left;
}

.contact02 {
        display:inline-block;
    padding: 5px;
    margin: 50px;
    border: thin solid #008000;
    border-radius: 10px;
    vertical-align: top;
    width: auto;
    height: auto;
   
}
.TXTBox01 {
    background-color: azure;
    width: 60vw;
    height: 150px;
}

@media (max-width: 768px) {

}
/*Personal Section*/
/* Mobile styles (small screens) */
@media (max-width: 767px) {
    .content {
            margin: 0 auto;
            padding: 5px;
            width: 100vw;
            box-sizing: border-box;
    }
    .img_div {
       
        gap: 5px;
    }
    .PersonalDevPlan01 img {
        margin-left: 1vw;
        justify-content: center;
        width: 40vw; /* larger image for narrow screens */
    }
    .lifeskills10 {
        width: 90vw;
    }
    .psychology{
        width: 90vw;
    }

    .psychology04 {
        width: 50vw;
    }
    .Personal_Content--06 {
        grid-template-columns: 90%;    /* psychology05     */

    }
        .Personal_Content--06 img {
            width: 70vw; /* psychology05     */
        }
    .psychology06 img {
        width: 75vw;
    }

    .psychology06 {
        height: 110vh;
    }
    .psychology07 {
        width: 30vw;
    }
    .psychology10 {
        width: 50vw;
    }
    .psychology11 {
        width: 50vw;
    }
    .psychology12 {
        width: 50vw;
    }

    /*Professional Section*/
    .layout {
        width: 100vw;
        flex-direction: column; /* stack instead of row */
    }

    .professional_default_plan {
        margin: 20px 0; /* spacing above/below */
        width: 100%; /* full width so button doesn’t overflow */
        text-align: center;
    }


    .Professional_Content--01 {   grid-template-columns: 50% 50%; }    /* Default     */

   .professional_default_plan img {
        width: 80vw;
    }   
    
    .professional_default_plan_button {
              max-width: 90%; /* keep button inside screen */

    }
   
    /* Pofessional Development Plan PDP*/

    /* Mobile training02 */
   
            .training-row {
        flex-direction: column;
        text-align: center;
    }

    .training-block {
        flex-direction: column;
    }

        .training-block img {
            width: 100%;
            max-width: 350px;
        }

    .training-images img {
        width: 100%;
        max-width: 350px;
        margin: 10px auto;
    }

    .training-label,
    .training-label-large {
        width: 100%;
        margin-top: 10px;
    }


           
    }