/* fonts */
@font-face {
  font-family: "Kanit";
      src: url("/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/fonts/Kanit-Regular.ttf") format("truetype");
      font-weight: normal;
      font-style: normal;
      font-display: swap;
}

@font-face {
  font-family: "Kanit-Regular";
      src: url("/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/fonts/Kanit-Regular.ttf") format("truetype");
      font-weight: normal;
      font-style: normal;
      font-display: swap;
}

@font-face {
  font-family: "Kanit-SemiBold";
      src: url("/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/fonts/Kanit-SemiBold.ttf") format("truetype");
}

@font-face {
  font-family: "Kanit-Bold";
      src: url("/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/fonts/Kanit-Bold.ttf") format("truetype");
}

@font-face {
  font-family: "Kanit-Medium";
      src: url("/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/fonts/Kanit-Medium.ttf") format("truetype");
}

@font-face {
  font-family: "Kanit-Black";
      src: url("/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/fonts/Kanit-Black.ttf") format("truetype");
}

@font-face {
  font-family: "Kanit-Thin";
      src: url("/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/fonts/Kanit-Thin.ttf") format("truetype");
}

@font-face {
  font-family: "Kanit-Light";
      src: url("/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/fonts/Kanit-Light.ttf") format("truetype");
}

@font-face {
  font-family: "Kanit-LightItalic";
      src: url("/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/fonts/Kanit-LightItalic.ttf") format("truetype");
}

@font-face {
  font-family: "Lato";
      src: url("/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/fonts/Lato-Regular.ttf") format("truetype");
      font-weight: normal;
      font-style: normal;
      font-display: swap;
}

@font-face {
  font-family: "Lato-Bold";
      src: url("/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/fonts/Lato-Bold.ttf") format("truetype");
      font-weight: normal;
      font-style: normal;
      font-display: swap;
}

@font-face {
  font-family: "Lato-Black";
      src: url("/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/fonts/Lato-Black.ttf") format("truetype");
      font-weight: normal;
      font-style: normal;
      font-display: swap;
}
  
  
  /* Global Styles*/
html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
  margin: 0;
  padding: 0;
}

img.privacy-image {
  position: relative;
  bottom: -3px;
  margin-left: 3px;
}

body {
  -webkit-text-size-adjust: 100%;
  font-family: "Kanit";
  overflow-y: auto;
}

body.modal-enabled {
  overflow: hidden;
}

.content-container {
  width: 1132px;
  margin: 0 auto;
}

a {
  outline: none;
  border: none;
}

a:visited,a:active,a:hover,a:focus {
  text-decoration: none;
  outline: none;
  border: none;
}

.suptxt {
  vertical-align: baseline;
  position: relative;
  top: -0.4em;
  font-family: "Kanit";
}

.suptxt-d {
  vertical-align: baseline;
  position: relative;
  top: -0.5em;
  font-family: "Kanit";
  font-size: 12px;
}

.suptxt-da {
  vertical-align: baseline;
  position: relative;
  top: -0.7em;
  font-size: 18px;
  font-family: "Kanit-Light";
}

.header-list {
  background-color: #00102E;
}

.navbar {
  max-width: 1310px;
  margin: 0 auto;
}

.navbar-menu {
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: center;
}
  
  /* Header */
.cmp-text {
  padding: 0px !important;
}

.top-menu {
  background: #00102E;
}

#header .container-inner {
  max-width: 1366px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}

#mobile-menu {
  position: fixed;
  width: 100%;
  z-index: 1;
}

.top-menu ul.medical-info {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}

.top-menu ul {
  font-size: 14px;
  line-height: 16px;
  font-weight: 500;
}

.top-menu ul.us-healthcare {
  display: flex;
  color: #FFFFFF;
  justify-content: flex-end;
  max-width: 1160px;
  align-items: center;
  margin: auto;
  width: 100%;
}

.top-menu ul.us-healthcare li {
  font-family: "Kanit";
  margin-left: 30px;
  font-size: 12px;
  line-height: 26px;
    /*margin-left: 34px;*/;
}

.top-menu ul.medical-info li {
  margin-left: 20px;
}

.top-menu ul.medical-info li sup {
  font-size: 70%;
}

.top-menu ul li a {
  color: #FFFFFF;
  font-size: 16px;
}

.top-menu ul li a:hover {
  text-decoration: none;
}

.main-menu {
  max-width: 1310px;
  margin: 0px auto;
  background: #001234;
  padding: 10px 50px;
  font-family: "Helvetica Neue";
  font-size: 16px;
  line-height: 24px;
  font-weight: bold;
  border: 0px;
  border-radius: 0px 0px 30px 30px;
}

.header-logo {
  display: flex;
}

.header-main-menu {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  align-items: center;
}

.header-main-menu ul {
  display: flex;
  align-items: center;
}

.header-main-menu ul li {
  margin-left: 32px;
/*margin-left: 47px;*/;
}

.header-main-menu ul li a {
  color: #FFF;
  font-family: "Kanit";
  font-weight: 100;
}

.header-main-menu ul li a.active, 
  .header-main-menu ul li a:hover,
  #attr-home .header-main-menu ul li:nth-child(1) a,
  #about-attr-page .header-main-menu ul li:nth-child(2) a,
  #attr-symptoms .header-main-menu ul li:nth-child(3) a,
  #diagnosing-attr .header-main-menu ul li:nth-child(4) a {
  text-decoration: none;
  color: #ffffff;
  border-bottom: 2px solid #ff53ff;
}

#attr-home .card-one-info sup, #attr-home .card-two-info sup {
  font-family: "Kanit-Regular";
  font-size: 60%;
}

#header .container-inner {
  max-width: 100%;
  padding-left: 15px;
  padding-right: 15px;
}

#header .container-inner {
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}

.mobile-only .header-main-menu {
  width: 100%;
}

.mobile-only .header-main-menu ul li {
  margin-left: 0;
}

.mobile-only .main-menu ul li.logo {
  margin-bottom: 0;
}

.mobile-only .header-main-menu ul {
  display: flex;
  align-items: flex-start;
}

.mobile-only .nav-bar {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  list-style: none;
  position: relative;
  background: var(--color2);
  padding: 0;
}

.mobile-only #check {
  display: none;
}

.mobile-only .main-menu li {
  margin-bottom: 25px;
}

.mobile-only .main-menu .open-menu {
  top: 0;
  right: 16px;
}

.mobile-only .main-menu .close-menu {
  top: -58px;
  right: 16px;
}

.mobile-only .main-menu .close-menu i::before {
  content: "×";
}

.mobile-only .close-menu {
  top: -60px;
  right: 20px;
}

.mobile-only .main-menu .close-menu i::before {
  content: "×";
}

.mobile-only .main-menu ul li.logo a {
  padding-bottom: 0;
}

.border-gradient {
  border: 4px solid;
  border-image-slice: 1;
  border-width: 5px;
}

.border-gradient-green {
  border-image-source: linear-gradient(to left, #00C853, #B2FF59);
}

.only-top {
  border-left: 0;
  border-right: 0;
  border-bottom: 0;
}

.bg-stay {
  background-image: url(/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop/stay-inform-bg.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 164px;
  height: 41px;
  z-index: 3;
  display: grid;
  padding-top: 9px;
}

.top-menu ul li a {
  color: #00215F;
  text-align: center;
  font-family: "Kanit-Medium";
}

.top-menu ul.us-healthcare {
  height: 27px;
}

#attr-home .banner-subheading-home sup {
  font-family: "Kanit-Medium";
  font-size: 60%;
}
  
  /* footer */
#footer-style {
  background: #000;
}

.footer-container {
  margin-left: auto;
  font-family: "Lato";
  margin-right: auto;
  max-width: 1158px;
  padding-bottom: 60px;
}

.footer-logos {
  padding: 0px;
}

.footer-logos ul li {
  float: left;
}

.footer-second-paragraph {
  display: block;
  font-family: "Lato";
  clear: both;
  font-size: 14px;
  line-height: 19px;
  padding-top: 20px;
  color: #FFF;
}

.footer-logos ul li.footer-bar:after {
  content: "|";
  font-family: "Kanit-Thin";
  color: #FFF;
  font-size: 60px;
  padding-left: 20px;
  padding-right: 20px;
}

.footer-logos ul li.footer-bar {
  padding-top: 17px;
    /*padding-left: 50px;*/;
}

.footer-logos ul li.seclogo {
  padding-top: 30px;
}

.footer-ul-li-container {
  padding-top: 30px;
  clear: both;
}

.footer-ul-li-container ul.footer-ul-li li {
  float: left;
}

.footer-ul-li-container ul.footer-ul-li li a {
  color: #FFF;
  font-size: 14px;
  line-height: 22px;
  font-family: "Kanit-SemiBold";
    /*font-family: "Lato-Black";*/
  padding-bottom: 12px;
}

.footer-ul-li-container ul.footer-ul-li li:after {
  content: "";
  padding-left: 20px;
  padding-right: 20px;
}

img.privacy-logo {
  width: 19px;
  height: 10px;
  margin-left: 2px;
}

#footer-inner-container #footer_copyright {
  padding-top: 25px;
  padding-bottom: 108px;
}

#footer-inner-container .cmp-text {
  padding: 0;
}

#patient-home .az-footer-logo img {
  padding-right: 35px;
}

#footer-inner-container #footer_copyright ul li {
  float: left;
  color: #FFF;
  font-size: 14px;
  line-height: 17px;
  font-family: "Lato";
  padding-bottom: 15px;
}
  
  /* stay informed */
.cmp-dynamicform-v2 .cmp-dynamicform__generated-form .text-danger {
  padding-top: 5px;
  font-style: italic;
}

.icon-tick {
  padding-bottom: 20px;
}

.thankyou h2 {
  font-family: "Kanit-Bold";
  font-size: 40px;
  line-height: 45px;
  color: #00215F;
  padding-bottom: 15px;
}

.thankyou p {
  font-family: "Kanit";
  font-size: 18px;
  line-height: 20px;
  color: #151515;
}

.thankyou button {
  width: 188px;
  height: 34px;
  background: linear-gradient(to right, #5E4A83 0%, #353C83 50%, #3D5E83 100%) padding-box, linear-gradient(to right, #F599FC 0%, #556AFF 50%, #75F2FB 100%) border-box;
  border-radius: 50em;
  color: #FFF;
  border: 2px solid transparent;
  left: 10%;
  font-family: "Kanit";
  font-size: 16px;
  line-height: 26px;
  margin-top: 37px;
}

.thankyou button a {
  color: #FFF;
}

#attr-inform #attr-header-test {
  background: transparent;
   /* background: rgba(0, 18, 52, 0.9);*/;
}

.sticky #attr-header-test {
  max-width: 1310px;
  margin: 0px auto;
  background: rgba(0, 18, 52, 0.8) !important;
  backdrop-filter: blur(3px) !important;
  padding: 5px 75px 10px;
  border-radius: 0px 0px 30px 30px;
  z-index: 2;
  position: relative;
  top: 0px;
}

#attr-inform #attr-header-test .cmp-navigation__item {
  background-color: unset;
}

#attr-inform .bg-stay {
  background-image: url(/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop/stay-inform-container.png);
}

#attr-inform .cmp-dynamicform-v2 .cmp-dynamicform__generated-form .form-control:not(textarea) {
  border-radius: 5px;
  background-color: #FFF;
}

#attr-inform .main-menu {
  background: transparent;
}

#attr-inform .cmp-dynamicform-v2 .cmp-dynamicform__generated-form .cmp-dynamicform__form-group button span {
  position: relative;
  font-family: "Kanit";
  font-size: 16px;
  top: -9px;
}

#attr-inform .cmp-dynamicform__form-label-container {
  padding-top: 10px;
}

#attr-inform .cmp-dynamicform-v2 .cmp-dynamicform__generated-form .cmp-dynamicform__form-group button {
  width: 127px;
  height: 34px;
  background: linear-gradient(to right, #5E4A83 0%, #353C83 50%, #3D5E83 100%) padding-box, linear-gradient(to right, #F599FC 0%, #556AFF 50%, #75F2FB 100%) border-box;
  border-radius: 50em;
  color: #FFF;
  border: 2px solid transparent;
  left: 10%;
}

#attr-inform .staypic {
  position: relative;
  left: -10px;
}

#attr-inform .heading p {
  font-family: "Kanit-Bold";
  font-size: 40px;
  line-height: 45px;
  color: #FFF;
}

#attr-inform .sub-heading p {
  font-family: "Montserrat",sans-serif;
  font-size: 18px;
  line-height: 24px;
  color: #FFF;
  padding-right: 0;
  font-weight: 800;
}

#attr-inform .form-notes p {
  font-family: "Kanit-Light";
  font-size: 12px;
  line-height: 16px;
  color: #000;
  padding-left: 10px;
}

#attr-inform .azcl-columns__base {
  padding-top: 10%;
}

#attr-inform .azcl-container {
  max-width: 1160px;
  margin: 0px auto;
}

#attr-inform .azcl-column-par2 {
  background: transparent linear-gradient(112deg, #F599FC 0%, #7D76FE 18%, #556AFF 50%, #619EFD 87%, #75F2FB 100%) 0% 0% no-repeat padding-box;
  border-radius: 30px 30px 30px 0px;
  opacity: 1;
  width: 730px;
  height: 593px;
      /* padding: 35px 60px; */
  margin: auto;
  position: relative;
  margin-bottom: 20px;
}

#attr-inform #stay-container-thank .azcl-column-par2 {
  background: transparent linear-gradient(112deg, #F599FC 0%, #7D76FE 18%, #556AFF 50%, #619EFD 87%, #75F2FB 100%) 0% 0% no-repeat padding-box;
  border-radius: 30px 30px 30px 0px;
  opacity: 1;
  width: 730px;
  height: 365px;
      /* padding: 35px 60px; */
  margin: auto;
  position: relative;
}

#attr-inform .azcl-column-par2 #container-a119321110, #attr-inform .azcl-column-par2 #thanku-container {
  width: calc(100% - 4px);
  height: calc(100% - 4px);
  margin: 2px;
      /* background: #FFFFFF 0% 0% no-repeat padding-box;*/
  background: linear-gradient(to right, #FEFEFE 0%, #FCF6FE 18%, #EBF1FE 50%, #DFF5FE 87%, #E2FEFE 90%, #FEFEFE) padding-box, linear-gradient(to right, #F599FC 0%, #556AFF 50%, #75F2FB 100%) border-box;
  opacity: 1;
  padding: 35px;
  position: absolute;
  border-radius: 30px 30px 30px 0px;
}

#attr-inform #stay-container-thank {
  margin-bottom: 200px;
}

#attr-inform #container-cd6cd83e60 {
  background-image: url(/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop/attr-background.jpg);
  background-repeat: no-repeat;
  background-size: 100% 75%;
}

#attr-inform .cmp-dynamicform__form-label-container {
  padding-bottom: 5px;
}

#attr-inform #field-group-64981db93ef17000026c06d2 {
  display: inline-grid;
  max-width: 259px;
  width: 100%;
}

#attr-inform #field-group-64981db93ef17000026c06d3 {
  display: inline-grid;
  max-width: 326px;
  width: 100%;
  padding-left: 16px;
}

#attr-inform #field-group-64981db93ef17000026c06d4 {
  display: grid;
  max-width: 590px;
}

#attr-inform #field-group-64981db93ef17000026c06d5 {
  display: grid;
  max-width: 590px;
}

#attr-inform #field-group-64981db93ef17000026c06d6 {
  display: grid;
  max-width: 590px;
}

#attr-inform .cmp-dynamicform__clear-btn {
  display: none;
}
  
  /* form css ends */
@media screen and (min-width: 992px) {
      
  a#MODVideo {
    scroll-margin-top: 80px;
  }

  .modal-box {
      /*background-image: url(/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop/container-poup.png) !important;*/
    background-repeat: no-repeat;
    background-size: 100% 100% !important;
    width: 511px;
    position: relative;
    flex-shrink: 0;
    margin-top: auto;
    margin-bottom: auto;
    border-radius: 30px 30px 30px 0px;
    background-color: #e2fcfd;
/*background-color: #FFF;*/
    background-size: cover;
    opacity: 1;
    cursor: auto;
    border: 1px solid #E34AEE;
      /*border: 3px solid transparent;*/
    will-change: transform, opacity;
      /*background: linear-gradient(to right, #FFF 0%, #FFF 50%, #FFF 100%) padding-box, linear-gradient(to right, #F599FC 0%, #556AFF 50%, #75F2FB 100%) border-box;*/
    cursor: auto;
    will-change: transform, opacity;
  }

  .mobile-only {
    display: none;
  }

  #attr-home .banner-subheading-home {
    margin-bottom: 5px !important;
  }

  #attr-home .heading-subheading {
    position: relative;
    bottom: -10px;
  }

  #attr-home .footer-container {
    margin-top: 100px;
  }

  #attr-home .bottom-section-home {
    top: 87% !important;
  }

  #attr-home .card-one{
    height: auto !important;
    max-height: 100% !important;
  }

  #attr-home .card-two {
    height: auto !important;
    max-height: 100% !important;
  }
    
    /*.mobile-only img {*/
    /*  width: 100%;*/
    /*}*/
  
  #attr-home .card-one-info {
    margin-bottom: 0px !important;
  }

  #attr-home .card-two-info {
    margin-bottom: 0px !important;
  }
}

@media screen and (min-width: 1441px) {
  #attr-inform #container-cd6cd83e60 {
    background-image: url(/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop/attr-background.jpg);
    background-repeat: no-repeat;
    background-size: 100% 75%;
  }
}

@media screen and (min-width: 612px) and (max-width: 991px) {
    
  
  #treatment-approaches .treatment-diagnosis-banner {
    background-position: right !important;
  }
}

@media screen and (max-width: 991px) {
      
  .mobile-only img {
    width: 100%;
  }

  .logo a {
    border-bottom: unset !important;
  }

  #attr-inform .staypic {
    width: 100%;
  }

  .footer-ul-li-container ul.footer-ul-li li:after {
    padding-left: 0px;
    padding-right: 0px;
  }
  
      /* stay informed*/
     
  #attr-inform .azcl-columns__base {
    padding-top: 30px;
  }

  #attr-inform #container-cd6cd83e60 {
    background-size: cover;
  }

  #attr-inform .main-menu {
    background: #001234;
  }

  #attr-inform .left-col-stay {
    padding-left: 16px;
  }

  #attr-inform .azcl-container {
    width: auto;
    margin: 0px auto;
  }

  #attr-inform .cmp-dynamicform-v2 .cmp-dynamicform__generated-form .form-control:not(textarea) {
    width: 274px;
  }

  #attr-inform #field-group-64981db93ef17000026c06d2 {
    display: grid;
  }

  #attr-inform .azcl-column-par2 {
    width: 320px;
    height: 800px;
    margin-top: 35px;
    margin-right: 15px;
  }

  #attr-inform #stay-container-thank .azcl-column-par2 {
    width: 300px;
    height: 376px;
  }

  #attr-inform #field-group-64981db93ef17000026c06d3 {
    padding-left: 0px;
    max-width: 326px;
  }
  
      /* ends stay informed */
  .footer-logos {
    text-align: center;
  }

  .footer-logos ul li {
    display: inline-flex;
    float: none;
  }

  .footer-line {
    display: block;
  }

  .footer-second-paragraph {
    text-align: center;
    padding-top: 0px;
    font-size: 12px;
  }

  .footer-logos ul li.footer-bar:after {
    content: "|";
    color: #FFF;
    padding-left: 10px;
    padding-right: 10px;
  }

  .footer-container {
    margin-left: 15px;
    margin-right: 15px;
    position: relative;
    bottom: 17px;
  }

  .footer-ul-li-container ul.footer-ul-li li {
    float: none;
    text-align: center;
    padding-bottom: 10px;
  }

  .top-menu ul.us-healthcare li {
    margin-left: 0px;
    line-height: 120%;
    font-size: 10px;
  }

  .language-wrap {
    margin-left: 15px !important;
  }

  .top-menu ul.us-healthcare {
    justify-content: space-between;
    width: auto;
    margin-left: 15px;
    margin-right: 15px;
  }

  .mobile-only .open-menu, .mobile-only .close-menu {
    display: block;
  }

  #attr-header-test {
    height: 50px;
    padding: 0px 15px;
  }

  .main-menu {
    margin: 0px 15px;
  }

  #header .container-inner {
    display: block;
    width: 100%;
  }

  .mobile-only .top-menu ul.medical-info {
    width: 110%;
    display: block;
  }

  .mobile-only .top-menu ul.medical-info li {
    margin-left: 20px;
    margin-top: 20px;
    margin-bottom: 20px;
  }

  #header .mobile-only .main-menu > .container-inner {
    padding-left: 0;
    padding-right: 0;
  }

  #header .mobile-only .main-menu > .container-inner {
    padding-left: 0;
    padding-right: 0;
  }

  .bg-stay {
    width: 150px;
    height: 29px;
  }

  .top-menu ul li a {
    padding: 0px;
    font-size: 14px;
    font-family: "Kanit-SemiBold";
  }
  
      /* footer */
  #footer-inner-container #footer_copyright ul li {
    line-height: 14px;
  }

  .footer-first-reference, .footer-second-paragraph-1 {
    font-size: 12px;
    line-height: 18px;
  }
}

