*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
html{
    font-size: 62.5%;
    color: var(--primary-color);
}
body{
    font-family: 'Manrope' , sans-serif;
}
section{
   height: 100vh;
   background-image: url('../assets/rendilargerscreenbg.jfif');
   display: flex;
   justify-content: center;
   align-items: center;
   background-size: cover;
   background-repeat: no-repeat;
}
:root{
    --primary-color: #1F4F4D;
    --secondary-color: ;
    --tetiary-color: ;
}

/* Home navigation section */
.nav-bar{
    position: fixed;
    width: 100%;
    z-index: 999;
    background-color: #fff;
}
.bar-icon{
    font-size: 2.5rem;
    display: none;
}
.nav-bar-rendilogo{
    width: 10rem;
    height: 5rem;
    margin-left: 1rem;
}
.header-div2{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 2rem;
}
.header-div2 ul{
     display: flex;
     list-style-type: none;
     gap: 2rem;
     font-size: 1.5rem;
}
.sidebar{
   position: fixed;
   right: 0;
   top: 0;
   display: none;
   flex-direction: column;
   justify-content: flex-start;
   width: 250px;
   height: 100vh;
   backdrop-filter: blur(10px);
   z-index: 999;
   box-shadow: -10px 0 10px  rgba(0, 0, 0, 0.1)
} 
.sidebar-content{
    display: flex;
    flex-direction: column;
}
@media(max-width: 800px){
    .bar-icon{
        display: none;
    }
      .hideOnMobile{
        display: none;
    }
}



.body_header-nav-bar-rendilogo{
    width: 10rem;
    height: 5rem;
    margin-left: 1rem;
}
.body_header-nav-bar-list-container{
    display: flex;
    gap: 3rem;
    justify-content: center;
    align-items: center;
    list-style: none;
    font-size: 1.5rem;
}
.body_header-nav-bar-list-container  > li{
    color: var(--primary-color);
    cursor: pointer;
}

