@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
:root {
  --primary-color: #111111;
  --accent-color: #00fdeb;
  --background-color: #e8f3f1;
  --topic-color: #00453d;
}
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: "Poppins", sans-serif;
}
body {
  overflow-x: hidden;
}
h1 {
  color: #000;
  font-size: 60px;
  font-weight: 700;
}
nav {
  position: fixed;
  top: 0;
  z-index: 99;
  width: 100%;
  transition: all 0.5s ease;
}
.nav-scroller {
  background: #ffffff;
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
}
nav .search-location-btn-container {
  background: #00453d;
  display: flex;
  justify-content: flex-end;
}
nav .wrapper {
  position: relative;
  max-width: 1700px;
  padding: 0 30px;
  height: 90px;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
nav .wrapper .logo {
  width: 245px;
  height: auto;
}
nav .wrapper .logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
nav .wrapper .nav-links {
  display: inline-flex;
  margin-bottom: 0;
  list-style: none;
}
nav .nav-links li {
  list-style: none;
}
nav .nav-links .nav-link {
  color: black;
  text-decoration: none;
  font-size: 18px;
  font-weight: 500;
  padding: 9px 15px;
  border-radius: 5px;
  transition: all 0.5s ease;
}
nav .nav-links .nav-link-button {
  align-items: center;
  background-clip: padding-box;
  background-color: #00453d;
  border: 1px solid transparent;
  box-shadow: rgba(0, 0, 0, 0.02) 0 1px 3px 0;
  box-sizing: border-box;
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  font-size: 18px;
  font-weight: 600;
  justify-content: center;
  line-height: 1.25;
  margin: 0;
  min-height: 3rem;
  padding: calc(0.875rem - 1px) calc(1.5rem - 1px);
  position: relative;
  text-decoration: none;
  transition: all 250ms;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  vertical-align: baseline;
  width: auto;
  border-radius: 10px;
  margin-left: 30px;
}
nav .nav-links .nav-link-button:hover,
nav .nav-links .nav-link-button:focus {
  background-color: #1e4c32;
  box-shadow: rgba(0, 0, 0, 0.1) 0 4px 12px;
}
nav .nav-links .nav-link-button i {
  margin-left: 10px;
}
nav .nav-links .mobile-item {
  display: none;
}
nav .nav-links .drop-menu {
  position: absolute;
  background: #fff;
  width: 180px;
  line-height: 45px;
  top: 85px;
  opacity: 0;
  visibility: hidden;
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
}
nav .nav-links li:hover .drop-menu,
nav .nav-links li:hover .mega-box {
  transition: all 0.3s ease;
  top: 70px;
  opacity: 1;
  visibility: visible;
}
nav .drop-menu li a {
  width: 100%;
  display: block;
  padding: 0 0 0 30px;
  font-weight: 400;
  border-radius: 0;
}
nav .mega-box {
  position: absolute;
  left: 0;
  width: 100%;
  padding: 0 30px;
  top: 85px;
  opacity: 0;
  visibility: hidden;
}
nav .mega-box .content {
  background: #fff;
  padding: 25px 20px;
  display: flex;
  width: 100%;
  justify-content: space-between;
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
}
nav .mega-box .content .row {
  width: calc(25% - 30px);
  line-height: 45px;
}
nav .content .row img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
nav .content .row header {
  color: #1e1101;
  font-size: 20px;
  font-weight: 500;
}
nav .content .row .mega-links {
  margin-left: -40px;
  border-left: 1px solid rgba(255, 255, 255, 0.09);
}
nav .row .mega-links li {
  padding: 0 20px;
}
nav .row .mega-links li a {
  padding: 0;
  padding: 0 20px;
  color: #1e1101;
  font-size: 17px;
  display: block;
}
.row .mega-links li a:hover {
  color: #1e1101;
}
nav .wrapper .btn {
  color: #000;
  font-size: 20px;
  cursor: pointer;
  display: none;
}
nav .wrapper .btn.close-btn {
  position: absolute;
  right: 30px;
  top: 10px;
}
nav input {
  display: none;
}
nav .login-btn {
  background-color: #ff8b00;
  color: #fff !important;
  font-weight: 600 !important;
}
@media screen and (max-width: 1317px) {
  nav .wrapper {
    max-width: 100%;
    padding: 0 20px;
  }
  nav .wrapper .logo {
    width: 200px;
  }
  nav .nav-links .nav-link {
    font-size: 15px;
    padding: 8px 16px;
  }
  nav .nav-links .nav-link-button {
    font-size: 16px;
    margin-left: 20px;
    padding: calc(0.75rem - 1px) calc(1.25rem - 1px);
  }
}
@media screen and (max-width: 1200px) {
  nav .wrapper {
    max-width: 100%;
    padding: 0 7px;
  }
  nav .wrapper .logo {
    width: 190px;
  }
  nav .nav-links .nav-link {
    font-size: 14px;
    padding: 8px 8px;
  }
  nav .nav-links .nav-link-button {
    font-size: 16px;
    margin-left: 0;
    padding: calc(0.75rem - 1px) calc(1.25rem - 1px);
  }
}
@media screen and (min-width: 970px) {
  nav .wrapper .nav-mobile-logo {
    display: none;
  }
}
@media screen and (max-width: 970px) {
  nav .wrapper .btn {
    display: block;
  }
  nav .wrapper .nav-links {
    position: fixed;
    height: 100vh;
    width: 100%;
    max-width: 100%;
    top: 0;
    left: -100%;
    background: #fff;
    display: block;
    padding: 50px 10px;
    line-height: 50px;
    box-shadow: 0 15px 15px rgba(0, 0, 0, 0.18);
    transition: all 0.3s ease;
  }
  nav .wrapper .nav-links.active {
    left: 0;
  }
  nav .wrapper .nav-links li {
    margin: 15px 10px;
  }
  nav .wrapper .nav-links li a {
    display: block;
    color: #000;
    text-decoration: none;
    line-height: 50px;
    font-size: 20px;
    font-weight: 500;
    padding: 0 20px;
    border-radius: 5px;
    transition: all 0.3s ease;
  }
  nav .nav-links li a:hover {
    background: #f0f0f0;
  }
  nav .nav-links .nav-link-button {
    display: block;
    margin: 20px 10px 0;
    text-align: center;
    line-height: 50px;
    background-color: #00453d;
    color: #fff;
    border-radius: 10px;
    font-size: 18px;
    font-weight: 600;
    transition: all 0.3s ease;
  }
  nav .nav-links .nav-link-button:hover {
    background-color: #1e4c32;
  }
  nav .nav-links .drop-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    padding-left: 20px;
    width: 100%;
    max-height: 0;
    overflow: hidden;
    box-shadow: none;
    transition: all 0.3s ease;
  }
  nav .nav-links .mobile-item {
    display: block;
  }
  .mobile-item .drop-menu {
    margin: 10px 20px;
  }
  .mobile-item .drop-menu li {
    margin: 0;
  }
  .mobile-item .drop-menu li a {
    border-radius: 5px;
    font-size: 18px;
  }
  nav .mega-box {
    position: static;
    max-height: 0;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    transition: all 0.3s ease;
  }
  nav .mega-box .content {
    box-shadow: none;
    flex-direction: column;
    padding: 20px 20px 0 20px;
  }
  nav .mega-box .content .row {
    width: 100%;
    margin-bottom: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }
  nav .mega-box .content .row:nth-child(1),
  nav .mega-box .content .row:nth-child(2) {
    border-top: 0;
  }
  nav .content .row .mega-links {
    border-left: 0;
    padding-left: 15px;
  }
  nav .row .mega-links li {
    margin: 0;
  }
  .row .mega-links li a {
    font-size: 17px;
    line-height: 45px;
  }
  nav .wrapper .nav-mobile-logo {
    width: 230px;
    height: auto;
  }
  nav .wrapper .nav-mobile-logo img {
    width: 100%;
    height: auto;
    object-fit: contain;
  }
}
@media screen and (max-width: 768px) {
  nav .wrapper {
    height: 70px;
    padding: 0 15px;
  }
  nav .wrapper .logo {
    width: 160px;
  }
  nav .wrapper .nav-links {
    max-width: 280px;
    padding: 65px 10px 30px;
  }
  nav .wrapper .nav-links li a {
    font-size: 18px;
    line-height: 45px;
  }
  nav .nav-links .nav-link-button {
    font-size: 16px;
    line-height: 45px;
  }
}
@media screen and (max-width: 480px) {
  nav .wrapper {
    height: 60px;
    padding: 0 10px;
  }
  body {
    padding-top: 10px;
  }
  nav .wrapper .logo {
    width: 140px;
  }
  nav .wrapper .nav-links {
    max-width: 100%;
    width: 100%;
    padding: 20px 10px;
  }
  nav .wrapper .nav-links li {
    margin: 10px 5px;
  }
  nav .wrapper .nav-links li a {
    font-size: 16px;
    line-height: 40px;
    padding: 0 15px;
  }
  nav .nav-links .nav-link-button {
    font-size: 16px;
    line-height: 40px;
    margin: 15px 5px 0;
  }
  nav .wrapper .btn {
    font-size: 18px;
  }
}
.landing-banner-section {
  padding-top: 170px;
  height: 800px;
  background-color: #111111;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background: linear-gradient(501deg, rgb(0 0 0 / 76%), rgb(0 0 0 / 0%)),
    url(/assect/images/landing_banner_image.webp);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.landing-banner-container {
  max-width: 1600px;
}
.landing-banner-section h1 {
  font-weight: 700;
  line-height: 85px;
  font-size: 70px;
}
@media (max-width: 993px) {
  .landing-banner-section h1 {
    margin-top: 50px;
    font-size: 50px;
    line-height: 50px;
  }
}
@media (max-width: 700px) {
  .landing-banner-section h1 {
    margin-top: 50px;
    font-size: 50px;
    line-height: 50px;
  }
}
@media (max-width: 480px) {
  .landing-banner-section h1 {
    font-size: 36px;
    line-height: 50px;
  }
}
.btn-div {
  display: flex;
}
.btn-div a {
  text-decoration: none;
}
.landing-btn {
  background-color: #ffffff;
  padding: 10px 25px;
  font-size: 20px;
  font-weight: 600;
  color: #111111;
  border-radius: 10px;
}
.landing-btn-special {
  background-color: transparent;
  border: 1px solid #00fdeb;
  padding: 10px 25px;
  font-size: 20px;
  font-weight: 600;
  color: #ffffff;
  border-radius: 10px;
}
.g-20 {
  gap: 20px;
}
.pl-10 {
  padding-left: 10px;
}
.banner-icon-box {
  padding: 25px;
  background-color: #ffffff;
  border-radius: 20px;
  color: #111111;
}
.img-div {
  display: flex;
  justify-content: center;
}
.star-div i {
  color: #00fdeb;
  font-size: 22px;
}
.icon-box-arrow {
  display: flex;
  justify-content: end;
  font-size: 30px;
}
.icon-box-arrow i {
  rotate: -28deg;
  color: #00fdeb;
}
.star-div span {
  font-size: 19px;
  font-weight: 700;
}
.fw-600 {
  font-weight: 600;
}
.fw-700 {
  font-weight: 700;
}
.logos-container {
  max-width: 1600px;
}
.logos-card {
  background: #ffffff;
  padding: 2rem;
  margin: 0 auto;
  border: none;
}
.logos-slider {
  display: flex;
  flex-wrap: nowrap;
  overflow: hidden;
  position: relative;
  -webkit-mask-image: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0) 0,
    #000 15%,
    #000 85%,
    rgba(0, 0, 0, 0) 100%
  );
  mask-image: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0) 0,
    #000 15%,
    #000 85%,
    rgba(0, 0, 0, 0) 100%
  );
}
.logos-slider-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5rem;
  animation: slide 80s linear infinite;
}
.logos-slider-container img {
  width: 150px;
  max-width: 150px;
}
.sub-head-section .header-section .title {
  position: relative;
  padding-bottom: 14px;
  margin-bottom: 25px;
  font-weight: 700;
  font-size: 45px;
  text-transform: capitalize;
}
@keyframes slide {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-100%, 0, 0);
  }
}
.services-section {
  position: relative;
  margin: 0 auto;
  margin-top: -150px;
  padding: 0;
  background-color: transparent;
  z-index: 10;
  max-width: 1500px;
  padding: 0 20px;
}
@media (max-width: 768px) {
  .services-section {
    margin-top: -140px;
  }
}
@media (max-width: 400px) {
  .services-section {
    margin-top: -50px;
  }
}
.services-section .services-cards {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  column-gap: 30px;
}
@media (max-width: 1200px) {
  .services-section .services-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    row-gap: 20px;
    column-gap: 20px;
  }
}
@media (max-width: 768px) {
  .services-section .services-cards {
    display: grid;
    grid-template-columns: 1fr;
  }
}
.services-section .service-card-special {
  background: linear-gradient(501deg, rgb(0 0 0 / 100%), rgb(0 69 61));
  background-size: cover;
  background-position: center;
  color: #ffffff;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 25px;
  border-radius: 16px;
  padding: 70px 30px 30px;
  transition: all 0.3s ease;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  height: 100%;
}
.services-section .service-card-special:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}
.services-section .service-card-special p {
  font-size: 16px;
  font-weight: 400;
  margin-bottom: 10px;
  position: relative;
  padding-left: 15px;
}
.services-section .service-card-special p:before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 20px;
  background-color: #00fdeb;
  border-radius: 2px;
}
.services-section .service-card-special h2 {
  font-size: 40px;
  font-weight: 700;
  line-height: 1.2;
  margin: 0;
}
.services-section a {
  text-decoration: none;
}
.services-section .services-card {
  background-color: #ffffff;
  padding: 30px;
  transition: all 0.3s ease;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: 16px;
  position: relative;
}
.services-section .services-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
  border-bottom: 3px solid #00fdeb;
}
.services-section .services-card div {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20px;
}
.services-section .services-card img {
  width: 80px;
  height: 80px;
  padding: 10px;
  background-color: #1e4c32;
  border-radius: 10px;
}
.services-section .services-card i {
  background-color: #1e4c32;
  color: white;
  padding: 8px;
  font-size: 18px;
  transform: rotate(318deg);
  border-radius: 50%;
}
.services-section .services-card h3 {
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 15px;
  color: #111111;
  position: relative;
  padding-bottom: 15px;
}
.services-section .services-card p {
  font-size: 16px;
  line-height: 1.6;
  color: #666;
  margin-bottom: 0;
  flex-grow: 1;
}
.landing-banner-section {
  padding-bottom: 150px;
}
@media (max-width: 768px) {
  .services-section .services-cards {
    grid-template-columns: 1fr;
  }
  .services-section .service-card-special h2 {
    font-size: 32px;
  }
}
.landing-continent-section {
  padding: 70px 0;
  background-color: #ffffff;
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.03);
}
.landing-continent-section .container {
  max-width: 1500px;
}
.landing-continent-section h2 {
  color: #00453d;
  font-size: 32px;
  font-weight: 400;
  margin-bottom: 1.5rem;
  position: relative;
}
.landing-continent-section h3 {
  color: #111111;
  font-size: 22px;
  font-weight: 600;
  margin: 20px 0 15px;
}
.landing-continent-section p {
  font-size: 16px;
  line-height: 1.7;
  margin-bottom: 1.5rem;
  color: black;
}
.landing-continent-section .continent-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  margin-top: 25px;
  gap: 12px;
}
.landing-banner-section .landing-banner-btn-section {
  display: flex;
  flex-direction: row;
}
@media (max-width: 390px) {
  .landing-continent-section .continent-buttons {
    display: grid;
    grid-template-columns: 1fr;
    margin-top: 25px;
    gap: 12px;
  }
  .landing-banner-section .landing-banner-btn-section {
    flex-direction: column;
  }
}
.landing-continent-section .continent-btn {
  height: 100%;
  padding: 12px 24px;
  border: none;
  font-size: 15px;
  font-weight: 600;
  color: white;
  transition: all 0.3s ease;
  cursor: pointer;
  background-color: #00453d;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(26, 60, 110, 0.2);
  width: -webkit-fill-available;
}
.landing-continent-section .continent-btn:hover {
  background-color: #1e4c32;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(26, 60, 110, 0.3);
}
.landing-continent-section .world-map-container {
  position: relative;
  overflow: hidden;
  text-align: center;
}
.landing-continent-section .world-map-img {
  max-width: 100%;
  height: auto;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  border: 1px solid #e2e8f0;
}
.landing-continent-section .world-map-img:hover {
  transform: scale(1.01);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
}
.landing-continent-section .map-container {
  padding: 2rem 0.8rem;
  position: relative;
  display: inline-block;
}
.landing-continent-section .map-container img {
  width: 100%;
}
.landing-continent-section .map-container .point {
  cursor: pointer;
  position: absolute;
  width: 10px;
  height: 10px;
  background-color: #00fdeb;
  border-radius: 50%;
  transition: all 0.3s ease;
  will-change: transform, box-shadow;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 rgba(44, 82, 130, 0.4);
  animation: corp-pulse 3s infinite;
}
.landing-continent-section .map-container .point:hover {
  animation: none;
  transform: translate(-50%, -50%) scale3D(1.3, 1.3, 1);
  background-color: #4299e1;
  box-shadow: 0 0 0 5px rgba(66, 153, 225, 0.3);
}
@keyframes corp-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(44, 82, 130, 0.5);
  }
  70% {
    box-shadow: 0 0 0 15px rgba(44, 82, 130, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(44, 82, 130, 0);
  }
}
@media (max-width: 992px) {
  .landing-continent-section h2 {
    font-size: 28px;
  }
  .landing-continent-section h3 {
    font-size: 20px;
  }
  .landing-continent-section p {
    font-size: 15px;
  }
}
.map-container .venezuela {
  top: 54%;
  left: 24%;
}
.map-container .brasil {
  top: 64%;
  left: 28%;
}
.map-container .argentina {
  top: 77%;
  left: 27%;
}
.map-container .colombia {
  top: 55%;
  left: 21%;
}
.map-container .panama {
  top: 51%;
  left: 18%;
}
.map-container .mexico {
  top: 38%;
  left: 12%;
}
.map-container .usa {
  top: 26%;
  left: 17%;
}
.map-container .arabia {
  top: 40%;
  left: 53%;
}
.map-container .turquia {
  top: 31%;
  left: 57%;
}
.map-container .rusia {
  top: 16%;
  left: 67%;
}
.map-container .china {
  top: 40%;
  left: 72%;
}
.map-container .japon {
  top: 34%;
  left: 86%;
}
.map-container .australia {
  top: 72%;
  left: 86%;
}
.about-section {
  padding: 80px 0;
  position: relative;
  background-color: #1e4c32;
}
.about-section .container {
  max-width: 1500px;
}
.about-section .pre-title {
  color: #ffffff;
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 0;
  letter-spacing: 1px;
}
.about-section .title {
  font-size: 42px;
  font-weight: 700;
  margin-bottom: 30px;
  line-height: 1.2;
  text-transform: capitalize;
  color: white;
}
.about-section .title span {
  color: #ffffff;
  text-decoration: underline;
}
.about-section .brand-name {
  color: #ffffff;
  font-weight: 700;
  margin-right: 5px;
}
.about-section p {
  color: #ffffff;
  font-size: 16px;
  line-height: 1.8;
  margin-bottom: 30px;
}
.about-section .feature-item {
  display: flex;
  align-items: center;
}
.about-section .feature-item .icon {
  font-size: 20px;
  margin-right: 10px;
  background-color: #ffffff;
  padding: 9px 11px;
  border-radius: 50%;
  color: #00453d;
}
.about-section .feature-text {
  font-weight: 500;
  color: #ffffff;
}
.about-section .about-image {
  overflow: hidden;
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
  border-radius: 16px;
}
.about-section .about-image img {
  width: 100%;
  height: auto;
  object-fit: cover;
}
@media (max-width: 991px) {
  .about-section .title {
    font-size: 32px;
  }
  .about-section .about-image {
    margin-top: 40px;
  }
}
.landing-feature-section {
  padding: 80px 0;
  background-color: #ffffff;
}
.landing-feature-section .container {
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 20px;
}
.landing-feature-section .feature-heading-section {
  text-align: center;
  margin-bottom: 60px;
  position: relative;
}
.landing-feature-section .feature-heading-section h2 {
  font-size: 36px;
  font-weight: 700;
  color: #00453d;
  margin-bottom: 20px;
}
.landing-feature-section .feature-heading-section p {
  font-size: 18px;
  margin: 0 auto;
  color: #111111;
}
.landing-feature-section .feature-content-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 25px;
}
.landing-feature-section .feature {
  display: flex;
}
.landing-feature-section .feature i {
  color: white;
  font-size: 24px;
  margin-right: 20px;
  background: #00453d;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  flex-shrink: 0;
}
.landing-feature-section .feature div {
  flex: 1;
}
.landing-feature-section .feature h3 {
  font-size: 22px;
  margin-bottom: 12px;
  color: #00453d;
  font-weight: 600;
}
.landing-feature-section .feature p {
  color: #111111;
  font-size: 16px;
}
@media (max-width: 768px) {
  .landing-feature-section .feature-content-section {
    grid-template-columns: 1fr;
  }
  .landing-feature-section .feature-heading-section h2 {
    font-size: 28px;
  }
  .landing-feature-section .feature {
    padding: 20px;
  }
}
.landing-partner-section {
  padding: 80px 0;
  background-color: #ffffff;
  position: relative;
  overflow: hidden;
}
.landing-partner-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #d8ede1;
  z-index: 0;
}
.landing-partner-section .container {
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 30px;
  position: relative;
  z-index: 1;
}
.landing-partner-section .landing-partner-content-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 25px;
}
@media (max-width: 768px) {
  .landing-partner-section .landing-partner-content-section {
    display: grid;
    grid-template-columns: 1fr;
    gap: 25px;
  }
}
.landing-partner-section .landing-partner-heading-section {
  text-align: left;
}
.landing-partner-section .landing-partner-heading-section h2 {
  font-size: 38px;
  font-weight: 600;
  color: #00453d;
  margin-bottom: 25px;
  position: relative;
  display: inline-block;
  letter-spacing: -0.5px;
}
.landing-partner-section .landing-partner-heading-section p {
  font-size: 17px;
  color: #111111;
  line-height: 1.7;
  font-weight: 400;
  margin-bottom: 30px;
}
.landing-partner-section .landing-partner-heading-section button {
  background-color: #ffffff;
  border: 1px solid #00453d !important;
  color: #00453d;
  border: none;
  padding: 12px 28px;
  font-size: 16px;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  border-radius: 10px;
}
.landing-partner-section .landing-partner-heading-section button:hover {
  background-color: #00453d;
  color: white;
}
.landing-partner-section .landing-partner-heading-section button::after {
  content: "";
  position: absolute;
  width: 0;
  height: 3px;
  background-color: #00fdeb;
  bottom: 0;
  left: 0;
  transition: width 0.3s ease;
}
.landing-partner-section .landing-partner-heading-section button:hover::after {
  width: 100%;
}
.landing-partner-section .landing-partner-logo-section {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 25px;
  justify-content: center;
  align-items: center;
}
.landing-partner-section .landing-partner-logo-section img {
  max-width: 100%;
  height: auto;
  transition: all 0.3s ease;
  display: block;
  margin: 0 auto;
  padding: 20px;
  background-color: #ffffff;
  border: 1px solid rgba(0, 69, 61, 0.08);
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
}
.landing-partner-section .landing-partner-logo-section img:hover {
  filter: grayscale(0%);
  opacity: 1;
  transform: translateY(-5px);
  border-color: rgba(0, 253, 235, 0.3);
  box-shadow: 0 8px 20px rgba(0, 69, 61, 0.1);
}
@media (max-width: 992px) {
  .landing-partner-section {
    padding: 80px 0;
  }
  .landing-partner-section .landing-partner-logo-section {
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 20px;
  }
}
@media (max-width: 1020px) {
  .landing-partner-section .landing-partner-heading-section h2 {
    font-size: 32px;
  }
  .landing-partner-section .landing-partner-heading-section p {
    font-size: 16px;
  }
  .landing-partner-section .landing-partner-logo-section {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 15px;
  }
  .landing-partner-section .landing-partner-logo-section img {
    padding: 15px;
  }
}
@media (max-width: 576px) {
  .landing-partner-section {
    padding: 60px 0;
  }
  .landing-partner-section .landing-partner-heading-section {
    margin-bottom: 50px;
  }
  .landing-partner-section .landing-partner-heading-section h2 {
    font-size: 28px;
  }
  .landing-partner-section .landing-partner-logo-section {
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  }
}
.heading-banner-section {
  position: relative;
  padding: 160px 0 80px;
  overflow: hidden;
}
.heading-banner-section .heading-banner-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, rgba(0, 69, 61, 1), rgba(17, 17, 17, 0)),
    url(/assect/images/banner_image/dedicated_server_banner_image.webp);
  background-size: cover;
  background-position: center;
}
.heading-banner-section .dedicated-server-banner-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, rgba(0, 69, 61, 1), rgba(17, 17, 17, 0)),
    url(/assect/images/banner_image/dedicated_server_banner_image.webp);
  background-size: cover;
  background-position: center;
}
.heading-banner-section .data-center-banner-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, rgba(0, 69, 61, 1), rgba(17, 17, 17, 0)),
    url(/assect/images/banner_image/data_center_banner_image.webp);
  background-size: cover;
  background-position: center;
}
.heading-banner-section .network-banner-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, rgba(0, 69, 61, 1), rgba(17, 17, 17, 0)),
    url(/assect/images/banner_image/network_banner_image.webp);
  background-size: cover;
  background-position: center;
}
.heading-banner-section .about-us-banner-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, rgba(0, 69, 61, 1), rgba(17, 17, 17, 0)),
    url(/assect/images/banner_image/about_us_banner_image.webp);
  background-size: cover;
  background-position: center;
}
.heading-banner-section .gpu-banner-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, rgba(0, 69, 61, 1), rgba(17, 17, 17, 0)),
    url(/assect/images/banner_image/gpu_banner_image.webp);
  background-size: cover;
  background-position: top;
}
.heading-banner-section .colocation-banner-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, rgba(0, 69, 61, 1), rgba(17, 17, 17, 0)),
    url(/assect/images/banner_image/colocation_banner_image.webp);
  background-size: cover;
  background-position: center;
}
.heading-banner-section .heading-banner-content {
  position: relative;
  z-index: 2;
  padding-top: 60px;
}
@media (max-width: 999px) {
  .heading-banner-section .heading-banner-content {
    position: relative;
    z-index: 2;
    margin-top: 90px;
  }
}
.heading-banner-section .banner-title {
  font-size: 3.2rem;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 1.5rem;
  position: relative;
  letter-spacing: -0.5px;
}
.heading-banner-section .banner-title::after {
  content: "";
  display: block;
  width: 60px;
  height: 3px;
  background-color: #00fdeb;
  margin-top: 15px;
}
.heading-banner-section .banner-description {
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.85);
  max-width: 650px;
  line-height: 1.7;
  margin-bottom: 2rem;
  font-weight: 300;
}
.heading-banner-section .banner-breadcrumb {
  background: transparent;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.heading-banner-section .banner-breadcrumb-item {
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.9rem;
  font-weight: 400;
  text-decoration: none;
  transition: color 0.2s ease;
}
.heading-banner-section .banner-breadcrumb-item:hover {
  color: #00fdeb;
}
.heading-banner-section .banner-breadcrumb-divider {
  color: rgba(255, 255, 255, 0.4);
  margin: 0 8px;
}
.heading-banner-section .banner-breadcrumb-active {
  color: #00fdeb;
  font-weight: 500;
}
.heading-banner-section .banner-cta-container {
  margin-top: 2rem;
}
.heading-banner-section .banner-cta-primary {
  background-color: #00453d;
  color: white;
  border: none;
  padding: 12px 26px;
  font-weight: 500;
  border-radius: 3px;
  transition: all 0.3s ease;
  text-decoration: none;
  display: inline-block;
  font-size: 0.95rem;
}
.heading-banner-section .banner-cta-primary:hover {
  background-color: #00fdeb;
  color: #111111;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 253, 235, 0.2);
}
.heading-banner-section .geometric-element {
  position: absolute;
  bottom: -50px;
  right: -50px;
  width: 300px;
  height: 300px;
  border: 2px solid rgba(0, 253, 235, 0.1);
  border-radius: 50%;
  z-index: 1;
}
.heading-banner-section .geometric-element-2 {
  position: absolute;
  top: -80px;
  right: 20%;
  width: 150px;
  height: 150px;
  border: 1px solid rgba(0, 253, 235, 0.15);
  border-radius: 50%;
  z-index: 1;
}
@media (max-width: 991px) {
  .heading-banner-section .banner-title {
    font-size: 2.5rem;
  }
  .heading-banner-section .banner-description {
    font-size: 1rem;
  }
  .heading-banner-section .heading-banner-section {
    padding: 80px 0 60px;
  }
}
.continent-continent-section {
  padding: 80px 0 0;
  background-color: #ffffff;
  position: relative;
}
.continent-continent-section .container {
  max-width: 1500px;
  margin: 0 auto;
  padding: 0 20px;
  position: relative;
}
.continent-continent-section .continent-heading-section {
  text-align: center;
  margin-bottom: 40px;
}
.continent-continent-section .continent-heading-section p:first-child {
  color: #00453d;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 10px;
}
.continent-continent-section .continent-heading-section h2 {
  font-size: 50px;
  margin-bottom: 20px;
  color: #111111;
  font-weight: 700;
}
.continent-continent-section .continent-heading-section p:last-child {
  color: #555;
  margin: 0 auto;
  line-height: 1.6;
}
.continent-continent-section .cards-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin-bottom: -100px;
  position: relative;
  z-index: 2;
}
.continent-continent-section .cards-container a {
  text-decoration: none;
}
.continent-continent-section .continent-card {
  background-color: #ffffff;
  overflow: hidden;
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  position: relative;
  border-top: 4px solid #00453d;
  border-radius: 11px;
}
.continent-continent-section .continent-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}
.continent-continent-section .continent-card:hover h3::after {
  width: 70px;
}
.continent-continent-section .continent-card h3 {
  color: #111111;
  font-size: 30px;
  font-weight: 700;
  padding: 25px 25px 15px;
  position: relative;
}
.continent-continent-section .continent-card h3 i {
  color: #1e7067;
}
.continent-continent-section .continent-card p {
  padding: 0 25px 15px;
  color: #555;
  line-height: 1.6;
  height: 100px;
}
.continent-continent-section .btn {
  align-items: center;
  background-clip: padding-box;
  background-color: #00453d;
  border: 1px solid transparent;
  border-radius: 0;
  box-shadow: rgba(0, 0, 0, 0.02) 0 1px 3px 0;
  box-sizing: border-box;
  color: #ffffff;
  cursor: pointer;
  display: inline-flex;
  font-size: 16px;
  font-weight: 600;
  justify-content: center;
  line-height: 1.25;
  margin: 0;
  min-height: 3rem;
  padding: calc(0.875rem - 1px) calc(1.5rem - 1px);
  position: relative;
  text-decoration: none;
  transition: all 250ms;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  vertical-align: baseline;
  width: auto;
  border-radius: 8px;
}
.continent-continent-section .btn:hover,
.continent-continent-section .btn:focus {
  background-color: #003330;
  box-shadow: rgba(0, 0, 0, 0.1) 0 4px 12px;
}
.continent-continent-section .btn:hover {
  transform: translateY(-1px);
}
.continent-continent-section .btn:active {
  background-color: #003330;
  box-shadow: rgba(0, 0, 0, 0.06) 0 2px 4px;
  transform: translateY(0);
}
.continent-continent-section .btn-outline:hover {
  background-color: #00453d;
  color: #ffffff;
}
.continent-continent-section .btn-accent:hover {
  background-color: #00d6c8;
}
.continent-continent-section .btn-accent {
  background-color: #00fdeb;
  color: #00453d;
  border-radius: 8px;
}
.continent-continent-section .card-footer {
  padding: 20px 25px;
  background-color: #f9f9f9;
  border-top: 1px solid #eee;
  text-align: center;
}
.continent-continent-section .continent-footer-section {
  background-color: #00453d;
  color: #ffffff;
  padding: 115px 0 15px;
  position: relative;
  z-index: 1;
  margin-top: -40px;
}
.continent-continent-section .continent-footer-content {
  padding: 40px;
  max-width: 1300px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.continent-continent-section .continent-footer-content h4 {
  font-size: 28px;
  margin-bottom: 15px;
  position: relative;
  display: inline-block;
}
.continent-continent-section .continent-footer-content p {
  margin-bottom: 25px;
  color: #e0e0e0;
  line-height: 1.6;
}
@media (max-width: 992px) {
  .continent-continent-section .cards-container {
    grid-template-columns: repeat(2, 1fr);
  }
  .continent-continent-section .continent-footer-content {
    flex-direction: column;
    align-items: flex-start;
  }
}
@media (max-width: 768px) {
  .continent-continent-section .cards-container {
    grid-template-columns: 1fr;
  }
  .continent-continent-section .continent-heading-section h2 {
    font-size: 28px;
  }
  .continent-continent-section .continent-section {
    padding: 60px 0 150px;
  }
  .continent-continent-section .continent-footer-section {
    padding: 120px 0 50px;
  }
}
.continent-continent-section .badge {
  position: absolute;
  top: 10px;
  right: 20px;
  background-color: #00fdeb;
  color: #00453d;
  font-size: 12px;
  padding: 5px 10px;
  border-radius: 20px;
  font-weight: bold;
}
.continent-continent-section .continent-card img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  transition: transform 0.3s ease;
  border-bottom: 1px solid #f0f0f0;
}
.continent-continent-section .continent-card:hover img {
  transform: scale(1.05);
}
.continent-continent-section .continent-card .image-container {
  position: relative;
  overflow: hidden;
}
.continent-continent-section .continent-card .image-container::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to bottom,
    rgba(0, 69, 61, 0.1),
    rgba(0, 69, 61, 0.2)
  );
  opacity: 1;
  transition: opacity 0.3s ease;
}
.continent-continent-section .continent-card:hover .image-container::after {
  opacity: 1;
}
.continent-continent-section .continent-card .continent-icon {
  position: absolute;
  bottom: 15px;
  right: 15px;
  width: 40px;
  height: 40px;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  color: #00453d;
  z-index: 1;
}
.continent-description-section .container {
  max-width: 1500px;
  margin: 0 auto;
  padding: 0 20px;
}
.continent-description-section {
  padding: 90px 0;
  position: relative;
  overflow: hidden;
}
.continent-description-section::before {
  content: "";
  position: absolute;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: linear-gradient(
    135deg,
    rgba(0, 69, 61, 0.05) 0%,
    rgba(0, 253, 235, 0.05) 100%
  );
  top: -300px;
  left: -300px;
  z-index: 0;
}
.continent-description-section::after {
  content: "";
  position: absolute;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: linear-gradient(
    135deg,
    rgba(0, 253, 235, 0.05) 0%,
    rgba(0, 69, 61, 0.05) 100%
  );
  bottom: -200px;
  right: -200px;
  z-index: 0;
}
.continent-description-section .continent-description-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 50px;
}
.continent-description-section .continent-description-text {
  flex: 1;
  min-width: 300px;
}
.continent-description-section .continent-description-visual {
  flex: 1;
  min-width: 300px;
}
.continent-description-section .section-title {
  position: relative;
  font-size: 34px;
  margin-bottom: 30px;
  color: #111111;
  font-weight: 700;
  line-height: 1.3;
}
.continent-description-section .continent-description-text p {
  margin-bottom: 20px;
  color: #444;
  font-size: 16px;
}
.continent-description-section .continent-description-text p:last-child {
  margin-bottom: 0;
}
.continent-description-section .highlight {
  color: #00453d;
  font-weight: 600;
}
.continent-description-section .features-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 40px;
}
.continent-description-section .feature-item {
  background-color: #ffffff;
  display: flex;
  align-items: center;
}
.continent-description-section .feature-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  color: #00453d;
  font-size: 24px;
  border-radius: 50%;
  margin-bottom: 20px;
}
.continent-description-section .feature-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 10px;
  color: #00453d;
}
.continent-description-section .feature-description {
  font-size: 14px;
  color: #666;
}
@media (max-width: 992px) {
  .continent-description-section {
    padding: 70px 0;
  }
  .continent-description-section .section-title {
    font-size: 30px;
  }
}
@media (max-width: 768px) {
  .continent-description-section .section-title {
    font-size: 26px;
  }
  .continent-description-section .features-grid {
    grid-template-columns: 1fr;
  }
}
.dedicated-server-quality-section {
  background-color: #ffffff;
  color: #111111;
  padding: 80px 0;
}
.dedicated-server-quality-section .container {
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 20px;
}
.dedicated-server-quality-section .content-wrapper {
  display: flex;
  gap: 60px;
  align-items: center;
}
.dedicated-server-quality-section .text-content {
  flex: 1;
}
.dedicated-server-quality-section h2 {
  color: #00453d;
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 20px;
  position: relative;
}
.dedicated-server-quality-section .subtitle {
  font-size: 18px;
  line-height: 1.5;
  margin-bottom: 40px;
  color: #111111;
}
.dedicated-server-quality-section .features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 40px;
}
.dedicated-server-quality-section .feature-card {
  background-color: #ffffff;
  border: 1px solid rgba(0, 69, 61, 0.1);
  padding: 24px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  border-radius: 10px;
}
.dedicated-server-quality-section .feature-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 30px rgba(0, 69, 61, 0.12);
  border-color: #00fdeb;
}
.dedicated-server-quality-section .feature-icon {
  margin-bottom: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 65px;
  height: 65px;
  background-color: rgba(0, 253, 235, 0.1);
  border-radius: 50%;
}
.dedicated-server-quality-section .feature-icon img {
  width: 50px;
  height: auto;
}
.dedicated-server-quality-section .feature-card h3 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 12px;
  color: #00453d;
}
.dedicated-server-quality-section .feature-card p {
  font-size: 14px;
  line-height: 1.6;
  color: #555;
}
.dedicated-server-quality-section .cta-section {
  margin-top: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.dedicated-server-quality-section .cta-text {
  font-size: 18px;
  font-weight: 600;
  color: #111111;
  flex: 1;
}
.dedicated-server-quality-section .image-content {
  flex: 1;
  position: relative;
  display: flex;
  justify-content: center;
}
.dedicated-server-quality-section .server-image {
  width: 100%;
  height: auto;
  position: relative;
  z-index: 2;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  border-radius: 16px;
}
.dedicated-server-quality-section .image-accent {
  position: absolute;
  width: 80%;
  height: 80%;
  background-color: rgba(0, 69, 61, 0.1);
  bottom: -20px;
  right: -20px;
  z-index: 1;
  border-right: 3px solid #00453d;
  border-bottom: 3px solid #00453d;
  border-bottom-right-radius: 16px;
}
@media (max-width: 1200px) {
  .dedicated-server-quality-section .content-wrapper {
    flex-direction: column;
  }
  .dedicated-server-quality-section .features-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .dedicated-server-quality-section .image-content {
    margin-top: 40px;
  }
}
@media (max-width: 768px) {
  .dedicated-server-quality-section .features-grid {
    grid-template-columns: 1fr;
  }
  .dedicated-server-quality-section .cta-section {
    flex-direction: column;
    gap: 20px;
    align-items: flex-start;
  }
}
.dedicated-server-manage-section {
  background: #1d4b32;
  padding: 50px 0;
  color: white;
}
.dedicated-server-manage-section .container {
  max-width: 1600px;
}
.dedicated-server-manage-section h2 {
  font-size: 36px;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 20px;
}
.dedicated-server-features-section {
  color: #111111;
  overflow: hidden;
}
.dedicated-server-features-section .features-container {
  display: flex;
  min-height: 650px;
}
.dedicated-server-features-section .features-intro {
  background: #1d4b32;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 60px;
  width: 40%;
  position: relative;
}
.dedicated-server-features-section .features-intro h2 {
  font-size: 36px;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 20px;
}
.dedicated-server-features-section .features-intro p {
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 30px;
  opacity: 0.9;
}
.dedicated-server-features-section .server-image-container {
  margin-top: 40px;
  align-self: center;
}
.dedicated-server-features-section .server-image {
  max-width: 100%;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  border-radius: 10px;
}
.dedicated-server-features-section .features-details {
  background-color: #ffffff;
  width: 60%;
  padding: 60px;
}
.dedicated-server-features-section .features-header {
  margin-bottom: 40px;
  max-width: 700px;
}
.dedicated-server-features-section .features-header h2 {
  color: #00453d;
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 16px;
  position: relative;
}
.dedicated-server-features-section .features-header p {
  font-size: 16px;
  line-height: 1.6;
  color: #555;
}
.dedicated-server-features-section .features-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.dedicated-server-features-section .feature-card {
  background-color: #f8f8f8;
  padding: 24px;
  transition: all 0.3s ease;
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 16px;
}
.dedicated-server-features-section .feature-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
  border-color: #00fdeb;
}
.dedicated-server-features-section .feature-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  color: #00453d;
}
.dedicated-server-features-section .feature-icon img {
  width: 60px;
  height: auto;
}
.dedicated-server-features-section .feature-card h3 {
  color: #00453d;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 12px;
}
.dedicated-server-features-section .feature-card p {
  font-size: 14px;
  line-height: 1.6;
  color: #555;
}
@media (max-width: 1200px) {
  .dedicated-server-features-section .features-container {
    flex-direction: column;
  }
  .dedicated-server-features-section .features-intro,
  .dedicated-server-features-section .features-details {
    width: 100%;
  }
}
@media (max-width: 768px) {
  .dedicated-server-features-section .features-grid {
    grid-template-columns: 1fr;
  }
  .dedicated-server-features-section .features-intro,
  .dedicated-server-features-section .features-details {
    padding: 40px 20px;
  }
}
.modern-connectivity-section {
  padding: 100px 0;
  background-color: #ffffff;
  color: #111111;
}
.modern-connectivity-section .container {
  max-width: 1500px;
  margin: 0 auto;
  padding: 0 20px;
}
.modern-connectivity-section .content-wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 60px;
}
.modern-connectivity-section .text-content {
  flex: 1;
  min-width: 300px;
}
.modern-connectivity-section .section-title {
  font-size: 2.5rem;
  font-weight: 700;
  color: #111111;
  margin-bottom: 20px;
  line-height: 1.2;
}
.modern-connectivity-section .section-description {
  font-size: 17px;
  margin-bottom: 30px;
  color: #111111;
}
.modern-connectivity-section .feature-block {
  margin-bottom: 25px;
  padding-left: 20px;
  border-left: 2px solid #00453d;
}
.modern-connectivity-section .feature-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: #00453d;
  margin-bottom: 10px;
}
.modern-connectivity-section .feature-description {
  font-size: 16px;
  color: #111111;
}
.modern-connectivity-section .cta-wrapper {
  margin-top: 40px;
}
.modern-connectivity-section .cta-button {
  display: inline-block;
  padding: 14px 32px;
  background-color: #00453d;
  color: #ffffff;
  text-decoration: none;
  font-weight: 600;
  border-radius: 4px;
  transition: all 0.3s ease;
  border: 2px solid #00453d;
}
.modern-connectivity-section .cta-button:hover {
  background-color: transparent;
  color: #00453d;
}
.modern-connectivity-section .image-content {
  flex: 1;
  min-width: 300px;
  position: relative;
}
.modern-connectivity-section .image-container {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0, 69, 61, 0.1);
}
.modern-connectivity-section .image-container img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.5s ease;
}
.modern-connectivity-section .image-container:hover img {
  transform: scale(1.03);
}
.modern-connectivity-section .image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    135deg,
    rgba(0, 69, 61, 0.2) 0%,
    rgba(0, 253, 235, 0.1) 100%
  );
}
.modern-connectivity-section .highlight-box {
  position: absolute;
  bottom: -25px;
  right: 20px;
  background-color: #ffffff;
  padding: 15px 20px;
  border-radius: 6px;
  box-shadow: 0 10px 30px rgba(0, 69, 61, 0.1);
  display: flex;
  align-items: center;
  gap: 15px;
  max-width: 80%;
}
.modern-connectivity-section .highlight-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: rgba(0, 253, 235, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
}
.modern-connectivity-section .highlight-icon i {
  color: #00fdeb;
  font-size: 24px;
}
.modern-connectivity-section .highlight-box p {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 500;
  color: #00453d;
}
@media (max-width: 991px) {
  .modern-connectivity-section .content-wrapper {
    flex-direction: column;
  }
  .modern-connectivity-section .image-content {
    order: -1;
    margin-bottom: 40px;
  }
  .modern-connectivity-section .highlight-box {
    bottom: -15px;
    right: 10px;
  }
}
@media (max-width: 767px) {
  .modern-connectivity-section .modern-connectivity-section {
    padding: 60px 0;
  }
  .modern-connectivity-section .section-title {
    font-size: 2rem;
  }
}
.fast-connectivity-section {
  padding: 100px 0;
  background-color: #ffffff;
  background: #1e4c32;
  color: #111111;
}
.fast-connectivity-section .container {
  max-width: 1500px;
  margin: 0 auto;
  padding: 0 20px;
}
.fast-connectivity-section .section-header {
  text-align: center;
  margin-bottom: 60px;
}
.fast-connectivity-section .section-tag {
  display: inline-block;
  padding: 6px 16px;
  border-radius: 50px;
  color: #ffffff;
  font-size: 16px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 10px;
}
.fast-connectivity-section .section-title {
  font-size: 2.5rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 20px;
  line-height: 1.2;
}
.fast-connectivity-section .section-underline {
  display: block;
  width: 80px;
  height: 3px;
  background-color: #00fdeb;
  margin: 0 auto;
}
.fast-connectivity-section .features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
  margin-bottom: 40px;
}
.fast-connectivity-section .feature-card {
  position: relative;
  background-color: #ffffff;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 69, 61, 0.08);
  padding: 40px 30px;
  transition: all 0.3s ease;
  overflow: hidden;
  border: 1px solid #f3f4f6;
}
.fast-connectivity-section .feature-icon {
  width: 60px;
  height: 60px;
  border-radius: 10px;
  background-color: rgba(0, 69, 61, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 25px;
}
.fast-connectivity-section .feature-icon i {
  font-size: 30px;
  color: #00453d;
}
.fast-connectivity-section .feature-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: #00453d;
  margin-bottom: 15px;
}
.fast-connectivity-section .feature-description {
  font-size: 1rem;
  line-height: 1.6;
  color: #111111;
  margin-bottom: 20px;
}
.fast-connectivity-section .feature-benefits {
  list-style: none;
  padding: 0;
  margin: 0;
}
.fast-connectivity-section .feature-benefits li {
  position: relative;
  padding-left: 25px;
  margin-bottom: 10px;
  font-size: 0.95rem;
}
.fast-connectivity-section .feature-benefits li:before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 8px;
  height: 8px;
  background-color: #00fdeb;
  border-radius: 50%;
}
.fast-connectivity-section .section-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  background-color: #e9e9e9;
  border-radius: 10px;
  padding: 40px;
}
.fast-connectivity-section .stats-container {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
}
.fast-connectivity-section .stat-item {
  display: flex;
  flex-direction: column;
}
.fast-connectivity-section .stat-value {
  font-size: 1.75rem;
  font-weight: 700;
  color: #00453d;
}
.fast-connectivity-section .stat-label {
  font-size: 0.875rem;
  color: #111111;
  opacity: 0.8;
}
.fast-connectivity-section .cta-button {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  background-color: #00453d;
  color: #ffffff;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 500;
  transition: all 0.3s ease;
}
.fast-connectivity-section .cta-button:hover {
  background-color: #111111;
  transform: translateY(-2px);
}
.fast-connectivity-section .cta-button i {
  font-size: 20px;
  color: white;
}
@media (max-width: 991px) {
  .fast-connectivity-section .section-footer {
    flex-direction: column;
    gap: 30px;
  }
  .fast-connectivity-section .stats-container {
    width: 100%;
    justify-content: space-between;
  }
}
@media (max-width: 767px) {
  .fast-connectivity-section .fast-connectivity-section {
    padding: 60px 0;
  }
  .fast-connectivity-section .section-title {
    font-size: 2rem;
  }
  .fast-connectivity-section .stats-container {
    flex-direction: column;
    gap: 20px;
    margin-bottom: 20px;
  }
  .fast-connectivity-section .feature-card {
    padding: 30px 20px;
  }
}
.bandwidth-providers-section {
  padding: 60px 0 0;
  background-color: #ffffff;
  color: #111111;
}
.bandwidth-providers-section .container {
  max-width: 1500px;
  margin: 0 auto;
  padding: 0 20px;
}
.bandwidth-providers-section .section-header {
  text-align: center;
  margin-bottom: 50px;
}
.bandwidth-providers-section .section-header h2 {
  font-size: 2.5rem;
  font-weight: 700;
  color: #00453d;
  margin-bottom: 20px;
  line-height: 1.2;
}
.bandwidth-providers-section .content-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  margin-bottom: 60px;
  align-items: center;
}
.bandwidth-providers-section .text-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.bandwidth-providers-section .feature-box {
  display: flex;
  gap: 20px;
  padding: 15px 0;
  background-color: #ffffff;
}
.bandwidth-providers-section .icon-wrapper {
  flex-shrink: 0;
  width: 50px;
  height: 50px;
  border-radius: 10px;
  background-color: #00453d;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bandwidth-providers-section .icon-wrapper i {
  font-size: 24px;
  color: #00fdeb;
}
.bandwidth-providers-section .feature-box h3 {
  font-size: 1.25rem;
  font-weight: 600;
  color: #00453d;
  margin-bottom: 10px;
}
.bandwidth-providers-section .feature-box p {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #111111;
  opacity: 0.9;
}
.bandwidth-providers-section .partners-showcase {
  background-color: #f8f8f8;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 69, 61, 0.08);
}
.bandwidth-providers-section .showcase-header {
  background-color: #00453d;
  padding: 15px 20px;
  color: #ffffff;
  font-weight: 600;
  text-align: center;
  font-size: 1.1rem;
}
.bandwidth-providers-section .partners-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background-color: #e5e7eb;
  padding: 1px;
}
.bandwidth-providers-section .partner-logo {
  background-color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px;
  transition: all 0.3s ease;
  min-height: 80px;
}
.bandwidth-providers-section .partner-logo:hover {
  background-color: rgba(0, 253, 235, 0.15);
}
.bandwidth-providers-section .hidden-partners {
  display: none;
}
.bandwidth-providers-section .partner-logo img {
  max-width: 80%;
  max-height: 40px;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.7;
  transition: all 0.3s ease;
}
.bandwidth-providers-section .partner-logo:hover img {
  filter: grayscale(0%);
  opacity: 1;
}
.bandwidth-providers-section .highlight-logo img {
  filter: grayscale(0%);
  opacity: 1;
}
.bandwidth-providers-section .more-partners {
  padding: 20px;
  text-align: center;
  background-color: #ffffff;
  border-top: 1px solid #e5e7eb;
}
.bandwidth-providers-section .show-more-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background-color: transparent;
  border: 1px solid #00453d;
  color: #00453d;
  padding: 10px 20px;
  border-radius: 6px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  margin: 0 auto;
}
.bandwidth-providers-section .show-more-btn:hover {
  background-color: #00453d;
  color: #ffffff;
}
.bandwidth-providers-section .show-more-btn svg {
  transition: all 0.3s ease;
}
.bandwidth-providers-section .show-more-btn:hover svg {
  transform: rotate(180deg);
}
@media (max-width: 991px) {
  .bandwidth-providers-section .content-grid {
    grid-template-columns: 1fr;
  }
  .bandwidth-providers-section .partners-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 767px) {
  .bandwidth-providers-section .bandwidth-providers-section {
    padding: 60px 0;
  }
  .bandwidth-providers-section .section-header h2 {
    font-size: 2rem;
  }
  .bandwidth-providers-section .partners-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .bandwidth-providers-section .feature-box {
    flex-direction: column;
    align-items: flex-start;
  }
}
.network-quality-section {
  background-color: #d8ede1;
  padding: 80px 0;
  color: #111111;
}
.network-quality-section .container {
  max-width: 1500px;
  margin: 0 auto;
  padding: 0 20px;
}
.network-quality-section .section-title {
  text-align: center;
  font-size: 36px;
  font-weight: 700;
  margin-bottom: 60px;
  color: #00453d;
  position: relative;
}
.network-quality-section .features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 30px;
}
.network-quality-section .feature-card {
  background-color: #ffffff;
  border-radius: 8px;
  padding: 30px;
  transition: all 0.3s ease;
  border: 1px solid rgba(0, 69, 61, 0.1);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  position: relative;
  overflow: hidden;
}
.network-quality-section .feature-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  border-color: rgba(0, 253, 235, 0.3);
}
.network-quality-section .feature-icon {
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background-color: rgba(0, 253, 235, 0.1);
}
.network-quality-section .feature-icon i {
  font-size: 43px;
  color: #00453d;
}
.network-quality-section .feature-title {
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 15px;
  color: #00453d;
}
.network-quality-section .feature-description {
  font-size: 16px;
  line-height: 1.6;
  color: #444444;
}
@media (max-width: 768px) {
  .network-quality-section .features-grid {
    grid-template-columns: 1fr;
  }
  .network-quality-section .section-title {
    font-size: 28px;
    margin-bottom: 40px;
  }
  .network-quality-section .network-quality-section {
    padding: 50px 0;
  }
}
.success-count-section .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}
.success-count-section {
  padding: 80px 0;
  background: #1e4c32;
  position: relative;
  overflow: hidden;
}
.success-count-section::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(
      circle at 10% 20%,
      rgba(0, 253, 235, 0.03) 0%,
      transparent 20%
    ),
    radial-gradient(
      circle at 90% 80%,
      rgba(0, 69, 61, 0.03) 0%,
      transparent 20%
    );
  top: 0;
  left: 0;
}
.success-count-section .success-header {
  text-align: center;
  margin-bottom: 60px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}
