@charset "utf-8";

[data-form-loader-blue] {
  display: none;                 /* hidden by default */
  align-items: center;           /* center spinner */
  justify-content: center;
  min-width: 40px;
  min-height: 40px;
}

[data-form-loader-blue]::after {
  content: '';
  width: 28px;
  height: 28px;
  border: 4px solid rgba(255, 255, 255, 0.35);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: formSpin 0.8s linear infinite;
}



[data-form-loader] {
  display: none;                 /* hidden by default */
  align-items: center;           /* center spinner */
  justify-content: center;
  min-width: 40px;
  min-height: 40px;
}

/* Spinner circle */
[data-form-loader]::after {
  content: '';
  width: 28px;
  height: 28px;
  border: 4px solid rgba(255, 255, 255, 0.35);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: formSpin 0.8s linear infinite;
}

/* Unique keyframes (no collisions) */
@keyframes formSpin {
  to { transform: rotate(360deg); }
}



fake-disabled {
  background-color: #cccccc !important;
  border-color: #cccccc !important;
  color: #666666 !important;
  cursor: not-allowed;
  opacity: 0.6;
}

button[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}



.flatpickr-calendar {
  z-index: 9999 !important;
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}


form {
  position: relative;   /* ensures loader alignment safety */
}




.submit-wrapper {
  position: relative;
  min-width: 130px;
  min-height: 48px; /* button height */
  display: flex;
  align-items: center;
}

/
.flatpickr-calendar {
  z-index: 9999 !important;
}


  .flatpickr-calendar {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 9999 !important;
  }





.flag-prefix {
   font-size: 18px;
  white-space: nowrap;
  border-bottom: 1px solid #fff;
  border-radius: 0px;
  padding-bottom: .4rem;
  color: #fff;
  border-right: 1px solid #fff;
  padding-right: .6rem;
    }
	
	.flag-prefix-ask {
   font-size: 18px;
  white-space: nowrap;
  
  padding-bottom: .4rem;
  color: #fff;
line-height: 45px;
padding-bottom: .4rem;
  padding-right: .6rem;
    }
	
	.phone-wrapper input {
  font-size: 18px;
  width: 100%;
}
.phone-wrapper-ask {
  display: flex;
  align-items: center;
border: 1px solid #fff;
  border-radius: 4px;

  padding-left: 6px;
  
}.phone-wrapper {
  display: flex;
  align-items: center;

border-bottom: 1px solid #fff;
}

#loading {
  display: inline-block;
  width: 40px;
  height: 40px;
  border: 5px solid rgba(255,255,255,.3);
  border-radius: 50%;
  border-top-color: #fff;
  animation: spin 1s ease-in-out infinite;
  -webkit-animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
  to { -webkit-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
  to { -webkit-transform: rotate(360deg); }
}


/* Submit Button Disabled Style */
#submitBtn:disabled,
.disabled-button {
  background-color: #ccc !important;
  border-color: #ccc !important;
  color: #666 !important;
  cursor: not-allowed;
}

/


#formAlert {
  color: red;
  font-size: 14px;
  margin-top: 8px;
  display: none;
}

.fake-disabled {
  background-color: #ccc !important;
  border-color: #ccc !important;
  color: #666 !important;
  cursor: not-allowed;
}

  .form-control-mobile {
  font-size: 18px;
  font-weight: 500;
  line-height: 24.39px;
  text-align: left;
  color: #ffffff;
  background: rgba(255,255,255,0.10);
  border-top: 0.5px solid #00B4BB;
  border-right: 0.5px solid #00B4BB;
  border-bottom: 0.5px solid #00B4BB;
  border-radius: 100px;
}

   .contact-input {
      display: flex;
      align-items: center;
      border: 1px solid #00b3b9;
      border-radius: 40px;
      background: rgba(255,255,255,0.10);
      padding: .375rem 1rem !important;
      color: white;
      font-size: 18px;
      width: 15rem;
      max-width: 90%;
    }
	

    .contact-input .flag {
      width: 32px;
      height: 22px;
      margin-right: 10px;
      border-radius: 2px;
      object-fit: cover;
    }

    .contact-input .code {
      margin-right: 12px;
      font-weight: 500;
    }

    .contact-input input {
      flex: 1;
      background: transparent;
      border: none;
      outline: none;
      color: white;
      font-size: 18px;
    }

    ::placeholder {
      color: #cfd8dc;
    }
	
	    .phone-input-container {
      display: flex;
      align-items: center;
     border-bottom: 1px solid #4D4D4D;
margin-bottom: 1.5rem !important;
      width: 100%;
    }

    .flag {
      width: 32px;
      height: 20px;
      object-fit: cover;
      margin-right: 8px;
    }

    .code-popup {
      font-weight: 500;
      color: #4a4a4a;
      margin-right: 10px;
    }

    .divider {
      width: 1px;
      height: 20px;
      background-color: #aaa;
      margin-right: 10px;
	  border-right: 1px solid #4D4D4D;
    }
	.divider-white {
      width: 1px;
      height: 20px;
      background-color: #fff;
      margin-left: 10px;
	  border-right: 1px solid #fff;
    }

    .phone-input {
      border: none;
      outline: none;
      flex: 1;
      font-size: 16px;
      color: #4a4a4a;
      font-weight: 500;
    }

    .phone-input::placeholder {
      color: #4a4a4a;
      font-weight: 500;
    }
	
	
		.ask-contact-input {
      display: flex;
      align-items: center;
      border: 1px solid #ffffff;    
     border-radius: .25rem;
      padding: .375rem 1rem !important;
      color: white;
      font-size: 18px;
      width:  100%;
     
    }
	ask-input input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: white;
	font-size: 18px; }
	

	
	
