/* ===================================================
   SUNSOAK Mobile Responsive Overrides
   =================================================== */

/* ===================================================
   BRAND COLORS (matched to logo)
   Teal: #00BFA5  |  Dark Teal: #007A6E  |  Yellow: #FFE600
   =================================================== */

/* ===================================================
   BUTTON COLORS — all btn_wrapper_area styles
   =================================================== */

/* Default sweep (was blue #4375e7) */
.btn_wrapper_area::after,
.btn_wrapper_area::before {
  background-color: #00BFA5 !important;
}
.btn_wrapper_area:hover {
  background-color: #007A6E !important;
}

/* style_1 — sweep fill on hover */
.btn_wrapper_area.style_1::after,
.btn_wrapper_area.style_1::before {
  background-color: #00BFA5 !important;
}

/* style_2 — sweep fill (was dark navy) */
.btn_wrapper_area.style_2::after,
.btn_wrapper_area.style_2::before {
  background-color: #00BFA5 !important;
}

/* style_3 — solid teal bg button */
.btn_wrapper_area.style_3 {
  background-color: #00BFA5 !important;
}
.btn_wrapper_area.style_3::after,
.btn_wrapper_area.style_3::before {
  background-color: #007A6E !important;
}
.btn_wrapper_area.style_3:hover {
  border-color: rgba(0, 191, 165, 0.3) !important;
}
.btn_wrapper_area.style_3:hover a span {
  background-color: #00BFA5 !important;
  color: #fff !important;
}

/* style_4 — sweep + circle icon */
.btn_wrapper_area.style_4::after,
.btn_wrapper_area.style_4::before {
  background-color: #00BFA5 !important;
}
.btn_wrapper_area.style_4 a span {
  background-color: #00BFA5 !important;
}

/* style_5 — sweep fill (was blue) */
.btn_wrapper_area.style_5::after,
.btn_wrapper_area.style_5::before {
  background-color: #00BFA5 !important;
}

/* style_6 — circle icon */
.btn_wrapper_area.style_6 a span {
  background-color: #00BFA5 !important;
}

/* Blog news card Read More button */
.btn_wrapper_area_blog:hover {
  background-color: #00BFA5 !important;
}
.btn_wrapper_area_blog a span {
  background-color: #00BFA5 !important;
}

/* Comment form submit button (theme-btn) */
.post-comments-form .comment-respond .theme-btn {
  background-color: #00BFA5 !important;
}
.post-comments-form .comment-respond .theme-btn:hover {
  background-color: transparent !important;
  border-color: #00BFA5 !important;
  color: #00BFA5 !important;
}
.post-comments-form .comment-respond .theme-btn:hover span {
  background-color: #00BFA5 !important;
  color: #fff !important;
}

/* Offcanvas close button (was blue #4375e7) */
.offcanvas__wrapper .offcanvas__content .offcanvas__close {
  background-color: #00BFA5 !important;
}

/* Price Packages page — tab buttons */
.price_packages_area .price_packages_btn_wrapper .price_packages_btn .btn_wrapper_area:nth-child(1),
.price_packages_area .price_packages_btn_wrapper .price_packages_btn .btn_wrapper_area:nth-child(2) {
  background-color: #00BFA5 !important;
}
.price_packages_area .price_packages_btn_wrapper .price_packages_btn .btn_wrapper_area:nth-child(1):hover,
.price_packages_area .price_packages_btn_wrapper .price_packages_btn .btn_wrapper_area:nth-child(2):hover {
  background-color: #007A6E !important;
}

/* Second price packages card button span hover */
.second_price_packages_area .price_packages_wrapper .price_packages_card_area .price_packages_card_wrapper .price_package_btn a:hover span {
  background-color: #00BFA5 !important;
  color: #fff !important;
}

/* Footer social icons hover */
.footer .footer_area_quick_menu .iteam_info ul li a:hover {
  background-color: #00BFA5 !important;
}

/* Footer newsletter subscribe button */
.footer .footer_area_quick_menu .quicklink form button {
  background-color: #00BFA5 !important;
}

