﻿@import url('../Font_Sahel.css');

body {
    font-family: 'Sahel-normal', 'Sahel' !important;
}

.banner .carousel-control-prev-icon {
    background-image: url('../../image/HomePage/svg/arrow_left.svg') !important;
}

.banner .carousel-control-next-icon {
    background-image: url('../../image/HomePage/svg/arrow_right.svg') !important;
}

.lazy-background {
    background-repeat: no-repeat;
}

.one {
    background-image: url('../../image/HomePage/imageplaceholder4.jpg');
    background-size: cover;
}

    .one.visible {
        background-image: url('../../image/HomePage/4.png');
        background-size: cover;
    }
.two {
    background-image: url('../../image/HomePage/imageplaceholder3.jpg');
    background-size: cover;
}

    .two.visible {
        background-image: url('../../image/HomePage/3.jpg');
        background-size: cover;
    }
.startbutton {
    border-radius: 50px !important;
    background-color: rgb(254,137,84) !important;
    font-size:20px!important;
    position:relative!important;
    top:100px!important;
}
.startbutton:focus {
    border-radius: 50px !important;
    background-color: rgb(254,137,84) !important;
    font-size: 20px !important;
}
    .startbutton:checked {
        border-radius: 50px !important;
        background-color: rgb(254,137,84) !important;
        font-size: 20px !important;
    }
    .startbutton:hover {
        border-radius: 50px !important;
        background-color: rgb(253,118,53) !important;
    }

.slidertwotextback h4, .slidertwotextback h3 {
    line-height: 2.7rem !important;
   
}
.liststyle ul li {
    list-style: none !important;
    line-height: 1.5 !important;
}
.liststyle p{
    margin-bottom:7px!important;
}
.aboutus {
    background-image: url('../../image/HomePage/بک موشن.jpg');
    background-size: cover;
    direction: rtl !important;
    background-position: center !important;
}
    .aboutus.visible {
        background-image: url('../../image/HomePage/بک موشن.jpg');
        background-size: cover;
        direction: rtl !important;
        background-position: center !important;
    }
.embed-responsive-item{
    border-radius:2.5rem!important;
}

.benefit {
    background-image: url('../../image/HomePage/imageplaceholderbenefit.jpg');
    background-size: cover;
    direction: rtl !important;
    background-position: center !important;
}
.benefit.visible {
    background-image: url('../../image/HomePage/بک مزیت.jpg');
    background-size: cover;
    direction: rtl !important;
    background-position: center !important;
}
.benefit-button {
    border-radius: 50px !important;
    background-color: rgb(0,168,255) !important;
    font-size: 20px !important;
    color:white!important;
    padding:1rem!important;
}

    .benefit-button:hover {
        border-radius: 50px !important;
        background-color: rgb(0,156,240) !important;
        font-size: 20px !important;
        color: white !important;
        padding: 1rem !important;
    }


.carousel {
    width: 100%;
}

.slide-box {
    display: flex;
    /*justify-content: space-between;*/
}



.carousel-caption {
    background-color: rgba(0, 0, 0, 0.5);
    padding: 20px;
    border-radius: .5rem;
}
.card {
    height:25rem !important;
}
    .card img {
        width: 100% !important;
        height: 27% !important;
        border-radius: 19px 19px 0px 0px;
    }
.ScientificSalider .carousel-control-next, .ScientificSalider .carousel-control-prev {
    /*background: rgba(0,0,0,.2);*/
}
.ScientificSalider .carousel-control-next:hover, .ScientificSalider .carousel-control-prev:hover {
    /*background-color: rgba(0,168,255,.2);*/
}
.card {
    border: 2px solid #00a8ff !important;
    border-radius:20px;
}
.leftprev {
    height: 50% !important;
    margin:auto!important;
}
.rightprev {
    height: 50% !important;
    margin: auto !important;
    /*position: relative;
    left: 920px !important;
    top: -180px !important;*/
}
    .leftprev .fas.fa-chevron-left, .rightprev .fas.fa-chevron-right {
        color: rgb(0,168,255);
        font-size: 20px !important;
    }
.card-body{
   direction:rtl!important;
}
.text1 {
    position: relative !important;
    left: 300px !important;
}

.text3 {
    position: relative !important;
    right: 300px !important;
}

.ScientificSalider .carousel-control-next, .ScientificSalider .carousel-control-prev {
    width: 3% !important;
}
@media (max-width:991.95px) {
    .text1 {
        position: relative !important;
        left: 0px !important;
    }

    .text3 {
        position: relative !important;
        right: 0px !important;
    }
}
  

    @media (max-width:767.95px) {
        .slidertwotextback h4, .slidertwotextback h3 {
            line-height: 2.7rem !important;
            font-size: 12px !important;
        }
        .slidertwotextback .startbutton {
            margin-top:10px!important;
        }
        .startbutton {
            border-radius: 50px !important;
            background-color: rgb(254,137,84) !important;
            font-size: 14px !important;
        }

        .benefit-button {
            border-radius: 50px !important;
            background-color: rgb(0,168,255) !important;
            font-size: 14px !important;
            color: white !important;
            padding: 1rem !important;
        }

        .text1 {
            position: relative !important;
            left: 0 !important;
        }

        .text3 {
            position: relative !important;
            right: 0 !important;
        }
    }

    @media (max-width:575.95px) {

        .slidertwotextback h4, .slidertwotextback h3 {
            line-height: 2.7rem !important;
            font-size: 12px !important;
        }
        .slidertwotextback .startbutton {
            margin-top: 10px !important;
        }
        .startbutton {
            border-radius: 50px !important;
            background-color: rgb(254,137,84) !important;
            font-size: 14px !important;
        }

        .benefit-button {
            border-radius: 50px !important;
            background-color: rgb(0,168,255) !important;
            font-size: 14px !important;
            color: white !important;
            padding: 1rem !important;
        }

        .card {
            height: 30rem !important;
        }

            .card img {
                width: 100% !important;
                height: 30% !important;
            }
    }