@media screen and (max-width: 1200px) {
  #header .container-inner {
    max-width: 100%;
    padding-left: 15px;
    padding-right: 15px;
  }
}
  
  /*Home CSS STARTS*/
#attr-home .hero-banner-home-main {
      /*background-image: url(/content/dam/intelligentcontent/unbranded/attr-dsa/en/desktop/test-background-homepage-complete.jpg);
  background-repeat: no-repeat;
  background-size: cover;*/
      /* height: 935px; */
  box-shadow: rgba(0, 0, 0, 0.90) 0px -50px 36px -15px inset;
  min-height: 57vw;
}

#attr-home #container-cd6cd83e60 {
  background-image: url(/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop/ASTR_A088960_RGB.jpg);
  background-repeat: no-repeat;
  min-height: 832px;
  background-position: -504px 25px;
  background-size: 184%;
}

#attr-home .banner-heading-home-bg {
      /*background-image: url(/content/dam/intelligentcontent/unbranded/attr-dsa/en/desktop/home-bg-second.png);*/
  background-repeat: no-repeat;
}

#attr-home .hero-banner-text-home {
  width: 25%;
  position: absolute;
  left: 58%;
  top: 8%;
      /*background-image: url(/content/dam/intelligentcontent/unbranded/attr-dsa/en/desktop/home-bg-second.png);
  background-repeat: no-repeat;
  height: 345px;*/
  ;
}

#attr-home .banner-subheading-home {
  font-family: "Kanit-Medium";
/*font-family: 'Kanit-SemiBold';*/
  font-size: 18px;
  color: #FFFFFF;
  margin-bottom: 25px;
  width: 85%;
  line-height: 20px;
}

#attr-home .pink-text-heading {
  color: #FF53FF;
 /* line-height: 60px; */
}

#attr-home .heading-subheading {
  font-size: 29px;
/*font-size: 34px;*/
  line-height: 32px;
  display: block;
  font-family: "Kanit-SemiBold";
  max-width: 80%;
}

#attr-home h1 {
  margin-bottom: 40px;
  font-size: 53px;
  line-height: 42px;
  margin-top: 24px;
}

#attr-home .banner-info-text-home {
  font-family: "Kanit-Medium";
  font-size: 18px;
  color: #FFFFFF;
  margin-bottom: 30px;
  line-height: 22px;
}
  
  /*#attr-home .bottom-section-home {
  background-image: url(/content/dam/intelligentcontent/unbranded/attr-dsa/en/desktop/home-bg-second.png);
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 500px;
  
  
  }*/
#attr-home .bottom-section-items {
  display: flex;
  width: 100%;
  column-gap: 15px;
}

/* 2. UPDATED: Updated border color, corner rounding, and fluid height */
#attr-home .card-one,
#attr-home .card-two {
  display: flex !important;
  align-items: center;            /* Centers the icon and text vertically */
  height: auto !important;         /* Dynamic height to accommodate 16px/18px font */
  min-height: 149px !important;    
  max-height: none !important;     
  position: relative;
  box-sizing: border-box;
  overflow: visible !important;   /* Allows button to hang out bottom */
  padding-bottom: 40px !important; /* Safety space for text and button placement */
  
  /* Border changes */
  border: 1px solid #FFFFFF !important;  /* Changed from pink to white */
  border-radius: 30px 30px 30px 0px !important; /* Top-L, Top-R, Bottom-R are 30px; Bottom-L is 0px */
}

/* 1. Ensure the text containers inside the cards can take up more horizontal space */

#attr-home .card-one p,

#attr-home .card-two p,

#attr-home .card-one .text-container, /* Update if you use a specific class for the text */

#attr-home .card-two .text-container {

  max-width: 100% !important;

  width: 100% !important;

  font-size: 18px; /* Adjust slightly if needed to match the mockup line breaks */

  line-height: 1.4;

}



/* 2. Lock the cards to their design heights so they match the mockup */

#attr-home .card-one,

#attr-home .card-two {

  height: 149px !important; /* Matches the exact '149' height from your blueprint grid */

  min-height: 149px !important;

  max-height: 149px !important;

  position: relative;

  box-sizing: border-box;

  overflow: visible !important; /* CRITICAL: Allows the button to hang out the bottom */

  padding-bottom: 0px !important; /* Prevents padding from pushing things around */

}



/* 3. Position the buttons to hang perfectly off the bottom edge */

#attr-home .card-one a, 

#attr-home .card-two a,

#attr-home .card-one button,

#attr-home .card-two button {

  position: absolute !important;

  bottom: -21px !important; /* Pulls exactly half the button below the card border */

  left: 50% !important;

  transform: translateX(-50%) !important; /* Perfectly centers the button horizontally */

  top: auto !important;

  margin: 0 !important;

  white-space: nowrap; /* Prevents button text from breaking into two lines */

} 



#attr-home .bottom-section-container {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 1135px;
  margin-right: auto;
  margin-left: auto;
}

#attr-home .bottom-section-home {
  position: absolute;
  top: 80%;
  z-index: 1;
  flex-direction: column;
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  justify-items: center;
  width: -webkit-fill-available;
}

#attr-home .card-one-icon {
  height: 129px;
  margin: 0px 18px 0px 0;
}

#attr-home .card-two-icon {
  height: 65px;
  margin: 10px 30px 0px 0px;
}

#attr-home .card-one-title {
  font-family: "Kanit-SemiBold";
  font-size: 18px !important;
  color: #151515;
  margin-top: 0;
  line-height: 20px;
}

#attr-home .card-two-title {
  font-family: "Kanit-SemiBold";
  font-size: 18px !important;
  color: #151515;
  margin-top: 0;
  line-height: 22px;
    /*font-family: "Kanit-Bold";
    font-size: 20px !important;*/;
}

#attr-home .card-one-info {
  font-family: "Kanit-Regular";
  font-size: 18px;
  color: #151515;
  margin-top: 10px;
  margin-bottom: 17px;
  line-height: 20px;
  padding-right: 10px;
    /*font-size: 16px;*/;
}

#attr-home .card-two-info {
  font-family: "Kanit-Regular";
  font-size: 18px;
  color: #151515;
  margin-top: 10px;
  margin-bottom: 17px;
  width: 90%;
  line-height: 20px;
    /*font-size: 16px;*/;
}

#text-13cafc36fe {
  padding: 0;
}

#attr-home #footer-style {
  background: #000;
  padding-top: 0px !important;
}
  
  /*#attr-home .big-picture-cta {
  text-align: center;
  padding-bottom: 15px;
  position: relative;
  width: 60%;
  border-radius: 25px;
  max-width: 42%;
  z-index: 9999;
  
  }*/
  /*.cta-banner-home::before {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  right: 0;
  bottom: 0;
  border-radius: 25px;
  background-color: #FFFFFF;
  z-index: -1;
  width: 97%;
  height: 70%;
  opacity: 85%;
  }*/
#attr-home .cta-banner-home {
      /*border-radius: 25px;
  background: transparent linear-gradient(99deg, #F599FC 0%, #556AFF 50%, #75F2FB 100%) 0% 0% no-repeat padding-box;
  z-index: 1;*/
      /* width: 65%; */
  /* height: 37px;  */
  position: relative;
      /* background: linear-gradient(to right, #FFFFFF 0%, #FCE0FD 20%, #E5FFFF 50%) padding-box, linear-gradient(to right, #F599FC 0%, #556AFF 50%, #75F2FB 100%) border-box; */
  border-radius: 50em;
      /* border: 2px solid transparent; */
  display: flex;
  justify-content: center;
  align-items: center;
  background: #656EFA;
  width: 251px;
}
  
  /*#attr-home .main-menu {
    background: transparent;
  }*/
  
#attr-home .big-picture-cta {
  text-align: center;
  position: relative;
  align-items: center;
  display: flex;
  align-content: center;
  justify-content: center;
    /*margin-top: 13px;*/
    /* color: #00215F; */
  font-family: "Kanit-SemiBold";
  font-size: 16px;
  color: #fff;
  text-transform: uppercase;
}

#attr-home .cta-bottom-home {
    /* width: 60%; */
  height: 38px;
  position: relative;
    /* background: linear-gradient(to right, #5E4A83 0%, #353C83 50%, #3D5E83 100%) padding-box, linear-gradient(to right, #F599FC 0%, #556AFF 50%, #75F2FB 100%) border-box; */
  border-radius: 50em;
  border: 3px solid transparent;
  left: 10%;
  width: 274px;
  background: #E34AEE;
}

#attr-home .cta-bottom-home.home-cta-2 {
  width: 350px;
}

#attr-home .middle-bottom-cta {
  text-align: center;
  position: relative;
  align-items: center;
  display: flex;
  align-content: center;
  justify-content: center;
  margin-top: 3px;
  color: #FFFFFF;
  font-family: "Kanit-SemiBold";
  font-size: 16px;
  padding: 6px 15px 8px;
  text-transform: uppercase;
}

#attr-home .reference-footnote {
    position: relative;
    color: #FFFFFF;
    font-family: "Kanit-Light";
    margin-right: auto;
    margin-left: auto;
    max-width: 1158px;
    margin-top: 149px;
    margin-bottom: 37px;
    line-height: 19px;
    width: 100%;
    padding-left: 15px;
    padding-right: 15px;
}


#attr-home .bold-reference {
  font-family: "Kanit-SemiBold";
}

#attr-home .italic-reference {
  font-family: "Kanit-LightItalic";
}

#attr-home #attr-header-test {
  background: transparent;
}

#attr-home #attr-header-test .cmp-navigation__item {
  background-color: transparent;
}

#attr-home .footnote-style-one {
  font-family: "Kanit-Regular";
  font-size: 16px;
}

#attr-home .hero-banner-home-main .mobile-image {
  display: none;
}
#attr-home{
    background:#000000;
}
  
  
  /*Home media query starts*/
@media only screen and (min-width: 1024px) and (max-width: 1253px) {
  #attr-home .hero-banner-home-main {
    min-height: 826px;
    background-size:auto;
  }
  /*
  #attr-home .footer-container {
      
      position: relative;
      left: 55px;
    
  }
  */
  #attr-home #container-cd6cd83e60 {
    background-position: -419px 0px;
    background-size: 166%;
  }

  #attr-home .card-one-icon {
    height: 80px;
    margin: 24px 20px 26px 20px;
  }

  #attr-home .card-one-title {
    font-size: 18px;
    margin-top: 5%;
  }

  #attr-home .card-one-info {
    font-size: 14px;
    margin-bottom: 0px !important;
    padding-right: 15px;
  }

  #attr-home .card-two-icon {
    height: 55px;
    margin: 24px 7px 19px 13px;
  }

  #attr-home .card-two-title {
    font-size: 18px;
    margin-top: 5%;
    letter-spacing: -0.5px;
    padding-right: 0px;
  }

  #attr-home .card-two-info {
    font-size: 14px;
    margin-bottom: 40px !important;
    padding-right: 15px;
  }

  #attr-home .card-two-info {
    margin-top: 8px;
  }

  #attr-home .reference-footnote,#attr-home .footer-container {
    margin-left: 65px;
    margin-right: 45px;
    margin-top: 0;
  }

  #attr-home .cta-bottom-home {
    width: 65%;
  }

  #attr-home .bottom-section-items {
    width: 90%;
  }

  #attr-home .card-one .cta-bottom-home {
    margin-top: 15px;
  }
}

@media only screen and (max-width: 991px) {
  #attr-inform .heading p {
    font-size: 30px;
  }

  .footer-logos ul li.footer-bar {
    padding-left: 50px;
  }

  #attr-home .hero-banner-home-main {
    background: url(/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop/Hero-mask.png);
    background-size: 100% 100%;
    background-position: center;
    height: fit-content;
    min-height: fit-content;
    background: none;
    /*height: 2000px;*/
  }
  
  /*#attr-home .banner-heading-home-bg {
      background-image: url(/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop/Hero-mask.png);
      background-repeat: no-repeat;
      background-size: 100% 100%;
      min-height: 786px;
      height: 786px;
    }*/
    #attr-home .banner-heading-home-bg{background: #000000;}
    #attr-home .hero-banner-home-main .mobile-image {
        display: block;
        width: 100%;
    }

  #attr-home #container-cd6cd83e60 {
    background-image: url(/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/mobile/hero-mobile.png);
    background-color: black;
    background-size: 988px;
    max-width: 100%;
    max-height: 100%;
      /*background-position: center;*/
    background-position: 100%;
    /*  box-shadow: rgba(0, 0, 0, 0.90) 0px -50px 36px -15px inset;*/
    height: 1126px;
  }

  /*#attr-home .hero-banner-text-home {
    width: 100%;
    position: relative;
    text-align: center;
    left: 0%;
    top: 1049px;
    justify-content: center;
    display: flex;
    padding-bottom: 124px;
    background-color: black;
  }*/

  /*#attr-home .hero-banner-text-home {
    width: 100%;
    position: relative;
    text-align: center;
    left: 0%;
    top: 22vh;
    justify-content: center;
    display: flex;
    padding-bottom: 0;
    background-color: transparent;
  }*/
  
    #attr-home .hero-banner-text-home {
        width: 100%;
        position: relative;
        text-align: center;
        left: 0%;
        top: -6vh;
        justify-content: center;
        display: flex;
        padding-bottom: 0;
        background-color: #000000;
    }
  
  #attr-home .hero-banner-text {
    width: 90%;
    /*width: 50%;*/
  }

  #attr-home .cta-banner-home {
    /*width: 60%;
    left: 20%;*/
    width: 205px;
    left: 0;
    margin:52px auto 71px;
    /*margin-top: 33px;*/
      /*margin-bottom: 20px;*/
    /*margin-bottom: 45px;*/
  }

  #attr-home .bottom-section-home {
    position: relative;
    /*top: 48%;*/
    top: 0;
    background-color: black;
    padding-bottom: 20px;
  }

  #attr-home .bottom-section-items {
    width: 80%;
    flex-direction: column;
    padding-right: 30px;
    padding-left: 30px;
    row-gap: 30px;
  }

  #attr-home .card-one {
    width: 100%;
  }

  #attr-home .card-two {
    width: 100%;
  }

  #attr-home .card-two-title {
    font-size: 20px;
    margin-top: 0%;/*margin-top: 7%;*/
  }

  #attr-home .card-one-title {
    font-size: 20px;
    /*margin-top: 7%;*/
  }

  #attr-home .card-two-info {
    font-size: 16px;
    margin-bottom: 24px !important;
  }

  #attr-home .card-one-info {
    font-size: 16px;
    margin-bottom: 41px !important;
    padding-right: 0px;
    margin-top: 10px;
  }

  #attr-home .middle-bottom-cta {
    margin-top: 3px;
    font-size: 14px;
  }

  #attr-home .main-menu {
    background: #001234;
  }
  
    /*#attr-home #attr-header-test {*/
    /*  background: #000B20;*/
    /*}*/
  
      /*
  
  #attr-home #attr-header-test .cmp-navigation__item {
  background-color: #000000E5;
  }
  */
  #attr-home .bottom-section-container {
    /*margin-right: 10%;
    margin-left: 10%;*/
    position: relative;
    bottom: 40px;
  }

  #attr-home .banner-subheading-home {
    margin-left: 8%;
    margin-bottom: 6px;
      /*padding-top: 10px;*/
      /*margin-top: -30px;*/
    padding-top: 0px;
    margin-top: 0px;
  }

  .cta-bottom-home.home-cta-1 {
    top: -8px;
  }

  .cta-bottom-home.home-cta-2 {
    top: -2px;
  }

  #attr-home .cta-bottom-home {
    width: 75%;
    left: 0;
  }

  #attr-home .reference-footnote {
    max-width: 462px;
    margin-left: auto;
    margin-right: auto;
    padding-top: 18px;
    margin-top: 0;
  }
}

@media only screen and (max-width: 480px) {
  #attr-home .bottom-section-items {
    padding-right: 18px;
    padding-left: 18px;
    width: 100%;
  }

  #attr-home .card-one-icon {
    height: 44px;
    margin: 24px 24px 26px 24px;
  }

  #attr-home .card-one-info {
    margin-bottom: 8px;
    margin-top: 10px;
    font-size: 12px;
  }

  #attr-home .card-two-title {
    font-size: 14px;
    letter-spacing: -0.5px;
  }

  #attr-home .card-two-icon {
    height: 33px;
    margin: 23px 12px 26px 12px;
  }

  #attr-home .card-two-info {
    font-size: 12px;
    letter-spacing: -0.5px;
    margin-bottom: 10px;
    margin-top: 10px;
  }

  #attr-home .card-one-title {
    font-size: 14px;
  }

  #attr-home .bottom-section-container {
    width: 90%;
  }
}

@media only screen and (min-width: 1260px) and (max-width: 1442px) {
  #attr-home #container-cd6cd83e60 {
    background-position: -711px -190px;
  }

  #attr-home .card-two-info {
    font-size: 18px;
    margin-bottom: 24px;
    ;
  }

  #attr-home .card-one-info {
    font-size: 18px;
    margin-top: 10px;
    margin-bottom: 24px;
  }
}

@media only screen and (min-width: 1200px) and (max-width: 1360px) {
  #attr-home .banner-subheading-home {
    width: 100%;
  }

  .hero-banner-text-home {
    top: 18% !important;
    width: 40% !important;
    left: 55% !important;
  }
}

@media only screen and (min-width: 1256px) and (max-width: 1351px) {
  #attr-home #container-cd6cd83e60 {
    background-size: 140vw;
    background-position: -249px 0px;
  }
}

@media only screen and (min-width: 1400px) and (max-width: 1650px) {
      
  .hero-banner-text-home {
    top: 8% !important;
  }

  .cta-bottom-home.home-cta-1 {
    top: 14px;
  }

  #attr-home #container-cd6cd83e60 {
    background-position: -178px -128px;
    background-size: 130vw;
    background-color: black;
  }
  
    /*#attr-home .hero-banner-home-main {*/
          /*min-height: 75vh;*/
    /*  min-height: 92vh;*/
    /*}*/
  
  #attr-home .banner-info-text-home {
    width: 97%;
  }

  #attr-home #footer-style {
    background: #000;
    padding-top: 10% !important;
  }

  #attr-home .banner-subheading-home {
    font-size: 18px;
    width: 91%;
    line-height: 20px;
  }

  #attr-home .hero-banner-home-main {
          /* min-height: 75vh; */
          /* min-height: 85vh !important; */;
  }

  #attr-home .bottom-section-home {
    position: absolute;
    top: 90% !important;
  }
}

@media only screen and (min-width: 1654px) and (max-width: 2480px) {
  #attr-home #container-cd6cd83e60 {
    background-position: -192px -127px;
    background-size: 120vw;
    background-color: black;
  }
  
    /*#attr-home .hero-banner-home-main {
      min-height: 45vw;
    }*/
  .hero-banner-text-home {
    top: 8em !important;
  }

  #attr-home .middle-bottom-cta {
    padding: 6px 33px 6px 27px;
  }
}
  /* Samsung Tab S8 (Landscape & Portrait) ends */
