@charset "UTF-8";
/* Add an italic font style to all quotes */
q {font-style: italic;
    font-size: x-large;
    font-weight: 500;
    text-align: center !important;}

.card-deck {
    padding-left: 5% !important;
    padding-right: 5% !important;
}
/* Add a blue color to the author */
.author {
    padding-top: 3%;
    color:#f0b228;
    font-size: x-large;
    font-weight: 600;
    text-align: center;}

.card-body h5 {margin-left: 0% !important; }
.card-body p {padding-left: 0% !important;}
.card img {box-shadow: 0 0px 5px 1px #cfcfcfd6;}
.about h3 {margin-left:10%;}
@media only screen and (max-width: 800px) {
    .about-boxes {
        display: block !important;
        width: 100% !important;
        margin-left: 0% !important;
    }
    .about-boxes img {
        padding: 10%;
    }
}
/*quotes*/
.mySlides-quotes {
    padding: 15%;
    padding-bottom: 0%;
    padding-top: 0;
    text-align:center;
}
/* Slideshow container */
.slideshow-container-testimonial {
    margin: auto;
    width: 80%;
    position: relative;
    background: white;
    border-radius: 12pt;
    padding-top: 3%;
    padding-bottom: 1%;
    margin-bottom: 3%;
    box-shadow: 0 0px 5px 1px #cfcfcfd6;
}

/* Slides */
.mySlides-testimonial {
    padding: 15%;
    padding-bottom: 0%;
    padding-top: 0;
    text-align:center;
}

/* Next & previous buttons */
.prev, .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    margin-top: -30px;
    padding: 16px;
    color: #888;
    font-weight: bold;
    font-size: 20px;
    border-radius: 0 3px 3px 0;
    user-select: none;
}

/* Position the "next button" to the right */
.next {
    position: absolute;
    right: 0;
    border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
    color: black;
    background-color: white;
}

/* The dot/bullet/indicator container */
.dot-container {
    text-align: center;
    padding: 5%;
    padding-top:0;
}

/* The dots/bullets/indicators */
.dot-testimonial {
    cursor: pointer;
    height: 1vw;
    width: 1vw;
    margin: 0 2px;
    background-color: #e6e6e6;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
}

/* Add a background color to the active dot/circle */
.active, .dot:hover {
    background-color: #f0b228;
}

/* Add an italic font style to all quotes */
q {font-style: italic;
    font-size: x-large;
    font-weight: 500;
    text-align: center !important;}

/* Add a blue color to the author */
.author {
    padding-top: 3%;
    color:#f0b228;
    font-size: x-large;
    font-weight: 600;
    text-align: center;}

.card-body h5 {margin-left: 0% !important; }
.card-body p {padding-left: 0% !important;}
.card img {box-shadow: 0 0px 5px 1px #cfcfcfd6;}
.about h3 {margin-left:10%;}
@media only screen and (max-width: 800px) {
    .about-boxes {
        display: block !important;
        width: 100% !important;
        margin-left: 0% !important;
    }
    .about-boxes img {
        padding: 10%;
    }
}
.newform {
    background-color: white;
    border-radius: 10px;
    color: black;
    text-align: left;
    padding: 10%;
}

h4 {
    padding-bottom: 5%
}

.newform-input {
    margin-bottom: 12px;
    padding: 10px;
    width: 100%;
    border-radius: 8px;
    border-width: 2px;
    border-color: #e0dede;
    border-style: solid;
}

.newform-button {
    background-color: #01BD6F;
    color: white;
    width: 100%;
    border: none;
    border-radius: 8px;
    padding: 3% 2%;
}

.newform-grid {
    display: grid;
    grid-template-columns: 50% 50%;
}

.casestudy-image {
    width: 100%;
    box-shadow: 1px 1px 10px 2px #ced6d9;
}
.slideshow-container {
    width:100%;
    position: relative;
    margin: auto;
}

/* Next & previous buttons */
.prev, .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    margin-top: -22px;
    padding: 16px;
    color: white;
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
}

/* Position the "next button" to the right */
.next {
    right: 0;
    border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
}

/* Caption text */
.text {
    color: #f2f2f2;
    font-size: 15px;
    padding: 8px 12px;
    position: absolute;
    bottom:20px;
    width: 100%;
    text-align: center;
}
.mySlides {
    display:none;
}
.active-slide {
    display:block;
}
/* Number text (1/3 etc) */
.numbertext {
    color: #f2f2f2;
    font-size: 12px;
    padding: 8px 12px;
    position: absolute;
    top: 0;
}

/* The dots/bullets/indicators */
.dot {
    cursor:pointer;
    height: 13px;
    width: 13px;
    margin: 0 2px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
}

.active, .dot:hover {
    background-color: #717171;
}

.slideshow-container-testimonial {
    margin: auto;
    width: 80%;
    position: relative;
    background: #f5f5f5;
    padding-top: 3%;
    padding-bottom: 1%;
    margin-bottom: 1%;
}

/* Slides */
.mySlides-testimonial {
    display: none;
    padding: 15%;
    padding-bottom: 0%;
    text-align: center;
    padding-top: 0;
}

/* Next & previous buttons */
.prev, .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    margin-top: -30px;
    padding: 16px;
    color: #888;
    font-weight: bold;
    font-size: 20px;
    border-radius: 0 3px 3px 0;
    user-select: none;
}

/* Position the "next button" to the right */
.next {
    position: absolute;
    right: 0;
    border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
    color: black;
    background-color: white;
}

/* The dot/bullet/indicator container */
.dot-container {
    text-align: center;
    padding: 5%;
    padding-top:0;
}

/* The dots/bullets/indicators */
.dot-testimonial {
    cursor: pointer;
    height: 1vw;
    width: 1vw;
    margin: 0 2px;
    background-color: #e6e6e6;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
}

/* Add a background color to the active dot/circle */
.active, .dot:hover {
    background-color: #f0b228;
}

/* Add an italic font style to all quotes */
q {font-style: italic;
    font-size: x-large;
    font-weight: 500;}

/* Add a blue color to the author */
.author {text-align: center;
    padding-top: 3%;
    color:#f0b228;}
.casestudy-btn {
    width: 40vw;
    margin-left: 30vw;
    padding: 1vw;
    background-color: #47aeff;
    border-color: #0093ff;
}
.casestudy-btn:hover {
    background-color: #0093ff;
    border-color: #0093ff;
}
.casestudy-btn:active {
    background-color: #0093ff;
    border-color: #0093ff;
}
.casestudy-btn:focus {
    background-color: #0093ff;
    border-color: #0093ff;
}
.blog-header {
    width: 44vw;
    margin-left: 28vw;
    padding-bottom: 2vw;
}
.modal {
    display: none;
    position: fixed;
    z-index: 1;
    padding-top: 100px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4);
}

.modal-content {
    background-color: #fefefe00;
    margin: auto;
    padding: 20px;
    border: 1px solid #8880;
    width: 40vw;
}

.close {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    display:none;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}
#popupcontainer {
    position: fixed;
    border-radius: 20pt;
    bottom: 2%;
    right: 1%;
    width: 25%;
    background-color: #fff;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
    z-index: -1;
    padding: 10px;
    padding-top: 5px;
    opacity: 0;
    display: none;
}

#close-button {
    position: absolute;
    top: 12px;
    right: 15px;
    background-color: white;
    color: #bfbfbf;
    border: none;
    width: 20px;
    height: 20px;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    border-radius: 50%;
}
#close-button:focus {
    outline:none;
    border:none;
    text-decoration:none;
}
.nothidden {
    z-index:10 !important;
    opacity: 1 !important;
    transition: opacity 1s ease-in-out;
    display: block;
}
.live-demo {
    background-color: #ff6a00;
    color: #fff!important
}

.social-col {
    width: 100%;
    padding-left: 0;
    padding-top: 0;
    padding-right: 0;
    padding-bottom: 0
}

.social {
    padding-right: 5%;
    padding-left: 5%
}

.live-demo:hover {
    background-color: #b54b00
}

.menu {
    float: right;
    background-position: right top;
    height: auto;
    width: 71%
}

.tool {
    width: 8%;
    margin-bottom: 2%;
}

.tool:hover {
    opacity: .5
}

.navbar-brand {
    background-image: url(../Images/Yard-Management-Solutions-Logo.jpg);
    background-size: auto 110%;
    background-repeat: no-repeat;
    padding-left: 0;
    width: 325px;
    height: 40px;
    margin-right: 0
}

.navbar-right {
    float: right!important;
    margin-right: -10%;
    padding-right: 0;
    margin-right: 4%
}

.form-live-demo {
    padding-left: .5rem;
    padding-right: .5rem
}

.navbar {
    display: block;
    text-shadow: 0 0;
    -webkit-box-shadow: 0 1px 9px hsla(0,0%,0%,.66);
    box-shadow: 0 1px 9px hsla(0,0%,0%,.66);
    padding-bottom: 10px;
    padding-top: 15px
}
.curved-section {
    position: relative;
    clip-path: ellipse(100% 100% at 50% 0);
    z-index: 0;
}
.embed-responsive-item {
    margin-top: 2%;
    margin-bottom: 5%;
    padding-bottom: 5%;
    padding-left: 10%;
    padding-right: 10%
}

.navbar-light .navbar-toggler {
    color: rgba(0,0,0,.5);
    border-color: rgba(0,0,0,.1);
    float: right
}

h1 {
    text-align: center;
    font-size: 250%;
    padding-top: 3%;
    color: #ef6730;
    padding-right: 10%;
    padding-left: 10%;
    padding-bottom: 1%
}

h6 {
    text-align: center;
    font-size: 250%;
    padding-top: 3%;
    color: #ef6730;
    padding-right: 10%;
    padding-left: 10%;
    padding-bottom: 1%
}

.roi td {
    padding-right: 2%;
    padding-left: 2%
}

p {
    text-align: left;
    font-size: large;
    padding-left: 10%;
    padding-right: 10%;
    padding-bottom: 2%;
    color: #616161
}

.tools {
    background-color: #0d0e23;
    color: #fff;
    padding-top: 5%;
    padding-right: 5%;
    padding-bottom: 5%;
    background-size: cover;
    background-repeat: no-repeat
}

.videos {
    padding-right: 10%;
    padding-bottom: 5%;
    padding-left: 10%;
    background-color: #ececec;
    margin-bottom: 5%
}

.roi-percentage {
    font-size: 300%
}

.savings {
    color: #fff;
    padding-bottom: 10%;
    padding-left: 10%;
    padding-right: 10%
}

