/*
Theme Name: hono									
*/
@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&family=Noto+Sans+TC:wght@100..900&family=Noto+Sans+SC:wght@100..900&display=swap');

/* Document
 * ========================================================================== */

/** 回覆文章發表日期，請刪除以下**/

.news-date{display:none;}

/**回覆文章發表日期，請刪除以上**/



/**
 * Add border box sizing in all browsers (opinionated).
 */

*,
::before,
::after {
  box-sizing: border-box;
}

/**
 * 1. Add text decoration inheritance in all browsers (opinionated).
 * 2. Add vertical alignment inheritance in all browsers (opinionated).
 */

::before,
::after {
  text-decoration: inherit; /* 1 */
  vertical-align: inherit; /* 2 */
}

/**
 * 1. Use the default cursor in all browsers (opinionated).
 * 2. Change the line height in all browsers (opinionated).
 * 3. Use a 4-space tab width in all browsers (opinionated).
 * 4. Remove the grey highlight on links in iOS (opinionated).
 * 5. Prevent adjustments of font size after orientation changes in
 *    IE on Windows Phone and in iOS.
 * 6. Breaks words to prevent overflow in all browsers (opinionated).
 */

html {
	margin-top: 0 !important;
  cursor: default; /* 1 */
  line-height: 1.5; /* 2 */
  -moz-tab-size: 4; /* 3 */
  tab-size: 4; /* 3 */
  -webkit-tap-highlight-color: transparent /* 4 */;
  -ms-text-size-adjust: 100%; /* 5 */
  -webkit-text-size-adjust: 100%; /* 5 */
  word-break: break-word; /* 6 */
}

/* Sections
 * ========================================================================== */

/**
 * Remove the margin in all browsers (opinionated).
 */


