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

#m1{
    height:auto;
    /* border: 2px solid red; */
    background-image: url(image/mu.png);
    
}


@media (max-width: 720px){
    #m1{
        display: flex;
        flex-direction: column;
    }
  
}

#m1 #b1{
    height: 450px;
  
    margin-top: 80px;
}

#m1 #b2{
    height: 450px;
     
    margin-top: 80px;
    
}

 #apply{
    height:30px;
    border-radius: 25px;
    line-height: 100%;
    margin-top:4px;
 }

 #logo{
    width:200px;
    height: 70px;
 }

 #head2{
    position: fixed;
    width: 100%;
    z-index:1;
 }

.content{
    width: 100%;
    height:400px;
    /* border: 2px solid black; */
     

}
 
.content img{
    width: 100%;
    height: 100%;
    position:center;
    border-radius: 10px;

}

#courses{
    margin-left:8%;
}

#courses a:hover{
    border-bottom: 1px solid black;
}

#con3{
    /* border: 2px solid black; */
    height:auto;
}

#c1 , #c2{
    height:auto;
     /* border: 1px solid red; */
} 

.hover-scale:hover {
    transform: scale(1.05);
    transition: 0.3s;
    background: rgb(177, 207, 207);
}


#rpng{
   width: 100%;
   height: 100%;
}
 
 

.box-hover:hover{
    cursor: pointer;
    border: 1px dotted blue;
    
}


 .card-img-overlay {
      background: rgba(0, 0, 0, 0.4); /* dark overlay */
      display: flex;
      align-items: flex-end;
      justify-content: center;
      border-radius: 15px;
    }
    .card-title {
      font-size: 1.2rem;
      font-weight: bold;
      color: white;
      text-align: center;
    }

    .first{
        height: 400px;
    }

    .card {
      overflow: hidden; /* Ensures the rounded corners apply to the image */
    }

    .card-img {
      object-fit: cover; /* Prevents image from stretching */
      width: 100%;
      height: 100%;
    }

    /* Make the card text more readable with a slight gradient */
    .card-img-overlay {
      background: linear-gradient(to top, rgba(0,0,0,0.7), rgba(0,0,0,0));
      display: flex;
      align-items: flex-end; /* Aligns title to the bottom */
    }

    .card-title {
      font-weight: bold;
      padding-left: 0.5rem;
      padding-bottom: 0.2rem;
    }

    /* Style for the smaller, squarer cards */
    .small-card .card-img {
      aspect-ratio: 1 / 1; /* Makes the images square */
    }

    @media (max-width:720px){

       #firsthead{
        display: none;
       }


      
    }