.sec > .row:last-child {
    /*flex-grow: 1;*/
}

#sec-1 {
    background-color: #211D33;
    color: #faf8f3;
}

#sec-2 {
    min-height: unset;
    background-color: #FAF8F3;
    color: #211D33;
	border-radius: 20px;
	overflow:hidden;
	padding-top:0px !important;
	padding-bottom:0px !important;
}

#sec-3 {
    background-color: #211D33;
    color: #faf8f3;
}

#sec-4 {
    background-color: #B6DBBC;
    color: #211d33;
	border-radius: 20px;
	padding-top: 0px;
	padding-bottom: 0px;
}

#sec-5 {
    padding-top: 0;
    padding-bottom: 0;

}

#sec-5-1 {
    background-color: #FFE4B0;
    color: #211d33;
	border-radius: 20px;
	padding: 60px
}

#sec-5-2 {
    background-color: #49416D;
    color: #faf8f3;
}


#sec-1 > div {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

#sec-1 img {
    width: 100%;
    /*max-width: 500px;*/
}

#sec-1 .body {
    margin-top: 200px;
    justify-content: start !important;
}

#sec-1 .body-1 {
    padding: 0 40px;
}

#sec-1 .body-2 {
    padding: 0 25px;
}

#sec-1 h2, #sec-1 p, #sec-4 h2, #sec-4 p {
    text-align: start;
}

#sec-2 .grid {
    width: 570px;
    max-width: 570px;
    max-height: 100vh;
    overflow-x: hidden;
    overflow-y: hidden;
    margin: 0 0 0 auto;
}

#sec-2 .grid:after {
    content: '';
    display: block;
    clear: both;
}

#sec-2 .grid-item {
    width: 210px;
    height: 420px;
    float: left;
    margin-bottom: 15px;
}

#sec-2 .grid-item.small {
    height: 50px;
}

#sec-2 .grid-item.medium {
    height: 300px;
}

#sec-2 > div {
    flex-shrink: 1;
}

#sec-2 .m-grid {
    width: 330px;
    max-width: 330px;
    max-height: 50vh;
    overflow-y: hidden;
    margin: 0 auto;
}

#sec-2 .m-grid:after {
    content: '';
    display: block;
    clear: both;
}

#sec-2 .m-grid-item {
    width: 75px;
    height: 138px;
    float: left;
    margin-bottom: 15px;
}

#sec-2 .m-grid-item.small {
    height: 25px;
}

#sec-2 .m-grid-item.medium {
    height: 100px;
}

#sec-2 .m-grid-item img {
    height: auto;
    width: 100%;
}

#sec-3 > div {
    /*background: url("../img/img_background_dots.png");*/
    background-size: cover;
    background-blend-mode: multiply;
}

#sec-3 .col-content {
    margin-top: 100px;
    justify-content: center !important;
}

#sec-3 .col-content img {
    max-height: 200px;
}

#sec-2 h1, #sec-4 h1, #sec-5-1 h1 {
    color: #49416D;
}

#sec-2 p, #sec-4 p, #sec-5-1 p {
    color: #211d33;
}

#sec-5 p {
    font-size: 40px;
    /*padding: 60px 40px;*/
}

#sec-5-1 h1 {
    text-align: start;
}

#sec-5-1 p {
    font-family: "Roboto", serif;
    /*padding: 60px 40px;*/
}

#sec-5-1 p.opaq {
    background-image: none;
    /*background-color: rgba(255, 255, 255, 0.3);*/
    border: none;
}

#hero-offset {
	text-align:left !important;
}

#hero-content {
	text-align: left !important;
}

.col-12.col-lg-4.mx-3.mx-lg-5.col-content {
	text-align:left !important;
}

/*.banner-menu:not(.disabled) #mi-tns.mi-active {
	padding: 8px !important;	
}*/

.col-7 {
	width: 45.333333%;
}

#support-btn {
	padding: 0px;
	margin-bottom: 0px !important;
	display:unset !important;
	width: 100%;
}
#scale-wrapper {
	overflow: hidden !important;
	margin-right: 0px;
	justify-content: left !important;
}
#scale-wrapper-fr {
	overflow: hidden !important;
	margin-right: 0px;
	justify-content: left !important;
}
#scale-wrapper p {
	padding-left: 0px !important;
}
#scale-wrapper-fr p {
	padding-left: 0px !important;
}
p.mx-lg-5 {
	margin: 0px 0px 20px 0px !important;
}
#builds-img {
	margin-bottom: -10px !important;
}


