@import url(theme-root.css);

/*
Developer:      Muhammad Salam
Developer URL:  https://www.linkedin.com/in/salamaslamofficial/
Company:        ICTechnology, Australia
Company URL:    ictechnology.com.au
Description:    This file mostly contain the pages styles including homepage, who we are, get involved etc.
*/ 
/* Who We Are */
.relief-without-border{
    padding: 56px 0;
    height: 650px;
    background: url(../images/ausrelief2Asset1.webp), linear-gradient(to right, var(--primary-bg) 50%, var(--prominent-dark-bg) 50%);
    background-size: contain, cover;
    background-repeat: no-repeat;
    background-position: 4.2% bottom, bottom;
    background-size: auto 524px , 100%;
}
.r-w-b-title{
    font-size: 62px;
    line-height: 120%;
    color: var(--off-text);
    padding-right: 35px;
}
.r-w-b-description{
    padding: 80px 105px;
}
.r-w-b-paragraph{
    font-size: 24px !important;
    color: var(--off-text) !important;
}
.story-year{
    padding: 14px 20px;
    border-radius: 100px;
    border: 1px solid var(--normal-text, #000);
    background: var(--off-text, #FFF);
    font-size: 24px;
}
.story-title{
    padding: 60px 150px;
}
.story-heading{
    width: 740px;
    font-size: 24px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.title-container{
    width: 1020px;
}
.story-section{
    padding: 24px 0;
}
.story-item{
    border-top: 1px solid var(--light-secondary, #98A2B3);
}
.story-item:last-child{
    border-bottom: 1px solid var(--light-secondary, #98A2B3);
}
.story-description{
    padding: 40px 0;
    color: var(--off-text) !important;
    background: var(--primary-bg);
}
.rounded-12{
    border-radius: 12px;
}
.description-heading{
    font-size: 48px;    
    line-height: 54px;
    margin-bottom:30px;
}
.description-details p{
    font-size: 18px !important;
    font-weight: 400 !important;
}
.bg-primary-item{
    background-color: var(--primary-bg);
    color: var(--off-text) !important;
}
.bg-primary-item .story-title .title-container .action-btn .story-action-btn{
    color: var(--off-text) !important;
}
.bg-primary-item .story-title .title-container .story-year{
    background: var(--prominent-bg);
    border: 1px solid var(--off-text);
    color: var(--normal-text);
    font-weight: 500;
}
.standard-heading{
    font-size: 62px;
    line-height: 120%;
    color: var(--primary-text);
    padding: 56px 0;
    text-align: center;
}
.team-group-heading{
    font-size: 36px;
    line-height: 100%; 
    font-weight: 500;
    color: var(--primary-text);
    margin-bottom: 32px;
}
.team-group-row{
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 21px;
    margin-bottom: 64px;
}
.team-group-row-item{
    background: var(--Background-Light-Grey, #F2F2F2);
    border-radius: 12px;
    transition: background 0.5s ease-in-out !important;
}
.team-member-thumbnail{
    height: 355px;
    border-top-right-radius: 12px;
    border-top-left-radius: 12px;
    background-size: cover, 0% !important;
    background-repeat: no-repeat !important;
}
.member-details{
    padding: 20px;
}
.member-name{
    height: 90px;
    font-size: 32px;
    width: 220px;
    margin-bottom: 12px;
}
.role-title{
    font-size: 18px;
    width: 195px;
    opacity: 0.8;
}
.view-member{
    color: var(--primary-bg) !important;
}
.team-group-row-item:hover{
    background: var(--primary-bg);
    color: var(--off-text);
}
.team-group-row-item:hover > .team-member-thumbnail{
    background-size: 0%, cover !important;
}
.team-group-row-item:hover > .member-details .role-details .view-member{
    color: var(--off-text) !important;
}
.our-team-container{
    padding-top: 80px;
    padding-bottom: 16px !important;
}
.accordion-button::after {
    background-image: url(../plus.svg) !important;
}
.accordion-button:not(.collapsed)::after {
    background-image: url(../minus.svg) !important;
}
.accordion-item{
    border-radius: 16px !important;
    border: 1.5px solid var(--primary-bg, #275A91) !important;
    margin-bottom: 40px !important;
}
.accordion-button{
    border-radius: 16px !important;
    background-color: var(--off-text) !important;
    font-size: 24px !important;
    padding: 24px 40px  !important;
    color: var(--primary-text) !important;
}
.accordion-body{
    padding: 24px 40px 40px 24px !important;
    font-size: 20px !important;
    font-weight: 400;
    color: var(--primary-text);
}
.memeber-image{
    border-radius: 12px;
    margin-top: 134px;
}
.member-details-section{
    width: 770px !important;
    margin: 60px auto;
}
.member-title-role h1{
    font-size: 62px;
    color: var(--primary-bg);
    line-height: 120%;
    padding-right: 25px;
}
.member-title-role .team-member-role{
    font-size: 20px;
}
.qualification-section{
    text-align: center;
    color: var(--light-secondary);
    padding: 22.5px 0;
    border-radius: 12px;
    border: 1.5px solid var(--light-secondary, #98A2B3);
    margin-bottom: 32px;
}
.member-title-role{
    margin-bottom: 16px;
}
.member-description{
    margin-top: 40px;
    margin-bottom: 103px;
}
.member-description p{
    font-size: 18px;
    color: var(--Text-Secondary, #677487);
}
.experience-vol-heading{
    font-size: 36px;
}
.experience-item{
    font-size: 18px; 
    padding: 20px 0 16px 0;
    border-bottom: 1.5px solid var(--Text-Secondary);
}
.experiences{
    margin-bottom: 56px;
}
.rest-heading{
    padding: 20px 0 56px 0;
}
.restofteam{
    font-size: 32px;
}
.see-more-link{
    font-size: 20px;
    text-decoration: none;
    color: var(--primary-text);
}

/*Country Details*/
.where-we-work{
    color: var(--off-text);
    background: url(../images/ausrelief121Asset1.png), linear-gradient(-90deg, var(--primary-bg) 62.5%, var(--prominent-dark-bg) 37.5%);
    background-size: contain, contain;
    background-repeat: no-repeat;
    background-position: 25% bottom, bottom;
    background-size: auto 461px , 100%;
}
.where-we-work-details{
    padding: 82.5px 20px;
}
.w-w-w-small-label{
    font-size: 18px;
    color: var(--prominent-bg);
}
.w-w-w-main-heading{
    font-size: 62px;
    margin-bottom: 30px;
    margin-top: 12px;
    padding: 0 !important;
}
.w-w-w-description{
    font-size: 18px;
    margin-bottom: 60px;
}
.donate-now-btn{
    background-color: var(--prominent-bg) !important;
    border-radius: 80px !important;
    padding: 17px 30px !important;
    font-size: 18px !important;
    font-style: normal !important;
    font-weight: 400 !important;
    color: var(--Primary-Navy, #0D2A43) !important;
}
.donate-now-btn:hover{
    color: var(--prominent-bg) !important;
    background: var(--prominent-dark-bg) !important;
}
.w-w-w-logo{
    margin-top: 26px;
}
.country-project-container{
    padding: 60px 0;
    padding-bottom: 0;
}
.country-project-gallery{
    display: grid;
    grid-template-columns: repeat(10,1fr);
    gap: 18px;
    padding: 60px 0;
}
.country-project-gallery-item{
    height: 150px;
    border-radius: 12px;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: cover !important;
}
.country-project-gallery-item-7-2{
    grid-column: span 7;
    grid-row: span 2;
    height: 100%;
}
.country-project-gallery-item-3-1{
    grid-column: span 3;
    grid-row: span 1;
}
.title-divider{
    padding: 0 !important;
    margin: 30px 0 !important;
}
.country-project-title{
    font-size: 36px;
    font-style: normal;
    font-weight: 500;
    line-height: 100%;
}
.country-project-paragraph{
    color: var(--Text-Secondary);
}
.country-project-paragraph:last-child{
    margin-bottom: 0 !important;
}
.country-statistics{
    background: var(--Background-Light-Grey);
    padding: 24px;
    border-radius: 12px;
}
.statistics-item{
    border-radius: 12px;
    padding: 21px 15px;
    background: var(--off-text);
}
.progress-title{
    color: var(--primary-text, #275A91);
    font-size: 24px;
}
.progress-info{
    font-size: 14px;
}
.progress-bar{
    background: var(--Background-Grey, #E5E5E5);
    height: 8px;
    border-radius: 40px;
    margin-top: 7px;
}
.progress-fill{
    background: var(--primary-bg, #275A91);
    height: 8px;
}
.appeal-col .catalog-card{
    width: auto;
    min-width: auto;
}
.appeal-container{
    margin: 60px auto;
}
.catalog-progress-container{
    margin-top: 30px;
}
.health-org{
    font-size: 18px;
    font-weight: 400;
    margin-bottom: 30px;
}
.country-statistics-container{
    max-width: 1320px;
    margin: auto auto;
}

.behalf-input:focus{
    border: 0 !important;
    outline: none !important;
}
/* Media query for smaller screens (e.g., tablets) */
@media only screen and (max-width: 768px) {

    .r-w-b-title {
        font-size: 36px !important;
    }
    .r-w-b-paragraph{
        font-size: 16px !important;
    }
    .w-b-v-subtitle{
        width: 100%;
        text-align: center;
    }
    .r-w-b-description{
        padding: 0px 20px;
    }
    .relief-without-border{
        height: 600;
        background-size: auto 380px , 100%;
        background-position: center bottom, bottom;
    }
    .title-container {
        width: auto;
    }
    .story-title {
        padding: 40px 35px;
    }
    .story-heading {
        width: 450px;
        font-size: 18px;
    }
    .team-group-row {
        grid-template-columns: repeat(2,1fr);
        gap: 18px;
        margin-bottom: 34px;
    }
    .standard-heading {
        font-size: 36px;
        padding: 36px 0;
    }
    .our-team-container {
        padding-top: 20px; 
        padding-bottom: 0px !important;
    }
    .team-group-heading {
        font-size: 24px;
        margin-bottom: 22px;
    }
    .description-heading {
        font-size: 32px;
        line-height: 44px;
        margin-bottom: 24px;
    }
    .member-details-section {
        width: auto !important;
        margin: 34px auto;
    }
    .where-we-work{
        background: url(../images/ausrelief121Asset1.png), linear-gradient(-180deg, var(--primary-bg) 75%, var(--prominent-dark-bg) 25%);
        background-repeat: no-repeat !important;
        height: 704px;
        background-position: right bottom, bottom;
        background-size: auto 420px , 100%;
    }
    .where-we-work .container{
        max-width: none;
    }
    .logo-col{
        display: none;
    }
    .w-w-w-main-heading {
        font-size: 44px;
        margin-bottom: 18px;
    }
    .w-w-w-small-label, .w-w-w-description, .donate-now-btn {
        font-size: 18px !important;
    }
    .country-project-title{
        max-width: 550px;
        margin: auto auto;
    }
    .country-statistics-container .title-divider{
        visibility: hidden;
    
    }
}
/* Media query for even smaller screens (e.g., smartphones) */
@media only screen and (max-width: 480px) {
    .relief-without-border{
        padding:32px 20px;
        height: 600px;
        background: url(../images/ausrelief2Asset1.webp), linear-gradient(to right, var(--primary-bg) 100%, var(--prominent-dark-bg) 0%);
        background-size: contain, cover;
        background-repeat: no-repeat;
        background-position: 30px bottom, bottom;
        background-size: auto 238px , 100%;
    }
    .relief-without-border .container{
        padding: 0;
    }
    .r-w-b-title{
        padding-right: 20px;
        font-size: 36px;
    }
    .r-w-b-description{
        padding: 20px 0px;
        margin-bottom: 20px !important;
    }
    .r-w-b-paragraph{
        font-size: 16px !important;
    }
    .team-group-row{
        grid-template-columns: repeat(2,1fr);
    }
    .title-container{
        width: auto;
        display: revert !important;
        padding: 0;
    }
    .story-title{
        padding: 30px 20px;
    }
    .story-heading{
        margin-top: 24px;
        width: auto;
        font-size: 16px;
    }
    .story-year{
        width: 104px;
        padding: 13px 25px 10px 25px;
        font-size: 24px;
    }
    .action-btn{
        width: 25px;
        position: absolute !important;
        top: 12.5px;
        right: 5px;
    }
    .team-member-thumbnail{
        height: 190px;
    }
    .member-details{
        padding: 9.7px;
    }
    .member-name{
        height: auto;
        font-size: 16px;
        width: auto;
        margin-bottom: 12px;
    }
    .role-title{
        font-size: 12px;
        width: 95px;
    }
 
    .standard-heading{
        padding: 20px 20px 16px 0;
        font-size: 32px;
        text-align: left !important;
        font-weight: 500;
    }
    .our-team-container {
        padding-top: 20px;
        padding-bottom: 0px !important;
        padding: 20px 20px 0px 20px;
    }
    .story-section .standard-heading{
        padding-left:20px ;
    }
    .team-group-heading{
        font-size: 24px;
        margin-bottom: 16px;
    }
    .team-group-row{
        margin-bottom: 24px;
    }
    .story-description .container .g-5{
        --bs-gutter-x: 0;
        --bs-gutter-y: 0;
    }
    .description-heading{
        font-size: 32px;
        margin-top: 30px !important;
        margin-bottom: 0;
    }
    .description-details p{
        font-size: 16px;
        opacity: 0.8;
    }
    .story-description .container{
        padding: 0px 20px;
    }
    .faq-container{
        padding: 20px;
    }
    .accordion-button{
        padding: 14px 19.5px  !important;
        font-size: 20px !important;
    }
    .accordion-item{
        margin-bottom: 12px !important;
    }
    .accordion-body{
        padding: 20px !important;
        font-size: 14px !important;
        font-weight: 400;
        color: var(--primary-text);
    }
    .member-details-section{
        width: auto !important;
        margin: 35px auto;
    }
    .member-title-role{
        display: block !important;
    }
    .member-title-role h1{
        font-size: 36px;
    }
    .member-title-role .team-member-role{
        font-size: 16px;
    }
    .qualification-section{
        font-size: 18px !important;
        padding: 12.5px 20px !important;
    }
    .member-title-role{
        margin-bottom: 16px;
    }
    .member-description{
        margin-top: 20px;
        margin-bottom: 40px;
    }
    .member-description p{
        font-size: 14px;
    }
    .experience-vol-heading{
        font-size: 20px;
    }
    .experience-item{
        font-size: 14px; 
        align-items: start !important;
    }
    .exp-vol-title{
        width: 65%;
    }
    .experiences{
        margin-bottom: 24px;
    }
    .rest-heading{
        padding: 20px 0 20px 0;
    }
    .restofteam{
        font-size: 24px;
    }
    .see-more-link{
        font-size: 14px;
    }
    .member-main-container{
        padding: 0 20px;
    }
    .memeber-image{
        margin-top: 92px;
    }
    .appeal-container, .country-statistics-container, .country-project-container{
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
    .where-we-work{
        background: url(../images/ausrelief121Asset1.png), linear-gradient(-180deg, var(--primary-bg) 75%, var(--prominent-dark-bg) 25%);
        background-repeat: no-repeat !important;
        height: 594px;
        background-position: center bottom, bottom;
        background-size: auto 270px , 100%;
    }
    .where-we-work .row .logo-col{
        display: none;
    }
    .where-we-work-details{
        padding: 30px 8px !important;
    }
    .w-w-w-main-heading {
        font-size: 36px;
        margin-bottom: 12px;
    }
    .w-w-w-small-label, .w-w-w-description, .donate-now-btn {
        font-size: 16px;
    }
    .w-w-w-description {
        margin-bottom: 30px;
    }
    .country-project-title{
        font-size: 24px;
        font-weight: 500;
        line-height: 120%;
    }
    .title-divider{
        margin: 12px 0 !important;
        width: 100% !important;
    }

    .country-project-paragraph{
        font-size: 14px;
    }
    .country-project-container {
        padding: 40px 20px;
        padding-bottom:36px ;
    }
    .country-project-gallery{
        padding: 16px 0;
        padding-bottom: 24px;
    }
    .join-project{
        display: none;
    }
    .country-project-gallery-item-7-2{
        grid-row: span 1;
        grid-column: span 10;
        height: 200px;
    }
    .country-project-gallery-item-3-1{
        grid-row: span 1;
        grid-column: span 5;
    }
    .see-more-link{
        width: 89px;
        min-width: 89px;
    }
    .appeal-container{
        margin-top: 40px;
        margin-bottom: 40px;
    }
    .health-org{
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        margin-bottom: 15px;
    }
    .health-org svg{
        height: 20px;
        width: 20px;
    }
    .catalog-progress-container{
        margin-top: 17px;
    }
    .progress-details .progress-title {
        font-size: 20px;
    }
    .progress-details .progress-info {
        font-size: 12px;
    }
}