/* Full desktop: 1536px and above height 864 */
@media (min-width: 1536px) {

    /* Full desktop layout */
    body {
        max-width: 1536px;
        margin: 0 auto;
    }
}








/* Large laptops: up to 1535px , height 864*/
@media (max-width: 1535px) {


    /*header adjustment----------------*/
    header {
        height: 12vh;
    }

    .tl-main-logo {
        height: 5vh;
    }

    #up-social-icons img,
    #bt-social-icons img {
        width: 3vw;
    }

    .uLine {
        width: 2.5vw;
        margin-top: 8px;
    }

    .bLine {
        width: 2vw;
    }

    #tl-menu-dropdown li {
        padding: 1.5vh 1.25vw;
    }


    /*Officer Image adjustment----------------*/
    #officer-img {
        width: 40%;
        margin: -28vh auto 0 auto;
        /* Horizontally centered with margin-top: -100px */
    }




    /*Mission adjustment------------------------*/
    .mission-left-item img {
        height: 40vh;
    }




    /*Kid Image & text adjustment----------------*/

    .kid-group1 {
        top: 8vh;
        left: 25vw;
    }

    .rebel-style1-3 {
        font-size: 4.25vw;
        padding-top: 20vh;
        padding-left: 10vw;
    }

    .age-style1-3 {
        font-size: 15vw;
        margin-top: -8vh;
    }

    .age-number-style1-3 {
        font-size: 6.6vw;
        margin-top: -5vh;
        padding-left: 22vw;
    }

    .years-style1-3 {
        font-size: 15vw;
        margin-top: -10vh;
    }

    .arrow-group1 {
        right: 10vw;
        bottom: 20vh;
    }

    .kid-overlay-menu .komc1 p {
        font-size: 1.65rem;
    }

    .kid-group3 {
        top: 5vh;
        left: 23vw;
    }

    .arrow-group3 {
        bottom: 22vh;
    }

    #kid-4 {
        margin-bottom: 10vh;
    }

    .img-kid4 {
        height: 100vh;
    }

    .kid-group4 .rebel-style1-3 {
        padding-top: 25vh;
        padding-left: 65vw;
    }

    .kid-group4 .age-style1-3 {
        position: relative;
        margin-top: -10vh;
        padding-left: 55vw;
    }

    .kid-group4 .age-number-style1-3 {
        margin-top: 8vh;
    }

    .kid-group4 .years-style1-3 {
        margin-top: -11vh;
    }

    .arrow-group4 {
        right: 22vw;
        bottom: 20vh;
    }

    #kid4-overlay .kid-overlay-menu {
        left: -2vw;
    }



    /*info-card adjustment-------------------------*/
    #info-cards {
        padding-top: 12vh;
    }

    .card {
        max-width: 16vw;
    }

    #info-cards .left-image {
        width: 70%;
        height: auto;
    }

    .prog-right-child {
        margin-bottom: 6vh;
        padding-top: 15px;
    }

    .prog-right-child p {
        font-size: 2.1rem;
    }

    .prog-right-child img {
        height: 4vh;
    }



    /*Footer adjustment-------------------*/
    footer p {
        font-size: .9rem;
    }
}








/* Common laptops: up to 1440px , height 900*/
@media (max-width: 1440px) {

    /*header adjustment----------------*/
    #up-social-icons img,
    #bt-social-icons img {
        width: 2.75vw;
    }

    /*Home adjustment----------------*/
    .text-block .line1 {
        margin-bottom: -7vh;
    }

    .text-block .tm {
        top: 22vh;
    }


    /*Officer Image adjustment----------------*/
    #officer-img {
        width: 35%;
    }


    /*Mission adjustment------------------------*/
    .our-text {
        font-size: 4vw;
        margin-top: 10vh;
    }

    .mission-text {
        font-size: 4vw;
        margin-bottom: 7vh;
    }

    .mission-right p {
        padding: 0 15px;
        font-size: 1.3rem;
    }


    /*Kid Image & text adjustment----------------*/
    .arrow-group1 {
        bottom: 21vh;
    }

    .arrow-group2 {
        bottom: 36vh;
    }

    .arrow-group3 {
        bottom: 25vh;
    }

    .arrow-group4 {
        bottom: 22vh;
    }

    .kid-overlay-menu .komc1 p {
        font-size: 1.5rem;
    }


    /*info-card adjustment-------------------------*/
    .prog-right-child {
        margin-bottom: 5vh;
        padding-top: 12px;
    }

    .prog-right-child p {
        font-size: 1.75rem;
    }

    .prog-right-child img {
        height: 3.75vh;
    }

    #contact-content .right-part p {
        font-size: 1.2rem;
    }
}








/* Low-res laptops / smaller desktops: up to 1366px , height 768 */
@media (max-width: 1366px) {

    /*header adjustment----------------*/
    #up-social-icons img,
    #bt-social-icons img {
        width: 2.55vw;
    }

    .tl-main-logo {
        height: 5.5vh;
    }


    /*Home adjustment----------------*/
    .text-block .tm {
        top: 24vh;
    }

    /*Kid Image & text adjustment----------------*/
    .arrow-group1 {
        bottom: 12vh;
    }

    .arrow-group2 {
        bottom: 26vh;
    }

    .arrow-group3 {
        bottom: 14vh;
    }

    .arrow-group4 {
        bottom: 11vh;
    }

    .kid-overlay-menu .komc1 p {
        font-size: 1.4rem;
    }

    #kid3-overlay .kid-overlay-menu {
        width: 11vw;
        left: -3vw;
    }

    #kid4-overlay .kid-overlay-menu {
        width: 12vw;
        left: -1.5vw;
    }

    /*info-card adjustment-------------------------*/
    .prog-right-child p {
        font-size: 1.55rem;
        line-height: .7;
    }

    #teen2 p {
        text-align: left;
    }

    .faq-question {
        font-size: 1.1rem;
    }

    #contact-content .right-part p {
        font-size: 1.1rem;
    }

}








/* Low-res laptops / smaller desktops: up to 1366px , height 800 */
@media (max-width: 1280px) {

    /*Home adjustment----------------*/
    .text-block .tm {
        top: 20vh;
    }

    .mission-text {
        margin-bottom: 12vh;
    }

    /*Kid Image & text adjustment----------------*/
    .ko1-prog p:nth-child(2) {
        font-size: 3.25rem;
    }

    .arrow-group1 {
        bottom: 20vh;
    }

    .arrow-group2 {
        bottom: 34vh;
    }

    .arrow-group3 {
        bottom: 24vh;
    }

    .arrow-group4 {
        bottom: 20vh;
    }

    /*Footer adjustment-------------------*/
    footer p {
        font-size: .85rem;
    }
}








