/* ========================================
   Element 109 - Call To Action 4 Styles
   ======================================== */

/* Hero Subscribe Form */
.hero-section .hero-subscribe-form {
    gap: 10px;
}

    .hero-section .hero-subscribe-form input[type="email"] {
        flex: 1;
        padding: 12px 20px;
        border-radius: 8px;
        border: 1px solid #dee2e6;
    }

    .hero-section .hero-subscribe-form input[type="submit"] {
        padding: 12px 30px;
        border-radius: 8px;
        white-space: nowrap;
    }

/* Subscribe Feature List */
.hero-section .subscribe-feature-list {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

    .hero-section .subscribe-feature-list .nav-item span {
        font-size: 14px;
        color: #6c757d;
    }

/* Hero Screen Wrap */
.hero-section .hero-screen-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-section .phone-screen {
    position: relative;
    z-index: 2;
    max-width: 300px;
    margin-right: -100px;
}

.hero-section .mac-screen {
    position: relative;
    z-index: 1;
    max-width: 600px;
}

/* Animate Elements */
.hero-section .animate-element {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Color Shapes */
.hero-section .color-shape-1 {
    top: -50px;
    right: -50px;
    max-width: 150px;
}

.hero-section .color-shape-2 {
    bottom: -30px;
    left: -40px;
    max-width: 120px;
}

.hero-section .color-shape-3 {
    top: 50%;
    right: -80px;
    max-width: 140px;
}

/* Hero Background */
.hero-section .hero-background {
    z-index: 1;
}

    .hero-section .hero-background img {
        object-fit: cover;
    }

/* Responsive Styles */
@media (max-width: 991px) {
    .hero-section .phone-screen {
        margin-right: 0;
        margin-bottom: 20px;
    }

    .hero-section .hero-screen-wrap {
        flex-direction: column;
    }
}

@media (max-width: 767px) {
    .hero-section .phone-screen {
        max-width: 250px;
    }

    .hero-section .mac-screen {
        max-width: 100%;
    }

    .hero-section .hero-subscribe-form {
        flex-direction: column;
    }

        .hero-section .hero-subscribe-form input[type="submit"] {
            width: 100%;
        }
}