body{
	background-image: url(images/MiluConsultantBackground32.png);
	font-family: 'Montserrat', sans-serif; /*'Playfair Display', serif;*/
}

.Mci-logo{
	width:60px;
	height:60px;
}

.Mci-name{
	height: 60px;
	width:  25rem;/*37.5rem;*/
}

h5{
  font-family: 'Dancing Script', cursive; /*'Parisienne', cursive;*/
  text-align: right;
  line-height: 0;
  width: 445px;
}

.img{
  width: 100%;
}

/* Nav Bar*/

.navbar{
	padding-bottom: 3rem;
}

.navbar-nav{
  width: 750px;
}

.nav-item{
	background-color: #4e98ab;
	border-radius: 5px;
	-webkit-box-shadow: 5px 5px 10px 5px #000000; 
	box-shadow: 5px 5px 10px 5px #000000;
	font-size: 17px;
	font-weight: bold;
	margin-left: 10px;
	width:120px;
	text-align: center;
}

/*.nav-link:visited{
	background-color: #210070;
  }*/

  .nav-item:hover{
   background-color: #545859;
   border-radius: 5px;
 }

 .active{
   background-color: #537680;
   border-radius: 5px;
   text-decoration: underline;
   text-decoration-color: white;
 }


 /* slide show(carousel) for Home Page*/

 .carousel{
   -webkit-box-shadow: 5px 5px 10px 5px #000000; 
   box-shadow: 5px 5px 10px 5px #000000;
   border-radius: 5px;
   width:100%;
   height: 100vh;
 }

 .carousel-image{
   width:100%;
   height: 100vh;
 }

 /* Carousel Header Styles */
 .header-text {
  position: absolute;
  top: 20%;
  left: 1.8%;
  right: auto;
  width: 96.66666666666666%;
  color: #fff;
}

.header-text h2 {
  font-size: 40px;
}

.header-text h2 span {
  background-color: /*#2980b9*/ #4e98ab;
  -webkit-box-shadow: 5px 5px 10px 5px #000000; 
  box-shadow: 5px 5px 10px 5px #000000;
  border-radius: 5px;
  opacity: 0.7;
  padding: 10px;
}

.header-text h3 span {
  background-color: #000;
  opacity: 0.7;
  -webkit-box-shadow: 5px 5px 10px 5px #000000; 
  box-shadow: 5px 5px 10px 5px #000000;
  border-radius: 5px;
  padding: 15px;
}


/* Photo Gallery for Gallery page */


.gallery-heading{
	padding-top: 150px;
  color: #fff;
  text-align: center;
  font-weight:bold;
}

.gallery-text{
  color:#fff;
  text-align: center;
}

.gallery{
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  border-radius: 5px;
}

figure{
  width: 23%;
  margin: 15px;
  padding: 8px;/* for white border around picture*/
  box-sizing: border-box;
  -webkit-box-shadow: 5px 5px 10px 5px #000000; 
  box-shadow: 5px 5px 10px 5px #000000;
  border-radius: 10px;
}

figure img{
  width: 100%;
}

figure figcaption{
	color: #fff;
  text-align: center;
  padding: 8px 4px;
}	


/* Main Section's Services list*/

.list-services{
	text-align: left;
}

/* Main section for About Us & Services page*/

.main-about, .main-services{
	color: white;
	background-color: #333333;
	width: 80%;
	height: 450px;
	margin-top: 200px;
	text-align: center;
	border-radius: 20px;
	-webkit-box-shadow: 5px 5px 10px 5px #000000; 
	box-shadow: 5px 5px 10px 5px #000000;
  overflow: auto;
  padding-top: 50px;
}

.main-heading{
	padding:20px 0;
	border-bottom: 5px solid #4e98ab;
}

.main-para{
	text-align: justify;
}


/* Contact us & Feedback form */

.contact-heading, .feedback-heading{
  color: white;
  padding-top: 150px;
  text-align: center;
}

.contact-us, .feedback{
  padding-top: 50px;
  color:white;
  background-color: #333333;
  width: 80%;
  height: 650px;
  text-align: center;
  border-radius: 20px;
  -webkit-box-shadow: 5px 5px 10px 5px #000000; 
  box-shadow: 5px 5px 10px 5px #000000;
}

.contact-email{
  text-align: left;
}

.phone{
  font-family: 'Roborto', sans-serif; 
  font-size: 20px;
}

.clicktocall{
  border: transparent;
  background-color: red;
  border-radius: 5px;
  color: white;
}

input[type=text], input[type=email], input[type=tel],select, textarea {
  background-color: #D3D3D3;
  color:#2F4F4F;
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 2px 2px 1px 1px #000000;
  resize: vertical;
}

label {
  font-weight: bold;
  padding: 12px 12px 12px 20px;
  display: inline-block;
  float:left;
}