/* Tablets landscape: up to 1080px , height 1920 */
@media (max-width: 1279px) and (min-width: 1080px) {

    /*header adjustment----------------*/
    #up-social-icons img,
    #bt-social-icons img {
        width: 5vw;
    }

    .tl-main-logo {
        height: 3.5vh;
    }

    .uLine,
    .bLine {
        width: 5vw;
        margin-top: 12px;
    }

    #tl-menu-dropdown {
        right: 38%;
    }

    #tl-menu-dropdown {
        padding: 1vw 2vw;
    }

    #tl-menu-dropdown li {
        padding: 1vh 1vw;
        font-size: 24px;
    }


    /*Home adjustment----------------*/

    #home .text-block .line1,
    .text-block .line2 {
        font-size: 20vw;
    }

    .text-block .line1 {
        margin-bottom: -3vh;
    }

    .text-block .tm {
        top: 8vh;
        font-size: 1rem;
    }

    /*Officer Image adjustment----------------*/

    #officer-img {
        width: 25vh;
        margin-top: -35vh;
    }


    /*Half circle adjustment----------------*/
    #Tagline {
        margin-top: -10vh;
    }

    .TagL1 {
        padding-top: 1vh;
        line-height: 1;
    }

    .TagL2 {
        line-height: 1;
        font-size: 3vw;
    }

    .TagL3 {
        margin-top: -10px;
    }


    /*Mission adjustment----------------*/
    #mission {
        flex-direction: column;
        margin-bottom: 10vh;
    }

    .mission-left {
        position: relative;
        margin-bottom: 5vh;
    }

    .mission-left-item img {
        height: 25vh;
    }

    .our-text {
        align-self: flex-start;
        font-size: 3.5vh;
        position: absolute;
        top: -130px;
        left: 200px;
    }

    .mission-text {
        font-size: 4.5vh;
        position: absolute;
        bottom: -190px;
        right: 150px;
    }

    .mission-right {
        width: 90%;
        margin: 0 auto;
    }

    .mission-right p {
        font-size: 1.8rem;
        line-height: 1.4;

    }

    /*Kid Image & text adjustment----------------*/
    #kid-1,
    #kid-2,
    #kid-3,
    #kid-4 {
        margin-bottom: 5vh;
        height: auto;
        width: auto;
        left: auto;
        right: auto;
        top: auto;
        bottom: auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-content: center;
        margin-bottom: 10vh;
        height: 90vh;
    }


    .img-kid1,
    .img-kid2,
    .img-kid3,
    .img-kid4 {
        position: inherit;
        display: block;
        height: 60%;
        width: auto;
        left: auto;
        right: auto;
        top: auto;
        bottom: auto;
    }

    .kid-group1,
    .kid-group2,
    .kid-group3,
    .kid-group4 {
        position: relative;
        left: -10vw;
        right: auto;
        top: auto;
        bottom: auto;
        display: block;
    }

    .rebel-style1-3,
    .age-style1-3,
    .age-number-style1-3,
    .years-style1-3 {
        margin: 0;
        padding: 0;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }

    .kid-group4 .rebel-style1-3,
    .kid-group4 .age-style1-3,
    .kid-group4 .age-number-style1-3,
    .kid-group4 .years-style1-3 {
        margin: 0;
        padding: 0;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }

    .arrow-group1,
    .arrow-group2,
    .arrow-group3,
    .arrow-group4 {
        position: inherit;
        left: 30vw;
        right: auto;
        top: -6vh;
        bottom: auto;
        display: block;
    }

    .kid-group4 .rebel-style1-3,
    .rebel-style1-3 {
        position: relative;
        top: 3vh;
        left: 12vw;
    }

    .kid-group4 .age-number-style1-3,
    .age-number-style1-3 {
        position: relative;
        left: 22vw;
        top: -1vh;
        font-size: 8vw;
    }

    .kid-group4 .years-style1-3,
    .years-style1-3 {
        position: relative;
        left: 15vw;
        top: -5vh;
        font-size: 20vw;

    }


    .overlay-inner {
        flex-direction: column;
    }

    .overlay-left {
        flex: .4;
        overflow: hidden;
        position: relative;
        background-color: #eaeaea;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }

    .overlay-left::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 50%;
        /* Offset from left */
        width: 70vw;
        /* Desired border width */
        height: 4px;
        /* Total height of the double line */
        border-bottom: 3px double black;
        transform: translateX(-50%);
    }

    .overlay-left .close-btn {
        display: block;
        font-size: 2.5rem;
    }

    /*.overlay-left img {
        height: 25vh;
    }*/

    .overlay-left img {
        position: absolute;
        height: 75vh;
        padding-top: 50%;
    }

    .kid-overlay-menu {
        height: auto;
        width: auto;
        display: flex;
        align-self: flex-end;
        justify-content: center;
        align-items: center;
        margin-bottom: 20px;
        left: auto;
        background-color: white;
    }

    #kid1-overlay .kid-overlay-menu,
    #kid2-overlay .kid-overlay-menu,
    #kid3-overlay .kid-overlay-menu,
    #kid4-overlay .kid-overlay-menu {
        width: auto;
    }

    .kid-overlay-menu div {
        display: inline-block;
        width: auto;
    }

    .kid-overlay-menu > div {
        text-align: center;
        padding: 15px 15px;
        border-left: 2px solid black;
    }

    .kid-overlay-menu > div:first-child {
        border-left: none;
    }

    .komc1,
    .komc2,
    .komc3,
    .komc4,
    .komc5 {
        border-bottom: none;
        max-width: auto;
        font-weight: 600;
    }

    .komc1 {
        max-width: auto;
    }

    .komc2,
    .komc3,
    .komc4,
    .komc5 {
        font-size: 1rem;
    }

    .kid-overlay-menu .komc1 p {
        font-size: 1.5rem;
        padding: 2px;
    }


    .content-section.visible {
        align-items: center;
    }

    .overlay-right {
        flex: .6;
    }

    .overlay-right .close-btn {
        display: none;
    }

    .ko1-prog p:first-child {
        align-self: flex-start;
        padding: 10px;
    }

    .ko1-prog p:nth-child(2) {
        padding-bottom: 10px;
    }

    .ko1-prog p:nth-child(3),
    .ko1-prog p:nth-child(4) {
        align-self: flex-end;
    }

    .ko1-issues h2,
    .ko1-psychology h2,
    .ko1-approach h2 {
        font-size: 4rem;
    }

    .ko1-issues p,
    .ko1-psychology p,
    .ko1-approach p {
        padding-left: 0;
        font-size: 1.25rem;
        line-height: 1.5;
    }

    /*info-card adjustment-------------------------*/

    .card {
        width: calc((100% - 20px) / 3);
        /* Same width for all images */
        max-width: 300px;
        /* Optional: limit max width */
        height: auto;
    }

    #info-cards {
        flex-wrap: wrap;
        justify-content: space-around;
        gap: 3vh;
        padding-top: 5vh;
    }

    .card-content .left-part {
        flex: .3;
    }

    .card-content .right-part {
        flex: .7;
    }

    #info-cards .card .card-content .left-image {
        padding-top: 5vh;
        width: 20vh;
    }


    #about-content,
    #prog-content,
    #faq-content,
    #blog-content,
    #contact-content {
        flex-direction: column;
    }

    #info-cards .card .card-content .left-part,
    #info-cards .card .card-content .right-part {
        align-items: center;
    }

    #about-content .right-part p {
        width: 80%;
        font-size: 1.25rem;
        line-height: 1.5;
    }

    .prog-right-child p {
        font-size: 2.25rem;
        line-height: 1;
        margin-right: 70px;
    }

    .prog-right-child {
        margin-top: 10px;
        margin-bottom: 3vh;
    }

    .prog-right-child img {
        height: 3vh;
    }

    .prog-right-child span {
        font-size: 1.25rem;
    }

    .faq-question {
        line-height: 1.5;
        font-size: 1.25rem;
    }

    .faq-answer-content h3 {
        font-size: 1.75rem;
        margin-bottom: 15px;
    }

    .faq-answer-content p {
        margin-bottom: 15px;
        font-size: 1.25rem;
        line-height: 1.5;
    }

    .faq-item li {
        font-size: 1.25rem;
        line-height: 1.5;
    }

    .faq-answer-content .faq-close-btn {
        font-size: 2.5rem;
    }

    #coming-soon {
        width: 30vw;
    }

    #contact-content .right-part p {
        text-align: center;
        font-size: 1.5rem;
        line-height: 1.5;
    }

    .h-bar {
        display: none;
    }

    .contact-mobile,
    .contact-email,
    .contact-address {
        flex-direction: column;
        margin-bottom: 3vh;
    }

    .contact-icon {
        display: block;
        height: 80px;
    }

    .close-btn {
        font-size: 2.5rem;
    }


    /*Footer adjustment----------------*/
    footer {
        height: 15vh;
    }

    footer p {
        font-size: 1rem;
    }
}








