@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans&display=swap');

* {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
}

.heading {
        font-family: 'Poppins', sans-serif;
        text-align: center;
        font-size: 2.5rem;
        font-weight: 700;
        text-transform: uppercase;
}

.sec1 {
        margin-top: 2rem;
}

.sec1 h1 {
        margin-bottom: 1rem;
}

.sec1 .heading2 {
        font-family: 'Poppins', sans-serif;
        text-align: center;
        font-size: 1.5rem;
        margin-bottom: 2rem;
        font-weight: 500;
        text-transform: capitalize;
}

.sec1-cont {
        margin-bottom: 1rem;
        gap: 0.5rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
}

.detailBox {
        display: flex;
        justify-content: space-around;
        width: 80%;
}

details summary {
        color: antiquewhite;
        padding: 1rem;
        font-size: 1rem;
        width: 100%;
        display: flex;
        background-color: #1c1852;
        opacity: 0.7;
        border-radius: 0.5rem;
        justify-content: space-between;
}

details summary i {
        color: antiquewhite;
        font-size: 1.5rem;
        font-weight: 400;
}

details>summary {
        list-style-type: '';
}

details .downBox {
        display: flex !important;
        flex-direction: column !important;
        gap: 1rem !important;
        margin-top: 0.5rem !important;
        margin-bottom: 0.5rem !important;
        padding: 1rem !important;
        background-color: rgb(246, 242, 242) !important;
        border-radius: 0.5rem !important;
}

details .downBox .upperLayer {
        font-size: 1rem !important;
        color: black !important;
}

details .downBox .lowerLayer {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-evenly !important;
        margin-top: 0.1rem !important;
}

details .downBox .lowerLayer .icon {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 1rem !important;
        cursor: initial !important;
}

details .downBox .lowerLayer .icon i {
        font-size: 5rem;
}

details .downBox .lowerLayer .icon i:hover {
        color: #1c1852;
}

details .downBox .lowerLayer .icon p {
        font-weight: 800;
        font-size: 1.5rem;
}

details .downBox .lowerLayer button:hover {
        background-color: rgb(246, 242, 242);
        color: black;
        font-weight: 600;
        border-color: #1c1852;
        transition: 1s all ease-in-out;
}

.program #color {
        color: #1c1852;
}

.program h1 {
        font-family: 'Poppins', sans-serif;
        text-align: center;
        font-size: 2.4rem;
        font-weight: 700;
        text-transform: uppercase;
}

#img-left {
        display: flex;
        gap: 5%;
        width: 96%;
        margin: 2%;
}

#img-right {
        display: flex;
        gap: 10%;
        width: 96%;
        margin: 2%;
}

#gif {
        width: 50%;
}

#gif img {
        width: 100%;
        height: 250px;
}

#img-right p {
        width: 130%;
        color: rgb(51, 51, 51);
        font-size: 1.1rem;
        font-weight: 600;
        word-spacing: 5px;
        font-family: 'Roboto', sans-serif;
        line-height: 2rem;
}

#img-left p {
        width: 130%;
        font-size: 1.1rem;
        font-weight: 600;
        color: rgb(59, 59, 59);
        word-spacing: 5px;
        font-family: 'Roboto', sans-serif;
        line-height: 2rem;
}

#line {
        color: black;
        font-size: 1.3rem;
        font-weight: 700;
}

@keyframes enter-animation {
        0% {
                transform: translateY(-300px);
                opacity: 0;
        }

        100% {
                transform: translateY(0);
                opacity: 1;
        }
}

@media (prefers-reduced-motion: no-preference) {
        .text-transition-animation {
                animation: enter-animation 1.6s 1;
        }
}


@keyframes enter-animation1 {
        0% {
                transform: translateX(-200px);
                opacity: 0;
        }

        100% {
                transform: translateY(0);
                opacity: 1;
        }
}

