.breadcrumb-item + .breadcrumb-item::before,
.breadcrumb-item.active {
  color: var(--color-text);
}

#hero-common .breadcrumb-item + .breadcrumb-item::before,
#hero-common .breadcrumb-item.active {
  color: var(--color-text-dark);
}

#hero-common {
  height: 38rem;
  background-color: var(--color-primary);
  color: var(--color-text-dark);
  position: relative;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}

#hero-common::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(
      4px 4px at 10% 20%,
      rgba(255, 255, 255, 0.9),
      transparent
    ),
    radial-gradient(
      2.5px 2.5px at 25% 65%,
      rgba(255, 255, 255, 0.7),
      transparent
    ),
    radial-gradient(3px 3px at 80% 45%, rgba(255, 255, 255, 0.8), transparent),
    radial-gradient(2px 2px at 50% 15%, rgba(255, 255, 255, 0.6), transparent),
    radial-gradient(
      2.5px 2.5px at 90% 75%,
      rgba(255, 255, 255, 0.5),
      transparent
    ),
    radial-gradient(3px 3px at 70% 35%, rgba(255, 255, 255, 0.7), transparent),
    radial-gradient(2px 2px at 30% 85%, rgba(255, 255, 255, 0.6), transparent),
    radial-gradient(
      2.5px 2.5px at 15% 50%,
      rgba(255, 255, 255, 0.5),
      transparent
    ),
    radial-gradient(3px 3px at 60% 70%, rgba(255, 255, 255, 0.8), transparent),
    radial-gradient(2px 2px at 85% 25%, rgba(255, 255, 255, 0.7), transparent);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

/* /////////////////// PRICING HOME STYLES /////////////// */
/* /////////////////////////////////////////////////////// */
#pricing-home {
  background-color: #f6f6f6;
}

#pricing-home .section-heading {
  max-width: 60rem;
}

#pricing-home .pricing-toggle {
  margin-bottom: 3rem;
}

#pricing-home .toggle-buttons {
  background-color: white;
  border-radius: var(--radius-28);
  padding: 0 4px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  display: inline-flex;
}

#pricing-home .toggle-btn {
  padding: 12px 24px;
  border: none;
  background: transparent;
  border-radius: var(--radius-28);
  font-size: 1.4rem;
  color: var(--color-text);
}

#pricing-home .toggle-btn.active {
  background-color: var(--color-primary);
  color: white;
}

#pricing-home .pricing-card {
  border-radius: var(--radius-24);
  padding: 3rem 2.5rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: all 0.3s linear;
}

#pricing-home .pricing-card.featured::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(
      2.5px 2.5px at 25% 65%,
      rgba(255, 255, 255, 0.7),
      transparent
    ),
    radial-gradient(3px 3px at 80% 45%, rgba(255, 255, 255, 0.8), transparent),
    radial-gradient(2px 2px at 50% 15%, rgba(255, 255, 255, 0.6), transparent),
    radial-gradient(
      2.5px 2.5px at 90% 75%,
      rgba(255, 255, 255, 0.5),
      transparent
    );
  background-size: 100% 100%;
  background-repeat: no-repeat;
  z-index: -1;
}

#pricing-home .pricing-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

#pricing-home .pricing-card.featured {
  background: var(--color-primary);
}

#pricing-home .best-choice {
  position: absolute;           
  background: #fff;     
  color: #000!important;         
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 1.2rem;
  font-weight: bold;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;

  box-shadow: 0 4px 10px rgba(0,0,0,0.15),
              0 2px 5px rgba(0,0,0,0.1);
}

#pricing-home .plan-name {
  font-size: 1.4rem;
  margin-bottom: 1rem;
}

#pricing-home .price-container {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 2rem;
}

#pricing-home .plan-price {
  font-size: 4rem;
  font-weight: 700;
}

#pricing-home .plan-period {
  font-size: 1.4rem;
  color: #6e6e6e;
}

#pricing-home .pricing-card.featured .plan-period {
  color: #ffffff;
}

#pricing-home .plan-description {
  font-size: 1.2rem;
  color: #6e6e6e;
  margin-bottom: 3rem;
  line-height: 1.4;
}

#pricing-home .pricing-card.featured .plan-description {
  color: #ffffff;
}

#pricing-home .plan-features {
  margin-bottom: 3rem;
}

#pricing-home .plan-features li {
  display: flex;
  align-items: center;
  margin-bottom: 1.5rem;
  font-size: 1.2rem;
  color: #6e6e6e;
}

#pricing-home .pricing-card.featured li {
  color: #ffffff;
}

#pricing-home .feature-icon {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 1rem;
  font-size: 1.2rem;
  font-weight: 600;
  flex-shrink: 0;
}

#pricing-home .feature-icon.check {
  background: var(--color-primary);
  color: white;
}

