h1,
h2,
h3,
h4,
h5,
h6 {
  color: #461662;
}

.custom-container {
  margin: 0 !important;
  margin: auto !important;
  padding: 0 !important;
}

.swiper {
  width: 100%;
  height: 100%;
  /* start: Hide & Show Arrow Button */
  /* end: Hide & Show Arrow Button */
}
.swiper .swiper-wrapper .swiper-slide img {
  display: block;
  width: 100%;
  object-fit: cover;
  object-position: center;
  transition: 200ms ease-in-out;
}
.swiper .swiper-wrapper .swiper-slide:hover img {
  transform: scale(1.15);
  transition: 200ms ease-in-out;
}
.swiper .swiper-pagination {
  display: block;
}
.swiper .swiper-button-next,
.swiper .swiper-button-prev {
  background: white;
  color: #300B45;
  font-size: 0;
  visibility: hidden;
}
.swiper .swiper-button-next:before,
.swiper .swiper-button-prev:before {
  background: none;
}
.swiper .swiper-button-next:after,
.swiper .swiper-button-prev:after {
  background: none;
  font-size: 1.3rem;
  font-weight: bold;
}
.swiper .swiper-wrapper:hover ~ .swiper-button-next,
.swiper .swiper-wrapper:hover ~ .swiper-button-prev {
  visibility: visible;
}
.swiper .swiper-button-next:hover,
.swiper .swiper-button-prev:hover {
  visibility: visible;
}

.banner .swiper .swiper-slide {
  width: 100% !important;
  align-content: center;
  height: fit-content;
}
.banner .swiper .swiper-slide img {
  display: block;
  width: 100%;
  object-fit: cover;
  object-position: center;
  transition: 200ms ease-in-out;
}
.banner .swiper .swiper-slide:hover img {
  transform: none;
}
.banner .swiper .swiper-pagination span {
  width: 12px !important;
  height: 12px !important;
}
.banner .swiper .swiper-pagination span.swiper-pagination-bullet {
  opacity: 0.5 !important;
  border: solid 2px white;
}
.banner .swiper .swiper-pagination span.swiper-pagination-bullet.swiper-pagination-bullet-active {
  color: red !important;
  background-color: white !important;
  opacity: 1 !important;
  font-size: 0 !important;
}

