@charset "UTF-8"; /* Сборка стилей, пересобирается build-css.sh. Руками не править. */ /* ==== bootstrap.min.css ==== */ /*! * Bootstrap v5.3.8 (https://getbootstrap.com/) * Copyright 2011-2025 The Bootstrap Authors * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) */:root{--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}*,::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}.h1,.h2,.h3,h1,h2,h3{margin-top:0;margin-bottom:.5rem;font-weight:500;line-height:1.2;color:var(--bs-heading-color)}.h1,h1{font-size:calc(1.375rem + 1.5vw)}@media (min-width:1200px){.h1,h1{font-size:2.5rem}}.h2,h2{font-size:calc(1.325rem + .9vw)}@media (min-width:1200px){.h2,h2{font-size:2rem}}.h3,h3{font-size:calc(1.3rem + .6vw)}@media (min-width:1200px){.h3,h3{font-size:1.75rem}}p{margin-top:0;margin-bottom:1rem}address{margin-bottom:1rem;font-style:normal;line-height:inherit}ol,ul{padding-left:2rem}ol,ul{margin-top:0;margin-bottom:1rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}b,strong{font-weight:bolder}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}pre{font-family:var(--bs-font-monospace);font-size:1em}pre{display:block;margin-top:0;margin-bottom:1rem;overflow:auto;font-size:.875em}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,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,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}[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}legend{float:left;width:100%;padding:0;margin-bottom:.5rem;line-height:inherit;font-size:calc(1.275rem + .3vw)}@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}[type=search]::-webkit-search-cancel-button{cursor:pointer;filter:grayscale(1)}::-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}progress{vertical-align:baseline}[hidden]{display:none!important}.lead{font-size:1.25rem;font-weight:300}.container,.container-fluid{--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)}.col{flex:1 0 0}@media (min-width:992px){.col-lg-5{flex:0 0 auto;width:41.66666667%}.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%}}.table{--bs-table-color-type:initial;--bs-table-bg-type:initial;--bs-table-color-state:initial;--bs-table-bg-state:initial;--bs-table-color:var(--bs-emphasis-color);--bs-table-bg:var(--bs-body-bg);--bs-table-border-color:var(--bs-border-color);--bs-table-accent-bg:transparent;--bs-table-striped-color:var(--bs-emphasis-color);--bs-table-striped-bg:rgba(var(--bs-emphasis-color-rgb), 0.05);--bs-table-active-color:var(--bs-emphasis-color);--bs-table-active-bg:rgba(var(--bs-emphasis-color-rgb), 0.1);--bs-table-hover-color:var(--bs-emphasis-color);--bs-table-hover-bg:rgba(var(--bs-emphasis-color-rgb), 0.075);width:100%;margin-bottom:1rem;vertical-align:top;border-color:var(--bs-table-border-color)}.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>tbody{vertical-align:inherit}.table>thead{vertical-align:bottom}.btn{--bs-btn-padding-x:0.75rem;--bs-btn-padding-y:0.375rem;--bs-btn-font-family: ;--bs-btn-font-size:1rem;--bs-btn-font-weight:400;--bs-btn-line-height:1.5;--bs-btn-color:var(--bs-body-color);--bs-btn-bg:transparent;--bs-btn-border-width:var(--bs-border-width);--bs-btn-border-color:transparent;--bs-btn-border-radius:var(--bs-border-radius);--bs-btn-hover-border-color:transparent;--bs-btn-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.15),0 1px 1px rgba(0, 0, 0, 0.075);--bs-btn-disabled-opacity:0.65;--bs-btn-focus-box-shadow:0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb), .5);display:inline-block;padding:var(--bs-btn-padding-y) var(--bs-btn-padding-x);font-family:var(--bs-btn-font-family);font-size:var(--bs-btn-font-size);font-weight:var(--bs-btn-font-weight);line-height:var(--bs-btn-line-height);color:var(--bs-btn-color);text-align:center;text-decoration:none;vertical-align:middle;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;border:var(--bs-btn-border-width) solid var(--bs-btn-border-color);border-radius:var(--bs-btn-border-radius);background-color:var(--bs-btn-bg);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){.btn{transition:none}}.btn:hover{color:var(--bs-btn-hover-color);background-color:var(--bs-btn-hover-bg);border-color:var(--bs-btn-hover-border-color)}.btn:focus-visible{color:var(--bs-btn-hover-color);background-color:var(--bs-btn-hover-bg);border-color:var(--bs-btn-hover-border-color);outline:0;box-shadow:var(--bs-btn-focus-box-shadow)}.btn.show,.btn:first-child:active,: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)}.btn.show:focus-visible,.btn:first-child:active:focus-visible,:not(.btn-check)+.btn:active:focus-visible{box-shadow:var(--bs-btn-focus-box-shadow)}.btn.disabled,.btn:disabled{color:var(--bs-btn-disabled-color);pointer-events:none;background-color:var(--bs-btn-disabled-bg);border-color:var(--bs-btn-disabled-border-color);opacity:var(--bs-btn-disabled-opacity)}.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}}.nav{--bs-nav-link-padding-x:1rem;--bs-nav-link-padding-y:0.5rem;--bs-nav-link-font-weight: ;--bs-nav-link-color:var(--bs-link-color);--bs-nav-link-hover-color:var(--bs-link-hover-color);--bs-nav-link-disabled-color:var(--bs-secondary-color);display:flex;flex-wrap:wrap;padding-left:0;margin-bottom:0;list-style:none}.card{--bs-card-spacer-y:1rem;--bs-card-spacer-x:1rem;--bs-card-title-spacer-y:0.5rem;--bs-card-title-color: ;--bs-card-subtitle-color: ;--bs-card-border-width:var(--bs-border-width);--bs-card-border-color:var(--bs-border-color-translucent);--bs-card-border-radius:var(--bs-border-radius);--bs-card-box-shadow: ;--bs-card-inner-border-radius:calc(var(--bs-border-radius) - (var(--bs-border-width)));--bs-card-cap-padding-y:0.5rem;--bs-card-cap-padding-x:1rem;--bs-card-cap-bg:rgba(var(--bs-body-color-rgb), 0.03);--bs-card-cap-color: ;--bs-card-height: ;--bs-card-color: ;--bs-card-bg:var(--bs-body-bg);--bs-card-img-overlay-padding:1rem;--bs-card-group-margin:0.75rem;position:relative;display:flex;flex-direction:column;min-width:0;height:var(--bs-card-height);color:var(--bs-body-color);word-wrap:break-word;background-color:var(--bs-card-bg);background-clip:border-box;border:var(--bs-card-border-width) solid var(--bs-card-border-color);border-radius:var(--bs-card-border-radius)}.accordion-body{padding:var(--bs-accordion-body-padding-y) var(--bs-accordion-body-padding-x)}.breadcrumb{--bs-breadcrumb-padding-x:0;--bs-breadcrumb-padding-y:0;--bs-breadcrumb-margin-bottom:1rem;--bs-breadcrumb-bg: ;--bs-breadcrumb-border-radius: ;--bs-breadcrumb-divider-color:var(--bs-secondary-color);--bs-breadcrumb-item-padding-x:0.5rem;--bs-breadcrumb-item-active-color:var(--bs-secondary-color);display:flex;flex-wrap:wrap;padding:var(--bs-breadcrumb-padding-y) var(--bs-breadcrumb-padding-x);margin-bottom:var(--bs-breadcrumb-margin-bottom);font-size:var(--bs-breadcrumb-font-size);list-style:none;background-color:var(--bs-breadcrumb-bg);border-radius:var(--bs-breadcrumb-border-radius)}.pagination{--bs-pagination-padding-x:0.75rem;--bs-pagination-padding-y:0.375rem;--bs-pagination-font-size:1rem;--bs-pagination-color:var(--bs-link-color);--bs-pagination-bg:var(--bs-body-bg);--bs-pagination-border-width:var(--bs-border-width);--bs-pagination-border-color:var(--bs-border-color);--bs-pagination-border-radius:var(--bs-border-radius);--bs-pagination-hover-color:var(--bs-link-hover-color);--bs-pagination-hover-bg:var(--bs-tertiary-bg);--bs-pagination-hover-border-color:var(--bs-border-color);--bs-pagination-focus-color:var(--bs-link-hover-color);--bs-pagination-focus-bg:var(--bs-secondary-bg);--bs-pagination-focus-box-shadow:0 0 0 0.25rem rgba(13, 110, 253, 0.25);--bs-pagination-active-color:#fff;--bs-pagination-active-bg:#0d6efd;--bs-pagination-active-border-color:#0d6efd;--bs-pagination-disabled-color:var(--bs-secondary-color);--bs-pagination-disabled-bg:var(--bs-secondary-bg);--bs-pagination-disabled-border-color:var(--bs-border-color);display:flex;padding-left:0;list-style:none}@keyframes progress-bar-stripes{0%{background-position-x:var(--bs-progress-height)}}.progress{--bs-progress-height:1rem;--bs-progress-font-size:0.75rem;--bs-progress-bg:var(--bs-secondary-bg);--bs-progress-border-radius:var(--bs-border-radius);--bs-progress-box-shadow:var(--bs-box-shadow-inset);--bs-progress-bar-color:#fff;--bs-progress-bar-bg:#0d6efd;--bs-progress-bar-transition:width 0.6s ease;display:flex;height:var(--bs-progress-height);overflow:hidden;font-size:var(--bs-progress-font-size);background-color:var(--bs-progress-bg);border-radius:var(--bs-progress-border-radius)}:root{--bs-btn-close-filter: }.modal{--bs-modal-zindex:1055;--bs-modal-width:500px;--bs-modal-padding:1rem;--bs-modal-margin:0.5rem;--bs-modal-color:var(--bs-body-color);--bs-modal-bg:var(--bs-body-bg);--bs-modal-border-color:var(--bs-border-color-translucent);--bs-modal-border-width:var(--bs-border-width);--bs-modal-border-radius:var(--bs-border-radius-lg);--bs-modal-box-shadow:var(--bs-box-shadow-sm);--bs-modal-inner-border-radius:calc(var(--bs-border-radius-lg) - (var(--bs-border-width)));--bs-modal-header-padding-x:1rem;--bs-modal-header-padding-y:1rem;--bs-modal-header-padding:1rem 1rem;--bs-modal-header-border-color:var(--bs-border-color);--bs-modal-header-border-width:var(--bs-border-width);--bs-modal-title-line-height:1.5;--bs-modal-footer-gap:0.5rem;--bs-modal-footer-bg: ;--bs-modal-footer-border-color:var(--bs-border-color);--bs-modal-footer-border-width:var(--bs-border-width);position:fixed;top:0;left:0;z-index:var(--bs-modal-zindex);display:none;width:100%;height:100%;overflow-x:hidden;overflow-y:auto;outline:0}@media (min-width:576px){.modal{--bs-modal-margin:1.75rem;--bs-modal-box-shadow:var(--bs-box-shadow)}}.tooltip{--bs-tooltip-zindex:1080;--bs-tooltip-max-width:200px;--bs-tooltip-padding-x:0.5rem;--bs-tooltip-padding-y:0.25rem;--bs-tooltip-margin: ;--bs-tooltip-font-size:0.875rem;--bs-tooltip-color:var(--bs-body-bg);--bs-tooltip-bg:var(--bs-emphasis-color);--bs-tooltip-border-radius:var(--bs-border-radius);--bs-tooltip-opacity:0.9;--bs-tooltip-arrow-width:0.8rem;--bs-tooltip-arrow-height:0.4rem;z-index:var(--bs-tooltip-zindex);display:block;margin:var(--bs-tooltip-margin);font-family:var(--bs-font-sans-serif);font-style:normal;font-weight:400;line-height:1.5;text-align:left;text-align:start;text-decoration:none;text-shadow:none;text-transform:none;letter-spacing:normal;word-break:normal;white-space:normal;word-spacing:normal;line-break:auto;font-size:var(--bs-tooltip-font-size);word-wrap:break-word;opacity:0}.tooltip.show{opacity:var(--bs-tooltip-opacity)}:root{--bs-carousel-indicator-active-bg:#fff;--bs-carousel-caption-color:#fff;--bs-carousel-control-icon-filter: }@keyframes spinner-border{to{transform:rotate(360deg)}}@keyframes spinner-grow{0%{transform:scale(0)}50%{opacity:1;transform:none}}.placeholder{display:inline-block;min-height:1em;vertical-align:middle;cursor:wait;background-color:currentcolor;opacity:.5}.placeholder.btn::before{display:inline-block;content:""}@keyframes placeholder-glow{50%{opacity:.2}}@keyframes placeholder-wave{100%{-webkit-mask-position:-200% 0%;mask-position:-200% 0%}}.visually-hidden{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:not(caption){position:absolute!important}.visually-hidden *{overflow:hidden!important}.overflow-hidden{overflow:hidden!important}.d-flex{display:flex!important}.d-inline-flex{display:inline-flex!important}.d-none{display:none!important}.flex-wrap{flex-wrap:wrap!important}.justify-content-center{justify-content:center!important}.justify-content-between{justify-content:space-between!important}.align-items-center{align-items:center!important}.mb-0{margin-bottom:0!important}.mb-4{margin-bottom:1.5rem!important}.gap-3{gap:1rem!important}.text-center{text-align:center!important}.visible{visibility:visible!important}@media (min-width:992px){.d-lg-block{display:block!important}.d-lg-inline-flex{display:inline-flex!important}.d-lg-none{display:none!important}}@media (min-width:1400px){.d-xxl-inline-flex{display:inline-flex!important}} /* ==== pxn-icons.css ==== */ @font-face { font-family: "pxn-icon"; src: url("../fonts/pxn-icon.eot"); src: url("../fonts/pxn-icon.eot#iefix") format("embedded-opentype"), url("../fonts/pxn-icon.ttf") format("truetype"), url("../fonts/pxn-icon.woff") format("woff"), url("../images/pxn-icon.svg#pxn-icon") format("svg"); font-weight: normal; font-style: normal; font-display: block; } [class^="pxni-"], [class*=" pxni-"] { /* use !important to prevent issues with browser extensions that change fonts */ font-family: "pxn-icon" !important; speak: never; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .pxni-reply:before { content: "\e958"; } .pxni-file:before { content: "\e959"; } .pxni-star-circle:before { content: "\e957"; } .pxni-quote-right-outline:before { content: "\e94c"; } .pxni-quote-left-outline:before { content: "\e94d"; } .pxni-map-pin:before { content: "\e94e"; } .pxni-magnifying-glass:before { content: "\e94f"; } .pxni-envelope-2:before { content: "\e950"; } .pxni-checked:before { content: "\e951"; } .pxni-checked-circle-2:before { content: "\e952"; } .pxni-arrow-right-2:before { content: "\e953"; } .pxni-arrow-left-2:before { content: "\e954"; } .pxni-angle-right:before { content: "\e955"; } .pxni-angle-left:before { content: "\e956"; } .pxni-planning:before { content: "\e945"; } .pxni-plus:before { content: "\e935"; } .pxni-progress:before { content: "\e936"; } .pxni-quote-left:before { content: "\e942"; } .pxni-quote-right:before { content: "\e943"; } .pxni-share:before { content: "\e944"; } .pxni-strategy:before { content: "\e946"; } .pxni-decisions:before { content: "\e947"; } .pxni-expansion:before { content: "\e948"; } .pxni-minus:before { content: "\e949"; } .pxni-phone:before { content: "\e94a"; } .pxni-play:before { content: "\e94b"; } .pxni-close:before { content: "\e940"; } .pxni-menu:before { content: "\e941"; } .pxni-execution:before { content: "\e929"; } .pxni-award:before { content: "\e92a"; } .pxni-check:before { content: "\e92b"; } .pxni-checked-circle:before { content: "\e92c"; } .pxni-comments:before { content: "\e92d"; } .pxni-double-arrow-left:before { content: "\e92e"; } .pxni-double-arrow-right:before { content: "\e92f"; } .pxni-dribbble-line:before { content: "\e930"; } .pxni-facebook-line:before { content: "\e931"; } .pxni-instagram-line:before { content: "\e932"; } .pxni-linkedin-line:before { content: "\e933"; } .pxni-pinterest-line:before { content: "\e934"; } .pxni-send:before { content: "\e937"; } .pxni-snapchat-line:before { content: "\e938"; } .pxni-spotify-line:before { content: "\e939"; } .pxni-twitter-line:before { content: "\e93a"; } .pxni-vimeo-line:before { content: "\e93b"; } .pxni-youtube-line:before { content: "\e93c"; } .pxni-author:before { content: "\e93d"; } .pxni-behance-line:before { content: "\e93e"; } .pxni-calendar:before { content: "\e93f"; } .pxni-solutions:before { content: "\e900"; } .pxni-spotify:before { content: "\e901"; } .pxni-star:before { content: "\e902"; } .pxni-success:before { content: "\e903"; } .pxni-telegram:before { content: "\e904"; } .pxni-threads:before { content: "\e905"; } .pxni-tiktok:before { content: "\e906"; } .pxni-transformation:before { content: "\e907"; } .pxni-tumblr:before { content: "\e908"; } .pxni-twitch:before { content: "\e909"; } .pxni-vimeo:before { content: "\e90a"; } .pxni-whatsapp:before { content: "\e90b"; } .pxni-wining-time:before { content: "\e90c"; } .pxni-x-twitter:before { content: "\e90d"; } .pxni-youtube:before { content: "\e90e"; } .pxni-angle-down:before { content: "\e90f"; } .pxni-angle-up:before { content: "\e910"; } .pxni-apple:before { content: "\e911"; } .pxni-approach:before { content: "\e912"; } .pxni-arrow-left:before { content: "\e913"; } .pxni-arrow-right:before { content: "\e914"; } .pxni-bluesky:before { content: "\e915"; } .pxni-clock:before { content: "\e916"; } .pxni-compliance:before { content: "\e917"; } .pxni-consultants:before { content: "\e918"; } .pxni-discord:before { content: "\e919"; } .pxni-dribble:before { content: "\e91a"; } .pxni-envelope:before { content: "\e91b"; } .pxni-facebook:before { content: "\e91c"; } .pxni-github:before { content: "\e91d"; } .pxni-globe:before { content: "\e91e"; } .pxni-google:before { content: "\e91f"; } .pxni-growth:before { content: "\e920"; } .pxni-instagram:before { content: "\e921"; } .pxni-linkedin:before { content: "\e922"; } .pxni-messenger:before { content: "\e923"; } .pxni-pin:before { content: "\e924"; } .pxni-pinterest:before { content: "\e925"; } .pxni-search:before { content: "\e926"; } .pxni-shield-check:before { content: "\e927"; } .pxni-signal:before { content: "\e928"; } /* ==== meanmenu.min.css ==== */ /*! ####################################################################### MeanMenu 2.0.7 -------- To be used with jquery.meanmenu.js by Chris Wharton (http://www.meanthemes.com/plugins/meanmenu/) ####################################################################### */a.meanmenu-reveal{display:none}.mean-container .mean-bar{float:left;width:100%;position:relative;background:#0c1923;padding:4px 0;min-height:42px;z-index:999999}.mean-container a.meanmenu-reveal{width:22px;height:22px;padding:13px 13px 11px;position:absolute;top:0;right:0;cursor:pointer;color:#fff;text-decoration:none;font-size:16px;text-indent:-9999em;line-height:22px;font-size:1px;display:block;font-family:Arial,Helvetica,sans-serif;font-weight:700}.mean-container a.meanmenu-reveal span{display:block;background:#fff;height:3px;margin-top:3px}.mean-container .mean-nav{float:left;width:100%;background:#0c1923;margin-top:44px}.mean-container .mean-nav ul{padding:0;margin:0;width:100%;list-style-type:none}.mean-container .mean-nav ul li{position:relative;float:left;width:100%}.mean-container .mean-nav ul li a{display:block;float:left;width:90%;padding:1em 5%;margin:0;text-align:left;color:#fff;border-top:1px solid #383838;border-top:1px solid rgba(255,255,255,.5);text-decoration:none;text-transform:uppercase}.mean-container .mean-nav ul li li a{width:80%;padding:1em 10%;border-top:1px solid #f1f1f1;border-top:1px solid rgba(255,255,255,.25);opacity:.75;filter:alpha(opacity=75);text-shadow:none!important;visibility:visible}.mean-container .mean-nav ul li.mean-last a{border-bottom:0;margin-bottom:0}.mean-container .mean-nav ul li li li a{width:70%;padding:1em 15%}.mean-container .mean-nav ul li li li li a{width:60%;padding:1em 20%}.mean-container .mean-nav ul li li li li li a{width:50%;padding:1em 25%}.mean-container .mean-nav ul li a:hover{background:#252525;background:rgba(255,255,255,.1)}.mean-container .mean-nav ul li a.mean-expand{margin-top:1px;width:26px;height:32px;padding:12px!important;text-align:center;position:absolute;right:0;top:0;z-index:2;font-weight:700;background:rgba(255,255,255,.1);border:0!important;border-left:1px solid rgba(255,255,255,.4)!important;border-bottom:1px solid rgba(255,255,255,.2)!important}.mean-container .mean-nav ul li a.mean-expand:hover{background:rgba(0,0,0,.9)}.mean-container .mean-push{float:left;width:100%;padding:0;margin:0;clear:both}.mean-nav .wrapper{width:100%;padding:0;margin:0}.mean-container .mean-bar,.mean-container .mean-bar *{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box}.mean-remove{display:none!important} /* ==== swiper.min.css ==== */ /** * Swiper 8.4.5 * Most modern mobile touch slider and framework with hardware accelerated transitions * https://swiperjs.com * * Copyright 2014-2022 Vladimir Kharlampidi * * Released under the MIT License * * Released on: November 21, 2022 */ @font-face{font-family:swiper-icons;src:url('data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA');font-weight:400;font-style:normal}:root{--swiper-theme-color:#007aff}.swiper{margin-left:auto;margin-right:auto;position:relative;overflow:hidden;list-style:none;padding:0;z-index:1}.swiper-vertical>.swiper-wrapper{flex-direction:column}.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:flex;transition-property:transform;box-sizing:content-box}.swiper-android .swiper-slide,.swiper-wrapper{transform:translate3d(0px,0,0)}.swiper-pointer-events{touch-action:pan-y}.swiper-pointer-events.swiper-vertical{touch-action:pan-x}.swiper-slide{flex-shrink:0;width:100%;height:100%;position:relative;transition-property:transform}.swiper-slide-invisible-blank{visibility:hidden}.swiper-autoheight,.swiper-autoheight .swiper-slide{height:auto}.swiper-autoheight .swiper-wrapper{align-items:flex-start;transition-property:transform,height}.swiper-backface-hidden .swiper-slide{transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-3d,.swiper-3d.swiper-css-mode .swiper-wrapper{perspective:1200px}.swiper-3d .swiper-cube-shadow,.swiper-3d .swiper-slide,.swiper-3d .swiper-slide-shadow,.swiper-3d .swiper-slide-shadow-bottom,.swiper-3d .swiper-slide-shadow-left,.swiper-3d .swiper-slide-shadow-right,.swiper-3d .swiper-slide-shadow-top,.swiper-3d .swiper-wrapper{transform-style:preserve-3d}.swiper-3d .swiper-slide-shadow,.swiper-3d .swiper-slide-shadow-bottom,.swiper-3d .swiper-slide-shadow-left,.swiper-3d .swiper-slide-shadow-right,.swiper-3d .swiper-slide-shadow-top{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:10}.swiper-3d .swiper-slide-shadow{background:rgba(0,0,0,.15)}.swiper-3d .swiper-slide-shadow-left{background-image:linear-gradient(to left,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-3d .swiper-slide-shadow-right{background-image:linear-gradient(to right,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-3d .swiper-slide-shadow-top{background-image:linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-3d .swiper-slide-shadow-bottom{background-image:linear-gradient(to bottom,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-css-mode>.swiper-wrapper{overflow:auto;scrollbar-width:none;-ms-overflow-style:none}.swiper-css-mode>.swiper-wrapper::-webkit-scrollbar{display:none}.swiper-css-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:start start}.swiper-horizontal.swiper-css-mode>.swiper-wrapper{scroll-snap-type:x mandatory}.swiper-vertical.swiper-css-mode>.swiper-wrapper{scroll-snap-type:y mandatory}.swiper-centered>.swiper-wrapper::before{content:'';flex-shrink:0;order:9999}.swiper-centered.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child{margin-inline-start:var(--swiper-centered-offset-before)}.swiper-centered.swiper-horizontal>.swiper-wrapper::before{height:100%;min-height:1px;width:var(--swiper-centered-offset-after)}.swiper-centered.swiper-vertical>.swiper-wrapper>.swiper-slide:first-child{margin-block-start:var(--swiper-centered-offset-before)}.swiper-centered.swiper-vertical>.swiper-wrapper::before{width:100%;min-width:1px;height:var(--swiper-centered-offset-after)}.swiper-centered>.swiper-wrapper>.swiper-slide{scroll-snap-align:center center}.swiper-virtual .swiper-slide{-webkit-backface-visibility:hidden;transform:translateZ(0)}.swiper-virtual.swiper-css-mode .swiper-wrapper::after{content:'';position:absolute;left:0;top:0;pointer-events:none}.swiper-virtual.swiper-css-mode.swiper-horizontal .swiper-wrapper::after{height:1px;width:var(--swiper-virtual-size)}.swiper-virtual.swiper-css-mode.swiper-vertical .swiper-wrapper::after{width:1px;height:var(--swiper-virtual-size)}:root{--swiper-navigation-size:44px}.swiper-button-next,.swiper-button-prev{position:absolute;top:50%;width:calc(var(--swiper-navigation-size)/ 44 * 27);height:var(--swiper-navigation-size);margin-top:calc(0px - (var(--swiper-navigation-size)/ 2));z-index:10;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--swiper-navigation-color,var(--swiper-theme-color))}.swiper-button-next.swiper-button-disabled,.swiper-button-prev.swiper-button-disabled{opacity:.35;cursor:auto;pointer-events:none}.swiper-button-next.swiper-button-hidden,.swiper-button-prev.swiper-button-hidden{opacity:0;cursor:auto;pointer-events:none}.swiper-navigation-disabled .swiper-button-next,.swiper-navigation-disabled .swiper-button-prev{display:none!important}.swiper-button-next:after,.swiper-button-prev:after{font-family:swiper-icons;font-size:var(--swiper-navigation-size);text-transform:none!important;letter-spacing:0;font-variant:initial;line-height:1}.swiper-button-prev,.swiper-rtl .swiper-button-next{left:10px;right:auto}.swiper-button-prev:after,.swiper-rtl .swiper-button-next:after{content:'prev'}.swiper-button-next,.swiper-rtl .swiper-button-prev{right:10px;left:auto}.swiper-button-next:after,.swiper-rtl .swiper-button-prev:after{content:'next'}.swiper-button-lock{display:none}.swiper-pagination{position:absolute;text-align:center;transition:.3s opacity;transform:translate3d(0,0,0);z-index:10}.swiper-pagination.swiper-pagination-hidden{opacity:0}.swiper-pagination-disabled>.swiper-pagination,.swiper-pagination.swiper-pagination-disabled{display:none!important}.swiper-horizontal>.swiper-pagination-bullets,.swiper-pagination-bullets.swiper-pagination-horizontal,.swiper-pagination-custom,.swiper-pagination-fraction{bottom:10px;left:0;width:100%}.swiper-pagination-bullets-dynamic{overflow:hidden;font-size:0}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transform:scale(.33);position:relative}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active{transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main{transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev{transform:scale(.33)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next{transform:scale(.33)}.swiper-pagination-bullet{width:var(--swiper-pagination-bullet-width,var(--swiper-pagination-bullet-size,8px));height:var(--swiper-pagination-bullet-height,var(--swiper-pagination-bullet-size,8px));display:inline-block;border-radius:50%;background:var(--swiper-pagination-bullet-inactive-color,#000);opacity:var(--swiper-pagination-bullet-inactive-opacity, .2)}button.swiper-pagination-bullet{border:none;margin:0;padding:0;box-shadow:none;-webkit-appearance:none;appearance:none}.swiper-pagination-clickable .swiper-pagination-bullet{cursor:pointer}.swiper-pagination-bullet:only-child{display:none!important}.swiper-pagination-bullet-active{opacity:var(--swiper-pagination-bullet-opacity, 1);background:var(--swiper-pagination-color,var(--swiper-theme-color))}.swiper-pagination-vertical.swiper-pagination-bullets,.swiper-vertical>.swiper-pagination-bullets{right:10px;top:50%;transform:translate3d(0px,-50%,0)}.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-vertical>.swiper-pagination-bullets .swiper-pagination-bullet{margin:var(--swiper-pagination-bullet-vertical-gap,6px) 0;display:block}.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{top:50%;transform:translateY(-50%);width:8px}.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{display:inline-block;transition:.2s transform,.2s top}.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{margin:0 var(--swiper-pagination-bullet-horizontal-gap,4px)}.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{left:50%;transform:translateX(-50%);white-space:nowrap}.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s left}.swiper-horizontal.swiper-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s right}.swiper-pagination-progressbar{background:rgba(0,0,0,.25);position:absolute}.swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background:var(--swiper-pagination-color,var(--swiper-theme-color));position:absolute;left:0;top:0;width:100%;height:100%;transform:scale(0);transform-origin:left top}.swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{transform-origin:right top}.swiper-horizontal>.swiper-pagination-progressbar,.swiper-pagination-progressbar.swiper-pagination-horizontal,.swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite,.swiper-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite{width:100%;height:4px;left:0;top:0}.swiper-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-vertical,.swiper-vertical>.swiper-pagination-progressbar{width:4px;height:100%;left:0;top:0}.swiper-pagination-lock{display:none}.swiper-scrollbar{border-radius:10px;position:relative;-ms-touch-action:none;background:rgba(0,0,0,.1)}.swiper-scrollbar-disabled>.swiper-scrollbar,.swiper-scrollbar.swiper-scrollbar-disabled{display:none!important}.swiper-horizontal>.swiper-scrollbar,.swiper-scrollbar.swiper-scrollbar-horizontal{position:absolute;left:1%;bottom:3px;z-index:50;height:5px;width:98%}.swiper-scrollbar.swiper-scrollbar-vertical,.swiper-vertical>.swiper-scrollbar{position:absolute;right:3px;top:1%;z-index:50;width:5px;height:98%}.swiper-scrollbar-drag{height:100%;width:100%;position:relative;background:rgba(0,0,0,.5);border-radius:10px;left:0;top:0}.swiper-scrollbar-cursor-drag{cursor:move}.swiper-scrollbar-lock{display:none}.swiper-zoom-container{width:100%;height:100%;display:flex;justify-content:center;align-items:center;text-align:center}.swiper-zoom-container>canvas,.swiper-zoom-container>img,.swiper-zoom-container>svg{max-width:100%;max-height:100%;object-fit:contain}.swiper-slide-zoomed{cursor:move}.swiper-lazy-preloader{width:42px;height:42px;position:absolute;left:50%;top:50%;margin-left:-21px;margin-top:-21px;z-index:10;transform-origin:50%;box-sizing:border-box;border:4px solid var(--swiper-preloader-color,var(--swiper-theme-color));border-radius:50%;border-top-color:transparent}.swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader,.swiper:not(.swiper-watch-progress) .swiper-lazy-preloader{animation:swiper-preloader-spin 1s infinite linear}.swiper-lazy-preloader-white{--swiper-preloader-color:#fff}.swiper-lazy-preloader-black{--swiper-preloader-color:#000}@keyframes swiper-preloader-spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.swiper .swiper-notification{position:absolute;left:0;top:0;pointer-events:none;opacity:0;z-index:-1000}.swiper-free-mode>.swiper-wrapper{transition-timing-function:ease-out;margin:0 auto}.swiper-grid>.swiper-wrapper{flex-wrap:wrap}.swiper-grid-column>.swiper-wrapper{flex-wrap:wrap;flex-direction:column}.swiper-fade.swiper-free-mode .swiper-slide{transition-timing-function:ease-out}.swiper-fade .swiper-slide{pointer-events:none;transition-property:opacity}.swiper-fade .swiper-slide .swiper-slide{pointer-events:none}.swiper-fade .swiper-slide-active,.swiper-fade .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-cube{overflow:visible}.swiper-cube .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1;visibility:hidden;transform-origin:0 0;width:100%;height:100%}.swiper-cube .swiper-slide .swiper-slide{pointer-events:none}.swiper-cube.swiper-rtl .swiper-slide{transform-origin:100% 0}.swiper-cube .swiper-slide-active,.swiper-cube .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-cube .swiper-slide-active,.swiper-cube .swiper-slide-next,.swiper-cube .swiper-slide-next+.swiper-slide,.swiper-cube .swiper-slide-prev{pointer-events:auto;visibility:visible}.swiper-cube .swiper-slide-shadow-bottom,.swiper-cube .swiper-slide-shadow-left,.swiper-cube .swiper-slide-shadow-right,.swiper-cube .swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-cube .swiper-cube-shadow{position:absolute;left:0;bottom:0px;width:100%;height:100%;opacity:.6;z-index:0}.swiper-cube .swiper-cube-shadow:before{content:'';background:#000;position:absolute;left:0;top:0;bottom:0;right:0;filter:blur(50px)}.swiper-flip{overflow:visible}.swiper-flip .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1}.swiper-flip .swiper-slide .swiper-slide{pointer-events:none}.swiper-flip .swiper-slide-active,.swiper-flip .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-flip .swiper-slide-shadow-bottom,.swiper-flip .swiper-slide-shadow-left,.swiper-flip .swiper-slide-shadow-right,.swiper-flip .swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-creative .swiper-slide{-webkit-backface-visibility:hidden;backface-visibility:hidden;overflow:hidden;transition-property:transform,opacity,height}.swiper-cards{overflow:visible}.swiper-cards .swiper-slide{transform-origin:center bottom;-webkit-backface-visibility:hidden;backface-visibility:hidden;overflow:hidden} /* ==== main.css ==== */ /*----------------------------------------------------------------------------------- Theme Name: Rovix - Business Consulting HTML Template Author: pixenium-agency Support: suppor@pixeniumagency.com Description: Business Consulting HTML Template Version: 1.0.0 ----------------------------------------------------------------------------------- /************ TABLE OF CONTENTS *************** Theme Default CSS Custom Animate Keyframe Preloader CSS Cursor CSS Back to top CSS Button CSS Topbar Info Theme Header CSS Theme Footer CSS Search CSS Offcanvas CSS Section Heading CSS Slider Nav & Dot CSS Icon Box CSS Author CSS List CSS Socials CSS Counter CSS Accordion CSS Feature CSS Page Header CSS Video CSS Sidebar CSS Pagination CSS Blog Standard CSS Post Navigation CSS Blog Details CSS Coming Soon CSS Error Page CSS Hero Slider CSS Hero CSS We Offer CSS About CSS Why Choose CSS Team CSS Projects CSS Pricing CSS Testimonial CSS Blog CSS Marquee CSS Contact CSS Services CSS Counter Section CSS Process CSS FAQ CSS Progress CSS CTA CSS Service Details CSS Project Details CSS Blog Details CSS **********************************************/ /**---------------------------------------- START: Theme Default CSS ----------------------------------------*/ :root { /** @Font-Family Declaration */ --pxn-ff-body: 'Urbanist', sans-serif; --pxn-ff-heading: 'Urbanist', sans-serif; --pxn-ff-icons: 'pxn-icon'; /** @Font-weight Declaration */ --pxn-fw-normal: 400; --pxn-fw-thin: 100; --pxn-fw-elight: 200; --pxn-fw-light: 300; --pxn-fw-regular: 400; --pxn-fw-medium: 500; --pxn-fw-sbold: 600; --pxn-fw-bold: 700; --pxn-fw-ebold: 800; --pxn-fw-black: 900; /** @Font-Size Declaration */ --pxn-fs-body: 16px; --pxn-fs-h1: 40px; --pxn-fs-h2: 32px; --pxn-fs-h3: 28px; --pxn-fs-h4: 24px; --pxn-fs-h5: 20px; --pxn-fs-h6: 16px; /** @Color Declaration */ --pxn-color-common-white: #ffffff; --pxn-color-common-black: #000000; --pxn-color-heading-primary: #063d2f; --pxn-color-text-body: #7e7e7a; --pxn-color-text-placeholder: rgba(126, 126, 122, 0.8); --pxn-color-theme-primary: #fbd819; --pxn-color-theme-secondary: #063d2f; --pxn-color-theme-bg-primary: #063d2f; --pxn-color-theme-bg-light: #f5f5f5; --pxn-color-theme-bg-light-2: #f3f1eb; --pxn-color-grey-1: #afc2bd; --pxn-color-border-1: rgba(6, 61, 47, 0.15); --pxn-color-border-2: rgba(255, 255, 255, 0.15); --pxn-color-border-3: rgba(18, 18, 18, 0.3); --pxn-color-border-4: #181034; } * { margin: 0; padding: 0; -webkit-box-sizing: border-box; box-sizing: border-box; } *::-webkit-input-placeholder { color: var(--pxn-color-text-placeholder); opacity: 1; } *::-moz-placeholder { color: var(--pxn-color-text-placeholder); opacity: 1; } *:-ms-input-placeholder { color: var(--pxn-color-text-placeholder); opacity: 1; } *::-ms-input-placeholder { color: var(--pxn-color-text-placeholder); opacity: 1; } *::placeholder { color: var(--pxn-color-text-placeholder); opacity: 1; } /** Typography CSS */ html, body { overflow-x: hidden; } body { font-size: var(--pxn-fs-body); font-family: var(--pxn-ff-body); font-weight: var(--pxn-fw-regular); color: var(--pxn-color-text-body); line-height: 1.6; } body p { margin-bottom: 1rem; } h1, h2, h3 { font-family: var(--pxn-ff-heading); font-weight: var(--pxn-fw-bold); color: var(--pxn-color-heading-primary); line-height: 1.2; margin-top: 0px; margin-bottom: 1rem; } h1 a, h2 a, h3 a { display: inline-block; font-family: inherit; font-weight: inherit; font-size: inherit; line-height: inherit; color: inherit; } h1 a:hover, h2 a:hover, h3 a:hover { color: var(--pxn-color-theme-primary); } h1 { font-size: var(--pxn-fs-h1); } @media only screen and (min-width: 768px) and (max-width: 991px) { h1 { font-size: 32px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { h1 { font-size: 28px; } } h2 { font-size: var(--pxn-fs-h2); line-height: 1.25; } @media only screen and (min-width: 992px) and (max-width: 1199px) { h2 { font-size: 30px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { h2 { font-size: 28px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { h2 { font-size: 24px; } } h3 { font-size: var(--pxn-fs-h3); line-height: 1.3; } @media only screen and (min-width: 768px) and (max-width: 991px) { h3 { font-size: 24px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { h3 { font-size: 20px; } } ul, ol { margin: 0px; padding-left: 1.5em; } a, button, .btn { color: var(--pxn-color-theme-primary); text-decoration: none; outline: none; -webkit-box-shadow: 0 0 0; box-shadow: 0 0 0; -webkit-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; } a:hover, a:focus, button:hover, button:focus, .btn:hover, .btn:focus { text-decoration: none; color: var(--pxn-color-theme-primary); } a:focus, a:focus-visible, a:focus-within, button:focus, button:focus-visible, button:focus-within, .btn:focus, .btn:focus-visible, .btn:focus-within { text-decoration: none; outline: none; -webkit-box-shadow: 0 0 0; box-shadow: 0 0 0; } button { background-color: var(--pxn-color-theme-primary); color: var(--pxn-color-common-black); border: 1px solid var(--pxn-color-theme-primary); border-radius: 0; } label { display: -webkit-box; display: -ms-flexbox; display: flex; color: var(--pxn-ff-heading); font-weight: var(--pxn-fw-medium); line-height: 1.2; color: var(--pxn-color-heading-primary); margin-bottom: 10px; } select, input[type=search], input[type=tel], input[type=text], input[type=email], input[type=url], input[type=number], input[type=date], textarea { outline: none; background-color: transparent; width: 100%; height: auto; min-height: 45px; font-family: inherit; font-size: var(--pxn-fs-body); font-weight: var(--pxn-fw-medium); line-height: 1.6; border: 1px solid var(--pxn-color-border-1); color: var(--pxn-color-heading-primary); padding: 15px 25px; -webkit-box-shadow: 0 0 0; box-shadow: 0 0 0; border-radius: 10px; -webkit-transition: border-color 0.3s; transition: border-color 0.3s; } select:focus, input[type=search]:focus, input[type=tel]:focus, input[type=text]:focus, input[type=email]:focus, input[type=url]:focus, input[type=number]:focus, input[type=date]:focus, textarea:focus { border-color: var(--pxn-color-theme-secondary); } select::-webkit-search-cancel-button, input[type=search]::-webkit-search-cancel-button, input[type=tel]::-webkit-search-cancel-button, input[type=text]::-webkit-search-cancel-button, input[type=email]::-webkit-search-cancel-button, input[type=url]::-webkit-search-cancel-button, input[type=number]::-webkit-search-cancel-button, input[type=date]::-webkit-search-cancel-button, textarea::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none; } select::-ms-clear, input[type=search]::-ms-clear, input[type=tel]::-ms-clear, input[type=text]::-ms-clear, input[type=email]::-ms-clear, input[type=url]::-ms-clear, input[type=number]::-ms-clear, input[type=date]::-ms-clear, textarea::-ms-clear { display: none; width: 0; height: 0; } textarea { min-height: 130px; } .pxn-select { float: unset; } /** Common Classes CSS */ img { max-width: 100%; } .fix { overflow: hidden; } .container, .container-fluid, .row { --bs-gutter-x: 30px; } .container { max-width: 1350px; } .section-padding { padding-top: 120px; padding-bottom: 120px; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) { .section-padding { padding-top: 100px; padding-bottom: 100px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .section-padding { padding-top: 90px; padding-bottom: 90px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .section-padding { padding-top: 80px; padding-bottom: 80px; } } @media (max-width: 575px) { .section-padding { padding-top: 70px; padding-bottom: 70px; } } .glightbox-clean .gnext.disabled, .glightbox-clean .gprev.disabled { display: none; } .pxn-split-text .pxn-char { display: inline-block; visibility: hidden; /* characters are revealed via GSAP */ } .pxn-line { overflow: hidden; display: block; } .pxn-img-reveal { visibility: hidden; overflow: hidden; } .pxn-img-parallax { will-change: background-position; } /**---------------------------------------- START: Custom Animate Keyframe ----------------------------------------*/ @-webkit-keyframes linehover { 0% { width: 100%; } 50% { width: 0; inset-inline-end: 0; } 100% { width: 100%; inset-inline-start: 0; } } @keyframes linehover { 0% { width: 100%; } 50% { width: 0; inset-inline-end: 0; } 100% { width: 100%; inset-inline-start: 0; } } @-webkit-keyframes scroll { from { -webkit-transform: translateX(0); transform: translateX(0); } to { -webkit-transform: translateX(calc(-100% - 12px)); transform: translateX(calc(-100% - 12px)); } } @keyframes scroll { from { -webkit-transform: translateX(0); transform: translateX(0); } to { -webkit-transform: translateX(calc(-100% - 12px)); transform: translateX(calc(-100% - 12px)); } } @-webkit-keyframes scroll-rtl { from { -webkit-transform: translateX(0); transform: translateX(0); } to { -webkit-transform: translateX(calc(100% + 12px)); transform: translateX(calc(100% + 12px)); } } @keyframes scroll-rtl { from { -webkit-transform: translateX(0); transform: translateX(0); } to { -webkit-transform: translateX(calc(100% + 12px)); transform: translateX(calc(100% + 12px)); } } @-webkit-keyframes verticalScroll { from { -webkit-transform: translateY(0); transform: translateY(0); } to { -webkit-transform: translateY(-100%); transform: translateY(-100%); } } @keyframes verticalScroll { from { -webkit-transform: translateY(0); transform: translateY(0); } to { -webkit-transform: translateY(-100%); transform: translateY(-100%); } } @-webkit-keyframes lineHover { 0% { width: 100%; } 50% { width: 0; right: 0; } 100% { width: 100%; left: 0; } } @keyframes lineHover { 0% { width: 100%; } 50% { width: 0; right: 0; } 100% { width: 100%; left: 0; } } @-webkit-keyframes textrotate { 0% { -webkit-transform: translate(-50%, -50%) rotate(0deg); transform: translate(-50%, -50%) rotate(0deg); } 100% { -webkit-transform: translate(-50%, -50%) rotate(360deg); transform: translate(-50%, -50%) rotate(360deg); } } @keyframes textrotate { 0% { -webkit-transform: translate(-50%, -50%) rotate(0deg); transform: translate(-50%, -50%) rotate(0deg); } 100% { -webkit-transform: translate(-50%, -50%) rotate(360deg); transform: translate(-50%, -50%) rotate(360deg); } } @-webkit-keyframes pulse { 0% { -webkit-box-shadow: 0 0 0 0 currentColor; box-shadow: 0 0 0 0 currentColor; } 100% { -webkit-box-shadow: 0 0 0 20px transparent; box-shadow: 0 0 0 20px transparent; } } @keyframes pulse { 0% { -webkit-box-shadow: 0 0 0 0 currentColor; box-shadow: 0 0 0 0 currentColor; } 100% { -webkit-box-shadow: 0 0 0 20px transparent; box-shadow: 0 0 0 20px transparent; } } @-webkit-keyframes bounceY { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 25% { -webkit-transform: translateY(-15px); transform: translateY(-15px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 75% { -webkit-transform: translateY(-15px); transform: translateY(-15px); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes bounceY { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 25% { -webkit-transform: translateY(-15px); transform: translateY(-15px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 75% { -webkit-transform: translateY(-15px); transform: translateY(-15px); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } @-webkit-keyframes bounceX { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 25% { -webkit-transform: translateX(-15px); transform: translateX(-15px); } 50% { -webkit-transform: translateX(0); transform: translateX(0); } 75% { -webkit-transform: translateX(-15px); transform: translateX(-15px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes bounceX { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 25% { -webkit-transform: translateX(-15px); transform: translateX(-15px); } 50% { -webkit-transform: translateX(0); transform: translateX(0); } 75% { -webkit-transform: translateX(-15px); transform: translateX(-15px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } .pxn-bounce-y { -webkit-animation: bounceY 4s linear infinite; animation: bounceY 4s linear infinite; } /* !END: Custom Animate Keyframe */ /* START: Preloader CSS */ .preloader { position: fixed; top: 0; inset-inline-start: 0; inset-inline-end: 0; bottom: 0; z-index: 1000; background-color: var(--pxn-color-common-white); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .preloader .loader_content, .preloader .loading { height: 100px; position: relative; width: 100px; border-radius: 100%; } .preloader .loader_content { margin: 40px auto; } .preloader .loading { border: 1px solid transparent; border-color: transparent var(--pxn-color-theme-secondary) transparent var(--pxn-color-theme-secondary); -webkit-animation: rotate-loading 1.5s linear 0s infinite normal; animation: rotate-loading 1.5s linear 0s infinite normal; -webkit-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .preloader .loader_image { position: absolute; top: 50%; inset-inline-start: 50%; max-width: 66px; height: auto; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .preloader .loader_image img { max-width: 100%; height: auto; } @-webkit-keyframes rotate-loading { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes rotate-loading { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } /* END: Preloader CSS */ /**---------------------------------------- START: Cursor CSS ----------------------------------------*/ .mouse-cursor { position: fixed; left: 0; top: 0; pointer-events: none; border-radius: 50%; -webkit-transform: translateZ(0); transform: translateZ(0); } .mouse-cursor.cursor-inner, .mouse-cursor.cursor-outer { pointer-events: none; -webkit-transition: opacity 0.2s ease; transition: opacity 0.2s ease; } .mouse-cursor.cursor-inner.cursor-visible, .mouse-cursor.cursor-outer.cursor-visible { visibility: visible; } .mouse-cursor.cursor-inner.cursor-hidden, .mouse-cursor.cursor-outer.cursor-hidden { visibility: hidden; } .mouse-cursor.cursor-inner { margin-left: -3px; margin-top: -3px; width: 6px; height: 6px; z-index: 100; background-color: var(--pxn-color-theme-secondary); -webkit-transition: width 0.3s ease-in-out, height 0.3s ease-in-out, margin 0.3s ease-in-out, opacity 0.3s ease-in-out; transition: width 0.3s ease-in-out, height 0.3s ease-in-out, margin 0.3s ease-in-out, opacity 0.3s ease-in-out; } .mouse-cursor.cursor-inner.cursor-hover { margin-left: -40px; margin-top: -40px; width: 80px; height: 80px; background-color: var(--pxn-color-theme-secondary); opacity: 0.3; } .mouse-cursor.cursor-outer { margin-left: -15px; margin-top: -15px; width: 30px; height: 30px; border: 2px solid var(--pxn-color-theme-secondary); -webkit-box-sizing: border-box; box-sizing: border-box; z-index: 100; opacity: 0.5; -webkit-transition: all 0.08s ease-out; transition: all 0.08s ease-out; } .mouse-cursor.cursor-outer.cursor-hover { opacity: 0; } /* !END: Cursor CSS */ /**---------------------------------------- START: Back to top CSS ----------------------------------------*/ .pxn_back-to-top { position: fixed; inset-inline-end: 50px; bottom: 50px; height: 46px; width: 46px; cursor: pointer; display: block; border-radius: 50px; background-color: var(--pxn-color-common-white); z-index: 999; opacity: 0; visibility: hidden; -webkit-transform: translateY(50px); -ms-transform: translateY(50px); transform: translateY(50px); -webkit-transition: all 0.5s ease; transition: all 0.5s ease; } .pxn_back-to-top::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; border: 2px solid var(--pxn-color-theme-secondary); opacity: 0.3; border-radius: 50%; z-index: -1; } .pxn_back-to-top::after { position: absolute; content: "\e953"; font-family: var(--pxn-ff-icons); font-size: 20px; line-height: 1; color: var(--pxn-color-theme-secondary); inset-inline-start: 50%; top: 50%; -webkit-transform: translate(-50%, -50%) rotate(-90deg); -ms-transform: translate(-50%, -50%) rotate(-90deg); transform: translate(-50%, -50%) rotate(-90deg); } .pxn_back-to-top svg { position: relative; z-index: 2; } .pxn_back-to-top svg path { fill: none; } .pxn_back-to-top svg.progress-circle path { stroke: var(--pxn-color-theme-secondary); stroke-width: 4; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all 200ms linear; transition: all 200ms linear; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .pxn_back-to-top { inset-inline-end: 40px; bottom: 40px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) { .pxn_back-to-top { inset-inline-end: 30px; bottom: 30px; } } @media (max-width: 575px) { .pxn_back-to-top { inset-inline-end: 20px; bottom: 20px; } } /* !END: Back to top CSS */ /**---------------------------------------- START: Button CSS ----------------------------------------*/ .pxn-btn-primary { position: relative; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 20px; font-size: 18px; line-height: 1.3; font-family: var(--pxn-ff-heading); font-weight: var(--pxn-fw-sbold); color: var(--pxn-color-theme-secondary); padding: 4px 4px 4px 20px; background-color: var(--pxn-color-theme-primary); text-align: center; border-radius: 8px; z-index: 1; overflow: hidden; } .pxn-btn-primary .btn_text { overflow: hidden; } .pxn-btn-primary .btn_text > span { display: -webkit-box; display: -ms-flexbox; display: flex; line-height: inherit; text-shadow: 0 30px 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); -webkit-transition: 0.4s ease-in-out; transition: 0.4s ease-in-out; } .pxn-btn-primary .btn_icon { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 42px; height: 42px; font-size: 20x; line-height: 1; overflow: hidden; background-color: var(--pxn-color-theme-secondary); border-radius: 8px; color: var(--pxn-color-common-white); } .pxn-btn-primary .btn_icon i, .pxn-btn-primary .btn_icon svg { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; line-height: 1; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .pxn-btn-primary .btn_icon svg { max-width: 22px; height: auto; } .pxn-btn-primary:hover, .pxn-btn-primary:focus { color: var(--pxn-color-theme-secondary); } .pxn-btn-primary:hover .btn_text > span, .pxn-btn-primary:focus .btn_text > span { -webkit-transform: translateY(-30px); -ms-transform: translateY(-30px); transform: translateY(-30px); } .pxn-btn-primary:hover .btn_icon, .pxn-btn-primary:focus .btn_icon { color: var(--pxn-color-common-white); } .pxn-btn-primary:hover .btn_icon i, .pxn-btn-primary:hover .btn_icon svg, .pxn-btn-primary:focus .btn_icon i, .pxn-btn-primary:focus .btn_icon svg { -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); } /* !END: Button CSS */ /**---------------------------------------- START: Topbar Info ----------------------------------------*/ /* !END: Topbar Info */ /**---------------------------------------- START: Theme Header CSS ----------------------------------------*/ .pxn-header { position: relative; background-color: var(--pxn-color-theme-secondary); left: 0; top: 0; width: 100%; z-index: 97; } .pxn-header.header-duplicate { position: fixed; background-color: var(--pxn-color-theme-secondary); -webkit-box-shadow: 0 0 15px 0 rgba(255, 255, 255, 0.05); box-shadow: 0 0 15px 0 rgba(255, 255, 255, 0.05); visibility: hidden; -webkit-transform: translateY(-120%); -ms-transform: translateY(-120%); transform: translateY(-120%); -webkit-transition: visibility 500ms ease, -webkit-transform 500ms ease; transition: visibility 500ms ease, -webkit-transform 500ms ease; transition: transform 500ms ease, visibility 500ms ease; transition: transform 500ms ease, visibility 500ms ease, -webkit-transform 500ms ease; } .pxn-header.header-absolute { position: absolute; background-color: rgba(6, 61, 47, 0.5); backdrop-filter: blur(2px); z-index: 98; } .pxn-header.sticky { position: fixed; visibility: visible; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); z-index: 99; opacity: 1; } .pxn_header_main { padding: 20px 0; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .pxn_header_main { padding: 15px 0; } } .pxn_header_main_wrap { max-width: 1800px; width: 100%; margin: auto; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; gap: 25px; } .pxn_site_logo { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; max-width: 150px; width: 100%; } .pxn_main_navigation ul { list-style: none; padding: 0; margin: 0; } .pxn_main_navigation ul:not(.sub-menu) { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-column-gap: 30px; -moz-column-gap: 30px; column-gap: 30px; row-gap: 10px; } .pxn_main_navigation ul > li { position: relative; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; } .pxn_main_navigation ul > li > a { text-decoration: none; position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; font-weight: var(--pxn-fw-sbold); font-size: 16px; line-height: 1.5; color: var(--pxn-color-common-white); padding: 10px 0; } .pxn_main_navigation ul > li:hover > a { color: var(--pxn-color-theme-primary); } .pxn_header_right { gap: 25px; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .pxn_header_right { margin-left: auto; } } .pxn_header_search { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 10px; background-color: transparent; padding: 0; border: none; font-weight: var(--pxn-fw-sbold); font-size: 16px; line-height: 1.5; color: var(--pxn-color-common-white); } .pxn_header_search i, .pxn_header_search svg { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; line-height: 1; font-size: 128%; } .pxn_header_search svg { max-width: 16px; height: auto; } .pxn_header_search:hover { color: var(--pxn-color-theme-primary); } .pxn_header_contact { position: relative; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 10px; } .pxn_header_contact .contact_icon { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 44px; height: 44px; background-color: var(--pxn-color-theme-primary); border-radius: 50%; font-size: 16px; line-height: 1; color: var(--pxn-color-theme-secondary); } .pxn_header_contact .contact_icon i, .pxn_header_contact .contact_icon svg { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; line-height: 1; -webkit-transition: 0.3s; transition: 0.3s; } .pxn_header_contact .contact_icon svg { max-width: 16px; height: auto; } .pxn_header_contact a.contact_icon:hover i, .pxn_header_contact a.contact_icon:hover svg { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } .pxn_header_contact .contact_no { position: relative; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; font-weight: var(--pxn-fw-sbold); font-size: 16px; line-height: 1.2; color: var(--pxn-color-common-white); } .pxn_header_contact a.contact_no::after { content: ""; position: absolute; bottom: 0; inset-inline-start: auto; inset-inline-end: 0; width: 0; height: 1px; background-color: currentColor; -webkit-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; } .pxn_header_contact a.contact_no:hover::after { width: 100%; inset-inline-start: 0; inset-inline-end: auto; } .pxn_offcanvas_toggle { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; gap: 10px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background-color: transparent; border: none; font-family: var(--pxn-ff-heading); font-weight: var(--pxn-fw-sbold); font-size: 16px; line-height: 1.2; color: var(--pxn-color-common-white); } .pxn_offcanvas_toggle .icon { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; font-size: 35px; line-height: 1; } .pxn_offcanvas_toggle .icon i, .pxn_offcanvas_toggle .icon svg { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; line-height: 1; } .pxn_offcanvas_toggle .icon svg { max-width: 35px; height: auto; } .pxn-header-2.header-absolute { background-color: transparent; backdrop-filter: blur(0); } .pxn-header-2.header-absolute .pxn_header_main { padding: 10px 0; } .pxn-header-2.header-absolute .pxn_header_main_wrap { padding: 20px 30px; border-radius: 10px; background-image: -webkit-gradient(linear, right top, left top, from(rgba(31, 80, 68, 0)), to(#063d2f)); background-image: linear-gradient(-90deg, rgba(31, 80, 68, 0) 0%, #063d2f 100%); } @media only screen and (min-width: 992px) and (max-width: 1199px) { .pxn-header-2.header-absolute .pxn_header_main_wrap { padding: 20px 20px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .pxn-header-2.header-absolute .pxn_header_main_wrap { padding: 15px 15px; } } .pxn-header-2 .pxn_header_main_inner { -webkit-column-gap: 100px; -moz-column-gap: 100px; column-gap: 100px; row-gap: 10px; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; -webkit-padding-start: 125px; padding-inline-start: 125px; } .pxn-header-2 .pxn_header_right { gap: 0; margin-left: auto; } .pxn-header-2 .pxn_header_right .pxn_header_contact:not(:last-child) { -webkit-padding-end: 26px; padding-inline-end: 26px; -webkit-margin-end: 25px; margin-inline-end: 25px; } .pxn-header-2 .pxn_header_right .pxn_header_contact:not(:last-child)::after { content: ""; position: absolute; width: 1px; height: 30px; inset-inline-end: 0; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); z-index: 1; background-color: var(--pxn-color-border-2); } @media only screen and (min-width: 1400px) and (max-width: 1600px) { .pxn-header-2 .pxn_header_main_inner { -webkit-padding-start: 60px; padding-inline-start: 60px; -webkit-column-gap: 60px; -moz-column-gap: 60px; column-gap: 60px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .pxn-header-2 .pxn_header_main_inner { -webkit-padding-start: 40px; padding-inline-start: 40px; -webkit-column-gap: 50px; -moz-column-gap: 50px; column-gap: 50px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .pxn-header-2 .pxn_header_main_inner { -webkit-padding-start: 30px; padding-inline-start: 30px; -webkit-column-gap: 40px; -moz-column-gap: 40px; column-gap: 40px; } } /* !END: Theme Header CSS */ /**---------------------------------------- START: Theme Footer CSS ----------------------------------------*/ .pxn-footer { position: relative; background-color: var(--pxn-color-theme-secondary); background-size: cover; background-repeat: no-repeat; background-position: center; z-index: 2; } .pxn-footer .footer_widgets { border-bottom: 1px solid rgba(255, 255, 255, 0.4); padding-top: 50px; } .pxn-footer .footer_widgets_wrap { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: start; -ms-flex-align: start; align-items: start; gap: 24px; } .pxn-footer .footer_widgets_wrap .footer_info_widget { max-width: 424px; width: 100%; margin-bottom: 40px; } .pxn-footer .footer_widgets_wrap .footer_contact_info { max-width: 262px; width: 100%; } .pxn-footer .footer_widgets_wrap .footer_widgets_inner { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; -ms-flex-item-align: stretch; align-self: stretch; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-column-gap: 24px; -moz-column-gap: 24px; column-gap: 24px; row-gap: 50px; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: start; -ms-flex-align: start; align-items: start; border-style: solid; border-color: rgba(255, 255, 255, 0.4); border-width: 1px 0 0 1px; border-radius: 10px 0 0 0; padding: 60px 0 70px 60px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .pxn-footer .footer_widgets_wrap .footer_info_widget { max-width: 375px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .pxn-footer .footer_widgets_wrap .footer_widgets_inner { padding: 40px 25px 60px 40px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .pxn-footer .footer_widgets_wrap .footer_widgets_inner { -webkit-box-flex: 100%; -ms-flex: 100%; flex: 100%; padding: 40px 25px 60px 40px; } .pxn-footer .footer_widgets_wrap .footer_info_widget { max-width: 100%; margin-bottom: 20px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .pxn-footer .footer_widgets_wrap .footer_info_widget { max-width: 100%; margin-bottom: 20px; } .pxn-footer .footer_widgets_wrap .footer_widgets_inner { -webkit-box-flex: 100%; -ms-flex: 100%; flex: 100%; padding: 40px 25px 60px 40px; } } @media (max-width: 575px) { .pxn-footer .footer_widgets_wrap .footer_widgets_inner { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; padding: 30px 15px 60px 30px; } } .pxn-footer .footer_bottom { padding: 33px 0; background-color: rgba(255, 255, 255, 0.05); } .pxn-footer-2 .footer_widgets { padding-top: 100px; padding-bottom: 65px; border-bottom: 1px solid rgba(255, 255, 255, 0.15); } .pxn-footer-2 .footer_widgets_wrap { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: start; -ms-flex-align: start; align-items: start; gap: 70px; } .pxn-footer-2 .footer_widgets_wrap .footer_info_widget { max-width: 340px; } .pxn-footer-2 .footer_widgets_wrap .footer_widgets_inner { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; -ms-flex-item-align: stretch; align-self: stretch; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-column-gap: 24px; -moz-column-gap: 24px; column-gap: 24px; row-gap: 50px; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: start; -ms-flex-align: start; align-items: start; border: 1px solid rgba(255, 255, 255, 0.15); background-color: rgba(255, 255, 255, 0.05); border-radius: 10px; padding: 60px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .pxn-footer-2 .footer_widgets_wrap { gap: 30px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .pxn-footer-2 .footer_widgets_wrap { gap: 30px; } .pxn-footer-2 .footer_widgets_wrap .footer_widgets_inner { padding: 40px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .pxn-footer-2 .footer_widgets { padding-top: 80px; } .pxn-footer-2 .footer_widgets_wrap { gap: 30px; } .pxn-footer-2 .footer_widgets_wrap .footer_info_widget { max-width: 100%; } .pxn-footer-2 .footer_widgets_wrap .footer_widgets_inner { -webkit-box-flex: 100%; -ms-flex: 100%; flex: 100%; padding: 40px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .pxn-footer-2 .footer_widgets { padding-top: 70px; padding-bottom: 60px; } .pxn-footer-2 .footer_widgets_wrap { gap: 30px; } .pxn-footer-2 .footer_widgets_wrap .footer_info_widget { max-width: 100%; margin-bottom: 20px; } .pxn-footer-2 .footer_widgets_wrap .footer_widgets_inner { -webkit-box-flex: 100%; -ms-flex: 100%; flex: 100%; padding: 40px; } } @media (max-width: 575px) { .pxn-footer-2 .footer_widgets_wrap .footer_widgets_inner { padding: 30px; } } .pxn-footer-2 .pxn_footer_widget.footer_info_widget { border: none; padding: 0; background-color: transparent; } .pxn_footer_widget .footer_title { color: var(--pxn-color-common-white); font-family: var(--pxn-ff-heading); font-weight: var(--pxn-fw-bold); font-size: 24px; line-height: 1.2; display: block; margin-bottom: 30px; } @media (max-width: 575px) { .pxn_footer_widget .footer_title { font-size: 22px; } } .pxn_footer_widget.footer_info_widget { border: 1px solid var(--pxn-color-border-2); background-color: rgba(255, 255, 255, 0.05); padding: 35px 30px 45px 30px; border-radius: 10px; } .pxn_footer_widget.footer_info_widget .footer_logo { margin-bottom: 30px; } .pxn_footer_widget.footer_info_widget .footer_logo .logo { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; max-width: 150px; width: 100%; } .pxn_footer_widget.footer_info_widget .footer_desc { font-weight: var(--pxn-fw-medium); font-size: 16px; color: #ebebeb; } .pxn_footer_widget.footer_info_widget .footer_desc p:last-child { margin: 0; } .pxn_footer_widget.widget-nav-menu ul { list-style: none; margin: 0; padding: 0; } .pxn_footer_widget.widget-nav-menu ul > li { position: relative; font-weight: var(--pxn-fw-medium); font-size: 18px; line-height: 1.3; color: var(--pxn-color-grey-1); padding-left: 23px; } .pxn_footer_widget.widget-nav-menu ul > li:before { content: "\e92f"; font-family: var(--pxn-ff-icons); position: absolute; inset-inline-start: 0; top: 0; } .pxn_footer_widget.widget-nav-menu ul > li:not(:first-child) { margin-top: 17px; } .pxn_footer_widget.widget-nav-menu ul > li > ul { margin-top: 17px; } .pxn_footer_widget.widget-nav-menu ul > li > a { color: inherit; } .pxn_footer_widget.widget-nav-menu ul > li > a:hover { color: var(--pxn-color-theme-primary); } .pxn_footer_widget.footer_contact_info ul { margin: 0; padding: 0; list-style: none; } .pxn_footer_widget.footer_contact_info ul > li:not(:last-child) { margin-bottom: 20px; } .pxn_footer_widget.footer_contact_info ul > li .label { display: -webkit-box; display: -ms-flexbox; display: flex; font-weight: var(--pxn-fw-medium); font-size: 16px; line-height: 1.3; color: var(--pxn-color-grey-1); margin-bottom: 5px; } .pxn_footer_widget.footer_contact_info ul > li .text { font-weight: var(--pxn-fw-medium); font-size: 18px; line-height: 1.6; color: var(--pxn-color-common-white); } .pxn_footer_widget.footer_contact_info ul > li .text p:last-child { margin: 0; } .pxn_footer_widget.footer_contact_info ul > li a.text { color: inherit; } .pxn_footer_widget.footer_contact_info ul > li a.text:hover { color: var(--pxn-color-theme-primary); } .pxn_copyright_text { display: inline-block; font-weight: var(--pxn-fw-medium); font-size: 16px; line-height: 1.3; color: var(--pxn-color-common-white); } .pxn_copyright_text p:last-child { margin: 0; } .pxn_copyright_text a { font-weight: var(--pxn-fw-sbold); } .pxn_copyright_text a:hover { color: var(--pxn-color-theme-primary); } /* !END: Theme Footer CSS */ /* START: Search CSS */ .pxn_search_popup { position: fixed; top: 0; left: 0; width: 100%; background-color: var(--pxn-color-theme-secondary); border-radius: 0 0 10px 10px; z-index: 100; padding-top: 120px; padding-bottom: 130px; opacity: 0; -webkit-transition-delay: 0.5s; transition-delay: 0.5s; -webkit-transform: translateY(calc(-100% - 80px)); -ms-transform: translateY(calc(-100% - 80px)); transform: translateY(calc(-100% - 80px)); -webkit-transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out; -webkit-transition: opacity 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out; transition: opacity 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out; transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out; z-index: 9999; } .pxn_search_popup.search-opened { opacity: 1; -webkit-transition-delay: 0s; transition-delay: 0s; -webkit-transform: translateY(0%); -ms-transform: translateY(0%); transform: translateY(0%); } .pxn_search_popup_overlay { position: fixed; left: 0; top: 0; width: 100%; height: 100%; backdrop-filter: blur(10px); -webkit-transition: all 0.5s ease-in-out 0.3s; transition: all 0.5s ease-in-out 0.3s; -webkit-transform: translateY(calc(-100% - 80px)); -ms-transform: translateY(calc(-100% - 80px)); transform: translateY(calc(-100% - 80px)); z-index: 99; } .pxn_search_popup_overlay.opened { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); -webkit-transition-delay: 0.1s; transition-delay: 0.1s; } /* !END: Search CSS */ /**---------------------------------------- START: Offcanvas CSS ----------------------------------------*/ .pxn_offcanvas { position: fixed; top: 0; right: 0; width: 507px; height: 100%; -webkit-transition-duration: 0.5s; transition-duration: 0.5s; z-index: 999; scrollbar-width: none; overflow-y: scroll; -webkit-transition: all 0.8s cubic-bezier(0.9, 0.03, 0, 0.96) 0.3s; transition: all 0.8s cubic-bezier(0.9, 0.03, 0, 0.96) 0.3s; -webkit-transform: translateX(110%); -ms-transform: translateX(110%); transform: translateX(110%); } .pxn_offcanvas.opened { -webkit-transition: all 0.8s cubic-bezier(0.9, 0.03, 0, 0.96) 0.3s; transition: all 0.8s cubic-bezier(0.9, 0.03, 0, 0.96) 0.3s; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } .pxn_offcanvas_overlay { position: fixed; height: 100%; width: 100%; top: 0; z-index: 998; left: 0; backdrop-filter: blur(10px); -webkit-transition: all 0.5s ease-in 0.7s; transition: all 0.5s ease-in 0.7s; -webkit-transform: translateX(110%); -ms-transform: translateX(110%); transform: translateX(110%); } .pxn_offcanvas_overlay.opened { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); -webkit-transition: all 0.3s ease-out 0.1s; transition: all 0.3s ease-out 0.1s; } .pxn_offcanvas .offcanvas_bg { background-color: var(--pxn-color-theme-bg-light); background-repeat: no-repeat; background-size: cover; background-position: center; height: 100%; width: 100%; position: absolute; top: 0; left: 0; z-index: -1; } .pxn_offcanvas .offcanvas_wrapper { padding: 45px 50px; height: 100%; overflow-y: auto; scrollbar-width: none; } .pxn_offcanvas .offcanvas_top { border-bottom: 1px solid var(--pxn-color-border-1); padding-bottom: 31px; } .pxn_offcanvas .offcanvas_logo .logo { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; max-width: 120px; width: 100%; } .pxn_offcanvas .offcanvas_close { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; gap: 10px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background-color: transparent; border: none; font-family: var(--pxn-ff-heading); font-weight: var(--pxn-fw-sbold); font-size: 16px; line-height: 1.2; color: var(--pxn-color-heading-primary); } .pxn_offcanvas .offcanvas_close .icon { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; font-size: 25px; line-height: 1; } .pxn_offcanvas .offcanvas_close .icon i, .pxn_offcanvas .offcanvas_close .icon svg { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; line-height: 1; } .pxn_offcanvas .offcanvas_close .icon svg { max-width: 25px; height: auto; } .pxn_offcanvas .offcanvas_desc { margin-top: 40px; font-weight: var(--pxn-fw-medium); font-size: 18px; color: var(--pxn-color-text-body); } .pxn_offcanvas .offcanvas_contact { margin-top: 46px; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) { .pxn_offcanvas { max-width: 450px; } .pxn_offcanvas .offcanvas_wrapper { padding: 45px 50px; } } @media (max-width: 575px) { .pxn_offcanvas { max-width: 350px; } .pxn_offcanvas .offcanvas_wrapper { padding: 30px 15px 60px 15px; } } .pxn_contact { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -ms-flex-align: start; align-items: start; } .pxn_contact .contact_title { font-family: var(--pxn-ff-heading); font-weight: var(--pxn-fw-sbold); font-size: 24px; line-height: 1.2; margin: 0; color: var(--pxn-color-heading-primary); margin-bottom: 14px; } .pxn_contact .contact_info { font-size: 18px; color: var(--pxn-color-text-body); margin: 0; display: inline-block; position: relative; z-index: 1; } .pxn_contact a.contact_info::before { content: ""; height: 1px; width: 100%; background-color: currentColor; position: absolute; right: 0; bottom: 4px; -webkit-transition: -webkit-transform 0.3s ease-in-out; transition: -webkit-transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out; } .pxn_contact a.contact_info:hover, .pxn_contact a.contact_info:focus { color: var(--pxn-color-theme-secondary); } .pxn_contact a.contact_info:hover::before, .pxn_contact a.contact_info:focus::before { -webkit-animation: lineHover 0.5s linear; animation: lineHover 0.5s linear; } .pxn_offcanvas_menu { position: relative; overflow: hidden; margin-top: 46px; margin-bottom: 100px; } .pxn_offcanvas_menu.mean-container .mean-bar { background: transparent; -webkit-box-sizing: border-box; box-sizing: border-box; margin-bottom: 0; padding: 0; } .pxn_offcanvas_menu.mean-container .mean-bar a.meanmenu-reveal { display: none; } .pxn_offcanvas_menu.mean-container .mean-bar * { -webkit-box-sizing: border-box; box-sizing: border-box; } .pxn_offcanvas_menu .mean-nav { background: transparent; margin-top: 0; overflow: hidden; } .pxn_offcanvas_menu .mean-nav > ul { display: block !important; } .pxn_offcanvas_menu .mean-nav > ul > li:first-child > a { border-top: none; } .pxn_offcanvas_menu .mean-nav ul:not(.sub-menu) > li { position: relative; } .pxn_offcanvas_menu .mean-nav ul:not(.sub-menu) > li:not(:last-child) { margin-bottom: 17px; } .pxn_offcanvas_menu .mean-nav ul:not(.sub-menu) > li > a:not(.mean-expand) { color: var(--pxn-color-heading-primary); width: 100%; font-family: var(--pxn-ff-heading); font-weight: var(--pxn-fw-sbold); font-size: 24px; line-height: 1.2; text-transform: uppercase; padding: 0; border: none; -webkit-transition: all 0.4s ease-in-out 0s; transition: all 0.4s ease-in-out 0s; } .pxn_offcanvas_menu .mean-nav ul:not(.sub-menu) > li > a:not(.mean-expand):hover, .pxn_offcanvas_menu .mean-nav ul:not(.sub-menu) > li > a:not(.mean-expand):focus { color: inherit; } .pxn_offcanvas_menu .mean-nav ul:not(.sub-menu) > li.dropdown-opened > a { color: var(--pxn-color-heading-primary); } .pxn_offcanvas_menu .mean-nav ul:not(.sub-menu) > li a.mean-expand { padding: 0; width: 100%; height: 29px; text-align: right; line-height: 29px; margin-top: 0; font-size: inherit !important; color: var(--pxn-color-heading-primary); background: transparent; -webkit-transition: all 0.4s ease-in-out 0s; transition: all 0.4s ease-in-out 0s; } .pxn_offcanvas_menu .mean-nav ul:not(.sub-menu) > li a.mean-expand:hover, .pxn_offcanvas_menu .mean-nav ul:not(.sub-menu) > li a.mean-expand:focus { color: var(--pxn-color-heading-primary); } .pxn_offcanvas_menu .mean-nav ul:not(.sub-menu) > li a.mean-expand i { font-size: 20px; position: absolute; right: 0; top: 3px; -webkit-transition: all 0.4s ease-in-out 0s; transition: all 0.4s ease-in-out 0s; } .pxn_offcanvas_menu .mean-nav ul:not(.sub-menu) > li a.mean-expand.mean-clicked { color: var(--pxn-color-heading-primary); } .pxn_offcanvas_menu .mean-nav ul:not(.sub-menu) > li a.mean-expand.mean-clicked i { -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } .pxn_offcanvas_menu .mean-nav ul:not(.sub-menu) > li ul.sub-menu > li { padding-left: 15px; position: relative; margin-top: 5px; } .pxn_offcanvas_menu .mean-nav ul:not(.sub-menu) > li ul.sub-menu > li > a:not(.mean-expand) { width: 100%; font-family: var(--pxn-ff-heading); font-weight: var(--pxn-fw-sbold); font-size: 18px; line-height: 1.6; opacity: 1; letter-spacing: 0; padding: 0; text-transform: inherit; color: var(--pxn-color-heading-primary); border: none; } .pxn_offcanvas_menu .mean-nav ul:not(.sub-menu) > li ul.sub-menu > li a.mean-expand { width: calc(100% - 15px); padding: 0; height: 28px; line-height: 28px; margin: 0; } .pxn_offcanvas_menu .mean-nav ul:not(.sub-menu) > li ul.sub-menu > li a.mean-expand:hover, .pxn_offcanvas_menu .mean-nav ul:not(.sub-menu) > li ul.sub-menu > li a.mean-expand:focus { color: inherit; } .pxn_offcanvas_menu .mean-nav ul:not(.sub-menu) > li ul.sub-menu > li a.mean-expand i { font-size: 20px; position: absolute; right: 0; top: 4px; -webkit-transition: all 0.4s ease-in-out 0s; transition: all 0.4s ease-in-out 0s; } .pxn_offcanvas_menu .mean-nav ul:not(.sub-menu) > li ul.sub-menu > li a.mean-expand.mean-clicked { color: var(--pxn-color-heading-primary); } .pxn_offcanvas_menu .mean-nav ul:not(.sub-menu) > li ul.sub-menu > li a.mean-expand.mean-clicked i { -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } .pxn_offcanvas_menu .mean-nav ul:not(.sub-menu) > li ul.sub-menu > li.dropdown-opened > a { color: var(--pxn-color-heading-primary); } /* !END: Offcanvas CSS */ /**---------------------------------------- START: Section Heading CSS ----------------------------------------*/ .sec_sub { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; border-radius: 5px; background-color: var(--pxn-color-theme-primary); font-weight: var(--pxn-fw-sbold); font-size: 16px; line-height: 1.2; color: var(--pxn-color-theme-secondary); padding: 9px 20px; } .sec_title { font-weight: var(--pxn-fw-bold); font-size: 50px; line-height: 1.2; letter-spacing: -0.02em; margin: 0; } @media only screen and (min-width: 768px) and (max-width: 991px) { .sec_title { font-size: 45px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .sec_title { font-size: 38px; } } @media (max-width: 575px) { .sec_title { font-size: 32px; } } .sec_desc { font-weight: var(--pxn-fw-medium); font-size: 18px; color: var(--pxn-color-text-body); } .sec_desc p:last-child { margin: 0; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .sec_desc { font-size: 16px; } } .section_heading .sec_sub { margin-bottom: 15px; } .section_heading .sec_desc { margin-top: 20px; } /* !END: Section Heading CSS */ /**---------------------------------------- START: Slider Nav & Dot CSS ----------------------------------------*/ .pxn_slider-pagination { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; width: 100%; bottom: 0; gap: 5px; } .pxn_slider-pagination .swiper-pagination-bullet { position: relative; width: 25px; height: 25px; border-radius: 50%; opacity: 1; background-color: transparent; -webkit-box-shadow: 0 0 0 0; box-shadow: 0 0 0 0; margin: 0 !important; z-index: 1; } .pxn_slider-pagination .swiper-pagination-bullet::after { content: ""; width: 15px; height: 15px; border-radius: 50%; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); background-color: rgba(6, 61, 47, 0.2); } .pxn_slider-pagination .swiper-pagination-bullet-active { background-color: var(--pxn-color-theme-primary); } .pxn_slider-pagination .swiper-pagination-bullet-active::after { width: 11px; height: 11px; background-color: var(--pxn-color-theme-secondary); } /* !END: Slider Nav & Dot CSS */ /**---------------------------------------- START: Icon Box CSS ----------------------------------------*/ /* !END: Icon Box CSS */ /**---------------------------------------- START: Author CSS ----------------------------------------*/ /* !END: Author CSS */ /**---------------------------------------- START: List CSS ----------------------------------------*/ /* !END: List CSS */ /**---------------------------------------- START: Socials CSS ----------------------------------------*/ /* !END: Socials CSS */ /**---------------------------------------- START: Counter CSS ----------------------------------------*/ .pxn_counter_2 { width: 100%; background-color: rgba(255, 255, 255, 0.12); backdrop-filter: blur(20px); border: 1px solid var(--pxn-color-border-2); border-radius: 10px; padding: 17px 30px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; gap: 24px; } .pxn_counter_2 .title { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 10px; font-family: var(--pxn-ff-heading); font-weight: var(--pxn-fw-sbold); font-size: 16px; line-height: 1.2; color: var(--pxn-color-common-white); } .pxn_counter_2 .title::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background-color: currentColor; } .pxn_counter_2 .count { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; font-weight: var(--pxn-fw-bold); font-size: 65px; line-height: 1; text-transform: uppercase; color: var(--pxn-color-common-white); } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) { .pxn_counter_2 .count { font-size: 44px; } } @media (max-width: 575px) { .pxn_counter_2 { padding: 20px 20px; } .pxn_counter_2 .count { font-size: 30px; } } /* !END: Counter CSS */ /**---------------------------------------- START: Accordion CSS ----------------------------------------*/ .pxn_accordion { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 20px; } .pxn_accordion_item { border: 1px solid var(--pxn-color-border-1); border-radius: 10px; background-color: var(--pxn-color-common-white); -webkit-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; } .pxn_accordion_item:has(.accordion_question:not(.collapsed)) { background-color: var(--pxn-color-theme-bg-light); } .pxn_accordion_item .accordion_question { position: relative; border: none; background-color: transparent; text-align: left; width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; font-family: var(--pxn-ff-heading); font-weight: var(--pxn-fw-bold); font-size: 24px; line-height: 1.3; color: var(--pxn-color-heading-primary); z-index: 1; padding-block: 25px; -webkit-padding-start: 90px; padding-inline-start: 90px; -webkit-padding-end: 50px; padding-inline-end: 50px; } .pxn_accordion_item .accordion_question::after { content: "\e935"; font-family: var(--pxn-ff-icons); position: absolute; top: 25px; inset-inline-end: 20px; -webkit-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; } .pxn_accordion_item .accordion_question:not(.collapsed)::after { content: "\e949"; } .pxn_accordion_item .accordion_no { font-weight: var(--pxn-fw-medium); font-size: 50px; line-height: 1; text-transform: uppercase; color: #d7d7d7; position: absolute; inset-inline-start: 20px; top: 17px; z-index: 1; } .pxn_accordion_item .accordion_answer { font-weight: var(--pxn-fw-medium); font-size: 18px; color: var(--pxn-color-text-body); padding: 0 50px 25px 90px; } @media only screen and (min-width: 576px) and (max-width: 767px) { .pxn_accordion_item .accordion_question { font-size: 22px; -webkit-padding-start: 80px; padding-inline-start: 80px; } .pxn_accordion_item .accordion_no { font-size: 40px; } .pxn_accordion_item .accordion_answer { -webkit-padding-start: 80px; padding-inline-start: 80px; } } @media (max-width: 575px) { .pxn_accordion_item .accordion_question { font-size: 20px; -webkit-padding-start: 70px; padding-inline-start: 70px; padding-block: 20px; } .pxn_accordion_item .accordion_question::after { top: 20px; } .pxn_accordion_item .accordion_no { font-size: 35px; } .pxn_accordion_item .accordion_answer { -webkit-padding-start: 70px; padding-inline-start: 70px; } } /* !END: Accordion CSS */ /**---------------------------------------- START: Feature CSS ----------------------------------------*/ /* !END: Feature CSS */ /**---------------------------------------- START: Page Header CSS ----------------------------------------*/ /* !END: Page Header CSS */ /**---------------------------------------- START: Video CSS ----------------------------------------*/ /* !END: Video CSS */ /**---------------------------------------- START: Sidebar CSS ----------------------------------------*/ /* !END: Sidebar CSS */ /**---------------------------------------- START: Pagination CSS ----------------------------------------*/ /* !END: Pagination CSS */ /**---------------------------------------- START: Blog Standard CSS ----------------------------------------*/ /* !END: Blog Standard CSS */ /**---------------------------------------- START: Post Navigation CSS ----------------------------------------*/ /* !END: Post Navigation CSS */ /**---------------------------------------- START: Blog Details CSS ----------------------------------------*/ /* !END: Blog Details CSS */ /* START: Coming Soon CSS */ .pxn-countdown { margin-top: 54px; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: start; -ms-flex-align: start; align-items: start; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 20px; } .pxn-countdown .divider { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; font-size: 42px; line-height: 2.3; font-weight: 500; color: var(--pxn-color-common-white); font-family: "Roboto"; } .pxn-countdown .divider:last-child { display: none; } .pxn-countdown .timer-content { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 2px; } .pxn-countdown .timer-content .time-count { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; font-family: var(--pxn-ff-heading); font-weight: var(--pxn-fw-bold); font-size: 50px; line-height: 1; color: var(--pxn-color-common-white); width: 126px; height: 96px; padding: 10px; background-color: rgba(255, 255, 255, 0.1); backdrop-filter: blur(35px); border-radius: 10px; } .pxn-countdown .timer-content .time-title { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; font-weight: var(--pxn-fw-sbold); font-size: 16px; line-height: 1.3; color: #b7b6b6; padding: 15px 0; background-color: transparent; } @media only screen and (min-width: 768px) and (max-width: 991px) { .pxn-countdown { margin-top: 50px; } .pxn-countdown .timer-content .time-count { font-size: 35px; width: 110px; height: 90px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .pxn-countdown { gap: 15px; margin-top: 45px; } .pxn-countdown .divider { font-size: 30px; line-height: 2.6; } .pxn-countdown .timer-content .time-count { font-size: 30px; width: 100px; height: 80px; } .pxn-countdown .timer-content .time-title { font-size: 16px; padding: 10px 0; } } @media (max-width: 575px) { .pxn-countdown { gap: 10px; margin-top: 40px; } .pxn-countdown .divider { font-size: 22px; line-height: 2.5; } .pxn-countdown .timer-content .time-count { font-size: 24px; width: 60px; height: 60px; } .pxn-countdown .timer-content .time-title { font-size: 14px; padding: 10px 0; } } /**---------------------------------------- START: Error Page CSS ----------------------------------------*/ /* !END: Error Page CSS */ /**---------------------------------------- START: Hero Slider CSS ----------------------------------------*/ .pxn-h1-hero-slider .pxn_slider-pagination { padding: 0 15px; position: absolute; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; bottom: 25px; } .pxn-h1-hero-slider .pxn_slider-pagination .swiper-pagination-bullet::after { background-color: rgba(255, 255, 255, 0.5); } .pxn-h1-hero-slider .pxn_slider-pagination .swiper-pagination-bullet-active { background-color: var(--pxn-color-common-white); } .pxn-h1-hero-slider .pxn_slider-pagination .swiper-pagination-bullet-active::after { background-color: var(--pxn-color-theme-secondary); } .pxn-h1-hero-slider .swiper-slide .pxn_hero_content .hero_sub, .pxn-h1-hero-slider .swiper-slide .pxn_hero_content .hero_title, .pxn-h1-hero-slider .swiper-slide .pxn_hero_content .hero_btn { opacity: 0; visibility: hidden; -webkit-transform: translateY(20px); -ms-transform: translateY(20px); transform: translateY(20px); -webkit-transition-duration: 0.8s; transition-duration: 0.8s; } .pxn-h1-hero-slider .swiper-slide .pxn_achievement_content { opacity: 0; visibility: hidden; -webkit-transform: translateY(100%); -ms-transform: translateY(100%); transform: translateY(100%); -webkit-transition-duration: 1s; transition-duration: 1s; } .pxn-h1-hero-slider .swiper-slide .slider_shape_1, .pxn-h1-hero-slider .swiper-slide .slider_shape_2 { opacity: 0; visibility: hidden; -webkit-transition-duration: 1s; transition-duration: 1s; -webkit-transform: translateX(-100%); -ms-transform: translateX(-100%); transform: translateX(-100%); } .pxn-h1-hero-slider .swiper-slide.swiper-slide-active .pxn_hero_content .hero_sub, .pxn-h1-hero-slider .swiper-slide.swiper-slide-active .pxn_hero_content .hero_title, .pxn-h1-hero-slider .swiper-slide.swiper-slide-active .pxn_hero_content .hero_btn { opacity: 1; visibility: visible; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } .pxn-h1-hero-slider .swiper-slide.swiper-slide-active .pxn_hero_content .hero_sub { -webkit-transition-delay: 1s; transition-delay: 1s; } .pxn-h1-hero-slider .swiper-slide.swiper-slide-active .pxn_hero_content .hero_title { -webkit-transition-delay: 1.25s; transition-delay: 1.25s; } .pxn-h1-hero-slider .swiper-slide.swiper-slide-active .pxn_hero_content .hero_btn { -webkit-transition-delay: 1.5s; transition-delay: 1.5s; } .pxn-h1-hero-slider .swiper-slide.swiper-slide-active .pxn_achievement_content { opacity: 1; visibility: visible; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); -webkit-transition-delay: 2s; transition-delay: 2s; } .pxn-h1-hero-slider .swiper-slide.swiper-slide-active .slider_shape_1, .pxn-h1-hero-slider .swiper-slide.swiper-slide-active .slider_shape_2 { opacity: 1; visibility: visible; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); -webkit-transition-delay: 2s; transition-delay: 2s; } .pxn-h1-hero-slider .swiper-slide.swiper-slide-active .slider_shape_2 { -webkit-transition-delay: 2.2s; transition-delay: 2.2s; } /* !END: Hero Slider CSS */ /**---------------------------------------- START: Hero CSS ----------------------------------------*/ .pxn-h2-hero-section { position: relative; background-color: var(--pxn-color-theme-secondary); background-size: cover; background-repeat: no-repeat; background-position: center; z-index: 1; } .pxn-h2-hero-section .left_shape { position: absolute; inset-inline-start: 0; top: 28%; z-index: -1; } @media only screen and (min-width: 768px) and (max-width: 991px) { .pxn-h2-hero-section .left_shape { top: 35%; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .pxn-h2-hero-section .left_shape { display: none; } } .pxn-h2_hero_wrapper { position: relative; min-height: 100dvh; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; gap: 40px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .pxn-h2_hero_wrapper { gap: 20px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .pxn-h2_hero_wrapper { gap: 15px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .pxn-h2_hero_wrapper { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } } @media (max-width: 575px) { .pxn-h2_hero_wrapper { min-height: auto; } } .pxn-h2_hero_wrapper .hero_content { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; padding-top: 150px; padding-bottom: 50px; max-width: 780px; width: 100%; } .pxn-h2_hero_wrapper .hero_content .hero_title { color: var(--pxn-color-common-white); font-weight: var(--pxn-fw-sbold); font-size: 100px; line-height: 1.2; margin: 0; } .pxn-h2_hero_wrapper .hero_content .hero_desc { font-weight: var(--pxn-fw-medium); font-size: 20px; color: var(--pxn-color-common-white); margin-top: 20px; } .pxn-h2_hero_wrapper .hero_content .hero_desc p:last-child { margin: 0; } .pxn-h2_hero_wrapper .hero_content .hero_btn { margin-top: 30px; } @media only screen and (min-width: 1400px) and (max-width: 1600px) { .pxn-h2_hero_wrapper .hero_content { max-width: 700px; } .pxn-h2_hero_wrapper .hero_content .hero_title { font-size: 90px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .pxn-h2_hero_wrapper .hero_content { max-width: 620px; } .pxn-h2_hero_wrapper .hero_content .hero_title { font-size: 80px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .pxn-h2_hero_wrapper .hero_content { max-width: 550px; } .pxn-h2_hero_wrapper .hero_content .hero_title { font-size: 70px; } .pxn-h2_hero_wrapper .hero_content .hero_desc { font-size: 18px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .pxn-h2_hero_wrapper .hero_content { max-width: 100%; padding-bottom: 0; } .pxn-h2_hero_wrapper .hero_content .hero_title { font-size: 60px; } .pxn-h2_hero_wrapper .hero_content .hero_desc { font-size: 18px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .pxn-h2_hero_wrapper .hero_content { max-width: 100%; padding-bottom: 0; } .pxn-h2_hero_wrapper .hero_content .hero_title { font-size: 55px; } .pxn-h2_hero_wrapper .hero_content .hero_desc { font-size: 18px; } } @media (max-width: 575px) { .pxn-h2_hero_wrapper .hero_content .hero_title { font-size: 45px; } } .pxn-h2_hero_wrapper .hero_img { position: relative; -ms-flex-item-align: end; align-self: flex-end; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: end; -ms-flex-align: end; align-items: end; max-width: 595px; width: 100%; -webkit-margin-end: -100px; margin-inline-end: -100px; } @media only screen and (min-width: 1400px) and (max-width: 1600px) { .pxn-h2_hero_wrapper .hero_img { max-width: 520px; -webkit-margin-end: 0; margin-inline-end: 0; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .pxn-h2_hero_wrapper .hero_img { max-width: 480px; -webkit-margin-end: 0; margin-inline-end: 0; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .pxn-h2_hero_wrapper .hero_img { max-width: 410px; -webkit-margin-end: 0; margin-inline-end: 0; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .pxn-h2_hero_wrapper .hero_img { max-width: 100%; text-align: center; -webkit-margin-end: 0; margin-inline-end: 0; } } /* !END: Hero CSS */ /**---------------------------------------- START: We Offer CSS ----------------------------------------*/ .pxn-h1-we-offer-section { position: relative; background-color: var(--pxn-color-theme-bg-light); z-index: 1; } .pxn-h1-we-offer-section .bg_img { position: absolute; inset-inline-start: 0; bottom: 10%; z-index: -1; } /* !END: We Offer CSS */ /**---------------------------------------- START: About CSS ----------------------------------------*/ .pxn-h1_client_wrapper { padding-top: 120px; } .pxn-h1_client_wrapper .pxn-h1_client_carousel { margin-top: 60px; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) { .pxn-h1_client_wrapper { padding-top: 100px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .pxn-h1_client_wrapper { padding-top: 90px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .pxn-h1_client_wrapper { padding-top: 80px; } } @media (max-width: 575px) { .pxn-h1_client_wrapper { padding-top: 70px; } } .pxn-h1_client_carousel .swiper-wrapper { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .pxn-h2-about-section { padding-top: 150px; padding-bottom: 150px; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) { .pxn-h2-about-section { padding-top: 130px; padding-bottom: 130px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .pxn-h2-about-section { padding-top: 90px; padding-bottom: 180px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .pxn-h2-about-section { padding-top: 80px; padding-bottom: 140px; } } @media (max-width: 575px) { .pxn-h2-about-section { padding-top: 70px; padding-bottom: 110px; } } .pxn-h2_about_wrap { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: start; -ms-flex-align: start; align-items: start; gap: 24px; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .pxn-h2_about_img { position: relative; max-width: 560px; width: 100%; -webkit-margin-end: 26px; margin-inline-end: 26px; -webkit-margin-start: 60px; margin-inline-start: 60px; } .pxn-h2_about_img .bg_color { content: ""; position: absolute; width: 105%; height: 105%; top: 0; inset-inline-start: 0; background-color: var(--pxn-color-theme-primary); border-radius: 10px; z-index: -1; -webkit-transform-origin: top left; -ms-transform-origin: top left; transform-origin: top left; -webkit-transform: rotate(5deg); -ms-transform: rotate(5deg); transform: rotate(5deg); } .pxn-h2_about_img img:not(.circle_text) { border-radius: 10px; aspect-ratio: 560/600; -o-object-fit: cover; object-fit: cover; } .pxn-h2_about_content { max-width: 575px; width: 100%; } .pxn-h2_about_content .about_btn { margin-top: 20px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .pxn-h2_about_img { max-width: 520px; } .pxn-h2_about_content { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .pxn-h2_about_img { max-width: 380px; -webkit-margin-end: 20px; margin-inline-end: 20px; -webkit-margin-start: 40px; margin-inline-start: 40px; } .pxn-h2_about_content { max-width: 535px; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .pxn-h2_about_wrap { -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; gap: 70px; } .pxn-h2_about_img { -ms-flex-item-align: center; align-self: center; max-width: calc(100% - 115px); -webkit-margin-end: 0; margin-inline-end: 0; -webkit-margin-start: 0; margin-inline-start: 0; } .pxn-h2_about_content { max-width: 100%; } } @media (max-width: 575px) { .pxn-h2_about_wrap { gap: 75px; } .pxn-h2_about_img { max-width: calc(100% - 40px); } .pxn-h2_about_content .about_btn { margin-top: 30px; } } .pxn_divider { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; text-align: center; font-family: var(--pxn-ff-heading); font-weight: var(--pxn-fw-sbold); font-size: 24px; color: var(--pxn-color-heading-primary); } .pxn_divider::before { content: ""; position: absolute; inset-inline-start: 0; top: 50%; width: 100%; height: 1px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); background-color: var(--pxn-color-border-1); z-index: -1; } .pxn_divider > span { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; padding: 0 30px; background-color: var(--pxn-color-common-white); } @media only screen and (min-width: 768px) and (max-width: 991px) { .pxn_divider { font-size: 22px; } .pxn_divider > span { padding: 0 20px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .pxn_divider { font-size: 20px; } .pxn_divider > span { padding: 0 20px; } } @media (max-width: 575px) { .pxn_divider { font-size: 18px; } .pxn_divider > span { padding: 0 15px; } } /* !END: About CSS */ /**---------------------------------------- START: Why Choose CSS ----------------------------------------*/ /* !END: Why Choose CSS */ /**---------------------------------------- START: Team CSS ----------------------------------------*/ /* !END: Team CSS */ /**---------------------------------------- START: Projects CSS ----------------------------------------*/ .pxn-h1_projects_wrap { margin: -12px -12px 0 -12px; } .pxn-h1_projects_wrap .grid-sizer, .pxn-h1_projects_wrap .grid-item { width: 50%; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .pxn-h1_projects_wrap .grid-sizer, .pxn-h1_projects_wrap .grid-item { width: 100%; } } .pxn-h2_projects_wrapper .section_heading { max-width: 660px; width: 100%; margin-left: auto; margin-right: auto; margin-bottom: 60px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .pxn-h2_projects_wrapper .section_heading { margin-bottom: 50px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .pxn-h2_projects_wrapper .section_heading { margin-bottom: 40px; } } .pxn-h2_projects_wrap { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .pxn-h2_projects_wrap .pxn-h2_project_item:nth-child(4n+1), .pxn-h2_projects_wrap .pxn-h2_project_item:nth-child(4n+0) { max-width: 85%; } .pxn-h2_projects_wrap .pxn-h2_project_item:nth-child(4n+2), .pxn-h2_projects_wrap .pxn-h2_project_item:nth-child(4n+3) { max-width: 70%; } .pxn-h2_projects_wrap .pxn-h2_project_item:nth-child(4n+0), .pxn-h2_projects_wrap .pxn-h2_project_item:nth-child(4n+3) { margin-left: auto; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .pxn-h2_projects_wrap .pxn-h2_project_item:nth-child(4n+1), .pxn-h2_projects_wrap .pxn-h2_project_item:nth-child(4n+0) { max-width: 90%; } .pxn-h2_projects_wrap .pxn-h2_project_item:nth-child(4n+2), .pxn-h2_projects_wrap .pxn-h2_project_item:nth-child(4n+3) { max-width: 80%; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .pxn-h2_projects_wrap { grid-template-columns: 1fr; gap: 40px; } .pxn-h2_projects_wrap .pxn-h2_project_item:nth-child(4n+1), .pxn-h2_projects_wrap .pxn-h2_project_item:nth-child(4n+0) { max-width: 100%; } .pxn-h2_projects_wrap .pxn-h2_project_item:nth-child(4n+2), .pxn-h2_projects_wrap .pxn-h2_project_item:nth-child(4n+3) { max-width: 100%; } } .pxn-h2_project_item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .pxn-h2_project_item .project_img { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; width: 100%; border-radius: 10px; overflow: hidden; } .pxn-h2_project_item .project_img .pxn-img-reveal, .pxn-h2_project_item .project_img .pxn-hover-btn-item { width: 100%; } .pxn-h2_project_item .project_img > a { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; width: 100%; } .pxn-h2_project_item .project_img img { width: 100%; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } .pxn-h2_project_item .project_content { background-color: var(--pxn-color-common-white); display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -ms-flex-align: start; align-items: start; padding: 30px 30px 0 30px; } .pxn-h2_project_item .project_content .project_cat { display: block; margin-bottom: 6px; } .pxn-h2_project_item .project_content .project_cat > .category { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; font-weight: var(--pxn-fw-sbold); font-size: 16px; color: var(--pxn-color-text-body); } .pxn-h2_project_item .project_content .project_cat > a:hover { color: var(--pxn-color-theme-secondary); } .pxn-h2_project_item .project_content .project_title { font-weight: var(--pxn-fw-sbold); font-size: 24px; line-height: 1.2; margin: 0; } .pxn-h2_project_item .project_content .project_title a { color: inherit; background-image: -webkit-gradient(linear, left top, left bottom, from(currentColor), to(currentColor)); background-image: linear-gradient(to bottom, currentColor 0%, currentColor 100%); background-size: 0 2px; background-repeat: no-repeat; background-position: 0 100%; display: inline; } .pxn-h2_project_item .project_content .project_title a:hover { background-size: 100% 2px; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) { .pxn-h2_project_item .project_content { padding: 25px 25px 0 25px; } } @media (max-width: 575px) { .pxn-h2_project_item .project_content { padding: 20px 20px 0 20px; } .pxn-h2_project_item .project_content .project_title { font-size: 22px; } } /* !END: Projects CSS */ /**---------------------------------------- START: Pricing CSS ----------------------------------------*/ .pxn-h1-pricing-section { background-color: var(--pxn-color-theme-bg-primary); background-size: cover; background-repeat: no-repeat; background-position: center; } .pxn-h1_pricing_wrapper .section_heading { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; gap: 30px; margin-bottom: 60px; } .pxn-h1_pricing_wrapper .section_heading .heading_text { max-width: 560px; width: 100%; } .pxn-h1_pricing_wrapper .section_heading .sec_title { color: var(--pxn-color-common-white); } @media only screen and (min-width: 768px) and (max-width: 991px) { .pxn-h1_pricing_wrapper .section_heading { margin-bottom: 50px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .pxn-h1_pricing_wrapper .section_heading { margin-bottom: 40px; } } .pxn-h1_pricing_wrapper .pricing_wrapper { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 24px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .pxn-h1_pricing_wrapper .section_heading { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -ms-flex-align: start; align-items: start; } .pxn-h1_pricing_wrapper .section_heading .heading_text { max-width: 100%; } .pxn-h1_pricing_wrapper .pricing_wrapper { grid-template-columns: 1fr 1fr; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .pxn-h1_pricing_wrapper .section_heading { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -ms-flex-align: start; align-items: start; } .pxn-h1_pricing_wrapper .section_heading .heading_text { max-width: 100%; } .pxn-h1_pricing_wrapper .pricing_wrapper { grid-template-columns: 1fr; } } .pxn_toggle_switcher { position: relative; cursor: pointer; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; border: 1px solid var(--pxn-color-border-2); background-color: rgba(255, 255, 255, 0.08); padding: 6px; width: 270px; height: 60px; border-radius: 50px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-pack: distribute; justify-content: space-around; z-index: 1; font-family: var(--pxn-ff-heading); font-weight: var(--pxn-fw-bold); font-size: 18px; line-height: 1.1; color: var(--pxn-color-common-white); } .pxn_toggle_switcher .toggle-m { color: var(--pxn-color-theme-secondary); -webkit-transform: translateX(-3px); -ms-transform: translateX(-3px); transform: translateX(-3px); -webkit-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; } .pxn_toggle_switcher .toggle-y { color: var(--pxn-color-common-white); -webkit-transform: translateX(-2px); -ms-transform: translateX(-2px); transform: translateX(-2px); -webkit-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; } .pxn_toggle_switcher input[type=checkbox] { position: absolute; visibility: hidden; } .pxn_toggle_switcher input[type=checkbox]:checked + .toggle_switch::before { inset-inline-start: 134px; } .pxn_toggle_switcher input[type=checkbox]:checked ~ .toggle-y { color: var(--pxn-color-theme-secondary); } .pxn_toggle_switcher input[type=checkbox]:checked ~ .toggle-m { color: var(--pxn-color-common-white); } .pxn_toggle_switcher .toggle_switch { width: 100%; height: 100%; position: absolute; z-index: -1; } .pxn_toggle_switcher .toggle_switch::before { content: ""; display: block; background-color: var(--pxn-color-theme-primary); border-radius: 50px; width: calc(50% - 6px); height: calc(100% - 12px); position: absolute; top: 6px; inset-inline-start: 6px; -webkit-transition: left 0.25s; transition: left 0.25s; } .pxn_pricing_box { position: relative; background-color: #174b3e; -webkit-box-shadow: inset 0 0 0 1px var(--pxn-color-border-2); box-shadow: inset 0 0 0 1px var(--pxn-color-border-2); border-radius: 10px; overflow: hidden; z-index: 1; } .pxn_pricing_box.recommended .package_name { background-color: var(--pxn-color-theme-primary); color: var(--pxn-color-theme-secondary); } .pxn_pricing_box .package_name { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-family: var(--pxn-ff-heading); font-weight: var(--pxn-fw-bold); font-size: 24px; line-height: 1.1; color: var(--pxn-color-common-white); background-color: rgba(255, 255, 255, 0.1); border-radius: 10px; padding: 14px 35px; margin-bottom: 20px; } .pxn_pricing_box .package_price { font-weight: var(--pxn-fw-sbold); color: var(--pxn-color-common-white); } .pxn_pricing_box .package_price .currency { font-size: 24px; text-transform: uppercase; } .pxn_pricing_box .package_price .price { font-size: 80px; line-height: 1; text-transform: uppercase; } .pxn_pricing_box .package_price .period { font-size: 16px; color: #b7b6b6; } .pxn_pricing_box .package_features { padding: 0; margin: 0; list-style: none; } .pxn_pricing_box .package_features > li { display: -webkit-box; display: -ms-flexbox; display: flex; width: 100%; font-weight: var(--pxn-fw-medium); font-size: 16px; color: var(--pxn-color-common-white); gap: 15px; } .pxn_pricing_box .package_features > li:not(:last-child) { border-bottom: 1px solid var(--pxn-color-border-2); padding-bottom: 16px; margin-bottom: 15px; } .pxn_pricing_box .package_features > li i, .pxn_pricing_box .package_features > li svg { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; line-height: 1; color: var(--pxn-color-theme-primary); fill: var(--pxn-color-theme-primary); margin-top: 4px; } .pxn_pricing_box .package_features > li svg { height: auto; } .pxn_pricing_box .package_btn { margin-top: 40px; } .pxn_pricing_box .package_btn .btn_icon { width: 42px; height: 42px; font-size: 20px; } .pxn_pricing_box .pricing_header { padding: 40px 35px 90px 35px; position: relative; z-index: 1; } .pxn_pricing_box .pricing_header::before, .pxn_pricing_box .pricing_header::after { content: ""; position: absolute; left: -1px; top: -1px; width: 101%; height: 101%; background-image: -webkit-gradient(linear, left top, left bottom, from(#085844), to(#063d2f)); background-image: linear-gradient(180deg, #085844 0%, #063d2f 100%); aspect-ratio: 424/327; -webkit-mask-image: url(../images/pricing-header.svg); mask-image: url(../images/pricing-header.svg); -webkit-mask-position: left bottom; mask-position: left bottom; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: cover; mask-size: cover; z-index: -1; } .pxn_pricing_box .pricing_header::after { top: 3px; background: var(--pxn-color-theme-primary); z-index: -2; } .pxn_pricing_box .pricing_content { padding: 30px 35px 40px 35px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .pxn_pricing_box .package_name { padding: 14px 30px; font-size: 22px; } .pxn_pricing_box .package_price .price { font-size: 70px; } } @media (max-width: 575px) { .pxn_pricing_box .pricing_header { padding: 30px 25px 70px 25px; } .pxn_pricing_box .pricing_content { padding: 30px 25px 40px 25px; } .pxn_pricing_box .package_name { font-size: 20px; } } /* !END: Pricing CSS */ /**---------------------------------------- START: Testimonial CSS ----------------------------------------*/ .pxn-h1_testimonial_carousel .pxn_slider-pagination { margin-top: 50px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .pxn-h1_testimonial_carousel .pxn_slider-pagination { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .pxn-h1_testimonial_carousel .pxn_slider-pagination { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin-top: 40px; } } .pxn-h2-testimonial-section { position: relative; background-color: var(--pxn-color-theme-bg-light); background-size: cover; background-position: center; background-repeat: no-repeat; z-index: 1; } .pxn-h2-testimonial-section .bg_shape { position: absolute; inset-inline-end: 0; bottom: 0; z-index: -1; } @media only screen and (min-width: 1400px) and (max-width: 1600px) { .pxn-h2-testimonial-section .bg_shape { max-width: 630px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .pxn-h2-testimonial-section .bg_shape { max-width: 550px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .pxn-h2-testimonial-section .bg_shape { max-width: 450px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .pxn-h2-testimonial-section .bg_shape { max-width: 400px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .pxn-h2-testimonial-section .bg_shape { max-width: 300px; } } @media (max-width: 575px) { .pxn-h2-testimonial-section .bg_shape { display: none; } } .pxn-h2-testimonial-section .testimonialContainer { margin-left: calc((100% - 1350px) / 2); width: auto; min-width: auto; max-width: inherit; padding-right: 0; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .pxn-h2-testimonial-section .testimonialContainer { margin-left: auto; } } .pxn-h2-testimonial-section .pxn_slider-pagination { margin-top: 60px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .pxn-h2-testimonial-section .pxn_slider-pagination { margin-top: 50px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .pxn-h2-testimonial-section .pxn_slider-pagination { margin-top: 40px; } } .pxn-h2_testimonial_wrap .section_heading { max-width: 675px; width: 100%; margin-left: auto; margin-right: auto; margin-bottom: 60px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .pxn-h2_testimonial_wrap .section_heading { margin-bottom: 50px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .pxn-h2_testimonial_wrap .section_heading { margin-bottom: 40px; } } .pxn-h2_testimonial_carousel .swiper-wrapper { -webkit-box-align: end; -ms-flex-align: end; align-items: end; } .pxn-h3_testimonial_wrap .testimonial_wrap .swiper { max-width: 837px; width: 100%; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .pxn-h3_testimonial_carousel { position: relative; z-index: 1; } .pxn-h3_testimonial_carousel .pxn_slider-pagination { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; padding: 0 20px; } .pxn_testimonial.swiper-slide { max-width: 648px; width: 100%; } .pxn_testimonial_inner { border: 1px solid var(--pxn-color-border-1); background-color: var(--pxn-color-common-white); border-radius: 10px; padding: 24px; } .pxn_testimonial .testimonial_header { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 24px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin-bottom: 20px; } .pxn_testimonial .testimonial_quote { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 60px; height: 60px; border-radius: 10px; background-color: var(--pxn-color-theme-primary); color: var(--pxn-color-theme-secondary); font-size: 30px; line-height: 1; } .pxn_testimonial .testimonial_quote i, .pxn_testimonial .testimonial_quote svg { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; line-height: 1; } .pxn_testimonial .testimonial_quote svg { max-width: 30px; height: auto; } .pxn_testimonial .testimonial_text { width: 100%; background-color: #f3f1eb; padding: 25px; border-radius: 10px; font-weight: var(--pxn-fw-medium); font-size: 24px; color: #2d3836; } .pxn_testimonial .testimonial_text p:last-child { margin: 0; } .pxn_testimonial .testimonial_author { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background-color: var(--pxn-color-theme-secondary); padding: 5px 30px 5px 5px; border-radius: 10px; gap: 20px; margin-top: 20px; } .pxn_testimonial .testimonial_author .author_info { width: calc(100% - 100px); } .pxn_testimonial .testimonial_author .designation { font-weight: var(--pxn-fw-sbold); font-size: 16px; color: #b7b6b6; margin-bottom: 5px; } .pxn_testimonial .testimonial_author .name { margin: 0; font-family: var(--pxn-ff-heading); font-weight: var(--pxn-fw-bold); font-size: 24px; line-height: 1.2; color: var(--pxn-color-common-white); } @media only screen and (min-width: 576px) and (max-width: 767px) { .pxn_testimonial.swiper-slide { max-width: 520px; } .pxn_testimonial .testimonial_text { padding: 20px; font-size: 20px; } .pxn_testimonial .testimonial_author .name { font-size: 22px; } } @media (max-width: 575px) { .pxn_testimonial.swiper-slide { max-width: 350px; } .pxn_testimonial .testimonial_text { padding: 15px; font-size: 18px; } .pxn_testimonial .testimonial_author .name { font-size: 20px; } } .pxn_testimonial.style-2.swiper-slide { max-width: 424px; width: 100%; } .pxn_testimonial.style-2.swiper-slide:nth-child(even) { padding-bottom: 35px; } .pxn_testimonial.style-2 .testimonial_quote { background-color: var(--pxn-color-theme-bg-light); } .pxn_testimonial.style-2 .testimonial_text { background-color: transparent; padding: 0; color: var(--pxn-color-text-body); } .pxn_testimonial.style-2 .testimonial_author { width: 100%; background-color: transparent; border: 1px solid var(--pxn-color-border-1); } .pxn_testimonial.style-2 .testimonial_author .name { color: var(--pxn-color-heading-primary); } @media (max-width: 575px) { .pxn_testimonial.style-2.swiper-slide { max-width: 350px; } .pxn_testimonial.style-2.swiper-slide:nth-child(even) { padding-bottom: 25px; } } .pxn_testimonial.style-3.swiper-slide { max-width: 100%; } /* !END: Testimonial CSS */ /**---------------------------------------- START: Blog CSS ----------------------------------------*/ .pxn-h2_blog_wrap .section_heading { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; gap: 30px; margin-bottom: 60px; } .pxn-h2_blog_wrap .section_heading .heading_text { max-width: 523px; width: 100%; } @media only screen and (min-width: 768px) and (max-width: 991px) { .pxn-h2_blog_wrap .section_heading { margin-bottom: 50px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .pxn-h2_blog_wrap .section_heading { margin-bottom: 40px; } } .pxn-h2_blog_posts { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 24px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .pxn-h2_blog_posts { grid-template-columns: 1fr 1fr; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .pxn-h2_blog_wrap .section_heading { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } .pxn-h2_blog_wrap .section_heading .heading_text { max-width: 100%; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .pxn-h2_blog_posts { grid-template-columns: 1fr; } } .pxn_blog_post_2 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding: 10px; background-color: var(--pxn-color-theme-bg-light); border: 1px solid var(--pxn-color-border-1); border-radius: 10px; -ms-flex-item-align: start; align-self: flex-start; } .pxn_blog_post_2 .blog_title { font-weight: var(--pxn-fw-bold); font-size: 24px; line-height: 1.2; color: var(--pxn-color-heading-primary); margin: 0; } .pxn_blog_post_2 .blog_title a { color: inherit; background-image: -webkit-gradient(linear, left top, left bottom, from(currentColor), to(currentColor)); background-image: linear-gradient(to bottom, currentColor 0%, currentColor 100%); background-size: 0 2px; background-repeat: no-repeat; background-position: 0 100%; display: inline; } .pxn_blog_post_2 .blog_title a:hover { background-size: 100% 2px; } .pxn_blog_post_2 .blog_content { position: relative; background-color: var(--pxn-color-common-white); -webkit-box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.051); box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.051); z-index: 1; padding: 30px 40px 40px 30px; border-radius: 10px; max-width: 90%; -ms-flex-item-align: end; align-self: flex-end; margin-top: -140px; } @media (max-width: 575px) { .pxn_blog_post_2 .blog_title { font-size: 22px; } .pxn_blog_post_2 .blog_content { max-width: 95%; padding: 25px 35px 35px 20px; } } /* !END: Blog CSS */ /**---------------------------------------- START: Marquee CSS ----------------------------------------*/ .pxn-h1_marquee_wrap { padding-bottom: 26px; } .pxn-h1_marquee_wrap .pxn_marquee_scroll { background-color: var(--pxn-color-theme-secondary); padding: 35px 0; position: relative; } .pxn-h1_marquee_wrap .pxn_marquee_scroll::before { content: ""; position: absolute; inset-inline-start: -2%; width: 105%; top: 0; height: 100%; background-color: var(--pxn-color-theme-primary); z-index: -1; -webkit-transform: rotate(-0.5deg); -ms-transform: rotate(-0.5deg); transform: rotate(-0.5deg); -webkit-transform-origin: right; -ms-transform-origin: right; transform-origin: right; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) { .pxn-h1_marquee_wrap .pxn_marquee_scroll::before { -webkit-transform: rotate(-1deg); -ms-transform: rotate(-1deg); transform: rotate(-1deg); } } @media only screen and (min-width: 768px) and (max-width: 991px) { .pxn-h1_marquee_wrap { padding-bottom: 20px; } .pxn-h1_marquee_wrap .pxn_marquee_scroll::before { -webkit-transform: rotate(-1deg); -ms-transform: rotate(-1deg); transform: rotate(-1deg); } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .pxn-h1_marquee_wrap { padding-bottom: 20px; } .pxn-h1_marquee_wrap .pxn_marquee_scroll::before { -webkit-transform: rotate(-1.5deg); -ms-transform: rotate(-1.5deg); transform: rotate(-1.5deg); } } .pxn_marquee_scroll { position: relative; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; white-space: nowrap; gap: 12px; } .pxn_marquee_scroll_wrapper { -ms-flex-negative: 0; flex-shrink: 0; display: -webkit-box; display: -ms-flexbox; display: flex; white-space: nowrap; gap: 12px; -webkit-animation: scroll 30s linear infinite; animation: scroll 30s linear infinite; } .pxn_marquee_scroll_wrapper .marquee_text { font-family: var(--pxn-ff-heading); font-weight: var(--pxn-fw-bold); font-size: 50px; line-height: 1.2; color: var(--pxn-color-common-white); } .pxn_marquee_scroll_wrapper .marquee_text:nth-child(even) { opacity: 0.3; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .pxn_marquee_scroll_wrapper .marquee_text { font-size: 40px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .pxn_marquee_scroll_wrapper .marquee_text { font-size: 35px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .pxn_marquee_scroll_wrapper .marquee_text { font-size: 30px; } } /* !END: Marquee CSS */ /**---------------------------------------- START: Contact CSS ----------------------------------------*/ /* !END: Contact CSS */ /**---------------------------------------- START: Services CSS ----------------------------------------*/ .pxn-h2-services-section { position: relative; background-color: var(--pxn-color-theme-bg-light); z-index: 1; } .pxn-h2-services-section .left_shape { position: absolute; inset-inline-start: 0; top: 0; z-index: -1; } .pxn-h2-services-section .right_shape { position: absolute; inset-inline-end: 0; bottom: 0; z-index: -1; } @media only screen and (min-width: 1400px) and (max-width: 1600px) { .pxn-h2-services-section .left_shape { max-width: 435px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .pxn-h2-services-section .left_shape { max-width: 350px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .pxn-h2-services-section .left_shape { max-width: 300px; } .pxn-h2-services-section .right_shape { max-width: 400px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .pxn-h2-services-section .left_shape { display: none; } .pxn-h2-services-section .right_shape { max-width: 350px; } } .pxn-h2_services_wrap .section_heading { max-width: 560px; width: 100%; margin-left: auto; margin-right: auto; margin-bottom: 60px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .pxn-h2_services_wrap .section_heading { margin-bottom: 50px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .pxn-h2_services_wrap .section_heading { margin-bottom: 40px; } } .pxn-h2_services { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .pxn-h2_services { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .pxn-h2_services { grid-template-columns: 1fr; } } .pxn_service_item { position: relative; background-color: var(--pxn-color-common-white); border-radius: 10px; padding: 35px; overflow: hidden; background-size: cover; background-position: center; background-repeat: no-repeat; z-index: 1; } .pxn_service_item .service_header { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 24px; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin-bottom: 30px; } .pxn_service_item .service_icon { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 80px; height: 80px; background-color: var(--pxn-color-theme-primary); border-radius: 50%; font-size: 40px; line-height: 1; color: var(--pxn-color-theme-secondary); -webkit-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; } .pxn_service_item .service_icon i, .pxn_service_item .service_icon svg { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; line-height: 1; } .pxn_service_item .service_icon svg { max-width: 35px; height: auto; } .pxn_service_item .service_no { font-weight: var(--pxn-fw-bold); font-size: 50px; line-height: 1.2; letter-spacing: -0.02em; color: rgba(6, 61, 47, 0.1); } .pxn_service_item .service_title { font-weight: var(--pxn-fw-bold); font-size: 24px; line-height: 1.1; margin: 0; } .pxn_service_item .service_title a { color: inherit; background-image: -webkit-gradient(linear, left top, left bottom, from(currentColor), to(currentColor)); background-image: linear-gradient(to bottom, currentColor 0%, currentColor 100%); background-size: 0 2px; background-repeat: no-repeat; background-position: 0 100%; display: inline; } .pxn_service_item .service_title a:hover { background-size: 100% 2px; } .pxn_service_item .service_excerpt { font-weight: var(--pxn-fw-medium); font-size: 18px; color: var(--pxn-color-text-body); margin-top: 15px; } .pxn_service_item .service_btn { margin-top: 24px; background-color: var(--pxn-color-theme-bg-light); -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; width: 100%; } .pxn_service_item .service_btn .btn_icon { background-color: var(--pxn-color-common-white); color: var(--pxn-color-theme-secondary); } .pxn_service_item:hover .service_icon { -webkit-transform: rotateY(360deg); transform: rotateY(360deg); } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) { .pxn_service_item { padding: 30px 25px; } } @media (max-width: 575px) { .pxn_service_item { padding: 30px 20px; } .pxn_service_item .service_title { font-size: 22px; } } /* !END: Services CSS */ /**---------------------------------------- START: Counter Section CSS ----------------------------------------*/ .pxn-h2-counter-section { position: relative; min-height: 700px; background-color: var(--pxn-color-theme-bg-primary); padding: 300px 0 35px 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: end; -ms-flex-align: end; align-items: end; z-index: 1; } .pxn-h2-counter-section .bg_img { position: absolute; inset-inline-start: 0; top: 0; width: 100%; height: 100%; z-index: -1; background-size: cover; background-position: center; background-repeat: no-repeat; } .pxn-h2-counter-section .bg_img::after { content: ""; position: absolute; inset-inline-start: 0; bottom: 0; width: 100%; height: 100%; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(40.87%, rgba(6, 61, 47, 0)), color-stop(71.15%, rgba(12, 33, 28, 0.78))); background-image: linear-gradient(180deg, rgba(6, 61, 47, 0) 40.87%, rgba(12, 33, 28, 0.78) 71.15%); } .pxn-h2_counters_wrap { max-width: 1800px; width: 100%; margin-left: auto; margin-right: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .pxn-h2_counters_wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .pxn-h2_counters_wrap { grid-template-columns: 1fr; } } /* !END: Counter Section CSS */ /**---------------------------------------- START: Process CSS ----------------------------------------*/ .pxn-h2-process-section { background-color: var(--pxn-color-theme-bg-primary); background-size: cover; background-position: center; background-repeat: no-repeat; } .pxn-h2_process_wrap .section_heading { max-width: 660px; width: 100%; margin-left: auto; margin-right: auto; margin-bottom: 60px; } .pxn-h2_process_wrap .section_heading .sec_title { color: var(--pxn-color-common-white); } @media only screen and (min-width: 768px) and (max-width: 991px) { .pxn-h2_process_wrap .section_heading { margin-bottom: 50px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .pxn-h2_process_wrap .section_heading { margin-bottom: 40px; } } .pxn-h2_process_items { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); -webkit-column-gap: 24px; -moz-column-gap: 24px; column-gap: 24px; row-gap: 30px; } .pxn-h2_process_items .pxn_process_item:last-child .process_line { display: none; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .pxn-h2_process_items { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .pxn-h2_process_items { grid-template-columns: 1fr; } } .pxn_process_item { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; width: 100%; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -ms-flex-align: start; align-items: start; } .pxn_process_item .process_line { width: calc(100% - 120px); position: absolute; inset-inline-end: 0; line-height: 1; top: 11px; } .pxn_process_item .process_line svg { width: 100%; height: auto; } .pxn_process_item .process_line svg path { color: #878c8f; } .pxn_process_item .process_step { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; border: 1px solid var(--pxn-color-border-2); background-color: var(--pxn-color-theme-secondary); border-radius: 5px; font-weight: var(--pxn-fw-sbold); font-size: 16px; line-height: 1.2; color: var(--pxn-color-common-white); padding: 8px 17px; margin-bottom: 15px; -webkit-transition: 0.3s; transition: 0.3s; } .pxn_process_item .process_content { width: 100%; border: 1px solid var(--pxn-color-border-2); border-radius: 10px; background-color: var(--pxn-color-theme-secondary); padding: 28px 25px; } .pxn_process_item .process_title { font-weight: var(--pxn-fw-bold); font-size: 24px; line-height: 1.3; color: var(--pxn-color-common-white); margin: 0; } .pxn_process_item .process_desc { font-weight: var(--pxn-fw-medium); font-size: 18px; color: #b7b6b6; margin-top: 15px; } .pxn_process_item:hover .process_step { background-color: var(--pxn-color-theme-primary); border-color: var(--pxn-color-theme-primary); color: var(--pxn-color-theme-secondary); } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .pxn_process_item { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; gap: 15px; } .pxn_process_item .process_step { -webkit-writing-mode: vertical-lr; -ms-writing-mode: tb-lr; writing-mode: vertical-lr; padding: 10px 8px; margin: 0; } .pxn_process_item .process_line { width: auto; height: calc(100% - 100px); inset-inline-end: auto; inset-inline-start: 11px; top: auto; bottom: 0; } .pxn_process_item .process_line svg { -webkit-transform: rotate(90deg) translateY(-100%); -ms-transform: rotate(90deg) translateY(-100%); transform: rotate(90deg) translateY(-100%); -webkit-transform-origin: left top; -ms-transform-origin: left top; transform-origin: left top; } } /* !END: Process CSS */ /**---------------------------------------- START: FAQ CSS ----------------------------------------*/ .pxn-h2_faq_wrap { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 70px; -webkit-box-align: end; -ms-flex-align: end; align-items: end; } .pxn-h2_faq_wrap .section_heading { margin-bottom: 40px; } .pxn-h2_faq_wrap .faq_content { max-width: 650px; width: 100%; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) { .pxn-h2_faq_wrap { gap: 35px; } .pxn-h2_faq_wrap .faq_content { max-width: 600px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .pxn-h2_faq_wrap { -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 50px; } .pxn-h2_faq_wrap .faq_content { max-width: 100%; } } .pxn_faq_cta { position: relative; z-index: 1; background-color: var(--pxn-color-theme-bg-light); border-radius: 10px; overflow: hidden; } .pxn_faq_cta .cta_img { width: 100%; } .pxn_faq_cta .cta_img::after { content: ""; position: absolute; inset-inline-start: 0; bottom: 0; width: 100%; height: 100%; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(19.71%, rgba(6, 61, 47, 0)), to(#063d2f)); background-image: linear-gradient(180deg, rgba(6, 61, 47, 0) 19.71%, #063d2f 100%); pointer-events: none; } .pxn_faq_cta .cta_img img { width: 100%; } .pxn_faq_cta .cta_content { padding: 40px 35px; position: absolute; inset-inline-start: 0; bottom: 0; width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -ms-flex-align: start; align-items: start; } .pxn_faq_cta .cta_title { font-weight: var(--pxn-fw-bold); font-size: 24px; line-height: 1.3; color: var(--pxn-color-common-white); margin-bottom: 15px; } .pxn_faq_cta .cta_action { font-weight: var(--pxn-fw-sbold); font-size: 18px; line-height: 1.3; color: #b7b6b6; } .pxn_faq_cta a.cta_action:hover { color: var(--pxn-color-theme-primary); } .pxn_faq_cta .cta_btn { margin-top: 30px; } @media only screen and (min-width: 576px) and (max-width: 767px) { .pxn_faq_cta .cta_content { padding: 30px; } } @media (max-width: 575px) { .pxn_faq_cta .cta_content { padding: 30px 25px; } .pxn_faq_cta .cta_title { font-size: 22px; } } /* !END: FAQ CSS */ /**---------------------------------------- START: Progress CSS ----------------------------------------*/ .pxn_progress { border: 1px solid var(--pxn-color-border-1); background-color: rgba(6, 61, 47, 0.1); backdrop-filter: blur(10px); border-radius: 50px; padding: 2px; } .pxn_progress .progress_bar { position: relative; background-color: var(--pxn-color-theme-primary); border-radius: 50px; height: 12px; z-index: 1; } .pxn_progress .progress_percent { position: absolute; inset-inline-end: 0; bottom: calc(100% + 10px); font-family: var(--pxn-ff-heading); font-size: 16px; font-weight: var(--pxn-fw-sbold); line-height: 1; color: var(--pxn-color-heading-primary); z-index: 2; } /* !END: Progress CSS */ /**---------------------------------------- START: CTA CSS ----------------------------------------*/ .pxn-h3-cta-section { position: relative; z-index: 2; } /* !END: CTA CSS */ /**---------------------------------------- START: Service Details CSS ----------------------------------------*/ /* !END: Service Details CSS */ /**---------------------------------------- START: Project Details CSS ----------------------------------------*/ /* !END: Project Details CSS */ /**---------------------------------------- START: Blog Details CSS ----------------------------------------*/ /* !END: Blog Details CSS */ /* ==== custom.css ==== */ /* razreshitelnye.ru — свои правки поверх шаблона Rovix. main.css вендорный, его не трогаем (единственное исключение — снятый @import Google Fonts). Здесь только: кириллический шрифт, служебные элементы (модалка, cookie, sticky, селектор), которых в шаблоне нет как разметки. Начертания, размеры и сетка шаблона не меняются. */ /* ============================================================ 1. Шрифт. В шаблоне Urbanist без кириллицы — заменён на Onest (тот же геометрический вариативный гротеск 100..900). ============================================================ */ @font-face { font-family: 'Onest'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(../fonts/onest/onest-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'Onest'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(../fonts/onest/onest-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Onest'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(../fonts/onest/onest-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { --pxn-ff-body: 'Onest', 'Helvetica Neue', Arial, sans-serif; --pxn-ff-heading: 'Onest', 'Helvetica Neue', Arial, sans-serif; } /* ============================================================ 2. Форма заявки на родных полях шаблона ============================================================ */ .lead-form .form_group { margin-bottom: 16px; } .lead-form input[type="text"], .lead-form input[type="tel"], .lead-form input[type="email"], .lead-form select, .lead-form textarea { width: 100%; height: 60px; border: 1px solid var(--pxn-color-border-1); border-radius: 8px; background-color: var(--pxn-color-common-white); color: var(--pxn-color-heading-primary); font-family: var(--pxn-ff-body); font-size: 16px; padding: 0 22px; outline: none; transition: border-color .25s ease; } .lead-form textarea { height: 120px; padding: 18px 22px; resize: vertical; } .lead-form input:focus, .lead-form select:focus, .lead-form textarea:focus { border-color: var(--pxn-color-theme-primary); } .lead-form input:focus-visible, .lead-form select:focus-visible, .lead-form textarea:focus-visible, .lead-form button:focus-visible { outline: 2px solid var(--pxn-color-theme-primary); outline-offset: 2px; } .lead-form.on-dark input[type="text"], .lead-form.on-dark input[type="tel"], .lead-form.on-dark input[type="email"], .lead-form.on-dark textarea { background-color: rgba(255, 255, 255, .08); border-color: var(--pxn-color-border-2); color: var(--pxn-color-common-white); } .lead-form.on-dark input::placeholder, .lead-form.on-dark textarea::placeholder { color: rgba(255, 255, 255, .6); } .lead-form.on-dark .lead-consent, .lead-form.on-dark .lead-consent a { color: rgba(255, 255, 255, .75); } .lead-consent { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.5; color: var(--pxn-color-text-body); cursor: pointer; } .lead-consent input { margin-top: 3px; width: 18px; height: 18px; flex: 0 0 18px; accent-color: var(--pxn-color-theme-primary); } .lead-consent a { color: inherit; text-decoration: underline; } .hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .lead-result { margin-top: 14px; font-size: 15px; min-height: 1px; } .lead-result.is-error { color: #d4442a; } .lead-form.on-dark .lead-result.is-error { color: #ffb4a4; } .lead-success { text-align: center; padding: 20px 0; } .lead-success .ok_icon { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; background-color: var(--pxn-color-theme-primary); color: var(--pxn-color-theme-secondary); font-size: 28px; margin-bottom: 16px; } .lead-submit[disabled] { opacity: .6; pointer-events: none; } /* ============================================================ 3. Модальное окно заявки (открывается со всех CTA) ============================================================ */ .lead-modal { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 20px; } .lead-modal[hidden] { display: none; } .lead-modal-overlay { position: absolute; inset: 0; background: rgba(6, 61, 47, .75); backdrop-filter: blur(4px); } .lead-modal-box { position: relative; width: 100%; max-width: 560px; max-height: 92vh; overflow-y: auto; background: var(--pxn-color-common-white); border-radius: 16px; padding: 40px; animation: leadModalIn .25s ease; } @keyframes leadModalIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } } .lead-modal-close { position: absolute; top: 14px; inset-inline-end: 14px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--pxn-color-theme-bg-light); color: var(--pxn-color-heading-primary); font-size: 26px; line-height: 1; cursor: pointer; } .lead-modal-close:hover { background: var(--pxn-color-theme-primary); } body.modal-open { overflow: hidden; } @media (max-width: 575px) { .lead-modal-box { padding: 30px 20px; } } /* ============================================================ 4. Липкие кнопки связи ============================================================ */ .sticky-contacts { position: fixed; inset-inline-end: 22px; bottom: 96px; z-index: 990; display: flex; flex-direction: column; gap: 12px; } .sticky-contacts a { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; color: #fff; font-size: 26px; box-shadow: 0 8px 24px rgba(6, 61, 47, .25); transition: transform .2s ease; } .sticky-contacts a:hover { transform: translateY(-3px); color: #fff; } .sticky-contacts .wa { background: #25d366; } .sticky-contacts .tg { background: #2aabee; } @media (max-width: 767px) { .sticky-contacts { inset-inline-end: 14px; bottom: 82px; } .sticky-contacts a { width: 50px; height: 50px; font-size: 23px; } } /* ============================================================ 5. Cookie-уведомление ============================================================ */ .cookie-bar { position: fixed; inset-inline: 20px; bottom: 20px; z-index: 995; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; background: var(--pxn-color-theme-bg-primary); color: #fff; border-radius: 12px; padding: 18px 24px; box-shadow: 0 12px 40px rgba(6, 61, 47, .3); } .cookie-bar[hidden] { display: none; } .cookie-bar .cookie-text { font-size: 15px; max-width: 780px; } .cookie-bar .cookie-text a { color: var(--pxn-color-theme-primary); text-decoration: underline; } .cookie-bar button { border: 0; border-radius: 30px; cursor: pointer; background: var(--pxn-color-theme-primary); color: var(--pxn-color-theme-secondary); font-family: var(--pxn-ff-heading); font-weight: 600; font-size: 16px; padding: 12px 30px; } /* ============================================================ 6. Плашки доверия под первым экраном и счётчик до 289-ФЗ ============================================================ */ .hero_facts { display: flex; flex-wrap: wrap; gap: 26px; margin-top: 34px; } .hero_facts li { list-style: none; display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 500; color: #fff; } .hero_facts li i { color: var(--pxn-color-theme-primary); font-size: 20px; } .law_badge { display: inline-flex; align-items: center; gap: 12px; background: rgba(251, 216, 25, .16); border: 1px solid rgba(251, 216, 25, .5); border-radius: 40px; padding: 10px 22px 10px 14px; font-size: 15px; font-weight: 500; color: #fff; margin-bottom: 26px; } .law_badge .days { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px; padding: 0 10px; border-radius: 30px; background: var(--pxn-color-theme-primary); color: var(--pxn-color-theme-secondary); font-family: var(--pxn-ff-heading); font-weight: 700; font-size: 17px; } /* ============================================================ 7. Селектор документа по категории товара ============================================================ */ .doc_picker { background: var(--pxn-color-common-white); border-radius: 16px; padding: 40px; box-shadow: 0 20px 60px rgba(6, 61, 47, .08); } .doc_picker .picker_head { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; margin-bottom: 30px; } .doc_picker .picker_field { flex: 1 1 260px; } .doc_picker label { display: block; font-size: 14px; font-weight: 500; color: var(--pxn-color-text-body); margin-bottom: 8px; } .doc_picker select { width: 100%; height: 60px; padding: 0 22px; border: 1px solid var(--pxn-color-border-1); border-radius: 8px; background: var(--pxn-color-common-white); color: var(--pxn-color-heading-primary); font-family: var(--pxn-ff-body); font-size: 16px; cursor: pointer; } .doc_picker select:focus-visible { outline: 2px solid var(--pxn-color-theme-primary); outline-offset: 2px; } .picker_result { border-top: 1px solid var(--pxn-color-border-1); padding-top: 30px; } .picker_result[hidden] { display: none; } .picker_grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 26px; } .picker_cell { background: var(--pxn-color-theme-bg-light); border-radius: 12px; padding: 22px; } .picker_cell .cell_label { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--pxn-color-text-body); margin-bottom: 8px; } .picker_cell .cell_value { font-family: var(--pxn-ff-heading); font-weight: 700; font-size: 20px; line-height: 1.25; color: var(--pxn-color-heading-primary); } .picker_cell.accent { background: var(--pxn-color-theme-bg-primary); } .picker_cell.accent .cell_label { color: var(--pxn-color-grey-1); } .picker_cell.accent .cell_value { color: var(--pxn-color-theme-primary); } .picker_note { font-size: 15px; line-height: 1.6; color: var(--pxn-color-text-body); margin-bottom: 26px; } .picker_note strong { color: var(--pxn-color-heading-primary); } .picker_empty { font-size: 16px; color: var(--pxn-color-text-body); } @media (max-width: 991px) { .picker_grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 575px) { .doc_picker { padding: 26px 20px; } .picker_grid { grid-template-columns: 1fr; } } /* ============================================================ 8. Тарифы: переключатель наборов. Сам переключатель родной (.pxn_toggle_switcher), здесь только скрытие неактивного набора карточек и подпись под ценой. ============================================================ */ .pxn_pricing_box[hidden] { display: none; } .pxn_pricing_box .package_note { font-size: 14px; color: var(--pxn-color-grey-1); margin-top: 8px; } .pxn_pricing_box .package_price .price { font-size: 56px; } .tariff_after { color: var(--pxn-color-grey-1); font-size: 15px; line-height: 1.7; margin-top: 40px; max-width: 900px; } /* ============================================================ 9. Нижний SEO-блок ============================================================ */ .seo_block { background: var(--pxn-color-theme-bg-light); } .seo_block h2 { font-size: 32px; margin-bottom: 20px; } .seo_block h3 { font-size: 22px; margin: 34px 0 14px; } .seo_block p { margin-bottom: 16px; line-height: 1.75; } .seo_block ul, .seo_block ol { margin: 0 0 20px 20px; } .seo_block li { margin-bottom: 10px; line-height: 1.7; } .seo_table_wrap { overflow-x: auto; margin-bottom: 26px; border-radius: 12px; } .seo_block table { width: 100%; min-width: 560px; border-collapse: collapse; background: #fff; font-size: 15px; } .seo_block th, .seo_block td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--pxn-color-border-1); } .seo_block th { background: var(--pxn-color-theme-bg-primary); color: #fff; font-family: var(--pxn-ff-heading); font-weight: 600; } .seo_block tbody tr:nth-child(even) { background: #fafaf8; } .seo_block .seo_note { background: #fff; border-inline-start: 4px solid var(--pxn-color-theme-primary); border-radius: 8px; padding: 20px 24px; margin-bottom: 24px; } /* ============================================================ 10. Юридические страницы ============================================================ */ .legal_page { padding: 60px 0 90px; } .legal_page h2 { font-size: 26px; margin: 34px 0 14px; } .legal_page h3 { font-size: 20px; margin: 26px 0 12px; } .legal_page p, .legal_page li { line-height: 1.75; margin-bottom: 12px; } .legal_page ul, .legal_page ol { margin: 0 0 20px 20px; } .legal_upd { color: var(--pxn-color-text-body); font-size: 15px; margin-bottom: 30px; } .legal_crumb { font-size: 15px; color: var(--pxn-color-grey-1); } .legal_crumb a { color: var(--pxn-color-theme-primary); } .page_hero { background: var(--pxn-color-theme-bg-primary); padding: 150px 0 70px; } .page_hero h1 { color: #fff; font-size: 40px; margin: 10px 0 0; } /* ============================================================ 11. Мелочи ============================================================ */ .skip-link { position: absolute; left: -9999px; } .skip-link:focus { left: 20px; top: 20px; z-index: 10000; background: #fff; color: var(--pxn-color-heading-primary); padding: 12px 20px; border-radius: 8px; } .req_line { font-size: 14px; color: var(--pxn-color-grey-1); line-height: 1.7; } .footer_map { height: 260px; border-radius: 12px; overflow: hidden; background: rgba(255, 255, 255, .06); } /* ============================================================ 12. Мелкие довёрстки под русский контент. Родные классы шаблона не переопределяются, только добавляются элементы, которых в разметке шаблона не было. ============================================================ */ /* Карточка документа: цена и перечень */ .service_price { font-family: var(--pxn-ff-heading); font-size: 15px; margin-bottom: 14px; color: var(--pxn-color-text-body); } .service_price strong { font-size: 24px; font-weight: 700; color: var(--pxn-color-heading-primary); margin-inline-end: 10px; } .service_list { list-style: none; padding: 0; margin: 0 0 26px; } .service_list li { display: flex; gap: 10px; font-size: 15px; line-height: 1.5; color: var(--pxn-color-text-body); margin-bottom: 9px; } .service_list li i { color: var(--pxn-color-theme-primary); margin-top: 4px; flex: 0 0 auto; } /* Список рисков в секции about */ .pxn_list li strong { color: var(--pxn-color-heading-primary); } /* Шаги работы */ .process_term { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--pxn-color-heading-primary); background: rgba(251, 216, 25, .3); border-radius: 30px; padding: 6px 16px; margin-bottom: 14px; } .process_you { margin-top: 16px; font-size: 14px; color: var(--pxn-color-text-body); border-top: 1px solid var(--pxn-color-border-1); padding-top: 14px; } /* Кому нужно */ .who_posts .pxn_blog_post_2 { background: var(--pxn-color-common-white); border-radius: 12px; box-shadow: inset 0 0 0 1px var(--pxn-color-border-1); } .who_posts .blog_content { padding: 34px 30px; } .who_icon { display: inline-flex; align-items: center; justify-content: center; width: 66px; height: 66px; border-radius: 50%; background: var(--pxn-color-theme-bg-primary); color: var(--pxn-color-theme-primary); font-size: 28px; margin-bottom: 22px; } .who_text { font-size: 16px; line-height: 1.65; color: var(--pxn-color-text-body); margin-bottom: 20px; } .who_posts .blog_title { margin-bottom: 14px; } /* Кейсы */ .project_desc { font-size: 16px; line-height: 1.65; color: var(--pxn-color-text-body); margin-top: 12px; } .project_result { display: inline-flex; align-items: center; gap: 10px; margin-top: 16px; font-family: var(--pxn-ff-heading); font-weight: 600; font-size: 16px; color: var(--pxn-color-heading-primary); } .project_result i { color: var(--pxn-color-theme-primary); font-size: 20px; } .pxn-h2_project_item .project_cat .category { cursor: default; } /* Площадки и ведомства вместо выдуманных логотипов */ .pxn-h2-testimonial-section .pxn_divider > span { background-color: transparent; color: var(--pxn-color-grey-1); } .pxn-h2-testimonial-section .pxn_divider::before { background-color: var(--pxn-color-border-2); } .partner_chips { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; padding: 0; margin: 30px 0 0; } .partner_chips li { font-family: var(--pxn-ff-heading); font-weight: 600; font-size: 17px; color: #fff; background: rgba(255, 255, 255, .08); border: 1px solid var(--pxn-color-border-2); border-radius: 40px; padding: 12px 26px; } /* Секция заявки */ .pxn-h3-cta-section { background-color: var(--pxn-color-theme-bg-primary); } .pxn-h3-cta-section .sec_title, .pxn-h3-cta-section .sec_desc { color: #fff; } .pxn-h3-cta-section .sec_desc { opacity: .8; } .pxn-h3-cta-section .hero_facts li { color: #fff; } .cta_wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; } .cta_form { background: var(--pxn-color-common-white); border-radius: 16px; padding: 44px; } .cta_form .form_title { font-size: 26px; } @media (max-width: 991px) { .cta_wrapper { grid-template-columns: 1fr; gap: 40px; } .cta_form { padding: 30px 22px; } } /* Форма: расстояния между полями */ .lead-fields .form_group { margin-bottom: 16px; } .lead-form .pxn-btn-primary { width: 100%; justify-content: center; } /* Бегущая строка: отбивка после первого экрана */ .pxn-h1_marquee_wrap { padding-top: 26px; } /* ============================================================ 13. Русский текст длиннее английского: подгонка размеров, чтобы длинные слова не рвались посреди строки. ============================================================ */ .pxn-h2_hero_wrapper .hero_content .hero_title { font-size: 64px; line-height: 1.08; } @media (max-width: 1399px) { .pxn-h2_hero_wrapper .hero_content .hero_title { font-size: 56px; } } @media (max-width: 1199px) { .pxn-h2_hero_wrapper .hero_content .hero_title { font-size: 48px; } } @media (max-width: 767px) { .pxn-h2_hero_wrapper .hero_content .hero_title { font-size: 38px; } } @media (max-width: 480px) { .pxn-h2_hero_wrapper .hero_content .hero_title { font-size: 32px; } } .page_hero h1 { word-break: normal; overflow-wrap: break-word; } /* Риски: заголовок и текст в столбик, а не в узкую колонку flex-списка */ .risk_list { list-style: none; padding: 0; margin: 0 0 34px; } .risk_list li { position: relative; padding-left: 44px; margin-bottom: 22px; } .risk_list li::before { content: attr(data-no); position: absolute; left: 0; top: 2px; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--pxn-color-theme-primary); color: var(--pxn-color-theme-secondary); font-family: var(--pxn-ff-heading); font-weight: 700; font-size: 13px; } .risk_list .risk_title { display: block; font-family: var(--pxn-ff-heading); font-weight: 700; font-size: 20px; color: var(--pxn-color-heading-primary); margin-bottom: 6px; } .risk_list .risk_text { display: block; font-size: 16px; line-height: 1.65; color: var(--pxn-color-text-body); } /* Переключатель пакетов: русские подписи длиннее «Monthly/Yearly» */ .pxn_toggle_switcher { width: 330px; font-size: 16px; } .pxn_toggle_switcher input[type=checkbox]:checked + .toggle_switch::before { inset-inline-start: 50%; } .pxn_toggle_switcher .toggle-m, .pxn_toggle_switcher .toggle-y { transform: none; white-space: nowrap; } @media (max-width: 575px) { .pxn_toggle_switcher { width: 290px; font-size: 15px; } } /* Счётчики: суффикс не должен липнуть к числу */ .pxn_counter_2 .pxn_counter-suffix { margin-inline-start: 4px; } /* «Кому нужно»: четыре карточки, шаблонная сетка блога рассчитана на три */ @media (min-width: 1200px) { .who_posts { grid-template-columns: repeat(4, 1fr); } } .lead-success .ok_title { font-family: var(--pxn-ff-heading); font-weight: 700; font-size: 24px; color: var(--pxn-color-heading-primary); margin-bottom: 8px; } /* ============================================================ 14. Мобильные тач-таргеты и видимый телефон в шапке ============================================================ */ .pxn_offcanvas_toggle { min-height: 44px; } .lead-consent { padding: 4px 0; } .lead-consent input { width: 22px; height: 22px; flex: 0 0 22px; } @media (max-width: 1399px) { .pxn-header-2 .pxn_header_right .pxn_header_contact:not(:last-child) { padding-inline-end: 14px; } .pxn_header_contact .contact_icon { width: 44px; height: 44px; } } /* Кнопки шаблона обрезают текст в две строки (btn_text overflow:hidden), поэтому на узких экранах уменьшаем кегль вместо переноса */ .pxn-btn-primary .btn_text, .pxn-btn-primary .btn_text > span { white-space: nowrap; } @media (max-width: 575px) { .pxn-btn-primary { font-size: 15px; gap: 12px; } .pxn-btn-primary .btn_icon { width: 42px; height: 42px; } } /* ============================================================ 15. Первый экран: карточка заявки вместо декоративной картинки. Это и самый конверсионный паттерн, и снимает зависимость от стока. ============================================================ */ .pxn-h2_hero_wrapper .hero_img { align-self: center; max-width: 480px; width: 100%; } .hero_form_card { position: relative; width: 100%; background: #fff; border-radius: 22px; padding: 34px 34px 26px; box-shadow: 0 30px 80px rgba(0, 0, 0, .35), 0 2px 0 rgba(255, 255, 255, .5) inset; } .hero_form_card::before { content: ""; position: absolute; inset: -22px -22px auto auto; width: 190px; height: 190px; border-radius: 50%; background: radial-gradient(circle, rgba(251, 216, 25, .55) 0%, rgba(251, 216, 25, 0) 70%); z-index: -1; } .hero_form_card .card_badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(6, 61, 47, .07); color: var(--pxn-color-heading-primary); border-radius: 30px; padding: 8px 16px; font-size: 13px; font-weight: 600; margin-bottom: 18px; } .hero_form_card .card_badge i { color: #0d7a5f; font-size: 15px; } .hero_form_card .form_title { font-size: 26px; line-height: 1.2; margin-bottom: 8px; } .hero_form_card .lead-form > p { font-size: 15px; line-height: 1.5; color: var(--pxn-color-text-body); margin-bottom: 20px; } .hero_form_card .lead-fields .form_group { margin-bottom: 12px; } .hero_form_card textarea { height: 84px; } .hero_form_card .card_foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; border-top: 1px solid var(--pxn-color-border-1); margin-top: 20px; padding-top: 16px; font-size: 14px; color: var(--pxn-color-text-body); } .hero_form_card .card_foot i { color: var(--pxn-color-theme-primary); margin-inline-end: 6px; } .hero_form_card .card_foot a { font-family: var(--pxn-ff-heading); font-weight: 700; font-size: 16px; color: var(--pxn-color-heading-primary); } @media (max-width: 991px) { .pxn-h2_hero_wrapper .hero_img { max-width: 100%; align-self: stretch; } .hero_form_card { padding: 26px 22px 20px; } } /* Карточка формы не должна залезать под абсолютную шапку */ .pxn-h2_hero_wrapper .hero_img { padding-top: 120px; padding-bottom: 40px; } @media (max-width: 991px) { .pxn-h2_hero_wrapper .hero_img { padding-top: 0; } } .hero_form_card { padding: 30px 30px 22px; } .hero_form_card .form_title { font-size: 24px; } .hero_form_card .lead-form > p { margin-bottom: 18px; } .hero_form_card .card_foot { flex-direction: column; align-items: flex-start; gap: 6px; } /* Подпись формы это не заголовок документа, но выглядит как H3 шаблона */ .lead-form .form_title { font-family: var(--pxn-ff-heading); font-weight: 700; font-size: 26px; line-height: 1.25; color: var(--pxn-color-heading-primary); margin-bottom: 10px; } .lead-form.on-dark .form_title { color: #fff; } /* ============================================================ 16. Страховка от вечной заставки. Шаблон снимает прелоадер по window.load. Если хоть один файл не догрузится (на маршруте до РФ и КЗ это реально бывает), посетитель увидит белый экран навсегда. Через 6 секунд заставка уходит сама, без участия скриптов. ============================================================ */ @keyframes pxnPreloaderFailsafe { to { opacity: 0; visibility: hidden; pointer-events: none; } } .preloader { animation: pxnPreloaderFailsafe 0.4s ease 6s forwards; } .preloader.is-loaded { pointer-events: none; } /* ============================================================ 17. Контраст и скорость первого экрана. ============================================================ */ /* Шаблонный #7e7e7a на белом даёт 4.08 при норме 4.5 — Lighthouse отмечал 121 элемент. #75757070 не берём: нужен запас, ставим 5.05. */ :root { --pxn-color-text-body: #6f6f6b; } /* Заставка держала экран, пока не догрузится всё до последней картинки: шаблон снимает её по window.load плюс своя пауза в секунду. Показываем контент сразу после разбора разметки. */ .preloader { transition: opacity .35s ease; } .preloader.pxn-early-hide { opacity: 0 !important; pointer-events: none !important; } /* Плавное раскрытие ответа: своя реализация аккордеона вместо Bootstrap JS */ .pxn_accordion .collapse { overflow: hidden; transition: height .3s ease; } /* Бесконечные декоративные анимации: бегущая строка и качающаяся фигура. Они не дают кадру замереть, из-за чего Speed Index у Lighthouse улетает в десятки секунд при реальном первом экране за 1,2 с. Плюс это лишний расход батареи. Вне экрана останавливаем, при системной настройке «уменьшить движение» выключаем совсем. */ .pxn-anim-paused, .pxn-anim-paused * { animation-play-state: paused !important; } @media (prefers-reduced-motion: reduce) { .pxn-bounce-y, .pxn_marquee_scroll_wrapper, .preloader .loading { animation: none !important; } html { scroll-behavior: auto; } } /* Появление блоков шаблона идёт через GSAP autoAlpha, а это вместе с прозрачностью ставит visibility: hidden. Такой блок пропадает из дерева доступности целиком: до прокрутки экранный диктор не видит ни заголовков, ни текста, а проверка доступности считает это разрывом уровней заголовков. Оставляем анимацию прозрачности и возвращаем видимость. Инлайновый стиль GSAP перебивается только важностью. */ .pxn-fade, .pxn-chars-up, .pxn-chars-up .pxn-char, .pxn-words-up, .pxn-words-up .pxn-word { visibility: visible !important; } /* Фон секции с порядком работы светлый, а шаблон красит её заголовок белым: в оригинале там тёмная подложка. Карточки шагов тёмно-зелёные, поэтому светлый фон оставляем, а заголовок возвращаем в основной цвет. Специфичность повторяет шаблонное правило, иначе правка не применится. Проверки контраста этого не ловят: они сравнивают цвет текста с цветом фона, а перекрывает его фоновая картинка. */ .pxn-h2_process_wrap .section_heading .sec_title { color: var(--pxn-color-heading-primary, #063d2f); } /* Контраст на тёмных подложках. Глобальный цвет основного текста #6f6f6b подобран под светлый фон и на тёмно-зелёном даёт 2,42 при норме 4,5. Там, где текст лежит прямо на зелёном, ставим тот же светлый оттенок, каким шаблон красит описание шага. */ .pxn-h1_pricing_wrapper .section_heading .sec_desc, .pxn-h2_process_wrap .process_content .process_you { color: #b7b6b6; } /* Плашка срока: жёлтый с прозрачностью 0,3 на зелёном смешивается в оливковый, и тёмно-зелёная подпись на нём даёт 2,04. Подпись делаем светлой, вид плашки не меняется. */ .pxn-h2_process_wrap .process_content .process_term { color: #ffffff; } /* Должность автора отзыва: шаблонный #b7b6b6 рассчитан на тёмную карточку, а наша карточка белая, контраст выходит 2,02. Ставим тот же серый, что у основного текста на светлом фоне. */ .pxn_testimonial_inner .testimonial_author .designation { color: #6f6f6b; } /* ============================================================ 13. Страницы отдельных документов (document.php) Собраны из тех же токенов палитры, что и остальной сайт. ============================================================ */ .doc_hero { background: var(--pxn-color-theme-bg-primary); padding: 150px 0 80px; color: #fff; } .doc_hero .legal_crumb { color: var(--pxn-color-grey-1); font-size: 14px; margin-bottom: 18px; } .doc_hero .legal_crumb a { color: var(--pxn-color-theme-primary); } /* .sec_sub это жёлтая плашка шаблона с тёмным текстом. Свой цвет ей задавать нельзя: жёлтый по жёлтому делает подпись невидимой. Оставляем как в шаблоне. */ .doc_hero h1 { color: #fff; font-size: 46px; line-height: 1.15; margin: 10px 0 18px; overflow-wrap: break-word; } .doc_lead { color: #d7dedb; font-size: 18px; line-height: 1.7; max-width: 620px; margin-bottom: 26px; } .doc_chips { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 30px; } .doc_chip { display: flex; flex-direction: column; gap: 2px; padding: 12px 20px; border-radius: 12px; background: rgba(255, 255, 255, .08); border: 1px solid var(--pxn-color-border-2); } .chip_label { font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--pxn-color-grey-1); } .chip_value { font-family: var(--pxn-ff-heading); font-weight: 700; font-size: 18px; color: var(--pxn-color-theme-primary); } .doc_hero .hero_form_card { margin-top: 30px; } .doc_section { padding: 70px 0 20px; } .doc_h2 { font-size: 32px; line-height: 1.25; color: var(--pxn-color-heading-primary); margin: 46px 0 18px; } .doc_section > .container p { line-height: 1.8; margin-bottom: 16px; } .doc_note { background: #fff; border-inline-start: 4px solid var(--pxn-color-theme-primary); border-radius: 8px; padding: 18px 22px; margin: 8px 0 24px; } .doc_section table { width: 100%; min-width: 560px; border-collapse: collapse; background: #fff; font-size: 15px; } .doc_section th, .doc_section td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--pxn-color-border-1); } .doc_section th { background: var(--pxn-color-theme-bg-primary); color: #fff; font-family: var(--pxn-ff-heading); font-weight: 600; } .doc_section tbody tr:nth-child(even) { background: #fafaf8; } .doc_list { margin: 0 0 26px; padding: 0; list-style: none; } .doc_list li { position: relative; padding-inline-start: 30px; margin-bottom: 12px; line-height: 1.7; } .doc_list li::before { content: ""; position: absolute; inset-inline-start: 0; top: 10px; width: 10px; height: 10px; border-radius: 3px; background: var(--pxn-color-theme-primary); } .doc_cards { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); } .doc_card { background: #fff; border: 1px solid var(--pxn-color-border-1); border-radius: 14px; padding: 22px 24px; display: flex; flex-direction: column; gap: 8px; } .card_code { display: inline-flex; align-items: center; justify-content: center; align-self: flex-start; min-width: 46px; height: 30px; padding: 0 12px; border-radius: 8px; background: var(--pxn-color-theme-primary); color: var(--pxn-color-heading-primary); font-family: var(--pxn-ff-heading); font-weight: 700; } .card_title { font-family: var(--pxn-ff-heading); font-weight: 700; font-size: 18px; color: var(--pxn-color-heading-primary); line-height: 1.35; } .card_text { line-height: 1.7; } .doc_steps { list-style: none; margin: 0 0 26px; padding: 0; counter-reset: none; } .doc_step { display: flex; gap: 20px; padding: 22px 0; border-bottom: 1px solid var(--pxn-color-border-1); } .doc_step:last-child { border-bottom: 0; } .step_no { flex: 0 0 auto; width: 52px; height: 52px; border-radius: 14px; background: var(--pxn-color-theme-bg-primary); color: var(--pxn-color-theme-primary); font-family: var(--pxn-ff-heading); font-weight: 700; font-size: 18px; display: flex; align-items: center; justify-content: center; } .step_body { display: flex; flex-direction: column; gap: 6px; } .step_title { font-family: var(--pxn-ff-heading); font-weight: 700; font-size: 20px; color: var(--pxn-color-heading-primary); } .step_term { align-self: flex-start; font-size: 13px; padding: 4px 12px; border-radius: 20px; background: rgba(251, 216, 25, .3); color: var(--pxn-color-heading-primary); } .step_text { line-height: 1.75; } .doc_related { padding: 20px 0 80px; } .related_grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } .related_grid a { display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 22px 24px; border-radius: 14px; background: var(--pxn-color-theme-bg-light); border: 1px solid var(--pxn-color-border-1); transition: background .25s ease; } .related_grid a:hover { background: var(--pxn-color-theme-bg-light-2); } .rel_name { font-family: var(--pxn-ff-heading); font-weight: 700; font-size: 18px; color: var(--pxn-color-heading-primary); } .rel_meta { font-size: 14px; } @media (max-width: 991px) { .doc_hero { padding: 120px 0 60px; } .doc_hero h1 { font-size: 34px; } .doc_h2 { font-size: 26px; margin-top: 38px; } } @media (max-width: 575px) { .doc_hero h1 { font-size: 28px; } .doc_lead { font-size: 16px; } .doc_step { gap: 14px; } .step_no { width: 44px; height: 44px; font-size: 16px; } } /* Карточка услуги: кнопка расчёта и ссылка на страницу документа рядом */ .service_actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; } .service_more { font-family: var(--pxn-ff-heading); font-weight: 600; font-size: 15px; color: var(--pxn-color-heading-primary); border-bottom: 1px solid var(--pxn-color-border-1); padding-bottom: 2px; transition: color .25s ease, border-color .25s ease; } .service_more:hover { color: var(--pxn-color-heading-primary); border-color: var(--pxn-color-theme-primary); } /* Правки доступности страниц документов. 1. Номер вопроса это водяной знак, но проверка всё равно меряет его контраст: на светлом фоне #d7d7d7 даёт 1,43. Затемняем до значения, которое проходит норму для крупного текста и при этом остаётся фоновым. 2. Подпись в карточке перехода наследовала жёлтый цвет ссылки и пропадала на светлой подложке. 3. Ссылка в хлебных крошках отличалась от соседнего текста только цветом, что не работает для людей с нарушением цветовосприятия. Добавляем подчёркивание. */ .pxn_accordion_item .accordion_question .accordion_no { color: #8a8a8a; } .related_grid a .rel_meta { color: var(--pxn-color-text-body); } .legal_crumb a { text-decoration: underline; text-underline-offset: 3px; }