/* Body 
------------------------------------- */
body {
	background: #f8fafb;
    font-family: 'Poppins', sans-serif;
}

html,body {
      width: 100%;
     overflow-x: hidden;
  }

.post-masonry img {
    width: 100%;
    display: block;
}

/* Typography
------------------------------------- */
h1,h2,h3,h4,h5 {
  /*font-weight: bold;*/
}

h1 {
  /*font-size: 62px;*/
  /*line-height: 72px;*/
}

h2 {
  color: #fff;
  /*font-size: 26px;*/
  /*line-height: 42px;*/
  /*letter-spacing: normal;*/
  /*padding-bottom: 12px;*/
}

h3 {
/*  color: #ffa400;*/
  font-size: 16px;
  /*letter-spacing: 26px;*/
  /*letter-spacing: normal;*/
}

h5 {
  color: #ffa400;
  line-height: 28px;
  letter-spacing: normal;
}

/*p {
  font-size: 16px;
  letter-spacing: 0.9px;
  line-height: 32px;
}*/



/* All Section styles
------------------------------------- */
#testimonial, #blog, #counter, #contact {
padding-top: 80px;
padding-bottom: 80px;
}

#about h3 {
  	padding-bottom: 12px;
}

.parallax-section {
  	background-attachment: fixed !important;
  	background-size: cover !important;
}


/* navigation styles
/* ========================================== */
.navbar-default {
    background: #353b40;
    border: none;
    box-shadow: 0px 2px 8px 0px rgba(50, 50, 50, 0.04);
    margin: 0 !important;
  }
.navbar-default .navbar-brand {
font-size: 20px;
font-weight: bold;
margin: 0;
height: 76px;
line-height: 76px;
padding:0;
color: #fff;
  }
.navbar-default .navbar-brand:hover {
color: #fff;
  }
.navbar-default li {
  margin: 21px 20px;
}
.navbar-default .navbar-nav li a {
    font-weight: 600;
    color: #fff;
    font-size: 13px;
    text-transform: uppercase;
    font-family: 'Raleway', sans-serif;
    padding: 7px 6px;
}
.navbar-default .navbar-nav li a:hover {
    color: #ffa400;
  }
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
  color: #fff;
  background-color: transparent;
  outline:none;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
  color: #fff;
  background: #36a8ff;
padding: 4px 26px;
border-radius: 21px;
}
.navbar-default .navbar-nav > .active > a::before {
    width: 0;
    height: 0;
    border-left: 0px solid transparent;
    position: absolute;
    border-right: 36px solid transparent;
    left: 0px;
    border-top: 26px solid #36A8FF;
    top: 15px;
    content: '';
    z-index: -1;
}
.navbar-default .navbar-toggle {
     border: none;
     padding-top: 12px;
  }
.navbar-default .navbar-toggle .icon-bar {
    background: #ffa400;
    border-color: transparent;
  }
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus { 
  background-color: transparent;
}

/*.navbar-default li {
    margin: 28px 20px;
}*/


/* home section styles
/* ========================================== */
#home {
background:url(../images/home/home_banner2.webp);
  -webkit-background-size: cover;
  background-size: cover;
  background-position: center center;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
height: 85vh;
  text-align: center;
  position:relative;
}

#home .btn-danger {
  background: #ffa400 !important;
  margin-right: 20px;
}

#home .btn-danger:hover {
  background: #ffc400 !important;
}

#home .btn {
  background: #000000;
  border-color: transparent;
  color: #ffffff;
  font-size: 12px;
  font-weight: bold;
  padding: 14px 52px;
  margin-top: 40px;
  transition: all 0.4s ease-in-out;
}

#home .btn:hover {
  background: #ffa400;
}
.hosting_banner_img{
	
}
.banner_left_sec{
	padding-right: 85px;
}
.banner_left_sec h1{
	font-weight:300;	
	font-size: 49px;
}
.banner_left_sec span:nth-child(1){
	color:#36a8ff;
	font-weight:bold;
		text-transform:uppercase;
}
.banner_left_sec span:nth-child(2){
	color:#ffaf36;
	font-weight:bold;
	text-transform:uppercase;
}
.banner_right_sec {
    position: absolute;
    top: -87px;
    background: url(../images/right_sec_img.png) no-repeat center top;
    height: 550px;
    width: 100%;
			-webkit-animation: bounce 1.2s ease-out;
-moz-animation: bounce 800ms ease-out;
-o-animation: bounce 800ms ease-out;
animation: bounce 1.2s ease-out;
}
.banner_right_sec h4 {
    position: relative;
    top: 182px;
    font-family: "Raleway",sans-serif;
    color: rgb(51, 51, 51);
    font-size: 24px;
    padding: 5px 88px 0 101px;
    font-weight: 400;
    line-height: normal;
}
.banner_right_sec span:nth-child(1){
	color:#2b3a90;
	    font-weight: 600;
    font-size: 30px;
}
.banner_right_sec span:nth-child(2){
	color:#00a69d;
	    font-weight: 600;
    font-size: 30px;
}
.services_main_sec {
position: relative;
max-width: 376px;
width: 100%;
height: 480px;
  margin-right: auto;
  margin-left: auto;
}
.services_main_sec div {
    float: left;
    width: 250px;
    height: 158px;
    background: url(../images/mouse.png) no-repeat;
    position: absolute;
    bottom: -130px;
    right: 59px;
}
span.mouse{
position: absolute;
bottom: -90px;
left: 69px;	
}
.services_main_sec div.first {
    position: absolute;
    bottom: -40px;
    right: 2px;
    background: url(../images/service1.png) top center no-repeat;
    width: 215px;
    height: 200px;
}
.services_main_sec div.second {
    position: absolute;
    bottom: 8px;
    left: 0px;
    background: url(../images/service2.png) top center no-repeat;
    width: 160px;
    height: 130px;
}

.services_main_sec div.third {
    position: absolute;
    bottom: 110px;
    right: 48px;
    background: url(../images/service3.png) top center no-repeat;
    height: 170px;
    width: 169px;
}
.services_main_sec div.fourth {
    position: absolute;
    bottom: 40px;
    left: -3px;
    background: url(../images/service4.png) top center no-repeat;
    height: 201px;
    width: 163px;
	padding: 0 37px;
}

.services_main_sec div.fifth {
    bottom: 221px;
    position: absolute;
    right: 81px;
    background: url(../images/service5.png) top center no-repeat;
    width: 134px;
    height: 139px;
	padding: 0 29px;
}

