/* ==========================================
   DAMCARE PRODUCT PAGE CSS - PART 1
   Header | Navigation | Hero | Product Grid
============================================= */

/* Google Font */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Poppins',sans-serif;
}

html{
    scroll-behavior:smooth;
}

body{
    background:#f8f9fc;
    color:#222;
    line-height:1.7;
}

/* ==========================
   PRODUCT HERO
========================== */

.product-hero {
    background:
        linear-gradient(rgb(3, 17, 51),
                        rgb(3, 17, 51)),
        url("../images/product-banner.jpg");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    color: #fff;

    text-align: center;

    padding: 130px 20px;

    box-sizing: border-box;
}


/* ==========================
   PRODUCT HERO TITLE
========================== */

.product-hero h1 {
    font-size: 58px;

    margin: 0 0 20px;

    font-weight: 800;

    color: #D4A017;

    line-height: 1.2;
}


/* ==========================
   PRODUCT HERO TEXT
========================== */

.product-hero p {
    max-width: 850px;

    margin: 0 auto;

    font-size: 20px;

    line-height: 1.9;

    color: #eee;
}


/* ==========================================
   SECTION TITLE
========================================== */

.section-title {
    text-align: center;

    margin: 90px 0 50px;

    padding: 0 20px;

    box-sizing: border-box;
}


/* ==========================================
   SECTION TITLE LABEL
========================================== */

.section-title span {
    display: inline-block;

    color: #D4A017;

    font-weight: 700;

    letter-spacing: 2px;

    text-transform: uppercase;
}


/* ==========================================
   SECTION TITLE HEADING
========================================== */

.section-title h2 {
    font-size: 44px;

    color: #0B2F78;

    margin: 15px 0 0;

    line-height: 1.2;
}


/* ==========================================
   SECTION TITLE PARAGRAPH
========================================== */

.section-title p {
    max-width: 700px;

    margin: 18px auto 0;

    color: #666;

    line-height: 1.7;

    font-size: 16px;
}


/* ==========================================
   TABLET
========================================== */

@media (max-width: 768px) {

    .product-hero {
        padding: 95px 20px;
    }

    .product-hero h1 {
        font-size: 44px;
        margin-bottom: 15px;
    }

    .product-hero p {
        font-size: 17px;
        line-height: 1.7;
    }


    .section-title {
        margin: 70px 0 40px;
        padding: 0 25px;
    }

    .section-title h2 {
        font-size: 36px;
    }

    .section-title p {
        font-size: 15px;
    }
}


/* ==========================================
   MOBILE
========================================== */

@media (max-width: 600px) {

    .product-hero {
        padding: 65px 18px;
    }

    .product-hero h1 {
        font-size: 32px;
        margin-bottom: 12px;
    }

    .product-hero p {
        font-size: 15px;
        line-height: 1.6;
    }


    .section-title {
        margin: 50px 0 30px;
        padding: 0 18px;
    }

    .section-title span {
        font-size: 13px;
        letter-spacing: 1.5px;
    }

    .section-title h2 {
        font-size: 29px;
        margin-top: 10px;
    }

    .section-title p {
        font-size: 14px;
        line-height: 1.6;
        margin-top: 14px;
    }
}


/* ==========================================
   SMALL MOBILE
========================================== */

@media (max-width: 360px) {

    .product-hero {
        padding: 55px 15px;
    }

    .product-hero h1 {
        font-size: 28px;
    }

    .product-hero p {
        font-size: 14px;
        line-height: 1.5;
    }


    .section-title {
        margin: 45px 0 25px;
        padding: 0 15px;
    }

    .section-title span {
        font-size: 12px;
    }

    .section-title h2 {
        font-size: 26px;
    }

    .section-title p {
        font-size: 13px;
    }
}
/* ==========================================
   PRODUCT GRID
========================================== */

.products-container {
    width: 100%;
    max-width: 1300px;

    margin: 0 auto;

    padding: 20px 30px;

    display: grid;

    grid-template-columns:
        repeat(auto-fit, minmax(320px, 1fr));

    gap: 35px;

    box-sizing: border-box;
}


/* ==========================================
   PRODUCT CARD
========================================== */

.product-card {
    background: #fff;

    border-radius: 20px;

    overflow: hidden;

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);

    transition: 0.4s;

    position: relative;
}

.product-card:hover {
    transform: translateY(-10px);

    box-shadow:
        0 18px 40px rgba(0, 0, 0, 0.15);
}


