@import url('https://fonts.googleapis.com/css2?family=Sixtyfour+Convergence&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
    
    body{
        margin: 0;
        background-color: #ed213a;
        font-family: "Goldman", sans-serif;
        font-weight: 500;
        color: white;
    }

   .logo {
        display: flex; /* Use Flexbox for layout */
        align-items: center; /* Center vertically */
        justify-content: flex-start; /* Align items to the start (left) */
        font-family: "Raleway", sans-serif;
        font-weight: 500;
        color: black;
        text-shadow: 4px 8px 4px rgba(0, 0, 0, 0.25);

    }
    
    .logo img {
        object-fit: cover; /* Ensures the image fills the container proportionally */
        margin-right: 10px; /* Add spacing between images */
        padding-top: 10px;
        width: 100px; /* Set the desired width */
        height: auto; /* Maintains aspect ratio */
        max-width: 100% ; /* Ensures responsiveness */
    }

    
    .tup-name {
        font-family: "Goldman", sans-serif;
        font-weight:bold;
        color: white;
        white-space: nowrap; /* Prevent the text from breaking to a new line */
    }
    
    
    

    .icon {
        font-size: 30px; /* Set icon size */
        color: white; /* Default color */
        transition: color 0.3s; /* Smooth color transition */
    }
    
    
    

    .content {
        font-family: "Goldman", sans-serif;
        font-weight: 700;
        color: #ffffff;
        text-transform: uppercase;
        font-size: 3vw; /* Adjust the size based on screen width */
        letter-spacing: 2px;
        text-align: left;
        position: relative; /* To position the shadow properly */
        z-index: 10; /* Ensure it's on top of any overlay */
        transition: opacity 0.5s ease, transform 0.5s ease;
        padding: 40px;
    }
    
    .content h1{
                text-shadow: 4px 8px 4px rgba(0, 0, 0, 0.25);
                
    }
    
    /* Optional: Add an overlay to make text stand out more against the background */

    

        /* Top Banner */
        .top-banner {
            background-color: white;
            white-space: nowrap;
            overflow: hidden;
            width: 100%; /* Ensure it spans the full width */
            position: fixed; /* Make it stick to the top */
            margin-top: 0.5%; /* Keep it at the top of the page */
            z-index: 30; /* Place it above other elements */
        }
        
        .banner-text {
            display: flex;
            justify-content: flex-start; /* To ensure text flows naturally */
            animation: scrollBanner 15s linear infinite;
        }
        
        .banner-text span {
            padding: 5px;
            color: #ed213a;
            font-weight: bold;
            font-family: "Sixtyfour Convergence", sans-serif;
            font-style: normal;

        }
        
    /* Animation to scroll the text */
    @keyframes scrollBanner {
        0% {
            transform: translateX(100%);
        }
        100% {
            transform: translateX(-100%);
        }
    }

    .enlistnow .btn {
        background-color: #ffffff;
        color: #ed213a;
        padding: 10px 20px;
        border-radius: 20px;
        text-decoration: none;
        display: inline-block;
        font-size: 30px;
    }
    
    .enlistnow .btn:hover {
        transform: translateY(-2px);
        box-shadow: 4px 8px 4px rgba(0, 0, 0, 0.25);

    }
    
    .container-fuild{
        height: 100vh;
        overflow-x: hidden;
        perspective: 50px;
    }
    
    .banner{
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        transform-style: preserve-3d;
    }
    
    
    .content{
        font-size: 75px;
        transform: translateZ(10px)
    }
    .container{
        width: 1200px;
        max-width: 100%;
        margin: auto;
        padding-bottom: 100px;
    }
    header{
        position: absolute;
        top: 0;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        width: 1200px;
        max-width: 100%;
        padding-top: 50px;
    }
    header .logo{
        font-size: xx-large;
    }
    header .enlistnow{
        display: flex;
        justify-content: flex-start;
  
    }
    header button{
        background-color: #010001;
        color: #fff;
        padding: 10px 20px;
        border-radius: 20px;
    }
    nav ul{
        list-style: none;
        display: flex;
        justify-content: flex-end;
    }
    nav ul li{
        padding: 10px;
    }
    
    nav ul li a:hover .icon {
        text-shadow: 4px 8px 4px rgba(0, 0, 0, 0.25);
        transform: translateY(-2px);
    }

/* Responsive Design */
@media (max-width: 768px) {
    .content {
        font-size: 5vw; /* Adjust for smaller screens */
    }

    .enlistnow .btn {
        font-size: 1rem; /* Smaller button size */
    }

    header {
        flex-direction: row;
        align-items: center;
        text-align: center;
    }

    nav ul {
        flex-direction: row;
        gap: 10px;
    }
    .tup-name{
        font-size:5vw;
    }
}

@media (max-width: 480px) {
    .content {
        font-size: 6vw; /* Even smaller for mobile screens */
    }

    .enlistnow .btn {
        padding: 8px 15px; /* Adjust button size */
    }

    nav ul {
        gap: 5px;
    }

    nav ul li a {
        font-size: 1.2rem; /* Smaller icons */
    }
    .tup-name{
        font-size:6vw;
    }
}

    .library {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: auto;
        gap: 50px;
        margin-top: 100px;
    }

    .library1{
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        grid-template-rows: auto;
        gap: 50px;
        margin-top: 100px;
    }


    /* Style each item */
    .item {
        display: flex;
        flex-direction: column;
        align-items: center;
        transition: 0.5s;
    }

    /* Image styling */
    .image-container {
        width: 100%;
        height: 200px;
        background-size: cover;
        background-position: center;
        position: relative;
    }

    /* Description box styling */
    .description-box {
        width: 100%;
        background: rgb(255, 255, 255); /* Dark background for readability */
        color: black;
        padding: 10px;
        text-align: center;
        position: relative;
        transition: max-height 1s ease; /* Smooth expand effect */
        overflow: hidden; /* Hide text overflow */
        max-height: 70px; /* Height for brief description */
    }

    /* Initial style for the detailed description */
    .hover-description {
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        transition: opacity 1s ease, max-height 1s ease;
    }

    /* Expand on hover */
    .item:hover .description-box {
        max-height: 700px; /* Adjust this height for the full dropdown effect */
    }

    .item:hover .hover-description {
        max-height: 700px; /* Enough to show full text */
        opacity: 1; /* Make it visible */
    }


    .des{
        width: 70%;
        text-align: center;
        margin: 100px auto;
        transition: 0.5s;
        transform: translateY(30px);
        opacity: 0;
    }
    .library.active .item{
        opacity: 1;
    }
    .des.active{
        opacity: 1;
        transform: translateY(0px);
    }

    .card {
        width: 195px;
        height: 285px;
        background: #ffffff;
        border-radius: 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: black;
        transition: 0.2s ease-in-out;
      }
      
      .img {
        height: 30%;
        position: absolute;
        transition: 0.2s ease-in-out;
        z-index: 1;
      }
      
      .textBox {
        opacity: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 15px;
        transition: 0.2s ease-in-out;
        z-index: 2;
      }
      
      .textBox .text {
        font-weight: bold;
      }
      
      .textBox .head {
        font-size: 20px;
        text-align: center;
      }
      
      .textBox .price {
        font-size: 17px;
      }
      
      .textBox span {
        font-size: 12px;
        color: black;
      }
      
      .card:hover .textBox {
        opacity: 1;
      }
      
      .card:hover .img {
        height: 65%;
        filter: blur(7px);
        animation: anim 3s infinite;
      }
      
      @keyframes anim {
        0% {
          transform: translateY(0);
        }
      
        50% {
          transform: translateY(-20px);
        }
      
        100% {
          transform: translateY(0);
        }
      }
      
      .card:hover {
        transform: scale(1.04) rotate(-1deg);
      }
      
    
    
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px #a5aaad;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background-color: white;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #a5aaad;
}

