@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap');
/* font-family: 'Patua One', cursive; */

* {
     padding: 0;
     margin: 0;
     box-sizing: border-box;
     outline: none;
     text-decoration: none;
     border: none;
     scroll-behavior: smooth;
     font-family: 'Roboto', sans-serif;
}

:root {
     --main-color: #461974;
     --bg-color: #fff;
     --bg-second: #E2EEF5;
     --bg-transparent: rgba(0, 0, 0, .8);
     --bg-transparent-card: rgba(0, 0, 0, .7);
     --bg-third: #EFEFEF;

     --blue: #152B42;
     --green: #25D366;
     --grey: #777;
     --red: #fa3e3e;

     --heading-color: #444444;
     --text-color-dark: #626262;
     --text-color-light: #fff;

     --border: .1rem solid #ccc;
     --border-white: : .1rem solid #fff;
     --border-main-color: .1rem solid var(--main-color);

     --box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .1);
     --box-shadow-footer-links: 1px 1px 2px #6f6f6f;
}

html {
     font-size: 62.5%;
     overflow-x: hidden;
}

body {
     overflow-x: hidden;
}

.space {
     height: 100vh;
}

.space.black {
     background-color: rgb(49, 42, 42);
}

.space.white {
     background-color: rgb(245, 235, 235);
}

section {
     padding: 5rem 7% 5rem;
}

.heading {
     font-size: 5rem;
     line-height: normal;
     padding: 1rem 0rem 1rem;
     color: var(--main-color);
     text-transform: capitalize;
     text-align: start;
     font-weight: 400;
     text-align: center;
     padding: .5rem;
     display: flex;
     align-items: center;
     justify-content: center;
}

.heading span {
     border-top: var(--border-main-color);
     border: var(--border-main-color);
     display: inline-block;
     border-width: .3rem;
     width: 3rem;
}

.heading-carosel {
     font-size: 5rem;
     line-height: normal;
     padding: 1rem 0rem 1rem;
     color: var(--main-color);
     text-transform: capitalize;
     text-align: left;
     font-weight: 500;
     padding: .5rem;
}

.heading-1 {
     font-size: 3rem;
     line-height: normal;
     padding: .5rem 0rem .5rem;
     color: var(--main-color);
     text-align: start;
     font-weight: 500;
}

.heading-2 {
     font-size: 2rem;
     line-height: normal;
     font-family: 'Patua One', cursive;
     padding: .5rem 0rem .5rem;
     color: var(--main-color);
     text-align: start;
     font-weight: 500;
}

.text {
     font-size: 1.7rem;
     color: var(--text-color-dark);
     font-family: 'Roboto', sans-serif;
}

.text-carosel {
     font-size: 1.7rem;
     color: var(--text-color-dark);
     font-family: 'Roboto', sans-serif;
}

.btn {
     font-size: 2rem;
     background-color: var(--main-color);
     color: var(--text-color-light);
     padding: 1.5rem 2.5rem;
     border-radius: 3rem;
     cursor: pointer;
     font-weight: 300;
     transition: all .1s ease;
}

.btn span {
     display: none;
}

.btn:hover span {
     display: inline-block;
}

.btn:hover {
     background-color: var(--grey);
}

.flex-center {
     display: flex;
     justify-content: center;
     align-items: center;
}


.fixed-btns {
     position: fixed;
     bottom: 1rem;
     right: 2rem;
     z-index: 100;
     flex-direction: column;
     gap: 1.5rem;
}

.top a {
     background-color: var(--main-color);
     border-radius: 10rem;
     border: var(--border);
}

.top a i {
     font-size: 4rem;
     color: var(--text-color-light);
}

.whatsapp a {
     background-color: var(--green);
     border-radius: 10rem;
     padding: 1rem;
}

.whatsapp a i {
     font-size: 4rem;
     color: var(--text-color-light);
}


.header {
     position: fixed;
     top: 0;
     right: 0;
     width: 100%;
     z-index: 100;
}

.header.sticky {
     box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
}

.header>.header-top,
.header>.header-down {
     padding: 0 7%;
     font-size: 1.5rem;
     font-weight: 500;
     /* text-transform: capitalize; */
     transition: transform 0.1s ease;
}

