/*!
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: 650px !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: 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;
}
.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: 151px;
  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: 60px;
  line-height: 80px;
  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) */
.how-tab:not(.is-active):hover {
  border-color: rgba(255, 0, 0, 0.55);
  box-shadow: 0 8px 24px rgba(13, 38, 107, 0.08);
  transform: translateX(4px);
}
.how-tab:not(.is-active):hover .how-tab__title {
  color: var(--red);
}

/* 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;
}

/* Portrait variant (Real-Time card → property preview) — no inner frame, taller */
.feature-card__media--portrait {
  width: 203px;
  height: 247px;
  background: transparent;
  border: 0;
  padding: 0;
  border-radius: 8px;
}

.feature-card__media--portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}

/* =========================================================
   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 50px 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: 40px;
  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: 80px;
  height: 80px;
  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: 1280px;
  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: 520px;
  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 {
  max-width: 960px;
  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: 56.25%; /* 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: 1280px;
  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;
}

/* =========================================================
   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;
}

.cta-contact__cta {
  width: 172px;
}

/* ----- Right-side red zigzag (decorative)
   Figma: 909×556 graphic anchored top-right, extending past the section edge */
.cta-contact__zigzag {
  position: absolute;
  top: 0;
  right: 0px;
  height: auto;
  z-index: 0;
  pointer-events: none;
  user-select: none;
}

/* ----- 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;
}

/* =====================================================================
   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: 1170px !important;
  }
  :root {
    --frame-w: 1240px;
    --frame-pad-x: 0px;
  }
}

/* ---------------------------------------------------------------------
   ≥ 1250px — widescreen container
   --------------------------------------------------------------------- */
@media (min-width: 1250px) {
  .container {
    max-width: 1240px !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--portrait {
    width: 180px;
    height: 220px;
  }

  /* 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%;
  }
  .cta-contact__zigzag {
    width: 48%;
    top: unset;
    bottom: 0;
  }

  /* 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--portrait {
    width: 100%;
    height: 200px;
    margin-top: 8px;
  }
  .feature-card__media--portrait {
    align-self: center;
    width: 220px;
    height: auto;
  }

  /* 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%;
  }
}

/* ---------------------------------------------------------------------
   ≤ 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;
  }
}