/* Base */
* { box-sizing: border-box; }
body { margin: 0; font-family: Arial, sans-serif; }
/* Header */
.header {color: #fff;padding: 10px 16px;display: flex;gap: 10px;justify-content: center;margin-top:5px;width:100%;}
.nav-toggle{display: none;}
/* Brand + Toggle Row */
.nav-controls {display: flex;align-items: center;justify-content: space-between;}
/* Brand */
.brand {font-weight: bold;}
/* Toggle Button */
.nav-toggle 
{background: #7495AB;color:white;border: none;
cursor: pointer;padding :32px 22px;border-radius: 35px;}
.nav-toggle .bar {
width: 24px;height: 2px;background: #ffffff;
color:white;display: block;position: relative;}
.nav-toggle .bar::before,.nav-toggle .bar::after {
content: '';
position: absolute;width: 100%;height: 100%;
background: #7495AB;color:white;left: 0;}
.nav-toggle .bar::before{background:white;}
.nav-toggle .bar::before { top: -6px; }
.nav-toggle .bar::after { top: 6px; }
.nav-toggle .bar::after { top: 7px; background:white;} 
.nav-toggle[aria-expanded="true"] .bar {transform: rotate(45deg);}
.nav-toggle[aria-expanded="true"] .bar::before {transform: rotate(90deg);top: 0;}
.nav-toggle[aria-expanded="true"] .bar::after {transform: scale(0);}
/* Navigation Menu */
.nav-bar ul {list-style: none;padding: 0;margin: 0;display: flex;gap: 5px;} 
.nav-bar a {color: white;background: #7495AB;text-decoration: none;
padding: 10px 24px;border-top-left-radius: 10px;border-top-right-radius: 10px;}
.nav-bar a:hover {background:#FFF7E8 !important;color:black;}
#primary-nav a.active {color: #333;
background: #FFF7E8; /* White or whatever to highlight */
font-weight: bold;font-size:20px;}

@media screen and (max-width:369px){
.english-main{flex-direction:column;justify-content: center;margin:auto; ;}
.image-english{margin:auto;}
.english-main .text{margin: auto;max-width: 80%;margin-bottom: 15px;}.text-desc-eng{max-width: 80%;}}

@media screen and (max-width:1080px){
.header{justify-content: flex-start;position:fixed;top:69px;}
.nav-bar ul {flex-direction: column;gap: 0;background:#7495AB;max-height: 0;
overflow: hidden;transition: max-height 0.3s ease;}
.nav-bar.open ul {max-height: 500px; z-index: 999999999;}
.nav-bar a {display: block;padding: 10px 16px; z-index: 999999999;}
.nav-toggle{display:block;  z-index: 999999999;}
.nav-bar ul{width:33%; z-index: 999999999;}
.nav-bar {position: absolute; /* or fixed */
top: 100%; /* below the toggle */
left: 0;
width:46%;background: #7495AB;max-height: 0;
overflow: visible;transition: max-height 0.3s ease;z-index: 9999;}
.nav-bar.open ul {max-height: 300px;overflow-y: auto; z-index: 999999999;}
.logo-image{width:90%;}
}
.nav-bar{position: static;}
/* Active link style */
.nav-bar a.active {
color: #ffffff;background: #000000; /* Blue background */padding: 10px 25px;
border-top-left-radius: 10px;border-top-right-radius: 10px;}
/* Optional hover effect */.nav-bar a:hover {background: #fff;color: #000000;}
.nav-toggle .bar { transform-origin: center;}
.nav-toggle:focus {outline: none;}
/* Active link style */
.nav-bar a.active {
color: #ffffff;background: #000000; /* Blue background */
padding: 10px 25px;border-top-left-radius: 10px;border-top-right-radius: 10px;}
/* Optional hover effect */
.nav-bar a:hover {background: #fff;color: #000000;}
/* Container */
.xr-container {  overflow: hidden;margin: 0 auto;background: #f9f9f9;}
/* Base image styles */
.xr-container .image {display: block;}
/* Individual image positioning */
.img-bg {top: 594px;left: 0;width: 800px;height: 244px;}  
.img-top {top: 0;left: 0;width: 800px;height: 600px;}  
.img-overlay {top: 140px;left: 451px;width: 333px;height: 419px;}
.img-header {width:100%;height:100px;}
.img-logo {top: 26px;left: 28px;width: 269px;height: 41px;}
/* Caption styling */
.caption {display: block;font-family: Palatino Linotype, Palatino, serif;
font-size: 16px;font-weight: bold;font-style: italic;
text-decoration: none;color: #4D5C6F;letter-spacing: 0.0em;}
/* Scope to second section only */
.xr-section-two {width: 800px;margin: 0 auto;}
.xr_ap{position:static;}
/* Common img style */
.xr-section-two .xr_ap {display: block;}
/* Hide elements with .hidden */
.xr-section-two .hidden {display: none;}
/* Positioning for navigation images */
.xr-section-two .nav-img:nth-of-type(1) {
top: 136px;left: 27px;
width: 70px;height: 25px;}
/* Header image */
.xr-section-two .header-img {
top: 175px;left: 6px;
width: 679px;height: 113px;}
/* Title */.xr-section-two .title-text {top: 670px;left: 211px;font-weight: bold;}
/* Subtitle */
.xr-section-two .subtitle-text {
top: 712px;left: 15px;width: 670px;
font-size: 15px;text-align: center;}
/* Content image */
.xr-section-two .content-img 
{top: 330px;left: 160px;
width: 501px;height: 322px;}
/* Slider container */
.xr-section-two .slider-container
{top: 343px;left: 210px;
width: 401px;height: 308px;}
a::visited{color:black; background: white;font-weight:bold; }
.display-none{display:none;}
.main-content-wrapper{background:url('0.jpg');height:auto;overflow-x:hidden;padding-bottom:110px}
.caption {display: block;}
.header-banner{
background-image: url('3.png');
background-repeat: no-repeat;
background-size: cover;
display: flex;padding-top:36px;justify-content: space-between;padding:18px 39px;padding-top:36px;}
.banner-group{display: flex;gap:9px;overflow:hidden;}
.header-banner-text{position: relative;top:-25px;}
#primary-nav a{font-size:18px;}
.patent-items{padding:20px 0px;}
.chai-content-wrap hr{width:102% !important;}
@media (max-width:450px){.nav-bar ul{width:68%;}}
@media (max-width:768px) and (min-width:450px){.nav-bar ul{width:46% !important;}.navbar{width:25%;}.nav-toggle{padding :23px 13px;}}
@media (max-width:768px){.banner-group{display:none;}.Contanti-content-wrapper{flex-direction: column;padding:0px;width:90%;margin: auto;}.Contanti-content-wrapper .right-content-wrapper{margin:auto;}}

/* Base */
* { box-sizing: border-box; }
body { margin: 0; font-family: Arial, sans-serif; }

/* Header */
.header {
  color: #fff;
  padding: 10px 16px;
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 5px;
  width: 100%;
  position: relative;
  z-index: 1000; /* Added to ensure header stays on top */
  background: unset; /* Added solid background */
}

.nav-toggle { 
  display: none; 
  background: #7495AB; 
  z-index: 1001; /* Higher than header */
}

/* Brand + Toggle Row */
.nav-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Toggle Button - Fixed background */
.nav-toggle {
  background: #7495AB;
  color: white;
  border: none;
  cursor: pointer;
  padding: 32px 22px;
  border-radius: 35px;
  position: relative;
  z-index: 1001; /* Ensure it stays on top */
}

.nav-toggle .bar {
  width: 24px;
  height: 2px;
  background: #ffffff;
  color: white;
  display: block;
  position: relative;
}

.nav-toggle .bar::before,
.nav-toggle .bar::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: white; /* Changed to white to ensure visibility */
  left: 0;
}

.nav-toggle .bar::before { top: -6px; }
.nav-toggle .bar::after { top: 6px; }

.nav-toggle[aria-expanded="true"] .bar {
  transform: rotate(45deg);
  background: transparent; /* Make center bar transparent when active */
}

.nav-toggle[aria-expanded="true"] .bar::before {
  transform: rotate(90deg);
  top: 0;
}

.nav-toggle[aria-expanded="true"] .bar::after {
  transform: scale(0);
}

/* Navigation Menu */
.nav-bar ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 5px;
}

.nav-bar a {
  color: white;
  background: #7495AB;
  text-decoration: none;
  padding: 10px 24px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.nav-bar a:hover {
  background: #FFF7E8 !important;
  color: black;
}

#primary-nav a.active {
  color: #333;
  background: #FFF7E8;
  font-weight: bold;
  font-size: 20px;
}

/* Media queries for responsive design */
@media screen and (max-width: 1080px) {
  .header {
    justify-content: flex-start;
    position: fixed;
    top: 69px;
    background: unset; /* Ensure solid background */
  }
  
  .nav-bar ul {
    flex-direction: column;
    gap: 0;
    background: #7495AB;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    position: relative;
    z-index: 999;
  }
  
  .nav-bar.open ul {
    max-height: 500px;
    z-index: 999;
    width:30%;
  }
  
  .nav-bar a {
    display: block;
    padding: 10px 16px;
    z-index: 999;
  }
  
  .nav-toggle {
    display: block;
    z-index: 1001; /* Higher than nav-bar */
    background: #7495AB; /* Ensure solid background */
  }
  
  .nav-bar ul {
    width: 33%;
  }
  
  .nav-bar {
    position: absolute;
    top: 100%;
    left: 0;
    width: 59%;
    background: #7495AB;
    max-height: 0;
    overflow: visible;
    transition: max-height 0.3s ease;
    z-index: 999;
  }
  
  .nav-bar.open ul {
    max-height: 300px;
    overflow-y: auto;
    z-index: 999;
  }
  
  .logo-image {
    width: 90%;
  }
}

/* Active link style */
.nav-bar a.active {
  color: #ffffff;
  background: #000000;
  padding: 10px 25px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

/* Optional hover effect */
.nav-bar a:hover {
  background: #fff;
  color: #000000;
}

.nav-toggle .bar {
  transform-origin: center;
}

.nav-toggle:focus {
  outline: none;
}

@media (max-width:450px){  .nav-bar.open ul {width:70%;}}