html {
    scroll-behavior: smooth;
}

body {
    padding: 0;
    margin: 0;
    width: 100%;
    min-height: 100vh;
    line-height: 1;
}

/*... Referal Start ...*/
.referal {
    background-color: rgb(66, 66, 66);
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    padding: 4px 25px;
    font-family: segoe ui;
}
.referal p {
    margin: 0;
    color: white;
    letter-spacing: 2px;
    font-weight: 500;
    font-size: large;
}
.referal a {
    display: flex;
    align-items: center;    
    justify-content: space-between;
    text-decoration: none;
    color: rgb(255, 200, 0);
    animation: animApply 2s ease-in-out infinite;
}
@keyframes animApply {
    50% {
        transform: scale(1.05);
    }
}
.referal a:hover {
    font-weight: 500;
    animation-play-state: paused;
    transform: scale(1.10);
}
.referal img {
    width: 100px;
    height: auto;
}
    .reflinks {
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        gap: 30px;
    }
/*... Referal End ...*/

/*... Header Start ...*/
.header {
    width: 100%;
    height: fit-content;
    display: flex;
    align-items: center;   
    justify-content: space-between;
    box-sizing: border-box;
    padding: 5px 10px;
    background: rgb(1, 47, 112);
}
.header a {
    font-family: poppins;
    color: white;
    text-decoration: none;
}
    .header-left {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    }
    .header-left img {
    padding: 10px;
    height: 66px;    
    width: auto;     
    }
    .header-left a {
    font-size: 32px;
    font-weight: 700;
    }
    #hamtoggle {
        display: none;
    }
    .hamlabel {
        display: none;
    }
        .navtabs {
            display: flex;
            flex-wrap: wrap;
            text-align: center;
            align-items: center;
            justify-content: center;
            font-weight: 500;
        }
        .navtab {
            padding: 10px 15px;
            border-radius: 10px;
        }
        .navtab:hover, .navtab:active, #active:hover {
            background: rgb(255, 200, 0);
            color: rgb(1, 47, 112);
        }
        #active {
            color: rgb(255, 200, 0);
        }
/*... Header End ...*/

/*... News Ticker Start ...*/
.newsticker {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    height: 20px;
    font-size: 15px;
    font-family: tahoma;
    background: rgb(100, 100, 100);

}
    .newsticker p {
        position: absolute;
        top: 0;
        left: 0;
        background: rgb(255, 200, 0);
        color: black;
        padding: 2px 5px;
        margin: 0;
        font-weight: 600;
    }
        .newsticker ul {
            display: block;
            width: 100%;
            height: 20px;
            padding: 4px 0 0 60px;
            margin: 0px;
            list-style-type: none;
            animation: scrollNews 25s infinite ease-in-out;
        }
        @keyframes scrollNews {
            0%, 16% {
                transform: translateY(0);        
            }
            20%, 36% {
                transform: translateY(-20px);        
            }
            40%, 56% {
                transform: translateY(-40px);        
            }
            60%, 76% {
                transform: translateY(-60px);        
            }
            80%, 96% {
                transform: translateY(-80px);        
            }
            100% {
                transform: translateY(0);        
            }
        }
            .newsticker ul li {
                color: white;
                height: 20px;
            }
            .newsticker ul:hover {
                animation-play-state: paused;
            }
            .newsticker a {
                color: rgb(255, 255, 255);
            }
/*... News Ticker End ...*/

