@charset "UTF-8";

/*
--------------------------
    Css Indexing
--------------------------
** @Typography
--------------------------
** Reset css
--------------------------
** Global css
--------------------------
** Helper css
--------------------------
** Preloader css
--------------------------
** Cookie alert css
--------------------------
** Offer banner css
--------------------------
** Header area css
--------------------------
** Hero area css
--------------------------
** Introduction css
--------------------------
** Service category css
--------------------------
** How we do section css
--------------------------
** Statistics section css
--------------------------
** CTA section css
--------------------------
** Case section css
--------------------------
** Testimonial section css
--------------------------
** Team section css
--------------------------
** Pricing section css
--------------------------
** Blog section css
--------------------------
** Partner section css
--------------------------
** Footer section css
--------------------------
** Home 2 page css
--------------------------
** Home 3 page css
--------------------------
** About page css
--------------------------
** Services page css
--------------------------
** Service details page css
--------------------------
** Packges page css
--------------------------
** Blog page css
--------------------------
** Blog details page css
--------------------------
** Cases page css
--------------------------
** Case details page css
--------------------------
** Contact page css
--------------------------
** Quote page css
--------------------------
** FAQ Page CSS
---------------------------
** Team Page CSS
---------------------------
** Career Page CSS
---------------------------
** Career Details Page CSS
---------------------------
** Gallery Page CSS
---------------------------
** 404 Page CSS
---------------------------
** Package Order Page CSS
---------------------------
*/


/*-----------------
** @Typography
-----------------*/

/* Fonts are loaded from a <link> in front/layout.blade.php instead of an @import.
   An @import here is discovered only after this file has downloaded, which
   serialises the font request behind the stylesheet and delays first paint. */

/* Images carry intrinsic width/height attributes so the browser can reserve
   space and avoid layout shift. Nearly every img rule below sets width without
   height, which would combine with the attribute height and squash the image,
   so height is returned to auto wherever both attributes are present. */
img[width][height] {
    height: auto;
}

/*---------------------------
** Reset css
---------------------------*/

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    vertical-align: baseline;
}

HTML5 display-role reset for older browsers article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
}

body {
    line-height: 1;
}

ol,
ul {
    list-style: none;
}

blockquote,
q {
    quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
    content: '';
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}


/*---------------------------
** Global css
---------------------------*/

* {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

html,
body {
    overflow-x: hidden;
}

body {
    font-family: 'Poppins', 'Poppins Fallback', sans-serif;
}

.outer-container {
    display: table;
    height: 100%;
}

.inner-container {
    display: table-cell;
    vertical-align: middle;
}

a.boxed-btn {
    padding: 20px;
    display: inline-block;
    color: #fff;
    background-color: #25d06f;
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 600;
    border: none;
    text-decoration: none;
}

.section-summary {
    font-size: 36px;
    font-weight: 400;
    margin: 16px 0px 47px 0px;
    font-weight: 400;
    line-height: 1.4;
}

.clearfix::after {
    content: "";
    display: block;
    clear: both;
}

.section-title {
    font-family: 'Source Serif Pro', serif;
    font-style: italic;
    font-size: 18px;
    font-weight: 700;
}

ul.breadcumb {
    display: block;
    margin-top: 40px;
}

ul.breadcumb li {
    display: inline-block;
    position: relative;
    margin-left: 20px;
    text-transform: capitalize;
}

ul.breadcumb li a {
    display: inline-block;
    color: #fff;
    text-decoration: none;
    -webkit-transition: .5s;
    transition: .5s;
}

ul.breadcumb li a:hover {
    color: #25d06f;
}

ul.breadcumb li::after {
    position: absolute;
    right: -20px;
    top: 0;
    content: "/\00a0";
}

ul.breadcumb li:first-child {
    margin-left: 0;
}

ul.breadcumb li:last-child {
    font-weight: 600;
}

ul.breadcumb li:last-child::after {
    display: none;
}

.form-element {
    margin-bottom: 20px;
}

.form-element:last-child {
    margin-bottom: 0px;
}

.form-element label {
    font-weight: 600;
    font-size: 14px;
    display: block;
    margin-bottom: 10px;
}

.form-element label.custom-control-label {
    font-weight: 400;
    margin-bottom: 0px;
    padding-top: 5px;
}

.form-element label span {
    color: #ff3737;
}

input[type="text"],
input[type="email"],
input[type="date"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="color"],
input[type="datetime-local"],
input[type="range"],
input[type="month"],
input[type="week"],
input[type="search"],
input[type="time"] {
    display: inline-block;
    width: 100%;
    height: 50px;
    padding-left: 23px;
    border: 1px solid #ddd;
    outline: 0;
    border-radius: 1px;
}

select {
    border: 1px solid #ddd;
    height: 50px;
    width: 100%;
    padding-left: 20px;
    color: #38383c;
    outline: 0;
    font-size: 14px;
}

textarea {
    display: inline-block;
    width: 100%;
    height: 100px;
    padding: 15px 0px 0px 23px;
    border: 1px solid #ddd;
    outline: 0;
    border-radius: 1px;
}

input[type="submit"],
button[type="submit"] {
    border: none;
    color: #fff;
    padding: 18px 45px;
    display: inline-block;
    outline: 0;
    font-weight: 600;
    background-color: #0a3041;
    border: 1px solid #0a3041;
    font-size: 14px;
    cursor: pointer;
    text-transform: uppercase;
    -webkit-transition: .5s;
    transition: .5s;
}

input[type="submit"]:hover,
button[type="submit"]:hover {
    background-color: #fff;
    color: #0a3041;
}

::-webkit-input-placeholder {
    color: #38383c;
    opacity: 1;
    /* Firefox */
    font-size: 14px;
}

:-ms-input-placeholder {
    color: #38383c;
    opacity: 1;
    /* Firefox */
    font-size: 14px;
}

::placeholder {
    color: #38383c;
    opacity: 1;
    /* Firefox */
    font-size: 14px;
}

:-ms-input-placeholder {
    /* Internet Explorer 10-11 */
    color: #38383c;
    font-size: 14px;
}

::-ms-input-placeholder {
    /* Microsoft Edge */
    color: #38383c;
    font-size: 14px;
}

.back-to-top {
    bottom: 30px;
    right: 0px;
    position: fixed;
    color: #fff;
    height: 40px;
    width: 40px;
    line-height: 40px;
    background-color: #25d06f;
    border: 1px solid #25d06f;
    text-align: center;
    border-radius: 3px;
    cursor: pointer;
    z-index: 1000;
    opacity: 0;
    /* stays clear of the cookie bar while it is showing */
    transform: translateY(calc(-1 * var(--cookie-bar-height, 0px)));
    -webkit-transition: .5s;
    transition: .5s;
}

.back-to-top:hover {
    background-color: #fff;
    color: #25d06f;
}

.back-to-top.show {
    opacity: 1;
    right: 30px;
}

.owl-theme .owl-nav {
    margin-top: 0px;
}

.buttonBar {
  display: none;
}

.rtl {
    direction: rtl !important;
}

.ltr {
    direction: ltr !important;
}

/*---------------------------
** Helper css
---------------------------*/

.height-100 {
    height: 100%;
}

.no-margin {
    margin: 0px !important;
}

.no-padding {
    padding: 0px !important;
}


/*---------------------------
** Preloader css
---------------------------*/

.loader-container {
    position: fixed;
    background-color: #fff;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1500;
    opacity: 1;
    visibility: visible;
    -webkit-transition: .5s;
    transition: .5s;
}

.loader {
    display: inline-block;
    width: 60px;
    height: 60px;
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -30px;
    margin-left: -30px;
    border: 4px solid #25d06f;
    -webkit-animation: loader 2s infinite ease;
    animation: loader 2s infinite ease;
}

.loader-inner {
    vertical-align: top;
    display: inline-block;
    width: 100%;
    background-color: #25d06f;
    -webkit-animation: loader-inner 2s infinite ease-in;
    animation: loader-inner 2s infinite ease-in;
}

.loader-fadeout {
    opacity: 0;
    visibility: hidden;
}

@-webkit-keyframes loader {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    25% {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }
    50% {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }
    75% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes loader {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    25% {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }
    50% {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }
    75% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@-webkit-keyframes loader-inner {
    0% {
        height: 0%;
    }
    25% {
        height: 0%;
    }
    50% {
        height: 100%;
    }
    75% {
        height: 100%;
    }
    100% {
        height: 0%;
    }
}

@keyframes loader-inner {
    0% {
        height: 0%;
    }
    25% {
        height: 0%;
    }
    50% {
        height: 100%;
    }
    75% {
        height: 100%;
    }
    100% {
        height: 0%;
    }
}


/*---------------------------
** Cookie alert css
---------------------------*/

.cookie-consent {
    position: fixed;
    background-color: #262938;
    bottom: 0px;
    width: 100%;
    padding: 15px 0px;
    z-index: 10000000000;
    color: #fff;
}

.cookie-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

button.cookie-consent__agree {
    padding: 12px 20px;
    border: none;
    background-color: #25D06F;
    color: #fff;
    cursor: pointer;
    border-radius: 3px;
}


/*---------------------------
** Offer banner css
---------------------------*/

.mfp-fade.mfp-bg {
  opacity: 0;
  -webkit-transition: all 0.15s ease-out;
  -moz-transition: all 0.15s ease-out;
  transition: all 0.15s ease-out;
}
.mfp-fade.mfp-bg.mfp-ready {
  opacity: 0.8;
}
.mfp-fade.mfp-bg.mfp-removing {
  opacity: 0;
}
.mfp-fade.mfp-wrap .mfp-content {
  opacity: 0;
  transform: translateY(-20px);
  -webkit-transition: all 0.15s ease-out;
  -moz-transition: all 0.15s ease-out;
  transition: all 0.15s ease-out;
}
.mfp-fade.mfp-wrap.mfp-ready .mfp-content {
  transform: translateY(0px);
  opacity: 1;
}
.mfp-fade.mfp-wrap.mfp-removing .mfp-content {
  opacity: 0;
}
button.mfp-close {
    display: inline-block;
    width: 30px !important;
    height: 30px;
    background-color: #fff;
    color: #000 !important;
    text-align: center !important;
    line-height: 30px;
    padding-right: 0px !important;
    border-radius: 50%;
    top: 23px;
    right: -12px !important;
    opacity: 1;
    border: 1px solid #0000002a;
    cursor: pointer !important;
    transition: .3s;
}

button.mfp-close:hover {
    background-color: #25D06F;
    color: #fff !important;
}

.mfp-close:active {
    top: 23px;
}

/*---------------------------
** Header area css
---------------------------*/

.header-absolute {
    position: absolute;
    width: 100%;
    z-index: 1000;
}

.support-bar-area {
    padding-top: 20px;
    font-size: 14px;
    color: #fff;
}

.support-bar-area .support-contact-info i {
    color: #25d06f;
    font-size: 16px;
    margin-right: 4px;
}

.support-bar-area i {
    margin: 0px;
    font-size: 14px;
    font-weight: 400;
}

.support-bar-area .address {
    margin-right: 25px;
}

.support-bar-area ul.social-links {
    position: relative;
    display: inline-block;
}

.support-bar-area ul.social-links::after {
    position: absolute;
    content: "|";
    display: inline-block;
    right: 0px;
    top: 0px;
}

.support-bar-area ul.social-links li {
    display: inline-block;
    margin-right: 15px;
}

.support-bar-area ul.social-links li a {
    color: #fff;
    -webkit-transition: .3s;
    transition: .3s;
}

.support-bar-area ul.social-links li a:hover {
    color: #25d06f;
}

.support-bar-area ul.social-links li:last-child {
    margin-right: 25px;
}

.support-bar-area a {
    color: #fff;
    font-size: 14px;
    display: block;
    font-weight: 400;
}

.language {
    display: inline-block;
    margin-left: 17px;
    position: relative;
}

a.language-btn {
    position: relative;
    text-decoration: none;
    padding-right: 15px;
    text-align: left;
    -webkit-transition: .5s;
    transition: .5s;
}

a.language-btn:hover {
    color: #25d06f;
}

.language-btn::after {
    content: "\f078";
    position: absolute;
    right: 0;
    font-family: 'Font Awesome 5 Free';
    font-weight: 700;
    top: 2px;
    font-size: 10px;
}

ul.language-dropdown {
    text-align: center;
    position: absolute;
    z-index: 10;
    top: 25px;
    left: 0;
    width: 120px;
    visibility: hidden;
    opacity: 0;
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
    -webkit-transition: .5s;
    transition: .5s;
}

ul.language-dropdown.open {
    visibility: visible;
    opacity: 1;
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
}

ul.dropdown li {
    display: block;
}

ul.language-dropdown li {
    position: relative;
    background-color: #0a3041;
    z-index: -1;
}

ul.language-dropdown li a {
    display: block;
    position: relative;
    padding: 12px 16px;
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    text-decoration: none;
}

ul.language-dropdown li a::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 0%;
    background: #25d06f;
    z-index: -1;
    -webkit-transition: .5s;
    transition: .5s;
}

ul.language-dropdown li a:hover::before {
    width: 100%;
}

ul.language-dropdown li:last-child a {
    border-bottom: none;
}

.language a i {
    margin-right: 3px;
}

.logo-wrapper {
    display: table;
    height: 100%;
}

.logo-wrapper a {
    display: table-cell;
    vertical-align: middle;
}

.logo-wrapper img {
    max-width:150px;
    max-height: 60px;
}

#mobileMenu {
    display: none;
}

.header-navbar {
    padding: 29px 0px 28px 0px;
    border-bottom: 1px solid #94a7b2;
    position: relative;
}

.sticky-navbar {
    position: fixed;
    top: 0;
    left: 0;
    background-color: #0a3041;
    border: none;
    -webkit-animation: navFadeIn 1s;
    animation: navFadeIn 1s;
}

@-webkit-keyframes navFadeIn {
    from {
        opacity: 0;
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%);
    }
    to {
        opacity: 1;
        -webkit-transform: translateY(0%);
        transform: translateY(0%);
    }
}

@keyframes navFadeIn {
    from {
        opacity: 0;
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%);
    }
    to {
        opacity: 1;
        -webkit-transform: translateY(0%);
        transform: translateY(0%);
    }
}

.sticky-navbar .support-bar-area {
    display: none;
}

.sticky-navbar .header-navbar {
    border: none;
    padding: 15px 0px;
}

.sticky-navbar .main-menu {
    padding: 6px 0px;
}

.main-menu li {
    display: inline-block;
}

.main-menu li:last-child {
    margin-right: 0px;
}

.main-menu li a {
    display: block;
    position: relative;
    padding: 15px 10px;
    font-size: 14px;
    text-transform: uppercase;
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    -webkit-transition: .5s;
    transition: .5s;
}

.main-menu li a::after {
    content: "";
    width: 0px;
    height: 3px;
    background-color: #25d06f;
    position: absolute;
    top: 0px;
    left: 0px;
    -webkit-transition: .5s;
    transition: .5s;
}

.main-menu li a::before {
    content: "";
    width: 0px;
    height: 3px;
    background-color: #25d06f;
    position: absolute;
    bottom: 0px;
    right: 0px;
    -webkit-transition: .5s;
    transition: .5s;
}

.main-menu li a:hover::after {
    width: 100%;
}

.main-menu li a:hover::before {
    width: 100%;
}

.main-menu li a:hover {
    color: #25d06f;
}

.main-menu li a.boxed-btn::after,
.main-menu li a.boxed-btn::before {
    display: none;
}

.main-menu li.active a {
    color: #25d06f;
}

.main-menu li a.boxed-btn {
    font-weight: 600;
    padding: 20px;
    margin-left: 20px;
    -webkit-transition: .5s;
    transition: .5s;
    border: 1px solid #25d06f;
}

.main-menu li a.boxed-btn:hover {
    background-color: #fff;
    border: 1px solid #25d06f;
    color: #25d06f;
}

.main-menu li.dropdown {
    position: relative;
    margin-right: 12px;
}

.main-menu li.dropdown.mega {
  display: none;
}

.main-menu li.dropdown::after {
    position: absolute;
    content: "\f107";
    right: -5px;
    top: 16px;
    font-family: 'Font Awesome 5 Free';
    font-weight: 700;
    color: #fff;
    font-size: 14px;
    -webkit-transition: .5s;
    transition: .5s;
}

.main-menu li.dropdown.active::after {
    color: #25d06f;
}

.main-menu li.dropdown ul.dropdown-lists {
    position: absolute;
    top: 45px;
    left: 0;
    width: 180px;
    text-align: left;
    z-index: 10;
    visibility: hidden;
    opacity: 0;
    -webkit-transition: .3s;
    transition: .3s;
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
}

.main-menu li.dropdown:hover ul.dropdown-lists {
    visibility: visible;
    opacity: 1;
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
}

.main-menu li.dropdown:hover a {
    color: #25d06f;
}

.main-menu li.dropdown:hover a.dropdown-btn::after {
    width: 100%;
}

.main-menu li.dropdown:hover a.dropdown-btn::before {
    width: 100%;
}

.main-menu li.dropdown:hover::after {
    color: #25d06f;
}

.main-menu li.dropdown ul.dropdown-lists li {
    display: block;
    margin: 0px;
    position: relative;
    z-index: -1;
    background-color: #0a3041;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.main-menu li.dropdown ul.dropdown-lists li:last-child {
    border-bottom: none;
}

/* Category label rows: list items for markup validity, but not clickable
   entries, so they drop the row chrome the real links carry. */
.main-menu li.dropdown ul.dropdown-lists li.service-title-item {
    background-color: transparent;
    border-bottom: none;
}

.main-menu li.dropdown ul.dropdown-lists li a {
    position: relative;
    color: #fff;
    border-top: none;
    line-height: 20px;
}

.main-menu li.dropdown ul.dropdown-lists li.active a {
    background-color: #25D06F;
    color: #fff;
}

.main-menu li.dropdown ul.dropdown-lists li a::after {
    background-color: transparent;
}

.main-menu li.dropdown ul.dropdown-lists li a::before {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0%;
    background-color: #25d06f;
    z-index: -1;
    -webkit-transition: .5s;
    transition: .5s;
}

.main-menu li.dropdown ul.dropdown-lists li a:hover::before {
    width: 100%;
}

/* Megamenu CSS starts */

.mega-dropdown {
  display: inline-block;
}

.mega-dropdown .dropbtn {
    font-size: 14px !important;
    border: none;
    text-transform: uppercase;
    outline: none;
    color: white;
    padding: 14px 12px;
    background-color: inherit;
    font: inherit;
    margin: 0;
    font-weight: 600;
    cursor: pointer;
    position: relative;
}

.mega-dropdown .dropbtn.active {
    color: #25D06F;
}

.mega-dropdown:hover a.dropbtn {
    color: #25D06F;
}

.mega-dropdown .dropbtn::before {
    content: "";
    width: 0px;
    height: 3px;
    background-color: #25d06f;
    position: absolute;
    bottom: 0px;
    right: 0px;
    -webkit-transition: .5s;
    transition: .5s;
}

.mega-dropdown:hover .dropbtn::before {
    width: 100%;
}

.mega-dropdown .dropbtn::after {
    content: "";
    width: 0px;
    height: 3px;
    background-color: #25d06f;
    position: absolute;
    top: 0px;
    left: 0px;
    -webkit-transition: .5s;
    transition: .5s;
}

.mega-dropdown:hover .dropbtn::after {
    width: 100%;
}

.mega-dropdown .dropbtn i {
    margin-left: 3px;
}

.mega-dropdown-content {
    position: absolute;
    background-color: #f9f9f9;
    width: 100%;
    left: 0;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    background-color: #0a3041;
    color: #fff;
    padding: 50px 60px 10px;
    visibility: hidden;
    opacity: 0;
    transform: translateY(30px);
    transition: .3s;
}

.mega-dropdown-content .header {
  background: red;
  padding: 16px;
  color: white;
}

.mega-dropdown:hover .mega-dropdown-content {
    visibility: visible;
    opacity: 1;
    transform: translateY(0px);
}

.mega-dropdown .service-category {
    margin-bottom: 30px;
}

.service-category a {
  float: none;
  color: black;
  padding: 16px;
  text-decoration: none;
  display: block;
  text-align: left;
  transform: translateX(0px);
  transition: .5s;
}

.service-category a:hover {
  transform: translateX(5px);
}

.mega-dropdown .service-category a.active {
    transform: translateX(5px);
    color: #25D06F;
}

.service-category a:hover {
  background-color: #ddd;
}

.mega-dropdown-content .service-category .service-category-title {
    font-size: 20px;
    text-align: left;
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: 20px;
    color: #25D06F;
}

.mega-dropdown-content .service-category a {
    position: relative;
    display: block;
    padding: 0px;
    padding-left: 15px;
    line-height: 25px;
    margin-bottom: 10px;
}

.mega-dropdown-content .service-category a:hover {
  background-color: transparent;
}

.mega-dropdown-content .service-category a::before {
  content: '\f105';
  position: absolute;
  left: 0px;
  font-family: 'Font Awesome 5 Free';
  top: -1px;
  color: #25D06F;
}

.mega-dropdown-content .service-category a:hover::before, .mega-dropdown-content .service-category a:hover::after {
  width: 0px;
}

/* Megamenu CSS ends */


/*---------------------------
** Hero area css
---------------------------*/

.hero-area {
    position: relative;
}

.hero-area-overlay {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: #0a3041;
    opacity: .6;
}

.hero-txt {
    padding: 310px 270px 373px 0px;
    color: #fff;
    position: relative;
    z-index: 100;
}

.hero-txt span {
    font-family: 'Source Serif Pro', serif;
    display: inline-block;
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 16px;
    text-transform: capitalize;
}

.hero-txt h1 {
    font-size: 60px;
    font-weight: 600;
    line-height: 1.4;
}

a.hero-boxed-btn {
    display: inline-block;
    width: 200px;
    height: 60px;
    line-height: 60px;
    color: #fff;
    text-align: center;
    border: 2px solid #fff;
    text-decoration: none;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 14px;
    margin-top: 42px;
    position: relative;
    background-color: transparent;
    -webkit-transition: .5s;
    transition: .5s;
    letter-spacing: 1px;
}

a.hero-boxed-btn:hover {
    color: #fff;
    background-color: #25d06f;
}

a.hero-boxed-btn::before {
    content: "";
    position: absolute;
    top: -2px;
    left: -2px;
    bottom: 100%;
    right: 100%;
    border-top: 2px solid #0a3041;
    border-left: 2px solid #0a3041;
    visibility: hidden;
    -webkit-transition: .5s;
    transition: .5s;
}

a.hero-boxed-btn::after {
    content: "";
    position: absolute;
    bottom: -2px;
    right: -2px;
    top: 100%;
    left: 100%;
    border-right: 2px solid #0a3041;
    border-bottom: 2px solid #0a3041;
    visibility: hidden;
    -webkit-transition: .5s;
    transition: .5s;
}

a.hero-boxed-btn:hover::before {
    visibility: visible;
    bottom: 0px;
    right: 0px;
}

a.hero-boxed-btn:hover::after {
    visibility: visible;
    top: -2px;
    left: -2px;
}

.hero-feature {
    color: #fff;
    z-index: 1000;
}

.hero-features {
    color: #fff;
    position: relative;
    z-index: 100;
    padding: 0px 15px;
}

.single-hero-feature {
    position: relative;
    padding: 40px 60px 41px 60px;
}

.single-hero-feature::after {
    position: absolute;
    content: "";
    height: 25px;
    width: 100%;
    top: 0px;
    left: 0;
    -webkit-transition: top .5s;
    transition: top .5s;
}

.single-hero-feature:hover::after {
    top: -25px;
}

.hero-features i {
    font-size: 50px;
    margin: 0px;
}

.hero-features h2,.hero-features .cw-title {
    margin-top: 26px;
    font-size: 24px;
    font-weight: 600;
}


/*---------------------------
** Introduction css
---------------------------*/

.intro-section {
    margin-top: -213px;
}

.intro-txt {
    padding: 77px 47px 79px 47px;
    background-color: #25d06f;
    color: #fff;
}

.intro-txt h2 {
    color: #fff;
}

.intro-txt a {
    display: inline-block;
    position: relative;
    width: 200px;
    height: 60px;
    text-align: center;
    line-height: 60px;
    color: #fff;
    text-transform: uppercase;
    font-weight: 600;
    background-color: #0a3041;
    border: none;
    text-decoration: none;
    font-size: 14px;
}

.intro-txt a span {
    display: inline-block;
    margin-left: 0px;
    -webkit-transition: .3s;
    transition: .3s;
}

.intro-txt a:hover span {
    margin-left: -10px;
}

.intro-txt a::after {
    content: "\f101";
    position: absolute;
    font-family: 'Font Awesome 5 Free';
    font-weight: 700;
    right: 50px;
    color: #fff;
    opacity: 0;
    -webkit-transition: .3s;
    transition: .3s;
}

.intro-txt a:hover::after {
    visibility: visible;
    opacity: 1;
    right: 45px;
}

.intro-bg {
    height: 100%;
}

.video-play-button {
  position: absolute;
  z-index: 10;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  box-sizing: content-box;
  display: block;
  width: 32px;
  height: 44px;
  /* background: #25d06f; */
  border-radius: 50%;
  padding: 18px 20px 18px 28px;
}

.video-play-button:before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  display: block;
  width: 80px;
  height: 80px;
  background: #25d06f;
  border-radius: 50%;
  animation: pulse-border 1500ms ease-out infinite;
}

.video-play-button:after {
  content: "";
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  display: block;
  width: 80px;
  height: 80px;
  background: #25d06f;
  border-radius: 50%;
  transition: all 200ms;
}

.video-play-button:hover:after {
  background-color: darken(#25d06f, 10%);
}

.video-play-button img {
  position: relative;
  z-index: 3;
  max-width: 100%;
  width: auto;
  height: auto;
}

.video-play-button span {
    display: block;
    position: relative;
    z-index: 3;
    margin: 7px 0px 0px 6px;
    width: 0;
    height: 0;
    border-left: 20px solid #fff;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
}

@keyframes pulse-border {
  0% {
    transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
    opacity: 1;
  }
  100% {
    transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
    opacity: 0;
  }
}


/*---------------------------
** Service category section css
---------------------------*/

.service-categories {
    padding-top: 120px;
}

.service-categories .section-title {
    color: #6c7185;
}

.service-categories .single-category {
    box-shadow: 0px 0px 5px #0000001a;
    border-radius: 8px;
    text-align: center;
    padding: 40px 30px;
    margin-bottom: 40px;
    transform: translateY(0px);
    transition: .3s;
}

.service-categories .single-category:hover {
    transform: translateY(-10px);
}

.single-category img {
    max-width: 100%;
}

.single-category .text h3 {
    font-size: 18px;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.single-category .text p {
    font-size: 14px;
    color: #666666;
    line-height: 24px;
    margin-bottom: 10px;
}

.single-category .text {
    margin-top: 10px;
}

.single-category .text a.readmore {
    font-size: 14px;
    font-weight: 600;
    color: #25D06F;
    text-transform: capitalize;
}


/*---------------------------
** How we do section css
---------------------------*/

.approach-section {
    padding: 80px 0px 118px 0px;
}

.approach-section .section-summary {
    margin: 15px 0px 55px 0px;
}

.approach-summary {
    padding-right: 150px;
}

.approach-summary span.section-title {
    font-size: 18px;
    font-style: italic;
    color: #6c7185;
    font-weight: 700;
    font-family: 'Source Serif Pro', serif;
}

.approach-summary h2 {
    color: #38383c;
}

.single-approach {
    margin-bottom: 30px;
}

.single-approach:last-child {
    margin-bottom: 0px;
}

.single-approach h3 {
    font-weight: 500;
    font-size: 22px;
    margin-bottom: 9px;
}

.single-approach p {
    font-size: 14px;
    font-weight: 400;
    color: #666666;
    line-height: 24px;
}

.single-approach:last-child {
    margin-bottom: 0px;
}

.single-approach::after {
    content: "";
    display: block;
    clear: both;
}

.approach-icon-wrapper {
    height: 80px;
    width: 80px;
    border: 1px solid #3fd680;
    border-radius: 50%;
    text-align: center;
    float: left;
    -webkit-transition: .5s;
    transition: .5s;
}

.approach-icon-wrapper i {
    margin: 0;
    line-height: 80px;
    font-size: 30px;
    color: #25d06f;
    -webkit-transition: .5s;
    transition: .5s;
}

.single-approach:hover .approach-icon-wrapper {
    background-color: #25d06f;
    border: 1px solid #25d06f;
}

.single-approach:hover .approach-icon-wrapper i {
    color: #fff;
}

.approach-text {
    margin-left: 110px
}

.approach-summary a.boxed-btn {
    position: relative;
    border: 1px solid #fff;
    -webkit-transition: .3s;
    transition: .3s;
}

.approach-summary a.boxed-btn:hover {
    border: 1px solid #25d06f;
    color: #25d06f;
    background-color: #fff;
}




/*---------------------------
** Statistics section css
---------------------------*/

.statistics-section {
  padding: 90px 0px 83px;
  text-align: center;
  position: relative;
}

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

.statistic-overlay {
  position: absolute;
  top: 0;
  left: 0;
  background-color: #0a3041;
  opacity: .9;
  height: 100%;
  width: 100%;
}

/* image set by the lazy background loader in layout.blade.php (data-lazy-bg) */
.statistics-bg {
  background-size: cover;
}

.statistics-section .round {
  min-height: 255px;
  margin-top: 30px;
  position: relative;
  margin-bottom: 20px;
}
.statistics-section .round strong {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  transform: translate(-50%);
  font-size: 40px;
  color: #fff;
  font-weight: 400;
}
.statistics-section h3, .statistics-section .stat-label {
    display: block;
    color: #fff;
    margin-top: 15px;
    font-weight: 600;
    font-size: 18px;
    text-transform: uppercase;
    word-break: break-all;
}
.statistics-section h3 i, .statistics-section .stat-label i {
  color: #25D06F;
  font-size: 22px;
  margin-right: 6px;
}



/*---------------------------
** CTA section css
---------------------------*/

.cta-bg {
    background-image: url('../img/cta_bg.jpg');
    background-size: cover;
}

.cta-section {
    padding: 49px 0px;
    position: relative;
}

.cta-section h2 {
    color: #fff;
    font-weight: 500;
    margin-top: 10px;
}

.contact-btn-wrapper {
    text-align: right;
}

.cta-overlay {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: #0a3041;
    opacity: .70;
}

.cta-content {
    position: relative;
    z-index: 10;
}

a.contact-btn {
    position: relative;
    width: 180px;
    text-align: center;
}

a.contact-btn span {
    display: inline-block;
    margin-left: 0px;
    -webkit-transition: .3s;
    transition: .3s;
}

a.contact-btn:hover span {
    margin-left: -10px;
}

a.contact-btn::after {
    content: "\f101";
    position: absolute;
    font-family: 'Font Awesome 5 Free';
    font-weight: 700;
    right: 35px;
    color: #fff;
    opacity: 0;
    -webkit-transition: .3s;
    transition: .3s;
}

a.contact-btn:hover::after {
    visibility: visible;
    opacity: 1;
    right: 30px;
}


/*---------------------------
** Case section css
---------------------------*/

.case-bg {
    background-image: url('../img/case/header-bg.jpg');
}

.case-section {
    position: relative;
    padding: 116px 0px 107px 0px;
}

.case-section .section-title {
    color: #6c7185;
}

.case-section .section-summary {
    margin: 15px 0px 56px;
}

.case-carousel.owl-carousel .owl-stage-outer {
    overflow: visible;
}

.single-case-bg-1 {
    background-image: url('../img/case/case-1.jpg');
    background-size: cover;
}

.single-case-bg-2 {
    background-image: url('../img/case/case-2.jpg');
    background-size: cover
}

.single-case-bg-3 {
    background-image: url('../img/case/case-3.jpg');
    background-size: cover
}

.single-case-bg-4 {
    background-image: url('../img/case/case-4.jpg');
    background-size: cover
}

.single-case-bg-5 {
    background-image: url('../img/case/case-5.jpg');
    background-size: cover
}

.single-case-bg-7 {
    background-image: url('../img/case/case-7.jpg');
    background-size: cover
}

.single-case {
    display: block;
    height: 340px;
    width: 100%;
    background-color: #ddd;
    text-decoration: none;
}

.case-carousel.owl-theme .owl-dots .owl-dot.active span,
.case-carousel.owl-theme .owl-dots .owl-dot:hover span {
    background: #25d06f;
}

.single-case .outer-container {
    background-color: rgba(10, 48, 65, 0);
    -webkit-transition: background-color .5s;
    transition: background-color .5s;
}

.single-case .outer-container .case-title {
    color: #fff;
}

.single-case:hover .outer-container {
    background-color: rgba(10, 48, 65, 0.8);
    visibility: visible;
}

.outer-container {
    display: table;
    height: 100%;
    width: 100%;
}

.single-case .inner-container {
    display: table-cell;
    vertical-align: middle;
    padding: 0px 80px;
    text-align: center;
    opacity: 0;
}

.single-case .inner-container {
    display: table-cell;
    vertical-align: middle;
    padding: 0px 80px;
    text-align: center;
    opacity: 0;
    -webkit-transition: .5s;
    transition: .5s;
}

.single-case:hover .inner-container {
    opacity: 1;
}

.single-case .case-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 15px;
    line-height: 28px;
}

.single-case p {
    font-size: 14px;
    font-weight: 600;
    color: #25d06f;
}

.single-case a.readmore-btn {
    margin-top: 18px;
}

.case-carousel {
    position: relative;
}

.case-carousel.owl-theme .owl-nav [class*=owl-]:hover {
    background: transparent;
}

.case-carousel button.owl-prev {
    display: inline-block;
    position: absolute;
    height: 40px;
    width: 40px;
    border: 2px solid #fff !important;
    border-radius: 50% !important;
    line-height: 40px;
    left: -20px;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    z-index: 2;
    opacity: 0;
    -webkit-transition: .5s;
    transition: .5s;
    outline: none;
}

.case-carousel button.owl-prev i {
    color: #fff;
    -webkit-transition: .5s;
    transition: .5s;
}

.case-carousel button.owl-prev:hover {
    border: 2px solid #25d06f !important;
}

.case-carousel button.owl-prev:hover i {
    color: #25d06f;
}

.case-carousel button.owl-next {
    display: inline-block;
    position: absolute;
    height: 40px;
    width: 40px;
    border: 2px solid #fff !important;
    border-radius: 50% !important;
    line-height: 40px;
    right: -20px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    outline: none;
    opacity: 0;
    z-index: 2;
    -webkit-transition: .5s;
    transition: .5s;
}

.case-carousel button.owl-next i {
    color: #fff;
    -webkit-transition: .5s;
    transition: .5s;
}

.case-carousel button.owl-next:hover {
    border: 2px solid #25d06f !important;
}

.case-carousel button.owl-next:hover i {
    color: #25d06f;
}

.case-carousel:hover button.owl-prev {
    left: 0px;
    opacity: 1;
}

.case-carousel:hover button.owl-next {
    right: 0px;
    opacity: 1;
}

.case-carousel .owl-nav::after {
    display: block;
    clear: both;
    content: "";
}

.case-carousel::before {
    content: "";
    position: absolute;
    left: -20px;
    top: 0px;
    width: 120px;
    height: 100%;
    background-image: -webkit-gradient(linear, left top, right top, from(rgba(10, 10, 10, 0.9)), color-stop(rgba(0, 0, 0, 0.6)), color-stop(rgba(0, 0, 0, 0.4)), to(rgba(0, 0, 0, 0)));
    background-image: linear-gradient(to right, rgba(10, 10, 10, 0.9), rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0));
    z-index: 1;
    opacity: 0;
    -webkit-transition: .5s;
    transition: .5s;
}

