@charset "UTF-8";
/* ==========================================================================
   MC Awnings Blinds Shutters -- subpage.css
   THE ONLY STYLESHEET a service page loads. Everything a subpage needs is
   here, carried over from custom.css in the same order so the cascade is
   unchanged, followed by the service-page styles.

     1. Bootstrap        grid, accordion, collapse, forms, off-canvas (purged)
     2. Theme styles     topbar, header, buttons, section titles, footer
     3. Animation        fadeInUp only, from animate.css
     4. Site overrides   brand colours and the numbered tweaks
     5. Off-canvas menu  mobile navigation
     6+ Service pages    hero, intro, benefits, rooms, orbit, FAQ, CTA, form

   Not included, because no service page uses them:
     Swiper 18.0 KB | Magnific Popup 6.8 KB

   Still loaded from CDN in <head> (remote, cannot be inlined):
     Google Fonts "Stack Sans Headline"  |  Font Awesome 7.3.1
   ========================================================================== */


/* ==========================================================================
   1. BOOTSTRAP (vendor, purged)
      grid, accordion, collapse, forms, off-canvas
   ========================================================================== */
:root,[data-bs-theme=light]{--bs-blue:#0d6efd;--bs-indigo:#6610f2;--bs-purple:#6f42c1;--bs-pink:#d63384;--bs-red:#dc3545;--bs-orange:#fd7e14;--bs-yellow:#ffc107;--bs-green:#198754;--bs-teal:#20c997;--bs-cyan:#0dcaf0;--bs-black:#000;--bs-white:#fff;--bs-gray:#6c757d;--bs-gray-dark:#343a40;--bs-gray-100:#f8f9fa;--bs-gray-200:#e9ecef;--bs-gray-300:#dee2e6;--bs-gray-400:#ced4da;--bs-gray-500:#adb5bd;--bs-gray-600:#6c757d;--bs-gray-700:#495057;--bs-gray-800:#343a40;--bs-gray-900:#212529;--bs-primary:#0d6efd;--bs-secondary:#6c757d;--bs-success:#198754;--bs-info:#0dcaf0;--bs-warning:#ffc107;--bs-danger:#dc3545;--bs-light:#f8f9fa;--bs-dark:#212529;--bs-primary-rgb:13,110,253;--bs-secondary-rgb:108,117,125;--bs-success-rgb:25,135,84;--bs-info-rgb:13,202,240;--bs-warning-rgb:255,193,7;--bs-danger-rgb:220,53,69;--bs-light-rgb:248,249,250;--bs-dark-rgb:33,37,41;--bs-primary-text-emphasis:#052c65;--bs-secondary-text-emphasis:#2b2f32;--bs-success-text-emphasis:#0a3622;--bs-info-text-emphasis:#055160;--bs-warning-text-emphasis:#664d03;--bs-danger-text-emphasis:#58151c;--bs-light-text-emphasis:#495057;--bs-dark-text-emphasis:#495057;--bs-primary-bg-subtle:#cfe2ff;--bs-secondary-bg-subtle:#e2e3e5;--bs-success-bg-subtle:#d1e7dd;--bs-info-bg-subtle:#cff4fc;--bs-warning-bg-subtle:#fff3cd;--bs-danger-bg-subtle:#f8d7da;--bs-light-bg-subtle:#fcfcfd;--bs-dark-bg-subtle:#ced4da;--bs-primary-border-subtle:#9ec5fe;--bs-secondary-border-subtle:#c4c8cb;--bs-success-border-subtle:#a3cfbb;--bs-info-border-subtle:#9eeaf9;--bs-warning-border-subtle:#ffe69c;--bs-danger-border-subtle:#f1aeb5;--bs-light-border-subtle:#e9ecef;--bs-dark-border-subtle:#adb5bd;--bs-white-rgb:255,255,255;--bs-black-rgb:0,0,0;--bs-font-sans-serif:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans","Liberation Sans",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--bs-font-monospace:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--bs-gradient:linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));--bs-body-font-family:var(--bs-font-sans-serif);--bs-body-font-size:1rem;--bs-body-font-weight:400;--bs-body-line-height:1.5;--bs-body-color:#212529;--bs-body-color-rgb:33,37,41;--bs-body-bg:#fff;--bs-body-bg-rgb:255,255,255;--bs-emphasis-color:#000;--bs-emphasis-color-rgb:0,0,0;--bs-secondary-color:rgba(33, 37, 41, 0.75);--bs-secondary-color-rgb:33,37,41;--bs-secondary-bg:#e9ecef;--bs-secondary-bg-rgb:233,236,239;--bs-tertiary-color:rgba(33, 37, 41, 0.5);--bs-tertiary-color-rgb:33,37,41;--bs-tertiary-bg:#f8f9fa;--bs-tertiary-bg-rgb:248,249,250;--bs-heading-color:inherit;--bs-link-color:#0d6efd;--bs-link-color-rgb:13,110,253;--bs-link-decoration:underline;--bs-link-hover-color:#0a58ca;--bs-link-hover-color-rgb:10,88,202;--bs-code-color:#d63384;--bs-highlight-color:#212529;--bs-highlight-bg:#fff3cd;--bs-border-width:1px;--bs-border-style:solid;--bs-border-color:#dee2e6;--bs-border-color-translucent:rgba(0, 0, 0, 0.175);--bs-border-radius:0.375rem;--bs-border-radius-sm:0.25rem;--bs-border-radius-lg:0.5rem;--bs-border-radius-xl:1rem;--bs-border-radius-xxl:2rem;--bs-border-radius-2xl:var(--bs-border-radius-xxl);--bs-border-radius-pill:50rem;--bs-box-shadow:0 0.5rem 1rem rgba(0, 0, 0, 0.15);--bs-box-shadow-sm:0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);--bs-box-shadow-lg:0 1rem 3rem rgba(0, 0, 0, 0.175);--bs-box-shadow-inset:inset 0 1px 2px rgba(0, 0, 0, 0.075);--bs-focus-ring-width:0.25rem;--bs-focus-ring-opacity:0.25;--bs-focus-ring-color:rgba(13, 110, 253, 0.25);--bs-form-valid-color:#198754;--bs-form-valid-border-color:#198754;--bs-form-invalid-color:#dc3545;--bs-form-invalid-border-color:#dc3545}[data-bs-theme=dark]{color-scheme:dark;--bs-body-color:#dee2e6;--bs-body-color-rgb:222,226,230;--bs-body-bg:#212529;--bs-body-bg-rgb:33,37,41;--bs-emphasis-color:#fff;--bs-emphasis-color-rgb:255,255,255;--bs-secondary-color:rgba(222, 226, 230, 0.75);--bs-secondary-color-rgb:222,226,230;--bs-secondary-bg:#343a40;--bs-secondary-bg-rgb:52,58,64;--bs-tertiary-color:rgba(222, 226, 230, 0.5);--bs-tertiary-color-rgb:222,226,230;--bs-tertiary-bg:#2b3035;--bs-tertiary-bg-rgb:43,48,53;--bs-primary-text-emphasis:#6ea8fe;--bs-secondary-text-emphasis:#a7acb1;--bs-success-text-emphasis:#75b798;--bs-info-text-emphasis:#6edff6;--bs-warning-text-emphasis:#ffda6a;--bs-danger-text-emphasis:#ea868f;--bs-light-text-emphasis:#f8f9fa;--bs-dark-text-emphasis:#dee2e6;--bs-primary-bg-subtle:#031633;--bs-secondary-bg-subtle:#161719;--bs-success-bg-subtle:#051b11;--bs-info-bg-subtle:#032830;--bs-warning-bg-subtle:#332701;--bs-danger-bg-subtle:#2c0b0e;--bs-light-bg-subtle:#343a40;--bs-dark-bg-subtle:#1a1d20;--bs-primary-border-subtle:#084298;--bs-secondary-border-subtle:#41464b;--bs-success-border-subtle:#0f5132;--bs-info-border-subtle:#087990;--bs-warning-border-subtle:#997404;--bs-danger-border-subtle:#842029;--bs-light-border-subtle:#495057;--bs-dark-border-subtle:#343a40;--bs-heading-color:inherit;--bs-link-color:#6ea8fe;--bs-link-hover-color:#8bb9fe;--bs-link-color-rgb:110,168,254;--bs-link-hover-color-rgb:139,185,254;--bs-code-color:#e685b5;--bs-highlight-color:#dee2e6;--bs-highlight-bg:#664d03;--bs-border-color:#495057;--bs-border-color-translucent:rgba(255, 255, 255, 0.15);--bs-form-valid-color:#75b798;--bs-form-valid-border-color:#75b798;--bs-form-invalid-color:#ea868f;--bs-form-invalid-border-color:#ea868f}*,::after,::before{box-sizing:border-box}@media (prefers-reduced-motion:no-preference){:root{scroll-behavior:smooth}}body{margin:0;font-family:var(--bs-body-font-family);font-size:var(--bs-body-font-size);font-weight:var(--bs-body-font-weight);line-height:var(--bs-body-line-height);color:var(--bs-body-color);text-align:var(--bs-body-text-align);background-color:var(--bs-body-bg);-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}hr{margin:1rem 0;color:inherit;border:0;border-top:var(--bs-border-width) solid;opacity:.25}.h3,h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:.5rem;font-weight:500;line-height:1.2;color:var(--bs-heading-color)}h1{font-size:calc(1.375rem + 1.5vw)}@media (min-width:1200px){h1{font-size:2.5rem}}h2{font-size:calc(1.325rem + .9vw)}@media (min-width:1200px){h2{font-size:2rem}}.h3,h3{font-size:calc(1.3rem + .6vw)}@media (min-width:1200px){.h3,h3{font-size:1.75rem}}h4{font-size:calc(1.275rem + .3vw)}@media (min-width:1200px){h4{font-size:1.5rem}}h5{font-size:1.25rem}h6{font-size:1rem}p{margin-top:0;margin-bottom:1rem}abbr[title]{-webkit-text-decoration:underline dotted;text-decoration:underline dotted;cursor:help;-webkit-text-decoration-skip-ink:none;text-decoration-skip-ink:none}address{margin-bottom:1rem;font-style:normal;line-height:inherit}ol,ul{padding-left:2rem}dl,ol,ul{margin-top:0;margin-bottom:1rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}dt{font-weight:700}dd{margin-bottom:.5rem;margin-left:0}blockquote{margin:0 0 1rem}b,strong{font-weight:bolder}small{font-size:.875em}mark{padding:.1875em;color:var(--bs-highlight-color);background-color:var(--bs-highlight-bg)}sub,sup{position:relative;font-size:.75em;line-height:0;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}a{color:rgba(var(--bs-link-color-rgb),var(--bs-link-opacity,1));text-decoration:underline}a:hover{--bs-link-color-rgb:var(--bs-link-hover-color-rgb)}a:not([href]):not([class]),a:not([href]):not([class]):hover{color:inherit;text-decoration:none}code,kbd,pre,samp{font-family:var(--bs-font-monospace);font-size:1em}pre{display:block;margin-top:0;margin-bottom:1rem;overflow:auto;font-size:.875em}pre code{font-size:inherit;color:inherit;word-break:normal}code{font-size:.875em;color:var(--bs-code-color);word-wrap:break-word}a>code{color:inherit}kbd{padding:.1875rem .375rem;font-size:.875em;color:var(--bs-body-bg);background-color:var(--bs-body-color);border-radius:.25rem}kbd kbd{padding:0;font-size:1em}figure{margin:0 0 1rem}img,svg{vertical-align:middle}table{caption-side:bottom;border-collapse:collapse}caption{padding-top:.5rem;padding-bottom:.5rem;color:var(--bs-secondary-color);text-align:left}th{text-align:inherit;text-align:-webkit-match-parent}tbody,td,tfoot,th,thead,tr{border-color:inherit;border-style:solid;border-width:0}label{display:inline-block}button{border-radius:0}button:focus:not(:focus-visible){outline:0}button,input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:inherit;line-height:inherit}button,select{text-transform:none}[role=button]{cursor:pointer}select{word-wrap:normal}select:disabled{opacity:1}[list]:not([type=date]):not([type=datetime-local]):not([type=month]):not([type=week]):not([type=time])::-webkit-calendar-picker-indicator{display:none!important}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]:not(:disabled),[type=reset]:not(:disabled),[type=submit]:not(:disabled),button:not(:disabled){cursor:pointer}::-moz-focus-inner{padding:0;border-style:none}textarea{resize:vertical}fieldset{min-width:0;padding:0;margin:0;border:0}legend{float:left;width:100%;padding:0;margin-bottom:.5rem;font-size:calc(1.275rem + .3vw);line-height:inherit}@media (min-width:1200px){legend{font-size:1.5rem}}legend+*{clear:left}::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-fields-wrapper,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-text,::-webkit-datetime-edit-year-field{padding:0}::-webkit-inner-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-color-swatch-wrapper{padding:0}::-webkit-file-upload-button{font:inherit;-webkit-appearance:button}::file-selector-button{font:inherit;-webkit-appearance:button}output{display:inline-block}iframe{border:0}summary{display:list-item;cursor:pointer}progress{vertical-align:baseline}[hidden]{display:none!important}.list-inline-item:not(:last-child){margin-right:.5rem}.container{--bs-gutter-x:1.5rem;--bs-gutter-y:0;width:100%;padding-right:calc(var(--bs-gutter-x) * .5);padding-left:calc(var(--bs-gutter-x) * .5);margin-right:auto;margin-left:auto}@media (min-width:576px){.container{max-width:540px}}@media (min-width:768px){.container{max-width:720px}}@media (min-width:992px){.container{max-width:960px}}@media (min-width:1200px){.container{max-width:1140px}}@media (min-width:1400px){.container{max-width:1320px}}:root{--bs-breakpoint-xs:0;--bs-breakpoint-sm:576px;--bs-breakpoint-md:768px;--bs-breakpoint-lg:992px;--bs-breakpoint-xl:1200px;--bs-breakpoint-xxl:1400px}.row{--bs-gutter-x:1.5rem;--bs-gutter-y:0;display:flex;flex-wrap:wrap;margin-top:calc(-1 * var(--bs-gutter-y));margin-right:calc(-.5 * var(--bs-gutter-x));margin-left:calc(-.5 * var(--bs-gutter-x))}.row>*{flex-shrink:0;width:100%;max-width:100%;padding-right:calc(var(--bs-gutter-x) * .5);padding-left:calc(var(--bs-gutter-x) * .5);margin-top:var(--bs-gutter-y)}@media (min-width:768px){.col-md-4{flex:0 0 auto;width:33.33333333%}.col-md-6{flex:0 0 auto;width:50%}.col-md-8{flex:0 0 auto;width:66.66666667%}.col-md-12{flex:0 0 auto;width:100%}}@media (min-width:992px){.col-lg-6{flex:0 0 auto;width:50%}.col-lg-12{flex:0 0 auto;width:100%}}@media (min-width:1200px){.col-xl-3{flex:0 0 auto;width:25%}.col-xl-4{flex:0 0 auto;width:33.33333333%}.col-xl-5{flex:0 0 auto;width:41.66666667%}.col-xl-6{flex:0 0 auto;width:50%}.col-xl-7{flex:0 0 auto;width:58.33333333%}.col-xl-8{flex:0 0 auto;width:66.66666667%}}.table>:not(caption)>*>*{padding:.5rem .5rem;color:var(--bs-table-color-state,var(--bs-table-color-type,var(--bs-table-color)));background-color:var(--bs-table-bg);border-bottom-width:var(--bs-border-width);box-shadow:inset 0 0 0 9999px var(--bs-table-bg-state,var(--bs-table-bg-type,var(--bs-table-accent-bg)))}.table-sm>:not(caption)>*>*{padding:.25rem .25rem}.table-bordered>:not(caption)>*{border-width:var(--bs-border-width) 0}.table-bordered>:not(caption)>*>*{border-width:0 var(--bs-border-width)}.table-borderless>:not(caption)>*>*{border-bottom-width:0}.table-borderless>:not(:first-child){border-top-width:0}.table-striped>tbody>tr:nth-of-type(odd)>*{--bs-table-color-type:var(--bs-table-striped-color);--bs-table-bg-type:var(--bs-table-striped-bg)}.table-striped-columns>:not(caption)>tr>:nth-child(2n){--bs-table-color-type:var(--bs-table-striped-color);--bs-table-bg-type:var(--bs-table-striped-bg)}.form-control{display:block;width:100%;padding:.375rem .75rem;font-size:1rem;font-weight:400;line-height:1.5;color:var(--bs-body-color);-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--bs-body-bg);background-clip:padding-box;border:var(--bs-border-width) solid var(--bs-border-color);border-radius:var(--bs-border-radius);transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}@media (prefers-reduced-motion:reduce){.form-control{transition:none}}.form-control[type=file]{overflow:hidden}.form-control[type=file]:not(:disabled):not([readonly]){cursor:pointer}.form-control:focus{color:var(--bs-body-color);background-color:var(--bs-body-bg);border-color:#86b7fe;outline:0;box-shadow:0 0 0 .25rem rgba(13,110,253,.25)}.form-control::-webkit-date-and-time-value{min-width:85px;height:1.5em;margin:0}.form-control::-webkit-datetime-edit{display:block;padding:0}.form-control::-moz-placeholder{color:var(--bs-secondary-color);opacity:1}.form-control::placeholder{color:var(--bs-secondary-color);opacity:1}.form-control:disabled{background-color:var(--bs-secondary-bg);opacity:1}.form-control::-webkit-file-upload-button{padding:.375rem .75rem;margin:-.375rem -.75rem;-webkit-margin-end:.75rem;margin-inline-end:.75rem;color:var(--bs-body-color);background-color:var(--bs-tertiary-bg);pointer-events:none;border-color:inherit;border-style:solid;border-width:0;border-inline-end-width:var(--bs-border-width);border-radius:0;-webkit-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}.form-control::file-selector-button{padding:.375rem .75rem;margin:-.375rem -.75rem;-webkit-margin-end:.75rem;margin-inline-end:.75rem;color:var(--bs-body-color);background-color:var(--bs-tertiary-bg);pointer-events:none;border-color:inherit;border-style:solid;border-width:0;border-inline-end-width:var(--bs-border-width);border-radius:0;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}@media (prefers-reduced-motion:reduce){.form-control::-webkit-file-upload-button{-webkit-transition:none;transition:none}.form-control::file-selector-button{transition:none}}.form-control:hover:not(:disabled):not([readonly])::-webkit-file-upload-button{background-color:var(--bs-secondary-bg)}.form-control:hover:not(:disabled):not([readonly])::file-selector-button{background-color:var(--bs-secondary-bg)}textarea.form-control{min-height:calc(1.5em + .75rem + calc(var(--bs-border-width) * 2))}.form-control-color:not(:disabled):not([readonly]){cursor:pointer}.form-select[multiple],.form-select[size]:not([size="1"]){padding-right:.75rem;background-image:none}[data-bs-theme=dark] .form-select{--bs-form-select-bg-img:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23dee2e6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e")}.form-check-input[type=checkbox]{border-radius:.25em}.form-check-input[type=radio]{border-radius:50%}.form-check-input:checked[type=checkbox]{--bs-form-check-bg-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e")}.form-check-input:checked[type=radio]{--bs-form-check-bg-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e")}.form-check-input[type=checkbox]:indeterminate{background-color:#0d6efd;border-color:#0d6efd;--bs-form-check-bg-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e")}.form-check-input[disabled]~.form-check-label{cursor:default;opacity:.5}.btn-check[disabled]+.btn{pointer-events:none;filter:none;opacity:.65}[data-bs-theme=dark] .form-switch .form-check-input:not(:checked):not(:focus){--bs-form-switch-bg:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%28255, 255, 255, 0.25%29'/%3e%3c/svg%3e")}.form-floating>.form-control-plaintext:not(:-moz-placeholder-shown),.form-floating>.form-control:not(:-moz-placeholder-shown){padding-top:1.625rem;padding-bottom:.625rem}.form-floating>.form-control-plaintext:not(:placeholder-shown),.form-floating>.form-control:not(:placeholder-shown){padding-top:1.625rem;padding-bottom:.625rem}.form-floating>.form-control:not(:-moz-placeholder-shown)~label{color:rgba(var(--bs-body-color-rgb),.65);transform:scale(.85) translateY(-.5rem) translateX(.15rem)}.form-floating>.form-control:not(:placeholder-shown)~label{color:rgba(var(--bs-body-color-rgb),.65);transform:scale(.85) translateY(-.5rem) translateX(.15rem)}.form-floating>.form-control:not(:-moz-placeholder-shown)~label::after{position:absolute;inset:1rem 0.375rem;z-index:-1;height:1.5em;content:"";background-color:var(--bs-body-bg);border-radius:var(--bs-border-radius)}.form-floating>.form-control:not(:placeholder-shown)~label::after{position:absolute;inset:1rem 0.375rem;z-index:-1;height:1.5em;content:"";background-color:var(--bs-body-bg);border-radius:var(--bs-border-radius)}.input-group:not(.has-validation)>.dropdown-toggle:nth-last-child(n/**/+3),.input-group:not(.has-validation)>.form-floating:not(:last-child)>.form-control,.input-group:not(.has-validation)>.form-floating:not(:last-child)>.form-select,.input-group:not(.has-validation)>:not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating){border-top-right-radius:0;border-bottom-right-radius:0}.input-group.has-validation>.dropdown-toggle:nth-last-child(n/**/+4),.input-group.has-validation>.form-floating:nth-last-child(n/**/+3)>.form-control,.input-group.has-validation>.form-floating:nth-last-child(n/**/+3)>.form-select,.input-group.has-validation>:nth-last-child(n/**/+3):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating){border-top-right-radius:0;border-bottom-right-radius:0}.input-group>:not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback){margin-left:calc(var(--bs-border-width) * -1);border-top-left-radius:0;border-bottom-left-radius:0}.input-group>.form-floating:not(:first-child)>.form-control,.input-group>.form-floating:not(:first-child)>.form-select{border-top-left-radius:0;border-bottom-left-radius:0}.valid-feedback{display:none;width:100%;margin-top:.25rem;font-size:.875em;color:var(--bs-form-valid-color)}.valid-tooltip{position:absolute;top:100%;z-index:5;display:none;max-width:100%;padding:.25rem .5rem;margin-top:.1rem;font-size:.875rem;color:#fff;background-color:var(--bs-success);border-radius:var(--bs-border-radius)}.is-valid~.valid-feedback,.is-valid~.valid-tooltip,.was-validated :valid~.valid-feedback,.was-validated :valid~.valid-tooltip{display:block}.form-control.is-valid,.was-validated .form-control:valid{border-color:var(--bs-form-valid-border-color);padding-right:calc(1.5em + .75rem);background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23198754' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right calc(.375em + .1875rem) center;background-size:calc(.75em + .375rem) calc(.75em + .375rem)}.form-control.is-valid:focus,.was-validated .form-control:valid:focus{border-color:var(--bs-form-valid-border-color);box-shadow:0 0 0 .25rem rgba(var(--bs-success-rgb),.25)}.was-validated textarea.form-control:valid,textarea.form-control.is-valid{padding-right:calc(1.5em + .75rem);background-position:top calc(.375em + .1875rem) right calc(.375em + .1875rem)}.form-select.is-valid:not([multiple]):not([size]),.form-select.is-valid:not([multiple])[size="1"],.was-validated .form-select:valid:not([multiple]):not([size]),.was-validated .form-select:valid:not([multiple])[size="1"]{--bs-form-select-bg-icon:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23198754' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");padding-right:4.125rem;background-position:right .75rem center,center right 2.25rem;background-size:16px 12px,calc(.75em + .375rem) calc(.75em + .375rem)}.input-group>.form-control:not(:focus).is-valid,.input-group>.form-floating:not(:focus-within).is-valid,.input-group>.form-select:not(:focus).is-valid,.was-validated .input-group>.form-control:not(:focus):valid,.was-validated .input-group>.form-floating:not(:focus-within):valid,.was-validated .input-group>.form-select:not(:focus):valid{z-index:3}.invalid-feedback{display:none;width:100%;margin-top:.25rem;font-size:.875em;color:var(--bs-form-invalid-color)}.invalid-tooltip{position:absolute;top:100%;z-index:5;display:none;max-width:100%;padding:.25rem .5rem;margin-top:.1rem;font-size:.875rem;color:#fff;background-color:var(--bs-danger);border-radius:var(--bs-border-radius)}.is-invalid~.invalid-feedback,.is-invalid~.invalid-tooltip,.was-validated :invalid~.invalid-feedback,.was-validated :invalid~.invalid-tooltip{display:block}.form-control.is-invalid,.was-validated .form-control:invalid{border-color:var(--bs-form-invalid-border-color);padding-right:calc(1.5em + .75rem);background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right calc(.375em + .1875rem) center;background-size:calc(.75em + .375rem) calc(.75em + .375rem)}.form-control.is-invalid:focus,.was-validated .form-control:invalid:focus{border-color:var(--bs-form-invalid-border-color);box-shadow:0 0 0 .25rem rgba(var(--bs-danger-rgb),.25)}.was-validated textarea.form-control:invalid,textarea.form-control.is-invalid{padding-right:calc(1.5em + .75rem);background-position:top calc(.375em + .1875rem) right calc(.375em + .1875rem)}.form-select.is-invalid:not([multiple]):not([size]),.form-select.is-invalid:not([multiple])[size="1"],.was-validated .form-select:invalid:not([multiple]):not([size]),.was-validated .form-select:invalid:not([multiple])[size="1"]{--bs-form-select-bg-icon:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");padding-right:4.125rem;background-position:right .75rem center,center right 2.25rem;background-size:16px 12px,calc(.75em + .375rem) calc(.75em + .375rem)}.input-group>.form-control:not(:focus).is-invalid,.input-group>.form-floating:not(:focus-within).is-invalid,.input-group>.form-select:not(:focus).is-invalid,.was-validated .input-group>.form-control:not(:focus):invalid,.was-validated .input-group>.form-floating:not(:focus-within):invalid,.was-validated .input-group>.form-select:not(:focus):invalid{z-index:4}:not(.btn-check)+.btn:active{color:var(--bs-btn-active-color);background-color:var(--bs-btn-active-bg);border-color:var(--bs-btn-active-border-color)}:not(.btn-check)+.btn:active:focus-visible{box-shadow:var(--bs-btn-focus-box-shadow)}.fade{transition:opacity .15s linear}@media (prefers-reduced-motion:reduce){.fade{transition:none}}.fade:not(.show){opacity:0}.collapse:not(.show){display:none}.collapsing{height:0;overflow:hidden;transition:height .35s ease}@media (prefers-reduced-motion:reduce){.collapsing{transition:none}}.collapsing.collapse-horizontal{width:0;height:auto;transition:width .35s ease}@media (prefers-reduced-motion:reduce){.collapsing.collapse-horizontal{transition:none}}.dropdown-menu[data-bs-popper]{top:100%;left:0;margin-top:var(--bs-dropdown-spacer)}.dropdown-menu-start[data-bs-popper]{right:auto;left:0}.dropdown-menu-end[data-bs-popper]{right:0;left:auto}@media (min-width:576px){.dropdown-menu-sm-start[data-bs-popper]{right:auto;left:0}.dropdown-menu-sm-end[data-bs-popper]{right:0;left:auto}}@media (min-width:768px){.dropdown-menu-md-start[data-bs-popper]{right:auto;left:0}.dropdown-menu-md-end[data-bs-popper]{right:0;left:auto}}@media (min-width:992px){.dropdown-menu-lg-start[data-bs-popper]{right:auto;left:0}.dropdown-menu-lg-end[data-bs-popper]{right:0;left:auto}}@media (min-width:1200px){.dropdown-menu-xl-start[data-bs-popper]{right:auto;left:0}.dropdown-menu-xl-end[data-bs-popper]{right:0;left:auto}}@media (min-width:1400px){.dropdown-menu-xxl-start[data-bs-popper]{right:auto;left:0}.dropdown-menu-xxl-end[data-bs-popper]{right:0;left:auto}}.dropup .dropdown-menu[data-bs-popper]{top:auto;bottom:100%;margin-top:0;margin-bottom:var(--bs-dropdown-spacer)}.dropend .dropdown-menu[data-bs-popper]{top:0;right:auto;left:100%;margin-top:0;margin-left:var(--bs-dropdown-spacer)}.dropstart .dropdown-menu[data-bs-popper]{top:0;right:100%;left:auto;margin-top:0;margin-right:var(--bs-dropdown-spacer)}.btn-group>.btn-group:not(:first-child),.btn-group>:not(.btn-check:first-child)+.btn{margin-left:calc(var(--bs-border-width) * -1)}.btn-group>.btn-group:not(:last-child)>.btn,.btn-group>.btn:not(:last-child):not(.dropdown-toggle){border-top-right-radius:0;border-bottom-right-radius:0}.btn-group>.btn-group:not(:first-child)>.btn,.btn-group>.btn:nth-child(n/**/+3),.btn-group>:not(.btn-check)+.btn{border-top-left-radius:0;border-bottom-left-radius:0}.btn-group-vertical>.btn-group:not(:first-child),.btn-group-vertical>.btn:not(:first-child){margin-top:calc(var(--bs-border-width) * -1)}.btn-group-vertical>.btn-group:not(:last-child)>.btn,.btn-group-vertical>.btn:not(:last-child):not(.dropdown-toggle){border-bottom-right-radius:0;border-bottom-left-radius:0}.btn-group-vertical>.btn-group:not(:first-child)>.btn{border-top-left-radius:0;border-top-right-radius:0}.nav-link{display:block;padding:var(--bs-nav-link-padding-y) var(--bs-nav-link-padding-x);font-size:var(--bs-nav-link-font-size);font-weight:var(--bs-nav-link-font-weight);color:var(--bs-nav-link-color);text-decoration:none;background:0 0;border:0;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out}@media (prefers-reduced-motion:reduce){.nav-link{transition:none}}.nav-link:focus,.nav-link:hover{color:var(--bs-nav-link-hover-color)}.nav-link:focus-visible{outline:0;box-shadow:0 0 0 .25rem rgba(13,110,253,.25)}.nav-link.disabled,.nav-link:disabled{color:var(--bs-nav-link-disabled-color);pointer-events:none;cursor:default}.navbar{--bs-navbar-padding-x:0;--bs-navbar-padding-y:0.5rem;--bs-navbar-color:rgba(var(--bs-emphasis-color-rgb), 0.65);--bs-navbar-hover-color:rgba(var(--bs-emphasis-color-rgb), 0.8);--bs-navbar-disabled-color:rgba(var(--bs-emphasis-color-rgb), 0.3);--bs-navbar-active-color:rgba(var(--bs-emphasis-color-rgb), 1);--bs-navbar-brand-padding-y:0.3125rem;--bs-navbar-brand-margin-end:1rem;--bs-navbar-brand-font-size:1.25rem;--bs-navbar-brand-color:rgba(var(--bs-emphasis-color-rgb), 1);--bs-navbar-brand-hover-color:rgba(var(--bs-emphasis-color-rgb), 1);--bs-navbar-nav-link-padding-x:0.5rem;--bs-navbar-toggler-padding-y:0.25rem;--bs-navbar-toggler-padding-x:0.75rem;--bs-navbar-toggler-font-size:1.25rem;--bs-navbar-toggler-icon-bg:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2833, 37, 41, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");--bs-navbar-toggler-border-color:rgba(var(--bs-emphasis-color-rgb), 0.15);--bs-navbar-toggler-border-radius:var(--bs-border-radius);--bs-navbar-toggler-focus-width:0.25rem;--bs-navbar-toggler-transition:box-shadow 0.15s ease-in-out;position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;padding:var(--bs-navbar-padding-y) var(--bs-navbar-padding-x)}.navbar>.container{display:flex;flex-wrap:inherit;align-items:center;justify-content:space-between}.navbar-brand{padding-top:var(--bs-navbar-brand-padding-y);padding-bottom:var(--bs-navbar-brand-padding-y);margin-right:var(--bs-navbar-brand-margin-end);font-size:var(--bs-navbar-brand-font-size);color:var(--bs-navbar-brand-color);text-decoration:none;white-space:nowrap}.navbar-brand:focus,.navbar-brand:hover{color:var(--bs-navbar-brand-hover-color)}.navbar-nav{--bs-nav-link-padding-x:0;--bs-nav-link-padding-y:0.5rem;--bs-nav-link-font-weight: ;--bs-nav-link-color:var(--bs-navbar-color);--bs-nav-link-hover-color:var(--bs-navbar-hover-color);--bs-nav-link-disabled-color:var(--bs-navbar-disabled-color);display:flex;flex-direction:column;padding-left:0;margin-bottom:0;list-style:none}.navbar-nav .nav-link.active,.navbar-nav .nav-link.show{color:var(--bs-navbar-active-color)}.navbar-collapse{flex-basis:100%;flex-grow:1;align-items:center}@media (min-width:992px){.navbar-expand-lg{flex-wrap:nowrap;justify-content:flex-start}.navbar-expand-lg .navbar-nav{flex-direction:row}.navbar-expand-lg .navbar-nav .nav-link{padding-right:var(--bs-navbar-nav-link-padding-x);padding-left:var(--bs-navbar-nav-link-padding-x)}.navbar-expand-lg .navbar-collapse{display:flex!important;flex-basis:auto}}.navbar[data-bs-theme=dark]{--bs-navbar-color:rgba(255, 255, 255, 0.55);--bs-navbar-hover-color:rgba(255, 255, 255, 0.75);--bs-navbar-disabled-color:rgba(255, 255, 255, 0.25);--bs-navbar-active-color:#fff;--bs-navbar-brand-color:#fff;--bs-navbar-brand-hover-color:#fff;--bs-navbar-toggler-border-color:rgba(255, 255, 255, 0.1);--bs-navbar-toggler-icon-bg:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e")}[data-bs-theme=dark] .navbar-toggler-icon{--bs-navbar-toggler-icon-bg:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e")}@media (min-width:576px){.card-group>.card:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0}.card-group>.card:not(:last-child) .card-header,.card-group>.card:not(:last-child) .card-img-top{border-top-right-radius:0}.card-group>.card:not(:last-child) .card-footer,.card-group>.card:not(:last-child) .card-img-bottom{border-bottom-right-radius:0}.card-group>.card:not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0}.card-group>.card:not(:first-child) .card-header,.card-group>.card:not(:first-child) .card-img-top{border-top-left-radius:0}.card-group>.card:not(:first-child) .card-footer,.card-group>.card:not(:first-child) .card-img-bottom{border-bottom-left-radius:0}}.accordion-button{position:relative;display:flex;align-items:center;width:100%;padding:var(--bs-accordion-btn-padding-y) var(--bs-accordion-btn-padding-x);font-size:1rem;color:var(--bs-accordion-btn-color);text-align:left;background-color:var(--bs-accordion-btn-bg);border:0;border-radius:0;overflow-anchor:none;transition:var(--bs-accordion-transition)}@media (prefers-reduced-motion:reduce){.accordion-button{transition:none}}.accordion-button:not(.collapsed){color:var(--bs-accordion-active-color);background-color:var(--bs-accordion-active-bg);box-shadow:inset 0 calc(-1 * var(--bs-accordion-border-width)) 0 var(--bs-accordion-border-color)}.accordion-button:not(.collapsed)::after{background-image:var(--bs-accordion-btn-active-icon);transform:var(--bs-accordion-btn-icon-transform)}.accordion-button::after{flex-shrink:0;width:var(--bs-accordion-btn-icon-width);height:var(--bs-accordion-btn-icon-width);margin-left:auto;content:"";background-image:var(--bs-accordion-btn-icon);background-repeat:no-repeat;background-size:var(--bs-accordion-btn-icon-width);transition:var(--bs-accordion-btn-icon-transition)}@media (prefers-reduced-motion:reduce){.accordion-button::after{transition:none}}.accordion-button:hover{z-index:2}.accordion-button:focus{z-index:3;outline:0;box-shadow:var(--bs-accordion-btn-focus-box-shadow)}.accordion-header{margin-bottom:0}.accordion-item{color:var(--bs-accordion-color);background-color:var(--bs-accordion-bg);border:var(--bs-accordion-border-width) solid var(--bs-accordion-border-color)}.accordion-item:first-of-type{border-top-left-radius:var(--bs-accordion-border-radius);border-top-right-radius:var(--bs-accordion-border-radius)}.accordion-item:first-of-type>.accordion-header .accordion-button{border-top-left-radius:var(--bs-accordion-inner-border-radius);border-top-right-radius:var(--bs-accordion-inner-border-radius)}.accordion-item:not(:first-of-type){border-top:0}.accordion-item:last-of-type{border-bottom-right-radius:var(--bs-accordion-border-radius);border-bottom-left-radius:var(--bs-accordion-border-radius)}.accordion-item:last-of-type>.accordion-header .accordion-button.collapsed{border-bottom-right-radius:var(--bs-accordion-inner-border-radius);border-bottom-left-radius:var(--bs-accordion-inner-border-radius)}.accordion-item:last-of-type>.accordion-collapse{border-bottom-right-radius:var(--bs-accordion-border-radius);border-bottom-left-radius:var(--bs-accordion-border-radius)}.accordion-body{padding:var(--bs-accordion-body-padding-y) var(--bs-accordion-body-padding-x)}[data-bs-theme=dark] .accordion-button::after{--bs-accordion-btn-icon:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236ea8fe'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");--bs-accordion-btn-active-icon:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236ea8fe'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e")}.page-item:not(:first-child) .page-link{margin-left:calc(var(--bs-border-width) * -1)}.list-group-horizontal>.list-group-item:first-child:not(:last-child){border-bottom-left-radius:var(--bs-list-group-border-radius);border-top-right-radius:0}.list-group-horizontal>.list-group-item:last-child:not(:first-child){border-top-right-radius:var(--bs-list-group-border-radius);border-bottom-left-radius:0}@media (min-width:576px){.list-group-horizontal-sm>.list-group-item:first-child:not(:last-child){border-bottom-left-radius:var(--bs-list-group-border-radius);border-top-right-radius:0}.list-group-horizontal-sm>.list-group-item:last-child:not(:first-child){border-top-right-radius:var(--bs-list-group-border-radius);border-bottom-left-radius:0}}@media (min-width:768px){.list-group-horizontal-md>.list-group-item:first-child:not(:last-child){border-bottom-left-radius:var(--bs-list-group-border-radius);border-top-right-radius:0}.list-group-horizontal-md>.list-group-item:last-child:not(:first-child){border-top-right-radius:var(--bs-list-group-border-radius);border-bottom-left-radius:0}}@media (min-width:992px){.list-group-horizontal-lg>.list-group-item:first-child:not(:last-child){border-bottom-left-radius:var(--bs-list-group-border-radius);border-top-right-radius:0}.list-group-horizontal-lg>.list-group-item:last-child:not(:first-child){border-top-right-radius:var(--bs-list-group-border-radius);border-bottom-left-radius:0}}@media (min-width:1200px){.list-group-horizontal-xl>.list-group-item:first-child:not(:last-child){border-bottom-left-radius:var(--bs-list-group-border-radius);border-top-right-radius:0}.list-group-horizontal-xl>.list-group-item:last-child:not(:first-child){border-top-right-radius:var(--bs-list-group-border-radius);border-bottom-left-radius:0}}@media (min-width:1400px){.list-group-horizontal-xxl>.list-group-item:first-child:not(:last-child){border-bottom-left-radius:var(--bs-list-group-border-radius);border-top-right-radius:0}.list-group-horizontal-xxl>.list-group-item:last-child:not(:first-child){border-top-right-radius:var(--bs-list-group-border-radius);border-bottom-left-radius:0}}[data-bs-theme=dark] .btn-close{filter:var(--bs-btn-close-white-filter)}.toast:not(.show){display:none}.toast-container>:not(:last-child){margin-bottom:var(--bs-toast-spacing)}.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow{bottom:calc(-1 * var(--bs-tooltip-arrow-height))}.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before{top:-1px;border-width:var(--bs-tooltip-arrow-height) calc(var(--bs-tooltip-arrow-width) * .5) 0;border-top-color:var(--bs-tooltip-bg)}.bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow{left:calc(-1 * var(--bs-tooltip-arrow-height));width:var(--bs-tooltip-arrow-height);height:var(--bs-tooltip-arrow-width)}.bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow::before{right:-1px;border-width:calc(var(--bs-tooltip-arrow-width) * .5) var(--bs-tooltip-arrow-height) calc(var(--bs-tooltip-arrow-width) * .5) 0;border-right-color:var(--bs-tooltip-bg)}.bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow{top:calc(-1 * var(--bs-tooltip-arrow-height))}.bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before{bottom:-1px;border-width:0 calc(var(--bs-tooltip-arrow-width) * .5) var(--bs-tooltip-arrow-height);border-bottom-color:var(--bs-tooltip-bg)}.bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow{right:calc(-1 * var(--bs-tooltip-arrow-height));width:var(--bs-tooltip-arrow-height);height:var(--bs-tooltip-arrow-width)}.bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow::before{left:-1px;border-width:calc(var(--bs-tooltip-arrow-width) * .5) 0 calc(var(--bs-tooltip-arrow-width) * .5) var(--bs-tooltip-arrow-height);border-left-color:var(--bs-tooltip-bg)}.bs-popover-auto[data-popper-placement^=top]>.popover-arrow{bottom:calc(-1 * (var(--bs-popover-arrow-height)) - var(--bs-popover-border-width))}.bs-popover-auto[data-popper-placement^=top]>.popover-arrow::after,.bs-popover-auto[data-popper-placement^=top]>.popover-arrow::before{border-width:var(--bs-popover-arrow-height) calc(var(--bs-popover-arrow-width) * .5) 0}.bs-popover-auto[data-popper-placement^=top]>.popover-arrow::before{bottom:0;border-top-color:var(--bs-popover-arrow-border)}.bs-popover-auto[data-popper-placement^=top]>.popover-arrow::after{bottom:var(--bs-popover-border-width);border-top-color:var(--bs-popover-bg)}.bs-popover-auto[data-popper-placement^=right]>.popover-arrow{left:calc(-1 * (var(--bs-popover-arrow-height)) - var(--bs-popover-border-width));width:var(--bs-popover-arrow-height);height:var(--bs-popover-arrow-width)}.bs-popover-auto[data-popper-placement^=right]>.popover-arrow::after,.bs-popover-auto[data-popper-placement^=right]>.popover-arrow::before{border-width:calc(var(--bs-popover-arrow-width) * .5) var(--bs-popover-arrow-height) calc(var(--bs-popover-arrow-width) * .5) 0}.bs-popover-auto[data-popper-placement^=right]>.popover-arrow::before{left:0;border-right-color:var(--bs-popover-arrow-border)}.bs-popover-auto[data-popper-placement^=right]>.popover-arrow::after{left:var(--bs-popover-border-width);border-right-color:var(--bs-popover-bg)}.bs-popover-auto[data-popper-placement^=bottom]>.popover-arrow{top:calc(-1 * (var(--bs-popover-arrow-height)) - var(--bs-popover-border-width))}.bs-popover-auto[data-popper-placement^=bottom]>.popover-arrow::after,.bs-popover-auto[data-popper-placement^=bottom]>.popover-arrow::before{border-width:0 calc(var(--bs-popover-arrow-width) * .5) var(--bs-popover-arrow-height)}.bs-popover-auto[data-popper-placement^=bottom]>.popover-arrow::before{top:0;border-bottom-color:var(--bs-popover-arrow-border)}.bs-popover-auto[data-popper-placement^=bottom]>.popover-arrow::after{top:var(--bs-popover-border-width);border-bottom-color:var(--bs-popover-bg)}.bs-popover-auto[data-popper-placement^=bottom] .popover-header::before{position:absolute;top:0;left:50%;display:block;width:var(--bs-popover-arrow-width);margin-left:calc(-.5 * var(--bs-popover-arrow-width));content:"";border-bottom:var(--bs-popover-border-width) solid var(--bs-popover-header-bg)}.bs-popover-auto[data-popper-placement^=left]>.popover-arrow{right:calc(-1 * (var(--bs-popover-arrow-height)) - var(--bs-popover-border-width));width:var(--bs-popover-arrow-height);height:var(--bs-popover-arrow-width)}.bs-popover-auto[data-popper-placement^=left]>.popover-arrow::after,.bs-popover-auto[data-popper-placement^=left]>.popover-arrow::before{border-width:calc(var(--bs-popover-arrow-width) * .5) 0 calc(var(--bs-popover-arrow-width) * .5) var(--bs-popover-arrow-height)}.bs-popover-auto[data-popper-placement^=left]>.popover-arrow::before{right:0;border-left-color:var(--bs-popover-arrow-border)}.bs-popover-auto[data-popper-placement^=left]>.popover-arrow::after{right:var(--bs-popover-border-width);border-left-color:var(--bs-popover-bg)}.carousel-item-next:not(.carousel-item-start){transform:translateX(100%)}.carousel-item-prev:not(.carousel-item-end){transform:translateX(-100%)}.carousel-indicators [data-bs-target]{box-sizing:content-box;flex:0 1 auto;width:30px;height:3px;padding:0;margin-right:3px;margin-left:3px;text-indent:-999px;cursor:pointer;background-color:#fff;background-clip:padding-box;border:0;border-top:10px solid transparent;border-bottom:10px solid transparent;opacity:.5;transition:opacity .6s ease}@media (prefers-reduced-motion:reduce){.carousel-indicators [data-bs-target]{transition:none}}.carousel-dark .carousel-indicators [data-bs-target]{background-color:#000}[data-bs-theme=dark] .carousel .carousel-control-next-icon,[data-bs-theme=dark] .carousel .carousel-control-prev-icon,[data-bs-theme=dark].carousel .carousel-control-next-icon,[data-bs-theme=dark].carousel .carousel-control-prev-icon{filter:invert(1) grayscale(100)}[data-bs-theme=dark] .carousel .carousel-indicators [data-bs-target],[data-bs-theme=dark].carousel .carousel-indicators [data-bs-target]{background-color:#000}[data-bs-theme=dark] .carousel .carousel-caption,[data-bs-theme=dark].carousel .carousel-caption{color:#000}@media (max-width:575.98px){.offcanvas-sm.show:not(.hiding){transform:none}}@media (max-width:767.98px){.offcanvas-md.show:not(.hiding){transform:none}}@media (max-width:991.98px){.offcanvas-lg.show:not(.hiding){transform:none}}@media (max-width:1199.98px){.offcanvas-xl.show:not(.hiding){transform:none}}@media (max-width:1399.98px){.offcanvas-xxl.show:not(.hiding){transform:none}}.offcanvas.show:not(.hiding){transform:none}.visually-hidden-focusable:not(:focus):not(:focus-within){width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}.visually-hidden-focusable:not(:focus):not(:focus-within):not(caption),.visually-hidden:not(caption){position:absolute!important}.align-items-center{align-items:center!important}.mb-4{margin-bottom:1.5rem!important}.mb-5{margin-bottom:3rem!important}




/* -- Complete Bootstrap grid ---------------------------------------------
   The CSS purge kept only the column classes the home page happened to use,
   which silently broke .col-lg-3 / .col-xl-9 / .col-xl-10 / .offset-* on the
   service pages. The full grid is restored here so any breakpoint/column
   combination works on future pages. Rules already present above are simply
   repeated identically, so the cascade is unchanged.
   ---------------------------------------------------------------------- */
.row{--bs-gutter-x:1.5rem;--bs-gutter-y:0;display:flex;flex-wrap:wrap;margin-top:calc(-1 * var(--bs-gutter-y));margin-right:calc(-.5 * var(--bs-gutter-x));margin-left:calc(-.5 * var(--bs-gutter-x))}.row>*{flex-shrink:0;width:100%;max-width:100%;padding-right:calc(var(--bs-gutter-x) * .5);padding-left:calc(var(--bs-gutter-x) * .5);margin-top:var(--bs-gutter-y)}.col{flex:1 0 0%}.row-cols-auto>*{flex:0 0 auto;width:auto}.row-cols-1>*{flex:0 0 auto;width:100%}.row-cols-2>*{flex:0 0 auto;width:50%}.row-cols-3>*{flex:0 0 auto;width:33.33333333%}.row-cols-4>*{flex:0 0 auto;width:25%}.row-cols-5>*{flex:0 0 auto;width:20%}.row-cols-6>*{flex:0 0 auto;width:16.66666667%}.col-auto{flex:0 0 auto;width:auto}.col-1{flex:0 0 auto;width:8.33333333%}.col-2{flex:0 0 auto;width:16.66666667%}.col-3{flex:0 0 auto;width:25%}.col-4{flex:0 0 auto;width:33.33333333%}.col-5{flex:0 0 auto;width:41.66666667%}.col-6{flex:0 0 auto;width:50%}.col-7{flex:0 0 auto;width:58.33333333%}.col-8{flex:0 0 auto;width:66.66666667%}.col-9{flex:0 0 auto;width:75%}.col-10{flex:0 0 auto;width:83.33333333%}.col-11{flex:0 0 auto;width:91.66666667%}.col-12{flex:0 0 auto;width:100%}.offset-1{margin-left:8.33333333%}.offset-2{margin-left:16.66666667%}.offset-3{margin-left:25%}.offset-4{margin-left:33.33333333%}.offset-5{margin-left:41.66666667%}.offset-6{margin-left:50%}.offset-7{margin-left:58.33333333%}.offset-8{margin-left:66.66666667%}.offset-9{margin-left:75%}.offset-10{margin-left:83.33333333%}.offset-11{margin-left:91.66666667%}.g-0,.gx-0{--bs-gutter-x:0}.g-0,.gy-0{--bs-gutter-y:0}.g-1,.gx-1{--bs-gutter-x:0.25rem}.g-1,.gy-1{--bs-gutter-y:0.25rem}.g-2,.gx-2{--bs-gutter-x:0.5rem}.g-2,.gy-2{--bs-gutter-y:0.5rem}.g-3,.gx-3{--bs-gutter-x:1rem}.g-3,.gy-3{--bs-gutter-y:1rem}.g-4,.gx-4{--bs-gutter-x:1.5rem}.g-4,.gy-4{--bs-gutter-y:1.5rem}.g-5,.gx-5{--bs-gutter-x:3rem}.g-5,.gy-5{--bs-gutter-y:3rem}@media (min-width:576px){.col-sm{flex:1 0 0%}.col-sm-auto{flex:0 0 auto;width:auto}.col-sm-1{flex:0 0 auto;width:8.33333333%}.col-sm-2{flex:0 0 auto;width:16.66666667%}.col-sm-3{flex:0 0 auto;width:25%}.col-sm-4{flex:0 0 auto;width:33.33333333%}.col-sm-5{flex:0 0 auto;width:41.66666667%}.col-sm-6{flex:0 0 auto;width:50%}.col-sm-7{flex:0 0 auto;width:58.33333333%}.col-sm-8{flex:0 0 auto;width:66.66666667%}.col-sm-9{flex:0 0 auto;width:75%}.col-sm-10{flex:0 0 auto;width:83.33333333%}.col-sm-11{flex:0 0 auto;width:91.66666667%}.col-sm-12{flex:0 0 auto;width:100%}.offset-sm-0{margin-left:0}.offset-sm-1{margin-left:8.33333333%}.offset-sm-2{margin-left:16.66666667%}.offset-sm-3{margin-left:25%}.offset-sm-4{margin-left:33.33333333%}.offset-sm-5{margin-left:41.66666667%}.offset-sm-6{margin-left:50%}.offset-sm-7{margin-left:58.33333333%}.offset-sm-8{margin-left:66.66666667%}.offset-sm-9{margin-left:75%}.offset-sm-10{margin-left:83.33333333%}.offset-sm-11{margin-left:91.66666667%}.g-sm-0,.gx-sm-0{--bs-gutter-x:0}.g-sm-0,.gy-sm-0{--bs-gutter-y:0}.g-sm-1,.gx-sm-1{--bs-gutter-x:0.25rem}.g-sm-1,.gy-sm-1{--bs-gutter-y:0.25rem}.g-sm-2,.gx-sm-2{--bs-gutter-x:0.5rem}.g-sm-2,.gy-sm-2{--bs-gutter-y:0.5rem}.g-sm-3,.gx-sm-3{--bs-gutter-x:1rem}.g-sm-3,.gy-sm-3{--bs-gutter-y:1rem}.g-sm-4,.gx-sm-4{--bs-gutter-x:1.5rem}.g-sm-4,.gy-sm-4{--bs-gutter-y:1.5rem}.g-sm-5,.gx-sm-5{--bs-gutter-x:3rem}.g-sm-5,.gy-sm-5{--bs-gutter-y:3rem}}@media (min-width:768px){.col-md{flex:1 0 0%}.col-md-auto{flex:0 0 auto;width:auto}.col-md-1{flex:0 0 auto;width:8.33333333%}.col-md-2{flex:0 0 auto;width:16.66666667%}.col-md-3{flex:0 0 auto;width:25%}.col-md-4{flex:0 0 auto;width:33.33333333%}.col-md-5{flex:0 0 auto;width:41.66666667%}.col-md-6{flex:0 0 auto;width:50%}.col-md-7{flex:0 0 auto;width:58.33333333%}.col-md-8{flex:0 0 auto;width:66.66666667%}.col-md-9{flex:0 0 auto;width:75%}.col-md-10{flex:0 0 auto;width:83.33333333%}.col-md-11{flex:0 0 auto;width:91.66666667%}.col-md-12{flex:0 0 auto;width:100%}.offset-md-0{margin-left:0}.offset-md-1{margin-left:8.33333333%}.offset-md-2{margin-left:16.66666667%}.offset-md-3{margin-left:25%}.offset-md-4{margin-left:33.33333333%}.offset-md-5{margin-left:41.66666667%}.offset-md-6{margin-left:50%}.offset-md-7{margin-left:58.33333333%}.offset-md-8{margin-left:66.66666667%}.offset-md-9{margin-left:75%}.offset-md-10{margin-left:83.33333333%}.offset-md-11{margin-left:91.66666667%}.g-md-0,.gx-md-0{--bs-gutter-x:0}.g-md-0,.gy-md-0{--bs-gutter-y:0}.g-md-1,.gx-md-1{--bs-gutter-x:0.25rem}.g-md-1,.gy-md-1{--bs-gutter-y:0.25rem}.g-md-2,.gx-md-2{--bs-gutter-x:0.5rem}.g-md-2,.gy-md-2{--bs-gutter-y:0.5rem}.g-md-3,.gx-md-3{--bs-gutter-x:1rem}.g-md-3,.gy-md-3{--bs-gutter-y:1rem}.g-md-4,.gx-md-4{--bs-gutter-x:1.5rem}.g-md-4,.gy-md-4{--bs-gutter-y:1.5rem}.g-md-5,.gx-md-5{--bs-gutter-x:3rem}.g-md-5,.gy-md-5{--bs-gutter-y:3rem}}@media (min-width:992px){.col-lg{flex:1 0 0%}.col-lg-auto{flex:0 0 auto;width:auto}.col-lg-1{flex:0 0 auto;width:8.33333333%}.col-lg-2{flex:0 0 auto;width:16.66666667%}.col-lg-3{flex:0 0 auto;width:25%}.col-lg-4{flex:0 0 auto;width:33.33333333%}.col-lg-5{flex:0 0 auto;width:41.66666667%}.col-lg-6{flex:0 0 auto;width:50%}.col-lg-7{flex:0 0 auto;width:58.33333333%}.col-lg-8{flex:0 0 auto;width:66.66666667%}.col-lg-9{flex:0 0 auto;width:75%}.col-lg-10{flex:0 0 auto;width:83.33333333%}.col-lg-11{flex:0 0 auto;width:91.66666667%}.col-lg-12{flex:0 0 auto;width:100%}.offset-lg-0{margin-left:0}.offset-lg-1{margin-left:8.33333333%}.offset-lg-2{margin-left:16.66666667%}.offset-lg-3{margin-left:25%}.offset-lg-4{margin-left:33.33333333%}.offset-lg-5{margin-left:41.66666667%}.offset-lg-6{margin-left:50%}.offset-lg-7{margin-left:58.33333333%}.offset-lg-8{margin-left:66.66666667%}.offset-lg-9{margin-left:75%}.offset-lg-10{margin-left:83.33333333%}.offset-lg-11{margin-left:91.66666667%}.g-lg-0,.gx-lg-0{--bs-gutter-x:0}.g-lg-0,.gy-lg-0{--bs-gutter-y:0}.g-lg-1,.gx-lg-1{--bs-gutter-x:0.25rem}.g-lg-1,.gy-lg-1{--bs-gutter-y:0.25rem}.g-lg-2,.gx-lg-2{--bs-gutter-x:0.5rem}.g-lg-2,.gy-lg-2{--bs-gutter-y:0.5rem}.g-lg-3,.gx-lg-3{--bs-gutter-x:1rem}.g-lg-3,.gy-lg-3{--bs-gutter-y:1rem}.g-lg-4,.gx-lg-4{--bs-gutter-x:1.5rem}.g-lg-4,.gy-lg-4{--bs-gutter-y:1.5rem}.g-lg-5,.gx-lg-5{--bs-gutter-x:3rem}.g-lg-5,.gy-lg-5{--bs-gutter-y:3rem}}@media (min-width:1200px){.col-xl{flex:1 0 0%}.col-xl-auto{flex:0 0 auto;width:auto}.col-xl-1{flex:0 0 auto;width:8.33333333%}.col-xl-2{flex:0 0 auto;width:16.66666667%}.col-xl-3{flex:0 0 auto;width:25%}.col-xl-4{flex:0 0 auto;width:33.33333333%}.col-xl-5{flex:0 0 auto;width:41.66666667%}.col-xl-6{flex:0 0 auto;width:50%}.col-xl-7{flex:0 0 auto;width:58.33333333%}.col-xl-8{flex:0 0 auto;width:66.66666667%}.col-xl-9{flex:0 0 auto;width:75%}.col-xl-10{flex:0 0 auto;width:83.33333333%}.col-xl-11{flex:0 0 auto;width:91.66666667%}.col-xl-12{flex:0 0 auto;width:100%}.offset-xl-0{margin-left:0}.offset-xl-1{margin-left:8.33333333%}.offset-xl-2{margin-left:16.66666667%}.offset-xl-3{margin-left:25%}.offset-xl-4{margin-left:33.33333333%}.offset-xl-5{margin-left:41.66666667%}.offset-xl-6{margin-left:50%}.offset-xl-7{margin-left:58.33333333%}.offset-xl-8{margin-left:66.66666667%}.offset-xl-9{margin-left:75%}.offset-xl-10{margin-left:83.33333333%}.offset-xl-11{margin-left:91.66666667%}.g-xl-0,.gx-xl-0{--bs-gutter-x:0}.g-xl-0,.gy-xl-0{--bs-gutter-y:0}.g-xl-1,.gx-xl-1{--bs-gutter-x:0.25rem}.g-xl-1,.gy-xl-1{--bs-gutter-y:0.25rem}.g-xl-2,.gx-xl-2{--bs-gutter-x:0.5rem}.g-xl-2,.gy-xl-2{--bs-gutter-y:0.5rem}.g-xl-3,.gx-xl-3{--bs-gutter-x:1rem}.g-xl-3,.gy-xl-3{--bs-gutter-y:1rem}.g-xl-4,.gx-xl-4{--bs-gutter-x:1.5rem}.g-xl-4,.gy-xl-4{--bs-gutter-y:1.5rem}.g-xl-5,.gx-xl-5{--bs-gutter-x:3rem}.g-xl-5,.gy-xl-5{--bs-gutter-y:3rem}}@media (min-width:1400px){.col-xxl{flex:1 0 0%}.col-xxl-auto{flex:0 0 auto;width:auto}.col-xxl-1{flex:0 0 auto;width:8.33333333%}.col-xxl-2{flex:0 0 auto;width:16.66666667%}.col-xxl-3{flex:0 0 auto;width:25%}.col-xxl-4{flex:0 0 auto;width:33.33333333%}.col-xxl-5{flex:0 0 auto;width:41.66666667%}.col-xxl-6{flex:0 0 auto;width:50%}.col-xxl-7{flex:0 0 auto;width:58.33333333%}.col-xxl-8{flex:0 0 auto;width:66.66666667%}.col-xxl-9{flex:0 0 auto;width:75%}.col-xxl-10{flex:0 0 auto;width:83.33333333%}.col-xxl-11{flex:0 0 auto;width:91.66666667%}.col-xxl-12{flex:0 0 auto;width:100%}.offset-xxl-0{margin-left:0}.offset-xxl-1{margin-left:8.33333333%}.offset-xxl-2{margin-left:16.66666667%}.offset-xxl-3{margin-left:25%}.offset-xxl-4{margin-left:33.33333333%}.offset-xxl-5{margin-left:41.66666667%}.offset-xxl-6{margin-left:50%}.offset-xxl-7{margin-left:58.33333333%}.offset-xxl-8{margin-left:66.66666667%}.offset-xxl-9{margin-left:75%}.offset-xxl-10{margin-left:83.33333333%}.offset-xxl-11{margin-left:91.66666667%}.g-xxl-0,.gx-xxl-0{--bs-gutter-x:0}.g-xxl-0,.gy-xxl-0{--bs-gutter-y:0}.g-xxl-1,.gx-xxl-1{--bs-gutter-x:0.25rem}.g-xxl-1,.gy-xxl-1{--bs-gutter-y:0.25rem}.g-xxl-2,.gx-xxl-2{--bs-gutter-x:0.5rem}.g-xxl-2,.gy-xxl-2{--bs-gutter-y:0.5rem}.g-xxl-3,.gx-xxl-3{--bs-gutter-x:1rem}.g-xxl-3,.gy-xxl-3{--bs-gutter-y:1rem}.g-xxl-4,.gx-xxl-4{--bs-gutter-x:1.5rem}.g-xxl-4,.gy-xxl-4{--bs-gutter-y:1.5rem}.g-xxl-5,.gx-xxl-5{--bs-gutter-x:3rem}.g-xxl-5,.gy-xxl-5{--bs-gutter-y:3rem}}.col-form-label{padding-top:calc(.375rem + var(--bs-border-width));padding-bottom:calc(.375rem + var(--bs-border-width));margin-bottom:0;font-size:inherit;line-height:1.5}.col-form-label-lg{padding-top:calc(.5rem + var(--bs-border-width));padding-bottom:calc(.5rem + var(--bs-border-width));font-size:1.25rem}.col-form-label-sm{padding-top:calc(.25rem + var(--bs-border-width));padding-bottom:calc(.25rem + var(--bs-border-width));font-size:.875rem}

/* ==========================================================================
   2. THEME STYLES (purged)
      topbar, header, buttons, section titles, footer
   ========================================================================== */
:root{
	--primary-color				: #181818;
	--secondary-color			: #FFFFFF;
	--bg-color					: #F6F5ED;
	--bg-color15					: #9B5E96;
	--text-color				: #83827F;
	--accent-color				: #EDC701;
	--white-color				: #FFFFFF;
	--divider-color				: #1818181A;
	--dark-divider-color		: #FFFFFF1A;
	--error-color				: rgb(230, 87, 87);
	--default-font				:"Stack Sans Headline", sans-serif;;
}html,
body{
	width: 100%;
	overflow-x: clip;
}body{
	font-family: var(--default-font);
	font-size: 16px;
	font-weight: 400;
	line-height: 1em;
	color: var(--text-color);
	background: var(--bg-color);
}::-webkit-scrollbar-track{
	background-color: var(--primary-color);
	border-left: 1px solid var(--primary-color);
}::-webkit-scrollbar{
	width: 7px;
	background-color: var(--primary-color);
}::-webkit-scrollbar-thumb{
	background: var(--accent-color);
}::selection{
	color: var(--primary-color);
	background-color: var(--accent-color);
	filter: invert(1);
}p{
	line-height: 1.7em;
	margin-bottom: 1.5em;
}h1,
h2,
h3,
h4,
h5,
h6{
	font-weight: 400;
	line-height: 1.2em;
	color: var(--primary-color);
	margin: 0;
}figure{
	margin: 0;
}img{
	max-width: 100%;
}a{
	text-decoration: none;
}a:hover{
	text-decoration: none;
	outline: 0;
}a:focus{
	text-decoration: none;
	outline: 0;
}.container{
	max-width: 1300px;
}.container{
    padding-right: 15px;
    padding-left: 15px;
}.image-anime{
	position: relative;
	overflow: hidden;
}.image-anime:after{
	content: "";
	position: absolute;
    width: 200%;
    height: 0%;
    left: 50%;
    top: 50%;
    background-color: rgba(255,255,255,.3);
    transform: translate(-50%,-50%) rotate(-45deg);
    z-index: 1;
}.image-anime:hover:after{
    height: 250%;
    transition: all 600ms linear;
    background-color: transparent;
}.reveal{
	position: relative;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    visibility: hidden;
    overflow: hidden;
}.reveal img{
    height: 100%;
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -webkit-transform-origin: left;
    transform-origin: left;
}.row{
    margin-right: -15px;
    margin-left: -15px;
}.row > *{
	padding-right: 15px;
	padding-left: 15px;
}.btn-default{
	position: relative;
	display: inline-block;
	font-size: 16px;
	font-weight: 500;
	line-height: 1em;
	text-transform: capitalize;
	color: var(--primary-color);
	background: var(--accent-color);
	border-radius: 100px;
	padding: 17px 54px 17px 24px;
	border: none;
	overflow: hidden;
	transition: all 0.4s ease-in-out;
	z-index: 1;
}.btn-default:hover{
	color: var(--white-color);
}.btn-default::before{
	content: "";
	position: absolute;
    top: 50%;
    right: 24px;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    background-image: url("../images/arrow-primary.svg");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
	transition: all 0.4s ease-in-out;
}.btn-default:hover::before{
	transform: translateY(-50%) rotate(45deg);
	filter: brightness(0) invert(1);
}.btn-default::after{ 
	content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 0;
    height: 100%;
    background: var(--primary-color);
    transition: all 0.4s ease-in-out;
    z-index: -1;
}.btn-default:hover:after{
	right: auto;
	left: 0;
    width: 100%;
}.btn-default.btn-highlighted:hover{
	color: var(--primary-color);
}.btn-default.btn-highlighted:hover:before{
	filter: none;
}.btn-default.btn-highlighted::after{
	background-color: var(--white-color);
}.readmore-btn{
	position: relative;
	display: inline-block;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.25em;
	text-transform: capitalize;
	color: var(--primary-color);
	padding-right: 28px;
	transition: all 0.4s ease-in-out;
}.readmore-btn::before{
	content: "";
    position: absolute;
    top: 50%;
    right: 0;
	transform: translateY(-50%);
	background-image: url("../images/arrow-primary.svg");
	background-repeat: no-repeat;
	background-position: right center;
	background-size: cover;
	width: 20px;
	height: 20px;
    transition: all 0.4s ease-in-out;
}.readmore-btn:hover::before{
	transform: translateY(-50%) rotate(45deg);
}.light-section{
	width: 100%;
	background-color: var(--secondary-color);
}.dark-section{
	background-color: var(--primary-color);
	background-image: url("../images/dark-section-bg-image.png");
	background-repeat: no-repeat;
	background-position: top center;
	background-size: cover;
}.section-row{
	margin-bottom: 80px;
}.section-row .section-title{
	margin-bottom: 0; 
}.section-row .section-title.section-title-center{
	width: 100%;
	max-width: 700px;
	margin: 0 auto;
	text-align: center;
}.section-title{
	margin-bottom: 40px;
}
.section-title .section-sub-title{
	position: relative;
	display: inline-block;
	font-size: 14px;
	font-weight: 400;
	text-transform: capitalize;
	line-height: normal;
    color: var(--primary-color);
	background-color: var(--secondary-color);
	border-radius: 100px;
	padding: 8px 16px 8px 32px;
    margin-bottom: 15px;
}
.section-title .section-sub-title::before{
	content: "";
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    background: var(--accent-color);
	border-radius: 50%;
    width: 5px;
    height: 5px;
}.section-title h1{
	font-size: 58px;
	line-height: 1.2em;
	font-weight: 500;
	margin-bottom: 0;
	cursor: none;
}.section-title h2{
	font-size: 46px;
	font-weight: 500;
	line-height: 1.2em;
	margin-bottom: 0;
	cursor: none;
}.section-title p{
	margin-top: 20px;
	margin-bottom: 0;
}
.light-section .section-title .section-sub-title{
	background-color: var(--bg-color);
}
.dark-section .section-title .section-sub-title{
	background: var(--dark-divider-color);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
}
.dark-section .section-title .section-sub-title,
.dark-section .section-title h1,
.dark-section .section-title h2,
.dark-section .section-title p{
	color: var(--white-color);
}.help-block.with-errors ul{
	margin: 0;
	text-align: left;
}.help-block.with-errors ul li{
	color: var(--error-color);
	font-weight: 500;
	font-size: 14px;
}header.main-header{
	position: absolute;
    left: 0px;
    right: 0px;
	z-index: 100;
}header.main-header .header-sticky{
    position: relative;
	top: 0;
	background: transparent;
	border-radius: 0;
	border-bottom: 1px solid var(--dark-divider-color);
	z-index: 100;
}header.main-header .header-sticky.active{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
    transform: translateY(0);
	background: var(--primary-color);
	border-bottom: 1px solid var(--dark-divider-color);
}.navbar{
	padding: 30px 0px;
	align-items: center;
}.navbar-brand{
	padding: 0;
	margin: 0;
}.main-menu .nav-menu-wrapper{
	flex: 1;
	text-align: center;
	margin: 0 1.042vw;
}.main-menu .nav-menu-wrapper > ul{
	align-items: center;
	display: inline-flex;
}.main-menu ul li{
	position: relative;
	margin: 0 10px;
}.main-menu ul li a{
	font-size: 16px;
	font-weight: 400;
	line-height: 1.2em;
	padding: 12px 10px !important;
	color: var(--white-color);
	background: transparent;
	border-radius: 0px;
	text-transform: capitalize;
	transition: all 0.3s ease-in-out;
}.main-menu ul li.submenu > a:after{
	content: "";
	font-family: "FontAwesome";
	font-weight: 900;
	font-size: 14px;
	margin-left: 8px;
}.main-menu ul li a:hover,
.main-menu ul li a:focus{
	color: var(--accent-color);
}.main-menu ul ul{
	visibility: hidden;
	opacity: 0;
	transform: scale(1,0.8);
	transform-origin: top;
	padding: 0;
	margin: 0;
	list-style: none;
	width: 235px;
	border-radius: 20px;
	position: absolute;
	left: 0;
	top: 100%;
	background: var(--accent-color);
	transition: all 0.3s ease-in-out;
	text-align: left;
}.main-menu ul li.submenu:first-child ul{
    width: 235px;
}.main-menu ul ul ul{
	left: 100%;
	top: 0;
	text-align: left;
}.main-menu ul li:hover > ul{
	visibility: visible;
	opacity: 1;
	transform: scale(1,1);
    padding: 5px 0;
}.main-menu ul li.submenu ul li.submenu > a:after{
    content: "";
    float: right;
}.main-menu ul ul li{
	margin: 0;
	padding: 0;
}.main-menu ul ul li a{
	color: var(--primary-color);
	padding: 8px 20px !important;
	transition: all 0.3s ease-in-out;
}.main-menu ul ul li a:hover,
.main-menu ul ul li a:focus{
	color: var(--white-color);
	background-color: transparent;
	padding: 8px 20px 8px 23px !important;
}.responsive-menu,
.navbar-toggle{
	display: none;
}.responsive-menu{
	position: relative;
	top: 0;
}.section-footer-text{
	margin-top: 30px;
	text-align: center;
}.section-footer-text p{
	color: var(--primary-color);
	margin-bottom: 0;
}.section-footer-text p span{
	display: inline-block;
	font-size: 14px;
	font-weight: 400;
	background: var(--accent-color);
	color: var(--primary-color);
	line-height: 1em;
	padding: 5px 14px;
	border-radius: 20px;
	margin-right: 10px;
}.section-footer-text p a{
	display: inline-block;
	font-weight: 700;
	text-transform: capitalize;
	text-decoration: underline;
	text-underline-offset: 3px;
	color: var(--accent-color);
	transition: all 0.4s ease-in-out;
}.section-footer-text p a:hover{
	color: var(--primary-color);
}.section-footer-text ul{
	width: 100%;
	padding: 0;
	margin: 20px 0 0;
	list-style: none;
}.section-footer-text ul li{
	display: inline-block;
	font-size: 16px;
	font-weight: 400;
	line-height: normal;
	color: var(--primary-color);
	margin-right: 10px;
}.section-footer-text ul li:last-child{
	margin: 0;
}.section-footer-text ul li i{
	font-size: 16px;
	background: var(--accent-color);
	background-clip: text;
	-webkit-text-fill-color: transparent;
}.dark-section .section-footer-text p,
.dark-section .section-footer-text ul li{
	color: var(--white-color);
}.dark-section .section-footer-text p a{
	color: var(--accent-color);
}.dark-section .section-footer-text p a:hover{
	color: var(--white-color);
}.satisfy-client-images{
	display: inline-flex;
	align-items: center;
}.satisfy-client-image{
	position: relative;
    display: inline-block;
    margin-left: -10px;
    border: 1px solid var(--white-color);
    border-radius: 50%;
    overflow: hidden;
    z-index: 1;
}.satisfy-client-image:first-child{
	margin-left: 0;
}.satisfy-client-image figure{
	display: block;
	border-radius: 50%;
}.satisfy-client-image figure img{
	width: 100%;
	max-width: 50px;
	border-radius: 50%;
}.satisfy-client-image.add-more{
	width: 42px;
    height: 42px;
    background-color: var(--accent-color);
    display: flex;
    justify-content: center;
    align-items: center;
}.satisfy-client-image.add-more i{
	font-size: 14px;
	color: var(--primary-color);
}.satisfy-client-image.add-more h3{
	color: var(--primary-color);
	font-size: 14px;
	font-weight: 500;
	line-height: 1em;
	margin: 0;
}.section-footer-text.section-satisfy-img{
	display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
}.section-footer-text.section-satisfy-img .satisfy-client-image{
	margin-left: -10px;
}.section-footer-text.section-satisfy-img .satisfy-client-image:first-child{
	margin-left: 0;
}.section-footer-text.section-satisfy-img .satisfy-client-image figure img{
	max-width: 30px;
}.section-footer-text.section-satisfy-img .satisfy-client-image.add-more{
	width: 32px;
	height: 32px;
}.section-footer-text.section-satisfy-img .satisfy-client-image.add-more img{
	width: 100%;
	max-width: 16px;
}.section-footer-text.section-satisfy-img ul{
	margin: 5px 0 0;
}.work-contact-box{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 15px;
}.work-contact-box .icon-box{
	position: relative;
    background: var(--accent-color);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}.work-contact-box .icon-box::before{
	content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background: var(--primary-color);
    border-radius: 50%;
    width: 100%;
    height: 100%;
    transform: scale(0);
    transition: all 0.4s ease-in-out;
    z-index: 0;
}.work-contact-box:hover .icon-box::before{
	transform: scale(1)
}.work-contact-box .icon-box i,
.work-contact-box .icon-box img{
	position: relative;
    z-index: 1;
	transition: all 0.4s ease-in-out;
}.work-contact-box .icon-box i{
    font-size: 22px;
	color: var(--primary-color);
}.work-contact-box:hover .icon-box i{
	color: var(--white-color);
}.work-contact-box .icon-box img{
	position: relative;
	width: 100%;
	max-width: 24px;
	z-index: 1;
}.work-contact-box:hover .icon-box img{
	filter: brightness(0) invert(1);
}.work-contact-box-content{
	width: calc(100% - 65px);
}.work-contact-box-content p{
	margin: 0px;
}.work-contact-box-content h3{
	font-size: 20px;
	margin-top: 5px;
}.work-contact-box-content h3 a{
	color: inherit;
	transition: all 0.4s ease-in-out;
}.work-contact-box-content h3 a:hover{
	color: var(--accent-color);
}.our-project{
	background: url("../images/dark-section-bg-image.png"), linear-gradient(180deg, var(--primary-color) 70%, var(--bg-color) 30%);
	background-size: 100% 70%, 100%;
	background-position: top center;
	background-repeat: no-repeat;
	padding: 120px 0 0;
}.project-item{
	position: relative;
    height: calc(100% - 30px);
    margin-bottom: 30px;
}.project-item-image figure{
	display: block;	
	border-radius: 1000px 1000px 0 0;
	overflow: hidden;
}.project-item-image figure a{
	position: relative;
    display: block;
	border-radius: 1000px 1000px 0 0;
	cursor: none;
}.project-item-image figure a::before{
	content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(180deg, transparent 39.2%, rgba(24, 24, 24, 0.8) 100%);
	border-radius: 1000px 1000px 0 0;
    height: 100%;
    width: 100%;
    z-index: 1;
}.project-item-image figure img{
	width: 100%;
	aspect-ratio: 1 / 1.22;
	object-fit: cover;
	border-radius: 1000px 1000px 0 0;
	transition: all 0.6s ease-in-out;
}.project-item:hover .project-item-image figure img{
	transform: scale(1.06);
}.our-project .section-footer-text p,
.our-project .section-footer-text ul li{
	color: var(--primary-color);
}.our-project .section-footer-text p a:hover{
	color: var(--primary-color);
}.intro-video{
	padding: 120px 0;
}.intro-video-title .intro-video-btn{
	margin-top: 40px;
}.intro-video-content p:last-child{
	margin: 0;
}.intro-video-counter-list{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 30px;
	border-top: 1px solid var(--divider-color);
	margin-top: 40px;
	padding-top: 40px;
}.intro-video-counter-item{
	width: calc(33.33% - 20px);
}.intro-video-counter-item h2{
	font-size: 46px;
	line-height: 1em;
}.intro-video-counter-item p{
	margin: 5px 0 0;
}.intro-video-content-box{
	position: relative;
    min-height: 600px;
    border-radius: 20px;
    align-content: end;
    padding: 40px;
    overflow: hidden;
}.intro-video-content-box::before{
	content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, transparent 50.75%, rgba(24, 24, 24, 0.8) 100%);
    width: 100%;
    height: 100%;
    z-index: 1;
}.intro-video-bg-video{
	position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
}.intro-video-bg-video video{
	width: 100%;
    height: 100%;
    object-fit: cover;
}.intro-video-item-list{
	position: relative;
	z-index: 1;
}.intro-video-item-list ul{
	display: flex;
    flex-wrap: wrap;
	justify-content: center;
    gap: 15px 50px;
    list-style: none;
    margin: 0;
    padding: 0;
}.intro-video-item-list ul li{
    position: relative;
    line-height: 1.5em;
    color: var(--white-color);
    padding-left: 25px;
}.intro-video-item-list ul li::before{
	content: "";
    position: absolute;
    font-family: "Font Awesome 7 Free";
    font-size: 18px;
    font-weight: 900;
    color: var(--accent-color);
    top: 0;
    left: 0;
}.faq-accordion .accordion-item .accordion-button:not(.collapsed){
	background-color: var(--primary-color);
	color: var(--white-color);
}.faq-accordion .accordion-button:not(.collapsed)::after{
    content: "";
}.contact-us-box{
	position: relative;
	background-image: url("../images/contact-us-box-bg-image.jpg");
	background-position: center center;
	overflow: hidden;
	padding: 120px 0;
}.contact-us-box::before{
	content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(270deg, transparent -5%, rgba(24, 24, 24, 0.9) 100%);
    width: 100%;
    height: 100%;
}.contact-us-box .container{
	position: relative;
	z-index: 1;
}.contact-us-content-box{
	min-height: 590px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}.contact-us-info-box{
	border-top: 1px solid var(--divider-color);
	padding-top: 60px;
}.contact-us-info-box .contact-us-item-list{
	display: flex;
	flex-wrap: wrap;
	gap: 30px 50px;
}.dark-section .contact-us-info-box{
	border-color: var(--dark-divider-color);
}.dark-section .contact-us-info-box .work-contact-box .icon-box::before{
	background: var(--white-color);
}.dark-section .contact-us-info-box .work-contact-box:hover .icon-box img{
	filter: none;
}.dark-section .contact-us-info-content p,
.dark-section .contact-us-info-box .work-contact-box .work-contact-box-content p,
.dark-section .contact-us-info-box .work-contact-box .work-contact-box-content h3{
	color: var(--white-color);
}.contact-us-info-content{
	max-width: 394px;
	margin-top: 30px;
}.contact-us-info-content p:last-child{
	margin-bottom: 0;
}.contact-box-form{
	background-color: var(--secondary-color);
	border-radius: 20px;
	padding: 50px;
}.contact-box-form .section-title h2{
	color: var(--primary-color);
}.contact-box-form .section-title p{
	color: var(--text-color);
}.contact-form .form-control{
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5em;
    color: var(--primary-color);
    background-color: var(--bg-color);
    border: none;
    border-radius: 10px;
    padding: 18px 20px;
    outline: none;
    box-shadow: none;
}.contact-form .form-control::placeholder{
    color: var(--text-color);
}.our-blog{
	padding: 120px 0 90px;
}.post-item{
    position: relative;
    min-height: 450px;
    background: var(--secondary-color);
    border-radius: 20px;
    height: calc(100% - 30px);
    margin-bottom: 30px;
    padding: 30px;
    overflow: hidden;
}.post-item::before{
    content: "";
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    width: 100%;
    height: 100%;
    z-index: 1;
    background: var(--secondary-color);
    transition: 0.5s ease-in-out;
}.post-item.active::before,
.post-item:hover::before{
	transform: translate(100%, -100%);
}.post-featured-image{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
	width: 100%;
    height: 100%;
    opacity: 0;
    transition: all 0.4s ease-in-out;
}.post-item.active .post-featured-image,
.post-item:hover .post-featured-image{
	opacity: 1;
}.post-featured-image a{
	position: relative;
	display: block;
	height: 100%;
	cursor: none;
}.post-featured-image a::after{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: var(--primary-color);
	opacity: 50%;
	width: 100%;
	height: 100%;	
}.post-featured-image figure{
	display: block;
    height: 100%;
}.post-featured-image img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}.post-item-body{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 30px;
    height: 100%;
}.post-item-tag,
.post-item-content-box{
	position: relative;
	z-index: 1;
}.post-item-tag{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}.post-item-tag a{
    display: inline-block;
	font-size: 14px;
    font-weight: 400;
    line-height: normal;
    color: var(--primary-color);
    background: var(--bg-color);
    border-radius: 100px;
    padding: 6px 16px;
    transition: all 0.4s ease-in-out;
}.post-item.active .post-item-tag a,
.post-item:hover .post-item-tag a{
	background-color: var(--dark-divider-color);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	color: var(--white-color);
}.post-item .post-item-tag a:hover{
	background-color: var(--accent-color);
	color: var(--primary-color);
}.post-item-content h2{
	font-size: 20px;
	line-height: 1.4em;
	transition: all 0.4s ease-in-out;
}.post-item-content h2 a{
	color: inherit;
}.post-item.active .post-item-content h2,
.post-item:hover .post-item-content h2{
	color: var(--white-color);
}.post-item-btn{
	border-top: 1px solid var(--divider-color);
	padding-top: 25px;
	margin-top: 25px;
	transition: all 0.4s ease-in-out;
}.post-item.active .post-item-btn{
	border-color: var(--dark-divider-color);
}.post-item.active .post-item-btn a.readmore-btn,
.post-item:hover .post-item-btn a.readmore-btn{
    color: var(--white-color);
}.post-item.active .post-item-btn a.readmore-btn::before,
.post-item:hover .post-item-btn a.readmore-btn::before{
    background-image: url("../images/arrow-white.svg");
}.footer-cta-contact-item:nth-child(2n + 2):before{
	display: none;
}.approach-accordion .accordion-button:not(.collapsed)::after{
    content: "";
}.premium-quality-item:nth-child(3n + 3):before{
	display: none;
}@media only screen and (max-width: 1024px){.main-menu ul li{
		margin: 0;
	}.section-title .section-sub-title{
		margin-bottom: 10px;
	}.project-item-image figure,
	.project-item-image figure a,
	.project-item-image figure a::before,
	.project-item-image figure img{
		border-radius: 20px;
	}.project-item-image figure img{
		aspect-ratio: 1 / 1.1;
	}.intro-video-title{
		margin-bottom: 30px;
	}.intro-video-title .intro-video-btn{
    	margin-top: 20px;
	}.intro-video-counter-list{
		margin-top: 30px;
		padding-top: 30px;
	}.intro-video-content-box{
		padding: 30px;
	}.intro-video-item-list ul{
		gap: 10px 30px;
	}.contact-us-content-box{
		min-height: initial;
		margin-bottom: 40px;
	}.contact-us-info-box{
		padding-top: 40px;
	}.contact-us-info-content{
		max-width: 100%;
	}.post-item{
		min-height: 380px;
	}}@media only screen and (max-width: 991px){.btn-default{
		padding: 15px 46px 15px 18px;
	}.btn-default::before{
		right: 18px;
	}header.main-header .header-sticky{
		width: 100%;
	}header.main-header .header-sticky.active{
        width: 100%;
	}.navbar{
		padding: 20px 0;
	}.responsive-menu,
    .navbar-toggle{
        display: block;
    }.header-btn{
		display: none;
	}.section-row{
		margin-bottom: 40px;
	}.section-title{
		margin-bottom: 30px;
	}.section-title .section-sub-title{
		padding: 6px 12px 6px 24px;
	}.section-title .section-sub-title::before{
		left: 12px;
	}.section-title h1{
		font-size: 42px;
	}.section-title h2{
		font-size: 36px;
	}.section-title p{
		margin-top: 10px;
	}.section-footer-text{
		margin-top: 10px;
	}.section-footer-text p span{
		padding: 3px 10px;
	}.section-footer-text ul{
		margin-top: 10px;
	}.section-footer-text ul li{
		margin-right: 5px;
	}.work-contact-box-content h3{
		font-size: 18px;
	}.our-project{
		padding: 60px 0 0;
	}.intro-video{
		padding: 60px 0;
	}.intro-video-counter-item h2{
		font-size: 38px;
	}.intro-video-content-box{
		min-height: 480px;
	}.intro-video-item-list ul li::before{
		font-size: 16px;
	}.contact-us-box{
		padding: 60px 0;
	}.contact-us-content-box{
		margin-bottom: 30px;
	}.contact-us-info-box{
        padding-top: 30px;
    }.contact-us-info-content{
		margin-top: 20px;
	}.contact-box-form{
		padding: 30px;
	}.contact-form .form-control{
		padding: 13px 15px;
	}.our-blog{
		padding: 60px 0 30px;
	}.premium-quality-item:nth-child(3n + 3)::before{
		display: block;
	}.premium-quality-item:nth-child(2n + 2)::before{
		display: none;
	}}@media only screen and (max-width: 767px){.section-row{
		margin-bottom: 30px;
	}.section-title h1{
		font-size: 28px;
	}.section-title h2{
		font-size: 26px;
	}.intro-video-counter-list{
		gap: 20px;
	}.intro-video-counter-item{
    	width: calc(33.33% - 13.33px);
	}.intro-video-counter-item h2{
		font-size: 26px;
	}.intro-video-counter-item p{
		font-size: 14px;
	}.intro-video-content-box{
		min-height: 380px;
		padding: 20px;
	}.intro-video-item-list ul{
		justify-content: start;
	}.contact-box-form{
        padding: 20px;
    }.post-item{
        padding: 20px;
        min-height: 320px;
    }.post-item-content h2{
        font-size: 18px;
    }.post-item-btn{
        margin-top: 15px;
        padding-top: 15px;
    }}.topbar-metal{
	background: var(--accent-color);
	padding: 15px 0;
}.topbar-contact-info-metal p{
	line-height: 1.25em;
	color: var(--primary-color);
	margin-bottom: 0;
}.topbar-contact-info-metal p a{
	color: inherit;
	text-decoration: underline;
	transition: all 0.4s ease-in-out;
}.topbar-contact-info-metal p a:hover{
	color: var(--white-color);
}.topbar-link-box-metal{
	display: flex;
	flex-wrap: wrap;
	justify-content: right;
	align-items: center;
}.topbar-contact-info-list-metal{
	border-right: 1px solid var(--divider-color);
	margin-right: 20px;
	padding-right: 20px;
}.topbar-contact-info-list-metal ul{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 20px;
    list-style: none;
    padding: 0;
    margin: 0;
}.topbar-contact-info-list-metal ul li{
	position: relative;
	color: var(--primary-color);
	text-transform: capitalize;
}.topbar-contact-info-list-metal ul li::before{
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	right: -10px;
	background: var(--primary-color);
	width: 2px;
	height: 100%;
	transform: rotate(8deg);
}.topbar-contact-info-list-metal ul li:last-child:before{
	display: none;
}.topbar-contact-info-list-metal ul li a{
	color: inherit;
	transition: all 0.3s ease-in-out;
}.topbar-contact-info-list-metal ul li a:hover{
	color: var(--white-color);
}.topbar-social-links-metal ul{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
    list-style: none;
    padding: 0;
    margin: 0;
}.topbar-social-links-metal ul li a{
	font-size: 18px;
	color: var(--primary-color);
    transition: all 0.3s ease-in-out;
}.topbar-social-links-metal ul li a:hover{
	color: var(--white-color);
}.topbar-social-links-metal ul li a i{
	color: inherit;
}header.main-header-metal{
	position: initial;
}header.main-header-metal .header-sticky{
	background: var(--secondary-color);
	border: none;
}header.main-header-metal .main-menu ul li a{
	color: #333333;
}header.main-header-metal .main-menu ul li a:hover,
header.main-header-metal .main-menu ul li a:focus{
	color: #760776;
}header.main-header-metal .main-menu ul ul li a:hover,
header.main-header-metal .main-menu ul ul li a:focus{
	color: var(--white-color);
}header.main-header-metal .header-sticky.active{
	background: var(--white-color);
	border-color: var(--divider-color);
}.hero-metal{
	position: relative;
	min-height: 80vh;
	padding: 140px 0;
	align-content: center;
}.hero-content-metal{
	position: relative;
	margin-right: 20px;
	z-index: 2;
}.hero-image-slider-metal{
	height: 100%;
	align-content: end;
}.hero-image-slider-metal .swiper-slide{
	cursor: none;
}.hero-img-slider-metal{
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	height: 100%;
	width: 100%;
}.hero-img-slider-metal:before{
	content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, rgba(24, 24, 24, 0.80) 16.17%, transparent 100%);
    width: 100%;
    height: 100%;
    z-index: 2;
}.hero-img-slider-metal .swiper{
	height: 100%;
}.hero-img-slider-metal .swiper-slide,
.hero-img-slider-metal .slide-image{
	height: 100%;
}.hero-img-slider-metal .slide-image figure{
	display: block;
	height: 100%;
}.hero-img-slider-metal .swiper-slide img,
.hero-img-slider-metal .swiper-slide video{
	height: 100%;
	width: 100%;
	object-fit: cover;
	background: #181818;
}.hero-img-item-metal{
	text-align: right;
	width: 270px;
	margin: 0 0 0 auto;
}.hero-img-item-metal .swiper-slide{
	border: 2px solid var(--dark-divider-color);
    border-radius: 10px;
	transition: all 0.4s ease-in-out;
}.hero-img-item-metal .swiper-slide.swiper-slide-thumb-active{
	border-color: var(--white-color);
}.hero-img-item-metal figure{
	display: block;
}.hero-img-item-metal img{
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 10px;
}.why-choose-us-metal{
	padding: 120px 0;
}.why-choose-body-metal{
	background-color: var(--secondary-color);
	border-radius: 20px;
	padding: 40px;
}.why-choose-item-metal{
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
	border-bottom: 1px solid var(--divider-color);
    margin-bottom: 30px;
    padding-bottom: 30px;
}.why-choose-item-metal .icon-box{
	position: relative;
    height: 50px;
    width: 50px;
    background-color: var(--accent-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}.why-choose-item-metal .icon-box::before{
   	content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--primary-color);
    border-radius: 100px;
    transform: scale(0);
    width: 100%;
    height: 100%;
    transition: all 0.4s ease-in-out;
	z-index: 0;
}.why-choose-item-metal:hover .icon-box::before{
	transform: scale(1);
}.why-choose-item-metal .icon-box img{
    width: 100%;
    max-width: 24px;
    transition: all 0.4s ease-in-out;
}.why-choose-item-metal:hover .icon-box img{
    filter: brightness(0) invert(1);
}.why-choose-item-Content-metal{
	width: calc(100% - 65px);
}.why-choose-item-Content-metal h3{
	font-size: 20px;
}.why-choose-item-Content-metal p{
	margin: 10px 0 0;
}.why-choose-image-list-metal{
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
}.why-choose-body-image-metal{
	max-width: 200px;
}.why-choose-body-image-metal figure{
	display: block;
	height: 100%;
	border-radius: 20px;
}.why-choose-body-image-metal img{
	height: 100%;
	width: 100%;
	aspect-ratio: 1 / 0.86;
	object-fit: cover;
	border-radius: 20px;
}.why-choose-body-list-metal{
	width: calc(100% - 230px);
	align-content: center;
}.why-choose-body-list-metal ul{
    list-style: none;
    padding: 0;
    margin: 0;
}.why-choose-body-list-metal ul li{
	position: relative;
	line-height: 1.5em;
	padding-left: 25px;
	margin-bottom: 20px;
}.why-choose-body-list-metal ul li::before{
	content: "";
	position: absolute;
	font-family: "Font Awesome 7 Free";
	font-size: 18px;
    font-weight: 900;
	color: var(--accent-color);
	top: 0;
	left: 0;
}.why-choose-body-list-metal ul li:last-child{
	margin-bottom: 0;
}.why-choose-image-box-metal{
	display: flex;
	flex-wrap: wrap;
	align-items: end;
	margin-left: 15px;
	padding-right: 15px;
}.why-choose-image-1-metal{
	width: 67%;
	padding-bottom: 190px;
}.why-choose-image-box-metal figure{
	display: block;
	border-radius: 20px;
}.why-choose-image-box-metal figure img{
	width: 100%;
	object-fit: cover;
	border-radius: 20px;
}.why-choose-image-1-metal figure img{
	aspect-ratio: 1 / 1.265;
}.why-choose-image-2-metal{
	position: relative;
	width: 33%;
	z-index: 1;
	transform: rotate(6deg);
}.why-choose-image-2-metal figure{
	border: 6px solid var(--bg-color);
	margin-left: -189px;
	border-radius: 26px;
}.why-choose-image-2-metal figure img{
	aspect-ratio: 1 / 1.0977;
}
.commitments-counter-item-metal:nth-child(2n + 2):before{
	display: none;
}.faq-accordion-metal .accordion-item .accordion-button:not(.collapsed){
    background: transparent;
}.faq-accordion-metal .accordion-button:not(.collapsed)::after{
    content: "";
	background-color: var(--white-color);
}@media only screen and (max-width: 1024px){.topbar-contact-info-list-metal{
		display: none;
	}.hero-metal{
		min-height: 780px;
	}.hero-content-metal{
		max-width: 100%;
        margin: 0;
	}.hero-img-item-metal{
		margin: 30px 0 0 0;
	}.why-choose-us-content-metal{
        height: auto;
		margin-bottom: 30px;
	}.why-choose-image-box-metal{
		max-width: 740px;
		margin: 0 auto;
	}.why-choose-image-1-metal figure img{
        aspect-ratio: 1 / 1.2;
    }}@media only screen and (max-width: 991px){.hero-metal{
		padding: 60px 0;
	}.hero-img-item-metal{
		max-width: 230px;
	}.hero-img-item-metal .swiper-slide{
		max-width: 100px;
	}.why-choose-us-metal{
		padding: 60px 0;
	}.why-choose-body-metal{
        padding: 30px;
    }.why-choose-body-list-metal ul li{
        margin-bottom: 15px;
    }.why-choose-body-list-metal ul li::before{
		font-size: 16px;
	}.satisfy-client-image figure img{
        max-width: 40px;
    }}@media only screen and (max-width: 767px){.topbar-metal{
		padding: 10px 0;
	}.topbar-contact-info-metal{
		text-align: center;
	}.topbar-contact-info-metal p{
		font-size: 14px;
	}.topbar-link-box-metal{
		display: none;
	}.hero-img-item-metal{
		max-width: 175px;
	}.hero-img-item-metal .swiper-slide{
        max-width: 80px;
    }.why-choose-body-metal{
		padding: 20px;
	}.why-choose-item-metal{
		margin-bottom: 20px;
    	padding-bottom: 20px;
	}.why-choose-item-Content-metal{
        width: 100%;
    }.why-choose-item-Content-metal h3{
		font-size: 18px;
	}.why-choose-image-list-metal{
		gap: 20px;
	}.why-choose-body-image-metal,
	.why-choose-body-list-metal{
		width: 100%;
		max-width: 100%;
	}.why-choose-body-list-metal ul li{
		margin-bottom: 10px;
	}.why-choose-image-box-metal{
		padding-right: 5px;
	}.why-choose-image-1-metal{
		padding-bottom: 100px;
	}.why-choose-image-2-metal figure{
		margin-left: -100px;
	}}.about-us-stone{
    padding: 120px 0;
}.about-us-image-box-stone{
    position: relative;
    display: flex;
    flex-wrap: wrap;
    margin-right: 15px;
}.about-us-vertical-brand{
    position: absolute;
    left: -50px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 0;
    pointer-events: none;
}.about-us-vertical-brand span{
    display: inline-block;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-family: var(--default-font);
    font-size: 42px;
    font-weight: 700;
    letter-spacing: 6px;
    text-transform: uppercase;
    color: #eceef3;
    white-space: nowrap;
    line-height: 1;
}@media (max-width: 1400px){.about-us-vertical-brand{
        left: -20px;
    }.about-us-vertical-brand span{
        font-size: 32px;
        letter-spacing: 4px;
    }}@media (max-width: 1199px){.about-us-vertical-brand{
        display: none;
    }}.about-us-image-box-1-stone{
    width: 38%;
    padding-bottom: 120px;
}.about-us-image-box-1-stone .about-us-image-stone figure{
    margin-right: -230px;
}.about-us-image-stone figure{
    display: block;
    border-radius: 20px;
}.about-us-image-stone figure img{
    width: 100%;
    object-fit: cover;
    border-radius: 20px;
}.about-us-image-box-1-stone .about-us-image-stone figure img{
    aspect-ratio: 1 / 1.36;
}.about-us-image-box-2-stone .about-us-image-stone figure img{
    aspect-ratio: 1 / 1.14;
}.about-us-image-box-2-stone{
    position: relative;
    width: 62%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 30px;
    z-index: 1;
}.about-experience-box-stone{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 15px;
    background-color: var(--white-color);
    border-radius: 10px;
    padding: 25px;
    max-width: 280px;
    margin: 70px 30px 0 auto;
    animation: Movestylestone 2s infinite alternate linear;
}@keyframes Movestylestone{
	50%{
		transform: translateX(-15px);
	}
}.about-experience-box-stone .icon-box{
    position: relative;
    width: 50px;
    height: 50px;
    background: var(--accent-color);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}.about-experience-box-stone .icon-box::before{
	content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--primary-color);
    border-radius: 50%;
    transform: scale(0);
    transition: all 0.4s ease-in-out;
    z-index: 0;
}.about-experience-box-stone:hover .icon-box::before{
    transform: scale(1);
}.about-experience-box-stone .icon-box img{
	position: relative;
    width: 100%;
    max-width: 24px;
    transition: all 0.4s ease-in-out;
	z-index: 1;
}.about-experience-box-stone:hover .icon-box img{
	filter: brightness(0) invert(1);
}.about-experience-box-content-stone{
    width: calc(100% - 65px);
}.about-experience-box-content-stone h2{
    font-size: 40px;
    font-weight: 400;
    line-height: 1em;
}.about-experience-box-content-stone p{
    color: var(--primary-color);
	line-height: normal;
    margin: 5px 0 0;
}.about-us-image-box-2-stone .about-us-image-stone figure{
    border: 6px solid var(--bg-color);
    border-radius: 27px;
}.about-us-item-box-stone{
    background-color: var(--white-color);
    border-radius: 20px;
    margin-bottom: 40px;
    padding: 25px;
}.about-us-item-stone{
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    border-bottom: 1px solid var(--divider-color);
    padding-bottom: 20px;
    margin-bottom: 20px;
}.about-us-item-stone .icon-box{
    position: relative;
    width: 50px;
    height: 50px;
    background: var(--accent-color);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}.about-us-item-stone .icon-box::before{
	content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--primary-color);
    border-radius: 50%;
    transform: scale(0);
    transition: all 0.4s ease-in-out;
    z-index: 0;
}.about-us-item-box-stone:hover .icon-box::before{
    transform: scale(1);
}.about-us-item-stone .icon-box img{
	position: relative;
    width: 100%;
    max-width: 24px;
    transition: all 0.4s ease-in-out;
	z-index: 1;
}.about-us-item-box-stone:hover .icon-box img{
	filter: brightness(0) invert(1);
}.about-us-item-content-stone{
    width: calc(100% - 70px);
}.about-us-item-content-stone h3{
    font-size: 20px;
}.about-us-item-content-stone p{
    margin: 10px 0 0;
}.about-us-item-list-stone ul{
    list-style: disc;
    padding: 0 0 0 20px;
    margin: 0;
}.about-us-item-list-stone ul li{
    line-height: 1.5em;
    margin-bottom: 10px;
}.about-us-item-list-stone ul li:last-child{
    margin-bottom: 0;
}.about-us-item-list-stone ul li::marker{
    color: var(--accent-color);
}.about-us-body-stone{
    display: flex;
    flex-wrap: wrap;
    gap: 20px 30px;
}.about-us-body-content-stone{
    width: calc(50% - 15px);
    align-content: center;
}.about-us-list-stone ul{
    list-style: none;
    padding: 0;
    margin: 0;
}.about-us-list-stone ul li{
	position: relative;
	line-height: 1.5em;
	padding-left: 25px;
	margin-bottom: 15px;
}.about-us-list-stone ul li:last-child{
	margin-bottom: 0;
}.about-us-list-stone ul li::before{
	content: "";
    position: absolute;
    font-family: "Font Awesome 7 Free";
    top: 0;
    left: 0;
    font-size: 18px;
    font-weight: 900;
    color: var(--accent-color);
}.about-us-btn-stone{
	margin-top: 40px;
}.about-us-body-image-stone{
    width: calc(50% - 15px);
}.about-us-body-image-stone figure{
    display: block;
    height: 100%;
    border-radius: 20px;
}.about-us-body-image-stone figure img{
    height: 100%;
    width: 100%;
    aspect-ratio: 1 / 0.67;
    object-fit: cover;
    border-radius: 20px;
}.our-service-stone{
	background-image: url("../images/service-bg-image-metal9.jpg");
    background-position: bottom -60px center;
    background-repeat: no-repeat;
    background-size: auto;
    padding: 120px 0;
}.service-item-stone{
	background: var(--bg-color15);
    border-radius: 20px;
    height: calc(100% - 30px);
    margin-bottom: 30px;
    padding: 10px;
    transition: all 0.4s ease-in-out;
}.service-item-stone:hover{ 
    transform: translateY(-5px);
}.servce-item-image-box-stone{
    position: relative;
    margin-bottom: 10px;
}.servce-item-image-box-stone figure{
    display: block;
    border-radius: 10px;
}.servce-item-image-box-stone figure img{
    width: 100%;
    border-radius: 10px;
    aspect-ratio: 1 / 1.045;
    object-fit: cover;
    transition: all 0.6s ease-in-out;
}.service-item-stone:hover .servce-item-image-box-stone figure img{
    transform: scale(1.06);
}.service-btn-stone{
    position: absolute;
    top: 50%;
    left: 50%;    
    transform: translate(-50%, -50%) scale(0);
    transition: all 0.4s ease-in-out;
    z-index: 1;
}.service-item-stone:hover .service-btn-stone{
    transform: translate(-50%, -50%) scale(1);
}.service-btn-stone a{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--accent-color);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.4s ease-in-out;
}.service-btn-stone a:hover{
    background-color: var(--primary-color);
}.service-btn-stone img{
	width: 100%;
    max-width: 20px;
    transition: all 0.4s ease-in-out;
}.service-btn-stone a:hover img{
    filter: brightness(0) invert(1);
}.service-btn-stone:hover img{
    transform: rotate(45deg);
}.service-item-content-stone{
    padding: 20px;
    text-align: center;
}.service-item-content-stone h2{ 
    font-size: 20px;
	color:#fff;
}.service-item-content-stone h2 a{ 
    color: inherit;
	color:#fff;
}.our-values-stone{
    padding: 120px 0;
}.values-image-box-stone{
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: end;
}.values-image-box-stone::before{
    content: "";
    position: absolute;
    top: 85px;
    right: 35px;
    background: url("../images/our-values-bg-image-stone.png") no-repeat;
	background-position: center center;
    background-size: cover;
    width: 155px;
    height: 234px;
    transform: rotate(15deg);
}.values-image-box-1-stone{
    width: 40%;
    padding-bottom: 225px;
}.values-image-box-1-stone figure{
    display: block;
    border-radius: 200px 200px 0 0;
    margin-right: -165px;
}.values-image-box-1-stone figure img{
    width: 100%;
    border-radius: 200px 200px 0 0;
    aspect-ratio: 1 / 1.16;
    object-fit: cover;
}.values-image-box-2-stone{
    position: relative;
    width: 60%;
    align-content: end;
    z-index: 1;
}.values-image-stone figure{
    display: block;
    border-radius: 0 0 200px 200px;
    border: 6px solid var(--bg-color);
}.values-image-stone figure img{
    width: 100%;
    border-radius: 0 0 200px 200px;
    aspect-ratio: 1 / 1.243;
    object-fit: cover;
}.values-item-stone{
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 20px;
}.values-item-stone:last-child{
    margin-bottom: 0;
}.values-item-stone .icon-box{
    position: relative;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--accent-color);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
}.values-item-stone .icon-box::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--primary-color);
    border-radius: 50%;
    width: 100%;
    height: 100%;
    transition: all 0.4s ease-in-out;
    transform: scale(0);
    z-index: -1;
}.values-item-stone:hover .icon-box::before{
    transform: scale(1);
}.values-item-stone .icon-box img{
    width: 100%;
    max-width: 24px;
    transition: all 0.4s ease-in-out;
}.values-item-stone:hover .icon-box img{
    filter: brightness(0) invert(1);
}.values-item-content-stone{
    width: calc(100% - 65px);
}.values-item-content-stone h3{
    font-size: 20px;
}.values-item-content-stone p{
    margin: 10px 0 0;
}.values-content-list-stone{
    border-top: 1px solid var(--divider-color);
    padding-top: 30px;
    margin-top: 30px;
}.values-content-list-stone ul{
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 20px 30px;
    flex-wrap: wrap;
}.values-content-list-stone ul li{
    width: calc(50% - 15px);
    position: relative;
    line-height: 1.5em;
    color: var(--primary-color);
    padding: 20px 20px 20px 45px;
    background-color: var(--white-color);
    border-radius: 10px;
    transition: all 0.4s ease-in-out;
}.values-content-list-stone ul li:hover{
    background-color: var(--primary-color);
    color: var(--white-color);
}.values-content-list-stone ul li::before{
    content: "";
    position: absolute;
    font-family: "Font Awesome 7 Free";
    top: 20px;
    left: 20px;
    font-size: 18px;
    font-weight: 900;
    color: var(--accent-color);
}.values-btn-stone{
    margin-top: 40px;
}.our-core-features-stone{
	padding: 120px 0;
}.dotted-bg-section{
    background-image: url("../images/dot-bg-pattern.png");
    background-repeat: repeat;
    background-position: top center;
    background-size: 500px auto;
}.core-features-item-stone{
	border-radius: 20px;
	min-height: 450px;
	display: flex;
    flex-direction: column;
    justify-content: space-between;
	gap: 30px;
	height: calc(100% - 30px);
    margin-bottom: 30px;
    padding: 40px;
	overflow: hidden;
}.core-features-item-stone.box-1{
    background-color: var(--accent-color);
}.core-features-item-stone.box-1 .core-features-item-image-stone,
.core-features-item-stone.box-3 .core-features-item-image-stone{
	max-width: 330px;
	margin: 0 auto;
}.core-features-item-stone.box-1 .core-features-item-image-stone img,
.core-features-item-stone.box-3 .core-features-item-image-stone img{
	width: 100%;
	border-radius: 20px 20px 0 0;
	margin-bottom: -70px;
}.core-features-item-stone h3{
	font-size: 20px;
}.core-features-item-stone p{
	border-top: 1px solid var(--divider-color);
	padding-top: 20px;
	margin: 20px 0 0;
}.core-features-item-stone.box-1 p{
	color: var(--primary-color);
}.core-features-item-stone.box-2{
	position: relative;
	justify-content: end;
}.core-features-item-stone.box-2 .core-features-item-image-stone{
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
}.core-features-item-stone.box-2 .core-features-item-image-stone figure{
	position: relative;
	height: 100%;
	overflow: hidden;
}.core-features-item-stone.box-2 .core-features-item-image-stone figure::before{
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: linear-gradient(180deg, transparent 50%, rgba(24, 24, 24, 0.80) 82.5%);
	height: 100%;
	width: 100%;
}.core-features-item-stone.box-2 .core-features-item-image-stone img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}.core-features-item-stone.box-2 .core-features-item-content-stone{
	position: relative;
	z-index: 1;
}.core-features-item-stone.box-2 .core-features-item-content-stone h3,
.core-features-item-stone.box-3 .core-features-item-content-stone h3{
	color: var(--white-color);
}.core-features-item-stone.box-2 .core-features-item-content-stone p{
	color: var(--white-color);
	border: none;
    padding-top: 0;
}.core-features-item-stone.box-3{
	background-color: var(--primary-color);
}.core-features-item-stone.box-3 .core-features-item-content-stone p{
	color: var(--white-color);
	border-color: var(--dark-divider-color);
}.our-faqs-stone{
	padding: 120px 0;
}.faqs-content-stone{
    display: flex;
    flex-direction: column;
    gap: 30px;
	background-color: var(--white-color);
	border-radius: 20px;
	padding: 10px;
    height: 100%;
}.faq-image-stone{
    height: 100%;
}.faq-image-stone figure{
	display: block;
    height: 100%;
	border-radius: 10px;
	overflow: hidden;
}.faq-image-stone img{
    height: 100%;
	width: 100%;
	aspect-ratio: 1 / 0.437;
	object-fit: cover;
	border-radius: 10px;
}.faq-body-stone{
	padding: 0 20px 20px;
}.faq-body-content-stone h3{
	font-size: 24px;
}.faq-body-content-stone p{
	margin: 20px 0 0;
}.faq-contact-item-list-stone{
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
	border-top: 1px solid var(--divider-color);
	padding-top: 30px;
	margin-top: 30px;
}.faq-contact-item-stone{
	position: relative;
	width: calc(50% - 15px);
	display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 15px;
}.faq-contact-item-stone::before{
	content: "";
	position: absolute;
	top: 0;
	right: -15px;
	height: 100%;
	width: 1px;
	background-color: var(--divider-color);
}.faq-contact-item-stone:last-child:before{
	display: none;
}.faq-contact-item-stone .icon-box{
	position: relative;
	height: 50px;
	width: 50px;
	background-color: var(--accent-color);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}.faq-contact-item-stone .icon-box:before{
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	background: var(--primary-color);
	border-radius: 50%;
	width: 100%;
	height: 100%;
	transform: scale(0);
	transition: all 0.4s ease-in-out;
	z-index: 0;
}.faq-contact-item-stone:hover .icon-box:before{
	transform: scale(1);
}.faq-contact-item-stone .icon-box img{
	transition: all 0.4s ease-in-out;
}.faq-contact-item-stone:hover .icon-box img{
    filter: brightness(0) invert(1);
}.faq-contact-item-content-stone{
    width: calc(100% - 65px);
}.faq-contact-item-content-stone p{
    line-height: normal;
	margin-bottom: 5px;
}.faq-contact-item-content-stone h3{
	font-size: 20px;
	font-weight: 400;
}.faq-contact-item-content-stone h3 a{
    color: inherit;
    transition: all 0.3s ease-in-out;
}.faq-contact-item-content-stone h3 a:hover{
	color: var(--accent-color);
}.faq-accordion-stone .accordion-item{
	background: var(--white-color);
	border-radius: 10px;
	margin-bottom: 30px;
    padding: 0;
	transition: all 0.4s ease-in-out;
	overflow: hidden;
}.faq-accordion-stone .accordion-item:last-child{
	margin-bottom: 0;
}.faq-accordion-stone .accordion-header .accordion-button{
	font-size: 18px;
	font-weight: 400;
	line-height: 1.333em;
    background-color: var(--white-color);
    color: var(--primary-color);
    padding: 22px 55px 22px 22px;
	transition: all 0.4s ease-in-out;
}.faq-accordion-stone .accordion-header .accordion-button:not(.collapsed){
	background-color: var(--accent-color);
}.faq-accordion-stone .accordion-item .accordion-button::after, 
.faq-accordion-stone .accordion-item .accordion-button.collapsed::after{
    content: "+";
    font-family: "Font Awesome 7 Free";
    position: absolute;
    right: 22px;
    top: 50%;
    font-size: 24px;
    font-weight: 600;
    transform: translateY(-50%);
    color: var(--accent-color);
    transition: all 0.4s ease-in-out;
}.faq-accordion-stone .accordion-button:not(.collapsed)::after{
    content: "";
	color: var(--primary-color);
}.faq-accordion-stone .accordion-item .accordion-body{
	background-color: var(--accent-color);
	border-top: 1px solid var(--divider-color);
	padding: 22px;
}.faq-accordion-stone .accordion-item .accordion-body p{
	color: var(--primary-color);
	margin: 0;
}.our-faqs-stone .section-footer-text{
	margin-top: 60px;
}.our-testimonials-stone{
	background-image: url("../images/testimonials-bg-stone.png");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: auto;
	padding: 120px 0;
}.testimonial-slider-stone{
	height: 100%;
}.testimonial-slider-stone .swiper{
	padding-bottom: 60px;
	height: 100%;
}.testimonial-slider-stone .swiper-wrapper{
	height: 100%;
	cursor: none;
}.testimonial-slider-stone .swiper-wrapper .swiper-slide .testimonial-item-stone{
	transform: scale(0.95);
	transition: all 0.6s ease-in-out;
}.testimonial-slider-stone .swiper-wrapper .swiper-slide.swiper-slide-next .testimonial-item-stone{
	transform: scale(1);
}.testimonial-item-stone{
	position: relative;
	min-height: 455px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 30px;
	background-color: var(--bg-color);
	border-radius: 20px;
	padding: 40px;
    height: 100%;
	overflow: hidden;
}.testimonial-item-rating-stone i{
	font-size: 18px;
	color: var(--accent-color);
}.testimonial-item-content-stone p{
	font-size: 20px;
	font-weight: 400;
	color: var(--primary-color);
	margin-bottom: 0;
}.testimonial-item-author-stone{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 15px;
	border-top: 1px solid var(--divider-color);
	padding-top: 40px;
	margin-top: 40px;
}.testimonial-author-image-stone figure{
	display: block;
	border-radius: 50%;
}.testimonial-author-image-stone figure img{
	width: 100%;
	max-width: 50px;
	border-radius: 50%;
}.testimonial-author-content-stone{
	width: calc(100% - 65px);
}.testimonial-author-content-stone h2{
	font-size: 20px;
	font-weight: 400;;
}.testimonial-author-content-stone p{
	margin: 5px 0 0;
}.testimonial-slider-stone .testimonial-pagination-stone{
	position: absolute;
	bottom: 0px;
	text-align: center;
}.testimonial-slider-stone .testimonial-pagination-stone .swiper-pagination-bullet{
	border-radius: 40px;
	height: 10px;
	width: 10px;
	background: var(--divider-color);
	opacity: 1;
	margin: 0 3px;
	transition: all 0.3s ease-in-out;
}.testimonial-slider-stone .testimonial-pagination-stone .swiper-pagination-bullet-active{
	width: 30px;
	background: var(--accent-color);
	opacity: 1;
}.our-testimonials-stone .section-footer-text.section-satisfy-img ul{
    margin: 0;
}.main-footer-stone{
	padding: 120px 0 0;
}.footer-header-stone{
	border-bottom: 1px solid var(--dark-divider-color);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding-bottom: 60px;
	margin-bottom: 60px;
}.footer-header-stone .section-title{
	max-width: 700px;
	margin-bottom: 0;
}.about-footer-stone{
	max-width: 300px;
}.footer-logo-stone img{
	width: 100%;
	max-width: 152px;
}.about-footer-content-stone{
	margin-top: 20px;
}.about-footer-content-stone p{
	color: var(--white-color);
	margin-bottom: 0;
}.footer-contact-lists-stone{
	border-top: 1px solid var(--dark-divider-color);
    padding-top: 30px;
	margin-top: 30px;
}.footer-contact-lists-stone ul{
	list-style: none;
	margin: 0;
	padding: 0;
}.footer-contact-lists-stone ul li{
    color: var(--white-color);
	font-size: 20px;
    line-height: normal;
    margin-bottom: 15px;
}.footer-contact-lists-stone ul li:last-child{
    margin-bottom: 0;
}.footer-contact-lists-stone ul li a{
    color: inherit;
    transition: all 0.4s ease-in-out;
}.footer-contact-lists-stone ul li a:hover{
    color: var(--accent-color);
}.footer-links-box-stone{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 30px;
}.footer-links-stone{
	max-width: 27%;
}.footer-links-stone h2{
	font-size: 20px;
	color: var(--white-color);
	margin-bottom: 25px;
}.footer-links-stone ul{
	list-style: disc;
	padding: 0 0 0 20px;
	margin: 0;
}.footer-links-stone ul li{
	line-height: 1.5em;
	color: var(--white-color);
	margin-bottom: 15px;
}.footer-links-stone ul li:last-child{
	margin-bottom: 0;
}.footer-links-stone ul li::marker{
	color: var(--accent-color);
}.footer-links-stone ul li a{
	color: inherit;
	transition: all 0.4s ease-in-out;
}.footer-links-stone ul li a:hover{
	color: var(--accent-color);
}.footer-working-hours-stone{
	width: 100%;
	max-width: 38%;
}.footer-working-hours-stone ul{
	list-style: none;
	padding: 0;
}.footer-working-hours-stone ul li{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
}.footer-social-links-stone{
	border-top: 1px solid var(--dark-divider-color);
	padding-top: 30px;
	margin-top: 30px;
}.footer-social-links-stone ul{
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
	list-style: none;
	padding: 0;
}.footer-social-links-stone ul li{
	margin-bottom: 0;
}.footer-social-links-stone ul li a{
	width: 40px;
	height: 40px;
	border: 1px solid var(--accent-color);
	border-radius: 50%;
	background: var(--accent-color);
    color: var(--primary-color);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.4s ease-in-out;
}.footer-social-links-stone ul li a:hover{
	background: transparent;
	border-color: var(--dark-divider-color);
    color: var(--white-color);
}.footer-social-links-stone ul li a i{
	font-size: 18px;
    color: inherit;
}.footer-copyright-text-stone{
	text-align: center;
	border-top: 1px solid var(--dark-divider-color);
	padding: 60px 0;
	margin: 60px 0 0;
}.footer-copyright-text-stone p{
	color: var(--white-color);
	margin-bottom: 0;
}@media only screen and (max-width: 1024px){.hero-img-slider-metal:before{
        background: var(--primary-color);
        opacity: 50%;
    }.about-us-image-box-stone{
        max-width: 650px;
        margin: 0 auto 30px;
    }.about-us-btn-stone{
        margin-top: 30px;
    }.about-us-body-image-stone figure img{
        aspect-ratio: 1 / 0.55;
    }.servce-item-image-box-stone figure img{
        aspect-ratio: 1 / 1;
    }.values-image-box-stone{
        max-width: 635px;
        margin: 0 auto 30px;
    }.faqs-content-stone{
        height: auto;
    	margin-bottom: 30px;
	}.faq-image-stone,
    .faq-image-stone figure,
    .faq-image-stone img{
        height: auto;
    }.testimonial-slider-stone .swiper-wrapper .swiper-slide .testimonial-item-stone{
		transform: scale(1);
	}.testimonial-item-stone{
        padding: 30px;
        min-height: 380px;
    }.testimonial-item-author-stone{
        margin-top: 30px;
        padding-top: 30px;
    }.footer-header-stone{
        margin-bottom: 30px;
        padding-bottom: 30px;
    }.about-footer-content-stone{
        margin-top: 15px;
    }.about-footer-stone{
		max-width: 100%;
		margin-bottom: 30px;
	}.footer-contact-lists-stone ul li{
        font-size: 18px;
        margin-bottom: 10px;
    }.footer-links-stone h2{
        margin-bottom: 20px;
    }.footer-links-stone ul li{
        margin-bottom: 10px;
    }.footer-copyright-text-stone{
        margin-top: 30px;
        padding: 30px 0;
    }}@media only screen and (max-width: 991px){.about-us-stone{
        padding: 60px 0;
    }.about-us-image-box-1-stone .about-us-image-stone figure img{
        aspect-ratio: 1 / 1.2;
    }.about-us-image-box-2-stone .about-us-image-stone figure img{
        aspect-ratio: 1 / 1.05;
    }.about-experience-box-content-stone h2{
        font-size: 34px;
    }.about-us-item-box-stone{
        margin-bottom: 30px;
    }.about-us-list-stone ul li{
        margin-bottom: 10px;
    }.about-us-list-stone ul li::before{
        font-size: 16px;
    }.our-service-stone{
        background-position: bottom -30px center;
        background-size: 100% auto;
        padding: 60px 0;
    }.service-item-content-stone{
        padding: 10px;
    }.our-values-stone{
        padding: 60px 0;
    }.values-content-list-stone ul li{
        padding: 15px 15px 15px 40px;
    }.values-content-list-stone ul li::before{
        top: 15px;
        left: 15px;
        font-size: 16px;
    }.values-btn-stone{
        margin-top: 30px;
    }.our-core-features-stone{
		padding: 60px 0;
	}.core-features-item-stone{
		min-height: auto;
		padding: 30px;
	}.core-features-item-stone p{
		padding-top: 15px;
		margin: 15px 0 0;
	}.our-faqs-stone{
    	padding: 60px 0;
	}.faq-body-content-stone h3{
    	font-size: 22px;
	}.faq-body-content-stone p{
    	margin: 10px 0 0;
	}.faq-contact-item-list-stone{
    	padding-top: 20px;
    	margin-top: 20px;
	}.faq-accordion-stone .accordion-item{
        margin-bottom: 20px;
    }.faq-accordion-stone .accordion-header .accordion-button{
		padding: 15px 45px 15px 20px;
	}.faq-accordion-stone .accordion-item .accordion-button::after,
	.faq-accordion-stone .accordion-item .accordion-button.collapsed::after{
		font-size: 18px;
		right: 20px;
	}.faq-accordion-stone .accordion-item .accordion-body{
		padding: 15px 20px;
	}.our-faqs-stone .section-footer-text{
    	margin-top: 40px;
	}.our-testimonials-stone{
		padding: 60px 0;
	}.testimonial-slider-stone .swiper{
        padding-bottom: 50px;
    }.testimonial-item-content-stone p{
		font-size: 18px;
	}.our-testimonials-stone .section-footer-text{
		margin-top: 20px;
	}.main-footer-stone{
        padding: 60px 0 0;
        margin-bottom: 0;
    }.footer-links-stone h2{
        margin-bottom: 20px;
    }.footer-links-stone{
        max-width: 32%;
    }.footer-working-hours-stone{
        max-width: 40%;
    }.footer-social-links-stone{
    	padding-top: 20px;
    	margin-top: 20px;
	}.footer-social-links-stone ul li{
        margin: 0;
    }}@media only screen and (max-width: 767px){.about-us-image-box-1-stone{
        padding-bottom: 70px;
    }.about-us-image-box-1-stone .about-us-image-stone figure{
        margin-right: -140px;
    }.about-experience-box-stone{
        gap: 10px;
        padding: 10px;
        margin: 40px 0px 0 auto;
    }.about-experience-box-stone .icon-box{
        height: 40px;
        width: 40px;
    }.about-experience-box-stone .icon-box img{
        max-width: 20px;
    }.about-experience-box-content-stone{
        width: calc(100% - 50px);
    }.about-experience-box-content-stone h2{
        font-size: 28px;
    }.about-experience-box-content-stone p{
        font-size: 14px;
    }.about-us-item-box-stone{
        padding: 20px;
    }.about-us-item-content-stone h3{
        font-size: 18px;
    }.about-us-item-content-stone{
        width: 100%;
    }.about-us-body-content-stone,
    .about-us-body-image-stone{
        width: 100%;
    }.about-us-btn-stone{
        margin-top: 30px;
    }.about-us-body-image-stone figure,
    .about-us-body-image-stone figure img{
        height: auto;
    }.service-item-content-stone h2{
        font-size: 18px;
    }.values-image-box-stone::before{
        top: 30px;
        right: 25px;
        width: 95px;
        height: 155px;
    }.values-image-box-1-stone{
        padding-bottom: 120px;
    }.values-image-box-1-stone figure{
        margin-right: -80px;
    }.values-item-stone{
        width: 100%;
    }.values-item-content-stone h3{
        font-size: 18px;
    }.values-content-list-stone ul{
        gap: 15px;
    }.values-content-list-stone ul li{
        width: 100%;
        padding: 10px 10px 10px 35px;
    }.values-content-list-stone ul li::before{
        top: 10px;
        left: 10px;
    }.core-features-item-stone{
		gap: 20px;
		padding: 20px;
	}.core-features-item-stone h3{
		font-size: 18px;
	}.core-features-item-stone.box-2{
		min-height: 380px;
	}.faq-image-stone img{
		aspect-ratio: 1 / 0.65;
	}.faq-body-stone{
		padding: 0px 10px 10px;
	}.faq-body-content-stone h3{
        font-size: 20px;
    }.faq-contact-item-list-stone{
		gap: 40px;
	}.faq-contact-item-stone{
		width: 100%;
	}.faq-contact-item-stone::before{
        top: auto;
        right: 0;
        bottom: -20px;
        left: 0;
        height: 1px;
        width: 100%;
	}.faq-contact-item-content-stone h3{
    	font-size: 18px;
	}.faq-accordion-stone .accordion-header .accordion-button{
        padding: 12px 40px 12px 15px;
        font-size: 16px;
    }.faq-accordion-stone .accordion-item .accordion-button::after,
    .faq-accordion-stone .accordion-item .accordion-button.collapsed::after{
        right: 15px;
    }.faq-accordion-stone .accordion-item .accordion-body{
        padding: 12px 15px;
    }.testimonial-item-stone{
		min-height: 300px;
		padding: 20px;
        gap: 20px;
	}.testimonial-item-content-stone p{
        font-size: 16px;
    }.testimonial-item-author-stone{
		padding-top: 20px;
		margin-top: 20px;
	}.testimonial-author-content-stone h2{
		font-size: 18px;
	}.footer-header-stone{
        margin-bottom: 20px;
        padding-bottom: 20px;
    }.footer-contact-lists-stone{
        margin-top: 20px;
        padding-top: 20px;
    }.footer-contact-lists-stone ul li{
        font-size: 16px;
        margin-bottom: 10px;
    }.footer-links-stone{
        max-width: 100%;
    }.footer-links-stone h2{
		font-size: 18px;
        margin-bottom: 15px;
    }.footer-social-links-stone ul{
        justify-content: center;
    }.footer-copyright-text-stone{
        margin-top: 20px;
        padding: 15px 0;
    }}

