/* ======================================
        NEARBY PHARMACY HERO
====================================== */

.pharmacy-hero{

    position:relative;

    overflow:hidden;

    width:100%;

   min-height:calc(100vh - 90px);

    padding:40px 7% 60px;

    display:flex;

    align-items:center;

    background:
    linear-gradient(
        135deg,
        #f8fbff 0%,
        #ffffff 45%,
        #eef7ff 100%
    );

}


/* ======================================
        BACKGROUND BLUR
====================================== */

.pharmacy-hero .hero-blur{

    position:absolute;

    border-radius:50%;

    filter:blur(90px);

    z-index:1;
}

.hero-blur-1{

    width:320px;

    height:320px;

    background:rgba(2,132,199,.15);

    top:-80px;

    left:-80px;
}

.hero-blur-2{

    width:280px;

    height:280px;

    background:rgba(37,99,235,.12);

    bottom:-80px;

    right:-50px;
}


/* ======================================
        CONTAINER
====================================== */

.pharmacy-hero-container{

    width:100%;

    max-width:1400px;

    margin:auto;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:70px;

    position:relative;

    z-index:2;
}


/* ======================================
        LEFT SIDE
====================================== */

.pharmacy-hero-content{

    flex:1;

    max-width:620px;
}


/* Badge */

.hero-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:12px 18px;

    border-radius:40px;

    background:#e0f2fe;

    color:#0369a1;

    font-size:14px;

    font-weight:600;

    margin-bottom:22px;
}

.badge-dot{

    width:10px;

    height:10px;

    border-radius:50%;

    background:#0284c7;
}


/* Heading */

.pharmacy-hero-content h1{

     font-size:clamp(34px,4vw,52px);

    line-height:1.2;

    margin-bottom:18px;

    color:#111827;

    font-weight:700;

    letter-spacing:-1px;

}

.pharmacy-hero-content h1 span{

    display:block;

    margin-top:6px;

    background:
    linear-gradient(
        135deg,
        #0284c7,
        #2563eb
    );

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;
}


/* Description */

.pharmacy-hero-content p{

    color:#64748b;

      max-width:560px;

    font-size:15px;

    line-height:1.7;

    margin-bottom:28px;
}


/* Buttons */

.hero-buttons{

    display:flex;

    align-items:center;

       margin-bottom:28px;

    gap:15px;
}

.primary-btn{

    padding:16px 34px;

    border-radius:50px;

    text-decoration:none;

    color:#fff;

    font-weight:600;

    background:
    linear-gradient(
        135deg,
        #0284c7,
        #2563eb
    );

    transition:.35s;
}

.primary-btn:hover{

    transform:translateY(-4px);

    box-shadow:
    0 18px 35px rgba(37,99,235,.25);
}

.secondary-btn{

    padding:16px 34px;

    border-radius:50px;

    text-decoration:none;

    color:#2563eb;

    border:1px solid rgba(37,99,235,.15);

    background:#fff;

    font-weight:600;

    transition:.35s;
}

.secondary-btn:hover{

    border-color:#2563eb;

    transform:translateY(-4px);
}


/* ======================================
        TRUST ITEMS
====================================== */

.hero-trust{

    display:flex;

    flex-wrap:wrap;

    gap:18px;
}

.trust-item{

    display:flex;

    align-items:center;

    gap:10px;

    background:#ffffff;


    border-radius:14px;

    border:1px solid rgba(37,99,235,.08);

    box-shadow:
    0 8px 25px rgba(15,23,42,.05);

    padding:10px 16px;
}

.trust-item i{

    color:#0284c7;

    font-size:18px;
}

.trust-item span{
    font-weight:600;

    color:#374151;
    font-size:13px;
}


/* ======================================
        HERO RIGHT
====================================== */

.pharmacy-hero-image{

    flex:1;

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

    min-height:520px;
}


/* ======================================
        MAIN PHARMACY CARD
====================================== */

.pharmacy-card{

    background:#ffffff;

    border-radius:28px;

    border:1px solid rgba(37,99,235,.08);

    box-shadow:
    0 25px 60px rgba(15,23,42,.08);

    position:relative;
    width:390px;

    padding:24px;

    z-index:5;
}


