body{
    font-family: "Raleway";
    padding: 0;
    margin: 0;
    color: white;
    z-index: 0;
    background-color: #eee;
    transition: 1s;

}

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #fff; 
}
 
::-webkit-scrollbar-thumb {
    background: #0487d5;;
}

::-webkit-scrollbar-thumb:hover {
    background: #0487d5;; 
}

.responsive-navbar{
  display: none;
}

#dropdown-content{
  display:none;
  overflow: hidden;
}

#dropdown:hover #dropdown-content{
  display: block;
}

.dropdown{
  margin:0;
  padding:0;
}

.nav {
    position: fixed;
    top:0;
    width:100%;
    z-index: 1;
    transition: 0.5s;
    height: 10%;
    min-height: 10%;
    max-height: 10%;
    background:  white;
    transition: 1s;
}

.nav li{
  display: inline;
}

.nav-link{
  margin-top: 1%;
  float: right;
  width: 100%;
  direction: rtl;
}

.nav a{
  text-decoration: none;
}

.nav .active{
  padding: 15px;
  color: black;
}

.nav .active a{
  text-decoration: none;
  color: black;
}

.nav .btn1 a{
  color: #1444b1;
  text-decoration: none;
}

.nav .btn1 a:hover{
  color: white;
}

.scroll{
  background-color: white;
  height: 8%;
  min-height: 8%;
  max-height: 8%;
  display: block;
  transition: 0.1s;
}

.scroll a{
  font-size: 15px;
  margin-top: -2%;
  transition: 0.1ms;
}

.scroll .nav-link{
  margin-top: 0.5%;
}




.btn1{
  border: 2px solid #1444b1;
  color: #1444b1;
  border-radius: 25px;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 20px;
  padding-right: 20px;
}

.btn1:hover{
  background-color: #1444b1;
  color: white;
  border: 2px solid #1444b1;
  border-radius: 25px;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 20px;
  padding-right: 20px;
}

.btn1 a{
  color: white;
}

.header{
  color: white;
  background-color: #1360A3;
  margin-top: 0%;
}

.header h1{
  padding-top: 40%;
}

.header-text{
  margin-left: 10%;
  padding-bottom: 10%;
  width: 30%;
}

.header-text img{
  float: right;
  margin-right: -160%;
  margin-top: -45%;
}

.btn2 a{
  color: white;
  text-decoration: none;
}

.btn2{
  border: 2px solid white;
  padding: 15px 60px 15px 60px;
  border-radius: 100px;
  background-color: white;
}

.btn2:hover{
  background:none;
}

.btn-header{
  margin-top: 8%;
}

.btn-header a{
  color: #1b5ae7;
  text-decoration: none;
  font-weight: bold;
}

.btn-header a:hover{
  color: white;
}

.features-box{
  float: left;
  background-color: white;
  text-align: center;
  margin: 1%;
  padding: 1%;
  width: 21%;
  color: black;
  transition: 1s;
}

.features-box i{
  font-size: 50px;
  color: #1b5ae7;
}


.features-box:hover i{
  color: black;
  transition: 0.5s;
}

.features-box:hover{
  box-shadow: 0px 0px 10px rgba(0,0,0,0.3);
  transition: 0.5s;
}



.features-box1{
  float: left;
  background-color: white;
  text-align: center;
  margin: 1%;
  padding: 1%;
  width: 100%;
  color: black;
  transition: 1s;
}

.features-box1 i{
  font-size: 50px;
  color: #1b5ae7;
}


.features-box1:hover i{
  color: black;
  transition: 0.5s;
}

.features-box1:hover{
  box-shadow: 0px 0px 10px rgba(0,0,0,0.3);
  transition: 0.5s;
}



.features{
  width: 80%;
  margin-left: 10%;
  text-align: center;
  margin-top: 2%;
  color: black;
}

.features h1{
  color: black;
  text-align: center;
  color: black;
}

.title{
  text-align: center;
  color: black;
}