.case-carousel:hover::before {
    opacity: 1;
}

.case-carousel::after {
    content: "";
    position: absolute;
    right: -20px;
    top: 0px;
    width: 120px;
    height: 100%;
    background-image: -webkit-gradient(linear, right top, left top, from(rgba(10, 10, 10, 0.9)), color-stop(rgba(0, 0, 0, 0.6)), color-stop(rgba(0, 0, 0, 0.4)), to(rgba(0, 0, 0, 0)));
    background-image: linear-gradient(to left, rgba(10, 10, 10, 0.9), rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0));
    z-index: 1;
    opacity: 0;
    -webkit-transition: .5s;
    transition: .5s;
}

.case-carousel:hover::after {
    opacity: 1;
}


/*---------------------------
** Testimonial section css
---------------------------*/

.testimonial-section {
    padding-bottom: 116px;
}

.testimonial-section .section-title {
    color: #6c7185;
}

.testimonial-section .section-summary {
    margin: 17px 0px 51px;
}

.testimonial-carousel.owl-carousel .owl-item img {
    display: inline-block;
    width: 70px;
    border-radius: 50%;
}

.testimonial-carousel::after {
    content: "";
    display: block;
    clear: both;
}

.single-testimonial .img-wrapper {
    float: left;
}

.client-desc {
    margin-left: 100px;
}

.single-testimonial {
    padding: 40px 40px 40px;
    background-color: #f7f7f7;
    position: relative;
    margin: 4px;
}

.single-testimonial::before {
    content: "";
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 100%;
    right: 100%;
    opacity: 0;
    border-top: 2px solid #25d06f;
    border-right: 2px solid #25d06f;
}

.single-testimonial:hover::before {
    opacity: 1;
    right: 0px;
    bottom: 0px;
    -webkit-transition: opacity .001s, right .125s linear .001s, bottom .125s linear .126s;
    transition: opacity .001s, right .125s linear .001s, bottom .125s linear .126s;
}

.single-testimonial::after {
    content: "";
    position: absolute;
    bottom: 0px;
    right: 0px;
    top: 100%;
    left: 100%;
    opacity: 0;
    border-bottom: 2px solid #25d06f;
    border-left: 2px solid #25d06f;
}

.single-testimonial:hover::after {
    -webkit-transition: opacity .001s linear .251s, left .125s linear .252s, top .125s linear .377s;
    transition: opacity .001s linear .251s, left .125s linear .252s, top .125s linear .377s;
    opacity: 1;
    left: 0px;
    top: 0px;
}

.single-testimonial p.comment {
    font-weight: 400;
    font-size: 18px;
    color: #5d5d61;
    line-height: 28px;
    margin-bottom: 18px;
}

.single-testimonial h3 {
    font-family: 'Source Serif Pro', serif;
    font-weight: 700;
    color: #178246;
    font-size: 14px;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.single-testimonial p.rank {
    font-weight: 400;
    font-size: 14px;
    color: #666666;
}

/* The visible dot stays 10px; the button around it is grown to the 24px
   minimum touch target. */
.testimonial-carousel.owl-theme .owl-dots .owl-dot {
    outline: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    min-height: 24px;
}

.testimonial-carousel.owl-theme .owl-dots .owl-dot span {
    margin: 0px 5px;
}

.testimonial-carousel.owl-theme .owl-dots .owl-dot.active span {
    background: #25D06F;
}

.testimonial-carousel.owl-theme .owl-dots .owl-dot span {
    transition: .3s;
}

/*---------------------------
** Team section css
---------------------------*/

.team-section {
    position: relative;
    padding: 116px 0px 120px;
}

.team-section .section-summary {
    margin: 20px 0px 47px;
}

.team-bg {
    background-image: url('../img/team_bg.jpg');
    background-size: cover;
}

.team-overlay {
    background-color: #0a3041;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    opacity: .8;
}

.team-content {
    position: relative;
    z-index: 2;
    color: #fff;
}

.owl-carousel.common-carousel .owl-nav button.owl-next, .owl-carousel.common-carousel .owl-nav button.owl-prev {
    background: #25D06F;
    width: 40px;
    display: inline-block;
    height: 40px;
    border: 1px solid #25D06F;
    color: #fff;
    opacity: 0;
    transition: .3s;
}

.owl-carousel.common-carousel:hover .owl-nav button.owl-next, .owl-carousel.common-carousel:hover .owl-nav button.owl-prev {
    opacity: 1;
}

.owl-theme.common-carousel .owl-nav {
    position: absolute;
    width: 100%;
    top: 50%;
    transform: translateY(-50%);
}

.owl-carousel.common-carousel .owl-nav button.owl-prev {
    float: left;
    margin-left: -20px;
    transition: .5s;
}

.owl-carousel.common-carousel .owl-nav button.owl-next {
    float: right;
    margin-right: -20px;
    transition: .5s;
}

.owl-carousel.common-carousel .owl-nav button.owl-next:hover, .owl-carousel.common-carousel .owl-nav button.owl-prev:hover {
    background: #fff;
    color: #25D06F;
}

.single-team-member {
    position: relative;
}

.single-team-member::before {
    content: "";
    position: absolute;
    top: 0px;
    left: 0px;
    right: 100%;
    bottom: 100%;
    border-top: 2px solid #25d06f;
    border-left: 2px solid #25d06f;
    visibility: hidden;
    z-index: 10;
    -webkit-transition: .5s;
    transition: .5s;
}

.single-team-member::after {
    content: "";
    position: absolute;
    bottom: 0px;
    right: 0px;
    left: 100%;
    top: 100%;
    border-bottom: 2px solid #25d06f;
    border-right: 2px solid #25d06f;
    visibility: hidden;
    -webkit-transition: .5s;
    transition: .5s;
}

.single-team-member:hover::before {
    visibility: visible;
    right: 0px;
    bottom: 0px;
}

.single-team-member:hover::after {
    visibility: visible;
    left: 0px;
    top: 0px;
}

.team-img-wrapper {
    position: relative;
    overflow: hidden;
}

.social-accounts {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #25d06f;
    padding: 15px 0px;
    -webkit-transform: translateY(55px);
    transform: translateY(55px);
    opacity: 0;
    -webkit-transition: .5s;
    transition: .5s;
    z-index: 20;
}

.social-accounts ul {
    text-align: center;
}

.social-accounts ul li {
    display: inline-block;
    width: 30px;
    height: 30px;
    line-height: 30px;
    margin: 0px 5px;
    border-radius: 50%;
}

.social-accounts ul li a {
    border: 1px solid #fff;
    border-radius: 50%;
    color: #fff;
    display: block;
    -webkit-transition: .3s;
    transition: .3s;
}

.social-accounts ul li a:hover {
    background-color: #fff;
    color: #25d06f;
}

.single-team-member:hover .social-accounts {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
    opacity: 1;
}

.member-info {
    padding: 27px 25px 30px;
    background-color: #fff;
    margin-top: -3px;
    text-align: center;
}

.member-info .member-name {
    color: #444448;
    font-family: 'Source Serif Pro', serif;
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 1px;
}

.member-info small {
    font-weight: 400;
    font-size: 14px;
    color: #25d06f;
}

.single-team-member img {
    width: 100%;
}


/*---------------------------
** Pricing section css
---------------------------*/

.pricing-tables .section-title {
    color: #6c7185;
}

.pricing-bg.home-14 {
    background: none;
}

.pricing-tables {
    padding-top: 120px;
}

.single-pricing-table {
    padding: 51px 0px 60px;
    background-color: #fff;
    border: 2px solid #f1f1f1;
    text-align: center;
    -webkit-transition: .5s;
    transition: .5s;
}

.single-pricing-table:hover {
    background-color: #25D06F;
    border: 2px solid #25D06F;
}

.single-pricing-table:hover span.title {
    color: #fff;
}

.single-pricing-table:hover h1 {
    color: #fff;
}

.single-pricing-table:hover span {
    color: #fff;
}

.single-pricing-table:hover .features * {
    transition: .5s;
    color: #fff !important;
}

.single-pricing-table:hover a.pricing-btn {
    color: #fff;
    background-color: #25D06F;
    border: 2px solid #fff
}

.pricing-tables div[class*="col-"]:nth-child(2n) .single-pricing-table {
    border-right: none;
    border-left: none;
}

.single-pricing-table span.title {
    text-transform: uppercase;
    font-size: 18px;
    display: block;
    color: #444448;
    font-weight: 700;
    margin-bottom: 19px;
    -webkit-transition: .5s;
    transition: .5s;
}

.single-pricing-table .price {
    color: #25D06F;
    margin-bottom: 22px;
}

.single-pricing-table .price h1,
.single-pricing-table .price .price-value {
    display: inline-block;
    font-size: 48px;
    font-weight: 400;
    line-height: 1.2;
    margin-top: 0;
    margin-bottom: .5rem;
    -webkit-transition: .5s;
    transition: .5s;
}

.single-pricing-table .price span {
    display: inline-block;
    font-size: 14px;
    -webkit-transition: .5s;
    transition: .5s;
}

.single-pricing-table .features ul li {
    color: #333333;
    margin-bottom: 15px;
    -webkit-transition: .5s;
    transition: .5s;
}

.single-pricing-table .features ul li:last-child {
    margin-bottom: 0px;
}

.single-pricing-table a.pricing-btn {
    border: 2px solid #bfbfbf;
    text-transform: capitalize;
    background-color: transparent;
    font-size: 14px;
    padding: 12px 30px;
    font-weight: 600;
    display: inline-block;
    margin-top: 42px;
    -webkit-transition: .5s;
    transition: .5s;
    color: #5d5d61;
    text-decoration: none;
}

.single-pricing-table a.pricing-btn:hover {
    background-color: #fff;
    color: #25D06F;
}



/*---------------------------
** Blog section css
---------------------------*/

.blog-section {
    padding: 117px 0px 118px;
}

.blog-section .section-summary {
    margin: 20px 0px 47px;
}

.blog-section .section-title {
    color: #6c7185;
}

.blog-img-wrapper {
    overflow: hidden;
}

.blog-img-wrapper img {
    width: 100%;
    -webkit-transition: .5s;
    transition: .5s;
    position: relative;
}

.single-blog:hover img {
    -webkit-transform: scale(1.2, 1.2);
    transform: scale(1.2, 1.2);
}

.blog-txt {
    background-color: #f7f7f7;
    padding: 29px 25px 30px;
    margin-top: -3px;
    position: relative;
}

.blog-txt .date {
    font-size: 16px;
    color: #71717b;
    font-weight: 400;
}

.blog-txt .date span {
    color: #25d06f;
    font-weight: 700;
}

.blog-txt small:first-child {
    margin-right: 10px;
}

.blog-txt small:last-child {
    margin-left: 10px;
}

.blog-txt .blog-title {
    font-size: 24px;
    color: #38383c;
    font-family: 'Source Serif Pro', serif;
    font-weight: 700;
    margin: 16px 0px 10px;
    line-height: 1.3;
}

.blog-txt .blog-title a {
    color: #38383c;
    position: relative;
    text-decoration: none;
    -webkit-transition: .3s;
    transition: .3s;
}

.blog-txt .blog-title a:hover {
    color: #25d06f;
}

.blog-txt .blog-summary {
    font-weight: 400;
    color: #5d5d61;
    font-size: 14px;
    line-height: 24px;
}

.single-blog {
    position: relative;
    margin: 4px;
}

.single-blog::after {
    content: "";
    position: absolute;
    top: -2px;
    left: -2px;
    right: 100%;
    bottom: 100%;
    border-top: 2px solid #25d06f;
    border-left: 2px solid #25d06f;
    visibility: hidden;
    z-index: -10;
    -webkit-transition: .5s;
    transition: .5s;
}

.single-blog::before {
    content: "";
    position: absolute;
    bottom: -2px;
    right: -2px;
    left: 100%;
    top: 100%;
    border-right: 2px solid #25d06f;
    border-bottom: 2px solid #25d06f;
    visibility: hidden;
    z-index: -10;
    -webkit-transition: .5s;
    transition: .5s;
}

.single-blog:hover::after {
    visibility: visible;
    right: 0px;
    bottom: 0px;
}

.single-blog:hover::before {
    visibility: visible;
    left: -2px;
    top: -2px;
}

a.readmore-btn {
    display: inline-block;
    position: relative;
    margin-top: 18px;
    font-size: 14px;
    background-color: #25d06f;
    color: #fff;
    padding: 15px;
    text-align: center;
    width: 120px;
    font-weight: 600;
    text-decoration: none;
}

a.readmore-btn span {
    -webkit-transition: .5s;
    transition: .5s;
}

a.readmore-btn:hover span {
    margin-left: -10px;
}

a.readmore-btn::after {
    position: absolute;
    content: "\f101";
    font-family: 'Font Awesome 5 Free';
    font-weight: 700;
    right: 15px;
    opacity: 0;
    -webkit-transition: .5s;
    transition: .5s;
    margin-top: 1px;
}

a.readmore-btn:hover::after {
    opacity: 1;
    right: 12px;
}


/*---------------------------
** Partner section css
---------------------------*/

.partner-section .top-border {
    border-top: 2px solid #dbddde;
}

.single-partner-item {
    height: 196px;
    text-align: center;
}

.single-partner-item .outer-container {
    margin: 0 auto;
}

.owl-carousel.common-carousel.partner-carousel .owl-nav button.owl-next, .owl-carousel.common-carousel.partner-carousel .owl-nav button.owl-prev {
    width: 30px;
    height: 30px;
    font-size: 12px;
    border-radius: 50%;
    outline: 0;
}

/*---------------------------
** Footer section css
---------------------------*/

.footer-section {
    background-color: #0a3041;
    color: #c5dadc;
}

.footer-logo-wrapper {
    text-align: left;
    max-width: 150px;
    max-height: 60px;
}

.footer-logo-wrapper a {
    display: inline-block;
}

.footer-logo-wrapper img {
    width: 100%;
}

.footer-section .footer-txt {
    font-size: 14px;
    line-height: 24px;
    font-weight: 400;
    margin-top: 22px;
}

.footer-section h2, .footer-section .footer-title {
    font-size: 18px;
    font-family: 'Source Serif Pro', serif;
    font-weight: 700;
    color: #fff;
    margin-bottom: 32px;
}

ul.footer-links li {
    display: block;
    margin-bottom: 10px;
}

ul.footer-links li:last-child {
    margin-bottom: 0px;
}

ul.footer-links li a {
    position: relative;
    display: inline-block;
    font-size: 14px;
    color: #c5dadc;
    text-decoration: none;
    padding-left: 15px;
    -webkit-transition: .5s;
    transition: .5s;
}

ul.footer-links li a::after {
    position: absolute;
    left: 0;
    top: 0;
    font-family: 'Font Awesome 5 Free';
    content: "\f0da";
    font-weight: 700;
    color: #25d06f;
}

ul.footer-links li a:hover {
    -webkit-transform: translateX(5px);
    transform: translateX(5px);
    color: #25d06f;
}

.top-footer-section {
    padding: 70px 0px 50px 0px;
    border-bottom: 2px solid #214c5f;
}

.footer-contact-info ul li {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-bottom: 20px;
    line-height: 1.4;
}

.footer-contact-info ul li::after {
    content: "";
    display: block;
    clear: both;
}

.footer-contact-info ul li i {
    color: #23c66c;
    font-size: 14px;
}

.footer-contact-info ul li span {
    font-weight: 400;
    font-size: 14px;
    margin-left: 15px;
    line-height: 24px;
    margin-top: -6px;
}

.copyright-section {
    padding: 25px 0px 27px;
    font-size: 14px;
}

/* Copyright text is admin-authored HTML, so its links otherwise inherit
   Bootstrap's #007bff, which fails contrast on the dark footer. The underline
   is what distinguishes the link from the surrounding text. */
.copyright-section a {
    color: #3295ff;
    text-decoration: underline;
}

.footer-newsletter {
    margin-top: 15px;
}

.footer-newsletter p {
    margin-bottom: 12px;
    font-size: 14px;
    line-height: 22px;
}

.footer-newsletter input[type="email"] {
    height: 40px;
    background-color: #0a30411a;
    color: #fff;
}

.footer-newsletter input[type="email"]::placeholder {
    color: #fff;
}

.footer-newsletter button[type="submit"], .footer-newsletter input[type="submit"] {
    background-color: #25d06f;
    padding: 10px 22px;
    margin-top: 10px;
    border-radius: 0px;
    margin-left: 0px;
    border: 1px solid #25d06f;
    transition: .3s;
}

.footer-newsletter button[type="submit"]:hover, .footer-newsletter input[type="submit"]:hover {
    background-color: #fff;
    color: #25d06f;
}

/*---------------------------
** Home 2 page css
---------------------------*/

.hero2-carousel {
    position: relative;
}

.hero2-carousel.owl-theme .owl-dots {
    position: absolute;
    right: 28px;
    width: 30px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

.hero2-carousel.owl-theme .owl-dots .owl-dot {
    outline: none;
}

.hero2-carousel.owl-theme .owl-dots .owl-dot span {
    background-color: rgba(255, 255, 255, .2);
    height: 20px;
    width: 20px;
}

.hero2-carousel.owl-theme .owl-dots .owl-dot.active span {
    background-color: #25d06f;
}

.hero-bg-1 {
    background-image: url('../img/hero-bg.jpg');
    background-size: cover;
}

.hero-bg-2 {
    background-image: url('../img/hero-bg-2.jpg');
    background-size: cover;
}

.hero-bg-3 {
    background-image: url('../img/hero-bg-3.jpg');
    background-size: cover;
}

@-webkit-keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@-webkit-keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

.fadeOut {
    -webkit-animation-name: fadeOut;
    animation-name: fadeOut;
}

@-webkit-keyframes fadeInDown {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }
    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }
    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@-webkit-keyframes fadeInUp {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
    }
    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
    }
    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

.hero2-carousel .owl-item.active .hero-txt span {
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-delay: .2s;
    animation-delay: .2s
}

.hero2-carousel .owl-item.active .hero-txt a.hero-boxed-btn,
.hero2-carousel .owl-item.active .hero-txt h1 {
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-delay: .2s;
    animation-delay: .2s
}


/*---------------------------
** Home 3 page css
---------------------------*/

.hero-txt.home-3 {
    position: static;
    z-index: 0;
}

.hero-txt.home-3 * {
    position: relative;
    z-index: 100;
}

div#particles-js canvas {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 50;
}

.home-3.intro-section {
    position: relative;
}


/*---------------------------
** About page css
---------------------------*/

.breadcrumb-area .breadcrumb-txt {
    padding: 260px 0px 112px 0px;
}

.breadcrumb-area {
    position: relative;
}

.breadcrumb-txt {
    padding: 325px 270px 360px 0px;
    color: #fff;
    position: relative;
    z-index: 100;
}

.breadcrumb-txt span {
    font-family: 'Source Serif Pro', serif;
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 12px;
    text-transform: capitalize;
    display: inline-block;
}

.cases .breadcrumb-txt span {
    margin-bottom: 8px;
}

.breadcrumb-txt h1 {
    font-size: 50px;
    font-weight: 600;
    line-height: 1.3;
}

.about ul.breadcumb {
    display: block;
    margin-top: 48px;
}

.breadcrumb-area-overlay {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: #0a3041;
    opacity: .6;
}

.about-bg {
    background-image: url('../img/about/header-bg.jpg');
    background-size: cover;
}

.about-company-section {
    padding: 118px 0px;
}

.about-company-section img {
    max-width: 100%;
}

.about-company-section .section-summary {
    margin: 20px 0px 42px;
}

.about-company-section .section-title {
    color: #6c7185;
}

.about-company-txt {
    padding-right: 10px
}

.about-company-txt p {
    font-size: 14px;
    color: #666666;
    font-weight: 400;
    margin-bottom: 23px;
    line-height: 28px;
}

.about .section-title {
    color: #6c7185;
}

.about .section-summary {
    color: #38383c;
}

.tile-gallery .big-img {
    min-height: 280px;
    margin-bottom: 30px;
}

.tile-gallery .big-img-bg {
    background-image: url('../img/about/gallery_1.jpg');
    background-size: cover;
}

.tile-gallery .small-img {
    min-height: 230px;
}

.tile-gallery .small-img-bg-1 {
    background-image: url('../img/about/gallery_2.jpg');
    background-size: cover;
}

.tile-gallery .small-img-bg-2 {
    background-image: url('../img/about/gallery_3.jpg');
    background-size: cover;
}

.choose-us {
    margin-top: 63px;
}

.single-reason {
    padding-right: 10px;
}

.about-icon-wrapper {
    height: 100%;
    width: 80px;
    border: 1px solid #3fd680;
    border-radius: 50%;
    text-align: center;
    float: left;
    -webkit-transition: .5s;
    transition: .5s;
}

.single-reason .reason-txt {
    margin-left: 105px;
}

.single-reason .reason-txt h4 {
    font-size: 22px;
    color: #38383c;
    font-weight: 500;
    margin-top: 17px;
}

.single-reason .reason-txt p {
    font-size: 14px;
    color: #666666;
    line-height: 24px;
    font-weight: 400;
    margin-top: 9px;
}

.about-icon-wrapper i {
    margin: 0;
    line-height: 80px;
    font-size: 30px;
    color: #25d06f;
    -webkit-transition: .5s;
    transition: .5s;
}

.single-reason:hover .about-icon-wrapper {
    background-color: #25d06f;
    border: 1px solid #25d06f;
}

.single-reason:hover .about-icon-wrapper i {
    color: #fff;
}

.about .member-info {
    background-color: #f3f5f9;
}

.about.testimonial-section {
    padding: 117px 0px 113px;
}

.about.team-section {
    padding: 0px 0px 120px;
}

.about.team-section .section-summary {
    margin: 15px 0px 47px;
}

.about.testimonial-section .section-summary {
    margin: 15px 0px 52px;
}


/*---------------------------
** Services page css
---------------------------*/

.breadcrumb-area .breadcrumb-txt.reduce-padding {
    padding: 290px 0px 139px 0px;
}

.breadcrumb-txt span {
    margin-bottom: 11px;
}

.service-section {
    padding: 120px 0px 120px;
}

.service-bg {
    background-image: url('../img/services/header-bg.jpg');
    background-size: cover;
}

.service-section .section-title {
    color: #6c7185;
}

.single-service {
    margin-bottom: 30px;
    position: relative;
}

.single-service::after {
    content: "";
    position: absolute;
    top: -2px;
    left: -2px;
    right: 100%;
    bottom: 100%;
    border-top: 2px solid #25d06f;
    border-left: 2px solid #25d06f;
    visibility: hidden;
    z-index: -10;
    -webkit-transition: .5s;
    transition: .5s;
}

.single-service::before {
    content: "";
    position: absolute;
    bottom: -2px;
    right: -2px;
    left: 100%;
    top: 100%;
    border-right: 2px solid #25d06f;
    border-bottom: 2px solid #25d06f;
    visibility: hidden;
    z-index: -10;
    -webkit-transition: .5s;
    transition: .5s;
}

.single-service:hover::after {
    visibility: visible;
    right: 0px;
    bottom: 0px;
}

.single-service:hover::before {
    visibility: visible;
    left: -2px;
    top: -2px;
}

.single-service .service-img-wrapper {
    overflow: hidden;
}

.single-service img {
    -webkit-transition: .5s;
    transition: .5s;
}

.single-service:hover img {
    -webkit-transform: scale(1.2, 1.2);
    transform: scale(1.2, 1.2);
}

.service-section .col-md-6:last-child .single-service {
    margin-bottom: 0;
}

.service-section .col-md-6:nth-last-child(2) .single-service {
    margin-bottom: 0;
}

.service-img-wrapper img {
    width: 100%;
}

.service-txt {
    background-color: #f7f7f7;
    padding: 25px 28px 30px;
    margin-top: -3px;
}

.service-txt .service-title {
    font-size: 24px;
    color: #38383c;
    font-family: 'Source Serif Pro', serif;
    font-weight: 700;
    margin-bottom: 10px;
    line-height: 1.4;
}

.service-txt .service-title a {
    color: #38383c;
    text-decoration: none;
    -webkit-transition: .3s;
    transition: .3s;
}

.service-txt .service-title a:hover {
    color: #25d06f;
}

.service-txt .service-summary {
    font-weight: 400;
    color: #5d5d61;
    font-size: 14px;
    line-height: 24px;
}

.appoint-section {
    padding: 67px 35px 70px;
    background-color: #25d06f;
    color: #fff;
}

.appoint-section h4 {
    font-size: 24px;
    font-family: 'Source Serif Pro', serif;
    font-weight: 700;
    margin-bottom: 30px;
}

.appoint-section input[type="text"],
.appoint-section input[type="email"],
.appoint-section input[type="date"],
.appoint-section input[type="number"],
.appoint-section input[type="tel"],
input[type="url"],
.appoint-section input[type="color"],
.appoint-section input[type="datetime-local"],
.appoint-section input[type="range"],
.appoint-section input[type="month"],
.appoint-section input[type="week"],
.appoint-section input[type="search"],
.appoint-section input[type="time"] {
    border: none;
}

a.download-btn {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    font-weight: 600;
    background-color: #0a3041;
    color: #fff;
    padding: 22px 30px;
    text-decoration: none;
    font-size: 16px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-top: 30px;
    border: 1px solid #0a3041;
    -webkit-transition: .5s;
    text-transform: uppercase;
    transition: .5s;
}

a.download-btn:hover {
    background-color: #fff;
    color: #0a3041;
}

a.download-btn i {
    margin-right: 6px;
    font-size: 30px;
    font-weight: 400;
    color: #25D06F;
}


/*---------------------------
** Service details page css
---------------------------*/

.service-details.breadcrumb-area .breadcrumb-txt {
    padding: 260px 0px 110px 0px;
}

.service-details-section {
    padding: 120px 0px 118px;
}

.service-details img {
    max-width: 100%;
}

.service-details-img-1,
.service-details-img-2 {
    width: 100%;
}

.service-details-txt {
    margin-bottom: 54px;
}

.service-details-txt h2 {
    font-size: 35px;
    font-family: 'Source Serif Pro', serif;
    font-weight: 700;
    color: #38383c;
    margin: 22px 0px;
}

.service-details-txt p {
    font-size: 14px;
    font-weight: 400;
    color: #5d5d61;
    line-height: 28px;
}

.why-choose-this h3 {
    font-size: 30px;
    font-family: 'Source Serif Pro', serif;
    font-weight: 700;
    color: #38383c;
}

.why-choose-this p {
    margin: 22px 0px 23px;
}

.why-choose-this p,
.why-choose-this li {
    font-size: 14px;
    font-weight: 400;
    color: #5d5d61;
    line-height: 24px;
}

.why-choose-this li {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-bottom: 13px;
    color: #38383c;
}