/*
.hero-banner{
    //background: #300B45;

    .slide1,
    .slide2{
        text-align: start;

        .custom-container{
            display: flex;
            align-items: center;
            gap: 10px;
            height: auto;


            .captions{
                flex-basis: 40%;
                padding: 1rem;
                //border: solid 5px white;
                display: flex;
                flex-direction: column;
                gap: 10px;

                h1,h3{
                    color: white;
                    margin: 0;
                    padding: 0;
                    line-height: normal;
                }

                h1{
                    font-size: 2rem;
                    text-transform: uppercase;
                    font-weight: 700;
                    line-height: 2.3rem;
                }

                h3{
                    font-size: 1.3rem;
                    font-weight: 500;
                    line-height: 1.7rem;
                    text-transform: uppercase;
                }

                p{
                    color: white;
                }

                a{
                width: fit-content;
                padding: .9rem 3.5rem !important;
                border-radius: 5px;
                background: white !important;
                color:#300B45;
                font-weight: bold;
                text-transform: uppercase;
                letter-spacing: 1px;
                font-size: 14px;
                opacity: .9;

                    &:hover{
                        opacity: 1;
                    }

                }//a
            }//captions

            img{       
            width: 100%;
            height: 100%;
            object-fit: cover;                  
            }

        }//custom-container      

        .single-image{
            width: auto !important;
        }//single-image            

        .no-captions{
            .captions{
                display: none;
            }

            img{
            width: 100%;
            height: 500px;                
            object-fit: cover;                    
            }
        }//no-captions

    }//slides

    .slide1{
        background-color: #300B45;
    }//slide1

    .slide2{
        background-color: chocolate;
    }//slide2

}//hero-banner
*/
.banner {
  height: auto;
}
.banner .layoutA {
  background-color: #300B45;
}
.banner .layoutA .d-flex {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: stretch;
  align-content: stretch;
  gap: 5rem;
}
.banner .layoutA .d-flex .captions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0.5rem;
}
.banner .layoutA .d-flex .captions h1 {
  color: white;
  font-size: 2rem;
  line-height: 2.2rem;
  margin: 0;
  padding: 0;
}
.banner .layoutA .d-flex .captions p {
  color: white;
  font-size: 1.2rem;
  line-height: 1.3rem;
  font-weight: 500;
  margin: 0;
  padding: 0;
}
.banner .layoutA .d-flex .captions a {
  padding: 12px 30px;
  font-weight: 500;
  font-size: 14px;
  border-radius: 10px;
}
.banner .layoutA .d-flex .captions a.light {
  background: white;
  color: #300B45;
  opacity: 0.9;
}
.banner .layoutA .d-flex .captions a.light:hover {
  opacity: 1;
}
.banner .layoutA .d-flex .captions a.dark {
  background: #300B45;
  color: white;
  opacity: 0.7;
}
.banner .layoutA .d-flex .captions a.dark:hover {
  opacity: 1;
  background: white;
  color: #300B45;
}
.banner .layoutA .d-flex .captions a.outline {
  border: solid 1px white;
  color: white;
  opacity: 0.9;
}
.banner .layoutA .d-flex .captions a.outline:hover {
  opacity: 1;
  background: white;
  color: #300B45;
}
.banner .layoutB .d-flex {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: stretch;
  align-content: stretch;
  gap: 5rem;
}
.banner .layoutB .d-flex .captions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0.5rem;
}
.banner .layoutB .d-flex .captions h1 {
  color: white;
  font-size: 2rem;
  line-height: 2.2rem;
  margin: 0;
  padding: 0;
}
.banner .layoutB .d-flex .captions p {
  color: white;
  font-size: 1.2rem;
  line-height: 1.3rem;
  font-weight: 500;
  margin: 0;
  padding: 0;
}
.banner .layoutB .d-flex .captions a {
  padding: 12px 30px;
  font-weight: 500;
  font-size: 14px;
  border-radius: 10px;
}
.banner .layoutB .d-flex .captions a.light {
  background: white;
  color: #300B45;
  opacity: 0.9;
}
.banner .layoutB .d-flex .captions a.light:hover {
  opacity: 1;
}
.banner .layoutB .d-flex .captions a.dark {
  background: #300B45;
  color: white;
  opacity: 0.7;
}
.banner .layoutB .d-flex .captions a.dark:hover {
  opacity: 1;
  background: white;
  color: #300B45;
}
.banner .layoutB .d-flex .captions a.outline {
  border: solid 1px white;
  color: white;
  opacity: 0.9;
}
.banner .layoutB .d-flex .captions a.outline:hover {
  opacity: 1;
  background: white;
  color: #300B45;
}
.banner .layoutB .d-flex .image {
  max-height: 500px;
}

section.bannerV2 {
  border: solid 2px red;
}
section.bannerV2 .swiper {
  padding: 0;
  margin: 0;
}
section.bannerV2 .swiper .swiper-wrapper {
  padding: 0;
  margin: 0;
}
section.bannerV2 .swiper .swiper-wrapper .swiper-slide {
  padding: 0;
  margin: 0;
}
section.bannerV2 .swiper .swiper-pagination {
  display: block;
}
section.bannerV2 .swiper .swiper-pagination .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
}
section.bannerV2 .layoutC {
  display: grid;
  grid-template-columns: 45% 55%;
  margin: 1rem;
}
section.bannerV2 .layoutC .details {
  border: solid 1px red;
  background: red;
}
section.bannerV2 .layoutC .details .captions h1 {
  font-size: 1.5rem;
}
section.bannerV2 .layoutC .details .captions p {
  font-size: 0.8rem;
  font-weight: 600;
}
section.bannerV2 .layoutC .details .cta a {
  border: solid 1px black;
  padding: 5px 1rem !important;
  margin: 10px;
}
section.bannerV2 .layoutC .image {
  border: solid 1px red;
  background: blue;
}

