@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);}

* {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;}

/* Shared base styles for all 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);}

/* Unique styling for each icon */
.icon-sun:hover {stroke: #ffd700; /* gold */}
.icon-moon:hover { stroke: #a0a0ff; /* cool pale blue */}

p {margin-bottom: 1em;line-height1: 1.6;}
.navbar {padding: 5px 30px;justify-content: space-between; align-items: center; position: fixed;top: 0px;height:78px;width: 100%;z-index: 1000; background-color:#fff; color: #000; transition: background-color 0.3s ease; box-shadow: 0 10px 70px rgba(0,0,0,0.15);}
.navbar.scrolled {top:0; }
.logo-group {display: flex;}
.logo {padding-left:0px;height: 60px;}
.navbar-content {display: flex;justify-content: space-between;align-items: center;}

.nav-menu {display: flex;gap: 20px;margin-right: 0px;list-style: none; }
.nav-menu a {color:#333;text-decoration: none;padding: 0 10px;font-family:Oswald;font-size:0.8em;}
.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(6, 1fr);gap: 20px;background-color: #000;color: white;
  font-size: .7em;padding: 20px 0 100px 0px;width: 100%;max-width: 100%;box-sizing: border-box;
}
.1logo-box {grid-column: span 2;}

.footer-box{border1:solid 3px red;}
.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;}


.container {display: flex;justify-content: space-between; align-items1: flex-start;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;}
    .navbar.scrolled {background-color: #fff;box-shadow: 0 3px 100px rgba(0, 0, 0, 0.2); position: fixed;top: 0px;}
    .navbar-content {display: flex;width:100%;}         
    .navbar .logo-group {display: flex;}
    .logo-group {display: flex; padding-left:20px; align-items: center;height: 78px;}
    .logo {height: 40px!important; width:auto; display:block;}
    .navbar .logo-group .logo {padding:0px;margin:0; height:84px; width1:190px;}
    .search-container{display:none;}
    .menu-toggle {display: block;font-size: 24px; background: none;padding-right:20px; border: none; cursor: pointer;font-weight: 900; color: #000;z-index: 500;}

    .nav-menu {position:fixed; top:0; gap:0; padding-top:60px;width:100%; height:100vh; background:#000; flex-direction:column; transform:translateX(-100%); transition:transform 0.3s ease; z-index:2000;}
    .nav-menu.active {transform:translateX(0);}
    .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;padding: 20px 0 100px 20px;}
     .footer-box{text-align:left;}
     .footer-box.logo-box {grid-column: span 2; }
     .footer-box a {margin: 3px 0;}

}