/* ==========================================
   PRODUCT IMAGE
========================================== */

.product-card img {
    display: block;

    width: 100%;
    height: 260px;

    object-fit: cover;

    transition: 0.5s;
}

.product-card:hover img {
    transform: scale(1.06);
}


/* ==========================================
   PRODUCT TITLE
========================================== */

.product-card h2 {
    font-size: 28px;

    color: #0B2F78;

    padding: 25px 25px 10px;

    margin: 0;

    line-height: 1.3;
}


/* ==========================================
   PRODUCT DESCRIPTION
========================================== */

.product-card p {
    color: #666;

    font-size: 16px;

    max-width: 280px;

    text-align: center;

    line-height: 1.8;

    margin: 20px auto;

    padding: 0 15px;
}


/* ==========================================
   TABLET
========================================== */

@media (max-width: 768px) {

    .products-container {
        padding: 20px 25px;

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

        gap: 25px;
    }

    .product-card {
        border-radius: 18px;
    }

    .product-card img {
        height: 220px;
    }

    .product-card h2 {
        font-size: 24px;
        padding: 20px 20px 8px;
    }

    .product-card p {
        font-size: 15px;
        line-height: 1.7;
        margin: 15px auto;
    }
}


/* ==========================================
   MOBILE
========================================== */

@media (max-width: 600px) {

    .products-container {
        padding: 15px 18px;

        grid-template-columns: 1fr;

        gap: 25px;
    }

    .product-card {
        border-radius: 16px;
    }

    .product-card img {
        height: 230px;
    }

    .product-card h2 {
        font-size: 23px;

        padding: 18px 18px 5px;

        text-align: center;
    }

    .product-card p {
        font-size: 15px;

        max-width: 100%;

        padding: 0 18px;

        line-height: 1.7;

        margin: 15px auto 20px;
    }

    /* Disable hover effects on touch devices */
    .product-card:hover {
        transform: none;

        box-shadow:
            0 10px 30px rgba(0, 0, 0, 0.08);
    }

    .product-card:hover img {
        transform: none;
    }
}


/* ==========================================
   SMALL MOBILE
========================================== */

@media (max-width: 360px) {

    .products-container {
        padding: 15px;

        gap: 20px;
    }

    .product-card img {
        height: 200px;
    }

    .product-card h2 {
        font-size: 21px;

        padding: 16px 15px 5px;
    }

    .product-card p {
        font-size: 14px;

        padding: 0 15px;

        line-height: 1.6;
    }
}


/* ==========================================
   PRODUCT CONTENT
========================================== */

.product-content {
    padding: 25px;
    box-sizing: border-box;
}


/* ==========================================
   PRODUCT CATEGORY
========================================== */

.product-category {
    display: inline-block;

    background: #0B2F78;
    color: #fff;

    font-size: 13px;
    font-weight: 600;

    padding: 8px 18px;

    border-radius: 30px;

    margin-bottom: 15px;

    letter-spacing: 1px;
    text-transform: uppercase;
}


/* ==========================================
   PRODUCT TITLE
========================================== */

.product-title {
    font-size: 28px;

    color: #0B2F78;

    margin: 0 0 15px;

    font-weight: 700;

    line-height: 1.3;
}


/* ==========================================
   PRODUCT DESCRIPTION
========================================== */

.product-description {
    color: #666;

    font-size: 16px;

    line-height: 1.8;

    text-align: center;

    margin: 0 0 25px;
}


/* ==========================================
   FEATURE LIST
========================================== */

.product-features {
    list-style: none;

    margin: 0 0 30px;
    padding: 0;
}


.product-features li {
    display: flex;

    align-items: flex-start;

    gap: 12px;

    margin-bottom: 12px;

    color: #444;

    font-size: 15px;

    line-height: 1.5;
}


.product-features li i {
    flex-shrink: 0;

    color: #D4A017;

    font-size: 16px;

    margin-top: 3px;
}


/* ==========================================
   TABLET
========================================== */

@media (max-width: 768px) {

    .product-content {
        padding: 22px;
    }

    .product-category {
        font-size: 12px;
        padding: 7px 16px;
        margin-bottom: 12px;
    }

    .product-title {
        font-size: 24px;
        margin-bottom: 12px;
    }

    .product-description {
        font-size: 15px;
        line-height: 1.7;
        margin-bottom: 22px;
    }

    .product-features {
        margin-bottom: 25px;
    }

    .product-features li {
        gap: 10px;
        font-size: 14px;
        margin-bottom: 10px;
    }

    .product-features li i {
        font-size: 15px;
    }
}


