/* CSS Reset */

 body, header, nav, main, footer, img, h1, h2, ul {
    margin: 0;
    padding: 0;
 }

body {
            font-family: 'Inter', sans-serif;
            color: #f4f4f4;
            background-color: #121212; 
    }

/*Header*/
        .header {
            padding: 20px 30px;
            background-color: #121212;
        }

        .logo {
            font-family: 'Playfair Display', serif;
            font-size: 1.8rem;
            font-weight: 700;
            color: #FFC700;
        }

/*main*/
        .main-container {
            width: 95%;
            margin: 0 auto; 
            padding-top: 20px;
        }

/*Navbar*/
        .sidebar {
            float: left;
            width: 180px; 
            padding: 10px 0;
            margin-right: 30px;
            background-color: #121212;
        }

        .sidebar h2 {
            font-size: 1.2rem;
            margin-bottom: 15px;
            color: #FFC700;
        }

        .nav-link {
            display: block;
            color: #f4f4f4;
            text-decoration: none;
            padding: 10px 15px; 
            margin-bottom: 5px;
            font-size: 1rem;
            font-weight: normal;
            border-radius: 4px;
        }


        .nav-link:hover {
            color: #121212;
            background-color: #FFC700;
        }
        
        .nav-link.active {
            background-color: #FFC700;
            color: #121212;
            font-weight: bold;
        }


        .page-content-wrapper {
            overflow: hidden; 
            padding: 40px;
            background-color: #121212;
            min-height: 600px;
            border-radius: 8px;
        }
        
        .text-section {
            float: left;
            width: 60%; 
            padding-right: 30px;
        }

        .image-section {
            float: right;
            display: flex;
            justify-content: center;
            max-width: 100%;
            height: auto;
            border-radius: 4px;
        }

        .text-section h1 {
            font-family: 'Playfair Display', serif;
            font-size: 3rem;
            margin-bottom: 20px;
            color: #FFC700;
        }
        
        .text-section p {
            font-size: 1rem;
            line-height: 1.6;
            margin-bottom: 15px;
            color: white;
        }
        
        .text-section ul {
            list-style-type: disc inside;
            margin-left: 15px;
        }


        .content-image {
            max-width: 100%;
            height: auto;
            border-radius: 4px;
        }

        /*Media Query for Mobile Viewports*/
        @media screen and (max-width: 768px) {
            
            .main-container {
                width: 100%;
                padding-top: 0;
            }
            
            
            .nav-link {
                padding: 5px 10px;
                margin: 5px;
                font-size: 0.9rem;
            }

            .text-section, .image-section {
                float: none;
                width: 100%;
                padding-right: 0;
            }

            .page-content-wrapper {
                padding: 20px;
                min-height: auto;
            }

            .image-section {
                margin-top: 20px;
            }
            
            .text-section h1 {
                font-size: 2rem;
            }
        }