.why-choose-this li:last-child {
    margin-bottom: 0px;
}

.why-choose-this li i {
    margin-top: 5px;
    margin-right: 10px;
    color: #25d06f;
}


/*---------------------------
** Packages page css
---------------------------*/

.pricing-tables.pricing-page div[class*="col-"]:nth-child(2n) .single-pricing-table {
    border-right: 2px solid #f1f1f1;
    border-left: 2px solid #f1f1f1;
}

.pricing-tables.pricing-page .single-pricing-table {
    margin-bottom: 40px;
}

.pricing-tables.pricing-page {
    padding-bottom: 80px;
}


/*---------------------------
** Blog page css
---------------------------*/

.blogs .breadcrumb-txt span {
    margin-bottom: 11px;
}

.blogs ul.breadcumb {
    display: block;
    margin-top: 50px;
}

.blog-lists {
    padding: 120px 0px 120px;
}

.blog-bg {
    background-image: url('../img/blog/blog-bg.jpg');
    background-size: cover;
}

.blog-lists .single-blog {
    margin-bottom: 30px;
    position: relative;
}

.blog-lists .col-md-6:last-child .single-blog {
    margin-bottom: 0;
}

.blog-lists .col-md-6:nth-last-child(2) .single-blog {
    margin-bottom: 0;
}

.blog-sidebar-widgets {
    background-color: #f7f7f7;
    padding: 40px 35px;
    margin-bottom: 40px;
}

.blog-sidebar-widgets.post-widget {
    padding: 37px 35px;
}

.blog-sidebar-widgets.category-widget {
    padding: 38px 35px 34px;
}

.searchbar::after {
    content: "";
    display: block;
    clear: both;
}

.searchbar input[type="text"],
.searchbar input[type="search"] {
    width: 80%;
    float: left;
    border: none;
}

.searchbar button[type="submit"],
.searchbar input[type="submit"] {
    width: 20%;
    float: left;
    padding: 0;
    height: 50px;
}

.popular-posts-lists h4,
.category-lists h2 {
    margin-bottom: 26px;
    font-size: 18px;
    font-weight: 700;
    color: #38383c;
    font-family: 'Source Serif Pro', serif;
}

.category-lists h2 {
    margin-bottom: 23px;
}

.single-popular-post {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-bottom: 30px;
}

.single-popular-post:last-child {
    margin-bottom: 0px;
}

.single-popular-post::after {
    content: "";
    display: block;
    clear: both;
}

.single-popular-post img {
    width: 60px;
}

.popular-post-txt {
    margin-left: 15px
}

.popular-post-txt h5 {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 5px;
    font-family: 'Source Serif Pro', serif;
    line-height: 1.3;
}

.popular-post-txt h5 a {
    color: #38383c;
    text-decoration: none;
    -webkit-transition: .5s;
    transition: .5s;
}

.popular-post-txt h5 a:hover {
    color: #25d06f;
}

.popular-post-txt small {
    font-size: 12px;
    font-weight: 400;
    color: #797e82;
}

.category-lists ul {
    padding: 0;
}

.category-lists ul li {
    display: block;
    margin-bottom: 14px;
}

.category-lists ul li.active a {
    color: #25D06F;
}

.category-lists ul li:last-child {
    display: block;
    margin-bottom: 7px;
}

.category-lists ul li a {
    position: relative;
    display: inline-block;
    font-size: 14px;
    color: #38383c;
    text-decoration: none;
    padding-left: 10px;
    -webkit-transition: .5s;
    transition: .5s;
}

.category-lists ul li a:hover {
    color: #25d06f;
}

.category-lists ul li a::after {
    position: absolute;
    content: "\f0da";
    top: 0;
    left: 0;
    font-family: 'Font Awesome 5 Free';
    font-weight: 700;
    color: #25d06f;
}

.subscribe-section {
    padding: 42px 40px 45px;
    background-color: #0a3041;
    color: #fff;
}

.subscribe-section span {
    display: inline-block;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 11px;
    color: #25d06f;
    font-family: 'Source Serif Pro', serif;
}

.subscribe-section h3 {
    font-size: 24px;
    font-weight: 600;
    position: relative;
    text-transform: uppercase;
    line-height: 1.4;
}

.subscribe-section h3::after {
    content: "";
    position: absolute;
    bottom: -17px;
    left: 0;
    width: 100px;
    height: 3px;
    background-color: #25d06f;
}

.subscribe-form {
    margin-top: 47px;
}

.subscribe-form input[type="email"] {
    border: none;
}

.subscribe-form input[type="submit"],
.subscribe-form button[type="submit"] {
    display: inline-block;
    background-color: #25d06f;
    border: 1px solid #25d06f;
    color: #fff;
    padding: 15px 0px;
    width: 120px;
    text-align: center;
    text-transform: uppercase;
}

.subscribe-form input[type="submit"]:hover,
.subscribe-form button[type="submit"]:hover {
    background-color: #fff;
    border: 1px solid #25d06f;
    color: #25d06f;
}

.pagination-nav {
    margin-top: 50px;
    font-size: 14px;
}

.pagination-nav .pagination {
    justify-content: center;
}

.pagination-nav li.page-item {
    margin: 0px 5px;
}

.pagination-nav a.page-link,
.pagination-nav span.page-link {
    padding: 10px 15px;
    border: 2px solid #dddddd;
    color: #38383c;
}

.pagination-nav .page-item:first-child .page-link {
    border-radius: 0;
}

.pagination-nav .page-item:last-child .page-link {
    border-radius: 0;
}

.pagination-nav li.page-item.active a, .pagination-nav li.page-item.active span {
    background-color: #25d06f;
    border: 2px solid #25d06f;
}


/*---------------------------
** Blog details page css
---------------------------*/

.breadcrumb-area.blog-details .breadcrumb-txt span {
    margin-bottom: 13px;
}

.blog-details-section {
    padding: 120px 0px 90px;
}

.blog-details img {
    max-width: 100%;
}

.blog-details img.blog-details-img-1 {
    width: 100%;
}

.blog-details-section small.date {
    font-size: 12px;
    color: #797e82;
    display: inline-block;
    margin-top: 26px;
}

.blog-details-title {
    font-size: 35px;
    font-weight: 700;
    margin: 14px 0px 23px;
    font-family: 'Source Serif Pro', serif;
    line-height: 1.4;
}

.blog-details-body p {
    font-size: 14px;
    line-height: 28px;
    color: #666666;
}

.blog-details-quote {
    padding: 50px 37px;
    border-left: 3px solid #25d06f;
    font-style: italic;
    line-height: 32px;
    font-size: 18px;
    margin: 38px 0px 35px;
    background-color: #f7f7f7;
}

.blog-share {
    margin-top: 38px;
}

.blog-share ul li {
    display: inline-block;
    margin-right: 15px;
}

.blog-share ul li:last-child {
    margin-right: 0px;
}

.blog-share ul li a {
    display: block;
    width: 120px;
    background-color: #000;
    color: #fff;
    text-align: center;
    padding: 15px 0px;
    border-radius: 50px;
    font-size: 14px;
    text-transform: capitalize;
    text-decoration: none;
}

.blog-share ul li a:hover {
    opacity: .8;
}

.blog-share ul li a.facebook-share {
    background-color: #275baa;
}

.blog-share ul li a.twitter-share {
    background-color: #28c8f0;
}

.blog-share ul li a.linkedin-share {
    background-color: #0e76a8;
}

.blog-share ul li a i {
    margin-right: 10px;
}

.author-info {
    margin: 68px 0px 65px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.author-info img {
    border-radius: 50%;
    width: 100px;
}

.author-details {
    margin-left: 35px;
}

.author-info .name {
    font-weight: 600;
    font-size: 16px;
    margin-bottom: 20px;
}

.author-info .desc {
    font-size: 14px;
    line-height: 28px;
    color: #666666;
}

.comment-lists h3 {
    font-size: 24px;
    font-weight: 700;
    color: #38383c;
    display: block;
    position: relative;
    margin-bottom: 49px;
    font-family: 'Source Serif Pro', serif;
}

.comment-lists h3::after {
    position: absolute;
    content: "";
    bottom: -9px;
    left: 0;
    height: 3px;
    width: 50px;
    background-color: #25d06f;
}

.single-comment {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 30px 25px;
    background-color: #fbfbfb;
    margin-bottom: 30px;
}

.single-comment:last-child {
    margin-bottom: 0px;
}

.single-comment-wrapper {
    margin-right: 20px
}

.single-comment-wrapper img {
    border-radius: 50%;
    max-width: 60px;
}

.single-comment .person-name h5 {
    font-size: 16px;
    font-weight: 600;
}

.single-comment .person-info .date {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin-top: 8px;
}

.single-comment .person-info .date small {
    font-size: 14px;
    color: #8b8b8b;
}

.single-comment .person-info .date a {
    font-size: 14px;
    font-weight: 600;
    font-style: italic;
    color: #38383c;
    margin-top: -5px;
    -webkit-transition: .5s;
    transition: .5s;
    text-decoration: none;
}

.single-comment .person-info .date a:hover {
    color: #25d06f;
}

.single-comment .person-info .comment {
    margin-top: 20px;
}

.single-comment .person-info .comment p {
    font-size: 14px;
    color: #666666;
    line-height: 28px;
}

.reply-form-section {
    margin-top: 67px;
}

.reply-form-section h3 {
    position: relative;
    margin-bottom: 52px;
    font-family: 'Source Serif Pro', serif;
    font-size: 24px;
    font-weight: 700;
    color: #38383c;
}

.reply-form-section h3::after {
    position: absolute;
    content: "";
    bottom: -12px;
    left: 0;
    height: 3px;
    width: 50px;
    background-color: #25d06f;
}

.reply-form-section .form-element {
    margin-bottom: 20px;
}

.reply-form-section .form-element.reduced-mb {
    margin-bottom: 17px;
}


/*---------------------------
** Cases page css
---------------------------*/

.cases.breadcrumb-area .breadcrumb-txt {
    padding: 258px 0px 109px 0px;
}

.cases ul.breadcumb {
    margin-top: 44px;
}

.single-case-bg-6 {
    background-image: url('../img/case/case-6.jpg');
    background-size: cover;
}

.case-lists .section-title {
    color: #6c7185;
}

.case-types {
    display: block;
    height: 100%;
    text-align: right;
    margin-bottom: 20px;
}

.case-types ul {
    width: 100%;
}

.case-types ul li {
    display: inline-block;
    margin-bottom: 10px;
}

.case-types ul li.active a {
    background-color: #25D06F;
    color: #fff;
}

.case-types ul li:last-child {
    margin-right: 0px;
}

.case-types ul li a {
    display: block;
    color: #666666;
    text-decoration: none;
    -webkit-transition: .5s;
    transition: .5s;
    background-color: transparent;
    border: 1px solid #25D06F;
    padding: 0px;
    cursor: pointer;
    transition: .5s;
    outline: 0;
    padding: 8px 10px;
    background-color: #fff;
    font-size: 14px;
    color: #25D06F;
    border-radius: 0px;
    transition: .5s;
}

.case-types ul li a:hover {
    background-color: #25D06F;
    color: #fff;
}

.case-types ul li a.active {
    color: #25d06f;
}

.case-types ul li:last-child {
    margin-right: 0px;
}

.case-lists {
    padding: 120px 0px 90px;
}

.case-lists .single-case {
    margin-bottom: 30px;
    width: 100%;
    background-size: cover;
}

.case-lists .gutter-sizer {
    width: 3%;
}

.case-lists .col-md-6:nth-last-child(1) .single-case {
    margin-bottom: 0px;
}

.case-lists .col-md-6:nth-last-child(2) .single-case {
    margin-bottom: 0px;
}

.case-lists .col-md-6:nth-last-child(3) .single-case {
    margin-bottom: 0px;
}

.case-lists .single-case {
    height: 280px;
}

.case-lists .single-case .inner-container {
    padding: 0px 45px;
}

.case-lists.case-page .single-case {
    width: 100%;
}


/*---------------------------
** Case details page css
---------------------------*/

.case-details .breadcrumb-txt span {
    margin-bottom: 7px;
}

.case-details ul.breadcumb {
    margin-top: 44px;
}

.case-details ul.breadcumb {
    display: block;
    margin-top: 34px;
}

.case-details.breadcrumb-area .breadcrumb-txt {
    padding: 260px 0px 110px 0px;
}

.case-details-section {
    padding: 120px 0px 118px;
}

.case-details-img {
    width: 100%;
}

.case-details-txt h2 {
    font-size: 35px;
    font-family: 'Source Serif Pro', serif;
    font-weight: 700;
    color: #38383c;
    margin: 22px 0px 14px;
}

.case-details-txt p {
    font-size: 14px;
    font-weight: 400;
    color: #5d5d61;
    line-height: 28px;
}

.case-details-section .case-details-points {
    margin-top: 34px;
}

.case-details-section .case-details-points h3 {
    font-size: 30px;
    font-family: 'Source Serif Pro', serif;
    font-weight: 700;
    color: #38383c;
}

.case-details-section .project-overview p {
    margin: 23px 0px;
}

.case-details-section .result p {
    margin: 16px 0px 23px;
}

.case-details-section .case-details-points p,
.case-details-section .case-details-points li {
    font-size: 14px;
    font-weight: 400;
    color: #5d5d61;
    line-height: 24px;
}

.case-details-section .case-details-points li {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-bottom: 13px;
    color: #38383c;
}

.case-details-section .case-details-points li:last-child {
    margin-bottom: 0px;
}

.case-details-section .case-details-points li i {
    margin-top: 5px;
    margin-right: 10px;
    color: #25d06f;
}

.project-infos {
    background-color: #f1f1f1;
    padding: 40px 25px 40px 30px;
    margin-bottom: 60px;
    font-size: 12px;
}

.project-infos h3 {
    font-size: 20px;
    font-weight: 700;
    text-transform: capitalize;
    margin-bottom: 27px;
    color: #283659;
    line-height: 30px;
}

.project-infos strong {
    text-transform: capitalize;
    color: #283659;
    font-weight: 600;
    font-size: 14px;
}

.project-infos span {
    display: inline-block;
    margin-right: 10px;
}

a.single-ss {
  cursor: zoom-in;
}

.single-ss img {
    width: 100%;
}

.project-ss-carousel {
    position: relative;
}

.owl-theme.common-carousel.project-ss-carousel .owl-nav {
  z-index: -1;
}

.owl-carousel.common-carousel.project-ss-carousel .owl-nav button.owl-prev {
    margin-left: -40px;
}

.owl-carousel.common-carousel.project-ss-carousel .owl-nav button.owl-next {
    margin-right: -40px;
}

.project-ss-carousel.owl-theme .owl-dots .owl-dot.active span {
    background: #25D06F;
}

.case-details img {
    width: 100%;
}


/*---------------------------
** Contact page css
---------------------------*/

.contact-bg {
    background-image: url('../img/contact_bg.jpg');
    background-size: cover;
}

.contact ul.breadcumb {
    display: block;
    margin-top: 35px;
}

.contact.breadcrumb-area .breadcrumb-txt {
    padding: 258px 0px 110px 0px;
}

.contact-form-section {
    padding: 120px 0px 120px;
}

.contact-form-section .section-title {
    color: #6c7185;
}

.contact-form-section .section-summary {
    padding-right: 80px;
}

.contact-form .form-element {
    margin-bottom: 20px;
}

.contact-form .form-element {
    margin-bottom: 20px;
}

.contact-form .form-element.reduced-mb {
    margin-bottom: 17px;
}

.contact-form textarea {
    height: 120px;
}

.map-wrapper {
    height: 100%;
    position: relative;
}

div#map {
    height: 100%;
}

.contact-infos {
    position: absolute;
    top: 30px;
    left: 30px;
    background-color: #fff;
    opacity: .95;
    padding: 40px 50px 38px;
    max-width: 360px;
}

.single-contact-info {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-bottom: 20px;
}

.single-contact-info:last-child {
    margin-bottom: 0px;
}

.single-contact-info i {
    margin-right: 20px;
    color: #25d06f;
    font-size: 20px
}

.single-contact-info p {
    font-size: 16px;
    color: #666666;
    line-height: 1.6;
    margin-top: -5px;
}

/*---------------------------
** Quote page css
---------------------------*/

.quote-area {
  padding: 120px 0px;
}

/*---------------------------
** FAQ page css
---------------------------*/

.faq-section {
  padding: 120px 0px 100px;
}

.faq-section .accordion .card {
    margin-bottom: 20px;
    border: none;
    border-radius: 0px;
}

.faq-section .card-header {
    padding: 0px;
}

.faq-section .accordion .card .card-header {
    background-color: #ededed;
    border: none;
}

.faq-section .accordion .card .card-header .btn {
    font-weight: 700;
    color: #0a3041;
    font-weight: 18px;
    border-radius: 3px;
    padding: 12px 30px 16px;
    text-decoration: none;
    position: relative;
    -webkit-transition: .5s;
    -o-transition: .5s;
    transition: .5s;
}

.faq-section .accordion .card .card-header .btn:hover {
    background-color: #25d06f;
    color: #fff;
}

.faq-section .accordion .card .card-header .btn[aria-expanded="true"] {
    background-color: #25d06f;
    color: #fff
}

