\n:root {\n  --primary-color: #032B44;\n  --secondary-color: #82CFFD;\n  --gradient-color: linear-gradient(135deg, #5E239D 0%, #1FA6F2 100%);\n  --white-color: #FFFFFF;\n  --accent-color: #FF4D80;\n  --font-main: 'Open Sans', sans-serif;\n  --font-heading: 'Roboto', sans-serif;\n}\n\n* {\n  margin: 0;\n  padding: 0;\n  box-sizing: border-box;\n}\n\nhtml {\n  scroll-behavior: smooth;\n}\n\nbody {\n  font-family: var(--font-main);\n  font-size: 16px;\n  line-height: 1.7;\n  color: var(--white-color);\n  background: var(--primary-color);\n  background-image: radial-gradient(circle at 20% 30%, rgba(130, 207, 253, 0.1) 0%, transparent 50%),\n                    radial-gradient(circle at 80% 70%, rgba(94, 35, 157, 0.1) 0%, transparent 50%);\n  overflow-x: hidden;\n}\n\n.container {\n  max-width: 1200px;\n  width: 90%;\n  margin: 0 auto;\n  padding: 0 20px;\n}\n\n/* Header Styles */\n.header {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  z-index: 1000;\n  background: rgba(3, 43, 68, 0.9);\n  backdrop-filter: blur(10px);\n  box-shadow: 0 5px 30px rgba(0, 0, 0, 0.2);\n  padding: 20px 0;\n  transition: all 0.3s ease;\n}\n\n.header-inner {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n}\n\n.logo {\n  font-family: var(--font-heading);\n  font-size: 24px;\n  font-weight: 700;\n  color: var(--white-color);\n  text-decoration: none;\n  display: flex;\n  align-items: center;\n  gap: 10px;\n}\n\n.logo::before {\n  content: '';\n  display: block;\n  width: 30px;\n  height: 30px;\n  background: var(--gradient-color);\n  border-radius: 6px;\n}\n\n.nav {\n  display: flex;\n  gap: 30px;\n}\n\n.nav-link {\n  color: var(--white-color);\n  text-decoration: none;\n  font-weight: 600;\n  position: relative;\n  padding: 5px 0;\n  transition: all 0.3s ease;\n}\n\n.nav-link::after {\n  content: '';\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  width: 0;\n  height: 2px;\n  background: var(--secondary-color);\n  transition: width 0.3s ease;\n}\n\n.nav-link:hover::after {\n  width: 100%;\n}\n\n.hamburger {\n  display: none;\n  cursor: pointer;\n  width: 30px;\n  height: 20px;\n  position: relative;\n  z-index: 1001;\n}\n\n.hamburger span {\n  display: block;\n  position: absolute;\n  height: 3px;\n  width: 100%;\n  background: var(--white-color);\n  border-radius: 3px;\n  opacity: 1;\n  left: 0;\n  transform: rotate(0deg);\n  transition: all 0.3s ease;\n}\n\n.hamburger span:nth-child(1) {\n  top: 0;\n}\n\n.hamburger span:nth-child(2),\n.hamburger span:nth-child(3) {\n  top: 10px;\n}\n\n.hamburger span:nth-child(4) {\n  top: 20px;\n}\n\n.hamburger.active span:nth-child(1),\n.hamburger.active span:nth-child(4) {\n  top: 10px;\n  width: 0%;\n  left: 50%;\n}\n\n.hamburger.active span:nth-child(2) {\n  transform: rotate(45deg);\n}\n\n.hamburger.active span:nth-child(3) {\n  transform: rotate(-45deg);\n}\n\n/* Hero Section */\n.hero {\n  min-height: 100vh;\n  display: flex;\n  align-items: center;\n  padding: 120px 0 80px;\n  position: relative;\n  overflow: hidden;\n}\n\n.hero::before {\n  content: '';\n  position: absolute;\n  top: -50%;\n  left: -50%;\n  width: 200%;\n  height: 200%;\n  background: var(--gradient-color);\n  opacity: 0.1;\n  animation: rotate 30s linear infinite;\n  z-index: -1;\n}\n\n.hero-content {\n  max-width: 600px;\n}\n\n.hero-title {\n  font-size: 48px;\n  font-weight: 800;\n  margin-bottom: 20px;\n  line-height: 1.2;\n  background: var(--gradient-color);\n  -webkit-background-clip: text;\n  -webkit-text-fill-color: transparent;\n  background-clip: text;\n}\n\n.hero-subtitle {\n  font-size: 20px;\n  margin-bottom: 30px;\n  color: var(--secondary-color);\n}\n\n.hero-image {\n  position: absolute;\n  right: 0;\n  bottom: 0;\n  width: 50%;\n  max-width: 600px;\n  z-index: -1;\n  animation: float 6s ease-in-out infinite;\n}\n\n/* Article Section */\n.article-section {\n  padding: 100px 0;\n  background: rgba(3, 43, 68, 0.7);\n  backdrop-filter: blur(10px);\n  border-radius: 30px;\n  margin: 50px auto;\n  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);\n  max-width: 1000px;\n}\n\n.article-container {\n  padding: 0 40px;\n}\n\narticle {\n  max-width: 800px;\n  margin: 0 auto;\n}\n\narticle h2 {\n  font-size: 32px;\n  margin: 40px 0 20px;\n  color: var(--secondary-color);\n  position: relative;\n  padding-left: 20px;\n}\n\narticle h2::before {\n  content: '';\n  position: absolute;\n  left: 0;\n  top: 10px;\n  height: 60%;\n  width: 5px;\n  background: var(--gradient-color);\n  border-radius: 5px;\n}\n\narticle h3 {\n  font-size: 24px;\n  margin: 30px 0 15px;\n  color: var(--white-color);\n}\n\narticle p {\n  margin-bottom: 20px;\n  line-height: 1.8;\n}\n\n.code-block {\n  background: rgba(0, 0, 0, 0.3);\n  border-radius: 10px;\n  padding: 20px;\n  margin: 20px 0;\n  overflow-x: auto;\n  font-family: 'Courier New', monospace;\n  font-size: 14px;\n  border-left: 4px solid var(--secondary-color);\n}\n\n.code-block pre {\n  margin: 0;\n  white-space: pre-wrap;\n}\n\n.code-block code {\n  display: block;\n  color: var(--white-color);\n}\n\n/* Image Gallery */\n.image-gallery {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n  gap: 20px;\n  margin: 40px 0;\n}\n\n.gallery-item {\n  border-radius: 15px;\n  overflow: hidden;\n  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);\n  transition: transform 0.3s ease, box-shadow 0.3s ease;\n  position: relative;\n}\n\n.gallery-item:hover {\n  transform: translateY(-10px);\n  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);\n}\n\n.gallery-item img {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  transition: transform 0.5s ease;\n}\n\n.gallery-item:hover img {\n  transform: scale(1.05);\n}\n\n/* Footer */\n.footer {\n  background: rgba(3, 43, 68, 0.8);\n  padding: 50px 0 20px;\n  text-align: center;\n  position: relative;\n}\n\n.footer::before {\n  content: '';\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  height: 2px;\n  background: var(--gradient-color);\n}\n\n.footer-text {\n  margin-bottom: 20px;\n}\n\n/* Animations */\n@keyframes rotate {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n\n@keyframes float {\n  0% {\n    transform: translateY(0px);\n  }\n  50% {\n    transform: translateY(-20px);\n  }\n  100% {\n    transform: translateY(0px);\n  }\n}\n\n/* Responsive Styles */\n@media (max-width: 992px) {\n  .hero {\n    flex-direction: column;\n    text-align: center;\n    padding-top: 150px;\n  }\n  \n  .hero-content {\n    max-width: 100%;\n    margin-bottom: 50px;\n  }\n  \n  .hero-image {\n    position: relative;\n    width: 80%;\n    margin: 0 auto;\n  }\n}\n\n@media (max-width: 768px) {\n  .nav {\n    position: fixed;\n    top: 0;\n    right: -100%;\n    width: 80%;\n    height: 100vh;\n    background: rgba(3, 43, 68, 0.95);\n    backdrop-filter: blur(10px);\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    gap: 30px;\n    transition: right 0.5s ease;\n    z-index: 1000;\n  }\n  \n  .nav.active {\n    right: 0;\n  }\n  \n  .hamburger {\n    display: block;\n  }\n  \n  .hero-title {\n    font-size: 36px;\n  }\n  \n  .hero-subtitle {\n    font-size: 18px;\n  }\n  \n  article h2 {\n    font-size: 28px;\n  }\n  \n  article h3 {\n    font-size: 22px;\n  }\n}\n\n@media (max-width: 576px) {\n  .hero-title {\n    font-size: 30px;\n  }\n  \n  .hero-subtitle {\n    font-size: 16px;\n  }\n  \n  .article-container {\n    padding: 0 20px;\n  }\n  \n  article h2 {\n    font-size: 24px;\n  }\n  \n  article h3 {\n    font-size: 20px;\n  }\n}\n