:root {
    --main-color: #dd2476;
    --iron-color: #181c32;
    --orang-color: #fd6b7f;
    --green-color: #9debe4;
    --green-light: #b5f3ee;
    --blue-color: #bdeaff;
    --blue-light: #caeeff;
    --red-color: #fed7df;
    --red-light: #ffd9e1;
    --footer-color: #191843;
}
@font-face {
    font-family: "sansArabic";
    src: url("../font/NotoSansArabic_Condensed-Bold.ttf") format("truetype");
    font-weight: bold;
}
@font-face {
    font-family: "sansArabic";
    src: url("../font/NotoSansArabic_Condensed-Regular.ttf") format("truetype");
    font-weight: 400;
}
body {
    font-family: "sansArabic", sans-serif !important;
    background-color: #f8f9ff !important;
    height: 5000px;
}
/* global rulse */
ul {
    list-style: none;
}
a {
    text-decoration: none !important;
}
.active-link {
    color: var(--main-color) !important;
}
.main-btn {
    padding: 10px 33px;
    background-image: linear-gradient(
        90deg,
        var(--main-color),
        var(--orang-color)
    );
    border-radius: 10px;
    color: #fff !important;
    display: inline-block;
    animation-duration: 2s;
    transition: 0.3s;
}
.main-btn:hover {
    transform: scale(1.1);
}
/*end global rulse */
.home {
    overflow: hidden;
}
.backgrond-gradinant {
    position: absolute;
    width: 100%;
    z-index: -1;
    top: 0;
}
.backgrond-gradinant .div-1 {
    filter: blur(25px);
    background-color: #f7eeff;
    border-radius: 50%;
}

