#cancer-survivor-page{ }
.masthead_banner{ max-height: 100vh; height: 100vh; position: relative;}
.masthead_inneer{ height: 100%;}
.masthead_inneer img{ height: 100%; width: 100%; object-fit: cover;}
.banner-caption{ position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%); text-align: center; color: #fff; z-index: 1;  width: 100%; max-width: 80vw;}
.banner-caption h1{ font-size:75px; line-height: 1.2; font-weight: 700; text-transform: uppercase;}
.banner-caption p{ font-size: 45px; line-height: 1.2; font-weight: 400; text-transform:inherit;  color: #fff; max-width:1024px; width: 100%; margin: 0 auto;}
.banner-caption p span{ font-weight: 700;}


/**intro**/
.container{ max-width: 88vw !important; width: 1680px !important; margin: 0 auto;}
.purple-color{ color: #9d85be;}
.text-gray{ color: #6e6e6e;}
.common-padding{ padding: 80px 0;}
body{ color: #000;}
.text-uppercase{ text-transform: uppercase;}
h2{ font-size: 50px; line-height: 1.2; font-weight: 700; text-transform:inherit;  width: 100%; margin: 0 auto 10px;}
.intro-text{ font-size: 45px; line-height: 1.2; font-weight: 400; text-transform:inherit;  color: #6e6e6e; width: 100%; margin: 0 auto; max-width: 1080px;}

/**survivor stories**/
.cancer-survivor-stories{ padding-bottom: 80px; position: relative;}
.survivor-story-row::before{ content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 58%; background: #ebe4f3; z-index: -1;}
.survivor-story-row{ position: relative; padding:80px 0;}
.survivor-story-row + .survivor-story-row{ padding-top: 80px;}
.survivor-story-image img{ width: 100%; border-radius: 25px; display: block;}
.survivor-story-content,
.survivor-story-row .order-lg-1 .survivor-story-content{ padding: 0px; padding-top: 8vw;}
.survivor-name-band{ position: relative; margin-bottom: 20px; }
.survivor-name{ display: inline-block; background: #9d85be; color: #fff; font-size: 52px; line-height: 1.2; font-weight: 700; padding:5px 24px; margin: 0 auto ; border-radius:20px;}
.survivor-subtitle{ font-size: 32px; line-height: 1.25; font-weight: 700; color: #000; margin: 0 0 20px;}
.survivor-description{ font-size: 24px; line-height: 1.25; font-weight: 400; color: #6e6e6e; margin: 0;}

.youtube-link{ position: relative; display: block;}
.youtube-link .youtube-icon{ position: absolute;top: 50%; left: 50%;transform: translate(-50%, -50%); color: #000;  font-size: 40px;  line-height: 1;  font-weight: 700;  border-radius: 0;  width: 70px;  height: 50px; opacity: 0; transition: all 0.3s ease;}
.youtube-link:hover .youtube-icon{ opacity: 1;}

/**diagnosis section**/
.cancer-survivor-diagnosis{ position: relative; overflow: hidden; background: #fff;}
.diagnosis-heading{ margin-bottom: 40px;}
.diagnosis-heading .purple-color{ display: block; margin-bottom: 5px;}
.diagnosis-heading-bold{ display: block; color: #000; font-weight: 700;}
.diagnosis-highlight-box{ max-width: 1080px; margin: 0 auto; padding: 35px 50px; background: #f7f3fa; border: 2px solid #d5c8e4; border-radius: 25px;}
.diagnosis-highlight-box p{ font-size: 32px; line-height: 1.35; font-weight: 400; color: #333; margin: 0; text-transform: none;}

.diagnosis-background{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1;}
.diagnosis-background img{ width: 100%; height: 100%; object-fit: cover;}
.diagnosis-background-content{ position: relative; z-index: 2;}

@media all and (max-width:1780px) and (min-width:1280px){
  .banner-caption h1{font-size: 4vw;}
  .banner-caption p {font-size: 2.75vw; max-width: 80%;}
  h2 {font-size: 2.85vw;}
  .diagnosis-heading span{ display: inline-block !important;}
  .survivor-name {font-size:2.75vw;}
  .intro-text{ font-size: 2.65vw;
        max-width: 100%;}
   .survivor-subtitle{ font-size: 1.75vw;}
   p{ font-size: 1.25vw;}

   .survivor-description{ font-size: 1.5vw;}   
   .diagnosis-heading{ font-size:2.45vw;}
   .diagnosis-highlight-box {  max-width: 860px; padding: 20px 40px;}
   .diagnosis-highlight-box p{ font-size: 2vw;}
   
}

@media (max-width: 991px){
    .survivor-story-content,
    .survivor-story-row .order-lg-1 .survivor-story-content{ padding: 30px 0 0;}
    .survivor-story-row{ padding: 40px 0;}
    .survivor-name{ font-size: 24px;}
    .survivor-subtitle{ font-size: 24px;}
    .survivor-description{ font-size: 20px;}

    .masthead_banner { max-height: inherit;  height: inherit;  margin-top: 62px;}
    .banner-caption{ position: relative; top: auto; left: auto; transform: none; text-align: left; color: #000; z-index: 1;  width: 100%; max-width: 100%; background: #efefef; padding: 40px 20px;}
    .banner-caption p{ color: #6e6e6e;}

    .common-padding { padding: 40px 0;  }
  .container {max-width: 95% !important;}
  .survivor-story-row::before{ height: 65%;}
  .survivor-story-row + .survivor-story-row { padding-top: 40px;}
  .cancer-survivor-stories{ padding-bottom: 40px;}

    H2{ font-size: 32px;}
    .intro-text{ font-size: 28px;}

    .banner-caption h1{ font-size: 38px;}
    .banner-caption p{ font-size: 28px;}
    .survivor-name{ font-size: 24px;}
    .survivor-subtitle{ font-size: 24px;}
    .survivor-description{ font-size: 20px;}
    .survivor-story-image img{ border-radius: 15px;}
    .survivor-story-content,
    .survivor-story-row .order-lg-1 .survivor-story-content{ padding: 20px 0 0;}
    .survivor-story-row .order-lg-1 .survivor-story-content{ padding-top: 4vw;}

    .diagnosis-highlight-box{ padding: 25px 30px;}
    .diagnosis-highlight-box p{ font-size: 22px;}

    
}