@charset "utf-8";
/*-----------------------=============================================================================================
CSS FOR MEDIA QUERY
----------------------============================================================================================---*/
.show-mob, .show-tab {
	display: none;
}
.show-desk {
	display: block;
}
.fr {
	float: right;
}
.fl {
	float: left;
}
.tl{
	text-align:left;
}
 @media only screen and (max-width:1185px) {
.container {
	width: 1004px;
}
/*-------------------------
CSS FOR BANNER
--------------------------*/
/*-------------------------
CSS FOR SECTION 1
--------------------------*/
.s1-grn-line {
    right: -15px;
    max-width: 639px;
    width: 100%;
}
/*-------------------------
CSS FOR CTA
--------------------------*/
.cta .s1-p3 {
    padding: 0 0;
}
/*-------------------------
CSS FOR SECTION 2
--------------------------*/
.s2-box{
    padding: 65px 15px 65px 30px;
}
.s2-box-2 {
    padding: 60px 20px 60px 490px;
}
/*-==============================================================================================
CSS FOR ABOUT
===================================================================================================-*/
.abt-sec-2 .s1-p3 {
    padding: 0 95px;
}
.cont-pad-box {
    padding: 0 111px;
}

}
 @media only screen and (max-width:1023px) {
.container {
	width: 755px;
}
.show-mob, .show-desk {
	display: none;
}
.show-tab {
	display: block;
}
/*-----------------------
CSS FOR BANNER
-------------------------*/
.bnr-st {
    font-size: 62px;
    line-height: 64px;
}
.bnr-st1 {
    font-size: 19px;
    line-height: 28px;
}
.bnr-ul {
    padding: 0 0 40px;
}
.bnr-st2 {
    font-size: 19px;
    line-height: 25px;
}
/*-------------------------
CSS FOR SECTION 1
--------------------------*/
.section-1 {
    padding: 60px 0;
}
.s1-p1 {
    font-size: 43px;
    line-height: 43px;
    margin-bottom: 10px;
}
.s1-p2 {
    font-size: 25px;
}
.s1-lft {
    width: 58%;
}
.s1-rit-div {
    width: 41%;
	background-size:100%;
}
.s1-circle-1, .s1-circle-2, .s1-circle-3 {
    width: 92px;
    height: 92px;
    padding: 21px 5px 0 0;
}
.s1-circle-2 {
    right: 2%;
    top: 100px;
    padding: 11px 5px 0 0;
}
.cir-p1 {
    font-size: 15px;
}
.s1-grn-line {
    right: -8px;
	top: 80px;
}
/*-------------------------
CSS FOR CTA
--------------------------*/
.cta {
    padding: 40px 0;
}
.cta-cut {
    margin-bottom: -56px;
}
/*-------------------------
CSS FOR SECTION 2
--------------------------*/
.s2-box {
    padding: 40px 255px 45px 30px;
}
.s2-box-2 {
    padding: 30px 15px 38px 310px;
}
.s2-p2 {
    font-size: 30px;
    line-height: 30px;
}
/*-------------------------
CSS FOR SECTION 3
--------------------------*/
.s3-img-1 {
    top: 17%;
    max-width: 460px;
    width: 39%;
}
.marg-1 {
    margin-bottom: 30px;
}
.pad-1 {
    padding-top: 25px;
}
/*-------------------------
CSS FOR SECTION 4
--------------------------*/
.s4-box {
    padding: 20px 20px 20px 0;
}
.s4-box+.s4-box {
    padding-left: 20px;
}

/*-==============================================================================================
CSS FOR ABOUT
===================================================================================================-*/
.abt-img-1 {
    right: 0;
    max-width: 380px;
    width: 38%;
}
.abt-sec-1 {
    padding: 60px 0;
}
.abt-sec-2 .s1-p3 {
    padding: 0 30px;
}
.abt-img-2 {
    width: 33%;
    margin: 0;
}
.pad-2 {
    padding: 20px 0 0;
}

/*-==============================================================================================
CSS FOR CONTACT
===================================================================================================-*/
.cont-lft{
	width:40%;
}
.cont-rit {
    width: 45%;
}
.cont-pad-box {
    padding: 0 0px;
}

}
 @media only screen and (max-width:767px) {
.container {
	width: 100%;
	padding: 0 10px;
	max-width: 600px;
}
.show-desk, .show-tab {
	display: none;
}
.show-mob {
	display: block;
}
/*-------------------------
CSS FOR LOGO BAR
--------------------------*/
.menu-bar {
	display: none;
}
.logo {
    float: left;
    width: 180px;
}
.top-bar {
    height: 54px;
    margin-top: -54px;
    top: 54px;
    padding: 7px 0;
	border-bottom:1px solid #fbf3f4;
}
.top-sec {
    margin-bottom: 54px;
}
.mob-mnu-ic {
	cursor: pointer;
	position: absolute;
	right: 10px;
	top: 10px;
	z-index: 16;
	height: 25px;
}
.mob-mnu-ic button {
	outline: none;
	-webkit-appearance: none;
	background: none;
	padding: 0;
	cursor: pointer;
	border: none;
}
.mob-mnu-ic span {
	color: #fff;
	display: inline-block;
	vertical-align: top;
	font-size: 16px;
	font-weight: 300;
	margin-top: 0px;
	margin-right: 5px;
}
.bar1, .bar2, .bar3 {
	width: 30px;
	height: 4px;
	background-color: #00bf37;
	transition: 0.4s;
	-webkit-border-radius: 2px 2px 2px 2px;
	border-radius: 2px 2px 2px 2px;
}
.bar2 {
	margin: 6px 0;
}
.dl-active .bar1 {
	-webkit-transform: rotate(-45deg) translate(-7px, 6px);
	transform: rotate(-45deg) translate(-7px, 6px);
	background: #00bf37;
}
.dl-active .bar2 {
	opacity: 0;
}
.dl-active .bar3 {
	-webkit-transform: rotate(45deg) translate(-8px, -8px);
	transform: rotate(45deg) translate(-8px, -8px);
	background: #00bf37;
}
.mob-menu-div {
	float: left;
	width: 100%;
}
.mobimenu {
	float: left;
	width: 100%;
	position: fixed;
	top: 54px;
	background: #000;
	z-index: 3;
	left: 0px;
	bottom: 0px;
	border-top: 1px solid #414040;
}
.mob-nav-top {
	top: 54px;
}
.mobimenu li {
	float: left;
	width: 100%;
	color: #fff;
	padding: 10px;
	font-size: 17px;
	line-height: 20px;
	text-transform: uppercase;
	text-align: left;
	border-bottom: 1px solid #e1e1e1;
	font-weight: normal;
}
.mobimenu li a {
	color: #fff;
	float: left;
	width: 100%;
	padding: 10px 10px;
}
.mobimenu li a:hover, .mobimenu li a.active {
	text-decoration: none;
}
.mobimenu li ul {
	float: left;
	width: 100%;
	padding: 0 18px;
	border-bottom: 0;
}
.mobimenu li ul li:last-child {
	border: none;
}
.mobimenu li a:hover .m-arw, .mobimenu li a.active .m-arw {
	fill: #f08a3c;
}
.pink-bar {
    padding: 5px 0;
    font-size: 13px;
    line-height: 14px;
    letter-spacing: 0px;
}
.log-ul{
	display:none;
}
/*-------------------------
CSS FOR BANNER
--------------------------*/
.banner {
    padding: 25px 0;
}
.bnr-st {
    font-size: 35px;
    line-height: 39px;
	letter-spacing:0;
}
.bnr-st1 {
    font-size: 16px;
    line-height: 22px;
    padding: 6px 0 8px;
}
.bnr-ul li {
    width: 50%;
	padding:0 10px;
	margin-bottom:12px;
}
.bnr-ul li:nth-child(2){
	background:none;
}
.bnr-st2 {
    font-size: 17px;
    line-height: 23px;
}
.bnr-ic-1 {
    margin-bottom: 5px;
	max-width:45px;
}
.bnr-ul {
    padding: 0 0 12px;
}
a.bnr-btn{
	margin:4px 0;
}
/*-------------------------
CSS FOR SECTION 1
--------------------------*/
.section-1 {
    padding: 30px 0;
}
.s1-lft {
    width: 100%;
	text-align:center;
}
.s1-p1 {
    font-size: 34px;
    line-height: 34px;
    margin-bottom: 6px;
}
.s1-p2 {
    font-size: 22px;
	line-height:26px;
}
.pad-1 {
    padding-top: 20px;
}
.s1-img-1 {
    width: 100%;
	position:static;
	display:inline-block;
	transform:none;
	margin-top:20px;
}
.s1-p3 {
    font-size: 18px;
    line-height: 28px;
}
.s1-rit-div{
	position:static;
	display:inline-block;
	float:left;
	width:100%;
	height:auto;
	left:0;
	top:0;
	position:relative;
	margin-top:30px;
	background:none;
}
.s1-grn-line {
    right: -2%;
    top: 23%;
}
.s1-circle-1, .s1-circle-2, .s1-circle-3 {
    width: 95px;
    height: 95px;
}
.s1-img-1-mob{
	display:inline-block;
	max-width:100%;
}
/*-------------------------
CSS FOR CTA
--------------------------*/
.cta {
    padding: 30px 0;
	background-size:cover;
}
.cta-cut {
    margin-bottom: -45px;
}
/*-------------------------
CSS FOR SECTION 2
--------------------------*/
.section-2 {
    padding: 30px 0 0px;
}
.s2-p1 {
    font-size: 30px;
    line-height: 32px;
}
.s2-box, .s2-box-2 {
    margin-top: 20px;
	background:#fff;
	padding:15px 15px;
	text-align:center;
}
.s2-ul {
    margin: 20px 0 20px;
}
.s2-p2 {
    font-size: 28px;
    line-height: 30px;
}
.s2-img-mob-1{
	display:inline-block;
	max-width:100%;
	margin-bottom:12px;
}
/*-------------------------
CSS FOR SECTION 3
--------------------------*/
.section-3 {
    padding: 30px 0;
}
.s3-img-1 {
    position:static;
	display:inline-block;
    max-width: 300px;
    width: 100%;
	margin-top:15px;
}
/*-------------------------
CSS FOR SECTION 4
--------------------------*/
.section-4 {
    padding: 35px 0;
}
.s4-box {
    padding:0;
    width: 100%;
	text-align:center;
}
.s4-box+.s4-box {
    padding-left: 0px;
	border:none;
	margin-top:30px;
}
/*-------------------------
CSS FOR FOOTER
--------------------------*/
.foo-lft {
    width: 100%;
    text-align: center;
}
.foo-ul {
    float: none;
    margin-top: 20px;
	display:inline-block;
}

/*-==============================================================================================
CSS FOR ABOUT
===================================================================================================-*/
.about-banner {
    padding: 30px 0;
}
.abt-p1 {
    font-size: 34px;
    line-height: 37px;
}
.abt-p2 {
    font-size: 18px;
    line-height: 27px;
}
.abt-hr {
    width: 90%;
    margin: 13px 0 8px;
}
.abt-sec-1 {
    padding: 30px 0;
}
.abt-img-1 {
    position:static;
	display:inline-block;
    max-width: 300px;
    width: 100%;
	transform:none;
	margin-bottom:15px;
}
.abt-sec-2 {
    padding:25px 0;
	background-size:cover;
}
.abt-sec-2 .s1-p3 {
    padding: 0 0px;
}
.abt-img-2 {
    width: 100%;
    float:none;
	display:inline-block;
	max-width:350px;
}

/*-==============================================================================================
CSS FOR CONTACT
===================================================================================================-*/
.cont-lft{
	width:100%;
}
.cont-rit {
    width: 100%;
	margin-top:45px;
}
.cont-ul {
    margin-top: 20px;
}
.cont-submit {
    margin: 25px 0 0;
}
.cont-lft .s2-p2 {
    font-size: 28px;
    line-height: 30px;
}

}