@media screen and (min-width:760px) {
    /* Overall CSS (Body) */
    #overall_container {
        top: 0;
        left: 0;
        width: 100%;
        height: 500%;
        background-color: white;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 60px 0px;
        margin-bottom: 100px;
    }


    /* CSS for the header */
    #header {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 20px;
        /*height: 80%;*/
        width: 90%;
        text-align: center;
        background-image: url('../images/programs/background.png');
        background-position: cover;
        background-size: 101% 100%;
        background-repeat: no-repeat;
    }

        #header h1 {
            font-family: 'Oswald';
            color: rgb(255, 255, 255);
            font-weight: bold;
            font-size: 50px;
        }

        #header p {
            font-family: "Poppins";
            color: rgb(255, 255, 255);
            font-weight: 400;
            font-size: 16px;
        }


    /* CSS for the new programs */
    #new_program {
        height: 35%;
        width: 90%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 10px 90px;
    }

    img {
        width: 33%;
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
    }

    #new_program #contents {
        line-height: 130%;
    }

    #new_program h4 {
        font-size: 15px;
        color: #64DD17;
        font-weight: bold;
        font-family: 'Oswald';
    }

    #new_program h1 {
        font-size: 30px;
        font-weight: bolder;
        font-family: 'Oswald';
    }

    #new_program p {
        font-size: 13px;
        color: #544E5D;
        font-weight: 400;
        font-family: "Poppins";
    }

    #new_program button {
        border: none;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #203B93;
        color: white;
        width: 22%;
        gap: 10px;
        padding: 15px;
        font-weight: 700;
        font-size: 10px;
    }

        #new_program button img {
            width: 16px;
            height: 16px;
            font-family: "Poppins";
        }


    /* Choose program CSS */
    #choose_program {
        height: 45%;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        gap: 30px;
        background-color: #F9F9FA;
        padding: 25px;
    }

        #choose_program #cp_header {
            text-align: center;
        }

            #choose_program #cp_header h1 {
                font-size: 30px;
                font-weight: bolder;
                font-family: 'Oswald';
            }

            #choose_program #cp_header p {
                font-size: 15px;
                color: #544E5D;
                font-weight: 400;
                font-family: "Poppins";
                width: 50%;
                margin: auto;
            }

        #choose_program #programs_list {
            display: flex;
            gap: 60px;
            flex-direction: row;
        }

            #choose_program #programs_list #list1 {
                text-align: center;
                display: flex;
                flex-direction: column;
                gap: 40px;
                align-items: center;
                color: #544E5D;
                padding: 20px;
                border-radius: 10px;
                background-color: white;
                box-shadow: rgb(255, 255, 255) 1px 0.5px 0.5px 1px;
            }

                #choose_program #programs_list #list1 img {
                    width: 50px;
                    height: 50px;
                }

    #p_text h2 {
        font-size: 23px;
        font-weight: bolder;
        font-family: 'Oswald';
    }

    #p_text p {
        font-size: 13px;
        font-weight: 400;
        font-family: "Poppins";
    }

    #study {
        height: 110%;
        width: 90%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 30px;
    }

        #study h2 {
            font-size: 30px;
            font-weight: 600;
            font-family: "Oswald";
        }

        #study #filter {
            border-radius: 7px;
            width: 148%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-left: -24%;
            gap: 0px 20px;
            padding: 2px;
            box-shadow: rgb(234, 230, 230) 2px 1px 2px 2px;
        }

    /* CSS for the faculty filter */
    .custom-select {
        position: relative;
        font-family: "Oswald";
        color: #203B93;
        font-weight: 600;
    }

        .custom-select select {
            display: none;
        }

    /*style the arrow inside the select element:*/
    .select-selected:after {
        position: absolute;
        content: "";
        top: 45%;
        right: 14px;
        width: 0;
        height: 0;
        border: 6px solid transparent;
        border-color: #203B93 transparent transparent transparent;
    }

    /*point the arrow upwards when the select box is open (active):*/
    .select-selected.select-arrow-active:after {
        border-color: transparent transparent #203B93 transparent;
        top: 35%;
    }

    div.custom-select {
        background-color: rgb(255, 255, 255);
        border: none;
    }

    /*style the items (options), including the selected item:*/
    .select-items div, .select-selected {
        padding: 8px 16px;
        border: 1px solid transparent;
        border-color: transparent transparent rgb(255, 255, 255) transparent;
        cursor: pointer;
        user-select: none;
        background-color: rgb(255, 255, 255);
    }

    /*style items (options):*/
    .select-items {
        position: absolute;
        border: none;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 99;
        border: 1px solid black;
    }

    /*hide the items when the select box is closed:*/
    .select-hide {
        display: none;
    }

    .select-items div:hover, .same-as-selected {
        background-color: #e5e5e5;
    }

    #study #filter #img {
        width: 1px;
        height: 30px;
    }

    #study #filter span {
        display: flex;
        height: 30px;
        width: 70%;
        align-items: center;
        justify-content: center;
        gap: 0px 190px;
        padding-right: 15px;
    }

        #study #filter span input {
            width: 100%;
            border: none;
            background-color: white;
        }

        #study #filter span .img {
            width: 15px;
            height: 15px;
        }

    /* CSS for courses */
    #study #course_wrap {
        height: 100%;
        display: flex;
        flex-direction: column;
        gap: 30px;
    }

    #study #courses {
        display: flex;
        flex-direction: row;
        gap: 30px;
    }

        #study #courses section {
            background-color: #203B93;
            width: 32%;
            height: 100%;
            display: flex;
            flex-direction: column;
            gap: 80px;
            padding: 20px;
            border-radius: 10px;
        }

            #study #courses section span h2,
            #study #courses section span p,
            #study #courses section span a {
                color: white;
            }

            #study #courses section #span_2 {
                display: flex;
                gap: 150px 250px;
            }

                #study #courses section #span_2 img {
                    width: 30px;
                    height: 30px;
                }
}


