@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Unkempt:wght@400;700&display=swap');

* {
    /* margin: 0px;
    padding: 0px; */
    box-sizing: border-box;
    /* background-color: #131313; */
    font-family: 'Montserrat', sans-serif;
}

::selection {  /* Set colors for content selection */
    color: #32dcdc;
    background: none;
}

body { /* CHILDS: #header-banner-div, #main-div, #footer-div*/
    margin: 0px;
    padding: 0px;
    display: flex;
    flex-direction: row;
    width: 100%;
    /* min-height: 100px; */
    height: 100%;
}

    /* Original background color --> background-color: #284B85; */
    /* -webkit-linear-gradient --> is for Chrome 10-25, Safari 5.1-6 */
    /* linear-gradient         --> is for W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

    .body-look {
        background: -webkit-linear-gradient(to right, #284b85, #073462);
        background: linear-gradient(to right, #284b85, #073462);
    }

    #main-div { /* CHILDS: #sidebar-div, #bodyarea-div, #form-div */
        display: flex;
        flex-direction: column;
        width: 100%;
        width: 97.66vw;
        /* min-height: 400px; */
        height: 100%;
        /* justify-content: space-between; <-- apparently not necessary*/
    }


        .section1 {
            display: flex;
            flex-direction: column;
            /* background: #ade0b5; */
            /* padding-left: 100px;
            padding-right: 0px;
            padding-top: 0px; */
            padding-top: 50px;
            padding-top: 3.26vw;
            margin-bottom: 50px;
            margin-bottom: 3.26vw;
            align-items: center;
            justify-content: left;
            width:fit-content;
            height: max-content;
        }

            #titles {
                display: flex;
                flex-direction: column;
                align-items: flex-end;
                font-family: Georgia, 'Times New Roman', Times, serif;
                font-weight: bold;
                padding-left: 80px;
                /* padding-top: 50px; */
                margin-top: 20px;
            }

                #title1 {
                    font-family: 'Montserrat', sans-serif;
                    /* font-size: 95px; <-- Medida original */
                    font-size: 6.18vw;
                    /* font-size: calc(95vw / var(--appvw)); */

                    /* font-size: clamp(1.5rem, 7.23vw, 9rem); */
                    color: #2a85a5;
                }
                #title2 {
                    font-family: 'Montserrat', sans-serif;
                    /* font-size: 60px; <-- Medida original */
                    font-size: 3.91vw;
                    color: #5777af;
                    font-style: oblique;
                    margin-top: 15px;
                }
                #title3 {
                    font-family: 'Montserrat', sans-serif;
                    /* font-size: 90px; <-- Medida original */
                    font-size: 5.86vw;
                    color: #84a9cf;
                    margin-top: 15px;
                }
                #title4 {
                    font-family: Georgia, 'Times New Roman', Times, serif;
                    /* font-size: 20px; <-- Medida original */
                    font-size: 1.3vw;
                    color: #0c0c0c;
                    font-style: oblique;
                    text-align: right;
                    padding-top: 15px;
                }


        .section2 {
            display: flex;
            flex-direction: row;
            width: 100%;
            /* height: 100px; */
            height: auto;
            font-family: 'Montserrat', sans-serif;
            font-size: 20px;
            font-size: 1.3vw;
            color: #ffffff;
            /* line-height: 12px; */
            margin-top: 30px;
            margin-top: 1.95vw;
            margin-bottom: 50px;
            margin-bottom: 3.26vw;
            margin-left: 80px;
            margin-left: 5.21vw;
            align-items: center;
            justify-content: left;

        }

        @media (max-width: 1000px) {

            .section1 {
                margin-top: 40px;
            }

                #titles {
                    align-items: center;
                    padding-left: 40px;
                }

            .section2 {
                margin-left: 0px;
                margin-bottom: 50px;
                justify-content: center;
            }


        }

            .section2-isotipo {
                margin-right: 10px;
            }
                .section2-isotipo img {
                    width: 104px;
                    width: 6.77vw;
                    width: 6.5rem;
                    width: clamp(3.64rem, 6.77vw, 6.5rem);

                    height: 77px;
                    height: 5.01vw;
                    height: 4.813rem;
                    height: clamp(2.695rem, 5.01vw, 4.813rem);
                }
        
            .section2-texts {
                display: flex;
                flex-direction: column;
                width: fit-content;
                height: 81px;
                /* height: 43px; */
                height: clamp(2.835rem, 5.2734vw, 5.063rem);
                justify-content: space-between;
            }

            .isotipo-logotipo {
                font-size: 65px;
                font-size: clamp(2.275rem, 4.232vw, 4.063rem);
                line-height: 55px;
                /* line-height: 27px; */
                line-height: clamp(1.925rem, 3.5807vw, 3.438rem);
            }
        
                .isotipo-lema {
                    padding-left: 10px;
                    padding-left: clamp(0.35rem, 0.6510vw, 0.625rem);
                    font-size: 18px;
                    font-size: clamp(0.63rem, 1.1719vw, 1.125rem);
                    color: #fff;
                }


        .section3 {
            display: flex;
            flex-direction: column;
            width: 100%;
            min-height: 600px;
            min-height: 39.06vw;
            margin-top: 50px;
            margin-top: 3.26vw;
            margin-bottom: 50px;
            align-items: flex-start;
            justify-content: center;
        }

            .container-legend-section3-1 {
                width: 70%;
                height: 100px;
                height: 6.51vw;
                display: flex;
                flex-direction: row;
                justify-content: left;
                align-items: center;
                margin-left: 100px;
                margin-left: 6.51vw;
            }

            .container-legend-section3-2 {
                width: 60%;
                height: auto;
                margin-top: 50px;
                margin-top: 3.26vw;
                margin-left: 50px;
                margin-left: 3.26vw;

                display: grid;
                grid-template-columns: 600px 550px;
                grid-template-columns: 39.06vw 35.81vw;
                grid-template-rows: auto 100px;
                grid-template-rows: auto 6.51vw;
                grid-row-gap: 10px;
                grid-row-gap: 0.65vw;
            }

                .container-legend-section3-2-1 {
                    grid-column-start: 1;
                    grid-column-end: 2;
                    grid-row-start: 1;
                    grid-row-end: 3;
                }

                    .container-legend-section3-2-1 {
                        display: flex;
                        padding-right: 50px;
                        padding-right: 3.26vw;
                        justify-content: flex-end;
                    }

                .container-legend-section3-2-2 {
                    grid-column-start: 2;
                    grid-column-end: 3;
                    grid-row-start: 1;
                    grid-row-end: 2;
                }
                .container-legend-section3-2-3 {
                    grid-column-start: 2;
                    grid-column-end: 3;
                    grid-row-start: 2;
                    grid-row-end: 3;
                }
            
            
            .container-legend-section3-3 {
                width: 100%;
                height: 100px;
                height: 6.51vw;
                display: flex;
                flex-direction: row;
                justify-content: center;
                align-items: center;
                margin-top: 50px;
                margin-top: 3.26vw;
                margin-right: 300px;
                margin-right: 19.53vw;
            }

            .container-legend-section3-1 p,
            .container-legend-section3-3 p,
            .container-legend-section3-4 p {
                font-family: 'Montserrat', sans-serif;
                font-size: 35px;
                font-size: 2.28vw;
                font-size: clamp(1.125rem, 2.28vw, 2.188rem);
                font-weight: bolder;
                padding: 0px 10px 0px 10px;
                padding: 0vw 0.65vw 0vw 0.65vw;
            }

            .container-legend-section3-2-1 p {
                font-family: 'Montserrat', sans-serif;
                font-size: 35px;
                font-size: 2.28vw;
                font-size: clamp(1rem, 3vw, 2.25rem);
                font-weight: bolder;
            }
            .container-legend-section3-2-2 p {
                font-family: "Merriweather", serif;
                font-weight: 300;
                font-style: normal;
                font-size: 35px;
                font-size: 2.28vw;
                font-size: clamp(1rem, 3vw, 2.25rem);
                font-weight: normal;
                font-style: italic;
            }

            .container-legend-section3-2-3 p {
                font-family: 'Montserrat', sans-serif;
                font-size: 15px;
                font-size: 1vw;
                font-size: clamp(0.5rem, 1.5vw, 1.13rem);
                font-weight: normal;
            }
            
            .container-legend-section3-1 p {
                color: #2e91f3;
            }
            
            .container-legend-section3-2-1 p,
            .container-legend-section3-2-2 p {
                color: #84a9cf;
            }
            
            .container-legend-section3-2-3 p {
                color: #0a0a0a;
                color: goldenrod;
            }
            
            .container-legend-section3-3 p {
                color: #e4e8ec;
            }

            #container-legend-section3-3-2 {
                font-family: "Unkempt", serif; 
                font-weight: 600; 
                font-style: normal; 
                font-size: 50px;
                font-size: 3.26vw;
                font-size: clamp(1rem, 3vw, 2.25rem);
                font-size: clamp(1.43rem, 4.28vw, 3.21rem);
            }

        @media (max-width: 1000px) {

            .container-legend-section3-1 {
                width: 70%;
                display: flex;
                flex-direction: row;
                justify-content: center;
                align-items: center;
                margin-left: 50px;
                /* margin-left: 6.51vw; */
            }

            .container-legend-section3-2 {
                /* width: auto;
                height: auto; */
                margin-top: 50px;
                margin-left: 20px;

                display: grid;
                grid-template-columns: 70px 300px;
                grid-template-rows: auto 50px;
                grid-row-gap: 10px;
                grid-row-gap: 0.65vw;
            }

                .container-legend-section3-2-1 {
                    grid-column-start: 1;
                    grid-column-end: 2;
                    grid-row-start: 1;
                    grid-row-end: -1;
                }

                    .container-legend-section3-2-1 {
                        display: flex;
                        padding-right: 10px;
                        justify-content: flex-end;
                    }

                .container-legend-section3-2-2 {
                    grid-column-start: 2;
                    grid-column-end: -1;
                    grid-row-start: 1;
                    grid-row-end: 2;
                }
                .container-legend-section3-2-3 {
                    grid-column-start: 2;
                    grid-column-end: -1;
                    grid-row-start: 2;
                    grid-row-end: -1;
                }


        }
        

        .section4 {
            display: flex;
            flex-direction: row;
            width: 100%;
            margin-top: 50px;
            margin-top: 3.26vw;
            justify-content: center;
            align-items: center;
        }

            .section4-grid {
                display: grid;
                grid-template-columns: 200px 170px 130px 170px 130px 170px 200px;
                grid-template-columns: 13.02vw 11.07vw 8.46vw 11.07vw 8.46vw 11.07vw 13.02vw;
                grid-template-rows: 50px 120px 100px 120px 100px 120px 50px;
                grid-template-rows: 3.26vw 7.81vw 6.51vw 7.81vw 6.51vw 7.81vw 3.26vw;
            }

                .container-border {
                    /* border: 0.5px solid red; */
                    border: none;
                }

                .section4-text1,
                .section4-text2 {
                    width: 100%;
                    height: 100%;
                    display: flex;
                    flex-direction: column;
                    margin: 40px;
                    margin: 2.6vw;
                }

                .section4-text1 {
                    grid-column-start: 1;
                    grid-column-end: 3;
                    grid-row-start: 3;
                    grid-row-end: 6;
                }

                .section4-text2 {
                    grid-column-start: 5;
                    grid-column-end: 8;
                    grid-row-start: 3;
                    grid-row-end: 6;
                }

                    .section4-text1 p,
                    .section4-text2 p {
                        font-family: 'Montserrat', sans-serif;
                        font-size: 15px;
                        font-size: 0.98vw;
                        line-height: 18px;
                        line-height: 1.17vw;
                        font-weight: 500;
                        text-shadow: 4px 4px 2px rgba(0,0,0,0.6);
                        padding-bottom: 10px;
                        padding-bottom: 0.65vw;
                    }

                    .section4-text1 p {
                        color: #c5cdd5;
                        color: #d1dfed;
                        /* color: #e7c819; */
                    }

                    .section4-text1 p:hover {
                        color: #e7c819;
                        cursor: default;
                    }

                    .section4-text2 p {
                        color: #c5cdd5;
                        color: #d1dfed;
                        /* color: #29b5c1; */
                    }

                    .section4-text2 p:hover {
                        color: #29b5c1;
                        cursor: default;
                    }

                    .section4-text1-symbol {
                        color:rgb(251, 23, 38); 
                        font-weight: 600; 
                        font-size: 17px;
                        font-size: 1.11vw;
                    }

                    .section4-text2-symbol {
                        color: rgb(44, 186, 37); 
                        font-weight: 600; 
                        font-size: 1.11vw;
                    }


                .container-uml-fig-una-idea,
                .container-uml-fig-revisamos,
                .container-uml-fig-ofrecemos,
                .container-uml-fig-decidimos,
                .container-uml-fig-un-resultado,
                .container-uml-fig-flecha-der-1,
                .container-uml-fig-flecha-der-2,
                .container-uml-fig-flecha-aba-1,
                .container-uml-fig-flecha-aba-2,
                .cualquiera {
                    width: 100%;
                    height: 100%;
                    display: grid;
                    justify-items: center;
                    align-items: center;
                }
            
                .container-uml-fig-una-idea {
                    grid-column-start: 2;
                    grid-column-end: 3;
                    grid-row-start: 2;
                    grid-row-end: 3;
                }

                .container-uml-fig-flecha-der-1 {
                    grid-column-start: 3;
                    grid-column-end: 4;
                    grid-row-start: 2;
                    grid-row-end: 3;
                }

                .container-uml-fig-revisamos {
                    grid-column-start: 4;
                    grid-column-end: 5;
                    grid-row-start: 2;
                    grid-row-end: 3;
                }

                .container-uml-fig-flecha-aba-1 {
                    grid-column-start: 4;
                    grid-column-end: 5;
                    grid-row-start: 3;
                    grid-row-end: 4;
                }

                .container-uml-fig-ofrecemos {
                    grid-column-start: 4;
                    grid-column-end: 5;
                    grid-row-start: 4;
                    grid-row-end: 5;
                }

                .container-uml-fig-flecha-aba-2 {
                    grid-column-start: 4;
                    grid-column-end: 5;
                    grid-row-start: 5;
                    grid-row-end: 6;
                }

                .container-uml-fig-decidimos {
                    grid-column-start: 4;
                    grid-column-end: 5;
                    grid-row-start: 6;
                    grid-row-end: 7;
                }

                .container-uml-fig-flecha-der-2 {
                    grid-column-start: 5;
                    grid-column-end: 6;
                    grid-row-start: 6;
                    grid-row-end: 7;
                }

                .container-uml-fig-un-resultado {
                    grid-column-start: 6;
                    grid-column-end: 7;
                    grid-row-start: 6;
                    grid-row-end: 7;
                }

                    #una-idea,
                    #revisamos,
                    #ofrecemos,
                    #decidimos,
                    #un-resultado {
                        width: 90%;
                        filter: drop-shadow(4px 4px 2px #171718);
                    }

                    #fig1,
                    #fig2,
                    #fig3,
                    #fig4,
                    #fig5,
                    #fig11,
                    #fig12,
                    #fig13,
                    #fig14 {
                        width: 100%;
                        height: 100%;
                        display: grid;
                        justify-items: center;
                        align-items: center;
                    }

                    #flecha-der-1,
                    #flecha-der-2 {
                        width: 80px;
                        width: 5.21vw;
                        filter: drop-shadow(4px 4px 2px #171718);
                    }

                    #flecha-aba-1,
                    #flecha-aba-2 {
                        height: 80px;
                        height: 5.21vw;
                        filter: drop-shadow(4px 4px 2px #171718);
                    } 

        @media (max-width: 1000px) {

            .section4 {
                display: flex;
                flex-direction: row;
                width: 100%;
                margin-top: 50px;
                margin-top: 3.26vw;
                margin-left: 50px;
                margin-left: 3.26vw;
                justify-content: left;
                align-items: center;
            }

            .section4-grid {
                display: grid;
                /* grid-template-columns: 200px 170px 130px 170px 130px 170px 200px; */
                grid-template-columns: 50px 170px 50px 1050px 50px;
                grid-template-columns: 3.26vw 11.07vw 3.26vw 68.35vw 3.26vw;
                grid-template-rows: 50px 120px 100px 120px 100px 120px 100px 120px 100px 120px 50px;
                grid-template-rows: 3.26vw 7.81vw 6.51vw 7.81vw 6.51vw 7.81vw 6.51vw 7.81vw 6.51vw 7.81vw 3.26vw;
            }

                .container-border {
                    /* border: 0.5px solid red; */
                    border: none;
                }

                .section4-text1,
                .section4-text2 {
                    width: 100%;
                    height: 100%;
                    display: flex;
                    flex-direction: column;
                    margin: 40px;
                    margin: 2.6vw;
                }

                .section4-text1 {
                    grid-column-start: 4;
                    grid-column-end: 5;
                    grid-row-start: 1;
                    grid-row-end: 5;
                }

                .section4-text2 {
                    grid-column-start: 4;
                    grid-column-end: 5;
                    grid-row-start: 7;
                    grid-row-end: 11;
                }

                    .section4-text1 p,
                    .section4-text2 p {
                        font-family: 'Montserrat', sans-serif;
                        font-size: 15px;
                        font-size: 0.98vw;
                        font-size: 1.95vw;
                        line-height: 18px;
                        line-height: 1.17vw;
                        line-height: 2.6vw;
                        font-weight: 500;
                        text-shadow: 4px 4px 2px rgba(0,0,0,0.6);
                        padding-bottom: 10px;
                        padding-bottom: 0.65vw;
                    }

                    .section4-text1 p {
                        color: #c5cdd5;
                        color: #d1dfed;
                        /* color: #e7c819; */
                    }

                    .section4-text1 p:hover {
                        color: #e7c819;
                        cursor: default;
                    }

                    .section4-text2 p {
                        color: #c5cdd5;
                        color: #d1dfed;
                        /* color: #29b5c1; */
                    }

                    .section4-text2 p:hover {
                        color: #29b5c1;
                        cursor: default;
                    }

                    .section4-text1-symbol {
                        color:rgb(251, 23, 38); 
                        font-weight: 600; 
                        font-size: 17px;
                        font-size: 1.11vw;
                        font-size: 1.95vw;
                    }

                    .section4-text2-symbol {
                        color: rgb(44, 186, 37); 
                        font-weight: 600; 
                        font-size: 1.11vw;
                        font-size: 1.95vw;
                    }


                .container-uml-fig-una-idea,
                .container-uml-fig-revisamos,
                .container-uml-fig-ofrecemos,
                .container-uml-fig-decidimos,
                .container-uml-fig-un-resultado,
                .container-uml-fig-flecha-der-1,
                .container-uml-fig-flecha-der-2,
                .container-uml-fig-flecha-aba-1,
                .container-uml-fig-flecha-aba-2,
                .cualquiera {
                    width: 100%;
                    height: 100%;
                    display: grid;
                    justify-items: center;
                    align-items: center;
                }
            
                .container-uml-fig-una-idea {
                    grid-column-start: 2;
                    grid-column-end: 3;
                    grid-row-start: 1;
                    grid-row-end: 3;
                }

                .container-uml-fig-flecha-der-1 {
                    grid-column-start: 2;
                    grid-column-end: 3;
                    grid-row-start: 3;
                    grid-row-end: 4;
                }

                .container-uml-fig-revisamos {
                    grid-column-start: 2;
                    grid-column-end: 3;
                    grid-row-start: 4;
                    grid-row-end: 5;
                }

                .container-uml-fig-flecha-aba-1 {
                    grid-column-start: 2;
                    grid-column-end: 3;
                    grid-row-start: 5;
                    grid-row-end: 6;
                }

                .container-uml-fig-ofrecemos {
                    grid-column-start: 2;
                    grid-column-end: 3;
                    grid-row-start: 6;
                    grid-row-end: 7;
                }

                .container-uml-fig-flecha-aba-2 {
                    grid-column-start: 2;
                    grid-column-end: 3;
                    grid-row-start: 7;
                    grid-row-end: 8;
                }

                .container-uml-fig-decidimos {
                    grid-column-start: 2;
                    grid-column-end: 3;
                    grid-row-start: 8;
                    grid-row-end: 9;
                }

                .container-uml-fig-flecha-der-2 {
                    grid-column-start: 2;
                    grid-column-end: 3;
                    grid-row-start: 9;
                    grid-row-end: 10;
                }

                .container-uml-fig-un-resultado {
                    grid-column-start: 2;
                    grid-column-end: 3;
                    grid-row-start: 10;
                    grid-row-end: 11;
                }

                    #una-idea,
                    #revisamos,
                    #ofrecemos,
                    #decidimos,
                    #un-resultado {
                        width: 90%;
                        filter: drop-shadow(4px 4px 2px #171718);
                    }

                    #fig1,
                    #fig2,
                    #fig3,
                    #fig4,
                    #fig5,
                    #fig11,
                    #fig12,
                    #fig13,
                    #fig14 {
                        /* width: 100%; */
                        /* height: 100%; */
                        display: grid;
                        justify-items: center;
                        align-items: center;
                    }

                    #flecha-der-1,
                    #flecha-der-2,
                    #flecha-aba-1,
                    #flecha-aba-2 {
                        /* content:url("{% static '/waapp_images/flecha-aba.png' %}"); */
                        content:url("/static/waapp_images/flecha-aba.png");
                        height: 80px;
                        height: 5.21vw;
                        width: 60px;
                        width: 3.91vw;
                        filter: drop-shadow(4px 4px 2px #171718);
                    }

        }

        
        .wherein {
            margin: 50px 50px 30px 6.51vw;
            /* margin: 10px 3.26vw 1.95vw 20px; */
            padding: 20px 30px 20px 20px;
            padding: 1.30vw 1.95vw 1.30vw 1.3vw;
        }

            .wherein-container {
                display: grid;
                grid-template-columns: 20px 120px 20px 10px 700px 10px 20px 50px 300px 20px;
                grid-template-columns: 1.3vw 7.81vw 1.3vw 0.65vw 45.57vw 0.65vw 1.3vw 3.26vw 19.53vw 1.3vw;
                grid-template-rows: 35px 23px auto auto auto auto 200px 80px 30px 10px;
                grid-template-rows: 2.28vw 1.5vw auto auto auto auto 5.21vw 13.02vw 1.95vw 0.65vw;
            }

                .wherein-content {
                    grid-column-start: 3;
                    grid-column-end: 8;
                    grid-row-start: 2;
                    grid-row-end: 10;
                }
                .wherein-title-1 {
                    grid-column-start: 5;
                    grid-column-end: 6;
                    grid-row-start: 3;
                    grid-row-end: 4;
                }
                .wherein-legend-1 {
                    grid-column-start: 5;
                    grid-column-end: 6;
                    grid-row-start: 4;
                    grid-row-end: 5;
                }
                .wherein-title-2 {
                    grid-column-start: 5;
                    grid-column-end: 6;
                    grid-row-start: 5;
                    grid-row-end: 6;
                }
                .wherein-legend-2 {
                    grid-column-start: 5;
                    grid-column-end: 6;
                    grid-row-start: 6;
                    grid-row-end: 7;
                }
                .wherein-pictureframe-1 {
                    grid-column-start: 2;
                    grid-column-end: 9;
                    grid-row-start: 8;
                    grid-row-end: 9;
                }

                .towhom-pictureframe-1 {
                    grid-column-start: 9;
                    grid-column-end: 10;
                    grid-row-start: 1;
                    grid-row-end: 10;
                }

                .wherein-content {
                    background: #c3e3f6;
                    border-radius: 15px;
                }

                    .wherein-title {
                        width: 700px;
                        width: 45.57vw;
                        text-align: left;
                        padding-top: 20px;
                        padding-top: 1.3vw;
                        padding-bottom: 10px;
                        padding-bottom: 0.65vw;
                    }

                        .wherein-title p {
                            font-family: 'Montserrat', sans-serif;
                            font-size: 35px;
                            font-size: 2.28vw;
                            /*--------------------------------*/
                            font-size: calc(1.5vw + 0.7rem);
                            /*--------------------------------*/
                            font-weight: bolder;
                            color: #84a9cf;
                            /* color: #7a350e; */
                        }

                    .wherein-legend {
                        width: 700px;
                        width: 45.57vw;
                        text-align: left;
                        line-height: 20px;
                        /* line-height: 1.3vw; */
                        padding-bottom: 10px;
                        padding-bottom: 0.65vw;
                    }
                        .wherein-legend p {
                            font-family: 'Montserrat', sans-serif;
                            font-size: 20px;
                            font-size: 1.3vw;
                            /*--------------------------------*/
                            font-size: clamp(1rem, 1.25vw, 1.25rem);
                            /*--------------------------------*/
                            font-weight: bold;
                            color: #ffffff;
                            color: #878889;
                            color: #8a8e92;
                        }

                    .wherein-pictureframe {
                        display: flex;
                        flex-direction: column;
                        flex-wrap: wrap;
                        column-gap: 10px;
                        height: 200px;
                        width: fit-content;
                        justify-content: center;
                        align-items: center;
                        z-index: 5;
                    }

                        .wherein-pictureframe-1 img {
                            height: 200px;
                            height: 13.02vw;
                            box-shadow: 10px 10px 2px rgba(0,0,0,0.4);
                            box-shadow: 0.65vw 0.65vw 2px rgba(0,0,0,0.4);
                            border-radius: 10px;
                            border-radius: 0.65vw;
                        }

                    .towhom-pictureframe {
                        display: flex;
                        flex-direction: column;
                        row-gap: 10px;
                        width: 300px;
                        width: 19.53vw;
                        height: fit-content;
                        justify-content: center;
                        align-items: center;
                        z-index: 3;
                    }

                        .towhom-pictureframe-1 img {
                            height: 200px;
                            height: 13.02vw;
                            height: auto;
                            width: 300px;
                            width: 19.53vw;
                            box-shadow: 10px 10px 2px rgba(0,0,0,0.4);
                            box-shadow: 0.65vw 0.65vw 2px rgba(0,0,0,0.4);
                            border-radius: 10px;
                            border-radius: 0.65vw;
                        }

                        .towhom-pictureframe-1-hidden {
                            visibility: hidden;
                            display: none;
                        }

        @media (max-width: 1000px) {

            .wherein-container {
                display: grid;
                grid-template-columns: 5px 30px 50px 1000px 30px 200px 20px 20px;
                grid-template-columns: 0.33vw 1.95vw 3.26vw 65.1vw 1.95vw 13.02vw 1.3vw 1.3vw;
                grid-template-rows: 20px 45px 20px auto auto auto auto 10px 50px 50px 10px;
                grid-template-rows: 1.3vw 2.93vw 1.3vw auto auto auto auto 0.65vw 3.26vw 3.26vw 0.65vw;
            }

                .wherein-content {
                    grid-column-start: 2;
                    grid-column-end: 8;
                    grid-row-start: 2;
                    grid-row-end: 11;
                }
                .wherein-title-1 {
                    grid-column-start: 4;
                    grid-column-end: 5;
                    grid-row-start: 4;
                    grid-row-end: 5;
                }
                .wherein-legend-1 {
                    grid-column-start: 4;
                    grid-column-end: 5;
                    grid-row-start: 5;
                    grid-row-end: 6;
                }
                .wherein-title-2 {
                    grid-column-start: 4;
                    grid-column-end: 5;
                    grid-row-start: 6;
                    grid-row-end: 7;
                }
                .wherein-legend-2 {
                    grid-column-start: 4;
                    grid-column-end: 5;
                    grid-row-start: 7;
                    grid-row-end: 8;
                }
                .wherein-pictureframe-1 {
                    grid-column-start: 5;
                    grid-column-end: 7;
                    grid-row-start: 1;
                    grid-row-end: 11;
                }
                
                .towhom-pictureframe-1 {
                    grid-column-start: 4;
                    grid-column-end: 5;
                    grid-row-start: 10;
                    grid-row-end: 11;
                }
                
                .wherein-content {
                    background: #c3e3f6;
                    border-radius: 15px;
                }

    
                    .wherein-title {
                        width: 700px;
                        width: 45.57vw;
                        text-align: left;
                        padding-top: 20px;
                        padding-top: 1.3vw;
                        padding-bottom: 10px;
                        padding-bottom: 0.65vw;
                    }

                        .wherein-title p {
                            font-family: 'Montserrat', sans-serif;
                            font-size: 35px;
                            font-size: 2.28vw;
                            /*--------------------------------*/
                            font-size: calc(1.5vw + 0.7rem);
                            /*--------------------------------*/
                            font-weight: bolder;
                            color: #84a9cf;
                            /* color: #7a350e; */
                        }

                    .wherein-legend {
                        /* width: 700px; */
                        width: 65.1vw;
                        text-align: left;
                        line-height: 20px;
                        /* line-height: 1.3vw; */
                        padding-bottom: 10px;
                        padding-bottom: 0.65vw;
                    }
                        .wherein-legend p {
                            font-family: 'Montserrat', sans-serif;
                            font-size: 20px;
                            font-size: 1.3vw;
                            /*--------------------------------*/
                            font-size: clamp(1rem, 1.25vw, 1.25rem);
                            /*--------------------------------*/
                            font-weight: bold;
                            color: #ffffff;
                            color: #878889;
                            color: #8a8e92;
                        }

                    .wherein-pictureframe {
                        display: flex;
                        flex-direction: column;
                        row-gap: 10px;
                        height: auto;
                        /* width: fit-content; */
                        justify-content: center;
                        align-items: center;
                    }

                        .wherein-pictureframe-1 img {
                            height: auto;
                            width: 80px;
                            box-shadow: 10px 10px 2px rgba(0,0,0,0.4);
                            box-shadow: 0.65vw 0.65vw 2px rgba(0,0,0,0.4);
                            border-radius: 10px;
                            border-radius: 0.65vw;
                        }

                    .towhom-pictureframe {
                        display: flex;
                        flex-direction: row;
                        width: fit-content;
                        column-gap: 10px;
                        height: 200px;
                        height: 13.02vw;
                        justify-content: center;
                        align-items: center;
                        margin-left: 23px;
                    }
                        
                        .towhom-pictureframe-1 img {
                            height: auto;
                            width: 80px;
                            box-shadow: 10px 10px 2px rgba(0,0,0,0.4);
                            box-shadow: 0.65vw 0.65vw 2px rgba(0,0,0,0.4);
                            border-radius: 10px;
                            border-radius: 0.65vw;
                        }

                        .towhom-pictureframe-1-hidden {
                            visibility: visible;
                            display: flex;
                            flex-direction: row;
                            column-gap: 10px;

                        }


        }


        .showcase {
            margin: 30px 50px 30px 50px;
            padding: 50px 70px 20px 70px;
        }

            .showcase-container {
                display:flex;
                flex-direction: row;
                flex-wrap: wrap;
                row-gap: 15px;
                column-gap: 30px;
                width: auto;
                min-height: 600px;
                background: #245688;
                border-radius: 15px;
                justify-content: center;
                align-items: center;
                padding: 30px 0px 30px 0px;
            }

                .showcase-text {
                    display:flex;
                    flex-direction: column;
                    width: auto;
                    height: auto;
                    justify-content: center;
                    align-items: flex-start;
                }

                    .showcase-text p{
                        font-family: 'Montserrat', sans-serif;
                        font-size: 35px;
                        line-height: 25px;
                        font-weight: bolder;
                        color: #84a9cf;
                    }

                        .showcase-text p span.mod1 {
                            font-family: 'Montserrat', sans-serif;
                            font-size: 20px;
                            font-weight: bold;
                            color: #84a9cf;
                        }

                .showcase-content {
                    display: flex;
                    flex-direction: row;
                    flex-wrap: wrap;
                    row-gap: 15px;
                    column-gap: 20px;
                    width: fit-content;
                    height: fit-content;
                    justify-content: center;
                    align-items: center;
                }

                    .app-prev {
                        display: flex;
                        flex-direction: column;
                        width: auto;
                        justify-content: center;
                        align-items: center;
                    }

                        .app-prev-title {
                            padding-right: 8px; 
                            font-size: 12px; 
                            color: #c8c8c8; 
                            font-family: 'Montserrat'; 
                            font-weight: bold; 
                            text-shadow: 4px 4px 2px rgba(0,0,0,0.6);
                            padding-top: 8px;
                        }

                        .app-prev-image {
                            width: 250.75px;
                            height: 151.5px;
                            box-shadow: 4px 4px 2px rgba(0,0,0,0.6);
                        }

        @media (max-width: 1000px) {

            .showcase {
                margin: 20px 50px 20px 50px;
                padding: 10px 10px 10px 10px;
            }

        }
        
        .aboutus {
            margin: 30px 50px 30px 50px;
        }

            .aboutus-container {
                display:flex;
                flex-direction: row;
                flex-wrap: wrap;
                /* row-gap: 10px;
                width: auto; */
                width: clamp(450px, 100%, 1536px);
                width: clamp(25rem, 100vw, 96rem);
                min-height: 700px;
                /* background: #245688; */
                border-radius: 15px;
                justify-content: flex-end;
                /* justify-content: center; */
                align-items: center;
                padding: 0px 300px 0px 0px;
                /* margin-right: 100px; */
            }

                .aboutus-pictureframe-1 {
                    display: flex;
                    flex-direction: column;
                    flex-wrap: wrap;
                    /* row-gap: 10px; */
                    /* height: 200px; */
                    width: fit-content;
                    height: fit-content;
                    justify-content: center;
                    align-items: center;
                    margin-right: 50px;
                }

                    .aboutus-pictureframe-1 img {
                        height: 200px;
                        height: 13.02vw;
                        box-shadow: 10px 10px 2px rgba(0,0,0,0.4);
                        box-shadow: 0.65vw 0.65vw 2px rgba(0,0,0,0.4);
                    }

                .aboutus-text {
                    display: flex;
                    flex-direction: column;
                    flex-wrap: wrap;
                    row-gap: 20px;
                    min-height: 500px;
                    /* width: 600px; */
                    width: clamp(400px, 78%, 600px);
                    width: clamp(21.875rem, 39.0625vw, 37.5rem);
                    background: #c3d5ea;
                    background: #2a85a5;
                    border-radius: 15px;
                    justify-content: center;
                    align-items: center;
                    text-align: center;
                    padding: 20px 20px 20px 20px;
                }

                    .aboutus-text .title {
                        font-family: 'Montserrat', sans-serif;
                        font-size: 35px;
                        font-weight: bolder;
                        color: #84a9cf;
                    }

                    .aboutus-text .simpletext {
                        font-family: 'Montserrat', sans-serif;
                        font-size: 20px;
                        font-weight: bold;
                        color: #ffffff;
                    }

                    logo2 {
                        font-family: 'Raleway';
                        /* font-size: 20px; */
                        font-size: 40px;
                        font-weight: bold;
                    }

                        logo2.gradient-text {
                            /* Fallback: Set a background color. */
                            /* background-color: white; */
                            /* background-color: #284B85; */
                            background-color: red;
                            background-clip: text;

                            /* Create the gradient. */
                            background-image: linear-gradient(to right, #fcfcfc, #7ac2e7);
                            /* background-image: linear-gradient(to right, #7ac2e7, #0a5175); */
                            /* background-image: linear-gradient(to right, #6eb0f2, #074078); */
                            /* background-image: linear-gradient(to right, #fcfcfc, #69ec99); */
                            /* background-image: linear-gradient(to right, #fcfcfc, #284B85, #fcfcfc, #284B85); */
                            /* background-image: linear-gradient(45deg, #f3ec78, #af4261); */

                            /* Set the background size and repeat properties. */
                            background-size: 100%;
                            background-repeat: repeat;

                            /* Use the text as a mask for the background. */
                            /* This will show the gradient as a text color rather than element bg. */
                            -webkit-background-clip: text;
                            -webkit-text-fill-color: transparent; /* Chrome 10-25, Safari 5.1-6 */
                            -moz-background-clip: text;
                            -moz-text-fill-color: transparent;
                            -o-background-clip: text;
                            -o-text-fill-color: transparent;
                            -ms-background-clip: text;
                            -ms-text-fill-color: transparent;
                        }
        @media (max-width: 1000px) {

            .aboutus {
                margin: 30px 0px 30px 0px;
            }

            .aboutus-container {
                display:flex;
                flex-direction: row;
                justify-content: center;
                padding: 0px 0px 0px 0px;
            }

        }