/* Import Bootstrap 5 CSS */
@import url('https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css');

/* Variables */
:root {
  --primary: #009A5E;
  --secondary: #1C3A5C;
  --secondary-active: #2e5b8f;
  --content: #6F6F6F;
  --content-d: #161616;
  --white: #FFFFFF;
  --bg-color: #F2F6FE;

  --bs-primary-rgb: var(--primary);
  --bs-secondary-rgb: 28,58,92;
  --bs-btn-bg: var(--secondary);
  --bs-btn-border-color: var(--secondary);
  --bs-btn-active-bg: var(--secondary-active);
  --bs-btn-hover-border-color: var(--secondary-active);

  --body-font: "Montserrat", sans-serif;
  --title-font: "DM Serif Display", serif;
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --bs-body-font-family: var(--body-font);
}

/* Overwrite CSS */
.container {
  width: 100%;
  max-width: 1200px;
}
button.navbar-toggler {
  border: none;
  outline: none;
  box-shadow: none !important;
}
p:last-child {
  margin-bottom: 0 !important;
}
img, iframe {
  max-width: 100%;
}
.mw-600 {
  max-width: 600px;
  margin-inline: auto;
}
.gap-8 {
  gap:80px;
}

/* Grid */
.d-grid.grid-template-columns-2 {
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width:769px) {
  .d-grid.grid-template-columns-md-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Typography */
body {
  font-family: var(--body-font);
  color: var(--content);
  line-height: 1.5;
}
h1, .h1 {
  font-size: 64px;
}
h2, .h2 {
  font-size: 48px;
}
h3, .h3 {
  font-size: 32px;
}
h4, .h4 {
  font-size: 24px;
}
h1, .h1, h2, .h2 {
  font-family: var(--title-font);
  line-height: 1.1;
}
.font-title {
  font-family: var(--title-font);
}
.fs-14 {
  font-size: 14px;
}
.fs-16 {
  font-size: 16px;
}
.fs-18 {
  font-size: 18px;
}
.fs-20 {
  font-size: 20px;
}
.fs-24 {
  font-size: 24px;
}
.fw-normal {
  font-weight: var(--fw-normal);
}
.fw-medium {
  font-weight: var(--fw-medium);
}
.fw-semibold {
  font-weight: var(--fw-semibold);
}
.fw-bold {
  font-weight: var(--fw-bold);
}
.text-content {
  color: var(--content);
}
.text-primary {
  color: var(--primary) !important;
}
.text-secondary {
  color: var(--secondary);
}
.text-white {
  color: var(--white);
}
.bg-primary {
  background-color: var(--primary);
}
.bg-secondary {
  background-color: var(--secondary);
}
.bg-bg-color {
  background-color: var(--bg-color);
}
.a-hover {
  transition: all ease-in-out 0.25s;
  &:hover {
    transform: translateY(-5px);
  }
}

/* Buttons */
.btn {
  font-family: var(--body-font);
  font-size: 16px;
  font-weight: var(--fw-bold);
  line-height: 1.1;
  text-transform: uppercase;
  padding: 13px 24px;
  border-radius: 6px;
}
.btn-primary {
  background-color: var(--secondary);
  border-color: var(--secondary);
  color: var(--white);

  &:hover {
    background-color: var(--secondary-active);
    border-color: var(--secondary-active);
    color: var(--white)
  }
}
.btn-success {
  background-color: var(--primary);
  border-color: var(--primary);
}
.btn-outline-dark {
  border-width: 1.5px;
  outline-color: var(--secondary);
  color: var(--secondary);
}

/* Header */
header.header {
  background-color: var(--white);
}
nav.navbar {
  padding-top: 24px;
  padding-bottom: 24px;

  a.nav-link {
    font-weight: var(--fw-medium);
    color: var(--secondary);

    &:hover {
      color: var(--primary);
    }
  }
}

/* Hero Section */
section.hero-section {
  background-color: var(--secondary);

  .container {
    max-width: 980px;
    padding-top: 50px;
    padding-bottom: 50px;
  }

  h1 {
    color: var(--white);
  }
}
section.hero-image {
  position: relative;

  &::before {
    background-color: var(--secondary);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 50%;
    content: "";
    z-index: -1;
  }
  
  .container {
    max-width: 760px;
  }

  img {
    border-radius: 16px;
    box-shadow: 0 20px 30px -10px rgba(0,0,0,.12);
  }
}

section.section > .container {
  padding-top: 80px;
  padding-bottom: 80px;
}

span.aj-tag {
  font-size: 12px;
  font-weight: var(--fw-medium);
  color: var(--white);
  line-height: 1;
  padding: 6px 10px;
  border-radius: 4px;

  &.aj-tag-seconday {
    background-color: var(--secondary);
  }
  &.aj-tag-primary {
    background-color: var(--primary);
  }
}

.video-container {
  position: relative;
  width: 100%;
  max-width: 560px;
  height: 400px;
  cursor: pointer;
  overflow: hidden;
  border-radius: 24px;

  .thumbnail {
    position: absolute;
    width: 100%;
    height: 100%;
    background: url('../images/aj-easy-agent--img-2.webp') center center / cover no-repeat;
  }
  .play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    background: url('../images/play-icon.svg') center center / contain no-repeat;
  }
  iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: none;
  }
}

