﻿
.hero-2 {
    height: 100vh;
    padding: 0 0 0 0;
}

.section_hero .hero-2 .from-box {
    position: absolute;
    bottom: 200px;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    max-width: 60vw;
    z-index: 100;
    pointer-events: auto;
}

.hero-2 .from-box {
    padding: 40px 50px;
}

    .section_hero .hero-2 .hero-content {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 200px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        z-index: 10;
        pointer-events: none;
    }

    .section_hero .hero-2 .from-box .box-item-2 .form-clt {
        flex: 0 0 auto;
        width: auto;
    }

        .section_hero .hero-2 .from-box .box-item-2 .form-clt:has(#i_search) {
            flex: 1;
        }

    .hero-2 .from-box .box-item-2 .form-clt .hero-search-btn {
        border-radius: 50px;
        padding: 10px 50px;
        width: unset;
        border: none;
        cursor: pointer;
        background-color: #0099cc;
        color: #ffffff;
        transition: background-color 0.2s ease;
    }

    .hero-2 h1 {
        font-size: 120px;
        max-width: 80vw;
    }

    .hero-2 .from-box .box-item-2 .form-clt .hero-search-btn:hover {
        background-color: #fb5b32;
        color: #fff;
    }

    .hero-2 .from-box #i_search {
        width: 100%;
        border-radius: 50px;
        padding: 10px 50px;
        text-align: right;
        direction: rtl;
        border: none;
    }

    @media (max-width: 750px) {
        .section_hero .hero-2 .from-box {
            max-width: 95vw;
            bottom: 130px;
        }

        .hero-2 h1 {
            font-size: 40px;
        }

        .section_hero .hero-2 .hero-content {
            bottom: 50vh;
        }

        .section_hero .hero-2 .from-box .box-item-2 {
            flex-direction: column;
        }

            .section_hero .hero-2 .from-box .box-item-2 .form-clt,
            .section_hero .hero-2 .from-box .box-item-2 .form-clt:has(#i_search) {
                flex: 0 0 auto;
                width: 100%;
            }

                .section_hero .hero-2 .from-box .box-item-2 .form-clt .hero-search-btn {
                    width: 100%;
                }
    }
