/*
Template Name: College
File: Layout CSS
Author: TemplatesOnWeb
Author URI: https://www.templateonweb.com/
Licence: <a href="https://www.templateonweb.com/license">Website Template Licence</a>
*/
/*********************blog****************/
.blog_pg1r1 ul li a{
background: #eff7ff;
 }
.blog_pg1r1 ul li a i{
color: #333;
 }
.tags li a{
padding: 10px 19px;
display:block;
margin: 0px 1px 5px 1px; 
background: #eff7ff;
 }
.tags li a:hover{
background:#ff7350; 
color:#fff;
 }

/* Enhanced Blog Card Styles */
.blog_pg1l1 {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    background: #fff;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.blog_pg1l1:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.blog_pg1l1 .grid {
    position: relative;
    overflow: hidden;
    border-radius: 12px 12px 0 0;
}

.blog_pg1l1 figure img {
    transition: transform 0.6s ease, filter 0.4s ease;
    width: 100%;
    height: 280px;
    object-fit: cover;
}

.blog_pg1l1:hover figure img {
    transform: scale(1.1);
    filter: brightness(0.9);
}

.blog_pg1l1i {
    border-radius: 0 0 12px 12px !important;
    transition: all 0.3s ease;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    position: relative;
    background: linear-gradient(to bottom, #ffffff 0%, #fafafa 100%);
}

.blog_pg1l1:hover .blog_pg1l1i {
    background: linear-gradient(to bottom, #ffffff 0%, #fff 100%);
}

.blog_pg1l1i h3 {
    font-weight: 600;
    transition: color 0.3s ease;
    line-height: 1.4;
}

.blog_pg1l1:hover .blog_pg1l1i h3 a {
    color: #ff7350;
}

.blog_pg1l1i p {
    color: #666;
    line-height: 1.7;
    margin-bottom: 20px;
    flex-grow: 1;
}

.blog_pg1l1i .button {
    display: inline-block;
    padding: 10px 24px;
    background: linear-gradient(135deg, #ff7350 0%, #ff8a6e 100%);
    color: #fff !important;
    text-decoration: none;
    border-radius: 25px;
    transition: all 0.3s ease;
    font-weight: 500;
    box-shadow: 0 4px 15px rgba(255, 115, 80, 0.3);
}

.blog_pg1l1i .button:hover {
    background: linear-gradient(135deg, #ff8a6e 0%, #ff7350 100%);
    transform: translateX(5px);
    box-shadow: 0 6px 20px rgba(255, 115, 80, 0.4);
}

.blog_pg1l1i .button i {
    transition: transform 0.3s ease;
}

.blog_pg1l1i .button:hover i {
    transform: translateX(3px);
}

.blog_pg1l1i .font_14 {
    background: #f8f9fa;
    padding: 12px 16px;
    margin: -16px -16px 16px -16px;
    border-bottom: 1px solid #e9ecef;
    border-radius: 0;
}

.blog_pg1l1i .font_14 i {
    margin-right: 4px;
}

/* Add subtle animation on card appearance */
.blog_pg1l1 {
    animation: fadeInUp 0.6s ease forwards;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Stagger animation for multiple cards */
.col-md-4:nth-child(1) .blog_pg1l1 { animation-delay: 0.1s; }
.col-md-4:nth-child(2) .blog_pg1l1 { animation-delay: 0.2s; }
.col-md-4:nth-child(3) .blog_pg1l1 { animation-delay: 0.3s; }
.col-md-4:nth-child(4) .blog_pg1l1 { animation-delay: 0.4s; }
.col-md-4:nth-child(5) .blog_pg1l1 { animation-delay: 0.5s; }
.col-md-4:nth-child(6) .blog_pg1l1 { animation-delay: 0.6s; }
.col-md-4:nth-child(7) .blog_pg1l1 { animation-delay: 0.7s; }

/*********************blog_end****************/


@media screen and (max-width : 767px){
.blog_pg1l1i h6{
text-align:center; 
 }
.blog_pg1r{
margin-top:20px; 
 }
.blog_pg1r1 h4{
text-align:center; 
 }
.blog_pg1r1 .social-network{
text-align:center; 
 }
.blog_dt1i1 img{
float:none!important;
margin-right:0!important;
width:100%;
margin-bottom:10px;
 }
.blog_dt1 h4{
text-align:center;  
 }
.blog_dt2il{
text-align:center!important;
margin-top:8px;
margin-bottom:8px;  
 }
.blog_dt3  h3{
text-align:center;  
 }
.blog_dt5  h3{
text-align:center;  
 }
.blog_dt6  h3{
text-align:center;  
 }
.blog_dt6  h6{
text-align:center;  
 }
 }

@media (min-width:576px) and (max-width:767px) {

 }
@media (min-width:768px) and (max-width:991px) {

 }

@media (min-width:992px) and (max-width:1200px) {

 }
@media (min-width:1201px) and (max-width:1250px) {

 }




 .list1 ul {
    display: flex; 
    list-style: none; 
    padding: 0; 
    margin:10px;
}

.list1 li {
    margin-right: 10px; /* Add some spacing between items */
}