@import url(https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Manrope&display=swap);

*, *:after, *:before { box-sizing: border-box; }

* { margin: 0; padding: 0; font: inherit; }

img, picture, svg, video { display: block; max-width: 100%; height: auto; }

input, select, textarea { background-color: transparent; outline: none; }

a { text-decoration: none; color: inherit; transition: all 0.3s ease-in-out; }

button { cursor: pointer; background-color: transparent; outline: none; border: 0; }

body { min-height: 100vh; font-weight: 400; font-size: 15px; line-height: 1; font-family: "Figtree",sans-serif; }

p { margin: 0; }

section { padding-top: 0; padding-bottom: 60px; }

/* Class Common */
.font-manrope { font-family: "Manrope",sans-serif; }

.bg-light { background-color: #f3f4f7; }

.bg-light-white { background-color: rgba(255, 255, 255, 0.2); }

.text-primary { color: #326af2!important; }

.text-light { color: #aaa!important; }

.z-10 { z-index: 10; }

.z-99 { z-index: 99; }

.rounded-3 { border-radius: 10px!important; }

.border-gray { border-color: rgba(0, 0, 0, 0.2)!important; }

.flex-1 { flex: 1; }

.button { font-size: 15px; line-height: 18px; color: #000; border-radius: 34px; border: 1px solid #fff; padding: 14px 24px; background: #fff; font-weight: 700; display: inline-block; }

.button-secondary { color: #fff; border-color: #fff; background: transparent; }

.button-primary { color: #fff; border-color: #326af2; background: #326af2; padding: 14px 28px; }

.button-primary-outline { color: #326af2; border-color: #326af2; background: transparent; }

.button-has-icon { display: inline-flex; align-items: center; gap: 10px; padding: 13px 25px; }

.text-xs { font-size: 12px; line-height: 1; }

.text-sm { font-size: 15px; line-height: 26px; font-weight: 400; }

.text-md { font-size: 18px; line-height: 1.25; font-weight: 400; }

.text-lg { font-size: 24px; line-height: 1.25; font-weight: 400; }

.text-xl { font-size: 28px; line-height: 1.25; font-weight: 400; }

.header .logo { max-width: 180px; }

.line { width: 100%; border-bottom: 1px solid rgba(255, 255, 255, 0.2); margin: 35px 0; }

/* Custom CSS */

.menu-navbar { position: absolute; left: 0; width: calc(100% - 12px); background: #fff; top: 110%; border-radius: 6px; padding: 20px 10px; transform: translateY(-50%); opacity: 0; transition: all 0.4s ease-in-out; transform-origin: top; z-index: 99; visibility: hidden; }

.menu-navbar.active { transform: translateY(0); opacity: 1; visibility: visible; }

.menu-navbar ul { display: flex; flex-direction: column; gap: 20px; position: relative; }

.menu-navbar ul ul { position: absolute; left: 100%; top: 0; min-width: 200px; background: #fff; border-radius: 6px; padding: 10px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); opacity: 0; visibility: hidden; transform: translateX(-20px); transition: all 0.3s ease-in-out; z-index: 100; }

.menu-navbar li { position: relative; }

.menu-navbar li.menu-item-has-children > a::after { content: ""; position: absolute; right: 15px; top: 50%; transform: translateY(-50%); width: 0; height: 0; border-left: 5px solid #666; border-top: 4px solid transparent; border-bottom: 4px solid transparent; transition: all 0.2s ease; }

.menu-navbar li.menu-item-has-children > a { position: relative; padding-right: 35px; }

.menu-navbar li.menu-item-has-children:hover > a::after { border-left-color: #326af2; }

.menu-navbar li:hover > ul { opacity: 1; visibility: visible; transform: translateX(0); }

.menu-navbar ul ul li { width: 100%; }

.menu-navbar ul ul li.menu-item-has-children > a::after { border-left: 4px solid #666; border-top: 3px solid transparent; border-bottom: 3px solid transparent; right: 10px; }

.menu-navbar ul ul a { padding: 8px 15px; display: block; border-radius: 4px; transition: background-color 0.2s ease; }

.menu-navbar ul ul a:hover { background-color: #f8f9fa; }

.banner-section { background: url('../img/Banner-Woman-Purple.jpeg') no-repeat center; background-size: cover; padding-top: 150px; padding-bottom: 50px; }

.banner-section::before { content: ""; position: absolute; left: 0; width: 100%; bottom: 0; height: 65%; background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 1) 100%); z-index: 1; pointer-events: none; opacity: 0.3; }

.banner-overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.1); z-index: 3; pointer-events: none; }

.banner-section::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to left, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 1) 100%); z-index: 2; pointer-events: none; opacity: 0.3; }

.banner-heading { font-size: 40px; line-height: 1; margin-bottom: 40px; font-weight: 400; }

.stars img { width: 16px; height: 16px; object-fit: contain; }

.story-slider-wrapper { width: 100vw; max-width: 2000px; }

.story-slider .slick-slide { width: 300px!important; }

.story-slider .slick-slide { margin: 0 10px; }

.story-slider .story-item { position: relative; border-radius: 10px; overflow: hidden; display: block; }

.story-slider .story-item::before { content: ""; position: absolute; left: 0; width: 100%; bottom: 0; height: 61%; background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 1) 100%); z-index: 1; pointer-events: none; }

.story-slider .story-img { aspect-ratio: 513/367; overflow: hidden; display: block; }

.story-slider .story-img img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }

.story-slider .story-content { position: absolute; bottom: 20px; left: 0; width: 100%; z-index: 2; padding: 0 20px; }

.story-slider .story-content .story-link { font-size: 14px; line-height: 19px; }

/* Option Section CSS */
.option-card img { width: 40px; height: 40px; object-fit: contain; }

/* Contact Section CSS */
.contact-section { background: url('../img/webinar.jpeg') no-repeat center; background-size: cover; position: relative; }

.contact-section::before { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); z-index: 1; pointer-events: none; }

.signup-form input, .signup-form select { font-size: 15px; line-height: 26px; border-radius: 10px; border: none; padding: 11px 25px; color: #fff; background-color: rgba(255, 255, 255, 0.15); backdrop-filter: blur(13px); }

.signup-form input:focus { color: #fff; background-color: rgba(255, 255, 255, 0.15); }

.signup-form select { background-image: url("data:image/svg+xml,%3Csvg width='10' height='7' viewBox='0 0 10 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 6.83341L0 1.83341L1.16667 0.666748L5 4.50008L8.83333 0.666748L10 1.83341L5 6.83341Z' fill='white'/%3E%3C/svg%3E%0A"); background-size: 10px; background-position: right 1.5rem center; cursor: pointer; }

.signup-form select option { background: #fff; color: #000; }

.signup-form input::placeholder, .signup-form select::placeholder { color: #fff; }

/* Socials Section CSS */
.social-box { aspect-ratio: 480/254; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; background-position: center; background-repeat: no-repeat; background-size: cover; padding: 20px 10px; text-align: center; }

.social-box img { width: 40px; height: 40px; object-fit: contain; }

.social-box.social-box-fb { background-image: url('../img/bg-fb.png'); }

.social-box.social-box-ig { background-image: url('../img/bg-ig.png'); }

.social-box.social-box-youtube { background-image: url('../img/bg-youtube.png'); }

/* Pre & Post-Op Guide Section */
.pre-post-op-guide { background: linear-gradient(to bottom, #f3f4f7 0, #fff 100%); }

.pre-post-op-guide .guide-item { aspect-ratio: 373/442; overflow: hidden; display: block; position: relative; }

.pre-post-op-guide .guide-content { position: absolute; top: 50%; transform: translateY(-50%); left: 0; width: 100%; display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 0 20px; }

/* Location Section CSS */
.location-section { max-width: 1440px; margin: 0 auto; min-height: 514px; }

.location-map { aspect-ratio: 3/2; }

.location-info { background: #f3f4f7; }

.location-info-box { backdrop-filter: blur(13px); border-radius: 10px; background-color: rgba(255, 255, 255, 0.65); padding: 20px; max-width: 100%; margin-bottom: 10px; border: 1px solid transparent; }

.location-info-box:last-child { margin-bottom: 0; }

.location-info-box.active .location-name { color: #326af2; border-color: #326af2; }

/* Footer CSS */
.footer-logo { max-width: 175px; }

@media (min-width:768px) {
  section { padding: 50px 0; }
  .text-xl { font-size: 32px; }
  .text-md { font-size: 22px; }
  .text-lg { font-size: 26px; }
  .line { margin: 40px 0; }
  .banner-heading { font-size: 70px; margin-bottom: 70px; }
  .stars img { width: 20px; height: 20px; }
  .banner-section { padding-top: 200px; }
  .story-slider .slick-slide { width: 400px!important; }
  .story-slider .story-content { bottom: 28px; padding: 0 30px; }
  .location-map { position: absolute; inset: 0; aspect-ratio: unset; }
  .location-info { background: none; }
  .location-info-box { padding: 30px 20px; max-width: 300px; }
}

@media (min-width:992px) {
  section { padding: 75px 0; }
  .text-xl { font-size: 40px; }
  .text-lg { font-size: 28px; }
  .menu-navbar { width: 50%; min-width: 250px; padding: 30px 20px; }
  .btn-menu-toggle:hover .menu-navbar { transform: translateY(0); opacity: 1; visibility: visible; }
  .banner-section { padding-top: 266px; }
  .banner-heading { font-size: 90px; margin-bottom: 90px; }
  .story-slider .slick-slide { width: 513.33px!important; }
  .social-box img { width: 50px; height: 50px; }
  .location-info-box { padding: 30px; max-width: 396px; }
}

@media (min-width:2000px) {
  .story-slider-wrapper { max-width: 1320px; }
}

@media (max-width:767px) {
  .location-section { padding-bottom: 0; }
}