/**

 * Smart Agent brand overrides for Porto template (skin-corporate-7)

 * Layout inspired by tuitionhelper.in (same ThemeForest Porto base)

 */

:root {

  --sa-purple: #5E4B8B;

  --sa-green: #7AC943;

  --sa-muted: #6C757D;

  --sa-purple-dark: #4a3a6f;

  /* Override Porto skin-corporate-7 red primary with Smart Agent purple */

  --primary: #5E4B8B;

  --primary-100: #4a3a6f;

  --primary-200: #453567;

  --primary-300: #3f3060;

  --primary--100: #6f5da0;

  --primary--200: #7a6aaa;

  --primary--300: #8577b4;

  --primary-rgba-0: rgba(94, 75, 139, 0);

  --primary-rgba-10: rgba(94, 75, 139, 0.1);

  --primary-rgba-20: rgba(94, 75, 139, 0.2);

  --primary-rgba-30: rgba(94, 75, 139, 0.3);

  --primary-rgba-40: rgba(94, 75, 139, 0.4);

  --primary-rgba-50: rgba(94, 75, 139, 0.5);

  --primary-rgba-60: rgba(94, 75, 139, 0.6);

  --primary-rgba-70: rgba(94, 75, 139, 0.7);

  --primary-rgba-80: rgba(94, 75, 139, 0.8);

  --primary-rgba-90: rgba(94, 75, 139, 0.9);

}



html .text-color-primary,

html .text-primary {

  color: var(--sa-purple) !important;

}



html .bg-primary {

  background-color: var(--sa-purple) !important;

}



html .btn-primary,

html .btn-primary:hover,

html .btn-primary:focus,

html .btn-primary:active {

  background-color: var(--sa-purple);

  border-color: var(--sa-purple);

  color: #fff;

}



html .btn-primary:hover {

  background-color: var(--sa-purple-dark);

  border-color: var(--sa-purple-dark);

}



html .btn-outline.btn-primary {

  color: var(--sa-purple);

  border-color: var(--sa-purple);

}



html .btn-outline.btn-primary:hover {

  background-color: var(--sa-purple);

  border-color: var(--sa-purple);

  color: #fff;

}



html .plan.plan-featured .plan-header.bg-primary {

  background-color: var(--sa-purple) !important;

}



html .plan.plan-featured {

  transform: scale(1.03);

  z-index: 2;

  box-shadow: 0 8px 30px rgba(94, 75, 139, 0.2);

}



html .feature-box-icon i.text-color-primary {

  color: var(--sa-purple) !important;

}



/* Key features (DefaultNew.aspx + AboutUsNew.aspx) — purple icon box standard */

.sa-features-section .feature-box-style-2 .feature-box-icon {

  top: 0;

  flex: 0 0 auto;

  flex-shrink: 0;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  width: 2.75rem;

  height: 2.75rem;

  min-width: 2.75rem;

  min-height: 2.75rem;

  max-width: 2.75rem;

  max-height: 2.75rem;

  padding: 0 !important;

  border-radius: 9px;

  background: linear-gradient(145deg, #5e4b8b 0%, #6f5da0 100%) !important;

  box-shadow: 0 3px 8px rgba(94, 75, 139, 0.28);

}



.sa-features-section .feature-box-style-2 .feature-box-icon i {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  width: auto;

  height: auto;

  min-width: 0;

  min-height: 0;

  font-size: 1.05rem !important;

  line-height: 1;

  color: #ffffff !important;

  background: none !important;

  border-radius: 0;

  box-shadow: none;

}



html #header .header-logo {

  display: flex;

  align-items: center;

  margin-top: 10px;

  margin-bottom: 10px;

}



html .header-logo img {

  max-height: 86px;

  width: auto;

  height: auto;

  display: block;

}



html.sticky-header-active #header.header-effect-shrink .header-logo img {

  max-height: 64px;

}



@media (max-width: 991px) {

  html #header .header-logo {

    margin-top: 12px;

    margin-bottom: 12px;

  }



  html .header-logo img {

    max-height: 74px;

  }

}



.sa-header-auth-btns {

  gap: 10px;

}



@media (max-width: 991px) {

  #header .header-nav-main nav > ul > li > a.btn-primary,

  #header .header-nav-main nav > ul > li > a.btn-primary:hover,

  #header .header-nav-main nav > ul > li > a.btn-primary:focus,

  #header .header-nav-main nav > ul > li > a.btn-primary:active {

    color: #fff !important;

  }

}



/* Tuition Helper style hero */

.sa-hero-centered {

  background-size: cover;

  background-position: center;

  min-height: 75vh;

  max-height: 700px;

  display: flex;

  align-items: center;

  position: relative;

}



.sa-hero-home {

  background-image: url('../images/HeroBanner.png');

}



.sa-hero-text {

  max-width: 920px;

  padding: 1.25rem 1.75rem;

  background: rgba(0, 0, 0, 0.45);

  border-radius: 8px;

}



.sa-hero-title {

  font-size: clamp(2rem, 5vw, 3.2rem);

  line-height: 1.15;

  max-width: 900px;

}



.sa-hero-subtitle {

  max-width: 780px;

  line-height: 1.5;

  color: #fff;

  margin: 0 auto;

}



/* Grey section bands (Tuition Helper pattern) */

section.section.sa-section-grey {

  background-color: #f4f4f4 !important;

  border-top-color: #f4f4f4 !important;

  position: relative;

}



.sa-section-heading {

  margin: 40px 0 10px;

}



.sa-features-section {

  padding-top: 1.25rem !important;

  padding-bottom: 1.25rem !important;

}