.faq-section .accordion .card .card-header .btn::after {
    position: absolute;
    content: "\f067";
    font-family: "Font Awesome 5 Free";
    font-size: 11px;
    right: 30px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.faq-section .accordion .card .card-header .btn[aria-expanded="true"]::after {
    position: absolute;
    content: "\f068";
    font-family: "Font Awesome 5 Free";
    font-size: 11px;
    right: 30px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.faq-section .card-body {
    line-height: 28px;
    padding: 32px 20px 12px;
}

/*---------------------------
** Team Page CSS
---------------------------*/

.team-page .single-team-member {
    margin-bottom: 30px;
}

.team-page {
    padding: 120px 0px 90px;
}


/*---------------------------
** Career Page CSS
---------------------------*/

.category-lists.job li {
    border-bottom: 1px solid #ddd;
    padding-bottom: 14px;
    display: block;
}

.category-lists.job li a {
    display: block;
}

.category-lists.job li a span {
    display: inline-block;
    float: right;
}

.category-lists.job li:last-child {
    border-bottom: none;
    padding-bottom: 0px;
}

.job-lists {
    padding: 120px 0px;
}

.job-lists .single-job {
    border: 1px solid #f7f7f7;
    background-color: #f7f7f7;
    border-radius: 8px;
    padding: 30px;
    margin-bottom: 25px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    transition: .3s;
}

.job-lists .single-job:hover {
    box-shadow: 0 1px 9px rgba(0,0,0,0.12), 0 1px 8px rgba(0,0,0,0.24);
}

.single-job a.title {
    font-size: 20px;
    font-weight: 600;
    color: #25D06F;
    display: block;
    margin-bottom: 15px;
    line-height: 30px;
}

.single-job p {
    font-size: 14px;
    margin-bottom: 5px;
    line-height: 24px
}

.single-job strong {
    color: #0a3041;
    font-weight: 600;
}

.single-job strong i {
    color: #25D06F;
    display: inline-block;
    width: 20px;
}


/*---------------------------
** Career Details Page CSS
---------------------------*/

.job-details h3 {
    font-size: 24px;
    margin-bottom: 30px; 
    color: #25D06F;
    font-weight: 600;
}

.job-details .desc {
    font-size: 14px;
    line-height: 24px;
}

.job-details .info {
    margin-bottom: 30px;
}

.job-details .info:last-child {
    margin-bottom: 0px;
}

.info strong.label {
    color: #0a3041;
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
}



/*---------------------------
** Gallery Page CSS
---------------------------*/

.gallery-section {
    padding: 120px 0px;
}

.single-pic img {
    width: 100%;
    border-radius: 8px;
}

.gallery-section .single-pic {
    margin-bottom: 30px;
}

.single-pic {
    position: relative;
    border-radius: 8px;
}

.single-pic-overlay {
    position: absolute;
    top: 0px;
    left: 0px;
    border-radius: 8px;
    width: 100%;
    height: 100%;
    background-color: #000;
    visibility: hidden;
    opacity: 0;
    -webkit-transition: .5s;
    -o-transition: .5s;
    transition: .5s;
}

.single-pic:hover .single-pic-overlay {
    visibility: visible;
    opacity: .6;
}

.single-pic .outer,
.single-pic .inner {
    width: 100%;
}

.single-pic h2 {
    font-weight: 700;
    padding-bottom: 13px;
    position: relative;
    margin-bottom: 9px;
    font-size: 22px;
    opacity: 0;
    visibility: hidden;
    -webkit-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    transform: translateY(-20px);
    text-transform: uppercase;
    -webkit-transition: .5s;
    -o-transition: .5s;
    transition: .5s;
}

.single-pic:hover h2 {
    visibility: visible;
    opacity: 1;
    -webkit-transform: translateY(0px);
    -ms-transform: translateY(0px);
    transform: translateY(0px);
}

.single-pic h4::after {
    content: "";
    position: absolute;
    height: 3px;
    width: 100px;
    bottom: 0px;
    background-color: aqua;
    left: 50%;
    -webkit-transform: translateX(-50px);
    -ms-transform: translateX(-50px);
    transform: translateX(-50px);
}

.single-pic a.icon-wrapper {
    display: inline-block;
    color: #fff;
    font-size: 30px;
    opacity: 0;
    visibility: hidden;
    -webkit-transform: translateY(20px);
    -ms-transform: translateY(20px);
    transform: translateY(20px);
    -webkit-transition: .5s;
    -o-transition: .5s;
    transition: .5s;
}

.single-pic:hover a.icon-wrapper {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translateY(0px);
    -ms-transform: translateY(0px);
    transform: translateY(0px);
}

.single-pic .txt-icon {
    position: absolute;
    width: 100%;
    height: auto;
    top: 50%;
    left: 50%;
    text-align: center;
    color: #fff;
    transform: translate(-50%, -50%);
}

.gallery-section div[class*='col-']:nth-last-child(1) .single-pic,
.gallery-section div[class*='col-']:nth-last-child(2) .single-pic,
.gallery-section div[class*='col-']:nth-last-child(3) .single-pic {
    margin-bottom: 0px;
}

.gallery-section.masonry .single-pic {
    float: left;
    width: 33.33%;
    margin-bottom: 0px;
    border-radius: 0px;
}

.grid-sizer {
    width: 33.33%;
}

.gallery-section.masonry .single-pic img {
    border-radius: 0px;
    width: 100%;
}

.gallery-section.masonry .single-pic-overlay {
    border-radius: 0px;
}



/*---------------------------
** 404 Page CSS
---------------------------*/

.error-section {
    padding: 89px 0px 92px;
}

.oops {
    max-width: 100px;
    margin: 0 auto;
}

.oops img {
    width: 100%;
}

.not-found img {
    width: 100%;
}

.error-txt {
    text-align: center;
    margin-top: 30px;
}

.error-txt h2 {
    font-weight: 700;
    text-transform: uppercase;
    font-size: 32px;
    margin: 21px 0px 14px;
    color: #0a3041;
}

.error-txt p {
    font-size: 18px;
    line-height: 30px;
    text-transform: uppercase;
    font-weight: 700;
}

.error-txt a {
    display: inline-block;
    text-transform: uppercase;
    font-weight: 600;
    color: #fff;
    background-color: #000;
    padding: 14px 40px;
    border-radius: 50px;
    font-size: 16px;
    text-decoration: none;
    margin-top: 30px;
    background-color: #25D06F;
    border: 1px solid #25D06F;
    -webkit-transition: .5s;
    -o-transition: .5s;
    transition: .5s;
}

.error-txt a:hover {
    color: #25D06F;
    background-color: #fff;
}


/*---------------------------
** Package Order Page CSS
---------------------------*/

.package-order {
  background-color: #25D06F;
  border-color: #25D06F;
  color: #fff;
}

.package-order.single-pricing-table span.title {
  color: #fff;
}

.package-order.single-pricing-table .price {
  color: #fff;
}

.package-order.single-pricing-table .features * {
    color: #fff !important;
}


/*---------------------------
** Portfolio listing page
---------------------------*/

.pf-section {
    padding: 100px 0 90px;
    background-color: #f7f9fb;
}

.pf-tabs {
    display: flex;
    justify-content: center;
    margin-bottom: 55px;
}

.pf-tabs-track {
    position: relative;
    min-width: 0;
    max-width: 100%;
    padding: 6px;
    background-color: #fff;
    border: 1px solid #e6ebf1;
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(10, 48, 65, 0.04), 0 12px 32px -12px rgba(10, 48, 65, 0.16);
}

.pf-tabs-scroll {
    position: relative;
    overflow-x: auto;
    border-radius: 11px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.pf-tabs-scroll::-webkit-scrollbar {
    display: none;
}

.pf-tabs-list {
    display: flex;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pf-tabs-indicator,
.pf-tabs-hover {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    border-radius: 11px;
    pointer-events: none;
}

.pf-tabs-hover {
    background-color: #f1f5f9;
    opacity: 0;
}

.pf-tabs-hover.show {
    opacity: 1;
}

.pf-tabs.is-ready .pf-tabs-indicator,
.pf-tabs.is-ready .pf-tabs-hover {
    transition: transform .4s cubic-bezier(.65, 0, .35, 1), width .4s cubic-bezier(.65, 0, .35, 1), opacity .2s;
}

.pf-tab {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px 10px 18px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    color: #475569;
    white-space: nowrap;
    text-decoration: none;
    border-radius: 11px;
    transition: color .3s;
}

.pf-tab:hover,
.pf-tab:focus {
    color: #0a3041;
    text-decoration: none;
    outline: 0;
}

.pf-tab:focus-visible {
    box-shadow: inset 0 0 0 2px #cbd5e1;
}

.pf-tab.active,
.pf-tab.active:hover {
    color: #fff;
}

.pf-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 22px;
    padding: 0 7px;
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
    background-color: #f1f5f9;
    border-radius: 11px;
    transition: background-color .3s, color .3s;
}

.pf-tab:hover .pf-tab-count {
    background-color: #e2e8f0;
}

.pf-tab.active .pf-tab-count {
    color: #fff;
    background-color: rgba(0, 0, 0, 0.22); /* white-tinted was 3.9:1 */
}

/* second row under the main tabs, pulled into the main row's bottom margin */
.pf-subtabs {
    margin: -35px 0 40px;
}

.pf-subtabs-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    padding: 0;
    margin: 0;
    list-style: none;
}

.pf-subtab {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 6px 10px 6px 16px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    color: #475569;
    white-space: nowrap;
    text-decoration: none;
    background-color: #fff;
    border: 1px solid #e6ebf1;
    border-radius: 11px;
    transition: color .2s, border-color .2s, background-color .2s;
}

.pf-subtab:hover,
.pf-subtab:focus {
    color: #0a3041;
    text-decoration: none;
    border-color: #cbd5e1;
}

.pf-subtab:focus-visible {
    outline: 2px solid #94a3b8;
    outline-offset: 2px;
}

.pf-subtab.active,
.pf-subtab.active:hover {
    color: #fff;
    background-color: var(--pfh-accent);
    border-color: var(--pfh-accent);
}

.pf-subtab.active .pf-tab-count {
    color: #fff;
    background-color: rgba(0, 0, 0, 0.22);
}

.pf-tabs-arrow {
    position: absolute;
    top: 6px;
    bottom: 6px;
    z-index: 2;
    display: flex;
    align-items: center;
    width: 64px;
    padding: 0;
    font-size: 12px;
    color: #0a3041;
    cursor: pointer;
    border: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s;
}

.pf-tabs-arrow:focus {
    outline: 0;
}

.pf-tabs-prev {
    left: 6px;
    justify-content: flex-start;
    background: linear-gradient(90deg, #fff 50%, rgba(255, 255, 255, 0));
    border-radius: 11px 0 0 11px;
}

.pf-tabs-next {
    right: 6px;
    justify-content: flex-end;
    background: linear-gradient(270deg, #fff 50%, rgba(255, 255, 255, 0));
    border-radius: 0 11px 11px 0;
}

.pf-tabs.can-prev .pf-tabs-prev,
.pf-tabs.can-next .pf-tabs-next {
    opacity: 1;
    pointer-events: auto;
}

.pf-tabs-arrow i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background-color: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 50%;
    box-shadow: 0 4px 10px rgba(10, 48, 65, 0.1);
    transition: color .25s, border-color .25s;
}

.pf-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-bottom: 30px;
    padding: 10px;
    background-color: #fff;
    border: 1px solid #edf1f5;
    border-radius: 20px;
    box-shadow: 0 1px 2px rgba(10, 48, 65, 0.04), 0 8px 24px -12px rgba(10, 48, 65, 0.12);
    transition: transform .4s cubic-bezier(.2, .8, .2, 1), box-shadow .4s ease, border-color .4s ease;
}

.pf-card:hover {
    transform: translateY(-8px);
    border-color: #e2e8f0;
    box-shadow: 0 2px 4px rgba(10, 48, 65, 0.04), 0 28px 50px -20px rgba(10, 48, 65, 0.28);
}

/* fixed 16:11 frame (padding-top fallback for browsers without aspect-ratio);
   the image is pinned inside it so any upload size fills the frame exactly */
.pf-card-media {
    position: relative;
    display: block;
    flex: 0 0 auto;
    height: 0;
    padding-top: 68.75%;
    overflow: hidden;
    background-color: #e9eef3;
    border-radius: 14px;
    -webkit-mask-image: -webkit-radial-gradient(#fff, #000);
}

/* selector outranks the global img[width][height] { height: auto } rule */
.pf-card .pf-card-media img[src] {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    max-width: none;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform .8s cubic-bezier(.2, .8, .2, 1);
}

.pf-card-media::after {
    position: absolute;
    inset: 0;
    content: "";
    background: linear-gradient(180deg, rgba(10, 48, 65, 0.05) 0%, rgba(10, 48, 65, 0.55) 100%);
    opacity: 0;
    transition: opacity .4s ease;
}

.pf-card:hover .pf-card-media img {
    transform: scale(1.08);
}

.pf-card:hover .pf-card-media::after {
    opacity: 1;
}

.pf-card-view {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    font-size: 18px;
    color: #0a3041;
    background-color: rgba(255, 255, 255, 0.95);
    border-radius: 50%;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    opacity: 0;
    transform: translate(-50%, -50%) scale(.6);
    transition: opacity .35s ease, transform .45s cubic-bezier(.2, .8, .2, 1);
}

.pf-card-view i,
.pf-card-btn i {
    transform: rotate(-45deg);
}

.pf-card:hover .pf-card-view {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.pf-card-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    padding: 22px 14px 8px;
}

.pf-card-cat {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 7px;
    margin-bottom: 12px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: .6px;
    text-transform: uppercase;
}

.pf-card-cat::before {
    width: 6px;
    height: 6px;
    content: "";
    background-color: currentColor;
    border-radius: 50%;
}

.pf-card-title {
    display: -webkit-box;
    margin-bottom: 10px;
    overflow: hidden;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: -.2px;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.pf-card-title a {
    color: #0a3041;
    text-decoration: none;
    transition: color .3s;
}

.pf-card-title a:hover {
    text-decoration: none;
}

.pf-card-excerpt {
    display: -webkit-box;
    margin-bottom: 20px;
    overflow: hidden;
    font-size: 14px;
    line-height: 1.7;
    color: #64748b;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.pf-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px dashed #e2e8f0;
}

.pf-card-client {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.pf-card-avatar {
    display: flex;
    flex: 0 0 38px;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    font-size: 15px;
    font-weight: 600;
    color: #0a3041;
    background-color: #f1f5f9;
    border-radius: 50%;
}

.pf-card-client-txt {
    display: block;
    min-width: 0;
    overflow: hidden;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    color: #0a3041;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.pf-card-client-txt small {
    display: block;
    font-size: 11px;
    font-weight: 500;
    color: #64748b; /* was #94a3b8, 2.56:1 */
    letter-spacing: .4px;
    text-transform: uppercase;
}

.pf-card-more {
    font-size: 14px;
    font-weight: 600;
    color: #0a3041;
}

.pf-card-btn {
    display: flex;
    flex: 0 0 44px;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    font-size: 15px;
    color: #0a3041;
    text-decoration: none;
    background-color: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 50%;
    transition: background-color .3s, border-color .3s, color .3s, transform .3s;
}

.pf-card-btn:hover,
.pf-card:hover .pf-card-btn {
    color: #fff;
    text-decoration: none;
}

.pf-card-btn i {
    transition: transform .35s cubic-bezier(.2, .8, .2, 1);
}

.pf-card:hover .pf-card-btn i {
    transform: rotate(0deg);
}

.pf-empty {
    padding: 70px 20px;
    text-align: center;
    background-color: #fff;
    border: 1px dashed #d8dfe7;
    border-radius: 20px;
}

.pf-empty i {
    display: block;
    margin-bottom: 15px;
    font-size: 42px;
    color: #c3ccd6;
}

.pf-empty h3 {
    margin: 0;
    font-size: 20px;
    color: #5a6475;
}

.pf-pagination {
    margin-top: 20px;
}

.pf-results {
    transition: opacity .2s ease;
}

.pf-results.is-loading {
    opacity: .45;
    pointer-events: none;
}

@media only screen and (max-width: 991px) {
    .pf-section {
        padding: 80px 0 70px;
    }
    .pf-tabs {
        margin-bottom: 40px;
    }
    .pf-subtabs {
        margin: -24px 0 32px;
    }
}

@media only screen and (max-width: 767px) {
    .pf-section {
        padding: 60px 0 50px;
    }
    .pf-tabs {
        margin-bottom: 30px;
    }
    .pf-subtabs {
        margin: -18px 0 24px;
    }
    .pf-tabs-track {
        padding: 5px;
        border-radius: 14px;
    }
    .pf-tab {
        padding: 9px 12px 9px 15px;
        font-size: 13px;
    }
    .pf-tabs-arrow {
        top: 5px;
        bottom: 5px;
        width: 52px;
    }
    .pf-tabs-prev {
        left: 5px;
    }
    .pf-tabs-next {
        right: 5px;
    }
    .pf-card {
        border-radius: 18px;
    }
    .pf-card-body {
        padding: 18px 10px 6px;
    }
    .pf-card-title {
        font-size: 18px;
    }
    .pf-card-view {
        display: none;
    }
}


/*---------------------------
** Portfolio details page
---------------------------*/

.pfd-section {
    padding: 90px 0 70px;
    background-color: #f7f9fb;
}

.pfd-gallery {
    position: relative;
    overflow: hidden;
    background-color: #e9eef3;
    border-radius: 22px;
    box-shadow: 0 24px 60px -28px rgba(10, 48, 65, 0.35);
}

/* fixed frame so slides of any size line up */
.pfd-slide {
    position: relative;
    display: block;
    height: 0;
    padding-top: 55.4%;
    overflow: hidden;
    cursor: zoom-in;
}

.pfd-gallery .pfd-slide img[src] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    max-width: none;
    height: 100%;
    object-fit: contain;
}

.pfd-zoom {
    position: absolute;
    top: 20px;
    right: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    font-size: 16px;
    color: #0a3041;
    background-color: rgba(255, 255, 255, 0.92);
    border-radius: 50%;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
    opacity: 0;
    transform: scale(.8);
    transition: opacity .3s, transform .3s;
}

.pfd-slide:hover .pfd-zoom {
    opacity: 1;
    transform: scale(1);
}

.pfd-gallery .owl-nav {
    position: absolute;
    right: 20px;
    bottom: 20px;
    display: flex;
    gap: 10px;
    margin: 0;
}

.pfd-gallery .owl-nav.disabled {
    display: none;
}

.pfd-gallery .owl-carousel .owl-nav button.owl-prev,
.pfd-gallery .owl-carousel .owl-nav button.owl-next {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin: 0;
    font-size: 15px;
    color: #0a3041;
    background-color: rgba(255, 255, 255, 0.95);
    border-radius: 50%;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
    transition: background-color .3s, color .3s, transform .3s;
}

.pfd-gallery .owl-carousel .owl-nav button.owl-prev:hover,
.pfd-gallery .owl-carousel .owl-nav button.owl-next:hover {
    color: #fff;
    transform: translateY(-2px);
}

.pfd-gallery .owl-carousel .owl-nav button:focus {
    outline: 0;
}

.pfd-counter {
    position: absolute;
    bottom: 20px;
    left: 20px;
    z-index: 2;
    padding: 7px 16px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1px;
    color: #fff;
    background-color: rgba(10, 48, 65, 0.6);
    border-radius: 50px;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.pfd-thumbs {
    display: flex;
    gap: 12px;
    margin-top: 16px;
    overflow-x: auto;
    scrollbar-width: none;
}

.pfd-thumbs::-webkit-scrollbar {
    display: none;
}

.pfd-thumb {
    flex: 0 0 120px;
    height: 72px;
    padding: 0;
    overflow: hidden;
    cursor: pointer;
    background: #e9eef3;
    border: 2px solid transparent;
    border-radius: 12px;
    opacity: .55;
    transition: opacity .3s, border-color .3s;
}

.pfd-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pfd-thumb:hover,
.pfd-thumb.active {
    opacity: 1;
}

.pfd-thumb:focus {
    outline: 0;
}

.pfd-section > .container > .row {
    margin-top: 40px;
}

.pfd-main,
.pfd-info {
    padding: 40px;
    background-color: #fff;
    border: 1px solid #edf1f5;
    border-radius: 20px;
    box-shadow: 0 8px 24px -12px rgba(10, 48, 65, 0.1);
}

.pfd-header {
    padding-bottom: 26px;
    margin-bottom: 30px;
    border-bottom: 1px solid #edf1f5;
}

.pfd-title {
    margin-bottom: 0;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -.4px;
    color: #0a3041;
}

.pfd-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
}

.pfd-tags li {
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 500;
    color: #64748b;
    background-color: #f1f5f9;
    border-radius: 6px;
}

.pfd-section-title {
    position: relative;
    margin-bottom: 20px;
    padding-left: 16px;
    font-size: 20px;
    font-weight: 600;
    color: #0a3041;
}

.pfd-section-title::before {
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 0;
    width: 4px;
    content: "";
    border-radius: 4px;
}

/* normalise content pasted from editors (inline fonts, sizes, colours) */
.pfd-content,
.pfd-content p,
.pfd-content li,
.pfd-content span,
.pfd-content font {
    font-family: Poppins, 'Poppins Fallback', sans-serif !important;
    font-size: 15px !important;
    line-height: 1.85 !important;
    color: #475569 !important;
}

.pfd-content [style],
.pfd-content [class*="page_speed_"] {
    background: none !important;
    margin-left: 0 !important;
}

.pfd-content p {
    margin: 0 0 18px !important;
}

.pfd-content b,
.pfd-content strong,
.pfd-content b *,
.pfd-content strong * {
    font-weight: 600;
    color: #0a3041 !important;
}

.pfd-content h1,
.pfd-content h2,
.pfd-content h3,
.pfd-content h4,
.pfd-content h5 {
    margin: 30px 0 14px;
    font-family: Poppins, 'Poppins Fallback', sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: #0a3041;
}

.pfd-content ul {
    margin: 0 0 22px;
    padding: 0;
    list-style: none;
}

.pfd-content ul li {
    position: relative;
    margin-bottom: 10px;
    padding-left: 30px;
}

.pfd-content ul li::before {
    position: absolute;
    top: 5px;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    font-family: "Font Awesome 5 Free";
    font-size: 10px;
    font-weight: 900;
    line-height: 1;
    content: "\f00c";
    border-radius: 50%;
}

.pfd-content ol {
    margin: 0 0 22px;
    padding-left: 20px;
}

.pfd-content img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
}

.pfd-content a {
    text-decoration: underline;
}

.pfd-share {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: 30px;
    padding-top: 26px;
    border-top: 1px dashed #e2e8f0;
}

.pfd-share-label {
    font-size: 14px;
    font-weight: 600;
    color: #0a3041;
}

.pfd-share-label i {
    margin-right: 6px;
}

.pfd-share-links {
    display: flex;
    gap: 10px;
}

.pfd-share-links a,
.pfd-copy {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    font-size: 14px;
    color: #475569;
    text-decoration: none;
    cursor: pointer;
    background-color: #f1f5f9;
    border: 0;
    border-radius: 50%;
    transition: background-color .3s, color .3s, transform .3s;
}

.pfd-share-links a:hover,
.pfd-copy:hover {
    color: #fff;
    text-decoration: none;
    transform: translateY(-2px);
}

.pfd-copy:focus {
    outline: 0;
}

.pfd-copy-tip {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    padding: 4px 10px;
    font-size: 12px;
    white-space: nowrap;
    color: #fff;
    background-color: #0a3041;
    border-radius: 6px;
    opacity: 0;
    transform: translateX(-50%) translateY(4px);
    transition: opacity .25s, transform .25s;
    pointer-events: none;
}

.pfd-copy.copied .pfd-copy-tip {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.pfd-pager {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 30px;
}

.pfd-pager-link {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
    padding: 20px 22px;
    text-decoration: none;
    background-color: #fff;
    border: 1px solid #edf1f5;
    border-radius: 16px;
    transition: border-color .3s, box-shadow .3s, transform .3s;
}

.pfd-pager-link.next {
    justify-content: flex-end;
    text-align: right;
}

.pfd-pager-link:hover {
    text-decoration: none;
    transform: translateY(-3px);
    box-shadow: 0 14px 30px -16px rgba(10, 48, 65, 0.25);
}

.pfd-pager-icon {
    display: flex;
    flex: 0 0 44px;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    font-size: 14px;
    color: #0a3041;
    background-color: #f1f5f9;
    border-radius: 50%;
    transition: background-color .3s, color .3s;
}

.pfd-pager-link:hover .pfd-pager-icon {
    color: #fff;
}

.pfd-pager-txt {
    min-width: 0;
    overflow: hidden;
    font-size: 15px;
    font-weight: 600;
    color: #0a3041;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.pfd-pager-txt small {
    display: block;
    margin-bottom: 2px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .4px;
    color: #64748b; /* was #94a3b8, 2.56:1 */
    text-transform: uppercase;
}

.pfd-sidebar {
    position: -webkit-sticky;
    position: sticky;
    top: 110px;
}

.pfd-info {
    padding: 32px;
}

.pfd-info-title {
    margin-bottom: 8px;
    font-size: 19px;
    font-weight: 600;
    color: #0a3041;
}

.pfd-info-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.pfd-info-list li {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 0;
    border-bottom: 1px solid #f1f5f9;
}

.pfd-info-list li:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.pfd-info-icon {
    display: flex;
    flex: 0 0 44px;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    font-size: 16px;
    border-radius: 12px;
}

.pfd-info-txt {
    min-width: 0;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    color: #0a3041;
}

.pfd-info-txt small {
    display: block;
    margin-bottom: 3px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .4px;
    color: #94a3b8;
    text-transform: uppercase;
}

.pfd-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 12px;
    font-size: 13px;
    border-radius: 50px;
}

.pfd-status::before {
    width: 7px;
    height: 7px;
    content: "";
    background-color: currentColor;
    border-radius: 50%;
}

.pfd-status.done {
    color: #15803d;
    background-color: #dcfce7;
}

.pfd-status.progress {
    color: #b45309;
    background-color: #fef3c7;
}

.pfd-cta {
    position: relative;
    margin-top: 24px;
    padding: 34px 32px;
    overflow: hidden;
    color: #fff;
    background: linear-gradient(135deg, #0a3041 0%, #134a5f 100%);
    border-radius: 20px;
}

.pfd-cta::after {
    position: absolute;
    top: -60px;
    right: -60px;
    width: 180px;
    height: 180px;
    content: "";
    background-color: rgba(255, 255, 255, 0.06);
    border-radius: 50%;
}

.pfd-cta-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-bottom: 18px;
    font-size: 20px;
    color: #fff;
    border-radius: 14px;
}

.pfd-cta h3 {
    margin-bottom: 10px;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.4;
    color: #fff;
}

.pfd-cta p {
    margin-bottom: 22px;
    font-size: 14px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.75);
}

.pfd-cta-btn {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 24px;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    text-decoration: none;
    border-radius: 10px;
    transition: transform .3s, box-shadow .3s;
}

.pfd-cta-btn:hover {
    color: #fff;
    text-decoration: none;
    transform: translateY(-2px);
}

.pfd-related {
    margin-top: 70px;
}

.pfd-related-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 30px;
}

.pfd-related-all {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}

.pfd-related-all:hover {
    text-decoration: none;
}

@media only screen and (max-width: 991px) {
    .pfd-section {
        padding: 70px 0 50px;
    }
    .pfd-sidebar {
        position: static;
        margin-top: 30px;
    }
}

@media only screen and (max-width: 767px) {
    .pfd-section {
        padding: 50px 0 40px;
    }
    .pfd-gallery {
        border-radius: 16px;
    }
    .pfd-gallery .owl-nav {
        right: 12px;
        bottom: 12px;
    }
    .pfd-gallery .owl-carousel .owl-nav button.owl-prev,
    .pfd-gallery .owl-carousel .owl-nav button.owl-next {
        width: 38px;
        height: 38px;
        font-size: 13px;
    }
    .pfd-counter {
        bottom: 14px;
        left: 12px;
        padding: 5px 12px;
        font-size: 12px;
    }
    .pfd-zoom {
        display: none;
    }
    .pfd-thumb {
        flex-basis: 90px;
        height: 56px;
    }
    .pfd-section > .container > .row {
        margin-top: 26px;
    }
    .pfd-main,
    .pfd-info {
        padding: 24px 20px;
        border-radius: 16px;
    }
    .pfd-title {
        font-size: 24px;
    }
    .pfd-pager {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .pfd-cta {
        padding: 28px 22px;
    }
    .pfd-related {
        margin-top: 50px;
    }
}


/*---------------------------
** About page
---------------------------*/

.ab-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.ab-eyebrow::before {
    width: 28px;
    height: 2px;
    content: "";
    background-color: currentColor;
}

.ab-heading {
    margin-bottom: 0;
    font-size: 38px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -.5px;
    color: #0a3041;
}

.ab-section {
    padding: 110px 0;
}

.ab-section-head {
    max-width: 640px;
    margin: 0 auto 56px;
    text-align: center;
}

.ab-section-head .ab-eyebrow::after {
    width: 28px;
    height: 2px;
    content: "";
    background-color: currentColor;
}

.ab-section-head-split {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    max-width: none;
    text-align: left;
}

.ab-section-head-split .ab-eyebrow::after {
    display: none;
}

.ab-section-head-split .ab-heading {
    max-width: 560px;
}

.ab-link {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
}

.ab-link:hover {
    text-decoration: none;
}

.ab-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 30px;
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    text-decoration: none;
    border: 2px solid transparent;
    border-radius: 10px;
    transition: transform .3s, box-shadow .3s, background-color .3s, color .3s;
}

.ab-btn:hover {
    color: #fff;
    text-decoration: none;
    transform: translateY(-2px);
}

.ab-btn-ghost {
    color: #0a3041;
    background-color: transparent !important;
    border-color: #d5dde6;
}

.ab-btn-ghost:hover {
    color: #0a3041;
    border-color: #0a3041;
    box-shadow: none !important;
}

/* intro */
.ab-intro {
    padding: 120px 0 100px;
    overflow: hidden;
}

.ab-media {
    position: relative;
    padding: 0 70px 70px 0;
}

.ab-media-main {
    overflow: hidden;
    border-radius: 24px;
    box-shadow: 0 30px 60px -30px rgba(10, 48, 65, 0.45);
}

.ab-media img {
    display: block;
    width: 100%;
    height: auto;
}

.ab-media-small {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 52%;
    overflow: hidden;
    border: 8px solid #fff;
    border-radius: 20px;
    box-shadow: 0 24px 50px -20px rgba(10, 48, 65, 0.4);
}

.ab-media-badge {
    position: absolute;
    top: 40px;
    left: -24px;
    display: flex;
    flex-direction: column;
    padding: 20px 26px;
    color: #fff;
    border-radius: 16px;
    box-shadow: 0 20px 40px -16px rgba(10, 48, 65, 0.5);
}

.ab-media-badge strong {
    font-size: 34px;
    font-weight: 700;
    line-height: 1.1;
}

.ab-media-badge span {
    margin-top: 4px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    opacity: .9;
}

.ab-intro-txt {
    padding-left: 40px;
}

.ab-intro-txt .ab-heading {
    margin-bottom: 22px;
}

.ab-lead {
    margin-bottom: 18px;
    font-size: 16px;
    line-height: 1.85;
    color: #5a6475;
}

.ab-checks {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 14px;
    margin: 28px 0 36px;
    padding: 0;
    list-style: none;
}

.ab-checks li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 600;
    color: #0a3041;
}

.ab-checks i {
    display: flex;
    flex: 0 0 24px;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    font-size: 11px;
    color: #fff;
    border-radius: 50%;
}

.ab-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

/* stats */
.ab-stats {
    position: relative;
    z-index: 1;
}

.ab-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    overflow: hidden;
    background: linear-gradient(135deg, #0a3041 0%, #134a5f 100%);
    border-radius: 24px;
    box-shadow: 0 30px 60px -30px rgba(10, 48, 65, 0.6);
}

.ab-stat {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 40px 32px;
    color: #fff;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.ab-stat:last-child {
    border-right: 0;
}

.ab-stat-icon {
    display: flex;
    flex: 0 0 60px;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    font-size: 24px;
    color: #fff;
    background-color: rgba(255, 255, 255, 0.12);
    border-radius: 16px;
}

.ab-stat strong {
    display: block;
    font-size: 34px;
    font-weight: 700;
    line-height: 1.1;
}

.ab-stat div > span {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
}

/* mission / vision */
.ab-pillars {
    background-color: #f7f9fb;
    margin-top: -70px;
    padding-top: 180px;
}

.ab-pillar {
    position: relative;
    width: 100%;
    margin-bottom: 30px;
    padding: 44px 40px;
    overflow: hidden;
    background-color: #fff;
    border: 1px solid #edf1f5;
    border-radius: 22px;
    box-shadow: 0 8px 24px -12px rgba(10, 48, 65, 0.1);
    transition: transform .4s, box-shadow .4s;
}

.ab-pillar:hover {
    transform: translateY(-6px);
    box-shadow: 0 28px 50px -24px rgba(10, 48, 65, 0.25);
}

.ab-pillar::after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 4px;
    content: "";
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .4s;
}

.ab-pillar:hover::after {
    transform: scaleX(1);
}

.ab-pillar-no {
    position: absolute;
    top: 24px;
    right: 32px;
    font-size: 64px;
    font-weight: 800;
    line-height: 1;
    color: #f1f5f9;
}

.ab-pillar-icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 68px;
    height: 68px;
    margin-bottom: 26px;
    font-size: 28px;
    border-radius: 18px;
}

.ab-pillar h3 {
    position: relative;
    margin-bottom: 14px;
    font-size: 24px;
    font-weight: 600;
    color: #0a3041;
}

.ab-pillar p {
    position: relative;
    margin-bottom: 0;
    font-size: 15px;
    line-height: 1.85;
    color: #5a6475;
}

.ab-pillar p + p {
    margin-top: 12px;
}

/* process */
.ab-step {
    position: relative;
    width: 100%;
    margin-bottom: 30px;
    padding: 36px 32px;
    background-color: #fff;
    border: 1px solid #e8edf2;
    border-radius: 20px;
    transition: border-color .3s, box-shadow .3s, transform .3s;
}

.ab-step:hover {
    transform: translateY(-4px);
    box-shadow: 0 24px 44px -24px rgba(10, 48, 65, 0.25);
}

.ab-step-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
}

.ab-step-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    font-size: 22px;
    color: #fff;
    border-radius: 50%;
}

.ab-step-no {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1px;
    color: #94a3b8;
    text-transform: uppercase;
}

.ab-step h3 {
    margin-bottom: 10px;
    font-size: 21px;
    font-weight: 600;
    color: #0a3041;
}

.ab-step p {
    margin-bottom: 0;
    font-size: 15px;
    line-height: 1.8;
    color: #5a6475;
}

/* team */
.ab-team {
    background-color: #f7f9fb;
}

.ab-member {
    margin-bottom: 30px;
    text-align: center;
}

.ab-member-img {
    position: relative;
    height: 0;
    margin-bottom: 20px;
    padding-top: 112%;
    overflow: hidden;
    background-color: #e9eef3;
    border-radius: 20px;
}

.ab-member .ab-member-img img[src] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    max-width: none;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    transition: transform .6s;
}

.ab-member:hover .ab-member-img img {
    transform: scale(1.06);
}

.ab-member-social {
    position: absolute;
    right: 0;
    bottom: 18px;
    left: 0;
    display: flex;
    justify-content: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .35s, transform .35s;
}

.ab-member:hover .ab-member-social,
.ab-member:focus-within .ab-member-social {
    opacity: 1;
    transform: translateY(0);
}

.ab-member-social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    font-size: 14px;
    color: #0a3041;
    background-color: #fff;
    border-radius: 50%;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.15);
    transition: background-color .3s, color .3s;
}

.ab-member-social a:hover {
    color: #fff;
}

.ab-member h3 {
    margin-bottom: 4px;
    font-size: 19px;
    font-weight: 600;
    color: #0a3041;
}

.ab-member > span {
    font-size: 14px;
    color: #64748b;
}

/* testimonials */
.ab-quote {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 0 0 30px;
    padding: 38px 34px 32px;
    background-color: #fff;
    border: 1px solid #edf1f5;
    border-radius: 22px;
    box-shadow: 0 8px 24px -12px rgba(10, 48, 65, 0.1);
}

.ab-quote-mark {
    position: absolute;
    top: 30px;
    right: 32px;
    font-size: 40px;
    line-height: 1;
    opacity: .15;
}

.ab-stars {
    margin-bottom: 16px;
    font-size: 13px;
    color: #f5b301;
    letter-spacing: 2px;
}

.ab-quote blockquote {
    flex: 1 1 auto;
    margin: 0 0 26px;
    font-size: 15px;
    font-style: italic;
    line-height: 1.85;
    color: #475569;
}

.ab-quote figcaption {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-top: 22px;
    border-top: 1px dashed #e2e8f0;
}

.ab-quote figcaption img {
    width: 52px;
    height: 52px;
    object-fit: cover;
    border-radius: 50%;
}

.ab-quote figcaption span {
    font-size: 13px;
    color: #64748b;
}

.ab-quote figcaption strong {
    display: block;
    font-size: 16px;
    font-weight: 600;
    color: #0a3041;
}

/* partners */
.ab-partners {
    padding: 70px 0;
    border-top: 1px solid #edf1f5;
}

.ab-partners-title {
    margin-bottom: 34px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1.5px;
    color: #94a3b8;
    text-align: center;
    text-transform: uppercase;
}

.ab-partners-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    align-items: center;
}

.ab-partner {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 90px;
    padding: 18px;
    background-color: #fff;
    border: 1px solid #edf1f5;
    border-radius: 14px;
    transition: box-shadow .3s, transform .3s;
}

.ab-partner:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 28px -16px rgba(10, 48, 65, 0.25);
}

.ab-partner img {
    max-width: 100%;
    max-height: 50px;
    width: auto;
    filter: grayscale(1);
    opacity: .65;
    transition: filter .3s, opacity .3s;
}

.ab-partner:hover img {
    filter: none;
    opacity: 1;
}

/* cta */
.ab-cta-wrap {
    padding: 0 0 110px;
}

.ab-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    padding: 60px 64px;
    background-position: center;
    background-size: cover;
    border-radius: 26px;
}

.ab-cta h2 {
    margin-bottom: 10px;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.3;
    color: #fff;
}

.ab-cta p {
    margin-bottom: 0;
    font-size: 16px;
    color: rgba(255, 255, 255, 0.75);
}

/* plain custom pages (terms, privacy ...) */
.pg-section {
    padding: 100px 0;
    background-color: #f7f9fb;
}

.pg-card {
    padding: 56px 60px;
    background-color: #fff;
    border: 1px solid #edf1f5;
    border-radius: 22px;
    box-shadow: 0 8px 24px -12px rgba(10, 48, 65, 0.1);
}

.pg-content p:empty,
.pg-content > br {
    display: none;
}

/* legal pages are often pasted wrapped in one big <b>; keep body text regular */
.pg-content b,
.pg-content strong,
.pg-content b *,
.pg-content strong * {
    font-weight: 400;
    color: #475569 !important;
}

@media only screen and (max-width: 1199px) {
    .ab-stat {
        padding: 32px 22px;
    }
    .ab-stat strong {
        font-size: 28px;
    }
}

