/* 
========================================================================================
LEGAL NOTICE & DEVELOPER DISCLAIMER (Fair Use & Parody)
========================================================================================

[ENGLISH]
LEGAL NOTICE: This source code and associated website are created strictly for educational, security research, and demonstration purposes. It is a parody/spoof and is NOT affiliated with, nor endorsed by, IKGPTU. Any use of this code to generate fake results, commit forgery, personation, or fraud is strictly prohibited and illegal under applicable laws (including Section 66D of the IT Act). Created under Fair Use (Section 52 of the Copyright Act, 1957), Trademark Nominative Fair Use, and Article 19(1)(a). The developer assumes ZERO liability for any misuse of this code.

[HINDI]
कानूनी सूचना: यह सोर्स कोड और वेबसाइट केवल शैक्षिक, सुरक्षा अनुसंधान और प्रदर्शन उद्देश्यों के लिए बनाई गई है। यह एक स्पूफ/पैरोडी है और IKGPTU से संबद्ध नहीं है। इस कोड का उपयोग फर्जी परिणाम बनाने, जालसाजी या किसी भी धोखाधड़ी के लिए करना सख्त वर्जित और लागू कानूनों के तहत गैरकानूनी है। इसके किसी भी दुरुपयोग के लिए डेवलपर की कोई जिम्मेदारी नहीं होगी।

[PUNJABI]
ਕਾਨੂੰਨੀ ਨੋਟਿਸ: ਇਹ ਸੋਰਸ ਕੋਡ ਅਤੇ ਵੈੱਬਸਾਈਟ ਸਿਰਫ਼ ਵਿਦਿਅਕ, ਖੋਜ ਅਤੇ ਪ੍ਰਦਰਸ਼ਨ ਦੇ ਉਦੇਸ਼ਾਂ ਲਈ ਬਣਾਈ ਗਈ ਹੈ। ਇਹ ਇੱਕ ਪੈਰੋਡੀ ਹੈ ਅਤੇ IKGPTU ਨਾਲ ਸਬੰਧਤ ਨਹੀਂ ਹੈ। ਇਸ ਕੋਡ ਦੀ ਵਰਤੋਂ ਜਾਅਲੀ ਨਤੀਜੇ ਬਣਾਉਣ, ਜਾਲਸਾਜ਼ੀ ਜਾਂ ਧੋਖਾਧੜੀ ਲਈ ਕਰਨਾ ਸਖ਼ਤ ਮਨ੍ਹਾ ਹੈ ਅਤੇ ਗੈਰ-ਕਾਨੂੰਨੀ ਹੈ। ਡਿਵੈਲਪਰ ਕਿਸੇ ਵੀ ਗਲਤ ਵਰਤੋਂ ਲਈ ਜ਼ਿੰਮੇਵਾਰ ਨਹੀਂ ਹੋਵੇਗਾ।

[PUNJABI (ROMANIZED)]
KANUNI NOTICE: Eh source code ate website sirf vidyak, khoj ate pradarshan de udeshan lai banai gai hai. Eh ik parody hai ate IKGPTU nal sabandhat nahi hai. Is code di varton jali nateeje banaun, jalsazi jan dhokhadhari lai karna sakht mana hai ate gair-kanuni hai. Developer kise vi galat varton lai zimmewar nahi hovega.

[HINGLISH]
LEGAL WARNING: Yeh website aur source code sirf education, research aur demonstration purpose ke liye banaya gaya hai. Yeh official portal nahi hai. Is code ka use fake marksheet banane, forgery ya kisi bhi illegal fraud ke liye karna strict offence hai (IT Act ke under). Agar koi iska galat use karta hai, toh developer uske liye bilkul bhi liable nahi hoga.
========================================================================================
*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif;
}

html, body {
    background-color: #f6f6f6;
    overflow-x: hidden;
    width: 100%;
}

/* Top Header */
.top-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 30px;
    background-color: #fff;
    border-bottom: 2px solid #ddd;
}

.logo-section {
    display: flex;
    align-items: center;
    gap: 15px;
}

.logo {
    width: 80px;
    height: 80px;
    border-radius: 50%;
}

.university-name {
    display: flex;
    flex-direction: column;
}

.punjabi-text {
    font-size: 17px;
    color: #1b3664; 
}

.english-text {
    font-size: 19px;
    color: #cc292b;
    font-weight: 700;
    margin: 3px 0;
    letter-spacing: 0.5px;
}

