/*!
Theme Name: AMPD child
Theme URI: http://underscores.me/
Author: Invictus Studio
Author URI: http://invictusstudio.com/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: alpha
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

alpha is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/
html {
  overflow-x: hidden;
}

:root {
  --navy: #05133f;
  --red: #ff0000;
  --white: #ffffff;
  --blue-250: #0d266b;
  --gray-5: #e8e8e8;
  --gray-200: #6a6a6a;
  --frame-w: 100%;
  --frame-pad-x: 24px;
}

body {
  overflow-x: hidden;
  line-height: 1.5;
  color: #000;
}

ul {
  padding: 0;
  margin: 0;
}

.section {
  padding: 50px 0;
}

a {
  text-decoration: none !important;
  transition: 0.5s ease !important;
}

a,
input,
button {
  outline: 0 !important;
}

.post,
.page {
  margin: 0;
}

body,
p {
  font-weight: 400;
  color: #000;
  font-family: "Proxima Nova Rg";
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: bold;
  font-family: "Proxima Nova Lt";
}

.home .entry-title {
  display: none;
}

ul li,
li {
  list-style: none;
}

.skip-link.screen-reader-text {
  display: none;
}

::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  color: inherit;
  opacity: 1;
}

::-moz-placeholder {
  /* Firefox 19+ */
  color: inherit;
  opacity: 1;
}

:-ms-input-placeholder {
  /* IE 10+ */
  color: inherit;
  opacity: 1;
}

:-moz-placeholder {
  /* Firefox 18- */
  color: inherit;
  opacity: 1;
}

#sidebar {
  display: none;
}

.entry-footer {
  clear: both;
}

#colophon {
  clear: both;
}

/* 404 - NOT FOUND PAGE */

.error-404.not-found {
  text-align: center;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100vw;
  left: 50%;
  margin-left: -50vw;
  position: relative;
  background-image: url(/wp-content/uploads/2020/10/404.jpg);
  background-size: cover;
}

.not_found_inner {
  max-width: 69.5%;
}

.error404 #masthead,
.error404 #colophon {
  display: none;
}

.logo a {
  outline: 0 !important;
}

.error-404.not-found .logo {
  padding: 0;
  background-color: transparent;
}

.error-404.not-found h1 {
  font-size: 200px;
  line-height: 1;
  color: #404040;
  margin: 30px 0;
  font-weight: 800;
}

.error-404.not-found h1 span {
  color: #e01e26;
}

.page-header h3 {
  color: #000;
  font-weight: 700;
  margin-bottom: 10px;
  font-size: 40px;
}

.page-header p {
  font-size: 22px !important;
  color: #000;
  margin-bottom: 20px;
}

.page-content .return_home {
  background-color: #e01e26;
  color: #fff;
  padding: 20px 50px;
  display: inline-block;
  font-size: 20px;
  box-shadow: 0 2px 10px 0px rgba(0, 0, 0, 0.5);
  text-decoration: none;
  transition: all 0.5s ease-in-out;
  border: 2px solid #e01e26;
}

.page-content .return_home:hover {
  transform: translateY(-3px);
  background-color: transparent;
  color: #000;
  transform: scale(1.1);
}

/* 404 - NOT FOUND PAGE ENDS */

/*SEARCH RESULTS - NO RESULTS CSS */

.search-results article.product,
.search-results article.page {
  display: none;
}

.search-results .page-title span::before,
.search-results .page-title span::after {
  content: '"';
}

.search-results .page-title {
  font-weight: bold;
  font-size: 28px;
  text-align: center;
  margin-bottom: 30px;
}

.search-results .page-header {
  width: 100%;
}

.search-results #primary {
  display: flex;
  flex-wrap: wrap;
}

.search-results #primary article {
  width: 30%;
  margin: 0 1.5%;
  box-shadow: 0 2px 10px 2px rgba(0, 0, 0, 0.1);
  padding: 20px;
  padding-top: 0;
  margin-bottom: 35px;
  border-radius: 6px;
}

.search-results #primary article a.post-thumbnail {
  display: block;
  margin-left: -20px;
  margin-right: -20px;
}

.search-results #primary article a.post-thumbnail img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}

.search-results #primary article .entry-title a {
  display: block;
  color: #000;
  font-size: 24px;
  font-weight: 600;
  margin-top: 20px;
  margin-bottom: 20px;
}

.no-results.not-found {
  text-align: center;
  margin-bottom: 50px;
}

.no-results.not-found .search-form input.search-field {
  height: 45px;
  padding-left: 10px;
  border: 1px solid #eee;
  background-color: #eee;
  color: #333;
  font-size: 14px;
  width: 250px;
}

.no-results.not-found .search-form .search-submit {
  height: 45px;
  padding: 0 30px;
  border: 0;
  background-color: #0b204d;
  color: #fff;
  cursor: pointer;
}

.no-results.not-found .search-form .search-submit:hover {
  background-color: #252525;
}

.no-results.not-found .search-form label span {
  display: none;
  width: 0;
}

/*SEARCH RESULTS - NO RESULTS CSS ENDS*/

/* Modal box CSS*/

.modal {
  background-color: rgba(0, 0, 0, 0.6);
}

.modal-content {
  background-color: transparent !important;
  border: 0px solid rgba(0, 0, 0, 0.2) !important;
}

.modal-footer {
  display: none !important;
}

.modal-header {
  border-bottom: 0px !important;
}

.close {
  color: #000 !important;
  opacity: 1 !important;
  border: 1px solid #fff !important;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  background-color: #fff !important;
  padding: 0 !important;
  float: left !important;
  margin: 0 !important;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.modal-dialog {
  max-width: 1100px !important;
  margin: 25px auto !important;
}

.close span {
  display: block;
  color: #fff;
  position: absolute;
  left: 120%;
  top: 0;
}

.dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input {
  height: 50px !important;
}

.dgwt-wcas-no-submit .dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input {
  padding: 15px 15px 15px 40px !important;
}

.dgwt-wcas-details-main-image img {
  max-height: 200px !important;
}

.dgwt-wcas-suggestion-selected {
  background-color: #0b204d;
}

.dgwt-wcas-suggestion-selected .dgwt-wcas-st {
  color: #fff;
}

.dgwt-wcas-suggestion-selected .dgwt-wcas-sp {
  color: #fff;
}

.dgwt-wcas-pd-addtc .add_to_cart_inline {
  margin-left: 20px;
}

.asl_nores {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
}

.results .asl_nores .asl_keyword {
  padding: 5px 0px !important;
  cursor: pointer;
  font-weight: bold;
  font-family: inherit;
  border-top: 1px solid #eee;
}

.asl_nores_header {
  margin-bottom: 10px !important;
}

/*  Modal CSS ENDS */

/*  Drop down menu CSS*/
#primary-menu {
  text-align: center;
}

#primary-menu li {
  display: inline-block;
  padding: 0 10px;
}

#primary-menu li a {
  padding: 10px 0;
  color: #000;
}

.menu-item-has-children {
  position: relative;
}

.menu-item-has-children::after {
  content: "\f107";
  font-family: "Font Awesome 5 Free";
  font-weight: bold;
  position: absolute;
  right: -5px;
  top: 2px;
  display: block;
}

.menu-item-has-children .sub-menu {
  position: absolute;
  z-index: 99;
  background-color: #fff;
  box-shadow: 0 2px 10px 0px rgba(0, 0, 0, 0.15);
  top: calc(100% + 10px);
  left: 10px;
  width: 220px;
  border-radius: 5px;
  transform: translateY(20px);
  opacity: 0;
  transition: all 0.5s ease-in-out;
  visibility: hidden;
  overflow: hidden;
}

.menu-item-has-children:hover .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

#primary-menu .sub-menu li {
  display: block;
  padding: 0;
}

#primary-menu .sub-menu li a:hover {
  color: #fff;
  border-color: transparent;
}

#primary-menu .sub-menu li a {
  display: block;
  text-align: left;
  padding: 17px 10px;
  border-bottom: 1px solid #eee;
  position: relative;
  z-index: 9;
  transition: all 0.5s ease-in-out;
}

#primary-menu .sub-menu li:last-child a {
  border-bottom: 0;
}

#primary-menu .sub-menu li a:hover::before {
  width: 100%;
  background-color: #0b204d;
  border-color: #0b204d;
}

#primary-menu .sub-menu li a::before {
  content: "";
  background-color: transparent;
  width: 3px;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  transition: all 0.5s ease-in-out;
  z-index: -1;
  border-bottom: 1px solid transparent;
}

.menu-toggle {
  display: none;
}

/*  Drop down menu CSS ENDS */

/*
Nav bar
*/
#mm #primary-menu ul.sub-menu li a {
  padding-left: 35px;
}

#mm #primary-menu .sub-menu li a::before {
  content: unset;
}

#mm ul.sub-menu {
  position: relative;
  visibility: visible;
  opacity: 1;
  transform: translate(0);
  display: block !important;
  height: auto !important;
}

#mml {
  padding: 0 15px;
  color: #ffffff;
}

#mml h4 {
  display: inline-block;
  margin-bottom: 0;
  margin-top: 12px;
}

.mm {
  position: relative;
  background-color: #000;
  min-height: 49px;
}

#mmb {
  position: absolute;
  width: 40px;
  height: 50px;
  margin-right: 15px;
  top: 0;
  right: 0;
  cursor: pointer;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: 0.5s ease-in-out;
  -moz-transition: 0.5s ease-in-out;
  -o-transition: 0.5s ease-in-out;
  transition: 0.5s ease-in-out;
}

#mmb span {
  display: block;
  position: absolute;
  height: 1.5px;
  width: 100%;
  background: #ffffff;
  border-radius: 9px;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: 0.25s ease-in-out;
  -moz-transition: 0.25s ease-in-out;
  -o-transition: 0.25s ease-in-out;
  transition: 0.25s ease-in-out;
}

#mmb span:nth-child(1) {
  top: 16px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}

#mmb span:nth-child(2) {
  top: 26px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}

#mmb span:nth-child(3) {
  top: 36px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}

#mmb.on span {
  height: 2px;
}

#mmb.on span:nth-child(1) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  top: 11px;
  left: 8px;
}

#mmb.on span:nth-child(2) {
  width: 0%;
  opacity: 0;
}

#mmb.on span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  top: 39px;
  left: 8px;
}

#mm ul {
  padding-left: 0;
  margin-bottom: 0;
  position: absolute;
  left: 0;
  top: 100%;
  width: 100%;
  z-index: 1000;
  display: none;
}

#mm li {
  display: block;
  position: relative;
  padding: 0;
}

#mm #primary-menu a {
  display: block;
  padding: 16px 26px 15px 17px;
  border-bottom: #dedede 1px solid;
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 16px;
  line-height: 25px;
  background-color: #000;
  word-wrap: break-word;
  text-align: left;
}

#mm #primary-menu a:hover {
  background-color: #0b204d;
}

.mm,
#mm {
  display: none;
}

/* 
 * NAVBAR CSS ENDS
 */

/* WOOCOMMERCE CSS START */

.woocommerce td.product-name a {
  color: #000;
  font-weight: 600;
}

.woocommerce td.product-name a:hover {
  color: #0b204d;
}

input#coupon_code {
  width: 200px !important;
  padding-left: 10px;
  margin-right: 10px;
  height: 45px;
  background-color: #eee;
  border: 0;
  border-radius: 3px;
  font-size: 14px;
}

.coupon .button {
  height: 45px;
}

.woocommerce button.button:disabled,
.woocommerce button.button:disabled[disabled] {
  color: #fff;
  height: 45px;
}

.actions button {
  height: 45px;
}

.woocommerce a.added_to_cart {
  padding: 10px 20px;
  border-radius: 3px;
}

.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.added_to_cart,
.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
  color: #fff;
  background-color: #0b204d;
  padding: 10px 20px;
  line-height: 1.5;
}

.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.added_to_cart:hover,
.woocommerce #respond input#submit.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
  color: #fff;
  background-color: #333;
}

.post-type-archive li .added_to_cart {
  background-color: #0b204d !important;
  color: #fff !important;
  font-size: 16px !important;
  letter-spacing: 1px !important;
}

.wc-proceed-to-checkout a,
#place_order {
  background-color: #0b204d !important;
  color: #fff !important;
  font-size: 16px !important;
  text-transform: uppercase;
  letter-spacing: 1px !important;
  margin-top: 8px !important;
  font-weight: 600 !important;
}

.wc-proceed-to-checkout a:hover,
#place_order:hover {
  background-color: #252525 !important;
  color: #fff !important;
}

.woocommerce #payment #place_order,
.woocommerce-page #payment #place_order {
  float: unset;
  display: block;
  width: 100%;
  height: 45px;
}

a.shipping-calculator-button {
  color: #0b204d;
  text-transform: uppercase;
  font-weight: 600;
}

.woocommerce a.remove,
td.product-remove button {
  background: #0b204d !important;
  color: #fff !important;
  line-height: 17px;
}

#add_payment_method table.cart img,
.woocommerce-cart table.cart img,
.woocommerce-checkout table.cart img {
  width: 100px;
}

.woocommerce-cart-form {
  width: 62%;
  float: left;
}

.woocommerce .cart-collaterals {
  width: 35%;
  float: right;
}

.woocommerce .cart-collaterals .cart_totals,
.woocommerce-page .cart-collaterals .cart_totals {
  float: unset;
  width: 100%;
  background: rgba(84, 84, 84, 0.05);
  padding: 40px 40px 30px;
}

.woocommerce table.shop_table {
  border: 0;
}

#add_payment_method table.cart .product-thumbnail,
.woocommerce-cart table.cart .product-thumbnail,
.woocommerce-checkout table.cart .product-thumbnail {
  text-align: center;
}

.woocommerce table.shop_table th {
  color: #000 !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  font-size: 13px !important;
}

.woocommerce table.shop_table .actions {
  padding-top: 40px !important;
}

.woocommerce-cart .cart-collaterals .cart_totals h2 {
  position: relative;
  margin-bottom: 30px;
  border-bottom: 1px solid #ebe9eb;
  padding-bottom: 20px;
  font-size: 16px;
  text-transform: uppercase;
  font-weight: 700;
}

.woocommerce-cart .cart-collaterals .cart_totals tr th,
.woocommerce-checkout .cart-collaterals .cart_totals tr td,
.woocommerce-checkout .cart-collaterals .cart_totals tr th {
  font-size: 16px;
  padding-left: 0;
  padding-right: 0;
}

.woocommerce .cart-collaterals table.shop_table td {
  padding-left: 0;
  padding-right: 0;
}

.cart_totals tr:not(:last-child) td {
  padding-bottom: 30px !important;
}

.qib-container button {
  cursor: pointer;
}

.woocommerce-shipping-destination {
  font-size: 14px;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  font-size: 14px;
  color: #000;
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea {
  padding: 10px;
  font-size: 14px;
}

input[type="checkbox"],
input[type="radio"],
.input-radio,
.input-checkbox {
  width: 17px;
  -moz-appearance: none;
  appearance: none;
  -webkit-appearance: none;
  outline: none;
  outline-width: medium;
  position: relative;
  border: none;
  cursor: pointer;
  outline-width: 0;
  border-radius: 50%;
  top: 3px;
}

input[type="radio"]::before {
  background: #0b204d;
}

.input-radio::before,
input[type="radio"]::before,
.input-radio::before,
input[type="checkbox"]::before {
  position: absolute;
  left: 0;
  top: 0;
  background: #ccc;
  width: 17px;
  height: 17px;
  display: block;
  border-radius: 50%;
  -webkit-transition: 240ms;
  -o-transition: 240ms;
  transition: 240ms;
  -webkit-transform: scale(0);
  -ms-transform: scale(0);
  transform: scale(0);
}

.input-radio::before,
input[type="checkbox"]::before {
  border-radius: 0%;
}

input[type="checkbox"]::before,
input[type="checkbox"]::after,
input[type="radio"]::before,
input[type="radio"]::after,
.input-radio::before,
.input-radio::after,
.input-checkbox::before,
.input-checkbox::after {
  content: "";
}

input[type="radio"]::after,
.input-radio::after,
input[type="checkbox"]::after,
.input-checkbox::after,
.widget_product_categories ul li a::before,
.widget_layered_nav ul li a::before,
.post_tags a,
.wpb_widgetised_column .tagcloud a,
.select2-container--default .select2-selection--multiple .select2-selection__choice {
  border-color: rgba(84, 84, 84, 0.8);
}

.input-radio::after,
input[type="radio"]::after {
  border-radius: 50%;
}

input[type="checkbox"]::after,
input[type="radio"]::after,
.input-radio::after,
.input-checkbox::after {
  display: block;
  width: 17px;
  height: 17px;
  border: 2px solid #a5a5a5;
  -webkit-transition: 240ms;
  -o-transition: 240ms;
  transition: 240ms;
}

.input-radio:checked::before,
input[type="radio"]:checked::before,
.input-radio:checked::before,
input[type="checkbox"]:checked::before {
  -webkit-transform: scale(0.5);
  -ms-transform: scale(0.5);
  transform: scale(0.5);
  background: #0b204d;
}

input[type="radio"]:checked::after,
.input-radio:checked::after,
input[type="checkbox"]:checked::after,
.input-checkbox:checked::after,
.return-to-shop .button.wc-backward {
  border-color: #0b204d;
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea {
  padding: 10px;
  border-radius: 3px;
  border: 1px solid #ddd;
  color: #000;
  font-weight: 400;
  height: 45px;
}

.woocommerce form .form-row {
  padding: 3px 0;
  margin: 0 0 06px;
  display: block;
}

#calc_shipping_city_field {
  margin-bottom: 2px;
}

.order-total .woocommerce-Price-amount {
  font-weight: 600 !important;
  font-size: 25px;
}

.woocommerce-checkout .checkout_coupon input#coupon_code {
  width: 100% !important;
  padding-left: 15px !important;
  display: inline-block;
  padding: 6px 10px;
}

.checkout.woocommerce-checkout {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.woocommerce .col2-set,
.woocommerce-page .col2-set {
  width: 60%;
}

#order_review {
  width: 38%;
  background: rgba(84, 84, 84, 0.05);
  padding: 20px 40px 40px;
  position: relative;
}

#order_review_heading {
  display: none;
}

.woocommerce .col2-set .col-1,
.woocommerce-page .col2-set .col-1 {
  float: unset;
  width: 100%;
  max-width: 100%;
}

