/*Created by: MiHiR (https://github.com/mihir0209)*/

/* Main Content */
       .main-content {
           padding: 0px 0px 40px 0px;
           min-height: 60vh;
           background: transparent;
       }

       .page-header {
           margin-bottom: 0;
       }

       .page-title {
           font-size: 28px;
           font-weight: 600;
           color: white;
           background: #00BCD4;
           margin: 0;
           padding: 15px 30px;
           text-align: left;
           border-radius: 0;
       }

       .content-wrapper {
           display: grid;
           grid-template-columns: 2fr 1fr;
           gap: 40px;
       }

       /* Blog Content */
       .featured-post {
           background: white;
           padding: 30px;
           border-radius: 12px;
           box-shadow: 0 4px 12px rgba(0,0,0,0.1);
           margin-bottom: 30px;
           border-top: 4px solid rgb(0, 182, 221);
       }

       .post-title {
           font-size: 28px;
           font-weight: 700;
           color: #1A365D;
           margin-bottom: 15px;
           line-height: 1.3;
       }

       .post-author {
           color: #666;
           font-style: italic;
           font-weight: 500;
           margin-bottom: 20px;
       }

       .post-date {
           color: rgb(0, 182, 221);
           font-size: 14px;
           font-weight: 500;
           margin-bottom: 20px;
       }

       .post-content {
           font-size: 16px;
           line-height: 1.8;
           color: #444;
       }

       .post-content pre {
           background: #f8f9fa;
           padding: 20px;
           border-radius: 8px;
           border-left: 4px solid rgb(0, 182, 221);
           margin: 20px 0;
           white-space: pre-wrap;
           word-wrap: break-word;
           overflow-wrap: break-word;
           font-family: 'Inter', sans-serif;
           text-align: left;
           line-height: 1.8;
           hyphens: none;
           word-break: normal;
       }

       .read-more {
           color: rgb(0, 182, 221);
           text-decoration: none;
           font-weight: 500;
           display: inline-flex;
           align-items: center;
           margin-top: 15px;
           transition: color 0.3s;
       }

       .read-more:hover {
           color: #0097A7;
       }

       .blog-grid {
           display: grid;
           gap: 25px;
       }

       .blog-post {
           background: white;
           padding: 25px;
           border-radius: 10px;
           box-shadow: 0 2px 8px rgba(0,0,0,0.08);
           transition: transform 0.3s, box-shadow 0.3s;
           border-left: 4px solid rgb(0, 182, 221);
       }

       .blog-post:hover {
           transform: translateY(-2px);
           box-shadow: 0 8px 20px rgba(0,0,0,0.15);
       }

       .blog-post .post-title {
           font-size: 20px;
           margin-bottom: 10px;
       }

       /* Blog Sidebar */
       .blog-sidebar {
           display: flex;
           flex-direction: column;
           gap: 25px;
       }

       .widget {
           background: white;
           padding: 25px;
           border-radius: 10px;
           box-shadow: 0 2px 8px rgba(0,0,0,0.08);
       }

       .widget-title {
           font-size: 18px;
           font-weight: 600;
           color: #1A365D;
           margin-bottom: 20px;
           padding-bottom: 10px;
           position: relative;
           text-transform: uppercase;
           letter-spacing: 0.5px;
       }

       .widget-title::after {
           content: '';
           position: absolute;
           bottom: 0;
           left: 0;
           width: 30px;
           height: 2px;
           background: rgb(0, 182, 221);
           border-radius: 2px;
       }

       .recent-posts .recent-post {
           padding: 12px 0;
           border-bottom: 1px solid #e9ecef;
       }

       .recent-posts .recent-post:last-child {
           border-bottom: none;
       }

       .recent-post-title {
           font-size: 14px;
           font-weight: 500;
           color: #1A365D;
           text-decoration: none;
           display: block;
           margin-bottom: 5px;
           word-wrap: break-word;
           overflow-wrap: break-word;
           line-height: 1.4;
       }

       .recent-post-title:hover {
           color: rgb(0, 182, 221);
       }

       .recent-post-date {
           font-size: 12px;
           color: #666;
       }

       .archives .archive-item {
           padding: 8px 0;
           border-bottom: 1px solid #e9ecef;
       }

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

       .archive-link {
           color: #1A365D;
           text-decoration: none;
           font-size: 14px;
           display: flex;
           justify-content: space-between;
           align-items: center;
           word-wrap: break-word;
           overflow-wrap: break-word;
       }

       .archive-link:hover {
           color: rgb(0, 182, 221);
       }

       .archive-count {
           background: #f8f9fa;
           color: #666;
           padding: 2px 8px;
           border-radius: 12px;
           font-size: 12px;
       }

       .college-info-widget p {
           margin-bottom: 15px;
           font-size: 14px;
           line-height: 1.6;
       }

       .college-highlights {
           list-style: none;
       }

       .college-highlights li {
           padding: 5px 0;
           font-size: 14px;
           color: #666;
           position: relative;
           padding-left: 20px;
       }

       .college-highlights li::before {
           content: "✓";
           color: rgb(0, 182, 221);
           font-weight: bold;
           position: absolute;
           left: 0;
       }

       .quick-links {
           list-style: none;
       }

       .quick-links li {
           margin-bottom: 8px;
       }

       .quick-links a {
           color: #1A365D;
           text-decoration: none;
           font-size: 14px;
           transition: color 0.3s;
       }

       .quick-links a:hover {
           color: rgb(0, 182, 221);
       }

       /* Modal - Improved styling */
       .modal {
           display: none;
           position: fixed;
           z-index: 1000;
           left: 0;
           top: 0;
           width: 100%;
           height: 100%;
           background-color: rgba(0,0,0,0.6);
           backdrop-filter: blur(5px);
           overflow-y: auto;
       }

       .modal-content {
           background-color: white;
           margin: 2% auto;
           padding: 0;
           border: none;
           border-radius: 15px;
           width: 90%;
           max-width: 800px;
           max-height: 90vh;
           position: relative;
           display: flex;
           flex-direction: column;
           box-shadow: 0 20px 60px rgba(0,0,0,0.3);
           animation: modalSlideIn 0.3s ease-out;
       }

       @keyframes modalSlideIn {
           from {
               opacity: 0;
               transform: translateY(-50px) scale(0.9);
           }
           to {
               opacity: 1;
               transform: translateY(0) scale(1);
           }
       }

       .modal-header {
           padding: 25px 30px;
           background: rgb(0, 182, 221);
           color: white;
           border-radius: 15px 15px 0 0;
           position: relative;
       }

       .modal-header .post-date {
           color: rgba(255,255,255,0.9);
           font-size: 14px;
           font-weight: 500;
           margin-bottom: 10px;
       }

       .modal-header .post-title {
           color: white;
           font-size: 24px;
           font-weight: 700;
           margin-bottom: 8px;
           line-height: 1.3;
       }

       .modal-header .post-author {
           color: rgba(255,255,255,0.8);
           font-style: italic;
           font-weight: 400;
           margin-bottom: 0;
       }

       .modal-body {
           padding: 30px;
           overflow-y: auto;
           flex: 1;
           max-height: calc(90vh - 150px);
       }

       .modal-body .post-content {
           font-size: 16px;
           line-height: 1.8;
           color: #444;
       }

       .modal-body .post-content pre {
           background: none;
           padding: 0;
           border: none;
           margin: 0;
           white-space: pre-wrap;
           word-wrap: break-word;
           overflow-wrap: break-word;
           font-family: 'Inter', sans-serif;
           text-align: left;
           line-height: 1.8;
           hyphens: none;
           word-break: normal;
       }

       .close-modal {
           position: absolute;
           right: 20px;
           top: 20px;
           font-size: 24px;
           cursor: pointer;
           color: white;
           width: 35px;
           height: 35px;
           display: flex;
           align-items: center;
           justify-content: center;
           border-radius: 50%;
           background: rgba(255,255,255,0.2);
           transition: all 0.3s ease;
           font-weight: normal;
       }

       .close-modal:hover {
           background: rgba(255,255,255,0.3);
           transform: rotate(90deg);
       }

       /* Responsive Design */
       @media (max-width: 768px) {
           .content-wrapper {
               grid-template-columns: 1fr;
               gap: 30px;
           }
           
           .page-title {
               font-size: 28px;
           }
       }

       /* View More Posts Section */
       .view-more-posts {
           background: linear-gradient(135deg, #E3F2FD, #F0F9FF);
           padding: 20px;
           border-radius: 12px;
           text-align: center;
           margin-top: 20px;
           border: 2px dashed rgb(0, 182, 221);
       }

       .view-more-posts p {
           margin: 8px 0;
           color: #455A64;
       }

       .view-more-posts p:first-child {
           font-weight: 600;
           color: #1A365D;
           font-size: 16px;
       }

       .view-more-posts strong {
           color: rgb(0, 182, 221);
           font-weight: 700;
       }

       @media (max-width: 480px) {
           .featured-post,
           .blog-post,
           .widget {
               padding: 20px;
           }
           
           .page-title {
               font-size: 24px;
           }
           
           .post-title {
               font-size: 22px;
           }
       }