main p {
    font-family: "Roboto", serif;
    /*font-size: 24px !important;*/
    font-weight: 400 !important
}

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

#sec-1 {
    /*background-color: #211D33;*/
    color: #FCFAF3;
	min-height:auto;
	padding:60px 0px 60px 0px;
}

#sec-2 {
    background-color: #FCFAF3;
    color: #211D33;
	border-radius:20px;
	min-height:auto;
	padding:60px 0px 60px 60px;
	margin:60px auto 60px auto;
}
#sec-3, #sec-4 {
    color: #FCFAF3;
	min-height:auto;
	margin:60px auto 60px auto;
	padding:60px 0px 60px 0px;
}

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

#sec-1 .row.content,
#sec-1>div {
    flex-grow: 1;
}

#sec-1 .row.content div:first-child {
    display: flex;
}

#sec-1 .col-content div:first-child {
    margin-top: 3em;
    margin-bottom: 3em;
}

#sec-1 .row.content div img {
    max-width: 100%;
    max-height: 100%;
    width: fit-content;
    height: 100%;
    align-self: center;
    margin-left: 0px;
}


#sec-1 .row.content > span {
    height: 0;
    border-color: #6A55F7 !important;
	border:none !important;
}

#sec-2 .col-content div:last-child {
    margin-top: 20px;
}

.col-carousel,
.col-content,
.col-img {
    justify-content: center !important;
    flex-direction: column !important;
    display: flex !important;
    text-align: left;
}

.col-content .row,
.col-img .row {
    justify-content: left;
    margin-top: 10px;
    margin-bottom: 10px;
}

.btn-link-sqr {
    width: auto !important;
    font-family: "Roboto", serif;
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 19.20px;
    color: #F6F4ED;
    padding: 15px 30px;
    text-decoration: none;
    background: #6A55F7;
    border: 1px solid #6A55F7;
    border-radius: 42px;
    margin:10px 5px 10px 5px;
}

.row .mx-lg-5, .mx-lg-5 {
	margin-left:0px!important;
}

#hero-offset a:hover, #sec-2 a:hover {
	color: #FCFAF3 !important
}

/* Extra small devices (phones, 768px and down) */
@media only screen and (max-width: 768px) {
	#sec-2 {
		padding: 30px !important;
		margin: 20px auto !important;
	}
	#hero-offset {
		margin-left: 0px !important;
	}
	.col-content {
		order: 1 !important;
	}
	.col-img {
		order: 0 !important;
	}
	.col-content h1 {
		margin-top:0px !important;
	}
	#hero-content {
		width: 100% !important;
	}
	#sec-2 .col.col-content {
		padding: 0px 30px 0px 30px;
		margin-right:0px !important;
    }
    #sec-2 .col.col-content {
        --bs-gutter-x: 0px !important;
        margin-right:0px !important;
        margin-left:0px !important;
	}
    #platforms-img {
		order: 0 !important;
	}    
    #sec-3 div#platforms-img,  #sec-4 div#platforms-img {
		order: 0 !important;
        padding: 40px 12px;
	}
    h1.fr {
        font-size: 58px !important;
    }
}

/* Extra small devices (phones, 768px and down) */
@media only screen and (min-width: 0px) {
	#d-indicators.carousel-indicators [data-bs-target] {
		width: 170%;
		padding: 3px;
		margin: 6px 3px 0px 3px;
		font-size: 11px;
	}
	#d-carousel-play.position-absolute.top-50.start-50.translate-middle {
		transform: translate (120%, -315%) !important;
	}
	.row.d-none.d-lg-block {
		display:block !important;
	}
	.row.g-0.justify-content-center {
		display:none !important;
	}
	.d-none.d-lg-block {
		display: block !important;
	}
	.d-block.d-lg-none {
		display: none !important;
	}
	#d-carousel-controls {
		margin-left: 170%;
		margin-top: -190%;
	}
}