@media screen and (max-width:759px) and (min-width:320px) {
    /* Overall CSS (Body) */
    #overall_container {
        top: 0;
        left: 0;
        width: 100%;
        /* height: 500%; */
        background-color: white;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 60px 0px;
        margin-bottom: 100px;
    }


    /* CSS for the header */
    #header {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 20px;
        height: 300px;
        width: 95%;
        text-align: center;
        background-image: url('../images/programs/background.png');
        background-position: cover;
        background-size: 101% 100%;
        background-repeat: no-repeat;
        padding: 20px;
    }

        #header h1 {
            font-family: 'Oswald';
            color: rgb(255, 255, 255);
            font-weight: bold;
            font-size: 25px;
        }

        #header p {
            font-family: "Poppins";
            color: rgb(255, 255, 255);
            font-weight: 400;
            font-size: 13px;
        }


    /* CSS for the new programs */
    #new_program {
        height: 35%;
        width: 90%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        gap: 10px 90px;
    }

        #new_program img {
            width: 100%;
            background-position: center;
            background-size: contain;
            background-repeat: no-repeat;
        }

        #new_program #contents {
            line-height: 130%;
        }

        #new_program h4 {
            font-size: 15px;
            color: #64DD17;
            font-weight: bold;
            font-family: 'Oswald';
        }

        #new_program h1 {
            font-size: 25px;
            font-weight: bolder;
            font-family: 'Oswald';
        }

        #new_program p {
            font-size: 13px;
            color: #544E5D;
            font-weight: 400;
            font-family: "Poppins";
        }

        #new_program button {
            border: none;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #203B93;
            color: white;
            width: 45%;
            gap: 10px;
            padding: 15px;
            font-weight: 700;
            font-size: 10px;
        }

            #new_program button img {
                width: 16px;
                height: 16px;
                font-family: "Poppins";
            }


    /* Choose program CSS */
    #choose_program {
        height: 45%;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        gap: 30px;
        background-color: #F9F9FA;
        padding: 25px;
    }

        #choose_program #cp_header {
            text-align: center;
        }

            #choose_program #cp_header h1 {
                font-size: 30px;
                font-weight: bolder;
                font-family: 'Oswald';
            }

            #choose_program #cp_header p {
                font-size: 13px;
                color: #544E5D;
                font-weight: 400;
                font-family: "Poppins";
            }

        #choose_program #programs_list #list1 {
            text-align: center;
            display: flex;
            flex-direction: column;
            gap: 40px;
            align-items: center;
            color: #544E5D;
            padding: 20px;
            border-radius: 10px;
            margin: 20px 0;
            background-color: white;
            box-shadow: rgb(255, 255, 255) 1px 0.5px 0.5px 1px;
        }

            #choose_program #programs_list #list1 img {
                width: 50px;
                height: 50px;
            }

    #p_text h2 {
        font-size: 23px;
        font-weight: bolder;
        font-family: 'Oswald';
    }

    #p_text p {
        font-size: 13px;
        font-weight: 400;
        font-family: "Poppins";
    }

    #study {
        height: 110%;
        width: 90%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 30px;
    }

        #study h2 {
            font-size: 25px;
            font-weight: 600;
            font-family: "Oswald";
        }

        #study #filter {
            border-radius: 7px;
            width: 95%;
            /* display: flex; */
            align-items: center;
            justify-content: center;
            /* margin-left: -24%; */
            gap: 0px 20px;
            padding: 2px;
            box-shadow: rgb(234, 230, 230) 2px 1px 2px 2px;
            margin: auto;
        }

    /* CSS for the faculty filter */
    .custom-select {
        position: relative;
        font-family: "Oswald";
        color: #203B93;
        font-weight: 600;
    }

        .custom-select select {
            display: none;
        }

    /*style the arrow inside the select element:*/
    .select-selected:after {
        position: absolute;
        content: "";
        top: 45%;
        right: 14px;
        width: 0;
        height: 0;
        border: 6px solid transparent;
        border-color: #203B93 transparent transparent transparent;
    }

    /*point the arrow upwards when the select box is open (active):*/
    .select-selected.select-arrow-active:after {
        border-color: transparent transparent #203B93 transparent;
        top: 35%;
    }

    div.custom-select {
        background-color: rgb(255, 255, 255);
        border: none;
    }

    /*style the items (options), including the selected item:*/
    .select-items div, .select-selected {
        padding: 8px 16px;
        border: 1px solid transparent;
        border-color: transparent transparent rgb(255, 255, 255) transparent;
        cursor: pointer;
        user-select: none;
        background-color: rgb(255, 255, 255);
    }

    /*style items (options):*/
    .select-items {
        position: absolute;
        border: none;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 99;
        border: 1px solid black;
    }

    /*hide the items when the select box is closed:*/
    .select-hide {
        display: none;
    }

    .select-items div:hover, .same-as-selected {
        background-color: #e5e5e5;
    }

    #study #filter #img {
        width: 1px;
        height: 30px;
    }

    #study #filter span {
        display: flex;
        height: 30px;
        width: 90%;
        margin: auto;
        align-items: center;
        justify-content: center;
        gap: 0px 190px;
        padding-right: 15px;
    }

        #study #filter span input {
            width: 100%;
            border: none;
            background-color: white;
        }

        #study #filter span .img {
            width: 15px;
            height: 15px;
        }

    /* CSS for courses */
    #study #course_wrap {
        height: 100%;
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    #study #courses {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

        #study #courses section {
            background-color: #203B93;
            width: 90%;
            margin: auto;
            height: 30%;
            display: flex;
            flex-direction: column;
            gap: 80px;
            padding: 20px;
            border-radius: 10px;
        }

            #study #courses section span h2,
            #study #courses section span p,
            #study #courses section span a {
                color: white;
            }

            #study #courses section #span_2 {
                display: flex;
                /* gap: 150px 250px; */
                justify-content: space-between;
            }

                #study #courses section #span_2 img {
                    width: 30px;
                    height: 30px;
                }
}