/* About page counting cards hover sweep */
.about_section_area .about_section_wrapper .about_counting_area .about_counting_card_area .about_card_wrapper::after {
  background-color: #00BFA5 !important;
}

/* Counting section info hover */
.counting_section_area .counting_info_wrapper .counting_info::after {
  background-color: #00BFA5 !important;
}

/* Contact page — send message button (input element) */
.contact_message_box_area .contact_message_box_wrapper .contact_message_box .message_sent_btn input {
  background-color: #00BFA5 !important;
}

/* Contact page — contact card icon */
.contact_card_area .contact_card_wrapper .contact_icon {
  background-color: #00BFA5 !important;
}

/* Cleaning experts section — social icon hover */
.cleaning_experts_section .cleaning_container_area .cleaning_experts_info .cleaning_contains_wrapper .social_media span:hover {
  background-color: #00BFA5 !important;
}

/* Working process — how it works icon hover */
.working_proces_area .gallery_parent .tab.active .content:hover .how_it_work_contains .icon {
  background-color: #00BFA5 !important;
}

/* Testimonials — carousel arrows hover */
.clients_testimonials_area .clients_testimonials_wrapper .testimonial_card_area .left-arrow:hover,
.clients_testimonials_area .clients_testimonials_wrapper .testimonial_card_area .right-arrow:hover {
  background-color: #00BFA5 !important;
  border-color: #00BFA5 !important;
}

/* Testimonials — user meta social icon hover */
.clients_testimonials_area .clients_testimonials_wrapper .testimonial_card_area .testimonial_card_wrapper .testimonial_user_meta.style_1 span:hover {
  background-color: #00BFA5 !important;
}

/* Team members — social media hover */
.team_members_area .team_member_area_wrapper .team_member_card_area .team_member_card_wrapper .team_card_social_media:hover a {
  background-color: #00BFA5 !important;
}

/* Blog Details — sidebar contact info bar */
.blog_details_area .footer_contact_wrapper {
  background-color: #00BFA5 !important;
}

/* Blog Details — play button hover on video post */
.blog_details_area .blog-post .single-post-iteam .post-thumbnail span:hover {
  background-color: #00BFA5 !important;
}

/* Blog Details — author "Founder & CEO" label */
.blog_details_area .blog-post .author .author-text h4 {
  background: #00BFA5 !important;
}

/* Blog Details — author social icons */
.blog_details_area .blog-post .author .author-text .author-icon ul li a {
  background-color: #00BFA5 !important;
}
.blog_details_area .blog-post .author .author-text .author-icon ul li:nth-child(2) a {
  background-color: #007A6E !important;
}

/* Blog Details — tag hover */
.blog_details_area .blog-post .blog_tag_social_area .blog_tag_wrapper ul li a:hover {
  background-color: #00BFA5 !important;
}

/* ===================================================
   FOOTER — match brand theme
   =================================================== */

/* Footer background — dark teal */
.footer {
  background: #004D43 !important;
}

/* Footer link hover — yellow accent */
.footer .footer_area_quick_menu .quicklink ul li:hover a {
  color: #FFE600 !important;
}

/* Footer social icon list bg */
.footer .footer_area_quick_menu .iteam_info ul li a {
  border-color: rgba(255, 255, 255, 0.2) !important;
}
.footer .footer_area_quick_menu .iteam_info ul li a:hover {
  background-color: #00BFA5 !important;
  border-color: transparent !important;
}

/* Newsletter subscribe button hover */
.footer .footer_area_quick_menu .quicklink form button:hover {
  background-color: #007A6E !important;
}

/* Footer bottom bar border */
.footer .footer_last {
  border-top-color: rgba(255, 255, 255, 0.15) !important;
}

/* Footer last menu links hover */
.footer .footer_last .footer_last_menu ul li a:hover {
  color: #FFE600 !important;
}

/* Top info bar */
.header_contact_area .header_area_contains {
  background-color: #007A6E !important;
}

/* Main header background */
.header-1 {
  background-color: #00BFA5 !important;
}

