/***********************************Living-with-mbc starts here*******************************/

/**********font-related code  ********************/
#main-section #banner-main-border #banner-main-text span {
  color: var(--black);
  font: 400 45px/50px "Open Sans", sans-serif;
  /*letter-spacing: 3px;*/
}
/*#subtypes-of-mbc #main-section #banner-main-border #banner-main-text span {*/
/*    font: 400 45px / 50px "Open Sans", sans-serif;*/
/*}*/
#living-with-mbc-page #main-section #banner-main-border #banner-main-text span {
    color: var(--black);
    font: 400 45px / 50px "Open Sans", sans-serif;
}
#main-section #banner-main-border #banner-main-text {
  margin: 0px 0px 27px 0px;
}
#living-with-mbc-page #main-section #banner-main-border #banner-main-text,
#caregivers #main-section #banner-main-border #banner-main-text
{
    margin-bottom:25px
}

#main-section .banner-sub-text,
#main-card-grid .card-section-grid .card-text-sub {
  color: var(--black);
  font: 400 22px/30px "Open Sans", sans-serif;
}

#main-card-grid .card-main-title {
  color: var(--black);
  font: 400 45px/55px "Open Sans", sans-serif;
  display: inline-block;
  margin: 25px 0;
  max-width: 355px;
}

#main-card-grid .card-sub-title {
  color: var(--black);
  font: 400 45px/55px "Open Sans", sans-serif;
  display: inline-block;
  
}

#main-card-grid #card-section .aem-Grid:has(> .title) .button a {
  font: 600 20px/30px "Open Sans", sans-serif;
}

#main-card-grid #button-last-section .aem-Grid .button a {
  font: 600 18px/30px "Open Sans", sans-serif;
}

/**********font-related code  ********************/

/* banner starts here */
#banner-content #banner-main-border > .aem-Grid {
  display: flex;
  background: #ffffff;
  flex-direction: column-reverse;
  width: 100%;
  align-items: center;
  border-radius: 20px;
  border-top-right-radius: 50%;
  border-top-left-radius: 50%;
}

#banner-main-border .aem-Grid::before,
#banner-main-border .aem-Grid::after {
  display: none;
}

#main-section .cmp-container__backgroundImage--enabled {
  margin: 0;
}

#main-section .cmp-text {
  padding: 0;
}

#main-section #banner-main-border .container:has(> #content-section-banner) {
  padding: 25px 20px;
}

#main-section #banner-content #banner-main-border {
  padding: 25px 16px;
}

#main-section #banner-main-border #banner-image > .aem-Grid {
  position: relative;
  display: inline-block;
  z-index: 1;
}

#main-section #banner-main-border #banner-image > .aem-Grid img {
  position: relative;
  z-index: 2;
  width: 100%;
}



/*#main-section #banner-main-border #banner-image > .aem-Grid .image::after {
  content: "";
  position: absolute;
  bottom: -11px;
  left: -13px;
  width: 100%;
  height: 96%;
  border: 1px solid #ed9499;
  border-top: none; 
  z-index: 1;
  border-radius: 20px;
  border-top-left-radius: 315px;
  border-top-right-radius: 395px;
}*/

/* banner ends here */

/************card starts here***************/
#main-section > .aem-Grid > .container.responsivegrid,
#footer .aem-Grid > .aem-GridColumn,
#banner-content .aem-Grid,
#banner-content .container.responsivegrid {
  float: unset !important;
}

#main-card-grid .cmp-title__text {
  margin: 0;
  text-align: center;
}

#main-card-grid #card-section .aem-Grid:has(> .title) {
  background-color: #eef3f9;
  border-radius: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 25px;
  margin-bottom: 25px;
  padding: 0px 20px;
  text-align: center;
}
/* card background color living with mbc page */
#living-with-mbc-page #main-card-grid #card-section .aem-Grid:has(> .title) {
  background-color: #faf3f7;
}
/* card background color caregivers page */
#caregivers #main-card-grid #card-section .aem-Grid:has(> .title) {
  background-color: #fcecd1;
}

#card-section .cmp-title__text {
  margin: 0;
  display: inline;
}

#main-card-grid #card-section .aem-Grid:has(> .title) .button a {
  max-width: 158px;
  min-width: 158px;
  min-height: 45px;
  padding: 7px 15px;
  display: inline-block;
}

