/* Large Tablets in Landscape (1024px) */
:root {
    --color-yale-blue-50: #e8f4fd;
    --color-yale-blue-100: #d0eafb;
    --color-yale-blue-200: #a1d5f7;
    --color-yale-blue-300: #72bff3;
    --color-yale-blue-400: #43aaef;
    --color-yale-blue-500: #1495eb;
    --color-yale-blue-600: #1077bc;
    --color-yale-blue-700: #0c598d;
    --color-yale-blue-800: #083c5e;
    --color-yale-blue-900: #041e2f;
    --color-yale-blue-950: #031521;
}

/* Homepage */
.pro-paragraph, .strategic-paragraph{font-size:16px;}
.pro-volunteer, .support-opports{display:flex;flex-direction:column;gap:11px !important;}
.action-section-1 div:nth-child(2) div,.action-section-2 div:nth-child(2) div{display:flex;flex-direction: column;}
.action-section-1 div:nth-child(2) div div svg,.action-section-2 div:nth-child(2) div div svg{width:26px;height:26px;padding:4.5px;}
.action-section-1 div:nth-child(2) div div h5,.action-section-2 div:nth-child(2) div div h5{font-size:17px;margin-top:4.5px;}
.action-section-1 div:nth-child(2) div div p,.action-section-2 div:nth-child(2) div div p{font-size:15px;}
.action-section-1 div:nth-child(2) div div div div svg,.action-section-2 div:nth-child(2) div div div div svg{width:26px;height:26px;}
.action-section-1 div:nth-child(2) div div div div{flex-direction:column;}
.checked-point  {
    display: flex;flex-direction: row !important;justify-content: start;
    align-items: center;padding:0 !important;
}
.span-dots {display:flex;flex-direction:row !important;}
/* End homepage */

@media screen and (max-width: 1025px) and (orientation: landscape) {
    .autoShow{animation:text-appear both;animation-timeline:view();animation-range:entry 10% cover 50vh;}
    .fadeUp{animation-range: entry 10% cover 30%;}
    ::-webkit-scrollbar{display: none;}
    /* Home Layout */
    nav {
        max-width: 95% !important;
        padding: 0.6rem 1.5rem !important;
        border-radius: 1.2rem;
        top: 8px !important;
    }
    nav .flex {
        padding: 0.5rem 1rem !important;
        gap: 0.5rem;
    }
    .nav-logo img {
        width: 50px !important;
        height: auto !important;
    }
    nav span {
        font-size: 10px !important;
    }
    nav a {
        margin: 0 0.5rem !important;
        font-size: 13px;
    }
    nav button {
        font-size: 12px;
        padding: 0.5rem 1rem !important;
    }
    .body-container {
        max-width: 100% !important;
    }
    .custom-hero {
        margin: 1.5rem 2rem !important;
        gap: 1.5rem;
        flex-direction: row;
    }
    .hero-left-container {
        padding: 1rem 0;
    }
    .hero-left-container h1 {
        font-size: 1.9rem !important;text-wrap: wrap;
        margin: 0.5rem !important;
        line-height: 1.3;
    }
    .hero-left-container p {
        font-size: 13px !important;
        margin: 0.5rem 0 !important;
    }
    .hero-left-container div{ align-self:center !important;}
    .hero-left-container div button:nth-child(1){margin-right:22px !important;}
    .hero-left-container button {
        font-size: 13px !important;
        justify-content:center !important;align-items:center !important;
        padding: 0.55rem 1.3rem !important;
        margin: 0.8rem auto !important;
    }
    .hero-right .hero-right-container {
        width: 75% !important; margin:auto !important;
        height: 380px !important;
    }
    .custom-section-1,
    .custom-section-2, 
    .custom-section-3, 
    .custom-section-4, 
    .custom-section-5,
    .custom-section-6, footer{margin-left:20px !important;margin-right:20px !important;}
    .custom-section-1 .section-1 h2{font-size: 38px !important;margin-top:6px !important;margin-bottom:6px !important;}
    .custom-section-1 .section-1 p{font-size: 19px !important;}
    /* .timeline-section .timeline-marker{transform:translateX(-15%);left:0 !important;} */
    .timeline-section .timeline-content{width:calc(42% - 0px);padding:1.3rem;}
    .timeline-section .timeline-content .timeline-title{font-size:24px !important;text-wrap:wrap;margin-top:0 !important;}
    .timeline-section .timeline-content .timeline-description{font-size:13px !important;text-wrap:wrap;}
    .custom-section-1,
    .custom-section-2,
    .custom-section-3 {
        margin: 1.5rem 2rem !important;
    }

    .timeline-wrapper {
        padding: 2.2rem 0.6rem !important;
    }
    .timeline-line {
        left: 50% !important;
        transform: translateX(-50%);
    }
    .timeline-marker {
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: 16px !important;
        height: 16px !important;
    }
    .timeline-section {
        justify-content: flex-start !important;
    }
    .timeline-section:nth-child(even) {
        justify-content: flex-end !important;
    }
    .timeline-section,
    .timeline-section:nth-child(even) {
        padding: 2.2rem 0 !important;
        min-height: auto;
    }
    .timeline-title {
        font-size: 1.35rem !important;
        margin-bottom: 0.55rem;
    }
    .timeline-description {
        font-size: 0.95rem !important;
        line-height: 1.4;
    }
    .custom-section-2 .title-section h2{font-size:35px !important;margin-bottom:6px;}
    .custom-section-2 .title-section p{font-size:19px !important;margin-top:6px;}
    .section-2.body-section {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1.5rem !important;
        margin: 0.8rem 0 !important;
    }
    .custom-section-3 {
        flex-direction: column !important;
        gap: 1.8rem;
    }
    .section-3-left-container {
        height: 380px !important;
        width: 60% !important;
    }
    .section-3-right-container h1 {
        font-size: 36px !important;
        margin: 0 !important;
    }
    .section-3-right-container p {
        font-size: 19px;
        text-align: left !important;
    }
    .cards-container {
        gap: 1rem !important;
    }
    .card {
        padding: 0.85rem !important;
        border-left-width: 4.5px !important;
        margin-left: 0 !important;
        border-radius: 0.6rem !important;
    }
    .card h3 {
        font-size: 26px !important;
        margin: 0.25rem !important;
        margin-left: 0 !important;
    }
    .card p {
        font-size: 17px !important;
        margin: 0.25rem !important;
        margin-left: 0 !important;
        line-height: 1.35;
    }
    .program-title div:nth-child(1) h2{font-size:38px !important;}
    .program-title p{font-size:17px;margin-right:20px;margin-left:20px;}
    .program-body div:nth-child(1),.program-body div:nth-child(2){display:flex;flex-direction:column;}
    .program-body div:nth-child(1){margin-bottom:11px;gap:11px;}
    .program-body div:nth-child(1) .card-1{margin-top:0;margin-bottom:0;}
    .program-body div:nth-child(2){margin-bottom:11px;gap:11px;}
    .program-body div:nth-child(2) .card-1{align-items:center;margin-top:0;margin-bottom:0;}
    .card-1{width:88%;margin:auto;}
    .card-1 div h2{font-size:52px !important;}
    .card-1 div h3{font-size:22px;}
    .custom-section-5 .partner-hero div h2{font-size:38px;}
    .custom-section-5 .partner-hero div p{font-size:17px;}
    .why-partner .grid{display:flex;flex-direction:row;}
    .why-partner h3{font-size:38px;}
    .why-partner div{display:flex;flex-direction:column;}
    .benefit-card div{width:72px;}
    .benefit-card div svg{color:var(--color-yale-blue-200);width:34px;height:34px;}
    .partnership-types h3{font-size:34px;}
    .partnership-types .grid{display:grid;flex-direction:column;}
    .get-involved-hero h2{font-size:34px;}

    .support-cta-comprehensive div{margin:0;gap:11px;padding:0;}
    .support-cta-comprehensive div div:nth-child(1) h3{font-size:34px;}
    .action-grid{display:grid;flex-direction:column;}
    .action-section-1 div div h4,.action-section-2 div div h4{font-size:26px;margin-top:11px;margin-bottom:0;}
    .pro-paragraph, .strategic-paragraph{font-size:14px !important;}
    .pro-volunteer, .support-opports{display:flex;flex-direction:column;gap:11px !important;}
    
    .action-section-1 div:nth-child(2) div div,.action-section-2 div:nth-child(2) div div{padding:9px;width:auto;gap:9px;display:flex;flex-direction: column;}
    .action-section-1 div:nth-child(2) div div svg,.action-section-2 div:nth-child(2) div div svg{width:26px;height:26px;padding:4.5px;}
    .action-section-1 div:nth-child(2) div div h5,.action-section-2 div:nth-child(2) div div h5{font-size:17px;margin-top:4.5px;}
    .action-section-1 div:nth-child(2) div div p,.action-section-2 div:nth-child(2) div div p{font-size:15px;}
    .action-section-1 div:nth-child(2) div div div div svg,.action-section-2 div:nth-child(2) div div div div svg{width:26px;height:26px;}
    .action-section-1 div:nth-child(2) div div div div{flex-direction:column;}
    .checked-point  {
        display: flex;flex-direction: row !important;
        justify-content: start;
        align-items: center;padding:0 !important;
    }
    .span-dots {display:flex;flex-direction:row !important;font-size:12px;}
    .span-dots span {font-size:10px !important;}
    .bottom-cta{margin-top:11px !important;margin-bottom:11px !important;}
    .cta div{padding:4.5px;margin-right:4.5px;margin-left:4.5px;margin-bottom:9px;}
    .cta div svg{width:22px;height:22px !important;}
    .cta div span{font-size:10px !important;}
    .bottom-cta button{font-size:16px !important;}
    .bottom-cta p{font-size:13px !important;}
    footer{margin:0 !important;}
    footer .footer-container{max-width:100% !important;margin:0;padding-right:9px !important;padding-left:9px !important;}
    .footer-content{display:flex;flex-direction:column-reverse !important;padding:0 !important;margin-bottom:0 !important;}
    .footer-brand{display:flex;flex-direction:column-reverse;}
    .footer-brand div img{ 
        height: auto !important;
        width: 180px !important;
    }
    .footer-brand p{font-size:18px;}
    .footer-ul {
        display: flex;
        width: -webkit-fill-available;
        flex-direction: row !important;
        gap: 9px;
        justify-content: space-evenly;
    }
    .footer-ul div h4{font-size:13px !important;}
    .footer-ul div p{font-size:6.5px !important;}
    .copyright{padding-top:6px !important;padding-right:14px;padding-left:14px;margin-bottom:7px;}
    /* End Home */
    /* About us start */
    .about-vision-grid{gap:20px;}
    /* About us end */
        /* Programs strart */
    #advocacy, .capacity{padding:32px;margin-bottom:24px;}
    /* Programs End */
    /* Partners start */
    .partner-grid{gap:12px;}
    .partner-grid div{padding:16px;}
    /* Partners End */
}