.signup-btn{
    background: linear-gradient(90deg, #2F6F6C 0%, #4FA39A 100%);
    padding: 1rem 2rem;
    border-radius: 30px;
    color: white;
    cursor: pointer;
}
.signup-btn:hover{
    transition: 0.5s ease;
    background: linear-gradient(90deg, #58B1A6 0%, #2A6764 100%);
}


@media(min-width: 800px){
     .hamburger{
      display: none;  
      }
}
  .x-icon{
    font-size: 2rem;
}
a{
    text-decoration: none;
    color: var(--primary-color);
}
@media(max-width: 400px){
    .body_header-nav-bar-rendilogo{
        width: 10rem;
        height: 5rem;
    }
    .hamburger{
      font-size: 2rem; 
      }
      .body_header-nav-bar{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;
    position: fixed;
    z-index: 999;
    width: 100%;
    background-color: #f4f7f6;
    margin-top: -0.5rem;
}   
}

.main-section4{
    display: grid;
    grid-template-columns: 30rem 120rem;
    grid-template-rows: 10rem 80rem;
    gap: 0rem;
}

/* DESKTOP SIDEBAR */
.desktop-sidebar{
    z-index: 999;
    background-color: rgba(255, 255, 255, 0.625);
    backdrop-filter: blur(10px);
    box-shadow: 5px 0 10px rgba(0,0,0,0.3);
    grid-row-start: 1;
    grid-row-end: 3;
}

.desktop-sidebar-container-ul{
    display: flex;
    list-style: none;
    gap: 2rem;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    margin-top: 4rem;
    font-size: 1.5rem;
}

.desktop-sidebar-container-ul > li >a{
    width: 25rem;
    height: 5rem;
    display: flex;
    align-items: center; 
    border-radius: 2rem;
    background-color: #5a786e;
    color: white;
    margin-left: 2rem;
    padding-left: 2rem;
}
.desktop-sidebar-container-ul > li> a:hover{
    background-color: var(--primary-color);
    transition: 0.5s;
}
.ph-less-than{
    font-size: 2.5rem;
    background-color: #5a786e;
    color: white;
    border-radius: 10px;
    padding: 0.5rem;
}
.ph-less-than:hover{
    background-color: var(--primary-color);
    transition: 0.5s;
}

.section4-top-bar{
     background-color: white;
     font-size: 2.5rem;
     display:flex;
     align-items: center;   
     justify-content: space-around; 
     z-index: 999;
     box-shadow: 0px 12px 20px rgba(0,0,0,0.3);
}
.desktop-sidebar-container-ul{
    display: flex;
    list-style: none;
    gap: 2rem;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    margin-top: 2rem;
    font-size: 1.5rem;
}
.desktop-sidebar-container-ul > li{
    margin-top: 0.5rem;
}

.desktop-sidebar-container-ul > li >a{
    width: 25rem;
    height: 5rem;
    display: flex;
    align-items: center; 
    border-radius: 2rem;
    background-color: #5a786e;
    color: white;
    margin-left: 1rem;
    padding-left: 2rem;
}
.desktop-sidebar-container-ul > li> a:hover{
    background-color: var(--primary-color);
    transition: 0.5s;
}
.avatar{
    background-color: var(--primary-color);
    color: white;
    padding: 1rem;
    border-radius: 30px;
}



/* Heero section */
.body_hero-section{
    display: flex;
    align-items: flex;
    justify-content: flex-start;
    align-items: center;
    background-color: #f4f4f7;
    height: 100vh;
    background-position: center;
    background-size: cover;
    background-image: none;
}
.body_hero-section-container{
    padding-left: 5rem;
    display: flex;
    flex-wrap: wrap;
}
.body_herosection-content{ 
    display: flex;   
    flex-direction: column;
    align-items: flex-start;
    gap: 2rem;
    width: 50rem;
    margin-top: 15rem;
}
.body_herosection-header{
    font-size: 5rem;
    font-weight: 500;
}
.body_herosection-paragraph{
    font-size: 2rem;
    line-height: 1.8;
}
.body_hero-section-CTA-container{
    display: flex;
    flex-direction: column;
}

.body_hero-section-CTA-btn{
    background: linear-gradient(90deg, #2A6764 0%, #58B1A6 100%);
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1.5rem 0;
    width: 20rem;
    font-size: 1.5rem;
    border-radius: 35px;
}
.body_hero-section-CTA-btn:hover{
    transform: translateY(-2px);
    transition: 0.5s ease;
    background: linear-gradient(90deg, #58B1A6 0%, #2A6764 100%);
}
.body_hero-section-CTA-link{
    padding-top: 2rem;
    font-size: 1.5rem;
}
.body_hero-section-image{
    width: 60rem;
    height: 50rem;
    position: absolute;
    right: 0;
}
.body_herosection-footer{
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
    text-align: center;
    background-color: #f4f4f7;
    padding-bottom: 3rem;
    text-align: center;
}
.CTA-texts{
    font-size: 1.5rem;
    padding-top: 1rem;
    margin-left: -1rem;
    width: 60rem;
    display: flex;
    flex-wrap: wrap;
}
.ph-dot{
    font-size: 2rem;
}
.body_herosection-footer1{
    display: none;
}
/* hero section responsiveness */
@media(min-width: 1440px){
    .body_herosection-header{
    font-size: 6rem;
    font-weight: 500;
    }
    .body_herosection-paragraph{
    font-size: 2.5rem;
    line-height: 1.8;
   }
   .body_herosection-content{ 
    display: flex;   
    flex-direction: column;
    align-items: flex-start;
    gap: 2rem;
    width: 70rem;
    margin-top: 15rem;
    }
}
@media(max-width: 1250px){
    .body_herosection-header{
    font-size: 3rem;
    font-weight: 500;
    }
    .body_herosection-paragraph{
    font-size: 2rem;
    line-height: 1.8;
    }
   .body_hero-section-image{
    width: 40rem;
    height: 50rem;
    margin: auto;
    margin-top: -40rem;
    }
    .body_hero-section-container{
    padding-left: 5rem;
    margin-top: -9rem;
    display: flex;
    flex-direction: column;
    }
}
@media(max-width: 1030px) and (max-height:  1400px){
    .body_hero-section-image{
    width: 48rem;
    height: 50rem;
    position: absolute;
    right: 0;
    }
}
@media(max-width: 950px){
    .body_herosection-header{
    font-size: 3rem;
    font-weight: 500;
    }
    .body_herosection-paragraph{
    font-size: 2rem;
    line-height: 1.8;
    }
   .body_hero-section-image{
    width: 40rem;
    height: 50rem;
    position: static;
    margin-top: 0rem;
    }
    .body_hero-section-container{
    margin: auto;
    }
}
@media(max-width: 700px){
    .body_herosection-header{
    font-size: 3rem;
    width: 45rem;
    font-weight: 500;
    }
    .body_herosection-paragraph{
    font-size: 1.5rem;
    line-height: 1.8;
    width: 40rem;
    }
   .body_hero-section-image{
    width: 40rem;
    height: 50rem;
    position: static;
    }
    .body_hero-section-container{
    margin: auto;
    }
    .CTA-texts{
    font-size: 1.5rem;
    padding-top: 1rem;
    margin-left: -1rem;
    width: 30rem;
    display: flex;
    flex-wrap: wrap;
    }
}
@media(max-width: 550px){
    .body_herosection-header{
    font-size: 2.5rem;
    width: 35rem;
    font-weight: 500;
    }
    .body_herosection-paragraph{
    font-size: 1.3rem;
    line-height: 1.8;
    width: 35rem;
    }
   .body_hero-section-image{
    width: 35rem;
    height: 35rem;
    position: static;
    }
    .body_hero-section-container{
    margin: auto;
    padding-left: 0;
    }
    .CTA-texts{
    font-size: 1.5rem;
    padding-top: 1rem;
    margin-left: -1rem;
    width: 30rem;
    display: flex;
    flex-wrap: wrap;
    }
    .body_herosection-footer{
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
    text-align: center;
    background-color: #f4f4f7;
    padding-bottom: 1rem;
    text-align: center;
    width: 30rem;
    }
    .body_herosection-content{ 
    display: flex;   
    flex-direction: column;
    align-items: flex-start;
    gap: 2rem;
    width: 33rem;
    margin-top: 15rem;
    }
    .body_herosection-footer1{
    display: flex;
    text-align: center;
    }
    .body_herosection-footer{
        display: none;
    }
    .body_hero-section{
    display: flex;
    align-items: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    background-color: #f4f4f7;
    height: 120vh;
    background-position: center;
    background-size: cover;
    background-image: none;
    }
}
@media(max-width: 450px){
    .body_hero-section{
    display: flex;
    align-items: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    background-color: #f4f4f7;
    height: 100vh;
    background-position: center;
    background-size: cover;
    background-image: none;
    }
}
@media(max-width: 400px){
    .body_herosection-header{
    font-size: 2.5rem;
    width: 35rem;
    font-weight: 500;
    }
    .body_herosection-paragraph{
    font-size: 1.3rem;
    line-height: 1.8;
    width: 35rem;
    }
   .body_hero-section-image{
    width: 35rem;
    height: 35rem;
    position: static;
    }
    .body_hero-section-container{
    margin: auto;
    padding-left: 0;
    }
    .CTA-texts{
    font-size: 1.5rem;
    padding-top: 1rem;
    margin-left: -1rem;
    width: 30rem;
    display: flex;
    flex-wrap: wrap;
    }
    .body_herosection-footer{
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
    text-align: center;
    background-color: #f4f4f7;
    margin-bottom: 0rem;
    text-align: center;
    width: 30rem;
    }
    .body_herosection-content{ 
    display: flex;   
    flex-direction: column;
    align-items: flex-start;
    gap: 2rem;
    width: 33rem;
    margin-top: 15rem;
    }
    .body_herosection-footer1{
        display: flex;
        width: 30rem;
    }
    .body_herosection-footer{
        display: none;
    }
    .body_hero-section{
    display: flex;
    align-items: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    background-color: #f4f4f7;
    height: 100vh;
    background-position: center;
    background-size: cover;
    background-image: none;
    }
}
@media(max-width: 370px){
    .body_hero-section{
     height: 130vh;
    }
}

/* section2 */
/* section2 */
.body_section2{
    height: 100vh;
    background-image: url('../assets/rendilargerscreenbg.jfif');
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    position: relative;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
}
.body_sectionn2-div{
    display: flex;
    flex-direction: column;
    gap: 2rem;
    justify-content: center;
    align-items: center;
    margin-top: 14rem;
}
.body_section2-div-wrapper{
    background-color: rgba(255, 255, 255, 0.625);
    backdrop-filter: blur(10px);
    padding: 2rem 5rem;
    border-radius: 15px;
    box-shadow: 3px 3px  5px  rgba(0, 0, 0, 0.1);
    margin: auto;
    display: flex;
}
.body_section2-div-content-header{
    font-size: 4rem;
    font-weight: 500;
    width: 50rem;
}
.body_section2-div-content-paragraph{
    font-size: 1.5rem;
    width: 60rem;
    line-height: 1.5;
    padding-top: 1rem;
}
.section2-form-div{
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.section2-form-div > label{
    font-size: 1.5rem;
}
.section2-form-div >  input{
    height: 3.5rem;
    padding-left: 1rem;
    border-radius: 5px;
    border: none;
    box-shadow: 3px 3px  5px  rgba(0, 0, 0, 0.1);
}
.continue-with-google-btn{
    height: 5rem;
    background-color: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50px;
    font-size: 1.5rem;
    cursor: pointer;
}
.continue-btn{
    color: white;
    background-color: var(--primary-color);
    display: flex;
    justify-content: center;
    align-items: center;
    height: 5rem;
    border-radius: 50px;
    font-size: 1.5rem;
    cursor: pointer;
}
.continue-btn:hover{
    transform: translateY(-2px);
    transition: 0.5s ease;
}
.body_section2-footer-paragraph{
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding-top: 2rem;
}
.google-logo{
    width: 30px;
}
.or{
    margin: auto;
    font-size: 1.5rem;
}
.next-and-previous-btn{
    display: flex;
    font-size: 2rem;
    margin-bottom: 0rem;
    gap: 15rem;
    border-radius: 10px;
    background-color: #fff;
    align-items: center;
    justify-content: center;
    width: 50rem;
}
.arrow{
    padding: 0rem 1rem;
}
.arrow-text{
    font-size: 1rem;
}
/* section 2 responsivenness */
@media(min-width: 1440px){
    .body_sectionn2-div{
    display: flex;
    flex-direction: column;
    gap: 2rem;
    justify-content: center;
    align-items: center;
    margin-top: 8rem;
    }
    .body_sectionn2-div{
    display: flex;
    flex-direction: column;
    gap: 2rem;
    justify-content: center;
    align-items: center;
    margin: auto;
    }
}
@media(max-width: 1250px){
    .body_sectionn2-div{
    display: flex;
    flex-direction: column;
    gap: 1rem;
    justify-content: center;
    align-items: center;
    margin-top: 15rem;
    }
    .body_section2-div-wrapper{
    background-color: rgba(255, 255, 255, 0.625);
    backdrop-filter: blur(10px);
    padding: 2rem 2rem;
    border-radius: 15px;
    box-shadow: 3px 3px  5px  rgba(0, 0, 0, 0.1);
    margin: auto;
    width:  90rem;
    display: flex;
    gap: 2rem;
    }
    .body_section2-div-content-container{
        margin-top: 4rem;
    }
    .body_section2-div-content-header{
    font-size: 4rem;
    font-weight: 500;
    width: 50rem;
    }
   .body_section2-div-content-paragraph{
    font-size: 1.5rem;
    width: 50rem;
    line-height: 1.5;
    padding-top: 1rem;
    }
}
@media(max-width: 1030px) and (max-height: 1370px){
    .body_sectionn2-div{
    display: flex;
    gap: 1rem;
    justify-content: center;
    align-items: center;
    margin-top: 15rem;
    }
    .body_section2-div-wrapper{
    background-color: rgba(255, 255, 255, 0.625);
    backdrop-filter: blur(10px);
    padding: 2rem 2rem;
    border-radius: 15px;
    box-shadow: 3px 3px  5px  rgba(0, 0, 0, 0.1);
    margin: auto;
    width:  90rem;
    display: flex;
    flex-direction: column;
    gap: 4rem;
    margin-top: 20rem;
    }
    .body_section2-div-content-container{
        margin-top: 4rem;
    }
    .body_section2-div-content-header{
    font-size: 4rem;
    font-weight: 500;
    width: 50rem;
    }
   .body_section2-div-content-paragraph{
    font-size: 1.5rem;
    width: 50rem;
    line-height: 1.5;
    padding-top: 1rem;
    }
}
@media(max-width: 1030px) and (max-height: 900px){
    .body_sectionn2-div{
    display: flex;
    flex-direction: column;
    gap: 1rem;
    justify-content: center;
    align-items: center;
    margin-top: 15rem;
    }
    .body_section2-div-wrapper{
    background-color: rgba(255, 255, 255, 0.625);
    backdrop-filter: blur(10px);
    padding: 2rem 2rem;
    border-radius: 15px;
    box-shadow: 3px 3px  5px  rgba(0, 0, 0, 0.1);
    margin: auto;
    width:  90rem;
    display: flex;
    flex-direction: row;
    gap: 2rem;
    }
    .body_section2-div-content-container{
        margin-top: 4rem;
    }
    .body_section2-div-content-header{
    font-size: rem;
    font-weight: 500;
    width: 50rem;
    }
   .body_section2-div-content-paragraph{
    font-size: 1.5rem;
    width: 50rem;
    line-height: 1.5;
    padding-top: 1rem;
    }
}
@media(max-width: 950px){
    .body_sectionn2-div{
    display: flex;
    gap: 1rem;
    justify-content: center;
    align-items: center;
    margin-top: 15rem;
    }
    .body_section2-div-wrapper{
    background-color: rgba(255, 255, 255, 0.625);
    backdrop-filter: blur(10px);
    padding: 2rem 2rem;
    border-radius: 15px;
    box-shadow: 3px 3px  5px  rgba(0, 0, 0, 0.1);
    margin: auto;
    width:  70rem;
    display: flex;
    flex-direction: column;
    gap: 4rem;
    margin-top: 10rem;
    }
    .body_section2-div-content-container{
        margin-top: 4rem;
    }
    .body_section2-div-content-header{
    font-size: 3rem;
    font-weight: 500;
    width: 50rem;
    }
   .body_section2-div-content-paragraph{
    font-size: 2rem;
    width: 50rem;
    line-height: 1.5;
    padding-top: 1rem;
    }
}
@media(max-width: 720px){
    .body_sectionn2-div{
    display: flex;
    gap: 1rem;
    justify-content: center;
    align-items: center;
    margin-top: 15rem;
    }
    .body_section2-div-wrapper{
    background-color: rgba(255, 255, 255, 0.625);
    backdrop-filter: blur(10px);
    padding: 2rem 2rem;
    border-radius: 15px;
    box-shadow: 3px 3px  5px  rgba(0, 0, 0, 0.1);
    margin: auto;
    width:  50rem;
    display: flex;
    flex-direction: column;
    gap: 4rem;
    margin-top: 10rem;
    }
    .body_section2-div-content-container{
        margin-top: 4rem;
    }
    .body_section2-div-content-header{
    font-size: 3rem;
    font-weight: 500;
    width: 45rem;
    }
   .body_section2-div-content-paragraph{
    font-size: 1.5rem;
    width: 45rem;
    line-height: 1.5;
    padding-top: 1rem;
    }
}
@media(max-width: 550px){
    .body_sectionn2-div{
    display: flex;
    gap: 1rem;
    justify-content: center;
    align-items: center;
    margin-top: 15rem;
    }
    .body_section2-div-wrapper{
    background-color: rgba(255, 255, 255, 0.625);
    backdrop-filter: blur(10px);
    padding: 2rem 2rem;
    border-radius: 15px;
    box-shadow: 3px 3px  5px  rgba(0, 0, 0, 0.1);
    margin: auto;
    width:  43rem;
    display: flex;
    flex-direction: column;
    gap: 4rem;
    margin-top: 10rem;
    }
    .body_section2-div-content-container{
        margin-top: 4rem;
    }
    .body_section2-div-content-header{
    font-size: 2.5rem;
    font-weight: 500;
    width: 40rem;
    }
   .body_section2-div-content-paragraph{
    font-size: 1.3rem;
    width: 40rem;
    line-height: 1.5;
    padding-top: 1rem;
    }
    .next-and-previous-btn{
    display: flex;
    font-size: 2rem;
    margin-bottom: 0rem;
    gap: 8rem;
    border-radius: 10px;
    background-color: #fff;
    align-items: center;
    justify-content: center;
    width: 40rem;
    }
}
@media(max-width: 450px){
    .body_sectionn2-div{
    display: flex;
    gap: 1rem;
    justify-content: center;
    align-items: center;
    margin-top: 15rem;
    }
    .body_section2-div-wrapper{
    background-color: rgba(255, 255, 255, 0.625);
    backdrop-filter: blur(10px);
    padding: 2rem 2rem;
    border-radius: 15px;
    box-shadow: 3px 3px  5px  rgba(0, 0, 0, 0.1);
    margin: auto;
    width:  38rem;
    display: flex;
    flex-direction: column;
    gap: 4rem;
    margin-top: 5rem;
    }
    .body_section2-div-content-container{
        margin-top: 4rem;
    }
    .body_section2-div-content-header{
    font-size: 2.5rem;
    font-weight: 500;
    width: 35rem;
    }
   .body_section2-div-content-paragraph{
    font-size: 1.3rem;
    width: 35rem;
    line-height: 1.5;
    padding-top: 1rem;
    }
    .next-and-previous-btn{
    display: flex;
    font-size: 1.5rem;
    margin-bottom: 0rem;
    gap: 5rem;
    border-radius: 10px;
    background-color: #fff;
    align-items: center;
    justify-content: center;
    width: 30rem;
    }
}
@media(max-width: 400px){
    .body_sectionn2-div{
    display: flex;
    gap: 1rem;
    justify-content: center;
    align-items: center;
    margin-top: 15rem;
    }
    .body_section2-div-wrapper{
    background-color: rgba(255, 255, 255, 0.625);
    backdrop-filter: blur(10px);
    padding: 2rem 2rem;
    border-radius: 15px;
    box-shadow: 3px 3px  5px  rgba(0, 0, 0, 0.1);
    margin: auto;
    width:  33rem;
    display: flex;
    flex-direction: column;
    gap: 4rem;
    margin-top: 0rem;
    }
    .body_section2-div-content-container{
        margin-top: 0rem;
    }
    .body_section2-div-content-header{
    font-size: 2.5rem;
    font-weight: 500;
    width: 30rem;
    }
   .body_section2-div-content-paragraph{
    font-size: 1.3rem;
    width: 30rem;
    line-height: 1.5;
    padding-top: 1rem;
    }
    .next-and-previous-btn{
    display: flex;
    font-size: 1.5rem;
    margin-bottom: 0rem;
    gap: 5rem;
    border-radius: 10px;
    background-color: #fff;
    align-items: center;
    justify-content: center;
    width: 30rem;
    }
}
/* SECTION 3 */
.section3-main{
    display: grid;
    grid-template-columns: 1fr 4fr;
    grid-template-rows: 7rem 100vh;
    gap: 0rem;
}


/* DESKTOP-SIDEBAR */
.desktop-sidebar{
    z-index: 999;
    background-color: rgba(255, 255, 255, 0.625);
    backdrop-filter: blur(10px);
    box-shadow: 5px 0 10px rgba(0,0,0,0.3);
    grid-row-start: 1;
    grid-row-end: 3;
}

.desktop-sidebar-container-ul{
    display: flex;
    list-style: none;
    gap: 2rem;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    margin-top: 2rem;
    font-size: 1.5rem;
}
.desktop-sidebar-container-ul > li{
    margin-top: 0.5rem;
}

.desktop-sidebar-container-ul > li >a{
    width: 25rem;
    height: 5rem;
    display: flex;
    align-items: center; 
    border-radius: 2rem;
    background-color: #5a786e;
    color: white;
    margin-left: 1rem;
    padding-left: 2rem;
}
.desktop-sidebar-container-ul > li> a:hover{
    background-color: var(--primary-color);
    transition: 0.5s;
}


.body_section3{
   height: 100vh;
   background-image: url('../assets/rendilargerscreenbg.jfif');
   display: flex;
   gap: 2rem;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   background-size: cover;
   background-repeat: no-repeat;
}
.body_section3-div-wrapper{
    background-color: rgba(255, 255, 255, 0.593);
    backdrop-filter: blur(10px);
    border-radius: 15px;
    box-shadow: 3px 3px  5px  rgba(0, 0, 0, 0.1);
    padding-left: 5rem;
    padding-right: 5rem;
    padding-top: 2rem;
    padding-bottom: 2rem;
    margin-top: 5rem;
}
.body_section3-div-container-header-content{
    font-size: 4rem;
    font-weight: 500;
    width: 50rem;
    background-color: transparent;
    }
.body_section3-div-container-paragraph-content{
    font-size: 1.5rem;
    width: 60rem;
    line-height: 1.8;
    padding-top: 2rem;
    padding-bottom: 2rem;
}
.section3-steps-container{
    position: relative;
    display: flex;
    flex-direction: column;
    font-size: 2rem;
    gap: 1.5rem;
}
.start-assessment-btn{
    background-color: var(--primary-color);
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1.5rem 0;
    font-size: 1.5rem;
    border-radius: 35px;
    margin-top: 2rem;
    margin-bottom: 2rem;
}
.start-assessment-btn:hover{
    transform: translateY(-2px);
    transition: 0.5s ease;
}

.section3-icon{
    font-size: 4.5rem;
}
.section3-steps-paragraph3{
    position: absolute;
    bottom: 1.5rem;
    left: 6rem;
}
.section3-steps-paragraph2{
    position: absolute;
    bottom: 7.5rem;
    left: 6rem;
}
.section3-steps-paragraph1{
    position: absolute;
    bottom: 13.5rem;
    left: 6rem;
}
.body_section3-footer-paragraph{
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

@media(max-width: 1200px){
    .body_section3{
   height: 100vh;
   }
}
@media(max-width: 900px){
    .body_section3{
   height: 115vh;
   }
   .section3-main{
    display: grid;
    grid-template-columns: 1fr 4fr;
    grid-template-rows: 7rem 115vh;
    gap: 0rem;
   }
}
@media(max-width: 700px){
    .body_section3{
   height: 100vh;
   }
    .body_section3-div-wrapper{
    background-color: rgba(255, 255, 255, 0.593);
    backdrop-filter: blur(10px);
    border-radius: 15px;
    box-shadow: 3px 3px  5px  rgba(0, 0, 0, 0.1);
    padding-left: 2rem;
    padding-right: 2rem;
    padding-top: 2rem;
    padding-bottom: 2rem;
    margin-top: 5rem;
    width: 51rem;
    }
    .body_section3-div-container-header-content{
    font-size: 3rem;
    font-weight: 500;
    width: 30rem;
    background-color: transparent;
    }
    .body_section3-div-container-paragraph-content{
    font-size: 1.5rem;
    width: 30rem;
    line-height: 1.8;
    padding-top: 2rem;
    }
   .body_section2-div-content-paragraph{
    font-size: 1.5rem;
    width: 50rem;
    line-height: 1.5;
    padding-top: 1rem;
    }
}
@media(max-width: 500px){
    .body_section3{
   height: 100vh;
   }
    .body_section3-div-wrapper{
    background-color: rgba(255, 255, 255, 0.593);
    backdrop-filter: blur(10px);
    border-radius: 15px;
    box-shadow: 3px 3px  5px  rgba(0, 0, 0, 0.1);
    padding-left: 2rem;
    padding-right: 2rem;
    padding-top: 2rem;
    padding-bottom: 2rem;
    margin-top: 5rem;
    width: 40rem;
    }
    .body_section3-div-container-header-content{
    font-size: 2.5rem;
    font-weight: 500;
    width: 30rem;
    background-color: transparent;
    }
    .body_section3-div-container-paragraph-content{
    font-size: 1.3rem;
    width: 30rem;
    line-height: 1.8;
    padding-top: 2rem;
    }
   .body_section2-div-content-paragraph{
    font-size: 1.5rem;
    width: 20rem;
    line-height: 1.5;
    padding-top: 1rem;
    padding-bottom: 1rem;
    }
    .section3-icon{
    font-size: 3rem;
    }
    .section3-steps-paragraph3{
    position: absolute;
    bottom: 1rem;
    left: 6rem;
    font-size: 1.5rem;
     }
    .section3-steps-paragraph2{
    position: absolute;
    bottom: 5rem;
    left: 6rem;
    font-size: 1.5rem;
    }
    .section3-steps-paragraph1{
    position: absolute;
    bottom: 9.5rem;
    left: 6rem;
    font-size: 1.5rem;
    }
}
@media(max-width: 450px){
    .body_section3-div-wrapper{
    background-color: rgba(255, 255, 255, 0.593);
    backdrop-filter: blur(10px);
    border-radius: 15px;
    box-shadow: 3px 3px  5px  rgba(0, 0, 0, 0.1);
    padding-left: 2rem;
    padding-right: 2rem;
    padding-top: 2rem;
    padding-bottom: 2rem;
    margin-top: 5rem;
    width: 30rem;
    }
    .body_section3-div-container-header-content{
    font-size: 2.5rem;
    font-weight: 500;
    width: 25rem;
    background-color: transparent;
    }
    .body_section3-div-container-paragraph-content{
    font-size: 1.3rem;
    width: 25rem;
    line-height: 1.8;
    padding-top: 2rem;
    }
   .body_section2-div-content-paragraph{
    font-size: 1.5rem;
    width: 20rem;
    line-height: 1.5;
    padding-top: 1rem;
    padding-bottom: 1rem;
    }
    .section3-icon{
    font-size: 3rem;
    }
    .section3-steps-paragraph3{
    position: absolute;
    bottom: -0.3rem;
    left: 6rem;
    font-size: 1.5rem;
     }
    .section3-steps-paragraph2{
    position: absolute;
    bottom: 5.2rem;
    left: 6rem;
    font-size: 1.5rem;
    }
    .section3-steps-paragraph1{
    position: absolute;
    bottom: 8.9rem;
    left: 6rem;
    font-size: 1.5rem;
    }
    .body_section3{
   height: 105vh;
   }
   .section3-main{
    display: grid;
    grid-template-columns: 1fr 4fr;
    grid-template-rows: 7rem 95vh;
    gap: 0rem;
   }
}
/* SECTION 4 */
.section4-main{
    display: grid;
    grid-template-columns: 1fr 4fr;
    grid-template-rows: 7rem 150vh;
    gap: 0rem;
}


/* DESKTOP-SIDEBAR */
.desktop-sidebar{
    z-index: 999;
    background-color: rgba(255, 255, 255, 0.625);
    backdrop-filter: blur(10px);
    box-shadow: 5px 0 10px rgba(0,0,0,0.3);
    grid-row-start: 1;
    grid-row-end: 3;
}
.body_section4{
    grid-row-start: 2;
    grid-row-end: -1;
}

.desktop-sidebar-container-ul{
    display: flex;
    list-style: none;
    gap: 2rem;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    margin-top: 2rem;
    font-size: 1.5rem;
}
.desktop-sidebar-container-ul > li{
    margin-top: 0.5rem;
}

.desktop-sidebar-container-ul > li >a{
    width: 25rem;
    height: 5rem;
    display: flex;
    align-items: center; 
    border-radius: 2rem;
    background-color: #5a786e;
    color: white;
    margin-left: 1rem;
    padding-left: 2rem;
}
.desktop-sidebar-container-ul > li> a:hover{
    background-color: var(--primary-color);
    transition: 0.5s;
}


.body_section4{
    height: 125vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2rem;
}
.container {
max-width: 1100px;
margin-top: 2rem;
}

h1, h2 {
color: #0f172a;
}

.inputs-section {
background: white;
border-radius: 12px;
padding: 32px;
box-shadow: 0 4px 20px rgba(0,0,0,0.06);
margin-bottom: 0;
width: 70rem;
}
.inputs-section > h2{
color: var(--primary-color);
font-size: 4rem;
}
.inputs-section > p{
    font-size: 1.5rem;
    padding-top: 1rem;
}
.form-group label{
    font-size: 1.5rem;
}
.form-group {
margin-bottom: 24px;
}

label {
display: block;
margin-bottom: 8px;
font-weight: 500;
color: #334155;
}

input[type="number"],
input[type="text"],
input[type="month"] {
width: 100%;
padding: 12px 16px;
border: 1px solid #cbd5e1;
border-radius: 8px;
font-size: 16px;
}

input:focus {
outline: none;
border-color: #3b82f6;
box-shadow: 0 0 0 3px rgba(59,130,246,0.15);
}

.cta-button {
background: var(--primary-color);
color: white;
border: none;
padding: 14px 32px;
font-size: 17px;
font-weight: 600;
border-radius: 8px;
cursor: pointer;
transition: 0.2s;
}

.cta-button:hover {
background: ;
}

/* ── Modal ─────────────────────────────────────────────── */
.modal {
display: none;
position: fixed;
inset: 0;
background: rgba(0,0,0,0.55);
z-index: 2000;
justify-content: center;
align-items: center;
padding: 20px;
}

.modal-content {
background: white;
border-radius: 16px;
width: 100%;
max-width: 480px;
padding: 32px;
position: relative;
box-shadow: 0 20px 40px rgba(0,0,0,0.25);
animation: popIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes popIn {
from { transform: scale(0.82) translateY(30px); opacity: 0; }
to { transform: scale(1) translateY(0); opacity: 1; }
}

.close-button {
position: absolute;
top: 16px;
right: 20px;
font-size: 36px;
font-weight: 300;
color: #94a3b8;
cursor: pointer;
line-height: 1;
}

.close-button:hover {
color: #334155;
}

.status {
font-size: 1.65rem;
font-weight: 700;
margin: 20px 0 16px;
min-height: 2.2rem;
}

.status.ready { color: #16a34a; }
.status.deposit { color: #ea580c; }
.status.afford { color: #c2410c; }
.status.progress { color: #dc2626; }

.progress-line {
font-size: 1.18rem;
font-weight: 600;
margin: 16px 0;
color: #1e293b;
}

.highlight {
font-size: 1.5rem;
font-weight: 700;
color: #16a34a;
margin: 24px 0;
text-align: center;
}

.actions {
margin-top: 28px;
display: flex;
flex-direction: column;
gap: 12px;
}

.secondary-btn {
background: #eff6ff;
color: #1d4ed8;
border: none;
padding: 14px;
font-size: 15px;
font-weight: 600;
border-radius: 8px;
cursor: pointer;
}

.secondary-btn:hover {
background: #dbeafe;
}


@media(min-width: 1440px){
    .body_section4{
    height: 100vh;
    display: flex;
    flex-direction: column;
    gap: 2rem;
   }
}
@media(max-width: 1285px) and (max-height: 820px){
    .body_section4{
    height: 105vh;
    }
} 
@media(max-width: 1285px) and (max-height: 770px){
    .body_section4{
    height: 150vh;
    }
} 
@media(max-width: 1250px){
    .body_section4{
    height: 100vh;
    display: flex;
    flex-direction: column;
    gap: 2rem;
   }
}
@media(max-width: 1025px) and (max-height: 1400px){
    .body_section4{
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    }
    .container {
    max-width: 1100px;
    margin-top: -20rem;
    }
    .section4-main{
    display: grid;
    grid-template-columns: 1fr 4fr;
    grid-template-rows: 7rem 100vh;
    gap: 0rem;
    }
}
@media(max-width: 1030px) and (max-height: 1370px){
    .body_section4{
    height: 100vh;
    display: flex;
    flex-direction: column;
    gap: 2rem;
   }
   .desktop-sidebar-container-ul > li >a{
    width: 18rem;
    height: 5rem;
    }
}
@media(max-width: 1030px) and (max-height: 900px){
   .body_section4{
    height: 140vh;
    display: flex;
    flex-direction: column;
    gap: 2rem;
   }
   .desktop-sidebar-container-ul > li >a{
    width: 18rem;
    height: 5rem;
    display: flex;
    align-items: center; 
    border-radius: 2rem;
    background-color: #5a786e;
    color: white;
    margin-left: 1rem;
    padding-left: 2rem;
    }
}
@media(max-width: 1030px) and (max-height: 601px){
    .section4-main{
    display: grid;
    grid-template-columns: 1fr 4fr;
    grid-template-rows: 7rem 140vh;
    gap: 0rem;
    }
    .container {
  max-width: 70rem;
  margin-top: 3rem;
  }
}

  @media(max-width: 900px){
    .body_section4{
    height: 100vh;
    display: flex;
    flex-direction: column;
   }
   .inputs-section {
   background: white;
   border-radius: 12px;
   padding: 32px;
   box-shadow: 0 4px 20px rgba(0,0,0,0.06);
   margin-bottom: 0;
   width: 50rem;
   margin-top: 10rem;
   }
    .container {
  max-width: 70rem;
  margin-top: 8rem;
  margin: auto;
  }
  .section4-control-btn{
    margin-bottom: 15rem;
  }

   h1, h2 {
   color: #0f172a;
   }

    .inputs-section {
    background: white;
    border-radius: 12px;
    padding: 32px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
    margin-bottom: 0;
    width: 50rem; 
    }
    .inputs-section > h2{
    color: var(--primary-color);
    font-size: 4rem;
    }
    .inputs-section > p{
    font-size: 1.5rem;
    padding-top: 1rem;
    }
}
@media(max-width: 750px){
    .body_section4{
    grid-column-start: 1;
    grid-column-end: -1;
    }
}
@media (max-width: 640px) {
.inputs-section { padding: 24px; }
.modal-content { padding: 24px; }
}
  @media(max-width: 520px){
    .body_section4{
    height: 100vh;
    display: flex;
    flex-direction: column;
   }
   .inputs-section {
   background: white;
   border-radius: 12px;
   padding: 32px;
   box-shadow: 0 4px 20px rgba(0,0,0,0.06);
   margin-bottom: 0;
   width: 30rem;
   margin-top: 10rem;
   }
    .container {
  max-width: 70rem;
  margin-top: 8rem;
  }
  .inputs-section > h2{
    color: var(--primary-color);
    font-size: 2rem;
    }
}
 @media(max-width: 450px){
    .body_section4{
    height: 120vh;
    display: flex;
    flex-direction: column;
   }
   .inputs-section {
   background: white;
   border-radius: 12px;
   padding: 32px;
   box-shadow: 0 4px 20px rgba(0,0,0,0.06);
   margin-bottom: 0;
   width: 30rem;
   margin-top: 10rem;
   }
    .container {
  max-width: 70rem;
  margin-top: 0rem;
  }
  .inputs-section > h2{
    color: var(--primary-color);
    font-size: 2rem;
    }
}
 @media(max-width: 420px){
    .body_section4{
    height: 100vh;
    display: flex;
    flex-direction: column;
   }
   .container {
  max-width: 70rem;
  margin-top:  10rem;
  }
}
 @media(max-width: 376px){
    .body_section4{
    height: 140vh;
    display: flex;
    flex-direction: column;
   }
   .container {
    max-width: 70rem;
    margin-top:  -5rem;
  }
}
 @media(max-width: 360px){
    .body_section4{
    height: 120vh;
    display: flex;
    flex-direction: column;
   }
   .container {
    max-width: 70rem;
    margin-top:  -3em;
  }
}

/* SECTION5 */

.section5-main{
    display: grid;
    grid-template-columns: 1fr 4fr;
    grid-template-rows: 7rem 100vh;
    gap: 0rem;
}


/* DESKTOP-SIDEBAR */
.desktop-sidebar{
    z-index: 999;
    background-color: rgba(255, 255, 255, 0.625);
    backdrop-filter: blur(10px);
    box-shadow: 5px 0 10px rgba(0,0,0,0.3);
    grid-row-start: 1;
    grid-row-end: 3;
}




.body_section5{
   height: 100vh;
   background-image: url('../assets/rendilargerscreenbg.jfif');
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   background-repeat: no-repeat;
   background-size: cover;
}
.body_section5-div-container{
    background-color: rgba(255, 255, 255, 0.625);
    backdrop-filter: blur(10px);
    padding: 2rem 2rem;
    border-radius: 15px;
    box-shadow: 3px 3px  5px  rgba(0, 0, 0, 0.1);
}
.body_section5-div-wrapper{
    display: flex;
    gap: 3rem;
    flex-direction: row;
    margin-top: 0rem;
}
.body_section5-header{
    font-size: 5rem;
    font-weight: 500;
}
.body_section5-paragraph{
    font-size: 1.5rem;
}
.body_section4-form-div{
    padding-top: 2.5rem;
}
.body_section4-form-div label{
    font-size: 1.5rem;
}
.body_section4-field{
    padding-top: 1rem;
}
.section5-CTA-btn-container{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
}
.section5-CTA-btn{
    background-color: var(--primary-color);
    color: white;
    padding: 2rem 2rem;
    font-size: 1.5rem;
    border-radius: 50px;
    margin: 1rem 0;
}
.section5-CTA-btn:hover{
    transform: translateY(-2px);
    transition: 0.5s;
}
.body_section5-footer{
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.body_section5-card2{
    display: flex;
    justify-content: center;
    align-items: center;
}
/* Section5-calendar */
.section5-calendar{
    display: flex;
    justify-content: center;
    align-items: center;
}
.body_section5-div-container{
    display: flex;
    flex-direction: column;
    background-color: rgba(255, 255, 255, 0.593);
    backdrop-filter: blur(10px);
    border-radius: 15px;
}
/* =======================
   HEADER
======================= */
.calendar {
    width: 30rem;
    background: #ffffff;
    border-radius: 15px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.2);
    overflow: hidden;
}
@media(max-width:1050px){
    .section5-CTA-btn{
        margin-bottom: -1rem;
    }
}
@media(max-width: 920px){
    .calendar {
    width: 70rem;
    background: #ffffff;
    border-radius: 15px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.2);
    overflow: hidden;
    }
}
/* =======================
   HEADER
======================= */
.calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background:  #1f4f4d19;
    color:  var(--primary-color);
}

.calendar-header button {
    background: none;
    border: none;
    color: var(--primary-color);
    font-size: 18px;
    cursor: pointer;
}

.calendar-header select {
    background: transparent;
    color: var(--primary-color);
    border: none;
    padding: 5px;
    border-radius: 5px;
    font-weight: bold;
}

/* =======================
   DAYS LABEL
======================= */
.days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    background: #f3f4f6;
    text-align: center;
    padding: 10px 0;
    font-weight: bold;
    font-size: 14px;
}

/* =======================
   DATES GRID
======================= */
.dates {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    padding: 15px;
    gap: 8px;
}

.date {
    padding: 10px 0;
    text-align: center;
    border-radius: 8px;
    cursor: pointer;
    transition: 0.3s ease;
}

.date:hover {
    background: #e0e7ff;
}

.inactive {
    color: #cbd5e1;
}

.today {
    background: #06b6d4;
    color: #fff;
    font-weight: bold;
}

.selected {
    background: #4f46e5;
    color: #fff;
}

/* =======================
   RESPONSIVE
======================= */
/* section5 responsiveness */
@media(max-width: 1030px) and (max-height: 1370px){
    .body_section5-div-container{
    background-color: rgba(255, 255, 255, 0.625);
    backdrop-filter: blur(10px);
    padding: 2rem 2rem;
    border-radius: 15px;
    box-shadow: 3px 3px  5px  rgba(0, 0, 0, 0.1);
    width: 50rem;
    }
    .body_section5{
     height: 100vh;
    }
    .body_section5-footer{
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 2rem;
    }
}
@media(max-width: 1030px) and (max-height: 900px){
    .body_section5-div-container{
    background-color: rgba(255, 255, 255, 0.625);
    backdrop-filter: blur(10px);
    padding: 2rem 2rem;
    border-radius: 15px;
    box-shadow: 3px 3px  5px  rgba(0, 0, 0, 0.1);
    width: 50rem;
    }
    .body_section5{
     height: 120vh;
    }
    .body_section5-header{
    font-size: 5rem;
    font-weight: 500;
    }
    .body_section5-paragraph{
    font-size: 1.5rem;
    }
    .section5-main{
    display: grid;
    grid-template-columns: 1fr 4fr;
    grid-template-rows: 7rem 120vh;
    gap: 0rem;
    }   
}
@media(max-width: 950px){
    .body_sectionn2-div{
    display: flex;
    gap: 1rem;
    justify-content: center;
    align-items: center;
    margin-top: 15rem;
    }
    .body_section5-div-container{
    background-color: rgba(255, 255, 255, 0.625);
    backdrop-filter: blur(10px);
    padding: 2rem 2rem;
    border-radius: 15px;
    box-shadow: 3px 3px  5px  rgba(0, 0, 0, 0.1);
    width: 40rem;
    }
    .body_section2-div-content-container{
        margin-top: 4rem;
    }
    .body_section5-header{
    font-size: 3rem;
    font-weight: 500;
    }
     .body_section5-paragraph{
    font-size: 1.5rem;
    }

    .body_section5-card2{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30rem;
    }
}
@media(max-width: 770px){
    .body_sectionn2-div{
    display: flex;
    gap: 1rem;
    justify-content: center;
    align-items: center;
    margin-top: 15rem;
    }
    .body_section5-div-container{
    background-color: rgba(255, 255, 255, 0.625);
    backdrop-filter: blur(10px);
    padding: 2rem 2rem;
    border-radius: 15px;
    box-shadow: 3px 3px  5px  rgba(0, 0, 0, 0.1);
    width: 40rem;
    }
    .body_section2-div-content-container{
        margin-top: 4rem;
    }
    .body_section5-header{
    font-size: 3rem;
    font-weight: 500;
    }
     .body_section5-paragraph{
    font-size: 1.5rem;
    }

    .body_section5-card2{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30rem;
    }
    .calendar{
        width: 30rem;
    }
    .body_section5-div-wrapper{
    display: flex;
    gap: 3rem;
    flex-direction: column;
    margin-top: 10rem;
    }
    .body_section5-card2{
    margin: auto;
    }
}
@media(max-width: 450px){
    .body_sectionn2-div{
    display: flex;
    gap: 1rem;
    justify-content: center;
    align-items: center;
    margin-top: 15rem;
    }
    .body_section5-div-container{
    background-color: rgba(255, 255, 255, 0.625);
    backdrop-filter: blur(10px);
    padding: 2rem 2rem;
    border-radius: 15px;
    box-shadow: 3px 3px  5px  rgba(0, 0, 0, 0.1);
    width: 30rem;
    }
    .body_section2-div-content-container{
        margin-top: 4rem;
    }
    .body_section5-header{
    font-size: 3rem;
    font-weight: 500;
    }
     .body_section5-paragraph{
    font-size: 1.5rem;
    }

    .body_section5-card2{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30rem;
    }
    .calendar{
        width: 30rem;
    }
    .body_section5-div-wrapper{
    display: flex;
    gap: 3rem;
    flex-direction: column;
    margin-top: 10rem;
    }
    .body_section5-card2{
    margin: auto;
    }
    .section5-CTA-btn{
    background-color: var(--primary-color);
    color: white;
    padding: 1rem 2rem;
    font-size: 1rem;
    border-radius: 50px;
    margin: 1rem 0;
    }
    .body_section5-footer{
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 1rem;
    }
    .body_section5{
     height: 130vh;
    }
}
@media(max-width: 420px){
     .body_section5{
     height: 150vh;
    }
}
/* SECTION 6 */
/* SECTION  6 */
.section6-main{
    display: grid;
    grid-template-columns: 1fr 4fr;
    grid-template-rows: 7rem 100vh;
    gap: 0rem;
}


/* DESKTOP-SIDEBAR */
.desktop-sidebar{
    z-index: 999;
    background-color: rgba(255, 255, 255, 0.625);
    backdrop-filter: blur(10px);
    box-shadow: 5px 0 10px rgba(0,0,0,0.3);
    grid-row-start: 1;
    grid-row-end: 3;
}


.body_section6{
   height: 100vh;
   background-image: url('../assets/rendilargerscreenbg.jfif');
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   background-repeat: no-repeat;
   background-size: cover;
   gap: 2rem;
}
.body_section6-div-wrapper{
    display: flex;
    flex-direction: column;
    background-color: rgba(255, 255, 255, 0.593);
    backdrop-filter: blur(10px);
    border-radius: 15px;
    box-shadow: 3px 3px  5px  rgba(0, 0, 0, 0.1);
    padding: 2rem 4rem;
    margin-top: 5rem;
}
.body_section6-div-container-header{
    font-size: 4rem;
    font-weight: 500;
    width: 70rem;
}
.body_section6-div-container-paragraph{
    font-size: 1.5rem;
    text-align: center;
}
.body_section6-second-section{
    display: flex;
    flex-direction: column;
}
.body_section6-card-divs{
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-top: 2rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}
.body_section6-card{
    background-color: #1f4f4d1c;
    height: 15rem;
    width: 23rem;
    border-radius: 10px;
    position: relative;
}
.section6-card-text{
    display: flex;
    gap: 1rem;
    position: absolute;
    font-size: 1.5rem;
    left: 1rem;
    top: 1rem;
}
.section6-icon{
    font-size: 5rem;
}
.section6-icon1{
    color: gold;
}
.section6-icon2{
    color: green;
}
.section6-card-footer{
    display: flex;
    flex-direction: column;
    position: absolute;
    bottom: 1rem;
    left: 3rem;
    gap: 1rem;
}
.section6-card-paragraph{
    font-size: 1.5rem;
    background-color: #1f4f4d3b;
    padding: 1rem 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    width: 15rem;
}
.section6-primary-CTA-btn{
    background-color: var(--primary-color);
    padding: 1.5rem 2rem;
    color: white;
    font-size: 1.5rem;
    border-radius: 50px;
}
.section6-primary-CTA-btn:hover{
    transform: translateY(-2px);
    transition: 0.5s;
}
.section6-footer-div{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1rem;
}
.body_section6-footer-paragraph{
    text-align: center;
}

/* section6 responsiveness */
@media(max-width: 1030px) and (max-height: 1370px){
    .body_section6{
     height: 100vh;
     }
     .body_section6-div-wrapper{
    display: flex;
    flex-direction: column;
    background-color: rgba(255, 255, 255, 0.593);
    backdrop-filter: blur(10px);
    border-radius: 15px;
    box-shadow: 3px 3px  5px  rgba(0, 0, 0, 0.1);
    padding: 2rem 2rem;
    margin-top: 5rem;
    width: 70rem;
    }
    .body_section6-div-container-header{
    font-size: 5rem;
    display: flex;
    font-weight: 500;
    width: 70rem;
    padding: 2rem 1rem;
    }
}
@media(max-width: 1030px) and (max-height: 900px){
    .body_section6{
    height: 125vh;
    }
    .section6-main{
    display: grid;
    grid-template-rows: 7rem 125vh;
    }
}
@media(max-width: 950px){
    .body_section6-div-container-header{
    font-size: 4rem;
    display: flex;
    font-weight: 500;
    width: 70rem;
    padding: 2rem 1rem;
    }
    .body_section6{
    height: 100vh;
    }
    .section6-main{
    display: grid;
    grid-template-rows: 7rem 100vh;
    }
}
@media(max-width: 800px){
    .body_section6{
    height: 115vh;
    }
    .section6-main{
    display: grid;
    grid-template-rows: 7rem 115vh;
    }
}
@media(max-width: 750px){
    .body_section6-div-container-header{
    font-size: 3rem;
    display: flex;
    font-weight: 500;
    width: 50rem;
    padding: 2rem 1rem;
    }
    .body_section6-div-wrapper{
    display: flex;
    flex-direction: column;
    background-color: rgba(255, 255, 255, 0.593);
    backdrop-filter: blur(10px);
    border-radius: 15px;
    box-shadow: 3px 3px  5px  rgba(0, 0, 0, 0.1);
    padding: 2rem 2rem;
    margin-top: 5rem;
    width: 50rem;
    }
     .body_section6{
    height: 140vh;
    }
    .section6-main{
    display: grid;
    grid-template-rows: 7rem 100vh;
    }
}
@media(max-width: 550px){
    .body_section6-div-container-header{
    font-size: 2rem;
    display: flex;
    font-weight: 500;
    width: 35rem;
    text-align: center;
    padding: 2rem 1rem;
    }
    .body_section6-div-wrapper{
    display: flex;
    flex-direction: column;
    background-color: rgba(255, 255, 255, 0.593);
    backdrop-filter: blur(10px);
    border-radius: 15px;
    box-shadow: 3px 3px  5px  rgba(0, 0, 0, 0.1);
    padding: 2rem 2rem;
    margin-top: 5rem;
    width: 38rem;
    }
    .body_section6{
    height: 160vh;
    }
}
@media(max-width: 450px){
    .body_section6{
    height: 130vh;
    }
}
@media(max-width: 400px){
    .body_section6-div-container-header{
    font-size: 2rem;
    display: flex;
    font-weight: 500;
    width: 30rem;
    text-align: center;
    padding: 2rem 1rem;
    }
    .body_section6-div-wrapper{
    display: flex;
    flex-direction: column;
    background-color: rgba(255, 255, 255, 0.593);
    backdrop-filter: blur(10px);
    border-radius: 15px;
    box-shadow: 3px 3px  5px  rgba(0, 0, 0, 0.1);
    padding: 2rem 2rem;
    margin-top: 5rem;
    width: 35rem;
    }
    .body_section6{
    height: 160vh;
    }
}

/* SECTION 7 */
.section7-main{
    display: grid;
    grid-template-columns: 1fr 4fr;
    grid-template-rows: 7rem 100vh;
    gap: 0rem;
}


.body_section7{
    height: 100vh;
   background-image: url('../assets/rendilargerscreenbg.jfif');
   display: flex;
   justify-content: center;
   flex-direction: column;
   align-items: center;
   background-size: cover;
   background-repeat: no-repeat;
   gap: 2rem;
}
.body_section7-div-wrapper{
    display: flex;
    flex-direction: column;
    background-color: rgba(255, 255, 255, 0.593);
    backdrop-filter: blur(10px);
    border-radius: 15px;
    box-shadow: 3px 3px  5px  rgba(0, 0, 0, 0.1);
    padding: 2rem 4rem;
    gap: 2rem;
    margin-top: 5rem;
}
.body_section7-div-container-header{
    font-size: 5rem;
    font-weight: 500;
    width: 70rem;
}
.body_section7-div-paragraph{
    font-size: 1.5rem;
}
.body_section7-action-items-ul{
    font-size: 2rem;
}
.body_section7-action-items-li-items{
    background-color:  rgba(255, 255, 255, 0.593);
     box-shadow: 3px 3px  40px  rgba(0, 0, 0, 0.1);
     margin-top: 1.5rem;
     padding: 1rem  1rem;
     border-radius: 5px;
}
.body_section7-CTA-btns{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    flex-wrap: wrap;
}
.section7-CTA-btn{
    background-color: var(--primary-color);
    padding: 1.5rem 2rem;
    color: white;
    font-size: 1.5rem;
    border-radius: 50px;
    text-align: center;
}


/* SECTION7 RESPONSIVENESS */
 @media(max-width: 1030px) and (max-height: 1370px){
    .body_section7{
    height: 100vh;
   background-image: url('../assets/rendilargerscreenbg.jfif');
   display: flex;
   justify-content: center;
   flex-direction: column;
   align-items: center;
   background-size: cover;
   background-repeat: no-repeat;
   gap: 2rem;
   }
   .body_section7-div-wrapper{
    display: flex;
    flex-direction: column;
    background-color: rgba(255, 255, 255, 0.593);
    backdrop-filter: blur(10px);
    border-radius: 15px;
    box-shadow: 3px 3px  5px  rgba(0, 0, 0, 0.1);
    padding: 2rem 4rem;
    gap: 2rem;
    margin-top: 1rem;
    }
}
@media(max-width: 1030px) and (max-height: 900px){
    .body_section7{
    height: 100vh;
   background-image: url('../assets/rendilargerscreenbg.jfif');
   display: flex;
   justify-content: center;
   flex-direction: column;
   align-items: center;
   background-size: cover;
   background-repeat: no-repeat;
   gap: 2rem;
   }
}
@media(max-width: 830px){
     .body_section7{
    height: 100vh;
   background-image: url('../assets/rendilargerscreenbg.jfif');
   display: flex;
   justify-content: center;
   flex-direction: column;
   align-items: center;
   background-size: cover;
   background-repeat: no-repeat;
   gap: 2rem;
   }
    .body_section7-div-wrapper{
    display: flex;
    flex-direction: column;
    background-color: rgba(255, 255, 255, 0.593);
    backdrop-filter: blur(10px);
    border-radius: 15px;
    box-shadow: 3px 3px  5px  rgba(0, 0, 0, 0.1);
    padding: 2rem 3rem;
    gap: 2rem;
    margin-top: 4rem;
    width: 60rem;
    }
    .body_section7-div-container-header{
    font-size: 4rem;
    font-weight: 500;
    width: 55rem;
    }
    .body_section7-div-paragraph{
    font-size: 1.5rem;
    }
}
@media(max-width: 750px){
    section{
    grid-column-start: 1;
    grid-column-end: -1;
    }
    .body_section7{
    height: 108vh;
    }
}
@media(max-width: 620px){
    .body_section7{
    height: 110vh;
   background-image: url('../assets/rendilargerscreenbg.jfif');
   display: flex;
   justify-content: center;
   flex-direction: column;
   align-items: center;
   background-size: cover;
   background-repeat: no-repeat;
   gap: 2rem;
   }
    .body_section7-div-wrapper{
    display: flex;
    flex-direction: column;
    background-color: rgba(255, 255, 255, 0.593);
    backdrop-filter: blur(10px);
    border-radius: 15px;
    box-shadow: 3px 3px  5px  rgba(0, 0, 0, 0.1);
    padding: 2rem 3rem;
    gap: 2rem;
    margin-top: 4rem;
    width: 48rem;
    }
    .body_section7-div-container-header{
    font-size: 3rem;
    font-weight: 500;
    width: 45rem;
    }
    .body_section7-div-paragraph{
    font-size: 1.5rem;
    }
    .body_section7-action-items-ul{
    font-size: 1.5rem;
    }
}
@media(max-width: 500px){
    .body_section7{
    height: 110vh;
   background-image: url('../assets/rendilargerscreenbg.jfif');
   display: flex;
   justify-content: center;
   flex-direction: column;
   align-items: center;
   background-size: cover;
   background-repeat: no-repeat;
   gap: 2rem;
   }
    .body_section7-div-wrapper{
    display: flex;
    flex-direction: column;
    background-color: rgba(255, 255, 255, 0.593);
    backdrop-filter: blur(10px);
    border-radius: 15px;
    box-shadow: 3px 3px  5px  rgba(0, 0, 0, 0.1);
    padding: 2rem 3rem;
    gap: 2rem;
    margin-top: 4rem;
    width: 40rem;
    }
    .body_section7-div-container-header{
    font-size: 2rem;
    font-weight: 500;
    width: 35rem;
    margin-bottom: 1rem;
    }
    .body_section7-div-paragraph{
    font-size: 1.5rem;
    }
    .body_section7-action-items-ul{
    font-size: 1.5rem;
    }
}
@media(max-width: 400px){
    .body_section7{
    height: 110vh;
   background-image: url('../assets/rendilargerscreenbg.jfif');
   display: flex;
   justify-content: center;
   flex-direction: column;
   align-items: center;
   background-size: cover;
   background-repeat: no-repeat;
   gap: 2rem;
   }
    .body_section7-div-wrapper{
    display: flex;
    flex-direction: column;
    background-color: rgba(255, 255, 255, 0.593);
    backdrop-filter: blur(10px);
    border-radius: 15px;
    box-shadow: 3px 3px  5px  rgba(0, 0, 0, 0.1);
    padding: 2rem 3rem;
    gap: 2rem;
    margin-top: 4rem;
    width: 35rem;
    }
    .body_section7-div-container-header{
    font-size: 2rem;
    font-weight: 500;
    width: 30rem;
    margin-bottom: 1rem;
    }
    .body_section7-div-paragraph{
    font-size: 1.3rem;
    }
    .body_section7-action-items-ul{
    font-size: 1.5rem;
    }
}
@media(max-width: 376px){
    .body_section7{
    height: 120vh;
    }
}
@media(max-width: 370px){
    .body_section7{
    height: 108vh;
    }
}
/* Section 8 */
.section8-main{
    display: grid;
    grid-template-columns: 1fr 4fr;
    grid-template-rows: 7rem 105vh;
    gap: 0rem;
}


/* DESKTOP-SIDEBAR */
.desktop-sidebar{
    z-index: 999;
    background-color: rgba(255, 255, 255, 0.625);
    backdrop-filter: blur(10px);
    box-shadow: 5px 0 10px rgba(0,0,0,0.3);
    grid-row-start: 1;
    grid-row-end: 3;
}


.body_section8{
    background-size: cover;
    height: 100vh;
    flex-direction: column;
    gap: 2rem;
    margin-top: 3rem;
}
.body_section8-div-wrapper{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.593);
    backdrop-filter: blur(10px);
    border-radius: 15px;
    box-shadow: 3px 3px  5px  rgba(0, 0, 0, 0.1);
    width: 80%;
    padding: 2rem  2rem;
    margin-top: -5rem;
}
.body_sectionn8-div-container-header{
    font-size: 5rem;
    font-weight: 500;
    width: 70rem;
}
.body_section8-div-container-paragraph{
    font-size: 1.5rem;
}
.body_secction8-grid-container{
    display: grid;
    grid-template-columns:   40rem 40rem;
    grid-template-rows: 18rem 18rem;
    gap: 1rem;
    padding-top: 2rem;
}
.div-item1{
    background-color: #1f4f4d3b;
    border-radius: 15px;
    position: relative;
}
.div-item2{
    background-color: #1f4f4d3b;
    border-radius: 15px;
    position: relative;
}
.div-item3{
    background-color: #1f4f4d3b;
    border-radius: 15px;
    position: relative;
}
.div-item4{
    background-color: #1f4f4d3b;
    border-radius: 15px;
    position: relative;
}
.div-item3-list-item{
    list-style: none;
    border: none;
    background-color: white;
    padding: 0.5rem 2rem;
    border-radius: 10px;
    width: 15rem;
}
.div-item-header{
    position: absolute;
    left: 2rem;
    font-size: 2rem;
    top: 0.3rem;
}
.div-item-header2{
    position: absolute;
    top: 4rem;
    left: 2rem;
    font-size: 2.5rem;
    background-color: #fff;
    padding: 2rem 1rem;
    border-radius: 50%;
}
.div-item3-list-container{
    position: absolute;
    top: 3rem;
    left: 2rem;
    font-size: 1.5rem;
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}
.li-items-div-container{
    display: flex;
    gap: 1rem;
}
.card3-header{
    font-size: 1.5rem;
}
.progress-history-btn-container{
    display: flex;
    margin-bottom: 0rem;
}
.progress-history-btn{
    background-color: #1F4F4D;
    display: flex;
    color: #ffff;
    padding: 2rem 2rem;
    border-radius: 50px;
    font-size: 1.5rem;
}
.progress-history-btn:hover{
    transform: translateY(-2px);
    transition: 0.5s;
}
.section8-next-and-previous-btn-container{
    margin-top: 0rem;
}


/* SECTION 8 RESPONSIVENESS DASHBOARD */
@media(min-width: 1400px){
    .body_section8{
    background-size: cover;
    height: 100vh;
    flex-direction: column;
    gap: 2rem;
    }
    .body_secction8-grid-container{
    display: grid;
    grid-template-columns:   40rem 40rem;
    grid-template-rows: 20rem 20rem;
    gap: 1rem;
    padding-top: 2rem;
    }
    .div-item3-list-container{
    position: absolute;
    top: 3rem;
    left: 2rem;
    font-size: 1.5rem;
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 2rem;
    }
}
@media(max-width: 1030px) and (max-height: 1400px){
    .body_section8{
    background-size: cover;
    height: 100vh;
    flex-direction: column;
    gap: 2rem;
    }    
    .body_section8-div-wrapper{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.593);
    backdrop-filter: blur(10px);
    border-radius: 15px;
    box-shadow: 3px 3px  5px  rgba(0, 0, 0, 0.1);
    width: 90rem;
    padding: 4rem  2rem;
    margin-top: 10rem;
    }
    .body_secction8-grid-container{
    display: grid;
    grid-template-columns:   35rem 35rem;
    grid-template-rows: 18rem 18rem;
    gap: 1rem;
    padding-top: 2rem;
    }
    .body_section8-div-wrapper{
    width: 75rem;
    }
    .section8-main{
    grid-template-rows: 7rem 102vh;
    }
}
@media(max-width: 1030px) and (max-height: 900px){
    .body_section8{
    background-size: cover;
    height: 110vh;
    flex-direction: column;
    gap: 1rem;
    }    
    .body_section8-div-wrapper{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.593);
    backdrop-filter: blur(10px);
    border-radius: 15px;
    box-shadow: 3px 3px  5px  rgba(0, 0, 0, 0.1);
    width: 90rem;
    padding: 4rem  2rem;
    margin-top: 0rem;
    }
    .section8-main{
    display: grid;
    grid-template-columns: 1fr 4fr;
    grid-template-rows: 7rem 115vh;
    gap: 0rem;
    }
}
@media(max-width: 900px){
    .body_section8{
    background-size: cover;
    height: 150vh;
    flex-direction: column;
    gap: 2rem;
    }    
    .body_section8-div-wrapper{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.593);
    backdrop-filter: blur(10px);
    border-radius: 15px;
    box-shadow: 3px 3px  5px  rgba(0, 0, 0, 0.1);
    width: 60rem;
    padding: 4rem  2rem;
    margin-top: 10rem;
    }
     .body_secction8-grid-container{
    display: grid;
    grid-template-columns:   40rem;
    grid-template-rows: 15rem 15rem 15rem 15rem;
    gap: 1rem;
    padding-top: 2rem;
    }
    .body_sectionn8-div-container-header{
    font-size: 3rem;
    font-weight: 500;
    width: 50rem;
    }
    .body_section8-div-container-paragraph{
    font-size: 1.5rem;
    }
}
@media(max-width: 820px) and (max-height: 1180px){
     .body_section8{
    background-size: cover;
    height: 100vh;
    flex-direction: column;
    gap: 2rem;
    }   
    .body_section8-div-wrapper{
        margin-top: -7rem;
    }
    .body_secction8-grid-container{
    display: grid;
    grid-template-columns:   40rem;
    grid-template-rows: 18rem 18rem 18rem 18rem;
    gap: 1rem;
    padding-top: 2rem;
    }
}
@media(max-width: 750px){
    .body_section8{
    background-size: cover;
    height: 110vh;
    flex-direction: column;
    gap: 2rem;
    }   
}
@media(max-width: 600px){
    .body_section8{
    background-size: cover;
    height: 150vh;
    flex-direction: column;
    gap: 2rem;
    }    
    .body_section8-div-wrapper{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.593);
    backdrop-filter: blur(10px);
    border-radius: 15px;
    box-shadow: 3px 3px  5px  rgba(0, 0, 0, 0.1);
    width: 40rem;
    padding: 4rem  2rem;
    margin-top: 10rem;
    }
     .body_secction8-grid-container{
    display: grid;
    grid-template-columns:   35rem;
    grid-template-rows: 15rem 15rem 15rem 15rem;
    gap: 1rem;
    padding-top: 2rem;
    }
    .body_sectionn8-div-container-header{
    font-size: 2.5rem;
    font-weight: 500;
    width: 30rem;
    }
    .body_section8-div-container-paragraph{
    font-size: 1.5rem;
    }
}
@media(max-width: 450px){
    .body_secction8-grid-container{
    display: grid;
    grid-template-columns:   28rem;
    grid-template-rows: 20rem 20rem 20rem 20rem;
    gap: 1rem;
    padding-top: 2rem;
    }
    .div-item3-list-item{
    list-style: none;
    border: none;
    background-color: white;
    padding: 0.5rem 2rem;
    border-radius: 10px;
    width: 12rem;
    margin-left: -1rem;
    }
    .li-items-div-container{
    display: flex;
    gap: 2rem;
    }
    .div-item3-list-container{
        margin-top: 1rem;
    }
    .label-header{
        font-size: 1.3rem;
    }
}
@media(max-width: 420px){
    .body_section8{
    background-size: cover;
    height: 175vh;
    flex-direction: column;
    gap: 2rem;
    }    
    .body_section8-div-wrapper{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.593);
    backdrop-filter: blur(10px);
    border-radius: 15px;
    box-shadow: 3px 3px  5px  rgba(0, 0, 0, 0.1);
    width: 30rem;
    padding: 4rem  2rem;
    margin-top: 10rem;
    }
     .body_secction8-grid-container{
    display: grid;
    grid-template-columns:   28rem;
    grid-template-rows: 20rem 20rem 20rem 20rem;
    gap: 1rem;
    padding-top: 2rem;
    }
    .body_sectionn8-div-container-header{
    font-size: 2.5rem;
    font-weight: 500;
    width: 30rem;
    }
    .body_section8-div-container-paragraph{
    font-size: 1.5rem;
    }
    .div-item3-list-item{
    list-style: none;
    border: none;
    background-color: white;
    padding: 0.5rem 2rem;
    border-radius: 10px;
    width: 11rem;
    }
    .div-item3-list-container{
    position: absolute;
    top: 3rem;
    left: 0.5rem;
    font-size: 1.5rem;
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-left: 2rem;
    }
    .label-header{
        margin-left: -1rem;
    }
}


/* section 9 */
.section9-main{
    display: grid;
    grid-template-columns: 1fr 4fr;
    grid-template-rows: 7rem 65rem;
    gap: 0rem;
}


/* DESKTOP-SIDEBAR */
.desktop-sidebar{
    z-index: 999;
    background-color: rgba(255, 255, 255, 0.625);
    backdrop-filter: blur(10px);
    box-shadow: 5px 0 10px rgba(0,0,0,0.3);
    grid-row-start: 1;
    grid-row-end: 3;
}

.body_section9{
    display: flex;
    flex-direction: column;
    height: 100vh;
    background-size: cover;
    gap: 2rem;
}
.body_sectionn9-div-wrapper{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    background-color: rgba(255, 255, 255, 0.593);
    backdrop-filter: blur(10px);
    border-radius: 15px;
    box-shadow: 3px 3px  5px  rgba(0, 0, 0, 0.1);
    width: 100rem;
    padding: 2rem  2rem;
    height: 60rem;
    margin-top: 8rem;
}
.section9-btn{
    margin-bottom: 2rem;
}
.body_section9-div-container-header{
    font-size: 5rem;
    font-weight: 500;
}
.body_section9-div-container-paragraph{
    font-size: 1.5rem;
    padding-top: 1rem;
}
.body_section9-form-div{
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding-top: 3rem;
}
.input-field-div{
    display: flex;
    flex-direction: column;
}
.input-field-div > label{
    font-size: 1.5rem;
}
.input-field-div > input{
    height: 4rem;
    width: 90rem;
    border: none;
    border-radius: 5px;
    box-shadow: 3px 10px  5px  rgba(0, 0, 0, 0.1);
}

.section9-btn{
    background-color: var(--primary-color);
    color: white;
    padding: 1rem 4rem;
    border-radius: 50px;
    font-size: 1.5rem;
}
.section9-btn:hover{
    transform: translateY(-2px);
    transition: 0.5s;
}
.sectionn9-footer-paragraph{
    margin-bottom: 2rem;
}
.section9-footer-section{
    display: flex;
    flex-direction: column;
    gap: 2rem;
    justify-content: center;
    align-items: center;
}

/* Section9-responsivenness */
@media(min-width: 1400px){
    .body_section9{
    display: flex;
    flex-direction: column;
    height: 100vh;
    background-size: cover;
    gap: 2rem;
    }
}
@media(max-width: 1030px) and (max-height: 1400px){
    .section9-main{
    display: grid;
    grid-template-columns: 1fr 4fr;
    grid-template-rows: 7rem 100vh;
    gap: 0rem;
    }
    
}
@media(max-width: 1285px) and (max-height: 820px){
    .desktop-sidebar-container-ul > li >a{
    width: 20rem;
    height: 5rem;
    }
    .section9-main{
    display: grid;
    grid-template-columns: 1fr 4fr;
    grid-template-rows: 7rem 100vh;
    gap: 0rem;
    }
} 
@media(max-width: 1285px) and (max-height: 770px){
    
} 
@media(max-width: 1030px) and (max-height: 1370px){
    .body_section9{
    display: flex;
    flex-direction: column;
    height: 100vh;
    background-size: cover;
    gap: 2rem;
    }
    .body_sectionn9-div-wrapper{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    background-color: rgba(255, 255, 255, 0.593);
    backdrop-filter: blur(10px);
    border-radius: 15px;
    box-shadow: 3px 3px  5px  rgba(0, 0, 0, 0.1);
    width: 80rem;
    padding: 2rem  2rem;
    height: 60rem;
    margin-top: 8rem;
    }
    .input-field-div > input{
    height: 4rem;
    width: 74rem;
    border: none;
    border-radius: 5px;
    box-shadow: 3px 10px  5px  rgba(0, 0, 0, 0.1);
    }
}
@media(max-width: 1030px) and (max-height: 900px){
    .body_sectionn9-div-wrapper{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    background-color: rgba(255, 255, 255, 0.593);
    backdrop-filter: blur(10px);
    border-radius: 15px;
    box-shadow: 3px 3px  5px  rgba(0, 0, 0, 0.1);
    width: 80rem;
    padding: 2rem  2rem;
    height: 60rem;
    margin-top: 8rem;
    }
    .input-field-div > input{
    height: 4rem;
    width: 74rem;
    border: none;
    border-radius: 5px;
    box-shadow: 3px 10px  5px  rgba(0, 0, 0, 0.1);
    }
    .body_section9{
    display: flex;
    flex-direction: column;
    height: 120vh;
    background-size: cover;
    gap: 2rem;
    }
    .section9-main{
    display: grid;
    grid-template-columns: 1fr 4fr;
    grid-template-rows: 7rem 120vh;
    gap: 0rem;
    }
}
@media(max-width: 820px){
    .body_sectionn9-div-wrapper{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    background-color: rgba(255, 255, 255, 0.593);
    backdrop-filter: blur(10px);
    border-radius: 15px;
    box-shadow: 3px 3px  5px  rgba(0, 0, 0, 0.1);
    width: 60rem;
    padding: 2rem  2rem;
    height: 50rem;
    margin-top: 8rem;
    }
    .input-field-div > input{
    height: 4rem;
    width: 55rem;
    border: none;
    border-radius: 5px;
    box-shadow: 3px 10px  5px  rgba(0, 0, 0, 0.1);
    }
    .body_section9{
    display: flex;
    flex-direction: column;
    height: 100vh;
    background-size: cover;
    gap: 2rem;
    }
    .body_section9-div-container-header{
    font-size: 4rem;
    font-weight: 500;
    }
    .body_section9-div-container-paragraph{
    font-size: 1.5rem;
    padding-top: 1rem;
    }
    .section9-main{
    display: grid;
    grid-template-columns: 1fr 4fr;
    grid-template-rows: 7rem 100vh;
    gap: 0rem;
    }
}
@media(max-width: 750px){
    .body_section9{
    grid-column-start: 1;
    grid-column-end: -1;
    }
}
@media(max-width: 610px){
    .body_sectionn9-div-wrapper{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    background-color: rgba(255, 255, 255, 0.593);
    backdrop-filter: blur(10px);
    border-radius: 15px;
    box-shadow: 3px 3px  5px  rgba(0, 0, 0, 0.1);
    width: 40rem;
    padding: 2rem  2rem;
    height: 50rem;
    margin-top: 8rem;
    }
    .input-field-div > input{
    height: 4rem;
    width: 35rem;
    border: none;
    border-radius: 5px;
    box-shadow: 3px 10px  5px  rgba(0, 0, 0, 0.1);
    }
    .body_section9{
    display: flex;
    flex-direction: column;
    height: 100vh;
    background-size: cover;
    gap: 2rem;
    }
    .body_section9-div-container-header{
    font-size: 3rem;
    font-weight: 500;
    }
    .body_section9-div-container-paragraph{
    font-size: 1.5rem;
    padding-top: 1rem;
    }
}
@media(max-width: 405px){
    .body_sectionn9-div-wrapper{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    background-color: rgba(255, 255, 255, 0.593);
    backdrop-filter: blur(10px);
    border-radius: 15px;
    box-shadow: 3px 3px  5px  rgba(0, 0, 0, 0.1);
    width: 30rem;
    padding: 2rem  2rem;
    height: 50rem;
    margin-top: 8rem;
    }
    .input-field-div > input{
    height: 4rem;
    width: 25rem;
    border: none;
    border-radius: 5px;
    box-shadow: 3px 10px  5px  rgba(0, 0, 0, 0.1);
    }
    .body_section9{
    display: flex;
    flex-direction: column;
    height: 100vh;
    background-size: cover;
    gap: 2rem;
    }
    .body_section9-div-container-header{
    font-size: 2.5rem;
    font-weight: 500;
    }
    .body_section9-div-container-paragraph{
    font-size: 1.3rem;
    padding-top: 1rem;
    }
}



/* section10 responsiveness  */
.section10-main{
    display: grid;
    grid-template-columns: 1fr 4fr;
    grid-template-rows: 7rem 160vh;
    gap: 0rem;
}

.body_section10{
   height: 160vh;
   background-image: url('../assets/rendilargerscreenbg.jfif');
   display: flex;
   justify-content: flex-start;
   align-items: flex-start;
   background-repeat: no-repeat;
   background-size: cover;
}
.body_section10-div-wrapper{
    margin-top: 10rem;
    margin-left: 5rem;
}
.body_section10-div-container{
    display: flex;
    flex-direction: column;
    gap: 2rem;
}
.body_section10-div-container-header{
    font-size: 5rem;
    font-weight: 500;
}
.body_section10-div-container-paragraph{
   background: linear-gradient(90deg, #1f4f4d3b 0%, #ffffff83 100%);
   font-size: 1.5rem;
   padding: 1rem;
   border-radius: 5px;
}
.score-text{
    font-size: 2rem;
    padding-top: 1rem;
    margin-top: 1rem;
}
.dotted-icons{
    display: flex;
    flex-direction: column;
}
.timeline-score{
    font-size: 2rem;
    background-color: var(--primary-color);
    color: white;
    padding: 1rem 1rem;
    width: 5rem;
    border-radius: 50px;
    margin-left: -1.5rem;
}
.updates{
    display: flex;
    margin-top: 2rem;
}
.body_section10-timeline-text-header-container{
     background-color: rgba(255, 255, 255, 0.593);
    backdrop-filter: blur(10px);
    border-radius: 10px;
    box-shadow: 3px 3px  5px  rgba(0, 0, 0, 0.1);
    height: 20rem;
    width: 100rem;
    padding-top: 1rem;
    padding-left: 2rem;
    margin-left: 2rem;
}
.body_section10-timeline-text-header{
    font-size: 3rem;
}
.body_section10-timeline-text-paragraph{
    font-size: 1.5rem;
}
.CTA-wrapper{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 3rem;
    margin-left: 7rem;
    gap: 1rem;
}
.go-to-dashboard-CTA{
    background-color: #1F4F4D;
    color: white;
    display: flex;
    justify-content: center;
    font-size: 1.5rem;
    padding: 1rem  3rem;
    border-radius: 55px;
}
.body_section10-footer-paragraph{
    text-align: center;
}
/* sectiion10 responsiveness */
@media(min-width: 1440px){
    .body_section10{
   height: 100vh;
   background-image: url('../assets/rendilargerscreenbg.jfif');
   display: flex;
   justify-content: flex-start;
   align-items: flex-start;
   background-repeat: no-repeat;
   background-size: cover;
   }
   .body_section10-timeline-text-header-container{
     background-color: rgba(255, 255, 255, 0.593);
    backdrop-filter: blur(10px);
    border-radius: 10px;
    box-shadow: 3px 3px  5px  rgba(0, 0, 0, 0.1);
    height: 20rem;
    width: 130rem;
    padding-top: 1rem;
    padding-left: 2rem;
    margin-left: 2rem;
    }
}

@media(max-width: 1280px) and (max-height: 800px){
   .body_section10{
   height: 130vh;
   background-image: url('../assets/rendilargerscreenbg.jfif');
   display: flex;
   justify-content: flex-start;
   align-items: flex-start;
   background-repeat: no-repeat;
   background-size: cover;
   }
   .section10-main{
    display: grid;
    grid-template-columns: 1fr 4fr;
    grid-template-rows: 7rem 130vh;
    gap: 0rem;
   }
}
@media(max-width: 1280px) and (max-height: 770px){
   .body_section10{
   height: 200vh;
   background-image: url('../assets/rendilargerscreenbg.jfif');
   display: flex;
   justify-content: flex-start;
   align-items: flex-start;
   background-repeat: no-repeat;
   background-size: cover;
   }
}
@media(max-width: 1030px) and (max-height: 1400px){
   .body_section10{
   height: 110vh;
   background-image: url('../assets/rendilargerscreenbg.jfif');
   display: flex;
   justify-content: flex-start;
   align-items: flex-start;
   background-repeat: no-repeat;
   background-size: cover;
   }
    .body_section10-timeline-text-header-container{
     background-color: rgba(255, 255, 255, 0.593);
    backdrop-filter: blur(10px);
    border-radius: 10px;
    box-shadow: 3px 3px  5px  rgba(0, 0, 0, 0.1);
    height: 20rem;
    width: 80rem;
    padding-top: 1rem;
    padding-left: 2rem;
    margin-left: 2rem;
    }
    .body_section10-div-wrapper{
    margin-top: 25rem;
    margin-left: 5rem;
    }
    .section10-main{
    display: grid;
    grid-template-columns: 1fr 4fr;
    grid-template-rows: 7rem 110vh;
    gap: 0rem;
   }
}
@media(max-width: 1100px) and (max-height: 900px){
    .body_section10{
   height: 100vh;
   background-image: url('../assets/rendilargerscreenbg.jfif');
   display: flex;
   justify-content: flex-start;
   align-items: flex-start;
   background-repeat: no-repeat;
   background-size: cover;
   }
    .body_section10-timeline-text-header-container{
     background-color: rgba(255, 255, 255, 0.593);
    backdrop-filter: blur(10px);
    border-radius: 10px;
    box-shadow: 3px 3px  5px  rgba(0, 0, 0, 0.1);
    height: 20rem;
    width: 80rem;
    padding-top: 1rem;
    padding-left: 2rem;
    margin-left: 2rem;
    }
    .body_section10-div-wrapper{
    margin-top: 10rem;
    margin-left: 5rem;
    }
    .section10-main{
    display: grid;
    grid-template-columns: 1fr 4fr;
    grid-template-rows: 7rem 100vh;
    gap: 0rem;
   }
}@media(max-width: 1030px) and (max-height: 700px){
     .section10-main{
    display: grid;
    grid-template-columns: 1fr 4fr;
    grid-template-rows: 7rem 170vh;
    gap: 0rem;
   }
   .body_section10{
   height: 170vh;
   background-image: url('../assets/rendilargerscreenbg.jfif');
   display: flex;
   justify-content: flex-start;
   align-items: flex-start;
   background-repeat: no-repeat;
   background-size: cover;
   }
}
@media(max-width: 950px){
    .body_section10{
   height: 100vh;
   background-image: url('../assets/rendilargerscreenbg.jfif');
   display: flex;
   justify-content: flex-start;
   align-items: flex-start;
   background-repeat: no-repeat;
   background-size: cover;
   }
    .body_section10-timeline-text-header-container{
     background-color: rgba(255, 255, 255, 0.593);
    backdrop-filter: blur(10px);
    border-radius: 10px;
    box-shadow: 3px 3px  5px  rgba(0, 0, 0, 0.1);
    height: 20rem;
    width: 65rem;
    padding-top: 1rem;
    padding-left: 2rem;
    margin-left: 2rem;
    }
    .body_section10-div-wrapper{
    margin-top: 15rem;
    margin-left: 5rem;
    }
    .body_section10-div-container-header{
    font-size: 4rem;
    font-weight: 500;
   }
   .body_section10-div-container-paragraph{
   background: linear-gradient(90deg, #1f4f4d3b 0%, #ffffff83 100%);
   font-size: 1.5rem;
   padding: 1rem;
   border-radius: 5px;
   }
   .section10-main{
    display: grid;
    grid-template-columns: 1fr 4fr;
    grid-template-rows: 7rem 100vh;
    gap: 0rem;
   }
}
@media(max-width: 830px){
    .body_section10{
   height: 105vh;
   background-image: url('../assets/rendilargerscreenbg.jfif');
   display: flex;
   justify-content: flex-start;
   align-items: flex-start;
   background-repeat: no-repeat;
   background-size: cover;
   }
    .body_section10-timeline-text-header-container{
     background-color: rgba(255, 255, 255, 0.593);
    backdrop-filter: blur(10px);
    border-radius: 10px;
    box-shadow: 3px 3px  5px  rgba(0, 0, 0, 0.1);
    height: 20rem;
    width: 55rem;
    padding-top: 1rem;
    padding-left: 2rem;
    margin-left: 2rem;
    }
    .body_section10-div-wrapper{
    margin-top: 10rem;
    margin-left: 5rem;
    }
    .body_section10-div-container-header{
    font-size: 3rem;
    font-weight: 500;
   }
   .body_section10-div-container-paragraph{
   background: linear-gradient(90deg, #1f4f4d3b 0%, #ffffff83 100%);
   font-size: 1.5rem;
   padding: 1rem;
   border-radius: 5px;
   }
   .body_section10-timeline-text-header{
    font-size: 2rem;
   }
   .section10-main{
    display: grid;
    grid-template-columns: 1fr 4fr;
    grid-template-rows: 7rem 105vh;
    gap: 0rem;
   }
}
@media(max-width: 720px){
    .body_section10{
   height: 120vh;
   background-image: url('../assets/rendilargerscreenbg.jfif');
   display: flex;
   justify-content: flex-start;
   align-items: flex-start;
   background-repeat: no-repeat;
   background-size: cover;
   }
    .body_section10-timeline-text-header-container{
     background-color: rgba(255, 255, 255, 0.593);
    backdrop-filter: blur(10px);
    border-radius: 10px;
    box-shadow: 3px 3px  5px  rgba(0, 0, 0, 0.1);
    height: 20rem;
    width: 45rem;
    padding-top: 1rem;
    padding-left: 2rem;
    margin-left: 2rem;
    }
    .body_section10-div-wrapper{
    margin-top: 10rem;
    margin-left: 5rem;
    }
    .body_section10-div-container-header{
    font-size: 2.5rem;
    font-weight: 500;
   }
   .body_section10-div-container-paragraph{
   background: linear-gradient(90deg, #1f4f4d3b 0%, #ffffff83 100%);
   font-size: 1.5rem;
   padding: 1rem;
   border-radius: 5px;
   }
   .section8-btn{
    width: 30rem;
    gap: 5rem;
   }
   .body_section10-footer-paragraph{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto;
    width: 25rem;
   }
   .section10-main{
    display: grid;
    grid-template-columns: 1fr 4fr;
    grid-template-rows: 7rem 100vh;
    gap: 0rem;
   }
}
@media(max-width: 550px){
    .body_section10{
   height: 120vh;
   background-image: url('../assets/rendilargerscreenbg.jfif');
   display: flex;
   justify-content: flex-start;
   align-items: flex-start;
   background-repeat: no-repeat;
   background-size: cover;
   }
    .body_section10-timeline-text-header-container{
     background-color: rgba(255, 255, 255, 0.593);
    backdrop-filter: blur(10px);
    border-radius: 10px;
    box-shadow: 3px 3px  5px  rgba(0, 0, 0, 0.1);
    height: 20rem;
    width: 30rem;
    padding-top: 1rem;
    padding-left: 2rem;
    margin-left: 2rem;
    }
    .body_section10-div-wrapper{
    margin-top: 10rem;
    margin-left: 5rem;
    }
    .body_section10-div-container-header{
    font-size: 2.5rem;
    font-weight: 500;
   }
   .body_section10-div-container-paragraph{
   background: linear-gradient(90deg, #1f4f4d3b 0%, #ffffff83 100%);
   font-size: 1.5rem;
   padding: 1rem;
   border-radius: 5px;
   }
   .CTA-wrapper{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 2rem;
   }
   .section10-main{
    display: grid;
    grid-template-columns: 1fr 4fr;
    grid-template-rows: 7rem 100vh;
    gap: 0rem;
   }
}

@media(max-width: 410px){
    .body_section10{
   height: 115vh;
   background-image: url('../assets/rendilargerscreenbg.jfif');
   display: flex;
   justify-content: flex-start;
   align-items: flex-start;
   background-repeat: no-repeat;
   background-size: cover;
   }
   .body_section10-timeline-text-header-container{
     background-color: rgba(255, 255, 255, 0.593);
    backdrop-filter: blur(10px);
    border-radius: 10px;
    box-shadow: 3px 3px  5px  rgba(0, 0, 0, 0.1);
    height: 30rem;
    width: 25rem;
    padding-top: 1rem;
    padding-left: 2rem;
    margin-left: 2rem;
    }
    .body_section10-div-wrapper{
    margin-top: 10rem;
    margin-left: 3rem;
    }
    .body_section10-div-container-header{
    font-size: 2.5rem;
    font-weight: 500;
   }
   .body_section10-div-container-paragraph{
   background: linear-gradient(90deg, #1f4f4d3b 0%, #ffffff83 100%);
   font-size: 1.5rem;
   padding: 1rem;
   border-radius: 5px;
   }
   .CTA-wrapper{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 0rem;
   }
   .ph-dots-three-outline-vertical{
    display: none;
   }
   .section10-main{
    display: grid;
    grid-template-columns: 1fr 4fr;
    grid-template-rows: 7rem 115vh;
    gap: 0rem;
   }
}
@media(max-width: 330px){
    .body_section10{
   height: 210vh;
   background-image: url('../assets/rendilargerscreenbg.jfif');
   display: flex;
   justify-content: flex-start;
   align-items: flex-start;
   background-repeat: no-repeat;
   background-size: cover;
   }
   .body_section10-timeline-text-header-container{
     background-color: rgba(255, 255, 255, 0.593);
    backdrop-filter: blur(10px);
    border-radius: 10px;
    box-shadow: 3px 3px  5px  rgba(0, 0, 0, 0.1);
    height: 30rem;
    width: 20rem;
    padding-top: 1rem;
    padding-left: 2rem;
    margin-left: 2rem;
    }
    .body_section10-div-wrapper{
    margin-top: 10rem;
    margin-left: 3rem;
    }
    .body_section10-div-container-header{
    font-size: 2.5rem;
    font-weight: 500;
   }
   .body_section10-div-container-paragraph{
   background: linear-gradient(90deg, #1f4f4d3b 0%, #ffffff83 100%);
   font-size: 1.5rem;
   padding: 1rem;
   border-radius: 5px;
   }
   .CTA-wrapper{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 0rem;
   }
   .ph-dots-three-outline-vertical{
    display: none;
   }
   .section8-btn{
    width: 25rem;
    gap: 5rem;
   }
   .section10-main{
    display: grid;
    grid-template-columns: 1fr 4fr;
    grid-template-rows: 7rem 210vh;
    gap: 0rem;
   }
}
@media(max-width: 377px) and (max-height: 770px){
    .body_section10{
   height: 210vh;
   background-image: url('../assets/rendilargerscreenbg.jfif');
   display: flex;
   justify-content: flex-start;
   align-items: flex-start;
   background-repeat: no-repeat;
   background-size: cover;
   }
   .section10-main{
    display: grid;
    grid-template-columns: 1fr 4fr;
    grid-template-rows: 7rem 190vh;
    gap: 0rem;
   }
}
@media(max-width: 377px) and (max-height: 670px){
    .body_section10{
   height: 230vh;
   background-image: url('../assets/rendilargerscreenbg.jfif');
   display: flex;
   justify-content: flex-start;
   align-items: flex-start;
   background-repeat: no-repeat;
   background-size: cover;
   }
   .section10-main{
    display: grid;
    grid-template-columns: 1fr 4fr;
    grid-template-rows: 7rem 210vh;
    gap: 0rem;
   }
}
@media(max-width: 345px) and (max-height: 900px){
    .body_section10{
   height: 155vh;
   background-image: url('../assets/rendilargerscreenbg.jfif');
   display: flex;
   justify-content: flex-start;
   align-items: flex-start;
   background-repeat: no-repeat;
   background-size: cover;
   }
   .section10-main{
    display: grid;
    grid-template-columns: 1fr 4fr;
    grid-template-rows: 7rem 155vh;
    gap: 0rem;
   }
}







.sidebar-profile{
    display: none;
    position: absolute;
    flex-direction: column;
    bottom: 0;
}
.sidebar-profile > h3{
    font-size: 2.5rem;
}
.sidebar-avatar{
   display: flex;
   align-items: center;
   justify-content: center;
   width: 6rem;
   padding: 1rem 0;
   font-size: 3rem;
   background-color: var(--primary-color);
   color: white;
   border-radius: 50px;
   margin-left: 2rem;
}
@media(min-width: 750px){
    .body_header-nav-bar{
    display: none;
    }
    .ph-x{
    font-size: 2.5rem;
    display: none;
    }
}

@media(max-width: 750px){
    .sidebar-profile{
    display: flex;
    }
    .desktop-sidebar{
   position: fixed;
   left: 0;
   top: 0;
   display: none;
   margin-top: 0.5rem;
   justify-content: flex-start;
   flex-direction: column;
   width: 250px;
   height: 100vh;
   backdrop-filter: blur(10px);
   z-index: 999;
   box-shadow: -10px 0 10px  rgba(0, 0, 0, 0.1);
   padding-top: 2rem;
    }
.section4-top-bar{
     background-color: white;
     font-size: 2.5rem;
     display: none;
     align-items: center;   
     justify-content: space-around; 
     z-index: 999;
     box-shadow: 0px 12px 20px rgba(0,0,0,0.3);
   }
.body_header-nav-bar{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 4rem;
    position: fixed;
    z-index: 999;
    width: 100%;
    background-color: #f4f7f6;
    margin-top: -0.5rem;
    }
    .desktop-sidebar-container-ul{
    display: flex;
    list-style: none;
    gap: 2rem;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    margin-top: 2rem;
    font-size: 1.5rem;
    }
.desktop-sidebar-container-ul > li{
    margin-top: 0.5rem;
    }

.desktop-sidebar-container-ul > li >a{
    width: 20rem;
    height: 5rem;
    display: flex;
    align-items: center; 
    border-radius: 2rem;
    background-color: #5a786e;
    color: white;
    margin-left: 1rem;
    padding-left: 2rem;
    }
}


.avatar{
    background-color: var(--primary-color);
    color: white;
    padding: 1rem;
    border-radius: 30px;
}
.ph-list{
    font-size: 2.5rem;
}
.ph-x{
    font-size: 2.5rem;
}
.headerandnav{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 20rem;
}



@media(max-width: 1030px) and (max-height: 601px){
    .desktop-sidebar-container-ul > li >a{
    width: 17rem;
    }
}


.poundsOnly{
    padding-left: 1rem;
}
/* FAQ SECTION */
.faq-sidebar{
    height: 121vh;
}
.faq-section{
    height: 110vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding-top: 5rem;
    gap: 2rem;
}
.faq-main-container{
    display: grid;
    grid-template-columns: 1fr 4fr;
    grid-template-rows: 7rem 100vh;
    gap: 0rem;
}
.FAQ-headline{
    display: flex;
    font-size: 3rem;
}
.FAQS{
    width: 80%;
}
.question{
    display: flex;
    justify-content: space-between;
    background-color: rgba(255, 255, 255, 0.625);
    padding: 0.5rem  0.5rem;
   box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}
.title-question{
    margin: 1rem 0;
    font-size: 2rem;
}
.question-btn{
    display: flex;
    background-color: transparent;
    flex-direction: column;
    color: var(--primary-color);
    font-size: 2rem;
    border-color: transparent;
    cursor: pointer;
}
.up-icon{
    display: none;
}
.answer{
    font-size: 1.5rem;
    line-height: 1.2;
    display: none;
    background-color: rgba(255, 255, 255, 0.625);
    padding: 1rem 2rem;
}
.question-answer{
    border-bottom: 1px solid #e8e8e8;
}
.show-text  .answer{
    display: block;
}


@media(max-width: 1030px) and (max-height: 1400px){
    .faq-sidebar{
    height: 100vh;
  }
.faq-main-container{
    display: grid;
    grid-template-columns: 1fr 4fr;
    grid-template-rows: 7rem 100vh;
    gap: 0rem;
    }
}

@media(max-width: 1280px) and (max-height: 800px){
    .faq-sidebar{
    height: 110vh;
    }
    .faq-section{
    height: 101vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding-top: 5rem;
    gap: 2rem;
    }
}
@media(max-width: 1024px) and (max-height: 1600px){
    .faq-sidebar{
    height: 132vh;
    }
    .faq-section{
    height: 120vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding-top: 5rem;
    gap: 2rem;
    }
}
@media(max-width: 820px) and (max-height: 1180px){
    .faq-sidebar{
    height: 105vh;
    }
    .faq-section{
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding-top: 5rem;
    gap: 2rem;
    }
}
@media(max-width: 780px){
    .faq-sidebar{
    height: 100vh;
    }
}
@media(max-width: 720px){
    .faq-sidebar{
    height: 100vh;
    }
    .faq-section{
    height: 110vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding-top: 10rem;
    gap: 2rem;
    }
}
@media(max-width: 500px){
    .faq-sidebar{
    height: 100vh;
    }
    .faq-section{
    height: 110vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding-top: 10rem;
    gap: 2rem;
    }
    .FAQ-headline{
    display: flex;
    font-size: 2.5rem;
    }
    .title-question{
    margin: 1rem 0;
    font-size: 2rem;
    }
}
@media(max-width: 400px){
    .faq-sidebar{
    height: 100vh;
    }
    .faq-section{
    height: 150vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding-top: 10rem;
    gap: 2rem;
    }
    .FAQ-headline{
    display: flex;
    font-size: 2.5rem;
    }
    .title-question{
    margin: 1rem 0;
    font-size: 2rem;
    }
}