.mission-vision-container {
        display: flex;
        flex-direction: column; /* Stack content vertically */
        align-items: center;
        gap: 20px;
        padding: 20px;
        min-height: 800px;
        width: 100%;
        box-sizing: border-box;
        background-color: #ffffffcc; /* Semi-transparent background */
        border-radius: 10px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Adds depth */
    }
    
    .mission-vision-container h2 {
        font-size: 1.8rem;
        color: #ffffff;
        text-align: center;
        margin-bottom: 10px;
    }
    
    .mission-vision-container p {
        font-size: 1rem;
        color: #ffffff;
        line-height: 1.5;
        text-align: justify;
        padding: 10px;
    }
    
    .allcard {
        display: flex; /* Use flexbox for responsive layout */
        flex-wrap: wrap; /* Allow cards to wrap to the next row */
        gap: 200px; /* Add spacing between cards */
        justify-content: center; /* Center-align cards inside the container */
        align-items: stretch; /* Ensure cards stretch to match height dynamically */
        width: 100%; /* Ensure the width matches the parent container */
        box-sizing: border-box; /* Prevent padding from affecting size */
    }
    
    .book {
    position: relative;
    border-radius: 10px;
    width: 500px;
    height: 800px;
    background-color: #ED213A;
    -webkit-box-shadow: 1px 1px 12px #000;
    box-shadow: 1px 1px 12px #000;
    -webkit-transform: preserve-3d;
    -ms-transform: preserve-3d;
    transform: preserve-3d;
    -webkit-perspective: 2000px;
    perspective: 2000px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    color: #000;
  }
  
  .cover {
    top: 0;
    position: absolute;
    background-color: #ED213A;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    cursor: pointer;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
    -webkit-transform-origin: 0;
    -ms-transform-origin: 0;
    transform-origin: 0;
    -webkit-box-shadow: 1px 1px 12px #000;
    box-shadow: 1px 1px 12px #000;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
  }
  
  .book:hover .cover {
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
    -webkit-transform: rotatey(-80deg);
    -ms-transform: rotatey(-80deg);
    transform: rotatey(-80deg);
  }
  
  .book p {
    font-size: 15px;
    text-align:center;
    padding:50px;
    color: #fff;
    background-color: #ED213A;
  }

  .book h1{
    color: #fff;
  }
  
  
  .department-section {
            margin-top:50px;
            position: relative;
            padding: calc(var(--spacing-unit) * 2);
            border-radius: 10px;
            overflow: hidden;
            color: white;
            text-align: center;
            background-color: #ffffffcc;
            
        }

        .department-title {
            font-size: 50px;
            margin-bottom: 20px;
            text-shadow: var(--shadow);
            position: relative; /* Make the title positionable */
            z-index: 2; /* Bring it in front of the background image */
        }
        
        .item {
        display: flex;
        flex-direction: column;
        align-items: center;
        transition: 0.5s;
    }
    
    .card5 {
        width: 300px;
        max-width: 100%;
        height: 500px;
        background: #ffffff;
        border-radius: 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: black;
        transition: 0.2s ease-in-out;
        margin-bottom: 50px;
      }
      
      .img5 {
        height: 30%;
        position: absolute;
        transition: 0.2s ease-in-out;
        z-index: 1;
      }
      
      .textBox5 {
        opacity: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 15px;
        transition: 0.2s ease-in-out;
        z-index: 2;
      }
      
      .textBox5 .text {
        font-weight: bold;
      }
      
      .textBox5 .head {
        font-size: 30px;
        text-align: center;
      }
      
      
      .textBox5 span {
        font-size: 24px;
        color: black;
      }
      
      .card5:hover .textBox5 {
        opacity: 1;
      }
      
      .card5:hover .img5 {
        height: 65%;
        filter: blur(20px);
        animation: anim 3s infinite;
        transition: filter 0.3s ease-out;
      }
      
      .faculty-section {
            text-align: center;
            padding: 20px;
        }

        .faculty-title {
            color: white;
            font-size: 50px;
            margin-bottom: 20px;
            text-shadow: var(--shadow);
        }