.services_main_sec div.sixth {
    bottom: 228px;
    position: absolute;
    left: 66px;
    background: url(../images/service6.png) top center no-repeat;
    width: 93px;
    height: 128px;
    color: #fff;
}
.services_main_sec div.sixth span{
line-height: normal;
position: relative;
top: 60px;
font-size: 11px;	
}
.services_main_sec div.fifth span {
    line-height: 2px;
    position: relative;
    top: 60px;
    font-size: 12px;
    color: #fff;
}
.services_main_sec div.fourth span {
line-height: normal;
position: relative;
top: 52px;
font-size: 14px;
color: #fff;
line-height: 10px;
}
.services_main_sec div.third span {
    line-height: normal;
    position: relative;
    top: 89px;
    font-size: 15px;
    color: #fff;
    left: 0px;
}
.services_main_sec div.second span {
    line-height: normal;
    position: relative;
    top: 53px;
    font-size: 15px;
    color: #fff;
}
.services_main_sec div.first span {
    line-height: normal;
    position: relative;
    top: 90px;
    font-size: 16px;
    color: #fff;
	left: -10px;
}
.services_main_sec div.fifth img{
position: absolute;
top: 36px;	
}
.services_main_sec div.fourth img {
    position: absolute;
    top: 5px;
    left: 60px;
}
.services_main_sec div.third img {
    position: absolute;
    top: 53px;
    left: 60px;
}
.services_main_sec div.second img {
    position: absolute;
    top: 9px;
    left: 54px;
}
.services_main_sec div.first img {
    position: absolute;
    top: 46px;
    left: 79px;
}
/*What we offer CSS
/* ========================================== */
#offer {
    padding: 80px 0 80px 0;
    background: url('../images/what-we-offer.jpg') no-repeat center right;
}
#offer:nth-cild(odd) h4{
	color:#127997;
}
#offer:nth-cild(even) h4{
	color:#00a79d;
}
#offer .counter-item p{
	color:#555252;
}
#offer p{
color: #555252;
text-align: center;
font-size: 13px;
}
#offer .counter-item{
text-align:center;	
margin: 40px 0 0 0;
}
#offer h2{
text-align: center;
text-transform: uppercase;	
padding: 0;
margin: 0;
}
/*How we work CSS
/* ========================================== */
#how_we_work {
background: #322c33;
max-height: 570px;
overflow: hidden;
}
#how_we_work h2 {
    color: rgb(250, 175, 64);
    padding: 0px;
    margin: 49px 0 3px 0;
    font-size: 37px;
    letter-spacing: normal;
    text-transform: uppercase;
}
#how_we_work h4{
color: rgb(255, 255, 255);
padding: 0px;
margin: 0px;
font-size: 28px;
letter-spacing: normal;
font-weight: 300;	
}
.wire_frame{
padding: 9% 0px 5% 0%;
  margin: auto;
}
#how_we_work p{
color: rgb(146, 146, 146);
line-height: normal;
font-size: 12px;	
}
#how_we_work p {
  padding: 1rem;
  margin: auto;
}
.how_work_right_sec {
    padding: 0 3%;
}
/*our services CSS
/* ========================================== */
#our_services{
padding:80px 0;	
}
.left_sec_services span {
    position: relative;
    background: #faaf40;
    height: 77px;
    width: 258px;
    /*display: inline-block;*/
    text-align: center;
    border-radius: 68px 68px 0 68px;
    color: #fff;
    font-size: 20px;
    font-weight: 500;
	padding: 10px 8px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.left_sec_services h6{
padding: 0px;
margin: 0px 13px 0px 0px;
text-align: center;
margin-left: 50px;	
}
.left_sec_services span::after {
    content: '';
    position: absolute;
	background:url(../images/service_after_img.png) no-repeat;
    bottom: -30px;
    right: 0px;
    width: 36px;
    height: 31px;
}
.left_sec_services{
text-align:right;	
padding:0;
}
.right_sec_services{
text-align:left;
  padding: 0;
}
.right_sec_services span {
    position: relative;
    background: #e5e5e5;
    height: 77px;
    width: 258px;
    /*display: inline-block;*/
    text-align: center;
    border-radius: 68px 68px 68px 0;
    font-size: 20px;
  line-height: 1;
  display: inline-flex;
  justify-content: center;
  align-items: center;
    color: #394b50;
    font-weight: 500;
    padding: 11px 15px;
}
.right_sec_services span::after {
    content: '';
    position: absolute;
    background:url(../images/after_img_ash.png) no-repeat;
    bottom: -30px;
    left: 0px;
    width: 36px;
    height: 31px;
}
.custom_margin{
    padding: 3% 16%;
}
.custom_margin .col-md-3:nth-child(1){
width: 29%;	
}
.custom_margin .col-md-6:nth-child(2){
width: 39%;	
padding: 0;
}
.custom_margin .col-md-6:nth-child(2) img{
display:block;margin:0 auto;
}
.custom_margin .col-md-3:nth-child(3){
width: 29%;	
}
.left_list{
text-align:right;	
padding:0;
}
.left_list li {
    list-style: none;
    padding-right: 69px;
	margin-bottom: 28px;
}
.left_list li h3 {
color: #faaf40;
margin-bottom: 2px;
font-weight: 500;
letter-spacing: normal;
font-size:13px;
}
.left_list li p {
    line-height: normal;
    font-size: 12px;
}
.left_list li:nth-child(1){
background:url(../images/services/1.png) no-repeat top right;
}
.left_list li:nth-child(2){
background:url(../images/services/2.png) no-repeat top right;
}
.left_list li:nth-child(3){
background:url(../images/services/3.png) no-repeat top right;
}
.left_list li:nth-child(4){
background:url(../images/services/4.png) no-repeat top right;
}
.right_list li:nth-child(1){
background:url(../images/services/5.png) no-repeat top left;
}
.right_list li:nth-child(2){
background:url(../images/services/6.png) no-repeat top left;
}
.right_list li:nth-child(3){
background:url(../images/services/7.png) no-repeat top left;
}
.right_list li:nth-child(4){
background:url(../images/services/8.png) no-repeat top left;
}
.right_list{
text-align:left;
padding:0;	
}
.right_list li {
    list-style: none;
    padding-left: 69px;
	margin-bottom: 28px;
}
.right_list li h3 {
color: #faaf40;
margin-bottom: 2px;
font-weight: 500;
letter-spacing: normal;
font-size:13px;
}
.right_list li p {
    line-height: normal;
    font-size: 12px;
}
.custom_margin .col-md-12 p {
    text-align: center;
    color: #394b50;
    font-size: 14px;
    padding: 1% 26%;
}
/* Portfolio Section
/* ========================================== */

#portfolio{
	padding:80px 0;
}
/* Our Statistics section styles
/* ========================================== */
#our_stats_sec{
/*background:#322c33;*/
}
.our_stats_right {
    background: url(../images/our_stats/our_stats.webp) no-repeat right;
    height: 460px;
    background-size: 100%;
    padding: 10% 0 0 4%;
}
.our_stats_right h2{
color: #faaf40;
font-weight: 500;
text-transform: uppercase;
font-size: 39px;
letter-spacing: normal;	
margin:0;
padding:0;
}
.our_stats_right h4 {
    color: #fff;
    font-weight: 300;
    font-size: 23px;
    letter-spacing: normal;
    padding: 0;
    margin: 0;
}
.our_stats_left {
    padding: 3.5% 8% 0 18%;
    text-align: center;
    color: #fff;
}
.our_stats_left .our_stats img{
display:block;
margin:0 auto;
}
.our_stats_left h2 {
    color: #fff;
    font-weight: 500;
    margin: 10px 0 0 0;
    padding: 0;
}
.our_stats_left h3 {
    color: #929292;
    font-weight: 300;
    letter-spacing: normal;
    font-size: 15px;
    margin: 6px 0 10px 0;
}
.our_stats {
    margin-bottom: 45px;
}
/* testimonial section styles
/* ========================================== */
#testimonial .item {
  text-align: center;
  display: block;
  width: 100%;
  padding-bottom: 62px;
}

#testimonial .item img {
  display: inline-block;
}

/* about section styles
/* ========================================== */
#aboutus_sec{
padding:80px 0;	
}
.left_sec span {
    position: relative;
    background: #36a8ff;
    height: 77px;
    width: 258px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
    text-align: center;
    border-radius: 68px 68px 0 68px;
    color: #fff;
    font-size: 25px;
    font-weight: 600;
	padding: 20px 8px;
}
.left_sec h6{
padding: 0px;
margin: 0px 13px 0px 0px;
text-align: center;
margin-left: 50px;	
}
.left_sec span::after {
    content: '';
    position: absolute;
    background: url(../images/after_img.png) no-repeat;
    bottom: -30px;
    right: 0px;
    width: 36px;
    height: 31px;
}
.left_sec{
text-align:right;
  padding:0;
  margin-bottom: 40px;
}
.right_sec{
text-align:left;
  padding:0;
  margin-bottom: 40px;
}
.right_sec span {
    position: relative;
    background: #e5e5e5;
    height: 77px;
    width: 258px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
    text-align: center;
    border-radius: 68px 68px 68px 0;
    font-size: 25px;
   font-weight: 600;
    color: #394b50;
    padding: 20px 8px;
}
.right_sec span::after {
    content: '';
    position: absolute;
    background:url(../images/after_img_ash.png) no-repeat;
    bottom: -30px;
    left: 0px;
    width: 36px;
    height: 31px;
}
#aboutus_sec .col-md-12 h1{
text-align: center;
color: #faaf40;
font-size: 30px;
margin: 50px 0 0 0;
}
.we_built .col-md-5:nth-child(1) img {
    float: right;
    margin-bottom: 48px;
}
.we_built .col-md-5:nth-child(3) img {
    float: left;
    margin-bottom: 60px;
}
.we_built .col-md-5:nth-child(1){
text-align:right;	
}
.we_built .col-md-5:nth-child(2){
text-align:left;	
}

.we_built .col-md-5 h3 {
    clear: both;
    color: #faaf40;
    text-transform: uppercase;
    font-size: 23px;
    padding: 0;
    margin: 0;
}
.we_built .col-md-5 p{
color:#666;	
font-size:12px;
line-height: normal;
}
.we_built .col-md-2 img{
	display:block;
	margin:0 auto;
	}
