.aboutP {
    width: 100%;
    height: 110vh;

    /* background-color: deeppink; */
    background-color: #06d6a0;
}

    .aboutP-content {
        width: 100%;
        height: 72vh;

        justify-content: center;
    }

        .aboutP-content-a {
            width: 80%;
            height: 72vh;

            display: flex;
            flex-direction: row;
            justify-content: center;
            /* background-color: blueviolet; */
        }

            .aboutP-content-aa {
                width: 30%;
                height: 72vh;

                /* background-color: purple; */
            }

                .aboutP-content-aaa {
                    width: 100%;
                    height: 17vh;

                    /* background-color: gray; */
                }

                    .aboutP-content-aaa-pic {
                        width: 15vh;
                        height: 15vh;
                        border-radius: 50%;
                        background-image: url("https://res.cloudinary.com/pjtobias4/image/upload/v1669945935/onlineResumePortfolio/aboutMePic01_snvmx1.jpg");
                        background-size: 15vh 15vh;
                        transition: 0.5s;
        
                        -webkit-box-shadow: 30px 30px 100px 10px rgba(0, 0, 0, 0.5);
                        -moz-box-shadow: 30px 30px 100px 10px rgba(0, 0, 0, 0.5);
                        box-shadow: 30px 30px 100px 10px rgba(0, 0, 0, 0.5);
        
                        /* background-color: orangered; */
                    }
                    
                        .aboutP-content-aaa-pic:hover {
                            border-radius: 25%;
                            transition: 0.5s;
            
                            -webkit-box-shadow: 0 0 20px 10px rgba(0, 0, 0, 0.0);
                            -moz-box-shadow: 0 0 20px 10px rgba(0, 0, 0, 0.0);
                            box-shadow: 0 0 20px 10px rgba(0, 0, 0, 0.0);
                        }

                .aboutP-content-aab {
                    width: 100%;
                    height: 15vh;
                    
                    /* background-color: lightgray; */
                }

                    .aboutP-content-aaba {
                        width: 80%;
                        height: 15vh;
                        font-size: 19px;
                        color:#17032d;
                        /* background-color: blue; */
                    }
                    
                    .aboutP-content-aabb {
                        width: 18%;
                        height: 15vh;
                        border-left: 1px solid #17032d;
                        
                        justify-content: space-evenly;
                        align-items: center;
                        /* background-color: lightblue; */
                    }

                        .aboutP-content-aabb a {
                            color: #17032d;
                            font-size: 20px;
                            transition: 0.8s;
                        }

                        .aboutP-content-aabb a:hover {
                            color: #ef476f;
                            transition: 0.8s;
                        }
                
                .aboutP-content-aac {
                    width: 100%;
                    height: 38vh;
                    border-top: 1px solid #17032d;
                    padding: 10px 20px 0 20px;
                    color:#17032d;

                    /* background-color: darkgray; */
                }

                    .aboutP-content-aac p {
                        font-size: 17px;
                    }

                    .aboutP-content-aac h2 {
                        font-size: 30px;
                    }
                    
            .aboutP-content-ab {
                width: 69%;
                height: 72vh;
                border-left: 1px solid #17032d;
                
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                /* background-color: rebeccapurple; */
            }

                .aboutP-content-aba,
                .aboutP-content-abc {
                    width: 100%;
                    height: 5vh; /* used in 2 divs so x2 ito sa figure */
                    padding: 10px 0 0 20px;
                    color:#17032d;

                    /* background-color: red; */
                }

                    .aboutP-content-aba h2,
                    .aboutP-content-abc h2,
                    .aboutP-content-aac h2 {
                        font-size: 25px;
                    }

                .aboutP-content-abc {
                    border-top: 1px solid #17032d;
                }

                .aboutP-content-abb,
                .aboutP-content-abd {
                    width: 100%;
                    height: 29vh; /* used in 2 divs so x2 ito sa figure */

                    display: flex;
                    flex-direction: row;
                    justify-content: space-evenly;
                    /* background-color: green; */
                }

                    .aboutP-content-ab-card {
                        width: 25vh;
                        height: 29vh;
                        
                        /* background-color: white; */
                    }

                        .aboutP-content-ab-card-a {
                            width: 25vh;
                            height: 9vh;
                            
                            display: flex;
                            flex-direction: row;
                            justify-content: center;
                            align-items: flex-end;
                            /* background-color: lightgray; */
                        }

                            .aboutP-content-ab-card-a-partialbg {
                                width: 23vh;
                                height: 5vh;
                                border-radius: 100px 20px 0px 0px;
                                border-left: 1px solid #17032d;
                                border-top: 1px solid #17032d;
                                border-right: 1px solid #17032d;
                                transition: 0.5s;

                                display: flex;
                                flex-direction: row;
                                justify-content: center;
                                background-color: #06d6a0;
                            }


                                .aboutP-content-ab-card-a-pica {
                                    width: 8vh;
                                    height: 8vh;
                                    border-radius: 50%;
                                    background-image: url("https://res.cloudinary.com/pjtobias4/image/upload/v1669945927/onlineResumePortfolio/eduLogo02_dqfexo.jpg");
                                    background-size: 8vh 8vh;
                                    transition: 0.3s;
                                    margin-top: -3.5vh;
                                    position: absolute;
                                }

                                .aboutP-content-ab-card-a-picb {
                                    width: 8vh;
                                    height: 8vh;
                                    border-radius: 50%;
                                    background-image: url("https://res.cloudinary.com/pjtobias4/image/upload/v1669945920/onlineResumePortfolio/eduLogo03_hpwokm.jpg");
                                    background-size: 8vh 8vh;
                                    transition: 0.3s;
                                    margin-top: -3.5vh;
                                }

                                .aboutP-content-ab-card-a-picc {
                                    width: 8vh;
                                    height: 8vh;
                                    border-radius: 50%;
                                    background-image: url("https://res.cloudinary.com/pjtobias4/image/upload/v1669945932/onlineResumePortfolio/eduLogo04_alwxav.jpg");
                                    background-size: 8vh 8vh;
                                    transition: 0.3s;
                                    margin-top: -3.5vh;
                                }

                                .aboutP-content-ab-card-a-picd {
                                    width: 8vh;
                                    height: 8vh;
                                    border-radius: 50%;
                                    background-image: url("https://res.cloudinary.com/pjtobias4/image/upload/v1669946027/onlineResumePortfolio/workLogo01_nm7iet.jpg");
                                    background-size: 8vh 8vh;
                                    transition: 0.3s;
                                    margin-top: -3.5vh;
                                }

                                .aboutP-content-ab-card-a-pice {
                                    width: 8vh;
                                    height: 8vh;
                                    border-radius: 50%;
                                    background-image: url("https://res.cloudinary.com/pjtobias4/image/upload/v1669946029/onlineResumePortfolio/workLogo02_qvrayx.jpg");
                                    background-size: 8vh 8vh;
                                    transition: 0.3s;
                                    margin-top: -3.5vh;
                                }

                                .aboutP-content-ab-card-a-pica:hover,
                                .aboutP-content-ab-card-a-picb:hover,
                                .aboutP-content-ab-card-a-picc:hover,
                                .aboutP-content-ab-card-a-picd:hover,
                                .aboutP-content-ab-card-a-pice:hover {
                                    border-radius: 25%;
                                    -webkit-box-shadow: 0 0 11px 10px rgba(0, 0, 0, 0.1);
                                    -moz-box-shadow: 0 0 11px 10px rgba(0, 0, 0, 0.1);
                                    box-shadow: 0 0 11px 10px rgba(0, 0, 0, 0.1);
                                    transition: 0.3s;
                                }
                        .aboutP-content-ab-card-b {
                            width: 25vh;
                            height: 20vh;
                            border-radius: 10px 10px 30px 30px;
                            transition: 0.5s;
                            
                            display: flex;
                            flex-direction: column;
                            align-items: center;
                            background-color: #17032d;
                        }

                                .aboutP-content-ab-card-b:hover {
                                    background-color: #ef476f;
                                    transition: 0.5s;
                                }

                            .aboutP-content-ab-card-ba {
                                width: 23vh;
                                height: 18vh;
                                border-radius: 0px 0px 50px 20px;
                                padding: 0 10px;
                                border-left: 1px solid #17032d;
                                border-bottom: 1px solid #17032d;
                                border-right: 1px solid #17032d;
                                transition: 0.5s;

                                background-color: #06d6a0;
                            }

                                .aboutP-content-ab-card-b h3 {
                                    color: #17032d;
                                    font-size: 18px;
                                    font-weight: bold;
                                }
                                
                                .aboutP-content-ab-card-ba p {
                                    color: #17032d;
                                    font-size: 15px;
                                    line-height: 0.0;
                                    text-indent: 10px;
                                }

                                .aboutP-content-ab-card-ba h4 {
                                    color: #17032d;
                                    font-size: 17px;
                                }

                                .aboutP-content-ab-card-b h5 {
                                    color: #06d6a0;
                                    font-size: 16px;
                                }