#home-page #main-section {
  /*padding-top: 60px;*/
}

#main-section {
  padding-top: 126px;
}

#button-last-section .aem-Grid .button a {
  padding: 5px 15.5px;
  display: inline-block;
}

#main-card-grid #card-section .aem-Grid:has(> .title) .button {
  text-align: center;
}

#main-card-grid
  #card-section
  > .aem-Grid
  > .container.responsivegrid
  > .cmp-container
  > .aem-Grid {
  display: flex;
  align-items: stretch;
  flex-direction: column;
}

#button-last-section > .aem-Grid {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  width: 100%;
  margin-bottom: 25px;
  align-items: center;
}

#subtypes-of-mbc #button-last-section > .aem-Grid
{
    margin-bottom: 0px;
}
#living-with-mbc-page #button-last-section .button:nth-of-type(2).pink-gradient,
#caregivers #button-last-section .button:nth-of-type(2).pink-gradient,
#taking-active-role .button:nth-of-type(2).pink-gradient{
    margin-bottom: 0;
}


/************card ends here***************/

/* mobile specific code */
@media screen and (max-width: 991px) {
    
#caregivers #main-card-grid #card-section #row1 .aem-Grid:has(> .title) {
    padding: 0 22px;
}

  #banner-image > .aem-Grid {
    width: 100%;
  }

  #main-card-grid {
    padding: 0px 16px;
  }

  #button-last-section {
    text-align: center;
  }

  #button-last-section .button.pink-gradient {
    margin-bottom: 20px;
  }

  #questions-about-mbc #main-card-grid {
    padding: 25px 16px 0;
  }

  #header-nav::before {
    background: linear-gradient(
      to right,
      #bfb79e,
      #fbcea8,
      #c5cb96,
      #6cc08e,
      #e1d1d7,
      #b5cec9
    );
    content: "";
    height: 10px;
    left: 0;
    position: absolute;
    top: 116px;
    width: 100%;
            z-index: 3;
  }

  a[title="Caregivers"] + ul.cmp-navigation__dropdownmenu > li:nth-child(2) a {
    white-space: normal;
    min-width: 462px;
  }
  
#understanding-mbc #main-section #banner-main-border #banner-image > .aem-Grid img,
#living-with-mbc-page #main-section #banner-main-border #banner-image > .aem-Grid img,
#caregivers #main-section #banner-main-border #banner-image > .aem-Grid img {
    width: 100.2%;
    max-width: 100.2%;
}
}

/* mobile specific code */

/************************desktop-version starts here***********************/
@media screen and (min-width: 992px) {
  /* banner starts here */
  #header-nav {
    max-height: 156px;
  }

  #header-nav::before {
    background: linear-gradient(
      to right,
      #bfb79e,
      #fbcea8,
      #c5cb96,
      #6cc08e,
      #e1d1d7,
      #b5cec9
    );
    content: "";
    height: 10px;
    left: 0;
    position: absolute;
    top: 155px;
    width: 100%;
  }

  #main-section {
    padding-top: 164px;
  }
#taking-active-role #main-section {
        padding-top: 164px;
    }

  #home-page #main-section {
    /*padding-top: 82px;*/
  }

  #main-section #banner-main-border #banner-main-text span {
    font: 400 64px/70px "Open Sans", sans-serif;
    margin: 0px 0px 15px 0px;
    letter-spacing: -2.1px;
   
  }
#living-with-mbc-page #main-section #banner-main-border #banner-main-text span {
     font: 400 64px/70px "Open Sans", sans-serif;
}
  #banner-content {
    padding: 40px 0px 40px 0px !important;
  }

  #main-section #banner-main-border .container:has(> #content-section-banner) {
    width: 100%;
    margin-left: 40px;
    padding: 0;
  }

  #banner-main-text .cmp-title__text {
    margin-top: 0px;
    margin-bottom: 40px;
  }