#about .container {
    width: 1280px;
    padding: 0px;
    margin: 0 auto;
}
.we_built .col-md-5 button {
    color: #36a8ff;
    border: none;
    background: none;
    font-size: 12px;
}
.we_built .col-md-5 button i {
    border: solid 1px #36a8ff;
    padding: 7px 11px;
    border-radius: 50%;
    margin: 0 0 0 6px;
}
#about .col-md-6 {
	padding: 0;
}
#about{
padding: 30px 0px;	
}
#about .about-des {
  	padding: 30px;
}

#about .about-des h3 {
    font-size: 26px;
    font-weight: 300;
    text-transform: uppercase;
    font-family: "Roboto Slab",serif;
}

#about .about-des h4 {
	font-size: 20px;
}

#about .about-des p {
    font-size: 14px;
    line-height: 24px;
    font-family: "Raleway",sans-serif;
    color: #232323;
}
/* Services section styles
/* ========================================== */
#services {
    background: url(../images/services_bg.png) no-repeat;
    min-height: 1040px;
    background-size: 100%;
	padding: 30px 0;
}

/* blog section styles
/* ========================================== */
#blog h2, #blog h4 {
  text-align: center;
}

#blog h2 {
  padding-bottom: 12px;
  font-size: 32px;
}

#blog h4 {
  padding-bottom: 32px;
  letter-spacing: 0.9px;
}

#blog p {
	padding-top: 10px;
	font-size: 14px;
	line-height: 28px;
}

#blog .blog-wrapper {
  background: #ffffff;
  border: 1px solid #f0f0f0;
  padding: 20px;
  margin-top: 20px;
  margin-bottom: 20px;
}

#blog .blog-wrapper h3 a {
  color: #000000;
}


/* Counter section styles
/* ========================================== */
#counter {
   background: url('../images/counter-bg.jpg') 20% 0 repeat-y fixed;
  -webkit-background-size: cover;
  background-size: cover;
  background-position: center;
  text-align: center;
  padding-top: 90px;
  padding-bottom: 90px;
}

#counter .support_icons {
color: #ffa400;
font-size: 32px;
border-radius: 50%;
width: 100px;
height: 100px;
margin: 0 auto;
}

#counter .counter-text {
  color: #ffffff;
  letter-spacing: 2px;
}
/*--------------------*/
/* PORTFOLIO */
/*--------------------*/

#portfolio{
	padding: 70px 0;
	width: 100%;
}
.portfolio-area{
	display: inline;
	float: left;
	width: 100%;
}
.portfolio-content {
	display: inline;
	float: left;
	width: 100%;
}
.portfolio-menu{
	display: inline;
	float: left;
	width: 100%;
}
.portfolio-menu ul{
	display: inline-block;
	width: 100%;
	text-align: center;
}
.portfolio-menu ul li {
	border-bottom: 1px solid #fff;
	border-top: 1px solid #fff;
	cursor: pointer;
	display: inline-block;
	font-size: 14px;
	margin: 0 5px;
	padding: 7px 16px;
	text-transform: uppercase;
	-webkit-transition: all 0.5s ease 0s;
	-o-transition: all 0.5s ease 0s;
	transition: all 0.5s ease 0s;  
}
.portfolio-container {
display: inline;
float: left;
margin-left: 0;
margin-top: 25px;
width: 100%;
}
.single-portfolio {
	display: inline;
	float: left;
	margin-bottom: 18px;
	margin-left: 18px;
	width: 23.4%;
}
.portfolio-title {
    background-color: #36a8ff;
}
.portfolio-social-icon a {
    background-color: #36a8ff;
}
.portfolio-menu ul li.active {
    background: #36a8ff;
    color: #fff;
    border-radius: 26px;
}
.single-item{
	width: 100%;
	position: relative;
	overflow: hidden;
}
.single-item>img{
	width: 100%;
    display: block;
    /*height: 290px;*/
    -webkit-transition: all 0.5s ease 0s;
	-o-transition: all 0.5s ease 0s;
	transition: all 0.5s ease 0s;
}
.single-item>img:hover{	
	-webkit-transform: scale(1);	
	    -ms-transform: scale(1);	
	        transform: scale(1);	       
}
#mixit-container .mix{
    display: none;
}
.single-item-content { 
	background-color: #000; 
	display: inline;
	opacity: 0;
	height: 100%;
	left: 0;
	position: absolute;
	text-align: center;
	top: 0;
	width: 100%;
	-webkit-transition: background-color 0.5s linear;
	-moz-transition: background-color 0.5s linear;
	-o-transition: background-color 0.5s linear;
	-ms-transition: background-color 0.5s linear;
	transition: background-color 0.5s linear;
}
.portfolio-social-icon {  
	float: left;
	display: inline;
	padding: 110px 50px;
	width: 100%;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	-ms-transition: all 0.5s;
	-o-transition: all 0.5s;
	transition: all 0.5s;
}
.single-item:hover .single-item-content{
	opacity: 1;	
}
.single-item-content:hover{
	background-color: rgba(0, 0, 0, 0.8);	
}
.portfolio-social-icon a {
	color: #fff;
	display: inline-block;
	font-size: 14px;
	height: 40px;
	line-height: 15px;
	margin: 0 8px;
	padding: 12px;  
	text-align: center;
	width: 40px; 
	transform: scale(0.5);
	-webkit-transition: all 0.7s ease 0s;
	-o-transition: all 0.7s ease 0s;
	transition: all 0.7s ease 0s;
}
.single-item-content:hover .fancybox,
.single-item-content:hover .link-btn{
	 transform: scale(0.9);
} 
.portfolio-title {
	bottom: 0;
	display:inline;
	opacity: 0;
	left: 0;
	padding-bottom: 12px;
	position: absolute;
	text-align: center;
	width: 100%;
	-webkit-transition: all 0.7s ease 0s;
	-o-transition: all 0.7s ease 0s;
	transition: all 0.7s ease 0s;
}
.single-item:hover .portfolio-title{
	opacity: 1;
}
.portfolio-title h4 {
	color: #fff7f7;
	font-size: 16px;
	font-weight: 500;
	margin-bottom: 0;
	text-transform: uppercase;
}
.portfolio-title span{
	color: #fff7f7;
	font-size: 12px;
	font-family: "Raleway",sans-serif;
}

/* contact section styles
/* ========================================== */
#contact {
background: url('../images/contact/contact_bg.jpg') center center;
-webkit-background-size: cover;
background-size: 100% !important;
}

#contact .form-control {
    background: rgba(255,255,255,0.5);
    border-color: #cccccc;
    color: #ffffff;
    border-radius: 0px;
    box-shadow: none;
    margin-bottom: 23px;
    transition: all 0.4s ease-in-out;
    padding: 10px;
}
#contact input[type="text"], #contact input[type="email"] {
    height: 53px;
    /*background: rgba(255,255,255,0.4);*/
    width: 78%;
    margin-bottom: 12px;
    padding: 10px 15px;
    border: none;
    /*color: #fff;*/
	border-radius:5px;
}
 #contact textarea {
    height: 80px;
    /*background: rgba(255,255,255,0.4);*/
    width: 78%;
    margin-bottom: 12px;
    padding: 10px 15px;
    border: none;
    /*color: #fff;*/
		border-radius:5px;
		resize:none;
}
#contact button {
    background: none;
    padding: 10px 28px;
    border: solid 3px #c98e3f;
    border-radius: 13px;
    clear: both;
    color: #faaf40;
    font-size: 18px;
    text-transform: uppercase;
    float: left;
	margin-top: 16px;
}
#contact input[type="submit"] {
  background: #000000;
  border:none;
  border-radius: 4px;
  font-weight: bold;
  letter-spacing: 1px;
  height: 50px;
  margin-top: 10px;
}

#contact input[type="submit"]:hover {
  background: #ffa400;
}

.form-control::-moz-placeholder {
  color: #ffffff;
  opacity: 1;
}
.form-control:-ms-input-placeholder {
  color: #ffffff;
}
.form-control::-webkit-input-placeholder {
  color: #ffffff;
}

/*#contact .contact-detail {
  background: rgba(250,250,250,0.75);
  padding: 34px 10px 34px 60px;
}*/

#contact .contact-detail h2 {
  padding-bottom: 28px;
}

