/* ==========================================================================
   TECHAOT TECHNOLOGIES — inner page styles
   Loaded after style.css on every page. Only holds what the multi-page
   layout needs on top of the theme: the page banner, the works grid and
   the contact page blocks.
   ========================================================================== */

/* ---------- Inner page banner ---------- */
.page-title {
  background-image: url("../images/main-slider/main-bg.jpg");
  padding: 190px 0 100px;
  min-height: auto;
  text-align: center;
}

.page-title .auto-container {
  position: relative;
  z-index: 2;
}

.page-title .title {
  font-size: 48px;
  line-height: 1.2;
}

.page-title .text {
  max-width: 720px;
  margin: 0 auto;
}

.page-title .page-breadcrumb {
  margin-top: 18px;
}

@media only screen and (max-width: 768px) {
  .page-title {
    padding: 150px 0 80px;
  }

  .page-title .title {
    font-size: 32px;
  }
}

/* ---------- Works grid (our-work.html) ---------- */
.work-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
}

.work-grid .work-card {
  width: auto;
  margin: 0;
  flex: none;
}

.work-grid .work-content p {
  margin-bottom: 10px;
}

/* ---------- Contact page ---------- */
.contact-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 30px;
  margin-bottom: 60px;
}

.contact-info-card {
  background: #fff;
  border-radius: 12px;
  padding: 35px 30px;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease;
}

.contact-info-card:hover {
  transform: translateY(-8px);
}

.contact-info-card .icon {
  display: inline-block;
  font-size: 30px;
  color: var(--theme-color2);
  margin-bottom: 15px;
}

.contact-info-card h4 {
  font-size: 18px;
  margin-bottom: 10px;
}

.contact-info-card p,
.contact-info-card a {
  font-size: 15px;
  color: #666;
  line-height: 26px;
  word-break: break-word;
}

.contact-info-card a:hover {
  color: var(--theme-color2);
}

.contact-map iframe {
  width: 100%;
  height: 420px;
  border: 0;
  border-radius: 12px;
  display: block;
}

/* ---------- Shared spacing helpers for inner pages ---------- */
.inner-page-section {
  padding: 90px 0;
}

@media only screen and (max-width: 768px) {
  .inner-page-section {
    padding: 60px 0;
  }
}

/* ---------- Call to action strip ---------- */
.cta-strip {
  background: var(--theme-color2, #1a8cff);
  padding: 60px 0;
  text-align: center;
  color: #fff;
}

.cta-strip h2 {
  color: #fff;
  font-size: 34px;
  margin-bottom: 15px;
}

.cta-strip p {
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 25px;
}

.cta-strip .btn-primary-custom {
  background: #fff;
  color: #111;
}

.cta-strip .btn-primary-custom:hover {
  background: #111;
  color: #fff;
}

@media only screen and (max-width: 768px) {
  .cta-strip h2 {
    font-size: 26px;
  }
}

/* ==========================================================================
   Product showcase (product.html)
   ========================================================================== */
.product-showcase {
  padding: 100px 0;
}

.product-showcase.alt-bg {
  background: #f8fafc;
}

.product-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

.product-media {
  position: relative;
  padding: 40px;
  border-radius: 20px;
  background: linear-gradient(140deg, rgba(56, 182, 255, 0.14), rgba(56, 182, 255, 0.02));
}

.product-media img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(16, 32, 60, 0.16);
}

