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

body, h1, h2, h3, h4, h5, h6, p, .what-we-do-item, .what-we-do-panel h3, .what-we-do-panel p, .onegarnet-pie-caption, .onegarnet-ring-caption, .pie-chart-label-top, .legend-item, .footer-slogan, .footer-links a, .footer-bottom {
  font-family: 'Open Sans', 'Rubik', 'Work Sans', 'Inter', Arial, "Helvetica Neue", Helvetica, "Liberation Sans", sans-serif !important;
}

.navbar-menu, .navbar-menu-item, .navbar-menu-item a, .navbar-left .logo {
  font-family: 'Montserrat', 'Segoe UI', 'Roboto', Arial, sans-serif !important;
}

body {
  margin: 0;
  background: #f7f9fb;
  color: #222;
  font-family: "Open Sans", "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif;
  line-height: 1.6;
}

.banner {
  background: linear-gradient(90deg, #005bea 0%, #3ec6e0 100%);
  color: #fff;
  padding: 60px 20px 40px 20px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.banner h1 {
  margin: 0 0 10px 0;
  font-size: 2.8rem;
  font-weight: 700;
  letter-spacing: 1px;
}

.banner p {
  margin: 0;
  font-size: 1.3rem;
  font-weight: 400;
}

.image-gallery { display: none; }

.image-carousel {
  width: 100vw;
  max-width: 100vw;
  margin: 0;
  padding: 0;
}

.carousel-container {
  position: relative;
  width: 100vw;
  max-width: 100vw;
  height: 90vh;
  min-height: 400px;
  margin: 0;
  border-radius: 0;
  box-shadow: 0 4px 24px rgba(0,0,0,0.10);
  background: #fff;
}

.carousel-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 90vh;
  min-height: 400px;
  object-fit: cover;
  border-radius: 0;
  opacity: 0;
  transition: opacity 0.5s;
  z-index: 1;
}
.carousel-img.active {
  opacity: 1;
  z-index: 2;
}

.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,0.65);
  color: #222;
  border: none;
  font-size: 2rem;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.10);
  cursor: pointer;
  z-index: 3;
  transition: background 0.2s, box-shadow 0.2s, opacity 0.2s;
  opacity: 0.85;
  outline: none;
}
.carousel-arrow.left { left: 32px; }
.carousel-arrow.right { right: 32px; }
.carousel-arrow:hover, .carousel-arrow:focus {
  background: rgba(255,255,255,0.92);
  box-shadow: 0 4px 16px rgba(0,0,0,0.18);
  opacity: 1;
}

/* Dot indicators */
.carousel-dots {
  position: absolute;
  left: 50%;
  bottom: 32px;
  transform: translateX(-50%);
  display: flex;
  gap: 12px;
  z-index: 4;
}
.carousel-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #222;
  opacity: 0.4;
  border: none;
  transition: opacity 0.2s, background 0.2s;
  cursor: pointer;
}
.carousel-dot.active {
  opacity: 1;
  background: #fff;
}

@media (max-width: 700px) {
  .carousel-container {
    height: 60vh;
    min-height: 220px;
    width: 100vw;
    max-width: 100vw;
  }
  .carousel-arrow {
    font-size: 1.5rem;
    width: 36px;
    height: 36px;
    /* left: 10px; */
    right: 10px;
    border-radius: 8px;
  }
  .carousel-arrow.left { left: 10px; }
  .carousel-arrow.right { right: 10px; }
  .carousel-dots { bottom: 16px; }
  .carousel-img {
    height: 60vh;
    /* min-height: 220px;
    width: 100vw; */
  }
}

.gallery-img {
  width: 320px;
  height: 220px;
  object-fit: cover;
  border-radius: 18px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.10);
  transition: transform 0.2s, box-shadow 0.2s;
}

.gallery-img:hover {
  transform: scale(1.04);
  box-shadow: 0 8px 32px rgba(0,0,0,0.15);
}

.info-lines {
  max-width: 700px;
  margin: 0 auto 48px auto;
  padding: 0 20px;
  text-align: center;
}

.info-lines p {
  font-size: 1.15rem;
  margin: 18px 0;
  line-height: 1.6;
}

.main-navbar {
  width: 100vw;
  height: 96px;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
  padding: 0 64px;
}
.navbar-left {
  z-index: 2;
}
.navbar-left .logo {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #111;
  user-select: none;
}
.navbar-center {
  position: absolute;
  left: 50%;
  top: 0;
  height: 100%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  width: max-content;
  margin-top: 18px;
}
.navbar-menu {
  display: flex;
  gap: 32px;
  list-style: none;
  margin: 0;
  padding: 0;
  justify-content: center;
  align-items: center;
}
.navbar-menu-item {
  position: relative;
  font-size: 0.98rem;
  font-weight: 500;
  color: #222;
  cursor: pointer;
  padding: 8px 12px;
  border-radius: 4px;
  transition: background 0.2s;
}
.navbar-menu-item:hover, .navbar-menu-item:focus-within {
  background: #f2f2f2;
}
.navbar-menu-item a {
  color: inherit;
  text-decoration: none;
}
.navbar-right {
  display: flex;
  gap: 16px;
  align-items: center;
}
.navbar-icon {
  background: #fff;
  border: none;
  font-size: 1.3rem;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  cursor: pointer;
  transition: background 0.2s;
}
.navbar-icon:hover, .navbar-icon:focus {
  background: #f2f2f2;
}
/* Expandable menu */
.expandable {
  position: relative;
}
.expandable-label::after {
  content: '\25BC';
  font-size: 0.7em;
  margin-left: 6px;
  vertical-align: middle;
  transition: transform 0.2s;
}
.expandable:focus-within .expandable-label::after,
.expandable:hover .expandable-label::after {
  transform: rotate(180deg);
}
.expandable-content {
  display: none;
  position: absolute;
  top: 110%;
  left: 0;
  min-width: 160px;
  background: #fff;
  box-shadow: 0 4px 16px rgba(0,0,0,0.10);
  border-radius: 8px;
  padding: 12px 0;
  z-index: 20;
  flex-direction: column;
}
.expandable:focus-within .expandable-content,
.expandable:hover .expandable-content {
  display: flex;
}
.expandable-content a {
  padding: 10px 24px;
  color: #222;
  text-decoration: none;
  font-size: 1rem;
  transition: background 0.2s;
}
.expandable-content a:hover {
  background: #f2f2f2;
  text-decoration: underline;
}
/* Offset main content for fixed navbar */
body, html {
  scroll-padding-top: 64px;
  overflow-x: hidden;
}


