* {
    margin: 0;
    padding: 0;
    border: 0;
    background-color: transparent;
    background: none;
}

img {
    display: block;
    width: 100%;
    height: 100%;
}

.wrapper-secondary {
    width: 80%;
    margin: 0 auto;
}

::-webkit-scrollbar {
    display: block;
}

::-webkit-scrollbar{
    height: 4px;
    width: 4px;
    background: LightGray;
    border-radius: 15px;
}

::-webkit-scrollbar-thumb:horizontal{
    background:  #032A58;
    border-radius: 15px;
}

#program-feedback {
    padding: 166px 0;
    background: linear-gradient(90deg, #032A58 43.86%, rgba(3, 42, 88, 0) 100%), url('../../assets/images/academics/program-feedback-bg.png');
    background-size: cover;
    background-position: center;
    object-fit: cover;
    background-repeat: no-repeat;
}

#program-feedback .wrapper {
}

#program-feedback .title {
}

#program-feedback .title h2 {
    font-style: normal;
    font-weight: 600;
    font-size: 57px;
    line-height: 64px;
    color: #ffffff;
}

#program-feedback .title h4 {
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.5px;
    color: #ffffff;
    margin-top: 16px;
    width: 35%;
}

/* personal details styles */
#personal-details {
    padding: 100px 0px;
}

#personal-details .top {
}

#personal-details .top h2 {
    font-style: normal;
    font-weight: 400;
    font-size: 38px;
    letter-spacing: 0.5px;
    color: rgba(3, 42, 88, 1);
}

#personal-details .bottom {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    width: 90%;
    margin: 0 auto;
    grid-gap: 15px 25px;
    position: relative;
}

#personal-details .bottom .name-container {
}

#personal-details .bottom .name-container:last-child {
    grid-column: 1/3;
}

#personal-details .bottom .name-container h3 {
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
}

#personal-details .bottom .name-container span {
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    color: rgba(233, 71, 91, 1);
}

#personal-details .bottom .name-container form {
    height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid rgba(231, 231, 231, 1);
    border-radius: 10px;
    padding: 10px 15px;
}

#personal-details .bottom .name-container form input {
}

#personal-details .bottom .name-container p {
    color: #e60000;
    margin-top: 10px;
    font-size: 14px;
}

/* personal details date input styles */

#personal-details input {
    width: 100%;
    display: block;
    font-size: 16px;
    font-weight: 400;
    font-family: "poppins-light";
    padding: 10px 15px;
    border: 1px solid rgba(231, 231, 231, 1);
    border-radius: 10px;
}
input:invalid:after {
    color: #808080;
    content: attr(placeholder);
    font-size: 22px;
    padding-left: 10px;
    pointer-events: none;
    position: absolute;
}
input:valid,
input:focus,
input:active {
    color: #000;
}
input:valid:before,
input:focus:before,
input:active:before {
    display: none;
}

input::placeholder {
    color: rgba(177, 177, 177, 1);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    font-family: "poppins-light";
}

#personal-details .bottom .name-container .calendar input {
    width: 100%;
}

#personal-details .bottom .name-container .calendar .img-container {
    width: 20px;
    filter: saturate(0.1);
    cursor: pointer;
    position: absolute;
    right: 12px;
    top: 14%;
}

#personal-details .bottom .name-container .calendar .img-container img {
    width: 100%;
    display: block;
}

#personal-details .bottom .name-container .sub-container {
    border: 1px solid rgba(231, 231, 231, 1);
    border-radius: 10px;
    padding: 15px;
    display: flex;
}

#message {
    width: 100%;
    appearance: none;
    background-image: url("../../assets/icons/arrow2.svg");
    background-repeat: no-repeat;
    background-position: right center;
    color: rgba(177, 177, 177, 1);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    font-family: "poppins-light";
}

#course-feedback {
    padding: 0px 0px 100px;
}

#course-feedback .wrapper {
    background: rgba(249, 249, 249, 1);
    padding: 25px;
    border-radius: 25px;
}

#course-feedback .top {
    margin: 50px auto;
}

#course-feedback .top h2 {
    color: rgba(3, 42, 88, 1);
    font-size: 32px;
    font-style: normal;
    font-weight: 600;
}