/* Tablets portrait / big phones: up to 1024px , height 768 */
@media (max-width: 1024px) {

    /*header adjustment----------------*/
    #up-social-icons img,
    #bt-social-icons img {
        width: 3.25vw;
    }

    #tl-menu-dropdown {
        right: 41%;
    }


    /*Home adjustment----------------*/
    .text-block .line1,
    .text-block .line2 {
        font-size: 18vw;
    }

    .text-block .line1 {
        margin-bottom: -5vh;
    }

    .text-block .tm {
        top: 18vh;
    }

    /*Officer adjustment----------------*/
    #officer-img {
        width: 40%;
        margin: -30vh auto 0 auto;
    }


    /*Half circle adjustment----------------*/
    .TagL3 {
        margin-top: -10px;
    }


    /*Mission adjustment----------------*/
    .mission-left {
        flex: 0 0 40%;
    }

    .our-text {
        align-self: flex-start;
        margin-top: 15vh;
    }

    .mission-gif img {
        height: 40vh;
        max-width: inherit;
    }

    .mission-text {
        position: absolute;
        margin-bottom: 9vh;
        padding-top: 10vh;
        left: 17vw;
    }

    .mission-right {
        flex: 0 0 60%;
    }

    .mission-right p {
        font-size: 1.2rem;
        line-height: 1.4;
    }


    /*Kids adjustment----------------*/
    .rebel-style1-3 {
        padding-left: 14vw;
    }

    .age-style1-3 {
        padding-left: 3vw;
    }

    .age-number-style1-3 {
        margin-top: -3vh;
        padding-left: 25vw;
    }

    .years-style1-3 {
        margin-top: -7vh;
    }

    .arrow-group1 {
        bottom: 28vh;
    }

    .kid-group2 {
        top: 0;
        left: 15vw;
    }

    .arrow-group2 {
        bottom: 36vh;
    }

    .arrow-group3 {
        bottom: 30vh;
    }

    .kid-group4 .rebel-style1-3 {
        padding-top: 30vh;
        padding-left: 68vw;
    }

    .kid-group4 .age-style1-3 {
        position: relative;
        margin-top: -7vh;
        padding-left: 58vw;
    }

    .kid-group4 .age-number-style1-3 {
        margin-top: 8vh;
    }

    .kid-group4 .years-style1-3 {
        margin-top: -8vh;
    }

    .arrow-group4 {
        right: 22vw;
        bottom: 21vh;
    }

    .kid-overlay-menu {
        width: 13vw;
        left: -6vw;
    }

    .ko1-issues p,
    .ko1-psychology p,
    .ko1-approach p {
        padding-top: 2vh;
        padding-left: 0;
    }

    .ko1-prog p:first-child {
        font-size: 1.5rem;
        margin-bottom: 10px;
    }

    .ko1-prog p:nth-child(2) {
        margin-bottom: 10px;
        font-size: 2rem;
    }

    /*Info-cards adjustment----------------*/
    #info-cards {
        padding-top: 10vh;
    }

    .prog-right-child {
        margin-bottom: 2vh;
        padding-top: 10px;
    }

    .prog-right-child p {
        font-size: 1.55rem;
    }

    .prog-right-child img {
        height: 3.75vh;
    }

}








/* Medium phones: up to 800px , height 600 */
@media (max-width: 800px) {

    /*Header adjustment----------------------*/
    header {
        justify-content: space-between;
    }

    .header-tr-logo {
        flex: 1;
        height: 4vh;
    }

    #tl-menu {
        flex: 1;
        align-items: flex-end;
        text-align: center;
        padding-right: 5px;
        padding-top: 5px;
    }

    .uLine,
    .bLine {
        width: 2vw;
        height: 2px;
    }

    #up-social-icons {
        display: none;
    }

    #bt-social-icons {
        display: flex;
    }

    #bt-social-icons img {
        width: 3vw;
    }

    .tl-main-logo {
        padding-left: 5px;
        padding-top: 5px;
        height: 6vh;
    }

    #tl-menu-dropdown {
        top: 30px;
        right: 15px;
    }

    #tl-menu-dropdown li {
        padding: 1vh 1vw;
        font-weight: 500;
    }


    /*Home adjustment--------------------------*/
    .text-block .line1 {
        margin-bottom: -5vh;
    }


    .text-block .tm {
        font-size: .75rem;
        top: 20vh;
    }


    /*Officer adjustment--------------------------*/
    #officer-img {
        width: 30%;
        margin: -25vh auto 0 auto;
    }


    /*Half circle adjustment--------------------------*/
    #Tagline {
        margin: -15vh auto 0 auto;
    }


    /*Mission adjustment--------------------------*/
    #mission {
        margin-bottom: 10vh;
    }

    .mission-left {
        flex: 0 0 40%;
    }

    .mission-left-item img {
        height: 30vw;
    }

    .mission-right {
        flex: 0 0 60%;
    }

    .mission-right p {
        font-size: 1.1rem;
    }

    .mission-text {
        margin-bottom: 20vh;
    }


    /*Kids adjustment--------------------------*/

    .img-kid4 {
        height: 90vh;
        left: 40%;
    }

    .kid-group1 {
        top: 10vh;
        left: 28vw;
    }

    .kid-group2 {
        top: 13vh;
        left: 7vw;
    }

    .kid-group3 {
        top: 15vh;
        left: 25vw;
    }

    .kid-group4 {
        top: -3vh;
        left: 5vw;
        z-index: 800;
    }


    .rebel-style1-3 {
        font-size: 4.5vw;
        padding-top: 20vh;
        padding-left: 14vw;
    }

    .age-style1-3 {
        font-size: 16vw;
        margin-top: -7vh;
    }

    .age-number-style1-3 {
        font-size: 7vw;
        margin-top: -5vh;
        padding-left: 27vw;
    }

    .years-style1-3 {
        font-size: 16vw;
        margin-top: -8vh;
        padding-left: 3vw;
    }


    .arrow-group1 {
        right: 5vw;
        bottom: 24vh;
    }

    .arrow-group2 {
        right: 7vw;
        bottom: 20vh;
    }

    .arrow-group3 {
        right: 7vw;
        bottom: 19vh;
    }

    .kid-group4 .rebel-style1-3 {
        padding-top: 35vh;
        padding-left: 17vw;
    }

    .kid-group4 .age-style1-3 {
        position: relative;
        margin-top: -8vh;
        padding-left: 5vw;
    }

    .kid-group4 .age-number-style1-3 {
        margin-top: -4vh;
        padding-left: 28vw;
    }

    .kid-group4 .years-style1-3 {
        margin-top: -8vh;
    }

    .arrow-group4 {
        right: 20vw;
        bottom: 23vh;
    }





    .overlay-inner {
        flex-direction: column;
    }

    .overlay-left {
        flex: .4;
        overflow: hidden;
        position: relative;
        background-color: #eaeaea;
    }

    .overlay-left::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 50%;
        /* Offset from left */
        width: 70vw;
        /* Desired border width */
        height: 4px;
        /* Total height of the double line */
        border-bottom: 3px double black;
        transform: translateX(-50%);
    }

    .overlay-left .close-btn {
        display: block;
        font-size: 1.25rem;
    }

    .overlay-left img {
        height: 150vh;
        padding-top: 50%;
        margin-bottom: -2vh;
    }

    .kid-overlay-menu {
        height: auto;
        width: auto;
        left: -5vw;
        display: flex;
        justify-content: center;
        align-items: center;
        align-self: flex-end;
        margin-bottom: 20px;
    }

    #kid1-overlay .kid-overlay-menu,
    #kid2-overlay .kid-overlay-menu,
    #kid3-overlay .kid-overlay-menu,
    #kid4-overlay .kid-overlay-menu {
        width: auto;
    }

    .kid-overlay-menu div {
        display: inline-block;
        width: auto;
    }

    .kid-overlay-menu > div {
        text-align: center;
        padding: 5px 5px;
        border-left: 2px solid black;
    }

    .kid-overlay-menu > div:first-child {
        border-left: none;
    }

    .komc1,
    .komc2,
    .komc3,
    .komc4,
    .komc5 {
        border-bottom: none;
        max-width: auto;
        font-weight: 600;
    }

    .komc1 {
        max-width: auto;
    }

    .komc2,
    .komc3,
    .komc4,
    .komc5 {
        font-size: .8rem;
    }

    .kid-overlay-menu .komc1 p {
        font-size: 1.1rem;
        padding: 2px;
    }


    .content-section.visible {
        align-items: center;
    }

    .overlay-right {
        flex: .6;
        justify-content: flex-start;
        overflow-y: auto;
    }

    .overlay-right .close-btn {
        display: none;
    }

    .ko1-prog {
        margin-top: 80px;
        margin-bottom: 60px;
    }

    .ko1-prog p:nth-child(3),
    .ko1-prog p:nth-child(4) {
        font-size: 1rem;
    }

    .ko1-issues h2,
    .ko1-psychology h2,
    .ko1-approach h2 {
        font-size: 2rem;
        margin-bottom: 20px;
    }

    .ko1-issues p,
    .ko1-psychology p,
    .ko1-approach p {
        padding-left: 0;
        font-size: 1.1rem;
        line-height: 1.5;
    }

    #kid-4 {
        margin-bottom: 0;
    }

    .kid4-approach {
        font-size: 1rem !important;
    }

    .ko-br-logo {
        position: relative;
        left: auto;
        top: auto;
        bottom: auto;
        right: auto;
        align-self: flex-end;
        margin-top: 20px;
    }

    .ko-br-logo img {
        width: 14vw;
        height: auto
    }

    #kid4-overlay .overlay-inner .overlay-right .ko1-approach {
        margin-bottom: 100px;
    }


    /*Info Cards Adjustment----------------------*/
    #info-cards {
        flex-wrap: wrap;
        justify-content: space-around;
        gap: 10px;
        padding-top: 5vh;
        height: 80vh;
    }

    .card {
        width: 160px;
        height: auto;
    }

    .card-content .left-part {
        flex: .3;
    }

    .card-content .right-part {
        flex: .7;
    }

    #info-cards .card .card-content .left-image {
        width: 40%;
    }

    #about-content,
    #prog-content,
    #faq-content,
    #blog-content,
    #contact-content {
        flex-direction: column;
    }

    #about-content {
        justify-content: flex-start;
    }

    #info-cards .card .card-content .left-part,
    #info-cards .card .card-content .right-part {
        align-items: center;
    }

    #about-content .right-part p {
        font-size: 1rem;
        margin-top: 30px;
    }

    .prog-right-child p {
        font-size: 1.2rem;
        line-height: 1;
    }

    .prog-right-child {
        margin-top: 10px;
    }

    .prog-right-child img {
        height: 3vh;
        padding-left: 30px;
        padding-right: 30px;
    }

    .prog-right-child span {
        font-size: 1rem;
    }

    .faq-list {
        margin-bottom: 30px;
    }

    .faq-question {
        line-height: 1.5;
        font-size: 1rem;
    }

    .faq-answer-content h3 {
        font-size: 1rem;
        margin-bottom: 15px;
    }

    .faq-answer-content p {
        margin-bottom: 15px;
        font-size: .8rem;
        line-height: 1.2;
    }

    .faq-answer-content li {
        font-size: .8rem;
    }

    .faq-answer-content .faq-close-btn {
        font-size: 1rem;
    }

    #coming-soon {
        width: 50%;
    }

    #contact-content .right-part p {
        text-align: center;
        font-size: 1rem;
    }

    .h-bar {
        display: none;
    }

    .contact-mobile,
    .contact-email,
    .contact-address {
        flex-direction: column;
        margin-bottom: 3vh;
    }

    .contact-icon {
        display: block;
        height: 40px;
    }

    .close-btn {
        font-size: 1.2rem;
    }


    /*footer Adjustment----------------------*/

    footer {
        height: 15vh;
    }

    footer p {
        margin-bottom: 3px;
        font-size: .8rem;
    }
}








