/*banner1 css*/
.banner1{
  background-image: url("../images/back.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  /*background-color: #0058cc;*/
  height: 70.2vh;
  position: relative;
}
.banner1-content{
  text-align: left;
   position: static; 
  width: 100%;
  top:50px;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  width: 100%;
}
.banner1-heading{
  z-index: 1;
  font-family: "Public Sans", sans-serif;
  letter-spacing: 1px;
  color:#fff;
    font-size: 45px!important;
    /*font-weight: 700;*/
}

.text-yellow{
  color: #FFEC59;
}
.text-blue{
  color: #38DBFF;
}
.banner1-img{
/*   position: absolute; */
  bottom: 0;
}
.server1{
  max-width: calc(100px + (200 - 100) * ((100vw - 300px) / (1024 - 300)));
  width: 100%;
position: absolute;
bottom: 0;
left: 15%;
z-index: 1

}
.server2{
  max-width: calc(100px + (200 - 100) * ((100vw - 300px) / (1024 - 300)));
  width: 100%;
position: absolute;
bottom: 0;
right: 13%;
z-index: 1
}
@media only screen and (max-wdith: 900px){
  .server1{
    width: 200px;
  }
  .server2{
    width: 200px;
  }
}
/*end of banner 1 css*/

/*banner2 css*/
.banner2{
  /*background:url('../images/Untitled-design-7.webp');*/
  background-color: #0058cc;
  position: relative;
  height: 70.2vh;
}
.banner-image2{
  width: 50%;
  float: right;
  bottom: 0;
  position: absolute;
  bottom: 0;
  right: 4%;
}
.banner-head > h1{
  /*font-family: 'Source Sans Pro', sans-serif;*/
  letter-spacing: 1px;
  font-size: 27px;
  line-height: calc(1.5em + (2 - 1.5) * ((100vw - 300px)/(1600 - 300)));
  color:#fff;
  font-weight:600;
}
.banner-head2 > h1{
  font-family: 'Source Sans Pro', sans-serif;
  letter-spacing: 2px;
  font-size: calc(2rem + (40 - .5) * ((100vw - 300px) / (1600 - 300)));
 line-height: calc(1.5em + (2 - 1.5) * ((100vw - 300px)/(1600 - 300)));
 color:#fff;
}
.banner-btn {
    color: #fff;
    background-color: #C60000;
    border-color: #C60000;
    border-radius: 3px !important;
    /* font-size: 20px !important; */
      font-size: calc(15px + (20 - 15) * ((100vw - 300px) / (1600 - 300)));
}
.banner-btn:hover{
  color:#fff;
}
.b1-subhead{
  /* font-family: 'Fjalla One', sans-serif; */
  /*font-family: 'Roboto', sans-serif;*/
font-family: 'Source Sans Pro', sans-serif;
	background-color: #FA7500;
  max-width: 500px;
  width: 100%;
  /* border-radius: 50px; */
  color: #fff;
  /*font-size: calc(16px + (20 - 16) * ((100vw - 300px) / (1600 - 300)));*/
  letter-spacing: 1px;
  text-align: center;
  font-weight: 700;
    font-size: 40px;
}

.b2-subhead{
  /*font-family: 'Source Sans Pro', sans-serif;*/
  max-width: 550px;
  /* background-color: #ffbf45; */
    background-color: #FA7500;
  width: 100%;
  /* border-radius: 50px; */
  color: #fff;
  font-size: calc(22px + (20 - 15) * ((100vw - 300px) / (1600 - 300)));
  letter-spacing: 1px;
  text-align: center;
	font-weight:700;
}
.b3-subhead{
  font-family: 'Source Sans Pro', sans-serif;
  max-width: 500px;
  width: 100%;
  /* border-radius: 50px; */
  color: #fff;
  font-size: calc(15px + (20 - 15) * ((100vw - 300px) / (1600 - 300)));
  letter-spacing: 1px;
  text-align: center;
	font-weight:600;
}
.b3-subhead-color-1{
  background-color: #EC4A3A;
  /* border-radius: 50px; */
}
.b3-subhead-color-2{
  background-color: #7A23B5;
  /* border-radius: 50px; */
}
.b3-subhead-color-3{
  background-color: #3FAE00;
  /* border-radius: 50px; */
}
.banner-subhead{
  font-family: 'Source Sans Pro', sans-serif;
  /* font-size: 20px; */
  letter-spacing: 1px;
  width: 100%;

   /* line-height: calc(1.5em + (2 - 1.5) * ((100vw - 300px)/(1600 - 300))); */
   color:#fff;
}

.banner-content{
  width: 35%;
  padding-top: 7%;
  padding-bottom: 5%;
  /* padding-left: 3%; */
  float: left;
  background-color: rgba(0, 66, 153, 0.82);
  height: 100%
}
.strip-h{
  height: 100%;
  z-index: 1;
}
.banner-image1{
  width: 30%;
  float: left;
  margin-left: -17%;
}

.strip-one{
  width: 21.6%;
  float: left;
}
.strip-two{
  width: 20.6%;
  float: left;
}
.strip-three{
  width: 21.6%;
  float: left;
}
/*banner3  css*/
.banner3{
  /* background-color: #19407c; */
  background-color: #0058cc;
  position: relative;
  height: 70.2vh;
}
.digital-marketing-dollar{
  max-width: calc(170px + (200 - 100) * ((100vw - 250px) / (1024 - 300)));
width: 100%;
position: absolute;
bottom: 0;
left: 40%;
z-index: 1;
}
.website-design-banner {
  max-width: calc(170px + (300 - 100) * ((100vw - 250px) / (1024 - 300)));
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 35%;
  z-index: 1;
}
@media only screen and (max-width: 768px) and (min-width: 0px) {
  .website-design-banner {
    max-width: calc(280px + (200 - 100) * ((100vw - 250px) / (1024 - 300)));
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 17%;
    z-index: 1;
  }
}
.dm-banner-icon-left{
  max-width: calc(170px + (200 - 100) * ((100vw - 250px) / (1024 - 300)));
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 1;
}
.dm-banner-icon-right{
  max-width: calc(170px + (200 - 100) * ((100vw - 250px) / (1024 - 300)));
  width: 100%;
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 1;
}
.banner3{
  height: 55.2vh;
  display: flex;
  flex-flow: wrap row;
}

.banner-3-p1{
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
}
.banner-th{
  font-family: 'Source Sans Pro', sans-serif;
  letter-spacing: 1px;
  color: #fff;
}
.banner-theading{
  position: absolute;
  left: 0;
  right: 0;
}
/*end of banner3 css*/

/*if width less than 1366px remove lines*/
@media only screen and (max-width: 1023px){
  .banner-image1{
    display: none;
  }
  .banner-image2{
    right: 10%;
  }
  .banner-content{
    background-color: rgba(0, 0, 0, 0);
  }
}

@media only screen and (max-width: 667px) and (max-height: 375px){
  .banner2{
    height: 68vh;
  }

}

@media (orientation: portrait) {
  .banner-content{
    text-align: center;
    width: 100%;
    background-color: rgba(0, 0, 0, 0);
  }
  .banner-subhead{
    width: 90%;
  }
  .banner-image1{
    display: none
  }
  .banner-image2{
    width: 100%;
    right: 0;
  }
  .mobile-w{
    /* max-width: 700px; */
    max-width: calc(200px + (700 - 200) * ((100vw - 300px) / (1024 - 300)));
    width: 100%;
  }
  .banner-head > h1{
    font-size: calc(4em + (2 - 4) * ((100vw - 300px) / (1024 - 300)));
    line-height: calc(1.5em + (2 - 1.5) * ((100vw - 300px)/(1024 - 300)));
  }
  .banner-part-one{
    width: 100%;
    height: 34.5%;
    padding-top: 15px;
    margin-left: 0;
  }
  .banner-part-two{
    width: 100%;
    height: 34.5%;
    padding-top: 15px;
    margin-top: -6px;
    margin-left: 0;
  }
  .banner-part-three{
    width:100%;
    height: 34.5%;
    padding-top: 15px;
    margin-left: 0;
  }
  .banner-theading{
    width: 70%;
    left: 0;
    top: 20%;
  }
  .banner-3-p1{
    width: 30%;
    right: 0;
    left: 70%;
    top: 30%;
  }
  .banner-th {
    font-size: calc(25px + (45 - 25) * ((100vw - 300px) / (1600 - 300)));
    padding-left: 10px;
  }
  .server1{
    max-width: 150px;
    width: 100%;
    left: 5%;
  }
  .server2{
    max-width: 150px;
    width: 100%;
    right: 5%;
  }
}

@media (orientation: portrait) and (max-height:732px) {
  .banner2{
    height: 60vh;
  }
}
@media (orientation: portrait) and (max-height:640px) {
  .banner2{
    height: 64vh;
  }
}
.im-text-yellow{
  color: #FFD751;
}
.im-text-red{
  color: #FF695B;
}
.im-text-green{
  color:  #3d714f;
}

@media only screen and (max-height: 768px){
  .banner1{
    height: 60vh;
  }
  .banner2{
    height: 60vh;
  }
  .banner3{
    height: 60vh;
  }
}
@media only screen and (max-height: 834px){
  .banner1{
    height: 60vh;
  }
  .banner2{
    height: 50vh;
  }
  .banner3{
    height: 50vh;
  }
}
@media only screen and (max-height: 1024px){
  .banner1{
    height: 50vh;
  }
  .banner2{
    height: 75vh;
  }
  .banner3{
    height: 50vh;
  }
}
@media only screen and (max-height: 1080px){
  .banner1{
    height: 85vh;
  }
  .banner2{
    height: 67vh;
  }
  .banner3{
    height: 85vh;
  }

  
}

@media only screen and (max-width: 768px) and (min-width: 601px){
  .banner1{
    height: 40.2vh;
  }
  .banner2{
    height: 40.2vh;
  }
  .banner3{
    height: 40.2vh;
  }
}
@media only screen and (max-width: 600px) and (min-width: 375px){
  .banner1{
    height: 75.2vh;
  }
  .banner2{
    height: 75.2vh;
  }
  .banner3{
    height: 60.2vh;
  }
  .banner-3content{
    display: flex;
    flex-flow: wrap row;
  }
    
  .banner1-heading {
    font-size: 29px!important;
  }
  
  .b2-subhead {
    font-size: 22px!important;}
  
  
}
@media only screen and (max-width: 374px) and (min-width: 0px){
  .banner1{
    height: 70.2vh;
  }
  .banner2{
    height: 70.2vh;
  }
  .banner3{
    height: 70.2vh;
  }
}

/*carousel css*/
/*end of carousel css*/