@import url('https://fonts.googleapis.com/css2?family=Baloo+Bhaijaan+2:wght@400..800&display=swap');

/* ====== START OF WAFA CSS CODE ====== */
.laser-device-selector.to-purple-50 {--tw-gradient-to: unset !important; font-family: 'Cairo', var(--font-main) !important; margin-bottom:2rem}
.laser-device-selector .bg-white.rounded-3xl {background-color: #c9a0de;box-shadow: none !important;border: 2px solid #fff;border-radius: 20px; padding: 2rem 1rem;}
.laser-device-selector .inline-flex.items-center.w-20.h-20.bg-gradient-to-r.rounded-full {display:none}
.laser-device-selector h1 {text-shadow: 3px 3px #fff;color: #c9a0de;font-size: 1.3rem;font-weight: 900;margin-bottom: .5rem;}
.laser-device-selector p {font-size: .9rem;max-width: 80%; font-family: "Baloo Bhaijaan 2", sans-serif;color: #222;}
.laser-device-selector .container .text-center.mb-12 {margin-bottom:1rem !important}
.laser-device-selector .bg-white.rounded-3xl .grid {grid-template-columns: repeat(2, 1fr); gap: 1rem;}
.laser-device-selector .bg-white.rounded-3xl .skin-type-btn {padding:1rem .1rem !important;display: flex;flex-direction: column;align-items: center; background-color: #ffffff40 !important; border-color:#fff; --tw-gradient-to: unset !important;}
.laser-device-selector .bg-white.rounded-3xl .skin-type-btn h3 {font-size:1rem !important; margin-bottom:0; color:#222; font-family: 'Baloo Bhaijaan 2';font-weight: 500;}
.laser-device-selector .bg-white.rounded-3xl .skin-type-btn p {font-size:.875rem !important}
.laser-device-selector .bg-white.rounded-3xl h2 {font-size: 1.2rem;}
.laser-device-selector .bg-white.rounded-3xl h2 svg.fa-user-check {display:none}
#sensitive-info p, #normal-info p {max-width:100%}
#sensitive-info .flex.items-start, #normal-info .flex.items-start {flex-direction: column;gap: 8px;align-items: center;text-align: center;}
#sensitive-info .flex.items-start svg, #normal-info .flex.items-start svg {margin: 0;width: 1.5em;height: 1.2em;}
.laser-device-selector .bg-white.rounded-3xl .skin-type-btn .flex.items-center.justify-center.mb-3 {margin-bottom:8px !important;}
.laser-device-selector .bg-white.rounded-3xl .skin-type-btn .flex.items-center.justify-center.mb-3 svg {filter: drop-shadow(1px 1px 1px #fff);}
#normal-info svg {color: #2fac2f;}
#sensitive-info svg {color: #e361b4;}
.laser-device-selector svg.text-green-600 {color: #2fac2f;}
.laser-device-selector svg.text-orange-600 {color: #e361b4;}
.laser-device-selector .bg-orange-50 {background-color: #ffd6f0; border-color:#e361b4}
.laser-device-selector .bg-white.rounded-3xl.shadow-xl.overflow-hidden.border.border-gray-100 .bg-gradient-to-r.from-primary-500.to-primary-600.p-6 {display:none}
.laser-device-selector .bg-white.rounded-3xl.shadow-xl.overflow-hidden.border.border-gray-100 .p-8 {padding:0}
.laser-device-selector .bg-white.rounded-3xl.shadow-xl.overflow-hidden.border.border-gray-100 .p-8 .grid {grid-template-columns: repeat(5, 1fr);gap: 4px;max-width: 100%;}
.laser-device-selector .bg-white.rounded-3xl.shadow-xl.overflow-hidden.border.border-gray-100 .p-8 .grid .group {margin: 0 auto;}
.laser-device-selector .bg-white.rounded-3xl.shadow-xl.overflow-hidden.border.border-gray-100 .p-8 .grid .group > div {width:3rem; height:3rem; border-color:#fff;border-width: 2px;margin: 0;}
.laser-device-selector .bg-white.rounded-3xl.shadow-xl.overflow-hidden.border.border-gray-100 .p-8 .grid .group p {max-width:100%}
.laser-device-selector .bg-white.rounded-3xl.shadow-xl.overflow-hidden.border.border-gray-100 .text-center.mb-8 p {max-width:100%}
.laser-device-selector #step-3 #result-container .bg-gradient-to-r {--tw-gradient-to: unset !important; border: none; box-shadow: none !important;}
.laser-device-selector #step-3 #result-container .bg-gradient-to-r h3 {color: #222; font-size: 1.1rem;}
.laser-device-selector #step-3 #result-container .bg-gradient-to-r p {max-width: 96%;margin: auto auto 1rem;font-size: 1rem;color: #222;}
.laser-device-selector #step-3 #result-container .bg-gradient-to-r .text-green-600 {background: #f2bf5a;width: fit-content;margin: auto;padding: 4px 20px;border-radius: 8px;line-height: 2;box-shadow: 2px 2px 2px #fff;}
.laser-device-selector #step-3 #result-container .bg-gradient-to-r .text-green-600 svg, .laser-device-selector #step-3 #result-container .bg-gradient-to-r .text-green-600 span {color:#222}
.laser-device-selector #step-3 #result-container .w-20.h-20.bg-gradient-to-r.from-green-500, .laser-device-selector #step-3 #result-container .w-20.h-20.bg-gradient-to-r.from-orange-500.to-red-500 {background-color:#ffffff20}
.laser-device-selector #step-3 #result-container .bg-gradient-to-r.from-green-500 svg.fa-check {color: #2fac2f; filter: drop-shadow(2px 1px 1px #fff);}
.laser-device-selector #step-3 #result-container .w-20.h-20.bg-gradient-to-r.from-orange-500.to-red-500 svg.fa-exclamation-triangle {color: #bd0943; filter: drop-shadow(2px 1px 1px #fff);}
.laser-device-selector .group:hover p {color:#222 !important}
.laser-device-selector .group:hover .ring-primary-200 {--tw-ring-color:#fff}
#result-container .rounded-2xl.p-4.mt-4 p.text-orange-600.font-medium {margin:auto !important}

@media (min-width:992px){
.laser-device-selector .bg-white.rounded-3xl.shadow-xl.overflow-hidden.border.border-gray-100 .p-8 .grid {max-width:56rem;}
.laser-device-selector .bg-white.rounded-3xl.shadow-xl.overflow-hidden.border.border-gray-100 .p-8 .grid .group > div {width:6rem; height:6rem}
.laser-device-selector .bg-white.rounded-3xl .grid {max-width:45rem; margin:auto}
}
html, body {
  max-width: 100%;
  overflow-x: hidden;
}