@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600');
html,body
{
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    overflow-x: hidden; 

}
body {
	font-family: 'Open Sans', sans-serif;
	font-size: 14px;
	width: 100%;
	margin: 0%;
	overflow-x: hidden;
	color:#3d3d3d
}
.section-banner{
	background-image: radial-gradient(rgb(39, 164, 220) 0%, 30%, rgb(19, 136, 191) 60%);
	height: 100vh;
}
.banner {
    min-height: 100vh;
    background: url(../img/ai-bg.svg) no-repeat top;
    background-size: cover;
    position:relative;
}
.logo{
	margin:0 auto;
	position:absolute;
	left:50%;
	top:45%;
	transform:translate(-50%, -50%);
}

.about{
	background:#fff;
	height:100vh
}
.about img{
	border-radius: 10px;
	
}
.title{
	margin-top: 30px;
	color:#27a8e0;
	font-size:35px;
	font-weight:bold;
	margin-bottom: 10px;
}
.sub-title{
	color:#7f7f7f;
	font-weight:bold;
	/* width: 369px; */
}
.col.b{
	padding:0
}
em, strong{
	color:#f3715c;
	font-weight:bold
}
ul {
  list-style: none;
  padding:0
}

ul li:before {
  content: '\2714\0020';
  color:rgb(39, 168, 224);
  font-weight: bolder;
}
.address{
	background:#e7f5fb;
}
address{
	padding: 0px 0px 0px 0px;
	margin-top: 5px;
}

@media(max-width:400px){
    address{
	padding: 10px 0px 0px 0px;
	margin-top: 15px;
}
}
address .fa{
	font-size:16px;
	margin-right: 10px;
	color: rgb(19, 136, 191);
	width: 15px;
}
address strong{
	color:#333
}
.under-dev{
	position: absolute;
	left: 50%;
	transform: translate(-50%, -50%);
	top: 85%;
	color:#fff;
	text-align: center;
	width:100%
}
.under-dev h6{
	margin-bottom: 30px;
}
/*===== Responsive ==========*/

@media(max-width:400px){
	.logo{
		width:calc(100% - 15px);
	}
	.title{
		margin-top:20px
	}
	.banner {
		height: 500px;
	}
	.title.invisible{
		display:none
	}
}

canvas {
  display: block;
  vertical-align: bottom;
}

/* ---- particles.js container ---- */

#particles-js {
  position: absolute;
  width: 100%;
  height: 70%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  top: 0;
  /* opacity: 0.48; */
  z-index: 1;
}
.mouse {
    width: 26px;
    position: absolute;
    height: 38px;
    border-radius: 10px;
    border: 2px solid rgb(229, 229, 229);
    bottom: 60px;
    right: 0;
    left: 0;
    bottom: 30px;
    margin: auto;
    cursor: pointer;
    -webkit-transition: border-color .2s ease-in;
    -moz-transition: border-color .2s ease-in;
    transition: border-color .2s ease-in;
    z-index: 999;
}
.mouse .scroll {
    display: block;
    margin: 6px auto;
    width: 6px;
    height: 9px;
    border-radius: 4px;
    background: rgb(124, 218, 231);
    -webkit-animation-duration: 2s;
    -moz-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-name: scroll;
    -moz-animation-name: scroll;
    animation-name: scroll;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}
.mouse a {
    display: block;
    height: 60px;
    left: -12px;
    position: absolute;
    top: -20px;
    width: 60px;
}
.mouse:hover {
    border: 2px solid rgb(124, 218, 231);
}
@-webkit-keyframes scroll {
    0% {
        opacity:0
    }
    10% {
        opacity:1;
        -webkit-transform:translateY(0px);
        -ms-transform:translateY(0px);
        transform:translateY(0px)
    }
    100% {
        opacity:0;
        -webkit-transform:translateY(10px);
        -ms-transform:translateY(10px);
        transform:translateY(10px)
    }
}
@-moz-keyframes scroll {
    0% {
        opacity:0
    }
    10% {
        opacity:1;
        -webkit-transform:translateY(0px);
        -ms-transform:translateY(0px);
        transform:translateY(0px)
    }
    100% {
        opacity:0;
        -webkit-transform:translateY(10px);
        -ms-transform:translateY(10px);
        transform:translateY(10px)
    }
}
@keyframes scroll {
    0% {
        opacity:0
    }
    10% {
        opacity:1;
        -webkit-transform:translateY(0px);
        -ms-transform:translateY(0px);
        transform:translateY(0px)
    }
    100% {
        opacity:0;
        -webkit-transform:translateY(10px);
        -ms-transform:translateY(10px);
        transform:translateY(10px)
    }
}
.footer{
	padding:2px 15px;
}
.social{
	margin-top:10px
}
.social .fa{
	font-size:36px;
}
.social a{
	display:inline-block;
	width: 36px;
	color: rgb(19, 136, 191);
}
p {
    margin-top: 0;
    margin-bottom: .6rem;
}
.fp-responsive .section,
.fp-responsive .section .fp-slide,
.fp-responsive .section .fp-tableCell{
    height: auto !important;
}
.fp-tableCell {
    vertical-align: middle;
}