@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&family=Spartan:wght@100;200;300;400;500;600;700;800;900&display=swap');

/* GENERAL */

body {
	font-family: 'Roboto', sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
	color: #3d3d3d;
	transition: 0.5s ease-in-out;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: 'Spartan', sans-serif;
	font-weight: 600;
	text-transform: capitalize;
	color: #3d3d3d;
	line-height: 1.2;
}

p {
	margin-bottom: 20px;
}

p:last-child {margin-bottom: 0;}

a {
	text-decoration: none;
	transition: all 0.3s ease-in-out 0s;
}

ul {
padding: 0;
  margin: 0;
  list-style: none;
}

li {list-style: none;}

body .sppb-btn {
	font-family: 'Spartan', sans-serif;
	overflow: hidden;
	position: relative;
	z-index: 1;
	border: 1px solid transparent;
	border-radius: 4px;
	padding: 16px 42px;
	cursor: pointer;
	text-transform: capitalize;
	letter-spacing: 0;
	font-size: 16px;
    font-weight: 400;
	line-height: 1;
	white-space: normal;
	border-radius: 0;
}

body .sppb-btn.sppb-btn-primary {
	color: #fff;
	background: var(--maincolor);
	border-color: var(--maincolor);
}

body .sppb-btn.sppb-btn-primary:hover {
	color: #fff;
	background: var(--secondcolor); 
	border-color: var(--secondcolor);
}

.sppb-btn-primary.focus, .sppb-btn-primary:focus {
	color: #fff;
	box-shadow: none;
}


#sp-footer {
	font-size: inherit;
}

.sppb-addon-optin-forms,
.sppb-addon-optin-forms .sppb-optin-form-details-wrap:not(:empty){
	padding: 0px;
}

.sppb-addon-optin-forms .sppb-btn i {display: none;}

.overflow-hidden {overflow: hidden !important;}

textarea.sppb-form-control {height: auto !important;}

.sp-scroll-up {
	background: var(--maincolor);
}

.background-position-right {
	background-position: 160% 50% !important;
}

.background-position-left {
	background-position: -15% 50% !important;
}

.sppb-addon-optin-forms {
	padding: 0px !important;
}

/* HEADER */ 

#sp-top {
	z-index: 9999;
	position: relative;
}

#sp-header {
	height: auto;
	box-shadow: none;
	transition: all 0.5s ease-in-out;
}

@media (max-width: 992px) {
	#sp-header {padding-top: 15px; padding-bottom: 15px;}
	#sp-header.header-sticky {padding-top: 0; padding-bottom: 0;}
}

#sp-header.header-sticky {
	transition: all 0.5s ease-in-out;
	animation-name: menu_sticky;
	animation-duration: 0.60s;
	animation-timing-function: ease-out;
	box-shadow: 0 0 60px 0 rgba(0, 0, 0, 0.07);
}

#sp-header.header-sticky .container:before {
	background-color: transparent;
}

@keyframes menu_sticky {
  0%   {margin-top:-100px;}
  50%  {margin-top: -90px;}
  100% {margin-top: 0;}
}

#sp-header > .row {
	-ms-flex-align: center !important;
	align-items: center !important;
}

#sp-header > .container > .container-inner > .row {
	-ms-flex-align: center !important;
	align-items: center !important;
}

#sp-header .logo a .logo-image,
#sp-header .logo a .logo-image-phone {
	height: auto;
}

#sp-header .logo a {
	font-size: 30px;
	line-height: 1;
	margin: 0;
	padding: 0;
	font-family: 'Spartan', sans-serif;
	font-weight: 600;
	color: var(--secondcolor);
	display: flex;
	justify-content: center;
	align-items: center;
}

#sp-header.header-sticky .logo a {
	font-size: 25px;
}

#sp-header.header-sticky .logo a .logo-image,
#sp-header.header-sticky .logo a .logo-image-phone {
	max-width: 40px;
}

.sp-megamenu-parent {padding-right: 70px;}

.sp-megamenu-parent > li {text-align: left;}

.sp-megamenu-parent > li > a, .sp-megamenu-parent > li > span {
	font-family: 'Spartan', sans-serif;
	font-size: 16px;
	line-height: 115px;
	padding: 0 17px;
	font-weight: 600;
	position: relative;
}

@media (max-width: 1200px) {
.sp-megamenu-parent > li > a, .sp-megamenu-parent > li > span {
	padding: 0 13px;
}
}

#sp-header.header-sticky .sp-megamenu-parent > li > a {line-height: 85px;}

.sp-megamenu-parent > li.active > a {
	font-weight: 600;
}

body.ltr .sp-megamenu-parent > li.sp-has-child > a::after, body.ltr .sp-megamenu-parent > li.sp-has-child > span::after {
	display: none;
}

.sp-megamenu-parent .sp-dropdown .sp-dropdown-inner {
text-align: left;
list-style: none;
padding: 15px 0;
background-color: #ffffff;
box-shadow: 2px 0 10px rgba(0, 0, 0, 0.2);
border-radius: 0 0 4px 4px;
}

.sp-megamenu-parent .sp-dropdown li.sp-menu-item > a, .sp-megamenu-parent .sp-dropdown li.sp-menu-item span:not(.sp-menu-badge) {
padding: 10px 10px 6px;
padding-left: 30px;
padding-right: 30px;
font-size: 16px;
font-weight: 500;
line-height: 24px;
display: block;
font-family: 'Spartan', sans-serif;
}

body.ltr #offcanvas-toggler.offcanvas-toggler-right {
	float: none;
	margin-left: 0px;
	position: absolute;
	right: 0;
	top: 50%;
	transform: translatey(-50%);
	z-index: 888;
}

#offcanvas-toggler {
	display: block;
	margin: auto;
	height: 40px;
	width: 40px;
	background: url('../images/dots-menu.png');
	background-position: center; 
	  background-repeat: no-repeat; 
	  background-size: auto;
	line-height: 40px;
	font-size: 0px;
	transition: opacity 0.5s ease;
}

#offcanvas-toggler:hover {opacity: .8;}

.header-sticky #offcanvas-toggler {
	height: 30px;
	width: 30px;
	line-height: 30px;
	background-size: cover;
}

@media (min-width: 992px) {

.offcanvas-overlay {
	background: transparent;
}

.offcanvas-menu .offcanvas-inner .sp-module ul.menu {
	display: none;
}

.offcanvas-menu {
	background-color: var(--secondcolor);
	width: 400px;
}

.offcanvas-menu .offcanvas-inner {
	padding: 41px 58px 60px;
}

body.ltr.offcanvs-position-right.offcanvas-active .body-wrapper {
	right: 0;
}

body.ltr.offcanvs-position-right .offcanvas-menu {
	right: -400px;
}
}


/* */

/* PAGE TITLE */

.sp-page-title {
	padding: 130px 0;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: auto;
	background-attachment: scroll;
	text-align: center;
}

.sp-page-title .sp-page-title-heading {
	font-size: 60px;
	line-height: 1;
	font-weight: 700;
}


.sp-page-title .breadcrumb {
	background: none;
	padding: 0;
	background-color: transparent;
	border-radius: 0;
	color: inherit;
	font-weight: 500;
	margin: 25px 0 0 0;
	position: relative;
	z-index: 5;
	display: block;
font-family: 'Spartan', sans-serif;
}

.sp-page-title .breadcrumb > li {display: inline-block;}

.sp-page-title .breadcrumb > li > a {
    color: #fff;
}

.breadcrumb-item + .breadcrumb-item {
	padding-left: 16px;
}

.sp-page-title .breadcrumb > li + li::before {
    color: #fff;
	padding-right: 20px;
}

.sp-page-title .breadcrumb > li > a:hover,
.sp-page-title .breadcrumb > .active {
    color: rgba(255,255,255,.8);
}

/* */

#sp-header.header-sticky ~ section#sp-main-body {
	padding-top: 0;
}

.com-spsimpleportfolio #sp-main-body,
.com-content #sp-main-body,
.com-j2store #sp-main-body,
.com-tags #sp-main-body {
	padding: 130px 0;
}


.com-spsimpleportfolio #sp-header.header-sticky ~ section#sp-main-body,
.com-content #sp-header.header-sticky ~ section#sp-main-body,
.com-j2store #sp-header.header-sticky ~ section#sp-main-body,
.com-tags #sp-header.header-sticky ~ section#sp-main-body {
	padding-top: 130px;
}

/* SIDEBAR */

.sidebar-class  .sppb-row-container {width: 100% !important; }
.sidebar-class.com-sppagebuilder #sp-main-body {margin: 0 auto;}
@media (min-width: 768px) {
.sidebar-class.com-sppagebuilder #sp-main-body {max-width: 750px;}
}
@media (min-width: 992px) {
.sidebar-class.com-sppagebuilder #sp-main-body {max-width: 970px;}
}
@media (min-width: 1200px) {
.sidebar-class.com-sppagebuilder #sp-main-body {max-width: 1170px;}
}

.com-sppagebuilder #sp-right, .com-sppagebuilder #sp-left {
	padding-top: 130px;
	padding-bottom: 130px;
	position: relative;
}

#sp-left .sp-module, #sp-right .sp-module {
	border: 0px solid #f3f3f3;
	padding: 0;
	border-radius: 0px;
}

#sp-left .sp-module ul > li, #sp-right .sp-module ul > li {
	display: block;
	border-bottom: 0px solid #f3f3f3;
}

/* */

/* PORTFOLIO */

.featherlight {
  top: 10%;
}

.featherlight .featherlight-content {
  max-height: 95%;
  max-width: 55%;
  padding: 0;
  margin: 0;
  overflow: hidden;
  background: transparent none repeat scroll 0 0;
}

.sp-simpleportfolio .sp-simpleportfolio-filter {
	text-align: center;
	margin-bottom: 0;
}

.sp-simpleportfolio .sp-simpleportfolio-filter > ul {
	padding-top: 0;	
	padding-bottom: 40px;
	font-family: 'Spartan', sans-serif;
}

.sp-simpleportfolio .sp-simpleportfolio-filter > ul > li {
	float: left;
	display: block;
	margin: 0;
}

.sp-simpleportfolio .sp-simpleportfolio-filter > ul > li > a {
border: 1px solid #dce1e4;
height: 40px;
line-height: 38px;
padding: 0px 30px;
border-radius: 50px;
background: none;
color: #151735;
margin-left: 10px;
outline: none;
cursor: pointer;
display: inline-block;
}

.sp-simpleportfolio .sp-simpleportfolio-filter > ul > li.active > a {
background: var(--maincolor);
color: #ffffff;
border-color: var(--maincolor);
}

.sp-simpleportfolio .sp-simpleportfolio-filter > ul > li:hover > a {
background: var(--maincolor);
color: #ffffff;
border-color: var(--maincolor);
}

.portfolio-img {
	overflow: hidden;
	position: relative;
}

.portfolio-img img {
	width: 100%;
}

.sp-simpleportfolio-item:hover img {
	opacity: 0.7;
	transform: scale3d(1.1, 1.1, 1.1);
}