#contact .contact-detail div {
  padding-bottom: 10px;
}
.contact_sec span {position: relative;background: #faaf40;height: 77px;margin-bottom: 23px;width: 258px;display: inline-block;text-align: center;
  border-radius: 68px 68px 68px 0;color: #fff;font-size: 25px;font-weight: bold;padding: 7px 8px;}
.contact_sec span:after{
content: '';
position: absolute;
background: url(../images/contact_after.png) no-repeat;
bottom: -48px;
left: 0px;
width: 36px;
height: 31px;
margin-bottom: 18px;	
}
.contact_sec h6{
margin:0;
padding:0;
}
.contact_sec h1 {
    color: #faaf40;
    font-size: 22px;
    font-weight: 400;
    line-height: normal;
    margin: 13px 0 0 0 !important;
    padding: 0;
}
.contact_sec ul{
padding:0;
margin:0;	
}
.contact_sec ul li {
    list-style: none;
    float: left;
    color: #322c33;
    font-size: 18px;
    background: rgba(255,255,255,0.1);
    margin-right: 19px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    line-height: 40px;
    text-align: center;
}
.contact_sec ul li a{
text-decoration:none;
color:#322c33;	
}
.contact_sec ul li a:hover{
text-decoration:none;
color:#faaf40;	
}
/*who-we-are*/
/*====================================*/
.who-we-are li{
  list-style: none;
  font-family: 'Raleway', sans-serif;
  font-size: 1.25rem;

}
.who-we-are li i{
  color: green;
}
/* footer section styles
/* ========================================== */
footer {
padding-bottom: 0;
}

footer p {
  padding-right: 40px;
  padding-bottom: 20px;
  font-size: 14px;
}

footer a {
  color: #606060;
}
.link-list ul:nth-child(2){
padding:0;
margin:0;	
}
.link-list ul.address li{
list-style: none;
font-family: 'Raleway', sans-serif;
font-size: 13px;
color: #666666;
float: left;
width: 50%;
line-height: 27px;
text-align: left;
}
.link-list ul.quick_links li{
list-style: none;
font-family: 'Raleway', sans-serif;
font-size: 13px;
color: #666666;
float: left;
width: 50%;
line-height: 27px;
text-align: left;
}
.link-list ul.quick_links li a{
color:#666666;
text-decoration:none;	
}
footer a:hover {
  color: #ffa400;
  text-decoration: none;
}
.social_links {
    padding: 0;
    margin: 0;
    width: 100%;
    clear: both;
}
.social_links li{
width: 31px;
height: 31px;
color: #00a99d;
font-size: 13px;
text-align: center;
line-height: 31px;
float: left;
list-style: none;
border: solid 1px #00a99d;
margin: 20px 10px 0 0;
border-radius: 6px;
}
.social_links li a{
	color: #00a99d;
font-size: 13px;
text-align: center;
padding:0;
}
.link-list a {
  color: #fff;
  display: block;
  padding-top: 4px;
  padding-bottom: 4px;
  font-family: "Raleway",sans-serif;
font-size: 13px;
}

.social-icon {
  padding: 0;
  margin: 0;
}
.social-icon li {
  list-style: none;
  display: inline-block;
}
.social-icon li a {
  background: #3c3c3c;
  border-radius: 100%;
  color: #ffffff;
  font-size: 18px;
  line-height: 32px;
  width: 32px;
  height: 32px;
  text-align: center;
  text-decoration: none;
  transition: all 0.4s ease-in-out;
  margin-right: 2px;
}
.social-icon li a:hover {
  background: #ffa400;
}

/*My Styles*/
.min_text{
font-family: "Raleway",sans-serif;
color: rgb(255, 255, 255);
font-weight: 400;
font-style: italic;	
text-align: left;
font-size: 46px;
margin-bottom: 28px;
}
.caption_text {
    font-family: "Roboto Slab",serif;
    color: rgb(255, 255, 255);
    font-size: 32px;
    font-weight: 400;
    text-transform: inherit;
    clear: both;
    margin-top: 35px;
    text-align: left;
}
.search_bar {
    background: rgba(255, 255, 255, 0.3) none repeat scroll 0% 0%;
    height: 64px;
    text-align: left;
    padding: 6px;
    border-radius: 40px;
    margin: -10px 0;
		font-family: 'Raleway', sans-serif;
		z-index:2;
}
.search_bar input[type="text"] {
    width: 51%;
    height: 52px;
    color: rgb(45, 45, 45);
    font-size: 17px;
    font-family: "Raleway",sans-serif;
    padding: 5px 18px;
    float: left;
    border: none;
    border-radius: 40px 0 0 40px;
}
.search_bar select {
    height: 52px;
    border: medium none navajowhite;
    margin-top: 0px;
    margin-left: -1px;
    background: #00a69d;
    width: 100%;
    float: left;
    -webkit-appearance: none;
    -moz-appearance: none;
    font-family: "Raleway",sans-serif;
    font-weight: 600;
    font-size: 18px;
    text-align: center;
    padding: 0 8px;
    cursor: pointer;
    color: #fff;
}
.domain_ext {
    float: left;
    width: 21%;
    position: relative;
}
.search_bar .domain_ext::after {
    content: '\f107';
    position: absolute;
    right: 10px;
    top: 12px;
    font-family: fontawesome;
    font-size: 21px;
    color: #fff;
	pointer-events: none;
}
.search_bar button {
    background: #00a69d;
    float: left;
    height: 52px;
    margin-top: 0px;
    margin-left: 0px;
    border: none;
    border-left: solid 1px #fff;
    font-family: "Raleway",sans-serif;
    font-weight: 500;
    color: #fff;
    font-size: 14px;
    width: 28%;
	border-radius: 0 40px 40px 0;
}
.yellow_color{
color:#ffae00;	
}
.social_icons{
padding:0;	
margin-top:23px;
}
.social_icons ul{
margin:0;
padding:0;	
}
.social_icons li{
	border: 1px solid rgb(149, 150, 151);
float: left;
width: 48px;
height: 48px;
border-radius: 50%;
line-height: 45px;
list-style: outside none none;
color: rgb(255, 255, 255);
font-size: 27px;
margin-right: 25px;
}
.about_content h2, #services h2, #contact h2 {
    color: #00a99d;
    font-size: 13px;
    text-align: left;
    text-transform: uppercase;
    font-family: 'Raleway', sans-serif;
    margin-bottom: 0;
    padding-bottom: 4px;
    font-weight: 600;
}
.about_content p, #services p, #contact p, #pricing_plans p {
    font-family: "Raleway",sans-serif;
    font-size: 15px;
    color: #666666;
    text-align: left;
    letter-spacing: normal;
    line-height: normal;
	padding: 0;
margin: 0;
}
.about_content h2 span,#services h2 span,#contact h2 span,#pricing_plans h2 span,#offer h2 span,#amazing_services h2 span{
position:relative;
}
.view_more{
color: #fff;
background: #ffae00;
height: 38px;
width: 150px;
border: none;
font-family: "Raleway",sans-serif;
text-transform: uppercase;
font-weight: 600;
line-height: 38px;
margin-top: 12px;
}
.view_more i {
    border-right: solid 1px #fff;
    display: inline-block;
    height: 40px;
    line-height: 40px;
    text-align: center;
    padding-right: 11px;
    font-size: 16px;
	margin-right:5px;
}