@media screen and (orientation: portrait) and (min-device-width: 750px) and (max-device-width: 760px) {
    /*#attr-home .bottom-section-home .bottom-section-items .cta-bottom-home {
      top: -35px;
    }*/
  
  body#page-1a38cc0b2e .img-align.hear-beat {
    width: auto;
  }

  #about-attr-page .treatment-footer-main-container {
    height: 330px;
  }

  #about-attr-page .about-attr-reference p {
    padding-top: 20px;
  }
}

@media screen and (orientation: landscape) and (min-device-width: 1030px) and (max-device-width: 1040px) {
  #page-1a38cc0b2e div#container-f5476fa003 {
    width: 1037px;
  }

  #page-1a38cc0b2e div#attr-header-test {
    padding-left: 23px;
    padding-right: 23px;
  }

  #page-1a38cc0b2e .attrsymptoms-block {
    width: auto;
  }

  #page-1a38cc0b2e p.title-blue {
    width: auto;
  }

  #page-1a38cc0b2e .banner-img {
    background-size: cover;
    margin-top: 10px;
    min-height: 620px;
  }

  #page-1a38cc0b2e .banner-img .banner-block {
    padding-left: 20px;
    max-width: 1037px;
    width: auto;
    margin: 0;
  }

  #page-1a38cc0b2e .attrsymptoms-col {
    width: 255px;
  }

  #page-1a38cc0b2e .footer-strip p {
    padding-left: 20px;
  }

  div#footer-style {
    padding-left: 20px !important;
  }
}
  /* Samsung Tab S8 (Landscape & Portrait) ends*/
  
@media only screen and (min-width: 1450px) and (max-width: 2580px) {
  #attr-home .banner-subheading-home {
    max-width: 392px;
  }

  #attr-home .banner-info-text-home {
    max-width: 404px;
    margin-bottom: 4%;
  }

  #attr-home .cta-banner-home {
    max-width: 251px;
  }
}

@media only screen and (min-width: 1444px) {
  #attr-home .card-two-text {
    width: 80%;
  }

  #attr-home .card-one-text {
    width: 80%;
  }
}

@media only screen and (min-width: 730px) and (max-width: 837px) {
  #attr-home .card-one-info {
    font-size: 16px;
    margin-top: 9px;
    margin-bottom: 22px;
  }

  #attr-home .card-two-title {
    padding-right: 100px;
    margin-top: 4%;
    font-size: clamp(1.125rem, 0.5391rem + 1.5625vw, 1.25rem);
  }

  #attr-home .card-two-info {
    font-size: 16px;
    padding-right: 10px;
    margin-top: 10px;
    margin-bottom: 21px;
  }

  .cta-bottom-home.home-cta-1 {
    top: -25px;
  }
}

@media only screen and (min-width: 482px) and (max-width: 728px) {
  #attr-home .card-one-info {
    /*font-size: clamp(0.6875rem, -0.7773rem + 3.9063vw, 1rem);*/
    margin-bottom: 4%;
  }

  #attr-home .card-two-info {
    /*font-size: clamp(0.6875rem, -0.7773rem + 3.9063vw, 1rem);*/
    margin-bottom: 2%;
  }

  #attr-home .card-one-title {
    margin-top: 4%;
    font-size: clamp(0.875rem, -0.8828rem + 4.6875vw, 1.25rem);
  }

  #attr-home .card-two-title {
    margin-top: 4%;
    font-size: clamp(0.875rem, -0.8828rem + 4.6875vw, 1.25rem);
    padding-right: 4%;
  }

  #attr-home .bottom-section-items {
    width: 100%;
  }
  #attr-home .card-one{
        padding: 15px 14px;
  }
  #attr-home .card-two{
      padding: 15px 14px;
  }
  #attr-home .card-two-title{
        font-family: "Kanit-Bold";
        font-size: 23px !important;
        color: #00215F;
        line-height: 24px;
    }
}

@media only screen and (min-width: 320px) and (max-width: 479px) {
  #attr-home .bottom-section-container {
    width: 100%;
    margin-right: 0;
    margin-left: 0;
  }

  #attr-home #container-3f04199104 {
    padding-top: 76px;
  }

  #attr-home .bottom-section-home {
    z-index: 1;
    background-color: black;
    top: 0;
    padding-top: 3em;
    padding-bottom: 20px;
    position: relative;
    /*top: 25%;
    padding-top: 6em;*/
  }

  #attr-home .reference-footnote {
    margin-right: 25px;
    margin-left: 25px;
    margin-top: 0px;
    font-size: 14px;
    line-height: 19px;
    padding-bottom: 20px;
    padding-top: 0px;
  }

  #attr-home #footer-style {
    background: #000;
    padding-top: 120px !important;
  }

  #attr-home .banner-subheading-home {
    font-size: 18px;
    margin-right: 22px;
    margin-left: 27px;
    line-height: 19px;
    margin-top: -40px;
  }

  #attr-home .banner-info-text-home {
    font-size: 16px;
    padding-right: 20px;
    padding-left: 20px;
    font-family: "Kanit-Regular";
    line-height: 18px;
  }

  #attr-home .big-picture-cta {
    font-size: 16px;
  }

  /*#attr-home .cta-banner-home {
    width: 50%;
    left: 25%;
  }*/

  #attr-home .card-one-icon {
    /*height: 86px;
    width: 18%;*/
    margin: 24px 14px 0px 18px;
    height: 129px;
    width: 57px;
  }

  #attr-home .card-one-title {
    font-size: 20px;
    width: 100%;
    margin-top: 0%;
    padding-top: 24px;
    padding-bottom: 0px;
    /*padding-bottom: 12px;*/;
  }

  #attr-home .card-one-info {
    margin-bottom: 10px;
    margin-top: 4px;
    font-size: 16px;
    padding-right: 0px;
    line-height: 18px;
    padding-bottom: 0px;
  }

  #attr-home .bottom-section-items {
    row-gap: 20px;
/*row-gap: 45px;*/;
  }

  #attr-home .card-two-icon {
    /*height: 38px;*/
    height: 79px;
    width: 79px;
    margin-top: 28px;
  }

  #attr-home .card-two-title {
    font-size: 20px;
    letter-spacing: 0px;
    padding-right: 0px;
/*padding-right: 35px;*/
    margin-top: 0%;
    padding-top: 24px;
    padding-bottom: 0px;
/*padding-bottom: 10px;*/;
  }

  #attr-home .card-two-info {
    font-size: 16px;
    letter-spacing: 0px;
    margin-bottom: 13px;
    line-height: 18px;
    padding-bottom: 6px;
    margin-top: 10px;
  }

  #attr-home #container-cd6cd83e60 {
    /*box-shadow: rgba(0, 0, 0, 0.90) 0px -50px 36px -15px inset;*/
    height: 430px;
    min-height: 0;
    /*background-size: 410px;*/
    /*background-position: -29px 15px;*/
    /*background-position: -30px -20px;*/
    background-size: 100%;
    background-position: 100%;
  }

  .hero-banner-text {
    padding-bottom: 30px;
    height: 830px;
  }

  #attr-home .hero-banner-home-main {
    height: 100%;
  }

  #attr-home #footer-style {
    background: #000;
    padding-top: 0px !important;
  }

  #attr-home .hero-banner-text {
    width: 100%;
    /*margin-top: 27px;*/
    /*margin-top: 40px;*/
    /*background-color: #000;*/
    /*height: 890px;*/
    /*margin-bottom: 45px;*/
    margin: auto;
  }

  #attr-home .hero-banner-text-home {
    padding-bottom: 0px;
    top: 0;
    /*top: 422px;*/
  }

  #attr-home .cta-bottom-home {
    width: 274px;
    /*width: 74%;*/
    left: -9vw;
    height: 38px;
    border: 2px solid transparent;
  }

  .cta-bottom-home.home-cta-2 {
    top: 16px;
  }

  #attr-home .cta-bottom-home.home-cta-2 {
    /*width: 312px !important;*/
  }

  #attr-home .middle-bottom-cta {
    margin-top: 0px;
    padding: 10px 15px 8px !important;
    /* padding-right: 19px; */
    /* padding-left: 20px; */;
  }

  #attr-home h1 {
    font-size: 53px;
    margin-bottom: 20px;
  }

  #attr-home .heading-subheading {
    font-size: 29px;
    width: 75%;
    position: relative;
    margin: auto;
  }

  #attr-home .card-one {
    height: 218px;
    max-height: 218px;
    border: 2px solid transparent;
  }

  #attr-home .card-two {
    height: 218px;
    max-height: 218px;
    border: 2px solid transparent;
  }

  #attr-home .hero-banner-text .suptxt {
    font-size: 10px;
  }

  #attr-home .card-one-info .suptxt {
    font-size: 10px;
  }

  #attr-home .card-two-title .suptxt {
    font-size: 12px;
  }
}

@media only screen and (min-width: 320px) and (max-width: 340px) {
  .bg-stay {
    width: 120px;
  }
}

@media only screen and (min-width: 1700px) and (max-width: 1980px) {
  #attr-home .bottom-section-home {
    width: 100%;
  }

  #attr-home .bottom-section-items {
      /*width: 70%;*/;
  }
}

@media only screen and (min-width: 2488px) and (max-width: 2650px) {
  #attr-home .hero-banner-home-main {
    min-height: 1186px;
  }

  #attr-home #container-cd6cd83e60 {
    min-height: 0px;
    background-position: 50% -50%;
    max-width: 100%;
    max-height: 100%;
    background-size: 100%;
  }

  #attr-home .hero-banner-text-home {
    left: 54%;
    /*  top: 25px !important;*/;
  }
  
      /*#attr-home .banner-subheading-home {
  font-size: 40px;
  width: 95%;
  }
  
  #attr-home h1 {
  margin-bottom: 25px;
  font-size: 120px;
  }
  
  #attr-home .heading-subheading {
  font-size: 68px;
  }
  
  #attr-home .banner-info-text-home {
  font-size: 42px;
  width: 90%;
  margin-bottom: 45px;
  }
  
  #attr-home .cta-banner-home {
  height: 78px;
  }
  
  #attr-home .big-picture-cta {
  margin-top: 16px;
  font-size: 36px;
  }*/
  #attr-home .bottom-section-home {
    width: 100%;
  }

  #attr-home .card-one {
    width: 100%;
    height: 180px;
  }

  #attr-home .card-two {
    width: 100%;
    height: 180px;
  }
  
      /*#attr-home .card-one-icon {
  height: 45%;
  margin: 32px 41px 26px 39px;
  }
  
  #attr-home .card-one-title {
  font-size: 36px;
  margin-top: 5%;
  }*/
  #attr-home .card-one-info {
          /*font-size: 18px;*/
          /*padding-right: 188px;*/
    margin-bottom: 34px;
  }
  
      /*#attr-home .cta-bottom-home {
  width: 55%;
  height: 74px;
  }
  
  #attr-home .middle-bottom-cta {
  margin-top: 14px;
  font-size: 32px;
  }
  
  #attr-home .card-two-title {
  font-size: 36px;
  margin-top: 5%;
  }*/
  #attr-home .card-two-info {
          /*font-size: 32px;
  padding-right: 108px;*/
    margin-bottom: 34px;
  }
  
      /*#attr-home .card-two-icon {
  height: 82px;
  margin: 36px 21px 53px 32px;
  }
  
  #attr-home .reference-footnote {
  margin-right: 138px;
  margin-left: 265px;
  margin-top: 63px;
  font-size: 26px;
  };*/
}

@media only screen and (min-width: 604px) and (max-width: 867px) {
  #attr-home .card-one, #attr-home .card-two {
    width: 100%;
    height: 195px;
    max-height: 200px;
  }

  #attr-home .card-one-info {
    font-size: 18px !important;
    margin-top: 10px !important;
    margin-bottom: 50px !important;
    line-height: 20px;
          /* padding-right: 71px; */
    padding-right: 18px;
  }

  /*#attr-home .card-one-title {
    font-family: "Kanit-Bold";
    font-size: 23px !important;
    color: #00215F;
    margin-top: 6%;
    line-height: 24px;
  }*/

  #attr-home .card-two-info {
    font-size: 18px !important;
    padding-right: 0px;
    margin-top: 10px !important;
    margin-bottom: 45px !important;
    line-height: 20px;
      /*padding-right: 25px;
      margin-top: 23px !important;*/;
  }
}

@media only screen and (min-width: 480px) and (max-width: 630px) {
  #attr-home #container-cd6cd83e60 {
    background-size: 928px;
    background-position: 80% -10%;
    max-height: 985px;
  }

  /*#attr-home .hero-banner-text-home {
    top: 905px;
    padding-bottom: 50px;
  }*/

  #attr-home .bottom-section-home {
    top: 45%;
    padding-bottom: 45px;
  }
}

@media only screen and (min-width: 640px) and (max-width: 750px) {
  #attr-home #container-cd6cd83e60 {
    background-position: 80% 0;
  }
}

@media only screen and (min-width: 408px) and (max-width: 478px) {
  #attr-home #container-cd6cd83e60 {
    height: 440px;
    min-height: 0;
    background-size: 476px;
  }

  #attr-home .hero-banner-text-home {
     /* top: 438px;*/;
  }
}

#attr-home #attr-header-test {
  backdrop-filter: none;
}
  
  /*Home CSS ENDS*/
  /*exit ramp-start*/
.modal--overflow {
  overflow-y: scroll;
  padding-top: 8vh;
}

.modal--visible {
  visibility: visible!important;
  opacity: 1!important;
}

.modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100000;
  display: flex;
  visibility: hidden;
  flex-direction: column;
  align-items: center;
  -webkit-overflow-scrolling: touch;
  background: rgba(0,0,0,0.85);
  opacity: 0;
  -webkit-user-select: none;
  -ms-user-select: none;
  -moz-user-select: none;
  user-select: none;
  cursor: pointer;
}

.modal--visible .modal-box {
  -webkit-animation: scale 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
  animation: scale 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

.modal__close {
      /*position: relative;
  top: 11.5rem;
  left: 37.5em;*/
  position: absolute;
  top: 19%;
  right: 27%;
  z-index: 1000;
  padding: 0;
  width: 2rem;
  height: 2rem;
  border: none;
  background-color: transparent;
  color: #fff;
  cursor: pointer;
}
  
  /*
  .exit-ramp-modal .modal__close .modal__closeIcon:before {
  content: url("/content/dam/intelligentcontent/brands/breztri/beflareaware-global/desktop/X-button-exitramp.png");
  position: relative;
  }
  */
.modal__close .modal__closeLabel {
  display: none;
}

.exit-ramp-modal::before {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.exit-ramp-modal .modal-box__content {
  padding: 0;
  text-align: center;
  margin: 0 auto;
}

.exit-ramp-modal .exit-ramp-title {
  padding: 24px 0px;
  color: #00215F;
  font-family: "Kanit-Bold";
  font-size: 20px;
  line-height: 24px;
}

.exit-ramp-modal .exit-ramp-body {
  padding: 10px;
  color: #151515;
  font-size: 18px;
  line-height: 20px;
  font-family: "Kanit";
}

.exit-ramp-modal .exit-ramp-actions {
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  gap: 50px;
  justify-content: center;
  padding-bottom: 20px;
  padding-top: 30px;
}

.exit-ramp-modal .exit-ramp-continue {
  width: 143px;
  height: 34px;
    /*background: linear-gradient(to right, #5E4A83 0%, #353C83 50%, #3D5E83 100%) padding-box, linear-gradient(to right, #F599FC 0%, #556AFF 50%, #75F2FB 100%) border-box;*/
  border-radius: 50em;
  color: #0A215F;
    /*color: #FFF;*/
    /*border: 2px solid transparent;*/
  border: 1px solid #E34AEE;
  font-size: 16px;
  line-height: 26px;
  font-family: "Kanit-SemiBold";
  text-decoration: none;
  cursor: pointer;
  background: #E2FCFD;
  padding: 3px 0;
}

.exit-ramp-modal .exit-ramp-cancel {
  width: 143px;
  height: 34px;
    /*background: linear-gradient(to right, #FFF 0%, #FFF 50%, #FFF 100%) padding-box, linear-gradient(to right, #F599FC 0%, #556AFF 50%, #75F2FB 100%) border-box;*/
  border-radius: 50em;
  color: #0A215F;
    /*border: 2px solid transparent;*/
  border: 1px solid #E34AEE;
  font-size: 16px;
  line-height: 26px;
  font-family: "Kanit-SemiBold";
  text-decoration: none;
  cursor: pointer;
  background: #E2FCFD;
  padding: 3px 0;
}
  
  
  /*
  .exit-ramp-cancel {
  background-image: url(/content/dam/intelligentcontent/brands/breztri/beflareaware-global/desktop/cancel-button.png);
  background-size: cover;
  }
  
  .exit-ramp-continue {
  background-image: url(/content/dam/intelligentcontent/brands/breztri/beflareaware-global/desktop/continue-button.png);
  background-size: cover;
  }
  */
.exit-ramp-modal .modal__close svg {
  display: none;
}

@media only screen and (max-width: 991px) {
      
   
  p.inform-pg {
    margin-top: 70px;
  }

  #attr-inform .staypic {
    width: 100%;
  }

  .modal-box {
      /*background-image: url(/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/mobile/container-poup-mobile.png) !important;*/
    background-repeat: no-repeat;
    background-size: 100% 100% !important;
    position: relative;
    flex-shrink: 0;
    margin-top: auto;
    margin-bottom: auto;
    border-radius: 30px 30px 30px 0px;
      /*background-color: #FFF;*/
    background-size: cover;
    opacity: 1;
    cursor: auto;
    border: 1px solid #E34AEE;
    will-change: transform, opacity;
      /*background: linear-gradient(to right, #FFF 0%, #FFF 50%, #FFF 100%) padding-box, linear-gradient(to right, #F599FC 0%, #556AFF 50%, #75F2FB 100%) border-box;*/
    background-color: #e2fcfd;
    cursor: auto;
    will-change: transform, opacity;
    padding: 0 20px;
  }

  .modal-box {
    width: 348px;
  }

  .exit-ramp-modal .exit-ramp-body {
    padding: 0;
  }

  .exit-ramp-modal .exit-ramp-title {
    font-size: 19px;
    line-height: 28px;
  }

  .exit-ramp-modal .modal-box__content {
      /*padding: 20px;
      width: 100%;
      margin: 0 auto;
      background: linear-gradient(to right, #FEFEFE 0%, #FCF6FE 18%, #EBF1FE 50%, #DFF5FE 87%, #E2FEFE 90%, #FEFEFE) padding-box, linear-gradient(to right, #F599FC 0%, #556AFF 50%, #75F2FB 100%) border-box;
      border-radius: 30px;*/
    ;
  }

  .exit-ramp-modal .exit-ramp-continue, .exit-ramp-modal .exit-ramp-cancel {
    margin: 12px;
  }

  .exit-ramp-modal .exit-ramp-actions {
    padding-bottom: 1em;
    gap: 0px;
    flex-flow: column;
    align-items: center;
  }
}
      /*
  .modal__close {
  position: relative;
  top: 8%;
  left: 23%;
  }
  */
  
@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
  .modal__close {
    top: 18rem;
      /*left: 15em;*/;
  }
}

@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
  .modal__close {
    top: 6rem;
    left: 55em;
  }

  .cta-bottom-home.home-cta-1 {
    top: -41px;
  }

  .cta-bottom-home.home-cta-2 {
    top: -35px;
  }
}
  
  /*exit ramp-end*/
#attr-home .cta-bottom-home {
  position: relative;
  top: -21px;
  left: 50%;
  transform: translate(-50%, 0px);
}

@media only screen and (min-width: 320px) and (max-width: 330px) {
  .basicpage #container-3bf849c4ef {
    position: relative;
  }
}

@media only screen and (min-width: 745px) and (max-width: 780px) {
  #attr-home .cta-bottom-home {
    top: 16px;
  }
}

@media (min-width: 480px) and (max-width: 992px) {
  /*#attr-home .footer-container {
    padding-top: 220px;
  }*/
}

@media ( min-width: 745px) and (max-width: 780px) {
  #attr-symptoms #attr-home .card-two {
    margin-top: 20px;
  }
}