/* Standard Tablets (992px) */

@media screen and (max-width: 992px) and (orientation: portrait) {
    .autoShow{animation:text-appear both;animation-timeline:view();animation-range:entry 10% cover 50vh;}
    .fadeUp{animation-range: entry 10% cover 30%;}
    ::-webkit-scrollbar{display: none;}
    nav {
        max-width: 90% !important;width:80%;margin:auto !important;
        padding: 0.55rem 1rem !important;
        border-radius: 1.1rem;
        top: 7px !important;
    }
    nav .flex {
        padding: 0.46rem 0.92rem !important;
        gap: 0.46rem;
    }
    .nav-logo img {
        height: auto !important;
        width: 60px !important;
    }
    nav span {
        font-size: 9.2px !important;
    }
    nav a {
        margin: 0 0.46rem !important;
        font-size: 13px;
    }
    nav button {
        font-size: 12px;
        padding: 0.46rem 0.92rem !important;
    }
    .body-container {
        max-width: 100% !important;width: 94%;
        margin: auto;
    }
    .custom-hero {
        margin: 1.38rem 1.84rem !important;
        gap: 1.38rem;
        flex-direction: row;
    }
    .hero-left-container {
        padding: 0.92rem 0;
    }
    .hero-left-container h1 {
        font-size: 1.8rem !important;text-wrap: wrap;
        margin: 0.46rem !important;
        line-height: 1.3;
    }
    .hero-left-container p {
        font-size: 14px !important;
        margin: 0.46rem 0 !important;
    }
    .hero-left-container div{ align-self:center !important;}
    .hero-left-container div button:nth-child(1){margin-right:20px !important;}
    .hero-left-container div {
        font-size: 14px !important;
        justify-content:center !important;align-items:center !important;
        padding: 0.5rem 0.5rem !important;
        margin: 0.74rem auto !important;
    }
    .hero-right .hero-right-container {
        width: 80% !important; margin:auto !important;
        height: 300px !important;
    }
    .custom-section-1,
    .custom-section-2, 
    .custom-section-3, 
    .custom-section-4, 
    .custom-section-5,
    .custom-section-6, footer{margin-left:18px !important;margin-right:18px !important;}
    .custom-section-1 .section-1 h2{font-size: 35px !important;margin-top:5.5px !important;margin-bottom:5.5px !important;}
    .custom-section-1 .section-1 p{font-size: 17.5px !important;}
    /* .timeline-section .timeline-marker{transform:translateX(-15%);left:0 !important;} */
    .timeline-section .timeline-content{padding:1.2rem;}
    .timeline-section .timeline-content .timeline-title{font-size:22px !important;text-wrap:wrap;margin-top:0 !important;}
    .timeline-section .timeline-content .timeline-description{font-size:12px !important;text-wrap:wrap;}
    .custom-section-1,
    .custom-section-2,
    .custom-section-3 {
        margin: 1.38rem 1.84rem !important;
    }

    .timeline-wrapper {
        padding: 2rem 0.55rem !important;
    }
    .timeline-line {
        left: 50% !important;
        transform: translateX(-50%);
    }
    .timeline-marker {
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: 15px !important;
        height: 15px !important;
    }
    .timeline-section {
        justify-content: flex-start !important;
    }
    .timeline-section:nth-child(even) {
        justify-content: flex-end !important;
    }
    .timeline-section,
    .timeline-section:nth-child(even) {
        padding: 2rem 0 !important;
        min-height: auto;
    }
    .timeline-title {
        font-size: 1.24rem !important;
        margin-bottom: 0.51rem;
    }
    .timeline-description {
        font-size: 0.87rem !important;
        line-height: 1.35;
    }
    .custom-section-2 .title-section h2{font-size:32px !important;margin-bottom:5.5px;}
    .custom-section-2 .title-section p{font-size:17.5px !important;margin-top:5.5px;}
    .section-2.body-section {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1.38rem !important;
        margin: 0.74rem 0 !important;
    }
    .custom-section-3 {
        flex-direction: column !important;
        gap: 1.66rem;
    }
    .section-3-left-container {
        height: 350px !important;
        width:65% !important;
    }
    .section-3-right-container h1 {
        font-size: 33px !important;
        margin: 0 !important;
    }
    .section-3-right-container p {
        font-size: 17.5px;
        text-align: left !important;
    }
    .cards-container {
        gap: 0.92rem !important;
    }
    .card {
        padding: 0.78rem !important;
        border-left-width: 4.1px !important;
        margin-left: 0 !important;
        border-radius: 0.55rem !important;
    }
    .card h3 {
        font-size: 24px !important;
        margin: 0.23rem !important;
        margin-left: 0 !important;
    }
    .card p {
        font-size: 15.6px !important;
        margin: 0.23rem !important;
        margin-left: 0 !important;
        line-height: 1.32;
    }
    .program-title div:nth-child(1) h2{font-size:35px !important;}
    .program-title p{font-size:15.6px;margin-right:18px;margin-left:18px;}
    .program-body div:nth-child(1),.program-body div:nth-child(2){display:flex;flex-direction:column;}
    .program-body div:nth-child(1){margin-bottom:10px;gap:10px;}
    .program-body div:nth-child(1) .card-1{margin-top:0;margin-bottom:0;}
    .program-body div:nth-child(2){margin-bottom:10px;gap:10px;}
    .program-body div:nth-child(2) .card-1{align-items:center;margin-top:0;margin-bottom:0;}
    .card-1{width:81%;margin:auto;}
    .card-1 div h2{font-size:48px !important;}
    .card-1 div h3{font-size:20px;}
    .custom-section-5 .partner-hero div h2{font-size:35px;}
    .custom-section-5 .partner-hero div p{font-size:15.6px;}
    .why-partner .grid {display:flex; flex-direction:row;}
    .why-partner h3{font-size:35px;}
    .why-partner div{display:flex;flex-direction:column;}
    .benefit-card div{width:66px;}
    .benefit-card div svg{color:var(--color-yale-blue-200);width:31px;height:31px;}
    .partnership-types h3{font-size:31px;}
    .partnership-types .grid{display:grid;flex-direction:column;}
    .get-involved-hero h2{font-size:31px;}

    .support-cta-comprehensive div{margin:0;gap:10px;padding:0;}
    .support-cta-comprehensive div div:nth-child(1) h3{font-size:31px;}
    .action-grid{display:grid;flex-direction:column;}
    .action-section-1 div div h4,.action-section-2 div div h4{font-size:22px;margin-top:9px;margin-bottom:0;}
    .pro-paragraph, .strategic-paragraph{font-size:12px;}
    .pro-volunteer, .support-opports{display:flex;flex-direction:column;gap:10px !important;}
    
    .action-section-1 div:nth-child(2) div,.action-section-2 div:nth-child(2) div{display:flex;flex-direction: column;}
    .action-section-1 div:nth-child(2) div div,.action-section-2 div:nth-child(2) div div{padding:8.3px;width:auto;gap:8.3px;display:flex;flex-direction: column;}
    .action-section-1 div:nth-child(2) div div svg,.action-section-2 div:nth-child(2) div div svg{width:24px;height:24px;padding:4.1px;}
    .action-section-1 div:nth-child(2) div div h5,.action-section-2 div:nth-child(2) div div h5{font-size:15.6px;margin-top:4.1px;}
    .action-section-1 div:nth-child(2) div div p,.action-section-2 div:nth-child(2) div div p{font-size:13.8px;}
    .action-section-1 div:nth-child(2) div div div div svg,.action-section-2 div:nth-child(2) div div div div svg{width:24px;height:24px;}
    .action-section-1 div:nth-child(2) div div div div{flex-direction:column;}
    .checked-point  {
        display: flex;flex-direction: row !important;
        justify-content: start;
        align-items: center;padding:0 !important;
    }
    .span-dots {display:flex;flex-direction:row !important;}
    .span-dots span {font-size:10px !important;}
    .bottom-cta{margin-top:10px !important;margin-bottom:10px !important;}
    .cta div{padding:4.1px;margin-right:4.1px;margin-left:4.1px;margin-bottom:8.3px;}
    .cta div svg{width:20px;height:20px !important;}
    .cta div span{font-size:12px !important;}
    .bottom-cta button{font-size:14px !important;padding:.5rem 1rem;}
    .bottom-cta p{font-size:12px !important;}
    footer{margin:0 !important;}
    footer .footer-container{max-width:100% !important;margin:0;padding-right:8.3px !important;padding-left:8.3px !important;}
    .footer-content{display:flex;flex-direction:column-reverse !important;padding:0 !important;margin-bottom:0 !important;}
    .footer-brand{display:flex;flex-direction:column-reverse;padding-left: 15px;}
    .footer-brand div img{
        height: auto !important;
        width: 150px !important;
    }
    .footer-brand p{font-size:18px;}
    .footer-ul {
        display: flex;
        width: -webkit-fill-available;
        flex-direction: row !important;
        gap: 8.3px;
        justify-content: space-evenly;
    }
    .footer-ul div h4{font-size:12px !important;}
    .footer-ul div p{font-size:6px !important;}
    .copyright{padding-top:5.5px !important;padding-right:12px;padding-left:12px;margin-bottom:6px;}
    /* End Home */
    /* About us start */
    .about-vision-grid{gap:14px;}
    .about-vision-grid div{padding:.6rem;}
    /* About us end */
    /* Programs strart */
    #advocacy, .capacity{padding:32px;margin-bottom:24px;}
    #mhpss .text, #advocacy .text, #social-support .text, .capacity .text{gap:20px;}
    .numbers{grid-template-columns: repeat(2, minmax(0, 1fr));}
    .numbers div{padding:14px;}
    .numbers div p{font-size:16px;}
    .program-cta{padding-top:30px;padding-bottom:30px;}
    /* Programs End */
    /* Partners start */
    .partner-grid{gap:12px;}
    .partner-grid div{padding:16px;}
    .partner-grid div h3{font-size:22px;}
    .partner-grid div p{font-size:16px;}
    .collab {gap:8px !important;padding:12px;}
    .collab div:nth-child(1){width:40px;height:40px;}
    .collab div h3{font-size:20px;}
    .donate-container{padding:32px;}
    .contact-grid{gap:10px;}
    /* Partners End */
    /* Support start */
    .support-grid{gap:10px;}
    .support-card{padding:16px;}
    .support-card h3{font-size:22px;}
    .support-info, .support-form{padding:16px;}
    .chat-svg svg{width:50px;height:50px;}
    /* Support End */
}