.woocommerce .col2-set .col-2,
.woocommerce-page .col2-set .col-2 {
  float: unset;
  width: 100%;
  max-width: 100%;
}

.checkout_coupon.woocommerce-form-coupon .button {
  height: 45px;
}

.checkout_coupon.woocommerce-form-coupon .form-row-first {
  width: 50%;
}

.woocommerce-checkout form.checkout .woocommerce-checkout-review-order table.woocommerce-checkout-review-order-table .product-total {
  text-align: right;
}

.woocommerce-checkout form.checkout .woocommerce-checkout-review-order table.woocommerce-checkout-review-order-table thead td,
.woocommerce-checkout form.checkout .woocommerce-checkout-review-order table.woocommerce-checkout-review-order-table thead th,
.woocommerce-checkout form.checkout .woocommerce-checkout-review-order table.woocommerce-checkout-review-order-table tfoot td,
.woocommerce-checkout form.checkout .woocommerce-checkout-review-order table.woocommerce-checkout-review-order-table tfoot th {
  border: none;
  vertical-align: top;
}

.woocommerce .shop_table.woocommerce-checkout-review-order-table td {
  padding: 16px 0px;
}

.shop_table.woocommerce-checkout-review-order-table tfoot tr.cart-subtotal th,
.shop_table.woocommerce-checkout-review-order-table tfoot tr.cart-subtotal td {
  border-top: 1px solid rgba(0, 0, 0, 0.1) !important;
  padding-top: 40px;
}

#add_payment_method #payment,
.woocommerce-cart #payment,
.woocommerce-checkout #payment {
  background: transparent;
  border-radius: 0;
}

#add_payment_method #payment ul.payment_methods,
.woocommerce-cart #payment ul.payment_methods,
.woocommerce-checkout #payment ul.payment_methods {
  padding: 0;
  border-bottom: 0;
}

#add_payment_method #payment .payment_method_paypal .about_paypal,
.woocommerce-cart #payment .payment_method_paypal .about_paypal,
.woocommerce-checkout #payment .payment_method_paypal .about_paypal {
  float: right;
  line-height: 20px;
  margin-left: 10px;
  color: #000;
  font-weight: 300;
  font-size: 12px;
  border-bottom: 1px dashed;
}

#add_payment_method #payment ul.payment_methods li img,
.woocommerce-cart #payment ul.payment_methods li img,
.woocommerce-checkout #payment ul.payment_methods li img {
  width: 80px;
}

.woocommerce-billing-fields h3,
.woocommerce-additional-fields h3,
h3#order_review_heading,
#post-79 .entry-title,
.woocommerce-order-received .woocommerce-order-details__title,
.woocommerce-order-received .woocommerce-column__title,
.woocommerce-column__title,
.woocommerce-order-details__title,
.woocommerce-Address-title.title h3,
div#customer_login h2 {
  text-transform: uppercase;
  color: #252525;
  font-size: 24px !important;
  font-weight: 700;
  padding-bottom: 20px;
  margin-bottom: 0;
  position: relative;
}

span.select2-selection.select2-selection--single {
  height: 45px !important;
  padding: 9px 0;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 45px;
  right: 10px;
}

form.checkout.woocommerce-checkout label {
  font-size: 14px;
  margin-bottom: 0px;
  font-weight: 500;
  text-transform: uppercase;
}

#order_comments {
  height: 100px;
}

#add_payment_method #payment ul.payment_methods li,
.woocommerce #payment ul.payment_methods li {
  border-bottom: 1px solid rgba(84, 84, 84, 0.15);
  line-height: 16px;
  padding: 17px 0 14px;
}

#add_payment_method #payment ul.payment_methods li div.payment_box,
.woocommerce #payment ul.payment_methods li div.payment_box {
  background-color: transparent;
  line-height: 1.538em;
  padding: 0 35px;
  margin: 0;
  width: 100%;
  font-size: 1rem;
  margin-top: 20px !important;
  border: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.woocommerce #payment div.payment_box p {
  font-size: 13px;
  line-height: 1.4285em;
  margin: -2px 0 0;
  margin-bottom: 0px;
  text-shadow: none;
  font-weight: 400;
  color: #333;
}

#add_payment_method #payment div.payment_box::before,
.woocommerce-cart #payment div.payment_box::before,
.woocommerce-checkout #payment div.payment_box::before {
  content: unset;
}

.woocommerce-privacy-policy-text p {
  font-size: 14px;
  color: #333;
}

.shop_table.woocommerce-checkout-review-order-table thead th,
.shop_table.woocommerce-checkout-review-order-table tfoot th,
.shop_table.woocommerce-checkout-review-order-table tfoot td {
  padding: 10px 0;
}

.woocommerce ul#shipping_method li label {
  text-transform: uppercase;
  font-weight: 700;
  font-size: 13px;
}

form.checkout.woocommerce-checkout ul.payment_methods li label {
  font-size: 16px;
  margin-top: 0;
  margin-bottom: 14px;
  text-transform: capitalize;
  line-height: 1.3em;
  font-weight: 700;
  color: #000;
  margin-top: 12px;
}

.woocommerce-error {
  border-color: #0b204d !important;
}

.woocommerce-message::before,
.woocommerce-error::before {
  color: #c12a30 !important;
}

.woocommerce-NoticeGroup.woocommerce-NoticeGroup-checkout {
  width: 100%;
}

.woocommerce-message a,
a.woocommerce-Button.button,
p.return-to-shop a,
.added_to_cart {
  background-color: #0b204d !important;
  color: #fff !important;
  padding: 10px 22px !important;
  font-size: 16px !important;
  margin-top: 8px !important;
  font-weight: bold;
}

.woocommerce-message a:hover,
a.woocommerce-Button.button:hover,
p.return-to-shop a:hover,
.added_to_cart:hover {
  background-color: #252525 !important;
  color: #fff !important;
}

.woocommerce-message a {
  margin-top: 0 !important;
}

.woocommerce-message,
.woocommerce-notices-wrapper a,
.woocommerce-message::before {
  border-top-color: #0b204d !important;
}

.woocommerce-order-received .woocommerce-customer-details {
  display: none;
}

.woocommerce-order-received p.woocommerce-notice.woocommerce-notice--success.woocommerce-thankyou-order-received {
  color: #0b204d;
}

.woocommerce-order-received .woocommerce table.shop_table tfoot td,
.woocommerce-order-received .woocommerce table.shop_table tfoot th {
  border: 0;
  padding-top: 15px;
}

.woocommerce-order-received .woocommerce table.shop_table tbody td,
.woocommerce-order-received .woocommerce table.shop_table tbody th {
  border-bottom: 3px solid rgba(0, 0, 0, 0.9);
  margin-bottom: 40px;
  padding: 15px 0;
}

.woocommerce-order-received .woocommerce table.shop_table td,
.woocommerce-order-received .woocommerce table.shop_table th {
  padding: 15px 0;
}

.woocommerce-order-received .woocommerce-table.woocommerce-table--order-details.shop_table.order_details {
  border-collapse: collapse;
}

.woocommerce-order-received .woocommerce td.product-name a {
  color: #0b204d;
  font-weight: 600;
  font-size: 20px;
}

.woocommerce-order-received .woocommerce td.product-name a:hover {
  color: #252525;
}

.woocommerce .woocommerce-form-login .woocommerce-form-login__rememberme {
  vertical-align: middle;
  margin-bottom: 0;
  margin-top: 7px;
}

.woocommerce form .form-row.create-account .input-checkbox {
  display: inline-block;
  margin: -2px 8px 0 0;
  text-align: center;
  vertical-align: unset;
}

#ship-to-different-address label span {
  margin-left: 8px;
  font-weight: bold;
  color: #000;
}

.tinv-wishlist .product-action {
  width: 165px;
}

#tinvwl_product_actions {
  height: 45px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

.tinvwl-table-manage-list tr td {
  border-top: 1px solid #ccc;
}

.tinvwl-to-left.look_in {
  display: flex;
  flex-wrap: wrap;
}

.select-wrapper {
  flex: 1;
  margin-right: 5px;
  position: relative;
}

.select-wrapper::after {
  content: "\f0d7";
  font-family: "Font Awesome 5 Free";
  font-weight: bold;
  position: absolute;
  right: 10px;
  top: 50%;
  z-index: 1;
  pointer-events: none;
  transform: translateY(-50%);
  line-height: 0;
  color: #666;
}

.tinvwl-to-left.look_in .tinvwl-input-group {
  width: 100%;
  border-collapse: collapse;
}

.wishlist_item .product-thumbnail img {
  width: 100px;
  height: auto;
  max-width: unset;
}

.woocommerce-Message.woocommerce-Message--info.woocommerce-info .button {
  margin-top: 0 !important;
}

.woocommerce-account .woocommerce-columns--addresses.col2-set.addresses,
.u-columns.woocommerce-Addresses.col2-set.addresses {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.woocommerce-account .woocommerce-column--shipping-address.col-2,
.woocommerce-account .woocommerce-column--billing-address.col-1,
.u-column1.col-1.woocommerce-Address,
.u-column2.col-2.woocommerce-Address {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 48%;
  flex: 0 0 48%;
  max-width: 48%;
  box-shadow: 0 0px 10px 0 rgba(0, 0, 0, 0.1);
  padding: 10px 20px;
}

.woocommerce-account .col2-set::after,
.woocommerce-account .col2-set::before {
  content: unset;
}

.woocommerce-account .woocommerce .woocommerce-customer-details address {
  border: 0;
  padding: 0 0 10px;
  line-height: 1.8;
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-table tfoot th {
  text-align: right;
  border-top: 0 !important;
  border-right: 1px solid rgba(0, 0, 0, 0.1);
}

.woocommerce-account .woocommerce table.shop_table {
  border-collapse: collapse;
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-table tbody tr {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.woocommerce-account .woocommerce table.shop_table td,
.woocommerce-account .woocommerce table.shop_table th {
  padding: 20px 10px;
}

.woocommerce-account .woocommerce .account-orders-table {
  text-align: center;
}

.woocommerce-account.woocommerce .col2-set,
.woocommerce-account.woocommerce-page .col2-set {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.woocommerce-account #customer_login .col-1,
#customer_login .col-2 {
  flex: 49%;
}

.woocommerce-account .woocommerce form.login,
.woocommerce-account .woocommerce form.register {
  height: 400px;
}

/*Dashboad*/
nav.woocommerce-MyAccount-navigation ul {
  padding: 0;
  list-style: none;
  margin: 0 !important;
}

nav.woocommerce-MyAccount-navigation ul li a {
  padding: 9px 10px;
  display: block;
  border: 1px solid #0b204d;
  margin-bottom: 9px;
  color: white;
  text-decoration: none;
  position: relative;
  transition: all 0.3s ease-in;
  background-color: #0b204d;
}

nav.woocommerce-MyAccount-navigation ul li.is-active a {
  background-color: #252525;
  color: white;
  border: 1px solid #252525;
}

nav.woocommerce-MyAccount-navigation ul li a:hover {
  color: white !important;
  border: 1px solid #252525;
  background-color: #252525;
}

.woocommerce-account .woocommerce-MyAccount-content a {
  color: #0b204d;
}

.woocommerce-account .woocommerce-MyAccount-content a:hover {
  color: #252525;
}

form.woocommerce-EditAccountForm fieldset {
  padding-left: 0;
  padding-right: 0;
}

/**DASHBOARD END**/
.woocommerce table.my_account_orders .button {
  background-color: #0b204d;
  color: #fff;
  padding: 8px 25px;
  font-size: 14px;
  border-radius: 25px;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 8px;
  display: inline-block;
  font-weight: 300;
}

.woocommerce table.my_account_orders .button:hover {
  background-color: #252525;
  color: #fff;
}

.woocommerce-account .addresses .title h3 {
  position: relative;
}

.woocommerce-privacy-policy-text a {
  color: #252525;
}

.woocommerce-privacy-policy-text a:hover {
  color: #0b204d;
}

.woocommerce-info {
  border-top-color: #0b204d;
  margin-bottom: 10px !important;
}

.lost_password a {
  color: #252525 !important;
}

.lost_password a:hover {
  color: #0b204d !important;
}

.woocommerce-info::before {
  color: #0b204d;
}

.woocommerce-form-login-toggle a,
.woocommerce-form-coupon-toggle a,
p.woocommerce-LostPassword.lost_password a {
  color: #252525 !important;
}

.woocommerce-form-login-toggle a:hover,
.woocommerce-form-coupon-toggle a:hover,
.woocommerce-privacy-policy-text a:hover,
p.woocommerce-LostPassword.lost_password a:hover {
  color: #0b204d !important;
}

.woocommerce-privacy-policy-text {
  padding-bottom: 20px;
}

.woocommerce form .form-row .required {
  color: #0b204d;
}

a.showcoupon {
  font-size: 16px;
  font-weight: 500;
}

h3#order_review_heading {
  margin-top: 40px;
}

form.woocommerce-cart-form .product-thumbnail {
  height: auto;
  border: none;
}

.woocommerce-cart-form .woocommerce-Price-amount.amount {
  font-size: 16px;
}

.woocommerce-form-coupon-toggle {
  margin-bottom: 40px;
}

ul.woocommerce-error {
  margin-bottom: 50px !important;
}

.tinv-header {
  display: none;
}

.tinv-wishlist.woocommerce.tinv-wishlist-clear {
  margin-top: 30px;
}

.post-type-archive .products li {
  text-align: center;
}

.tax-product_cat .products li {
  text-align: center;
}

.tax-product_cat li .added_to_cart {
  background-color: #c12a30 !important;
  color: #fff !important;
  padding: 12px 22px !important;
  font-size: 14px !important;
  border-radius: 25px !important;
  text-transform: uppercase;
  letter-spacing: 1px !important;
  margin-top: 8px !important;
  /*    display: inline-block !important; */
  font-weight: 300 !important;
}

.tax-product_cat li .added_to_cart:hover {
  background-color: #252525 !important;
  color: #fff !important;
}

.quantity {
  position: relative;
  width: fit-content;
}

.woocommerce-cart .quantity .minus {
  background: transparent;
  position: absolute;
  right: 0;
  bottom: 0;
  padding: 8px 5px 14px 7px !important;
  border-color: #252525;
  font-size: 24px;
  line-height: 0;
}

.woocommerce-cart .quantity .plus {
  background: transparent;
  position: absolute;
  right: 0;
  top: 0px;
  padding: 12px 4px 11px 4px !important;
  border-color: #252525;
  font-size: 24px;
  line-height: 0;
}

a.restore-item {
  margin-left: 10px;
  margin-top: -10px !important;
}

.page-id-317 .woocommerce-form-login {
  height: 492px;
}

.woocommerce-order-received .woocommerce-order-details__title {
  position: relative;
}

.woocommerce-order-received .woocommerce-column__title {
  position: relative;
}

.page-id-316 .wc-backward {
  margin-left: 20px !important;
  color: #252525 !important;
}

.page-id-316 .wc-backward:hover {
  color: #c12a30 !important;
}

.page-id-317 .woocommerce-MyAccount-content .woocommerce-Button {
  position: relative;
  top: -10px !important;
}

/* Woo Commerce End Here */

/* =========================================
   Header — Figma node 2:395 (authoritative)
   File: gsyLPk2FiXIO4Pw0S0iUXD
   Uses Bootstrap .container as the outer wrapper.
   ========================================= */
.site-header {
  width: 100%;
  background: transparent;
  margin: 0 auto;
  padding: 10px 80px;
  box-sizing: border-box;
  position: fixed;
  top: 0;
  z-index: 9;
}

.site-header>.container {
  width: 100%;
  padding: 10px 80px;
  box-sizing: border-box;
}

.site-header-inner {
  display: flex;
  align-items: center;
  gap: 40px;
  min-height: 80px;
  padding: 10px 24px;
  background-color: #05133f;
  border-radius: 10px;
  box-sizing: border-box;
}

/* Branding / logo */
.site-header-inner .site-branding {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  margin: 0;
}

.site-header-inner .site-branding a,
.site-header-inner .site-branding .custom-logo-link {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}

.site-header-inner .site-branding .custom-logo,
.site-header-inner .site-branding img {
  display: block;
  max-height: 62px;
  width: auto;
  height: auto;
}

.site-header-inner .site-title {
  margin: 0;
  color: #ffffff;
  font-family: "Inter Tight", "ProximaNova-Regular", Arial, sans-serif;
  font-size: 24px;
  font-weight: 600;
  line-height: 1;
}

.site-header-inner .site-title a {
  color: inherit;
  text-decoration: none;
}

/* Navigation */
.site-header-inner .main-navigation {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 40px;
}

.site-header-inner #primary-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 40px 100px;
  width: 100%;
  text-align: right;
}

.site-header-inner #primary-menu li {
  display: block;
  margin: 0;
  padding: 0;
  position: relative;
}

.site-header-inner #primary-menu li:last-child {
  display: none;
}

.site-header-inner #primary-menu li a {
  padding: 0;
  color: #ffffff;
  text-decoration: none;
  background: transparent;
  border: 0;
  text-transform: none;
  font-family: "Inter Tight", "ProximaNova-Regular", Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 14px;
  position: relative;
}

.site-header-inner #primary-menu li a:hover:before {
  content: "";
  position: absolute;
  bottom: -12px;
  width: 6px;
  height: 6px;
  background: #ffffff;
  border-radius: 50%;
  left: 0;
  right: 0;
  margin: auto;
  transition: 0.5s all ease;
}

.site-header-inner #primary-menu li a:hover,
.site-header-inner #primary-menu .current-menu-item>a {
  color: #ff0000;
  background: transparent;
}

.site-header-inner #primary-menu .menu-item-has-children::after {
  color: #ffffff;
  top: 0;
}

.site-header-inner #primary-menu .sub-menu {
  top: calc(100% + 14px);
  left: 0;
  background-color: #05133f;
  border-radius: 8px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
}

.site-header-inner #primary-menu .sub-menu li a {
  color: #ffffff;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  line-height: 1.3;
}

.site-header-inner #primary-menu .sub-menu li:last-child a {
  border-bottom: 0;
}

.site-header-inner #primary-menu .sub-menu li a:hover {
  background-color: #ff0000;
  color: #ffffff;
}

.site-header-inner #primary-menu .sub-menu li a::before {
  content: none;
}

