/*
 * %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 *
 * Template Name: Appmyil - App Landing Template   
 * Template URI: https://thememarch.com/demo/html/appmyil/
 * Description: Appmyil is an app landing HTML template which comes with unique and clean design. It helps you to create a beautiful app landing HTML website. It is designed with Bootstrap v4.2.1 the latest bootstrap version. Appmyil is well organized and very easy to customize.
 * Author: Thememarch
 * Author URI: https://thememarch.com
 * Version: 1.0
 *
 * %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 */

/* Global Font Override - Change all fonts to Poppins but preserve icon fonts */
body, html {
    font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

/* Apply Poppins to text elements but exclude icon classes */
h1, h2, h3, h4, h5, h6,
p, span, div, a, li, button, label, input, textarea, select,
.tm-heroslider-content,
.tm-sectiontitle,
.tm-feature-content,
.tm-service-content,
.tm-about-content,
.tm-download-content,
.card-header,
.card-body,
.widget-title,
.tm-button,
.btn,
.tm-footer-copyright,
.tm-footer-social,
.navbar, .nav,
.modal-content {
    font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

/* Ensure icon fonts are preserved */
[class*="zmdi-"]:before,
[class*="flaticon-"]:before,
[class*="flaticon-"]:after,
.zmdi,
.flaticon,
i[class*="zmdi"],
i[class*="flaticon"],
.tm-sectiontitle-divider i,
.stylish-list i,
.tm-heroslider-scrolldown i,
.tm-footer-social i {
    font-family: inherit !important;
}

/* Specific icon font family overrides */
.zmdi:before,
.zmdi:after {
    font-family: "Material-Design-Iconic-Font" !important;
}

[class*="flaticon-"]:before,
[class*="flaticon-"]:after {
    font-family: "Flaticon" !important;
}

/* Ensure contact icons display properly */
.zmdi-pin:before,
.zmdi-email:before,
.zmdi-phone:before,
.zmdi-square-down:before,
.zmdi-fullscreen:before,
.zmdi-check:before,
.zmdi-facebook:before,
.zmdi-twitter:before,
.zmdi-linkedin:before,
.zmdi-time-countdown:before,
.zmdi-chevron-up:before,
.flaticon-cover:before,
.flaticon-team:before,
.flaticon-support:before,
.flaticon-friendship:before {
    font-family: "Material-Design-Iconic-Font" !important;
}

/* Specific flaticon classes */
.flaticon-cover:before,
.flaticon-team:before,
.flaticon-support:before,
.flaticon-friendship:before {
    font-family: "Flaticon" !important;
}

/* Ensure scroll up button icon works */
#scrollUp i {
    font-family: "Material-Design-Iconic-Font" !important;
}

.contact-tile {
    transition: box-shadow 0.2s, transform 0.2s;
}
.contact-tile:hover {
    box-shadow: 0 8px 32px rgba(0,0,0,0.12), 0 1.5px 6px rgba(0,0,0,0.08);
    transform: translateY(-4px) scale(1.03);
}

/* Center app store buttons in the hero section across all screen sizes */
#tm-area-heroslider .tm-appstore-group {
  display: flex;
  justify-content: center;
  gap: 16px;
}
@media (min-width: 992px) {
  #tm-area-heroslider .tm-appstore-group {
    justify-content: flex-start;
  }
}

/* Add left margin to app store group in services area only on desktop */
@media (min-width: 992px) {
  .tm-services-area .tm-appstore-group {
    margin-left: 60px;
  }
}
/* Remove left margin on mobile/tablet for full width alignment */
@media (max-width: 991.98px) {
  .tm-services-area .tm-appstore-group {
    margin-left: 0;
  }
}

/* Fix social media icons - work with original theme structure but ensure icons show */
.tm-footer-social {
  text-align: center !important;
}

/* Handle both list and div structures */
.tm-footer-social li {
  display: inline-block !important;
}

/* Ensure proper icon display - the theme expects 2 icons per link */
.tm-footer-social li a i:first-child,
.tm-footer-social li a i:last-child,
.tm-footer-social a i:first-child,
.tm-footer-social a i:last-child {
  font-family: "Material-Design-Iconic-Font" !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Make sure icons are displayed for both structures */
.tm-footer-social a {
  position: relative !important;
}

.tm-footer-social a i {
  font-family: "Material-Design-Iconic-Font" !important;
}

/* Remove underline/divider styling from section titles */
.tm-sectiontitle-divider {
  display: none !important;
}

/* Hide the decorative lines and icons completely */
.tm-sectiontitle-divider::before,
.tm-sectiontitle-divider::after {
  display: none !important;
}

.tm-sectiontitle-divider i {
  display: none !important;
}

/* Enhanced Hero Section Typography for Better Visual Impact */
/* Desktop - Large screens (1600px+) */
.tm-heroslider-content h1 {
  font-size: 80px !important;
  line-height: 90px !important;
  font-weight: 800 !important;
  margin-bottom: 20px !important;
}

.tm-heroslider-content p {
  font-size: 24px !important;
  line-height: 40px !important;
  margin-top: 25px !important;
  font-weight: 400 !important;
}

/* Large Desktop (1400px - 1599px) */
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .tm-heroslider-content h1 {
    font-size: 72px !important;
    line-height: 82px !important;
  }
  
  .tm-heroslider-content p {
    font-size: 22px !important;
    line-height: 38px !important;
  }
}