@media only screen and (max-width: 991px) {
    .ab-heading {
        font-size: 32px;
    }
    .ab-section {
        padding: 80px 0;
    }
    .ab-intro {
        padding: 90px 0 70px;
    }
    .ab-media {
        max-width: 560px;
        margin: 0 auto 60px;
    }
    .ab-media-badge {
        left: 0;
    }
    .ab-intro-txt {
        padding-left: 0;
    }
    .ab-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .ab-stat:nth-child(2) {
        border-right: 0;
    }
    .ab-stat:nth-child(-n+2) {
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
    .ab-pillars {
        padding-top: 150px;
    }
    .ab-cta {
        padding: 48px 40px;
    }
    .pg-section {
        padding: 70px 0;
    }
    .pg-card {
        padding: 40px 36px;
    }
}

@media only screen and (max-width: 767px) {
    .ab-heading {
        font-size: 26px;
    }
    .ab-section {
        padding: 64px 0;
    }
    .ab-section-head {
        margin-bottom: 36px;
    }
    .ab-section-head-split {
        flex-direction: column;
        align-items: flex-start;
    }
    .ab-intro {
        padding: 60px 0 50px;
    }
    .ab-media {
        padding: 0 34px 44px 0;
        margin-bottom: 44px;
    }
    .ab-media-small {
        border-width: 5px;
    }
    .ab-media-badge {
        top: 20px;
        padding: 14px 18px;
    }
    .ab-media-badge strong {
        font-size: 24px;
    }
    .ab-stats-grid {
        border-radius: 18px;
    }
    .ab-stat {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        padding: 24px 18px;
    }
    .ab-stat-icon {
        flex-basis: auto;
        width: 46px;
        height: 46px;
        font-size: 18px;
    }
    .ab-stat strong {
        font-size: 24px;
    }
    .ab-stat div > span {
        font-size: 10px;
    }
    .ab-pillars {
        padding-top: 120px;
    }
    .ab-pillar {
        padding: 32px 26px;
    }
    .ab-member-social {
        opacity: 1;
        transform: none;
    }
    .ab-partners-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    .ab-cta {
        padding: 36px 26px;
        border-radius: 20px;
    }
    .ab-cta h2 {
        font-size: 24px;
    }
    .ab-cta-wrap {
        padding-bottom: 70px;
    }
    .pg-section {
        padding: 50px 0;
    }
    .pg-card {
        padding: 28px 22px;
        border-radius: 16px;
    }
}


/*---------------------------
** Home: Latest News cards (nw-card)
---------------------------*/
.blog-section .blog-carousel .owl-stage {
    display: flex;
}

.blog-section .blog-carousel .owl-item {
    display: flex;
    padding: 16px 10px 64px;
}

/* room for the card shadow, which owl's overflow would otherwise cut straight */
.blog-section .blog-carousel .owl-stage-outer {
    padding: 20px 15px 0;
    margin: -20px -15px 0;
}

/* off-screen neighbours' shadows reach into the gutter, so fade it out */
@media only screen and (min-width: 768px) {
    .blog-section .blog-carousel .owl-stage-outer {
        padding: 20px 30px 0;
        margin: -20px -30px 0;
        -webkit-mask-image: linear-gradient(90deg, transparent, #000 30px, #000 calc(100% - 30px), transparent);
        mask-image: linear-gradient(90deg, transparent, #000 30px, #000 calc(100% - 30px), transparent);
    }
}

/* nav strip spans the cards: let clicks through, keep the buttons live */
.blog-section .blog-carousel .owl-nav {
    pointer-events: none;
}

.blog-section .blog-carousel .owl-nav button {
    pointer-events: auto;
}

.nw-card {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    overflow: hidden;
    text-align: left;
    background-color: #fff;
    border-radius: 16px;
    box-shadow: 0 12px 40px rgba(16, 38, 58, 0.07);
    /* own layer: stops the image bleeding through at fractional card edges */
    will-change: transform;
    transition: transform .3s ease-out, box-shadow .3s ease-out;
}

.nw-card:hover {
    transform: translateY(-6px);
}

.nw-card-top {
    position: relative;
    flex: 0 0 auto;
}

/* fixed frame so every upload size fills it */
.nw-card-media {
    position: relative;
    height: 0;
    padding-top: 70%;
    overflow: hidden;
    background-color: #eef2f6;
}

.nw-card .nw-card-media img[src] {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    max-width: none;
    height: 100%;
    object-fit: cover;
    transition: transform .7s ease-out;
}

.nw-card:hover .nw-card-media img {
    transform: scale(1.05);
}

/* overshoots the frame so no image sliver shows at the antialiased edges */
.nw-card-wave {
    position: absolute;
    top: 0;
    left: -2px;
    z-index: 1;
    display: block;
    width: calc(100% + 4px);
    height: calc(100% + 2px);
    pointer-events: none;
    fill: #fff;
}

.nw-card-badge {
    position: absolute;
    right: 40px;
    bottom: -14px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    font-size: 26px;
    pointer-events: none;
    background-color: #fff;
    border-radius: 15px;
    box-shadow: 0 16px 36px rgba(16, 38, 58, 0.16);
}

.nw-card-body {
    position: relative;
    z-index: 1;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    padding: 8px 24px 28px;
    margin-top: -1px;
    background-color: #fff;
}

.nw-card-date {
    display: block;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
}

.nw-card-title {
    display: -webkit-box;
    min-height: 2.8em;
    margin: 20px 0 8px;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.nw-card-title a {
    text-decoration: none;
    transition: color .3s;
}

/* whole card clicks through to the post */
.nw-card-title a::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 3;
    content: "";
}

.nw-card-summary {
    display: -webkit-box;
    margin: 0 0 20px;
    overflow: hidden;
    font-size: 14px;
    line-height: 1.65;
    color: #5f6876; /* #6f7886 was 4.46:1 on white, just under 4.5 */
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.nw-card-link {
    position: relative;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 10px;
    margin-top: auto;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.nw-card-link:hover {
    text-decoration: none;
}

.nw-card-link i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    font-size: 11px;
    color: #fff;
    border-radius: 50%;
    transition: transform .3s ease;
}

.nw-card:hover .nw-card-link i {
    transform: translateX(4px);
}

.nw-card-title a:focus-visible,
.nw-card-link:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

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

@media only screen and (max-width: 575px) {
    .nw-card-body {
        padding: 8px 20px 24px;
    }
    .nw-card-badge {
        right: 28px;
        width: 56px;
        height: 56px;
        font-size: 22px;
    }
}

/*---------------------------
** Home: Our Services cards (sv-card)
---------------------------*/
.service-categories.sv-section {
    padding: 110px 0 90px;
    margin-top: 40px;
    background: linear-gradient(180deg, #f5f8fb 0%, #ffffff 100%);
}

.sv-section .section-summary {
    margin-bottom: 50px;
}

.sv-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: 36px 26px 30px;
    margin-bottom: 30px;
    text-align: center;
    background-color: #fff;
    border: 1px solid #e9edf2;
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 6px 20px -12px rgba(15, 23, 42, 0.14);
    transition: transform .4s cubic-bezier(.2, .8, .2, 1), box-shadow .4s ease, border-color .4s ease;
}

.sv-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 2px 4px rgba(15, 23, 42, 0.04), 0 22px 40px -22px rgba(15, 23, 42, 0.3);
}

.sv-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 76px;
    margin-bottom: 22px;
    font-size: 28px;
    background-color: #f1f5f9;
    border-radius: 50%;
    transition: transform .4s cubic-bezier(.2, .8, .2, 1);
}

.sv-card .sv-card-icon img[src] {
    display: block;
    width: 42px;
    max-width: 42px;
    height: 42px;
    object-fit: contain;
}

.sv-card:hover .sv-card-icon {
    transform: scale(1.06);
}

.sv-card-title {
    margin: 0 0 10px;
}

.sv-card-title a {
    text-decoration: none;
    transition: color .3s;
}

.sv-card-text {
    display: -webkit-box;
    margin: 0 0 20px;
    overflow: hidden;
    font-size: 14px;
    line-height: 1.7;
    color: #5b6576;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
}

.sv-card-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
}

.sv-card-link:hover {
    text-decoration: none;
}

.sv-card-link i {
    font-size: 11px;
    transition: transform .3s cubic-bezier(.2, .8, .2, 1);
}

.sv-card:hover .sv-card-link i {
    transform: translateX(4px);
}

@media only screen and (max-width: 991px) {
    .service-categories.sv-section {
        padding: 80px 0 60px;
    }
}

/*---------------------------
** Home: How we do timeline (hw-*)
---------------------------*/
.hw-section {
    padding: 90px 0 110px;
}

.hw-intro {
    position: sticky;
    top: 110px;
    padding-right: 30px;
}

.hw-steps {
    padding: 0;
    margin: 0;
    list-style: none;
}

.hw-step {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 24px;
    padding-bottom: 24px;
}

.hw-step:last-child {
    padding-bottom: 0;
}

/* spine joining each step to the next */
.hw-step:not(:last-child)::before {
    position: absolute;
    top: 20px;
    bottom: -20px;
    left: 31px;
    width: 2px;
    content: "";
}

.hw-step-node {
    position: relative;
    z-index: 1;
    display: flex;
    flex: 0 0 64px;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin-top: 20px;
    font-size: 24px;
    background-color: #fff;
    border-radius: 15px;
    box-shadow: 0 12px 28px rgba(16, 38, 58, 0.12);
    transition: background-color .3s ease;
}

.hw-step-node i {
    transition: color .3s ease;
}

.hw-step:hover .hw-step-node i {
    color: #fff;
}

.hw-step-card {
    display: flex;
    flex: 1 1 auto;
    align-items: flex-start;
    justify-content: space-between;
    min-width: 0;
    gap: 20px;
    padding: 26px 28px;
    background-color: #fff;
    border: 1px solid #e9edf2;
    border-radius: 16px;
    box-shadow: 0 12px 40px rgba(16, 38, 58, 0.05);
    transition: border-color .3s ease, box-shadow .3s ease;
}

.hw-step:hover .hw-step-card {
    box-shadow: 0 18px 44px rgba(16, 38, 58, 0.09);
}

.hw-step-text {
    min-width: 0;
}

.hw-step-title {
    margin: 0 0 8px;
}

.hw-step-summary {
    margin: 0;
    font-size: 15px;
    line-height: 1.65;
    color: #5f6875;
}

.hw-step-num {
    flex: 0 0 auto;
    font-family: 'Poppins', 'Poppins Fallback', sans-serif;
    font-size: 40px;
    font-weight: 700;
    line-height: 1;
    transition: color .3s ease;
}

@media (prefers-reduced-motion: reduce) {
    .hw-step-node,
    .hw-step-node i,
    .hw-step-card,
    .hw-step-num {
        transition: none;
    }
}

@media only screen and (max-width: 991px) {
    .hw-section {
        padding: 70px 0 80px;
    }
    .hw-intro {
        position: static;
        padding-right: 0;
        margin-bottom: 44px;
    }
}

@media only screen and (max-width: 575px) {
    .hw-step {
        gap: 14px;
        padding-bottom: 18px;
    }
    .hw-step:not(:last-child)::before {
        bottom: -14px;
        left: 22px;
    }
    .hw-step-node {
        flex-basis: 46px;
        width: 46px;
        height: 46px;
        margin-top: 18px;
        font-size: 18px;
        border-radius: 12px;
    }
    .hw-step-card {
        gap: 10px;
        padding: 20px 18px;
    }
    .hw-step-num {
        font-size: 26px;
    }
}

/*---------------------------
** Home: shared title styles
** Single source for section headings and card titles.
** "body" prefix outranks the same-specificity rules in
** responsive.css, which loads after this file.
---------------------------*/
.hw-section .section-title,
.in-section .section-title,
.tk-section .section-title {
    color: #6c7185;
}

body .intro-section .section-summary,
body .sv-section .section-summary,
body .hw-section .section-summary,
body .case-section .section-summary,
body .testimonial-section .section-summary,
body .team-section .section-summary,
body .in-section .section-summary,
body .tk-section .section-summary,
body .blog-section .section-summary,
body .pricing-tables .section-summary {
    margin: 16px 0 48px;
}

body .sm-section .section-summary {
    margin: 56px 0 28px;
}

body .cta-section h2 {
    font-size: 36px;
    font-weight: 400;
    line-height: 1.4;
}

body .hero-features h2,body .hero-features .cw-title,
body .sv-card-title,
body .hw-step-title,
body .sl-side-title,
body .sl-aside .subscribe-section h3,
body .nw-card-title,
body .single-case .case-title,
body .member-info .member-name,
body .tm-name,
body .ts-name,
body .in-name,
body .tk-group,
body .sd-step-title,
body .footer-section h2,
body .pk-name,
body .fq-q,
body .fm-side-title,
body .jb-title,
body .sm-title,
body .lg-title,
body .pj-name,
body .single-testimonial h3 {
    font-family: 'Poppins', 'Poppins Fallback', sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 1.4;
    text-transform: none;
}

/* light surfaces; hero and portfolio titles stay white on their dark ones */
.sv-card-title a,
.hw-step-title,
.sl-side-title,
.nw-card-title a,
body .member-info .member-name,
body .tm-name,
body .ts-name,
body .in-name,
body .tk-group,
body .sd-step-title,
body .fq-q,
body .fm-side-title,
body .jb-title a,
body .single-testimonial h3 {
    color: #202631;
}

body .pk-name {
    color: #fff;
}

@media only screen and (max-width: 1199px) {
    body .cta-section h2 {
        font-size: 30px;
    }
}

@media only screen and (max-width: 480px) {
    body .cta-section h2 {
        font-size: 24px;
    }
}

/*---------------------------
** Home: industries (in-*)
---------------------------*/
.in-section {
    padding: 90px 0 80px;
    background-color: #f5f8fb;
}

.in-grid {
    padding: 0;
    margin-bottom: 0;
    list-style: none;
}

.in-grid > li {
    margin-bottom: 30px;
}

/* one hue per card; all pass 4.5:1 as pill text on their own 10% tint */
.in-grid > li:nth-child(6n+1) { --in: #0b7a54; }
.in-grid > li:nth-child(6n+2) { --in: #2563c9; }
.in-grid > li:nth-child(6n+3) { --in: #7c3aed; }
.in-grid > li:nth-child(6n+4) { --in: #b93c0a; }
.in-grid > li:nth-child(6n+5) { --in: #0e7490; }
.in-grid > li:nth-child(6n+6) { --in: #be185d; }

/* drop-shadow, not box-shadow: it has to follow the panel's cut-out notch */
.in-card {
    position: relative;
    display: flex;
    width: 100%;
    padding-top: 42px;
    filter: drop-shadow(0 8px 18px rgba(16, 38, 58, 0.07));
}

.in-panel {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: center;
    min-width: 0;
    padding: 60px 24px 26px;
    text-align: center;
    background-color: #fff;
    border-radius: 20px;
    -webkit-mask-image: radial-gradient(circle 52px at 50% 0, transparent 98%, #000 100%);
    mask-image: radial-gradient(circle 52px at 50% 0, transparent 98%, #000 100%);
}

/* sits in the notch, 10px clear of the panel all round */
.in-ring {
    position: absolute;
    top: 0;
    left: 50%;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 84px;
    height: 84px;
    background-color: #fff;
    border-radius: 50%;
    transform: translateX(-50%);
}

.in-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    font-size: 21px;
    color: #fff;
    background-color: var(--in);
    border-radius: 15px;
}

.in-name {
    margin: 0 0 14px;
}

.in-project {
    display: block;
    width: 100%;
    padding: 9px 16px;
    margin-top: auto;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.5;
    color: var(--in);
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: 3px;
    background-color: #f5f8fb;
    background-color: color-mix(in srgb, var(--in) 10%, #fff);
    border-radius: 14px;
    transition: text-decoration-color .2s ease;
}

.in-project:hover {
    color: var(--in);
    text-decoration-color: currentColor;
}

.in-project strong,
.in-project span {
    display: block;
}

.in-project strong {
    font-weight: 600;
}

/* one column on a phone: six notched cards would run far too long */
@media only screen and (max-width: 575px) {
    .in-card {
        padding-top: 0;
    }
    .in-panel {
        align-items: stretch;
        padding: 18px 16px;
        padding-inline-start: 88px;
        text-align: start;
        -webkit-mask-image: none;
        mask-image: none;
    }
    .in-ring {
        top: 18px;
        inset-inline-start: 16px;
        inset-inline-end: auto;
        width: 56px;
        height: 56px;
        background-color: transparent;
        border-radius: 0;
        transform: none;
    }
    .in-name {
        margin-bottom: 8px;
    }
    .in-project {
        padding: 8px 12px;
    }
}

.in-more {
    margin: 8px 0 0;
    font-size: 15px;
    line-height: 1.6;
    color: #3d4654;
    text-align: center;
}

.in-more a {
    /* brand blue instead of the inherited #007bff, which fails 4.5:1 on #f5f8fb */
    color: var(--brand, #365c8a);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.in-project:focus-visible,
.in-more a:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/*---------------------------
** Home: tech stack (tk-*), a periodic table. Each group is a block of element tiles in its
** own theme tone; blocks sit on a shared baseline, with the group name under them.
---------------------------*/
.tk-section {
    padding: 0 0 100px;
}

.tk-table {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}

/* column-reverse puts the name under the tiles and pushes each block to the baseline */
.tk-block {
    display: flex;
    flex-direction: column-reverse;
    --tk-bg: var(--tk-deep);
    --tk-fg: #fff;
    --tk-line: var(--tk-deep);
}

.tk-block:nth-child(1) {
    --tk-bg: var(--tk-brand);
    --tk-line: var(--tk-brand);
}

.tk-block:nth-child(3) {
    --tk-bg: var(--tk-tint);
    --tk-fg: var(--tk-deep);
    --tk-line: var(--tk-brand);
}

.tk-block:nth-child(4) {
    --tk-bg: #fff;
    --tk-fg: var(--tk-deep);
    --tk-line: var(--tk-deep);
}

.tk-group {
    padding-top: 12px;
    margin: 12px 0 0;
    border-top: 2px solid var(--tk-line);
}

.tk-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.tk-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-width: 0;
    padding: 12px 14px;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    color: var(--tk-fg);
    background-color: var(--tk-bg);
    border-radius: 10px;
    box-shadow: inset 0 0 0 1px rgba(27, 46, 69, .1);
    transition: transform .4s cubic-bezier(.22, .61, .36, 1), box-shadow .4s ease;
}

/* an odd group gets its gap on the top row, so every block sits flat on the baseline */
.tk-tile:first-child:nth-last-child(odd) {
    grid-column: 1 / 3;
    width: calc(50% - 5px);
}

.tk-tile:hover {
    box-shadow: inset 0 0 0 1px rgba(27, 46, 69, .1), 0 16px 32px rgba(16, 38, 58, .22);
    transform: translateY(-6px);
}

.tk-tile .tk-ico {
    position: absolute;
    top: 12px;
    font-size: 16px;
    opacity: .75;
    transition: opacity .35s ease;
    inset-inline-end: 12px;
}

/* the logo grows in behind the symbol on hover and hands over from the corner icon */
.tk-tile .tk-ico-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: 92px;
    line-height: 1;
    opacity: 0;
    transform: translate(-50%, -50%) scale(.6) rotate(-10deg);
    transition: opacity .45s ease, transform .55s cubic-bezier(.22, .61, .36, 1);
}

.tk-tile:hover .tk-ico-bg {
    opacity: .2;
    transform: translate(-50%, -50%) scale(1) rotate(0);
}

.tk-tile:hover .tk-ico {
    opacity: 0;
}

.tk-sym,
.tk-name {
    position: relative;
}

.tk-sym {
    font-size: 40px;
    font-weight: 600;
    line-height: 1.1;
}

.tk-name {
    margin-top: 2px;
    overflow: hidden;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* one drop-in as the table scrolls into view; --i staggers the tiles */
.tk-anim .tk-tile {
    opacity: 0;
    transform: translateY(16px);
}

/* "backwards" releases the tile after landing, so hover can lift it and the animation never replays */
.tk-anim.is-in .tk-tile {
    opacity: 1;
    transform: none;
    animation: tkIn .45s ease backwards;
    animation-delay: calc(var(--i) * 45ms);
}

@keyframes tkIn {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

.tk-anim.is-in .tk-tile:hover {
    transform: translateY(-6px);
}

@media only screen and (max-width: 1199px) {
    .tk-sym {
        font-size: 32px;
    }
    .tk-tile .tk-ico-bg {
        font-size: 76px;
    }
}

@media only screen and (max-width: 991px) {
    .tk-table {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 32px;
    }
    .tk-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .tk-tile:first-child:nth-last-child(odd) {
        grid-column: auto;
        width: auto;
    }
}

@media only screen and (max-width: 767px) {
    .in-section {
        padding: 60px 0;
    }
    .tk-section {
        padding-bottom: 60px;
    }
}

@media only screen and (max-width: 575px) {
    .tk-table {
        grid-template-columns: minmax(0, 1fr);
    }
    .tk-block {
        flex-direction: column;
    }
    .tk-group {
        padding: 0 0 10px;
        margin: 0 0 12px;
        border-top: 0;
        border-bottom: 2px solid var(--tk-line);
    }
    .tk-tile {
        padding: 10px;
    }
    .tk-sym {
        font-size: 26px;
    }
    .tk-name {
        font-size: 11px;
    }
    .tk-tile .tk-ico {
        top: 10px;
        font-size: 13px;
        inset-inline-end: 10px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .in-project,
    .tk-tile,
    .tk-tile .tk-ico,
    .tk-tile .tk-ico-bg {
        transition: none;
    }
    .tk-tile:hover {
        transform: none;
    }
    .tk-tile .tk-ico-bg,
    .tk-tile:hover .tk-ico-bg {
        transform: translate(-50%, -50%);
    }
}

/*---------------------------
** Home: testimonial cards (ts-*)
---------------------------*/
.testimonial-section.ts-section {
    padding: 90px 0 70px;
    background-color: #f5f8fb;
}

/* every card the same height, so the author rows line up */
.ts-section .owl-stage {
    display: flex;
}

.ts-section .owl-item {
    display: flex;
}

/* room for the card shadow, which the carousel would otherwise clip */
.ts-section .owl-stage-outer {
    padding: 4px 0 28px;
    margin: -4px 0 -28px;
}

.ts-card {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 32px;
    margin: 0;
    overflow: hidden;
    text-align: start;
    background-color: #fff;
    border: 1px solid #e9edf2;
    border-radius: 16px;
    box-shadow: 0 6px 16px rgba(16, 38, 58, 0.05);
    transition: border-color .25s ease;
}

.ts-mark {
    position: absolute;
    top: 0;
    inset-inline-end: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    font-size: 17px;
    border-end-start-radius: 20px;
}

/* inline padding keeps the first line clear of the corner mark */
.ts-quote {
    flex: 1 1 auto;
    padding-inline-end: 36px;
    margin: 0 0 24px;
}

.ts-quote p {
    margin: 0;
    font-size: 16px;
    line-height: 1.75;
    color: #3d4654;
}

.ts-author {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-top: 20px;
    border-top: 1px solid #eef2f6;
}

.ts-avatar {
    position: relative;
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    overflow: hidden;
    color: #a9b6c3;
    background-color: #eef2f6;
    border-radius: 50%;
}

.testimonial-carousel.owl-carousel .owl-item .ts-avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
}

/* only once the photo has failed and removed itself */
.ts-avatar img + .ts-avatar-fallback {
    display: none;
}

.ts-who {
    min-width: 0;
}

.ts-name,
.ts-rank {
    display: block;
}

.ts-rank {
    margin-top: 2px;
    font-size: 13px;
    line-height: 1.5;
    color: #6c7185;
}

.ts-section .owl-theme .owl-dots,
.ts-section .owl-carousel.owl-theme .owl-dots {
    margin-top: 28px;
}

.testimonial-carousel.owl-theme .owl-dots .owl-dot:focus-visible span {
    outline: 2px solid #202631;
    outline-offset: 2px;
}

@media only screen and (max-width: 767px) {
    .testimonial-section.ts-section {
        padding: 60px 0 50px;
    }
    .ts-card {
        padding: 24px;
    }
}

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

/*---------------------------
** Home: team cards (tm-*), same wave language as .nw-card
---------------------------*/
/* the carousel sits in a .row: cancel its -15px gutters so cards line up with the container */
.team-carousel.owl-carousel {
    padding: 0 15px;
}

/* arrows follow the card corners, and show for keyboard users too */
.team-carousel.owl-carousel.common-carousel .owl-nav button.owl-prev,
.team-carousel.owl-carousel.common-carousel .owl-nav button.owl-next {
    border-radius: 10px;
}

.team-carousel.owl-carousel.common-carousel .owl-nav button:focus-visible {
    opacity: 1;
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* every card in a row the same height, even when a long name wraps */
.team-carousel .owl-stage {
    display: flex;
}

/* no shrink: owl positions the stage from its own item widths, so a narrower
   item drifts the row sideways and clips the first card's edge */
.team-carousel .owl-item {
    display: flex;
    flex: 0 0 auto;
}

/* room for the hover lift, which the carousel would otherwise clip */
.team-carousel .owl-stage-outer {
    padding: 8px 0;
    margin: -8px 0;
}

.tm-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    overflow: hidden;
    text-align: start;
    background-color: #fff;
    border-radius: 16px;
    /* blur stays under the 30px carousel gap, or it tints the previous card's right edge */
    box-shadow: 0 14px 28px rgba(4, 22, 32, 0.28);
    /* own layer: stops the image bleeding through at fractional card edges */
    will-change: transform;
    transition: transform .3s ease-out;
}

.tm-card:hover {
    transform: translateY(-6px);
}

/* fixed frame so every upload size fills it */
.tm-photo {
    position: relative;
    flex: 0 0 auto;
    height: 0;
    padding-top: 84%;
    overflow: hidden;
    background-color: #eef2f6;
}

.tm-photo-fallback {
    position: absolute;
    top: 42%;
    left: 50%;
    font-size: 64px;
    color: #c5d0db;
    transform: translate(-50%, -50%);
}

/* only once the photo has failed and removed itself; never behind a transparent PNG */
.tm-photo img + .tm-photo-fallback {
    display: none;
}

.tm-card .tm-photo img[src] {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    max-width: none;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    transition: transform .7s ease-out;
}

.tm-card:hover .tm-photo img {
    transform: scale(1.04);
}

/* overlaps the photo's last pixels: at a fractional height the image shows
   past the wave as a thin coloured line on high-DPI screens */
.tm-body {
    position: relative;
    z-index: 2;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    padding: 14px 20px 16px;
    margin-top: -2px;
    background-color: #fff;
}

.tm-name {
    margin: 0;
}

.tm-rank {
    margin: 2px 0 12px;
    font-size: 13px;
    line-height: 1.5;
}

/* pinned to the bottom so the rows line up across cards */
.tm-social {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 0 0;
    margin: auto 0 0;
    list-style: none;
    border-top: 1px solid #eef2f6;
}

.tm-social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    font-size: 13px;
    text-decoration: none;
    border-radius: 9px;
    transition: color .2s ease, background-color .2s ease;
}

.tm-social a:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .tm-card,
    .tm-card .tm-photo img[src],
    .tm-social a {
        transition: none;
    }
    .tm-card:hover,
    .tm-card:hover .tm-photo img {
        transform: none;
    }
}

/* overflow-x: hidden on both html and body makes body a scroll container,
   which silently disables position: sticky. clip keeps the same clipping. */
@supports (overflow: clip) {
    body {
        overflow-x: clip;
        overflow-y: visible;
    }
}

/*---------------------------
** Services list page (sl-*), cards reuse .nw-card
---------------------------*/
.sl-section {
    padding: 80px 0 90px;
    background-color: #f5f8fb;
}

.sl-head {
    margin-bottom: 32px;
}

body .sl-section .section-summary {
    margin: 0;
}

.sl-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    margin-top: 4px;
}

.sl-count {
    margin: 0;
    font-size: 15px;
    line-height: 1.5;
    color: #6c7185;
}

.sl-chip,
.sl-chip:hover {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    padding: 0 10px;
    font-size: 13px;
    font-weight: 500;
    line-height: 22px;
    color: #3d4654;
    text-decoration: none;
    background-color: #e6ecf3;
    border-radius: 999px;
}

.sl-chip i {
    font-size: 10px;
}

.sl-search {
    position: relative;
    margin-bottom: 24px;
}

.sl-search input {
    display: block;
    width: 100%;
    height: 52px;
    padding: 0 60px 0 18px;
    font-size: 14px;
    color: #202631;
    background-color: #fff;
    border: 1px solid #dfe5ec;
    border-radius: 12px;
    -webkit-appearance: none;
    appearance: none;
}

.sl-search button[type="submit"] {
    position: absolute;
    top: 6px;
    right: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    font-size: 14px;
    color: #fff;
    cursor: pointer;
    border: 0;
    border-radius: 9px;
}

.sl-side-title {
    margin: 0 0 14px;
}

/* wrapped pills on small screens, a side panel from 992px up */
.sl-cats {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.sl-cats a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px 9px 18px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    color: #3d4654;
    text-decoration: none;
    background-color: #fff;
    border: 1px solid #dfe5ec;
    border-radius: 999px;
    transition: color .2s ease, background-color .2s ease, border-color .2s ease;
}

.sl-cats a:hover {
    text-decoration: none;
    background-color: #eef3f8;
}

.sl-cats a.active,
.sl-cats a.active:hover {
    color: #fff;
}

.sl-cat-count {
    min-width: 26px;
    padding: 2px 7px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    color: #5f6875;
    text-align: center;
    background-color: #eef2f6;
    border-radius: 999px;
}

.sl-cats a.active .sl-cat-count {
    color: #fff;
    background-color: rgba(0, 0, 0, .22); /* white-tinted was 4.08:1 */
}

.sl-cats a:focus-visible,
.sl-search input:focus-visible,
.sl-search button:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.sl-pagination .page-item .page-link {
    min-width: 42px;
    padding: 10px 14px;
    text-align: center;
    background-color: #fff;
    border: 1px solid #dfe5ec;
    border-radius: 10px;
}

.sl-pagination .page-item:first-child .page-link,
.sl-pagination .page-item:last-child .page-link {
    border-radius: 10px;
}

.sl-pagination li.page-item.active span.page-link {
    color: #fff;
    border-width: 1px;
}

.sl-aside .err-email {
    color: #ffb4b4 !important;
}

.sl-aside .err-email:empty {
    display: none;
}

.sl-aside .subscribe-section span {
    color: rgba(255, 255, 255, .72);
}

.sl-aside .subscribe-section h3 {
    margin: 0;
}

.sl-aside .subscribe-section h3::after {
    display: none;
}

.sl-aside .subscribe-form {
    margin-top: 20px;
}

.sl-aside .subscribe-form .form-element {
    margin-bottom: 12px;
}

.sl-aside .subscribe-form .form-element:last-child {
    margin-bottom: 0;
}

.sl-aside .subscribe-form input[type="email"] {
    display: block;
    width: 100%;
    height: 50px;
    padding: 0 16px;
    border-radius: 10px;
}

.sl-aside .subscribe-form input[type="submit"] {
    width: 100%;
    padding: 14px 0;
    border-radius: 10px;
}

.sl-grid {
    margin-bottom: 0;
}

.sl-grid > li {
    margin-bottom: 30px;
}

/* service names are short; don't reserve a second line under them */
.sl-grid .nw-card-title {
    min-height: 0;
}

/* shorter image so the text carries more of the card */
.sl-grid .nw-card-media,
.bd-rel .nw-card-media {
    padding-top: 62%;
}

.sl-grid .nw-card-title,
.bd-rel .nw-card-title {
    margin-top: 14px;
}

.sl-grid .nw-card-link,
.bd-rel .nw-card-link {
    align-self: stretch;
    justify-content: space-between;
    padding-top: 16px;
    border-top: 1px solid #eef2f6;
}

/* blogs page: titles run long, so keep two lines and line the rows up */
.bl-grid .nw-card-title {
    min-height: 2.8em;
}

.bl-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 14px;
    margin: 0 0 10px;
    font-size: 13px;
    line-height: 1.5;
    color: #6c7185;
}

.bl-meta strong {
    font-weight: 600;
    color: #202631;
}

.sl-side-after {
    margin-top: 24px;
}

/*---------------------------
** Blog details (bd-*), sidebar and cards shared with the list pages
---------------------------*/
.bd-article {
    padding: 36px 40px 32px;
    background-color: #fff;
    border: 1px solid #e9edf2;
    border-radius: 16px;
    box-shadow: 0 12px 40px rgba(16, 38, 58, 0.05);
}

.bd-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 18px;
    margin-bottom: 24px;
}

.bd-cat,
.bd-cat:hover {
    margin-top: 0;
    text-decoration: none;
}

.bd-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 18px;
    padding: 0;
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: #6c7185;
    list-style: none;
}

.bd-meta strong {
    font-weight: 600;
    color: #202631;
}

.bd-figure {
    margin: 0 0 32px;
}

.bd-figure img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 12px;
}

.bd-toc {
    padding: 22px 26px;
    margin-bottom: 32px;
    background-color: #f5f8fb;
    border-radius: 12px;
}

.bd-toc-title {
    margin: 0 0 10px;
    font-family: 'Poppins', 'Poppins Fallback', sans-serif;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.4;
    color: #202631;
}

.bd-toc ol {
    padding: 0;
    margin: 0;
    list-style: none;
}

.bd-toc li {
    padding: 3px 0;
    font-size: 15px;
    line-height: 1.5;
}

.bd-toc a {
    color: #3d4654;
    text-decoration: none;
}

.bd-toc a:hover {
    text-decoration: underline;
}

.bd-body {
    font-size: 17px;
    line-height: 1.8;
    color: #3d4654;
    overflow-wrap: break-word;
}

.bd-body p {
    margin: 0 0 20px;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
}

.bd-body h2,
.bd-body h3,
.bd-body h4 {
    font-family: 'Poppins', 'Poppins Fallback', sans-serif;
    font-weight: 600;
    line-height: 1.35;
    color: #202631;
    scroll-margin-top: 110px;
}

.bd-body h2 {
    margin: 38px 0 14px;
    font-size: 26px;
}

.bd-body h3 {
    margin: 30px 0 12px;
    font-size: 21px;
}

.bd-body h4 {
    margin: 24px 0 10px;
    font-size: 18px;
}

.bd-body > :first-child {
    margin-top: 0;
}

.bd-body > :last-child {
    margin-bottom: 0;
}

.bd-body ol,
.bd-body ul {
    padding-left: 24px;
    margin: 0 0 24px;
}

.bd-body ul {
    list-style: disc;
}

.bd-body ol {
    list-style: decimal;
}

.bd-body li {
    padding-left: 4px;
    margin-bottom: 14px;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
}

.bd-body li > strong:first-child {
    display: block;
    color: #202631;
}

.bd-body li > h2 {
    margin: 32px 0 10px;
    font-size: 22px;
}

.bd-body li:first-child > h2 {
    margin-top: 0;
}

.bd-body li > p:last-child {
    margin-bottom: 0;
}

.bd-body strong,
.bd-body b {
    font-weight: 600;
}

.bd-body a {
    text-decoration: underline;
}

.bd-body img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
}

.bd-body blockquote {
    padding: 18px 24px;
    margin: 0 0 24px;
    font-style: italic;
    background-color: #f5f8fb;
    border-left: 3px solid currentColor;
    border-radius: 0 12px 12px 0;
}

.bd-body table {
    display: block;
    max-width: 100%;
    margin: 0 0 24px;
    overflow-x: auto;
    font-size: 15px;
    border-collapse: collapse;
}

.bd-body th,
.bd-body td {
    padding: 10px 14px;
    border: 1px solid #e3e8ee;
}

.bd-share {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px 20px;
    padding-top: 24px;
    margin-top: 32px;
    border-top: 1px solid #eef2f6;
}

.bd-share-label {
    font-family: 'Poppins', 'Poppins Fallback', sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: #202631;
}

.bd-share ul {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.bd-share a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 500;
    color: #3d4654;
    text-decoration: none;
    background-color: #fff;
    border: 1px solid #dfe5ec;
    border-radius: 999px;
    transition: color .2s ease, border-color .2s ease;
}

.bd-share a:hover {
    text-decoration: none;
}

.bd-comments {
    padding: 28px 40px;
    margin-top: 30px;
    background-color: #fff;
    border: 1px solid #e9edf2;
    border-radius: 16px;
}

/* the details page has no list heading to line the sidebar up with */
.bd-aside .sl-search {
    margin: 0 0 24px;
}

.bd-related {
    margin-top: 70px;
}

.bd-related-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 24px;
    margin-bottom: 32px;
}

.bd-related-all {
    margin-top: 0;
}

.bd-rel {
    margin-bottom: 0;
}

.bd-rel > li {
    margin-bottom: 30px;
}

/* a sidebar this long can't fit the screen, so it scrolls with the page */
.sl-aside--static .sl-aside-inner {
    position: static;
}

/* an odd last card would leave a hole: let it fill the row, image beside text */
@media only screen and (min-width: 768px) {
    .sl-grid > li:last-child:nth-child(odd) {
        flex: 0 0 100%;
        max-width: 100%;
    }
    .sl-grid > li:last-child:nth-child(odd) .nw-card {
        flex-direction: row;
    }
    .sl-grid > li:last-child:nth-child(odd) .nw-card-top {
        flex: 0 0 46%;
    }
    .sl-grid > li:last-child:nth-child(odd) .nw-card-media {
        height: 100%;
        min-height: 280px;
        padding-top: 0;
    }
    .sl-grid > li:last-child:nth-child(odd) .nw-card-wave,
    .sl-grid > li:last-child:nth-child(odd) .nw-card-badge {
        display: none;
    }
    .sl-grid > li:last-child:nth-child(odd) .nw-card-body {
        justify-content: center;
        padding: 28px 32px;
        margin-top: 0;
    }
    .sl-grid > li:last-child:nth-child(odd) .nw-card-link {
        margin-top: 0;
    }
}

.nw-card-badge img {
    display: block;
    width: 34px;
    height: 34px;
    object-fit: contain;
}

/* top margin clears the badge, which hangs 14px into the body */
.sl-card-cat {
    align-self: flex-start;
    padding: 3px 12px;
    margin-top: 8px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.5;
    border-radius: 999px;
}

.sl-pagination {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

.sl-empty {
    padding: 70px 24px;
    text-align: center;
    background-color: #f5f8fb;
    border-radius: 16px;
}

.sl-empty-title {
    margin: 0 0 24px;
    font-family: 'Poppins', 'Poppins Fallback', sans-serif;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.4;
    color: #202631;
}

.sl-cta {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 48px;
    min-height: 240px;
    padding: 56px;
    margin-top: 70px;
    overflow: hidden;
    color: #fff;
    border-radius: 16px;
}

/* same wave language as the cards, as the divider between copy and actions */
.sl-cta-wave {
    position: absolute;
    top: 0;
    right: 0;
    width: 44%;
    height: 100%;
    pointer-events: none;
}

.sl-cta-txt {
    position: relative;
    flex: 1 1 auto;
    max-width: 54%;
}

.sl-cta .section-summary {
    color: #fff;
}

.sl-cta p {
    margin: 12px 0 0;
    font-size: 16px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .82);
}

.sl-cta-actions {
    position: relative;
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.sl-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px 12px 24px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none;
    white-space: nowrap;
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 14px 30px rgba(16, 38, 58, 0.2);
}

.sl-cta-btn:hover {
    text-decoration: none;
}

.sl-cta-btn i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    font-size: 12px;
    color: #fff;
    border-radius: 50%;
    transition: transform .3s ease;
}

.sl-cta-btn:hover i {
    transform: translateX(4px);
}

.sl-cta-phone,
.sl-cta-phone:hover {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 500;
    color: #fff;
    text-decoration: none;
    white-space: nowrap;
}

.sl-cta-phone:hover span {
    text-decoration: underline;
}

.sl-cta-phone i {
    font-size: 13px;
}

.sl-cta-btn:focus-visible,
.sl-cta-phone:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .sl-cta-btn i {
        transition: none;
    }
    .sl-cta-btn:hover i {
        transform: none;
    }
}