.sa-features-section .sa-section-heading {

  margin: 0 0 0.5rem;

}



.sa-features-section .text-center.pb-4 {

  padding-bottom: 1.25rem !important;

}



.custom-box-shadow-1 {

  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);

  border-radius: 6px;

  overflow: hidden;

}



.sa-video-wrap {

  position: relative;

  background: #000;

  border-radius: 4px;

  overflow: hidden;

}



.sa-demo-section .sa-video-wrap iframe {

  display: block;

  border: 0;

  min-height: 240px;

}



@media (min-width: 768px) {

  .sa-demo-section .sa-video-wrap iframe {

    min-height: 360px;

  }

}



/* Mobile app image (home) */

.sa-mobile-app-visual {

  display: flex;

  align-items: center;

  justify-content: center;

}



.sa-mobile-img {

  display: block;

  width: 100%;

  max-width: 420px;

  height: auto;

  margin-left: auto;

  margin-right: auto;

  box-shadow: none;

  border: 0;

  background: transparent;

}



@media (min-width: 768px) {

  .sa-mobile-app-visual {

    order: 0;

  }



  .sa-mobile-app-copy {

    order: 1;

  }



  .sa-mobile-img {

    max-width: 100%;

    width: 100%;

  }

}



@media (min-width: 992px) {

  .sa-mobile-img {

    max-width: 640px;

    width: 100%;

  }

}



@media (min-width: 1200px) {

  .sa-mobile-img {

    max-width: 720px;

  }

}



/* Agent mini website section */

.sa-agent-website-section .sa-browser-preview {

  display: inline-block;

  width: 100%;

  max-width: 520px;

  padding: 12px 12px 0;

  background: #fff;

  border: 1px solid #e8e8e8;

  border-radius: 10px;

  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.16);

}



.sa-agent-website-section .sa-browser-preview::before {

  content: "";

  display: block;

  height: 10px;

  margin-bottom: 12px;

  border-radius: 5px;

  background: linear-gradient(90deg, var(--sa-purple), var(--sa-green));

}



.sa-agent-website-section .sa-agent-website-img {

  display: block;

  width: 100%;

  border-radius: 0 0 6px 6px;

}



@media (max-width: 991px) {

  .sa-agent-website-section .sa-browser-preview {

    max-width: 100%;

  }

}



/* Pricing compact */

.sa-plan-compact .plan-features ul li {

  padding: 6px 0;

}



section.section.sa-pricing-section {

  background: #fff !important;

  border-top-color: #fff !important;

}



.sa-pricing-section .pricing-table {

  align-items: stretch;

}



.sa-pricing-section .pricing-table > [class*="col-"] {

  display: flex;

}



.sa-pricing-section .pricing-table .plan {

  display: flex;

  flex-direction: column;

  width: 100%;

  height: 100%;

  margin-top: 0;

  margin-bottom: 15px;

}



.sa-pricing-section .pricing-table .plan .plan-features {

  flex-grow: 1;

}



.sa-pricing-section .plan.plan-featured {

  transform: none;

}



/* Floating contact buttons — desktop pills; mobile PNGs (mobile rules also inline in DefaultNew.aspx head) */

.sa-float-mobile-icon {

  display: none;

}



.sa-float-desktop-content {

  display: inline-flex;

  align-items: center;

  gap: 8px;

}



.sa-float-contact a {

  pointer-events: auto;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 8px;

  padding: 10px 16px;

  border-radius: 50px;

  font-size: 13px;

  font-weight: 600;

  color: #fff !important;

  text-decoration: none;

  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);

  transition: transform 0.2s ease;

  line-height: 1.2;

}



.sa-float-contact a i {

  flex-shrink: 0;

  font-size: 16px;

}



.sa-float-label {

  display: inline;

}



.sa-float-contact a:hover {

  transform: translateY(-2px);

  color: #fff;

}



.sa-float-phone {

  background: linear-gradient(180deg, #e74c3c, #c0392b);

}



.sa-float-whatsapp {

  background: linear-gradient(180deg, #25d366, #128c7e);

}



@media (min-width: 768px) {

  .sa-float-contact {

    position: fixed;

    bottom: calc(20px + env(safe-area-inset-bottom, 0px));

    left: 20px;

    right: 20px;

    z-index: 100001;

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 10px;

    pointer-events: none;

  }



  .sa-float-contact a {

    font-size: 14px;

    padding: 12px 20px;

    pointer-events: auto;

  }



  .sa-float-mobile-icon {

    display: none !important;

  }



  .sa-float-desktop-content {

    display: inline-flex !important;

  }

}



/* Prevent white-screen bugs from Porto animations */

body.page-transition-active {

  opacity: 1 !important;

}



.main .appear-animation {

  opacity: 1 !important;

}



.main .invisible {

  visibility: visible !important;

}



.owl-carousel-light .owl-item {

  display: block !important;

  visibility: visible !important;

  opacity: 1 !important;

  position: relative !important;

}



/* Responsive */

@media (max-width: 767px) {

  .sa-hero-home {

    background-image: url('../images/HeroBanner-mobile.jpg');

    background-position: center center;

  }



  .sa-hero-centered {

    min-height: 52vh;

    max-height: none;

    background-size: cover;

  }



  .sa-hero-text {

    padding: 1rem 1.1rem;

    max-width: 100%;

  }



  .sa-hero-subtitle {

    font-size: 0.95rem !important;

  }



  html .plan.plan-featured {

    transform: none;

  }



  #footer {

    padding-bottom: 72px;

  }

}



html {

  overflow-x: visible;

}



body {

  overflow-x: hidden;

  max-width: 100%;

}