@media ( min-width: 992px) and (max-width: 1200px) {
  .top-menu ul.us-healthcare li {
    margin: 0 15px;
  }

  #attr-home .card-two {
    height: 179px !important;
    max-height: 100% !important;
  }

  #attr-home .card-one {
    height: 179px !important;
    max-height: 100% !important;
  }
}

@media ( min-width: 745px) and (max-width: 780px) {
  #attr-home .card-two {
    margin-top: 25px;
  }
}

#attr-home .new, #about-attr-page .new, #attr-symptoms .new, #diagnosing-attr .new, #attr-sitemap .new, #attr-login .new {
  margin: auto;
  height: auto;
}

@media only screen and (max-width: 767px) {
    /*#attr-home .hero-banner-home-main .mobile-image,
    #attr-home .only-mob{
        display:block;
    }
    #attr-home .desktop-only{
        display:none;
    }
    #attr-home .hero-banner-home-main{
        background: #000;
    }
    #attr-home .hero-banner-text-home{
        top:0;
        margin-bottom: 4em;
    };*/
}
  
/*  LOGIN */
 
#attr-login .top-menu ul.us-healthcare {
  max-width: 1070px;
}

#attr-login .hero-banner-home-main {
  background: url(/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop/Hero-mask.jpg);
  background-size: cover;
  background-position: center center;
}

#attr-login .hero-banner-home-main {
  box-shadow: rgba(0, 0, 0, 0.90) 0px -50px 36px -15px inset;
  min-height: 25vw;
/*min-height: 50vw;*/;
}

#attr-login #container-cd6cd83e60 {
  background-image: url(/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop/ASTR_A088960_RGB.jpg);
  background-repeat: no-repeat;
  min-height: 832px;
  background-position: -504px 25px;
  background-size: 184%;
}

#attr-login .hero-banner-home-main .mobile-image {
  display: none;
}

#attr-login .banner-heading-home-bg {
  background-repeat: no-repeat;
  min-height: 53vw;
}

#attr-login .hero-banner-text-home {
  width: 30%;
  position: absolute;
  left: 58%;
  top: 8%;
}

#attr-login .banner-subheading-home {
  font-family: "Kanit-SemiBold";
  font-size: 18px;
  color: #FFFFFF;
  margin-bottom: 25px;
  width: 85%;
  line-height: 20px;
}

#attr-login .pink-text-heading {
  color: #FF53FF;
  line-height: 42px;
/*line-height: 60px;*/;
}

#attr-login .heading-subheading {
  font-size: 34px;
  line-height: 34px;
  display: block;
}

#attr-login h1 {
  /*margin-bottom: 40px;font-size: 60px;line-height: 54px;margin-top: 24px;*/
  margin-bottom: 35px;
  font-size: 53px;
  line-height: 42px;
  margin-top: 24px;
}

#attr-login h1 .medium-heading {
  font-size: 40px;
  line-height: 40px;
  display: inline-block;
}

#attr-login .banner-info-text-home {
  /*font-family: 'Kanit-Medium';*/
  font-size: 18px;
  color: #FFFFFF;
  /*margin-bottom: 30px;line-height: 22px;*/
  font-family: "Kanit-SemiBold";
  margin-bottom: 18px;
  line-height: 20px;
}

#attr-login .bottom-section-items {
  display: flex;
  width: 100%;
  column-gap: 29px;
/*column-gap: 15px;*/;
}

#attr-login .card-one {
    /*width: 300px;height: 164px;*/
  border-radius: 30px 30px 30px 0px;
    /*max-width: 350px;min-height: 200px;*/
  background: #E2FCFD;
  border: 1px solid #E34AEE;
    /*padding: 24px;*/
  margin: auto;
  text-align: center;
  width: 100%;
  height: 100%;
  min-width: 274px;
  padding: 15px 24px 40px;
}

#attr-login .card-two {
    /*width: 300px;height: 164px;*/
  border-radius: 30px 30px 30px 0px;
    /*max-height: 164px;max-width: 350px;min-height: 200px;*/
  background: #E2FCFD;
  border: 1px solid #E34AEE;
    /*padding: 24px;*/
  margin: auto;
  text-align: center;
  width: 100%;
  height: 100%;
  min-width: 274px;
  padding: 25px 24px 40px;
}

#attr-login form#loginform {
  position: relative;
  top: 210px;
  right: 0;
}

#attr-login form#loginform #see-log-form {
  margin-bottom: 20px;
  border-radius: 5px;
  max-width: 271px;
  padding: 11px 8px 13px 10px;
  text-align: center;
  height: auto;
  font-family: "Kanit-Regular";
  font-size: 14px;
  line-height: 20px;
  margin-bottom: 7px;
}

#attr-login .cmp-formcontainer .validation-message {
  font-size: 15px;
  font-family: "Kanit-LightItalic";
  color: #F55B5B;
  margin-bottom: 13px;
}

div#recaptcha {
  display: none;
}

#attr-login #see-log-btn {
  margin-left: 10px;
  font-family: "Kanit-Regular";
  font-size: 16px;
  line-height: 26px;
  width: 142px;
}

#attr-login .bottom-section-container {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 880px;
 /*max-width: 1135px;*/
  margin-right: auto;
  margin-left: auto;
}

#attr-login .bottom-section-home {
  /*position: absolute;
  top: 65%;*/
  z-index: 1;
  flex-direction: column;
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  justify-items: center;
  width: -webkit-fill-available;
  /*padding-top: 55em;*/
  background: #000;
  margin-top: -6.5vw;
  padding-top: 25px;
  padding-bottom: 100px;
}

#attr-login .card-one-icon {
  height: 129px;
  margin: auto;
    /*margin: 0px 18px 0px 0;*/;
}

#attr-login .card-two-icon {
    /*height: 65px;margin: 10px 30px 0px 0px;*/
  height: 110px;
  margin: auto;
}

#attr-login .card-one-title {
    /*font-family: "Kanit-SemiBold";font-size: 18px !important;margin-top: 0;*/
  color: #00215F;
  line-height: 20px;
  font-family: "Kanit-Regular";
  font-size: 20px !important;
  margin-top: 5px;
  line-height: 22px;
  text-transform: uppercase;
}

#attr-login .card-two-title {
    /*font-family: "Kanit-Bold"; font-size: 20px !important;margin-top: 0;*/
  color: #00215F;
  line-height: 22px;
  font-family: "Kanit-Regular";
  font-size: 20px !important;
  margin-top: 15px;
  text-transform: uppercase;
}

#attr-login .card-one-info {
  font-family: "Kanit-Regular";
  font-size: 16px;
  color: #151515;
  margin-top: 10px;
  margin-bottom: 17px;
  line-height: 20px;
  padding-right: 10px;
}

#attr-login .card-two-info {
  font-family: "Kanit-Regular";
  font-size: 16px;
  color: #151515;
  margin-top: 10px;
  margin-bottom: 17px;
  width: 90%;
  line-height: 20px;
}

#attr-login .cta-banner-home {
  height: 43px;
  position: relative;
  border-radius: 50em;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #E34AEE;
  width: 205px;
  max-width: 200px;
}

#attr-login .big-picture-cta {
  text-align: center;
  position: relative;
  align-items: center;
  display: flex;
  align-content: center;
  justify-content: center;
  font-family: "Kanit-SemiBold";
  font-size: 16px;
  color: #fff;
  text-transform: uppercase;
}

#attr-login .login-sub-heading {
  font-family: "Kanit-SemiBold";
    /*font-size: 34px;margin-bottom: 1em;*/
  color: #ffffff;
  text-align: center;
  font-size: 30px;
  line-height: 34px;
  margin-bottom: 20px;
}

#attr-login .open-menu {
  display: none;
}

#attr-login .main-menu {
  display: none;
}

#attr-login .us-healthcare li:first-child {
  display: none;
}

#attr-login .bg-stay {
  display: none;
}

#attr-login .aem-Grid.aem-Grid--default--12 > .aem-GridColumn.aem-GridColumn--offset--default--3 {
  position: absolute;
  top: 42%;
  left: 57.5%;
  margin-left: 0;
  width: 500px;
}

#attr-login .aem-Grid.aem-Grid--default--6 > .aem-GridColumn.aem-GridColumn--offset--default--1 {
  margin-left: 0;
}

#see-log-form {
  width: 100%;
  padding: 10px 21px;
  height: 50px;
  border: 1px solid #ccc;
}

#see-log-btn {
  padding: 8px 12px;
  color: #fff;
  display: inline-block;
  text-decoration: none;
  transition: opacity 0.2s;
  font-size: 22px;
  line-height: 1.5;
  position: relative;
  border-radius: 5em;
  width: 198px;
  background: #E34AEE;
  font-family: "Kanit-SemiBold";
  text-transform: uppercase;
}

#attr-login .cmp-dynamicform {
  max-width: 100%;
  margin: 0px 0px 20px 6%;
  position: relative;
  top: 0px;
  right: 0;
  margin-top: -45vh;
  margin-left: 57vw;
}

#attr-login .cmp-dynamicform .form-holder {
  max-width: 440px;
}

#attr-login .cmp-dynamicform-v2 .cmp-dynamicform__generated-form .form-control:not(textarea) {
  margin-bottom: 20px;
  border-radius: 5px;
  max-width: 271px;
  padding: 11px 8px 13px 10px;
  text-align: center;
  height: auto;
  font-family: "Kanit-Regular";
  font-size: 14px;
  line-height: 20px;
  border: 1px solid #ccc;
}

#attr-login .cmp-selfcertification.cmp-selfcertification--inpage {
  padding: 0px 20px;
  max-width: 1367px;
  margin: auto;
  z-index: 2;
  position: relative;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(50%, 70%);
/*margin-left: 56.7vw;margin-top: 52vh;*/;
}

#attr-login .cmp-selfcertification .modal-box {
  background: none;
  max-width: 680px;
  margin: auto;
  border: none;
}

#attr-login .cmp-selfcertification.cmp-selfcertification--inpage label.control-label {
  display: none;
}

#attr-login .cmp-selfcertification.cmp-selfcertification--inpage .form-control {
  height: 46px;
  width: 271px;
  max-width: 271px;
  font-size: 14px;
  text-align: center;
  font-family: "Kanit-Regular";
  border: 1px solid #ccc;
  border-radius: 5px;
  color: #B1AAAA;
  padding: 10px 20px;
  margin: 11px 8px 13px 10px;
  float: right;
  outline: none !important;
}

#attr-login .cmp-selfcertification.cmp-selfcertification--inpage .form-control::placeholder {
  color: #B1AAAA;
  font-family: "Kanit-Regular";
}

#attr-login .cmp-selfcertification.cmp-selfcertification--inpage .cmp-selfcertification__continue {
  background: #E34AEE;
  color: #ffffff;
  font-family: "Kanit-SemiBold";
  font-size: 16px;
/*font-family: 'HelveticaNeue';font-size: 20px;*/
  border-radius: 40px;
  width: 142px;
  margin: 70px auto 0 calc(33% - 80px);
  text-transform: uppercase;
}

#attr-login .cmp-selfcertification #textField-error-invalid,
#attr-login .cmp-selfcertification #textField-error {
  position: absolute;
  right: 0;
  top: 43px;
  color: red;
  max-width: 320px;
  text-align: left;
  width: 100%;
}

@media only screen and (min-width: 991px) {
  .hero-banner-text-home {
    top: 15% !important;
/*top: 10% !important;*/;
  }

  #attr-login form#loginform {
    top: 7.5vw;
  }

  #attr-login .banner-heading-home-bg {
    min-height: 55vw;
/*min-height: 63vw;*/;
  }
}

@media only screen and (min-width: 1652px) and (max-width:1715px) {
  #attr-home .hero-banner-text-home {
    width: 33% !important;
    left: 54% !important;
  }
}

@media only screen and (min-width: 1400px) and (max-width: 1650px) {
  .hero-banner-text-home {
    top: 14.5% !important;
  }
}

@media only screen and (min-width: 1500px) and (max-width: 1600px) {
  #attr-login form#loginform {
    top: 0;
    margin-top: 2vh;
/*top: 10vw;*//*top: 15vw;*/;
  }
}

@media only screen and (min-width: 1400px) and (max-width: 1500px) {
  #attr-login form#loginform {
    top: 0;
    margin-top: 17vh;
/*top: 12vw;*/;
  }
}

@media only screen and (min-width: 1901px) {
 
  .hero-banner-text-home {
    top: 16% !important;
  }

  #attr-login form#loginform {
    top: 12.3vw;
  }

  #attr-login .banner-heading-home-bg {
    min-height: 54vw;
  }
}

@media only screen and (min-width: 1367px) and (max-width: 1410px) {
  #attr-home .hero-banner-text-home {
    width: 40%;
    left: 50%;
    top: 18.5% !important;
  }
}

@media only screen and (min-width: 1024px) and (max-width: 1367px) {
  #attr-home .hero-banner-text-home {
/*top: 18% !important;width: 40% !important;*//*top: 15%*/
    top: 18% !important;
    width: 43% !important;
    left: 55% !important;
  }

  #attr-login .hero-banner-text-home {
    width: 35%;
  }

  #attr-login form#loginform {
    top: 0;
    margin-top: 30vh;
/*top: 15vw;*/;
  }

  #attr-home .card-two,#attr-home .card-one {
    height: 184px !important;
    max-height: 184px !important;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1024px) {
  #attr-login .hero-banner-text-home {
    width: 45%;
    position: absolute;
    left: 48%;
    top: 2%;
  }

  #attr-login form#loginform {
    top: 10vw;
  }

  #attr-login form#loginform {
    top: 0;
    margin-top: 20vh;
/*top: 15vw;*/;
  }

  #attr-login .aem-Grid.aem-Grid--default--12 > .aem-GridColumn.aem-GridColumn--offset--default--3 {
    top: 34%;
    left: 46.8%;
  }

  #attr-login .only-mob {
    display: contents;
  }

  .header-main-menu ul li {
    margin-left: 36px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1023.5px) {
  #attr-home h1 br {
    display: contents;
  }

  #attr-home .hero-banner-text-home {
    width: 80%;
    left: 15%;
    top: 20% !important;
  }

  #attr-home h1 {
    margin-bottom: 25px;
    margin-top: 0px;
  }

  #attr-home .bottom-section-container {
    padding: 0 24px;
  }
}

@media only screen and (max-width: 991px) {
  #attr-login .hero-banner-home-main {
    height: 2000px;
  }

  #attr-login .open-menu {
    display: none;
  }

  #attr-login .main-menu {
    display: block;
  }

  #attr-login .us-healthcare li:first-child {
    display: none;
  }

  #attr-login #container-cd6cd83e60 {
    background-image: url(/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/mobile/hero-mobile.png);
    background-color: black;
    background-size: 988px;
    max-width: 100%;
    max-height: 100%;
    background-position: 100%;
    height: 1126px;
  }

  #attr-login .hero-banner-text-home {
    width: 100%;
    position: relative;
    text-align: center;
    left: 0%;
    top: 1049px;
    justify-content: center;
    display: flex;
    padding-bottom: 124px;
    background-color: black;
  }

  #attr-login .hero-banner-text {
    width: 50%;
  }

  #attr-login .cta-banner-home {
    width: 60%;
    left: 20%;
    margin-top: 33px;
    margin-bottom: 45px;
  }

  #attr-login .bottom-section-home {
    position: relative;
    top: 48%;
    background-color: black;
    padding-bottom: 20px;
  }

  #attr-login .bottom-section-items {
    width: 80%;
    flex-direction: column;
    padding-right: 30px;
    padding-left: 30px;
    row-gap: 30px;
  }

  #attr-login .card-one {
    width: 100%;
  }

  #attr-login .card-two {
    width: 100%;
  }

  #attr-login .card-two-title {
    font-size: 20px;
    margin-top: 7%;
  }

  #attr-login .card-one-title {
    font-size: 20px;
    margin-top: 7%;
  }

  #attr-login .card-two-info {
    font-size: 16px;
    margin-bottom: 24px !important;
  }

  #attr-login .card-one-info {
    font-size: 16px;
    margin-top: 18px;
    margin-bottom: 41px !important;
    padding-right: 20px;
  }

  #attr-login .middle-bottom-cta {
    margin-top: 3px;
    font-size: 14px;
  }

  #attr-login .main-menu {
    background: transparent;
/*background: #001234;*/;
  }

  #attr-login .top-menu ul.us-healthcare {
    justify-content: flex-end;
  }

  #attr-login .bottom-section-container {
    margin-right: 10%;
    margin-left: 10%;
    position: relative;
    bottom: 40px;
  }

  #attr-login .banner-subheading-home {
    margin-left: 8%;
    margin-bottom: 6px;
    padding-top: 0px;
    margin-top: 0px;
  }

  .cta-bottom-home.home-cta-1 {
    top: -8px;
  }

  .cta-bottom-home.home-cta-2 {
    top: -2px;
  }

  #attr-login .cta-bottom-home {
    width: 75%;
    left: 0;
  }

  #attr-login .reference-footnote {
    max-width: 462px;
    margin-left: auto;
    margin-right: auto;
    padding-top: 18px;
    margin-top: 0;
  }

  #attr-login .aem-Grid.aem-Grid--default--12 > .aem-GridColumn.aem-GridColumn--offset--default--3 {
    position: absolute;
    top: 42%;
    left: 0;
    margin-left: 0;
    width: 100%;
  }
}

@media only screen and (max-width: 767px) {
  #attr-login .hero-banner-home-main .mobile-image,
    #attr-login .only-mob {
    display: block;
  }

  #attr-login .desktop-only {
    display: none;
  }

  #attr-login h1 .medium-heading {
    font-size: 34px;
  }

  #attr-login form#loginform #see-log-form {
    margin: 0 auto 20px;
    display: block;
  }

  #attr-login #see-log-btn {
    margin: auto;
    display: block;
  }

  #attr-login form#loginform {
    top: 235px;
  }

  #attr-login .bottom-section-home {
    position: static;
    margin-top: 0px;
    padding-bottom: 70px;
  }

  #attr-login .hero-banner-home-main {
    background: #000;
    padding-bottom: 140px;
  }

  #attr-login .bottom-section-container {
    margin: auto;
    position: static;
  }

  #attr-login .card-one, #attr-login .card-two {
    max-width: 274px;
  }

  #attr-login .login-sub-heading {
    margin-bottom: 35px;
  }

  #attr-login .bottom-section-items {
    row-gap: 20px;
  }

  #attr-login .hero-banner-text-home {
    position: static;
  }

  #attr-login .hero-banner-text {
    height: auto !important;
  }
}

@media only screen and (max-width: 480px) {
  #attr-login .bottom-section-items {
    padding-right: 18px;
    padding-left: 18px;
    width: 100%;
  }

  #attr-login .card-one-icon {
    height: 44px;
    margin: 24px 24px 26px 24px;
  }

  #attr-login .card-one-info {
    margin-bottom: 8px;
    margin-top: 10px;
    font-size: 12px;
  }

  #attr-login .card-two-title {
    font-size: 14px;
    letter-spacing: -0.5px;
  }

  #attr-login .card-two-icon {
    height: 33px;
    margin: 23px 12px 26px 12px;
  }

  #attr-login .card-two-info {
    font-size: 12px;
    letter-spacing: -0.5px;
    margin-bottom: 10px;
    margin-top: 10px;
  }

  #attr-login .card-one-title {
    font-size: 14px;
  }

  #attr-login .bottom-section-container {
    width: 90%;
  }
}