/* testimonials */
.slider_testimonials {
  max-width: 100%;

  .swiper-wrapper {
    padding-bottom: 80px;
  }
}
.testimonial-item {
  * {
    transition: all ease-in-out 0.2s;
  }
  .testimonial-item-wrap {
    background-color: var(--white);
    padding: 30px;
  }

  .testimonial-user {
    max-width: 70px;
    border-radius: 50%;
  }

  h4 {
    color: var(--content-d);
  }

  p.testimonial-content {
    color: var(--secondary);
  }

  &:not(.swiper-slide-active) {
    filter: blur(2.5px);
  }

  &.swiper-slide-active .testimonial-item-wrap {
    background-color: var(--secondary);

    h4,
    p:not(.text-primary),
    p.testimonial-content {
      color: var(--white);
    }
  }
}
.swiper .swiper-button-prev,
.swiper .swiper-button-next {
  width: 44px;
  height: 44px;
  top: auto;
  bottom: 0;

  &::after {
    display: none;
  }
}
.swiper .swiper-button-prev {
  left: calc(50% - 52px);
}
.swiper .swiper-button-next {
  right: calc(50% - 52px);
}

/* Priceing Plan */
.pricing-plan {
  background-color: var(--white);
  border-radius: 16px;
  border: 1px solid #E4E4E7;
  box-shadow: 0 12px 16px -4px rgba(16,24,40,0.08);

  .pricing-title-wrap {
    padding: 40px 32px 0 32px;
    @media (max-width:600px) {
      padding: 28px 24px 0 24px;
    }

    h2 small {
      font-size: 60%;
    }

    h2 {
      font-size: 48px;
      @media (max-width:1024px) {font-size: 40px}
      @media (max-width:600px) {font-size: 32px}
    }
  }

  .pricing-plan-features {
    padding: 32px;
    @media (max-width:600px) {
      padding: 24px;
    }

    ul {
      padding: 0;
      list-style: none;
      margin: 0;
      gap: 14px;

      li {
        position: relative;
        padding-left: 32px;

        &::before {
          content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 25' fill='none'%3E%3Crect y='0.713867' width='24' height='24' rx='12' fill='%231C3A5C'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M17.0964 8.10403L9.93641 15.014L8.03641 12.984C7.68641 12.654 7.13641 12.634 6.73641 12.914C6.34641 13.204 6.23641 13.714 6.47641 14.124L8.72641 17.784C8.94641 18.124 9.32641 18.334 9.75641 18.334C10.1664 18.334 10.5564 18.124 10.7764 17.784C11.1364 17.314 18.0064 9.12403 18.0064 9.12403C18.9064 8.20403 17.8164 7.39403 17.0964 8.09403V8.10403Z' fill='white'/%3E%3C/svg%3E");
          position: absolute;
          left: 0;
          top: 0;
          @media (max-width:600px) {
            width: 20px;
            height: 20px;
          }
        }
      }
    }
  }

  .pricing-plan-cta {
    padding: 8px 32px 32px 32px;
    @media (max-width:600px) {
      padding: 4px 24px 24px 24px;
    }
  }

  @media (max-width:600px) {
    margin-top: 20px;

    &:first-child {order: 2}
    &:nth-child(3) {order: 3}
  }
}