#pricing-home .feature-icon.cross {
  background: transparent;
  border: 1px solid #dc354540;
  color: var(--color-text);
}

#pricing-home .pricing-card.featured .feature-icon.check {
  background: white;
  color: var(--color-primary);
}

#pricing-home .explore-btn {
  width: 100%;
  padding: 15px 24px;
  background: transparent;
  border: 2px solid #e9ecef;
  border-radius: var(--radius-24);
  font-size: 1.4rem;
  font-weight: 600;
  transition: all 0.3s ease-in-out;
}

#pricing-home .explore-btn:hover {
  background: var(--color-primary);
  color: white;
  border-color: var(--color-primary);
}

/* The featured card carries Bootstrap's .text-white, so everything inside
   it inherits white - including this button's label, which sits on a white
   background. The result was a blank white pill with an invisible "Explore
   Plans" on it. The colour has to be stated here, not inherited. */
#pricing-home .pricing-card.featured .explore-btn {
  background: white;
  border-color: white;
  color: var(--color-primary);
}

/* On hover the background turns black, so the label has to flip back. */
#pricing-home .pricing-card.featured .explore-btn:hover {
  background: var(--color-primary);
  color: white;
}

/*//////////////////// FEATURES SECTION ////////////////////////////*/
/* //////////////////////////////////////////////////////////////// */
#features-common .list-wrapper {
  background-color: var(--color-light-gray);
  border-radius: var(--radius-24);
  padding: 2rem;
}

.feature-check {
  width: 20px;
  height: 20px;
  background-color: var(--color-primary);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 12px;
}

/*//////////////////// POPULAR DOMAINS SECTION /////////////////////////*/
/* //////////////////////////////////////////////////////////////////// */
.domain-card {
  background: white;
  padding: 3rem 2rem;
  border-radius: var(--radius-18);
  box-shadow: var(--shadow-sm);
  border: 2px solid #f1f3f4;
  transition: var(--transition-base);
  height: 100%;
  position: relative;
  overflow: hidden;
}

.domain-card:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-lg);
}

.domain-card .domain-info {
  margin-bottom: 2rem;
}

.domain-card .domain-name {
  font-size: 3rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 1rem;
}

.domain-card .domain-price {
  font-size: 2rem;
  font-weight: 600;
  margin-bottom: 0;
}

.domain-card .domain-select-btn {
  padding: 1.2rem 2rem;
  background: var(--color-primary);
  color: white;
  border: none;
  border-radius: var(--radius-16);
  font-size: 1.4rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition-base);
  width: 100%;
}

.domain-card .domain-select-btn:hover {
  background: #333333;
  transform: translateY(-2px);
}

.domain-card .ellipse {
  position: absolute;
  border-radius: 50%;
  background-color: #0000000f;
}

.domain-card .ellipse-1 {
  top: -5rem;
  right: -2rem;
  width: 10rem;
  height: 10rem;
}

.domain-card .ellipse-2 {
  top: 3.4rem;
  right: -3rem;
  width: 5rem;
  height: 5rem;
}

/*//////////////////// COMPARISON PRICING SECTION ////////////////////////////*/
/* ////////////////////////////////////////////////////////////////////////// */
.comparison-pricing {
  padding: 5rem 5%;
  background-color: var(--color-light-gray);
}

/*//////////// DEDICATED FEATURES SECTION /////////////////////*/
/* /////////////////////////////////////////////////////////// */
#dedicated-features .card-item {
  border-radius: var(--radius-24);
  overflow: hidden;
  box-shadow: var(--drop-shadow);
  transition: 0.3s linear;
  padding: 1.6rem;
}

#dedicated-features figure {
  height: 30rem;
  position: relative;
}

#dedicated-features figure::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(
      14px at 60% 14%,
      #0000001a 100%,
      transparent 100%
    ),
    radial-gradient(8px at 25% 85%, #0000001a 100%, transparent 100%),
    radial-gradient(8px at 7% 45%, #0000001a 100%, transparent 100%);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

#dedicated-features figure img {
  transition: 0.3s linear;
  object-fit: fill;
  width: 60%;
}

#dedicated-features .card-item:hover img {
  transform: scale(1.05);
}

#dedicated-features .card-title {
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: 0;
  gap: 0.4rem;
  margin-bottom: 1rem;
}

#dedicated-features .card-desc {
  font-size: 1.4rem;
  color: var(--color-text);
  margin-bottom: 2rem;
}

/*//////////////////// FAQ SECTION ////////////////////////////*/
/* /////////////////////////////////////////////////////////// */
.faq-section {
  background-color: #f6f6f6;
}

.accordion-item {
  border-radius: 22px !important;
  overflow: hidden;
  box-shadow: 0 0 31px #184f7817;
  border: none;
}

.accordion-header button {
  font-size: 2rem;
  font-weight: 600;
  padding: 3.5rem;
}

