@import url("https://fonts.googleapis.com/css2?family=Acme&display=swap");
:root {
  --light-cl: #77346D;
  --bg-hover-cl: #CB9426;
  --bg-cl: linear-gradient(90deg, #77346D 0%, rgba(150, 98, 142, 0.771) 30.4%, rgba(255, 255, 255, 0) 100%);

}
::selection{
    background:#77346D;
    color:white;
}

.contact-us-btn 
{
  height: 56px;
  width:180px;
  border: none;
  color: var(--light-cl);
  background-color: white;
  border:3px var(--light-cl) solid;
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
  /* position: relative; */
  display: inline-block;
  text-decoration: none;
  text-align:center;
  line-height:50px;
  font-size:13px;
  position:relative;
  font-family: "Inter", sans-serif;
  overflow:hidden;
}
.contacttext{
    position:relative;
    z-index:999;
    font-weight:600;
}
.contact-us-btn::before {
  left: -185px;
  width:100%;
  height:100%;
  background:var(--light-cl);
  content:"";
  display:block;
  position:absolute;
  top:0px;
  transition:left 0.2s linear;
}
.contact-us-btn:hover::before {
  left: 0px;
}
.contact-us-btn:hover .contacttext{
    color: white;
}

.herosec {
  /* content: ''; */
  background: linear-gradient(90deg, #77346D, rgba(255, 255, 255, 0)), url('../images/herosecbg.jpg'), transparent;

  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  z-index: 1;
  position: relative;
  height: auto;
}

.content-sec {
  z-index: 2;
  position: relative;
  padding-left: 100px;
}


@media only screen and (max-width: 600px) {
  .content-sec {
    padding: 10px;
  }

}



.hero-sec-content {
  color: white;


}

.main-heading {
  font-family: Alegreya;
  font-size: 76px;
  font-weight: 700;
  line-height: 88.16px;
  letter-spacing: -0.03em;

}

.hero-sec-text {
  font-family: "Inter", sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 28px;
  letter-spacing: 0.15em;
}
.book-now {
  border: none;
  color: white;
  background-color: black;
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
  padding: 1rem;
  overflow: hidden;
  display: inline-block;
  cursor: pointer;
  border: 3px solid black;
  border-radius: 5px;
  text-decoration: none;
  font-family: "Hind Madurai", sans-serif;
  font-size:1.25rem;
}
.book-now:hover {
  color: white;
  background-color: var(--bg-hover-cl);
  border-color: var(--bg-hover-cl);
  transform: translateX(2px);
  cursor: pointer;
  color: black;
}
.browse-btn {
  border: none;
  color: white;
  background-color: transparent;
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
  padding: 1rem;
  overflow: hidden;
  display: inline-block;
  cursor: pointer;
  border: 3px solid #CB9426;
  border-radius: 5px;
  text-decoration: none;
  font-family: "Hind Madurai", sans-serif;
  font-size:1.25rem;
}
.browse-btn:hover {
  color: var(--light-cl);
  /* Text color on hover */
  background-color: var(--bg-hover-cl);
  transform: translateX(2px);
  /* Move the button 5px to the right */
  cursor: pointer;
  color: black;
}
@media (max-width: 600px)
{
    .browse-btn{
        font-size:1rem;
        padding: 0.5rem;
    }
    .book-now{
        font-size:1rem;
        padding: 0.5rem;
    }
}
.our-story-about {
  font-family: "Hind Madurai", sans-serif;
  margin-top: 20px;
  margin-bottom: 40px;
}
.about-heading 
{
  font-family: Poppins;
  font-size: 44px;
  font-weight: 700;
  line-height: 56px;
  text-align: left;
  background:linear-gradient(to top, #141414 1.05%, #77346D 99.63%);
  background-clip: text;
  color:transparent;
}
.about-content {
  font-family: Poppins;
  font-size: 20px;
  font-weight: 400;
  line-height: 40px;
  text-align: left;
  color: #606060;
}
.about-sec-text {
  font-family: "Poppins", sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 40px;
  text-align: left;
}
.first-image {
  /* border:2px solid black; */
  position: relative;
  /* height:300px;h */
  height: auto;
}
.second-img {
  /* display: none; */
  /* border:2px solid black; */
  height: 450px;
  border-top-left-radius: 10rem;
  border-bottom-left-radius: 10rem;
  border-top-right-radius: 10rem;
  border-bottom-right-radius: 10rem;
  overflow: hidden;
  /* border-top: 200px; */
  position: absolute;
  top: 1rem;
  right: 0;
  /* left:10rem; */
  /* left:1rem; */
}
.join-team-section {
  /* content: ''; */
  background: url('../images/team.png')!important;
  background-repeat: no-repeat!important;
  background-position: center!important;
  background-size: 100% 100%!important;
  position: relative;
}
.teamSectionPadding{
    padding:230px 30px;
}

.team-content {
  margin-top: 150px;
  margin-bottom: 150px;
}

.sub-cont-A {
  z-index: 2;
  position: relative;
}

.content-item {
  font-family: Poppins;
  font-size: 40px;
  font-weight: 500;
  line-height: 56.4px;
  letter-spacing: -0.03em;
  text-align: center;
  color: white;
}
@media only screen and (max-width: 1076px) {
  .teamSectionPadding {
      padding:130px 30px;
    }
}
@media only screen and (max-width: 886px) {
  .teamSectionPadding {
      padding:70px 30px;
    }
}
@media only screen and (max-width: 600px) {
  .content-item {
    font-size: 20px;
    line-height:32px;
  }
  .teamSectionPadding {
      padding:40px 30px;
    }
}
.bgGrayTrans{
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.6);
}
.join-us-btn 
{
  height: 60px;
  border: none;
  color: white;
  background-color: var(--light-cl);
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
  /* position: relative; */
  padding: 5px 5px;
  overflow: hidden;
  display: inline-block;
  cursor: pointer;
  border-radius: 5px;
  text-decoration: none;
  font-family: "Inter";
  font-weight: 600;
}


.join-us-btn:hover {
  background-color: #CB9426;
  transform: translateX(2px);
  cursor: pointer;
  color: black;
}


.load-us-btn {
  height: 88px;
  text-transform: uppercase;
  width: 294px;
  border: none;
  color: white;
  background: linear-gradient(180deg, #77346D 0%, #000000 143.18%);
  transition: background 0.3s ease;
  overflow: hidden;
  cursor: pointer;
  display: inline-flex;
  border-radius: 40px;
  font-weight: 500;
  justify-content: center;
  align-items: center;
}

.load-us-btn:hover {
  background: linear-gradient(0deg, #77346D 0%, #000000 143.18%);
  cursor: pointer;
}

.hairstyle-name {
  color: white;
  font-size: 25px;
  font-weight: 700;
  z-index:999;
  position:relative;
}




.services-heading h3
{
  font-family: Poppins;
  font-size: 96px;
  font-weight: 700;
  text-transform: uppercase;
  background: linear-gradient(to top, #141414 1.05%, #77346D 99.63%);
  -webkit-background-clip: text;
  color: transparent;
  background-clip: text;
}


@media only screen and (max-width: 600px) {
  .services-heading h3 {
    font-size: 26px;
    margin:50px 0px 20px;
  }
}
.card1 {
  width: 400px !important;
  height: 500px;
  background: linear-gradient(to top, rgba(150, 98, 142, 0.771), rgba(255, 255, 255, 0)), url('../images/card1.png'), transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  z-index: 1;
  position: relative;
  color: white;
  text-decoration: none;
}
.card2 {
  width: 400px !important;
  height: 500px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url('../images/card2.png') transparent;
  background-repeat: no-repeat!important;
  background-position: center!important;
  background-size: cover!important;
  z-index: 1;
  position: relative;
  color: white;
  text-decoration: none;
}
.service1 {
  background: linear-gradient(to top, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url('../images/services/service1.png') transparent;
}
.service2 {
  background: linear-gradient(to top, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url('../images/services/service2.png') transparent;
}
.service3 {
  background: linear-gradient(to top, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url('../images/services/service3.png') transparent;
}
.service4 {
  background: linear-gradient(to top, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url('../images/services/service4.png') transparent;
}
.service5 {
  background: linear-gradient(to top, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url('../images/services/service5.png') transparent;
}
.service6 {
  background: linear-gradient(to top, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url('../images/services/service6.png') transparent;
}
.service7 {
  background: linear-gradient(to top, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url('../images/services/service7.png') transparent;
}
.service8 {
  background: linear-gradient(to top, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url('../images/services/service8.png') transparent;
}
.service9 {
  background: linear-gradient(to top, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url('../images/services/service9.png') transparent;
}
.card2:before{
    content:"";
    display:block;
    height: 100%;
    width:100%;
    position:absolute;
    background: linear-gradient(45deg, rgba(150, 98, 142, 0.571), rgba(255, 255, 255, 0)), transparent;
    opacity:0;
    transition: 0.3s all linear;
}
.card2:hover:before{
    opacity:1;
}
.card3 {
  width: 400px !important;
  height: 500px;
  background: linear-gradient(to top, rgba(150, 98, 142, 0.771), rgba(255, 255, 255, 0)), url('../images/card3.png'), transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  z-index: 1;
  position: relative;
  color: white;
  text-decoration: none;
}
.cards-container {
  gap: 10px;
}
/* here  is the styles for the about ::-webkit-progress-value */

.aboutherosec {
  background: linear-gradient(to top, rgba(150, 80, 142, 0.771), rgba(255, 255, 255, 0)), url('../images/aboutpgimg.png'), transparent;
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  z-index: 1;
  position: relative;
  height: 60vh;

}

.about-desc {
  color: white;
  font-family: Inter;
  font-size: 36px;
  font-weight: 700;
  line-height: 28px;
  letter-spacing: 0.15em;
  text-align: center;
}



.about-main-heading {
  font-family: Alegreya;
  font-size: 90px;
  font-weight: 700;
  line-height: 115.2px;
  letter-spacing: -0.03em;
  text-align: center;
  color: white;
}

.star-logo{
    height:150px;
    width:150px;
}
@media only screen and (max-width: 600px) {

  .about-main-heading {
    font-size: 30px;
    line-height: 40.16px;
  }
  .star-logo{
        height:80px;
        width:80px;
        
    }
}
/* 
.star-logo
{

  filter: brightness(1) saturate(1) invert(0) sepia(0) saturate(1) hue-rotate(0) brightness(1) contrast(1); 
  transition: filter 0.3s ease;
  background-color: white;
  border-radius: 50%;

}


.star-logo:hover
{
 filter: brightness(0) saturate(100%) invert(1%) sepia(17%) saturate(680%) hue-rotate(16deg) brightness(94%) contrast(51%);
  cursor: pointer;
  color: white;
} */



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

  .about-heading {
    font-size: 30px;
    line-height: 40px;

  }

  .about-heading p {
    font-size: 18px;

  }
}






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

  .fact-sec-heading {
    font-size: 26px !important;
    line-height: 40.6px !important;

  }

  .about-heading p {
    font-size: 16px;
  }
}




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

  .choose-head {
    font-size: 30px !important;

  }

  .about-heading p {
    font-size: 16px;
  }
}




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

  .appoinment-head {
    font-size: 30px;

  }

  .head-top {
    font-size: 30px;
  }

}



.fact-section {
  background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.6)), url('../images/fact.png');
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  z-index: 1;
  position: relative;
  height: auto;
}



.fact-sec-heading {
  color: white;
  font-family: Alegreya;
  font-size: 48px;
  font-weight: 700;
  line-height: 57.6px;
  text-align: center;
  margin-bottom: 16px;

}

.fact-desc {
  color: white;
  font-family: Hind Madurai;
  font-size: 20px;
  font-weight: 400;
  line-height: 31.8px;
  letter-spacing: -0.02em;
  text-align: center;
}



.choose-head {
  color: var(--light-cl);
  font-family: Alegreya;
  font-size: 48px;
  font-weight: 700;
  line-height: 57.6px;
  text-align: left;
}

.choose-text-area {
  color: #78828A;
  font-family: Hind Madurai;
  font-size: 20px;
  font-weight: 400;
  line-height: 30px;
  letter-spacing: -0.02em;
  text-align: left;



}


.appointment-desc {
  color: #6E6E6E;


}


.form-container {

  background-color: #D9D9D98A;
  ;

}

.next-links ul li {
  text-decoration: none;
  list-style: none;
  color: #6E6E6E;
}

.learn-more-btn span {
  transform: rotate(10deg);
  font-size: 14px;
}

.learn-more-btn {
  border: 2px solid var(--light-cl);
  height: 52px;
  width: 152px;
  transform: rotate(-10deg);
  text-decoration: none;
  color: black;
  font-family: Poppins;
  font-weight: 400;
  text-align: center;
  padding: 0px;
  border-radius: 94px / 30px;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
    transition:0.3s all linear;
}

.learn-more-btn:hover {
  background-color: var(--light-cl);
  color: white;
  border-color: var(--light-cl);

}




.right-sec {
  position: relative;
  width: 100%;
  max-width: 30rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
}
@media only screen and (max-width: 600px) {
    .right-sec {
      margin-top:30px!important;
    }
}

.mainimg {
  position: relative;
  width: 80%;
}
.mainimg > img {
  width: 100%;
  transition:0.5s all linear;
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.6);
}
.mainimg:hover > img
{
    transform: scale(1.075);   
    border-radius:3px;
}

.both {
  display: flex;
  align-items: center;
  position: absolute;
  top: 75%;
  left: -.4rem;
  right: -.1rem;
  justify-content: space-between;
  transform: translateY(-50%);
  padding: 0 10px;
}
.img1 img {
  height: 23rem;
  border-top-left-radius: 6rem;
  border-bottom-left-radius: 6rem;
  border-top-right-radius: 6rem;
  border-bottom-right-radius: 6rem;
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.6);
}
.mainimg:hover .img2 img
{
    transform: rotate(360deg);
}
@media only screen and (max-width: 600px) {
  .both {
    display: flex;
    align-items: center;
    position: absolute;
    top: 70%;
    left: -.8rem;
    right: -.1rem;
    justify-content: space-between;
    transform: translateY(-50%);
    padding: 0 10px;
  }
}
.img2 img {
  border-radius: 50%;
  height: 8rem;
  background-color: white;
  padding:0px;
  transition: transform 0.5s linear;
}
.img1 {
  position: absolute;
  right: -6rem;
}

.img2 {
  position: absolute;
  left: -5rem;
}


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

  .main-heading {
    font-size: 34px;
    line-height: 50.16px;
  }

  .hero-sec-content {
    font-size: 20px;
  }
  .img2 {
      left: -2rem;
    }
}


.lower-sec {

  color: black;
  font-family: Alegreya;
  font-size: 24px;
  font-weight: 700;
  line-height: 28.8px;
  text-align: left;
  padding-left: 20px;
  border-left: 4px solid var(--light-cl);


}



.footersearch {
  background: transparent;
  width: 280px;
  border: 1px solid white;
  padding: 17px 18px;
}

.footersearch:focus-visible {
  outline: none;
  border: 1px solid white;
}


.footer-bottom-link a {
  color: white;
  text-decoration: none;

}
.choose-heading {
  color: #606060;
  font-size: 18px;
  text-align: left;
}
.small-svg {
  width: 50px !important;
  height: 50px;
  padding: 6px;
  fill: white;
  background-color: #77346D;
  border-radius: 50%;
}
.small-svg:hover {
  cursor: pointer;
  fill: var(--light-cl);
  background-color: var(--bg-hover-cl);
}
.social-contact-icon {
  width: 65px !important;
  height: 60px;
  padding: 6px;
  fill: #6E6E6E;
  background-color: white;
  border-radius: 8%;
  border: 2px solid #6E6E6E;
}



.social-contact-icon:hover {
  cursor: pointer;
  fill: black;
  background-color: var(--bg-hover-cl);

}

.tiktok-icon {
  width: 65px !important;
  height: 60px;
  padding: 6px;
  fill: #6E6E6E;
  background-color: white;
  border-radius: 8%;
  border: 2px solid #6E6E6E;
  font-style: 500;
}


.tiktok-icon:hover {
  cursor: pointer;
  fill: black;
  background-color: var(--bg-hover-cl);

}

.slider{
    width:100%;
    overflow-x:scroll;
    white-space: nowrap;
    padding-bottom:2px;
}
.slider .slide{
    width:350px;
    display:inline-block;
}
.slider::-webkit-scrollbar-thumb
{
    margin-top:5px;
    height: 5px;
}
.slider::-webkit-scrollbar {
    height: 5px;
}
.slider::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px #77346D; 
    border-radius: 1px;
}
.slider::-webkit-scrollbar-thumb {
    background: #77346D; 
    border-radius: 1px;
}
.slider::-webkit-scrollbar-thumb:hover {
    background:#CB9426;
}

::-webkit-scrollbar-thumb
{
    width: 15px;
}
::-webkit-scrollbar {
    width: 15px;
}
::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px #77346D; 
    border-radius: 1px;
}
::-webkit-scrollbar-thumb {
    background: #77346D; 
    border-radius: 1px;
}
::-webkit-scrollbar-thumb:hover {
    background:#CB9426;
}

@media (max-width: 600px)
{
    .card2{
        height: 350px;
        width: 250px!important;
    }
    .slider .slide{
        width: 250px!important;
    }
}