.success-count-section .success-title {
  font-size: 34px;
  margin-bottom: 20px;
  color: #ffffff;
  position: relative;
  display: inline-block;
  padding-bottom: 15px;
}
.success-count-section .counter-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  position: relative;
}
.success-count-section .counter-item {
  background-color: #ffffff;
  padding: 40px 20px;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  text-align: center;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  z-index: 1;
}
.success-count-section .counter-item::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: #1d4b32;
  transition: height 0.3s ease;
  z-index: -1;
}
.success-count-section .counter-item:hover {
  transform: translateY(-10px);
}
.success-count-section .counter-item:hover::before {
  height: 100%;
  opacity: 0.05;
}
.success-count-section .counter-value {
  font-size: 48px;
  font-weight: 700;
  color: #00453d;
  margin-bottom: 10px;
  line-height: 1;
  position: relative;
  display: inline-block;
}
.success-count-section .counter-label {
  color: #555;
  font-size: 16px;
  margin-top: 15px;
  font-weight: 500;
}
.success-count-section .accent-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: #00fdeb;
  color: #00453d;
  font-size: 20px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  box-shadow: 0 3px 10px rgba(0, 253, 235, 0.3);
}
.success-count-section .counts {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
}
.success-count-section .ripple-background {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 0;
}
.success-count-section .ripple-circle {
  position: absolute;
  border-radius: 50%;
  border: 2px solid rgba(0, 253, 235, 0.4);
  transform-origin: center;
}
.success-count-section .ripple-1 {
  width: 200px;
  height: 200px;
  top: 30%;
  left: 10%;
}
.success-count-section .ripple-2 {
  width: 300px;
  height: 300px;
  bottom: 20%;
  right: 15%;
}
.success-count-section .ripple-3 {
  width: 150px;
  height: 150px;
  top: 10%;
  right: 30%;
}
@media (max-width: 992px) {
  .success-count-section .counter-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 576px) {
  .success-count-section .counter-grid {
    grid-template-columns: 1fr;
  }
  .success-count-section .success-title {
    font-size: 28px;
  }
  .success-count-section .counter-value {
    font-size: 42px;
  }
}
@keyframes ripple {
  0% {
    transform: scale(0.95);
    opacity: 0.8;
  }
  50% {
    transform: scale(1);
    opacity: 0.4;
  }
  100% {
    transform: scale(0.95);
    opacity: 0.8;
  }
}
.success-count-section .ripple-1 {
  animation: ripple 6s infinite ease-in-out;
}
.success-count-section .ripple-2 {
  animation: ripple 8s infinite ease-in-out;
  animation-delay: 1s;
}
.success-count-section .ripple-3 {
  animation: ripple 7s infinite ease-in-out;
  animation-delay: 2s;
}
.success-count-section .counter-icon {
  font-size: 24px;
  color: #00453d;
  margin-bottom: 15px;
  display: inline-block;
  width: 60px;
  height: 60px;
  line-height: 60px;
  background-color: rgba(0, 69, 61, 0.05);
  border-radius: 50%;
}
.gpu-benefits-section {
  padding: 100px 0;
  background-color: #ffffff;
  position: relative;
  overflow: hidden;
}
.gpu-benefits-section::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 300px;
  height: 300px;
  background: rgba(0, 253, 235, 0.05);
  border-radius: 50%;
  transform: translate(150px, -150px);
}
.gpu-benefits-section .container {
  margin: 0 auto;
  max-width: 1500px;
  padding: 0 20px;
}
.gpu-benefits-section .section-header {
  margin-bottom: 40px;
  position: relative;
}
.gpu-benefits-section .accent-line {
  display: block;
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, #00453d, #00fdeb);
  margin-bottom: 20px;
}
.gpu-benefits-section .subtitle {
  color: #00453d;
  font-size: 16px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 15px;
}
.gpu-benefits-section .title {
  font-size: 36px;
  font-weight: 700;
  margin-bottom: 25px;
  color: #111111;
  line-height: 1.2;
}
.gpu-benefits-section .description {
  font-size: 16px;
  line-height: 1.7;
  color: #333333;
  margin-bottom: 0;
}
.gpu-benefits-section .benefits-container {
  display: flex;
  gap: 40px;
}
.gpu-benefits-section .benefits-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 25px;
  flex: 1;
}
.gpu-benefits-section .benefit-card {
  background-color: #ffffff;
  border: 1px solid rgba(0, 69, 61, 0.1);
  padding: 30px;
  transition: all 0.3s ease;
  border-radius: 8px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}
.gpu-benefits-section .benefit-card::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, #00453d, #00fdeb);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}
.gpu-benefits-section .benefit-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 25px rgba(0, 69, 61, 0.08);
}
.gpu-benefits-section .benefit-card:hover::after {
  transform: scaleX(1);
}
.gpu-benefits-section .card-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}
.gpu-benefits-section .number-circle {
  width: 46px;
  height: 46px;
  background: linear-gradient(135deg, #00453d, #00453d 80%, #00fdeb);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-weight: 600;
  font-size: 18px;
  margin-right: 20px;
  flex-shrink: 0;
  box-shadow: 0 4px 10px rgba(0, 69, 61, 0.2);
}
.gpu-benefits-section .benefit-title {
  font-size: 20px;
  font-weight: 600;
  color: #111111;
  margin: 0;
}
.gpu-benefits-section .benefit-description {
  font-size: 15px;
  line-height: 1.6;
  color: #333333;
  margin: 0;
}
.gpu-benefits-section .image-container {
  position: relative;
  width: 30%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gpu-benefits-section .server-image {
  width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  position: relative;
  z-index: 2;
}
.gpu-benefits-section .image-accent {
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    135deg,
    rgba(0, 69, 61, 0.05),
    rgba(0, 253, 235, 0.05)
  );
  border-radius: 8px;
  top: 20px;
  left: 20px;
  z-index: 1;
  border: 1px solid rgba(0, 253, 235, 0.2);
}
@media (max-width: 992px) {
  .gpu-benefits-section .benefits-container {
    flex-direction: column;
  }
  .gpu-benefits-section .image-container {
    width: 100%;
    margin-top: 40px;
    max-width: 500px;
    align-self: center;
  }
}
@media (max-width: 768px) {
  .gpu-benefits-section {
    padding: 70px 0;
  }
  .gpu-benefits-section .benefits-grid {
    grid-template-columns: 1fr;
  }
  .gpu-benefits-section .title {
    font-size: 28px;
  }
  .gpu-benefits-section .section-header {
    margin-bottom: 50px;
  }
}
.gpu-use-cases-section {
  background: linear-gradient(
      to right,
      rgba(0, 69, 61, 0.9),
      rgba(17, 17, 17, 0.8)
    ),
    url(/assect/images/gpu_use_cases_image.webp);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  color: #ffffff;
  padding: 80px 0;
}
.gpu-use-cases-section .container {
  max-width: 1500px;
  margin: 0 auto;
  padding: 0 20px;
}
.gpu-use-cases-section .section-header {
  text-align: center;
  margin-bottom: 40px;
  margin-left: auto;
  margin-right: auto;
}
.gpu-use-cases-section .section-title {
  font-size: 36px;
  font-weight: 700;
  margin-bottom: 20px;
  position: relative;
  padding-bottom: 15px;
}
.gpu-use-cases-section .section-description {
  font-size: 16px;
  line-height: 1.6;
}
.gpu-use-cases-section .use-cases-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
}
.gpu-use-cases-section .use-case-card {
}
.gpu-use-cases-section .use-case-title {
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 15px;
  color: #ffffff;
}
.gpu-use-cases-section .use-case-description {
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.9);
}
.gpu-use-cases-section .use-case-icon {
  width: 60px;
  height: 60px;
  background-color: black;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}
