@media screen and (min-width: 300px) {
    .heading {
        width: 100%;
        height: 300px;
        margin-top: 150px;
        background: url("../image/background-top.jpg");

        .its-cover {
            width: 100%;
            height: 100%;
            display: flex;
            background-color: rgba(53, 83, 94, 0.803);
            justify-content: center;
            align-items: center;
            color: #ffffff;
            padding-top: 100px;
            font-size: 20px;
        }
    }

    .about-top {
        width: 100%;
        height: fit-content;
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        grid-gap: 20px;
        background-color: var(--thm-primary);
        padding: 70px 15px 50px 15px;


        .about-left {
            width: 100%;
            height: fit-content;


            .pic-hold {
                width: 100%;
                height: fit-content;
                /* background-color: #515151; */
                position: relative;
                display: inline-block;


                img {
                    width: 300px;
                    height: 300px;
                    display: block;
                }

                .info {
                    width: 100%;
                    max-width: 350px;
                    display: flex;
                    justify-content: center;
                    background-color: rgb(255, 195, 0);
                    padding: 15px 30px;
                    font-size: 18px;
                    font-weight: 500;
                    position: absolute;
                    bottom: 50px;
                }
            }
        }

        .about-right {
            .contact-session {



                .top p {
                    font-size: 12px;
                    font-weight: 700;
                    color: rgb(255, 195, 0);
                }

                .top h2 {
                    width: 100%;
                    font-size: 25px;
                    font-weight: 700;
                    color: var(--thm-white);
                    margin-top: 15px;
                    line-height: 30px;
                    background: linear-gradient(to right, rgb(108, 152, 235), rgb(125, 70, 108), rgb(237, 85, 116));
                    color: transparent;
                    -webkit-background-clip: text;
                    background-clip: text;
                }

            }

            .down {
                margin-top: 35px;
                color: #ffffff;
                font-weight: 500;

            }
        }
    }

    .more-info {
        width: 100%;
        height: fit-content;
        background-color: var(--thm-primary);
        padding: 5px 15px 80px 15px;
        color: #ffffff;

        p {
            margin-bottom: 20px;
        }
    }

}

@media screen and (min-width: 350px) {
    .heading {
        width: 100%;
        height: 300px;
        background: url("../image/background-top.jpg");


        .its-cover {
            width: 100%;
            height: 100%;
            display: flex;
            background-color: rgba(53, 83, 94, 0.803);
            justify-content: center;
            align-items: center;
            color: #ffffff;
            padding-top: 100px;
            font-size: 20px;
        }
    }

    .about-top {
        width: 100%;
        height: fit-content;
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
        grid-gap: 20px;
        background-color: var(--thm-primary);
        padding: 70px 15px 50px 15px;


        .about-left {
            width: 100%;
            height: fit-content;


            .pic-hold {
                width: 100%;
                height: fit-content;
                /* background-color: #515151; */
                position: relative;
                display: inline-block;


                img {
                    width: 100%;
                    max-width: 550px;
                    height: 100%;
                    max-height: 550px;
                    display: block;
                }

                .info {
                    width: 100%;
                    max-width: 350px;
                    display: flex;
                    justify-content: center;
                    background-color: rgb(255, 195, 0);
                    padding: 15px 30px;
                    font-size: 18px;
                    font-weight: 500;
                    position: absolute;
                    bottom: 50px;
                }
            }
        }

        .about-right {
            .contact-session {



                .top p {
                    font-size: 15px;
                    font-weight: 700;
                    color: rgb(255, 195, 0);
                }

                .top h2 {
                    width: 100%;
                    font-size: 30px;
                    font-weight: 700;
                    color: var(--thm-white);
                    margin-top: 15px;
                    line-height: 40px;
                    background: linear-gradient(to right, rgb(108, 152, 235), rgb(125, 70, 108), rgb(237, 85, 116));
                    color: transparent;
                    -webkit-background-clip: text;
                    background-clip: text;
                }

            }

            .down {
                margin-top: 35px;
                color: #ffffff;
                font-weight: 500;

            }
        }
    }

    .more-info {
        width: 100%;
        height: fit-content;
        background-color: var(--thm-primary);
        padding: 5px 15px 80px 15px;
        color: #ffffff;

        p {
            margin-bottom: 20px;
        }
    }

}

