.br {white-space: pre;}
5px
h5.h5 {display: none; }
table, th, td { border-collapse: collapse;}th{  text-align: center; background-color: #292828;}
.div0 {width: 40px; height=400px; background-color: #292828; font-size: 15px; padding: 0px; text-align: center; border-radius: 10px;  box-shadow:0px 5px 0px 0px #999;}  

.c01 {width: 100%;  background-color: #292828; font-size: 18px; color:  #edbb99  ; text-align: left;  padding:10px 10px 10px 20px;line-height: 30px;
border-radius: 20px;  box-shadow:0px 0px 100px 0px #999; }.c01 a {  color:tomato   ;font-weight:600;padding:15px;text-decoration: none;}

.c02 {width: 97%;  font-size: 18px;  text-align: left;  padding:5px 50px 5px 5px;line-height: 45px;
border-radius: 20px;  box-shadow:0px 0px 100px 0px #999; }.c02 a {  color:tomato   ;font-weight:600;padding:15px;text-decoration: none;}

.c0 {width: 97%;  background-color: #292828; font-size: 18px; color:  #edbb99  ; text-align: left;  padding:10px 10px 10px 10px;line-height: 30px;
border-radius: 20px;  box-shadow:0px 0px 10px 0px #999; }.c0 a {  color:tomato   ;font-weight:600;padding:15px;text-decoration: none;}

.c4 {width: 90%;  background-color: #292828; padding: 5px; text-align: center;border-radius: 20px;  box-shadow: 0px 10px 10px 0px #999;   margin: 4px 2px; opacity: 0.7; text-shadow: 1px 1px 2px blue,0 0 1em white, 0 0 0.2em blue; color: white; font:1em Georgia,serif;}

.navbar {  width: 100%;  overflow: auto; color:   #85c1e9  ;}.navbar a {   padding:12px;  color: white;font-weight:600;
        text-decoration: none;  font-size: 17px;} 

.navbar2 {  width: 100%;  overflow: auto;    }.navbar2 a {  color:    #aed6f1   ;font-weight:500;padding:25px;
        text-decoration: none;  font-size: 18px; } .active {  background-color: #04AA6D;} 

.c1 {width: 180px;overflow: auto;  background-color: #292828; line-height: 30px; 
;border-radius: 10px;  box-shadow:0px 5px 0px 0px #999; padding:5px; }
.active {  background-color: #04AA6D;}

.green {  width: 100%;     }.green a {color:green  ;font-weight:500; text-decoration: none;  font-size: 18px;}  
.red{  width: 100%;}.red a {color:red;font-weight:500; text-decoration: none;font-size: 18px;}
.sky{  width: 100%;}.sky a {color:  #6495ED   ;font-weight:500; text-decoration: none;font-size: 18px;} 
.tan{  width: 100%;}.tan a {color: tan   ;font-weight:500; text-decoration: none;font-size: 18px;}
.orchid{  width: 100%;}.orchid a {color:   #92a9ef   ;font-weight:500; text-decoration: none;font-size: 18px;}
.snow{  width: 100%;}.snow a {color:snow;font-weight:500; text-decoration: none;font-size: 18px;opacity: 0.8;}
.msblue{  width: 100%;}.msblue a {color:MediumSlateBlue;font-weight:500; text-decoration: none;font-size: 18px;}
.tomato{  width: 100%;}.tomato a {color: tomato ;font-weight:500; text-decoration: none;font-size: 18px;}

footer {  text-align: center;  padding: 10px;  background-color: black;  color: #000;}

.collapse > input[type="checkbox"] {  position: absolute;   left: -100vw;}
.collapse .content {  overflow-y: hidden;  height: 0;  transition: height 0.3s ease; }
.collapse > input[type="checkbox"]:checked ~ .content {  height: auto;  overflow: visible;}
.collapse { margin-bottom: 1em;}.collapse > input[type="checkbox"]:checked ~ .content {  padding: 10px;  border: 0;  border-top: 0;}
.collapse .handle {  margin: 0;  font-size: 1.125em;  line-height: 1.2em;}

.button {   background-color:green ;   border-radius: 15px; box-shadow: 0 5px #999; border-style: none;   box-sizing: border-box;
color: white;   cursor: pointer;   display: inline-block;font-family: "Haas Grot Text R Web", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 17px; font-weight: 500; height: 50px;list-style: none;   margin: 0;   outline: none;   padding: 0px 5px;
position: relative;  text-align: center;  text-decoration: none;  transition: color 100ms;  vertical-align: baseline;
user-select: none;   -webkit-user-select: none;   touch-action: manipulation; }
.button:hover,.button:focus {   opacity: 0.8; }

.button01 {   background-color:#2A4C89 ;   border-radius: 15px; box-shadow: 0 5px #999;  border-style: none;
  box-sizing: border-box;   color: #FFFFFF;   cursor: pointer;   display: inline-block;   font-family: "Haas Grot Text R Web", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 15px;   font-weight: 600;  height: 35px;list-style: none;  
  outline: none;   padding: 0px 5px;   position: relative;   text-align: center;   text-decoration: none;   transition: color 100ms;
  vertical-align: baseline;   user-select: none;   -webkit-user-select: none;   touch-action: manipulation; }
.button01:hover,.button01:focus {   opacity: 0.8; }

.buttonx2 {   background-color:#EA4C89 ;   border-radius: 10px; box-shadow: 0 5px #999;  border-style: none;
  box-sizing: border-box;   color: #FFFFFF;   cursor: pointer;   display: inline-block;   font-family: "Haas Grot Text R Web", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 15px;   font-weight: 500;   height: 25px; list-style: none;     outline: none;
  padding: 0px 5px;   position: relative;   text-align: center;   text-decoration: none;   transition: color 100ms;   vertical-align: baseline;
  user-select: none;  -webkit-user-select: none;   touch-action: manipulation; }
.buttonx:hover,.button0:focus {   opacity: 0.8; }

.buttonx {   background-color:#EA4C89 ;   border-radius: 10px; box-shadow: 0 5px #999;  border-style: none;
  box-sizing: border-box;   color: #FFFFFF;   cursor: pointer;   display: inline-block;   font-family: "Haas Grot Text R Web", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 15px;   font-weight: 500;   height: 25px; list-style: none;     outline: none;
  padding: 0px 5px;   position: relative;   text-align: center;   text-decoration: none;   transition: color 100ms;   vertical-align: baseline;
  user-select: none;  -webkit-user-select: none;   touch-action: manipulation;color:snow; }
.buttonx:hover,.button0:focus {   opacity: 0.8; }.buttonx::link {  color: snow;} .buttonx::a {color:snow;font-weight:500; text-decoration: none;font-size: 18px;opacity: 0.8;}

html {  position: relative;  top: 0;  left: 0;  max-width: 100vw;  min-height: 200vh;  margin: 0px;  padding: 0px;  border: 0px;}
body{background-color:#181a1b}
img{vertical-align:middle;border-style:none}
nav {  position: fixed;  top: 0;  left: 0;  height: 3.5em;  width: 2000px;  background-color: #181a1b; transition: background-color 0.4s ease-out;}
nav.scroll {  background-color:rgb(0 86 157);  color: #eef;}

.container {   position: relative;  width: 100%;  overflow: hidden;  padding-top: 56.25%; /* 16:9 Aspect Ratio */  }
.responsive-iframe {  position: absolute; top: 0;  left: 0;  bottom: 0;  right: 0;  width: 100%;  height: 100%;  border: none;}
.mobile-container { max-width: 480px;margin: auto;height: 500px; color: red;border-radius: 10px;}

.icon-bar a {display: block;text-align: center;padding:10px;transition: all 0.3s ease;color: white;font-size: 22px;}
.icon-bar a:hover {background-color: #000;} .active {background-color: #04AA6D;} 


     /* Animated shapes */
        .shapes-container {
            position: fixed;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: -1;
        }

        .shape {
            position: absolute;
            opacity: 0.1;
        }

        .shape-circle {
            width: 300px;
            height: 300px;
            border: 2px solid #FF5E00;
            border-radius: 50%;
            top: 10%;
            left: 10%;
            animation: float-rotate 20s ease-in-out infinite;
        }

        .shape-triangle {
            width: 0;
            height: 0;
            border-left: 100px solid transparent;
            border-right: 100px solid transparent;
            border-bottom: 173px solid rgba(0, 178, 255, 0.2);
            top: 60%;
            right: 15%;
            animation: float-rotate 25s ease-in-out infinite reverse;
        }

        .shape-square {
            width: 150px;
            height: 150px;
            border: 2px solid #00B2FF;
            transform: rotate(45deg);
            bottom: 20%;
            left: 20%;
            animation: float-rotate 22s ease-in-out infinite;
        }

        @keyframes float-rotate {
            0%, 100% {
                transform: translateY(0) rotate(0deg) scale(1);
            }
            25% {
                transform: translateY(-30px) rotate(90deg) scale(1.1);
            }
            50% {
                transform: translateY(20px) rotate(180deg) scale(0.9);
            }
            75% {
                transform: translateY(-10px) rotate(270deg) scale(1.05);
            }
        }

        /* Gradient overlay */
        .gradient-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle at 20% 50%, rgba(255, 94, 0, 0.15) 0%, transparent 50%),
                        radial-gradient(circle at 80% 50%, rgba(0, 178, 255, 0.15) 0%, transparent 50%),
                        radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.8) 0%, transparent 100%);
            z-index: -1;
            animation: gradient-shift 10s ease-in-out infinite;
        }

        @keyframes gradient-shift {
            0%, 100% { transform: scale(1) rotate(0deg); }
            50% { transform: scale(1.1) rotate(180deg); }
        }

        @keyframes grid-move {
            0% { transform: translate(0, 0); }
            100% { transform: translate(80px, 80px); }
        }

        /* Floating particles */
        .particle {
            position: fixed;
            pointer-events: none;
            opacity: 0;
            z-index: 1;
        }

        .particle::before {
            content: '';
            position: absolute;
            width: 2px;
            height: 2px;
            background: #FF5E00;
            box-shadow: 0 0 10px #FF5E00, 0 0 20px #FF5E00;
            animation: float-up 15s linear infinite;
        }

        @keyframes float-up {
            0% {
                transform: translateY(100vh) rotate(0deg);
                opacity: 0;
            }
            10% {
                opacity: 1;
            }
            90% {
                opacity: 1;
            }
            100% {
                transform: translateY(-100vh) rotate(720deg);
                opacity: 0;
            }
        }

 
        /* About Section */
        .about {
            padding: 100px 20px;
            max-width: 1200px;
            margin: 0 auto;
        }

        .about-content {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 60px;
            align-items: center;
        }

        .about-text h2 {
            font-family: 'Orbitron', monospace;
            font-size: 2.5rem;
            margin-bottom: 30px;
            background: linear-gradient(45deg, #FF5E00, #00B2FF);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .about-text p {
            line-height: 1.8;
            opacity: 0.8;
            margin-bottom: 20px;
            font-size: 1.1rem;
        }

        .about-visual {
            position: relative;
            height: 400px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .about-graphic {
            width: 300px;
            height: 300px;
            position: relative;
            animation: float 6s ease-in-out infinite;
        }

        .about-graphic::before,
        .about-graphic::after {
            content: '';
            position: absolute;
            border: 2px solid #FF5E00;
            border-radius: 10px;
            box-shadow: 0 0 30px rgba(255, 94, 0, 0.5);
        }

        .about-graphic::before {
            width: 100%;
            height: 100%;
            animation: rotate 20s linear infinite;
        }

        .about-graphic::after {
            width: 80%;
            height: 80%;
            top: 10%;
            left: 10%;
            border-color: #00B2FF;
            animation: rotate 15s linear infinite reverse;
            box-shadow: 0 0 30px rgba(0, 178, 255, 0.5);
        }

        /* Alternative graphic for second row */
        .about-graphic-alt {
            width: 300px;
            height: 300px;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            animation: float 6s ease-in-out infinite;
        }

        .hexagon {
            position: absolute;
            width: 100px;
            height: 100px;
            background: linear-gradient(45deg, #FF5E00, #00B2FF);
            opacity: 0.3;
            clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
        }

        .hexagon:nth-child(1) {
            width: 150px;
            height: 150px;
            animation: hexagon-rotate 8s linear infinite;
        }

        .hexagon:nth-child(2) {
            width: 100px;
            height: 100px;
            animation: hexagon-rotate 12s linear infinite reverse;
            opacity: 0.5;
        }

        .hexagon:nth-child(3) {
            width: 200px;
            height: 200px;
            animation: hexagon-rotate 15s linear infinite;
            opacity: 0.2;
        }

        @keyframes hexagon-rotate {
            0% { transform: rotate(0deg) scale(1); }
            50% { transform: rotate(180deg) scale(1.1); }
            100% { transform: rotate(360deg) scale(1); }
        }


    

        /* Scanlines effect */
        .scanlines {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            background: linear-gradient(
                transparent 50%,
                rgba(255, 94, 0, 0.01) 50%
            );
            background-size: 100% 4px;
            animation: scanlines 8s linear infinite;
            z-index: 2;
            pointer-events: none;
        }

        @keyframes scanlines {
            0% { transform: translateY(0); }
            100% { transform: translateY(10px); }
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }

        @keyframes float {
            0%, 100% { 
                transform: translateY(0);
                box-shadow: 0 0 30px rgba(255, 94, 0, 0.5);
            }
            50% { 
                transform: translateY(-10px);
                box-shadow: 0 10px 40px rgba(255, 94, 0, 0.7);
            }
        }

        @keyframes rotate {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }