/*----Google Fonts----*/
@import url('https://fonts.googleapis.com/css?family=Lato:400,700|Tajawal:300,400');

/*--font-family: 'lato' , sans-serif;
font-family: 'Tajawal', sans-serif;--*/

/*--------------------Elements----------------------*/

.nav-wrapper.header-wrapper.footer-wrapper{
	width: 100%;
}
* {
  padding: 0;
  margin: 0;
}

#topspace {
	margin-top:95px;
	border-bottom:5px solid #262745;
}

header {
  background-image: url(../img/headerBG.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  height: 600px;
  background-attachment: fixed;
}

h1{
  font-family: 'lato' , sans-serif;
  font-weight: 700;
  font-size: 4rem;
  letter-spacing: 2px;
  margin-bottom: 0px;
  color: #fff;
}

h2 {
    font-family: 'lato' , sans-serif;
    font-weight: 700;
    font-size: 3rem;
    letter-spacing: 2px;
    margin-bottom: 0px;
    color: #fff;
    padding-bottom: 20px;
}

h3 {
    font-family: 'lato' , sans-serif;
    font-weight: 700;
    font-size: 2.5rem;
    letter-spacing: 2px;
    margin-bottom: 0px;
    color: #fff;
    padding-bottom: 20px;
}

h4 {
    font-family: 'Robot', sans-serif;
    color: #fff;
    font-weight: 400;
    font-size: 2rem;
    padding-bottom: 280px;
}

span{
  display: inline-block;
}

i{
  color:#5F6192;
  padding-right: 5px;
}



/*--Social Hover---*/
.fa:hover{
  color: #fff;
}

p {
  font-family: "Roboto", sans-serif;
  color: #262745;
  font-weight: 400;
  font-size: 1.4rem;
}

li {
  font-family: "Roboto", sans-serif;
  color: #92885F;
  font-weight: 400;
  font-size: 1.4rem;
}


/*---------------Button Styles------------*/
.btn-primary {
    color: #fff;
    background-color: #5F6192;
    border-color: #5F6192;
}

.btn-primary:hover{
    color: #fff;
    background-color: #262745;
    border-color: #262745;
}


.btn {
    display: inline-block;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: 1px solid transparent;
    padding: .375rem .75rem;
    font-size: 1.5rem;
    line-height: 1.5;
    border-radius: .25rem;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    box-shadow: 2px 2px rgba(0,0,0,.4);
}




/*----------Arrow Bounce Animation----------*/
a {
  color: white;
  text-decoration: none;
}
.arrow {
  text-align: center;

}
.bounce {
  -webkit-animation: bounce 2s infinite;
  animation: bounce 2s infinite;
}
@-webkit-keyframes bounce {
  0%,
  20%,
  50%,
  80%,
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  40% {
    -webkit-transform: translateY(-30px);
            transform: translateY(-30px);
  }
  60% {
    -webkit-transform: translateY(-15px);
            transform: translateY(-15px);
  }
}
@keyframes bounce {
  0%,
  20%,
  50%,
  80%,
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  40% {
    -webkit-transform: translateY(-30px);
            transform: translateY(-30px);
  }
  60% {
    -webkit-transform: translateY(-15px);
            transform: translateY(-15px);
  }
}

/*------------Header Styles------------*/

/*-----Jumbotron Styles-------*/
.jumbotron {
    background: transparent;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    height: auto;
    padding-top: 240px;
    height: 400px;
    border-radius: none;
}
/*---Carousel Container---*/
.carousel {
  position: relative;
  background-image: url(../img/sliderBG.png);
  padding: 10px;
  width: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

/*---Carousel Image---*/
.img {
  height: 429px;
  width: 523px;
}

/*-----------------------Navbar Styles-----------*/

/*---Navbar---*/
.fixed-top {
  background-color:rgba(95, 97, 146,0.7)!important;
  width: 100%;

}


.fixed-top .navbar-nav .nav-link {
    font-size: 1.5rem;
    margin-right: 20px;
    margin-left: 20px;
    font-family: "Tajawal", sans-serif;
    font-weight: 400px;
    color: #fff;
}

/*---Navbar Link Hover---*/
.fixed-top .navbar-nav .nav-link:hover {

 color: #262745;
}

.navbar-toggler {
    padding: .25rem .75rem;
    background-image: url(../img/buttonToggle.svg);
    height: 60px;
    width: 50px;
    background-color: transparent;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}


/*------------------Section one Styles-----------*/
#sectionOne {
    padding-top: 50px;
    padding-bottom: 50px;
    background: #262745;
}

#sectionOne p {
    font-family: "Roboto", sans-serif;
    color: #fff;
    font-weight: 400;
    font-size: 1.4rem;
    padding-bottom: 50px;
}