/* Medium Desktop (1200px - 1399px) */
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .tm-heroslider-content h1 {
    font-size: 64px !important;
    line-height: 74px !important;
  }
  
  .tm-heroslider-content p {
    font-size: 20px !important;
    line-height: 36px !important;
  }
}

/* Small Desktop/Large Tablet (992px - 1199px) */
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tm-heroslider-content h1 {
    font-size: 52px !important;
    line-height: 62px !important;
  }
  
  .tm-heroslider-content p {
    font-size: 18px !important;
    line-height: 32px !important;
  }
}

/* Tablet (768px - 991px) */
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tm-heroslider-content h1 {
    font-size: 44px !important;
    line-height: 54px !important;
    text-align: center !important;
  }
  
  .tm-heroslider-content p {
    font-size: 17px !important;
    line-height: 30px !important;
    text-align: center !important;
  }
}

/* Mobile (576px - 767px) */
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .tm-heroslider-content h1 {
    font-size: 36px !important;
    line-height: 46px !important;
    text-align: center !important;
  }
  
  .tm-heroslider-content p {
    font-size: 16px !important;
    line-height: 28px !important;
    text-align: center !important;
  }
}

/* Small Mobile (up to 575px) */
@media only screen and (max-width: 575px) {
  .tm-heroslider-content h1 {
    font-size: 32px !important;
    line-height: 42px !important;
    text-align: center !important;
  }
  
  .tm-heroslider-content p {
    font-size: 15px !important;
    line-height: 26px !important;
    text-align: center !important;
  }
}

/* Reduce excessive spacing between sections for better flow */
/* Features section - reduce bottom padding */
#tm-area-features.tm-padding-section {
  padding-bottom: 50px !important;
}

/* Services (Retailer) section - reduce top padding significantly */
#tm-area-services.tm-padding-section {
  padding-top: 50px !important;
  padding-bottom: 100px !important;
}

/* Distributor section - maintain consistent spacing */
#tm-area-about.tm-padding-section {
  padding-top: 100px !important;
  padding-bottom: 100px !important;
}

/* FAQ section - maintain consistent spacing */
#tm-area-faq.tm-padding-section {
  padding-top: 100px !important;
  padding-bottom: 100px !important;
}

/* Download section - maintain consistent spacing */
#tm-area-download.tm-padding-section {
  padding-top: 100px !important;
  padding-bottom: 100px !important;
}

/* Contact section - maintain consistent spacing */
#tm-area-contact.tm-padding-section {
  padding-top: 100px !important;
  padding-bottom: 100px !important;
}

/* Responsive spacing adjustments */
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  #tm-area-features.tm-padding-section {
    padding-bottom: 40px !important;
  }
  
  #tm-area-services.tm-padding-section {
    padding-top: 40px !important;
    padding-bottom: 85px !important;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  #tm-area-features.tm-padding-section {
    padding-bottom: 35px !important;
  }
  
  #tm-area-services.tm-padding-section {
    padding-top: 35px !important;
    padding-bottom: 80px !important;
  }
}

@media only screen and (max-width: 767px) {
  #tm-area-features.tm-padding-section {
    padding-bottom: 30px !important;
  }
  
  #tm-area-services.tm-padding-section {
    padding-top: 30px !important;
    padding-bottom: 70px !important;
  }
}

/* Enhanced Section Title Typography */
.tm-sectiontitle h2 {
  font-size: 36px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
}

/* Responsive section title sizing */
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tm-sectiontitle h2 {
    font-size: 32px !important;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tm-sectiontitle h2 {
    font-size: 30px !important;
  }
}

@media only screen and (max-width: 767px) {
  .tm-sectiontitle h2 {
    font-size: 28px !important;
  }
}

/* Fix retailer section layout - ensure proper centering in tablet view */
#tm-area-services .row.mt-40-reverse {
  justify-content: center;
}

/* Ensure proper spacing and centering for retailer service items */
@media only screen and (min-width: 768px) and (max-width: 991px) {
  #tm-area-services .col-lg-12.col-md-6 {
    display: flex;
    justify-content: center;
  }
  
  /* Make the third item (Manage Claims Easily) center properly */
  #tm-area-services .col-lg-12.col-md-6:nth-child(3) {
    margin: 40px auto 0 auto;
    max-width: 50%;
  }
}