/************ Google Fonts ************/
@import url('https://fonts.googleapis.com/css?family=Poppins|Raleway');

/************ General  ************/
body {
    font-family: 'Poppins', sans-serif;
    margin: 0;
}
h2 {
    font-family: 'Raleway', sans-serif;
    margin-top: 80px;
}
h4 {
    font-family: 'Raleway', sans-serif;
    margin-bottom: -20px;
    font-size: 1.1em;
    text-transform: uppercase;
}
hr {
    display: block;
    width: 10%;
    border: none;
    height: .1em;
    background: #6f668c;
}
img#header-img {
  width: 10%;
}
.button{
  padding: 16px 40px;
  background-color: #00ced1;
margin-left: -4px;
border: 1px solid #666;
color: #fff;
border-radius:10px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 1em;
cursor: pointer;
box-shadow: 3px 3px 20px 0px rgba(0,0,0,0.3);
transition: 0.3s;
margin: 5px;

}

	/*=== Trigger  ===*/
.animate {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

/*=== Optional Delays, change values here  ===*/
.one {
-webkit-animation-delay: 0.4s;
-moz-animation-delay: 0.4s;
animation-delay: 0.4s;
}

.two {
-webkit-animation-delay: 1.7s;
-moz-animation-delay: 1.7s;
animation-delay: 1.7s;
}

.three {
-webkit-animation-delay: 2.3s;
-moz-animation-delay: 2.3s;
animation-delay: 2.3s;
}

.four {
-webkit-animation-delay: 3.3s;
-moz-animation-delay: 3.3s;
animation-delay: 3.3s;
}
/*=== FADE IN  ===*/
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}


/*=== FADE IN DOWN ===*/
@-webkit-keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
}

/*==== FADE IN UP ===*/
@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}

/*=== FADE IN LEFT ===*/
@-webkit-keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeInLeft {
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
}


/*==== FADE IN RIGHT ===*/
@-webkit-keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeInRight {
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight;
}


        .img-double-border {
           padding:1px;
           border:1px solid #021a40;
           background-color:deepskyblue;
            }
        .img-border {
            border:1px solid #021a40;
            }

        .blck-text-color {
            color: rgba(0, 0, 0, 0.68);
        }
        .panel-min-height {
            min-height: 210px;
        }

        .dropdown:hover .dropdown-menu {
        display: block;
        margin-top: 0; // remove the gap so it doesn't close
 }


/************ Navbar ************/
nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    min-height: 40px;
    background-color: rgba(0,0,0,0);
    z-index: 100;
    transition: 0.5s;
}
nav img {
    position: relative;
    top: 6px;
    left: 12px;
}
h1 {
    font-size: 1.5em;
    color: #374048;
    margin: 0;
    display: inline-block;
    padding: 16px;
}
ul {
    display: none;
    float: right;
    margin-right: 40px;
}
li {
    list-style: none;
    display: inline-block;
    padding: 5px 10px;
}
a {
    color: #00ced1;
    text-decoration: none;
    transition: 0.4s;
}
a:hover {
    color: #111;
    text-decoration: underline #ddd;
    text-underline-position: below;
}
.head_logo {
position: absolute;
left: 10px;
color: #fff;
text-shadow: 2px 2px 10px #000;
}
/************  Welcome Section / Form Section ************/
#welcome {
    background-size: cover;
    height: 92.4vh;
background:  -ms-linear-gradient(top, #fff, rgba(47,117,151, 0.8) , rgba(76,64,112, 0.8) 70%), url('../img/ind.jpg') center  no-repeat;
    background:  -webkit-linear-gradient(top, #fff, rgba(47,117,151, 0.8) , rgba(76,64,112, 0.8) 70%), url('../img/ind.jpg') center  no-repeat;
    background:  -moz-linear-gradient(top, #fff, rgba(47,117,151, 0.8) , rgba(76,64,112, 0.8) 70%), url('../img/ind.jpg') center no-repeat;
}

#form #cta {
    position: relative;
    text-align: center;
    font-size: 2em;
    color: #eee;
    font-weight: bold;
    margin: 0;
}
#form #cta-s {
    text-align: center;
   color: #76e5ff;
    max-width: 90%;
    margin: 15px auto 60px;
}
#form {
    position: relative;
    top: 30vh;
    margin: auto;
    text-align: center;
}
#form input[type="email"] {
    height: 50px;
    width: 60%;
    border: 1px solid #666;
    border-radius: 5px 0 0 5px;
    padding-left: 15px;
    font-family: 'Poppins', sans-serif;
    font-size: 1.1em;
    box-shadow: 3px 3px 20px 0px rgba(0,0,0,0.3);
}
#form input[type="email"]::placeholder {
    color: #999;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