/* CTA pill */
.site-header-inner .header-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-shrink: 0;
  width: 150px;
  height: 45px;
  padding: 14px 20px;
  box-sizing: border-box;
  background-color: #ff0000;
  color: #ffffff;
  font-family: "Inter Tight", "ProximaNova-Regular", Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 16px;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  border-radius: 100px;
  box-shadow:
    0 1.04px 2.08px rgba(255, 0, 0, 0.6),
    inset -1.04px 1.04px 20.26px rgba(252, 180, 180, 0.82);
  transition:
    background-color 0.2s ease,
    transform 0.2s ease;
}

.site-header-inner .header-cta:hover,
.site-header-inner .header-cta:focus,
.site-header-inner #primary-menu li:last-child a:hover {
  color: #ffffff;
  background: #be0000;
  box-shadow:
    0px 1.04px 2.08px rgba(255, 0, 0, 0.6),
    inset -1.04px 1.04px 20.26px rgba(252, 180, 180, 0.82);
}

.site-header-inner .header-cta i {
  font-size: 14px;
  line-height: 1;
}

/* Mobile hamburger */
.site-header-inner #mmb {
  display: none;
  position: relative;
  width: 40px;
  height: 40px;
  padding: 0;
  margin: 0 0 0 auto;
  background: transparent;
  border: 0;
  cursor: pointer;
  order: 3;
}

.site-header-inner #mmb span {
  display: block;
  position: absolute;
  left: 6px;
  right: 6px;
  width: auto;
  height: 2px;
  background: #ffffff;
  border-radius: 9px;
  transform-origin: center;
  transition:
    transform 0.25s ease,
    opacity 0.2s ease,
    top 0.25s ease;
}

.site-header-inner #mmb span:nth-child(1) {
  top: 12px;
}

.site-header-inner #mmb span:nth-child(2) {
  top: 19px;
}

.site-header-inner #mmb span:nth-child(3) {
  top: 26px;
}

.site-header-inner #mmb.on span:nth-child(1) {
  top: 19px;
  transform: rotate(45deg);
}

.site-header-inner #mmb.on span:nth-child(2) {
  opacity: 0;
}

.site-header-inner #mmb.on span:nth-child(3) {
  top: 19px;
  transform: rotate(-45deg);
}

/******************************************** DESKTOP ******************************************/
/* Bootstrap container override — match the 1560 design frame */
.site-header__wrap,
.hero__wrap {
  max-width: var(--frame-w);
  margin: 0 auto;
}

/* =========================================================
   Buttons (Figma: Link / Btn components)
   Override Bootstrap .btn defaults
   ========================================================= */
.btn_buttons {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 45px;
  padding: 14px 20px;
  border: 0;
  border-radius: 100px;
  font-family: "Inter Tight", sans-serif;
  font-size: 16px;
  line-height: 16px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition:
    filter 0.15s ease,
    transform 0.15s ease,
    background 0.15s ease;
}

.btn:focus {
  box-shadow: none;
  outline: none;
}

.btn--primary {
  width: 230px;
  background: var(--red);
  color: var(--white);
  box-shadow:
    0 1.04px 2.08px rgba(255, 0, 0, 0.6),
    inset -1.04px 1.04px 20.26px rgba(252, 180, 180, 0.82);
  transition:
    transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1),
    box-shadow 0.25s ease,
    background 0.25s ease,
    color 0.25s ease;
}

.btn--primary:hover,
.btn--primary:focus {
  color: var(--white);
  background: #be0000;
  box-shadow:
    0px 1.04px 2.08px rgba(255, 0, 0, 0.6),
    inset -1.04px 1.04px 20.26px rgba(252, 180, 180, 0.82);
}

.btn--primary:active {
  transform: translateY(0);
  box-shadow:
    0 1.04px 2.08px rgba(255, 0, 0, 0.6),
    inset -1.04px 1.04px 20.26px rgba(252, 180, 180, 0.82);
}

.btn--outline {
  width: 195px;
  padding: 8px 16px;
  gap: 10px;
  background: transparent;
  color: var(--white);
  border: 1px solid var(--white);
  transition:
    transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1),
    background 0.25s ease,
    color 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}

.btn--outline:hover,
.btn--outline:focus {
  background: #ffffff30;
  border-color: var(--white);
  color: #fff;
}

.btn--outline:active {
  transform: translateY(0);
  box-shadow: none;
}

.btn__arrow {
  font-family: "Inter Tight", sans-serif;
  font-weight: 300;
  letter-spacing: -1px;
  line-height: 1.3;
}

.btn_buttons svg {
  display: inline-block;
  flex-shrink: 0;
}

/* =========================================================
   Hero (Bootstrap container + row + cols)
   Title: Inter Tight Bold 65 / 85 / -2px, w:687
   Subtitle: 20 / 34, w:519
   iMac: 744×590
   ========================================================= */
.hero {
  position: relative;
  isolation: isolate;
  background: url("images/hero_banner.png") center bottom / cover no-repeat;
  padding-bottom: 80px;
  padding-top: 100px;
}

.hero__zigzag {
  position: absolute;
  top: 0%;
  right: 0;
  width: 55%;
  max-width: 750px;
  pointer-events: none;
  user-select: none;
  z-index: 1;
}

.hero__wrap {
  position: relative;
  z-index: 2;
  padding: 0 var(--frame-pad-x);
}

.hero__content-col {
  padding: 115px 0;
}

.hero__content {
  display: flex;
  flex-direction: column;
  gap: 44px;
  max-width: 750px;
}

.hero__text {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hero__title {
  margin: 0;
  max-width: 687px;
  font-family: "Inter Tight", sans-serif;
  font-weight: 700;
  font-size: 65px;
  line-height: 85px;
  letter-spacing: -2px;
  color: var(--white);
}

.hero__title-accent {
  color: var(--red);
}

.hero__subtitle {
  margin: 0;
  max-width: 519px;
  font-family: "Inter Tight", sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 34px;
  color: var(--white);
}

.hero__cta {
  display: flex;
  align-items: center;
  gap: 12px;
}

.hero__visual-col {
  padding-top: 58px;
}

.hero__visual {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.hero__visual img {
  width: 744px;
  max-width: 100%;
  filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.4));
}

/* =========================================================
   Section 2: Problem — "Property Maintenance Shouldn't Be This Complicated"
   Figma node 26:106
   Container: padding 60 80, gap 60 col
   Heading: 44px Inter Tight SemiBold, color #0D266B, tracking -1
   Cards: 332×240, white, radius 12, shadow 0 4 30 rgba(0,0,0,.12)
   Icon circle: 70 bg #E8E8E8, red icon (22-28px)
   ========================================================= */
.problem {
  background: var(--white);
  padding: 60px 0;
  color: var(--blue-250);
}

.problem__wrap {
  max-width: var(--frame-w);
  margin: 0 auto;
  padding: 0 var(--frame-pad-x);
}

.problem__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 60px;
}

.problem__eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin: 0 0 4px;
}

.problem__eyebrow-mark {
  width: 64px;
  height: 28px;
  display: inline-block;
  flex-shrink: 0;
}

.problem__eyebrow-mark svg {
  width: 100%;
  height: 100%;
  display: block;
}

.problem__eyebrow-text {
  font-family: "Inter Tight", sans-serif;
  font-weight: 400;
  font-size: 22px;
  line-height: 1.2;
  color: var(--red);
}

.problem__title {
  font-family: "Inter Tight", sans-serif;
  font-weight: 600;
  font-size: 44px;
  line-height: 1.2;
  letter-spacing: -1px;
  color: var(--blue-250);
  text-align: center;
  margin: 0;
}

/* ----- Cards row (Figma: gap 24, items-start, justify-center) ----- */
.problem__cards .row {
  margin-left: -12px;
  margin-right: -12px;
  row-gap: 24px;
  align-items: stretch;
}

.problem__cards .row>[class*="col-"] {
  padding-left: 12px;
  padding-right: 12px;
  display: flex;
  /* col becomes flex so card can fill height */
}

.problem-card {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  flex: 1 1 auto;
  /* fill col, equalize heights across row */
  width: 100%;
  min-height: 240px;
  /* Figma height; min so long text doesn't overflow */
  padding: 30px 20px;
  background: var(--white);
  border-radius: 12px;
  filter: drop-shadow(0 4px 30px rgba(0, 0, 0, 0.12));
  transition:
    transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1),
    filter 0.4s ease;
  cursor: pointer;
  overflow: hidden;
}

/* Gradient overlay (Figma 2011:127 Variant2) — fades in on hover */
.problem-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, #0d286d 0%, #040d35 100%);
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: -1;
  pointer-events: none;
}

.problem-card:hover {
  transform: translateY(-6px);
  filter: drop-shadow(0 12px 36px rgba(13, 38, 107, 0.28));
}

.problem-card:hover::before {
  opacity: 1;
}

.problem-card__icon {
  width: 70px;
  height: 70px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--gray-5);
  color: var(--red);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition:
    background 0.4s ease,
    color 0.4s ease,
    transform 0.4s ease;
}

.problem-card__icon svg {
  width: 28px;
  height: 28px;
  display: block;
  transition: transform 0.4s ease;
}

.problem-card__icon svg path {
  transition: fill 0.4s ease;
}

.problem-card:hover .problem-card__icon {
  background: var(--red);
  color: var(--white);
  transform: scale(1.05);
}

.problem-card:hover .problem-card__icon svg path {
  fill: #ffffff;
}

.problem-card__title {
  font-family: "Inter Tight", sans-serif;
  font-weight: 600;
  font-size: 22px;
  line-height: 1.2;
  color: var(--blue-250);
  margin: 0;
  transition: color 0.4s ease;
}

.problem-card:hover .problem-card__title {
  color: var(--white);
}

.problem-card__body {
  font-family: "Inter Tight", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 26px;
  color: var(--gray-200);
  margin: 0;
  transition: color 0.4s ease;
}

.problem-card:hover .problem-card__body {
  color: var(--white);
}

/* =========================================================
   Section 3: How It Works — tabs
   Figma node 30:1011 (section) / 2084:348 (tabs component)
   Container: 1400×670 tabs, gap-24
   Left list: 500 wide, 5 tabs, justify-between, height 670
   Right panel: gray bg #E8E8E8, rounded 10, p-64
   Active tab: gradient #0D286D → #040D35, white text
   ========================================================= */
.how {
  background: var(--white);
  padding: 60px 0;
}

.how__wrap {
  max-width: var(--frame-w);
  margin: 0 auto;
  padding: 0 var(--frame-pad-x);
}

/* Heading: left-aligned title block + right-side CTA pill (Figma 2050:596) */
.how__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 60px;
}

.how__head-text {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}

.how__panel-col {
  align-items: center;
}

.how__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0 0 4px;
}

.how__eyebrow-mark {
  width: 64px;
  height: 28px;
  display: inline-block;
  flex-shrink: 0;
}

.how__eyebrow-mark svg {
  width: 100%;
  height: 100%;
  display: block;
}

.how__eyebrow-text {
  font-family: "Inter Tight", sans-serif;
  font-weight: 400;
  font-size: 22px;
  line-height: 1.2;
  color: var(--red);
}

.how__title {
  font-family: "Inter Tight", sans-serif;
  font-weight: 600;
  font-size: 44px;
  line-height: 1.2;
  letter-spacing: -1px;
  color: var(--blue-250);
  text-align: left;
  margin: 0;
  max-width: 708px;
}

.how__cta {
  width: 207px;
  height: 45px;
  flex-shrink: 0;
}

/* ----- Tabs row ----- */
.how__tabs .row {
  margin-left: -12px;
  margin-right: -12px;
  align-items: stretch;
}

.how__tabs .row>[class*="col-"] {
  padding-left: 12px;
  padding-right: 12px;
}

.how__tabs-col,
.how__panel-col {
  display: flex;
}

/* ----- Tab list (left) ----- */
.how__tabs-list {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  height: 670px;
}

.how-tab {
  width: 100%;
  padding: 16px 34px;
  background: var(--white);
  border: 1px solid #e5e5e5;
  border-radius: 10px;
  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  cursor: pointer;
  transition:
    background 0.35s ease,
    border-color 0.35s ease,
    box-shadow 0.35s ease,
    transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
  font-family: "Inter Tight", sans-serif;
  /* override Bootstrap button focus */
  outline: none;
}

.how-tab:focus {
  outline: none;
  box-shadow: none;
}

.how-tab__num {
  font-family: "Inter Tight", sans-serif;
  font-weight: 700;
  font-size: 10px;
  line-height: 15px;
  letter-spacing: 2px;
  color: var(--red);
  text-transform: uppercase;
  transition: color 0.35s ease;
}

.how-tab__title {
  font-family: "Inter Tight", sans-serif;
  font-weight: 600;
  font-size: 22px;
  line-height: 28px;
  color: var(--blue-250);
  margin: 0;
  transition: color 0.35s ease;
}

.how-tab__body {
  font-family: "Inter Tight", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.4;
  color: var(--gray-200);
  margin: 0;
  transition: color 0.35s ease;
}

/* hover (inactive only) — card color changes to the navy highlight */
.how-tab:not(.is-active):hover {
  background: linear-gradient(180deg, #0d286d 0%, #040d35 100%);
  border-color: transparent;
  box-shadow: 0 12px 32px rgba(13, 40, 109, 0.28);
}

.how-tab:not(.is-active):hover .how-tab__num {
  color: rgba(255, 255, 255, 0.5);
}

.how-tab:not(.is-active):hover .how-tab__title {
  color: var(--white);
}

.how-tab:not(.is-active):hover .how-tab__body {
  color: rgba(255, 255, 255, 0.6);
}

/* active state — navy gradient, white copy */
.how-tab.is-active {
  background: linear-gradient(180deg, #0d286d 0%, #040d35 100%);
  border-color: transparent;
  box-shadow: 0 12px 32px rgba(13, 40, 109, 0.28);
  transform: translateX(0);
}

.how-tab.is-active .how-tab__num {
  color: rgba(255, 255, 255, 0.5);
}

.how-tab.is-active .how-tab__title {
  color: var(--white);
}

.how-tab.is-active .how-tab__body {
  color: rgba(255, 255, 255, 0.6);
}

/* ----- Tab panel (right) ----- */
.how__panels {
  position: relative;
  width: 100%;
  height: 670px;
  background: var(--gray-5);
  border-radius: 10px;
  overflow: hidden;
  isolation: isolate;
}

/* Red decorative ellipse, clipped to bottom-right (Figma node 2084:325 / imgEllipse6)
   Center positioned at panel-center + (343px, 467.73px), size 686×686 */
.how__panels::after {
  content: "";
  position: absolute;
  width: 686px;
  height: 686px;
  border-radius: 50%;
  background: var(--red);
  left: 50%;
  top: 50%;
  transform: translate(calc(-50% + 343px), calc(-50% + 468px));
  pointer-events: none;
  z-index: 0;
}

.how-panel {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 40px;
  opacity: 0;
  pointer-events: none;
  transform: scale(0.985);
  transition:
    opacity 0.45s ease,
    transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
  z-index: 1;
}

.how-panel.is-active {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
}

.how-panel img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 24px 48px rgba(0, 0, 0, 0.18));
}

/* =========================================================
   Section 4: Key Features (Bento-style Grid)
   Figma node 27:143
   Background: linear-gradient #0D286D → #040D35 (180deg)
   Padding: 80px (outer)
   Grid: 2 rows, 8/4 then 4/8 split, gap 24
   Card: white, radius 9.75, drop-shadow, padding 44, h-320
   Icon circle: 70 light gray, red SVG icon
   Title: 22px SemiBold #0D266B
   Body: 18px Regular #6A6A6A line-height 26
   ========================================================= */
.features {
  background: linear-gradient(180deg, #0d286d 0%, #040d35 100%);
  padding: 80px 0;
  color: var(--white);
}

.features__wrap {
  max-width: var(--frame-w);
  margin: 0 auto;
  padding: 0 var(--frame-pad-x);
}

.features__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 58px;
}

.features__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0 0 4px;
}

.features__eyebrow-mark {
  width: 64px;
  height: 28px;
  display: inline-block;
  flex-shrink: 0;
}

.features__eyebrow-mark svg {
  width: 100%;
  height: 100%;
  display: block;
}

.features__eyebrow-text {
  font-family: "Inter Tight", sans-serif;
  font-weight: 400;
  font-size: 22px;
  line-height: 1.2;
  color: var(--red);
}

.features__title {
  font-family: "Inter Tight", sans-serif;
  font-weight: 600;
  font-size: 44px;
  line-height: 1.2;
  letter-spacing: -1px;
  color: var(--white);
  text-align: center;
  margin: 0;
  max-width: 670px;
}

/* ----- Grid rows ----- */
.features__grid .row {
  margin-left: -12px;
  margin-right: -12px;
  row-gap: 24px;
  align-items: stretch;
}

.features__grid .row+.row {
  margin-top: 24px;
}

.features__grid .row>[class*="col-"] {
  padding-left: 12px;
  padding-right: 12px;
  display: flex;
}

/* ----- Card ----- */
.feature-card {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  width: 100%;
  min-height: 320px;
  padding: 44px;
  background: var(--white);
  border: 1.219px solid rgba(196, 197, 215, 0.15);
  border-radius: 9.75px;
  filter: drop-shadow(0 14.625px 19.5px rgba(25, 28, 30, 0.06));
  transition:
    transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1),
    filter 0.3s ease;
  cursor: default;
}

.feature-card:hover {
  transform: translateY(-4px);
  filter: drop-shadow(0 22px 36px rgba(0, 0, 0, 0.18));
}

/* Card with side media (chart / property card) — content + media side by side */
.feature-card--with-media {
  flex-direction: row;
  align-items: center;
  gap: 24px;
}

.feature-card__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  flex: 1 1 0;
  min-width: 0;
  justify-content: center;
}

.feature-card:not(.feature-card--with-media) .feature-card__content {
  gap: 20px;
}

/* Icon circle */
.feature-card__icon {
  width: 70px;
  height: 70px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--gray-5);
  color: var(--red);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
  transition:
    background 0.3s ease,
    color 0.3s ease,
    transform 0.3s ease;
}

.feature-card__icon svg {
  width: 32px;
  height: 32px;
  display: block;
  transition: transform 0.3s ease;
}

.feature-card:hover .feature-card__icon {
  background: var(--red);
  color: var(--white);
  transform: scale(1.05);
}

.feature-card:hover .feature-card__icon svg path {
  fill: #fff;
}