.signage {
  border: solid 0px red;
  margin-bottom: 5rem;
}
.signage .container-fluid {
  margin: 0;
  padding: 0;
  width: 100% !important;
  height: auto !important;
  background: white;
  text-align: center;
}
.signage .benefits {
  background: #F3F3F3;
}
.signage .benefits ul {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: stretch;
  align-content: stretch;
}
.signage .benefits ul li {
  list-style: none;
  border: solid 0px black;
  width: 100%;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  text-transform: uppercase;
  font-weight: 500;
  font-size: 14px;
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.signage .benefits ul li img {
  width: auto;
}
.signage .benefits ul li i.bi {
  font-size: 1.8rem;
}
.signage h2 {
  margin: 0;
  margin-bottom: 5px;
  padding: 0;
  font-size: 20px;
  font-weight: 700;
}
.signage img {
  width: 100%;
}
.signage .descriptions {
  border-top: none;
  width: 90% !important;
  margin: auto;
  margin-top: 10px;
  height: 100% !important;
}
.signage .descriptions h4 {
  margin: 0;
  padding: 0;
  font-size: 16px;
}
.signage .descriptions p {
  margin: 0;
  padding: 0;
  font-size: 14px;
}
.signage .badge {
  margin-top: 10px;
  display: flex;
  justify-content: center;
}
.signage .badge img {
  width: auto;
}
.signage .layouts {
  display: flex;
  flex-direction: row;
}
.signage .layout1 .feature {
  border: solid 1px #DEE2E6;
}
.signage .layout1 .descriptions {
  width: 95% !important;
}
.signage .layout2 .swiper {
  width: 280px !important;
}
.signage .layout2 .mySwiper-layout2 {
  /* start: Hide & Show Arrow Button */
  /* end: Hide & Show Arrow Button */
}
.signage .layout2 .mySwiper-layout2 .swiper-button-next,
.signage .layout2 .mySwiper-layout2 .swiper-button-prev {
  color: #300B45;
  visibility: hidden;
  transition: opacity 0.3s ease-in-out; /* Smooth transition */
}
.signage .layout2 .mySwiper-layout2 .swiper-button-next:before,
.signage .layout2 .mySwiper-layout2 .swiper-button-prev:before {
  background: none;
}
.signage .layout2 .mySwiper-layout2 .swiper-button-next:after,
.signage .layout2 .mySwiper-layout2 .swiper-button-prev:after {
  background: none;
  font-size: 1rem;
  font-weight: bold;
}
.signage .layout2 .mySwiper-layout2 .swiper-wrapper:hover ~ .swiper-button-next,
.signage .layout2 .mySwiper-layout2 .swiper-wrapper:hover ~ .swiper-button-prev {
  visibility: visible;
}
.signage .layout2 .mySwiper-layout2 .swiper-button-next:hover,
.signage .layout2 .mySwiper-layout2 .swiper-button-prev:hover {
  visibility: visible;
}
.signage .layout2 .feature ul {
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.signage .layout2 .feature ul li {
  flex: 1 1 calc(33.333% - 20px);
  list-style: none;
  border: solid 1px #DEE2E6;
}
.signage .layout4 {
  width: 100% !important;
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 1fr 1fr 1fr;
}
.signage .layout4 .box {
  border: solid 1px #DEE2E6;
  width: 100% !important;
}
.signage .layout4 .box .swiper {
  width: 100% !important;
}
.signage .layout4 .box .swiper.mySwiper {
  width: 100% !important;
}
.signage .layout4 .box .swiper.mySwiper .swiper-slide {
  width: 100% !important;
  overflow: hidden;
}
.signage .layout5 {
  width: 100% !important;
  display: grid;
  grid-gap: 0;
  grid-template-columns: 1fr 1fr;
}
.signage .layout5 .box {
  border: solid 1px #DEE2E6;
  width: 100% !important;
}
.signage .layout5 .box .descriptions {
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}
.signage .layout5 .box {
  border: solid 1px #DEE2E6;
  width: 100% !important;
  align-items: center;
}
.signage .layout5 .box .swiper {
  width: 100% !important;
}
.signage .layout5 .box .swiper.mySwiper {
  width: 100% !important;
}
.signage .layout5 .box .swiper.mySwiper .swiper-slide {
  width: 100% !important;
  overflow: hidden;
}
.signage .process1 {
  margin-top: 1rem;
  background: #F9F9F9;
  border-radius: 10px;
  display: flex;
  padding: 2rem;
  align-items: center;
  gap: 1rem;
}
.signage .process1 .heading h2 {
  font-size: 18px;
  line-height: 22px;
}
.signage .process1 .heading p {
  font-size: 14px;
}
.signage .process1 .steps {
  flex-grow: 1;
}
.signage .process1 .steps ul {
  margin: 0;
  padding: 0;
  width: 100%;
  display: flex;
  flex-flow: row wrap;
  gap: 10px;
}
.signage .process1 .steps ul li {
  flex-grow: 1;
  background: white;
  font-size: 16px;
  font-weight: 500;
  padding: 10px 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #642096;
}
.signage .process1 .steps ul li span {
  font-size: 13px;
  line-height: 16px;
  font-weight: 600;
}
.signage .process1 .steps ul li span.default {
  display: block;
}
.signage .process1 .steps ul li span.mobile {
  display: none;
}
.signage .process1 .steps ul li i.bi {
  font-size: 2.3rem;
}
.signage .process1 .steps ul li.fixed-width {
  width: 160px;
  padding: 10px;
}
.signage .process2 {
  margin-top: 1rem;
  background: #F9F9F9;
  border-radius: 10px;
  display: flex;
  padding: 2rem;
  align-items: center;
  gap: 1rem;
}
.signage .process2 .heading h2 {
  font-size: 18px;
  line-height: 22px;
}
.signage .process2 .heading p {
  font-size: 14px;
}
.signage .process2 .steps {
  flex-grow: 1;
}
.signage .process2 .steps ul {
  margin: 0;
  padding: 0;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.signage .process2 .steps ul li {
  flex-grow: 1;
  background: white;
  font-size: 16px;
  font-weight: 500;
  padding: 10px 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #642096;
}
.signage .process2 .steps ul li span {
  font-size: 13px;
  line-height: 16px;
  font-weight: 600;
}
.signage .process2 .steps ul li span.default {
  display: block;
}
.signage .process2 .steps ul li span.mobile {
  display: none;
}
.signage .process2 .steps ul li i.bi {
  font-size: 2.3rem;
}
.signage .process2 .steps ul li.fixed-width {
  width: 160px;
  padding: 10px;
}
.signage section.cta {
  background: #391650;
}
.signage section.cta ul {
  margin: 0;
  padding: 0;
  display: flex;
}
.signage section.cta ul li {
  list-style: none;
  color: white;
}
.signage section.cta ul li h2 {
  color: white;
  font-size: 1.5rem;
}
.signage section.cta ul li p {
  color: white;
  line-height: normal;
}
.signage section.cta ul li a {
  background: white;
  color: #642096;
  padding: 12px 1rem;
  border-radius: 5px;
  font-size: 14px;
  width: fit-content;
  font-weight: 500;
  text-transform: capitalize;
}
.signage section.cta ul li.col1 {
  flex-basis: 30%;
  background-size: cover;
}
.signage section.cta ul li.col1.default {
  display: block;
}
.signage section.cta ul li.col1.mobile {
  display: none;
}
.signage section.cta ul li.col2 {
  flex-basis: 40%;
  padding: 3rem;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.signage section.cta ul li.col3 {
  flex-basis: 30%;
  background-size: cover;
}
.signage section.cta ul li.col3.default {
  display: block;
}
.signage section.cta ul li.col3.mobile {
  display: none;
}
.signage .exterior .descriptions {
  margin-top: 10px;
  margin-bottom: 10px;
  margin-left: 10px;
}
.signage .exterior .descriptions h4 {
  font-weight: 500;
}
.signage .layout6 {
  width: 100% !important;
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 2fr 1fr;
}
.signage .layout6 .box {
  border: solid 1px #DEE2E6;
  width: 100% !important;
}
.signage .layout6 .box .swiper {
  width: 100% !important;
}
.signage .layout6 .box .swiper.mySwiper {
  width: 100% !important;
}
.signage .layout6 .box .swiper.mySwiper .swiper-slide {
  width: 100% !important;
  overflow: hidden;
}
.signage .layout7 {
  width: 100% !important;
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 1fr 1fr 1fr;
}
.signage .layout7 .box {
  border: solid 1px #DEE2E6;
  width: 100% !important;
}
.signage .layout7 .box .swiper {
  width: 100% !important;
}
.signage .layout7 .box .swiper.mySwiper {
  width: 100% !important;
}
.signage .layout7 .box .swiper.mySwiper .swiper-slide {
  width: 100% !important;
  overflow: hidden;
}
.signage .layout8 {
  width: 100% !important;
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 1fr 2fr;
}
.signage .layout8 .box {
  border: solid 1px #DEE2E6;
  width: 100% !important;
}
.signage .layout8 .box .swiper {
  width: 100% !important;
}
.signage .layout8 .box .swiper.mySwiper {
  width: 100% !important;
}
.signage .layout8 .box .swiper.mySwiper .swiper-slide {
  width: 100% !important;
  overflow: hidden;
}
.signage .layout9 {
  width: 100% !important;
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 1fr 1fr 1fr;
}
.signage .layout9 .box {
  border: solid 1px #DEE2E6;
  width: 100% !important;
  display: flex;
  height: 100%;
  justify-items: start;
  flex-direction: column;
  flex-wrap: nowrap;
  height: fit-content !important;
}
.signage .layout9 .box .swiper {
  width: 100% !important;
}
.signage .layout9 .box .swiper.mySwiper {
  width: 100% !important;
}
.signage .layout9 .box .swiper.mySwiper .swiper-wrapper {
  width: 100% !important;
}
.signage .layout9 .box .swiper.mySwiper .swiper-wrapper .swiper-slide {
  width: 100% !important;
  overflow: hidden;
}
.signage .layout9 .box .swiper.mySwiper .swiper-wrapper .swiper-slide img {
  width: 100% !important;
}
.signage .layout10 {
  width: 100% !important;
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 2fr 1fr;
}
.signage .layout10 .box {
  border: solid 1px #DEE2E6;
  width: 100% !important;
  display: flex;
  height: 100%;
  justify-items: start;
  flex-direction: column;
  flex-wrap: nowrap;
  height: fit-content !important;
}
.signage .layout10 .box .swiper {
  width: 100% !important;
}
.signage .layout10 .box .swiper.mySwiper {
  width: 100% !important;
}
.signage .layout10 .box .swiper.mySwiper .swiper-wrapper {
  width: 100% !important;
}
.signage .layout10 .box .swiper.mySwiper .swiper-wrapper .swiper-slide {
  width: 100% !important;
  overflow: hidden;
}
.signage .layout10 .box .swiper.mySwiper .swiper-wrapper .swiper-slide img {
  height: 316px !important;
}
.signage .layout11 {
  width: 100% !important;
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 1fr 2fr;
}
.signage .layout11 .box {
  border: solid 1px #DEE2E6;
  width: 100% !important;
  display: flex;
  height: 100%;
  justify-items: start;
  flex-direction: column;
  flex-wrap: nowrap;
  height: fit-content !important;
}
.signage .layout11 .box .swiper {
  width: 100% !important;
}
.signage .layout11 .box .swiper.mySwiper {
  width: 100% !important;
}
.signage .layout11 .box .swiper.mySwiper .swiper-wrapper {
  width: 100% !important;
}
.signage .layout11 .box .swiper.mySwiper .swiper-wrapper .swiper-slide {
  width: 100% !important;
  overflow: hidden;
}
.signage .layout11 .box .swiper.mySwiper .swiper-wrapper .swiper-slide img {
  height: 316px !important;
}
.modal {
  height: auto !important;
  max-width: 800px !important;
  padding: 0px !important;
}

.modal a.close-modal {
  top: 12.5px !important;
  right: 12.5px !important;
}

.modal-content {
  width: fit-content;
  max-width: 90%; /* Optional: Prevent it from becoming too wide */
  /* Other styling like padding, background, border, etc. */
}
.modal-content .modaliFrame {
  width: 800px !important;
  height: 720px !important;
  border: none;
}

/* Full-screen overlay */
.modal-backdrop {
  display: none; /* Hide by default */
  position: fixed;
  top: 0;
  left: 0;
  width: 800px !important;
  height: 720px !important;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1000;
}

@media (max-width: 320px) {
  .signage .banner .layoutA .d-flex {
    /*
    width:100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: stretch;
    align-content: stretch;
    gap: 5rem;
    */
    gap: 0;
  }
  .signage .banner .layoutA .d-flex .captions {
    /*
    border: solid 1px red;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: .5rem;
    */
    gap: 0.3rem;
    flex-basis: 40%;
  }
  .signage .banner .layoutA .d-flex .captions h1 {
    /*
    color: white;
    font-size: 2rem;
    line-height: 2.2rem;
    text-transform: uppercase;                        
    margin: 0;
    padding: 0;
    */
    font-size: 0.7rem;
    line-height: 0.8rem;
  }
  .signage .banner .layoutA .d-flex .captions p {
    /*
    color: white;
    font-size: 1.2rem;
    line-height: 1.3rem;
    font-weight: 500;
    text-transform: uppercase;
    margin: 0;
    padding: 0;
    */
    font-size: 0.5rem;
    line-height: 0.6rem;
  }
  .signage .banner .layoutA .d-flex .captions a {
    padding: 8px 16px;
    font-weight: 500;
    font-size: 12px;
  }
  .signage .banner .layoutA .d-flex .image {
    flex-basis: 60%;
  }
  .signage .banner .layoutA .d-flex .image img {
    max-height: 200px;
    object-fit: cover;
  }
  .signage section.cta {
    background: #391650;
  }
  .signage section.cta ul {
    display: flex;
  }
  .signage section.cta ul li.col1.default {
    display: none;
  }
  .signage section.cta ul li.col1.mobile {
    display: block;
  }
  .signage section.cta ul li.col3.default {
    display: none;
  }
  .signage section.cta ul li.col3.mobile {
    display: block;
  }
}
@media (min-width: 321px) and (max-width: 480px) {
  .signage .banner {
    height: 300px;
  }
  .signage .banner .layoutA {
    height: 300px;
    display: flex;
    align-items: center;
    background-color: #300B45;
  }
  .signage .banner .layoutA .d-flex {
    /*
    width:100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: stretch;
    align-content: stretch;
    gap: 5rem;
    */
    gap: 0;
  }
  .signage .banner .layoutA .d-flex .captions {
    /*
    border: solid 1px red;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: .5rem;
    */
    padding-left: 10px;
    gap: 0.3rem;
    flex-basis: 40%;
  }
  .signage .banner .layoutA .d-flex .captions h1 {
    /*
    color: white;
    font-size: 2rem;
    line-height: 2.2rem;
    text-transform: uppercase;                        
    margin: 0;
    padding: 0;
    */
    font-size: 1rem;
    line-height: 1.2rem;
  }
  .signage .banner .layoutA .d-flex .captions p {
    /*
    color: white;
    font-size: 1.2rem;
    line-height: 1.3rem;
    font-weight: 500;
    text-transform: uppercase;
    margin: 0;
    padding: 0;
    */
    font-size: 0.8rem;
    line-height: 1rem;
  }
  .signage .banner .layoutA .d-flex .captions a {
    padding: 8px 16px;
    font-weight: 500;
    font-size: 12px;
  }
  .signage .banner .layoutA .d-flex .image {
    flex-basis: 60%;
  }
  .signage .banner .layoutA .d-flex .image img {
    height: 300px;
    object-fit: cover;
  }
  .signage .banner .layoutB {
    height: 300px;
    display: flex;
    align-items: center;
  }
  .signage .banner .layoutB .d-flex {
    /*
    width:100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: stretch;
    align-content: stretch;
    gap: 5rem;
    */
    gap: 0;
  }
  .signage .banner .layoutB .d-flex .captions {
    /*
    border: solid 1px red;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: .5rem;
    */
    padding-left: 10px;
    gap: 0.3rem;
    flex-basis: 55%;
  }
  .signage .banner .layoutB .d-flex .captions h1 {
    /*
    color: white;
    font-size: 2rem;
    line-height: 2.2rem;
    text-transform: uppercase;                        
    margin: 0;
    padding: 0;
    */
    font-size: 1rem !important;
    line-height: 1.2rem !important;
  }
  .signage .banner .layoutB .d-flex .captions p {
    /*
    color: white;
    font-size: 1.2rem;
    line-height: 1.3rem;
    font-weight: 500;
    text-transform: uppercase;
    margin: 0;
    padding: 0;
    */
    font-size: 0.8rem;
    line-height: 1rem;
  }
  .signage .banner .layoutB .d-flex .captions a {
    padding: 8px 16px;
    font-weight: 500;
    font-size: 12px;
  }
  .signage .banner .layoutB .d-flex .image {
    flex-basis: 45%;
    display: flex;
    align-items: center;
  }
  .signage .banner .layoutB .d-flex .image img {
    width: auto;
    max-height: 250px;
  }
  .signage .hero-banner .custom-container {
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0;
  }
  .signage .hero-banner .custom-container .captions {
    padding-left: 1.5rem;
  }
  .signage .hero-banner .custom-container .captions h1 {
    font-size: 1.8rem;
  }
  .signage .hero-banner .custom-container img {
    width: 60%;
  }
  .signage .hero-banner .single-image {
    max-height: 280px !important;
  }
  .signage .hero-banner .no-captions .captions {
    display: none;
  }
  .signage .hero-banner .no-captions img {
    width: 100%;
    max-height: 321px;
    object-fit: cover;
  }
  .signage .benefits {
    width: 100%;
  }
  .signage .benefits ul {
    width: 100%;
    padding: 10px 0;
    margin: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: flex-start;
    align-content: center;
  }
  .signage .benefits ul li {
    padding: 0;
    margin: 0;
    list-style: none;
    border: solid 0px red;
    width: 100%;
    font-size: 14px !important;
    text-transform: capitalize;
    display: flex;
    flex-direction: column;
    text-align: center;
    line-height: normal;
    font-weight: 500;
  }
  .signage .benefits ul li img {
    width: 35px !important;
  }
  .signage .layouts {
    display: flex;
    flex-direction: column;
  }
  .signage .layout4 {
    width: 100% !important;
    grid-gap: 10px;
    grid-template-columns: 1fr;
  }
  .signage .layout5 {
    width: 100% !important;
    display: flex;
    flex-direction: column;
  }
  .signage .layout5.reverse {
    flex-direction: column-reverse;
  }
  .signage .layout6,
  .signage .layout7,
  .signage .layout8 {
    width: 100% !important;
    grid-gap: 10px;
    grid-template-columns: 1fr;
  }
  .signage .layout9,
  .signage .layout10,
  .signage .layout11 {
    width: 100% !important;
    grid-gap: 10px;
    grid-template-columns: 1fr;
  }
  .signage .layout9 .box .swiper.mySwiper .swiper-slide img,
  .signage .layout10 .box .swiper.mySwiper .swiper-slide img,
  .signage .layout11 .box .swiper.mySwiper .swiper-slide img {
    width: 100% !important;
    object-fit: cover;
  }
  .signage .process1 {
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  .signage .process1 .heading {
    text-align: center;
    /*
    h2{
        font-size: 18px;
        line-height: 22px;
    }

    p{
        font-size: 14px;
    }
    */
  }
  .signage .process1 .steps {
    flex-grow: 1;
    width: 100%;
  }
  .signage .process1 .steps ul {
    width: 100%;
    display: flex;
    flex-direction: column !important;
  }
  .signage .process1 .steps ul li span.default {
    display: none;
  }
  .signage .process1 .steps ul li span.mobile {
    display: block;
  }
  .signage .process1 .steps ul li.fixed-width {
    width: 100%;
  }
  .signage .process2 {
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  .signage .process2 .heading {
    text-align: center;
    /*
    h2{
        font-size: 18px;
        line-height: 22px;
    }

    p{
        font-size: 14px;
    }
    */
  }
  .signage .process2 .steps {
    flex-grow: 1;
    width: 100%;
  }
  .signage .process2 .steps ul {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
  }
  .signage .process2 .steps ul li.fixed-width {
    width: 100%;
  }
  .signage section.cta {
    background: #391650;
  }
  .signage section.cta ul {
    display: flex;
    flex-direction: column;
  }
  .signage section.cta ul li.col1.default {
    display: none;
  }
  .signage section.cta ul li.col1.mobile {
    display: block;
  }
  .signage section.cta ul li.col3.default {
    display: none;
  }
  .signage section.cta ul li.col3.mobile {
    display: block;
  }
  .modal {
    max-width: 400px !important;
    max-height: 600px;
    overflow-y: scroll !important;
  }
  .modal a.close-modal {
    top: 12.5px !important;
    right: 12.5px !important;
  }
  .modal-content {
    /* Other styling like padding, background, border, etc. */
  }
  .modal-content .modaliFrame {
    width: 400px !important;
    height: 720px !important;
  }
  /* Full-screen overlay */
  .modal-backdrop {
    width: 400px !important;
    height: 600px !important;
    max-height: 600px !important;
  }
}
@media (min-width: 481px) and (max-width: 768px) {
  .signage .banner .layoutA .d-flex {
    /*
    width:100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: stretch;
    align-content: stretch;
    gap: 5rem;
    */
    gap: 0;
  }
  .signage .banner .layoutA .d-flex .captions {
    /*
    border: solid 1px red;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: .5rem;
    */
    padding-left: 10px;
    gap: 0.3rem;
    flex-basis: 40%;
  }
  .signage .banner .layoutA .d-flex .captions h1 {
    /*
    color: white;
    font-size: 2rem;
    line-height: 2.2rem;
    text-transform: uppercase;                        
    margin: 0;
    padding: 0;
    */
    font-size: 1.5rem;
    line-height: 1.5rem;
  }
  .signage .banner .layoutA .d-flex .captions p {
    /*
    color: white;
    font-size: 1.2rem;
    line-height: 1.3rem;
    font-weight: 500;
    text-transform: uppercase;
    margin: 0;
    padding: 0;
    */
    font-size: 1rem;
    line-height: 1rem;
  }
  .signage .banner .layoutA .d-flex .captions a {
    padding: 8px 16px;
    font-weight: 500;
    font-size: 12px;
  }
  .signage .banner .layoutA .d-flex .image {
    flex-basis: 60%;
  }
  .signage .process1 {
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  .signage .process1 .heading {
    text-align: center;
    /*
    h2{
        font-size: 18px;
        line-height: 22px;
    }

    p{
        font-size: 14px;
    }
    */
  }
  .signage .process1 .steps {
    flex-grow: 1;
    width: 100%;
  }
  .signage .process1 .steps ul {
    width: 100%;
    display: flex;
    flex-direction: column !important;
  }
  .signage .process1 .steps ul li span.default {
    display: none;
  }
  .signage .process1 .steps ul li span.mobile {
    display: block;
  }
  .signage .process1 .steps ul li.fixed-width {
    width: 100%;
  }
  .signage section.cta {
    background: #391650;
  }
  .signage section.cta ul {
    display: flex;
    flex-direction: column;
  }
  .signage section.cta ul li.col1.default {
    display: none;
  }
  .signage section.cta ul li.col1.mobile {
    display: block;
  }
  .signage section.cta ul li.col3.default {
    display: none;
  }
  .signage section.cta ul li.col3.mobile {
    display: block;
  }
}
@media (min-width: 769px) and (max-width: 991px) {
  .signage .banner .layoutA .d-flex {
    /*
    width:100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: stretch;
    align-content: stretch;
    gap: 5rem;
    */
    gap: 0;
  }
  .signage .banner .layoutA .d-flex .captions {
    /*
    border: solid 1px red;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: .5rem;
    */
    padding-left: 10px;
    gap: 0.3rem;
    flex-basis: 40%;
  }
  .signage .banner .layoutA .d-flex .captions h1 {
    /*
    color: white;
    font-size: 2rem;
    line-height: 2.2rem;
    text-transform: uppercase;                        
    margin: 0;
    padding: 0;
    */
    font-size: 1.8rem;
    line-height: 1.8rem;
  }
  .signage .banner .layoutA .d-flex .captions p {
    /*
    color: white;
    font-size: 1.2rem;
    line-height: 1.3rem;
    font-weight: 500;
    text-transform: uppercase;
    margin: 0;
    padding: 0;
    */
    font-size: 1.3rem;
    line-height: 1.3rem;
  }
  .signage .banner .layoutA .d-flex .image {
    flex-basis: 60%;
  }
  .signage .process1 {
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  .signage .process1 .heading {
    text-align: center;
    /*
    h2{
        font-size: 18px;
        line-height: 22px;
    }

    p{
        font-size: 14px;
    }
    */
  }
  .signage .process1 .steps {
    flex-grow: 1;
    width: 100%;
  }
  .signage .process1 .steps ul {
    width: 100%;
    display: flex;
    flex-direction: column !important;
  }
  .signage .process1 .steps ul li span.default {
    display: none;
  }
  .signage .process1 .steps ul li span.mobile {
    display: block;
  }
  .signage .process1 .steps ul li.fixed-width {
    width: 100%;
  }
  .signage section.cta {
    background: #391650;
  }
  .signage section.cta ul {
    display: flex;
    flex-direction: column;
  }
  .signage section.cta ul li.col1.default {
    display: none;
  }
  .signage section.cta ul li.col1.mobile {
    display: block;
  }
  .signage section.cta ul li.col3.default {
    display: none;
  }
  .signage section.cta ul li.col3.mobile {
    display: block;
  }
}

/*# sourceMappingURL=signage.css.map */