/* ===== HEADER ===== */

         /* ===== TOP HEADER ===== */
         .top-header{
            /*background:linear-gradient(#5f84ab,#3f658f);*/ /*Original*/
            /*background: linear-gradient(135deg, #06b6d4, #0e7490); /*final-1*/
            background: linear-gradient(135deg, #fb7185, #be123c); /*final-2*/            
            box-shadow:0 1px 0 rgba(255,255,255,.15) inset;
            width:100%; 
         }

         /* ===== HEADER INNER ===== */
         .header-inner{
            align-items:center;
            box-sizing:border-box;
            display:flex;
            justify-content:space-between;
            margin:0 auto;
            max-width:970px;
            padding:10px 10px;
         }

         /* ===== BRAND ===== */
         .brand{
            color:#ffffff;
            font-size:22px;
            font-weight:800;
         }

         /* ===== NAV ===== */
         .nav{
            align-items:center;
            display:flex;
            gap:22px;
         }
         .nav-item{
            align-items:center;
            display:flex;
         }
         .nav a,
         .dropdown button{
            background:none;
            border:none;
            color:#ffffff;
            cursor:pointer;
            display:inline-flex;
            font-size:15px;
            font-weight:600;
            line-height:1;
            text-decoration:none;
            vertical-align:middle;
         }
         .nav a.active{
            border-bottom:2px solid rgba(255,255,255,.8);
            padding-bottom:4px;
         }

         .nav a:focus-visible,
         .dropdown button:focus-visible,
         .nav-toggle:focus-visible{
            border-radius:10px;
            box-shadow:0 0 0 3px rgba(255,255,255,.92), 0 0 0 6px rgba(15,23,42,.28);
            outline:none;
         }
         
         /* ===== DROPDOWN ===== */
         .dropdown{ position:relative; }
         .dropdown:hover .dropdown-menu{
            display:block;
         }
         .dropdown button{
            align-items: center;
            appearance: none;
            -webkit-appearance: none;
            background: none;
            border: none;
            color: #ffffff;
            cursor: pointer;
            display: inline-flex;
            font-family: inherit;
            font-size: 15px;
            font-weight: 600;
            line-height: 1;
            margin: 0;
            padding: 0;
            padding-bottom: 1px;
            text-decoration:none;
            vertical-align: middle;
         }

         /* ===== DROPDOWN MENU ===== */
         .dropdown-menu{
            background:#ffffff;
            border-radius:10px;
            box-shadow:0 14px 30px rgba(0,0,0,.15);
            display:none;
            left:0;
            min-width:220px;
            position:absolute;
            top:100%;
            z-index:2000;
         }
         .dropdown-menu a{
            color:#0f172a;
            display:block;
            font-size:14px;
            font-weight:600;
            padding:12px 14px;
            text-decoration:none;
         }
         .dropdown-menu a:hover{
            background:#f1f5ff;
         }

         /* Mobile menu button: hidden on desktop so existing layout remains unchanged */
         .nav-toggle{
            display:none;
         }

         @media (max-width: 767.98px){
            /* Position the mobile dropdown relative to the existing header container */
            .header-inner{
               position:relative;
            }

            /* Prevent brand text from pushing the header wider than the viewport */
            .brand{
               flex:1;
               min-width:0;
               padding-right:12px;
               word-break:break-word;
            }

            /* Show the hamburger only on mobile */
            .nav-toggle{
               align-items:center;
               background:none;
               border:1px solid transparent;
               border-radius:10px;
               cursor:pointer;
               display:inline-flex;
               flex-direction:column;
               gap:5px;
               justify-content:center;
               padding:8px;
               position:relative;
               z-index:2100;
            }

            /* Draw the three lines of the hamburger icon */
            .nav-toggle span{
               background:#ffffff;
               border-radius:999px;
               display:block;
               height:2px;
               transition:transform .2s ease, opacity .2s ease;
               width:22px;
            }

            /* Hide the existing horizontal nav on mobile until toggled open */
            .nav{
               display:none;
            }

            /* Show the existing links as a right-aligned vertical dropdown */
            .nav.mobile-nav-open{
               align-items:flex-start;
               background:#be123c;
               border-radius:12px;
               box-shadow:0 14px 30px rgba(0,0,0,.18);
               display:flex;
               flex-direction:column;
               gap:0;
               max-width:min(280px, calc(100vw - 20px));
               overflow:hidden;
               position:absolute;
               right:10px;
               top:calc(100% + 8px);
               width:max-content;
               z-index:2000;
            }

            /* Keep each item full-width for easier tapping */
            .nav.mobile-nav-open a,
            .nav.mobile-nav-open .nav-item{
               box-sizing:border-box;
               justify-content:flex-start;
               width:100%;
            }

            .nav.mobile-nav-open a{
               line-height:1.3;
               padding:12px 16px;
               white-space:normal;
            }

            .nav.mobile-nav-open .nav-btn{
               width:100%;
            }

            /* Remove the desktop active underline treatment in stacked layout */
            .nav.mobile-nav-open a.active{
               border-bottom:none;
               padding-bottom:12px;
            }

            /* Animate the hamburger into an X while the menu is open */
            .nav-toggle.is-open span:nth-child(1){
               transform:translateY(7px) rotate(45deg);
            }

            .nav-toggle.is-open span:nth-child(2){
               opacity:0;
            }

            .nav-toggle.is-open span:nth-child(3){
               transform:translateY(-7px) rotate(-45deg);
            }
         }