/* Header */

.card-header{

    display:flex;

    align-items:center;

    gap:18px;

    margin-bottom:30px;
}

.pharmacy-logo{

    width:70px;

    height:70px;

    border-radius:18px;

    background:
    linear-gradient(
        135deg,
        #0284c7,
        #2563eb
    );

    display:flex;

    align-items:center;

    justify-content:center;

    color:#fff;

    font-size:30px;
}

.card-header h4{

    font-size:22px;

    color:#111827;

    margin-bottom:5px;
}

.card-header small{

    color:#64748b;

    font-size:14px;
}


/* ======================================
        STATUS ITEMS
====================================== */

.medicine-status{

    display:flex;

    flex-direction:column;

    gap:18px;
}

.status-item{

    display:flex;

    align-items:center;

    gap:15px;

    padding:16px 18px;

    border-radius:16px;

    background:#f8fbff;

    transition:.35s;
}

.status-item:hover{

    background:#eef6ff;

    transform:translateX(8px);
}

.status-item i{

    color:#16a34a;

    font-size:22px;
}

.status-item{

    color:#374151;

    font-weight:600;
}


/* ======================================
        FLOATING MEDICINE CARD
====================================== */

.floating-medicine-card{

    position:absolute;

    top:90px;

    left:20px;

    width:180px;

    padding:20px;

    border-radius:20px;

    background:#ffffff;

    text-align:center;

    box-shadow:
    0 18px 45px rgba(15,23,42,.08);

    animation:floatOne 4s ease-in-out infinite;
}

.floating-medicine-card i{

    font-size:34px;

    color:#0284c7;

    margin-bottom:12px;
}

.floating-medicine-card h5{

    font-size:18px;

    color:#111827;

    margin-bottom:6px;
}

.floating-medicine-card p{

    color:#64748b;

    font-size:14px;
}


/* ======================================
        DELIVERY CARD
====================================== */

.floating-delivery-card{

    position:absolute;

    bottom:60px;

    right:10px;

    width:190px;

    padding:20px;

    border-radius:20px;

    background:#ffffff;

    text-align:center;

    box-shadow:
    0 18px 45px rgba(15,23,42,.08);

    animation:floatTwo 5s ease-in-out infinite;
}

.floating-delivery-card i{

    font-size:34px;

    color:#2563eb;

    margin-bottom:12px;
}

.floating-delivery-card h5{

    color:#111827;

    margin-bottom:6px;

    font-size:18px;
}

.floating-delivery-card p{

    color:#64748b;

    font-size:14px;
}


/* ======================================
        FLOATING CIRCLES
====================================== */

.hero-circle{

    position:absolute;

    width:70px;

    height:70px;

    border-radius:50%;

    background:#ffffff;

    display:flex;

    justify-content:center;

    align-items:center;

    box-shadow:
    0 15px 35px rgba(15,23,42,.08);

    font-size:26px;

    color:#0284c7;
}

.hero-circle.one{

    top:20px;

    right:90px;

    animation:floatOne 5s infinite;
}

.hero-circle.two{

    left:80px;

    bottom:150px;

    animation:floatTwo 6s infinite;
}

.hero-circle.three{

    right:40px;

    top:250px;

    animation:floatThree 7s infinite;
}


/* ======================================
        ANIMATIONS
====================================== */

@keyframes floatOne{

    0%,100%{

        transform:translateY(0px);
    }

    50%{

        transform:translateY(-12px);
    }
}

@keyframes floatTwo{

    0%,100%{

        transform:translateY(0px);
    }

    50%{

        transform:translateY(10px);
    }
}

@keyframes floatThree{

    0%,100%{

        transform:translateX(0px);
    }

    50%{

        transform:translateX(-10px);
    }
}


/* ======================================
        RESPONSIVE
====================================== */

@media(max-width:992px){

    .pharmacy-hero-container{

        flex-direction:column;

        text-align:center;
    }

    .pharmacy-hero-content{

        max-width:100%;
    }

    .hero-buttons{

        justify-content:center;
    }

    .hero-trust{

        justify-content:center;
    }

    .pharmacy-card{

        width:100%;
        max-width:430px;
    }

    .floating-medicine-card,
    .floating-delivery-card{

        display:none;
    }

    .hero-circle{

        display:none;
    }
}