.forAboutP-spacingOnly-a {
    width: 100%;
    height: 5vh;

    /* background-color: #ef476f; */
}

.forAboutP-spacingOnly-b {
    width: 100%;
    height: 15vh;

    background-color:#17032d;
    /* background-color: deeppink; */
}

    .forAboutP-spacingOnly-ba {
        width: 100%;
        height: 10vh;
        border-radius: 0px 0px 70px 70px;
        background-color:#06d6a0;
        /* background-color: darkorange; */
    }







































/*----- from: https://www.shapedivider.app/ ----*/

.aboutP-wava-a {
    /* position: absolute; */
    top: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
}

.aboutP-wava-a svg {
    /* position: relative; */
    display: block;
    width: calc(151% + 1.3px);
    /* height: 103px; */
    height: 10vh;
}

.aboutP-wava-a .shape-fill-a {
    fill: #17032D;
}

/** For mobile devices **/
@media (max-width: 767px) {
    .aboutP-wava-a svg {
        width: calc(151% + 1.3px);
        /* height: 118px; */
    }
}


/*-----------------------------------------------*/
/*-----------------------------------------------*/
/*-----------------------------------------------*/
/*-----------------------------------------------*/
/*-----------------------------------------------*/
/*-----------------------------------------------*/


/* aboutP-wava-b */
.aboutP-wava-b {
    /* position: absolute; */
    top: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
}