.services_inner_section{
margin: 0 auto;
float: none;
min-height: 760px;
}
.services_inner_section .domain:nth-child(1){
	border-right:solid 1px #f4f4f4;
	border-bottom:solid 1px #f4f4f4;
}
.services_inner_section .domain:nth-child(4){
	border-left:solid 1px #f4f4f4;
	border-top:solid 1px #f4f4f4;
}
.services_inner_section  .hosting{
		border-bottom:solid 1px #f4f4f4;
}
.services_inner_section div{
	min-height:380px;
	text-align: center;
padding: 26px;
transition: 0.0s ease all;
}
.services_inner_section div:hover{
background:#ffae00;	
transition: 0.5s ease all;
}
.domain span i{
border: 1px solid rgb(218, 218, 218);
height: 85px;
width: 85px;
display: block;
border-radius: 30% 0%;
background: rgb(255, 255, 255) none repeat scroll 0% 0%;
color: #ffae00;
font-size: 43px;
text-align: center;
line-height: 82px;
margin: 34px auto;
}
.domain span, .domain h3 {
    margin: 30px 0 21px 0;
    font-size: 24px;
    font-family: "Raleway",sans-serif;
}
.domain p{
line-height: 23px;
font-family: "Raleway",sans-serif;
font-size: 13px;	
color:#1c2d33;	
}
.domain:hover h3,.domain:hover p{
color:#fff;	
}
.services_inner_section .circle {
    background: #fff;
    height: 86px;
    width: 86px;
    border-radius: 50%;
    border: solid 5px rgba(0,0,0,0.1);
    position: absolute;
    left: 44%;
    top: 44%;
	line-height:80px;
	text-align:center;
}
.services_inner_section .circle i{
color:#ffae00;	
font-size: 18px;
}
.today h3 {
    font-size: 26px;
    margin: 24px 24px 0 180px;
    text-align: center;
    float: left;
    font-weight: 300;
	letter-spacing: normal;
}
.today button {
    float: left;
    color: #127997;
    background: transparent;
    border: none;
    height: 100px;
    line-height: normal;
    border-radius: 30px 0;
    width: 235px;
    font-size: 26px;
    font-family: "Roboto Slab",serif;
    text-align: center;
    margin-top: 96px;
}
.view_more_btn {
    color: rgb(0, 0, 0);
    font-size: 11px !important;
    text-transform: uppercase;
    font-family: "Raleway",sans-serif;
    margin-top: 9px;
    font-weight: 600;
    padding: 0 79px !important;
}
.today button span {
    font-size: 14px;
    display: block;
    font-family: "Raleway",sans-serif;
    text-align: left;
    padding: 0 53px;
}
#website_today .container,#website_today .row{
	height:270px;
}
#website_today .today {
    height: 250px;
    margin-top: 0;
    position: relative;
    padding-top: 93px;
	width:100%;
	overflow:hidden;
}
.priceing_animation {
    background: url(../images/amount_bg.png) no-repeat;
    position: absolute;
    top: 0;
    height: 220px;
    right: 14%;
	-webkit-animation: bounce 1.2s ease-out;
-moz-animation: bounce 800ms ease-out;
-o-animation: bounce 800ms ease-out;
animation: bounce 1.2s ease-out;
}
.send_btn{
background: #ffae00;
text-align: center;
margin: 0 auto;
width: 217px;
height: 51px;
border: none;
color: #fff;
font-size: 21px;
font-family: "Raleway",sans-serif;
font-weight: 600;
margin-bottom: 35px;
border-radius: 9px;
}
.submit-btn{
text-align:center;	
}
footer .link-list h2 {
    color: #ffae00;
    height: 30px;
    font-family: "Raleway",sans-serif;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 11px !important;
}
.copyright{
background:#272428;
/*height:93px;	*/
text-align:center;
color:#828282;
line-height:93px;
font-family: "Raleway",sans-serif;
border-top: solid 2px #3e383f;
border-bottom: solid 0px #3e383f;
}
.mobile_link {
    background: url(../images/btm_image.png) no-repeat center bottom;
    width: 300px;
    height: 315px;
    margin-top: -66px;
}
.ios {
    width: 145px;
    height: 50px;
    border-radius: 10px;
    position: absolute;
    left: 28%;
    top: 44%;
		padding:10px;
}
.ios {
width: 145px;
height: 50px;
border-radius: 10px;
position: absolute;
left: 28%;
top: 40%;
padding: 0;
}
.android{
width: 145px;
height: 50px;
border-radius: 10px;
position: absolute;
left: 28%;
top: 57%;
padding: 0;
}
.ios a,.android a{
outline:none;	
}
.list_hosting{
position: relative;
top: 52px;	
z-index:1;
}
.list_hosting ul {
    padding: 0;
    margin: 0;
    overflow: hidden;
    height:170px;
    width: 100%;
}
.list_hosting ul li{
	list-style:none;
	float:left;
	line-height: normal;
	font-family: 'Roboto', sans-serif;
}
.list_hosting ul li:nth-child(1) {
    position: absolute;
    left: -42px;
    top: -1px;
    -webkit-animation: bounce 1.2s ease-out;
    -moz-animation: bounce 800ms ease-out;
    -o-animation: bounce 800ms ease-out;
    animation: bounce 1.2s ease-out;
    background: url(../images/us.png) no-repeat;
    display: block;
    height: 100%;
    width: 115px;
		padding: 78px 0 0 0;
}
.list_hosting ul li:nth-child(2) {
    position: absolute;
    left: 81px;
    top: 2px;
		-webkit-animation: bounce 1.3s ease-out;
-moz-animation: bounce 800ms ease-out;
-o-animation: bounce 800ms ease-out;
animation: bounce 1.3s ease-out;
    background: url(../images/net.png) no-repeat;
    display: block;
    height: 100%;
    width: 115px;
		padding: 103px 0 0 0;
}
.list_hosting ul li:nth-child(3) {
    position: absolute;
    left: 207px;
    top: 1px;
		-webkit-animation: bounce 1.4s ease-out;
-moz-animation: bounce 800ms ease-out;
-o-animation: bounce 800ms ease-out;
animation: bounce 1.4s ease-out;
    background: url(../images/com.png) no-repeat;
    display: block;
    height: 100%;
    width: 148px;
		padding: 116px 0 0 0;
}
.list_hosting ul li:nth-child(4) {
    position: absolute;
    left: 369px;
    top: 2px;
		-webkit-animation: bounce 1.5s ease-out;
-moz-animation: bounce 800ms ease-out;
-o-animation: bounce 800ms ease-out;
animation: bounce 1.5s ease-out;
    background: url(../images/us.png) no-repeat;
    display: block;
    height: 100%;
    width: 115px;
		padding: 77px 0 0 0;
}
.list_hosting ul li:nth-child(5) {
    position: absolute;
    right: -29px;
    top: 1px;
		-webkit-animation: bounce 1.6s ease-out;
-moz-animation: bounce 800ms ease-out;
-o-animation: bounce 800ms ease-out;
animation: bounce 1.6s ease-out;
    background: url(../images/us.png) no-repeat;
    display: block;
    height: 100%;
    width: 115px;
		padding: 79px 0 0 0;
}
.list_hosting li:nth-child(1) span:nth-child(1) {
    font-size: 19px;
    color: #454545;
	display: block;
}
.list_hosting li:nth-child(2) span:nth-child(2) {
    font-size: 19px;
    color: #454545;
	display: block;
}
.list_hosting li:nth-child(3) span:nth-child(3) {
    font-size: 21px;
    color: #454545;
	display: block;
}
.list_hosting li:nth-child(4) span:nth-child(4) {
    font-size: 28px;
    color: #454545;
	display: block;
}
.list_hosting li:nth-child(5) span:nth-child(5) {
    font-size: 19px;
    color: #454545;
	display: block;
}
.list_hosting li:nth-child(1) span:nth-child(2) {
    font-size: 19px;
    color: #00a69d;
	display: block;
}
.list_hosting li:nth-child(2) span:nth-child(2) {
    font-size: 19px;
    color: #00a69d;
	display: block;
}
.list_hosting li:nth-child(3) span:nth-child(2) {
    font-size: 28px;
    color: #00a69d;
	display: block;
}
.list_hosting li:nth-child(4) span:nth-child(2) {
    font-size: 21px;
    color: #00a69d;
	display: block;
}
.list_hosting li:nth-child(5) span:nth-child(2) {
    font-size: 19px;
    color: #00a69d;
	display: block;
}

/* mobile responsive section styles
/* ========================================== */

@media (max-width: 1366px) {
#home {height: 100vh;}
.services_main_sec {height: 420px;}
.our_stats_right img{
width:100%;	
}
.our_stats_right {
    height: 390px;
}
.our_stats_left {
    padding: 1.5% 0 0 0;
    text-align: center;
    color: #fff;
}
.custom_margin .col-md-6:nth-child(2) {
    width: 41%;
    padding: 0;
}
.custom_margin .col-md-6:nth-child(2) img{
width:100%;	
}
#our_services {
    padding:  0;
}
  .banner_left_sec h1 {
    font-weight: 300;
    font-size: 40px;
  }
  .banner_left_sec {
    padding: 0;
    margin-top: 10rem;
  }
}
@media (max-width: 1280px) {
	#home {height: 100vh;}

.services_main_sec {height: 420px;}
	#about .about-des {
		padding: 40px;
	}
	.services_main_sec {
   
    height: 360px;
}
	#about .about-des h3 {
		font-size: 20px;
	}
	
	#about .about-des h4 {
		font-size: 16px;
	}
	
	#about .about-des p {
		font-size: 13px;
		line-height: 24px;
	}
	#about .container {
    width: 100%;
}
/*Pricing*/
.pricing {
    position: relative;
    border-radius: 0;
    text-align: center;
    background: #e5e5e5;
    height: 330px;
    margin: 0 17px 0 0;
    width: 23.5%;
}
 .banner_left_sec h1 {
    font-weight: 300;
    font-size: 40px;
  }
  .banner_left_sec {
    padding: 0!important;
    margin-top: 10rem!important;
  }
}

