/* Global Typography - Targeted to first instance only */

@media (max-width: 992px) {
  h1:first-of-type,
  h2:first-of-type {
    font-size: 33px !important;
    font-weight: 700 !important;
  }
  h3:first-of-type {
    font-size: 27px !important;
    font-weight: 700 !important;
  }
}

@media (min-width: 992px) {
  h1:first-of-type,
  h2:first-of-type {
    font-size: 50px !important;
    font-weight: 700 !important;
  }
  h3:first-of-type {
    font-size: 37px !important;
    font-weight: 700 !important;
  }
}

/* CSS For Pricing Section */
.pricing {
  display: flex;
  justify-content: center;
}

/* Card */
.price-card {
  width: 330px;
  height: auto;
  border: 1px solid #E5E5E5;
  box-shadow: 0px 4px 6px -2px #10182808;
  box-shadow: 0px 12px 16px -4px #10182814;
  border-radius: 12px;
  margin: 10px;
  padding: 0 30px 10px 30px;
}

.price-card a {
  display: inline-block;
}

.price-card .label-1 {
  width: 44%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 25px;
}

.price-card .label-2 {
  width: 45%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 25px;
}

.price-card .label-3 {
  width: 40%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 25px;
}

.price-card .label-4 {
  width: 65%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 25px;
}

.price-card .label-1 p {
  background: #F5FBC5;
  color: #66720B;
  font-size: 12px;
  padding: 6px;
  font-weight: 600;
  border-radius: 12px;
}

.price-card .label-2 p {
  background: #E3F8FF;
  color: #035388;
  font-size: 12px;
  padding: 6px;
  font-weight: 600;
  border-radius: 12px;
}

.price-card .label-3 p {
  background: #FFE3EC;
  color: #620042;
  font-size: 12px;
  padding: 6px;
  font-weight: 600;
  border-radius: 12px;
}

.price-card .label-4 p {
  background: #EFFCF6;
  color: #004440;
  font-size: 12px;
  padding: 6px;
  font-weight: 600;
  border-radius: 12px;
}