.product-badge {
  display: inline-block;
  padding: 7px 16px;
  margin-bottom: 18px;
  border-radius: 30px;
  background: rgba(56, 182, 255, 0.12);
  color: var(--theme-color2);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.product-info h2,
.product-info h3 {
  font-size: 40px;
  line-height: 1.2;
  margin-bottom: 18px;
}

/* The home page uses h3 for the product name (the section already has an h2) */
.product-info h3 {
  font-size: 34px;
}

.product-info .lead-text {
  font-size: 17px;
  line-height: 30px;
  color: var(--text-color);
  margin-bottom: 30px;
}

/* Feature bullets */
.product-points {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px 30px;
  margin-bottom: 35px;
}

.product-points li {
  position: relative;
  padding-left: 42px;
  list-style: none;
}

.product-points li i {
  position: absolute;
  left: 0;
  top: 2px;
  width: 28px;
  height: 28px;
  line-height: 28px;
  text-align: center;
  border-radius: 50%;
  background: var(--theme-color2);
  color: #fff;
  font-size: 12px;
}

.product-points h5 {
  font-size: 16px;
  margin-bottom: 4px;
}

.product-points p {
  font-size: 14px;
  line-height: 24px;
  color: var(--text-color);
  margin: 0;
}

/* Buttons */
.product-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

.btn-outline-custom {
  display: inline-block;
  padding: 12px 30px;
  border: 2px solid var(--theme-color2);
  border-radius: 5px;
  color: var(--theme-color2);
  font-weight: 600;
  text-decoration: none;
  transition: 0.3s;
}

.btn-outline-custom:hover {
  background: var(--theme-color2);
  color: #fff;
}

/* How it works steps */
.step-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 30px;
  counter-reset: step;
}

.step-card {
  position: relative;
  background: #fff;
  border-radius: 14px;
  padding: 40px 28px 30px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.07);
  transition: transform 0.3s ease;
}

.step-card:hover {
  transform: translateY(-8px);
}

.step-card:before {
  counter-increment: step;
  content: "0" counter(step);
  position: absolute;
  top: -18px;
  left: 28px;
  width: 46px;
  height: 46px;
  line-height: 46px;
  text-align: center;
  border-radius: 50%;
  background: var(--theme-color2);
  color: #fff;
  font-weight: 700;
  font-size: 15px;
}

.step-card h4 {
  font-size: 18px;
  margin-bottom: 10px;
}

.step-card p {
  font-size: 14px;
  line-height: 25px;
  color: var(--text-color);
  margin: 0;
}