/* Nav links — white */
.header-1 .header-wrap .main-menu ul li > a,
.header-1 .header-wrap .main-menu ul li > a:visited {
  color: #fff !important;
}

/* Nav hover & active — yellow */
.header-1 .header-wrap .main-menu ul li:hover > a,
.header-1 .header-wrap .main-menu ul li.router-link-active > a {
  color: #FFE600 !important;
}

/* Submenu dropdown */
.header-1 .header-wrap .main-menu ul ul {
  background-color: #00BFA5 !important;
}
.header-1 .header-wrap .main-menu ul ul li > a {
  color: #fff !important;
}
.header-1 .header-wrap .main-menu ul ul li:hover > a {
  color: #FFE600 !important;
  background-color: #00A896 !important;
}

/* Call button */
.header-1 .header-wrap .header-right .btn_wrapper a {
  background-color: #FFE600 !important;
  color: #0D3B2E !important;
  border: none !important;
  font-weight: 600 !important;
  border-radius: 4px;
}
.header-1 .header-wrap .header-right .btn_wrapper:hover a {
  background-color: #fff !important;
  color: #007A6E !important;
}

/* Hamburger icon — white */
.header-1 .header-wrap .header-right .offcanvas-bar span {
  color: #fff !important;
}

/* Sticky header — keep teal */
.sticky_top.header-1 {
  background-color: #00BFA5 !important;
}
.sticky_top.header-1 .header-wrap {
  background-color: #00BFA5 !important;
}
.sticky_top.header-1 .header-wrap .main-menu ul li > a {
  color: #fff !important;
}
.sticky_top.header-1 .header-wrap .main-menu ul li:hover > a {
  color: #FFE600 !important;
}

/* ===================================================
   HEADER — fix logo overflow hiding hamburger button
   =================================================== */

/* Constrain logo image to its container at ALL sizes */
.header-1 .header-wrap .logo img {
  max-width: 100%;
  height: auto;
  display: block;
}

@media (max-width: 991px) {
  /* Give logo a fixed max-width so hamburger always has room */
  .header-1 .header-wrap .logo {
    width: auto !important;
    max-width: 160px;
    flex-shrink: 0;
  }
  .header-1 .header-wrap .logo img {
    max-height: 52px !important;
    width: auto;
    max-width: 160px;
  }

  /* Push header-right to the far right */
  .header-1 .header-wrap {
    gap: 8px;
  }

  /* Prevent any section overflowing the viewport */
  html, body { overflow-x: hidden; }
  section, .container-xxl { max-width: 100%; }

  /* Clip large decorative background numbers */
  .inner_hero_section_area,
  .hero_section_area {
    overflow: hidden;
  }
}

@media (max-width: 575px) {
  /* Even smaller logo on phones */
  .header-1 .header-wrap .logo {
    max-width: 130px !important;
    width: auto !important;
  }
  .header-1 .header-wrap .logo img {
    max-height: 44px !important;
    max-width: 130px !important;
  }

  /* Hide call button text, show only icon on very small screens */
  .header-1 .header-wrap .header-right .btn_wrapper a {
    font-size: 0 !important;
    padding: 8px 12px !important;
  }
  .header-1 .header-wrap .header-right .btn_wrapper a span {
    font-size: 16px !important;
  }
}

