:root {
    --red: #E02B40;
    --dullYellow: #D19F2A;
    --green: #4C9F38;
    --darkRed: #C5192D;
    --orange: #FF3A21;
    --skyBlue: #27BDE2;
    --yellow: #FCC312;
    --maroon: #A21942;
    --pink: #DD1367
}

@media all and (min-width:625px) {

    .eventsDiv .display_flex_col .display_flex,
    .section3 .first_div .inner1>div:nth-child(2)>div:nth-child(2) {
        justify-content: space-between
    }

    .underline {
        height: 8px
    }
}

@media all and (min-width:1000px) {

    .dropdown ul li:hover,
    .section3 .second_div {
        background-color: #fff
    }

    #organogramImg,
    .loginPage {
        background-repeat: no-repeat
    }

    .underline {
        height: 10px
    }

    .quizBox .innerDiv .scoreDiv a,
    .quizBox .innerDiv>div:not(#progressbarDiv) {
        width: 50%;
        padding: 30px
    }

    .quizBox strong {
        font-size: 20px
    }

    .hide,
    .loginsection>.display_flex_col>div img:nth-child(3),
    .mob-contact,
    .mob-menu,
    .viewMore {
        display: none
    }

    .resourcesDiv .display_flex p {
        margin: 0 auto;
        margin: unset
    }

    .container,
    .eventsDiv div div div p,
    .eventsDiv div>div>div>p {
        padding: 0
    }

    .desktop-menu,
    .viewAllHomeBtn {
        display: block
    }

    .desktop-menu>.display_flex img:not(.search) {
        width: 60px
    }

    .desktop-menu nav {
        padding: 0 10px
    }

    .desktop-menu nav ul {
        max-width: 1335px;
        margin: 0 auto;
        justify-content: center
    }

    .slick-arrow {
        top: 38%;
        height: 40px;
        width: 40px
    }

    .slick-dots {
        margin: 20px 0
    }

    .desktop-menu nav li {
        font-size: 18px
    }

    .desktop-menu nav ul li .dropdown {
        position: absolute;
        z-index: 99;
        width: auto;
        top: 44px;
        min-width: 240px;
        background: #fff
    }

    .dropdown ul li {
        border-bottom: 1px solid rgba(0, 0, 0, .1);
        padding: 10px 20px;
        background-color: #e9e9e9
    }

    .svgColor {
        fill: white
    }

    .section3 .container {
        align-items: flex-start
    }

    .section3 .first_div {
        margin: 53px 10px;
        height: auto
    }

    .section3 .first_div .inner1>div:first-child {
        width: 45%;
        margin-top: 0;
        overflow: hidden;
        justify-content: flex-start;
        height: 474px
    }

    .section3 .first_div .inner_div img,
    .section3 .first_div .inner_div video {
        width: 100%;
        height: 73% !important
    }

    .contactDiv iframe,
    .section3 .first_div .inner1>div:first-child>div:nth-child(2) {
        height: 100%
    }

    .section3 .first_div .inner1>div:nth-child(2)>div .slimThumbnail {
        height: 365px;
        width: 100%;
        max-width: 550px
    }

    .section3 .first_div .inner1>div:nth-child(2) {
        margin-top: 0 !important;
        width: 45%;
        height: 475px
    }

    .section3 .first_div .inner1>div div:nth-child(2),
    .section5 .container div:first-child>img:first-child {
        width: 100%
    }

    .section3 .first_div .inner1>div div:nth-child(2) p {
        font-size: 24px;
        width: 80%;
        margin: 0;
        line-height: 1.2rem
    }

    .aboutSection1 h2,
    .section3 .inner2 h2,
    .section3 .inner2 p {
        font-size: 24px
    }

    .section3 .inner2 {
        margin-top: 0;
        width: 61%
    }

    .section3 .second_div {
        padding: 20px;
        width: 30%;
        border-radius: 10px;
        height: 100%
    }

    .section3 .first_div .inner1>div:first-child>div:not(:nth-child(1)) div {
        transition: none;
        margin: 24px 12px;
        height: 365px;
        max-width: 525px
    }

    .section4 {
        flex-direction: row;
        font-size: 18px
    }

    .section4 button {
        font-size: 18px;
        margin: 0 20px
    }

    .section5 .container>div:nth-child(2) {
        width: 41%;
        align-items: stretch;
        justify-content: space-between
    }

    .section5 .container>div:nth-child(2) img {
        width: calc(120/1240 * 100vw);
        max-width: 120px;
        margin: 0;
        margin-bottom: calc(5/1240 * 100vw)
    }

    .section5 .container div:first-child {
        width: 100%;
        max-width: 540px;
        margin: 0 auto
    }

    .footer {
        height: 338px
    }

    .footer .container div {
        height: 100%;
        justify-content: space-between
    }

    .footer .second_div .display_flex_col:nth-child(2) a,
    .footer p {
        margin: 5px 0
    }

    .footer .first_div {
        width: 57%
    }

    .footer .second_div {
        width: 37%
    }

    .footer .second_div .display_flex_col:nth-child(2) img {
        margin: 0 10px
    }

    .footer .second_div .display_flex_col:first-child,
    .footer .second_div .display_flex_col:nth-child(2) {
        margin-top: 0;
        height: 100%
    }

    .about.container {
        box-shadow: none
    }

    .aboutSection1 {
        padding: 80px 40px
    }

    .aboutSection1 p {
        font-size: 18px;
        text-align: left
    }

    #organogramImg {
        height: 306px;
        width: 100%;
        max-width: 1160px;
        background-image: url('../assets/images/FlowchartDesk.png');
        background-size: 90%
    }

    .upcomingEventsDiv .display_flex div:first-child {
        width: 58%
    }

    .upcomingEventsDiv>.display_flex div:nth-child(2) p {
        text-align: left
    }

    .upcomingEventsDiv .display_flex div:nth-child(2) {
        width: 36%;
        background: var(--blue);
        padding: 20px;
        margin: unset
    }

    #emailBox input {
        padding: 10px 30px
    }

    .quizBox .innerDiv #quesHeading {
        font-size: 24px;
        line-height: 32px;
        margin-top: 60px;
        width: 70%;
        text-align: center
    }

    .contactDiv form,
    .loginsection>.display_flex_col {
        width: 43%;
        height: 100%
    }

    .loginsection {
        height: unset
    }

    .loginsection form {
        padding: 0 40px;
        height: 440px;
        position: unset
    }

    .loginsection>.display_flex_col {
        justify-content: space-around
    }

    .loginsection .form .display_flex_col {
        background: rgba(255, 255, 255, .9);
        box-shadow: 0 0 20px 0 #0068B01A;
        height: 360px;
        border-radius: 20px
    }

    .loginsection>.display_flex_col>div {
        padding: 0 40px;
        width: 100%;
        justify-content: flex-start
    }

    .loginsection>.display_flex_col .display_flex {
        padding: 0 40px 20px 160px
    }

    .contactDiv {
        height: 586px
    }

    .desktop-menu ul.display_flex li {
        font-size: 12.5px;
        position: relative;
        color: #fff;
        padding: 12px 4px;
        border-right: 2px solid #fff
    }

    .desktop-menu .dropdown li {
        padding: 0 !important
    }

    .desktop-menu .dropdown li a {
        padding: 20px 10px !important
    }

    .desktop-menu ul.display_flex li a {
        padding: 16px 0
    }

    .desktop-menu ul.display_flex li:first-child {
        border-left: 2px solid #fff
    }

    .desktop-menu nav>ul.display_flex>li:first-child:hover {
        background: var(--red)
    }

    .desktop-menu nav>ul.display_flex>li:nth-child(2):hover {
        background: var(--dullYellow)
    }

    .desktop-menu nav>ul.display_flex>li:nth-child(3):hover {
        background: var(--green)
    }

    .desktop-menu nav>ul.display_flex>li:nth-child(4):hover {
        background: var(--darkRed)
    }

    .desktop-menu nav>ul.display_flex>li:nth-child(5):hover {
        background: var(--orange)
    }

    .desktop-menu nav>ul.display_flex>li:nth-child(6):hover {
        background: var(--skyBlue)
    }

    .desktop-menu nav>ul.display_flex>li:nth-child(7):hover {
        background: var(--yellow)
    }

    .desktop-menu nav>ul.display_flex>li:nth-child(8):hover {
        background: var(--maroon)
    }

    .desktop-menu nav>ul.display_flex>li:nth-child(9):hover {
        background: var(--pink)
    }

    .contactDiv iframe {
        width: 70%
    }

    .loginsection>img {
        width: 54%;
        padding-right: 20px;
        border-right: 1px dotted var(--blue);
        display: block
    }

    .contactDiv form {
        width: 26%;
        margin: 0 !important
    }

    .contactDiv2 {
        max-width: unset
    }

    .contactDiv2 div {
        width: 26%
    }

    .desktop-menu nav ul>.display_flex:nth-child(2) {
        width: 10%
    }

    .desk-search {
        justify-content: flex-end
    }

    .viewMoreDiv {
        display: flex
    }

    .section3 .first_div .inner1>div:nth-child(2)>div:nth-child(2) {
        overflow: hidden;
        flex-wrap: wrap;
        padding: 10px;
    }

    .section3 .first_div .inner1>div.activate {
        overflow: visible !important;
        width: 100% !important;
        height: auto !important
    }

    .loginPage {
        background-image: url('../assets/images/Content.png');
        background-position: center
    }

    .gallery .display_flex {
        justify-content: space-between;
        align-items: flex-start
    }

    .gallery .display_flex>.mediaSearch p {
        width: 80%;
        padding: 0;
        margin-block: auto
    }

    .gallery .display_flex>.mediaSearch .display_flex {
        padding: 20px 0
    }

    .gallery .display_flex>.mediaSearch {
        filter: grayscale();
        transform: rotate(5deg);
        width: 30%;
        margin: 40px 10px
    }

    .section3 .first_div .inner1>div:nth-child(2)>div .slimThumbnail .slimThumbnail {
        margin: 16px !important;
        margin-block: auto
    }

    .section3 .first_div .inner1>div:nth-child(2).activate>div .slimThumbnail {
        margin: 24px;
        max-width: 293px;
        height: unset;
    }
    .section3 .first_div .inner1>div:nth-child(2).activate>div .slimThumbnail > img{
        /* height: 163px !important; */
    }
    .section3 .first_div .inner1>div:nth-child(2).activate>div >  img{
        height: 163px !important;
    }

    .section3 .first_div .inner1>div:nth-child(2).activate>div .slimThumbnail .slimThumbnail {
        margin: 0 !important
    }

    .rotate {
        animation: 1s linear forwards rotateSDG
    }

    @keyframes rotateSDG {
        from {
            transform: rotate(0) scale(4)
        }

        to {
            transform: rotate(360deg) scale(1)
        }
    }
    .section3 .first_div .inner1>div:nth-child(2).activate>div .slimThumbnail p{
        font-size: 18px;
    }
    .footer .second_div .display_flex_col:nth-child(2) .display_flex_col:nth-child(2) {
        height: 73%;
    }
}