/*... Carousel Start ...*/
.carousel {
    width: 65%;
    margin: 0 auto;
    margin-top: 15px;
    aspect-ratio: 16/9;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
    background: rgb(100, 100, 100);
    box-shadow: 0 2px 30px rgb(100, 100, 100);
}
    .carousel input[type="radio"] {
        display: none;
    }
    .slides {
        display: flex;
        width: 500%;
        animation: slide 25s infinite;
    }
    @keyframes slide {
        0%, 16% {
            transform: translateX(0);
        }
        20%, 36% {
            transform: translateX(-20%);
        }
        40%, 56% {
            transform: translateX(-40%);
        }
        60%, 76% {
            transform: translateX(-60%);
        }
        80%, 96% {
            transform: translateX(-80%);
        }
        100% {
            transform: translateX(0);
        }
    }
    .slides img {
        width: 20%;
        height: 100%;
        object-fit: cover;
        transform: translate 0.15s;
    }
    .radionav {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 15px;
        position: absolute;
        bottom: 14px;
        text-align: center;
        z-index: 10;
    }
    .rn {
        display: block;
        width: 12px;
        height: 12px;
        background: rgb(100, 100, 100);
        transition: transform 0.15s, background-color 0.15s;
    }
    .rn:hover {
        background: rgb(66, 66, 66);
        transform: scale(1.1);
    }
    .rn:nth-child(1) {
        animation: dot1 25s infinite;
    }
    .rn:nth-child(2) {
        animation: dot2 25s infinite;
    }
    .rn:nth-child(3) {
        animation: dot3 25s infinite;
    }
    .rn:nth-child(4) {
        animation: dot4 25s infinite;
    }
    .rn:nth-child(5) {
        animation: dot5 25s infinite;
    }
    @keyframes dot1 {
        0%, 16% {
            background: rgb(66, 66, 66);
        }
        20%, 100% {
            background: rgb(100, 100, 100);
        }
    }
    @keyframes dot2 {
        20%, 36% {
            background: rgb(66, 66, 66);
        }
        0%, 16%, 40%, 100% {
            background: rgb(100, 100, 100);
        }
    }
    @keyframes dot3 {
        40%, 56% {
            background: rgb(66, 66, 66);
        }
        0%, 36%, 60%, 100% {
            background: rgb(100, 100, 100);
        }
    }
    @keyframes dot4 {
        60%, 76% {
            background: rgb(66, 66, 66);
        }
        0%, 56%, 80%, 100% {
            background: rgb(100, 100, 100);
        }
    }
    @keyframes dot5 {
        80%, 96% {
            background: rgb(66, 66, 66);
        }
        0%, 76%, 100% {
            background: rgb(100, 100, 100);
        }
    }
#rb1:checked ~ .radionav label[for="rb1"],
#rb2:checked ~ .radionav label[for="rb2"],
#rb3:checked ~ .radionav label[for="rb3"],
#rb4:checked ~ .radionav label[for="rb4"],
#rb5:checked ~ .radionav label[for="rb5"]  {
    background: rgb(66, 66, 66);
}
#rb1:checked ~ .radionav label, 
#rb2:checked ~ .radionav label,
#rb3:checked ~ .radionav label,
#rb4:checked ~ .radionav label,
#rb5:checked ~ .radionav label  {
    animation: none;
}
#rb1:checked ~ .slides {
    animation: none;
    transform: translateX(0);
}
#rb2:checked ~ .slides {
    animation: none;
    transform: translateX(-20%);
}
#rb3:checked ~ .slides {
    animation: none;
    transform: translateX(-40%);
}
#rb4:checked ~ .slides {
    animation: none;
    transform: translateX(-60%);
}
#rb5:checked ~ .slides {
    animation: none;
    transform: translateX(-80%);
}    
/*... Carousel End ...*/