.feature-card__title {
  font-family: "Inter Tight", sans-serif;
  font-weight: 600;
  font-size: 22px;
  line-height: 1.2;
  color: var(--blue-250);
  margin: 0;
  text-transform: capitalize;
  transition: color 0.3s ease;
}

.feature-card:hover .feature-card__title {
  color: var(--red);
}

.feature-card__body {
  font-family: "Inter Tight", sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 26px;
  color: var(--gray-200);
  margin: 0;
}

/* Media area */
.feature-card__media {
  flex: 0 0 auto;
  width: 334px;
  height: 226px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f2f4f6;
  border: 1.219px solid rgba(255, 255, 255, 0.5);
  border-radius: 4.875px;
  padding: 20px;
  overflow: hidden;
}

.feature-card__media img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Chart variant (Real-Time card → distribution pie) — square, no inner frame */
.feature-card__media--chart {
  width: 222px;
  height: 222px;
  background: transparent;
  border: 0;
  padding: 0;
  border-radius: 0;
  overflow: visible;
}

/* ----- Interactive pie chart (SVG + hover tooltip) ----- */
.pie-chart {
  position: relative;
  width: 100%;
  height: 100%;
}

.pie-chart__svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.pie-chart__slice {
  cursor: pointer;
  transition:
    opacity 0.15s ease,
    transform 0.15s ease;
  transform-origin: 110px 110px;
}

/* On hover: highlight active slice, dim the others (Figma/Google-charts behaviour) */
.pie-chart.is-hovering .pie-chart__slice {
  opacity: 0.5;
}

.pie-chart.is-hovering .pie-chart__slice.is-active {
  opacity: 1;
  transform: scale(1.03);
}

.pie-chart__tooltip {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 7px 11px;
  background: #2a2a2a;
  color: #ffffff;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  font-family: "Inter Tight", sans-serif;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, calc(-100% - 14px));
  transition: opacity 0.12s ease;
}

.pie-chart__tooltip.is-visible {
  opacity: 1;
}

.pie-chart__tooltip-title {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.25;
}

.pie-chart__tooltip-value {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
}

/* =========================================================
   Section 5: Replace Manual Chaos with Smart Maintenance Management
   Figma node 37:1212
   Layout: 2-col flex (gap-65), padding 100 80
   Left: heading + 2 cards (gap-40 col, cards gap-20 row)
   Right: house photo 735×613
   Cards: 360 wide, gradient bg #f9fafb→#fff, radius 14, padding 28, shadow 0 5px 50px rgba(0,0,0,.15)
   Card icon: 80×80 navy gradient, rounded-40
   Card title: 22px SemiBold #0D266B, tracking -1, centered
   List items: gap-12, icon 20×20, text 18px Inter Regular #2C2C2C, line-height 24
   ========================================================= */
.compare {
  background: var(--white);
  padding: 100px 0px;
  overflow: hidden;
  color: var(--blue-250);
  position: relative;
}

.compare__wrap {
  max-width: var(--frame-w);
  margin: 0 auto;
  padding: 0 var(--frame-pad-x);
}

.compare__wrap .row {
  margin-left: -12px;
  margin-right: -12px;
}

.compare__wrap .row>[class*="col-"] {
  padding-left: 12px;
  padding-right: 12px;
}

/* ----- Heading ----- */
.compare__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 40px;
}

.compare__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0 0 4px;
}

.compare__eyebrow-mark {
  width: 64px;
  height: 28px;
  display: inline-block;
  flex-shrink: 0;
}

.compare__eyebrow-mark svg {
  width: 100%;
  height: 100%;
  display: block;
}

.compare__eyebrow-text {
  font-family: "Inter Tight", sans-serif;
  font-weight: 400;
  font-size: 22px;
  line-height: 1.2;
  color: var(--red);
}

.compare__title {
  font-family: "Inter Tight", sans-serif;
  font-weight: 600;
  font-size: 44px;
  line-height: 1.2;
  letter-spacing: -1px;
  color: var(--blue-250);
  text-align: left;
  margin: 0;
}

/* ----- Cards row ----- */
.compare__cards {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: stretch;
}

.compare-card {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  max-width: 360px;
  display: flex;
  flex-direction: column;
  gap: 30px;
  padding: 28px;
  border-radius: 14px;
  background: linear-gradient(134.37deg, #f9fafb 0%, #ffffff 100%);
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.15);
  transition:
    transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1),
    box-shadow 0.3s ease;
}

.compare-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 60px rgba(0, 0, 0, 0.2);
}

.compare-card__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  width: 100%;
}

.compare-card__icon {
  width: 80px;
  height: 80px;
  border-radius: 40px;
  background: linear-gradient(180deg, #0d286d 0%, #040d35 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}

.compare-card__icon img {
  width: 56px;
  height: 56px;
  object-fit: contain;
}

.compare-card__title {
  font-family: "Inter Tight", sans-serif;
  font-weight: 600;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -1px;
  color: var(--blue-250);
  text-align: center;
  margin: 0;
}

.compare-card__list {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.compare-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.compare-item__icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  display: inline-flex;
}

.compare-item__icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.compare-item__text {
  font-family: "Inter", "Inter Tight", sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 24px;
  color: #2c2c2c;
}

/* ----- Right house image ----- */
.compare__image-col {
  position: relative;
}

.compare__image img {
  width: 100%;
  max-width: 735px;
  height: auto;
  object-fit: cover;
}

.col-12.col-lg-5.compare__image-col {
  position: static;
}

.compare__image {
  position: absolute;
  right: 0;
  top: 0;
  width: 40%;
  bottom: 0;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: end;
}

/* =========================================================
   Section 6: Efficiency That You Can Measure
   Figma node 37:1162
   Background: #F2F4F6, padding 80 50
   Container: 1440 max, gap-48 col, items-center
   Heading: eyebrow "How We Work" red 22 + title 44 SemiBold #0D266B center max-w 670
   Stats row: 6 items, gap-30, flex-1 each
   Item: 80 icon + 25 gap + label (20px SemiBold #0D266B, line-height 32, tracking -0.2)
   Connector: dashed line behind icons, between center of first & last
   ========================================================= */
.metrics {
  background: #f2f4f6;
  padding: 80px 0;
  color: var(--blue-250);
}

.metrics__wrap {
  max-width: var(--frame-w);
  margin: 0 auto;
  padding: 0 var(--frame-pad-x);
}

.metrics__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 48px;
}

/* Figma 37:1202: gap-4, justify-center, w-full
   (Figma technically items-start, but the text container nests another
   flex-col justify-end leading-0 wrapper that effectively bottom-aligns the
   text with the EKG mark — a single align-items:center matches that visually) */
.metrics__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0;
}

.metrics__eyebrow-mark {
  width: 64px;
  height: 28px;
  display: inline-block;
  flex-shrink: 0;
}

.metrics__eyebrow-mark svg {
  width: 100%;
  height: 100%;
  display: block;
}

.metrics__eyebrow-text {
  font-family: "Inter Tight", sans-serif;
  font-weight: 400;
  font-size: 22px;
  line-height: 1.2;
  color: var(--red);
}

.metrics__title {
  font-family: "Inter Tight", sans-serif;
  font-weight: 600;
  font-size: 44px;
  line-height: 1.2;
  letter-spacing: -1px;
  color: var(--blue-250);
  text-align: center;
  margin: 0;
  max-width: 670px;
}

/* ----- Stats row ----- */
.metrics__row-wrap {
  position: relative;
  width: 100%;
}

/* Dotted connector line — Figma 2021:490
   In a 1440 container: left=138, width=1179
   → left 138/1440 = 9.583%, right offset (1440-138-1179)/1440 = 8.542%
   Vertical: top 47.32 (≈ 7px past icon centerline of y=40); we sit it at y=40 so it
   passes through icon centers and is masked by the navy-circle SVGs */
.metrics__row-wrap::before {
  content: "";
  position: absolute;
  top: 55px;
  left: 9.583%;
  right: 8.542%;
  border-top: 2px dashed #c4c5d7;
  z-index: 0;
}

.metrics__row {
  position: relative;
  z-index: 1;
  align-items: flex-start;
  /* Figma: items-start */
}

.metrics-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 25px;
  position: relative;
  z-index: 1;
}

/* Navy gradient circle (Figma 2021:534): linear from #0D286D to #040D35,
   80×80 rounded-full. SVG glyphs sit inside, ~40px (≈50% of container) */
.metrics-item__icon {
  width: 110px;
  height: 110px;
  flex-shrink: 0;
  border-radius: 50%;
  background: linear-gradient(180deg, #0d286d 0%, #040d35 100%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
  box-shadow: 0 8px 18px rgba(13, 38, 107, 0.18);
  transition:
    transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1),
    box-shadow 0.3s ease;
}

.metrics-item__icon img {
  width: 50%;
  height: 50%;
  display: block;
  object-fit: contain;
}

.metrics-item:hover .metrics-item__icon {
  box-shadow: 0 12px 26px rgba(13, 38, 107, 0.32);
}

.metrics-item:hover .metrics-item__icon {
  transform: translateY(-4px) scale(1.04);
}

.metrics-item__label {
  font-family: "Inter Tight", sans-serif;
  font-weight: 600;
  font-size: 20px;
  line-height: 32px;
  letter-spacing: -0.2px;
  color: var(--blue-250);
  text-align: center;
  display: block;
  width: 100%;
}

/* =========================================================
   Section 8: Our Blogs — Insights & Maintenance Tips
   Figma 2021:650
   Container: 1280 max, padding 80 0
   Heading: eyebrow "Our Blogs" red 22 + title 44 SemiBold #0D266B center max-w 670
   Cards: 3 col, gap 36, white, 1px border rgba(0,0,0,.15), radius 8
   Card image: 192h, full width
   Card content: 24 padding, gap ~7
     Category: 10 SemiBold red uppercase tracking 1
     Title:    22 SemiBold #333 line-height 24.75
   CTA: pill 169×49, red — uses .btn_buttons.btn--primary hover
   ========================================================= */
.blogs {
  background: var(--white);
  padding: 80px 0;
  color: var(--blue-250);
}

.blogs__wrap {
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 var(--frame-pad-x);
}

.blogs__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 48px;
}

.blogs__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0;
}

.blogs__eyebrow-mark {
  width: 64px;
  height: 28px;
  display: inline-block;
  flex-shrink: 0;
}

.blogs__eyebrow-mark svg {
  width: 100%;
  height: 100%;
  display: block;
}

.blogs__eyebrow-text {
  font-family: "Inter Tight", sans-serif;
  font-weight: 400;
  font-size: 22px;
  line-height: 1.2;
  color: var(--red);
}

.blogs__title {
  font-family: "Inter Tight", sans-serif;
  font-weight: 600;
  font-size: 44px;
  line-height: 1.2;
  letter-spacing: -1px;
  color: var(--blue-250);
  text-align: center;
  margin: 0;
  max-width: 670px;
}

/* ----- Cards row ----- */
.blogs__grid .row {
  margin-left: -18px;
  margin-right: -18px;
  row-gap: 36px;
  align-items: stretch;
}

.blogs__grid .row>[class*="col-"] {
  padding-left: 18px;
  padding-right: 18px;
  display: flex;
}

.blog-card {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  width: 100%;
  background: var(--white);
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 8px;
  overflow: hidden;
  transition:
    transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1),
    box-shadow 0.3s ease,
    border-color 0.3s ease;
}

.blog-card:hover {
  transform: translateY(-6px);
  border-color: rgba(0, 0, 0, 0.25);
  box-shadow: 0 12px 36px rgba(13, 38, 107, 0.14);
}

.blog-card__link {
  display: flex;
  flex-direction: column;
  width: 100%;
  text-decoration: none;
  color: inherit;
}

.blog-card__link:hover,
.blog-card__link:focus {
  text-decoration: none;
  color: inherit;
}

.blog-card__media {
  width: 100%;
  height: 192px;
  overflow: hidden;
}

.blog-card__media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.blog-card:hover .blog-card__media img {
  transform: scale(1.04);
}

.blog-card__content {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  background: var(--white);
  filter: drop-shadow(0 4px 2px rgba(0, 0, 0, 0.1));
  flex: 1 1 auto;
}

.blog-card__category {
  font-family: "Inter Tight", sans-serif;
  font-weight: 600;
  font-size: 10px;
  line-height: 15px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--red);
  display: block;
}

.blog-card__title {
  font-family: "Inter Tight", sans-serif;
  font-weight: 600;
  font-size: 22px;
  line-height: 24.75px;
  color: #333333;
  margin: 0;
}

/* ----- Footer CTA ----- */
.blogs__footer {
  display: flex;
  justify-content: center;
  margin-top: 48px;
}

.blogs__cta {
  width: 169px;
}

/* =========================================================
   Section 9: Live Demo — Experience the Demo
   Figma 37:1343
   Background: live_demo_bg.png + navy gradient overlay
     rgba(13,40,109,0.9) → rgba(4,13,53,0.9)
   Container: gap 65, padding 80
   Heading: eyebrow "Live Demo" red 22 + title 44 SemiBold white center
   Card: 1232×564, bg #2D3133, radius 20, contains MacBook composition
   Play button: 80×80 red circle, centered, opens Bootstrap modal w/ video
   ========================================================= */
.live-demo {
  position: relative;
  isolation: isolate;
  padding: 80px 0;
  color: var(--white);
  overflow: hidden;
}

.live-demo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("images/live_demo_bg.png") center/cover no-repeat;
  z-index: -2;
}

.live-demo__wrap {
  max-width: var(--frame-w);
  margin: 0 auto;
  padding: 0 var(--frame-pad-x);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 65px;
}

.live-demo__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
}

.live-demo__eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin: 0;
}

.live-demo__eyebrow-mark {
  width: 64px;
  height: 28px;
  display: inline-block;
  flex-shrink: 0;
}

.live-demo__eyebrow-mark svg {
  width: 100%;
  height: 100%;
  display: block;
}

.live-demo__eyebrow-text {
  font-family: "Inter Tight", sans-serif;
  font-weight: 400;
  font-size: 22px;
  line-height: 1.2;
  color: var(--red);
}

.live-demo__title {
  font-family: "Inter Tight", sans-serif;
  font-weight: 600;
  font-size: 44px;
  line-height: 1.2;
  letter-spacing: -1px;
  color: var(--white);
  text-align: center;
  margin: 0;
  max-width: 657px;
}

/* ----- Demo card -----
   No card background — Experience_live_demo.png is the full composition
   (light gradient + MacBook + screenshot). Adding a fill behind it caused
   a grey edge bleed. */
.live-demo__card {
  position: relative;
  width: 100%;
  background: #e6e6e6;
  border-radius: 20px;
  overflow: hidden;
  padding: 20px;
}

.live-demo__card-img {
  width: 100%;
  height: 564px;
  display: block;
  object-fit: contain;
}

/* Wrapper button is transparent — play_icon.svg already contains the
   red circle, white 30% border, blur and triangle (Figma 37:1392). */
.live-demo__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80px;
  height: 80px;
  background: transparent;
  border: 0;
  padding: 0;
  border-radius: 50%;
  cursor: pointer;
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.35));
  transition:
    transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1),
    filter 0.25s ease;
}

.live-demo__play:hover,
.live-demo__play:focus {
  transform: translate(-50%, -50%) scale(1.08);
  filter: drop-shadow(0 12px 32px rgba(255, 0, 0, 0.5));
  outline: none;
}

.live-demo__play:active {
  transform: translate(-50%, -50%) scale(1.02);
}

.live-demo__play img {
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

/* ----- Modal (Bootstrap 4 overrides) ----- */
.live-demo-modal .modal-dialog {
  width: auto;
  max-width: 900px;
  margin: 1.75rem auto;
}

.live-demo-modal .modal-content {
  background: #000;
  border: 0;
  border-radius: 12px;
  /* overflow: hidden; */
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.live-demo-modal .modal-body {
  padding: 0;
  position: relative;
}

.live-demo-modal__video {
  position: relative;
  width: 100%;
  padding-top: 50%;
  /* 16:9 */
  background: #000;
}

.live-demo-modal__video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.live-demo-modal__close {
  position: absolute;
  top: -42px;
  right: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #ff0000;
  border: 0;
  color: var(--white);
  font-size: 24px;
  cursor: pointer;
  opacity: 1;
  text-shadow: none;
  z-index: 1;
  transition: transform 0.2s ease;
  display: flex;
  align-items: center;
  padding-bottom: 6px;
  justify-content: center;
}

.live-demo-modal__close:hover,
.live-demo-modal__close:focus {
  color: var(--white);
  transform: scale(1.1);
  outline: none;
}

/* =========================================================
   Section 10: FAQ — Frequently Asked Questions
   Figma 37:1472
   Container: 1280 max, padding 80
   Heading: eyebrow "FAQ" red 22 + title 44 SemiBold #0D266B center max-w 670
   List: 826 wide, gap 16, centered
   Item: white, 1px #d6d6d6, radius 15, px 25 / py 20
     Question: 18 Medium #091733, line-height 30
     Icon: 22 plus, rotates to × when expanded
   ========================================================= */
.faq {
  background: var(--white);
  padding: 80px 0;
  color: var(--blue-250);
}

.faq__wrap {
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 var(--frame-pad-x);
}

.faq__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 48px;
}

.faq__eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin: 0;
}

.faq__eyebrow-mark {
  width: 64px;
  height: 28px;
  display: inline-block;
  flex-shrink: 0;
}

.faq__eyebrow-mark svg {
  width: 100%;
  height: 100%;
  display: block;
}

.faq__eyebrow-text {
  font-family: "Inter Tight", sans-serif;
  font-weight: 400;
  font-size: 22px;
  line-height: 1.2;
  color: var(--red);
}

.faq__title {
  font-family: "Inter Tight", sans-serif;
  font-weight: 600;
  font-size: 44px;
  line-height: 1.2;
  letter-spacing: -1px;
  color: var(--blue-250);
  text-align: center;
  margin: 0;
  max-width: 670px;
}

/* ----- List ----- */
.faq__list {
  width: 100%;
  max-width: 826px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.faq-item {
  position: relative;
  isolation: isolate;
  background: var(--white);
  border: 1px solid #d6d6d6;
  border-radius: 15px;
  overflow: hidden;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

/* Blue gradient overlay (Figma 2062:691 — open state) */
.faq-item::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, #0d286d 0%, #040d35 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: -1;
  pointer-events: none;
}

.faq-item.is-open {
  border-color: rgba(13, 38, 107, 0.4);
  box-shadow: 0 6px 22px rgba(13, 38, 107, 0.06);
}

.faq-item.is-open::before {
  opacity: 1;
}

.faq-item__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 20px 25px;
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
  color: #091733;
  font-family: "Inter Tight", sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 30px;
  transition: color 0.3s ease;
}

