html{
	scroll-behavior: smooth;
}

body{
	font-family: 'Montserrat', sans-serif;

}

p{
	color: #fff;
}

header {
	background-color: #F3F1F3;
}

.navbar-nav>li>a{
	color: #33365A;
	font-size: 18px;
	margin-left: 25px;
}

.navbar-nav>li>a:focus, .navbar-nav>li>a:hover {
    text-decoration: none;
    background-color: transparent;
}

.hero{
	background-image: url(../img/hero-bg-1.png?id=2);
	background-size: auto 100%;
	background-repeat: no-repeat;
	background-position: left;
	padding: 80px 0;
	min-height: 440px;
	display: flex;
	align-items: center;
	position: relative;
}

.hero-bg-2{
	position: absolute;
	right: 0;
	bottom: 0;
}

.hero-logos{
	max-width: 300px;
	text-align: right;
}

.hero h1{
	color: #006553;
	font-size: 50px;
	font-weight: 700;
}

.hero h2{
	color: #009686;
	font-size: 35px;
	margin-bottom: 50px;
}

.bg-slide-1{
	background-image: url(../img/bg-slide-1.svg);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	padding: 80px 250px;
	min-height: 450px;
}

.bg-slide-2{
	background-image: url(../img/bg-slide-2.svg);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	padding: 80px 250px;
	min-height: 450px;
}

.bg-slide-3{
	background-image: url(../img/bg-slide-3.svg);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	padding: 80px 250px;
	min-height: 450px;
}

.bg-slide-4{
	background-image: url(../img/bg-slide-4.svg);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	padding: 80px 250px;
	min-height: 450px;
}


.carousel-inner .bg-slide-1 h3{
	color: #006552;
}

.carousel-inner .bg-slide-2 h3, .carousel-inner .bg-slide-3 h3, .carousel-inner .bg-slide-4 h3{
	color: #fff;
	font-weight: 700;
}

.carousel-inner p{
	color: #fff;
	font-size: 17px;
	-webkit-hyphens: none;
    -moz-hyphens:    none;
    -ms-hyphens:     none;
    hyphens:         none;
}

.w-600{
	font-weight: 600;
}

.icon-1{
	max-width: 300px;
}

.icon-2{
	max-width: 50px;
	margin-right: 25px;
}

.carousel-indicators > li {
  border-radius: 50%;
}

.carousel-indicators li {
	height: 15px;
	width: 15px;
}


/* change transition duration to control the speed of fade effect */
.carousel-item {
  transition: transform 0.6s ease-in-out;
}

.carousel-fade .active.carousel-item-start,
.carousel-fade .active.carousel-item-end {
  transition: opacity 0s 0.6s;
}

.cstm-col-1{
	background-image: url(../img/bg-3.png);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: left;
}

.cstm-col-2{
	background-color: #009984;
	padding: 100px 200px;
	border-radius: 0 0 200px 0 ;
}

.cstm-col-2 h2{
	color: #fff;
	font-size: 35px;
}

.cstm-btn-1{
	padding: 10px 25px;
	border-radius: 0 10px 10px 10px;
	color: #fff;
	background-color: #F7A300;
	font-size: 22px;
	font-weight: 600;
	display: inline-block;
}

.cstm-btn-2{
	padding: 8px 15px;
	border-radius: 0 10px 10px 10px;
	color: #fff;
	background-color: #266655;
	font-size: 16px;
	font-weight: 600;
	display: inline-block;
}

.cstm-btn-3{
	padding: 8px 15px;
	border-radius: 0 10px 10px 10px;
	color: #fff;
	background-color: #009984;
	font-size: 16px;
	font-weight: 600;
	display: inline-block;
}

.cstm-btn-4{
	padding: 10px 25px;
	border-radius: 25px;
	color: #fff;
	background-color: #266655;
	font-size: 22px;
	font-weight: 600;
	display: inline-block;
}

.cstm-btn-1:hover, .cstm-btn-2:hover, .cstm-btn-3:hover, .cstm-btn-4:hover {
	text-decoration: none;
	color: #fff;
}

.section-4{
	padding: 100px 0;
	background-color: #F7A300;
}

.section-4 h2{
	color: #fff;
	font-size: 35px;
	font-weight: 700;
}

.img-bg-1{
	position: absolute;
	top: 0;
	right: 0;
	max-width: 200px;
}

.custom-box-1{
	background-color: #266655;
	padding: 100px 180px;
}

.custom-box-1 h3, .custom-box-3 h3{
	color: #fff;
	font-weight: 700;
}

.custom-box-1 h5, .custom-box-3 h5{
	color: #fff;
	font-weight: 600;
	font-size: 16px;
}

.custom-box-1 p, .custom-box-3 p{
	color: #fff;
}

.custom-box-2{
	padding: 100px 180px;
}

.custom-box-2 h3{
	color: #266655;
	font-weight: 700;
}

