@import 'partials';
.banner-wrap{
    background: url(../img/banner.jpg) no-repeat top center / cover; min-height: 936px; display: flex; align-items: center; justify-content: center; padding: 20px 0;
    @media($sm-1679){
        min-height: 800px;
    }
    @media ($sm-1441){ min-height: 600px;}
    @media ($sm-991){min-height: 500px;}
    @media ($sm-767){min-height: 400px;}
    .content{ text-align: center;
        .title{ font-size: 42px; color:$dark; font-weight: 300; margin: 0; padding: 0 0 10px 0;
            @media ($sm-1679){ font-size:40px;}
            @media ($sm-1199){ font-size: 38px;}
            @media ($sm-991){font-size: 36px;}
            @media ($sm-767){font-size: 32px;}
            @media ($sm-479){ font-size: 28px;}
        }
        .tags{font-family: "Hurricane", serif; font-size: 80px; color: #862DA4; line-height: 1; padding: 0 0 20px 0;
            @media ($sm-1679){font-size: 70px;}
            @media ($sm-1199){font-size: 60px; padding-bottom: 10px;}
            @media ($sm-991){font-size: 50px;}
            @media ($sm-479){ font-size: 40px;}
        }
        .para{font-size: 22px; color: $dark; padding: 0 0 30px 0; margin: 0; line-height: 1.6;
            @media ($sm-1679){font-size: 20px;}
            @media ($sm-1199){font-size: 18px;}
            @media ($sm-991){font-size: 16px;}
            @media ($sm-479){ font-size: 14px; padding-bottom: 20px;}
        }
        .btn{ padding: 0; margin: 0; width: 215px; border-radius: 30px; height: 52px; text-align: center; background: $primary; display: inline-flex; justify-content: center; align-items: center; font-size: 20px; color: $white;
            @media ($sm-1679){font-size: 18px; height: 48px;}
            @media ($sm-1199){font-size: 16px; width: 180px;}
            @media ($sm-767){font-size: 14px;}
        }
    }
}

.service-wrap{ padding: 130px 0 85px 0;
    @media ($sm-1679){padding: 80px 0;}
    @media ($sm-1199){padding: 50px 0;}
    @media ($sm-579){padding: 30px 0 10px 0;}
    .box-wrap{display: flex; gap: 25px;
        @media ($sm-991){gap: 15px;}
        @media ($sm-767){ flex-direction: column; align-items: center;}
        @media ($sm-579){padding-bottom: 20px;}
        .ico{display: flex; align-items: center; justify-content: center; border-radius: 50%; background:$primary; width: 91px; height: 91px;
            @media ($sm-1679){width: 80px; height: 80px;}
            @media ($sm-1441){ width: 65px; height: 65px;}
            @media ($sm-991){width: 50px; height: 50px;}
            .img{width: 44px;
                @media ($sm-1679){width: 38px;}
                @media ($sm-1441){width: 30px;}
                @media ($sm-991){width: 20px;}
            }
        }
        .para{ padding: 0; margin: 0;
            @media ($sm-767){text-align: center;}
            span{display: block; font-size: 20px; color: $dark; line-height: 1.5;
                @media ($sm-1679){font-size: 18px;}
                @media ($sm-1441){font-size: 16px;}
                @media ($sm-991){font-size: 14px; line-height: 1.2;}
                @media ($sm-579){ display: inline-block;}
                &.color{color: $primary; display: block;}
            }
        }
    }
}