@media (prefers-reduced-motion: no-preference) {
        .text1-transition-animation {
                animation: enter-animation1 1.6s 1;
        }
}

.sec2 {
        background-color: rgb(233, 233, 233);
        padding: 7% 7%;
}

.sec2 h1 {
        padding-top: 4rem;
}

.sec2 .sec2-para {
        text-align: center;
        color: black;
        font-size: 1.3rem;
        font-weight: 600;
        word-spacing: 5px;
        font-family: 'Roboto', sans-serif;
        line-height: 2rem;
        padding-top: 40px;
}

@keyframes enter-animation2 {
        0% {
                transform: translateY(-80px);
                opacity: 0;
        }

        100% {
                transform: translateY(0);
                opacity: 1;
        }
}

@media (prefers-reduced-motion: no-preference) {
        .language1-transition-animation {
                animation: enter-animation2 1.6s 1;
        }
}


@keyframes enter-animation5 {
        0% {
                transform: translateY(80px);
                opacity: 0;
        }

        100% {
                transform: translateY(0);
                opacity: 1;
        }
}

@media (prefers-reduced-motion: no-preference) {
        .language2-transition-animation {
                animation: enter-animation5 1.6s 1;
        }
}

@keyframes enter-animation3 {
        0% {
                transform: translateX(-200px);
                opacity: 0;
        }

        100% {
                transform: translateY(0);
                opacity: 1;
        }
}

@media (prefers-reduced-motion: no-preference) {
        .text2-transition-animation {
                animation: enter-animation3 1.6s 1;
        }
}

@keyframes enter-animation4 {
        0% {
                transform: translateX(-80px);
                opacity: 0;
        }

        100% {
                transform: translateY(0);
                opacity: 1;
        }
}

@media (prefers-reduced-motion: no-preference) {
        .text3-transition-animation {
                animation: enter-animation4 1.6s 1;
        }
}

.container_3 {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10%;
        height: 50vh;
        width: 100%;
        background-color: rgb(233, 233, 233);
}


.container_3 img {
        width: 100px;
        height: auto;
}

.boxx:hover {
        transform: translateY(20px);
        transition: all 0.5s ease;
        opacity: 0.6;
}


.container_3 p {
        padding-top: 20px;
        text-align: center;
        font-size: 1.3rem;
        font-weight: 900;
        font-family: 'Josefin Sans', sans-serif;
        text-transform: uppercase;
}

.container_3 i {
        font-size: 80px;
        color: #1c1852;
        text-align: center;
        width: 100%;
}

#sketch i {
        font-weight: bolder
}

.container_3 .boxx {
        text-align: center;
}

.man-gif img {
        width: 90%;
        height: auto;
}

#projPop {
        position: fixed;
        top: 40%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 600px;
        height: 400px;
        box-shadow: 0px 5px 30px rgba(0, 0, 0, 0.3);
        background-color: #EEEE;
        visibility: hidden;
        opacity: 0;
        transition: 0.5s;
}

#projPop:active {
        top: 50%;
        visibility: visible;
        opacity: 0;
        transition: 0.5s;
}

.sidebar2 ul li:nth-child(4) a .fa {
        background-color: #5B636A;
}

.sidebar2 ul li a .fa {
        color: white;
        padding: 15px 12px;
        margin-right: 8px;
        border-radius: 5px;
}

@media screen and (max-width:1200px) {
        #img-right p {
                width: 130%;
                font-size: 1.1rem;
                font-weight: 600;
                word-spacing: 3px;
                line-height: 1.7rem;
        }

        #img-left p {
                width: 130%;
                font-size: 1.1rem;
                font-weight: 600;
                word-spacing: 3px;
                line-height: 1.7rem;
        }

        #img-left {
                gap: 3%;
        }

        #img-right {
                flex-direction: column-reverse;
                gap: 3%;
        }

        #gif {
                width: 60%;
        }

        #gif img {
                height: 265px;
        }
}