.gpu-use-cases-section .use-case-icon i {
  color: #00fdeb;
  font-size: 24px;
}
@media (max-width: 992px) {
  .gpu-use-cases-section .use-cases-grid {
    grid-template-columns: 1fr;
  }
}
.gpu-use-cases-section .icon {
  display: inline-block;
  width: 40px;
  height: 40px;
  stroke-width: 0;
  stroke: #00fdeb;
  fill: #00fdeb;
}
.gpu-product-section {
  padding: 3rem 2rem;
  background: linear-gradient(135deg, #f8fffe 0%, #d8ede1 100%);
  position: relative;
  overflow: hidden;
}
.gpu-product-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(
      circle at 20% 20%,
      rgba(0, 253, 235, 0.1) 0%,
      transparent 50%
    ),
    radial-gradient(
      circle at 80% 80%,
      rgba(0, 69, 61, 0.05) 0%,
      transparent 50%
    );
  pointer-events: none;
}
.gpu-product-section .container {
  max-width: 1500px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.gpu-product-section .section-header {
  text-align: center;
  margin-bottom: 4rem;
  position: relative;
}
.gpu-product-section .section-title {
  color: #00453d;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  margin-bottom: 1.5rem;
  letter-spacing: -0.02em;
  position: relative;
}
.gpu-product-section .section-title::after {
  content: "";
  position: absolute;
  bottom: -0.5rem;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 4px;
  background: linear-gradient(90deg, #00453d 0%, #00fdeb 100%);
  border-radius: 2px;
}
.gpu-product-section .section-description {
  color: #111111;
  max-width: 700px;
  margin: 0 auto;
  font-size: 1.125rem;
  font-weight: 400;
  opacity: 0.9;
}
.gpu-product-section .product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 2rem;
  margin-top: 3rem;
}
.gpu-product-section .product-card {
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 69, 61, 0.08), 0 1px 3px rgba(0, 69, 61, 0.12);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(0, 253, 235, 0.1);
}
.gpu-product-section .product-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #00453d 0%, #00fdeb 100%);
}
.gpu-product-section .product-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 40px rgba(0, 69, 61, 0.15),
    0 4px 12px rgba(0, 69, 61, 0.18);
}
.gpu-product-section .product-content {
  padding: 2.5rem;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.gpu-product-section .product-title {
  color: #00453d;
  font-size: 1.375rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  line-height: 1.3;
  position: relative;
  padding-bottom: 1rem;
}
.gpu-product-section .product-title::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 60px;
  height: 2px;
  background: #00fdeb;
  border-radius: 1px;
}
.gpu-product-section .product-description {
  color: #111111;
  margin-bottom: 2rem;
  font-size: 1rem;
  line-height: 1.6;
  font-weight: 500;
}
.gpu-product-section .product-features {
  list-style: none;
  background: linear-gradient(135deg, #f8fffe 0%, #ffffff 100%);
  padding: 1rem;
  border-radius: 12px;
  border: 1px solid rgba(0, 253, 235, 0.2);
  position: relative;
  flex-grow: 1;
  display: flex;
  align-items: center;
}
.gpu-product-section .product-features li {
  color: #111111;
  font-size: 0.95rem;
  line-height: 1.7;
  position: relative;
  padding-left: 2rem;
  font-weight: 400;
}
.gpu-product-section .product-features li::before {
  content: "✓";
  color: #00453d;
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 700;
  font-size: 1.1rem;
  background: rgba(0, 253, 235, 0.1);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(0, 69, 61, 0.2);
}
.gpu-product-section .product-card:nth-child(1),
.gpu-product-section .product-card:nth-child(2) {
  background: linear-gradient(135deg, #ffffff 0%, #f8fffe 100%);
}
.gpu-product-section .product-card:nth-child(1) .product-title,
.gpu-product-section .product-card:nth-child(2) .product-title {
  background: linear-gradient(135deg, #00453d 0%, #004d42 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
@media (max-width: 768px) {
  .gpu-product-section {
    padding: 3rem 1rem;
  }
  .gpu-product-section .product-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .gpu-product-section .product-content {
    padding: 2rem;
  }
  .gpu-product-section .section-header {
    margin-bottom: 3rem;
  }
  .gpu-product-section .product-features li {
    font-size: 0.9rem;
  }
}
@media (max-width: 480px) {
  .gpu-product-section .product-content {
    padding: 1.5rem;
  }
  .gpu-product-section .product-features {
    padding: 1.5rem;
  }
}
.gpu-product-section .product-card {
  animation: fadeInUp 0.6s ease-out forwards;
  opacity: 0;
  transform: translateY(30px);
}
.gpu-product-section .product-card:nth-child(1) {
  animation-delay: 0.1s;
}
.gpu-product-section .product-card:nth-child(2) {
  animation-delay: 0.2s;
}
.gpu-product-section .product-card:nth-child(3) {
  animation-delay: 0.3s;
}
.gpu-product-section .product-card:nth-child(4) {
  animation-delay: 0.4s;
}
.gpu-product-section .product-card:nth-child(5) {
  animation-delay: 0.5s;
}
.gpu-product-section .product-card:nth-child(6) {
  animation-delay: 0.6s;
}
@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.lease-gpu-section {
  padding: 60px 20px;
  position: relative;
  overflow: hidden;
}
.lease-gpu-section .container {
  max-width: 1500px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.lease-gpu-section .section-intro {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.lease-gpu-section .section-title h2 {
  font-size: 28px;
  font-weight: 700;
  color: #00453d;
  margin-bottom: 20px;
  position: relative;
}
.lease-gpu-section .section-description {
  width: 100%;
}
.lease-gpu-section .section-description p {
  font-size: 16px;
  color: #333;
  margin-bottom: 20px;
  line-height: 1.6;
}
.lease-gpu-section .section-description img {
  max-width: 100%;
  height: auto;
  margin-top: 10px;
  border-radius: 8px;
}
.lease-gpu-section .steps-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 25px;
}
.lease-gpu-section .step-card {
  background-color: #dcebe8;
  padding: 25px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  border-radius: 8px;
}
.lease-gpu-section .step-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}
.lease-gpu-section .step-number {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 32px;
  font-weight: 700;
  color: rgb(0, 69, 61);
}
.lease-gpu-section .step-card h3 {
  font-size: 18px;
  font-weight: 600;
  color: #00453d;
  margin-bottom: 15px;
  padding-right: 40px;
}
.lease-gpu-section .step-card p {
  font-size: 15px;
  color: #444;
  margin-bottom: 0;
  line-height: 1.7;
}
.lease-gpu-section .decorative-circle {
  position: absolute;
  border-radius: 50%;
  z-index: -1;
}
.lease-gpu-section .circle-1 {
  width: 300px;
  height: 300px;
  top: -100px;
  right: -100px;
  background-color: #e8f3f1;
}
.lease-gpu-section .circle-2 {
  width: 200px;
  height: 200px;
  bottom: 50px;
  left: -60px;
  background-color: #e8f3f1;
}
@media (min-width: 768px) {
  .lease-gpu-section {
    padding: 70px 30px;
  }
  .lease-gpu-section .section-title h2 {
    font-size: 30px;
  }
  .lease-gpu-section .steps-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 992px) {
  .lease-gpu-section {
    padding: 80px 40px;
  }
  .lease-gpu-section .container {
    flex-direction: row;
  }
  .lease-gpu-section .section-intro {
    flex: 1;
    max-width: 35%;
  }
  .lease-gpu-section .steps-grid {
    flex: 2;
  }
  .lease-gpu-section .section-title h2 {
    font-size: 32px;
  }
  .lease-gpu-section .step-card {
    padding: 30px;
  }
}
@media (min-width: 1200px) {
  .lease-gpu-section .container {
    gap: 50px;
  }
  .lease-gpu-section .section-intro {
    max-width: 30%;
  }
  .lease-gpu-section .steps-grid {
    gap: 30px;
  }
}
.colocation-price-card-section {
  padding: 80px 0;
  background-color: #ffffff;
}
.colocation-price-card-section .container {
  max-width: 1500px;
}
.colocation-price-card-section .colocation-price-card-section .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}
.colocation-price-card-section .section-header {
  text-align: center;
  margin-bottom: 60px;
}
.colocation-price-card-section .section-header h2 {
  font-size: 36px;
  font-weight: 700;
  color: #00453d;
  margin-bottom: 16px;
  position: relative;
  display: inline-block;
}
.colocation-price-card-section .section-header p {
  font-size: 18px;
  max-width: 800px;
  margin: 0 auto;
  line-height: 1.6;
  color: #333333;
}
.colocation-price-card-section .pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 2fr));
  gap: 30px;
}
.colocation-price-card-section .pricing-card {
  background-color: #ffffff;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0, 69, 61, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border: 1px solid #f0f0f0;
  border-radius: 10px;
}
.colocation-price-card-section .pricing-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 30px rgba(0, 69, 61, 0.2);
}
.colocation-price-card-section .card-header {
  background-color: #00453d;
  padding: 25px 20px;
  text-align: center;
  position: relative;
}
.colocation-price-card-section .card-header h3 {
  font-size: 22px;
  font-weight: 600;
  color: #ffffff;
  margin: 0;
}
.colocation-price-card-section .card-body {
  padding: 30px 20px;
}
.colocation-price-card-section .feature-list {
  list-style: none;
}
.colocation-price-card-section .feature-list li {
  padding: 12px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
  font-size: 16px;
}
.colocation-price-card-section .feature-list li:last-child {
  border-bottom: none;
}
.colocation-price-card-section i {
  font-size: 20px;
  color: #00453d;
  margin-right: 10px;
}
.colocation-price-card-section .card-footer {
  padding: 20px;
  text-align: center;
  background-color: #e8f3f1;
}
.colocation-price-card-section .btn-primary {
  background-color: #00453d;
  color: #ffffff;
  border: none;
  padding: 12px 24px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 1px;
  border-radius: 8px;
}
.colocation-price-card-section .btn-primary:hover {
  background-color: #003631;
  box-shadow: 0 5px 15px rgba(0, 253, 235, 0.2);
}
@media (max-width: 1120px) {
  .colocation-price-card-section .pricing-grid {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
  .colocation-price-card-section .section-header {
    margin-bottom: 40px;
  }
  .colocation-price-card-section .section-header h2 {
    font-size: 28px;
  }
}
@media (max-width: 555px) {
  .colocation-price-card-section .pricing-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .colocation-price-card-section .section-header {
    margin-bottom: 40px;
  }
  .colocation-price-card-section .section-header h2 {
    font-size: 28px;
  }
}
.g-popup-modal-container {
  height: 100%;
  width: 100%;
  background-color: #000000d7;
  display: flex;
  padding-top: 40px;
  padding-bottom: 40px;
  justify-content: center;
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  display: none;
}
.g-popup-modal {
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  max-width: 800px;
  margin: 2rem auto;
  overflow: hidden;
  border: none;
}
.g-popup-modal-header {
  background-color: #00453d;
  color: #ffffff;
  padding: 1.25rem 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 3px solid #00fdeb;
}
.g-popup-modal-header-title {
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: 0.5px;
}
.pop-up-close-btn {
  color: #ffffff;
  cursor: pointer;
  font-size: 1.25rem;
  transition: all 0.2s ease;
}
.pop-up-close-btn:hover {
  color: #00fdeb;
  transform: scale(1.1);
}
.g-popup-modal-body {
  padding: 1.5rem;
  height: 650px;
  overflow-y: auto;
}
.g-popup-modal-para {
  color: #111111;
  font-size: 0.95rem;
  line-height: 1.5;
  margin-bottom: 1.5rem;
}
.g-popup-modal-body-form-eachinputs-main-div {
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
}
.g-popup-modal-body-form-eachinputs-container {
  flex: 1;
}
.g-popup-modal-body-form-label {
  display: block;
  color: #111111;
  font-size: 0.85rem;
  font-weight: 500;
  margin-bottom: 0.5rem;
}
.g-popup-modal-body-form-required-symbol {
  color: #00453d;
  font-weight: bold;
}
.g-popup-modal-body-form-input,
.g-popup-modal-body-form-select {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #ddd;
  border-radius: 6px;
  background-color: #f9f9f9;
  transition: all 0.3s ease;
}
.g-popup-modal-body-form-input:focus,
.g-popup-modal-body-form-select:focus {
  border-color: #00453d;
  box-shadow: 0 0 0 2px rgba(0, 69, 61, 0.1);
  outline: none;
  background-color: #ffffff;
}
textarea.g-popup-modal-body-form-input {
  min-height: 120px;
  resize: vertical;
}
.g-popup-modal-body-form-eachinputs-container-footer {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-top: 1rem;
}
.g-popup-modal-body-form-checkbox {
  margin-top: 0.25rem;
  accent-color: #00453d;
}
.g-highlighted-tags {
  color: #00453d;
  text-decoration: none;
  font-weight: 500;
  transition: all 0.2s ease;
}
.g-highlighted-tags:hover {
  color: #00fdeb;
  text-decoration: underline;
}
.recap-box {
  margin: 1.5rem 0;
}
.g-popup-modal-footer {
  text-align: center;
  margin-top: 1.5rem;
}
.g-popup-modal-footer-btns-div {
  display: flex;
  justify-content: flex-start;
}
.g-popup-modal-submit-btn {
  background-color: #00453d;
  color: #ffffff;
  border: none;
  padding: 0.85rem 2rem;
  font-size: 1rem;
  font-weight: 500;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.g-popup-modal-submit-btn:hover {
  background-color: #003530;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
}
.g-popup-modal-submit-btn:active {
  transform: translateY(0);
}
.g-popup-modal-body-form-select option:checked,
.g-popup-modal-body-form-select option:hover {
  background-color: #00453d;
  color: white;
}
@media (max-width: 768px) {
  .g-popup-modal-body-form-eachinputs-main-div {
    flex-direction: column;
    gap: 1rem;
  }
  .g-popup-modal {
    width: 90%;
    margin: 1rem auto;
  }
  .g-popup-modal-body {
    padding: 1rem;
  }
}
.colocation-description-section {
  padding: 80px 0;
  background-color: #d8ede1;
}
.colocation-description-section .container {
  max-width: 1500px;
  margin: 0 auto;
  padding: 0 20px;
}
.colocation-description-section .section-header {
  text-align: center;
  margin-bottom: 60px;
}
.colocation-description-section .section-header h2 {
  font-size: 36px;
  font-weight: 700;
  color: #00453d;
  margin-bottom: 20px;
  position: relative;
}
.colocation-description-section .section-header p {
  font-size: 18px;
  color: #111111;
  opacity: 0.8;
  max-width: 700px;
  margin: 0 auto;
}
.colocation-description-section .colocation-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}
.colocation-description-section .colocation-content {
  padding-right: 20px;
}
.colocation-description-section .colocation-content h3 {
  color: #00453d;
  font-size: 28px;
  margin-bottom: 25px;
  font-weight: 600;
}
.colocation-description-section .colocation-content p {
  margin-bottom: 25px;
  font-size: 16px;
  color: #111111;
  opacity: 0.9;
}
.colocation-description-section .feature-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
  margin-top: 30px;
}
.colocation-description-section .feature-item {
  display: flex;
  align-items: center;
}
.colocation-description-section .feature-icon {
  width: 40px;
  height: 40px;
  background-color: rgba(0, 253, 235, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
  flex-shrink: 0;
}
.colocation-description-section .feature-icon i {
  font-size: 25px;
  color: #00453d;
}
.colocation-description-section .feature-text {
  font-size: 14px;
  font-weight: 500;
}
.colocation-description-section .colocation-image {
  position: relative;
  overflow: hidden;
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
  border-radius: 16px;
}
.colocation-description-section .colocation-image img {
  width: 100%;
  height: auto;
  display: block;
}
@media (max-width: 992px) {
  .colocation-description-section .colocation-grid {
    grid-template-columns: 1fr;
  }
  .colocation-description-section .colocation-content {
    order: 2;
    padding-right: 0;
  }
  .colocation-description-section .colocation-image {
    order: 1;
    margin-bottom: 30px;
  }
}
@media (max-width: 576px) {
  .colocation-description-section .feature-list {
    grid-template-columns: 1fr;
  }
}
.colocation-small-description-section {
  padding: 40px 0;
  background-color: #00453d;
  color: white;
}
.colocation-small-description-section .container {
  max-width: 1500px;
  margin: 0 auto;
}
.colocation-small-description-section .container p {
  font-size: 18px;
}
.colocation-solutions-section {
  padding: 60px 0;
  background-color: #ffffff;
  position: relative;
}
.colocation-solutions-section .container {
  max-width: 1500px;
  margin: 0 auto;
  padding: 0 15px;
}
.colocation-solutions-section .section-title {
  text-align: center;
  margin-bottom: 40px;
  display: flex;
  align-items: center;
}
.colocation-solutions-section .section-title .line {
  height: 3px;
  flex: 1;
  background-color: #00453d;
}
.colocation-solutions-section .section-title h2 {
  font-size: 32px;
  font-weight: 700;
  color: #00453d;
  margin-bottom: 15px;
  position: relative;
  display: inline-block;
}
.colocation-solutions-section .solutions-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.colocation-solutions-section .solution-card {
  background-color: #f9fafb;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
  border-radius: 6px;
  overflow: hidden;
}
.colocation-solutions-section .solution-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.08);
}
.colocation-solutions-section .solution-header {
  display: flex;
  align-items: center;
  padding: 18px 20px;
  background-color: #00453d;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.colocation-solutions-section .solution-icon {
  width: 46px;
  height: 46px;
  background-color: #ffffff;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}
.colocation-solutions-section .solution-icon i {
  font-size: 22px;
  color: #00453d;
}
.colocation-solutions-section .solution-header h3 {
  color: #ffffff;
  font-size: 18px;
  font-weight: 600;
  margin: 0;
}
.colocation-solutions-section .solution-card p {
  color: #111111;
  font-size: 15px;
  line-height: 1.5;
  opacity: 0.9;
  padding: 15px 20px;
  margin: 0;
  flex-grow: 1;
}
.colocation-solutions-section .solutions-footer {
  text-align: center;
  margin-top: 35px;
}
.colocation-solutions-section .solutions-cta {
  display: inline-block;
  background-color: #00453d;
  color: #ffffff;
  padding: 12px 28px;
  border-radius: 4px;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s ease;
  border: 2px solid #00453d;
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: 0.5px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.colocation-solutions-section .solutions-cta:hover {
  background-color: transparent;
  color: #00453d;
  box-shadow: 0 6px 12px rgba(0, 69, 61, 0.15);
}
@media (max-width: 992px) {
  .colocation-solutions-section .solutions-grid {
    grid-template-columns: 1fr;
    gap: 15px;
  }
}
@media (max-width: 768px) {
  .colocation-solutions-section {
    padding: 40px 0;
  }
  .colocation-solutions-section .section-title h2 {
    font-size: 28px;
  }
  .colocation-solutions-section .solution-header h3 {
    font-size: 16px;
  }
}
.colocation-for-business-section {
  padding: 60px 0 0;
  background-color: #ffffff;
}
.colocation-for-business-section .container {
  max-width: 1500px;
}
.colocation-for-business-section h2 {
  font-size: 36px;
  color: #00453d;
  margin-bottom: 30px;
  position: relative;
}
.colocation-for-business-section p {
  margin-bottom: 30px;
  font-size: 16px;
  color: #333333;
}
.colocation-for-business-section h3 {
  font-size: 24px;
  color: #111111;
  margin: 40px 0 20px;
}
.colocation-for-business-section .features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
@media (max-width: 500px) {
  .colocation-for-business-section .features-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
  }
}
@media (max-width: 300px) {
  .colocation-for-business-section .features-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 30px;
  }
}
.colocation-for-business-section .feature-card {
  border-radius: 5px;
  transition: all 0.3s ease;
  border-bottom: 3px solid transparent;
}
.colocation-for-business-section .feature-icon {
  color: #00453d;
  margin-bottom: 20px;
}
.colocation-for-business-section .feature-icon img {
  width: 65px;
  height: auto;
}
.colocation-for-business-section .feature-title {
  font-size: 20px;
  margin-bottom: 15px;
  color: #111111;
}
.datacenter-intro-section {
  padding: 80px 0;
  background-color: #ffffff;
  position: relative;
  overflow: hidden;
}
.datacenter-intro-section .container {
  max-width: 1500px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 60px;
}
@media (max-width: 900px) {
  .datacenter-intro-section .container {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}
.datacenter-intro-section .datacenter-content {
  flex: 1;
  max-width: 600px;
}
.datacenter-intro-section .section-title {
  font-size: 36px;
  font-weight: 700;
  color: #111111;
  margin-bottom: 20px;
  position: relative;
}
.datacenter-intro-section .section-divider {
  width: 80px;
  height: 4px;
  background-color: #00453d;
  margin-bottom: 25px;
}
.datacenter-intro-section .section-text {
  font-size: 16px;
  line-height: 1.7;
  margin-bottom: 30px;
  color: #111111;
}
.datacenter-intro-section .datacenter-visual {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
.datacenter-intro-section .visual-element {
  width: 100%;
  border-radius: 8px;
  position: relative;
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}
.datacenter-intro-section .visual-element::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  bottom: 10px;
  border: 1px solid rgba(0, 253, 235, 0.3);
  border-radius: 4px;
}
.datacenter-intro-section .visual-element::after {
  content: "";
  position: absolute;
  width: 140px;
  height: 140px;
  background-color: rgba(0, 253, 235, 0.2);
  border-radius: 50%;
  bottom: -70px;
  right: -70px;
}
.datacenter-intro-section .visual-element img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 992px) {
  .datacenter-intro-section .datacenter-container {
    flex-direction: column;
  }
  .datacenter-intro-section .datacenter-content {
    max-width: 100%;
  }
  .datacenter-intro-section .datacenter-visual {
    width: 100%;
    margin-top: 40px;
  }
}
.datacenter-description-section {
  padding: 90px 0;
  background: #1e4c32;
  position: relative;
}
.datacenter-description-section .container {
  max-width: 1500px;
  margin: 0 auto;
  padding: 0 20px;
}
.datacenter-description-section .description-header {
  display: flex;
  align-items: center;
  margin-bottom: 40px;
}
.datacenter-description-section .icon-container {
  width: 50px;
  height: 50px;
  background-color: #ffffff;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 20px;
}
.datacenter-description-section .icon-container i {
  font-size: 24px;
  color: #00453d;
}
.datacenter-description-section .server-icon {
  width: 24px;
  height: 24px;
  color: #ffffff;
}
.datacenter-description-section .description-title {
  font-size: 32px;
  font-weight: 700;
  color: #ffffff;
  margin: 0;
  position: relative;
  flex: 1;
}
.datacenter-description-section .description-content {
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.datacenter-description-section .description-text p {
  font-size: 16px;
  line-height: 1.7;
  color: #ffffff;
  margin-top: 0;
  margin-bottom: 30px;
}
.datacenter-description-section .features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin-top: 30px;
}
.datacenter-description-section .feature-item {
  position: relative;
  overflow: hidden;
}
.datacenter-description-section .feature-icon {
  width: 75px;
  height: 75px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 15px;
  background: #d8ede1;
  padding: 10px;
  border-radius: 10px;
}
.datacenter-description-section .feature-icon img {
  width: 100%;
  height: 100%;
}
.datacenter-description-section .feature-text h3 {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 10px 0;
  color: #ffffff;
}
.datacenter-description-section .feature-text p {
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
  color: #ffffff;
}
@media (max-width: 992px) {
  .datacenter-description-section .features-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 768px) {
  .datacenter-description-section .description-header {
    flex-direction: column;
    align-items: flex-start;
  }
  .datacenter-description-section .icon-container {
    margin-bottom: 15px;
  }
  .datacenter-description-section .features-grid {
    grid-template-columns: 1fr;
  }
  .datacenter-description-section .description-cta {
    flex-direction: column;
    align-items: flex-start;
  }
  .datacenter-description-section .cta-button,
  .cta-link {
    width: 100%;
    text-align: center;
    justify-content: center;
  }
}
.datacenter-quality-section {
  padding: 80px 0;
  background-color: #ffffff;
}
.datacenter-quality-section .container {
  max-width: 1500px;
  margin: 0 auto;
  padding: 0 20px;
}
.datacenter-quality-section .section-header {
  text-align: center;
  margin-bottom: 60px;
}
.datacenter-quality-section .section-header h2 {
  color: #00453d;
  font-size: 36px;
  font-weight: 600;
  position: relative;
  padding-bottom: 15px;
  margin-bottom: 20px;
}
.datacenter-quality-section .section-header p {
  color: #111111;
  margin: 0 auto;
}
.datacenter-quality-section .features-grid {
  display: grid;
  grid-template-columns: auto auto auto;
  gap: 30px;
  margin-top: 40px;
}
.datacenter-quality-section .feature-card {
  background: #ffffff;
  border: 1px solid #f0f0f0;
  border-radius: 8px;
  padding: 30px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}