.pricing-plan-recommended {
  position: relative;

  @media (max-width:600px) {
    order: 1;
  }

  .pricing-plan-features ul li::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='25' height='25' viewBox='0 0 25 25' fill='none'%3E%3Crect x='0.333374' y='0.713867' width='24' height='24' rx='12' fill='%23009A5E'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M17.4298 8.10403L10.2698 15.014L8.36976 12.984C8.01976 12.654 7.46976 12.634 7.06976 12.914C6.67976 13.204 6.56976 13.714 6.80976 14.124L9.05976 17.784C9.27976 18.124 9.65975 18.334 10.0898 18.334C10.4998 18.334 10.8898 18.124 11.1098 17.784C11.4698 17.314 18.3398 9.12403 18.3398 9.12403C19.2398 8.20403 18.1498 7.39403 17.4298 8.09403V8.10403Z' fill='white'/%3E%3C/svg%3E");
  }

  .pricing-plan-recommended-label {
    position: absolute;
    top: -28px;
    left: calc(50% - 20px);
    display: flex;

    span {
      font-family: var(--title-font);
      font-size: 20px;
      color: var(--primary);
      white-space: nowrap;
      margin: -8px 0 0 -4px;
    }
  }
}

/* Form */
.form-control {
  padding: 12px 16px;
}

/* Small Screen */
@media (max-width:1200px) {
  .gap-8 {
    gap:60px;
  }
}

/* Tablet Version */
@media (max-width:991px) {
  .testimonial-item {
    &:not(.swiper-slide-active) {
      filter: none;
    }
    .testimonial-item-wrap {
      background-color: var(--secondary);

      h4,
      p:not(.text-primary),
      p.testimonial-content {
        color: var(--white);
      }
    }
  }
  h1, .h1 {
    font-size: 48px;
  }
  h2, .h2 {
    font-size: 32px;
  }
  h3, .h3 {
    font-size: 24px;
  }
  h4, .h4 {
    font-size: 20px;
  }
  .fs-16 {
    font-size: 15px;
  }
  .fs-18 {
    font-size: 17px;
  }
  .fs-20 {
    font-size: 18px;
  }
  .fs-24 {
    font-size: 22px;
  }
  .gap-8 {
    gap:50px;
  }
  header.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    box-shadow: 0 1px 2px 0 rgba(0,0,0,.05);
    z-index: 999;
  }
  nav.navbar {
    padding-top: 10px;
    padding-bottom: 10px;
  }
  a.navbar-brand img {
    max-width: 120px;
  }
  div.navbar-collapse {
    background-color: var(--white);
    position: fixed;
    top: 60px;
    left: 0;
    right: 0;

    ul.navbar-nav {
      margin-top: 6px;
    }

    ul.navbar-nav a.nav-link {
      padding: 8px 20px;
      border-bottom: 1px solid rgba(0,0,0,.1);
    }
  }
  .header-widgets {
    margin: 20px 0;
  }
  section.section > .container {
    padding-top: 60px;
    padding-bottom: 60px;
  }
  main.main {
    padding-top: 60px;
  }
  .btn {
    font-size: 15px;
  }
}

/* Mobile Version */
@media (max-width:600px) {
  h1, .h1 {
    font-size: 32px;
  }
  h2, .h2 {
    font-size: 24px;
  }
  h3, .h3 {
    font-size: 20px;
  }
  h4, .h4, .fs-24 {
    font-size: 18px;
  }
  .fs-20, .fs-m-16 {
    font-size: 16px;
  }
  .fs-18, .fs-m-15 {
    font-size: 15px;
  }
  .fs-16 {
    font-size: 14px;
  }
  .fs-m-13 {
    font-size: 13px;
  }
  .gap-8 {
    gap:30px;
  }
  .px-m-10 {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  .btn, .fs-m-14 {
    font-size: 14px;
  }
  .container {
    padding-left: 16px;
    padding-right: 16px;
  }
  section.section > .container,
  section.hero-section .container {
    padding-top: 40px;
    padding-bottom: 40px;
  }
  span.aj-tag {
    font-size: 11px;
  }
  .video-container {
    height: calc((100vw - 32px) * 0.72 );
    border-radius: 16px;
  }
  .icon-sm-60 {
    max-width: 52px;
  }
  .slider_testimonials .swiper-wrapper {
      padding-bottom: 60px;
  }
}