@media all and (min-width:1200px) {
    #shareScoreSocialIcons {
        margin: unset;
    }
    .aboutSection1 strong {
        font-size: 24px;
        text-align: left;
        width: 100%
    }

    .loginsection .form .display_flex_col {
        height: 440px
    }

    .loginsection>img {
        height: 600px
    }

    .underline {
        height: unset
    }

    .desktop-menu nav ul li .dropdown {
        top: 56px
    }

    .desktop-menu ul.display_flex li a {
        font-size: 16px;
        padding: 20px 3px
    }

    .desktop-menu>.display_flex img:not(.search) {
        width: 80px
    }

    .desk-search {
        display: flex
    }

    .section4 {
        font-size: 18px
    }

    .section4 button {
        font-size: 24px
    }

    .desktop-menu ul.display_flex li {
        padding: 18px 4px
    }

    .section3 .first_div .inner1>div:first-child>div:not(:nth-child(1)) p {
        font-size: 24px;
        margin-block: auto
    }

    .section3 .first_div .inner1>div:nth-child(2).activate .viewMoreHomeDiv {
        overflow: visible;
        flex-wrap: wrap
    }

    .section3 .first_div .inner1>div:nth-child(2) {
        height: 515px
    }

    .section3 .first_div .inner1>div:nth-child(2).activate>div .slimThumbnail .videoPdfIcon {
        width: 45px !important;
        height: 45px !important
    }

    

    .section3 .second_div {
        width: 35%
    }

    .section3 .inner2 h2,
    .section3 .inner2 p {
        font-size: 24px;
        line-height: 29.3px
    }

    .section5 .container div:first-child {
        width: 50%;
        max-width: 640px;
        margin-left: 0
    }

    .section3 .first_div .inner1>div:first-child>div:not(:nth-child(1)) div,
    .section3 .first_div .inner1>div:nth-child(2)>div .slimThumbnail {
        height: 395px
    }

    .section3 .first_div .inner1 .viewMoreHomeDiv .videoPdfIcon {
        width: 74px !important;
        height: 74px !important
    }

    .section3 .first_div .inner1>div:first-child {
        height: 495px
    }
    .section3 .first_div .inner1>div:nth-child(2)>div:nth-child(2) {
        padding: 15px;
    }

    .quizBox .btn {
        margin: unset
    }

    .quizBox .quizQuestionsDisplay div:not(#progressbarDiv):hover {
        background: var(--blue)
    }

    .quizBox .quizQuestionsDisplay div:not(#progressbarDiv):hover label {
        color: #fff
    }
    .emphasizeHeading{text-align: center !important;font-size: 20px !important;}
}

@media all and (min-width:1440px) {
    .desktop-menu nav ul li .dropdown {
        top: 60px
    }

    .desktop-menu ul.display_flex li {
        padding: 20px 3px
    }

    .desktop-menu ul.display_flex li a {
        padding: 20px 10px
    }
    .emphasizeHeading{text-align: center !important;}
}

;