@media screen and (max-width:1000px) {
        #img-left {
                flex-direction: column;
        }

        #img-right p {
                width: 100%;
                font-size: 1.2rem;
                font-weight: 600;
                word-spacing: 5px;
                line-height: 2rem;
                padding: 20px;

        }

        #img-left p {
                width: 100%;
                font-size: 1.2rem;
                font-weight: 600;
                word-spacing: 5px;
                line-height: 2rem;
                padding: 20px;
        }

        .sec2 .sec2-para {
                font-size: 1.2rem;
        }

        .sec2 {
                padding: 7% 3%;
        }

        #gif {
                width: 100%;
                text-align: center;
                padding-bottom: 50px;
        }

        #gif img {
                width: 40%;
                height: 270px;
        }


        .man-gif {
                width: 100%;
                text-align: center;
                padding-bottom: 50px;
        }

        .man-gif img {
                width: 35%;
                height: auto;
        }

}

@media screen and (max-width:900px) {
        .container_3 i {
                font-size: 70px;
        }

        .container_3 p {
                font-size: 1.1rem;
        }

        .sec2 {
                padding: 7% 1%;
        }

        .container_3 {
                padding: 0 20px;
        }
}

@media screen and (max-width:800px) {
        #gif img {
                width: 45%;
                height: 220px;
        }

        .man-gif img {
                width: 45%;
                height: auto;
        }

        #img-right p {
                font-size: 1.1rem;
        }

        #img-left p {
                font-size: 1.1rem;
        }

        .container_3 i {
                font-size: 65px;
        }

        .container_3 p {
                font-size: 0.9rem;
        }

        .container_3 {
                gap: 9%;
                max-height: 40vh;
        }

        .sec2 .sec2-para {
                font-size: 1rem;
        }

        .sec2 h1 {
                font-size: 1.9rem;
        }

        details .downBox .lowerLayer {
                margin-top: 1rem;
        }

        details .downBox .lowerLayer .icon i {
                font-size: 4rem;
        }

        details .downBox .lowerLayer .icon p {
                font-size: 0.8rem;
        }
}

@media screen and (max-width:720px) {
        .commitment .box {
                width: 43% !important;
                height: 31vh !important;
        }
}

@media screen and (max-width:650px) {
        .container_3 i {
                font-size: 60px;
        }

        .container_3 p {
                font-size: 11px;
        }

        .sec2 h1 {
                font-size: 1.7rem;
        }

        #img-right p {

                font-size: 1rem;
        }

        #img-left p {
                font-size: 1rem;
        }

        #gif img {
                width: 50%;
                height: 200px;
        }

        .man-gif img {
                width: 50%;
                height: auto;
        }

        details .downBox .lowerLayer {
                flex-direction: column;
                justify-content: center;
        }

}

@media screen and (max-width:570px) {
        .commitment .box {
                width: 78% !important;
                height: 26vh !important;
        }
}

@media screen and (max-width:550px) {
        .container_3 i {
                font-size: 55px;
        }

        .container_3 p {
                font-size: 10px;
                font-weight: bolder;
        }

        #img-right p {

                font-size: 0.9rem;
        }

        #img-left p {
                font-size: 0.9rem;
        }

        #gif img {
                width: 60%;
                height: 200px;
        }

        .man-gif img {
                width: 60%;
                height: auto;
        }
}

@media screen and (max-width:500px) {
        .container_3 {
                gap: 7%;
                max-height: 35vh;
        }

        #gif img {
                width: 70%;
                height: 200px;
        }

        .container_3 p {
                font-size: 10px;

        }

        .sec1 .heading2 {
                font-size: 1rem;
                max-width: 60%;
                margin-left: 6.5rem;
        }

        .heading,
        .program h1 {
                font-size: 2rem;
        }

        #img-right p {
                font-size: 1rem;
                font-weight: 600;
                word-spacing: 2px;
                line-height: 1.7rem;
                padding: 10px;

        }

        .sec2 h1 {
                width: 85%;
                margin-left: 2rem;
        }

        #img-left p {

                font-size: 1rem;
                font-weight: 600;
                word-spacing: 3px;
                line-height: 1.7rem;
                padding: 10px;
        }

        .sec2 .sec2-para {
                padding-top: 18px;
        }
}