.mission-wrap{ position: relative;
    .box-wrap{ background:url(../img/mission-bg.png) no-repeat top center / cover; border-radius: 30px; padding: 80px 85px; display: flex; align-items: center;
        @media ($sm-1679){padding: 60px 55px;}
        @media($sm-1199){ flex-direction: column; padding: 40px 30px;}
        @media($sm-991){ border-radius: 20px; }
        @media ($sm-767){padding: 30px 20px;}
    }
    .content-wrap{ flex:0 0 700px;
        @media($sm-1199){flex: auto;}
         
        .title{ font-size: 62px; color: $white; font-weight: 400; margin: 0 0 30px 0; padding: 0; display: flex; align-items: end; gap: 10px; line-height: 1;
            @media ($sm-1679){ font-size: 54px;}
            @media ($sm-1441){font-size: 50px;}
            @media ($sm-1199){font-size:46px;}
            @media ($sm-991){font-size: 42px; margin-bottom: 20px;}
            @media ($sm-767){font-size: 40px;;}
            @media ($sm-579){font-size: 38px;}
            @media ($sm-479){font-size: 34px;}
            span{color: #DFBFE9;}
            .img{
                @media ($sm-1679){max-width: 70px;}
                @media ($sm-1441){max-width: 50px;}
                @media ($sm-479){max-width: 35px;}
            }
        }
        .text{
            p{color: $white; font-size: 16px; line-height: 1.6; margin: 0; padding: 0;
                @media ($sm-1679){font-size: 14px;}
                @media ($sm-767){ line-height: 1.4; font-size: 13px;}
                &+p{ padding-top: 15px;}
            }
        }
    }
    .video-wrap{width: 640px; margin: 0px -250px 0 40px; border-radius: 30px; overflow: hidden; 
        @media($sm-1679){
            width: 470px; 
            margin: 0px -250px 0 40px;
        }
        @media($sm-1441){
            width: 350px;
        }
        @media($sm-1199){margin: 20px 0 0 0;}
        @media ($sm-767){width: 310px;}
        @media ($sm-579){width: 250px;}
        @media ($sm-479){width: 220px;}
    }
    .vector{position: absolute; left: 0; bottom: 0; pointer-events: none; z-index: -1; width: 250px;
        @media($sm-1679){width: 130px;}
        @media($sm-1441){display: none;}
    }
}

.vision-wrap{ background: url(../img/vision-bg.png) no-repeat center / cover; padding: 195px 0;
    @media($sm-1679){
        padding: 100px 0px;
    }
    @media($sm-1441){
        padding: 80px 0px;
    }
    @media($sm-1199){ padding: 60px 0;}
    .vision-box-wrap{ display: flex; justify-content: space-between; gap:10px;
        @media ($sm-579){flex-wrap: wrap;}
        .content-wrap{ align-items:center;   display: flex; gap:20px; border: 1px solid #DCC6E3; border-radius: 20px; background: $white; max-width: 300px; padding: 30px;
            @media($sm-1679){padding: 20px 15px; max-width: 280px;}
            @media($sm-1199){ max-width: 100%; width: 25%; align-items: start;}
            @media($sm-991){flex-direction: column; gap: 10px;}
            @media ($sm-579){width: 48%;}
            .ico{ background: $primary; border-radius: 50px; display: flex; align-items: center; justify-content: center; width: 59px; height: 59px; flex: 0 0 59px;
                @media($sm-1679){width: 50px; height: 50px; flex: 0 0 50px;}
                @media ($sm-991){width: 40px; height: 40px; flex: 0 0 40px;}
                .img{
                    @media ($sm-991){max-width: 20px;}
                }
            }
            .txt{
                .num{color:$primary; font-size: 32px; margin: 0 0 10px 0; line-height: 1;
                    @media($sm-1679){font-size: 30px;}
                    @media($sm-1441){font-size: 28px;}
                    @media ($sm-767){font-size: 26x;}
                }
                .para{color: $dark; font-size: 16px; line-height: 1.6;
                    @media ($sm-1679){font-size: 14px;}
                    @media ($sm-767){ line-height: 1.4; font-size: 13px;}
                }
            }
        }
    }
}



.subscrie-wrap{padding: 130px 0 195px 0px; background: url(../img/subscribe-bg.png) no-repeat center / cover; position: relative;
    @media($sm-1679){
        padding: 80px 0px 100px;
    }
    @media($sm-991){ padding:60px 0px 50px 0}
    .head-wrap{text-align: left; margin: 0; padding: 0;}
    .form-wrap{ border-radius: 20px; background:url(../img/footer-bg.png) no-repeat center / cover ; max-width: 568px; padding:50px 60px;
        @media($sm-1199){padding: 30px 30px;}
        @media($sm-991){padding: 30px 15px;}
        @media($sm-767){ margin-top: 20px;}
        .title{color: $white; font-size: 18px; font-weight: 400; padding-bottom: 20px; margin: 0;
            @media($sm-1199){font-size: 16px; padding-bottom: 10px;}
        }
        .input{margin-bottom: 30px; 
            @media($sm-1679){margin-bottom: 20px;}
            @media($sm-991){ margin-bottom: 15px;}
            input{border-radius: 30px; height: 56px; border: 1px solid $white; background:#FFFFFF17 ; width: 100%; outline: 0; box-shadow: none; color: $white; font-size: 14px; padding:10px 35px;
                @media($sm-1679){height: 50px;}
                @media($sm-991){padding: 10px 20px;}
                &::placeholder{opacity: 1; color: $white;}
            }
            .error{font-size: 13px; padding: 5px 0 0 35px; color: red;
                @media($sm-991){ padding-left: 20px;}
            }
        }
        .btn-wrap{width: 190px; height: 52px; background: $white; border-radius: 30px; display: flex; align-items: center; justify-content: space-between; border: 0; cursor: pointer; outline: 0; box-shadow: none; text-decoration: none; padding: 10px 20px;
            @media($sm-1199){height: 46px;}
            span{color:$primary; font-weight: 700; font-size: 16px; text-decoration: none;
                @media($sm-1199){font-size:14px;}
            }
            .img{
                @media($sm-1199){max-width: 18px;}
            }
        }
    }
    .vector{position: absolute; left: 0; bottom: 0; top: 0; pointer-events: none; z-index: -1; width: 250px; margin: auto;
        @media($sm-1679){width: 130px;}
        @media($sm-1441){display: none;}
    }
}



.sliders{
    position: relative;
    &::after{
        content: "";
        background: url('../img/flower-bg.png') no-repeat top center / cover;
        position: absolute;
        right: 0;
        bottom: 0;
        pointer-events: none;
        z-index: -1;
        height: 310px;
        top: -46px;
        width: 282px;
        @media ($sm-1679) {width: 145px; height: 190px;}
        @media($sm-1199){display: none;}
    }
    .testi-slider { margin: 0; padding-bottom: 130px;
        @media ($sm-1679) {padding-bottom: 100px;}
        @media($sm-991){ padding-bottom: 60px;}
        // overflow: hidden;
        
        .slick-next, .slick-prev {
            background-color: $white;
            border: 1px solid $primary;
            width: 76px;
            height: 76px;
            display: flex;
            align-items: center;
            border-radius: 50px;
            justify-content: center;
            z-index: 99;
            top: unset; transform: rotate(0);
            bottom:0;
            @media ($sm-1679) {width: 60px; height: 60px;}
            @media($sm-991){width: 40px; height: 40px;}
            &:hover{
                background-color: $primary;
                img{
                    filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(2%) hue-rotate(47deg) brightness(109%) contrast(101%);
                }
              
            }
        }
        .slick-next{
            transform: rotate(180deg);
        }
        .slick-prev{
            left:27% ;
            @media($sm-1199){left: 10%;}
            @media($sm-579){left: 5%;}
        }
        .slick-next{
            right: 27%;
            @media($sm-1199){right: 10%;}
            @media($sm-579){right: 5%;}
        }
        .slick-next:before, .slick-prev:before {
            display: none;
        }
        .slick-list{
            padding-left: 400px;
            padding-right: 400px;
           overflow: hidden;
            @media($sm-1679){
                padding-left: 200px;
                padding-right: 200px;
            }
        }
      
    .slick-dots {
        display: flex;
        justify-content: center;
        bottom:20px;
        margin: 0;
        padding: 1rem 0; z-index: 9;
        list-style-type: none;
        @media ($sm-1679) {bottom: 10px;}
        @media($sm-991){bottom: 0;}
            li {
                margin: 0 0.25rem;
                width: 40px;
                height: 3px;
                @media($sm-579){width: 25px; margin: 0 2px;}
            }
        
            button {
                display: block;
                width: 40px;
                height: 3px;
                padding: 0;
                
                border: none;
                border-radius: 10px;
                background-color: $primary;
                
                text-indent: -9999px;
                @media ($sm-1679) {height: 2px;}
                @media($sm-579){width: 25px;}
            }
        
            li.slick-active button {
                background-color: #800080;
            }
        
    }
    .testimonial {
        padding: 44px 68px;
        margin: 10px;
        //background: $primary;
        background-image: url('../img/slider-bg.png');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        color: $white;
        letter-spacing: 0px;
        color: $white;
        font-size: 16px;
        line-height: 28px;
        font-weight: 400;
        border-radius: 20px; max-width: 550px;
        @media($sm-1679){
            padding:20px 30px;
        }
        @media($sm-1441){font-size: 14px; line-height: 25px;}
        @media($sm-1199){max-width: 430px;}
        @media($sm-767){max-width: 300px;}
        @media($sm-479){max-width: 270px;}
        &::before{
            content: "";
            position: relative;
            background-image: url('../img/quotes.png');
            background-repeat: no-repeat;
            width: 45px;
            height: 45px;
            display: flex;
            border-radius: 50px;
            background-position: center;
            align-items: center;
            justify-content: center;
            background-color: $white;
            border: 1px solid $primary;
            @media($sm-1441){margin-bottom: 10px;}
        }
        .quotes{
        display: block;
        width: 45px;
        height: 45px;
        background: $white 0% 0% no-repeat padding-box;
        border: 1px solid $primary;
        border-radius: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        @media($sm-1679){
            width: 35px;
            height: 35px;
        }
        }
        
    .slick-prev,
    .slick-next {
        z-index: 100;
        color: #333;
        font-size: 24px;
    }
    
    }
    
    }
}