/* MASTAN2 Modern Website - Main CSS */

/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #000000;
    color: #ffffff;
    line-height: 1.6;
    overflow-x: hidden;
}

/* Color Variables */
:root {
    --primary-green: #8BC34A;
    --dark-bg: #2a2a2a;
    --darker-bg: #1a1a1a;
    --content-bg: rgba(60, 60, 60, 0.9);
    --text-light: #ffffff;
    --text-gray: #cccccc;
    --accent-yellow: #FFC107;
    --accent-blue: #2196F3;
    --accent-red: #F44336;
    --accent-purple: #9C27B0;
    --accent-orange: #FF9800;
}

/* Layout Container */
.container {
    min-height: 100vh;
    position: relative;
}

/* Header/Logo Section */
.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 151px;
    background: 
        repeating-linear-gradient(
            45deg,
            #2a2a2a,
            #2a2a2a 2px,
            #333333 2px,
            #333333 4px
        );
    z-index: 1000;
    display: flex;
    align-items: center;
    padding: 0 20px;
}

.logo {
    height: 85px;
    width: 359px;
    margin-right: 20px;
    transition: transform 0.3s ease;
}

.logo:hover {
    transform: translateY(-2px);
}

.header img:not(.logo) {
    height: 151px;
    width: 151px;
}

.announcement {
    flex: 1;
    padding: 15px 20px;
    margin-left: 20px;
    border: 2px solid var(--primary-green);
    border-radius: 4px;
}

/* Sidebar Navigation */
.sidebar {
    position: fixed;
    left: 0;
    top: 151px;
    width: 220px;
    height: calc(100vh - 151px);
    background: var(--darker-bg);
    border-right: 8px solid var(--primary-green);
    z-index: 999;
    overflow-y: auto;
    display: flex;
    justify-content: center;
}

.nav-menu {
    list-style: none;
    padding: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.nav-item {
    border-bottom: 1px solid #333;
    width: 100%;
    display: flex;
    justify-content: center;
}

.nav-link {
    display: block;
    width: 175px;
    height: 42px;
    line-height: 42px;
    text-align: left;
    color: #ffffff;
    text-decoration: none;
    transition: all 0.3s ease;
    position: relative;
    font-size: 14px;
    margin: 5px 0;
    padding-left: 15px;
    background-color: #2a2a2a;
}

.nav-link:hover,
.nav-link.active {
    background: var(--primary-green);
    color: white;
}

/* Main Content Area */
.main-content {
    position: absolute;
    left: 230px;
    right: 240px;
    top: 151px;
    padding: 40px;
    min-height: calc(100vh - 151px);
    overflow-x: hidden;
    background-color: #000000;
}

.content-section {
    background: var(--content-bg);
    border-radius: 12px;
    padding: 30px;
    margin-bottom: 30px;
    backdrop-filter: blur(10px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    text-align: left;
}

.section-title {
    color: var(--primary-green);
    font-size: 24px;
    margin-bottom: 20px;
    position: relative;
    padding-bottom: 10px;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 50px;
    height: 3px;
    background: var(--primary-green);
    border-radius: 2px;
}

/* Unified gallery grid used by MSASect2 and Buckling pages */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-top: 12px;
}
.gallery-grid img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
}
@media (max-width: 1200px) {
    .gallery-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
    .gallery-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .gallery-grid { grid-template-columns: 1fr; }
}

/* Shared image modal styles (used by MSASect2 and Buckling pages) */
.modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.9);
    align-items: center;
    justify-content: center;
    flex-direction: column;
    z-index: 10000;
}
.modal img {
    max-width: 85vw;
    max-height: 75vh;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
    display: block;
    margin: 0 auto;
}
.modal .modal-close {
    position: absolute;
    top: 16px;
    right: 24px;
    color: #fff;
    font-size: 32px;
    cursor: pointer;
}
.modal #caption {
    color: #fff;
    margin-top: 12px;
    text-align: center;
    max-width: 85vw;
}

/* Buckling page: hover overlay effect on screenshots */
.buckling-info .gallery-grid img {
    position: relative;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
}
.buckling-info .gallery-grid img:hover {
    /* Dark overlay using a large inset box-shadow to avoid extra markup */
    box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.28), 0 8px 24px rgba(0,0,0,0.35);
    transform: translateY(-2px);
}

/* Three Column Layout for Home Page */
.three-columns {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 30px;
    margin-top: 30px;
}

/* Overview Layout */
.overview-layout {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 40px;
    align-items: center;
}

.overview-text {
    flex: 1;
}

.overview-summary {
    background: var(--primary-green);
    padding: 25px;
    border-radius: 8px;
    min-width: 250px;
}

.summary-item {
    color: white;
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 10px;
}

.summary-item:last-child {
    margin-bottom: 0;
}

/* Overview Container */
.overview-container {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 30px;
    margin-bottom: 40px;
}

.overview-container .process-card.overview {
    flex: 1;
    max-width: 600px;
}

.overview-content {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    gap: 20px;
}

