/**
 * Component Styles: Services Dual-Layer Process
 *
 * @package RIKAI_Marketing
 * @since 1.0.0
 */

/* ===========================
   Layout
   =========================== */

.dual-layer-process-layout {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    margin-top: 40px;
    position: relative;
}

.big-white-triangle-style {
    width: 0;
    height: 0;
    border-left: 60px solid transparent;
    border-right: 60px solid transparent;
    border-bottom: 30px solid #ffffff;
    rotate: 180deg;
    margin: 0 auto;
    margin-bottom: -20px;
}

/* ===========================
   Circular Images
   =========================== */

.dual-layer-process-image {
    flex-shrink: 0;
    flex: 1;
    position: absolute;
}

.dual-layer-process-circle-img {
    width: 300px;
    height: 300px;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}

.dual-layer-process-image.left-image {
    top: -100px;
    left: -100px;
}

.dual-layer-process-image.left-image .dual-layer-process-circle-img {
    width: 400px;
    height: 400px;
}

.dual-layer-process-image.right-image {
    right: 0px;
}

.dual-layer-process-image.right-image .dual-layer-process-circle-img {
    margin-bottom: -320px;
}

/* ===========================
   Content Area
   =========================== */

.dual-layer-process-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    flex: 3;
    max-width: 600px;
    letter-spacing: 2px;
}

.dual-layer-process-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    letter-spacing: 2px;
}

.dual-layer-process-body h4 {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 0px;
}

/* ===========================
   Responsive Design
   =========================== */

/* Tablet */
@media (max-width: 1199px) {
    .dual-layer-process-image.left-image {
        top: -100px;
        left: -220px;
    }

    .dual-layer-process-image.right-image {
        right: -100px;
    }
}

@media (max-width: 991px) {
    .dual-layer-process-image.left-image .dual-layer-process-circle-img,
    .dual-layer-process-image.right-image .dual-layer-process-circle-img {
        width: 200px;
        height: 200px;
    }

    .dual-layer-process-image.left-image {
        top: -130px;
        left: -100px;
    }

    .dual-layer-process-image.right-image {
        right: -100px;
        bottom: 70px;
    }
}

/* Mobile */
@media (max-width: 767px) {
    .dual-layer-process-layout {
        flex-direction: column;
        gap: 30px;
    }

    .dual-layer-process-image.left-image {
        top: -130px;
        left: -150px;
    }

    .dual-layer-process-image.right-image {
        right: -140px;
        bottom: 70px;
    }
}

@media (max-width: 576px) {
    .services-dual-layer-process .container {
        padding: 40px 20px;
    }

    .dual-layer-process-image.left-image .dual-layer-process-circle-img,
    .dual-layer-process-image.right-image .dual-layer-process-circle-img {
        width: 100px;
        height: 100px;
    }

    .dual-layer-process-image.left-image {
        top: -180px;
        left: -20px;
    }

    .dual-layer-process-image.right-image {
        right: 0px;
        bottom: 10px;
    }
}

@media (max-width: 375px) {
    .dual-layer-process-image.left-image {
        top: -180px;
        left: -20px;
    }

    .dual-layer-process-image.right-image {
        right: 0px;
        bottom: -10px;
    }
}