.accordion-icon {
  transition: transform 0.3s ease;
  background-color: #e6e6e66b;
  padding: 1rem;
  border-radius: 50%;
  font-size: 1.3rem;
}

.accordion-button:not(.collapsed) .accordion-icon {
  transform: rotate(180deg);
}

.accordion-button:focus {
  box-shadow: none;
  border-color: rgba(0, 0, 0, 0.125);
}

.accordion-button {
  border: none;
}

.accordion-button::after {
  display: none;
}

.accor-desc {
  color: var(--color-text);
  font-size: 1.8rem;
}

/*//////////////////// TESTIMONIALS SECTION ////////////////////////////*/
/* //////////////////////////////////////////////////////////////////// */
#testimonials-section .section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 40px 50px 20px;
}

#testimonials-section .nav-controls {
  display: flex;
  gap: 12px;
}

#testimonials-section .nav-btn {
  width: 48px;
  height: 48px;
  border: 2px solid #e5e7eb;
  background: #f0f0f0;
  border-radius: var(--radius-16);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 36px;
  color: #6b7280;
}

#testimonials-section .nav-btn:hover:not(.disabled) {
  border-color: #000;
  color: #fff;
  transform: scale(1.05);
}

#testimonials-section .nav-btn.active {
  background: #1f2937;
  border-color: #1f2937;
  color: white;
}

#testimonials-section .nav-btn.disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.testimonials-container {
  padding: 20px 50px 50px;
  overflow: hidden;
}

.testimonials-wrapper {
  position: relative;

  padding-top: 4rem;
  padding-bottom: 2rem;
}

.testimonials-track {
  display: flex;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.testimonial-card {
  min-width: calc(33.333% - 20px);
  border-radius: var(--radius-16);
  padding: 0 3rem 3rem;
  margin-right: 30px;
  box-shadow: var(--drop-shadow);
  border: 0.8px solid #00000010;
  opacity: 0.6;
  transition: all 0.3s linear;
}

#testimonials-section .testimonial-card.active {
  opacity: 1;
}

.testimonial-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}

.testimonial-card.active {
  background-color: #fff;
  transform: scale(1.05);
}

.testimonial-card figure {
  margin-bottom: 0;
}

#testimonials-section .avatar {
  width: 6.4rem;
  height: 6.4rem;
  border-radius: 50%;
  margin: 0 auto 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin-top: -3rem;
  border: 1px solid var(--color-text);
  overflow: hidden;
}

.testimonial-text {
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text);
}

#testimonials-section .star {
  color: #fbbf24;
  font-size: 16px;
}

#testimonials-section .author-name {
  font-weight: 600;
  color: #1f2937;
  font-size: 14px;
}

#testimonials-section .author-title {
  color: #6b7280;
  font-size: 13px;
}

#testimonials-section .dots-container {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 32px;
  flex-wrap: wrap;
}

#testimonials-section .dot {
  width: 33px;
  height: 7px;
  border-radius: var(--radius-16);
  background: #6e6e6e33;
  cursor: pointer;
}

#testimonials-section .dot.active {
  background: var(--color-primary);
}

/* /////////////////// CHOICE HOME STYLES /////////////// */
/* /////////////////////////////////////////////////////// */
#choice-home .cards-container .card-item , #choice-home-alt .cards-container .card-item {
  border-radius: var(--radius-24);
  box-shadow: var(--drop-shadow);
  gap: 2rem;
  overflow: hidden;
  transform: rotate(0deg);
  transition: all 0.3s ease;
}

#choice-home .cards-container .card-item:hover , #choice-home-alt .cards-container .card-item:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1) !important;
}

#choice-home .cards-container .card-num , #choice-home-alt .cards-container .card-num {
  border-radius: 50%;
  transition: transform 0.3s ease;
}

.card-item:hover .card-num {
  transform: scale(1.1) rotate(10deg);
}

#choice-home .cards-container .card-num span , #choice-home-alt .cards-container .card-num span {
  background-color: #f3f3f3;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  height: 4rem;
  width: 4rem;
  border-radius: 50%;
  font-size: 1.4rem;
  font-weight: 600;
}

#choice-home .cards-container .card-title , #choice-home-alt .cards-container .card-title {
  font-size: 1.8rem;
  transform: rotate(0deg);
  transition: 0.3s ease;
}

#choice-home .cards-container .card-desc , #choice-home-alt .cards-container .card-desc {
  font-size: 1.2rem;
  padding-right: 2rem;
  color: var(--color-text);
  margin-bottom: 0;
}

#choice-home .card-item:hover , #choice-home-alt .card-item:hover {
  background-color: var(--color-primary);
}

#choice-home .card-item:hover .card-title , #choice-home-alt .card-item:hover .card-title {
  color: #fff;
}