/* ==========================================
   MOBILE
========================================== */

@media (max-width: 600px) {

    .product-content {
        padding: 20px;
    }

    .product-category {
        font-size: 11px;
        padding: 7px 15px;
        margin-bottom: 12px;
        letter-spacing: 0.8px;
    }

    .product-title {
        font-size: 23px;
        margin-bottom: 12px;
        text-align: center;
    }

    .product-description {
        font-size: 15px;
        line-height: 1.7;
        margin-bottom: 20px;
    }

    .product-features {
        margin-bottom: 22px;
    }

    .product-features li {
        gap: 10px;
        font-size: 14px;
        margin-bottom: 10px;
    }

    .product-features li i {
        font-size: 14px;
        margin-top: 3px;
    }
}


/* ==========================================
   SMALL MOBILE
========================================== */

@media (max-width: 360px) {

    .product-content {
        padding: 17px;
    }

    .product-category {
        font-size: 10px;
        padding: 6px 13px;
    }

    .product-title {
        font-size: 21px;
    }

    .product-description {
        font-size: 14px;
        line-height: 1.6;
    }

    .product-features li {
        font-size: 13px;
        gap: 8px;
    }

    .product-features li i {
        font-size: 13px;
    }
}

/* ==========================================
   PRODUCT BUTTONS
========================================== */

.product-buttons {
    display: flex;

    gap: 15px;

    flex-wrap: wrap;

    align-items: center;
}


/* ==========================================
   PRIMARY BUTTON
========================================== */

.btn-primary {
    display: inline-block;

    padding: 14px 30px;

    background: #0B2F78;
    color: #fff;

    text-decoration: none;

    border-radius: 50px;

    font-weight: 600;

    transition: 0.35s;

    text-align: center;

    box-sizing: border-box;
}

.btn-primary:hover {
    background: #D4A017;

    transform: translateY(-3px);
}

/* ==========================================
   SECONDARY BUTTON
========================================== */

.btn-secondary {
    display: inline-block;

    padding: 14px 30px;

    border: 2px solid #0B2F78;

    color: #0B2F78;

    text-decoration: none;

    border-radius: 50px;

    font-weight: 600;

    transition: 0.35s;

    text-align: center;

    box-sizing: border-box;
}

.btn-secondary:hover {
    background: #0B2F78;

    color: #fff;

    transform: translateY(-3px);
}


/* ==========================================
   TABLET
========================================== */

@media (max-width: 768px) {

    .product-buttons {
        gap: 12px;
    }

    .btn-primary,
    .btn-secondary {
        padding: 13px 25px;
        font-size: 15px;
    }
}


/* ==========================================
   MOBILE
========================================== */

@media (max-width: 600px) {

    .product-buttons {
        flex-direction: column;

        width: 100%;

        gap: 12px;
    }

    .btn-primary,
    .btn-secondary {
        width: 100%;

        padding: 13px 20px;

        font-size: 15px;
    }

    .btn-primary:hover,
    .btn-secondary:hover {
        transform: none;
    }
}


/* ==========================================
   SMALL MOBILE
========================================== */

@media (max-width: 360px) {

    .product-buttons {
        gap: 10px;
    }

    .btn-primary,
    .btn-secondary {
        padding: 12px 18px;

        font-size: 14px;
    }
}

/* ==========================================
   HOVER EFFECTS
========================================== */

.product-card {
    position: relative;
    overflow: hidden;
}


/* GOLD TOP BORDER */

.product-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 5px;

    background: #D4A017;

    transform: scaleX(0);

    transform-origin: center;

    transition: 0.4s;

    z-index: 2;
}


/* ==========================================
   DESKTOP HOVER
========================================== */

@media (min-width: 769px) {

    .product-card:hover::before {
        transform: scaleX(1);
    }

    .product-card:hover h2 {
        color: #D4A017;
    }

    .product-card:hover {
        border-bottom: 5px solid #0B2F78;
    }
}


/* ==========================================
   CALL TO ACTION
========================================== */

.product-cta {
    width: 100%;

    margin-top: 100px;

    background: #0B2F78;

    color: #fff;

    text-align: center;

    padding: 90px 20px;

    box-sizing: border-box;
}


/* ==========================================
   CTA HEADING
========================================== */

