@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');


outfit-<uniquifier> {
  font-family: "Outfit", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}


h1{
   font-size: 46px;;
}

body{
	overflow-x: hidden;
	overflow-y: scroll;
	margin: 0;
	padding: 0;
	/* font-family: 'El Messiri', sans-serif;
font-family: 'Josefin Sans', sans-serif;
font-family: 'Playfair Display', serif;
font-family: 'Roboto Slab', serif;
font-family: 'Vidaloka', serif;*/
   font-family: "Outfit", sans-serif;
}
.bar-btn{
	background-color:#3d96ef;
	border:0;
	padding: 10px 15px;
	border-radius: 30px;
}
.close{
	color: #ffffff;
}
.navbar .navbar-nav li a{
	color: #fff;
	font-weight: 600;
}
.navbar .navbar-nav li a:hover{
	background-color: transparent;
}
.icon-1 {
	list-style: none;
	padding-top: 20px;
	color: #fff;
	
}
.icon-1 li{
	display:inline-block;
}
.s-2021 {
	background-color: #000;
}
/*.banner-4{
	background-image: url(img/c-2.png);
	background-size: cover;
	background-position: center;
	height: 550px;
}*/

p{
	font-size: 17px;
}

.button1-1 {
	margin-left:300px;
	background-color: #fff;
	color: #000;
	padding: 10px 20px;
	font-size: 20px;
}
.font-w{
	font-weight: 600;
}
.link-1 {
	background-color:#ffffff;
}
.avtar-1 {
	width: 100px;
}
.logo{
	width:200px;
}
.test-monial {
	    height: 400px;
    text-align: center;
    background-color: #fefeff;
}

.card {
	border:0;

}
.image {
	width: 100%;
}
 
.approaches{
	background-color:#d1d1d1;

}
.services{
	background-color: #000;
}
.color{
	color: #000;
}
.card:hover{
	background-color: rgba(255, 255, 255, 0.5);
}
.font-color {
	color: #de4133;
}