/* Medium phones: up to 768px , height 1024 */
@media (max-width: 768px) {

    /*Header adjustment----------------------*/
    .header-tr-logo {
        height: 5vh;
    }

    #tl-menu {
        padding-right: 20px;
        padding-top: 15px;
    }

    .uLine,
    .bLine {
        width: 4vw;
        height: 4px;
    }

    #bt-social-icons img {
        width: 4vw;
    }

    .tl-main-logo {
        padding-left: 20px;
        padding-top: 15px;
        height: 5vh;
    }

    #tl-menu-dropdown {
        top: 35%;
        right: 5%;
    }


    /*Home adjustment--------------------------*/
    .text-block .tm {
        top: 11vh;
    }

    .text-block .line1 {
        margin-bottom: -3vh;
    }


    /*Officer adjustment--------------------------*/
    #officer-img {
        margin: -33vh auto 0 auto;
    }


    /*Half circle adjustment--------------------------*/
    #Tagline {
        margin: -10vh auto 0 auto;
    }


    .TagL1 {
        padding-top: 2vh;
        line-height: .9;
    }

    .mission-text {
        margin-bottom: 10vh;
    }


    /*Kids adjustment--------------------------*/
    .img-kid4 {
        left: 45%;
    }

    .kid-group1 {
        left: 45vw;
    }

    .kid-group2 {
        top: 20vh;
    }

    .kid-group3 {
        top: 32vh;
        left: 37vw;
    }

    .kid-group4 {
        top: 15vh;
        left: 9vw;
    }

    .age-style1-3 {
        margin-top: -4vh;
    }

    .age-number-style1-3 {
        margin-top: -2.5vh;
    }

    .years-style1-3 {
        margin-top: -4vh;
    }


    .arrow-group1 {
        right: 13vw;
        bottom: 13vh;
    }

    .arrow-group2 {
        bottom: 13vh;
    }

    .arrow-group3 {
        right: 12vw;
        bottom: 13vh;
    }

    .kid-group4 .age-style1-3 {
        margin-top: -4.5vh;
    }

    .kid-group4 .age-number-style1-3 {
        margin-top: 0vh;
        padding-left: 10vw;
    }

    .kid-group4 .years-style1-3 {
        margin-top: -5vh;
    }

    .arrow-group4 {
        right: 4vw;
        bottom: 20vh;
    }

    .overlay-left img {
        height: 120vh;
        padding-top: 70%;
    }

    .kid-overlay-menu {
        height: auto;
        display: block;
    }

    #kid1-overlay .kid-overlay-menu,
    #kid3-overlay .kid-overlay-menu {
        width: 20vw;
    }

    .kid-overlay-menu div {
        display: block;
        padding: 10px 3px;
    }


    #kid2-overlay .kid-overlay-menu,
    #kid4-overlay .kid-overlay-menu {
        width: 23vw;
    }

    .kid-overlay-menu > div {
        border-bottom: 2px solid black;
        border-left: none;
    }

    .kid-overlay-menu .komc1 p {
        padding: 10px;
        font-size: 1.3rem;
    }

    .komc2,
    .komc3,
    .komc4,
    .komc5 {
        font-size: 1.2rem;
    }

    .ko1-issues h2,
    .ko1-psychology h2,
    .ko1-approach h2 {
        font-size: 2.5rem;
    }

    .ko1-issues p,
    .ko1-psychology p,
    .ko1-approach p {
        padding-left: 0;
        font-size: 1.1rem;
        line-height: 1.5;
    }

    .ko1-prog {
        margin-top: 180px;
        margin-bottom: 180px;
    }


    .ko1-prog p:nth-child(3),
    .ko1-prog p:nth-child(4) {
        font-size: 1.1rem;
    }

    .ko-br-logo img {
        width: 20vw;

    }

    #kid4-overlay .overlay-inner .overlay-right .ko1-approach {
        margin-bottom: 300px;
    }


    /*Info Cards Adjustment----------------------*/
    .card {
        width: calc((100% - 20px) / 3);
        /* Same width for all images */
        max-width: 220px;
        /* Optional: limit max width */
        height: auto;
    }

    #info-cards .card .card-content .left-image {
        width: 70%;
    }

    #about-content .right-part p {
        font-size: 1rem;
    }

    .prog-right-child p {
        font-size: 1.25rem;
    }

    .prog-right-child {
        margin-top: 25px;
    }

    .faq-question {
        font-size: 1rem;
        line-height: 1.65;
    }

    .faq-answer-content p {
        font-size: 1rem;
    }

    .faq-answer-content li {
        font-size: 1rem;
    }

    #coming-soon {
        width: 65%;
    }

    .contact-icon {
        height: 50px;
    }

    #contact-content .right-part p {
        text-align: center;
        font-size: 1.2rem;
    }

    .close-btn {
        font-size: 1.75rem;
    }

    .overlay-left .close-btn {
        font-size: 1.75rem;
    }

    /*footer Adjustment----------------------*/

    footer p {
        font-size: .8rem;
    }
}