/* Small devices (portrait tablets and large phones, 600px and up) 
@media only screen and (min-width: 600px) {
} */

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (max-width: 1280px) {
	
	p {
        font-family: "Roboto", serif;
        font-size: 20px !important;
        font-weight: 400 !important;
    }
	#hero-content {
		width: 100% !important;
		margin-top: -185px !important;
		padding-left: 0px;
	}
	#sec-1 .row.content div img {
		max-width:306px !important;
		/*padding-top: 60px !important;*/
	}
	#sec-1 .row.content div {
		width: 100% !important;
	}
	#d-indicators.carousel-indicators [data-bs-target] {
        font-weight: 600;
        /*font-size: 16px;*/
    }
	#platforms-btn {
		margin: 10px 0px 0px 0px !important;
	}
	#sec-1 {
		padding: 0px 0px 0px 0px !important;
	}
	#sec-2 {
		padding: 60px 0px 60px 0px !important;
		margin:60px auto 60px auto !important;
	}
	#sec-3, #sec-4 {
		margin:60px auto 60px auto !important;
		padding:60px 0px 60px 0px !important;
	}
	#hero-offset {
		margin-left: 0px !important;
	}
	#platforms-content {
		order: 1 !important;
		/*margin-bottom: 60px;*/
	}
	#sec-2 .col.col-content {
		margin-right: 60px;
	}
	/*.col-img {
		margin-bottom: 60px;
		order: 0!important;
		flex-direction: unset !important;
		width:100% !important;
	}*/
}

/* Large devices (laptops/desktops, 992px and up)*/ 
@media only screen and (min-width: 769px) {
	#sec-1 {
		padding: 0px !important;
	}
	#sec-2 {
		padding: 60px 0px 60px 60px !important;
		margin:60px auto 60px auto !important;
	}
	#sec-3, #sec-4 {
		margin:60px auto 60px auto !important;
		padding:60px 0px 60px 0px !important;
	}
	#d-indicators.carousel-indicators [data-bs-target] {
		width: 140% !important;
		padding: 10px !important;
		margin: 5px 5px 5px 25px !important;
		font-size: 16px !important;
	}
	.d-none.d-lg-block {
		display: block !important;
	}
	.d-block.d-lg-none {
		display: none !important;
	}
	#d-carousel-controls {
		margin-left:40% !important;
		margin-top:0%;
	}
    .col-md-12 {
        width: 50% !important;
    }
    .banner-menu-wrapper.col-md-12.col-lg-6.col-content {
        width: auto !important;
    }
    #sec-3 div#platforms-img {
		order: 0 !important;
        margin-right: 30px;
	}
    #sec-4 div#platforms-img {
		order: 1 !important;
        margin-left: 30px;
	}
}

/* Extra large devices (large laptops and desktops, 1280px and up) */
@media only screen and (min-width: 1281px) {

    p {
        font-family: "Roboto", serif;
        font-size: 24px !important;
        font-weight: 400 !important;
    }

    main {
        overflow-x: hidden;
        overflow-y: auto;
        scroll-snap-type: none;
    }

    .sec {
		max-width: 1152px !important;
	}
	.sec, footer {
        scroll-snap-align: none;
        scroll-snap-stop: normal;
    }

    footer {
        width: 100% !important;
        scroll-snap-align: none;
        scroll-snap-stop: normal;
    }
    #sec-1 {
        border-bottom-width: 2px;
    }

    #sec-1 .col-content div:first-child {
        margin-top: 30px;
        margin-bottom: 35px;
    }

    #sec-1 .col-content div:last-child {
        margin-bottom: 25px;
    }

    #sec-1 .row.content div img {
        margin: auto auto 0 auto;
        padding-top: 0;
        max-width: 613px;
        height: auto;
    }

    #sec-2 {
        border-bottom: 1px solid #D1CCC7;
    }

    #sec-2 .col-content .row {

    }
	
	#hero-content {
		padding-right:5px !important;
	}

	#hero-offset {
		margin-left:-205px !important;
	}

    /*#sec-3 .col-img img {
        max-width: 375px;
        transform: none;
    }*/


    /*.btn-link-sqr {
        font-size: 11px;
        padding: 10px 20px;
    }*/
    #sec-4 sup {
        font-size: 36px;
    }
}

@media only screen and (min-width: 991px) {

}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1281px) {
}


/* CAROUSEL STYLES */

#carousel-img {
	width:130% !important;
}

#d-carousel {
    position: relative;
}
.col-carousel > .row {
    margin: 40px 0;
}

.col-carousel .left-panel {
    position: absolute;
    top: 0;
    z-index: 1;
    width: 30%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 30px 15px;
}

#d-indicators.carousel-indicators {
    position: unset;
    height: 95%;
    flex-direction: column;
    justify-content: space-around;
    font-family: "Roboto", serif;
    font-style: normal;
    font-weight: 300;
    font-size: 15px;
    line-height: 20px;
    margin-bottom: 0;
}