.overview-content p {
    flex: 1;
    margin: 0;
    display: flex;
    align-items: center;
}

.overview-container .overview-summary {
    background: var(--primary-green);
    padding: 20px;
    border-radius: 8px;
    min-width: 200px;
    flex-shrink: 0;
}

/* Process Flow Layout */
.process-flow {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    position: relative;
    margin-top: 40px;
}

.process-card {
    background: rgba(40, 40, 40, 0.8);
    border-radius: 12px;
    padding: 25px;
    border: 1px solid rgba(139, 195, 74, 0.3);
    transition: all 0.3s ease;
    position: relative;
}

/* Add a subtle "float" effect on process cards when hovered, similar to the MASTAN2 logo.  
   When users move their mouse over any of the process cards on the home page (overview, preprocessing,
   analysis or postprocessing), the card lifts slightly and casts a small shadow.  
   This improves interactivity without affecting layout on mobile or tablet devices. */
.process-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
}

.process-card.preprocessing {
    grid-column: 1;
}

.process-card.analysis {
    grid-column: 2;
}

.process-card.postprocessing {
    grid-column: 3;
}

.process-title {
    color: #ffffff;
    font-size: 24px;
    margin-bottom: 15px;
    font-weight: bold;
    position: relative;
    padding-bottom: 10px;
}

/* Add underline to process titles to match other section headings */
.process-card .process-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 50px;
    height: 3px;
    background: var(--primary-green);
    border-radius: 2px;
}



.column-card {
    background: rgba(40, 40, 40, 0.8);
    border-radius: 12px;
    padding: 25px;
    border: 1px solid rgba(139, 195, 74, 0.3);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.column-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--primary-green);
}

.column-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(139, 195, 74, 0.2);
    border-color: var(--primary-green);
}

.column-title {
    color: #ffffff;
    font-size: 18px;
    margin-bottom: 15px;
    font-weight: bold;
}

/* Screenshots Gallery */
.screenshots-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.screenshot-item {
    background: rgba(40, 40, 40, 0.8);
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.3s ease;
    border: 2px solid transparent;
}

.screenshot-item:hover {
    transform: scale(1.02);
    border-color: var(--primary-green);
}

.screenshot-item img {
    width: 100%;
    height: auto;
    display: block;
}

/* FAQ Styles */
.faq-item {
    margin-bottom: 25px;
    background: rgba(40, 40, 40, 0.6);
    border-radius: 8px;
    padding: 20px;
    border-left: 4px solid var(--primary-green);
}

.faq-question {
    color: var(--primary-green);
    font-weight: bold;
    margin-bottom: 10px;
    font-size: 16px;
}

.faq-answer {
    color: var(--text-gray);
    line-height: 1.7;
}

/* Learning Modules */
.module-item {
    background: rgba(40, 40, 40, 0.8);
    border-radius: 12px;
    padding: 25px;
    margin-bottom: 25px;
    border: 1px solid rgba(139, 195, 74, 0.3);
    transition: all 0.3s ease;
}

.module-item:hover {
    border-color: var(--primary-green);
    box-shadow: 0 8px 25px rgba(139, 195, 74, 0.15);
}

.module-title {
    color: var(--primary-green);
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 15px;
}

.module-links {
    margin-top: 15px;
}