.backgrond-gradinant .div-2 {
    border-radius: 50%;
    filter: blur(25px);
    background-color: #e3f1fe;
}
/* ########################## */
.face-main {
    background-color: #fff;
    border-radius: 20px;
    margin: 80px auto 0;
    padding: 30px 0 70px;
}
.face-main nav {
    text-wrap: nowrap;
}
.logo img {
    width: 70px;
    height: 60px;
}
i.fa-bars {
    font-size: 30px;
    padding: 0 20px;
    color: var(--iron-color);
    margin: 0 0.5rem;
    animation-duration: 2s;
    display: block;
    float: right;
}
@media (max-width: 992px) {
    nav {
        flex-wrap: wrap;
    }
    .face-main ul {
        width: 100%;
        display: flex;
        flex-wrap: wrap !important;
        background-color: #dddddd29;
        order: 3;
        margin-top: 10px;
        padding-top: 0 !important;
    }
    .face-main ul li {
        padding: 8px 0;
        width: 50%;
        transition: 0.3s;
    }
    .face-main ul li:hover {
        background-color: #dddddd54;
    }
    .face-main ul li:last-child {
        width: 100%;
    }
}
.face-main ul a {
    padding: 0 14px;
    color: var(--iron-color);
    position: relative;
}
@media (min-width: 992px) {
    .face-main .ul {
        align-items: center;
    }
    .face-main ul a::before {
        content: "";
        display: block;
        width: 0;
        height: 2px;
        background-color: var(--main-color);
        position: absolute;
        left: 0;
        top: 0;
        transition: 0.5s;
    }
    .face-main ul a::after {
        content: "";
        display: block;
        width: 0;
        height: 2px;
        background-color: var(--main-color);
        position: absolute;
        right: 0;
        bottom: 0;
        transition: 0.5s;
    }
    .face-main ul a:hover::after,
    .face-main ul a:hover::before {
        width: 100%;
    }
}
.face-main li:hover a {
    color: var(--main-color);
}
/* ###################################### */
@media (min-width: 1200px) {
    .face-main .info {
        padding: 100px 50px;
    }
}
@media (max-width: 1199px) {
    .face-main .info {
        padding: 50px 30px;
    }
    .box-img {
        order: 2 !important;
    }
}
.face-main .info h1 {
    font-size: 50px;
    line-height: 65px;
    color: var(--iron-color);
    transform: translateX(-400%);
    transition: 0.6s;
    font-weight: 700;
}
.face-main .info h1 span {
    color: var(--main-color);
}
.face-main .info p {
    font-size: 18px;
    line-height: 23px;
    color: var(--iron-color);
    transform: translateX(400%);
    transition: 0.6s;
}
.face-main .img-1 {
    width: 100%;
}
.box-img {
    order: 0 !important;
}
@media (max-width: 991px) {
    .box-img {
        order: 2 !important;
    }
    .face-main .img-1 {
        width: 70%;
    }
    .face-main .info h1 {
        text-align: center;
    }
    .face-main .info p {
        text-align: center;
    }
    .face-main .info a {
        width: fit-content;
        margin: auto;
        display: block;
    }
}
/*start about-us */
.about-us {
    padding-top: 75px;
}
.about-us h2 {
    font-size: 50px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 50px;
}
.about-us .p-1 {
    display: block;
    margin: auto;
    width: 60%;
    line-height: 30px;
    font-size: 23px;
    margin-bottom: 50px;
}
.about-us p {
    text-align: center;
    font-size: 20px;
    margin-top: 20px;
}
.about-us.en p {
    font-size: 16px;
}
.about-us .boxs{
    min-height: 350px;
    min-width: 300px;
    border-radius: 40px;
    padding: 20px 25px 0px;
}
.about-us .red-box {
    background-image: linear-gradient(#fff, var(--red-color));
}
.about-us .blue-box {
    background-image: linear-gradient(#fff, var(--blue-color));
}
.about-us .green-box {
    background-image: linear-gradient(#fff, var(--green-color));

}
.red-box img {
    background-color: var(--red-color);
    border-radius: 50%;
    padding: 10px;
    border: 10px solid #fff;
    box-shadow: 0px 0px 15px 0px var(--red-color);
    width: 85px;
}
.blue-box img {
    background-color: var(--blue-color);
    border-radius: 50%;
    padding: 10px;
    border: 10px solid #fff;
    box-shadow: 0px 0px 15px 0px var(--blue-color);
    width: 85px;
}
.green-box img {
    background-color: var(--green-light);
    border-radius: 50%;
    padding: 10px;
    border: 10px solid #fff;
    box-shadow: 0px 0px 15px 0px var(--green-color);
    width: 85px;
}
.about-us h3 {
    font-size: 18px;
    font-weight: 700;
    margin-top: 40px;
    /* margin-bottom: 30px; */
}
.about-us .box-1,
.about-us img {
    transition: 0.3s !important;
}
@media (max-width: 991px) {
    .about-us .box-1 {
        max-width: 400px;
        margin: auto;
        display: inline-block;
        margin: 0 0.5rem;
        animation: bounce;
        animation-duration: 2s;
    }
}
.about-us .box-1:hover {
    transform: scale(1.1);
}
.about-us .red-box:hover {
    box-shadow: 0px 0px 20px 0px var(--red-color);
}
.about-us .blue-box:hover {
    box-shadow: 0px 0px 15px 0px var(--blue-color);
}
.about-us .green-box:hover {
    box-shadow: 0px 0px 15px 0px var(--green-color);
}
.about-us .box-1:hover img {
    transform: rotate(360deg);
}
/*end about-us */
/* statrt aims */
.aims {
    margin-top: 100px;
    padding-top: 50px;
}
.aims h2 {
    font-size: 50px;
    font-weight: 700;
}
.aims p {
    line-height: 30px;
    font-size: 23px;
}
.aims img {
    max-width: 100%;
    display: block;
    margin: auto;
}
/* end aims */
/* start gallery */
.gallery {
    margin-top: 100px;
    overflow: hidden;
    padding-top: 50px;
}
.gallery h2 {
    font-size: 50px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 70px;
}
.gallery h3 {
    font-size: 25px;
    font-weight: 700;
    line-height: 40px;
    width: 85%;
}
@media (max-width: 991px) {
    .gallery h3 {
        text-align: center;
        width: 100%;
    }
    .links {
        width: fit-content;
        margin: auto;
    }
}
.swiper {
    width: 100%;
    height: 100%;
}

.slider-1 .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #ff0000;
    display: flex;
    justify-content: center;
    align-items: center;
}

.slider-1 .swiper-slide {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.swiper {
    margin-left: auto;
    margin-right: auto;
    border-radius: 20px;
}
.slider-1 {
    height: 430px;
}
.slider-1 .swiper-pagination {
    position: absolute;
    bottom: -30px !important;
    z-index: 2;
}
.slider-1 .next,
.slider-1 .prev {
    background-color: #fff;
    padding: 5px;
    border-radius: 50%;
    box-shadow: 0 0 22px 5px #ddd;
}
.slider-1 .swiper-button-next:after {
    content: "" !important;
}
.slider-1 .swiper-button-next {
    right: -12.5px !important;
}
.slider-1 .swiper-button-prev {
    left: -12.5px !important;
}
.slider-1 .swiper-button-prev:after {
    content: "" !important;
}
/* ********* */

.slider-2 .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #ff0000;
    display: flex;
    justify-content: center;
    align-items: center;
}

.slider-2 .swiper-slide {
    display: block;
    width: calc(100% / 3);
    object-fit: cover;
    border-radius: 20px;
    height: 80%;
    box-shadow: 0 0 30px 0px #00000014;
}

.slider-2 {
    height: 430px;
}
.slider-2 .swiper-pagination2 {
    position: absolute;
    bottom: -30px !important;
    display: flex;
    justify-content: center;
}
.slider-2 .next,
.slider-2 .prev {
    background-color: #fff;
    padding: 5px;
    border-radius: 50%;
    box-shadow: 0 0 22px 5px #ddd;
}
.slider-2 .swiper-button-next2:after {
    content: "" !important;
}
.slider-2 .swiper-button-next2 {
    right: 27% !important;
    position: absolute;
    top: 50%;
    z-index: 1;
}
.slider-2 .swiper-button-prev2 {
    left: 27% !important;
    position: absolute;
    top: 50%;
    z-index: 1;
}
.slider-2 .swiper-button-prev2:after {
    content: "" !important;
}
.slider-2 .swiper-slide-active + img {
    transform: scale(1.2) !important;
    z-index: 5;
    max-height: 100%;
    overflow: hidden;
}
@media (max-width: 572px) {
    .slider-2 .swiper-slide-active + img {
        transform: scale(1.4, 1.2) !important;
    }
    .slider-2 .swiper-button-next2 {
        right: 23% !important;
    }
    .slider-2 .swiper-button-prev2 {
        left: 23% !important;
    }
}
@media (min-width: 767px) {
    .slider-2 .swiper-button-next2 {
        right: 28% !important;
    }
    .slider-2 .swiper-button-prev2 {
        left: 28% !important;
    }
}
.swiper-wrapper {
    align-items: center;
}
.store {
    flex-wrap: wrap;
}
.store h3 {
    font-size: 25px;
    font-weight: 700;
}
@media (max-width: 992px) {
    .store-box {
        justify-content: center;
    }
}
.container-overflow{
    overflow: hidden;
}
.grid{
    height: 400px;
}
.grid-img{
    margin-top: 100px !important;
    animation: grid-img  linear alternate-reverse infinite;

}
@keyframes grid-img {
    to{
        transform: translateX(0px);
    }
}
.grid-img:hover{
    animation-play-state: paused;
}
.grid img{
    width: 100%;
    border-radius: 20px;
    height: 100%;
}
.grid .item-1{
    width: 52%;
    display: inline-block;
    height: 43%;
    transform: translateY(-15px);
    margin-left: 10px;
}
.grid .item-2{ 
    width: 43%;
    display: inline-block;
    height: 53%;
}
.grid .item-3{
    width: 43%;
    display: inline-block;
    height: 52%;
        transform: translateY(-15px);
        margin-left: 10px;
}
.grid .item-4{
    width: 53%;
    height: 43%;
    display: inline-block;
}
/* end gallery */
/* stare features */
.features {
    margin-top: 100px;
    overflow: hidden;
}
.features .box-features {
    border-radius: 20px;
    background-color: #fff;
    box-shadow: 0 0 22px 0px #ddd;
    position: relative;
    padding: 30px 0px;
    max-width: 450px;
    transition: 0.3s;
}
.features img {
    transition: 0.4s;
}
.features .box-features:hover ul::before {
    top: 73% !important;
}
.features .box-features:hover img {
    transform: rotate(360deg);
}
.features .box-green:hover {
    box-shadow: 0 0 15px 0 #4ad2d2;
}
.features .box-blue:hover {
    box-shadow: 0 0 15px 0 #53c3f6;
}
.features .box-red:hover {
    box-shadow: 0 0 15px 0 var(--main-color);
}
.features h2 {
    font-size: 50px;
    font-weight: 700;
    color: var(--iron-color);
    margin-bottom: 100px;
}
.features .img-red {
    background-color: #fdb5c5;
}
.features .img-blue {
    background-image: linear-gradient(-45deg, var(--blue-light), #96ddff);
}
.features .img-green {
    background-image: linear-gradient(-45deg, var(--green-light), #99e8e1);
}
.features .img1 {
    position: absolute;
    z-index: 2;
    top: -5px;
    right: -5px;
    border-radius: 50%;
    padding: 10px;
}
.features p {
    font-size: 14px;
    font-weight: 700;
    padding: 0 20px 0 0;
    margin: 5px 0 0;
}
.features .en p{
    padding: 0 0 0 20px !important;
}
.features h3 {
    font-size: 30px;
    font-weight: 700;
    color: var(--iron-color);
    margin-right: auto;
    width: fit-content;
    margin-bottom: 80px;
}
.features .box-red ul img,
.features .box-blue ul img,
.features .box-green ul img {
    background-image: linear-gradient(-45deg, #fb657e, #e02977);
    border-radius: 50%;
    width: 50px !important;
    height: 50px !important;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
}
.features .box-red ul.en img,
.features .box-blue ul.en img,
.features .box-green ul.en img {
    margin-left: 10px;
}
.features ul li {
    margin: 20px 0;
}
.features .box-blue ul img {
    background-image: linear-gradient(-45deg, #61ccfc, #3eb5ed);
}
.features .box-green ul img {
    background-image: linear-gradient(-45deg, #5be7e7, #3ac0c0);
}
.features .box-features::before {
    content: "";
    position: absolute;
    width: 120px;
    height: 120px;
    display: block;
    background-color: #fff;
    box-shadow: 0 0 22px 0px #ddd;
    top: -30px;
    right: -30px;
    border-radius: 20px;
}
.features .box-features.box-red::after,
.features .box-features.box-blue::after,
.features .box-features.box-green::after {
    content: "";
    position: absolute;
    width: 120px;
    height: 120px;
    display: block;
    background-image: linear-gradient(-135deg, #ffffff, #fdb5c5);
    box-shadow: 0 0 22px 0px #ddd;
    bottom: -30px;
    left: -30px;
    border-radius: 20px;
    z-index: -1;
}
.features .box-features.box-blue::after {
    background-image: linear-gradient(-135deg, #ffffff, #caeeff);
}
.features .box-features.box-green::after {
    background-image: linear-gradient(-135deg, #ffffff, #bcf9f4);
}
.features ul {
    position: relative;
}
.features ul::after {
    content: "";
    position: absolute;
    display: block;
    width: 8px;
    height: 105%;
    background-color: #f8f9ff;
    right: 15px;
    border-radius: 50px;
    top: -5px;
}
.features ul.en::after {
    left: 15px;
    top: -5px;
}
.features .box-red ul::before,
.features .box-blue ul::before,
.features .box-green ul::before {
    content: "";
    position: absolute;
    display: block;
    width: 8px;
    height: 30%;
    background-image: linear-gradient(-135deg, #e02a77, #fb647e);
    right: 15px;
    border-radius: 50px;
    top: -5px;
    z-index: 4;
    transition: 0.3s;
}
.features .box-red ul.en::before,
.features .box-blue ul.en::before,
.features .box-green ul.en::before {
    left: 15px;
}
.features .box-blue ul::before {
    background-image: linear-gradient(-135deg, #3db4ec, #78cef5);
}
.features .box-green ul::before {
    background-image: linear-gradient(-135deg, #38bebe, #5fecec);
}
/* end features */
/* start clients */
.clients {
    margin-top: 100px;
    color: var(--iron-color);
    text-align: center;
    position: relative;
    padding: 100px 0;
    background-color: #fff;
    border-radius: 20px;
}
.clients h2 {
    font-size: 50px;
    font-weight: 700;
    margin-bottom: 100px;
}
.clients img {
    display: block !important;
}
.clients .img-1 {
    background-color: #ed3d25;
    width: 120px !important;
    display: flex;
    border-radius: 20px;
    justify-content: center;
}
.clients .img-2 {
    background-color: #0a8479;
    width: 120px !important;
    display: flex;
    border-radius: 20px;
    justify-content: center;
}
.clients .img-5 {
    background-color: #81fff4;
    width: 120px !important;
    display: flex;
    border-radius: 20px;
    justify-content: center;
}
/* end clients */
/* atart banchs */
.background-footer {
    margin-top: 500px;
    background-color: var(--footer-color);
}
.banchs {
    margin-top: 100px;
    position: relative;
    top: -270px;
}
.banchs h2 {
    font-size: 50px;
    font-weight: 700;
    color: var(--iron-color);
    margin-bottom: 50px;
}
.banchs p {
    color: var(--iron-color);
    font-size: 23px;
    line-height: 40px;
}
.banchs .kind {
    background-color: #f2efee;
    width: 220px;
    justify-content: space-between;
    border-radius: 50px;
    margin: auto;
}
.banchs .kind div {
    padding: 13px 24px;
    border-radius: 50px;
    width: 50%;
    text-align: center;
}
.banchs .kind .month {
    background-color: #bb6bd9;
    color: #fff;
}
.background-banch {
    background-image: linear-gradient(
        360deg,
        #adb5d9 0%,
        #e1c7d0 30%,
        #e5e3e4 70%
    );
    border-radius: 20px;
    padding: 30px;
}
@media (min-width: 400px) {
    .background-banch {
        padding: 20px;
    }
}
@media (min-width: 450px) {
    .background-banch {
        padding: 40px;
    }
}
@media (min-width: 500px) {
    .background-banch {
        padding: 50px;
    }
}
@media (min-width: 550px) {
    .background-banch {
        padding: 50px;
    }
}
@media (min-width: 600px) {
    .background-banch {
        padding: 70px;
    }
}
@media (min-width: 768px) {
    .background-banch {
        padding: 75px 150px;
    }
}
@media (min-width: 992px) {
    .background-banch {
        padding: 50px;
    }
}
@media (min-width: 1200px) {
    .background-banch {
        padding: 75px 120px;
    }
}
.all-banch .best{
    padding: 2px 25px;
    color: #BB6BD9;
    background-color: #403879;
    border-radius: 20px;
    width: fit-content;
    position: absolute;
    top: 20px;
}
.all-banch {
    background-color: #f2e6e8;
    padding: 10px 20px 0px 20px;
    border-radius: 20px;
    color: #848199;
}
.all-banch .price {
    font-size: 36px;
    line-height: 46px;
    font-weight: 700;
    color: var(--iron-color);
}
.all-banch .kind-banch {
    font-size: 17px;
    padding: 0 10px;
}
.all-banch .name {
    font-size: 25px;
    font-weight: 700;
    color: var(--iron-color);
    margin: 15px 0;
}
.all-banch .description {
    font-size: 15px;
    margin-bottom: 15px;
}
.all-banch h4 {
    font-size: 18px;
    font-weight: 700;
    padding: 0 0 6px;
}
.all-banch i {
    color: #bb6bd9;
    border-radius: 50%;
    font-size: 14px;
    width: 22px;
    height: 22px;
    background-color: #eddbe7;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 10px;
}
.all-banch.en i {
    margin-right: 10px;
    margin-left: 0 !important;
}
.all-banch .subscribe {
    background-color: #887f9c;
    color: #fff;
    font-weight: 700;
    padding: 10px 20px;
    text-align: center;
    border-radius: 50px;
    margin-top: 15px;
    /* transform: translateX(10px); */
    width: 210px;
}
.all-banch .ba-1{
    transition: 0.3s;
    padding: 50px 20px 20px 0;
    position: relative;
    min-height: 500px;
    transform: translateY(-40px);
}
.all-banch .ba-1:hover,.banch-1{
    background-color: #231d4f;
    color: #fff !important;
    border-radius: 20px;
    box-shadow: 0px 65px 46px 0px #796dd0a6;
}
.all-banch .ba-1:hover .price,.banch-1 .price{
    color: #fff;
}
.all-banch .ba-1:hover .name,.banch-1 .name{
    color: #fff;
}
.all-banch .ba-1:hover .subscribe, .banch-1 .subscribe {
    background-color: #BB6BD9;
}
.all-banch .ba-1:hover i, .banch-1 i{
    background-color: #393461;
    color: #fff;
}

/* end banchs */
/* start part sing in */
.part-sing-in {
    position: relative;
    top: -170px;
}
.part-sing-in h3 {
    color: #fff;
    font-size: 30px;
    font-weight: 700;
    line-height: 45px;
}
.part-sing-in form {
    height: 50px;
    border-radius: 15px;
    overflow: hidden;
    margin-top: 30px;
    max-width: 100%;
}
.part-sing-in form label {
    color: #fff;
    z-index: 2;
    transform: translateY(12px);
    text-indent: 20px;
    font-weight: 700;
    transition: 0.3s;
}
.part-sing-in form input[type="email"] {
    height: 100%;
    width: 100%;
    background-color: #252155;
    border: none;
    color: #fff;
    padding: 0 20px;
}
.part-sing-in form input[type="email"]:focus {
    outline: none;
}
.part-sing-in form input[type="submit"] {
    left: 0;
    padding: 10px 33px;
    background-image: linear-gradient(
        90deg,
        var(--main-color),
        var(--orang-color)
    );
    border-radius: 15px;
    color: #fff;
    border: none;
    height: 100%;
}
.part-sing-in.en form input[type="submit"] {
    left: calc(100% - 120px);
}
/* end part sing in */
/* start contact-us */
.contact-us {
    position: relative;
    top: -70px;
}
.contact-us .box {
    background-image: linear-gradient(#5352fb, #1a1944);
    padding: 80px 20px;
    border-radius: 20px;
}
@media (min-width: 768px) {
    .contact-us .box {
        padding: 80px 150px;
    }
}
@media (min-width: 1400px) {
    .contact-us .box {
        padding: 80px 200px;
    }
}
.contact-us h2 {
    color: #fff;
    font-size: 50px;
    font-weight: 700;
    line-height: 65px;
    text-align: center;
    margin-bottom: 30px;
}
.contact-us p {
    font-size: 23px;
    line-height: 40px;
    color: #fff;
    text-align: center;
    margin-bottom: 50px;
}
.contact-us label {
    color: #fff;
}
.contact-us input[type="email"] {
    width: 100%;
    padding: 13px 20px;
    background-color: #45447e;
    border-radius: 15px;
    border: none;
    color: #fff;
}
.contact-us textarea {
    width: 100%;
    min-height: 140px;
    background-color: #45447e;
    border: none;
    padding: 20px;
    resize: none;
    border-radius: 15px;
    color: #fff;
}
.contact-us.en textarea {
    min-height: 160px;
}
@media (min-width:992px) {
    .contact-us.en textarea {
    min-height: 190px;
}
}
@media (min-width:1200px) {
    .contact-us.en textarea {
    min-height: 160px;
}
}
.contact-us input[type="submit"] {
    border: none;
}
.contact-us input[type="email"]::placeholder,
.contact-us textarea::placeholder {
    color: #fff;
}
.contact-us input[type="email"]:focus,
.contact-us textarea:focus {
    outline: none;
    box-shadow: 0 0 15px 0px var(--orang-color);
}
.contact-us .icon-socail a {
    background-image: linear-gradient(
        90deg,
        var(--main-color),
        var(--orang-color)
    );
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.contact-us .icon-socail a:hover {
    background-image: linear-gradient(45deg, #205ded, var(--main-color));
}
/* end contact-us */