.simpleportfolio-btns {
	position: absolute;
	bottom: 0px;
	left: 0px;
	height: 0%;
	width: 100%;
	background: linear-gradient(360deg, #42558c 0%, rgba(2, 34, 77, 0) 100%) transparent;
	-webkit-transition: all 0.5s ease-out 0s;
	-moz-transition: all 0.5s ease-out 0s;
	-ms-transition: all 0.5s ease-out 0s;
	-o-transition: all 0.5s ease-out 0s;
	transition: all 0.5s ease-out 0s;
}

.sp-simpleportfolio-item:hover .simpleportfolio-btns {
	height: 100%;
}

.simpleportfolio-btns a {
	height: 70px;
	width: 70px;
	display: inline-block;
	line-height: 70px;
	vertical-align: middle;
	font-size: 18px;
	color: var(--maincolor);
	display: inline-block;
	background: #ffffff;
	text-align: center;
	border-radius: 50%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	-webkit-transition: all 0.3s ease-out 0s;
	-moz-transition: all 0.3s ease-out 0s;
	-ms-transition: all 0.3s ease-out 0s;
	-o-transition: all 0.3s ease-out 0s;
	transition: all 0.3s ease-out 0s;
}

.simpleportfolio-btns a:hover {
	background: var(--maincolor);
	color: #ffffff;
}

.simpleportfolio-info {
    box-shadow: 0px 0px 30px 0px rgba(0, 5, 63, 0.1);
    background: #ffffff;
    padding: 25px 35px 30px 35px;
    margin: 0px 20px;
        margin-top: 0px;
    margin-top: -45px;
    -webkit-transition: all 0.3s ease-out 0s;
    -moz-transition: all 0.3s ease-out 0s;
    -ms-transition: all 0.3s ease-out 0s;
    -o-transition: all 0.3s ease-out 0s;
    transition: all 0.3s ease-out 0s;
	z-index: 2;
position: relative;
}

.sp-simpleportfolio-item:hover .simpleportfolio-info {
	background: var(--maincolor);
}

.simpleportfolio-tags {
    display: block;
    margin-bottom: 7px;
	font-size: 12px;
	text-transform: uppercase;
}

.simpleportfolio-info .simpleportfolio-title {
	font-size: 22px;
	margin-bottom: 0px;
}

.sp-simpleportfolio-item:hover .simpleportfolio-tags,
.sp-simpleportfolio-item:hover .simpleportfolio-title a {
	color: #fff;
}

.com-spsimpleportfolio.gallery-full #sp-main-body .container {max-width: 100%;}


/* */

/* BLOG */

.article-list .article {
	padding: 0;
	border: 0px solid #f5f5f5;
	border-radius: 0;
	position: relative;
	border-color: transparent;
}

.article-list .col-md-12 .article {margin-bottom: 0px;}

.article-list .row > .col-md-12 + .col-md-12 {margin-top: 70px;}

.article-list .article .article-intro-image, .article-list .article .article-featured-video, .article-list .article .article-featured-audio, .article-list .article .article-feature-gallery {
	margin: 0;
	border-radius: 0;
	border-bottom: 0px solid #f5f5f5;
	overflow: hidden;
	position: relative;
}

.article-list .article .article-intro-image img, .article-list .article .article-featured-video img, .article-list .article .article-featured-audio img, .article-list .article .article-feature-gallery img {
	border-radius: 0;
	width: 100%;
	transform: none;
transition: all 0.5s ease-in-out;
}

.article-list .article:hover .article-intro-image img, .article-list .article:hover .article-featured-video img, .article-list .article:hover .article-featured-audio img, .article-list .article:hover .article-feature-gallery img {
	border-radius: 0;
	width: 100%;
	transform: scale(1.2);
	transition: all 0.5s ease-in-out;
}

.article-body {
	padding: 0;
}

.article-list .article .article-header h1, .article-list .article .article-header h2 {
margin: 40px 0 10px !important;
font-size: 32px;
font-weight: 600;
line-height: 1.2;
}

.article-list .article .article-header h1 a, .article-list .article .article-header h2 a {
	color: var(--secondcolor);
}

.article-list .article .article-header h1 a:hover, .article-list .article .article-header h2 a:hover, .article-list .article .article-header h1 a:active, .article-list .article .article-header h2 a:active, .article-list .article .article-header h1 a:focus, .article-list .article .article-header h2 a:focus {
	color: var(--maincolor);
}

.article-info > span {
color: #3d3d3d;
font-weight: 400;
font-size: 12px;
}

.article-info > span a {
	color: #3d3d3d;
}

.article-info > span a:hover {
	color: var(--maincolor);
}

.article-info > span + span::before {
	display: inline-block;
	padding-right: 0.8rem;
	padding-left: 0.8rem;
	content: "/";
}

.article-info > span i {
	font-size: 16px;
	margin-right: 5px;
	position: relative;
}

.readmore-bottom {margin-top: 40px;}

body .readmore-bottom .sppb-btn.sppb-btn-primary {
	background: var(--secondcolor);
	border-color: var(--secondcolor);
}

body .readmore-bottom .sppb-btn.sppb-btn-primary:hover {
	background: var(--maincolor);
	border-color: var(--maincolor);
}


/* SINGLE POST */

.view-article #sp-main-body > .container {max-width: 100%; padding: 0;}
.view-article #sp-section-3 {display: none;}
.view-article #sp-main-body {padding: 0;}

.article-details {
	border-color: transparent;
	box-shadow: none;
	position: relative;
}

.top-blog-content {
	position: relative;
}

.article-details .article-full-image {
	text-align: center;
	margin-bottom: 0;
}

.article-details .article-full-image img {
	display: block;
	width: 100%;
}

.article-details .article-header {
	position: absolute !important;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	max-width: 700px;
	text-align: center;
	margin: auto;
}

.article-details .article-header h1, .article-details .article-header h2 {
	font-size: 60px;
	line-height: 84px;
	color: #fff;
	margin-bottom: 20px;
}

.article-details .article-info {
	margin-bottom: 0;
	justify-content: center;
}

.article-details .article-info > span {
	color: #fff;
	font-weight: 400;
	font-size: 18px;
	line-height: 24px;
}

.article-details .article-info > span a {
	color: #fff;
}


/* */

/* SHOP */

.j2store-single-product {
	margin-bottom: 30px;
	border: 0px solid #e1e1e1;
	position: relative;
	text-align: left;
	box-shadow: 0 0px 15px 0px rgba(0, 0, 0, 0.1);
}

.product-wrap {
	background-color: #fff;
	padding: 30px;
	text-align: center;
}

.j2store-single-product .product-title {
font-size: 24px;
text-transform: capitalize;
font-weight: 600;
letter-spacing: 0;
line-height: 1.2em;
margin: 0 0 0.8rem;
padding-left: 0;
padding-right: 0;
text-transform: none;
color: var(--secondcolor);
}

.product-price-container {
display: block;
font-size: 20px;
font-weight: 400;
color: #424242;
margin: 10px auto;
}

.base-price, .sale-price {
	line-height: 1.5;
	display: inline-block;
}

.product-price-container .strike {
	text-decoration: line-through;
	font-size: 20px;
	color: #424242;
	font-weight: 300;
}

.product-price-container .sale-price {
	font-size: 20px;
	font-weight: 400;
	color: #424242;
}

.discount-percentage {
	background-color: var(--maincolor);
	border-radius: 0;
	color: #fff;
	font-size: 14px;
	font-weight: 300;
	left: 17px;
	line-height: 1;
	position: absolute;
	top: 16px;
	z-index: 2;
	padding-left: 10px;
	padding-right: 10px;
	line-height: 24px;
}

.j2store-addtocart-form {
	margin-top: 15px;
}

.j2store-addtocart-form .sppb-btn {padding: 10px 29px !important;}

/* Single Product */


.j2store-product-main-image {
	margin-bottom: 0;
	width: 100%;
}

ul.additional-image-list {
list-style: none;
margin: 0;
padding: 0;
color: transparent;
font-size: 0;
line-height: 0;
position: absolute;
text-align: center;
width: 100%;
margin: 1px -5px;
overflow: hidden;
position: static;
margin-bottom: 0;
margin-top: 5px;
}

.additional-image-list li {
	float: left;
	margin: 0 0 1px;
	padding: 0 0 0 5px;
	width: 20%;
	display: block;
	cursor: pointer;
}

.product-title-simple {
	display: block;
	font-size: 34px;
	text-transform: capitalize;
	font-weight: 500;
	margin-bottom: 5px;
	margin-top: 0;
}

.product-sdesc ul.list-styled {padding: 20px 0; list-style: none; margin: 0;}

.product-sdesc ul.list-styled li {
	padding: 5px 0 5px 0;
    padding-left: 30px;
	list-style: none;
	position: relative;
	margin: 0;
}

.list-styled ul li::before, ul.list-styled li::before {
	color: var(--maincolor);
	content: "\f058";
	font-family: "Font Awesome 5 Free";
	font-size: 16px;
	left: 0;
	position: absolute;
	top: 5px;
	font-weight: 900;
}

.simple-product .product-price-container .sale-price {
	font-size: 24px;
	font-weight: 500;
	color: var(--maincolor);
}

.type-product .j2store-addtocart-form-simple {
	margin: 20px 0 0;
}

.type-product .j2store-addtocart-form-simple:before {
    border-top: 1px solid #b2b2b2;
    content: "";
    display: block;
    margin-bottom: 26px;
    position: relative;
}


.type-product .options {
	display: flex;
	justify-content: space-between;
}

.options .option {
	position: relative;
	width: 100%;
}

.options .option + .option {
	padding-left: 15px;
}

.options b {
	display: block;
	font-size: 14px;
	font-weight: 700;
	margin-bottom: 5px;
	color: #444;
}

.options select {
display: block;
width: 100%;
padding: 20px;
font-size: inherit;
line-height: 1;
color: inherit;
height: 60px;
background-color: #fff;
background-image: none;
background-clip: padding-box;
box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.1);
border-radius: 4px;
border: 0;
outline: none;
-webkit-appearance: none;
-moz-appearance: none;
text-indent: 1px;
text-overflow: "";
width: 100%;
text-align: center;
}

.type-product .j2store-add-to-cart {
	border-top: 1px solid #b2b2b2;
	display: block;
	margin-top: 25px;
	position: relative;
	padding-top: 25px;
}


.options .option select:not(.form-control):focus {
    background-color: #fff;
}

.form-control:focus {
	box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.2);
}

#sp-component .simple.detail.bs3 .j2store-addtocart-form-simple .sppb-btn {
	font-family: 'Spartan', sans-serif;
	position: relative;
	top: -1px;
	width: auto;
	margin-top: 0px;
	background: var(--maincolor) !important;
	color: #fff !important;
	padding: 15px 36px !important;
	border: 1px solid var(--maincolor) !important;
    font-weight: 400;
	border-radius: 0;
}

#sp-component .simple.detail.bs3 .j2store-addtocart-form-simple .sppb-btn:hover {
	background: var(--secondcolor) !important;
	color: #fff !important;
	border-color: var(--secondcolor) !important;
}


.product-qty input[type="text"], .product-qty input[type="number"],
.product-qty input[type="text"]:focus, .product-qty input[type="number"]:focus {
	display: inline;
	height: 50px;
	padding: 0 !important;
	width: auto !important;
	text-align: center;
	margin: 0px;
	-moz-appearance: textfield;
	-webkit-appearance: textfield;
	background-color: #fff;
	border: 1px solid var(--maincolor);
	color: #444;
	line-height: 60px;
	max-width: 80px;
	padding-left: 30px !important;
	padding-right: 30px !important;
	text-align: center;
	font-size: 16px;
	font-weight: 400;
	border-radius: 0;
	box-shadow: none;
}

.j2store-addtocart-form-simple .sppb-btn {
	position: relative;
	top: -1px;
	width: auto;
	margin-top: 40px;
}

.woocommerce-tabs {
	clear: both;
	margin-bottom: 4em;
	margin-top: 100px;
}

.woocommerce-tabs ul.nav-tabs {
border-bottom: none;
list-style: none;
margin-bottom: 1px;
padding-left: 0;
position: relative;
z-index: 1;
display: flex;
line-height: 1.9;
margin-bottom: -1px;
}

.woocommerce-tabs ul.nav-tabs li {
border-bottom: none;
display: flex;
padding: 0;
position: relative;
z-index: 1;
}

.woocommerce-tabs ul.nav-tabs li + li {
	border-top: none;
}

.woocommerce-tabs ul.nav-tabs li a {	
line-height: 1;
background: var(--maincolor);
color: #fff;
min-width: unset;
padding: 22px 35px;
border: none;
border-radius: 0;
font-size: 16px;
font-weight: 400;
margin-right: 2px;
}

.woocommerce-tabs ul.nav-tabs li a:hover {
background: #fff;
color: var(--maincolor);
box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.1);
}

.tab-content > .active.fade:not(.show) {
	opacity: 1;
}

.woocommerce-tabs .tab-content {
background-color: #fff;
box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.1);
padding: 53px 60px;
position: relative;
margin-top: 0;
}

.woocommerce-tabs .tab-content h6 {font-size: 24px; margin-bottom: 20px;}


.sppb-btn-primary.focus, .sppb-btn-primary:focus {
	color: #fff;
	box-shadow: none !important;
}

.related, .upsells, .cross-sells {
	margin-top: 120px;
}

.related h3 {
	color: var(--secondcolor);
	font-size: 48px;
	margin-bottom: 40px;
}

.cross-sells .j2store-single-product {
	margin-bottom: 30px;
	border: 1px solid #e1e1e1;
	position: relative;
	text-align: center;
}

.crosssell-product .j2store-single-product .sppb-btn {margin-top: 15px !important;}

.related .j2store-single-product img {width: 100%;}




/* CART */

.j2store-single-product-view input.j2store-cart-button,
.view-carts .j2store-cart-buttons .buttons-left input,
.view-carts .buttons-right a,
#button-account,
#button-login,
#button-guest,
#button-payment-method,
#bank_form input,
.view-carts .buttons-right a:hover,
.view-carts .buttons-right a:active,
.view-carts .buttons-right a:focus,
.view-checkout input.btn {
	font-family: 'Spartan', sans-serif;
	overflow: hidden;
	position: relative;
	z-index: 1;
	border: 1px solid transparent;
	border-radius: 4px;
	padding: 16px 42px;
	cursor: pointer;
	text-transform: capitalize;
	letter-spacing: 0;
	font-size: 16px;
    font-weight: 400;
	line-height: 1;
	white-space: normal;
	border-radius: 0;
	color: #fff !important;
	background: var(--maincolor) !important;
	border-color: var(--maincolor) !important;
}