#questions-about-mbc #banner-main-text .cmp-title__text {
        margin-bottom: 9px;
    }
  #banner-content #banner-main-border > .aem-Grid {
    border-radius: 56px;
    gap: 37px;
    justify-content: end;
    border-top-right-radius: 295px;
    flex-direction: row;
  }

  #main-section .banner-sub-text,
  #main-card-grid .card-section-grid .card-text-sub {
    font-size: 27px;
    line-height: 40px;
    max-width: 550px;
    
  }
   #main-section .banner-sub-text{
       letter-spacing: -0.2px;
   }
  #living-with-mbc-page #banner-main-border .aem-Grid .container:has(#banner-image) {
    max-width: 445px;
    max-height: 327px;
  }
  #living-with-mbc-page #banner-main-border .banner-subhead.banner-sub-text {
    max-width: 665px;
  }
  #caregivers #banner-main-border .aem-Grid .container:has(#banner-image) {
    max-width: 471px;
    max-height: 406px;
  }

  #caregivers #banner-main-border .banner-subhead.banner-sub-text {
    max-width: 650px;
  }

  #questions-about-mbc #main-section .banner-sub-text {
    max-width: 627px;
  }
  
  #questions-about-mbc #banner-main-border #content-section-banner .breadcrumb.pink-text {
        margin-bottom: 30px;
    }

     #questions-about-mbc #main-section #banner-main-border #banner-main-text span
    {
     font: 400 64px / 54px "Open Sans", sans-serif;
    }
    #subtypes-of-mbc #banner-main-border .container:has(> #banner-image) {
    max-width: 467px;
    max-height: 403px;
  }

  #banner-main-border .container:has(> #banner-image) {
    max-width: 577px;
  }
    #importance-of-emotional-health  #banner-main-border .container:has(> #banner-image) {
        max-width: 598px;
    }

  #understanding-mbc #banner-main-border .container:has(> #banner-image) {
    max-width: 475px;
    max-height: 436px;
  }
  
  #understanding-biomarkers #banner-content #banner-main-border > .aem-Grid
    {
        gap:21px;
    }
    #understanding-biomarkers p.banner-subhead.banner-sub-text
    {
        max-width:700px;
    }
        #understanding-biomarkers #main-section #banner-main-border #banner-main-text
    {
        margin: 0px 0px 30px 0px;
    }
    #understanding-biomarkers #banner-main-text .cmp-title__text
    {
        margin-bottom:0px;
        margin-top:0px;
    }
    

  #understanding-mbc
    #content-section-banner
    .banner-text-wrapper
    .banner-subhead.banner-sub-text {
    max-width: none;
  }

  #main-section #banner-content #banner-main-border {
    padding: 0;
  }

  /* banner ends */

  /* card code  */
  #main-card-grid
    #card-section
    > .aem-Grid
    > .container.responsivegrid
    > .cmp-container
    > .aem-Grid {
    flex-direction: row;
    gap: 40px;
  }

  #main-card-grid #card-section .aem-Grid:has(> .title) {
    margin-bottom: 40px;
  }

  #main-card-grid .card-main-title {
    margin: 60px 0 40px;
    max-width: 100%;
  }
#caregivers #main-card-grid .card-main-title {
       margin-bottom: 35px;
    }
  #main-card-grid
    #card-section
    > .aem-Grid
    > .container
    > .cmp-container
    > .aem-Grid
    > .container,
  #main-card-grid
    #card-section
    > .aem-Grid
    > .container
    > .cmp-container
    > .aem-Grid
    > .container
    > .cmp-container,
  #main-card-grid #card-section .aem-Grid:has(> .title) {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }
  #understanding-mbc .button.pink-gradient:has(#button-r1) {
    margin-top: 95px;
  }
  #understanding-mbc .button.pink-gradient:has(#button-r2) {
    margin-top: 55px;
  }
  #understanding-mbc .button.pink-gradient:has(#button-r3) {
    margin-top: 95px;
  }
  #living-with-mbc-page .card-section-grid .card-text-sub.bottom {
    max-width: none;
  }
  #living-mbc #main-card-grid .card-section-grid .card-text-sub.bottom {
    max-width: 1220px;
  }
  
  #living-with-mbc-page .button.pink-gradient:has(#button-r1),