/* Small phones: up to 667px , height 375 */
@media (max-width: 667px) and (min-width: 601px) {

    /*Header Adjustment-----------------------*/
    header {
        height: 8vh;
    }

    .tl-main-logo {
        height: 8vh;
        padding-top: 5px;
        padding-left: 5px;
    }

    #tl-menu {
        padding-top: 5px;
        padding-right: 5px;
    }

    .uLine,
    .bLine {
        width: 3vw;
        height: 2px;
    }

    #tl-menu-dropdown {
        top: 30px;
        right: 25px;
    }

    #tl-menu-dropdown li {
        font-size: .8rem;
        padding: 5px 10px;

    }

    /*Home Adjustment-----------------------*/
    .text-block .line1,
    .text-block .line2 {
        font-size: 13vw;
    }

    .text-block .line1 {
        margin-bottom: -4vh;
    }

    .text-block .tm {
        font-size: .6rem;
        top: 18vh;
    }




    /*Officer Adjustment-----------------------*/
    #officer-img {
        margin: -30vh auto 0 auto;
    }




    /*Half-circle Adjustment-----------------------*/
    #Tagline {
        margin: -23vh auto 0 auto;
    }




    /*Mission Adjustment-----------------------*/
    .our-text {
        margin-top: 10vh;
    }

    .mission-right p {
        font-size: .9rem;
        line-height: 1.2;
    }

    .mission-text {
        margin-bottom: 7vh;
    }

    .h-division {
        margin: 0 auto 0 auto;
    }




    /*Kids Adjustment-----------------------*/
    #kid-3 {
        margin-bottom: 10vh;
    }

    .kid-group1 {
        top: 5vh;
        left: 21vw;
    }

    .kid-group2 {
        top: -2vh;
        left: 23vw;
    }

    .kid-group3 {
        top: -2vh;
        left: 18vw;
    }

    .kid-group4 {
        top: -7vh;
        left: 6vw;
    }

    .rebel-style1-3 {
        padding-top: 15vh;
        padding-left: 14vw;
    }

    .age-style1-3 {
        margin-top: -11vh;
    }

    .age-number-style1-3 {
        padding-left: 26vw;
        margin-top: -5vh;
    }

    .years-style1-3 {
        font-size: 16vw;
        margin-top: -12vh;
        padding-left: 3vw;
    }

    .kid-group4 .rebel-style1-3 {
        padding-top: 25vh;
        padding-left: 63vw;
    }

    .kid-group4 .age-style1-3 {
        position: relative;
        margin-top: -10vh;
        padding-left: 51vw;
    }

    .kid-group4 .age-number-style1-3 {
        margin-top: -7vh;
        padding-left: 25vw;
    }

    .kid-group4 .years-style1-3 {
        margin-top: -11vh;
    }

    .arrow-group1 {
        right: 10vw;
        bottom: 18vh;
    }

    .arrow-group2 {
        right: 5vw;
        bottom: 25vh;
    }

    .arrow-group3 {
        bottom: 28vh;
    }

    .arrow-group4 {
        right: 20vw;
        bottom: 23vh;
        z-index: 800;
    }

    .overlay-inner {
        flex-direction: row;
    }

    .overlay-left .close-btn {
        display: none;
    }

    .overlay-left img {
        height: 120vh;
        padding-top: 55%;
    }

    #kid1-overlay .kid-overlay-menu,
    #kid2-overlay .kid-overlay-menu,
    #kid3-overlay .kid-overlay-menu,
    #kid4-overlay .kid-overlay-menu {
        max-width: 15vw;
        left: -30px;
        display: block;
    }

    .kid-overlay-menu > div {
        border-left: none;
        text-align-last: left;
        padding: 6px 8px;
    }

    .kid-overlay-menu > div:first-child {
        text-align-last: center;
        padding: 0;
    }

    .komc2,
    .komc3,
    .komc4,
    .komc5 {
        font-size: .8rem;
        font-weight: 500;
    }

    .kid-overlay-menu .komc1 p {
        font-size: .8rem;
        padding: 15px 3px;

    }

    .content-section.visible {
        align-items: center;
    }

    .ko1-prog p:first-child {
        font-size: 1rem;
        align-self: flex-start;
    }

    .ko1-prog p:nth-child(2) {
        font-size: 1.30rem;
    }

    .ko1-prog p:nth-child(3),
    .ko1-prog p:nth-child(4) {
        font-size: .85rem;
    }

    .overlay-right {
        height: auto;
    }

    .overlay-right .close-btn {
        font-size: 1rem;
        display: block;
        top: 5px;
        right: 5px;
    }

    .ko1-issues h2,
    .ko1-psychology h2,
    .ko1-approach h2 {
        align-self: flex-start;
        font-size: 1.4rem;
    }

    .ko1-issues p,
    .ko1-psychology p,
    .ko1-approach p {
        padding-left: 0;
        font-size: .85rem;
    }

    .ko1-prog {
        margin-top: 100px;
        margin-bottom: 100px;
    }

    #kid-4 .ko1-approach p {
        font-size: .85rem !important;
        font-weight: 500;
    }

    #kid4-overlay .overlay-inner .overlay-right .ko1-approach {
        margin-bottom: 150px;
    }

    .ko-br-logo img {
        width: 12vw;

    }




    /*Info Cards Adjustment-----------------------*/
    #info-cards {
        padding: 10vh 2vw;
    }

    .card {
        width: 15%;
    }

    #about-content,
    #prog-content,
    #faq-content,
    #blog-content,
    #contact-content {
        flex-direction: row;
    }

    #about-content .right-part {
        justify-content: flex-start;
        overflow-y: auto;
        max-height: 65vh;
    }

    #about-content .right-part p {
        font-size: .9rem;
        line-height: 1.3;
        margin-top: 10px;
    }

    #prog-content .right-part {
        padding-top: 40px;
    }

    .prog-right-child p {
        font-size: .9rem;
    }

    .prog-right-child {
        margin-top: 3px;
    }

    .prog-right-child img {
        height: 5vh;
    }

    .prog-right-child span {
        font-size: .8rem;
    }

    .faq-list {
        padding: 15px 10px;
    }

    .faq-item {
        margin-bottom: 10px;
        border-bottom: 1px solid black;
    }

    .faq-question {
        line-height: 1.1;
        font-size: .9rem;
    }

    .faq-answer-content h3 {
        font-size: 1rem;
    }

    .faq-answer-content p {
        font-size: .9rem;
        line-height: 1.3;
    }

    .faq-answer-content li {
        font-size: .9rem;
    }

    .faq-answer-content .faq-close-btn {
        font-size: .9rem;
    }

    #blog-content .right-part {
        flex-direction: column;

    }

    #coming-soon {
        width: 40%;
    }


    #blog-content .right-part .ko-br-logo {
        position: absolute;
        bottom: 10px;
        right: 10px;
    }


    .contact-mobile,
    .contact-email,
    .contact-address {
        flex-direction: row;
    }
    
    #contact-card #contact-content .right-part
    {
        align-items: flex-end !important;
    }

    #contact-content .right-part p {
        font-size: .7rem;
    }

    .contact-address p {
        text-align-last: right;
    }

    .h-bar {
        display: block;
    }

    .contact-icon {
        display: none;
    }
    
        #contact-content .right-part .ko-br-logo {
        position: absolute;
        bottom: 10px;
        right: 10px;
    }

    .close-btn {
        font-size: 1rem;
    }



    /*Footer Adjustment-----------------------*/
    footer p {
        font-size: .8rem;
    }

    #bt-social-icons img {
        width: 3vw;
    }
}








