* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}



:root {

    --primary-gradient: linear-gradient(135deg, #003065 0%, #004a8f 100%);

    --primary-color: #003065;

    --primary-light: #004a8f;

    --text-dark: #1a1a1a;

    --text-medium: #4a4a4a;

    --text-light: #6b6b6b;

    --bg-light: #f8f9fa;

    --bg-white: #ffffff;

    --border-color: #e0e0e0;

    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);

    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.1);

    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12);

    --radius-sm: 8px;

    --radius-md: 12px;

    --radius-lg: 16px;

    --radius-xl: 24px;

}



body {

    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;

    background: var(--primary-gradient);

    color: var(--text-dark);

    line-height: 1.6;

    min-height: 100vh;

}



/* Main Navigation Wrapper */

.nav-wrapper {

    position: fixed;

    top: 0;

    left: 0;

    right: 0;

    background: #003065;

    backdrop-filter: blur(10px);

    z-index: 1001;

    padding: 0 24px;

}



.nav-wrapper .main-nav {

    max-width: 1400px;

    margin: 0 auto;

    border-bottom: 1px solid rgba(255, 255, 255, 0.1);

}



/* Tutorial Navigation */

.tutorial-nav {

    position: fixed;

    top: 58px;

    left: 0;

    right: 0;

    background: rgba(255, 255, 255, 0.98);

    backdrop-filter: blur(10px);

    box-shadow: var(--shadow-sm);

    z-index: 1000;

}



.nav-container {

    max-width: 1400px;

    margin: 0 auto;

    padding: 16px 24px;

    display: flex;

    align-items: center;

    gap: 24px;

}



.nav-logo {

    font-size: 20px;

    font-weight: 700;

    color: var(--primary-color);

    white-space: nowrap;

}



.nav-progress {

    flex: 1;

    height: 6px;

    background: var(--bg-light);

    border-radius: 10px;

    overflow: hidden;

}



.progress-bar {

    height: 100%;

    background: var(--primary-gradient);

    width: 0%;

    transition: width 0.3s ease;

    border-radius: 10px;

}



/* Layout */

.tutorial-container {

    display: grid;

    grid-template-columns: 280px 1fr;

    max-width: 1400px;

    margin: 138px auto 0;

    min-height: calc(100vh - 138px);

    gap: 16px;

}



/* Sidebar */

.sidebar {

    width: 280px;

    background: rgba(255, 255, 255, 0.98);

    backdrop-filter: blur(10px);

    padding: 24px;

    position: sticky;

    top: 138px;

    height: calc(100vh - 138px);

    border-radius: 0 var(--radius-xl) var(--radius-xl) 0;

    box-shadow: var(--shadow-md);

    transition: transform 0.3s ease;

    display: flex;

    flex-direction: column;

}



.sidebar-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 24px;

    flex-shrink: 0;

}



.sidebar-header h3 {

    font-size: 18px;

    font-weight: 700;

    color: var(--text-dark);

}



.sidebar-toggle {

    display: none;

    background: none;

    border: none;

    cursor: pointer;

    padding: 4px;

    color: var(--text-medium);

}



.sidebar-menu {

    list-style: none;

    overflow-y: auto;

    flex: 1;

    margin: 0 -24px;

    padding: 0 24px;

}



.menu-item {

    display: block;

    padding: 12px 16px;

    color: var(--text-medium);

    text-decoration: none;

    border-radius: var(--radius-sm);

    transition: all 0.2s ease;

    font-size: 15px;

    margin-bottom: 4px;

}



.menu-item:hover {

    background: var(--bg-light);

    color: var(--primary-color);

    transform: translateX(4px);

}



.menu-item.active {

    background: var(--primary-gradient);

    color: white;

    font-weight: 600;

}



/* Content */

.content {

    padding: 40px;

    background: var(--bg-white);

    border-radius: var(--radius-xl) 0 0 var(--radius-xl);

    box-shadow: var(--shadow-lg);

    min-width: 0;

}



.section {

    display: none;

    animation: fadeIn 0.4s ease;

}



.section.active {

    display: block;

}



