@import url('https://fonts.googleapis.com/css?family=Montserrat');
/*GLOBAL STYLES*/
html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  width: 100%;
  background-color: #f7f8f8;
}

body {
  font-family: Montserrat;
  
  /* margin-top: 0px;
  padding-top: 0px; */
}

header {
  margin-bottom: 0px;
  padding: 0px;
}

.create_space {
  height: 100px;
}

.centered{
  text-align: center;
  float: none;
  margin: 0 auto;
}

.transparent{
  border-radius: 0;
  border: 0;
  background: rgba(0,0,0,0);
  /* background: none;
  This gan gan gives it the zero transparent effect*/
  /*background: rgba(0,0,0,0.2);This gives a fine transparent effect*/
}

.black{
  background-color: black;
}
.white{
  background-color: white;
  -webkit-box-shadow: -1px 3px 5px -2px rgba(0,0,0,0.75);
  -moz-box-shadow: -1px 3px 5px -2px rgba(0,0,0,0.75);
  box-shadow: -1px 3px 5px -2px rgba(0,0,0,0.75);
}

/* .item img {
  background: no-repeat 50% 50%;
  background-size: cover;
} */

.purpleText{
  color: #46035c;
}
.whiteText{
  color: white;
}
.orangeText{
  color: orange;
}
.orangeText2{
  color: #ff9800;
}
.orange {
  background-color: orange;
}
.grey {
  background-color: #eeeeee;
}
.greyBackground {
  /*background-color: #ede7f6;*/
  background-color: #f7f8f8;
}
.blackText{
  color: black;
}

.topper-div{
  font-size: 12px;
}

nav {
  position: fixed;
  padding-top: 15px;
  padding-bottom: 15px;
  width: 100%;
  transition: 1s; /*This works!!*/
  
}

.boxShadowEffect {
  -webkit-box-shadow: -1px 3px 3px -2px rgba(0,0,0,0.75);
  -moz-box-shadow: -1px 3px 3px -2px rgba(0,0,0,0.75);
  box-shadow: -1px 3px 3px -2px rgba(0,0,0,0.75);
}


nav ul{
  transition: 1s;
}

#left_side {
  /* border-left: 2px solid grey; */
}

.footertop{
  padding-top: 30px;
  /* background-color: #5c6bc0; */
  background-image: url('../img/footer.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  color: white;
}
.footertop ul li a {
  color: white;
}
.footersub{
  padding-top: 20px;
  padding-bottom: 20px;
  background-color: black;
  width: 100%;
}


/*COLOUR PALLETTE*/
/*
BA62DC
#9eaed4
#375DBD - Purple 1
#874E9C - Purple 2
#BA62DC - Purple 3
#FFB200 - Deep Orange
#FCC63D - Light Orange


*/

/*CAROUSEL STYLE*/

/* .carousel{
  height: 100vh;
} */
.carousel .navbar-nav li a {
    color: #46035c;
}

.carousel .navbar-nav li a:hover {
    color: white;
}

.carousel-control {
  opacity: 0;
}

.carousel-control.right,
.carousel-control.left {
  background-image: none;
}

.carousel.fade {
  opacity: 1;
}

.carousel.fade .item {
  transition: opacity ease-out .7s;
  left: 0;
  opacity: 0;
}


#homepage .item{
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  width: 100%;
  height: 100%;
}

/*Cards*/

.card {
  border-radius: 5px;
  background-color: white;
  padding: 20px;
  margin: 20px;
  
}

.card_box {
  border-radius: 5px;
  padding: 20px 12px 17px;
  text-align: center;
  /* box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  transition: all 0.3s cubic-bezier(.25,.8,.25,1); */
  margin-bottom: 0px;
  background-color: white;
  width: 100%;
}

#card_box_below {
  margin-top: -140px;
}

/*Forms*/

.icon_alone i {
  color: rgb(131, 104, 141);
  margin-top: 5px;
  font-size: 29px;
}

.inputWithIcon input[type=text], input[type=phone], input[type=email]{
  padding-left: 40px;
  background-color: #874E9C;
  color: white;
  border: none;
}

.inputWithIcon i {
  position: absolute;
  left: 0;
  top: 8px;
  padding: 2px 28px;
  /* padding-left: 28px;
  padding-top: 2px; */
  color: #46035c;
}

#right_side {
  background-color: #46035c;
  padding: 50px;
  margin-bottom: 40px;
}

.btn-primary{
  background-color: white;
  color: #46035c;
  border: 0px;
}

.btn-primary:hover{
  background-color: #874E9C;
  color: white;
}
/*DIVS*/

#services {
  background-color: #f7f8f8;
}



/*Holders*/
/* #holder1 {
}

#holder2 {
  margin-top: 400px;

} */


/*MEDIA QUERY*/
@media only screen and (max-width: 1500px){

}

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

}

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

}

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

}

@media only screen and (max-width: 575px){
  .carousel{
    /* height: 300px; */
  }
  nav ul{
    text-align: center;
    margin-bottom: 300px;
  }
}

@media(max-width: 580px){
  .carousel{
    /* height: 300px; */
  }
  nav ul{
    text-align: center;
    margin-bottom: 300px;
  }

  /* #card_box_below{
    margin-top: -70px;
  } */

  .small_screen_config {
    margin-top: -150px;
  }

}