.aboutP-wava-b svg {
    /* position: relative; */
    display: block;
    width: calc(138% + 1.3px);
    height: 10vh;
}

.aboutP-wava-b .shape-fill-b {
    fill: #FFFFFF;
}



/*----- from: https://www.shapedivider.app/ END----*/





































































@media screen and (max-width: 480px)  and (min-width: 300px){
    .aboutP {
        height: 245vh;
    }

    .aboutP-content {
        width: 100%;
        height: 210vh;
    }

    .aboutP-content-a {
        width: 80%;
        height: 200vh;

        display: flex;
        flex-direction: column;
        justify-content: center;
    }

        .aboutP-content-aa {
            width: 100%;
            height: 80vh;
        }

            .aboutP-content-aaba {
                font-size: 16px;
            }

                .aboutP-content-aac p {
                    font-size: 16px;
                }


            .aboutP-content-aac {
                height: 30vh;
            }





        .aboutP-content-ab {
            width: 100%;
            height: 120vh;
            border-top: 1px solid #17032d;
            border-left: none;
            
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        .aboutP-content-aba,
        .aboutP-content-abc {
            width: 100%;
            height: 5vh; /* used in 2 divs so x2 ito sa figure */
            padding: 10px 0 0 20px;
        }

        .aboutP-content-abb {
            width: 100%;
            height: 60vh;

            flex-direction: column;
            justify-content: space-evenly;
        }

        .aboutP-content-abd {
            width: 100%;
            height: 40vh;

            flex-direction: column;
            justify-content: space-evenly;
        }






    .aboutP-content-ab-card {
        /* width: 18vh; */
        width: 100%;
        height: 15vh;
    }

    .aboutP-content-ab-card-a {
        width: 100%;
        height: 20%;
    }
        .aboutP-content-ab-card-a-partialbg {
            width: 90%;
            height: 60%;
        }

    .aboutP-content-ab-card-b {
        width: 100%;
        height: 80%;
    }



            .aboutP-content-ab-card-ba {
                width: 90%;
                height: 80%;
            }

                .aboutP-content-ab-card-b h3 {
                    font-size: 12px;
                    font-weight: bold;
                }
                
                .aboutP-content-ab-card-ba p {
                    font-size: 10px;
                    text-indent: 10px;
                }

                .aboutP-content-ab-card-ba h4 {
                    font-size: 12px;
                }

                .aboutP-content-ab-card-b h5 {
                    font-size: 10px;
            }

            .aboutP-content-aba h2,
            .aboutP-content-abc h2 {
                font-size: 20px;
            }



        .aboutP-content-ab-card-a-pica,
        .aboutP-content-ab-card-a-picb,
        .aboutP-content-ab-card-a-picc,
        .aboutP-content-ab-card-a-picd,
        .aboutP-content-ab-card-a-pice {
            width: 5vh;
            height: 5vh;
            border-radius: 50%;
            background-size: 5vh 5vh;
            margin-top: -3.5vh;
        }


}       













@media screen and (max-width: 768px)  and (min-width: 481px){
    .aboutP {
        height: 285vh;
    }

    .aboutP-content {
        width: 100%;
        height: 250vh;
    }

    .aboutP-content-a {
        width: 80%;
        height: 250vh;

        display: flex;
        flex-direction: column;
        justify-content: center;
    }

        .aboutP-content-aa {
            width: 100%;
            height: 70vh;
        }

            .aboutP-content-aaba {
                font-size: 16px;
            }

                .aboutP-content-aac p {
                    font-size: 16px;
                }


            .aboutP-content-aac {
                height: 30vh;
            }





        .aboutP-content-ab {
            width: 100%;
            height: 200vh;
            border-top: 1px solid #17032d;
            border-left: none;
            
            display: flex;
            flex-direction: column;
            justify-content: space-evenly;
        }

        .aboutP-content-aba,
        .aboutP-content-abc {
            width: 100%;
            height: 5vh; /* used in 2 divs so x2 ito sa figure */
            padding: 10px 0 0 20px;
        }

        .aboutP-content-abb {
            width: 100%;
            height: 100vh;

            flex-direction: column;
            justify-content: space-evenly;
        }

        .aboutP-content-abd {
            width: 100%;
            height: 70vh;

            flex-direction: column;
            justify-content: space-evenly;
        }






    .aboutP-content-ab-card {
        /* width: 18vh; */
        width: 100%;
        height: 30vh;
    }

    .aboutP-content-ab-card-a {
        width: 100%;
        height: 10vh;
    }
        .aboutP-content-ab-card-a-partialbg {
            width: 90%;
            height: 60%;
        }

    .aboutP-content-ab-card-b {
        width: 100%;
        height: 20vh;
    }



            .aboutP-content-ab-card-ba {
                width: 90%;
                height: 80%;
            }

                .aboutP-content-ab-card-b h3 {
                    font-size: 18px;
                    font-weight: bold;
                }
                
                .aboutP-content-ab-card-ba p {
                    font-size: 16px;
                    text-indent: 10px;
                }

                .aboutP-content-ab-card-ba h4 {
                    font-size: 18px;
                }

                .aboutP-content-ab-card-b h5 {
                    font-size: 14px;
            }

            .aboutP-content-aba h2,
            .aboutP-content-abc h2 {
                font-size: 20px;
            }



        .aboutP-content-ab-card-a-pica,
        .aboutP-content-ab-card-a-picb,
        .aboutP-content-ab-card-a-picc,
        .aboutP-content-ab-card-a-picd,
        .aboutP-content-ab-card-a-pice {
            width: 8vh;
            height: 8vh;
            border-radius: 50%;
            background-size: 8vh 8vh;
            margin-top: -3.5vh;
        }


}

























@media screen and (max-width: 1024px) and (min-width: 769px) {
    .aboutP-content-aaba {
        font-size: 14px;
    }

    .aboutP-content-aac p {
        font-size: 14px;
    }


    .aboutP-content-ab-card {
        width: 16vh;
        height: 29vh;
    }

    .aboutP-content-ab-card-a {
        width: 16vh;
        height: 9vh;
    }
        .aboutP-content-ab-card-a-partialbg {
            width: 14vh;
            height: 5vh;
        }

    .aboutP-content-ab-card-b {
        width: 16vh;
        height: 20vh;
    }

        .aboutP-content-ab-card-ba {
            width: 14vh;
            height: 18vh;
        }

            .aboutP-content-ab-card-b h3 {
                font-size: 12px;
                font-weight: bold;
            }
            
            .aboutP-content-ab-card-ba p {
                font-size: 10px;
                text-indent: 10px;
            }

            .aboutP-content-ab-card-ba h4 {
                font-size: 12px;
            }

            .aboutP-content-ab-card-b h5 {
                font-size: 11px;
        }
}



























@media screen and (max-width: 1200px) and (min-width: 1025px) {
    .aboutP-content-aaba {
        font-size: 14px;
    }

    .aboutP-content-aac p {
        font-size: 14px;
    }


    .aboutP-content-ab-card {
        width: 20vh;
        height: 29vh;
    }

    .aboutP-content-ab-card-a {
        width: 20vh;
        height: 9vh;
    }
        .aboutP-content-ab-card-a-partialbg {
            width: 18vh;
            height: 5vh;
        }

    .aboutP-content-ab-card-b {
        width: 20vh;
        height: 20vh;
    }

        .aboutP-content-ab-card-ba {
            width: 18vh;
            height: 18vh;
        }

            .aboutP-content-ab-card-b h3 {
                font-size: 15px;
                font-weight: bold;
            }
            
            .aboutP-content-ab-card-ba p {
                font-size: 13px;
                text-indent: 10px;
            }

            .aboutP-content-ab-card-ba h4 {
                font-size: 15px;
            }

            .aboutP-content-ab-card-b h5 {
                font-size: 13px;
        }


}