
// Home page Hero
.slider-height1 {
    min-height: 890px;
    @media #{$lg}{
        min-height: 680px;
    }
    @media #{$md}{
        min-height: 600px;
    }
    @media #{$sm}{
        min-height: 700px;
    }
    @media #{$xs}{
        min-height:700px;
    }
}

.slider-height2 {
    min-height: 440px;

    @media #{$sm}{
        min-height: 600px;
    }
    // @media #{$xs}{
    //     min-height:700px;
    // }
}

.slider-height3 {
    height: 440px;
    @media #{$sm}{
        height: 300px;
    }
    @media #{$xs}{
        height:350px;
    }
}

// Home Page Heor
.hero-bg1{
    background-image: url(../img/hero/h1_hero.png);
    background-size: cover;
    background-repeat: no-repeat;
}
.hero-bg2{
    background-image: url(../img/hero/h1_hero2.png);
    background-size: cover;
    background-repeat: no-repeat;
}
.hero-bg3{
    background-image: url(../img/hero/h1_hero3.png);
    background-size: cover;
    background-repeat: no-repeat;
}
.hero-bg4{
    background-image: url(../img/hero/h1_hero4.png);
    background-size: cover;
    background-repeat: no-repeat;
}
.slider-area{
    .hero__caption{
        @media #{$xs}{
           padding-top: 100px;
        }
        text-align: center;
        span{
            color: #31ff7a;
            font-size: 60px;
            line-height: 1.2;
            font-weight: 400;
            margin-bottom: 30px;
            display: block;
            @media #{$xs}{
                margin-bottom: 30px;
                font-size: 56px;
            }
        }
        h1{
            font-size: 78px;
            font-weight: 400;
            color: #fff;
            line-height: 1.3;
            margin-bottom: 5px;
            @media #{$lg}{
                font-size: 60px;
                line-height: 1.2;
            }
            @media #{$md}{
                font-size: 50px;
                line-height: 1.2;
            }
            @media #{$sm}{
                font-size: 51px;
                line-height: 1.2;
                margin-bottom: 20px;
            }
            @media #{$xs}{
                font-size: 35px;
                line-height: 1.2;
                margin-bottom: 20px;
            }
        }
        p{
            color: #fff;
            font-size: 15px;
            margin-bottom: 34px;
        }
        &.hero__caption2{
            h1{
                font-size: 40px;
                margin-bottom: 35px;
                @media #{$sm}{
                    font-size: 34px;
                }
                @media #{$xs}{
                    font-size: 21px;
                }
            }
        }
    }
    // Form Style Slider
    form.search-box{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        border-radius: 8px;
        background: rgba(255,255,255,0.2);
        padding: 14px 16px;
        @media #{$md}{
            margin-bottom: 60px;
        }
        @media #{$sm}{
            margin-bottom: 60px;
        }
        @media #{$xs}{
            margin-bottom: 60px;
        }

        .input-form{
            width: 44%;
            // Border Radius
            overflow: hidden;
            @media #{$sm}{
                width: 55%;
            }
            @media #{$xs}{
                width: 100%;
            }
            input{
                height: 60px;
                width: 100%;
                color: #140C40;
                font-size: 17px;
                font-weight: 400;
                padding: 9px 33px 9px 24px;
                border: none;
                position: relative;
                border-radius: 6px;
                &::placeholder{
                    color: #140C40 !important;
                }
                @media #{$xs}{
                    margin-bottom: 20px;
                }
                @media #{$sm}{
                    padding: 9px 33px 9px 25px;
                    margin-bottom: 20px;
                }
                &::placeholder {
                    color: #616875;
                    @media #{$xs}{
                        font-size: 13px;
                    }
                }
            }
        }
        .select-form{
            width: 33%;
            @media #{$sm}{
                width: 43%;
            }
            @media #{$xs}{
                width: 100%;
            }
            .nice-select {
                width: 100%;
                height: 60px;
                background: #fff;
                padding: 11px 19px 11px 25px;
                color: #140C40;
                line-height: 42px;
                border: 0;
                border-radius: 6px;
                font-size: 17px;
                @media #{$xs}{
                    margin-bottom: 20px;
                    padding-left: 25px;
                }
                @media #{$sm}{
                    margin-bottom: 20px;
                    padding-left: 25px;
                }
               .list {
                    width: 100%;
                }
                &.open .list {
                    width: 100%;
                    border-radius: 0;
                    border: 0;
                }
                &::after {
                    border-bottom: 0;
                    border-right: 0;
                    width: 0;
                    margin-top: 0;
                    right: 28px;
                    content: "\f0dd";
                    font-family: 'Font Awesome 5 Free';
                    position: absolute;
                    font-weight: 700;
                    transform: rotate(0deg);
                    top: 7px;
                    font-size: 16px;
                }
            }
    
        }
        .search-form{
            width: 21%;
            // Border Radius
            border-radius: 6px;
            overflow: hidden;
            @media #{$sm}{
                width: 100%;
            }
            @media #{$xs}{
                width: 100%;
            }

            a{
                width: 100%;
                height: 60px;
                background:$btn-bg;
                font-size: 20px;
                line-height: 1;
                text-align: center;
                color: #fff;
                display: block;
                padding: 15px;
                border-radius: 0px;
                text-transform: capitalize;
                font-family: $font_1;
                line-height: 31px;
                font-size: 17px;
                i{
                    color: #fff;
                    padding-right: 10px;
                }
            }
        }
    }
    .category-img img {
        width: 112px;
        height: 112px;
        margin: 0 8px;
        @media #{$xs}{
            width: 76px !important;
            height: 65px !important;
        }
    }
}

// Hero Overly
.hero-overly {
    position: relative;
    z-index: 1;
    &::before {
        position: absolute;
        content: "";
        background-color: rgba(0, 1, 2,.5);
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
        z-index: 0;
        background-repeat: no-repeat;
    }
}

.hero-overly2 {
    position: relative;
    z-index: 1;
    &::before {
        position: absolute;
        content: "";
        background-color:rgba(0, 0, 50,.7);
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
        z-index: 0;
        background-repeat: no-repeat;
    }
}

// Transparent Header
.header-transparent {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 9;
}

// Start Other Page Hero
.hero-cap2{
    h2{
        color: #fff;
        font-size: 45px;
        font-weight: 500;
        text-transform: capitalize;
        padding-top: 65px;
    }
}

.hero__caption.hero__caption2.pt-200 {
    @media #{$md}{
        padding-top: 100px;
    }
	
}