.about-paw {

    padding: 100px 8%;

    background:
    linear-gradient(
        180deg,
        #001809 0%,
        #012115 35%,
        #1b2722 65%,
        #101715 100%
    );

    color: white;

    overflow: hidden;
}




.learn-header,
.paw-header {
    
    
    text-align: center;

    max-width: 760px;

    margin: 0 auto 70px;
}

.learn-header h1,
.paw-header h2 {

    font-family: 'Georgia';
    font-size: clamp(2.7rem, 5vw, 4.2rem);

    color: #f5f1e8;

    margin-bottom: 20px;

    letter-spacing: 1px;

    line-height: 1.2;
}

.learn-header p,
.paw-header p {

    color: rgba(255,255,255,0.72);

    line-height: 1.9;

    font-size: 1rem;
}



.top-cards {

    display: flex;

    justify-content: center;

    gap: 28px;

    flex-wrap: wrap;
}

.bottom-card-wrapper {

    display: flex;

    justify-content: center;

    margin-top: 28px;
}




.info-card {

    position: relative;

    width: 420px;

    height: 320px;

    overflow: hidden;

    border-radius: 28px;

    cursor: pointer;

    background: #111;

    transition:
    transform 0.45s ease,
    box-shadow 0.45s ease;

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




.info-card::before {

    content: "";

    position: absolute;

    inset: 0;

    background:
    linear-gradient(
        135deg,
        rgba(255,255,255,0.12),
        transparent 45%
    );

    opacity: 0;

    transition: 0.5s ease;

    z-index: 2;
}

.info-card:hover::before {

    opacity: 1;
}



.info-card:hover {

    transform:
    translateY(-10px)
    scale(1.02);

    box-shadow:
    0 28px 55px rgba(0,0,0,0.5);
}




.info-card img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition:
    transform 0.7s ease,
    filter 0.5s ease;
}

.info-card:hover img {

    transform: scale(1.08);

    filter: brightness(1.08);
}


/* CARD OVERLAY */

.card-content {

    position: absolute;

    inset: 0;

    z-index: 3;

    display: flex;

    flex-direction: column;

    justify-content: flex-end;

    padding: 32px;

    background:
    linear-gradient(
        to top,
        rgba(0,0,0,0.95),
        rgba(0,0,0,0.45),
        rgba(0,0,0,0.08)
    );
}


/* TITLES */

.card-content h2 {

    color: white;

    font-size: 2rem;

    margin-bottom: 12px;

    transform: translateY(10px);

    transition: 0.4s ease;
}


/* PARAGRAPH */

.card-content p {

    color: rgba(255,255,255,0.82);

    line-height: 1.7;

    font-size: 0.95rem;

    max-width: 90%;

    opacity: 0;

    transform: translateY(20px);

    transition: 0.45s ease;
}


/* READ MORE */

.card-content::after {

    content: "Read More →";

    color: #d8c2a4;

    margin-top: 18px;

    font-size: 0.95rem;

    font-weight: 600;

    letter-spacing: 0.5px;

    opacity: 0;

    transform: translateY(15px);

    transition: 0.45s ease;
}


/* CONTENT ANIMATION */

.info-card:hover .card-content h2 {

    transform: translateY(0);
}

.info-card:hover .card-content p {

    opacity: 1;

    transform: translateY(0);
}

.info-card:hover .card-content::after {

    opacity: 1;

    transform: translateY(0);
}


/* BOTTOM CARD */

.bottom-card {

    width: 470px;
}


/* =========================
   DIVIDER
========================= */

.paw-divider {

    display: flex;

    justify-content: center;

    align-items: center;

    margin: 100px 0 80px;
}

.paw-divider::before,
.paw-divider::after {

    content: "";

    width: 120px;

    height: 1px;

    background: rgba(255,255,255,0.12);
}

.paw-divider span {

    margin: 0 20px;

    font-size: 2rem;

    color: #d8c2a4;
}


/* =========================
   COMMUNITY SECTION
========================= */

.paw-layout {

    display: grid;

    grid-template-columns: 2fr 1fr;

    gap: 25px;
}


/* =========================
   MAIN NEWS AREA
========================= */

.paw-main {

    display: grid;

    gap: 22px;
}


/* =========================
   FEATURE NEWS CARDS
========================= */

.paw-card {

    position: relative;

    overflow: hidden;

    border-radius: 26px;

    height: 340px;

    transition:
    transform 0.4s ease,
    box-shadow 0.4s ease;

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

.paw-card:hover {

    transform: translateY(-8px);

    box-shadow:
    0 22px 45px rgba(0,0,0,0.45);
}


/* NEWS IMAGE */

.paw-card img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: transform 0.6s ease;
}

.paw-card:hover img {

    transform: scale(1.05);
}


/* NEWS OVERLAY */

.paw-overlay {

    position: absolute;

    inset: 0;

    padding: 30px;

    display: flex;

    flex-direction: column;

    justify-content: flex-end;

    background:
    linear-gradient(
        to top,
        rgba(0,0,0,0.95),
        rgba(0,0,0,0.35),
        transparent
    );
}


/* TAG */

.tag {

    width: fit-content;

    padding: 7px 14px;

    border-radius: 30px;

    background: #d8c2a4;

    color: #16211d;

    font-size: 0.75rem;

    font-weight: 700;

    letter-spacing: 1px;

    margin-bottom: 14px;
}


/* NEWS TEXT */

.paw-overlay h3 {

    font-size: 1.6rem;

    margin-bottom: 10px;

    color: white;
}

.paw-overlay p {

    color: rgba(255,255,255,0.82);

    line-height: 1.7;

    max-width: 90%;
}


/* =========================
   SIDEBAR
========================= */

.paw-side {

    background: rgba(255,255,255,0.05);

    border: 1px solid rgba(255,255,255,0.08);

    backdrop-filter: blur(14px);

    border-radius: 26px;

    padding: 28px;

    height: fit-content;

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


/* SIDEBAR TITLE */

.paw-side h3 {

    font-size: 1.5rem;

    color: #f5f1e8;

    margin-bottom: 28px;
}


/* TRENDING ITEMS */

.paw-item {

    display: flex;

    gap: 15px;

    align-items: center;

    padding: 16px 0;

    border-bottom: 1px solid rgba(255,255,255,0.08);

    transition: 0.3s ease;

    cursor: pointer;
}

.paw-item:last-child {

    border-bottom: none;
}


/* HOVER */

.paw-item:hover {

    transform: translateX(8px);
}


/* SIDEBAR IMAGE */

.paw-item img {

    width: 75px;

    height: 75px;

    border-radius: 18px;

    object-fit: cover;

    flex-shrink: 0;
}


/* SIDEBAR TEXT */

.paw-item p {

    color: white;

    margin-bottom: 6px;

    font-size: 0.97rem;

    font-weight: 500;

    line-height: 1.5;
}

.paw-item span {

    color: rgba(255,255,255,0.55);

    font-size: 0.85rem;
}


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

@media (max-width: 992px) {

    .paw-layout {

        grid-template-columns: 1fr;
    }

    .top-cards {

        flex-direction: column;

        align-items: center;
    }

    .bottom-card {

        width: 420px;
    }
}


@media (max-width: 600px) {

    .info-card,
    .bottom-card {

        width: 100%;
    }

    .paw-overlay h3 {

        font-size: 1.3rem;
    }

    .learn-header h1,
    .paw-header h2 {

        font-size: 2.4rem;
    }
}