#choice-home .card-item:hover .card-desc , #choice-home-alt .card-item:hover .card-desc {
  color: var(--color-text-dark);
}

/*//////////////////// BEST PLAN SECTION ////////////////////////*/
/* ///////////////////////////////////////////////////////////// */
#best-plan-section .toggle-switch {
  background-color: #f1f3f4;
  border-radius: var(--radius-16);
  position: relative;
  display: inline-flex;
}

#best-plan-section .toggle-option {
  padding: 8px 24px;
  border: none;
  background: transparent;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border-radius: var(--radius-16);
  transition: all 0.3s ease;
}

#best-plan-section .toggle-option.active {
  background-color: #000;
  color: white;
}

#best-plan-section .price-box {
  padding: 5rem 5%;
  border-radius: var(--radius-24);
}

#best-plan-section .price-box h2 {
  font-size: calc(6rem + 0.9vw);
}

#best-plan-section .price-box .plus-sign {
  font-size: 5rem;
}

/* Price range styling */
#best-plan-section .price-range {
  width: 100%;
  height: 4px;
  border-radius: 5px;
  background: #e5e7eb;
  position: relative;
  margin-bottom: 8rem;
}

#best-plan-section .price-range::-webkit-slider-thumb {
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #000;
  cursor: pointer;
  border: none;
}

#best-plan-section .price-range::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #000;
  cursor: pointer;
  border: none;
}

/* Tooltip for price slider */
#best-plan-section .price-tooltip {
  position: absolute;
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  padding: 8px 16px;
  font-weight: 600;
  transform: translateX(-50%);
  top: 40px;
  display: none;
  white-space: nowrap;
  z-index: 10;
}

#best-plan-section .price-tooltip::after {
  content: "";
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid #dee2e6;
}

/*//////////////////// BLOG SECTION ////////////////////////////*/
/* ///////////////////////////////////////////////////////////// */
#blog-section .blog-image {
  height: 40rem;
}

#blog-section .blog-tag:hover {
  background: var(--color-secondary) !important;
  color: white !important;
}

#blog-section .social-icons li a {
  background-color: var(--color-light-gray);
  height: 4rem;
  width: 4rem;
  border-radius: 50%;
}

#blog-section .sidebar-title {
  position: relative;
  border-bottom: 1px dotted;
}

#blog-section .latest-post-item,
#blog-section .latest-post-title,
#blog-section .blog-tag,
#blog-section .blog-title,
#blog-section .category-link {
  transition: var(--transition-base);
}

#blog-section .latest-post-item img {
  height: 6rem;
  width: 6rem;
}

#blog-section .category-item {
  transition: var(--transition-base);
  border-radius: var(--radius-16);
}

#blog-section .category-item:hover .category-link,
#blog-section .latest-post-item:hover {
  transform: translateX(5px);
}

/* /////// pagination style //////// */
.pagination .page-item .page-link {
  color: black;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  margin: 0 0.25rem;
  padding: 6px 1.3rem;
  font-size: 1.4rem;
}

.pagination .page-item.active .page-link,
.pagination .page-item:hover .page-link {
  background-color: black;
  color: white;
  border-color: black;
}

/*//////////////////// MEDIA QUERIES ////////////////////////////*/
/* ///////////////////////////////////////////////////////////// */
@media only screen and (max-width: 1079px) {
}

@media (max-width: 1023px) {
  .testimonial-card {
    min-width: calc(50% - 15px);
  }
}

@media only screen and (max-width: 991px) {
  #best-plan-section .price-box {
    padding: 3rem 2%;
  }

  #best-plan-section .price-box h2 {
    font-size: calc(3rem + 0.5vw);
  }

  #best-plan-section .price-box .plus-sign {
    font-size: 3rem;
  }

  #best-plan-section .price-box small {
    font-size: 1.2rem !important;
    white-space: nowrap;
  }
}

@media (max-width: 767px) {
  #hero-common {
    height: 25rem;
  }

  #pricing-home .plan-features li,
  #pricing-home .plan-description {
    font-size: 1.5rem;
  }

  #testimonials-section .section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    padding: 30px 30px 20px;
  }

  .testimonials-container {
    padding: 20px 30px 40px;
  }

  .testimonial-card {
    min-width: calc(100% - 0px);
    margin-right: 0;
  }

  .comparison-pricing {
    padding: 3rem 5%;
  }

  #blog-section .blog-image {
    height: 200px;
  }

  #best-plan-section .price-box {
    padding: 3rem 0%;
  }

  #best-plan-section .price-box h2 {
    font-size: calc(2rem + 0.5vw);
  }

  #best-plan-section .price-box .plus-sign {
    font-size: 1.4rem;
  }

  #best-plan-section .price-tooltip span {
    font-size: 1rem;
  }
}

