/*-----------------------------------------------------------------------------------
    Project Name: Alph Acoustics | Website: https://www.alphacoustics.com
    Author: Dileep Dilraj | Website: https://www.dileepdilraj.com 
    Description: Premium Audio Acoustics Device Solutions
    Designer & Developer: Dileep Dilraj
    Version: 1.0
    File: style.css
    Last Update: Oct 2025
    Copyright: © 2025 Dileep Dilraj. All Rights Reserved.
-----------------------------------------------------------------------------------*/


   /* ---------- CSS ---------- */
   .aa-header {
       contain: layout style paint;
   }

   .aa-hp-hero {
       contain: layout style paint;
   }

   @font-face {
       font-family: "Alterwave";
       src: url("../font/Alterwave-Regular.otf") format("opentype");
       font-weight: 400;
       font-style: normal;
       font-display: swap;
   }

   @font-face {
       font-family: "Satoshi";
       src: url("../font/Satoshi.ttf") format("truetype");
       font-style: normal;
       font-display: swap;
   }

   @media (prefers-reduced-motion: reduce) {

       *,
       *::before,
       *::after {
           animation-duration: 0.01ms !important;
           animation-iteration-count: 1 !important;
           transition-duration: 0.01ms !important;
           scroll-behavior: auto !important;
       }
   }

   /* ---------- VARIABLES ---------- */
   :root {
       --font-heading: "Alterwave", sans-serif;
       --font-body: "Satoshi", sans-serif;
       --fw-thin: 200;
       --fw-light: 300;
       --fw-regular: 400;
       --fw-medium: 500;
       --fw-bold: 700;
       --color-text: #000;
       --color-border: #000;
       --color-bg: #fff;
       --color-light-bg: #F5F5F5;
   }

   /* ---------- FONT FACE ---------- */
   @font-face {
       font-family: "Alterwave";
       src: url("../font/Alterwave-Thin.otf") format("opentype");
       font-weight: 100;
       font-style: normal;
       font-display: swap;
   }

   @font-face {
       font-family: "Alterwave";
       src: url("../font/Alterwave-ThinItalic.otf") format("opentype");
       font-weight: 100;
       font-style: italic;
       font-display: swap;
   }

   @font-face {
       font-family: "Alterwave";
       src: url("../font/Alterwave-Light.otf") format("opentype");
       font-weight: 300;
       font-style: normal;
       font-display: swap;
   }

   @font-face {
       font-family: "Alterwave";
       src: url("../font/Alterwave-LightItalic.otf") format("opentype");
       font-weight: 300;
       font-style: italic;
       font-display: swap;
   }

   @font-face {
       font-family: "Alterwave";
       src: url("../font/Alterwave-Regular.otf") format("opentype");
       font-weight: 400;
       font-style: normal;
       font-display: swap;
   }

   @font-face {
       font-family: "Alterwave";
       src: url("../font/Alterwave-RegularItalic.otf") format("opentype");
       font-weight: 400;
       font-style: italic;
       font-display: swap;
   }

   @font-face {
       font-family: "Alterwave";
       src: url("../font/Alterwave-Bold.otf") format("opentype");
       font-weight: 700;
       font-style: normal;
       font-display: swap;
   }

   @font-face {
       font-family: "Alterwave";
       src: url("../font/Alterwave-BoldItalic.otf") format("opentype");
       font-weight: 700;
       font-style: italic;
       font-display: swap;
   }

   @font-face {
       font-family: "Alterwave";
       src: url("../font/Alterwave-ExtraBold.otf") format("opentype");
       font-weight: 800;
       font-style: normal;
       font-display: swap;
   }

   @font-face {
       font-family: "Alterwave";
       src: url("../font/Alterwave-ExtraBoldItalic.otf") format("opentype");
       font-weight: 800;
       font-style: italic;
       font-display: swap;
   }

   @font-face {
       font-family: "Satoshi";
       src: url("../font/Satoshi.ttf") format("truetype");
       font-style: normal;
       font-display: swap;
   }

   /* ---------- GLOBAL TYPOGRAPHY ---------- */
   h1,
   h2,
   h3,
   h4,
   h5 {
       font-family: var(--font-heading);
       font-weight: var(--fw-light);
       color: var(--color-text);
   }

   h6,
   p,
   li,
   a,
   span,
   button,
   input {
       font-family: var(--font-body);
       font-weight: var(--fw-regular);
       color: var(--color-text);
   }

   /* ---------- BASE CONTAINER & TITLES ---------- */
   .aa-container {
       width: min(1220px, 100%);
       margin: 0 auto;
       padding: 15px;
   }

   .aa-section-title {
       text-align: center;
       margin: 0 0 clamp(1.75rem, 4vw, 2.75rem);
       font-size: clamp(2rem, 3.2vw, 3.25rem);
       font-weight: var(--fw-light);
       letter-spacing: .2px;
       color: #0f0f10;
   }

   .aa-wrap {
       max-width: 1350px;
       padding: 20px;
       margin-inline: auto;
   }

   .aa-gap-sm {
       gap: .75rem;
   }

   .aa-nowrap {
       white-space: nowrap;
   }

   /* ---------- HEADER ---------- */
   .aa-header {
       padding: 12px;
       top: 0;
       border-bottom: 1px solid #eee;
       background: var(--color-bg);
       position: relative;
       z-index: 12000;
   }

   @media (max-width: 576px) {
       .aa-header {
           position: sticky;
       }
   }

   .aa-logo img {
       height: 50px;
   }

   .aa-nav ul {
       display: flex;
       list-style: none;
       margin: 0;
       padding: 6px 22px;
       border: 1px solid var(--color-border);
       border-radius: 999px;
       gap: 24px;
       height: 42px;
       background: var(--color-bg);
   }

   .aa-nav ul li a {
       text-decoration: none;
       color: var(--color-text);
       font-weight: var(--fw-medium);
       font-size: 15px;
   }

   .aa-search-btn,
   .aa-menu-toggle {
       border: 1px solid var(--color-border);
       background: var(--color-bg);
       display: flex;
       align-items: center;
       justify-content: center;
       cursor: pointer;
   }

   .aa-search-btn {
       width: 42px;
       height: 42px;
       border-radius: 50%;
   }

   .aa-right {
       display: flex;
       align-items: center;
       gap: 10px;
   }

   .aa-menu-toggle {
       width: 44px;
       height: 44px;
       border-radius: 50%;
       flex-direction: column;
       gap: 4px;
   }

   @media (max-width: 991px) {
       .aa-nav {
           display: none;
           position: absolute;
           top: 70px;
           right: 20px;
           background: var(--color-bg);
           border: 1px solid var(--color-border);
           border-radius: 16px;
           padding: 15px 20px;
           width: 200px;
           z-index: 9999;
       }

       .aa-nav ul {
           flex-direction: column;
           gap: 14px;
           border: none;
           padding: 0;
       }

       .aa-nav.active {
           display: block;
           animation: fadeDown 0.3s ease;
       }

       @keyframes fadeDown {
           from {
               opacity: 0;
               transform: translateY(-10px);
           }

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

   /* ===== Overlays & Menu (top→bottom drop) ===== */
   .aa-menu,
   .aa-menu2,
   .aa-menu-style {
       position: fixed;
       inset: 0;
       width: 100%;
       height: 100%;
       transform: translateX(100%);
       transition: transform .55s cubic-bezier(.22, .61, .36, 1);
   }

   .aa-menu {
       z-index: 10000;
       background: #0f0f10;
   }

   .aa-menu2 {
       z-index: 10500;
       background: #4b4b4b;
   }

   .aa-menu-style {
       z-index: 11000;
       background: #fff;
       display: flex;
       align-items: center;
       justify-content: center;
   }

   .aa-menu {
       transition-delay: 0s;
   }

   .aa-menu2 {
       transition-delay: .12s;
   }

   .aa-menu-style {
       transition-delay: .24s;
   }

   .aa-menu.show,
   .aa-menu2.show,
   .aa-menu-style.show {
       transform: translateX(0);
   }

   .aa-menu-style .menu-bg {
       position: absolute;
       width: 80%;
       max-width: 450px;
       align-items: center;
       opacity: 0;
       filter: blur(6px);
       transition: opacity .45s ease .3s, transform .6s ease .3s, filter .45s ease .3s;
       pointer-events: none;
   }

   .aa-menu-style .menu-bg {
       right: 20;
       bottom: 50;
       transform: translateY(20px) scale(.96) rotate(-4deg);
   }

   .aa-menu-style.show .menu-bg {
       opacity: .06;
       filter: blur(0);
       transform: translateY(0) scale(1) rotate(0);
   }

   .aa-menu-links {
       opacity: 0;
       transform: translateY(18px) scaleY(1.02);
       transition: opacity .4s ease .28s, transform .5s ease .28s;
       text-transform: uppercase;
   }

   .aa-menu-style.show .aa-menu-links {
       opacity: 1;
       transform: translateY(0) scaleY(1);
   }

   .aa-menu-links ul li {
       margin: 10px 0;
       padding-block: 10px;
   }

   .aa-menu-links ul li a {
       text-decoration: none;
       font-family: var(--font-heading);
       font-size: clamp(22px, 3vw + 10px, 54px);
       font-weight: var(--fw-light);
       color: var(--color-text);
       letter-spacing: .02em;
       transition: color .25s ease, transform .25s ease, opacity .25s ease;
       display: inline-block;
   }

   .aa-menu-links ul li a:hover {
       color: #7b7b7b;
       transform: translateY(-1px);
       text-decoration: underline;
   }

   .hamburger-menu.aa-menu-toggle {
       display: inline-flex;
       align-items: center;
       justify-content: center;
       width: 44px;
       height: 44px;
       border: 1px solid rgba(0, 0, 0, .12);
       border-radius: 999px;
       background: #fff;
       padding: 0;
   }

   .hamburger-menu.aa-menu-toggle img {
       width: 18px;
       height: 18px;
       display: block;
   }

   .hamburger-menu.aa-menu-toggle.active {
       border-color: #000;
       background: #fff;
   }

   @media (max-width: 576px) {
       .aa-header {
           box-shadow: 0 6px 20px rgba(0, 0, 0, .06);
       }
   }

   /* ---------- INFO SECTION ---------- */
   .aa-info-section {
       background: var(--color-light-bg);
       border-radius: 20px;
       padding: 150px 20px;
   }

   .aa-subtitle {
       display: inline-block;
       background: var(--color-bg);
       padding: 6px 18px;
       border-radius: 50px;
       font-size: 14px;
       font-weight: var(--fw-medium);
       color: #444;
       margin-bottom: 25px;
   }

   /* ---------- CTA SECTION ---------- */
   .aa-cta {
       text-align: center;
       padding: 6rem 1.5rem 4rem;
       background: var(--color-bg);
       position: relative;
       overflow: hidden;
   }

   .aa-cta-content {
       max-width: 850px;
       margin: 0 auto 2rem;
   }

   .aa-cta h2 {
       font-size: clamp(2.5rem, 5vw, 3.5rem);
       font-weight: var(--fw-light);
       margin-bottom: 1rem;
       color: #000;
   }

   .aa-cta p {
       font-size: 1.125rem;
       color: #555;
       margin-bottom: 2rem;
       line-height: 1.6;
   }

   .aa-cta-btn {
       display: inline-block;
       padding: 0.85rem 2rem;
       background: #000;
       color: #fff;
       font-weight: 600;
       border-radius: 999px;
       text-decoration: none;
       transition: background 0.3s ease;
   }

   .aa-cta-btn:hover {
       background: #222;
   }

   .aa-cta-image {
       max-width: 500px;
       margin: 0 auto;
       position: relative;
   }

   .aa-cta-image img {
       width: 100%;
       display: block;
   }

   /* ---------- FOOTER SECTION ---------- */
   .footer {
       background: var(--color-bg);
       padding: 50px 20px 0 20px;
       border-top: 1px solid var(--color-border);
   }

   @media (min-width: 992px) {
       .footer {
           padding: 50px 10% 0 10%;
       }
   }

   .footer-container {
       display: flex;
       flex-wrap: wrap;
       justify-content: space-between;
       gap: 40px;
   }

   .footer-left {
       max-width: 350px;
   }

   .footer-logo {
       display: flex;
       align-items: center;
       gap: 10px;
   }

   .footer-logo img {
       height: 60px;
   }

   .footer-tagline {
       margin: 15px 0;
       font-size: 16px;
       color: #111;
   }

   .footer-socials {
       display: inline-flex;
       border: 1px solid var(--color-border);
       border-radius: 50px;
       overflow: hidden;
   }

   .footer-socials a {
       display: flex;
       align-items: center;
       justify-content: center;
       width: 50px;
       height: 40px;
       border-right: 1px solid var(--color-border);
   }

   .footer-socials a:hover {
       background-color: #d5d5d5;
   }

   .footer-socials a:last-child {
       border-right: none;
   }

   .footer-socials img {
       width: 18px;
       height: 18px;
   }

   .footer-links h4,
   .footer-contacts h4 {
       font-size: 18px;
       margin-bottom: 15px;
       font-weight: var(--fw-light);
   }

   .footer-links ul {
       list-style: none;
       padding: 0;
   }

   .footer-links ul li {
       margin: 8px 0;
   }

   .footer-links ul li a {
       text-decoration: none;
       color: #000;
       transition: 0.3s;
   }

   .footer-links ul li a:hover {
       color: #3d3d3d;
       text-decoration: underline;
   }

   .footer-contacts p {
       display: flex;
       align-items: center;
       gap: 10px;
       margin: 8px 0;
       font-size: 15px;
   }

   .footer-contacts a {
       text-decoration: none;
   }

   .footer-contacts a:hover {
       color: #3d3d3d;
       text-decoration: underline;
   }

   .footer-contacts img {
       width: 18px;
       height: 18px;
   }

   .footer-bottom {
       text-align: center;
       margin-top: 40px;
       border-top: 1px solid var(--color-border);
       padding-top: 15px;
       font-size: 14px;
       color: #000;
   }

   .footer-right {
       display: flex;
       flex-direction: column;
       gap: 1.5rem;
       text-align: left;
       margin-top: 2rem;
   }

   @media (min-width: 992px) {
       .footer-right {
           flex-direction: row;
           justify-content: flex-end;
           gap: 3rem;
       }
   }

   /* ---------- ABOUT TABS SECTION ---------- */
   .aa-about-tabs {
       background: var(--color-bg);
   }

   .aa-about-tabs-title {
       font-size: 2rem;
       font-weight: 300;
       margin-bottom: 1rem;
       text-align: left;
       color: #111;
   }

   .aa-logo-wrapper {
       display: inline-block;
       position: relative;
   }

   .aa-logo-shine {
       max-width: 220px;
       position: relative;
   }

   .aa-logo-shine::after {
       content: "";
       position: absolute;
       top: 0;
       left: -75%;
       width: 50%;
       height: 100%;
       background: linear-gradient(120deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0.2) 100%);
       transform: skewX(-25deg);
       animation: shine 3s infinite;
   }

   @keyframes shine {
       0% {
           left: -75%;
       }

       100% {
           left: 125%;
       }
   }

   .aa-stats-row {
       display: inline-flex;
       align-items: center;
       justify-content: start;
       gap: 25px;
       background: #f2f2f2;
       border-radius: 12px;
       padding: 15px 30px;
       width: auto;
   }

   .aa-stat-card {
       text-align: center;
   }

   .aa-stat-card h3 {
       font-size: 2rem;
       font-weight: 300;
       margin: 0;
   }

   .aa-stat-card p {
       font-size: 0.85rem;
       color: #333;
       margin: 0;
   }

   .aa-divider {
       width: 1px;
       height: 40px;
       background: #ccc;
   }

   .aa-tabs-nav {
       border: 1px solid #ccc;
       border-radius: 12px;
       overflow: hidden;
       display: inline-flex;
   }

   .aa-tabs-nav .nav-link {
       border-radius: 0;
       font-weight: 600;
       color: #000;
       background: #fff;
       padding: 10px 20px;
       transition: all 0.3s ease;
   }

   .aa-tabs-nav .nav-link.active {
       background: #000;
       color: #fff;
   }

   .aa-tabs-nav .nav-link:not(.active):hover {
       background: #f5f5f5;
   }

   .aa-description-text p {
       font-size: 1rem;
       line-height: 1.6;
       color: #111;
   }

   @media (max-width: 768px) {
       .aa-logo-shine {
           max-width: 150px;
       }

       .aa-stats-row {
           padding: 10px 20px;
           gap: 15px;
           margin-left: 10px;
       }

       .aa-stat-card h3 {
           font-size: 1.4rem;
       }
   }

   /* ---------- CONTACT SECTION ---------- */
   .aa-contact {
       background: var(--color-bg);
       color: #0f0f10;
       padding: 5rem 0;
   }

   .aa-contact-container {
       padding-top: 3rem;
       padding-bottom: 3rem;
   }

   .aa-chip {
       border: 1px solid #111;
       color: #111;
       font-weight: 600;
       border-radius: 50px;
       padding: 0.6rem 1.3rem;
       margin-bottom: 1.5rem;
       background: transparent;
       display: inline-flex;
       align-items: center;
       cursor: pointer;
   }

   .aa-contact .aa-heading {
       font-size: clamp(2rem, 4vw, 3.25rem);
       line-height: 1.1;
       font-weight: var(--fw-light);
       letter-spacing: 0.2px;
       margin-bottom: 1rem;
   }

   .aa-subtext {
       max-width: 560px;
       color: #4e4e54;
       margin-bottom: 1.5rem;
   }

   .aa-contact-lines {
       display: flex;
       flex-direction: column;
       gap: 0.5rem;
   }

   .aa-contact-lines p {
       margin: 0;
       font-size: 1rem;
       color: #1a1a1a;
       display: flex;
       align-items: center;
       gap: 0.5rem;
   }

   .aa-contact-lines img {
       width: 20px;
       height: 20px;
   }

   .aa-form-card {
       background: #000;
       color: #fff;
       border-radius: 24px;
       padding: clamp(1.5rem, 4vw, 2.5rem);
       width: min(560px, 100%);
       margin: 0 auto;
       box-shadow: 0 12px 40px rgba(0, 0, 0, .18);
   }

   @media (max-width: 991.98px) {
       .aa-form-card {
           border-radius: 16px;
       }
   }

   .aa-form-title {
       font-size: clamp(1.6rem, 2.4vw, 2rem);
       letter-spacing: .5px;
       font-weight: var(--fw-light);
       color: #fff;
       text-align: center;
       margin-bottom: 1.5rem;
   }

   .aa-form-group {
       margin-bottom: 1rem;
   }

   .aa-input {
       width: 100%;
       background: #fff;
       color: #111;
       border: none;
       border-radius: 8px;
       padding: 0.95rem 1rem;
       box-shadow: 0 1px 0 rgba(0, 0, 0, .05);
   }

   .aa-input::placeholder {
       color: #7b7b7b;
   }

   .aa-input:focus {
       outline: none;
       box-shadow: 0 0 0 .2rem rgba(0, 0, 0, .1), 0 0 0 .35rem rgba(0, 0, 0, .06);
   }

   .aa-textarea {
       resize: vertical;
       min-height: 150px;
   }

   .aa-submit {
       background: #fff;
       color: #000;
       border: none;
       border-radius: 999px;
       padding: .6rem 1.3rem;
       letter-spacing: .5px;
       cursor: pointer;
       display: inline-flex;
       align-items: center;
       justify-content: center;
   }

   .aa-submit span {
       font-weight: var(--fw-light);
   }

   .aa-submit:hover {
       filter: brightness(0.98);
   }

   /* ---------- OFFICE LOCATIONS ---------- */
   .aa-locations {
       padding-bottom: 150px;
   }

   .aa-locations .aa-heading {
       color: #000;
       font-weight: var(--fw-light);
       letter-spacing: 0.2px;
       margin: 0 0 clamp(2rem, 4vw, 3rem);
       font-size: clamp(1.6rem, 1.2vw + 1.2rem, 2.25rem);
       line-height: 1.2;
       text-wrap: balance;
   }

   .aa-locations-grid {
       display: grid;
       grid-template-columns: repeat(2, minmax(0, 1fr));
       gap: clamp(1.25rem, 3vw, 2.5rem);
       align-items: stretch;
   }

   .aa-location-card {
       background: #ffffff;
       border: 1px solid var(--color-border);
       border-radius: 22px;
       padding: clamp(1.5rem, 3.5vw, 3rem);
       display: flex;
       flex-direction: column;
       gap: 0.6rem;
   }

   .aa-loc-icon {
       line-height: 0;
   }

   .aa-loc-icon img {
       width: clamp(44px, 4vw + 24px, 56px);
       height: auto;
       display: block;
       filter: grayscale(1);
       opacity: 0.7;
   }

   .aa-loc-name {
       margin: 0.25rem 0 0;
       letter-spacing: 0.2px;
       line-height: 1.25;
       font-weight: var(--fw-light);
       font-size: clamp(1.25rem, 1vw + 1rem, 1.75rem);
       color: #0e0e0f;
   }

   .aa-loc-address {
       margin: 0.25rem 0 0;
       color: #5c5c61;
       line-height: 1.8;
       font-size: clamp(0.98rem, 0.3vw + 0.9rem, 1.05rem);
       max-width: 48ch;
   }

   @media (max-width: 991.98px) {
       .aa-locations-grid {
           grid-template-columns: 1fr;
       }

       .aa-location-card {
           max-width: 100%;
           min-height: 200px;
           justify-content: center;
           border-radius: 16px;
       }
   }

   @media (prefers-reduced-motion: reduce) {
       .aa-location-card {
           transition: none !important;
       }
   }

   /* ---------- PROJECTS LIST SECTION ---------- */
   .aa-projects {
       background: #ffffff;
       padding: clamp(2.5rem, 5vw, 4rem) 0;
       color: #0f0f10;
   }

   .aa-projects-grid {
       display: grid;
       gap: clamp(1rem, 2.5vw, 2rem);
       grid-template-columns: repeat(3, minmax(0, 1fr));
   }

   @media (max-width: 1024px) {
       .aa-projects-grid {
           grid-template-columns: repeat(2, minmax(0, 1fr));
       }
   }

   @media (max-width: 640px) {
       .aa-projects-grid {
           grid-template-columns: 1fr;
       }
   }

   .aa-project-card {
       background: #F5F5F5;
       border-radius: 20px;
       overflow: hidden;
       display: flex;
       flex-direction: column;
   }

   .aa-project-media {
       display: block;
       position: relative;
       border-top-left-radius: 18px;
       border-top-right-radius: 18px;
       overflow: hidden;
   }

   .aa-project-img {
       width: 100%;
       aspect-ratio: 16/9;
       object-fit: cover;
       display: block;
       transition: transform .35s ease;
   }

   .aa-project-card:hover .aa-project-img {
       transform: scale(1.1);
   }

   .aa-project-body {
       padding: 1.1rem 1.25rem 1.25rem;
       display: grid;
       grid-template-rows: auto auto;
       gap: 1rem;
   }

   .aa-project-name {
       font-size: clamp(1.15rem, 0.8vw + 1rem, 1.55rem);
       font-weight: var(--fw-light);
       letter-spacing: .2px;
       margin: .25rem 0 0;
       color: #111111;
   }

   .aa-project-btn {
       display: inline-flex;
       align-items: center;
       justify-content: center;
       padding: .9rem 1.25rem;
       background: #000000;
       color: #ffffff;
       text-decoration: none;
       border-radius: 999px;
       font-size: .85rem;
       font-weight: 700;
       letter-spacing: .6px;
       text-transform: uppercase;
       box-shadow: inset 0 -2px 0 rgba(255, 255, 255, 0.08);
       transition: transform .15s ease, filter .15s ease;
   }

   .aa-project-btn:hover {
       filter: brightness(0.92);
       transform: translateY(-5px);
   }

   .aa-project-btn:active {
       transform: translateY(0);
   }

   /* ---------- BLOGS LIST SECTION ---------- */
   .aa-blogs {
       background: #ffffff;
       padding: clamp(2.5rem, 5vw, 4rem) 0;
   }

   .aa-blogs-title {
       font-size: clamp(1.6rem, 1.2vw + 1.2rem, 2.25rem);
       line-height: 1.2;
       font-weight: var(--fw-light);
       letter-spacing: .2px;
       margin: 0 0 clamp(1.25rem, 2.5vw, 2rem);
   }

   .aa-blogs-grid {
       display: grid;
       gap: clamp(1rem, 2.5vw, 2rem);
       grid-template-columns: repeat(3, minmax(0, 1fr));
   }

   @media (max-width: 1024px) {
       .aa-blogs-grid {
           grid-template-columns: repeat(2, minmax(0, 1fr));
       }
   }

   @media (max-width: 640px) {
       .aa-blogs-grid {
           grid-template-columns: 1fr;
       }
   }

   .aa-blog-card {
       background: #F5F5F5;
       border-radius: 18px;
       overflow: hidden;
       display: flex;
       flex-direction: column;
   }

   .aa-blog-media {
       display: block;
       position: relative;
       border-top-left-radius: 18px;
       border-top-right-radius: 18px;
       overflow: hidden;
   }

   .aa-blog-img {
       width: 100%;
       aspect-ratio: 16/9;
       object-fit: cover;
       display: block;
       transform: scale(1.001);
       transition: transform .35s ease, filter .35s ease;
       filter: grayscale(1);
   }

   .aa-blog-card:hover .aa-blog-img {
       transform: scale(1.1);
   }

   .aa-blog-body {
       padding: 1.1rem 1.25rem 1.25rem;
       display: grid;
       grid-template-rows: auto auto auto;
       gap: .9rem;
   }

   .aa-blog-title {
       color: #111111;
       font-weight: var(--fw-light);
       letter-spacing: .2px;
       font-size: clamp(1.05rem, .7vw + 1rem, 1.25rem);
       line-height: 1.35;
   }

   .aa-blog-meta {
       display: grid;
       grid-template-columns: 1fr auto;
       align-items: center;
       gap: .75rem;
   }

   .aa-blog-author {
       display: inline-flex;
       align-items: center;
       gap: .55rem;
       color: #000;
       font-size: .95rem;
       font-weight: 600;
   }

   .aa-author-ico {
       width: 32px;
       height: 32px;
       display: block;
   }

   .aa-blog-date {
       color: #707070;
       font-size: .9rem;
   }

   .aa-blog-btn {
       display: inline-flex;
       align-items: center;
       justify-content: center;
       padding: .9rem 1.25rem;
       margin-top: 16px;
       background: #000000;
       color: #ffffff;
       text-decoration: none;
       border-radius: 999px;
       font-size: .85rem;
       font-weight: 700;
       letter-spacing: .6px;
       text-transform: uppercase;
       box-shadow: inset 0 -2px 0 rgba(255, 255, 255, 0.08);
       transition: transform .15s ease, filter .15s ease;
   }

   .aa-blog-btn:hover {
       transform: translateY(-3px);
   }

   .aa-blog-btn:active {
       transform: translateY(0);
   }

   @media (prefers-reduced-motion: reduce) {

       .aa-blog-card,
       .aa-blog-img,
       .aa-blog-btn {
           transition: none !important;
       }
   }

   /* ---------- HELP CENTRE ---------- */
   .aa-support {
       background: #ffffff;
       padding: clamp(2.5rem, 6vw, 4rem) 0;
       color: #0f0f10;
   }

   .aa-support-grid {
       display: grid;
       grid-template-columns: repeat(3, minmax(0, 1fr));
       gap: clamp(1rem, 2.8vw, 2rem);
   }

   @media (max-width: 1024px) {
       .aa-support-grid {
           grid-template-columns: repeat(2, minmax(0, 1fr));
       }
   }

   @media (max-width: 640px) {
       .aa-support-grid {
           grid-template-columns: 1fr;
       }
   }

   .aa-support-card {
       background: #f5f5f5;
       border-radius: 16px;
       padding: clamp(1.25rem, 3vw, 2rem);
       display: grid;
       grid-template-rows: auto auto 1fr;
       row-gap: clamp(0.6rem, 1.6vw, 1rem);
       min-height: 220px;
   }

   .aa-support-icon {
       line-height: 0;
       margin-bottom: .25rem;
   }

   .aa-support-icon img {
       width: clamp(36px, 4vw, 48px);
       height: auto;
       display: block;
   }

   .aa-support-title {
       margin: 0;
       font-weight: var(--fw-light);
       letter-spacing: .2px;
       line-height: 1.3;
       font-size: clamp(1.1rem, .9vw + 1rem, 1.4rem);
       color: #141415;
   }

   .aa-support-text {
       margin: 0;
       color: #5c5c61;
       line-height: 1.75;
       font-size: clamp(.95rem, .35vw + .9rem, 1.02rem);
       max-width: 56ch;
   }

   @media (prefers-reduced-motion: reduce) {
       .aa-support-card {
           transition: none;
       }
   }

   /* ---------- HELP CENTRE FAQ ---------- */
   .aa-faq {
       background: var(--color-bg);
       padding: clamp(2.5rem, 6vw, 4rem) 0;
       color: #000;
   }

   .aa-faq-title {
       text-align: center;
       font-weight: var(--fw-light);
       margin: 0 0 clamp(1.25rem, 2.5vw, 2rem);
       font-size: clamp(1.6rem, 1.2vw + 1.2rem, 2.25rem);
       letter-spacing: .2px;
   }

   .aa-faq-list {
       display: grid;
       gap: clamp(0.9rem, 1.8vw, 1.25rem);
       margin-inline: auto;
   }

   .aa-faq-item {
       border: 1px solid rgba(0, 0, 0, 0.18);
       border-radius: 12px;
       background: #ffffff;
       color: #0f0f10;
       overflow: hidden;
       transition: box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
   }

   .aa-faq-item:hover {
       box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08);
       border: 1px solid rgba(0, 0, 0, 1);
   }

   .aa-faq-item.is-open {
       background: #000000;
       color: #ffffff;
       border-color: #000000;
       box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18);
   }

   .aa-faq-item.is-open .aa-faq-trigger,
   .aa-faq-item.is-open .aa-faq-question {
       color: #ffffff;
   }

   .aa-faq-item.is-open .aa-faq-icon::before,
   .aa-faq-item.is-open .aa-faq-icon::after {
       background: #ffffff;
   }

   .aa-faq-trigger {
       appearance: none;
       width: 100%;
       background: transparent;
       border: 0;
       color: inherit;
       text-align: left;
       display: flex;
       align-items: center;
       justify-content: space-between;
       gap: 1rem;
       padding: clamp(1rem, 2vw, 1.25rem) clamp(1rem, 2.2vw, 1.5rem);
       cursor: pointer;
   }

   .aa-faq-trigger:focus-visible {
       outline: 2px solid #000;
       outline-offset: 3px;
   }

   .aa-faq-item.is-open .aa-faq-trigger:focus-visible {
       outline-color: #fff;
   }

   .aa-faq-question {
       font-size: clamp(1.05rem, .8vw + 1rem, 1.3rem);
       font-weight: 600;
       line-height: 1.3;
       color: inherit;
   }

   .aa-faq-icon {
       width: 28px;
       height: 28px;
       position: relative;
       flex: 0 0 28px;
   }

   .aa-faq-icon::before,
   .aa-faq-icon::after {
       content: "";
       position: absolute;
       inset: 0;
       margin: auto;
       width: 16px;
       height: 2px;
       background: currentColor;
       transition: transform .2s ease, background .2s ease;
   }

   .aa-faq-icon::after {
       transform: rotate(90deg);
   }

   .aa-faq-item.is-open .aa-faq-icon::after {
       transform: rotate(0deg);
   }

   .aa-faq-panel {
       max-height: 0;
       overflow: hidden;
       transition: max-height .25s ease;
       padding: 0 clamp(1rem, 2.2vw, 1.5rem);
   }

   .aa-faq-item.is-open .aa-faq-panel {
       padding-bottom: clamp(1rem, 2vw, 1.25rem);
   }

   .aa-faq-panel p {
       margin: 0;
       color: inherit;
       opacity: .85;
       line-height: 1.7;
       font-size: clamp(.95rem, .35vw + .9rem, 1.02rem);
   }

   @media (prefers-reduced-motion: reduce) {

       .aa-faq-item,
       .aa-faq-icon::before,
       .aa-faq-icon::after {
           transition: none !important;
       }
   }

   /* ---------- REVIEWS LIST SECTION ---------- */
   .aa-reviews {
       background: #ffffff;
       padding: clamp(2.5rem, 6vw, 4rem) 0;
       color: #0f0f10;
   }

   .aa-reviews-grid {
       display: grid;
       gap: clamp(1rem, 2.8vw, 2rem);
       grid-template-columns: repeat(3, minmax(0, 1fr));
   }

   @media (max-width: 1024px) {
       .aa-reviews-grid {
           grid-template-columns: repeat(2, minmax(0, 1fr));
       }
   }

   @media (max-width: 640px) {
       .aa-reviews-grid {
           grid-template-columns: 1fr;
       }
   }

   .aa-review-card {
       background: #f5f5f5;
       border-radius: 16px;
       padding: clamp(1.1rem, 2.5vw, 1.4rem);
       display: grid;
       grid-auto-rows: min-content;
       row-gap: clamp(0.75rem, 1.8vw, 1rem);
       min-height: 260px;
       transition: transform .15s ease, box-shadow .15s ease;
   }

   .aa-review-card:hover {
       outline: 1px solid rgba(0, 0, 0, 1);
       cursor: default;
   }

   .aa-review-quote {
       margin: 0;
       font-size: clamp(1rem, .8vw + .95rem, 1.15rem);
       line-height: 1.7;
       color: #141415;
   }

   .aa-reviewer {
       display: grid;
       grid-template-columns: 40px 1fr;
       align-items: center;
       gap: .75rem;
   }

   .aa-avatar {
       width: 40px;
       height: 40px;
       border-radius: 50%;
       object-fit: cover;
       display: block;
   }

   .aa-reviewer-meta {
       display: flex;
       flex-direction: column;
       gap: .15rem;
   }

   .aa-name {
       font-weight: 700;
       color: #141415;
   }

   .aa-org {
       color: #6b6b6b;
       font-size: .95rem;
   }

   .aa-brought {
       display: grid;
       gap: .5rem;
   }

   .aa-brought-label {
       font-size: .85rem;
       color: #6b6b6b;
       letter-spacing: .2px;
       font-weight: 600;
   }

   .aa-tags {
       display: flex;
       flex-wrap: wrap;
       gap: .5rem;
   }

   .aa-tag {
       display: inline-flex;
       align-items: center;
       justify-content: center;
       padding: .45rem .7rem;
       background: #ffffff;
       border: 1px solid rgba(0, 0, 0, 0.10);
       border-radius: 999px;
       color: #111111;
       font-size: .78rem;
       font-weight: 600;
       letter-spacing: .2px;
       line-height: 1;
       box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
   }

   /* ---------- TNC SECTION ---------- */
   .aa-tnc-container {
       background-color: #ffffff;
       color: #000000;
       padding: 3rem 1rem;
       border-radius: 8px;
   }

   .aa-tnc-back-btn {
       display: inline-flex;
       align-items: center;
       border-radius: 10px;
       background: #252525;
       padding: 12px 18px;
       border: none;
       text-decoration: none;
       margin-bottom: 2rem;
   }

   .aa-tnc-back-icon {
       margin-right: 8px;
   }

   .aa-tnc-back-text {
       color: #ffffff;
       font-size: 18px;
       font-weight: 500;
   }

   .aa-tnc-row {
       display: flex;
       flex-wrap: wrap;
       margin-top: 2rem;
   }

   .aa-tnc-nav-col {
       flex: 0 0 220px;
       max-width: 220px;
   }

   .aa-tnc-content-col {
       flex: 1;
       padding-left: 1rem;
   }

   .aa-tnc-nav .nav-link {
       color: #555555;
       border-radius: 0;
       text-align: left;
       transition: all 0.2s ease-in-out;
       border-left: 2px solid #dcdcdc;
       font-weight: 500;
       padding: 10px 15px;
   }

   .aa-tnc-nav .nav-link:hover {
       background-color: #f5f5f5;
       color: #000000;
       border-radius: 0px 5px 5px 0px;
   }

   .aa-tnc-nav .nav-link.active {
       background: none;
       color: #000000;
       border-left: 3px solid #000000;
   }

   .aa-tnc-pane {
       padding: 2rem;
       border-radius: 10px;
       background-color: #f5f5f5;
       margin-bottom: 1rem;
       animation: 0.5s ease-in-out 0s 1 fadeIn;
   }

   .aa-tnc-list {
       padding-left: 1.2rem;
   }

   .aa-tnc-date {
       display: block;
       margin-top: 1rem;
       margin-bottom: 0.5rem;
       color: #666666;
       font-size: 0.9rem;
   }

   .aa-tnc-pane h2 {
       margin-bottom: 0.5rem;
       font-size: 2rem;
       font-weight: var(--fw-light);
   }

   @keyframes fadeIn {
       from {
           opacity: 0;
           transform: translateY(8px);
       }

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

   @media screen and (max-width: 767px) {
       .aa-tnc-row {
           flex-direction: column;
       }

       .aa-tnc-content-col {
           padding-left: 0;
       }

       .aa-tnc-nav-col {
           flex: 0 0 120px;
       }

       .aa-tnc-back-btn {
           margin-bottom: 1rem;
       }
   }

   /* ---------- SITEMAP SECTION ---------- */
   .aa-sitemap {
       background: #ffffff;
       color: #0f0f10;
       padding: clamp(2.5rem, 6vw, 4rem) 0;
   }

   .aa-container-smp {
       width: min(1220px, 100%);
       margin-inline: auto;
   }

   .aa-sitemap-row {
       padding: clamp(1.5rem, 4vw, 2.25rem) 0;
       border-bottom: 1px solid rgba(0, 0, 0, .06);
   }

   .aa-sitemap-row:last-of-type {
       border-bottom: 0;
   }

   .aa-sitemap-heading {
       margin: 0 0 1rem 0;
       font-weight: var(--fw-light);
       letter-spacing: .08em;
       text-transform: uppercase;
       font-size: clamp(1rem, .6vw + .9rem, 1.25rem);
   }

   .aa-links-grid {
       display: grid;
       gap: 1.25rem 2.5rem;
   }

   .aa-cols-2 {
       grid-template-columns: repeat(2, minmax(0, 1fr));
   }

   .aa-cols-3 {
       grid-template-columns: repeat(3, minmax(0, 1fr));
   }

   .aa-cols-4 {
       grid-template-columns: repeat(4, minmax(0, 1fr));
   }

   @media (max-width: 992px) {
       .aa-cols-4 {
           grid-template-columns: repeat(3, minmax(0, 1fr));
       }
   }

   @media (max-width: 768px) {
       .aa-container-smp {
           margin: 15px;
       }

       .aa-cols-3,
       .aa-cols-4 {
           grid-template-columns: repeat(2, minmax(0, 1fr));
       }
   }

   @media (max-width: 520px) {

       .aa-cols-2,
       .aa-cols-3,
       .aa-cols-4 {
           grid-template-columns: 1fr;
       }
   }

   .aa-links {
       list-style: none;
       margin: 0;
       padding: 0;
       display: grid;
       gap: .55rem;
   }

   .aa-links a {
       color: #505050;
       text-decoration: none;
       font-size: clamp(.98rem, .25vw + .9rem, 1.05rem);
       line-height: 1.6;
   }

   .aa-links a:hover {
       text-decoration: underline;
       color: #111111;
   }

   @media (min-width: 1024px) {
       .aa-sitemap-row {
           padding-top: 2.25rem;
           padding-bottom: 2.25rem;
       }
   }

   /* ---------- SEARCH BAR SECTION ---------- */
   input[type="search"]::-webkit-search-decoration,
   input[type="search"]::-webkit-search-cancel-button,
   input[type="search"]::-webkit-search-results-button,
   input[type="search"]::-webkit-search-results-decoration {
       display: none;
   }

   .aa-search-wrap {
       padding: clamp(2rem, 6vw, 5rem) 0 3rem;
       margin-block: 50px;
       --aa-search-max: 800px;
   }

   @media screen and (max-width: 767px) {
       .aa-search-wrap {
           padding: 15px;
           margin-block: 100px;
       }
   }

   .aa-search-results {
       padding: 10px 16px;
       background-color: #EEEEEE;
       border-radius: 15px;
   }

   .aa-search-title {
       font-weight: var(--fw-light);
       letter-spacing: .3px;
       text-align: center;
       font-size: clamp(2rem, 4vw, 3.25rem);
       margin-bottom: 1.25rem;
   }

   .aa-searchbar {
       max-width: var(--aa-search-max);
       margin: 0 auto 2rem;
       position: relative;
       border: 1px solid #111;
       border-radius: 999px;
       padding-right: 3.25rem;
   }

   .aa-searchbar .form-control {
       border: 0;
       outline: 0;
       box-shadow: none;
       background: #fff;
       padding: .9rem 1.25rem;
       border-radius: 999px;
       font-size: 1rem;
   }

   .aa-searchbar .aa-icon {
       position: absolute;
       right: .6rem;
       top: 50%;
       transform: translateY(-50%);
       width: 38px;
       height: 38px;
       border: none;
       display: grid;
       place-items: center;
       color: #111;
       background: #fff;
   }

   .aa-result {
       background: #F5F5F5;
       border-radius: 18px;
       padding: 1rem 1.25rem;
   }

   .aa-result-img {
       width: 86px;
       height: 86px;
       object-fit: cover;
       border-radius: 8px;
       background: #fff;
   }

   .aa-result-title {
       margin: 0;
       font-family: "Satoshi", sans-serif;
       font-size: 1.5rem;
   }

   .aa-result-desc {
       margin: .35rem 0 0;
       color: #333;
   }

   .aa-btn {
       display: inline-flex;
       align-items: center;
       justify-content: center;
       padding: .4rem 1rem;
       border-radius: 999px;
       background: #000;
       color: #fff;
       text-decoration: none;
       font-weight: 700;
       font-size: .85rem;
       letter-spacing: .4px;
   }

   .aa-btn:hover {
       color: #fff;
       filter: brightness(.92);
   }

   .aa-search-results {
       max-width: var(--aa-search-max);
       width: 100%;
       margin: 0 auto;
       padding: 10px 16px;
       background-color: #EEEEEE;
       border-radius: 15px;
   }

   .aa-result,
   .aa-no-results,
   .aa-result-list,
   #aaResultMount {
       width: 100%;
       max-width: 100%;
   }

   .aa-loading {
       background: #F5F5F5;
       color: #111;
       border-radius: 18px;
       padding: 1.25rem;
       max-width: 900px;
       margin: 0 auto;
   }

   /* ---------- INSTALLED DEVICES ---------- */
   .aa-devices {
       background: var(--color-bg);
       color: #0f0f10;
       padding: clamp(2.5rem, 6vw, 4rem) 0;
       border-top: 1px solid rgba(0, 0, 0, .5);
       border-bottom: 1px solid rgba(0, 0, 0, .5);
   }

   .aa-devices-grid {
       display: grid;
       gap: clamp(1.25rem, 3.5vw, 2.25rem);
       grid-template-columns: repeat(5, minmax(0, 1fr));
       justify-items: center;
   }

   @media (max-width: 1200px) {
       .aa-devices-grid {
           grid-template-columns: repeat(4, minmax(0, 1fr));
       }
   }

   @media (max-width: 992px) {
       .aa-devices-grid {
           grid-template-columns: repeat(3, minmax(0, 1fr));
       }
   }

   @media (max-width: 680px) {
       .aa-devices-grid {
           grid-template-columns: repeat(3, 1fr);
           gap: 1rem;
       }
   }

   .aa-device-card {
       display: grid;
       justify-items: center;
       gap: clamp(.6rem, 1.6vw, .9rem);
   }

   .aa-dev-frame {
       width: min(220px, 60vw);
       aspect-ratio: 1 / 1;
       border: 1px solid #101010;
       border-radius: 16px;
       background: #fff;
       overflow: hidden;
       transition: transform .18s ease, box-shadow .18s ease;

       flex-direction: column;
       justify-content: center;
       align-items: center;
       text-align: center;
   }

   .aa-dev-frame:hover {
       transform: translateY(-3px);
       box-shadow: 0 10px 26px rgba(0, 0, 0, .12);
   }

   .aa-dev-img {
       width: 80%;
       height: 80%;
       object-fit: contain;
       display: block;
       margin: 0 auto;
       /* added */
   }

   .aa-dev-name {
       margin: 0;
       text-align: center;
       font-weight: 600;
       letter-spacing: .02em;
       text-transform: uppercase;
       color: #111;
       font-family: "Satoshi", sans-serif;
       font-size: clamp(1rem, 1.2vw + .6rem, 1.6rem);
   }

   @media (max-width: 680px) {
       .aa-dev-frame {
           width: 150px;
           border-radius: 8px;
       }

       .aa-dev-img {
           width: 80%;
           height: 80%;
       }

       .aa-dev-name {
           font-size: .9rem;
       }
   }

   /* ---------- BREADCRUMB / HERO / INTRO ---------- */
   .aa-breadcrumb {
       font-size: 0.95rem;
       margin: 1rem 0 1.5rem;
       color: #fff;
       background-color: #F5F5F5;
       padding: .2rem 1rem;
       text-align: center;
       border-radius: 15px;
       display: inline-block;
   }

   .aa-breadcrumb .breadcrumb {
       background: transparent;
       padding: 0;
       margin: 0;
   }

   .aa-breadcrumb .breadcrumb-item+.breadcrumb-item::before {
       content: "/";
       color: #999;
       margin: 0 0.4rem;
   }

   .aa-breadcrumb a {
       color: #555;
       text-decoration: none;
       font-weight: 500;
   }

   .aa-breadcrumb a:hover {
       text-decoration: underline;
   }

   .aa-breadcrumb .active {
       color: #000;
       font-weight: var(--fw-medium);
   }

   .aa-hero {
       overflow: hidden;
       box-shadow: 0 18px 40px rgba(0, 0, 0, .08);
   }

   .aa-title {
       font-weight: var(--fw-light);
       font-size: clamp(1.8rem, 3.5vw, 2.8rem);
       letter-spacing: .2px;
       text-transform: uppercase;
   }

   .aa-intro {
       margin: 0 auto;
       line-height: 1.7;
   }

   .aa-dropcap::first-letter {
       float: left;
       font-size: 3rem;
       font-weight: 700;
       line-height: .9;
       padding: .2rem .5rem 0 0;
   }

   .aa-highlights {
       margin: 0 auto;
       line-height: 1.6;
   }

   .aa-dot {
       width: .35rem;
       height: .35rem;
       border-radius: 50%;
       background: #404040;
       flex-shrink: 0;
       margin-top: .5rem;
       margin-right: .6rem;
       box-shadow: 0 0 0 .12rem #d5d5d5;
   }

   .aa-cardimg {
       border-radius: 14px;
       overflow: hidden;
   }

   /* ---------- BLOGS DETAILED ---------- */
   .aa-title-blog {
       font-weight: var(--fw-light);
       font-family: "Satoshi", sans-serif;
   }

   .aa-author-avatar {
       width: 50px;
       height: 50px;
       border-radius: 50%;
       object-fit: cover;
   }

   .aa-author-name {
       font-weight: var(--fw-light);
       font-size: clamp(1.05rem, .6vw + 1rem, 1.35rem);
       font-family: "Satoshi", sans-serif;
   }

   .aa-author-role {
       color: #5c5c5c;
       font-size: clamp(.92rem, .25vw + .88rem, 1rem);
   }

   .aa-pill {
       display: inline-flex;
       align-items: center;
       gap: .5rem;
       background: #f3f3f3;
       color: #0f0f10;
       border-radius: 999px;
       padding: .6rem 1rem;
       font-weight: 500;
       white-space: nowrap;
       font-size: clamp(.9rem, .3vw + .85rem, 1rem);
   }

   .aa-pill-ico {
       width: 18px;
       height: 18px;
   }

   .aa-quote {
       margin: 1rem 0 1.25rem;
       padding: 1.25rem 1rem;
       background: #f5f5f5;
       border-radius: 12px;
       position: relative;
   }

   .aa-quote blockquote {
       margin: 20px 0;
       text-align: center;
       font-size: 1.05rem;
       line-height: 1.7;
   }

   /* ---------- PRODUCTS LIST ---------- */
   .aa-pl-container {
       max-width: 1240px;
   }

   .aa-pl-heading {
       font-weight: var(--fw-light);
       letter-spacing: .2px;
       font-size: clamp(2rem, 3.5vw, 3.2rem);
   }

   .aa-pl-tabs-outer {
       position: relative;
   }

   .aa-pl-tabs-wrap {
       overflow-x: auto;
       overflow-y: hidden;
       -webkit-overflow-scrolling: touch;
       overscroll-behavior-x: contain;
       touch-action: pan-x;
       padding-block: .25rem;
       scrollbar-width: none;
       -ms-overflow-style: none;
   }

   .aa-pl-tabs-wrap::-webkit-scrollbar {
       height: 0;
       width: 0;
       display: none;
   }

   .aa-pl-fade {
       position: absolute;
       top: 0;
       bottom: 0;
       width: 52px;
       pointer-events: none;
       opacity: 0;
       transition: opacity .15s ease;
       z-index: 5;
   }

   .aa-pl-fade.aa-left {
       left: 0;
       background: linear-gradient(to right, var(--color-bg), rgba(255, 255, 255, 0));
   }

   .aa-pl-fade.aa-right {
       right: 0;
       background: linear-gradient(to left, var(--color-bg), rgba(255, 255, 255, 0));
   }

   .aa-pl-tabs {
       min-width: 720px;
   }

   .aa-pl-tab {
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: center;
       width: 150px;
       height: 150px;
       min-width: 150px;
       border: 2px solid #777;
       border-radius: 16px;
       background: var(--color-bg);
       color: #0f0f10;
       text-decoration: none;
       transition: transform .12s ease, background .12s ease, color .12s ease, border-color .12s ease;
   }

   .aa-pl-tab:hover {
       transform: translateY(-2px);
   }

   .aa-pl-tab.is-active {
       background: #000;
       border-color: #000;
       color: #fff;
   }

   .aa-pl-tab-icon {
       width: 80px;
       height: 80px;
       object-fit: contain;
       margin-bottom: 12px;
       filter: grayscale(100%);
       transition: transform .25s ease, filter .15s ease;
   }

   .aa-pl-tab:hover .aa-pl-tab-icon {
       transform: scale(1.06);
   }

   .aa-pl-tab.is-active .aa-pl-tab-icon {
       filter: none;
   }

   .aa-pl-tab-label {
       font-weight: var(--fw-light);
       font-size: 1.05rem;
       text-align: center;
   }

   .aa-pl-tab.is-active .aa-pl-tab-label {
       color: #fff;
   }

   .aa-pl-section-title {
       font-weight: var(--fw-light);
       font-size: clamp(2rem, 2.8vw, 3rem);
       margin-top: 50px;
   }

   .aa-pl-card {
       border: 1px solid rgba(0, 0, 0, .12);
       border-radius: 18px;
       overflow: hidden;
       background: var(--color-bg);
       display: flex;
       flex-direction: column;
       height: 100%;
       transition: box-shadow .15s ease, transform .15s ease;
   }

   .aa-pl-card:hover {
       transform: translateY(-2px);
       box-shadow: 0 12px 28px rgba(0, 0, 0, .10);
   }

   .aa-pl-media {
       display: flex;
       align-items: center;
       justify-content: center;
       height: 450px;
       overflow: hidden;
       background: var(--color-bg);
   }

   .aa-pl-img {
       max-height: 300px;
       object-fit: contain;
       transition: transform .25s ease;
   }

   .aa-pl-card:hover .aa-pl-img {
       transform: scale(1.1);
   }

   .aa-pl-body {
       background: #f3f3f3;
       padding: 1.25rem 1.25rem 1.25rem;
       display: flex;
       flex-direction: column;
       height: 45%;
   }

   .aa-pl-title {
       margin: 0 0 .32rem;
       font-weight: var(--fw-medium);
       font-size: 1.8rem;
       font-family: "Satoshi", sans-serif;
   }

   .aa-pl-media-link {
       display: inline-block;
       text-decoration: none;
   }

   .aa-pl-title a {
       text-decoration: none;
   }

   .aa-pl-sub {
       font-size: .9rem;
       font-weight: var(--fw-medium);
       color: #444;
       margin-bottom: 1rem;
   }

   .aa-pl-bullets {
       margin: 0 0 .5rem;
       padding-left: 1.1rem;
       font-size: .92rem;
   }

   .aa-pl-bullets li {
       margin-bottom: .2rem;
       font-weight: var(--fw-light);
       letter-spacing: .5px;
   }

   .aa-pl-btn {
       margin-top: auto;
       display: inline-flex;
       align-items: center;
       justify-content: center;
       background: #000;
       color: #fff;
       text-decoration: none;
       border-radius: 999px;
       padding: .6rem 1rem;
       font-weight: 700;
       font-size: .9rem;
       transition: transform .15s ease, filter .15s ease;
   }

   .aa-pl-btn:hover {
       color: #fff;
       filter: brightness(.92);
       transform: translateY(-2px);
   }

   @media (max-width: 575.98px) {
       .aa-pl-tab {
           width: 150px;
           height: 150px;
           min-width: 150px;
       }

       .aa-pl-tab-icon {
           width: 64px;
           height: 64px;
       }

       .aa-pl-media {
           height: 50%;
       }

       .aa-pl-body {
           height: 55%;
       }
   }

   /* ---------- PRODUCT DETAILS ---------- */
   .aa-pd-container {
       max-width: 1240px;
   }

   .aa-pd-heading {
       font-family: "Satoshi", sans-serif;
       font-weight: 300;
       letter-spacing: .2px;
       font-size: clamp(2rem, 3.5vw, 3.2rem);
       color: #0f0f10;
   }

   .aa-pd-card {
       border: 1px solid rgba(0, 0, 0, .12);
       border-radius: 18px;
       background: #fff;
       overflow: hidden;
       transition: box-shadow .15s ease, transform .15s ease;
   }

   .aa-pd-card:hover {
       transform: translateY(-2px);
       box-shadow: 0 12px 28px rgba(0, 0, 0, .1);
   }

   .aa-pd-media {
       height: 210px;
       display: flex;
       align-items: center;
       justify-content: center;
       background: #fff;
       overflow: hidden;
   }

   .aa-pd-img {
       max-width: 70%;
       max-height: 170px;
       object-fit: contain;
       transition: transform .25s ease;
   }

   .aa-pd-card:hover .aa-pd-img {
       transform: scale(1.1);
   }

   .aa-pd-name {
       font-size: clamp(1.2rem, .7vw + 1rem, 1.6rem);
       font-weight: var(--fw-light);
       color: #0f0f10;
       padding-block: 1rem;
   }

   .aa-pd-body {
       padding: 16px 18px 18px 18px;
       background-color: #f5f5f5;
   }

   .aa-pd-sub {
       margin: 0 0 .6rem;
       color: #3f3f3f;
       font-size: .96rem;
   }

   .aa-pd-list {
       padding-left: 1.1rem;
       margin: 0 0 1rem;
       font-size: .95rem;
   }

   .aa-pd-list li {
       margin-bottom: .25rem;
   }

   .aa-pd-btn {
       display: inline-flex;
       align-items: center;
       justify-content: center;
       background: #000;
       color: #fff;
       text-decoration: none;
       border-radius: 999px;
       padding: .65rem 1.1rem;
       font-weight: var(--fw-bold);
       font-size: .9rem;
       transition: transform .15s ease, filter .15s ease;
   }

   .aa-pd-btn:hover {
       color: #fff;
       filter: brightness(.92);
       transform: translateY(-2px);
   }

   @media (max-width: 575.98px) {
       .aa-pd-media {
           height: 190px;
       }
   }

   .aa-pd-acc .aa-pd-acc-container {
       max-width: 1240px;
   }

   .aa-pd-acc .aa-pd-acc-heading {
       font-family: "Satoshi", sans-serif;
       font-weight: 300;
       letter-spacing: .2px;
       font-size: clamp(2rem, 3.5vw, 3.2rem);
       color: #0f0f10;
   }

   .aa-pd-acc .aa-pd-acc-card {
       border: 1px solid rgba(0, 0, 0, .12);
       border-radius: 18px;
       background: #fff;
       overflow: hidden;
       transition: box-shadow .15s ease, transform .15s ease;
   }

   .aa-pd-acc .aa-pd-acc-card:hover {
       transform: translateY(-2px);
       box-shadow: 0 12px 28px rgba(0, 0, 0, .10);
   }

   .aa-pd-acc .aa-pd-acc-media {
       height: 230px;
       display: flex;
       align-items: center;
       justify-content: center;
       background: #fff;
       overflow: hidden;
   }

   .aa-pd-acc .aa-pd-acc-img {
       max-width: 72%;
       max-height: 180px;
       object-fit: contain;
       transition: transform .25s ease;
   }

   .aa-pd-acc .aa-pd-acc-card:hover .aa-pd-acc-img {
       transform: scale(1.1);
   }

   .aa-pd-acc .aa-pd-acc-name {
       font-weight: var(--fw-light);
       font-size: clamp(1.25rem, .7vw + 1rem, 1.6rem);
       line-height: 1.15;
       color: #0f0f10;
       margin-bottom: 1rem;
   }

   .aa-pd-acc .aa-pd-acc-body {
       background-color: #f5f5f5;
       padding: 16px 18px 18px;
       display: flex;
       flex-direction: column;
   }

   .aa-pd-acc .aa-pd-acc-copy {
       color: #3f3f3f;
       font-size: .96rem;
       margin: 0 0 .8rem;
   }

   .aa-pd-acc .aa-pd-acc-btn {
       display: inline-flex;
       align-items: center;
       justify-content: center;
       background: #000;
       color: #fff;
       text-decoration: none;
       border-radius: 999px;
       padding: .65rem 1.1rem;
       font-weight: var(--fw-bold);
       font-size: .9rem;
       transition: transform .15s ease, filter .15s ease;
   }

   .aa-pd-acc .aa-pd-acc-btn:hover {
       color: #fff;
       filter: brightness(.92);
       transform: translateY(-2px);
   }

   @media (max-width:575.98px) {
       .aa-pd-acc .aa-pd-acc-media {
           height: 200px;
       }
   }

   .aa-pd-dl .aa-pd-dl-container {
       max-width: 1240px;
   }

   .aa-pd-dl .aa-pd-dl-heading {
       font-weight: 300;
       letter-spacing: .2px;
       font-size: clamp(2rem, 3.5vw, 3.2rem);
       color: #0f0f10;
   }

   .aa-pd-dl .aa-pd-dl-subtitle {
       font-weight: 300;
       font-size: clamp(1.6rem, 1.3vw + 1rem, 2rem);
       color: #0f0f10;
   }

   .aa-pd-dl .aa-pd-dl-rule {
       height: 1px;
       background: #0f0f10;
       opacity: .25;
   }

   .aa-pd-dl .aa-pd-dl-item {
       display: flex;
       align-items: center;
       justify-content: space-between;
       gap: 1rem;
       padding: 1.1rem 1.25rem;
       min-height: 86px;
       border: 1.5px solid #0f0f10;
       border-radius: 16px;
       background: #fff;
       text-decoration: none;
       color: #0f0f10;
       transition: box-shadow .15s ease, transform .12s ease, background .12s ease;
   }

   .aa-pd-dl .aa-pd-dl-item:hover {
       transform: translateY(-2px);
       box-shadow: 0 12px 26px rgba(0, 0, 0, .08);
   }

   .aa-pd-dl .aa-pd-dl-left {
       display: flex;
       align-items: center;
       gap: 1rem;
   }

   .aa-pd-dl .aa-pd-dl-ico {
       position: relative;
       width: 34px;
       height: 40px;
       display: inline-block;
   }

   .aa-pd-dl .aa-pd-dl-ico svg {
       width: 100%;
       height: 100%;
       display: block;
   }

   .aa-pd-dl .aa-pd-dl-ico-badge {
       position: absolute;
       left: 50%;
       bottom: -6px;
       transform: translateX(-50%);
       background: #0f0f10;
       color: #fff;
       font-size: .62rem;
       line-height: 1;
       padding: .15rem .3rem;
       border-radius: 4px;
   }

   .aa-pd-dl .aa-pd-dl-name {
       font-size: clamp(1.05rem, .5vw + 1rem, 1.35rem);
   }

   .aa-pd-dl .aa-pd-dl-download {
       width: 28px;
       height: 28px;
       display: inline-grid;
       place-items: center;
       color: #0f0f10;
   }

   .aa-pd-dl .aa-pd-dl-download svg {
       width: 100%;
       height: 100%;
   }

   @media (max-width:575.98px) {
       .aa-pd-dl .aa-pd-dl-item {
           min-height: 80px;
       }
   }

   /* ========= Specifications ========= */
   .aa-pd-spec-container {
       max-width: 1200px;
       overflow-x: hidden;
   }

   .aa-pd-spec-heading {
       font-weight: var(--fw-light);
       letter-spacing: .2px;
       font-size: clamp(2rem, 3.2vw, 3rem);
       color: #0f0f10;
       line-height: 1.2;
   }

   .aa-pd-spec-ico {
       display: inline-grid;
   }

   .aa-pd-spec-ico img {
       width: 40px;
       height: 40px;
       object-fit: contain;
   }

   .aa-pd-spec-group-title {
       font-family: "Satoshi", sans-serif;
       font-weight: var(--fw-bold);
       font-size: clamp(1.05rem, 1vw + .8rem, 1.25rem);
       margin: 0 0 .5rem;
       color: #0f0f10;
   }

   .aa-pd-spec-list {
       list-style: none;
       margin: 0;
       padding: 0;
       border-top: 1px solid rgba(0, 0, 0, .2);
   }

   .aa-pd-spec-list li {
       display: flex;
       align-items: flex-start;
       justify-content: space-between;
       gap: 1.25rem;
       padding: .85rem 0;
       border-bottom: 1px solid rgba(0, 0, 0, .12);
       line-height: 1.55;
   }

   .aa-pd-spec-term {
       color: #222;
       flex: 0 0 170px;
       font-size: .98rem;
       word-break: break-word;
   }

   .aa-pd-spec-val {
       color: #111;
       font-size: .98rem;
       text-align: right;
       flex: 1 1 auto;
       word-break: break-word;
   }

   @media (max-width: 991.98px) {
       .aa-pd-spec-term {
           flex: 0 0 40%;
       }

       .aa-pd-spec-val {
           flex: 1 1 60%;
       }
   }

   @media (max-width: 767.98px) {
       .aa-pd-spec-list li {
           display: flex;
           align-items: flex-start;
           justify-content: space-between;
           gap: .75rem;
       }

       .aa-pd-spec-term {
           flex: 0 0 46%;
           font-weight: 600;
           line-height: 1.45;
           word-break: break-word;
           hyphens: auto;
       }

       .aa-pd-spec-val {
           flex: 1 1 54%;
           text-align: right;
           line-height: 1.45;
           word-break: break-word;
           hyphens: auto;
           white-space: normal;
       }
   }

   .aa-pd-special {
       position: relative;
       background: #000;
       color: #fff !important;
       padding: clamp(2.5rem, 8vw, 6rem) 0;
       overflow: hidden;
   }

   .aa-pd-special-title {
       color: #fff;
       font-family: "Satoshi", sans-serif;
       font-weight: 300;
       letter-spacing: .3px;
       font-size: clamp(1.8rem, 3.2vw, 3rem);
   }

   .aa-pd-special-hero {
       position: relative;
       min-height: clamp(300px, 45vw, 520px);
       display: grid;
       place-items: center;
   }

   .aa-pd-special-img {
       width: min(400px, 60vw);
       height: auto;
       filter: drop-shadow(0 22px 40px rgba(0, 0, 0, .65));
       z-index: 1;
   }

   .aa-pd-special-list {
       list-style: none;
       margin: 0;
       padding: 0;
       display: grid;
       gap: clamp(1.25rem, 2.5vw, 2rem);
   }

   .aa-pd-special-head {
       font-family: "Satoshi", sans-serif;
       font-weight: var(--fw-bold);
       color: #fff;
       font-size: clamp(1.05rem, .7vw + 1rem, 1.25rem);
   }

   .aa-pd-special-text {
       margin: 0;
       color: #d9d9d9;
       line-height: 1.6;
       font-size: clamp(.95rem, .4vw + .85rem, 1.05rem);
   }

   @media (max-width: 991.98px) {
       .aa-pd-special-list {
           text-align: center;
       }
   }

   @media (min-width: 992px) {

       .aa-pd-special .row>.col-lg-4:last-child .aa-pd-special-list,
       .aa-pd-special .row>.col-lg-4:last-child .aa-pd-special-head,
       .aa-pd-special .row>.col-lg-4:last-child .aa-pd-special-text {
           text-align: right;
       }
   }

   .aa-pd-hero {
       overflow-x: hidden;
       padding-bottom: 50px;
   }

   .aa-pd-hero img {
       display: block;
   }

   .aa-pd-title {
       font-family: "Satoshi", sans-serif;
       font-weight: var(--fw-regular);
       letter-spacing: .2px;
       font-size: clamp(1.8rem, 2.6vw, 3rem);
   }

   .aa-pd-lead {
       color: #333;
       font-size: clamp(1rem, .5vw + .95rem, 1.125rem);
   }

   .aa-pd-main {
       margin: 0;
       background: #fff;
       border-radius: 14px;
       display: grid;
       place-items: center;
       overflow: hidden;
   }

   .aa-pd-main img {
       width: 80%;
       height: 80%;
       object-fit: contain;
       transform: translateZ(0);
   }

   .aa-pd-thumbs {
       display: flex;
       flex-direction: column;
       gap: .75rem;
       max-height: clamp(260px, 40vw, 520px);
       overflow: visible;
       padding-right: 0;
   }

   .aa-pd-thumbs::-webkit-scrollbar {
       width: 6px;
   }

   .aa-pd-thumbs::-webkit-scrollbar-thumb {
       border-radius: 8px;
   }

   .aa-pd-thumb {
       width: 96px;
       height: 120px;
       display: grid;
       place-items: center;
       background: #fff;
       border: 2px solid rgba(0, 0, 0, .12);
       border-radius: 12px;
       padding: .25rem;
       cursor: pointer;
       transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
   }

   .aa-pd-thumb:hover {
       transform: translateY(-2px);
   }

   .aa-pd-thumb.is-active {
       border-color: #111;
   }

   .aa-pd-thumb img {
       max-width: 100%;
       max-height: 100%;
       object-fit: contain;
   }

   .aa-pd-bullets {
       margin: 1rem .5rem 0;
       padding-left: 1.25rem;
       font-size: clamp(.98rem, .3vw + .95rem, 1.05rem);
   }

   .aa-pd-bullets li {
       margin-bottom: .4rem;
       font-weight: var(--fw-light);
   }

   .aa-col-details {
       padding-inline: 15px;
   }

   .aa-col-thumbs {
       order: 1;
   }

   .aa-col-main {
       order: 2;
   }

   .aa-col-details {
       order: 3;
   }

   @media (max-width: 991.98px) {
       .aa-pd-hero .container {
           padding-left: 12px;
           padding-right: 12px;
       }

       .aa-col-main {
           order: 1;
       }

       .aa-col-thumbs {
           order: 2;
       }

       .aa-col-details {
           order: 3;
       }

       .aa-pd-thumbs {
           flex-direction: row;
           overflow-x: auto;
           overflow-y: hidden;
           max-height: none;
           max-width: 100%;
           padding: .25rem 0;
           gap: .5rem;
       }

       .aa-pd-thumb {
           width: 90px;
           height: 110px;
           flex: 0 0 auto;
       }

       .aa-pd-hero .col-auto,
       .aa-pd-hero .col-12,
       .aa-pd-hero .col-md-5,
       .aa-pd-hero .col-md-6,
       .aa-pd-hero .col-lg-4,
       .aa-pd-hero .col-lg-6 {
           width: 100%;
       }
   }

   /* ---------- Search ---------- */
   .aa-hl {
       background: #7bc6ff;
       padding: 0 .15em;
       border-radius: 3px;
   }

   .aa-result-img {
       width: 120px;
       height: 120px;
       object-fit: contain;
   }

   .aa-search-btn {
       display: inline-block;
       padding: .45rem .9rem;
       border: 1px solid #222;
       text-decoration: none;
   }

   .aa-suggest-btn {
       border: 1px solid #444;
       background: #111;
       color: #fff;
       padding: .35rem .7rem;
       border-radius: 999px;
       cursor: pointer;
   }

   .aa-suggest-btn:hover {
       background: #1a1a1a;
   }

   .invalid-feedback {
       color: #ef4545;
       font-weight: 700;
   }