.product-cta h2 {
    font-size: 42px;

    margin: 0 0 20px;

    line-height: 1.2;

    color: #fff;
}


/* ==========================================
   CTA PARAGRAPH
========================================== */

.product-cta p {
    max-width: 750px;

    margin: 0 auto 35px;

    font-size: 18px;

    line-height: 1.8;
}


/* ==========================================
   CTA BUTTON
========================================== */

.product-cta a {
    display: inline-block;

    background: #D4A017;

    color: #fff;

    text-decoration: none;

    padding: 16px 38px;

    border-radius: 50px;

    font-weight: 600;

    transition: 0.35s;
}

.product-cta a:hover {
    background: #fff;

    color: #0B2F78;

    transform: translateY(-3px);
}


/* ==========================================
   TABLET
========================================== */

@media (max-width: 768px) {

    .product-cta {
        margin-top: 70px;

        padding: 70px 25px;
    }

    .product-cta h2 {
        font-size: 36px;
    }

    .product-cta p {
        font-size: 17px;

        line-height: 1.7;

        margin-bottom: 30px;
    }

    .product-cta a {
        padding: 14px 32px;

        font-size: 15px;
    }
}


/* ==========================================
   MOBILE
========================================== */

@media (max-width: 600px) {

    .product-cta {
        margin-top: 55px;

        padding: 55px 18px;
    }

    .product-cta h2 {
        font-size: 29px;

        margin-bottom: 15px;
    }

    .product-cta p {
        font-size: 15px;

        line-height: 1.7;

        margin-bottom: 25px;
    }

    .product-cta a {
        padding: 13px 28px;

        font-size: 14px;
    }

    .product-cta a:hover {
        transform: none;
    }
}


/* ==========================================
   SMALL MOBILE
========================================== */

@media (max-width: 360px) {

    .product-cta {
        margin-top: 45px;

        padding: 45px 15px;
    }

    .product-cta h2 {
        font-size: 26px;
    }

    .product-cta p {
        font-size: 14px;

        line-height: 1.6;
    }

    .product-cta a {
        padding: 12px 24px;

        font-size: 13px;
    }
}


/* ==========================================
   REDUCED MOTION
========================================== */

@media (prefers-reduced-motion: reduce) {

    .product-card::before,
    .product-cta a {
        transition: none;
    }
}



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

@keyframes fadeUp{

from{
    opacity:0;
    transform:translateY(40px);
}

to{
    opacity:1;
    transform:translateY(0);
}

}

@keyframes zoomIn{

from{
    opacity:0;
    transform:scale(.9);
}

to{
    opacity:1;
    transform:scale(1);
}

}

@keyframes slideLeft{

from{
    opacity:0;
    transform:translateX(-50px);
}

to{
    opacity:1;
    transform:translateX(0);
}

}

@keyframes slideRight{

from{
    opacity:0;
    transform:translateX(50px);
}

to{
    opacity:1;
    transform:translateX(0);
}

}

/* Apply animations */

.product-hero{
    animation:fadeUp 1s ease;
}

.product-card{
    animation:zoomIn .8s ease;
}

.section-title{
    animation:slideLeft 1s ease;
}

.footer-content{
    animation:fadeUp 1.2s ease;
}

/* ==========================================
   SCROLLBAR
========================================== */

::-webkit-scrollbar{
    width:10px;
}

::-webkit-scrollbar-track{
    background:#f1f1f1;
}

::-webkit-scrollbar-thumb{
    background:#0B2F78;
    border-radius:20px;
}

::-webkit-scrollbar-thumb:hover{
    background:#D4A017;
}

/* ==========================================
   IMAGE EFFECTS
========================================== */

img{
    max-width:100%;
    display:block;
}

.product-card img{
    transition:.5s;
}

.product-card:hover img{
    transform:scale(1.08);
}

/* ==========================================
   SELECTION
========================================== */

::selection{
    background:#D4A017;
    color:#fff;
}

/* ==========================================
   SMOOTH TRANSITIONS
========================================== */

a,
button,
img,
.product-card,
.btn-primary,
.btn-secondary{
    transition:all .35s ease;
}

/* ==========================================
   SHADOW EFFECTS
========================================== */

.product-card{
    box-shadow:0 12px 35px rgba(0,0,0,.08);
}

.product-card:hover{
    box-shadow:0 20px 45px rgba(0,0,0,.18);
}

/* ==========================================
   END OF FILE
========================================== */