/* Extra small phones: up to 600px , height 960 */
@media (max-width: 600px) {

    /*Header Adjustment-----------------------*/
    header {
        height: 8vh;
    }

    .tl-main-logo {
        height: 4vh;
        padding-top: 5px;
        padding-left: 5px;
    }

    #tl-menu {
        padding-top: 5px;
        padding-right: 5px;
    }

    .uLine,
    .bLine {
        width: 4vw;
        height: 3px;
    }

    #tl-menu-dropdown {
        top: 30px;
        right: 25px;
    }

    #tl-menu-dropdown li {
        font-size: .9rem;
        padding: 10px 10px;

    }

    /*Home Adjustment-----------------------*/
    #home {
        height: 70vh;
    }

    .text-block .line1,
    .text-block .line2 {
        font-size: 16vw;
    }

    .text-block .line1 {
        margin-bottom: -1.5vh;
    }

    .text-block .tm {
        font-size: .6rem;
        top: 8vh;
    }




    /*Officer Adjustment-----------------------*/
    #officer {
        width: 98vw;
    }

    #officer-img {
        margin: -25vh auto 0 auto;
    }




    /*Half-circle Adjustment-----------------------*/
    #Tagline {
        margin: -10vh auto 0 auto;
    }



    /*Mission Adjustment-----------------------*/
    #mission {
        flex-direction: column;
        margin: 5vh 2vw;
    }

    .mission-left {
        margin-bottom: 4vh;
    }

    .mission-left-item img {
        height: 30vh;
    }

    .our-text {
        position: relative;
        left: 4vw;
        font-size: 3rem;
        margin-top: 2vh;
    }

    .mission-text {
        position: relative;
        top: 15vh;
        left: -6vw;
        font-size: 3rem;
    }

    .mission-right p {
        font-size: 1.15rem;
        line-height: 1.1;
    }

    .mission-text {
        margin-bottom: 15vh;
    }

    .h-division {
        margin: 0 auto 0 auto;
    }




    /*Kids Adjustment-----------------------*/
    #kid-1,
    #kid-2,
    #kid-3 {
        margin-bottom: 9vh;
    }

    #kid-4 {
        margin-bottom: 0vh;
    }

    .kid-group1 {
        top: 33vh;
        left: 45vw;
    }

    .kid-group2 {
        top: 35vh;
        left: 8vw;
    }

    .kid-group3 {
        z-index: 200;
        top: 40vh;
        left: 28vw;
    }

    .kid-group4 {
        top: 25vh;
        left: 6vw;
    }

    .img-kid2 {
        right: 6vw;
    }

    .img-kid3 {
        z-index: 100;
    }

    .rebel-style1-3 {
        padding-top: 15vh;
        padding-left: 14vw;
        font-size: 2.5rem;
    }

    .age-style1-3 {
        margin-top: -4vh;
    }

    .age-number-style1-3 {
        padding-left: 26vw;
        margin-top: -2vh;
    }

    .years-style1-3 {
        margin-top: -4vh;
        padding-left: 6vw;
    }

    .kid-group4 .rebel-style1-3 {
        padding-top: 25vh;
        padding-left: 43vw;
    }

    .kid-group4 .age-style1-3 {
        position: relative;
        margin-top: -4vh;
        padding-left: 31vw;
    }

    .kid-group4 .age-number-style1-3 {
        margin-top: 0vh;
        padding-left: 35vw;
    }

    .kid-group4 .years-style1-3 {
        margin-top: -4vh;
    }

    .arrow-group1 {
        right: 10vw;
        bottom: 18vh;
    }

    .arrow-group2 {
        right: auto;
        left: 30vw;
        bottom: 15vh;
    }

    .arrow-group3 {
        right: 20vw;
        bottom: 10vh;
    }

    .arrow-group4 {
        right: auto;
        left: 20vh;
        bottom: 15vh;
        z-index: 800;
    }

    .overlay-inner {
        flex-direction: column;
    }

    .overlay-left .close-btn {
        display: block;
        font-size: 1.5rem;
    }

    .overlay-left img {
        height: 120vh;
        padding-top: 85%;
    }

    #kid1-overlay .kid-overlay-menu,
    #kid2-overlay .kid-overlay-menu,
    #kid3-overlay .kid-overlay-menu,
    #kid4-overlay .kid-overlay-menu {
        width: 23vw;
        max-width: auto;
        left: -30px;
        display: block;
    }

    .kid-overlay-menu > div {
        border-left: none;
        text-align-last: left;
        padding: 8px 15px;
    }

    .kid-overlay-menu > div:first-child {
        text-align-last: center;
        padding: 0;
    }

    .komc2,
    .komc3,
    .komc4,
    .komc5 {
        font-size: 1.1rem;
        font-weight: 500;
    }

    .kid-overlay-menu .komc1 p {
        font-size: 1.15rem;
        padding: 15px 3px;

    }

    .content-section.visible {
        align-items: center;
    }

    .ko1-prog p:first-child {
        font-size: 1.3rem;
        align-self: flex-start;
    }

    .ko1-prog p:nth-child(2) {
        font-size: 2rem;
    }

    .ko1-prog p:nth-child(3),
    .ko1-prog p:nth-child(4) {
        font-size: 1rem;
    }

    .overlay-right {
        height: auto;
    }

    .overlay-right .close-btn {
        display: none;
    }

    .ko1-issues h2,
    .ko1-psychology h2,
    .ko1-approach h2 {
        align-self: flex-start;
        font-size: 2rem;
    }

    .ko1-issues p,
    .ko1-psychology p,
    .ko1-approach p {
        padding-left: 0;
        font-size: 1.1rem;
    }

    #kid-4 .ko1-approach p {
        font-weight: 500;
    }

    .ko-br-logo {
        bottom: 7px;
        right: 7px;
        padding: 0;
    }




    /*Info Cards Adjustment-----------------------*/
    #info-cards {
        padding: 7vh 2vw;
    }

    .card .close-btn {
        font-size: 1.2rem;
        font-weight: 700;
    }

    #about-content,
    #prog-content,
    #faq-content,
    #blog-content,
    #contact-content {
        flex-direction: column;
    }
    
        #about-content .right-part {
        justify-content: flex-start;
        overflow-y: auto;
        max-height: 65vh;
    }

    #about-content .right-part p {
        font-size: 1.1rem;
        line-height: 1.5;
    }

    .prog-right-child p {
        font-size: 1.3rem;
    }

    .prog-right-child {
        margin-top: 3px;
    }

    .prog-right-child img {
        height: 3vh;
    }

    .prog-right-child span {
        font-size: 1rem;
    }
    
            #prog-content .right-part .ko-br-logo {
        position: absolute;
        bottom: 10px;
        right: 10px;
    }
    
    #faq-content {
     justify-content: flex-start;   
    }

    #faq-content .right-part {
        flex-direction: column;
    }
    
    .faq-list {
        padding: 15px 10px;
        align-self: center;
    }
    
        .faq-item {
        margin-bottom: 10px;
        border-bottom: 1px solid black;
    }
    

    .faq-question {
        line-height: 1.5;
        font-size: 1.2rem;
    }

    .faq-answer-content h3 {
        font-size: 1.3rem;
    }

    .faq-answer-content p {
        font-size: 1.1rem;
        line-height: 1.3;
    }

    .faq-answer-content ul {
        font-size: .9rem;
    }

    .faq-answer-content .faq-close-btn {
        font-size: 1.2rem;
    }

    #coming-soon {
        align-self: center;
        width: 50%;
    }
    
        #blog-content .right-part .ko-br-logo {
        position: absolute;
        bottom: 10px;
        right: 10px;
    }

    #info-cards .card .card-content .right-part {
        align-items: center;
    }

    .contact-mobile,
    .contact-email,
    .contact-address {
        flex-direction: column;
    }

    #contact-content .right-part p {
        font-size: 1.1rem;
    }

    .contact-address p {
        text-align-last: center;
    }

    .h-bar {
        display: none;
    }

    .contact-icon {
        display: block;
    }
    
            #contact-content .right-part .ko-br-logo {
        position: absolute;
        bottom: 10px;
        right: 10px;
    }

    .ko-br-logo img {
        width: 18vw;
    }
    
        .card .close-btn {
        font-size: 1.5rem;
    }

    /*Footer Adjustment-----------------------*/
    footer p {
        font-size: .8rem;
    }

    #bt-social-icons img {
        width: 5vw;
    }

}








/* Very small phones: up to 480px , height 720 */
@media (max-width: 480px) {

    /*Header Adjustment------------------------------*/
    #tl-menu {
        padding-top: 10px;
        padding-right: 10px;
    }

    .uLine,
    .bLine {
        width: 4vw;
        height: 3px;
        margin: 1px 0;
    }

    .tl-main-logo {
        height: 5vh;
    }

    #tl-menu-dropdown {
        top: 20px;
    }


    /*Home Adjustment------------------------------*/
    .text-block .line1 {
        margin-bottom: -1.5vh;
    }

    .text-block .tm {
        font-size: .6rem;
        top: 8vh;
    }

    /*Officer Adjustment------------------------------*/
    #officer-img {
        width: 40%;
        margin: -24vh auto 0 auto;
    }

    /*Half-circle Adjustment------------------------------*/
    .TagL3 {
        margin-top: -6px;
    }

    /*Mission Adjustment------------------------------*/


    .mission-text {
        font-size: 2.5rem;
    }

    .mission-right p {
        font-size: .9rem;
        line-height: 1.1;
    }

    /*Kids Adjustment------------------------------*/
    #kid1-overlay .kid-overlay-menu,
    #kid3-overlay .kid-overlay-menu {
        width: 25vw;
    }

    #kid2-overlay .kid-overlay-menu,
    #kid4-overlay .kid-overlay-menu {
        width: 27vw;
    }

    .overlay-left img {
        padding-top: 75%;
    }

    .kid-overlay-menu .komc1 p {
        font-size: 1.1rem;
        padding: 10px 3px;
    }

    .kid-overlay-menu > div {
        padding: 5px 15px;
    }

    .komc2,
    .komc3,
    .komc4,
    .komc5 {
        font-size: 1rem;
        font-weight: 500;
    }

    .ko1-issues p,
    .ko1-psychology p,
    .ko1-approach p {
        font-size: 1rem;
    }

    .ko1-prog {
        margin-top: 100px;
        margin-bottom: 80px;
        text-align: center;
    }

    #kid4-overlay .overlay-inner .overlay-right .ko1-approach {
        margin-bottom: 180px;
    }

    .overlay-left .close-btn {
        font-size: 1.15rem;
        top: 10px;
        right: 10px;
    }

    .ko-br-logo img {
        width: 22vw;

    }



    /*Info-cards Adjustment------------------------------*/
    #info-cards {
        height: auto;
    }

    .card {
        width: calc((100% - 20px) / 2);

    }

    .img-wrapper img {
        width: 65%;
        height: auto;
        margin: 0 auto;
    }

    #info-cards .card .card-content .left-image {
        width: 50%;
    }


    #about-content .right-part p {
        font-size: 1rem;
        line-height: 1.3;
    }

    .prog-right-child p {
        font-size: 1rem;
    }
    
        .faq-item {
        margin-bottom: 10px;
    }

    .faq-question {
        line-height: 1.3;
        font-size: 1rem;
    }

    .faq-answer-content {
        max-width: 70vw;
    }

    .faq-answer-content h3 {
        font-size: 1.2rem;
    }

    .faq-answer-content p {
        font-size: 1rem;
        line-height: 1.3;
    }

    .faq-answer-content li {
        font-size: 1rem;
    }

    #contact-content .right-part p {
        font-size: .8rem;
    }

    .contact-icon {
        height: 40px;
    }

    .card .close-btn {
        font-size: 1rem;
        font-weight: 600;
    }

    .faq-answer-content .faq-close-btn {
        font-size: 1rem;
    }



    /*Footer Adjustment------------------------------*/
    footer p {
        font-size: .55rem;
    }

}








