/* =======================================
   GROUPED WEBSITE SECTION
======================================= */

.smart-sites-section{
    max-width:1200px;
    margin:50px auto;
    padding:0 20px;
}

.smart-sites-section .section-title{
    text-align:center;
    font-size:34px;
    color:#800020;
    margin-bottom:8px;
    font-weight:700;
}

.sites-subtitle{
    text-align:center;
    color:#666;
    margin-bottom:35px;
    font-size:16px;
}

.faculty-sites-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:24px;
}

.site-group{
    background:#fff;
    border-radius:18px;
    padding:22px;
    box-shadow:0 10px 25px rgba(0,0,0,0.08);
    border:1px solid #eee;
    transition:0.3s ease;
}

.site-group:hover{
    transform:translateY(-6px);
    box-shadow:0 18px 30px rgba(128,0,32,0.15);
}

.group-head{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:18px;
    padding-bottom:12px;
    border-bottom:2px solid #f2f2f2;
}

.group-icon{
    font-size:30px;
}

.group-head h3{
    margin:0;
    font-size:20px;
    color:#800020;
    line-height:1.3;
}

.mini-link{
    display:block;
    text-decoration:none;
    background:#f9f4f5;
    color:#333;
    padding:12px 14px;
    border-radius:10px;
    margin-bottom:10px;
    font-size:15px;
    transition:0.3s ease;
}

.mini-link:hover{
    background:#800020;
    color:#fff;
    transform:translateX(5px);
}

.featured-link{
    background:#800020;
    color:#fff;
    font-weight:600;
}

.main-group{
    background:linear-gradient(135deg,#800020,#a10030);
}

.main-group .group-head h3,
.main-group .mini-link,
.main-group .group-icon{
    color:#fff;
}

.main-group .group-head{
    border-color:rgba(255,255,255,0.2);
}

.main-group .mini-link{
    background:rgba(255,255,255,0.15);
}

.main-group .mini-link:hover{
    background:#fff;
    color:#800020;
}

.service-group{
    background:#fffaf0;
}

@media(max-width:768px){

    .smart-sites-section .section-title{
        font-size:28px;
    }

    .faculty-sites-grid{
        grid-template-columns:1fr;
        gap:18px;
    }

    .site-group{
        padding:18px;
    }

    .group-head h3{
        font-size:18px;
    }

    .mini-link{
        font-size:14px;
    }
}