@media only screen and (max-width: 640px) {
  #best-plan-section .price-box small {
    font-size: 9px !important;
  }
}

@media only screen and (max-width: 479px) {
}





.text-darkgray {
	color: #272727;
}







html, body, .scroll-area, * {
  scrollbar-width: thin;  
  scrollbar-color: #a8a8a8 #111;
}

*::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

*::-webkit-scrollbar-track {
  background: #111;
}

*::-webkit-scrollbar-thumb {
  border-radius: 10px;
  border: 2px solid #111;
  background: linear-gradient(
    to bottom,
    #e0e0e0 0%,
    #cfcfcf 25%,
    #bfbfbf 50%,
    #9a9a9a 75%,
    #444444 100%
  );
}

*::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(
    to bottom,
    #f5f5f5 0%,
    #dcdcdc 25%,
    #c8c8c8 50%,
    #a5a5a5 75%,
    #333333 100%
  );
}



#map-section {
	
	padding-bottom: 0px;
	
}






#why-choose-us .features-grid, #about-values .features-grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:1.25rem;
}


#why-choose-us .feature, #about-values .feature{
  grid-column:span 6;
  display:grid;
  grid-template-columns:auto 1fr;
  gap:1rem;
  align-items:start;
  padding:1.1rem;
  border-radius:14px;

  background:
    linear-gradient(var(--card), var(--card)) padding-box,
    linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,.22), rgba(255,255,255,.06)) border-box;
  border:1px solid transparent;

  position:relative;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 8px 26px rgba(0,0,0,.10);

  transition:
    transform .3s ease,
    box-shadow .3s ease,
    filter .3s ease;
  will-change: transform, box-shadow;
  transform-origin:center;
  padding-top: 30px;
  padding-bottom: 30px;
  padding-left: 30px;
}
@media (max-width:991px){
  #why-choose-us .feature, #about-values .feature{ grid-column:span 12; }
}

#why-choose-us .feature::after, #about-values .feature::after{
  content:"";
  position:absolute; inset:-1px; border-radius:14px;
  background: linear-gradient(120deg, transparent 25%, rgba(255,255,255,.08) 40%, rgba(255,255,255,.02) 60%, transparent 75%);
  transform: translateX(-120%);
  transition: transform .6s ease;
  pointer-events:none;
}
#why-choose-us .feature:hover::after, #about-values .feature:hover::after{
  transform: translateX(120%);
}

#why-choose-us .feature:hover, #about-values .feature:hover{
  transform: translateY(-4px) scale(1.01);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 14px 40px rgba(0,0,0,.18); 
}


#why-choose-us .icon-wrap, #about-values .icon-wrap{
  width:56px; height:56px; border-radius:50%;
  display:grid; place-items:center;
  position:relative; isolation:isolate;
  background: radial-gradient(60% 60% at 50% 50%, #151515 0%, #0f0f0f 100%);
  overflow:hidden;
  transition: transform .3s ease;
}
#why-choose-us .feature:hover .icon-wrap, #about-values .feature:hover .icon-wrap{
  transform: translateY(-2px);
}


#why-choose-us .icon-wrap::before, #about-values .icon-wrap::before{
  content:"";
  position:absolute; inset:-2px; border-radius:inherit;
  background:
    conic-gradient(from 0deg, var(--ring1), var(--ring2), var(--ring3), var(--ring2), var(--ring1));
  -webkit-mask: radial-gradient(circle at center, transparent 66%, #000 67%);
          mask: radial-gradient(circle at center, transparent 66%, #000 67%);
  animation: rotateRing 3.5s linear infinite;
  opacity:.9;
}
@keyframes rotateRing{ to{ transform: rotate(360deg); } }

#why-choose-us .icon, #about-values .icon{
  width:28px; height:28px;
  filter: drop-shadow(0 1px 2px rgba(255,255,255,.06));
}


#why-choose-us .feature-title, #about-values .feature-title{
  margin:0 0 .25rem; font-weight:700;
}
#why-choose-us .feature-description, #about-values .feature-description{
  margin:0; color: var(--color-text); line-height:1.6;
}


#why-choose-us .ribbon, #about-values .ribbon{
  margin-top:1.75rem;
  display:inline-flex; align-items:center; gap:.6rem;
  font-weight:600; color:#dcdcdc;
  padding:.6rem 1rem; border-radius:999px;
  background:
    linear-gradient(#121212, #121212) padding-box,
    linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,.22), rgba(255,255,255,.06)) border-box;
  border:1px solid transparent;
}
#why-choose-us .ribbon .dot, #about-values .ribbon .dot{
  width:8px; height:8px; border-radius:50%;
  background: radial-gradient(circle at 30% 30%, #fff, #bfbfbf 45%, #7a7a7a 80%);
}