/*... Content Start ...*/
.intro-container{
    width: 100%;
    padding: 10px;
    margin-top: 5px;
    box-sizing: border-box;
    font-family: poppins;
}
    .intro, .degreeprograms, .faculty-container, .hodmessage, .news-events, .faculty-p, .programs-p, .news-events-p, .research, .resources {
        padding: 20px 30px;
        box-shadow: 0px 2px 10px grey;
        text-align: justify;
        margin-bottom: 15px;
    }
    .news-events {
        display: flex;
        flex-wrap: wrap;
        align-items: first baseline;
        justify-content: space-between;
        gap: 30px;
        position: relative;
    }
        .introtext, .programs, .facultybox, .message, .fac-profile, .newsx-p {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: 30px;
            gap: 30px;
        }
        .research-container, .prog-container, .news-container-p, .resources-container {
            margin-top: 30px;
        }
        .newsx-p {
            align-items: start;
            margin: 0;
        }
        .message {
            align-items: start;
        }
        .facultybox, .fac-profiles {
            flex-wrap: wrap;
        }
            .fac-profile {
                justify-content: flex-start;
                flex-wrap: nowrap;
            } 
        .news-container, .events-container {
            flex: 1 1 0;
        }
            .ms, .phd, .faculty, .message, .fac-profile {
                padding: 5px 20px;
            }
            .faculty {
                flex: 1 1 0;
                display: block;
                text-align: center;
                padding: 15px;
            }
            .faculty img, .fac-profile img {
                width: 150px;
                aspect-ratio: 35/45;
                box-shadow: 0 0 5px 1px black;
                flex-shrink: 0;
            }
            .fac-data {
                padding-bottom: 10px;
            }
            .hodmessage img {
                width: 120px;
                aspect-ratio: 35/45;
                border-radius: 0 20% 0 20%;
                margin-bottom: 10px;
            }
            .ms:hover, .phd:hover, .faculty:hover, .message:hover, .intro p:hover, .prog-ms:hover, .prog-phd:hover, .newsx-p:hover, .eventx-p:hover, ms:active, .phd:active, .faculty:active, .message:active, .intro p:active,
             .prog-ms:active, .prog-phd:active, .newsx-p:active, .eventx-p:active {
            transform: scale(1.01);
            transition: all 0.2s ease-in-out;
            }
            .news, .events, .publications, .resourcesx {
                margin: 0;
                height: 100%;
                padding: 5px 20px;
            }
            .news a, .events a, .research a, .resources a {
                color: rgb(1, 47, 112);
            }
            .news a:hover, .events a:hover, .news a:active, .events a:active {
                text-decoration: underline;
            }
                .newsx, .eventx {
                    padding: 10px 0;
                }
                .eventx th, .eventx-p th, .news-p h3 {
                    font-size: 18px;
                    color: rgb(1, 47, 112);
                    padding-bottom: 5px;
                    line-height: 1.2;
                    margin: 0;
                }
                .news-p img {
                    width: 400px;
                }
                .eventx span {
                    color: rgb(1, 47, 112);
                    font-weight: 600;
                }
    .intro h1, .degreeprograms h1, .faculty-container h1, .hodmessage h1, .news-events h1, .faculty-p h1, .programs-p h1, .news-events-p h1, .research h1, .resources h1 {
        color: rgb(1, 47, 112);
        border-bottom: 5px solid rgb(255, 200, 0);
        padding: 5px 0;
        text-align: center;
        width: fit-content;
        margin: 0 auto;
        font-size: 24px;
    }
    .programs h2, .prog-container h2, .news-events-p h2, .research h2, .resources h2 {
        font-size: 22x;
        padding: 10px 0;
        margin: 0;
    }
    .prog-ms img {
        width: 500px;
        height: auto;
        display: block;
        margin: 0 auto;
        filter: contrast(105%);
    }
    .faculty h3, .fac-data h3, .newsx-p h3 {
        font-size: 20px;
        margin: 0;
        line-height: 1.4;
        padding-top: 10px;
    }
    .faculty h3 span, .fac-data h3 span {
        font-size: 18px;
        font-weight: 500;
    }
    .intro p, .degreeprograms p, .hodmessage p, .news-container li, .events-container td, .fac-profile p, .prog-container p, .news-events-p, .newsx-p p, .research li, .resources li {
        font-size: 16px;
        line-height: 1.3;
        margin: 0;
    }
    .news-container li, .research li, .resources li {
        padding-bottom: 10px;
    }
    .fac-data p {
        margin: 5px 0;
    }
    .faculty-container a, .degreeprograms a, .backtotop a {
        display: block;
        width: fit-content;
        padding: 10px 15px;
        background: rgb(255, 200, 0);
        border-radius: 10px;
        margin-left: auto;
        margin-top: 20px;
        text-decoration: none;
        color: rgb(1, 47, 112);
        box-sizing: border-box;
        box-shadow: 0 0 5px rgb(100, 100, 100);
        transition: transform 0.2s ease;
    }
    .faculty-container a:hover, .degreeprograms a:hover, .backtotop a:hover, .faculty-container a:active, .degreeprograms a:active, .backtotop a:active {
        background: rgb(137, 172, 31);
        transform: scale(1.05);
        color: rgb(255, 255, 255);
        box-shadow: none;
        font-weight: 500;
    }
    .intro span, .fac-data span, .eventx-p span {
        font-weight: 500;
        color: rgb(1, 47, 112);
    }
    .intro a {
        text-decoration: none;
    }
    .message span {
        font-weight: 600;
        display: block;
        text-align: end;
        padding-top: 5px;
        color: rgb(1, 47, 112);
    }
/*... Content End ...*/

/*... Footer Start ...*/
.footer {
    height: auto;
    width: 100%;
    position: relative;
    box-sizing: border-box;
    font-family: segoe ui;
    background: rgb(66, 66, 66);
    color: white;
    padding: 10px;
    line-height: 1.1;
}
.footer ul {
    margin: 0;
    padding-left: 2px;
    list-style-position: inside;
}
.footer p, .footer li, .quicklinks {
    margin: 0;
    padding: 5px;
}
.footer a {
    color: white;
}
.footer span {
    color: rgb(255, 200, 0);
    font-weight: 500;
    line-height: 1.5;
    font-size: 18px;
}
    .footer-container {
        width: 100%;
        display: flex;
        align-items: first baseline;
        justify-content: flex-start;
        white-space: normal;
        padding: 0 0 5px 0;
        border-bottom: 2px solid rgb(100, 100, 100);
    }
        .contactinfo, .coordinators, .quicklinks {
            flex-grow: 1;
        }
        .footer .backtotop a {
        margin: 0 5px;
        color: rgb(1, 47, 112);
    }
.rights {
    padding: 5px;
}
    .rights p {
    text-align: center;
} 
/*... Footer End ...*/