#living-with-mbc-page .button.pink-gradient:has(#button-r2),
#living-with-mbc-page .button.pink-gradient:has(#button-r3){
    margin-top: auto;
}
  #button-last-section > .aem-Grid {
    flex-direction: row;
    margin-bottom: 40px;
  }

  #main-card-grid .aem-Grid::before,
  #main-card-grid .aem-Grid::after {
    display: none;
  }

  #caregivers #main-card-grid .card-section-grid .card-text-sub.section {
    max-width: 550px;
  }
  #caregivers #main-card-grid .card-section-grid .card-text-sub.bottom {
    max-width: 1008px;
    margin: 0 auto;
  }
  #caregivers .button.pink-gradient:has(#button-r1) {
    margin-top: 40px;
  }
  
  #living-with-mbc-page .button.pink-gradient:has(#side-effect){
    margin-top: 40px;
  }
  #main-card-grid #card-section .aem-Grid:has(> .title) .button a {
    min-height: 60px;
    min-width: 168px;
    padding: 14px 15px;
  }
      #caregivers .button.pink-gradient:has(#button-b26016682d) {
        margin-top: 15px;
    }
  #main-card-grid #card-section .aem-Grid:has(> .title) {
  gap: 30px;
  padding:40px;
}
  /* card code  */
  #caregivers #banner-main-text .cmp-title__text,
#living-with-mbc-page #banner-main-text .cmp-title__text,
#understanding-mbc #banner-main-text .cmp-title__text
{
   margin-top:40px;
}
}

/************************desktop-version ends here***********************/

/***************compatbilty Code****************/

@media screen and (min-width: 768px) and (max-width: 991px) {
  #main-section #banner-main-border #banner-image > .aem-Grid .image::after {
    border-top-left-radius: 53%;
    border-top-right-radius: 383px;
  }
}

@media screen and (min-width: 430px) and (max-width: 991px) {
  #main-card-grid .card-main-title {
    max-width: 100%;
  }
}

@media screen and (max-width: 400px) {
  #banner-content #banner-main-border > .aem-Grid {
    border-top-right-radius: 200px;
    border-top-left-radius: 200px;
  }
}

/***************compatbilty Code****************/

/***********************************Living-with-mbc ends here*******************************/

/* caregivers and understanding MBC code starts here */

/* Caregivers css starts */
/*********************************** Caregivers *******************************/
/*  Banner Section  */
#header-nav {
  background-color: rgba(255, 255, 255, 0.6); /* transparente */
  backdrop-filter: blur(12px);
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 9999;
  -webkit-backdrop-filter: blur(12px);
}

#caregivers .banner-wrapper .banner-section .content-wrapper {
  border-radius: 480px 480px 20px 20px;
}
/*  Main Card Section  */
#caregivers
  #card-section
  > .aem-Grid
  > .container.responsivegrid.aem-GridColumn.aem-GridColumn--default--12
  > .cmp-container
  > .aem-Grid.aem-Grid--12.aem-Grid--default--12 {
  align-items: center;
}
/*  Buttons Display  */
#caregivers #button-last-section #bottom-right-buttons > div {
  align-items: center;
  display: flex;
  flex-direction: column;
}

/*understnading biomarker mobile*/

#understanding-biomarkers #main-section #banner-main-border #banner-main-text
    {
        margin: 0px 0px 16px 0px;
    }

/*  Desktop  */
/*  Banner Section */
@media (min-width: 992px) {
  #caregivers .banner-wrapper .banner-section .content-wrapper {
    border-radius: 56px 611px 295px 56px;
  }

  #caregivers
    .banner-wrapper
    .banner-section
    .content-wrapper
    .content-section {
    padding: 0;
  }

  #banner-content
    > .aem-Grid.aem-Grid--12.aem-Grid--default--12
    > :first-child.container.responsivegrid::before {
    top: 157px;
  }
  /*  Main Card Section  */
  #caregivers
    #card-section
    > .aem-Grid
    > .container.responsivegrid.aem-GridColumn.aem-GridColumn--default--12
    > .cmp-container
    > .aem-Grid.aem-Grid--12.aem-Grid--default--12 {
    align-items: stretch;
  }
  /* Last Buttons Section   */
  #card-section
    .display-three-buttons
    > #button-last-section
    > .aem-Grid.aem-Grid--12.aem-Grid--default--12 {
    display: flex;
    gap: 48%;
  }

  #card-section
    .display-three-buttons
    > #button-last-section
    > .aem-Grid.aem-Grid--12.aem-Grid--default--12
    #bottom-right-buttons
    > .aem-Grid.aem-Grid--12.aem-Grid--default--12 {
    display: flex;
    gap: 19px;
    justify-content: end;
  }

  #caregivers #button-last-section #bottom-right-buttons > div {
    flex-direction: row;
  }
}
/*********************************** Understanding MBC CSS Starts *******************************/
/*  Banner Section  */
#understanding-mbc #main-section .banner-text {
  font-size: 45px;
}