/* applies to x-large devices (large desktops, less than 1400px)*/
@media (max-width: 1399.98px) {
    .desktopFormLayer .textLayer p span{
        width:35px;
        height:35px;
        line-height: 35px;
    }
    .desktopFormLayer .textLayer p span img{ width:20px;}
    .desktopFormLayer .textLayer p{ font-size: 18px;}
 }

/* Large devices (desktops, less than 1200px) */
@media (max-width: 1199.98px) {
    .bookAppointmentFormContent .callBack{ font-size: 15px;}
    .desktopFormLayer button, .desktopFormLayer button:hover {
        font-size: 20px;
    }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .haireRemoveSliderContaner p a{ font-size: 20px;}
.desktop-form{display:block;}
.mobile-form{display:none;}
.bottomCallButtons{display:none;}
 }

/* Medium devices (tablets, less than 992px)*/
@media (max-width: 991.98px) { 
	.desktop-form{display:none;}
.mobile-form{display:block;
margin:25px;
}
    header .logo img{ max-width: 400px; width:100%;}
    .mobileOnlyShow{ display: block;}
    .haireRemoveSliderContaner p a{ font-size: 16px;}
    .mainSlider .slider .offerLayer{ font-size: 20px;}

    .mainAccordion h2 .accordion-button, .mainAccordion h1 .accordion-button, h2.title{ /*font-size: 22px;*/ font-size: 1.5rem;}

    .Toplocation p{ padding:4px;}
    .Toplocation .callIcon{ width:25px; height:25px; line-height: 25px;}
    .Toplocation .callIcon img{ height:60%;}

    .LaserHairRemove h2{ font-size: 30px; line-height: 38px;}

    .laserHairRemovalTreatmentContent .selectPackage{ padding-left: 10px; padding-right: 10px;}

    /* Talk with expert */
    .talkToExpertButton button{ /*width:180px; font-size: 20px;*/ width: 145px; font-size: 15px; padding-top: 10px; padding-bottom: 10px;}
    .talkToExpertButton p{ /*font-size: 18px;*/ font-size: 16px; line-height: 20px; font-weight: 400;}

    /* View Ratting */
    .topRattingContent img{ width:28px;}
    .topRattingLayer{ padding:10px;}
    .topRattingLayer .iconLayer{ margin-right: 5px;}
    .topRattingLayer .rattingNumber h4{ font-size: 18px;}
    .rattingMobileVersion .numberOfRatting p{ font-size: 16px; line-height: 20px; }
    .topRattingLayer span{ font-size: 16px; line-height: 20px;}
    .rattingMobileVersion .rattingContent span{ line-height: 32px;}

    /* consultation Details */
    .consultationDetailsLayer img{ width:100%;}
    .consultationTimings span, .consultationFee span{padding-right: 5px; width:30px;}
    .paymentTypeContent span{ padding-left: 5px; width:30px;}
    .consultationDetailsContent p{ font-size: 14px;}

    /* desktop version form */
    .desktopFormLayer .textLayer{ padding-bottom: 10px;}
    .desktopFormLayer .desktopLayer{ padding-bottom: 10px;}
 }

 @media (max-width: 991.98px) and (min-width: 768px) {
    .talkToExpertButton .imageLayer {
        margin-top: -26px;
    }

    .talkToExpertButton .imageLayer img{ width:140px;}
    .talkToExpertButton .textLayer{ padding-left: 2%; padding-right: 2%;}
 }

 /* Small devices (landscape phones, less than 768px) */
 @media (max-width: 767.98px) { 

    /*.talkToExpertContent{ padding-top: 70px;}*/
	
	  .treatmentBottomContent ul li {
    width: 50%;
  }
  
    .talkToExpertButton{ text-align: center;
        /*background: #204758;*/
        background: #0f7d8a;
        padding-left: 0px;
        padding-right: 0px;
    }

    .talkToExpertButton .imageLayer{
        background: #00B4BB;
        border-radius: 13px 13px 0 0;
        margin-top: 0px;
    }

    .talkToExpertButton .imageLayer img{ margin-top: -30px;}
    .talkToExpertButton p{ text-align: center; padding:10px;}
    .talkToExpertButton .buttonLayer{ padding-bottom: 20px;}
    
    .topRattingLayer{ margin-top: -25px;}

    /* accordian */
    .accordion-button{ padding-top: 1.25rem; padding-bottom: 1.25rem;}

    .clientReviewsContent .slider .testimonialData{ height:160px;}
  }

 /* `sm` applies to x-small devices (portrait phones, less than 576px)*/
 @media (max-width: 575.98px) {
	 .topContentLinksList li a{
    /*font-size: 15px;*/
    padding:0 10px;

    }
    header .logo{ text-align: left; width:35%; padding-left: 20px;}
    header .logo img{ max-width: 200px; width:100%;}
    .Toplocation p{ font-size: 18px;}
    .headerRight{ /*width:100%;*/ /*padding-bottom: 15px;*/ text-align: center;}
    .headerRight .Toplocation{ display: table; margin: 0 auto;}
    .Toplocation p{ /*border-radius: 100px;*/}
    .talkToExportHeader a{ font-size:15px;}
    .talkToExportHeader a span{ width:10px;}

    .topContentLinksList li a{font-size: 15px;}

    .LaserHairRemove li{ width: auto; max-width: 50%;}
    
    .list-item h1{ font-size: 30px; line-height: 36px;}
    .mainAccordion h2 .accordion-button, .mainAccordion h1 .accordion-button{ font-size: 20px;}

    .topRattingLayer{ margin-top: -25px;}
    .topRattingLayer .rattingData{ padding:8px 0px;}

    .locationSelectLayer{ padding: 10px;}
    .selectLocationContent button{ margin: 0 auto; margin-top: 15px;}

    .clientReviewsContent .slider p{ /*font-size: 15px; line-height: 18px;*/font-size: 16px; line-height: 22px;}
    .clientReviewsContent .slider{ padding-left:15px; padding-right: 15px;}

    
 }