@media(max-width:768px){

    .pharmacy-hero{

        padding:70px 5%;
    }

    .pharmacy-hero-content h1{

        font-size:36px;
    }

    .hero-buttons{

        flex-direction:column;
    }

    .primary-btn,
    .secondary-btn{

        width:100%;

        text-align:center;
    }

    .pharmacy-hero-image{

        min-height:auto;
    }

    .pharmacy-card{

        padding:24px;
    }
}





/* ======================================
        PHARMACY SERVICES
====================================== */

.pharmacy-services{

    padding:90px 7%;

    background:#ffffff;
}

.services-grid{

    margin-top:60px;

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:28px;
}

.service-card{

    background:#ffffff;

    border:1px solid rgba(37,99,235,.08);

    border-radius:24px;

    padding:35px 30px;

    transition:.35s;

    box-shadow:0 10px 30px rgba(15,23,42,.05);
}

.service-card:hover{

    transform:translateY(-10px);

    border-color:#2563eb;

    box-shadow:0 20px 40px rgba(37,99,235,.12);
}

.service-icon{

    width:72px;

    height:72px;

    border-radius:20px;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:30px;

    margin-bottom:22px;
}

.service-card h3{

    font-size:22px;

    color:#111827;

    margin-bottom:14px;

    font-weight:700;
}

.service-card p{

    font-size:15px;

    line-height:1.8;

    color:#64748b;
}

/* Icon Colors */

.prescription{

    background:#e0f2fe;

    color:#0284c7;
}

.otc{

    background:#eef6ff;

    color:#2563eb;
}

.wellness{

    background:#dcfce7;

    color:#16a34a;
}

.personal{

    background:#fff7ed;

    color:#ea580c;
}

.devices{

    background:#f3e8ff;

    color:#7c3aed;
}

.delivery{

    background:#fee2e2;

    color:#dc2626;
}

/* ==========================
        RESPONSIVE
========================== */

@media(max-width:991px){

    .services-grid{

        grid-template-columns:repeat(2,1fr);
    }
}

@media(max-width:768px){

    .pharmacy-services{

        padding:70px 5%;
    }

    .services-grid{

        grid-template-columns:1fr;
    }

    .service-card{

        padding:30px 24px;
    }
}


#pharmacyServiceCarousel{

    margin-top:60px;

    padding:0 70px;
}

#pharmacyServiceCarousel .carousel-item{

    transition:transform .6s ease;
}

#pharmacyServiceCarousel .carousel-control-prev,
#pharmacyServiceCarousel .carousel-control-next{

    width:58px;
    height:58px;

    top:50%;

    transform:translateY(-50%);

    background:#ffffff;

    border-radius:50%;

    opacity:1;

    box-shadow:0 12px 30px rgba(0,0,0,.12);
}

#pharmacyServiceCarousel .carousel-control-prev{

    left:-10px;
}

#pharmacyServiceCarousel .carousel-control-next{

    right:-10px;
}

#pharmacyServiceCarousel .carousel-control-prev-icon,
#pharmacyServiceCarousel .carousel-control-next-icon{

    filter:invert(40%);
}










/* ======================================
        HOW PHARMACY WORKS
====================================== */

.pharmacy-process{

    padding:100px 7%;

    background:#f8fbff;
}

.process-timeline{

    margin-top:70px;

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:35px;

    position:relative;
}

/* Connecting Line */

.process-timeline::before{

    content:"";

    position:absolute;

    top:70px;

    left:10%;

    width:80%;

    height:3px;

    background:#dbeafe;

    z-index:1;
}

/* Step */

.process-step{

    position:relative;

    z-index:2;

    text-align:center;
}

.step-number{

    font-size:13px;

    font-weight:700;

    color:#0284c7;

    letter-spacing:2px;

    margin-bottom:18px;
}

/* Icon */

.step-icon{

    width:90px;

    height:90px;

    margin:auto;

    border-radius:50%;

    background:linear-gradient(
        135deg,
        #0284c7,
        #2563eb
    );

    display:flex;

    justify-content:center;

    align-items:center;

    color:#ffffff;

    font-size:34px;

    box-shadow:0 15px 35px rgba(37,99,235,.18);

    transition:.35s;

    margin-bottom:25px;
}