#sectionOne h4 {
    font-family: 'Robot', sans-serif;
    color: #fff;
    font-weight: 400;
    font-size: 2rem;
    padding-bottom: 20px;
}


/*-------------------Section Two Styles--------------*/
#sectionTwo {
    padding-top: 50px;
    background: #eee;
}
#sectionTwo p {
    font-family: "Roboto", sans-serif;
    color: #262745;
    font-weight: 400;
    font-size: 1.4rem;
    padding-bottom: 20px;
}

#sectionTwo h2 {
    font-family: 'lato' , sans-serif;
    font-weight: 700;
    font-size: 3rem;
    letter-spacing: 2px;
    margin-bottom: 0px;
    color: #262745;
    padding-bottom: 20px;
}

#sectionTwo h4{
    font-family: 'Robot', sans-serif;
    color: #262745;
    font-weight: 400;
    font-size: 2rem;
    padding-bottom: 20px;
}
/*------------List padding and positioning------------*/
.list-wrapper {
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 40px;
}

.list-wrapper ul {
	margin-left:20px;
}

/*---------------Section Three Styles----------------*/
#sectionThree{
  height: 300px;
  background-position: center;
  width: 100%;
  background-size: cover;
  background-image: url(../img/mares.jpg);
  padding-top: 60px;
  padding-bottom: 50px;
  background-attachment: fixed;

}

#sectionThree p{
  font-family: "Roboto", sans-serif;
  color: #fff;
  font-weight: 400;
  font-size: 2rem;
}

span.spacer-text{
  font-size: 2.5rem;
}


/*---------------------Footer Styles---------------------*/

footer {
  padding-top: 30px;
  padding-bottom: 30px;
  height:auto;
  background: #262745;
}

footer h4 {
    font-family: 'Robot', sans-serif;
    color: #fff;
    font-weight: 400;
    font-size: 1.5rem;
    padding-bottom: 20px;
}

footer p {
  font-family: "Roboto", sans-serif;
  color: #fff;
  font-weight: 400;
  font-size: 1.0rem;
}

footer a:hover{
	color:#ffffff;
}

footer a:link {
	color:#ffffff;
}