.sl-aside .subscribe-section {
    padding: 28px;
    margin-top: 24px;
    border-radius: 16px;
}

/* only stick when the whole column fits below the nav */
@media only screen and (min-width: 992px) and (min-height: 970px) {
    .sl-aside-inner {
        position: sticky;
        top: 110px;
    }
}

@media only screen and (min-width: 992px) {
    /* lines the Categories panel up with the top of the first card row */
    .sl-search {
        margin: 25px 0 32px;
    }
    .sl-cats-wrap {
        padding: 24px 20px;
        background-color: #fff;
        border: 1px solid #e9edf2;
        border-radius: 16px;
        box-shadow: 0 12px 40px rgba(16, 38, 58, 0.05);
    }
    .sl-side-title {
        padding: 0 12px;
    }
    .sl-cats {
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 4px;
    }
    .sl-cats a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px 12px;
        border-color: transparent;
        border-radius: 10px;
    }
}

@media only screen and (max-width: 991px) {
    .sl-section {
        padding: 60px 0 70px;
    }
    /* filters above the cards, newsletter below them */
    .sl-aside,
    .sl-aside-inner {
        display: contents;
    }
    .sl-side {
        flex: 0 0 100%;
        order: 1;
        max-width: 100%;
        padding: 0 15px;
        margin-bottom: 44px;
    }
    .sl-side-after {
        flex: 0 0 100%;
        order: 3;
        max-width: 100%;
        padding: 0 15px;
        margin-top: 44px;
    }
    .sl-side-after .sl-cats a {
        padding-right: 18px;
    }
    /* on an article the reading comes first, the sidebar after it */
    .bd-aside .sl-side {
        order: 3;
        margin: 44px 0 0;
    }
    .bd-article,
    .bd-comments {
        padding: 26px 22px;
    }
    .bd-body {
        font-size: 16px;
    }
    .bd-body h2 {
        font-size: 23px;
    }
    .sl-aside .subscribe-section {
        flex: 0 0 calc(100% - 30px);
        order: 3;
        max-width: calc(100% - 30px);
        margin: 24px 15px 0;
    }
    .sl-cta {
        flex-direction: column;
        align-items: flex-start;
        gap: 28px;
        min-height: 0;
        padding: 36px 28px;
        margin-top: 50px;
    }
    .sl-cta-wave {
        display: none;
    }
    .sl-cta-txt {
        max-width: none;
    }
    .sl-cta-actions {
        align-items: flex-start;
    }
}

/*---------------------------
** Service details (sd-*), article and sidebar shared with the blog details page
---------------------------*/
.sd-figure img {
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.sd-body > p:first-child {
    font-size: 18px;
    color: #202631;
}

/* lists here are feature lists: a card each, read at a glance */
.sd-body > ol,
.sd-body > ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    padding: 0;
    margin: 0 0 28px;
    list-style: none;
}

.sd-body > ol > li,
.sd-body > ul > li {
    position: relative;
    padding: 18px 18px 18px 48px;
    margin: 0;
    font-size: 15px;
    line-height: 1.65;
    background-color: #f5f8fb;
    border-radius: 12px;
}

.sd-body > ol > li::before,
.sd-body > ul > li::before {
    position: absolute;
    top: 19px;
    inset-inline-start: 18px;
    font-family: 'Font Awesome 5 Free';
    font-size: 15px;
    font-weight: 900;
    line-height: 1.65;
    content: "\f00c";
}

[dir="rtl"] .sd-body > ol > li,
[dir="rtl"] .sd-body > ul > li {
    padding: 18px 48px 18px 18px;
}

.sd-body > ol > li:last-child:nth-child(odd),
.sd-body > ul > li:last-child:nth-child(odd) {
    grid-column: 1 / -1;
}

.sd-body > ol > li > h2,
.sd-body > ul > li > h2 {
    margin: 0 0 4px;
    font-size: 16px;
}

.sd-process {
    margin-top: 80px;
}

.sd-process-head {
    margin-bottom: 44px;
    text-align: center;
}

.sd-process .section-title {
    color: #6c7185;
}

body .sd-process .section-summary {
    margin: 16px 0 0;
}

.sd-steps {
    margin-bottom: 0;
}

/* a real sequence, so the numbers and the connecting line carry meaning */
.sd-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 30px;
}

.sd-step-ring {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 84px;
    height: 84px;
    background-color: #fff;
    border-radius: 50%;
    box-shadow: 0 8px 22px rgba(16, 38, 58, 0.08);
}

.sd-step-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    font-size: 21px;
    color: #fff;
    border-radius: 15px;
}

.sd-step-box {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    width: 100%;
    margin-top: 54px;
    filter: drop-shadow(0 8px 18px rgba(16, 38, 58, 0.07));
}

.sd-step-num {
    position: absolute;
    top: -24px;
    left: 50%;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    font-family: 'Poppins', 'Poppins Fallback', sans-serif;
    font-size: 16px;
    font-weight: 700;
    background-color: #fff;
    border-radius: 50%;
    transform: translateX(-50%);
}

