{"id":92130,"date":"2025-01-09T22:09:48","date_gmt":"2025-01-09T18:39:48","guid":{"rendered":"https:\/\/nabfollower.com\/blog\/%d9%85%d9%86-%d9%88%d8%a8-%d8%b3%d8%a7%db%8c%d8%aa-%d8%a2%d9%85%d9%88%d8%b2%d8%b4%db%8c-%d9%86%d9%87%d8%a7%db%8c%db%8c-%d8%b1%d8%a7-%d8%a7%d8%b2-%d8%a7%d8%a8%d8%aa%d8%af%d8%a7-%d8%b3%d8%a7%d8%ae%d8%aa\/"},"modified":"2025-01-09T22:09:48","modified_gmt":"2025-01-09T18:39:48","slug":"%d9%85%d9%86-%d9%88%d8%a8-%d8%b3%d8%a7%db%8c%d8%aa-%d8%a2%d9%85%d9%88%d8%b2%d8%b4%db%8c-%d9%86%d9%87%d8%a7%db%8c%db%8c-%d8%b1%d8%a7-%d8%a7%d8%b2-%d8%a7%d8%a8%d8%aa%d8%af%d8%a7-%d8%b3%d8%a7%d8%ae%d8%aa","status":"publish","type":"post","link":"https:\/\/nabfollower.com\/blog\/%d9%85%d9%86-%d9%88%d8%a8-%d8%b3%d8%a7%db%8c%d8%aa-%d8%a2%d9%85%d9%88%d8%b2%d8%b4%db%8c-%d9%86%d9%87%d8%a7%db%8c%db%8c-%d8%b1%d8%a7-%d8%a7%d8%b2-%d8%a7%d8%a8%d8%aa%d8%af%d8%a7-%d8%b3%d8%a7%d8%ae%d8%aa\/","title":{"rendered":"\u0645\u0646 \u0648\u0628 \u0633\u0627\u06cc\u062a \u0622\u0645\u0648\u0632\u0634\u06cc \u0646\u0647\u0627\u06cc\u06cc \u0631\u0627 \u0627\u0632 \u0627\u0628\u062a\u062f\u0627 \u0633\u0627\u062e\u062a\u0645 &#8211; \u0631\u0648\u0632 2"},"content":{"rendered":"<div data-article-id=\"2197642\" id=\"article-body\">\n<p>\u062f\u06cc\u0631\u0648\u0632 \u06a9\u0627\u0631 \u06a9\u0631\u062f\u06cc\u0645 <code>index.html<\/code>\u0648 \u0627\u0645\u0631\u0648\u0632 \u0631\u0648\u06cc \u0645\u0648\u0636\u0648\u0639\u0627\u062a.html \u0648 <code>about.html<\/code>. \u062e\u0648\u0627\u0647\u06cc\u0645 \u062f\u06cc\u062f \u06a9\u0647 \u0622\u06cc\u0627 \u0632\u0645\u0627\u0646 \u06a9\u0627\u0641\u06cc \u0628\u0631\u0627\u06cc \u06a9\u0627\u0631 \u0631\u0648\u06cc SubjectPages \u062e\u0648\u062f \u0645\u0627\u0646\u0646\u062f \u0634\u06cc\u0645\u06cc\u060c \u0631\u06cc\u0627\u0636\u06cc\u0627\u062a \u0648 \u063a\u06cc\u0631\u0647 \u062f\u0627\u0631\u06cc\u0645.<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_85 counter-hierarchy ez-toc-counter-rtl ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">\u0641\u0647\u0631\u0633\u062a \u0645\u0637\u0627\u0644\u0628<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"\u062a\u063a\u06cc\u06cc\u0631 \u0648\u0636\u0639\u06cc\u062a \u0641\u0647\u0631\u0633\u062a \u0645\u0637\u0627\u0644\u0628\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/nabfollower.com\/blog\/%d9%85%d9%86-%d9%88%d8%a8-%d8%b3%d8%a7%db%8c%d8%aa-%d8%a2%d9%85%d9%88%d8%b2%d8%b4%db%8c-%d9%86%d9%87%d8%a7%db%8c%db%8c-%d8%b1%d8%a7-%d8%a7%d8%b2-%d8%a7%d8%a8%d8%aa%d8%af%d8%a7-%d8%b3%d8%a7%d8%ae%d8%aa\/#%D8%B3%D8%A7%D8%B9%D8%AA_14_%D8%B3%D8%A7%D8%AE%D8%AA%D9%86_%D8%B5%D9%81%D8%AD%D9%87_%D9%85%D9%88%D8%B6%D9%88%D8%B9%D8%A7%D8%AA\" >\u0633\u0627\u0639\u062a 14: \u0633\u0627\u062e\u062a\u0646 \u0635\u0641\u062d\u0647 \u0645\u0648\u0636\u0648\u0639\u0627\u062a<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/nabfollower.com\/blog\/%d9%85%d9%86-%d9%88%d8%a8-%d8%b3%d8%a7%db%8c%d8%aa-%d8%a2%d9%85%d9%88%d8%b2%d8%b4%db%8c-%d9%86%d9%87%d8%a7%db%8c%db%8c-%d8%b1%d8%a7-%d8%a7%d8%b2-%d8%a7%d8%a8%d8%aa%d8%af%d8%a7-%d8%b3%d8%a7%d8%ae%d8%aa\/#%D8%B3%D8%A7%D8%B9%D8%AA_15_%D8%B3%D8%A7%D8%AE%D8%AA_%D8%B5%D9%81%D8%AD%D9%87_%D8%AF%D8%B1%D8%A8%D8%A7%D8%B1%D9%87\" >\u0633\u0627\u0639\u062a 15: \u0633\u0627\u062e\u062a \u0635\u0641\u062d\u0647 \u062f\u0631\u0628\u0627\u0631\u0647<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/nabfollower.com\/blog\/%d9%85%d9%86-%d9%88%d8%a8-%d8%b3%d8%a7%db%8c%d8%aa-%d8%a2%d9%85%d9%88%d8%b2%d8%b4%db%8c-%d9%86%d9%87%d8%a7%db%8c%db%8c-%d8%b1%d8%a7-%d8%a7%d8%b2-%d8%a7%d8%a8%d8%aa%d8%af%d8%a7-%d8%b3%d8%a7%d8%ae%d8%aa\/#Our_Mission_At_Neuron_IQ_our_mission_is_to_democratize_education_by_providing_high-quality_accessible_educational_resources_to_learners_worldwide_We_are_dedicated_to_creating_a_platform_that_not_only_supports_academic_success_but_also_fosters_a_lifelong_love_of_learning_class%22about-container%22%3E_Our_Values_Quality_We_are_committed_to_providing_meticulously_crafted_notes_and_answers_Accessibility_We_aim_to_make_educational_materials_readily_available_to_all_learners_Innovation_We_continuously_seek_new_ways_to_improve_the_learning_experience_Impact_We_strive_to_empower_students_and_educators_through_our_resources_%D9%88%D8%A7%D8%B1%D8%AF_%D8%AD%D8%A7%D9%84%D8%AA_%D8%AA%D9%85%D8%A7%D9%85_%D8%B5%D9%81%D8%AD%D9%87_%D8%B4%D9%88%DB%8C%D8%AF_%D8%A7%D8%B2_%D8%AD%D8%A7%D9%84%D8%AA_%D8%AA%D9%85%D8%A7%D9%85_%D8%B5%D9%81%D8%AD%D9%87_%D8%AE%D8%A7%D8%B1%D8%AC_%D8%B4%D9%88%DB%8C%D8%AF_%D8%A7%DB%8C%D9%86_%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C_%D8%A8%D8%B3%DB%8C%D8%A7%D8%B1_%D8%A7%D8%B3%D8%AA%D8%A7%D9%86%D8%AF%D8%A7%D8%B1%D8%AF_%D8%A7%D8%B3%D8%AA%D8%8C_%D8%A8%D8%A7_%D8%A8%D8%B1%D8%AE%DB%8C_%D8%A7%D8%B2_%D8%B9%D9%86%D8%A7%D8%B5%D8%B1_%D8%AC%D8%B3%D9%88%D8%B1%D8%A7%D9%86%D9%87_%D8%A8%D8%B1%D8%A7%DB%8C_%D8%A8%D9%87%D8%A8%D9%88%D8%AF_%D8%AA%D8%AC%D8%B1%D8%A8%D9%87_%DA%A9%D8%A7%D8%B1%D8%A8%D8%B1%D8%8C_%DA%A9%D9%87_%D9%85%D9%86_%D8%A8%D8%B3%DB%8C%D8%A7%D8%B1_%D8%AF%D9%88%D8%B3%D8%AA_%D8%AF%D8%A7%D8%B4%D8%AA%D9%85_%D9%85%D9%86_%D8%AF%D8%B1_%D8%A7%D8%A8%D8%AA%D8%AF%D8%A7_%D9%82%D8%B5%D8%AF_%D8%AF%D8%A7%D8%B4%D8%AA%D9%85_%DB%8C%DA%A9_%D8%A8%D8%AE%D8%B4_%D8%AA%DB%8C%D9%85%DB%8C_%D8%B1%D8%A7_%D8%AF%D8%B1_%D9%86%D8%B8%D8%B1_%D8%A8%DA%AF%DB%8C%D8%B1%D9%85%D8%8C_%D8%A7%D9%85%D8%A7_%D9%81%D8%B9%D9%84%D8%A7%D9%8B_%D8%AA%D8%B5%D9%85%DB%8C%D9%85_%DA%AF%D8%B1%D9%81%D8%AA%D9%85_%D8%A2%D9%86_%D8%B1%D8%A7_%D8%AD%D8%B0%D9%81_%DA%A9%D9%86%D9%85_%D9%85%D9%85%DA%A9%D9%86_%D8%A7%D8%B3%D8%AA_%D8%A8%D8%B9%D8%AF%D8%A7%D9%8B_%D9%88%D9%82%D8%AA%DB%8C_%D8%A7%D8%B7%D9%84%D8%A7%D8%B9%D8%A7%D8%AA_%D8%A8%DB%8C%D8%B4%D8%AA%D8%B1%DB%8C_%D8%AF%D8%A7%D8%B4%D8%AA%D9%87_%D8%A8%D8%A7%D8%B4%D9%85_%D8%A2%D9%86_%D8%B1%D8%A7_%D8%A7%D8%B6%D8%A7%D9%81%D9%87_%DA%A9%D9%86%D9%85\" >Our Mission\n            At Neuron IQ, our mission is to democratize education by providing high-quality, accessible educational resources to learners worldwide. We are dedicated to creating a platform that not only supports academic success but also fosters a lifelong love of learning.\n        \n            class=\"about-container\"&gt;\n            Our Values\n                Quality: We are committed to providing meticulously crafted notes and answers.\n                \n                  Accessibility: We aim to make educational materials readily available to all learners.\n                \n                  Innovation: We continuously seek new ways to improve the learning experience.\n                   Impact: We strive to empower students and educators through our resources.\n                \n\n           \n  \n\n\n\n    \u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f\n    \n\n    \u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f\n    \n\n\n\n\n\u0627\u06cc\u0646 \u0637\u0631\u0627\u062d\u06cc \u0628\u0633\u06cc\u0627\u0631 \u0627\u0633\u062a\u0627\u0646\u062f\u0627\u0631\u062f \u0627\u0633\u062a\u060c \u0628\u0627 \u0628\u0631\u062e\u06cc \u0627\u0632 \u0639\u0646\u0627\u0635\u0631 \u062c\u0633\u0648\u0631\u0627\u0646\u0647 \u0628\u0631\u0627\u06cc \u0628\u0647\u0628\u0648\u062f \u062a\u062c\u0631\u0628\u0647 \u06a9\u0627\u0631\u0628\u0631\u060c \u06a9\u0647 \u0645\u0646 \u0628\u0633\u06cc\u0627\u0631 \u062f\u0648\u0633\u062a \u062f\u0627\u0634\u062a\u0645.\n\u0645\u0646 \u062f\u0631 \u0627\u0628\u062a\u062f\u0627 \u0642\u0635\u062f \u062f\u0627\u0634\u062a\u0645 \u06cc\u06a9 \u0628\u062e\u0634 \u062a\u06cc\u0645\u06cc \u0631\u0627 \u062f\u0631 \u0646\u0638\u0631 \u0628\u06af\u06cc\u0631\u0645\u060c \u0627\u0645\u0627 \u0641\u0639\u0644\u0627\u064b \u062a\u0635\u0645\u06cc\u0645 \u06af\u0631\u0641\u062a\u0645 \u0622\u0646 \u0631\u0627 \u062d\u0630\u0641 \u06a9\u0646\u0645. \u0645\u0645\u06a9\u0646 \u0627\u0633\u062a \u0628\u0639\u062f\u0627\u064b \u0648\u0642\u062a\u06cc \u0627\u0637\u0644\u0627\u0639\u0627\u062a \u0628\u06cc\u0634\u062a\u0631\u06cc \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u0645 \u0622\u0646 \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u0645.<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/nabfollower.com\/blog\/%d9%85%d9%86-%d9%88%d8%a8-%d8%b3%d8%a7%db%8c%d8%aa-%d8%a2%d9%85%d9%88%d8%b2%d8%b4%db%8c-%d9%86%d9%87%d8%a7%db%8c%db%8c-%d8%b1%d8%a7-%d8%a7%d8%b2-%d8%a7%d8%a8%d8%aa%d8%af%d8%a7-%d8%b3%d8%a7%d8%ae%d8%aa\/#John_Doe\" >John Doe<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/nabfollower.com\/blog\/%d9%85%d9%86-%d9%88%d8%a8-%d8%b3%d8%a7%db%8c%d8%aa-%d8%a2%d9%85%d9%88%d8%b2%d8%b4%db%8c-%d9%86%d9%87%d8%a7%db%8c%db%8c-%d8%b1%d8%a7-%d8%a7%d8%b2-%d8%a7%d8%a8%d8%aa%d8%af%d8%a7-%d8%b3%d8%a7%d8%ae%d8%aa\/#Jane_Smith\" >Jane Smith<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/nabfollower.com\/blog\/%d9%85%d9%86-%d9%88%d8%a8-%d8%b3%d8%a7%db%8c%d8%aa-%d8%a2%d9%85%d9%88%d8%b2%d8%b4%db%8c-%d9%86%d9%87%d8%a7%db%8c%db%8c-%d8%b1%d8%a7-%d8%a7%d8%b2-%d8%a7%d8%a8%d8%aa%d8%af%d8%a7-%d8%b3%d8%a7%d8%ae%d8%aa\/#Alex_Kim\" >Alex Kim<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/nabfollower.com\/blog\/%d9%85%d9%86-%d9%88%d8%a8-%d8%b3%d8%a7%db%8c%d8%aa-%d8%a2%d9%85%d9%88%d8%b2%d8%b4%db%8c-%d9%86%d9%87%d8%a7%db%8c%db%8c-%d8%b1%d8%a7-%d8%a7%d8%b2-%d8%a7%d8%a8%d8%aa%d8%af%d8%a7-%d8%b3%d8%a7%d8%ae%d8%aa\/#%D8%B3%D8%A7%D8%B9%D8%AA_%D8%B4%D8%A7%D9%86%D8%B2%D8%AF%D9%87%D9%85_%D8%AA%D9%86%D8%B8%DB%8C%D9%85_%D8%B5%D9%81%D8%AD%D9%87_%D9%85%D9%88%D8%B6%D9%88%D8%B9_%D8%B4%DB%8C%D9%85%DB%8C\" >\u0633\u0627\u0639\u062a \u0634\u0627\u0646\u0632\u062f\u0647\u0645: \u062a\u0646\u0638\u06cc\u0645 \u0635\u0641\u062d\u0647 \u0645\u0648\u0636\u0648\u0639 \u0634\u06cc\u0645\u06cc<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/nabfollower.com\/blog\/%d9%85%d9%86-%d9%88%d8%a8-%d8%b3%d8%a7%db%8c%d8%aa-%d8%a2%d9%85%d9%88%d8%b2%d8%b4%db%8c-%d9%86%d9%87%d8%a7%db%8c%db%8c-%d8%b1%d8%a7-%d8%a7%d8%b2-%d8%a7%d8%a8%d8%aa%d8%af%d8%a7-%d8%b3%d8%a7%d8%ae%d8%aa\/#%D8%B3%D8%A7%D8%B9%D8%AA_17_%D8%B4%DA%A9%D9%84_%D8%AF%D8%A7%D8%AF%D9%86_%D8%A8%D9%87_%D8%B5%D9%81%D8%AD%D9%87_%D8%B4%DB%8C%D9%85%DB%8C\" >\u0633\u0627\u0639\u062a 17: \u0634\u06a9\u0644 \u062f\u0627\u062f\u0646 \u0628\u0647 \u0635\u0641\u062d\u0647 \u0634\u06cc\u0645\u06cc<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/nabfollower.com\/blog\/%d9%85%d9%86-%d9%88%d8%a8-%d8%b3%d8%a7%db%8c%d8%aa-%d8%a2%d9%85%d9%88%d8%b2%d8%b4%db%8c-%d9%86%d9%87%d8%a7%db%8c%db%8c-%d8%b1%d8%a7-%d8%a7%d8%b2-%d8%a7%d8%a8%d8%aa%d8%af%d8%a7-%d8%b3%d8%a7%d8%ae%d8%aa\/#%D8%B3%D8%A7%D8%B9%D8%AA_18_%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C_%D8%B5%D9%81%D8%AD%D9%87_%D8%B4%DB%8C%D9%85%DB%8C_%D8%AE%D8%A7%D8%B5\" >\u0633\u0627\u0639\u062a 18: \u0637\u0631\u0627\u062d\u06cc \u0635\u0641\u062d\u0647 \u0634\u06cc\u0645\u06cc \u062e\u0627\u0635<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"%D8%B3%D8%A7%D8%B9%D8%AA_14_%D8%B3%D8%A7%D8%AE%D8%AA%D9%86_%D8%B5%D9%81%D8%AD%D9%87_%D9%85%D9%88%D8%B6%D9%88%D8%B9%D8%A7%D8%AA\"><\/span>\n<p>  \u0633\u0627\u0639\u062a 14: \u0633\u0627\u062e\u062a\u0646 \u0635\u0641\u062d\u0647 \u0645\u0648\u0636\u0648\u0639\u0627\u062a<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0645\u0646 \u0628\u0627 \u0634\u0631\u0648\u0639 <code>subjects.html<\/code>. \u062f\u0631\u0633\u062a \u0645\u0627\u0646\u0646\u062f \u0642\u0628\u0644\u060c \u0645\u0646 \u0627\u0632 \u062f\u06cc\u06af \u0628\u062e\u0627\u0631 \u0633\u0641\u0627\u0631\u0634\u06cc \u062e\u0648\u062f \u06a9\u0647 \u062f\u06cc\u0631\u0648\u0632 \u0628\u0631\u0627\u06cc \u0627\u06cc\u0646 \u067e\u0631\u0648\u0698\u0647 \u0637\u0631\u0627\u062d\u06cc \u06a9\u0631\u062f\u0645 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u062e\u0648\u0627\u0647\u0645 \u06a9\u0631\u062f:<\/p>\n<p>\u0645\u0646 \u0633\u0627\u062e\u062a\u0627\u0631 \u0627\u0635\u0644\u06cc \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u0645\u060c \u0634\u06cc\u0648\u0647 \u0646\u0627\u0645\u0647 \u0631\u0627 \u067e\u06cc\u0648\u0646\u062f \u062f\u0627\u062f\u0645 \u0648 \u067e\u06cc\u0645\u0627\u06cc\u0634\u06cc \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u0645 \u06a9\u0647 \u0645\u0627 \u0631\u0627 \u0628\u0647 \u0635\u0641\u062d\u0627\u062a \u062f\u06cc\u06af\u0631 \u0645\u06cc \u0628\u0631\u062f. \u0647\u062f\u0641 \u062d\u0641\u0638 \u062b\u0628\u0627\u062a \u0628\u06cc\u0646 \u0635\u0641\u062d\u0627\u062a \u0627\u0633\u062a.<\/p>\n<p>\u062d\u0627\u0644\u0627 \u0628\u06cc\u0627\u06cc\u06cc\u062f \u0645\u062d\u062a\u0648\u0627\u06cc \u0635\u0641\u062d\u0647 \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u0645. \u0645\u0646 \u06cc\u06a9 \u0628\u062e\u0634 \u0642\u0647\u0631\u0645\u0627\u0646 \u0645\u0634\u0627\u0628\u0647 \u0622\u0646\u0686\u0647 \u062f\u0631 \u0635\u0641\u062d\u0647 \u0641\u0647\u0631\u0633\u062a \u0627\u0633\u062a \u0627\u0645\u0627 \u0628\u0627 \u062a\u0645\u0631\u06a9\u0632 \u0631\u0648\u06cc \u0645\u0648\u0636\u0648\u0639\u0627\u062a \u0645\u06cc \u062e\u0648\u0627\u0647\u0645:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight html\"><code>    <span class=\"nt\"><section> <span class=\"na\">class=<\/span><span class=\"s\">\"subject-hero\"<\/span><span class=\"nt\">&gt;<\/span>\n        <span class=\"nt\"><div> <span class=\"na\">class=<\/span><span class=\"s\">\"subject-hero-content\"<\/span><span class=\"nt\">&gt;<\/span>\n             <span class=\"nt\"\/>Explore Subjects<span class=\"nt\"\/>\n              <span class=\"nt\"\/>Delve into our extensive collection of educational notes and answers, tailored for a diverse range of disciplines<span class=\"nt\"\/>\n\n        <span class=\"nt\"\/><\/div><\/span>\n    <span class=\"nt\"\/><\/section><\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0627\u06cc\u0646 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u06cc\u06a9 \u0647\u062f\u0631 \u062e\u0648\u0628 \u0628\u0631\u0627\u06cc \u0635\u0641\u062d\u0647 \u0639\u0645\u0644 \u0645\u06cc \u06a9\u0646\u062f \u0648 \u0628\u0647 \u0646\u0638\u0631 \u0645\u06cc \u0631\u0633\u062f \u0628\u0627 \u0628\u062e\u0634 \u0642\u0647\u0631\u0645\u0627\u0646 \u0635\u0641\u062d\u0647 \u0641\u0647\u0631\u0633\u062a \u0633\u0627\u0632\u06af\u0627\u0631 \u0628\u0627\u0634\u062f.<\/p>\n<p>\u0642\u0633\u0645\u062a \u0628\u0639\u062f\u06cc \u0645\u062d\u062a\u0648\u0627\u06cc \u0627\u0635\u0644\u06cc \u0627\u0633\u062a: \u0634\u0628\u06a9\u0647 \u0627\u06cc \u0627\u0632 \u0645\u0648\u0636\u0648\u0639\u0627\u062a\u060c \u0645\u0627\u0646\u0646\u062f \u0628\u062e\u0634 \u062f\u0633\u062a\u0647 \u0647\u0627 \u062f\u0631 \u0635\u0641\u062d\u0647 \u0627\u0635\u0644\u06cc:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight html\"><code>  <span class=\"nt\"><section> <span class=\"na\">class=<\/span><span class=\"s\">\"subject-list\"<\/span><span class=\"nt\">&gt;<\/span>\n           <span class=\"nt\"\/>\n        <span class=\"nt\"\/><\/section><\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0627\u06cc\u0646 \u0634\u0628\u06a9\u0647 \u062a\u0645\u0627\u0645 \u0645\u0648\u0636\u0648\u0639\u0627\u062a \u0631\u0627 \u0646\u0645\u0627\u06cc\u0634 \u0645\u06cc \u062f\u0647\u062f \u0648 \u06a9\u0627\u0648\u0634 \u0631\u0627 \u0628\u0631\u0627\u06cc \u06a9\u0627\u0631\u0628\u0631 \u0622\u0633\u0627\u0646 \u0645\u06cc \u06a9\u0646\u062f \u0648 \u0647\u0645\u0686\u0646\u06cc\u0646 \u0628\u0627 \u0637\u0631\u062d \u0635\u0641\u062d\u0647 \u0627\u0635\u0644\u06cc \u0633\u0627\u0632\u06af\u0627\u0631 \u0627\u0633\u062a.<\/p>\n<p>\u0645\u0646 \u0641\u0648\u062a\u0631 \u0631\u0627 \u0628\u0627 \u0628\u0642\u06cc\u0647 \u0633\u0627\u06cc\u062a \u0645\u0637\u0627\u0628\u0642\u062a \u0645\u06cc \u062f\u0647\u0645 \u0648 \u0627\u0632 \u0647\u0645\u0627\u0646 \u06a9\u062f index.html \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u0645.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"%D8%B3%D8%A7%D8%B9%D8%AA_15_%D8%B3%D8%A7%D8%AE%D8%AA_%D8%B5%D9%81%D8%AD%D9%87_%D8%AF%D8%B1%D8%A8%D8%A7%D8%B1%D9%87\"><\/span>\n<p>  \u0633\u0627\u0639\u062a 15: \u0633\u0627\u062e\u062a \u0635\u0641\u062d\u0647 \u062f\u0631\u0628\u0627\u0631\u0647<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u062d\u0627\u0644\u0627 \u0628\u06cc\u0627\u06cc\u06cc\u062f \u0628\u0647 \u0627\u062f\u0627\u0645\u0647 \u0645\u0637\u0644\u0628 \u0628\u0631\u0648\u06cc\u0645 <code>about.html<\/code>. \u0645\u0646 \u0637\u0628\u0642 \u0645\u0639\u0645\u0648\u0644 \u0628\u0627 \u0647\u0645\u0627\u0646 HTML boilerplate \u0634\u0631\u0648\u0639 \u0645\u06cc \u06a9\u0646\u0645:<\/p>\n<p>\u0645\u0646 \u06cc\u06a9 \u0647\u062f\u0631 \u0648 \u067e\u0627\u0648\u0631\u0642\u06cc \u0645\u0634\u0627\u0628\u0647 \u0633\u0627\u06cc\u0631 \u0635\u0641\u062d\u0627\u062a \u0642\u0631\u0627\u0631 \u062f\u0627\u062f\u0647 \u0627\u0645. \u0627\u06cc\u0646 \u0646\u0627\u0648\u0628\u0631\u06cc \u0631\u0627 \u062b\u0627\u0628\u062a \u0646\u06af\u0647 \u0645\u06cc \u062f\u0627\u0631\u062f.<\/p>\n<p>\u0628\u0631\u0627\u06cc \u0635\u0641\u062d\u0647 \u062f\u0631\u0628\u0627\u0631\u0647\u060c \u0645\u0646 \u0628\u0627 \u0628\u062e\u0634 \u0642\u0647\u0631\u0645\u0627\u0646 \u0634\u0631\u0648\u0639 \u0645\u06cc \u06a9\u0646\u0645\u060c \u062f\u0631\u0633\u062a \u0645\u0627\u0646\u0646\u062f \u0635\u0641\u062d\u0647 \u0627\u0635\u0644\u06cc \u0648 \u0645\u0648\u0636\u0648\u0639:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight html\"><code>    <span class=\"nt\"><section> <span class=\"na\">class=<\/span><span class=\"s\">\"about-hero\"<\/span><span class=\"nt\">&gt;<\/span>\n        <span class=\"nt\"><div> <span class=\"na\">class=<\/span><span class=\"s\">\"about-hero-content\"<\/span><span class=\"nt\">&gt;<\/span>\n            <span class=\"nt\"\/>About Neuron IQ<span class=\"nt\"\/>\n             <span class=\"nt\"\/>Learn about our vision, mission, and the team behind providing quality education for everyone.<span class=\"nt\"\/>\n        <span class=\"nt\"\/><\/div><\/span>\n    <span class=\"nt\"\/><\/section><\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0628\u062e\u0634 \u0642\u0647\u0631\u0645\u0627\u0646 \u0634\u0627\u0645\u0644 \u06cc\u06a9 \u0639\u0646\u0648\u0627\u0646 \u0648 \u06cc\u06a9 \u067e\u0627\u0631\u0627\u06af\u0631\u0627\u0641 \u06a9\u0648\u062a\u0627\u0647 \u0628\u0631\u0627\u06cc \u0645\u0639\u0631\u0641\u06cc \u0635\u0641\u062d\u0647 \u0627\u0633\u062a.<\/p>\n<p>\u0627\u06a9\u0646\u0648\u0646\u060c \u0628\u062e\u0634 \u0645\u062d\u062a\u0648\u0627\u06cc \u0627\u0635\u0644\u06cc \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u0645\u06cc \u06a9\u0646\u0645 \u06a9\u0647 \u0628\u0647 \u062f\u0648 \u0628\u062e\u0634 \u062a\u0642\u0633\u06cc\u0645 \u0645\u06cc \u0634\u0648\u062f: \u0645\u0627\u0645\u0648\u0631\u06cc\u062a \u0648 \u0627\u0631\u0632\u0634.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight html\"><code>  <span class=\"nt\"><section> <span class=\"na\">class=<\/span><span class=\"s\">\"about-content\"<\/span><span class=\"nt\">&gt;<\/span>\n        <span class=\"nt\"><div> <span class=\"na\">class=<\/span><span class=\"s\">\"about-container\"<\/span><span class=\"nt\">&gt;<\/span>\n            <span class=\"nt\"><h2\/><\/span>Our Mission<span class=\"nt\"\/>\n            <span class=\"nt\"\/>At Neuron IQ, our mission is to democratize education by providing high-quality, accessible educational resources to learners worldwide. We are dedicated to creating a platform that not only supports academic success but also fosters a lifelong love of learning.<span class=\"nt\"\/>\n        <span class=\"nt\"\/><\/div><\/span>\n           <span class=\"nt\"><div> <span class=\"na\">class=<\/span><span class=\"s\">\"about-container\"<\/span><span class=\"nt\">&gt;<\/span>\n            <span class=\"nt\"><h2\/><\/span>Our Values<span class=\"nt\"\/>\n                <span class=\"nt\"\/>Quality:<span class=\"nt\"\/> We are committed to providing meticulously crafted notes and answers.\n                <span class=\"nt\"\/>\n                  <span class=\"nt\"\/>Accessibility:<span class=\"nt\"\/> We aim to make educational materials readily available to all learners.\n                <span class=\"nt\"\/>\n                  <span class=\"nt\"\/>Innovation:<span class=\"nt\"\/> We continuously seek new ways to improve the learning experience.<span class=\"nt\"\/>\n                   <span class=\"nt\"\/>Impact:<span class=\"nt\"\/> We strive to empower students and educators through our resources.\n                <span class=\"nt\"\/>\n\n           <span class=\"nt\"\/><\/div><\/span>\n  <span class=\"nt\"\/><\/section><\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0627\u06cc\u0646 \u0637\u0631\u0627\u062d\u06cc \u0628\u0633\u06cc\u0627\u0631 \u0627\u0633\u062a\u0627\u0646\u062f\u0627\u0631\u062f \u0627\u0633\u062a\u060c \u0628\u0627 \u0628\u0631\u062e\u06cc \u0627\u0632 \u0639\u0646\u0627\u0635\u0631 \u062c\u0633\u0648\u0631\u0627\u0646\u0647 \u0628\u0631\u0627\u06cc \u0628\u0647\u0628\u0648\u062f \u062a\u062c\u0631\u0628\u0647 \u06a9\u0627\u0631\u0628\u0631\u060c \u06a9\u0647 \u0645\u0646 \u0628\u0633\u06cc\u0627\u0631 \u062f\u0648\u0633\u062a \u062f\u0627\u0634\u062a\u0645.<\/p>\n<p>\u0645\u0646 \u062f\u0631 \u0627\u0628\u062a\u062f\u0627 \u0642\u0635\u062f \u062f\u0627\u0634\u062a\u0645 \u06cc\u06a9 \u0628\u062e\u0634 \u062a\u06cc\u0645\u06cc \u0631\u0627 \u062f\u0631 \u0646\u0638\u0631 \u0628\u06af\u06cc\u0631\u0645\u060c \u0627\u0645\u0627 \u0641\u0639\u0644\u0627\u064b \u062a\u0635\u0645\u06cc\u0645 \u06af\u0631\u0641\u062a\u0645 \u0622\u0646 \u0631\u0627 \u062d\u0630\u0641 \u06a9\u0646\u0645. \u0645\u0645\u06a9\u0646 \u0627\u0633\u062a \u0628\u0639\u062f\u0627\u064b \u0648\u0642\u062a\u06cc \u0627\u0637\u0644\u0627\u0639\u0627\u062a \u0628\u06cc\u0634\u062a\u0631\u06cc \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u0645 \u0622\u0646 \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u0645.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight html\"><code>  <span class=\"c\"><!-- <div class=\"about-team\">\n            <h2>Meet the Team<\/h2>\n            <div class=\"team-grid\">\n                <div class=\"team-member\">\n                    <img decoding=\"async\" src=\"https:\/\/dev.to\/who_tf_cares\/team-member1.jpg\" alt=\"Team Member 1\" title=\"\">\n                    <h3><span class=\"ez-toc-section\" id=\"John_Doe\"><\/span>John Doe<span class=\"ez-toc-section-end\"><\/span><\/h3>\n                    <p>Founder & CEO<\/p>\n                <\/div>\n                 <div class=\"team-member\">\n                    <img decoding=\"async\" src=\"team-member2.jpg\" alt=\"Team Member 2\" title=\"\">\n                    <h3><span class=\"ez-toc-section\" id=\"Jane_Smith\"><\/span>Jane Smith<span class=\"ez-toc-section-end\"><\/span><\/h3>\n                    <p>Content Lead<\/p>\n                <\/div>\n                 <div class=\"team-member\">\n                    <img decoding=\"async\" src=\"team-member3.jpg\" alt=\"Team Member 3\" title=\"\">\n                    <h3><span class=\"ez-toc-section\" id=\"Alex_Kim\"><\/span>Alex Kim<span class=\"ez-toc-section-end\"><\/span><\/h3>\n                    <p>Technical Lead<\/p>\n                <\/div>\n            <\/div>\n        <\/div> --><\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0648 \u0627\u06cc\u0646 \u0647\u0631 \u062f\u0648 \u0631\u0627 \u06a9\u0627\u0645\u0644 \u0645\u06cc \u06a9\u0646\u062f <code>subjects.html<\/code> \u0648 <code>about.html<\/code> \u062f\u0631 \u062d\u0627\u0644 \u062d\u0627\u0636\u0631\u060c \u0648 \u0635\u0641\u062d\u0627\u062a \u0627\u0635\u0644\u06cc \u0627\u0646\u062c\u0627\u0645 \u0634\u062f\u0647 \u0627\u0633\u062a! \u0628\u0631\u0627\u06cc \u06a9\u0633\u0627\u0646\u06cc \u06a9\u0647 \u062a\u0639\u062c\u0628 \u0645\u06cc \u06a9\u0646\u0646\u062f\u060c \u0635\u0641\u062d\u0627\u062a \u0645\u0627 \u062f\u0631 \u067e\u0627\u06cc\u0627\u0646 \u0631\u0648\u0632 \u0627\u06cc\u0646\u06af\u0648\u0646\u0647 \u0628\u0647 \u0646\u0638\u0631 \u0645\u06cc \u0631\u0633\u0646\u062f.<br \/>\u0635\u0641\u062d\u0647 \u0645\u0648\u0636\u0648\u0639\u0627\u062a<br \/>\u062f\u0631\u0628\u0627\u0631\u0647 \u0635\u0641\u062d\u0647<\/p>\n<p>\u062e\u0648\u0628\u060c \u0628\u06cc\u0627\u06cc\u06cc\u062f \u0628\u0627 \u0635\u0641\u062d\u0627\u062a \u0645\u0648\u0636\u0648\u0639\u06cc \u062e\u0627\u0635 \u0634\u0631\u0648\u0639 \u06a9\u0646\u06cc\u0645.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"%D8%B3%D8%A7%D8%B9%D8%AA_%D8%B4%D8%A7%D9%86%D8%B2%D8%AF%D9%87%D9%85_%D8%AA%D9%86%D8%B8%DB%8C%D9%85_%D8%B5%D9%81%D8%AD%D9%87_%D9%85%D9%88%D8%B6%D9%88%D8%B9_%D8%B4%DB%8C%D9%85%DB%8C\"><\/span>\n<p>  \u0633\u0627\u0639\u062a \u0634\u0627\u0646\u0632\u062f\u0647\u0645: \u062a\u0646\u0638\u06cc\u0645 \u0635\u0641\u062d\u0647 \u0645\u0648\u0636\u0648\u0639 \u0634\u06cc\u0645\u06cc<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0627\u0628\u062a\u062f\u0627 \u06cc\u06a9 \u067e\u0648\u0634\u0647 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0631\u062f\u0645 <code>\\Chemistry<\/code>. \u0633\u067e\u0633\u060c \u062f\u0631 \u062f\u0627\u062e\u0644 \u0627\u06cc\u0646 \u067e\u0648\u0634\u0647\u060c \u0645\u0646 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0631\u062f\u0645 <code>index.html<\/code> \u0641\u0627\u06cc\u0644<\/p>\n<p>\u0627\u06cc\u0646 \u0635\u0641\u062d\u0647\u060c \u0645\u0627\u0646\u0646\u062f \u0633\u0627\u06cc\u0631\u06cc\u0646\u060c \u0628\u0627 \u0633\u0627\u062e\u062a\u0627\u0631 \u0627\u0635\u0644\u06cc HTML \u0645\u0646\u060c \u0628\u0627 \u067e\u06cc\u0648\u0646\u062f\u0647\u0627\u06cc \u067e\u06cc\u0645\u0627\u06cc\u0634 \u0628\u0647 \u0635\u0641\u062d\u0627\u062a \u0627\u0635\u0644\u06cc \u0645\u0627 \u0634\u0631\u0648\u0639 \u0645\u06cc \u0634\u0648\u062f (<code>\/index.html<\/code>\u060c <code>\/subjects.html<\/code>\u060c \u0648 <code>\/about.html<\/code>) \u0648 \u0647\u0645\u0686\u0646\u06cc\u0646 \u067e\u06cc\u0648\u0646\u062f\u06cc \u0628\u0647 \u0634\u06cc\u0648\u0647 \u0646\u0627\u0645\u0647 \u0647\u0627\u06cc \u0627\u0635\u0644\u06cc.<\/p>\n<p>\u062d\u0627\u0644\u0627 \u0628\u06cc\u0627\u06cc\u06cc\u062f \u0633\u0627\u062e\u062a\u0627\u0631 \u0627\u06cc\u0646 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u0645:<\/p>\n<p>\u0627\u06cc\u0646 \u06cc\u06a9 \u0637\u0631\u062d \u0633\u0647 \u0633\u062a\u0648\u0646\u06cc \u0631\u0627 \u0628\u0627 \u06cc\u06a9 \u0644\u06cc\u0633\u062a \u0645\u0642\u0627\u0644\u0647 \u062f\u0631 \u0633\u0645\u062a \u0686\u067e\u060c \u0645\u0648\u0636\u0648\u0639\u0627\u062a \u0627\u0635\u0644\u06cc \u062f\u0631 \u0645\u0631\u06a9\u0632\u060c \u0648 \u06cc\u06a9 \u0644\u06cc\u0633\u062a \u0645\u0648\u0636\u0648\u0639 \u062f\u06cc\u06af\u0631 \u062f\u0631 \u0633\u0645\u062a \u0631\u0627\u0633\u062a \u062a\u0646\u0638\u06cc\u0645 \u0645\u06cc \u06a9\u0646\u062f. \u0627\u06cc\u0646 \u0647\u0645\u0647 \u062f\u0631 \u062f\u0627\u062e\u0644 \u0627\u0633\u062a <code>.chemistry-page<\/code> \u0628\u062e\u0634 \u0642\u0628\u0644 \u0627\u0632 \u062d\u0631\u06a9\u062a\u060c \u0627\u062c\u0627\u0632\u0647 \u062f\u0647\u06cc\u062f \u0628\u0647 \u0686\u0646\u062f \u0633\u0648\u0627\u0644\u06cc \u06a9\u0647 \u0645\u0645\u06a9\u0646 \u0627\u0633\u062a \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u062f \u0628\u067e\u0631\u062f\u0627\u0632\u06cc\u0645.<\/p>\n<ul>\n<li>\u0628\u0639\u0636\u06cc \u0647\u0627 <code>href<\/code> \u0645\u0642\u0627\u062f\u06cc\u0631 &#8220;1.html&#8221;\u060c &#8220;organic.html&#8221; \u0648 \u0628\u0631\u062e\u06cc \u0641\u0642\u0637 &#8220;#&#8221; \u0647\u0633\u062a\u0646\u062f. \u067e\u0627\u0633\u062e: \u0628\u0631\u0627\u06cc \u0644\u06cc\u0646\u06a9 \u0647\u0627\u06cc\u06cc \u06a9\u0647 \u0622\u0645\u0627\u062f\u0647 \u0647\u0633\u062a\u0646\u062f \u0627\u0632 \u00ab1.html\u00bb\u060c \u00aborganic.html\u00bb \u0648 &#8230; \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0631\u062f\u0645. &#8220;#&#8221; \u06cc\u06a9 \u0645\u06a9\u0627\u0646 \u0646\u06af\u0647\u062f\u0627\u0631 \u0628\u0631\u0627\u06cc \u0635\u0641\u062d\u0627\u062a\u06cc \u0627\u0633\u062a \u06a9\u0647 \u0647\u0646\u0648\u0632 \u062a\u0648\u0633\u0639\u0647 \u0646\u06cc\u0627\u0641\u062a\u0647 \u0627\u0646\u062f. \u0627\u06cc\u0646 \u0633\u0627\u062e\u062a\u0627\u0631 \u0631\u0627 \u062b\u0627\u0628\u062a \u0648 \u0627\u0632 \u0646\u0638\u0631 \u0628\u0635\u0631\u06cc \u06a9\u0627\u0645\u0644 \u0646\u06af\u0647 \u0645\u06cc\u200c\u062f\u0627\u0631\u062f\u060c \u0628\u0647 \u0645\u0646 \u0627\u0645\u06a9\u0627\u0646 \u0645\u06cc\u200c\u062f\u0647\u062f \u0628\u0628\u06cc\u0646\u0645 \u0633\u0627\u06cc\u062a \u0646\u0647\u0627\u06cc\u06cc \u0686\u06af\u0648\u0646\u0647 \u0628\u0647 \u0646\u0638\u0631 \u0645\u06cc\u200c\u0631\u0633\u062f\u060c \u062f\u0631 \u062d\u0627\u0644\u06cc \u06a9\u0647 \u0646\u0634\u0627\u0646 \u0645\u06cc\u200c\u062f\u0647\u062f \u06a9\u0647 \u0645\u062d\u062a\u0648\u0627 \u0647\u0646\u0648\u0632 \u062f\u0631 \u062f\u0633\u062a\u0631\u0633 \u0646\u06cc\u0633\u062a.<\/li>\n<\/ul>\n<p>\u062f\u0631 \u0646\u0647\u0627\u06cc\u062a\u060c \u0628\u0631\u0627\u06cc \u062d\u0641\u0638 \u062b\u0628\u0627\u062a\u060c \u0647\u0645\u0627\u0646 \u067e\u0627\u0648\u0631\u0642\u06cc \u0631\u0627 \u0645\u0627\u0646\u0646\u062f \u0633\u0627\u06cc\u0631 \u0635\u0641\u062d\u0627\u062a \u0646\u06af\u0647 \u0645\u06cc \u062f\u0627\u0631\u0645.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"%D8%B3%D8%A7%D8%B9%D8%AA_17_%D8%B4%DA%A9%D9%84_%D8%AF%D8%A7%D8%AF%D9%86_%D8%A8%D9%87_%D8%B5%D9%81%D8%AD%D9%87_%D8%B4%DB%8C%D9%85%DB%8C\"><\/span>\n<p>  \u0633\u0627\u0639\u062a 17: \u0634\u06a9\u0644 \u062f\u0627\u062f\u0646 \u0628\u0647 \u0635\u0641\u062d\u0647 \u0634\u06cc\u0645\u06cc<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0627\u06a9\u0646\u0648\u0646\u060c \u0645\u0646 \u0628\u0627\u06cc\u062f \u0627\u06cc\u0646 \u0635\u0641\u062d\u0647 \u0634\u06cc\u0645\u06cc \u0631\u0627 \u0627\u0633\u062a\u0627\u06cc\u0644 \u06a9\u0646\u0645. \u0645\u0646 \u0628\u0627 \u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 \u0641\u0627\u06cc\u0644 \u062c\u062f\u06cc\u062f \u062f\u0631 \u067e\u0648\u0634\u0647 Chemistry \u0634\u0631\u0648\u0639 \u06a9\u0631\u062f\u0645\u060c <code>style.css<\/code>.<\/p>\n<p>\u0645\u0646 \u0637\u0631\u062d\u06cc \u0645\u06cc \u062e\u0648\u0627\u0633\u062a\u0645 \u06a9\u0647 \u0645\u062a\u0645\u0627\u06cc\u0632 \u0648 \u0627\u0632 \u0646\u0638\u0631 \u0628\u0635\u0631\u06cc \u062c\u0630\u0627\u0628 \u0628\u0627\u0634\u062f. \u0627\u06cc\u0646 \u0686\u06cc\u0632\u06cc \u0627\u0633\u062a \u06a9\u0647 \u0645\u0646 \u0628\u0647 \u0622\u0646 \u0631\u0633\u06cc\u062f\u0645:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight css\"><code><span class=\"nd\">:root<\/span> <span class=\"p\">{<\/span>\n    <span class=\"py\">--primary-color<\/span><span class=\"p\">:<\/span> <span class=\"m\">#00bcd4<\/span><span class=\"p\">;<\/span> <span class=\"c\">\/* Vibrant yet professional *\/<\/span>\n    <span class=\"py\">--secondary-color<\/span><span class=\"p\">:<\/span> <span class=\"m\">#ffc107<\/span><span class=\"p\">;<\/span> <span class=\"c\">\/* Energetic accent *\/<\/span>\n    <span class=\"py\">--background-dark<\/span><span class=\"p\">:<\/span> <span class=\"m\">#1a1a1a<\/span><span class=\"p\">;<\/span> <span class=\"c\">\/* Deeper, richer dark *\/<\/span>\n    <span class=\"py\">--background-light<\/span><span class=\"p\">:<\/span> <span class=\"m\">#2e2e2e<\/span><span class=\"p\">;<\/span> <span class=\"c\">\/* Slightly lighter for contrast *\/<\/span>\n    <span class=\"py\">--text-light<\/span><span class=\"p\">:<\/span> <span class=\"m\">#f0f0f0<\/span><span class=\"p\">;<\/span> <span class=\"c\">\/* Softer off-white *\/<\/span>\n    <span class=\"py\">--text-accent<\/span><span class=\"p\">:<\/span> <span class=\"m\">#ffffff<\/span><span class=\"p\">;<\/span> <span class=\"c\">\/* Pure white for emphasis *\/<\/span>\n    <span class=\"py\">--border-radius<\/span><span class=\"p\">:<\/span> <span class=\"m\">12px<\/span><span class=\"p\">;<\/span> <span class=\"c\">\/* More pronounced curves *\/<\/span>\n    <span class=\"py\">--shadow-light<\/span><span class=\"p\">:<\/span> <span class=\"n\">rgba<\/span><span class=\"p\">(<\/span><span class=\"m\">0<\/span><span class=\"p\">,<\/span> <span class=\"m\">0<\/span><span class=\"p\">,<\/span> <span class=\"m\">0<\/span><span class=\"p\">,<\/span> <span class=\"m\">0.15<\/span><span class=\"p\">);<\/span> <span class=\"c\">\/* Subtle shadow *\/<\/span>\n    <span class=\"py\">--transition-duration<\/span><span class=\"p\">:<\/span> <span class=\"m\">0.3s<\/span><span class=\"p\">;<\/span>\n    <span class=\"py\">--font-family-base<\/span><span class=\"p\">:<\/span> <span class=\"s2\">'Segoe UI'<\/span><span class=\"p\">,<\/span> <span class=\"n\">Tahoma<\/span><span class=\"p\">,<\/span> <span class=\"n\">Geneva<\/span><span class=\"p\">,<\/span> <span class=\"n\">Verdana<\/span><span class=\"p\">,<\/span> <span class=\"nb\">sans-serif<\/span><span class=\"p\">;<\/span>\n    <span class=\"py\">--font-family-heading<\/span><span class=\"p\">:<\/span> <span class=\"s2\">'Montserrat'<\/span><span class=\"p\">,<\/span> <span class=\"nb\">sans-serif<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"nt\">body<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">font-family<\/span><span class=\"p\">:<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--font-family-base<\/span><span class=\"p\">);<\/span>\n    <span class=\"nl\">background-color<\/span><span class=\"p\">:<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--background-dark<\/span><span class=\"p\">);<\/span>\n    <span class=\"nl\">color<\/span><span class=\"p\">:<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--text-light<\/span><span class=\"p\">);<\/span>\n    <span class=\"nl\">line-height<\/span><span class=\"p\">:<\/span> <span class=\"m\">1.6<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">-webkit-font-smoothing<\/span><span class=\"p\">:<\/span> <span class=\"n\">antialiased<\/span><span class=\"p\">;<\/span> <span class=\"c\">\/* Smoother fonts for webkit browsers *\/<\/span>\n    <span class=\"nl\">-moz-osx-font-smoothing<\/span><span class=\"p\">:<\/span> <span class=\"n\">grayscale<\/span><span class=\"p\">;<\/span> <span class=\"c\">\/* Smoother fonts for Firefox *\/<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"nc\">.chemistry-page<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">display<\/span><span class=\"p\">:<\/span> <span class=\"n\">flex<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">max-width<\/span><span class=\"p\">:<\/span> <span class=\"m\">1200px<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">margin<\/span><span class=\"p\">:<\/span> <span class=\"m\">60px<\/span> <span class=\"nb\">auto<\/span><span class=\"p\">;<\/span> <span class=\"c\">\/* Increased top\/bottom margin *\/<\/span>\n    <span class=\"nl\">padding<\/span><span class=\"p\">:<\/span> <span class=\"m\">30px<\/span><span class=\"p\">;<\/span> <span class=\"c\">\/* Increased padding for spaciousness *\/<\/span>\n    <span class=\"nl\">background<\/span><span class=\"p\">:<\/span> <span class=\"n\">linear-gradient<\/span><span class=\"p\">(<\/span><span class=\"m\">145deg<\/span><span class=\"p\">,<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--background-dark<\/span><span class=\"p\">),<\/span> <span class=\"m\">#111111<\/span><span class=\"p\">);<\/span> <span class=\"c\">\/* Subtle gradient *\/<\/span>\n    <span class=\"nl\">border-radius<\/span><span class=\"p\">:<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--border-radius<\/span><span class=\"p\">);<\/span>\n    <span class=\"nl\">box-shadow<\/span><span class=\"p\">:<\/span> <span class=\"m\">0<\/span> <span class=\"m\">8px<\/span> <span class=\"m\">16px<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--shadow-light<\/span><span class=\"p\">);<\/span> <span class=\"c\">\/* More pronounced shadow *\/<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"nc\">.article-list<\/span><span class=\"o\">,<\/span> <span class=\"nc\">.topic-list<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">flex<\/span><span class=\"p\">:<\/span> <span class=\"m\">1<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">padding<\/span><span class=\"p\">:<\/span> <span class=\"m\">30px<\/span><span class=\"p\">;<\/span> <span class=\"c\">\/* Increased padding *\/<\/span>\n    <span class=\"nl\">background<\/span><span class=\"p\">:<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--background-light<\/span><span class=\"p\">);<\/span>\n    <span class=\"nl\">border-radius<\/span><span class=\"p\">:<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--border-radius<\/span><span class=\"p\">);<\/span>\n    <span class=\"nl\">box-shadow<\/span><span class=\"p\">:<\/span> <span class=\"m\">0<\/span> <span class=\"m\">4px<\/span> <span class=\"m\">8px<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--shadow-light<\/span><span class=\"p\">);<\/span>\n    <span class=\"nl\">margin<\/span><span class=\"p\">:<\/span> <span class=\"m\">0<\/span> <span class=\"m\">15px<\/span><span class=\"p\">;<\/span> <span class=\"c\">\/* Increased horizontal margin *\/<\/span>\n    <span class=\"nl\">transition<\/span><span class=\"p\">:<\/span> <span class=\"n\">transform<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--transition-duration<\/span><span class=\"p\">),<\/span> <span class=\"n\">box-shadow<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--transition-duration<\/span><span class=\"p\">);<\/span> <span class=\"c\">\/* Smooth transitions *\/<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"nc\">.article-list<\/span><span class=\"nd\">:hover<\/span><span class=\"o\">,<\/span> <span class=\"nc\">.topic-list<\/span><span class=\"nd\">:hover<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">transform<\/span><span class=\"p\">:<\/span> <span class=\"n\">translateY<\/span><span class=\"p\">(<\/span><span class=\"m\">-5px<\/span><span class=\"p\">);<\/span> <span class=\"c\">\/* Gentle lift on hover *\/<\/span>\n    <span class=\"nl\">box-shadow<\/span><span class=\"p\">:<\/span> <span class=\"m\">0<\/span> <span class=\"m\">12px<\/span> <span class=\"m\">24px<\/span> <span class=\"n\">rgba<\/span><span class=\"p\">(<\/span><span class=\"m\">0<\/span><span class=\"p\">,<\/span> <span class=\"m\">0<\/span><span class=\"p\">,<\/span> <span class=\"m\">0<\/span><span class=\"p\">,<\/span> <span class=\"m\">0.2<\/span><span class=\"p\">);<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"nc\">.article-list<\/span> <span class=\"nt\">h2<\/span><span class=\"o\">,<\/span> <span class=\"nc\">.topic-list<\/span> <span class=\"nt\">h2<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">margin-bottom<\/span><span class=\"p\">:<\/span> <span class=\"m\">25px<\/span><span class=\"p\">;<\/span> <span class=\"c\">\/* Increased bottom margin *\/<\/span>\n    <span class=\"nl\">text-align<\/span><span class=\"p\">:<\/span> <span class=\"nb\">center<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">font-family<\/span><span class=\"p\">:<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--font-family-heading<\/span><span class=\"p\">);<\/span>\n    <span class=\"nl\">font-size<\/span><span class=\"p\">:<\/span> <span class=\"m\">1.8rem<\/span><span class=\"p\">;<\/span> <span class=\"c\">\/* Slightly larger *\/<\/span>\n    <span class=\"nl\">color<\/span><span class=\"p\">:<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--text-accent<\/span><span class=\"p\">);<\/span>\n    <span class=\"nl\">position<\/span><span class=\"p\">:<\/span> <span class=\"nb\">relative<\/span><span class=\"p\">;<\/span> <span class=\"c\">\/* For pseudo-element underline *\/<\/span>\n    <span class=\"nl\">padding-bottom<\/span><span class=\"p\">:<\/span> <span class=\"m\">10px<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"nc\">.article-list<\/span> <span class=\"nt\">h2<\/span><span class=\"nd\">::after<\/span><span class=\"o\">,<\/span> <span class=\"nc\">.topic-list<\/span> <span class=\"nt\">h2<\/span><span class=\"nd\">::after<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">content<\/span><span class=\"p\">:<\/span> <span class=\"s2\">''<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">position<\/span><span class=\"p\">:<\/span> <span class=\"nb\">absolute<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">left<\/span><span class=\"p\">:<\/span> <span class=\"m\">50%<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">bottom<\/span><span class=\"p\">:<\/span> <span class=\"m\">0<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">width<\/span><span class=\"p\">:<\/span> <span class=\"m\">60px<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">height<\/span><span class=\"p\">:<\/span> <span class=\"m\">3px<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">background-color<\/span><span class=\"p\">:<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--primary-color<\/span><span class=\"p\">);<\/span>\n    <span class=\"nl\">transform<\/span><span class=\"p\">:<\/span> <span class=\"n\">translateX<\/span><span class=\"p\">(<\/span><span class=\"m\">-50%<\/span><span class=\"p\">);<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"nc\">.article-list<\/span> <span class=\"nt\">ul<\/span><span class=\"o\">,<\/span> <span class=\"nc\">.topic-list<\/span> <span class=\"nt\">ul<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">list-style<\/span><span class=\"p\">:<\/span> <span class=\"nb\">none<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">padding<\/span><span class=\"p\">:<\/span> <span class=\"m\">0<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"nc\">.article-list<\/span> <span class=\"nt\">ul<\/span> <span class=\"nt\">li<\/span><span class=\"o\">,<\/span> <span class=\"nc\">.topic-list<\/span> <span class=\"nt\">ul<\/span> <span class=\"nt\">li<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">margin-bottom<\/span><span class=\"p\">:<\/span> <span class=\"m\">15px<\/span><span class=\"p\">;<\/span> <span class=\"c\">\/* Increased bottom margin *\/<\/span>\n    <span class=\"nl\">border-bottom<\/span><span class=\"p\">:<\/span> <span class=\"m\">1px<\/span> <span class=\"nb\">solid<\/span> <span class=\"m\">#444<\/span><span class=\"p\">;<\/span> <span class=\"c\">\/* Subtle divider *\/<\/span>\n    <span class=\"nl\">padding-bottom<\/span><span class=\"p\">:<\/span> <span class=\"m\">10px<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n<span class=\"nc\">.article-list<\/span> <span class=\"nt\">ul<\/span> <span class=\"nt\">li<\/span><span class=\"nd\">:last-child<\/span><span class=\"o\">,<\/span> <span class=\"nc\">.topic-list<\/span> <span class=\"nt\">ul<\/span> <span class=\"nt\">li<\/span><span class=\"nd\">:last-child<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">border-bottom<\/span><span class=\"p\">:<\/span> <span class=\"nb\">none<\/span><span class=\"p\">;<\/span> <span class=\"c\">\/* Remove border from the last item *\/<\/span>\n    <span class=\"nl\">padding-bottom<\/span><span class=\"p\">:<\/span> <span class=\"m\">0<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">margin-bottom<\/span><span class=\"p\">:<\/span> <span class=\"m\">0<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"nc\">.article-list<\/span> <span class=\"nt\">ul<\/span> <span class=\"nt\">li<\/span> <span class=\"nt\">a<\/span><span class=\"o\">,<\/span> <span class=\"nc\">.topic-list<\/span> <span class=\"nt\">ul<\/span> <span class=\"nt\">li<\/span> <span class=\"nt\">a<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">display<\/span><span class=\"p\">:<\/span> <span class=\"nb\">block<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">padding<\/span><span class=\"p\">:<\/span> <span class=\"m\">15px<\/span><span class=\"p\">;<\/span> <span class=\"c\">\/* Increased padding *\/<\/span>\n    <span class=\"nl\">text-decoration<\/span><span class=\"p\">:<\/span> <span class=\"nb\">none<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">color<\/span><span class=\"p\">:<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--text-light<\/span><span class=\"p\">);<\/span>\n    <span class=\"nl\">background<\/span><span class=\"p\">:<\/span> <span class=\"n\">linear-gradient<\/span><span class=\"p\">(<\/span><span class=\"n\">to<\/span> <span class=\"nb\">bottom<\/span> <span class=\"nb\">right<\/span><span class=\"p\">,<\/span> <span class=\"m\">#333<\/span><span class=\"p\">,<\/span> <span class=\"m\">#222<\/span><span class=\"p\">);<\/span> <span class=\"c\">\/* Subtle gradient *\/<\/span>\n    <span class=\"nl\">border-radius<\/span><span class=\"p\">:<\/span> <span class=\"n\">calc<\/span><span class=\"p\">(<\/span><span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--border-radius<\/span><span class=\"p\">)<\/span> <span class=\"p\">\/<\/span> <span class=\"m\">2<\/span><span class=\"p\">);<\/span> <span class=\"c\">\/* Smaller radius for list items *\/<\/span>\n    <span class=\"nl\">transition<\/span><span class=\"p\">:<\/span> <span class=\"n\">background<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--transition-duration<\/span><span class=\"p\">),<\/span> <span class=\"n\">transform<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--transition-duration<\/span><span class=\"p\">);<\/span>\n    <span class=\"nl\">box-shadow<\/span><span class=\"p\">:<\/span> <span class=\"m\">0<\/span> <span class=\"m\">2px<\/span> <span class=\"m\">4px<\/span> <span class=\"n\">rgba<\/span><span class=\"p\">(<\/span><span class=\"m\">0<\/span><span class=\"p\">,<\/span> <span class=\"m\">0<\/span><span class=\"p\">,<\/span> <span class=\"m\">0<\/span><span class=\"p\">,<\/span> <span class=\"m\">0.3<\/span><span class=\"p\">);<\/span> <span class=\"c\">\/* Add shadow to list items *\/<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"nc\">.article-list<\/span> <span class=\"nt\">ul<\/span> <span class=\"nt\">li<\/span> <span class=\"nt\">a<\/span><span class=\"nd\">:hover<\/span><span class=\"o\">,<\/span> <span class=\"nc\">.topic-list<\/span> <span class=\"nt\">ul<\/span> <span class=\"nt\">li<\/span> <span class=\"nt\">a<\/span><span class=\"nd\">:hover<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">background<\/span><span class=\"p\">:<\/span> <span class=\"n\">linear-gradient<\/span><span class=\"p\">(<\/span><span class=\"n\">to<\/span> <span class=\"nb\">bottom<\/span> <span class=\"nb\">right<\/span><span class=\"p\">,<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--primary-color<\/span><span class=\"p\">),<\/span> <span class=\"m\">#0097a7<\/span><span class=\"p\">);<\/span> <span class=\"c\">\/* More vibrant hover *\/<\/span>\n    <span class=\"nl\">transform<\/span><span class=\"p\">:<\/span> <span class=\"n\">scale<\/span><span class=\"p\">(<\/span><span class=\"m\">1.02<\/span><span class=\"p\">);<\/span> <span class=\"c\">\/* Gentle scale on hover *\/<\/span>\n    <span class=\"nl\">box-shadow<\/span><span class=\"p\">:<\/span> <span class=\"m\">0<\/span> <span class=\"m\">4px<\/span> <span class=\"m\">8px<\/span> <span class=\"n\">rgba<\/span><span class=\"p\">(<\/span><span class=\"m\">0<\/span><span class=\"p\">,<\/span> <span class=\"m\">0<\/span><span class=\"p\">,<\/span> <span class=\"m\">0<\/span><span class=\"p\">,<\/span> <span class=\"m\">0.4<\/span><span class=\"p\">);<\/span>\n    <span class=\"nl\">color<\/span><span class=\"p\">:<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--text-accent<\/span><span class=\"p\">);<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"nc\">.content-grid<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">flex<\/span><span class=\"p\">:<\/span> <span class=\"m\">3<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">padding<\/span><span class=\"p\">:<\/span> <span class=\"m\">30px<\/span><span class=\"p\">;<\/span> <span class=\"c\">\/* Increased padding *\/<\/span>\n    <span class=\"nl\">margin<\/span><span class=\"p\">:<\/span> <span class=\"m\">0<\/span> <span class=\"m\">15px<\/span><span class=\"p\">;<\/span> <span class=\"c\">\/* Increased horizontal margin *\/<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"nc\">.topic-grid<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">display<\/span><span class=\"p\">:<\/span> <span class=\"n\">grid<\/span><span class=\"p\">;<\/span>\n    <span class=\"py\">grid-template-columns<\/span><span class=\"p\">:<\/span> <span class=\"nb\">repeat<\/span><span class=\"p\">(<\/span><span class=\"n\">auto-fit<\/span><span class=\"p\">,<\/span> <span class=\"n\">minmax<\/span><span class=\"p\">(<\/span><span class=\"m\">220px<\/span><span class=\"p\">,<\/span> <span class=\"m\">1<\/span><span class=\"n\">fr<\/span><span class=\"p\">));<\/span> <span class=\"c\">\/* Slightly wider min-width *\/<\/span>\n    <span class=\"py\">gap<\/span><span class=\"p\">:<\/span> <span class=\"m\">25px<\/span><span class=\"p\">;<\/span> <span class=\"c\">\/* Increased gap *\/<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"nc\">.topic-grid<\/span> <span class=\"nt\">a<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">display<\/span><span class=\"p\">:<\/span> <span class=\"n\">flex<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">flex-direction<\/span><span class=\"p\">:<\/span> <span class=\"n\">column<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">align-items<\/span><span class=\"p\">:<\/span> <span class=\"nb\">center<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">text-decoration<\/span><span class=\"p\">:<\/span> <span class=\"nb\">none<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">color<\/span><span class=\"p\">:<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--text-light<\/span><span class=\"p\">);<\/span>\n    <span class=\"nl\">background<\/span><span class=\"p\">:<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--background-light<\/span><span class=\"p\">);<\/span>\n    <span class=\"nl\">padding<\/span><span class=\"p\">:<\/span> <span class=\"m\">30px<\/span><span class=\"p\">;<\/span> <span class=\"c\">\/* Increased padding *\/<\/span>\n    <span class=\"nl\">border-radius<\/span><span class=\"p\">:<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--border-radius<\/span><span class=\"p\">);<\/span>\n    <span class=\"nl\">box-shadow<\/span><span class=\"p\">:<\/span> <span class=\"m\">0<\/span> <span class=\"m\">4px<\/span> <span class=\"m\">8px<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--shadow-light<\/span><span class=\"p\">);<\/span>\n    <span class=\"nl\">transition<\/span><span class=\"p\">:<\/span> <span class=\"n\">transform<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--transition-duration<\/span><span class=\"p\">),<\/span> <span class=\"n\">box-shadow<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--transition-duration<\/span><span class=\"p\">);<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"nc\">.topic-grid<\/span> <span class=\"nt\">a<\/span> <span class=\"nt\">img<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">width<\/span><span class=\"p\">:<\/span> <span class=\"m\">60px<\/span><span class=\"p\">;<\/span> <span class=\"c\">\/* Larger icon *\/<\/span>\n    <span class=\"nl\">height<\/span><span class=\"p\">:<\/span> <span class=\"m\">60px<\/span><span class=\"p\">;<\/span> <span class=\"c\">\/* Larger icon *\/<\/span>\n    <span class=\"nl\">margin-bottom<\/span><span class=\"p\">:<\/span> <span class=\"m\">15px<\/span><span class=\"p\">;<\/span> <span class=\"c\">\/* Increased bottom margin *\/<\/span>\n    <span class=\"nl\">filter<\/span><span class=\"p\">:<\/span> <span class=\"n\">brightness<\/span><span class=\"p\">(<\/span><span class=\"m\">1.1<\/span><span class=\"p\">);<\/span> <span class=\"c\">\/* Slightly brighten the icons *\/<\/span>\n    <span class=\"nl\">transition<\/span><span class=\"p\">:<\/span> <span class=\"n\">transform<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--transition-duration<\/span><span class=\"p\">);<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"nc\">.topic-grid<\/span> <span class=\"nt\">a<\/span><span class=\"nd\">:hover<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">transform<\/span><span class=\"p\">:<\/span> <span class=\"n\">scale<\/span><span class=\"p\">(<\/span><span class=\"m\">1.05<\/span><span class=\"p\">);<\/span> <span class=\"c\">\/* Gentle scale on hover *\/<\/span>\n    <span class=\"nl\">box-shadow<\/span><span class=\"p\">:<\/span> <span class=\"m\">0<\/span> <span class=\"m\">8px<\/span> <span class=\"m\">16px<\/span> <span class=\"n\">rgba<\/span><span class=\"p\">(<\/span><span class=\"m\">0<\/span><span class=\"p\">,<\/span> <span class=\"m\">0<\/span><span class=\"p\">,<\/span> <span class=\"m\">0<\/span><span class=\"p\">,<\/span> <span class=\"m\">0.3<\/span><span class=\"p\">);<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"nc\">.topic-grid<\/span> <span class=\"nt\">a<\/span><span class=\"nd\">:hover<\/span> <span class=\"nt\">img<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">transform<\/span><span class=\"p\">:<\/span> <span class=\"n\">scale<\/span><span class=\"p\">(<\/span><span class=\"m\">1.1<\/span><span class=\"p\">);<\/span> <span class=\"c\">\/* Scale the icon on hover *\/<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"c\">\/* Responsive adjustments with smoother transitions *\/<\/span>\n<span class=\"k\">@media<\/span> <span class=\"p\">(<\/span><span class=\"n\">max-width<\/span><span class=\"p\">:<\/span> <span class=\"m\">768px<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nc\">.chemistry-page<\/span> <span class=\"p\">{<\/span>\n        <span class=\"nl\">flex-direction<\/span><span class=\"p\">:<\/span> <span class=\"n\">column<\/span><span class=\"p\">;<\/span>\n        <span class=\"nl\">margin<\/span><span class=\"p\">:<\/span> <span class=\"m\">30px<\/span> <span class=\"nb\">auto<\/span><span class=\"p\">;<\/span> <span class=\"c\">\/* Adjust margins for smaller screens *\/<\/span>\n        <span class=\"nl\">padding<\/span><span class=\"p\">:<\/span> <span class=\"m\">20px<\/span><span class=\"p\">;<\/span>\n    <span class=\"p\">}<\/span>\n    <span class=\"nc\">.article-list<\/span><span class=\"o\">,<\/span> <span class=\"nc\">.topic-list<\/span><span class=\"o\">,<\/span> <span class=\"nc\">.content-grid<\/span> <span class=\"p\">{<\/span>\n        <span class=\"nl\">margin<\/span><span class=\"p\">:<\/span> <span class=\"m\">15px<\/span> <span class=\"m\">0<\/span><span class=\"p\">;<\/span>\n        <span class=\"nl\">padding<\/span><span class=\"p\">:<\/span> <span class=\"m\">20px<\/span><span class=\"p\">;<\/span>\n    <span class=\"p\">}<\/span>\n    <span class=\"nc\">.topic-grid<\/span> <span class=\"p\">{<\/span>\n        <span class=\"py\">grid-template-columns<\/span><span class=\"p\">:<\/span> <span class=\"nb\">repeat<\/span><span class=\"p\">(<\/span><span class=\"n\">auto-fit<\/span><span class=\"p\">,<\/span> <span class=\"n\">minmax<\/span><span class=\"p\">(<\/span><span class=\"m\">150px<\/span><span class=\"p\">,<\/span> <span class=\"m\">1<\/span><span class=\"n\">fr<\/span><span class=\"p\">));<\/span> <span class=\"c\">\/* Adjust for smaller screens *\/<\/span>\n    <span class=\"p\">}<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"c\">\/* Further refinements for smaller screens *\/<\/span>\n<span class=\"k\">@media<\/span> <span class=\"p\">(<\/span><span class=\"n\">max-width<\/span><span class=\"p\">:<\/span> <span class=\"m\">576px<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nc\">.chemistry-page<\/span> <span class=\"p\">{<\/span>\n        <span class=\"nl\">padding<\/span><span class=\"p\">:<\/span> <span class=\"m\">15px<\/span><span class=\"p\">;<\/span>\n    <span class=\"p\">}<\/span>\n    <span class=\"nc\">.article-list<\/span><span class=\"o\">,<\/span> <span class=\"nc\">.topic-list<\/span><span class=\"o\">,<\/span> <span class=\"nc\">.content-grid<\/span> <span class=\"p\">{<\/span>\n        <span class=\"nl\">padding<\/span><span class=\"p\">:<\/span> <span class=\"m\">15px<\/span><span class=\"p\">;<\/span>\n    <span class=\"p\">}<\/span>\n    <span class=\"nc\">.article-list<\/span> <span class=\"nt\">h2<\/span><span class=\"o\">,<\/span> <span class=\"nc\">.topic-list<\/span> <span class=\"nt\">h2<\/span> <span class=\"p\">{<\/span>\n        <span class=\"nl\">font-size<\/span><span class=\"p\">:<\/span> <span class=\"m\">1.5rem<\/span><span class=\"p\">;<\/span>\n        <span class=\"nl\">margin-bottom<\/span><span class=\"p\">:<\/span> <span class=\"m\">20px<\/span><span class=\"p\">;<\/span>\n    <span class=\"p\">}<\/span>\n    <span class=\"nc\">.topic-grid<\/span> <span class=\"p\">{<\/span>\n        <span class=\"py\">gap<\/span><span class=\"p\">:<\/span> <span class=\"m\">15px<\/span><span class=\"p\">;<\/span>\n    <span class=\"p\">}<\/span>\n    <span class=\"nc\">.topic-grid<\/span> <span class=\"nt\">a<\/span> <span class=\"p\">{<\/span>\n        <span class=\"nl\">padding<\/span><span class=\"p\">:<\/span> <span class=\"m\">20px<\/span><span class=\"p\">;<\/span>\n    <span class=\"p\">}<\/span>\n    <span class=\"nc\">.topic-grid<\/span> <span class=\"nt\">a<\/span> <span class=\"nt\">img<\/span> <span class=\"p\">{<\/span>\n        <span class=\"nl\">width<\/span><span class=\"p\">:<\/span> <span class=\"m\">40px<\/span><span class=\"p\">;<\/span>\n        <span class=\"nl\">height<\/span><span class=\"p\">:<\/span> <span class=\"m\">40px<\/span><span class=\"p\">;<\/span>\n        <span class=\"nl\">margin-bottom<\/span><span class=\"p\">:<\/span> <span class=\"m\">10px<\/span><span class=\"p\">;<\/span>\n    <span class=\"p\">}<\/span>\n<span class=\"p\">}<\/span>\n\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0645\u0646 \u06cc\u06a9 \u0637\u0631\u0627\u062d\u06cc \u067e\u0631 \u062c\u0646\u0628 \u0648 \u062c\u0648\u0634 \u0648 \u0645\u062f\u0631\u0646\u060c \u0628\u0627 \u062a\u0645 \u062a\u06cc\u0631\u0647\u060c \u0648 \u0634\u06cc\u0628 \u0647\u0627\u06cc \u0638\u0631\u06cc\u0641 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u0647 \u0627\u0645. \u0627\u06cc\u0646 \u0637\u0631\u062d \u0627\u0632 flexbox \u0648 grid \u0628\u0631\u0627\u06cc \u067e\u0627\u0633\u062e\u06af\u0648\u06cc\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u062f. \u0645\u0646 \u0647\u0645\u0686\u0646\u06cc\u0646 \u0686\u0646\u062f \u0627\u0641\u06a9\u062a \u0634\u0646\u0627\u0648\u0631 \u0632\u06cc\u0628\u0627 \u0631\u0627 \u0628\u0631\u0627\u06cc \u062a\u0639\u0627\u0645\u0644 \u0628\u06cc\u0634\u062a\u0631 \u0635\u0641\u062d\u0647 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u0645.<br \/>\u0642\u0628\u0644 \u0627\u0632 \u062d\u0631\u06a9\u062a\u060c \u0627\u062c\u0627\u0632\u0647 \u062f\u0647\u06cc\u062f \u0628\u0647 \u0686\u0646\u062f \u0633\u0648\u0627\u0644\u06cc \u06a9\u0647 \u0645\u0645\u06a9\u0646 \u0627\u0633\u062a \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u062f \u0628\u067e\u0631\u062f\u0627\u0632\u06cc\u0645.<\/p>\n<ul>\n<li>\u0686\u0631\u0627 \u0628\u0647 \u062c\u0627\u06cc \u0646\u0648\u0634\u062a\u0646 \u0645\u0633\u062a\u0642\u06cc\u0645 \u0645\u0642\u0627\u062f\u06cc\u0631 \u0631\u0646\u06af \u062f\u0631 \u0642\u0648\u0627\u0646\u06cc\u0646\u060c \u0627\u0632 \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc \u0633\u0641\u0627\u0631\u0634\u06cc (\u0645\u062a\u063a\u06cc\u0631\u0647\u0627) \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u0645\u061f<\/li>\n<li>\u0637\u0631\u062d \u0631\u0646\u06af (\u067e\u0631 \u062c\u0646\u0628 \u0648 \u062c\u0648\u0634 \u0648 \u062f\u0631 \u0639\u06cc\u0646 \u062d\u0627\u0644 \u062d\u0631\u0641\u0647 \u0627\u06cc) \u0686\u06af\u0648\u0646\u0647 \u0627\u0646\u062a\u062e\u0627\u0628 \u0634\u062f\u061f \u0648 \u0686\u0647 \u0686\u06cc\u0632\u06cc \u0628\u0627\u0639\u062b \u0645\u06cc \u0634\u0648\u062f \u0627\u06cc\u0646 \u0631\u0646\u06af \u0647\u0627 \u0628\u0647 \u062e\u0648\u0628\u06cc \u0628\u0627 \u0647\u0645 \u06a9\u0627\u0631 \u06a9\u0646\u0646\u062f\u061f<\/li>\n<\/ul>\n<p>\u067e\u0627\u0633\u062e: \u0645\u0646 \u0628\u0647 \u0686\u0646\u062f \u062f\u0644\u06cc\u0644 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc \u0633\u0641\u0627\u0631\u0634\u06cc (\u0645\u062a\u063a\u06cc\u0631\u0647\u0627) \u0631\u0627 \u0627\u0646\u062a\u062e\u0627\u0628 \u06a9\u0631\u062f\u0645. \u062f\u0631 \u062f\u0631\u062c\u0647 \u0627\u0648\u0644\u060c \u0622\u0646\u0647\u0627 \u0642\u0627\u0628\u0644\u06cc\u062a \u0646\u06af\u0647\u062f\u0627\u0631\u06cc \u0648 \u062b\u0628\u0627\u062a \u0631\u0627 \u0627\u0641\u0632\u0627\u06cc\u0634 \u0645\u06cc \u062f\u0647\u0646\u062f. \u062a\u063a\u06cc\u06cc\u0631 \u0631\u0646\u06af \u062f\u0631 \u06a9\u0644 \u0634\u06cc\u0648\u0647 \u0646\u0627\u0645\u0647 \u0628\u0647 \u0633\u0627\u062f\u06af\u06cc \u062a\u063a\u06cc\u06cc\u0631 \u0645\u0642\u062f\u0627\u0631 \u0645\u062a\u063a\u06cc\u0631 \u062f\u0631 \u0631\u06cc\u0634\u0647 \u0645\u06cc \u0634\u0648\u062f. \u0627\u06cc\u0646 \u0628\u0633\u06cc\u0627\u0631 \u06a9\u0627\u0631\u0622\u0645\u062f\u062a\u0631 \u0627\u0632 \u06a9\u0634\u0641 \u0647\u0631 \u0646\u0645\u0648\u0646\u0647 \u0627\u0632 \u06cc\u06a9 \u06a9\u062f \u0631\u0646\u06af \u062e\u0627\u0635 \u0627\u0633\u062a. \u0628\u0647\u200c\u0639\u0644\u0627\u0648\u0647\u060c \u0645\u062a\u063a\u06cc\u0631\u0647\u0627 \u0628\u0627 \u062f\u0627\u062f\u0646 \u0646\u0627\u0645\u200c\u0647\u0627\u06cc \u0645\u0639\u0646\u06cc\u200c\u062f\u0627\u0631 \u0628\u0647 \u0645\u0642\u0627\u062f\u06cc\u0631\u060c \u062e\u0648\u0627\u0646\u0627\u06cc\u06cc \u0631\u0627 \u0628\u0647\u0628\u0648\u062f \u0645\u06cc\u200c\u0628\u062e\u0634\u0646\u062f \u0648 \u0647\u062f\u0641 \u06a9\u062f \u0631\u0627 \u0648\u0627\u0636\u062d\u200c\u062a\u0631 \u0645\u06cc\u200c\u06a9\u0646\u0646\u062f. \u0647\u0645\u0686\u0646\u06cc\u0646 \u0642\u0627\u0644\u0628 \u0628\u0646\u062f\u06cc \u0631\u0627 \u062a\u0633\u0647\u06cc\u0644 \u0645\u06cc \u06a9\u0646\u062f \u0648 \u0627\u0645\u06a9\u0627\u0646 \u062a\u063a\u06cc\u06cc\u0631\u0627\u062a \u067e\u0648\u06cc\u0627 \u0631\u0627 \u0628\u0631 \u0627\u0633\u0627\u0633 \u062a\u0631\u062c\u06cc\u062d\u0627\u062a \u06a9\u0627\u0631\u0628\u0631 \u06cc\u0627 \u062d\u0627\u0644\u062a \u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 \u0641\u0631\u0627\u0647\u0645 \u0645\u06cc \u06a9\u0646\u062f.<br \/>\u0637\u0631\u062d \u0631\u0646\u06af \u0628\u0627 \u0647\u062f\u0641 \u0627\u06cc\u062c\u0627\u062f \u0632\u06cc\u0628\u0627\u06cc\u06cc \u0634\u0646\u0627\u0633\u06cc &#8220;\u067e\u0631 \u062c\u0646\u0628 \u0648 \u062c\u0648\u0634 \u0648 \u062f\u0631 \u0639\u06cc\u0646 \u062d\u0627\u0644 \u062d\u0631\u0641\u0647 \u0627\u06cc&#8221; \u0627\u0646\u062a\u062e\u0627\u0628 \u0634\u062f\u0647 \u0627\u0633\u062a. \u0645\u0646 \u0645\u06cc \u062e\u0648\u0627\u0633\u062a\u0645 \u0628\u06cc\u0646 \u067e\u0631\u0627\u0646\u0631\u0698\u06cc \u0648 \u0642\u0627\u0628\u0644 \u0627\u0639\u062a\u0645\u0627\u062f \u062a\u0639\u0627\u062f\u0644 \u0628\u0631\u0642\u0631\u0627\u0631 \u06a9\u0646\u0645.<\/p>\n<ul>\n<li>  <strong><code>--primary-color: #00bcd4<\/code>  (\u0641\u06cc\u0631\u0648\u0632\u0647 \u0627\u06cc \u067e\u0631 \u062c\u0646\u0628 \u0648 \u062c\u0648\u0634):<\/strong>  \u0627\u06cc\u0646 \u06cc\u06a9 \u0631\u0646\u06af \u0631\u0648\u0634\u0646 \u0648 \u062c\u0630\u0627\u0628 \u0627\u0633\u062a \u06a9\u0647 \u062d\u0633 \u0645\u062f\u0631\u0646\u06cc\u062a\u0647 \u0648 \u0646\u0648\u0622\u0648\u0631\u06cc \u0631\u0627 \u0628\u0631\u0645\u06cc \u0627\u0646\u06af\u06cc\u0632\u062f \u0648 \u0628\u0631\u0627\u06cc \u06cc\u06a9 \u0645\u0648\u0636\u0648\u0639 \u0645\u0631\u062a\u0628\u0637 \u0628\u0627 \u0639\u0644\u0645 \u0645\u0646\u0627\u0633\u0628 \u0627\u0633\u062a. \u0628\u06cc\u0634 \u0627\u0632 \u062d\u062f \u0627\u0634\u0628\u0627\u0639 \u0646\u0634\u062f\u0647 \u0627\u0633\u062a \u0648 \u062f\u0631\u062c\u0647 \u0627\u06cc \u0627\u0632 \u062d\u0631\u0641\u0647 \u0627\u06cc \u0628\u0648\u062f\u0646 \u0631\u0627 \u062d\u0641\u0638 \u0645\u06cc \u06a9\u0646\u062f.<\/li>\n<li>  <strong><code>--secondary-color: #ffc107<\/code>  (\u0632\u0631\u062f \u067e\u0631 \u0627\u0646\u0631\u0698\u06cc):<\/strong>  \u0627\u06cc\u0646 \u0631\u0646\u06af \u0632\u0631\u062f \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u06cc\u06a9 \u0644\u0647\u062c\u0647 \u0645\u06a9\u0645\u0644 \u0639\u0645\u0644 \u0645\u06cc \u06a9\u0646\u062f \u0648 \u0627\u0646\u0631\u0698\u06cc \u0648 \u062e\u0648\u0634 \u0628\u06cc\u0646\u06cc \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u0645\u06cc \u06a9\u0646\u062f. \u0632\u0631\u062f \u0627\u063a\u0644\u0628 \u0628\u0627 \u062e\u0644\u0627\u0642\u06cc\u062a \u0648 \u0647\u0648\u0634 \u0645\u0631\u062a\u0628\u0637 \u0627\u0633\u062a.<\/li>\n<li>  <strong>\u067e\u0633 \u0632\u0645\u06cc\u0646\u0647 \u0647\u0627\u06cc \u062a\u0627\u0631\u06cc\u06a9 (<code>--background-dark<\/code>\u060c <code>--background-light<\/code>):<\/strong> \u067e\u0633 \u0632\u0645\u06cc\u0646\u0647 \u062a\u06cc\u0631\u0647 \u067e\u0627\u06cc\u0647 \u0645\u062d\u06a9\u0645 \u0648 \u067e\u0627\u06cc\u062f\u0627\u0631\u06cc \u0631\u0627 \u0641\u0631\u0627\u0647\u0645 \u0645\u06cc \u06a9\u0646\u062f \u06a9\u0647 \u0628\u0647 \u0631\u0646\u06af \u0647\u0627\u06cc \u0631\u0648\u0634\u0646 \u062a\u0631 \u0627\u062c\u0627\u0632\u0647 \u0645\u06cc \u062f\u0647\u062f \u062e\u0648\u062f\u0646\u0645\u0627\u06cc\u06cc \u06a9\u0646\u0646\u062f. \u0647\u0645\u0686\u0646\u06cc\u0646 \u062d\u0633 \u067e\u06cc\u0686\u06cc\u062f\u0647 \u0627\u06cc \u0631\u0627 \u0628\u0647 \u0634\u0645\u0627 \u0627\u0644\u0642\u0627 \u0645\u06cc \u06a9\u0646\u062f.<\/li>\n<li>  <strong>\u0645\u062a\u0646 \u0633\u0628\u06a9 (<code>--text-light<\/code>\u060c <code>--text-accent<\/code>):<\/strong> \u0645\u062a\u0646 \u0633\u0641\u06cc\u062f \u0645\u0627\u06cc\u0644 \u0628\u0647 \u0633\u0641\u06cc\u062f \u0648 \u062e\u0627\u0644\u0635 \u0631\u0648\u06cc \u067e\u0633\u200c\u0632\u0645\u06cc\u0646\u0647 \u062a\u06cc\u0631\u0647\u060c \u062e\u0648\u0627\u0646\u0627\u06cc\u06cc \u0628\u0627\u0644\u0627 \u0648 \u0638\u0627\u0647\u0631\u06cc \u062a\u0645\u06cc\u0632 \u0648 \u0645\u062f\u0631\u0646 \u0631\u0627 \u062a\u0636\u0645\u06cc\u0646 \u0645\u06cc\u200c\u06a9\u0646\u062f.<\/li>\n<\/ul>\n<p><strong>\u0686\u0631\u0627 \u0622\u0646\u0647\u0627 \u0628\u0627 \u0647\u0645 \u062e\u0648\u0628 \u06a9\u0627\u0631 \u0645\u06cc \u06a9\u0646\u0646\u062f:<\/strong><\/p>\n<ol>\n<li>\n<strong>\u06a9\u0646\u062a\u0631\u0627\u0633\u062a \u0645\u06a9\u0645\u0644:<\/strong> \u0641\u06cc\u0631\u0648\u0632\u0647\u200c\u0627\u06cc \u0648 \u0632\u0631\u062f \u0631\u0646\u06af\u200c\u0647\u0627\u06cc \u062a\u0642\u0631\u06cc\u0628\u0627 \u0645\u06a9\u0645\u0644 \u06cc\u06a9\u062f\u06cc\u06af\u0631 \u0647\u0633\u062a\u0646\u062f \u0648 \u06a9\u0646\u062a\u0631\u0627\u0633\u062a \u0628\u0635\u0631\u06cc \u062c\u0630\u0627\u0628\u06cc \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc\u200c\u06a9\u0646\u0646\u062f \u06a9\u0647 \u067e\u0648\u06cc\u0627 \u0627\u0633\u062a \u0627\u0645\u0627 \u0646\u0627\u062e\u0648\u0634\u0627\u06cc\u0646\u062f \u0646\u06cc\u0633\u062a.<\/li>\n<li>\n<strong>\u0647\u0627\u0631\u0645\u0648\u0646\u06cc \u0622\u0646\u0627\u0644\u0648\u06af:<\/strong> \u0633\u0627\u06cc\u0647 \u0647\u0627\u06cc \u062a\u06cc\u0631\u0647 \u067e\u0633 \u0632\u0645\u06cc\u0646\u0647 \u0645\u0634\u0627\u0628\u0647 \u0647\u0633\u062a\u0646\u062f\u060c \u0628\u0647 \u0627\u06cc\u0646 \u0645\u0639\u0646\u06cc \u06a9\u0647 \u062f\u0631 \u0686\u0631\u062e\u0647 \u0631\u0646\u06af \u0628\u0647 \u06cc\u06a9\u062f\u06cc\u06af\u0631 \u0646\u0632\u062f\u06cc\u06a9 \u0647\u0633\u062a\u0646\u062f \u0648 \u062d\u0633 \u0647\u0645\u0627\u0647\u0646\u06af \u0648 \u0645\u0646\u0633\u062c\u0645\u06cc \u0631\u0627 \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc \u06a9\u0646\u0646\u062f.<\/li>\n<li>\n<strong>\u062a\u0636\u0627\u062f \u0627\u0631\u0632\u0634:<\/strong> \u062a\u0641\u0627\u0648\u062a \u0642\u0627\u0628\u0644 \u062a\u0648\u062c\u0647 \u062f\u0631 \u0645\u0642\u062f\u0627\u0631 (\u0631\u0648\u0634\u0646\u06cc \/ \u062a\u0627\u0631\u06cc\u06a9\u06cc) \u0628\u06cc\u0646 \u0645\u062a\u0646 \u0648 \u067e\u0633 \u0632\u0645\u06cc\u0646\u0647 \u062e\u0648\u0627\u0646\u0627\u06cc\u06cc \u0639\u0627\u0644\u06cc \u0631\u0627 \u062a\u0636\u0645\u06cc\u0646 \u0645\u06cc \u06a9\u0646\u062f.<\/li>\n<li>\n<strong>\u0627\u0634\u0628\u0627\u0639 \u0645\u062a\u0639\u0627\u062f\u0644:<\/strong> \u0631\u0646\u06af \u0647\u0627\u06cc \u0627\u0635\u0644\u06cc \u0648 \u062b\u0627\u0646\u0648\u06cc\u0647 \u067e\u0631 \u062c\u0646\u0628 \u0648 \u062c\u0648\u0634 \u0647\u0633\u062a\u0646\u062f \u0627\u0645\u0627 \u0628\u06cc\u0634 \u0627\u0632 \u062d\u062f \u0627\u0634\u0628\u0627\u0639 \u0646\u0634\u062f\u0647 \u0627\u0646\u062f \u0648 \u0627\u0632 \u0638\u0627\u0647\u0631\u06cc \u06a9\u0648\u062f\u06a9\u0627\u0646\u0647 \u06cc\u0627 \u0637\u0627\u0642\u062a \u0641\u0631\u0633\u0627 \u0627\u062c\u062a\u0646\u0627\u0628 \u0645\u06cc \u06a9\u0646\u0646\u062f. \u0622\u0646\u0647\u0627 \u0628\u0627 \u067e\u0633 \u0632\u0645\u06cc\u0646\u0647 \u062e\u0627\u0645\u0648\u0634 \u062a\u0631 \u0645\u062a\u0639\u0627\u062f\u0644 \u0645\u06cc \u0634\u0648\u0646\u062f.<\/li>\n<\/ol>\n<p>\u0627\u0633\u0627\u0633\u0627\u064b\u060c \u062a\u0631\u06a9\u06cc\u0628 \u0631\u0646\u06af \u0627\u0635\u0644\u06cc \u0631\u0648\u0634\u0646 \u0648 \u0645\u062f\u0631\u0646\u060c \u0644\u0647\u062c\u0647 \u06af\u0631\u0645\u060c \u0648 \u067e\u0633\u200c\u0632\u0645\u06cc\u0646\u0647 \u062a\u06cc\u0631\u0647 \u067e\u06cc\u0686\u06cc\u062f\u0647\u060c \u0647\u0645\u0631\u0627\u0647 \u0628\u0627 \u0631\u0646\u06af\u200c\u0647\u0627\u06cc \u0645\u062a\u0646\u06cc \u06a9\u0647 \u0628\u0627 \u062f\u0642\u062a \u0627\u0646\u062a\u062e\u0627\u0628 \u0634\u062f\u0647\u200c\u0627\u0646\u062f\u060c \u067e\u0627\u0644\u062a\u06cc \u0631\u0627 \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc\u200c\u06a9\u0646\u0646\u062f \u06a9\u0647 \u0647\u0645 \u0627\u0632 \u0646\u0638\u0631 \u0628\u0635\u0631\u06cc \u062c\u0630\u0627\u0628 \u0648 \u0647\u0645 \u0628\u0631\u0627\u06cc \u06cc\u06a9 \u0632\u0645\u06cc\u0646\u0647 \u062d\u0631\u0641\u0647\u200c\u0627\u06cc \u0648 \u0622\u0645\u0648\u0632\u0634\u06cc \u0645\u0646\u0627\u0633\u0628 \u0627\u0633\u062a.<\/p>\n<p>\u0628\u0627 \u0627\u06cc\u0646 \u062d\u0627\u0644\u060c \u0627\u06cc\u0646 \u0633\u0628\u06a9 \u0647\u0627 \u0641\u0642\u0637 \u0628\u0631\u0627\u06cc \u0635\u0641\u062d\u0647 \u0634\u06cc\u0645\u06cc \u0648 \u0646\u0647 \u0628\u0631\u0627\u06cc \u06a9\u0644 \u0648\u0628 \u0633\u0627\u06cc\u062a \u06a9\u0627\u0631 \u0645\u06cc \u06a9\u0646\u0646\u062f. \u0628\u0646\u0627\u0628\u0631\u0627\u06cc\u0646\u060c \u0645\u0646 \u06cc\u06a9 \u0641\u0627\u06cc\u0644 CSS \u062f\u06cc\u06af\u0631 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0631\u062f\u0645\u060c <code>style-main.css<\/code> \u062f\u0627\u062e\u0644 <code>\\Chemistry<\/code> \u0628\u0631\u0627\u06cc \u0646\u0627\u062f\u06cc\u062f\u0647 \u06af\u0631\u0641\u062a\u0646 \u0633\u0628\u06a9 \u0647\u0627\u06cc \u0627\u0635\u0644\u06cc<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight css\"><code><span class=\"c\">\/* ==================== Root Variables for Global Styling ==================== *\/<\/span>\n<span class=\"nd\">:root<\/span> <span class=\"p\">{<\/span>\n    <span class=\"py\">--primary-bg<\/span><span class=\"p\">:<\/span> <span class=\"m\">#1a1a1a<\/span><span class=\"p\">;<\/span>\n    <span class=\"py\">--secondary-bg<\/span><span class=\"p\">:<\/span> <span class=\"m\">#2e2e2e<\/span><span class=\"p\">;<\/span> <span class=\"c\">\/* Slightly lighter for better definition *\/<\/span>\n    <span class=\"py\">--text-color-light<\/span><span class=\"p\">:<\/span> <span class=\"m\">#f0f0f0<\/span><span class=\"p\">;<\/span> <span class=\"c\">\/* Softer white for better readability *\/<\/span>\n    <span class=\"py\">--accent-color<\/span><span class=\"p\">:<\/span> <span class=\"m\">#64b5f6<\/span><span class=\"p\">;<\/span>\n    <span class=\"py\">--accent-hover-color<\/span><span class=\"p\">:<\/span> <span class=\"m\">#42a5f5<\/span><span class=\"p\">;<\/span>\n    <span class=\"py\">--box-shadow-color<\/span><span class=\"p\">:<\/span> <span class=\"n\">rgba<\/span><span class=\"p\">(<\/span><span class=\"m\">0<\/span><span class=\"p\">,<\/span> <span class=\"m\">0<\/span><span class=\"p\">,<\/span> <span class=\"m\">0<\/span><span class=\"p\">,<\/span> <span class=\"m\">0.15<\/span><span class=\"p\">);<\/span> <span class=\"c\">\/* Darker shadow for better contrast on dark backgrounds *\/<\/span>\n    <span class=\"py\">--border-radius-base<\/span><span class=\"p\">:<\/span> <span class=\"m\">10px<\/span><span class=\"p\">;<\/span> <span class=\"c\">\/* Slightly more rounded *\/<\/span>\n    <span class=\"py\">--transition-duration<\/span><span class=\"p\">:<\/span> <span class=\"m\">0.35s<\/span><span class=\"p\">;<\/span> <span class=\"c\">\/* Fine-tuned transition speed *\/<\/span>\n    <span class=\"py\">--spacing-large<\/span><span class=\"p\">:<\/span> <span class=\"m\">50px<\/span><span class=\"p\">;<\/span> <span class=\"c\">\/* Increased spacing for a more open feel *\/<\/span>\n    <span class=\"py\">--spacing-medium<\/span><span class=\"p\">:<\/span> <span class=\"m\">25px<\/span><span class=\"p\">;<\/span>\n    <span class=\"py\">--spacing-small<\/span><span class=\"p\">:<\/span> <span class=\"m\">12px<\/span><span class=\"p\">;<\/span>\n    <span class=\"py\">--font-family-base<\/span><span class=\"p\">:<\/span> <span class=\"s2\">'Inter'<\/span><span class=\"p\">,<\/span> <span class=\"nb\">sans-serif<\/span><span class=\"p\">;<\/span> <span class=\"c\">\/* A modern and versatile font *\/<\/span>\n    <span class=\"py\">--font-family-heading<\/span><span class=\"p\">:<\/span> <span class=\"s2\">'Poppins'<\/span><span class=\"p\">,<\/span> <span class=\"nb\">sans-serif<\/span><span class=\"p\">;<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"c\">\/* ==================== Base Styles ==================== *\/<\/span>\n  <span class=\"nt\">body<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">font-family<\/span><span class=\"p\">:<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--font-family-base<\/span><span class=\"p\">);<\/span>\n    <span class=\"nl\">margin<\/span><span class=\"p\">:<\/span> <span class=\"m\">0<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">padding<\/span><span class=\"p\">:<\/span> <span class=\"m\">0<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">line-height<\/span><span class=\"p\">:<\/span> <span class=\"m\">1.7<\/span><span class=\"p\">;<\/span> <span class=\"c\">\/* Improved line height for readability *\/<\/span>\n    <span class=\"nl\">color<\/span><span class=\"p\">:<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--text-color-light<\/span><span class=\"p\">);<\/span>\n    <span class=\"nl\">background-color<\/span><span class=\"p\">:<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--primary-bg<\/span><span class=\"p\">);<\/span>\n    <span class=\"nl\">-webkit-font-smoothing<\/span><span class=\"p\">:<\/span> <span class=\"n\">antialiased<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">-moz-osx-font-smoothing<\/span><span class=\"p\">:<\/span> <span class=\"n\">grayscale<\/span><span class=\"p\">;<\/span>\n    <span class=\"py\">scroll-behavior<\/span><span class=\"p\">:<\/span> <span class=\"n\">smooth<\/span><span class=\"p\">;<\/span> <span class=\"c\">\/* Enable smooth scrolling *\/<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"c\">\/* ==================== Typography ==================== *\/<\/span>\n  <span class=\"nt\">h1<\/span><span class=\"o\">,<\/span> <span class=\"nt\">h2<\/span><span class=\"o\">,<\/span> <span class=\"nt\">h3<\/span><span class=\"o\">,<\/span> <span class=\"nt\">h4<\/span><span class=\"o\">,<\/span> <span class=\"nt\">h5<\/span><span class=\"o\">,<\/span> <span class=\"nt\">h6<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">font-family<\/span><span class=\"p\">:<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--font-family-heading<\/span><span class=\"p\">);<\/span>\n    <span class=\"nl\">font-weight<\/span><span class=\"p\">:<\/span> <span class=\"m\">600<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">line-height<\/span><span class=\"p\">:<\/span> <span class=\"m\">1.3<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">margin-bottom<\/span><span class=\"p\">:<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--spacing-small<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"c\">\/* ==================== Selection Styling ==================== *\/<\/span>\n  <span class=\"nd\">::selection<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">background-color<\/span><span class=\"p\">:<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--accent-color<\/span><span class=\"p\">);<\/span>\n    <span class=\"nl\">color<\/span><span class=\"p\">:<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--secondary-bg<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"c\">\/* ==================== Scrollbar Styling (Webkit Browsers) ==================== *\/<\/span>\n  <span class=\"nd\">::-webkit-scrollbar<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">width<\/span><span class=\"p\">:<\/span> <span class=\"m\">8px<\/span><span class=\"p\">;<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nd\">::-webkit-scrollbar-track<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">background<\/span><span class=\"p\">:<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--secondary-bg<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nd\">::-webkit-scrollbar-thumb<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">background-color<\/span><span class=\"p\">:<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--accent-color<\/span><span class=\"p\">);<\/span>\n    <span class=\"nl\">border-radius<\/span><span class=\"p\">:<\/span> <span class=\"m\">4px<\/span><span class=\"p\">;<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nd\">::-webkit-scrollbar-thumb:hover<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">background-color<\/span><span class=\"p\">:<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--accent-hover-color<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"c\">\/* ==================== Header &amp; Navigation ==================== *\/<\/span>\n  <span class=\"nt\">header<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">background<\/span><span class=\"p\">:<\/span> <span class=\"n\">rgba<\/span><span class=\"p\">(<\/span><span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--secondary-bg-rgb<\/span><span class=\"p\">,<\/span> <span class=\"m\">46<\/span><span class=\"p\">,<\/span> <span class=\"m\">46<\/span><span class=\"p\">,<\/span> <span class=\"m\">46<\/span><span class=\"p\">),<\/span> <span class=\"m\">0.95<\/span><span class=\"p\">);<\/span> <span class=\"c\">\/* Use RGB for transparency *\/<\/span>\n    <span class=\"py\">backdrop-filter<\/span><span class=\"p\">:<\/span> <span class=\"n\">blur<\/span><span class=\"p\">(<\/span><span class=\"m\">10px<\/span><span class=\"p\">);<\/span> <span class=\"c\">\/* Apply a blur to the background *\/<\/span>\n    <span class=\"nl\">padding<\/span><span class=\"p\">:<\/span> <span class=\"m\">1.2rem<\/span> <span class=\"m\">0<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">box-shadow<\/span><span class=\"p\">:<\/span> <span class=\"m\">0<\/span> <span class=\"m\">3px<\/span> <span class=\"m\">6px<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--box-shadow-color<\/span><span class=\"p\">);<\/span>\n    <span class=\"nl\">position<\/span><span class=\"p\">:<\/span> <span class=\"n\">sticky<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">top<\/span><span class=\"p\">:<\/span> <span class=\"m\">0<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">z-index<\/span><span class=\"p\">:<\/span> <span class=\"m\">100<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">transition<\/span><span class=\"p\">:<\/span> <span class=\"n\">box-shadow<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--transition-duration<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"c\">\/* Extract RGB values from the variable *\/<\/span>\n  <span class=\"k\">@supports<\/span> <span class=\"n\">not<\/span> <span class=\"p\">(<\/span><span class=\"n\">backdrop-filter<\/span><span class=\"p\">:<\/span> <span class=\"n\">blur<\/span><span class=\"p\">(<\/span><span class=\"m\">10px<\/span><span class=\"p\">))<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nt\">header<\/span> <span class=\"p\">{<\/span>\n      <span class=\"nl\">background-color<\/span><span class=\"p\">:<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--secondary-bg<\/span><span class=\"p\">);<\/span> <span class=\"c\">\/* Fallback for browsers that don't support backdrop-filter *\/<\/span>\n    <span class=\"p\">}<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nt\">nav<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">display<\/span><span class=\"p\">:<\/span> <span class=\"n\">flex<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">justify-content<\/span><span class=\"p\">:<\/span> <span class=\"n\">space-between<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">align-items<\/span><span class=\"p\">:<\/span> <span class=\"nb\">center<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">max-width<\/span><span class=\"p\">:<\/span> <span class=\"m\">1200px<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">margin<\/span><span class=\"p\">:<\/span> <span class=\"m\">0<\/span> <span class=\"nb\">auto<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">padding<\/span><span class=\"p\">:<\/span> <span class=\"m\">0<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--spacing-medium<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nc\">.logo<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">font-size<\/span><span class=\"p\">:<\/span> <span class=\"m\">2rem<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">font-weight<\/span><span class=\"p\">:<\/span> <span class=\"m\">700<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">color<\/span><span class=\"p\">:<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--accent-color<\/span><span class=\"p\">);<\/span>\n    <span class=\"nl\">text-shadow<\/span><span class=\"p\">:<\/span> <span class=\"m\">0<\/span> <span class=\"m\">0<\/span> <span class=\"m\">5px<\/span> <span class=\"n\">rgba<\/span><span class=\"p\">(<\/span><span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--accent-color-rgb<\/span><span class=\"p\">,<\/span> <span class=\"m\">100<\/span><span class=\"p\">,<\/span> <span class=\"m\">181<\/span><span class=\"p\">,<\/span> <span class=\"m\">246<\/span><span class=\"p\">),<\/span> <span class=\"m\">0.8<\/span><span class=\"p\">);<\/span> <span class=\"c\">\/* Add a subtle glow *\/<\/span>\n    <span class=\"nl\">transition<\/span><span class=\"p\">:<\/span> <span class=\"n\">transform<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--transition-duration<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nc\">.logo<\/span><span class=\"nd\">:hover<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">transform<\/span><span class=\"p\">:<\/span> <span class=\"n\">scale<\/span><span class=\"p\">(<\/span><span class=\"m\">1.05<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"c\">\/* Extract RGB values from the variable *\/<\/span>\n  <span class=\"nd\">:root<\/span> <span class=\"p\">{<\/span>\n    <span class=\"py\">--secondary-bg-rgb<\/span><span class=\"p\">:<\/span> <span class=\"m\">46<\/span><span class=\"p\">,<\/span> <span class=\"m\">46<\/span><span class=\"p\">,<\/span> <span class=\"m\">46<\/span><span class=\"p\">;<\/span>\n    <span class=\"py\">--accent-color-rgb<\/span><span class=\"p\">:<\/span> <span class=\"m\">100<\/span><span class=\"p\">,<\/span> <span class=\"m\">181<\/span><span class=\"p\">,<\/span> <span class=\"m\">246<\/span><span class=\"p\">;<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nt\">nav<\/span> <span class=\"nt\">ul<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">list-style<\/span><span class=\"p\">:<\/span> <span class=\"nb\">none<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">padding<\/span><span class=\"p\">:<\/span> <span class=\"m\">0<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">margin<\/span><span class=\"p\">:<\/span> <span class=\"m\">0<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">display<\/span><span class=\"p\">:<\/span> <span class=\"n\">flex<\/span><span class=\"p\">;<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nt\">nav<\/span> <span class=\"nt\">ul<\/span> <span class=\"nt\">li<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">margin-left<\/span><span class=\"p\">:<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--spacing-medium<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nt\">nav<\/span> <span class=\"nt\">ul<\/span> <span class=\"nt\">li<\/span> <span class=\"nt\">a<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">text-decoration<\/span><span class=\"p\">:<\/span> <span class=\"nb\">none<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">color<\/span><span class=\"p\">:<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--text-color-light<\/span><span class=\"p\">);<\/span>\n    <span class=\"nl\">position<\/span><span class=\"p\">:<\/span> <span class=\"nb\">relative<\/span><span class=\"p\">;<\/span> <span class=\"c\">\/* For underline animation *\/<\/span>\n    <span class=\"nl\">padding-bottom<\/span><span class=\"p\">:<\/span> <span class=\"m\">5px<\/span><span class=\"p\">;<\/span> <span class=\"c\">\/* Space for underline *\/<\/span>\n    <span class=\"nl\">transition<\/span><span class=\"p\">:<\/span> <span class=\"n\">color<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--transition-duration<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nt\">nav<\/span> <span class=\"nt\">ul<\/span> <span class=\"nt\">li<\/span> <span class=\"nt\">a<\/span><span class=\"nd\">::after<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">content<\/span><span class=\"p\">:<\/span> <span class=\"s2\">''<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">position<\/span><span class=\"p\">:<\/span> <span class=\"nb\">absolute<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">left<\/span><span class=\"p\">:<\/span> <span class=\"m\">0<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">bottom<\/span><span class=\"p\">:<\/span> <span class=\"m\">0<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">width<\/span><span class=\"p\">:<\/span> <span class=\"m\">0<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">height<\/span><span class=\"p\">:<\/span> <span class=\"m\">2px<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">background-color<\/span><span class=\"p\">:<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--accent-color<\/span><span class=\"p\">);<\/span>\n    <span class=\"nl\">transition<\/span><span class=\"p\">:<\/span> <span class=\"n\">width<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--transition-duration<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nt\">nav<\/span> <span class=\"nt\">ul<\/span> <span class=\"nt\">li<\/span> <span class=\"nt\">a<\/span><span class=\"nd\">:hover<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">color<\/span><span class=\"p\">:<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--accent-color<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nt\">nav<\/span> <span class=\"nt\">ul<\/span> <span class=\"nt\">li<\/span> <span class=\"nt\">a<\/span><span class=\"nd\">:hover::after<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">width<\/span><span class=\"p\">:<\/span> <span class=\"m\">100%<\/span><span class=\"p\">;<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"c\">\/* ==================== Sections (General) ==================== *\/<\/span>\n  <span class=\"nt\">section<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">max-width<\/span><span class=\"p\">:<\/span> <span class=\"m\">1300px<\/span><span class=\"p\">;<\/span> <span class=\"c\">\/* Slightly wider for content *\/<\/span>\n    <span class=\"nl\">margin<\/span><span class=\"p\">:<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--spacing-large<\/span><span class=\"p\">)<\/span> <span class=\"nb\">auto<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">padding<\/span><span class=\"p\">:<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--spacing-medium<\/span><span class=\"p\">);<\/span>\n    <span class=\"nl\">text-align<\/span><span class=\"p\">:<\/span> <span class=\"nb\">center<\/span><span class=\"p\">;<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"c\">\/* ==================== Hero Section ==================== *\/<\/span>\n  <span class=\"nc\">.hero<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">background<\/span><span class=\"p\">:<\/span> <span class=\"n\">linear-gradient<\/span><span class=\"p\">(<\/span><span class=\"m\">135deg<\/span><span class=\"p\">,<\/span> <span class=\"m\">#2c3e50<\/span><span class=\"p\">,<\/span> <span class=\"m\">#1a237e<\/span><span class=\"p\">);<\/span>\n    <span class=\"nl\">padding<\/span><span class=\"p\">:<\/span> <span class=\"m\">100px<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--spacing-medium<\/span><span class=\"p\">);<\/span> <span class=\"c\">\/* Increased padding *\/<\/span>\n    <span class=\"nl\">color<\/span><span class=\"p\">:<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--text-color-light<\/span><span class=\"p\">);<\/span>\n    <span class=\"nl\">overflow<\/span><span class=\"p\">:<\/span> <span class=\"nb\">hidden<\/span><span class=\"p\">;<\/span> <span class=\"c\">\/* Prevent animation overflow *\/<\/span>\n    <span class=\"nl\">position<\/span><span class=\"p\">:<\/span> <span class=\"nb\">relative<\/span><span class=\"p\">;<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nc\">.hero<\/span><span class=\"nd\">::before<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">content<\/span><span class=\"p\">:<\/span> <span class=\"s2\">''<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">position<\/span><span class=\"p\">:<\/span> <span class=\"nb\">absolute<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">top<\/span><span class=\"p\">:<\/span> <span class=\"m\">0<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">left<\/span><span class=\"p\">:<\/span> <span class=\"m\">0<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">width<\/span><span class=\"p\">:<\/span> <span class=\"m\">100%<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">height<\/span><span class=\"p\">:<\/span> <span class=\"m\">100%<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">background-image<\/span><span class=\"p\">:<\/span> <span class=\"sx\">url('path-to-your-abstract-background-image.jpg')<\/span><span class=\"p\">;<\/span> <span class=\"c\">\/* Replace with your image *\/<\/span>\n    <span class=\"nl\">background-size<\/span><span class=\"p\">:<\/span> <span class=\"n\">cover<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">background-position<\/span><span class=\"p\">:<\/span> <span class=\"nb\">center<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">opacity<\/span><span class=\"p\">:<\/span> <span class=\"m\">0.1<\/span><span class=\"p\">;<\/span> <span class=\"c\">\/* Subtle background texture *\/<\/span>\n    <span class=\"nl\">pointer-events<\/span><span class=\"p\">:<\/span> <span class=\"nb\">none<\/span><span class=\"p\">;<\/span> <span class=\"c\">\/* Make it non-interactive *\/<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nc\">.hero-content<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">max-width<\/span><span class=\"p\">:<\/span> <span class=\"m\">800px<\/span><span class=\"p\">;<\/span> <span class=\"c\">\/* Wider content area *\/<\/span>\n    <span class=\"nl\">margin<\/span><span class=\"p\">:<\/span> <span class=\"m\">0<\/span> <span class=\"nb\">auto<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">opacity<\/span><span class=\"p\">:<\/span> <span class=\"m\">0<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">transform<\/span><span class=\"p\">:<\/span> <span class=\"n\">translateY<\/span><span class=\"p\">(<\/span><span class=\"m\">30px<\/span><span class=\"p\">);<\/span>\n    <span class=\"nl\">transition<\/span><span class=\"p\">:<\/span> <span class=\"n\">opacity<\/span> <span class=\"m\">1s<\/span> <span class=\"n\">cubic-bezier<\/span><span class=\"p\">(<\/span><span class=\"m\">0.215<\/span><span class=\"p\">,<\/span> <span class=\"m\">0.610<\/span><span class=\"p\">,<\/span> <span class=\"m\">0.355<\/span><span class=\"p\">,<\/span> <span class=\"m\">1<\/span><span class=\"p\">),<\/span> <span class=\"n\">transform<\/span> <span class=\"m\">1s<\/span> <span class=\"n\">cubic-bezier<\/span><span class=\"p\">(<\/span><span class=\"m\">0.215<\/span><span class=\"p\">,<\/span> <span class=\"m\">0.610<\/span><span class=\"p\">,<\/span> <span class=\"m\">0.355<\/span><span class=\"p\">,<\/span> <span class=\"m\">1<\/span><span class=\"p\">);<\/span> <span class=\"c\">\/* More natural easing *\/<\/span>\n    <span class=\"nl\">position<\/span><span class=\"p\">:<\/span> <span class=\"nb\">relative<\/span><span class=\"p\">;<\/span> <span class=\"c\">\/* Ensure content is above the background *\/<\/span>\n    <span class=\"nl\">z-index<\/span><span class=\"p\">:<\/span> <span class=\"m\">1<\/span><span class=\"p\">;<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nc\">.hero.loaded<\/span> <span class=\"nc\">.hero-content<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">opacity<\/span><span class=\"p\">:<\/span> <span class=\"m\">1<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">transform<\/span><span class=\"p\">:<\/span> <span class=\"n\">translateY<\/span><span class=\"p\">(<\/span><span class=\"m\">0<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nc\">.hero-content<\/span> <span class=\"nt\">h1<\/span><span class=\"o\">,<\/span>\n  <span class=\"nc\">.hero-content<\/span> <span class=\"nt\">p<\/span><span class=\"o\">,<\/span>\n  <span class=\"nc\">.hero-content<\/span> <span class=\"nc\">.btn<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">opacity<\/span><span class=\"p\">:<\/span> <span class=\"m\">0<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">transform<\/span><span class=\"p\">:<\/span> <span class=\"n\">translateY<\/span><span class=\"p\">(<\/span><span class=\"m\">-20px<\/span><span class=\"p\">);<\/span>\n    <span class=\"nl\">transition<\/span><span class=\"p\">:<\/span> <span class=\"n\">opacity<\/span> <span class=\"m\">0.7s<\/span> <span class=\"n\">cubic-bezier<\/span><span class=\"p\">(<\/span><span class=\"m\">0.68<\/span><span class=\"p\">,<\/span> <span class=\"m\">-0.55<\/span><span class=\"p\">,<\/span> <span class=\"m\">0.265<\/span><span class=\"p\">,<\/span> <span class=\"m\">1.55<\/span><span class=\"p\">),<\/span> <span class=\"n\">transform<\/span> <span class=\"m\">0.7s<\/span> <span class=\"n\">cubic-bezier<\/span><span class=\"p\">(<\/span><span class=\"m\">0.68<\/span><span class=\"p\">,<\/span> <span class=\"m\">-0.55<\/span><span class=\"p\">,<\/span> <span class=\"m\">0.265<\/span><span class=\"p\">,<\/span> <span class=\"m\">1.55<\/span><span class=\"p\">);<\/span> <span class=\"c\">\/* Bouncy effect *\/<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nc\">.hero.loaded<\/span> <span class=\"nc\">.hero-content<\/span> <span class=\"nt\">h1<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">opacity<\/span><span class=\"p\">:<\/span> <span class=\"m\">1<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">transform<\/span><span class=\"p\">:<\/span> <span class=\"n\">translateY<\/span><span class=\"p\">(<\/span><span class=\"m\">0<\/span><span class=\"p\">);<\/span>\n    <span class=\"nl\">transition-delay<\/span><span class=\"p\">:<\/span> <span class=\"m\">0.2s<\/span><span class=\"p\">;<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nc\">.hero.loaded<\/span> <span class=\"nc\">.hero-content<\/span> <span class=\"nt\">p<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">opacity<\/span><span class=\"p\">:<\/span> <span class=\"m\">1<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">transform<\/span><span class=\"p\">:<\/span> <span class=\"n\">translateY<\/span><span class=\"p\">(<\/span><span class=\"m\">0<\/span><span class=\"p\">);<\/span>\n    <span class=\"nl\">transition-delay<\/span><span class=\"p\">:<\/span> <span class=\"m\">0.4s<\/span><span class=\"p\">;<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nc\">.hero.loaded<\/span> <span class=\"nc\">.hero-content<\/span> <span class=\"nc\">.btn<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">opacity<\/span><span class=\"p\">:<\/span> <span class=\"m\">1<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">transform<\/span><span class=\"p\">:<\/span> <span class=\"n\">translateY<\/span><span class=\"p\">(<\/span><span class=\"m\">0<\/span><span class=\"p\">);<\/span>\n    <span class=\"nl\">transition-delay<\/span><span class=\"p\">:<\/span> <span class=\"m\">0.6s<\/span><span class=\"p\">;<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nc\">.hero<\/span> <span class=\"nt\">h1<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">font-size<\/span><span class=\"p\">:<\/span> <span class=\"m\">3rem<\/span><span class=\"p\">;<\/span> <span class=\"c\">\/* Larger heading *\/<\/span>\n    <span class=\"nl\">margin-bottom<\/span><span class=\"p\">:<\/span> <span class=\"m\">20px<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">text-shadow<\/span><span class=\"p\">:<\/span> <span class=\"m\">0<\/span> <span class=\"m\">2px<\/span> <span class=\"m\">4px<\/span> <span class=\"n\">rgba<\/span><span class=\"p\">(<\/span><span class=\"m\">0<\/span><span class=\"p\">,<\/span> <span class=\"m\">0<\/span><span class=\"p\">,<\/span> <span class=\"m\">0<\/span><span class=\"p\">,<\/span> <span class=\"m\">0.3<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nc\">.hero<\/span> <span class=\"nt\">p<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">font-size<\/span><span class=\"p\">:<\/span> <span class=\"m\">1.3rem<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">margin-bottom<\/span><span class=\"p\">:<\/span> <span class=\"m\">30px<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">color<\/span><span class=\"p\">:<\/span> <span class=\"n\">rgba<\/span><span class=\"p\">(<\/span><span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--text-color-light-rgb<\/span><span class=\"p\">,<\/span> <span class=\"m\">240<\/span><span class=\"p\">,<\/span> <span class=\"m\">240<\/span><span class=\"p\">,<\/span> <span class=\"m\">240<\/span><span class=\"p\">),<\/span> <span class=\"m\">0.9<\/span><span class=\"p\">);<\/span> <span class=\"c\">\/* Slightly transparent text *\/<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"c\">\/* Extract RGB values from the variable *\/<\/span>\n  <span class=\"nd\">:root<\/span> <span class=\"p\">{<\/span>\n    <span class=\"py\">--text-color-light-rgb<\/span><span class=\"p\">:<\/span> <span class=\"m\">240<\/span><span class=\"p\">,<\/span> <span class=\"m\">240<\/span><span class=\"p\">,<\/span> <span class=\"m\">240<\/span><span class=\"p\">;<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"c\">\/* ==================== Buttons ==================== *\/<\/span>\n  <span class=\"nc\">.btn<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">display<\/span><span class=\"p\">:<\/span> <span class=\"n\">inline-block<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">background<\/span><span class=\"p\">:<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--accent-color<\/span><span class=\"p\">);<\/span>\n    <span class=\"nl\">color<\/span><span class=\"p\">:<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--secondary-bg<\/span><span class=\"p\">);<\/span>\n    <span class=\"nl\">padding<\/span><span class=\"p\">:<\/span> <span class=\"m\">14px<\/span> <span class=\"m\">30px<\/span><span class=\"p\">;<\/span> <span class=\"c\">\/* Slightly larger button *\/<\/span>\n    <span class=\"nl\">text-decoration<\/span><span class=\"p\">:<\/span> <span class=\"nb\">none<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">border-radius<\/span><span class=\"p\">:<\/span> <span class=\"m\">7px<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">box-shadow<\/span><span class=\"p\">:<\/span> <span class=\"m\">0<\/span> <span class=\"m\">2px<\/span> <span class=\"m\">5px<\/span> <span class=\"n\">rgba<\/span><span class=\"p\">(<\/span><span class=\"m\">0<\/span><span class=\"p\">,<\/span> <span class=\"m\">0<\/span><span class=\"p\">,<\/span> <span class=\"m\">0<\/span><span class=\"p\">,<\/span> <span class=\"m\">0.2<\/span><span class=\"p\">);<\/span>\n    <span class=\"nl\">transition<\/span><span class=\"p\">:<\/span> <span class=\"n\">background<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--transition-duration<\/span><span class=\"p\">),<\/span> <span class=\"n\">transform<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--transition-duration<\/span><span class=\"p\">),<\/span> <span class=\"n\">box-shadow<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--transition-duration<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nc\">.btn<\/span><span class=\"nd\">:hover<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">background<\/span><span class=\"p\">:<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--accent-hover-color<\/span><span class=\"p\">);<\/span>\n    <span class=\"nl\">transform<\/span><span class=\"p\">:<\/span> <span class=\"n\">translateY<\/span><span class=\"p\">(<\/span><span class=\"m\">-2px<\/span><span class=\"p\">);<\/span>\n    <span class=\"nl\">box-shadow<\/span><span class=\"p\">:<\/span> <span class=\"m\">0<\/span> <span class=\"m\">4px<\/span> <span class=\"m\">8px<\/span> <span class=\"n\">rgba<\/span><span class=\"p\">(<\/span><span class=\"m\">0<\/span><span class=\"p\">,<\/span> <span class=\"m\">0<\/span><span class=\"p\">,<\/span> <span class=\"m\">0<\/span><span class=\"p\">,<\/span> <span class=\"m\">0.3<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"c\">\/* ==================== Intro Grid ==================== *\/<\/span>\n  <span class=\"nc\">.intro-grid<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">display<\/span><span class=\"p\">:<\/span> <span class=\"n\">grid<\/span><span class=\"p\">;<\/span>\n    <span class=\"py\">grid-template-columns<\/span><span class=\"p\">:<\/span> <span class=\"nb\">repeat<\/span><span class=\"p\">(<\/span><span class=\"n\">auto-fit<\/span><span class=\"p\">,<\/span> <span class=\"n\">minmax<\/span><span class=\"p\">(<\/span><span class=\"m\">300px<\/span><span class=\"p\">,<\/span> <span class=\"m\">1<\/span><span class=\"n\">fr<\/span><span class=\"p\">));<\/span> <span class=\"c\">\/* Wider intro items *\/<\/span>\n    <span class=\"py\">gap<\/span><span class=\"p\">:<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--spacing-medium<\/span><span class=\"p\">);<\/span>\n    <span class=\"nl\">text-align<\/span><span class=\"p\">:<\/span> <span class=\"nb\">left<\/span><span class=\"p\">;<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nc\">.intro-grid<\/span> <span class=\"nt\">div<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">padding<\/span><span class=\"p\">:<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--spacing-medium<\/span><span class=\"p\">);<\/span>\n    <span class=\"nl\">border-radius<\/span><span class=\"p\">:<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--border-radius-base<\/span><span class=\"p\">);<\/span>\n    <span class=\"nl\">background<\/span><span class=\"p\">:<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--secondary-bg<\/span><span class=\"p\">);<\/span>\n    <span class=\"nl\">box-shadow<\/span><span class=\"p\">:<\/span> <span class=\"m\">0<\/span> <span class=\"m\">2px<\/span> <span class=\"m\">4px<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--box-shadow-color<\/span><span class=\"p\">);<\/span>\n    <span class=\"nl\">opacity<\/span><span class=\"p\">:<\/span> <span class=\"m\">0<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">transform<\/span><span class=\"p\">:<\/span> <span class=\"n\">translateY<\/span><span class=\"p\">(<\/span><span class=\"m\">30px<\/span><span class=\"p\">);<\/span>\n    <span class=\"nl\">transition<\/span><span class=\"p\">:<\/span> <span class=\"n\">opacity<\/span> <span class=\"m\">0.6s<\/span> <span class=\"n\">ease-out<\/span><span class=\"p\">,<\/span> <span class=\"n\">transform<\/span> <span class=\"m\">0.6s<\/span> <span class=\"n\">ease-out<\/span><span class=\"p\">;<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nc\">.intro-grid<\/span> <span class=\"nt\">div<\/span><span class=\"nc\">.fade-in<\/span><span class=\"nd\">:nth-child<\/span><span class=\"o\">(<\/span><span class=\"err\">1<\/span><span class=\"o\">)<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">transition-delay<\/span><span class=\"p\">:<\/span> <span class=\"m\">0.1s<\/span><span class=\"p\">;<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nc\">.intro-grid<\/span> <span class=\"nt\">div<\/span><span class=\"nc\">.fade-in<\/span><span class=\"nd\">:nth-child<\/span><span class=\"o\">(<\/span><span class=\"err\">2<\/span><span class=\"o\">)<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">transition-delay<\/span><span class=\"p\">:<\/span> <span class=\"m\">0.3s<\/span><span class=\"p\">;<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nc\">.intro-grid<\/span> <span class=\"nt\">div<\/span><span class=\"nc\">.fade-in<\/span><span class=\"nd\">:nth-child<\/span><span class=\"o\">(<\/span><span class=\"err\">3<\/span><span class=\"o\">)<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">transition-delay<\/span><span class=\"p\">:<\/span> <span class=\"m\">0.5s<\/span><span class=\"p\">;<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nc\">.intro-grid<\/span> <span class=\"nt\">div<\/span><span class=\"nc\">.fade-in<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">opacity<\/span><span class=\"p\">:<\/span> <span class=\"m\">1<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">transform<\/span><span class=\"p\">:<\/span> <span class=\"n\">translateY<\/span><span class=\"p\">(<\/span><span class=\"m\">0<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nc\">.intro-grid<\/span> <span class=\"nt\">div<\/span> <span class=\"nt\">img<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">width<\/span><span class=\"p\">:<\/span> <span class=\"m\">35px<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">height<\/span><span class=\"p\">:<\/span> <span class=\"m\">35px<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">margin-right<\/span><span class=\"p\">:<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--spacing-small<\/span><span class=\"p\">);<\/span>\n    <span class=\"nl\">float<\/span><span class=\"p\">:<\/span> <span class=\"nb\">left<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">filter<\/span><span class=\"p\">:<\/span> <span class=\"n\">brightness<\/span><span class=\"p\">(<\/span><span class=\"m\">1.2<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nc\">.intro-grid<\/span> <span class=\"nt\">div<\/span> <span class=\"nt\">h3<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">margin-bottom<\/span><span class=\"p\">:<\/span> <span class=\"m\">5px<\/span><span class=\"p\">;<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"c\">\/* ==================== Categories Grid ==================== *\/<\/span>\n  <span class=\"nc\">.categories-grid<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">display<\/span><span class=\"p\">:<\/span> <span class=\"n\">grid<\/span><span class=\"p\">;<\/span>\n    <span class=\"py\">grid-template-columns<\/span><span class=\"p\">:<\/span> <span class=\"nb\">repeat<\/span><span class=\"p\">(<\/span><span class=\"n\">auto-fit<\/span><span class=\"p\">,<\/span> <span class=\"n\">minmax<\/span><span class=\"p\">(<\/span><span class=\"m\">180px<\/span><span class=\"p\">,<\/span> <span class=\"m\">1<\/span><span class=\"n\">fr<\/span><span class=\"p\">));<\/span> <span class=\"c\">\/* Slightly larger categories *\/<\/span>\n    <span class=\"py\">gap<\/span><span class=\"p\">:<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--spacing-medium<\/span><span class=\"p\">);<\/span>\n    <span class=\"nl\">padding-top<\/span><span class=\"p\">:<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--spacing-medium<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nc\">.categories-grid<\/span> <span class=\"nt\">a<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">display<\/span><span class=\"p\">:<\/span> <span class=\"n\">flex<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">flex-direction<\/span><span class=\"p\">:<\/span> <span class=\"n\">column<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">align-items<\/span><span class=\"p\">:<\/span> <span class=\"nb\">center<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">text-decoration<\/span><span class=\"p\">:<\/span> <span class=\"nb\">none<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">color<\/span><span class=\"p\">:<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--text-color-light<\/span><span class=\"p\">);<\/span>\n    <span class=\"nl\">background<\/span><span class=\"p\">:<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--secondary-bg<\/span><span class=\"p\">);<\/span>\n    <span class=\"nl\">padding<\/span><span class=\"p\">:<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--spacing-medium<\/span><span class=\"p\">);<\/span>\n    <span class=\"nl\">border-radius<\/span><span class=\"p\">:<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--border-radius-base<\/span><span class=\"p\">);<\/span>\n    <span class=\"nl\">box-shadow<\/span><span class=\"p\">:<\/span> <span class=\"m\">0<\/span> <span class=\"m\">3px<\/span> <span class=\"m\">6px<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--box-shadow-color<\/span><span class=\"p\">);<\/span>\n    <span class=\"nl\">transition<\/span><span class=\"p\">:<\/span> <span class=\"n\">box-shadow<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--transition-duration<\/span><span class=\"p\">),<\/span> <span class=\"n\">transform<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--transition-duration<\/span><span class=\"p\">),<\/span> <span class=\"n\">opacity<\/span> <span class=\"m\">0.5s<\/span> <span class=\"n\">ease<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">opacity<\/span><span class=\"p\">:<\/span> <span class=\"m\">0<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">transform<\/span><span class=\"p\">:<\/span> <span class=\"n\">translateY<\/span><span class=\"p\">(<\/span><span class=\"m\">20px<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nc\">.categories-grid<\/span> <span class=\"nt\">a<\/span><span class=\"nd\">:hover<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">box-shadow<\/span><span class=\"p\">:<\/span> <span class=\"m\">0<\/span> <span class=\"m\">5px<\/span> <span class=\"m\">10px<\/span> <span class=\"n\">rgba<\/span><span class=\"p\">(<\/span><span class=\"m\">0<\/span><span class=\"p\">,<\/span> <span class=\"m\">0<\/span><span class=\"p\">,<\/span> <span class=\"m\">0<\/span><span class=\"p\">,<\/span> <span class=\"m\">0.25<\/span><span class=\"p\">);<\/span>\n    <span class=\"nl\">transform<\/span><span class=\"p\">:<\/span> <span class=\"n\">scale<\/span><span class=\"p\">(<\/span><span class=\"m\">1.03<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nc\">.categories-grid<\/span> <span class=\"nt\">a<\/span><span class=\"nc\">.fade-in<\/span><span class=\"nd\">:nth-child<\/span><span class=\"o\">(<\/span><span class=\"nt\">odd<\/span><span class=\"o\">)<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">transition-delay<\/span><span class=\"p\">:<\/span> <span class=\"m\">0.2s<\/span><span class=\"p\">;<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nc\">.categories-grid<\/span> <span class=\"nt\">a<\/span><span class=\"nc\">.fade-in<\/span><span class=\"nd\">:nth-child<\/span><span class=\"o\">(<\/span><span class=\"nt\">even<\/span><span class=\"o\">)<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">transition-delay<\/span><span class=\"p\">:<\/span> <span class=\"m\">0.4s<\/span><span class=\"p\">;<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nc\">.categories-grid<\/span> <span class=\"nt\">a<\/span><span class=\"nc\">.fade-in<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">opacity<\/span><span class=\"p\">:<\/span> <span class=\"m\">1<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">transform<\/span><span class=\"p\">:<\/span> <span class=\"n\">translateY<\/span><span class=\"p\">(<\/span><span class=\"m\">0<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nc\">.categories-grid<\/span> <span class=\"nt\">a<\/span> <span class=\"nt\">img<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">width<\/span><span class=\"p\">:<\/span> <span class=\"m\">50px<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">height<\/span><span class=\"p\">:<\/span> <span class=\"m\">50px<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">margin-bottom<\/span><span class=\"p\">:<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--spacing-small<\/span><span class=\"p\">);<\/span>\n    <span class=\"nl\">filter<\/span><span class=\"p\">:<\/span> <span class=\"n\">drop-shadow<\/span><span class=\"p\">(<\/span><span class=\"m\">2px<\/span> <span class=\"m\">2px<\/span> <span class=\"m\">3px<\/span> <span class=\"n\">rgba<\/span><span class=\"p\">(<\/span><span class=\"m\">0<\/span><span class=\"p\">,<\/span> <span class=\"m\">0<\/span><span class=\"p\">,<\/span> <span class=\"m\">0<\/span><span class=\"p\">,<\/span> <span class=\"m\">0.3<\/span><span class=\"p\">));<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"c\">\/* ==================== Testimonials ==================== *\/<\/span>\n  <span class=\"nc\">.testimonials<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">background-color<\/span><span class=\"p\">:<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--secondary-bg<\/span><span class=\"p\">);<\/span>\n    <span class=\"nl\">padding<\/span><span class=\"p\">:<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--spacing-large<\/span><span class=\"p\">)<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--spacing-medium<\/span><span class=\"p\">);<\/span>\n    <span class=\"nl\">position<\/span><span class=\"p\">:<\/span> <span class=\"nb\">relative<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">overflow<\/span><span class=\"p\">:<\/span> <span class=\"nb\">hidden<\/span><span class=\"p\">;<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nc\">.testimonial-slider<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">display<\/span><span class=\"p\">:<\/span> <span class=\"n\">flex<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">overflow-x<\/span><span class=\"p\">:<\/span> <span class=\"nb\">auto<\/span><span class=\"p\">;<\/span>\n    <span class=\"py\">scroll-snap-type<\/span><span class=\"p\">:<\/span> <span class=\"n\">x<\/span> <span class=\"n\">mandatory<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">width<\/span><span class=\"p\">:<\/span> <span class=\"m\">100%<\/span><span class=\"p\">;<\/span> <span class=\"c\">\/* Adjusted width *\/<\/span>\n    <span class=\"nl\">margin<\/span><span class=\"p\">:<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--spacing-medium<\/span><span class=\"p\">)<\/span> <span class=\"nb\">auto<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">padding-bottom<\/span><span class=\"p\">:<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--spacing-medium<\/span><span class=\"p\">);<\/span> <span class=\"c\">\/* Added padding for better visual spacing *\/<\/span>\n    <span class=\"nl\">-webkit-overflow-scrolling<\/span><span class=\"p\">:<\/span> <span class=\"n\">touch<\/span><span class=\"p\">;<\/span> <span class=\"c\">\/* Enable smooth scrolling on iOS *\/<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nc\">.testimonial-slide<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">min-width<\/span><span class=\"p\">:<\/span> <span class=\"m\">80%<\/span><span class=\"p\">;<\/span> <span class=\"c\">\/* Take up more space on smaller screens *\/<\/span>\n    <span class=\"py\">scroll-snap-align<\/span><span class=\"p\">:<\/span> <span class=\"n\">start<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">text-align<\/span><span class=\"p\">:<\/span> <span class=\"nb\">left<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">padding<\/span><span class=\"p\">:<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--spacing-medium<\/span><span class=\"p\">);<\/span>\n    <span class=\"nl\">box-sizing<\/span><span class=\"p\">:<\/span> <span class=\"n\">border-box<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">border-radius<\/span><span class=\"p\">:<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--border-radius-base<\/span><span class=\"p\">);<\/span>\n    <span class=\"nl\">background<\/span><span class=\"p\">:<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--primary-bg<\/span><span class=\"p\">);<\/span>\n    <span class=\"nl\">box-shadow<\/span><span class=\"p\">:<\/span> <span class=\"m\">0<\/span> <span class=\"m\">3px<\/span> <span class=\"m\">6px<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--box-shadow-color<\/span><span class=\"p\">);<\/span>\n    <span class=\"nl\">margin-right<\/span><span class=\"p\">:<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--spacing-medium<\/span><span class=\"p\">);<\/span> <span class=\"c\">\/* Add spacing between slides *\/<\/span>\n    <span class=\"nl\">opacity<\/span><span class=\"p\">:<\/span> <span class=\"m\">0.7<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">transform<\/span><span class=\"p\">:<\/span> <span class=\"n\">scale<\/span><span class=\"p\">(<\/span><span class=\"m\">0.95<\/span><span class=\"p\">);<\/span>\n    <span class=\"nl\">transition<\/span><span class=\"p\">:<\/span> <span class=\"n\">transform<\/span> <span class=\"m\">0.5s<\/span> <span class=\"n\">ease-in-out<\/span><span class=\"p\">,<\/span> <span class=\"n\">opacity<\/span> <span class=\"m\">0.3s<\/span> <span class=\"n\">ease-in-out<\/span><span class=\"p\">;<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nc\">.testimonial-slide<\/span><span class=\"nd\">:last-child<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">margin-right<\/span><span class=\"p\">:<\/span> <span class=\"m\">0<\/span><span class=\"p\">;<\/span> <span class=\"c\">\/* Remove margin from the last slide *\/<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nc\">.testimonial-slide.active<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">opacity<\/span><span class=\"p\">:<\/span> <span class=\"m\">1<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">transform<\/span><span class=\"p\">:<\/span> <span class=\"n\">scale<\/span><span class=\"p\">(<\/span><span class=\"m\">1<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nc\">.testimonial-slide<\/span> <span class=\"nt\">p<\/span><span class=\"nd\">:first-of-type<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">font-size<\/span><span class=\"p\">:<\/span> <span class=\"m\">1.1rem<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">line-height<\/span><span class=\"p\">:<\/span> <span class=\"m\">1.8<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">margin-bottom<\/span><span class=\"p\">:<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--spacing-small<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nc\">.testimonial-slide<\/span> <span class=\"nt\">p<\/span><span class=\"nd\">:last-child<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">margin-top<\/span><span class=\"p\">:<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--spacing-small<\/span><span class=\"p\">);<\/span>\n    <span class=\"nl\">font-weight<\/span><span class=\"p\">:<\/span> <span class=\"m\">500<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">text-align<\/span><span class=\"p\">:<\/span> <span class=\"nb\">right<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">font-style<\/span><span class=\"p\">:<\/span> <span class=\"nb\">italic<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">color<\/span><span class=\"p\">:<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--accent-color<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nc\">.slider-buttons<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">text-align<\/span><span class=\"p\">:<\/span> <span class=\"nb\">center<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">margin-top<\/span><span class=\"p\">:<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--spacing-medium<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nc\">.slider-buttons<\/span> <span class=\"nt\">button<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">background<\/span><span class=\"p\">:<\/span> <span class=\"nb\">none<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">border<\/span><span class=\"p\">:<\/span> <span class=\"nb\">none<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">font-size<\/span><span class=\"p\">:<\/span> <span class=\"m\">2rem<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">cursor<\/span><span class=\"p\">:<\/span> <span class=\"nb\">pointer<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">margin<\/span><span class=\"p\">:<\/span> <span class=\"m\">0<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--spacing-small<\/span><span class=\"p\">);<\/span>\n    <span class=\"nl\">color<\/span><span class=\"p\">:<\/span> <span class=\"m\">#aaa<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">transition<\/span><span class=\"p\">:<\/span> <span class=\"n\">color<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--transition-duration<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nc\">.slider-buttons<\/span> <span class=\"nt\">button<\/span><span class=\"nd\">:hover<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">color<\/span><span class=\"p\">:<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--text-color-light<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"c\">\/* ==================== Latest Grid ==================== *\/<\/span>\n  <span class=\"nc\">.latest-grid<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">display<\/span><span class=\"p\">:<\/span> <span class=\"n\">grid<\/span><span class=\"p\">;<\/span>\n    <span class=\"py\">grid-template-columns<\/span><span class=\"p\">:<\/span> <span class=\"nb\">repeat<\/span><span class=\"p\">(<\/span><span class=\"n\">auto-fit<\/span><span class=\"p\">,<\/span> <span class=\"n\">minmax<\/span><span class=\"p\">(<\/span><span class=\"m\">350px<\/span><span class=\"p\">,<\/span> <span class=\"m\">1<\/span><span class=\"n\">fr<\/span><span class=\"p\">));<\/span> <span class=\"c\">\/* Wider latest cards *\/<\/span>\n    <span class=\"py\">gap<\/span><span class=\"p\">:<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--spacing-medium<\/span><span class=\"p\">);<\/span>\n    <span class=\"nl\">text-align<\/span><span class=\"p\">:<\/span> <span class=\"nb\">left<\/span><span class=\"p\">;<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nc\">.latest-card<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">background<\/span><span class=\"p\">:<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--secondary-bg<\/span><span class=\"p\">);<\/span>\n    <span class=\"nl\">padding<\/span><span class=\"p\">:<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--spacing-medium<\/span><span class=\"p\">);<\/span>\n    <span class=\"nl\">border-radius<\/span><span class=\"p\">:<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--border-radius-base<\/span><span class=\"p\">);<\/span>\n    <span class=\"nl\">box-shadow<\/span><span class=\"p\">:<\/span> <span class=\"m\">0<\/span> <span class=\"m\">3px<\/span> <span class=\"m\">6px<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--box-shadow-color<\/span><span class=\"p\">);<\/span>\n    <span class=\"nl\">transition<\/span><span class=\"p\">:<\/span> <span class=\"n\">box-shadow<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--transition-duration<\/span><span class=\"p\">),<\/span> <span class=\"n\">transform<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--transition-duration<\/span><span class=\"p\">),<\/span> <span class=\"n\">opacity<\/span> <span class=\"m\">0.5s<\/span> <span class=\"n\">ease<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">opacity<\/span><span class=\"p\">:<\/span> <span class=\"m\">0<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">transform<\/span><span class=\"p\">:<\/span> <span class=\"n\">translateY<\/span><span class=\"p\">(<\/span><span class=\"m\">20px<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nc\">.latest-card<\/span><span class=\"nd\">:hover<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">box-shadow<\/span><span class=\"p\">:<\/span> <span class=\"m\">0<\/span> <span class=\"m\">5px<\/span> <span class=\"m\">10px<\/span> <span class=\"n\">rgba<\/span><span class=\"p\">(<\/span><span class=\"m\">0<\/span><span class=\"p\">,<\/span> <span class=\"m\">0<\/span><span class=\"p\">,<\/span> <span class=\"m\">0<\/span><span class=\"p\">,<\/span> <span class=\"m\">0.25<\/span><span class=\"p\">);<\/span>\n    <span class=\"nl\">transform<\/span><span class=\"p\">:<\/span> <span class=\"n\">translateY<\/span><span class=\"p\">(<\/span><span class=\"m\">-5px<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nc\">.latest-card.fade-in<\/span><span class=\"nd\">:nth-child<\/span><span class=\"o\">(<\/span><span class=\"nt\">odd<\/span><span class=\"o\">)<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">transition-delay<\/span><span class=\"p\">:<\/span> <span class=\"m\">0.2s<\/span><span class=\"p\">;<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nc\">.latest-card.fade-in<\/span><span class=\"nd\">:nth-child<\/span><span class=\"o\">(<\/span><span class=\"nt\">even<\/span><span class=\"o\">)<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">transition-delay<\/span><span class=\"p\">:<\/span> <span class=\"m\">0.4s<\/span><span class=\"p\">;<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nc\">.latest-card.fade-in<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">opacity<\/span><span class=\"p\">:<\/span> <span class=\"m\">1<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">transform<\/span><span class=\"p\">:<\/span> <span class=\"n\">translateY<\/span><span class=\"p\">(<\/span><span class=\"m\">0<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nc\">.latest-card<\/span> <span class=\"nt\">h3<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">margin-bottom<\/span><span class=\"p\">:<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--spacing-small<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nc\">.latest-card<\/span> <span class=\"nt\">p<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">color<\/span><span class=\"p\">:<\/span> <span class=\"n\">rgba<\/span><span class=\"p\">(<\/span><span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--text-color-light-rgb<\/span><span class=\"p\">,<\/span> <span class=\"m\">240<\/span><span class=\"p\">,<\/span> <span class=\"m\">240<\/span><span class=\"p\">,<\/span> <span class=\"m\">240<\/span><span class=\"p\">),<\/span> <span class=\"m\">0.8<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nc\">.latest-card<\/span> <span class=\"nt\">a<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">display<\/span><span class=\"p\">:<\/span> <span class=\"n\">inline-block<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">margin-top<\/span><span class=\"p\">:<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--spacing-medium<\/span><span class=\"p\">);<\/span>\n    <span class=\"nl\">text-decoration<\/span><span class=\"p\">:<\/span> <span class=\"nb\">none<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">color<\/span><span class=\"p\">:<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--accent-color<\/span><span class=\"p\">);<\/span>\n    <span class=\"nl\">font-weight<\/span><span class=\"p\">:<\/span> <span class=\"m\">500<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">transition<\/span><span class=\"p\">:<\/span> <span class=\"n\">color<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--transition-duration<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nc\">.latest-card<\/span> <span class=\"nt\">a<\/span><span class=\"nd\">:hover<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">color<\/span><span class=\"p\">:<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--accent-hover-color<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"c\">\/* ==================== Call to Action (CTA) ==================== *\/<\/span>\n  <span class=\"nc\">.cta<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">background<\/span><span class=\"p\">:<\/span> <span class=\"n\">linear-gradient<\/span><span class=\"p\">(<\/span><span class=\"m\">90deg<\/span><span class=\"p\">,<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--secondary-bg<\/span><span class=\"p\">),<\/span> <span class=\"m\">#333<\/span><span class=\"p\">);<\/span> <span class=\"c\">\/* Softer gradient *\/<\/span>\n    <span class=\"nl\">color<\/span><span class=\"p\">:<\/span> <span class=\"m\">#fff<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">padding<\/span><span class=\"p\">:<\/span> <span class=\"m\">80px<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--spacing-medium<\/span><span class=\"p\">);<\/span>\n    <span class=\"nl\">margin-top<\/span><span class=\"p\">:<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--spacing-large<\/span><span class=\"p\">);<\/span>\n    <span class=\"nl\">border-radius<\/span><span class=\"p\">:<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--border-radius-base<\/span><span class=\"p\">);<\/span>\n    <span class=\"nl\">box-shadow<\/span><span class=\"p\">:<\/span> <span class=\"m\">0<\/span> <span class=\"m\">4px<\/span> <span class=\"m\">8px<\/span> <span class=\"n\">rgba<\/span><span class=\"p\">(<\/span><span class=\"m\">0<\/span><span class=\"p\">,<\/span> <span class=\"m\">0<\/span><span class=\"p\">,<\/span> <span class=\"m\">0<\/span><span class=\"p\">,<\/span> <span class=\"m\">0.3<\/span><span class=\"p\">);<\/span>\n    <span class=\"nl\">position<\/span><span class=\"p\">:<\/span> <span class=\"nb\">relative<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">overflow<\/span><span class=\"p\">:<\/span> <span class=\"nb\">hidden<\/span><span class=\"p\">;<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nc\">.cta<\/span><span class=\"nd\">::before<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">content<\/span><span class=\"p\">:<\/span> <span class=\"s2\">''<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">position<\/span><span class=\"p\">:<\/span> <span class=\"nb\">absolute<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">top<\/span><span class=\"p\">:<\/span> <span class=\"m\">-50%<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">left<\/span><span class=\"p\">:<\/span> <span class=\"m\">-50%<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">width<\/span><span class=\"p\">:<\/span> <span class=\"m\">200%<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">padding-bottom<\/span><span class=\"p\">:<\/span> <span class=\"m\">200%<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">background-color<\/span><span class=\"p\">:<\/span> <span class=\"n\">rgba<\/span><span class=\"p\">(<\/span><span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--accent-color-rgb<\/span><span class=\"p\">,<\/span> <span class=\"m\">100<\/span><span class=\"p\">,<\/span> <span class=\"m\">181<\/span><span class=\"p\">,<\/span> <span class=\"m\">246<\/span><span class=\"p\">),<\/span> <span class=\"m\">0.1<\/span><span class=\"p\">);<\/span>\n    <span class=\"nl\">border-radius<\/span><span class=\"p\">:<\/span> <span class=\"m\">50%<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">transform<\/span><span class=\"p\">:<\/span> <span class=\"n\">scale<\/span><span class=\"p\">(<\/span><span class=\"m\">0<\/span><span class=\"p\">);<\/span>\n    <span class=\"nl\">transition<\/span><span class=\"p\">:<\/span> <span class=\"n\">transform<\/span> <span class=\"m\">0.6s<\/span> <span class=\"n\">ease-out<\/span><span class=\"p\">;<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nc\">.cta<\/span><span class=\"nd\">:hover::before<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">transform<\/span><span class=\"p\">:<\/span> <span class=\"n\">scale<\/span><span class=\"p\">(<\/span><span class=\"m\">1<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nc\">.cta-content<\/span><span class=\"err\">```<\/span>\n<span class=\"p\">{<\/span><span class=\"err\">%<\/span> <span class=\"err\">endraw<\/span> <span class=\"err\">%<\/span><span class=\"p\">}<\/span>\n<span class=\"nt\">css<\/span>\n<span class=\"p\">{<\/span>\n    <span class=\"nl\">position<\/span><span class=\"p\">:<\/span> <span class=\"nb\">relative<\/span><span class=\"p\">;<\/span> <span class=\"c\">\/* Ensure content is above the pseudo-element *\/<\/span>\n    <span class=\"nl\">z-index<\/span><span class=\"p\">:<\/span> <span class=\"m\">1<\/span><span class=\"p\">;<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nc\">.cta<\/span> <span class=\"nt\">h2<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">font-size<\/span><span class=\"p\">:<\/span> <span class=\"m\">2.5rem<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">margin-bottom<\/span><span class=\"p\">:<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--spacing-medium<\/span><span class=\"p\">);<\/span>\n    <span class=\"nl\">text-shadow<\/span><span class=\"p\">:<\/span> <span class=\"m\">0<\/span> <span class=\"m\">2px<\/span> <span class=\"m\">4px<\/span> <span class=\"n\">rgba<\/span><span class=\"p\">(<\/span><span class=\"m\">0<\/span><span class=\"p\">,<\/span> <span class=\"m\">0<\/span><span class=\"p\">,<\/span> <span class=\"m\">0<\/span><span class=\"p\">,<\/span> <span class=\"m\">0.4<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"c\">\/* ==================== Footer ==================== *\/<\/span>\n  <span class=\"nt\">footer<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">background<\/span><span class=\"p\">:<\/span> <span class=\"m\">#111<\/span><span class=\"p\">;<\/span> <span class=\"c\">\/* Darker footer *\/<\/span>\n    <span class=\"nl\">color<\/span><span class=\"p\">:<\/span> <span class=\"m\">#bbb<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">padding<\/span><span class=\"p\">:<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--spacing-medium<\/span><span class=\"p\">);<\/span>\n    <span class=\"nl\">text-align<\/span><span class=\"p\">:<\/span> <span class=\"nb\">center<\/span><span class=\"p\">;<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nt\">footer<\/span> <span class=\"nt\">ul<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">list-style<\/span><span class=\"p\">:<\/span> <span class=\"nb\">none<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">padding<\/span><span class=\"p\">:<\/span> <span class=\"m\">0<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">margin<\/span><span class=\"p\">:<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--spacing-small<\/span><span class=\"p\">)<\/span> <span class=\"m\">0<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">display<\/span><span class=\"p\">:<\/span> <span class=\"n\">flex<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">justify-content<\/span><span class=\"p\">:<\/span> <span class=\"nb\">center<\/span><span class=\"p\">;<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nt\">footer<\/span> <span class=\"nt\">ul<\/span> <span class=\"nt\">li<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">margin<\/span><span class=\"p\">:<\/span> <span class=\"m\">0<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--spacing-small<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nt\">footer<\/span> <span class=\"nt\">ul<\/span> <span class=\"nt\">li<\/span> <span class=\"nt\">a<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">color<\/span><span class=\"p\">:<\/span> <span class=\"m\">#bbb<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">text-decoration<\/span><span class=\"p\">:<\/span> <span class=\"nb\">none<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">transition<\/span><span class=\"p\">:<\/span> <span class=\"n\">color<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--transition-duration<\/span><span class=\"p\">),<\/span> <span class=\"n\">transform<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--transition-duration<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nt\">footer<\/span> <span class=\"nt\">ul<\/span> <span class=\"nt\">li<\/span> <span class=\"nt\">a<\/span><span class=\"nd\">:hover<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">color<\/span><span class=\"p\">:<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--accent-color<\/span><span class=\"p\">);<\/span>\n    <span class=\"nl\">transform<\/span><span class=\"p\">:<\/span> <span class=\"n\">translateY<\/span><span class=\"p\">(<\/span><span class=\"m\">-2px<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"c\">\/* ==================== Responsive Design ==================== *\/<\/span>\n  <span class=\"k\">@media<\/span> <span class=\"p\">(<\/span><span class=\"n\">max-width<\/span><span class=\"p\">:<\/span> <span class=\"m\">768px<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nt\">nav<\/span> <span class=\"p\">{<\/span>\n      <span class=\"nl\">flex-direction<\/span><span class=\"p\">:<\/span> <span class=\"n\">column<\/span><span class=\"p\">;<\/span>\n      <span class=\"nl\">text-align<\/span><span class=\"p\">:<\/span> <span class=\"nb\">center<\/span><span class=\"p\">;<\/span>\n    <span class=\"p\">}<\/span>\n\n    <span class=\"nt\">nav<\/span> <span class=\"nt\">ul<\/span> <span class=\"p\">{<\/span>\n      <span class=\"nl\">flex-direction<\/span><span class=\"p\">:<\/span> <span class=\"n\">column<\/span><span class=\"p\">;<\/span>\n      <span class=\"nl\">margin-top<\/span><span class=\"p\">:<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--spacing-small<\/span><span class=\"p\">);<\/span>\n    <span class=\"p\">}<\/span>\n\n    <span class=\"nt\">nav<\/span> <span class=\"nt\">ul<\/span> <span class=\"nt\">li<\/span> <span class=\"p\">{<\/span>\n      <span class=\"nl\">margin<\/span><span class=\"p\">:<\/span> <span class=\"m\">7px<\/span> <span class=\"m\">0<\/span><span class=\"p\">;<\/span>\n    <span class=\"p\">}<\/span>\n\n    <span class=\"nc\">.intro-grid<\/span> <span class=\"p\">{<\/span>\n      <span class=\"py\">grid-template-columns<\/span><span class=\"p\">:<\/span> <span class=\"m\">1<\/span><span class=\"n\">fr<\/span><span class=\"p\">;<\/span>\n      <span class=\"nl\">text-align<\/span><span class=\"p\">:<\/span> <span class=\"nb\">center<\/span><span class=\"p\">;<\/span>\n    <span class=\"p\">}<\/span>\n\n    <span class=\"nc\">.intro-grid<\/span> <span class=\"nt\">div<\/span> <span class=\"p\">{<\/span>\n      <span class=\"nl\">padding<\/span><span class=\"p\">:<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--spacing-medium<\/span><span class=\"p\">);<\/span>\n    <span class=\"p\">}<\/span>\n\n    <span class=\"nc\">.intro-grid<\/span> <span class=\"nt\">div<\/span> <span class=\"nt\">img<\/span> <span class=\"p\">{<\/span>\n      <span class=\"nl\">float<\/span><span class=\"p\">:<\/span> <span class=\"nb\">none<\/span><span class=\"p\">;<\/span>\n      <span class=\"nl\">margin-right<\/span><span class=\"p\">:<\/span> <span class=\"m\">0<\/span><span class=\"p\">;<\/span>\n    <span class=\"p\">}<\/span>\n\n    <span class=\"nc\">.hero<\/span> <span class=\"p\">{<\/span>\n      <span class=\"nl\">padding<\/span><span class=\"p\">:<\/span> <span class=\"m\">80px<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--spacing-small<\/span><span class=\"p\">);<\/span>\n    <span class=\"p\">}<\/span>\n\n    <span class=\"nc\">.hero<\/span> <span class=\"nt\">h1<\/span> <span class=\"p\">{<\/span>\n      <span class=\"nl\">font-size<\/span><span class=\"p\">:<\/span> <span class=\"m\">2.5rem<\/span><span class=\"p\">;<\/span>\n    <span class=\"p\">}<\/span>\n\n    <span class=\"nc\">.categories-grid<\/span> <span class=\"p\">{<\/span>\n      <span class=\"py\">grid-template-columns<\/span><span class=\"p\">:<\/span> <span class=\"nb\">repeat<\/span><span class=\"p\">(<\/span><span class=\"n\">auto-fit<\/span><span class=\"p\">,<\/span> <span class=\"n\">minmax<\/span><span class=\"p\">(<\/span><span class=\"m\">140px<\/span><span class=\"p\">,<\/span> <span class=\"m\">1<\/span><span class=\"n\">fr<\/span><span class=\"p\">));<\/span>\n    <span class=\"p\">}<\/span>\n\n    <span class=\"nc\">.testimonial-slide<\/span> <span class=\"p\">{<\/span>\n      <span class=\"nl\">min-width<\/span><span class=\"p\">:<\/span> <span class=\"m\">100%<\/span><span class=\"p\">;<\/span>\n      <span class=\"nl\">margin-right<\/span><span class=\"p\">:<\/span> <span class=\"m\">0<\/span><span class=\"p\">;<\/span> <span class=\"c\">\/* Ensure full width on smaller screens *\/<\/span>\n    <span class=\"p\">}<\/span>\n\n    <span class=\"nc\">.latest-grid<\/span> <span class=\"p\">{<\/span>\n      <span class=\"py\">grid-template-columns<\/span><span class=\"p\">:<\/span> <span class=\"m\">1<\/span><span class=\"n\">fr<\/span><span class=\"p\">;<\/span>\n    <span class=\"p\">}<\/span>\n\n    <span class=\"nc\">.cta<\/span> <span class=\"p\">{<\/span>\n      <span class=\"nl\">padding<\/span><span class=\"p\">:<\/span> <span class=\"m\">60px<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--spacing-small<\/span><span class=\"p\">);<\/span>\n    <span class=\"p\">}<\/span>\n\n    <span class=\"nc\">.cta<\/span> <span class=\"nt\">h2<\/span> <span class=\"p\">{<\/span>\n      <span class=\"nl\">font-size<\/span><span class=\"p\">:<\/span> <span class=\"m\">2rem<\/span><span class=\"p\">;<\/span>\n    <span class=\"p\">}<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"c\">\/* ==================== Subject Page Specific Styles ==================== *\/<\/span>\n  <span class=\"nc\">.subject-hero<\/span> <span class=\"p\">{<\/span>\n    <span class=\"c\">\/* ... (rest of your subject page styles) ... *\/<\/span>\n    <span class=\"nl\">background<\/span><span class=\"p\">:<\/span> <span class=\"n\">linear-gradient<\/span><span class=\"p\">(<\/span><span class=\"m\">135deg<\/span><span class=\"p\">,<\/span> <span class=\"m\">#2c3e50<\/span><span class=\"p\">,<\/span> <span class=\"m\">#1a237e<\/span><span class=\"p\">);<\/span>\n    <span class=\"nl\">padding<\/span><span class=\"p\">:<\/span> <span class=\"m\">100px<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--spacing-medium<\/span><span class=\"p\">);<\/span>\n    <span class=\"nl\">color<\/span><span class=\"p\">:<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--text-color-light<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nc\">.subject-hero-content<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">max-width<\/span><span class=\"p\">:<\/span> <span class=\"m\">800px<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">margin<\/span><span class=\"p\">:<\/span> <span class=\"m\">0<\/span> <span class=\"nb\">auto<\/span><span class=\"p\">;<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nc\">.subject-list<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">margin<\/span><span class=\"p\">:<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--spacing-large<\/span><span class=\"p\">)<\/span> <span class=\"nb\">auto<\/span><span class=\"p\">;<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nc\">.subject-grid<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">display<\/span><span class=\"p\">:<\/span> <span class=\"n\">grid<\/span><span class=\"p\">;<\/span>\n    <span class=\"py\">grid-template-columns<\/span><span class=\"p\">:<\/span> <span class=\"nb\">repeat<\/span><span class=\"p\">(<\/span><span class=\"n\">auto-fit<\/span><span class=\"p\">,<\/span> <span class=\"n\">minmax<\/span><span class=\"p\">(<\/span><span class=\"m\">250px<\/span><span class=\"p\">,<\/span> <span class=\"m\">1<\/span><span class=\"n\">fr<\/span><span class=\"p\">));<\/span> <span class=\"c\">\/* Adjusted minmax *\/<\/span>\n    <span class=\"py\">gap<\/span><span class=\"p\">:<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--spacing-medium<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nc\">.subject-grid<\/span> <span class=\"nt\">a<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">display<\/span><span class=\"p\">:<\/span> <span class=\"n\">flex<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">flex-direction<\/span><span class=\"p\">:<\/span> <span class=\"n\">column<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">align-items<\/span><span class=\"p\">:<\/span> <span class=\"nb\">center<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">text-decoration<\/span><span class=\"p\">:<\/span> <span class=\"nb\">none<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">color<\/span><span class=\"p\">:<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--text-color-light<\/span><span class=\"p\">);<\/span>\n    <span class=\"nl\">background<\/span><span class=\"p\">:<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--secondary-bg<\/span><span class=\"p\">);<\/span>\n    <span class=\"nl\">padding<\/span><span class=\"p\">:<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--spacing-medium<\/span><span class=\"p\">);<\/span>\n    <span class=\"nl\">border-radius<\/span><span class=\"p\">:<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--border-radius-base<\/span><span class=\"p\">);<\/span>\n    <span class=\"nl\">box-shadow<\/span><span class=\"p\">:<\/span> <span class=\"m\">0<\/span> <span class=\"m\">3px<\/span> <span class=\"m\">6px<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--box-shadow-color<\/span><span class=\"p\">);<\/span>\n    <span class=\"nl\">transition<\/span><span class=\"p\">:<\/span> <span class=\"n\">box-shadow<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--transition-duration<\/span><span class=\"p\">),<\/span> <span class=\"n\">transform<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--transition-duration<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nc\">.subject-grid<\/span> <span class=\"nt\">a<\/span><span class=\"nd\">:hover<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">box-shadow<\/span><span class=\"p\">:<\/span> <span class=\"m\">0<\/span> <span class=\"m\">5px<\/span> <span class=\"m\">10px<\/span> <span class=\"n\">rgba<\/span><span class=\"p\">(<\/span><span class=\"m\">0<\/span><span class=\"p\">,<\/span> <span class=\"m\">0<\/span><span class=\"p\">,<\/span> <span class=\"m\">0<\/span><span class=\"p\">,<\/span> <span class=\"m\">0.25<\/span><span class=\"p\">);<\/span>\n    <span class=\"nl\">transform<\/span><span class=\"p\">:<\/span> <span class=\"n\">scale<\/span><span class=\"p\">(<\/span><span class=\"m\">1.05<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nc\">.subject-grid<\/span> <span class=\"nt\">a<\/span> <span class=\"nt\">img<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">width<\/span><span class=\"p\">:<\/span> <span class=\"m\">60px<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">height<\/span><span class=\"p\">:<\/span> <span class=\"m\">60px<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">margin-bottom<\/span><span class=\"p\">:<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--spacing-small<\/span><span class=\"p\">);<\/span>\n    <span class=\"nl\">filter<\/span><span class=\"p\">:<\/span> <span class=\"n\">drop-shadow<\/span><span class=\"p\">(<\/span><span class=\"m\">2px<\/span> <span class=\"m\">2px<\/span> <span class=\"m\">3px<\/span> <span class=\"n\">rgba<\/span><span class=\"p\">(<\/span><span class=\"m\">0<\/span><span class=\"p\">,<\/span> <span class=\"m\">0<\/span><span class=\"p\">,<\/span> <span class=\"m\">0<\/span><span class=\"p\">,<\/span> <span class=\"m\">0.3<\/span><span class=\"p\">));<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"c\">\/* ==================== About Page Specific Styles ==================== *\/<\/span>\n  <span class=\"nc\">.about-hero<\/span> <span class=\"p\">{<\/span>\n    <span class=\"c\">\/* ... (rest of your about page styles) ... *\/<\/span>\n    <span class=\"nl\">background<\/span><span class=\"p\">:<\/span> <span class=\"n\">linear-gradient<\/span><span class=\"p\">(<\/span><span class=\"m\">135deg<\/span><span class=\"p\">,<\/span> <span class=\"m\">#2c3e50<\/span><span class=\"p\">,<\/span> <span class=\"m\">#1a237e<\/span><span class=\"p\">);<\/span>\n    <span class=\"nl\">padding<\/span><span class=\"p\">:<\/span> <span class=\"m\">100px<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--spacing-medium<\/span><span class=\"p\">);<\/span>\n    <span class=\"nl\">color<\/span><span class=\"p\">:<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--text-color-light<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nc\">.about-hero-content<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">max-width<\/span><span class=\"p\">:<\/span> <span class=\"m\">800px<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">margin<\/span><span class=\"p\">:<\/span> <span class=\"m\">0<\/span> <span class=\"nb\">auto<\/span><span class=\"p\">;<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nc\">.about-container<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">margin<\/span><span class=\"p\">:<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--spacing-large<\/span><span class=\"p\">)<\/span> <span class=\"nb\">auto<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">max-width<\/span><span class=\"p\">:<\/span> <span class=\"m\">900px<\/span><span class=\"p\">;<\/span> <span class=\"c\">\/* Wider container *\/<\/span>\n    <span class=\"nl\">text-align<\/span><span class=\"p\">:<\/span> <span class=\"nb\">left<\/span><span class=\"p\">;<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nc\">.about-container<\/span> <span class=\"nt\">h2<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">margin-bottom<\/span><span class=\"p\">:<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--spacing-medium<\/span><span class=\"p\">);<\/span>\n    <span class=\"nl\">position<\/span><span class=\"p\">:<\/span> <span class=\"nb\">relative<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">padding-bottom<\/span><span class=\"p\">:<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--spacing-small<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nc\">.about-container<\/span> <span class=\"nt\">h2<\/span><span class=\"nd\">::after<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">content<\/span><span class=\"p\">:<\/span> <span class=\"s2\">''<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">position<\/span><span class=\"p\">:<\/span> <span class=\"nb\">absolute<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">left<\/span><span class=\"p\">:<\/span> <span class=\"m\">0<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">bottom<\/span><span class=\"p\">:<\/span> <span class=\"m\">0<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">height<\/span><span class=\"p\">:<\/span> <span class=\"m\">3px<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">width<\/span><span class=\"p\">:<\/span> <span class=\"m\">50px<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">background-color<\/span><span class=\"p\">:<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--accent-color<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nc\">.about-team<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">margin<\/span><span class=\"p\">:<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--spacing-large<\/span><span class=\"p\">)<\/span> <span class=\"nb\">auto<\/span><span class=\"p\">;<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nc\">.team-grid<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">display<\/span><span class=\"p\">:<\/span> <span class=\"n\">grid<\/span><span class=\"p\">;<\/span>\n    <span class=\"py\">grid-template-columns<\/span><span class=\"p\">:<\/span> <span class=\"nb\">repeat<\/span><span class=\"p\">(<\/span><span class=\"n\">auto-fit<\/span><span class=\"p\">,<\/span> <span class=\"n\">minmax<\/span><span class=\"p\">(<\/span><span class=\"m\">250px<\/span><span class=\"p\">,<\/span> <span class=\"m\">1<\/span><span class=\"n\">fr<\/span><span class=\"p\">));<\/span> <span class=\"c\">\/* Adjusted minmax *\/<\/span>\n    <span class=\"py\">gap<\/span><span class=\"p\">:<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--spacing-medium<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nc\">.team-member<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">background<\/span><span class=\"p\">:<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--secondary-bg<\/span><span class=\"p\">);<\/span>\n    <span class=\"nl\">padding<\/span><span class=\"p\">:<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--spacing-medium<\/span><span class=\"p\">);<\/span>\n    <span class=\"nl\">border-radius<\/span><span class=\"p\">:<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--border-radius-base<\/span><span class=\"p\">);<\/span>\n    <span class=\"nl\">box-shadow<\/span><span class=\"p\">:<\/span> <span class=\"m\">0<\/span> <span class=\"m\">3px<\/span> <span class=\"m\">6px<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--box-shadow-color<\/span><span class=\"p\">);<\/span>\n    <span class=\"nl\">transition<\/span><span class=\"p\">:<\/span> <span class=\"n\">box-shadow<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--transition-duration<\/span><span class=\"p\">),<\/span> <span class=\"n\">transform<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--transition-duration<\/span><span class=\"p\">);<\/span>\n    <span class=\"nl\">text-align<\/span><span class=\"p\">:<\/span> <span class=\"nb\">center<\/span><span class=\"p\">;<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nc\">.team-member<\/span><span class=\"nd\">:hover<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">box-shadow<\/span><span class=\"p\">:<\/span> <span class=\"m\">0<\/span> <span class=\"m\">5px<\/span> <span class=\"m\">10px<\/span> <span class=\"n\">rgba<\/span><span class=\"p\">(<\/span><span class=\"m\">0<\/span><span class=\"p\">,<\/span> <span class=\"m\">0<\/span><span class=\"p\">,<\/span> <span class=\"m\">0<\/span><span class=\"p\">,<\/span> <span class=\"m\">0.25<\/span><span class=\"p\">);<\/span>\n    <span class=\"nl\">transform<\/span><span class=\"p\">:<\/span> <span class=\"n\">translateY<\/span><span class=\"p\">(<\/span><span class=\"m\">-5px<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nc\">.team-member<\/span> <span class=\"nt\">img<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">width<\/span><span class=\"p\">:<\/span> <span class=\"m\">120px<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">height<\/span><span class=\"p\">:<\/span> <span class=\"m\">120px<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">border-radius<\/span><span class=\"p\">:<\/span> <span class=\"m\">50%<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">object-fit<\/span><span class=\"p\">:<\/span> <span class=\"n\">cover<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">margin-bottom<\/span><span class=\"p\">:<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--spacing-small<\/span><span class=\"p\">);<\/span>\n    <span class=\"nl\">box-shadow<\/span><span class=\"p\">:<\/span> <span class=\"m\">0<\/span> <span class=\"m\">2px<\/span> <span class=\"m\">5px<\/span> <span class=\"n\">rgba<\/span><span class=\"p\">(<\/span><span class=\"m\">0<\/span><span class=\"p\">,<\/span> <span class=\"m\">0<\/span><span class=\"p\">,<\/span> <span class=\"m\">0<\/span><span class=\"p\">,<\/span> <span class=\"m\">0.3<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n<span class=\"p\">{<\/span><span class=\"err\">%<\/span> <span class=\"err\">raw<\/span> <span class=\"err\">%<\/span><span class=\"p\">}<\/span>\n\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0627\u06cc\u0646 <code>style-main.css<\/code> \u0641\u0627\u06cc\u0644 \u0633\u0628\u06a9 \u0627\u0635\u0644\u06cc \u0631\u0627 \u0644\u063a\u0648 \u0645\u06cc \u06a9\u0646\u062f <code>style.css<\/code>\u060c \u0648 \u062f\u0631 \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0627\u062a \u0627\u0639\u0645\u0627\u0644 \u0645\u06cc \u0634\u0648\u062f. \u062d\u0627\u0644\u0627 \u0628\u06cc\u0627\u06cc\u06cc\u062f \u062f\u0631 \u0645\u0648\u0631\u062f \u0646\u06cc\u0627\u0632 \u0635\u062d\u0628\u062a \u06a9\u0646\u06cc\u0645 <code>style-main.css<\/code>\u060c \u062a\u0648\u0633\u0639\u0647 \u062f\u0647\u0646\u062f\u06af\u0627\u0646 \u0628\u0627\u062a\u062c\u0631\u0628\u0647\u060c \u0645\u0645\u06a9\u0646 \u0627\u0633\u062a \u0645\u062a\u0648\u062c\u0647 \u0634\u062f\u0647 \u0628\u0627\u0634\u0646\u062f\u060c \u0627\u0645\u0627 \u0628\u0631\u0627\u06cc \u062a\u0648\u0633\u0639\u0647 \u062f\u0647\u0646\u062f\u06af\u0627\u0646 \u0646\u0647 \u0686\u0646\u062f\u0627\u0646 \u0628\u0627\u062a\u062c\u0631\u0628\u0647.<\/p>\n<ul>\n<li>  <strong>\u0645\u0634\u06a9\u0644:<\/strong> \u062f\u0631 \u062d\u0627\u0644\u06cc \u06a9\u0647 <code>style.css<\/code> (\u062f\u0631 \u0631\u06cc\u0634\u0647) \u067e\u0627\u06cc\u0647 \u0648 \u0627\u0633\u0627\u0633 \u0648 \u0634\u06cc\u0645\u06cc \u062e\u0627\u0635 \u0631\u0627 \u0641\u0631\u0627\u0647\u0645 \u0645\u06cc \u06a9\u0646\u062f <code>style.css<\/code> \u0639\u0646\u0627\u0635\u0631 \u0645\u0646\u062d\u0635\u0631 \u0628\u0647 \u0641\u0631\u062f \u0631\u0627 \u06a9\u0646\u062a\u0631\u0644 \u0645\u06cc \u06a9\u0646\u062f\u060c \u0646\u06cc\u0627\u0632 \u0628\u0647 \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f <strong>\u0627\u0635\u0644\u0627\u062d \u06a9\u0646\u06cc\u062f<\/strong> \u0628\u0631\u062e\u06cc \u0627\u0632 \u0633\u0628\u06a9 \u0647\u0627\u06cc \u062c\u0647\u0627\u0646\u06cc <em>\u0628\u0647 \u0637\u0648\u0631 \u062e\u0627\u0635<\/em> \u0628\u0631\u0627\u06cc \u0628\u062e\u0634 \u0634\u06cc\u0645\u06cc \u062a\u063a\u06cc\u06cc\u0631 \u0645\u0633\u062a\u0642\u06cc\u0645 \u0631\u06cc\u0634\u0647 <code>style.css<\/code> \u0628\u0631 \u06a9\u0644 \u0648\u0628 \u0633\u0627\u06cc\u062a \u062a\u0623\u062b\u06cc\u0631 \u0645\u06cc \u06af\u0630\u0627\u0631\u062f \u06a9\u0647 \u0646\u0627\u0645\u0637\u0644\u0648\u0628 \u0627\u0633\u062a.<\/li>\n<li>  <strong>\u0631\u0627\u0647 \u062d\u0644:<\/strong> <code>style-main.css<\/code>  \u0628\u0631\u0627\u06cc \u0646\u0627\u062f\u06cc\u062f\u0647 \u06af\u0631\u0641\u062a\u0646 \u0633\u0628\u06a9 \u0647\u0627\u06cc \u062c\u0647\u0627\u0646\u06cc \u062e\u0627\u0635 \u0627\u0632 \u0631\u06cc\u0634\u0647 \u0645\u0639\u0631\u0641\u06cc \u0634\u062f\u0647 \u0627\u0633\u062a <code>style.css<\/code> <strong>\u0641\u0642\u0637 \u062f\u0631 \u0635\u0641\u062d\u0647 \u0634\u06cc\u0645\u06cc<\/strong>. \u0647\u0645\u0686\u0646\u06cc\u0646 \u0627\u062c\u0627\u0632\u0647 \u0645\u06cc \u062f\u0647\u062f \u062a\u0627 \u0633\u0628\u06a9 \u0647\u0627\u06cc \u062c\u062f\u06cc\u062f\u06cc \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f \u06a9\u0647 \u0639\u0645\u0648\u0645\u06cc \u062a\u0631 \u0627\u0632 \u0633\u0628\u06a9 \u0647\u0627\u06cc \u062e\u0627\u0635 \u0634\u06cc\u0645\u06cc \u0647\u0633\u062a\u0646\u062f <code>style.css<\/code> \u0627\u0645\u0627 \u0647\u0646\u0648\u0632 \u0628\u0631\u0627\u06cc \u06a9\u0644 \u0648\u0628 \u0633\u0627\u06cc\u062a \u0642\u0627\u0628\u0644 \u0627\u062c\u0631\u0627 \u0646\u06cc\u0633\u062a.<\/li>\n<li>  <strong>\u0645\u062b\u0627\u0644:<\/strong>\n<ul>\n<li>    \u0631\u06cc\u0634\u0647 <code>style.css<\/code> \u0645\u0645\u06a9\u0646 \u0627\u0633\u062a \u06cc\u06a9 \u0631\u0646\u06af \u062f\u06a9\u0645\u0647 \u067e\u06cc\u0634 \u0641\u0631\u0636 \u0631\u0627 \u062a\u0639\u0631\u06cc\u0641 \u06a9\u0646\u062f.<\/li>\n<li>    \u062f\u0631 \u0635\u0641\u062d\u0647 \u0634\u06cc\u0645\u06cc\u060c \u0645\u0645\u06a9\u0646 \u0627\u0633\u062a \u0631\u0646\u06af \u062f\u06a9\u0645\u0647 \u062f\u06cc\u06af\u0631\u06cc \u0631\u0627 \u0628\u062e\u0648\u0627\u0647\u06cc\u062f\u060c \u06cc\u0627 \u0628\u0627\u0644\u0634\u062a\u06a9 \u0631\u0627 \u062a\u0646\u0638\u06cc\u0645 \u06a9\u0646\u06cc\u062f.<\/li>\n<li>  <code>style-main.css<\/code>  \u062d\u0627\u0648\u06cc \u0642\u0648\u0627\u0646\u06cc\u0646 CSS \u0628\u0631\u0627\u06cc \u0644\u063a\u0648 \u0631\u0646\u06af \u0648 \u0628\u0627\u0644\u0634\u062a\u06a9 \u062f\u06a9\u0645\u0647 \u0627\u0633\u062a\u060c \u0627\u0645\u0627 <em>\u0641\u0642\u0637<\/em> \u0628\u0631\u0627\u06cc \u0628\u062e\u0634 \u0634\u06cc\u0645\u06cc<\/li>\n<\/ul>\n<\/li>\n<li>  <strong>\u0645\u0632\u0627\u06cc\u0627:<\/strong>\n<ul>\n<li>  <strong>\u0645\u062f\u0648\u0644\u0627\u0631\u06cc\u062a:<\/strong> \u062a\u063a\u06cc\u06cc\u0631\u0627\u062a \u0633\u0628\u06a9 \u0631\u0627 \u062f\u0631 \u067e\u0648\u0634\u0647 \u0645\u0648\u0636\u0648\u0639 \u0645\u0631\u0628\u0648\u0637\u0647 \u0633\u0627\u0632\u0645\u0627\u0646\u062f\u0647\u06cc \u0648 \u062f\u0631\u062c \u0645\u06cc \u06a9\u0646\u062f.<\/li>\n<li>  <strong>\u0642\u0627\u0628\u0644\u06cc\u062a \u0646\u06af\u0647\u062f\u0627\u0631\u06cc:<\/strong> \u0628\u0647\u200c\u0631\u0648\u0632\u0631\u0633\u0627\u0646\u06cc \u06cc\u0627 \u062a\u063a\u06cc\u06cc\u0631 \u0633\u0628\u06a9\u200c\u0647\u0627 \u0628\u0631\u0627\u06cc \u06cc\u06a9 \u0628\u062e\u0634 \u062e\u0627\u0635 \u0628\u062f\u0648\u0646 \u062a\u0623\u062b\u06cc\u0631\u06af\u0630\u0627\u0631\u06cc \u0628\u0631 \u062f\u06cc\u06af\u0631\u0627\u0646 \u0622\u0633\u0627\u0646\u200c\u062a\u0631 \u0627\u0633\u062a.<\/li>\n<li>  <strong>\u0648\u06cc\u0698\u06af\u06cc:<\/strong> \u0644\u063a\u0648\u0647\u0627 \u0647\u062f\u0641\u0645\u0646\u062f \u0647\u0633\u062a\u0646\u062f \u0648 \u0628\u0631\u0627\u06cc \u062f\u0633\u062a\u06cc\u0627\u0628\u06cc \u0628\u0647 \u0627\u062b\u0631 \u062f\u0644\u062e\u0648\u0627\u0647 \u0628\u0647 \u0627\u0646\u062a\u062e\u0627\u0628\u06af\u0631\u0647\u0627\u06cc \u067e\u06cc\u0686\u06cc\u062f\u0647 CSS \u0646\u06cc\u0627\u0632 \u0646\u062f\u0627\u0631\u0646\u062f.<\/li>\n<li>  <strong>\u062c\u0644\u0648\u06af\u06cc\u0631\u06cc \u0627\u0632 \u062a\u06a9\u0631\u0627\u0631 \u06a9\u062f:<\/strong> \u0646\u0627\u062f\u06cc\u062f\u0647 \u06af\u0631\u0641\u062a\u0646 \u06cc\u0627 \u0627\u0636\u0627\u0641\u0627\u062a \u0631\u0627\u06cc\u062c \u0628\u0631\u0627\u06cc \u06cc\u06a9 \u062d\u0648\u0632\u0647 \u0645\u0648\u0636\u0648\u0639\u06cc \u0631\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646 \u062f\u0631 \u0622\u0646 \u0642\u0631\u0627\u0631 \u062f\u0627\u062f <code>style-main.css<\/code> \u0628\u0647 \u062c\u0627\u06cc \u0627\u06cc\u0646\u06a9\u0647 \u062f\u0631 \u0686\u0646\u062f\u06cc\u0646 \u0634\u06cc\u0648\u0647 \u0646\u0627\u0645\u0647 \u062e\u0627\u0635 \u0645\u0648\u0636\u0648\u0639\u06cc \u062a\u06a9\u0631\u0627\u0631 \u0634\u0648\u062f.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h2><span class=\"ez-toc-section\" id=\"%D8%B3%D8%A7%D8%B9%D8%AA_18_%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C_%D8%B5%D9%81%D8%AD%D9%87_%D8%B4%DB%8C%D9%85%DB%8C_%D8%AE%D8%A7%D8%B5\"><\/span>\n<p>  \u0633\u0627\u0639\u062a 18: \u0637\u0631\u0627\u062d\u06cc \u0635\u0641\u062d\u0647 \u0634\u06cc\u0645\u06cc \u062e\u0627\u0635<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0628\u0631\u0627\u06cc \u062c\u0644\u0648\u06af\u06cc\u0631\u06cc \u0627\u0632 \u067e\u06cc\u0686\u06cc\u062f\u0647 \u0634\u062f\u0646 \u0627\u0633\u062a\u0627\u06cc\u0644 \u0647\u0627\u060c \u062a\u0635\u0645\u06cc\u0645 \u06af\u0631\u0641\u062a\u0645 \u0627\u0632 \u0641\u0627\u06cc\u0644 \u0634\u06cc\u0648\u0647 \u0646\u0627\u0645\u0647 \u062f\u06cc\u06af\u0631\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u0645. <code>specific-chemistry.css<\/code> \u062f\u0627\u062e\u0644 <code>\\Chemistry<\/code> \u067e\u0648\u0634\u0647 \u0627\u06cc\u0646 \u0628\u0647 \u0635\u0641\u062d\u0647 \u0645\u0648\u0636\u0648\u0639 \u0627\u0633\u062a\u0627\u06cc\u0644 \u0645\u06cc \u062f\u0647\u062f \u0648 \u0633\u0627\u06cc\u0631 \u0641\u0627\u06cc\u0644 \u0647\u0627 \u0631\u0627 \u0628\u062f\u0648\u0646 \u062f\u0631\u0647\u0645 \u0648 \u0628\u0631\u0647\u0645 \u0646\u06af\u0647 \u0645\u06cc \u062f\u0627\u0631\u062f.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>\ncss\n.specific-chemistry-page{\n    display: flex;\n    max-width: 1200px;\n     margin: 40px auto;\n     padding: 0 20px;\n}\n.specific-chemistry-page .article-list {\n    flex: 1;\n    padding: 20px;\n    background: #252525;\n    border-radius: 8px;\n    box-shadow: 0 2px 4px rgba(255,255,255,0.1);\n    margin: 0 10px;\n}\n\n.specific-chemistry-page .article-list h2 {\n    margin-bottom: 15px;\n}\n\n.specific-chemistry-page .article-list ul {\n    list-style: none;\n    padding: 0;\n}\n\n.specific-chemistry-page .article-list ul li {\n    margin-bottom: 10px;\n}\n\n.specific-chemistry-page .article-list ul li a {\n    display: block;\n    padding: 10px;\n    text-decoration: none;\n    color: #e0e0e0;\n    background: #333;\n    border-radius: 5px;\n    transition: background 0.3s;\n}\n\n.specific-chemistry-page .article-list ul li a:hover {\n    background: #444;\n}\n.specific-chemistry-page .content-area{\n    flex: 3;\n    padding: 20px;\n    margin: 0 10px;\n}\n.specific-chemistry-page .content-area h1{\n   text-align: center;\n}\n.topic-list-grid{\n     background: #252525;\n      margin-top: 20px;\n        border-radius: 8px;\n    box-shadow: 0 2px 4px rgba(255,255,255,0.1);\n     padding: 20px;\n}\n.topic-list-grid h2{\n     text-align: center;\n    margin-bottom: 15px;\n}\n.topic-list-grid ul {\n    list-style: none;\n    padding: 0;\n}\n.topic-list-grid ul li{\n    margin-bottom: 10px;\n}\n\n.topic-list-grid ul li a {\n    display: block;\n    padding: 10px;\n    text-decoration: none;\n    color: #e0e0e0;\n    background: #333;\n    border-radius: 5px;\n     transition: background 0.3s;\n}\n\n.topic-list-grid ul li a:hover {\n  background: #444;\n}\n\n\n@media (max-width: 768px) {\n    .specific-chemistry-page {\n      flex-direction: column;\n    }\n      .specific-chemistry-page .article-list, .specific-chemistry-page .content-area {\n      margin: 10px 0;\n        padding: 10px;\n    }\n}\n\n\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0627\u06cc\u0646 \u06cc\u06a9 \u0638\u0627\u0647\u0631 \u0637\u0631\u0627\u062d\u06cc \u0631\u0627 \u0628\u0647 \u0637\u0631\u062d \u0633\u0647 \u0633\u062a\u0648\u0646\u06cc\u060c \u06a9\u0647 \u0645\u0646 \u062f\u0631 \u0622\u0646 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0631\u062f\u0645\u060c \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc \u062f\u0647\u062f <code>index.html<\/code> \u062f\u0627\u062e\u0644 <code>\\Chemistry<\/code> \u067e\u0648\u0634\u0647 \u0627\u06cc\u0646 \u0628\u0627\u0639\u062b \u0645\u06cc \u0634\u0648\u062f \u0635\u0641\u062d\u0647 \u0628\u0633\u06cc\u0627\u0631 \u062a\u0645\u06cc\u0632\u062a\u0631 \u0648 \u062d\u0631\u0641\u0647 \u0627\u06cc \u062a\u0631 \u0628\u0647 \u0646\u0638\u0631 \u0628\u0631\u0633\u062f. \u0645\u0646 \u0647\u0645\u0686\u0646\u06cc\u0646 \u0637\u0631\u0627\u062d\u06cc \u0648\u0627\u06a9\u0646\u0634\u06af\u0631\u0627 \u0631\u0627 \u0628\u0631\u0627\u06cc \u0635\u0641\u062d\u0647 \u0646\u0645\u0627\u06cc\u0634 \u0647\u0627\u06cc \u06a9\u0648\u0686\u06a9 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u0647 \u0627\u0645.<br \/>\u0628\u0631\u0627\u06cc \u06a9\u0633\u0627\u0646\u06cc \u06a9\u0647 \u067e\u06cc\u0634 \u0646\u0645\u0627\u06cc\u0634 \u0632\u0646\u062f\u0647 \u0631\u0627 \u0645\u06cc \u062e\u0648\u0627\u0647\u0646\u062f:<br \/>\u0634\u06cc\u0645\u06cc<\/p>\n<p>\u0627\u0632 \u0622\u0646\u062c\u0627\u06cc\u06cc \u06a9\u0647 \u0627\u06cc\u0646 \u06cc\u06a9 \u0635\u0641\u062d\u0647 \u0627\u0628\u062a\u062f\u0627\u06cc\u06cc \u0628\u0648\u062f\u060c \u0646\u06cc\u0627\u0632\u06cc \u0628\u0647 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u0646 a \u0627\u062d\u0633\u0627\u0633 \u0646\u06a9\u0631\u062f\u0645 <code>script.js<\/code><br \/>\u0627\u06cc\u0646 \u0647\u0645\u0647 \u0628\u0631\u0627\u06cc \u0627\u0645\u0631\u0648\u0632 \u0627\u0633\u062a. \u0634\u0627\u06cc\u062f \u0641\u0631\u062f\u0627 \u0628\u0628\u06cc\u0646\u0645\u062a \u062a\u0627 \u0627\u0648\u0646 \u0645\u0648\u0642\u0639 \u0645\u06cc\u0628\u06cc\u0646\u0645\u062a<\/p>\n<\/p><\/div>\n","protected":false},"excerpt":{"rendered":"<p>\u062f\u06cc\u0631\u0648\u0632 \u06a9\u0627\u0631 \u06a9\u0631\u062f\u06cc\u0645 index.html\u0648 \u0627\u0645\u0631\u0648\u0632 \u0631\u0648\u06cc \u0645\u0648\u0636\u0648\u0639\u0627\u062a.html \u0648 about.html. \u062e\u0648\u0627\u0647\u06cc\u0645 \u062f\u06cc\u062f \u06a9\u0647 \u0622\u06cc\u0627 \u0632\u0645\u0627\u0646 \u06a9\u0627\u0641\u06cc \u0628\u0631\u0627\u06cc \u06a9\u0627\u0631 \u0631\u0648\u06cc SubjectPages \u062e\u0648\u062f \u0645\u0627\u0646\u0646\u062f \u0634\u06cc\u0645\u06cc\u060c \u0631\u06cc\u0627\u0636\u06cc\u0627\u062a \u0648 \u063a\u06cc\u0631\u0647 \u062f\u0627\u0631\u06cc\u0645. \u0633\u0627\u0639\u062a 14: \u0633\u0627\u062e\u062a\u0646 \u0635\u0641\u062d\u0647 \u0645\u0648\u0636\u0648\u0639\u0627\u062a \u0645\u0646 \u0628\u0627 \u0634\u0631\u0648\u0639 subjects.html. \u062f\u0631\u0633\u062a \u0645\u0627\u0646\u0646\u062f \u0642\u0628\u0644\u060c \u0645\u0646 \u0627\u0632 \u062f\u06cc\u06af \u0628\u062e\u0627\u0631 \u0633\u0641\u0627\u0631\u0634\u06cc \u062e\u0648\u062f \u06a9\u0647 \u062f\u06cc\u0631\u0648\u0632 \u0628\u0631\u0627\u06cc \u0627\u06cc\u0646 \u067e\u0631\u0648\u0698\u0647 \u0637\u0631\u0627\u062d\u06cc \u06a9\u0631\u062f\u0645 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u062e\u0648\u0627\u0647\u0645 \u06a9\u0631\u062f: \u0645\u0646 &hellip;<\/p>\n","protected":false},"author":2,"featured_media":92131,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"fifu_image_url":"https:\/\/media2.dev.to\/dynamic\/image\/width=1000,height=500,fit=cover,gravity=auto,format=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F9duebvewono90qq16qvt.png","fifu_image_alt":"","footnotes":""},"categories":[339],"tags":[],"class_list":["post-92130","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-dev"],"_links":{"self":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/92130","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/comments?post=92130"}],"version-history":[{"count":0,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/92130\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media\/92131"}],"wp:attachment":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media?parent=92130"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/categories?post=92130"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/tags?post=92130"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}