* {
    font-family: 'Times New Roman', Times, serif;
}

body {
    background-image: url('100.jpeg');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    /* Adjust as needed */
    background-position: center;
    font-family: 'Times New Roman', Times, serif;
    margin: 15%;

    margin-top: 0;
    margin-bottom: 0;
    padding: 2%;
    background-color: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(50px);
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.9);


    background-color: white;
    /*margin-right: 15%;
    margin-left: 15%; */



}

@media only screen and (max-width: 600px) {
    body {
        margin: 0;
        padding: 5%;
    }
}

/*.p1 {
        font-size: 300%;
        text-align: center;
        margin-top: 15%;
        color: rgb(255, 255, 255);

        font-family: 'Times New Roman', Times, serif;
    }*/

.nav-link:hover {
    text-decoration: underline;
}

.section1 {
    background-color: white;
    height: auto;
    /* margin-top: 15%; */
}

.section2 {

    height: auto;
    text-align: center;


}

.news {

    padding: 5%;

}

.column {
    float: left;
    width: 40%;
}

.row:after {

    display: table;
    clear: both;
}

footer {
    background-color: #333;
    margin-bottom: 0;
    padding-bottom: 0;
    font-size: larger;
    color: white;
    text-align: center;
    border-top: 1px solid grey;

}

.mycorusal {
    z-index: -1;

    margin-top: 0;

    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.9);




    margin-bottom: 0;
}

header {
    margin-top: 3%;
    text-align: center;
    color: #006699;
}

#nav1 {
    color: #006699;
    font-size: 15px;
}

.subnewsr {
    font-size: 15px;
}

.footer1 {
    height: fit-content;
    margin: 0;
    padding: 0;
    background-color: #333;
    color: white;
}

footer {
    margin: 0;
    padding: 2%;
}

.column1 {
    display: inline-grid;
    text-align: center;
    padding-left: 18%;
    padding-top: 0;

    font-size: 15px;
}

.strip {
    background-color: black;
    color: white;
    margin: 0;
    padding: 0;
}

.area1 {
    margin: 15%;
    margin-top: 0;
    margin-bottom: 0;
}

#nav1 {
    /*margin: 15%;*/
    margin-top: 1%;
    margin-bottom: 1%;
    border-top: 1px solid black;
    border-bottom: 1px solid black;
}

.responsive {
    height: auto;
    max-width: 100%;

}

.ticker-container {
    color: blue;
    overflow: hidden;
    height: 500x;
    /* Adjust the height as needed */
    border: 1px solid #ccc;
    margin: 0;

    margin-top: 2%;
    margin-bottom: 1%;
}

/* Style for the ticker content */
.ticker-content {
    display: flex;
    flex-direction: column;
    animation: tickerAnimation 15s linear infinite;
    /* Adjust the animation duration as needed */
}

/* Animation for the ticker */
@keyframes tickerAnimation {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(-100%);
    }
}

/* Style for individual news items */
.ticker-item {
    padding: 10px;
    border-bottom: 1px solid #ccc;
    text-align: center;
}

/* Animation for the typing effect */
@keyframes typing {
    from {
        width: 0;
    }

    to {
        width: 100%;
    }
}

/* Apply the typing animation to the text */
.typing-text {
    overflow: hidden;
    /* Hide overflowing characters */
    white-space: nowrap;
    /* Prevent text from wrapping */
    animation: typing 3s steps(40, end) infinite;
    /* Adjust duration and steps as needed */
}

.left1 {
    border-right: 2px solid white;
}

.highlights {
    margin: 15%;
    margin-top: 0;
    margin-bottom: 2%;
}

.labs {

    margin-top: 2%;
    margin-bottom: 2%;
}



.labs {
    height: 300px;
    background-color: #333;
    color: white;
}



/* Responsive styles for smaller screens (e.g., phones) */
@media only screen and (max-width: 600px) {
    .square2 {
        left: 0;
        transform: none;
        text-align: center;
        /* Optionally center the element within the container */
    }
}

.fq {
    max-width: 800px;
    margin: 50px auto;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background-color: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(50px);
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.9);
}

.faq-item {
    margin-bottom: 20px;
}

.question {
    font-weight: bold;
    color: #333;
}

.answer {
    color: #555;
}

.gallery img {
    width: 100%;
    height: auto;
    transition: transform 0.2s ease-in-out;
    cursor: pointer;
}

.gallery img:hover {
    transform: scale(1.1);
}

.container1 {
    max-width: 100%;
    padding: 0 15px;
    margin: 0 auto;
}

.responsive1 {
    max-width: 100%;
    height: auto;
}

.typing {
    font-size: 24px;
    /* Default font size */
}

@media (max-width: 768px) {

    /* Adjust font size for smaller screens */
    .typing h2 {
        font-size: 12px;
    }
}

.academicunits {
    margin-top: 2%;
    background-color: rgba(255, 255, 255, 0.3);
    padding: 4%;
    border-radius: 10px;
}

.departments {
    text-align: center;
}

.departments h5 {
    padding-bottom: 2%;
    color: blue;
}

.departments a {
    font-size: 300%;
    padding: 2%;
    display: block;
    /* Ensure each link is on a new line */
}

@media (max-width: 768px) {

    /* Adjust styles for smaller screens */
    .academicunits {
        padding: 2%;
    }

    .departments h5 {
        font-size: 150%;
        /* Reduce heading font size */
    }

    .departments a {
        font-size: 200%;
        /* Reduce link font size */
    }

    .l {
        width: 100%;
        height: 100%;
        position: relative;
        overflow: hidden;
    }

    .l img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        position: absolute;
        opacity: 0;
        transition: opacity 1s ease-in-out;
    }

    .l img.active {
        opacity: 1;
    }

}

/*class for transparent background*/

.bg-transparent-filter {
    margin-top: 2%;
    background-color: rgba(255, 255, 255, 0.3);
    padding: 4%;
    border-radius: 10px;
}

/* below class is for the background grey effect */

.gs {
    margin-top: 2%;
    background-color: rgba(255, 255, 255, 0.3);
    padding: 1%;
    border-radius: 10px;
}

#myPlantationImage {
    transition: opacity 1s ease-in-out; /* You can adjust the duration and timing function */
}