.header>.header-top {
     display: flex;
     justify-content: space-between;
     align-items: center;
     clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
     background-color: var(--main-color);
     height: 5rem;
     opacity: 1;
     transition: height .2s ease;
}

.header-top .contact a {
     color: var(--text-color-light);
     font-weight: 300;
}

.header-top .contact {
     display: flex;
     justify-content: space-between;
     align-items: center;
     text-transform: inherit;
     gap: 2rem;
     height: 100%;
}

.header-top .contact span a {
     display: flex;
     align-items: center;
     gap: .2rem;
}

.header-top .contact a i {
     font-size: 3rem;
     font-weight: 500;
}

.header-top>.contact>a {
     border: var(--border);
     border-radius: 10rem;
     display: flex;
     justify-content: center;
     align-items: center;
     padding: .5rem;
     font-size: 4rem;
}

.header-top .contact a:hover {
     color: var(--red);
}

.header-top .contact a>span {
     transition: .5s ease;
}

.header-top .contact a:hover>span {
     padding-left: 1rem;
}

.hide {
     height: 0;
}

.header-top.hide {
     /* transition: all .2s ease; */
     height: 0;
}

.header-down {
     display: flex;
     justify-content: flex-start;
     align-items: center;
     height: 8rem;
     gap: 10rem;
     background: var(--bg-color);
     color: var(--text-color-dark);
     transition: height ease;
}

.navbar>ul {
     display: flex;
     align-items: center;
     width: 100%;
     justify-content: center;
     gap: 3rem;
     height: 8rem;
     list-style: none;
     transition: all ease;
}

.navbar>ul>li {
     height: 100%;
     position: relative;
}

.navbar>ul>li>a {
     color: var(--text-color-dark);
     font-weight: 500;
     font-size: 2rem;
     display: flex;
     align-items: center;
     height: 100%;
     border-bottom: var(--border-main-color);
     border-width: .4rem;
     border-color: var(--bg-color);
}

.navbar li>a:hover {
     color: var(--main-color);
     border-color: var(--main-color);
}

.navbar li>a.active {
     color: var(--main-color);
     border-color: var(--main-color);
}

.navbar>ul .ul-list {
     display: grid;
     position: absolute;
     top: 100%;
     list-style: none;
     background-color: var(--bg-third);
     width: 15rem;
     border: var(--border);
     border-width: 1px;
     display: none;
}

.navbar>ul .ul-list li {
     border: var(--border);
     border-width: 1px;
     width: 100%;
}

.navbar li:hover .ul-list {
     display: grid;
}

.navbar>ul .ul-list li:hover {
     background-color: rgba(0, 0, 0, 0.048);
}

.navbar>ul .ul-list li a {
     color: var(--text-color-dark);
     width: 100%;
     display: block;
     padding: 1rem 2rem;
}

.logo {
     overflow: hidden;
     height: 100%;
}

.logo img {
     height: 8rem;
     transition: height .5s ease;
}

#hamburg {
     font-size: 3.5rem;
     color: var(--text-color-light);
     display: none;
     cursor: pointer;
}

.links {
     display: flex;
     align-items: center;
     gap: 1rem;
}

.links a {
     font-size: 2.5rem;
     border-radius: 10rem;
     background-color: var(--bg-color);
     color: var(--text-color-dark);
     padding: .5rem;
     display: flex;
     justify-content: center;
     align-items: center;
}

.links a.blue:hover {
     background-color: var(--blue);
     color: var(--bg-color);
}

.links a.red:hover {
     background-color: var(--red);
     color: var(--bg-color);
}

.links a.main:hover {
     background-color: var(--main-color);
     color: var(--bg-color);
}

.active {
     display: block;
}

.home {
     padding-top: 8rem;
     position: relative;
     min-height: 500px;
     height: 100vh;
     padding: 0;
}

.home .carousel {
     max-width: 100vw;
     max-height: 100vh;
     min-height: 500px;
}

.carousel {
     overflow: hidden;
     width: 100%;
     height: 100%;
}

