/*==================================================
PATIENT RESOURCES
==================================================*/

:root{

    --primary:#0A3B70;
    --primary-dark:#415333;
    --secondary:#E9F3E3;

    --heading:#172033;
    --text:#667085;

    --white:#fff;

    --border:#E7ECF2;

    --bg:#F7FAFC;

    --radius:22px;

    --transition:.35s ease;

}

.patient-resources{

    padding:100px 15px;

    background:linear-gradient(180deg,#F9FBFD 0%,#F2F7F3 100%);

    position:relative;

    overflow:hidden;

}

.patient-resources::before{

    content:"";

    position:absolute;

    width:500px;

    height:500px;

    background:rgba(84,107,65,.05);

    border-radius:50%;

    top:-220px;

    right:-180px;

}

.patient-resources::after{

    content:"";

    position:absolute;

    width:350px;

    height:350px;

    background:rgba(84,107,65,.06);

    border-radius:50%;

    left:-120px;

    bottom:-120px;

}

/*==========================================
Heading
==========================================*/

.patient-heading{

    text-align:center;

    max-width:760px;

    margin:auto;

    margin-bottom:70px;

    position:relative;

    z-index:2;

}

.patient-heading h1{

    font-size:52px;

    font-weight:800;

    color:var(--heading);

    margin-bottom:20px;

    line-height:1.2;

}

.patient-heading p{

    color:var(--text);

    font-size:18px;

    line-height:1.9;

}

/*==========================================
Filter Buttons
==========================================*/

.resource-filters{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:15px;

    flex-wrap:wrap;

    margin-bottom:60px;

    position:relative;

    z-index:2;

}

.filter-btn{

    border:none;

    background:#fff;

    color:var(--primary);

    padding:14px 28px;

    border-radius:60px;

    cursor:pointer;

    font-weight:600;

    transition:var(--transition);

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

    position:relative;

    overflow:hidden;

}

.filter-btn::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(135deg,var(--primary),var(--primary-dark));

    transform:scaleX(0);

    transform-origin:left;

    transition:.35s;

    z-index:-1;

}

.filter-btn:hover{

    color:#fff;

    transform:translateY(-4px);

}

.filter-btn:hover::before{

    transform:scaleX(1);

}

.filter-btn.active{

    background:var(--primary);

    color:#fff;

}

/*==========================================
Grid
==========================================*/

.resource-grid{

    row-gap:30px;

    position:relative;

    z-index:2;

}

/*==========================================
Cards
==========================================*/

.resource-card{

    transition:.45s;

    animation:fadeUp .8s ease forwards;

}

.resource-card .card{

    border:none;

    border-radius:var(--radius);

    overflow:hidden;

    background:#fff;

    box-shadow:0 15px 40px rgba(0,0,0,.06);

    transition:.4s;

    height:100%;

    position:relative;

}

.resource-card .card::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:0;

    height:4px;

    background:var(--primary);

    transition:.4s;

}

.resource-card:hover .card{

    transform:translateY(-12px);

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

}

.resource-card:hover .card::before{

    width:100%;

}

/*==========================================
Image
==========================================*/

.card-img-top{

    width:100%;

    height:240px;

    object-fit:cover;

    transition:.6s;

}

.resource-card:hover .card-img-top{

    transform:scale(1.08);

}

/*==========================================
Body
==========================================*/

.card-body{

    padding:30px;

}

.card-body h4{

    font-size:24px;

    font-weight:700;

    color:var(--heading);

    margin-bottom:18px;

    line-height:1.3;

}

.card-body p{

    color:var(--text);

    line-height:1.9;

    margin:0;

    font-size:15px;

}

/*==========================================
Footer
==========================================*/

.card-footer{

    border:none;

    background:none;

    padding:0 30px 30px;

}

.card-footer a{

    width:100%;

    height:54px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    border-radius:60px;

    background:linear-gradient(135deg, #1b386e, #0f2561);

    color:#fff;

    text-decoration:none;

    font-weight:600;

    transition:.35s;

}

.card-footer a:hover{

    color:#fff;

    transform:translateY(-3px);

    box-shadow:0 15px 30px rgba(84,107,65,.35);

}

/*==========================================
Hover Glow
==========================================*/

.resource-card:hover{

    filter:drop-shadow(0 18px 40px rgba(84,107,65,.18));

}

/*==========================================
Animation
==========================================*/

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/*==========================================
No Resources
==========================================*/

.no-resource{

    text-align:center;

    padding:80px 20px;

    color:var(--text);

}

.no-resource img{

    max-width:180px;

    margin-bottom:25px;

}

/*==========================================
Scrollbar
==========================================*/

::-webkit-scrollbar{

    width:8px;

}

::-webkit-scrollbar-thumb{

    background:var(--primary);

    border-radius:20px;

}

/*==========================================
Tablet
==========================================*/

@media(max-width:991px){

.patient-resources{

padding:80px 15px;

}

.patient-heading h1{

font-size:40px;

}

.patient-heading p{

font-size:16px;

}

.card-img-top{

height:220px;

}

.card-body{

padding:25px;

}

.card-body h4{

font-size:21px;

}

}

/*==========================================
Mobile
==========================================*/

@media(max-width:767px){

.patient-resources{

padding:60px 15px;

}

.patient-heading{

margin-bottom:50px;

}

.patient-heading h1{

font-size:32px;

}

.patient-heading p{

font-size:15px;

line-height:1.8;

}

.resource-filters{

justify-content:flex-start;

overflow-x:auto;

flex-wrap:nowrap;

padding-bottom:10px;

scrollbar-width:none;

}

.resource-filters::-webkit-scrollbar{

display:none;

}

.filter-btn{

padding:12px 22px;

font-size:14px;

white-space:nowrap;

flex:0 0 auto;

}

.card-img-top{

height:200px;

}

.card-body{

padding:22px;

}

.card-body h4{

font-size:20px;

}

.card-footer{

padding:0 22px 22px;

}

}

/*==========================================
Small Mobile
==========================================*/

@media(max-width:480px){

.patient-heading h1{

font-size:28px;

}

.patient-heading p{

font-size:14px;

}

.card-img-top{

height:180px;

}

.filter-btn{

padding:10px 18px;

font-size:13px;

}

.card-footer a{

height:50px;

font-size:14px;

}

}
.ast-page-builder-template .site-content .container{max-width:1180px;margin:auto;}
.ast-page-builder-template .site-content > .ast-container{display:block;}
.resource-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.resource-card{background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:0 15px 35px rgba(0,0,0,.08);transition:.35s}
.resource-card:hover{transform:translateY(-10px)}
.resource-card img{width:100%;height:220px;object-fit:cover;display:block}
.resource-content{padding:24px}
.resource-content h3{margin:0 0 12px;color:var(--heading)}
.resource-content p{color:var(--text);line-height:1.8}
.download-btn{display:flex;justify-content:center;align-items:center;margin:20px 24px 24px;height:50px;background:var(--primary);color:#fff;text-decoration:none;border-radius:999px;transition:.3s}
.download-btn:hover{background:var(--primary-dark)}
@media(max-width:992px){.resource-grid{grid-template-columns:repeat(2,1fr)}.patient-heading h1{font-size:38px}}
@media(max-width:768px){.resource-grid{grid-template-columns:1fr}.patient-heading h1{font-size:30px}.resource-filters{justify-content:flex-start;overflow:auto}}