#understanding-mbc
  .banner-wrapper
  .banner-section
  .content-wrapper
  .content-section {
  width: 100%;
}

 #subtypes-of-mbc #main-section #banner-main-border #banner-main-text {
  margin: 0px;
}


/*  Desktop */
/*  Banner Section */
@media (min-width: 992px) {
  #understanding-mbc #main-section .banner-text {
    font-size: 65px;
  }
  #subtypes-of-mbc #banner-content
  {
    padding: 47px 0px 41px 0px !important;
    }
   #subtypes-of-mbc #main-section #banner-main-border #banner-main-text 
   {
  margin: 0px;
}
    
   #subtypes-of-mbc #button-last-section > .aem-Grid {
    flex-direction: row;
    margin-bottom: 0px;
  }

    #subtypes-of-mbc #banner-main-border #content-section-banner .button.pink-gradient:has(#download-button) {
        margin: 30px 0 10px;
    }
    #understanding-biomarkers #pink-btn .aem-Grid {
    display: flex;
}

    
  #subtypes-of-mbc .content-card-section
{
padding: 0px;
}  

#subtypes-of-mbc .content-card-section.border-top-right {
    margin-bottom: 0px;
    min-height:422px;
}
#understanding-mbc #main-section {
    padding-top: 164px;
  }
   #importance-of-emotional-health   #main-section
   {
       padding-top: 164px;
    }
    .mt-40
{
    margin-top :40px !important;
}
    
}

.mb-40
{
    margin-bottom:40px;
}

.mb-0
{
    margin-bottom: 0px !important;
}
/* caregivers and understanding MBC code ends here */

/*living with mBC comaptiblity*/
@media screen and (min-width: 992px) and (max-width:1400px){
#living-with-mbc-page #main-card-grid #card-section,
#living-with-mbc-page #button-last-section{
    padding-left:25px !important;
        padding-right:25px !important; 
}
 /*compatiblity code for caregivers*/
 #caregivers  #main-card-grid #card-section,
#living-with-mbc-page #button-last-section
{
    padding-left:25px !important;
        padding-right:25px !important;
}
#main-section #banner-main-border .container:has(> #content-section-banner) {
    margin-bottom: 30px;
}

}

/*understanding compatiblity*/
@media screen and (min-width: 320px) and (max-width:385px)
{
 #understanding-mbc #main-section #banner-main-border #banner-main-text span
  {
      font-size: clamp(36px, 2vw, 45px) !important;
  }
 #understanding-mbc #main-card-grid .card-sub-title
  {
    font-size: clamp(36px, 2vw, 45px) !important;  
  }
}

 @media screen and (min-width:401px) and  (max-width:516px){
#banner-content #banner-main-border > .aem-Grid:has(#banner-image){
    border-top-right-radius: 500px !important;
    border-top-left-radius: 500px !important;
}

#understanding-clicnical-trails #banner-content #banner-main-border > .aem-Grid{
    border-top-right-radius: 500px !important;
    border-top-left-radius: 500px !important;
}
#types-of-therapy #banner-content #banner-main-border > .aem-Grid{
    border-top-right-radius: 500px !important;
    border-top-left-radius: 500px !important;
}
#talking-about-mbc #banner-content #banner-main-border > .aem-Grid{
    border-top-right-radius: 500px !important;
    border-top-left-radius: 500px !important;
}

#understanding-biomarkers #banner-content #banner-main-border > .aem-Grid
{
    border-top-right-radius: 500px !important;
    border-top-left-radius: 500px !important;
 }
 
 #what-genetic-testing-can-tell-you #banner-content #banner-main-border > .aem-Grid{
    border-top-right-radius: 500px !important;
    border-top-left-radius: 500px !important;
 }

}
@media screen and (min-width:517px) and  (max-width:580px){
#what-genetic-testing-can-tell-you #banner-content #banner-main-border > .aem-Grid{
    border-top-right-radius: 500px !important;
    border-top-left-radius: 500px !important;
 }
}