:root {

            --primary: #136195;

            --primary-dark: #0a4970;

            --secondary: #2D7173;

            --secondary-dark: #1d5557;

            --accent: #34495e;

            --accent-dark: #263445;

            --success: #008a5e;

            --success-dark: #006a46;

            --warning: #d35400;

            --danger: #c0392b;

            --light: #f8f9fa;

            --dark: #343a40;

            --gray: #6c757d;

            --white: #ffffff;

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

            --transition: all 0.3s ease;

        }



        * {

            margin: 0;

            padding: 0;

            box-sizing: border-box;

        }



        body {

            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

            background-color: #f5f7fa;

            color: #333;

            line-height: 1.6;

        }



        .container {

            width: 100%;

            max-width: 1320px;

            margin: 0 auto;

            padding: 0 20px;

        }



        /* Header */

        header {

            background: linear-gradient(135deg, var(--primary), var(--primary-dark));

            color: white;

            padding: 1.5rem 0;

            box-shadow: var(--shadow);

        }



        .header-content {

            display: flex;

            justify-content: center;

            align-items: center;

            text-align: center;

        }



        .logo {

            font-size: 1.8rem;

            font-weight: 700;

            letter-spacing: 1px;

        }



        /* Buttons */

        .btn {

            display: inline-block;

            padding: 0.75rem 1.5rem;

            border-radius: 50px;

            text-decoration: none;

            font-weight: 600;

            letter-spacing: 0.5px;

            transition: var(--transition);

            border: none;

            cursor: pointer;

            text-align: center;

        }



        .btn-primary {

            background-color: var(--primary);

            color: white;

            box-shadow: 0 4px 15px rgba(19, 97, 149, 0.2);

        }



        .btn-primary:hover {

            background-color: var(--primary-dark);

            transform: translateY(-2px);

            box-shadow: 0 6px 20px rgba(19, 97, 149, 0.3);

        }



        .btn-secondary {

            background-color: var(--secondary);

            color: white;

            box-shadow: 0 4px 15px rgba(45, 113, 115, 0.2);

        }



        .btn-secondary:hover {

            background-color: var(--secondary-dark);

            transform: translateY(-2px);

            box-shadow: 0 6px 20px rgba(45, 113, 115, 0.3);

        }



        .btn-accent {

            background-color: var(--accent);

            color: white;

            box-shadow: 0 4px 15px rgba(52, 73, 94, 0.2);

        }



        .btn-accent:hover {

            background-color: var(--accent-dark);

            transform: translateY(-2px);

            box-shadow: 0 6px 20px rgba(52, 73, 94, 0.3);

        }



        .btn-success {

            background-color: var(--success);

            color: white;

            box-shadow: 0 4px 15px rgba(0, 138, 94, 0.2);

        }



        .btn-success:hover {

            background-color: var(--success-dark);

            transform: translateY(-2px);

            box-shadow: 0 6px 20px rgba(0, 138, 94, 0.3);

        }



        .btn-outline {

            background-color: transparent;

            color: white;

            border: 2px solid white;

        }



        .btn-outline:hover {

            background-color: white;

            color: var(--primary);

            transform: translateY(-2px);

        }



        /* Back button */

        .back-button {

            display: inline-block;

            margin: 1rem 0;

            padding: 0.75rem 1.5rem;

            background-color: var(--primary);

            color: white;

            text-decoration: none;

            border-radius: 50px;

            font-weight: 600;

            transition: var(--transition);

            box-shadow: var(--shadow);

        }



        .back-button:hover {

            background-color: var(--primary-dark);

            transform: translateY(-2px);

            box-shadow: 0 6px 20px rgba(19, 97, 149, 0.3);

        }



        .back-button i {

            margin-right: 0.5rem;

        }



		/* Modal */

        .modal {

            position: fixed;

            top: 0;

            left: 0;

            width: 100%;

            height: 100%;

            background-color: rgba(0, 0, 0, 0.5);

            display: flex;

            align-items: center;

            justify-content: center;

            z-index: 2000;

            opacity: 0;

            visibility: hidden;

            transition: var(--transition);

        }



        .modal.open {

            opacity: 1;

            visibility: visible;

        }



        .modal-content {

            background-color: white;

            border-radius: 12px;

            width: 100%;

            max-width: 600px;

            padding: 2rem;

            position: relative;

            transform: translateY(20px);

            transition: transform 0.3s ease;

        }



        .modal.open .modal-content {

            transform: translateY(0);

        }



        .modal-close {

            position: absolute;

            top: 1rem;

            right: 1rem;

            background: none;

            border: none;

            font-size: 1.5rem;

            cursor: pointer;

            color: var(--gray);

            transition: var(--transition);

        }



        .modal-close:hover {

            color: var(--danger);

        }



        .modal-title {

            font-size: 1.5rem;

            margin-bottom: 1rem;

        }



        .modal-body {

            margin-bottom: 1.5rem;

        }



        .modal-footer {

            display: flex;

            justify-content: flex-end;

            gap: 1rem;

        }



        /* Search */

        .search-container {

            background-color: white;

            padding: 1.5rem;

            border-radius: 8px;

            box-shadow: var(--shadow);

            margin-top: 1.5rem;

            position: relative;

            z-index: 10;

        }



        .search-form {

            display: flex;

            gap: 1rem;

        }



        .search-input {

            flex: 1;

            padding: 0.75rem 1.25rem;

            border: 1px solid #e1e5e9;

            border-radius: 50px;

            font-size: 1rem;

            transition: var(--transition);

        }



        .search-input:focus {

            outline: none;

            border-color: var(--primary);

            box-shadow: 0 0 0 3px rgba(19, 97, 149, 0.2);

        }



        /* Main content */

        .main-content {

            padding: 2rem 0 4rem;

        }



        .section-heading {

            text-align: center;

            margin-bottom: 3rem;

        }



        .section-heading h2 {

            font-size: 2.2rem;

            margin-bottom: 1rem;

            color: var(--dark);

        }



        .section-heading p {

            color: var(--gray);

            max-width: 700px;

            margin: 0 auto;

        }



        /* Material Cards */

        .materials-grid {

            display: grid;

            grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));

            gap: 2rem;

        }



        .material-card {

            background-color: white;

            border-radius: 12px;

            overflow: hidden;

            box-shadow: var(--shadow);

            transition: var(--transition);

            display: flex;

            flex-direction: column;

            height: 100%;

        }



        .material-card:hover {

            transform: translateY(-5px);

            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12);

        }



        .material-card-header {

            background-color: var(--primary);

            color: white;

            padding: 1.5rem;

            position: relative;

        }



        .material-card-header.green {

            background-color: var(--success);

        }



        .material-card-header.blue {

            background-color: var(--secondary);

        }



        .material-card-header.dark {

            background-color: var(--accent);

        }



        .material-card-header.danger {

            background-color: var(--danger);

        }



        .material-card-title {

            font-size: 1.5rem;

            font-weight: 700;

            margin-bottom: 0.5rem;

        }



        .material-card-description {

            font-size: 0.9rem;

            opacity: 0.9;

        }



        .material-card-icon {

            position: absolute;

            top: 1.5rem;

            right: 1.5rem;

            font-size: 1.8rem;

            opacity: 0.5;

        }



        .material-card-body {

            padding: 1.5rem;

            flex-grow: 1;

            display: flex;

            flex-direction: column;

        }



        .material-links {

            margin-top: 1rem;

            display: flex;

            flex-direction: column;

            gap: 0.75rem;

        }



        .material-link {

            display: flex;

            align-items: center;

            gap: 0.75rem;

            padding: 0.75rem;

            background-color: #f8f9fa;

            border-radius: 8px;

            text-decoration: none;

            color: var(--dark);

            transition: var(--transition);

        }



        .material-link:hover {

            background-color: #e9ecef;

            transform: translateY(-2px);

        }



        .material-link-icon {

            display: flex;

            align-items: center;

            justify-content: center;

            width: 36px;

            height: 36px;

            background-color: var(--primary);

            color: white;

            border-radius: 8px;

            font-size: 1rem;

        }



        .material-link-icon.pdf {

            background-color: #e74c3c;

        }



        .material-link-icon.video {

            background-color: #e67e22;

        }



        .material-link-icon.exercise {

            background-color: #3498db;

        }



        .material-link-icon.link {

            background-color: #9b59b6;

        }



        .material-link-icon.quiz {

            background-color: #2ecc71;

        }



        .material-section {

            margin-top: 1.5rem;

        }



        .material-section:first-child {

            margin-top: 0;

        }



        .material-section-title {

            font-weight: 600;

            font-size: 1rem;

            margin-bottom: 0.75rem;

            color: var(--gray);

            border-bottom: 1px solid #e9ecef;

            padding-bottom: 0.5rem;

        }



        /* Footer */

        footer {

            background-color: #2c3e50;

            color: white;

            padding: 1.5rem 0;

            text-align: center;

        }



        /* Back to top button */

        .back-to-top {

            position: fixed;

            bottom: 2rem;

            right: 2rem;

            width: 50px;

            height: 50px;

            border-radius: 50%;

            background-color: var(--primary);

            color: white;

            display: flex;

            align-items: center;

            justify-content: center;

            text-decoration: none;

            font-size: 1.25rem;

            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);

            transition: var(--transition);

            opacity: 0;

            visibility: hidden;

            z-index: 1000;

        }



        .back-to-top.show {

            opacity: 1;

            visibility: visible;

        }



        .back-to-top:hover {

            background-color: var(--primary-dark);

            transform: translateY(-5px);

        }



        /* Responsive */

        @media (max-width: 991px) {

            .materials-grid {

                grid-template-columns: repeat(2, 1fr);

            }

        }



        @media (max-width: 767px) {

            .materials-grid {

                grid-template-columns: 1fr;

            }



            .search-form {

                flex-direction: column;

            }

        }