@media (max-width: 1024px) {
  .portfolio-social-icon {
    padding: 0px 0px;
  }
  .portfolio-social-icon a {
    font-size: 20px;
    height: 35px;
    line-height: 20px;
    margin: 20px 2px;
    padding: 7px;
    width: 35px;
  }
    .single-portfolio {
      display: inline;
      float: left;
      margin-bottom: 18px;
      margin-left: 18px;
      width: 22%;
    }

  .left_list li {
    list-style: none;
    padding-right: 55px;
    margin-bottom: 5px;
    /*height: 65px;*/
  }
    #home {
      height: 65vh;
    }

  .right_list li {
    list-style: none;
    padding-left:  55px;
    margin-bottom: 5px;
    /*height: 65px;*/
  }
  .our_stats_right {
    padding: 27% 0 0 4%;
  }
  .custom_margin {
    padding: 3% 7%;
  }
  .custom_margin img{
    width: 20rem;
  }

  #how_we_work h2 {
    margin: 10px 0 0 0;
    font-size: 34px;
    text-align: center!important;
  }
  #how_we_work h4 {
    font-size: 20px;
    text-align: center;
  }
  #how_we_work {
     max-height: 60rem;
  }

  #contact {
    padding-top: 10px;
    background:none !important;
    background-color:#322D33 !important;
  }
  #contact h2{
    text-align: center;
    font-size: 12px;
  }
  #contact input[type="text"], #contact input[type="email"] ,
  #contact textarea {
    width: 100%;
  }
  #contact button {
    width: 100%;
    margin-bottom: 10px;
  }
  .banner_left_sec h1 {
    font-weight: 300;
    font-size: 40px;
  }
  .banner_left_sec {
    padding: 0;
    margin-top: 10rem;
  }
  #aboutus_sec {
    padding: 201px 0;
  }
}
@media (max-width: 768px) {
  #aboutus_sec {
    padding: 80px 0;
  }
  h1 {
    font-size: 53px;
  }
  #counter .counter-item {
    padding-top: 20px;
    padding-bottom: 20px;
  }
  .min_text {
    font-size: 39px;
}
.search_bar {
	height: 75px;
    padding: 10px;
}
.search_bar input[type="text"]{
font-size: 13px;
width: 47%;
}
.search_bar select {
    height: 54px;
    width: 22%;
}
.search_bar button {
    height: 54px;
    font-size: 14px;
    width: 31%;
}
.caption_text {
   font-size: 25px;
}
.social_icons li {
    margin-right: 13px;
	display: inline-block;
	float:none;
}
.social_icons li:last-child(){
	   margin-right: 0;
}
#about .container {
    width: 100%;
}
.today h3 {
    font-size: 29px;
    margin: 14px;
    text-align: center;
    float: none;
    font-weight: 500;
}
.today button {
    margin-left: 32%;
}
.pricing {
    position: inherit;
    margin: 21px auto;
}
#pricing_plans h2{
margin-bottom: 10px ;	
}
.link-list {
    text-align: left;
    width: 23%;
	padding: 0 6px;
	float: left;
}
.mobile_link {
    margin-top: -98px;
    background-size: 100%;
}
.social_links{
	padding:0 8px;
	width:31%;
	float: right;
}
.mobile_link {
    width: 230px;
}
.ios,.android{
    left: 21%;
}
#pricing_plans .container{
width: 100%;	
}

  .banner_left_sec h1 {
    font-weight: 300;
    font-size: 40px;
  }
  .banner_left_sec {
    padding: 0;
    margin-top: 3rem;
  }
   #home {
    background:url(../images/home/home_banner_mobile.webp);
    -webkit-background-size: cover;
    background-size: cover;
    background-position: center center;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    height: 85vh;
    text-align: center;
    position:relative;
  }

  .our_stats_right {
    background: url(../images/our_stats/our_stats_mob.webp) no-repeat right;
    /*height: 460px;*/
    background-size: 100%;
    padding: 10% 0 0 4%;
  }
  .left_sec span {
    position: relative;
    background: #36a8ff;
    height: 60px;
    width: 100%;
    text-align: center;
    border-radius: 68px 68px 0 68px;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    padding: 8px 0px;
  }
  .left_sec h6{
    padding: 0px;
    margin: 0px 13px 0px 0px;
    text-align: center;
    margin-left: 50px;
  }
  .left_sec span::after {
    content: '';
    position: absolute;
    background: url(../images/after_img.png) no-repeat;
    bottom: -30px;
    right: 0px;
    width: 36px;
    height: 31px;
  }
  .left_sec{
    text-align:left;
    padding:0;
    margin-bottom: 40px;
  }
  .right_sec{
    text-align:right;
    padding:0;
    margin-bottom: 40px;
  }
  .right_sec span {
    position: relative;
    background: #e5e5e5;
    height: 60px;
    width: 100%;
    text-align: center;
    border-radius: 68px 68px 68px 0;
    font-size: 12px;
    color: #394b50;
    padding: 8px 0px;
  }
  .right_sec span::after {
    content: '';
    position: absolute;
    background:url(../images/after_img_ash.png) no-repeat;
    bottom: -30px;
    left: 0px;
    width: 36px;
    height: 31px;
  }


  .left_sec_services span {
    position: relative;
    background: #faaf40;
    height: 60px;
    width: 100%;
    /*display: inline-block;*/
    text-align: center;
    border-radius: 68px 68px 0 68px;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    padding: 8px 0px;
  }
  .right_sec_services span {
    position: relative;
    background: #e5e5e5;
    height: 60px;
    width: 100%;
    /*display: inline-block;*/
    text-align: center;
    border-radius: 68px 68px 68px 0;
    font-size: 12px;
    color: #394b50;
    padding: 8px 0px;
  }

ul.who-we-are li{
  font-size: 1rem;
}
#aboutus_sec h1{
  font-size: 20px;
}




  .we_built_col{
    text-align: center!important;
  }
  .we_built_col{}
  .we_built .col-md-5:nth-child(1) img, .we_built .col-md-5:nth-child(3) img {
    float: none;
}





}

@media (max-width: 650px) {
h1 {
font-size: 40px;
}
.min_text {
font-size: 39px;
}
.search_bar {
height: 75px;
padding: 10px;
}
.search_bar input[type="text"]{
font-size: 13px;
width: 47%;
}
.search_bar select {
height: 54px;
width: 22%;
}
.search_bar button {
height: 54px;
font-size: 14px;
width: 31%;
}
.caption_text {
font-size: 25px;
}
.social_icons li {
margin-right: 13px;
display: inline-block;
float:none;
}
.social_icons li:last-child(){
margin-right: 0;
}
#about .container {
width: 100%;
}
#website_today .today {
height: 244px;
margin-top: 26px;
}
.today h3 {
font-size: 29px;
margin: 14px;
text-align: center;
float: none;
font-weight: 500;
}
.today button {
margin-left: 14%;
}
.pricing {
position: inherit;
margin: 21px auto;
}
#pricing_plans h2{
margin-bottom: 10px ;
}
.link-list {
text-align: left;
width: 23%;
padding: 0 6px;
float: left;
}
.social_links {
padding: 0 8px;
width: 31%;
float: right;
}
.mobile_link {
margin-top: 20px;
}
.portfolio-title {
padding-bottom: 10px;
}
.portfolio-title h4 {
font-size: 14px;
font-weight: 600;
}
.portfolio-title span {
font-size: 13px;
}
.portfolio-social-icon {
padding: 18px 0px;
}
.portfolio-social-icon a {
font-size: 23px;
height: 40px;
line-height: 21px;
margin: 13px 2px;
padding: 8px;
width: 40px;
}
.single-portfolio {
display: inline;
float: left;
margin-bottom: 18px;
margin-left: 18px;
width: 45%;
}
}