.module-link {
    display: inline-block;
    background: linear-gradient(to bottom, #666666 0%, #444444 50%, #000000 100%);
    color: #fff;
    padding: 8px 16px;
    border-radius: 6px;
    text-decoration: none;
    margin-right: 10px;
    margin-bottom: 10px;
    font-size: 14px;
    transition: all 0.3s ease;
}

.module-link:hover {
    background: linear-gradient(to bottom, #777777 0%, #555555 50%, #222222 100%);
    transform: translateY(-2px);
}

/* Download Section */
.download-versions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-top: 30px;
}

.version-card {
    background: rgba(40, 40, 40, 0.8);
    border-radius: 12px;
    padding: 25px;
    border: 2px solid rgba(139, 195, 74, 0.3);
    text-align: center;
}

.version-title {
    color: var(--primary-green);
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 15px;
}

.download-btn {
    display: inline-block;
    background: linear-gradient(to bottom, #666666 0%, #444444 50%, #000000 100%);
    color: #fff;
    padding: 12px 24px;
    border-radius: 8px;
    text-decoration: none;
    margin: 10px;
    font-weight: bold;
    transition: all 0.3s ease;
}

.download-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 20px;
}

.download-buttons .download-btn {
    margin: 0;
    text-align: center;
}

.download-btn:hover {
    background: linear-gradient(to bottom, #777777 0%, #555555 50%, #222222 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(102, 102, 102, 0.3);
}

/* Contact Form */
.contact-form {
    max-width: 600px;
    margin: 0 auto;
}

.form-group {
    margin-bottom: 20px;
}

.form-label {
    display: block;
    color: var(--primary-green);
    margin-bottom: 8px;
    font-weight: bold;
}

.form-input,
.form-textarea {
    width: 100%;
    padding: 12px;
    border: 2px solid #444;
    border-radius: 6px;
    background: rgba(40, 40, 40, 0.8);
    color: white;
    font-size: 14px;
    transition: border-color 0.3s ease;
}

.form-input:focus,
.form-textarea:focus {
    outline: none;
    border-color: var(--primary-green);
}

.form-textarea {
    height: 120px;
    resize: vertical;
}

.submit-btn {
    background: linear-gradient(to bottom, #666666 0%, #444444 50%, #000000 100%);
    color: #fff;
    padding: 12px 30px;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
}

.submit-btn:hover {
    background: linear-gradient(to bottom, #777777 0%, #555555 50%, #222222 100%);
    transform: translateY(-2px);
}

/* Footer */
.footer {
    text-align: center;
    padding: 20px;
    color: var(--text-gray);
    font-size: 14px;
    border-top: 1px solid #444;
    margin-top: 40px;
}

/* Device switch styling: placed in the footer under copyright */
.device-switch {
    margin-top: 8px;
    font-size: 14px;
    color: var(--text-gray);
}

.device-switch span {
    margin-right: 5px;
    color: var(--text-gray);
    font-weight: 600;
}

.device-switch a {
    color: var(--primary-green);
    text-decoration: none;
    margin: 0 4px;
    font-weight: 500;
}

.device-switch a:hover {
    text-decoration: underline;
}

/* MSASect2 page styling */
.msasect-intro {
    margin-top: 30px;
}

.section-text {
    margin-bottom: 20px;
    line-height: 1.7;
    color: var(--text-gray);
}

.feature-list {
    margin-left: 20px;
    margin-bottom: 20px;
    list-style-type: disc;
    color: var(--text-light);
}

.feature-list li {
    margin-bottom: 8px;
}

.cta-button {
    display: inline-block;
    padding: 14px 24px;
    background: linear-gradient(to bottom, #666666 0%, #444444 50%, #000000 100%);
    border: 2px solid #666;
    border-radius: 8px;
    text-decoration: none;
    color: #ffffff;
    font-weight: bold;
    transition: all 0.3s ease;
}

.cta-button:hover {
    background: linear-gradient(to bottom, #777777 0%, #555555 50%, #111111 100%);
}

/* Responsive Design */
@media (max-width: 768px) {
    .header {
        height: 151px;
        flex-direction: column;
        padding: 10px;
    }
    
    .logo {
        height: 57px;
        width: 240px;
        margin-right: 0;
        margin-bottom: 10px;
    }
    
    .header img:not(.logo) {
        position: static !important;
        width: 151px !important;
        height: 151px !important;
        margin-left: 10px;
        right: auto !important;
    }
    
    .announcement {
        margin-left: 0;
        font-size: 14px;
        padding: 10px;
    }
    
    .sidebar {
        top: 151px;
        width: 100%;
        height: auto;
        position: static;
        border-right: none;
        border-bottom: 2px solid var(--primary-green);
    }
    
    .nav-menu {
        display: flex;
        overflow-x: auto;
        padding: 0 10px;
    }
    
    .nav-item {
        border-bottom: none;
        border-right: 1px solid #333;
        min-width: 120px;
    }
    
    .nav-link {
        padding: 10px 15px;
        text-align: center;
        white-space: nowrap;
    }
    
    .main-content {
        position: static;
        left: auto;
        right: auto;
        top: auto;
        padding: 20px;
        overflow-x: visible;
    }
    
    .three-columns {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .download-versions {
        grid-template-columns: 1fr;
    }
    
    .screenshots-grid {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 15px;
    }
}

@media (max-width: 480px) {
    .main-content {
        padding: 15px;
    }
    
    .content-section {
        padding: 20px;
    }
    
    .section-title {
        font-size: 20px;
    }
    
    .nav-menu {
        padding: 0 5px;
    }
    
    .nav-item {
        min-width: 100px;
    }
    
    .nav-link {
        padding: 8px 10px;
        font-size: 12px;
    }
}

/* Tablet and Mobile: reduce modal image size for smaller zoom */
@media (max-width: 900px) {
	.modal img {
		max-width: 70vw !important;
		max-height: 55vh !important;
	}
}

@media (max-width: 600px) {
	.modal img {
		max-width: 65vw !important;
		max-height: 50vh !important;
	}
}

/* Smooth Animations */
.nav-link,
.module-link, 
.download-btn,
.submit-btn,
.logo,
.column-card,
.screenshot-item,
.module-item,
.version-card {
    transition: all 0.3s ease;
}

/* Loading Animation */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Removed automatic animation to prevent auto-rescaling on refresh */

/* Hover Effects */
.nav-link,
.module-link,
.download-btn,
.submit-btn {
    position: relative;
    overflow: hidden;
}

.nav-link::after,
.module-link::after,
.download-btn::after,
.submit-btn::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.nav-link:hover::after,
.module-link:hover::after,
.download-btn:hover::after,
.submit-btn:hover::after {
    width: 300px;
    height: 300px;
}