:root {
	--main-color: #333;
	--black-color: #000;
	--yellow-color: #FCC23C;
	--white-color: #fff;
}

body{color: var(--main-color); font-size: 16px; font-family: 'Inter', sans-serif;}
.float-left{float: left;}
.float-right{float: right;}
ul{margin: 0; padding: 0; list-style-type: none;}
h1, h2, h3, h4{margin: 0; padding: 0; font-weight: 700; color: var(--black-color); font-family: 'Sora', sans-serif; width: 100%; float: left; font-size: 32px; line-height: 44px;}
.horizontal-center{left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%);}
.row-flex, .row-flex > div[class*='col-'] {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex;  flex:1 1 auto;}
.row-flex-wrap {-webkit-flex-flow: row wrap;  align-content: flex-start; flex:0;}
.row-flex > div[class*='col-'], .container-flex > div[class*='col-'] {margin:-.0px;}
.container-flex > div[class*='col-'] div,.row-flex > div[class*='col-'] div {width:100%;}
.flex-col {display: flex; display: -webkit-flex; flex: 1 100%; flex-flow: column nowrap;}
.flex-grow {display: flex; -webkit-flex: 2; flex: 2;}
.container{max-width: 1360px; padding: 0 20px;}
p{margin: 0; padding: 0; width: 100%; float: left; line-height: 28px;}
.title-text{font-size: 20px; font-weight: 500; padding: 12px 0 0 0; font-family: 'Sora', sans-serif;}
.yellow-btn{color: var(--black-color); background: var(--yellow-color); text-decoration: none; border: none; border-radius: 50px; padding: 10px 16px; font-size: 18px; outline: none; display: inline-block;}
.yellow-btn:hover{background: var(--black-color); color: var(--yellow-color); text-decoration: none;}
.border-btn{color: var(--black-color); text-decoration: none; border: 1px solid var(--black-color); border-radius: 50px; padding: 10px 16px; font-size: 18px; outline: none; display: inline-block; background: var(--white-color);}
.border-btn:hover{background: var(--black-color); color: var(--white-color); text-decoration: none;}