/* Extra small devices (phones, 768px and down) */
@media only screen and (max-width: 768px) {
	
	#hero-offset {
		margin-left: 0px !important;
	}
	#hero-content {
		width: 100% !important;
	}
	#builds-wrapper {
		padding: 0px 0px 0px 0px !important;
		max-width: 350px;
	}
	#builds-content {
		padding: 30px 30px 0px 30px!important;
		--bs-gutter-x: 0px !important;
		margin: 10px !important;
	}
	#scale-wrapper {
		margin: 0px 0px 0px 0px !important;
		background: url('../img/img_tech_sec_4_scaleAccelerate-d.svg') 90% -250% no-repeat !important;
		background-size: 480px !important;
		height: 70%;
	}
	#scale-wrapper-fr {
		margin: 0px 0px 0px 0px !important;
		background: url('../img/img_tech_sec_4_scaleAccelerate-d.svg') 90% -250% no-repeat !important;
		background-size: 480px !important;
		height: 50%;
	}
	#scale-content {
		margin-top: 50% !important;
		padding: 0px 30px !important;
	}
	#sec-4 {
		padding-bottom: 30px;
	}
	#sec-5-1 {
		padding: 60px 30px;
	}
	#support-btn {
		margin-top: 0px !important;
		padding-bottom: 10px !important;
	}
	#support-img {
		padding: 0px !important;
	}
	#support-content {
		padding: 0px !important;
	}
	#sec-3 {
		padding: 0px !important;
	}
	#hero-content {
		margin-top: 30px !important;
	}
	#technology-img {
		order: 0 !important;
		max-width: 100%;
		margin-top: 60px;
		padding: 0px;
	}
	#technology-content {
		order: 1 !important;
	}
	#technology-content h2  {
		padding: 0px;
	}
	#technology-content p  {
		padding: 0px;
	}
	#sec-3 .col-content {
		padding: 0px;
		margin-top: 0px;
	}
	#sec-5 {
		margin-bottom: 60px;
	}
	.col-content .row {
		margin: 0;
	}
	#proudly-canadian-img {
		max-width: 240px;
		margin: auto;
	}
	#support-img img {
		max-width: 100%;
		margin: 0 !important;
	}
	.col-7 {
		width: 100%;
	}
	#builds-img {
		padding: 30px 30px 0px 30px;
	}
	#builds-content img {
		max-width: 180px;
	}
	div#d-phone-flip {
		margin-left: 12px;
		padding: 0px;
	}
	#sec-3 .col-img img {
		padding-bottom: 30px;
	}
	#support-btn {
		margin-top: 15px !important;

	}
}	