.datacenter-quality-section .card1 {
  background: #dcebe8;
  grid-row-start: 1;
  grid-row-end: 3;
}
.datacenter-quality-section .card1 img {
  width: 100%;
  height: auto;
  border-radius: 10px;
}
.datacenter-quality-section .feature-card h3 {
  color: #00453d;
  font-size: 22px;
  margin-bottom: 15px;
  font-weight: 600;
  display: flex;
  align-items: center;
}
.datacenter-quality-section .feature-card h3 i {
  margin-right: 12px;
  font-size: 24px;
  color: #00453d;
}
.datacenter-quality-section .feature-card p {
  color: #111111;
  font-size: 15px;
  line-height: 1.7;
}
.datacenter-quality-section .accent-text {
  color: #00453d;
  font-weight: 600;
}
.datacenter-quality-section .highlight {
  background: linear-gradient(
    to bottom,
    transparent 50%,
    rgba(0, 253, 235, 0.2) 50%
  );
}
@media (max-width: 768px) {
  .datacenter-quality-section .features-grid {
    grid-template-columns: 1fr;
  }
  .datacenter-quality-section .section-header h2 {
    font-size: 30px;
  }
  .datacenter-quality-section {
    padding: 60px 0;
  }
}
.about-us-intro-section {
  padding: 70px 0;
  background-color: #ffffff;
  position: relative;
  overflow: hidden;
}
.about-us-intro-section::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 35%;
  height: 100%;
  background-color: rgba(0, 69, 61, 0.03);
  z-index: 1;
  clip-path: polygon(15% 0, 100% 0, 100% 100%, 0 100%);
}
.about-us-intro-section .container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 15px;
  position: relative;
  z-index: 2;
}
.about-us-intro-section .about-us-content {
  display: flex;
  align-items: center;
  gap: 50px;
}
.about-us-intro-section .about-us-text {
  flex: 1;
  padding-right: 20px;
}
.about-us-intro-section .section-header {
  margin-bottom: 25px;
}
.about-us-intro-section .section-tagline {
  display: inline-block;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #8d8d8d;
  margin-bottom: 12px;
  font-weight: 600;
}
.about-us-intro-section .about-us-text h2 {
  font-size: 36px;
  font-weight: 700;
  color: #00453d;
  margin: 0 0 5px 0;
  position: relative;
  padding-bottom: 15px;
}
.about-us-intro-section .about-text-content {
  margin-bottom: 30px;
}
.about-us-intro-section .about-text-content p {
  color: #111111;
  font-size: 16px;
  line-height: 1.7;
  margin-bottom: 20px;
}
.about-us-intro-section .lead-text {
  font-size: 18px;
  font-weight: 500;
  color: #00453d;
}
.about-us-intro-section .highlight-text {
  font-weight: 600;
  font-style: italic;
  color: #00453d;
  font-size: 18px;
  border-left: 3px solid #00fdeb;
  padding-left: 15px;
}
.about-us-intro-section .about-stats {
  display: flex;
  gap: 40px;
  margin-bottom: 30px;
}
.about-us-intro-section .stat-item {
  display: flex;
  flex-direction: column;
}
.about-us-intro-section .stat-number {
  font-size: 32px;
  font-weight: 700;
  color: #00453d;
}
.about-us-intro-section .stat-label {
  font-size: 14px;
  color: #111111;
  opacity: 0.8;
}
.about-us-intro-section .about-cta {
  display: inline-block;
  background-color: #00453d;
  color: #ffffff;
  padding: 12px 25px;
  border-radius: 4px;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s ease;
  border: 2px solid #00453d;
  font-size: 14px;
}
.about-us-intro-section .about-cta:hover {
  background-color: transparent;
  color: #00453d;
}
.about-us-intro-section .about-us-image {
  flex: 1;
  position: relative;
}
.about-us-intro-section .image-wrapper {
  position: relative;
  z-index: 2;
}
.about-us-intro-section .about-us-image img {
  width: 100%;
  height: auto;
  border-radius: 6px;
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
  display: block;
}
.about-us-intro-section .image-accent {
  position: absolute;
  top: -15px;
  right: -15px;
  width: 100%;
  height: 100%;
  border: 2px solid #00fdeb;
  border-radius: 6px;
  z-index: -1;
}
@media (max-width: 992px) {
  .about-us-intro-section .about-us-content {
    flex-direction: column;
    gap: 40px;
  }
  .about-us-intro-section .about-us-text {
    padding-right: 0;
  }
  .about-us-intro-section .about-stats {
    justify-content: space-between;
    width: 100%;
  }
}
@media (max-width: 768px) {
  .about-us-intro-section {
    padding: 50px 0;
  }
  .about-us-intro-section .about-us-text h2 {
    font-size: 30px;
  }
  .about-us-intro-section .about-stats {
    flex-wrap: wrap;
    gap: 20px;
  }
  .about-us-intro-section .stat-item {
    flex: 1;
    min-width: 100px;
  }
  .about-us-intro-section::after {
    width: 25%;
  }
}
@media (max-width: 576px) {
  .about-us-intro-section .section-tagline {
    font-size: 12px;
  }
  .about-us-intro-section .about-us-text h2 {
    font-size: 26px;
  }
  .about-us-intro-section .lead-text {
    font-size: 16px;
  }
  .about-us-intro-section .stat-number {
    font-size: 28px;
  }
}
.our-vision-section {
  padding-bottom: 40px;
  background-size: cover;
  background-position: center;
  color: #ffffff;
}
.our-vision-section .container {
  background: linear-gradient(to right, rgb(0 0 0 / 90%), rgb(0 0 0 / 25%)),
    url(/assect/images/background.jpg);
  max-width: 1500px;
  margin: 0 auto;
  padding: 50px;
  border-radius: 16px;
  background-size: cover;
  background-position: center;
}
.our-vision-section h2 {
  margin-bottom: 40px;
}
.country-section {
  padding: 80px 20px;
  margin: 0 auto;
}
.country-section .container {
  max-width: 1700px;
  margin: 0 auto;
}
.country-section .section-header {
  text-align: center;
  margin-bottom: 35px;
  position: relative;
}
.country-section .section-header h2 {
  color: #00453d;
  font-size: 36px;
  margin-bottom: 18px;
  font-weight: 700;
  letter-spacing: -0.5px;
}
.country-section .section-header p {
  color: #111111;
  margin: 0 auto;
  line-height: 1.7;
  font-size: 17px;
  opacity: 0.85;
}
.country-section .country-set {
  display: flex;
  justify-content: center;
  align-items: center;
}
.country-section .country-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  margin-top: 40px;
  row-gap: 20px;
  padding: 10px;
}
.country-section .country-grid-row {
  grid-auto-flow: column;
}
@media (max-width: 1200px) {
  .country-section .country-grid {
    margin-top: 40px;
    column-gap: 20px;
    padding: 10px;
  }
}
@media (max-width: 900px) {
  .country-section .country-grid-row {
    grid-auto-flow: row;
  }
}
.country-section .country-grid a {
  text-decoration: none;
  display: flex;
  justify-content: center;
}
.country-section .country-container {
  display: flex;
  align-items: center;
  width: max-content;
  flex-direction: row;
  transition: transform 0.3s ease;
  position: relative;
  background: #00453d;
  border-radius: 8px;
}
.country-section .country-container:hover {
  transform: translateY(-5px);
}
.country-section .country-content {
  background: linear-gradient(to right, #00453d, #000000);
  color: white;
  font-size: 18px;
  font-weight: bold;
  padding: 5px 10px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: 0.3s;
  flex-direction: row;
  height: 100%;
  width: 200px;
  box-shadow: 0 4px 15px rgba(0, 69, 61, 0.2);
}
.country-section .country-container:hover .country-content {
  background: linear-gradient(to right, #00453d, #003630);
  box-shadow: 0 8px 20px rgba(0, 69, 61, 0.3);
}
.country-section .country-details {
  display: flex;
  flex-direction: column;
}
.country-section .country-name {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 0;
  letter-spacing: 0.5px;
}
.country-section .continent-name {
  font-size: 14px;
  font-weight: 400;
  opacity: 0.85;
}
.country-section .country-flag {
  width: 62px;
  height: 62px;
  margin-right: 5px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  border: 3px solid #00453d;
  position: relative;
  z-index: 1;
}
.country-section .country-flag:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    135deg,
    rgba(0, 253, 235, 0.05),
    rgba(0, 69, 61, 0.1)
  );
  z-index: 2;
}
.country-section .country-flag img {
  width: 100%;
  height: 150%;
  object-fit: cover;
}
.country-section i {
  color: #00fdeb;
  font-size: 22px;
  transition: transform 0.3s ease;
}
.country-section .country-container:hover .fa-square-caret-right {
  transform: translateX(5px);
}
@media (max-width: 1200px) {
  .country-section .country-grid {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  }
}
@media (max-width: 768px) {
  .country-section {
    padding: 60px 15px;
  }
  .country-section .section-header h2 {
    font-size: 32px;
  }
  .country-section .country-grid {
    gap: 20px;
  }
}
@media (max-width: 480px) {
  .country-section .section-header h2 {
    font-size: 28px;
  }
  .country-section .section-header p {
    font-size: 16px;
  }
  .country-section .country-name {
    font-size: 18px;
  }
  .country-section .continent-name {
    font-size: 14px;
  }
}
.contact-us-section {
  padding: 4rem 0;
  background: #d8ede1;
}
.contact-us-section .container {
  max-width: 1500px;
  margin: 0 auto;
  padding: 0 1rem;
}
.contact-us-section .contact-header {
  text-align: center;
  margin-bottom: 3rem;
}
.contact-us-section .contact-header h2 {
  font-size: 2.5rem;
  color: #00453d;
  margin-bottom: 1rem;
  position: relative;
}
.contact-us-section .contact-header p {
  font-size: 1.1rem;
  color: #555;
  margin: 0 auto;
}
.contact-us-section .contact-flex {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
}
.contact-us-section .contact-form {
  flex: 2;
  background: #ffffff;
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}
.g-contact-us-all-boxex-div-main {
  width: 100%;
}
.g-form-group {
  margin-bottom: 1.5rem;
}
.g-input-div-flex {
  display: flex;
  gap: 1.25rem;
  margin-bottom: 1.5rem;
}
.g-width-100per {
  flex: 1;
}
.g-form-lbl {
  display: block;
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 0.5rem;
  color: #111111;
  letter-spacing: 0.03em;
}
.g-form-inputs {
  width: 100%;
  padding: 14px 16px;
  font-size: 1rem;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  background-color: #ffffff;
  color: #111111;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
}
.g-form-inputs:focus {
  outline: none;
  border-color: #00453d;
  box-shadow: 0 0 0 2px rgba(0, 69, 61, 0.1);
}
.g-form-inputs::placeholder {
  color: #aaaaaa;
  font-size: 0.9rem;
}
.g-form-inputs-textarea {
  min-height: 150px;
  resize: vertical;
}
.g-rebox {
  margin: 1.5rem 0;
}
.g-primary-btn-contact {
  background-color: #00453d;
  color: #ffffff;
  border: none;
  padding: 14px 28px;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  position: relative;
  overflow: hidden;
}
.g-primary-btn-contact:hover {
  background-color: #003530;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 69, 61, 0.2);
}
.g-primary-btn-contact:active {
  transform: translateY(0);
}
.g-primary-btn-contact:before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: #00fdeb;
  transform: scaleX(0);
  transition: transform 0.3s ease;
  transform-origin: right;
}
.g-primary-btn-contact:hover:before {
  transform: scaleX(1);
  transform-origin: left;
}
.g-primary-btn-contact-reset {
  background-color: transparent;
  color: #111111;
  border: 1px solid #e0e0e0;
  padding: 14px 28px;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-left: 1rem;
  letter-spacing: 0.03em;
}
.g-primary-btn-contact-reset:hover {
  background-color: #f5f5f5;
  border-color: #00453d;
  color: #00453d;
}
.contact-us-section .contact-form {
  flex: 2;
  background: #ffffff;
  padding: 2.5rem;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  position: relative;
  overflow: hidden;
}
.contact-us-section .contact-form:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background-color: #00453d;
}
@media (max-width: 768px) {
  .g-input-div-flex {
    flex-direction: column;
    gap: 1rem;
  }
  .g-primary-btn-contact,
  .g-primary-btn-contact-reset {
    width: 100%;
    margin: 0.5rem 0;
  }
}
.contact-us-section .contact-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.contact-us-section .info-card {
  background: #00453d;
  padding: 1.5rem;
  border-radius: 8px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s;
}
.contact-us-section .info-card:hover {
  transform: translateY(-5px);
}
.contact-us-section .info-card h2 {
  font-size: 1.5rem;
  color: #ffffff;
  margin-bottom: 1rem;
  text-transform: capitalize;
  display: flex;
  align-items: center;
}
.contact-us-section .info-card h2:before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 2px;
  background-color: #00fdeb;
  margin-right: 10px;
}
.contact-us-section .info-card i {
  margin-right: 10px;
}
.contact-us-section .info-card span {
  display: block;
  margin-bottom: 0.5rem;
  color: #ffffff;
  font-size: 1rem;
  text-align: left;
}
.contact-us-section .alternative-contact {
  margin-top: 3rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem;
  background-color: #f9f9f9;
  border-radius: 8px;
}
.contact-us-section .contact-method {
  display: flex;
  align-items: center;
}
.contact-us-section .contact-method-icon {
  background-color: #00453d;
  color: #ffffff;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 1rem;
}
.contact-us-section .contact-method-text {
  font-size: 0.9rem;
}
.contact-us-section .contact-method-text strong {
  display: block;
  font-size: 1rem;
  margin-bottom: 0.2rem;
}
.contact-us-section .social-icons {
  margin-top: 2rem;
  display: flex;
  gap: 1rem;
}
.contact-us-section .social-icon {
  background-color: #ffffff;
  color: #00453d;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #e0e0e0;
  transition: background-color 0.3s, color 0.3s, transform 0.3s;
  text-decoration: none;
}
.contact-us-section .social-icon:hover {
  background-color: #00453d;
  color: #ffffff;
  transform: translateY(-3px);
}
@media (max-width: 992px) {
  .contact-us-section .contact-flex {
    flex-direction: column;
  }
  .contact-us-section .form-row {
    flex-direction: column;
  }
  .contact-us-section .alternative-contact {
    flex-direction: column;
    gap: 1.5rem;
  }
}
.otp-modal {
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 69, 61, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(5px);
  transition: all 0.3s ease;
}
.otp-modal-content {
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  width: 90%;
  max-width: 450px;
  padding: 30px;
  position: relative;
  border-top: 5px solid #00453d;
  animation: modal-slide-in 0.4s ease;
}
@keyframes modal-slide-in {
  from {
    transform: translateY(-30px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
.otp-modal-content h6 {
  color: #111111;
  font-size: 18px;
  font-weight: 500;
  margin-top: 0;
  margin-bottom: 20px;
  line-height: 1.5;
  text-align: center;
  position: relative;
  padding-bottom: 15px;
}
.otp-modal-content h6:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 50px;
  height: 3px;
  background: linear-gradient(90deg, #00453d, #00fdeb);
}
.otp-modal-content form {
  margin-top: 25px;
}
.otp-modal-content input[type="text"] {
  width: 100%;
  padding: 15px;
  border: 2px solid #e1e1e1;
  border-radius: 6px;
  font-size: 16px;
  margin-bottom: 20px;
  transition: all 0.3s ease;
  box-sizing: border-box;
  letter-spacing: 2px;
  text-align: center;
  font-weight: 600;
}
.otp-modal-content input[type="text"]:focus {
  border-color: #00453d;
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 69, 61, 0.1);
}
.otp-modal-content input[type="text"]::placeholder {
  color: #aaaaaa;
  font-weight: normal;
  letter-spacing: normal;
}
#verifyOtpBtn {
  background-color: #00453d;
  color: #ffffff;
  border: none;
  padding: 12px 25px;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  width: 100%;
  transition: all 0.3s ease;
  margin-bottom: 15px;
}
#verifyOtpBtn:hover {
  background-color: #003731;
  box-shadow: 0 5px 15px rgba(0, 69, 61, 0.2);
}
#closeModalBtn {
  background-color: transparent;
  color: #111111;
  border: 2px solid #e1e1e1;
  padding: 12px 25px;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  width: 100%;
  transition: all 0.3s ease;
}
#closeModalBtn:hover {
  background-color: #f5f5f5;
  border-color: #cccccc;
}
.otp-modal-content:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 50px;
  height: 50px;
  background-color: rgba(0, 253, 235, 0.1);
  border-top-right-radius: 8px;
  border-bottom-left-radius: 50px;
  pointer-events: none;
}
@keyframes border-pulse {
  0% {
    border-color: #00453d;
  }
  50% {
    border-color: #00fdeb;
  }
  100% {
    border-color: #00453d;
  }
}
.otp-modal-content input[type="text"]:focus {
  animation: border-pulse 2s infinite;
  border-width: 2px;
}
@media (max-width: 576px) {
  .otp-modal-content {
    padding: 20px;
    width: 95%;
  }
  .otp-modal-content h6 {
    font-size: 16px;
  }
}
.city-section .container {
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 20px;
}
.city-section {
  padding: 60px 0;
}
.city-section .section-header {
  text-align: center;
  margin-bottom: 50px;
}
.city-section .section-header h2 {
  font-size: 32px;
  font-weight: 700;
  color: #00453d;
  margin-bottom: 20px;
}
.city-section .section-header p {
  font-size: 16px;
  line-height: 1.6;
  margin: 0 auto;
  color: #111111;
}
.city-section .city-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 10px;
}
.city-section .city-card {
  display: flex;
  align-items: center;
  background: linear-gradient(to right, #00453d, #000000);
  color: #ffffff;
  border-radius: 50px;
  padding: 0;
  overflow: hidden;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 69, 61, 0.1);
  height: 70px;
  width: 250px;
}
.city-section .city-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(0, 69, 61, 0.2);
  background: linear-gradient(to right, #005d52, #00453d);
}
.city-section .city-card-content {
  flex: 1;
  padding: 0 20px;
}
.city-section .city-name {
  display: block;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 2px;
}
.city-section .country-name {
  display: block;
  font-size: 14px;
  opacity: 0.8;
}
.city-section .flag-circle {
  background-color: #00574c;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  flex-shrink: 0;
}
.city-section .flag-icon {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
@media (max-width: 768px) {
  .city-section .city-grid {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  }
  .city-section .section-header h2 {
    font-size: 28px;
  }
}
@media (max-width: 480px) {
  .city-section .city-grid {
    grid-template-columns: 1fr;
  }
  .city-section .city-card {
    height: 60px;
  }
  .city-section .flag-circle {
    width: 60px;
    height: 60px;
  }
  .city-section .flag-icon {
    width: 28px;
    height: 28px;
  }
}
.city-section .search-container {
  margin-bottom: 30px;
  display: flex;
  justify-content: center;
}
.city-section .search-wrapper {
  position: relative;
  width: 100%;
  max-width: 500px;
}
.city-section .search-input {
  width: 100%;
  height: 50px;
  padding: 0 60px 0 20px;
  border-radius: 25px;
  border: 2px solid #00453d;
  font-size: 16px;
  outline: none;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 69, 61, 0.1);
}
.city-section .search-input:focus {
  border-color: #005d52;
  box-shadow: 0 6px 16px rgba(0, 69, 61, 0.2);
}
.city-section .search-button {
  position: absolute;
  right: 0;
  top: 0;
  height: 50px;
  width: 50px;
  border: none;
  background: #00453d;
  color: white;
  border-radius: 0 25px 25px 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s ease;
}
.city-section .search-button:hover {
  background: #005d52;
}
@media (max-width: 480px) {
  .city-section .search-input {
    height: 45px;
    font-size: 14px;
  }
  .city-section .search-button {
    height: 45px;
    width: 45px;
  }
}
:root {
  --table-heading-primary-bgcolor: #c12017 !important;
  --mobile-table-thead-primary-color: #c12017 !important;
  --table-section-main-title-color: #00205b !important;
  --table-sections-main-font-family: poppins !important;
  --table-thead-primary-color: #fff !important;
  --table-custom-border: 1px solid #000;
  --table-buy-button-bgcolor: #4c83ff;
  --table-buy-button-color: #fff;
  --table-caption-bgcolor: #222;
  --table-caption-color: #fff;
  --mobile-view-product-name: dashed 1px #222 !important;
  --mobile-view-card-border: solid 1px #ebebeb !important;
  --redirect-btn-bgcolor: #3083ff !important;
  --redirect-btn-color: #fff !important;
}
.g-new-product-pricing-table-container {
  font-family: var(--table-sections-main-font-family);
  margin-bottom: 50px !important;
}
.g-new-product-pricing-table {
  border: var(--table-custom-border);
}
.g-new-product-pricing-table-thead {
  background-color: var(--table-heading-primary-bgcolor);
  color: var(--table-thead-primary-color);
  border: var(--table-custom-border);
}
.g-new-product-pricing-table-thead:not(:first-child) {
  text-align: center !important;
}
.g-new-product-pricing-table-data:not(:first-child) {
  text-align: center !important;
}
.g-new-product-pricing-table-data {
  border: var(--table-custom-border);
}
.g-new-product-pricing-table-data-btn {
  background-color: var(--table-buy-button-bgcolor);
  color: var(--table-buy-button-color);
  font-weight: 600 !important;
  padding: 10px;
  font-size: 14px;
  border-radius: 3px;
}
.g-new-product-pricing-table-caption {
  background-color: var(--table-caption-bgcolor);
  color: var(--table-caption-color);
  scroll-margin-top: 150px;
}
.g-new-product-pricing-table-data:first-child {
}
.f-highlight {
  color: #1e4c32;
  text-decoration: underline;
}
.g-new-product-pricing-table-wrapper-title {
  text-align: center;
  font-size: 30px !important;
  font-family: var(--table-sections-main-font-family) !important;
  margin-bottom: 30px;
}
.g-new-product-pricing-table-wrapper {
  margin-top: 50px !important;
}
.g-redirect-table-btns {
  text-decoration: none;
  background: #194841;
  color: var(--redirect-btn-color) !important;
  font-weight: 600;
  padding: 10px 20px;
  border-radius: 5px;
}
.g-redirect-table-btns-div {
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
@media screen and (max-width: 1100px) {
  .g-new-product-pricing-table-thead {
    display: none;
  }
  .g-new-product-pricing-table-tbody-row {
    display: flex;
    flex-direction: column;
    width: 100%;
    border: var(--mobile-view-card-border);
    border-radius: 10px;
    padding: 20px;
    box-shadow: rgba(100, 100, 111, 0.2) 0 7px 29px 0;
  }
  .g-new-product-pricing-table-data {
    border: none !important;
    text-align: center;
  }
  .g-new-product-pricing-table-tbody {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    justify-items: center;
    gap: 30px;
    margin-top: 50px;
  }
  .g-new-product-pricing-table-caption {
    border-radius: 10px;
  }
  .g-new-product-pricing-table {
    border: none !important;
  }
  .g-new-product-pricing-table-data:nth-child(1) {
    border-bottom: var(--mobile-view-product-name) !important;
    padding-bottom: 22px;
    font-size: 20px;
    color: var(--mobile-table-thead-primary-color) !important;
    font-weight: 600;
  }
  .g-new-product-pricing-table-data:nth-child(2) {
    margin-top: 25px;
  }
  .g-new-product-pricing-table-data-btn {
    width: 100%;
    padding: 15px 10px;
  }
}
@media screen and (max-width: 800px) {
  .g-new-product-pricing-table-tbody {
    grid-template-columns: repeat(1, 1fr);
  }
}
.product-table-section {
  max-width: 1700px;
  margin: 0 auto;
  padding: 2rem 1rem;
  color: #111111;
}
.product-table-section .g-new-product-pricing-table-container {
  border-radius: 8px;
  overflow: hidden;
  background-color: #ffffff;
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
}
.product-table-section .g-new-product-pricing-table-wrapper-title {
  font-size: 28px;
  text-align: center;
  margin: 2rem 0;
  color: #00453d;
  font-weight: 600;
  border-bottom: 2px solid #00453d;
  padding-bottom: 1rem;
}
.product-table-section .g-new-product-pricing-table-wrapper {
  margin-bottom: 3rem;
}
.product-table-section .g-new-product-pricing-table {
  margin-bottom: 50px !important;
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}
.product-table-section .g-new-product-pricing-table-caption {
  background-color: #00453d;
  color: #ffffff;
  font-size: 18px;
  font-weight: 600;
  padding: 1rem;
  text-align: left;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  position: relative;
  caption-side: top;
}
.product-table-section .g-new-product-pricing-table-caption:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 50px;
  height: 3px;
  background-color: #00fdeb;
}
.product-table-section .g-new-product-pricing-table-thead {
  background-color: #f5f5f5;
}
.product-table-section .g-new-product-pricing-table-thead th {
  padding: 1rem;
  text-align: left;
  font-weight: 600;
  color: #ffffff;
  border-bottom: 2px solid #e0e0e0;
  background-color: #000000;
}
.product-table-section .g-new-product-pricing-table-tbody-row {
  transition: all 0.2s ease;
}
.product-table-section .g-new-product-pricing-table-tbody-row:hover {
  background-color: rgba(0, 253, 235, 0.1);
}
.product-table-section .g-new-product-pricing-table-tbody-row:nth-child(even) {
  background-color: rgba(0, 253, 235, 0.05);
}
.product-table-section .g-new-product-pricing-table-data {
  padding: 1rem;
  border: 1px solid #e0e0e0;
  vertical-align: middle;
}
.product-table-section .g-new-product-pricing-table-data .gpu {
  color: #328957;
  font-weight: 700;
}
.product-table-section .g-new-product-pricing-table-data .adinl-strg {
  color: blue;
}
.product-table-section .g-new-product-pricing-table-data .adinl-strg i {
  color: red;
}
.product-table-section .g-new-product-pricing-table-data a {
  text-decoration: none;
}
.product-table-section .g-new-product-pricing-table-data-span {
  font-size: 0.8rem;
  color: #666666;
  margin-top: 0.3rem;
}
.product-table-section .price {
  font-size: 20px;
}
.product-table-section .g-new-product-pricing-table-data-btn {
  background-color: #00453d;
  color: white;
  border: none;
  padding: 0.6rem 1.2rem;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin: 0 auto;
}
.product-table-section .g-new-product-pricing-table-data-btn:hover {
  background-color: #003630;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  transform: translateY(-2px);
}
.product-table-section .g-new-product-pricing-table-data-btn i {
  font-size: 0.9rem;
}
.product-table-section .g-redirect-table-btns-div {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 2rem;
}
@media (max-width: 992px) {
  .product-table-section .g-new-product-pricing-table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
  .product-table-section .g-new-product-pricing-table-wrapper-title {
    font-size: 24px;
  }
}
@media (max-width: 768px) {
  .product-table-section .g-new-product-pricing-table-caption {
    font-size: 16px;
  }
  .product-table-section .g-new-product-pricing-table-data {
    padding: 0.8rem;
  }
  .product-table-section .g-new-product-pricing-table-wrapper-title {
    font-size: 22px;
  }
}
.footer-sec {
  background: linear-gradient(135deg, #111111 0%, #00453d 100%);
  color: #ffffff;
  padding: 4rem 2rem;
}
.footer-sec .footer-container {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr repeat(3, 1fr);
  gap: 3rem;
}
.footer-sec .footer-section {
  display: flex;
  flex-direction: column;
}
.footer-sec .company-info .logo {
  font-size: 2.5rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 1rem;
  letter-spacing: -1px;
}
.footer-sec .company-info .logo img {
  max-width: 200px;
  height: auto;
}
.footer-sec .company-info .description {
  color: #a0a0a0;
  margin-bottom: 1.5rem;
  line-height: 1.8;
  margin-top: 1rem;
}
.footer-sec .footer-section h2 {
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #00fdeb;
  border-bottom: 2px solid rgba(0, 253, 235, 0.3);
  padding-bottom: 0.8rem;
  margin-bottom: 1.5rem;
}
.footer-sec .footer-section ul {
  list-style: none;
}
.footer-sec .footer-section ul li {
  margin-bottom: 0.8rem;
}
.footer-sec .footer-section ul li a {
  color: #ffffff;
  text-decoration: none;
  transition: color 0.3s ease;
}
.footer-sec .footer-section ul li a:hover {
  color: #00fdeb;
}
.footer-sec .contact-details {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.footer-sec .contact-details a,
.footer-sec .contact-details p {
  color: #ffffff;
  text-decoration: none;
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  line-height: 1.6;
}
.footer-sec .contact-details i {
  color: #00fdeb;
  font-size: 1.2rem;
  width: 1.5rem;
  flex-shrink: 0;
  margin-top: 0.2rem;
}
.footer-sec .footer-bottom-up {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 0 10px;
}
.footer-sec .footer-bottom {
  max-width: 1400px;
  margin: 0 auto;
  padding-top: 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.footer-sec .footer-bottom .legal-links ul {
  display: flex;
  list-style: none;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.footer-sec .footer-bottom .legal-links ul li a {
  color: #ffffff;
  text-decoration: none;
  transition: color 0.3s ease;
  white-space: nowrap;
}
.footer-sec .footer-bottom .legal-links ul li a:hover {
  color: #00fdeb;
}
.footer-sec .social-links {
  display: flex;
  gap: 1.5rem;
  margin: 10px 0;
  padding-left: 30px;
}
.footer-sec .social-links a {
  background-color: white;
  color: #000000;
  font-size: 20px;
  transition: color 0.3s ease;
  padding: 9px 16px;
  border-radius: 50%;
}
.footer-sec .social-links a:hover {
  background-color: #00fdeb;
}
.footer-sec .copyright {
  color: #a0a0a0;
  font-size: 0.9rem;
}
.payment-method img {
  max-width: 200px;
  height: auto;
}

.whtop-img{
  width: 60px;
    height: auto;
}

.ratings{
  display: flex;
}
@media (max-width: 1200px) {
  .footer-sec .footer-container {
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5rem;
  }
  .footer-sec {
    padding: 3rem 1.5rem;
  }
}
@media (max-width: 768px) {
  .footer-sec {
    padding: 2.5rem 1rem;
  }
  .footer-sec .footer-container {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .footer-sec .company-info .logo {
    font-size: 2rem;
  }
  .footer-sec .company-info .logo img {
    max-width: 150px;
  }
  .footer-sec .footer-section h2 {
    font-size: 0.9rem;
    letter-spacing: 1px;
  }
  .footer-sec .footer-bottom-up {
    flex-direction: column-reverse;
    gap: 1.5rem;
    padding: 15px 0;
  }
  .footer-sec .social-links {
    padding-left: 0;
    justify-content: center;
  }
  .footer-sec .footer-bottom {
    flex-direction: column;
    gap: 1.5rem;
    text-align: center;
  }
  .footer-sec .footer-bottom .legal-links ul {
    justify-content: center;
    gap: 1rem;
  }
  .payment-method {
    text-align: center;
  }
  .payment-method img {
    max-width: 150px;
  }
}
@media (max-width: 480px) {
  .footer-sec {
    padding: 2rem 0.75rem;
  }
  .footer-sec .footer-container {
    gap: 1.5rem;
  }
  .footer-sec .company-info .logo {
    font-size: 1.8rem;
  }
  .footer-sec .company-info .logo img {
    max-width: 120px;
  }
  .footer-sec .company-info .description {
    font-size: 0.9rem;
    line-height: 1.6;
  }
  .footer-sec .footer-section h2 {
    font-size: 0.85rem;
    margin-bottom: 1rem;
  }
  .footer-sec .footer-section ul li {
    margin-bottom: 0.6rem;
  }
  .footer-sec .footer-section ul li a {
    font-size: 0.9rem;
  }
  .footer-sec .contact-details a,
  .footer-sec .contact-details p {
    font-size: 0.9rem;
    gap: 0.6rem;
  }
  .footer-sec .contact-details i {
    font-size: 1rem;
    width: 1.2rem;
  }
  .footer-sec .social-links {
    gap: 1rem;
  }
  .footer-sec .social-links a {
    padding: 8px 10px;
    font-size: 18px;
  }
  .footer-sec .footer-bottom .legal-links ul {
    gap: 0.8rem;
    flex-direction: column;
  }
  .footer-sec .footer-bottom .legal-links ul li a {
    font-size: 0.9rem;
  }
  .footer-sec .copyright {
    font-size: 0.8rem;
  }
  .payment-method img {
    max-width: 120px;
  }
}
@media (max-width: 320px) {
  .footer-sec {
    padding: 1.5rem 0.5rem;
  }
  .footer-sec .company-info .logo img {
    max-width: 100px;
  }
  .footer-sec .social-links a {
    padding: 6px 8px;
    font-size: 16px;
  }
  .payment-method img {
    max-width: 100px;
  }
}
.common-pg-section .container {
  max-width: 1500px;
  margin: 0 auto;
  padding: 40px 20px;
}
.common-pg-section .section {
  margin-bottom: 30px;
  padding: 25px;
  border-radius: 6px;
  background-color: #ffffff;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}
.common-pg-section h2 {
  color: #00453d;
  border-bottom: 2px solid #00fdeb;
  padding-bottom: 10px;
  font-size: 20px;
  margin-top: 0;
}
.common-pg-section p,
.common-pg-section li {
  color: #333333;
  font-size: 15px;
}
.common-pg-section strong {
  color: #00453d;
  font-weight: 600;
}
.common-pg-section ul {
  padding-left: 20px;
}
.common-pg-section li {
  margin-bottom: 8px;
}
.common-pg-section a {
  color: #00453d;
  text-decoration: none;
  border-bottom: 1px solid #00fdeb;
  transition: all 0.2s ease;
}
.common-pg-section a:hover {
  color: #00fdeb;
}
.common-pg-section .notice {
  background-color: rgba(0, 69, 61, 0.1);
  border-left: 4px solid #00453d;
  padding: 15px;
  margin: 20px 0;
  color: #111111;
}
.common-pg-section .section:hover {
  box-shadow: 0 5px 15px rgba(0, 69, 61, 0.1);
  transition: all 0.3s ease;
}
.common-pg-section h2::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 20px;
  background-color: #00fdeb;
  margin-right: 10px;
  vertical-align: middle;
}
.common-pg-section .contact-info {
  background-color: #f8f9fa;
  padding: 15px;
  border-radius: 5px;
  margin-top: 20px;
}
.city-selection-section {
  padding: 60px 0;
  background-color: #ffffff;
  color: #111111;
}
.city-selection-section .container {
  max-width: 1700px;
  margin: 0 auto;
  padding: 0 20px;
}
.city-selection-section .section-header {
  text-align: center;
  margin-bottom: 40px;
}
.city-selection-section .section-header h2 {
  font-size: 36px;
  font-weight: 700;
  color: #00453d;
  margin-bottom: 16px;
  position: relative;
  display: inline-block;
}
.city-selection-section .section-header h2:after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 3px;
  background-color: #00fdeb;
}
.city-selection-section .section-header p {
  font-size: 16px;
  line-height: 1.6;
  margin: 0 auto;
  color: #111111;
}
.city-selection-section .search-container {
  margin-bottom: 40px;
  display: flex;
  justify-content: center;
}
.city-selection-section .search-wrapper {
  display: flex;
  width: 100%;
  max-width: 500px;
  border: 2px solid #00453d;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 69, 61, 0.1);
}
.city-selection-section .search-input {
  flex-grow: 1;
  padding: 14px 20px;
  border: none;
  outline: none;
  font-size: 16px;
  color: #111111;
}
.city-selection-section .search-button {
  background-color: #00453d;
  color: #ffffff;
  border: none;
  padding: 0 20px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
.city-selection-section .search-button:hover {
  background-color: #003630;
}
.city-selection-section .city-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
}
.city-selection-section .city-card {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  text-decoration: none;
  height: 160px;
}
.city-selection-section .city-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}
.city-selection-section .city-image {
  position: relative;
  width: 100%;
  height: 100%;
}
.city-selection-section .city-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.city-selection-section .city-label {
  position: absolute;
  bottom: 0;
  right: 0;
  padding: 8px 16px;
  background-color: rgba(0, 69, 61, 0.9);
  color: #ffffff;
  font-weight: 600;
  font-size: 18px;
  border-top-left-radius: 8px;
}
.city-selection-section .city-label i {
  margin-left: 15px;
}
@media (max-width: 768px) {
  .city-selection-section .city-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }
  .city-selection-section .section-header h2 {
    font-size: 28px;
  }
  .city-selection-section .section-header p {
    font-size: 14px;
  }
}
@media (max-width: 480px) {
  .city-selection-section .city-grid {
    grid-template-columns: 1fr 1fr;
    gap: 15px;
  }
  .city-selection-section .city-card {
    height: 140px;
  }
  .city-selection-section .city-label {
    font-size: 14px;
    padding: 6px 12px;
  }
}
.server-request-form-section {
  max-width: 1500px;
  margin: 0 auto;
  background-color: #ffffff;
}
.server-request-form-section .form-card {
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  padding: 32px;
  margin: 20px 0;
  position: relative;
  overflow: hidden;
}
.server-request-form-section .form-intro {
  margin-bottom: 30px;
  position: relative;
  background-color: #00453d;
  text-align: center;
  padding: 24px 10px 14px;
  border-radius: 8px;
}
.server-request-form-section .form-intro h3 {
  color: #ffffff;
  font-size: 35px;
  font-weight: 700;
  margin-bottom: 20px;
  position: relative;
  display: inline-block;
}
.server-request-form-section .form-intro h3::after {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 44%;
  width: 60px;
  height: 3px;
  background-color: #00fdeb;
}
.server-request-form-section .form-intro p {
  color: #ffffff;
  font-size: 16px;
  line-height: 1.5;
}
.server-request-form-section .section-title {
  color: #00453d;
  font-size: 20px;
  font-weight: 500;
  margin: 25px 0 15px;
}
.server-request-form-section .section-divider {
  height: 1px;
  background-color: #e0e0e0;
  margin: 30px 0;
}
.server-request-form-section .form-group {
  margin-bottom: 20px;
}
.server-request-form-section .form-label {
  display: block;
  margin-bottom: 8px;
  color: #111111;
  font-weight: 500;
  font-size: 14px;
}
.server-request-form-section .required-star {
  color: #00453d;
  margin-left: 3px;
}
.server-request-form-section .form-control {
  width: 100%;
  padding: 12px 15px;
  border: 1px solid #dedede;
  border-radius: 4px;
  font-size: 14px;
  color: #111111;
  background-color: #ffffff;
  transition: all 0.3s ease;
}
.server-request-form-section .form-control:focus {
  border-color: #00453d;
  box-shadow: 0 0 0 2px rgba(0, 69, 61, 0.1);
  outline: none;
}
.server-request-form-section .form-control::placeholder {
  color: #aaaaaa;
}
.server-request-form-section textarea.form-control {
  resize: vertical;
  min-height: 120px;
}
.server-request-form-section .submit-btn {
  background-color: #00453d;
  color: #ffffff;
  border: none;
  border-radius: 4px;
  padding: 12px 32px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.server-request-form-section .submit-btn:hover {
  background-color: #003830;
  box-shadow: 0 4px 8px rgba(0, 69, 61, 0.2);
  transform: translateY(-2px);
}
.server-request-form-section .submit-btn:active {
  transform: translateY(0);
}
.server-request-form-section .form-card {
  position: relative;
}
@media (min-width: 768px) {
  .server-request-form-section .form-group {
    display: inline-block;
    width: 48%;
    margin-right: 3%;
  }
  .server-request-form-section .form-group:nth-child(even) {
    margin-right: 0;
  }
}
.server-request-form-section .form-card::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  height: 40px;
  background: linear-gradient(
    135deg,
    transparent 50%,
    rgba(0, 253, 235, 0.1) 50%
  );
}
.server-request-form-section .g-recaptcha {
  margin: 20px 0;
}
.server-request-form-section .form-control:focus {
  border-color: #00453d;
  box-shadow: 0 0 0 2px rgba(0, 253, 235, 0.2);
}
.not-found-section .not-found-image-container {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-right: 135px;
}
.not-found-section .not-found-image {
  width: 650px;
}
.not-found-section .not-found-image img {
  width: 100%;
  height: auto;
  object-fit: contain;
}
.not-found-section .not-fount-content-section {
  flex: 1;
  text-align: left;
  color: #111111;
}
.not-found-section .not-fount-content h2 {
  font-size: 2.5rem;
  color: #00453d;
  margin-bottom: 0.5rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
}
.not-found-section .not-fount-content h3 {
  font-size: 3rem;
  color: #111111;
  margin-bottom: 1rem;
  font-weight: 300;
}
.not-found-section .not-fount-content p {
  font-size: 1rem;
  line-height: 1.6;
  color: #111111;
  margin-bottom: 2rem;
  opacity: 0.8;
}
.not-found-section .not-fount-btns {
  display: flex;
  align-items: center;
}
.not-found-section .landing-btn {
  display: inline-block;
  padding: 12px 24px;
  background-color: #00453d;
  color: #ffffff;
  text-decoration: none;
  border-radius: 5px;
  transition: all 0.3s ease;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  border: 2px solid #00453d;
}
.not-found-section .landing-btn:hover {
  background-color: #00fdeb;
  color: #00453d;
  border-color: #00fdeb;
  box-shadow: 0 5px 15px rgba(0, 253, 235, 0.3);
}
@media screen and (max-width: 768px) {
  .not-found-section .container {
    flex-direction: column;
    text-align: center;
  }
  .not-found-section .not-found-image-container {
    padding-right: 0;
    margin-bottom: 2rem;
  }
  .not-found-section .not-fount-content-section {
    text-align: center;
  }
  .not-found-section .not-fount-btns {
    justify-content: center;
  }
}
.city-btn-section {
  padding-right: 30px;
  padding-left: 30px;
  padding-bottom: 70px;
  padding-top: 70px;
  max-width: 1400px;
  margin: 0 auto;
  text-align: center;
}
.city-btn-section a {
  font-weight: 500;
  font-size: 16px;
  text-decoration: none;
  color: white;
}
.header-section {
  margin-bottom: 50px;
}
.city-btn-title {
  font-size: 2.5rem;
  color: #333;
  font-weight: 600;
  margin-bottom: 20px;
  line-height: 1.2;
}
.f-ds-highlight {
  color: #24603e;
  font-weight: 700;
  text-decoration: underline;
}
.usa-city-btn-section {
  display: flex;
  justify-content: center;
  gap: 30px;
  flex-wrap: wrap;
}
.usa-city-btn {
  background: linear-gradient(501deg, rgb(0 0 0 / 100%), rgb(0 69 61));
  border-radius: 50px;
  padding: 18px 35px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 180px;
  box-shadow: 0 8px 25px rgb(5 53 48 / 27%);
  transition: all 0.3s ease;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.usa-city-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.2) 0%,
    rgba(255, 255, 255, 0.1) 100%
  );
  transition: left 0.3s ease;
}
.usa-city-btn:hover::before {
  left: 100%;
}
.usa-city-btn:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgb(0 69 61 / 43%);
}
.usa-city-btn-text {
  position: relative;
  z-index: 2;
}
.usa-city-btn-text a {
  color: white;
  text-decoration: none;
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 0.5px;
}
.arrow {
  margin-left: 15px;
  position: relative;
  z-index: 2;
}
.arrow i {
  color: white;
  font-size: 1.2rem;
  animation: moveRight 1.5s ease-in-out infinite;
}
@keyframes moveRight {
  0%,
  100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(8px);
  }
}
.usa-city-btn:hover .arrow i {
  animation: moveRightFast 0.8s ease-in-out infinite;
}
@keyframes moveRightFast {
  0%,
  100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(12px);
  }
}
@media (max-width: 768px) {
  .city-btn-title {
    font-size: 2rem;
    padding: 0 20px;
  }
  .usa-city-btn-section {
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }
  .usa-city-btn {
    width: 100%;
    max-width: 280px;
    padding: 16px 30px;
  }
  .usa-city-btn-text a {
    font-size: 1rem;
  }
}
@media (max-width: 480px) {
  .city-btn-title {
    font-size: 1.8rem;
  }
  .header-section {
    margin-bottom: 30px;
  }
  .usa-city-btn {
    padding: 14px 25px;
    min-width: 160px;
  }
  .usa-city-btn-text a {
    font-size: 0.95rem;
  }
  .arrow i {
    font-size: 1rem;
  }
}
@media (min-width: 1024px) {
  .usa-city-btn-section {
    gap: 40px;
  }
  .usa-city-btn {
    min-width: 200px;
    padding: 20px 40px;
  }
}
.usa-city-btn {
  animation: fadeInUp 0.6s ease-out;
}
.usa-city-btn:nth-child(1) {
  animation-delay: 0.1s;
}
.usa-city-btn:nth-child(2) {
  animation-delay: 0.2s;
}
.usa-city-btn:nth-child(3) {
  animation-delay: 0.3s;
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.usa-city-btn:active {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(255, 107, 53, 0.3);
}
.g-cityBtnToggler {
  width: auto;
  margin-top: 13px;
  border: none;
  font-weight: 600;
  font-size: 18px;
  padding: 8px 14px;
  color: #fff;
  border-radius: 20px;
  background: rgb(255, 108, 44);
  background: -moz-linear-gradient(
    93deg,
    rgba(114, 4, 85, 1) 0%,
    rgba(255, 108, 44, 1) 100%
  );
  background: -webkit-linear-gradient(
    93deg,
    rgba(114, 4, 85, 1) 0%,
    rgba(255, 108, 44, 1) 100%
  );
  background: linear-gradient(
    93deg,
    rgba(114, 4, 85, 1) 0%,
    rgba(255, 108, 44, 1) 100%
  );
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#830016",endColorstr="#d70024",GradientType=1);
}
.gLocation-Finder {
  margin-bottom: 20px;
  border: 1px solid #ccc;
  padding: 5px 16px !important;
  border-left: 3px solid #3c0753;
  outline: none;
  width: 100%;
  position: relative;
  font-size: 16px !important;
}
.gLocation-Finder::placeholder {
  font-size: 14px !important;
  color: #ccc !important;
}
.NavigateBtnimgDiv {
  width: 30px;
  margin-right: 10px;
}
.filterwrap {
  max-width: 1700px !important;
}
.g-side-panel-btn-container {
  background: #fbf8f8;
  padding: 20px 20px;
  border-radius: 10px;
  box-shadow: rgba(100, 100, 111, 0.2) 0 7px 29px 0;
  border: 1px solid #ccc;
  flex: 1 1 350px;
  height: fit-content;
  text-align: center;
}
.g-content-center {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.g-side-by-side-panel-container {
  display: flex;
  flex-direction: row-reverse;
  gap: 30px;
}
.g-sub-tbl-Navigate-Btn {
  background-color: #3c0753;
  padding: 10px;
  border: 1px solid #ccc;
  text-align: justify;
  color: #fff;
  font-weight: 600;
  border-radius: 6px;
  transition: 0.3s ease-in-out;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  font-size: 14px;
}
#gspectablewrapper {
  width: 100%;
}
.g-sub-tbl-Navigate-Btn:hover {
  background-color: #000;
  transition: 0.3s ease-in-out;
}
#gsubBtnGroupContainer {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.gwidth100 > .g-new-product-pricing-table > .g-new-product-pricing-table-thead {
  color: #fff !important;
}
@media screen and (max-width: 1400px) {
  .g-side-panel-btn-container {
    flex: 1 1 320px;
  }
}
@media screen and (max-width: 1100px) {
  .g-side-by-side-panel-container {
    flex-wrap: wrap;
  }
  .g-side-panel-btn-container {
    flex: 1 auto !important;
  }
  .g-side-by-side-panel-container {
    flex-direction: column-reverse;
  }
  #gsubBtnGroupContainer {
    flex-direction: row;
    flex-wrap: wrap;
  }
  #gsubBtnGroupContainer > .g-sub-tbl-Navigate-Btn {
    flex: 1 1 200px;
  }
}
.g-side-panel-btn-container-defr-div {
  flex: 1 1 auto !important;
}
.gsubBtnGroupContainerdef {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px !important;
}
.gsubBtnGroupContainerdef > .g-sub-tbl-Navigate-Btn {
  width: 100% !important;
}
.faq-section {
  padding: 80px 0;
  position: relative;
  background: linear-gradient(135deg, #ffffff 0%, #e8f3f1 100%);
}
.faq-section .container {
  max-width: 1500px;
  margin: 0 auto;
  padding: 0 20px;
  position: relative;
  z-index: 1;
}
.faq-section .faq-title {
  text-align: center;
  font-size: 35px;
  font-weight: 700;
  color: #111111;
  margin-bottom: 20px;
  position: relative;
}
.faq-section .faq-title::after {
  content: "";
  position: absolute;
  bottom: -15px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 4px;
  background: linear-gradient(90deg, #00453d 0%, #00fdeb 100%);
  border-radius: 2px;
}
.faq-section .faq-item {
  background: rgba(255, 255, 255, 0.9);
  border-radius: 16px;
  margin-bottom: 24px;
  box-shadow: 0 8px 32px rgba(0, 69, 61, 0.08);
  border: 1px solid rgba(232, 243, 241, 0.6);
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}
.faq-section .faq-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #00453d 0%, #00fdeb 100%);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease;
}
.faq-section .faq-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(0, 69, 61, 0.12);
}
.faq-section .faq-item:hover::before {
  transform: scaleX(1);
}
.faq-section .faq-question {
  padding: 15px 30px;
  font-size: 18px;
  font-weight: 600;
  color: #111111;
  cursor: pointer;
  position: relative;
  transition: all 0.3s ease;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.faq-section .faq-question::after {
  content: "+";
  font-size: 1.5rem;
  color: #00453d;
  font-weight: 300;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 69, 61, 0.1);
  border-radius: 50%;
  flex-shrink: 0;
  margin-left: 20px;
}
.faq-section .faq-item:hover .faq-question {
  color: #00453d;
}
.faq-section .faq-item.active .faq-question::after {
  transform: rotate(45deg);
  background: #00453d;
  color: white;
}
.faq-section .faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 0;
}
.faq-section .faq-item.active .faq-answer {
  max-height: 800px;
  opacity: 1;
  padding: 0 32px 32px 32px;
}
.faq-section .faq-answer p {
  color: #555;
  font-size: 1rem;
  line-height: 1.7;
  margin-bottom: 16px;
}
.faq-section .faq-answer ul {
  list-style: none;
  padding-left: 0;
}
.faq-section .faq-answer li {
  color: #555;
  font-size: 1rem;
  line-height: 1.7;
  margin-bottom: 12px;
  position: relative;
  padding-left: 24px;
}
.faq-section .faq-answer li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  width: 6px;
  height: 6px;
  background: linear-gradient(45deg, #00453d, #00fdeb);
  border-radius: 50%;
}
.faq-section .faq-answer strong {
  color: #00453d;
  font-weight: 600;
}
.language-selector .btn-link {
  color: white;
  text-decoration: none;
}
.language-selector .btn-link:hover {
  color: #00fdeb;
  text-decoration: none;
}
@media (max-width: 768px) {
  .faq-section {
    padding: 60px 0;
  }
  .faq-section .container {
    padding: 0 16px;
  }
  .faq-section .faq-title {
    font-size: 2.25rem;
    margin-bottom: 40px;
  }
  .faq-section .faq-question {
    padding: 24px 20px;
    font-size: 1.125rem;
  }
  .faq-section .faq-question::after {
    margin-left: 12px;
  }
  .faq-section .faq-item.active .faq-answer {
    padding: 0 20px 24px 20px;
  }
  .faq-section .faq-answer li {
    padding-left: 20px;
  }
}
@media (max-width: 480px) {
  .faq-section .faq-title {
    font-size: 1.875rem;
  }
  .faq-section .faq-question {
    padding: 20px 16px;
    font-size: 1rem;
  }
  .faq-section .faq-item.active .faq-answer {
    padding: 0 16px 20px 16px;
  }
}
.g-new-product-pricing-wrapper {
  font-family: "Poppins", sans-serif;
  margin: 0;
  padding: 40px 20px;
  background-color: #f0f0f0;
}
.g-new-product-pricing-heading {
  text-align: center;
  color: #00453d;
  margin-bottom: 50px;
  font-weight: 800;
}
.product-group-17 {
  max-width: 1200px;
  margin: auto;
}
.server-card-17 {
  display: flex;
  background: #fff;
  margin-bottom: 16px;
  border-radius: 15px;
  border: 1px solid #ccc;
  transition: transform 0.4s, box-shadow 0.4s;
  overflow: hidden;
  z-index: 1;
}
.server-card-17:hover {
  transform: translateY(-3px);
}
.cutout-price-value-17 {
  color: #ccc;
  font-size: 22px;
  text-decoration: line-through;
}
.card-processor-17 {
  flex: 1.5;
  min-width: 250px;
  background: linear-gradient(135deg, #005f54 0%, #00453d 100%);
  color: #fff;
  padding: 30px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  z-index: 1;
}
.card-processor-17::after {
  content: "";
  position: absolute;
  top: 0;
  right: -30px;
  bottom: 0;
  width: 60px;
  background-color: #fff;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 30px 100%);
  transform: skewX(-8deg);
  box-shadow: -5px 0 10px rgba(0, 0, 0, 0.1);
  z-index: 2;
}
.processor-name-17 {
  margin: 0;
  font-size: 1.9em;
  font-weight: 900;
  line-height: 1.1;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
  z-index: 3;
}
.processor-specs-17 {
  margin: 5px 0 15px;
  font-size: 1em;
  color: #e0e0e0;
  font-weight: 400;
  z-index: 3;
}
.pid-ref-17 {
  font-size: 0.85em;
  color: #fff;
  padding: 5px 12px;
  background-color: #00453d;
  border: 1px solid #005f54;
  border-left: 4px solid #00ffe1;
  border-radius: 5px;
  font-weight: 600;
  display: inline-block;
  max-width: max-content;
}
.country-flag-17 {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 3px solid #ffffff;
}
.server-card-17-location-wrapper {
  display: flex;
  gap: 15px;
  margin-bottom: 15px;
  font-weight: 600;
  align-items: center;
}
.series-logo-box-img-17 {
  width: 50px;
}
.brand-logo-17 {
  width: 60px;
}
.card-pricing-17-divs {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  width: 100%;
  gap: 10px;
}
.processor-logos-wrapper {
  display: flex;
  gap: 11px;
  justify-content: center;
  align-items: center;
}
.card-content-17 {
  flex: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30px 40px 30px 10px;
  gap: 30px;
  z-index: 1;
}
.card-features-17 {
  flex: 2;
  display: flex;
  gap: 25px;
  justify-content: space-around;
}
.feature-item-17 {
  text-align: center;
  padding: 0 5px;
  flex: 1;
}
.feature-item-17 i {
  font-size: 1.6em;
  color: #005f54;
  display: block;
  margin-bottom: 5px;
}
.feature-label-17 {
  font-size: 0.75em;
  color: #666;
  text-transform: uppercase;
  font-weight: 600;
  display: block;
}
.feature-value-17 {
  font-size: 1.1em;
  color: #00453d;
  font-weight: 800;
  display: block;
}
.card-pricing-17 {
  flex: 1;
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  min-width: 150px;
  border-left: 2px solid #f0f0f0;
  padding-left: 20px;
}
.price-value-17 {
  font-size: 2.2em;
  font-weight: 900;
  color: #005f54;
  line-height: 1;
  margin-bottom: 5px;
}
.price-period-17 {
  font-size: 1em;
  color: #000;
  margin-bottom: 15px;
  font-weight: 600;
  display: block;
}
.buy-btn-17 {
  background-color: #00453d;
  color: #fff;
  padding: 14px 25px;
  text-decoration: none;
  border-radius: 10px;
  font-weight: 700;
  font-size: 15px !important;
  padding: 13px 15px;
  transition: background-color 0.3s, box-shadow 0.3s;
  box-shadow: 0 5px 15px rgba(0, 69, 61, 0.4);
  text-transform: uppercase;
  display: inline-block;
}
.buy-btn-17:hover {
  background-color: #005f54;
  box-shadow: 0 8px 20px rgba(0, 95, 84, 0.6);
}
.support-badge-17 {
  margin-top: 15px;
  font-size: 0.85em;
  color: #666;
  font-weight: 600;
  text-align: right;
  width: 100%;
}
.support-badge-17 i {
  color: #005f54;
  margin-right: 5px;
}
@media (max-width: 950px) {
  .support-badge-17 {
    text-align: left;
    order: 3;
    margin-top: 10px;
    font-size: 0.8em;
  }
}
@media (max-width: 950px) {
  .server-card-17 {
    flex-wrap: wrap;
  }
  .card-processor-17 {
    flex: 1 1 100%;
    min-width: initial;
    border-radius: 15px 15px 0 0;
  }
  .card-processor-17::after {
    content: none;
  }
  .card-content-17 {
    flex: 1 1 100%;
    flex-wrap: wrap;
    padding: 20px 30px;
  }
  .card-features-17 {
    flex: 1 1 100%;
    justify-content: space-around;
    padding-bottom: 15px;
    border-bottom: 1px dashed #e0e0e0;
    gap: 20px;
  }
  .card-pricing-17 {
    flex: 1 1 100%;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding-top: 15px;
    min-width: initial;
    text-align: left;
    border-left: none;
    padding-left: 0;
  }
  .price-period-17 {
    margin-bottom: 0;
  }
}
.g-new-product-pricing-table-caption-def {
  padding: 10px 20px;
  margin-bottom: 20px;
  background-color: whitesmoke;
  border-left: 5px solid #00ffc4 !important;
  font-size: 22px;
  font-weight: 600;
  border: 1px solid #f1f1f1;
}
.left-filter-panel {
  position: fixed;
  top: 0;
  left: -370px;
  width: 350px;
  height: 100vh;
  background-color: #111111;
  color: #ffffff;
  box-shadow: 10px 0 30px rgba(0, 0, 0, 0.7);
  z-index: 2000;
  overflow-y: auto;
  transition: left 0.5s cubic-bezier(0.6, 0.05, 0.01, 0.9);
  padding-bottom: 50px;
  border-right: 2px solid #005f54;
}
.left-filter-panel.panel-open {
  left: 0;
}
.left-filter-panel + #filterToggleBtn::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  z-index: 1999;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.left-filter-panel.panel-open + #filterToggleBtn::before {
  pointer-events: auto;
  opacity: 1;
}
#filterToggleBtn {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #005f54 0%, #00453d 100%);
  color: #fff;
  border: none;
  padding: 18px 35px;
  border-radius: 40px;
  cursor: pointer;
  z-index: 2001;
  font-size: 1.25em;
  font-weight: 800;
  letter-spacing: 1px;
  box-shadow: 0 10px 30px rgba(0, 95, 84, 0.7);
  animation: pulseBtnTeal 2s infinite cubic-bezier(0.4, 0, 0.6, 1);
  transition: all 0.3s ease-in-out;
}
#filterToggleBtn:hover {
  background: linear-gradient(135deg, #00453d 0%, #005f54 100%);
  transform: translateX(-50%) scale(1.08);
  box-shadow: 0 15px 40px rgba(0, 95, 84, 0.9);
  animation: none;
}
#filterToggleBtn i {
  margin-right: 8px;
}
#filterToggleBtn #activeFiltersCount {
  display: none;
  background-color: #ffcc00;
  color: #000;
  font-size: 1em;
  padding: 3px 10px;
  border-radius: 50px;
  margin-left: 10px;
  font-weight: 800;
}
.left-filter-panel .panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 25px;
  background-color: #000;
  border-bottom: 2px solid #005f54;
  position: sticky;
  top: 0;
  z-index: 2002;
}
.left-filter-panel .panel-header h3 {
  margin: 0;
  color: #fff;
  font-weight: 900;
  font-size: 1.4em;
  text-transform: uppercase;
}
.left-filter-panel .close-btn {
  background: #005f54;
  border: none;
  color: #fff;
  cursor: pointer;
  font-size: 1.2em;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
}
.left-filter-panel .close-btn:hover {
  background: #00453d;
  transform: rotate(90deg) scale(1.1);
}
.left-filter-panel .section-container {
  padding: 25px;
}
.left-filter-panel .product-filtering {
  margin-bottom: 30px;
  padding: 20px;
  background-color: #1a1a1a;
  border-radius: 8px;
  box-shadow: none;
  border: 1px solid #333;
  transition: border-color 0.2s;
}
.left-filter-panel .product-filtering:hover {
  transform: none;
  border-color: #005f54;
}
.product-filtering-title {
  font-size: 1.1em;
  font-weight: 700;
  color: #fff;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #005f54;
  padding-bottom: 10px;
}
.product-filtering-title i {
  color: #005f54;
  margin-right: 12px;
  font-size: 1.3em;
}
.filter-common-container {
  display: flex;
  flex-wrap: wrap;
}
.filter-common-btn {
  display: inline-block;
  padding: 10px 18px;
  margin: 8px 8px 8px 0;
  background-color: #333;
  color: #fff;
  border: 1px solid #555;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 0.95em;
  font-weight: 600;
}
.filter-common-btn:hover {
  background-color: #00453d;
  color: #fff;
  border-color: #005f54;
  transform: none;
}
.filter-common-btn.active {
  background-color: #005f54;
  color: white;
  border-color: #fff;
  box-shadow: 0 0 5px rgba(0, 95, 84, 0.8);
  transform: none;
}
.price-input-box {
  width: 100%;
  padding: 12px;
  background-color: #000;
  color: #fff;
  border: 1px solid #444;
  border-radius: 4px;
  margin-top: 5px;
  box-sizing: border-box;
  transition: border-color 0.2s;
}
.price-input-box:focus {
  border-color: #005f54;
  box-shadow: 0 0 0 0.2rem rgba(0, 95, 84, 0.3);
  outline: none;
}
#customFiltering {
  width: 100%;
  padding: 15px;
  margin-top: 25px;
  background-color: #dc3545;
  color: white;
  border: none;
  cursor: pointer;
  border-radius: 4px;
  font-weight: 700;
  transition: background-color 0.2s;
}
#customFiltering:hover {
  background-color: #c82333;
}
.left-filter-panel > .panel-header > .title-h3 {
  display: flex;
  gap: 20px;
  align-items: center;
}
.fab-wrapper {
  position: fixed;
  bottom: -15px;
  left: 2rem;
  z-index: 999;
  padding: 30px 0;
  pointer-events: none;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}