.carousel-container {
     display: flex;
     transition: transform 0.5s ease;
     width: 100%;
     height: 100%;
}

.carousel {
     position: relative;
     /* box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.64); */
     /* margin-top: 150px; */
}

.carousel-inner {
     position: relative;
     overflow: hidden;
     width: 100%;
     height: 100%;
}

.carousel-inner .down-about {
     position: absolute;
     bottom: 3rem;
     color: var(--main-color);
     font-size: 5rem;
     left: 50%;
     right: 50%;
     transform: translate(-50%, -50%);
     animation: slideIn 2s infinite ease;
}

@keyframes slideIn {
     0% {
          transform: translateY(2rem);
     }

     50% {
          transform: translateY(0rem);
     }

     100% {
          transform: translateY(2rem);
     }

}

.carousel-open:checked+.carousel-item {
     position: static;
     opacity: 100;
}

.carousel-item {
     position: absolute;
     opacity: 0;
     -webkit-transition: opacity 1s ease-out;
     transition: opacity 1s ease-out;
     width: 100%;
     height: 100%;
}

.carousel-item img {
     display: block;
     height: 100%;
     width: 100%;
     max-width: 100%;
     object-fit: cover;
     object-position: center;
}

.carousel-item .data {
     position: absolute;
     padding: 0 3rem;
     top: 60%;
     transform: translateY(-50%);
     left: 7%;
     right: 7%;
     display: flex;
     flex-direction: column;
     gap: 2rem;
     align-items: start;
     max-width: 70rem;
     -webkit-transition: opacity 2s ease-out;
     transition: opacity 2s ease-out;
     opacity: 0;
}

.carousel-open:checked+.carousel-item .data {
     opacity: 100;
}

.carousel-control {
     background: var(--bg-transparent-white-form);
     border-radius: 50%;
     color: var(--text-color-light);
     cursor: pointer;
     display: none;
     font-size: 3.5rem;
     height: 4rem;
     line-height: 3.5rem;
     position: absolute;
     top: 60%;
     -webkit-transform: translate(0, -50%);
     cursor: pointer;
     -ms-transform: translate(0, -50%);
     transform: translate(0, -50%);
     text-align: center;
     width: 4rem;
     z-index: 10;
     user-select: none;
     background: rgba(0, 0, 0, 0.8);
}

.carousel-control.prev {
     left: 2%;
}

.carousel-control.next {
     right: 2%;
}

.carousel-control:hover {
     background: var(--main-color);
}

#carousel-1:checked~.control-1,
#carousel-2:checked~.control-2,
#carousel-3:checked~.control-3,
#carousel-4:checked~.control-4,
#carousel-5:checked~.control-5 {
     display: block;
}


.about-us .heading {
     margin-top: 4rem;
     margin-bottom: 4rem;
}


.about-us .text {
     margin-bottom: 4rem;
     text-align: center;
}

.about-us-down {
     display: flex;
     gap: 2rem;
     padding-top: 3rem;
}

.about-us-down .left {
     width: 100%;
}

.about-us-down .left video {
     width: 100%;
     height: 100%;
     font-size: 1.4rem;
}

.stars {
     display: inline-flex;
     align-items: center;
     gap: .5rem;
     color: orange;
     font-size: 3rem;
}

.customers {
     width: 90%;
}

.customers .heading-1 {
     text-align: center;
     margin-bottom: 5rem;
}

.customers .carousel {
     position: relative;
     box-shadow: none;
}

.customers .carousel-inner {
     position: relative;
     overflow: hidden;
     width: 100%;
     height: 100%;
     display: flex;
     justify-content: center;
}

.customers .carousel-item {
     text-align: center;
     width: 90%;
     height: 100%;
}

.customer-info {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     padding: 0.5rem 3.5rem;
     gap: 1.5rem;
     min-height: 40rem;
}

.customer-info .circle {
     display: flex;
     justify-content: center;
     align-items: center;
     width: fit-content;
     font-size: 3rem;
     border-radius: 50%;
     height: 10rem;
     width: 10rem;
     user-select: none;
}

.customer-info p:last-child {
     font-size: 2rem;
     font-weight: 500;
     font-style: italic;
}