input[type=submit], .btn[type=submit] {
  background-color: #4e98ab;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  float: right;
  margin-left: 320px;
  width: 75%;
}

input[type=submit], .btn[type=submit]:hover {
  background-color: #210070;
}


.col-25 {
  float: left;
  width: 25%;
  margin-top: 6px;
}

.col-75 {
  float: left;
  width: 75%;
  margin-top: 6px;
}


/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */

@media screen and (max-width: 600px) {
  .col-25, .col-75, input[type=submit], .btn[type=submit] {
    width: 100%;
    margin-top: 0;
  }

  input[type=submit], .btn[type=submit]{
    margin-left: 0;
  }
  .contact-us, .feedback{
    height: 100%;

  }
}




/* Footer Section */

#footer{
	color: #fff;
	padding-top: 7.5rem;
	text-align: center;
	/*line-height:1.5/* 2.5*/;
}


.footer-link{
 margin:0px 40px 20px;
 position: relative;
 display: block;
 width: 80px;
 height: 80px;
 background: #808080;
 text-align: center;
 transform: perspective(1000px) rotate(-30deg) skew(25deg) translate(0,0);
 transition: .5s;
 box-shadow: -30px 30px 10px rgba(0,0,0,.5);

}

.footer-link:before{
  content: '';
  position: absolute;
  top: 10px ;
  left: -20px;
  height: 100%;
  width: 20px;
  background: #93a092;
  transition: .5s;
  transform: rotate(0deg) skewY(-45deg);

}

.footer-link:after{
  content: '';
  position: absolute;
  bottom: -20px ;
  left: -10px;
  height: 20px;
  width: 100%;
  background: #d3d3d3;
  transition: .5s;
  transform: rotate(0deg) skewX(-45deg);
}

.footer-link:hover{
 transform: perspective(1000px) rotate(-30deg) skew(25deg) translate(20px,-20px);
 box-shadow: -50px 50px 50px rgba(0,0,0,.5);
}

a.footer-link{
 font-size: 40px;
 color: black;
 line-height: 80px;
 transition: .5s;
 display: inline-block;
}

a.footer-link:hover{
 color:white;
}


.facebook:hover:nth-child(1) {
  background: #3B5998;
}

.facebook:hover:nth-child(1):before {
  background: #5E77AB;
}

.facebook:hover:nth-child(1):after{
  background: #4C68A2;
}

.twitter:hover:nth-child(3) {
  background: #55ACEE;
}

.twitter:hover:nth-child(3):before {
	background: #64B2EE;
}

.twitter:hover:nth-child(3):after {
	background: #73BAF0;
}

.instagram:hover:nth-child(2) {
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%);
} 
.instagram:hover:nth-child(2):before{
  background: #E4506B;
} 
.instagram:hover:nth-child(2):after{
  background: #E7617A;
}

.envolope:hover:nth-child(4) {
  background: #291c94;
}
.envolope:hover:nth-child(4):before{
 background: /*#381C94*/#000;
}
.envolope:hover:nth-child(4):after{
 background: /*386A93*/#000;
}


.MCI-Develop{
 padding-top: 1rem;
 text-align: center;
}

@media only screen and (max-width: 1199.98px) {
  .main-about, .main-services{
    margin-left: 100px;
  }
}

@media only screen and (max-width: 922.98px){
  .main-about, .main-services{
    font-family: 'Archivo Narrow', sans-serif;
    font-size: .75rem;
    line-height: 1;
    margin-left: 50px;
    height: 100vh;
  }
}

@media only screen and (max-width: 749.98px){
  .Mci-logo{
    height:50px;
    width:50px;
  }
  .Mci-name{
    height:50px;
    width:24.5rem;
  }

  h5{
    width: 430px;
  }

  .header-text, .header-text h2 span, .header-text h3 span {
    padding: 0;
  }

  .main-about, .main-services{
    font-family: 'Archivo Narrow', sans-serif;
    /*font-size: .75rem;*/
    line-height: 1;
    margin-left: 35px;
  }
}

@media only screen and (max-width: 465.98px){
  .Mci-logo{
    height:35px;
    width:35px;
  }
  .Mci-name{
    height:35px;
    width:20.5rem;
  }

  h5{
    width: 351px;
  }

  .header-text, .header-text h2 span, .header-text h3 span {
    padding: 0;
  }

  .col-25, .col-75, input[type=submit], .btn[type=submit] {
    width: 100%;
    margin-top: 0;
  }

  input[type=submit], .btn[type=submit]{
    margin-left: 0;
  }

  .carousel-image{
    object-fit: scale-down;
    background-color: #444;
  }

  .header-text h2 {
    font-size: 30px;
  }

  .main-about, .main-services{
    border-radius: 0;
    margin-left: 25px;
    height: 100%;
  }
  
  .contact-us, .feedback{
    height: 100%;
  }
}