.view-carts .buttons-right a,
.j2store-single-product-view input.j2store-cart-button:hover,
.j2store-single-product-view input.j2store-cart-button:focus,
.j2store-single-product-view input.j2store-cart-button:active,
.view-carts .j2store-cart-buttons .buttons-left input:hover,
.view-carts .j2store-cart-buttons .buttons-left input:active,
.view-carts .j2store-cart-buttons .buttons-left input:focus,
#button-account:hover,
#button-account:active,
#button-account:focus,
#button-login:hover,
#button-login:active,
#button-login:focus,
#button-guest:hover,
#button-guest:active,
#button-guest:focus,
#button-payment-method:hover,
#button-payment-method:active,
#button-payment-method:focus,
#bank_form input:hover,
#bank_form input:active,
#bank_form input:focus,
.payment input:hover,
.payment input:active,
.payment input:focus,
.buttons input:hover,
.buttons input:active,
.buttons input:focus,
.view-checkout input.btn:hover,
.view-checkout input.btn:active,
.view-checkout input.btn:focus {
	color: #fff !important;
	background: var(--secondcolor) !important; 
	border-color: var(--secondcolor) !important;
}

.view-carts .j2store-cart-buttons .buttons-left .cart-continue-shopping-button input,
#button-login,
#button-login:hover,
#button-guest,
#button-guest:hover,
#button-payment-method,
#button-payment-method:hover,
#bank_form input,
#bank_form input:hover,
#button-account,
#button-account:hover {margin-left: 0;}

.j2store-remove,
.j2store-remove:hover {
height: 50px;
padding-left: 10px !important;
padding-right: 10px !important;
line-height: 50px;
max-width: 80px;
min-width: auto;
margin-bottom: 0 !important;
padding-top: 0;
padding-bottom: 0;
margin-top: -2px;
}

.view-carts input[type="number"]:not(.form-control):focus {
	background-color: #eef3f5;
}

#onCheckoutPayment_wrapper .payment-plugin-image-label {padding-right: 5px;}

.customer-note {margin-bottom: 20px;}

.customer-note textarea {
	height: auto !important;
	width: auto !important;
}

.view-checkout .checkout-content .left label input,
.view-checkout .checkout-content .shipping-make-same input {
	width: inherit;
	height: inherit;
	margin-right: 7px;
	display: inline-block;
}

.view-checkout .checkout-content .shipping-make-same input {width: auto !important;}

.view-checkout #sp-main-body h2,
.view-checkout #sp-main-body h3 {
	font-size: 24px;
	padding: 10px 0 15px 0;
}

.view-myprofile #sp-main-body ul > li > a {margin: 5px 20px 15px 0; display: inline-block;}

.view-myprofile #sp-main-body label {display: block;}

.view-checkout input.btn {width: unset !important; margin-top: 0; border: none !important;}

.view-checkout textarea {
    height: auto !important;
}

.btn:active, .btn:focus {
	box-shadow: none !important;
}

input[type="checkbox"], input[type="radio"] {
	box-sizing: border-box;
	padding: 0;
	display: inline-block;
}

#bank_form input {margin-top: 20px;}

.view-checkout .j2store.checkout h1 {display: none;}

.j2store-cart .row-fluid .span6 {padding-top: 60px;}

/* */

/* PAGINATION */

.pagination {
	display: block;
	padding-left: 0;
	list-style: none;
	border-radius: 0;
	margin-top: 35px;
	text-align: center;
}

.page-link {
	position: relative;
	display: block;
	background-color: #fff;
	border: 1px solid #e4ebe8;
	border-radius: 100% !important;
	color: #7a998c;
	display: inline-block;
	height: 2.5em;
	letter-spacing: 0;
	line-height: 1;
	margin-left: 0;
	margin-right: 4px;
	min-width: 2.5em;
	padding: 0.6em 0.4em 0.3em;
	text-align: center;
}

.page-item {display: inline-block;}

.page-item.active .page-link {
	z-index: 1;
	background-color: var(--maincolor);
	border-color: var(--maincolor);
	color: #fff;
}

.page-link:hover {
	z-index: 2;
	text-decoration: none;
	background-color: var(--maincolor);
	border-color: var(--maincolor);
	color: #fff;
}

.page-item:first-child .page-link {
	margin-left: 0;
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}

.page-item:last-child .page-link {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}

/* IMPORT FLATICON */

@font-face {
  font-family: "Flaticon";
  src: url("../fonts/Flaticon.eot");
  src: url("../fonts/Flaticon.eot?#iefix") format("embedded-opentype"),
       url("../fonts/Flaticon.woff2") format("woff2"),
       url("../fonts/Flaticon.woff") format("woff"),
       url("../fonts/Flaticon.ttf") format("truetype"),
       url("../fonts/Flaticon.svg#Flaticon") format("svg");
  font-weight: normal;
  font-style: normal;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: "Flaticon";
    src: url("./Flaticon.svg#Flaticon") format("svg");
  }
}



[class^="flaticon-"]:before, [class*=" flaticon-"]:before,
[class^="flaticon-"]:after, [class*=" flaticon-"]:after  {
      display: inline-block;
  font-family: "Flaticon";
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  line-height: 1;
  text-decoration: inherit;
  text-rendering: optimizeLegibility;
  text-transform: none;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
}

.flaticon-001-motivation:before { content: "\f100"; }
.flaticon-002-ladder:before { content: "\f101"; }
.flaticon-003-leadership:before { content: "\f102"; }
.flaticon-004-organization-chart:before { content: "\f103"; }
.flaticon-005-teamwork:before { content: "\f104"; }
.flaticon-006-presentation:before { content: "\f105"; }
.flaticon-007-vision:before { content: "\f106"; }
.flaticon-008-leader:before { content: "\f107"; }
.flaticon-009-target:before { content: "\f108"; }
.flaticon-010-raise-hand:before { content: "\f109"; }
.flaticon-011-time-management:before { content: "\f10a"; }
.flaticon-012-searching:before { content: "\f10b"; }
.flaticon-013-brainstorming:before { content: "\f10c"; }
.flaticon-014-puzzle:before { content: "\f10d"; }
.flaticon-015-id-card:before { content: "\f10e"; }
.flaticon-016-teamwork:before { content: "\f10f"; }
.flaticon-017-dart-board:before { content: "\f110"; }
.flaticon-018-leadership:before { content: "\f111"; }
.flaticon-019-decision-making:before { content: "\f112"; }
.flaticon-020-key:before { content: "\f113"; }
.flaticon-021-positive-thinking:before { content: "\f114"; }
.flaticon-022-direction:before { content: "\f115"; }
.flaticon-023-cv:before { content: "\f116"; }
.flaticon-024-settings:before { content: "\f117"; }
.flaticon-025-rate:before { content: "\f118"; }
.flaticon-026-goal:before { content: "\f119"; }
.flaticon-027-agreement:before { content: "\f11a"; }
.flaticon-028-trophy:before { content: "\f11b"; }
.flaticon-029-strategy:before { content: "\f11c"; }
.flaticon-030-diploma:before { content: "\f11d"; }
.flaticon-031-performance:before { content: "\f11e"; }
.flaticon-032-growth:before { content: "\f11f"; }
.flaticon-033-strategy:before { content: "\f120"; }
.flaticon-034-torch:before { content: "\f121"; }
.flaticon-035-integrity:before { content: "\f122"; }
.flaticon-036-briefcase:before { content: "\f123"; }
.flaticon-037-leadership:before { content: "\f124"; }
.flaticon-038-start-up:before { content: "\f125"; }
.flaticon-039-speech:before { content: "\f126"; }
.flaticon-040-whistle:before { content: "\f127"; }
.flaticon-041-medal:before { content: "\f128"; }
.flaticon-042-lifebuoy:before { content: "\f129"; }
.flaticon-043-goal:before { content: "\f12a"; }
.flaticon-044-rudder:before { content: "\f12b"; }
.flaticon-045-presentation:before { content: "\f12c"; }
.flaticon-046-skills:before { content: "\f12d"; }
.flaticon-047-blind:before { content: "\f12e"; }
.flaticon-048-exchange:before { content: "\f12f"; }
.flaticon-049-success:before { content: "\f130"; }
.flaticon-050-thumbs-up:before { content: "\f131"; }



@font-face {
  font-family: "Flaticon2";
  src: url("../fonts/Flaticon2.eot");
  src: url("../fonts/Flaticon2.eot?#iefix") format("embedded-opentype"),
       url("../fonts/Flaticon2.woff2") format("woff2"),
       url("../fonts/Flaticon2.woff") format("woff"),
       url("../fonts/Flaticon2.ttf") format("truetype"),
       url("../fonts/Flaticon2.svg#Flaticon") format("svg");
  font-weight: normal;
  font-style: normal;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: "Flaticon2";
    src: url("../fonts/Flaticon2.svg#Flaticon") format("svg");
  }
}

[class^="flaticon2-"]:before, [class*=" flaticon2-"]:before,
[class^="flaticon2-"]:after, [class*=" flaticon2-"]:after  {
      display: inline-block;
  font-family: "Flaticon2";
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  line-height: 1;
  text-decoration: inherit;
  text-rendering: optimizeLegibility;
  text-transform: none;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
}

.flaticon2-001-database:before { content: "\f100"; }
.flaticon2-002-statistics:before { content: "\f101"; }
.flaticon2-003-data-gathering:before { content: "\f102"; }
.flaticon2-004-time:before { content: "\f103"; }
.flaticon2-005-investment:before { content: "\f104"; }
.flaticon2-006-forecast-analytics:before { content: "\f105"; }
.flaticon2-007-productivity:before { content: "\f106"; }
.flaticon2-008-cash-flow:before { content: "\f107"; }
.flaticon2-009-data-research:before { content: "\f108"; }
.flaticon2-010-market-analysis:before { content: "\f109"; }
.flaticon2-011-operation:before { content: "\f10a"; }
.flaticon2-012-analytics:before { content: "\f10b"; }
.flaticon2-013-growth:before { content: "\f10c"; }
.flaticon2-014-data-warehouse:before { content: "\f10d"; }
.flaticon2-015-secure:before { content: "\f10e"; }
.flaticon2-016-plan:before { content: "\f10f"; }
.flaticon2-017-process:before { content: "\f110"; }
.flaticon2-018-insight:before { content: "\f111"; }
.flaticon2-019-time-management:before { content: "\f112"; }
.flaticon2-020-vision:before { content: "\f113"; }
.flaticon2-021-sale-report:before { content: "\f114"; }
.flaticon2-022-solution:before { content: "\f115"; }
.flaticon2-023-insight:before { content: "\f116"; }
.flaticon2-024-target:before { content: "\f117"; }
.flaticon2-025-report:before { content: "\f118"; }
.flaticon2-026-decision:before { content: "\f119"; }
.flaticon2-027-profit:before { content: "\f11a"; }
.flaticon2-028-data-visualization:before { content: "\f11b"; }
.flaticon2-029-predictive-chart:before { content: "\f11c"; }
.flaticon2-030-time:before { content: "\f11d"; }


@font-face {
  font-family: "Flaticon3";
  src: url("../fonts/Flaticon3.eot");
  src: url("../fonts/Flaticon3.eot?#iefix") format("embedded-opentype"),
       url("../fonts/Flaticon3.woff2") format("woff2"),
       url("../fonts/Flaticon3.woff") format("woff"),
       url("../fonts/Flaticon3.ttf") format("truetype"),
       url("../fonts/Flaticon3.svg#Flaticon") format("svg");
  font-weight: normal;
  font-style: normal;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: "Flaticon3";
    src: url("../fonts/Flaticon.svg#Flaticon") format("svg");
  }
}

[class^="flaticon3-"]:before, [class*=" flaticon3-"]:before,
[class^="flaticon3-"]:after, [class*=" flaticon3-"]:after  {
      display: inline-block;
  font-family: "Flaticon3";
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  line-height: 1;
  text-decoration: inherit;
  text-rendering: optimizeLegibility;
  text-transform: none;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
}