a:link.footer {color:#ffffff; text-decoration:none}
a:visited.footer {color:#ffffff; text-decoration:none}
a:hover.footer {color:#ffffff; text-decoration:underline}
a:active.footer {color:#ffffff; text-decoration:none}

.copy-wrapper{

  background: #5F6192;

}
/*--------Copywrite Styles--------*/
p.copywrite {
  font-size: 0.8rem;
  color: #fff;
  margin-top: 5px;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  padding-top: 20px
}


/*----Social List---*/
ol li{
  display: inline-block;
  list-style-type: none;
}




/*-----------Responsive Styles--------------*/

/*--Tablet Media Queries--*/

@media only screen and (min-width: 768px) and (max-width: 1024px) {
  /*--Nav Bar Collapse Styles--*/
  .navbar-collapse {
    text-align: center;
    background:#5F6192;
  }

/*-------Elements----------*/


  h4 {
    font-family: 'Robot', sans-serif;
    color: #fff;
    font-weight: 400;
    font-size: 2rem;
    padding-bottom: 200px;
}

h3 {
    font-family: 'lato' , sans-serif;
    font-weight: 700;
    font-size: 2rem;
    letter-spacing: 2px;
    margin-bottom: 0px;
    color: #fff;
    padding-bottom: 20px;
}
}
  
/*--Phone Md-Lg Media Queries--*/
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) {
  /*--Nav Bar Collapse Styles--*/
  .navbar-collapse {
    text-align: center;
    background: #5F6192;
  }

/*---------Elements--------*/
  h1 {
    font-family: 'lato' , sans-serif;
    font-weight: 700;
    font-size: 3rem;
    letter-spacing: 2px;
    margin-bottom: 0px;
    color: #fff;
}

h3 {
    font-family: 'lato' , sans-serif;
    font-weight: 700;
    font-size: 2rem;
    letter-spacing: 2px;
    margin-bottom: 0px;
    color: #fff;
    padding-bottom: 20px;
}

  h4 {
    font-family: 'Robot', sans-serif;
    color: #fff;
    font-weight: 400;
    font-size: 2rem;
    padding-bottom: 200px;
}

/*---Navbar Logo---*/
.img {
    height: auto;
    width: 100%;
}

/*----------------Section Two Styles--------------*/

#sectionTwo {
    padding-top: 50px;
    background: #eee;
    padding-left: 20px;

}

#sectionTwo p {
    font-family: "Roboto", sans-serif;
    color: #262745;
    font-weight: 400;
    font-size: 1.4rem;
    padding-bottom: 50px;
    text-align: left!important;
}

#sectionTwo h2 {
    font-family: 'lato' , sans-serif;
    font-weight: 700;
    font-size: 2.5rem;
    letter-spacing: 2px;
    margin-bottom: 0px;
    color: #262745;
    padding-bottom: 20px;
}


/*----------------Section Three Styles--------------*/
#sectionThree p {
    font-family: "Roboto", sans-serif;
    color: #fff;
    font-weight: 400;
    font-size: 1rem;
}

span.spacer-text {
    font-size: 1.3rem;
}

footer h4 {
    font-family: 'Robot', sans-serif;
    color: #fff;
    font-weight: 400;
    font-size: 1.8rem;
    padding-bottom: 10px;
}
}
  
/*---Phone Sm Media Queries----*/
@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (orientation: portrait) {

/*--Nav Bar Collapse Styles--*/
  .navbar-collapse {
    text-align: center;
    background: #5F6192;
  }

/*------------Elements------------*/
h1 {
    font-family: 'lato' , sans-serif;
    font-weight: 700;
    font-size: 3rem;
    letter-spacing: 2px;
    margin-bottom: 0px;
    color: #fff;
}

h3 {
    font-family: 'lato' , sans-serif;
    font-weight: 700;
    font-size: 2rem;
    letter-spacing: 2px;
    margin-bottom: 0px;
    color: #fff;
    padding-bottom: 20px;
}

/*----Footer Styles----*/
footer h4 {
    font-family: 'Robot', sans-serif;
    color: #fff;
    font-weight: 400;
    font-size: 1.8rem;
    padding-bottom: 10px;
}


/*---Navbar Logo---*/
.img {
    height: auto;
    width: 100%;
}


/*----Section Two Styles----*/
#sectionTwo {
    padding-top: 70px;
    background: #eee;
    padding-left: 20px;

}


/*----Arrow Display None----*/
.arrow{
  display: none;
}

.bounce{
  display: none;
}


/*----Section Three----*/
span.spacer-text {
    font-size: 1.3rem;
}

#sectionThree {
    min-height: 250px;
    background-position: center;
    width: 100%;
    background-size: cover;
    background-image: url(../img/mares.jpg);
    padding-top: 70px;
    padding-bottom: 60px;
    background-attachment: fixed;
}

#sectionThree p {
    font-family: "Roboto", sans-serif;
    color: #fff;
    font-weight: 400;
    font-size: 1rem;
}
}