/* services */
@media (max-width:991px) {

    .service-wrap {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .service-card {
        width: 100%;
        min-height: 320px;
        flex: none !important;
    }

    .service-wrap:hover .service-card,
    .service-wrap:hover .service-card:hover {
        flex: none !important;
        transform: translateY(-8px);
    }

    .service-card h3 {
        font-size: 28px;
    }

    .service-card p {
        font-size: 16px;
    }

}

@media (max-width:576px) {

    .service-wrap {
        grid-template-columns: 1fr;
    }

    .service-card {
        min-height: auto;
        padding: 35px 25px;
    }

    .service-card h3 {
        font-size: 24px;
    }

    .service-card p {
        font-size: 15px;
    }

    .service-wrap:hover .service-card,
    .service-wrap:hover .service-card:hover {
        transform: none;
    }

}

@media (max-width:1200px) {

    .service-wrap {
        gap: 20px;
    }

    .service-card {
        padding: 35px 20px;
    }

    .service-card h3 {
        font-size: 28px;
    }

    .service-card p {
        font-size: 16px;
    }

}

@media (max-width:992px) {

    .service-wrap {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .service-card {
        width: 100%;
        flex: none !important;
        min-height: 320px;
    }

    .service-wrap:hover .service-card,
    .service-wrap:hover .service-card:hover {
        flex: none !important;
        transform: translateY(-6px);
    }

}

@media (max-width:768px) {

    .service-wrap {
        gap: 18px;
    }

    .service-card {
        min-height: 300px;
        padding: 30px 20px;
    }

    .icon {
        font-size: 46px;
    }

    .service-card h3 {
        font-size: 24px;
    }

}

@media (max-width:576px) {

    .service-wrap {
        grid-template-columns: 1fr;
    }

    .service-card {
        min-height: auto;
        padding: 30px 25px;
    }

    .service-wrap:hover .service-card,
    .service-wrap:hover .service-card:hover {
        transform: none;
    }

}

@media (max-width:480px) {

    .services {
        padding: 60px 0;
    }

    .title h2 {
        font-size: 30px;
    }

    .icon {
        font-size: 40px;
    }

    .service-card h3 {
        font-size: 22px;
    }

    .service-card p {
        font-size: 15px;
        line-height: 1.7;
    }

}

@media (max-width:360px) {

    .service-card {
        padding: 25px 18px;
    }

    .title h2 {
        font-size: 26px;
    }

    .service-card h3 {
        font-size: 20px;
    }

    .service-card p {
        font-size: 14px;
    }

}


/* journey */

@media (max-width:1200px) {

    .journey-container {
        height: 450px;
    }

    .overlay h1 {
        font-size: 58px;
    }

    .overlay h3 {
        font-size: 28px;
    }

    .overlay p {
        font-size: 15px;
    }

}

@media (max-width:992px) {

    .main-journey {
        padding: 80px 0;
    }

    .journey-title h2 {
        font-size: 40px;
    }

    .journey-container {
        height: 420px;
        gap: 10px;
    }

    .journey-card {
        flex: .7;
    }

    .journey-card.active {
        flex: 2.5;
    }

    .overlay {
        left: 20px;
        right: 20px;
        bottom: 20px;
    }

    .overlay h1 {
        font-size: 44px;
    }

    .overlay h3 {
        font-size: 22px;
    }

    .overlay p {
        font-size: 14px;
        line-height: 1.6;
    }

    .journey-btn {
        padding: 10px 22px;
        font-size: 14px;
    }

}

.journey-mobile {
    display: none;
}

@media(max-width:768px) {

    .journey-container {
        display:none !important;
    }

    .journey-mobile {
        display:block !important;
        width: 92%;
        margin: auto;
    }

    .mobile-card {
        background: #fff;
        border-radius: 22px;
        overflow: hidden;
        box-shadow: 0 15px 35px rgba(0, 0, 0, .12);
        animation: fadeCard .5s;
    }

    .mobile-card img {
        width: 100%;
        height: 230px;
        object-fit: cover;
    }

    .mobile-content {
        padding: 25px;
    }

    .mobile-content h2 {
        color: #d83529;
        font-size: 18px;
        margin-bottom: 8px;
    }

    .mobile-content h3 {
        font-size: 28px;
        margin-bottom: 15px;
    }

    .mobile-content p {
        color: #666;
        line-height: 1.8;
    }

    .mobile-content .journey-btn {
        display: inline-block;
        margin-top: 20px;
    }

    .year-tabs {
        margin-top: 25px;
        display: flex;
        gap: 12px;
        overflow-x: auto;
        padding-bottom: 5px;
        scrollbar-width: none;
    }

    .year-tabs::-webkit-scrollbar {
        display: none;
    }

    .year {
        flex: 0 0 auto;
        border: none;
        padding: 12px 24px;
        border-radius: 50px;
        background: #ececec;
        font-size: 15px;
        font-weight: 600;
        cursor: pointer;
        transition: .35s;
    }

    .year.active {
        background: #d83529;
        color: #fff;
        box-shadow: 0 10px 20px rgba(216, 53, 41, .3);
    }

}

@keyframes fadeCard {

    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: none;
    }

}

@media (max-width:576px) {

    .journey-title {
        margin-bottom: 35px;
    }

    .journey-title span {
        font-size: 13px;
    }

    .journey-title h2 {
        font-size: 28px;
    }

    .journey-container {
        width: 92%;
        gap: 12px;
    }

    .journey-card,
    .journey-card.active {
        height: 110px;
        border-radius: 20px;
    }

    .journey-card.active {
        height: 330px;
    }

    .overlay {
        left: 18px;
        right: 18px;
        bottom: 18px;
    }

    .overlay h1 {
        font-size: 34px;
    }

    .overlay h3 {
        font-size: 20px;
    }

    .overlay p {
        font-size: 14px;
    }

    .journey-btn {
        width: 100%;
        text-align: center;
        padding: 12px;
    }

}

@media (max-width:400px) {

    .journey-title h2 {
        font-size: 24px;
    }

    .journey-card.active {
        height: 300px;
    }

    .overlay h1 {
        font-size: 28px;
    }

    .overlay h3 {
        font-size: 18px;
    }

    .overlay p {
        font-size: 13px;
    }

}

/* volunteer */
@media (max-width:992px){

    .volunteer-section{
        height:auto;
        min-height:520px;
        padding:80px 20px;
    }

    .volunteer-content{
        width:100%;
        max-width:650px;
        padding:40px 35px;
    }

    .volunteer-content h2{
        font-size:38px;
    }

    .volunteer-content p{
        font-size:16px;
    }

}

@media (max-width:768px){

    .volunteer-section{
        min-height:auto;
        padding:80px 20px;
        align-items:center;
    }

    .volunteer-content{
        width:100%;
        padding:35px 22px;
    }

    .section-tag{
        font-size:13px;
        padding:8px 18px;
        letter-spacing:1px;
    }

    .volunteer-content h2{
        font-size:30px;
        line-height:1.3;
    }

    .volunteer-content p{
        font-size:15px;
        line-height:1.8;
        margin-bottom:30px;
    }

    .volunteer-buttons{
        flex-direction:column;
        gap:15px;
        align-items:center;
    }

    .join-btn,
    .learn-btn{
        width:100%;
        max-width:280px;
        text-align:center;
        padding:15px 20px;
    }

    .circle1{
        width:110px;
        height:110px;
        left:-30px;
        top:20px;
    }

    .circle2{
        width:80px;
        height:80px;
        right:-20px;
        bottom:20px;
    }

}

@media (max-width:480px){

    .volunteer-section{
        padding:60px 15px;
    }

    .volunteer-content{
        padding:30px 18px;
    }

    .volunteer-content h2{
        font-size:26px;
    }

    .volunteer-content p{
        font-size:14px;
    }

    .join-btn,
    .learn-btn{
        width:100%;
        max-width:none;
        font-size:15px;
    }

    .circle1,
    .circle2{
        display:none;
    }

}

@media (max-width:900px){

    .volunteer-section{
        min-height:620px;
    }

    .volunteer-content h2{
        font-size:36px;
    }

}