@media (max-width: 450px) {
h1 {
font-size: 28px;
}
#home h5 {
font-size: 11px;
}
#home .btn {
display: inline-block;
padding: 14px 32px;
}

.services_inner_section .circle{
display:none;
}
.min_text {
font-size: 39px;
}
.search_bar {
height: 75px;
padding: 10px;
}
.search_bar input[type="text"]{
font-size: 13px;
width: 47%;
}
.search_bar select {
height: 54px;
width: 22%;
}
.search_bar button {
height: 54px;
font-size: 14px;
width: 31%;
}
.caption_text {
font-size: 25px;
}
.social_icons li {
margin-right: 13px;
display: inline-block;
float:none;
}
.social_icons li:last-child(){
margin-right: 0;
}
#about .container {
width: 100%;
}
#website_today .today {
height: 244px;
margin-top: 26px;
}
.today h3 {
font-size: 29px;
margin: 14px;
text-align: center;
float: none;
font-weight: 500;
}
.today button {
margin-left: 14%;
}
.pricing {
position: inherit;
margin: 21px auto;
}
#pricing_plans h2{
margin-bottom: 10px ;
}
.link-list {
width: 100%;
text-align: center;
}
.social_links {
padding: 0 8px;
width: 100%;
margin: 0 auto;
float: left;
}
.mobile_link {
margin: 0 auto;
}
.our_stats_right {
padding: 47% 0 0 4%;
}
.our_stats_right h2 {
  border-top-left-radius: 10px;
  padding-left: 7px;
  padding-top: 7px;
  padding-bottom: 1px;
  background-color:#f8fafb ;
font-size: 20px;
}
.our_stats_right h4 {
  border-bottom-left-radius: 10px;
  padding-left: 7px;
  padding-top: 2px;
  padding-bottom: 1px;
  background-color:#f8fafb ;
  color: currentColor;
  font-size: 13px;
}
.our_stats_left h3 {
font-size: 11px;
}
.our_stats_left h2 {
margin: 5px 0 0 0;
font-size: 13px;
}
.our_stats_left .our_stats img {
width: 2rem;
}
.our_stats_right {
height: 290px;
}
}

@media (max-width: 385px) {

h1 {
font-size: 24px;
}
#home h5 {
font-size: 9px;
}

.min_text {
font-size: 39px;
}
.search_bar {
height: 68px;
padding: 7px;
}
.search_bar input[type="text"]{
font-size: 13px;
width: 47%;
}
.search_bar select {
height: 54px;
width: 100%;
}
.search_bar .domain_ext::after {
display: none;
}
.search_bar button {
height: 54px;
font-size: 14px;
width: 31%;
}
.caption_text {
font-size: 25px;
}
.social_icons li {
margin-right: 7px;
display: inline-block;
float:none;
}
.social_icons li:last-child(){
margin-right: 0;
}
#about .container {
width: 100%;
}
#website_today .today {
height: 244px;
margin-top: 26px;
}
.today h3 {
font-size: 29px;
margin: 14px;
text-align: center;
float: none;
font-weight: 500;
}
.today button {
margin-left:5%;
}
.pricing {
position: inherit;
margin: 21px auto;
}
#pricing_plans h2{
margin-bottom: 10px ;
}
.link-list{
text-align:center;
}
.mobile_link {
margin-top: 20px;
}
.pricing {
width: 100%;
}
.about_content h2 span::after, #services h2 span::after, #contact h2 span::after, #pricing_plans h2 span::after, #offer h2 span::after {
content: url(../images/heading_img_before.png);
position: absolute;
left: -250px;
top: -2px;
}

.about_content h2 span::before, #services h2 span::before, #contact h2 span::before, #pricing_plans h2 span::before, #offer h2 span::before {

content: url(../images/heading_img_after.png);
position: absolute;
right: -248px;
top: -2px;
}
.pricing_heading h2 {
font-size: 24px;
}
#amazing_services h2 {
font-size: 24px;
}
#amazing_services h2 span::before {
left: -31px;
}
#amazing_services h2 span::after {
right: -31px;
}
#amazing_services p {
line-height: normal;
}
#amazing_services ul {
padding: 0 17px;
}
#website_today .today {
height: auto;
margin-top: 0;
}
#website_today {
height: 420px;
line-height:normal;
overflow: hidden;
}
#website_today .container, #website_today .row {
height: 100%;
}
#website_today .today {
padding-top: 226px;
}


.services_right_section {
padding: 0;
}
.services_right_section img{
width:100%;
}
.list_hosting {
top: 0;
}
.list_hosting ul {
height: 123px;
}
.hosting_banner_img img{
width:100%;
}

/* REMOVED 2026-05-26: legacy `#home .container { position: absolute; top: 100px }`
   broke the entire hero layout on phones ≤385px — taking the container out of
   normal flow caused the About Us section below to render on top of the hero
   text. body{padding-top:80px} already clears the fixed nav, so this rule
   served no purpose. */

.banner_right_sec {
background: url(../images/right_sec_img.png) no-repeat center top;
height: 0;
background: none;
top:0;
left: 0;
}
.banner_right_sec h4 {
position: relative;
top: 0;
font-family: "Raleway",sans-serif;
color: #fff;
font-size: 24px;
padding: 5px 20px 0 20px;
font-weight: 400;
line-height: normal;
}
.banner_right_sec span:nth-child(1) {
color: #fff;
}
.banner_right_sec span:nth-child(2) {
font-size: 30px;
}
.navbar-default .navbar-toggle {
border: none;
padding-top: 23px;
}
.navbar-default .navbar-toggle .icon-bar {
background: #127997;
border-color: transparent;
}
.list_hosting li:nth-child(1) span:nth-child(1) {
font-size: 16px;
}
.list_hosting li:nth-child(1) span:nth-child(2) {
font-size: 14px;
}
.list_hosting li:nth-child(1) span:nth-child(3) {
font-size: 16px;
}
.list_hosting li:nth-child(1) span:nth-child(4) {
font-size: 16px;
}
.list_hosting li:nth-child(1) span:nth-child(5) {
font-size: 16px;
}
.list_hosting li:nth-child(2) span:nth-child(2) {
font-size: 14px;
color: #00a69d;
display: block;
}
.list_hosting li:nth-child(3) span:nth-child(2) {
font-size: 18px;
}
.list_hosting li:nth-child(4) span:nth-child(2) {
font-size: 14px;
}
.list_hosting li:nth-child(5) span:nth-child(2) {
font-size: 14px;
}
.list_hosting ul li:nth-child(1) {
position: absolute;
left: 0;
top: -1px;
-webkit-animation: bounce 1.2s ease-out;
-moz-animation: bounce 800ms ease-out;
-o-animation: bounce 800ms ease-out;
animation: bounce 1.2s ease-out;
background: url(../images/us.png) no-repeat;
display: block;
height: 100%;
width: 60px;
padding: 32px 0 0 0;
background-size: 100%;
}
.list_hosting ul li:nth-child(2) {
position: absolute;
left: 55px;
top: 2px;
-webkit-animation: bounce 1.3s ease-out;
-moz-animation: bounce 800ms ease-out;
-o-animation: bounce 800ms ease-out;
animation: bounce 1.3s ease-out;
background: url(../images/net.png) no-repeat;
display: block;
height: 100%;
width: 65px;
padding: 56px 0 0 0;
background-size: 100%;
}
.list_hosting ul li:nth-child(3) {
position: absolute;
left: 118px;
top: 0px;
-webkit-animation: bounce 1.4s ease-out;
-moz-animation: bounce 800ms ease-out;
-o-animation: bounce 800ms ease-out;
animation: bounce 1.4s ease-out;
background: url(../images/com.png) no-repeat;
display: block;
height: 100%;
width: 83px;
padding: 60px 0 0 0;
background-size: 100%;
}
.list_hosting ul li:nth-child(4) {
position: absolute;
left: 195px;
top: 2px;
-webkit-animation: bounce 1.5s ease-out;
-moz-animation: bounce 800ms ease-out;
-o-animation: bounce 800ms ease-out;
animation: bounce 1.5s ease-out;
background: url(../images/us.png) no-repeat;
display: block;
height: 100%;
width: 60px;
padding: 36px 0 0 0;
background-size: 100%;
}
.list_hosting ul li:nth-child(5) {
position: absolute;
right: 0;
top: 1px;
-webkit-animation: bounce 1.6s ease-out;
-moz-animation: bounce 800ms ease-out;
-o-animation: bounce 800ms ease-out;
animation: bounce 1.6s ease-out;
background: url(../images/us.png) no-repeat;
display: block;
height: 100%;
width: 65px;
padding: 39px 0 0 0;
background-size: 100%;
}
#aboutus_sec {
padding: 212px 0;
}

