@font-face{
  font-family: Roboto-Black;
  src: url('../fonts/Roboto-Black.ttf')
}
body {
  background: url(../images/background.jpg) center fixed
}
.navbar-brand{
  margin: 0px 0px 0px 105px;
}
.newimage{
    margin-bottom: 12px;
    vertical-align: middle;
    border-style: none;
}
.bg-light {
  background-color: #9b49ec!important;
}
.navbar-light .navbar-nav .active>.nav-link{
  color: #24d4ff;
}
.navbar-light .navbar-brand {
  color: #24d4ff;
  font-family: Roboto-Black;
  font-size: 55px;
  padding: 0px 0px 0px 0px;
}
.navbar-light .navbar-brand:focus, .navbar-light .navbar-brand:hover {
    color: #24d4ff;
}
.navbar-light .navbar-nav .nav-link{
  color: #24d4ff;
  margin: 0 95px 0 -35px ;
}
.navbar-light .navbar-nav .nav-link:hover{
  color: white;
}
h1 {
  font-family: Roboto-Black;
  color: white;
}
h4 {
  color: white;
}
h5 {
  color: white;
}
.btn{
  color: white;
  border: 1px #24d4ff;
  background: #24d4ff;
}
.btn-white{
  background: transparent;
  border: 1px solid white;
}
.displayt1{
  margin: 220px 100px 0 0;
}
.displayt2{
  margin: 220px 100px 25px 0;
}
.display2{
  margin: 0 100px 0 10px;
}
.movedown{
  margin: 0 100px 10px 0;
}
.display3{
  color: white;
  margin: 0 70px 25px 0;
  text-align: justify;
  font-size: 17px;
  text-align-last: right;
}
.display4{
  margin: 30px 0 0 0;
}
.display5{
  color:white;
  margin-bottom: 0 !important;
}
.display6{
  color: white;
  margin: 0 100px 25px -30px;
  font-size: 17px;
  text-align: justify;
  text-align-last: right;
}
.form-control{
  background: transparent;
  color: white !important;
  border: 2px solid white;
  direction: rtl;
}
::placeholder{
  color: white !important;
}
a:hover{
  color: #24d4ff;
}
.textcolor{
  color: #24d4ff;
}
.text-right{
  color: white;
}
.imgsize{
  width: 575px;
  height: auto;
  margin: 0px 0px 20px -35px;
}
.imgmove{
  margin: -270px 10px 0px 110px;
}
.textmove{
  margin: -135px 0px 0px -30px;
  color: #24d4ff;
  font-weight: bold;
}
input[type=text]:focus {
  background-color: lightblue;
}
input[type=email]:focus {
  background-color: lightblue;
}
textarea[type=text]:focus {
  background-color: lightblue;
}
@media only screen and (max-width: 380px){
  /* styles for mobile browsers smaller than 380px; (iPhone) */
  .navbar-brand{
    margin: 0px 0px 0px 0px;
  }
  .navbar-light .navbar-nav .nav-link{
    color: aqua;
    margin: 0 10px 0 0px ;
  }
  .displayt1 {
    margin: 220px 0px 0 0;
  }
  .display2 {
    margin: 0 0px 0 10px;
  }
  .displayt2 {
    margin: 220px 0px 25px 0;
  }
  .display6 {
    color: white;
    margin: 0 0px 25px 0px;
    text-align: justify;
    text-align-last: right;
  }
  .display3 {
    color: white;
    margin: 0 0px 25px 0;
    text-align: justify;
    text-align-last: right;
  }
  .imgsize {
    width: 330px;
    height: auto;
    margin: 0px 0px 25px 0px;
  }
  .imgmove {
    margin: 0px -240px -25px 0px;
  }
  .textmove {
    margin: 0px 0px 0px 0px;
  }
}
@media only screen and (min-width: 481px){
  /* .look{
    display: none; */
  }
  .look1{
    display: none;
}


@media only screen and (max-width: 768px){
  .imgsize {
    width: 415px;
    height: auto;
    margin: 0px 0px 20px -30px;
}
.imgmove{
  margin: -370px 10px 0px 110px;
}
.textmove{
  margin: -135px 0px 0px -30px;
  color: #24d4ff;
  font-weight: bold;
  font-size: 11px;
}
}

@media only screen and (max-width: 480px){
  /* styles for mobile browsers smaller than 480px; (iPhone) */
  .navbar-brand{
    margin: 0px 0px 0px 0px;
  }
  .navbar-light .navbar-nav .nav-link{
    color: aqua;
    margin: 0 10px 0 0px ;
  }
  .displayt1 {
    margin: 220px 0px 0 0;
    font-size: 35px;
  }
  .display2 {
    margin: 0 0px 0 10px;
    font-size: 15px;
  }
  .displayt2 {
    margin: 240px 0px 25px 0;
  }
  .look1{
    display: none;
  }
  .display6 {
    color: white;
    margin: 0 0px 25px 0px;
    text-align: justify;
    text-align-last: right;
    font-size: 17px;
  }
  .display3 {
    color: white;
    margin: 0 0px 25px 0;
    text-align: justify;
    text-align-last: right;
    font-size: 17px;
  }
  .imgsize {
    width: 325px;
    height: auto;
    margin: 0px 0px 25px 0px;
  }
  .imgmove {
    margin: 0px -240px -25px 0px;
  }
  .textmove {
    margin: 0px 0px 0px 55px;
  }
}