@import "https://fonts.googleapis.com/css2?family=Mulish:wght@200@900&family=Roboto+Condensed:wght@200;300;400;700&family=Sofia+Sans+Condensed:ital,wght@0,1;0,100;0,200;0,300;0,400;0,500;1,1;1,100;1,200&display=swap";

html {
  font-family: Mulish;
  font-size: 16px;
}

h1, h2, h3, h4, h5, h6 {
  font-family: Roboto Condensed;
  text-transform: uppercase;
}

h2{
  color: #fff;
  font-size: 1.50rem;
  font-weight: 500;
  margin: 3rem 0 3rem 0;
 
}

h3{
  font-size: .75rem;
  font-family: Mulish;
  margin: 1.5rem 0 1.5rem 0;
}
p{
  color: #fff;
  font-family: Mulish;
  margin: 3rem 0 3rem 0;
}

header{
  background-color: #4589FF;
  opacity: 87%;
}

.navbar-toggler:focus,
.navbar-toggler:active,
.navbar-toggler-icon:focus {
    outline: none;
    box-shadow: none;
}

header .navbar-dark .navbar-nav .nav-link {
  color: #fff;
  font-size: 16px;
  font-family: Roboto Condensed;
  font-weight: 100;
}
 
header .navbar-dark .navbar-brand{
  color: #fff;
  font-size: 16px;
  font-family: Roboto Condensed;
  font-weight: 100;
}

section.home {
  background: #4589FF;
  
}
 


section.home h1 {
  font-family: Mulish;
  font-size: 2rem;
  color: #fff;
  text-transform: uppercase;
  font-weight: bolder;
  margin-bottom: .15em;
  margin-top: 15rem;
}

section.home p {
  font-family: Roboto Condensed;
  color: #fff;
  font-weight: 100;
}

section.home div.buttons {
  margin-top: 3em;
} 

section.home a.btn {
  font-family: Roboto Condensed;
  border-radius: 0;
  color: #fff;
  border: 1px solid #fff;
  margin: 0 2em 1em 0;
  font-weight: 100;
  padding: .5em 3em;
}
.text p {
  font-family: Mulish;
  font-size: 0.75em;
  color: #fff;
  text-transform: uppercase;
  margin-left: 20em;
  padding-bottom: 50em;
  margin-top: 20em; 
  position: absolute;
  justify-items: right;
   
}
.text a {
  text-decoration: none;
  cursor: pointer;
  color: #fff;

}
.text :hover {
  color:#EE5396;
  transition: 2s;
  opacity: 0.5;
}
 

section.myservices a.btn {
  font-family: Roboto Condensed;
  border-radius: 0;
  color: #fff;
  border: 1px solid #fff;
  margin: 0 2em 1em 0;
  font-weight: 100;
  padding: .5em 3em;
} 
 

section.myservices {
  background-color:#EE5396;
  color: #fff;
  font-weight: 100;
}
 
 


section.mycourses {
  background-color: #393939;
  color: #fff;
  font-weight: 100;
}
section.mycourses p {
  margin: .75rem 0 .75rem 0;
}
 

section.mycourses a.btn {
  font-family: Roboto Condensed;
  border-radius: 0;
  color: #fff;
  border: 1px solid #fff;
  margin: 0 2em 1em 0;
  font-weight: 100;
  padding: .5em 3em;
}
section.products h2 a {
  color: #393939;
  text-decoration: none;
  
}
section.products p {
  color: #393939;
  margin-top: .5rem;
}
section.products {
  margin-bottom: .7em;
}
section.whysalon8  {
  background: #4589FF;
  color: #fff;
  font-weight: 100;
   
  
}
section.whysalon8 a.btn {
  font-family: Roboto Condensed;
  border-radius: 0;
  color: #fff;
  border: 1px solid #fff;
  margin: 0 2em 1em 0;
  font-weight: 100;
  padding: .5em 3em;
}
section.mycontacts  {
  background-color:#393939;
  color: #fff; 
  font-weight: 100;
  
  
  }
  .mycontacts h3 {
    color: #4589FF;
    margin-top: 3rem;
    margin-bottom: 3rem;
  }

 
  .mycontacts ul li a {
    color: #fff;
  }
  .mycontacts div.icons a {
    color: #fff;
    margin: .75rem 2.4rem .75rem 0;
  }



  section.mycontacts ul,
  footer ul {
    padding-left: 0;
  }



  footer {
    font-family: Roboto Condensed;
    background: #393939;
    color: #fff;
  }
  
  footer p {
    font-weight: 100;
    margin-bottom: 2rem;
  }
   
  
  
  footer ul a {
    color: #fff;
    text-decoration: none;
    text-transform: capitalize;
    font-size: 16px;
    font-weight: 100;
  }
  footer ul {
    color: #fff;
    text-decoration: none;
    text-transform: capitalize;
    font-size: 16px;
    font-weight: 100;
  }
 

  
  footer div.input-group * {
    border-radius: 0;
  }
  
  footer div.input-group button {
    color: #fff;
    background: #4589FF;
  }