.process-step:hover .step-icon{

    transform:translateY(-10px) scale(1.05);
}

.process-step h3{

    font-size:22px;

    margin-bottom:15px;

    color:#111827;
}

.process-step p{

    font-size:15px;

    line-height:1.8;

    color:#64748b;
}

/* Responsive */

@media(max-width:991px){

    .process-timeline{

        grid-template-columns:repeat(2,1fr);

        gap:50px;
    }

    .process-timeline::before{

        display:none;
    }
}

@media(max-width:768px){

    .pharmacy-process{

        padding:80px 5%;
    }

    .process-timeline{

        grid-template-columns:1fr;
    }
}




/* ======================================
        TRUST & SAFETY
====================================== */

.pharmacy-trust{

     padding:70px 7% 50px;
    background:#ffffff;
}

.pharmacy-trust .section-heading{

    max-width:900px;

    margin:auto;

    text-align:center;
    margin-bottom: 0;
}

.pharmacy-trust .section-heading h2{

    margin-bottom:12px;
}

.pharmacy-trust .section-heading p{

    margin-bottom:0;
}

.trust-wrapper{
 margin-top:40px;

    display:grid;

    grid-template-columns:45% 55%;

    gap:50px;

    align-items:center;
}

/* Left Image */
.trust-image{
        max-width:400px;

        height:550px;

    align-items:center;
     min-height:680px;

      display:flex;

    justify-content:center;

    align-items:center;


}

.trust-image img{
    object-fit:contain;

    transform:scale(1.08);

      width:115%;

    height:580px;

    margin-bottom: 120px;

}


/* Right */

.trust-list{

    display:flex;

    flex-direction:column;
}

.trust-feature{
    border-bottom:1px solid #e7edf5;

     display:flex;

    align-items:flex-start;

    gap:20px;

    padding:18px 0;
}

.trust-feature:last-child{

    border-bottom:none;
}

.trust-check{

    width:44px;

    height:44px;

    flex-shrink:0;

    display:flex;

    justify-content:center;

    align-items:center;
}

.trust-check i{

    font-size:42px;

    color:#16a34a;
}

.trust-feature h4{

    font-size:20px;

    color:#1e3a8a;

    margin-bottom:8px;

    font-weight:700;
}

.trust-feature p{
    color:#475569;

     font-size:15px;

    line-height:1.7;
}

/* Responsive */

@media(max-width:991px){

    .trust-wrapper{

        grid-template-columns:1fr;

        gap:50px;
    }

    .trust-image{

        max-width:550px;

        margin:auto;
    }

}

@media(max-width:768px){

    .pharmacy-trust{

        padding:80px 5%;
    }

    .trust-feature{

        gap:16px;
    }

    .trust-check i{

        font-size:34px;
    }

    .trust-feature h4{

        font-size:20px;
    }

    .trust-feature p{

        font-size:15px;
    }

}



/* ======================================
        MEDICINE CATEGORIES
====================================== */

.medicine-categories{

     padding:60px 7% 90px;
    background:#f8fbff;
}


.medicine-card{

    background:#fff;

    border-radius:24px;

    padding:45px 35px;

    text-align:center;

    border:1px solid rgba(37,99,235,.08);

    box-shadow:0 10px 30px rgba(15,23,42,.08);

    transition:.4s;
}

.swiper-slide-active .medicine-card{

    transform:scale(1.02);

    box-shadow:0 25px 45px rgba(37,99,235,.12);
}

.medicine-card:hover{


    border-color:#2563eb;

    box-shadow:0 18px 35px rgba(37,99,235,.10);
     transform:translateY(-6px);
}

.medicine-icon{

    width:90px;

    height:90px;

    border-radius:24px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin:auto auto 25px;

    font-size:36px;
}

.medicine-card h3{

    font-size:24px;

    margin:18px 0 12px;

    color:#111827;
}

.medicine-card p{

    color:#64748b;

    line-height:1.8;

    font-size:15px;

    margin-bottom:25px;
}

.arrow-icon{

       width:48px;

    height:48px;

    border-radius:50%;

    background:#2563eb;

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    margin:auto;

    transition:.3s;
}