@media only screen and (min-width: 320px) and (max-width: 479px) {
  #attr-login .bottom-section-container {
    width: 100%;
    margin-right: 0;
    margin-left: 0;
  }

  #attr-login #container-3f04199104 {
    padding-top: 76px;
  }

  #attr-login .bottom-section-home {
    z-index: 1;
    background-color: black;
    top: 25%;
    padding-top: 20px;
    padding-bottom: 20px;
  }

  #attr-login .reference-footnote {
    margin-right: 25px;
    margin-left: 25px;
    margin-top: 0px;
    font-size: 14px;
    line-height: 19px;
    padding-bottom: 20px;
    padding-top: 0px;
  }

  #attr-login #footer-style {
    background: #000;
    padding-top: 120px !important;
  }

  #attr-login .banner-subheading-home {
    font-size: 14px;
    margin-right: 22px;
    margin-left: 27px;
    line-height: 19px;
    margin-top: -40px;
  }

  #attr-login .banner-info-text-home {
    font-size: 16px;
    padding-right: 20px;
    padding-left: 20px;
    font-family: "Kanit-Regular";
    line-height: 18px;
  }

  #attr-login .big-picture-cta {
    font-size: 16px;
  }

  #attr-login .cta-banner-home {
    width: 50%;
    left: 25%;
  }

  #attr-login .card-one-icon {
    /*height: 86px; margin: 24px 14px 0px 18px; width: 18%;*/
    height: 129px;
    margin: auto;
  }

  #attr-login .card-one-title {
    font-size: 20px;
    margin-top: 0%;
    width: 100%;
    padding-top: 5px;
    padding-bottom: 0;
    /*width: 80%;padding-top: 24px;padding-bottom: 12px; */;
  }

  #attr-login .card-one-info {
    margin-bottom: 10px;
    margin-top: 4px;
    font-size: 16px;
    padding-right: 0px;
    line-height: 18px;
    padding-bottom: 0px;
  }

  #attr-login .bottom-section-items {
    /*row-gap: 45px;*/
    row-gap: 20px;
    padding-bottom: 53px;
  }

  #attr-login form#loginform {
    top: 340px;
/*top: 280px;*/;
  }

  #attr-login .card-two-icon {
    /*height: 38px;margin-top: 28px;*/
    height: 110px;
    margin: auto;
  }

  #attr-login .card-two-title {
    font-size: 20px;
    letter-spacing: 0px;
    margin-top: 0%;
    padding-right: 0;
    padding-top: 14px;
    padding-bottom: 0;
    /*padding-right: 35px;padding-top: 24px;padding-bottom: 10px;*/;
  }

  #attr-login .card-two-info {
    font-size: 16px;
    letter-spacing: 0px;
    margin-bottom: 13px;
    line-height: 18px;
    padding-bottom: 6px;
    margin-top: 10px;
  }

  #attr-login #container-cd6cd83e60 {
    height: 430px;
    min-height: 0;
    background-size: 100%;
    background-position: 100%;
  }

  .hero-banner-text {
    padding-bottom: 0px;/*padding-bottom: 30px;*/
    height: auto;/*height: 830px;*/
  }

  #attr-login .hero-banner-home-main {
    height: 100%;
  }

  #attr-login #footer-style {
    background: #000;
    padding-top: 0px !important;
  }

  #attr-login .hero-banner-text {
    width: 100%;
    margin-top: -23px;
/*margin-top: 40px;*/
    background-color: #000;
  }

  #attr-login .hero-banner-text-home {
    padding-bottom: 0px;
    top: 422px;
  }

  #attr-login .cta-bottom-home {
    width: 74%;
    left: -9vw;
    height: 30px;
    border: 2px solid transparent;
  }

  .cta-bottom-home.home-cta-2 {
    top: 16px;
  }

  #attr-login .middle-bottom-cta {
    margin-top: 0px;
    padding-right: 20px;
    padding-left: 20px;
  }

  #attr-login h1 {
    font-size: 40px;
    margin-top: -30px;
  }

  #attr-login .heading-subheading {
    font-size: 24px;
  }

  #attr-login .card-one {
    /*height: 218px;max-height: 218px;border: 2px solid transparent;*/
    height: auto;
    max-height: max-content;
    padding: 15px 24px 22px;
  }

  #attr-login .card-two {
    /*height: 218px;max-height: 218px;border: 2px solid transparent;*/
    height: auto;
    max-height: max-content;
    padding: 25px 24px 21px;
  }

  #attr-login .hero-banner-text .suptxt {
    font-size: 10px;
  }

  #attr-login .card-one-info .suptxt {
    font-size: 10px;
  }

  #attr-login .card-two-title .suptxt {
    font-size: 12px;
  }
}

@media (min-width: 1920px) and (max-width: 2560px) {
  #attr-login .cmp-selfcertification.cmp-selfcertification--inpage {
    transform: translate(37%, 70%);
  }
}

@media (min-width: 1500px) and (max-width: 1680px) {
  #attr-login .cmp-selfcertification.cmp-selfcertification--inpage {
    transform: translate(32%, 45%);
  }
}

@media (min-width: 1400px) and (max-width: 1499px) {
  #attr-login .cmp-selfcertification.cmp-selfcertification--inpage {
    transform: translate(25%, 70%);
  }
}

@media (min-width: 1365px) and (max-width: 1399px) {
  #attr-login .cmp-selfcertification.cmp-selfcertification--inpage {
    transform: translate(24%, 141%);
  }
}

@media (min-width: 1026px) and (max-width: 1300px) {
  #attr-login .cmp-selfcertification.cmp-selfcertification--inpage {
    transform: translate(19%, 125%);
  }
}

@media (min-width: 992px) and (max-width: 1025px) {
  #attr-login .cmp-selfcertification.cmp-selfcertification--inpage {
    transform: translate(-15%, 20%);
  }
}

@media only screen and (max-width: 991px) {
  #attr-login .cmp-selfcertification.cmp-selfcertification--inpage {
    top: 100%;
    transform: translate(-50%, 150%);
    width: 100%;
    margin: auto;
    display: flex;
  }

  #attr-login .cmp-selfcertification.cmp-selfcertification--inpage .form-control {
    width: 271px;
    margin: auto;
  }

  #attr-login .cmp-selfcertification.cmp-selfcertification--inpage .cmp-selfcertification__continue {
    margin: 0px auto;
    position: relative;
    top: 18px;
  }

  #attr-login {
    padding-top: 0;
  }

  #attr-login #header {
    position: relative;
  }

  #attr-login #mobile-menu {
    position: relative;
  }

  #attr-login .hero-banner-text {
    margin-top: -63px;
  }
}

@media only screen and (min-width: 320px) and (max-width: 479px) {
  #attr-login .hero-banner-text {
    margin-top: -63px;
  }
}

#attr-home .banner-info-text-home sup {
  font-size: 60%;
  font-family: "Kanit-Medium";
  top: -0.6em;
}



/* Stay connected Registration popup Strts */
@font-face {
  font-family: "HelveticaNeue-Roman";
    src: url("/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/html-asset/HelveticaNeue-Roman.otf");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
  font-family: "Helvetica-Bold-Font";
    src: url("/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/html-asset/Helvetica-Bold-Font.ttf");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
  font-family: "Helvetica-Roman-Font";
    src: url("/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/html-asset/HelveticaNeue-Roman.otf");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

#attr-home a#openRegModal, #about-attr-page a#openRegModal {
  display: none;
}

#attr-home .modal.cmp-modal__modalbox.modal-lg .modal-box, 
#about-attr-page .modal.cmp-modal__modalbox.modal-lg .modal-box, 
#attr-symptoms .modal.cmp-modal__modalbox.modal-lg .modal-box, 
#diagnosing-attr .modal.cmp-modal__modalbox.modal-lg .modal-box, 
#attr-sitemap .modal.cmp-modal__modalbox.modal-lg .modal-box {
/*max-width: 1110px;*/
  max-width: 900px;
  width: 100%;
  margin: 25px auto 50px;
  overflow: hidden;
}

#attr-home .modal.cmp-modal__modalbox.modal-lg .modal-box .modal__close,
#about-attr-page .modal.cmp-modal__modalbox.modal-lg .modal-box .modal__close,
#attr-symptoms .modal.cmp-modal__modalbox.modal-lg .modal-box .modal__close,
#diagnosing-attr .modal.cmp-modal__modalbox.modal-lg .modal-box .modal__close, 
#attr-sitemap .modal.cmp-modal__modalbox.modal-lg .modal-box .modal__close {
  top: 20px;
  right: 20px;
  outline: none !important;
}

#stay-connect-popup-top-block .fist-section {
  background: #fff;
  padding: 10px 10px 55px;
}

#stay-connect-popup-top-block .light-blue-box {
  background-color: #E1E9F8;
  border-radius: 10px;
  padding: 20px 10px 10px;
  text-align: center;
}

#stay-connect-popup-top-block .light-blue-box .popup-title {
  font-family: sans-serif;
  font-size: 30px;
  font-weight: bold;
  color: #AC182E;
  padding: 0px 10px;
  margin-bottom: 20px;
}

#stay-connect-popup-top-block .signup-container h2.page-title {
  font-family: "HelveticaNeue-Roman";
  font-size: 32px;
  color: #830051;
  line-height: 24px;
  margin: 20px 0px 10px;
  text-align: center;
  font-weight: 400;
}

#stay-connect-popup-top-block .signup-container h2.page-title span {
  font-family: "Helvetica-Bold-Font";
}

#stay-connect-popup-top-block .signup-container p {
  font-size: 14px;
  color: #333333;
  font-family: "HelveticaNeue-Roman";
  text-align: center;
  line-height: 24px;
}

#stay-connect-popup-top-block .signup-container .flex-box {
  display: flex;
  gap: 30px;
}

#stay-connect-popup-top-block .signup-container .flex-box .flex-box.column {
  width: calc(33% - 20px);
  margin-top: 20px;
  gap: 0;
  justify-content: space-between;
}

#stay-connect-popup-top-block .signup-container .icon-wrap {
  width: 80px;
}

#stay-connect-popup-top-block .signup-container .icon-info-wrap {
  width: calc(100% - 104px);
}

#stay-connect-popup-top-block .signup-container .icon-info-wrap p {
  font-family: "HelveticaNeue-Roman" !important;
  font-size: 14px;
  text-align: left;
  line-height: 18px;
}

#stay-connect-popup-top-block .signup-container .icon-info-wrap p b {
  display: block;
  font-family: "Helvetica-Bold-Font";
}

#stay-connect-popup-top-block .cmp-iframe__container[data-autoheightwidth="true"] {
  height: 760px !important;
}
/* Stay connected Registration ends */
  
  
@media only screen and (max-width: 991px) {
  
  #attr-home .modal.cmp-modal__modalbox.modal-lg .modal-box,
    #about-attr-page .modal.cmp-modal__modalbox.modal-lg .modal-box,
    #attr-symptoms .modal.cmp-modal__modalbox.modal-lg .modal-box,
    #attr-sitemap .modal.cmp-modal__modalbox.modal-lg .modal-box,
    #diagnosing-attr .modal.cmp-modal__modalbox.modal-lg .modal-box {
    width: 90%;
    padding: 0px;
    border-radius: 10px;
    background: #fff;
  }

  #attr-home .cmp-modal__modalbox .modal-box__content,
    #about-attr-page .cmp-modal__modalbox .modal-box__content,
    #attr-symptoms .cmp-modal__modalbox .modal-box__content,
    #attr-sitemap .cmp-modal__modalbox .modal-box__content,
    #diagnosing-attr .cmp-modal__modalbox .modal-box__content {
    padding: 0px;
  }

  #attr-home .modal.cmp-modal__modalbox.modal-lg .modal-box .modal__close, 
    #about-attr-page .modal.cmp-modal__modalbox.modal-lg .modal-box .modal__close, 
    #attr-symptoms .modal.cmp-modal__modalbox.modal-lg .modal-box .modal__close, 
    #diagnosing-attr .modal.cmp-modal__modalbox.modal-lg .modal-box .modal__close, 
    #attr-sitemap .modal.cmp-modal__modalbox.modal-lg .modal-box .modal__close {
    top: 10px;
    right: 10px;
    width: 14px;
    height: 14px;
  }

  #stay-connect-popup-top-block .signup-container .flex-box {
    flex-direction: column;
    justify-items: center;
  }

  #stay-connect-popup-top-block .signup-container .flex-box .flex-box.column {
    flex-direction: row;
    width: 100%;
    max-width: 330px;
    padding: 0px 20px;
    margin: 20px auto 0px;
  }

  #stay-connect-popup-top-block .fist-section {
    text-align: center;
  }

  #stay-connect-popup-top-block .signup-container .icon-info-wrap p {
    text-align: left;
  }

  #stay-connect-popup-top-block .light-blue-box .popup-title,
    #stay-connect-popup-top-block .signup-container h2.page-title {
    font-size: 24px;
  }
}




/**********************************Compatibility Testing**********************************/

#new-login .bottom-section-home {
  padding-bottom: 98px !important;
}

.header-logo img {
  max-width: 278px;
}

.main-menu {
  max-width: 1293px;
  padding: 10px 57px;
}

.top-menu ul.us-healthcare {
  max-width: 1138px;
}

.top-menu ul.us-healthcare {
  max-width: 1167px;
}

.top-menu ul.us-healthcare li.bg-stay {
  width: 126px;
  margin-left: 24px;
}

.main-menu {
  max-width: 1310px;
}

#attr-home .middle-bottom-cta {
  padding: 5px 15px 8px;
}

#about-attr-page .galaxy-ptag,
#about-attr-page .galaxy-ptag1 {
  background-position: center center;
}

#attr-symptoms .banner-txt1 {
  margin-top: 113px;/*margin-top: -113px;*/
}

#attr-symptoms .attrsymptoms-col {
  border-left: 0 !important;
}

#attr-symptoms .no-border {
  border-image: none !important;
}

html[lang="fr"] #attr-symptoms .banner-txt1 {
  margin-top: 90px;/*margin-top: -90px;*/
}

@media only screen and (min-width: 2565px) and (max-width: 3842px) {
  #attr-symptoms .banner-img {
    min-height: 1900px;
  }

  #attr-home .hero-banner-home-main {
    min-height: 55vw;
  }
}

@media only screen and (min-width: 1920px) and (max-width: 3842px) {
  iframe#RegModal {
    max-height: 800px;
  }

  #new-login .bottom-section-home {
    padding-bottom: 100px !important;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1285px) {
  .footer-container {
    margin: 0px 5em !important;
    max-width: 992px;
    /*margin-top: 5vw !important;*/
  }
}

@media only screen and (min-width: 991px) and (max-width: 1200px) {
  #attr-home .reference-footnote,
    #attr-home .footer-container {
    margin-top: 150px;
  }

  .aboutattr-cards-container {
    margin: auto !important;
    max-width: 1024px !important;
  }

  .understand-two-images {
    max-width: 1024px !important;
    gap: 20px;
  }

  .container-about-attr {
    max-width: 1024px !important;
  }

  #about-attr-page .understand-img1,
    #about-attr-page .understand-img2 {
    height: 406px !important;
  }

  #about-attr-page .galaxy-mobile1,
    #about-attr-page .galaxy-mobile {
    height: auto !important;
  }
  
  #about-attr-page .galaxy-ptag{
      background-size: 100% 100%;
          height: 400px;
    max-height: 400px;
  }
  #about-attr-page .galaxy-ptag1{
      background-size: 100% 100%;
          height: 400px;
    max-height: 400px;
  }

  .galaxy-ptag1 p {
    font-size: 18px;
  }

  #about-attr-page .aboutattr-cards-container {
    margin-bottom: 20px !important;
  }

  #attr-symptoms .banner-block {
    max-width: 1024px !important;
    width: 1024px !important;
  }

  #diagnosing-attr .cardio-cards-items .plasma-card + .arrow-cardio {
    left: calc(290px + 335px + 52px);
  }

  #diagnosing-attr .cardio-cards-items .arrow-cardio {
    left: calc(281px + 3px);
    width: 15px;
  }

  #attr-symptoms .border-box::before {
    width: 100% !important;
  }
  
  

  html[lang="fr"] #about-attr-page .understand-img1,
    html[lang="fr"] #about-attr-page .understand-img2 {
    height: 514px !important;
 /*height: 486px !important;*/;
  }

  html[lang="fr"] #about-attr-page .galaxy-ptag {
    height: 480px !important;
    max-height: 480px !important;
  }

  html[lang="fr"] #about-attr-page .galaxy-ptag1 {
    height: 480px !important;
    max-height: 480px !important;
  }

  html[lang="fr"] .block-title {
    font-size: 20px !important;
  }

  html[lang="fr"] #attr-symptoms .icon-text {
    font-size: 16px !important;
  }

  html[lang="fr"] #attr-symptoms .attrsub-block {
    width: 219px !important;
  }
}

@media only screen and (min-width: 1035px) and (max-width: 1182px) {
  html[lang="fr"] #diagnosing-attr .cardio-cards-items .arrow-cardio {
    left: calc(281px + 15px) !important;
  }

  html[lang="fr"]
        #diagnosing-attr
        .cardio-cards-items
        .plasma-card
        + .arrow-cardio {
    left: calc(290px + 335px + 95px);
  }
}

@media only screen and (max-width: 1600px) {
  .border-box::before {
    width: 100% !important;
  }
}

@media (min-width: 1600px) {
  html[lang="fr"] #new-login #banner_text_right {
    width: 33%;
    left: 56.5%;
  }

  html[lang="fr"] #new-login div#self-fragment {
    left: 56.5%;
  }
}

@media only screen and (max-width: 993px) {
  #about-attr-page .diagnosis-cards-items {
    flex-wrap: wrap;
    height: auto;
    padding: unset;
    margin-bottom: 12%;
  }
}

/*@media only screen and (max-width: 993px)*/
@media only screen and (max-width: 991px) {
  #new-login #Login-bg .cmp-container__backgroundImage--enabled {
    background-position: center center;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background: #000;
    height: auto !important;
    /*background-image: unset !important;*/
  }

  /*#new-login .mobile-image {
    display: block !important;
    width: 100%;
  }*/

  #new-login .hero-banner-txt {
    padding-top: 20vh;
  }

  #new-login div#self-fragment {
  }

  #new-login .banner-info-text-home {
    margin-bottom: 0 !important;
  }

  #new-login .card-one {
    max-width: 274px;
  }

  #new-login .card-two {
    max-width: 274px;
  }

  #attr-home .heading-subheading {
    max-width: 100%;
  }
    #attr-home #footer-style{
        padding-top: 0px !important;
    }
  #about-attr-page .aboutattr-cards-container {
    max-width: 332px;
    margin: auto;
  }

  #about-attr-page #progressive-cont-2 {
    margin-top: 20px;
    margin-bottom: 20px;
  }

  #about-attr-page .galaxy-ptag p,
    #about-attr-page .galaxy-ptag1 p {
    margin: auto !important;
  }

  #about-attr-page .progress-mobile {
    height: auto;
    padding: 20px 0px;
    background: url(/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop/about-attr-bgcontainer1.png);
    background-size: cover;
    background-position: right;
    max-width: 338.77px;
    margin: auto;
    margin-bottom: 20px;
  }

  #about-attr-page .progress-mobile1 {
    height: auto;
    padding: 25px 0px;
    background: url(/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop/about-attr-bgcontainer2.png);
    background-size: cover;
    background-position: right;
    max-width: 338.77px;
    margin: auto;
  }

  #about-attr-page .galaxy-ptag {
    margin: auto;
    margin-bottom: 20px;
  }

  #about-attr-page .galaxy-ptag1 {
    margin: auto;
  }

  #about-attr-page .galxy-image img {
    width: 76px !important;
    height: 93px;
    min-width: 76px;
  }

  #about-attr-page .galaxy-mobile1 .galxy-image img {
    width: 59px !important;
    min-width: 59px !important;
    height: 90px !important;
  }

  #about-attr-page .bgsysmeticbanner {
    background-image: url(/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/mobile/systemic-banner-mob.png);
    height: 186.9px;
    width: 100%;
    margin: auto;
    padding: 20px;
    background-position-x: 0px;
    max-width: 342px;
  }

  #about-attr-page .galaxy-mobile .galaxy-ul {
    font-size: 16px;
  }

  .gal-neuron-desktop {
    display: none;
  }

  #about-attr-page .gal-neuron-mobile {
    display: block !important;
  }

  #attr-symptoms .banner-txt1 {
    margin-top: 0 !important;
  }

  #attr-symptoms .attrwt {
    padding: 0 24px 24px;
  }

  #attr-symptoms .smallbox-title {
    font-size: 22px;
    line-height: 25px;
  }

  .scroll.mobile-only a {
    top: calc(85vw + 268px) !important;
 /*top: 59vh !important;*/;
  }

  .attrsymptoms-block {
    max-width: 340px !important;
    margin: auto !important;
  }

  #diagnosing-attr.basicpage
        #diagnosing-types-container-2
        .cardio-cards-items
        .plasma-card {
    width: 90%;
  }

  #attr-sitemap
        #container-0adb8afb25
        .aem-Grid--default--12
        div#text-9c9d74775e,
    .aem-Grid--default--12 div#text-3b902de85c {
    margin: auto !important;
    max-width: 343.3px !important;
  }

  #attr-sitemap .site-map-heading img {
    width: 343.3px !important;
  }

  #attr-sitemap .site-map-heading {
    text-align: center !important;
  }

  #attr-symptoms .border-box::before {
    width: 100% !important;
  }

  .footer-container {
    bottom: 0 !important;
    padding-bottom: 50px !important;
  }

  .footer-ul-li-container {
    padding-bottom: 30px;
  }

    /*html[lang="fr"] #about-attr-page .progerss-ul{max-width: 90% !important;}*/
  html[lang="fr"] #about-attr-page .galaxy-ptag1 {
    height: fit-content !important;
  }

  html[lang="fr"] #about-attr-page .galaxy-ptag {
    height: fit-content !important;
  }

  html[lang="fr"] .banner-txt1 {
    margin-top: 25px;
  }
}

