/* =========================================================
   DATAMIND BOOKING SYSTEMS
========================================================= */

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

.dm-products-hero {

    padding:
        140px 0
        100px;

    text-align: center;

}

.dm-products-hero h1 {

    max-width: 900px;

    margin:
        20px auto;

}

.dm-products-hero p {

    max-width: 760px;

    margin:
        0 auto;

}

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

.dm-section-label {

    display: inline-block;

    padding:
        8px 18px;

    border-radius: 999px;

    background:
        rgba(34, 197, 94, .12);

    color:
        var(--color-primary);

    font-size: .9rem;

    font-weight: 600;

    letter-spacing: .5px;

}

/* =========================================================
   PRODUCT SHOWCASE
========================================================= */

.dm-product-showcase {

    padding:
        100px 0;

}

.dm-product-alt {

    background:
        var(--color-bg-section);

}

.dm-product-showcase-grid {

    display: grid;

    grid-template-columns:
        1fr
        1fr;

    gap: 80px;

    align-items: center;

}

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

.dm-product-image {

    position: relative;

}

.dm-product-image img {

    width: 100%;

    border-radius:
        var(--radius-xl);

    border:
        1px solid var(--color-border);

    box-shadow:
        var(--shadow-lg);

    transition:
        .3s ease;

}

.dm-product-image img:hover {

    transform:
        translateY(-6px);

}

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

.dm-product-content {

    max-width: 600px;

}

.dm-product-label {

    display: inline-block;

    margin-bottom: 20px;

    color:
        var(--color-primary);

    font-size: .95rem;

    font-weight: 700;

    letter-spacing: 1px;

    text-transform: uppercase;

}

.dm-product-content h2 {

    margin-bottom: 20px;

}

.dm-product-content p {

    margin-bottom: 30px;

    font-size: 1.05rem;

}

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

.dm-product-features {

    display: grid;

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

    gap: 15px;

    margin-bottom: 35px;

}

.dm-product-features div {

    background:
        var(--color-bg-light);

    border:
        1px solid var(--color-border);

    border-radius:
        var(--radius-md);

    padding:
        14px 18px;

    font-size: .95rem;

    font-weight: 500;

    transition: .3s;

}

.dm-product-features div:hover {

    border-color:
        var(--color-primary);

    transform:
        translateY(-2px);

}

/* =========================================================
   CTA SECTION
========================================================= */

.dm-products-cta {

    padding:
        var(--space-xxl)
        0;

    background:
        linear-gradient(
            135deg,
            var(--color-bg-section),
            var(--color-bg-light)
        );

}

.dm-products-cta h2 {

    margin-bottom: 20px;

}

.dm-products-cta p {

    max-width: 700px;

    margin:
        0 auto
        30px;

}

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

@media (max-width: 1100px) {

    .dm-product-showcase-grid {

        gap: 50px;

    }

}

@media (max-width: 992px) {

    .dm-product-showcase-grid {

        grid-template-columns:
            1fr;

        gap: 40px;

    }

    .dm-product-content {

        max-width: 100%;

    }

    .dm-product-image {

        order: 1;

    }

    .dm-product-content {

        order: 2;

    }

}

@media (max-width: 768px) {

    .dm-products-hero {

        padding:
            110px 0
            80px;

    }

    .dm-product-showcase {

        padding:
            70px 0;

    }

    .dm-product-features {

        grid-template-columns:
            1fr;

    }

}

@media (max-width: 576px) {

    .dm-product-content h2 {

        font-size: 2rem;

    }

    .dm-product-content p {

        font-size: 1rem;

    }

}