/* ==========================================================================
   3. ANIMATION
      the only animate.css rules still used (fadeInUp, via WOW.js)
   ========================================================================== */
.animated {
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
}@-webkit-keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 40px, 0);
            transform: translate3d(0, 40px, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}@keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 40px, 0);
            transform: translate3d(0, 40px, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}.fadeInUp {
  -webkit-animation-name: fadeInUp;
          animation-name: fadeInUp;
}

/* ==========================================================================
   4. SITE OVERRIDES
      brand colours and the numbered tweaks from the home page
   ========================================================================== */
:root{
	--primary-color			: #77206D !important;
	--secondary-color		: #FFFFFF !important;
	--bg-color				: #F7F7F7 !important;
	--accent-color			: #EEE4ED !important;
	--text-color			: #6b5c68 !important;
	--white-color			: #FFFFFF !important;
}
.btn-default{ color:#77206D; }
.why-choose-us-metal { background-color:#EEE4ED; }

.our-service-stone { background-color:#ffffff; }
.our-faqs-stone { background-color:#F7F7F7; }
.our-testimonials-stone{ background-color:#EEE4ED; }
.about-us-stone,
.our-values-stone { background-color:#F7F7F7; }
.our-core-features-stone{ background-color:#FFFFFF; }

/* 14. FAQ accordion paragraph colour */
.faq-accordion-stone .accordion-item .accordion-body p{ color: var(--text-color) !important; }

/* 15. Testimonial slide paragraph colour */
.testimonial-item-content-stone p{ color: var(--text-color) !important; }

/* 7. Smaller desktop logo */
.main-header-metal .navbar-brand img{ max-height: 66px; width: auto; }

/* 11. Topbar: smaller, single line, no address */
.topbar-metal{ padding: 8px 0; }
.topbar-contact-info-metal p,
.topbar-contact-info-list-metal ul li{
	font-size: 12px;
	white-space: nowrap;
}
.topbar-contact-info-metal p{ overflow: hidden; text-overflow: ellipsis; }

/* 13. Sticky header */
header.main-header-metal .header-sticky.active{ box-shadow: 0 4px 20px rgba(0,0,0,0.08); }

/* 12. Gallery lightbox hover zoom */
.our-project .project-item-image{ position: relative; overflow: hidden; }
.our-project .project-item-image a{ display:block; position:relative; }
.our-project .project-item-image::after{
	content: "";
	font-family: "Font Awesome 7 Free";
	font-weight: 900;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) scale(0.6);
	width: 56px;
	height: 56px;
	line-height: 56px;
	text-align: center;
	border-radius: 50%;
	background: var(--accent-color);
	color: var(--primary-color);
	font-size: 20px;
	opacity: 0;
	transition: all 0.35s ease-in-out;
	pointer-events: none;
	z-index: 2;
}
.our-project .project-item-image:hover::after{
	opacity: 1;
	transform: translate(-50%, -50%) scale(1);
}
.our-project .project-item-image img{ transition: transform 0.5s ease-in-out; }
.our-project .project-item-image:hover img{ transform: scale(1.08); }

/* 19 & 22. "Get in touch today" / "Get Free Quote" links: readable black instead of low-contrast light accent */
.section-footer-text p a{ color: #000000 !important; }
.section-footer-text p a:hover{ color: var(--primary-color) !important; }

/* 20. Values list icons: services-related icons + visible colour (was near-invisible light-on-light) */
.values-content-list-stone ul li::before{ color: var(--primary-color) !important; }
.values-content-list-stone ul li:hover::before{ color: var(--white-color) !important; }
.values-content-list-stone ul li:nth-child(1)::before{ content: ""; } /* hammer - craftsmanship */
.values-content-list-stone ul li:nth-child(2)::before{ content: ""; } /* handshake - honest local service */
.values-content-list-stone ul li:nth-child(3)::before{ content: ""; } /* shield - integrity & trust */
.values-content-list-stone ul li:nth-child(4)::before{ content: ""; } /* award - reliability & durability */

/* 21 & 29. Reverse-colour buttons (solid primary bg, white text, flips to light on hover) */
.btn-default.btn-reverse{ background: var(--primary-color); color: var(--white-color); }
.btn-default.btn-reverse::before{ filter: brightness(0) invert(1); }
.btn-default.btn-reverse::after{ background: var(--accent-color); }
.btn-default.btn-reverse:hover{ color: var(--primary-color) !important; }
.btn-default.btn-reverse:hover::before{ filter: none; }

/* 26. Topbar paragraph text colour */
.topbar-contact-info-metal p,
.topbar-contact-info-metal p a,
.topbar-contact-info-list-metal ul li,
.topbar-contact-info-list-metal ul li a{ color: #333333 !important; }

/* 28. Desktop Services dropdown colours */
.main-menu ul ul{ background: #77206D !important; }
.main-menu ul ul li a{ color: #FFFFFF !important; }
.main-menu ul ul li a:hover,
.main-menu ul ul li a:focus{ color: var(--accent-color) !important; }

/* 31. Footer Quick Links / Services: smaller text + right-arrow icon instead of a dot */
.footer-links-stone:not(.footer-working-hours-stone) ul{ list-style: none; padding-left: 0; }
.footer-links-stone:not(.footer-working-hours-stone) ul li{
	font-size: 14px;
	padding-left: 20px;
	position: relative;
}
.footer-links-stone:not(.footer-working-hours-stone) ul li::before{
	content: "";
	font-family: "Font Awesome 7 Free";
	font-weight: 900;
	font-size: 11px;
	position: absolute;
	left: 0;
	top: 3px;
	color: var(--accent-color);
}
/* 32. Magic cursor removed — restore the native pointer on everything
   custom.css had set to `cursor: none` for the floating dot. */
.section-title h1,
.section-title h2,
.page-header-box h1,
.how-work-image-list .swiper-slide,
.hero-image-slider-metal .swiper-slide,
.testimonial-slider .swiper-wrapper,
.testimonial-slider-metal .swiper-wrapper,
.testimonial-slider-stone .swiper-wrapper{ cursor: auto !important; }

.video-play-button a,
.video-play-button-metal a span,
.video-play-button-stone a,
.intro-video-stone .video-play-button-stone a span,
.service-item-image a,
.project-item-image figure a,
.team-item-image a,
.team-item-image-stone a,
.post-featured-image a,
.page-gallery-box .photo-gallery a,
.video-gallery-image a,
.video-gallery-image a::after{ cursor: pointer !important; }

/* 33. Google review box removed — hero strapline takes the full width */
.hero-footer-content-metal{ max-width: 100% !important; }

/* 34. Gallery: arched (dome) crops → square photos with rectangular corners */
.our-project .project-item-image figure,
.our-project .project-item-image figure a,
.our-project .project-item-image figure a::before,
.our-project .project-item-image figure img{ border-radius: 20px !important; }
.our-project .project-item-image figure img{ aspect-ratio: 1 / 1 !important; }
/* 35. Gallery panel. The theme paints .our-project with a 70/30 gradient:
   purple for the top 70% of the section, --bg-color for the rest, so the
   final row of tiles overhangs onto the light strip. That only lines up
   at the tile count the template shipped with; at 8 tiles the 70% mark
   lands 74px inside the second row, cutting through it, so the grid reads
   as spilling out of the panel and into the section below. Paint the panel
   solid instead, and close it with the same 120px bottom padding every
   other section uses (it shipped with 0). */
.our-project{
	background-image: url("../images/dark-section-bg-image.png") !important;
	background-color: var(--primary-color) !important;
	background-size: 100% 70% !important;
	background-position: top center !important;
	background-repeat: no-repeat !important;
	padding-bottom: 120px !important;
}
@media only screen and (max-width: 991px){.our-project{ padding-bottom: 60px !important; }}
/* 36. Gallery "View More" button. Dropping .btn-reverse gives the light
   pill that reads on the now-solid purple panel, but the theme's default
   hover fills with --primary-color and whitens the label + arrow, which
   on this panel makes the button dissolve into its own background.
   Lift it to white on hover instead, keeping the label and arrow purple. */
.our-project .btn-default:hover{ color: var(--primary-color) !important; }
.our-project .btn-default:hover::after{ background: var(--white-color) !important; }
.our-project .btn-default:hover::before{ filter: none !important; }

		/* 37. Footer CTA. Replaces the newsletter sign-up under "Ready to transform
		   your living spaces?" -- a quote button and a click-to-call answer that
		   heading, where an email capture did not. */
		.footer-cta-stone{
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			gap: 18px 34px;
			margin-top: 30px;
		}
		.footer-cta-call{
			display: inline-flex;
			align-items: center;
			gap: 14px;
			color: var(--white-color);
			text-decoration: none;
			transition: all 0.3s ease-in-out;
		}
		.footer-cta-call .icon-box{
			display: flex;
			align-items: center;
			justify-content: center;
			width: 52px;
			height: 52px;
			border-radius: 50%;
			background: var(--white-color);
			color: var(--primary-color);
			font-size: 18px;
			transition: all 0.3s ease-in-out;
		}
		.footer-cta-call-text{
			display: flex;
			flex-direction: column;
			font-size: 20px;
			font-weight: 600;
			line-height: 1.2em;
		}
		.footer-cta-call-text small{
			font-size: 13px;
			font-weight: 400;
			color: var(--accent-color);
		}
		.footer-cta-call:hover{ color: var(--accent-color); }
		.footer-cta-call:hover .icon-box{ background: rgba(255, 255, 255, 0.14); color: var(--white-color); }

		@media only screen and (max-width: 767px){
			.footer-cta-stone{ gap: 16px 20px; }
			.footer-cta-call-text{ font-size: 18px; }
		}


		/* 38. Mobile topbar. Under 768px the strapline and the link box (email,
		   quote link, social) are all hidden, leaving the bar with nothing on it.
		   This puts the phone number and the email address back, as one compact
		   row that wraps to two lines on the narrowest phones. */
		.topbar-mobile-contact{ display: none; }

		@media only screen and (max-width: 767px){
			.topbar-contact-info-metal{ display: none; }
			.topbar-mobile-contact{
				display: flex;
				flex-wrap: wrap;
				align-items: center;
				justify-content: center;
				gap: 2px 18px;
			}
			.topbar-mobile-contact a{
				display: inline-flex;
				align-items: center;
				gap: 7px;
				font-size: 12px;
				line-height: 1.6em;
				color: var(--primary-color);
				text-decoration: none;
			}
			.topbar-mobile-contact a i{ font-size: 11px; opacity: 0.75; }
		}


		/* 39. Helpful Tips cards. Once a card is active the photo fades in and the
		   heading, tag and Read More all turn white, but the theme only tints the
		   photo with --primary-color at 50%. Measured against the three photos on
		   these cards, the brightest pixels behind the text leave white at 2.73:1.
		   0.72 is where the worst pixel reaches 4.7:1. Matches the blog listing. */
		.our-blog .post-featured-image a::after{ opacity: 0.72; }


		/* 40. Footer credit link. Nothing in the theme styles a link inside the
		   copyright line, so it fell back to Bootstrap's blue -- 2.11:1 against
		   the dark footer, and off-brand. Underlined as well as recoloured, so
		   colour is not the only thing marking it as a link. */
		.footer-copyright-text-stone p a{
			color: var(--accent-color);
			text-decoration: underline;
			text-underline-offset: 3px;
			transition: color 0.3s ease-in-out;
		}
		.footer-copyright-text-stone p a:hover{ color: var(--white-color); }


		/* 41. Footer CTA button. Dropping .btn-reverse gives the light pill that
		   reads against the purple band (7.67:1), but the theme's hover then
		   fills with --primary-color and whitens the label, which on this band
		   makes the button dissolve into its own background. Lift it to white
		   on hover instead, keeping the label and arrow purple. Same fix as
		   override 36 on the gallery button. */
		.footer-cta-stone .btn-default:hover{ color: var(--primary-color) !important; }
		.footer-cta-stone .btn-default:hover::after{ background: var(--white-color) !important; }
		.footer-cta-stone .btn-default:hover::before{ filter: none !important; }


		/* 42. Active navigation colour. The only thing styling an active item was
		   Bootstrap's own .nav-link.active, which sets --bs-navbar-active-color
		   rather than anything from the brand, and the footer menus were never
		   marked at all. subpage.js now tags the header, off-canvas and footer;
		   these give all three the brand colour. */
		.main-menu .nav-item .nav-link.active,
		.main-menu .nav-item.has-sub > .nav-link.active{
			color: var(--primary-color);
			font-weight: 500;
		}
		.offcanvas-nav li a.active,
		.offcanvas-nav li.has-sub > a.active{
			color: var(--primary-color);
			font-weight: 500;
		}
		/* the footer sits on the dark band, so the accent reads where purple would not */
		.footer-links-stone ul li a.active{
			color: var(--accent-color);
			font-weight: 500;
		}


		/* 43. Footer type scale. The footer body copy ran at the 16px page
		   default and the contact list at 20px (18px under 1024px, 16px under
		   768px) -- bigger than the columns beside it. Everything that is
		   footer body text now sits at 14px, with the copyright line a step
		   below at 13px so the credit reads as a footnote rather than as
		   another list. The column headings, the "Ready to transform your
		   living spaces?" headline and the click-to-call number keep their
		   display sizes; shrinking those would flatten the band. */
		.about-footer-content-stone p,
		.footer-contact-lists-stone ul li,
		.footer-links-stone ul li{
			font-size: 14px;
		}
		.footer-copyright-text-stone p{
			font-size: 13px;
		}

		/* 44. Footer contact icons. The three contact lines were bare strings;
		   a glyph in a fixed 16px gutter makes the column read as a list and
		   keeps the labels aligned whatever the glyph's natural width. The
		   icons inherit from the li, and the footer is already in the
		   dark-section exception list, so they take the accent tint rather
		   than the global dark purple. */
		.footer-contact-lists-stone ul li{
			display: flex;
			align-items: flex-start;
			gap: 10px;
			line-height: 1.5em;
		}
		.footer-contact-lists-stone ul li i{
			flex: 0 0 16px;
			margin-top: 3px;
			font-size: 13px;
			text-align: center;
			color: var(--accent-color);
		}

		/* 46. Service select. The quote form gained a "which service" dropdown.
		   A native select would draw the OS arrow and its own control height,
		   which reads nothing like the rounded fields around it, so the
		   appearance is stripped and a brand chevron painted in its place.
		   The empty placeholder option is styled like a placeholder via
		   :invalid -- while nothing is chosen the select is invalid, because
		   the field is required and that option carries no value. */
		/* the contact/about pages restyle .form-control with a `background`
		   shorthand at (0,3,0), which resets background-image -- so the
		   chevron needs a selector that outranks it, not just a later one. */
		.hero-form select.form-control,
		:is(.contact-page, .about-page) .hero-form select.form-control,
		.contact-form select.form-control{
			appearance: none;
			-webkit-appearance: none;
			background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2377206D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 6 8 11 12 6'/%3E%3C/svg%3E");
			background-repeat: no-repeat;
			background-position: right 16px center;
			background-size: 13px;
			padding-right: 42px;
			cursor: pointer;
		}
		.hero-form select.form-control:invalid{ color: rgb(107 92 104 / 72%); }
		.contact-form select.form-control:invalid{ color: var(--text-color); }
		/* the dropdown list itself is drawn by the OS -- give it readable colours */
		.hero-form select.form-control option,
		.contact-form select.form-control option{
			color: #4d3f49;
			background: var(--white-color);
		}

		/* 47. Final QA pass.
		   a) The theme paints the testimonial stars --accent-color. That was a
		      gold in the stock theme; the brand palette makes it a near-white
		      lavender, so the stars sat at 1.16:1 against the section behind
		      them -- five shapes nobody could see.
		   b) An icon beside brand-coloured text rendered in the global Font
		      Awesome purple instead, so a phone glyph and the number next to
		      it were two slightly different purples. An icon sitting directly
		      inside a link, a list item or one of the site's icon circles now
		      takes that element's own colour. Icons in spans and paragraphs
		      keep the global tint, which leaves the deliberate ones alone:
		      the hero badge, the value sparks, and the about-stats tiles that
		      were lightened to 60% specifically to suit the darker glyph.
		   c) The orbit hint was 55% white on the dark band -- 3.94:1 at 13px,
		      under the 4.5 a line that small needs. */
		.testimonial-item-rating-stone i{ color: var(--primary-color); }

		:is(a, li, .icon-box, .about-marquee-track span) > :is(.fas,.far,.fab,.fa-solid,.fa-regular,.fa-brands,.fa-classic,.fa)::before{
			color: inherit;
		}

		/* .svc-orbit-hint's own rule sits in a later section of the built
		   file, so an equal-specificity override here would lose on order --
		   scoping it to the section outranks it instead. */
		.svc-process .svc-orbit-hint{ color: rgba(255, 255, 255, 0.78); }

		/* 45. Quick Links / Our Services hover. The arrow and its label travel
		   together and the marker brightens to white. Both are transforms, so
		   they composite on the GPU and the column never reflows -- animating
		   padding here would nudge every row below it. */
		.footer-links-stone:not(.footer-working-hours-stone) ul li::before{
			transition: transform 0.3s ease-in-out, color 0.3s ease-in-out;
		}
		.footer-links-stone:not(.footer-working-hours-stone) ul li:hover::before{
			transform: translateX(4px);
			color: var(--white-color);
		}
		.footer-links-stone:not(.footer-working-hours-stone) ul li a{
			display: inline-block;
			transition: transform 0.3s ease-in-out, color 0.4s ease-in-out;
		}
		.footer-links-stone:not(.footer-working-hours-stone) ul li:hover a{
			transform: translateX(6px);
			color: var(--accent-color);
		}

		@media (prefers-reduced-motion: reduce){
			.footer-links-stone:not(.footer-working-hours-stone) ul li::before,
			.footer-links-stone:not(.footer-working-hours-stone) ul li a{
				transition: none;
			}
			.footer-links-stone:not(.footer-working-hours-stone) ul li:hover::before,
			.footer-links-stone:not(.footer-working-hours-stone) ul li:hover a{
				transform: none;
			}
		}


/* ==========================================================================
   5. OFF-CANVAS MOBILE MENU
      mobile navigation, under 992px
   ========================================================================== */
/* -- Bootstrap offcanvas primitives (trimmed to the .offcanvas-end case) -- */
.offcanvas{
	position: fixed;
	bottom: 0;
	z-index: 1045;
	display: flex;
	flex-direction: column;
	max-width: 100%;
	visibility: hidden;
	background-color: var(--white-color);
	background-clip: padding-box;
	outline: 0;
	transition: transform .3s ease-in-out;
}
.offcanvas.offcanvas-end{
	top: 0;
	right: 0;
	width: 320px;
	transform: translateX(100%);
}
.offcanvas.showing,
.offcanvas.show:not(.hiding){ transform: none; }
.offcanvas.showing,
.offcanvas.hiding,
.offcanvas.show{ visibility: visible; }
.offcanvas-backdrop{
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1040;
	width: 100vw;
	height: 100vh;
	background-color: #000;
}
.offcanvas-backdrop.fade{ opacity: 0; transition: opacity .15s linear; }
.offcanvas-backdrop.show{ opacity: .5; }
.offcanvas-header{
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20px 24px;
}
.offcanvas-body{
	flex-grow: 1;
	padding: 8px 24px 28px;
	overflow-y: auto;
}
@media (prefers-reduced-motion: reduce){.offcanvas, .offcanvas-backdrop.fade{ transition: none; }}

/* -- Hamburger trigger. .navbar-toggle is already display:block under 992px
      and display:none above it, so the button inherits the right breakpoint. -- */
.navbar-toggle .offcanvas-toggle{
	display: block;
	width: 42px;
	height: 42px;
	padding: 10px 8px;
	border: 0;
	background: transparent;
	cursor: pointer;
}
.navbar-toggle .offcanvas-toggle span{
	display: block;
	width: 100%;
	height: 2px;
	border-radius: 2px;
	background: var(--primary-color);
	transition: all .3s ease-in-out;
}
.navbar-toggle .offcanvas-toggle span + span{ margin-top: 5px; }

/* -- Panel chrome -- */
.site-offcanvas{ background: var(--white-color); }
.site-offcanvas .offcanvas-header{ border-bottom: 1px solid var(--accent-color); }
.site-offcanvas .offcanvas-brand img{ max-height: 46px; width: auto; }
.site-offcanvas .offcanvas-close{
	width: 38px;
	height: 38px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--accent-color);
	color: var(--primary-color);
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
}
.site-offcanvas .offcanvas-close:hover{ background: var(--primary-color); color: var(--white-color); }

/* -- Links -- */
.offcanvas-nav{ list-style: none; margin: 0; padding: 0; }
.offcanvas-nav li{ position: relative; }
.offcanvas-nav > li{ border-bottom: 1px solid var(--accent-color); }
.offcanvas-nav a{
	display: block;
	padding: 14px 40px 14px 0;
	font-size: 16px;
	font-weight: 500;
	color: var(--primary-color);
	text-decoration: none;
}
.offcanvas-nav a:hover{ color: var(--text-color); }
.offcanvas-nav .offcanvas-sub-toggle{
	position: absolute;
	top: 8px;
	right: 0;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--accent-color);
	cursor: pointer;
}
.offcanvas-nav .offcanvas-sub-toggle::before{
	content: "\f078";
	font-family: "Font Awesome 7 Free";
	font-weight: 900;
	font-size: 11px;
	color: var(--primary-color);
	transition: transform .3s ease-in-out;
	display: inline-block;
}
.offcanvas-nav .offcanvas-sub-toggle:not(.collapsed)::before{ transform: rotate(180deg); }
.offcanvas-nav ul{ list-style: none; margin: 0; padding: 0 0 10px 14px; }
.offcanvas-nav ul a{
	padding: 9px 0;
	font-size: 14px;
	font-weight: 400;
	color: var(--text-color);
}
.offcanvas-nav ul a:hover{ color: var(--primary-color); }
.offcanvas-btn{ margin-top: 26px; }
.offcanvas-btn .btn-default{ display: inline-block; }

/* ==========================================================================
   6. PAGE HERO
   ========================================================================== */
.page-hero{
	position: relative;
	padding: 180px 0 110px;
	overflow: hidden;
	z-index: 1;
}
.page-hero .page-hero-bg{
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-image: url('../images/Plantation%20Shutters/mangerton%20bed%20shutters.jpg');
	background-size: cover;
	background-position: center center;
	z-index: -2;
}
.page-hero::before{
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: linear-gradient(100deg, #77206db8 18%, rgb(84 53 82 / 82%) 46%, rgb(122 97 119 / 62%) 100%);
    z-index: -1;
    opacity: 0.7;
}

/* breadcrumb */
.page-breadcrumb{ margin-bottom: 26px; }
.page-breadcrumb ol{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.page-breadcrumb li{
	position: relative;
	font-size: 14px;
	color: var(--accent-color);
}
.page-breadcrumb li + li::before{
	content: '\f054';
	font-family: "Font Awesome 7 Free";
	font-weight: 900;
	font-size: 9px;
	margin-right: 10px;
	opacity: 0.7;
}
.page-breadcrumb a{
	color: var(--accent-color);
	text-decoration: none;
	transition: all 0.3s ease-in-out;
}
.page-breadcrumb a:hover{ color: var(--white-color); }
.page-breadcrumb li[aria-current]{ color: var(--white-color); font-weight: 500; }

/* Title block. The eyebrow, heading and lead sit inside .section-title so they
   inherit the same dark-section treatment the home page hero uses. */
.page-hero .section-title{ margin-bottom: 34px; }
.page-hero-title{
	font-size: 54px;
	font-weight: 500;
	line-height: 1.15em;
	color: var(--white-color);
	margin: 0 0 22px;
}
.page-hero .section-title p{
	max-width: 660px;
	font-size: 18px;
	line-height: 1.65em;
	opacity: 0.92;
	margin-bottom: 0;
}
.page-hero-btn{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 30px;
}
.page-hero-call{
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-size: 18px;
	font-weight: 500;
	color: var(--white-color);
	text-decoration: none;
	transition: all 0.3s ease-in-out;
}
.page-hero-call i{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.16);
	font-size: 15px;
}
.page-hero-call:hover{ color: var(--accent-color); }
.page-hero-call:hover i{ background: var(--white-color); color: var(--primary-color); }

/* trust strip */
.page-hero-trust{
	display: flex;
	flex-wrap: wrap;
	gap: 14px 36px;
	margin: 52px 0 0;
	padding: 26px 0 0;
	border-top: 1px solid rgba(255, 255, 255, 0.22);
	list-style: none;
}
.page-hero-trust li{
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 15px;
	font-weight: 500;
	color: var(--white-color);
}
.page-hero-trust i{ color: var(--accent-color); font-size: 16px; }

/* ==========================================================================
   7. INTRO
   ========================================================================== */
.svc-intro{ padding: 90px 0; }
.svc-intro-images{
	position: relative;
}
.svc-intro-image-main{
	position: relative;
	display: block;
	border-radius: 24px;
	overflow: hidden;
	margin: 0;
}
.svc-intro-image-main img{
	width: 100%;
	aspect-ratio: 1 / 0.86;
	object-fit: cover;
}
.svc-intro-badge{
	position: absolute;
	top: 26px;
	right: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 20px 24px;
	border-radius: 18px;
	background: var(--primary-color);
	box-shadow: 0 18px 40px rgba(119, 32, 109, 0.28);
}
.svc-intro-badge-num{
	font-size: 30px;
	font-weight: 600;
	line-height: 1;
	color: var(--white-color);
}
.svc-intro-badge-text{
	font-size: 13px;
	line-height: 1.45em;
	color: var(--accent-color);
}
.svc-intro-content{ padding-left: 30px; }
.svc-intro-content .section-title{ margin-bottom: 20px; }
.svc-intro-content p{ margin-bottom: 18px; }
.svc-intro-btn{ margin-top: 12px; }

/* the brochure sits on its own line, centred under both columns */
.svc-intro-pdf{
	display: flex;
	justify-content: center;
	margin-top: 54px;
}

/* ==========================================================================
   8. BENEFITS
   ========================================================================== */
.svc-benefits{
	padding: 90px 0;
	background-color: var(--bg-color);
	background-image: url('../images/dot-bg-pattern.png');
	background-repeat: no-repeat;
	background-position: center center;
}
.svc-benefit-grid{ margin-top: -30px; }
.svc-benefit-item,
.svc-benefit-cta{
	position: relative;
	height: calc(100% - 30px);
	margin-top: 30px;
	padding: 38px 32px 34px;
	border-radius: 22px;
	background: var(--white-color);
	overflow: hidden;
	transition: all 0.4s ease-in-out;
	z-index: 1;
}
.svc-benefit-item::after{
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 4px;
	background: var(--primary-color);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.4s ease-in-out;
}
.svc-benefit-item:hover{
	transform: translateY(-6px);
	box-shadow: 0 22px 46px rgba(24, 24, 24, 0.08);
}
.svc-benefit-item:hover::after{ transform: scaleX(1); }
.svc-benefit-index{
	position: absolute;
	top: 26px;
	right: 30px;
	font-size: 34px;
	font-weight: 600;
	line-height: 1;
	color: var(--accent-color);
	transition: all 0.4s ease-in-out;
}
.svc-benefit-item:hover .svc-benefit-index{ color: var(--primary-color); opacity: 0.22; }
.svc-benefit-item .icon-box{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 62px;
	height: 62px;
	margin-bottom: 24px;
	border-radius: 50%;
	background: var(--accent-color);
	color: var(--primary-color);
	font-size: 24px;
	transition: all 0.4s ease-in-out;
}
.svc-benefit-item:hover .icon-box{ background: var(--primary-color); color: var(--white-color); }
.svc-benefit-item h3{
	font-size: 21px;
	font-weight: 500;
	line-height: 1.3em;
	color: var(--primary-color);
	margin-bottom: 12px;
}
.svc-benefit-item p{ margin-bottom: 0; }

/* inline CTA card that closes the grid */
.svc-benefit-cta{
	display: flex;
	flex-direction: column;
	justify-content: center;
	background: var(--primary-color);
	background-image: url('../images/dark-section-bg-image.png');
	background-repeat: no-repeat;
	background-position: top center;
	background-size: cover;
}
.svc-benefit-cta h3{
	font-size: 22px;
	font-weight: 500;
	line-height: 1.3em;
	color: var(--white-color);
	margin-bottom: 12px;
}
.svc-benefit-cta p{
	color: var(--accent-color);
	margin-bottom: 26px;
}
.svc-benefit-cta .btn-default{ align-self: flex-start; }

/* ==========================================================================
   9. ROOM BY ROOM
   ========================================================================== */
.svc-rooms{ padding: 90px 0; }
.svc-rooms-content{ padding-right: 40px; }
.svc-rooms-content > p{ margin-bottom: 26px; }
.svc-room-list{
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
	margin: 0 0 34px;
	padding: 0;
	list-style: none;
}
.svc-room-list li{
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 16px 20px;
	border-radius: 14px;
	background: var(--accent-color);
	font-size: 16px;
	font-weight: 500;
	color: var(--primary-color);
	transition: all 0.3s ease-in-out;
}
.svc-room-list li:hover{ background: var(--bg-color); }
.svc-room-list i{
	color: var(--primary-color);
	font-size: 17px;
	width: 22px;
	text-align: center;
}
.svc-rooms-image{ position: relative; padding-bottom: 46px; }
.svc-rooms-image figure{
	display: block;
	margin: 0;
	border-radius: 24px;
	overflow: hidden;
}
.svc-rooms-image img{
	width: 100%;
	aspect-ratio: 1 / 0.82;
	object-fit: cover;
}
.svc-rooms-note{
	position: absolute;
	left: 30px;
	bottom: 0;
	display: flex;
	align-items: center;
	gap: 16px;
	max-width: 330px;
	padding: 20px 24px;
	border-radius: 18px;
	background: var(--white-color);
	box-shadow: 0 18px 40px rgba(24, 24, 24, 0.12);
}
.svc-rooms-note .icon-box{
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 46px;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: var(--accent-color);
	color: var(--primary-color);
	font-size: 17px;
}
.svc-rooms-note p{
	margin: 0;
	font-size: 14px;
	line-height: 1.5em;
}

/* short intro + three-image row that close the section */
.svc-rooms-gallery-head{
	margin: 58px 0 32px;
	padding-top: 30px;
	border-top: 1px solid rgb(119 32 109 / 12%);
}
.svc-rooms-gallery-head p{
	max-width: 960px;
	font-size: 17px;
	line-height: 1.7em;
	margin-bottom: 0;
}
.svc-rooms-gallery{ margin-top: 0; }
.svc-rooms-thumb{
	display: block;
	margin: 0;
	border-radius: 20px;
	overflow: hidden;
}
.svc-rooms-thumb img{
	width: 100%;
	aspect-ratio: 1 / 0.82;
	object-fit: cover;
	display: block;
	transition: transform 0.6s ease-in-out;
}
.svc-rooms-thumb:hover img{ transform: scale(1.06); }

/* ==========================================================================
   10. PROCESS -- ORBITAL TIMELINE
      Orbit on the left, step detail on the right. A photographed interior sits
      behind a brand overlay, weighted darker on the right so the copy stays
      readable. The orbit turns continuously; selecting a step highlights it
      and swaps the panel beside it.

      JS only writes --x / --y / --o / --z onto each node, and those are read
      ONLY inside the min-width:992px query, so below that the same markup
      falls back to a stacked list with every panel open.
   ========================================================================== */
.svc-process{
	position: relative;
	padding: 90px 0;
	background-color: var(--primary-color);
	overflow: hidden;
}

/* photographed backdrop */
.svc-process-bg{
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-image: url('../images/Plantation%20Shutters/mangerton%20shutters.jpg');
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	transform: scale(1.04);
	z-index: 0;
}
/* brand overlay -- lighter over the orbit, deeper behind the copy */
.svc-process::before{
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: linear-gradient(90deg, rgb(119 32 109 / 66%) 0%, rgb(143 58 133 / 58%) 42%, rgb(147 53 136 / 65%) 78%, rgb(110 40 101 / 69%) 100%);
	z-index: 1;
}
/* core glow + vignette */
.svc-process::after{
	content: '';
	position: absolute;
	top: 50%;
	left: 30%;
	width: 900px;
	height: 900px;
	transform: translate(-50%, -50%);
	background: radial-gradient(circle, rgba(238, 228, 237, 0.24) 0%, rgba(238, 228, 237, 0.07) 40%, rgba(119, 32, 109, 0) 70%);
	pointer-events: none;
	z-index: 1;
}
.svc-process > .container{ position: relative; z-index: 2; }
.svc-process .section-title h2{ color: var(--white-color); }

/* ---------- stage ---------- */
.svc-orbit-stage{
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 540px;
}

/* ---------- core ---------- */
.svc-orbit-core{
	position: absolute;
	top: 50%;
	left: 50%;
	width: 92px;
	height: 92px;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: radial-gradient(circle at 32% 28%, #ffffff 0%, var(--accent-color) 34%, var(--primary-color) 78%);
	box-shadow: 0 0 40px rgba(238, 228, 237, 0.5), 0 0 100px rgba(238, 228, 237, 0.2);
	display: flex;
	align-items: center;
	justify-content: center;
	animation: svcBreathe 4s ease-in-out infinite;
	z-index: 3;
}
.svc-orbit-core-ring{
	position: absolute;
	top: 50%;
	left: 50%;
	width: 92px;
	height: 92px;
	margin: -46px 0 0 -46px;
	border: 1px solid rgba(255, 255, 255, 0.55);
	border-radius: 50%;
	animation: svcPing 3.2s cubic-bezier(0, 0, 0.2, 1) infinite;
}
.svc-orbit-core-ring:nth-child(2){ animation-delay: 1.1s; opacity: 0.6; }
.svc-orbit-core-dot{
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.92);
	backdrop-filter: blur(6px);
}

/* ---------- orbit rings ---------- */
.svc-orbit-ring{
	position: absolute;
	top: 50%;
	left: 50%;
	width: 400px;
	height: 400px;
	margin: -200px 0 0 -200px;
	border: 1px dashed rgba(255, 255, 255, 1);
	border-radius: 50%;
	animation: svcSpin 90s linear infinite;
}
.svc-orbit-ring-inner{
	width: 272px;
	height: 272px;
	margin: -136px 0 0 -136px;
	border-style: solid;
	border-color: rgba(255, 255, 255, 1);
	animation: svcSpinBack 60s linear infinite;
}

/* ---------- beam from core to the selected node ---------- */
.svc-orbit-beam{
	position: absolute;
	top: 50%;
	left: 50%;
	width: 200px;
	height: 1px;
	transform-origin: 0 50%;
	transform: rotate(var(--beam, 0deg));
	background: linear-gradient(90deg, rgba(255, 255, 255, 0.9), rgba(238, 228, 237, 0));
	opacity: 0.9;
	pointer-events: none;
	z-index: 2;
}

/* ---------- nodes ---------- */
.svc-orbit-node{
	position: absolute;
	top: 50%;
	left: 50%;
	width: 64px;
	margin: -32px 0 0 -32px;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	z-index: 4;
}
.svc-orbit-node-glow{
	position: absolute;
	top: 50%;
	left: 50%;
	width: 128px;
	height: 128px;
	margin: -64px 0 0 -64px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255, 255, 255, 0.24) 0%, rgba(255, 255, 255, 0) 68%);
	opacity: 0;
	transition: opacity 0.4s ease-in-out;
	pointer-events: none;
}
.svc-orbit-node-dot{
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, 0.45);
	background: rgba(52, 9, 47, 0.62);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	color: var(--white-color);
	font-size: 21px;
	transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.svc-orbit-node-label{
	position: absolute;
	top: 76px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	gap: 8px;
	white-space: nowrap;
	font-size: 13px;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.78);
	transition: all 0.4s ease-in-out;
}
.svc-orbit-node-label b{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 21px;
	height: 21px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.16);
	font-size: 11px;
	font-weight: 600;
	color: var(--white-color);
}
.svc-orbit-node:hover .svc-orbit-node-dot,
.svc-orbit-node:focus-visible .svc-orbit-node-dot{
	border-color: var(--white-color);
	background: rgba(238, 228, 237, 0.26);
}
.svc-orbit-node:hover .svc-orbit-node-glow{ opacity: 1; }
.svc-orbit-node:focus-visible{ outline: 2px solid var(--white-color); outline-offset: 6px; border-radius: 50%; }

/* neighbours of the selected step */
.svc-orbit-node.is-related .svc-orbit-node-dot{
	border-color: rgba(255, 255, 255, 0.85);
	background: rgba(238, 228, 237, 0.28);
	animation: svcPulse 2.4s ease-in-out infinite;
}
.svc-orbit-node.is-related .svc-orbit-node-label{ color: rgba(255, 255, 255, 0.95); }

/* the selected step */
.svc-orbit-node.is-active{ z-index: 220 !important; opacity: 1 !important; }
.svc-orbit-node.is-active .svc-orbit-node-dot{
	background: var(--white-color);
	border-color: var(--white-color);
	color: var(--primary-color);
	transform: scale(1.3);
	box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.14), 0 0 44px rgba(255, 255, 255, 0.5);
}
.svc-orbit-node.is-active .svc-orbit-node-glow{ opacity: 1; }
.svc-orbit-node.is-active .svc-orbit-node-label{ color: var(--white-color); font-size: 14px; top: 88px; }
.svc-orbit-node.is-active .svc-orbit-node-label b{ background: var(--white-color); color: var(--primary-color); }

/* ---------- detail column ---------- */
.svc-orbit-aside{ padding-left: 24px; }
.svc-orbit-aside .section-title{ margin-bottom: 28px; }
.svc-orbit-panels{ position: relative; }
.svc-orbit-panel{
	padding: 32px 34px 34px;
	border-radius: 24px;
	border: 1px solid rgba(255, 255, 255, 0.22);
	background: rgb(98 19 89 / 85%);
	backdrop-filter: blur(18px);
	-webkit-backdrop-filter: blur(18px);
	box-shadow: 0 26px 60px rgba(20, 0, 17, 0.4);
	animation: svcPanelIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.svc-orbit-panel[hidden]{ display: none; }
.svc-orbit-panel-head{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 16px;
}
.svc-orbit-panel-step{
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.6);
}
.svc-orbit-panel-tag{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 14px;
	border-radius: 100px;
	background: rgba(255, 255, 255, 0.16);
	font-size: 12px;
	font-weight: 500;
	color: var(--white-color);
}
.svc-orbit-panel h3{
	font-size: 25px;
	font-weight: 500;
	line-height: 1.3em;
	color: var(--white-color);
	margin-bottom: 12px;
}
.svc-orbit-panel > p{
	font-size: 15px;
	line-height: 1.68em;
	color: rgba(255, 255, 255, 0.84);
	margin-bottom: 0;
}

/* progress meter */
.svc-orbit-meter{ margin-top: 24px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, 0.16); }
.svc-orbit-meter-head{
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 10px;
	font-size: 13px;
	color: rgba(255, 255, 255, 0.8);
}
.svc-orbit-meter-head i{ margin-right: 8px; color: var(--accent-color); }
.svc-orbit-meter-value{ font-weight: 600; color: var(--white-color); }
.svc-orbit-meter-track{
	height: 5px;
	border-radius: 100px;
	background: rgba(255, 255, 255, 0.16);
	overflow: hidden;
}
.svc-orbit-meter-track span{
	display: block;
	height: 100%;
	border-radius: 100px;
	background: linear-gradient(90deg, var(--accent-color), var(--white-color));
	box-shadow: 0 0 14px rgba(255, 255, 255, 0.5);
	transition: width 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

/* connected steps */
.svc-orbit-linked{ margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, 0.16); }
.svc-orbit-linked h4{
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 12px;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.62);
}
.svc-orbit-linked-btns{ display: flex; flex-wrap: wrap; gap: 8px; }
.svc-orbit-jump{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 7px 14px;
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 100px;
	background: transparent;
	font-size: 13px;
	color: rgba(255, 255, 255, 0.88);
	cursor: pointer;
	transition: all 0.3s ease-in-out;
}
.svc-orbit-jump:hover{ background: var(--white-color); border-color: var(--white-color); color: var(--primary-color); }
.svc-orbit-jump i{ font-size: 9px; }

.svc-orbit-hint{
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 20px 0 0;
	font-size: 13px;
	color: rgba(255, 255, 255, 0.55);
}
.svc-orbit-hint i{ font-size: 12px; }

/* ---------- keyframes ---------- */
@keyframes svcPing{
	0%{ transform: scale(1); opacity: 0.85; }
	75%, 100%{ transform: scale(2.1); opacity: 0; }
}
@keyframes svcPulse{
	0%, 100%{ opacity: 1; }
	50%{ opacity: 0.55; }
}
@keyframes svcBreathe{
	0%, 100%{ box-shadow: 0 0 40px rgba(238, 228, 237, 0.5), 0 0 100px rgba(238, 228, 237, 0.2); }
	50%{ box-shadow: 0 0 56px rgba(238, 228, 237, 0.72), 0 0 130px rgba(238, 228, 237, 0.3); }
}
@keyframes svcSpin{ from{ transform: rotate(0deg); } to{ transform: rotate(360deg); } }
@keyframes svcSpinBack{ from{ transform: rotate(360deg); } to{ transform: rotate(0deg); } }
@keyframes svcPanelIn{
	from{ opacity: 0; transform: translateX(18px); }
	to{ opacity: 1; transform: none; }
}

/* ---------- desktop only: consume the orbit maths ---------- */
@media only screen and (min-width: 992px){
	.svc-orbit-node{
		transform: translate(var(--x, 0px), var(--y, 0px));
		opacity: var(--o, 1);
		z-index: var(--z, 4);
	}
	.svc-orbit.is-paused .svc-orbit-ring{ animation-play-state: paused; }
}

/* the columns only sit side by side from xl up */

@media only screen and (max-width: 1199px){
	.svc-orbit-aside{ padding-left: 0; margin-top: 40px; }
	.svc-orbit-aside .section-title{ text-align: center; }
	.svc-orbit-stage{ min-height: 500px; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
	.svc-orbit-core,
	.svc-orbit-core-ring,
	.svc-orbit-ring,
	.svc-orbit-node.is-related .svc-orbit-node-dot,
	.svc-orbit-panel{ animation: none; }
	.svc-orbit-node,
	.svc-orbit-meter-track span{ transition: none; }
}

/* ==========================================================================
   11. FAQ
   ========================================================================== */
.svc-faq{ padding: 90px 0; background-color: var(--bg-color); }
.svc-faq-accordion .accordion-item{ margin-bottom: 16px; }
.svc-faq-accordion .accordion-item:last-child{ margin-bottom: 0; }

/* ==========================================================================
   12. CTA BAND
   ========================================================================== */
.svc-cta{ padding: 0 0 90px; background-color: var(--bg-color); }
.svc-cta-box{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
	padding: 62px 68px;
	border-radius: 28px;
	background-color: var(--accent-color);
	background-image: url('../images/dot-bg-pattern.png');
	background-repeat: no-repeat;
	background-position: center center;
}
.svc-cta-content{ max-width: 620px; }
.svc-cta-content .section-sub-title{ background: var(--white-color); }
.svc-cta-content h2{
	font-size: 40px;
	font-weight: 500;
	line-height: 1.2em;
	color: var(--primary-color);
	margin: 0 0 14px;
}
.svc-cta-content p{ margin-bottom: 0; }
.svc-cta-actions{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 18px 30px;
}
.svc-cta-call{
	display: inline-flex;
	align-items: center;
	gap: 14px;
	color: var(--primary-color);
	text-decoration: none;
	transition: all 0.3s ease-in-out;
}
.svc-cta-call .icon-box{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: var(--white-color);
	color: var(--primary-color);
	font-size: 18px;
	transition: all 0.3s ease-in-out;
}
.svc-cta-call-text{
	display: flex;
	flex-direction: column;
	font-size: 20px;
	font-weight: 600;
	line-height: 1.2em;
}
.svc-cta-call-text small{
	font-size: 13px;
	font-weight: 400;
	color: var(--text-color);
}
.svc-cta-call:hover .icon-box{ background: var(--primary-color); color: var(--white-color); }

/* -- brochure download button ------------------------------------------
   A supplied graphic rather than a styled pill. The asset is 768px wide so
   it stays crisp on a 2x screen at its ~320px display size; line-height 0
   stops the inline image leaving a gap under the link box. */
.svc-pdf-link{
	display: inline-block;
	line-height: 0;
	transition: transform 0.3s ease-in-out, filter 0.3s ease-in-out;
}
.svc-pdf-link img{
	display: block;
	width: 230px;
	max-width: 100%;
	height: auto;
}
.svc-pdf-link:hover{ transform: translateY(-2px); filter: brightness(1.06); }

@media (prefers-reduced-motion: reduce){
	.svc-pdf-link{ transition: none; }
	.svc-pdf-link:hover{ transform: none; }
}

/* ==========================================================================
   13. RESPONSIVE
      Breakpoints mirror the home page (1200 / 991 / 767).
   ========================================================================== */
@media only screen and (max-width: 1200px){
	.page-hero{ padding: 150px 0 90px; }
	.page-hero-title{ font-size: 44px; }
	.svc-intro-content{ padding-left: 0; }
	.svc-rooms-content{ padding-right: 0; }
	.svc-cta-box{ padding: 50px 46px; }
	.svc-cta-content h2{ font-size: 34px; }
}

@media only screen and (max-width: 991px){
	.page-hero{ padding: 120px 0 70px; }
	.page-hero-title{ font-size: 34px; }
	.page-hero .section-title p{ font-size: 16px; }
	.page-hero-trust{ margin-top: 36px; gap: 12px 24px; }

	.svc-intro,
	.svc-benefits,
	.svc-rooms,
	.svc-process,
	.svc-faq{ padding: 30px 0; }
	.svc-cta{ padding: 0 0 30px; }

	.svc-intro-images{ margin-bottom: 40px; }
	.svc-intro-content{ padding-left: 0; }

	/* stacked fallback: no orbit maths runs under 992px, so the nodes and
	   panels simply flow down the page */
	.svc-orbit-stage{ display: block; min-height: 0; margin-bottom: 30px; }
	.svc-orbit-core,
	.svc-orbit-ring,
	.svc-orbit-beam{ display: none; }
	.svc-orbit-node{
		position: relative;
		top: auto;
		left: auto;
		width: 100%;
		margin: 0 0 14px;
		display: flex;
		align-items: center;
		gap: 16px;
		text-align: left;
	}
	.svc-orbit-node-dot{ width: 54px; height: 54px; flex: 0 0 54px; font-size: 18px; }
	.svc-orbit-node-label{ position: static; transform: none; font-size: 15px; color: var(--white-color); }
	.svc-orbit-node.is-active .svc-orbit-node-label{ top: auto; }
	.svc-orbit-node.is-active .svc-orbit-node-dot{ transform: none; }
	.svc-orbit-aside{ padding-left: 0; margin-top: 0; }
	.svc-orbit-aside .section-title{ text-align: left; }
	.svc-orbit-panel{ margin-bottom: 14px; padding: 26px 24px 28px; }
	.svc-orbit-panel h3{ font-size: 21px; }
	.svc-orbit-hint{ display: none; }

	.svc-rooms-image{ margin-top: 40px; }
	.svc-cta-box{ padding: 42px 34px; }
	.svc-cta-content h2{ font-size: 28px; }
}

@media only screen and (max-width: 767px){
	.page-hero{ padding: 100px 0 56px; }
	.page-hero-title{ font-size: 28px; }
	.page-hero-btn{ gap: 14px 20px; }
	.page-hero-trust li{ font-size: 14px; width: 100%; }

	.svc-intro-badge{ top: auto; bottom: 10px; right: 0; padding: 16px 18px; }
	.svc-intro-badge-num{ font-size: 24px; }

	.svc-benefit-item,
	.svc-benefit-cta{ padding: 30px 26px 28px; }
	.svc-benefit-index{ font-size: 28px; top: 22px; right: 24px; }

	.svc-room-list{ grid-template-columns: 1fr; }
	.svc-rooms-gallery-head{ margin: 34px 0 22px; padding-top: 24px; }
	.svc-rooms-gallery-head p{ font-size: 15px; }
	.svc-rooms-note{ position: static; max-width: 100%; margin-top: 18px; }
	.svc-rooms-image{ padding-bottom: 0; }

	.svc-cta-box{ padding: 34px 24px; }
	.svc-cta-content h2{ font-size: 24px; }
	.svc-cta-actions{ width: 100%; }
}

/* ==========================================================================
   14. HERO QUOTE FORM
      Sits in the right-hand column of the page hero. The column is col-xl-5,
      so below 1200px it stacks and the form lands directly after the hero
      copy -- which is the mobile order we want.

      The panel is a light translucent card, so everything inside it is dark
      on light; only the submit button stays solid purple so it still reads
      against the panel.
   ========================================================================== */
.hero-form{
	position: relative;
	padding: 62px 34px 30px;
	/* Arched top -- a nod to the arched windows this page leads on. */
	border-radius: 170px 170px 26px 26px;
	border: 1px solid rgb(255 255 255 / 55%);
	background: rgb(255 248 254 / 58%);
	backdrop-filter: blur(18px);
	-webkit-backdrop-filter: blur(18px);
	box-shadow: 0 30px 70px rgba(20, 0, 17, 0.28);
	overflow: hidden;
	isolation: isolate;
	z-index: 2;
}

/* Shutter-louvre texture. It sits ABOVE the panel fill but BELOW the content,
   so the background colour stays exactly as specified and the photo only
   reads as a faint grain. */
.hero-form::before{
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-image: url('../images/Plantation%20Shutters/IMG20250813171022%20copy.jpg');
	background-size: cover;
	background-position: center top;
	background-repeat: no-repeat;
	opacity: 0.16;
	z-index: 0;
	pointer-events: none;
}
.hero-form > *{ position: relative; z-index: 1; }

/* a soft highlight following the arch, so the curve reads as glass */
.hero-form::after{
	content: '';
	position: absolute;
	top: 0;
	left: 50%;
	width: 340px;
	height: 340px;
	transform: translate(-50%, -52%);
	border-radius: 50%;
	background: radial-gradient(circle, rgb(255 255 255 / 55%) 0%, rgb(255 255 255 / 0) 68%);
	z-index: 0;
	pointer-events: none;
}

/* -- heading -- */
.hero-form-head{ margin-bottom: 22px; text-align: center; }
.hero-form-badge{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 14px;
	padding: 7px 16px;
	border-radius: 100px;
	background: var(--primary-color);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.04em;
	color: var(--white-color);
}
.hero-form-badge i{ font-size: 12px; color: var(--accent-color); }
.hero-form-head h3{
	font-size: 26px;
	font-weight: 500;
	line-height: 1.25em;
	color: var(--primary-color);
	margin-bottom: 8px;
}
.hero-form-head p{
	font-size: 14px;
	line-height: 1.6em;
	/* darker than --text-color: the panel is translucent, so whatever sits
	   behind it changes the effective contrast as the hero photo varies */
	color: #43363e;
	margin-bottom: 0;
}

/* -- fields -- */
.hero-form .form-control{
	height: 50px;
	padding: 0 18px;
	border: 1px solid rgb(119 32 109 / 18%);
	border-radius: 12px;
	background: rgb(255 255 255 / 82%);
	font-size: 14px;
	color: #4d3f49;
	box-shadow: none;
	transition: all 0.3s ease-in-out;
}
.hero-form textarea.form-control{
	height: auto;
	padding: 14px 18px;
	resize: none;
}
.hero-form .form-control::placeholder{ color: rgb(107 92 104 / 72%); }
.hero-form .form-control:focus{
	border-color: var(--primary-color);
	background: var(--white-color);
	color: #4d3f49;
	outline: none;
	box-shadow: 0 0 0 3px rgb(119 32 109 / 12%);
}
/* the browser's autofill styling would otherwise repaint these */
.hero-form .form-control:-webkit-autofill,
.hero-form .form-control:-webkit-autofill:focus{
	-webkit-text-fill-color: #4d3f49;
	-webkit-box-shadow: 0 0 0 1000px #fffdff inset;
	caret-color: var(--primary-color);
}

/* validator messages */
.hero-form .help-block{
	margin: 6px 0 0;
	font-size: 12px;
	line-height: 1.4em;
	color: #b3245f;
}
.hero-form .has-error .form-control{ border-color: #b3245f; }

/* Labels are in the markup for screen readers, but the hero form keeps its
   placeholder-only look, so they are clipped rather than left out. The
   contact page un-clips them -- see the contact page section. */
.hero-form .form-label{
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* -- submit + note -- */
.hero-form-submit{
	width: 100%;
	justify-content: center;
	border: 0;
	cursor: pointer;
}
.hero-form-note{
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 18px 0 0;
	font-size: 12px;
	line-height: 1.5em;
	color: #43363e;
}
.hero-form-note i{ font-size: 11px; color: var(--primary-color); }

/* ==========================================================================
   15. HERO CTA BUTTON
       Same translucent light fill as the form panel. The theme's .btn-reverse
       paints purple with white text and inverts the arrow to white, so all
       three have to flip for the label to stay readable.
   ========================================================================== */
.page-hero-btn .btn-default.btn-reverse{
	background: rgb(255 248 254 / 58%);
	color: var(--primary-color);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}
.page-hero-btn .btn-default.btn-reverse::before{ filter: none; }
.page-hero-btn .btn-default.btn-reverse::after{ background: var(--white-color); }
.page-hero-btn .btn-default.btn-reverse:hover{ color: var(--primary-color) !important; }
.page-hero-btn .btn-default.btn-reverse:hover::before{ filter: none; }

/* Above 1200px the form sits in the hero's own column, so its mobile slot
   is empty and hidden; below that, subpage.js moves the form down into it. */
.hero-form-outer{ display: none; }

/* -- the hero needs a little more breathing room now it carries a form -- */
@media only screen and (min-width: 1200px){
	.page-hero{ padding: 110px 0 120px; }
	.page-hero-trust{ margin-top: 42px; }
}

@media only screen and (max-width: 1199px){
	/* Stacked: the form sits directly beneath the hero copy. Capped and centred
	   so the arch stays in proportion -- at full container width the curve
	   flattens out into ordinary rounded corners. */
	.hero-form{
		max-width: 620px;
		margin: 0 auto;
	}
	/* the form's mobile home, after the hero rather than inside it */
	.hero-form-outer{ display: block; padding: 70px 0 0; }
}

@media only screen and (max-width: 767px){
	.hero-form{ padding: 46px 22px 26px; border-radius: 110px 110px 20px 20px; }
	.hero-form::after{ width: 240px; height: 240px; }
	.hero-form-head h3{ font-size: 22px; }
	.hero-form .form-control{ height: 46px; font-size: 13px; }
}

/* ==========================================================================
   16. PER-PAGE ARTWORK + MANUAL/MOTORISED COMPARISON
      The two background images above are the plantation defaults. Each extra
      service page swaps them by its body class, so one shared stylesheet can
      carry every page without a second file.
   ========================================================================== */
.roller-shutters-page .page-hero .page-hero-bg{
	background-image: url('../images/Roller%20Shutters/roller-shutters-2.jpg');
}
.roller-shutters-page .svc-process-bg{
	background-image: url('../images/Roller%20Shutters/roller-shutters-1.jpg');
}
.sun-blinds-page .page-hero .page-hero-bg{
	background-image: url('../images/Sun%20Blinds/HB-Auto-sunblind-scaled.jpg');
}
.sun-blinds-page .svc-process-bg{
	background-image: url('../images/Sun%20Blinds/HB_Auto_12.jpg');
}
.roller-blinds-page .page-hero .page-hero-bg{
	background-image: url('../images/roller-blinds_ban1.jpg');
}
.roller-blinds-page .svc-process-bg{
	background-image: url('../images/Roller%20Blinds/Screenshot%202024-05-14%20144546.jpg');
}
.zip-track-page .page-hero .page-hero-bg{
	background-image: url('../images/ZIP%20Awnings/Zip%20track%2099_%204.jpg');
}
.zip-track-page .svc-process-bg{
	background-image: url('../images/ZIP%20Awnings/Zip%20track%2099_%208.jpg');
}
.gallery-page .page-hero .page-hero-bg{
	background-image: url('../images/Plantation%20Shutters/mangerton%20shutters.jpg');
}
.contact-page .page-hero .page-hero-bg{
	background-image: url('../images/ZIP%20Awnings/Zip%20track%2095_%203.jpg');
}
.blog-page .page-hero .page-hero-bg{
	background-image: url('../images/Plantation%20Shutters/IMG20250515165106.jpg');
}
/* each article sets its own hero photo on the body -- see the article pages */
.article-page .page-hero .page-hero-bg{ background-image: var(--hero-img); }

/* Two cards where the plantation page runs a three-photo row. Roller shutters
   have one real decision to explain -- manual or motorised -- and only three
   photos in the library, so the space earns more as a comparison. */
.svc-compare{ margin-top: 4px; }
.svc-compare-item{
	height: 100%;
	padding: 38px 32px 34px;
	border-radius: 22px;
	background: var(--white-color);
	border: 1px solid rgb(119 32 109 / 12%);
	transition: all 0.4s ease-in-out;
}
.svc-compare-item:hover{
	border-color: var(--primary-color);
	transform: translateY(-6px);
}
.svc-compare-head{
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 18px;
}
.svc-compare-head .icon-box{
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 62px;
	height: 62px;
	border-radius: 50%;
	background: var(--accent-color);
	color: var(--primary-color);
	font-size: 24px;
	transition: all 0.4s ease-in-out;
}
.svc-compare-item:hover .icon-box{ background: var(--primary-color); color: var(--white-color); }
.svc-compare-head h3{ font-size: 24px; margin-bottom: 0; }
.svc-compare-item > p{ margin-bottom: 20px; }
.svc-compare-list{ margin: 0; padding: 0; list-style: none; }
.svc-compare-list li{
	position: relative;
	padding-left: 28px;
	margin-bottom: 11px;
	font-size: 15px;
	line-height: 1.6em;
}
.svc-compare-list li:last-child{ margin-bottom: 0; }
.svc-compare-list li i{
	position: absolute;
	left: 0;
	top: 6px;
	font-size: 12px;
	color: var(--primary-color);
}

@media only screen and (max-width: 991px){
	.svc-compare .col-lg-6 + .col-lg-6{ margin-top: 24px; }
}

/* ==========================================================================
   17. GALLERY PAGE
      Filterable grid plus a small self-contained lightbox. Magnific Popup
      does the job on the home page, but it is 27 KB of CSS + JS and this is
      the only subpage that needs a lightbox -- so the other six pages would
      carry it for nothing. This is a few hundred bytes instead.
   ========================================================================== */
.page-hero-slim{ padding: 170px 0 120px; }
.page-hero-slim .page-hero-content{ max-width: 760px; }

.svc-gallery{ padding: 90px 0; }

/* -- filter buttons -- */
.gallery-filter{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin-bottom: 18px;
}
.gallery-filter-btn{
	padding: 11px 24px;
	border: 1px solid rgb(119 32 109 / 18%);
	border-radius: 30px;
	background: var(--white-color);
	font-size: 15px;
	font-weight: 500;
	color: var(--primary-color);
	cursor: pointer;
	transition: all 0.3s ease-in-out;
}
.gallery-filter-btn:hover{ border-color: var(--primary-color); background: var(--accent-color); }
.gallery-filter-btn.is-active{
	background: var(--primary-color);
	border-color: var(--primary-color);
	color: var(--white-color);
}

.gallery-empty{ text-align: center; font-size: 17px; margin: 40px 0 0; }

/* -- the grid -- */
.gallery-grid{
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
	gap: 24px;
}
.gallery-tile{
	position: relative;
	margin: 0;
	border-radius: 18px;
	overflow: hidden;
	background: var(--accent-color);
}
.gallery-tile.is-hidden{ display: none; }
.gallery-tile a{
	display: block;
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
}
.gallery-tile img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s ease-in-out;
}
.gallery-tile:hover img{ transform: scale(1.07); }
.gallery-tile a::after{
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgb(119 32 109 / 55%), transparent 55%);
	opacity: 0;
	transition: opacity 0.4s ease-in-out;
}
.gallery-tile:hover a::after{ opacity: 1; }
.gallery-zoom{
	position: absolute;
	right: 16px;
	bottom: 16px;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--white-color);
	color: var(--primary-color);
	font-size: 15px;
	opacity: 0;
	transform: translateY(10px);
	transition: all 0.4s ease-in-out;
}
.gallery-tile:hover .gallery-zoom{ opacity: 1; transform: translateY(0); }

/* -- lightbox, built by subpage.js on first use -- */
.gallery-lightbox{
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40px 20px 70px;
	background: rgb(40 16 37 / 92%);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}
.gallery-lightbox.is-open{ opacity: 1; visibility: visible; }
.gallery-lightbox img{
	max-width: 100%;
	max-height: 100%;
	border-radius: 10px;
	object-fit: contain;
}
.gallery-lightbox-caption{
	position: absolute;
	left: 0;
	right: 0;
	bottom: 22px;
	text-align: center;
	font-size: 14px;
	padding: 0 70px;
	color: var(--white-color);
}
.gallery-lb-btn{
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border: 0;
	border-radius: 50%;
	background: rgb(255 255 255 / 14%);
	color: var(--white-color);
	font-size: 17px;
	cursor: pointer;
	transition: background 0.3s ease-in-out;
}
.gallery-lb-btn:hover{ background: var(--primary-color); }
.gallery-lb-close{ top: 20px; right: 20px; }
.gallery-lb-prev{ left: 20px; top: 50%; transform: translateY(-50%); }
.gallery-lb-next{ right: 20px; top: 50%; transform: translateY(-50%); }

@media only screen and (max-width: 991px){
	.page-hero-slim{ padding: 140px 0 90px; }
	.svc-gallery{ padding: 70px 0; }
	.gallery-grid{ grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; }
}

@media only screen and (max-width: 767px){
	.svc-gallery{ padding: 60px 0; }
	.gallery-grid{ grid-template-columns: 1fr 1fr; gap: 12px; }
	.gallery-filter{ gap: 8px; }
	.gallery-filter-btn{ padding: 9px 16px; font-size: 13px; }
	.gallery-zoom{ display: none; }
	.gallery-lightbox{ padding: 20px 10px 60px; }
	.gallery-lb-btn{ width: 40px; height: 40px; font-size: 15px; }
	.gallery-lb-prev{ left: 8px; }
	.gallery-lb-next{ right: 8px; }
	.gallery-lightbox-caption{ padding: 0 20px; font-size: 13px; }
}

/* ==========================================================================
   18. CONTACT PAGE
      Detail cards beside the shared quote form, then the service-area list.
      The form is the same template the service pages inject, so there is one
      set of fields to maintain and one place it posts to.
   ========================================================================== */
.svc-contact{ padding: 90px 0; }
.contact-detail{ padding-right: 30px; }
.contact-detail .section-title{ margin-bottom: 34px; }

.contact-cards{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}
.contact-card{
	padding: 30px 26px;
	border-radius: 20px;
	background: var(--accent-color);
	border: 1px solid rgb(119 32 109 / 12%);
	transition: all 0.4s ease-in-out;
}
.contact-card:hover{ border-color: var(--primary-color); transform: translateY(-6px); }
.contact-card .icon-box{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	margin-bottom: 18px;
	border-radius: 50%;
	background: var(--primary-color);
	color: var(--white-color);
	font-size: 19px;
	transition: all 0.4s ease-in-out;
}
/* inverted on hover: the glyph stays high-contrast in both states */
.contact-card:hover .icon-box{ background: var(--white-color); color: var(--primary-color); }
/* The global Font Awesome rule paints every glyph the same dark purple, so the
   phone and envelope landed dark-on-dark the moment the circle filled with
   primary on hover -- and vanished entirely whenever the circle matched the
   card behind it. Inside these circles the glyph inherits the .icon-box colour
   instead: primary on the white circle, white on the purple one. */
.contact-card .icon-box :is(.fas,.far,.fab,.fa-solid,.fa-regular,.fa-brands,.fa-classic,.fa)::before{
	color: inherit;
}
.contact-card h3{ font-size: 19px; margin-bottom: 8px; }
.contact-card p{ margin-bottom: 6px; font-size: 16px; word-break: break-word; }
.contact-card p a{ color: var(--primary-color); transition: all 0.3s ease-in-out; }
.contact-card p a:hover{ text-decoration: underline; }
.contact-card small{ font-size: 13px; line-height: 1.5em; display: block; color: var(--text-color); }
/* The address is the longest string on the page. At xl the detail column is
   half the row, which left each card about 204px of content -- narrower than
   the address itself, so it broke mid-domain across two lines. Dropping the
   column's right padding hands that space back (Bootstrap's own gutter
   already separates the cards from the form) and trimming the card's side
   padding a little covers the rest; the address then sets one step down and
   clears even the narrowest card. */
.contact-detail{ padding-right: 0; }
.contact-card{ padding: 30px 22px; }
.contact-card p a[href^="mailto:"]{
	white-space: nowrap;
	font-size: 15px;
}
/* From xl up the detail column is half the row, so the cards are at their
   narrowest exactly where the screen is widest. Trimming the card's sides and
   setting the address one step smaller clears it by 13px at 1200 and 40px
   above 1400, rather than by the single pixel a font-size change alone left. */
@media only screen and (min-width: 1200px){
	.contact-card{ padding: 30px 16px; }
	.contact-card p a[href^="mailto:"]{ font-size: 14px; }
}
/* and the other end: on a 320px phone the card is narrower than the address
   again, and nowrap would push the page into a horizontal scroll */
@media only screen and (max-width: 374px){
	.contact-card p a[href^="mailto:"]{ font-size: 14px; }
}

/* the injected form keeps its arch, just without the hero behind it */
.contact-form-holder{ height: 100%; }
.contact-form-holder .hero-form{ margin: 0; }

/* -- service areas -- */
.svc-areas{ padding: 90px 0; }
.areas-intro{
	max-width: 760px;
	margin: 0 auto 32px;
	text-align: center;
	font-size: 17px;
	line-height: 1.7em;
}
.areas-list{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.areas-list li{
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 12px 22px;
	border-radius: 30px;
	background: var(--accent-color);
	font-size: 15px;
	font-weight: 500;
	color: var(--primary-color);
	transition: all 0.3s ease-in-out;
}
.areas-list li:hover{ background: var(--primary-color); color: var(--white-color); }
.areas-list li i{ font-size: 12px; opacity: 0.7; }

@media only screen and (max-width: 1199px){
	.contact-detail{ padding-right: 0; margin-bottom: 46px; }
	.contact-form-holder .hero-form{ margin: 0 auto; }
}

@media only screen and (max-width: 767px){
	.svc-contact{ padding: 60px 0; }
	.svc-areas{ padding: 60px 0; }
	.contact-cards{ grid-template-columns: 1fr; gap: 14px; }
	.contact-card{ padding: 24px 22px; }
	.areas-list{ gap: 8px; }
	.areas-list li{ padding: 10px 16px; font-size: 13px; }
}

/* ------------------------------------------------------------------------
   The contact page form.
   The arch, the glass and the louvre texture were designed to sit over a
   hero photo. On a plain white section they read as decoration, so here the
   same markup becomes an ordinary panel: square corners, solid fill, and
   the field labels showing.
   ------------------------------------------------------------------------ */
:is(.contact-page, .about-page) .hero-form{
	padding: 40px 38px 34px;
	border-radius: 16px;
	border: 1px solid rgb(119 32 109 / 14%);
	background: var(--white-color);
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	box-shadow: 0 18px 46px rgb(84 53 82 / 10%);
}
/* drop the louvre texture and the arch highlight */
:is(.contact-page, .about-page) .hero-form::before,
:is(.contact-page, .about-page) .hero-form::after{ content: none; }

:is(.contact-page, .about-page) .hero-form-head{ text-align: left; margin-bottom: 26px; }
:is(.contact-page, .about-page) .hero-form-head h3{ font-size: 24px; }
:is(.contact-page, .about-page) .hero-form-head p{ font-size: 15px; color: var(--text-color); }

:is(.contact-page, .about-page) .hero-form .form-label{
	position: static;
	display: block;
	width: auto;
	height: auto;
	margin: 0 0 7px;
	padding: 0;
	overflow: visible;
	clip: auto;
	white-space: normal;
	font-size: 13px;
	font-weight: 500;
	color: var(--primary-color);
}
:is(.contact-page, .about-page) .hero-form .form-label .req{ color: #b3245f; }
:is(.contact-page, .about-page) .hero-form .form-label .opt{ font-weight: 400; color: var(--text-color); }

:is(.contact-page, .about-page) .hero-form .form-control{
	height: 52px;
	border-radius: 10px;
	background: #fcfbfd;
	font-size: 15px;
}
:is(.contact-page, .about-page) .hero-form textarea.form-control{ height: auto; }
:is(.contact-page, .about-page) .hero-form .form-control:focus{ background: var(--white-color); }

/* a stated button width reads as a form, not a banner CTA */
:is(.contact-page, .about-page) .hero-form-submit{ width: auto; min-width: 210px; }
:is(.contact-page, .about-page) .hero-form-note{ color: var(--text-color); }

@media only screen and (max-width: 767px){
	:is(.contact-page, .about-page) .hero-form{ padding: 30px 22px 26px; }
	:is(.contact-page, .about-page) .hero-form-submit{ width: 100%; }
}

/* ==========================================================================
   19. HELPFUL TIPS PAGE
      Three cards: photo on top, copy below. The theme's own .post-item puts
      the photo BEHIND the text and needs a heavy tint to keep the words
      readable, which made all three read as dark tiles. These are ordinary
      light cards, so the photos stay untouched and the copy sits on white.
   ========================================================================== */
.svc-blog{ padding: 90px 0; }

.tips-grid{ row-gap: 30px; }
/* the columns stretch, so every card in a row ends level whatever the copy */
.tips-grid > [class*="col-"]{ display: flex; }

.tip-card{
	display: flex;
	flex-direction: column;
	width: 100%;
	background: var(--white-color);
	border: 1px solid rgb(119 32 109 / 10%);
	border-radius: 20px;
	overflow: hidden;
	transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
	            box-shadow 0.4s ease-in-out,
	            border-color 0.4s ease-in-out;
}
.tip-card:hover{
	transform: translateY(-8px);
	border-color: rgb(119 32 109 / 26%);
	box-shadow: 0 22px 46px rgb(58 13 52 / 14%);
}

/* -- the photo -- */
.tip-card-media{
	position: relative;
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--accent-color);
}
.tip-card-media img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.tip-card:hover .tip-card-media img{ transform: scale(1.06); }
.tip-card-tag{
	position: absolute;
	left: 16px;
	bottom: 16px;
	z-index: 1;
	padding: 7px 16px;
	border-radius: 100px;
	background: var(--white-color);
	font-size: 13px;
	font-weight: 500;
	line-height: normal;
	color: var(--primary-color);
}

/* -- the copy -- */
.tip-card-body{
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: 24px 24px 26px;
}
.tip-card-meta{
	display: flex;
	flex-wrap: wrap;
	gap: 6px 16px;
	margin-bottom: 12px;
	font-size: 13px;
	color: var(--text-color);
}
.tip-card-meta i{ margin-right: 7px; }
.tip-card h3{
	font-size: 20px;
	font-weight: 500;
	line-height: 1.38em;
	margin-bottom: 10px;
}
.tip-card h3 a{ color: inherit; transition: color 0.3s ease-in-out; }
.tip-card:hover h3 a{ color: var(--primary-color); }
.tip-card-body p{
	font-size: 15px;
	line-height: 1.65em;
	color: var(--text-color);
	margin-bottom: 20px;
}
/* margin-top:auto drops this to the foot of the card, so the three links sit
   on one line across the row even when the excerpts differ in length */
.tip-card-link{
	margin-top: auto;
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-size: 15px;
	font-weight: 500;
	color: var(--primary-color);
}
/* the global Font Awesome colour would paint this arrow a different purple
   from the label it sits beside */
.tip-card-link :is(.fas,.far,.fab,.fa-solid,.fa-regular,.fa-brands,.fa-classic,.fa)::before{
	color: inherit;
}
.tip-card-link i{ transition: transform 0.3s ease-in-out; }
.tip-card:hover .tip-card-link i{ transform: translateX(5px); }

@media only screen and (max-width: 767px){
	.svc-blog{ padding: 60px 0; }
	.tip-card-body{ padding: 20px 20px 22px; }
	.tip-card h3{ font-size: 18px; }
	.tip-card-body p{ font-size: 14px; }
}

@media (prefers-reduced-motion: reduce){
	.tip-card,
	.tip-card-media img,
	.tip-card-link i{ transition: none; }
	.tip-card:hover,
	.tip-card:hover .tip-card-media img,
	.tip-card:hover .tip-card-link i{ transform: none; }
}

/* ==========================================================================
   20. BLOG ARTICLE PAGES
      One column of prose, capped at a comfortable measure. Articles live at
      /blog/<slug>/ -- two levels down -- so their <body> carries
      data-base="../../" and subpage.js rewrites the shared header and footer
      links to match.
   ========================================================================== */
.svc-article{ padding: 90px 0; }
.article-wrap{ max-width: 820px; margin: 0 auto; }

.article-meta{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 16px;
	margin-bottom: 30px;
	padding-bottom: 22px;
	border-bottom: 1px solid rgb(119 32 109 / 12%);
	font-size: 14px;
	color: var(--text-color);
}
.article-meta .article-cat{
	padding: 6px 14px;
	border-radius: 30px;
	background: var(--accent-color);
	font-weight: 500;
	color: var(--primary-color);
}
.article-meta span i{ margin-right: 7px; font-size: 12px; color: var(--primary-color); }

.article-figure{ margin: 0 0 34px; border-radius: 18px; overflow: hidden; }
.article-figure img{ width: 100%; height: auto; display: block; }
.article-figure figcaption{
	padding: 12px 4px 0;
	font-size: 13px;
	color: var(--text-color);
}

.article-lead{
	font-size: 19px;
	line-height: 1.7em;
	color: #4d3f49;
	margin-bottom: 26px;
}
.article-body h3{
	font-size: 24px;
	font-weight: 500;
	line-height: 1.3em;
	color: var(--primary-color);
	margin: 40px 0 14px;
}
.article-body p{
	font-size: 17px;
	line-height: 1.75em;
	margin-bottom: 18px;
}
.article-body ul{
	margin: 0 0 22px;
	padding: 0;
	list-style: none;
}
.article-body ul li{
	position: relative;
	padding-left: 30px;
	margin-bottom: 11px;
	font-size: 17px;
	line-height: 1.7em;
}
.article-body ul li i{
	position: absolute;
	left: 0;
	top: 8px;
	font-size: 13px;
	color: var(--primary-color);
}

/* a pulled-out practical point */
.article-callout{
	margin: 32px 0;
	padding: 26px 28px;
	border-left: 4px solid var(--primary-color);
	border-radius: 0 14px 14px 0;
	background: var(--accent-color);
}
.article-callout p{ margin-bottom: 0; font-size: 16px; line-height: 1.7em; color: #43363e; }
.article-callout strong{ color: var(--primary-color); }

/* the "read the full page" link at the end */
.article-next{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	margin-top: 44px;
	padding: 28px 30px;
	border-radius: 18px;
	border: 1px solid rgb(119 32 109 / 14%);
	background: var(--white-color);
}
.article-next h4{ font-size: 19px; margin-bottom: 4px; }
.article-next p{ margin-bottom: 0; font-size: 15px; color: var(--text-color); }

@media only screen and (max-width: 767px){
	.svc-article{ padding: 60px 0; }
	.article-lead{ font-size: 17px; }
	.article-body h3{ font-size: 21px; margin: 32px 0 12px; }
	.article-body p,
	.article-body ul li{ font-size: 16px; }
	.article-callout{ padding: 20px 20px; }
	.article-next{ padding: 22px 20px; }
}

/* ==========================================================================
   21. ABOUT PAGE  (deliberately not the service-page layout)
      A cinematic, scroll-driven page: full-viewport hero with a slow push-in,
      a sticky story panel whose photo cross-fades as the copy scrolls past,
      counters that run on entry, drifting light behind the values, and a
      marquee of the towns we cover.

      Everything animates transform/opacity only. GSAP + ScrollTrigger are
      already in subpage.js, so none of this adds a library. The whole lot is
      switched off under prefers-reduced-motion at the end of this section.
   ========================================================================== */

/* Bootstrap ships .visually-hidden together with .visually-hidden-focusable,
   but the purge kept only the focusable half of the sizing rule -- leaving
   .visually-hidden position:absolute and fully visible. Restored here. */
.visually-hidden{
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* -- 1. hero ------------------------------------------------------------- */
.about-hero{
	position: relative;
	min-height: 74vh;
	display: flex;
	align-items: center;
	overflow: hidden;
	background: #2a0f27;
}
.about-hero-media{
	position: absolute;
	inset: -6%;                /* overscan, so the push-in never shows an edge */
	background-image: var(--hero-img);
	background-size: cover;
	background-position: center center;
	transform: scale(1.02);
	animation: aboutKenBurns 26s ease-in-out infinite alternate;
	will-change: transform;
}
@keyframes aboutKenBurns{
	from{ transform: scale(1.02) translate3d(0, 0, 0); }
	to  { transform: scale(1.16) translate3d(-1.5%, -1.5%, 0); }
}
/* the veil: dark enough at the bottom-left for the headline to sit on */
.about-hero-veil{
	position: absolute;
	inset: 0;
	background:
		linear-gradient(to top, rgb(28 8 25 / 92%) 0%, rgb(28 8 25 / 55%) 45%, rgb(28 8 25 / 30%) 100%),
		linear-gradient(to right, rgb(84 20 76 / 60%) 0%, rgb(84 20 76 / 0%) 65%);
}
/* a slow sheen travelling across, like light moving through a window */
.about-hero-sheen{
	position: absolute;
	top: -40%;
	left: -60%;
	width: 45%;
	height: 180%;
	background: linear-gradient(105deg, rgb(255 255 255 / 0%) 0%, rgb(255 255 255 / 9%) 50%, rgb(255 255 255 / 0%) 100%);
	transform: rotate(8deg);
	animation: aboutSheen 11s ease-in-out infinite;
	pointer-events: none;
}
@keyframes aboutSheen{
	0%   { transform: translateX(0) rotate(8deg); opacity: 0; }
	18%  { opacity: 1; }
	60%  { opacity: 1; }
	100% { transform: translateX(340%) rotate(8deg); opacity: 0; }
}
.about-hero-inner{ position: relative; z-index: 2; width: 100%; padding: 150px 0 104px; }
.about-hero-kicker{
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 22px;
	padding: 9px 20px;
	border-radius: 100px;
	border: 1px solid rgb(255 255 255 / 26%);
	background: rgb(255 255 255 / 10%);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	font-size: 13px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--white-color);
}
.about-hero-kicker i{ font-size: 12px; color: var(--accent-color); }
.about-hero h1{
	max-width: 15ch;
	font-size: clamp(38px, 6vw, 55px);
	font-weight: 500;
	line-height: 1.24em;
	color: var(--white-color);
	margin-bottom: 26px;
}
.about-hero h1 .word{ display: inline-block; will-change: transform, opacity; }
.about-hero-sub{
	max-width: 56ch;
	font-size: clamp(16px, 1.5vw, 19px);
	line-height: 1.75em;
	color: rgb(255 255 255 / 86%);
	margin-bottom: 34px;
}
.about-hero-actions{ display: flex; flex-wrap: wrap; align-items: center; gap: 16px 22px; }
.about-hero-call{
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-size: 17px;
	font-weight: 500;
	color: var(--white-color);
}
.about-hero-call i{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid rgb(255 255 255 / 30%);
	font-size: 14px;
	animation: aboutPulse 2.6s ease-in-out infinite;
}
@keyframes aboutPulse{
	0%,100%{ box-shadow: 0 0 0 0 rgb(255 255 255 / 26%); }
	50%    { box-shadow: 0 0 0 12px rgb(255 255 255 / 0%); }
}
.about-scroll-cue{
	position: absolute;
	left: 50%;
	bottom: 34px;
	z-index: 2;
	transform: translateX(-50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	font-size: 11px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: rgb(255 255 255 / 70%);
}
.about-scroll-cue span{
	display: block;
	width: 1px;
	height: 54px;
	background: linear-gradient(to bottom, rgb(255 255 255 / 0%), rgb(255 255 255 / 80%));
	animation: aboutCue 2.2s ease-in-out infinite;
	transform-origin: top;
}
@keyframes aboutCue{
	0%,100%{ transform: scaleY(0.35); opacity: 0.4; }
	50%    { transform: scaleY(1);    opacity: 1; }
}

/* -- 2. intro, with a parallax photo ------------------------------------- */
.about-intro{ position: relative; padding: 120px 0; overflow: hidden; }
.about-intro-figure{
	position: relative;
	border-radius: 24px;
	overflow: hidden;
	aspect-ratio: 4 / 5;
}
.about-intro-figure img{
	width: 100%;
	height: 118%;              /* the overhang ScrollTrigger slides */
	object-fit: cover;
	will-change: transform;
}
.about-intro-badge{
	position: absolute;
	right: -14px;
	bottom: 34px;
	padding: 20px 26px;
	border-radius: 18px;
	background: var(--primary-color);
	color: var(--white-color);
	box-shadow: 0 20px 50px rgb(40 12 36 / 28%);
}
.about-intro-badge b{ display: block; font-size: 30px; font-weight: 600; line-height: 1; }
.about-intro-badge span{ font-size: 13px; opacity: 0.85; }
.about-intro-content{ padding-left: 36px; }
/* The theme leaves .section-sub-title as display:inline, and vertical margins
   do nothing on an inline box. On this page the sub-title is used on its own
   rather than inside a .section-title wrapper, so it has to become an
   inline-block before any of the spacing below has an effect. */
.about-page .section-sub-title{ display: inline-block; margin-bottom: 18px; }
.about-values-head .section-sub-title,
.about-areas-head .section-sub-title{ margin-bottom: 16px; }
.about-intro-content h2{
	font-size: clamp(28px, 3.2vw, 40px);
	font-weight: 500;
	line-height: 1.22em;
	margin-bottom: 26px;
}
.about-intro-content p{ font-size: 17px; line-height: 1.8em; margin-bottom: 22px; }
.about-intro-content p:last-of-type{ margin-bottom: 0; }
.about-intro-points{ margin: 26px 0 0; padding: 0; list-style: none; }
.about-intro-points li{
	position: relative;
	padding-left: 34px;
	margin-bottom: 14px;
	font-size: 16px;
	font-weight: 500;
	color: var(--primary-color);
}
.about-intro-points li i{
	position: absolute;
	left: 0;
	top: 2px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--accent-color);
	font-size: 10px;
}

/* -- 3. the story ---------------------------------------------------------
   The photo is covered by eight opaque slats that tilt open like a set of
   plantation louvres when a step becomes current -- staggered top to bottom,
   so the picture is uncovered rather than cross-faded. The copy runs down a
   progress rail whose fill tracks how far through you are. */
.about-story{ position: relative; padding: 130px 0; overflow: hidden; background: var(--bg-color); }

/* a faint grid drifting behind the section */
.about-story::before{
	content: '';
	position: absolute;
	inset: -40%;
	background-image:
		linear-gradient(rgb(119 32 109 / 4%) 1px, transparent 1px),
		linear-gradient(90deg, rgb(119 32 109 / 4%) 1px, transparent 1px);
	background-size: 64px 64px;
	animation: aboutGridDrift 34s linear infinite;
	pointer-events: none;
}
@keyframes aboutGridDrift{
	from{ transform: translate3d(0, 0, 0); }
	to  { transform: translate3d(64px, 64px, 0); }
}
.about-story .container{ position: relative; z-index: 1; }

/* -- the media column -- */
.about-story-media{
	position: sticky;
	top: 110px;
	border-radius: 24px;
	overflow: hidden;
	aspect-ratio: 3 / 4;
	background: #2a0f27;
	perspective: 1000px;
	box-shadow: 0 30px 70px rgb(40 12 36 / 16%);
}
.about-story-frame{
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 0.5s ease-in-out;
}
.about-story-frame.is-live{ opacity: 1; }
.about-story-frame img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1.08);
	transition: transform 2.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.about-story-frame.is-live img{ transform: scale(1); }

/* the louvres */
.about-louvres{
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	transform-style: preserve-3d;
	pointer-events: none;
}
.about-louvres i{
	flex: 1 1 0;
	background: linear-gradient(to bottom, #31122d 0%, #4a1a43 55%, #2a0f27 100%);
	border-top: 1px solid rgb(255 255 255 / 7%);
	transform-origin: center top;
	transform: rotateX(0deg);
	transition: transform 0.85s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.85s ease-in-out;
}
.about-story-frame.is-live .about-louvres i{ transform: rotateX(-92deg); opacity: 0; }
/* opened top to bottom, the way a shutter is tilted */
.about-story-frame.is-live .about-louvres i:nth-child(1){ transition-delay: 0.04s; }
.about-story-frame.is-live .about-louvres i:nth-child(2){ transition-delay: 0.10s; }
.about-story-frame.is-live .about-louvres i:nth-child(3){ transition-delay: 0.16s; }
.about-story-frame.is-live .about-louvres i:nth-child(4){ transition-delay: 0.22s; }
.about-story-frame.is-live .about-louvres i:nth-child(5){ transition-delay: 0.28s; }
.about-story-frame.is-live .about-louvres i:nth-child(6){ transition-delay: 0.34s; }
.about-story-frame.is-live .about-louvres i:nth-child(7){ transition-delay: 0.40s; }
.about-story-frame.is-live .about-louvres i:nth-child(8){ transition-delay: 0.46s; }

.about-story-frame::after{
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgb(28 8 25 / 62%), rgb(28 8 25 / 0%) 52%);
	pointer-events: none;
}
.about-story-caption{
	position: absolute;
	left: 26px;
	right: 26px;
	bottom: 24px;
	z-index: 2;
	font-size: 14px;
	color: rgb(255 255 255 / 94%);
	opacity: 0;
	transform: translateY(12px);
	transition: opacity 0.6s ease-out 0.55s, transform 0.6s ease-out 0.55s;
}
.about-story-frame.is-live .about-story-caption{ opacity: 1; transform: translateY(0); }

/* -- the copy, on a progress rail -- */
.about-story-rail{ position: relative; padding-left: 56px; }
.about-rail-line{
	position: absolute;
	left: 16px;
	top: 26px;
	bottom: 26px;
	width: 2px;
	border-radius: 2px;
	background: rgb(119 32 109 / 13%);
	overflow: hidden;
}
.about-rail-fill{
	display: block;
	width: 100%;
	height: 0;
	border-radius: 2px;
	background: linear-gradient(to bottom, var(--primary-color), #b3489f);
	transition: height 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.about-story-step{
	position: relative;
	padding: 44px 0;
	opacity: 0.4;
	transition: opacity 0.55s ease-in-out;
}
.about-story-step.is-live{ opacity: 1; }

.about-step-dot{
	position: absolute;
	left: -47px;
	top: 52px;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--bg-color);
	border: 2px solid rgb(119 32 109 / 26%);
	transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.about-story-step.is-live .about-step-dot{
	background: var(--primary-color);
	border-color: var(--primary-color);
	box-shadow: 0 0 0 7px rgb(119 32 109 / 13%);
	transform: scale(1.14);
}
/* an oversized numeral sitting behind the heading */
.about-step-ghost{
	position: absolute;
	right: 4px;
	top: 14px;
	font-size: clamp(64px, 8vw, 104px);
	font-weight: 700;
	line-height: 1;
	color: rgb(119 32 109 / 7%);
	pointer-events: none;
	transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1), color 0.6s ease-in-out;
	transform: translateX(18px);
}
.about-story-step.is-live .about-step-ghost{ transform: translateX(0); color: rgb(119 32 109 / 11%); }

.about-story-step-num{
	display: inline-block;
	margin-bottom: 12px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--primary-color);
	opacity: 0.6;
}
.about-story-step h3{
	position: relative;
	font-size: clamp(22px, 2.4vw, 30px);
	font-weight: 500;
	line-height: 1.28em;
	margin-bottom: 14px;
}
.about-story-step p{ position: relative; font-size: 17px; line-height: 1.8em; margin-bottom: 0; }

/* -- 4. counters --------------------------------------------------------- */
.about-stats{
	position: relative;
	padding: 60px;
	overflow: hidden;
	background: #4d1445;
	isolation: isolate;
	border-top: 2px solid #a173ad;
    border-bottom: 1px solid #a173ad;
}
/* the photo, panning slowly behind everything */
.about-stats-media{
	position: absolute;
	inset: -8%;
	background-image: var(--stats-img);
	background-size: cover;
	background-position: center center;
	animation: aboutStatsPan 30s ease-in-out infinite alternate;
	will-change: transform;
	z-index: -3;
}
@keyframes aboutStatsPan{
	from{ transform: scale(1.06) translate3d(-1%, 0, 0); }
	to  { transform: scale(1.18) translate3d(1.5%, -1.5%, 0); }
}
/* the brand veil over it -- the numbers have to stay readable over a photo */
.about-stats::after{
	content: '';
	position: absolute;
	inset: 0;
	z-index: -2;
	background: linear-gradient(115deg, rgb(58 13 52 / 47%) 0%, rgb(119 32 109 / 50%) 55%, rgb(58 13 52 / 43%) 100%);
}
/* two soft lights drifting across the veil */
.about-stats::before{
	content: '';
	position: absolute;
	inset: -50%;
	z-index: -1;
	background:
		radial-gradient(circle at 20% 30%, rgb(238 228 237 / 20%) 0%, transparent 42%),
		radial-gradient(circle at 78% 68%, rgb(255 255 255 / 15%) 0%, transparent 44%);
	animation: aboutDriftBg 18s ease-in-out infinite alternate;
}
@keyframes aboutDriftBg{
	from{ transform: translate3d(-3%, -2%, 0) scale(1); }
	to  { transform: translate3d(3%, 2%, 0) scale(1.12); }
}
/* a slow diagonal sweep, the same idea as the hero sheen */
.about-stats-sweep{
	position: absolute;
	top: -40%;
	left: -55%;
	width: 40%;
	height: 180%;
	z-index: -1;
	background: linear-gradient(105deg, rgb(255 255 255 / 0%), rgb(255 255 255 / 8%) 50%, rgb(255 255 255 / 0%));
	transform: rotate(10deg);
	animation: aboutStatsSweep 14s ease-in-out infinite;
	pointer-events: none;
}
@keyframes aboutStatsSweep{
	0%  { transform: translateX(0) rotate(10deg); opacity: 0; }
	15% { opacity: 1; }
	65% { opacity: 1; }
	100%{ transform: translateX(400%) rotate(10deg); opacity: 0; }
}

.about-stats .container{ position: relative; z-index: 1; }

.about-stat{
	position: relative;
	text-align: center;
	color: var(--white-color);
	padding: 0 10px;
	/* resting state before the observer reaches it */
	opacity: 0;
	transform: translateY(26px);
	transition: opacity 0.7s ease-out, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.about-stat.is-counted{ opacity: 1; transform: translateY(0); }

.about-stat-icon{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 62px;
	height: 62px;
	margin-bottom: 18px;
	border-radius: 50%;
	border: 1px solid rgb(255 255 255 / 26%);
	background: rgb(255 255 255 / 60%);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	font-size: 21px;
	color: var(--white-color);
	transform: scale(0.7) rotate(-12deg);
	opacity: 0;
	transition: transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.5s ease-out;
}
.about-stat.is-counted .about-stat-icon{
	transform: scale(1) rotate(0deg);
	opacity: 1;
	animation: aboutStatFloat 4.5s ease-in-out 0.9s infinite;
}
@keyframes aboutStatFloat{
	0%,100%{ translate: 0 0; }
	50%    { translate: 0 -7px; }
}

:is(.fas,.far,.fab,.fa-solid,.fa-regular,.fa-brands,.fa-classic,.fa):before {
    content: var(--fa) / "";
    color: #4e0f58a1;
}

/* The rule above paints every glyph the same dark purple, which reads well on
   the light sections. On the dark ones the glyph lands dark-on-dark and
   disappears -- measured 1.02:1 on the orbit nodes, 1.06:1 on the value tiles,
   1.27:1 in the hero trust strip and the footer. Inside anything dark the glyph
   goes back to inheriting its element's own colour, which was already right.
   .about-stats is deliberately left out: its tiles were lightened to 51% white
   to suit the dark glyph. */
:is(.about-hero, .about-values, .page-hero, .svc-process,
    .main-footer-stone, .hero-form-badge)
	:is(.fas,.far,.fab,.fa-solid,.fa-regular,.fa-brands,.fa-classic,.fa)::before{
	color: inherit;
}
/* a ring that keeps expanding out of the icon while the number runs */
.about-stat.is-counted .about-stat-icon::after{
	content: '';
	position: absolute;
	inset: -1px;
	border-radius: 50%;
	border: 1px solid rgb(255 255 255 / 45%);
	animation: aboutStatRing 2.8s ease-out 0.5s infinite;
}
@keyframes aboutStatRing{
	0%  { transform: scale(1); opacity: 0.7; }
	70% { opacity: 0; }
	100%{ transform: scale(1.65); opacity: 0; }
}

.about-stat b{
	display: block;
	font-size: clamp(40px, 5.2vw, 48px);
	font-weight: 600;
	line-height: 1.02em;
	margin-bottom: 10px;
	letter-spacing: -0.01em;
	font-variant-numeric: tabular-nums;   /* stops the width jittering as it counts */
	text-shadow: 0 6px 24px rgb(28 6 25 / 45%);
	transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.about-stat b.is-popped{ animation: aboutStatPop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes aboutStatPop{
	0%  { transform: scale(1); }
	45% { transform: scale(1.11); }
	100%{ transform: scale(1); }
}

.about-stat-label{
	display: block;
	font-size: 15px;
	line-height: 1.5em;
	color: rgb(255 255 255 / 88%);
}

/* the rule that draws itself once the number lands */
.about-stat-bar{
	display: block;
	width: 64px;
	height: 2px;
	margin: 18px auto 0;
	border-radius: 2px;
	background: rgb(255 255 255 / 22%);
	overflow: hidden;
}
.about-stat-bar i{
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 2px;
	background: linear-gradient(to right, rgb(255 255 255 / 30%), var(--white-color));
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.45s;
}
.about-stat.is-counted .about-stat-bar i{ transform: scaleX(1); }

/* a hairline between the four, desktop only */
@media only screen and (min-width: 992px){
	.about-stats .col-lg-3 + .col-lg-3 .about-stat::before{
		content: '';
		position: absolute;
		left: -1px;
		top: 12%;
		height: 76%;
		width: 1px;
		background: linear-gradient(to bottom, rgb(255 255 255 / 0%), rgb(255 255 255 / 26%), rgb(255 255 255 / 0%));
	}
}

/* -- 5. values ----------------------------------------------------------- */
/* Three columns: values down each side, a framed portrait between them.
   Everything arrives on scroll -- the side columns slide in from their own
   edge, the frame unclips upward -- and the frame tilts a little towards the
   pointer. The meteor shower that used to sit inside each card now runs
   across the whole section, since the cards are gone. */
.about-values{
	position: relative;
	padding: 130px 0;
	overflow: hidden;
	background: #24091f;
}
.about-orb{
	position: absolute;
	border-radius: 50%;
	filter: blur(70px);
	opacity: 0.5;
	pointer-events: none;
}
.about-orb-1{ width: 420px; height: 420px; top: -80px; left: -60px; background: #77206d; animation: aboutFloat1 16s ease-in-out infinite alternate; }
.about-orb-2{ width: 360px; height: 360px; bottom: -90px; right: -40px; background: #b3489f; animation: aboutFloat2 20s ease-in-out infinite alternate; }
.about-orb-3{ width: 300px; height: 300px; top: 42%; left: 52%; background: #5d1354; animation: aboutFloat1 24s ease-in-out infinite alternate-reverse; }
@keyframes aboutFloat1{ from{ transform: translate3d(0,0,0);} to{ transform: translate3d(70px,-50px,0);} }
@keyframes aboutFloat2{ from{ transform: translate3d(0,0,0);} to{ transform: translate3d(-80px,40px,0);} }

/* faint circles drifting behind everything, as in the reference */
.about-dot{
	position: absolute;
	border-radius: 50%;
	border: 1px solid rgb(255 255 255 / 9%);
	pointer-events: none;
}
.about-dot-1{ width: 180px; height: 180px; top: 12%; left: 6%;  animation: aboutDotFloat 14s ease-in-out infinite alternate; }
.about-dot-2{ width: 90px;  height: 90px;  top: 68%; left: 18%; background: rgb(255 255 255 / 4%); animation: aboutDotFloat 11s ease-in-out infinite alternate-reverse; }
.about-dot-3{ width: 220px; height: 220px; top: 20%; right: 5%; animation: aboutDotFloat 17s ease-in-out infinite alternate-reverse; }
.about-dot-4{ width: 70px;  height: 70px;  bottom: 14%; right: 20%; background: rgb(255 255 255 / 5%); animation: aboutDotFloat 13s ease-in-out infinite alternate; }
@keyframes aboutDotFloat{
	from{ transform: translate3d(0, 0, 0) scale(1); }
	to  { transform: translate3d(18px, -26px, 0) scale(1.08); }
}

.about-values .container{ position: relative; z-index: 1; }
.about-values-head{ max-width: 720px; margin: 0 auto 70px; text-align: center; }
.about-values-head h2{ color: var(--white-color); font-size: clamp(28px, 3.4vw, 42px); font-weight: 500; margin-bottom: 16px; }
.about-values-head p{ color: rgb(255 255 255 / 78%); font-size: 17px; line-height: 1.75em; margin-bottom: 0; }

/* -- the three-column arrangement -- */
.about-value-grid{
	display: grid;
	grid-template-columns: 1fr minmax(300px, 372px) 1fr;
	gap: 0 60px;
	align-items: start;
}
.about-value-col{ display: flex; flex-direction: column; gap: 46px; padding-top: 10px; }

.about-value-item{
	opacity: 0;
	transform: translate3d(var(--from, -46px), 14px, 0);
	transition: opacity 0.85s ease-out, transform 0.95s cubic-bezier(0.22, 1, 0.36, 1);
}
.about-value-col--right .about-value-item{ --from: 46px; }
.about-value-item.is-in{ opacity: 1; transform: translate3d(0, 0, 0); }

.about-value-head{ display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
.about-value-icon{
	position: relative;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 16px;
	border: 1px solid rgb(255 255 255 / 14%);
	background: rgb(255 255 255 / 8%);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	font-size: 20px;
	color: var(--white-color);
	transform: scale(0.6) rotate(-14deg);
	opacity: 0;
	transition: transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.12s, opacity 0.6s ease-out 0.12s,
	            background 0.4s ease-in-out, border-color 0.4s ease-in-out;
}
.about-value-item.is-in .about-value-icon{ transform: scale(1) rotate(0deg); opacity: 1; }
.about-value-item:hover .about-value-icon{ background: rgb(255 255 255 / 15%); border-color: rgb(255 255 255 / 32%); }

/* the little sparkle sitting off the corner of each tile */
.about-value-spark{
	position: absolute;
	top: -7px;
	right: -7px;
	font-size: 11px;
	color: var(--accent-color);
	opacity: 0;
	transform: scale(0.4);
	transition: opacity 0.5s ease-out 0.5s, transform 0.5s ease-out 0.5s;
}
.about-value-item.is-in .about-value-spark{
	opacity: 1;
	transform: scale(1);
	animation: aboutSpark 3.4s ease-in-out 1s infinite;
}
@keyframes aboutSpark{
	0%,100%{ opacity: 0.55; transform: scale(0.88) rotate(0deg); }
	50%    { opacity: 1;    transform: scale(1.12) rotate(90deg); }
}

.about-value-item h3{
	font-size: 22px;
	font-weight: 500;
	color: var(--white-color);
	margin-bottom: 0;
	line-height: 1.3em;
}
.about-value-item p{
	font-size: 15px;
	line-height: 1.75em;
	color: rgb(255 255 255 / 72%);
	margin-bottom: 0;
}

/* -- the framed portrait in the middle -- */
.about-value-stage{
	position: relative;
	perspective: 1100px;
	opacity: 0;
	transform: translateY(40px);
	transition: opacity 0.9s ease-out, transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}
.about-value-stage.is-in{ opacity: 1; transform: translateY(0); }

.about-stage-frame{
	position: relative;
	margin: 0;
	padding: 12px;
	border-radius: 26px;
	border: 1px solid rgb(255 255 255 / 20%);
	background: rgb(255 255 255 / 7%);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	transform-style: preserve-3d;
	/* the tilt handler writes these two */
	transform: rotateX(var(--tiltX, 0deg)) rotateY(var(--tiltY, 0deg));
	transition: transform 0.5s ease-out;
	will-change: transform;
}
.about-stage-inner{
	position: relative;
	border-radius: 18px;
	overflow: hidden;
	aspect-ratio: 3 / 4;
	/* clipped shut until the stage arrives, then opens upward */
	clip-path: inset(100% 0 0 0);
	transition: clip-path 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.15s;
}
.about-value-stage.is-in .about-stage-inner{ clip-path: inset(0 0 0 0); }
.about-stage-inner img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	animation: aboutStageZoom 22s ease-in-out infinite alternate;
	will-change: transform;
}
@keyframes aboutStageZoom{
	from{ transform: scale(1.02); }
	to  { transform: scale(1.14); }
}
.about-stage-inner::after{
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgb(28 8 25 / 70%) 0%, rgb(28 8 25 / 0%) 52%);
}
.about-stage-btn{
	position: absolute;
	left: 50%;
	bottom: 34px;
	z-index: 2;
	transform: translateX(-50%) translateZ(40px);
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 26px;
	border-radius: 100px;
	background: var(--white-color);
	font-size: 15px;
	font-weight: 500;
	color: var(--primary-color);
	white-space: nowrap;
	box-shadow: 0 14px 34px rgb(18 4 16 / 40%);
	transition: background 0.3s ease-in-out, color 0.3s ease-in-out;
}
.about-stage-btn i{ font-size: 12px; transition: transform 0.3s ease-in-out; }
.about-stage-btn:hover{ background: var(--primary-color); color: var(--white-color); }
.about-stage-btn:hover i{ transform: translateX(4px); }

/* -- responsive ----------------------------------------------------------- */
@media only screen and (max-width: 1199px){
	.about-value-grid{ grid-template-columns: 1fr; gap: 46px; }
	.about-value-col{ gap: 38px; }
	/* the frame moves above the second column rather than between them */
	.about-value-stage{ order: -1; max-width: 380px; margin: 0 auto 8px; }
	.about-value-item{ --from: -30px !important; }
}

/* -- the meteor shower, now across the whole section ---------------------
   It used to live inside each value card; the cards are gone, so one layer
   spans the section instead. Each meteor is a bright head with a gradient
   tail, rotated 215deg so travelling along the rotated X axis sends it down
   and right with the tail trailing back up the track. */
.about-meteors{
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
}
.about-meteor{
	position: absolute;
	top: -10px;
	width: 2px;
	height: 2px;
	border-radius: 50%;
	background: var(--white-color);
	box-shadow: 0 0 7px 1px rgb(255 255 255 / 45%);
	transform: rotate(215deg);
	animation-name: aboutMeteor;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	opacity: 0;
}
.about-meteor::before{
	content: '';
	position: absolute;
	top: 50%;
	width: 78px;
	height: 1px;
	transform: translateY(-50%);
	background: linear-gradient(90deg, rgb(255 255 255 / 55%), rgb(255 255 255 / 0%));
}
@keyframes aboutMeteor{
	0%  { transform: rotate(215deg) translateX(0); opacity: 0; }
	8%  { opacity: 1; }
	72% { opacity: 1; }
	100%{ transform: rotate(215deg) translateX(-820px); opacity: 0; }
}
/* they pick up a little while the pointer is over the section */
.about-values:hover .about-meteor{ animation-duration: 3s !important; }

/* -- 6. the towns, on a loop --------------------------------------------- */
.about-areas{ padding: 84px 0 96px; overflow: hidden; }
.about-areas-head{ text-align: center; margin-bottom: 40px; }
.about-areas-head h2{ font-size: clamp(26px, 3vw, 38px); font-weight: 500; margin-bottom: 12px; }
.about-areas-head p{ font-size: 16px; margin-bottom: 0; color: var(--text-color); }
.about-marquee{
	position: relative;
	display: flex;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
	mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
}
.about-marquee-track{
	display: flex;
	flex-shrink: 0;
	align-items: center;
	gap: 18px;
	padding-right: 18px;
	animation: aboutMarquee 38s linear infinite;
	will-change: transform;
}
.about-marquee:hover .about-marquee-track{ animation-play-state: paused; }
.about-marquee + .about-marquee{ margin-top: 18px; }
.about-marquee + .about-marquee .about-marquee-track{ animation-duration: 46s; animation-direction: reverse; }
@keyframes aboutMarquee{ from{ transform: translate3d(0,0,0);} to{ transform: translate3d(-100%,0,0);} }
.about-marquee-track span{
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 13px 26px;
	border-radius: 100px;
	background: var(--accent-color);
	font-size: 16px;
	font-weight: 500;
	color: var(--primary-color);
	white-space: nowrap;
}
.about-marquee-track span i{ font-size: 11px; opacity: 0.6; }

/* -- responsive ---------------------------------------------------------- */
@media only screen and (max-width: 1199px){
	.about-intro-content{ padding-left: 0; margin-top: 44px; }
	.about-story-steps{ padding-left: 0; margin-top: 40px; }
	.about-story-media{ position: relative; top: 0; }
}
@media only screen and (max-width: 767px){
	.about-hero{ min-height: 66vh; }
	.about-hero-inner{ padding: 120px 0 88px; }
	.about-intro,
	.about-story,
	.about-values{ padding: 70px 0; }
	.about-values-head{ margin-bottom: 44px; }
	.about-value-item h3{ font-size: 19px; }
	.about-value-icon{ width: 48px; height: 48px; font-size: 17px; border-radius: 13px; }
	.about-stage-btn{ bottom: 22px; padding: 12px 20px; font-size: 14px; }
	.about-dot-1,
	.about-dot-3{ display: none; }
	.about-intro-badge{ right: 10px; bottom: 16px; padding: 15px 18px; }
	.about-intro-badge b{ font-size: 24px; }
	.about-story-step{ padding: 30px 0; opacity: 1; }
	.about-story-rail{ padding-left: 42px; }
	.about-rail-line{ left: 11px; }
	.about-step-dot{ left: -37px; top: 34px; }
	.about-step-ghost{ font-size: 56px; top: 8px; }
	.about-intro-content h2{ margin-bottom: 20px; }
	.about-stats{ padding: 70px 0 64px; }
	.about-stat{ margin-bottom: 38px; padding: 0; }
	.about-stat-icon{ width: 52px; height: 52px; font-size: 18px; margin-bottom: 14px; }
	.about-stat-bar{ width: 52px; margin-top: 14px; }
	.about-areas{ padding: 60px 0 70px; }
	.about-marquee-track span{ padding: 10px 18px; font-size: 14px; }
}


/* -- 7. the quote form, closing the about page --------------------------
   Copy and a phone number on the left, the shared quote form on the right.
   The form is the same template every other page injects, so there is one
   set of fields and one destination to maintain. It wears the contact
   page's plain-panel treatment (see the :is() selectors above) rather than
   the arched hero version, which needs a photo behind it. */
.about-form{ position: relative; padding: 110px 0; overflow: hidden; background: var(--bg-color); }
.about-form-copy{ padding-right: 40px; }
.about-form-copy h2{ font-size: clamp(28px, 3.2vw, 40px); font-weight: 500; margin-bottom: 18px; }
.about-form-copy > p{ font-size: 17px; line-height: 1.8em; margin-bottom: 26px; }

.about-form-points{ margin: 0 0 32px; padding: 0; list-style: none; }
.about-form-points li{
	position: relative;
	padding-left: 34px;
	margin-bottom: 14px;
	font-size: 16px;
	font-weight: 500;
	color: var(--primary-color);
}
.about-form-points li i{
	position: absolute;
	left: 0;
	top: 2px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--accent-color);
	font-size: 10px;
}

.about-form-call{
	display: inline-flex;
	align-items: center;
	gap: 16px;
	padding: 18px 26px 18px 18px;
	border-radius: 18px;
	background: var(--white-color);
	border: 1px solid rgb(119 32 109 / 14%);
	transition: all 0.4s ease-in-out;
}
.about-form-call:hover{ border-color: var(--primary-color); transform: translateY(-4px); }
.about-form-call .icon-box{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--accent-color);
	color: var(--primary-color);
	font-size: 17px;
}
.about-form-call-text{ display: block; font-size: 21px; font-weight: 600; color: var(--primary-color); line-height: 1.2em; }
.about-form-call-text small{ display: block; font-size: 13px; font-weight: 400; color: var(--text-color); }

@media only screen and (max-width: 1199px){
	.about-form-copy{ padding-right: 0; margin-bottom: 46px; }
}
@media only screen and (max-width: 767px){
	.about-form{ padding: 60px 0; }
	.about-form-call{ padding: 14px 20px 14px 14px; gap: 12px; }
	.about-form-call-text{ font-size: 18px; }
}

/* -- anyone who asked for less motion gets the page, minus the motion ---- */
@media (prefers-reduced-motion: reduce){
	.about-hero-media,
	.about-hero-sheen,
	.about-hero-call i,
	.about-scroll-cue span,
	.about-stats::before,
	.about-stats-media,
	.about-stats-sweep,
	.about-stat.is-counted .about-stat-icon,
	.about-stat.is-counted .about-stat-icon::after,
	.about-orb,
	.about-dot,
	.about-story::before,
	.about-meteor,
	.about-stage-inner img,
	.about-value-item.is-in .about-value-spark,
	.about-marquee-track{ animation: none !important; }
	.about-meteors{ display: none; }
	/* the three columns still assemble, they just do not travel */
	.about-value-item,
	.about-value-stage{ opacity: 1 !important; transform: none !important; }
	.about-value-icon{ opacity: 1 !important; transform: none !important; }
	.about-value-spark{ opacity: 1 !important; transform: none !important; }
	.about-stage-inner{ clip-path: none !important; }
	.about-stage-frame{ transform: none !important; }
	.about-story-step{ opacity: 1 !important; }
	/* the louvres open straight away rather than sweeping */
	.about-louvres i{ transition: none !important; }
	.about-story-frame.is-live .about-louvres i{ transition-delay: 0s !important; }
	/* the band still reveals, it just does not animate in */
	.about-stat{ opacity: 1 !important; transform: none !important; }
	.about-stat-icon{ opacity: 1 !important; transform: none !important; }
	.about-stat-bar i{ transform: scaleX(1) !important; transition: none !important; }
}