.combine {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.variant {
  background-color: #F1F1F1;
}

.price {
  font-size: 32px;
  font-weight: 600;
  margin-top: 10px;
  margin-bottom: 10px;
  color: #243B53;
  display: flex;
  align-items: center;
}

.package-description p {
  font-size: 14px;
  color: #486581;
}

.package-description .expose {
  font-weight: 900;
}

.around {
  display: flex;
  justify-content: center;
}

.light-pricing-cta,
.heavy-pricing-cta {
  margin-top: 25px;
  margin-bottom: 25px;
}

.light-pricing-cta a {
  text-decoration: none;
  color: #274A50;
  font-weight: 600;
  font-size: 14px;
  padding: 10px 20px;
  border-radius: 12px;
  border: 1px solid #243B53;
  width: 240px;
  text-align: center;
}

.heavy-pricing-cta a {
  text-decoration: none;
  background-color: #274A50;
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  padding: 10px 20px;
  border-radius: 35px;
  border: 1px solid #243B53;
  width: 240px;
  text-align: center;
}

.light-pricing-cta a:hover {
  background-color: #243B53;
  transition: 0.3s;
  color: #fff;
}

.heavy-pricing-cta a:hover {
  background-color: #243B53;
  transition: 0.3s;
  color: #fff;
}

.recommended {
  background-image: url("https://49716150.fs1.hubspotusercontent-na1.net/hubfs/49716150/Pricing%20Icons/subtract.svg");
  height: 25px;
  width: 45%;
  font-size: 11px;
  display: flex;
  justify-content: center;
  color: #fff;
  font-weight: 400;
  margin-top: 10px;
  position: relative;
  right: -45px;
  border-radius: 0 5px 5px 0;
}

.recommended p {
  text-align: center;
  margin-left: 14px;
  font-size: 11px;
  color: #fff !important;
  padding-top: 3px;
}

.benefits ul {
  list-style-type: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.benefits li {
  position: relative !important;
  padding-left: 1.75rem !important;
  font-size: 14px !important;
  color: #486581 !important;
  margin-bottom: 15px !important;
  line-height: 1.5 !important;
}

.benefits li::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 0.35rem !important;
  width: 1rem !important;
  height: 1rem !important;
  background-image: url('https://49716150.fs1.hubspotusercontent-na1.net/hubfs/49716150/Pricing%20Icons/union.svg') !important;
  background-repeat: no-repeat !important;
  background-size: 17px 16px !important;
  background-position: center !important;
  display: inline-block !important;
}

.sec-variant {
  border: #7B4D7B solid 3px;
}

.occurances{
  color: #829AB1;
  font-size: 12px;
  margin-left: 10px;
  font-weight: 400;
}

/* ====== Responsive Design ====== */
@media (max-width: 1300px) {
  .pricing {
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    padding: 20px;
  }

  .price-card {
    width: 45%;
    height: auto;
    position: relative;
  }

  .price-card .label-1,
  .price-card .label-2,
  .price-card .label-3,
  .price-card .label-4 {
    position: relative;
    left: 0;                      
    margin-left: 0;               
    justify-content: flex-start;  
    width: auto;                  
  }

  .price-card .label-1 p,
  .price-card .label-2 p,
  .price-card .label-3 p,
  .price-card .label-4 p {
    padding: 6px 10px;
    font-size: 12px;
  }

  .price {
    font-size: 28px;
  }

  .package-description {
    font-size: 13px;
  }

  .recommended {
    width: auto;
    padding: 0 10px;
  }
}

@media (max-width: 600px) {
  .pricing {
    flex-direction: column;
    align-items: center;
    padding: 10px;
  }

  .price-card {
    width: 90%;
    height: auto;
    margin-bottom: 20px;
    padding: 20px;
  }

  .price-card .label-1,
  .price-card .label-2,
  .price-card .label-3,
  .price-card .label-4 {
    justify-content: flex-start;
    align-items: center;
    width: auto;
    margin-top: 15px;
  }

  .price {
    font-size: 24px;
  }

  .light-pricing-cta a,
  .heavy-pricing-cta a {
    width: 200px;
    padding: 12px 0;
  }

  .recommended {
    right: -32px;
    padding: 0 8px;
    font-size: 10px;
  }
}

@media (max-width: 400px) {                                                                          
  .price-card {
    padding: 15px;
  }

  .price {
    font-size: 22px;
  }

  .light-pricing-cta a,
  .heavy-pricing-cta a {
    max-width: 100%;
    font-size: 14px;
    padding: 10px 0;
  }

  .benefits li {
    font-size: 12px;
  }
}
#hs_cos_wrapper_widget_1757359568736 .pack-price .txt-l {
  font-size: 32px;
  line-height: 36px;
  font-weight: 600 !important;
}



/* How We Work*/
.hiw-banner {
  padding: 20px;
}

/* Main Section Container */
.steps {
  padding: clamp(40px, 5vw, 60px) 5%;
  max-width: 1440px;
  margin: 0 auto;
}

/* Individual Step Card */
.step {
  margin-bottom: 80px;
  position: relative;
}

.inner {
  background-color: #F4E6F1;
  background-image: url("https://49716150.fs1.hubspotusercontent-na1.net/hubfs/49716150/hiw_bg.svg");
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 20px;
  display: flex;
  align-items: center;
  position: relative;
  min-height: 400px;
}

/* Alternating Layout */
.inner.reverse {
  flex-direction: row-reverse;
}

/* Flip the background wave for reversed cards to maintain balance */
.inner.reverse::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("https://49716150.fs1.hubspotusercontent-na1.net/hubfs/49716150/hiw_bg.svg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: right;
  transform: scaleX(-1);
  z-index: 0;
  border-radius: 20px;
}

/* Ensure content stays above the background pseudo-element */
.inner > * {
  position: relative;
  z-index: 1;
}