.contact-section {
  max-width: 520px;
  margin: 80px auto 0 auto;
  padding: 32px 24px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 16px rgba(0,0,0,0.07);
  text-align: center;
}
.contact-section h2 {
  margin-bottom: 24px;
  font-size: 2rem;
  font-weight: 700;
  color: #222;
}
.contact-form {
  width: 100%;
}
.contact-table {
  width: 100%;
  margin-bottom: 18px;
  border-collapse: separate;
  border-spacing: 0 12px;
}
.contact-table td {
  padding: 6px 8px;
  vertical-align: top;
  text-align: left;
}
.contact-table label {
  font-weight: 600;
  color: #333;
}
.contact-table input,
.contact-table textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #cfd8dc;
  border-radius: 6px;
  font-size: 1rem;
  font-family: inherit;
  resize: vertical;
  background: #f7f9fb;
  transition: border 0.2s;
}
.contact-table input:focus,
.contact-table textarea:focus {
  border: 1.5px solid #005bea;
  outline: none;
}
.contact-submit {
  background: linear-gradient(90deg, #005bea 0%, #3ec6e0 100%);
  color: #fff;
  font-size: 1.1rem;
  font-weight: 600;
  border: none;
  border-radius: 6px;
  padding: 12px 32px;
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.contact-submit:hover, .contact-submit:focus {
  background: linear-gradient(90deg, #3ec6e0 0%, #005bea 100%);
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}

.logo-img {
  height: 74px;
  width: auto;
  max-width: 234px;
  display: block;
  margin: 0 0 0 0;
  background: none;
  border-radius: 0;
  padding: 0;
}

.logo a {
  outline: none;
  box-shadow: none;
}

.logo a:focus {
  outline: none !important;
  box-shadow: none !important;
}

.navbar-menu-item, .navbar-menu-item a {
  font-family: 'Montserrat', 'Segoe UI', 'Roboto', Arial, sans-serif;
  font-weight: 500;
}

.what-we-do-section {
  max-width: 1400px;
  margin: 48px auto;
  padding: 0 20px;
}
.what-we-do-container {
  display: flex;
  gap: 48px;
  align-items: stretch;
  justify-content: center;
  min-height: 400px;
}
.what-we-do-list {
  list-style: none;
  margin: 0;
  padding: 32px 0 32px 0;
  width: 350px;
  background: #f7f9fb;
  border-right: 2px solid #C8102E;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-shrink: 0;
}
.what-we-do-item {
  font-size: 1.3rem;
  font-weight: 500;
  color: #111;
  padding: 10px 24px;
  cursor: pointer;
  border: none;
  background: none;
  border-radius: 0;
  transition: background 0.2s, color 0.2s;
}
.what-we-do-item.active {
  background: linear-gradient(135deg, #FF1A3D 0%, #A00020 100%);
  color: #fff;
  font-weight: 500;
}
.what-we-do-item:hover:not(.active) {
  background: #f7f9fb;
}
.what-we-do-content {
  flex: 1 1 0;
  padding: 32px 40px;
  display: flex;
  align-items: center;
  min-height: 340px;
  width: 100%;
}
.what-we-do-panel {
  width: 100%;
}
.what-we-do-panel h3 {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 12px;
  color: #111;
}
.what-we-do-panel p {
  font-size: 1.08rem;
  color: #222;
  margin-bottom: 0;
}

       /*PC @media begin */
        @media (min-width: 1601px) {
                              .onebt{
                                flex: 1 1 0; padding: 28px 40px; background: #fff; box-shadow: 0 4px 24px rgba(0,0,0,0.10); box-sizing: border-box; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; border-radius: 8px; min-height: 400px; width: 100%; margin: 0;
                              }
                              .onebta{

                              }
                              .onebtbb{
                              font-family: 'Open Sans', sans-serif; font-size: 1.8rem; font-weight: 900; background: linear-gradient(135deg, #4CAF50 0%, #1B5E20 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-align: left; margin-bottom: 8px;
                              }
                              .onebtbbb{
                              font-size: 1.2rem; font-weight: 500; color: #555; text-transform: uppercase; letter-spacing: 0.05em; margin-top: 0;
                              }
                              .onebtaa{
                                font-family: 'Open Sans', sans-serif; font-size: 1.8rem; font-weight: 900; background: linear-gradient(135deg, #FF1A3D 0%, #A00020 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-align: left; margin-bottom: 8px;
                              }
                              .onebtaaa{
                                font-size: 1.2rem; font-weight: 500; color: #555; text-transform: uppercase; letter-spacing: 0.05em; margin-top: 0;
                              }
                              .what-we-do-title {
                                  font-size: 2.1rem;
                                  font-weight: 600;
                                  color: #111;
                                  margin: 64px 0 24px 0;
                                  padding-left: 0;
                                }
                              .pie-chart-60 {
                                background: linear-gradient(135deg, #FF1A3D 0%, #A00020 100%);
                                border-radius: 50%;
                                width: 180px;
                                height: 180px;
                                box-shadow:
                                  0 8px 32px 0 rgba(0,0,0,0.13),
                                  0 2px 8px 0 rgba(0,0,0,0.10),
                                  0 1.5px 0.5px 0 rgba(255,255,255,0.12) inset;
                                margin-bottom: 16px;
                                transform: scaleX(-1);
                                position: relative;
                              }

                              .pie-chart-60::after {
                                content: '';
                                position: absolute;
                                top: 0;
                                left: 0;
                                width: 100%;
                                height: 100%;
                                border-radius: 50%;
                                background: conic-gradient(
                                  transparent 0% 60%,
                                  #a0a3a8 60% 68%,
                                  #c1c3c6 68% 78%,
                                  #b0b3b8 78% 85%,
                                  #d1d3d4 85% 95%,
                                  #e1e3e4 95% 100%
                                );
                              }
                              .mine-site-container {
                                  max-width: 1600px;
                                  margin: 0 auto;
                                  padding: 0 4rem 2rem 4rem;
                                  gap: 48px;
                                  justify-content: center;
                                }

                                .mine-site-section {
                                  display: flex; align-items: stretch; gap: 48px; margin: 48px 0;
                                  /* display: flex;
                                  align-items: flex-start;
                                  gap: 48px;
                                  justify-content: center; */
                                }
                                .mine-site-sectiont{
                                  display: flex; gap: 48px; align-items: stretch; margin-top: 24px; height: 270px;
                                }
                                .mine-site-section3{
                                  display: flex; align-items: flex-start; justify-content: flex-start; gap: 48px; margin: 48px 0 0;
                                }
                                .onekpa{
                                  padding: 28px 40px 40px; background: #fff; box-shadow: 0 4px 24px rgba(0,0,0,0.10); box-sizing: border-box; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; height: 400px; overflow: visible; cursor: default; border-radius: 8px;
                                }
                                .onegimga{
                                  width: 338px; height: 300px; box-shadow: 0 12px 36px rgba(0,0,0,0.18), 0 2px 8px rgba(0,0,0,0.10); object-fit: cover; flex: none; border-radius: 8px;
                                }
                                .onegimgb{
                                  width: 338px; height: 300px; box-shadow: 0 12px 36px rgba(0,0,0,0.18), 0 2px 8px rgba(0,0,0,0.10); object-fit: cover; flex: none; border-radius: 8px; margin-left: 24px;
                                }
                                  .mine-site-sectiona {
                                  display: flex; align-items: flex-start; gap: 48px; margin: 0;
                                }
                                .mine-site-sectionab{
                                  display: flex; flex-direction: row; gap: 24px;
                                }
                              .navbar-center {
                                position: absolute;
                                left: 50%;
                                top: 0;
                                height: 100%;
                                transform: translateX(-50%);
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                z-index: 1;
                                width: max-content;
                                margin-top: 18px;
                              }
                                  main {
                                padding-top: 96px;
                              }
                              .footer-social {
                                display: flex;
                                gap: 24px;
                              }
                          
                              .site-footer {
                                background-color: #222;
                                color: #fff;
                                padding: 48px 64px;
                                padding-bottom: 120px;
                                border-top: 1px solid #333;
                                text-align: center;
                              }
                              .footer-top {
                                display: flex;
                                justify-content: space-between;
                                align-items: center;
                                margin-bottom: 40px;
                              }
                              .contact-grid {
                                display: grid;
                                grid-template-columns: 1fr 1.5fr;
                                gap: 4rem;
                                max-width: 1200px;
                                margin: 4rem auto;
                                align-items: flex-start;
                                padding: 2rem;
                              }
                              .onea {
                                  font-size: 1.15rem;
                              }

                              .onetitle {
                                  font-family: 'Open Sans', sans-serif;
                                  font-size: 2.2rem;
                                  font-weight: 900;
                                  background: linear-gradient(135deg, #FF1A3D 0%, #A00020 100%);
                                  -webkit-background-clip: text;
                                  -webkit-text-fill-color: transparent;
                                  background-clip: text;
                                  margin-bottom: 4px;
                                  text-align: center;
                              }
                              .largestoga{
                                font-size: 1.18rem; margin-bottom: 12px;
                              }
                              .largestogb{
                                font-size: 1.18rem; margin-bottom: 0;
                              }
                              .largesttitle{
                                  font-family: 'Open Sans', sans-serif; font-size:1.8rem; font-weight: 900; background: linear-gradient(135deg, #FF1A3D 0%, #A00020 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: 16px; text-align: left;
                              }
                              .largestogbb{
                                  font-size: 1.18rem; margin-top: 24px; margin-bottom: 0;
                              }
              }
/*PC @media over */

/*IPAD @media begin */
        @media screen and (min-width:1450px) and (max-width:1600px) 
        { 
                         .onebt{
                                flex: 1 1 0; padding: 28px 40px; background: #fff; box-shadow: 0 4px 24px rgba(0,0,0,0.10); box-sizing: border-box; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; border-radius: 8px; min-height: 400px; width: 100%; margin: 0;
                              }
                         .onebtbb{
                              font-family: 'Open Sans', sans-serif; font-size: 1.8rem; font-weight: 900; background: linear-gradient(135deg, #4CAF50 0%, #1B5E20 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-align: left; margin-bottom: 8px;
                              }
                         .onebtbbb{
                              font-size: 1.2rem; font-weight: 500; color: #555; text-transform: uppercase; letter-spacing: 0.05em; margin-top: 0;
                              }
                         .onebta{

                                }
                         .onebtaa{
                                font-family: 'Open Sans', sans-serif; font-size: 1.8rem; font-weight: 700; background: linear-gradient(135deg, #FF1A3D 0%, #A00020 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-align: left; margin-bottom: 8px;
                              }
                        .onebtaaa{
                                font-size: 1rem; font-weight: 500; color: #555; text-transform: uppercase; letter-spacing: 0.05em; margin-top: 0;
                              }
                         .what-we-do-title {
                                  font-size: 2.1rem;
                                  font-weight: 600;
                                  color: #111;
                                  margin: 64px 0 24px 0;
                                  padding-left: 0;
                                }
                         .pie-chart-60 {
                                background: linear-gradient(135deg, #FF1A3D 0%, #A00020 100%);
                                border-radius: 50%;
                                width: 180px;
                                height: 180px;
                                box-shadow:
                                  0 8px 32px 0 rgba(0,0,0,0.13),
                                  0 2px 8px 0 rgba(0,0,0,0.10),
                                  0 1.5px 0.5px 0 rgba(255,255,255,0.12) inset;
                                margin-bottom: 16px;
                                transform: scaleX(-1);
                                position: relative;
                              }

                              .pie-chart-60::after {
                                content: '';
                                position: absolute;
                                top: 0;
                                left: 0;
                                width: 100%;
                                height: 100%;
                                border-radius: 50%;
                                background: conic-gradient(
                                  transparent 0% 60%,
                                  #a0a3a8 60% 68%,
                                  #c1c3c6 68% 78%,
                                  #b0b3b8 78% 85%,
                                  #d1d3d4 85% 95%,
                                  #e1e3e4 95% 100%
                                );
                              }
                        .mine-site-container {
                                  max-width: 1600px;
                                  margin: 0 auto;
                                  padding: 0 4rem 2rem 4rem;
                                  gap: 48px;
                                  justify-content: center;
                                }
                       .mine-site-sectiont{
                                  display: flex; gap: 48px; align-items: stretch; margin-top: 24px; height: 270px;
                                }
                        .mine-site-section {
                                display: flex; align-items: stretch; gap: 48px; margin: 48px 0;
                                }
                        .mine-site-section3{
                                  display: flex; align-items: flex-start; justify-content: flex-start; gap: 48px; margin: 48px 0 0;
                                }
                        .onekpa{
                                  padding: 28px 40px 40px; background: #fff; box-shadow: 0 4px 24px rgba(0,0,0,0.10); box-sizing: border-box; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; height: 400px; overflow: visible; cursor: default; border-radius: 8px;
                                }
                        .onegimga{
                                  width: 338px; height: 300px; box-shadow: 0 12px 36px rgba(0,0,0,0.18), 0 2px 8px rgba(0,0,0,0.10); object-fit: cover; flex: none; border-radius: 8px;
                                }
                        .onegimgb{
                                  width: 338px; height: 300px; box-shadow: 0 12px 36px rgba(0,0,0,0.18), 0 2px 8px rgba(0,0,0,0.10); object-fit: cover; flex: none; border-radius: 8px; margin-left: 24px;
                                }
                        .mine-site-sectiona {
                                  display: flex; align-items: flex-start; gap: 48px; margin: 0;
                                }
                        .mine-site-sectionab{
                                  display: flex; flex-direction: row; gap: 24px;
                                }
                        .navbar-center {
                                position: absolute;
                                left: 50%;
                                top: 0;
                                height: 100%;
                                transform: translateX(-50%);
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                z-index: 1;
                                width: max-content;
                                margin-top: 18px;
                              }
                                  main {
                          padding-top: 96px;
                        }
                        .footer-social {
                          display: flex;
                          gap: 24px;
                        }
                       .site-footer {
                          background-color: #222;
                          color: #fff;
                          padding: 48px 64px;
                          padding-bottom: 120px;
                          border-top: 1px solid #333;
                          text-align: center;
                        }
                       .footer-top {
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        margin-bottom: 40px;
                      }
                      .contact-grid {
                        display: grid;
                        grid-template-columns: 1fr 1.5fr;
                        gap: 4rem;
                        max-width: 1200px;
                        margin: 4rem auto;
                        align-items: flex-start;
                        padding: 2rem;
                      }
                      .onea {
                          font-size: 1.2rem;
                      }
                      .onetitle {
                          font-family: 'Open Sans', sans-serif;
                          font-size: 1.3rem;
                          font-weight: 900;
                          background: linear-gradient(135deg, #FF1A3D 0%, #A00020 100%);
                          -webkit-background-clip: text;
                          -webkit-text-fill-color: transparent;
                          background-clip: text;
                          margin-bottom: 4px;
                          text-align: center;
                      }
                      .largestoga{
                        font-size: 1.0em; margin-bottom: 12px;
                      }
                      .largestogb{
                        font-size: 1.0rem; margin-bottom: 0;
                      }
                      .largesttitle{
                          font-family: 'Open Sans', sans-serif; font-size:1.3rem; font-weight: 900; background: linear-gradient(135deg, #FF1A3D 0%, #A00020 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: 16px; text-align: left;
                      }
                      .largestogbb{
                          font-size: 1rem; margin-top: 24px; margin-bottom: 0;
                      }
            
        }
        @media screen and (min-width:1260px) and (max-width:1449px) 
        {
                         .onebtbb{
                              font-family: 'Open Sans', sans-serif; font-size: 1.5rem; font-weight: 900; background: linear-gradient(135deg, #4CAF50 0%, #1B5E20 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-align: left; margin-bottom: 8px;
                              }
                         .onebtbbb{
                              font-size: 1rem; font-weight: 500; color: #555; text-transform: uppercase; letter-spacing: 0.05em; margin-top: 0;
                              }
                           .onebt{
                                flex: 1 1 0; padding: 18px 18px; background: #fff; box-shadow: 0 4px 24px rgba(0,0,0,0.10); box-sizing: border-box;  flex-direction: column; align-items: flex-start; justify-content: flex-start; border-radius: 8px; min-height: 400px; width: 100%; margin: 0;
                              }
                         .onebta{

                                }
                         .onebtaa{
                                font-family: 'Open Sans', sans-serif; font-size: 1.5rem; font-weight: 900; background: linear-gradient(135deg, #FF1A3D 0%, #A00020 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-align: left; margin-bottom: 8px;
                              }
                            .onebtaaa{
                                font-size: 1rem; font-weight: 500; color: #555; text-transform: uppercase; letter-spacing: 0.05em; margin-top: 0;
                              }
                        .what-we-do-title {
                                  font-size: 2.1rem;
                                  font-weight: 600;
                                  color: #111;
                                  margin: 64px 0 24px 0;
                                  padding-left: 0;
                                }
                       .pie-chart-60 {
                                background: linear-gradient(135deg, #FF1A3D 0%, #A00020 100%);
                                border-radius: 50%;
                                width: 180px;
                                height: 180px;
                                box-shadow:
                                  0 8px 32px 0 rgba(0,0,0,0.13),
                                  0 2px 8px 0 rgba(0,0,0,0.10),
                                  0 1.5px 0.5px 0 rgba(255,255,255,0.12) inset;
                                margin-bottom: 16px;
                                transform: scaleX(-1);
                                position: relative;
                              }

                              .pie-chart-60::after {
                                content: '';
                                position: absolute;
                                top: 0;
                                left: 0;
                                width: 100%;
                                height: 100%;
                                border-radius: 50%;
                                background: conic-gradient(
                                  transparent 0% 60%,
                                  #a0a3a8 60% 68%,
                                  #c1c3c6 68% 78%,
                                  #b0b3b8 78% 85%,
                                  #d1d3d4 85% 95%,
                                  #e1e3e4 95% 100%
                                );
                              }
                      .mine-site-container {
                                  max-width: 1600px;
                                  margin: 0 auto;
                                  padding: 0 4rem 2rem 4rem;
                                  gap: 48px;
                                  justify-content: center;
                                }
                      .mine-site-sectiont{
                                  display: flex; gap: 48px; align-items: stretch; margin-top: 24px; height: 270px;
                                }
                      .mine-site-section {
                                display: flex; align-items: stretch; gap: 48px; margin: 48px 0;
                                }
                      .mine-site-section3{
                                  display: flex; align-items: flex-start; justify-content: flex-start; gap: 48px; margin: 48px 0 0;
                                }
                      .onekpa{
                                  padding: 28px 40px 40px; background: #fff; box-shadow: 0 4px 24px rgba(0,0,0,0.10); box-sizing: border-box; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; height: 400px; overflow: visible; cursor: default; border-radius: 8px;
                                }
                      .onegimga{
                                  width: 338px; height: 300px; box-shadow: 0 12px 36px rgba(0,0,0,0.18), 0 2px 8px rgba(0,0,0,0.10); object-fit: cover; flex: none; border-radius: 8px;
                                }
                      .onegimgb{
                                  width: 338px; height: 300px; box-shadow: 0 12px 36px rgba(0,0,0,0.18), 0 2px 8px rgba(0,0,0,0.10); object-fit: cover; flex: none; border-radius: 8px; margin-left: 24px;
                                }
                      .mine-site-sectiona {
                                  display: flex; align-items: flex-start; gap: 48px; margin: 0;
                                }
                      .mine-site-sectionab{
                                  display: flex; flex-direction: row; gap: 24px;
                                }
                      .navbar-center {
                                position: absolute;
                                left: 50%;
                                top: 0;
                                height: 100%;
                                transform: translateX(-50%);
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                z-index: 1;
                                width: max-content;
                                margin-top: 18px;
                              }
                       main {
                          padding-top: 96px;
                        }
                        .footer-social {
                          display: flex;
                          gap: 24px;
                        }
                       .site-footer {
                          background-color: #222;
                          color: #fff;
                          padding: 48px 64px;
                          padding-bottom: 120px;
                          border-top: 1px solid #333;
                          text-align: center;
                        }
                        .footer-top {
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        margin-bottom: 40px;
                      }
                       .contact-grid {
                        display: grid;
                        grid-template-columns: 1fr 1.5fr;
                        gap: 4rem;
                        max-width: 1200px;
                        margin: 4rem auto;
                        align-items: flex-start;
                        padding: 2rem;
                      }
                      .onea {
                          font-size: 1rem;
                      }

                      .onetitle {
                          font-family: 'Open Sans', sans-serif;
                          font-size: 1.3rem;
                          font-weight: 900;
                          background: linear-gradient(135deg, #FF1A3D 0%, #A00020 100%);
                          -webkit-background-clip: text;
                          -webkit-text-fill-color: transparent;
                          background-clip: text;
                          margin-bottom: 4px;
                          text-align: center;
                      }
                      .largestoga{
                        font-size: 0.8em; margin-bottom: 12px;
                      }
                      .largestogb{
                        font-size: 0.8rem; margin-bottom: 0;
                      }
                      .largesttitle{
                          font-family: 'Open Sans', sans-serif; font-size:1.3rem; font-weight: 900; background: linear-gradient(135deg, #FF1A3D 0%, #A00020 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: 16px; text-align: left;
                      }
                        .largestogbb{
                          font-size: 1rem; margin-top: 24px; margin-bottom: 0;
                      }
        }
/*IPAD @media over */

/*WAP @media begin */

      /* 超小设备 (手机竖屏, < 576px) */
      @media (max-width: 575.98px) { 
                          .what-we-do-title {
                                  font-size:1.3rem;
                                  font-weight: 600;
                                  color: #111;
                                 margin: 14px 0 14px 0;
                                  padding-left: 0;
                                }
                         .pie-chart-60 {
                                background: linear-gradient(135deg, #FF1A3D 0%, #A00020 100%);
                                border-radius: 50%;
                                width: 120px;
                                height: 120px;
                                box-shadow:
                                  0 8px 32px 0 rgba(0,0,0,0.13),
                                  0 2px 8px 0 rgba(0,0,0,0.10),
                                  0 1.5px 0.5px 0 rgba(255,255,255,0.12) inset;
                                margin-bottom: 16px;
                                transform: scaleX(-1);
                                position: relative;
                              }

                              .pie-chart-60::after {
                                content: '';
                                position: absolute;
                                top: 0;
                                left: 0;
                                width: 100%;
                                height: 100%;
                                border-radius: 50%;
                                background: conic-gradient(
                                  transparent 0% 60%,
                                  #a0a3a8 60% 68%,
                                  #c1c3c6 68% 78%,
                                  #b0b3b8 78% 85%,
                                  #d1d3d4 85% 95%,
                                  #e1e3e4 95% 100%
                                );
                              }
                      .mine-site-container {
                                  /* max-width: 1600px; */
                                  margin: 0 auto;
                                  padding: 0 1rem 1rem 1rem;
                                  /* gap: 48px; */
                                  justify-content: center;
                                }
                       .mine-site-sectiont{
                                align-items: stretch; margin-top: 24px; 
                                }
                      .mine-site-section {
                                  /* display: flex;
                                  align-items: flex-start;
                                  gap: 48px; */
                                  justify-content: center;
                                }
                       .mine-site-section3{
                                   justify-content: flex-start;  margin: 28px 0 0;
                                }
                       .onekpa{
                                  padding: 28px 40px 40px; background: #fff; box-shadow: 0 4px 24px rgba(0,0,0,0.10); box-sizing: border-box;  cursor: default; border-radius: 8px;
                                }
                      .onegimga{
                                  width: 100%;  box-shadow: 0 12px 36px rgba(0,0,0,0.18), 0 2px 8px rgba(0,0,0,0.10); object-fit: cover; flex: none; border-radius: 8px;
                                }
                      .onegimgb{
                                  width: 100%;  box-shadow: 0 12px 36px rgba(0,0,0,0.18), 0 2px 8px rgba(0,0,0,0.10); object-fit: cover; flex: none; border-radius: 8px; 
                                }
                      .mine-site-sectiona {
                                        padding-top: 2%;
                                  /* display: flex; align-items: flex-start; gap: 48px; margin: 0; */
                                }
                      .mine-site-sectionab{
                                  /* display: flex; flex-direction: row; gap: 24px; */
                                }
                      .main {
                        padding-top:1%;
                      }
                     .footer-social {
                        padding-top: 2%;
                          /* display: flex; */
                          gap: 24px;
                        }
                      .footer-social a{
                          padding-right: 2%;
                        }
                     .footer-top {
                        /* display: flex; */
                        justify-content: space-between;
                        align-items: center;
                        margin-bottom: 40px;
                      }
                         .contact-grid {
                        display: grid;
                        /* grid-template-columns: 1fr 1.5fr; */
                        gap: 4rem;
                        max-width: 1200px;
                        margin: 4rem auto;
                        align-items: flex-start;
                        padding: 2rem;
                      }
                       .site-footer {
                          background-color: #222;
                          color: #fff;
                          padding: 13px 18px;
                          padding-bottom: 120px;
                          border-top: 1px solid #333;
                          text-align: center;
                        }
       }
      /* 小设备 (手机横屏, 576px - 767.98px) */
                      @media (min-width: 576px) and (max-width: 767.98px) { 
                          .what-we-do-title {
                                  font-size:1.3rem;
                                  font-weight: 600;
                                  color: #111;
                                  margin: 14px 0 14px 0;
                                  padding-left: 0;
                                }
                         .pie-chart-60 {
                                background: linear-gradient(135deg, #FF1A3D 0%, #A00020 100%);
                                border-radius: 50%;
                                width: 120px;
                                height: 120px;
                                box-shadow:
                                  0 8px 32px 0 rgba(0,0,0,0.13),
                                  0 2px 8px 0 rgba(0,0,0,0.10),
                                  0 1.5px 0.5px 0 rgba(255,255,255,0.12) inset;
                                margin-bottom: 16px;
                                transform: scaleX(-1);
                                position: relative;
                              }

                              .pie-chart-60::after {
                                content: '';
                                position: absolute;
                                top: 0;
                                left: 0;
                                width: 100%;
                                height: 100%;
                                border-radius: 50%;
                                background: conic-gradient(
                                  transparent 0% 60%,
                                  #a0a3a8 60% 68%,
                                  #c1c3c6 68% 78%,
                                  #b0b3b8 78% 85%,
                                  #d1d3d4 85% 95%,
                                  #e1e3e4 95% 100%
                                );
                              }
                          .mine-site-container {
                                  /* max-width: 1600px; */
                                  margin: 0 auto;
                                  padding: 0 1rem 1rem 1rem;
                                  /* gap: 48px; */
                                  justify-content: center;
                                }
                         .mine-site-sectiont{
                                align-items: stretch; margin-top: 24px; 
                                }
                        .mine-site-section {
                                  /* display: flex;
                                  align-items: flex-start;
                                  gap: 48px; */
                                  justify-content: center;
                                }
                        .mine-site-section3{
                                   justify-content: flex-start;  margin: 28px 0 0;
                                }
                        .onekpa{
                                  padding: 28px 40px 40px; background: #fff; box-shadow: 0 4px 24px rgba(0,0,0,0.10); box-sizing: border-box;  cursor: default; border-radius: 8px;
                                }
                        .onegimga{
                                  width: 100%;  box-shadow: 0 12px 36px rgba(0,0,0,0.18), 0 2px 8px rgba(0,0,0,0.10); object-fit: cover; flex: none; border-radius: 8px;
                                }
                        .onegimgb{
                                  width: 100%;  box-shadow: 0 12px 36px rgba(0,0,0,0.18), 0 2px 8px rgba(0,0,0,0.10); object-fit: cover; flex: none; border-radius: 8px; 
                                }
                        .mine-site-sectiona {
                                        padding-top: 2%;
                                  /* display: flex; align-items: flex-start; gap: 48px; margin: 0; */
                                }
                        .mine-site-sectionab{
                                  /* display: flex; flex-direction: row; gap: 24px; */
                                }
                        .main {
                        padding-top:1%;
                      }
                      .footer-social {
                          padding-right: 2%;
                          /* display: flex; */
                          gap: 24px;
                        }
                      .footer-social a{
                          padding-right: 1%;
                      }
                      .footer-top {
                        /* display: flex; */
                        justify-content: space-between;
                        align-items: center;
                        margin-bottom: 40px;
                      }
                         .contact-grid {
                        display: grid;
                        /* grid-template-columns: 1fr 1.5fr; */
                        gap: 4rem;
                        max-width: 1200px;
                        margin: 4rem auto;
                        align-items: flex-start;
                        padding: 2rem;
                      }
                      .site-footer {
                          background-color: #222;
                          color: #fff;
                          padding: 13px 18px;
                          padding-bottom: 120px;
                          border-top: 1px solid #333;
                          text-align: center;
                      }
       }

      /* 通用手机端 (涵盖所有手机尺寸) */
      @media screen and (min-width:767.98px) and (max-width:1259px) 
      { 
                      .what-we-do-title {
                                  font-size:1.3rem;
                                  font-weight: 600;
                                  color: #111;
                                  margin: 14px 0 14px 0;
                                  padding-left: 0;
                                }
            
                      .mine-site-container {
                                  /* max-width: 1600px; */
                                  margin: 0 auto;
                                  padding: 0 1rem 1rem 1rem;
                                  /* gap: 48px; */
                                  justify-content: center;
                                }
                      .mine-site-sectiont{
                                align-items: stretch; margin-top: 24px; 
                                }
                      .mine-site-section {
                                  /* display: flex;
                                  align-items: flex-start;
                                  gap: 48px; */
                                  justify-content: center;
                                }
                      .mine-site-section3{
                                   justify-content: flex-start;  margin: 28px 0 0;
                                }
                      .onekpa{
                                  padding: 28px 40px 40px; background: #fff; box-shadow: 0 4px 24px rgba(0,0,0,0.10); box-sizing: border-box;  cursor: default; border-radius: 8px;
                                }
                      .onegimga{
                                  width: 100%;  box-shadow: 0 12px 36px rgba(0,0,0,0.18), 0 2px 8px rgba(0,0,0,0.10); object-fit: cover; flex: none; border-radius: 8px;
                                }
                      .onegimgb{
                                  width: 100%;  box-shadow: 0 12px 36px rgba(0,0,0,0.18), 0 2px 8px rgba(0,0,0,0.10); object-fit: cover; flex: none; border-radius: 8px; 
                                }
                      .mine-site-sectiona {
                                  /* display: flex; align-items: flex-start; gap: 48px; margin: 0; */
                                  padding-top: 2%;
                                }
                      .navbar-center {
                                position: absolute;
                                left: 60%;
                                top: 0;
                                height: 100%;
                                transform: translateX(-50%);
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                z-index: 1;
                                width: max-content;
                                margin-top: 18px;
                              }
                               main {
                        padding-top:1%;
                      }
                      .footer-social {
                         padding-right: 2%;
                          /* display: flex; */
                          gap: 24px;
                        }
                      .footer-social a{
                          padding-right: 1%;
                      }
                      .site-footer {
                          background-color: #222;
                          color: #fff;
                          padding: 13px 18px;
                          padding-bottom: 120px;
                          border-top: 1px solid #333;
                          text-align: center;
                      }
                       .footer-top {
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        margin-bottom: 40px;
                      }
                       .contact-grid {
                        display: grid;
                        /* grid-template-columns: 1fr 1.5fr; */
                        gap: 4rem;
                        max-width: 1200px;
                        margin: 4rem auto;
                        align-items: flex-start;
                        padding: 2rem;
                      }
                      .onea {
                          font-size: 0.8rem;
                      }

                      .onetitle {
                          font-family: 'Open Sans', sans-serif;
                          font-size: 1rem;
                          font-weight: 900;
                          background: linear-gradient(135deg, #FF1A3D 0%, #A00020 100%);
                          -webkit-background-clip: text;
                          -webkit-text-fill-color: transparent;
                          background-clip: text;
                          margin-bottom: 4px;
                          text-align: center;
                      }
                      .largestoga{
                        font-size: 0.7em; margin-bottom: 12px;
                      }
                      .largestogb{
                        font-size: 0.7rem; margin-bottom: 0;
                      }
                      .largesttitle{
                          font-family: 'Open Sans', sans-serif; font-size:1rem; font-weight: 900; background: linear-gradient(135deg, #FF1A3D 0%, #A00020 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: 16px; text-align: left;
                      }
                        .largestogbb{
                          font-size: 0.8rem; margin-top: 24px; margin-bottom: 0;
                      }
     
      }
/*WAP @media over */



@media (max-width: 900px) {
  .what-we-do-container {
    flex-direction: column;
    min-height: unset;
  }
  .what-we-do-list {
    flex-direction: row;
    width: 100%;
    border-right: none;
    border-bottom: 2px solid #C8102E;
    padding: 0 0 0 0;
    gap: 0;
    justify-content: space-between;
  }
  .what-we-do-item {
    border-radius: 0 0 0 0;
    padding: 12px 10px;
    font-size: 1rem;
    flex: 1;
    text-align: center;
  }
  .what-we-do-content {
    padding: 24px 10px;
  }
}

  @media (max-width: 767px) {
            .main-navbar {
                display: none;
            }
        }

.section-header-container {
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 4rem;
}

.contact-hero {
  display: flex;
  min-height: 80vh;
  width: 100vw;
  background: #f7f9fb;
  border-radius: 0;
  box-shadow: none;
  overflow: hidden;
  margin: 0;
  max-width: none;
}
.contact-hero-left {
  flex: 1 1 0;
  padding: 64px 48px 64px 10vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: #fff;
  min-height: 480px;
}
.contact-title {
  font-size: 2.2rem;
  font-weight: 700;
  margin-bottom: 32px;
  color: #222;
}
.contact-radio-group {
  display: flex;
  gap: 24px;
  margin-bottom: 32px;
  font-size: 1.05rem;
  color: #222;
}
.contact-radio-group label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
  cursor: pointer;
}
.contact-row {
  display: flex;
  gap: 24px;
  margin-bottom: 24px;
}
.contact-field {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
}
.contact-field label {
  font-size: 1rem;
  font-weight: 500;
  margin-bottom: 6px;
  color: #222;
}
.contact-field input,
.contact-field select,
.contact-field textarea {
  font-family: 'Montserrat', 'Segoe UI', 'Roboto', Arial, sans-serif;
  font-size: 1rem;
  padding: 10px 12px;
  border: none;
  border-bottom: 2px solid #cfd8dc;
  background: #f7f9fb;
  border-radius: 0;
  margin-bottom: 0;
  transition: border-color 0.2s;
  resize: none;
}
.contact-field input:focus,
.contact-field select:focus,
.contact-field textarea:focus {
  border-bottom: 2px solid #C8102E;
  outline: none;
}
.contact-submit {
  margin-top: 32px;
  width: 100%;
  background: #fff;
  color: #C8102E;
  font-size: 1.1rem;
  font-weight: 600;
  border: 2px solid #C8102E;
  border-radius: 24px;
  padding: 12px 0;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.contact-submit:hover, .contact-submit:focus {
  background: #C8102E;
  color: #fff;
}
.contact-hero-right {
  flex: 1 1 0;
  background: #f7f9fb;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 480px;
}
.contact-hero-image {
  width: 100%;
  height: 100%;
  background: linear-gradient(120deg, #f7f9fb 60%, #e0e7ef 100%);
  border-radius: 0;
  margin-top: 32px;
  margin-right: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 900px) {
  .contact-hero {
    flex-direction: column;
    border-radius: 0;
    max-width: 100vw;
    margin: 0;
    min-height: unset;
  }
  .contact-hero-left, .contact-hero-right {
    padding: 24px 10px;
    min-height: 220px;
  }
  .contact-row {
    flex-direction: column;
    gap: 0;
  }
}

.contact-image-placeholder {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  display: block;
}

.only-at-onegarnet-section {
  width: 100%;
  background: #f7f9fb;
  padding: 56px 0 16px 0;
  display: flex;
  justify-content: center;
}
.only-at-onegarnet-title {
  font-family: 'Montserrat', 'Segoe UI', 'Roboto', Arial, sans-serif;
  font-size: 2.3rem;
  font-weight: 700;
  color: #C8102E;
  margin: 0;
  text-align: center;
}

.onegarnet-pie-chart-section {
  width: 100%; margin: 32px 0 0 0; padding: 0; box-shadow: none; background: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 32px 0 0 0;
  gap: 0;
  position: relative;
}
.onegarnet-pie-chart-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 32px;
  width: 100%;
}
.vertical-legend {
  display: flex;
  flex-direction: column;
  gap: 22px;
  align-items: flex-start;
  justify-content: center;
  margin-left: 32px;
}
.onegarnet-pie-caption {
  font-family: 'Montserrat', 'Segoe UI', 'Roboto', Arial, sans-serif;
  font-size: 1.18rem;
  color: #222;
  text-align: center;
  margin: 18px 0 18px 0;
  max-width: 540px;
}

.onegarnet-ring-chart-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 32px 0 32px 0;
}
.onegarnet-ring-chart {
  display: block;
  margin-bottom: 12px;
}
.ring-bg {
  stroke: #e0e7ef;
}
.ring-fg {
  stroke: #C8102E;
  transition: stroke-dasharray 0.5s;
}
.onegarnet-ring-caption {
  font-family: 'Montserrat', 'Segoe UI', 'Roboto', Arial, sans-serif;
  font-size: 1.08rem;
  color: #222;
  text-align: center;
  max-width: 340px;
}



.pie-chart-text {
  position: absolute;
  top: 52%;
  left: 70%;
  transform: translate(-50%, -50%) scaleX(-1);
  font-family: 'Montserrat', 'Segoe UI', 'Roboto', Arial, sans-serif;
  font-size: 1.8rem;
  font-weight: 700;
  color: #fff;
  z-index: 2;
  pointer-events: none;
  text-shadow: 0px 1px 4px rgba(0, 0, 0, 0.25);
}

.onegarnet-pie-legend {
  display: flex;
  gap: 24px;
  justify-content: center;
  flex-wrap: wrap;
}
.legend-item {
  display: flex;
  align-items: center;
  margin-bottom: 0;
  font-size: 1.2rem;
  color: #333;
}
.legend-color-box {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  margin-right: 12px;
}

.pie-chart-label-top {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -60%);
  font-family: 'Montserrat', 'Segoe UI', 'Roboto', Arial, sans-serif;
  font-size: 0.9rem;
  font-weight: 500;
  fill: #444;
  z-index: 2;
  background: #f7f9fb;
  padding: 0 10px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  pointer-events: none;
}
/* 
.site-footer {
  background-color: #222;
  color: #fff;
  padding: 48px 64px;
  padding-bottom: 120px;
  border-top: 1px solid #333;
  text-align: center;
} */

.footer-top, .footer-links, .footer-bottom {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}



.footer-slogan {
  font-size: 2rem;
  font-weight: 500;
  color: #fff;
}


.footer-icon {
  font-size: 1.8rem;
  color: #fff;
  transition: color 0.2s;
}

.footer-social a:hover .footer-icon {
  color: #C8102E;
}

.footer-links {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.footer-links a {
  color: #fff;
  text-decoration: none;
  font-size: 1.2rem;
  font-weight: 500;
}

.footer-divider {
  border: 0;
  border-top: 2px solid #444;
  margin: 20px auto;
  max-width: 1200px;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8em;
  color: #ccc;
  flex-wrap: wrap;
}

.footer-bottom-links {
  display: flex;
}

.footer-bottom a {
  color: #ccc;
  text-decoration: none;
  margin-left: 15px;
}



.no-bottom-margin {
  padding-bottom: 0 !important;
}

img[alt="OneGarnet Mine Site"] {
  margin-right: 0 !important;
}

.flippable-card {
  cursor: default;
}

#card-image {
  /* No special styles */
}

/* Contact Form Styles */


.contact-details h2 {
  font-family: 'Montserrat', sans-serif;
  font-size: 2.2rem;
  margin-bottom: 1.5rem;
  color: #333;
}

.contact-details p {
  font-size: 1.1rem;
  line-height: 1.6;
  color: #666;
  margin-bottom: 2rem;
}

.contact-details ul {
  list-style: none;
  padding: 0;
}

.contact-details li {
  font-size: 1.1rem;
  color: #666;
  margin-bottom: 1rem;
}

.contact-form {
  background-color: #fdfdfd;
  padding: 3rem;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.07);
}

.contact-form .form-group {
  margin-bottom: 1.5rem;
}

.contact-form .form-row {
  display: flex;
  gap: 2rem;
}

.contact-form .form-row .form-group {
  flex: 1;
}

.contact-form label,
.contact-form legend {
  display: block;
  margin-bottom: 0.75rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: #333;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.required-star {
  color: #C8102E;
  margin-left: 0.25rem;
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form textarea,
.contact-form select {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 1rem;
  font-family: 'Open Sans', sans-serif;
  background-color: #fff;
}

.contact-form select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23666666%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 0.65em auto;
}

.contact-form .inquiry-type {
  border: none;
  padding: 0;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid #ddd;
  padding-bottom: 1.5rem;
}

.contact-form .inquiry-type legend {
  margin-bottom: 1.5rem;
}

.radio-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.radio-label {
  display: flex;
  align-items: center;
  cursor: pointer;
  font-size: 0.9rem;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #333;
}

.radio-text {
  position: relative;
  top: -6px;
}

.radio-label input[type="radio"] {
  display: none;
}

.custom-radio {
  display: inline-block;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  border: 2px solid #aaa;
  margin-right: 0.85rem;
  transition: all 0.2s;
  position: relative;
  flex-shrink: 0;
}

.radio-label input[type="radio"]:checked + .custom-radio {
  background: linear-gradient(135deg, #2196F3 0%, #1565C0 100%);
  border-color: #1565C0;
}

.radio-label input[type="radio"]:checked + .custom-radio::after {
  content: '';
  position: absolute;
  left: 6px;
  top: 0px;
  width: 8px;
  height: 16px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.submit-btn {
  background: linear-gradient(135deg, #2196F3 0%, #1565C0 100%);
  color: #fff;
  border: none;
  padding: 1rem 2rem;
  font-size: 0.9rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: background 0.2s;
  border-radius: 4px;
}
.submit-btn:hover, .submit-btn:focus {
  background: linear-gradient(135deg, #1565C0 0%, #2196F3 100%);
  color: #fff;
}

.info-card {
  margin-top: 2.5rem;
  padding: 2rem;
  background-color: #fdfdfd;
  border-radius: 8px;
  border: none;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.07);
  text-align: center;
}

.info-card-icon {
  font-size: 2.5rem;
  color: #C8102E;
  margin-bottom: 1rem;
}

.info-card h3 {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.3rem;
  margin: 0 0 0.5rem 0;
  color: #333;
}

.info-card p {
  font-size: 1rem;
  color: #666;
  line-height: 1.5;
  margin: 0;
}

.image-overlay__subtitle {
  font-family: 'Open Sans', sans-serif;
  font-size: 1.8rem;
  font-weight: 700;
}

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

.hover-effect {
  box-shadow: 0 8px 30px rgba(0,0,0,0.10), 0 2px 8px rgba(0,0,0,0.06);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-effect:hover {
  transform: translateY(-4px) scale(1.01);
  box-shadow: 0 16px 48px rgba(0,0,0,0.16), 0 4px 16px rgba(0,0,0,0.10);
}

.image-hover-effect {
  transition: transform 0.3s ease;
}

.image-hover-effect:hover {
  transform: scale(1.05);
}

.sticky-banner-container {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 19;
  display: flex;
  justify-content: center;
  padding: 10px 0;
  background-color: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid rgba(0,0,0,0.08);
}

.inquiry-button {
  z-index: 20;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 8px 18px;
  background-color: #fff;
  color: #333;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  border: 1px solid rgba(0,0,0,0.1);
  transition: all 0.2s ease-in-out;
}

.inquiry-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.inquiry-button i {
  font-size: 0.9rem;
  background: linear-gradient(135deg, #005bea 0%, #3ec6e0 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}