@media only screen and (min-width: 420px) and (max-width: 993px) {
    #new-login #Login-bg .cmp-container__backgroundImage--enabled{
        box-shadow: inset 0 0 0 2000px rgb(0 0 0 / 20%);
    }
}

@media only screen and (min-width: 465px) and (max-width: 991px) {
  #attr-home .footer-container {
    padding-top: 0px !important;
    /*padding-top: 144px !important;*/
  }

  #attr-home .reference-footnote {
    max-width: 405px !important;
  }

  #about-attr-page .galaxy-ptag {
    padding: 28px 10px 30px;
  }

  #about-attr-page .galaxy-mobile {
    padding-top: 0px;
  }

  .galaxy-ptag1 p {
    padding-top: 0px;
  }

  #about-attr-page .galaxy-mobile1 {
    padding-top: 0px;
  }

  .galaxy-mobile1 .galaxy-ul ul li {
    margin-left: 0px;
    font-size: 16px;
  }

  .banner-img {
    background-image: url(/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/mobile/symptoms-bg-tab.jpg) !important;
    min-height: 1385px !important;
  }

  html[lang="fr"] #attr-symptoms .banner-img {
    background-image: url(/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/fr/mobile/symptoms-bg-fr-tab.jpg) !important;
    min-height: 1385px !important;
    background-size: 100% 100% !important;
  }

  html[lang="fr"] #about-attr-page .galaxy-ptag {
    /*max-height: 403.59px;
    height: 403.59px;*/
    max-height: fit-content;
    background-size: 100% 100%;
  }

  html[lang="fr"] .about-attr-systemetic p {
    padding-left: 59px;
  }

    /*#about-attr-page .bgsysmeticbanner{height: 298.9px;}
    #about-attr-page .about-attr-systemetic p {padding: 85px 0px 0px 150px; max-width: 630px;};*/
}

@media only screen and (min-width: 648px) and (max-width: 650px) {
  #new-login div#self-fragment {
    top: calc(50vw + 718px) !important;
  }
}

@media screen and (max-width: 991px) and (max-width: 850px) {
  #new-login .login-sub-heading {
    /*padding-top: 6em !important;*/
  }

  #new-login div#self-fragment {
    /*top: calc(62vw + 718px) !important;*/
        /*left: calc(45vw - 100px) !important;;*/
  }
}

@media screen and (max-width: 849px) and (max-width: 768px) {
  #new-login .login-sub-heading {
    /*padding-top: 6em !important;*/
  }

  #new-login div#self-fragment {
    /*top: calc(59vw + 718px) !important;*/
        /*left: calc(45vw - 100px) !important;*/
  }
}

@media screen and (max-width: 665px) {
  #new-login .login-sub-heading {
    /*padding-top: 6em !important;*/
  }

  #new-login div#self-fragment {
    /*top: calc(53vw + 705px) !important;*/
        /*left: calc(45vw - 100px) !important;*/
  }
}

@media screen and (max-width: 460px) {
  #new-login .login-sub-heading {
    padding-top: 0px !important;
  }

  #new-login div#self-fragment {
    /*top: calc(6vh + 705px) !important;*/
        /*left: 15% !important;*/
  }
}

@media screen and (max-width: 460px) {
  #new-login .login-sub-heading {
    padding-top: 50px !important;
  }
  html[lang="fr"] #new-login .login-sub-heading{
      padding-top: 70px !important;
  }
}

@media screen and (max-width: 360px) {
  #new-login .login-sub-heading {
    padding-top: 0px !important;
  }
}

@media only screen and (min-width: 600px) and (max-width: 650px) {
  #attr-home .footer-container {
    /*padding-top: 214px !important;*/
  }
}

@media (max-width: 540px) {
  .exit-ramp-modal .modal-box {
    width: 90% !important;
    margin: auto !important;
  }

  #attr-sitemap .site-map-heading {
    text-align: left !important;
  }

  #attr-sitemap .site-map-heading img {
    width: 100% !important;
  }
}

@media only screen and (max-width: 426px) {
  #attr-home .hero-banner-home-main .mobile-image,
    #attr-home .only-mob {
    display: block;
  }

  #attr-home .desktop-only {
    display: none;
  }
    #attr-home .banner-heading-home-bg{
        min-height: auto;
        height: auto;
        background-image: none;
    }
  #attr-home .hero-banner-home-main {
    background: #000;
  }

  #attr-home .hero-banner-text-home {
    top: 0;
    margin-bottom: 0em;
    /*margin-bottom: 4em;*/
  }

  #diagnosing-attr .footer-main-container {
    padding: 5em 24px 0px;
  }

  html[lang="fr"] #about-attr-page .progerss-ul {
    max-width: 289px !important;
  }

  html[lang="fr"] #about-attr-page .galaxy-ptag1 {
    height: 475px !important;
  }
}

@media only screen and (max-width: 361px) {
  .banner-txt1 {
    margin-top: 15px !important;
  }

  #attr-home .hero-banner-text {
    margin-top: 19px;
  }

  #attr-home .hero-banner-text-home {
    margin-bottom: 0em;
  }

  #attr-home .card-one {
    padding: 20px 15px 10px 15px;
  }

  #attr-home .card-two {
    padding: 20px 0px 10px 0px;
  }

  #attr-home .middle-bottom-cta {
    padding: 10px 15px 8px;
  }

  #about-attr-page .galaxy-ptag1 {
    padding: 20px 24px 30px;
  }

  #about-attr-page .treatment-footer-subheading p {
    font-size: 18px;
    line-height: 21px;
    max-width: 90%;
  }

  #diagnosing-attr .three-title {
    width: 325px;
    max-width: 350px;
  }

  html[lang="fr"] #diagnosing-attr .hereditary-cards-container .dna-card {
    height: 630px !important;
  }

  html[lang="fr"] #diagnosing-attr .hereditary-cards-container .amyloid-card {
    height: 630px !important;
  }
}

@media only screen and (min-width: 319px) and (max-width: 357px) {
  /*#new-login div#self-fragment {
    top: calc(0vh + 664px) !important;
    left: 6% !important;
  }*/

  #new-login #Login-bg .cmp-container__backgroundImage--enabled {
    min-height: 771px !important;
  }

  .attrsymptoms-block {
    max-width: 300px !important;
  }

  #attr-symptoms .border-box {
    padding: 28px 43px 34px 55px !important;
  }
   html[lang="fr"] #attr-symptoms .border-box {
        padding: 15px 10px !important;
    }
  .scroll.mobile-only a {
    top: calc(78vh + 5px) !important;
  }

  /*html[lang="fr"] #attr-home #footer-style {
    padding-top: 172px !important;
  }*/
}

@media only screen and (min-width: 319px) and (max-width: 361px) {
  

  

  

  

  .top-menu ul.us-healthcare li.bg-stay {
    margin-left: -24px;
  }

  html[lang="fr"] .top-menu ul.us-healthcare li.bg-stay a {
    font-size: 10px;
  }

  html[lang="fr"] .top-menu ul.us-healthcare li.bg-stay {
    margin-left: 12px;
  }

  html[lang="fr"] .top-menu ul.us-healthcare {
    margin-left: 0;
    margin-right: 0;
  }

  
}

/*@media only screen and (min-width: 752px) and (max-width: 991px) {
  #attr-home .hero-banner-home-main {
    background-size: 100% 100%;
    height: 102vw;
  }

  #attr-home .hero-banner-text {
    width: 90%;
  }

  #attr-home .cta-banner-home {
    width: 40%;
    margin: auto;
    left: 0;
  }

  #attr-home .hero-banner-text-home {
    top: 25em;
    background-color: transparent;
    z-index: 9;
  }
  #attr-home .card-two-title{margin-top: 0%;}
    #attr-home .bottom-section-home{top: 45%;}
  #attr-home #footer-style {
    padding-top: 50em !important;
  }

  #attr-home .footer-container {
    padding-top: 0px !important;
  }

  html[lang="fr"] #attr-home .hero-banner-text-home {
    top: 57em;
    padding-bottom: 37em;
    background-color: transparent;
    z-index: 9;
  }

  html[lang="fr"] #attr-home .hero-banner-text-home {
    top: 25em !important;
    padding-bottom: 3em;
    background-color: transparent;
    z-index: 9;
  }
  html[lang="fr"] #attr-home #footer-style{
    padding-top: 38em !important;
  }

  html[lang="fr"] #attr-home .card-one,
    html[lang="fr"] #attr-home .card-two {
    height: 207px;
    max-height: 207px;
  }
}*/

/*@media only screen and (max-width: 754px) {
  html[lang="fr"] #attr-home .hero-banner-text-home {
    top: 58em !important;
    padding-bottom: 28em;
    background-color: transparent;
    z-index: 9;
  }
}*/

/*@media only screen and (min-width: 630px) and (max-width: 650px) {
  

  #attr-home .hero-banner-text {
    width: 90%;
  }

  #attr-home .cta-banner-home {
    width: 40%;
    margin: auto;
    left: 0;
  }

  #attr-home .hero-banner-text-home {
    top: 46em !important;
    padding-bottom: 28em !important;
  }

  

  #attr-home .footer-container {
    padding-top: 0px !important;
  }

  html[lang="fr"] #attr-home .hero-banner-home-main {
    height: 102vw;
  }

  html[lang="fr"] #attr-home .hero-banner-text {
    width: 90%;
  }

  html[lang="fr"] #attr-home .cta-banner-home {
    width: 40%;
    margin: auto;
    left: 0;
  }

  html[lang="fr"] #attr-home .hero-banner-text-home {
    top: 50em !important;
    padding-bottom: 23em !important;
    background-color: transparent;
    z-index: 9;
  }

  html[lang="fr"] #attr-home #footer-style {
    padding-top: 79em !important;
  }

  html[lang="fr"] #attr-home .footer-container {
    padding-top: 0px !important;
  }
}*/

#signup-form .cmp-dynamicform {
  margin-top: 0;
  margin-left: 0;
}

#signup-form .cmp-dynamicform .form-holder {
  max-width: 100%;
  margin-top: 3em;
}

#signup-form .cmp-dynamicform-v2 .cmp-dynamicform__generated-form .cmp-dynamicform__form-group {
  display: block;
}

#signup-form .es-accept-content p {
  line-height: 1.2em;
  margin-bottom: 0.6em;
}

#signup-form .cmp-dynamicform__vcenter label {
  font-size: 14px;
  line-height: 1.2em;
  margin-bottom: 0.6em;
}

#signup-form .cmp-dynamicform__vcenter input {
  margin-right: 5px;
}

#signup-form .cmp-dynamicform__form-validation {
  display: inline-block;
  width: 100%;
  max-width: 850px;
}

#signup-form .cmp-dynamicform__form-group {
  width: 50%;
  padding-right: 2em;
  float: left;
  margin-top: 0.6em;
  margin-bottom: 15px;
}

#signup-form .cmp-dynamicform-v2 .cmp-dynamicform__generated-form .form-control:not(textarea) {
  font-size: 13px;
  font-weight: normal;
  border: 1px solid #DDDDDD;
  border-radius: 2px;
  color: #777777;
  outline: none;
  width: 100%;
  max-width: 100%;
  height: 100%;
  text-align: left;
  margin-bottom: 0;
  font-family: "Helvetica Neue",helvetica;
}

#signup-form .cmp-dynamicform-v2 .cmp-dynamicform__generated-form .text-danger {
  color: #AC182E;
  padding: 0.5em;
  font-style: normal;
}

#signup-form .cmp-dynamicform__form-radio {
  width: 100%;
}

#signup-form .cmp-dynamicform-v2 .cmp-dynamicform__generated-form .cmp-dynamicform__form-group button {
  border: 2px solid #f2b03d;
  color: #FFFFFF;
  padding: 0.6em 2em;
  border-radius: 1.6em;
  font-weight: bold;
  cursor: pointer;
  outline: none;
  font-size: 18px;
  line-height: normal;
}

#signup-form .cmp-dynamicform__control-label {
  display: none;
}

#signup-form .cmp-dynamicform-v2 .cmp-dynamicform__generated-form .hidden{
    display:none;   
}

@media only screen and (min-width: 605px) and (max-width: 741px) {
    #attr-home .card-two{padding: 20px 11px;}
}
@media only screen and (min-width: 605px) and (max-width: 566px) {
    #attr-home .card-one-info{margin-top: 8px;}
    #attr-home .card-two-icon{margin: 10px 15px 0px 0px;}
    
}
@media only screen and (max-width: 557px){
    #attr-home .card-two-info{width: 100%;}
    #attr-home .card-two-icon{margin: 10px 15px 0px 0px;}
}

@media only screen and (max-width: 400px){
    html[lang="fr"] .top-menu ul.us-healthcare li{font-size:2.1vw;}
    html[lang="fr"] #about-attr-page .progerss-ptag{margin: auto 15px;}
    html[lang="fr"] .top-menu ul.us-healthcare{margin-left: 0px;margin-right: 0px;}
}
@media only screen and (max-width: 360px){
    html[lang="fr"] #about-attr-page .galaxy-ptag1{height: fit-content !important;}
    html[lang="fr"] #about-attr-page .progerss-ul {max-width: 100% !important;margin: auto 30px;}
    
}
@media only screen and (max-width: 350px){
    .top-menu ul.us-healthcare{margin-left: 0px;margin-right: 0px;}
}


#attr-home .bottom-section-items {
  display: flex;
  width: 100%;
  column-gap: 15px;
}

#attr-home .bottom-section-container {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 1135px;
  margin-right: auto;
  margin-left: auto;
}

#attr-home .bottom-section-home{
    position:absolute;
    top:100%;
    left:0;
    right:0;
    z-index:5;
    display:flex;
    justify-content:center;
	margin-top:-100px;
}



#attr-home .card-one,
#attr-home .card-two{
    display:flex;
    align-items:flex-start;
    background:#DDE0EE;
    border:1px solid #656EFA;
    border-radius:34px;
    min-height:200px;
    width:520px;
    box-sizing:border-box;
    padding:28px 32px;
}



#attr-home .card-one-icon{
    width:68px;
    height:auto;
    margin-right:24px;
    flex-shrink:0;
}

#attr-home .card-two-icon{
    width:58px;
    height:auto;
    margin-right:24px;
    margin-top:5px;
    flex-shrink:0;
}



#attr-home .card-one-text,
#attr-home .card-two-text{
    flex:1;
}

#attr-home .card-one-title,
#attr-home .card-two-title{
    display:none;
}

#attr-home .card-one-info,
#attr-home .card-two-info{
    font-family:"Kanit-Regular";
    font-size:18px;
    line-height:1.35;
    color:#111111;
    margin:0;
    width:100%;
}

#attr-home .card-one-info sup,
#attr-home .card-two-info sup{
    font-size:60%;
}


#attr-home .cta-bottom-home{
    position:relative;
    width:380px;
    height:48px;
    background:#656EFA;
    border-radius:30px;
    left:50%;
    transform:translateX(-50%);
    margin-top:-24px;
    z-index:9;
    display:flex;
    justify-content:center;
    align-items:center;
    border:none;
}

#attr-home .home-cta-2{
    width:470px;
}

#attr-home .middle-bottom-cta{
    display:flex;
    justify-content:center;
    align-items:center;
    text-align:center;
    text-decoration:none;
    color:#FFFFFF;
    font-family:"Kanit-SemiBold";
    font-size:16px;
    line-height:18px;
    text-transform:uppercase;
    padding:0 20px;
    width:100%;
    height:100%;
	white-space: nowrap;
}

#attr-home .card-one,
#attr-home .card-two{
    width:560px;
    min-height:140px;
    padding:18px 24px;
    border-radius:26px;
}

#attr-home .card-one-icon{
    width:50px;
    margin-right:18px;
}

#attr-home .card-two-icon{
    width:44px;
    margin-right:18px;
    margin-top:2px;
}

#attr-home .card-one-info,
#attr-home .card-two-info{
    font-size:18px;
    line-height:1.25;
    font-weight:500;
}

#attr-home .cta-bottom-home{
    width:310px;
    height:38px;
    margin-top:-3px;
    border-radius:22px;
}

#attr-home .home-cta-2{
    width:340px;
}

#attr-home .middle-bottom-cta{
    font-size:12px;
    line-height:12px;
    white-space:nowrap;
    font-weight:700;
}

/* #attr-home .bottom-section-items{
    gap:14px;
} */

#attr-home .bottom-section-home{
    top:80%;
}

/*====================================================
 HERO SECTION
=====================================================*/

#attr-home .hero-banner-home-main{
    position:relative;
    width:100%;
}

#attr-home .banner-heading-home-bg{
    position:relative;
}

#attr-home .banner-heading-home-bg img{
    width:100%;
    display:block;
}

/*====================================================
 HERO CONTENT
=====================================================*/

/* #attr-home .hero-banner-text-home{
    position:absolute;
    top:120px;
    left:105px;
    width:540px;
    z-index:10;
}  */

#attr-home .hero-banner-text{
    width:540px;
}

/*====================================================
 MAIN HEADING
=====================================================*/

#attr-home .banner-heading-home h1{
    margin:0;
    color:#ffffff;
    font-family:"Kanit-Bold";
    font-size:58px;
    line-height:0.95;
    text-transform:uppercase;
    letter-spacing:0;
}

#attr-home .pink-text-heading{
    color:#EC99FD;
}

#attr-home .heading-subheading{
    display:block;
    margin-top:24px;
    color:#ffffff;
    font-size:28px;
    line-height:1.1;
    font-family:"Kanit-SemiBold";
}

/*====================================================
 PARAGRAPH
=====================================================*/

#attr-home .banner-info-text-home{
    width:520px;
    margin-top:26px;
    color:#ffffff;
    font-size:18px;
    line-height:1.45;
    font-family:"Kanit-Regular";
}

/*====================================================
 CTA
=====================================================*/

#attr-home .cta-banner-home{
    margin-top:30px;
}

#attr-home .big-picture-cta{
    display:inline-flex;
    justify-content:center;
    align-items:center;

    width:400px;
    height:48px;

    border-radius:28px;

    background:#656EFA;

    color:#ffffff;
    text-decoration:none;

    font-family:"Kanit-SemiBold";
    font-size:16px;

    text-transform:uppercase;

    transition:.3s;
}

#attr-home .big-picture-cta:hover{
    background:#5661F0;
}

/*====================================================
 DESKTOP (1366-1600)
=====================================================*/

@media screen and (min-width:1200px){

    #attr-home .hero-banner-text-home{
        left:90px;
        top:115px;
    }

    #attr-home .banner-heading-home h1{
        font-size:56px;
    }

    #attr-home .banner-info-text-home{
        width:500px;
    }

}

/* ================================
   Consolidated hero text positioning
   Overrides all scattered top:%/em rules across breakpoints
   ================================ */

@media only screen and (min-width: 1024px) {
html #attr-home .hero-banner-text-home {
    position: absolute !important;
    top: 130px !important;
    left: calc(50% - 655px + 120px) !important;  /* 655 = half of 1310px container */
    width: 751px !important;
}
}