.faq-item__trigger:focus {
  outline: none;
}

.faq-item.is-open .faq-item__trigger {
  color: var(--white);
}

.faq-item__question {
  flex: 1 1 auto;
}

.faq-item__icon {
  position: relative;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  display: inline-block;
}

.faq-item__icon::before,
.faq-item__icon::after {
  content: "";
  position: absolute;
  background: #091733;
  border-radius: 1px;
  transition:
    background 0.3s ease,
    transform 0.25s ease,
    opacity 0.25s ease;
}

.faq-item__icon::before {
  /* horizontal bar */
  top: 50%;
  left: 0;
  width: 100%;
  height: 1.5px;
  transform: translateY(-50%);
}

.faq-item__icon::after {
  /* vertical bar */
  left: 50%;
  top: 0;
  width: 1.5px;
  height: 100%;
  transform: translateX(-50%);
}

.faq-item.is-open .faq-item__icon::before,
.faq-item.is-open .faq-item__icon::after {
  background: var(--white);
}

.faq-item.is-open .faq-item__icon::after {
  transform: translateX(-50%) scaleY(0);
  opacity: 0;
}

.faq-item__answer {
  padding: 0 25px 22px;
}

.faq-item__answer p {
  color: #4a5775;
  font-family: "Inter Tight", sans-serif;
  font-size: 16px;
  line-height: 26px;
  margin: 0;
  transition: color 0.3s ease;
}

.faq-item.is-open .faq-item__answer p {
  color: var(--white);
}

.faq-item__answer[hidden] {
  display: none;
}

.faq__more {
  display: flex;
  justify-content: center;
  margin-top: 32px;
}

/* =========================================================
   Section 11: Contact CTA — Take Control of Your Property Maintenance
   Figma 43:1677
   Background: linear gradient #0D286D → #040D35 (vertical)
   Container: padding 80 80 40, gap 60, items left-aligned
   Heading: 46 SemiBold white tracking -1
   Subtitle: 18 Regular white line-height 26
   CTA: 172×49 red pill — uses .btn_buttons.btn--primary
   Decorative: red zigzag bg + 2 rotated dashboard cards on the right
   ========================================================= */
.cta-contact {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(180deg, #0d286d 0%, #040d35 100%);
  padding: 80px 0 40px;
  color: var(--white);
}

.cta-contact__wrap {
  position: relative;
  z-index: 2;
  max-width: var(--frame-w);
  margin: 0 auto;
  padding: 0 var(--frame-pad-x);
}

.cta-contact__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  max-width: 540px;
}

.cta-contact__title {
  font-family: "Inter Tight", sans-serif;
  font-weight: 600;
  font-size: 46px;
  line-height: 1.2;
  letter-spacing: -1px;
  color: var(--white);
  margin: 0;
}

.cta-contact__subtitle {
  font-family: "Inter Tight", sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 26px;
  color: var(--white);
  margin: 0;
}

.cta-contact__cta-wrap {
  padding: 14px 0;
}

.home-pg-cta {
  width: 150px;
}

/* ----- Right-side rotated dashboard cards (decorative)
   Figma 2021:772 — cluster anchored to the right edge, vertically centered */
.cta-contact__cards-img {
  position: absolute;
  right: 0;
  width: 56%;
  max-width: 860px;
  /* height: auto; */
  z-index: 1;
  pointer-events: none;
  user-select: none;
  bottom: 0;
}

/* =====================================================
   Site Footer — Figma node 2021:703
   ===================================================== */
.site-footer .container {
  max-width: 1349px;
}

.site-footer {
  background: #e8e8e8;
  border-radius: 16px;
  padding: 50px 0;
  padding-bottom: 30px;
}

.site-footer__card {
  display: flex;
  flex-direction: column;
  gap: 50px;
}

.site-footer__top {
  width: 100%;
}

.site-footer__top>.row {
  align-items: flex-start;
  margin-left: 0;
  margin-right: 0;
}

.site-footer__top>.row>[class*="col-"] {
  padding-left: 0;
  padding-right: 0;
}

/* ----- Brand column ----- */
.site-footer__brand {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 319px;
}

.site-footer__logo {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}

.site-footer__logo img {
  display: block;
  width: 180px;
  max-width: 100%;
  height: auto;
}

.site-footer__tagline {
  margin: 0;
  font-family: "Inter Tight", "ProximaNova-Regular", Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.3;
  color: #6a6a6a;
}

.site-footer__socials {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 8.824px;
}

.site-footer__socials li {
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-footer__socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44.118px;
  height: 44.118px;
  border-radius: 50%;
  background: #122242;
  color: #ffffff;
  font-size: 16px;
  text-decoration: none;
  transition:
    background-color 0.2s ease,
    transform 0.2s ease;
}

.site-footer__socials a:hover,
.site-footer__socials a:focus {
  background: #ff0000;
  color: #ffffff;
  transform: translateY(-2px);
}

.site-footer__socials i {
  line-height: 1;
}

/* ----- Right-side columns ----- */
.site-footer__columns {
  margin-left: auto !important;
  margin-right: 0 !important;
  justify-content: flex-end;
  row-gap: 24px;
  width: 80%;
}

.site-footer__columns>[class*="col-"] {
  padding-left: 5px;
  padding-right: 5px;
}

.site-footer__col {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.site-footer__heading {
  margin: 0;
  font-family: "Inter Tight", "ProximaNova-Regular", Arial, sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 20px;
  color: #000000;
}

.site-footer__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.site-footer__list li {
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-footer__list a {
  display: inline-block;
  padding: 2.5px 0 1.5px;
  font-family: "Inter Tight", "ProximaNova-Regular", Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  color: #6a6a6a;
}

.site-footer__list a:hover,
.site-footer__list a:focus {
  color: #ff0000;
}

/* ----- Contact column ----- */
.site-footer__col--contact {
  gap: 30px;
}

.site-footer__contact {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.site-footer__contact-value {
  font-family: "Inter Tight", "ProximaNova-Regular", Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  color: #6a6a6a;
}

.site-footer__contact-value:hover,
.site-footer__contact-value:focus {
  color: #ff0000;
}

/* ----- Bottom row (copyright + legal) ----- */
.site-footer__bottom {
  width: 100%;
}

.site-footer__bottom>.row {
  margin-left: 0;
  margin-right: 0;
}

.site-footer__bottom>.row>[class*="col-"] {
  padding-left: 0;
  padding-right: 0;
}

.site-footer__copyright,
.site-footer__copyright a {
  margin: 0;
  font-family: "Inter Tight", "ProximaNova-Regular", Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.2;
  color: #6a6a6a;
}

.site-footer__legal {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 40px;
  flex-wrap: wrap;
}

.site-footer__legal li {
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-footer__legal a {
  font-family: "Inter Tight", "ProximaNova-Regular", Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.2;
  color: #6a6a6a;
  white-space: nowrap;
}

.site-footer__legal a:hover,
.site-footer__legal a:focus,
.site-footer__copyright a:hover {
  color: #ff0000;
}

.faq__more-btn {
  width: 150px;
}

/* =====================================================================
   RESPONSIVE — CONSOLIDATED MEDIA QUERIES
   ---------------------------------------------------------------------
   Breakpoint convention (Bootstrap 5):
     xl  ≥ 1200px         max-width: 1199.98px = xl down (tablet landscape)
     lg  ≥  992px         max-width:  991.98px = lg down (tablet portrait)
     md  ≥  768px         max-width:  767.98px = md down (mobile)
     sm  ≥  576px
     xs  <  480px
   Cascade:
     min-width queries first (progressive enhancement),
     then max-width queries from largest to smallest (override stack).
   ===================================================================== */

/* ---------------------------------------------------------------------
   ≥ 1200px (xl up) — desktop container width
   --------------------------------------------------------------------- */
@media (min-width: 1200px) {
  .container {
    max-width: 1600px !important;
  }

  :root {
    /* Unified desktop container width across all pages (24px side gutter so
       content never touches the edge on screens narrower than 1600px). */
    --frame-w: 1600px;
    --frame-pad-x: 24px;
  }
}

/* ---------------------------------------------------------------------
   ≥ 1250px — widescreen container
   --------------------------------------------------------------------- */
@media (min-width: 1250px) {
  .container {
    max-width: 1600px !important;
  }
}

@media (max-width: 1440px) {
  .hero__zigzag {
    max-width: 100%;
    width: 75%;
    top: -50px;
  }

  .hero {
    padding-bottom: 130px;
  }

  .site-header-inner #primary-menu {
    gap: 40px 60px;
  }
}

/* ---------------------------------------------------------------------
   ≤ 1199.98px (xl down) — tablet landscape
   --------------------------------------------------------------------- */
@media (max-width: 1199.98px) {

  /* Header */
  .site-header,
  .site-header>.container {
    padding: 10px 32px;
  }

  .site-header-inner {
    gap: 24px;
    padding: 12px 20px;
  }

  .site-header-inner .main-navigation {
    padding: 0 16px;
  }

  .site-header-inner #primary-menu {
    gap: 24px 40px;
  }

  /* Navbar */
  .navbar__pill {
    padding: 0 16px;
  }

  .navbar__menu {
    gap: 24px;
    padding: 0 12px;
  }

  .navbar__logo-mark {
    width: 52px;
    height: 52px;
    font-size: 24px;
  }

  .navbar__logo-text {
    font-size: 24px;
  }

  /* Hero */
  .hero__title {
    font-size: 52px;
    line-height: 1.1;
    letter-spacing: -1px;
  }

  /* Section 3 — How It Works */
  .how__tabs-list {
    height: auto;
    gap: 12px;
  }

  .how__panels {
    height: 520px;
  }

  .how__panels::after {
    width: 540px;
    height: 540px;
    transform: translate(calc(-50% + 270px), calc(-50% + 370px));
  }

  /* Section 4 — Features */
  .feature-card {
    padding: 36px;
  }

  .feature-card--with-media {
    gap: 20px;
  }

  .feature-card__media {
    width: 280px;
    height: 200px;
  }

  .feature-card__media--chart {
    width: 200px;
    height: 200px;
  }

  /* Section 5 — Compare */
  .compare-card {
    padding: 24px;
    gap: 24px;
  }

  .compare-card__icon {
    width: 70px;
    height: 70px;
    border-radius: 35px;
  }

  .compare-card__icon img {
    width: 48px;
    height: 48px;
  }

  /* Section 6 — Metrics */
  .metrics-item__label {
    font-size: 18px;
    line-height: 26px;
  }

  /* Section 9 — Live Demo */
  .live-demo__wrap {
    gap: 48px;
  }

  /* Section 11 — Contact CTA */
  .cta-contact__title {
    font-size: 40px;
  }

  .cta-contact__cards-img {
    width: 50%;
  }

  /* Footer */
  .site-footer__card {
    gap: 40px;
  }

  .site-footer__brand {
    max-width: 100%;
  }

  /* Shared section title size */
  .features__title,
  .compare__title,
  .metrics__title,
  .blogs__title,
  .live-demo__title,
  .faq__title {
    font-size: 38px;
  }

  .site-footer__columns {
    width: 100%;
  }
}

/* ---------------------------------------------------------------------
   ≤ 991.98px (lg down) — tablet portrait
   --------------------------------------------------------------------- */
@media (max-width: 991.98px) {

  /* Header — collapse to mobile menu */
  .site-header,
  .site-header>.container {
    padding: 10px 16px;
  }

  .site-header-inner {
    flex-wrap: wrap;
    gap: 0;
    padding: 14px 18px;
    min-height: 0;
    justify-content: space-between;
  }

  .site-header-inner .site-branding {
    order: 1;
  }

  .site-header-inner .header-cta {
    order: 2;
    margin-left: auto;
    display: none;
  }

  .site-header-inner #mmb {
    display: inline-block;
    order: 3;
    margin-left: 12px;
  }

  .site-header-inner .main-navigation {
    order: 4;
    flex: 1 1 100%;
    padding: 0;
    justify-content: stretch;
  }

  .site-header-inner #primary-menu {
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
    text-align: left;
  }

  .site-header-inner #primary-menu li {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }

  .site-header-inner #primary-menu li a {
    display: block;
    padding: 14px 6px;
    line-height: 1.3;
  }

  .site-header-inner #primary-menu .sub-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    background: transparent;
    width: 100%;
    border-radius: 0;
  }

  .site-header-inner #primary-menu .sub-menu li a {
    padding-left: 22px;
    border-bottom: 0;
  }

  /* Navbar */
  .navbar__menu {
    gap: 16px;
  }

  /* Section 2 — Problem */
  .problem-card {
    min-height: 220px;
  }

  /* Section 3 — How (stack tabs above panel) */
  .how__tabs-col,
  .how__panel-col {
    display: block;
  }

  .how__tabs-list {
    height: auto;
    margin-bottom: 24px;
  }

  .how__panels {
    height: 460px;
  }

  .how__panels::after {
    width: 460px;
    height: 460px;
    transform: translate(calc(-50% + 230px), calc(-50% + 320px));
  }

  /* Section 4 — Features (stack media below content) */
  .feature-card {
    min-height: 0;
  }

  .feature-card--with-media {
    flex-direction: column;
    align-items: stretch;
  }

  .feature-card__media,
  .feature-card__media--chart {
    width: 100%;
    height: 200px;
    margin-top: 8px;
  }

  .feature-card__media--chart {
    align-self: center;
    width: 222px;
    height: 222px;
  }

  /* Section 5 — Compare */
  .compare {
    padding: 72px 0;
    padding-bottom: 500px;
  }

  .compare__head {
    margin-bottom: 32px;
    align-items: center;
  }

  .compare__image-col {
    margin-top: 40px;
  }

  .compare__image img {
    max-width: 100%;
    width: 100%;
  }

  .compare__image {
    width: 70%;
    align-items: end;
    bottom: 40px;
  }

  .compare__content-col {
    position: relative;
    z-index: 1;
  }

  .compare__title {
    text-align: center;
  }

  /* Section 6 — Metrics (drop connector line) */
  .metrics__row-wrap::before {
    display: none;
  }

  .metrics__row>[class*="col-"] {
    margin-bottom: 32px;
  }

  .metrics__row>[class*="col-"]:last-child {
    margin-bottom: 0;
  }

  /* Section 8 — Blogs */
  .blogs__grid .row {
    row-gap: 28px;
    justify-content: center;
  }

  /* Section 11 — Contact CTA */
  .cta-contact {
    padding: 60px 0 320px;
  }

  .cta-contact__cards-img {
    width: 100%;
  }

  .cta-contact__content {
    max-width: 100%;
    align-items: center;
    text-align: center;
  }

  /* Footer */
  .site-footer__card {
    gap: 30px;
    padding: 0px 20px;
  }

  .site-footer__top>.row {
    row-gap: 30px;
  }

  .site-footer__columns {
    justify-content: flex-start;
    row-gap: 28px;
  }

  .site-footer__brand {
    max-width: 360px;
    margin: auto;
    text-align: center;
  }

  .site-footer__socials,
  .site-footer__logo {
    justify-content: center;
  }

  /* Shared section title size */
  .problem__title,
  .how__title {
    font-size: 36px;
  }

  .how__title {
    max-width: 100%;
  }

  .hero {
    padding-bottom: 120px;
    padding-top: 150px;
  }

  .hero__content-col {
    padding: 0px;
  }

  .hero__title {
    font-size: 35px;
  }

  .hero__visual-col {
    padding-left: 20px;
  }

  .btn_buttons {
    font-size: 14px;
    padding: 4px 20px;
    width: auto;
  }

  .feature-card__content {
    align-items: center;
    text-align: center;
  }

  .feature-card__body {
    text-align: center;
  }

  .site-header-inner #primary-menu li:last-child {
    display: inline-block;
    border: none;
    margin-top: 10px;
  }

  .site-header-inner #primary-menu li a:hover:before {
    display: none;
  }

  .site-header-inner #primary-menu li:last-child a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 151px;
    height: 45px;
    padding: 14px 20px;
    box-sizing: border-box;
    background-color: #ff0000;
    color: #ffffff;
    font-family: "Inter Tight", "ProximaNova-Regular", Arial, sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 16px;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    border-radius: 100px;
    box-shadow:
      0 1.04px 2.08px rgba(255, 0, 0, 0.6),
      inset -1.04px 1.04px 20.26px rgba(252, 180, 180, 0.82);
    transition:
      background-color 0.2s ease,
      transform 0.2s ease;
    position: relative;
  }

  .site-header-inner #primary-menu li:last-child a:after {
    content: "\f061";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
  }
}