#course-feedback .top p {
    color: rgba(130, 130, 130, 1);
    font-size: 16px;
    font-family: "poppins-light";
    font-weight: 600;
    letter-spacing: 1px;
}

#course-feedback .bottom {
    width: 90%;
    margin: 0 auto;
}

#course-feedback .bottom .parent-opt {
    display: flex;
    justify-content: flex-end;
}

#course-feedback .bottom .option-container {
    background: rgba(3, 42, 88, 1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    margin-bottom: 35px;
    width: 60%;
}

#course-feedback .bottom .option-container h3 {
    color: #fff;
    font-size: 16px;
    font-weight: 400;
    font-style: normal;
}

#course-feedback .bottom .options {
}

#course-feedback .bottom .options .first-option {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 35px;
}

#course-feedback .bottom .options .first-option .left {
    width: 25%;
}

#course-feedback .bottom .options .first-option .left p {
    color: #000;
    font-weight: 400;
    font-family: "poppins-light";
}

#course-feedback .bottom .options .first-option .right {
    width: 50%;
    padding-right: 58px;
}

#course-feedback .bottom .options .first-option .right .img-container {
}

.input-radio {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.input-radio .input-radio {
    width: 20px;
    height: 20px;
}

/* issues faced style starting */
#faced-issues {
}

#faced-issues .wrapper {
}

#faced-issues .wrapper .items {
    width: 90%;
    margin: 0 auto;
}

#faced-issues .wrapper .items h2 {
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    margin-bottom: 30px;
}

#faced-issues .wrapper .items .issue-box {
}

#faced-issues .wrapper .items .issue-box textarea {
    border: 1px solid rgba(218, 218, 218, 1);
    width: 100%;
    padding: 20px;
    height: 250px;
    border-radius: 12px;
    font-family: "poppins-light";
    font-size: 16px;
}

.custom-text::placeholder {
    font-size: 14px;
    font-family: "poppins-light";
}

/* suggestion style starting
   */
#suggestion {
    padding: 100px 0px;
}

#suggestion .wrapper {
}

#suggestion .wrapper .items {
    width: 90%;
    margin: 0 auto;
}

#suggestion .wrapper .items h2 {
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    margin-bottom: 30px;
}

#suggestion .wrapper .items .issue-box {
}

#suggestion .wrapper .items .issue-box textarea {
    border: 1px solid rgba(218, 218, 218, 1);
    width: 100%;
    padding: 20px;
    height: 250px;
    border-radius: 12px;
    font-family: "poppins-light";
    font-size: 16px;
}

#suggestion button {
    background: rgba(3, 42, 88, 1);
    text-align: center;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: max-content;
    margin: 40px auto 0px;
    padding: 10px 20px;
    border-radius: 30px;
}

#suggestion button span {
    font-size: 16px;
    color: #fff;
    font-family: "poppinsregular";
    font-weight: 400;
    margin-right: 10px;
}

#suggestion button .img-container {
    filter: invert(-1);
    width: 14px;
}

#suggestion button .img-container img {
    width: 100%;
    display: block;
}

#message {
    color: #000;
}

@media all and (max-width: 980px) {
    #course-feedback .bottom .option-container {
        width: 65%;
    }

    #course-feedback .bottom .options .first-option .right {
        width: 52%;
    }
}

@media all and (max-width: 768px) {
    #course-feedback .bottom .options .first-option .right {
        width: 55%;
    }
}

@media all and (max-width: 480px) {
    #personal-details .bottom {
        display: flex;
        flex-wrap: wrap;
    }
    #personal-details {
        padding: 50px 0px;
    }
    #personal-details .bottom .name-container {
        width: 100%;
    }
    #course-feedback {
        padding: 50px 0px;
    }
    #suggestion {
        padding: 50px 0px;
    }
    #personal-details .bottom .name-container .calendar .img-container {
        right: 15px;
        top: 29%;
    }

    #course-feedback .bottom .options .first-option .right {
        width: 48%;
    }
}

@media all and (max-width: 400px) {
    #personal-details {
        padding: 80px 0px;
    }

    #personal-details .top h2 {
        font-size: 32px;
    }
}