.pricing-1-box{
  background-color: #1b5ae7;
  margin: 2%;
  padding: 0% 3% 3% 3%;
  width: 19.5%;
  float: left;
  text-align: center;
  border-radius: 5px;
  margin-top: 5%;
  transition: 0.3s;
  margin-bottom: 15%;
}

.pricing{
  margin-top: 30%;
  margin-left: 0%;
  margin-bottom: 5%;
  padding-bottom: 37%;
  padding-top: 5%;
}

.pricing .container{
  margin-left: 10%;
}

.pricing li{
  text-align: left;
  margin-left: 20%;
  list-style: none;
}

.pricing .title h1{
  margin-left: -12%;
}

.pricing-1-header{
  background-color: #3872f4;
  padding-top: 5%;
  padding-bottom: 5%;
  transition: 1s;
  margin-bottom: 10%;
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
}

.pricing-1-button{
  margin-top: 20%;
  transition: 1s;
}

.pricing-1-button a{
  background-color: #3872f4;
  padding: 8% 20% 8% 20%;
  text-decoration: none;
  color: white;
  border-radius: 5px;
}

.pricing-2-box{
  background-color: #1b5ae7;
  margin: 2%;
  padding: 0% 3% 3% 3%;
  width: 19.5%;
  float: left;
  text-align: center;
  border-radius: 5px;
  margin-bottom: 5%;
}

.pricing-2-header{
  background-color: #3872f4;
  padding-top: 5%;
  padding-bottom: 5%;
  margin-bottom: 30%;
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
}

.pricing-2-button{
  margin-top: 30%;
  padding-bottom: -30%;
}

.pricing-2-button a{
  background-color: #3872f4;
  padding: 8% 20% 8% 20%;
  text-decoration: none;
  color: white;
  border-radius: 5px;
  border: 3px solid #3872f4;
}

.pricing-2-box:hover .pricing-2-button a{
  border: 3px solid #3872f4;
  background: none;
}

.pricing-1-box:hover .pricing-1-button a{
  border: 3px solid #3872f4;
  background: none;
}


.pricing-1-box:hover{
  background-color: #1b5ae7;
  margin: 2%;
  padding: 0% 3% 3% 3%;
  width: 19.5%;
  float: left;
  text-align: center;
  border-radius: 5px;
  transition: 0.3s;
  margin-bottom: 11.0%;
}

.pricing-1-box:hover .pricing-1-header{
  background-color: #3872f4;
  padding-top: 5%;
  padding-bottom: 5%;
  margin-bottom: 30%;
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
  transition: 1s;
}

.pricing-1-box:hover .pricing-1-button a{
  background-color: #3872f4;
  padding: 8% 20% 8% 20%;
  text-decoration: none;
  color: white;
  border-radius: 5px;
  transition: 1s;
  border: 3px solid #3872f4;
}

.pricing-1-box:hover .pricing-1-button{
  margin-top: 30%;
  padding-bottom: -30%;
  transition: 1s;
}

.reviews-box{
  float: left;
  background-color: white;
  text-align: center;
  margin: 2%;
  padding: 3%;
  width: 23%;
  color: black;
  transition: 1s;
  margin-top: 0%;
}

.reviews-box span{
  font-size: 20px;
  color: gold;
}

.reviews .title h1{
  margin-left: -2%;
  margin-top: 35%;
}

.reviews-box:hover{
  box-shadow: 0px 0px 10px rgba(0,0,0,0.3);
  transition: 0.5s;
}

.reviews{
  width: 80%;
  margin-left: 10%;
  text-align: center;
  margin-top: 10%;
  color: black;
  height: 50%;
}

.reviews h1{
  color: black;
  text-align: center;
  color: black;
}

.footer{
  width: 100%;
  float: left;
  color: black;
  background-color: white;
  margin-top: 5%;
}

.footer-box{
  float: left;
  width: 25%;
  margin: 4%;
}

.footer-box a{
  text-decoration: none;
  color: black;
}

.copyright{
  width: 100%;
  background-color: #eee;
  text-align: center;
  float: left;
}