/* Tablets in Portrait (769px) */

@media screen and (max-width: 769px) and (orientation: portrait) {
    .autoShow{animation:text-appear both;animation-timeline:view();animation-range:entry 10% cover 50vh;}
    .fadeUp{animation-range: entry 10% cover 30%;}
    ::-webkit-scrollbar{display: none;}
    nav {
        max-width: 90% !important;width:88%;margin:auto !important;
        padding: 0.3rem 1rem !important;
        border-radius: 0.99rem;
        top: 6px !important;
    }
    button.menu-toggle{visibility:hidden !important;display:none !important;}
    button.menu-toggle i{visibility:hidden !important;display:none !important;}
    .primary-links, .donate{display:flex;}
    nav .flex {
        padding: 0.41rem 0.83rem !important;
        gap: 0.41rem;
    }
    .nav-logo img {
        height: auto !important;
        width: 70px !important;
    }
    nav span {
        font-size: 8.3px !important;
    }
    nav a {
        /* display: none; */
    }
    nav button {
        font-size: 10px;
        padding: 0.41rem 0.83rem !important;
    }

    .body-container {
        max-width: 100% !important;
    }
    .custom-hero {
        margin: 1.24rem 1.66rem !important;
        gap: 1.24rem;
        flex-direction: row;
    }
    .hero-left-container {
        padding: 0.83rem 0;
    }
    .hero-left-container h1 {
        font-size: 1.5rem !important;text-wrap: wrap;
        margin: 0.41rem !important;
        line-height: 1.29;
    }
    .hero-left-container p {
        font-size: 12x !important;
        margin: 0.41rem 0 !important;
    }
    .hero-left-container div{ align-self:center !important;}
    .hero-left-container div button:nth-child(1){margin-right:18px !important;}
    .hero-left-container div {
        font-size: 13px !important;
        justify-content:center !important;align-items:center !important;
        padding: 0.2rem 0.2rem !important;
        margin: 0.66rem auto !important;
    }
    .custom-hero .hero-right .hero-right-container {
        width: 63% !important; margin:auto !important;
        height: 315px !important;
    }
    .custom-section-1,
    .custom-section-2, 
    .custom-section-3, 
    .custom-section-4, 
    .custom-section-5,
    .custom-section-6, footer{margin-left:16px !important;margin-right:16px !important;}
    .custom-section-1 .section-1 h2{font-size: 31.5px !important;margin-top:5px !important;margin-bottom:5px !important;}
    .custom-section-1 .section-1 p{font-size: 15.75px !important;}
    /* .timeline-section .timeline-marker{transform:translateX(-15%);left:0 !important;} */
    .timeline-section .timeline-content{width:calc(50% - 15px);padding:1.08rem;}
    .timeline-section .timeline-content .timeline-title{font-size:19.8px !important;text-wrap:wrap;margin-top:0 !important;}
    .timeline-section .timeline-content .timeline-description{font-size:10.8px !important;text-wrap:wrap;}
    .custom-section-1,
    .custom-section-2,
    .custom-section-3 {
        margin: 1.24rem 1.66rem !important;
    }

    .timeline-wrapper {
        padding: 1.8rem 0.49rem !important;
    }
    .timeline-line {
        left: 50% !important;
        transform: translateX(-50%);
    }
    .timeline-marker {
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: 14px !important;
        height: 14px !important;
    }
    /* .timeline-content{width:calc(42% - 0px);} */
    .timeline-section {
        justify-content: flex-start !important;
    }
    .timeline-section:nth-child(even) {
        justify-content: flex-end !important;
    }
    .timeline-section,
    .timeline-section:nth-child(even) {
        padding: 1.8rem 0 !important;
        min-height: auto;
    }
    .timeline-title {
        font-size: 1.12rem !important;
        margin-bottom: 0.46rem;
    }
    .timeline-description {
        font-size: 0.78rem !important;
        line-height: 1.31;
    }
    .custom-section-2 .title-section h2{font-size:28.8px !important;margin-bottom:5px;}
    .custom-section-2 .title-section p{font-size:15.75px !important;margin-top:5px;}
    .section-2.body-section {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1.24rem !important;
        margin: 0.66rem 0 !important;
    }
    .custom-section-3 {
        flex-direction: column !important;
        gap: 1.49rem;
    }
    .section-3-left-container {
        height: 350px !important;
        width: 70% !important;
    }
    .section-3-right-container h1 {
        font-size: 29.7px !important;
        margin: 0 !important;
    }
    .section-3-right-container p {
        font-size: 15.75px;
        text-align: left !important;
    }
    .cards-container {
        gap: 0.83rem !important;
    }
    .card {
        padding: 0.70rem !important;
        border-left-width: 3.7px !important;
        margin-left: 0 !important;
        border-radius: 0.49rem !important;
    }
    .card h3 {
        font-size: 21.6px !important;
        margin: 0.21rem !important;
        margin-left: 0 !important;
    }
    .card p {
        font-size: 14px !important;
        margin: 0.21rem !important;
        margin-left: 0 !important;
        line-height: 1.29;
    }
    .program-title div:nth-child(1) h2{font-size:31.5px !important;}
    .program-title p{font-size:14px;margin-right:16px;margin-left:16px;}
    .program-body div:nth-child(1),.program-body div:nth-child(2){display:flex;flex-direction:column;}
    .program-body div:nth-child(1){margin-bottom:9px;gap:9px;}
    .program-body div:nth-child(1) .card-1{margin-top:0;margin-bottom:0;}
    .program-body div:nth-child(2){margin-bottom:9px;gap:9px;}
    .program-body div:nth-child(2) .card-1{align-items:center;margin-top:0;margin-bottom:0;}
    .card-1{width:72.9%;margin:auto;}
    .card-1 div h2{font-size:43.2px !important;}
    .card-1 div h3{font-size:18px;}
    .custom-section-5 .partner-hero div h2{font-size:31.5px;}
    .custom-section-5 .partner-hero div p{font-size:14px;}

    .why-partner .grid {display:flex; flex-direction:row;}
    .why-partner h3{font-size:31.5px;}
    .why-partner div{display:flex;flex-direction:column;}

    .benefit-card div{width:59.4px;}
    .benefit-card div svg{color:var(--color-yale-blue-200);width:27.9px;height:27.9px;}
    .partnership-types h3{font-size:27.9px;}
    .partnership-types .grid{display:grid;flex-direction:column;}
    .partnership-type-card div h4{margin-top:5px;font-size:18px;}
    .partnership-type-card div p{font-size:14px;}
    .get-involved-hero h2{font-size:27.9px;}
    
    .support-cta-comprehensive div{margin:0;gap:9px;padding:0;}
    .support-cta-comprehensive div div:nth-child(1) h3{font-size:27.9px;}
    .action-grid{display:grid;flex-direction:column;}
    .action-section-1 div div h4,.action-section-2 div div h4{font-size:22px;margin-top:9px;margin-bottom:0;}
    .pro-paragraph,.strategic-paragraph{font-size:11px;}
    .pro-volunteer, .support-opports{display:flex;flex-direction:column;gap:9px !important;}
    
    .action-section-1 div:nth-child(2) div,.action-section-2 div:nth-child(2) div{display:flex;flex-direction: column;}
    .action-section-1 div:nth-child(2) div div,.action-section-2 div:nth-child(2) div div{padding:7.5px;width:auto;gap:7.5px;display:flex;flex-direction: column;}
    .action-section-1 div:nth-child(2) div div svg,.action-section-2 div:nth-child(2) div div svg{width:26px;height:26px;padding:3px;}
    .action-section-1 div:nth-child(2) div div h5,.action-section-2 div:nth-child(2) div div h5{font-size:14px;margin-top:3.7px;}
    .action-section-1 div:nth-child(2) div div p,.action-section-2 div:nth-child(2) div div p{font-size:12.4px;}
    .action-section-1 div:nth-child(2) div div div div svg,.action-section-2 div:nth-child(2) div div div div svg{width:21.6px;height:21.6px;}
    .action-section-1 div:nth-child(2) div div div div{flex-direction:column;}
    .checked-point  {
        display: flex;flex-direction: row !important;
        justify-content: start;
        align-items: center;padding:0 !important;
    }
    .span-dots {display:flex;flex-direction:row !important;}
    .span-dots span {font-size:8px !important;}
    .bottom-cta{margin-top:9px !important;margin-bottom:9px !important;}
    .cta div{padding:3.7px;margin-right:3.7px;margin-left:3.7px;margin-bottom:7.5px;}
    .cta div svg{width:18px;height:18px !important;}
    .cta div span{font-size:10px !important;}
    .bottom-cta button{font-size:16px !important;padding: .5rem .8rem;}
    .bottom-cta p{font-size:12px !important;text-wrap:wrap;}
    footer{margin:0 !important;}
    footer .footer-container{max-width:100% !important;margin:0;padding-right:7.5px !important;padding-left:7.5px !important;}
    .footer-content{display:flex;flex-direction:column-reverse !important;padding:0 !important;margin-bottom:0 !important;}
    .footer-brand{display:flex;flex-direction:column-reverse;padding-left: 14px;}
    .footer-brand div img{ 
        height: auto !important;
        width: 150px !important;
    }
    .footer-brand p{font-size:18px;}
    .footer-ul {
        display: flex;
        width: -webkit-fill-available;
        flex-direction: row !important;
        gap: 7.5px;
        justify-content: space-evenly;
    }
    .footer-ul div h4{font-size:10.8px !important;}
    .footer-ul div p{font-size:5.4px !important;}
    .copyright{padding-top:5px !important;padding-right:10.8px;padding-left:10.8px;margin-bottom:5px;}
}
/* Small Devices - Portrait (450px) */