@media screen and (max-width: 470px) {
        .downBox .lowerLayer {
                flex-wrap: wrap;
        }
}

@media screen and (max-width:450px) {
        .container_3 i {
                font-size: 45px;
        }

        .container_3 p {
                font-size: 11px;

        }

        .container_3 {
                padding: 0px;
        }

        .program h2 {
                font-size: 1.8rem;
        }

        #gif img {
                width: 70%;
                height: 180px;
        }

        .sec2 h1 {
                width: 95%;
                margin-left: 0.5rem;
        }

        .listing ul {
                display: flex;
                flex-direction: column;
                margin-top: 20px;
                padding: 0;
        }

        .sec3 h1 {
                font-size: 25px;
                font-weight: 600;
                padding: 10px 25px;
        }

        .sec2 {
                width: 90%;
        }

        .sec2 h1 {
                width: 90%;
                margin-left: 0.5rem;
                font-size: 23px;
        }

        .heading h6 {
                font-size: 20px;
                font-weight: 300;
                font-size: 17px !important;
        }

        .program h1 {
                /* font-size: 2rem; */
                font-size: 22px;
        }

        .sec1 .heading2 {
                font-size: 1rem;
                max-width: 60%;
                margin-left: 5.5rem;
        }
        .heading h5 {
                font-size: 22px !important;
        }
        .listing ul li p {
                width: 80%;
                margin-left: 10px;
                font-size: 14px;
            }
            .main_cont img{
                width: 100%;
                padding: 0 10px;
            }
            .details summary{
                font-size: 14px;
            }
            .enrol div p {
                margin-top: 10px;
                margin-left: 0;
                font-size: 22px !important;
            }
            details>summary {
                list-style-type: '';
                font-size: 14px;
            }
}


@media screen and (max-width:400px) {
        .container_3 i {
                font-size: 40px;
        }

        .container_3 p {
                font-size: 10px;

        }

        .container_3 {
                padding: 0 px;
        }

        .program h2 {
                font-size: 1.6rem;
        }

        #img-right p {
                font-size: 0.9rem;
        }

        #img-left p {
                font-size: 0.9rem;
        }

        details .downBox .lowerLayer .icon p {
                font-size: 0.7rem;
        }

        .sec2 h1 {
                font-size: 1.5rem;
        }

        .program h1 {
                font-size: 1.3rem;
        }

        .sec1 .heading2 {
                margin-left: 4rem;
                max-width: 70%;
        }

        details summary {
                font-size: 0.8rem;
        }

        .container_3 {
                max-height: 30vh;
        }

        .sec3 h1 {
                font-size: 22px !important;
                font-weight: 600;
                padding: 10px 34px;
        }

        .heading h5 {
                font-size: 22px !important;
        }

}

 @media(max-width: 360px){
       .text-transition h1{
        margin-top: 15px;
       }
} 