.savings h1 {
    color: #041357;
    padding-bottom: 3%
}

.saving-title {
    font-weight: 700
}

.roi {
    text-align: center
}

.tools h2 {
    width: 42%;
    margin-left: 5%;
    margin-top: 0;
    float: left;
    padding-top: 13%;
    padding-bottom: 7%;
    font-size: 250%;
    text-align: left
}

.flex-wrapper {
    display: flex;
    flex-flow: row nowrap
}

.single-chart {
    width: 33%;
    justify-content: space-around
}

.btn-warning {
    float: right;
    color: #fcfcfc
}

.btn {
    background-color: #ef6730;
    border-color: #b63e0e
}

.dropdown-live-demo {
    margin-left: -133%;
    padding-left: .5rem;
    padding-right: .5rem;
    width: 233%
}

.circular-chart {
    display: block;
    margin: 10px auto;
    max-width: 80%;
    max-height: 250px;
    width: 11vw
}

.circle-bg {
    fill: none;
    stroke: #eee;
    stroke-width: 3.8
}

.circle {
    fill: none;
    stroke-width: 2.8;
    stroke-linecap: round;
    animation: progress 1s ease-out forwards
}

@keyframes progress {
    0% {
        stroke-dasharray: 0 100
    }
}

.circular-chart.orange .circle {
    stroke: #ef6730
}

.circular-chart.yellow .circle {
    stroke: #fb0
}

.circular-chart.green .circle {
    stroke: #1fa200
}

.circular-chart.Navy .circle {
    stroke: #010a57
}

.circular-chart.red .circle {
    stroke: #dd0003
}

.circular-chart.purple .circle {
    stroke: #5400b3
}

.percentage {
    fill: #666;
    font-family: sans-serif;
    font-size: .5em;
    text-anchor: middle
}

.single-chart p {
    text-align: center
}

.single-chart.home-savings p {
    text-align: center
}

.littletext {
    font-size: x-small;
    text-align: left!important;
    padding-left: 0;
    opacity: .6
}

.footer {
    padding-bottom: 2%;
    background-color: #393939
}

.designedby {
    text-align: right;
    font-size: small;
    color: #aaa
}

.radlink {
    text-align: right;
    color: #fff;
    font-weight: 700;
    font-size: small;
    margin-top: -3.5%
}

.footer-bottom {
    background-color: #1e1e1e;
    padding-right: 5%;
    padding-left: 5%;
    width: 100%
}

.top-footer td {
    width: 30%;
    color: #aaa;
    font-weight: lighter;
    font-size: small
}

.gold-bold td {
    color: #fff;
    font-weight: 700;
    font-size: medium
}

.links a {
    color: #aaa
}

.top-footer {
    padding-left: 5%;
    padding-top: 5%;
    padding-right: 5%;
    padding-bottom: 5%
}

.copyright {
    color: #aaa;
    font-size: x-small;
    padding-bottom: 0;
    margin-bottom: .5%
}

.terms {
    color: #ef6730;
    font-size: x-small;
    font-weight: bolder;
    text-align: right;
}

.carousel-caption h5 {
    float: none;
    margin-top: -43%;
    color: #ffae00;
    font-size: xx-large;
    text-align: left;
    margin-left: 0
}

.carousel-caption p {
    text-align: left;
    margin-top: 2%;
    color: #fff;
    font-style: normal;
    font-weight: 100;
    float: none
}

.blue {
    background-color: #0d0e23!important
}

.contact {
    background-color: #ececec;
    padding-left: 10%;
    padding-right: 10%;
    padding-top: 5%;
    padding-bottom: 5%;
    width: 50%;
    float: left;
    flex: 1
}

.card-img-top.card {
    margin-left: -5%;
    min-width: 33.3333%;
    display: flex;
    flex: 1 0 0;
    -ms-flex: 1 0 0;
    width: 110%
}

.card-text {
    width: 130%;
    margin-left: -13%;
    font-size: small
}

.card-deck {
    padding-left: 10%;
    padding-right: 10%;
    margin: auto
}

.card-deck .card {
    min-width: 30%;
    margin-bottom: 5%
}

.learn-more {
    margin-bottom: 7%
}

.objectives {
    margin-left: 10%;
    margin-right: 10%;
    color: #393939;
    margin-top: -1%;
    margin-bottom: 5%
}

.mb-0 a {
    color: #ffb900
}

.mb-0 .collapsed {
    color: #1e1e1e
}

.mb-0 a:hover {
    color: #616161;
    text-decoration: none
}

.card {
    margin-bottom: -.2%;
    border-radius: 0;
    -ms-flex-direction: column;
    flex-direction: column
}

.objectives-text p {
    text-align: center
}

.d-block {
    width: 40%;
    float: right;
    margin-top: 4%;
    margin-right: 15%;
    margin-left: 10%;
    padding-right: 15%
}

.casestudy-btn {
    width: 40vw !important;
    margin-left: 30vw !important;
    padding: 1vw !important;
    background-color: #47aeff !important;
    border-color: #0093ff !important;
}

.casestudy-btn:hover {
    background-color: #0093ff !important;
    border-color: #0093ff !important;
}

.casestudy-btn:active {
    background-color: #0093ff !important;
    border-color: #0093ff !important;
}

.casestudy-btn:focus {
    background-color: #0093ff;
    border-color: #0093ff;
}

.mobile-hide .tab button {
    float: left;
    border: none;
    outline: none;
    opacity: 1;
    cursor: pointer;
    color: white;
    font-size: 1vw !important;
    padding: 1.5vw;
    width: 100%;
    transition: 0.3s;
    background-color: #011b3d;
}

.mobile-hide .tab {
    overflow: hidden;
    width: 100%;
    padding: 0;
    margin: 0;
}

.mobile-hide .tab button.active {
    opacity: 1;
    border: none;
    color: orange;
    background-color: white;
}

.mobile-hide .tabcontent {
    border: none;
}

.demo-form .contact {
    background-color: #0c4796;
    color: white;
    text-align: center;
}

.demo-form .contact p {
    color: white;
    padding: 0;
    margin: 0;
    padding-bottom: 7%;
    padding-top: 5%;
    text-align: center;
}

.demo-form {
    background-color: #f1f1f1 !important;
}

@media only screen and (max-width: 800px) {
    #popupcontainer {
        width: 100% !important;
    }

    .demo-form .contact {
        background-color: white;
        color: black;
    }

    .demo-form .blue-contact {
        display: none;
    }
}

@media only screen and (max-width: 800px) {
    .modex-group-image {
        width: 100% !important;
        margin-left: 0% !important;
        margin-bottom: 3% !important;
    }

    .about-boxes {
        display: block !important;
        width: 100% !important;
        margin-left: 0% !important;
    }

    .about h5 {
        margin-top: 5% !important;
    }
}

.partnership h2 {
    padding-left: 10%;
    padding-right: 10%;
    text-align: center;
    font-size: x-large;
    padding-bottom: 2%;
    color: #616161;
    font-weight: 600;
}

.partnership ol, .partnership ul {
    padding-left: 2%;
    padding-right: 10%;
    text-align: left;
    font-size: large;
    padding-top: 0;
    padding-bottom: 0;
    margin-bottom: 0;
    color: #616161;
}

.partnership li {
    line-height: 1.5;
    padding-bottom: 4%;
}

.partnership-header {
    background-image: url(../Images/partnership-shake.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    padding-top: 3%;
    padding-bottom: 2%;
    margin-bottom: 5%;
}

.dinner-thank-you {
    background-color: #070736;
    padding-top:5%;
    padding-bottom: 5%;
}
.thank-you {
    width: 50%;
    margin-left: 25%;
    background-color: white;
    padding: 2%;
    padding-top:5%
}
.thank-you h2 {
    text-align: center !important;
    font-size:3em;
    padding-bottom: 2%;
}
.thank-you p {
    text-align: center !important;
    font-size: large !important;
}
.thank-you-icon {
    text-align: center;
    width:20%;
    margin-left: 42%;
    margin-bottom: 5%;
}

.event-header {
    background-image: url(../Images/eventwebpage-background.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    padding-top: 7%;
    padding-bottom: 5%;
    margin-bottom: 5%;
}

.partner-icons {
    width: 26%;
    margin-left: 37%;
    text-align: center;
    margin-bottom: 5%;
}
@keyframes shine {
    0% {
        top: 150%;
        left: -150%;
    }
    80% {
        top: -150%;
        left: 150%;
    }
}
.icon-header {
    font-size: larger;
    color: #616161;
    font-weight: 600;
    padding-bottom: 1%;
    padding-top: 1%;
}

.event-icons {
    width: 26%;
    margin-left: 38%;
    text-align: center;
    margin-bottom: 6%;
}

.event-icons-location {
    width: 13%;
    margin-left: 44%;
    text-align: center;
    margin-bottom: 3%;
}
@media only screen and (max-width:800px){
    .event-icons {
        margin-top: 5%;
    }
}
.event-header p {    text-align: center;
    padding-left: 20%;
    padding-right: 20%;
    font-weight: 200;
    color: white;
    opacity: .7;
}

.why-partner h3 {
    text-align: center;
    font-size: larger;
    padding-bottom: 0%;
    color: #616161;
    font-weight: 600;
    padding-top: 1%;
}
.why-partner {
    position: relative; /* Add this line */
    overflow: hidden; /* Add this line to ensure the shine effect stays within bounds */
}
.why-partner::before {
    content: '';
    position: absolute;
    top: 150%;
    left: -150%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.1) 60%, rgba(255, 255, 255, 0) 100%);
    transform: rotate(45deg);
    z-index: 2; /* Ensure this is above the image */
    pointer-events: none; /* Add this line to ensure it doesn't interfere with clicks */
}
.why-partner:hover::before {
    animation: shine 1.5s forwards; /* Add animation on hover */
}
.why-partner:hover .partner-icons {
    transform: scale(1.08);
}

.why-partner p {
    padding: 0;
    text-align: center;
}

.partnership h2 {
    padding-left: 23%;
    padding-right: 23%;
    text-align: center;
    font-size: x-large;
    padding-bottom: 3%;
    color: #616161;
    font-weight: 600;
}

.why-partner-grid {
    display: grid;
    grid-template-columns: 25% 25% 25% 25%;
    padding-left: 5%;
    width: 90%;
    grid-gap: 2%;
    padding-bottom: 5%;
}