/* ---------------------------------------------------------------------
   ≤ 767.98px (md down) — mobile
   --------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .modal-dialog {
    margin: 0 10px !important;
  }

  /* Mobile menu toggle */
  .mm,
  #mm {
    display: block;
  }

  #primary-menu {
    display: none;
  }

  /* Hero */
  .hero {
    border-radius: 0;
    padding-bottom: 60px;
    padding-top: 120px;
  }

  .hero .row {
    flex-direction: column-reverse;
  }

  .hero__content-col {
    padding: 30px 0 0px;
    text-align: center;
  }

  .hero__content {
    align-items: center;
    max-width: 100%;
  }

  .hero__text {
    align-items: center;
  }

  .hero__title {
    font-size: 40px;
    line-height: 1.15;
    max-width: 100%;
  }

  .hero__subtitle {
    max-width: 100%;
  }

  .hero__cta {
    justify-content: center;
    flex-wrap: wrap;
  }

  .hero__visual-col {
    padding-top: 20px;
    padding-bottom: 20px;
  }

  .hero__visual {
    justify-content: center;
  }

  .hero__zigzag {
    top: 100px;
    bottom: 0;
    right: -25%;
    width: 90%;
    max-width: 600px;
    transform: none;
    opacity: 0.55;
  }

  /* Navbar */
  .navbar__pill {
    height: 72px;
    padding: 0 12px;
  }

  /* Shared section padding */
  .problem,
  .how {
    padding: 48px 0;
  }

  .features,
  .metrics,
  .blogs,
  .live-demo,
  .faq {
    padding: 56px 0;
  }

  .cta-contact {
    padding: 50px 0 180px;
  }

  /* Shared head spacing */
  .problem__head,
  .features__head {
    margin-bottom: 36px;
  }

  .compare__head,
  .metrics__head,
  .blogs__head,
  .faq__head {
    margin-bottom: 32px;
  }

  /* Shared section title size */
  .problem__title,
  .how__title,
  .features__title,
  .compare__title,
  .metrics__title,
  .blogs__title,
  .live-demo__title,
  .faq__title {
    font-size: 28px;
    letter-spacing: -0.5px;
  }

  .cta-contact__title {
    font-size: 30px;
    letter-spacing: -0.5px;
  }

  /* Shared eyebrow size */
  .problem__eyebrow-text,
  .how__eyebrow-text,
  .features__eyebrow-text,
  .compare__eyebrow-text,
  .metrics__eyebrow-text,
  .blogs__eyebrow-text,
  .live-demo__eyebrow-text,
  .faq__eyebrow-text {
    font-size: 18px;
  }

  /* Section 2 — Problem */
  .problem-card {
    min-height: 0;
    padding: 24px 18px;
    align-items: center;
  }

  .problem-card__body,
  .how__title {
    text-align: center;
  }

  /* Section 3 — How */
  .how__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    margin-bottom: 36px;
  }

  .how__head-text {
    align-items: center;
  }

  .how__cta {
    width: auto;
    padding: 0 18px;
  }

  .how-tab {
    padding: 14px 20px;
    text-align: center;
  }

  .how-tab__title {
    font-size: 18px;
    line-height: 24px;
  }

  .how__panels {
    height: 320px;
  }

  .how__panels::after {
    width: 340px;
    height: 340px;
    transform: translate(calc(-50% + 170px), calc(-50% + 230px));
  }

  .how-panel {
    padding: 24px;
  }

  a.btn_buttons.btn--primary.how__cta {
    margin: auto;
  }

  .how-tab span,
  .how-tab h3 {
    width: 100%;
  }

  /* Section 4 — Features */
  .feature-card {
    padding: 28px 24px;
  }

  .feature-card__title {
    font-size: 20px;
  }

  .feature-card__body {
    font-size: 16px;
    line-height: 24px;
  }

  .feature-card__media {}

  /* Section 5 — Compare */
  .compare {
    padding-bottom: 350px;
  }

  .compare__image {
    width: 350px;
    bottom: 50px;
  }

  .compare__cards {
    flex-direction: column;
    gap: 16px;
  }

  .compare-card {
    max-width: 100%;
  }

  .compare-card__title {
    font-size: 20px;
  }

  .compare-item__text {
    font-size: 16px;
    line-height: 22px;
  }

  /* Section 6 — Metrics */
  .metrics-item {
    gap: 16px;
  }

  .metrics-item__icon {
    width: 64px;
    height: 64px;
  }

  .metrics-item__label {
    font-size: 16px;
    line-height: 22px;
  }

  /* Section 8 — Blogs */
  .blog-card__media {
    height: 180px;
  }

  .blog-card__content {
    padding: 20px;
    text-align: center;
  }

  .blog-card__title {
    font-size: 20px;
    line-height: 1.25;
  }

  .blogs__footer {
    margin-top: 32px;
  }

  /* Section 9 — Live Demo */
  .live-demo__wrap {
    gap: 32px;
  }

  .live-demo__card {
    border-radius: 14px;
    padding: 10px;
  }

  .live-demo__play {
    width: 54px;
    height: 54px;
  }

  .live-demo-modal__close {
    top: -36px;
    font-size: 24px;
  }

  .live-demo__card-img {
    height: 250px;
  }

  /* Section 10 — FAQ */
  .faq-item__trigger {
    padding: 16px 20px;
    font-size: 16px;
    line-height: 24px;
  }

  .faq-item__answer {
    padding: 0 20px 18px;
    font-size: 15px;
    line-height: 24px;
  }

  /* Section 11 — Contact CTA */
  .cta-contact__subtitle {
    font-size: 16px;
    line-height: 24px;
  }

  /* Footer */
  .site-footer {
    padding: 50px 0 15px;
  }

  .site-footer__card {
    padding: 0;
    gap: 30px;
    border-radius: 14px;
  }

  .site-footer__logo img {
    width: 220px;
  }

  .site-footer__columns>[class*="col-"] {
    padding-left: 8px;
    padding-right: 8px;
    text-align: center;
  }

  .site-footer__col--contact {
    gap: 24px;
  }

  .site-footer__bottom>.row {
    row-gap: 12px;
    flex-direction: column-reverse;
  }

  .site-footer__legal {
    justify-content: center;
    gap: 24px;
  }

  .site-footer__copyright {
    text-align: center;
  }
}

/* ---------------------------------------------------------------------
   ≤ 575.98px (sm down) — large phone
   --------------------------------------------------------------------- */
@media (max-width: 575.98px) {
  .hero__title {
    font-size: 36px;
  }

  .problem__title,
  .how__title,
  .features__title,
  .compare__title,
  .metrics__title,
  .blogs__title,
  .live-demo__title,
  .faq__title {
    font-size: 26px;
  }

  .cta-contact__title {
    font-size: 28px;
  }

  .site-footer__columns>[class*="col-"] {
    flex: 0 0 50%;
    max-width: 50%;
  }

  /* Give the video more width on phones (smaller side gutters). */
  .live-demo-modal .modal-dialog {
    margin: 1rem auto;
  }
}

/* ---------------------------------------------------------------------
   Live Demo modal — short/landscape viewports: keep the 16:9 video fully
   visible by capping the dialog width to what the viewport height allows
   (height = 56.25% of width, so 150vh width ≈ 84vh tall).
   --------------------------------------------------------------------- */
@media (max-height: 500px) {
  .live-demo-modal .modal-dialog {
    max-width: 150vh;
  }
}

/* ---------------------------------------------------------------------
   ≤ 480px (xs) — small mobile
   --------------------------------------------------------------------- */
@media (max-width: 480px) {

  /* Hero / Navbar */
  .hero__title {
    font-size: 32px;
  }

  .hero__subtitle {
    font-size: 17px;
    line-height: 1.6;
  }

  .navbar__logo-mark {
    width: 44px;
    height: 44px;
    font-size: 20px;
  }

  .navbar__logo-text {
    font-size: 20px;
  }

  .btn--primary,
  .btn--outline {
    width: auto;
    padding-left: 16px;
    padding-right: 16px;
  }

  /* Header CTA */
  .site-header-inner .header-cta {
    width: auto;
    min-width: 120px;
    padding: 10px 16px;
    height: 40px;
    font-size: 14px;
  }

  .site-header-inner .site-branding .custom-logo,
  .site-header-inner .site-branding img {
    max-height: 48px;
  }

  /* Footer */
  .site-footer__card {
    padding: 0;
  }

  .site-footer__logo img {
    width: 200px;
  }

  .site-footer__heading {
    font-size: 17px;
  }
}

/* =====================================================================
   ABOUT PAGE  (template: pages_template/about-template.php)
   Figma node 2330:221. Static; structured for later Meta Box mapping.
   Reuses global tokens (--red, --blue-250, --gray-200, --frame-w,
   --frame-pad-x) and the shared .btn_buttons / .cta-contact styles.
   ===================================================================== */

/* ----- Shared About helpers ----- */
.about-eyebrow {
  display: inline-block;
  font-family: "Inter Tight", sans-serif;
  font-weight: 400;
  font-size: 22px;
  line-height: 1.2;
  color: var(--red);
}

.about-section-title {
  margin: 0;
  font-family: "Inter Tight", sans-serif;
  font-weight: 600;
  font-size: 44px;
  line-height: 1.2;
  letter-spacing: -1px;
  color: var(--blue-250);
}

.about-section-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  margin-bottom: 50px;
}

.about-hero__wrap,
.about-mission__wrap,
.about-values__wrap,
.about-journey__wrap,
.about-team__wrap {
  width: 100%;
  max-width: var(--frame-w);
  margin: 0 auto;
  padding: 0 var(--frame-pad-x);

  max-width: 1600px;
}

/* ----- Hero ----- */
.about-hero {
  position: relative;
  isolation: isolate;
  background: url(images/about_hero.png) center bottom / cover no-repeat;
  padding-bottom: 80px;
  padding-top: 100px;
  min-height: 750px;
}

.about-hero__wrap {
  padding: 150px 0;
}

.about-hero__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  max-width: 640px;
}

.about-hero__title,
.about-hero__subtitle {
  width: 100%;
  overflow-wrap: break-word;
}

.about-hero__title {
  margin: 0;
  font-family: "Inter Tight", sans-serif;
  font-weight: 700;
  font-size: 45px;
  line-height: 55px;
  letter-spacing: -2px;
  color: var(--white);
}

.about-hero__subtitle {
  margin: 0;
  max-width: 582px;
  font-family: "Inter Tight", sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 34px;
  color: var(--white);
}

/* ----- Mission: Why we Built AMPD ----- */
.about-mission {
  padding: 120px 0 120px;
}

.about-mission__row {
  align-items: flex-start;
  /* 62px gap between the two columns (Figma), outer edges flush */
  margin-left: -31px;
  margin-right: -31px;
}

.about-mission__row>[class*="col-"] {
  padding-left: 31px;
  padding-right: 31px;
}

.about-mission__col {
  display: flex;
  flex-direction: column;
}

.about-mission__col--left {
  gap: 30px;
}

.about-mission__col--right {
  gap: 24px;
}

.about-mission__head {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.about-mission__media {
  line-height: 0;
}

.about-mission__media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
}

.about-mission__quote {
  margin: 0;
  border-left: 2px solid #0d286d;
  padding: 10px 0 10px 16px;
  font-family: "Inter Tight", sans-serif;
  font-weight: 500;
  font-style: italic;
  font-size: 24px;
  line-height: 36px;
  color: var(--blue-250);
}

.about-mission__quote-accent {
  color: var(--red);
}

.about-mission__body {
  margin: 0;
  font-family: "Inter Tight", sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 32px;
  color: #333333;
}

/* ----- Values: What we Stand for ----- */
.about-values {
  padding: 80px 0;
  background: #f2f4f6;
}

.about-values__grid {
  margin-left: -10px;
  margin-right: -10px;
  row-gap: 20px;
}

.about-values__grid>[class*="col-"] {
  padding-left: 10px;
  padding-right: 10px;
  display: flex;
}

.about-value-card {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  min-height: 320px;
  padding: 30px 20px;
  background: var(--white);
  border: 1.219px solid rgba(196, 197, 215, 0.15);
  border-radius: 9.75px;
  box-shadow: 0 14.625px 19.5px rgba(25, 28, 30, 0.06);
  transition:
    transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1),
    box-shadow 0.3s ease;
}

.about-value-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 34px rgba(25, 28, 30, 0.1);
}

.about-value-card__icon {
  width: 70px;
  height: 70px;
  display: inline-flex;
  flex-shrink: 0;
}

.about-value-card__icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Icon default: grey circle + red glyph. Smooth recolor on card hover. */
.about-value-card__icon .ic-bg {
  fill: var(--gray-5);
  transition: fill 0.3s ease;
}

.about-value-card__icon .ic-fg {
  fill: var(--red);
  transition: fill 0.3s ease;
}

/* Hover: red circle + white glyph (matches design reference) */
.about-value-card:hover .ic-bg {
  fill: var(--red);
}

.about-value-card:hover .ic-fg {
  fill: var(--white);
}

.about-value-card__title {
  margin: 0;
  font-family: "Inter Tight", sans-serif;
  font-weight: 600;
  font-size: 22px;
  line-height: 1.2;
  color: var(--blue-250);
  text-transform: capitalize;
}

.about-value-card__body {
  margin: 0;
  font-family: "Inter Tight", sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 26px;
  color: var(--gray-200);
}

/* ----- Journey: Our Product Journey (timeline) ----- */
.about-journey {
  padding: 142px 0 120px;
}

.about-journey__track {
  position: relative;
  display: flex;
  gap: 30px;
}

/* Dashed connector line — behind the dots, passes through their centres */
.about-journey__track::before {
  content: "";
  position: absolute;
  top: 7px;
  left: 0;
  right: 0;
  height: 2px;
  background-image: repeating-linear-gradient(to right,
      #d6d6d6 0,
      #d6d6d6 6px,
      transparent 6px,
      transparent 14px);
  z-index: 0;
}

.about-step {
  flex: 1 1 0;
  min-width: 0;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
}

/* Timeline dot — solid red core with a soft light-red halo (pure CSS) */
.about-step__dot {
  width: 16px;
  height: 16px;
  margin-bottom: 30px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 0 6px rgba(255, 0, 0, 0.16);
  position: relative;
  z-index: 1;
}

.about-step__head {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  margin-bottom: 14px;
}

.about-step__icon {
  display: inline-flex;
  align-items: flex-end;
}

.about-step__icon img {
  height: 34px;
  width: auto;
  display: block;
}

.about-step__title {
  margin: 0;
  font-family: "Inter Tight", sans-serif;
  font-weight: 600;
  font-size: 20px;
  line-height: 1.2;
  color: var(--blue-250);
}

.about-step__body {
  margin: 0;
  font-family: "Inter Tight", sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 26px;
  color: var(--gray-200);
}

/* ----- Team: The People Behind AMPD ----- */
.about-team {
  padding: 0 0 120px;
}

.about-team__grid {
  margin-left: -15px;
  margin-right: -15px;
  row-gap: 30px;
}

.about-team__grid>[class*="col-"] {
  padding-left: 15px;
  padding-right: 15px;
  display: flex;
}

.about-team-card {
  width: 100%;
  min-height: 446px;
  display: flex;
  align-items: stretch;
  gap: 20px;
  padding: 20px 20px 30px;
  background: var(--white);
  border-radius: 15px;
  box-shadow: 0 3px 60px -11px rgba(0, 0, 0, 0.2);
  overflow: hidden;
}

.about-team-card__photo {
  flex: 1 1 0;
  min-width: 0;
  border-radius: 6px;
  overflow: hidden;
}

.about-team-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 6px;
}

.about-team-card__info {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
}

