/*
Theme Name: PSCPCR
Theme URI: https://pscpcr.punjab.gov.in
Author: PSCPCR
Description: PSCPCR Dynamic Theme
Version: 1.0
Text Domain: pscpcr
*/


.site-nav{
    background:#0b3d91;
    width:100%;
}

.nav-inner{
    max-width:1200px;
    margin:0 auto;
}

.nav-list{
    display:flex;
    list-style:none;
    margin:0;
    padding:0;
}

.nav-list li{
    position:relative;
}

.nav-list li a{
    display:block;
    color:#fff;
    padding:15px 20px;
    text-decoration:none;
    font-weight:500;
}

.nav-list li:hover > a,
.nav-list li.current-menu-item > a,
.nav-list li.current-page-ancestor > a{
    background:#082d6b;
    color:#fff;
}

.nav-list .sub-menu{
    display:none;
    position:absolute;
    top:100%;
    left:0;
    min-width:250px;
    background:#fff;
    z-index:999;
    padding:0;
    list-style:none;
}

.nav-list li:hover > .sub-menu{
    display:block;
}

.nav-list .sub-menu li a{
    color:#333;
    padding:10px 15px;
}

.nav-list .sub-menu li a:hover{
    background:#f5f5f5;
}


.site-nav{
    background:#0b3d91;
}

.nav-list{
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
}

.nav-list > li{
    position:relative;
}

.nav-list > li > a{
    display:block;
    padding:15px 20px;
    color:#fff;
    text-decoration:none;
    font-weight:600;
}

.nav-list li:hover > a{
    background:#072d6c;
}

.nav-list .sub-menu{
    display:none;
    position:absolute;
    top:100%;
    left:0;
    min-width:260px;
    background:#fff;
    box-shadow:0 3px 10px rgba(0,0,0,.15);
    list-style:none;
    padding:0;
    margin:0;
    z-index:9999;
}

.nav-list li:hover > .sub-menu{
    display:block;
}

.nav-list .sub-menu li{
    position:relative;
}

.nav-list .sub-menu li a{
    display:block;
    padding:12px 15px;
    color:#333;
    text-decoration:none;
}

.nav-list .sub-menu li a:hover{
    background:#f5f5f5;
}

.nav-list .sub-menu .sub-menu{
    left:100%;
    top:0;
}

 .timeline { display: flex; flex-direction: column; gap: 0; position: relative; padding-left: var(--space-8); }
    .timeline::before { content: ''; position: absolute; left: 12px; top: 0; bottom: 0; width: 2px; background: var(--color-gray-200); }
    .timeline-item { position: relative; padding-bottom: var(--space-8); }
    .timeline-item:last-child { padding-bottom: 0; }
    .timeline-dot { position: absolute; left: calc(-1 * var(--space-8) + 4px); width: 20px; height: 20px; border-radius: 50%; background: var(--color-primary); border: 3px solid var(--color-white); box-shadow: 0 0 0 2px var(--color-primary); top: 4px; flex-shrink: 0; }
    .timeline-year { font-size: var(--text-xs); font-weight: var(--fw-bold); color: var(--color-accent); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: var(--space-1); }
    .timeline-title { font-size: var(--text-md); font-weight: var(--fw-semibold); color: var(--color-primary); margin-bottom: var(--space-2); }
    .timeline-desc { font-size: var(--text-sm); color: var(--color-gray-500); line-height: 1.7; }
    .mandate-item { display: flex; gap: var(--space-4); padding: var(--space-5); background: var(--color-white); border: 1px solid var(--color-gray-200); border-left: 4px solid var(--color-primary); border-radius: 0 var(--radius-lg) var(--radius-lg) 0; }
    .mandate-num { width: 40px; height: 40px; border-radius: var(--radius-full); background: var(--color-primary); color: white; display: flex; align-items: center; justify-content: center; font-size: var(--text-sm); font-weight: var(--fw-bold); flex-shrink: 0; }
    .member-card { background: var(--color-white); border: 1px solid var(--color-gray-200); border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-card); transition: all var(--transition-base); text-align: center; }
    .member-card:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-3px); }
    .member-photo { width: 110px; height: 110px; border-radius: var(--radius-full); background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light)); margin: var(--space-6) auto var(--space-4); display: flex; align-items: center; justify-content: center; font-size: 48px; color: rgba(255,255,255,0.5); border: 3px solid var(--color-primary); }
    .org-chart { background: var(--color-white); border: 1px solid var(--color-gray-200); border-radius: var(--radius-xl); padding: var(--space-8); text-align: center; }
    .org-level { display: flex; justify-content: center; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-6); position: relative; }
    .org-box { background: var(--color-primary); color: white; padding: var(--space-3) var(--space-5); border-radius: var(--radius-md); font-size: var(--text-sm); font-weight: var(--fw-semibold); min-width: 180px; text-align: center; }
    .org-box.secondary { background: var(--color-primary-light); }
    .org-box.tertiary { background: var(--color-gray-600); font-size: var(--text-xs); }
    .org-connector { text-align: center; font-size: 20px; color: var(--color-gray-300); margin-bottom: var(--space-2); }

      .contact-card { background: var(--color-white); border: 1px solid var(--color-gray-200); border-radius: var(--radius-xl); padding: var(--space-6); box-shadow: var(--shadow-card); text-align: center; transition: all var(--transition-base); }
    .contact-card:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-2px); }
    .contact-icon { width: 64px; height: 64px; border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center; font-size: 28px; margin: 0 auto var(--space-4); }
    .map-placeholder { background: linear-gradient(135deg, var(--color-gray-100), var(--color-gray-200)); border: 1px solid var(--color-gray-300); border-radius: var(--radius-xl); height: 400px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-4); }

.video-gallery-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
}

.video-card{
    background:#fff;
    border-radius:10px;
    overflow:hidden;
    box-shadow:0 2px 10px rgba(0,0,0,.1);
}

.video-frame iframe{
    width:100%;
    height:250px;
}

.video-title{
    padding:15px;
    font-size:18px;
}

.gallery-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:25px;
}

.gallery-item{
    position:relative;
    overflow:hidden;
    border-radius:10px;
    height:250px;
}

.gallery-overlay{
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    padding:15px;
    background:rgba(0,0,0,.6);
    color:#fff;
}