.custom-box-2 h5{
	color: #266655;
	font-weight: 600;
	font-size: 16px;
	margin-bottom: 10px;
}

.custom-box-2 p{
	color: #266655;
}

.custom-box-3{
	background-color: #009984;
	padding: 100px 180px;
}

.mb-0{
	margin-bottom: 0;
}

.mt-30{
	margin-top: 30px;
}

.mt-20{
	margin-top: 20px;
}
.mt-10{
	margin-top: 10px;
}
.ptb-40{
	padding: 40px 0;
}

.ptb-30{
	padding: 30px 0;
}

.logo-footer{
 	max-width: 200px;
 }

.row{
	margin-left: 0;
	margin-right: 0;
}

#logo-s21-header{
	max-height: 60px;
}

.text-right-1{
	text-align: right;
}


footer{
	background-color: #F6F6F6;
	padding: 130px 30px;
}

@media (max-width: 1500px){
	.bg-slide-3,  .bg-slide-2, .bg-slide-1, .bg-slide-4{
	    padding: 80px 130px;
	}

	.cstm-col-2 h2 {
	    font-size: 28px;
	}

}


@media (max-width: 1200px){
	.hero h1 {
	    font-size: 40px;
	}

	.hero h2 {
	    font-size: 28px;
	}

	.hero{
    	min-height: unset;
    	padding: 50px;
	}

	.carousel-inner p{
		font-size: 16px;
	}

	.carousel-inner h3{
		font-size: 25px;
	}

	.icon-1 {
	    max-width: 250px;
	}

	.bg-slide-3,  .bg-slide-2, .bg-slide-1, .bg-slide-4{
	    padding: 60px 120px;
	}

	.carousel-indicators li {
	    height: 10px;
	    width: 10px;
	}

	.cstm-col-2 h2 {
	    font-size: 25px;
	}

	.cstm-col-2 {
	    padding: 80px 100px;
	}

	.custom-box-1, .custom-box-2, .custom-box-3, .custom-box-4 {
	    padding: 60px 70px;
	}

	.custom-box-1 h3, .custom-box-2 h3,  .custom-box-3 h3,  .custom-box-4 h3 {
	    font-size: 25px;
	}

	.section-4 h2 {
	    font-size: 28px;
	}

	.cstm-btn-4 {
	    font-size: 18px;
	}

}

@media (max-width: 990px){
	.bg-slide-3,  .bg-slide-2, .bg-slide-1, .bg-slide-4{
	    padding: 50px 140px;
	    background-position: left;
	}

	.icon-1 {
	    max-width: 220px;
	    margin-bottom: 20px;
	}

	.hero h1 {
	    font-size: 33px;
	}

	.hero h2 {
	    font-size: 22px;
	    margin-bottom: 20px;
	}

	.cstm-col-2 h2 {
	    font-size: 20px;
	}

	.cstm-btn-1 {
	    font-size: 18px;
	}
}

@media (min-width: 767px){
	.hero-img-mob{
		display: none;
	}

	.hide-desktop{
		display: none;
	}
}


@media (max-width: 766px){
	#logo-s21-header{
		max-height: 40px;
	}

	.custom-box-1, .custom-box-2, .custom-box-3, .custom-box-4 {
	    padding: 50px 50px;
	}

	.bg-slide-3,  .bg-slide-2, .bg-slide-1, .bg-slide-4{
	    padding: 50px 60px;
	}

	.carousel-inner h3 {
	    font-size: 20px;
	}

	.carousel-inner p {
	    font-size: 15px;
	}

	.custom-box-1 p, .custom-box-2 p, .custom-box-3 p, .custom-box-4 p, 
	.custom-box-1 h5, .custom-box-2 h5, .custom-box-3 h5, .custom-box-4 h5 {
	    font-size: 15px;
	}

	.custom-box-1 h3, .custom-box-2 h3, .custom-box-3 h3, .custom-box-4 h3 {
	    font-size: 20px;
	}

	.mob-pb-0{
		padding: 50px 50px 0 50px;
	}

	.mob-pt-0{
		padding: 0 50px 50px 50px;
	}

	.section-4 h2 {
	    font-size: 25px;
	}

	.section-4 {
	    padding: 80px 20px;
	}

	.hero{
		background-image: unset;
	}

	.hero-bg-2 {
	   	display: none;
	}

	.hero-desktop{
		display: none;
	}

	.text-right-1{
		text-align: left;
	}

	.bg-color-mob-1{
		background-color: #009984;
	}

	.cstm-btn-3{
		background-color: #266655;
	}
	
}

@media (max-width: 575px){
	footer{
		padding: 60px 30px;
	}

	.hero h1 {
	    font-size: 28px;
	}

	.bg-slide-3,  .bg-slide-2, .bg-slide-1, .bg-slide-4{
	    min-height: 530px;
	}
}