@media screen and (max-width: 450px) and (orientation: portrait) {
    .autoShow{animation:text-appear both;animation-timeline:view();animation-range:entry 10% cover 50vh;}
    .fadeUp{animation-range: entry 10% cover 30%;}
    ::-webkit-scrollbar{display: none;}
    nav {
        max-width: 90% !important;
        padding: 0.4rem 0.65rem !important;
        border-radius: 2rem;
        top: 5px !important;
        margin: auto !important;
        width: 84%;
    }
    nav .flex {
        padding: 0.4rem !important;
        gap: 0.25rem;
    }
    nav img {
        height: 25px !important;
        width: auto !important;
    }
    nav span {
        font-size: 9px !important;
    }
    nav a {
        display: none;
    }
    .nav-logo{display:block;}
    nav button {
        font-size: 18px;
        padding: 0.3rem 0.6rem !important;
    }
    .mobile-menu div{
        display:block;
        position: absolute !important;
        z-index: 60 !important;
        width: 86% !important;
        max-width: 86% !important;
        top: 50px;
        left: 7%;
        margin: auto !important;}
    .countdown div div{font-size:11px;}
    .count {margin: auto 0rem;padding: 0.5rem 0.5rem;}
    .body-container {
        max-width: 100% !important;
    }
    .custom-hero {
        margin: 0.75rem !important;
        flex-direction: column;
        gap: 15px;
    }
    .hero-left-container {
        padding: 0.75rem 0;
    }
    .hero-left-container h1 {
        font-size: 2rem !important;text-wrap: wrap;
        margin: 0 !important;
        line-height: 1.25;
    }
    .hero-left-container p {
        font-size: 18px !important;
        margin: 0.4rem 0 !important;
    }
    .hero-left-container div{ align-self:center !important;}
    .hero-left-container div button:nth-child(1){margin-right:20px !important;}
    .hero-left-container button {
        font-size: 18px !important;
        justify-content:center !important;align-items:center !important;
        padding: 0.4rem 1rem !important;
        margin: 0.75rem auto !important;
    }
    .custom-hero .hero-right .hero-right-container {
        width: 70% !important; margin:auto !important;
        height: 250px !important;
    }
    .custom-section-1,
    .custom-section-2, 
    .custom-section-3, 
    .custom-section-4, 
    .custom-section-5,
    .custom-section-6, footer{margin-left:15px !important;margin-right:15px !important;}
    .custom-section-1 .section-1 h2{font-size: 36px !important;margin-top:5px !important;margin-bottom:5px !important;}
    .custom-section-1 .section-1 p{font-size: 18px !important;}
    .timeline-section .timeline-marker{left:0 !important;}
    .timeline-section .timeline-content{width:100%;padding:1.2rem;}
    .timeline-section .timeline-content .timeline-title{font-size:22px !important;text-wrap:wrap;margin-top:0 !important;}
    .timeline-section .timeline-content .timeline-description{font-size:12px !important;text-wrap:wrap;}
    .custom-section-1,
    .custom-section-2,
    .custom-section-3 {
        margin: 0.75rem !important;
    }

    .timeline-wrapper {
        padding: 2rem 0.5rem !important;
    }
    .timeline-line {
        left: 12px !important;
    }
    .timeline-marker {
        /* left: 12px !important; */
        transform:translateX(-30%) !important;
        width: 14px !important;
        height: 14px !important;
    }
    .timeline-section,
    .timeline-section:nth-child(even) {
        padding: 2rem 0 !important;
        min-height: auto;
    }
    .timeline-title {
        font-size: 1rem !important;
        margin-bottom: 0.5rem;
    }
    .timeline-description {
        font-size: 0.75rem !important;
        line-height: 1.3;
    }
    .custom-section-2 .title-section h2{font-size:32px !important;margin-bottom:5px;}
    .custom-section-2 .title-section p{font-size:18px !important;margin-top:5px;}
    .section-2.body-section {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
        margin: 0.75rem 0 !important;
    }
    .custom-section-3 {
        flex-direction: column !important;
        gap: 1.5rem;
    }
    .section-3-left-container {
        height: 300px !important;
        width: 100% !important;
    }
    .section-3-right-container h1 {
        font-size: 34px !important;
        margin: 0 !important;
    }
    .section-3-right-container p {
        font-size: 18px;
        text-align: left !important;
    }
    .cards-container {
        gap: 0.75rem !important;
    }
    .card {
        padding: 0.7rem !important;
        border-left-width: 4px !important;
        margin-left: 0 !important;
        border-radius: 0.5rem !important;
    }
    .card h3 {
        font-size: 24px !important;
        margin: 0.2rem !important;
        margin-left: 0 !important;
    }
    .card p {
        font-size: 16px !important;
        margin: 0.2rem !important;
        margin-left: 0 !important;
        line-height: 1.3;
    }
    .program-title div:nth-child(1) h2{font-size:36px !important;}
    .program-title p{font-size:16px;margin-right:15px;margin-left:15px;}
    .program-body div:nth-child(1),.program-body div:nth-child(2){display:flex;flex-direction:column;}
    .program-body div:nth-child(1){margin-bottom:10px;gap:10px;}
    .program-body div:nth-child(1) .card-1{margin-top:0;margin-bottom:0;}
    .program-body div:nth-child(2){margin-bottom:10px;gap:10px;}
    .program-body div:nth-child(2) .card-1{align-items:center;margin-top:0;margin-bottom:0;}
    .card-1{width:86%;margin:auto;}
    .card-1 div h2{font-size:50px !important;}
    .card-1 div h3{font-size:20px;}
    .custom-section-5 .partner-hero div h2{font-size:36px;}
    .custom-section-5 .partner-hero div p{font-size:16px;}

    /* .why-partner .grid {display:flex; flex-direction:row;} */
    .why-partner h3{font-size:36px;}
    .why-partner div{display:flex;flex-direction:column !important;}
    
    .benefit-card div{width:70px;}
    .benefit-card div svg{color:var(--color-yale-blue-200);width:32px;height:32px;}
    .partnership-types h3{font-size:32px;}
    .partnership-types .grid{display:flex;flex-direction:column;}
    .get-involved-hero h2{font-size:32px;}
    .support-cta-comprehensive div{margin:0;gap:10px;padding:0;}
    .support-cta-comprehensive div div:nth-child(1) h3{font-size:32px;}
    .support-cta-comprehensive div div:nth-child(1) p{font-size:16px;}
    .action-grid{display:flex;flex-direction:column;}
    .action-section-1 div div h4{font-size:24px;margin-top:10px;margin-bottom:0;}
    .pro-volunteer, .support-opports{display:flex;flex-direction:column;gap:10px !important;}
    .action-section-1 div:nth-child(2) div,.action-section-2 div:nth-child(2) div{display:flex;flex-direction: column;}
    .action-section-1 div:nth-child(2) div div,.action-section-2 div:nth-child(2) div div{padding:8px;width:auto;gap:8px;display:flex;flex-direction: column;}
    .action-section-1 div:nth-child(2) div div svg,.action-section-2 div:nth-child(2) div div svg{width:24px;height:24px;padding:4px;}
    .action-section-1 div:nth-child(2) div div h5,.action-section-2 div:nth-child(2) div div h5{font-size:16px;margin-top:4px;}
    .action-section-1 div:nth-child(2) div div p,.action-section-2 div:nth-child(2) div div p{font-size:14px;}
    .action-section-1 div:nth-child(2) div div div div svg,.action-section-2 div:nth-child(2) div div div div svg{width:24px;height:24px;}
    .action-section-1 div:nth-child(2) div div div div{flex-direction:column;}
    .checked-point  {
        display: flex;flex-direction: row !important;
        justify-content: start;
        align-items: center;padding:0 !important;
    }
    .span-dots {display:flex;flex-direction:row !important;}
    .bottom-cta{margin-top:10px !important;margin-bottom:10px !important;}
    .cta div{padding:4px;margin-right:4px;margin-left:4px;margin-bottom:8px;}
    .cta div svg{width:16px;height:16px !important;}
    .cta div span{font-size:7px !important;}
    .bottom-cta button{font-size:14px !important;}
    .bottom-cta p{font-size:10px !important;}
    footer{margin:0 !important;padding-bottom:5px;}
    footer .footer-container{max-width:100% !important;margin:0;padding-right:8px !important;padding-left:8px !important;}
    .footer-content{display:flex;flex-direction:column-reverse !important;padding:0 !important;margin-bottom:0 !important;}
    .footer-brand{display:flex;flex-direction:column-reverse;}
    .footer-brand div{margin-bottom:6px !important;}
    .footer-brand div img{ 
        height: auto !important;
        width: 95px !important;margin-bottom:0;
    }
    .footer-brand p{font-size:11px;margin-bottom:10px;}
    .footer-ul {
        display: flex;padding-left:0;padding-right:0;
        width: -webkit-fill-available;
        flex-direction: row !important;
        gap: 8px;
        justify-content: space-evenly;
    }
    .footer-ul div h4{font-size:12px !important;}
    .footer-ul div ul li a, .footer-ul div ul li{font-size:10px !important;}
    .navigation, .our-work{flex:1;}.follow{flex:2;}
    .follow div a{width:24px !important;height:24px !important;align-items:center;align-content:center;justify-content:center;}
    .follow div a svg{width:20px !important;height:20px !important;}
    .copyright div, .copyright div a{font-size:11px;}
    .copyright{padding-top:5px !important;padding-right:12px;padding-left:12px;margin-bottom:6px;}
    /* About us start */
    .about-hero div h1, .program-hero div h1, .partner-hero div h1, .support-hero div h1{font-size:36px;}
    .about-hero div p, .program-hero div p, .partner-hero div p, .support-hero div p{font-size:16px;}
    .vision h2, .mission h2{font-size:32px;}
    .vision p, .mission p{font-size:14px;}
    .about-team h2{font-size:24px !important;}
    .about-teams{gap:12px;}
    .team-card {width:90px;height:90px;}
    .team-content h3{font-size:14px;}
    .team-content p{font-size:12px;}
    .team-content button{font-size:14px;}
    /* About us end */
    /* Programs Start */
    .program-intro {margin:2rem;}
     .program-intro h2, .partner-intro h2, .support-intro h2{font-size:24px;margin-bottom:0.5rem;}
     .text h3{font-size:20px;}
     .numbers{grid-template-columns:repeat(1, minmax(0, 1fr));}
     #mhpss, #advocacy, #socail-support, .capacity, .program-cta{margin-left:10px;margin-right:10px;}
     #advocacy, .capacity{padding:15px;}
     .program-cta{padding:15px;}
     .program-cta-button {flex-direction:column;gap:6px !important;}
     .program-cta-button a{font-size:14px;}
    /* Programs End */
    /* Partners start */
    .partner-grid{gap:12px;}
    .partner-grid div{padding:16px;}
    .partner-grid div h3{font-size:22px;}
    .partner-grid div p{font-size:16px;}
    .partner-grid div div {margin-bottom:6px;}
    .collab {gap:8px !important;padding:12px;}
    .collab div:nth-child(1){width:40px;height:40px;}
    .collab div h3{font-size:20px;}
    .donate-container{padding:12px;}
    .donate-card h2, .contact-grid h2{font-size:24px;}
    .partner-contact{padding:0;}
    .contact-grid{gap:10px;padding:12px;}
    .contact-grid form{padding:14px;}
    /* Partners End */
    /* Support start */
    .support-card div{margin-bottom:5px;}
    .chat-svg svg{width:70px;height:70px;}
    .support-map{margin-left:20px;margin-right:20px;}
}