/* Flex Columns */
.inner .left, 
.inner .right {
  flex: 1;
  padding: clamp(30px, 4vw, 60px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.inner .left {
  align-items: center;
}

/* Typography */
.inner .right h3 {
  color: #A75491;
  font-family: "Playfair Display", serif;
  font-size: clamp(24px, 2.6vw, 37px); /* Starts scaling down smoothly below 1440px */
  font-weight: 900;
  line-height: 1.15; 
  letter-spacing: -0.25px;
  margin-top: 0;
  margin-bottom: 15px;
}

.inner .right p {
  color: #000;
  font-family: "Lato", sans-serif;
  font-size: clamp(15px, 1.25vw, 18px); /* Smooth readability scaling for laptops */
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -0.25px;
  margin: 0;
}

/* Image Specific Styles */
.img-ipad {
  height: clamp(320px, 25vw, 440px) !important; /* Reduced max-size for desktop and scaled down vw */
  margin-top: -45px; /* Creates the top overflow */
  margin-bottom: -45px; /* Creates the bottom overflow */
  object-fit: contain;
}

.img-photo {
  width: 100%;
  max-width: clamp(300px, 28vw, 420px);
  height: auto;
  border-radius: 20px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.08);
  object-fit: cover;
}

.img-laptop {
  width: 115%; /* Slight bleed to the edge */
  max-width: clamp(380px, 35vw, 550px);
  height: auto;
  object-fit: contain;
}

/* =========================
RESPONSIVE DESIGN
========================= */

/* Small Laptops (like 13" MacBooks) */
@media (max-width: 1366px) {
  .steps {
    padding: 60px 4%; /* Give smaller laptops slightly wider content areas */
  }
  .inner .left, .inner .right {
    padding: clamp(20px, 3vw, 40px);
  }
}

@media (max-width: 992px) {
  .inner, .inner.reverse {
    flex-direction: column;
    text-align: center;
    padding: 50px 20px;
  }

  .inner .left, .inner .right {
    padding: 20px;
    width: 100%;
  }

  .inner .left {
    margin-bottom: 20px;
  }

  .img-ipad {
    height: clamp(300px, 50vw, 400px);
    margin-top: -80px; /* Bleeds out top of the box when stacked */
    margin-bottom: 0;
  }

  .img-photo {
    max-width: 90%;
  }

  .img-laptop {
    width: 100%;
    max-width: 90%;
  }
}

@media (max-width: 768px) {
  .steps {
    padding: 40px 15px;
  }

  .step {
    margin-bottom: 60px;
  }

  .inner {
    padding: 40px 15px;
    border-radius: 15px;
  }

  .inner.reverse::before {
    border-radius: 15px;
  }

  .img-ipad {
    height: 280px;
    margin-top: -60px;
  }
}

/* Homepage Polish */
#hs_cos_wrapper_module_17587373135145 img {
  border-radius: 20px;
}

#hs_cos_wrapper_widget_1758126396065_ img {
  border-radius: 20px;
}

#hs_cos_wrapper_module_17587375105117 img {
  border-radius: 20px;
}

span#hs_cos_wrapper_module_17617479107716_ img {
  border-radius: 20px;
}

@media (max-width: 767px) {
  .row-fluid-wrapper.row-depth-1.row-number-3.dnd-section .row-fluid {
    display: flex !important;
    flex-direction: column-reverse !important; 
  }

  .row-fluid-wrapper.row-depth-1.row-number-10.dnd-row.cell_17587375105112-row-0-vertical-alignment .row-fluid {
    display: flex !important;
    flex-direction: column-reverse !important;
  }
}

@media (max-width: 992px) {
  #hs_cos_wrapper_module_17610710593633 .clean-base .row {
    padding-top: 25px !important;
    padding-right: 0px;
    padding-bottom: 0 !important;
    padding-left: 0px;
    margin-top: 90px;
    margin-bottom: 0px;
  }

  #hs_cos_wrapper_dnd_area-module-7 .clean-base .row {
    padding-top: 0px;
    padding-bottom: 0px;
    margin-top: 10px;
    margin-bottom: 0px;
  }

  #hs_cos_wrapper_module_17610703104283 .clean-base .row {
    padding-top: 0px;
    padding-bottom: 0px;
    margin-top: 20px;
    margin-bottom: 0px;
  }

  #hs_cos_wrapper_module_17587375105115 .clean-base .row {
    padding-top: 0px;
    padding-bottom: 0px;
    margin-top: 20px;
    margin-bottom: 0px;
  }

  #hs_cos_wrapper_module_17581378595593 .clean-base .row {
    padding-top: 0px;
    padding-bottom: 0px;
    margin-top: 20px;
    margin-bottom: 0px;
  }

  #hs_cos_wrapper_module_1761750205684 .clean-base .c-1 {
    margin-top: 0 !important; 
  }
}

