@media only screen and (max-width:1099px) {
    
}

@media only screen and (max-width:992px) {
   
    section.head-strip {
        padding: 0px 0px 10px 0px;
        min-height: 72px;
    }
    
    ul#menu-main-menu {
        margin-top: 55px;
    }
    
    .hero-blue {
        width: 50%;
        right: -25px;
    }

    .mobile-hide {
        position:absolute;
        left: 47%;
        top: 10%;
    }
    .mobile-hide span {
        display:none;
    }
    .desktop-hide {
        display:none;
    }
    .navbar {
        height:100%;
    }
    .navbar-brand img.logo {
        width: auto;        /* Keep aspect ratio */
        display: hide;
        margin-top: -5px;   /* Fine-tune vertical centering if it looks "off" */
    }
}
@media only screen and (max-width:767px) {
    .hero-blue-home {
        width: 100%;
        right: 5px;
        border-radius: 20px 20px 0px 0px;
        position: absolute;
        top: 85%;
        height: 20vh;      
        max-height: 100%;  
        overflow-y: auto; 
        padding: 3px !important;
        min-height: 0;
    } 
}
@media only screen and (max-width:670px) {
    .hero-blue-home {
        width: 90%;
        right: 20px;
        border-radius: 20px 20px 0px 0px;
        position: absolute;
        top: 150%;
        height: 29vh;      
        max-height: 100%;  /* Ensures it CANNOT become taller than its parent column */
        overflow-y: auto;  /* If text is too long, it creates a tiny scrollbar INSIDE the blue box instead of breaking the layout */
        padding: 5px !important;
    } 
    .banner-button-group.home-buttons a {
        text-align: left;
        font-weight: 700;
        letter-spacing: 3px;
    }
    .hero-blue-home {
        padding: 5px !important;
        height: 210px;
        top: 100%;
    } 
}
@media only screen and (max-width:480px) {
 
    .hero-blue-home {
        width: 90%;
        right: 20px;
        border-radius: 20px 20px 0px 0px;
        position: absolute;
        top: 109%;
        height: 231px;
        max-height: 100%;
        overflow-y: auto;
        padding: 5px !important;
    } 
    
    .hero-blue {
        width: 90%;
        right: 0px;
        border-radius: 20px 0px 0px 0px;
        position: absolute;
        top: 135%;
        height: 25vh;
        padding: 5px !important;
    }
    
    .hero-top-section{
        padding-top: 7px !important;
        padding-bottom: 0px !important;
    }
    
    .event-latest-card {
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        height: auto;
        padding: 24px;
        gap: 24px;
        width: 1072px;
        max-width: 100%;
        min-height: 211px;
        background: #FFFFFF;
        border: 1px solid #AEBBE3;
        border-radius: 8px;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
        height: auto;
    }
    
    .articles-mobile-only-container{
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        height: auto;
        padding: 24px;
        gap: 24px;
        width: 1072px;
        max-width: 100%;
        min-height: 211px;
        background: #FFFFFF;
        border: 1px solid #AEBBE3;
        border-radius: 8px;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
        height: auto;
    }
    
    .newsletter-floating-graphic-window {
        display: none; /* Safely hides absolute image overlaps to prevent text collision on small screens */
    }
    
    .newsletter-banner-inner-layout {
        flex-direction: column;
        align-items: flex-start;
        gap: 32px;
        padding: 40px;
    }
    
    .newsletter-floating-graphic-window {
        /* Remove position: absolute, right, bottom, etc. */
        width: 100%;
        z-index: 1;
        
        /* Force the buttons to display neatly inside this box */
        display: flex;
        gap: 12px; /* Adds space between the two buttons */
        justify-content: center; /* Aligns them to the right side */
        align-items: center;
    }
    
    .top-accent-background-bar {
        width: 100%;
        height: 50px;
        background: #fff;
        border-radius: 4px;
        margin-top: -20px;
        position: relative;
        z-index: 1;
    }
    .p-promo-sction .newsletter-banner-inner-layout {
        height: 440px;
    }
    .newsletter-graphic-asset {
        width: 150%;
        height: 150%;
        object-fit: contain;
        filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25)) drop-shadow(-2px -2px 4px rgba(0, 0, 0, 0.25));
        border-radius: 4px 4px 0px 0px;
        overflow: hidden;
        margin-top: 35px;
    }
    .banner-button-group.home-buttons {
        display: grid;
        gap: 20px;
    }
    .social-block.soc-h a {
        background: #ffffffd9;
        margin-right: 30px;
        margin-top: 35px;
        padding: 5px 11px;
        font-size: 35px;
        border-radius: 3px;
    }
    .custom-prescription-card i {
        font-size: 50px;
    
    }
    .custom-prescription-card {
        height: 310px;
    }
    .hero-hm {
        margin-right: 7px;
        font-size: 20px;
        color: var(--default-color)!important;
    }
    
    .desc-pt {
        font-size: 15px;
        height: 110px;
    }
    
    footer .mobile-center a.btn.btn-default {
        font-size: 30px;
    }
    
    footer aside.widget.widget_media_image {
        margin-top: -25px;
        text-align: center;
        padding: 20px;
    }
    
    footer ul.menu li a {
        margin-bottom: 10px;
        font-weight: 600;
        text-align: center;
        font-size: 13px;
    }
    footer h2.widget-title {
        text-align: center;
        margin-top:10px;
    }
    .heading-prescription-card {
        width: 100%;
        max-width: 408px;
        height: 221px;
        margin: 0 auto 30px; /* Centers the card in its column and adds bottom spacing */
    
        /* Flexbox for vertical and horizontal centering of content */
        display: flex;
        flex-direction: column;
        justify-content: center; 
        align-items: center;
        text-align: left;
        border: 2px solid rgba(0, 0, 0, 0.08);
        border-radius: 8px; /* Optional: cleaner look */
        overflow: hidden;
        padding-left: 20px;
    }
    .articles-intro {
        height: 200px;
    
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding-right: 40px;
    }
    .hero-area-block-home{
        min-height: 600px !important;
    }
    .newsletter-text-content-heading {
        text-align: center;
    }
    .head-strip img.logo {
        margin-top: 0px;
    }
    .mobile-center{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .small-copyline {
        line-height: 17px;
        font-size: 10px;
        padding: 8px;
    }
    .custom-pharmacy-card{
        width: 100%;
        /*width: 351px;*/
        /*height: 408px;*/
        display: flex;
        flex-direction: column;
        background-color: white;
        box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        padding: 10px;
        border-radius: 8px; /* Optional: cleaner look */
        overflow: hidden;
    }
    
    .custom-pharmacy-card h3{
        font-size: 16px; /* or any size you prefer */
        font-weight: bold; /* optional: adjust thickness */
        line-height: 1.2 ; /* optional: control spacing */
    }
    
    /* Remove the dot before 'a' */
    .custom-pharmacy-card a {
        font-size: 16px;
        color: #1A347F;
        text-decoration: none; /* Optional: removes underline */
        font-weight: normal;    /* Optional: makes it pop more */
    }
    
    /* Good practice: Add a hover state */
    .custom-pharmacy-card a:hover {
        color: #12245a; /* A slightly darker blue for when you hover */
    }
    
}

@media only screen and (max-width:390px) {
    .hero-blue {
        width: 97%;
        top: 110%;
        height: 205px;
    }
    .hero-blue-home{
        height: 30vh;
        bottom: 0;
    }
    
    .small-copyline {
        line-height: 3px;
        font-size: 7px;
    }
    /** even smaller screen **/
}

@media only screen and (max-width:350px) {
    .small-copyline {
        line-height: 3px;
        font-size: 6px;
    }
    /** even smaller screen **/
    .white-block-info{
        background: var(--white-color);
        padding: 5px 20px;
        color: var(--default-color);
        border-radius: 5px;
        width: fit-content;
        margin: 20px auto;
    }
    .hero-blue-home {
        padding: 0px !important;
        height: 220px;
        top: 95%;
    } 
}