.flaticon3-001-diary:before { content: "\f100"; }
.flaticon3-002-store:before { content: "\f101"; }
.flaticon3-003-pie-graph:before { content: "\f102"; }
.flaticon3-004-bank:before { content: "\f103"; }
.flaticon3-005-pie-graph:before { content: "\f104"; }
.flaticon3-006-clock:before { content: "\f105"; }
.flaticon3-007-hierarchy:before { content: "\f106"; }
.flaticon3-008-dollar-coin:before { content: "\f107"; }
.flaticon3-009-bar-graph:before { content: "\f108"; }
.flaticon3-010-flag-pole:before { content: "\f109"; }
.flaticon3-011-edc:before { content: "\f10a"; }
.flaticon3-012-price-tag:before { content: "\f10b"; }
.flaticon3-013-delivery-box:before { content: "\f10c"; }
.flaticon3-014-banknote:before { content: "\f10d"; }
.flaticon3-015-shopping-cart:before { content: "\f10e"; }
.flaticon3-016-justice-scale:before { content: "\f10f"; }
.flaticon3-017-suitcase:before { content: "\f110"; }
.flaticon3-018-equalizer:before { content: "\f111"; }
.flaticon3-019-piggy-bank:before { content: "\f112"; }
.flaticon3-020-hammer:before { content: "\f113"; }
.flaticon3-021-megaphone:before { content: "\f114"; }
.flaticon3-022-billing-machine:before { content: "\f115"; }
.flaticon3-023-money-bag:before { content: "\f116"; }
.flaticon3-024-speech-bubble:before { content: "\f117"; }
.flaticon3-025-safe-box:before { content: "\f118"; }
.flaticon3-026-shopping-basket:before { content: "\f119"; }
.flaticon3-027-laptop-screen:before { content: "\f11a"; }
.flaticon3-028-cash-register:before { content: "\f11b"; }
.flaticon3-029-pie-graph:before { content: "\f11c"; }
.flaticon3-030-trolley:before { content: "\f11d"; }
.flaticon3-031-printer:before { content: "\f11e"; }
.flaticon3-032-cv:before { content: "\f11f"; }
.flaticon3-033-dollar-coin:before { content: "\f120"; }
.flaticon3-034-space-shuttle:before { content: "\f121"; }
.flaticon3-035-map-location:before { content: "\f122"; }
.flaticon3-036-diamond:before { content: "\f123"; }
.flaticon3-037-archery:before { content: "\f124"; }
.flaticon3-038-webcam:before { content: "\f125"; }
.flaticon3-039-flask:before { content: "\f126"; }
.flaticon3-040-yen:before { content: "\f127"; }
.flaticon3-041-signal-tower:before { content: "\f128"; }
.flaticon3-042-gold-ingots:before { content: "\f129"; }
.flaticon3-043-man:before { content: "\f12a"; }
.flaticon3-044-wallet:before { content: "\f12b"; }
.flaticon3-045-pencil-box:before { content: "\f12c"; }
.flaticon3-046-rubber-stamp:before { content: "\f12d"; }
.flaticon3-047-email:before { content: "\f12e"; }
.flaticon3-048-magnifying-glass:before { content: "\f12f"; }
.flaticon3-049-book:before { content: "\f130"; }
.flaticon3-050-cloud-upload:before { content: "\f131"; }
.flaticon3-051-shopping-cart:before { content: "\f132"; }
.flaticon3-052-folders:before { content: "\f133"; }
.flaticon3-053-brain:before { content: "\f134"; }
.flaticon3-054-leadership:before { content: "\f135"; }
.flaticon3-055-camera:before { content: "\f136"; }
.flaticon3-056-globe:before { content: "\f137"; }
.flaticon3-057-bar-graph:before { content: "\f138"; }















@media (min-width: 320px) {#sp-footer  .sppb-container-inner {max-width: 400px;width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;}}
@media (min-width: 576px) {#sp-footer  .sppb-container-inner {max-width: 540px;width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;}}
@media (min-width: 768px) {#sp-footer  .sppb-container-inner {max-width: 720px;width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;}}
@media (min-width: 992px) {#sp-footer .sppb-container-inner {max-width: 960px;width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;}}
@media (min-width: 1200px) {#sp-footer  .sppb-container-inner {max-width: 1140px;width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;}}


@media (min-width: 320px) {#sp-top1  .sppb-container-inner {max-width: 400px;width: 100%;
margin-right: auto;
margin-left: auto;}}
@media (min-width: 576px) {#sp-top1  .sppb-container-inner {max-width: 540px;width: 100%;
margin-right: auto;
margin-left: auto;}}
@media (min-width: 768px) {#sp-top1  .sppb-container-inner {max-width: 720px;width: 100%;
margin-right: auto;
margin-left: auto;}}
@media (min-width: 992px) {#sp-top1 .sppb-container-inner {max-width: 960px;width: 100%;
margin-right: auto;
margin-left: auto;}}
@media (min-width: 1200px) {#sp-top1  .sppb-container-inner {max-width: 1140px;width: 100%;
margin-right: auto;
margin-left: auto;}}


@media (min-width: 320px) {#sp-top3  .sppb-container-inner {max-width: 400px;width: 100%;
margin-right: auto;
margin-left: auto;}}
@media (min-width: 576px) {#sp-top3  .sppb-container-inner {max-width: 540px;width: 100%;
margin-right: auto;
margin-left: auto;}}
@media (min-width: 768px) {#sp-top3  .sppb-container-inner {max-width: 720px;width: 100%;
margin-right: auto;
margin-left: auto;}}
@media (min-width: 992px) {#sp-top3 .sppb-container-inner {max-width: 960px;width: 100%;
margin-right: auto;
margin-left: auto;}}
@media (min-width: 1200px) {#sp-top3  .sppb-container-inner {max-width: 1140px;width: 100%;
margin-right: auto;
margin-left: auto;}}


@media (min-width: 320px) {.contained-row  .sppb-container-inner {max-width: 400px;width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;}}
@media (min-width: 576px) {.contained-row  .sppb-container-inner {max-width: 540px;width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;}}
@media (min-width: 768px) {.contained-row  .sppb-container-inner {max-width: 720px;width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;}}
@media (min-width: 992px) {.contained-row .sppb-container-inner {max-width: 960px;width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;}}
@media (min-width: 1200px) {.contained-row  .sppb-container-inner {max-width: 1140px;width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;}}

#map_inner > div:first-child {display: none !important;}

#map_inner > div > a {font-size: 0px !important; position: absolute; left: -99999999px;}



/* J4 Optimization */

.sp-megamenu-wrapper, #sp-header > .container > .container-inner > .row > div > .sp-column,
#sp-header > .row > div > .sp-column  {display: block !important;}

#sp-header .sp-module {
	margin-left: 0px !important; 
}

.media {display: flex;}
.burger-icon > span {
	display: none;
}

.offcanvas-menu > .d-flex, .breadcrumb .float-start {display: none !important;}

@media (min-width: 1400px) {#sp-footer  .sppb-container-inner {max-width: 1320px;width: 100%;
margin-right: auto;
margin-left: auto;
padding-right: 15px;
padding-left: 15px;}}

@media (min-width: 1400px) {#sp-banner  .sppb-container-inner {max-width: 1320px;width: 100%;
margin-right: auto;
margin-left: auto;
padding-right: 15px;
padding-left: 15px;}}

@media (min-width: 1400px) {#sp-bottom1  .sppb-container-inner {max-width: 1320px;width: 100%;
margin-right: auto;
margin-left: auto;
padding-right: 15px;
padding-left: 15px;}}

@media (min-width: 1400px) {#sp-top1  .sppb-container-inner {max-width: 1320px;width: 100%;
margin-right: auto;
margin-left: auto;
padding-right: 15px;
padding-left: 15px;}}

@media (min-width: 1400px) {#sp-top2  .sppb-container-inner {max-width: 1320px;width: 100%;
margin-right: auto;
margin-left: auto;
padding-right: 15px;
padding-left: 15px;}}

@media (min-width: 1400px) {#sp-top3  .sppb-container-inner {max-width: 1320px;width: 100%;
margin-right: auto;
margin-left: auto;
padding-right: 15px;
padding-left: 15px;}}

@media (min-width: 1400px) {.contained-row  .sppb-container-inner {max-width: 1320px;width: 100%;
margin-right: auto;
margin-left: auto;
padding-right: 15px;
padding-left: 15px;}}

@media (min-width: 1400px) {.sppb-row-container {max-width: 1320px;width: 100%;
margin-right: auto;
margin-left: auto;
padding-right: 15px;
padding-left: 15px;}}

@media (min-width: 1400px) {.sp-slider .sppb-container {max-width: 1320px;width: 100%;
margin-right: auto;
margin-left: auto;
padding-right: 15px;
padding-left: 15px;}}

/* Joomla/Sp Page Builder 5 Optimization */

#sp-main-body .sppb-section .sppb-row-container .sppb-row .sppb-row-column,
#sp-footer .sppb-section .sppb-row-container .sppb-row .sppb-row-column {
  position: static;
}
#sp-header .sppb-section > .sppb-row-container {padding: 0;}

.sppb-addon-title {
	display: inherit;
}

.sppb-img-container {
  display: block;
}

.sppb-icons-group-list li a {
	padding: 0px 0px 0px 15px !important;
}

/* Twitter */

.fa-twitter::before {
	content: "\e61b" !important;
}

/* FOIP website — combined stylesheet. Paste at the END of
   templates/buissantio/css/custom.css (loads last -> wins). */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700;800&family=Inter:wght@400;500;600&display=swap');

/* ===================== foip-buissantio-override.css ===================== */
/* ============================================================================
   FOIP × CIME — Buissantio (Helix Ultimate) brand override
   Append to the END of: templates/buissantio/css/custom.css  (loads last → wins)
   Aligns the template shell (nav, buttons, links, page-title, footer) with the
   homepage's CIME design system: navy #003366 + cyan #00AEEF, Montserrat + Inter.
   Supersedes the earlier navy+amber override block.
   ----------------------------------------------------------------------------
   ALSO set in backend → Template Options → Preset 1:
     primary / link / accent .... #003366
     link hover ................. #0055A5
     menu hover / active ........ #003366
     footer background .......... #001D3D   (optional)
   Then the rules below layer the cyan action accent + typography on top.
   ============================================================================ */


:root{
  /* CIME / FOIP tokens (match the homepage exactly) */
  --foip-navy:#003366; --foip-navy-deep:#001D3D; --foip-blue:#0055A5;
  --foip-cyan:#00AEEF; --foip-bg:#F7F9FC; --foip-ink:#1A1A1A; --foip-ink-soft:#4A5568;

  /* map onto Bootstrap 5 variables so most components recolor automatically */
  --bs-primary:#003366; --bs-primary-rgb:0,51,102;
  --bs-secondary:#0055A5; --bs-secondary-rgb:0,85,165;
  --bs-link-color:#0055A5; --bs-link-color-rgb:0,85,165;
  --bs-link-hover-color:#003366; --bs-link-hover-color-rgb:0,51,102;
  --bs-body-color:#1A1A1A;
}

/* ---------- typography (template ships Roboto/Spartan → CIME pairing) ---------- */
body{ font-family:'Inter', Arial, sans-serif; color:var(--foip-ink); }
body h1, body h2, body h3, body h4, body h5, body h6,
body .sppb-title, body .sppb-addon-title,
body .sp-page-title .sp-page-title-heading,
body .sp-megamenu-parent > li > a{
  font-family:'Montserrat','Inter',sans-serif;
}

/* ---------- links ---------- */
body a{ color:var(--foip-blue); }
body a:hover, body a:focus{ color:var(--foip-navy); }

/* ---------- buttons → CIME pill style ---------- */
/* primary action = cyan (matches homepage .foip-btn-primary) */
body .sppb-btn, body .btn{
  font-family:'Montserrat',sans-serif; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; border-radius:999px; padding:14px 30px;
  transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s,background .35s,color .35s;
}
body .sppb-btn.sppb-btn-primary, .btn-primary{
  background-color:var(--foip-cyan); border-color:var(--foip-cyan);
  color:var(--foip-navy-deep);
  box-shadow:0 16px 40px -12px rgba(0,174,239,.55);
}
body .sppb-btn.sppb-btn-primary:hover, body .sppb-btn.sppb-btn-primary:focus,
.btn-primary:hover, .btn-primary:focus{
  background-color:#15c2ff; border-color:#15c2ff; color:var(--foip-navy-deep);
  transform:translateY(-2px); box-shadow:0 22px 50px -12px rgba(0,174,239,.7);
}
/* secondary / dark = navy fill */
body .sppb-btn.sppb-btn-dark, body .sppb-btn.sppb-btn-secondary, .btn-dark, .btn-secondary{
  background-color:var(--foip-navy); border-color:var(--foip-navy); color:#fff;
}
body .sppb-btn.sppb-btn-dark:hover, body .sppb-btn.sppb-btn-secondary:hover{
  background-color:var(--foip-blue); border-color:var(--foip-blue); color:#fff;
}
/* ghost / outline */
body .sppb-btn.sppb-btn-default, .btn-outline-primary{
  background:transparent; border:2px solid var(--foip-navy); color:var(--foip-navy);
}
body .sppb-btn.sppb-btn-default:hover, .btn-outline-primary:hover{
  background:var(--foip-navy); color:#fff;
}