.hhs-top-bar .hs-menu-wrapper.hs-menu-flow-horizontal>ul li a {
  font-size: 22px !important;
}

/* Footer Polish */
#hs_cos_wrapper_global_footer .hhs-footer-mod {
  padding-top: 22px !important;
}

.hhs-foot-break-line {
  display: none !important;
}

.row.hhs-foot-nav-base {
  margin-bottom: 0 !important;
}

#hs_menu_wrapper_global_footer_ ul li:not(:last-child)::after {
  content: "|";
  display: inline-block;
  vertical-align: top;
  margin: 0 10px;
  color: #ffffff;
  font-weight: 300;
  font-size: 20px;
  line-height: 1;
}

/* Services Fix */
@media (max-width: 1408px) {
  #hs_cos_wrapper_dnd_area-module-12 .clean-base .row {
    margin-top: 65px !important;
    margin-bottom: 45px !important;  
  }
}

@media (max-width: 1330px) {
  #hs_cos_wrapper_dnd_area-module-12 .clean-base .row {
    margin-top: 95px !important;
    margin-bottom: 45px !important; 
  }

  @media (max-width: 1228px) {
    #hs_cos_wrapper_dnd_area-module-12 .clean-base .row {
      margin-top: 135px !important;
      margin-bottom: 45px !important; 
    }

    @media (max-width: 1096px) {
      #hs_cos_wrapper_dnd_area-module-12 .clean-base .row {
        margin-top: 135px !important;
        margin-bottom: 45px !important; 
      }

      @media (max-width: 992px) {
        #hs_cos_wrapper_dnd_area-module-12 .clean-base .row {
          margin-top: -370px !important;
          margin-bottom: 25px !important;
        }
      }

      @media (max-width: 576px) {
        #hs_cos_wrapper_dnd_area-module-12 .clean-base .row {
          margin-top: 50px !important;
          margin-bottom: 25px !important;
        }
      }

      .get_started {
        background-color: #fdf5fa;
      }

      .get_started_box {
        max-width: 600px;
        margin: 0 auto;
        padding: 40px 20px;
        background-color: #ffffff;
        border-radius: 15px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
      }

      .sorround_btn{
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 20px;
      }

      .sorround_btn a{
        padding: 10px 20px;
        background-color: #a7bc48;
        color: white;
        text-decoration: none;
        border-radius: 15px;
        font-weight: bold;
        height: 34px;
        display: flex;
        justify-content: center;
        align-items: center;
      }


      /* Footer Mobile Polish */
      /* ================================================= */
      /* ========== HARD RESET FOR HUBSPOT FOOTER ======== */
      /* ================================================= */

      footer.footer #hs_cos_wrapper_global_footer .hhs-footer-mod {
        padding: 50px 0 !important;
        background-position: center center !important;
        background-size: cover !important;
      }

      /* Remove all float behavior from HS menu */
      footer.footer .hs-menu-wrapper.hs-menu-flow-horizontal > ul li,
      footer.footer .hs-menu-wrapper.hs-menu-flow-horizontal > ul li.hs-menu-depth-1 {
        float: none !important;
        display: inline-flex !important;
      }

      /* Force footer row to flex properly */
      footer.footer .row.hhs-foot-nav-base {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        flex-wrap: wrap !important;
        margin: 0 !important;
      }

      /* Clean container padding */
      footer.footer .container {
        padding-left: 25px !important;
        padding-right: 25px !important;
      }

      /* ================================================= */
      /* ================= NAVIGATION ==================== */
      /* ================================================= */

      footer.footer .hhs-foot-base-nav .hs-menu-wrapper > ul {
        display: flex !important;
        gap: 22px !important;
        padding: 0 !important;
        margin: 0 !important;
        list-style: none !important;
      }

      footer.footer .hhs-foot-base-nav .hs-menu-wrapper li {
        width: auto !important;
        text-align: left !important;
      }

      footer.footer .hhs-foot-base-nav a {
        font-size: 14px !important;
        text-decoration: none !important;
        transition: opacity 0.3s ease !important;
      }

      footer.footer .hhs-foot-base-nav a:hover {
        opacity: 0.75 !important;
      }

      /* ================================================= */
      /* ================= SOCIAL ======================== */
      /* ================================================= */

      @media (max-width: 1096px) {
        footer.footer .hhs-foot-base-nav .hs-menu-wrapper > ul {
          display: flex !important;
          flex-wrap: wrap !important; 
          column-gap: 22px !important;
          row-gap: 12px !important; 
          padding: 0 !important;
          margin: 0 !important;
          list-style: none !important;
        }
      }

      /* ================================================= */
      /* ================= COPYRIGHT ===================== */
      /* ================================================= */

      footer.footer .hhs-foot-copyright {
        margin-top: 15px !important;
        font-size: 13px !important;
        text-align: left !important;
      }

      /* ================================================= */
      /* ================= TABLET ======================== */
      /* ================================================= */

      @media (max-width: 992px) {

        footer.footer .row.hhs-foot-nav-base {
          flex-direction: column !important;
          gap: 0px !important;
          text-align: center !important;
        }

        footer.footer .hhs-foot-base-nav .hs-menu-wrapper > ul {
          flex-wrap: wrap !important;
          row-gap: 12px !important;  
          justify-content: center !important;
        }

        footer.footer .hhs-social-con {
          justify-content: center !important;
        }

        footer.footer .hhs-foot-copyright {
          text-align: center !important;
        }

        #hs_menu_wrapper_global_footer_ ul li:not(:last-child)::after {
          display: none !important;
        }
      }

      /* ================================================= */
      /* ================= MOBILE ======================== */
      /* ================================================= */

      @media (max-width: 575px) {

        footer.footer #hs_cos_wrapper_global_footer .hhs-footer-mod {
          padding: 40px 0 !important;
        }

        footer.footer .hhs-foot-base-nav .hs-menu-wrapper > ul {
          flex-direction: column !important;
          align-items: center !important;
          gap: 12px !important;
        }

        footer.footer .hhs-foot-base-nav .hs-menu-wrapper li {
          width: 100% !important;
          justify-content: center !important;
        }

        footer.footer .hhs-social-con {
          justify-content: center !important;
          gap: 22px !important;
        }

        footer.footer .hhs-foot-copyright {
          font-size: 12px !important;
          line-height: 1.6 !important;
        }

        .hhs-foot-base-nav .hs-menu-wrapper.hs-menu-flow-horizontal > ul li a {
          font-size: 18px !important;
        }

        footer.footer .hs-menu-wrapper.hs-menu-flow-horizontal > ul li, footer.footer .hs-menu-wrapper.hs-menu-flow-horizontal > ul li.hs-menu-depth-1 {
          text-align: center !important;
        }
      }

      .hhs-social-con {
        display: flex !important;
        flex-direction: row !important; 
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: flex-end !important; 
        gap: 16px !important;
        width: 100% !important;
      }

      .hhs-social-con a {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-decoration: none !important;
      }

      .hhs-social-con a svg {
        width: 24px !important;
        height: 24px !important;
      }

      /* New Home Page Edits   */
      @media (max-width: 575px) {
        #hs_cos_wrapper_widget_1773929424635 {
          text-wrap: unset !important;
          padding-left: 50px !important;
          padding-right: 0 !important;
        } 
      }

      /*  Newsletter Overrides  */
      /* Heading (Playfair Display) */
      .hsfc-RichText p strong {
        font-family: 'Playfair Display', serif !important;
      }

      /* Paragraphs and Labels (Lato) */
      .hsfc-RichText p,
      .hsfc-FieldLabel,
      .hsfc-FieldLabel span,
      .hsfc-TextInput,
      .hsfc-Button {
        font-family: 'Lato', sans-serif !important;
      }

      #hs_cos_wrapper_module_17581378595593 .clean-base .row {
        display: flex !important;
        align-items: center !important;
      }