@media (prefers-reduced-motion: reduce){
  #why-choose-us .feature, #about-values .feature,
  #why-choose-us .feature::after, #about-values .feature::after,
  #why-choose-us .icon-wrap, #about-values .icon-wrap{ transition:none; animation:none; }
  #why-choose-us .feature:hover, #about-values .feature:hover{ transform: translateY(-3px); }
}

/* ==========================================================================
   Site preloader. Global component now — every page shows it, not just the
   homepage, so it lives here rather than in home.css.
   ========================================================================== */
#preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

/* ==========================================================================
   Closing CTA band. Shared component - About and Infrastructure both end
   with one, and any future page can. Lives here rather than in about.css
   so a second page does not have to pull in a page-specific stylesheet.
   ========================================================================== */

/* ---------- Closing CTA ---------- */

.cta-band__box {
  text-align: center;
  padding: 5.6rem 3.2rem;
  border-radius: var(--radius-24);
  background: #0d0d0d;
  color: #fff;
}

.cta-band__title {
  font-size: 2.9rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 1.44rem;
}

.cta-band__text {
  color: rgba(255, 255, 255, 0.72);
  max-width: 52ch;
  margin: 0 auto 3.2rem;
  line-height: 1.7;
}

.cta-band__actions {
  display: flex;
  gap: 1.6rem;
  justify-content: center;
  flex-wrap: wrap;
}

.cta-band__btn {
  display: inline-block;
  padding: 1.52rem 3.52rem;
  border-radius: var(--radius-16);
  font-weight: 600;
  text-decoration: none;
  transition: var(--transition-base);
}

.cta-band__btn--primary {
  background: #fff;
  color: var(--color-primary);
}

.cta-band__btn--ghost {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.35);
}

.cta-band__btn:hover {
  transform: translateY(-2px);
}

.cta-band__btn--primary:hover {
  color: var(--color-primary);
  box-shadow: 0 10px 26px rgba(255, 255, 255, 0.18);
}

.cta-band__btn--ghost:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.7);
}


@media (max-width: 575px) {
  .cta-band__box {
    padding: 4rem 2rem;
  }
  .cta-band__title {
    font-size: 2.3rem;
  }
}


/* ==========================================================================
   Infrastructure: "what we deliberately don't do".

   A two-column list of anti-claims. Deliberately plainer than the card grid
   above it on the same page - the point is that it reads as a set of
   straight statements rather than another marketing panel.
   ========================================================================== */

.infra-honest__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.8rem 4rem;
}

@media (max-width: 991px) {
  .infra-honest__list {
    grid-template-columns: 1fr;
    gap: 2.4rem;
  }
}

.infra-honest__list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.44rem;
  align-items: start;
}

.infra-honest__list iconify-icon {
  font-size: 2.56rem;
  color: var(--color-primary);
  margin-top: 0.08rem;
}

.infra-honest__list strong {
  display: block;
  font-size: 1.68rem;
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1.4;
  margin-bottom: 0.56rem;
}

.infra-honest__list span {
  display: block;
  color: var(--color-text);
  line-height: 1.65;
}


/* ==========================================================================
   Domain pricing table.

   Sits under the featured cards on domains.html and lists every extension
   we actually sell. Deliberately plain: it is a reference table people
   scan for a number, not another marketing panel. Sizes use this theme's
   62.5% root (1rem = 10px).
   ========================================================================== */

.domains-intro {
  color: var(--color-text);
  font-size: 1.6rem;
  line-height: 1.7;
  max-width: 68ch;
  margin-bottom: 0.8rem;
}

.tld-table {
  margin-top: 5.6rem;
}

.tld-table__heading {
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 2.4rem;
}

.tld-group {
  margin-bottom: 3.2rem;
}

.tld-group__title {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding-bottom: 0.8rem;
  margin-bottom: 1.6rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.tld-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.8rem 2.4rem;
}

@media (max-width: 991px) {
  .tld-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575px) {
  .tld-list { grid-template-columns: 1fr; }
}

.tld-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.2rem;
  padding: 0.8rem 0;
  border-bottom: 1px dotted rgba(0, 0, 0, 0.12);
}

.tld-list .tld {
  font-weight: 600;
  color: var(--color-primary);
  font-size: 1.55rem;
}

.tld-list .amt {
  color: var(--color-text);
  font-size: 1.5rem;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.domains-note {
  margin-top: 3.2rem;
  color: var(--color-text);
  font-size: 1.45rem;
  line-height: 1.7;
  max-width: 78ch;
}

/* ==========================================================================
   Preloader mark: one server tower orbiting the other.

   The wordmark and the progress bar are gone. The bar was measuring gates
   that finish in an unpredictable order, so in practice it showed a jump
   from a third to full; the mark says "working" without claiming to know how
   far along it is.

   The two shapes are the favicon's own paths - a solid tower and a lighter
   one at 75% - inlined rather than linked, so the loading screen does not
   itself wait on a request and the two can be moved independently.

   The motion is a circle seen edge-on: horizontal position follows the sine
   of the angle, depth follows the cosine and is expressed as scale - largest
   at the near point, smallest at the far one. The depth ORDER changes with
   it, and that part is stepped rather than eased. There is no halfway
   between passing in front and passing behind, and easing it is exactly what
   makes this kind of animation read as two flat shapes sliding past each
   other rather than one object going around another.
   ========================================================================== */
#preloader .preloader-mark {
  position: relative;
  display: grid;
  width: 150px;
  height: 104px;
  place-items: center;
}

