/* ============================== Retirement =================================*/
/* ======================= Retire Age ======================= */

/* Fix for Issue #31 - Check With Nisha on Feedback since it has been fix*/ 
/* Fix for Issue #35 - Check With Nisha on Feedback since it has been fix*/ 
/* Fix for Issue #36 - Check With Nisha on Feedback since it has been fix*/ 
/* Fix for Issue #40 - Check With Nisha on Feedback since is not a feedback*/ 
/* Fix for Issue #44 - Check With Nisha on Feedback since is not a feedback*/ 
/* Fix for Issue #45 - Check With Nisha on Feedback since is not a feedback*/ 

.needs-home-avatars { /* Fix for Issue #46 */
    grid-template-rows: 96%;
}

.f-40b{ /* Fix for Issue #59 - Already Follow Brand Guideline but added Shadow to make it even bolder look */
    font-size: 40px;
    font-weight: 700;
    font-family: "Helvetica Neue", sans-serif

}

.mh-95{  /* Fix for Issue #60 */
    max-height: 95% !important;
    }
    
.mh-75{ /* Fix for Issue #62 */
    max-height: 75% !important;
}

#retirement-ideal button.choice:hover, 
#retirement-ideal button.choice:focus, 
#retirement-ideal .button-needs[data-required="selected"], 
#retirement-ideal .button-needs.selected{ /* Fix for Issue #66 - Need Check With Ying - She also using this CSS - Replacing temporaily to show fix */
    background-position: center bottom 45px !important;
}

/* Fix for Issue #67 */
#retirement-ideal .slick-slide.slick-active[data-slick-index="3"] button.choice:hover,
.slick-slide.slick-active[data-slick-index="3"] button.choice:focus,
.slick-slide.slick-active[data-slick-index="3"] .button-needs[data-required="selected"],
.slick-slide.slick-active[data-slick-index="3"] .button-needs.selected {
    background-image: none;
}

#retirement-age .education-support{  /* Fix for Issue #68 */
    grid-template-rows: 12% 80% !important;
}

.bg-education-gap{
    background-size: 73%;
    background-position: center bottom;
}

.mh-95mb{  /* Fix for Issue #69 */
    max-height: 90% !important;
    margin-bottom: 50px;
    }

    
.bg-protection {
    background-size: 85% !important;
    background-position: bottom center !important;
                 }

.f-34{
    font-family: 'HELVETICA NEUE';
}

.needs-radio:checked + label::after {
   /*content:"✔";*/
   /*content:"✓";*/
   content: url("http://127.0.0.1:8000/images/images/Vector.png"); 
   left: 0px;
}

.timeline-needs {
    padding-right: 10px;
}

p.nav-text{
    padding-right: 70px;
}

/*
#retirement-home .bg-needs-home {
    background-size: contain;
}
*/

.sidebanner {
    padding-left: 0px; /* Adjust the value as needed */
}


#gap svg g{
    stroke-width: 40px;
}


/* To fix issue #85 */
.main-logo {
    max-width: 200px;
}

/* To fix issue #89 */
@media screen and (max-width: 360px) and (max-height: 740px) {
    .homeVector {
        width: 90%;
    }
}

@media only screen and (max-width: 600px) {
    h2 {
      font-family: "Helvetica Neue", sans-serif ; 
      font-size: 30px;
      font-weight: 700;
      line-height: 36px;
      letter-spacing: 0em;
    }

    p {
        font-family: Helvetica Neue;
        font-size: 16px;
        font-weight: 400;
        line-height: 24px;
        letter-spacing: 0em;
    }

    h1 {
        font-family: Helvetica Neue;
        font-size: 30px ;
        font-weight: 700 !important;
        line-height: 36px ;
        letter-spacing: 0em;
    }
  }

/* Fix Issue #88 - Default styles for both mobile and desktop */
.homepage-container {
    text-align: left; /* Align left by default */
}

/* Media query for screens with a maximum width of 767px (typical for mobile devices) */
@media (max-width: 767px) {
    .homepage-container {
        text-align: center; /* Align center for mobile */
    }
}

/* Fix Issue #57 - Default styles for both mobile and desktop */
.timeline-item-needs::after {
    content: '';
    position: absolute;
    right: 15px;
    top: 50%;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: #fff;
    transform: translateY(-50%);
    border: 3px solid #707070;
}
 
.timeline-item-needs.active::after {
    border: 3px solid #C21B17;
    background: #C21B17;
}

@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait) {
    .navbar-scroll.scrolled-down {
        transform: translateY(0%);
        transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    }
}

.customtop {
    top: 75%;
}

/* Add these styles to your existing CSS file */

.mobile-dropdown-container {
    position: relative;
    display: inline-block;
  }
  
  .drag-handle {
    cursor: grab;
    font-size: 20px;
    background-color: #3498db;
    color: #fff;
    border: none;
    padding: 10px;
    margin: 0;
  }
  
  .mobile-dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1;
  }
  
  .mobile-dropdown-content button {
    width: 100%;
    padding: 10px;
    text-align: left;
    border: none;
    background-color: inherit;
    cursor: pointer;
  }

  
/* 
Right Side Sidebar To Fix 

.rightsidebar-item::after{
    content: '';
    position: absolute;
    left: 25px;
    top: 50%;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: #C21B17;
    transform: translateY(-50%);
    border: 3px solid #C21B17;
}

.rightsidebar-item.active::after{
    content: '';
    position: absolute;
    left: 25px;
    top: 50%;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: #ffffff;
    transform: translateY(-50%);
    border: 3px solid #707070;
}

 */




/* Fix for Issue #69 - Check With Nisha on Feedback since is not a feedback*/ 

/* Issue #29 - family-dependant - I choose Single but it asking must have PARENTS - What if parent both had pass away? */ 

.modern-dropdown-content button {
    display: block;
    width: 100%;
    padding: 10px;
    text-align: left;
    border: none;
    background: none;
    cursor: pointer;
}

.modern-dropdown-content button:hover {
    background-color: #ddd;
}

.show {
    display: block;
}