.sub-text {
    font-size: 12px;
    color: #1b3664;
    font-weight: 700;
}

.header-links {
    text-align: right;
    font-size: 13px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 60px;
}

.top-links {
    color: #333;
    font-weight: 500;
}

.top-links a {
    color: #333;
    text-decoration: none;
    margin: 0 4px;
}

.top-links a:hover {
    color: #cc292b;
}

.enquiry-info {
    color: #000;
    font-size: 14px;
}

.timing {
    font-size: 12px;
    color: #555;
}

/* Main Navigation */
.main-nav {
    background-color: #1b3664;
    padding: 0;
}

.main-nav ul {
    list-style: none;
    display: flex;
    justify-content: center;
    align-items: center;
}

.main-nav ul li {
    position: relative;
    border-right: 1px solid rgba(255,255,255,0.1);
}

.main-nav ul li:last-child {
    border-right: none;
}

.main-nav ul li a {
    display: block;
    padding: 15px 12px;
    color: #fff;
    text-decoration: none;
    font-size: 12px;
    font-weight: 500;
}

.main-nav ul li:hover > a {
    background-color: rgba(255,255,255,0.1);
}

.main-nav ul li.home-icon {
    background-color: #243e6c;
}

.main-nav ul li.home-icon a {
    font-size: 14px;
    padding: 14px 20px;
}

.main-nav ul li a i.fa-chevron-down {
    font-size: 9px;
    margin-left: 5px;
    opacity: 0.7;
}

/* Sub Navigation */
.sub-nav {
    display: flex;
    width: 100%;
}