body {
  margin: 0;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Edge, Firefox, and Safari.
 */

h1,h2,h3,h4,h5,h6,p,ul,li {
  margin:0;
	font-weight:reset;
}


ul{
	list-style:none;
	    padding: 0;
}

/* Grouping content
 * ========================================================================== */

/**
 * Remove the margin on nested lists in Chrome, Edge, IE, and Safari.
 */

dl dl,
dl ol,
dl ul,
ol dl,
ul dl {
  margin: 0;
}

/**
 * Remove the margin on nested lists in Edge 18- and IE.
 */

ol ol,
ol ul,
ul ol,
ul ul {
  margin: 0;
}

/**
 * 1. Add the correct sizing in Firefox.
 * 2. Show the overflow in Edge 18- and IE.
 */

hr {
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * Add the correct display in IE.
 */

main {
  display: block;
}

/**
 * Remove the list style on navigation lists in all browsers (opinionated).
 */

nav ol,
nav ul {
  list-style: none;
  padding: 0;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
 * ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */

a {
	    text-decoration: none;
	cursor:pointer;
}

/**
 * Add the correct text decoration in Edge 18-, IE, and Safari.
 */

abbr[title] {
  text-decoration: underline;
  text-decoration: underline dotted;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}

/* Embedded content
 * ========================================================================== */

/*
 * Change the alignment on media elements in all browsers (opinionated).
 */

audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}

/**
 * Add the correct display in IE 9-.
 */

audio,
video {
  display: inline-block;
}

/**
 * Add the correct display in iOS 4-7.
 */

audio:not([controls]) {
  display: none;
  height: 0;
}

/**
 * Remove the border on iframes in all browsers (opinionated).
 */

iframe {
  border-style: none;
}

/**
 * Remove the border on images within links in IE 10-.
 */

img {
  border-style: none;
width:100%;
    height: auto;
}

/**
 * Change the fill color to match the text color in all browsers (opinionated).
 */

svg:not([fill]) {
  fill: currentColor;
}

/**
 * Hide the overflow in IE.
 */

svg:not(:root) {
  overflow: hidden;
}

/* Tabular data
 * ========================================================================== */

/**
 * Collapse border spacing in all browsers (opinionated).
 */

table {
  border-collapse: collapse;
}

/* Forms
 * ========================================================================== */

/**
 * Remove the margin on controls in Safari.
 */

button,
input,
select {
  margin: 0;
	
}

/**
 * 1. Show the overflow in IE.
 * 2. Remove the inheritance of text transform in Edge 18-, Firefox, and IE.
 */

button {
  overflow: visible; /* 1 */
  text-transform: none; /* 2 */
	border: none;
    background-color: unset;
    text-align: center;
    margin: 0;
}

/**
 * Correct the inability to style buttons in iOS and Safari.
 */

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

/**
 * 1. Change the inconsistent appearance in all browsers (opinionated).
 * 2. Correct the padding in Firefox.
 */

fieldset {
  border: 1px solid #a0a0a0; /* 1 */
  padding: 0.35em 0.75em 0.625em; /* 2 */
}

/**
 * Show the overflow in Edge 18- and IE.
 */

input {
  overflow: visible;
}

/**
 * 1. Correct the text wrapping in Edge 18- and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 */

legend {
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  white-space: normal; /* 1 */
}

/**
 * 1. Add the correct display in Edge 18- and IE.
 * 2. Add the correct vertical alignment in Chrome, Edge, and Firefox.
 */

progress {
  display: inline-block; /* 1 */
  vertical-align: baseline; /* 2 */
}

/**
 * Remove the inheritance of text transform in Firefox.
 */

select {
  text-transform: none;
}

/**
 * 1. Remove the margin in Firefox and Safari.
 * 2. Remove the default vertical scrollbar in IE.
 * 3. Change the resize direction in all browsers (opinionated).
 */

textarea {
  margin: 0; /* 1 */
  overflow: auto; /* 2 */
  resize: vertical; /* 3 */
}

/**
 * Remove the padding in IE 10-.
 */

[type="checkbox"],
[type="radio"] {
  padding: 0;
}

/**
 * 1. Correct the odd appearance in Chrome, Edge, and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Safari.
 */

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/**
 * Correct the text style of placeholders in Chrome, Edge, and Safari.
 */

::-webkit-input-placeholder {
  color: inherit;
  opacity: 0.54;
}

/**
 * Remove the inner padding in Chrome, Edge, and Safari on macOS.
 */

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style upload buttons in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/**
 * Remove the inner border and padding of focus outlines in Firefox.
 */

::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus outline styles unset by the previous rule in Firefox.
 */

:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Remove the additional :invalid styles in Firefox.
 */

:-moz-ui-invalid {
  box-shadow: none;
}

/* Interactive
 * ========================================================================== */

/*
 * Add the correct display in Edge 18- and IE.
 */

details {
  display: block;
}

/*
 * Add the correct styles in Edge 18-, IE, and Safari.
 */

dialog {
  background-color: white;
  border: solid;
  color: black;
  display: block;
  height: -moz-fit-content;
  height: -webkit-fit-content;
  height: fit-content;
  left: 0;
  margin: auto;
  padding: 1em;
  position: absolute;
  right: 0;
  width: -moz-fit-content;
  width: -webkit-fit-content;
  width: fit-content;
}

dialog:not([open]) {
  display: none;
}

/*
 * Add the correct display in all browsers.
 */

summary {
  display: list-item;
}

/* Scripting
 * ========================================================================== */

/**
 * Add the correct display in IE 9-.
 */

canvas {
  display: inline-block;
}

/**
 * Add the correct display in IE.
 */

template {
  display: none;
}

/* User interaction
 * ========================================================================== */

/*
 * 1. Remove the tapping delay in IE 10.
 * 2. Remove the tapping delay on clickable elements
      in all browsers (opinionated).
 */

a,
area,
button,
input,
label,
select,
summary,
textarea,
[tabindex] {
  -ms-touch-action: manipulation; /* 1 */
  touch-action: manipulation; /* 2 */
}

/**
 * Add the correct display in IE 10-.
 */

[hidden] {
  display: none;
}

/* Accessibility
 * ========================================================================== */

/**
 * Change the cursor on busy elements in all browsers (opinionated).
 */

[aria-busy="true"] {
  cursor: progress;
}

/*
 * Change the cursor on control elements in all browsers (opinionated).
 */

[aria-controls] {
  cursor: pointer;
}

/*
 * Change the cursor on disabled, not-editable, or otherwise
 * inoperable elements in all browsers (opinionated).
 */

[aria-disabled="true"],
[disabled] {
  cursor: not-allowed;
}

/*
 * Change the display on visually hidden accessible elements
 * in all browsers (opinionated).
 */

[aria-hidden="false"][hidden] {
  display: initial;
}

[aria-hidden="false"][hidden]:not(:focus) {
  clip: rect(0, 0, 0, 0);
  position: absolute;
}

a {
  text-decoration: none;
	color:#324a87;
}


body{
    font-family: 'Noto Sans TC', 'Noto Sans SC', sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
	    position: relative;
	color:#324a87;
}
/* 簡體中文頁面優先使用 SC */
html[lang="zh-CN"] body,
html[lang="zh-Hans"] body {
    font-family: 'Noto Sans SC', 'Noto Sans TC', sans-serif;
}


/**************************************************************
FOOTER
**************************************************************/


        .footer {
            background: linear-gradient(135deg, #324a87 0%, #7795BB 100%);
            padding: 60px 0 40px;
            color: white;
			position: relative;
    z-index: 999;
        }
        
        .footer-container {
    padding: 0 70px;
    display: flex;
    justify-content: space-between;
    position: relative;
    margin: 0 auto;
			flex-wrap: wrap;
        }
        
        .footer-logo {
            display: flex;
            flex-direction: column;
            align-items: flex-start;

        }
        
        .logo-icon {
            width: 160px;
            height: auto;
          margin-right: 70px;
    margin-bottom: 40px;
        }
        

.footer-links li a {
    color: white;
    font-size: 14px;
    letter-spacing: 2px;
    margin-bottom: 9px;
    display: inline-block;
}

        .logo-text {
            color: white;
        }
        
        .logo-text h2 {
            font-size: 28px;
            font-weight: bold;
            margin-bottom: 8px;
            letter-spacing: 1px;
        }
        
        .logo-text p {
            font-size: 16px;
            opacity: 0.9;
            letter-spacing: 0.5px;
        }
        
        .footer-section h3 {
            font-size: 18px;
            font-weight: 500;
            margin-bottom: 25px;
            opacity: 0.9;
        }
        
        .footer-section ul {
            list-style: none;
        }

        .footer-section ul li {
            margin-bottom: 15px;
        }

.footer-links {
    display: flex;
    justify-content: space-between;
    width: 620px;
flex-wrap:wrap;}
        
        .footer-section ul li a {
            color: white;
            text-decoration: none;
            font-size: 15px;
            opacity: 0.8;
            transition: opacity 0.3s ease;
        }
        
        .footer-section ul li a:hover {
            opacity: 1;
        }
        
        .footer-buttons {
            display: flex;
            flex-direction: column;
            gap: 15px;
            align-items: flex-start;
        }
        
        .footer-btn {
display: inline-flex;
    align-items: center;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.7) 100%);
    color: #324a87;
    padding: 10px 20px;
    border-radius: 25px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.3s ease;
    min-width: 230px;
    justify-content: space-between;
        }
        
        .footer-btn:hover {
            background: linear-gradient(135deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0.9) 100%);
            transform: translateY(-1px);
        }
        
        .footer-btn::after {
            content: '→';
            width: 24px;
            height: 24px;
            background:#324a87;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: bold;
            font-size: 12px;
        }
        
        .social-icons {
            display: flex;
            gap: 15px;
            margin-top: 20px;
        }
        
        .social-icon {
            width: 40px;
            height: 40px;
            background: rgba(255,255,255,0.9);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            text-decoration: none;
            font-size: 18px;
            transition: background 0.3s ease;
        }

        .social-icon:first-child img{
    width: 12px;
}

        .social-icon:nth-child(2) img{
    width: 17px;
}
        .social-icon:nth-child(3) img{
    width: 22px;
}
        
        .social-icon:hover {
            background: rgba(255,255,255,0.3);
        }