/* Extra small devices (phones, 768px and down) */
@media only screen and (max-width: 990px) {
	
	#d-hero-img {
		display: none !important;
	}
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (max-width: 1280px) {

    #sec-1 {
        border-bottom: none;
    }

    #sec-1 .body {
        margin-top: 10px;
    }

    #sec-1 .header {
        padding: 40px 10px 17px;
    }

    #sec-1 h1 {
        /*font-weight: 500;
        font-size: 40px;
        line-height: 100%;
        letter-spacing: -0.03em;*/
    }

    #sec-1 .body-1 {
        padding: 0 40px;
    }

    #sec-1 .body-2 {
        padding: 0 25px;
    }

    #sec-1 h2, #sec-1 p {
        font-style: normal;
        font-weight: 400;
        font-size: 16px;
        line-height: 120%;
        letter-spacing: -.05em;
    }
	#sec-1 p {
		margin-right:0px !important;
		margin-left:0px !important;
	}

    .col-content {
    }

    #sec-2 {
        min-height: unset;
        padding-bottom: 0;
    }

    #sec-3 .col-content:first-child:last-child {
        margin-top: 76px;
    }

    #sec-3 .col-content:last-child {
        margin-bottom: 30px;
    }

    #sec-5-2 {
        /*padding: 65px 0px 40px;*/
    }
	#hero-offset {
		margin-left: 0px !important;
	}
	.col-lg-4 {
		width: 100%;
	}
	#platforms-content {
		order: 1 !important;
		margin-bottom: 60px;
	}
	#platforms-img {
		order: 0 !important;
	}
	#sec-4 {
		margin: 60px auto;
	}
	#support-content {
		width:100%;
	}
	/*#d-phone-flip {
		display: none !important;
	}
	#m-phone-flip {
		display: block !important;
		padding-top: 30px;
	}*/
	#d-hero-img {
		display: none !important;
	}
	#m-hero-img {
		display: block !important;
	}
	#hero-img {
		max-width: 320px;
		margin: 60px 0px 0px 0px !important;
		padding: 0px !important;
	}
	#builds-img {
		margin: auto;
	}
	#sec-2 h2 {
		margin: 30px 0px !important;
	}
	div#d-phone-flip {
		width: 100% !important;
	}
	#builds-content {
		padding-bottom: 15px !important;
	}
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 769px) {
	.col.col-content.order-0.order-lg-1 {
		order: 1 !important;
	}
	.col-md-12.col-lg-6.col-img.order-1.order-lg-0.left {
		order: 0 !important;
	}
	#builds-wrapper {
		padding: 0px 60px 0px 60px !important;
	}
	#technology-img {
		max-width: 225px !important;
		padding-left: 20px;
	}
	#sec-3 .col-content {
        margin-top: 50px;
        padding-right: 35px;
        padding-left: 35px;
    }
	#hero-content {
		width: 100%;
		margin-top: -70px;
		padding-left: 0px;
	}
	#scale-content {
		margin-top: 0px !important;
		padding-right: 60px !important;
	}
	#hero-offset h1 {
		margin-top: 0px;
		padding: 0px;
	}
	#hero-offset p {
		padding: 0px;
	}
	#sec-1 .row.content div img {
		padding-top: 60px !important;
	}
	#scale-wrapper {
		background: transparent url('../img/img_tech_sec_4_scaleAccelerate-d.svg') no-repeat -120% 50%;
		height: 400px;
		margin-left: 60px;
	}
	#scale-wrapper-fr {
		background: transparent url('../img/img_tech_sec_4_scaleAccelerate-d.svg') no-repeat -120% 50%;
		height: 400px;
		margin-left: 60px;
	}
	#support-img img {
		width: 50%;
		margin-left: 0px !important;
	}
	.col-7 {
		width: 70%;
	}
	#builds-content img {
		max-width: 225px;
		margin-top: 60px;
	}
	#builds-content {
		/*padding: 0px 0px 60px 0px !important;*/
		margin: 0 !important;
	}
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1281px) {
	#hero-content {
		padding-right:5px !important;
		width: 50% !important;
		margin-top: 100px !important;
	}
	#hero-offset {
		margin-left:-205px !important;
	}
	.row.d-flex.flex-grow-1.justify-content-around {
		margin-top: 60px;
	}
	/*.col-md-12.col-lg-6 img {
		margin-top: 60px;
	}*/
	#proudly-canadian-img {
		max-width:320px;
		margin-left: 60px !important;
	}
	#scale-wrapper {
		background: transparent url('../img/img_tech_sec_4_scaleAccelerate-d.svg') no-repeat 150% 50%;
		height: 550px;
		margin-left: 60px;
	}
	#scale-wrapper-fr {
		background: transparent url('../img/img_tech_sec_4_scaleAccelerate-d.svg') no-repeat 150% 50%;
		height: 550px;
		margin-left: 60px;
	}
	#scale-content {
		width: 60%;
		padding-left: 0px;
	}
	#support-img {
		width: 30%;
		padding-left: 0px;
	}
	#support-content {
		width: 70%;
	}
	#feature-rich {
		min-height: 400px;
		margin: 60px 0;
	}
	#powerful-insights, #proudly-canadian, #dedicated-support {
		margin: 60px 0;
	}
	#technology-img {
		max-width: 400px !important;
		justify-content: center !important;
	}
	.col-lg-4 {
		width: 46%;
	}
	#builds-wrapper {
		padding: 60px 60px 0px 60px !important;
	}
	#support-img img {
		width: 100%;
	}
	#builds-img {
		width: 450px !important;
		padding: 0;
	}
	#builds-content img {
		width: 288px;
		display: block !important;
	}
	#sec-2 h2 {
		margin-top: 30px !important;
	}
	.col-7 {
		width: 45.333333% !important;
	}
	#builds-content img {
		margin-top: 0px;
	}
	#builds-content h2 {
		margin-bottom: 30px !important;
	}
	#builds-content {
		padding: 0px 0px 60px 0px !important;
		margin: 0 !important;
	}
	#builds-img img.d-block {
		display: none;
	}
}

/* CARD FLIP STYLES */

.flip-card {
    background-color: transparent;
    perspective: 1000px; /* Remove this if you don't want the 3D effect */
}

/* This container is needed to position the front and back side */
.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.6s;
    transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
div[id^='card-']:hover .flip-card .flip-card-inner,
.flip-card:hover .flip-card-inner,
.flip-card.show .flip-card-inner {
    transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden; /* Safari */
    backface-visibility: hidden;
}

/* Style the front side (fallback if image is missing) */
.flip-card-front {
    z-index: 2;
    color: black;
}

/* Style the back side */
.flip-card-back {
    color: white;
    transform: rotateY(180deg);
}

/* CARD FLIP STYLES - END */