.fab-wrapper .fab-btn {
  pointer-events: auto;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0d5e4b 0%, #022c22 100%);
  color: #ffffff;
  box-shadow: 0 4px 20px rgba(13, 94, 75, 0.4);
  border: 2px solid rgba(255, 255, 255, 0.2);
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
}
.fab-wrapper .fab-btn:hover {
  width: 320px;
  height: auto;
  min-height: 400px;
  border-radius: 12px;
  align-items: stretch;
  justify-content: flex-start;
  background: #ffffff;
  border-color: transparent;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
.fab-wrapper .fab-icon-container {
  position: absolute;
  z-index: 2;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.fab-wrapper .fab-btn:hover .fab-icon-container {
  opacity: 0;
  transform: scale(0.8);
  pointer-events: none;
}
.fab-wrapper .fab-content {
  opacity: 0;
  display: flex;
  flex-direction: column;
  width: 320px;
  height: 100%;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.fab-wrapper .fab-btn:hover .fab-content {
  opacity: 1;
  pointer-events: auto;
  transition-delay: 0.1s;
}
.fab-wrapper .card-header {
  background: #022c22;
  padding: 24px;
  position: relative;
  overflow: hidden;
}
.fab-wrapper .card-header::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: radial-gradient(
    rgba(255, 255, 255, 0.1) 1px,
    transparent 1px
  );
  background-size: 10px 10px;
  opacity: 0.3;
}
.fab-wrapper .header-badge {
  display: inline-block;
  background: rgba(255, 255, 255, 0.15);
  color: #14b8a6;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
  backdrop-filter: blur(4px);
}
.fab-wrapper .header-title {
  color: #ffffff;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.2;
  position: relative;
  z-index: 1;
}
.fab-wrapper .header-subtitle {
  color: #d1d5db;
  font-size: 0.9rem;
  margin-top: 4px;
  position: relative;
  z-index: 1;
}
.fab-wrapper .card-body {
  padding: 20px;
  background: #ffffff;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.fab-wrapper .offer-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  transition: all 0.2s ease;
  background: #fafafa;
}
.fab-wrapper .offer-item:hover {
  border-color: #0d5e4b;
  background: #f0fdfa;
  transform: translateY(-2px);
}
.fab-wrapper .location-info {
  display: flex;
  flex-direction: column;
}
.fab-wrapper .loc-region {
  font-size: 0.7rem;
  color: #6b7280;
  font-weight: 600;
  text-transform: uppercase;
}
.fab-wrapper .loc-city {
  font-weight: 700;
  color: #022c22;
  font-size: 1rem;
}
.fab-wrapper .discount-badge {
  text-align: center;
  background: #dcfce7;
  color: #166534;
  padding: 6px 12px;
  border-radius: 6px;
}
.fab-wrapper .discount-val {
  font-weight: 800;
  font-size: 1.1rem;
  line-height: 1;
}
.fab-wrapper .discount-lbl {
  font-size: 0.6rem;
  text-transform: uppercase;
  font-weight: 700;
}
.fab-wrapper .action-btn {
  margin-top: 12px;
  background-color: #0d5e4b;
  color: #ffffff;
  border: none;
  padding: 14px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition: background 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.fab-wrapper .action-btn:hover {
  background-color: #022c22;
}
.fab-wrapper .slide-in {
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.3s ease-out;
}
.fab-wrapper .fab-btn:hover .slide-in {
  opacity: 1;
  transform: translateY(0);
}
.fab-wrapper .d-1 {
  transition-delay: 0.1s;
}
.fab-wrapper .d-2 {
  transition-delay: 0.15s;
}
.fab-wrapper .d-3 {
  transition-delay: 0.2s;
}
.fab-wrapper .d-4 {
  transition-delay: 0.25s;
}
.fab-wrapper .pulse-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2px solid #0d5e4b;
  opacity: 0;
  z-index: -1;
}
.fab-wrapper .fab-btn:not(:hover) .pulse-ring {
  animation: pulse-green 2s infinite;
}
@keyframes pulse-green {
  0% {
    width: 100%;
    height: 100%;
    opacity: 0.6;
  }
  100% {
    width: 180%;
    height: 180%;
    opacity: 0;
  }
}
.fab-wrapper .notif-dot {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 10px;
  height: 10px;
  background: #ef4444;
  border: 2px solid #022c22;
  border-radius: 50%;
  z-index: 10;
  transition: opacity 0.2s;
}
.fab-wrapper .fab-btn:hover .notif-dot {
  opacity: 0;
}





/* North America Dedicated servers Start */

/* --- Main Section Styles --- */
.stats-section {
    background-color: #e8f3f1; /* Theme Light (Previous text color) */
    padding: 80px 20px;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 400px;
}

.stats-section .section-header {
    text-align: center;
    max-width: 800px;
    margin-bottom: 50px;
    position: relative;
    z-index: 10;
}

.stats-section .section-header h2 {
    font-size: 2.5rem;
    color: #00453d; /* Theme Dark Green (Inverted) */
    margin-bottom: 15px;
    font-weight: 700;
}

.stats-section .section-header p {
    font-size: 1.1rem;
    color: #00453d; /* Theme Dark Green (Inverted) */
    opacity: 0.8;
    line-height: 1.6;
}

/* Decorative background elements */
.stats-section::before {
    content: '';
    position: absolute;
    top: -50px;
    left: -50px;
    width: 200px;
    height: 200px;
    /* Adjusted gradient to fade dark into light background */
    background: radial-gradient(circle, rgba(0, 69, 61, 0.1) 0%, rgba(232, 243, 241, 0) 70%);
    border-radius: 50%;
}

.stats-section::after {
    content: '';
    position: absolute;
    bottom: -50px;
    right: -50px;
    width: 300px;
    height: 300px;
    /* Adjusted gradient to fade dark into light background */
    background: radial-gradient(circle, rgba(0, 69, 61, 0.08) 0%, rgba(232, 243, 241, 0) 70%);
    border-radius: 50%;
}

.stats-section .container {
    max-width: 1200px;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 30px;
    position: relative;
    z-index: 10;
}

/* --- Stat Card Design --- */
.stats-section .stat-card {
    background: #00453d; /* Theme Dark Green for Cards */
    border: 1px solid rgba(0, 69, 61, 0.1);
    box-shadow: 0 10px 20px rgba(0, 69, 61, 0.1);
    padding: 40px 20px;
    border-radius: 16px;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    cursor: default;
}

.stats-section .stat-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 69, 61, 0.25);
    border-color: #00fdeb; /* Theme Cyan hover effect */
}

/* Icon Styling */
.stats-section .icon-wrapper {
    font-size: 2.5rem;
    color: #00fdeb; /* Theme Cyan */
    margin-bottom: 20px;
    opacity: 0.8;
    transition: transform 0.3s ease;
}

.stats-section .stat-card:hover .icon-wrapper {
    transform: scale(1.1);
    opacity: 1;
}

/* Number Styling */
.stats-section .stat-number {
    font-size: 3.5rem;
    font-weight: 700;
    color: #e8f3f1; /* Kept light because card background is dark */
    margin-bottom: 10px;
    line-height: 1;
    display: inline-block;
}

.stats-section .stat-number::after {
    content: "+";
    margin-left: 2px;
}

/* Label Styling */
.stats-section .stat-label {
    font-size: 1.1rem;
    color: #e8f3f1; /* Kept light because card background is dark */
    opacity: 0.8;
    font-weight: 400;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* Accent Line */
.stats-section .stat-line {
    width: 40px;
    height: 3px;
    background-color: #00fdeb;
    margin: 20px auto 0;
    border-radius: 2px;
    transition: width 0.3s ease;
}

.stats-section .stat-card:hover .stat-line {
    width: 60px;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .stats-section {
        padding: 60px 15px;
    }

    .stats-section .stat-number {
        font-size: 2.5rem;
    }
}




/* Carousel Section Styles */
  .carousel-section {
    width: 100%;
    margin: 0 auto;
    padding: 100px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    /* subtle vertical gradient for depth */
    background: linear-gradient(180deg, #e8f3f1 0%, #dff7f5 100%);
    overflow: hidden;
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* Decorative background circle (optional visual flair) */
.carousel-section::before {
    content: '';
    position: absolute;
    top: -10%;
    left: 50%;
    transform: translateX(-50%);
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(0, 253, 235, 0.05) 0%, rgba(232, 243, 241, 0) 70%);
    border-radius: 50%;
    z-index: 0;
    pointer-events: none;
}

/* Header Styling */
.carousel-section .section-header {
    text-align: center;
    margin-bottom: 70px;
    z-index: 1;
    position: relative;
}

.carousel-section .section-header h2 {
    color: #00453d;
    font-size: 2.8rem;
    font-weight: 800;
    margin-bottom: 15px;
    letter-spacing: -0.5px;
    position: relative;
    display: inline-block;
}

/* Add a colorful underline to the header */
.carousel-section .section-header h2::after {
    content: '';
    display: block;
    width: 60px;
    height: 4px;
    background: #00fdeb;
    margin: 10px auto 0;
    border-radius: 2px;
}

.carousel-section .section-header p {
    color: #00453d;
    opacity: 0.75;
    max-width: 550px;
    margin: 0 auto;
    font-size: 1.1rem;
    line-height: 1.6;
}

/* Carousel Container */
.carousel-section .carousel-container {
    position: relative;
    width: 100%;
    height: 480px; /* Increased height slightly for shadows */
    display: flex;
    justify-content: center;
    align-items: center;
    perspective: 1000px;
    z-index: 2;
}

.carousel-section .cards-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    transform-style: preserve-3d;
}

/* Card Styling */
.carousel-section .card {
    position: absolute;
    width: 340px;
    height: 420px;
    background: #ffffff;
    /* Top border accent for color */
    border-top: 5px solid #00fdeb;
    border-radius: 20px;
    padding: 40px 30px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Align top to make room for content */
    align-items: center;
    text-align: center;
    /* Soft, colorful shadow */
    box-shadow: 0 15px 35px rgba(0, 69, 61, 0.08);
    transition: all 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
    user-select: none;
    cursor: pointer;
    overflow: visible; /* Allow icon to overlap if needed */
}

/* Decorative Quote Icon via CSS */
.carousel-section .card::before {
    content: '“';
    font-family: serif;
    position: absolute;
    top: 80px;
    left: 20px;
    font-size: 100px;
    line-height: 1;
    color: #00453d;
    z-index: 0;
    pointer-events: none;
}

/* Icon Container */
.carousel-section .card-icon {
    width: 80px;
    height: 80px;
    /* Dark background for high contrast */
    background: #00453d;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    /* Bright cyan icon color */
    color: #00fdeb;
    font-size: 28px;
    box-shadow: 0 8px 20px rgba(0, 69, 61, 0.2);
    transition: all 0.4s ease;
    z-index: 1;
    border: 4px solid #ffffff; /* White ring around icon */
}

/* Text Styling */
.carousel-section .card h3 {
    color: #00453d;
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 15px;
    z-index: 1;
}

.carousel-section .card p {
    color: #4a6b66; /* Slightly softer dark green for readability */
    font-style: italic;
    line-height: 1.7;
    font-size: 1rem;
    z-index: 1;
}

/* --- Active State (The center card) --- */
.carousel-section .card.active {
    z-index: 10;
    transform: translateX(0) scale(1);
    filter: blur(0);
    opacity: 1;
    /* Glow effect using the cyan theme color */
    box-shadow: 0 20px 50px rgba(0, 253, 235, 0.2), 0 5px 15px rgba(0, 69, 61, 0.1);
}

.carousel-section .card.active .card-icon {
    transform: scale(1.1);
    background: linear-gradient(135deg, #00453d, #002a25);
    color: #00fdeb;
    box-shadow: 0 10px 25px rgba(0, 69, 61, 0.3);
}

/* --- Positioning Logic for Carousel --- */
.carousel-section .card.prev {
    z-index: 5;
    transform: translateX(-300px) scale(0.85) rotateY(5deg);
    filter: blur(2px) brightness(0.95);
    opacity: 0.7;
    background: #f4f9f8; /* Slightly darker white to show depth */
}

.carousel-section .card.next {
    z-index: 5;
    transform: translateX(300px) scale(0.85) rotateY(-5deg);
    filter: blur(2px) brightness(0.95);
    opacity: 0.7;
    background: #f4f9f8;
}

.carousel-section .card.far-prev {
    z-index: 1;
    transform: translateX(-550px) scale(0.7);
    filter: blur(5px) grayscale(0.5);
    opacity: 0.4;
}

.carousel-section .card.far-next {
    z-index: 1;
    transform: translateX(550px) scale(0.7);
    filter: blur(5px) grayscale(0.5);
    opacity: 0.4;
}

.carousel-section .card.hidden {
    display: none;
    opacity: 0;
}

/* --- Controls / Navigation --- */
.carousel-section .controls {
    margin-top: 30px;
    display: flex;
    gap: 25px;
    align-items: center;
    z-index: 10;
}

.carousel-section .nav-btn {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    /* Outline style initially */
    border: 2px solid #00453d;
    background: transparent;
    color: #00453d;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 28px;
    font-weight: 300;
    line-height: 1;
    padding-bottom: 5px; /* Visual alignment for arrows */
}

.carousel-section .nav-btn:hover {
    transform: scale(1.1);
    /* Fill with dark green on hover */
    background: #00453d;
    /* Text becomes bright cyan */
    color: #00fdeb;
    box-shadow: 0 10px 20px rgba(0, 69, 61, 0.2);
    border-color: #00453d;
}

/* Responsive Design */
@media (max-width: 768px) {
    .carousel-section { padding: 60px 15px; }
    .carousel-section .section-header h2 { font-size: 2rem; }
    
    .carousel-section .card { 
        width: 290px; 
        height: 380px; 
        padding: 30px 20px;
    }
    
    .carousel-section .card::before { font-size: 80px; top: 60px; }
    
    .carousel-section .card.prev { transform: translateX(-120px) scale(0.85); opacity: 0.5; }
    .carousel-section .card.next { transform: translateX(120px) scale(0.85); opacity: 0.5; }
    
    /* Hide far cards on mobile to reduce clutter */
    .carousel-section .card.far-prev, 
    .carousel-section .card.far-next { 
        display: none; 
    }
}


 /* --- MAIN UNIFIED SECTION WRAPPER --- */
        .connectivity-section {
            background-color: #e8f3f1;
            /* Preserving your original SVG background */
            background-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 1000 1000' xmlns='http://www.w3.org/2000/svg'%3E%3C!-- Teal Layer --%3E%3Cpath d='M-100,100 C150,50 350,450 1100,50' stroke='%2300453d' stroke-opacity='0.08' fill='none' stroke-width='2'/%3E%3Cpath d='M-100,700 C250,850 650,550 1100,850' stroke='%2300453d' stroke-opacity='0.08' fill='none' stroke-width='2'/%3E%3Cpath d='M800,-100 C950,450 550,650 900,1100' stroke='%2300453d' stroke-opacity='0.06' fill='none' stroke-width='4'/%3E%3Cpath d='M100,-100 C50,250 450,350 250,1100' stroke='%2300453d' stroke-opacity='0.06' fill='none' stroke-width='3'/%3E%3Cpath d='M0,1000 Q500,400 1000,1000' stroke='%2300453d' stroke-opacity='0.04' fill='none' stroke-width='15'/%3E%3C!-- Aqua Layer --%3E%3Cpath d='M-100,300 C350,250 550,650 1100,350' stroke='%2300fdeb' stroke-opacity='0.25' fill='none' stroke-width='1.5'/%3E%3Cpath d='M-100,500 C450,500 450,800 1100,650' stroke='%2300fdeb' stroke-opacity='0.2' fill='none' stroke-width='1'/%3E%3Cpath d='M150,-100 C100,350 550,450 350,1100' stroke='%2300fdeb' stroke-opacity='0.15' fill='none' stroke-width='2'/%3E%3Cpath d='M750,-100 C850,350 550,550 900,1100' stroke='%2300fdeb' stroke-opacity='0.15' fill='none' stroke-width='1.5'/%3E%3Cpath d='M-100,850 C400,750 600,950 1100,800' stroke='%2300fdeb' stroke-opacity='0.12' fill='none' stroke-width='1'/%3E%3C/svg%3E");
            background-size: cover;
            background-position: center;
            
            padding: 80px 40px;
            position: relative;
            overflow: hidden;
            box-shadow: 0 20px 40px rgba(0, 69, 61, 0.05);
            
            margin: 0 auto;
        }

        /* --- HEADER STYLES --- */
        .connectivity-section .section-header {
            text-align: center;
            margin-bottom: 60px;
            position: relative;
            z-index: 2;
        }

        .connectivity-section .section-header h2 {
            color: #00453d;
            font-size: 3rem; /* 48px equivalent */
            font-weight: 700;
            letter-spacing: -1px;
            line-height: 1.2;
            margin-bottom: 15px;
        }

        .connectivity-section .section-header .underline {
            width: 80px;
            height: 6px;
            background-color: #00fdeb;
            margin: 0 auto;
            border-radius: 3px;
        }

        /* --- CONTENT LAYOUT (Left/Right Split) --- */
        .connectivity-section .content-split {
            display: flex;
            flex-direction: column; /* Mobile first */
            gap: 50px;
            position: relative;
            z-index: 2;
        }

        /* --- LEFT SIDE: TEXT CONTENT --- */
        .connectivity-section .text-column {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .connectivity-section .text-card {
            background: rgba(255, 255, 255, 0.6);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            padding: 40px;
            border-radius: 16px;
            border: 1px solid rgba(255, 255, 255, 0.8);
            box-shadow: 0 10px 30px rgba(0, 69, 61, 0.03);
        }

        .connectivity-section .text-card p {
            color: #00453d;
            font-size: 1.125rem; /* 18px */
            line-height: 1.8;
            margin-bottom: 1.5rem;
            opacity: 0.95;
        }
        
        .connectivity-section .text-card p:last-child {
            margin-bottom: 0;
            font-weight: 600; /* Subtle emphasis on the closing statement */
        }

        /* --- RIGHT SIDE: LOGO GRID --- */
        .connectivity-section .providers-column {
            flex: 1;
        }

        .connectivity-section .provider-grid {
            display: grid;
            /* Adaptive grid: fit as many 140px columns as possible */
            grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); 
            gap: 15px;
        }

        .connectivity-section .provider-card {
            background-color: #ffffff;
            border-radius: 12px;
            height: 90px;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 15px;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            border-left: 0px solid #00fdeb;
            box-shadow: 0 4px 6px rgba(0, 69, 61, 0.05);
            position: relative;
            overflow: hidden;
        }

        .connectivity-section .provider-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 12px 20px rgba(0, 69, 61, 0.1);
            border-left: 5px solid #00fdeb;
        }

        .connectivity-section .provider-card img {
            max-width: 100%;
            max-height: 100%;
            width: auto;
            height: auto;
            object-fit: contain;
            /* Optional: filter to grayscale until hover for a very clean look */
            /* filter: grayscale(100%); */
            transition: filter 0.3s;
        }

        .connectivity-section .provider-card:hover img {
            filter: grayscale(0%);
        }

        /* --- RESPONSIVE MEDIA QUERIES --- */
        @media (min-width: 992px) {
            .connectivity-section .content-split {
                flex-direction: row;
                align-items: center; /* Vertically center the text with the grid */
            }
            
            .connectivity-section .text-column {
                padding-right: 20px;
            }

            .connectivity-section .provider-grid {
                /* On desktop, force a nice 2 or 3 column look depending on space */
                grid-template-columns: repeat(2, 1fr); 
            }
        }

        @media (min-width: 1200px) {
            .connectivity-section .provider-grid {
                grid-template-columns: repeat(3, 1fr);
            }
        }

        @media (max-width: 768px) {
            .connectivity-section .connectivity-section {
                padding: 60px 20px;
            }
            
            .connectivity-section .section-header h2 {
                font-size: 2rem;
            }

            .connectivity-section .text-card {
                padding: 25px;
            }

            .connectivity-section .provider-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }




.server-usecases {
            position: relative;
            padding: 80px 20px;
            background-color: #e8f3f1; /* Theme Light Background */
            overflow: hidden;
            /* Grid Background Pattern */
            background-image: 
                linear-gradient(rgba(0, 69, 61, 0.05) 1px, transparent 1px),
                linear-gradient(90deg, rgba(0, 69, 61, 0.05) 1px, transparent 1px);
            background-size: 40px 40px;
        }

        .server-usecases .section-header {
            text-align: center;
            margin-bottom: 60px;
            position: relative;
            z-index: 2;
        }

        .server-usecases .section-title {
            color: #00453d; /* Theme Dark Color */
            font-size: 2.5rem;
            font-weight: 700;
            margin: 0;
            display: inline-block;
            position: relative;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        /* Decorative line under title */
        .server-usecases .section-title::after {
            content: '';
            display: block;
            width: 60px;
            height: 4px;
            background-color: #00fdeb; /* Theme Neon/Accent */
            margin: 15px auto 0;
            border-radius: 2px;
        }

        .server-usecases .cards-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
            max-width: 1200px;
            margin: 0 auto;
            position: relative;
            z-index: 2;
        }

        .server-usecases .card {
            background-color: #00453d; /* Theme Dark Card BG */
            border-radius: 12px;
            padding: 0;
            overflow: hidden;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            position: relative;
            display: flex;
            flex-direction: column;
            border: 1px solid rgba(0, 253, 235, 0.1); /* Subtle accent border */
        }

        .server-usecases .card:hover {
            transform: translateY(-10px);
            box-shadow: 0 20px 30px rgba(0, 69, 61, 0.3);
            border-color: #00fdeb; /* Bright accent on hover */
        }

        .server-usecases .card-image-wrapper {
            width: 100%;
            height: 200px;
            overflow: hidden;
            position: relative;
        }

        .server-usecases .card-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s ease;
            /* Placeholder background if image fails */
            background-color: #003630;
        }

        .server-usecases .card:hover .card-image {
            transform: scale(1.1);
        }

        .server-usecases .card-image-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(to bottom, transparent 0%, rgba(0, 69, 61, 0.8) 100%);
        }

        .server-usecases .card-content {
            padding: 25px;
            text-align: left;
            flex-grow: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .server-usecases .card-title {
            color: #00fdeb; /* Theme Neon Accent */
            font-size: 1.5rem;
            margin: 0 0 10px 0;
            font-weight: 600;
        }

        .server-usecases .card-text {
            color: #e8f3f1; /* Theme Light Text */
            font-size: 1rem;
            line-height: 1.6;
            margin: 0;
            opacity: 0.9;
        }

        /* Responsive adjustments */
        @media (max-width: 768px) {
            .server-usecases .section-title {
                font-size: 2rem;
            }
            .server-usecases .cards-container {
                grid-template-columns: 1fr;
                padding: 0 10px;
            }
        }







       .server-feature-section {
    position: relative;
    /* Background: Light Cyan/White */
    background-color: #f0fbf9;
    /* Text: Dark Teal (Original Background Color) */
    color: #00453d;
    padding: 80px 20px;
    overflow: hidden;
    box-sizing: border-box;
    
    /* Background Pattern: Changed from transparent white to subtle dark teal lines */
    background-image: 
        linear-gradient(90deg, 
            rgba(0, 69, 61, 0.03) 0px, 
            rgba(0, 69, 61, 0.03) 1px, 
            transparent 1px, 
            transparent 39px,
            rgba(0, 150, 136, 0.05) 40px, 
            rgba(0, 150, 136, 0.05) 42px,
            transparent 42px
        );
    background-size: 100px 100%;
}

/* Status Lights: Adjusted for visibility on light background */
.server-feature-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        radial-gradient(circle at 50% 50%, rgba(0, 150, 136, 0.05) 0%, transparent 50%),
        radial-gradient(2px 2px at 20px 30px, rgba(0, 150, 136, 0.4), transparent),
        radial-gradient(2px 2px at 40px 70px, rgba(0, 69, 61, 0.2), transparent),
        radial-gradient(2px 2px at 80px 40px, rgba(0, 150, 136, 0.4), transparent),
        radial-gradient(2px 2px at 30px 120px, rgba(0, 69, 61, 0.2), transparent);
    background-size: 100% 100%, 120px 240px, 120px 240px, 120px 240px, 120px 240px;
    z-index: 1;
    pointer-events: none;
}

/* Tech Slant Accent: Darker borders for contrast */
.server-feature-section::after {
    content: '';
    position: absolute;
    bottom: -50px;
    right: -50px;
    width: 300px;
    height: 300px;
    background: linear-gradient(135deg, transparent 50%, rgba(0, 69, 61, 0.03) 50%);
    border-left: 2px solid rgba(0, 69, 61, 0.1);
    border-top: 2px solid rgba(0, 69, 61, 0.1);
    transform: rotate(-15deg);
    z-index: 1;
    pointer-events: none;
}

.server-feature-section .server-container {
    position: relative;
    max-width: 1600px;
    margin: 0 auto;
    z-index: 2;
}

.server-feature-section .section-header {
    text-align: center;
    margin-bottom: 60px;
}

/* Main Title: Dark Teal */
.server-feature-section .section-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: #00453d;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin: 0;
    position: relative;
    display: inline-block;
    text-shadow: none; /* Removed glow for cleanliness on light bg */
}

/* Decorative line: Dark Teal */
.server-feature-section .section-title::after {
    content: '';
    display: block;
    width: 60px;
    height: 4px;
    background-color: #009688; /* Slightly brighter teal for accent */
    margin: 15px auto 0;
    border-radius: 2px;
    box-shadow: none;
}

/* Subtitle: Dark Gray-Teal */
.server-feature-section .section-subtitle {
    font-size: 1.1rem;
    color: #2c5e58;
    opacity: 0.9;
    margin-top: 15px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.server-feature-section .content-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
}

.server-feature-section .text-content h3 {
    font-size: 1.8rem;
    color: #00453d;
    margin-bottom: 20px;
    border-left: 4px solid #009688;
    padding-left: 15px;
}

.server-feature-section .text-content p {
    line-height: 1.6;
    margin-bottom: 20px;
    color: #1a3c38;
}

.server-feature-section .feature-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.server-feature-section .feature-list li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 15px;
    color: #00453d;
    font-weight: 500;
}

/* Checkmark: Dark Cyan */
.server-feature-section .feature-list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: #009688;
    font-weight: bold;
    font-size: 1.2rem;
    text-shadow: none;
}

.server-feature-section .visual-content {
    position: relative;
    display: flex;
    justify-content: center;
}

/* Server Card: White background with shadow */
.server-feature-section .server-card {
    background: #ffffff;
    border: 1px solid rgba(0, 69, 61, 0.1);
    padding: 10px;
    border-radius: 10px;
    
    /* CHANGED: Set to 100% to fit the parent container cleanly */
    width: 100%;
    
    height: 400px; /* Maintained height as requested */
    max-width: 500px;
    box-shadow: 0 10px 30px rgba(0, 69, 61, 0.1);
    backdrop-filter: blur(5px);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    
    /* Added to ensure padding doesn't expand the width calculation */
    box-sizing: border-box; 
}

.server-feature-section .server-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 69, 61, 0.15);
    border-color: rgba(0, 150, 136, 0.3);
}

.server-feature-section .image-placeholder img {
    /* CHANGED: Set to 100% to fill the card's content area exactly */
    width: 100%;
    
    /* Height matches card height (400px) minus padding (10px top + 10px bottom = 20px) */
    height: 380px; 
    
    /* Ensures image covers the area without stretching distortion */
    object-fit: cover; 
    
    /* Placeholder BG: Light gray/teal tint */
    background-color: rgba(0, 69, 61, 0.05);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #00453d;
    border: 1px dashed rgba(0, 69, 61, 0.2);
    font-size: 1.2rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    
    /* Placeholder Pattern */
    background-image: linear-gradient(45deg, transparent 25%, rgba(0,69,61,0.05) 25%, rgba(0,69,61,0.05) 50%, transparent 50%, transparent 75%, rgba(0,69,61,0.05) 75%, rgba(0,69,61,0.05) 100%);
    background-size: 20px 20px;
}

/* Button: Dark Text, Dark Border */
.server-feature-section .cta-button {
    display: inline-block;
    margin-top: 20px;
    padding: 12px 30px;
    background-color: transparent;
    color: #00453d;
    border: 2px solid #00453d;
    font-weight: 700;
    text-decoration: none;
    border-radius: 5px;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.server-feature-section .cta-button:hover {
    background-color: #00453d;
    color: #ffffff;
    box-shadow: 0 5px 15px rgba(0, 69, 61, 0.2);
}

@media (max-width: 768px) {
    .server-feature-section .content-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }
    
    .server-feature-section .text-content h3 {
        border-left: none;
        border-bottom: 3px solid #009688;
        display: inline-block;
        padding-bottom: 10px;
        padding-left: 0;
    }

    .server-feature-section .feature-list {
        text-align: left;
        display: inline-block;
    }
    
    .server-feature-section .section-title {
        font-size: 2rem;
    }
}





/* USA dedicated servers page design start */

