/* font-family: "Inter Tight", sans-serif; font-family: "Arimo", sans-serif;*/
 body {
 font-family: "Arimo", sans-serif;
  font-optical-sizing: auto;
  font-variation-settings:
    "slnt" 0,
    "wdth" 100,
    "GRAD" 0,
    "ROND" 0;overflow-x: hidden !important;

    color: #8F8F8F;
font-size: 1.5rem;
font-style: normal;
font-weight: 400;
line-height: 2.25rem; /* 150% */
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
html{font-size:calc(100vw * 16/1920);	
		scroll-behavior: smooth;scroll-padding-top: 1rem;scroll-behavior: smooth;
	}
.btn-check:active+.btn-primary, .btn-check:checked+.btn-primary, .btn-primary.active, .btn-primary:active, .show>.btn-primary.dropdown-toggle, .btn-check:focus+.btn-primary, .btn-primary:focus
 {color: #00272E; border: none;
}
.btn-check:focus+.btn-primary, .btn-primary:focus{box-shadow: none;}
:focus{outline: 0px !important;}

/* Standard (Chrome, Firefox, Safari, Edge Chromium) */
::placeholder {
  color: #C4C4C4;  
  opacity: 1; /* Fix for Firefox default lower opacity */
}
/* Safari / Chrome (older WebKit) */
::-webkit-input-placeholder {
  color: #C4C4C4; 
}
/* Firefox 19+ */
::-moz-placeholder {
  color: #C4C4C4; 
  opacity: 1;
}
/* Firefox 4–18 */
:-moz-placeholder {
  color: #C4C4C4; 
  opacity: 1;
}
/* Internet Explorer 10–11 */
:-ms-input-placeholder {
  color: #C4C4C4; 
}
/* Microsoft Edge (Legacy) */
::-ms-input-placeholder {
  color: #C4C4C4; 
}
p {
   font-size: 1.5rem; line-height: 2.5rem;
    -webkit-transition: all 0.4s;
	-moz-transition: all 0.4s;
	-ms-transition: all 0.4s;
	-o-transition: all 0.4s;margin-bottom: 2.5rem;
}
h1, h2, h3, h4, .h1, .h2, .h3, .h4, .heading {
  color: #000;

font-family: "Inter Tight";
font-size: 4rem;
font-style: normal;
font-weight: 500;
line-height: 5rem; /* 125% */
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -ms-transition: all 0.4s;
    -o-transition: all 0.4s; margin-bottom: 1rem;
}
.subheading{ font-size: 1.75rem;
    line-height: 2.5rem; text-transform: uppercase;
    margin-bottom: 0.5rem;font-family: 'Hanken Grotesk Medium'; color: #104581;}
a {
	color: #B71F24;
	text-decoration: none;-webkit-transition: all 0.4s;
	-moz-transition: all 0.4s;
	-ms-transition: all 0.4s;
	-o-transition: all 0.4s;
	transition: all 0.4s;
}
.hovImg{overflow: hidden;}
.hovImg  img{-webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;}

.hovImg:hover img{transform: scale(1.05);}
a.readmore {
    font-family: 'Protest Strike';
    text-transform: uppercase;
    font-size: 1.5rem; line-height: 1.25rem;    text-decoration: underline;color: #0BB14B;
}
a.readmore:hover {
    color: #4d2a6b;
}
a:hover{color: #FBA900;}
a:visited{}
.btn,li.hedphn a {
   color: #FFF;
font-family: "Inter Tight";
font-size: 1.25rem;
font-style: normal;
font-weight: 600;
line-height: normal;
display: inline-flex;
padding: 1rem 2rem;
justify-content: center;
align-items: center;
gap: 0.5rem;
 border-radius: 4rem;
 
}
.btn-primary {
     border: 1px solid #85BA41;
    color: #fff; 
   background: #85BA41;  
    
}
.btn-primary:hover {
    border: 1px solid #85BA41;;
    color: #85BA41;;
    background: transparent;
}

.btn-secondary {
    color: #85BA41;
    background-color: transparent;
    border-color: #85BA41;
} 
.btn-secondary:hover {
    color: #fff;
    background-color: #85BA41;
    border-color: #85BA41;
} 
 
img {
	max-width: 100%;
}
.hovImg  img{-webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;}

.hovImg:hover img{transform: scale(1.05);}

ul{list-style: none; margin: 0px; padding: 0px;}
section {
    display: block;
    width: 100%;
}
/*********************************************************/
.headerMennu {
  width: 100%;padding: 0rem 1.5rem; 
}
.menuContainer{background: #0C358D; width: 100%; display: flex;align-items: center; justify-content: center; border-radius: 2rem 2rem 0rem 0rem; }
.mainmenu {
    display: flex;
    align-items: center;
    justify-content: center;
}
#mainmenu,
#mainmenu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
span.menubtn.menuicon {
    display: none;
}
#mainmenu li {
  position: relative;
}

#mainmenu ul {
    display: none;
    position: absolute;
    top: 3.2rem;
    left: -25%;
    width: 20.75rem;
    padding:0rem;
    z-index: 999;
    text-align: left;
    background: #fff;display: inline-block;
}
#mainmenu ul li {
    padding:0rem 1.5rem;
}
#mainmenu ul li:hover{background-color:#E10000;}

#mainmenu ul li:hover a{color:#fff; border-color:#E10000 ; background: url(../images/menu-w.png) no-repeat right 0.5rem top 1.57rem; background-size:1.25rem ;}
#mainmenu ul li:hover ul li a{color: #000; border-color:#E0E0E0 ; background: url(../images/menu-b.png) no-repeat right 0.5rem top 1.57rem; background-size:1.25rem ;}
#mainmenu ul li:hover ul li a:hover{color: #fff; border-color:#E10000 ; background: url(../images/menu-w.png) no-repeat right 0.5rem top 1.57rem; background-size:1.25rem ;}
 #mainmenu ul li a{font-size: 1.25rem; line-height: normal; padding: 1.5rem 0rem;display: block;border-bottom: 1px solid #E0E0E0; background: url(../images/menu-b.png) no-repeat right 0.5rem top 1.57rem; background-size:1.25rem ;}
 #mainmenu ul li ul{left: 100%; top: 0rem;}
section.menuCvr {
    padding-left: 35rem;
    width: 100%;
    background: #000;
}
section.menuCvr {
    position: absolute;
    left: -100%;
    padding-left: 0rem;
    width: 100%;
    background: #000;
    height: 100%;
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    bottom: 0%;
    -webkit-transition: all 0.7s;
	-moz-transition: all 0.7s;
	-ms-transition: all 0.7s;
	-o-transition: all 0.7s;
	transition: all 0.7s;    z-index: 12;
}
.mainmenu li:first-child{
    padding-left: 0rem;
}
.mainmenu li:last-child{
    padding-right: 0rem;
}
section.menuCvr.active{left: 0rem;  bottom: 0rem;height: 100%;}
ul.mainmenu li{padding: 0rem;}
ul.mainmenu li a {position: relative; color: #094235;
font-family: "Inter Tight";
font-size: 1.375rem;
font-style: normal;
font-weight: 500;
line-height: 2rem; /* 145.455% */ padding: 0.875rem 1.5rem; display: block;
}
ul.mainmenu li a:after{width: 0rem; height: 4px; content: ''; position: absolute; bottom: 0.65rem; left: 50%; margin-left: -0.75rem;border-radius: 2px; background: #8CC63F;}
ul.mainmenu li a:hover:after,ul.mainmenu li.current_page_item a:after{width: 1.5rem;}
ul.mainmenu li ul li a{color: #000;}
span.toggle-sub {
    background: url(../images/menusub.png) no-repeat center;
    background-size: 100%;
    width: 3.25rem;
    height: 1.563rem;
    display: inline-block;
    position: absolute;
    top: 50%;
    right: -3rem;
    z-index: 1000;
    cursor: pointer;
}
ul.mainmenu li ul li a {
    color: #000;}
span.menubtn.menuicon {
    display: none;
}
.search button.is-search-submit {
    display: none;
}
 
/*************************************************************/
 
.container {
    max-width:101.563rem; margin: 0px auto;
}
header {
	position: fixed;
	z-index: 111;
	width: 100%;
   padding: 1.5rem 0rem;
	left: 0px;
	top: 0px; 
     -webkit-transition: all 0.4s;
	-moz-transition: all 0.4s;
	-ms-transition: all 0.4s;
	-o-transition: all 0.4s;
	transition: all 0.4s; 	 
    display: flex;
    align-items: center;
    justify-content: space-between;
   flex-direction: column;
    display: flex;align-items: center;justify-content: center; 
    
}
 .headerCvr {
    padding: 1.06rem 1.05rem;
    background: #fff;border-radius: 9.1875rem;
}
.mobnumb{display: none;}
.logo {
    max-width:12rem;
    display: inline-flex;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -ms-transition: all 0.4s;
    -o-transition: all 0.4s;
    transition: all 0.4s;height: 100%;
    align-items: center;
}

.menu {
    display: flex;
    justify-content: center;
    margin: 0rem auto;
}
header.aniPos {
    padding: 0rem; background: #fff;
}
 
.logo img {
	max-width: 100%;
	-webkit-transition: all 0.4s;
	-moz-transition: all 0.4s;
	-ms-transition: all 0.4s;
	-o-transition: all 0.4s;
	transition: all 0.4s;
}

span.wpcf7-spinner {
    position: absolute;display: none;
}
.headeCnt {
    margin-left: auto;
}
 .HeaderRight {
    display: flex;
    align-items: center;
    justify-content:center;
}
.headeCnt ul {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
li.hedphn a{border: 0.063rem solid #fff; color: #ffff; font-weight: 700; background: url(../images/phone-icon.png) no-repeat left 1.5rem center; padding-left: 3.5rem; margin-right: 1.5rem;}
li.login a {margin-right: 2.688rem;
    color: #85BA41;
    font-family: "Inter Tight";
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 500;
    line-height: 2rem; /* 133.333% */ background: url(../images/login-arrow.png) right center no-repeat; padding-right: 2.5rem; background-size: 2rem;
}
.hero{width: 100%; display: block; min-height:60rem;}
.heroSlider{position: relative; padding-bottom: 4rem; background: url(../images/banner.jpg) no-repeat top center; background-size: 100%;}
.heroSlider .carousel-item {
    padding-bottom: 4rem;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    height: 60rem;
    padding-top: 14.1rem;
}
.heroSlider .carousel-item.heroSlide1{background-image: url(../images/bannerbg01.jpg);}
.heroSlider .carousel-item.heroSlide2{background-image: url(../images/banerbg02.jpg);}
.heroSlider .carousel-item.heroSlide3{background-image: url(../images/bannerbg3.jpg);}
.heroSlider .carousel-item.heroSlide4{background-image: url(../images/bannerbg04.jpg);}
.heroSlider .carousel-item.heroSlide5{background-image: url(../images/bannerbg05.jpg);}
.heroVideoBox {
    border-radius: 0;
    overflow: hidden;
    aspect-ratio: 18.1 / 10.6;
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.25);
    background: #05271F;
    max-width: 44.2rem;
    margin-top: 0.9rem;
    margin-left: -0.2rem;
}
.heroVideo{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.heroDots{position: absolute; bottom: 1rem; left: 0; right: 0; margin: 0;}
.heroDots [data-bs-target]{
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 50%;
    background-color: rgba(0,0,0,0.2);
    border: none;
    opacity: 1;
    margin: 0 0.375rem;
}
.heroDots [data-bs-target].active{background-color: #85BA41;}
.smallTag{
display: inline-flex;
padding: 0.125rem 0.75rem;
justify-content: center;
align-items: center;
gap: 0.375rem;    
color: #FFF;
text-align: center;
font-family: "Inter Tight";
font-size: 1rem;
font-style: normal;
font-weight: 500;
line-height: 2rem; /* 200% */
text-transform: uppercase;
border-radius: 6.25rem;letter-spacing: 0.12rem;
 
background: rgba(241, 255, 189, 0.40) url(../images/star.png) no-repeat left 0.75rem center;  background-size: 0.75rem;padding-left: 1.75rem; margin-bottom: 2.5rem;
}
.hero h1,.hero h2{color: #FFF;
font-family: "Inter Tight";
font-size: 4rem;
font-style: normal;
font-weight: 600;
line-height: normal; margin-bottom: 2.12rem;}
.heroLeft {
    padding-right: 10rem;
}




section.sec01{padding: 10rem 0rem; background: url(../images/se1bg.png) no-repeat center; background-size: 100%;}
.sec01Cvr {
    padding: 0rem 4rem;text-align: center;
}
.sec01Cvr img{max-width: 52.9375rem; margin-bottom: 2.813rem;}
.sec1btn a{margin: 0rem 1rem;}

/*********************** section 02 : Core Platform Features ***********************/
section.sec02{padding:0rem;}
section.sec02 h2{margin-bottom: 3rem; text-align: center;}
.featCardsWrap{
    display: flex;
    align-items: stretch;
    gap: 1.5rem;
    background: #f6f6f6;
    border-radius: 1.25rem;
    padding: 2rem;
}
.featCard{
    position: relative;
    flex-grow: 1;
    flex-basis: 0;
    min-width: 0;
    height: 42.5625rem;
    background: #fff;
    border: 0.0625rem solid #eaeaea;
    border-radius: 0.75rem;
    box-shadow: 0px 0px 1.069rem 0px rgba(0,0,0,0.05);
    overflow: hidden;
    padding: 2.5rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    cursor: pointer;
    -webkit-transition: flex-grow 0.6s cubic-bezier(.4,0,.2,1), background 0.6s ease, border-color 0.4s ease;
    -moz-transition: flex-grow 0.6s cubic-bezier(.4,0,.2,1), background 0.6s ease, border-color 0.4s ease;
    transition: flex-grow 0.6s cubic-bezier(.4,0,.2,1), background 0.6s ease, border-color 0.4s ease;
}
.featCard.active{
    flex-grow: 2;
    justify-content: flex-start;
    border-color: #cdeca4;
    background: radial-gradient(circle at 100% 0%, rgba(133,186,65,0.35) 0%, rgba(133,186,65,0) 55%), #fff;
}
.featCard .featNum{
    position: absolute;
    right: -6rem;
    bottom: 0rem;
    font-family: "Arimo";
    font-weight: 700;
    font-size: 50rem;
    line-height: 34rem;
    color: #85BA41;
    opacity: 0.1;
    pointer-events: none;
    -webkit-transition: font-size 0.6s ease;
    -moz-transition: font-size 0.6s ease;
    transition: font-size 0.6s ease;
}
 
.featIcon{
    width: 7.5rem;
    height: 7.5rem;
    margin-bottom: 1.5rem;
    display: none;
    position: relative;
    z-index: 1;
}
.featCard.active .featIcon{display: block;}
.featIcon svg,
.featIcon img{width: 100%; height: 100%; max-width: 100%;}
.featCard h3{
    position: relative;
    z-index: 1;
    text-align: left;
    font-size: 2rem;
    line-height: 3rem;
    font-weight: 600;
    color: #000;
    margin-bottom: 0;
}
.featCard .featDesc,
.featCard .featList{display: none;}
.featCard.active .featDesc{
    position: relative;
    z-index: 1;
    display: block;
     margin: 1rem 0 1.5rem;
}
.featCard.active .featList{
    position: relative;
    z-index: 1;
    display: block;
}
.featList li{
    display: flex;
    align-items: center;
    gap: 1rem;
    color: #000;
    margin-bottom: 0.75rem;
}
.featList li:last-child{margin-bottom: 0;}
.featBullet{
    width: 1.5rem;
    height: 1.5rem;
    flex: 0 0 1.5rem;margin-top: -1rem;
}
.featBullet svg, .featBullet img{width: 100%; height: 100%; object-fit: contain;}
@media(max-width: 991px){
    html{font-size: calc(100vw * 10 / 768);}
    h1, h2, h3, h4, .h1, .h2, .h3, .h4, .heading {font-size: 3rem; line-height: 4rem;}
    p,body{ font-size: 1.95rem; line-height: 3.25rem;}
    .btn, li.hedphn a{font-size: 1.5rem; line-height: 2.75rem;padding: 1rem 2rem;}
    .sec1btn a {margin: 0rem 0.5rem;}
    .featList li{align-items: flex-start;}
    .featBullet { width: 1.5rem; height: 1.5rem; flex: 0 0 1.5rem;  margin-top: -0.1rem; }
    .heroSlider .carousel-item{height: auto;}
    .heroSlider .carousel-item{background: url(../images/mobile-bg.png) no-repeat top center !important; background-size: 100% !important;}
    .heroSlider .carousel-item .row {flex-direction:column-reverse}
    .container {max-width: 100%;  margin: 0px auto;  padding: 0rem 1.5rem; }
}
@media(max-width: 767px){
    html { font-size: calc(100vw * 16 / 767);}}
@media(max-width: 991px){
    .featCardsWrap{flex-direction: column; padding: 1.25rem; gap: 1.25rem;}
    .featCard{flex-grow: 1 !important; min-height: auto; justify-content: flex-start !important; padding: 1.5rem;}
    .featCard .featIcon,
    .featCard .featDesc,
    .featCard .featList{display: block !important;}
    .featCard .featNum{font-size: 8rem !important; top: 1rem !important; bottom: auto !important; left: auto !important; right: -0.5rem !important;}
        .featCard h3 { font-size: 2.5rem; line-height: 3rem; }
}

/*********************** section 03 : Built for Businesses Across Industries ***********************/
section.sec03{padding: 10rem 0rem; text-align: center;}
.sec03Desc{
    max-width: 66rem;
    margin: 0 auto 4rem;
}
.industryWrap{
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    gap: 4rem 2rem;
    margin-bottom: 3rem;
}
.industryItem{
    width: 23.5rem;
    max-width: 100%;
}
.industryIcon{
    position: relative;
    width: 16.5rem;
    height: 16.5rem;
    margin: 0 auto 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #EFFFDB;
}
.industryIcon svg,
.industryIcon img{width: 7.5rem; height: 7.5rem; max-width: 7.5rem;}
.industryItem h4{
    font-family: "Inter Tight";
    font-size: 1.75rem;
    line-height: 3rem;
    font-weight: 600;
    color: #000;
    margin-bottom: 0;
}
.sec03BtnWrap{margin-top: 1rem;}

@media(max-width: 991px){
    .industryWrap{gap: 2.5rem;}
    .industryItem{width: 45%;}
    section.sec03 {padding: 3rem 0rem;}
}
@media(max-width: 575px){
    .industryItem{width: 44%;}
}

/*********************** section 04 : Remote Signage Management ***********************/
section.sec04{
    padding: 6.25rem 0rem;
    background: #05271F url(../images/section04bg.png) no-repeat right bottom; background-size: 80rem;
    overflow: hidden;
}
.sec04Left h2{
    text-align: left;
    color: #fff;
    max-width: 40.5rem;
    margin-bottom: 1.5rem;
}
.sec04Left p{
    text-align: left;
    color: #8F8F8F;
    max-width: 40.5rem;
     margin-bottom: 2.5rem;
}
.sec04Right{text-align: center;}
.sec04Right img{max-width: 100%;}

@media(max-width: 991px){
    section.sec04 .row{flex-direction: column-reverse;}
    .sec04Left,
    .sec04Left h2,
    .sec04Left p{text-align: center; margin-left: auto; margin-right: auto;}
    .sec04Right{margin-bottom: 2.5rem;}
}

/*********************** section 05 : What Makes Us Different ***********************/
section.sec05{padding: 6.25rem 0rem 0rem; overflow: hidden;}
section.sec05 h2{margin-bottom: 2rem; text-align: center;}
.differentWrap{
    position: relative;
    width: 100%;
    max-width: 101.563rem;
    height: 47rem;
    margin: 0 auto;
    overflow: visible;
}
.differentCanvas{
    position: absolute;
    left: 0;
    top: -5.64rem;
    width: 112.75rem;
    height: 63.5625rem;
    transform: scale(0.9008);
    transform-origin: top left;
}
.diffGlow{
    position: absolute;
    left: 19.5625rem;
    top: 26.5625rem;
    width: 72.875rem;
    height: 72.875rem;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(133,186,65,0.16) 0%, rgba(133,186,65,0) 70%);
    pointer-events: none;
}
.diffShadowPill{
    position: absolute;
    left: 50%;
    margin-left: -21.625rem;
    top: 52.375rem;
    width: 43.25rem;
    height: 11.177rem;
    border-radius: 50%;
    background: #85BA41;
    filter: blur(2.5rem);
    opacity: 0.55;
    pointer-events: none;
}
.diffArc{
    position: absolute;
    left: 50%;
    margin-left: -36.4375rem;
    top: 24.3rem;
    width: 72.875rem;
    height: 28.25rem;
    max-width: none;
    pointer-events: none;
}
.diffCenterImg{
    position: absolute;
    left: 50%;
    margin-left: -21.625rem;
    top: 29.76rem;
    width: 43.25rem;
    height: 30.17719rem;
    max-width: none;
}
.diffDot{
    position: absolute;
    width: 1.375rem;
    height: 1.375rem;
}
.diffDot svg, .diffDot img{width: 100%; height: 100%; object-fit: contain;}
.diffItem{
    position: absolute;
    width: 16.25rem;
    text-align: center;
}
.diffItem img{
    width: 4rem;
    height: 4rem;
    margin: 0 auto 1rem;
    display: block;
}
.diffItem p{
     color: #000;
    margin-bottom: 0;
}

@media(max-width: 991px){
    .differentWrap{height: auto; max-width: 100%;}
    .diffGlow,
    .diffArc,
    .diffCenterImg,
    .diffDot{display: none;}
    .differentCanvas{
        position: relative;
        width: auto;
        height: auto;
        transform: none;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 2.5rem;
    }
    .diffItem{position: relative; left: auto !important; top: auto !important; margin-left: 0; width: 22rem;}
}

/*** section 06 ***/
section.sec06{padding:0rem; text-align: center;}
section.sec06 h2{margin-bottom: 4rem;}
.deployWrap{
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 2rem;
    flex-wrap: wrap;
}
.deployItem{width: 31.9375rem;}
.deployIcon{
    width: 17.5rem;
    height: 17.5rem;
    border-radius: 50%;
    border: 1px solid #E3EDD8;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 2rem;
}
.deployIconMid{
    width: 13.75rem;
    height: 13.75rem;
    border-radius: 50%;
    border: 1px solid #D3E9BB;
    display: flex;
    align-items: center;
    justify-content: center;
}
.deployIconMid img{width: 10rem; height: 10rem;}
.deployItem h3{
    font-size: 2rem;
    line-height: 3rem;
    color: #000;
    margin-bottom: 1rem;
}
.deployItem p{max-width: 31.9375rem; margin: 0 auto;}

@media(max-width: 991px){
    .deployWrap{flex-direction: column; align-items: center;}
    .deployItem{width: 100%; max-width: 31.9375rem;}
    section.sec06{padding: 5rem 0rem 3rem;}
    .diffItem img {
    width: 6rem;
    height: 6rem;}
}

/*** section 07 ***/
section.sec07{padding: 6.25rem 0rem;}
.workflowCard{
    position: relative;
    border-radius: 1.25rem;
    overflow: hidden;
    padding: 6.25rem 6rem 4.5rem;
}
.workflowCard::before{
    content: "";
    position: absolute;
    inset: 0;
    background: url(../images/section07-bg.jpg) center/cover no-repeat;
    z-index: 0;
}
 
.workflowHead, .workflowSteps{position: relative; z-index: 1;}
.workflowHead {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 2rem;
    margin-bottom: 4.5rem;
}
.workflowHead h2{
    text-align: left;
    color: #fff;
      margin: 0;
    max-width: 50rem;
}
.workflowDesc{
    max-width: 49rem;
    color: rgba(255,255,255,0.85);
     margin: 0.75rem 0 0.5rem
}
.workflowSteps{
    display: flex;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: nowrap;
}
.stepItem{flex: 1 1 0; min-width: 0; display: flex; flex-direction: column;}
.stepNum{
    color: #619600;
    font-family: "Inter Tight";
    font-size: 2.5rem;
    line-height: 3rem;
    margin-bottom: 1.5rem;
}
.stepLine{
    display: block;
    width: 0.5rem;
    height: 6.5rem;
    background: url(../images/workflow-line.png) no-repeat top center;
    margin-bottom: 1.5rem;
}
.stepItem h4{
    text-align: left;
    color: #fff;
    font-size: 2rem;
    line-height: 3rem;
    margin-bottom: 1rem;
}
.stepItem p{
    color: rgba(255,255,255,0.85);
     margin: 0;
}

@media(max-width: 991px){
    .workflowCard{padding: 3rem 1.5rem;}
    .workflowHead{flex-direction: column; margin-bottom: 3rem;align-items: flex-start;}
    .workflowHead h2, .workflowDesc{max-width: 100%;}
    .workflowSteps{flex-direction: column; gap: 2.5rem;}
    .stepItem{width: 100%;}
    section.sec07{padding: 0;}
}

/*** section 08 ***/
section.sec08{padding: 6.25rem 0rem;}
.secureWrap{
    position: relative;
    width: 100%;
    max-width: 99.9375rem;
    margin: 0 auto;
}
.secureCanvas{
    position: relative;
    width: 100%;
    height: 47rem;
}
.secureItem{
    position: absolute;
    width: 40.5rem;
    text-align: right;
}
.secureItem h3{
    text-align: right;
    color: #000;
    font-size: 2rem;
    line-height: 3rem;
    margin-bottom: 1rem;
}
.secureItem p{
    text-align: right;
    color: #8F8F8F;
   
    margin: 0;
}
.secureLines{
    position: absolute;
    left: 43.6rem;
    top: 2.56rem;
    width: 19.69rem;
    height: 41.97rem;
    max-width: none;
    pointer-events: none;
}
.secureCircle{
    position: absolute;
    left: 60.5625rem;
    top: 3.875rem;
    width: 39.375rem;
    height: 39.375rem;
    border-radius: 50%;
    background:url(../images/build-round.png) no-repeat center; background-size: 100%; text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}
.secureCircle h2{
    width: 31.9375rem;
    font-size: 4rem;
    line-height: 5.5rem;
    margin: 0;
    color: #000;
}

@media(max-width: 991px){
    .secureCanvas{height: auto; display: flex; flex-direction: column; align-items: center; gap: 2.5rem;}
    .secureLines{display: none;}
    .secureItem{position: relative; top: auto !important; right: auto !important; width: 100%; max-width: 30rem; text-align: center;}
    .secureItem h3, .secureItem p{text-align: center;}
    .secureCircle{position: relative; left: auto; top: auto; width: 33rem; height: 33rem; order: -1;}
    .secureCircle h2{width: 100%; font-size: 2.5rem; line-height: 3.25rem;}
    .secureItem h3 { font-size: 2.25rem;}
}

/*** section 09 ***/
section.sec09{padding: 6.25rem 0rem; text-align: center;}
.faqAccordion{margin-top: 3rem; text-align: left;}
.faqItem{
    background: #F3F3F3;
    border-radius: 1.5rem !important;
    border: none;
    margin-bottom: 1.5rem;
    overflow: hidden;
}
.faqItem:last-child{margin-bottom: 0;}
.faqItem .accordion-header{margin: 0; font-size: 1rem; line-height: normal;}
.faqItem .accordion-button{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 2rem;
    font-family: "Inter Tight";
    font-size: 1.5rem;
    line-height: 2.5rem;
    font-weight: 500;
    color: #000;
    text-align: left;
}
.faqItem .accordion-button::after{display: none;}
.faqItem .accordion-button:not(.collapsed){background: transparent; box-shadow: none; color: #000;}
.faqIcon{
    flex: 0 0 2.25rem;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: #85BA41;
    position: relative;
}
.faqIcon::before, .faqIcon::after{
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    background: #fff;
    border-radius: 2px;
    transform: translate(-50%, -50%);
}
.faqIcon::before{width: 1rem; height: 2px;}
.faqIcon::after{width: 2px; height: 1rem; transition: transform 0.25s, opacity 0.25s;}
.accordion-button:not(.collapsed) .faqIcon::after{transform: translate(-50%, -50%) scaleY(0); opacity: 0;}
.faqItem .accordion-body{
    padding: 0 2rem 2rem;
    color: #8F8F8F;
     
}
.faqBtnWrap{text-align: center; margin-top: 3rem;}

@media(max-width: 991px){
    .faqItem .accordion-button{padding: 1.5rem;font-size: 2rem;
        line-height: 3rem; gap: 1rem;}
    .faqItem .accordion-body{padding: 0 1.5rem 1.5rem;}
    section.sec09{padding: 0rem 0rem 3rem;}
}

/*** section 10 ***/
section.sec10{
    position: relative;
    overflow: hidden;
    background: #05271F url(../images/form-right.png) no-repeat right bottom;
    padding: 6.25rem 0rem;
}
.contactBlob{
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}
.contactBlob1{
    left: -20rem;
    top: -32rem;
    width: 50rem;
    height: 50rem;
    background: radial-gradient(circle, rgba(11,80,50,0.7) 0%, rgba(5,39,31,0) 70%);
}
 
.sec10:before{
    left: 0rem;
    top: 0rem;
    width: 80rem;
    height: 55rem;position: absolute;content: '';
    background:url(../images/form-left.png) no-repeat left top; background-size: 100%;
}
section.sec10 h2{
    position: relative;
    color: #fff;
    line-height: 5.5rem;
    max-width: 73.19rem;
    margin: 0 auto 1.5rem;
}
.contactDesc{
    position: relative;
    max-width: 60.1875rem;
    margin: 0 auto 3.5rem;
    text-align: center;
    color: #C9C9C9;
    
}
.contactInfoRow{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 3rem;
    margin-bottom: 2rem;
}
.contactInfoItem{display: flex; align-items: center; gap: 0.75rem;}
.contactInfoIcon {
    width: 1.5rem;
    height: 1.5rem;
    flex: 0 0 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.contactInfoIcon svg, .contactInfoIcon img{width: 100%; height: 100%; object-fit: contain;}
.contactInfoLabel{color: #C9C9C9; font-size: 1.5rem; font-family: "Inter Tight";}
.contactInfoValue{color: #fff; font-size: 2rem; font-family: "Inter Tight"; font-weight: 600;}
.contactInfoValue a {
    color: #fff;
}
.contactForm{position: relative; max-width: 83rem; margin: 0 auto;}
.contactFormGrid{display: grid; grid-template-columns: 1fr 1fr; gap: 2rem;}
.contactFormLeft{display: flex; flex-direction: column; gap: 2rem;}
.contactForm input, .contactForm textarea{
    width: 100%;
    background: #094335;
    border: 1px solid #5E9200;
    border-radius: 1.25rem;
    padding: 1.5rem 2rem;
    color: #fff;
    font-family: "Arimo";
    
}
.contactForm input{height: 4.5rem;}
.contactForm input::placeholder, .contactForm textarea::placeholder{color: #8F8F8F;}
.contactForm textarea{height: 17.5rem; resize: none;}
.contactBtnWrap{text-align: center; margin-top: 2.5rem;}
.contactForm .btn-primary{border: none; cursor: pointer;}

@media(max-width: 991px){
    .contactBlob{display: none;}
    .contactFormGrid{grid-template-columns: 1fr;}
    .contactInfoRow{gap: 1.5rem;}
    section.sec10 h2{text-align: center;}
}

/*** footer ***/
.siteFooter{padding: 6.25rem 0rem 0rem;}
.footerCta{
    text-align: left;
    color: #000;
    max-width: 40.5rem;
    margin-bottom: 2rem;
}
.footerRight{display: flex; flex-direction: column;}
.footerLogoRow{
    display: flex;
    align-items: center;
    gap: 3rem;
    margin-bottom: 2rem;padding-left: 4rem;
}
.footerLogo{height: 2.5rem; width: auto; max-width: none;}
.footerSocial{display: flex; align-items: center; gap: 1.5rem;}
.footerSocial img{width: 1.25rem; height: 1.25rem; object-fit: contain;}
.footerLinks {
    display: flex;
    gap: 8rem;
    align-items: center;
    justify-content: center;
}
.footerLinks ul{list-style: none; margin: 0; padding: 0;}
.footerLinks li{margin-bottom: 1.5rem;line-height: normal;}
.footerLinks li:last-child{margin-bottom: 0;}
.footerLinks li a{color: #8F8F8F; font-size: 1.25rem;}
.footerLinks li a:hover{color: #85BA41;}
.footerBottom{
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    border-top: 1px solid #E0E0E0;
    margin-top: 4.5rem;
    padding: 1rem 0rem;
}
.footerCopy{color: #8F8F8F; font-size: 1.25rem; margin: 0;}
.footerPowered{display: flex; align-items: center; gap: 0.75rem; color: #8F8F8F; font-size: 1.25rem;}
.footerPowered img{height: 1.5rem; width: auto; max-width: none;}

@media(max-width: 991px){
    .footerCta{text-align: center; max-width: 100%; margin: 0 auto 2rem;}
    .siteFooter .footerTop .col-lg-6:first-child{text-align: center; margin-bottom: 3rem;}
    .footerRight{align-items: center;}
    .footerLinks{gap: 3rem;}
    .footerBottom{justify-content: center; text-align: center;}
}



/*** Responsive fix: header mobile nav ***/
@media(max-width: 991px){
    .headerCvr{padding: 1rem 1.5rem;}
    .headerCvr .row{align-items: center; position: relative;}
    span.menubtn.menuicon{
        display: flex;
        align-items: center;
        justify-content: center;
        width: 3rem;
        height: 3rem;
        cursor: pointer;
        position: absolute;
        right: 0rem;
        top: 50%;
        transform: translateY(-50%);
        z-index: 20;
    }
    .headerCvr {border-radius: 2rem; }
    span.menubtn.menuicon img{width: 1.75rem; height: 1.75rem; object-fit: contain;}
    span.menubtn.menuicon img.cls{display: none;}
    span.menubtn.menuicon.active img.plss{display: none;}
    span.menubtn.menuicon.active img.cls{display: block;}
    .col-lg-2{position: relative;}
    .HeaderRight{
        display: none;
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        margin-top: 1.5rem;
    }
    .HeaderRight.mobileNavOpen{display: flex;}
    .menu{width: 100%; margin: 0; justify-content: flex-start;}
    .mainmenu{
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
        flex-wrap: nowrap;
        gap: 0;
    }
    ul.mainmenu li{width: 100%; padding: 0;}
    ul.mainmenu li a{padding: 1rem 0.5rem; border-bottom: 1px solid #EFEFEF; width: 100%;}
    ul.mainmenu li a:after{display: none;}
    .headeCnt{width: 100%; margin: 1rem 0 0;}
    .headeCnt ul{flex-direction: column; align-items: stretch; gap: 1rem; width: 100%;}
    li.login a{margin-right: 0; text-align: center; background: none; padding-right: 0;}
    li.sigin{width: 100%; display: none;}
    li.sigin a{width: 100%;}
}

/*** Responsive fix: sec01 image overflow ***/
@media(max-width: 991px){
    section.sec01{padding: 4rem 0rem;}
    .sec01Cvr{padding: 0rem 1.5rem;}
    .sec01Cvr img{max-width: 78%; width: 100%; height: auto;}
}

/*** Responsive fix: featCard collapses to near-zero height when featCardsWrap
     switches to flex-direction:column on mobile, because flex-basis:0 (set for
     desktop's row-based equal-width layout) applies to height in a column
     flex container instead. Reset it so cards size to content. ***/
@media(max-width: 991px){
    .featCard{flex-basis: auto !important; height: auto !important;}
}

/*** Responsive fix: hero ***/
@media(max-width: 991px){
    .heroSlider{padding-bottom: 2.5rem; background-size: cover;}
        .heroLeft {
        padding-right: 0;
        text-align: center;
        max-width: 50%;
        margin: 2rem auto 0rem;
    }
    .heroLeft .btn{margin: 0 auto;}
    .smallTag{margin-left: auto; margin-right: auto;margin-bottom: 1rem;}
           .heroVideoBox {
        max-width: 84.3%;
        margin-left: auto;
        margin-top: 7.3rem;
        margin-right: auto;
        border: 1px solid #fff;
    }
    .hero h1, .hero h2{font-size: 3rem;}
}
@media(max-width: 767px){
    .logo{max-width: 17rem;}
    .hero h1, .hero h2{font-size: 3rem;}
        .heroVideoBox {
        max-width: 86.1%;
        margin-left: auto;
        margin-top: -0.7rem;
        margin-right: auto;
        border: 1px solid #fff;
    }
        span.menubtn.menuicon img { width: 3.5rem; height: 3.5rem;  object-fit: contain;   }
            .headerCvr {  border-radius: 3rem;  }
                .heroLeft {  max-width: 83%;  }
                    .btn, li.hedphn a {
        font-size: 1.75rem;
        line-height: 2.75rem;
        padding: 0.75rem 2rem;
    }
    .smallTag {padding: 0.225rem 1rem 0.225rem 3rem;  font-size: 1.25rem;background-size: 1.5rem;}
    ul.mainmenu li a{font-size: 1.75rem;line-height: 3.5rem;}
    .industryItem h4{font-size: 2rem;}
        .stepItem {width: 100%;  align-items: center; text-align: center;  }
        .stepLine {
    display: block;
    width: 0.5rem;
    height: 3.4rem;
    background: url(../images/workflow-line.png) no-repeat bottom center;
    margin-bottom: 1.5rem;
}
.stepItem h4 br {
    display: none;
}

.stepItem h4 {
    font-size: 2.5rem;
}
.workflowHead{gap: 1rem; text-align: center;}.workflowCard{text-align: center;}
.workflowHead {align-items: center;}
.workflowHead h2, .workflowDesc{text-align: center;}
section.sec08 {padding: 4rem 0rem;}
    .secureItem h3 {
        font-size: 2.8rem;
    }
    .deployItem h3 {
    font-size: 2.3rem;}
    section.sec10 h2 {line-height: 4rem;}
    .contactForm input {  height: 5.5rem; }
    .footerLinks {
        gap: 0rem;
        flex-direction: column;
        text-align: center;
    }
    .footerLinks ul:first-child { margin-bottom: 8px;}
    .footerLogoRow {
    display: flex;
    align-items: center;
    gap: 2rem;
    margin-bottom: 2rem;
    padding-left: 0;
    flex-direction: column;
}
.footerLinks li a,.footerCopy,.footerPowered {
 
    font-size: 1.9rem;
}
.footerPowered img {
    height: 2rem;
    width: auto;
    max-width: none;
    margin-top: 0.5rem;
}
.footerSocial img{width: 2rem; height: 2rem;}
section.sec10{padding: 5rem 0rem;}
.contactInfoIcon {
    width: 2rem;
    height: 2rem;}
    .contactInfoLabel {
    color: #C9C9C9;
    font-size: 1.65rem;}
    .pricingCard h3 {
     font-size: 2.3rem;
    line-height: 2.5rem;
    margin-bottom: 0.5rem;
}
}

/*** Responsive fix: sec05 differentCanvas keeps desktop's negative "top"
     offset in the mobile stacked layout, pulling the flex canvas up over
     the heading. Reset it. ***/
@media(max-width: 991px){
    .differentCanvas{top: 0;}
}

/*** Responsive fix: sec07 "Simple and Seamless Workflow" steps —
     2 columns per row on tablet width, keep single column on phone. ***/
@media(min-width: 576px) and (max-width: 991px){
    .workflowSteps{
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 2.5rem 2rem;
    }
    .stepItem{width: auto;}
}

/*** industries.html — Inner Banner section (Figma node 270:5340) ***/
.innerBanner{
    background: #094235;
    text-align: center;
    padding: 14.625rem 0 7.5rem;
}
.innerBanner h1{
    color: #fff;
    font-size: 4.5rem;
    font-weight: 600;
    line-height: normal;
    max-width: 72.9375rem;
    margin: 0 auto;
}
.innerBanner .innerBannerDesc{
    
    color: #C9C9C9;
     
    max-width: 60.1875rem;
    margin: 1.5rem auto 0;
}
.innerBannerBtns{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    margin-top: 2.4375rem;
}
.btn-white{
    color: #85BA41;
    background: #fff;
    border: 1px solid #fff;
}
.btn-white:hover{
    color: #fff;
    background: transparent;
    border-color: #fff;
}
section.sec03.industrInn .industryWrap {
    margin-bottom: 0rem;
}
@media(max-width: 991px){
    .innerBanner h1{max-width: 100%;}
    .innerBanner .innerBannerDesc{max-width: 100%;}
    .innerBannerBtns{flex-wrap: wrap; gap: 1.5rem; margin-top: 2rem;}
}

/*** industries.html — "The Signage Cloud Advantage" / Key Benefits section (Figma node 270:5337) ***/
.advantageSec{padding: 7rem 0;}
 
.advantageSec .advantageDesc{
    color: #8F8F8F;
    font-size: 1.5rem;
    line-height: 2.25rem;
    max-width: 70.25rem;
    margin: 0 auto 4rem;
}
.advantageRow{margin-top: 1rem;}
.advantageImg img{width: 100%; height: auto;}
.keyBenefits h3{
    font-family: "Inter Tight";
    font-weight: 600;
    font-size: 2.5rem;
    line-height: 3.5rem;
    color: #000;
    margin-bottom: 1.5rem;
}
.keyBenefits .keyBenefitsDesc{  margin-bottom: 2rem;}
.keyBenefitsList li{
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    color: #000;
      margin-bottom: 1rem;
}
.keyBenefitsList li:last-child{margin-bottom: 0;}
.kbIcon{width: 1.5rem; height: 1.5rem; flex: 0 0 1.5rem;margin-top: 0.3rem; display: flex; align-items: center;}
.kbIcon img{width: 100%; height: 100%; object-fit: contain;}
@media(max-width: 991px){
    .advantageSec{padding: 4rem 0;}
    .advantageSec .advantageDesc{max-width: 100%; margin-bottom: 2.5rem;}
    .advantageImg{margin-bottom: 2.5rem;}
}

/*** sec03 industrInn — industryItem now an <a> (links to per-industry detail pages) ***/
.industryItem{display: block; color: inherit; text-decoration: none; -webkit-transition: all 0.3s; transition: all 0.3s;}
.industryItem:hover{color: inherit;}
.industryItem:hover .industryIcon{background: #E1FFB3;}

/*** retail-stores.html — Inner Section 1 intro (Figma node 270:20894) ***/
.retailIntro{padding: 14.1rem 0 6rem;}
.retailIntro h1{font-size: 4.5rem; line-height: normal;}
.retailIntro .retailIntroDesc{  max-width: 49rem;
    margin: 1rem 0 2.5rem;
}
.retailIntroBtns{display: flex; align-items: center; gap: 2rem;}
.retailIntroImg{  overflow: hidden; }
.retailIntroImg img{width: 100%; height: 100%; object-fit: cover; display: block;}
@media(max-width: 991px){
    .retailIntro{text-align: center;}
    .retailIntro .retailIntroDesc{margin-left: auto; margin-right: auto;}
    .retailIntroBtns{justify-content: center; flex-wrap: wrap;}
    .retailIntroImg{margin-top: 2.5rem;}
}

/*** retail-stores.html — "Why do retail Businesses Choose Signage Cloud?" (Figma node 322:802) ***/
.retailWhy{padding: 4rem 0 7rem;}
.retailWhy h2{margin-bottom: 4rem;}
.retailWhyRow .col-lg-4{margin-bottom: 2rem;}
.retailWhyCard{
    background: #F9FDEA;
    border-radius: 2rem;
    padding: 2.5rem;
    height: 100%;
}
.retailWhyIcon{width: 4rem; height: 4rem; margin-bottom: 1.5rem;}
.retailWhyIcon img{width: 100%; height: 100%; object-fit: contain;}
.retailWhyCard h4{
    font-family: "Inter Tight";
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 2rem;
    color: #000;
    margin-bottom: 1rem;
}
.retailWhyCard p{color: #636363; margin-bottom: 0;}

/*** retail-stores.html — "Simple and Seamless Workflow" scroll section (Figma node 270:17571) ***/
.workflowScroll{padding: 7rem 0;}
.workflowScroll h2{margin-bottom: 4rem;}
.workflowStepsTimeline{
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4rem;
}
.workflowStepsTimeline::before{
    content: '';
    position: absolute;
    left: 3rem;
    top: 3rem;
    bottom: 3rem;
    width: 1px;
    background: #E0E0E0;
    z-index: 0;
}
.wfStepItem{
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    opacity: 0;
    transform: translateY(3rem);
    transition: opacity 0.7s ease, transform 0.7s ease;
}
.wfStepItem.inView{opacity: 1; transform: translateY(0);}
.wfStepIcon{
    width: 6rem;
    height: 6rem;
    flex: 0 0 6rem;
    border-radius: 1.5rem;
    background: #fff;
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.4s ease, box-shadow 0.4s ease;
}
.wfStepIcon img{width: 2.5rem; height: 2.5rem; object-fit: contain;}
.wfStepItem.wfActive .wfStepIcon{background: #E1FFB3; box-shadow: none;}
.wfStepContent h4{
    font-family: "Inter Tight";
    font-weight: 600;
    font-size: 1.75rem;
    line-height: 2.25rem;
    color: #000;
    margin-bottom: 0.75rem;
}
.wfStepContent p{ margin-bottom: 1.5rem;}
.wfStepList li{display: flex; align-items: flex-start; gap: 1rem; color: #000; margin-bottom: 0.75rem;}
.wfStepList li:last-child{margin-bottom: 0;}
/* CSS-only sticky: align-self:stretch makes .wfImgCol span the full row height (the row's
   Bootstrap align-items-start would otherwise shrink it to just the image), so the sticky
   image naturally unsticks once its column's bottom scrolls past — no scroll/resize JS needed. */
.workflowScrollRow .wfImgCol{position: relative; align-self: stretch;}
.workflowScrollImg{width: 100%; position: sticky; top: 9rem;}
.workflowScrollImg img{width: 100%; border-radius: 1.5rem; display: block;}
.powerImg {
    max-width: 46.063rem;
}
@media(max-width: 991px){
    .workflowScrollImg{position: static !important; top: auto !important; width: 100% !important; margin-top: 2.5rem;}
}

/*** retail-stores.html — "Powering Stores and Malls with Signage Cloud" zigzag section (Figma node 270:17571) ***/
.powerStores{padding: 7rem 0;}
.powerStores h2{margin-bottom: 1rem;}
.powerStoresDesc{color: #8F8F8F;   max-width: 50rem; margin: 0 auto 2rem;}
.powerRow{margin-top: 4rem;}
.powerImg img{width: 100%; height: auto; border-radius: 1.5rem; display: block;}
.powerBadge{width: 4rem; height: 4.125rem; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 1.5rem;}
.powerBadge img{width: 100%; height: 100%; object-fit: contain;}
.powerContent h3{font-family: "Inter Tight"; font-weight: 600; font-size: 2rem; line-height: 2.75rem; color: #000; margin-bottom: 1rem;}
.powerContent p{ margin-bottom: 1.5rem;}
@media(max-width: 991px){
    .powerStores{padding: 4rem 0;}
    .powerRow{margin-top: 2.5rem;}
    .powerRow .order-lg-1,
    .powerRow .order-lg-2{order: initial;}
    .powerImg{margin-bottom: 2.5rem;max-width: 100%;}
    
}

@media(max-width:767px){ 
   .retailWhy {
    padding: 0;
}
.retailIntro {
    padding: 10.1rem 0 4rem;
}
.retailIntro h1,.innerBanner h1 {
    font-size: 3rem;
    line-height: normal;
}
.retailWhyCard h4{font-size: 2.3rem;}
.retailWhyIcon {
    width: 6rem;
    height: 6rem;
    margin-bottom: 1.5rem;
}
.wfStepContent h4 {
    font-family: "Inter Tight";
    font-weight: 600;
    font-size: 2.3rem;
    line-height: 2.75rem;
    color: #000;
    margin-bottom: 1rem;
}
.workflowScroll {
    padding: 5rem 0 0rem;
}
.powerContent h3 {
     
    font-size: 2.5rem;
    line-height: 3.2rem;
    
}

.powerBadge {
    width: 6rem;
    height: 6rem;}
}

/*** why-signagecloud.html — Section 2: Feature Icons Strip (Figma node 332:862) ***/
.whyFeatureGrid{padding: 5rem 0;}
.whyFeatureItem{text-align: center; position: relative;}
.whyFeatureItem:after {
    height: 100%;
    width: 1px;
    position: absolute;
    content: '';
    background: #DDDDDD;
    top: 0rem;
    right: -0.75rem;
}
.whyFeatureIcon{width: 5rem; height: 5rem; margin: 0 auto 1.5rem;}
.whyFeatureIcon img{width: 100%; height: 100%; object-fit: contain;}
.whyFeatureItem h4{font-size: 1.5rem; line-height: 2rem; margin-bottom: 0.75rem;}
.whyFeatureItem p{margin-bottom: 0;}
@media(max-width: 991px){
    .whyFeatureItem{margin-bottom: 2.5rem;}
    .whyFeatureGrid .row > div:last-child .whyFeatureItem{margin-bottom: 0;}
}

/*** why-signagecloud.html — Section 3: Key Reasons Companies Choose SignageCloud (Figma node 270:11578) ***/
.keyReasons{padding: 5rem 0;}
.keyReasons h2{margin-bottom: 3rem;}
.keyReasonItem{text-align: center;}
.keyReasonImg{width: 20rem; height: 20rem; border-radius: 50%; overflow: hidden; margin: 0 auto 1.5rem;}
.keyReasonImg img{width: 100%; height: 100%; object-fit: cover;}
.keyReasonItem h4{color: #85BA41; font-size: 1.75rem; line-height: normal; margin-bottom: 1rem;}
.keyReasonItem p{ margin-bottom: 0;}
@media(max-width: 991px){
    .keyReasons{padding: 4rem 0;}
    .keyReasonItem{margin-bottom: 2.5rem;}
    .keyReasonsRow > div:last-child .keyReasonItem{margin-bottom: 0;}
}

/*** why-signagecloud.html — Section 4: Core Platform Capabilities (Figma node 333:870) ***/
.platformCapabilities{padding: 7rem 0;}
.platformCapabilities h2{margin-bottom: 3rem;}
.platformBox{border-radius: 2.5rem; padding: 4rem; margin-bottom: 3rem;}
.platformBox:last-child{margin-bottom: 0;}
.platformBox.bgGreen{background: #EFFFDB;}
.platformBox.bgWhite{background: #fff;}
.platformImg img{width: 92.755%;height: auto; display: block;margin: 0rem auto;}
.platformContent h3{font-family: "Inter Tight"; font-weight: 600; font-size: 2.5rem; line-height: 3.5rem; color: #000; margin-bottom: 2rem;}
.platformFeature{margin-bottom: 1.5rem;}
.platformFeature:last-child{margin-bottom: 0;}
.platformFeatureHead{display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 0.5rem;}
.platformFeatureHead h4{font-family: "Inter Tight"; font-weight: 600; font-size: 1.5rem; line-height: 2.25rem; color: #000; margin-bottom: 0;}
.platformFeature p{color: #636363; }
@media(max-width: 991px){
    .platformCapabilities{padding: 4rem 0;}
    .platformBox{padding: 2.5rem;}
    .platformImg{margin-bottom: 2.5rem;}
    .platformBox .order-lg-1,
    .platformBox .order-lg-2{order: initial;}
    .whyFeatureItem h4 {font-size: 2rem;  line-height: 3rem;}
    .keyReasonItem h4 { color: #85BA41;  font-size: 2rem;  line-height: 3rem;  margin-bottom: 1rem;}
    .kbIcon { width: 1.5rem;  height: 1.5rem;  flex: 0 1.5rem;   display: flex;  align-items: center;   justify-content: center;   margin-top: 0.5rem; }
    .kbIcon img{width: 1.5rem; height: 1.5rem;}
.platformFeatureHead h4 {font-size: 2rem; line-height: 3rem; }
}

@media(max-width: 991px){
.whyFeatureItem h4,.keyReasonItem h4,.platformFeatureHead h4 {font-size: 2.3rem;}
}

/*** pricing.html — Section 2: Pricing Plans (Figma node 270:14525) ***/
.pricingPlans{padding: 7rem 0;}
.pricingRow{align-items: stretch;}
.pricingRow > div{margin-bottom: 2.5rem;}
.pricingCard{position: relative; height: 100%; background: #fff; border: 0.0625rem solid #C9C9C9; border-radius: 2.5rem; padding: 2.5rem;}
.pricingCard.featured{border-color: #85BA41;}
.pricingBadge{position: absolute; top: -3.5rem; left: 2.5rem; right: 2.5rem; text-align: center; background: #619600; color: #fff; font-family: "Inter Tight"; font-weight: 600; font-size: 1.5rem; line-height: 2rem; padding: 0.75rem 1rem; border-radius: 1.5rem 1.5rem 0 0; box-shadow: inset 0px -5px 32px 0px rgba(0,0,0,0.32);}
.pricingCard h3{color: #85BA41; font-family: "Inter Tight"; font-weight: 600; font-size: 2rem; line-height: 2.5rem; margin-bottom: 0.5rem;}
.pricingCard .pricingDesc{color: #8F8F8F; }
.pricingPrice{font-family: "Inter Tight"; font-weight: 600; font-size: 3rem; line-height: 4.5rem; color: #000;}
.pricingPrice span{font-family: "Inter Tight"; font-weight: 400; font-size: 1.25rem; color: #8F8F8F;}
.pricingBilled{color: #8F8F8F; font-family: "Inter Tight"; font-weight: 500; font-size: 1.25rem; line-height: 1.75rem; margin-bottom: 1.5rem;}
.pricingBtn{display: flex; width: 100%; text-align: center; justify-content: center; margin-bottom: 1.5rem;}
.pricingFeaturesLabel{margin-bottom: 1.5rem;}
.pricingFeatureList li {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    color: #8F8F8F;
    font-size: 1.25rem;
    line-height: 2.25rem;
    margin-bottom: 1rem;
    background: url(../images/star2.png) no-repeat left top 0.35rem;
    background-size: 1.5rem;
    padding-left: 2.5rem;
}
.pricingFeatureList li:last-child{margin-bottom: 0;}
@media(max-width: 991px){
    .pricingPlans{padding: 4rem 0;}
    .pricingRow > div:last-child{margin-bottom: 0;}
}

/*** faq.html — FAQ list with category sidebar (Figma node 342:713) ***/
.faqPageSec{padding: 7rem 0;}
.faqPageSec .faqAccordion{margin-top: 0;}
.faqCategoryNav{display: flex; flex-direction: column;}
.faqCategoryNav .faqCatItem{display: flex; align-items: center; justify-content: space-between; color: #000; font-family: "Inter Tight"; font-weight: 500; font-size: 1.75rem; line-height: 2.5rem; padding: 1.5rem 2rem; border-radius: 1.5rem; margin-bottom: 0.5rem;}
.faqCategoryNav .faqCatItem:hover{color: #000;}
.faqCategoryNav .faqCatItem.active{background: #EFFFDB; font-weight: 600;}
.faqCatArrow{width: 1.5rem; height: 1.5rem; flex: 0 0 1.5rem; display: none; align-items: center; justify-content: center;}
.faqCatArrow img{width: 100%; height: 100%; object-fit: contain;}
.faqCategoryNav .faqCatItem.active .faqCatArrow{display: flex;}
.kicker {
    color: #fff;
    font-weight: 700;
}
@media(max-width: 767px){
    .faqPageSec{padding: 4rem 0;}
    .faqCategoryNav{flex-direction: row; flex-wrap: wrap; margin-bottom: 2.5rem;}
    .faqCategoryNav .faqCatItem{flex: 0 0 auto; padding: 1rem 1.5rem;}
    .pricingPrice span{font-size: 1.75rem;}
    .pricingBilled{font-size: 1.5rem;}
    .pricingFeatureList li { font-size: 1.85rem; line-height: 2.57rem; margin-bottom: 1rem;}
    .row.pricingRow .col-lg-4:nth-child(2) { margin-top: 3rem;}
    
}

/*** faq.html — Basic Info / Security / Integrations tab switching ***/
.faqCategoryNav .faqCatItem{cursor: pointer;}
.faqTabPane{display: none;}
.faqTabPane.active{display: block;}
.faqComingSoon{color: #8F8F8F; font-size: 1.5rem; line-height: 2.25rem; margin-bottom: 0;}
/* faq.html accordion cards: border only, no gray fill, per Figma node 342:713
   (scoped to .faqPageSec so the shared .faqItem style elsewhere is untouched) */
.faqPageSec .faqItem{background: #fff; border: 0.0625rem solid #DDD !important;}

@media(max-width: 767px){
.faqCategoryNav .faqCatItem.active .faqCatArrow {
    display: flex;
    margin-left: 1rem;
}}

/*** request-a-demo.html — Section 2: Talk to Our Sales Experts (Figma node 348:720) ***/
.requestDemoSec{padding: 7rem 0;}
.requestDemoRow{align-items: stretch;}

/* Left column: kiosk mockup image + "For enquiries" overlay card
   (demo-left-frame.png already bakes in the kiosk frame, green dot graphic
   and Signage Cloud watermark — only the text content is overlaid here) */
.demoKioskWrap{position: relative; max-width: 32rem; margin: 0 auto;}
.demoKioskImg{display: block; width: 100%;}
.demoEnquiryCard{
    position: absolute;
    left: 13.28%;
    top: 3.27%;
    width: 73.63%;
    height: 67.04%;
    display: flex;
    flex-direction: column;
    padding: 2rem 2rem 3.5rem;
}
.demoEnquiryTitle{color: #000; font-family: "Inter Tight"; font-weight: 600; font-size: 2.25rem; line-height: 1.2; margin: 0rem 0rem 2rem 0rem;}
.demoEnquirySpacer{flex: 1 1 auto;}
.demoEnquiryInfo{display: flex; flex-direction: column; gap: 3rem;}
.demoEnquiryItem{display: flex; flex-direction: column; gap: 0.5rem;}
.demoEnquiryLabel{display: flex; align-items: center; gap: 0.5rem; color: #C9C9C9; font-family: "Inter Tight"; font-weight: 500; font-size: 1.5rem; letter-spacing: -0.09rem;}
.demoEnquiryLabel img{width: 1.5rem; height: 1.5rem; object-fit: contain;}
.demoEnquiryValue{color: #000; font-family: "Inter Tight"; font-weight: 600; font-size: 2rem; line-height: 3rem;}
.demoEnquiryValue a{color: #000;}

/* Right column: "Talk to Our Sales Experts" form card */
.demoFormCard{
    background: #fff;
    border: 0.0625rem solid #E5E7EB;
    border-radius: 1.5rem;
    padding: 3.5rem;
    box-shadow: 0px 1.125rem 3rem 0px rgba(5,39,31,0.05), 0px 0.125rem 0.625rem 0px rgba(0,0,0,0.04);
    height: 100%;
}
.demoFormHead{margin-bottom: 2.5rem;}
.demoFormHead h3{color: #05271F; font-family: "Inter Tight"; font-weight: 600; font-size: 2.25rem; line-height: 1.2; margin-bottom: 0.75rem;}
.demoFormHead p{color: #507A70; margin-bottom: 0;}
.demoForm{display: flex; flex-direction: column; gap: 1.5rem;}
.demoFormRow{display: flex; gap: 1.5rem;}
.demoField{flex: 1 1 0; display: flex; flex-direction: column; gap: 0.5rem;}
.demoField label{color: #05271F; font-family: "Arimo"; font-size: 1.25rem; display: flex; align-items: center; gap: 0.25rem;}
.demoField label .req{color: #FF5959;}
.demoInputBox{border-bottom: 0.0625rem solid #E5E7EB; display: flex; align-items: center; height: 3rem;}
.demoInputBox input, .demoInputBox select{
    width: 100%;
    height: 100%;
    border: none;
    background: transparent;
    padding: 0;
    color: #05271F;
    font-family: "Arimo";
    font-size: 1.5rem;
}
.demoInputBox input::placeholder{color: #B7CEC8;}
.demoInputBox input:focus, .demoInputBox select:focus, .demoInputBox textarea:focus{outline: none;}
.demoSelectBox{position: relative;}
.demoSelectBox select{appearance: none; -webkit-appearance: none; -moz-appearance: none; color: #B7CEC8; cursor: pointer; padding-right: 1.5rem;}
.demoSelectBox select:valid{color: #05271F;}
.demoSelectArrow{
    position: absolute;
    right: 0;
    top: 50%;
    width: 0;
    height: 0;
    border-left: 0.375rem solid transparent;
    border-right: 0.375rem solid transparent;
    border-top: 0.4375rem solid #05271F;
    transform: translateY(-50%);
    pointer-events: none;
}
.demoTextareaBox{height: 8.75rem; align-items: flex-start; padding-top: 0.875rem;}
.demoTextareaBox textarea{
    width: 100%;
    height: 100%;
    border: none;
    background: transparent;
    resize: none;
    padding: 0;
    color: #05271F;
    font-family: "Arimo";
    font-size: 1.25rem;
    line-height: 2rem;
}
.demoTextareaBox textarea::placeholder{color: #B7CEC8;}
.demoSubmitBtn{width: 100%;}

@media(max-width: 991px){
    .demoKioskWrap{margin-bottom: 3rem;}
    .demoField label,.demoInputBox input, .demoInputBox select,.demoTextareaBox textarea{font-size: 1.75rem;}
}

@media(max-width: 767px){
    .requestDemoSec{padding: 4rem 0;}
    .demoFormCard{padding: 2rem;}
    .demoFormRow{flex-direction: column; gap: 1.5rem;}
    .demoEnquiryTitle{font-size: 2.5rem;}
    .demoEnquiryValue{font-size: 1.75rem; line-height: 2.25rem;}
    
}

/*** login.html / signup.html — no Figma design supplied; built to match site theme
     (same card/field/button language as request-a-demo.html, scoped under .authCard
     so this page's styling can be tuned independently) ***/
.authSec{padding: 7rem 0;}
.authCard{
    background: #fff;
    border: 0.0625rem solid #E5E7EB;
    border-radius: 1.5rem;
    padding: 3.5rem;
    box-shadow: 0px 1.125rem 3rem 0px rgba(5,39,31,0.05), 0px 0.125rem 0.625rem 0px rgba(0,0,0,0.04);
}
.authFormHead{margin-bottom: 2.5rem; text-align: center;}
.authFormHead h3{color: #05271F; font-family: "Inter Tight"; font-weight: 600; font-size: 2.25rem; line-height: 1.2; margin-bottom: 0.75rem;}
.authFormHead p{color: #507A70; margin-bottom: 0;}
.authForm{display: flex; flex-direction: column; gap: 1.5rem;}
.authField{display: flex; flex-direction: column; gap: 0.5rem;}
.authField label{color: #05271F; font-family: "Arimo"; font-size: 1.25rem; display: flex; align-items: center; gap: 0.25rem;}
.authField label .req{color: #FF5959;}
.authFieldLabelRow{display: flex; align-items: center; justify-content: space-between;}
.authInputBox{border-bottom: 0.0625rem solid #E5E7EB; display: flex; align-items: center; height: 3rem;}
.authInputBox input{
    width: 100%;
    height: 100%;
    border: none;
    background: transparent;
    padding: 0;
    color: #05271F;
    font-family: "Arimo";
    font-size: 1.25rem;
}
.authInputBox input::placeholder{color: #B7CEC8;}
.authInputBox input:focus{outline: none;}
.authForgotLink{color: #507A70; font-family: "Arimo"; font-size: 1.25rem;}
.authForgotLink:hover{color: #85BA41;}
.authSubmitBtn{width: 100%; margin-top: 0.5rem;}
.authFootNote{text-align: center; color: #507A70; font-family: "Arimo"; font-size: 1.125rem; margin: 2rem 0 0;}
.authFootNote a{color: #85BA41; font-weight: 600;}

.authFootNote + .authFootNote{margin-top: 0.75rem;}

@media(max-width: 991px){
    .authSec{padding: 4rem 0;}
    .authCard{padding: 2rem;}
    .authFormHead h3{font-size: 2.5rem;}
   .authField label, .authField label,.authInputBox input{font-size: 1.75rem;}
   p.authFootNote {
    font-size: 1.75rem;
}
.authForgotLink {
    color: #507A70;
    font-family: "Arimo";
    font-size: 1.5rem;
}
}

/*** otp-verification.html — 6-digit OTP input boxes (no Figma design supplied,
     built to match auth card theme from login.html / signup.html) ***/
.otpInputRow{display: flex; justify-content: center; gap: 1rem; margin-bottom: 0.5rem;}
.otpDigit{
    width: 3.5rem;
    height: 4rem;
    text-align: center;
    border: 0.0625rem solid #E5E7EB;
    border-radius: 0.75rem;
    font-family: "Inter Tight";
    font-weight: 600;
    font-size: 1.75rem;
    color: #05271F;
    background: #fff;
}
.otpDigit:focus{outline: none; border-color: #85BA41;}

@media(max-width: 767px){
    .otpInputRow{gap: 0.625rem;}
    .otpDigit{width: 2.75rem; height: 3.25rem; font-size: 1.5rem;}
}