/* ---------- header / megamenu accents ---------- */
body .sp-megamenu-parent > li:hover > a,
body .sp-megamenu-parent > li.active > a,
body .sp-megamenu-parent > li.current > a{ color:var(--foip-navy); }
/* cyan underline indicator on hover (CIME nav signature) */
body .sp-megamenu-parent > li > a{ position:relative; }
body .sp-megamenu-parent > li > a::after{
  content:""; position:absolute; left:0; bottom:-2px; width:0; height:2px;
  background:var(--foip-cyan); transition:width .35s cubic-bezier(.22,1,.36,1);
}
body .sp-megamenu-parent > li:hover > a::after,
body .sp-megamenu-parent > li.active > a::after{ width:100%; }

/* ---------- page-title banner → navy (was the template blue) ---------- */
.sp-page-title{ background:linear-gradient(135deg,var(--foip-navy-deep),var(--foip-navy)); color:#fff; }
.sp-page-title .sp-page-title-heading{ color:#fff; }
.sp-page-title .breadcrumb a{ color:rgba(255,255,255,.8); }
.sp-page-title .breadcrumb .active{ color:var(--foip-cyan); }

/* ---------- footer → navy-deep ---------- */
#sp-footer, #sp-bottom{ background:var(--foip-navy-deep); }
#sp-footer a:hover, #sp-bottom a:hover{ color:var(--foip-cyan); }

/* ---------- misc accents that used the old template blue ---------- */
body .sppb-addon-title .sppb-highlight,
body .text-primary{ color:var(--foip-navy)!important; }
::selection{ background:var(--foip-cyan); color:var(--foip-navy-deep); }

/* keep the homepage Raw HTML kit consistent: its tokens already match these.
   (the .foip kit defines its own scoped --cyan/--navy; nothing to change there) */

/* ===================== foip-shell.css ===================== */
/* ============================================================================
   FOIP SHELL — top-bar + header + footer (CIME design system)
   Load AFTER foip-buissantio-override.css (append to css/custom.css, or its own
   file). Styles the Helix Ultimate wrappers (#sp-top-bar, #sp-header, #sp-footer,
   #sp-bottom) AND the custom content blocks you drop into those positions
   (.foip-shell …). Self-contained tokens — does not depend on the homepage kit.
   Pairs with foip-shell.js (adds .is-stuck to #sp-header on scroll).
   ============================================================================ */
:root{
  --foip-navy:#003366; --foip-navy-deep:#001D3D; --foip-blue:#0055A5;
  --foip-cyan:#00AEEF; --foip-ink:#1A1A1A; --foip-line:rgba(0,51,102,.10);
}

/* ---------- Helix wrappers ---------- */
#sp-top-bar{ background:var(--foip-navy-deep); color:#cdd9e7;
  font-family:'Inter',sans-serif; padding:0; border-bottom:1px solid rgba(255,255,255,.06); }
#sp-top-bar a{ color:#cdd9e7; text-decoration:none; }
#sp-top-bar a:hover{ color:var(--foip-cyan); }

#sp-header{ background:#fff; box-shadow:none;
  transition:box-shadow .35s ease, background .35s ease; }
#sp-header.is-stuck{ box-shadow:0 8px 28px -14px rgba(0,29,61,.30); }

#sp-footer, #sp-bottom{ background:var(--foip-navy-deep); }
/* hide Helix's default bottom row if you use the all-in-one footer block below */
#sp-bottom.foip-hide{ display:none; }

/* ---------- shared shell scaffolding ---------- */
.foip-shell{ font-family:'Inter',system-ui,sans-serif; }
.foip-shell *{ box-sizing:border-box; }
.foip-shell-wrap{ max-width:1280px; margin:0 auto; padding:0 clamp(20px,4vw,48px); }

/* ---------- header CTA pill (drop into the header menu/right position) ---------- */
.foip-shell .foip-btn-cta{ display:inline-flex; align-items:center; gap:9px;
  font-family:'Montserrat',sans-serif; font-weight:700; font-size:13px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--foip-navy-deep);
  background:var(--foip-cyan); padding:12px 24px; border-radius:999px;
  box-shadow:0 12px 30px -10px rgba(0,174,239,.6);
  transition:transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s; }
.foip-shell .foip-btn-cta:hover{ transform:translateY(-2px); color:var(--foip-navy-deep);
  box-shadow:0 18px 40px -10px rgba(0,174,239,.78); }

/* ---------- top-bar content ---------- */
.foip-topbar{ padding:9px 0; }
.foip-topbar .foip-shell-wrap{ display:flex; flex-wrap:wrap; gap:8px 24px;
  align-items:center; justify-content:space-between; }
.foip-topbar .tb-left, .foip-topbar .tb-right{ display:flex; flex-wrap:wrap;
  align-items:center; gap:8px 20px; }