/* Very small phones: up to 432px , height 960 */
@media (max-width: 432px) {

    /*Header Adjustment------------------------------*/
    .tl-main-logo {
        height: 4.25vh;
    }

    .uLine,
    .bLine {
        width: 6vw;
        margin-top: 3px;
    }

    /*Home Adjustment------------------------------*/
    .text-block .line1,
    .text-block .line2 {
        font-size: 24vw;
    }

    .text-block .line1 {
        margin-bottom: -2vh;
    }

    .text-block .tm {
        top: 9vh;
        right: -3vw;
    }

    /*Officer Adjustment------------------------------*/
    #officer-img {
        margin: -24vh auto 0 auto;
    }

    .TagL1 {
        padding-bottom: 7px;
    }

    /*half-circle Adjustment------------------------------*/
    #Tagline {
        margin: -7vh auto 0 auto;
    }


    .TagL2 {
        font-size: 3vw;
    }

    /*Mission Adjustment------------------------------*/

    .mission-left {
        margin: 0;
        padding: 0;
        display: flex;
        max-width: 100%;
        overflow: hidden;
        flex: 0 0 100%;
        position: relative;
    }

    .mission-left-item {
        display: block;
        position: relative;
    }

    .mission-text,
    .our-text {
        padding: 0;
        margin: 0;
        left: auto;
        right: auto;
        top: auto;
        bottom: auto;
    }

    .mission-gif > img {
        height: 25vh;
    }

    .our-text {
        position: absolute;
        top: 20px;
        left: 50px;
        font-size: 2rem;
    }

    .mission-gif {
        margin-bottom: 50px;
    }

    .mission-text {
        font-size: 2rem;
        position: absolute;
        right: 25px;
        margin-bottom: 40px;
    }

    .mission-right {
        padding: 0;
        margin: 0;
        flex: 0 0 100%;
    }

    .mission-right p {
        padding: 0 20px;
        margin: 0;
        font-size: 1.1rem;
        line-height: 1.2;
    }


    /*Kids Adjustment------------------------------*/
    #kid-1,
    #kid-2,
    #kid-3,
    #kid-4 {
        margin-bottom: 5vh;
        height: auto;
        width: auto;
        left: auto;
        right: auto;
        top: auto;
        bottom: auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-content: center;
        margin-bottom: 1vh;
        height: 90vh;
    }

    #kid-4 {
        margin-bottom: 0;
    }


    .img-kid1,
    .img-kid2,
    .img-kid3,
    .img-kid4 {
        position: inherit;
        display: block;
        height: 60%;
        width: auto;
        left: auto;
        right: auto;
        top: auto;
        bottom: auto;
    }

    .kid-group1,
    .kid-group2,
    .kid-group3,
    .kid-group4 {
        position: relative;
        left: -10vw;
        right: auto;
        top: auto;
        bottom: auto;
        display: block;
    }

    .rebel-style1-3,
    .age-style1-3,
    .age-number-style1-3,
    .years-style1-3 {
        margin: 0;
        padding: 0;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }

    .kid-group4 .rebel-style1-3,
    .kid-group4 .age-style1-3,
    .kid-group4 .age-number-style1-3,
    .kid-group4 .years-style1-3 {
        margin: 0;
        padding: 0;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }

    .arrow-group1,
    .arrow-group2,
    .arrow-group3,
    .arrow-group4 {
        position: inherit;
        left: 20vw;
        right: auto;
        top: -6vh;
        bottom: auto;
        display: block;
    }

    .arrow-text1,
    .arrow-text2,
    .arrow-text3,
    .arrow-text4 {
        width: auto;
    }

    .kid-group4 .rebel-style1-3,
    .rebel-style1-3 {
        position: relative;
        top: 3vh;
        left: 12vw;
        font-size: 5vw;
    }

    .kid-group4 .age-number-style1-3,
    .age-number-style1-3 {
        position: relative;
        left: 22vw;
        top: -1vh;
        font-size: 8vw;
    }

    .kid-group4 .years-style1-3,
    .years-style1-3 {
        position: relative;
        left: 15vw;
        top: -5vh;
        font-size: 20vw;

    }

    .ar1 {
        font-size: 2rem;
    }

    .ar2 {
        font-size: 2.5rem;
    }

    .ar3 {
        font-size: 3rem;
    }

    .overlay-left img {
        height: 85vh;
        padding-top: 85%;
    }

    #kid1-overlay .kid-overlay-menu,
    #kid2-overlay .kid-overlay-menu,
    #kid3-overlay .kid-overlay-menu,
    #kid4-overlay .kid-overlay-menu {
        width: 32vw;
    }

    .kid-overlay-menu .komc1 p {
        font-size: 1.3rem;
    }

    #kid2-overlay .kid-overlay-menu .komc1 p,
    #kid4-overlay .kid-overlay-menu .komc1 p {
        font-size: 1.1rem;
    }

    .kid-overlay-menu > div {
        padding: 8px 10px;
    }

    .komc2,
    .komc3,
    .komc4,
    .komc5 {
        font-size: 1.1rem;
    }

    .ko1-prog {
        margin-top: 150px;
        margin-bottom: 150px;
    }

    #kid4-overlay .overlay-inner .overlay-right .ko1-approach {
        margin-bottom: 270px;
    }


    .ko1-prog p:nth-child(3),
    .ko1-prog p:nth-child(4) {
        font-size: 1.1rem;
    }

    .ko1-issues p,
    .ko1-psychology p,
    .ko1-approach p {
        font-size: 1.1rem;
    }

    .ko-br-logo {
        top: auto;
        left: auto;
        right: auto;
        bottom: auto;
    }

    .ko-br-logo img {
        width: 26vw;
    }

    .overlay-left .close-btn {
        font-size: 1.5rem;
        font-weight: bold;
    }



    /*Info-cards Adjustment------------------------------*/
    #info-cards {
        width: 100vw;
        height: auto;
        padding-top: 2vh;
    }

    .img-wrapper img {
        width: 80%;
    }

    #info-cards .card .card-content .left-image {
        padding-top: 5vh;
    }

    .card {
        margin-top: 3vh;
    }

    #about-content .right-part {
        padding-right: 0px;
    }

    .prog-right-child p {
        font-size: 1.3rem;
        text-align: left;
    }

    .prog-right-child img {
        height: 2.5vh;
    }

    .faq-answer-content {
        padding-top: 4vh;
    }
    
                #contact-content .right-part p {
        font-size: 1rem;
    }

    .card .close-btn {
        font-size: 1.2rem;
    }


    /*Footer Adjustment------------------------------*/
    footer {
        height: 5vh
    }

    #bt-social-icons img {
        width: 7vw;
    }

}








/* Very small phones: up to 414px , height 896*/
@media (max-width: 414px) {}