@media screen and (max-width:419px){
	.topContentLinksList{ padding-bottom:10px;}
    .wrapper{ padding-bottom: 150px;}
    .haireRemoveSliderContaner div.buttonsLayer .buttonLayer{ margin:0 5px;}
    .accordianDataText .imageLayer img{ width:90%;}
    .LaserHairRemove h2{ font-size: 25px;}

    .bookAppointmentFormContent{ padding-left: 20px; padding-right: 20px;}
    .bookAppointmentFormContent h3{ font-size: 28px;}

    .bottomCallButtons{ width:95%; margin: 0 auto;}
    .StickyButtonsLayer{ padding-left: 5px; padding-right: 5px;}
    .bottomCallButtons .CallBackButton{ padding-left: 0px;}
    .StickyButtonsLayer p{ /*font-size: 14px;*/ font-size: 1rem; /*padding-left: 8px; padding-right: 8px;*/ padding: 10px 12px;}
    .StickyButtonsLayer p img{ width:15px;}

    .bookAppointmentFormContent .callBack{ font-size: 14px;}
    .askYouQuestionFormContent h3{ font-size: 21px;}

    .hairRemovalCost .table th{ font-size: 19px; padding: 10px;}

    .getCallBackForm .modal-title{ font-size: 26px;}
    .getCallBackForm p{ font-size: 16px;}

    .bookAppointmentFormContent .callBack{ padding-left: 5px; padding-right: 5px;}

    .laserHairRemovalTreatmentContent .selectPackage{ padding-left: 7px; padding-right: 7px; font-size: 15px;}

    /* Footer */
    footer{ padding-left: 10px; padding-right: 10px;}
    .scrollToTop{ bottom: 100px;}
}