#carousel-customer-1:checked~.control-1,
#carousel-customer-2:checked~.control-2,
#carousel-customer-3:checked~.control-3,
#carousel-customer-4:checked~.control-4,
#carousel-customer-5:checked~.control-5 {
     display: block;
}


.services .heading {
     margin-top: 4rem;
     margin-bottom: 4rem;
}


.services-grid-container {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 2rem;
     padding: 4rem 0;
     font-size: 5rem;
}


.services-item {
     cursor: pointer;
     position: relative;
}

.services-item::after {
     content: '';
     position: absolute;
     background-color: rgba(0, 0, 0, 0.5);
     inset: 0;
     display: flex;
     align-items: center;
     justify-content: center;
     color: var(--text-color-light);
     transition: all .4s ease-in;
}

.services-item.hair::after {
     content: 'HAIR';
}

.services-item.nail::after {
     content: 'NAIL';
}

.services-item.skin::after {
     content: 'SKIN';
}

.services-item.body::after {
     content: 'BODY';
}

.services-item:hover::after {
     opacity: 0;
}

.services-item img {
     width: 100%;
     height: 100%;
}

.gallery {
     padding-bottom: 0;
}

.gallery .heading {
     margin-top: 4rem;
     margin-bottom: 4rem;
}

.gallery-grid-container {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     padding-top: 4rem;
}

.gallery-item {
     overflow: hidden;
}

.gallery-item img {
     width: 100%;
     height: 100%;
     cursor: pointer;
     transition: transform .3s ease-in;
}

.gallery-item img:hover {
     transform: scale(1.1);
}

.footer {
     background-color: var(--main-color);
}

.footer-up {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 1rem;
     justify-content: space-between;
     align-items: flex-start;
     padding: 5rem 7%;
     border-bottom: var(--border);
     border-color: var(--grey);
}

.box-footer {
     display: flex;
     flex-direction: column;
     margin-top: 2rem;
     gap: 1.5rem;
     max-width: 28rem;
}

.box-footer h3 {
     font-size: 2.4rem;
     color: var(--text-color-light);
}

.box-footer a {
     font-size: 1.7rem;
     color: var(--text-color-light);
     font-weight: 600;
}

.box-footer .instagram {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 0.5rem;
     width: 23rem;
}

.box-footer .instagram img {
     width: 7rem;
     height: 7rem;
     object-fit: cover;
}

.box-footer a span {
     transition: all .2s ease;
}

.box-footer a:hover span {
     padding-left: 1rem;
}

.box-footer a:hover {
     color: var(--red);
}

.box-footer a i {
     border: var(--border-main-color);
     padding: .1rem;
     font-size: 2.5rem;
}

.footer-form {
     display: flex;
     gap: 1rem;
}

.footer-form .btn {
     background-color: #5916A2;
     padding: 1rem 1.5rem;
     font-size: 1.4rem;
     border-radius: .1rem;
}

.footer-form input[type='email'] {
     padding: 1rem;
     height: fit-content;
     font-size: 1.4rem;
}

.rechapcha {
     width: 100%;
     height: 8rem;
     background-color: var(--bg-color);
}

.footer-down {
     padding: 2rem 7% 2rem;
}

.footer-down .links a {
     background-color: var(--main-color);
     color: var(--text-color-light);
}

.footer .credit {
     text-align: center;
     font-size: 1.5rem;
     color: var(--text-color-light);
     display: flex;
     justify-content: space-between;
     align-items: center;
     gap: 1rem;
     flex-wrap: wrap;
     font-weight: 500;
}

.footer .credit .content a {
     text-decoration: underline;
     color: var(--text-color-light);
}

.footer .credit .content a:hover {
     color: var(--text-color-dark);
}


/* hair page */
.banner {
     height: 40rem;
     margin-top: 12rem;
     display: flex;
     align-items: center;
     flex-direction: column;
     justify-content: center;
     gap: 1rem;
     transition: margin-top .1s ease;
}

.banner .heading-carosel {
     text-align: center;
     color: var(--text-color-light);
     text-transform: uppercase;
}