@media screen and (min-width: 750px) {
    .heading {
        width: 100%;
        height: 300px;
        background: url("../image/background-top.jpg");


        .its-cover {
            width: 100%;
            height: 100%;
            display: flex;
            background-color: rgba(53, 83, 94, 0.803);
            justify-content: center;
            align-items: center;
            color: #ffffff;
            padding-top: 100px;
            font-size: 20px;
        }
    }

    .about-top {
        width: 100%;
        height: fit-content;
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(600px, 1fr));
        grid-gap: 20px;
        background-color: var(--thm-primary);
        padding: 70px 15px 50px 15px;


        .about-left {
            width: 100%;
            height: fit-content;


            .pic-hold {
                width: 100%;
                height: fit-content;
                /* background-color: #515151; */
                position: relative;
                display: inline-block;


                img {
                    width: 100%;
                    max-width: 550px;
                    height: 100%;
                    max-height: 550px;
                    display: block;
                }

                .info {
                    width: 100%;
                    max-width: 350px;
                    display: flex;
                    justify-content: center;
                    background-color: rgb(255, 195, 0);
                    padding: 15px 30px;
                    font-size: 18px;
                    font-weight: 500;
                    position: absolute;
                    bottom: 50px;
                }
            }
        }

        .about-right {
            .contact-session {



                .top p {
                    font-size: 15px;
                    font-weight: 700;
                    color: rgb(255, 195, 0);
                }

                .top h2 {
                    width: 100%;
                    font-size: 30px;
                    font-weight: 700;
                    color: var(--thm-white);
                    margin-top: 15px;
                    line-height: 40px;
                    background: linear-gradient(to right, rgb(108, 152, 235), rgb(125, 70, 108), rgb(237, 85, 116));
                    color: transparent;
                    -webkit-background-clip: text;
                    background-clip: text;
                }

            }

            .down {
                margin-top: 35px;
                color: #ffffff;
                font-weight: 500;

            }
        }
    }

    .more-info {
        width: 100%;
        height: fit-content;
        background-color: var(--thm-primary);
        padding: 5px 15px 80px 15px;
        color: #ffffff;

        p {
            margin-bottom: 20px;
        }
    }


}

@media screen and (min-width: 800px) {
    .heading {
        width: 100%;
        height: 300px;
        background: url("../image/background-top.jpg");


        .its-cover {
            width: 100%;
            height: 100%;
            display: flex;
            background-color: rgba(53, 83, 94, 0.803);
            justify-content: center;
            align-items: center;
            color: #ffffff;
            padding-top: 100px;
            font-size: 20px;
        }
    }

    .about-top {
        width: 100%;
        height: fit-content;
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(600px, 1fr));
        grid-gap: 20px;
        background-color: var(--thm-primary);
        padding: 70px 30px 50px 30px;


        .about-left {
            width: 100%;
            height: fit-content;


            .pic-hold {
                width: 100%;
                height: fit-content;
                /* background-color: #515151; */
                position: relative;
                display: inline-block;


                img {
                    width: 100%;
                    max-width: 550px;
                    height: 100%;
                    max-height: 550px;
                    display: block;
                }

                .info {
                    width: 100%;
                    max-width: 350px;
                    display: flex;
                    justify-content: center;
                    background-color: rgb(255, 195, 0);
                    padding: 15px 30px;
                    font-size: 18px;
                    font-weight: 500;
                    position: absolute;
                    bottom: 50px;
                }
            }
        }

        .about-right {
            .contact-session {



                .top p {
                    font-size: 18px;
                    font-weight: 700;
                    color: rgb(255, 195, 0);
                }

                .top h2 {
                    width: 100%;
                    font-size: 45px;
                    font-weight: 700;
                    color: var(--thm-white);
                    margin-top: 15px;
                    line-height: 50px;
                    background: linear-gradient(to right, rgb(108, 152, 235), rgb(125, 70, 108), rgb(237, 85, 116));
                    color: transparent;
                    -webkit-background-clip: text;
                    background-clip: text;
                }

            }

            .down {
                margin-top: 35px;
                color: #ffffff;
                font-weight: 500;

            }
        }
    }

    .more-info {
        width: 100%;
        height: fit-content;
        background-color: var(--thm-primary);
        padding: 5px 30px 80px 30px;
        color: #ffffff;

        p {
            margin-bottom: 20px;
        }
    }
}