#preloader .preloader-tower {
  grid-area: 1 / 1;
  width: 62px;
  height: auto;
  overflow: visible;
  transform-origin: 50% 50%;
}

#preloader .preloader-tower--solid {
  fill: #ffffff;
  z-index: 1;
}

#preloader .preloader-tower--ghost {
  fill: #cccccc;
  animation:
    everonOrbitPath 3.6s cubic-bezier(0.45, 0, 0.55, 1) infinite,
    everonOrbitDepth 3.6s step-end infinite;
}

/* The orbit has to be centred on the SOLID tower, and the two shapes are not
   concentric: inside its own 256-unit viewBox the solid spans 0-176 and the
   ghost spans 96-256, so at the same size and position the ghost already sits
   about 21px to the right of the solid centre. Orbiting from where it lands
   naturally just wobbles it on the right-hand side and never takes it around.
   Every step below is that 21px correction plus the sine of the angle. */
@keyframes everonOrbitPath {
  /* near point - over the solid, largest, in front */
  0%   { transform: translateX(-21px) scale(1.14); opacity: 0.9; }
  /* swung out right, mid depth */
  25%  { transform: translateX(5px) scale(1); opacity: 0.8; }
  /* far point - over the solid, smallest, behind */
  50%  { transform: translateX(-21px) scale(0.76); opacity: 0.5; }
  /* swung out left */
  75%  { transform: translateX(-47px) scale(1); opacity: 0.8; }
  100% { transform: translateX(-21px) scale(1.14); opacity: 0.9; }
}

@keyframes everonOrbitDepth {
  0%   { z-index: 2; }
  25%  { z-index: 0; }
  75%  { z-index: 2; }
  100% { z-index: 2; }
}

/* A loading screen is the one place a visitor cannot navigate away from, so
   an animation someone asked not to see matters more here than anywhere
   else. The mark holds at the near point, the frame that reads best still. */
@media (prefers-reduced-motion: reduce) {
  #preloader .preloader-tower--ghost {
    animation: none;
    transform: translateX(-4px) scale(0.98);
    opacity: 0.75;
    z-index: 2;
  }
}

/* ==========================================================================
   Plan comparison table

   The previous version set border-spacing: 10px on a separated table and
   gave every cell its own radius and shadow, so a comparison of three plans
   arrived as forty-four floating cards. Columns never lined up as columns,
   and with every cell carrying identical weight there was nothing to follow
   across a row or down a plan.

   It is one surface now: collapsed borders, hairline rules, a header that
   holds the price and the button, and the recommended plan marked as a
   column rather than left for the reader to work out.
   ========================================================================== */
.comparison-table {
  border-collapse: collapse;
  min-width: 860px;
  background: #fff;
  font-size: 1.35rem;
}

/* --- header ------------------------------------------------------------ */
/* The tag made its own column taller, so the three Order Now buttons sat at
   two different heights. Space for it is reserved in every header and the
   tag is lifted out of the flow, which lines the columns up whether they
   carry one or not. */
.comparison-table thead th {
  position: relative;
  padding: 62px 20px 30px;
  vertical-align: top;
  text-align: center;
  border-bottom: 1px solid rgba(16, 32, 56, 0.1);
  background: #fff;
}

.comparison-table thead th span { display: block; }

/* The corner cell used to repeat the section heading word for word. It is a
   label for the column beneath it, not a second title. */
.comparison-table thead th:first-child {
  text-align: left;
  padding-left: 28px;
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8b93a3;
  vertical-align: middle;
}

.comparison-table .plan-name {
  font-size: 1.45rem;
  font-weight: 700;
  color: #101a2b;
  margin-bottom: 10px;
}

.comparison-table .plan-price {
  font-size: 2.6rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  color: #101a2b;
  font-variant-numeric: tabular-nums;
}

.comparison-table .plan-period {
  font-size: 1.15rem;
  color: #8b93a3;
  margin: 8px 0 22px;
}

.comparison-table thead .btn {
  min-width: 148px;
}

/* --- body -------------------------------------------------------------- */
.comparison-table tbody td {
  padding: 16px 20px;
  text-align: center;
  border-bottom: 1px solid rgba(16, 32, 56, 0.07);
  color: #465061;
  font-variant-numeric: tabular-nums;
}