#attr-home .hero-banner-text{
    width: 100%;
}

#attr-home .banner-heading-home h1{
    font-family: "Kanit-Bold";
    text-transform: uppercase;
    color: #ffffff;
    text-align: left;
    font-size: clamp(24px, 2.778vw, 40px);
    line-height: clamp(28px, 3.125vw, 45px);
    margin: 0;   /* remove extra bottom margin from h1 itself */
}

#attr-home .banner-heading-home h1 .pink-text-heading{
    color: ##EC99FD;
}

/* Subheading "TAKE ACTION. DIAGNOSE EARLY." — 30px / line-height 34px @1440px */
#attr-home .heading-subheading{
    display: block;
    font-family: "Kanit-SemiBold";
    text-transform: uppercase;
    text-align: left;
    font-size: clamp(18px, 2.083vw, 30px);
    line-height: clamp(22px, 2.361vw, 34px);
    margin-top: 4px;      /* reduced from 16px — tightens gap above this line */
}

/* Paragraph — 18px / line-height 21px @1440px */
#attr-home .banner-info-text-home{
    width: 100%;
    max-width: 550px;
    font-family: "Kanit-Regular";
    color: #ffffff;
    text-align: left;
    font-size: clamp(13px, 1.25vw, 18px);
    line-height: clamp(16px, 1.458vw, 21px);
    margin: 36px 0 20px;   /* increased top from 20px — widens gap before paragraph */
}

#attr-home .banner-info-text-home i{
    font-family: "Kanit-LightItalic";
}



/*mobile*/

@media only screen and (max-width:480px){
    #attr-home{
        background:#000 !important;
    }

    /* =========================
       HERO
    ========================== */
    #attr-home .hero-banner-home-main{
        position:relative !important;
        width:100% !important;
        background:#000 !important;
    }

    #attr-home .banner-heading-home-bg{
        position:relative !important;
        width:100% !important;
        overflow:visible !important;
        --hero-lift: 200px;        /* heading placement over the image — this is correct now, don't touch */
        --subhead-gap: 10px;       /* NEW: space between image bottom and "TAKE ACTION..." — tune THIS one */
    }

    #attr-home .banner-heading-home-bg img,
    #attr-home .mobile-image{
        width:100% !important;
        height:auto !important;
        display:block !important;
    }

    #attr-home .hero-banner-text-home{
        position:static !important;
        width:100% !important;
        margin:0 !important;
        margin-top:calc(var(--hero-lift) * -1) !important;
        padding:0 20px !important;
        background:transparent !important;
        z-index:2 !important;
    }

    #attr-home .hero-banner-text{
        width:100% !important;
        margin:0 !important;
        padding:0 !important;
    }

    #attr-home .banner-subheading-home{
        display:none !important;
    }

    #attr-home .banner-heading-home h1{
        width:100% !important;
        margin:0 !important;
        text-align:left !important;
        color:#fff !important;
        font-size:24px !important;
        letter-spacing:0 !important;
    }

    #attr-home .pink-text-heading{
        color:#EC99FD !important;
    }

    /*
       FIX: this used to be margin-top:var(--hero-lift), which over-cancelled
       and created the huge gap. It only needs to close the SMALL gap between
       the last heading line and itself — not the whole lift amount.
    */
    #attr-home .heading-subheading{
        display:block !important;
        width:100% !important;
        margin:0 !important;
        margin-top:var(--subhead-gap) !important;
        padding:0 !important;
        text-align:center !important;
        font-size:21px !important;
        line-height:1.3 !important;
        font-weight:700 !important;
        color:#fff !important;
    }

    /* ---------- PARAGRAPH ---------- */
    #attr-home .banner-info-text-home{
        width:100% !important;
        margin:0 !important;
        margin-top:16px !important;
        padding:0 4px !important;
        text-align:center !important;
        font-size:13px !important;
        line-height:1.5 !important;
        color:#fff !important;
    }

    /* ---------- CTA ---------- */
    #attr-home .cta-banner-home{
       /* width:100% !important;
        margin:0 !important;   */
        margin-top:20px !important;
        margin-bottom:32px !important;  /* NEW: breathing room so the cards section can't crowd/cover it */
        display:flex !important;
        justify-content:center !important;
        position:relative !important;
        z-index:3 !important;            /* NEW: guarantees it renders above the cards, not under them */
    }

    #attr-home .big-picture-cta{
        
        min-width:230px !important;
        height:42px !important;
        padding:0 24px !important;
        font-size:11px !important;
        border-radius:999px !important;
        display:flex !important;
        justify-content:center !important;
        align-items:center !important;
    }

    /* ---------- CARDS ---------- */
    /*
       FIX: force these back to 0 in case the base/desktop stylesheet gives
       this section (or the first card) a negative margin-top for an
       intentional overlap effect on desktop. Left unreset, that negative
       margin drags the card up over the paragraph/CTA on mobile.
    */
    #attr-home .bottom-section-home{
        margin-top:0 !important;
        top:auto !important;
        transform:none !important;
        background:#000 !important;
        /* padding:24px 20px 40px !important; */
        position:relative !important;
        z-index:1 !important;
    }

    #attr-home .bottom-section-items{
        display:flex !important;
        flex-direction:column !important;
        gap:18px !important;
    }

    #attr-home .card-one,
    #attr-home .card-two{
        margin-top:0 !important;
        top:auto !important;
        transform:none !important;
        width:100% !important;
        padding:18px !important;
        border-radius:20px 20px 20px 0px !important;
        background:#DDE0EE !important;
        border:1px solid #656EFA !important;
        position:relative !important;
		margin-bottom:20px;
    }

    #attr-home .cta-bottom-home{
        position:relative !important;
        width:67% !important;
        margin-top:-15px !important;
    }
	
	#attr-home .card-one-info, #attr-home .card-two-info {
		margin-top:-15px  !important;
	}
	
	#attr-home .card-one-icon{
		margin-top: -10px;
        margin-left: -15px;
	}
	
	#attr-home .bottom-section-container{
		margin-top:40px !important;
	}
	
	#attr-home .middle-bottom-cta{
		white-space:normal;
		font-size:14px;
	}
}


@media only screen and (min-width: 700px) and (max-width:990px){
	
    #attr-home{
        background:#000 !important;
    }

    /* =========================
       HERO
    ========================== */
    #attr-home .hero-banner-home-main{
        position:relative !important;
        width:100% !important;
        background:#000 !important;
    }

    #attr-home .banner-heading-home-bg{
        position:relative !important;
        width:100% !important;
        overflow:visible !important;
        --hero-lift: 350px;        
        --subhead-gap: 290px;       
    }

    #attr-home .banner-heading-home-bg img,
    #attr-home .mobile-image{
        width:100% !important;
        height:auto !important;
        display:block !important;
    }

    #attr-home .hero-banner-text-home{
        position:static !important;
        width:100% !important;
        margin:0 !important;
        margin-top:calc(var(--hero-lift) * -1) !important;
        padding:0 40px !important; 
        background:transparent !important;
        z-index:2 !important;
    }

    #attr-home .hero-banner-text{
        width:100% !important;
        margin:0 !important;
        padding:0 !important;
    }

    #attr-home .banner-subheading-home{
        display:none !important;
    }

    #attr-home .banner-heading-home h1{
        color:#fff !important;
        font-size:28px !important;
        line-height:36px !important; 
        font-weight:700 !important;
        margin:0 !important;
        letter-spacing:0 !important;
        
        /* 100% width allows the child "Take Action" subheading to span completely across and center */
        width: 100% !important; 
        word-break: keep-all !important;
    }

    /* 
       NEW FIX: Limits the text width of the main title words to roughly 60% 
       so "Transthyretin Amyloidosis..." wraps beautifully like your layout image
    */
    #attr-home .banner-heading-home h1::first-line {
        width: 60% !important;
    }

    #attr-home .pink-text-heading{
        color:#EC99FD !important;
        display: inline-block !important; 
        
        /* Restricts the pink disease lines to roughly 60% width of the container */
        max-width: 60% !important; 
    }

    #attr-home .heading-subheading{
        display:block !important;
        
        /* Spans the full 100% width of the screen */
        width:100% !important; 
        margin:0 !important;
        margin-top:var(--subhead-gap) !important;
        padding:0 !important;
        
        /* Centers perfectly over the entire 100% viewport */
        text-align:center !important;
        clear: both !important;
        
        font-size:21px !important;
        line-height:1.3 !important;
        font-weight:700 !important;
        color:#fff !important;
    }

    /* ---------- PARAGRAPH ---------- */
    #attr-home .banner-info-text-home{
        width:100% !important;
        margin:0 !important;
        margin-top:16px !important;
        padding:0 4px !important;
        text-align:center !important;
        font-size:13px !important;
        line-height:1.5 !important;
        color:#fff !important;
    }

    /* ---------- CTA ---------- */
    #attr-home .cta-banner-home{
       /* width:100% !important;
        margin:0 !important;  */
        margin-top:20px !important;
        margin-bottom:32px !important;  
        display:flex !important;
        justify-content:center !important;
        position:relative !important;
        z-index:3 !important;            
    }

    #attr-home .big-picture-cta{
        width: 290px !important;
        min-width: 290px !important;
        height: 46px !important;
        padding: 0 16px !important;
        font-size: 12px !important;
        border-radius: 999px !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
    }

    /* ---------- CARDS ---------- */
    #attr-home .bottom-section-home{
        margin-top:0 !important;
        top:auto !important;
        transform:none !important;
        background:#000 !important;
        padding:24px 20px 40px !important;
        position:relative !important;
        z-index:1 !important;
    }

    #attr-home .bottom-section-items{
        display:flex !important;
        flex-direction:column !important;
        gap:60px !important;
    }

    #attr-home .card-one,
    #attr-home .card-two{
        margin-top:0 !important;
        top:auto !important;
        transform:none !important;
        width:100% !important;
        padding:18px !important;
        border-radius:20px 20px 20px 0px !important; 
        background:#DDE0EE !important;
        border:1px solid #656EFA !important;
        position:relative !important;
        margin-bottom:20px !important;
    }

    #attr-home .cta-bottom-home{
        position:relative !important;
        width:55% !important;
        margin-top:-60px !important;
    }
	
    #attr-home .card-one-info, 
    #attr-home .card-two-info {
        margin-top:-15px !important; 
    }
	
    #attr-home .card-one-icon{
        margin-top: -10px !important;
        margin-left: -15px !important;
    }
	
    #attr-home .bottom-section-container{
        margin-top:40px !important;
    }
	
    #attr-home .middle-bottom-cta{
        white-space:normal;
        font-size:14px !important;
    }
	
	#attr-home .bottom-section-container {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 500px;
  margin-right: auto;
  margin-left: auto;
}
}

@media only screen and (min-width: 1000px) and (max-width: 1100px) {
    html #attr-home .hero-banner-text-home {
        position: absolute !important;
        top: 130px !important;
        left: 9% !important;
        width: 900px !important;
    }
}

@media only screen and (min-width: 700px) and (max-width:849px){
	    #attr-home .cta-bottom-home {
        position: relative !important;
        width: 55% !important;
        margin-top: -20px !important;
    }
	    #attr-home .middle-bottom-cta{
        white-space:normal;
        font-size:14px !important;
    }
	
	#attr-home .banner-info-text-home {
		max-width:800px;
	}
}
	
/* ===============================
   FR Home Hero Heading Fix
   =============================== */

#attr-home .banner-heading-home .hero-heading-line {
    display: block;
}

#attr-home .banner-heading-home .hero-heading-line + .hero-heading-line {
    margin-top: -4px; /* adjust if needed */
}

#attr-home .banner-heading-home .pink-text-heading {
    display: inline;
}

#attr-home .banner-heading-home .heading-subheading {
    display: block;
    margin-top: 8px;
}



@media only screen and (min-width: 1450px) and (max-width: 2580px) {
    
}

@media only screen and (max-width: 390px) {





}


/* =========================================================
   FINAL FR RESPONSIVE OVERRIDES
   Keep this entire section at the absolute end of the file.
   ========================================================= */

/* ---------------------------------------------------------
   400px–600px:
   Add clear spacing between the subheading and paragraph.
   --------------------------------------------------------- */
@media only screen and (min-width: 400px) and (max-width: 600px) {

  
}


/* ---------------------------------------------------------
   700px–900px:
   Cards use full available width.
   CTA overlaps the bottom border and stays centered.
   --------------------------------------------------------- */
@media only screen and (min-width: 700px) and (max-width: 900px) {

  

  

  

  

  

  

  

  

  
}


/* ---------------------------------------------------------
   992px–1100px:
   Restore complete hero and card content width at 1024px.
   --------------------------------------------------------- */
@media only screen and (min-width: 992px) and (max-width: 1100px) {

  

  

  

  

  

  

  

  

  

  
}


/* =========================================================
   CORRECTION — FR HOME 400px TO 600px
   Restores normal hero spacing without changing the
   700–900px card/button fix or the 1024px layout fix.
   Keep this block at the absolute end of the file.
   ========================================================= */
@media only screen and (min-width: 400px) and (max-width: 600px) {

  /* Remove older positional shifts that created the large black gap */
  

  /* Keep only a modest gap between subheading and paragraph */
  

  /* Prevent the H1 itself from reserving extra vertical space */
  

  
}

/* =========================================================
   FR HOME - 300px to 399px (iPhone SE / 375px)
   ========================================================= */

@media only screen and (max-width: 399px) {

  

  

}


/* =========================================================
   FR HOME - iPhone SE (300px - 399px)
   ========================================================= */

@media only screen and (max-width: 399px) {

  /* Prevent the ':' from going to the next line */
  

  /* Keep the first two lines together */
  

  /* Keep ATTR): together */
  

  /* Subheading */
  

  /* Paragraph */
  

}


/* =========================================================
   FR HOME — 300px TO 400px FINAL HEADING POSITION
   ========================================================= */

@media only screen and (min-width: 300px) and (max-width: 400px) {

  /* Force SYSTÉMIQUES. onto the next line */
  

  /* Keep the RÉPERCUSSIONS line controlled */
  

  /* Subheading starts at the black strip */
  

  /* Paragraph */
  
}

/* =========================================================
   FINAL FR HOME DESKTOP HERO POSITION FIX
   Keeps the French hero content left-aligned when DevTools
   reduces the available browser viewport width.
   Keep this block at the absolute end of global.css.
   ========================================================= */
@media only screen and (min-width: 992px) {

  

  

  

  
}

/* =========================================================
   FINAL FR HOME — MEDIUM DESKTOP / INSPECT VIEWPORT FIX
   Gives the hero copy more horizontal space and reduces its
   vertical height so it stays above the two lower cards.
   Keep this block at the absolute end of global.css.
   ========================================================= */
@media only screen and (min-width: 992px) and (max-width: 1400px) {

  

  

  

  

  
}

/* =========================================================
   FINAL FR HOME DESKTOP HEADING + HEADER-CLEARANCE FIX
   1. Keeps the authored hero lines fixed at every desktop zoom.
   2. Moves the hero below the taller header at medium widths.
   Keep this block at the absolute end of global.css.
   ========================================================= */
@media only screen and (min-width: 992px) {

  /* Do not allow zoom/viewport width to merge the authored heading lines. */
  

  

  /* Keep the subheading outside any inherited H1 line-flow rules. */
  
}

/* Medium desktop / DevTools-open viewport: header becomes taller. */
@media only screen and (min-width: 992px) and (max-width: 1400px) {

  

  

  

  

  /* Reserve enough hero height so the copy cannot collide with the cards. */
  

  
}

/* Wide desktop: preserve the exact authored line breaks at 100% zoom. */
@media only screen and (min-width: 1401px) {
  
}

/* =========================================================
   FINAL FR HOME DESKTOP HERO FIX — V4
   Keep this block at the absolute end of global.css.
   Fixes the header overlap at every desktop viewport and
   keeps the French H1 at the intended wrapping width.
   ========================================================= */
@media only screen and (min-width: 992px) {

  /* The header overlays the hero, so use one consistent clearance
     at normal zoom and when DevTools is open. */
  

  /* Do not let the H1 become wider on large screens. A stable width
     preserves the intended French line wrapping at different zooms. */
  

  

  

  

  /* Reserve enough space before the cards. */
  

  
}

/* Reduced desktop/DevTools width: use a slightly smaller H1 while
   preserving the same header clearance and controlled wrapping. */
@media only screen and (min-width: 992px) and (max-width: 1400px) {
  

  

  

  
}


/* =========================================================
   ATTR HOME – FINAL MOBILE FIX
   Fixes:
   1. Card content and images being cut off
   2. Squashed card content
   3. Insufficient internal padding
   4. CTA text/button overflow
   5. References being cut off on the right
   EN + FR
   ========================================================= */

@media only screen and (max-width: 767px) {

  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden !important;
  }

  #attr-home,
  #attr-home * {
    box-sizing: border-box;
  }

  #attr-home .bottom-section-home {
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 28px 16px 15px !important;
    background-color: #000 !important;
    overflow: visible !important;
  }

  #attr-home .bottom-section-container {
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    width: 100% !important;
    max-width: 430px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  #attr-home .bottom-section-items {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    row-gap: 32px !important;
    overflow: visible !important;
  }

  #attr-home .card-one-wrapper,
  #attr-home .card-two-wrapper {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 0 26px !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  #attr-home .card-one,
  #attr-home .card-two {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 58px minmax(0, 1fr) !important;
    align-items: center !important;
    column-gap: 14px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 148px !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 16px 18px 30px 16px !important;
    border-radius: 30px 30px 30px 0 !important;
    overflow: visible !important;
  }

  #attr-home .card-two {
    min-height: 150px !important;
  }

  #attr-home .card-one-icon,
  #attr-home .card-two-icon {
    position: static !important;
    display: block !important;
    align-self: center !important;
    width: auto !important;
    max-width: 58px !important;
    height: auto !important;
    max-height: 92px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    object-fit: contain !important;
    flex-shrink: 0 !important;
  }

  #attr-home .card-one-icon {
    max-width: 48px !important;
    max-height: 100px !important;
  }

  #attr-home .card-two-icon {
    max-width: 48px !important;
    max-height: 58px !important;
  }

  #attr-home .card-one-text,
  #attr-home .card-two-text {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  #attr-home .card-one-title,
  #attr-home .card-two-title {
    display: none !important;
  }

  #attr-home .card-one-info,
  #attr-home .card-two-info {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 17px !important;
    line-height: 1.38 !important;
    letter-spacing: 0 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    overflow: visible !important;
  }

  #attr-home .card-one-info sup,
  #attr-home .card-two-info sup {
    white-space: nowrap !important;
  }

  #attr-home .cta-bottom-home {
    position: absolute !important;
    top: auto !important;
    right: auto !important;
    bottom: -20px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: calc(100% - 70px) !important;
    max-width: 290px !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 40px !important;
    margin: 0 !important;
    padding: 4px 10px !important;
    border: 0 !important;
    border-radius: 50px !important;
    overflow: visible !important;
    z-index: 5 !important;
  }

  #attr-home .cta-bottom-home.home-cta-1,
  #attr-home .cta-bottom-home.home-cta-2 {
    top: auto !important;
    bottom: -20px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }

  #attr-home .cta-bottom-home.home-cta-2 {
    width: calc(100% - 48px) !important;
    max-width: 310px !important;
  }

  #attr-home .middle-bottom-cta {
    position: static !important;
    transform: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 2px 6px !important;
    font-size: 13px !important;
    line-height: 13px !important;
    text-align: center !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    overflow: visible !important;
  }

  #attr-home #refer,
  #attr-home #refer .cmp-container,
  #attr-home #refer .text,
  #attr-home #refer .cmp-text {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  #attr-home .reference-footnote {
    position: relative !important;
    display: block !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 20px !important;
    padding: 24px 0 28px !important;
    font-size: 13px !important;
    line-height: 1.45 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    overflow: visible !important;
  }

  #attr-home .reference-footnote span,
  #attr-home .reference-footnote i {
    max-width: 100% !important;
  }

  #attr-home #footer-style {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding-top: 0 !important;
    overflow-x: hidden !important;
  }

  #attr-home .footer-container {
    width: auto !important;
    max-width: none !important;
    margin: 0 20px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

