#about-page {

    #about-nav-link {
        color: var(--gold) !important;
    };

#latest-about {
        max-width: 100%;
        background-color: #f4f4f4;

        .flex_container {
            display: flex;
            max-width: 1200px;
            flex-wrap: wrap;
            justify-content: center;
            margin: 0 auto;

            .heading {
                color: var(--blue);
            };
        };

        .space_heading {
            padding-top: 70px;
        }

        .grid_container {
            display: grid;
            justify-content: center;
            max-width: 1200px;
            margin: 0 auto;

            .text_content {
                .blue_last_paragraph {
                    font-weight: 700;
                    font-size: 18px;
                    color: var(--dark-blue);
                    line-height: 24px;
                }
            }

        };

        @media screen and (min-width: 320px) {
            .flex_container {
                .heading {
                    max-width: 200px;
                    text-align: center;
                }
            }

            .grid_container {
                grid-template-columns: 1fr;
                gap: 25px;

                .text_content {
                    .paragraph {
                        text-align: left;
                    }
                }

                .text_grid_reverse {
                    order: 1;
                }

                .image_grid_reverse {
                    order: 2;
                }

                .image_container {
                    max-width: 100%;
                    .image_normal {
                        max-width: 100%;
                    }
                };
            };
        }

        @media screen and (min-width: 365px) {

            .flex_container {
                .heading {
                    max-width: 100%;
                }
            }

        }

        @media screen and (min-width: 767px) {

            .grid_container {
                grid-template-columns: 720px;
                gap: 25px;

                .image_container {
                    max-width: 100%;
                    .image_normal {
                        max-width: 100%;
                    }
                };
            };
        }

        @media screen and (min-width: 1024px) {
            .flex_container {
            .heading {
                line-height: 20px;
            }
        };

            .grid_container {
                grid-template-columns: 50% 450px;
                gap: 50px;

                .text_content {
                    .paragraph {
                        text-align: justify;
                    }
                }

                .image_container {
                    max-width: 100%;
                    .image_normal {
                        max-width: 100%;
                        margin-top: 2px;
                    }
                };

                .text_grid_reverse {
                    order: 2;
                }

                .image_grid_reverse {
                    order: 1;
                }
            };
        }

        @media screen and (min-width: 1200px) {
            .grid_container {
                grid-template-columns: 50% 45%;
                gap: 60px;

                .image_container {
                    max-width: 100%;
                    .image_normal {
                        max-width: 100%;
                    }
                };
            };
        }

        @media screen and (min-width: 1275px) {
            .grid_container {
                grid-template-columns: 50% 45%;
                gap: 60px;

                .image_container {
                    max-width: 100%;
                    .image_normal {
                        max-width: 100%;
                    }
                };
            };
        }

    };

    #latest-what {
        max-width: 100%;
        background-color: #00224e;

        .flex_container_one {
            display: flex;
            max-width: 1200px;
            flex-wrap: wrap;
            justify-content: center;
            margin: 0 auto;
            text-align: center;

            .heading {
                color: var(--white);
            };
        }

        .flex_container_two {
            max-width: 1200px;
            margin: 0 auto;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            flex-direction: row;

            .text_content {
                text-align: center;

                max-width: 550px;

                .subheading {
                    color: var(--gold);
                };

                .paragraph {
                    color: var(--white);
                }
            };
        };

        @media screen and (min-width: 320px) {
            .flex_container_two {
                gap: 30px;
                .text_content {
                    max-width: 450px;
                }
            }
        }

         @media screen and (min-width: 767px) {
            .flex_container_two {
                .text_content {
                    max-width: 550px;
                }
            }
        }

        @media screen and (min-width: 1024px) {
            .flex_container_two {
                .text_content {
                    max-width: 420px;
                }
            }
        }

        @media screen and (min-width: 1200px) {
            .flex_container_two {
                .text_content {
                    max-width: 500px;
                }
            }
        }

        @media screen and (min-width: 1275px) {

            .flex_container_two {
                gap: 60px;
                .text_content {
                    max-width: 550px;
                }
            }
        };
    }

    #latest-achievements {
        max-width: 100%;
        background-color: #f4f4f4;

        .heading {
            color: var(--blue);
            text-align: center
        };

        .flex_container {
            display: flex;
            max-width: 1200px;
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            margin: 0 auto;

            li {
                list-style-type: initial;
                margin-left: 18px;
                font-weight: 700;
                color: var(--dark-blue);
            }

            .large_text {
                font-weight: 700;
                font-size: 22px;
                color: var(--black);
                line-height: 28px;
            }
        };

    };

    #latest-vision-and-mission {
        max-width: 100%;
        background-image: url(../assets/images/about-vision-mission-bg.webp);
        background-repeat: no-repeat;
        background-size: cover;
        background-color: rgba(0, 0, 0, 0.1);
        background-blend-mode: darken;
        background-position: center;

        .flex_container {
            display: flex;
            max-width: 1200px;
            flex-wrap: wrap;
            justify-content: center;
            margin: 0 auto;
            gap: 50px;

            .section_block {
                background-color: rgba(0, 34, 78, 0.75);
                overflow: hidden;
                padding: 30px 25px;

                .heading {
                    color: var(--gold);
                    text-align: center;
                };

                .paragraph {
                    max-width: 480px;
                    margin: 0 auto;
                    color: var(--white);
                }

                .large_bold {
                    font-weight: 700;
                }
            }

        }

        @media screen and (min-width: 320px) {

            .flex_container {
                .section_block {
                    width: 280px;
                    height: 420px;

                    .paragraph {
                        text-align: center;
                    }

                    .large_bold {
                        font-size: 17.6px;
                        line-height: 24px;
                    }
                }

                .vision_block {
                    height: 290px;
                }
            }
        };

        @media screen and (min-width: 338px) {
            .flex_container {
                .section_block {
                    height: 360px;
                }

                .vision_block {
                    height: 270px;
                }
            }
        }

        @media screen and (min-width: 375px) {
            .flex_container {
                .section_block {
                    width: 320px;
                    height: 390px;

                    .large_bold {
                        font-size: 21px;
                        line-height: 27px;
                    }
                }

                .vision_block {
                    height: 280px;
                }
            }
        }

        @media screen and (min-width: 425px) {
            .flex_container {
                .section_block {
                    width: 380px;
                    height: 350px;
                }

                .vision_block {
                    height: 250px;
                }
            }
        }

        @media screen and (min-width: 767px) {
            .flex_container {
                .section_block {
                    width: 600px;
                    height: 280px;
                }
            }
        }

        @media screen and (min-width: 1024px) {
            .flex_container {
                .section_block {
                    width: 400px;
                    height: 320px;
                    .heading {
                        line-height: 20px;
                    };
                }
            }
        };

        @media screen and (min-width: 1065px) {
            .flex_container {
                .section_block {
                    width: 450px;
                    height: 300px;
                }
            }
        }

        @media screen and (min-width: 1200px) {

            .flex_container {
                .section_block {
                    width: 500px;
                    height: 300px;
                }
            }
        }

        @media screen and (min-width: 1265px) {

            .flex_container {
                .section_block {
                    width: 550px;
                    height: 280px;
                }
            }
        }

    };

    #latest-team {

    max-width: 100%;
    background-color: #00224e;
    color: var(--white);

    .flex_container_team {
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
    }

    .paragraph {
        max-width: 1180px;
        color: var(--white);
    };

    .grid_container {
        display: grid;
        justify-content: center;
        align-items: center;
        text-align: center;
        gap: 40px;
        padding-top: 40px;

        .team_card {
            background-color: var(--dark-blue);
            padding: 20px 0 20px 0;
            box-shadow: 0px 0px 5px 5px var(--light-blue);
            display: flex;
            flex-direction: column;
            flex-wrap: wrap;
            color: #fff;

            .team_name {
                font-weight: 700;
                padding-bottom: 12px;
                padding-top: 16px;
                font-size: 16px;
            }

            .divider {
                width: 40px;
                height: 3px;
                background: var(--light-gold);
                margin: 0 auto;
            }

            .team_role {
                padding-top: 15px;
                padding-bottom: 10px;
            }


            .image_normal {
                max-width: 200px;
                border-radius: 50%;
                background: #e5e5e5;
                border: solid 5px var(--light-blue);
        };
        };

    };

    @media screen and (min-width: 320px) {
        .grid_container {
            grid-template-columns: 250px;

            .team_card {
                width: 250px;
                height: 385px;

                .text_content {
                    .team_role {
                        font-size: 13px;
                        padding-left: 10px;
                        padding-right: 10px;
                    };

                    .team_contact{
                        font-size: 12px;
                        padding-left: 10px;
                        padding-right: 10px;
                    };
                };
            }
        };
    };

    @media screen and (min-width: 425px) {
        .grid_container {
            grid-template-columns: 300px;

            .team_card {
                width: 300px;
            }
        };
    };

    @media screen and (min-width: 767px) {
        .grid_container {
            grid-template-columns: repeat(2, 300px); 
            .team_card {
                width: 300px;
                height: 360px;

                .text_content {
                    .team_role {
                            font-size: 14px;
                    };

                    .team_contact{
                            font-size: 13px;
                    };
                };
            };
        };
    };

    @media screen and (min-width: 1024px) {
        .grid_container {
            grid-template-columns: repeat(2, 450px); 

            .team_card {
                width: 450px;
                height: 360px;
            }
        };
    };

    @media screen and (min-width: 1200px) {
        .grid_container {

            .team_card {
                width: 450px;
                height: 370px;
            };

            .team_card {

                .text_content {
                    .team_role {
                            font-size: 15px;
                    };

                    .team_contact{
                            font-size: 14px;
                    };
                };
            };
        };
    };
};

}