@media screen and (max-width:350px) {
        .container_3 i {
                font-size: 40px;
        }
        .text-transition h1{
                margin-top: 50px;
               }

        .container_3 p {
                font-size: 8px;

        }

        .sidebar2 ul li a .bi {
                padding: 5px 10px;
        }

        .sidebar2 ul li a .fa {
                padding: 9px 9px;
        }

        .program h2 {
                font-size: 1.4rem;
        }

        .sidebar2 ul li {
                font-size: 15px;
                padding: 15px 0px;
        }

        .bar-head2 .bi {
                font-size: 22px;
                margin-top: 6px;
        }

        .img-box img {
                height: 90%;
                width: 80%;
        }
        .program h1 {
                font-size: 1.3rem;
                padding: 6px;
            }
        
}
@media (max-width:760px) {
        img {
            user-select: none;
            width: 100%;
        }
}
@media (max-width:600px){
        .program #color {
                color: #1c1852;
                font-size: 20px;
            }
            .sec2 .sec2-para {
                font-size: 14px;
            }
}
@media (max-width:375px){
        .techContainer .techCard .techContent p {
                font-size: 13px;
            }
        .listing ul li p {
                width: 80%;
                margin-left: 10px;
                font-size: 14px;
            }
            .techContainer .textTech h4 {
                width: 80% !important;
                font-size: 12px;
            }
       
      .box p {
        font-size: 12px !important;
       }
       img {
        user-select: none;
        width: 100%;
    }
    .profile_container h1 {
        font-size: 20px;
    }
}
@media(max-width:320px){
        .program #color {
                color: #1c1852;
                font-size: 20px;
            }
            .sec2 .sec2-para {
                font-size: 12px;
            }
            .heading h5 {
                font-size: 20px !important;
            }
            .heading h6 {
                font-size: 16px !important;
                font-weight: 300;
            }
            .enrol div p{
                font-size: 16px !important;
            }
            .container-btn a span {
                font-size: 12px !important;
            }
            
}
@media(max-width:316px){
        .program #color {
                font-size: 17px;
            }
            .program #color {
                font-size: 17px;
            }
}



#md_l {
        height: 85%;
}

#mdl {
        border: 2px solid #1c1852;
        border-radius: 20px;
        background-color: rgb(233, 233, 233);
}

#md_body {
        padding-top: 30px;
}

.modal-header h3 {
        text-align: center;
        color: #1c1852;
}

#clse {
        color: white;
        background: #1c1852;
        padding: 10px;
}

#clse:hover {
        background: black;
        color: white;
}



#blur.active {
        filter: blur(5px);
}

.modal.active {
        visibility: visible;
        opacity: 1;
}

/* new One */

.sec3 {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 30px;
}

.sec3 h1 {
        font-size: 26px;
        font-weight: 600;
        padding: 10px 0px;
}


.program {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 40px;
}

.aspirant-expect {
        width: 80%;
        display: flex;
        flex-direction: column;
        justify-content: center;
}

.heading {
        text-align: center;
}

.heading h5 {
        font-size: 26px;
        font-weight: 600;
        padding: 10px 0px;
}

.heading h6 {
        font-size: 20px;
        font-weight: 300;
}

.listing ul {
        display: flex;
        flex-direction: column;
        margin-top: 20px;
}

.listing ul li {
        width: 100%;
        background-color: lavender;
        list-style-type: none;
        height: auto;
        border-top-right-radius: 40px;
        border-bottom-right-radius: 40px;
        display: flex;
        justify-content: center;
        padding-top: 10px;
        margin-bottom: 20px;
}

.listing ul li i {
        padding: 2px;
        color: green;
}

.listing ul li p {
        width: 80%;
        margin-left: 10px;
}

.support {
        padding: 10px 0px;
}

.commitment {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
}

.commitment .box {
        width: 25%;
        display: flex;
        flex-direction: column;
        background-color: lavenderblush;
        margin: 20px;
        padding: 20px 15px;
        border-radius: 15px;
        transition: 1s ease all;
}

.box h6 {
        font-weight: 800;
}

.box p {
        font-size: 14px;
        font-weight: 300;
        margin-bottom: 0rem !important;
}

.commitment .box:nth-child(2) {
        background-color: #ADD8E6;
}

.commitment .box:nth-child(3) {
        background-color: #C8A2C8;
}

.commitment .box:nth-child(4) {
        background-color: #D8BFD8;
}

.commitment .box:nth-child(5) {
        background-color: #CCCCFF
}

.commitment .box:hover {
        box-shadow: 10px 12px 5px grey;
}