.single-portfolio {
display: inline;
float: left;
margin: 18px;
width: 90%;
}
.portfolio-title {
padding-bottom: 40px;
}
.portfolio-title h4 {
font-size: 18px;
font-weight: 600;
}
.portfolio-title span {
font-size: 17px;
}
.portfolio-social-icon {
padding: 18px 0px;
}
.portfolio-social-icon a {
font-size: 30px;
height: 50px;
line-height: 24px;
margin: 30px 2px;
padding: 10px;
width: 50px;
}

}
.navbar-default li {
margin: 5px 20px;
}
/*policy*/
.policy-section-margin{
  margin-top: 100px;
  margin-bottom: 20px;
}
#contact p{
  color:white!important;
}

/* Accessibility - Visually Hidden Class for Screen Readers */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Touch Target Improvements - Minimum 44px for mobile */
.contact_sec ul li {
  width: 44px;
  height: 44px;
  line-height: 44px;
}

.social_links li {
  width: 44px;
  height: 44px;
  line-height: 44px;
}

/* Responsive Portfolio Grid */
@media (max-width: 991px) {
  .single-portfolio {
    width: 48%;
    margin-left: 1%;
  }
}

@media (max-width: 575px) {
  .single-portfolio {
    width: 100%;
    margin-left: 0;
  }

  #contact input[type="text"],
  #contact input[type="email"],
  #contact textarea {
    width: 100%;
  }
}

/* Focus States for Keyboard Navigation */
.portfolio-menu ul li:focus,
.nav-link:focus,
button:focus,
a:focus {
  outline: 2px solid #36a8ff;
  outline-offset: 2px;
}

/* Section Link Buttons */
.btn-link-more {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, #ffa400 0%, #ff8c00 100%);
  color: #fff;
  padding: 14px 32px;
  border-radius: 30px;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing: 0.5px;
  box-shadow: 0 4px 15px rgba(255, 164, 0, 0.3);
  transition: all 0.3s ease;
  border: none;
  cursor: pointer;
}

.btn-link-more:hover {
  background: linear-gradient(135deg, #36a8ff 0%, #2890e0 100%);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(54, 168, 255, 0.4);
  text-decoration: none;
}

.btn-link-more i {
  transition: transform 0.3s ease;
}

.btn-link-more:hover i {
  transform: translateX(5px);
}

/* Blue variant for secondary actions */
.btn-link-more.btn-blue {
  background: linear-gradient(135deg, #36a8ff 0%, #2890e0 100%);
  box-shadow: 0 4px 15px rgba(54, 168, 255, 0.3);
}

.btn-link-more.btn-blue:hover {
  background: linear-gradient(135deg, #ffa400 0%, #ff8c00 100%);
  box-shadow: 0 6px 20px rgba(255, 164, 0, 0.4);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .btn-link-more {
    padding: 12px 24px;
    font-size: 13px;
  }
}

/* =========================================================================
   Mobile / tablet layout fixes (added 2026-05-26)
   These rules only fire below the xl/lg breakpoints — desktop layout is
   intentionally untouched.
   ========================================================================= */

/* HERO: the decorative .services_main_sec uses absolute-positioned children
   with negative `bottom` offsets that overflow into the next section the
   moment the col-xl-7/5 grid stacks vertically. Hide it below xl (1200px)
   and center the hero text — leave the existing height/background rules
   from the lower breakpoints (768px sets a mobile background + 85vh) in
   charge of vertical sizing. */
@media (max-width: 1199.98px) {
  .services_main_sec {
    display: none !important;
  }
  .banner_left_sec {
    padding-right: 0 !important;
    text-align: center;
  }
  .banner_left_sec h1,
  .banner_left_sec .hero-tagline {
    margin-left: auto;
    margin-right: auto;
  }
  .banner_left_sec .hero-tagline {
    max-width: 560px;
  }
}

/* HERO BACKGROUND: background-attachment: fixed on .parallax-section is
   broken on iOS Safari (the image gets clipped/stretched). Disable parallax
   on touch screens — the visual effect is desktop-only anyway. */
@media (max-width: 991.98px) {
  .parallax-section {
    background-attachment: scroll !important;
  }
  /* Hero needs a real height so:
       (a) the background image renders at a reasonable size,
       (b) the About Us section below has room and doesn't crash into the hero
           content. Keep the content at the TOP of that hero (flex-start)
           with small top padding so it sits just under the fixed nav. */
  #home {
    background-position: center center !important;
    display: flex !important;
    align-items: flex-start !important;
    padding: 28px 0 !important;
    min-height: 65vh !important;
    height: auto !important;
  }
  /* Belt-and-braces: a legacy rule used to set #home .container to
     position:absolute on tiny phones, which broke the entire layout.
     The rule is removed, but pin position:static here so any future
     regression can't break the hero again. */
  #home .container {
    position: static !important;
    top: auto !important;
  }
  /* Tablet + phone: h1 sized to fit the viewport without absurd line wrap,
     tagline constrained with side padding so it never clips the edge. */
  .banner_left_sec {
    margin-top: 0 !important;
    padding: 0 20px;
  }
  .banner_left_sec h1 {
    font-size: 34px !important;
    line-height: 1.25;
    margin-top: 0;
    margin-bottom: 14px;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
  .banner_left_sec .hero-tagline {
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 0;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Phone-specific tightening for the smaller end of the range. */
@media (max-width: 767.98px) {
  /* HIDE the hero background image on mobile — at narrow widths the
     desktop-oriented image looks cropped/awkward. Replace with a clean
     light gradient so the text sits on a calm background. KEEP a real
     min-height so the About Us section below has clear separation from
     the hero text (without it, the next section visually crashes into
     the h1/tagline). */
  #home {
    background-image: none !important;
    background: linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%) !important;
    min-height: 45vh !important;
    padding: 28px 0 48px !important;
  }
  .banner_left_sec h1 {
    color: #0f172a; /* dark text now that there's no busy background */
  }
  /* Belt-and-braces: ensure About Us never starts so close to the hero
     that its decorative pills overlap the hero text on any phone width. */
  #aboutus_sec {
    margin-top: 0;
    padding-top: 60px !important;
  }
  #aboutus_sec .left_sec,
  #aboutus_sec .right_sec {
    margin-bottom: 30px;
  }
}

@media (max-width: 575.98px) {
  #home {
    min-height: 40vh !important;
    padding: 24px 0 40px !important;
  }
  .banner_left_sec h1 {
    font-size: 28px !important;
  }
  .banner_left_sec .hero-tagline {
    font-size: 15px;
  }
}

/* Very narrow / older phones — keep text legible without overflow. */
@media (max-width: 360px) {
  .banner_left_sec h1 {
    font-size: 24px !important;
  }
  .banner_left_sec .hero-tagline {
    font-size: 14px;
  }
}

/* ABOUT US: the legacy `padding: 201px 0` on tablet was a workaround to
   clear the .services_main_sec overflow from the section above. With
   .services_main_sec hidden on the same breakpoints, that padding is no
   longer needed and was visually pushing the section into the hero. */
@media (max-width: 1024px) {
  #aboutus_sec {
    padding: 80px 0 !important;
  }
}

/* TEC-AI SECTION: two .btn-link-more buttons wrap without vertical spacing
   on narrow screens, so the second sits flush against the first ("on top of
   the other"). Stack them with consistent width + gap below md. */
@media (max-width: 767.98px) {
  .btn-link-more {
    display: flex;
    width: 100%;
    max-width: 360px;
    margin: 0 auto 12px;
    justify-content: center;
    text-align: center;
  }
  .btn-link-more.me-3 {
    margin-right: auto !important;
  }
  /* The trailing note under the buttons no longer needs the inline mt-3
     once the buttons have their own bottom margin — keep it readable. */
  .btn-link-more + .btn-link-more {
    margin-top: 0;
  }
}