.nav-box {
    flex: 1;
    text-align: center;
    padding: 18px 10px;
    font-weight: 600;
    font-size: 14px;
    color: #fff;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-box.red { background-color: #c8232c; }
.nav-box.dark-blue { background-color: #1b3664; }
.nav-box.yellow { background-color: #ffeb00; color: #1b3664; }
.nav-box.orange { background-color: #eb4335; }
.nav-box.green { background-color: #00b159; }

/* Announcements Bar */
.announcements-bar {
    display: flex;
    border-bottom: 1px solid #ddd;
    background-color: #fff;
    height: 45px;
}

.announcements-label {
    background-color: #0c2340;
    color: #fff;
    padding: 0 25px;
    font-weight: 500;
    font-size: 15px;
    display: flex;
    align-items: center;
    white-space: nowrap;
}

.announcements-label .dot {
    width: 12px;
    height: 12px;
    background-color: #c9cdd4;
    border-radius: 50%;
    margin-right: 12px;
}

.announcements-ticker {
    flex: 1;
    display: flex;
    align-items: center;
    font-size: 16px;
    color: #333;
}

.announcements-ticker marquee {
    padding-top: 2px;
}

/* Main Content */
.main-content {
    padding: 40px;
    max-width: 1250px;
    margin: 0 auto;
}

.welcome-title {
    text-align: center;
    margin-bottom: 30px;
}

.welcome-title h1 {
    font-size: 38px;
    color: #1b3664;
    font-weight: 900;
    letter-spacing: -1px;
}

.welcome-title h1 span {
    color: #c8232c;
}

.divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    color: #1b3664;
    margin-top: 10px;
}

.divider .line {
    height: 1px;
    width: 40px;
    background-color: #cc292b;
}

.divider i {
    font-size: 20px;
}

.content-grid {
    display: flex;
    gap: 20px;
}

.column {
    background-color: #fff;
    box-shadow: 0 0 5px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
}

.column:first-child {
    flex: 0 0 24%;
}
.column:nth-child(2) {
    flex: 0 0 48%;
    background: transparent;
    box-shadow: none;
}
.column:last-child {
    flex: 0 0 28%;
}


.section-header {
    padding: 12px;
    text-align: center;
    color: #fff;
    font-weight: 500;
    font-size: 15px;
}

.red-header {
    background-color: #c8232c;
}

/* VC Card */
.vc-card {
    padding: 20px;
    text-align: center;
    flex: 1;
}

.vc-card img {
    width: 100%;
    margin-bottom: 15px;
}

.vc-card h3 {
    color: #1b3664;
    margin-bottom: 8px;
    font-size: 18px;
    font-weight: 700;
}

.vc-card p {
    color: #1b3664;
    font-weight: 600;
    font-size: 14px;
    line-height: 1.5;
}

/* Tabs */
.tabs {
    display: flex;
    gap: 2px;
}

.tab {
    flex: 1;
    background-color: #888;
    color: #fff;
    text-align: center;
    padding: 12px 5px;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.active-tab {
    background-color: #c8232c;
}

.tab-content {
    background-color: #fff;
    padding: 20px;
    flex: 1;
    box-shadow: 0 0 5px rgba(0,0,0,0.1);
    border: 1px solid #eee;
}

.fake-scrollbar-line {
    height: 8px;
    background-color: #f1f1f1;
    border-radius: 4px;
    width: 90%;
    margin: 0 auto;
    border: 1px solid #e0e0e0;
}

.red-text {
    color: #c8232c;
    font-size: 18px;
    font-weight: 700;
}

/* Notice Board */
.notice-list-container {
    display: flex;
    height: 380px;
    padding-top: 10px;
}

.notice-list {
    flex: 1;
    padding: 0 15px;
    overflow: hidden; /* To hide real scrollbar since we style a custom one visually */
}

.notice-item {
    padding: 12px 0;
    border-bottom: 1px solid #eee;
}

.notice-item:first-child {
    padding-top: 0;
}

.notice-item:last-child {
    border-bottom: none;
}

.notice-title {
    color: #333;
    font-size: 13px;
    line-height: 1.4;
    margin-bottom: 4px;
    display: flex;
    align-items: flex-start;
}

.square-bullet {
    display: inline-block;
    width: 6px;
    height: 6px;
    background-color: #333;
    margin-top: 5px;
    margin-right: 8px;
    flex-shrink: 0;
}

.notice-date {
    color: #c8232c;
    font-size: 13px;
    padding-left: 14px;
}

.scrollbar-gutter {
    width: 10px;
    background-color: #f1f1f1;
    margin-right: 5px;
    border-radius: 5px;
    position: relative;
}

.scroll-thumb {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100px;
    background-color: #c1c1c1;
    border-radius: 5px;
}

.read-more-container {
    padding: 15px;
    text-align: right;
}

.read-more-btn {
    display: inline-block;
    padding: 4px 15px;
    color: #c8232c;
    text-decoration: none;
    border: 1px solid #c8232c;
    font-size: 13px;
    border-radius: 2px;
    transition: all 0.2s;
}

.read-more-btn:hover {
    background-color: #c8232c;
    color: #fff;
}

/* Important Links Section */
.important-links-section {
    padding: 40px;
    max-width: 1250px;
    margin: 0 auto;
}

.important-links-container {
    background-color: #fff;
    box-shadow: 0 0 5px rgba(0,0,0,0.1);
}

.il-tabs {
    display: flex;
}

.il-tab {
    flex: 1;
    background-color: #888;
    color: #fff;
    text-align: center;
    padding: 15px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-right: 1px solid rgba(255,255,255,0.2);
}

.il-tab:last-child {
    border-right: none;
}

.il-tab i {
    font-size: 20px;
}

.il-tab.active {
    background-color: #c8232c;
}

.il-content-box {
    display: flex;
    padding: 30px;
    gap: 30px;
}

.il-text {
    flex: 2;
    display: flex;
    flex-direction: column;
}

.il-text p {
    color: #333;
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 15px;
}

.btn-right {
    text-align: right;
    margin-top: auto;
}

.il-image {
    flex: 1;
}

.il-image img {
    width: 100%;
    border-radius: 4px;
}

/* News & Events Section */
.news-events-section {
    padding: 40px;
    max-width: 1250px;
    margin: 0 auto;
}

.news-cards-container {
    display: flex;
    gap: 20px;
}

.news-card {
    flex: 1;
    background-color: #fff;
    box-shadow: 0 0 5px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
}

.news-card img {
    width: 100%;
    height: 180px;
    object-fit: cover;
}

.news-card-content {
    padding: 15px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.news-card-content h4 {
    color: #1b3664;
    font-size: 14px;
    margin-bottom: 10px;
    line-height: 1.4;
}

.news-date {
    color: #c8232c;
    font-size: 12px;
    margin-bottom: 10px;
    font-style: italic;
}

.news-card-content p {
    color: #555;
    font-size: 13px;
    line-height: 1.5;
    margin-bottom: 15px;
}

.mt-auto {
    margin-top: auto;
    align-self: flex-start;
}

.carousel-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 20px;
}

.carousel-dots .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #888;
    cursor: pointer;
}

.carousel-dots .dot.active {
    background-color: #333;
}

/* Glimpses Section */
.glimpses-section {
    padding: 40px;
    max-width: 1250px;
    margin: 0 auto;
}

.collage-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.collage-row {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.collage-img-wrap {
    background: #fff;
    padding: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.collage-img {
    width: 320px;
    height: 200px;
    object-fit: cover;
}

.center-img-wrap {
    transform: scale(1.05);
    z-index: 2;
    position: relative;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.center-img {
    width: 340px;
    height: 210px;
}

.bottom-row {
    margin-top: -20px;
}

/* Footer */
.main-footer {
    background-color: #f8f9fb;
    border-top: 1px solid #ddd;
    margin-top: 50px;
}

.footer-top {
    display: flex;
    max-width: 1250px;
    margin: 0 auto;
    padding: 50px 20px;
    gap: 30px;
}

.footer-col {
    flex: 1;
}

.brand-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.footer-logo {
    width: 120px;
    margin-bottom: 20px;
}

.social-icons {
    display: flex;
    gap: 15px;
}

.social-icons a {
    color: #fff;
    background-color: #1b3664;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    text-decoration: none;
    font-size: 14px;
}

.links-col h3, .address-col h3 {
    color: #1b3664;
    font-size: 15px;
    margin-bottom: 20px;
    font-weight: 600;
}

.links-col ul {
    list-style: none;
}

.links-col ul li {
    margin-bottom: 10px;
    position: relative;
    padding-left: 10px;
}

.links-col ul li::before {
    content: "•";
    color: #eee;
    position: absolute;
    left: 0;
}

.links-col ul li a {
    color: #333;
    text-decoration: none;
    font-size: 12px;
    font-weight: 500;
}

.links-col ul li a:hover {
    color: #c8232c;
}

.address-col p {
    color: #333;
    font-size: 13px;
    line-height: 1.6;
    margin-bottom: 10px;
}

.footer-bottom {
    background-color: #0c2340;
    color: #fff;
    padding: 20px 40px;
    text-align: left;
}

.disclaimer {
    font-size: 11px;
    color: #aaa;
    line-height: 1.5;
    margin-bottom: 15px;
    text-align: justify;
}

.copyright {
    font-size: 13px;
}

/* Responsive Mobile Styles */
@media (max-width: 900px) {
    /* Header adjustments */
    .top-header { flex-direction: column; text-align: center; padding: 15px 10px; }
    .logo-section { flex-direction: column; margin-bottom: 10px; }
    .logo { margin-right: 0; margin-bottom: 10px; width: 70px; }
    .university-name { text-align: center; }
    .university-name .punjabi-text { font-size: 14px; }
    .university-name .english-text { font-size: 14px; text-align: center; }
    .university-name .sub-text { font-size: 10px; text-align: center; }
    .header-links { margin-top: 15px; align-items: center; width: 100%; }
    .top-links { justify-content: center; flex-wrap: wrap; line-height: 1.8; margin-bottom: 10px; }
    .enquiry-info { text-align: center; }
    
    /* Navigation adjustments */
    .main-nav ul { flex-direction: column; }
    .main-nav ul li { margin-bottom: 2px; border-bottom: 1px solid rgba(255,255,255,0.1); width: 100%; text-align: center; }
    .main-nav ul li:last-child { border-bottom: none; }
    
    .sub-nav { flex-wrap: wrap; }
    .nav-box { flex: 1 1 48%; font-size: 11px; padding: 12px 5px; }

    /* Announcements adjustments */
    .announcements-bar { flex-direction: column; height: auto; }
    .announcements-label { padding: 10px; width: 100%; justify-content: center; }
    .announcements-ticker { padding: 10px; width: 100%; }

    /* Content adjustments */
    .main-content { padding: 15px; }
    .content-grid { flex-direction: column; gap: 30px; }
    .column:first-child, .column:nth-child(2), .column:last-child { flex: 1 1 100%; width: 100%; }
    
    /* Tabs inside content */
    .tabs { flex-wrap: wrap; }
    .tab { flex: 1 1 48%; font-size: 12px; padding: 10px 5px; text-align: center; justify-content: center; }
    
    /* Notice board adjustments */
    .notice-item { flex-direction: column; align-items: flex-start; }
    .notice-date { align-self: flex-start; margin-top: 5px; }
    
    /* Footer adjustments */
    .footer-top { flex-direction: column; gap: 30px; align-items: center; }
    .footer-col { text-align: center; padding-right: 0; }
    .footer-col ul li { padding-left: 0; }
    .footer-col ul li::before { display: none; }
    .footer-bottom { text-align: center; padding: 15px; }
}