.banner .btn {
     background-color: var(--bg-color);
     color: var(--main-color);
     font-size: 2.5rem;
}

.banner .btn:hover {
     background-color: var(--main-color);
     color: var(--text-color-light);
}

.service-detail {
     color: var(--main-color);
     padding-left: 10%;
}

.service-detail .heading {
     text-align: left;
     justify-content: start;
}

.service-detail p {
     padding-bottom: 1rem;
     color: var(--main-color);
}

.service-detail ul {
     padding-left: 3rem;
}

.service-detail ul li {
     color: var(--main-color);
     line-height: 3rem;
}

.banner.hair {
     background: url('../img/banner-hair.jpg');
     background-repeat: no-repeat;
     background-size: cover;
     background-position: right;
}

.banner.skin {
     background: url('../img/banner-skin.jpg');
     background-repeat: no-repeat;
     background-size: cover;
     background-position: center;
}

.banner.nail {
     background: url('../img/banner-nail.jpg');
     background-repeat: no-repeat;
     background-size: cover;
     background-position: center;
}

.banner.body {
     background: url('../img/banner-body.jpg');
     background-repeat: no-repeat;
     background-size: cover;
     background-position: left;
}


/* Offer page */

.banner.offer {
     background: url('../img/banner-offer.jpg');
     background-repeat: no-repeat;
     background-size: cover;
     background-position: left;
     /* height: 30rem; */
}

.offers .heading {
     margin-bottom: 3rem;
}

.offers .content {
     display: flex;
     flex-direction: column;
     gap: 3rem;
     max-width: 70rem;
}

.offers .content .heading-1 {
     font-weight: 400;
}

.offers .content div ul {
     padding-left: 3rem;
     padding-top: 2rem;
}

/* picture page */

.banner.picture {
     background: url('../img/banner-pictures.jpg');
     background-repeat: no-repeat;
     background-size: cover;
     background-position: left;
     /* height: 30rem; */
}

.gallery.picture {
     padding-bottom: 5rem;
}


/* video page */
.banner.video {
     background: url('../img/banner-video.jpg');
     background-repeat: no-repeat;
     background-size: cover;
     background-position: left;
     /* height: 30rem; */
}

.videos-page .heading {
     padding-bottom: 5rem;
}

.grid-video-container {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 2rem;
}

.item-video video {
     width: 100%;
}

.item-video iframe {
     width: 100%;
}

/* Contact us Page */
.banner.contact {
     background: url('../img/banner-contact.jpg');
     background-repeat: no-repeat;
     background-size: cover;
     background-position: left;
     /* height: 30rem; */
}

.contact-page .heading {
     padding-bottom: 5rem;
}

.contact-page .container {
     display: flex;
     gap: 2rem;
}

.contact-page .container .left {
     display: flex;
     align-items: start;
     justify-content: center;
     width: 70%;
}

.contact-page .container .right {
     width: 100%;
}

.contact-page .container .left .card {
     background-color: #5916A2;
     padding: 7rem;
     display: flex;
     flex-direction: column;
     gap: 2rem;
}

.contact-page .container .left .card a {
     color: var(--text-color-light);
}

.contact-page .container .right form {
     display: flex;
     flex-direction: column;
     gap: 2rem;
     padding: 2rem;
     padding-top: 0;
     width: 100%;

}

.contact-page .container .right .flex-line {
     display: flex;
     gap: 1rem;
}

.contact-page .container .right form .input-box {
     display: flex;
     flex-direction: column;
     gap: .5rem;
     width: 100%;
}

.contact-page .container .right form .input-box label {
     font-weight: 500;
     color: black;
}

.contact-page .container .right form .input-box input {
     border: var(--border);
     padding: 1rem;
     width: 100%;
     font-size: 1.6rem;
}

.contact-page .container .right form .input-box textarea {
     border: var(--border);
     padding: 1rem;
     font-size: 1.6rem;
     resize: none;
     width: 100%;
}

.contact-page .rechapcha {
     background-color: var(--bg-second);
     height: 10rem;
}







/* responsive breakpoints less than 5200px  */

@media (width<=5200px) {
     html {
          font-size: 220%;
     }
}