/* --- Reduce oversized padding/margin on tablets --- */
@media (max-width: 991px) {
  .pt-150  { padding-top: 80px !important; }
  .pb-150  { padding-bottom: 80px !important; }
  .mb-145  { margin-bottom: 60px !important; }
  .mt-57   { margin-top: 30px !important; }
  .pt-55   { padding-top: 30px !important; }
  .pt-100  { padding-top: 60px !important; }
  .pb-135  { padding-bottom: 70px !important; }

  /* Hide top bar on tablet/mobile */
  .header_contact_area { display: none !important; }

  /* Inner hero */
  .inner_hero_section_area { min-height: 180px; }
  .inner_hero_section_area h1 { font-size: 38px !important; }

  /* Collect section — stack image + text */
  .collect_area_contains_wrapper {
    flex-direction: column !important;
  }
  .collect_img_wrapper,
  .colletct_section_wrapper {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* FAQ layout — stack */
  .faq_section_wrapper {
    flex-direction: column !important;
  }
  .faq_card_wrapper { margin-bottom: 40px; }

  /* Price packages buttons */
  .price_packages_btn { flex-direction: column; gap: 12px; }
}

/* --- Mobile phones --- */
@media (max-width: 767px) {
  .pt-150  { padding-top: 60px !important; }
  .pb-150  { padding-bottom: 60px !important; }
  .mb-145  { margin-bottom: 40px !important; }

  /* Hero heading text */
  .hero_contains h1,
  .hero_contains h2 {
    font-size: 26px !important;
    line-height: 1.3 !important;
  }
  .hero_contains p { font-size: 14px !important; }

  /* Section headings */
  .heading h2 { font-size: 26px !important; line-height: 1.35 !important; }

  /* Premium services — 1 column */
  .premium_service_wrapper {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
  }
  .premium_service_info {
    width: 100% !important;
  }

  /* Prevent horizontal scroll */
  body { overflow-x: hidden; }
  .container-xxl { padding-left: 16px !important; padding-right: 16px !important; }

  /* Footer columns stack */
  .footer_area_quick_menu { flex-direction: column; gap: 32px; }

  /* Inner hero smaller */
  .inner_hero_section_area h1 { font-size: 28px !important; }
  .inner_hero_section_area { min-height: 140px; }

  /* Breadcrumb nav */
  .inner_hero_section_area nav ul {
    flex-wrap: wrap;
    gap: 6px;
  }

  /* Collect section heading */
  .colletct_section_wrapper h2 { font-size: 24px !important; }
  .colletct_section_wrapper p  { font-size: 14px !important; }

  /* Reviews — allow scroll on very small screens */
  .customers_reviews_wrapper { overflow: hidden; }

  /* Header call button — shorten on small screens */
  .header-right .btn_wrapper a { font-size: 12px; padding: 8px 14px; }
}

/* --- Very small phones (≤ 480px) --- */
@media (max-width: 480px) {
  .heading h2  { font-size: 22px !important; }
  .sub_heading h4 { font-size: 13px !important; }

  /* Package cards full width */
  .packages_contains { padding: 24px 16px; }

  /* Make review cards readable */
  .review_card_wappers { padding: 20px 16px; }
}

/* ===================================================
   HERO — Order Now + App icon buttons
   =================================================== */
.hero_app_links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  margin-top: 32px;
  width: 100%;
}

/* "Order Now" wide button */
.hero_order_btn {
  display: block;
  width: 280px;
  padding: 18px 24px;
  background-color: #0D3B2E;
  color: #fff !important;
  text-align: center;
  font-size: 20px;
  font-weight: 700;
  border-radius: 10px;
  text-decoration: none !important;
  transition: background-color 0.2s ease;
  letter-spacing: 0.5px;
}
.hero_order_btn:hover {
  background-color: #007A6E;
  color: #fff !important;
}

/* Row of circular icons */
.hero_app_icons {
  display: flex;
  gap: 18px;
  align-items: center;
  justify-content: center;
}

.hero_app_icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  text-decoration: none !important;
  color: #fff !important;
  font-size: 28px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.hero_app_icon:hover {
  transform: translateY(-3px);
  opacity: 0.88;
  color: #fff !important;
}

.hero_app_whatsapp { background-color: #25D366; }
.hero_app_apple    { background-color: #0D3B2E; }
.hero_app_play     { background-color: #0D3B2E; }

/* "Place Your Order Now" label */
.hero_app_label {
  color: #fff !important;
  font-size: 16px;
  font-weight: 500;
  margin: 0 !important;
  opacity: 0.92;
  text-align: center;
}

@media (max-width: 480px) {
  .hero_order_btn { width: 220px; font-size: 17px; padding: 15px 20px; }
  .hero_app_icon  { width: 58px; height: 58px; font-size: 24px; }
  .hero_app_label { font-size: 14px; }
}