.sd-step-panel {
    flex: 1 1 auto;
    min-width: 0;
    padding: 44px 26px 28px;
    text-align: center;
    background-color: #fff;
    border-radius: 20px;
    -webkit-mask-image: radial-gradient(circle 32px at 50% 0, transparent 98%, #000 100%);
    mask-image: radial-gradient(circle 32px at 50% 0, transparent 98%, #000 100%);
}

.sd-step-title {
    margin: 0 0 10px;
}

.sd-step-panel p {
    margin: 0;
    font-size: 14px;
    line-height: 1.7;
    color: #5b6576;
}

/* service names are short; don't reserve a second line under them */
.sd-rel .nw-card-title {
    min-height: 0;
}

@media only screen and (min-width: 992px) {
    .sd-step:not(:last-child)::after {
        position: absolute;
        top: 42px;
        inset-inline-start: calc(50% + 54px);
        width: calc(100% - 108px);
        content: "";
        border-top: 2px dashed;
    }
}

/* stacked, the ring-over-card layout runs far too long: one compact row per step */
@media only screen and (max-width: 991px) {
    .sd-step {
        align-items: stretch;
        margin-bottom: 14px;
    }
    .sd-step-ring {
        position: absolute;
        top: 18px;
        inset-inline-start: 31px;
        z-index: 1;
        width: 56px;
        height: 56px;
        background-color: transparent;
        border-radius: 0;
        box-shadow: none;
    }
    .sd-step-box {
        margin-top: 0;
    }
    .sd-step-num {
        top: 20px;
        inset-inline-end: 16px;
        left: auto;
        width: auto;
        height: auto;
        font-size: 14px;
        background-color: transparent;
        border-radius: 0;
        transform: none;
    }
    .sd-step-panel {
        padding: 18px 16px;
        padding-inline-start: 88px;
        text-align: start;
        -webkit-mask-image: none;
        mask-image: none;
    }
    .sd-step-title {
        padding-inline-end: 28px;
        margin-bottom: 6px;
    }
}

@media only screen and (max-width: 767px) {
    .sd-body > ol,
    .sd-body > ul {
        grid-template-columns: minmax(0, 1fr);
    }
    .sd-body > p:first-child {
        font-size: 17px;
    }
    .sd-process {
        margin-top: 50px;
    }
}

/*---------------------------
** Navbar: transparent over the hero with a page-width rule, then a solid full-width bar once scrolled.
** "body" prefix outranks responsive.css and base-color.php, which load later.
** --navy and --brand come from base-color.php.
---------------------------*/
body .header-area {
    --nav-x: 12px;
    --nav-y: 45px;
    --hn-half: 555px;
}

body .sticky-navbar {
    --nav-y: 26px;
    background-color: transparent;
    animation-duration: .4s;
    animation-timing-function: ease-out;
}

/* strip */
body .support-bar-area {
    position: relative;
    z-index: 3;
    padding: 8px 0;
    font-size: 13px;
    background-color: transparent;
}

body .support-bar-area .row {
    align-items: center;
}

body .support-bar-area .support-contact-info i,
body .support-bar-area .language a i {
    margin-inline-end: 4px;
    font-size: 13px;
    color: rgba(255, 255, 255, .65);
}

/* the strip sets icons to weight 400, which leaves Font Awesome solid glyphs blank */
body .support-bar-area .support-contact-info i.fas {
    font-size: 12px;
    font-weight: 900;
}

body .support-contact-info a {
    display: inline;
    font-size: 13px;
    color: #fff;
}

body .support-contact-info a:hover {
    text-decoration: underline;
}

body .support-bar-area ul.social-links {
    margin: 0;
    vertical-align: middle;
}

body .support-bar-area ul.social-links::after {
    display: none;
}

body .support-bar-area ul.social-links li,
body .support-bar-area ul.social-links li:last-child {
    margin: 0;
    margin-inline-start: 14px;
}

body .support-bar-area ul.social-links li a {
    font-size: 13px;
    color: rgba(255, 255, 255, .75);
    transition: color .15s ease;
}

body .support-bar-area ul.social-links li a:hover,
body a.language-btn:hover {
    color: #fff;
}

/* the divider is drawn here so it also disappears when there is no language menu */
body .language {
    padding-inline-start: 14px;
    margin-inline-start: 14px;
    vertical-align: middle;
    border-inline-start: 1px solid rgba(255, 255, 255, .22);
}

body a.language-btn {
    font-size: 13px;
}

body ul.language-dropdown {
    top: 26px;
    right: 0;
    left: auto;
    width: 150px;
    padding: 6px;
    overflow: hidden;
    text-align: start;
    background-color: var(--navy);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 8px;
    box-shadow: 0 12px 32px rgba(10, 30, 45, .35);
    transform: translateY(6px);
    transition: .2s;
}

body ul.language-dropdown li {
    z-index: auto;
    background-color: transparent;
}

body ul.language-dropdown li a {
    padding: 8px 12px;
    font-size: 13px;
    color: rgba(255, 255, 255, .88);
    border: 0;
    border-radius: 6px;
}

body ul.language-dropdown li a::before {
    display: none;
}

/* bar */
body .header-navbar,
body .sticky-navbar .header-navbar {
    position: relative;
    z-index: 2;
    padding: 0;
    margin: 0;
    background-color: transparent;
    border: 0;
}

/* anchors the mega menu to the page width, not the full-width bar */
body .header-navbar > .container {
    position: relative;
}

/* the page-width rule under the menu while over the hero */
body .header-navbar > .container::after {
    position: absolute;
    right: 15px;
    bottom: 0;
    left: 15px;
    height: 1px;
    content: "";
    background-color: rgba(255, 255, 255, .28);
}

body .sticky-navbar .header-navbar > .container::after {
    display: none;
}

/* solid bar: opens from page width to full width as it slides in */
body .sticky-navbar .header-navbar::before {
    position: absolute;
    inset: 0;
    z-index: -1;
    content: "";
    background-color: var(--navy);
    box-shadow: 0 10px 30px rgba(10, 30, 45, .22);
    clip-path: inset(0 0 -44px 0);
    animation: hnOpen .55s cubic-bezier(.22, .61, .36, 1) both;
}

@keyframes hnOpen {
    from {
        clip-path: inset(0 calc(50% - var(--hn-half)) -44px calc(50% - var(--hn-half)));
    }
    to {
        clip-path: inset(0 0 -44px 0);
    }
}

body .header-navbar > .container > .row {
    align-items: center;
}

body .logo-wrapper {
    display: flex;
    align-items: center;
    height: auto;
}

body .logo-wrapper a {
    display: block;
}

body .logo-wrapper img {
    display: block;
    max-height: 52px;
    /* both auto, so max-width/max-height scale the logo without stretching it */
    width: auto;
    height: auto;
}

body .sticky-navbar .logo-wrapper img {
    max-height: 44px;
}

body .logo-wrapper a:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* menu */
body .sticky-navbar .main-menu {
    padding: 0;
}

body .main-menu li {
    margin: 0;
}

@media only screen and (min-width: 992px) {
    body .main-menu {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        margin: 0;
    }
}

body .main-menu > li > a,
body .main-menu > li > a.dropbtn {
    padding: var(--nav-y) var(--nav-x);
    font-size: 14px !important;
    font-weight: 600;
    line-height: 22px;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: .02em;
    white-space: nowrap;
    background-image: linear-gradient(#fff, #fff);
    background-repeat: no-repeat;
    background-position: var(--nav-x) 100%;
    background-size: 0 3px;
    transition: color .15s ease, background-size .25s ease, padding .25s ease;
}

[dir="rtl"] .main-menu > li > a,
[dir="rtl"] .main-menu > li > a.dropbtn {
    background-position: right var(--nav-x) bottom 0;
}

body .main-menu > li > a::before,
body .main-menu > li > a::after {
    display: none;
}

body .main-menu > li > a:hover,
body .main-menu > li:hover > a,
body .main-menu > li:hover > a.dropbtn,
body .main-menu > li:focus-within > a,
body .main-menu > li.active > a,
body .main-menu > li > a.dropbtn.active {
    color: #fff;
    background-size: calc(100% - var(--nav-x) * 2) 3px;
}

body .main-menu > li > a:focus-visible {
    outline: 2px solid #fff;
    outline-offset: -6px;
}

body .support-bar-area a:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

body .main-menu li.dropdown {
    margin: 0;
}

body .main-menu li.dropdown > a {
    padding-inline-end: calc(var(--nav-x) + 15px);
}

body .main-menu li.dropdown:hover > a,
body .main-menu li.dropdown.active > a {
    color: #fff;
}

body .main-menu li.dropdown::after,
body .main-menu li.dropdown:hover::after,
body .main-menu li.dropdown.active::after {
    top: var(--nav-y);
    right: auto;
    left: auto;
    inset-inline-end: var(--nav-x);
    font-size: 13px;
    line-height: 22px;
    color: #fff;
    pointer-events: none;
}

/* menus hang straight off the bar, so the pointer never crosses a gap */
body .main-menu li.dropdown ul.dropdown-lists {
    top: 100%;
    width: 240px;
    padding: 6px;
    text-align: start;
    background-color: var(--navy);
    border-top: 1px solid rgba(255, 255, 255, .14);
    border-radius: 0 0 8px 8px;
    box-shadow: 0 18px 38px rgba(10, 30, 45, .35);
    transform: translateY(6px);
    transition: .2s;
}

body .main-menu li.dropdown:focus-within ul.dropdown-lists,
body .mega-dropdown:focus-within .mega-dropdown-content {
    visibility: visible;
    opacity: 1;
    transform: none;
}

body .main-menu li.dropdown ul.dropdown-lists li {
    z-index: auto;
    background-color: transparent;
    border: 0;
}

body .main-menu li.dropdown ul.dropdown-lists li a {
    padding: 9px 12px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.45;
    color: rgba(255, 255, 255, .88);
    text-transform: none;
    border-radius: 6px;
    transition: color .15s ease, background-color .15s ease;
}

body .main-menu li.dropdown ul.dropdown-lists li a::before,
body .main-menu li.dropdown ul.dropdown-lists li a::after {
    display: none;
}

body .mega-dropdown-content {
    top: 100%;
    max-height: calc(100vh - 150px);
    padding: 28px 32px 6px;
    overflow-y: auto;
    color: #fff;
    text-align: start;
    background-color: var(--navy);
    border-top: 1px solid rgba(255, 255, 255, .14);
    border-radius: 0 0 10px 10px;
    box-shadow: 0 22px 50px rgba(10, 30, 45, .35);
    transform: translateY(6px);
    transition: .2s;
}

/* Services menu: categories on the left, the active category's services on the right */
@media only screen and (min-width: 992px) {
    body .main-menu .mega-dropdown {
        position: relative;
    }
    body .mega-dropdown-content.smm {
        right: auto;
        left: auto;
        inset-inline-start: var(--nav-x);
        width: 470px;
        padding: 0;
        overflow: hidden;
        border-radius: 0 0 14px 14px;
        box-shadow: 0 24px 56px rgba(10, 24, 40, .45);
    }
}

.smm-cats {
    position: relative;
    padding: 10px 0;
    margin: 0;
    list-style: none;
}

/* left pane background, behind the tabs */
.smm-cats::before {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 230px;
    content: "";
    background-color: rgba(0, 0, 0, .16);
    border-inline-end: 1px solid rgba(255, 255, 255, .08);
    inset-inline-start: 0;
}

body .main-menu .smm-cat {
    display: block;
}

.smm-tab {
    position: relative;
    display: flex;
    gap: 12px;
    align-items: center;
    width: 230px;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 500;
    line-height: 22px;
    color: rgba(255, 255, 255, .88);
    text-align: start;
    cursor: pointer;
    background-color: transparent;
    border: 0;
    transition: color .15s ease, background-color .15s ease;
}

/* accent bar grows from the middle of the active tab */
.smm-tab::before {
    position: absolute;
    top: 8px;
    bottom: 8px;
    width: 3px;
    content: "";
    background-color: #fff;
    border-radius: 0 3px 3px 0;
    transform: scaleY(0);
    transition: transform .2s ease;
    inset-inline-start: 0;
}

[dir="rtl"] .smm-tab::before {
    border-radius: 3px 0 0 3px;
}

.smm-ico {
    display: flex;
    flex: 0 0 32px;
    align-items: center;
    justify-content: center;
    height: 32px;
    font-size: 13px;
    color: var(--brand);
    background-color: #fff;
    border-radius: 50%;
    transition: transform .2s ease;
}

.smm-ico img {
    display: block;
    width: 20px;
    height: 20px;
}

.smm-name {
    flex: 1 1 auto;
    min-width: 0;
}

.smm-caret {
    flex: 0 0 auto;
    font-size: 13px;
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity .15s ease, transform .2s ease;
}

[dir="rtl"] .smm-caret {
    transform: translateX(4px) scaleX(-1);
}

.smm-tab:hover {
    color: #fff;
    background-color: rgba(255, 255, 255, .06);
}

/* the blue used on the package cards and the Request a Quote button */
.smm-cat.is-active > .smm-tab {
    font-weight: 600;
    color: #fff;
    background-color: var(--brand);
}

.smm-cat.is-active > .smm-tab::before {
    transform: scaleY(1);
}

.smm-cat.is-active > .smm-tab .smm-ico {
    transform: scale(1.06);
}

.smm-cat.is-active > .smm-tab .smm-caret {
    opacity: 1;
    transform: none;
}

[dir="rtl"] .smm-cat.is-active > .smm-tab .smm-caret {
    transform: scaleX(-1);
}

.smm-tab:focus {
    outline: 0;
}

.smm-tab:focus-visible {
    outline: 2px solid #fff;
    outline-offset: -3px;
}

/* stops above the "View all services" row */
.smm-links {
    position: absolute;
    top: 0;
    bottom: 48px;
    padding: 12px 18px;
    margin: 0;
    overflow-y: auto;
    list-style: none;
    visibility: hidden;
    opacity: 0;
    transition: opacity .15s ease;
    inset-inline-start: 230px;
    inset-inline-end: 0;
}

/* inherit, not visible: a visible child of the closed panel still catches the mouse and opens the menu */
.smm-cat.is-active > .smm-links {
    visibility: inherit;
    opacity: 1;
}

body .main-menu .smm-links li {
    display: block;
}

/* services step in one after another when a category opens */
.smm-cat.is-active > .smm-links li {
    animation: smmStep .28s ease both;
}

.smm-cat.is-active > .smm-links li:nth-child(2) {
    animation-delay: .04s;
}

.smm-cat.is-active > .smm-links li:nth-child(3) {
    animation-delay: .08s;
}

.smm-cat.is-active > .smm-links li:nth-child(n+4) {
    animation-delay: .12s;
}

@keyframes smmStep {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

body .main-menu .smm-links li a {
    display: block;
    padding: 9px 12px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.45;
    color: rgba(255, 255, 255, .88);
    text-transform: none;
    border-radius: 8px;
    transition: color .15s ease, background-color .15s ease, padding .15s ease;
}

body .main-menu .smm-links li a::before,
body .main-menu .smm-links li a::after {
    display: none;
}

body .main-menu .smm-links li a:hover {
    padding-inline-start: 16px;
    color: #fff;
    background-color: rgba(255, 255, 255, .1);
}

body .main-menu .smm-links li a.active {
    font-weight: 500;
    color: #fff;
    background-color: rgba(255, 255, 255, .1);
}

body .main-menu .smm-links li a:focus-visible {
    outline: 2px solid #fff;
    outline-offset: -2px;
}

body .main-menu a.smm-all {
    position: absolute;
    bottom: 0;
    display: flex;
    gap: 8px;
    align-items: center;
    height: 48px;
    padding: 0 30px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    color: #fff;
    text-transform: none;
    border-top: 1px solid rgba(255, 255, 255, .1);
    inset-inline-start: 230px;
    inset-inline-end: 0;
}

body .main-menu a.smm-all::before,
body .main-menu a.smm-all::after {
    display: none;
}

body .main-menu a.smm-all i {
    font-size: 11px;
    transition: transform .2s ease;
}

[dir="rtl"] .main-menu a.smm-all i {
    transform: scaleX(-1);
}

body .main-menu a.smm-all:hover {
    color: #fff;
    background-color: rgba(255, 255, 255, .06);
}

body .main-menu a.smm-all:hover i {
    transform: translateX(4px);
}

[dir="rtl"] .main-menu a.smm-all:hover i {
    transform: translateX(-4px) scaleX(-1);
}

body .main-menu a.smm-all:focus-visible {
    outline: 2px solid #fff;
    outline-offset: -3px;
}

/* tall over the hero, tighter once the bar is sticky; white sweeps across on hover */
body .main-menu li a.boxed-btn {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 12px 12px;
    padding-inline-start: 22px;
    margin: 0;
    margin-inline-start: 14px;
    font-size: 14px !important;
    font-weight: 600;
    line-height: 22px;
    text-transform: uppercase;
    background-image: linear-gradient(#fff, #fff);
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 0 100%;
    border: 0;
    border-radius: 6px;
    box-shadow: 0 8px 22px rgba(10, 24, 40, .28);
    transition: color .25s ease, background-size .3s ease, box-shadow .25s ease, padding .25s ease;
}

[dir="rtl"] .main-menu li a.boxed-btn {
    background-position: right center;
}

body .main-menu li a.boxed-btn:hover,
body .main-menu li:hover > a.boxed-btn {
    background-size: 100% 100%;
    box-shadow: 0 10px 26px rgba(10, 24, 40, .38);
}

.hn-cta-ico {
    display: flex;
    flex: 0 0 32px;
    align-items: center;
    justify-content: center;
    height: 32px;
    font-size: 12px;
    color: var(--brand);
    background-color: #fff;
    border-radius: 50%;
    transition: color .25s ease, background-color .25s ease;
}

.hn-cta-ico i {
    transition: transform .25s ease;
}

[dir="rtl"] .hn-cta-ico i {
    transform: scaleX(-1);
}

body .main-menu li a.boxed-btn:hover .hn-cta-ico {
    color: #fff;
    background-color: var(--brand);
}

body .main-menu li a.boxed-btn:hover .hn-cta-ico i {
    transform: translateX(2px);
}

[dir="rtl"] .main-menu li a.boxed-btn:hover .hn-cta-ico i {
    transform: translateX(-2px) scaleX(-1);
}

body .sticky-navbar .main-menu li a.boxed-btn {
    padding: 6px 7px;
    padding-inline-start: 18px;
}

body .main-menu li a.boxed-btn:focus-visible {
    outline-offset: 2px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    body .header-area {
        --nav-x: 7px;
        --hn-half: 465px;
    }
    body .main-menu > li > a,
    body .main-menu > li > a.dropbtn {
        font-size: 13px !important;
        letter-spacing: 0;
    }
    body .main-menu li a.boxed-btn,
    body .sticky-navbar .main-menu li a.boxed-btn {
        gap: 8px;
        padding: 6px 7px;
        padding-inline-start: 12px;
        margin-inline-start: 6px;
        font-size: 13px !important;
    }
    .hn-cta-ico {
        flex-basis: 26px;
        height: 26px;
        font-size: 11px;
    }
}

@media only screen and (max-width: 991px) {
    body .header-area {
        --hn-half: 50%;
    }
    body .support-bar-area {
        padding: 8px 0;
    }
    body .sticky-navbar .header-navbar::before {
        animation: none;
    }
    body .support-contact-info {
        margin-bottom: 4px;
    }
    body .support-bar-area .address {
        margin-inline-end: 14px;
    }
    body .support-bar-area ul.social-links li:first-child {
        margin-inline-start: 0;
    }
    body .hn-menu-col {
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }
    body .logo-wrapper {
        padding-top: 8px;
        padding-bottom: 8px;
    }
    body .logo-wrapper img {
        max-height: 46px;
    }
    body .slicknav_btn {
        width: 44px;
        height: 44px;
        padding: 11px 9px;
        margin: 8px 0;
        border-color: rgba(255, 255, 255, .45);
        border-radius: 6px;
    }
    body .slicknav_menu .slicknav_icon-bar {
        background-color: #fff;
        box-shadow: none;
    }
    body ul.slicknav_nav,
    body .sticky-navbar ul.slicknav_nav {
        top: 100%;
        max-height: calc(100vh - 130px);
        padding: 8px;
        overflow-y: auto;
        text-align: start;
        border-radius: 0 0 10px 10px;
        box-shadow: 0 16px 36px rgba(10, 30, 45, .28);
    }
    body .slicknav_nav a,
    body .slicknav_nav .slicknav_row,
    body ul.slicknav_nav li a.boxed-btn {
        padding: 12px 14px;
        border-radius: 6px;
    }
    body .slicknav_nav ul.dropdown-lists {
        max-height: none;
        margin: 2px 8px 6px;
        overflow-y: visible;
        background-color: rgba(255, 255, 255, .06);
        border-radius: 6px;
    }
    body .slicknav_nav .service-title {
        display: block;
        padding: 12px 14px 4px;
        font-size: 13px;
        font-weight: 600;
        color: rgba(255, 255, 255, .6);
    }
    body ul.slicknav_nav li a.boxed-btn {
        margin-top: 6px;
        font-weight: 600;
        text-align: center;
        background-color: #fff;
    }
    body ul.slicknav_nav .hn-cta-ico {
        display: none;
    }
}

/*---------------------------
** Footer: brand, links and newsletter in equal thirds, then a contact band, then copyright
---------------------------*/
body .footer-section {
    background-image: radial-gradient(760px 420px at 100% 0, rgba(255, 255, 255, .09), transparent 70%);
}

body .top-footer-section {
    padding: 68px 0 40px;
    border-bottom: 0;
}

body .footer-section h2, body .footer-section .footer-title {
    margin-bottom: 20px;
    color: #fff;
}

body .footer-section .footer-txt {
    max-width: 330px;
    margin: 18px 0 22px;
    font-size: 14px;
    line-height: 1.7;
}

.ft-social {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.ft-social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    font-size: 14px;
    color: #fff;
    text-decoration: none;
    background-color: rgba(255, 255, 255, .1);
    border-radius: 50%;
    transition: color .15s ease, background-color .15s ease;
}

.ft-social a:hover {
    color: var(--navy);
    background-color: #fff;
}

/* seven short links read better in two columns than one long one */
@media only screen and (min-width: 1200px) {
    body ul.footer-links {
        column-count: 2;
        column-gap: 24px;
    }
}

body ul.footer-links li {
    margin-bottom: 12px;
    break-inside: avoid;
}

body ul.footer-links li a {
    padding-inline-start: 0;
    padding-left: 0;
    line-height: 1.5;
    transition: color .15s ease;
}

body ul.footer-links li a::after {
    display: none;
}

body ul.footer-links li a:hover {
    color: #fff;
    text-decoration: underline;
    transform: none;
}

body .footer-newsletter {
    margin-top: 0;
}

body .footer-newsletter p {
    margin-bottom: 14px;
    line-height: 1.6;
}

body .footer-newsletter .err-email {
    margin-top: 8px;
}

body .footer-newsletter .err-email:empty {
    display: none;
}

/* wraps to two lines only when the column is too narrow for both */
.ft-news-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

body .footer-newsletter input[type="email"] {
    flex: 1 1 170px;
    min-width: 0;
    height: 46px;
    padding: 0 16px;
    font-size: 14px;
    color: #fff;
    background-color: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 8px;
}

body .footer-newsletter input[type="email"]:focus {
    border-color: #fff;
    outline: 0;
}

body .footer-newsletter input[type="email"]::placeholder {
    color: rgba(255, 255, 255, .75);
}

body .footer-newsletter button[type="submit"] {
    flex: 0 0 auto;
    height: 46px;
    padding: 0 20px;
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--navy);
    text-transform: none;
    background-color: #fff;
    border: 0;
    border-radius: 8px;
}

body .footer-newsletter button[type="submit"]:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* contact band */
.ft-contact {
    margin-top: 44px;
}

.ft-contact-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: 0;
    margin: 0;
    list-style: none;
    background-color: rgba(255, 255, 255, .07);
    border-radius: 14px;
}

.ft-contact-list > li {
    display: flex;
    gap: 14px;
    align-items: center;
    min-width: 0;
    padding: 20px 26px;
}

.ft-contact-list > li + li {
    border-inline-start: 1px solid rgba(255, 255, 255, .1);
}

.ft-contact-list i {
    display: flex;
    flex: 0 0 42px;
    align-items: center;
    justify-content: center;
    height: 42px;
    font-size: 15px;
    color: #fff;
    background-color: var(--brand);
    border-radius: 50%;
}

.ft-contact-text {
    min-width: 0;
    font-size: 14px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.ft-contact-label {
    display: block;
    font-weight: 600;
    color: #fff;
}

.ft-contact-text a {
    display: block;
    color: inherit;
}

.ft-contact-text a:hover {
    color: #fff;
    text-decoration: underline;
}

.ft-social a:focus-visible,
.ft-contact-text a:focus-visible,
body ul.footer-links li a:focus-visible,
.copyright-section a:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

body .copyright-section {
    padding: 20px 0;
    font-size: 13px;
    line-height: 1.6;
    text-align: start;
    border-top: 1px solid rgba(255, 255, 255, .1);
}

body .copyright-section p {
    margin: 0;
}

body .copyright-section a {
    color: #fff;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .ft-contact-list > li {
        padding: 18px;
    }
}

@media only screen and (max-width: 991px) {
    body .footer-section .col-lg-4 {
        margin-bottom: 28px;
    }
    body .top-footer-section {
        padding: 52px 0 32px;
    }
    .ft-contact {
        margin-top: 4px;
    }
    .ft-contact-list {
        grid-template-columns: minmax(0, 1fr);
    }
    .ft-contact-list > li {
        padding: 16px 20px;
    }
    .ft-contact-list > li + li {
        border-inline-start: 0;
        border-top: 1px solid rgba(255, 255, 255, .1);
    }
}

@media (prefers-reduced-motion: reduce) {
    body .sticky-navbar,
    body .sticky-navbar .header-navbar::before,
    .smm-cat.is-active > .smm-links li {
        animation: none;
    }
    body .main-menu > li > a,
    body .main-menu li.dropdown ul.dropdown-lists,
    body .main-menu li.dropdown ul.dropdown-lists li a,
    body .mega-dropdown-content,
    .smm-tab,
    .smm-tab::before,
    .smm-ico,
    .smm-caret,
    .smm-links,
    body .main-menu .smm-links li a,
    body .main-menu a.smm-all i,
    body .main-menu li a.boxed-btn,
    .hn-cta-ico,
    .hn-cta-ico i,
    body ul.language-dropdown,
    .ft-social a,
    body ul.footer-links li a {
        transition: none;
    }
}

/*---------------------------
** Sitemap (sm-*)
---------------------------*/
.sm-section {
    display: block;
    padding: 90px 0 100px;
    background-color: #f7f9fb;
}

.sm-top {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

.sm-card {
    padding: 30px 32px;
    background-color: #fff;
    border: 1px solid #e8edf2;
    border-radius: 16px;
}

/* the one filled panel: these are the pages most visitors came for */
.sm-card-lead {
    background-color: var(--sm-brand);
    border-color: var(--sm-brand);
}

.sm-title {
    margin: 0 0 16px;
    color: #202631;
}

.sm-card-lead .sm-title {
    color: #fff;
}

.sm-links {
    padding: 0;
    margin: 0;
    list-style: none;
}

.sm-links-split {
    column-count: 2;
    column-gap: 24px;
}

.sm-links li {
    break-inside: avoid;
}

.sm-links a {
    display: inline-block;
    padding: 5px 0;
    font-size: 14px;
    line-height: 1.5;
    color: #475569;
    text-decoration: none;
    transition: color .15s ease;
}

.sm-links a:hover {
    color: var(--sm-brand);
    text-decoration: underline;
}

.sm-card-lead .sm-links a {
    color: rgba(255, 255, 255, .9);
}

.sm-card-lead .sm-links a:hover {
    color: #fff;
}

.sm-links a:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.sm-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.sm-grid .sm-card {
    padding: 26px 24px;
}

.sm-grid .sm-title {
    padding-bottom: 12px;
    margin-bottom: 10px;
    border-bottom: 1px solid #e8edf2;
}

@media only screen and (max-width: 1199px) {
    .sm-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media only screen and (max-width: 991px) {
    .sm-section {
        padding: 70px 0;
    }
    .sm-top {
        grid-template-columns: minmax(0, 1fr);
    }
    .sm-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media only screen and (max-width: 575px) {
    .sm-grid {
        grid-template-columns: minmax(0, 1fr);
    }
    .sm-card {
        padding: 24px 22px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sm-links a {
        transition: none;
    }
}

/*---------------------------
** Legal pages (lg-*): numbered clauses, a stepper index that fills while reading, reading progress bar
---------------------------*/
.lg-section {
    padding: 90px 0 100px;
    background-color: #f7f9fb;
}

/* reading progress: fixed to the top of the screen, above the sticky navbar */
.lg-progress {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1100;
    height: 3px;
    pointer-events: none;
}

.lg-progress span {
    display: block;
    height: 100%;
    background-color: var(--lg-deep);
    transform: scaleX(0);
    transform-origin: left center;
}

[dir="rtl"] .lg-progress span {
    transform-origin: right center;
}

.lg-wrap {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 32px;
    align-items: start;
}

.lg-aside {
    position: sticky;
    top: 86px;
    z-index: 2;
}

.lg-toc {
    padding: 22px 14px 16px;
    background-color: #fff;
    border: 1px solid #e8edf2;
    border-radius: 16px;
}

.lg-toc-head {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 0 12px;
    margin-bottom: 12px;
    list-style: none;
    cursor: default;
    outline: 0;
}

.lg-toc-head::-webkit-details-marker {
    display: none;
}

.lg-toc-title {
    flex: 1 1 auto;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    color: #202631;
}

.lg-toc-count {
    flex: 0 0 auto;
    font-size: 13px;
    font-weight: 500;
    color: var(--lg-brand);
}

.lg-toc-now,
.lg-toc-caret {
    display: none;
}

/* rail runs from the middle of the first number to the middle of the last */
.lg-toc-list {
    position: relative;
    padding: 0;
    margin: 0;
    list-style: none;
}

.lg-toc-list::before,
.lg-toc-list::after {
    position: absolute;
    top: 17px;
    bottom: 17px;
    width: 2px;
    content: "";
    inset-inline-start: 23px;
}

.lg-toc-list::before {
    background-color: #e8edf2;
}

.lg-toc-list::after {
    background-color: var(--lg-brand);
    transform: scaleY(var(--lg-fill, 0));
    transform-origin: center top;
    transition: transform .35s ease;
}

.lg-toc-list a {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 12px;
    align-items: center;
    min-height: 34px;
    padding: 5px 12px;
    font-size: 14px;
    line-height: 1.4;
    color: #475569;
    text-decoration: none;
    transition: color .15s ease;
}

.lg-toc-num {
    display: flex;
    flex: 0 0 24px;
    align-items: center;
    justify-content: center;
    height: 24px;
    font-size: 11px;
    font-weight: 600;
    color: #6c7185;
    background-color: #fff;
    border: 1px solid #d5dce4;
    border-radius: 50%;
    transition: color .2s ease, background-color .2s ease, border-color .2s ease, transform .2s ease;
}

.lg-toc-list a:hover,
.lg-toc-list a.is-current {
    color: var(--lg-brand);
}

.lg-toc-list a.is-current {
    font-weight: 500;
}

.lg-toc-list a:hover .lg-toc-num,
.lg-toc-list a.is-read .lg-toc-num {
    color: var(--lg-brand);
    border-color: var(--lg-brand);
}

.lg-toc-list a.is-current .lg-toc-num {
    color: #fff;
    background-color: var(--lg-brand);
    border-color: var(--lg-brand);
    transform: scale(1.12);
}

.lg-toc-list a:focus-visible,
.lg-toc-head:focus-visible,
.lg-body a:focus-visible,
.lg-intro a:focus-visible,
.lg-print:focus-visible,
.lg-outro a:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.lg-intro {
    padding: 30px 36px;
    margin-bottom: 24px;
    color: #fff;
    background-color: var(--lg-brand);
    border-radius: 16px;
}

.lg-intro p {
    margin: 0;
    font-size: 16px;
    line-height: 1.75;
    color: inherit;
}

.lg-intro p + p {
    margin-top: 10px;
}

.lg-intro a {
    color: inherit;
    text-decoration: underline;
}

.lg-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 22px;
    align-items: center;
    padding: 16px 0 0;
    margin: 18px 0 0;
    font-size: 13px;
    list-style: none;
    border-top: 1px solid rgba(255, 255, 255, .2);
}

.lg-meta li {
    display: flex;
    align-items: center;
}

.lg-meta i {
    margin-inline-end: 7px;
    opacity: .8;
}

.lg-meta li:last-child {
    margin-inline-start: auto;
}

.lg-print {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 500;
    color: #fff;
    cursor: pointer;
    background-color: transparent;
    border: 1px solid rgba(255, 255, 255, .45);
    border-radius: 6px;
    transition: color .15s ease, background-color .15s ease, border-color .15s ease;
}

.lg-print:hover {
    color: var(--lg-brand);
    background-color: #fff;
    border-color: #fff;
}

.lg-clauses {
    padding: 8px 36px;
    margin: 0;
    list-style: none;
    background-color: #fff;
    border: 1px solid #e8edf2;
    border-radius: 16px;
}

/* stops a jumped-to clause sliding under the sticky navbar */
.lg-clause {
    display: flex;
    gap: 20px;
    padding: 26px 0;
    scroll-margin-top: 76px;
    outline: 0;
}

.lg-clause + .lg-clause {
    border-top: 1px solid #eef2f6;
}

.lg-num {
    display: flex;
    flex: 0 0 38px;
    align-items: center;
    justify-content: center;
    height: 38px;
    font-size: 14px;
    font-weight: 600;
    color: var(--lg-brand);
    background-color: var(--lg-tint);
    border-radius: 10px;
    transition: color .25s ease, background-color .25s ease, transform .25s ease;
}

.lg-clause.is-current .lg-num {
    color: #fff;
    background-color: var(--lg-brand);
    transform: scale(1.06);
}

.lg-body {
    min-width: 0;
}

.lg-title {
    margin: 6px 0 8px;
    color: #202631;
    transition: color .25s ease;
}

.lg-clause.is-current .lg-title {
    color: var(--lg-brand);
}

.lg-body p {
    margin: 0;
    font-size: 15px;
    line-height: 1.75;
    color: #475569;
    overflow-wrap: anywhere;
}

.lg-body a {
    color: var(--lg-brand);
    text-decoration: underline;
}

.lg-outro {
    display: flex;
    gap: 24px;
    align-items: center;
    justify-content: space-between;
    padding: 28px 36px;
    margin-top: 24px;
    color: #fff;
    background-color: var(--lg-deep);
    border-radius: 16px;
}

.lg-outro-text p {
    margin: 0;
    font-size: 15px;
    line-height: 1.7;
    color: inherit;
}

.lg-outro-btn {
    flex: 0 0 auto;
    padding: 12px 22px;
    font-size: 14px;
    font-weight: 600;
    line-height: 22px;
    color: var(--lg-deep);
    text-decoration: none;
    background-color: #fff;
    border-radius: 8px;
    transition: color .15s ease, background-color .15s ease;
}

.lg-outro-btn:hover {
    color: #fff;
    text-decoration: none;
    background-color: var(--lg-brand);
}

/* added by the script, so the copy stays visible without JavaScript */
.lg-anim .lg-reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .55s ease, transform .55s ease;
}

.lg-anim .lg-reveal.is-in {
    opacity: 1;
    transform: none;
}

/* clauses shift their contents, not themselves, so jumping to a clause lands on its exact position */
.lg-anim .lg-clause.lg-reveal {
    transform: none;
}

.lg-anim .lg-clause.lg-reveal > * {
    transition: transform .55s ease, color .25s ease, background-color .25s ease;
}

.lg-anim .lg-clause.lg-reveal:not(.is-in) > * {
    transform: translateY(18px);
}

@media only screen and (max-width: 1199px) {
    .lg-wrap {
        grid-template-columns: 260px minmax(0, 1fr);
        gap: 24px;
    }
    .lg-intro,
    .lg-outro {
        padding: 26px 28px;
    }
    .lg-clauses {
        padding: 6px 28px;
    }
}

/* block layout: a grid would confine the sticky chip to its own row */
@media only screen and (max-width: 991px) {
    .lg-section {
        padding: 56px 0 70px;
    }
    .lg-wrap {
        display: block;
    }
    .lg-aside {
        top: 80px;
        margin-bottom: 16px;
    }
    .lg-toc {
        padding: 0;
        box-shadow: 0 10px 26px rgba(10, 30, 45, .1);
    }
    .lg-toc-head {
        min-height: 52px;
        padding: 8px 16px;
        margin: 0;
        cursor: pointer;
    }
    .lg-toc-title {
        display: none;
    }
    .lg-toc-now {
        display: block;
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden;
        font-size: 14px;
        font-weight: 600;
        color: #202631;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .lg-toc-caret {
        display: block;
        font-size: 11px;
        color: #6c7185;
        transition: transform .2s ease;
    }
    .lg-toc[open] .lg-toc-caret {
        transform: rotate(180deg);
    }
    .lg-toc nav {
        max-height: calc(100vh - 170px);
        padding: 4px 6px 12px;
        overflow-y: auto;
        border-top: 1px solid #eef2f6;
    }
    .lg-clause {
        scroll-margin-top: 142px;
    }
}

@media only screen and (max-width: 575px) {
    .lg-intro,
    .lg-outro {
        padding: 22px;
    }
    .lg-intro p {
        font-size: 15px;
    }
    .lg-clauses {
        padding: 4px 20px;
    }
    .lg-clause {
        gap: 14px;
        padding: 22px 0;
    }
    .lg-num {
        flex-basis: 32px;
        height: 32px;
        font-size: 13px;
    }
    .lg-title {
        margin-top: 3px;
    }
    .lg-outro {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (prefers-reduced-motion: reduce) {
    .lg-toc-list::after,
    .lg-toc-list a,
    .lg-toc-num,
    .lg-toc-caret,
    .lg-print,
    .lg-num,
    .lg-title,
    .lg-outro-btn {
        transition: none;
    }
    .lg-toc-list a.is-current .lg-toc-num,
    .lg-clause.is-current .lg-num {
        transform: none;
    }
}

@media print {
    .header-area,
    .breadcrumb-area,
    .footer-section,
    .back-to-top,
    .lg-progress,
    .lg-aside,
    .lg-meta,
    .lg-outro-btn {
        display: none !important;
    }
    .lg-section {
        padding: 0;
        background-color: #fff;
    }
    .lg-wrap {
        display: block;
    }
    .lg-anim .lg-reveal,
    .lg-anim .lg-clause.lg-reveal:not(.is-in) > * {
        opacity: 1;
        transform: none;
    }
    .lg-intro,
    .lg-outro {
        padding: 0;
        color: #000;
        background-color: transparent;
    }
    .lg-clauses {
        padding: 0;
        border: 0;
    }
    .lg-clause {
        break-inside: avoid;
    }
}

/*---------------------------
** Home intro: a code editor window. Features are its tabs, the intro copy is the open file,
** the photo is the preview pane, and a status bar closes it off.
** The -213px overlap comes from the base .intro-section rule and is left alone,
** so the hero banner and its ripple keep their size.
** "body" prefix outranks responsive.css; !important beats the feature's inline colour.
---------------------------*/
/* faint dot grid on the white area around the window; the hero paints over its upper part */
.intro-section {
    padding-bottom: 56px;
    background-image: radial-gradient(rgba(54, 92, 138, .16) 1.2px, transparent 1.2px);
    background-size: 22px 22px;
}

.cw-window {
    position: relative;
    z-index: 2;
    overflow: hidden;
    background-color: var(--in-deep);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 16px;
    box-shadow: 0 40px 90px rgba(10, 24, 40, .4), 0 8px 24px rgba(10, 24, 40, .18), inset 0 1px 0 rgba(255, 255, 255, .1);
}

/* one rise as the window scrolls into view; added by the script */
.cw-rise {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .7s ease, transform .7s cubic-bezier(.22, .61, .36, 1);
}

.cw-rise.is-in {
    opacity: 1;
    transform: none;
}

.cw-bar {
    display: flex;
    align-items: stretch;
    background-color: rgba(0, 0, 0, .26);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.cw-dots {
    display: flex;
    flex: 0 0 auto;
    gap: 7px;
    align-items: center;
    padding: 18px 20px;
}

.cw-dots i {
    width: 11px;
    height: 11px;
    background-color: rgba(255, 255, 255, .28);
    border-radius: 50%;
}

body .hero-features {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0;
    color: #fff;
}

body .hero-features > .row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    grid-auto-flow: column;
    height: 100%;
    margin: 0;
}

/* a tab: lights up and gets a top edge on hover, like the active file in an editor */
body .single-hero-feature {
    position: relative;
    display: flex;
    flex: none;
    align-items: center;
    width: auto;
    max-width: none;
    padding: 16px 18px;
    background-color: transparent !important;
    border-inline-start: 1px solid rgba(255, 255, 255, .08);
    transition: background-color .2s ease;
}

body .single-hero-feature::after {
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 2px;
    background-color: #fff !important;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .25s ease;
}

body .single-hero-feature:hover,
body .single-hero-feature.is-active {
    background-color: var(--in-deep) !important;
}

body .single-hero-feature:hover::after,
body .single-hero-feature.is-active::after {
    top: 0;
    transform: scaleX(1);
}

.cw-tab {
    padding: 0;
    font: inherit;
    color: inherit;
    text-align: start;
    cursor: pointer;
    background: none;
    border: 0;
}

/* stretches the click area over the whole tab */
.cw-tab::before {
    position: absolute;
    inset: 0;
    content: "";
}

.cw-tab:focus {
    outline: 0;
}

.cw-tab:focus-visible::before {
    outline: 2px solid #fff;
    outline-offset: -3px;
}

/* the editor's close mark, only on the open tab */
body .hero-features i.cw-tab-x {
    position: absolute;
    top: 7px;
    display: none;
    font-size: 10px;
    color: rgba(255, 255, 255, .7);
    pointer-events: none;
    inset-inline-end: 9px;
}

body .single-hero-feature.is-active i.cw-tab-x {
    display: block;
}

body .single-hero-feature .inner-container {
    display: flex;
    gap: 12px;
    align-items: center;
}

body .single-hero-feature .icon-wrapper {
    display: flex;
    flex: 0 0 32px;
    align-items: center;
    justify-content: center;
    height: 32px;
    background-color: rgba(255, 255, 255, .08);
    border-radius: 8px;
    transition: background-color .2s ease;
}

body .single-hero-feature:hover .icon-wrapper,
body .single-hero-feature.is-active .icon-wrapper {
    background-color: var(--in-brand);
}

body .hero-features i {
    font-size: 14px;
    line-height: 1;
    color: #fff;
}

body .hero-features h2,body .hero-features .cw-title {
    margin: 0;
    font-size: 14px;
    line-height: 1.4;
    color: #fff;
}

body .in-row {
    margin: 0;
}

body .in-row > [class*="col-"] {
    padding-right: 0 !important;
    padding-left: 0 !important;
}

/* the open file: line numbers down the side, copy set where the code would be */
body .intro-txt {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    height: 100%;
    min-height: 480px;
    padding: 56px 88px 56px 96px;
    overflow: hidden;
    background: radial-gradient(620px 340px at 85% 0, rgba(54, 92, 138, .42), transparent 72%);
}

/* every pane shares one grid cell, so switching tabs never changes the window's height */
.cw-panes {
    position: relative;
    z-index: 1;
    display: grid;
    width: 100%;
}

.cw-pane {
    grid-area: 1 / 1;
    align-self: center;
    visibility: hidden;
}

.cw-pane.is-active {
    visibility: visible;
}

.cw-pane-intro.is-active .intro-btn,
.cw-pane-body {
    animation: cwPaneIn .4s ease .2s both;
}

@keyframes cwPaneIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

body .cw-pane .cw-desc {
    max-width: 54ch;
    margin: 0 0 28px;
    font-size: 16px;
    line-height: 1.75;
    color: rgba(255, 255, 255, .85);
}

body .intro-txt div.section-summary {
    margin-bottom: 14px;
}

/* soft band on the line being typed */
.cw-line {
    position: absolute;
    right: 0;
    left: 0;
    background-color: rgba(255, 255, 255, .05);
    opacity: 0;
    transition: top .12s ease, opacity .3s ease;
}

.cw-line.is-on {
    opacity: 1;
}

.cw-gutter span.is-current {
    font-weight: 700;
    color: #fff;
}

/* the editor's minimap, as abstract code lines */
.cw-minimap {
    position: absolute;
    top: 22px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 42px;
    opacity: .38;
    inset-inline-end: 18px;
}

.cw-minimap span {
    display: block;
    width: 70%;
    height: 2px;
    background-color: #fff;
    border-radius: 2px;
}

.cw-minimap span:nth-child(3n) {
    width: 92%;
}

.cw-minimap span:nth-child(4n) {
    width: 46%;
    margin-inline-start: 8px;
}

.cw-minimap span:nth-child(5n) {
    width: 30%;
    background-color: var(--in-brand);
}

.cw-minimap span:nth-child(7n) {
    width: 58%;
    margin-inline-start: 16px;
}

/* the preview pane: browser address bar above the photo */
.cw-preview {
    display: flex;
    flex-direction: column;
}

.cw-url {
    display: flex;
    flex: 0 0 auto;
    gap: 8px;
    align-items: center;
    padding: 8px 14px;
    margin: 10px 12px;
    overflow: hidden;
    font-family: ui-monospace, SFMono-Regular, Consolas, Menlo, monospace;
    font-size: 12px;
    line-height: 16px;
    color: rgba(255, 255, 255, .78);
    white-space: nowrap;
    background-color: rgba(255, 255, 255, .08);
    border-radius: 20px;
}

.cw-url i {
    font-size: 10px;
    color: rgba(255, 255, 255, .6);
}

[dir="rtl"] .intro-txt {
    padding: 56px 96px 56px 56px;
}

.cw-gutter {
    position: absolute;
    top: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    width: 56px;
    padding-top: 22px;
    overflow: hidden;
    font-family: ui-monospace, SFMono-Regular, Consolas, Menlo, monospace;
    font-size: 12px;
    line-height: 26px;
    color: rgba(255, 255, 255, .28);
    text-align: end;
    user-select: none;
    background-color: rgba(0, 0, 0, .1);
    inset-inline-start: 0;
}

.cw-gutter span {
    padding-inline-end: 16px;
}

body .intro-txt::before,
body .intro-txt::after {
    display: none;
}

/* the eyebrow reads as a code comment */
body .intro-txt .section-title {
    font-family: ui-monospace, SFMono-Regular, Consolas, Menlo, monospace;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    color: rgba(255, 255, 255, .6);
}

body .intro-txt .section-title::before {
    content: "// ";
}

body .intro-txt .section-summary {
    margin: 14px 0 34px;
    color: #fff;
}

.cw-word {
    display: inline-block;
}

/* letters keep their space while hidden, so the heading never reflows as it types */
.is-typing .cw-char {
    visibility: hidden;
}

.is-typing .cw-char.is-typed {
    position: relative;
    visibility: visible;
}

.cw-char.is-caret::after {
    position: absolute;
    top: 8%;
    bottom: 8%;
    width: 2px;
    margin-inline-start: 2px;
    content: "";
    background-color: #fff;
    animation: cwCaret 1s steps(1) infinite;
}

@keyframes cwCaret {
    50% {
        opacity: 0;
    }
}

body .intro-txt a.intro-btn {
    display: inline-flex;
    gap: 12px;
    align-items: center;
    width: auto;
    height: auto;
    padding: 14px 24px;
    font-size: 14px;
    font-weight: 600;
    line-height: 22px;
    color: var(--in-deep);
    text-align: start;
    background-color: #fff;
    border-radius: 6px;
    box-shadow: 0 10px 26px rgba(0, 0, 0, .28);
    transition: color .2s ease, background-color .2s ease;
}

body .intro-txt a.intro-btn::after {
    display: none;
}

body .intro-txt a.intro-btn span,
body .intro-txt a.intro-btn:hover span {
    margin: 0;
}

.in-btn-ico {
    font-size: 12px;
}

.in-btn-ico i {
    transition: transform .2s ease;
}

[dir="rtl"] .in-btn-ico i {
    transform: scaleX(-1);
}

body .intro-txt a.intro-btn:hover {
    color: #fff;
    background-color: var(--in-brand);
}

body .intro-txt a.intro-btn:hover .in-btn-ico i {
    transform: translateX(4px);
}

[dir="rtl"] .intro-txt a.intro-btn:hover .in-btn-ico i {
    transform: translateX(-4px) scaleX(-1);
}

body .intro-txt a.intro-btn:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

/* the preview pane; navy shows if the photo is missing */
body .intro-bg {
    position: relative;
    flex: 1 1 auto;
    height: auto;
    min-height: 430px;
    background-color: var(--in-deep);
    background-position: center;
}

@media only screen and (min-width: 992px) {
    .cw-preview {
        background-color: rgba(0, 0, 0, .16);
        border-inline-start: 1px solid rgba(255, 255, 255, .08);
    }
}

body .video-play-button::before {
    background: rgba(255, 255, 255, .55);
}

body .video-play-button::after,
body .video-play-button:hover::after {
    background: #fff;
}

body .video-play-button span {
    border-left-color: var(--in-brand);
}

body .video-play-button:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 22px;
}

.cw-status {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 20px;
    align-items: center;
    justify-content: space-between;
    padding: 7px 18px;
    font-family: ui-monospace, SFMono-Regular, Consolas, Menlo, monospace;
    font-size: 12px;
    line-height: 18px;
    color: #fff;
    background-color: var(--in-brand);
}

.cw-status i {
    margin-inline-end: 8px;
}

.cw-status a {
    color: #fff;
}

.cw-status a:hover {
    color: #fff;
    text-decoration: underline;
}

.cw-status a:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

@media only screen and (max-width: 1199px) {
    body .single-hero-feature {
        padding: 14px 12px;
    }
    body .single-hero-feature .inner-container {
        gap: 8px;
    }
    body .hero-features h2,body .hero-features .cw-title {
        font-size: 13px;
    }
    body .intro-txt {
        padding: 48px 36px 48px 80px;
    }
    [dir="rtl"] .intro-txt {
        padding: 48px 80px 48px 36px;
    }
    .cw-gutter {
        width: 48px;
    }
    .cw-minimap {
        display: none;
    }
}

/* tabs open text now, so they stay on small screens as a row that scrolls sideways */
@media only screen and (max-width: 991px) {
    .cw-window {
        margin-top: 24px;
    }
    body .hero-features {
        display: block;
        overflow-x: auto;
        scrollbar-width: none;
        scroll-behavior: smooth;
    }
    body .hero-features::-webkit-scrollbar {
        display: none;
    }
    body .hero-features > .row {
        grid-template-columns: none;
        grid-auto-columns: minmax(200px, 1fr);
        width: max-content;
        min-width: 100%;
    }
    .cw-dots {
        padding: 13px 16px;
    }
    body .intro-txt {
        height: auto;
        min-height: 0;
        padding: 36px 28px 36px 68px;
    }
    [dir="rtl"] .intro-txt {
        padding: 36px 68px 36px 28px;
    }
    body .intro-bg {
        flex: none;
        min-height: 320px;
    }
    .intro-section {
        padding-bottom: 32px;
    }
}

@media only screen and (max-width: 575px) {
    body .intro-txt,
    [dir="rtl"] .intro-txt {
        padding: 30px 20px;
    }
    .cw-gutter,
    .cw-dots {
        display: none;
    }
    body .intro-bg {
        min-height: 260px;
    }
    .cw-status {
        padding: 7px 14px;
        font-size: 11px;
    }
}

@media (prefers-reduced-motion: reduce) {
    body .single-hero-feature,
    body .single-hero-feature::after,
    body .intro-txt a.intro-btn,
    .in-btn-ico i {
        transition: none;
    }
    body .video-play-button::before,
    .cw-char.is-caret::after {
        animation: none;
    }
    .cw-rise {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .cw-line,
    body .single-hero-feature .icon-wrapper {
        transition: none;
    }
    .cw-pane-intro.is-active .intro-btn,
    .cw-pane-body {
        animation: none;
    }
    body .hero-features {
        scroll-behavior: auto;
    }
}

@media print {
    .is-typing .cw-char {
        visibility: visible;
    }
    .cw-rise {
        opacity: 1;
        transform: none;
    }
}

/*---------------------------
** Buttons: one design for the whole site. Add new action buttons to these lists instead of
** styling them per component. Blue on light surfaces, white on dark ones, ghost for second actions.
** A colour sweeps across on hover and the arrow circle answers it.
** Each :is() takes the specificity of its strongest entry, which is what outranks the older
** per-component rules. The navbar button keeps its own compact rules further up.
---------------------------*/
html body :is(.fm-card button.fm-submit, main a.boxed-btn, a.pk-btn, button.fm-submit, a.ab-btn, a.pcs-cta, a.pcs-banner-btn, a.pricing-btn, a.hero-boxed-btn, a.intro-btn, a.sl-cta-btn, a.lg-outro-btn) {
    --b-bg: var(--wc-brand);
    --b-fg: #fff;
    --b-sweep: var(--wc-deep);
    --b-hover-fg: #fff;
    --b-ico-bg: #fff;
    --b-ico-fg: var(--wc-brand);
    --b-hover-ico-bg: #fff;
    --b-hover-ico-fg: var(--wc-deep);
    position: relative;
    display: inline-flex;
    gap: 14px;
    align-items: center;
    justify-content: center;
    width: auto;
    height: 52px;
    padding: 0 8px;
    padding-inline-start: 24px;
    font-family: 'Poppins', 'Poppins Fallback', sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 22px;
    color: var(--b-fg);
    text-align: start;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0;
    cursor: pointer;
    background-color: var(--b-bg);
    background-image: linear-gradient(var(--b-sweep), var(--b-sweep));
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 0 100%;
    border: 0;
    border-radius: 8px;
    box-shadow: 0 10px 26px rgba(10, 24, 40, .22);
    transition: color .3s ease, background-size .35s ease, box-shadow .3s ease, transform .3s ease;
}

/* dark surfaces */
html body :is(.fm-card a.hero-boxed-btn, a.hero-boxed-btn, a.intro-btn, a.sl-cta-btn, a.lg-outro-btn, a.abp-btn-light, a.contact-btn) {
    --b-bg: #fff;
    --b-fg: var(--wc-deep);
    --b-sweep: var(--wc-brand);
    --b-ico-bg: var(--wc-brand);
    --b-ico-fg: #fff;
    --b-hover-ico-fg: var(--wc-brand);
}

/* second action beside a primary one */
html body :is(.fm-card a.ab-btn-ghost, a.ab-btn-ghost) {
    --b-bg: transparent;
    --b-fg: var(--wc-brand);
    --b-sweep: var(--wc-brand);
    --b-ico-bg: var(--wc-brand);
    --b-ico-fg: #fff;
    --b-hover-ico-fg: var(--wc-brand);
    box-shadow: inset 0 0 0 2px var(--wc-brand);
}

html body :is(.fm-card a.hero-boxed-btn, a.hero-boxed-btn) {
    height: 60px;
    padding: 0 11px;
    padding-inline-start: 28px;
}

/* these fill their card, so text and arrow sit at opposite ends */
html body :is(.fm-card a.pk-btn, a.pk-btn, a.pcs-cta) {
    justify-content: space-between;
    width: 100%;
}

[dir="rtl"] body :is(.fm-card button.fm-submit, main a.boxed-btn, a.pk-btn, button.fm-submit, a.ab-btn, a.pcs-cta, a.pcs-banner-btn, a.pricing-btn, a.hero-boxed-btn, a.intro-btn, a.sl-cta-btn, a.lg-outro-btn) {
    background-position: right center;
}

html body :is(.fm-card button.fm-submit, main a.boxed-btn, a.pk-btn, button.fm-submit, a.ab-btn, a.pcs-cta, a.pcs-banner-btn, a.pricing-btn, a.hero-boxed-btn, a.intro-btn, a.sl-cta-btn, a.lg-outro-btn)::before {
    display: none;
}

html body :is(.fm-card button.fm-submit, main a.boxed-btn, a.pk-btn, button.fm-submit, a.ab-btn, a.pcs-cta, a.pcs-banner-btn, a.pricing-btn, a.hero-boxed-btn, a.intro-btn, a.sl-cta-btn, a.lg-outro-btn)::after {
    position: static;
    display: flex;
    flex: 0 0 36px;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    font-family: 'Font Awesome 5 Free';
    font-size: 13px;
    font-weight: 900;
    line-height: 1;
    color: var(--b-ico-fg);
    content: "\f061";
    /* inherit, not visible: a visible circle would show through a hidden tab pane or menu */
    visibility: inherit;
    background-color: var(--b-ico-bg);
    border: 0;
    border-radius: 50%;
    opacity: 1;
    transition: color .3s ease, background-color .3s ease, transform .3s ease;
}

[dir="rtl"] body :is(.fm-card button.fm-submit, main a.boxed-btn, a.pk-btn, button.fm-submit, a.ab-btn, a.pcs-cta, a.pcs-banner-btn, a.pricing-btn, a.hero-boxed-btn, a.intro-btn, a.sl-cta-btn, a.lg-outro-btn)::after {
    content: "\f060";
}

/* the circle replaces arrows some templates print themselves */
html body :is(.fm-card a.ab-btn, a.ab-btn, a.pcs-cta, a.pcs-banner-btn, a.intro-btn, a.sl-cta-btn) > :is(i.fa-arrow-right, .in-btn-ico) {
    display: none;
}

html body :is(.fm-card a.boxed-btn, main a.boxed-btn, a.intro-btn, a.sl-cta-btn) > span:not(.sr-only) {
    margin: 0;
    transition: none;
}

html body :is(.fm-card button.fm-submit, main a.boxed-btn, a.pk-btn, button.fm-submit, a.ab-btn, a.pcs-cta, a.pcs-banner-btn, a.pricing-btn, a.hero-boxed-btn, a.intro-btn, a.sl-cta-btn, a.lg-outro-btn):hover {
    color: var(--b-hover-fg);
    text-decoration: none;
    background-color: var(--b-bg);
    background-size: 100% 100%;
    box-shadow: 0 14px 32px rgba(10, 24, 40, .3);
    transform: translateY(-2px);
}

html body :is(.fm-card button.fm-submit, main a.boxed-btn, a.pk-btn, button.fm-submit, a.ab-btn, a.pcs-cta, a.pcs-banner-btn, a.pricing-btn, a.hero-boxed-btn, a.intro-btn, a.sl-cta-btn, a.lg-outro-btn):hover::after {
    color: var(--b-hover-ico-fg);
    background-color: var(--b-hover-ico-bg);
    transform: translateX(3px);
}

[dir="rtl"] body :is(.fm-card button.fm-submit, main a.boxed-btn, a.pk-btn, button.fm-submit, a.ab-btn, a.pcs-cta, a.pcs-banner-btn, a.pricing-btn, a.hero-boxed-btn, a.intro-btn, a.sl-cta-btn, a.lg-outro-btn):hover::after {
    transform: translateX(-3px);
}

html body :is(.fm-card button.fm-submit, main a.boxed-btn, a.pk-btn, button.fm-submit, a.ab-btn, a.pcs-cta, a.pcs-banner-btn, a.pricing-btn, a.hero-boxed-btn, a.intro-btn, a.sl-cta-btn, a.lg-outro-btn):focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

/* compact forms: side by side with an input, no room for the arrow */
html body :is(.sl-aside .subscribe-form input[type="submit"], .subscribe-form input[type="submit"], .footer-newsletter button[type="submit"]) {
    height: 46px;
    font-family: 'Poppins', 'Poppins Fallback', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--wc-deep);
    text-transform: uppercase;
    cursor: pointer;
    background-color: #fff;
    background-image: linear-gradient(var(--wc-brand), var(--wc-brand));
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 0 100%;
    border: 0;
    border-radius: 8px;
    transition: color .3s ease, background-size .35s ease;
}

html body :is(.sl-aside .subscribe-form input[type="submit"], .subscribe-form input[type="submit"], .footer-newsletter button[type="submit"]):hover {
    color: #fff;
    background-color: #fff;
    background-size: 100% 100%;
}

/* sidebar form: its input is white, so the button stays blue to read as the action */
html body :is(.sl-aside .subscribe-form input[type="submit"], .subscribe-form input[type="submit"]) {
    color: #fff;
    background-color: var(--wc-brand);
    background-image: linear-gradient(#fff, #fff);
}

html body :is(.sl-aside .subscribe-form input[type="submit"], .subscribe-form input[type="submit"]):hover {
    color: var(--wc-deep);
    background-color: var(--wc-brand);
}

/* the portfolio card's arrow is the same circle on its own */
body .pf-card-btn {
    color: var(--wc-deep);
}

/* the card's image label, the same shape at a smaller size */
body .pj-more {
    border-radius: 8px;
    text-transform: uppercase;
}

/* text links: one size */
body .sv-card-link,
body .nw-card-link,
body .ab-link {
    font-size: 14px;
}

body .main-menu li a.boxed-btn {
    border-radius: 8px;
}

@media only screen and (max-width: 575px) {
    html body :is(.fm-card a.lg-outro-btn, a.lg-outro-btn, a.sl-cta-btn, a.ab-btn, a.pcs-banner-btn) {
        max-width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    html body :is(.fm-card button.fm-submit, main a.boxed-btn, a.pk-btn, button.fm-submit, a.ab-btn, a.pcs-cta, a.pcs-banner-btn, a.pricing-btn, a.hero-boxed-btn, a.intro-btn, a.sl-cta-btn, a.lg-outro-btn),
    html body :is(.fm-card button.fm-submit, main a.boxed-btn, a.pk-btn, button.fm-submit, a.ab-btn, a.pcs-cta, a.pcs-banner-btn, a.pricing-btn, a.hero-boxed-btn, a.intro-btn, a.sl-cta-btn, a.lg-outro-btn)::after,
    html body :is(.sl-aside .subscribe-form input[type="submit"], .subscribe-form input[type="submit"], .footer-newsletter button[type="submit"]) {
        transition: none;
    }
    html body :is(.fm-card button.fm-submit, main a.boxed-btn, a.pk-btn, button.fm-submit, a.ab-btn, a.pcs-cta, a.pcs-banner-btn, a.pricing-btn, a.hero-boxed-btn, a.intro-btn, a.sl-cta-btn, a.lg-outro-btn):hover,
    html body :is(.fm-card button.fm-submit, main a.boxed-btn, a.pk-btn, button.fm-submit, a.ab-btn, a.pcs-cta, a.pcs-banner-btn, a.pricing-btn, a.hero-boxed-btn, a.intro-btn, a.sl-cta-btn, a.lg-outro-btn):hover::after {
        transform: none;
    }
}

/*---------------------------
** Home projects (pj-*): a large preview beside a project list.
** The list's progress bar paces the rotation; hovering pauses it.
---------------------------*/
body .pj-section {
    padding: 100px 0;
    background-color: var(--pj-deep);
    background-image: radial-gradient(760px 460px at 88% 0, rgba(255, 255, 255, .08), transparent 70%);
}

.pj-head {
    display: flex;
    gap: 32px;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 44px;
}

.pj-head-txt {
    max-width: 640px;
}

body .pj-section .section-title {
    color: rgba(255, 255, 255, .8);
}

body .pj-section .section-summary {
    margin: 12px 0 0;
    color: #fff;
}

.pj-all {
    display: inline-flex;
    flex: 0 0 auto;
    gap: 10px;
    align-items: center;
    padding-bottom: 6px;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    border-bottom: 2px solid rgba(255, 255, 255, .35);
    transition: border-color .2s ease;
}

.pj-all:hover {
    color: #fff;
    text-decoration: none;
    border-bottom-color: #fff;
}

.pj-all i {
    font-size: 12px;
    transition: transform .2s ease;
}

.pj-all:hover i {
    transform: translateX(4px);
}

[dir="rtl"] .pj-all i {
    transform: scaleX(-1);
}

[dir="rtl"] .pj-all:hover i {
    transform: translateX(-4px) scaleX(-1);
}

.pj-show {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    overflow: hidden;
    background-color: rgba(255, 255, 255, .05);
    border-radius: 16px;
    box-shadow: 0 30px 70px rgba(5, 18, 32, .4);
}

.pj-stage {
    position: relative;
    overflow: hidden;
    aspect-ratio: 3 / 2;
    background-color: rgba(0, 0, 0, .2);
}

.pj-slide {
    position: absolute;
    inset: 0;
    display: block;
    visibility: hidden;
    opacity: 0;
    transition: opacity .45s ease, visibility .45s;
}

.pj-slide.is-active {
    z-index: 1;
    visibility: visible;
    opacity: 1;
}

.pj-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.04);
    transition: transform 1.2s cubic-bezier(.22, .61, .36, 1);
}

.pj-slide.is-active img {
    transform: none;
}

.pj-more {
    position: absolute;
    bottom: 20px;
    display: inline-flex;
    gap: 10px;
    align-items: center;
    padding: 11px 18px;
    font-size: 13px;
    font-weight: 600;
    line-height: 18px;
    color: var(--pj-deep);
    background-color: #fff;
    border-radius: 6px;
    box-shadow: 0 10px 26px rgba(5, 18, 32, .35);
    transition: color .2s ease, background-color .2s ease;
    inset-inline-end: 20px;
}

[dir="rtl"] .pj-more i {
    transform: scaleX(-1);
}

.pj-slide:hover .pj-more {
    color: #fff;
    background-color: var(--pj-brand);
}

/* takes its height from the stage and scrolls inside it */
.pj-list-wrap {
    position: relative;
}

.pj-list {
    position: absolute;
    inset: 0;
    padding: 0;
    margin: 0;
    overflow-y: auto;
    list-style: none;
}

.pj-list::-webkit-scrollbar {
    width: 4px;
}

.pj-list::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, .28);
    border-radius: 4px;
}

@supports not selector(::-webkit-scrollbar) {
    .pj-list {
        scrollbar-color: rgba(255, 255, 255, .28) transparent;
        scrollbar-width: thin;
    }
}

.pj-row a {
    position: relative;
    display: block;
    padding: 10px 22px 11px;
    color: #fff;
    text-decoration: none;
    border-top: 1px solid rgba(255, 255, 255, .08);
    transition: background-color .2s ease;
}

.pj-row:first-child a {
    border-top: 0;
}

.pj-row.is-active a {
    background-color: var(--pj-brand);
}

.pj-row a:focus-visible {
    outline: 2px solid #fff;
    outline-offset: -3px;
}

body .pj-name {
    margin: 0;
    overflow: hidden;
    color: #fff;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pj-type {
    display: block;
    overflow: hidden;
    font-size: 12px;
    line-height: 1.4;
    color: rgba(255, 255, 255, .7);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pj-row.is-active .pj-type {
    color: rgba(255, 255, 255, .9);
}

.pj-bar {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 2px;
    background-color: #fff;
    transform: scaleX(0);
    transform-origin: left center;
}

[dir="rtl"] .pj-bar {
    transform-origin: right center;
}

@keyframes pjFill {
    to {
        transform: scaleX(1);
    }
}

.pj-show.is-running .pj-row.is-active .pj-bar {
    animation: pjFill 6s linear both;
}

.pj-show:hover .pj-row.is-active .pj-bar,
.pj-show:focus-within .pj-row.is-active .pj-bar {
    animation-play-state: paused;
}

/* the next section has no top padding of its own; it borrowed this one's when both were white */
body .pj-section + .tk-section {
    padding-top: 100px;
}

@media only screen and (max-width: 1199px) {
    .pj-show {
        grid-template-columns: minmax(0, 1fr) 300px;
    }
}

/* preview on top, the list becomes a row that swipes sideways */
@media only screen and (max-width: 991px) {
    body .pj-section {
        padding: 70px 0;
    }
    body .pj-section + .tk-section {
        padding-top: 70px;
    }
    .pj-head {
        display: block;
        margin-bottom: 32px;
    }
    .pj-all {
        margin-top: 20px;
    }
    .pj-show {
        grid-template-columns: minmax(0, 1fr);
    }
    .pj-list {
        position: static;
        display: flex;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
    }
    .pj-list::-webkit-scrollbar {
        display: none;
    }
    .pj-row {
        flex: 0 0 210px;
    }
    .pj-row a {
        height: 100%;
        border-top: 0;
        border-inline-start: 1px solid rgba(255, 255, 255, .08);
    }
    .pj-row:first-child a {
        border-inline-start: 0;
    }
}

@media only screen and (max-width: 575px) {
    .pj-more {
        right: auto;
        bottom: 12px;
        left: auto;
        padding: 8px 12px;
        font-size: 12px;
        inset-inline-end: 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pj-show.is-running .pj-row.is-active .pj-bar {
        animation: none;
    }
    .pj-slide,
    .pj-slide img,
    .pj-row a,
    .pj-more,
    .pj-all,
    .pj-all i {
        transition: none;
    }
    .pj-slide img {
        transform: none;
    }
}

/*---------------------------
** Inner pages: team grid on a light surface
---------------------------*/
.tm-grid {
    margin-bottom: 0;
}

.tm-grid > li {
    margin-bottom: 30px;
}

.tm-grid .tm-card {
    box-shadow: 0 8px 22px rgba(16, 38, 58, 0.08);
}

/*---------------------------
** Packages (pk-*)
---------------------------*/
.pk-grid {
    margin-bottom: 0;
}

.pk-grid > li {
    margin-bottom: 30px;
}

.pk-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    overflow: hidden;
    background-color: #fff;
    border-radius: 16px;
    box-shadow: 0 8px 22px rgba(16, 38, 58, 0.08);
    /* own layer: stops the header colour bleeding through at fractional card edges */
    will-change: transform;
}

.pk-head {
    position: relative;
    padding: 30px 28px 62px;
    margin-bottom: -1px;
    overflow: hidden;
}

.pk-name {
    position: relative;
    z-index: 2;
    margin: 0 0 6px;
}

.pk-price {
    position: relative;
    z-index: 2;
    margin: 0;
    font-family: 'Poppins', 'Poppins Fallback', sans-serif;
    font-size: 40px;
    font-weight: 700;
    line-height: 1.2;
    color: #fff;
}

.pk-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    padding: 8px 28px 28px;
    position: relative;
    background-color: #fff;
}

.pk-features {
    padding: 0;
    margin: 0 0 24px;
    list-style: none;
}

.pk-features li {
    position: relative;
    padding: 7px 0;
    padding-inline-start: 26px;
    font-size: 14px;
    line-height: 1.55;
    color: #3d4654;
    overflow-wrap: anywhere;
}

.pk-features li::before {
    position: absolute;
    top: 7px;
    inset-inline-start: 0;
    font-family: 'Font Awesome 5 Free';
    font-size: 13px;
    font-weight: 900;
    content: "\f00c";
}

.pk-more {
    margin: -16px 0 24px;
    padding-inline-start: 26px;
    font-size: 13px;
    font-weight: 600;
    color: #6c7185;
}

.pk-btn,
.pk-btn:hover {
    display: block;
    padding: 13px 20px;
    margin-top: auto;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    border: 2px solid;
    border-radius: 10px;
    transition: color .2s ease, background-color .2s ease;
}

/*---------------------------
** Forms (fm-*): contact, quote, package order, track order
---------------------------*/
.fm-card {
    padding: 36px;
    background-color: #fff;
    border: 1px solid #e9edf2;
    border-radius: 16px;
    box-shadow: 0 12px 40px rgba(16, 38, 58, 0.05);
}

.fm-head {
    margin-bottom: 28px;
}

.fm-head .section-title {
    color: #6c7185;
}

body .fm-card .section-summary {
    margin: 12px 0 0;
}

.fm-card .form-element {
    margin-bottom: 20px;
}

.fm-card .form-element label,
.fm-label {
    display: block;
    margin: 0 0 8px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
    color: #202631;
}

.fm-label span {
    color: #ff3737;
}

.fm-card .form-element label.custom-control-label {
    font-weight: 400;
    color: #3d4654;
}

.fm-card .form-element input:not([type="checkbox"]):not([type="file"]),
.fm-card .form-element select,
.fm-card .form-element textarea {
    display: block;
    width: 100%;
    height: 50px;
    padding: 0 16px;
    font-size: 14px;
    color: #202631;
    background-color: #fff;
    border: 1px solid #dfe5ec;
    border-radius: 10px;
}

.fm-card .form-element textarea {
    height: auto;
    padding: 14px 16px;
    resize: vertical;
}

.fm-card .form-element input:focus,
.fm-card .form-element select:focus,
.fm-card .form-element textarea:focus {
    outline: 2px solid #202631;
    outline-offset: 1px;
}

.fm-card .form-element input[type="file"] {
    display: block;
    width: 100%;
    font-size: 14px;
}

.fm-hint {
    margin: 6px 0 0;
    font-size: 13px;
    line-height: 1.5;
    color: #6c7185;
}

.fm-submit,
.fm-submit:hover {
    display: inline-block;
    padding: 14px 34px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;
    border: 0;
    border-radius: 10px;
}

.fm-card button.fm-submit {
    border: 0;
}

.fm-submit:focus-visible,
.pk-btn:focus-visible {
    outline: 2px solid #202631;
    outline-offset: 2px;
}

.fm-side {
    padding: 26px;
    margin-bottom: 24px;
    background-color: #fff;
    border: 1px solid #e9edf2;
    border-radius: 16px;
}

.fm-side-title {
    margin: 0 0 14px;
}

.fm-contacts {
    padding: 0;
    margin: 0;
    list-style: none;
}

.fm-contacts li {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 6px 0;
    font-size: 14px;
    overflow-wrap: anywhere;
}

/*---------------------------
** Contact (ct-*), info cards reuse the industries notch card
---------------------------*/
.ct-infos {
    margin-bottom: 20px;
}

.ct-infos > li {
    margin-bottom: 30px;
}

.ct-val {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: #3d4654;
    overflow-wrap: anywhere;
}

.ct-val a {
    display: block;
    color: inherit;
}

.ct-map {
    width: 100%;
    min-height: 360px;
    overflow: hidden;
    background-color: #e6ecf3;
    border-radius: 16px;
}

.ct-map iframe {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 360px;
    border: 0;
}

/*---------------------------
** Track order (tr-*)
---------------------------*/
.tr-result {
    margin-top: 24px;
}

.tr-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 24px;
    margin: 0 0 28px;
}

.tr-facts dt {
    margin-bottom: 2px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.5;
    color: #6c7185;
}

.tr-facts dd {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.5;
    color: #202631;
    overflow-wrap: anywhere;
}

.tr-steps {
    display: flex;
    margin: 0 0 18px;
}

.tr-step {
    position: relative;
    flex: 1 1 0;
    font-size: 14px;
    font-weight: 600;
    color: #6c7185;
    text-align: center;
}

.tr-step:not(:last-child)::after {
    position: absolute;
    top: 19px;
    inset-inline-start: calc(50% + 26px);
    width: calc(100% - 52px);
    content: "";
    border-top: 2px dashed #cfd8e2;
}

.tr-dot {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin: 0 auto 8px;
    font-size: 14px;
    color: #a9b6c3;
    background-color: #eef2f6;
    border-radius: 50%;
}

.tr-step.is-done .tr-dot {
    color: #fff;
}

.tr-now {
    margin: 0;
    font-size: 15px;
    color: #3d4654;
}

.tr-alert {
    padding: 16px 20px;
    margin: 24px 0 0;
    font-size: 15px;
    line-height: 1.6;
    color: #664d03;
    background-color: #fff3cd;
    border-radius: 12px;
}

.tr-alert--bad {
    margin: 0;
    font-weight: 600;
    color: #842029;
    background-color: #f8d7da;
}

/*---------------------------
** FAQ page (fq-*), native details so it opens without JS
---------------------------*/
.fq-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 12px;
}

.fq-item {
    background-color: #fff;
    border: 1px solid #e9edf2;
    border-radius: 14px;
    transition: border-color .2s ease;
}

.fq-item summary {
    display: flex;
    gap: 16px;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    list-style: none;
    cursor: pointer;
    border-radius: 14px;
}

.fq-item summary::-webkit-details-marker {
    display: none;
}

.fq-item summary:focus-visible {
    outline: 2px solid #202631;
    outline-offset: 2px;
}

.fq-q {
    margin: 0;
}

.fq-toggle {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    font-size: 12px;
    border-radius: 9px;
    transition: color .2s ease, background-color .2s ease;
}

.fq-toggle i {
    transition: transform .2s ease;
}

.fq-item[open] .fq-toggle i {
    transform: rotate(45deg);
}

.fq-a {
    padding: 0 20px 20px;
    font-size: 15px;
    line-height: 1.75;
    color: #3d4654;
}

/*---------------------------
** Gallery (gl-*): masonry hooks stay; captions always show, whole photo opens it
---------------------------*/
.gl-section .grid {
    margin: 0 -10px;
}

.gl-section.masonry .single-pic {
    padding: 10px;
    border-radius: 0;
}

.gl-section.masonry .single-pic img {
    display: block;
    border-radius: 14px;
}

.gl-section.masonry .single-pic-overlay {
    top: 10px;
    right: 10px;
    bottom: 10px;
    left: 10px;
    width: auto;
    height: auto;
    visibility: visible;
    background: linear-gradient(180deg, rgba(10, 30, 45, 0) 50%, rgba(10, 30, 45, .78) 100%);
    border-radius: 14px;
    opacity: 1;
}

.gl-section .single-pic:hover .single-pic-overlay {
    opacity: 1;
}

.gl-section .single-pic .txt-icon {
    top: 10px;
    right: 10px;
    bottom: 10px;
    left: 10px;
    display: flex;
    align-items: flex-end;
    width: auto;
    text-align: start;
    transform: none;
}

.gl-section .single-pic h2 {
    position: relative;
    padding: 0 60px 16px 18px;
    margin: 0;
    font-family: 'Poppins', 'Poppins Fallback', sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    color: #fff;
    text-transform: none;
    pointer-events: none;
    visibility: visible;
    opacity: 1;
    transform: none;
}

.gl-section .single-pic a.icon-wrapper {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    visibility: visible;
    opacity: 1;
    transform: none;
}

.gl-section .single-pic a.icon-wrapper i {
    position: absolute;
    right: 14px;
    bottom: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    font-size: 14px;
    color: #202631;
    background-color: #fff;
    border-radius: 10px;
}

.gl-section .single-pic a.icon-wrapper:focus-visible {
    outline: 2px solid #fff;
    outline-offset: -4px;
    border-radius: 14px;
}

@media only screen and (max-width: 767px) {
    .gl-section.masonry .single-pic,
    .gl-section .grid-sizer {
        width: 50%;
    }
}

@media only screen and (max-width: 480px) {
    .gl-section.masonry .single-pic,
    .gl-section .grid-sizer {
        width: 100%;
    }
}

/*---------------------------
** Event calendar (cl-*), restyles FullCalendar's own markup
---------------------------*/
.cl-panel {
    padding: 30px;
    background-color: #fff;
    border: 1px solid #e9edf2;
    border-radius: 16px;
    box-shadow: 0 12px 40px rgba(16, 38, 58, 0.05);
}

.cl-panel .fc-toolbar h2 {
    font-family: 'Poppins', 'Poppins Fallback', sans-serif;
    font-size: 22px;
    font-weight: 600;
    color: #202631;
}

.cl-panel .fc-button {
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 500;
    text-transform: capitalize;
    border-radius: 9px;
    box-shadow: none;
}

.cl-panel .fc-button-group > .fc-button {
    border-radius: 0;
}

.cl-panel .fc-button-group > .fc-button:first-child {
    border-start-start-radius: 9px;
    border-end-start-radius: 9px;
}

.cl-panel .fc-button-group > .fc-button:last-child {
    border-start-end-radius: 9px;
    border-end-end-radius: 9px;
}

.cl-panel .fc-event {
    padding: 2px 6px;
    font-size: 12px;
    border-radius: 6px;
}

.cl-panel #calendar {
    max-width: none;
}

.cl-panel .fc-unthemed td.fc-today {
    background-color: #eef3f8;
}

.cl-panel .fc-day-header {
    padding: 10px 4px;
    font-size: 13px;
    font-weight: 600;
}

/*---------------------------
** Career (jb-*), sidebar shared with the services page
---------------------------*/
.jb-list {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-bottom: 24px;
}

.jb-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 26px 28px;
    background-color: #fff;
    border: 1px solid #e9edf2;
    border-radius: 16px;
}