#d-carousel-controls {

    width: 100%;
    height: 5%;

    /*margin-left: 40%;*/

}


 #m-carousel-controls button{
     z-index: 2;
 }

#d-carousel-controls button, #m-carousel-controls button {
    background: none;
    color: inherit;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
    outline: inherit;
}

.carousel-indicators .active {
    color: #6A55F7 !important;
    background-color: #FAF8F3 !important;
	font-weight:600 !important;
}

#d-indicators.carousel-indicators [data-bs-target] {
    /*width: 140%;*/
    height: 100%;
    /*padding: 10px;*/
    text-indent: 0;
    border-radius: 8px;
    /*margin: 5px 5px 5px 25px;*/
    background-clip: unset;
    background-color: rgba(0, 0, 0, .2);
    color: #fcfaf3;
    opacity: 1;
    font-family: "Roboto", serif;
    font-style: normal;
    font-weight: 400;
    /*font-size: 16px;*/
    line-height: 100%;
    text-align: center;
    letter-spacing: 0.32px;
	text-transform:uppercase;

}

#m-carousel {
    /*background: url("../img/img_m_carousel_bg.svg") no-repeat bottom;*/
    background-size: 100% auto;
    /*padding-bottom: 175px;*/
}

#m-carousel .carousel-inner {
    padding-left: 30px;
    padding-right: 30px;

}

#m-carousel .carousel-item > div {
    height: 70px;
    font-style: normal;
    font-weight: 600;
    font-size: 20px;
    line-height: 22px;
    color: #211d33;

    text-align: center;
    vertical-align: middle;


    margin: 40px 0px 0px 0px;
	width:auto;
	text-transform: uppercase;
}

#m-indicators {
    margin: 0 0;
    padding-bottom: 30px;
    width: 100%;
    position: relative;
    display: flex;
    justify-content: center;
}

#m-carousel .carousel-indicators [data-bs-target] {
    border-radius: 50%;
    width: 14px;
    height: 14px;
    margin-left: 10px;
    margin-right: 10px;
	background-color: #6A55F7 !important;
}

#m-carousel .carousel-indicators [data-bs-target].active {
    background-color: #6A55F7 !important;
}

.carousel-control-next, .carousel-control-prev {
    margin-top: 55%;
    opacity: 1;
}

.carousel-control-next-icon, .carousel-control-prev-icon {
    width: 3em;
    height: 3em;
}

/* Large devices (laptops/desktops, 992px and up)
@media only screen and (max-width: 1600px) {
    #d-indicators.carousel-indicators [data-bs-target] {
        font-weight: 600;
        font-size: 16px;
    }
} */

/* Large devices (laptops/desktops, 992px and up) 
@media only screen and (max-width: 1400px) {
    #d-indicators.carousel-indicators [data-bs-target] {
        font-weight: 600;
        font-size: 16px;
    }
}*/

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (max-width: 1280px) {
    .col-carousel {
        margin: 60px 0 0 0 !important;
		width: 100% !important;
    }
	.col-carousel > .row {
        margin: 0;
		width: 100% !important;
    }
	#d-indicators.carousel-indicators [data-bs-target] {
		color: #fcfaf3;
	}
	#d-carousel-wrapper.row.g-0.d-none {
		display: block !important;
	}
	#m-carousel-wrapper.row.g-0.d-flex.d-lg-none {
		display:none !important;
	}
	.left-panel.d-none.d-lg-block {
		display: block !important;
	}
    #sec-4 sup {
        font-size: 28px;
    }
    #sec-contact div.col-md-12 {
        width: 100% !important;
    }
}

@media only screen and (max-width: 768px) {
    #sec-3, #sec-4 {
        margin:60px auto 60px auto !important;
        padding:0px !important;
    }
    .col-carousel {
        order: 1 !important;
    }
    .col-carousel.fr-carousel {
        width: 92.9% !important;
	}
    .fr-carousel.left-panel {
        padding: 8px 5px 0px 25px;
    }
    .fr-carousel.carousel-indicators [data-bs-target] {
        border-top: 8px solid transparent;
        border-bottom: 8px solid transparent;
    }
    #sec-2 div.row {
        margin-right: 0px;
        margin-left: 0px;
    }
    div.col-carousel {
        padding-right: 0px !important;
    }
    .col-carousel .left-panel {
        padding: 8px 15px !important;
    }
}
/* CAROUSEL STYLES - END */