.usa-content {
            width: 100%;
            padding: 5rem 1.5rem;
            background-color: #e8f3f1;
            background-image: 
                linear-gradient(rgba(0, 69, 61, 0.03) 1px, transparent 1px),
                linear-gradient(90deg, rgba(0, 69, 61, 0.03) 1px, transparent 1px);
            background-size: 40px 40px;
        }

        .usa-content .container {
            max-width: 1200px;
            margin: 0 auto;
        }

       
        .usa-content .header-section {
            text-align: center;
            margin-bottom: 4rem;
            position: relative;
        }

        .usa-content .badge {
            display: inline-flex;
            align-items: center;
            padding: 0.35rem 1rem;
            border-radius: 99px;
            background-color: rgba(0, 69, 61, 0.05);
            color: #00453d;
            font-family: 'JetBrains Mono', monospace;
            font-size: 0.75rem;
            font-weight: 700;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            margin-bottom: 1.5rem;
            border: 1px solid rgba(0, 69, 61, 0.1);
            box-shadow: 0 2px 4px rgba(0,0,0,0.02);
        }

        .usa-content .badge i {
            margin-right: 8px;
            color: #00453d;
        }

        .usa-content .main-title {
            font-size: 2.5rem;
            font-weight: 700;
            color: #00453d;
            margin-bottom: 1rem;
            line-height: 1.2;
            letter-spacing: -0.03em;
        }

        .usa-content .subtitle {
            max-width: 600px;
            margin: 0 auto;
            font-size: 1.125rem;
            color: rgba(0, 69, 61, 0.75);
            line-height: 1.6;
        }

        /* Grid System */
        .usa-content .card-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
            gap: 2rem;
            perspective: 1000px;
        }

        /* Server Card Styles */
        .usa-content .server-card {
            background-color: #ffffff;
            border: 1px solid rgba(0, 69, 61, 0.1);
            border-radius: 1rem;
            padding: 2rem;
            position: relative;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            box-shadow: 0 4px 6px -1px rgba(0, 69, 61, 0.02), 0 2px 4px -1px rgba(0, 69, 61, 0.02);
        }

        /* Top Border Accent (Tech feel) */
        .usa-content .server-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 3px;
            background: linear-gradient(90deg, #00453d, #00fdeb);
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .usa-content .server-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 20px 25px -5px rgba(0, 69, 61, 0.1), 0 10px 10px -5px rgba(0, 69, 61, 0.04);
            border-color: rgba(0, 253, 235, 0.3);
        }

        .usa-content .server-card:hover::before {
            opacity: 1;
        }

        /* Card Content Layout */
        .usa-content .card-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 1.5rem;
        }

        .usa-content .icon-wrapper {
            width: 56px;
            height: 56px;
            background: linear-gradient(135deg, #f0f7f6, #e6efed);
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            color: #00453d;
            transition: all 0.3s ease;
            border: 1px solid rgba(0, 69, 61, 0.05);
        }

        .usa-content .server-card:hover .icon-wrapper {
            background: #00453d;
            color: #00fdeb;
            transform: scale(1.05) rotate(-3deg);
            box-shadow: 0 10px 15px -3px rgba(0, 69, 61, 0.2);
        }

        /* Status LEDs */
        .usa-content .status-panel {
            display: flex;
            gap: 6px;
            padding: 8px 12px;
            background: rgba(0, 69, 61, 0.03);
            border-radius: 20px;
            border: 1px solid rgba(0, 69, 61, 0.05);
        }

        .usa-content .led {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background-color: #cbd5e1;
            transition: all 0.3s ease;
        }

        .usa-content .server-card:hover .led {
            background-color: #00fdeb;
            box-shadow: 0 0 8px #00fdeb;
        }

        /* Typography inside Card */
        .usa-content .card-title {
            font-family: 'Inter', sans-serif;
            font-size: 1.25rem;
            font-weight: 600;
            color: #00453d;
            margin-bottom: 1rem;
            line-height: 1.3;
        }

        .usa-content .card-text {
            font-family: 'Inter', sans-serif;
            font-size: 0.95rem;
            color: rgba(0, 69, 61, 0.75);
            line-height: 1.6;
            margin-bottom: 2rem;
            flex-grow: 1; /* Pushes footer down */
        }

        /* Footer & ID */
        .usa-content .card-footer {
            margin-top: auto;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding-top: 1.5rem;
            border-top: 1px solid rgba(0, 69, 61, 0.08);
        }

        .usa-content .server-id {
            font-family: 'JetBrains Mono', monospace;
            font-size: 0.75rem;
            font-weight: 500;
            color: rgba(0, 69, 61, 0.5);
            background: rgba(0, 69, 61, 0.03);
            padding: 4px 8px;
            border-radius: 4px;
        }

        

        /* Scan Line Animation (Refined) */
        .usa-content .scan-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            overflow: hidden;
            z-index: 10;
        }

        .usa-content .scan-line {
            width: 100%;
            height: 100px;
            position: absolute;
            top: -150px;
            background: linear-gradient(to bottom, transparent, rgba(0, 253, 235, 0.15) 50%, transparent);
            opacity: 0;
            transition: opacity 0.3s;
        }

        .usa-content .server-card:hover .scan-line {
            opacity: 1;
            animation: scan-down 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
        }

        @keyframes scan-down {
            0% { top: -150px; }
            100% { top: 150%; }
        }

        /* Responsive Adjustments */
        @media (max-width: 768px) {
            .usa-content .main-title {
                font-size: 2rem;
            }
            .usa-content {
                padding: 3rem 1rem;
            }
            .usa-content .card-grid {
                grid-template-columns: 1fr;
            }
        }




 /* --- DUAL COLUMN SERVICE SECTION --- */
        .dual-service-section {
            background-color: #E8F3F1;
            padding: 100px 20px;
            color: #00453d;
            position: relative;
            overflow: hidden;
        }

        .dual-service-section .dual-container {
            max-width: 1200px;
            margin: 0 auto;
            position: relative;
            z-index: 2;
        }

        /* Header */
        .dual-service-section .dual-header {
            text-align: center;
            margin-bottom: 80px;
            position: relative;
            z-index: 3;
        }

        .dual-service-section .dual-header h2 {
            font-size: 3rem;
            font-weight: 800;
            color: #00453d;
            margin: 0 0 15px 0;
            text-transform: uppercase;
            letter-spacing: -1px;
        }

        .dual-service-section .dual-header .highlight-text {
            color: #00453d;
            position: relative;
            display: inline-block;
        }

        .dual-service-section .dual-header .highlight-text::after {
            content: '';
            position: absolute;
            bottom: 5px;
            left: 0;
            width: 100%;
            height: 12px;
            background-color: #00fdeb;
            opacity: 0.4;
            z-index: -1;
            transform: skewX(-15deg);
        }

        .dual-service-section .dual-header p {
            font-size: 1.15rem;
            max-width: 600px;
            margin: 0 auto;
            color: #00453d;
            opacity: 0.9;
        }

        /* --- TIMELINE GRID STRUCTURE --- */
        .dual-service-section .timeline-grid {
            position: relative;
            display: flex;
            flex-direction: column;
            gap: 60px;
        }

        /* The Central Cable Line */
        .dual-service-section .timeline-spine {
            position: absolute;
            left: 50%;
            top: 0;
            bottom: 0;
            width: 4px;
            background: rgba(0, 69, 61, 0.1);
            transform: translateX(-50%);
            border-radius: 2px;
            z-index: 0;
        }

        /* NEW ANIMATION: Circuit Flow on Spine */
        .dual-service-section .timeline-spine::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100px;
            background: linear-gradient(to bottom, transparent, #00fdeb, transparent);
            opacity: 0.7;
            animation: spineFlow 3s cubic-bezier(0.4, 0, 0.2, 1) infinite;
        }

        @keyframes spineFlow {
            0% { top: -100px; opacity: 0; }
            20% { opacity: 1; }
            100% { top: 100%; opacity: 0; }
        }

        /* Row Configuration */
        .dual-service-section .timeline-row-pair {
            display: flex;
            justify-content: space-between;
            align-items: stretch;
            position: relative;
            z-index: 1;
        }

        /* Column Configuration */
        .dual-service-section .timeline-col {
            width: 45%;
            position: relative;
            opacity: 0; /* Hidden initially for animation */
            transition: all 0.8s cubic-bezier(0.22, 1, 0.36, 1);
        }

        /* NEW ANIMATION: Slide In Direction */
        .dual-service-section .timeline-col.left {
            transform: translateX(-50px);
        }
        .dual-service-section .timeline-col.right {
            transform: translateX(50px);
        }

        /* Triggered by JS */
        .dual-service-section .timeline-row-pair.visible .timeline-col {
            opacity: 1;
            transform: translateX(0);
        }

        /* Central Node Configuration */
        .dual-service-section .center-node-wrapper {
            position: absolute;
            left: 50%;
            top: 0;
            transform: translateX(-50%);
            width: 60px;
            height: 60px;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 5;
            margin-top: 20px;
        }

        .dual-service-section .center-node {
            width: 50px;
            height: 50px;
            background: #00453d;
            border: 3px solid #00fdeb;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #00fdeb;
            font-size: 1.2rem;
            box-shadow: 0 0 0 5px #E8F3F1;
            position: relative;
            z-index: 2;
        }

        /* NEW ANIMATION: Heartbeat Ripple */
        .dual-service-section .center-node::before {
            content: '';
            position: absolute;
            top: -2px;
            left: -2px;
            right: -2px;
            bottom: -2px;
            border-radius: 50%;
            border: 2px solid #00fdeb;
            z-index: -1;
            animation: ripplePulse 2s infinite;
        }

        @keyframes ripplePulse {
            0% { transform: scale(1); opacity: 0.8; }
            100% { transform: scale(1.5); opacity: 0; }
        }

        /* --- CARD DESIGN --- */
        .dual-service-section .service-card {
            background: #ffffff;
            border-radius: 12px;
            padding: 30px;
            position: relative;
            box-shadow: 0 10px 30px rgba(0, 69, 61, 0.08);
            border: 1px solid rgba(0, 69, 61, 0.05);
            border-top: 4px solid #00453d;
            transition: transform 0.3s ease, border-color 0.3s ease;
            height: 100%;
            box-sizing: border-box;
            overflow: hidden;
        }

        .dual-service-section .service-card:hover {
            transform: translateY(-5px);
            border-top-color: #00fdeb;
        }

        /* NEW ANIMATION: Status LEDs */
        .dual-service-section .status-led-container {
            position: absolute;
            top: 20px;
            right: 20px;
            display: flex;
            gap: 6px;
        }

        .dual-service-section .led {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background-color: #ddd;
        }

        /* Blink Animations */
        .dual-service-section .led.active {
            background-color: #00fdeb;
            box-shadow: 0 0 5px #00fdeb;
            animation: blink 1.5s infinite;
        }

        .dual-service-section .led.processing {
            background-color: #00453d;
            animation: blink 2s infinite 0.5s;
        }

        @keyframes blink {
            0%, 100% { opacity: 0.3; }
            50% { opacity: 1; }
        }

        /* Card Content */
        .dual-service-section .card-content {
            position: relative;
            z-index: 2;
        }

        .dual-service-section .service-card h3 {
            margin: 0 0 15px 0;
            color: #00453d;
            font-size: 1.4rem;
            font-weight: 700;
            padding-right: 60px; /* Space for LEDs */
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .dual-service-section .step-num {
             color: #00fdeb;
             font-size: 0.9rem;
             background: rgba(0, 69, 61, 0.1);
             padding: 2px 8px;
             border-radius: 4px;
             font-weight: 800;
        }

        .dual-service-section .service-card p {
            color: #4a6662;
            font-size: 0.95rem;
            line-height: 1.6;
            margin-bottom: 20px;
        }

        .dual-service-section .service-card ul {
            padding: 0;
            margin: 0;
            list-style: none;
        }

        .dual-service-section .service-card ul li {
            position: relative;
            padding-left: 25px;
            margin-bottom: 8px;
            font-size: 0.9rem;
            color: #00453d;
        }

        .dual-service-section .service-card ul li::before {
            content: '\f058';
            font-family: 'Font Awesome 6 Free';
            font-weight: 900;
            position: absolute;
            left: 0;
            top: 1px;
            color: #00fdeb;
        }

        .dual-service-section .info-box {
            background-color: #e8f3f1;
            padding: 10px 15px;
            border-radius: 6px;
            margin-top: 15px;
            font-size: 0.85rem;
            color: #00453d;
            display: flex;
            align-items: flex-start;
            gap: 10px;
            border-left: 3px solid #00fdeb;
        }

        .dual-service-section .info-box i {
            margin-top: 3px;
            color: #00453d;
        }

        /* NEW ANIMATION: Connector Data Transmission */
        .dual-service-section .connector-line {
            position: absolute;
            top: 45px; /* Aligns with center node */
            height: 2px;
            background: rgba(0, 69, 61, 0.1);
            width: 30px;
        }

        .dual-service-section .timeline-col.left .connector-line {
            right: -30px;
        }
        
        .dual-service-section .timeline-col.right .connector-line {
            left: -30px;
        }

        /* The Data Packet Dot */
        .dual-service-section .connector-line::after {
            content: '';
            position: absolute;
            top: -2px; /* Center vertically on line */
            width: 6px;
            height: 6px;
            background-color: #00fdeb;
            border-radius: 50%;
            box-shadow: 0 0 6px #00fdeb;
            opacity: 0;
        }

        /* Packet moving Left to Right (for Right column) */
        .dual-service-section .timeline-col.right .connector-line::after {
            animation: transmitRight 2s infinite linear;
        }

        /* Packet moving Right to Left (for Left column) */
        .dual-service-section .timeline-col.left .connector-line::after {
            animation: transmitLeft 2s infinite linear;
        }

        @keyframes transmitRight {
            0% { left: 0; opacity: 0; }
            10% { opacity: 1; }
            90% { opacity: 1; }
            100% { left: 100%; opacity: 0; }
        }

        @keyframes transmitLeft {
            0% { right: 0; opacity: 0; }
            10% { opacity: 1; }
            90% { opacity: 1; }
            100% { right: 100%; opacity: 0; }
        }

        /* --- RESPONSIVE --- */
        @media (max-width: 768px) {
            .dual-service-section .timeline-spine, .center-node-wrapper {
                display: none;
            }

            .dual-service-section .timeline-row-pair {
                flex-direction: column;
                gap: 30px;
            }

            .dual-service-section .timeline-col {
                width: 100%;
                /* Reset transform for mobile so they just fade in up */
                transform: translateY(20px) !important; 
            }
            
            .dual-service-section .timeline-row-pair.visible .timeline-col {
                transform: translateY(0) !important;
            }

            .dual-service-section .connector-line {
                display: none;
            }
        }






        .usa-stats-section {
            width: 100%;
            background-color: #e8f3f1;
            padding: 80px 20px;
            position: relative;
            overflow: hidden;
        }

        .usa-stats-section .usa-container {
            max-width: 1600px;
            margin: 0 auto;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: space-between;
            gap: 50px;
        }

        /* --- Left Side: Image --- */
        .usa-stats-section .usa-image-wrapper {
            flex: 1;
            min-width: 300px;
            position: relative;
            z-index: 2;
        }

        .usa-stats-section .usa-image-frame {
            position: relative;
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 20px 40px rgba(0, 69, 61, 0.15);
            /* Decorative border using the cyan accent */
            border-bottom: 5px solid #00fdeb; 
            transform: translateX(-50px);
            opacity: 0;
            transition: all 1s ease-out;
        }

        .usa-stats-section .usa-image-frame img {
            width: 100%;
            height: auto;
            display: block;
            transition: transform 0.5s ease;
        }

        .usa-stats-section .usa-image-frame:hover img {
            transform: scale(1.03);
        }

        /* Decorative decorative blob behind image */
        .usa-stats-section .usa-image-wrapper::before {
            content: '';
            position: absolute;
            top: -20px;
            left: -20px;
            width: 100px;
            height: 100px;
            background-color: #00fdeb;
            border-radius: 50%;
            z-index: -1;
            opacity: 0.5;
        }

        /* --- Right Side: Content --- */
        .usa-stats-section .usa-content-wrapper {
            flex: 1;
            min-width: 300px;
        }

        .usa-stats-section .usa-title {
            color: #00453d;
            font-size: 2.5rem;
            font-weight: 700;
            margin-bottom: 1.5rem;
            line-height: 1.2;
            position: relative;
            padding-bottom: 15px;
            transform: translateY(20px);
            opacity: 0;
            transition: all 0.8s ease-out;
        }

        .usa-stats-section .usa-title::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: 0;
            width: 80px;
            height: 4px;
            background-color: #00fdeb;
            border-radius: 2px;
        }

        .usa-stats-section .usa-description {
            color: #00453d;
            font-size: 1.1rem;
            line-height: 1.6;
            margin-bottom: 40px;
            opacity: 0.9;
            transform: translateY(20px);
            opacity: 0;
            transition: all 0.8s ease-out 0.2s; /* delay */
        }

        /* Stats Grid */
        .usa-stats-section .usa-stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
            gap: 25px;
        }

        .usa-stats-section .usa-stat-card {
            background-color: #ffffff;
            padding: 25px 20px;
            border-radius: 12px;
            text-align: center;
            box-shadow: 0 10px 25px rgba(0, 69, 61, 0.05);
            border: 1px solid rgba(0, 69, 61, 0.05);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            cursor: default;
            
            /* Initial state for animation */
            opacity: 0;
            transform: translateY(30px);
        }

        .usa-stats-section .usa-stat-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 35px rgba(0, 69, 61, 0.1);
            border-bottom: 3px solid #00fdeb;
        }

        .usa-stats-section .usa-icon {
            font-size: 2rem;
            color: #00fdeb;
            margin-bottom: 15px;
            /* Adding a slight text shadow to make the bright cyan pop against white */
            text-shadow: 0 0 1px #00453d; 
        }

        .usa-stats-section .usa-number {
            font-size: 2.5rem;
            font-weight: 700;
            color: #00453d;
            margin-bottom: 5px;
            display: block;
        }

        .usa-stats-section .usa-label {
            font-size: 0.9rem;
            font-weight: 600;
            color: #6d8a87; /* Lightened dark green for secondary text */
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        /* Animation Classes (applied by JS) */
        .usa-animate-active .usa-image-frame {
            transform: translateX(0);
            opacity: 1;
        }
        
        .usa-animate-active .usa-title,
        .usa-animate-active .usa-description {
            transform: translateY(0);
            opacity: 1;
        }

        .usa-animate-active .usa-stat-card {
            animation: slideUpFade 0.6s ease-out forwards;
        }

        /* Stagger the cards */
        .usa-animate-active .usa-stat-card:nth-child(1) { animation-delay: 0.4s; }
        .usa-animate-active .usa-stat-card:nth-child(2) { animation-delay: 0.6s; }
        .usa-animate-active .usa-stat-card:nth-child(3) { animation-delay: 0.8s; }

        @keyframes slideUpFade {
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* Responsive Design */
        @media (max-width: 768px) {
            .usa-container {
                flex-direction: column;
                text-align: center;
            }

            .usa-title {
                font-size: 2rem;
            }
            
            .usa-title::after {
                left: 50%;
                transform: translateX(-50%);
            }

            .usa-image-frame {
                transform: translateX(0); /* Reset for mobile initially */
                margin-bottom: 30px;
            }
            
            .usa-stats-grid {
                grid-template-columns: 1fr; /* Stack cards on very small screens */
            }
        }




 .isp-section {
            position: relative;
            width: 100%;            
            margin: 0 auto;
            padding: 80px 40px;
            background-color: #E8F3F1;          
            background-image: 
                linear-gradient(105deg, rgba(232, 243, 241, 0.95) 0%, rgba(232, 243, 241, 0.85) 40%, rgba(232, 243, 241, 0.25) 100%),
                linear-gradient(rgba(0, 69, 61, 0.08) 1px, transparent 1px), 
                linear-gradient(90deg, rgba(0, 69, 61, 0.08) 1px, transparent 1px);
            
            background-size: cover, 40px 40px, 40px 40px, cover;
            background-position: center, center, center, center;
            background-repeat: no-repeat, repeat, repeat, no-repeat;
            
            color: #00453d;
           
            box-shadow: 0 10px 30px rgba(0, 69, 61, 0.1);
            overflow: hidden;
        }

        /* Decoration Line - Top Accent */
        .isp-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 6px;
            background: linear-gradient(90deg, #00453d 0%, #00fdeb 50%, #00453d 100%);
            z-index: 10;
        }

        /* Decoration Line */
        .isp-section::top {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 4px;
            background: #00fdeb;
        }

        .isp-section .content-container {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: space-between;
            gap: 40px;
        }

        /* LEFT SIDE: Text Content */
        .isp-section .text-column {
            flex: 1;
            min-width: 300px;
        }

        .isp-section .section-subtitle {
            display: inline-block;
            font-size: 0.9rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1.5px;
            color: #00453d;
            margin-bottom: 10px;
            border-bottom: 2px solid #00fdeb;
            padding-bottom: 5px;
        }

        .isp-section .section-title {
            font-size: 2.5rem;
            font-weight: 800;
            line-height: 1.2;
            margin-bottom: 20px;
            color: #00453d;
        }

        .isp-section .section-description {
            font-size: 1.1rem;
            line-height: 1.6;
            color: #00453d;
            opacity: 0.9;
        }

        /* RIGHT SIDE: Logo Grid */
        .isp-section .cards-column {
            flex: 1;
            min-width: 300px;
        }

        .isp-section .logo-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr); /* 3 columns */
            gap: 15px;
        }

        /* Card Design */
        .isp-section .isp-card {
            background-color: #ffffff;
            border: 1px solid rgba(0, 69, 61, 0.1);
            border-radius: 12px;
            height: 100px; /* Small fixed height */
            display: flex;
            align-items: center;
            justify-content: center;
            transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
            position: relative;
            overflow: hidden;
            padding: 15px;
        }

        /* Hover Effect using the Bright Cyan */
        .isp-section .isp-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 20px rgba(0, 253, 235, 0.2); /* #00fdeb shadow */
            border-color: #00fdeb;
        }

        .isp-section .isp-card img {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
            filter: grayscale(100%); /* Make logos subtle initially */
            transition: filter 0.3s ease;
            opacity: 0.8;
        }

        .isp-section .isp-card:hover img {
            filter: grayscale(0%); /* Full color on hover */
            opacity: 1;
        }

        /* Mobile Responsiveness */
        @media (max-width: 768px) {
            .isp-section .content-container {
                flex-direction: column;
            }

            .isp-section .section-title {
                font-size: 2rem;
            }

            .isp-section .logo-grid {
                grid-template-columns: repeat(2, 1fr); /* 2 columns on mobile */
            }
        }






.server-section {
            width: 100%;
            padding: 80px 20px;
            background-color: #e8f3f1; /* Light Theme Background */
            position: relative;
            overflow: hidden;
            color: #00453d; /* Dark Teal Text */
        }

        /* * SERVER RELATED BACKGROUND (No Grid)
         * Creates a look of vertical data lines and a glowing server rack feel 
         */
        .server-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            opacity: 0.4;
            /* Vertical lines representing server racks/cables */
            background-image: 
                linear-gradient(90deg, transparent 95%, rgba(0, 69, 61, 0.05) 95%),
                linear-gradient(90deg, transparent 98%, rgba(0, 253, 235, 0.2) 98%);
            background-size: 40px 100%, 120px 100%;
            z-index: 0;
        }

        .server-section::after {
            content: '';
            position: absolute;
            bottom: -50px;
            right: -50px;
            width: 500px;
            height: 500px;
            background: radial-gradient(circle, rgba(0, 253, 235, 0.15) 0%, rgba(232, 243, 241, 0) 70%);
            border-radius: 50%;
            z-index: 0;
            pointer-events: none;
        }

        .server-section .container {
            max-width: 1600px;
            margin: 0 auto;
            position: relative;
            z-index: 1; /* Above background */
        }

        /* Section Title */
        .server-section .section-header {
            text-align: center;
            margin-bottom: 60px;
        }

        .server-section .section-header h2 {
            font-size: 2.5rem;
            font-weight: 700;
            color: #00453d;
            margin-bottom: 15px;
            position: relative;
            display: inline-block;
        }

        /* Decorative underline styling */
        .server-section .section-header h2::after {
            content: '';
            display: block;
            width: 60px;
            height: 4px;
            background-color: #00fdeb; /* Bright Cyan Accent */
            margin: 10px auto 0;
            border-radius: 2px;
        }

        .server-section .section-header span {
            display: block;
            margin-top: 10px;
            font-size: 1rem;
            color: #00453d;
            opacity: 0.8;
            letter-spacing: 1px;
            text-transform: uppercase;
            font-weight: 600;
        }

        /* Content Layout */
        .server-section .content-wrapper {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: space-between;
            gap: 50px;
        }

        /* Image Side (Left) */
        .server-section .image-column {
            flex: 1 1 450px; /* Flex-grow, flex-shrink, basis */
            position: relative;
        }

        .server-section .image-container {
            position: relative;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 20px 40px rgba(0, 69, 61, 0.15);
            border: 1px solid rgba(0, 253, 235, 0.3); /* Cyan border accent */
        }

        .server-section .image-container img {
            width: 100%;
            height: auto;
            display: block;
            transition: transform 0.5s ease;
        }

        .server-section .image-container:hover img {
            transform: scale(1.02);
        }

        /* Tech overlay on image */
        .server-section .tech-overlay {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 40%;
            background: linear-gradient(to top, rgba(0, 69, 61, 0.9), transparent);
            display: flex;
            align-items: flex-end;
            padding: 20px;
        }

        .server-section .status-badge {
            background-color: rgba(0, 253, 235, 0.1);
            backdrop-filter: blur(4px);
            border: 1px solid #00fdeb;
            color: #00fdeb;
            padding: 5px 12px;
            border-radius: 20px;
            font-size: 0.8rem;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .server-section .status-dot {
            width: 8px;
            height: 8px;
            background-color: #00fdeb;
            border-radius: 50%;
            box-shadow: 0 0 8px #00fdeb;
            animation: pulse 2s infinite;
        }

        /* Text Side (Right) */
        .server-section .text-column {
            flex: 1 1 450px;
        }

        .server-section .text-column h3 {
            font-size: 1.8rem;
            margin-bottom: 20px;
            color: #00453d;
            line-height: 1.3;
        }

        .server-section .text-column p {
            font-size: 1.1rem;
            line-height: 1.8;
            color: #00453d;
            opacity: 0.9;
            margin-bottom: 30px;
        }

      

        /* Animation Keyframes */
        @keyframes pulse {
            0% { opacity: 1; }
            50% { opacity: 0.5; }
            100% { opacity: 1; }
        }

        /* Responsive Adjustments */
        @media (max-width: 900px) {
            .server-section .content-wrapper {
                flex-direction: column;
            }
            
            .server-section .image-column, .text-column {
                flex: 1 1 100%;
                width: 100%;
            }

            .server-section .section-header h2 {
                font-size: 2rem;
            }
        }


#server-support-section {
            position: relative;
            background-color: #e8f3f1; /* Light background */
            color: #00453d; /* Dark Teal Text */
            padding: 80px 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
            overflow: hidden; /* Contains the animations */
            min-height: 400px;
        }

        /* --- Background Animations (Server Data Streams) --- */
        #server-support-section .bg-decoration {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            opacity: 0.4;
            z-index: 1;
        }

        #server-support-section .data-line {
            position: absolute;
            width: 2px;
            height: 100px;
            background: linear-gradient(to bottom, transparent, #00fdeb, transparent);
            animation: dataFlow 3s infinite linear;
        }

        /* Positioning various lines */
        #server-support-section .data-line:nth-child(1) { left: 10%; top: -100px; animation-duration: 4s; }
        #server-support-section .data-line:nth-child(2) { left: 20%; top: -100px; animation-duration: 2.5s; animation-delay: 1s; }
        #server-support-section .data-line:nth-child(3) { right: 15%; top: -100px; animation-duration: 3.5s; animation-delay: 0.5s; }
        #server-support-section .data-line:nth-child(4) { right: 25%; top: -100px; animation-duration: 5s; }

        @keyframes dataFlow {
            0% { transform: translateY(-100px); opacity: 0; }
            50% { opacity: 1; }
            100% { transform: translateY(600px); opacity: 0; }
        }

        /* --- Content Container --- */
        #server-support-section .content-wrapper {
            position: relative;
            z-index: 2;
            max-width: 600px;
            background: rgba(232, 243, 241, 0.85); /* Slight transparency to see lines behind */
            backdrop-filter: blur(5px);
            padding: 40px;
            border-radius: 20px;
            border: 1px solid rgba(0, 69, 61, 0.1);
            box-shadow: 0 10px 30px rgba(0, 69, 61, 0.05);
        }

        /* --- Typography --- */
        #server-support-section h2.section-title {
            font-size: 2.5rem;
            margin: 0 0 30px 0;
            font-weight: 700;
            letter-spacing: -0.5px;
            color: #00453d;
        }

        #server-support-section p.section-desc {
            font-size: 1.1rem;
            line-height: 1.6;
            margin: 20px 0 30px 0;
            font-weight: 500;
        }

        /* --- Image Styling --- */
        #server-support-section .image-container {
            position: relative;
            width: 120px;
            height: 120px;
            margin: 0 auto;
            border-radius: 50%;
        }

        /* Server Pulse Effect */
        #server-support-section .image-container::before {
            content: '';
            position: absolute;
            top: -5px;
            left: -5px;
            right: -5px;
            bottom: -5px;
            border-radius: 50%;
            border: 2px solid #00fdeb;
            animation: pulse-ring 2s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
        }
        
        #server-support-section .image-container::after {
            content: '';
            position: absolute;
            top: -15px;
            left: -15px;
            right: -15px;
            bottom: -15px;
            border-radius: 50%;
            border: 1px solid rgba(0, 253, 235, 0.5);
            animation: pulse-ring 2s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
            animation-delay: 0.5s;
        }

        @keyframes pulse-ring {
            0% { transform: scale(0.8); opacity: 0.8; }
            100% { transform: scale(1.3); opacity: 0; }
        }

        #server-support-section img.profile-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 50%;
            border: 4px solid #ffffff;
            box-shadow: 0 5px 15px rgba(0, 69, 61, 0.2);
            position: relative;
            z-index: 3;
            background-color: #00453d; /* Fallback color */
        }

        /* --- Button Styling --- */
        #server-support-section .chat-btn {
            background-color: #00453d;
            color: #ffffff;
            border: 2px solid #00453d;
            padding: 12px 35px;
            font-size: 1rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 1px;
            border-radius: 50px;
            cursor: pointer;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
            z-index: 10;
        }

        #server-support-section .chat-btn:hover {
            background-color: transparent;
            color: #00453d;
            box-shadow: 0 0 15px #00fdeb;
            border-color: #00453d;
        }

        /* Icon next to text */
        #server-support-section .chat-btn span {
            margin-right: 8px;
        }

        /* MOCK CHAT WINDOW (For Demo Only) 
           This simulates what happens when Tawk.to opens
        */
        #server-support-section #mock-tawk-widget {
            position: fixed;
            bottom: 20px;
            right: 20px;
            width: 300px;
            height: 400px;
            background-color: #ffffff;
            box-shadow: 0 5px 20px rgba(0,0,0,0.2);
            border-radius: 10px;
            display: none; /* Hidden by default */
            flex-direction: column;
            z-index: 9999;
            overflow: hidden;
            border: 1px solid #e8f3f1;
            font-family: sans-serif;
        }
        
        #server-support-section .mock-header {
            background-color: #00453d;
            color: #fff;
            padding: 15px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        #server-support-section .mock-body {
            padding: 20px;
            flex-grow: 1;
            background-color: #e8f3f1;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #00453d;
            text-align: center;
        }