.jb-top {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 12px;
}

.jb-title {
    margin: 0;
}

.jb-closed {
    flex: 0 0 auto;
    padding: 3px 12px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
    color: #842029;
    background-color: #f8d7da;
    border-radius: 999px;
}

.jb-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 22px;
    margin: 0 0 10px;
    font-size: 14px;
    line-height: 1.6;
    color: #3d4654;
}

.jb-meta i {
    margin-inline-end: 8px;
}

.jb-meta strong,
.jb-text strong {
    font-weight: 600;
    color: #202631;
}

.jb-text {
    margin: 0 0 16px;
    font-size: 14px;
    line-height: 1.65;
    color: #3d4654;
}

.jb-notice {
    margin: 0 0 24px;
}

.jb-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 0 0 30px;
}

.jb-facts > div:last-child:nth-child(odd) {
    grid-column: 1 / -1;
}

.jb-facts > div {
    position: relative;
    padding: 14px 16px;
    padding-inline-start: 48px;
    background-color: #f5f8fb;
    border-radius: 12px;
}

.jb-facts i {
    position: absolute;
    top: 18px;
    inset-inline-start: 18px;
    font-size: 16px;
}

.jb-facts dt {
    font-size: 13px;
    font-weight: 500;
    line-height: 1.5;
    color: #6c7185;
}

.jb-facts dd {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: #202631;
    overflow-wrap: anywhere;
}

.jb-body h2:first-child {
    margin-top: 0;
}

.jb-body > p:first-child {
    font-size: inherit;
    color: inherit;
}

.jb-apply {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 20px;
    align-items: center;
    justify-content: space-between;
    padding-top: 24px;
    margin-top: 32px;
    border-top: 1px solid #eef2f6;
}

.jb-apply p {
    margin: 0;
    font-size: 15px;
    color: #3d4654;
    overflow-wrap: anywhere;
}

@media only screen and (max-width: 767px) {
    .fm-card {
        padding: 24px 20px;
    }
    .cl-panel {
        padding: 16px;
    }
    .cl-panel .fc-toolbar {
        flex-wrap: wrap;
        gap: 10px;
    }
    .jb-card {
        padding: 22px 20px;
    }
    .jb-facts,
    .tr-facts {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (prefers-reduced-motion: reduce) {
    .pk-btn,
    .fq-item,
    .fq-toggle,
    .fq-toggle i {
        transition: none;
    }
}

/* ---------------------------------------------------------------
** Intro section: self-hosted video popup (play button on .intro-bg)
** --------------------------------------------------------------- */
.intro-video-popup {
    position: relative;
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    background: #000;
    line-height: 0;
    box-shadow: 0 10px 40px rgba(0, 0, 0, .5);
}
.intro-video-popup video {
    display: block;
    width: 100%;
    height: auto;
    max-height: 80vh;
    background: #000;
}
.mfp-intro-video .mfp-content {
    vertical-align: middle;
}
.mfp-intro-video .mfp-close {
    top: -40px;
    right: 0;
    width: 40px;
    color: #fff;
    opacity: 1;
}

/* The step numbers are decoration (aria-hidden); drawing them from data-num keeps
   them out of the page text, so the faint colour is not read as low-contrast text. */
.hw-step-num::before {
    content: attr(data-num);
}

/* Touch targets in the mobile top strip: at least 24x24px each (WCAG 2.5.8). The
   icons keep their size; the link box around them grows, and the gaps shrink by the
   same amount so the row looks the same. */
@media only screen and (max-width: 991px) {
    body .support-contact-info a {
        display: inline-block;
        min-height: 24px;
        line-height: 24px;
    }
    body .support-bar-area ul.social-links li a {
        display: inline-block;
        min-width: 24px;
        min-height: 24px;
        line-height: 24px;
        text-align: center;
    }
    body .support-bar-area ul.social-links li,
    body .support-bar-area ul.social-links li:last-child {
        margin-inline-start: 6px;
    }
}

/* FullCalendar greys out other-month day numbers at 1.9:1; keep them muted but legible. */
.fc-other-month .fc-day-number,
.fc-day-top.fc-other-month {
    opacity: 1;
    color: #6b7280;
}

/* FullCalendar draws the month after the page loads; keep its height reserved so the
   footer does not jump down when it appears (measured six-week month heights). */
#calendar {
    min-height: 560px;
}
@media (min-width: 768px) {
    #calendar {
        min-height: 700px;
    }
}
@media (min-width: 1200px) {
    #calendar {
        min-height: 840px;
    }
}

/* Rendering work: sections far below the first screen skip layout and paint until
   they come near the viewport. The first three blocks of <main> (hero or breadcrumb,
   and what overlaps it) always render; "auto" remembers each section's real height
   once it has been shown, so the page does not jump when scrolling back. */
main#main-content > :nth-child(n+4),
body > footer.footer-section {
    content-visibility: auto;
    contain-intrinsic-size: auto 900px;
}

/* Former <h3>/<h2> labels demoted to <div> (SEO heading count): keep the heading metrics they inherited. */
.statistics-section .stat-label { line-height: 1.2; }
.footer-section .footer-title { font-family: 'Poppins', 'Poppins Fallback', sans-serif; font-weight: 600; line-height: 1.4; }