@media only screen and (max-width: 991px) {
  .product-showcase {
    padding: 70px 0;
  }

  .product-row {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .product-info h2,
  .product-info h3 {
    font-size: 30px;
  }
}

@media only screen and (max-width: 575px) {
  .product-media {
    padding: 22px;
  }

  .product-points {
    grid-template-columns: 1fr;
  }

  .product-actions .btn-primary-custom,
  .product-actions .btn-outline-custom {
    width: 100%;
    text-align: center;
  }
}

/* ==========================================================================
   Home page — product section (Pass Point, links through to product.html)
   ========================================================================== */
.home-products {
  padding: 50px 0;
  background: white;
}

/* The bullets under the product use the theme list, tightened up a little */
.home-products .list-style-two {
  margin-bottom: 32px;
}

@media only screen and (max-width: 767px) {
  .home-products {
    padding: 70px 0;
  }
}

/* ---------- Home page — clients preview ---------- */
.clients-preview {
  padding: 90px 0 70px;
  background: #f8fafc;
}

.clients-preview .testimonial-grid {
  margin-top: 90px;
  margin-bottom: 40px;
}

/* ---------- Hero: room for a second button ---------- */
.hero-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

/* The hero sits on a dark photo, so the outline button goes white here */
.hero-buttons .btn-outline-custom {
  border-color: #fff;
  color: #fff;
}

.hero-buttons .btn-outline-custom:hover {
  background: #fff;
  color: #111;
}

@media only screen and (max-width: 768px) {
  .hero-buttons {
    justify-content: center;
  }
}

/* ==========================================================================
   Footer
   The theme's footer text was a mix of black and white, which left the
   copyright line invisible. Everything below re-colours it as one dark
   footer with light text and blue accents (--theme-color2).
   ========================================================================== */
.main-footer {
  position: relative;
  overflow: hidden;
  background: #0d1b2a;
  color: rgba(255, 255, 255, 0.72);
}

/* Keep the theme pattern, but only as a faint texture over the dark base */
.main-footer .bg-pattern-4 {
  opacity: 0.06;
}

.main-footer .widgets-section {
  padding: 80px 0 40px;
}

/* ---------- Brand column ---------- */
.main-footer .footer-logo {
  margin-bottom: 25px;
}

.main-footer .footer-logo img {
  max-width: 180px;
  height: auto;
}

.main-footer .footer-about {
  font-size: 15px;
  line-height: 28px;
  color: rgba(255, 255, 255, 0.66);
  margin-bottom: 22px;
  max-width: 380px;
}

/* Registered company name, stated in full once in the footer */
.main-footer .footer-legal-name {
  color: #fff;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.main-footer .footer-mail {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 20px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 30px;
  color: #fff;
  font-size: 15px;
  transition: all 300ms ease;
}

.main-footer .footer-mail .icon {
  color: var(--theme-color2);
  font-size: 15px;
}

.main-footer .footer-mail:hover {
  background: var(--theme-color2);
  border-color: var(--theme-color2);
  color: #fff;
}

.main-footer .footer-mail:hover .icon {
  color: #fff;
}

/* ---------- Column titles ---------- */
.main-footer .widget-title {
  position: relative;
  color: #fff;
  font-size: 19px;
  font-weight: 600;
  padding-bottom: 14px;
  margin-bottom: 26px;
}

.main-footer .widget-title:after {
  position: absolute;
  content: "";
  left: 0;
  bottom: 0;
  width: 38px;
  height: 3px;
  border-radius: 3px;
  background: var(--theme-color2);
}

/* The theme indents this column; the grid handles spacing here */
.main-footer .services-widget {
  padding-left: 0;
}

/* ---------- Link lists ---------- */
.main-footer .user-links li {
  font-size: 15px;
  line-height: 26px;
  color: rgba(255, 255, 255, 0.72);
  margin-bottom: 12px;
}

.main-footer .user-links li a {
  color: rgba(255, 255, 255, 0.72);
}

.main-footer .user-links li a:hover {
  color: var(--theme-color2);
}

.main-footer .user-links li a:before {
  background-color: var(--theme-color2);
}

/* ---------- Contact list with icons ---------- */
.main-footer .footer-contact li {
  position: relative;
  padding-left: 32px;
  margin-bottom: 18px;
  font-size: 15px;
  line-height: 26px;
  color: rgba(255, 255, 255, 0.72);
  list-style: none;
}

.main-footer .footer-contact li:last-child {
  margin-bottom: 0;
}

.main-footer .footer-contact li .icon {
  position: absolute;
  left: 0;
  top: 3px;
  color: var(--theme-color2);
  font-size: 16px;
}

.main-footer .footer-contact li a {
  color: rgba(255, 255, 255, 0.72);
  transition: all 300ms ease;
  word-break: break-word;
}

.main-footer .footer-contact li a:hover {
  color: var(--theme-color2);
}

/* ---------- Bottom bar ---------- */
.main-footer .footer-bottom .inner-container {
  align-items: center;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 24px 0;
}

.main-footer .footer-bottom .copyright-text {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.6);
}

.main-footer .footer-bottom .copyright-text a {
  color: var(--theme-color2);
}

.main-footer .footer-bottom .copyright-text a:hover {
  color: #fff;
}

.main-footer .footer-bottom .footer-links li a {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.6);
}

.main-footer .footer-bottom .footer-links li a:hover {
  color: var(--theme-color2);
}

@media only screen and (max-width: 991px) {
  .main-footer .widgets-section {
    padding: 60px 0 20px;
  }

  .main-footer .footer-about {
    max-width: 100%;
  }
}

@media only screen and (max-width: 767px) {
  .main-footer .footer-bottom .inner-container {
    flex-direction: column;
    text-align: center;
    gap: 12px;
  }

  .main-footer .footer-bottom .copyright-text {
    order: 2;
  }

  .main-footer .footer-bottom .footer-links {
    justify-content: center;
  }

  .main-footer .footer-bottom .footer-links li {
    margin: 0 12px;
  }
}

/* ---------------------------------------------------------------------------
   Raw-HTML NAP fallback
   ---------------------------------------------------------------------------
   The header and footer are injected by js/layout.js, so the company name,
   address and phone do not exist in the served HTML. Crawlers that do not run
   JavaScript would see none of it. This block puts the details in the raw
   source for them.

   Clipped rather than display:none — hidden text is a spam signal, a clipped
   screen-reader block is not, and it stays available to assistive tech.
--------------------------------------------------------------------------- */
.visually-hidden-nap {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}