@media screen and (max-width: 900px) {

/*... Referal Start ...*/
.referal {
    flex-direction: column;
    flex-wrap: wrap;
}
.referal p, .referal a {
    text-align: center;
    font-size: small;
}
.referal p {
    padding-bottom: 5px;
}
.referal img {
    max-width: 70px;
    max-height: auto;
}
/*... Referal End ...*/

/*... Header Start ...*/
    .header {
        flex-direction: column;
    }    
    .header-left {
            width: 100%;
            justify-content: space-between;
        }
    .header-left a {
            font-size: 24px;
        }
        .hamlabel {
            display: block;
            padding: 0 15px
        }
        .hamlabel::before {
            display: block;
            content: "\e5d2";
            font-family: "Material Icons";
            color: white;
            font-size: 32px;
        }
            .navtabs {
                flex-direction: column;
                width: 100%;
                max-height: 0px;
                overflow: hidden;
                transition: 0.3s ease-in-out;
            }
            .navtab {
                border-top: solid black 1px;
                width: 100%;
                box-sizing: border-box;
                border-radius: 0;
            }
            .navtab:active {
            color: rgb(255, 200, 0);
            color: rgb(1, 47, 112);
            }
            #hamtoggle:checked ~ .navtabs {
                max-height: 500px;
            } 
            #hamtoggle:checked ~ .header-left .hamlabel::before {
                content: "\e5cd";
            } 
/*... Header End ...*/  

/*... News Ticker Start ...*/
.newsticker {
    align-items: first baseline;
    font-size: 12px;
    height: 45px;
}
    .newsticker ul {
        animation: scrollNews 25s infinite ease-in-out;
        padding: 3px 0 0 48px;
    }
    @keyframes scrollNews {
        0%, 16% {
            transform: translateY(0);        
        }
        20%, 36% {
            transform: translateY(-45px);        
        }
        40%, 56% {
            transform: translateY(-90px);        
        }
        60%, 76% {
            transform: translateY(-135px);        
        }
        80%, 96% {
            transform: translateY(-180px);        
        }
        100% {
            transform: translateY(0);        
        }
    }
        .newsticker ul li {
                color: white;
                height: 45px;
            }
        .newsticker ul:active {
            animation-play-state: paused;
        }
/*... News Ticker End ...*/

/*... Carousel Start ...*/
.carousel {
    width: 100%;
}    
    .radionav {
        bottom: 10px;
    }
    .rn:active {
        background: rgb(66, 66, 66);
        transform: scale(1.1);
    }
/*... Carousel End ...*/

/*... Content Start ...*/
.intro h1, .degreeprograms h1, .faculty-container h1, .hodmessage h1, .news-events h1, .faculty-p h1, .programs-p h1, .news-events-p h1, .research h1, .resources h1 {
    font-size: 18px;
}
.programs h2, .prog-container h2, .news-events-p h2, .research h2, .resources h2, .resources h2 {
    font-size: 16px;
}
.faculty h3, .eventx th, .fac-profile h3, .eventx-p th, .newsx-p h3 {
    font-size: 14px;
}
.faculty h3 span, .fac-profile h3 span {
    font-size: 12px;
}
.fac-profile h3, .fac-profile h3 span, .fac-profile img {
    align-items: center;
    text-align: center;
}
.newsx-p img, .prog-ms img {
    align-items: flex-start;
    width: 250px;
    height: auto;
}
.intro p, .vision p, .degreeprograms p, .hodmessage p, .fac-profile p, .prog-container p, .news li, .eventx td, .degreeprograms a, .faculty-container a, .backtotop a, 
.news-events-p p, .news-events-p td, .research p, .research li, .resources li {
    font-size: 12px;
}
.facultybox, .message, .programs, .news-events, .fac-profile, .newsx-p {
    flex-direction: column;
    width: 100%;
    box-sizing: border-box;
    gap: 0;
}   
    .message {
        align-items: center;
    }
    .faculty {
        width: 100%;
        box-sizing: border-box;
    }
/*... Content End ...*/

/*... Footer Start ...*/
.footer p, .footer a {
    font-size: 12px;
}
.footer span {
    font-size: 14px;
}
.footer ul {
    padding-left: 2px;
}
    .footer-container {
        flex-direction: column;
    }
        .contactinfo {
            border-bottom: 2px solid rgb(100, 100, 100);
            width: 100%;
            box-sizing: border-box;
        }
        .coordinators {
            border-bottom: 2px solid rgb(100, 100, 100);
            width: 100%;
            box-sizing: border-box;
        }
        .backtotop {
            margin-left: auto;
        }
/*... Footer End ...*/
}