/* Very Small Devices - Portrait (379px) */

@media screen and (max-width: 379px) and (orientation: portrait) {
    .autoShow{animation:text-appear both;animation-timeline:view();animation-range:entry 10% cover 50vh;}
    .fadeUp{animation-range: entry 10% cover 30%;}
    ::-webkit-scrollbar{display: none;}
    nav {
        max-width: 95% !important;
        padding: 0.35rem 0.5rem !important;
        border-radius: 2rem;
        top: 3px !important;
    }
    nav .flex {
        padding: 0.35rem !important;
        gap: 0.2rem;
    }
    nav img {
        height: 22px !important;
        width: auto !important;
    }
    nav span {
        font-size: 8px !important;
    }
    nav a {
        display: none;
    }
    nav button {
        font-size: 18px;
        padding: 0.25rem 0.5rem !important;
    }
    .body-container {
        max-width: 100% !important;
    }
    .custom-hero {
        margin: 0.6rem !important;
        flex-direction: column;
        gap: 10px;
    }
    .hero-left-container {
        padding: 0.6rem 0;
    }
    .hero-left-container h1 {
        font-size: 1.75rem !important;text-wrap: wrap;
        margin: 0 !important;
        line-height: 1.2;
    }
    .hero-left-container p {
        font-size: 16px !important;
        margin: 0.35rem 0 !important;
    }
    .hero-left-container div{ align-self:center !important;}
    .hero-left-container div button:nth-child(1){margin-right:18px !important;}
    .hero-left-container button {
        font-size: 16px !important;
        justify-content:center !important;align-items:center !important;
        padding: 0.35rem 0.9rem !important;
        margin: 0.6rem auto !important;
    }
    .custom-hero .hero-right .hero-right-container {
        width: 70% !important; margin:auto !important;
        height: 250px !important;
    }
    .custom-section-1,
    .custom-section-2, 
    .custom-section-3, 
    .custom-section-4, 
    .custom-section-5,
    .custom-section-6, footer{margin-left:12px !important;margin-right:12px !important;}
    .custom-section-1 .section-1 h2{font-size: 32px !important;margin-top:4px !important;margin-bottom:4px !important;}
    .custom-section-1 .section-1 p{font-size: 16px !important;}
    .timeline-section .timeline-marker{transform:translateX(-15%);left:0 !important;}
    .timeline-section .timeline-content{padding:1rem;}
    .timeline-section .timeline-content .timeline-title{font-size:20px !important;text-wrap:wrap;margin-top:0 !important;}
    .timeline-section .timeline-content .timeline-description{font-size:11px !important;text-wrap:wrap;}
    .custom-section-1,
    .custom-section-2,
    .custom-section-3 {
        margin: 0.6rem !important;
    }

    .timeline-wrapper {
        padding: 1.75rem 0.4rem !important;
    }
    .timeline-line {
        left: 11px !important;
    }
    .timeline-marker {
        /* left: 11px !important; */
        width: 13px !important;
        height: 13px !important;
    }
    .timeline-section,
    .timeline-section:nth-child(even) {
        padding: 1.75rem 0 !important;
        min-height: auto;
    }
    .timeline-title {
        font-size: 0.95rem !important;
        margin-bottom: 0.45rem;
    }
    .timeline-description {
        font-size: 0.72rem !important;
        line-height: 1.25;
    }
    .custom-section-2 .title-section h2{font-size:28px !important;margin-bottom:4px;}
    .custom-section-2 .title-section p{font-size:16px !important;margin-top:4px;}
    .section-2.body-section {
        grid-template-columns: 1fr !important;
        gap: 0.9rem !important;
        margin: 0.6rem 0 !important;
    }
    .custom-section-3 {
        flex-direction: column !important;
        gap: 1.25rem;
    }
    .section-3-left-container {
        height: 280px !important;
        width: 100% !important;
    }
    .section-3-right-container h1 {
        font-size: 30px !important;
        margin: 0 !important;
    }
    .section-3-right-container p {
        font-size: 16px;
        text-align: left !important;
    }
    .cards-container {
        gap: 0.65rem !important;
    }
    .card {
        padding: 0.6rem !important;
        border-left-width: 3.5px !important;
        margin-left: 0 !important;
        border-radius: 0.45rem !important;
    }
    .card h3 {
        font-size: 22px !important;
        margin: 0.18rem !important;
        margin-left: 0 !important;
    }
    .card p {
        font-size: 15px !important;
        margin: 0.18rem !important;
        margin-left: 0 !important;
        line-height: 1.25;
    }
    .program-title div:nth-child(1) h2{font-size:32px !important;}
    .program-title p{font-size:15px;margin-right:12px;margin-left:12px;}
    .program-body div:nth-child(1),.program-body div:nth-child(2){display:flex;flex-direction:column;}
    .program-body div:nth-child(1){margin-bottom:9px;gap:9px;}
    .program-body div:nth-child(1) .card-1{margin-top:0;margin-bottom:0;}
    .program-body div:nth-child(2){margin-bottom:9px;gap:9px;}
    .program-body div:nth-child(2) .card-1{align-items:center;margin-top:0;margin-bottom:0;}
    .card-1{width:84%;margin:auto;}
    .card-1 div h2{font-size:45px !important;}
    .card-1 div h3{font-size:18px;}
    .custom-section-5 .partner-hero div h2{font-size:32px;}
    .custom-section-5 .partner-hero div p{font-size:15px;}
    .why-partner h3{font-size:32px;}
    .why-partner div{display:flex;flex-direction:column;}
    .benefit-card div{width:65px;}
    .benefit-card div svg{color:var(--color-yale-blue-200);width:30px;height:30px;}
    .partnership-types h3{font-size:30px;}
    .partnership-types .grid{display:flex;flex-direction:column;}
    .get-involved-hero h2{font-size:30px;}
    .support-cta-comprehensive div{margin:0;gap:9px;padding:0;}
    .support-cta-comprehensive div div:nth-child(1) h3{font-size:30px;}
    .support-cta-comprehensive div div:nth-child(1) p{font-size:15px;}
    .action-grid{display:flex;flex-direction:column;}
    .action-section-1 div div h4{font-size:22px;margin-top:9px;margin-bottom:0;}
    .pro-volunteer, .support-opports{display:flex;flex-direction:column;gap:9px !important;}
    .action-section-1 div:nth-child(2) div,.action-section-2 div:nth-child(2) div{display:flex;flex-direction: column;}
    .action-section-1 div:nth-child(2) div div,.action-section-2 div:nth-child(2) div div{padding:7px;width:auto;gap:7px;display:flex;flex-direction: column;}
    .action-section-1 div:nth-child(2) div div svg,.action-section-2 div:nth-child(2) div div svg{width:22px;height:22px;padding:3.5px;}
    .action-section-1 div:nth-child(2) div div h5,.action-section-2 div:nth-child(2) div div h5{font-size:15px;margin-top:3.5px;}
    .action-section-1 div:nth-child(2) div div p,.action-section-2 div:nth-child(2) div div p{font-size:13px;}
    .action-section-1 div:nth-child(2) div div div div svg,.action-section-2 div:nth-child(2) div div div div svg{width:22px;height:22px;}
    .action-section-1 div:nth-child(2) div div div div{flex-direction:column;}
    .checked-point  {
        display: flex;flex-direction: row !important;
        justify-content: start;
        align-items: center;padding:0 !important;
    }
    .span-dots {display:flex;flex-direction:row !important;}
    .bottom-cta{margin-top:9px !important;margin-bottom:9px !important;}
    .cta div{padding:3.5px;margin-right:3.5px;margin-left:3.5px;margin-bottom:7px;}
    .cta div svg{width:18px;height:18px !important;}
    .cta div span{font-size:7.5px !important;}
    .bottom-cta button{font-size:12px !important;}
    .bottom-cta p{font-size:10px !important;}
    footer{margin:0 !important;}
    footer .footer-container{max-width:100% !important;margin:0;padding-right:7px !important;padding-left:7px !important;}
    .footer-content{display:flex;flex-direction:column-reverse !important;padding:0 !important;margin-bottom:0 !important;}
    .footer-brand{display:flex;flex-direction:column-reverse;}
    .footer-brand p{font-size:10px;}
    .footer-ul {
        display: flex;
        width: -webkit-fill-available;
        flex-direction: row !important;
        gap: 7px;
        justify-content: space-evenly;
    }
    .footer-ul div h4{font-size:9px !important;}
    .footer-ul div ul li a, .footer-ul div ul li{font-size:10px !important;}
    .copyright{font-size:10px;padding-top:4px !important;padding-right:10px;padding-left:10px;margin-bottom:5px;}
    /* About Us start */
    .team-content h3{font-size:13px;}
    .team-content p{font-size:10px;}
    .team-content button{font-size:12px;}


    /* About Us end */
}

