* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        @font-face {font-family: 'Aatventure';        src: url('../../fonts/Aatventure.woff')         format('woff')}
        @font-face {font-family: 'Oswald Regular';    src: url('../../fonts/Oswald-Regular.woff2')    format('woff2')}
        @font-face {font-family: 'Roboto Bold';       src: url('../../fonts/Roboto-Bold.woff')        format('woff');  font-weight: 700; font-display: swap;}
        @font-face {font-family: 'Roboto Light';      src: url('../../fonts/Roboto-Light.woff')       format('woff');  font-weight: 300; font-display: swap;}
        @font-face {font-family: 'simple-line-icons'; src: url('../../fonts/Simple-Line-Icons.woff2') format('woff2'); font-weight: normal; font-style: normal;}
        @font-face {font-family: 'icomoon';           src: url('../../fonts/icomoon.woff')            format('woff');  font-weight: normal; font-style: normal;}

        body {
            width: 100vw;
            width: 100svw;
            height: 100vh;
            height: 100svh;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            text-rendering: optimizeLegibility;
            background-color: #090B14;
            padding-top: 80px;
            line-height: 1.5;
        }

        .navbar {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            background-color: #02111A;
            backdrop-filter: blur(10px);
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
            z-index: 1000;
            height: 70px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 2rem;
            font-family: 'Oswald Regular', sans-serif;
            font-size: 20px;
            font-weight: 400;
        }

        .navbar-left {
            display: flex;
            align-items: center;
            gap: 15px;
            color: white;
        }

        .logo {
            width: 45px;
            height: 45px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            font-weight: bold;
        }

        .company-name {
            font-family: 'Aatventure';
            font-size: 24px;
            font-weight: 400;
            letter-spacing: 0.9px;
        }

        .navbar-center {
            display: flex;
            align-items: center;
            gap: 25px;
        }

        .nav-icon {
            position: relative;
            width: 46px;
            height: 110px;
            margin-top: 70px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            color: white;
            opacity: 1 !important;}

        .nav-icon:active {
            transform: translateY(0);
        }

        .navbar-right {
            display: flex;
            align-items: center;
            gap: 20px;
        }

        .navbar-megadropdown {
            display: flex;
            align-items: center;
            gap: 0px;
        }

        .search-container {
            position: relative;
        }

        .search-input {
            width: 300px;
            height: 40px;
            padding: 0 45px 0 15px;
            border: none;
            border-radius: 20px;
            background: rgba(255, 255, 255, 0.15);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.3);
            color: white;
            font-size: 14px;
            transition: all 0.3s ease;
            outline: none;
        }

        .search-input::placeholder {
            color: rgba(255, 255, 255, 0.7);
        }

        .search-input:focus {
            background: rgba(255, 255, 255, 0.25);
            border-color: rgba(255, 255, 255, 0.5);
            box-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
        }

        .search-button {
            position: absolute;
            right: 5px;
            top: 50%;
            transform: translateY(-50%);
            width: 30px;
            height: 30px;
            border: none;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.2);
            color: white;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
        }

        .search-button:hover {
            background: rgba(255, 255, 255, 0.3);
            transform: translateY(-50%) scale(1.1);
        }

        .user-info {
            display: flex;
            align-items: center;
            gap: 12px;
            color: white;
        }

        .username {
            font-family:"Oswald Regular";
            font-size: 18px;
            font-weight: 500;
            text-transform: uppercase;
        }

        .avatar {
            width: 45px;
            height: 45px;
            border-radius: 50%;
            background: #000000;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            font-size: 16px;
            color: white;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
            object-fit: cover;
        }

        .avatar:hover {
            transform: scale(1.05);
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
        }

        /* Tooltip styles */
        .tooltip {
            position: absolute;
            top: 42px;
            left: 50%;
            transform: translateX(-50%);
            color: white;
            padding: 8px 20px;
            border-radius: 6px;
            font-family: "Roboto Light";
            font-size: 12px;
            white-space: nowrap;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease;
            z-index: 1001;
            pointer-events: none;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
            min-width: max-content; 
        }
   
        .nav-icon:hover .tooltip {
            opacity: 1;
            visibility: visible;
            transform: translateX(-50%) translateY(-5px);
        }

        .pointer {cursor: pointer;}

         @media (min-width: 768px) {
             .navbar-left {min-width: 390px;} /* no jumping */
         }
        
        /* Mobile Responsive */
        @media (max-width: 768px) {
            .navbar {padding: 0 1rem;}
            .navbar-center {display: none;}
            .search-input {width: 200px;}
            .company-name {font-size: 26px;}
        }
        @media (max-width: 480px) {
            .search-input {width: 150px;}
            .username {display: none;}
        }

        /* ==========================================================================
           basics
           ========================================================================== */
           a              {text-decoration: none; cursor: pointer;}
           ol, ul         {list-style: none;}
           .hidden        {display: none;}
           .center        {text-align: center;}
           .text-muted    {color: #FFFFFF; opacity: 0.6;}
           img            {vertical-align: middle; border-style: none;}
           svg:not(:root) {overflow: hidden; vertical-align: middle;}
           #maincontainer {top: 0px !important;}
           .sepia         {filter: sepia(1);}
           .flexcenter    {display: flex;  flex-direction: column;  align-items: center; text-align: center; width: 100%;}
           @media (max-width: 769px) {.notonmobile  {display: none !important;}}
           @media (min-width: 769px) {.notondesktop {display: none !important;}}

        /* ==========================================================================
           mobile menu
           ========================================================================== */
           .cd-main-content {z-index: 999999;}
           .cd-side-nav {font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", "Arial", "Noto Sans", "sans-serif";}
           .cd-side-nav {position: fixed !important; z-index: 999999; left: 0; top: 69px; width: 100%; height: calc(100vh - 69px); padding-bottom: 1.25em;
                         background-color: #0e1723; box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1), 0 8px 24px rgba(0, 0, 0, 0.15);
                         -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; visibility: hidden; opacity: 0;
                         overflow-x: hidden; overflow-y: auto; font-size: 20px; background-color: rgb(39, 44, 53);
                         background: linear-gradient(to bottom, #272c35 0%, #272c35 50%, #1a1e25 100%); background-image: url(../../img/backgrounds/techmenubgnext.jpg);
                         background-repeat: no-repeat; background-position: 0px 0px; background-size: cover; transition: 0.2s;}
           .cd-side-nav {transition: none !important; transform: none !important; animation: none !important;}
           /* trigger */
           .cd-nav-trigger {position: fixed; right: 9px; top: 9px; display: block; width: 71px; height: 50px; border: 0;
                            background-color: rgba(0, 0, 0, 00); border-radius: 6px; cursor: pointer; z-index: 9999999; transform: scale(1.4);}
           .cd-nav-trigger span {position: absolute; height: 3px; width: 24px; cursor: pointer; top: calc(50% - 2px); right: 22px; transition: background 0.2s; background: #ffffff;}
           .cd-nav-trigger span::before, .cd-nav-trigger span::after {content: ""; right: 0; -webkit-transform-origin: 0 50%; 
            transform-origin: 0 50%; transition: -webkit-transform 0.2s; transition: transform 0.2s; transition: transform 0.2s, -webkit-transform 0.2s;}
           .cd-nav-trigger span, .cd-nav-trigger span::before, .cd-nav-trigger span::after {position: absolute; height: 3px; width: 24px; cursor: pointer; background: hsl(0, 0%, 100%);}
           .cd-nav-trigger span::before {top: -6px;}
           .cd-nav-trigger span::after {top: 6px;}
           /* animation */
           .cd-side-nav--is-visible {opacity: 1 !important; visibility: visible !important; display: block !important;}
           .cd-nav-trigger--nav-is-visible span::before {transform: translateX(4px) translateY(-3px) rotate(45deg);}
           .cd-nav-trigger--nav-is-visible span::after  {transform: translateX(4px) translateY(2px) rotate(-45deg);}
           .cd-nav-trigger--nav-is-visible span {background: rgba(0, 0, 0, 0);}
            /* label */
           .cd-side__label {margin-top: -4px; padding: 1.25em 1.25em 0.375em;}
           .cd-side__label span {text-transform: uppercase; font-weight: bold; font-size: 0.65em; color: rgba(255, 255, 255, 0.6); letter-spacing: 0.1em;}
           .cd-side__item, .cd-nav__item {font-size: 0.875em; position: relative;}
           .cd-side__item > a, .cd-nav__item > a {display: flex; align-items: center;}
           .cd-side__item a, .cd-nav__item a {position: relative; display: block; padding: 0.75em 1.25em; color: hsl(0, 0%, 100%);}
           .cd-side__item, .cd-nav__item {border-width: 0px 0px 1px 0px; border-style: solid; border-image: linear-gradient(to right, #3a4354, rgba(0, 0, 0, 0)) 1 1%;}
           .cd-side__item > a::before {content: ""; height: 16px; width: 16px; margin-right: 14px; opacity: 0.5;}
            /* icon */
           .hasicon {background-repeat: no-repeat;}
           .hasicon a {padding-left: 50px;}
           [type=button]:not(:disabled), [type=reset]:not(:disabled), [type=submit]:not(:disabled), button:not(:disabled) {cursor: pointer; */}
           /* submenu shop items */
           .cd-side__sub-list, .cd-nav__sub-list {background-color: rgba(0,0,0,0.3); display: none;}
           .cd-side__item--expanded .cd-side__sub-list,.cd-side__item--expanded .cd-nav__sub-list {display: block;}
           .cd-side__item--has-children>a::after,.cd-nav__item--has-children>a::after {display: none}

        /* ==========================================================================
           mobilemenu modal
           ========================================================================== */
           .mobilemenubackground-aatventure {background: url(../../img/backgrounds/techmenubgnext.jpg); background-size: 100vw;}
           #sloganx              {margin-top: 30px; width: 100vw;}
           .autographx           {width: 100vw; font-family: "Roboto Bold"; font-size: 18px; color: rgba(255, 255, 255, 0.8); text-align: center;}
           .autographxx          {width: 100vw;font-family: "Roboto Light"; font-size: 14px; color: rgba(255, 255, 255, 0.8); text-align: center; border-bottom: 100px solid transparent;}
           .mobileheaderavatar   {display:flex; align-items: center;}
           .mobileheaderusername {float: left; font-family: "Roboto Light"; font-size: 14px; color: #FFFFFF; text-transform: uppercase;}
           .avatar-xs            {margin-left: 46px; margin-right: 20px; height: 40px; width: 40px; max-width: 40px !important; border-radius: 50%;}

        /* ==========================================================================
           aatventure spinning logo
           ========================================================================== */
           .logo img {width:45px; height: 45px;}
           .aatsspinner {margin-left:-4px;}
           .aatsspinnerreverse {
                margin-left: -45px;
                animation-name: spinlogoreverse;
                animation-duration: 10000ms;
                animation-iteration-count: infinite;
                animation-timing-function: linear;
            }
            @keyframes spinlogo {from {transform:rotate3d(0,0,1,0)} to {transform: rotate3d(0,60,0,360deg)};}
            @keyframes spinlogoreverse {from {transform:rotate3d(0,0,1,0)} to {transform: rotate3d(0,0,60,-360deg)};}

        /* ==========================================================================
           icons
           ========================================================================== */
           .nonewstoday {background-image: url('../../img/navicons/nonewstoday.jpg') !important; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); background-size: contain;}
           .nav-icon    {background-repeat: no-repeat; background-size: contain;}
           .iconhome    {background-size: 80px; background-image: url('../../img/navicons/home.png');       background-position: -16px 2px;}
           .iconfolder  {background-size: 80px; background-image: url('../../img/navicons/categories.png'); background-position: -16px -2px;}
           .icontags    {background-size: 63px; background-image: url('../../img/navicons/tags.png');       background-position: -6px 0px;}
           .iconnews    {background-size: 74px; background-image: url('../../img/navicons/news.png');       background-position: -14px 1px;}
           .iconwebshop {background-size: 83px; background-image: url('../../img/navicons/shopshop.png');   background-position: -18px -2px;}
           .iconradio   {background-size: 82px; background-image: url('../../img/navicons/radio.png');      background-position: -15px -2px;}
           .icontools   {background-size: 59px; background-image: url('../../img/navicons/tools.png');      background-position: -5px 6px;}
           .icongames   {background-size: 59px; background-image: url('../../img/navicons/games.png');      background-position: -5px 4px;}
           .iconarchive {background-size: 64px; background-image: url('../../img/navicons/archive.png');    background-position: -9px 4px;}
            @media (max-width: 768px) {
              .nonewstoday {background-size: 220% 100% !important;}
              .iconhome    {margin-left: 20px; background-position: -16px 9px  !important;}
              .iconfolder  {margin-left: 20px; background-position: -16px 5px  !important;}
              .icontags    {margin-left: 20px; background-position: -6px 7px   !important;}
              .iconnews    {margin-left: 20px; background-position: -14px 10px !important;}
              .iconwebshop {margin-left: 20px; background-position: -18px 6px  !important;}
              .iconradio   {margin-left: 20px; background-position: -15px 6px  !important;}
              .icontools   {margin-left: 20px; background-position: -5px 13px  !important;}
              .icongames   {margin-left: 20px; background-position: -5px 10px  !important;}
              .iconarchive {margin-left: 20px; background-position: -9px 10px  !important;}
            }

        /* ==========================================================================
           megadropdown
           ========================================================================== */
           .megadropdown  {position: fixed; top: 0px; right: 230px; width: 450px; min-height: 70px; overflow: hidden; z-index: 9999999; cursor: pointer;}
           .megadropdown-content {display: none; position: fixed; right: 0px; top: 70px; width: 590px; border-left: 10px solid#1e2329;
                                  height: 100vh; z-index: 9999; background-color: #121722; overflow-x: hidden; overflow-y:auto;
                                  background-image: url('../img/backgrounds/filterbackground.jpg'); background-repeat: no-repeat; background-size: cover; background-position:-20px;}
           .megadropdown-show {display: block !important;}
           /* show dropdown based on url slug */ 
           .megadropdown:hover .megacontent-wiretest {display: block !important;}

        /* ==========================================================================
           make it rain
           ========================================================================== */
           #bgvideo {position: absolute; top:0px; width:100%; height: 100vh; pointer-events: none; z-index: 1; opacity: 0.3; object-fit: fill; }
           .rain {position: absolute; left: 0; width: 100%; height: 100%; z-index: 2;}
           .rain.back-row {display: none; z-index: 1; bottom: 60px; opacity: 0.5;}
           .drop {position: absolute; bottom: 100%; width: 15px; height: 120px; pointer-events: none; animation: drop 0.5s linear infinite;}
           .stem {width: 1px; height: 60%; margin-left: 7px; background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.25)); animation: stem 0.5s linear infinite;}
           .splat {width: 15px; height: 10px; border-top: 2px dotted rgba(255, 255, 255, 0.5); border-radius: 50%;
                   opacity: 1; transform: scale(0); animation: splat 0.5s linear infinite; display: none;}
           @keyframes drop {0% {transform: translateY(0vh);} 75% {transform: translateY(90vh);} 100% {transform: translateY(90vh);}}
           @keyframes stem {0% {opacity: 1;} 65%  {opacity: 1;} 75%  {opacity: 0;} 100% {opacity: 0;}}

        /* ==========================================================================
           rotating circle
           ========================================================================== */
           .loading {text-align: center;}
           .rotating::before {position: absolute; width: 100%; height: 100%; content: " "; border-radius: 50%; box-shadow: 0 0 20px 12px rgba(13, 81, 156, 0.35); pointer-events: none;}
           .rotating {position: absolute; color: #000000; width: 114px; height: 114px; border-radius: 50%; animation: rotate_animation 4s ease-in-out infinite alternate, pulse_animation 3s ease-out infinite;
                      z-index: 1; margin-top: -2px; margin-left: -2px;}
           .rotating::after {position: absolute; top: 3px; left: 3px; width: calc(40vh - 6px); height: calc(40vh - 6px); background-color: currentColor; content: " ";
	                         border-radius: 50%; animation: pulse_animation 6s ease-out infinite; animation-delay: .2s;}
           @keyframes rotate_animation {0% { transform: rotate(0deg);} 100% {transform: rotate(600deg);}}
           @keyframes pulse_animation {0%, 40% { box-shadow: 0 0 5px 0px rgba(107, 163, 220, 0.2); } 100% { box-shadow: 0 0 5px 80px rgba(0, 0, 255, 0); }}
           @media (min-width: 1024px) {.rotating {top: -60px; right: 19px; z-index:99}}        

        /* ==========================================================================
           rotating filter selected
           ========================================================================== */
           .rotatingselected {position: absolute; color: #000000; width: 180px; height: 180px; border-radius: 50%;  z-index: 99; margin-top: -4px; margin-left: -4px; cursor: pointer;}
           .rotatingselected::before {position: absolute; width: 100%; height: 100%; content: " "; border-radius: 50%; border-radius: 20% !important; 
                                      box-shadow: 0 0 20px 12px rgba(13, 81, 156, 0.35); pointer-events: none;}
           .filtergrid .rotatingselected {position: absolute; color: #000000; width: 150px !important; height: 150px !important;}
           .rotatingselected:hover {animation: rotate_animation 4s ease-in-out infinite alternate, pulse_animation 3s ease-out infinite;}
           .rotatingselected::after {position: absolute; top: 3px; left: 3px; width: calc(40vh - 6px); height: calc(40vh - 6px); 
                                     background-color: currentColor; content: " "; border-radius: 50%; animation: pulse_animation 6s ease-out infinite; animation-delay: .2s;}
            @media screen and (max-width: 768px) {.rotatingselected {width: 115px !important; height: 115px !important;}}
            .rounded-circle {border-radius: 50% !important;}
            .higherzindex {z-index: 10 !important;}

        /* ==========================================================================
           kenburns effect
           ========================================================================== */
           #KenBurns {position: relative; margin-top: 0px !important; background: transparent; display: flex; align-items: flex-end;
                      height: 220px; margin-bottom: -150px; overflow: hidden;}

        /* ==========================================================================
            horizontal scroller
            ========================================================================== */

            .horimg {text-align: center; width: 40px; height: 40px; border-radius: 50%; object-fit: contain; box-shadow: 10px 6px 5px #000000;}

            @media (max-width: 768px) {
                .horizontalcontent {display: grid !important; grid-gap: 64px; grid-template-columns: 1px repeat(var(--total), 0) 1px; overflow-x: scroll; scroll-snap-type: x proximity;}
                .horizontalcontent:before {position: absolute; content: ''; top: 0; transform: translateX(100%); pointer-events: none; height: 100px; z-index: 1; animation: slide 8s infinite;
                 background: linear-gradient(to right, rgb(0 0 0 / 0%) 0%, rgb(243 243 243 / 10%) 50%, rgba(28, 86, 132, 0) 99%, rgba(125, 125, 125, 0) 100%);
                }
            }

            @media (max-width: 1030px) {
                #horizontalscroller {position: fixed; left: 0px; top: 70px; display: inline-block !important; width: 100% !important; overflow-y: hidden; 
                                     -webkit-overflow-scrolling: touch; z-index: 5 !important; height: 86px; background-color: #000000; 
                                     background-image: url(../img/navicons/bloggradient.jpg); background-size: cover; }
                #horizontalscroller .horizontalcontent .nav-item {margin-left: -80px;}
                #horizontalscroller .horizontalcontent > li:nth-child(2) .horimg {box-shadow: none !important; margin-left: 20px; margin-top: 4px;}
                .emptylistitem {margin-left: -70px;}
            }

        /* ==========================================================================
            languages
            ========================================================================== */        
            @media (max-width: 768px) {
              #languagescroller {position: fixed; left: 0px; bottom: 63px; width: 100% !important; overflow-y: hidden; -webkit-overflow-scrolling: touch; z-index: 5 !important; height: 94px; background-color: #0f1724;}
              #languagescroller .horizontalcontent {height: 100px; border-top: 1px solid #030609; overflow: hidden !important; grid-gap: 78px !important;}
              #languagescroller .hortxt {font-family: arial;}    
              .hortxt {width: 68px; text-align: center; font-size: 12px !important; margin-top: 6px;}
              .langimg {text-align: center; width: 50px; height: 50px; border-radius: 50%; object-fit: contain;}
              .max18 {max-width: 18% !important;}
              .nav-item {display: flex !important; scroll-snap-align: center; padding-top: 4px; padding-bottom: 0px;}
            }
            .lang-en {display: none;}
            .lang-fr {display: none;}
            .lang-de {display: none;}
            .lang-ch {display: none;}
            .nav-link {display: block; padding: .5rem 1rem;}     
            
        /* ==========================================================================
            footermenu options
            ========================================================================== */
            .options {position: fixed; bottom: 0px; width: 100vw; background-color: #142031; color: #ffffff; font-family: "Rajdhani Regular";
                      text-align: center; padding: 5px; border-top: 1px solid #000000; z-index: 50; height:65px;}
            .optbtn {width: 22% !important; border: 0; color: white; cursor: pointer; text-align: center; height: 4rem;
                     background-color: transparent; background-position: 50% 50%; background-repeat: no-repeat; background-size: auto 50%;
                     -webkit-tap-highlight-color: transparent; outline: none;}
            .btn__icon  {height: 50%; width: 100%;}
            .option svg {display: flex !important; vertical-align: middle;}
            #btn-clock .btn__icon       {margin-top: 0px;}
            #btn-map .btn__icon         {margin-top: -19px; margin-left: -8px; overflow: visible;}
            #btn-language svg           {margin-left: 6px; margin-top: -4px;}
            #btn-userinfo .btn__icon    {margin-top: -19px; height: 23%; overflow: visible;}
            #btn-browserinfo .btn__icon {margin-top: -8px;}