@keyframes fadeIn {

    from {

        opacity: 0;

        transform: translateY(20px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}



/* Section Header */

.section-header {

    margin-bottom: 48px;

    position: relative;

}



.section-number {

    display: inline-block;

    width: 60px;

    height: 60px;

    background: var(--primary-gradient);

    color: white;

    border-radius: 50%;

    font-size: 24px;

    font-weight: 700;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 16px;

}



.section-header h1 {

    font-size: 42px;

    font-weight: 800;

    color: var(--text-dark);

    margin-bottom: 12px;

    line-height: 1.2;

}



.section-header h2 {

    font-size: 36px;

    font-weight: 800;

    color: var(--text-dark);

    margin-bottom: 12px;

    line-height: 1.2;

}



.subtitle, .section-desc {

    font-size: 18px;

    color: var(--text-light);

    line-height: 1.6;

}



/* Intro Cards */

.intro-cards {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

    gap: 24px;

    margin-bottom: 48px;

}



.info-card {

    background: var(--bg-light);

    padding: 32px;

    border-radius: var(--radius-lg);

    transition: all 0.3s ease;

}



.info-card:hover {

    transform: translateY(-4px);

    box-shadow: var(--shadow-md);

}



.card-icon {

    font-size: 48px;

    margin-bottom: 16px;

}



.info-card h3 {

    font-size: 20px;

    font-weight: 700;

    color: var(--text-dark);

    margin-bottom: 12px;

}



.info-card p {

    color: var(--text-medium);

    font-size: 15px;

}



/* CTA Box */

.cta-box {

    background: var(--primary-gradient);

    color: white;

    padding: 48px;

    border-radius: var(--radius-xl);

    text-align: center;

}



.cta-box h3 {

    font-size: 28px;

    font-weight: 700;

    margin-bottom: 12px;

}



.cta-box p {

    font-size: 16px;

    margin-bottom: 24px;

    opacity: 0.95;

}



/* Buttons */

.btn-primary, .btn-secondary {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 14px 28px;

    border-radius: 50px;

    font-size: 16px;

    font-weight: 600;

    cursor: pointer;

    transition: all 0.3s ease;

    border: none;

    text-decoration: none;

}



.btn-primary {

    background: white;

    color: var(--primary-color);

}



.btn-primary:hover {

    transform: translateY(-2px);

    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);

}



.cta-box .btn-primary {

    background: white;

    color: var(--primary-color);

}



.content .btn-primary {

    background: var(--primary-gradient);

    color: white;

}



.btn-secondary {

    background: var(--bg-light);

    color: var(--text-dark);

}



.btn-secondary:hover {

    background: var(--border-color);

}



/* Requirement Items */

.requirement-item {

    background: var(--bg-light);

    border-radius: var(--radius-lg);

    padding: 32px;

    margin-bottom: 24px;

    transition: all 0.3s ease;

}



.requirement-item:hover {

    box-shadow: var(--shadow-md);

}



.requirement-header {

    display: flex;

    align-items: center;

    gap: 16px;

    margin-bottom: 20px;

}



.requirement-icon {

    font-size: 32px;

    width: 56px;

    height: 56px;

    background: white;

    border-radius: var(--radius-md);

    display: flex;

    align-items: center;

    justify-content: center;

    box-shadow: var(--shadow-sm);

}



.requirement-header h3 {

    font-size: 22px;

    font-weight: 700;

    color: var(--text-dark);

}



.requirement-content p {

    color: var(--text-medium);

    font-size: 16px;

    margin-bottom: 20px;

    line-height: 1.7;

}



/* Example Box */

.example-box {

    background: white;

    padding: 24px;

    border-radius: var(--radius-md);

    margin-top: 20px;

    box-shadow: var(--shadow-sm);

}



.example-label {

    display: inline-block;

    padding: 6px 16px;

    border-radius: 20px;

    font-size: 14px;

    font-weight: 600;

    margin-bottom: 16px;

}



.example-label.good {

    background: #d4edda;

    color: #155724;

}



.example-img {

    max-width: 100%;

    height: auto;

    border-radius: var(--radius-sm);

    display: block;

    margin: 0 auto;

}



/* Photo Grid */

.photo-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

    gap: 24px;

    margin-top: 20px;

}



.photo-item {

    background: white;

    padding: 16px;

    border-radius: var(--radius-md);

    box-shadow: var(--shadow-sm);

}



.photo-caption {

    text-align: center;

    margin-top: 12px;

    color: var(--text-medium);

    font-size: 14px;

    font-weight: 600;

}



/* Alert Boxes */

.alert-box {

    display: flex;

    gap: 16px;

    padding: 20px;

    border-radius: var(--radius-md);

    margin-top: 20px;

}



.alert-box.info {

    background: #e3f2fd;

    border-left: 4px solid #2196f3;

}



.alert-box.warning {

    background: #fff3e0;

    border-left: 4px solid #ff9800;

}



.alert-box.error {

    background: #ffebee;

    border-left: 4px solid #f44336;

}



.alert-icon {

    font-size: 24px;

    flex-shrink: 0;

}



.alert-content {

    flex: 1;

}



.alert-content strong {

    display: block;

    margin-bottom: 8px;

    font-size: 16px;

    color: var(--text-dark);

}



.alert-content p {

    margin: 0;

    color: var(--text-medium);

    font-size: 15px;

}



/* Completion Box */

.completion-box {

    background: var(--primary-gradient);

    color: white;

    padding: 48px;

    border-radius: var(--radius-xl);

    text-align: center;

    margin-top: 48px;

}



.completion-icon {

    font-size: 64px;

    margin-bottom: 16px;

}



.completion-box h3 {

    font-size: 32px;

    font-weight: 700;

    margin-bottom: 12px;

}



.completion-box p {

    font-size: 18px;

    margin-bottom: 32px;

    opacity: 0.95;

}



.completion-actions {

    display: flex;

    gap: 16px;

    justify-content: center;

    flex-wrap: wrap;

}



.completion-actions .btn-primary {

    background: white;

    color: var(--primary-color);

}



.completion-actions .btn-secondary {

    background: rgba(255, 255, 255, 0.2);

    color: white;

    border: 2px solid white;

}



.completion-actions .btn-secondary:hover {

    background: rgba(255, 255, 255, 0.3);

}



/* Navigation Buttons */

.navigation-buttons {

    display: flex;

    justify-content: space-between;

    gap: 16px;

    margin-top: 48px;

    padding-top: 32px;

    border-top: 2px solid var(--border-color);

}



/* Mobile Menu Button */

.mobile-menu-btn {

    display: none;

    position: fixed;

    bottom: 24px;

    right: 24px;

    width: 56px;

    height: 56px;

    background: var(--primary-gradient);

    color: white;

    border: none;

    border-radius: 50%;

    box-shadow: var(--shadow-lg);

    cursor: pointer;

    z-index: 999;

    align-items: center;

    justify-content: center;

}



.mobile-menu-btn:active {

    transform: scale(0.95);

}



/* Responsive */

@media (max-width: 1024px) {

    .tutorial-container {

        margin-top: 128px;

    }



    .sidebar {

        width: 240px;

        padding: 20px;

        top: 128px;

    }



    .content {

        padding: 32px;

    }



    .section-header h1 {

        font-size: 36px;

    }



    .section-header h2 {

        font-size: 30px;

    }

}



@media (max-width: 768px) {

    .nav-wrapper {

        padding: 0 16px;

    }



    .nav-container {

        padding: 12px 16px;

    }



    .nav-logo {

        font-size: 18px;

    }



    .tutorial-nav {

        top: 58px;

    }



    .tutorial-container {

        grid-template-columns: 1fr;

        margin: 118px 16px 16px;

    }



    .sidebar {

        position: fixed;

        top: 118px;

        left: 0;

        right: 0;

        width: 100%;

        height: auto;

        max-height: calc(100vh - 118px);

        border-radius: 0 0 var(--radius-xl) var(--radius-xl);

        transform: translateY(-100%);

        z-index: 998;

    }



    .sidebar.active {

        transform: translateY(0);

    }



    .sidebar-toggle {

        display: block;

    }



    .content {

        padding: 24px;

        border-radius: var(--radius-xl);

        margin-left: 0;

    }



    .section-header h1 {

        font-size: 28px;

    }



    .section-header h2 {

        font-size: 24px;

    }



    .section-number {

        width: 48px;

        height: 48px;

        font-size: 20px;

    }



    .intro-cards {

        grid-template-columns: 1fr;

    }



    .requirement-item {

        padding: 24px;

    }



    .requirement-header {

        flex-direction: column;

        align-items: flex-start;

    }



    .photo-grid {

        grid-template-columns: 1fr;

    }



    .navigation-buttons {

        flex-direction: column;

    }



    .navigation-buttons button {

        width: 100%;

        justify-content: center;

    }



    .mobile-menu-btn {

        display: flex;

    }



    .completion-actions {

        flex-direction: column;

    }



    .completion-actions button {

        width: 100%;

        justify-content: center;

    }

}



@media (max-width: 480px) {

    .tutorial-container {

        margin: 118px 8px 8px;

    }



    .content {

        padding: 16px;

    }



    .section-header h1 {

        font-size: 24px;

    }



    .section-header h2 {

        font-size: 20px;

    }



    .cta-box, .completion-box {

        padding: 32px 24px;

    }



    .requirement-item {

        padding: 20px;

    }



    .example-box {

        padding: 16px;

    }

}



/* Scrollbar */

.sidebar-menu::-webkit-scrollbar {

    width: 6px;

}



.sidebar-menu::-webkit-scrollbar-track {

    background: transparent;

}



.sidebar-menu::-webkit-scrollbar-thumb {

    background: var(--border-color);

    border-radius: 10px;

}



.sidebar-menu::-webkit-scrollbar-thumb:hover {

    background: var(--text-light);

}





/* Contact Info */

.contact-info {

    background: rgba(255, 255, 255, 0.2);

    padding: 24px;

    border-radius: var(--radius-md);

    margin: 24px 0;

    text-align: left;

}



.contact-info p {

    margin: 8px 0;

    font-size: 16px;

}



.contact-info a {

    color: white;

    text-decoration: underline;

}



.contact-info a:hover {

    text-decoration: none;

}



/* SVG Icons in cards */

.card-icon svg,

.requirement-icon svg {

    stroke: var(--primary-color);

}



.nav-logo {

    display: flex;

    align-items: center;

    gap: 8px;

}



.nav-logo svg {

    stroke: var(--primary-color);

}





/* Menu section divider */

.menu-section {

    padding: 16px 16px 8px;

    font-size: 12px;

    font-weight: 700;

    text-transform: uppercase;

    color: var(--text-light);

    letter-spacing: 0.5px;

    margin-top: 16px;

    border-top: 1px solid var(--border-color);

}



.menu-section:first-child {

    margin-top: 0;

    border-top: none;

}