.footer-bottom {
    margin-top: 150px;
    padding-top: 30px;
    /* border-top: 1px solid rgba(255, 255, 255, 0.2); */
    display: flex
;
    justify-content: flex-end;
    gap: 30px;
    font-size: 13px;
    opacity: 0.7;
	width: 100%;}


/**************************************************************
HEADER
**************************************************************/

   /* Header 基本樣式 */
        .site-header {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 1000;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 70px;
            transition: all 0.3s ease;
            background: transparent;
            color: white;
			flex-wrap:wrap;
        }

        /* 向上滾動時的樣式 */
        .site-header.scrolled-up {
            background: #FAFEFF;
            color: #2D4889;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            transform: translateY(0);
        }

        /* 向下滾動時隱藏 */
        .site-header.scrolled-down {
            transform: translateY(-100%);
        }

      
        .navbar-brand img {
            height: 80px;
            transition: all 0.3s ease;
			padding-right: 30px;
			    margin-bottom: 20px;
        }

        /* Logo 切換 */
        .logo-white {
            display: block;
        }

        .logo-color {
            display: none;
        }

        .site-header.scrolled-up .logo-white {
            display: none;
        }

        .site-header.scrolled-up .logo-color {
            display: block;
        }

        .site-header.at-bottom .logo-white {
            display: block;
        }

        .site-header.at-bottom .logo-color {
            display: none;
        }

        /* 選單樣式 */
        .menu {
            display: flex;
            list-style: none;
            gap: 30px;
			padding: 0 30px 0 0px;
			 white-space: nowrap;
			    flex-wrap: wrap;
        }

        .menu a {
            text-decoration: none;
            color: inherit;
            transition: all 0.3s ease;
        }

        .menu a:hover {
            opacity: 0.8;
        }

        /* 漢堡菜單按鈕 */
        .menu-toggle {
            display: none;
            flex-direction: column;
            cursor: pointer;
            padding: 10px;
            z-index: 1001;
            transition: transform 0.3s ease;
        }

        .menu-toggle span {
            width: 25px;
            height: 3px;
            background: white;
            margin: 3px 0;
            transition: all 0.3s ease;
            transform-origin: center;
        }

        /* 漢堡菜單動畫 */
        .menu-toggle.active span:nth-child(1) {
            transform: rotate(45deg) translate(6px, 6px);
        }

        .menu-toggle.active span:nth-child(2) {
            opacity: 0;
        }

        .menu-toggle.active span:nth-child(3) {
            transform: rotate(-45deg) translate(6px, -6px);
        }