.comparison-table tbody td:first-child {
  text-align: left;
  padding-left: 28px;
  font-weight: 600;
  color: #101a2b;
}

.comparison-table tbody tr:last-child td { border-bottom: 0; }

/* Alternating rows do the work the old gaps were trying to do: they carry
   the eye across a row without drawing forty-four boxes. */
.comparison-table tbody tr:nth-child(even) td {
  background: rgba(16, 32, 56, 0.022);
}

/* --- the recommended column -------------------------------------------
   Third cell in every row, which is the middle plan on both pages. Marked
   in CSS rather than with a class on each of the cells, so adding a row
   cannot forget it.
   ---------------------------------------------------------------------- */
.comparison-table thead th:nth-child(3),
.comparison-table tbody td:nth-child(3) {
  background: rgba(56, 130, 255, 0.045);
  box-shadow:
    inset 1px 0 0 rgba(56, 130, 255, 0.16),
    inset -1px 0 0 rgba(56, 130, 255, 0.16);
}

.comparison-table tbody tr:nth-child(even) td:nth-child(3) {
  background: rgba(56, 130, 255, 0.07);
}

.comparison-table thead th:nth-child(3) {
  box-shadow:
    inset 1px 0 0 rgba(56, 130, 255, 0.16),
    inset -1px 0 0 rgba(56, 130, 255, 0.16),
    inset 0 3px 0 var(--color-accent, #3882ff);
}

.comparison-table tbody tr:last-child td:nth-child(3) {
  box-shadow:
    inset 1px 0 0 rgba(56, 130, 255, 0.16),
    inset -1px 0 0 rgba(56, 130, 255, 0.16),
    inset 0 -1px 0 rgba(56, 130, 255, 0.16);
}

.comparison-table .plan-tag {
  position: absolute;
  top: 26px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-block;
  /* One line, always. Wrapped, it grows past the top padding reserved for
     it and lands on the plan name - which is what happened on a 390px
     screen, on the one column the tag is meant to draw attention to. */
  white-space: nowrap;
  padding: 4px 12px;
  border-radius: 999px;
  background: #3882ff;
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* --- included / not included ------------------------------------------- */
.comparison-table .feature-check,
.comparison-table .feature-cross {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  font-size: 1.1rem;
  line-height: 1;
}

/* Blue rather than the black disc it was: this is the site's one accent, and
   a tick is a positive mark, not a full stop. */
.comparison-table .feature-check {
  background: rgba(56, 130, 255, 0.12);
  color: #2f6fe0;
}

.comparison-table .feature-cross {
  background: rgba(16, 32, 56, 0.05);
  color: #a8b0bf;
}

@media (max-width: 991px) {
  .comparison-table {
    font-size: 1.2rem;
    /* 860px meant four columns of roughly 215px and a long sideways scroll on
       a phone. Narrower columns still hold "30 (2 GB each)" on one line. */
    min-width: 660px;
  }

  /* The tag is positioned absolutely and the desktop rule reserves top
     padding for it. This block used to reset padding to 20px, which put the
     tag straight on top of the plan name - on the one column that carries
     it, which is the column being drawn attention to. */
  .comparison-table thead th { padding: 46px 12px 20px; }
  .comparison-table .plan-tag { top: 16px; font-size: 0.92rem; padding: 3px 10px; }
  .comparison-table tbody td { padding: 13px 12px; }
  .comparison-table .plan-price { font-size: 1.95rem; }
  .comparison-table .plan-name { font-size: 1.3rem; }
  .comparison-table thead .btn { min-width: 0; width: 100%; padding-inline: 10px; }

  /* Freeze the feature column. Scrolling sideways used to carry the row
     labels off-screen with it, leaving columns of numbers and ticks with
     nothing to say what they measured. */
  .comparison-table thead th:first-child,
  .comparison-table tbody td:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    padding-left: 16px;
    padding-right: 12px;
    background: #fff;
    /* A hairline rather than a shadow: it marks the frozen edge without
       implying the column is floating above the rest. */
    box-shadow: 1px 0 0 rgba(16, 32, 56, 0.12);
  }

  .comparison-table thead th:first-child { z-index: 3; }

  /* The striping is a translucent tint, which would let the scrolling
     columns show through the frozen cell. Same colour, composited. */
  .comparison-table tbody tr:nth-child(even) td:first-child { background: #fafafb; }
}

/* The wrapper keeps the rounding and the clipping; the shadow moves here
   from the individual cells, where forty-four of them were the problem. */
.comparison-shell {
  background: #fff;
  border: 1px solid rgba(16, 32, 56, 0.08);
  box-shadow: 0 2px 6px rgba(16, 32, 56, 0.04), 0 18px 40px rgba(16, 32, 56, 0.07);
}