/*
 * %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 *
 * 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
 *
 * %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 */

/* Videobox: circular poster + play overlay, switch to rectangular on play */

/* Reset gradient overlay so poster/video are visible */
.tm-funfact-videobox::before { content: none !important; }

/* Play button overlay */
.tm-videobox-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  height: 72px;
  width: 72px;
  border-radius: 1000px;
  border: 0;
  background: rgba(14, 143, 227, 0.9);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 200ms ease, opacity 200ms ease;
}
.tm-videobox-play i { font-size: 36px; line-height: 1; }
.tm-videobox-play:hover { transform: translate(-50%, -50%) scale(1.06); }

/* Initial state: circular frame using existing class */
.tm-funfact-videobox {
  overflow: hidden; /* clip poster into circle */
}
.tm-funfact-videobox video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 1000px; /* match circle */
}

/* Active (playing) state: switch to rectangular and hide play */
.js-video-toggle.is-playing {
  border-radius: 16px !important;
}
.js-video-toggle.is-playing video {
  border-radius: 16px;
}
.js-video-toggle.is-playing .tm-videobox-play { opacity: 0; pointer-events: none; }

/* Optional: enforce 16:9 when playing for consistency */
@supports (aspect-ratio: 16/9) {
  .js-video-toggle.is-playing { aspect-ratio: 16/9; }
  .js-video-toggle.is-playing video { height: 100%; object-fit: cover; }
}

/* Ensure background shape sits behind content softly */
.tm-video-funfact-bgshape { z-index: 0; opacity: 0.12; }
#tm-area-video .container { position: relative; z-index: 1; }

/* Enlarge the rectangular video when playing */
.tm-video-funfact-area .js-video-toggle {
  transition: transform 250ms ease, box-shadow 250ms ease;
  will-change: transform;
}
.tm-video-funfact-area .js-video-toggle.is-playing {
  transform: scale(1.08);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
  z-index: 2;
}
@media (min-width: 992px) {
  .tm-video-funfact-area .js-video-toggle.is-playing { transform: scale(1.12); }
}

/* ================================
   THEME PRIMARY GRADIENT OVERRIDES
   linear-gradient(to bottom right, #1E90FF, #004AAD)
   ================================ */

/* Utility background */
.bg-gradient {
  background: linear-gradient(to bottom right, #1E90FF, #004AAD) !important;
}

/* Buttons use gradient on overlay pseudo-element */
.tm-button::before,
a.tm-button::before,
button.tm-button::before {
  background: linear-gradient(to bottom right, #1E90FF, #004AAD) !important;
}

/* Gradient text/icon fills where supported */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .tm-feature-icon svg path,
  .tm-service-icon svg path {
    background: linear-gradient(to bottom right, #1E90FF, #004AAD) !important;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-fill-color: transparent;
  }
}

/* Accent color replacements */
.tm-funfact-content .tm-funfact-number,
.tm-pricebox.is-active .tm-pricebox-header,
.tm-sectiontitle-divider i {
  color: #1E90FF !important;
}

/* Match Download Area background to .tm-heroslider-inner */
#tm-area-download,
.tm-downlaod-area {
  background: linear-gradient(to bottom right, #1875D1, #00337A) !important;
}

/* Footer uses same gradient as hero */
.tm-footer {
  background: linear-gradient(to bottom right, #1875D1, #00337A) !important;
}

/* Features section description styling */
.tm-section-description {
  margin-bottom: 3rem;
}

.tm-section-description .lead {
  font-size: 1.1rem;
  line-height: 1.6;
  color: #666;
  font-weight: 400;
  max-width: 800px;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .tm-section-description .lead {
    font-size: 1rem;
    padding: 0 1rem;
  }
}

/* Enhanced video section styling */
.tm-video-funfact-area {
  text-align: left;
}

.tm-video-funfact-area .tm-videobox {
  max-width: 100%;
  margin: 0;
  display: block;
}

/* Video content text styling */
.tm-video-content {
  padding: 2rem 0 2rem 2rem;
  max-width: 100%;
}

.tm-video-content p {
  font-size: 1.3rem;
  line-height: 1.6;
  color: #666;
  margin-bottom: 1.5rem;
  text-align: left;
}

.tm-video-content p:last-child {
  margin-bottom: 0;
}

/* Responsive video sizing */
@media (max-width: 768px) {
  .tm-video-funfact-area .tm-videobox {
    max-width: 100%;
    margin: 0 auto 2rem auto;
  }
  
  .tm-video-content {
    padding: 1rem 0;
    text-align: center;
  }
  
  .tm-video-content p {
    font-size: 1.2rem;
    text-align: center;
  }
}

/* FAQ section: further tighten title spacing and section padding */
#tm-area-faq.tm-padding-section {
  padding-top: 32px;
  padding-bottom: 32px;
}

#tm-area-faq .tm-sectiontitle {
  margin-top: 0;
  margin-bottom: 0.25rem;
  padding-top: 0;
  padding-bottom: 0;
}

#tm-area-faq .tm-sectiontitle h2 {
  margin-top: 0;
  margin-bottom: 0.25rem;
}

#tm-area-faq .tm-sectiontitle-divider {
  margin-top: 0;
  margin-bottom: 0;
}

/* Reduce gap between title row and content row in FAQ */
#tm-area-faq .container > .row + .row {
  margin-top: -100px !important;
}

@media (min-width: 769px) and (max-width: 1024px) {
  .tm-video-funfact-area .tm-videobox {
    max-width: 100%;
    margin: 0;
  }
  
  .tm-video-content {
    padding: 1.5rem 0 1.5rem 1.5rem;
  }
}

@media (min-width: 1025px) {
  .tm-video-funfact-area .tm-videobox {
    max-width: 100%;
    margin: 0;
  }
  
  .tm-video-content {
    padding: 2rem 0 2rem 2rem;
  }
}

/* Google Maps section - force white background */
.google-map-area,
#google-map,
.tm-google-map {
  background: #ffffff !important;
  background-color: #ffffff !important;
  position: relative;
  z-index: 9999;
}

/* Ensure iframe container has white background and highest z-index */
.google-map-area iframe {
  background: #ffffff !important;
  position: relative;
  z-index: 10000;
}