.event-grid {
    display: grid;
    grid-template-columns: 25% 50% 25%;
    padding-left: 5%;
    width: 90%;
    grid-gap: 2%;
    padding-bottom: 5%;
}

.how-partner-icons {
    width: 36%;
    margin-left: 32%;
    text-align: center;
    margin-bottom: 5%;
}

.how-partner h3 {
    text-align: center;
    font-size: larger;
    padding-bottom: 0%;
    color: #616161;
    font-weight: 600;
    padding-top: 1%;
}

.how-partner p {
    padding: 0;
}

.how-partner-grid {
    display: grid;
    grid-template-columns: 20% 20% 20% 20% 20%;
    padding-left: 0%;
    width: 94%;
    grid-gap: 2%;
}

.partner-three-steps {
    background-image: url(../Images/partner-three-steps.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    width: 72%;
    margin-left: 14%;
    padding-bottom: 20%;
    margin-bottom: 10%;
}

.partnership-network-list {
    padding: 0;
    line-height: 1.5;
}

.partner-form {
    background-color: #ececec;
    padding: 5%;
}

.enter-leads {
    background-image: linear-gradient(90deg, #0a102c, #18366d);
    color: white;
    padding-top: 5%;
    margin-bottom: 5%;
}

.enter-leads h2, .enter-leads p, .enter-leads h3 {
    color: white !important;
}

.mobile-partner-options {
    display: none;
}
.la-webinar-header {
    background-image: url("../Images/integrations-page-background.png") !important;
}
.coldchain-header {
    background-image: url("../Images/reefer-background.png") !important;
}
.coldchain-header h2 {
    color:white !important;
}
.reefer-icon-grid {
    display: grid;
    grid-template-columns: 32% 32% 32%;
    padding-left: 10%;
    width: 90%;}
.reefer-h2 {
    font-size: xx-large !important;
}
.schedule-btn {
    padding-top: .75%;
    padding-bottom: .75%;
}
.reefer-info	.schedule-btn {
    padding-top: 1.5%;
    padding-bottom: 1.5%;
}
.reefer-info {
    padding-bottom: 10%;
}
.blue-background {
    background-color: #f5f8fc;
}
.reefer-checkbox {
    vertical-align: middle;
    margin-right: 3px;
    width:25px;
}
.la-webinar-header h2 {
    color:white !important;
}

@media only screen and (max-width: 800px) {
    .reefer-icon-grid {
        display: grid;
        grid-template-columns: 100%;}

    .reefer-h2 {
        text-align:left !important;
        padding-left:16% !important;
    }
    .dinner-thank-you {
        padding-top: 0%;
        padding-bottom: 0%;
    }

    .thank-you {
        width: 100%;
        margin-left: 0%;
    }

    .why-partner-grid {
        grid-template-columns: 100%;
        padding-bottom: 10%;
    }

    .event-grid {
        grid-template-columns: 100%;
        padding-bottom: 10%;
    }

    .how-partner-grid {
        grid-template-columns: 100%;
        padding-bottom: 10%;
    }

    .partner-three-steps {
        background-image: url(../Images/partner-three-steps-sm.jpg);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        width: 81%;
        margin-left: 9%;
        padding-bottom: 22%;
        margin-bottom: 15%;
    }

    .partner-mobile {
        display: none;
    }

    .mobile-partner-options {
        display: block;
        padding-bottom: 10%;
    }

    .mobile-partner-options h3 {
        text-align: left;
        padding-left: 10%;
        padding-right: 10%;
    }
}

.why-us {
    background-image: linear-gradient(90deg, #0a102c, #18366d);
    margin-bottom: 3%;
    margin-top: 2%
}

.yellow-tab {
    background-color: #ffcf00;
    width: 3%;
    height: 3%;
    border-style: none
}

.gray-heading {
    background-color: #ececec;
    padding-left: 1%;
    font-weight: 700
}

.why-table {
    width: 80%;
    margin-left: 10%;
    margin-right: 10%
}

.why-wording {
    padding-top: 1%;
    padding-right: 1%;
    padding-bottom: 3%;
    padding-left: 1%
}

.single-chart p {
    font-size: medium;
    text-align: left
}

.single-chart h2 {
    font-size: x-large;
    color: #ef6730;
    text-align: center
}

.media-object-default {
    padding-top: 5%;
    padding-right: 5%;
    padding-bottom: 5%;
    padding-left: 5%
}

.blog {
    margin-top: 5%;
    margin-right: 5%;
    margin-bottom: 5%;
    margin-left: 5%
}

.date {
    text-align: center;
    margin-top: -22%
}

.contact-title {
    width: 98px
}

.hear-about {
    margin-left: 2%;
    padding-bottom: 3%
}

.blue-contact {
    width: 50%;
    padding-left: 10%;
    padding-right: 10%;
    padding-top: 5%;
    vertical-align: top;
    float: right;
    height: auto;
    flex: 1
}

.blue-contact h1 {
    color: #ececec
}

.blue-contact p {
    color: #fff
}

.btn:hover {
    background-color: #b63e0e;
    border-color: #ef6730;
    color: #fcfcfc
}

.btn:active {
    border-color: #ef6730;
    background-color: #b63e0e;
    color: #fff
}

.btn.focus,.btn:focus {
    border-color: #f49974;
    border-width: thick;
    background-color: #b63e0e
}

.carousel-caption {
    width: 40%;
    margin-top: 22%;
    margin-right: 0;
    float: left;
    left: 0;
    right: 0;
    position: relative;
    top: 0;
    margin-left: 15%
}

.form-live-demo .form-group {
    padding-right: .5rem;
    padding-left: .5rem
}

.form-live-demo .form-check {
    margin-right: .5rem;
    margin-left: .5rem
}

.module-image {
    width: 50%;
    padding: 2%
}

.module-text {
    width: 95%;
    padding: 2%;
    background-color: #fff;
    border-radius: 20px;
    margin: 2%
}

.Modules {
    margin-top: 2%
}

#clothingnav1 .nav-item .nav-link {
    color: #ececec;
    font-size: small
}

#clothingnav1 .nav-item .nav-link.active {
    color: #ffb900;
    font-weight: 700;
    padding-top: 1rem;
    padding-bottom: 1rem
}

#clothingnav1 .nav-item .nav-link:hover {
    color: #ffb900;
    border-style: hidden
}

.module-content {
    width: 90%;
    margin-right: 5%;
    margin-left: 5%;
    margin-top: 5%;
    top: auto
}

.module-content p {
    padding-left: 15%;
    padding-right: 15%
}

.fixed-top.module {
    top: 81px;
    background-color: #0d0e23;
    margin-top: 0;
    z-index: 1029
}

.nav-link {
    padding-top: 1rem;
    padding-bottom: 1rem;
    border-style: hidden
}

.card-header {
    background-color: #ececec;
    color: #1e1e1e
}

.mb-0 a:active {
    color: #ffb900
}

.disappear {
    display: none
}

.footer-dark {
    padding-top: 1%;
    padding-right: 5%;
    padding-bottom: 1%;
    padding-left: 5%;
    background-color: #1e1e1e
}

.footer-top {
    padding-top: 2%;
    padding-right: 5%;
    padding-bottom: 2%;
    padding-left: 5%;
    background-color: #393939
}

.links a:hover {
    color: #fff;
    text-decoration: none;
    font-weight: 400;
    padding-left: 1%
}

.terms a {
    color: #ef6730
}

.terms a:hover {
    color: #fff;
    text-decoration: none
}

.terms-text {
    color: #616161;
    padding-top: 2%
}

.fb-page {
    padding-left: 27.5%;
    padding-right: 27.25%;
    padding-bottom: 5%
}

.btn-warning.left {
    float: left
}

.carousel-caption p {
    padding-top: 0;
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 0
}

.carousel {
    background-repeat: no-repeat;
    background-size: cover
}

.carousel-item {
    transition: Transform 1s ease-in-out,-webkit-transform 1s ease-in-out
}

.fa {
    padding: 15px;
    font-size: 30px;
    width: 60px;
    height: 60px;
    text-align: center;
    text-decoration: none;
    margin: 5px 2px;
    border-radius: 50%
}

.fa:hover {
    opacity: .7
}

.fa-facebook {
    background: #3b5998;
    color: #fff
}

.fa-linkedin {
    background: #007bb5;
    color: #fff
}

.fa-youtube {
    background: #b00;
    color: #fff
}

.fa-instagram {
    background: #125688;
    color: #fff
}

.social a:hover {
    color: #fff;
    text-decoration: none
}

