@font-face {font-family: Antoniocrol; src: url(https://gbcusa.net/fonts/ANTONIO-REGULAR.TTF) format('truetype');}
@font-face {font-family: SegoeUL;src: url(/fonts/SEGOEUI.TTF);}
@font-face {font-family: Pyidaungsu; src: url('https://gbcusa.net/fonts/Pyidaungsu-2.5.3_Regular.ttf');font-weight: normal;}
@font-face {font-family: Inter;src: url(/fonts/inter/Inter_18pt-Regular.ttf);}
@font-face {font-family: Merriweather;src: url(/fonts/Merriweather_24pt-Black.ttf);}
@font-face {font-family: Bebasneue;src: url(/fonts/BEBASNEUE-REGULAR.TTF);}
@font-face {font-family: Montserrat; src: url(/fonts/Montserrat-VariableFont_wght.ttf);}
@font-face {font-family: Poppins; src: url(/fonts/Poppins-Regular.ttf);}
@font-face {font-family: Poppins-Bold; src: url(/fonts/Poppins-SemiBold.ttf);}
@font-face {font-family: Oswald; src: url(/fonts/Oswald/Oswald-SemiBold.ttf);}
@font-face {font-family: Inter-Light;src: url(/fonts/inter/Inter_18pt-Light.ttf);}
@font-face {font-family: DM;src: url(/fonts/DMSerifDisplay-Regular.ttf);}
@font-face {font-family: Gospel;src: url(/fonts/OpenSans-Light.ttf);}
@font-face {font-family: DropCap1;src: url(/fonts/TypographerCaps.ttf);}
@font-face {font-family: DropCap2;src: url(/fonts/GoudyInitialen.ttf);}
@font-face {font-family: DropCap3;src: url(/fonts/CarrickCaps.ttf);}

* {margin: 0;padding: 0;box-sizing: border-box;}
html, body {
  margin: 0;padding: 0;height: 100%;box-sizing: border-box;
  font-family: 'Inter-Light', sans-serif;font-size: 18px;color1: #555555; min-height: 100vh;
}

/* SUN & MOON icons */
.icon-container {position: fixed;top: 60px;right: 30px; display: flex; gap: 20px;z-index: 2000;}
.icon {width: 30px;height: 30px; stroke: white; fill: none; stroke-width: 2; cursor: pointer; transition: all 0.3s ease;z-index: 2000;}
.icon:hover {transform: scale(1.2);}
.icon-sun:hover {stroke: #ffd700; /* gold */}
.icon-moon:hover {stroke: #a0a0ff; /* cool pale blue */}


p {margin-bottom: 1em;line-height1: 1.6;}


.navbar {
  display: flex;justify-content: space-between; align-items: center;padding: 0 0px; margin:0 0;
  position: fixed;top: 40px;height:78px;width: 100%;z-index: 1000;
  background-color:#fff; color:#005174;transition: background-color 0.3s ease; color: #000;
}
/*========= Do not delete below =============>
.1navbar.scrolled {background-color: #fff;
      box-shadow: 0 3px 100px rgba(0, 0, 0, 0.2);
      position: fixed;top: 0px;
}
.1navbar.scrolled a { color: #000; }
.1navbar.scrolled .magnify{color: #000;}


.logo-group {display: flex;}
.logo {padding-left:20px;height: 50px;}

.magnify{color: #000;}
.nav-menu {display: flex;gap: 20px;margin-right: 140px;list-style: none; }
.nav-menu a {color:#333;text-decoration: none;font-family:Oswald;font-size:0.9em;}
.nav-menu ul {display: flex;gap: 20px;list-style: none;margin: 0;padding-top: 10px;}

.menu-toggle {display: none;font-size: 24px;cursor: pointer;}

.text-grid {display: grid; grid-template-columns: repeat(4, 1fr);gap: 20px;padding: 20px;}
.text-box {background-color: #34B7E7;color: white;padding: 20px;text-align1: center;border-radius: 8px;font-weight1: bold;}

footer.footer-grid {
  display: grid;grid-template-columns: repeat(5, 1fr);gap: 20px;background-color: #000;color: white;
  font-size: .7em;padding: 20px 0 100px 100px;width: 100%;max-width: 100%;box-sizing: border-box;
}
.footer-box h2, .footer-box h3 {margin: 0 0 10px; color: #34B7E7;}
.footer-box p, .footer-box a {color: #ccc;line-height: 1.5;}
.footer-box a {display: block;text-decoration: none; margin: 5px 0; transition: color 0.2s;}
.footer-box a:hover {color: white;}


.bold-title{font-family:Merriweather;font-size:60px;weight:700;}
.bold-heading{font-family:Merriweather;font-size:50px;weight:700;}
.main-container{width: 100%;margin: 0 auto;}
.content-container{width: 1000px;margin: 0 auto; padding:30px;}


.container1 {display: flex;justify-content: space-between; gap: 20px;}

.left-box {padding-top: 20px; }
.right-box {flex: 1; padding-top: 20px;}

.width30 { width: 30%; }
.width40 { width: 40%; }
.width50 { width: 50%; }
.width60 { width: 60%; }
.width70 { width: 70%; }

.container {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

.box {background: #fff;width: 300px;transition: transform 0.2s, box-shadow 0.2s;line-height:1.5em;}
.box h3:hover {color: #BF5B16;}
.box img {width: 97%;}
.box h3 {margin1: 10px 0;padding-top: 15px;color: #333;text-decoration: none;}
.box a {text-decoration: none; color: inherit;}
.box a:hover {color: #BF5B16;}
.box p {padding-top: 5px; color: #555;font-size: 0.9em;}
.box1 p:hover {color: #BF5B16;}
.menu-close {display: none;}
blockquote {font-family:times; margin-left: 2rem;margin-right: 2rem;padding: 1rem;border-left1: 4px solid #ccc;font-style: italic;color: #333;}

.animated-line {
  border: none;
  height: 4px;
  background: linear-gradient(90deg, #ff6b6b, #feca57, #1dd1a1, #54a0ff);
  background-size: 300% 100%;
  animation: slide 3s linear infinite;
  border-radius: 2px;
  width: 100%;
  margin: 30px auto;
}

@keyframes slide {
  0% { background-position: 0% 0; }
  100% { background-position: 100% 0; }
}





@media (max-width: 768px) {
    .navbar {display: flex;align-items: center;justify-content: space-between; 
      width: 100%; position: relative;top: 0;background: white;
      z-index: 2000;transition: background-color 0.3s, color 0.3s; margin:0;padding:0;
      height:78px;width: 100%;z-index: 1000;
    }
    .search-container{display:none;}
    .logo-group {display: flex;}
    .logo {padding-left:20px;height: 30px;}
    
    .menu-toggle {display: block;font-size: 24px; background: none;padding-right:20px; border: none; cursor: pointer;color: #000;z-index: 500;}
    
    .nav-menu {  visibility: hidden; position: fixed;top: 0;
          width: 100%;height: 70vh; background-color: #777; flex-direction: column;align-items: stretch; transform: translateX(-100%);transition: transform 0.3s ease;}
    .nav-menu.active { opacity: 1;visibility: visible; transform: translateX(0);z-index: 1500; }
    .navbar .logo-group .logo {padding:0px;margin:0; height:84px; width:190px;}
    
    .navbar-content {display: flex;width:100%;}         
    .navbar a { color: inherit; text-decoration: none; }
    .navbar .logo-group {display: flex;}
    .navbar .scrolled {background-color1: #005174!important;  position: fixed;top:20px;padding-top:0; height:40px!important; padding-bottom:0;}
    .navbar.scrolled .menu-toggle {  background-color1: #005174; color: #000;margin-right:5px;gap:0;}
    .navbar.scrolled .logo-group img {padding-top:0px;margin-top:-20px;height:70px; width:170px;}
    
    
    .nav-menu ul {list-style: none;margin-top: 60px;padding: 0;display: flex;flex-direction: column;align-items: stretch;}
    .nav-menu ul li:first-child {border-top: 1px solid rgba(255, 255, 255, 0.3);}
    .nav-menu ul li {
      width: 100%; display: block;border1:solid 1px red;padding-top:10px;
      vertical-align1: top;position1: relative;top1: 15px;-webkit-tap-highlight-color: transparent;
    }
    .nav-menu ul li + li {border-top: 1px solid rgba(255, 255, 255, 0.3);}
    .nav-menu ul li a {display: block;color: #fff;text-decoration: none;}
    .nav-menu li a {display: block;color: #fff;text-decoration: none;padding-left: 30px;}
    .menu-close { display: block;position: absolute; top: 20px; right: 20px; background: none; border: none; font-size: 24px; color: #fff; cursor: pointer;}

    .text-grid {grid-template-columns: 1fr;}
      .bold-title{padding-left:5px;font-family:Merriweather;font-size:40px;}
      .bold-heading{padding-left:5px;font-family:Merriweather;font-size:30px;}
      .main-container{width: 100%;max-width: 100%;}
      .content-container{width: 100%;max-width: 100%; padding-left:15px;}
      .container {flex-direction: column;}
      .left-box, .right-box {width: 100%;}
      .width30, .width40,.width50{}
    .content-container .container  .box {background: #fff;width: 100%;}
    .content-container .container .box img {width: 102%;}
      .box h3 {color: #333;text-decoration: none;}
      .box a {text-decoration: none;color: inherit;}
      .box a:hover {color: #BF5B16;}
      .box p {padding-top: 5px;color: #555;font-size: 0.9em;  }
      .box p:hover {color: #BF5B16;}
      blockquote {width:100%; font-family:times; margin-left: 0.1rem;font-size:0.9em;font-style: italic;color: #333;}
    
     footer.footer-grid {grid-template-columns: 1fr 1fr;font-size: .5em; padding: 20px 0 100px 20px;}
      .footer-box.logo-box {grid-column: span 2; }
      .footer-box a {margin: 3px 0;}
      
      
      
      
    
}