*, *:aftre, *:before { margin: 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; }
body { margin: 0; padding: 0; font-family: 'Roboto', sans-serif; overflow: hidden;}
img{max-width:100%;}
a{text-decoration:none;}
a:hover{text-decoration:none;}

.header-wrap { position: absolute; top: 0; left: 0; right: 0; width: 100%; z-index: 5; transition: 0.4s; }
.header-wrap .navbar-brand { float: left; height: auto; padding: 20px 0 20px 20px; font-size: 30px; line-height: 35px; color: #FFF; font-weight: 800; }
.header-wrap .navbar { border-radius: 0; min-height: auto; margin-bottom: 0; border: none; padding: 10px 0px;}
.header-wrap .navbar-nav>li>a { color: #fff; font-size: 18px; padding: 45px 20px 0 20px; font-weight: 500; letter-spacing: 2px; position: relative; }
.header-wrap .navbar-nav>li>a:after { content: '\f015'; position: absolute; top: 12px; left: 0; right: 0; font-family: fontawesome; font-size: 30px; color: #fff; margin: 0 auto; text-align: center; }
.header-wrap .navbar-nav>li:nth-child(2)>a:after { content: '\f2be'; }
.header-wrap .navbar-nav>li:nth-child(3)>a:after { content: '\f069'; }
.header-wrap .navbar-nav>li:nth-child(4)>a:after { content: '\f06e'; }
.header-wrap .navbar-nav>li:nth-child(5)>a:after { content: '\f0e0'; }
.header-wrap .nav>li>a:focus, .nav>li>a:hover { text-decoration: none; color: #fdda64; background-color:transparent;}
.header-wrap .navbar-nav>li>a:hover:after{color: #fdda64;}
.header-wrap.fixed { position: fixed; background: #fff; border-bottom: 3px solid #ffd959; transition: 0.4s; }
.header-wrap.fixed .navbar-nav>li>a { color: #ff9600; }
.header-wrap.fixed .navbar-brand { color: #ff9600; }
.header-wrap.fixed .navbar { padding: 0; }
.header-wrap.fixed .navbar-nav>li>a:after { color: #ff9600; }



.hero-banner { background-size: cover; background-position: center; background-repeat: no-repeat; padding: 0; height: 103vh; display: flex; align-items: center; position: relative; z-index:10px; overflow:hidden; }
.hero-banner h1 { font-family: 'Amaranth', sans-serif; font-size: 46px; font-weight: 900; color: #fff; margin: 0; }
.hero-banner .container .row { display: flex; align-items: center; justify-content: center; }
.hero-banner .left-banner a { border: 1px solid #fff; padding: 8px 24px 8px 43px; display: inline-block; border-radius: 30px; font-size: 20px; color: #fff; margin: 40px 0 0 0; position: relative; z-index: 1; }
.hero-banner .left-banner a:after{content:'\f019'; position: absolute; top: 12px; left: 23px; font-size: 16px; font-family: fontawesome; color: #fff;}
.hero-banner .left-banner a:hover{color:#fe5900;}
.hero-banner .left-banner a:hover:after{color:#fe5900;}
.hero-banner .btn2::before { content: ""; position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; z-index: -1; background-color: #000; -webkit-transform: scaleY(.3); transform: scaleY(.3); opacity: 0; transition: all .3s }
.hero-banner .btn2:hover { color: #6098FF; }
.hero-banner .btn2:hover::before { opacity: 1; border-radius:30px; background-color: #fff; -webkit-transform: scaleY(1); transform: scaleY(1); transition: -webkit-transform .6s cubic-bezier(.08, .35, .13, 1.02), opacity .4s; transition: transform .6s cubic-bezier(.08, .35, .13, 1.02), opacity }
.hero-banner:after { content: ''; display: block; height: 80px; background: url(../images/rutvik-developer-banner.png) bottom no-repeat; background-size: 100% 100%; position: absolute; bottom: -3px; left: 0; right: 0; }

.about-wrap { padding: 80px 0px; overflow: hidden;}
.about-wrap .about-left h2 { margin: 0; font-size: 50px; line-height: 60px; font-weight: 900; }
.about-wrap .about-left h2 span{color:#ff4200;}
.about-wrap .about-left p { margin: 0; font-size: 18px; line-height: 25px; padding: 20px 20px 20px 0px; }
.about-wrap .container { display: flex; align-items: center; }
.about-wrap .about-left a {position: relative; z-index:1; transition:0.4s; border: 1px solid #ff4200; color: #ff4200; padding: 10px 15px; border-radius: 30px; font-size: 18px; margin: 10px 0 0 0; display: inline-block;}
.about-wrap .about-left a:hover{color:#fff; transition:0.4s;}
.about-wrap .about-left .btn3::before { content: ""; position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; z-index: -1; background-color: #000; -webkit-transform: scaleX(.3); transform: scaleX(.3); opacity: 0; transition: all .3s }
.about-wrap .about-left .btn3:hover::before { opacity: 1; background-color: #ff4200; border-radius:30px; -webkit-transform: scaleX(1); transform: scaleX(1); transition: -webkit-transform .6s cubic-bezier(.08, .35, .13, 1.02), opacity .4s; transition: transform .6s cubic-bezier(.08, .35, .13, 1.02), opacity }

.skill-wrap { padding: 80px 0px; background-position: center; background-repeat: no-repeat; background-size: cover; overflow: hidden;}
.skill-wrap .skill-head { text-align: center;    padding: 0 0 70px 0; }
.skill-wrap .skill-head h2 { color: #fff; margin: 0; font-size: 40px; line-height: 50px; font-weight: 800; padding: 0px 0 10px 0; }
.skill-wrap .skill-head p { color: #fff; font-size: 18px; font-weight: 500; margin: 0; }
.skill-wrap .skills { background-color: transparent; border: 1px solid #ddd; border-radius: 15px; width: 100%; height: 17px; position: relative; margin: 25px 0px 40px 0px; display: inline-block; }
.skill-wrap .title-bar { position: absolute; top: -30px; margin: 0px; }
.skill-wrap .skills span { float: right; margin-top: -32px; margin-right: 5px; color: #fff; font-size: 18px; font-weight: 500; }
.skill-wrap .skillbar { background-color: #e2e2e2; width: 0px; height: 15px; border-radius: 15px; }
.skill-wrap .skills .title-bar h5 { color: #fff; font-size: 18px; font-weight: 500; margin: 0; }

.work-wrap{padding: 80px 0px; overflow:hidden;}
.work-wrap .work-title h2{color: #ff4200; margin: 0; font-size: 40px; line-height: 50px; font-weight: 800; padding: 0px 0 60px 0; text-align: center;}
.work-wrap .work-box-wrap .project-img { position: relative; margin: 0 0 25px 0;  height:185px; overflow: hidden; cursor: pointer; }
.work-wrap .work-box-wrap .project-img img{height:185px; -webkit-border-radius:12px; -moz-border-radius:12px; border-radius:12px}
.work-wrap .work-box-wrap .project-img .img-overlay { background: rgba(0, 0, 0,0.8); position: absolute; margin: auto; width: 0px; height: 0px; top: 0; right: 0; bottom: 0; left: 0; opacity: 0; -webkit-border-radius:12px; -moz-border-radius:12px; border-radius:12px; -webkit-transition: 1s ease; transition: 1s ease; }
.work-wrap .work-box-wrap .project-img:hover .img-overlay { opacity: 1; width: 100%; height: 100%; }
.work-wrap .work-box-wrap .img-overlay span { color: #fff; font-size:18px; text-align: center; position: absolute; margin: auto; height:auto; left:50%; top:50%; transform: translate(-50%, -50%); right: 0; bottom: 0; opacity: 0; }
.work-wrap .work-box-wrap .project-img:hover .img-overlay span { opacity: 1; -webkit-transition: 3.3s ease; transition: 3.3s ease; }
.work-wrap .work-box-wrap .project-img:hover .img-overlay span i.fa.fa-link { border-radius: 50%; height: 35px; width: 35px; border: 1px solid #fff; display: flex; align-items: center; justify-content: center; margin: 0 auto; }

.contact-us-wrap {background-attachment: fixed; background-position: center; background-size: cover; background-repeat: no-repeat; padding: 80px 0 20px 0; overflow:hidden;}
.contact-us-wrap .contact-title h2 { color: #fff; margin: 0; font-size: 40px; line-height: 50px; font-weight: 800; padding: 0px 0 60px 0; text-align: center; }
.contact-us-wrap .contact-detail .contact-info .contact-icon i { font-size: 30px; width: 70px; text-align: center; height: 70px; line-height: 70px; color: #ff4200; background: #fff; border-radius: 100% 50% 50% 100% / 75% 69% 69% 75%; box-shadow: 2px 2px 20px rgba(0, 0, 0, .1); }
.contact-us-wrap .contact-detail .contact-info { width: 100%; float: left; }
.contact-us-wrap .contact-detail .contact-info .contact-icon { width: 25%; float: left; }
.contact-us-wrap .contact-detail .contact-info .contact-text { width: 75%; float: left; }
.contact-us-wrap .contact-detail .contact-info .contact-text h2 { font-size: 25px; font-weight: 600; color: #fff; margin: 0 0 10px 0; }
.contact-us-wrap .contact-detail .contact-info.d-flex { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; justify-content: center; align-items: center; }
.contact-us-wrap .contact-detail .contact-info .contact-text a {display: inline-block; margin-bottom: 0; color: #fff; font-size: 18px; line-height: 25px; }
.contact-us-wrap .contact-detail .contact-info .contact-text a:hover {color: #c33300; text-decoration: none;}


.contact-us-wrap .contact-detail { padding: 0 0 70px 0; }
.contact-us-wrap .contact-social { width: 100%; float: left; position: relative;}
.contact-us-wrap .contact-social:after { content: ''; position: absolute; top: 90px; right: 0; width: 180px; height: 176px; background-image: url(../images/msg.png); background-position: center; background-repeat: no-repeat; background-size: cover; }
.contact-us-wrap .contact-bottom { padding: 0 0 50px 0;}
.contact-us-wrap .contact-bottom .contact-social .social-title h3 {margin:0; padding: 0 0 20px 0; font-size: 36px; color: #fff; line-height: 38px; }
.contact-us-wrap .contact-bottom .contact-social .social-icon ul { padding: 0; margin: 0; }
.contact-us-wrap .contact-bottom .contact-social .social-icon ul li { list-style: none; padding: 10px 0px 10px 0px; width: 100%; float: left; }
.contact-us-wrap .contact-bottom .contact-social .social-icon ul li a { color: #fff; font-size: 18px; line-height: 25px; }
.contact-us-wrap .contact-bottom .contact-social .social-icon ul li a i { height: 45px; width: 45px; vertical-align: middle; border-radius: 50%; text-align: center; line-height: 45px; border: 1px solid #fff; margin: 0 15px 0 0px; }
.contact-us-wrap .contact-bottom .contact-social .social-icon ul li a i:hover { background: #fff; color: #ff4200; }
.contact-us-wrap .contact-bottom .contact-social .social-icon ul li a:hover { color: #ff9600; }

.contact-us-wrap .contact-bottom .form-title h3 { padding: 0 0 30px 0; font-size: 36px; color: #fff; line-height: 38px; margin: 0; }
.contact-us-wrap .contact-bottom form .form-group label{color: #fff;}
.contact-us-wrap .contact-bottom form .form-group .w-box { margin: 0 0 25px 0;}
.contact-us-wrap .contact-bottom form .form-group .form-control { background-color: rgba(255, 255, 255, 0.4); border: 0; box-shadow: none; border-radius: 0; color: #fff; padding: .5625rem .75rem; transition: .3s ease; outline: none; resize:none; }
.contact-us-wrap .contact-bottom form .form-group .form-send-btn span button { display: inline-block; float: right; border: 1px solid #fff; background-color: #ff4200; color: #fff; padding: 13px 50px 13px 20px; font-size: 18px; margin: 0 15px 0 0px; position: relative; transition: 0.8s ease; }
.contact-us-wrap .contact-bottom form .form-group .form-send-btn span button:hover{border: 1px solid #ff4200; background-color: #fff; color: #ff4200;}
.contact-us-wrap .contact-bottom form .form-group .form-send-btn span button:after { content: '\f178'; position: absolute; top: 14px; right: 22px; font-size: 18px; font-family: fontawesome; }


.contact-us-wrap .footer-wrap { padding: 20px 0 0 0; background-position: center; background-size: cover; background-repeat: no-repeat; border-top: 2px solid #ff7e00; }
.contact-us-wrap .footer-wrap p { margin: 0; font-size: 16px; color: #fff; font-weight: 500; }

/* Loader Css Strat*/
#preloader { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: #fff; z-index: 99; }
#status { width: 200px; height: 200px; position: absolute; left: 50%; top: 50%; background-image: url(https://raw.githubusercontent.com/niklausgerber/PreLoadMe/master/img/status.gif); background-repeat: no-repeat; background-position: center; margin: -100px 0 0 -100px; }
/* Loader Css Over*/

/* Bottom TO top Css Start */
#buttontop { display: inline-block; background-color: #FF9800; width: 50px; height: 50px; text-align: center; border-radius: 8px; border: 2px solid #fff; position: fixed; bottom: 30px; right: 30px; transition: background-color .3s, opacity .5s, visibility .5s; opacity: 0; visibility: hidden; z-index: 1000; }
#buttontop::after { content: "\f077"; font-family: FontAwesome; font-weight: normal; font-style: normal; font-size: 26px; line-height: 40px; color: #fff; }
#buttontop:hover { cursor: pointer; background-color: #333; }
#buttontop:active { background-color: #555; }
#buttontop.show { opacity: 1; visibility: visible; }
/* Bottom TO top Css Over */


.hero-banner .scroll-icon { bottom: 60px; display: inline-block; position: absolute; text-align: center; width: 100%; z-index: 1; }
.hero-banner .scroll-icon a { color: #fff; font-size: 30px; padding: 15px; }


/* ----------------------------------------------
 * Generated by Animista on 2019-1-6 20:34:24
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation bounce-top
 * ----------------------------------------
 */
 .bounce-top { -webkit-animation: bounce-top 3s infinite both; animation: bounce-top 3s infinite both; }
@-webkit-keyframes bounce-top {
0% { -webkit-transform: translateY(-45px); transform: translateY(-45px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 1; }
24% { opacity: 1; }
40% { -webkit-transform: translateY(-24px); transform: translateY(-24px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; }
65% { -webkit-transform: translateY(-12px); transform: translateY(-12px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; }
82% { -webkit-transform: translateY(-6px); transform: translateY(-6px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; }
93% { -webkit-transform: translateY(-4px); transform: translateY(-4px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; }
25%, 55%, 75%, 87% { -webkit-transform: translateY(0px); transform: translateY(0px); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; }
100% { -webkit-transform: translateY(0px); transform: translateY(0px); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; opacity: 1; }
}
@keyframes bounce-top {
0% { -webkit-transform: translateY(-45px); transform: translateY(-45px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 1; }
24% { opacity: 1; }
40% { -webkit-transform: translateY(-24px); transform: translateY(-24px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; }
65% { -webkit-transform: translateY(-12px); transform: translateY(-12px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; }
82% { -webkit-transform: translateY(-6px); transform: translateY(-6px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; }
93% { -webkit-transform: translateY(-4px); transform: translateY(-4px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; }
25%, 55%, 75%, 87% { -webkit-transform: translateY(0px); transform: translateY(0px); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; }
100% { -webkit-transform: translateY(0px); transform: translateY(0px); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; opacity: 1; }
}

.bounce-in-bottom { -webkit-animation: bounce-in-bottom 4s infinite both; animation: bounce-in-bottom 4s infinite both; }
@-webkit-keyframes bounce-in-bottom {
0% { -webkit-transform: translateY(100px); transform: translateY(100px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; }
38% { -webkit-transform: translateY(0); transform: translateY(0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; opacity: 1; }
55% { -webkit-transform: translateY(50px); transform: translateY(50px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; }
72% { -webkit-transform: translateY(0); transform: translateY(0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; }
81% { -webkit-transform: translateY(20px); transform: translateY(20px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; }
90% { -webkit-transform: translateY(0); transform: translateY(0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; }
95% { -webkit-transform: translateY(8px); transform: translateY(8px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; }
100% { -webkit-transform: translateY(0); transform: translateY(0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; }
}
@keyframes bounce-in-bottom {
0% { -webkit-transform: translateY(100px); transform: translateY(100px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; }
38% { -webkit-transform: translateY(0); transform: translateY(0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; opacity: 1; }
55% { -webkit-transform: translateY(50px); transform: translateY(50px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; }
72% { -webkit-transform: translateY(0); transform: translateY(0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; }
81% { -webkit-transform: translateY(20px); transform: translateY(20px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; }
90% { -webkit-transform: translateY(0); transform: translateY(0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; }
95% { -webkit-transform: translateY(5px); transform: translateY(5px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; }
100% { -webkit-transform: translateY(0); transform: translateY(0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; }
}


/* Media Query In Leptop */
@media screen and (max-width: 1199px) {
	.about-wrap .about-left h2 { font-size: 40px; line-height: 50px; }
	.about-wrap .about-left p { font-size: 16px; line-height: 22px; padding: 15px 15px 15px 0px; }
	.about-wrap .about-left a { margin: 0px 0 0 0; }
	.skill-wrap .skill-head { padding: 0 0 50px 0; }
	.about-wrap { padding: 60px 0px; }
	.skill-wrap { padding: 60px 0px 40px 0; }
	.work-wrap { padding: 60px 0px; }
	.work-wrap .work-title h2 { padding: 0px 0 50px 0; }
	.work-wrap .work-box-wrap .project-img img { height: 160px; }
	.work-wrap .work-box-wrap .project-img:hover .img-overlay { height: 160px; top: -24px; }
	.work-wrap .work-box-wrap .img-overlay span { font-size: 14px; }
	.work-wrap .work-box-wrap .project-img{margin: 0 0 5px 0;}
	.skill-wrap .skills { margin: 25px 0px 30px 0px; }
	.skill-wrap .skillbar { height: 12px; }
	.skill-wrap .skills { height: 14px; }
	.skill-wrap .skills .title-bar { top: -25px; }
	.skill-wrap .skills .title-bar h5 { font-size: 16px; }
	.skill-wrap .skills span { margin-top: -25px; font-size: 16px; }
	.contact-us-wrap { padding: 60px 0 20px 0; }
	.contact-us-wrap .contact-bottom form .form-group .form-send-btn span button { padding: 10px 40px 10px 15px; }
	.contact-us-wrap .contact-bottom form .form-group .form-send-btn span button:after { top: 11px; right: 13px; }
	.contact-us-wrap .contact-title h2 { padding: 0px 0 40px 0; }
	.contact-us-wrap .contact-detail .contact-info .contact-text { padding: 0 0 0 5px; }
	.contact-us-wrap .contact-detail .contact-info .contact-text h2 { font-size: 22px; margin: 0 0 5px 0; }
	.contact-us-wrap .contact-detail .contact-info .contact-text a { font-size: 16px; line-height: 22px; }
	.contact-us-wrap .contact-detail { padding: 0 0 40px 0; }
	.contact-us-wrap .contact-bottom .contact-social .social-icon ul li a i { height: 40px; width: 40px; line-height: 40px; }
	.contact-us-wrap .contact-bottom .contact-social .social-title h3 { padding: 0 0 15px 0; font-size: 32px; line-height: 32px; }
	.contact-us-wrap .contact-bottom .form-title h3 { font-size: 32px; line-height: 32px; padding: 0 0 20px 0; }
	.contact-us-wrap .contact-social:after { width: 130px; height: 127px; }
	.header-wrap .navbar-nav>li>a { font-size: 16px; padding: 35px 20px 0 20px; }
	.header-wrap .navbar-nav>li>a:after { top: 10px; font-size: 25px; }
	.header-wrap .navbar-brand { padding: 12px 0 12px 20px; font-size: 30px; line-height: 35px; }
}


@media screen and (max-width:991px) {
	.header-wrap .navbar-brand { padding: 10px 0 10px 20px; }
	.header-wrap .navbar-nav>li>a { font-size: 14px; padding: 30px 10px 0 10px; }
	.header-wrap .navbar-nav>li>a:after { top: 8px; font-size: 22px; }
	.hero-banner h1 { font-size: 35px; }
	.hero-banner .left-banner a { padding: 6px 20px 6px 35px; font-size: 18px; margin: 30px 0 0 0; }
	.hero-banner .left-banner a:after { top: 8px; left: 17px; font-size: 15px; }
	.about-wrap { padding: 50px 0px 30px 0; }
	.about-wrap .about-left h2 { font-size: 23px; line-height: 30px; }
	.about-wrap .about-left p { font-size: 14px; line-height: 20px; padding: 10px 0px 10px 0px; }
	.about-wrap .about-left a { padding: 8px 12px; font-size: 16px; }
	.skill-wrap { padding: 50px 0px 20px 0; }
	.skill-wrap .skill-head h2 { font-size: 32px; padding: 0; line-height: 40px; }
	.skill-wrap .skill-head p { font-size: 14px; font-weight: 400; }
	.skill-wrap .skill-head { padding: 0 0 30px 0; }
	.skill-wrap .skills { margin: 18px 0px 18px 0px; }
	.skill-wrap .skills .title-bar h5 { font-size: 14px; }
	.skill-wrap .skills span { font-size: 14px; }
	.skill-wrap .skillbar { height: 10px; }
	.skill-wrap .skills { height: 12px; }
	.skill-wrap .skills .title-bar { top: -18px; }
	.skill-wrap .skills span { margin-top: -20px; }
	.work-wrap { padding: 50px 0px 20px 0; }
	.work-wrap .work-title h2 { font-size: 32px; line-height: 40px; padding: 0px 0 30px 0; }
	.contact-us-wrap { padding: 50px 0 20px 0; }
	.contact-us-wrap .contact-bottom { padding: 0 0 25px 0; }
	.contact-us-wrap .contact-detail .contact-info { width: 33.33%; float: left; }
	.contact-us-wrap .contact-detail .contact-info .contact-icon { width: 100%; float: left; padding: 0 0 10px 0; text-align: center; }
	.contact-us-wrap .contact-detail .contact-info .contact-text { width: 100%; float: left; padding: 0; text-align: center; }
	.contact-us-wrap .contact-detail .contact-info .contact-text a { display: block; }
	.contact-us-wrap .contact-title h2 { padding: 0px 0 25px 0; font-size: 32px; line-height: 40px; }
	.contact-us-wrap .contact-detail .contact-info .contact-icon i { font-size: 25px; width: 65px; height: 65px; line-height: 65px; }
	.contact-us-wrap .contact-bottom .contact-social .social-title h3 { padding: 0 0 10px 0; font-size: 28px; line-height: 30px; text-align: center; }
	.contact-us-wrap .contact-bottom .contact-social .social-icon ul li { width: 20%; padding: 5px; float: left; text-align: center; }
	.contact-us-wrap .contact-bottom .contact-social .social-icon ul li a { font-size: 16px; display: inline-block; }
	.contact-us-wrap .contact-bottom .contact-social .social-icon ul li a i { margin: 0 5px 0 0px; height: 35px; width: 35px; line-height: 35px; }
	.contact-us-wrap .contact-social { padding: 0 0 25px 0; }
	.contact-us-wrap .contact-social:after { display: none; }
	.contact-us-wrap .contact-bottom .form-title h3 { padding: 0 0 10px 0; font-size: 28px; line-height: 30px; }
	.contact-us-wrap .contact-bottom .col-md-4.social-width { width: 100%; float: left; }
	.contact-us-wrap .contact-bottom .col-md-8.form-width { width: 100%; float: left; }
}

@media screen and (max-width:767px) {
	.header-wrap .navbar-header .navbar-toggle { border: 2px solid #fff; }
	.header-wrap .navbar-header .navbar-toggle .icon-bar { background-color: #fff; }
	.header-wrap .navbar-nav { margin: 0px -15px; background: #ff4f01; border: 2px solid #fff; }
	.header-wrap .navbar-nav>li>a { padding: 12px 0 12px 50px; }
	.header-wrap .navbar-nav>li>a:after { top: 10px; left: 15px; right: unset; margin: unset; }
	.header-wrap.fixed { background: #ff4f01; }
	.header-wrap.fixed .navbar-nav>li>a { color: #fff; }
	.header-wrap.fixed .navbar-nav>li>a:after { color: #fff; }
	.header-wrap.fixed .navbar-brand { color: #fff; }
	.hero-banner .container .row { flex-wrap: wrap; }
	.hero-banner { height: auto; display: block; flex-wrap: wrap; padding: 100px 0; }
	.hero-banner .left-banner h1 { font-size: 30px; }
	.hero-banner .left-banner { width: 100%; float: left; text-align: center; min-width: 320px; max-width: 320px; }
	.hero-banner .right-banner { width: 100%; float: left; padding: 15px; max-width: 320px; min-width: 320px; }
	.hero-banner .left-banner a {
    font-size: 16px;
    margin: 15px 0 0 0;
}
.hero-banner .left-banner a:after {
    top: 7px;
    left: 17px;
    font-size: 14px;
}
	.about-wrap .container { display: block; }
	.about-wrap { text-align: center; }
	.about-wrap .about-left p { text-align: justify; }
	.about-wrap .about-right-img img { max-width: 250px; min-width: 250px; width: 100%; padding: 15px; }
	.work-wrap .work-box-wrap .project-img img { height: 180px; max-width: 320px; width: 100%; }
	.work-wrap .work-box-wrap .project-img { margin: 0 0 10px 0; float: none; text-align: center; }
	.work-wrap .work-box-wrap .project-img .img-overlay { display: none; }
	.contact-us-wrap .contact-bottom .contact-social .social-icon ul li {
    width: 50%;
    padding: 5px;
    float: left;
    text-align: left;
}
.contact-us-wrap .contact-bottom .contact-social .social-title h3{text-align: left;}
.contact-us-wrap .contact-bottom form .form-group .w-box {
    margin: 0 0 10px 0;
}
.contact-us-wrap .contact-bottom form .form-group .form-send-btn span button {
    padding: 8px 35px 8px 12px;
    font-size: 16px;
}
.contact-us-wrap .contact-bottom form .form-group .form-send-btn span button:after{    font-size: 16px; top: 8px;
    right: 12px;}
    .contact-us-wrap .footer-wrap p{    font-size: 14px;     font-weight: 400;
    text-align: center;}
    .work-wrap .work-title h2{    padding: 0px 0 15px 0;}
    .contact-us-wrap .contact-title h2 {
    padding: 0px 0 15px 0;}
    .skill-wrap .skill-head {
    padding: 0 0 20px 0;
}

.contact-us-wrap .contact-detail .contact-info {
    width: 100%;
    float: left;
    padding: 0 0 10px 0;
}
.contact-us-wrap .contact-detail .contact-info .contact-text h2 {
    font-size: 20px;
}
.contact-us-wrap .contact-detail .contact-info .contact-icon i {
    font-size: 20px;
    width: 45px;
    height: 45px;
    line-height: 45px;
}
.contact-us-wrap .contact-detail .contact-info .contact-icon {
    width: 20%;
    float: left;
    text-align: center;
}
.contact-us-wrap .contact-detail .contact-info .contact-text {
    width: 80%;
    float: left;
    padding: 0;
    text-align: left;
}








}