.innovation {
    text-align: center;
    background-image: -webkit-linear-gradient(0deg,#9a0002 0,red 48.65%,#9a0002 100%);
    background-image: -moz-linear-gradient(0deg,#9a0002 0,red 48.65%,#9a0002 100%);
    background-image: -o-linear-gradient(0deg,#9a0002 0,red 48.65%,#9a0002 100%);
    background-image: linear-gradient(90deg,#9a0002 0,red 48.65%,#9a0002 100%);
    color: #fff!important
}

.innovation h6 {
    color: #fff;
    padding-bottom: 0;
    padding-top: 2%
}

innovation h2 {
    font-size: small
}

.innovation p {
    color: #fff
}

.contact-check {
    padding-bottom: 3%
}

.form-control.other {
    width: 100%
}

.other {
    vertical-align: middle;
    padding-bottom: 2%;
    margin-top: -2%;
    padding-left: 2%
}

.slideshow-table {
    width: 90%;
    margin-left: 5%;
    margin-right: 5%;
    table-layout: fixed
}

.slideshow-innovation {
    width: 90%;
    margin-left: 5%;
    margin-right: 5%;
    text-align: left;
    margin-bottom: 4%;
    margin-top: 2%
}

.learnmore {
    background-color: #fff;
    border: medium solid #fff;
    border-radius: 5px;
    padding-left: 3%;
    padding-right: 2%;
    color: #0d0e23;
    font-weight: 700;
    width: 30%;
    padding-top: 1%;
    padding-bottom: 1%
}

.slideshow-boxes1 {
    border: medium inset #fcfcfc;
    margin-top: 5%;
    margin-right: 5%;
    margin-bottom: 5%;
    margin-left: 5%;
    padding-top: 12%;
    padding-bottom: 12%;
    border-radius: 10px;
    background-color: hsla(237,47%,9%,.69);
    text-align: center;
    text-shadow: 2px 2px 2px #000;
    font-size: x-large;
    color: #fff;
    font-weight: bolder;
    text-decoration: none;
    word-spacing: 10px;
}

.slideshow-boxes2 {
    border: medium inset #fcfcfc;
    margin-top: 5%;
    margin-right: 5%;
    margin-bottom: 5%;
    margin-left: 5%;
    padding-top: 12%;
    padding-bottom: 12%;
    border-radius: 10px;
    background-color: hsla(237,47%,9%,.69);
    text-align: center;
    text-shadow: 2px 2px 2px #000;
    font-size: x-large;
    color: #fff;
    font-weight: bolder;
    text-decoration: none;
    word-spacing: 10px
}

.slideshow-boxes3 {
    border: medium inset #fcfcfc;
    margin-top: 5%;
    margin-right: 5%;
    margin-bottom: 5%;
    margin-left: 5%;
    padding-top: 12%;
    padding-bottom: 12%;
    border-radius: 10px;
    background-color: hsla(237,47%,9%,.69);
    text-align: center;
    text-shadow: 2px 2px 2px #000;
    font-size: x-large;
    color: #fff;
    font-weight: bolder;
    text-decoration: none;
    word-spacing: 10px;
}

.slideshow-boxes4 {
    border: medium inset #fcfcfc;
    margin-top: 5%;
    margin-right: 5%;
    margin-bottom: 5%;
    margin-left: 5%;
    padding-top: 12%;
    padding-bottom: 12%;
    border-radius: 10px;
    background-color: hsla(237,47%,9%,.69);
    text-align: center;
    text-shadow: 2px 2px 2px #000;
    font-size: x-large;
    color: #fff;
    font-weight: bolder;
    text-decoration: none;
    word-spacing: 10px
}

.slideshow-boxes5 {
    border: medium inset #fcfcfc;
    margin-top: 5%;
    margin-right: 5%;
    margin-bottom: 5%;
    margin-left: 5%;
    padding-top: 12%;
    padding-bottom: 12%;
    border-radius: 10px;
    background-color: hsla(237,47%,9%,.69);
    text-align: center;
    text-shadow: 2px 2px 2px #000;
    font-size: x-large;
    color: #fff;
    font-weight: bolder;
    text-decoration: none;
    word-spacing: 10px
}

.slideshow-boxes1 span::before {
    content: "\A";
    white-space: pre
}

.slideshow-boxes2 span::before {
    content: "\A";
    white-space: pre
}

.slideshow-boxes3 span::before {
    content: "\A";
    white-space: pre
}

.slideshow-boxes4 span::before {
    content: "\A";
    white-space: pre
}

.slideshow-boxes5 span::before {
    content: "\A";
    white-space: pre
}

.slideshow-boxes1:hover {
    background: linear-gradient(rgba(13,14,35,.4),rgba(13,14,35,.4)),url(../Images/Yard-Management-EagleView.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    margin-top: 2%;
    margin-right: 2%;
    margin-bottom: 2%;
    margin-left: 2%;
    padding-top: 15%;
    padding-bottom: 15%;
    text-decoration: none
}

.slideshow-boxes2:hover {
    background: linear-gradient(rgba(13,14,35,.4),rgba(13,14,35,.4)),url(../Images/Yard-Management-Reports-2.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    margin-top: 2%;
    margin-right: 2%;
    margin-bottom: 2%;
    margin-left: 2%;
    padding-top: 15%;
    padding-bottom: 15%;
    text-decoration: none
}

.slideshow-boxes3:hover {
    background: linear-gradient(rgba(13,14,35,.4),rgba(13,14,35,.4)),url(../Images/YMS-MFLP-2-SM.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    margin-top: 2%;
    margin-right: 2%;
    margin-bottom: 2%;
    margin-left: 2%;
    padding-top: 15%;
    padding-bottom: 15%;
    text-decoration: none
}

.slideshow-boxes4:hover {
    background: linear-gradient(rgba(13,14,35,.4),rgba(13,14,35,.4)),url(../Images/ROI.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    margin-top: 2%;
    margin-right: 2%;
    margin-bottom: 2%;
    margin-left: 2%;
    padding-top: 15%;
    padding-bottom: 15%;
    text-decoration: none
}

.slideshow-boxes5:hover {
    background: linear-gradient(rgba(13,14,35,.4),rgba(13,14,35,.4)),url(../Images/AppointmentSchedule.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    margin-top: 2%;
    margin-right: 2%;
    margin-bottom: 2%;
    margin-left: 2%;
    padding-top: 15%;
    padding-bottom: 15%;
    text-decoration: none
}

.backround {
    background-image: url(../Images/Yard-Management-Software-Texture-Innovation2019.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    padding-bottom: 2%;
    padding-top: 2%
}

.img-container {
    height: 60vh;
    position: relative;
    width: 40vw;
    left: 52%
}

.img-container img {
    left: 0;
    object-fit: cover;
    object-position: center;
    opacity: 0;
    position: absolute;
    top: 0;
    z-index: -1
}

.img-container img.next {
    opacity: 1;
    z-index: 1
}

.img-container img.prev {
    opacity: 1;
    z-index: 2
}

.img-container img.fade-out {
    opacity: 0;
    transition: visibility 0s .5s,opacity .5s linear;
    visibility: hidden
}

a:hover {
    text-decoration: none
}

.down:hover>.dropdown-menu {
    display: block
}

.contact-responsive {
    display: flex;
    background-color: #0d0e23
}

.desktop-hide {
    display: none!important
}

.sneakpeak {
    margin-left: 0;
    margin-right: 0;
    margin-top: 0
}

.blue .mb-0 .collapsed {
    color: #fff
}

.blue .mb-0 a:hover {
    color: #ffe003;
    text-decoration: none
}

.flex {
    display: flex
}

.video {
    width: 50%;
    flex: 1
}

.slideshow {
    float: left;
    width: 50%;
    padding-top: 2%
}

@media only screen and (max-width: 1200px) {
    .fixed-top.module {
        top:71px
    }
}

@media only screen and (max-width: 1300px) {
    .module-content {
        margin-top:11%
    }
}

@media only screen and (max-width: 800px) {
    .tools-images {
        width:95%;
        margin-right: 5%;
        margin-left: 5%
    }

    .tools h2 {
        padding-right: 5%;
        padding-left: 5%;
        padding-top: 0;
        text-align: center;
        float: none;
        width: 100%
    }

    .flexed {
        display: flex!important
    }

    .savings {
        padding-bottom: 14%
    }

    .flex {
        display: block
    }

    .video {
        width: 100%
    }

    .contact {
        width: 100%;
        float: none;
        flex: none
    }

    .navbar-brand {
        width: 69%;
        height: 35px
    }

    .blue-contact {
        width: 100%;
        float: none;
        flex: none
    }

    .contact-responsive {
        display: block
    }

    .flex-wrapper {
        display: block
    }

    .single-chart {
        width: 100%
    }

    .circular-chart {
        max-width: 100px;
        width: 25vw;
        padding-top: 10%
    }

    .mobile-hide {
        display: none!important
    }

    .desktop-hide {
        display: block!important
    }

    .slideshow-boxes1 span::before {
        content: "\A";
        white-space: nowrap
    }

    .slideshow-boxes2 span::before {
        content: "\A";
        white-space: nowrap
    }

    .slideshow-boxes3 span::before {
        content: "\A";
        white-space: nowrap
    }

    .slideshow-boxes4 span::before {
        content: "\A";
        white-space: nowrap
    }

    .slideshow-boxes5 span::before {
        content: "\A";
        white-space: nowrap
    }

    .slideshow-boxes1 {
        padding-top: 3%;
        padding-bottom: 3%
    }

    .slideshow-boxes2 {
        padding-top: 3%;
        padding-bottom: 3%
    }

    .slideshow-boxes3 {
        padding-top: 3%;
        padding-bottom: 3%
    }

    .slideshow-boxes4 {
        padding-top: 3%;
        padding-bottom: 3%
    }

    .slideshow-boxes5 {
        padding-top: 3%;
        padding-bottom: 3%
    }

    .slideshow {
        float: none;
        width: 100%;
        padding-top: 0
    }

    .img-container {
        left: 0;
        width: 85%;
        height: auto;
        margin-bottom: 90%
    }
}



@media only screen and (max-width: 600px) {
    .contact {
        padding-left:0;
        padding-right: 0
    }

    .navbar-brand {
        background-size: auto 90%
    }

    .savings {
        padding-bottom: 25%
    }

    .card-body p {
        font-size: 1rem;
        padding-left: 5%;
        padding-right: 5%
    }

    .card-body h1 {
        padding-left: 5%;
        padding-right: 5%
    }

    .why-wording {
        padding-bottom: 7%
    }

    .media-body p {
        width: 150%;
        margin-left: -45%;
        padding-top: 5%;
        padding-bottom: 15%
    }

    .media-body .embed-responsive {
        width: 150%;
        margin-left: -45%;
        margin-top: 22%;
        margin-bottom: 15%
    }
}

#cookie-law {
    width: 60%;
    background: #dee2e6;
    margin: 10px auto 0;
    color: black;
    font-size: x-small;
    border-radius: 17px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 17px;
    position: fixed;
    margin-left: 20%;
    bottom: 17px;
}

#cookie-law p {
    padding: 10px;
    font-size: 1.2em;
    font-weight: bold;
    text-align: center;
    color: black;
    margin: 0;
}

.close-cookie-banner {
    color: #767676;
    margin-left: 28px;
}

.covid {
    padding-right: 10%;
    padding-bottom: 5%;
    padding-left: 10%;
    margin-bottom: 5%;
}

section.container {
    margin: 5% 0%;
    text-align: center;
}

.covid-button {
    background: transparent;
    outline: none;
    position: relative;
    border: 2px solid #ffc107;
    overflow: hidden;
    width: 100%;
    font-size: 1vw;
    border-radius: 10px;
    padding: 1vw;
}

.covid-button:hover {
    border: 2px solid #ffe007;
}

/*button:before (attr data-hover)*/
.covid-button:hover:before {
    opacity: 1;
    transform: translate(0,0);
}

.covid-button:before {
    content: attr(data-hover);
    position: absolute;
    left: 0;
    width: 100%;
    letter-spacing: 1px;
    opacity: 0;
    transform: translate(-100%,0);
    transition: all .3s ease-in-out;
    margin-top: 5%;
}

/*button div (button text before hover)*/
.covid-button:hover div {
    opacity: 0;
    transform: translate(100%,0)
}

.covid-button div {
    letter-spacing: 1px;
    transition: all .3s ease-in-out;
}

.covid-button:focus {
    outline: 0;
}

.pointing-header {
    width: 100vw;
    height: 49vw;
    margin-bottom: 3vw;
}

.header-tag {
    width: 28vw;
    height: 28vw;
    margin-top: -41vw;
    background-color: rgba(21, 34, 84, 0.7);
    padding: 3.5vw;
    position: absolute;
    right: 0px;
}

.header-text {
    color: white;
    font-size: 1.6vw;
    text-align: center;
    padding-bottom: 1.2vw;
    margin-top: 1vw;
}

.live-demo-button {
    width: 100%;
}

.tab {
    overflow: hidden;
    width: 80%;
    margin-left: 10%;
    margin-top: 4%;
}

.tab button {
    float: left;
    border: 1px solid #000000;
    outline: none;
    opacity: 0.4;
    cursor: pointer;
    color: #000000;
    font-size: 1vw !important;
    padding: 1vw;
    width: 10vw;
    transition: 0.3s;
    background-color: white;
}

.tab button:hover {
    opacity: 1;
}

.tab button.active {
    opacity: 1;
    border: 1.5px solid black;
}

.tabcontent {
    display: none;
    padding: 1vw;
    width: 80%;
    margin-left: 10%;
}

.tab-images {
    width: 30%;
    padding-bottom: 9%;
}

.tabcontent-grid {
    display: grid;
    grid-template-columns: 60% 40%;
    padding: 3vw;
}

.tabcontent-image {
    width: 100%;
}

.tabcontent-text {
    padding: 4vw;
    padding-right: 0;
    place-self: center;
}

.tabcontent-text p {
    padding: 0 !important;
    margin-top: 4%;
    font-size: 1.1vw;
}

.tabcontent-text h4 {
    font-size: 1.6vw;
}

.tabcontent-text .btn-warning {
    width: 60%;
    float: none;
    margin-left: 20%;
    margin-top: 4%;
}

.tabcontent-images {
    width: 13%;
    padding-right: 1vw;
}

.solve-buttons {
    display: grid;
    grid-template-columns: 25% 25% 25% 25%;
}

.integration-group {
    display: grid;
    grid-template-columns: 30% 30% 30%;
    margin-left: 10%;
    width: 88%;
}

.integration-logo {
    width: 100%;
    padding: 12%;
    align-self: center !important;
}

.solvingproblems {
    width: 80vw;
    margin-left: 10vw;
    margin-bottom: 2%;
}

.solvingproblems h6 {
    margin-bottom: 3%;
}

.yms-connect {
    display: grid;
    grid-template-columns: 50% 50%;
}

.yms-connect-text {
    background-image: linear-gradient(90deg, #0a102c, #18366d);
    padding: 10%;
    place-self: center;
    height: 100%;
}

.yms-connect-text .live-demo-button {
    width: 50%;
    margin-left: 25%;
}

.yms-connect-text h6 {
    color: white;
    padding-bottom: 9%;
    line-height: 1.5;
    padding-top: 8%;
    font-weight: 400;
}

.yms-connect-logo {
    width: 100%;
    padding: 7% 17% 7% 17%;
}

.yms-connect-image {
    place-self: center;
}

.tools-image {
    width: 100%;
    margin-top: 2%;
    margin-bottom: 2%;
}

.newtools {
    width: 80vw;
    margin-left: 10vw;
    margin-bottom: 7%;
    margin-top: 5%;
}

.newtools .live-demo-button {
    width: 28%;
    margin-left: 36%;
    margin-top: 3%;
}

.savings-logo {
    width: 110%;
    padding: 7% 17% 7% 12%;
}

.innovation-awards {
    width: 80%;
    margin-left: 10%;
    margin-bottom: 1%;
    margin-top: -4.5%;
}

.whyus {
    margin-bottom: 7%;
}

.whychooseus {
    margin-left: 5%;
    display: grid;
    grid-template-columns: 33% 33% 33%;
    text-align: center;
    margin-bottom: 5%;
    width: 90%;
}

.whychooseus p {
    font-size: medium;
    padding-bottom: 0;
    margin-bottom: 2%;
}

.whychooseus h7 {
    line-height: 2;
}

.whychooseus-icon {
    width: 16%;
    margin-top: 4%;
    margin-bottom: 4%;
}

.whychooseus-boxes {
    margin: 5%;
    border-radius: 10px;
    overflow: hidden;
    height: 100%;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 60px 10px 0 rgba(0, 0, 0, 0.01);
}

.top-bar {
    width: 100%;
    height: 4%;
    background-color: blue;
}

h7 {
    font-size: larger;
    font-weight: 400;
    padding-bottom: 2%;
}

.software .btn-primary {
    float: none;
    background-color: #06aeef;
    border-color: #06aeef;
    width: 70%;
}

.software .top-bar {
    background-color: #06aeef;
}

.easy .top-bar {
    background-color: #ffd800;
}

.flexibility .top-bar {
    background-color: #8d60a8;
}

.visibility .top-bar {
    background-color: #f16733;
}

.experience .top-bar {
    background-color: #8cc63f;
}

.support .top-bar {
    background-color: #fcb040;
}

.experience .btn-success {
    float: none;
    background-color: #8cc63f;
    border-color: #8cc63f;
    width: 70%;
}

.support .btn-warning {
    float: none;
    background-color: #fcb040;
    border-color: #fcb040;
    width: 70%;
}

.innovation-video {
    display: grid;
    grid-template-columns: 50% 50%;
    width: 80%;
    margin-left: 10%;
    margin-bottom: 8%;
    margin-top: 2%;
    align-items: center;
}

.innovation-video-video .video {
    width: 100%;
    margin: auto;
}

.innovation-video-text .live-demo-button {
    width: 58%;
    margin-left: 21%;
    margin-top: 5%;
}

.innovation-video-text p {
    padding: 0;
    margin-bottom: 0;
    margin-top: 4%;
}

.innovation-video-text {
    padding-right: 0;
    padding-left: 13%;
    margin: auto;
}

.testimonials-block {
    width: 80%;
    margin-left: 10%;
    text-align: center;
    margin-bottom: 3%;
}

.testimonials p {
    text-align: center;
    margin-bottom: 0;
    padding: 0;
}

.testimonials-text {
    font-weight: 600;
    padding-bottom: 2% !important;
}

.competitors h5 {
    text-align: center;
    width: 80%;
    margin-left: 10%;
    padding-bottom: 2%;
}

.customers {
    width: 96vw;
}

.full {
    width: 20%;
    margin-left: 40%;
}

.live-demo-home {
    background-image: url(../Images/green-blue.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    margin-bottom: 7%;
    background-position: center;
}

.embed-responsive-item {
    padding: 0;
}

.why-us h1 {
    color: white;
}

.about h5 {
    text-align: left;
    margin-bottom: 2%;
    margin-left: 10%;
}

.about-boxes {
    display: grid;
    grid-template-columns: 50% 50%;
    width: 80%;
    margin-left: 10%;
    align-items: center;
}

.about-btn {
    margin-left: 40%;
    margin-top: 3%;
    width: 20%;
}

.about-p {
    padding-bottom: 0;
    margin-bottom: 0;
}

.about-boxes .video {
    width: 100%;
}

.btn-outline-warning {
    color: #f5b309 !important;
    border-color: #ffc107 !important;
    background-color: white !important;
}

.why-us-slider {
    width: 50%;
}

.why-us-slider:before {
    margin-top: 0 !important;
}

.benefit-boxes {
    display: grid;
    grid-template-columns: 33% 33% 33%;
    width: 86%;
    margin-left: 7%;
    align-items: center;
    padding-bottom: 5%;
    padding-top: 1%;
}

.benefit-outlines {
    display: grid;
    border: solid;
    border-width: 1.5pt;
    border-color: #f0b228;
    grid-template-columns: 20% 80%;
    width: 80%;
    margin-left: 10%;
    align-items: center;
}

.benefit-icon {
    width: 80%;
    margin: 12%;
}

.benefit-outlines p {
    padding-bottom: 0% !important;
    margin-bottom: 0% !important;
}

.benefit-expanded {
    text-align: center !important;
    align-items: baseline;
}

.benefit-expanded .benefit-icon {
    width: 20% !important;
    margin: 6%;
}

.benefit-expanded h5 {
    padding-bottom: 3%;
}

.benefit-expanded p {
    text-align: center;
}

.happy {
    display: grid;
    grid-template-columns: 50% 50%;
    width: 100%;
    align-items: center;
    padding-bottom: 2%;
}

.happy-warehouse {
    width: 100%;
}

.happy-text {
    padding: 10%;
    line-height: 2.5;
}

.happy-text h2 {
    padding-bottom: 2%;
}

.mySlides h2 {
    font-size: 4vw;
    text-align: center;
    color: white;
    padding-bottom: 5%;
}

.mySlides1 h2 {
    text-align: center;
}

.mySlides1 h3 {
    text-align: center;
    padding: 5%;
    padding-top: 2%;
}

.iceberg h2 {
    color: white;
    text-align: center;
    padding: 5vw;
    padding-bottom: 2vw;
    font-weight: 400;
    font-size: 2.2vw;
}

.iceberg {
    background-image: url("../Images/iceberg.png");
    background-size: cover;
    background-repeat: no-repeat;
    width: 100vw;
    height: 70vw;
    margin-top: 2vw;
}

.iceberg p {
    color: white;
    font-size: 1vw;
    padding-left: 10vw;
    padding-right: 10vw;
    padding-bottom: 2vw;
}

.savings-image {
    width: 80vw;
    margin-left: 10vw;
}

.iceberg-right {
    margin-left: 57vw;
    margin-top: 6vw;
    width: 40vw;
    text-align: left;
    color: white;
}

.iceberg-right h3 {
    font-size: 2.2vw;
    line-height: 2vw;
}

.iceberg-right p {
    font-size: 1.5vw;
    padding: 0;
    line-height: 2vw;
}

.tools-images {
    color: #0d0e23;
    width: 100%;
    padding-left: 10%;
    padding-right: 10%;
    padding-bottom: 2%;
    margin-top: 0;
}

.team {
    width: 100%;
}

.nextsteps {
    display: grid;
    grid-template-columns: 33% 33% 33%;
    width: 80%;
    margin-left: 10%;
    align-items: center;
    padding-bottom: 6%;
}

.nextsteps-boxes {
    background-color: white;
    border-radius: 15pt;
    width: 80%;
    height: 100%;
    margin-left: 10%;
    padding-bottom: 4%;
}

.nextsteps-boxes h5 {
    text-align: center;
    margin-bottom: 4%;
}

.nextsteps-boxes p {
    text-align: center;
}

.number {
    color: #f0b228;
    align-self: center;
    margin-top: -13% !important;
    margin: auto;
    margin-bottom: 7% !important;
    background-color: white;
    font-size: 3vw;
    height: 5vw;
    width: 5vw;
    text-align: center;
    border-width: 2pt !important;
    border: solid;
    border-radius: 32pt;
    border-color: #f0b228;
    font-weight: 600;
}

.schedule-btn {
    float: none;
    width: 20vw;
    margin-left: 40vw;
    border-radius: 8pt;
    margin-bottom: 5%;
}

.bottom-demo {
    display: grid;
    grid-template-columns: 50% 50%;
    width: 80%;
    margin-left: 10%;
    align-items: center;
    padding-bottom: 6%;
}

.happy-office {
    width: 100%;
}

.marquee {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 8vw;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
}

.marquee--inner {
    display: block;
    width: 200%;
    position: absolute;
    animation: marquee 30s linear infinite;
}

.marquee span {
    float: left;
    width: 50%;
    overflow: hidden;
}

@keyframes marquee {
    0% {
        left: 0;
    }

    100% {
        left: -100%;
    }
}

@media (min-width: 1200px) {
    .why-us-slider-box .container {
        max-width: none !important;
    }
}

@media only screen and (max-width: 800px) {
    .header-tag {
        width: 100vw;
        height: 60vw;
        margin-top: -3vw;
        padding-bottom: 28vw;
        background-image: linear-gradient(90deg, #0a102c, #18366d);
        padding: 3.5vw;
        position: inherit;
        right: 0px;
    }

    .live-demo-button {
        width: 60%;
        margin-left: 20%;
        margin-top: 2%;
    }

    .header-text {
        font-size: 4.6vw;
        padding-bottom: 1.2vw;
        margin-top: 1vw;
    }

    .mySlides h2 {
        font-size: 11vw;
        padding-bottom: 2%;
    }

    .benefit-boxes {
        display: block;
        padding-top: 5%;
    }

    .benefit-outlines {
        margin-bottom: 7%;
    }

    .happy {
        display: block;
    }

    .schedule-btn {
        width: 60vw;
        margin-left: 20vw;
        margin-bottom: 12%;
    }

    .innovation-video {
        display: block;
    }

    .innovation-video-text {
        padding-top: 10%;
        padding-left: 0;
    }

    .marquee {
        display: none;
    }

    .tool {
        width: 18%;
    }

    .module-info {
        display: none;
    }

    .tools-images {
        padding-bottom: 10%;
        margin-top: 5%;
        margin-left: 0;
    }

    .nextsteps {
        display: block;
        margin-top: -10%;
        padding-bottom: 15%;
        margin-bottom: 15%;
    }

    .nextsteps-boxes {
        margin-top: 21%;
        padding-top: 3%;
    }

    .number {
        margin-top: -13% !important;
        font-size: 5.8vw;
        height: 10vw;
        width: 10vw;
    }

    .bottom-demo {
        display: block;
    }

    .live-demo-home {
        padding-top: 4%;
    }

    .happy-text h2 {
        padding-bottom: 5%;
        text-align: center;
    }

    .happy-text {
        padding-bottom: 5%;
    }

    h1 {
        padding-top: 7%;
        padding-bottom: 5%;
    }

    .iceberg h2 {
        padding-top: 4vw;
        font-size: 5.5vw;
    }

    .savings-image {
        display: none;
    }

    .iceberg p {
        display: none;
    }

    .iceberg-right p {
        display: block;
        font-size: 2.5vw;
        margin-top: 3vw;
        line-height: 1.3;
    }

    .iceberg h3 {
        font-size: 4.3vw;
    }

    .iceberg-right {
        margin-top: 3vw;
    }

    .iceberg .schedule-btn {
        display: none;
    }

    .iceberg {
        margin-bottom: 3%;
    }
}
#u105785 {
    z-index: -100000;
}
.slideshow-container-testimonial {
    margin: auto;
    width: 80%;
    position: relative;
    background: #f5f5f5;
    padding-top: 3%;
    padding-bottom: 1%;
    margin-bottom: 1%;
}

.mySlides-testimonial {
    display: none;
    padding: 15%;
    padding-bottom: 0;
    text-align: center;
    padding-top: 0;
}

.next,
.prev {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    margin-top: -30px;
    padding: 16px;
    color: #888;
    font-weight: 700;
    font-size: 20px;
    border-radius: 0 3px 3px 0;
    user-select: none;
}

.next {
    position: absolute;
    right: 0;
    border-radius: 3px 0 0 3px;
}

.next:hover,
.prev:hover {
    color: #000;
    background-color: #fff;
}

.dot-container {
    text-align: center;
    padding: 5%;
    padding-top: 0;
}

.dot-testimonial {
    cursor: pointer;
    height: 1vw;
    width: 1vw;
    margin: 0 2px;
    background-color: #e6e6e6;
    border-radius: 50%;
    display: inline-block;
    transition: background-color .6s ease;
}

.active,
.dot:hover {
    background-color: #f0b228;
}

q {
    font-style: italic;
    font-size: x-large;
    font-weight: 500;
}

.author {
    text-align: center;
    padding-top: 3%;
    color: #f0b228 !important;
}
.mySlides {
    display: none;
}

.nda ol {
    counter-reset: item;
}

.nda li {
    display: block;
}

.nda ol > li {
    counter-increment: item;
}

.nda ol > li::before {
    content: counters(item, ".") " ";
    font-weight: bold;

}
.nda ol > li > ol > li {
    padding-left:2%;
}
.nda li {
    text-align: left;
    font-size: large;
    padding-left: 10%;
    padding-right: 6%;
    padding-bottom: 2%;
    color: #616161;
}
.nda ol {padding:0;}
.nda {margin-top:5%}

.contract h2 {
    padding-left: 10%;
    padding-right: 23%;
    text-align: left;
    font-size: x-large;
    padding-bottom: 2%;
    color: #616161;
    font-weight: 600;

}
.podcast li {
    padding-bottom: 10%;
}

@media only screen and (max-width: 800px) {
    .whychooseus {
        margin-left: 5% !important;
        display: block !important;
    }

    .about-btn {
        margin-left: 25% !important;
        margin-top: 6% !important;
        width: 50% !important;
        margin-bottom: 7% !important;
    }
}

.features p {
    padding-left: 15%;
    padding-right: 15%;
}

.features {
    padding-top: 5%;;
}
.features h2 {
    text-align: center;
    padding-bottom: 2%;
    padding-left: 15%;
    padding-right: 15%;
}

.calculator {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    padding: 5%;
    margin-bottom: 2vw;
    width: 100%;
    padding-top: 2vw;
    text-align:left;
}

.savings-chart {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    padding: 20px;
    text-align: center;
    max-width: 400px;
    width: 100%;
}

.form-button {
    width: 97%;
}



.calculator   label {
    display: block;
    margin-bottom: 10px;
    font-weight: bold;
}

.calculator  input {
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
    margin-bottom: 20px;
}

.calculator   button {
    background-color: #4caf50;
    color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}


.calculator   button:hover {
    background-color: #45a049;
}

.result {
    font-size: 18px;
    margin-top: 20px;
    color: #333;
    text-align: left;
    margin: 1vw;
    margin-top: 2vw;
}


.benefits-header {
    background-image: linear-gradient(90deg, #0a102c, #18366d);
    padding-bottom: 2%;
}
.benefits-live-demo {
    background-image: linear-gradient(90deg, #0a102c, #18366d);
}
.benefits-header h1 {
    color: white !important;
    line-height: 1.5;
}
.benefits-header h2 {
    font-size: 1rem;
    color: white !important;
    text-align: center;
    padding-bottom: 2%;
    padding-left: 15%;
    padding-right: 15%
}
.benefits-image {
    margin-left: 15%;
    width: 70%;
    margin-top: -13%;
    margin-bottom: 3%;}

.benefit-cards{
    grid-template-columns: 50% 50% !important;
    width: 84%;
    margin-left: 8%;
}

.feature-blocks {
    display: grid;
    grid-template-columns: 50% 50%;
    padding-left: 5%;
    padding-right: 5%;
    padding-top: 2%;
    padding-bottom: 5%;
    align-items: center;
}
.feature-blocks h3 {
    text-align: left;
    padding-left: 10%;
    font-size: larger;
    padding-right: 10%;
    font-weight:550;
    padding-top:7%;
}
.feature-image {
    margin-left: 10%;
    margin-right: 10%;
    width: 80%;
    margin-top: 3%;
    margin-bottom: 5%;
    filter: drop-shadow(2px 2px 3px rgba(0,0,0,0.1));
}
.calculators{
    width: 70%;
    margin-left: 15%;
}
.features-testimonial {
    width: 70%;
    margin-left: 15%;
    padding: 2.5%;
    background-image: linear-gradient(90deg, #0a102c, #18366d);
    border-radius: 12pt;
    color: white;
}
.features-testimonial p {
    color: white;
}
.calculator h2 {
    padding-bottom:2%;
    padding-top: 1%;
}
.calculator-field {
    padding-bottom: 1%;
}
.calc-button {
    margin-left: 0;
    margin-bottom:0;
}
.calc-link {
    text-align: right;
    font-size: large;
    padding-left: 0;
    font-weight: 550;
    padding-right: 2%;
    padding-bottom: 0;
    color: #ffa02e;
}
.calc-link a:hover {
    color: 	#cf6117;
}


.testimonial-button {
    margin-left: 0;
    margin-top:5%;
    margin-bottom:0;
}
.feature-block-text h2 {
    padding-left: 10%;
    padding-bottom: 3%;
}


.calculator input:focus,
.calculator button:focus {
    outline: none;
    box-shadow: none;
}
@media only screen and (orientation: portrait) {
    .feature-blocks {
        grid-template-columns: 100% !important;
        grid-template-areas:
        'image'
        'type';
    }
    .feature-block-text {
        grid-area: type;
        padding-bottom: 10% !important;
    }

    .feature-image {
        grid-area: image;
        padding-bottom: 10% !important;
    }
    .features-testimonial {
        padding: 5.5%;
    }
    .benefits-live-demo {
        background-image: linear-gradient(90deg, #ffffff00, #ffffff00);
    }
    .benefits-image {
        width:100%;
        margin-left:0;
    }
}

@media (min-width: 992px) {
    .lift-animation {
        opacity: 0;
        transform: translateY(100px);
        transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    }

    .lift-animation.animate {
        opacity: 1;
        transform: translateY(0);
    }
}
.benefits {
    padding-top: 70px;
    background-color: #eaf5fc;
}
.multi-event-grid {
    display: grid;
    grid-template-columns: 14% 18% 40% 22%;
    border-width: thin;
    margin-left: 10%;
    margin-bottom: 2%;
    width: 80%;
    grid-gap: 2%;
    border-color: #e5e5e5;
    border-style: solid;
    background-color: white;
    border-radius: 15pt;
    padding-top: 2%;
    padding-bottom: 2%;
    padding-left: 3%;
    padding-right: 3%;
    align-items: center;
    box-shadow: 0 0px 5px 1px #cfcfcfd6;
}
.multi-event-grid p {
    padding: 0 !important;
    margin:0 !important;
}
.multi-event-grid .schedule-btn {
    margin: 0 !important;
    width:100%;
}
.event-date {
    position: relative;
    color: #43b8d1;
}
.event-date p {
    position: relative;
    color: #f3a928 !important;
    font-weight: 700;
    font-size: x-large;
    line-height: 1;

}
.event-date-number {
    font-size: xx-large;
}
.event-info {
    position: relative;
}
.event-list-button {
    position: relative;
}
.event-list h2 {
    padding-bottom:0;
}
.event-list {
    padding-bottom: 5%;
}
.rsvp {
    text-align:center !important; padding-top:0 !important;
}
@media only screen and (max-width:900px){
    .multi-event-grid {
        grid-template-columns: 100%;
        padding: 6%;
        padding-bottom: 10%;
        margin-bottom: 8%;
    }
    .event-date {
        padding-bottom: 4%;
    }
    .event-info {
        padding-bottom: 4%;
    }
    .event-list h2 {
        text-align: left;
        padding-left: 10%;
    }
    .rsvp {
        text-align: left !important;
        padding-bottom: 5%;
    }
}




.savings-body {
    scroll-behavior: smooth;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Arial', sans-serif;
    color: white;
    min-height: 100vh;
    padding-top: 70px;
}

/* == HERO SECTION == */
.hero-section {
    text-align: center;
    padding: 60px 20px 40px;
    background: #1A1B3A;
}

.hero-title {
    font-size: 2.5em;
    font-weight: bold;
    margin-bottom: 40px;
    color: white;
}

/* == CHARTS GRID == */
.charts-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    max-width: 1000px;
    margin: 0 auto 40px;
    padding: 0 20px;
}

.chart-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.roi-circular-chart {
    width: 120px;
    height: 120px;
    margin-bottom: 10px;
    background: white;
    border-radius: 50%;
    padding: 10px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.roi-circle-bg {
    fill: none;
    stroke: rgba(200,200,200,0.3);
    stroke-width: 3;
}

.roi-circle {
    fill: none;
    stroke-width: 3;
    stroke-linecap: round;
    transform-origin: 50% 50%;
    transform: rotate(-90deg);
    animation-duration: 2.5s;
    animation-timing-function: cubic-bezier(0.4,0,0.2,1);
    animation-fill-mode: forwards;
    animation-delay: var(--delay, 0s);
}

.roi-percentage {
    fill: #333;
    font-size: 0.5em;
    font-weight: bold;
    text-anchor: middle;
    dominant-baseline: central;
}

.roi-chart-label {
    color: white;
    font-size: 0.9em;
    font-weight: 500;
    line-height: 1.2;
    max-width: 120px;
}

/* Chart color schemes */
.orange    .circle { stroke: #ff9500;     animation-name: progress-97;        --delay: 0s; }
.green     .circle { stroke: #4ade80;     animation-name: progress-75;        --delay: 0s; }
.gray      .circle { stroke: #94a3b8;     animation-name: progress-30;        --delay: 0s; }
.cyan      .circle { stroke: #06b6d4;     animation-name: progress-75-cyan;   --delay: 0s; }
.red       .circle { stroke: #ef4444;     animation-name: progress-95;        --delay: 0s; }
.light-gray .circle { stroke: #cbd5e1;    animation-name: progress-50;        --delay: 0s; }
.orange-alt .circle { stroke: #f97316;    animation-name: progress-75-orange; --delay: 0s; }
.purple    .circle { stroke: #a855f7;     animation-name: progress-99-purple; --delay: 0s; }

/* Chart animations */
@keyframes progress-97        {0%{stroke-dasharray:0 100;opacity:.7}70%{stroke-dasharray:105 100;opacity:1}85%{stroke-dasharray:95 100}100%{stroke-dasharray:97 100}}
@keyframes progress-75        {0%{stroke-dasharray:0 100;opacity:.7}70%{stroke-dasharray:80 100;opacity:1}85%{stroke-dasharray:70 100}100%{stroke-dasharray:75 100}}
@keyframes progress-30        {0%{stroke-dasharray:0 100;opacity:.7}70%{stroke-dasharray:35 100;opacity:1}85%{stroke-dasharray:25 100}100%{stroke-dasharray:30 100}}
@keyframes progress-75-cyan   {0%{stroke-dasharray:0 100;opacity:.7}70%{stroke-dasharray:80 100;opacity:1}85%{stroke-dasharray:70 100}100%{stroke-dasharray:75 100}}
@keyframes progress-95        {0%{stroke-dasharray:0 100;opacity:.7}70%{stroke-dasharray:100 100;opacity:1}85%{stroke-dasharray:90 100}100%{stroke-dasharray:95 100}}
@keyframes progress-50        {0%{stroke-dasharray:0 100;opacity:.7}70%{stroke-dasharray:55 100;opacity:1}85%{stroke-dasharray:45 100}100%{stroke-dasharray:50 100}}
@keyframes progress-75-orange {0%{stroke-dasharray:0 100;opacity:.7}70%{stroke-dasharray:80 100;opacity:1}85%{stroke-dasharray:70 100}100%{stroke-dasharray:75 100}}
@keyframes progress-99-purple {0%{stroke-dasharray:0 100;opacity:.7}70%{stroke-dasharray:100 100;opacity:1}85%{stroke-dasharray:95 100}100%{stroke-dasharray:99 100}}

.calculate-btn {
    background: #22c55e;
    color: white;
    border: none;
    padding: 15px 30px;
    border-radius: 8px;
    font-size: 1.1em;
    font-weight: bold;
    cursor: pointer;
    margin: 20px 0 60px;
    transition: background .3s;
    text-decoration: none;
    display: inline-block;
}

.calculate-btn:hover {
    background: #16a34a;
    color: white !important;
}

/* == VIDEO SECTION == */
.video-section {
    background: #1A1B3A;
    padding: 40px 20px;
    text-align: center;
    clip-path: ellipse(100% 100% at 50% 0);
    padding-bottom: 30%;
}

.video-container {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 40px;
    flex-wrap: wrap;
    justify-content: center;
}

.video-placeholder {
    width: 400px;
    height: 250px;
    background: #1a2332;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.video-text {
    flex: 1;
    text-align: left;
    min-width: 300px;
}

.video-text h3 {
    font-size: 1.5em;
    margin-bottom: 15px;
    color: white;
}

.video-text p {
    margin-bottom: 20px;
    line-height: 1.5;
    color: white;
    padding-left: 0px;
}

.watch-btn {
    background: #f97316;
    color: white;
    border: none;
    padding: 12px 25px;
    border-radius: 6px;
    font-weight: bold;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
}
.watch-btn:hover {
    background: #b15013;
    color: white !important;
}

/* == CALCULATOR WRAPPER == */
.calculator-wrapper {
    padding: 0px 20px;
    color: #333;
    margin-top:-25%;
    position:relative;
}
.calculator-title{
    padding-top:10%;
}
.calculator-container {
    max-width: 900px;
    margin: 0 auto;
    background: white;
    border-radius: 20px;
    box-shadow: 0 5px 30px rgba(0,0,0,0.15);
    overflow: hidden;
    margin-bottom: 100px;
}

.calculator-header {
    padding: 30px;
    text-align: center;
}

.calculator-header h2 {
    font-size: 24px;
    font-weight: 600;
    line-height: 1.4;
}

/* == CALCULATOR BODY == */
.calculator-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.left-column, .right-column {
    padding: 30px;
}

.left-column {
    background: white;
    border-right: none; /* Removed the right border */
}
.right-column h3 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 20px;
    text-align: center;
    margin-top: 20px;
}

.left-column h3 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 20px;
    text-align: left;
    margin-top: 20px;
}


/* == INPUT STYLES == */
.input-group {
    display: flex;
    flex-direction: column;
    align-items: flex-end; /* ensures right alignment */
    margin-bottom: 1.2rem;
    background: transparent !important;
}

.input-group label {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: transparent !important;
}

.unit-text {
    font-size: 12px;
    color: #777;
    align-self: flex-end;
    text-align: right;
    margin-right:0px;
    margin-top: -5px;
    width: 100px;
}

.label-text {
    flex: 1;
    font-size: 12px;
    color: #555;
    background: transparent !important;
}

.input-group input {
    width: 97px;
    padding: 5px 8px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-size: 12px;
    text-align: right;
    background: white !important;
    color: #999;
    -moz-appearance: textfield;
}

/* Hide spinner arrows in Chrome, Safari, Edge */
.input-group input::-webkit-outer-spin-button,
.input-group input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.input-group input:focus,
.input-group input.user-edited {
    color: #333;
    background: white !important;
}

.dollar-input {
    position: relative;
    display: flex;
    align-items: center;
    width: 97px;
    background: transparent !important;
}

.dollar-input::before {
    content: '$';
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    color: #888;
    font-size: 12px;
    pointer-events: none;
}

.dollar-input input {
    padding-left: 18px;
    width: 100%;
}

.section-title {
    font-size: 15px;
    font-weight: 600;
    color: #666;
    margin: 20px 0 20px;
    line-height: 1.3;
    text-align: left;
}

/* == TOGGLE SWITCH == */
.toggle-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 15px;
}

.toggle-option {
    font-size: 13px;
    color: #666;
}

.toggle-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #cbd5e0;
    transition: 0.3s;
    border-radius: 24px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: 0.3s;
    border-radius: 50%;
}

input:checked + .slider {
    background-color: #3b82f6;
}

input:checked + .slider:before {
    transform: translateX(20px);
}

/* == SAVINGS DISPLAY == */
.savings-display {
    text-align: center;
    margin-bottom: 20px;
}

.savings-label {
    font-size: 16px;
    color: #2563eb;
    margin: 8px 0 5px;
    text-align: center;
}

.savings-amount {
    font-size: 42px;
    font-weight: 700;
    color: #2563eb;
    margin: 5px 0;
    line-height: 1;
    text-align: center;
}

.savings-hours {
    font-size: 16px;
    color: #2563eb;
    margin: 5px 0 15px;
    text-align: center;
}

.savings-bar {
    height: 8px;
    background: #22d3ee;
    border-radius: 4px;
    margin: 0 auto 15px;
    max-width: 200px;
}
.savings-description{
    text-align: center;
    font-size: 10px;
    font-family: sans-serif;
    margin: 0 34px 5px;

}
/* == BREAKDOWN LIST == */
.breakdown-list {
    border: none; /* Removed border */
    border-radius: 8px;
    padding: 15px;
    max-height: none;
    overflow-y: visible;
}

.breakdown-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: none; /* Removed bottom border */
    font-size: 12px;
}

.breakdown-item:last-child {
    border-bottom: none;
}

.breakdown-item span:first-child {
    color: #555;
}

.breakdown-item .value {
    font-weight: 600;
    color: #333;
}

.view-breakdown-btn {
    background: #22c55e;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    margin: 15px auto 0;
    transition: background 0.3s;
    display: block;
}

.view-breakdown-btn:hover {
    background: #16a34a;
}

/* == SAVINGS BREAKDOWN SECTION == */
.savings-breakdown-section {
    background: white;
    padding: 30px;
    margin-top: 0;
    border-radius: 0 0 20px 20px;
    border-top: none; /* Removed top border */
}

.savings-breakdown-section .section-title {
    font-size: 20px;
    font-weight: 700;
    color: #333;
    margin-bottom: 12px;
}

.breakdown-entry {
    padding: 6px 0;
    font-size: 13px;
    color: #333;
    border-bottom: none; /* Removed bottom border */
}

.breakdown-entry:last-child {
    border-bottom: none;
}



/* == RESPONSIVE DESIGN == */
@media (max-width: 768px) {
    .charts-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 equal columns */
        gap: 20px;
        justify-items: center; /* prevent stretching */
    }

    .chart-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .roi-circular-chart {
        aspect-ratio: 1 / 1;
        width: 110px; /* slightly smaller for mid-screens */
        height: auto;
        flex-shrink: 0;
    }

    .calculator-body {
        grid-template-columns: 1fr;
    }

    .left-column {
        border-right: none;
        border-bottom: none; /* Removed bottom border */
    }

    .hero-title {
        font-size: 2em;
    }

    .video-text {
        text-align: center;
    }

    .savings-amount {
        font-size: 36px;
    }

    .savings-breakdown-section .section-title {
        font-size: 18px;
    }
    .video-container {
        max-width: 500px;
    }
    .calculator-container {
        max-width: 500px;
    }
    .calculator-title {
        margin: 4%;
    }
}

@media (max-width: 480px) {

    .hero-title {
        font-size: 1.5em;
    }

    .roi-circular-chart {
        width: 100px;
        height: 100px;
    }
}






.content-wrapper {
    max-width: 1200px;
    width: 100%;
    padding: 0 5rem;
    margin: auto;
}

.grid-layout {
    display: flex;
    gap: 16px;
    position: relative;
    align-items: flex-start;
}

.grid-column {
    display: flex;
    flex-direction: column;
    gap: 16px;
    flex: 1;
    min-width: 0;
    position: relative;
}

.grid-item {
    background: white;
    border-radius: 12px;
    box-shadow: 0 3px 6px rgba(0,0,0,0.1);
    width: 100%;
    cursor: default;
    position: relative;
    overflow: visible;
    aspect-ratio: 1 / 1;
    display: flex;
    flex-direction: column;
    transition: height 0.35s ease;
}

.content-container {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    overflow: visible;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0.5rem;
}

.content-container img {
    width: 50%;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    align-self: flex-start;
    margin: 0;
}

.content-container h3 {
    margin: 0;
    flex-shrink: 0;
    text-align: left;
    font-size: 1.5rem;
}

.content-container p {
    margin: 0;
    padding: 0;
    color: #555;
    flex-shrink: 0;
    text-align: left;
    align-self: flex-start;
    font-size: 1.25rem;
}

/* UPDATED: use measured height for smoother animation */
.checklist {
    margin-top: 1rem;
    height: 0;
    overflow: hidden;
    transition: height 0.5s ease, opacity 0.5s ease;
    opacity: 0;
    flex-shrink: 0;
}

.checklist.expanded {
    /* height is controlled by JS; class toggles opacity */
    opacity: 1;
}

.checklist-item {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
    color: #333;
    font-size: 0.9rem;
}

.checklist-item img {
    width: 20px;
    height: 20px;
    margin-right: 12px;
    flex-shrink: 0;
}

.toggle-button {
    background: none;
    border: none;
    cursor: pointer;
    position: absolute;
    bottom: -16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
    width: 32px;
    height: 32px;
    padding: 0;
}

.toggle-button img {
    width: 32px;
    height: 32px;
    display: block;
    user-select: none;
    pointer-events: none;
}

.expert-box {
    background: #FAB040;
    border-radius: 12px;
    box-shadow: 0 3px 6px rgba(0,0,0,0.1);
    position: absolute;
    box-sizing: border-box;
    padding: 2rem 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 1rem;
    z-index: 5;
    overflow: visible;
    aspect-ratio: 2 / 1;
    height: auto;
    width: auto;
    min-width: 0;
    /* UPDATED: match duration to checklist for synced feel */
    transition: top 0s ease, left 0.3s ease, opacity 0.3s ease;
    opacity: 1;
}

.expert-box p {
    margin: 0;
    font-size: 1rem;
    text-align: center;
}

.expert-box h2 {
    color: white;
}

.expert-box btn {
    padding: 0.5rem 2.5rem;
}

@media (max-width: 600px) {
    .grid-layout {
        flex-direction: column;
    }

    .grid-column {
        width: 100% !important;
        flex-direction: column;
        gap: 16px;
    }

    .grid-item {
        aspect-ratio: auto !important;
        height: auto !important;
        overflow: visible !important;
        margin-bottom: 5%;
    }

    .expert-box {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        margin-top: 16px;
        top: auto !important;
        left: auto !important;
        transform: none !important;
        padding: 1rem;
        aspect-ratio: auto !important;
        width: calc(66.66% - 10.66px);
        left: calc(33.33% + 16px);
        top: 100%;
        transition: none !important;
        opacity: 1 !important;
    }

    .toggle-button {
        bottom: 8px !important;
    }
}

.grid-item.spacer {
    visibility: hidden;
    pointer-events: none;
    height: 200px;
}
.grid-bottom-spacer {
    height: 100px;
    width: 100%;
    background: transparent;
}
.toggle-button:focus {
    outline: none;
    box-shadow: none;
}

.curved-section {
    position: relative;
    clip-path: ellipse(100% 100% at 50% 0);
    z-index: 0;
}

.top-image {
    position: absolute;
    top: -80px;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    z-index: 1;
}

.integration-wrapper h1 {
    color: white !important;
}

.integration-wrapper * {
    box-sizing: border-box;
}

.integration-wrapper {
    font-family: Arial, sans-serif;
    color: white;
    margin-top: 4rem;
    background-image: url('https://yardmanagementsoftware.com/Images/integrations-page-background.png');
    background-size: cover;
    background-position: center;
    width: 100%;
}

.integration-wrapper .integration-section {

    padding: 4rem 2rem;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    color: white;
}

.integration-wrapper .left {
    flex: 1 1 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.integration-wrapper .left h1 {
    font-size: 2.5rem;
    text-align: left;
    margin: 0;
}

.integration-wrapper .right {
    flex: 1 1 300px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    padding: 1rem;
    max-width: 600px;
    width: 100%;
    margin: 0 auto;
    padding-right: 3rem;
}

.integration-wrapper .box {
    background-image: linear-gradient(90deg, #0A102C, #18366D);
    backdrop-filter: blur(4px);
    border-radius: 12px;
    position: relative;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease-in-out;
    cursor: pointer;
    min-width: 0;
    border-width: 1.5pt !important;
    border-color: #2B49A5 !important;
    border: solid;
}

.integration-wrapper .box-content,
.integration-wrapper .box-hover {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1rem;
    transition: opacity 0.3s ease;
}

/* default desktop hover swap */
.integration-wrapper .box-content { opacity: 1; pointer-events: auto; z-index: 2; }
.integration-wrapper .box-hover   { opacity: 0; pointer-events: none; z-index: 1; }

@media (hover: hover) and (min-width: 601px) {
    .integration-wrapper .box:hover .box-content { opacity: 0; pointer-events: none; z-index: 1; }
    .integration-wrapper .box:hover .box-hover   { opacity: 1; pointer-events: auto; z-index: 3; }
}

@media (max-width: 600px) {
    .integration-wrapper .integration-section {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .integration-wrapper .left { margin-bottom: 2rem; }
    .integration-wrapper .right { grid-template-columns: 1fr; max-width: 100%; }

    .integration-wrapper .box:hover .box-content,
    .integration-wrapper .box:hover .box-hover {
        opacity: 1 !important;
        pointer-events: auto !important;
        z-index: 2 !important;
    }
    .integration-wrapper .box:hover { pointer-events: none !important; }

    .integration-wrapper .box-content {
        opacity: 1 !important;
        display: flex;
        pointer-events: auto;
        z-index: 2;
        transition: none;
    }

    .integration-wrapper .box-hover {
        opacity: 1 !important;
        display: none;
        pointer-events: none;
        z-index: 1;
        transition: none;
    }

    .integration-wrapper .box.mobile-active .box-content {
        display: none !important;
        pointer-events: none !important;
        z-index: 1 !important;
        opacity: 0 !important;
    }
    .integration-wrapper .box.mobile-active .box-hover {
        display: flex !important;
        pointer-events: auto !important;
        z-index: 3 !important;
        opacity: 1 !important;
    }
}

.box-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 80px;
    margin-bottom: 0.5rem;
}
.box-icon img { width: 60px; height: 60px; object-fit: contain; }

.integration-wrapper .box-title { font-weight: bold; font-size: 1.1rem; }
.integration-wrapper .hover-title { font-weight: bold; font-size: 1.2rem; margin-bottom: 0.5rem; }
.integration-wrapper .hover-description { font-size: 0.95rem; }