@font-face {
    font-family: 'Exo 2';
    src: url('../fonts/Exo/Exo2-Bold.woff2') format('woff2'),
        url('../fonts/Exo/Exo2-Bold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

.hero-banner{
	position:relative;
}

.hero {
      position: relative;
      min-height: 600px;
      display: flex;
      align-items: center;
      overflow: hidden;
      padding:50px 0px;
    }

 .hero::before {
      content: '';
      position: absolute; inset: 0;
      background:
        linear-gradient(120deg, rgba(7,18,42,0.85) 45%, rgba(7,18,42,0.35) 100%),
        url('../images/flightslogic-api-banner.jpg') center/cover no-repeat;
      z-index: 0;
    } 

     .hero::after {
      content: '';
      position: absolute; inset: 0;
      background-image:
        linear-gradient(rgba(26,127,222,0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(26,127,222,0.07) 1px, transparent 1px);
      background-size: 60px 60px;
      z-index: 1;
      animation: gridPan 20s linear infinite;
    } 

    .hero .container{
    	position:relative;
    	z-index:5;
    }

    /* Glowing orb */
    .orb {
      position: absolute;
      width: 500px; height: 500px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(26,127,222,0.25) 0%, transparent 70%);
      top: -100px; left: -100px;
      z-index: 2;
      animation: pulse 6s ease-in-out infinite alternate;
    }
    @keyframes pulse {
      from { transform: scale(1);   opacity: 0.6; }
      to   { transform: scale(1.2); opacity: 1; }
    } 

    /* Floating particles */
    .particles { position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; }
    .particle {
      position: absolute;
      border-radius: 50%;
      background: rgba(26,127,222,0.5);
      animation: float linear infinite;
    }

    @keyframes float {
      0%   { transform: translateY(100vh) scale(0); opacity: 0; }
      10%  { opacity: 1; }
      90%  { opacity: 0.7; }
      100% { transform: translateY(-10vh) scale(1); opacity: 0; }
    }

    .hero .banner-heading h1{
    color: #fff;
    font-family: 'Exo-2', sans-serif;
    font-weight: bold;
    font-size: 50px;
    margin: 0px;
    line-height: 1.3;
    }


    .hero .banner-heading h1 .api{
    	color:#f5a623;
    	font-family: 'Exo-2', sans-serif;
    font-weight: bold;
    }

    .hero .banner-heading p{
    	color: rgba(255, 255, 255, 0.8);
    font-size: 16px;
    text-transform: uppercase;
    font-family: 'ralewaybold';
    margin: 10px 0px;
    }

    .login-card{
    	    background-color: rgba(255, 255, 255, 0.9);
	    padding: 20px;
	    border-radius: 10px;
    }

    .login-card h4{
    	font-size: 20px;
	    font-family: ralewaybold;
	    text-align: center;
	    margin: 0px;
    }

    .login-card p{
    	font-size: 13px;
	    text-align: center;
	    margin-bottom: 20px;
    }

    .login-card label{
    	font-size:12px;
    }

    .login-card .input-group .input-group-addon{
    	border: none;
	    min-width: 40px;
	    font-size: 20px;
	    background-color: #fff;
	    border-right: 1px solid #eee;
	    border-radius: 5px 0px 0px 5px;
    }

    .login-card .input-group .form-control{
    	    height: 40px;
	    border-radius: 0px 5px 5px 0px;
	    font-size: 13px;
	    box-shadow: none;
    }

    .login-card .submit-btn{
    	background-color: #2a8ad8;
	    border: 1px solid #2a8ad8;
	    color: #fff;
	    font-size: 16px;
	    text-transform: uppercase;
	    font-family: 'ralewaybold';
	    width: 100%;
	    outline: 0px;
	    box-shadow: none;
    }

    .api-document-sec{
    	background-color:#fff;
    	padding:50px 0 0;
    }

    .api-document-sec h3{
    	    font-size: 24px;
	    font-family: 'ralewaybold';
	    text-align: center;
	    color: #333;
	    margin-bottom: 5px;
    }

    .api-document-sec .api-mod-div{
    	    display: flex;
	    align-items: flex-start;
	    background-color: #eee;
	    box-shadow: rgb(204, 204, 204) 0px 5px 5px;
	    margin-top: 25px;
	    padding: 15px;
	    border-radius: 10px;
	    min-height:127px;
    }

    .api-document-sec .api-mod-div .icon{
    	min-height: 75px;
	    min-width: 75px;
	    background-color: #fff;
	    margin-right: 10px;
	    display: flex;
	    align-items: center;
	    justify-content: center;
	    border-radius: 10px;
    }

    .api-document-sec .api-mod-div .icon .fa{
    	font-size:40px;
    	color:#0052cc;
    }

    .api-document-sec .api-mod-div h4{
    	    font-size: 18px;
	    font-family: 'ralewaybold';
	    margin: 0 0 5px;
    }

    .api-document-sec .api-mod-div p{
    	    font-size: 14px;
    	margin: 0px;
    }

    .overview-sec{
    	padding:40px 0px 0px;
    }

    .overview-sec h3{
    	font-size: 24px;
	    font-family: 'ralewaybold';
	    text-align: left;
	    color: #333;
	    margin:0 0 15px;
    }

    .overview-sec h4{
    	font-size:20px;
    	font-family:'ralewaybold';
    	text-align:left;
    	color:#333;
    	margin:0 0 10px;
    }

    .overview-sec p{
    	font-size:14px;
    	margin-bottom:15px;
    }

    .overview-sec ul{
    	padding-left:15px;
    	margin:0px;
    }

    .overview-sec ul li{
    	font-size:14px;
    	margin-bottom:5px;
    }

    .overview-sec ul li:last-child{
    	margin-bottom:15px;
    }

    .list-items-sec{
    	padding:40px 0px;
    }

    .list-items-sec h3{
    		font-size: 24px;
    font-family: 'ralewaybold';
    text-align: left;
    color: #333;
    margin: 0 0 15px;
    }

    .list-items-sec p{
    		    font-size: 14px;
    margin-bottom: 15px;
    }

    .list-items-sec ul{
    		list-style-type:none;
    		padding:0px;
    		margin:0px;
    }

    .list-items-sec ul li{
    		font-size:14px;
    		margin-bottom:8px;
    }

    .list-items-sec ul li:before{
    		content: "\f0a4";
    font-family: FontAwesome;
    display: inline-block;
    margin-left: 0;
    width: 1.2em;
    color: #0072cf;
    font-size: 20px;
    vertical-align: middle;
    text-indent: -2px;
    }

    .list-items-sec .items-div{
    		background-color: #f1f1f1;
	    padding: 15px;
	    border-radius: 10px;
    }

    .list-items-sec .last-point p{
    		font-weight:600;
    }



    @media screen and (min-width:768px){
    	.hero .row{
    		display:flex;
    		align-items:center;
    		flex-wrap:wrap;
    	}
    }

    @media screen and (max-width:991px){
    	.list-items-sec .items-div{margin-bottom:20px;}
    }