.galry{
	background-image: url(img/galrybanner.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	height: 550px;
}
@media all and (min-width: 992px) {
	.navbar .nav-item .dropdown-menu{  display:block; opacity: 0;  visibility: hidden; transition:.3s; margin-top:0;  }
	.navbar .nav-item:hover .nav-link{ color: #fff;  }
	.navbar .dropdown-menu.fade-down{ top:80%; transform: rotateX(-75deg); transform-origin: 0% 0%; }
	.navbar .dropdown-menu.fade-up{ top:180%;  }
	.navbar .nav-item:hover .dropdown-menu{ transition: .3s; opacity:1; visibility:visible; top:100%; transform: rotateX(0deg); }
}		

.contact{
	background-image: url(img/contact.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	height: 350px;
}
.loc1

 {
    background-image: url(img/locban01.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: 350px;
}
.about-5{
	background-image: url(img/about-2.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	height: 350px;
}
.galry{
	background-image: url(img/galrybanner.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	height: 350px;
}
.contact-background-1 {
	background-color: #8a5639;
}
.navbar-toggler{
	background-color: #271925;
}
.call-btn {
	padding: 10px 40px;
	border-radius: 25px;
	border: 2px solid #fff;
	background-image: url(img/background1.png);
	color: #fff;
}
@media only screen and (max-width: 600px) {

	.button1-1 {
		margin-left: 0px;
		font-size: 15px;
	}
	 .navbar-brand .logo{
		width:80px;
		height:50px;

		
	}
	.navbar{
		padding: 10px;
	}
	.list-group-flush-1{
		display: none;
	}
	.map iframe {
		width: 100%;
	}
	.contact{
		width: 100%;
		height: 200px;
	}
	.contact .navbar-brand .logo{
		width:80px;
		height:50px;
		
	}
	.about-5{
		width: 100%;
		height: 200px;
	}
	.about-5 .navbar-brand .logo{
		width:80px;
		height:50px;
	}

	.galry{
		width: 100%;
		height: 200px;
	}
	.galry .navbar-brand .logo{
		width:80px;
		height:50px;
	}

}



/*sample*/
.overlay{
	background-color:rgba(0.0,0.0,0.0,10);
	bottom: 0;
	left: 0;
	opacity: .5;
	position: absolute;
	right: 0;
	top: 0;
	z-index: 0;
	width:96%;
	
}
.overlay:hover{
	opacity: 0;
}
#exampleModalCenter-1{
	background-image: url(img/hair.png);
	background-size: cover;
	background-position: center;

}

#exampleModalCenter-2{
	background-image: url(img/sss-2-1.png);
	background-size: cover;
	background-position: center;

}
#exampleModalCenter-3{
	background-image: url(img/nail-1.png);
	background-size: cover;
	background-position: center;
}
#exampleModalCenter{
	background-image: url(img/ss-1.jpg);
	background-size: cover;
	background-position: center;
}
#exampleModalCenter-4{
	background-image: url(img/ss-9.jpg);
	background-size: cover;
	background-position: center;
}
.background-btn {
	background-image: url(img/ss-1.jpg);
	background-size: cover;
	background-position: center;
	border: 0;
	/*filter: grayscale(100);
	transition: all 2s ease-in-out;
	display: inline-block;
	*/
	}
/*.background-btn:hover{
	filter: none;
	
}*/
.list {
	background-color: #e8e0d6;
}
.menu-1 li{
	list-style: none;
	padding: 10px;
}
.menu-card {
	border: 1px solid #d28c4f;
}


.services-5{
	background-image: url(img/services-2.png);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	height: 350px;
}
.modal-content {
	background-color:rgba(0.0,0.0,0.0,0.7);
}
.background-1-btn{
	background-image: url(img/ss-8.jpg);
	background-size: cover;
	background-position: center;
	border: 0;
}
	/*filter: grayscale(100);
	transition: all 2s ease-in-out;
	display: inline-block;
	border: 0;
}
.background-1-btn:hover{
	filter: none;
	
}*/
 
.background-2-btn {
	background-image: url(img/sss-1.webp);
	background-size: cover;
	background-position: center;
	border: 0;
	/*filter: grayscale(100);
	transition: all 2s ease-in-out;
	display: inline-block;
	border: 0;

}
.background-2-btn:hover{
	filter: none;
	
}*/
}
.background-3-btn {
	background-image: url(img/ss-6.png);
	background-size: cover;
	background-position: center;
	border: 0;
	/*filter: grayscale(100);
	transition: all 2s ease-in-out;
	display: inline-block;
	border: 0;*/
}
/*.background-3-btn:hover{
	filter: none;
	
}*/
.btn span:hover {
	border: 1px solid #fff;
}
.background-4-btn{
	background-image: url(img/ss-9.jpg);
	background-size: cover;
	background-position: center;
	border: 0;
}
/*sample*/









.offcanvas-active{
	overflow:hidden;
}

.screen-overlay {
  width:0%;
  height: 100%;
  z-index: 30;
  position: fixed;
  top: 0;
  left: 0;
  opacity:0;
  visibility:hidden;
  background-color: rgba(34, 34, 34, 0.6);
  transition:opacity .2s linear, visibility .1s, width 1s ease-in;
   }
.screen-overlay.show {
    transition:opacity .5s ease, width 0s;
    opacity:1;
    width:100%;
    visibility:visible;
}

.offcanvas{
	width:350px;
	visibility: hidden;
	transform:translateX(-100%);
	transition:all .2s;
  border-radius:0; 
  box-shadow: 0 5px 10px rgba(0,0,0, .2);
	display:block;
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  z-index: 1200;
  background-color: #fff;
  overflow-y: scroll;
  overflow-x: hidden;
}

.offcanvas.offcanvas-right {
   right: 0;
   left: auto;
   transform: translateX(100%); 
 }

.offcanvas.show{
	visibility: visible;
    transform: translateX(0);
    transition: transform .2s;
}

.offcanvas .btn-close{ position: absolute; right:15px; top:15px; }




/*work*/
.img-icon{
	 position: relative;
  width: 100%;
}

.overlay-1 {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color:rgba(192, 13, 57, 0.8);
  overflow: hidden;
  width: 0;
  height:100%;
  transition: 2s ease;
}
.image{
	display: block;
  width: 100%;
  height: 400px;
}

.img-icon:hover .overlay-1 {
  width: 100%;
}

.text{
	padding: 10px;
	 color: white;
  font-size: 15px;
  position: absolute;
  top: 50%;
  left: 60%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  white-space: nowrap;
}
.overlay-2{
	position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color:rgba(14, 30, 42, 0.8);
  overflow: hidden;
  width: 0;
  height:100%;
  transition: 2s ease;
}
.img-icon:hover .overlay-2 {
  width: 100%;
}
.overlay-3{
	position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color:rgba(196, 51, 38, 0.8);
  overflow: hidden;
  width: 0;
  height:100%;
  transition: 2s ease;
}
.img-icon:hover .overlay-3 {
  width: 100%;
}
.overlay-4{
	position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color:rgba(0, 0, 0, 0.8);
  overflow: hidden;
  width: 0;
  height:100%;
  transition: 2s ease;
}
.img-icon:hover .overlay-4 {
  width: 100%;
}
.overlay-5{
	position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color:rgba(47, 61, 179, 0.8);
  overflow: hidden;
  width: 0;
  height:100%;
  transition: 2s ease;
}
.img-icon:hover .overlay-5 {
  width: 100%;
}
.overlay-6{
	position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color:rgba(30, 33, 39, 0.8);
  overflow: hidden;
  width: 0;
  height:100%;
  transition: 2s ease;
}
.img-icon:hover .overlay-6 {
  width: 100%;
}
.overlay-7{
	position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color:rgba(28, 8, 7, 0.8);
  overflow: hidden;
  width: 0;
  height:100%;
  transition: 2s ease;
}
.img-icon:hover .overlay-7 {
  width: 100%;
}
/*work*/




/*sample*/

.course{
	text-align:center;
	color:green;
}
.course1{
	text-align:center;
	font-family:Bradley Hand ITC;
}
.cours2{
	margin-top:30px;
}

.cours2{
	position:relative;
	margin-bottom:50px;
	
}


.cours3{
	-border:1px solid red;
	position:absolute;
	top:-100px;
	opacity:0;
	-bottom:100px;
	-background-color:rgba(142,198,63,.8);
	background-color:rgba(0,0,0,0.6);
	height: 100%;
	color:white;
	padding:10px;
}
.cours2:hover .cours3 {
	opacity:1;
	top:0px;
	transition:1s;
	width: 100%;
}
.cours4{
	position:absolute;
	-border:1px solid red;
	-margin-top:-80px;
	padding-top:20px;
	width:100%;
	height:80px;
	opacity:0;
	bottom:-50px;
	-background-color:rgba(142,198,63,.8);
	background-color:rgba(0,0,0,0.3);
}
.cours2:hover .cours4{
	opacity:1;
	bottom:0;
	transition:1s;
}
.cours2:hover .hover{
	transform:scale(1.3);
	transition:1s;
}
.cours7{
	border:1px solid rgb(73,183,43);
	background-color:rgb(73,183,43);
	color:white;
	font-size:18px;
	padding:10px 15px;
	border-radius:5px 20px;
}
.cours7:hover{
	background-color:transparent;
	color:rgb(73,183,43);
	border:1px solid rgb(73,183,43);
	transition:1s;
}

.cou:hover{
	background-color:transparent !important;
	color:rgb(237,78,110) !important;
	border:1px solid rgb(237,78,110) !important;
}
/*sample*/


.float-call {
  position: fixed;
  width: 50px;
  height: 50px;
  bottom: 110px;
  left: 25px;
  background-color: #d33125;
  color: #FFF;
  border-radius: 50px;
  text-align: center;
  font-size: 20px;

  z-index: 100;
  }
 .my-float-call {
  margin-top: 16px;
}
.float {
  position: fixed;
  width: 50px;
  height: 50px;
  bottom: 40px;
  left: 25px;
  background-color: #25d366;
  color: #FFF;
  border-radius: 50px;
  text-align: center;
  font-size: 20px;

  z-index: 100;
}
.my-float {
  margin-top: 16px;
}




/*fmkfgjgjg*/
@import url(//fonts.googleapis.com/css?family=Montserrat:400,500,700);
.banner3 {
  font-family: "Montserrat", sans-serif;
  color: #8d97ad;
  font-weight: 300;
  max-height: 800px;
}

.banner3 .banner {
  position: relative;
  max-height: 700px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
  width: 100%;
  display: table;
}

.banner3 h1,
.banner3 h2,
.banner3 h3,
.banner3 h4,
.banner3 h5,
.banner3 h6 {
  color: #3e4555;
}

.banner3 .font-weight-medium {
  font-weight: 500;
}

.banner3 .subtitle {
  color: #8d97ad;
  line-height: 24px;
}

.banner3 .btn-danger-gradiant {
  background: #ff4d7e;
  background: -webkit-linear-gradient(legacy-direction(to right), #ff4d7e 0%, #ff6a5b 100%);
  background: -webkit-gradient(linear, left top, right top, from(#ff4d7e), to(#ff6a5b));
  background: -webkit-linear-gradient(left, #ff4d7e 0%, #ff6a5b 100%);
  background: -o-linear-gradient(left, #ff4d7e 0%, #ff6a5b 100%);
  background: linear-gradient(to right, #ff4d7e 0%, #ff6a5b 100%);
  border: 0px;
}

.banner3 .btn-danger-gradiant:hover {
  background: #ff6a5b;
  background: -webkit-linear-gradient(legacy-direction(to right), #ff6a5b 0%, #ff4d7e 100%);
  background: -webkit-gradient(linear, left top, right top, from(#ff6a5b), to(#ff4d7e));
  background: -webkit-linear-gradient(left, #ff6a5b 0%, #ff4d7e 100%);
  background: -o-linear-gradient(left, #ff6a5b 0%, #ff4d7e 100%);
  background: linear-gradient(to right, #ff6a5b 0%, #ff4d7e 100%);
}

.banner3 .btn-danger-gradiant.active,
.banner3 .btn-danger-gradiant:active,
.banner3 .btn-danger-gradiant:focus {
  -webkit-box-shadow: 0px;
  box-shadow: 0px;
  opacity: 1;
}


.banner3 .btn-md {
  padding: 15px 45px;
  font-size: 16px;
}

.banner3 .form-row {
  margin: 0;
}

.banner3 label.font-12 {
  font-size: 12px;
  font-weight: 500;
  margin-bottom: 5px;
}

.banner3 .form-control {
  color: #8d97ad;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
}

.banner3 .date label {
  cursor: pointer;
  margin: 0;
}

@media (max-width: 370px) {
  .banner3 .left,
  .banner3 .right {
    padding: 25px;
  }
}

@media (max-width: 320px) {
  .banner3 .left,
  .banner3 .right {
    padding: 25px 15px;
  }
}

.banner3 .font-14 {
  font-size: 14px;
}

.banner3 .text-inverse {
  color: #3e4555 !important;
}
/*jbncjdfjdhfjdfh*/

.about-btn {
    background-color: #3d83e1;
    padding: 10px 20px;
    border-radius: 20px;
    margin-left: 11px;
}
.about-btn:hover {
    background-color: black;
    padding: 10px 20px;
    border-radius: 20px;
    margin-left: 11px;
}
.banner-3{
	background-image: url(img/look-1-2.jpg);
	background-size: cover;
	background-position: center;
}
.hair-dry {
	background-image: url(img/lfffl.jpg);
	background-size: cover;
	background-position: center;
	height: 500px;
}
.hair-dry h1{
 font-size: 54px;;
}
.kit {
	background-image: url(img/gool-1-2.jpg);
	background-size: cover;
	background-position: center;
	height: 10px;
}
.ourwork {
	background-color: #e7e7e7;
}
/* //////////////////////////// */
.share-link {
	position: fixed;
    right: 0px;
    top: 58%;
    background: #da8650;
    width: 150px;
    height: 40px;
    z-index: 999;
    font-size: 1.5rem;
    display: block;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 35px;
    border: 1px solid #ccc;
    border-right: 0;
    z-index: 999;

}

.share-link:hover .share-items {
	display:block!important
}

.share-items {
	position: fixed;
    right: 0;
    top: 58%;
        text-align: center;
     width: 150px;
    height: 40px;
    background: #ffffff;
	z-index:999;
    color:#fff;
	    border: 1px solid #da8650;
	display:none;
	justify-content:center;
	align-items:center
}

.share-items a {
	width:auto;
    padding-left:10px;
    padding-right:10px;
	height:40px;
text-decoration: none;
	display:inline-block;
	text-align:center;
	line-height:40px;
	font-size: 22px;
	color:#ffffff
}

.share-link a {
    width: auto;
    padding-left: 10px;
    padding-right: 10px;
    height: 40px;
   
    display: inline-block;
    text-align: center;
    line-height: 40px;
    font-size: 1rem;
    color: #ffffff;
}

/* /////////////////////////////// */

.share-link1 {
	position: fixed;
    right: 0px;
   top: 67%;
    background: #da8650;
    width: 150px;
    height: 40px;
    z-index: 999;
    font-size: 1.5rem;
    display: block;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 35px;
    border: 1px solid #ccc;
    border-right: 0;
    z-index: 999;

}

.share-link1:hover .share-items1 {
	display:block!important
}

.share-items1 {
	position: fixed;
    right: 0;
   top: 67%;
      text-align: center;
     width: 150px;
    height: 40px;
     background: #ffffff;
	z-index:999;
    color:#fff;
	    border: 1px solid #da8650;font-size:2rem;
	display:none;
	justify-content:center;
	align-items:center
}

.share-items1 a {
	width:auto;
    padding-left:10px;
    padding-right:10px;
	height:0px;
text-decoration: none;
	display:inline-block;
	text-align:center;
	line-height:40px;
	    font-size: 23px;

	color:#ffffff
}

.share-link1 a {
    width: auto;
    padding-left: 10px;
    padding-right: 10px;
    height: 40px;
   
    display: inline-block;
    text-align: center;
    line-height: 40px;
    font-size: 1rem;
    color: #ffffff;
}

/* /////////////////////////////////// */


.share-link2 {
	position: fixed;
    right: 0px;
   top: 76%;
      text-align: center;
    background: #da8650;
    width: 150px;
    height: 40px;
    z-index: 999;
    font-size: 1.5rem;
    display: block;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 35px;
    border: 1px solid #ccc;
    border-right: 0;
    z-index: 999;

}

.share-link2:hover .share-items2 {
	display:block!important
}

.share-items2 {
	position: fixed;
    right: 0;
   top: 76%;
     width: 150px;
    height: 40px;
     background: #ffffff;
	z-index:999;
    color:#fff;
	    border: 1px solid #da8650;font-size:2rem;
	display:none;
	justify-content:center;
	align-items:center
}

.share-items2 a {
	width:auto;
    padding-left:10px;
    padding-right:10px;
	height:0px;
text-decoration: none;
	display:inline-block;
	text-align:center;
	line-height:40px;
	font-size:1rem;
	color:#ffffff
}

.share-link2 a {
    width: auto;
    padding-left: 10px;
    padding-right: 10px;
    height: 40px;
   
    display: inline-block;
    text-align: center;
    line-height: 40px;
    font-size: 1rem;
    color: #ffffff;
}