/* font */
@font-face {
  font-family: 'Helvetica';
  src: url('font/Helvetica.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
}  

*{
	font-family: Helvetica;
}

body{
    font-family: Helvetica;
    
}


.sh2
{
	color: white;
    line-height: unset;
    position: absolute;
}
/* header animation */
.div1 {
  position: absolute;
  -webkit-animation: mymove 3s;  /* Safari 4.0 - 8.0 */
  -webkit-animation-fill-mode: forwards; /* Safari 4.0 - 8.0 */
  animation: mymove 2s;
  animation-fill-mode: forwards;
}

.text-bgg {
  
}

.jumbotron {
	margin-bottom:0px;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes mymove {
  0% {
    width: 0px;
    height: 100px;
  }
  100% {
    width: 100%;
    height: 100%;
  }
}

@keyframes mymove {
  0% {
    width: 0px;
    height: 100px;
  }
  100% {
    width: 100%;
    height: 100%;
  }
}
	
	

.ctest{
    animation: fadein 5s;
    -moz-animation: fadein 5s; /* Firefox */
    -webkit-animation: fadein 5s; /* Safari and Chrome */
    -o-animation: fadein 5s; /* Opera */
}
@keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-moz-keyframes fadein { /* Firefox */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-webkit-keyframes fadein { /* Safari and Chrome */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-o-keyframes fadein { /* Opera */
    from {
        opacity:0;
    }
    to {
        opacity: 1;
    }
}


@media only screen and (max-width: 1600px)
{
    #div1 
    {
            padding-left: 12.5% !important;
            padding-top: 1%;
    }
    
}


@media only screen and (max-width: 1920px)
{
    #div1 
    {
        margin-left: 30% !important;
    margin-top: 2.2% !important;
    }
    
}




@media only screen and (max-width: 150px)
{
    #middlebanner 
    {
        display:none;
    }
    
}


@media only screen and (max-width: 300px)
{
    #middlebanner
    {
        display:none;
    }
    
}



@media only screen and (max-width: 350px)
{
    #middlebanner 
    {
        display:none;
    }
    
}


@media only screen and (max-width: 480px)
{
    #middlebanner
    {
        display:none;
    }
    
}


@media only screen and (min-width: 1600px)
{
    #fadepara 
    {
        display:none !important;
    }
    
}


@media only screen and (min-width: 1920px)
{
    #fadepara 
    {
        display:none;
    }
    
}



@media only screen and (max-width: 400px)
{
    #circle 
    {
        display: none;
    }
}

@media only screen and (max-width: 600px)
{
    #circle 
    {
        display: none;
    }
}


@media only screen and (max-width: 800px)
{
    #circle 
    {
        display: none;
    }
}



@media only screen and (max-width: 600px)
{
    #circle 
    {
        display: none;
    }
}

@media only screen and (max-width: 400px)
{
    #home-service 
    {
        margin-top:-5% !important;
        font-size:10px !important;
    }
}

@media only screen and (max-width: 401px)
{
    #home-service 
    {
        margin-top:-5% !important;
        font-size:10px !important;
    }
}

@media only screen and (max-width: 500px)
{
    #home-service 
    {
        margin-top:-5% !important;
        font-size:10px !important;
    }
}

@media only screen and (max-width: 600px)
{
#style-1    
    {
        height:250px !important;
       
    }
    
}


@media only screen and (max-width: 500px)
{
#style-1    
    {
        height:250px !important;
       
    }
    
}


@media only screen and (max-width: 400px)
{
#style-1    
    {
        height:200px !important;
       
    }
    
}


@media only screen and (max-width: 300px)
{
#style-1    
    {
        height:200px !important;
       
    }
    
}



@media only screen and (max-width: 400px)
{
    #heading5 
    {   font-size: 10px;
        width:120%;
        margin-left:5% !important;
    }
}


@media only screen and (max-width: 600px)
{
    #heading5
    {   font-size: 10px;
        width:120%;
        margin-left:5% !important;

    }
}


@media only screen and (max-width: 150px)
{
    #heading5 
    {   font-size: 10px;
        width:120%;
        margin-left:5% !important;

    }
}


@media only screen and (max-width: 300px)
{
    #heading5
    {   font-size: 10px;
        width:120%;
        margin-left:5% !important;

    }
}



@media only screen and (max-width: 400px)
{
    #heading7 
    {
        width:120%;
        font-size: 10px;
        margin-left:5% !important;

    }
}


@media only screen and (max-width: 600px)
{
    #heading7
    {   font-size: 10px;
        width:120%;
        margin-left:5% !important;

    }
}


@media only screen and (max-width: 150px)
{
    #heading7 
    {
        width:120%;
        font-size: 10px;
        margin-left:5% !important;
    }
}


@media only screen and (max-width: 300px)
{
    #heading7
    {   font-size: 10px;
        width:120%;
        margin-left:5% !important;

    }
}


@media only screen and (max-width: 400px)
{
    #heading6 
    {
        width:120%;
        font-size: 10px;
        margin-left:5% !important;

    }
}


@media only screen and (max-width: 600px)
{
    #heading6
    {   font-size: 10px;
        width:120%;
        margin-left:5% !important;

    }
}



@media only screen and (max-width: 150px)
{
    #heading6 
    {
        width:120%;
        font-size: 10px;
        margin-left:5% !important;

    }
}


@media only screen and (max-width: 300px)
{
    #heading6
    {   font-size: 10px;
        width:120%;
        margin-left:5% !important;

    }
}


@media only screen and (max-width: 400px)
{
    #serb 
    {
         margin-top: -10% !important;
         font-size: 14px;
    }
}


@media only screen and (max-width: 600px)
{
    #serb
    {   
        margin-top: -10% !important;
        font-size:14px;
    }
}


@media only screen and (max-width: 150px)
{
    #serb 
    {
         margin-top: -10% !important;
         font-size: 12px;
    }
}


@media only screen and (max-width: 300px)
{
    #serb
    {   
        margin-top: -12% !important;
        font-size:14px;
    }
}


@media only screen and (max-width: 400px)
{
    #servicesvg 
    {
         display: none;
    }
}


@media only screen and (max-width: 600px)
{
    #servicesvg
    {   
        display: none;
    }
}


@media only screen and (max-width: 150px)
{
    #servicesvg 
    {
         display: none;
    }
}


@media only screen and (max-width: 300px)
{
    #servicesvg
    {   
        display: none;
    }
}

@media only screen and (max-width: 400px)
{
    #servicepara
    {
         margin-left: 1% !important;
    }
}


@media only screen and (max-width: 600px)
{
    #servicepara
    {   
        margin-left: 1% !important;
    }
}


@media only screen and (max-width: 400px)
{
    #sericon
    {
         margin-left: 10% !important;
    }
}


@media only screen and (max-width: 600px)
{
    #sericon
    {   
        margin-left: 10% !important;
    }
}


@media only screen and (max-width: 400px)
{
    #servicebtn
    {
         margin-left: 1% !important;
    }
}


@media only screen and (max-width: 600px)
{
    #servicebtn
    {   
        margin-left: 1% !important;
        
    }
}



@media only screen and (max-width: 400px)
{
    #serviceparbtn
    {
         margin-left: 1% !important;
         font-size: 10px;
    }
}


@media only screen and (max-width: 600px)
{
    #serviceparbtn
    {   
        margin-left: 1% !important;
        font-size: 10px
    }
}


@media only screen and (max-width: 400px)
{
    .test2
    {
         margin-left: 10% !important;
         font-size: 10px;
    }
}


@media only screen and (max-width: 600px)
{
    .test2
    {   
        margin-left: 10% !important;
        font-size: 10px
    }
}

/* end of header animation */
/* header animation */
/* Safari 4.0 - 8.0 */
@-webkit-keyframes mymove {
  0% {
    width: 0px;
    height: 100px;
  }
  100% {
    width: 100%;
    height: 100%;
  }
}

@keyframes mymove {
  0% {
    width: 0px;
    height: 100px;
  }
  100% {
    width: 100%;
    height: 100%;
  }
}
@keyframes slideInFromLeft {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}
#div1 {
  position: absolute;
  -webkit-animation: 4s ease-out 0s 1 mymove; /* Safari 4.0 - 8.0 */
  animation: mymove 4s;
  animation-fill-mode: forwards;
      margin-top: 3%;
    margin-left: 42.5%;
}
.disl{}
#ap{margin-top: 41%; width: 90%;text-align: justify;}
.showd{
	-webkit-box-shadow: 0px 0px 22px 5px rgba(179,177,179,1);
-moz-box-shadow: 0px 0px 22px 5px rgba(179,177,179,1);
box-shadow: 0px 0px 22px 5px rgba(179,177,179,1);
}
.dpara{
    z-index: -1;
    position: absolute;
    width: 200%;
    text-align: justify;
    margin-top: 0%;
}
.mymt{
    margin-top: 42%;
}
@media only screen and (max-width: 1024px) {
  #div1 {
	display:none;	
}
.disl{display:none;}
#ap{margin-top: 0%; width: 100%;}
.dpara{
    z-index: 0;
    position: relative;
    width: 100%;
    margin-top: 0%;
}
.mymt{
    margin-top: 2%;
}
.div-para2 {
    min-width: 100%;
    margin:0px;
}
.sh2
{
	position: relative;
}
.text-bgg
{
	display: none;
}
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes mymove {
  0% {
    width: 0px;
    height: 100px;
  }
  100% {
    width: 100%;
    height: 100%;
  }
}

@keyframes mymove {
  0% {
    width: 0px;
    height: 100px;
  }
  100% {
    width: 100%;
    height: 100%;
  }
}
	
	
#test{
    animation: fadein 6s;
    -moz-animation: fadein 6s; /* Firefox */
    -webkit-animation: fadein 6s; /* Safari and Chrome */
    -o-animation: fadein 6s; /* Opera */
}
@keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-moz-keyframes fadein { /* Firefox */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-webkit-keyframes fadein { /* Safari and Chrome */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-o-keyframes fadein { /* Opera */
    from {
        opacity:0;
    }
    to {
        opacity: 1;
    }
}



.test{
    animation: fadein 6s;
    -moz-animation: fadein 6s; /* Firefox */
    -webkit-animation: fadein 6s; /* Safari and Chrome */
    -o-animation: fadein 6s; /* Opera */
}

.test2{
    animation: fadein 20s;
    -moz-animation: fadein 20s; /* Firefox */
    -webkit-animation: fadein 20s; /* Safari and Chrome */
    -o-animation: fadein 20s; /* Opera */
}
@keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-moz-keyframes fadein { /* Firefox */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-webkit-keyframes fadein { /* Safari and Chrome */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-o-keyframes fadein { /* Opera */
    from {
        opacity:0;
    }
    to {
        opacity: 1;
    }
}

.custom-header{
	text-align: center;
	color:white;
    background: url(../images/banner.jpg) no-repeat top;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
	background-position: center;
}
li{
	color:#000;
}

.myselect {
	background: rgba(255, 255, 255, 0.1);
	float: left;
	border: #fff 1px solid;
	border-radius: 3px;
	position: relative;
	display: block;
	outline: none;
	width: 80%;
	height: 10%;
	margin: 0 auto;
	padding: 5px;
	color: #fff;
	}
	.myselect select {
  display: none; /*hide original SELECT element: */
}

.myselect-selected {
  text-decoration: underline;
}
	::-webkit-input-placeholder { color: #666;} 
	:-moz-placeholder { color: #666; }
	::-moz-placeholder { color: #666; }
	:-ms-input-placeholder { color: #666; }



	/* Create two equal columns that floats next to each other */
	.ccolumn {
	float: left;
	margin-top: 65px;
	width: 50%;
	padding: 10px;
	height: 300px; /* Should be removed. Only for demonstration */
	}

	/* Clear floats after the columns */
	.rrow:after {
	content: "";
	display: table;
	clear: both;
	}

	@media screen and (max-width: 600px) {
	.ccolumn {
	margin-top: 0px;	
	width: 100%;
	}
	}

.nav-link {
    display: block;
    padding: .5rem 1rem;
    color: #0a1931;
    margin-right: 63px;
    font-weight: 500;
    font-family:Arial, Helvetica, sans-serif;
}

.ul li a:active {
    font-weight: 700;
}

/* footer */

.footer {
    position: relative;
    background-color: #e4e4e4;
    color: #040404;
    padding: 60px;
}
.footer ul {
    line-height: 1.3em;
    list-style-type: none;
    padding-left: 0px;
    margin-bottom: 45px;
}
.footer ul a {
    color:#000;
	font-weight: lighter;
	cursor: default;
}
.footer ul a:hover {
    color:#000;;
    text-decoration:none;
	cursor: default;
}
/*footer bottom */
.footer-bottom {
    padding-top: 30px;
    padding-bottom: 50px;
    /* border-top: 1px solid rgba(0,0,0,0.09); */
    background: #2b2b2b;
    
}

/* Contact us */

.contact h5 {
    font-size: large;
    padding: 0px;
    margin: 2px;
}

.contact ul {
    line-height: 1.3em;
    list-style-type: none;
    padding-left: 0px;
    margin-bottom: 45px;
}
.contact ul a {
    color: white;
	font-weight: lighter;
}
.contact ul a:hover {
    color:#274abb;;
    text-decoration:none;
}

/* About us */
.grad1 {
    background-image: linear-gradient(to bottom right, #72d8b3, #04506f);
    font-size: x-large;
    color: white;
    padding: 5% 5%;
}

/* main content */
.div-para1{
	width: 900px;
    color: black;
    font-size: 16px;
    margin-top: 40px;
	margin-left: 100px;
}
.div-para2{
	padding-bottom: 5%;
    padding-top: 3%;
    padding-left: 3%;
    padding-right: 3%;
	width: 40%;
    background-color: white;
    float: right;
    margin-right: 2%;
    margin-top: 28%;
    -webkit-box-shadow: 0px 0px 10px 1px rgba(179,177,179,1);
	-moz-box-shadow: 0px 0px 10px 1px rgba(179,177,179,1);
	box-shadow: 0px 0px 10px 1px rgba(179,177,179,1);
}
.div-li1 {
    list-style: none;
    font-size: 1.5em;
    letter-spacing: 3px;
}
.div-hr1{
	width: 84%;
}
.div-para3{
	padding-bottom: 5%;
    padding-top: 3%;
    padding-left: 3%;
    padding-right: 3%;
	width: 100%;
    background-color: white;
    float: right;
    margin-right: 2%;
    margin-top: 80%;
    -webkit-box-shadow: 0px 0px 10px 1px rgba(179,177,179,1);
	-moz-box-shadow: 0px 0px 1px 10px rgba(179,177,179,1);
	box-shadow: 0px 0px 10px 1px rgba(179,177,179,1);
}
.div-para4{
	width: 915px;
    color: black;
    font-size: 16px;
    margin-top: 40px;
    margin-left: 100px;
}
.div-para5{
	width: 730px;
    color: black;
    font-size: 16px;
    margin-top: 491px;
	margin-left: 100px
}
#para-1{
	margin-top: 10%;
    font-size: 1.4em;
    margin-left: 2%;
}

.btn-primary-outline {
  background-color: transparent;
  border-color: #ccc;
}
/* End about us*/

/* CSS Document */

.btn-block{
	display: block;
    width: 300px;
    height: 50px;
    padding-top: 10px;
    color: white;
	border-color: white;
}

.toggle-content {
	display: none;
	height: 0;
	overflow: hidden;
	transition: height 350ms ease-in-out;
}

.toggle-content.is-visible {
	display: block;
	height: auto;
}

.jumbotron {
    margin-bottom: 0;
}
.li1{
	list-style: none;
	font-size: 0.9em;
	margin-left: 0px;
	color:white;
}

#line1{
	width: 180px;
	position: absolute; 
	padding-top: 0px;
	margin-left: 0px;
}

#line2{
	position: absolute;
	width: 2px;
	height: 56%;
	margin-left: 0px;
}
.square-list {
  height: 20px;
  width: 20px;
  background-color: #fff;
}

#circle1{
	position: absolute;
    padding-top: 0px;
    padding-left: 0px;
}

/* width */
#style-1::-webkit-scrollbar {
  width: 12px;
}

/* Track */
#style-1::-webkit-scrollbar-track {
  background: #ffffff; 
}
 
/* Handle */
#style-1::-webkit-scrollbar-thumb {
  background: #bfbfbf; 
}

/* Handle on hover */
#style-1::-webkit-scrollbar-thumb:hover {
  background: #bab7b7; 
}

.myoverlay {  
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  z-index: 2;
  opacity: 1;
  background: rgba(39, 42, 43, 0.8);
  transition: opacity 200ms ease-in-out;
  border-radius: 4px;
margin: -15px 0 0 -15px;}

.myoverlay2 {  
	height: 85%;
	border-left: 1px solid rgb(255, 255, 255);
	position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-color:rgba(0, 0, 0, 0.85);
    background: url(data:;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAABl0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjUuNUmK/OAAAAATSURBVBhXY2RgYNgHxGAAYuwDAA78AjwwRoQYAAAAAElFTkSuQmCC) repeat scroll transparent\9;
    z-index:9999;
    color:white;}

.myBox {
border: none;
overflow: scroll;
height: 190px;
}