.about-team-card__heading {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.about-team-card__name {
  margin: 0;
  font-family: "Inter Tight", sans-serif;
  font-weight: 600;
  font-size: 30px;
  line-height: 1.2;
  letter-spacing: -1px;
  color: var(--blue-250);
  text-transform: capitalize;
}

.about-team-card__role {
  font-family: "Inter Tight", sans-serif;
  font-weight: 400;
  font-size: 22px;
  line-height: 1.2;
  color: var(--red);
}

.about-team-card__bio {
  margin: 0;
  font-family: "Inter Tight", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 24px;
  color: var(--gray-200);
}

/* ----- About responsive ----- */
@media (max-width: 1199.98px) {
  .about-section-title {
    font-size: 38px;
  }

  .about-hero__title {
    font-size: 40px;
    line-height: 48px;
  }

  .about-team-card__name {
    font-size: 26px;
  }
}

@media (max-width: 991.98px) {
  .about-hero {
    min-height: 0;
    padding: 150px 0 120px;
  }

  .about-hero__title {
    font-size: 36px;
    line-height: 44px;
    letter-spacing: -1px;
  }

  .about-mission {
    padding: 70px 0;
  }

  .about-mission__row {
    margin-left: 0;
    margin-right: 0;
  }

  .about-mission__row>[class*="col-"],
  .about-mission__col {
    padding-left: 0;
    padding-right: 0;
  }

  .about-mission__col--right {
    margin-top: 40px;
  }

  .about-values,
  .about-journey,
  .about-team {
    padding: 70px 0;
  }

  .about-journey__track {
    flex-direction: column;
    gap: 36px;
  }

  .about-journey__track::before {
    display: none;
  }

  .about-step__dot {
    margin-bottom: 16px;
  }
}

@media (max-width: 767.98px) {
  .about-hero {
    padding: 130px 0 90px;
  }

  /* Mobile gutter so hero text never touches/overflows the viewport edge
     (shared by About, Blog, Contact and Features heroes). */
  .about-hero__wrap {
    padding-left: 20px;
    padding-right: 20px;
  }

  .about-hero__title {
    font-size: 30px;
    line-height: 38px;
  }

  .about-hero__subtitle {
    font-size: 16px;
    line-height: 26px;
  }

  .about-section-title {
    font-size: 30px;
  }

  .about-section-head {
    margin-bottom: 36px;
  }

  .about-mission__quote {
    font-size: 20px;
    line-height: 30px;
  }

  .about-mission__body,
  .about-step__body,
  .about-value-card__body {
    font-size: 16px;
    line-height: 26px;
  }

  .about-team-card {
    flex-direction: column;
    min-height: 0;
    align-items: stretch;
  }

  .about-team-card__photo {
    flex: 0 0 auto;
    height: 280px;
  }

  .about-team-card__name {
    font-size: 26px;
  }

  .about-team-card__role {
    font-size: 20px;
  }
}

@media (max-width: 575.98px) {
  .about-hero__title {
    font-size: 26px;
    line-height: 34px;
  }

  .about-section-title {
    font-size: 26px;
  }
}

/* This CSS is for About page */
/* =====================================================================
   CONTACT PAGE  (template: pages_template/contact-template.php)
   Figma node 2395:676. Hero mirrors About hero; "Experience the Demo"
   (.live-demo) and "Start Managing Maintenance Smarter" (.cta-contact)
   reuse existing homepage sections unchanged.
   ===================================================================== */

/* ----- Shared Contact helpers ----- */
.contact-eyebrow {
  display: inline-block;
  font-family: "Inter Tight", sans-serif;
  font-weight: 400;
  font-size: 22px;
  line-height: 1.2;
  color: var(--red);
}

.contact-section-title {
  margin: 0;
  font-family: "Inter Tight", sans-serif;
  font-weight: 600;
  font-size: 44px;
  line-height: 1.2;
  letter-spacing: -1px;
  color: var(--blue-250);
}

.contact-main__wrap {
  width: 100%;
  max-width: var(--frame-w);
  margin: 0 auto;
  padding: 0 var(--frame-pad-x);
  max-width: 1600px;
}

/* ----- Hero: reuses .about-hero exactly (layout/spacing/type/responsive).
   Only the background image differs for the Contact page. ----- */
.about-hero--contact {
  background-image: url("images/contact_hero.png");
}

/* ----- Form + info section ----- */
.contact-main {
  padding: 120px 0 120px;
}

/* Info column is vertically centred against the taller form card (Figma:
   the info block sits ~80px lower than the form, centred to it). */
.contact-main__row {
  align-items: center;
}

/* Left: contact information */
.contact-info {
  max-width: 457px;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.contact-info__head {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.contact-info__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.contact-info__item {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.contact-info__label {
  font-family: "Inter Tight", sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.2;
  color: #000000;
}

.contact-info__row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.contact-info__icon {
  width: 60px;
  height: 60px;
  flex-shrink: 0;
  display: inline-flex;
}

.contact-info__icon img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.contact-info__value {
  font-family: "Inter Tight", sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 1.3;
  color: #575757;
  text-decoration: none;
}

a.contact-info__value:hover {
  color: var(--red);
}

/* Right: form card */
.contact-form-card {
  width: 100%;
  max-width: 679px;
  margin-left: auto;
  background: var(--white);
  border-radius: 10px;
  padding: 50px 30px;
  box-shadow: 26px 46px 77.5px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.contact-form-card__title {
  margin: 0;
  text-align: center;
  font-family: "Inter Tight", sans-serif;
  font-weight: 600;
  font-size: 44px;
  line-height: 1.2;
  letter-spacing: -1px;
  color: var(--blue-250);
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.contact-form__row {
  display: flex;
  gap: 20px;
}

.contact-form__field {
  flex: 1 1 0;
  min-width: 0;
  position: relative;
}

.contact-form__field input,
.contact-form__field select,
.contact-form__field textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #d2d2d2;
  border-radius: 8px;
  padding: 17px 16px;
  font-family: "Inter Tight", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.2;
  color: #333333;
  background: var(--white);
  outline: none;
  transition: border-color 0.2s ease;
}

.contact-form__field textarea {
  min-height: 126px;
  padding: 20px 16px;
  resize: vertical;
}

.contact-form__field input::placeholder,
.contact-form__field textarea::placeholder {
  color: #000000;
  opacity: 1;
}

.contact-form__field input:focus,
.contact-form__field select:focus,
.contact-form__field textarea:focus {
  border-color: var(--blue-250);
}

.contact-form__field--select select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 46px;
  color: #000000;
  cursor: pointer;
}

.contact-form__chevron {
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  display: inline-flex;
  pointer-events: none;
}

.contact-form__actions {
  display: flex;
  justify-content: center;
}

.contact-form__submit {
  width: 207px;
  position: relative;
}

/* While submitting: keep button size, hide label/arrow, show spinner. */
.contact-form__submit.is-loading {
  pointer-events: none;
}

.contact-form__submit.is-loading > span:not(.contact-form__spinner),
.contact-form__submit.is-loading > svg {
  visibility: hidden;
}

.contact-form__spinner {
  display: none;
}

.contact-form__submit.is-loading .contact-form__spinner {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: ampdSpin 0.6s linear infinite;
}

@keyframes ampdSpin {
  to {
    transform: rotate(360deg);
  }
}

/* Validation + AJAX response feedback */
.contact-form__field--error input,
.contact-form__field--error select,
.contact-form__field--error textarea {
  border-color: #e02424;
}

.contact-form__response {
  margin-top: 16px;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 15px;
  line-height: 1.5;
}

.contact-form__response--success {
  background: #e7f6ec;
  color: #1e7e45;
  border: 1px solid #b6e2c6;
}

.contact-form__response--error {
  background: #fdecec;
  color: #c0392b;
  border: 1px solid #f5c2c2;
}

/* ----- Experience the Demo (Contact variant) — same layout as homepage,
   Contact visual theme: light section bg, navy heading, navy-gradient card.
   Scoped to .live-demo--contact so the homepage .live-demo stays untouched. ----- */
.live-demo--contact {
  color: var(--blue-250);
}

.live-demo--contact::before {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.92)),
    url("images/contact_demo_bg.jpg");
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
}

.live-demo--contact .live-demo__title {
  color: var(--blue-250);
}

.live-demo--contact .live-demo__card {
  background: linear-gradient(180deg, #0d286d 0%, #040d35 100%);
}

/* ----- Contact responsive ----- */
@media (max-width: 991.98px) {

  .contact-section-title,
  .contact-form-card__title {
    font-size: 36px;
  }

  .contact-main {
    padding: 80px 0;
  }

  .contact-main__info-col {
    margin-bottom: 40px;
  }

  .contact-info,
  .contact-form-card {
    max-width: none;
    margin-left: 0;
  }
}

@media (max-width: 767.98px) {

  .contact-section-title,
  .contact-form-card__title {
    font-size: 28px;
  }

  .contact-form__row {
    flex-direction: column;
    gap: 20px;
  }

  .contact-form-card {
    padding: 30px 20px;
  }

  .contact-info__value {
    font-size: 18px;
  }
}

@media (max-width: 575.98px) {

  .contact-section-title,
  .contact-form-card__title {
    font-size: 26px;
  }
}

/* This CSS is for Contact page */

/* =====================================================================
   BLOG PAGE  (template: pages_template/blog-template.php)
   Figma node 2389:549. Hero reuses .about-hero; cards reuse .blog-card;
   CTA reuses .cta-contact. Only Blog-specific styles live here.
   ===================================================================== */

/* Hero: reuses .about-hero exactly; only the background image differs. */
.about-hero--blog {
  background-image: url("images/blog_hero.png");
}

/* ----- Shared Blog helpers ----- */
.blog-eyebrow {
  display: inline-block;
  font-family: "Inter Tight", sans-serif;
  font-weight: 400;
  font-size: 22px;
  line-height: 1.2;
  color: var(--red);
}

.blog-section-title {
  margin: 0;
  font-family: "Inter Tight", sans-serif;
  font-weight: 600;
  font-size: 44px;
  line-height: 1.2;
  letter-spacing: -1px;
  color: var(--blue-250);
}

.blog-section-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  margin-bottom: 50px;
}

.blog-featured__wrap,
.blog-list__wrap {
  width: 100%;
  max-width: var(--frame-w);
  margin: 0 auto;
  padding: 0 var(--frame-pad-x);
  max-width: 1600px;
}

/* ----- Featured ----- */
.blog-featured {
  padding: 120px 0 0;
}

.blog-featured__row {
  align-items: center;
}

.blog-featured__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  max-width: 520px;
}

.blog-featured__meta {
  display: flex;
  gap: 8px;
}

.blog-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 117px;
  height: 36px;
  padding: 8px;
  border-radius: 8px;
  font-family: "Inter Tight", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.2;
}

.blog-tag--cat {
  background: rgba(13, 38, 107, 0.1);
  color: var(--blue-250);
}

.blog-tag--date {
  background: rgba(230, 0, 33, 0.1);
  color: #e60021;
}

.blog-featured__title {
  margin: 0;
  font-family: "Inter Tight", sans-serif;
  font-weight: 600;
  font-size: 40px;
  line-height: 1.2;
  color: var(--blue-250);
}

.blog-featured__excerpt {
  margin: 0;
  max-width: 505px;
  font-family: "Inter Tight", sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 32px;
  color: var(--gray-200);
}

.blog-featured__cta {
  width: 151px;
}

.blog-featured__media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
}

/* ----- Listing: header + tools ----- */
.blog-list {
  padding: 80px 0 130px;
}

.blog-list__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  margin-bottom: 48px;
}

.blog-list__head-text {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.blog-list__tools {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.blog-search {
  position: relative;
  width: 392px;
  max-width: 100%;
}

.blog-search input {
  width: 100%;
  height: 50px;
  box-sizing: border-box;
  background: var(--gray-5);
  border: 0;
  border-radius: 100px;
  padding: 0 46px 0 16px;
  font-family: "Inter Tight", sans-serif;
  font-size: 18px;
  color: #000000;
  outline: none;
}

.blog-search input::placeholder {
  color: #000000;
  opacity: 1;
}

.blog-search__icon {
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.blog-sort {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 50px;
  background: var(--white);
  border: 1px solid var(--gray-5);
  border-radius: 100px;
}

.blog-sort select {
  height: 50px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border: 0;
  background: transparent;
  outline: none;
  cursor: pointer;
  padding: 0 42px 0 16px;
  border-radius: 100px;
  font-family: "Inter Tight", sans-serif;
  font-size: 18px;
  color: #000000;
}

.blog-sort__chevron {
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
  display: inline-flex;
  pointer-events: none;
}

/* ----- Listing: grid (reuses .blog-card) ----- */
.blog-list__grid .row {
  margin-left: -18px;
  margin-right: -18px;
  row-gap: 30px;
}

.blog-list__grid .row>[class*="col-"] {
  padding-left: 18px;
  padding-right: 18px;
  display: flex;
}

/* ----- Pagination ----- */
.blog-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 50px;
}

.blog-pagination__page {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 100px;
  border: 1px solid #bcbcbc;
  background: var(--white);
  font-family: "Inter Tight", sans-serif;
  font-weight: 500;
  font-size: 14px;
  color: #000000;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.blog-pagination__page:hover {
  border-color: var(--red);
  color: var(--red);
}

.blog-pagination__page.is-active {
  background: var(--red);
  border-color: var(--red);
  color: var(--white);
}

/* ----- Blog responsive ----- */
@media (max-width: 1199.98px) {
  .blog-section-title {
    font-size: 38px;
  }

  .blog-featured__title {
    font-size: 34px;
  }
}

@media (max-width: 991.98px) {
  .blog-featured {
    padding: 90px 0 0;
  }

  .blog-featured__content {
    max-width: none;
    margin-bottom: 36px;
  }

  .blog-list {
    padding: 70px 0 90px;
  }

  .blog-list__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }

  .blog-list__tools {
    width: 100%;
  }

  .blog-search {
    flex: 1 1 auto;
  }
}

@media (max-width: 767.98px) {
  .blog-section-title {
    font-size: 28px;
  }

  .blog-featured__title {
    font-size: 28px;
  }

  .blog-featured__excerpt {
    font-size: 16px;
    line-height: 26px;
  }

  .blog-section-head {
    margin-bottom: 36px;
  }

  .blog-list__tools {
    flex-direction: column;
    align-items: stretch;
  }

  .blog-sort {
    justify-content: space-between;
  }
}

@media (max-width: 575.98px) {

  .blog-section-title,
  .blog-featured__title {
    font-size: 26px;
  }
}

/* =====================================================================
   BLOG DETAIL PAGE  (template: single.php)
   Figma node 2393:1146 ("Blogs Detail").
   Reuses global tokens (--red, --blue-250, --gray-200, --gray-5,
   --frame-pad-x) and the shared .blog-card / .cta-contact / .btn--primary.
   ===================================================================== */

/* Title uses the Figma blue gradient (renders on a block element) */
.blog-detail__title {
  background: linear-gradient(180deg, #0d286d 0%, #040d35 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Chips / share label: solid navy — gradient text-clip is unreliable on
   inline-flex pills, and #0d266b is visually identical at this size. */
.blog-detail__chip--cat,
.blog-detail__chip--read,
.blog-detail__chip--author,
.blog-detail__share-label {
  color: var(--blue-250);
}

.blog-detail {
  background: var(--white);
  padding-top: 130px;
  padding-bottom: 30px;
}

.blog-detail__wrap {
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 var(--frame-pad-x);
}

/* ----- Back to Blogs ----- */
.blog-detail__back {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 32px;
  font-family: "Inter Tight", sans-serif;
  font-weight: 400;
  font-size: 22px;
  line-height: 1.2;
  color: var(--red);
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.blog-detail__back:hover,
.blog-detail__back:focus {
  color: var(--red);
  opacity: 0.8;
}

.blog-detail__back i {
  font-size: 16px;
}

/* ----- Meta chips row ----- */
.blog-detail__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
}

.blog-detail__meta-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.blog-detail__chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 14px;
  border-radius: 8px;
  font-family: "Inter Tight", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1;
  white-space: nowrap;
}

.blog-detail__chip--cat {
  background: rgba(13, 38, 107, 0.1);
}

.blog-detail__chip--date {
  background: rgba(230, 0, 33, 0.1);
  color: #e60021;
}

.blog-detail__chip--read {
  background: var(--gray-5);
}

.blog-detail__chip--author {
  font-weight: 500;
  background: rgba(13, 38, 107, 0.1);
}

/* ----- Title + subtitle ----- */
.blog-detail__head {
  margin-bottom: 30px;
}

.blog-detail__title {
  margin: 0;
  font-family: "Inter Tight", sans-serif;
  font-weight: 700;
  font-size: 45px;
  line-height: 46px;
  letter-spacing: -0.5px;
}

.blog-detail__subtitle {
  margin: 10px 0 0;
  font-family: "Inter Tight", sans-serif;
  font-weight: 400;
  font-size: 24px;
  line-height: 26px;
  color: var(--gray-200);
}

/* ----- Hero image ----- */
.blog-detail__hero {
  width: 100%;
  height: 550px;
  border-radius: 20px;
  overflow: hidden;
  margin-bottom: 30px;
}

.blog-detail__hero img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* ----- Body content (the_content) ----- */
.blog-detail__content {
  margin-bottom: 30px;
  font-family: "Inter Tight", sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 26px;
  color: var(--gray-200);
}

.blog-detail__content p,
.blog-detail__content div {
  font-family: "Inter Tight", sans-serif;
}

.blog-detail__content>*:first-child {
  margin-top: 0;
}

.blog-detail__content p {
  margin: 0 0 15px;
}

.blog-detail__content p:last-child {
  margin-bottom: 0;
}

.blog-detail__content h2,
.blog-detail__content h3,
.blog-detail__content h4 {
  font-family: "Inter Tight", sans-serif;
  font-weight: 600;
  color: var(--blue-250);
  margin: 30px 0 15px;
  line-height: 1.2;
}

.blog-detail__content h2 {
  font-size: 30px;
}

.blog-detail__content h3 {
  font-size: 24px;
}

.blog-detail__content h4 {
  font-size: 20px;
}

.blog-detail__content a {
  color: var(--red);
  text-decoration: underline;
}

.blog-detail__content ul,
.blog-detail__content ol {
  margin: 0 0 15px;
  padding-left: 22px;
}

.blog-detail__content li {
  margin-bottom: 8px;
}

.blog-detail__content img {
  max-width: 100%;
  height: auto;
  border-radius: 20px;
  margin: 10px 0;
}

/* Figma middle block: image left (563) + stacked text right, gap 25 */
.blog-detail__content .blog-detail__split {
  display: flex;
  align-items: center;
  gap: 25px;
  margin: 0 0 15px;
}

.blog-detail__content .blog-detail__split-media {
  flex: 0 0 563px;
  max-width: 563px;
  height: 385px;
  border-radius: 20px;
  overflow: hidden;
}

.blog-detail__content .blog-detail__split-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 20px;
  margin: 0;
}

.blog-detail__content .blog-detail__split-text {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
}

.blog-detail__content .blog-detail__split-text p {
  margin: 0;
}

.blog-detail__content img.alignleft {
  float: left;
  width: 563px;
  max-width: 45%;
  margin: 6px 25px 20px 0;
}

.blog-detail__content img.alignright {
  float: right;
  width: 563px;
  max-width: 45%;
  margin: 6px 0 20px 25px;
}

.blog-detail__content img.aligncenter {
  display: block;
  margin: 20px auto;
}

.blog-detail__content blockquote {
  margin: 20px 0;
  padding: 8px 0 8px 24px;
  border-left: 4px solid var(--red);
  color: var(--blue-250);
}

/* ----- Author + Share footer ----- */
.blog-detail__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  clear: both;
}

.blog-detail__share {
  display: flex;
  align-items: center;
  gap: 10px;
}

.blog-detail__share-label {
  font-family: "Inter Tight", sans-serif;
  font-weight: 600;
  font-size: 18px;
  line-height: 1.5;
  letter-spacing: 0.9px;
}

.blog-detail__socials {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 9px;
}

.blog-detail__socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #122242;
  color: var(--white);
  font-size: 17px;
  text-decoration: none;
  transition: background 0.2s ease, transform 0.2s ease;
}

.blog-detail__socials a:hover,
.blog-detail__socials a:focus {
  background: var(--blue-250);
  color: var(--white);
  transform: translateY(-2px);
}

/* =========================================================
   Related Blogs — "You Might Also Like"
   ========================================================= */
.blog-related {
  background: var(--white);
  padding: 70px 0 0;
}

.blog-related__wrap {
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 var(--frame-pad-x);
}

.blog-related__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 48px;
}

.blog-related__eyebrow {
  font-family: "Inter Tight", sans-serif;
  font-weight: 400;
  font-size: 22px;
  line-height: 1.2;
  color: var(--red);
}

.blog-related__title {
  margin: 0;
  font-family: "Inter Tight", sans-serif;
  font-weight: 600;
  font-size: 44px;
  line-height: 1.2;
  letter-spacing: -1px;
  color: var(--blue-250);
}

.blog-related__grid .row {
  margin-left: -18px;
  margin-right: -18px;
  row-gap: 36px;
  align-items: stretch;
}

.blog-related__grid .row>[class*="col-"] {
  padding-left: 18px;
  padding-right: 18px;
  display: flex;
}

/* The Related section flows straight into the global .cta-contact */
.blog-related+.cta-contact {
  margin-top: 80px;
}

/* ---------------------------------------------------------------------
   BLOG DETAIL — Responsive
   --------------------------------------------------------------------- */
@media (max-width: 1199.98px) {

  .blog-detail__wrap,
  .blog-related__wrap {
    padding: 0 40px;
  }

  .blog-detail__title {
    font-size: 38px;
    line-height: 42px;
  }

  .blog-detail__hero {
    height: 460px;
  }

  .blog-related__title {
    font-size: 38px;
  }
}

@media (max-width: 991.98px) {
  .blog-detail {
    padding-top: 110px;
  }

  .blog-detail__title {
    font-size: 34px;
    line-height: 40px;
  }

  .blog-detail__subtitle {
    font-size: 22px;
  }

  .blog-detail__hero {
    height: 380px;
    border-radius: 16px;
  }

  .blog-related {
    padding-top: 60px;
  }

  .blog-related__title {
    font-size: 34px;
  }

  .blog-detail__content img.alignleft,
  .blog-detail__content img.alignright {
    float: none;
    width: 100%;
    max-width: 100%;
    margin: 15px 0;
  }

  .blog-detail__content .blog-detail__split {
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
  }

  .blog-detail__content .blog-detail__split-media {
    flex: 0 0 auto;
    max-width: 100%;
    height: 320px;
  }
}