.foip-topbar a, .foip-topbar span{ display:inline-flex; align-items:center; gap:7px;
  font-size:13px; color:#cdd9e7; }
.foip-topbar svg{ width:15px; height:15px; color:var(--foip-cyan); flex:0 0 auto; }
.foip-topbar .tb-cert{ font-weight:600; letter-spacing:.03em; color:#9fb4cc; }
.foip-topbar .tb-social a:hover{ color:var(--foip-cyan); }
@media(max-width:760px){ .foip-topbar .tb-cert{ display:none; } }

/* ---------- footer content ---------- */
.foip-footer{ background:var(--foip-navy-deep); color:#aebccd; padding:clamp(48px,7vw,80px) 0 0; }
.foip-footer .ft-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1.4fr; gap:clamp(28px,4vw,48px); }
.foip-footer h4{ font-family:'Montserrat',sans-serif; color:#fff; font-size:14px;
  letter-spacing:.08em; text-transform:uppercase; margin:0 0 18px; }
.foip-footer .ft-brand{ font-family:'Montserrat',sans-serif; font-weight:800; color:#fff;
  font-size:22px; line-height:1.05; letter-spacing:.02em; }
.foip-footer .ft-brand small{ display:block; font-weight:600; font-size:11.5px;
  letter-spacing:.18em; text-transform:uppercase; color:var(--foip-cyan); margin-top:5px; }
.foip-footer .ft-about p{ font-size:14px; line-height:1.65; margin:16px 0 18px; max-width:330px; }
.foip-footer ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; }
.foip-footer ul a{ color:#aebccd; text-decoration:none; font-size:14px; transition:color .25s, padding .25s; }
.foip-footer ul a:hover{ color:var(--foip-cyan); padding-left:4px; }
.foip-footer .ft-contact p{ font-size:13.5px; line-height:1.6; margin:0 0 12px; }
.foip-footer .ft-contact a{ color:#fff; text-decoration:none; }
.foip-footer .ft-contact a:hover{ color:var(--foip-cyan); }
.foip-footer .ft-social{ display:flex; gap:10px; margin-top:4px; }
.foip-footer .ft-social a{ width:38px; height:38px; border-radius:50%; border:1px solid rgba(255,255,255,.2);
  display:flex; align-items:center; justify-content:center; color:#fff; transition:.3s; }
.foip-footer .ft-social a:hover{ background:var(--foip-cyan); border-color:var(--foip-cyan); color:var(--foip-navy-deep); }
.foip-footer .ft-social svg{ width:18px; height:18px; }
.foip-footer .ft-certs{ margin-top:clamp(36px,5vw,56px); padding:22px 0;
  border-top:1px solid rgba(255,255,255,.1); border-bottom:1px solid rgba(255,255,255,.1);
  display:flex; flex-wrap:wrap; gap:10px 14px; justify-content:center; }
.foip-footer .ft-certs span{ font-family:'Montserrat',sans-serif; font-size:11.5px; font-weight:600;
  letter-spacing:.05em; text-transform:uppercase; color:#cdd9e7; background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12); border-radius:999px; padding:7px 14px; }
.foip-footer .ft-bottom{ display:flex; flex-wrap:wrap; gap:8px 24px; align-items:center;
  justify-content:space-between; padding:22px 0 30px; font-size:12.5px; color:#7e92a8; }
.foip-footer .ft-bottom a{ color:#aebccd; text-decoration:none; }
.foip-footer .ft-bottom a:hover{ color:var(--foip-cyan); }
.foip-footer .ft-legal{ display:flex; gap:18px; }
@media(max-width:900px){ .foip-footer .ft-grid{ grid-template-columns:1fr 1fr; } }
@media(max-width:560px){ .foip-footer .ft-grid{ grid-template-columns:1fr; } .foip-footer .ft-bottom{ justify-content:flex-start; } }

/* ===================== foip-foundation.css ===================== */
/* ============================================================================
   FOIP FOUNDATION — shared styles for all homepage sections (CIME design system)
   Load ONCE. Two options:
   (A) Template route  — paste at the END of templates/buissantio/css/custom.css
                         (loads last → wins). Recommended.
   (B) Block route     — create one SPPB "Raw HTML" block and place this CSS inside
                         a style element, together with foip-foundation.js inside a
                         script element. Place that block once, anywhere on the page.
   Every section block is wrapped in <div class="foip">…</div>, so these scoped
   rules apply to each. Accent = cyan #00AEEF (CIME house style).
   ============================================================================ */


.foip{
  --navy:#003366; --navy-deep:#001D3D; --blue:#0055A5; --cyan:#00AEEF;
  --bg:#F7F9FC; --ink:#1A1A1A; --ink-soft:#4A5568; --line:rgba(0,51,102,.10);
  --shadow-lg:0 30px 60px -20px rgba(0,29,61,.35); --shadow-md:0 18px 40px -18px rgba(0,29,61,.25);
  --r:14px; --ease:cubic-bezier(.22,1,.36,1);
  font-family:'Inter',system-ui,-apple-system,sans-serif; color:var(--ink);
  line-height:1.6; -webkit-font-smoothing:antialiased; background:var(--bg);
}
.foip *{margin:0;padding:0;box-sizing:border-box}
.foip h1,.foip h2,.foip h3,.foip .display{font-family:'Montserrat','Inter',sans-serif;font-weight:700;line-height:1.12;letter-spacing:-.015em;color:var(--navy)}
.foip img{max-width:100%;display:block}
.foip a{color:inherit;text-decoration:none}
.foip :focus-visible{outline:3px solid var(--cyan);outline-offset:3px;border-radius:4px}

/* shared */
.foip .wrap{max-width:1280px;margin:0 auto;padding:0 clamp(20px,4vw,48px)}
.foip .sec{padding:clamp(64px,9vw,128px) 0}
.foip .eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:12px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--blue)}
.foip .eyebrow::before{content:"";width:34px;height:2px;background:var(--cyan)}
.foip .sec-head{max-width:720px;margin-bottom:clamp(36px,5vw,60px)}
.foip .sec-head h2{font-size:clamp(28px,4.2vw,50px);margin:14px 0 16px}
.foip .sec-head p{color:var(--ink-soft);font-size:clamp(15px,1.4vw,18px)}
.foip .sec-head.cv{margin-left:auto;margin-right:auto;text-align:center}
.foip .reveal{opacity:0;transform:translateY(34px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.foip .reveal.in{opacity:1;transform:none}
.foip .reveal[data-d="1"]{transition-delay:.08s}.foip .reveal[data-d="2"]{transition-delay:.16s}
.foip .reveal[data-d="3"]{transition-delay:.24s}.foip .reveal[data-d="4"]{transition-delay:.32s}.foip .reveal[data-d="5"]{transition-delay:.40s}

/* buttons */
.foip .foip-btn{display:inline-flex;align-items:center;gap:12px;font-family:'Montserrat';font-weight:700;font-size:14px;letter-spacing:.12em;text-transform:uppercase;padding:18px 34px;border-radius:999px;border:2px solid transparent;transition:transform .35s var(--ease),box-shadow .35s,background .35s,color .35s;will-change:transform;cursor:pointer}
.foip .foip-btn svg{width:16px;height:16px;transition:transform .35s var(--ease)}
.foip .foip-btn-primary{background:var(--cyan);color:var(--navy-deep);box-shadow:0 16px 40px -12px rgba(0,174,239,.6)}
.foip .foip-btn-primary:hover{box-shadow:0 22px 50px -12px rgba(0,174,239,.78)}
.foip .foip-btn-primary:hover svg{transform:translateX(4px)}
.foip .foip-btn-ghost{border-color:var(--navy);color:var(--navy);background:transparent}
.foip .foip-btn-ghost:hover{background:var(--navy);color:#fff}
.foip .foip-btn-light{border-color:rgba(255,255,255,.5);color:#fff;background:transparent}
.foip .foip-btn-light:hover{background:rgba(255,255,255,.12)}

/* photo placeholder */
.foip .ph{position:relative;width:100%;height:100%;overflow:hidden;background:radial-gradient(120% 90% at 80% 0%,rgba(0,174,239,.35),transparent 55%),radial-gradient(120% 110% at 10% 100%,rgba(0,85,165,.55),transparent 60%),linear-gradient(160deg,#0A2540 0%,#003366 45%,#00528F 100%)}
.foip .ph::before{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,18,38,.55),transparent 45%),repeating-linear-gradient(0deg,transparent 0 3px,rgba(255,255,255,.025) 3px 4px)}
.foip .ph svg{position:absolute;inset:0;width:100%;height:100%;opacity:.5}
.foip .ph .tag{position:absolute;left:14px;bottom:12px;z-index:2;font-size:10px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.85);background:rgba(0,29,61,.45);border:1px solid rgba(255,255,255,.25);padding:5px 10px;border-radius:6px;backdrop-filter:blur(6px)}
.foip .ph.v2{background:radial-gradient(110% 90% at 20% 10%,rgba(0,174,239,.4),transparent 50%),linear-gradient(200deg,#062A4F,#0055A5 70%,#0A77C2)}
.foip .ph.v3{background:radial-gradient(130% 100% at 70% 100%,rgba(0,174,239,.45),transparent 55%),linear-gradient(140deg,#001D3D,#073B6B 60%,#0061B0)}
.foip .ph.v4{background:radial-gradient(100% 100% at 50% 0%,rgba(120,200,255,.35),transparent 60%),linear-gradient(180deg,#0B3D6E,#002B57)}

/* 1 hero */
.foip .hero{position:relative;min-height:max(620px,92svh);display:flex;align-items:flex-end;overflow:hidden}
.foip .hero-bg{position:absolute;inset:-12% 0;will-change:transform}
.foip .hero-bg .ph svg{opacity:.6}
.foip .hero-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,18,38,.93) 0%,rgba(0,29,61,.58) 45%,rgba(0,29,61,.4) 100%)}
.foip .hero-content{position:relative;z-index:2;padding-bottom:clamp(72px,11vh,128px);padding-top:clamp(90px,14vh,150px);color:#fff;max-width:880px}
.foip .hero .eyebrow{color:var(--cyan)}
.foip .hero h1{font-size:clamp(36px,6.2vw,80px);font-weight:800;margin:20px 0 14px;color:#fff}
.foip .hero h1 em{font-style:normal;color:var(--cyan)}
.foip .hero h1 .w{display:inline-block;overflow:hidden;vertical-align:bottom}
.foip .hero h1 .w span{display:inline-block;transform:translateY(110%);animation:foipRise 1s var(--ease) forwards}
@keyframes foipRise{to{transform:none}}
.foip .hero-tag{font-family:'Montserrat';font-weight:600;color:#9fd0ee;font-size:clamp(15px,1.9vw,20px);margin-bottom:20px}
.foip .hero p{font-size:clamp(16px,1.7vw,20px);color:rgba(255,255,255,.82);max-width:640px;margin-bottom:36px}
.foip .hero-cta{display:flex;flex-wrap:wrap;gap:14px}
.foip .hero-meta{position:absolute;right:clamp(20px,4vw,48px);bottom:30px;z-index:2;display:flex;gap:26px;color:rgba(255,255,255,.62);font-size:11px;letter-spacing:.16em;text-transform:uppercase}
.foip .scroll-cue{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);z-index:2;display:flex;flex-direction:column;align-items:center;gap:8px;color:rgba(255,255,255,.7);font-size:10px;letter-spacing:.3em;text-transform:uppercase}
.foip .scroll-cue .pill{width:26px;height:42px;border:2px solid rgba(255,255,255,.45);border-radius:999px;position:relative}
.foip .scroll-cue .pill::after{content:"";position:absolute;left:50%;top:8px;width:4px;height:8px;border-radius:4px;background:var(--cyan);transform:translateX(-50%);animation:foipCue 1.8s ease-in-out infinite}
@keyframes foipCue{0%{opacity:0;top:8px}30%{opacity:1}100%{opacity:0;top:22px}}
@media(max-width:760px){.foip .hero-meta{display:none}}

/* 2 stats */
.foip .stats{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.foip .stat-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(18px,3vw,40px)}
.foip .stat{padding:24px 0;border-top:3px solid var(--cyan)}
.foip .stat .num{font-family:'Montserrat';font-weight:800;font-size:clamp(32px,3.8vw,52px);color:var(--navy);line-height:1;display:flex;align-items:baseline}
.foip .stat .num i{font-style:normal;color:var(--cyan);font-size:.62em;margin-left:3px}
.foip .stat .lbl{margin-top:10px;font-size:12px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-soft)}
@media(max-width:1000px){.foip .stat-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.foip .stat-grid{grid-template-columns:repeat(2,1fr)}}

/* 3 about */
.foip .about-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,5vw,64px);align-items:center}
.foip .about-media{position:relative;border-radius:18px;overflow:hidden;min-height:420px;box-shadow:var(--shadow-md)}
@media(max-width:900px){.foip .about-grid{grid-template-columns:1fr}.foip .about-media{min-height:300px}}
.foip .about p{color:var(--ink-soft);font-size:clamp(15px,1.4vw,17px);margin-bottom:18px}

/* 4 scope */
.foip .scope{background:var(--bg)}
.foip .fgrid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(14px,1.8vw,22px)}
.foip .fcard{position:relative;border-radius:var(--r);overflow:hidden;min-height:300px;box-shadow:var(--shadow-md);color:#fff}
.foip .fcard .ph{transition:transform 1.1s var(--ease)}
.foip .fcard:hover .ph{transform:scale(1.06)}
.foip .fcard.big{min-height:440px}
.foip .fc-s7{grid-column:span 7}.foip .fc-s5{grid-column:span 5}.foip .fc-s4{grid-column:span 4}
@media(max-width:900px){.foip .fc-s7,.foip .fc-s5,.foip .fc-s4{grid-column:span 12;min-height:300px}}
.foip .fcap{position:absolute;inset:auto 0 0 0;padding:26px;z-index:3;background:linear-gradient(to top,rgba(0,18,38,.9),transparent)}
.foip .fcap .ico{width:42px;height:42px;border-radius:11px;background:rgba(0,174,239,.18);border:1px solid rgba(0,174,239,.5);display:flex;align-items:center;justify-content:center;margin-bottom:12px}
.foip .fcap .ico svg{width:22px;height:22px;color:var(--cyan)}
.foip .fcap h3{font-size:clamp(18px,1.9vw,24px);color:#fff;margin-bottom:6px}
.foip .fcap p{font-size:14px;color:rgba(255,255,255,.8);max-width:520px}

/* 5 industries */
.foip .ind{background:linear-gradient(180deg,var(--navy-deep),var(--navy));color:#fff;position:relative;overflow:hidden}
.foip .ind::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 60% at 85% 0%,rgba(0,174,239,.16),transparent 60%)}
.foip .ind .wrap{position:relative}
.foip .ind .sec-head h2{color:#fff}.foip .ind .sec-head p{color:rgba(255,255,255,.72)}.foip .ind .eyebrow{color:var(--cyan)}
.foip .ind-row{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.foip .ind-card{border:1px solid rgba(255,255,255,.16);border-radius:14px;padding:24px;background:rgba(255,255,255,.03);transition:.35s var(--ease)}
.foip .ind-card:hover{background:rgba(255,255,255,.07);border-color:var(--cyan);transform:translateY(-4px)}
.foip .ind-card svg{width:30px;height:30px;color:var(--cyan);margin-bottom:14px}
.foip .ind-card h4{color:#fff;font-family:'Montserrat';font-size:17px;margin-bottom:6px}
.foip .ind-card p{color:#aebccd;font-size:13.5px}
@media(max-width:820px){.foip .ind-row{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.foip .ind-row{grid-template-columns:1fr}}

/* 6 why */
.foip .why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,22px)}
.foip .why-item{display:flex;gap:16px;padding:24px;border:1px solid var(--line);border-radius:16px;background:#fff;transition:transform .35s var(--ease),box-shadow .35s}
.foip .why-item:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.foip .why-item .b{flex:0 0 48px;height:48px;border-radius:12px;background:var(--navy);display:flex;align-items:center;justify-content:center}
.foip .why-item .b svg{width:24px;height:24px;color:var(--cyan)}
.foip .why-item h4{font-family:'Montserrat';font-size:16px;color:var(--navy);margin-bottom:5px}
.foip .why-item p{font-size:13.5px;color:var(--ink-soft)}
@media(max-width:820px){.foip .why-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.foip .why-grid{grid-template-columns:1fr}}

/* 7 track */
.foip .track{background:linear-gradient(180deg,var(--navy),var(--navy-deep));color:#fff;position:relative;overflow:hidden}
.foip .track::before{content:"";position:absolute;inset:0;background:radial-gradient(55% 50% at 15% 10%,rgba(0,174,239,.14),transparent 60%)}
.foip .track .wrap{position:relative}
.foip .track .sec-head h2{color:#fff}.foip .track .sec-head p{color:rgba(255,255,255,.72)}.foip .track .eyebrow{color:var(--cyan)}
.foip .tl{position:relative}
.foip .tl::before{content:"";position:absolute;left:27px;top:8px;bottom:8px;width:2px;background:linear-gradient(var(--cyan),rgba(0,174,239,.12))}
.foip .tstep{position:relative;display:grid;grid-template-columns:56px 1fr;gap:26px;padding:22px 0}
.foip .tstep .dot{width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(0,174,239,.12);border:2px solid var(--cyan);color:var(--cyan);font-family:'Montserrat';font-weight:700;font-size:14px;z-index:2;transition:all .4s var(--ease)}
.foip .tstep:hover .dot{background:var(--cyan);color:var(--navy-deep);box-shadow:0 0 0 10px rgba(0,174,239,.15)}
.foip .tbody{border-bottom:1px solid rgba(255,255,255,.08);padding-bottom:22px}
.foip .tbody h3{font-size:clamp(18px,2vw,23px);color:#fff;margin-bottom:6px}
.foip .tbody h3 small{display:block;font-family:'Inter';font-weight:600;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--cyan);margin-bottom:6px}
.foip .tbody p{font-size:14px;color:rgba(255,255,255,.72);max-width:620px}
.foip .track-cta{margin-top:30px}
.foip .hl-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:42px}
.foip .hl{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:20px}
.foip .hl b{font-family:'Montserrat';font-size:26px;font-weight:800;color:var(--cyan);display:block;line-height:1}
.foip .hl span{display:block;margin-top:8px;font-size:12.5px;color:rgba(255,255,255,.72)}
@media(max-width:820px){.foip .hl-row{grid-template-columns:1fr 1fr}}

/* 8 technology */
.foip .tech-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,48px);align-items:center}
@media(max-width:900px){.foip .tech-grid{grid-template-columns:1fr}}
.foip .tech-list{margin-top:20px;display:flex;flex-direction:column;gap:14px}
.foip .tech-list .row{display:flex;gap:12px;align-items:flex-start}
.foip .tech-list svg{flex:0 0 22px;width:22px;height:22px;color:var(--blue);margin-top:2px}
.foip .tech-list b{color:var(--navy);font-family:'Montserrat'}
.foip .tech-list span{color:var(--ink-soft);font-size:14.5px}
.foip .tech-panel{background:linear-gradient(135deg,var(--navy),var(--blue));border-radius:20px;padding:clamp(26px,3vw,38px);color:#fff;box-shadow:var(--shadow-lg)}
.foip .tech-panel .pill-tag{display:inline-block;font-family:'Montserrat';font-weight:700;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--navy-deep);background:var(--cyan);padding:6px 12px;border-radius:999px}
.foip .tech-panel h3{color:#fff;font-size:clamp(20px,2.2vw,26px);margin:16px 0 10px}
.foip .tech-panel p{color:rgba(255,255,255,.8);font-size:14.5px}
.foip .tech-mini{display:flex;flex-wrap:wrap;gap:9px;margin-top:20px}
.foip .tech-mini span{font-size:12px;font-weight:600;color:#fff;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);border-radius:999px;padding:7px 14px;font-family:'Montserrat'}

/* 9 clients */
.foip .clients{background:var(--bg)}
.foip .logos{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.foip .chip-c{font-family:'Montserrat';font-weight:700;font-size:15px;color:var(--navy);background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 22px;transition:.35s var(--ease)}
.foip .chip-c:hover{border-color:var(--cyan);transform:translateY(-3px);box-shadow:var(--shadow-md)}
.foip .sub-label{text-align:center;margin-top:42px;font-family:'Montserrat';font-weight:700;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.foip .brands{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:18px}
.foip .brand{font-size:13.5px;font-weight:600;color:var(--ink-soft);background:#fff;border:1px solid var(--line);border-radius:8px;padding:10px 16px}

/* 10 contact */
.foip .cta{background:var(--navy-deep);color:#fff;text-align:center}
.foip .cta h2{color:#fff;font-size:clamp(28px,3.6vw,46px)}
.foip .cta>.wrap>p,.foip .cta>p{color:rgba(255,255,255,.78);font-size:clamp(16px,1.5vw,19px);max-width:640px;margin:16px auto 0}
.foip .cta-btns{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:30px}
.foip .offices{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:54px;text-align:left}
.foip .office{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.13);border-radius:14px;padding:24px}
.foip .office .t{font-family:'Montserrat';font-weight:700;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--cyan)}
.foip .office h4{font-family:'Montserrat';color:#fff;font-size:17px;margin:7px 0 10px}
.foip .office p{color:rgba(255,255,255,.74);font-size:13.5px;line-height:1.55}
.foip .office a{color:#fff;font-weight:600}
@media(max-width:820px){.foip .offices{grid-template-columns:1fr}}

@media(prefers-reduced-motion:reduce){
  .foip *,.foip *::before,.foip *::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .foip .reveal{opacity:1;transform:none}
  .foip .hero h1 .w span{transform:none;animation:none}
}

/* ===================== foip-projects.css ===================== */
/* ============================================================================
   FOIP PROJECTS — add-on styles (load AFTER foip-foundation.css)
   Adds: page header, filterable gallery, lightbox, experience list.
   Scoped under .foip, reuses the foundation tokens (--navy / --cyan / etc.).
   ============================================================================ */

/* page header */
.foip .page-hero{position:relative;background:linear-gradient(135deg,var(--navy-deep),var(--navy));color:#fff;overflow:hidden;padding:clamp(110px,17vh,180px) 0 clamp(56px,9vh,88px)}
.foip .page-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 70% at 82% 0%,rgba(0,174,239,.20),transparent 60%)}
.foip .page-hero .wrap{position:relative}
.foip .page-hero .eyebrow{color:var(--cyan)}
.foip .page-hero h1{color:#fff;font-size:clamp(34px,5.4vw,66px);font-weight:800;margin:16px 0 14px}
.foip .page-hero p{color:rgba(255,255,255,.82);font-size:clamp(16px,1.6vw,19px);max-width:640px}

/* filter chips */
.foip .proj-filter{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:clamp(28px,4vw,44px)}
.foip .fchip{font-family:'Montserrat';font-weight:700;font-size:12px;letter-spacing:.1em;text-transform:uppercase;padding:11px 20px;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--navy);cursor:pointer;transition:.35s var(--ease)}
.foip .fchip:hover{border-color:var(--cyan);color:var(--blue)}
.foip .fchip.active{background:var(--navy);border-color:var(--navy);color:#fff}

/* gallery */
.foip .proj-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:16px}
.foip .proj{position:relative;border-radius:14px;overflow:hidden;cursor:pointer;aspect-ratio:4/3;background:var(--navy);box-shadow:var(--shadow-md);outline:none}
.foip .proj.hide{display:none}
.foip .proj.pop{animation:foipPop .5s var(--ease) both}
@keyframes foipPop{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
.foip .proj-media{position:absolute;inset:0}
.foip .proj-media .ph{height:100%;transition:transform 1s var(--ease)}
.foip .proj-media img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.foip .proj:hover .ph,.foip .proj:hover img,.foip .proj:focus-visible .ph{transform:scale(1.07)}
.foip .proj:focus-visible{outline:3px solid var(--cyan);outline-offset:3px}
.foip .proj .zoom{position:absolute;top:12px;right:12px;z-index:4;width:34px;height:34px;border-radius:50%;background:rgba(0,174,239,.9);color:var(--navy-deep);display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:700;opacity:0;transform:scale(.7);transition:.35s var(--ease)}
.foip .proj:hover .zoom,.foip .proj:focus-visible .zoom{opacity:1;transform:none}
.foip .proj-cap{position:absolute;inset:auto 0 0 0;z-index:3;padding:18px 16px 16px;background:linear-gradient(to top,rgba(0,18,38,.92),rgba(0,18,38,.1) 80%,transparent);color:#fff}
.foip .proj-cap .c{font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--cyan)}
.foip .proj-cap h4{font-family:'Montserrat';font-size:15px;color:#fff;margin-top:4px;line-height:1.25}

/* lightbox */
.foip .lb{position:fixed;inset:0;z-index:99999;display:none;align-items:center;justify-content:center;padding:clamp(16px,4vw,40px);background:rgba(0,18,38,.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.foip .lb.open{display:flex}
.foip .lb-card{position:relative;max-width:920px;width:100%;background:var(--navy-deep);border-radius:18px;overflow:hidden;box-shadow:var(--shadow-lg);animation:foipLbIn .45s var(--ease) both}
@keyframes foipLbIn{from{opacity:0;transform:translateY(20px) scale(.98)}to{opacity:1;transform:none}}
.foip .lb-stage{position:relative;aspect-ratio:16/10;background:var(--navy)}
.foip .lb-stage .ph{position:absolute;inset:0;width:100%;height:100%}
.foip .lb-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.foip .lb-body{padding:22px clamp(20px,3vw,30px) 26px;color:#fff}
.foip .lb-body .lb-c{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--cyan)}
.foip .lb-body .lb-title{font-family:'Montserrat';font-size:clamp(18px,2.2vw,24px);color:#fff;margin:6px 0 8px}
.foip .lb-body .lb-desc{color:rgba(255,255,255,.78);font-size:14.5px;max-width:680px}
.foip .lb-close{position:absolute;top:14px;right:14px;z-index:5;width:40px;height:40px;border:none;border-radius:50%;background:rgba(0,0,0,.4);color:#fff;font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.3s}
.foip .lb-close:hover{background:var(--cyan);color:var(--navy-deep)}
.foip .lb-nav{position:absolute;top:0;bottom:38%;width:54px;display:flex;align-items:center;justify-content:center;z-index:4;cursor:pointer;border:none;background:transparent;color:#fff;font-size:30px;transition:.3s}
.foip .lb-nav:hover{color:var(--cyan)}
.foip .lb-prev{left:0}.foip .lb-next{right:0}
@media(max-width:560px){.foip .lb-nav{bottom:48%}}

/* experience list */
.foip .xp{border-top:1px solid var(--line)}
.foip .xp-row{display:grid;grid-template-columns:128px 1fr auto;gap:22px;align-items:center;padding:18px 14px;border-bottom:1px solid var(--line);transition:background .3s,box-shadow .3s,transform .3s var(--ease)}
.foip .xp-row:hover{background:#fff;box-shadow:var(--shadow-md);transform:translateX(4px);border-radius:10px;border-color:transparent}
.foip .xp-yr{font-family:'Montserrat';font-weight:800;color:var(--navy);font-size:14px;letter-spacing:.02em}
.foip .xp-main .cl{font-family:'Montserrat';font-weight:700;color:var(--navy);font-size:16px}
.foip .xp-main .sc{color:var(--ink-soft);font-size:13.5px;margin-top:2px}
.foip .xp-tag{justify-self:end;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--blue);background:rgba(0,174,239,.1);border:1px solid rgba(0,174,239,.3);border-radius:999px;padding:5px 12px;white-space:nowrap}
@media(max-width:680px){
  .foip .xp-row{grid-template-columns:1fr;gap:5px;padding:16px 4px}
  .foip .xp-tag{justify-self:start;margin-top:6px}
}

/* ===================== foip-pages.css ===================== */
/* ============================================================================
   FOIP PAGES — About + Services add-on (load AFTER foip-foundation.css)
   Scoped .foip, reuses foundation tokens. Pairs with foip-pages.js (services
   scrollspy + offset scroll).
   ============================================================================ */

/* ---------- ABOUT: story split ---------- */
.foip .story-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,5vw,64px);align-items:center}
.foip .story-media{position:relative;border-radius:18px;overflow:hidden;min-height:420px;box-shadow:var(--shadow-md)}
@media(max-width:900px){.foip .story-grid{grid-template-columns:1fr}.foip .story-media{min-height:300px}}
.foip .story p{color:var(--ink-soft);font-size:clamp(15px,1.4vw,17px);margin-bottom:16px}

/* ---------- ABOUT: global footprint (dark band) ---------- */
.foip .footprint{background:linear-gradient(180deg,var(--navy-deep),var(--navy));color:#fff;position:relative;overflow:hidden}
.foip .footprint::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 70% at 80% 0%,rgba(0,174,239,.16),transparent 60%)}
.foip .footprint .wrap{position:relative}
.foip .footprint .sec-head h2{color:#fff}.foip .footprint .sec-head p{color:rgba(255,255,255,.74)}.foip .footprint .eyebrow{color:var(--cyan)}
.foip .countries{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:8px}
.foip .country{font-family:'Montserrat';font-weight:700;font-size:14px;color:#fff;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:12px 20px;transition:.35s var(--ease)}
.foip .country:hover{border-color:var(--cyan);transform:translateY(-3px)}
.foip .country.hq{background:rgba(0,174,239,.14);border-color:var(--cyan)}
.foip .country.hq b{color:var(--cyan);font-size:10px;letter-spacing:.14em;display:block;margin-bottom:2px}

/* ---------- ABOUT: branches ---------- */
.foip .branches{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.foip .branch{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:var(--shadow-md);transition:transform .35s var(--ease)}
.foip .branch:hover{transform:translateY(-4px)}
.foip .branch .bmedia{position:relative;height:170px}
.foip .branch .bmedia .ph{height:100%}
.foip .branch .bbody{padding:22px}
.foip .branch .btag{font-family:'Montserrat';font-weight:700;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--cyan)}
.foip .branch h4{font-family:'Montserrat';color:var(--navy);font-size:18px;margin:6px 0 10px}
.foip .branch p{color:var(--ink-soft);font-size:13.5px;line-height:1.6}
.foip .branch a{color:var(--blue);font-weight:600;text-decoration:none}
@media(max-width:860px){.foip .branches{grid-template-columns:1fr}}

/* 4-col variant for values/certs (reuses .why-item) */
.foip .why-grid.cols4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.foip .why-grid.cols4{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.foip .why-grid.cols4{grid-template-columns:1fr}}

/* ---------- SERVICES: sticky sub-nav ---------- */
.foip .svc-nav{position:sticky;top:0;z-index:30;background:rgba(247,249,252,.92);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
/* if the Helix header is sticky, set: .foip .svc-nav{top:72px} to sit beneath it */
.foip .svc-nav .wrap{display:flex;gap:8px;overflow-x:auto;padding-top:14px;padding-bottom:14px;scrollbar-width:none}
.foip .svc-nav .wrap::-webkit-scrollbar{display:none}
.foip .svc-nav a{flex:0 0 auto;font-family:'Montserrat';font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--navy);padding:10px 16px;border-radius:999px;border:1px solid var(--line);text-decoration:none;white-space:nowrap;transition:.3s var(--ease)}
.foip .svc-nav a:hover{border-color:var(--cyan);color:var(--blue)}
.foip .svc-nav a.active{background:var(--navy);color:#fff;border-color:var(--navy)}

/* ---------- SERVICES: alternating service blocks ---------- */
.foip .svc{scroll-margin-top:110px;border-bottom:1px solid var(--line)}
.foip .svc .wrap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,56px);align-items:center}
.foip .svc-media{position:relative;border-radius:16px;overflow:hidden;min-height:360px;box-shadow:var(--shadow-md)}
.foip .svc.rev .svc-media{order:2}
.foip .svc-num{font-family:'Montserrat';font-weight:800;font-size:14px;color:var(--cyan);letter-spacing:.1em}
.foip .svc h2{font-size:clamp(25px,3.2vw,38px);margin:8px 0 14px}
.foip .svc>.wrap>div>p{color:var(--ink-soft);font-size:16px}
.foip .svc-list{margin-top:20px;display:grid;grid-template-columns:1fr 1fr;gap:11px 20px;padding:0}
.foip .svc-list li{list-style:none;display:flex;gap:9px;align-items:flex-start;font-size:14px;color:var(--ink)}
.foip .svc-list svg{flex:0 0 18px;width:18px;height:18px;color:var(--cyan);margin-top:3px}
.foip .svc-cta{margin-top:24px}
@media(max-width:860px){
  .foip .svc .wrap{grid-template-columns:1fr}
  .foip .svc.rev .svc-media{order:0}
  .foip .svc-list{grid-template-columns:1fr}
  .foip .svc-media{min-height:260px}
}

/* ===================== foip-contact.css ===================== */
/* ============================================================================
   FOIP CONTACT — add-on (load AFTER foip-foundation.css; needs foip-projects.css
   for .page-hero). Contact split, info cards, RFQ form. Pairs with foip-contact.js.
   ============================================================================ */
.foip .contact-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(28px,4vw,52px);align-items:start}
@media(max-width:920px){.foip .contact-grid{grid-template-columns:1fr}}

/* info side */
.foip .cinfo{display:flex;flex-direction:column;gap:14px}
.foip .cinfo .item{display:flex;gap:14px;align-items:flex-start;padding:18px;border:1px solid var(--line);border-radius:14px;background:#fff;transition:transform .35s var(--ease),box-shadow .35s}
.foip .cinfo .item:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.foip .cinfo .item .ic{flex:0 0 44px;height:44px;border-radius:11px;background:var(--navy);display:flex;align-items:center;justify-content:center}
.foip .cinfo .item .ic svg{width:22px;height:22px;color:var(--cyan)}
.foip .cinfo .item h4{font-family:'Montserrat';color:var(--navy);font-size:15px;margin:0 0 4px}
.foip .cinfo .item p{font-size:13.5px;color:var(--ink-soft);line-height:1.55;margin:0}
.foip .cinfo .item a{color:var(--blue);text-decoration:none}
.foip .cinfo .item a:hover{color:var(--navy)}

/* form card */
.foip .rfq{background:#fff;border:1px solid var(--line);border-radius:18px;padding:clamp(24px,3vw,38px);box-shadow:var(--shadow-md)}
.foip .rfq h3{font-family:'Montserrat';color:var(--navy);font-size:clamp(20px,2.4vw,26px);margin:0 0 6px}
.foip .rfq .sub{color:var(--ink-soft);font-size:14px;margin:0 0 22px}
.foip .field{margin-bottom:16px}
.foip .field.cols{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:560px){.foip .field.cols{grid-template-columns:1fr}}
.foip .rfq label{display:block;font-family:'Montserrat';font-weight:600;font-size:12px;letter-spacing:.03em;color:var(--navy);margin-bottom:7px}
.foip .rfq label .req{color:var(--cyan)}
.foip .rfq input,.foip .rfq select,.foip .rfq textarea{width:100%;font-family:'Inter';font-size:15px;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:13px 14px;transition:border-color .25s,box-shadow .25s,background .25s}
.foip .rfq textarea{min-height:130px;resize:vertical}
.foip .rfq input:focus,.foip .rfq select:focus,.foip .rfq textarea:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 3px rgba(0,174,239,.15);background:#fff}
.foip .rfq input:invalid:not(:placeholder-shown){border-color:#E2A4A4}
.foip .hp{position:absolute!important;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.foip .rfq-submit{margin-top:4px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.foip .form-note{font-size:12px;color:var(--ink-soft);max-width:280px}
.foip .form-msg{display:none;margin-top:18px;padding:14px 16px;border-radius:10px;font-size:14px;line-height:1.5}
.foip .form-msg.ok{display:block;background:rgba(0,174,239,.1);border:1px solid rgba(0,174,239,.4);color:var(--navy)}
.foip .form-msg.err{display:block;background:#FDECEC;border:1px solid #F2B8B8;color:#9B1C1C}
.foip .rfq.is-sending .foip-btn{opacity:.6;pointer-events:none}

/* map */
.foip .map-embed{border-radius:18px;overflow:hidden;box-shadow:var(--shadow-md);min-height:360px;position:relative;border:1px solid var(--line)}
.foip .map-embed iframe{display:block;width:100%;height:100%;min-height:360px;border:0}

/* ===================== foip-products.css ===================== */
/* ============================================================================
   FOIP PRODUCTS — add-on (load AFTER foip-foundation.css; needs foip-projects.css
   for .page-hero). Product categories reuse .why-grid/.why-item from the
   foundation; this file adds the authorized-brand grid.
   ============================================================================ */
.foip .pbrand-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.foip .pbrand{background:#fff;border:1px solid var(--line);border-radius:16px;padding:24px;transition:transform .35s var(--ease),box-shadow .35s,border-color .35s}
.foip .pbrand:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--cyan)}
.foip .pbrand .logo{height:34px;display:flex;align-items:center;font-family:'Montserrat';font-weight:800;color:var(--navy);font-size:18px;letter-spacing:.01em;margin-bottom:12px}
/* swap .logo text for a real logo: <img class="logo" src="…" alt="Brand"> */
.foip .pbrand p{color:var(--ink-soft);font-size:13.5px;line-height:1.55;margin:0}
.foip .pbrand .role{display:inline-block;margin-top:12px;font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--blue);background:rgba(0,174,239,.1);border:1px solid rgba(0,174,239,.3);border-radius:999px;padding:5px 11px}
@media(max-width:860px){.foip .pbrand-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.foip .pbrand-grid{grid-template-columns:1fr}}

/* ===================== foip-careers.css ===================== */
/* ============================================================================
   FOIP CAREERS — add-on (load AFTER foip-foundation.css; needs foip-projects.css
   for .page-hero and foip-contact.css/js for the application form).
   Adds job listing cards + discipline chips. Benefits reuse .why-grid.
   ============================================================================ */
.foip .disc{display:flex;flex-wrap:wrap;gap:10px}
.foip .disc span{font-family:'Montserrat';font-weight:600;font-size:13px;color:var(--navy);background:#fff;border:1px solid var(--line);border-radius:999px;padding:11px 18px;transition:.3s var(--ease)}
.foip .disc span:hover{border-color:var(--cyan);transform:translateY(-2px);box-shadow:var(--shadow-md)}

.foip .jobs{display:flex;flex-direction:column;gap:14px}
.foip .job{display:grid;grid-template-columns:1fr auto;gap:18px 26px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px 24px;transition:transform .35s var(--ease),box-shadow .35s,border-color .35s}
.foip .job:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--cyan)}
.foip .job .jtitle{font-family:'Montserrat';font-weight:700;color:var(--navy);font-size:18px}
.foip .job .jmeta{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:9px}
.foip .job .jmeta span{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ink-soft);font-weight:600}
.foip .job .jmeta svg{width:14px;height:14px;color:var(--cyan);flex:0 0 auto}
.foip .job .jdesc{color:var(--ink-soft);font-size:14px;margin-top:10px;max-width:660px;line-height:1.55}
.foip .job .japply{justify-self:end}
@media(max-width:680px){.foip .job{grid-template-columns:1fr}.foip .job .japply{justify-self:start}}

.foip .cv-callout{margin-top:22px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;background:linear-gradient(135deg,var(--navy),var(--blue));color:#fff;border-radius:16px;padding:24px 28px}
.foip .cv-callout p{margin:0;font-size:15px;color:rgba(255,255,255,.88);max-width:560px}
.foip .cv-callout p strong{color:#fff;font-family:'Montserrat'}

/* ===================== foip-news.css ===================== */
/* ============================================================================
   FOIP NEWS — add-on (load AFTER foip-foundation.css; needs foip-projects.css
   for .page-hero, foip-contact.js for the newsletter form). Blog grid, newsletter
   panel, single-article reading layout, and an optional skin for the SP Page
   Builder "Articles" addon so a dynamic feed matches the static grid.
   ============================================================================ */

/* ---------- blog grid ---------- */
.foip .news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.foip .npost{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;text-decoration:none;transition:transform .35s var(--ease),box-shadow .35s,border-color .35s}
.foip .npost:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:transparent}
.foip .npost .nmedia{position:relative;aspect-ratio:16/10;overflow:hidden}
.foip .npost .nmedia .ph{height:100%;transition:transform 1s var(--ease)}
.foip .npost .nmedia img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.foip .npost:hover .nmedia .ph,.foip .npost:hover .nmedia img{transform:scale(1.06)}
.foip .npost .ncat{position:absolute;top:12px;left:12px;z-index:2;font-family:'Montserrat';font-weight:700;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--navy-deep);background:var(--cyan);padding:5px 11px;border-radius:6px}
.foip .npost .nbody{padding:22px;display:flex;flex-direction:column;flex:1}
.foip .npost time{font-size:12.5px;color:var(--ink-soft);font-weight:600}
.foip .npost h3{font-family:'Montserrat';color:var(--navy);font-size:18px;line-height:1.3;margin:8px 0 10px}
.foip .npost p{color:var(--ink-soft);font-size:14px;flex:1;margin:0}
.foip .npost .nmore{margin-top:16px;display:inline-flex;align-items:center;gap:7px;font-family:'Montserrat';font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--blue)}
.foip .npost .nmore svg{width:15px;height:15px;transition:transform .35s var(--ease)}
.foip .npost:hover .nmore svg{transform:translateX(3px)}
@media(max-width:900px){.foip .news-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.foip .news-grid{grid-template-columns:1fr}}

/* ---------- newsletter panel ---------- */
.foip .newsletter{background:linear-gradient(135deg,var(--navy),var(--blue));border-radius:20px;padding:clamp(28px,4vw,46px);color:#fff;display:grid;grid-template-columns:1fr auto;gap:26px;align-items:center;box-shadow:var(--shadow-lg)}
.foip .newsletter h3{color:#fff;font-size:clamp(20px,2.4vw,28px);margin:0}
.foip .newsletter p{color:rgba(255,255,255,.82);font-size:15px;margin:8px 0 0;max-width:460px}
.foip .nl-form{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.foip .nl-form input[type=email]{font-family:'Inter';font-size:15px;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.1);color:#fff;border-radius:999px;padding:15px 22px;min-width:240px}
.foip .nl-form input[type=email]::placeholder{color:rgba(255,255,255,.6)}
.foip .nl-form input[type=email]:focus{outline:none;border-color:var(--cyan);background:rgba(255,255,255,.16)}
.foip .nl-form .form-msg{flex-basis:100%;margin-top:6px}
@media(max-width:760px){.foip .newsletter{grid-template-columns:1fr}}

/* ---------- single-article reading layout (detail view) ---------- */
.foip .article{max-width:760px;margin:0 auto}
.foip .article .article-meta{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;margin-bottom:18px;font-size:13px;color:var(--ink-soft);font-weight:600}
.foip .article .article-meta .cat{font-family:'Montserrat';font-weight:700;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--navy-deep);background:var(--cyan);padding:5px 11px;border-radius:6px}
.foip .article h1{font-size:clamp(28px,4vw,46px);margin:0 0 18px}
.foip .article p{font-size:17px;line-height:1.75;color:#2A3340;margin:0 0 20px}
.foip .article h2{font-size:clamp(22px,2.6vw,30px);margin:34px 0 14px}
.foip .article h3{font-size:20px;margin:26px 0 12px}
.foip .article img{border-radius:14px;margin:26px 0;width:100%}
.foip .article ul,.foip .article ol{margin:0 0 20px;padding-left:22px;color:#2A3340;font-size:17px;line-height:1.7}
.foip .article li{margin-bottom:8px}
.foip .article a{color:var(--blue);text-decoration:underline}
.foip .article blockquote{border-left:3px solid var(--cyan);padding:4px 0 4px 22px;margin:26px 0;color:var(--navy);font-size:20px;font-style:italic;line-height:1.5}

/* ---------- optional: skin the SP Page Builder "Articles" addon ----------
   Class names vary by SPPB version — adjust selectors to match your build. */
.foip .sppb-addon-articles .sppb-column-row{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.foip .sppb-addon-articles .sppb-article{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;transition:transform .35s var(--ease),box-shadow .35s}
.foip .sppb-addon-articles .sppb-article:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.foip .sppb-addon-articles .sppb-article-img-wrap img{width:100%;aspect-ratio:16/10;object-fit:cover}
.foip .sppb-addon-articles .sppb-article-body{padding:22px}
.foip .sppb-addon-articles .sppb-article-title{font-family:'Montserrat';font-size:18px;line-height:1.3;margin:6px 0 10px}
.foip .sppb-addon-articles .sppb-article-title a{color:var(--navy);text-decoration:none}
.foip .sppb-addon-articles .sppb-article-meta{font-size:12.5px;color:var(--ink-soft)}
.foip .sppb-addon-articles .sppb-readmore{font-family:'Montserrat';font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--blue);text-decoration:none}
@media(max-width:900px){.foip .sppb-addon-articles .sppb-column-row{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.foip .sppb-addon-articles .sppb-column-row{grid-template-columns:1fr}}