/* Mexico city design start */


 .infra-section {
            position: relative;
            padding: 5rem 1.5rem;
            color: #00453d; /* Dark Teal Text */
            overflow: hidden;
            
            /* Background Image Setup */
            background-image: url('/assect/images/mexico-server.webp');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
        }

        /* The Light Overlay using #e8f3f1 */
        .infra-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            /* High opacity light overlay: #e8f3f1 at 95% opacity */
            background: rgba(232, 243, 241, 0.95); 
            z-index: 1;
        }

        /* Container to center content */
        .infra-section .infra-container {
            position: relative;
            z-index: 2; /* Ensures content sits above overlay */
            max-width: 1200px;
            margin: 0 auto;
        }

        /* Header Styles */
        .infra-section .infra-header {
            text-align: center;
            margin-bottom: 4rem;
            max-width: 800px;
            margin-left: auto;
            margin-right: auto;
        }

        .infra-section .infra-headline {
            font-size: 2.5rem;
            font-weight: 700;
            margin-bottom: 1rem;
            letter-spacing: -0.02em;
            color: #00453d; /* Dark Teal */
        }

        .infra-section .infra-subheadline {
            font-size: 1.25rem;
            font-weight: 300;
            color: #00453d; /* Dark Teal */
            opacity: 0.8;
        }

        /* Grid Layout */
        .infra-section .infra-grid {
            display: grid;
            grid-template-columns: repeat(1, 1fr);
            gap: 2.5rem;
        }

        /* Feature Card Styles */
        .infra-section .feature-card {
            background: #ffffff; /* White card for clean look on light bg */
            border: 1px solid #e8f3f1;
            padding: 2.5rem 2rem;
            border-radius: 8px;
            transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            height: 100%;
            box-shadow: 0 4px 6px rgba(0, 69, 61, 0.05);
        }

        .infra-section .feature-card:hover {
            transform: translateY(-5px);
            border-color: #00fdeb; /* Cyan Accent on hover */
            box-shadow: 0 10px 30px rgba(0, 69, 61, 0.15);
        }

        /* Icon Styling */
        .infra-section .icon-wrapper {
            margin-bottom: 1.5rem;
            color: #00453d; /* Dark Teal Icon */
            width: 48px;
            height: 48px;
            /* Flex center for the SVG */
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .infra-section .icon-wrapper svg {
            width: 100%;
            height: 100%;
            stroke-width: 1.5; /* Thin line style */
        }

        .infra-section .feature-title {
            font-size: 1.35rem;
            font-weight: 600;
            margin-bottom: 1rem;
            color: #00453d; /* Dark Teal */
        }

        .infra-section .feature-desc {
            font-size: 1rem;
            font-weight: 300;
            line-height: 1.7;
            color: #00453d; /* Dark Teal */
            opacity: 0.8;
        }

        /* Responsive Breakpoints */
        @media (min-width: 768px) {
            .infra-section .infra-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media (min-width: 1024px) {
            .infra-section .infra-grid {
                grid-template-columns: repeat(3, 1fr);
            }
            
            .infra-section .infra-headline {
                font-size: 3rem;
            }
        }

.latency-section {
            background-color: white;
            color: #00453d;
            width: 100%;
            padding: 80px 20px;
            overflow: hidden;
            position: relative;
        }

        .latency-section .container {
            max-width: 1600px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 60px;
            align-items: center;
            position: relative;
            z-index: 2;
        }

        /* --- LEFT COLUMN: CONTENT --- */

        .latency-section .content-wrapper {
            animation: fadeIn 0.8s ease-out;
        }

        .latency-section .eyebrow {
            display: inline-block;
            font-size: 0.85rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 2px;
            color: #00453d;
            margin-bottom: 15px;
            background: rgba(0, 253, 235, 0.2);
            padding: 6px 12px;
            border-radius: 4px;
            border-left: 3px solid #00fdeb;
        }

        .latency-section .headline {
            font-size: 3rem;
            line-height: 1.1;
            font-weight: 800;
            margin-bottom: 25px;
            color: #00453d;
        }

        .latency-section .headline span {
            color: #008f85; /* Slightly lighter teal for emphasis */
            position: relative;
        }

        .latency-section .headline span::after {
            content: '';
            position: absolute;
            bottom: 5px;
            left: 0;
            width: 100%;
            height: 10px;
            background-color: #00fdeb;
            opacity: 0.3;
            z-index: -1;
        }

        .latency-section .body-text {
            font-size: 1.1rem;
            line-height: 1.6;
            margin-bottom: 35px;
            color: #00453d;
            opacity: 0.9;
        }

        .latency-section .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
        }

        .latency-section .stat-card {
            background: #ffffff;
            border: 1px solid rgba(0, 69, 61, 0.1);
            padding: 20px;
            border-radius: 12px;
            box-shadow: 0 10px 30px -10px rgba(0, 69, 61, 0.1);
            transition: transform 0.3s ease;
        }

        .latency-section .stat-card:hover {
            transform: translateY(-5px);
            border-color: #00fdeb;
        }

        .latency-section .stat-icon {
            width: 40px;
            height: 40px;
            background-color: #00453d;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 15px;
            color: #00fdeb;
        }

        .latency-section .stat-title {
            font-weight: 700;
            font-size: 1.1rem;
            margin-bottom: 5px;
            color: #00453d;
        }

        .latency-section .stat-desc {
            font-size: 0.9rem;
            opacity: 0.8;
        }

        /* --- RIGHT COLUMN: MAP GRAPHIC --- */

        .latency-section .map-container {
            position: relative;
            height: 500px;
            width: 100%;
            background: radial-gradient(circle at center, rgba(255,255,255,0.8) 0%, rgba(232, 243, 241, 0) 70%);
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        /* The SVG lines layer */
        .latency-section .network-lines {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
            pointer-events: none;
        }

        .latency-section .connection-line {
            stroke: #00453d;
            stroke-width: 2;
            opacity: 0.2;
        }

        .latency-section .packet {
            fill: #00fdeb;
            filter: drop-shadow(0 0 4px #00fdeb);
        }

        /* Cities (Nodes) */
        .latency-section .city-node {
            position: absolute;
            transform: translate(-50%, -50%);
            z-index: 2;
            display: flex;
            flex-direction: column;
            align-items: center;
            cursor: pointer;
        }

        .latency-section .node-dot {
            width: 16px;
            height: 16px;
            background-color: #ffffff;
            border: 4px solid #00453d;
            border-radius: 50%;
            transition: all 0.3s ease;
            position: relative;
        }

        /* The Hub (Mexico City) */
        .latency-section .city-node.hub .node-dot {
            width: 32px;
            height: 32px;
            background-color: #00fdeb;
            border-color: #00453d;
            box-shadow: 0 0 0 0 rgba(0, 253, 235, 0.7);
            animation: pulse-cyan 2s infinite;
        }

        .latency-section .city-node:hover .node-dot {
            transform: scale(1.2);
            background-color: #00fdeb;
        }

        .latency-section .node-label {
            margin-top: 0px;
            font-weight: 700;
            font-size: 0.9rem;
            color: #00453d;
            background: rgba(255, 255, 255, 0.9);
            padding: 4px 8px;
            border-radius: 4px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            white-space: nowrap;
        }

        @media (max-width:550px){
          .latency-section .node-label {
            margin-top: -60px;
            font-weight: 700;
            font-size: 0.9rem;
            color: #00453d;
            background: rgba(255, 255, 255, 0.9);
            padding: 4px 8px;
            border-radius: 4px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            white-space: nowrap;
        }
        }

        .latency-section .ping-badge {
            position: absolute;
            background-color: #00453d;
            color: #00fdeb;
            padding: 4px 8px;
            border-radius: 20px;
            font-size: 0.75rem;
            font-weight: bold;
            box-shadow: 0 4px 10px rgba(0,0,0,0.1);
            z-index: 3;
            transform: translate(-50%, -50%);
            white-space: nowrap;
            border: 1px solid #00fdeb;
        }

        /* Positioning the Nodes (Percentage based for responsiveness) */
        .latency-section .node-hub { top: 50%; left: 50%; }
        .latency-section .node-dallas { top: 15%; left: 30%; }
        .latency-section .node-miami { top: 20%; left: 80%; }
        .latency-section .node-gdl { top: 60%; left: 20%; }
        .latency-section .node-mty { top: 30%; left: 20%; }

        /* Positioning the Ping Badges (Midpoints approx) */
        .latency-section .ping-dallas { top: 32%; left: 40%; }
        .latency-section .ping-miami { top: 35%; left: 65%; }
        .latency-section .ping-gdl { top: 55%; left: 30%; }
        .latency-section .ping-mty { top: 40%; left: 35%; }

        /* Animations */
        @keyframes pulse-cyan {
            0% {
                transform: scale(0.95);
                box-shadow: 0 0 0 0 rgba(0, 253, 235, 0.7);
            }
            70% {
                transform: scale(1);
                box-shadow: 0 0 0 20px rgba(0, 253, 235, 0);
            }
            100% {
                transform: scale(0.95);
                box-shadow: 0 0 0 0 rgba(0, 253, 235, 0);
            }
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* SVG Line Dash Animation to simulate data flow */
        .latency-section .flow-line {
            fill: none;
            stroke: #00fdeb;
            stroke-width: 2;
            stroke-dasharray: 10, 10;
            stroke-linecap: round;
            animation: flow 1s linear infinite;
            opacity: 0.8;
        }

        @keyframes flow {
            to {
                stroke-dashoffset: -20;
            }
        }

        /* Background Decorations */
        .latency-section .bg-pattern {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0.05;
            background-image: radial-gradient(#00453d 1px, transparent 1px);
            background-size: 20px 20px;
            z-index: 0;
            mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0));
            -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0));
        }

        /* Mobile Responsive */
        @media (max-width: 900px) {
            .latency-section .container {
                grid-template-columns: 1fr;
                gap: 40px;
            }
            .latency-section .headline {
                font-size: 2.2rem;
            }
            .latency-section .map-container {
                height: 400px;
                margin-top: 20px;
            }
            .latency-section .stats-grid {
                grid-template-columns: 1fr;
            }
        }


section.workload-showcase {
            background-color: #e8f3f1;
            color: #00453d;
            padding: 80px 24px;
            position: relative;
            overflow: hidden;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        /* Decorative Background Elements */
        .workload-showcase .bg-decoration {
            position: absolute;
            opacity: 0.1;
            z-index: 0;
            pointer-events: none;
        }

        .workload-showcase .deco-circle {
            width: 600px;
            height: 600px;
            border: 1px solid #00453d;
            border-radius: 50%;
            top: -200px;
            right: -200px;
            background: #002a25;
        }

        .workload-showcase .deco-grid {
            bottom: 20px;
            left: 20px;
            width: 200px;
            height: 200px;
            background-image: radial-gradient(#00453d 1px, transparent 1px);
            background-size: 20px 20px;
        }

        /* Container */
        .workload-showcase .container {
            max-width: 1600px;
            margin: 0 auto;
            position: relative;
            z-index: 2;
        }

        /* Header Styling */
        .workload-showcase .section-header {
            margin-bottom: 60px;
            max-width: 700px;
        }

        .workload-showcase .overline {
            display: block;
            font-size: 0.875rem;
            letter-spacing: 2px;
            text-transform: uppercase;
            color: #00453d;
            margin-bottom: 12px;
            font-weight: 700;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .workload-showcase .overline::before {
            content: '';
            display: block;
            width: 20px;
            height: 2px;
            background-color: #00fdeb;
        }

        .workload-showcase h2 {
            font-size: 3rem;
            line-height: 1.1;
            font-weight: 700;
            color: #00453d;
        }

        .workload-showcase h2 span {
            color: transparent;
            -webkit-text-stroke: 1px #00453d;
        }

        /* Grid Layout */
        .workload-showcase .features-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 24px;
        }

        @media (min-width: 768px) {
            .workload-showcase .features-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        /* Card Styling */
        .workload-showcase .feature-card {
            background-color: #ffffff;
            padding: 40px 32px;
            position: relative;
            transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
            border: 1px solid rgba(0, 69, 61, 0.1);
            display: flex;
            flex-direction: column;
            gap: 20px;
            cursor: default;
        }

        /* The unique "Technical Tab" on the left */
        .workload-showcase .feature-card::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 6px;
            background-color: #00453d;
            transition: width 0.3s ease, background-color 0.3s ease;
        }

        /* Hover Effects */
        .workload-showcase .feature-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 40px -10px rgba(0, 69, 61, 0.15);
        }

        .workload-showcase .feature-card:hover::before {
            width: 100%;
            background-color: #00453d;
            opacity: 0.03; /* Creates a subtle overlay on hover */
        }

        .workload-showcase .feature-card:hover .icon-box {
            background-color: #00fdeb;
            color: #00453d;
            transform: scale(1.1) rotate(-5deg);
            box-shadow: 0 0 20px #00fdeb;
        }

        /* Icon Styling */
        .workload-showcase .icon-box {
            width: 64px;
            height: 64px;
            background-color: #e8f3f1;
            color: #00453d;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 0; /* Keeping it sharp/technical */
            transition: all 0.3s ease;
            position: relative;
            z-index: 5;
        }

        .workload-showcase .icon-box svg {
            width: 32px;
            height: 32px;
            stroke-width: 1.5;
        }

        /* Text Content */
        .workload-showcase .card-content {
            position: relative;
            z-index: 5;
        }

        .workload-showcase h3 {
            font-size: 1.5rem;
            margin-bottom: 12px;
            font-weight: 700;
        }

        .workload-showcase p {
            font-size: 1rem;
            line-height: 1.6;
            color: #00453d;
            opacity: 0.8;
        }

        /* Number Index for technical feel */
        .workload-showcase .card-index {
            position: absolute;
            top: 20px;
            right: 20px;
            font-family: monospace;
            font-size: 0.9rem;
            color: #00453d;
            opacity: 0.3;
        }

        /* Specific Responsive Adjustments */
        @media (max-width: 600px) {
            .workload-showcase h2 {
                font-size: 2.2rem;
            }
            .workload-showcase .feature-card {
                padding: 30px 24px;
            }
        }


.bare-metal-section {
            background-color: #e8f3f1; /* Light Theme Color */
            color: #00453d; /* Dark Theme Color */
            width: 100%;
            max-width: 1400px;
            margin: 2rem auto;
            padding: 4rem 2rem;
            position: relative;
            overflow: hidden;
            border-radius: 20px;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 4rem;
            align-items: center;
            box-shadow: 0 10px 30px rgba(0, 69, 61, 0.05);
        }

        /* Decorative Background Shapes */
        .bare-metal-section::before {
            content: '';
            position: absolute;
            top: -50px;
            right: -50px;
            width: 300px;
            height: 300px;
            background: linear-gradient(135deg, #00fdeb 0%, rgba(0, 253, 235, 0) 70%);
            border-radius: 50%;
            opacity: 0.2;
            z-index: 0;
        }

        /* Content Side (Left) */
        .bare-metal-section .content-wrapper {
            position: relative;
            z-index: 2;
            padding-left: 2rem;
        }

        .bare-metal-section .eyebrow {
            display: inline-block;
            font-size: 0.875rem;
            font-weight: 600;
            letter-spacing: 2px;
            text-transform: uppercase;
            color: #00453d;
            margin-bottom: 1rem;
            border-bottom: 2px solid #00fdeb;
            padding-bottom: 4px;
        }

        .bare-metal-section h2 {
            font-size: 3.5rem;
            line-height: 1.1;
            font-weight: 800;
            margin-bottom: 1.5rem;
            color: #00453d;
        }

        /* Highlight specific words in the headline if needed, 
           or just keep it solid. Here we keep it solid per request 
           but adding a span class for potential styling */
        .bare-metal-section h2 span {
            color: #00453d; 
            /* Optional: text-stroke or specific highlight could go here */
        }

        .bare-metal-section .description {
            font-size: 1.125rem;
            line-height: 1.6;
            margin-bottom: 2rem;
            color: #00453d;
            opacity: 0.9;
            max-width: 90%;
        }

        /* Features List */
        .bare-metal-section .features-list {
            list-style: none;
            margin-bottom: 2.5rem;
        }

        .bare-metal-section .features-list li {
            position: relative;
            padding-left: 2rem;
            margin-bottom: 1rem;
            font-weight: 500;
        }

        .bare-metal-section .features-list li::before {
            content: '✓';
            position: absolute;
            left: 0;
            top: 2px;
            height: 20px;
            width: 20px;
            background-color: #00fdeb; /* Cyan Accent */
            color: #00453d;
            font-size: 12px;
            font-weight: bold;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
        }

        .bare-metal-section .features-list strong {
            font-weight: 700;
            color: #00453d;
        }

        /* CTA Button */
        .bare-metal-section .cta-button {
            display: inline-flex;
            align-items: center;
            padding: 1rem 2.5rem;
            background-color: #00453d; /* Dark Theme Color */
            color: #00fdeb; /* Cyan Text */
            text-decoration: none;
            font-weight: 700;
            font-size: 1rem;
            border-radius: 0; /* Sharp edges for "tech" feel, or round for modern */
            border-top-left-radius: 12px;
            border-bottom-right-radius: 12px;
            transition: all 0.3s ease;
            box-shadow: 4px 4px 0px #00fdeb; /* Unique shadow style */
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .bare-metal-section .cta-button:hover {
            transform: translate(-2px, -2px);
            box-shadow: 6px 6px 0px #00fdeb;
            background-color: #00302a;
        }
        
        .bare-metal-section .cta-button span {
            margin-left: 8px;
            transition: transform 0.3s ease;
        }

        .bare-metal-section .cta-button:hover span {
            transform: translateX(4px);
        }

        /* Image Side (Right) */
        .bare-metal-section .image-wrapper {
            position: relative;
            z-index: 1;
            height: 100%;
            min-height: 500px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* Unique Design Element: Offset Border/Background behind image */
        .bare-metal-section .image-accent {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-45%, -45%);
            width: 90%;
            height: 90%;
            border: 2px solid #00fdeb;
            z-index: -1;
            transition: transform 0.5s ease;
        }

        .bare-metal-section .image-container {
            position: relative;
            width: 90%;
            height: auto;
            overflow: hidden;
            border-radius: 8px;
            box-shadow: 0 20px 40px rgba(0, 69, 61, 0.2);
            /* Clip path for a slight unique angle */
            clip-path: polygon(0 0, 100% 0, 100% 85%, 85% 100%, 0 100%);
            background-color: #000;
        }

        .bare-metal-section .image-container img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            transition: transform 0.7s ease;
        }

        .bare-metal-section .image-container:hover img {
            transform: scale(1.05);
        }

        /* Responsive Design */
        @media (max-width: 968px) {
            .bare-metal-section {
                grid-template-columns: 1fr;
                gap: 3rem;
                padding: 3rem 1.5rem;
                text-align: center;
            }

            .bare-metal-section .content-wrapper {
                padding-left: 0;
            }

            .bare-metal-section .eyebrow {
                margin: 0 auto 1rem auto;
            }

            .bare-metal-section h2 {
                font-size: 2.5rem;
            }

            .bare-metal-section .features-list li {
                text-align: left;
                display: inline-block;
            }
            
            .bare-metal-section .features-list {
                text-align: center; 
                /* Center the list block, but keep items left aligned inside allows for better reading */
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                max-width: 400px;
                margin: 0 auto 2.5rem auto;
            }

            .bare-metal-section .image-wrapper {
                min-height: 300px;
                margin-top: 1rem;
            }
            
            .bare-metal-section .image-accent {
                width: 100%;
                left: 50%;
                transform: translate(-50%, -50%);
            }
            
            .bare-metal-section .image-container {
                width: 100%;
            }
        }


/* Guadaljara sections design start */

.guadalajara-section {
            background-color: #e8f3f1;
            /* Subtle geometric pattern overlay for "Tech" feel */
            background-image: 
                radial-gradient(circle at 10% 20%, rgba(0, 253, 235, 0.1) 0%, transparent 20%),
                radial-gradient(circle at 90% 80%, rgba(0, 69, 61, 0.05) 0%, transparent 20%);
            padding: 80px 20px;
            position: relative;
            overflow: hidden;
            color: #00453d;
        }

        .guadalajara-section .container {
            max-width: 1600px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 60px;
            align-items: center;
            position: relative;
            z-index: 2;
        }

        /* Left Column: Content */
        .guadalajara-section .content-col {
            position: relative;
        }

        .guadalajara-section .highlight-bar {
            width: 60px;
            height: 6px;
            background-color: #00fdeb;
            margin-bottom: 24px;
            border-radius: 3px;
        }

        .guadalajara-section h2 {
            font-size: 3rem;
            line-height: 1.1;
            margin: 0 0 24px 0;
            color: #00453d;
            font-weight: 800;
            letter-spacing: -1px;
        }

        .guadalajara-section h2 span {
            color: #00453d; 
            /* Text highlight effect */
            background: linear-gradient(120deg, transparent 0%, transparent 60%, #00fdeb 60%, #00fdeb 100%);
            background-repeat: no-repeat;
            background-size: 100% 35%;
            background-position: 0 88%;
        }

        .guadalajara-section p {
            font-size: 1.125rem;
            line-height: 1.7;
            color: #00453d;
            opacity: 0.9;
            margin-bottom: 30px;
            border-left: 2px solid rgba(0, 69, 61, 0.2);
            padding-left: 20px;
        }

        /* Right Column: Visual & Stats */
        .guadalajara-section .visual-col {
            position: relative;
        }

        /* The "Glass" Card Effect */
        .guadalajara-section .innovation-card {
            background: rgba(255, 255, 255, 0.85);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(0, 253, 235, 0.3);
            border-radius: 20px;
            padding: 40px;
            box-shadow: 
                0 20px 40px rgba(0, 69, 61, 0.1),
                0 0 0 1px rgba(255, 255, 255, 0.5) inset;
            position: relative;
            overflow: hidden;
        }

        /* Decorative decorative line on the card */
        .guadalajara-section .innovation-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 6px;
            background: linear-gradient(90deg, #00fdeb, #00453d);
        }

        .guadalajara-section .stat-block {
            text-align: center;
            margin-bottom: 40px;
            position: relative;
        }

        .guadalajara-section .stat-number {
            font-size: 5rem;
            font-weight: 800;
            margin: 0;
            color: #00453d;
            line-height: 1;
            /* Text stroke effect for uniqueness */
            -webkit-text-stroke: 2px #00453d;
            color: transparent;
            background-image: linear-gradient(180deg, #00453d 40%, #00fdeb 100%);
            -webkit-background-clip: text;
            background-clip: text;
        }

        .guadalajara-section .stat-label {
            font-size: 1.1rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-top: 10px;
            color: #00453d;
        }

        .guadalajara-section .divider {
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(0, 69, 61, 0.2), transparent);
            margin: 0 auto 30px auto;
            width: 80%;
        }

        /* Trust Bar / Industry Grid */
        .guadalajara-section .industry-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 15px;
        }

        .guadalajara-section .industry-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            padding: 15px 10px;
            border-radius: 12px;
            transition: transform 0.3s ease;
            background: rgba(232, 243, 241, 0.5); /* Using the light theme color with opacity */
            border: 1px solid rgba(0, 69, 61, 0.05);
        }

        .guadalajara-section .industry-item:hover {
            transform: translateY(-5px);
            background: #fff;
            box-shadow: 0 10px 20px rgba(0, 69, 61, 0.08);
            border-color: #00fdeb;
        }

        .guadalajara-section .icon-box {
            width: 40px;
            height: 40px;
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .guadalajara-section .icon-box svg {
            width: 100%;
            height: 100%;
            fill: #00453d;
        }

        .guadalajara-section .industry-name {
            font-size: 0.85rem;
            font-weight: 600;
            color: #00453d;
        }

        /* Background City Graphic Placeholder - Abstract CSS Shapes */
        .guadalajara-section .city-abstract {
            position: absolute;
            right: -5%;
            bottom: 0;
            width: 50%;
            height: 80%;
            z-index: 1;
            opacity: 0.05;
            pointer-events: none;
        }

        .guadalajara-section .city-abstract svg {
            fill: #00453d;
        }

        /* Button Styling */
        .guadalajara-section .cta-button {
            display: inline-block;
            background-color: #00453d;
            color: #00fdeb;
            padding: 16px 32px;
            font-weight: 700;
            text-decoration: none;
            border-radius: 50px;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(0, 69, 61, 0.2);
        }

        .guadalajara-section .cta-button:hover {
            background-color: #003630;
            transform: translateX(5px);
            box-shadow: 0 6px 20px rgba(0, 69, 61, 0.3);
        }

        /* Responsive Design */
        @media (max-width: 900px) {
            .guadalajara-section .container {
                grid-template-columns: 1fr;
                gap: 40px;
            }

            .guadalajara-section h2 {
                font-size: 2.5rem;
            }

            .guadalajara-section .content-col {
                text-align: center;
            }

            .guadalajara-section .highlight-bar {
                margin: 0 auto 24px auto;
            }

            .guadalajara-section p {
                border-left: none;
                padding-left: 0;
            }
            
            .guadalajara-section .city-abstract {
                width: 100%;
                opacity: 0.03;
            }
        }

.ull-bridge-section {
            background-color: white;
            color: #00453d;
            padding: 80px 20px;
            position: relative;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        /* Soft background glow instead of hard shape */
        .ull-bridge-section::before {
            content: '';
            position: absolute;
            bottom: -20%;
            left: -10%;
            width: 600px;
            height: 600px;
            background: radial-gradient(circle, rgba(0, 253, 235, 0.08) 0%, rgba(232, 243, 241, 0) 70%);
            border-radius: 50%;
            z-index: 0;
            pointer-events: none;
        }

        .ull-bridge-section .container {
            max-width: 1600px;
            width: 100%;
            position: relative;
            z-index: 1;
            display: grid;
            grid-template-columns: 1.2fr 1fr; /* Swapped ratios: Visual gets more space on left */
            gap: 60px;
            align-items: center;
        }

        /* --- VISUAL SIDE (Left) --- */
        .ull-bridge-section .visual-wrapper {
            position: relative;
            height: 450px;
            background: radial-gradient(circle at center, #005c52 0%, #00453d 100%);
            border-radius: 24px;
            box-shadow: 0 30px 60px -10px rgba(0, 69, 61, 0.3);
            overflow: hidden;
            border: 1px solid rgba(0, 253, 235, 0.3);
            display: flex;
            justify-content: center;
            align-items: center;
        }

        /* Hexagonal Grid Background */
        .ull-bridge-section .hex-grid {
            position: absolute;
            width: 100%;
            height: 100%;
            background-image: 
                radial-gradient(transparent 95%, rgba(0, 253, 235, 0.1) 95%);
            background-size: 30px 30px;
            opacity: 0.3;
        }

        /* Main SVG Layer */
        .ull-bridge-section .network-svg {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
        }

        /* The Curved Paths */
        .ull-bridge-section .flow-path {
            fill: none;
            stroke: url(#flowGradient); /* Uses SVG Gradient */
            stroke-width: 3;
            stroke-linecap: round;
            opacity: 0.6;
            stroke-dasharray: 1000;
            stroke-dashoffset: 1000;
            animation: flowAnimation 3s ease-out infinite;
        }
        
        /* Static track for the flow to run on */
        .ull-bridge-section .track-path {
            fill: none;
            stroke: rgba(0, 253, 235, 0.1);
            stroke-width: 3;
            stroke-linecap: round;
        }

        /* Delays for organic feel */
        .ull-bridge-section .delay-1 { animation-delay: 0s; }
        .ull-bridge-section .delay-2 { animation-delay: 1.2s; }
        .ull-bridge-section .delay-3 { animation-delay: 0.5s; }

        @keyframes flowAnimation {
            0% { stroke-dashoffset: 1000; opacity: 0; }
            20% { opacity: 1; }
            100% { stroke-dashoffset: 0; opacity: 0; }
        }

        /* Nodes - Targets */
        .ull-bridge-section .node-marker {
            fill: #00453d;
            stroke: #00fdeb;
            stroke-width: 2;
            r: 4; /* Radius */
            transition: all 0.3s ease;
        }

        .ull-bridge-section .node-hub {
            fill: #00fdeb;
            stroke: rgba(255,255,255,0.5);
            stroke-width: 4;
            r: 8;
        }

        /* Sonar Ripple Effect for Main Hub */
        .ull-bridge-section .sonar-ring {
            fill: none;
            stroke: #00fdeb;
            stroke-width: 1;
            opacity: 0;
            transform-origin: 50% 65%; /* Matches GDL coordinates */
            animation: sonarRipple 2.5s infinite;
        }
        
        .ull-bridge-section .sonar-delay { animation-delay: 0.8s; }

        @keyframes sonarRipple {
            0% { transform: scale(0.1); opacity: 1; stroke-width: 2; }
            100% { transform: scale(4); opacity: 0; stroke-width: 0; }
        }

        /* Labels on Map */
        .ull-bridge-section .map-label {
            fill: #e8f3f1;
            font-size: 10px;
            font-weight: 600;
            letter-spacing: 0.5px;
            text-transform: uppercase;
            opacity: 0.8;
            text-shadow: 0 2px 4px rgba(0,0,0,0.5);
        }

        /* --- CONTENT SIDE (Left) --- */
        .ull-bridge-section .content-wrapper {
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .ull-bridge-section .section-tag {
            display: inline-block;
            background-color: rgba(0, 253, 235, 0.15);
            color: #006b5f;
            padding: 6px 12px;
            border-radius: 20px;
            font-size: 0.8rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 20px;
            width: fit-content;
        }

        .ull-bridge-section .headline {
            font-size: 2.8rem;
            font-weight: 800;
            line-height: 1.1;
            margin: 0 0 20px 0;
            color: #00453d;
            background: linear-gradient(90deg, #00453d 0%, #007a6e 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .ull-bridge-section .description {
            font-size: 1.05rem;
            line-height: 1.6;
            color: #2a5f59;
            margin-bottom: 30px;
        }

        /* Stats Row */
        .ull-bridge-section .stats-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 15px;
            margin-top: 10px;
        }

        .ull-bridge-section .stat-card {
            background-color: rgba(175,207,188,0.6);
            padding: 15px;
            border-radius: 12px;
            border: 1px solid rgba(0, 69, 61, 0.1);
            text-align: center;
            transition: transform 0.2s, box-shadow 0.2s;
        }

        .ull-bridge-section .stat-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 20px rgba(0, 69, 61, 0.1);
            border-color: #00fdeb;
        }

        .ull-bridge-section .stat-icon {
            color: #00fdeb;
            margin-bottom: 10px;
            height: 28px;
            width: 28px;
            background: #00453d;
            padding: 8px;
            border-radius: 50%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }
        
        .ull-bridge-section .stat-icon svg {
            width: 18px;
            height: 18px;
            fill: #fff;
        }

        .ull-bridge-section .stat-text {
            font-size: 0.85rem;
            font-weight: 700;
            color: #00453d;
            line-height: 1.3;
        }

        /* Highlight List (Middle Section) */
        .ull-bridge-section .highlight-list {
            list-style: none;
            padding: 0;
            margin: 0 0 30px 0;
            display: grid;
            gap: 12px;
        }

        .ull-bridge-section .highlight-item {
            display: flex;
            align-items: center;
            font-size: 0.95rem;
            color: #00453d;
            background: rgba(175,207,188,0.6);
            padding: 10px 15px;
            border-radius: 8px;
        }

        .ull-bridge-section .highlight-marker {
            width: 8px;
            height: 8px;
            background-color: #00fdeb;
            border-radius: 50%;
            margin-right: 12px;
            box-shadow: 0 0 5px #00fdeb;
        }

        /* Responsive */
        @media (max-width: 992px) {
            .ull-bridge-section .container {
                grid-template-columns: 1fr;
            }
            .ull-bridge-section .visual-wrapper {
                height: 350px;
                /* order: -1; Removed: Visual is now first in HTML, so it stays on top naturally */
            }
        }
        
        @media (max-width: 600px) {
            .ull-bridge-section .stats-grid {
                grid-template-columns: 1fr;
            }
            .ull-bridge-section .headline {
                font-size: 2.2rem;
            }
        }


.security-reliability-section {
            width: 100%;
            max-width: 100%;
            background-color: #e8f3f1; /* Theme Light Background */
            color: #00453d; /* Theme Dark Teal */
            padding: 80px 20px;
            position: relative;
            overflow: hidden;
            display: flex;
            justify-content: center;
        }

        /* Decorative Background Element (The "Unique" Touch) */
        .security-reliability-section::before {
            content: '';
            position: absolute;
            top: -50px;
            right: -50px;
            width: 400px;
            height: 400px;
            background: radial-gradient(circle, #00fdeb 0%, transparent 70%);
            opacity: 0.1;
            z-index: 0;
            pointer-events: none;
        }

        /* User Mentioned: Background Image Placeholder */
        /* To add your image, uncomment below and add URL */
        .security-reliability-section {
            background-image: url('/assect/images/section-img-guadalajara.png');
            background-size: cover;
            background-position: center;
            background-blend-mode: overlay;
        } 
       

        .security-reliability-section .content-container {
            max-width: 1200px;
            width: 100%;
            position: relative;
            z-index: 1;
        }

        /* Logo Placeholder Area */
        .security-reliability-section .logo-placeholder {
            position: absolute;
            top: -40px;
            left: 0;
            /* Add your logo image here using an <img> tag or background-image */
        }

        /* Header Layout */
        .security-reliability-section .header-group {
            max-width: 800px;
            margin-bottom: 60px;
        }

        .security-reliability-section .section-tag {
            display: inline-block;
            font-size: 0.85rem;
            font-weight: 700;
            letter-spacing: 1.5px;
            text-transform: uppercase;
            color: #00453d;
            border-bottom: 2px solid #00fdeb;
            padding-bottom: 4px;
            margin-bottom: 16px;
        }

        .security-reliability-section h2.headline {
            font-size: 3rem;
            line-height: 1.1;
            font-weight: 700;
            margin-bottom: 24px;
            color: #00453d;
        }

        .security-reliability-section p.intro-text {
            font-size: 1.125rem;
            line-height: 1.6;
            color: #00453d;
            opacity: 0.85;
            max-width: 90%;
            border-left: 4px solid #00fdeb;
            padding-left: 20px;
        }

        /* Grid Layout for Key Features */
        .security-reliability-section .features-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
            margin-top: 40px;
        }

        /* Feature Card Design */
        .security-reliability-section .feature-card {
            background: #ffffff;
            border: 1px solid rgba(0, 69, 61, 0.1);
            padding: 35px;
            border-radius: 12px;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            position: relative;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            gap: 15px;
        }

        /* Unique hover effect */
        .security-reliability-section .feature-card::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 4px;
            background-color: #00fdeb;
            transform: scaleX(0);
            transform-origin: left;
            transition: transform 0.3s ease;
        }

        .security-reliability-section .feature-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 40px rgba(0, 69, 61, 0.08);
        }

        .security-reliability-section .feature-card:hover::after {
            transform: scaleX(1);
        }

        .security-reliability-section .icon-wrapper {
            width: 50px;
            height: 50px;
            background-color: #e8f3f1;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #00453d;
            margin-bottom: 10px;
        }

        .security-reliability-section .icon-wrapper svg {
            width: 24px;
            height: 24px;
            stroke-width: 2px;
        }

        .security-reliability-section .feature-title {
            font-size: 1.25rem;
            font-weight: 700;
            color: #00453d;
        }

        .security-reliability-section .feature-description {
            font-size: 1rem;
            line-height: 1.5;
            color: #00453d;
            opacity: 0.8;
        }

        /* Responsive Tweaks */
        @media (max-width: 768px) {
            .security-reliability-section h2.headline {
                font-size: 2.25rem;
            }
            .security-reliability-section {
                padding: 60px 20px;
            }
            .security-reliability-section .header-group {
                margin-bottom: 40px;
            }
        }

section#creative-compute {
            position: relative;
            background-color: #87d7ce;
            color: #e8f3f1;
            padding: 80px 20px;
            overflow: hidden;
            width: 100%;
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* Abstract Wireframe Background */
        #creative-compute .wireframe-bg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: 
                linear-gradient(rgba(0, 253, 235, 0.05) 1px, transparent 1px),
                linear-gradient(90deg, rgba(0, 253, 235, 0.05) 1px, transparent 1px);
            background-size: 40px 40px;
            transform: perspective(1000px) rotateX(60deg) scale(2);
            transform-origin: top center;
            opacity: 0.4;
            pointer-events: none;
            z-index: 0;
            animation: gridMove 20s linear infinite;
        }

        @keyframes gridMove {
            0% { transform: perspective(1000px) rotateX(60deg) scale(2) translateY(0); }
            100% { transform: perspective(1000px) rotateX(60deg) scale(2) translateY(40px); }
        }

        /* Vignette Overlay */
        #creative-compute .overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle at center, transparent 0%, #00453d 90%);
            z-index: 1;
            pointer-events: none;
        }

        /* Container - The "Software Interface" */
        #creative-compute .interface-container {
            position: relative;
            z-index: 2;
            max-width: 1200px;
            width: 100%;
            background: rgba(0, 69, 61, 0.9);
            border: 1px solid #00fdeb;
            backdrop-filter: blur(10px);
            box-shadow: 0 0 30px rgba(0, 253, 235, 0.1);
            display: grid;
            grid-template-columns: 280px 1fr;
            grid-template-rows: auto 1fr;
            border-radius: 4px;
        }

        /* Header Area */
        #creative-compute .interface-header {
            grid-column: 1 / -1;
            padding: 30px;
            border-bottom: 1px solid rgba(0, 253, 235, 0.3);
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
            flex-wrap: wrap;
            gap: 20px;
        }

        #creative-compute .header-content h2 {
            font-size: 2.5rem;
            text-transform: uppercase;
            letter-spacing: 2px;
            color: #00fdeb;
            margin-bottom: 10px;
            font-weight: 800;
            text-shadow: 0 0 10px rgba(0, 253, 235, 0.4);
        }

        #creative-compute .header-content p {
            font-size: 1.1rem;
            max-width: 700px;
            line-height: 1.6;
            color: #e8f3f1;
            opacity: 0.9;
        }

        /* Sidebar / Workload Selector */
        #creative-compute .sidebar {
            border-right: 1px solid rgba(0, 253, 235, 0.3);
            background: rgba(0, 0, 0, 0.2);
            padding: 20px 0;
        }

        #creative-compute .sidebar-label {
            padding: 0 20px 15px;
            font-size: 0.8rem;
            text-transform: uppercase;
            color: #00fdeb;
            letter-spacing: 1px;
            font-weight: bold;
            opacity: 0.7;
        }

        #creative-compute .tab-btn {
            width: 100%;
            padding: 20px;
            background: transparent;
            border: none;
            border-left: 4px solid transparent;
            color: #e8f3f1;
            text-align: left;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 15px;
            font-family: inherit;
        }

        #creative-compute .tab-btn:hover {
            background: rgba(0, 253, 235, 0.1);
        }

        #creative-compute .tab-btn.active {
            background: linear-gradient(90deg, rgba(0, 253, 235, 0.15), transparent);
            border-left: 4px solid #00fdeb;
            color: #00fdeb;
        }

        #creative-compute .tab-btn svg {
            width: 24px;
            height: 24px;
            fill: currentColor;
        }

        #creative-compute .tab-text strong {
            display: block;
            font-size: 1.1rem;
        }
        
        #creative-compute .tab-text span {
            font-size: 0.8rem;
            opacity: 0.7;
            display: block;
            margin-top: 4px;
        }

        /* Main Viewport */
        #creative-compute .viewport {
            padding: 40px;
            display: flex;
            flex-direction: column;
            gap: 30px;
        }

        /* Active Config Display */
        #creative-compute .config-display {
            background: rgba(0, 0, 0, 0.3);
            border: 1px solid rgba(0, 253, 235, 0.2);
            padding: 25px;
            border-radius: 4px;
            position: relative;
        }

        #creative-compute .config-display::before {
            content: "ACTIVE CONFIGURATION";
            position: absolute;
            top: -10px;
            right: 20px;
            background: #00453d;
            border: 1px solid #00fdeb;
            color: #00fdeb;
            font-size: 0.7rem;
            padding: 2px 8px;
            letter-spacing: 1px;
        }

        #creative-compute .config-title {
            color: #00fdeb;
            font-size: 1.5rem;
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        #creative-compute .config-desc {
            line-height: 1.6;
            margin-bottom: 20px;
        }

        /* Tech Specs Grid */
        #creative-compute .specs-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            gap: 20px;
        }

        #creative-compute .spec-card {
            background: rgba(232, 243, 241, 0.05);
            padding: 20px;
            border-top: 2px solid rgba(0, 253, 235, 0.3);
            transition: transform 0.3s ease, border-color 0.3s ease;
        }

        #creative-compute .spec-card:hover {
            transform: translateY(-5px);
            border-top-color: #00fdeb;
            background: rgba(232, 243, 241, 0.08);
        }

        #creative-compute .spec-icon {
            color: #00fdeb;
            font-size: 1.2rem;
            margin-bottom: 10px;
            font-weight: bold;
            font-family: monospace;
        }

        #creative-compute .spec-title {
            font-size: 1.1rem;
            margin-bottom: 8px;
            color: #e8f3f1;
            font-weight: 600;
        }

        #creative-compute .spec-text {
            font-size: 0.9rem;
            color: #e8f3f1;
            opacity: 0.7;
            line-height: 1.5;
        }

        /* Responsive Design */
        @media (max-width: 900px) {
            #creative-compute .interface-container {
                grid-template-columns: 1fr;
            }
            
            #creative-compute .sidebar {
                border-right: none;
                border-bottom: 1px solid rgba(0, 253, 235, 0.3);
                display: flex;
                flex-direction: column;
            }

            #creative-compute .tab-btn {
                border-left: none;
                border-bottom: 4px solid transparent;
            }

            #creative-compute .tab-btn.active {
                border-left: none;
                border-bottom: 4px solid #00fdeb;
                background: linear-gradient(180deg, transparent, rgba(0, 253, 235, 0.1));
            }

            #creative-compute .header-content h2 {
                font-size: 2rem;
            }
        }

        /* Utility classes for JS toggling */
        #creative-compute .config-content {
            display: none;
            animation: fadeIn 0.5s ease;
        }
        
        #creative-compute .config-content.active {
            display: block;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
    
/* Queretaro section design start */