@media only screen and (max-width: 380px) {

  #attr-home .bottom-section-home {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  #attr-home .card-one,
  #attr-home .card-two {
    grid-template-columns: 48px minmax(0, 1fr) !important;
    column-gap: 12px !important;
    padding-left: 13px !important;
    padding-right: 14px !important;
  }

  #attr-home .card-one-info,
  #attr-home .card-two-info {
    font-size: 16px !important;
    line-height: 1.35 !important;
  }

  #attr-home .cta-bottom-home {
    width: calc(100% - 42px) !important;
  }

  #attr-home .cta-bottom-home.home-cta-2 {
    width: calc(100% - 24px) !important;
  }

  #attr-home .middle-bottom-cta {
    font-size: 12px !important;
    line-height: 12px !important;
  }

  #attr-home .reference-footnote {
    margin-left: 18px !important;
    margin-right: 18px !important;
    font-size: 12px !important;
  }
}

/* =========================================================
   FINAL HERO CORRECTIONS – EN + FR
   Added at the absolute end so these rules override all
   earlier overlapping home-page media queries.
   ========================================================= */

/* ---------------------------------------------------------
   481px–700px
   Use the same mobile hero construction used at <=480px.
   --------------------------------------------------------- */
@media only screen and (min-width: 481px) and (max-width: 700px) {

  #attr-home {
    background: #000 !important;
    overflow-x: hidden !important;
  }

  #attr-home .hero-banner-home-main {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    background: #000 !important;
    overflow: visible !important;
  }

  #attr-home .banner-heading-home-bg {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;

    /* Same placement controls as the <=480px layout */
    --hero-lift: 300px;
    --subhead-gap: 250px;
  }

  #attr-home .banner-heading-home-bg > img,
  #attr-home .hero-banner-home-main .mobile-image,
  #attr-home .mobile-image {
    position: static !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    object-fit: contain !important;
  }

  #attr-home .hero-banner-text-home {
    position: static !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;

    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;

    margin: 0 !important;
    margin-top: calc(var(--hero-lift) * -1) !important;
    padding: 0 20px !important;

    background: transparent !important;
    z-index: 2 !important;
  }

  #attr-home .hero-banner-text {
    width: 100% !important;
    max-width: 620px !important;
    height: auto !important;
    margin: 0 auto !important;
    padding: 0 !important;
  }

  #attr-home .banner-subheading-home {
    display: none !important;
  }

  #attr-home .banner-heading-home,
  #attr-home .banner-heading-home h1 {
    width: 100% !important;
    max-width: 100% !important;
  }

  #attr-home .banner-heading-home h1 {
    margin: 0 !important;
    padding: 0 !important;
    color: #fff !important;
    font-size: 28px !important;
    line-height: 1.03 !important;
    letter-spacing: 0 !important;
    text-align: left !important;
  }

  #attr-home .pink-text-heading {
    color: #EC99FD !important;
  }

  #attr-home .heading-subheading {
    position: static !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    margin-top: var(--subhead-gap) !important;
    padding: 0 !important;
    transform: none !important;

    color: #fff !important;
    font-size: 21px !important;
    line-height: 1.3 !important;
    font-weight: 700 !important;
    text-align: center !important;
  }

  #attr-home .banner-info-text-home {
    position: static !important;
    width: 100% !important;
    max-width: 620px !important;
    margin: 16px auto 0 !important;
    padding: 0 4px !important;
    transform: none !important;

    color: #fff !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    text-align: center !important;
  }

  #attr-home .cta-banner-home {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;

    width: 230px !important;
    max-width: calc(100% - 40px) !important;
    min-height: 42px !important;
    margin: 28px auto 72px !important;
  }

  #attr-home .big-picture-cta {
    width: 100% !important;
    min-height: 42px !important;
    padding: 8px 14px !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
    text-align: center !important;
  }

  /* Keep FR on exactly the same mobile construction */
  

  

  

  

  
}


/* ---------------------------------------------------------
   FR desktop/tablet hero
   Keep the heading below the blue navigation and stop the
   content from shifting upward while the page is scrolled.
   --------------------------------------------------------- */
@media only screen and (min-width: 992px) {

  

  

  

  

  

  

  

  /* Neutralise sticky/scroll-state rules from moving hero copy */
  
}

/* Slightly smaller desktop widths need a little more clearance */
@media only screen and (min-width: 992px) and (max-width: 1250px) {
  

  

  

  
}

/* =========================================================
   FINAL FR DESKTOP HERO TYPOGRAPHY
   FR only — does not affect EN, tablet, or mobile.
   Keep this block at the absolute end of the CSS file.
   ========================================================= */
@media only screen and (min-width: 992px) {

  /* Complete FR heading block */
  

  /* AMYLOÏDOSE À TRANSTHYRÉTINE (ATTR) :
     MALADIE SYSTÉMIQUE. RÉPERCUSSIONS SYSTÉMIQUES. */
  

  /* Keep both white and pink heading text on the same rhythm */
  

  /* PASSER À L’ACTION... */
  

  /* Controlled gap below subheading before body copy */
  
}



/* ==========================================================================
   FR HOME ONLY — REMOVE EMPTY WHITE REFERENCE BLOCK
   Page: /ca/fr/home
   Keeps the EN home page unchanged.
   ========================================================================== */

/*
 * The FR page places #refer inside a separate AEM responsive-grid component.
 * Reset that component and its grid wrappers so they take only the height of
 * the reference text and use the same black background as the footer.
 */


/* Reference component itself */


/*
 * Keep the references compact and directly above the footer.
 * This replaces the old 149px top margin on desktop.
 */


/* Remove empty AEM-generated elements that can reserve vertical space */


/* Ensure the footer follows the reference section without a white gap */


/* Tablet and mobile */
@media screen and (max-width: 991px) {
  
}

@media screen and (max-width: 480px) {
  
}



/* ==========================================================================
   FR HOME ONLY — REMOVE MODAL / IFRAME RESERVED HEIGHT
   The Stay Informed modal contains an iframe with inline height: 1794px.
   Keep the modal available, but remove its AEM grid column from page flow.
   ========================================================================== */



/* Prevent the closed modal and its 1794px iframe from reserving page height. */


/* Restore the modal overlay dimensions when its script opens it. */


/* Footer follows immediately after references. */





/* ==========================================================================
   FR HOME ONLY — HEADER WIDTH AND LOGO CLICK-LAYER FIX
   Page: /ca/fr/home.html
   Page ID: #attr-home
   ========================================================================== */

/* Keep the French stay-informed block wide enough for one line on desktop. */
@media screen and (min-width: 992px) {
  

  

  
}

/* Ensure the desktop and mobile logo links remain above neighbouring layers. */







/* ==========================================================================
   ATTR HOME — DESKTOP CARD / REFERENCE / FOOTER SPACING FIX
   EN + FR | Desktop only
   Mobile and tablet remain unchanged.
   ========================================================================== */
@media screen and (min-width: 992px) {

  /* Move the two CTA cards upward so they sit closer to the rock edge. */
  html[lang|="en"] body#attr-home .bottom-section-home,
  body#attr-home .bottom-section-home,
  body #attr-home .bottom-section-home {
    top: 75% !important;
    bottom: auto !important;
  }

  /* Remove reserved AEM spacing around the references section. */
  body#attr-home .aem-GridColumn:has(#refer),
  body#attr-home .container.responsivegrid:has(#refer),
  body#attr-home .container.responsivegrid:has(#refer) > .cmp-container,
  body#attr-home .container.responsivegrid:has(#refer) > .aem-Grid,
  body#attr-home .container.responsivegrid:has(#refer) [class*="aem-GridColumn"],
  body #attr-home .aem-GridColumn:has(#refer),
  body #attr-home .container.responsivegrid:has(#refer),
  body #attr-home .container.responsivegrid:has(#refer) > .cmp-container,
  body #attr-home .container.responsivegrid:has(#refer) > .aem-Grid,
  body #attr-home .container.responsivegrid:has(#refer) [class*="aem-GridColumn"] {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #000000 !important;
    overflow: visible !important;
  }

  body#attr-home #refer,
  body#attr-home #refer > .text,
  body#attr-home #refer .cmp-text,
  body #attr-home #refer,
  body #attr-home #refer > .text,
  body #attr-home #refer .cmp-text {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #000000 !important;
    overflow: visible !important;
  }

  /* Bring references closer to the cards. */
  body#attr-home #refer .reference-footnote,
  body #attr-home #refer .reference-footnote,
  body#attr-home .reference-footnote,
  body #attr-home .reference-footnote {
    width: calc(100% - 40px) !important;
    max-width: 1158px !important;
    margin: 0 auto !important;
    padding: 24px 0 22px !important;
  }

  /* Remove the old 100px footer offset and keep the footer directly below references. */
  body#attr-home #footer,
  body#attr-home #footer-style,
  body#attr-home .experiencefragment:has(#footer),
  body #attr-home #footer,
  body #attr-home #footer-style,
  body #attr-home .experiencefragment:has(#footer) {
    margin-top: 0 !important;
    padding-top: 0 !important;
    background-color: #000000 !important;
  }

  body#attr-home .footer-container,
  body #attr-home .footer-container {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
}

/* ========================================================================== 
   ATTR HOME — FINAL DESKTOP EMPTY-SPACE REDUCTION
   EN + FR | Desktop only
   Pulls the references and complete footer group further upward without
   changing the mobile/tablet layout or the hero/card styling.
   ========================================================================== */
@media screen and (min-width: 992px) {

  /* Pull the complete references grid column into the unused black area.
     The responsive value gives a stronger lift on wider desktop screens. */
  body#attr-home
  .container.responsivegrid.aem-GridColumn:has(> #refer),
  body #attr-home
  .container.responsivegrid.aem-GridColumn:has(> #refer) {
   /* margin-top: clamp(-220px, -10vw, -120px) !important;*/
  }

  /* Keep the reference content compact after it has been moved upward. */
  body#attr-home #refer .reference-footnote,
  body #attr-home #refer .reference-footnote,
  body#attr-home .reference-footnote,
  body #attr-home .reference-footnote {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 10px !important;
    padding-bottom: 18px !important;
  }

  /* Ensure no AEM wrapper reintroduces spacing before the footer. */
  body#attr-home .experiencefragment:has(#footer),
  body #attr-home .experiencefragment:has(#footer),
  body#attr-home #footer,
  body #attr-home #footer,
  body#attr-home #footer-style,
  body #attr-home #footer-style,
  body#attr-home .footer-container,
  body #attr-home .footer-container {
    margin-top: 0 !important;
  }
}

/* ========================================================================== 
   ATTR HOME — FINAL LAPTOP CARD / REFERENCE OVERLAP FIX
   EN + FR | 992px–1700px only
   Keeps mobile and tablet rules untouched.
   ========================================================================== */
@media screen and (min-width: 992px) and (max-width: 1700px) {

  /* Keep the card section close to the rock, but below the hero CTA. */
  html[lang|="en"] body#attr-home .bottom-section-home,
  body#attr-home .bottom-section-home,
  body #attr-home .bottom-section-home {
    top: 82% !important;
    bottom: auto !important;
    margin-top: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  /* Stop the two cards from stretching across almost the full laptop width. */
  body#attr-home .bottom-section-container,
  body #attr-home .bottom-section-container {
    position: relative !important;
    width: calc(100% - 80px) !important;
    max-width: 1135px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  body#attr-home .bottom-section-items,
  body #attr-home .bottom-section-items {
    display: flex !important;
    align-items: stretch !important;
    width: 100% !important;
    gap: 16px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body#attr-home .card-one-wrapper,
  body#attr-home .card-two-wrapper,
  body #attr-home .card-one-wrapper,
  body #attr-home .card-two-wrapper {
    position: relative !important;
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 0 20px !important;
    overflow: visible !important;
  }

  /* Restore the compact XD card height on laptops. */
  body#attr-home .card-one,
  body#attr-home .card-two,
  body #attr-home .card-one,
  body #attr-home .card-two {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    height: 149px !important;
    min-height: 149px !important;
    max-height: 149px !important;
    margin: 0 !important;
    padding: 18px 24px !important;
    box-sizing: border-box !important;
    border-radius: 30px 30px 30px 0 !important;
    overflow: visible !important;
  }

  body#attr-home .card-one-icon,
  body #attr-home .card-one-icon {
    width: auto !important;
    max-width: 58px !important;
    height: auto !important;
    max-height: 112px !important;
    margin: 0 22px 0 0 !important;
    object-fit: contain !important;
    flex: 0 0 auto !important;
  }

  body#attr-home .card-two-icon,
  body #attr-home .card-two-icon {
    width: auto !important;
    max-width: 52px !important;
    height: auto !important;
    max-height: 62px !important;
    margin: 0 22px 0 0 !important;
    object-fit: contain !important;
    flex: 0 0 auto !important;
  }

  body#attr-home .card-one-text,
  body#attr-home .card-two-text,
  body #attr-home .card-one-text,
  body #attr-home .card-two-text {
    min-width: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body#attr-home .card-one-info,
  body#attr-home .card-two-info,
  body #attr-home .card-one-info,
  body #attr-home .card-two-info {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 16px !important;
    line-height: 1.3 !important;
    font-weight: 400 !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
  }

  /* Anchor each CTA to its own card instead of letting it affect card height. */
  body#attr-home .cta-bottom-home,
  body #attr-home .cta-bottom-home {
    position: absolute !important;
    top: 110px !important;
    right: auto !important;
    bottom: 0 !important;
    left: 50% !important;
    transform: translate(-50%, 50%) !important;
    height: 40px !important;
    min-height: 40px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    z-index: 9 !important;
  }

  body#attr-home .cta-bottom-home.home-cta-2,
  body #attr-home .cta-bottom-home.home-cta-2 {
   
  }

  body#attr-home .middle-bottom-cta,
  body #attr-home .middle-bottom-cta {
    position: static !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 12px !important;
    font-size: 12px !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
  }

  /* Cancel the earlier large negative lift that caused references to overlap cards. */
  body#attr-home .container.responsivegrid.aem-GridColumn:has(> #refer),
  body #attr-home .container.responsivegrid.aem-GridColumn:has(> #refer) {
    margin-top: 42px !important;
  }

  body#attr-home #refer .reference-footnote,
  body #attr-home #refer .reference-footnote,
  body#attr-home .reference-footnote,
  body #attr-home .reference-footnote {
    width: calc(100% - 80px) !important;
    max-width: 1158px !important;
    margin: 0 auto !important;
    padding: 12px 0 20px !important;
  }
}
/* ==========================================================================
   FR HOME — FINAL DESKTOP / LAPTOP LAYOUT CORRECTION
   FR only | min-width: 992px

   Fixes:
   1. Cards no longer overlap the "EN SAVOIR PLUS SUR L’ATTR" CTA.
   2. Long French card CTA text stays inside the blue button.
   3. References follow the cards without a large blank gap or overlap.
   4. Desktop and laptop use natural document flow instead of absolute
      card positioning.
   Keep this block at the absolute end of the CSS file.
   ========================================================================== */

@media only screen and (min-width: 992px) {

  /* ----------------------------------------------------------
     HERO WRAPPERS
     Remove the old fixed/minimum heights which created empty
     black space before the reference section.
     ---------------------------------------------------------- */

  

  /* ----------------------------------------------------------
     HERO COPY
     Put the complete French hero content in normal flow.
     This guarantees that the lower cards start after the hero CTA.
     ---------------------------------------------------------- */

  

  

  

  /* Main French heading */
  

  

  

  /* PASSER À L’ACTION heading */
  

  /* Description paragraph */
  

  /* Hero CTA must remain visible above the cards */
  

  

  /* ----------------------------------------------------------
     CARD SECTION
     Keep it in normal flow after the complete hero text and CTA.
     ---------------------------------------------------------- */

  

  

  

  

  

  

  

  

  

  

  /* ----------------------------------------------------------
     CARD CTA BUTTONS
     Keep all French text inside the blue shape.
     ---------------------------------------------------------- */

  

  

  

  /* ----------------------------------------------------------
     REFERENCES AND FOOTER
     Follow immediately after the card section without overlap.
     ---------------------------------------------------------- */

  

  

  

  
}


/* ------------------------------------------------------------
   FR LAPTOP — CARD/REFERENCE ADJUSTMENTS ONLY
   Hero spacing and typography remain identical to desktop.
   ------------------------------------------------------------ */

@media only screen and (min-width: 992px) and (max-width: 1250px) {

  

  

  

  

  

  

  

  

  
}

/* FR HOME — move card section lower for medium desktop viewport */
@media only screen and (min-width: 1024px) and (max-width: 1410px) {

  html[lang^="fr"] body#attr-home .hero-banner-home-main,
  html[lang^="fr"] body #attr-home .hero-banner-home-main {
    min-height: 960px !important;
  }

  html[lang^="fr"] body#attr-home .bottom-section-home,
  html[lang^="fr"] body #attr-home .bottom-section-home {
    top: 84% !important;
  }
}


@media only screen and (min-width: 1024px) and (max-width: 1367px) {
  html[lang="fr"] body#attr-home .hero-banner-text-home,
  html[lang="fr"] body #attr-home .hero-banner-text-home {
    top: 130px !important;
    left: calc(50% - 655px + 120px) !important;
    width: 751px !important;
  }
}

/* ================================================================
   FR HOME — DESKTOP ONLY FIX
   FR's heading has one more forced line than EN, so the hero text
   block is taller. Give it a bit more width (fewer wrapped lines)
   and push the cards down slightly so nothing overlaps.
   ================================================================ */
@media only screen and (min-width: 1368px) {

  html[lang="fr"] #attr-home .hero-banner-text-home {
    width: 850px !important;
  }

  html[lang="fr"] #attr-home .bottom-section-home {
    top: 88% !important;
  }
}

/* ================================================================
   FR HOME — DESKTOP: stop the cards drifting/overlapping at
   different zoom levels. A top:% position only lines up correctly
   at one width; anchoring from the bottom with a fixed px offset
   stays consistent at every zoom/effective width instead.
   ================================================================ */
@media only screen and (min-width: 992px) {

  html[lang="fr"] #attr-home .bottom-section-home {
    position: absolute !important;
    top: 100% !important;
    bottom: auto !important;
    margin-top: -110px !important;
  }

  /* The cards are absolutely positioned, so they don't push the
     references section down on their own — reserve room for them
     so the reference text isn't crowded/overlapped underneath. */
  html[lang="fr"] #attr-home #refer .reference-footnote,
  html[lang="fr"] #attr-home .reference-footnote {
    margin-top: 170px !important;
  }
}

@media only screen and (min-width: 992px) {

  /* Let the hero box grow to fit the actual FR text instead of
     staying pinned to a fixed height */
  html[lang="fr"] #attr-home .banner-heading-home-bg {
    position: relative !important;
    display: block !important;
  }

  /* Hero copy: normal flow instead of absolute, same visual
     position via padding instead of top/left */
  html[lang="fr"] #attr-home .hero-banner-text-home {
    position: static !important;
    top: auto !important;
    left: auto !important;
    width: auto !important;
    padding: 130px 0 0 calc(50% - 655px + 120px) !important;
    box-sizing: border-box !important;
  }

  html[lang="fr"] #attr-home .hero-banner-text {
    width: 850px !important;
    max-width: calc(100% - (50% - 655px + 120px) - 40px) !important;
  }

  /* Cards: normal flow, fixed 50px below the CTA — guaranteed */
  html[lang="fr"] #attr-home .bottom-section-home {
    position: static !important;
    top: auto !important;
    bottom: auto !important;
    margin: 50px 0 0 !important;
    padding: 0 40px !important;
  }

  /* References: fixed 80px below the cards — guaranteed */
  html[lang="fr"] #attr-home #refer .reference-footnote,
  html[lang="fr"] #attr-home .reference-footnote {
    margin-top: 80px !important;
  }
}

@media screen and (min-width: 992px) and (max-width: 1700px) {
html[lang="fr"] body#attr-home .container.responsivegrid.aem-GridColumn:has(> #refer) {
    margin-top: -50px !important;
}
}