/* 21. Contact */
.contact-form{

    .form-wrapper{
        padding: 65px;
        box-shadow: 0 23px 46px rgba(20, 12, 64,0.1);
        @media #{$xs}{
            padding: 25px;
        }
    }
    // Start contact
    input {
        border: 1px solid #eaeaea;
        height: 50px;
        width: 100%;
        padding: 10px 25px;
        padding-right: 30px;
        color: #a3a3a3;
        font-weight: 500;
        text-transform: capitalize;
        border-radius: 0px;
        .list {
            width: 100%;
            border-radius: 0;
        }
    }
    .nice-select {
        border: 1px solid #eaeaea;
        height: 50px;
        width: 100%;
        color: #a3a3a3;
        font-weight: 500;
        text-transform: capitalize;
        padding-top: 10px;
        border-radius: 0px;
        &::after {
            border-bottom: 2px solid #a3a3a3;
            border-right: 2px solid #a3a3a3;
            height: 7px;
            right: 41px;
            width: 7px;
        }
        &.open .list {
            width: 100%;
            border-radius: 0;
        }
        .option {
            color: #a3a3a3;
        }
    }
    textarea {
            color: #a3a3a3;
            border: 1px solid #eaeaea;
            font-weight: 500;
            letter-spacing: 2px;
            text-transform: capitalize;
            height: 116px;
            width: 100%;
            padding: 30px 50px;
            border-radius: 0px;
            @media #{$md}{
                padding: 30px 42px;
            }
            @media #{$sm}{
                padding: 30px 42px;
            }
            @media #{$xs}{
                padding: 30px 42px;
            }
        &::placeholder {
                color: #898faf;
                font-size: 16px;
                font-weight: 300;
                transition: .4s;
            }
    }
    .contact {
        border: 1px solid #eaedff;
        padding: 40px 10px;
        i {
            background: #8fb569;
            font-size: 40px;
            height: 150px;
            width: 150px;
            color: #ffffff;
            border-radius: 50%;
            line-height: 135px;
            border: 10px solid #fff;
            -webkit-box-shadow: 0px 16px 32px 0px rgba(206, 226, 255, 0.4);
            box-shadow: 0px 16px 32px 0px rgba(206, 226, 255, 0.4);
            margin-bottom: 30px;
        }
    h3 {
            font-size: 26px;
            margin-bottom: 15px;
        }
        p {
            margin: 0;
            padding: 0 50px;
    }
    }
    input::-moz-placeholder,
    input::-moz-placeholder {
       color: #898faf;
       font-size: 16px;
       font-weight: 300;
       transition: .4s;
   }
    input:focus::-webkit-input-placeholder {
       opacity: 0;
       -webkit-transition: .4s;
       -o-transition: .4s;
       transition: .4s;
   }
    // End contadt
    // Gallery satrt
    .single-gallery{
        position: relative;
        &::after{
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 100%;
            width: 100%;
            content: "";
            background-color: rgba(1,10,28,0.4);
            z-index: 1;
            @include transition(.4s);
        }
        &::before{
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 100%;
            width: 100%;
            content: "";
            background-color: rgba(1,10,28,0.5);
            opacity: 0;
            z-index: 1;
            @include transition(.4s);
        }
        &:hover{
            &::before{
                opacity: 1;
                visibility:visible;
                }
        }
        // img
        .gallery-img{
            position: relative;
            height: 655px;
            background-size: cover;
            background-repeat: no-repeat;
            @media #{$md}{
                height: 380px;
            }
            @media #{$sm}{
                height: 380px;
            }
            @media #{$xs}{
                height: 380px;
            }
        }
        // Caption
        .thumb-content-box {
            position: absolute;
            top: 50%;
            left: 0;
            right: 0;
            margin: 0 auto;
            transform: translateY(-50%);
            height: 100%;
            width: 100%;
            transition: .4s;
            z-index: 2;
            .thumb-content {
                position: absolute;
                bottom: 43px;
                left: 50px;
                h3 {
                    & > a{
                        color: #ffffff;
                        font-weight: 800;
                        font-size: 28px;
                        margin-bottom: 24px;
                        text-transform: normal;
                        text-decoration: unset;
                        display: block;
                        line-height: 1.3;
                        letter-spacing: 1px;
                        @media #{$laptop}{
                            font-size: 32px;
                        }
                        @media #{$lg}{
                            font-size: 32px;
                        }
                        @media #{$xs}{
                            font-size: 32px;
                        }
                    }
                }
                p{
                    font-size: 16px;
                    color: #ffff;
                    padding-right: 49px;
                    line-height: 1.6;
                }
                a {
                    color: #fff;
                    font-size: 17px;
                    font-weight: 700;
                    text-decoration: underline;
                    &:hover {
                        color: #fff;
                        letter-spacing: 1px;
                    }
                }
            }
        }
    }
    // Gallery End
    .single-mam-img img {
        width: 100%;
    }
}


    
// Arrow
.man-slider-active {
    button{
        &.slick-arrow {
            position: absolute;
            right: 50px;
            bottom: -1px;
            border: 0;
            padding: 0;
            z-index: 2;
            opacity: 1;
            visibility: visible;
            height: 50px;
            width: 50px;
            line-height: 60px;
            cursor: pointer;
            background: #fff;

            @media #{$md}{
                line-height: 40px;
                height: 40px;
                width: 40px;
                right:40px;
            }
            @media #{$sm}{
                line-height: 40px;
                height: 40px;
                width: 40px;
                right:40px;
            }
            @media #{$xs}{
                line-height: 40px;
                height: 40px;
                width: 40px;
                right:40px;
            }
            i{
                font-size: 20px;
 
                color: $theme-color;
                // @media #{$md}{
                //     line-height: 40px;
                // }
                // @media #{$sm}{
                //     line-height: 40px;
                // }
                // @media #{$xs}{
                //     line-height: 40px;
                // }
            }
        }
        &.slick-next {
            right: 0px;
            background: $theme-color;
           
            i{
                color: #fff;
            }
        }
    }
    
}