.queretaro-section {
            background-color: #e8f3f1;
            color: #00453d;
            padding: 5rem 2rem;
            position: relative;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 90vh; /* Full viewport height for impact */
        }

        /* Decorative background wash */
        .queretaro-section::before {
            content: '';
            position: absolute;
            top: -20%;
            left: -10%;
            width: 50%;
            height: 50%;
            background: radial-gradient(circle, rgba(0, 253, 235, 0.1) 0%, rgba(232, 243, 241, 0) 70%);
            z-index: 0;
        }

        .queretaro-section .q-container {
            max-width: 1600px;
            width: 100%;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 4rem;
            position: relative;
            z-index: 1;
            align-items: center;
        }

        /* --- LEFT COLUMN: CONTENT --- */
        .queretaro-section .q-content {
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
        }

        .queretaro-section .q-eyebrow {
            font-family: 'Space Grotesk', sans-serif;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 2px;
            font-size: 0.85rem;
            color: #00453d;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .queretaro-section .q-eyebrow::before {
            content: '';
            width: 40px;
            height: 2px;
            background-color: #00fdeb;
        }

        .queretaro-section .q-title {
            font-family: 'Space Grotesk', sans-serif;
            font-size: 3.5rem;
            line-height: 1.1;
            font-weight: 700;
            color: #00453d;
        }

        .queretaro-section .q-highlight {
            position: relative;
            z-index: 1;
            display: inline-block;
        }

        .queretaro-section .q-highlight::after {
            content: '';
            position: absolute;
            bottom: 5px;
            left: 0;
            width: 100%;
            height: 15px;
            background-color: #00fdeb;
            z-index: -1;
            opacity: 0.4;
            transform: skewX(-10deg);
        }

        .queretaro-section .q-description {
            font-size: 1.1rem;
            line-height: 1.6;
            color: #00453d;
            opacity: 0.9;
            border-left: 3px solid rgba(0, 69, 61, 0.1);
            padding-left: 1.5rem;
        }

        .queretaro-section .q-btn {
            margin-top: 1rem;
            align-self: flex-start;
            padding: 1rem 2rem;
            background-color: #00453d;
            color: #00fdeb;
            text-decoration: none;
            font-weight: 600;
            border-radius: 4px;
            transition: all 0.3s ease;
            box-shadow: 0 10px 20px -10px rgba(0, 69, 61, 0.4);
            display: inline-flex;
            align-items: center;
            gap: 10px;
        }

        .queretaro-section .q-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 15px 25px -10px rgba(0, 69, 61, 0.5);
            background-color: #003630;
        }

        /* --- RIGHT COLUMN: VISUAL --- */
        .queretaro-section .q-visual {
            position: relative;
            height: 500px;
            background: linear-gradient(135deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0.1) 100%);
            border: 1px solid rgba(255,255,255,0.8);
            border-radius: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            box-shadow: 0 20px 50px rgba(0, 69, 61, 0.05);
        }

        /* Abstract Map Styling */
        .queretaro-section .q-map-svg {
            width: 100%;
            height: 100%;
            opacity: 0.8;
        }

        /* The Pulse Animation */
        .queretaro-section .hub-point {
            fill: #00fdeb;
            filter: drop-shadow(0 0 10px #00fdeb);
        }

        .queretaro-section .hub-ring {
            fill: none;
            stroke: #00fdeb;
            stroke-width: 1;
            transform-origin: 380px 250px; /* Center of the hub dot */
            opacity: 0;
            animation: ripple 3s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
        }

        .queretaro-section .hub-ring:nth-child(2) { animation-delay: 0.5s; }
        .queretaro-section .hub-ring:nth-child(3) { animation-delay: 1.0s; }

        @keyframes ripple {
            0% { transform: scale(0.1); opacity: 1; stroke-width: 3; }
            100% { transform: scale(2.5); opacity: 0; stroke-width: 0; }
        }

        .queretaro-section .connection-line {
            stroke: #00453d;
            stroke-width: 1;
            stroke-dasharray: 10;
            opacity: 0.3;
            animation: dash 30s linear infinite;
        }

        @keyframes dash {
            to { stroke-dashoffset: 1000; }
        }

        /* Floating Info Card */
        .queretaro-section .q-info-card {
            position: absolute;
            bottom: -20px;
            right: -20px;
            background: rgba(255, 255, 255, 0.85);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            padding: 1.5rem;
            border-radius: 12px;
            width: 280px;
            border: 1px solid #ffffff;
            box-shadow: 0 15px 35px rgba(0, 69, 61, 0.1);
            animation: float 6s ease-in-out infinite;
        }

        @keyframes float {
            0% { transform: translateY(0px); }
            50% { transform: translateY(-10px); }
            100% { transform: translateY(0px); }
        }

        .queretaro-section .card-header {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 0.5rem;
            color: #00453d;
            font-weight: 700;
            font-family: 'Space Grotesk', sans-serif;
        }

        .queretaro-section .card-icon {
            color: #00fdeb;
            background-color: #00453d;
            width: 24px;
            height: 24px;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 12px;
        }

        .queretaro-section .card-text {
            font-size: 0.9rem;
            color: #00453d;
            line-height: 1.4;
        }

        /* Mobile Responsiveness */
        @media (max-width: 900px) {
            .queretaro-section .q-container {
                grid-template-columns: 1fr;
                gap: 3rem;
            }

            .queretaro-section .q-visual {
                height: 400px;
                order: -1; /* Visual first on mobile */
            }

            .queretaro-section .q-title {
                font-size: 2.5rem;
            }
            
            .queretaro-section .q-info-card {
                right: 0;
                left: 0;
                margin: auto;
                bottom: -30px;
                width: 90%;
            }
        }


.connectivity-section-container {
            background-color: white;
            border-radius: 2rem;
            position: relative;
            overflow: hidden;
            box-shadow: 0 25px 50px -12px rgba(0, 69, 61, 0.1);
        }

        /* Background Decor Blobs */
        .connectivity-section-container .blob {
            position: absolute;
            border-radius: 50%;
            filter: blur(64px);
            z-index: 0;
        }

        .connectivity-section-container .blob-cyan {
            top: 0;
            right: 0;
            width: 16rem;
            height: 16rem;
            background-color: rgba(0, 253, 235, 0.1);
            transform: translate(50%, -50%);
        }

        .connectivity-section-container .blob-dark {
            bottom: 0;
            left: 0;
            width: 24rem;
            height: 24rem;
            background-color: rgba(0, 69, 61, 0.05);
            transform: translate(-50%, 50%);
        }

        /* Content Wrapper */
        .connectivity-section-container .content-wrapper {
            position: relative;
            z-index: 10;
            padding: 2rem;
        }

        @media (min-width: 1024px) {
            .connectivity-section-container .content-wrapper {
                padding: 4rem;
            }
        }

        /* Top Grid Layout */
        .connectivity-section-container .grid-split {
            display: grid;
            grid-template-columns: 1fr;
            gap: 3rem;
            align-items: center;
            margin-bottom: 4rem;
        }

        @media (min-width: 1024px) {
            .connectivity-section-container .grid-split {
                grid-template-columns: 1fr 1fr;
            }
        }

        /* Left Content Styling */
        .connectivity-section-container .text-content {
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
        }

        .connectivity-section-container .badge {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.25rem 0.75rem;
            border-radius: 9999px;
            background-color: #e8f3f1;
            border: 1px solid rgba(0, 69, 61, 0.1);
            color: #00453d;
            font-size: 0.75rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            width: fit-content;
        }

        .connectivity-section-container .main-heading {
            font-size: 2.25rem;
            font-weight: 700;
            color: #00453d;
            line-height: 1.2;
        }

        @media (min-width: 1024px) {
            .connectivity-section-container .main-heading {
                font-size: 3rem;
            }
        }

        .connectivity-section-container .gradient-text {
            background: linear-gradient(to right, #00453d, #758584);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            color: transparent;
        }

        .connectivity-section-container .main-desc {
            font-size: 1.125rem;
            color: rgba(0, 69, 61, 0.8);
            line-height: 1.625;
        }

        .connectivity-section-container .icon-features {
            display: flex;
            flex-direction: column;
            gap: 1rem;
            padding-top: 1rem;
        }

        @media (min-width: 640px) {
            .connectivity-section-container .icon-features {
                flex-direction: row;
            }
        }

        .connectivity-section-container .icon-feature-item {
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }

        .connectivity-section-container .icon-box-small {
            width: 2.5rem;
            height: 2.5rem;
            border-radius: 0.5rem;
            background-color: rgba(0, 253, 235, 0.2);
            display: flex;
            align-items: center;
            justify-content: center;
            color: #00453d;
        }

        .connectivity-section-container .icon-label {
            font-weight: 500;
            color: #00453d;
        }

        /* Chart Card */
        .connectivity-section-container .chart-card {
            background-color: #00453d;
            border-radius: 1rem;
            padding: 1.5rem;
            color: white;
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
            position: relative;
            overflow: hidden;
        }

        .connectivity-section-container .chart-header {
            color: #00fdeb;
            font-weight: 700;
            font-size: 0.875rem;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            margin-bottom: 1.5rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .connectivity-section-container .chart-rows {
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
        }

        .connectivity-section-container .chart-row-header {
            display: flex;
            justify-content: space-between;
            font-size: 0.875rem;
            margin-bottom: 0.5rem;
        }

        .connectivity-section-container .text-dim { opacity: 0.7; }
        .connectivity-section-container .text-highlight { color: #00fdeb; font-weight: bold; }

        .connectivity-section-container .bar-bg {
            height: 0.75rem;
            width: 100%;
            background-color: rgba(255, 255, 255, 0.1);
            border-radius: 9999px;
            overflow: hidden;
        }

        /* Animations & Dynamic Styles */
        @keyframes pulse-ring {
            0% { transform: scale(0.8); opacity: 0.5; }
            100% { transform: scale(2); opacity: 0; }
        }

        .connectivity-section-container .ping-dot {
            width: 0.5rem;
            height: 0.5rem;
            background-color: #00fdeb;
            border-radius: 50%;
            position: relative;
        }

        .connectivity-section-container .ping-dot::before {
            content: '';
            position: absolute;
            top: 0; left: 0;
            width: 100%;
            height: 100%;
            background-color: #00fdeb;
            border-radius: 50%;
            z-index: -1;
            animation: pulse-ring 2s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
        }

        .connectivity-section-container .data-flow {
            position: absolute;
            top: 0; left: 0;
            width: 100%;
            height: 4px;
            background: linear-gradient(90deg, transparent, #00fdeb, transparent);
            background-size: 200% 100%;
            animation: flow 2s linear infinite;
            opacity: 0.3;
        }

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

        .connectivity-section-container .bar-fill {
            height: 100%;
            border-radius: 9999px;
            transition: width 1.5s ease-out;
            width: 0%;
        }
        
        .connectivity-section-container .bar-fill-legacy { background-color: rgba(255, 255, 255, 0.3); }
        .connectivity-section-container .bar-fill-brand { 
            background-color: #00fdeb;
            box-shadow: 0 0 10px #00fdeb;
        }

        .connectivity-section-container .loaded .bar-fill-long { width: 85%; }
        .connectivity-section-container .loaded .bar-fill-short { width: 15%; }

        .connectivity-section-container .chart-footer {
            margin-top: 2rem;
            padding-top: 1.5rem;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 0.75rem;
            opacity: 0.6;
        }

        .connectivity-section-container .status-active { color: #00fdeb; }

        /* Feature Cards Grid */
        .connectivity-section-container .features-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 1.5rem;
        }

        @media (min-width: 768px) {
            .connectivity-section-container .features-grid {
                grid-template-columns: repeat(3, 1fr);
            }
        }

        .connectivity-section-container .feature-card {
            background-color: #e8f3f1;
            padding: 1.5rem;
            border-radius: 0.75rem;
            border: 1px solid rgba(0, 69, 61, 0.05);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .connectivity-section-container .feature-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 30px -10px rgba(0, 69, 61, 0.2);
        }

        .connectivity-section-container .feature-icon-box {
            width: 3rem;
            height: 3rem;
            background-color: #00453d;
            border-radius: 0.5rem;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #00fdeb;
            margin-bottom: 1rem;
        }

        .connectivity-section-container .feature-title {
            font-size: 1.25rem;
            font-weight: 700;
            color: #00453d;
            margin-bottom: 0.5rem;
        }

        .connectivity-section-container .feature-desc {
            font-size: 0.875rem;
            color: rgba(0, 69, 61, 0.7);
            line-height: 1.5;
        }


section.fortress-section {
            background-color: #e8f3f1;
            padding: 80px 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            position: relative;
            overflow: hidden;
        }

        /* Decorative background element */
        section.fortress-section::before {
            content: '';
            position: absolute;
            top: -10%;
            right: -5%;
            width: 600px;
            height: 600px;
            background: #00fdeb;
            opacity: 0.1;
            border-radius: 50%;
            filter: blur(80px);
            z-index: 0;
        }

        .fortress-section .container {
            max-width: 1600px;
            width: 100%;
            position: relative;
            z-index: 1;
        }

        .fortress-section .layout-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 40px;
            align-items: center;
        }

        /* * IMAGE SIDE DESIGN
         */
        .fortress-section .image-wrapper {
            position: relative;
            padding-left: 20px;
        }

        /* The main image styling */
        .fortress-section .security-image {
            width: 100%;
            height: auto;
            border-radius: 2px;
            position: relative;
            z-index: 2;
            /* Using the Dark Teal for a hard shadow effect */
            box-shadow: 20px 20px 0px #00453d; 
            filter: grayscale(20%) contrast(110%);
            transition: all 0.4s ease;
        }

        .fortress-section .image-wrapper:hover .security-image {
            transform: translate(-5px, -5px);
            box-shadow: 25px 25px 0px #00fdeb; /* Changes to Bright Cyan on hover */
            filter: grayscale(0%);
        }

        /* Decorative tech lines around image */
        .fortress-section .tech-lines {
            position: absolute;
            bottom: -30px;
            left: -30px;
            width: 150px;
            height: 150px;
            border-left: 4px solid #00453d;
            border-bottom: 4px solid #00453d;
            z-index: 1;
        }

        /* * TEXT CONTENT DESIGN 
         */
        .fortress-section .content-card {
            background: #ffffff;
            padding: 50px;
            /* Left border accent using Bright Cyan */
            border-left: 8px solid #00fdeb; 
            box-shadow: 0 15px 40px rgba(0, 69, 61, 0.1); /* Shadow using Dark Teal tint */
            position: relative;
            /* Negative margin to pull it over the image slightly on desktop */
            margin-left: -60px; 
            z-index: 10;
        }

        .fortress-section .eyebrow {
            display: inline-block;
            font-size: 0.85rem;
            font-weight: 800;
            letter-spacing: 2px;
            text-transform: uppercase;
            color: #00fdeb;
            background-color: #00453d;
            padding: 5px 12px;
            margin-bottom: 20px;
        }

        .fortress-section h2 {
            font-size: 2.5rem;
            line-height: 1.2;
            color: #00453d; /* Dark Teal */
            margin-bottom: 25px;
            font-weight: 800;
        }

        .fortress-section .description {
            color: #5a706d; /* Muted version of the dark teal */
            margin-bottom: 30px;
            font-size: 1.05rem;
        }

        /* Feature List Styling */
        .fortress-section .feature-list {
            list-style: none;
            margin-bottom: 35px;
        }

        .fortress-section .feature-item {
            display: flex;
            align-items: flex-start;
            margin-bottom: 20px;
            padding-bottom: 20px;
            border-bottom: 1px solid #e8f3f1;
        }

        .fortress-section .feature-item:last-child {
            border-bottom: none;
            margin-bottom: 0;
            padding-bottom: 0;
        }

        .fortress-section .feature-icon {
            flex-shrink: 0;
            width: 24px;
            height: 24px;
            background-color: #e8f3f1;
            color: #00453d;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            margin-right: 15px;
            margin-top: 4px;
            font-weight: bold;
            font-size: 14px;
        }

        .fortress-section .feature-text strong {
            display: block;
            color: #00453d;
            font-size: 1.1rem;
            margin-bottom: 4px;
        }

        .fortress-section .feature-text {
            color: #444;
            font-size: 0.95rem;
        }

        /* Call to Action Area */
        .fortress-section .cta-box {
            background-color: #00453d; /* Dark Teal Background */
            color: #ffffff;
            padding: 20px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-right: 5px solid #00fdeb; /* Bright Cyan Accent */
        }

        .fortress-section .cta-text {
            font-weight: 600;
            font-size: 0.9rem;
        }

        /* Responsive Design */
        @media (max-width: 992px) {
            .fortress-section .layout-grid {
                grid-template-columns: 1fr;
                gap: 0;
            }

            .fortress-section .content-card {
                margin-left: 0;
                margin-top: -40px; /* Pull up over image */
                padding: 30px;
            }

            .fortress-section .image-wrapper {
                padding: 0;
                margin-bottom: 0;
            }
            
            .fortress-section .security-image {
                box-shadow: none;
                width: 100%;
                height: 300px;
                object-fit: cover;
            }

            .fortress-section .tech-lines {
                display: none;
            }
        }

        @media (max-width: 600px) {
            .fortress-section h2 {
                font-size: 1.8rem;
            }
            
            .fortress-section .content-card {
                margin-top: 0;
                border-left: 4px solid #00fdeb;
            }

            .fortress-section .cta-box {
                flex-direction: column;
                text-align: center;
                gap: 10px;
            }
        }


.innovation-section {
            position: relative;
            width: 100%;
            min-height: 85vh; /* Taller section for impact */
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            color: #e8f3f1;
            box-sizing: border-box;
        }

        /* Parallax Background Layer */
        .innovation-section .innovation-bg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            /* Placeholder image: Abstract network nodes/city */
            background-image: url('/assect/images/city-building-img.png');
            background-attachment: fixed;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            z-index: 1;
        }

        /* Overlay to ensure text readability & apply theme brand color */
        .innovation-section .innovation-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, rgba(0, 69, 61, 0.95) 0%, rgba(0, 69, 61, 0.7) 100%);
            z-index: 2;
        }

        /* Abstract Geometric Decorations */
        .innovation-section .geo-accent {
            position: absolute;
            z-index: 2;
            opacity: 0.4;
        }

        .innovation-section .geo-circle {
            width: 300px;
            height: 300px;
            border: 2px solid #00fdeb;
            border-radius: 50%;
            top: -100px;
            right: -50px;
            box-shadow: 0 0 30px #00fdeb;
        }

        .innovation-section .geo-line {
            width: 2px;
            height: 200px;
            background: #00fdeb;
            bottom: 0;
            left: 10%;
        }

        /* Main Content Container */
        .innovation-section .innovation-content {
            position: relative;
            z-index: 3;
            max-width: 1200px;
            width: 90%;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 4rem;
            align-items: center;
            padding: 4rem 0;
        }

        /* Typography Styling */
        .innovation-section .headline-wrapper {
            position: relative;
        }

        .innovation-section .innovation-title {
            font-size: 3.5rem;
            line-height: 1.1;
            font-weight: 800;
            margin: 0 0 1.5rem 0;
            color: #e8f3f1;
            text-transform: uppercase;
            letter-spacing: -1px;
            position: relative;
        }

        .innovation-section .innovation-title span {
            color: #00fdeb;
            display: block; /* Make "Innovation" break to new line or stand out */
            text-shadow: 0 0 20px rgba(0, 253, 235, 0.4);
        }

        /* Decorative line under title */
        .innovation-section .title-decoration {
            width: 80px;
            height: 6px;
            background-color: #00fdeb;
            margin-bottom: 2rem;
            border-radius: 3px;
        }

        /* Glassmorphism Card for Text */
        .innovation-section .text-card {
            background: rgba(232, 243, 241, 0.05); /* #e8f3f1 with low opacity */
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border: 1px solid rgba(0, 253, 235, 0.2); /* #00fdeb border */
            padding: 2.5rem;
            border-radius: 16px;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
            position: relative;
            transition: transform 0.3s ease;
        }

        .innovation-section .text-card:hover {
            transform: translateY(-5px);
            border-color: rgba(0, 253, 235, 0.5);
        }

        /* Corner accents for the card */
        .innovation-section .card-corner {
            position: absolute;
            width: 20px;
            height: 20px;
            border-color: #00fdeb;
            border-style: solid;
            transition: all 0.3s ease;
        }

        .innovation-section .top-left {
            top: -1px;
            left: -1px;
            border-width: 2px 0 0 2px;
            border-radius: 16px 0 0 0;
        }

        .innovation-section .bottom-right {
            bottom: -1px;
            right: -1px;
            border-width: 0 2px 2px 0;
            border-radius: 0 0 16px 0;
        }

        .innovation-section .innovation-text {
            font-size: 1.1rem;
            line-height: 1.8;
            margin-bottom: 1.5rem;
            color: #e8f3f1; /* Light text */
            font-weight: 300;
        }

        .innovation-section .highlight-bold {
            font-weight: 700;
            color: #00fdeb;
        }

        /* Stats Row inside the text card */
        .innovation-section .stats-row {
            display: flex;
            gap: 2rem;
            margin-top: 2rem;
            padding-top: 2rem;
            border-top: 1px solid rgba(232, 243, 241, 0.2);
        }

        .innovation-section .stat-item h4 {
            font-size: 2.5rem;
            margin: 0;
            color: #00fdeb;
            font-weight: 800;
        }

        .innovation-section .stat-item p {
            margin: 0;
            font-size: 0.9rem;
            text-transform: uppercase;
            letter-spacing: 1px;
            opacity: 0.8;
        }

        /* Responsive Design */
        @media (max-width: 900px) {
            .innovation-section .innovation-content {
                grid-template-columns: 1fr;
                padding: 3rem 1rem;
            }

            .innovation-section .innovation-title {
                font-size: 2.5rem;
                text-align: center;
            }
            
            .innovation-section .title-decoration {
                margin: 0 auto 2rem auto;
            }

            .innovation-section .headline-wrapper {
                margin-bottom: 2rem;
            }
        }


/* Vancouver page design start */

.network-latency-section {
            background-color: #e8f3f1;
            padding: 80px 20px;
            width: 100%;
            box-sizing: border-box;
            position: relative;
            overflow: hidden;
        }

        .network-latency-section .ls-container {
            max-width: 1400px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: 1fr 1.2fr;
            gap: 60px;
            align-items: center;
        }

        /* Content Side */
        .network-latency-section .ls-content {
            z-index: 2;
        }

        .network-latency-section .ls-label {
            display: inline-block;
            color: #00453d;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 2px;
            font-size: 0.85rem;
            margin-bottom: 16px;
            border-bottom: 2px solid #00fdeb;
            padding-bottom: 4px;
        }

        .network-latency-section .ls-headline {
            color: #00453d;
            font-size: 3.5rem;
            line-height: 1.1;
            font-weight: 800;
            margin: 0 0 24px 0;
        }

        .network-latency-section .ls-headline span {
            color: #00ab9d; /* Slightly lighter teal for emphasis */
            position: relative;
            white-space: nowrap;
        }

        .network-latency-section .ls-headline span::after {
            content: '';
            position: absolute;
            bottom: 5px;
            left: 0;
            width: 100%;
            height: 12px;
            background-color: #00fdeb;
            opacity: 0.3;
            z-index: -1;
            transform: skewX(-15deg);
        }

        .network-latency-section .ls-subhead {
            color: #00453d;
            font-size: 1.25rem;
            font-weight: 600;
            margin-bottom: 20px;
            opacity: 0.9;
        }

        .network-latency-section .ls-body {
            color: #00453d;
            font-size: 1rem;
            line-height: 1.6;
            margin-bottom: 40px;
            opacity: 0.8;
            max-width: 500px;
        }

        /* REPLACED BUTTON WITH ANIMATED MONITOR */
        .network-latency-section .monitor-widget {
            display: flex;
            align-items: center;
            gap: 20px;
            background: rgba(0, 69, 61, 0.05);
            padding: 15px 25px;
            border-radius: 12px;
            border-left: 4px solid #00453d;
            max-width: 380px;
            backdrop-filter: blur(5px);
        }

        .network-latency-section .monitor-icon {
            position: relative;
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .network-latency-section .monitor-ring {
            position: absolute;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            border: 2px solid #00453d;
            opacity: 0.2;
        }

        .network-latency-section .monitor-ring::after {
            content: '';
            position: absolute;
            top: -2px;
            left: -2px;
            right: -2px;
            bottom: -2px;
            border-radius: 50%;
            border: 2px solid transparent;
            border-top-color: #00fdeb;
            animation: spin 1.5s linear infinite;
        }

        .network-latency-section .monitor-dot {
            width: 12px;
            height: 12px;
            background-color: #ca2121;
            border-radius: 50%;
            z-index: 2;
        }

        .network-latency-section .monitor-content {
            flex: 1;
        }

        .network-latency-section .monitor-label {
            font-size: 0.7rem;
            text-transform: uppercase;
            letter-spacing: 1px;
            font-weight: 700;
            color: #00453d;
            opacity: 0.7;
            margin-bottom: 4px;
        }

        .network-latency-section .monitor-status {
            font-size: 1rem;
            font-weight: 800;
            color: #00453d;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        /* Animated signal bars */
        .network-latency-section .signal-bars {
            display: flex;
            align-items: flex-end;
            gap: 3px;
            height: 16px;
        }

        .network-latency-section .bar {
            width: 3px;
            background-color: #00453d;
            animation: signalBounce 1s ease-in-out infinite;
        }
        .network-latency-section .bar:nth-child(1) { height: 60%; animation-delay: 0s; }
        .network-latency-section .bar:nth-child(2) { height: 100%; animation-delay: 0.2s; }
        .network-latency-section .bar:nth-child(3) { height: 80%; animation-delay: 0.4s; }

        /* Map Visual Side */
        .network-latency-section .ls-visual-wrapper {
            position: relative;
        }

        .network-latency-section .ls-map-card {
            background-color: #00453d;
            border-radius: 24px;
            padding: 40px;
            position: relative;
            box-shadow: 0 25px 50px -12px rgba(0, 69, 61, 0.25);
            overflow: hidden;
            aspect-ratio: 16/10;
        }

        /* Abstract Background Grid on Map */
        .network-latency-section .ls-grid-bg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: 
                linear-gradient(rgba(0, 253, 235, 0.05) 1px, transparent 1px),
                linear-gradient(90deg, rgba(0, 253, 235, 0.05) 1px, transparent 1px);
            background-size: 40px 40px;
            pointer-events: none;
        }

        /* Radar Sweep Animation */
        .network-latency-section .radar-sweep {
            position: absolute;
            width: 600px;
            height: 600px;
            /* Centered roughly on Vancouver in the map coordinate space relative to card */
            top: -100px; 
            left: 200px; 
            background: conic-gradient(from 180deg, transparent 0deg, transparent 280deg, rgba(0, 253, 235, 0.1) 360deg);
            border-radius: 50%;
            animation: radarSpin 6s linear infinite;
            pointer-events: none;
            z-index: 1;
        }

        /* SVG Map Styling */
        .network-latency-section .ls-map-svg {
            width: 100%;
            height: 100%;
            filter: drop-shadow(0 0 10px rgba(0, 253, 235, 0.2));
            position: relative;
            z-index: 2;
        }

        .network-latency-section .land-shape {
            fill: rgba(232, 243, 241, 0.1);
            stroke: rgba(232, 243, 241, 0.2);
            stroke-width: 1;
        }

        /* Connections */
        .network-latency-section .connection-line {
            fill: none;
            stroke: #00fdeb;
            stroke-width: 2;
            stroke-linecap: round;
            stroke-dasharray: 10;
            opacity: 0.6;
            animation: dashFlow 20s linear infinite;
        }
        
        .network-latency-section .travel-dot {
            r: 3;
            fill: #fff;
        }

        /* City Markers */
        .network-latency-section .city-group {
            cursor: pointer;
            transition: transform 0.3s ease;
        }
        .network-latency-section .city-group:hover {
            transform: scale(1.1); 
            transform-origin: center;
        }
        .network-latency-section .city-dot { fill: #00fdeb; r: 4; }
        .network-latency-section .city-ring {
            fill: none;
            stroke: #00fdeb;
            stroke-width: 1;
            r: 8;
            opacity: 0.5;
            animation: ripple 2s infinite;
        }

        /* Stat Cards overlaid on map */
        .network-latency-section .ls-stat-tag {
            background: rgba(232, 243, 241, 0.95);
            padding: 8px 12px;
            border-radius: 6px;
            position: absolute;
            font-size: 0.75rem;
            font-weight: 700;
            color: #00453d;
            box-shadow: 0 4px 6px rgba(0,0,0,0.2);
            display: flex;
            align-items: center;
            gap: 6px;
            transform: translate(-50%, -150%);
            white-space: nowrap;
            opacity: 0;
            animation: popIn 0.5s forwards;
            z-index: 5;
        }
        
        .network-latency-section .ls-stat-tag::after {
            content: '';
            position: absolute;
            bottom: -5px;
            left: 50%;
            transform: translateX(-50%);
            border-width: 5px 5px 0;
            border-style: solid;
            border-color: rgba(232, 243, 241, 0.95) transparent transparent transparent;
        }

        .network-latency-section .ls-stat-tag.tokyo { left: 15%; top: 45%; animation-delay: 0.2s; }
        .network-latency-section .ls-stat-tag.vancouver { left: 65%; top: 25%; animation-delay: 0s; z-index: 10; background: #00fdeb; color: #00453d; }
        .network-latency-section .ls-stat-tag.vancouver::after { border-top-color: #00fdeb; }
        .network-latency-section .ls-stat-tag.seattle { left: 65%; top: 38%; animation-delay: 0.4s; }
        .network-latency-section .ls-stat-tag.la { left: 70%; top: 65%; animation-delay: 0.6s; }
        .network-latency-section .ls-stat-tag.toronto { left: 88%; top: 30%; animation-delay: 0.8s; }

        /* Animations */
        @keyframes dashFlow { to { stroke-dashoffset: -200; } }
        @keyframes ripple { 0% { transform: scale(0.8); opacity: 1; } 100% { transform: scale(2.5); opacity: 0; } }
        @keyframes popIn { from { opacity: 0; transform: translate(-50%, -130%) scale(0.9); } to { opacity: 1; transform: translate(-50%, -150%) scale(1); } }
        @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
        @keyframes radarSpin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
        @keyframes signalBounce { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(0.5); } }

        /* Specific CSS paths for animations */
        .network-latency-section #path-tokyo { d: path("M 520 120 Q 300 100 120 180"); }
       .network-latency-section #path-seattle { d: path("M 520 120 L 525 150"); }
        .network-latency-section #path-la { d: path("M 520 120 Q 550 200 560 260"); }
        .network-latency-section #path-toronto { d: path("M 520 120 Q 600 110 700 120"); }

        /* Responsive Design */
        @media (max-width: 900px) {
            .network-latency-section .ls-container { grid-template-columns: 1fr; gap: 40px; }
            .network-latency-section .ls-headline { font-size: 2.5rem; }
            .network-latency-section .ls-map-card { aspect-ratio: 16/12; }
            .network-latency-section .radar-sweep { left: 50%; top: 50%; transform-origin: top left; margin-left: -300px; margin-top: -300px; }
        }




/* Dedicated server page continent section design start */

.dedicated-server-section {
            width: 100%;
            padding: 50px 20px;
            text-align: center;
        }

        .dedicated-server-section h2 {
            font-size: 2.5rem;
            margin-bottom: 50px;
            color: var(#00453d);
            text-transform: uppercase;
            letter-spacing: 3px;
            font-weight: 800;
            text-shadow: 2px 2px 0px rgba(255,255,255,1);
        }

        /* --- The Rack Container --- */
        .dedicated-server-section .rack-container {
            display: flex;
            justify-content: center;
            gap: 15px;
            padding: 45px;
            /* Recessed Rack Look */
            background-color: #dbece9;
            border-radius: 20px;
            border-bottom: 2px solid white;
            box-shadow: 
                inset 0 10px 20px rgba(0,69,61,0.1),
                0 20px 40px rgba(0,69,61,0.1);
            margin-bottom: 50px;
            flex-wrap: wrap;
        }

        /* --- Server Blade (3D Object) --- */
        .dedicated-server-section .server-blade {
            position: relative;
            width: 140px;
            height: auto;
            /* Complex Gradient for Metallic Curve */
            background: linear-gradient(145deg, #005a50, #003d36);
            border-radius: 8px;
            cursor: pointer;
            
            /* Snappy Mechanical Transition */
            transition: transform 0.1s cubic-bezier(0.3, 0.7, 0.4, 1), box-shadow 0.1s;
            
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-between;
            padding: 20px 10px;
            box-sizing: border-box;
            
            /* SUPER 3D SHADOWS */
            box-shadow: 
                /* Top Highlight Bevel */
                inset 1px 1px 0 rgba(255,255,255,0.15),
                /* Side/Bottom Shade Bevel */
                inset -1px -1px 0 rgba(0,0,0,0.3),
                /* The "Thickness" of the button (The 3D side) */
                0 10px 0 var(#002b26),
                /* The Cast Shadow on the table */
                0 20px 20px var(rgba(0, 40, 35, 0.4));
            
            border: 1px solid #002e28;
            user-select: none;
            z-index: 10;
            
        }

        /* Hover Effect */
        .dedicated-server-section .server-blade:hover {
            transform: translateY(2px); /* Slight press */
            background: linear-gradient(145deg, #00665b, #00453d); /* Lighten up */
            box-shadow: 
                inset 1px 1px 0 rgba(255,255,255,0.2),
                inset -1px -1px 0 rgba(0,0,0,0.3),
                0 8px 0 var(#002b26), /* Thickness reduces */
                0 15px 15px var(rgba(0, 40, 35, 0.4)); /* Shadow sharpens */
        }

        /* CLICK STATE (The "Snap") */
        .dedicated-server-section .server-blade:active {
            transform: translateY(10px) !important; /* Fully depressed */
            box-shadow: 
                inset 0 3px 10px rgba(0,0,0,0.5), /* Deep inner shadow */
                0 0 0 var(#002b26), /* Thickness gone */
                0 0 0 rgba(0,0,0,0) !important; /* Cast shadow gone */
            transition: none; /* Instant reaction */
        }

        /* ACTIVE/SELECTED STATE (Latched Down) */
        .dedicated-server-section .server-blade.active {
            transform: translateY(8px); /* Stays pressed down */
            background: #00332d;
            box-shadow: 
                inset 0 2px 10px rgba(0,0,0,0.5), /* Inner shadow (recessed) */
                0 2px 0 var(#002b26), /* Tiny bit of thickness left */
                0 2px 2px rgba(255,255,255,0.5); /* Bottom highlight from "surface" */
            border-bottom: 4px solid var(#00fdeb);
        }

        /* --- Server Details --- */
        .dedicated-server-section .blade-handle {
            width: 50%;
            height: 6px;
            background: rgba(0,0,0,0.4);
            border-bottom: 1px solid rgba(255,255,255,0.1);
            box-shadow: inset 0 2px 3px rgba(0,0,0,0.3);
            border-radius: 4px;
            margin-bottom: 15px;
        }

        .dedicated-server-section .blade-leds {
            display: flex;
            gap: 8px;
            margin-bottom: 10px;
        }

        .dedicated-server-section .led {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background-color: var(#2a665f);
            box-shadow: inset 0 2px 4px rgba(0,0,0,0.8), 0 1px 0 rgba(255,255,255,0.1);
            border: 1px solid rgba(0,0,0,0.5);
            transition: 0.2s;
        }

        /* Glowing LEDs when active */
        .dedicated-server-section .server-blade.active .led.main {
            background-color: #00fdeb;
            box-shadow: 0 0 15px var(#00fdeb), inset 0 -2px 5px rgba(255,255,255,0.5);
            border-color: transparent;
        }
        
        .dedicated-server-section .server-blade:hover .led.standby {
            background-color: #ffd700;
            box-shadow: 0 0 8px #ffd700;
        }

        .dedicated-server-section .blade-text {
            color: #b0caca;
            font-size: 1.1rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            text-align: center;
            text-shadow: 0 -1px 0 rgba(0,0,0,0.5);
            flex-grow: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            line-height: 1.2;
            padding-bottom: 20px;
        }

        .dedicated-server-section .server-blade.active .blade-text {
            color: #bae9e1;
            text-shadow: 0 0 15px rgba(0, 253, 235, 0.4);
        }

        /* --- Updated Button CSS --- */
.dedicated-server-section .view-loc-btn {
    /* Absolute Positioning to pin it to the bottom */
    position: absolute;
    bottom: 12px; 
    left: 10px;
    
    /* Width calculation: 100% width minus the left/right padding of the container (20px total) */
    width: calc(100% - 20px); 
    
    padding: 6px 0;
    
    /* Typography */
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #00fdeb; /* Neon Cyan */
    
    /* Visuals: Glass/Holographic look */
    background: rgba(0, 46, 40, 0.5);
    border: 1px solid rgba(0, 253, 235, 0.2);
    border-radius: 4px;
    
    /* Interaction */
    cursor: pointer;
    pointer-events: none; /* Allows the click to pass through to the main card */
    transition: all 0.3s ease;
    backdrop-filter: blur(2px);
    
    /* Shadow */
    box-shadow: 0 4px 6px rgba(0,0,0,0.2);
}

/* Hover Effect: Button lights up */
.dedicated-server-section .server-blade:hover .view-loc-btn {
    background: rgba(0, 253, 235, 0.15);
    border-color: #00fdeb;
    box-shadow: 0 0 10px rgba(0, 253, 235, 0.3);
    color: #fff;
}

/* Active State: Button looks "Engaged" */
.dedicated-server-section .server-blade.active .view-loc-btn {
    background: #dbece9;
    color: #002e28;
    border-color: #00fdeb;
    box-shadow: 0 0 15px rgba(0, 253, 235, 0.6);
    font-weight: 900;
    bottom: 10px; /* Slight movement to match the blade press */
}


        /* --- Cities Display Area --- */
        .dedicated-server-section .cities-display {
            background: white;
            border: 2px solid var(#00453d);
            border-radius: 12px;
            padding: 40px;
            box-shadow: 
                0 20px 40px rgba(0,69,61,0.15),
                inset 0 2px 0 rgba(255,255,255,1);
            opacity: 0;
            transform: translateY(20px);
            transition: all 0.4s ease;
            display: none;
        }

        .dedicated-server-section .cities-display.visible {
            display: block;
            animation: slideUp 0.4s forwards;
        }

        @keyframes slideUp {
            to { opacity: 1; transform: translateY(0); }
        }

        .dedicated-server-section .cities-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
            gap: 20px;
        }

        /* --- 3D CHUNKY CITY BUTTONS --- */
        .dedicated-server-section .city-btn {
            /* 3D Block Appearance */
            background-color: #f7fffe;
            color: var(#00453d);
            border: 1px solid #00453d;
            border-radius: 8px;
            padding: 18px;
            font-weight: 700;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: space-between;
            position: relative;
            
            /* The "Block" Shadow */
            box-shadow: 
                0 6px 0 #00453d, /* Thick solid side */
                0 15px 20px rgba(0,0,0,0.15); /* Soft ground shadow */
            
            transform: translateY(0);
            transition: transform 0.05s linear, box-shadow 0.05s linear;
        }

        /* Hover: Lift slightly */
        .dedicated-server-section .city-btn:hover {
            transform: translateY(-2px);
            box-shadow: 
                0 8px 0 #00453d,
                0 18px 25px rgba(0,0,0,0.15);
            background-color: white;
        }

        /* Active: PRESS DOWN FIRMLY */
        .dedicated-server-section .city-btn:active {
            transform: translateY(6px); /* Move down to cover the shadow */
            box-shadow: 
                0 0 0 #00453d, /* Shadow gone */
                inset 0 3px 5px rgba(0,0,0,0.1); /* Inner indent */
        }

        .dedicated-server-section .city-btn span {
            pointer-events: none; /* Ensure clicks hit the button */
        }

        .dedicated-server-section .city-indicator {
            height: 8px;
            width: 8px;
            border-radius: 50%;
            background-color: #ccc;
            box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
        }
        
        .dedicated-server-section .city-btn:hover .city-indicator {
            background-color: var(#00fdeb);
            box-shadow: 0 0 5px var(#00fdeb);
        }


        /* --- New Header Layout --- */
.dedicated-server-section .display-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid #00fdeb; /* Moving the underline to the full width */
    padding-bottom: 15px;
    margin-bottom: 30px;
    flex-wrap: wrap; /* responsive wrapping */
    gap: 15px;
}

.dedicated-server-section #region-title {
    /* Resetting previous margins/borders since parent handles it now */
    margin: 0;
    border: none;
    padding: 0;
    font-size: 1.8rem;
    color: #00453d;
    text-transform: uppercase;
}

/* --- Search Bar Styling --- */
.dedicated-server-section .search-wrapper {
    position: relative;
    max-width: 250px;
    width: 100%;
}

.dedicated-server-section #city-search {
    width: 100%;
    padding: 10px 35px 10px 15px; /* Right padding for icon */
    font-size: 0.95rem;
    color: #00453d;
    background: #f0fdfb;
    border: 2px solid #b0caca;
    border-radius: 6px;
    outline: none;
    font-weight: 600;
    transition: all 0.2s ease;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.05);
}

.dedicated-server-section #city-search::placeholder {
    color: rgba(0, 69, 61, 0.4);
    font-weight: 400;
}

/* Focus State - Neon Glow */
.dedicated-server-section #city-search:focus {
    border-color: #00fdeb;
    background: #fff;
    box-shadow: 0 0 8px rgba(0, 253, 235, 0.4);
}

.dedicated-server-section .search-icon {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0.4;
    font-size: 14px;
    pointer-events: none;
}

        /* Responsive */
        @media (max-width: 900px) {
            .dedicated-server-section .server-blade {
                width: 150px;
                font-size: 0.9rem;
            }
        }

        @media (max-width: 768px) {
            .dedicated-server-section .rack-container {
                gap: 15px;
                padding: 25px;
            }
            .dedicated-server-section .server-blade {
                width: 45%;
                height: 100px;
                flex-direction: row;
                padding: 10px 20px;
                margin-bottom: 10px; /* Reduced margin as shadow is handled better */
                box-shadow: 
                    0 6px 0 var(#002b26),
                    0 10px 10px var(rgba(0, 40, 35, 0.4));
            }
            .dedicated-server-section .server-blade:active {
                transform: translateY(6px) !important;
            }
            .dedicated-server-section .blade-text {
                text-align: left;
                justify-content: flex-start;
                padding-left: 10px;
            }
            .dedicated-server-section .blade-handle, .blade-vents { display: none; }
            .dedicated-server-section .blade-leds { flex-direction: column; gap: 4px; }
        }