.btn-row{padding: 30px 0 0;}
#wrapper{overflow: hidden;}
.form-control{border: 1px solid #EBEBEB; box-shadow: 0px 25px 75px 0px #0607141A; color: var(--black-color); height: 43px; background: var(--white-color);}
.form-control:focus{border: 1px solid #EBEBEB; box-shadow: none;}
.form-group{padding-top: 20px;}
.form-group .yellow-btn{margin: 20px 0 0 0;}
.modal-content{border-radius: 0;}
.modal-header{padding: 40px 15px 0; border: none;}
.modal-header .modal-title{font-weight: 400; font-size: 24px;}
.modal-body{padding: 20px 15px 0;}
.modal-footer{border: none; padding: 40px 15px; display: block;}

/*=== Header ===*/
header{background: #1C1C23;}
.bg-body-tertiary{background: none !important; padding: 15px 0;}
.navbar-nav li{padding: 15px 0; width: 100%; text-align: center;}
.navbar-nav li a{color: var(--white-color); text-decoration: none;}
.navbar-nav li a:hover, .navbar-nav li a.active{color: var(--yellow-color); text-decoration: none;}
.navbar-nav li a.last-btn{color: var(--black-color); background: var(--yellow-color); border-radius: 50px; padding: 10px 16px;}
.navbar-nav li a.last-btn:hover{background: var(--black-color); color: var(--yellow-color);}
#header-menu-btn {border: none; outline: none; padding: 25px 0 0 0; margin-right: 20px; position: absolute; z-index: 1000; width: 35px; right: 0; top: 5px; box-shadow: none;}
#header-menu-btn .icon-bar {background: #fff; transform: rotate(0deg) translate(0px, 0px); transition: ease all 0.2s; display: block; width: 35px; height: 4px; border-radius: 13px;}
#header-menu-btn .icon-bar + .icon-bar {margin-top: 6px;}
#header-menu-btn .icon-bar:nth-child(2) {width: 35px; transition: ease all 0.2s;}
#header-menu-btn:hover > .icon-bar:nth-child(2) {width: 35px; transition: ease all 0.2s;}
#header-menu-btn:active > .icon-bar:nth-child(2), #header-menu-btn.nice-select.open > .icon-bar:nth-child(2) {width: 35px; transition: ease all 0.2s;}
#header-menu-btn:not(.collapsed) .icon-bar:nth-child(1) {transform: rotate(45deg) translate(8px, 7px); transition: ease all 0.2s;}
#header-menu-btn:not(.collapsed) .icon-bar:nth-child(2) {opacity: 0; transition: ease all 0.2s;}
#header-menu-btn:not(.collapsed) .icon-bar:nth-child(3) {transform: rotate(-45deg) translate(8px, -6px); transition: ease all 0.2s;}
/*=== Header End ===*/

/*=== Banner ===*/
#banner{ background: url("../images/banner.gif") no-repeat left top/cover; position: relative; text-align: center;}
#banner:after{}
#banner:after{width: 100%; float: left; position: absolute; background: rgba(28,28,35,.85); left: 0; top: 0; height: 100%; content: "";}
#banner:before{position: absolute; left: 0; top: 146px; content: ""; width: 93px; height: 219px; background: url("../images/shape-2.png") no-repeat left bottom; z-index: 1;}

.banner-container{padding: 70px 0; position: relative; z-index: 1;}
.banner-left{width: 100%; float: left;  color: var(--white-color); }
.banner-left h1{color: var(--white-color) !important;}
.banner-left h1 br{display: none;}
.banner-left h1 span{color: var(--yellow-color);}
.banner-left p{font-weight: 600; padding: 10px 0 0;}
.banner-btn{padding: 30px 0 0 0;}
.banner-btn a{color: var(--black-color); font-size: 18px; padding: 10px 16px; border-radius: 80px; text-decoration: none; display: inline-block; margin: 0 5px;}
.banner-btn a.banner-yellow-btn{background: var(--yellow-color); margin: 0 15px 0 0;}
.banner-btn a.banner-white-btn{background: var(--white-color);}
.banner-btn a:hover{color: var(--white-color); background: var(--black-color);}
.banner-img{padding: 30px 0 0 0; width: 100%;}
/*=== Banner End ===*/

/*=== Middle ===*/
.middle-top{background: url("../images/about-bg.jpg") no-repeat left top/cover; padding: 60px 0; color: var(--white-color);}
.middle-top h2{color: var(--white-color); text-align: center;}
.middle-top .data-row{padding: 40px 0 0 0;}
.middle-top img{border-radius: 25px;}
.middle-top p{padding: 20px 0 0 0;}
.why-choose-section{padding: 60px 0 60px; background: url("../images/why-choose-bg.jpg") no-repeat right bottom/cover;}
.why-choose-section h3{text-align: center;}
.why-choose-box{padding: 50px 0 0 0;}
.why-choose-box .icon img{max-height: 74px;}
.why-choose-box .caption{font-size: 18px; font-weight: 600; color: var(--black-color); padding: 5px 0 0 0;}
.why-choose-box  p{padding: 15px 0 0 0;}
.works-section{background: url("../images/works-bg.gif") no-repeat left top/cover; padding: 60px 0 73px; color: var(--white-color); position: relative;}
.works-section:after{width: 100%; float: left; position: absolute; background: rgba(28,28,35,.85); left: 0; top: 0; height: 100%; content: "";}
.works-section:before{position: absolute; left: 0; bottom: 16px; content: ""; width: 73px; height: 219px; background: url("../images/shape.png") no-repeat left bottom; z-index: 1;}

.works-section .container{max-width: 1000px; position: relative; z-index: 10;}
.works-section h3{color: var(--white-color); text-align: center;}
.works-section .data-row{padding: 40px 0 0 0;}
.works-section img{border-radius: 25px; margin-bottom: 20px !important;}
.works-step-box{padding: 10px 0 10px 36px; margin: 10px 0; position: relative;}
.works-step-box:after{width: 4px; height: 100%; position: absolute; left: 0; top: 0; background: var(--white-color); border-radius: 10px; float: left; content: "";}
.works-step-box-title{font-size: 24px; font-weight: 600; color: var(--yellow-color);}
.works-step-box p{padding: 10px 0 0 0; color: #E2E2E2;}
.expertise-section{padding: 60px 0; background: url("../images/expertise-bg.jpg") no-repeat right bottom/cover;}
.expertise-section h3{text-align: center;}
.expertise-section .data-row{padding: 10px 0 0 0;}
.expertise-box{border: 1px solid #EAEAEA; border-radius: 24px; padding: 15px; margin: 30px 0 0 0; background: var(--white-color)}
.expertise-box-img{max-width: 100px;}
.expertise-box-img img{border-radius: 25px;}
.expertise-box-right{width: -webkit-calc(100% - 115px) !important; width: -moz-calc(100% - 115px) !important; width: calc(100% - 115px) !important; float: right;}
.expertise-box-title{font-weight: 600;}
.expertise-box p{padding: 16px 0 0 0;}
.different-section{background: url("../images/different-bg.jpg") no-repeat left top/cover; padding: 60px 0 60px; color: var(--white-color);}
.different-section h3{text-align: center; color: var(--white-color);}
.different-box{padding: 50px 0 0 0;}
.different-box-icon img{max-height: 74px;}
.different-box-caption{font-size: 18px; font-weight: 600; padding: 16px 0;}
.different-box p{color: #E2E2E2;}
.contact-section{padding: 60px 0;}
.contact-section .container{max-width: 960px;}
.contact-section h3{text-align: center;}
.contact-section .data-row{padding: 20px 0 0 0;}
.address-row{font-size: 20px; text-align: center;}
.address-row p{padding: 10px 0 20px; margin: 0;}
.address-row a{color: var(--main-color); text-decoration: none;}
/*=== Middle End ===*/

/*=== Footer ===*/
footer{background: var(--black-color); padding: 40px 0; color: var(--white-color);}
/*=== Footer End ===*/


@media screen and (min-width: 768px){
	.modal-dialog{width: 584px;}
	.modal-header{padding: 40px 40px 0;}
	.modal-body{padding: 20px 40px 0;}
	.modal-footer{padding: 40px;}

	/*=== Middle ===*/
	.expertise-box{padding: 24px;}
	.expertise-box-img{max-width: 167px;}
	.expertise-box-right{width: -webkit-calc(100% - 207px) !important; width: -moz-calc(100% - 207px) !important; width: calc(100% - 207px) !important;}
	/*=== Middle End ===*/
	
}

@media screen and (min-width: 992px){
	h1, h2, h3, h4{font-size: 40px; line-height: 56px;}
	
	/*=== Header ===*/
	.navbar-nav li{padding: 0 0 0 25px; width: auto;}
	/*=== Header End ===*/
	
	/*=== Banner ===*/
	#banner{text-align: left;}
	.banner-container{padding: 100px 0;}
	.banner-left{width: 60%; padding: 110px 0 0 0; max-width: 600px;}
	.banner-left h1 br{display: inherit;}
	.banner-img{width: 40%; padding: 0;}
	.banner-btn a{margin: 0;}
	.banner-btn a.banner-yellow-btn{margin: 0 15px 0 0;}
	/*=== Banner End ===*/
	
	/*=== Middle ===*/
	.middle-top{padding: 100px 0;}
	.why-choose-section{padding: 100px 0 158px;}
	.why-choose-section .data-row{padding: 50px 0 0 0;}
	.works-step-box p{padding: 16px 0 0 0;}
	.works-section{padding: 100px 0 73px;}
	.expertise-section{padding: 100px 0;}
	.different-section{padding: 100px 0 158px;}
	.contact-section{padding: 100px 0;}
	/*=== Middle End ===*/
}

@media screen and (min-width: 1200px){
	.btn-row{padding: 40px 0 0;}
	
	/*=== Header ===*/
	/*=== Header End ===*/
	
	/*=== Banner ===*/
	#banner{height: 894px;}
	.banner-container{position: relative; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%);}
	.banner-left{width: auto; padding: 120px 0 0 0}
	.banner-img{width: auto;}
	/*=== Banner End ===*/
	
	/*=== Middle ===*/
	.middle-top-content p{padding: 33px 0 0 0;}
	.works-section  .row{margin: 0 -50px;}
	.works-section div[class*='col-']{padding: 0 50px;}
	.different-section .data-row{padding: 50px 0 0 0;}
	/*=== Middle End ===*/
}