@media (max-width: 767.98px) {
  .blog-detail {
    padding-top: 96px;
  }

  .blog-detail__wrap,
  .blog-related__wrap {
    padding: 0 20px;
  }

  .blog-detail__back {
    font-size: 18px;
    margin-bottom: 24px;
  }

  .blog-detail__meta {
    flex-wrap: wrap;
  }

  .blog-detail__title {
    font-size: 28px;
    line-height: 34px;
  }

  .blog-detail__subtitle {
    font-size: 18px;
    line-height: 24px;
  }

  .blog-detail__hero {
    height: 240px;
  }

  .blog-detail__content {
    font-size: 16px;
    line-height: 24px;
  }

  .blog-detail__footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }

  .blog-related__title {
    font-size: 28px;
  }

  .blog-related+.cta-contact {
    margin-top: 60px;
  }
}

@media (max-width: 575.98px) {
  .blog-detail__meta-left {
    flex-wrap: wrap;
  }

  .blog-detail__chip {
    font-size: 13px;
    padding: 0 12px;
    height: 32px;
  }
}

/* This CSS is for Blog page */

/* =====================================================================
   FEATURES PAGE  (template: pages_template/features-template.php)
   Figma node 2344:510 ("Software Overview").
   Reuses --red, --blue-250, --gray-200, --gray-5, --frame-pad-x, the
   .about-hero hero structure, .cta-contact and .btn--primary.
   ===================================================================== */

/* ----- Shared section heads / wraps ----- */
.features-tabs__wrap,
.features-platform__wrap,
.features-timeline__wrap,
.features-benefits__wrap,
.features-reviews__wrap {
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 var(--frame-pad-x);
}

.container-fluid.features-timeline__wrap {
  max-width: 100% !important;
  padding: 0;
}

.features-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  margin: 0 auto 90px;
}

.features-eyebrow {
  font-family: "Inter Tight", sans-serif;
  font-weight: 400;
  font-size: 22px;
  line-height: 1.2;
  color: var(--red);
}

.features-section-title {
  margin: 0;
  max-width: 670px;
  font-family: "Inter Tight", sans-serif;
  font-weight: 600;
  font-size: 44px;
  line-height: 1.2;
  letter-spacing: -1px;
  color: var(--blue-250);
}

.features-section-title--light {
  color: var(--white);
}

/* ----- Hero: reuses .about-hero exactly (layout/spacing/type/responsive).
   Only the background image differs for the Features page. ----- */
.about-hero--features {
  background-image: url("/wp-content/uploads/2026/06/features_hero_bg.png");
}

/* Figma hero carries a CTA the About hero doesn't; give it breathing room
   without altering the shared .about-hero layout. */
.about-hero--features .btn_buttons {
  margin-top: 14px;
}

/* =========================================================
   Tabs
   ========================================================= */
.features-tabs {
  padding: 100px 0;
  background: var(--white);
}

.features-tabs__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 15px;
  margin-bottom: 60px;
}

.features-tab {
  height: 70px;
  padding: 0 24px;
  border: 0;
  border-radius: 12px;
  background: var(--gray-5);
  color: #000;
  font-family: "Inter Tight", sans-serif;
  font-weight: 600;
  font-size: 18px;
  line-height: 1.2;
  text-transform: capitalize;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  transition: background 0.25s ease, color 0.25s ease, transform 0.2s ease;
}

.features-tab:hover {
  background: #dcdcdc;
}

.features-tab.is-active {
  background: linear-gradient(180deg, #0d286d 0%, #040d35 100%);
  color: var(--white);
}

.features-tabs__panels {
  position: relative;
}

.features-tab-panel {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}

.features-tab-panel.is-active {
  display: flex;
  animation: featuresFade 0.4s ease;
}

@keyframes featuresFade {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

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

.features-tab-panel__text {
  flex: 1 1 auto;
  max-width: 520px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.features-tab-panel__title {
  margin: 0;
  font-family: "Inter Tight", sans-serif;
  font-weight: 600;
  font-size: 30px;
  line-height: 1.2;
  color: var(--blue-250);
}

.features-tab-panel__body {
  margin: 0;
  font-family: "Inter Tight", sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 32px;
  color: var(--gray-200);
}

.features-tab-panel__list {
  margin: 0;
  padding-left: 20px;
  list-style: disc;
  font-family: "Inter Tight", sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 32px;
  color: var(--gray-200);
}

.features-tab-panel__media {
  flex: 0 0 763px;
  max-width: 763px;
  height: 535px;
  background: var(--gray-5);
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.features-tab-panel__media img {
  max-width: 92%;
  max-height: 92%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* =========================================================
   Platform slider (Slick)
   ========================================================= */
.features-platform {
  padding: 100px 0;
  background: var(--white);
}

.features-platform__slider-wrap {
  position: relative;
  max-width: 1509px;
  margin: 0 auto;
  padding: 0 54px;
}

.features-platform__slide {
  padding: 0 8px;
}

.features-platform__card {
  position: relative;
  height: 256px;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding: 20px 12px;
  /* box-shadow: 0 14.625px 39px rgba(25, 28, 30, 0.06); */
  transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.3s ease;
}

.features-platform__card-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.features-platform__card-overlay {
  position: absolute;
  inset: 0;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.58);
  transition: background 0.3s ease;
}

.features-platform__card-content {
  position: relative;
  z-index: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.features-platform__card-title {
  margin: 0;
  font-family: "Inter Tight", sans-serif;
  font-weight: 600;
  font-size: 22px;
  line-height: 1.2;
  text-transform: capitalize;
  color: var(--white);
}

/* Description: hidden by default, fades + slides up on card hover. */
.features-platform__card-desc {
  margin: 0;
  font-family: "Inter Tight", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 22px;
  color: rgba(255, 255, 255, 0.85);
  max-height: 0;
  margin-top: 0;
  opacity: 0;
  transform: translateY(8px);
  overflow: hidden;
  transition:
    max-height 0.4s ease,
    margin-top 0.4s ease,
    opacity 0.35s ease,
    transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.features-platform__card:hover .features-platform__card-desc,
.features-platform__card:focus-within .features-platform__card-desc {
  max-height: 140px;
  margin-top: 10px;
  opacity: 1;
  transform: translateY(0);
}

.features-platform__card:hover {
  /* transform: translateY(-6px); */
  /* box-shadow: 0 22px 48px rgba(25, 28, 30, 0.18); */
}

.features-platform__card:hover .features-platform__card-img {
  transform: scale(1.07);
}

.features-platform__card:hover .features-platform__card-overlay {
  background: rgba(0, 0, 0, 0.7);
}

.features-platform__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 3;
  font-size: 15px;
  transition: transform 0.2s ease, background 0.2s ease;
}

.features-platform__arrow--prev {
  left: 0;
  background: var(--gray-5);
  color: #333;
}

.features-platform__arrow--next {
  right: 0;
  background: var(--red);
  color: var(--white);
}

.features-platform__arrow:hover {
  transform: translateY(-50%) scale(1.08);
}

.features-platform__arrow.slick-disabled {
  opacity: 0.45;
  cursor: default;
}

/* =========================================================
   Timeline (animated)
   ========================================================= */
.features-timeline {
  padding: 110px 0 110px;
  background: #f6f6f6;
}

.features-timeline__line {
  position: relative;
  height: 360px;
  margin-top: 40px;
}

.features-timeline__rail {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 2px;
  background: #e0e0e0;
}

.features-timeline__progress {
  position: absolute;
  left: 0;
  top: 50%;
  height: 2px;
  width: 0;
  background: var(--red);
}

.features-timeline__step {
  position: absolute;
  top: 0;
  height: 100%;
  /* Dots + connectors are visible the whole time; only the number/label
     (content) fades in as the line reaches each node. */
}

.features-timeline__step[data-step="1"] {
  left: 6%;
}

.features-timeline__step[data-step="2"] {
  left: 20.7%;
}

.features-timeline__step[data-step="3"] {
  left: 35.4%;
}

.features-timeline__step[data-step="4"] {
  left: 50.1%;
}

.features-timeline__step[data-step="5"] {
  left: 64.8%;
}

.features-timeline__step[data-step="6"] {
  left: 79.5%;
}

.features-timeline__dot {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255, 0, 0, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
}

.features-timeline__dot::after {
  content: "";
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--red);
}

.features-timeline__connector {
  position: absolute;
  left: 0;
  transform: translateX(-50%);
  width: 2px;
  background: #d2d2d2;
  height: 90px;
}

.features-timeline__step--up .features-timeline__connector {
  bottom: 50%;
}

.features-timeline__step--down .features-timeline__connector {
  top: 50%;
}

/* Number (left) + label (right) straddle the node so the vertical connector
   line sits in the gap between them — it acts as the divider (Figma). */
.features-timeline__content {
  position: absolute;
  left: 0;
  transform: translateX(-66px) translateY(12px);
  /* shifts gap centre onto the node line */
  display: flex;
  align-items: flex-start;
  gap: 40px;
  opacity: 0;
  transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* JS adds .is-reached to the step when the red line passes its node. */
.features-timeline__step.is-reached .features-timeline__content {
  opacity: 1;
  transform: translateX(-66px) translateY(0);
}

.features-timeline__step--up .features-timeline__content {
  bottom: calc(50% + 140px);
}

.features-timeline__step--down .features-timeline__content {
  top: calc(50% + 140px);
}

.features-timeline__num {
  flex-shrink: 0;
  width: 48px;
  text-align: right;
  font-family: "Inter Tight", sans-serif;
  font-weight: 600;
  font-size: 36px;
  line-height: 1;
  color: #d2d2d2;
}

.features-timeline__label {
  flex-shrink: 0;
  width: 200px;
  font-family: "Inter Tight", sans-serif;
  font-weight: 600;
  font-size: 20px;
  line-height: 1.2;
  color: var(--blue-250);
}

/* Connector tall enough to reach up/down into the number↔label gap. */
.features-timeline__step--up .features-timeline__connector,
.features-timeline__step--down .features-timeline__connector {
  height: 150px;
}

/* =========================================================
   Benefits grid
   ========================================================= */
.features-benefits {
  padding: 100px 0;
  background: linear-gradient(180deg, #0d286d 0%, #040d35 100%);
}

.features-benefits__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 40px;
  row-gap: 10px;
}

.features-benefit {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 20px;
  height: 170px;
  padding: 20px 30px;
}

.features-benefit__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
}

.features-benefit__icon img {
  height: 40px;
  width: 40px;
  display: block;
}

.features-benefit__label {
  margin: 0;
  font-family: "Inter Tight", sans-serif;
  font-weight: 600;
  font-size: 18px;
  line-height: 1.2;
  color: var(--white);
}

/* =========================================================
   Reviews slider (Slick)
   ========================================================= */
.features-reviews {
  padding: 100px 0;
  background: var(--white);
  overflow: hidden;
  /* clips peeking slides horizontally; vertical shadow lives in the 100px padding */
}

/* Full-width edge-to-edge carousel */
.features-reviews__slider {
  width: 100%;
  max-width: none;
  margin: 0;
}

/* Let card shadows show (slick-list normally clips them); horizontal peek is
   clipped by .features-reviews overflow + body overflow-x. */
.features-reviews__slider .slick-list {
  overflow: visible;
}

.features-reviews__slide {
  padding: 26px 18px;
  height: inherit;
}

.features-review {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 15px;
/*   height: 263px; */
  padding: 40px;
  background: var(--white);
  border-radius: 10px;
  box-shadow: 0 6px 30px rgba(0, 0, 0, 0.12);
}

.features-review__head {
  display: flex;
  align-items: center;
  gap: 13px;
}

.features-review__avatar img {
  width: 47px;
  height: 47px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

.features-review__meta {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.features-review__name {
  margin: 0;
  font-family: "Inter Tight", sans-serif;
  font-weight: 700;
  font-size: 24px;
  line-height: 1;
  background: linear-gradient(180deg, #0d286d 0%, #040d35 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.features-review__stars {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 20px;
}

.features-review__star {
  width: 19px;
  height: 19px;
  flex-shrink: 0;
  display: block;
}

.features-review__star.is-filled {
  color: #f4b406;
}

.features-review__star.is-empty {
  color: #d6d6d6;
}

.features-review__quote {
  margin: 0;
  font-family: "Inter Tight", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 30px;
  color: #575757;
  min-height: 150px;
}

/* Slick: equal-height slides for reviews */
.features-reviews__slider .slick-track {
  display: flex;
}

.features-reviews__slider .slick-slide {
  height: auto;
}

.features-reviews__slider .slick-slide>div {
  height: 100%;
}

/* =========================================================
   Features — Responsive
   ========================================================= */
@media (max-width: 1199.98px) {

  .features-tabs__wrap,
  .features-platform__wrap,
  .features-timeline__wrap,
  .features-benefits__wrap {
    padding: 0 40px;
  }

  .features-section-title {
    font-size: 36px;
  }

  .features-tab-panel__media {
    flex-basis: 50%;
    height: 440px;
  }
}

@media (max-width: 991.98px) {

  .features-tabs,
  .features-platform,
  .features-benefits,
  .features-reviews {
    padding: 70px 0;
  }

  .features-section-title {
    font-size: 32px;
  }

  .features-tab-panel {
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
  }

  .features-tab-panel__text {
    max-width: 100%;
  }

  .features-tab-panel__media {
    flex-basis: auto;
    width: 100%;
    height: 420px;
  }

  .features-benefits__grid {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 20px;
    row-gap: 20px;
  }

  /* Timeline → vertical stacked list from tablet down (horizontal needs desktop width) */
  .features-timeline__line {
    height: auto;
    margin-top: 20px;
    padding-left: 30px;
  }

  .features-timeline__rail {
    left: 8px;
    right: auto;
    top: 0;
    bottom: 0;
    width: 2px;
    height: auto;
  }

  .features-timeline__progress {
    left: 8px;
    top: 0;
    width: 2px;
    height: 0;
  }

  .features-timeline__step {
    position: relative;
    left: auto !important;
    top: auto;
    height: auto;
    padding: 18px 0;
  }

  .features-timeline__dot {
    left: -22px;
    top: 24px;
    transform: translate(-50%, 0);
  }

  .features-timeline__connector {
    display: none;
  }

  .features-timeline__content {
    position: relative;
    left: auto;
    top: auto !important;
    bottom: auto !important;
    transform: translateY(12px);
    width: 100%;
    align-items: center;
  }

  .features-timeline__step.is-reached .features-timeline__content {
    transform: translateY(0);
  }
}

@media (max-width: 767.98px) {

  .features-tabs__wrap,
  .features-platform__wrap,
  .features-timeline__wrap,
  .features-benefits__wrap {
    padding: 0 20px;
  }

  .features-section-title {
    font-size: 26px;
  }

  .features-tab {
    height: 56px;
    font-size: 15px;
    padding: 0 16px;
  }

  .features-tab-panel__title {
    font-size: 24px;
  }

  .features-tab-panel__body {
    font-size: 17px;
    line-height: 28px;
  }

  .features-tab-panel__media {
    height: 300px;
  }

  .features-platform__slider-wrap {
    padding: 0 44px;
  }

  .features-benefits__grid {
    grid-template-columns: 1fr;
  }

  .features-benefit {
    height: auto;
  }
}

/* Blog listing: AJAX loading state */
.blog-list__results {
  transition: opacity 0.2s ease;
}

.blog-list__empty {
  font-family: "Inter Tight", sans-serif;
}

.blog-list__results.is-loading {
  opacity: 0.45;
  pointer-events: none;
}

/* =====================================================================
   LEGAL PAGES (Terms of Service / Privacy Policy)
   Simple, centered legal layout — no hero, no decorative sections. The
   body is authored in the WP editor and rendered via the_content().
   Typography matches the site (Inter Tight; headings in --blue-250).
   ===================================================================== */

.legal-page {
  padding: 150px 0 100px;
}

/* Centered reading column. */
.legal-page__wrap {
  width: 100%;
  max-width: 860px;
  margin: 0 auto;
  padding: 0 var(--frame-pad-x);
}

.legal-page__header {
  margin-bottom: 40px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--gray-5);
}

.legal-page__title {
  margin: 0;
  font-family: "Inter Tight", sans-serif;
  font-weight: 700;
  font-size: 42px;
  line-height: 1.2;
  letter-spacing: -1px;
  color: var(--blue-250);
}

/* ----- Rich-text (the_content) ----- */
.legal-page__body > *:first-child {
  margin-top: 0;
}

.legal-page__body > *:last-child {
  margin-bottom: 0;
}

.legal-page__body h1,
.legal-page__body h2,
.legal-page__body h3,
.legal-page__body h4 {
  margin: 40px 0 14px;
  font-family: "Inter Tight", sans-serif;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.5px;
  color: var(--blue-250);
}

.legal-page__body h2 {
  font-size: 26px;
}

.legal-page__body h3 {
  font-size: 21px;
}

.legal-page__body h4 {
  font-size: 18px;
}

.legal-page__body p,
.legal-page__body li {
  font-family: "Inter Tight", sans-serif;
  font-weight: 400;
  font-size: 17px;
  line-height: 30px;
  color: #333333;
}

.legal-page__body p {
  margin: 0 0 18px;
}

.legal-page__body ul,
.legal-page__body ol {
  margin: 0 0 18px;
  padding-left: 22px;
}

.legal-page__body li {
  margin-bottom: 8px;
}

.legal-page__body a {
  color: var(--red);
  text-decoration: underline !important;
}

.legal-page__body a:hover,
.legal-page__body a:focus {
  color: var(--blue-250);
}

.legal-page__body strong,
.legal-page__body b {
  font-weight: 600;
  color: var(--blue-250);
}

.legal-page__meta {
  margin: 0 0 8px;
  color: var(--gray-200) !important;
  font-size: 15px !important;
  line-height: 26px !important;
}

@media (max-width: 991.98px) {
  .legal-page {
    padding: 60px 0 80px;
  }

  .legal-page__title {
    font-size: 34px;
  }
}

@media (max-width: 575.98px) {
  .legal-page {
    padding: 48px 0 64px;
  }

  .legal-page__title {
    font-size: 28px;
  }

  .legal-page__body h2 {
    font-size: 22px;
  }

  .legal-page__body h3 {
    font-size: 19px;
  }

  .legal-page__body p,
  .legal-page__body li {
    font-size: 16px;
    line-height: 28px;
  }
}