@media screen and (min-width: 1100px) {
    .heading {
        width: 100%;
        height: 300px;
        background: url("../image/background-top.jpg");


        .its-cover {
            width: 100%;
            height: 100%;
            display: flex;
            background-color: rgba(53, 83, 94, 0.803);
            justify-content: center;
            align-items: center;
            color: #ffffff;
            padding-top: 100px;
            font-size: 20px;
        }
    }

    .about-top {
        width: 100%;
        height: fit-content;
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(600px, 1fr));
        grid-gap: 20px;
        background-color: var(--thm-primary);
        padding: 70px 50px 50px 50px;


        .about-left {
            width: 100%;
            height: fit-content;


            .pic-hold {
                width: 100%;
                height: fit-content;
                /* background-color: #515151; */
                position: relative;
                display: inline-block;


                img {
                    width: 100%;
                    max-width: 550px;
                    height: 100%;
                    max-height: 550px;
                    display: block;
                }

                .info {
                    width: 100%;
                    max-width: 350px;
                    display: flex;
                    justify-content: center;
                    background-color: rgb(255, 195, 0);
                    padding: 15px 30px;
                    font-size: 18px;
                    font-weight: 500;
                    position: absolute;
                    bottom: 50px;
                }
            }
        }

        .about-right {
            .contact-session {



                .top p {
                    font-size: 18px;
                    font-weight: 700;
                    color: rgb(255, 195, 0);
                }

                .top h2 {
                    width: 100%;
                    font-size: 45px;
                    font-weight: 700;
                    color: var(--thm-white);
                    margin-top: 15px;
                    line-height: 50px;
                    background: linear-gradient(to right, rgb(108, 152, 235), rgb(125, 70, 108), rgb(237, 85, 116));
                    color: transparent;
                    -webkit-background-clip: text;
                    background-clip: text;
                }

            }

            .down {
                margin-top: 35px;
                color: #ffffff;
                font-weight: 500;

            }
        }
    }

    .more-info {
        width: 100%;
        height: fit-content;
        background-color: var(--thm-primary);
        padding: 5px 50px 80px 50px;
        color: #ffffff;

        p {
            margin-bottom: 20px;
        }
    }
}

@media screen and (min-width: 1200px) {
    .heading {
        width: 100%;
        height: 300px;
        margin-top: 200px;
        background: url("../image/background-top.jpg");


        .its-cover {
            width: 100%;
            height: 100%;
            display: flex;
            background-color: rgba(53, 83, 94, 0.803);
            justify-content: center;
            align-items: center;
            color: #ffffff;
            padding-top: 100px;
            font-size: 25px;
        }
    }

    .about-top {
        width: 100%;
        height: fit-content;
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(600px, 1fr));
        grid-gap: 20px;
        background-color: var(--thm-primary);
        padding: 70px 70px 50px 70px;


        .about-left {
            width: 100%;
            height: fit-content;


            .pic-hold {
                width: 100%;
                height: fit-content;
                /* background-color: #515151; */
                position: relative;
                display: inline-block;


                img {
                    width: 100%;
                    max-width: 550px;
                    height: 100%;
                    max-height: 550px;
                    display: block;
                }

                .info {
                    width: 100%;
                    max-width: 350px;
                    display: flex;
                    justify-content: center;
                    background-color: rgb(255, 195, 0);
                    padding: 15px 30px;
                    font-size: 20px;
                    font-weight: 500;
                    position: absolute;
                    bottom: 50px;
                }
            }
        }

        .about-right {
            .contact-session {



                .top p {
                    font-size: 18px;
                    font-weight: 700;
                    color: rgb(255, 195, 0);
                }

                .top h2 {
                    width: 100%;
                    font-size: 45px;
                    font-weight: 700;
                    color: var(--thm-white);
                    margin-top: 15px;
                    line-height: 50px;
                    background: linear-gradient(to right, rgb(108, 152, 235), rgb(125, 70, 108), rgb(237, 85, 116));
                    color: transparent;
                    -webkit-background-clip: text;
                    background-clip: text;
                }

            }

            .down {
                margin-top: 55px;
                color: #ffffff;
                font-weight: 500;

            }
        }
    }

    .more-info {
        width: 100%;
        height: fit-content;
        background-color: var(--thm-primary);
        padding: 5px 70px 80px 70px;
        color: #ffffff;

        p {
            margin-bottom: 20px;
        }
    }
}