/* Very small phones: up to 390px , height 844 */
@media (max-width: 390px) {


    /*Mission Adjustment------------------------------*/
    .mission-right p {
        font-size: 1rem;
        line-height: 1.1;
    }


    /*Kids Adjustment------------------------------*/
    .arrow-text1,
    .arrow-text2,
    .arrow-text3,
    .arrow-text4 {
        width: auto;
    }

    #kid1-overlay .kid-overlay-menu,
    #kid2-overlay .kid-overlay-menu,
    #kid3-overlay .kid-overlay-menu,
    #kid4-overlay .kid-overlay-menu {
        width: 34vw;
    }

    .kid-overlay-menu > div {
        padding: 8px 10px;
    }

    .ko1-prog {
        margin-top: 120px;
        margin-bottom: 120px;
    }

    #kid4-overlay .overlay-inner .overlay-right .ko1-approach {
        margin-bottom: 250px;
    }

    .overlay-left .close-btn {
        font-size: 1.3rem;
    }
    
        .prog-right-child p {
        font-size: 1.1rem;
    }
    
            #contact-content .right-part p {
        font-size: .9rem;
    }


}








/* Very small phones: up to 375px , design for 812 */
@media (max-width: 375px) {
    #kid-2 {
        text-align: center;
    }

    .ko1-prog p:nth-child(2) {
        font-size: 1.40rem;
    }

    .faq-answer-content h3 {
        font-size: 1.1rem;
    }

    #kid4-overlay .overlay-inner .overlay-right .ko1-approach {
        margin-bottom: 230px;
    }
}








/* Very small phones: up to 360px , height 800 */
@media (max-width: 360px) {

    .mission-right p {
        font-size: .9rem;
        line-height: 1.1;
    }

    .kid-overlay-menu {
        width: 32vw !important;
    }

    .kid-overlay-menu > div {
        padding: 5px 10px;
    }

    .ko1-prog p:nth-child(2) {
        font-size: 1.25rem;
    }

    .komc2,
    .komc3,
    .komc4,
    .komc5 {
        font-size: 1rem;
    }

    #kid4-overlay .overlay-inner .overlay-right .ko1-approach {
        margin-bottom: 220px;
    }
    
        .prog-right-child p {
        font-size: 1rem;
    }
    
        .prog-right-child span {
        font-size: .9rem;
    }  

}








/* Very small phones: up to 320px , design for 480 */
@media (max-width: 320px) {

    /*Header Adjustment-----------------------*/
    header {
        height: auto;
        padding: 5px;
    }

    .tl-main-logo {
        height: 5vh;
        padding: 0;
    }

    #tl-menu {
        padding: 5px;
    }

    .uLine,
    .bLine {
        width: 5vw;
        height: 2px;
        margin-top: 2px;
    }

    #tl-menu-dropdown li {
        font-size: .7rem;
        padding: 8px;
    }


    /*Home Adjustment-----------------------*/
    .text-block .line1 {
        margin-bottom: -3vh;
    }

    .text-block .tm {
        top: 12.5vh;
        right: -3vw;
    }


    /*Officer Adjustment-----------------------*/
    #officer-img {
        width: 50%;
        margin: -21vh auto 0 auto;
    }

    /*Half-circle Adjustment-----------------------*/
    #Tagline {
        margin: -12vh auto 0 auto;
    }


    /*Mission Adjustment-----------------------*/
    .mission-gif > img {
        height: 30vh;
        margin-top: 20px;
        margin-bottom: -20px;
    }

    .our-text {
        left: 30px;
    }

    .mission-text {
        margin-bottom: 0px;
    }

    .mission-right p {
        font-size: 1rem;
    }


    /*Kids Adjustment-----------------------*/
    #kid-1,
    #kid-2,
    #kid-3,
    #kid-4 {
        height: 100vh;
    }

    .img-kid1,
    .img-kid2,
    .img-kid3,
    .img-kid4 {
        height: 50%;
    }

    .kid-group4 .age-number-style1-3,
    .age-number-style1-3 {
        top: -2vh;
    }

    .kid-group4 .years-style1-3,
    .years-style1-3 {
        top: -8vh;
    }

    .arrow-group1,
    .arrow-group2,
    .arrow-group3,
    .arrow-group4 {
        top: -12vh;
    }

    .ar3 {
        font-size: 2.5rem;
    }

    .ar2 {
        font-size: 2rem;
    }

    .ar1 {
        font-size: 1.5rem;
    }

    .kid-overlay-menu {
        left: -30px;
        width: 30vw !important;
        margin-bottom: 5px;
    }

    .overlay-inner .overlay-right {
        overflow: scroll;
        justify-content: flex-start;
        padding-bottom: 5px;
    }

    .overlay-left img {
        padding-top: 55%;
    }

    .kid-overlay-menu .komc1 p {
        font-size: .8rem !important;
        padding: 5px 1px;
    }

    .kid-overlay-menu > div {
        padding: 3px 5px;
    }

    .komc2,
    .komc3,
    .komc4,
    .komc5 {
        font-size: .85rem;
    }

    .komc5 {
        border-bottom: none !important;
    }

    .ko1-prog {
        margin-top: 70px;
        margin-bottom: 50px;
    }

    .ko1-prog p:first-child {
        font-size: 1rem;
    }

    .ko1-prog p:nth-child(3),
    .ko1-prog p:nth-child(4) {
        font-size: .9rem;
    }

    #kid-4 {
        text-align: center;
    }

    #kid4-overlay .overlay-inner .overlay-right .ko1-approach {
        margin-bottom: 70px;
    }

    .kid1-program,
    .kid3-program {
        margin-bottom: 10vh;
    }

    .ko1-issues h2,
    .ko1-psychology h2,
    .ko1-approach h2 {
        font-size: 1.75rem;
    }

    .ko1-issues p,
    .ko1-psychology p,
    .ko1-approach p {
        font-size: .9rem;
        line-height: 1.3;
    }






    .overlay-left .close-btn {
        font-size: .9rem;
    }


    /*Info-cards Adjustment-----------------------*/
    #info-cards {
        margin-bottom: 10vh;
    }

    #about-content,
    #prog-content,
    #faq-content,
    #blog-content,
    #contact-content {
        justify-content: flex-start;
        padding-bottom: 0;
    }

    #about-content .left-part,
    #prog-content .left-part,
    #faq-content .left-part,
    #blog-content .left-part,
    #contact-content .left-part {
        flex: 1;
        margin-bottom: 20px;
    }

    #about-content .right-part,
    #prog-content .right-part,
    #faq-content .right-part,
    #blog-content .right-part,
    #contact-content .right-part {
        flex: 1;
    }

    #info-cards .card .card-content .left-image {
        width: 40%;
    }
    
    #about-content .left-part {
        margin-bottom: 5px;
    }

    #about-content .right-part p {
        font-size: .9rem;
        line-height: 1.5;
        margin-top: 5px;
    }
    
    #prog-content .right-part #destiny{
        margin-bottom: 20px !important;
    }
    
        #prog-content .left-part {
        margin-bottom: 0px;
    }
    
    .prog-right-child{
        margin-top: 1.5vh;
        margin-bottom: 1.5vh;
    }


    .prog-right-child p {
        font-size: .7rem;
    }

    .prog-right-child span {
        font-size: .7rem;
    }

    .prog-right-child img {
        height: 3vh;
    }

    #prog-content .right-part .ko-br-logo {
        margin-top: 20px;
        margin-bottom: 10px;
    }
    
    #prog-content .right-part .ko-br-logo{
        display: none;
    }

    #faq-content .right-part,
    #blog-content .right-part {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .faq-list {
        max-height: inherit;
    }

    .faq-answer-content h3 {
        font-size: .8rem;
    }


    #coming-soon {
        margin-top: 60px;
    }


    #blog-content .right-part .ko-br-logo {
        margin-top: 60px;
    }
    
    .faq-list{
        margin-bottom: 0;
    }
    
        .faq-question {
        font-size: .9rem;
    }
    
        .faq-answer-content h3 {
        font-size: .9rem;
    }

    .faq-answer-content p {
        font-size: .9rem;

    }

    .faq-answer-content .faq-close-btn {
        font-size: .8rem;
    }
    
    #coming-soon{
        margin-top: 0px;
        padding-bottom: 30px;
    }
    
        #contact-content .left-part {
        margin-bottom: 0px;
    }
    
        #contact-content .right-part p {
        font-size: .8rem;
    }
    
        #contact-content .right-part .ko-br-logo{
        display: none;
    }
    
    .contact-mobile,
.contact-email,
.contact-address {
    margin-bottom: 2vh;
    }
    
    
        .ko-br-logo {
        position: relative;
        top: auto;
        bottom: auto;
        left: auto;
        right: auto;
    }
    
    .card .close-btn{
        font-size: 1rem;
    }


    /*Footer Adjustment-----------------------*/
    footer p {
        font-size: .45rem;
    }
}