.medicine-card:hover .arrow-icon{

    transform:translateX(6px);
}


.medicineSwiper{
   width:100%;

    margin-top:60px;

    padding:40px 0 80px;

    overflow:visible;
      position:relative;
}

.swiper-slide{

     width:340px;

    display:flex;

    justify-content:center;
}

.medicine-prev,
.medicine-next{

    width:52px;

    height:52px;

    background:#fff;

    border-radius:50%;

    box-shadow:0 10px 25px rgba(0,0,0,.12);

    display:flex;

    align-items:center;

    justify-content:center;

    color:#2563eb;

    cursor:pointer;

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    z-index:10;
}

.medicine-prev{

    left:-15px;
}

.medicine-next{

    right:-15px;
}

@media(max-width:768px){

    .swiper-slide{

        width:280px;
    }
}

/* Icon Colors */

.pain{background:#e0f2fe;color:#0284c7;}
.cold{background:#eef6ff;color:#2563eb;}
.heart{background:#fee2e2;color:#dc2626;}
.diabetes{background:#ede9fe;color:#7c3aed;}
.baby{background:#fff7ed;color:#ea580c;}
.wellness{background:#dcfce7;color:#16a34a;}
.care{background:#fef3c7;color:#ca8a04;}
.firstaid{background:#ffe4e6;color:#e11d48;}

/* Responsive */


@media(max-width:768px){

    .medicine-categories{

        padding:80px 5%;
    }

    .medicine-card{

        flex-direction:column;

        text-align:center;
    }

    .arrow-icon{

        display:none;
    }
}


.swiper-slide {
    transform: scale(.88);
    opacity: .6;
    transition: .35s ease;
}

.swiper-slide-active {
    transform: scale(1);
    opacity: 1;
}

.swiper-slide-active .medicine-card {
    box-shadow: 0 20px 45px rgba(37,99,235,.12);
}


/* ======================================
        HELP CENTER
====================================== */

.pharmacy-help-center{

    padding:100px 7%;

    background:#f8fbff;
}

/* Topics */

.help-topics{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:15px;

    max-width:850px;

    margin:45px auto;
}

.help-topic{

    border:none;

    cursor:pointer;

    background:#ffffff;

    border:1px solid rgba(37,99,235,.08);

    border-radius:14px;

    padding:16px 12px;

    font-size:15px;

    font-weight:600;

    color:#475569;

    transition:.3s;
}

.help-topic:hover{
   border-color:#2563eb;

    color:#2563eb;

    transform:translateY(-3px);
}

.help-topic.active{

     background:linear-gradient(135deg,#0284c7,#2563eb);

    color:#ffffff;

    border-color:transparent;

    box-shadow:0 10px 25px rgba(37,99,235,.18);
}

.help-topic i{

    font-size:34px;

    margin-bottom:18px;
}

.help-topic h4{

    font-size:20px;

    margin:0;
}

/* FAQ */

.faq-section{

    display:none;

    animation:fade .35s ease;
}

.faq-section.active{

    display:block;
}

.faq-card{

    background:#ffffff;

    border-radius:18px;

    margin-bottom:18px;

    border:1px solid rgba(37,99,235,.08);

    overflow:hidden;
}

.faq-question{

    width:100%;

    background:none;

    border:none;

    padding:22px 28px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    font-size:17px;

    font-weight:600;

    cursor:pointer;
}

.faq-answer{

    display:none;

    padding:0 28px 24px;

    color:#64748b;

    line-height:1.8;
}

.faq-card.active .faq-answer{

    display:block;
}

.faq-card.active i{

    transform:rotate(45deg);
}

@keyframes fade{

    from{

        opacity:0;

        transform:translateY(10px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@media(max-width:991px){

    .help-topics{

        grid-template-columns:repeat(2,1fr);
    }

}

@media(max-width:768px){

    .pharmacy-help-center{

        padding:80px 5%;
    }

    .help-topics{

        grid-template-columns:1fr;
    }

        .help-topics{

        grid-template-columns:repeat(2,1fr);

        gap:12px;
    }

    .help-topic{

        padding:15px 10px;

        font-size:14px;
    }

}