#form input[type="submit"] {
    height: 53px;
    width: 20%;
    background-color: #0084FF;
    margin-left: -4px;
    border: 1px solid #666;
    color: #fff;
    border-radius: 0 5px 5px 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 1em;
    cursor: pointer;
    box-shadow: 3px 3px 20px 0px rgba(0,0,0,0.3);
    transition: 0.3s;
}
#form input[type="submit"]:hover {
    background-color: rgb(1, 116, 224);
}
#down-chevron {
    font-size: 6em;
    color: #fff;
    position: relative;
    top: 40vh;
    left: 46vw;
}

/************ Products-div ************/
#products {
    text-align: center;
    max-width: 1000px;
    margin: auto;
}
#products h2 {
    margin-top: 80px;
}
#products p {
    color: #999;
    padding: 20px;
}
#products-div {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 1000px;
    margin: 50px auto;
}
.product-item {
    margin: 10px;
    padding: 20px;
    width: calc(100% - 60px);
}
.icon {
    width: 70px;
    height: 70px;
    line-height: 70px;
    border-radius: 50%;
    background: #374048;
    text-align: center;
    font-size: 28px;
    color: #fff;
    margin: auto;
    box-shadow: 0 0 1px 5px rgba(111,102,140,0.7);
    transition: 0.4s;
}
.icon:hover {
    background: #fff;
    color: rgba(111,102,140,0.7);
} 

/************ Video-div ************/
#how_it_works {
    background: -webkit-linear-gradient(left, rgb(62, 154, 201) , rgba(76,64,112));
    background: -moz-linear-gradient(left, rgb(62, 154, 201) , rgba(76,64,112));
    text-align: center;
    padding: 60px 0;
}
#h2-video {
    color: #fff;
    margin: 0 0 40px;
}
#video-hr {
    background: #fff;
    margin-bottom: 30px;
}
iframe {
    width: 340px;
    height: 215px;
}

/************ Pricing-div ************/
#pricing {
    text-align: center;
    background-color: #f5f5f5;
    margin: auto auto 0;
    padding: 25px 0 50px;
}
#pricing .sub-text {
    color: #999;
    padding: 20px;
}
#pricing-div {
    max-width: 1000px;
    margin: auto;
}
.pricing-item {
    margin: 50px 15px;
}
.pricing-item .icon {
    position: relative;
    top: 50px;
    z-index: 2;
}
.heading {
    background: -webkit-linear-gradient(left, rgb(62, 154, 201) , rgba(76,64,112));
    background: -moz-linear-gradient(left, rgb(62, 154, 201) , rgba(76,64,112));
}
.heading h4 {
    color: #fff;
    padding: 75px 0 20px;
}
.pricing-item p {
    color: #999;
    padding: 60px 20px;
}
.card {
    background-color: #fff;
}
button {
    color: #fff;
    width: 60px;
    height: 30px;
    border: 1px solid rgba(0,0,0,0);
    border-radius: 15px; 
    background-color: #0084FF;
    box-shadow: 0 1px 10px 1px rgba(0,0,0,0.3);
    cursor: pointer;
    transition: 0.3s;
    font-family: 'Poppins', sans-serif;
}
button:hover {
    box-shadow: 0 1px 10px 1px rgba(0,0,0,0.4);
    background-color: rgb(1, 116, 224);
}

/************ Footer ************/
footer {
    width: 100%;
    text-align: center;
    color: #eee;
    background-color: #374048;
    margin-bottom: 0;
    padding: 10px 0;
}
footer a {
    color: #00ced1;
    text-decoration: none;
}
footer a:hover {
    color: #6f668c;
    text-decoration: underline;
}

@media screen and (min-width: 700px) {
    ul {
        display: inline-block;
    }
    #form input[type="email"] {
        height: 70px;
        width: 500px;
    }
    #form input[type="submit"] {
        height: 54px;
        width: 130px;
    }
    #form #cta {
        font-size: 4em;
    }
    #form #cta-s {
        font-size:2em;
        max-width: 85%;
    }
    #down-chevron {
        top: 50vh;
        left: 49vw;
    }
    .product-item {
        width: calc((100% / 3) - 60px); 
    }
    .pricing-item {
        display: inline-block;
        width: calc((100% / 3) - 60px); 
    }
    iframe {
        width: 490px;
        height: 315px;
    }
}