/* Extra Small Devices - Portrait (324px) */

@media screen and (max-width: 324px) and (orientation: portrait) {
    body {
        font-size: 11px;
    }
    nav {
        padding: 0.3rem 0.3rem !important;
    }
    nav .flex {
        padding: 0.2rem !important;
        gap: 0.1rem;
    }
    nav img {
        height: 5px !important;
    }
    nav button {
        font-size: 9px;
        padding: 0.2rem 0.3rem !important;
    }
    .custom-hero {
        margin: 0.25rem !important;
        gap: 0.75rem;
    }
    .hero-left-container h1 {
        font-size: 0.9rem !important;
    }
    .hero-left-container p {
        font-size: 8px !important;
        margin: 0.2rem 0 !important;
    }
    .hero-left-container button {
        font-size: 9px !important;
        padding: 0.25rem 0.6rem !important;
        margin: 0.4rem auto !important;
    }
    .hero-right .hero-right-container {
        height: 150px !important;
    }
    .custom-section-1,
    .custom-section-2,
    .custom-section-3 {
        margin: 0.25rem !important;
    }
    .section-1.title-section h2,
    .section-2.title-section h2 {
        font-size: 0.9rem !important;
        margin-bottom: 0.25rem;
    }
    .section-1.title-section p,
    .section-2.title-section p {
        font-size: 8px;
        margin-bottom: 0.5rem;
    }
    .timeline-wrapper {
        padding: 1rem 0.1rem !important;
    }
    .timeline-marker {
        width: 10px !important;
        height: 10px !important;
    }
    .timeline-title {
        font-size: 0.85rem !important;
    }
    .timeline-description {
        font-size: 0.65rem !important;
    }
    .bg-forest-800,
    .bg-forest-100 {
        padding: 0.5rem !important;
    }
    .bg-forest-800 h3,
    .bg-forest-100 h3 {
        font-size: 10px !important;
    }
    .bg-forest-800 p,
    .bg-forest-100 p {
        font-size: 8px !important;
    }
    .section-3-left-container {
        height: 150px !important;
    }
    .section-3-right-container h1 {
        font-size: 0.9rem !important;
    }
    .section-3-right-container p {
        font-size: 8px;
    }
    .card {
        padding: 0.4rem !important;
        border-left-width: 2px !important;
        border-radius: 0.3rem !important;
    }
    .card h3 {
        font-size: 9px !important;
        margin: 0.1rem !important;
    }
    .card p {
        font-size: 7px !important;
        margin: 0.1rem !important;
    }
}