@media (width<=5000px) {
     html {
          font-size: 200%;
     }
}

@media (width<=4500px) {
     html {
          font-size: 180%;
     }
}

@media (width<=4000px) {
     html {
          font-size: 160%;
     }
}

@media (width<=3500px) {
     html {
          font-size: 140%;
     }
}

@media (width<=3000px) {
     html {
          font-size: 120%;
     }
}

@media (width<=2500px) {
     html {
          font-size: 100%;
     }
}

@media (width<=2000px) {
     html {
          font-size: 80%;
     }
}

@media (width<=1500px) {
     html {
          font-size: 60%;
     }
}

@media (width<=1200px) {
     html {
          font-size: 55%;
     }
}

@media (width<992px) {
     html {
          font-size: 50%;
     }

     .header>.header-top,
     .header>.header-down {
          padding: 0 3%;
     }

     section {
          padding: 5rem 3%;
     }

     .footer-up,
     .footer-down {
          padding-left: 3%;
          padding-right: 3%;
     }

     .header>.header-down {
          justify-content: space-between;
     }

     .navbar a {
          padding-left: 3%;
     }

     .navbar {
          width: 100%;
          display: none;
     }

     .navbar>ul {
          position: absolute;
          display: grid;
          grid-template-columns: 1fr;
          top: 100%;
          gap: 0;
          left: 0;
          right: 0;
          justify-content: start;
          width: 100%;
          background-color: var(--bg-color);
          height: auto;
     }

     .navbar>ul>li {
          height: auto;
          position: static;
     }

     .navbar ul a {
          color: var(--text-color-dark);
          font-size: 2rem;
          font-weight: 400;
          padding: 1.5rem;
          padding-left: 7%;
          border-radius: 0;
          width: 100%;
          border: none;
     }

     .navbar li>a.active {
          border-color: var(--bg-color);
     }

     .navbar li:hover .ul-list {
          display: none;
     }

     #hamburg {
          display: block;
          color: var(--main-color);
     }

     .active {
          display: block;
     }

     .about-us-down {
          flex-direction: column;
     }

     .customers {
          width: 100%;
     }

     .customers .carousel {
          height: 50rem;
     }

     /* Videos Page */
     .grid-video-container {
          grid-template-columns: 1fr;
     }

}

@media (width<778px) {
     .heading {
          font-size: 3rem;
     }

     .heading-carosel {
          font-size: 4rem;
     }

     .heading span {
          border-width: .2rem;
          width: 2rem;
     }

     .heading-1 {
          font-size: 2.2rem;
     }

     .heading-2 {
          font-size: 1.7rem;
     }

     .text-1 {
          font-size: 1.5rem;
     }

     .btn {
          font-size: 1.7rem;
     }

     .carousel-control {
          top: 55%;
     }

     .carousel-item .data {
          top: 55%;
     }

     .services-grid-container {
          grid-template-columns: repeat(2, 1fr);
     }

     .gallery-grid-container {
          grid-template-columns: repeat(2, 1fr);
     }

     .footer-up {
          grid-template-columns: repeat(2, 1fr);
     }

     .footer .credit {
          flex-direction: column;
          justify-content: center;
     }

     /* Contact us page */
     .contact-page .container {
          flex-direction: column;
          gap: 10rem;
     }

     .contact-page .container .left {
          width: 100%;
     }
}

@media (width<601px) {
     html {
          font-size: 48%;
     }

     .heading {
          font-size: 2.5rem;
     }

     .heading-carosel {
          font-size: 3.5rem;
     }

     /* hair page */
     .banner .btn {
          font-size: 2rem;
     }

}

@media only screen and (max-width: 480px) {
     .services-grid-container {
          font-size: 3rem;
     }
}

@media only screen and (max-width: 450px) {
     .header-top .links {
          display: none;
     }

     .header-down .logo {
          width: 0;
     }

     .footer-up {
          grid-template-columns: 1fr;
     }

     /* Contact page  */
     .contact-page .container .left .card {
          padding: 3rem;
     }

     .contact-page .container .right form {
          padding-left: 0;
          padding-right: 0;
     }
}

@media (width <=350px) {}