@media screen and (max-width: 1024px) {

.nav{
  display: none;
}

.responsive-navbar{
  display: block;
  color: black;
  text-decoration: none;
  background-color: white;
  height: 5%;
  margin-top: -3%;
  text-align: center;
}

.responsive-navbar a{
  color: black;
  text-decoration: none;
}

.icon{
  float: right;
  width: 75px;
  margin-top: 1%;
}

  .responsive-navbar li {
    display: none;
    padding: 5px;
  }
  .responsive-navbar li.icon {
    width: 75px;
    display: inline-block;
  }

  .responsive-navbar ul.responsive-navbar {
    position: relative;
    text-align: center;
  }
  .responsive-navbar ul.responsive-navbar li.icon {
    position: absolute;
    right: 0;
    width: 75px;
    top:3 3%;
  }
  .responsive-navbar ul.responsive li {
    float: none;
    display: inline;
    text-align: center;
  }
  .responsive-navbar ul.responsive li a {
    display: block;
    text-align: center;
  }


.btn1{
  border: 2px solid #1444b1;
  color: #1444b1;
  border-radius: 25px;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 20px;
  padding-right: 20px;
}

.btn1:hover{
  background-color: #1444b1;
  color: white;
  border: 2px solid #1444b1;
  border-radius: 25px;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 20px;
  padding-right: 20px;
}

.btn1 a{
  color: white;
}

.header{
  color: white;
  background-color: #1360A3;
  margin-top: 0%;
}

.header h1{
  padding-top: 40%;
}

.header-text{
  margin-left: 10%;
  padding-bottom: 10%;
  width: 30%;
}

.header-text img{
  float: right;
  margin-right: -160%;
  margin-top: -45%;
}

.btn2 a{
  color: white;
  text-decoration: none;
}

.btn2{
  border: 2px solid white;
  padding: 15px 60px 15px 60px;
  border-radius: 100px;
  background-color: white;
}

.btn2:hover{
  background:none;
}

.btn-header{
  margin-top: 8%;
}

.btn-header a{
  color: #1b5ae7;
  text-decoration: none;
  font-weight: bold;
}

.btn-header a:hover{
  color: white;
}

.features-box{
  float: left;
  background-color: white;
  text-align: center;
  margin: 1%;
  padding: 1%;
  width: 102%;
  color: black;
  transition: 1s;
}

.features-box i{
  font-size: 50px;
  color: #1b5ae7;
}


.features-box:hover i{
  color: black;
  transition: 0.5s;
}

.features-box:hover{
  box-shadow: 0px 0px 10px rgba(0,0,0,0.3);
  transition: 0.5s;
}

.features{
  width: 80%;
  margin-left: 10%;
  text-align: center;
  margin-top: 2%;
  color: black;
}

.features h1{
  color: black;
  text-align: center;
  color: black;
}

.title{
  text-align: center;
  color: black;
}

.pricing-1-box{
  background-color: #1b5ae7;
  margin: 2%;
  padding: 0% 3% 3% 3%;
  width: 19.5%;
  float: left;
  text-align: center;
  border-radius: 5px;
  margin-top: 5%;
  transition: 0.3s;
  margin-bottom: 15%;
}

.pricing{
  margin-top: 30%;
  margin-left: 0%;
  margin-bottom: 5%;
  padding-bottom: 37%;
  padding-top: 5%;
}

.pricing .container{
  margin-left: 10%;
}

.pricing li{
  text-align: left;
  margin-left: 20%;
  list-style: none;
}

.pricing .title h1{
  margin-left: -12%;
}

.pricing-1-header{
  background-color: #3872f4;
  padding-top: 5%;
  padding-bottom: 5%;
  transition: 1s;
  margin-bottom: 10%;
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
}

.pricing-1-button{
  margin-top: 20%;
  transition: 1s;
}

.pricing-1-button a{
  background-color: #3872f4;
  padding: 8% 20% 8% 20%;
  text-decoration: none;
  color: white;
  border-radius: 5px;
}

.pricing-2-box{
  background-color: #1b5ae7;
  margin: 2%;
  padding: 0% 3% 3% 3%;
  width: 19.5%;
  float: left;
  text-align: center;
  border-radius: 5px;
  margin-bottom: 5%;
}

.pricing-2-header{
  background-color: #3872f4;
  padding-top: 5%;
  padding-bottom: 5%;
  margin-bottom: 30%;
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
}

.pricing-2-button{
  margin-top: 30%;
  padding-bottom: -30%;
}

.pricing-2-button a{
  background-color: #3872f4;
  padding: 8% 20% 8% 20%;
  text-decoration: none;
  color: white;
  border-radius: 5px;
  border: 3px solid #3872f4;
}

.pricing-2-box:hover .pricing-2-button a{
  border: 3px solid #3872f4;
  background: none;
}

.pricing-1-box:hover .pricing-1-button a{
  border: 3px solid #3872f4;
  background: none;
}


.pricing-1-box:hover{
  background-color: #1b5ae7;
  margin: 2%;
  padding: 0% 3% 3% 3%;
  width: 19.5%;
  float: left;
  text-align: center;
  border-radius: 5px;
  transition: 0.3s;
  margin-bottom: 11.0%;
}

.pricing-1-box:hover .pricing-1-header{
  background-color: #3872f4;
  padding-top: 5%;
  padding-bottom: 5%;
  margin-bottom: 30%;
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
  transition: 1s;
}

.pricing-1-box:hover .pricing-1-button a{
  background-color: #3872f4;
  padding: 8% 20% 8% 20%;
  text-decoration: none;
  color: white;
  border-radius: 5px;
  transition: 1s;
  border: 3px solid #3872f4;
}

.pricing-1-box:hover .pricing-1-button{
  margin-top: 30%;
  padding-bottom: -30%;
  transition: 1s;
}

.reviews-box{
  float: left;
  background-color: white;
  text-align: center;
  margin: 2%;
  padding: 3%;
  width: 23%;
  color: black;
  transition: 1s;
  margin-top: 0%;
}

.reviews-box span{
  font-size: 20px;
  color: gold;
}

.reviews .title h1{
  margin-left: -2%;
  margin-top: 35%;
}

.reviews-box:hover{
  box-shadow: 0px 0px 10px rgba(0,0,0,0.3);
  transition: 0.5s;
}

.reviews{
  width: 80%;
  margin-left: 10%;
  text-align: center;
  margin-top: 10%;
  color: black;
  height: 50%;
}

.reviews h1{
  color: black;
  text-align: center;
  color: black;
}

.footer{
  width: 100%;
  float: left;
  color: black;
  background-color: white;
  margin-top: 5%;
}

.footer-box{
  float: left;
  width: 25%;
  margin: 4%;
}

.footer-box a{
  text-decoration: none;
  color: black;
}

.copyright{
  width: 100%;
  background-color: #eee;
  text-align: center;
  float: left;
}
}



@media screen and (max-width: 900px) {

.nav{
  display: none;
}

.responsive-navbar{
  display: block;
  color: black;
  text-decoration: none;
  background-color: white;
  height: 5%;
  margin-top: -3%;
  text-align: center;
}

.responsive-navbar a{
  color: black;
  text-decoration: none;
}

.icon{
  float: right;
  width: 75px;
  margin-top: 1%;
}

  .responsive-navbar li {
    display: none;
    padding: 5px;
  }
  .responsive-navbar li.icon {
    width: 75px;
    display: inline-block;
  }

  .responsive-navbar ul.responsive-navbar {
    position: relative;
    text-align: center;
  }
  .responsive-navbar ul.responsive-navbar li.icon {
    position: absolute;
    right: 0;
    width: 75px;
    top:3 3%;
  }
  .responsive-navbar ul.responsive li {
    float: none;
    display: inline;
    text-align: center;
  }
  .responsive-navbar ul.responsive li a {
    display: block;
    text-align: center;
  }
}

 

}