.library1{
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 50px;
        justify-items: center;  /* Centers items horizontally */
    align-items: center;    /* Centers items vertically */
    margin-top: 100px;
    }
    @media screen and (max-width: 768px) {
        .library1 {
            grid-template-columns: repeat(2, 1fr);
            
        }
    }
    @media screen and (max-width: 480px) {
        .library1 {
            grid-template-columns: 1fr; /* 1 column for very small screens */
        }
        
        .department-section h2{
            font-size: 30px;
        }
        
    }
    
    .card {
        width: 195px;
        max-width: 100%;
        height: 285px;
        background: #ffffff;
        border-radius: 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: black;
        transition: 0.2s ease-in-out;
      }
      
      .img {
        height: 30%;
        position: absolute;
        transition: 0.2s ease-in-out;
        z-index: 1;
      }
      
      .textBox {
        opacity: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 15px;
        transition: 0.2s ease-in-out;
        z-index: 2;
      }
      
      .textBox .text {
        font-weight: bold;
      }
      
      .textBox .head {
        font-size: 20px;
        text-align: center;
      }
      
      
      .textBox span {
        font-size: 12px;
        color: black;
      }
      
      .card:hover .textBox {
        opacity: 1;
      }
      
      .card:hover .img {
        height: 65%;
        filter: blur(20px);
        animation: anim 3s infinite;
        transition: filter 0.3s ease-out;
      }
      
      .about-section {
            max-width: 1200px;
            margin: 0 auto;
            padding: var(--spacing-unit);
            color: var(--white);
            text-align: center;
            font-size: clamp(1rem, 2vw, 1.25rem);
        }