/* 子選單樣式 */
.menu > li {
    position: relative;
}

.submenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    min-width: 200px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    z-index: 1000;
    border-radius: 4px;
}

.menu > li:hover .submenu {
    display: block;
}

.submenu li {
    list-style: none;
}

.submenu li a {
    display: block;
    padding: 10px 20px;
    text-decoration: none;
    transition: background 0.3s;
    white-space: nowrap;
	color: #324b87;
}

.submenu li a:hover {
    background: rgba(255, 255, 255, 0.1)
}






        /* 手機版樣式 */
        @media (max-width: 768px) {
			
			
			    .submenu {
        position: static;
        display: none;
        box-shadow: none;
        background: rgba(255,255,255,0.05);
        padding: 0;
    }
			
.has-submenu{
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}
			
.has-submenu .m-label{
    font-size: 18px;
    font-weight: 200;
			}
			
			.menu{
				        padding: 0;
			}
    
    .menu > li.has-submenu > a::after {
        content: ' ＋';
        font-size: 0.8em;
		text-align: center;
    }
    
    .menu > li.has-submenu.submenu-open > a::after {
        content: ' ー';
    }
    
    .menu > li.submenu-open .submenu {
        display: block;
    }
    
    .submenu li a {
        font-size: 0.9em;
		text-align:center;
		color:white;
    }
			
			.menu-wrapper {
    display: flex;
    align-items: center;
}
			
			.navbar-brand img {
				height: 50px;}
			
			
			.footer-container
			{padding:0 20px;}

			.footer-container{
			flex-direction: column;	
			gap: 40px
			}
			
			.footer-section {
    margin-top: 20px;
}
			
			.footer-links {
    display: flex;
    justify-content: space-between;
    width: unset;
    flex-wrap: wrap;
    flex-direction: column;
}
			
            .site-header {
                padding: 15px 20px;
        flex-direction: row;
        align-items: center;
        margin-top: unset;
    }
			
			
				

            .menu {
                position: fixed;
                top: 0;
                left: -100%;
                width: 100%;
                height: 100vh;
background:transparent;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                gap: 40px;
                transition: left 0.3s ease;
                z-index: 1000;
            }

			  .menu::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(135deg, #324a87 0%, #7795BB 100%);
        opacity: 0;
        transition: opacity 0.3s ease;
        z-index: -1;
    }
    
    .menu.active::before {
        opacity: 1;
    }
			
.site-header.scrolled-up .menu-toggle span {
				background: #324a87;}
			
            .menu.active {
                left: 0;
				color: white;
            }
			  .menu.active {
                left: 0;
				color: white;
            }
			.menu-toggle.active span{
				background:white !important;
				
			}
            .menu li {
                opacity: 0;
                transform: translateY(30px);
                transition: all 0.3s ease;
            }

            .menu.active li {
                opacity: 1;
                transform: translateY(0);
            }

            .menu.active li:nth-child(1) { transition-delay: 0.1s; }
            .menu.active li:nth-child(2) { transition-delay: 0.2s; }
            .menu.active li:nth-child(3) { transition-delay: 0.3s; }
            .menu.active li:nth-child(4) { transition-delay: 0.4s; }
            .menu.active li:nth-child(5) { transition-delay: 0.5s; }
            .menu.active li:nth-child(6) { transition-delay: 0.6s; }
            .menu.active li:nth-child(7) { transition-delay: 0.7s; }

            .menu a {
                font-size: 20px;
                font-weight: 300;
                padding: 15px 30px;
                border-radius: 5px;
                transition: all 0.3s ease;
            }

            .menu a:hover {
                background: rgba(255, 255, 255, 0.1);
                transform: translateY(-2px);
            }

            .menu-toggle {
                display: flex;
            }

            /* 防止背景滾動 */
            body.menu-open {
                overflow: hidden;
            }
        }

        /* 超小屏幕優化 */
        @media (max-width: 480px) {
            .site-header {
                padding: 15px 15px;
            }

            .navbar-brand a {
                font-size: 20px;
            }

            .logo-text {
                font-size: 20px;
            }

            .menu a {
                font-size: 18px;
            }
        }

        /* 平板橫屏優化 */
        @media (max-width: 1200px) and (min-width: 769px) {
				  .site-header{
		      padding: 15px 25px;
		  margin-top: 20px;
	  }
			
            .menu {
                gap: 20px;
				margin-bottom:20px;
            }

            .menu a {
                font-size: 15px;
            }
        }


/** css wave
 * 
    

 .wave path {
            animation: wave-flow 3s ease-in-out infinite;
        }

        .wave path:nth-child(2) {
            opacity: 0.25;
            stroke-width: 1.5;
            animation-delay: 0.5s;
        }

        .wave path:nth-child(3) {
            opacity: 0.15;
            stroke-width: 1;
            animation-delay: 1s;
        }
        
@keyframes wave-flow {
    0%, 100% {
        transform: translateY(0px) translateX(0);
    }
    50% {
        transform: translateY(-10px) translateX(20px);
    }
}

   


**/

   .wave {
position: absolute;
    top: 10px;
    left: -20%;
    width: 140%;
    height: 100px;
    pointer-events: none;
    transform: translateX(-50%);
        }

        .wave svg {
            position: absolute;
            width: 100%;
            height: 100%;
        }


        .wave path:nth-child(2) {
            opacity: 0.4;
            stroke-width: 1.5;
        }

        .wave path:nth-child(3) {
            opacity: 0.3;
            stroke-width: 1;
        }

        .wave path {
            fill: none;
            stroke: #b8c9e0;
            stroke-width: 2;
            opacity: 0.5;
        }

  /* 語言切換器樣式 */
        .language-switcher {
            position: relative;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: #ffffff;
            border: 1px solid #e0e0e0;
            border-radius: 8px;
            padding: 8px 12px;
            cursor: pointer;
            transition: all 0.3s ease;
			
        }

        .language-switcher:hover {
            border-color: #007bff;
            box-shadow: 0 2px 8px rgba(0, 123, 255, 0.15);
        }

        .language-switcher-current {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 14px;
            font-weight: 500;
            color: #333;
        }

        .language-icon {
            width: 20px;
        }

        .language-arrow {
            width: 12px;
            height: 12px;
            fill: #666;
            transition: transform 0.3s ease;
        }

        .language-switcher.active .language-arrow {
            transform: rotate(180deg);
        }

        /* 下拉選單 */
        .language-dropdown {
            position: absolute;
            top: calc(100% + 8px);
            left: 0;
            background: white;
            border: 1px solid #e0e0e0;
            border-radius: 8px;
            box-shadow: 0 4px 16px rgba(0,0,0,0.1);
            min-width: 160px;
            opacity: 0;
            visibility: hidden;
            transform: translateY(-10px);
            transition: all 0.3s ease;
            z-index: 1000;
        }

        .language-switcher.active .language-dropdown {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }

        .language-option {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px 16px;
            font-size: 14px;
            color: #333;
            cursor: pointer;
            transition: background 0.2s ease;
            text-decoration: none;
        }

        .language-option:first-child {
            border-radius: 8px 8px 0 0;
        }

        .language-option:last-child {
            border-radius: 0 0 8px 8px;
        }

        .language-option:hover {
            background: #f8f9fa;
        }

        .language-option.active {
background: #f4f9ff;
    color: #5974a4;
    font-weight: 500;
        }

        .language-flag {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
        }