@import "https://use.fontawesome.com/releases/v5.8.1/css/all.css";
    @import "https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css";
    @import "https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css";
    @import "../intlTelInput/intlTelInput.min.css";
    @import "../pincode/css/jquery-pincode-autotab.css";
    @import "../css/owl.carousel.min.css";
    @import url('https://fonts.googleapis.com/css2?family=Almarai:wght@300;400;700;800&display=swap');


    /* Arabic font
    @font-face{
		font-family: "bold";
		src:url("../fonts/HelveticaNeueLTArabic-Bold.ttf") format("truetype");
	}
    @font-face{
		font-family: "roman";
		src:url("../fonts/HelveticaNeueLTArabic-Roman.ttf") format("truetype");
	}
    @font-face{
		font-family: "light";
		src:url("../fonts/HelveticaNeueLTArabic-Light.ttf") format("truetype");
	}
*/
    :root{
        --main-color : #2390F5;
        --main-color-2 : 35, 144, 245;

        --dark-color: #222;
        --dark-color-2: 33, 33, 33;
        --normal-color: #4D4D4D;
        --light-color: #9093A3;

        --black-color: rgba(28, 28, 28, 1);
        --green-color: rgba(88, 183, 47, 1);
        --blue-color: rgba(3, 148, 203, 1);
        --red-color: rgba(217, 43, 31, 1);
        --yellow-color: rgba(255, 193, 7, 1);
        --purple-color: rgba(141, 39, 221, 1);
        --white-color: rgba(255, 255, 255, 1);
        --light: rgb(249, 249, 249);

        --shadow : 0px 2px 4px rgba(0, 56, 56, 0.2);
        --shadow-hover : 0 .5rem 1rem rgba(0,0,0,.15) ;
        --radius-sm: 8px;
        --radius-md: 6px;
        --radius-lg: 20px;

        --facebook: rgba(39, 76, 175, 1);
        --twitter: rgba(22, 174, 232, 1);
        --youtube: rgba(217, 43, 31, 1);
        --linkedin: rgba(0, 118, 164, 1);
        --instagram: rgba(211, 64, 131, 1);
        --whatsapp: rgb(37, 211, 102);
        --skype: rgb(37, 211, 102);
        --telegram: rgb(37, 211, 102)
    }

    h1, h2 ,h3 ,h4 ,h5, h6{
        font-weight: 800;
        font-family: 'Almarai', sans-serif;
    }
    body {
        font-family: 'Almarai', sans-serif;
        font-weight: 400;
        font-size: 16px;
        color: var(--dark-color);
        background-color: #fff;
    }
    a,a:hover {
        text-decoration: none;
        color: var(--main-color);
    }
    .bg-theme{
        background-color: var(--main-color);
    }
    .bg-green{
        background-color: var(--green-color);
    }
    .bg-blue{
        background-color: var(--blue-color);
    }
    .bg-red{
        background-color: var(--red-color);
    }
    .bg-yellow{
        background-color: var(--yellow-color);
    }
    .bg-purple{
        background-color: var(--purple-color);
    }
    .bg-light{
        background-color: var(--light) !important;
    }
    .text-theme{
        color: var(--main-color) !important;
    }
    .text-theme-light{
        color: var(--light-color) !important;
    }
    form.disabled{
        opacity: .75;
        pointer-events: none;
    }

    section{
        padding: 7rem 0;
    }
    [class^="bi-"]::before, [class*=" bi-"]::before{
        line-height: unset !important;
    }

    /*------------------------------------------
        button
    ------------------------------------------*/

	.btn{
		position: relative;
		overflow: hidden;
        padding: 0 2rem;
        height: 50px;
        line-height: 50px;
        box-shadow: 0px 15px 15px rgba( var(--main-color-2), 0.2);
        border-radius: var(--radius-md);
		transition: all ease-in-out .5s;
        outline: none !important;
        box-shadow: none !important;
	}
	.btn::after {
		content: "";
		display: block;
		position: absolute;
		top: 0;
		left: 25%;
		height: 100%;
		width: 50%;
		background-color: #fff;
		border-radius: 50%;
		opacity: 0;
		pointer-events: none;
		transition: all ease-in-out 0.5s;
		transform: scale(5, 5);
	}
	.btn:active::after {
		padding: 0;
		margin: 0;
		opacity: .2;
		transition: 0s;
		transform: scale(0, 0);
	}

    .btn-theme{
        background-color: var(--main-color);
        border-color: var(--main-color);
        color: var(--white-color) !important;
    }
    .btn-theme:hover,
    .btn-theme:focus{
        background-color: rgb(var(--main-color-2), .8);
    }
    .btn-outline-theme{
        background-color: transparent;
        border-color: var(--main-color);
        color: var(--main-color) !important;
    }
    .btn-outline-theme:hover,
    .btn-outline-theme:focus{
        background-color: var(--main-color);
        color: var(--white-color) !important;
    }

    .btn-light-theme{
        background-color: var(--white-color);
        border-color: var(--white-color);
        color: var(--main-color) !important;
    }
    .btn-light-theme:hover,
    .btn-light-theme:focus{
        background-color: var(--main-color);
        border-color: var(--main-color);
        color: var(--white-color) !important;
    }

    .menu-btn{
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 30px;
        height: 30px;
        cursor: pointer;
        transition: all 0.5s ease-in-out;
        overflow: hidden;
    }
    .menu-btn .menu-btn-burger{
        width: 30px;
        height: 3px;
        background-color: var(--dark-color);
        border-radius: 5px;
        transition: all 0.5s ease-in-out;
    }
    .menu-btn .menu-btn-burger::before,
    .menu-btn .menu-btn-burger::after{
        position: absolute;
        content: "";
        width: 30px;
        height: 3px;
        background-color: var(--dark-color);
        border-radius: 5px;
        transition: all 0.5s ease-in-out;
    }
    .menu-btn .menu-btn-burger::before{
        transform: translateY(-10px);
    }
    .menu-btn .menu-btn-burger::after{
        transform: translateY(10px);
    }
    .menu-btn:not(.collapsed) .menu-btn-burger{
        transform: translateX(-50px);
        background-color: transparent;
    }
    .menu-btn:not(.collapsed) .menu-btn-burger::before{
        transform: rotate(45deg) translate(35px, -35px);
    }
    .menu-btn:not(.collapsed) .menu-btn-burger::after{
        transform: rotate(-45deg) translate(35px, 35px);
    }

    /*------------------------------------------
        Navbar
    ------------------------------------------*/

    .navbar{
        padding: 0;
        width: 100%;
        z-index: 999;
        background: #FFFFFF;
    }
    .navbar-container{
        width: 100%;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: 1rem 0;
    }
    .navbar-container .logo{
        display: block;
        margin-inline-end: 3rem;
    }
    .navbar-container .main-nav{
        gap: 3rem;
    }
    .navbar-container .main-nav .nav-link{
        color: var(--dark-color);
        position: relative;
        padding: 0;
        line-height: 50px;
        font-size: 16px;
        transition: all .35s ease-in;
        cursor: pointer;
    }
    .navbar-container .main-nav .nav-link.btn-theme{
        box-shadow: 0px 15px 15px rgba(35, 144, 245, 0.2);
        border-radius: 16px;
        padding: 0 2rem;
    }
    .navbar-container .main-nav .nav-link:hover,
    .navbar-container .main-nav .nav-link.active,
    .navbar-container .main-nav .show>.nav-link{
        color: var(--main-color);
    }

    /*------------------------------------------
        header
    ------------------------------------------*/

    header{
        position: relative;
    }
    .header-main{
        position: relative;
        background-image: url(../img/header.png);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        background-attachment: fixed;
        height: 970px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .header-main::before{
        position: absolute;
        content: "";
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgb(var(--dark-color-2), .45);
        z-index: 1;
    }
    .header-main .container{
        position: relative;
        z-index: 3;
    }
    .header-main .header-main-box .title{
        font-size: 64px;
        line-height: 168px;
        color: var(--white-color);
    }
    .header-main .header-main-box .info{
        font-size: 20px;
        line-height: 60px;
        color: var(--white-color);
    }

    /*------------------------------------------
        section-title
    ------------------------------------------*/

    .section-title{
        margin-block-end: 1rem;
    }
    .section-title .title{
        font-size: 24px;
        line-height: 60px;
        color: var(--dark-color);
        margin: 0;
    }
    .section-title .info{
        font-size: 16px;
        line-height: 40px;
        color: var(--normal-color);
        margin: 2rem 0;
    }

    /*------------------------------------------
        ِAbout Box
    ------------------------------------------*/

    .about-box .title{
        font-size: 40px;
        line-height: 60px;
        color: var(--dark-color);
        margin: 0;
    }
    .about-box .info{
        font-size: 16px;
        line-height: 40px;
        color: var(--normal-color);
        margin: 2rem 0;
    }
    .about-box .read-more{
        color: var(--main-color);
    }
    .about-box .read-more i{
        transition: all .3s ease .1S;
    }
    .about-box .read-more:hover i{
        display: inline-block;
        transform: translateX(-1rem);
    }
    [dir="ltr"] .about-box .read-more i{
        transform: rotate(-180deg);
    }
    [dir="ltr"] .about-box .read-more:hover i{
        transform: translateX(1rem);
    }

    .about-sidebar{
        position: sticky;
        top: 7rem;
        padding: 1.5rem;
        border: 1px solid #CDCFD8;
        border-radius: 14px;
    }

    .about-sidebar .nav{
        flex-direction: column;
    }
    .about-sidebar .nav .nav-link{
        display: flex;
        align-items: center;
        padding: 0 1rem;
        height: 52px;
        line-height: 52px;
        border-radius: var(--radius-md);
        color: var(--dark-color);
        font-size: 16px;
        font-family: "Almarai";
        font-weight: 800;
        margin-bottom: 1rem;
    }

    .about-sidebar .nav .nav-link:hover{
        background-color: rgb(var(--main-color-2), .2);
        color: var(--main-color);
    }
    .about-sidebar .nav .nav-link:focus,
    .about-sidebar .nav .nav-link.active{
        background-color: var(--main-color);
        color: var(--white-color);
    }

    .about-sidebar .nav .nav-link svg path{
        stroke: var(--dark-color);
    }
    .about-sidebar .nav .nav-link:hover svg path{
        stroke: var(--main-color);
    }
    .about-sidebar .nav .nav-link:focus svg path,
    .about-sidebar .nav .nav-link.active svg path{
        stroke: var(--white-color);
    }

    .about-details *{
        color: var(--dark-color);
        line-height: 1.5;
    }

    .accordion-button .no{
        margin-inline-end: 1rem;
    }
    .accordion-button:focus {
        border-color: transparent;
        box-shadow: none
    }
    .accordion-button:not(.collapsed) {
        color: var(--dark-color);
        background-color: transparent;
        box-shadow: none;
    }
    .accordion-button:not(.collapsed) .no{
        color: var(--main-color);
    }

    /*------------------------------------------
        how-used-box
    ------------------------------------------*/

    .how-used-box{
        text-align: center;
    }
    .how-used-box .title{
        font-size: 30px;
        line-height: 60px;
        color: var(--dark-color);
        margin: 0;
    }
    .how-used-box .info{
        font-size: 16px;
        line-height: 30px;
        color: var(--normal-color);
        margin: 2rem 0 3rem;
    }
    .video-box{
        position: relative;
        width: 100%;
        min-height: 450px;
        border-radius: var(--radius-lg);
        overflow: hidden;
    }
    .video-box img{
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .video-box .btn-video{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 126px;
        height: 126px;
        line-height: 126px;
        font-size: 40px;
        text-align: center;
        color: var(--white-color);
        background-color: rgba(255, 255, 255, .15);
        backdrop-filter: blur(5px);
        border-radius: 50%;
    }

    /*------------------------------------------
        blog
    ------------------------------------------*/

    .blog-box{
        display: block;
        position: relative;
        border-radius: var(--radius-md);
        overflow: hidden;
        border: 1px solid #CDCFD8;
        transition: all .3s ease;
        margin-block-end: 1.5rem;
    }
    .blog-box .pic{
        position: relative;
        width: 100%;
        height: 280px;
        overflow: hidden;
        border-radius: var(--radius-md) var(--radius-md) 0 0;
    }
    .blog-box .pic img{
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: all .3s ease;
    }
    .blog-box .content{
        padding: 1rem;
    }
    .blog-box .content .title{
        font-size: 16px;
        line-height: 30px;
        color: var(--dark-color);
        margin-bottom: 1rem;
        height: 60px;
        overflow: hidden;
        transition: all .3s ease;
    }
    .blog-box .content .nav .nav-item{
        display: flex;
        align-items: center;
        color: var(--light-color);
        font-size: 14px;
        margin-inline-end: 1rem;
    }
    .blog-box .content .nav .nav-item:last-child{
        margin-inline-end: 0;
    }

    .blog-box:hover{
        border-color: transparent;
        box-shadow: var(--shadow-hover);
    }
    .blog-box:hover .pic img{
        transform: scale(1.1) rotate(4deg);
        opacity: .85;
    }
    .blog-box:hover .content .title{
        color: var(--main-color);
    }

    /*------------------------------------------
        blog-view-box
    ------------------------------------------*/

    .blog-view-box .title{
        font-size: 30px;
        line-height: 60px;
        color: var(--dark-color);
        margin-bottom: 1rem;
    }
    .blog-view-box .bloger-box{
        display: flex;
        align-items: center;
    }
    .blog-view-box .bloger-box .pic{
        min-width: 60px;
        width: 60px;
        height: 60px;
        border-radius: var(--radius-sm);
        overflow: hidden;
        margin-inline-end: 1rem;
    }
    .blog-view-box .bloger-box .pic img{
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .blog-view-box .bloger-box .name{
        font-size: 16px;
        line-height: 30px;
        color: var(--dark-color);
        margin: 0;
    }
    .blog-view-box .nav .nav-item{
        display: flex;
        align-items: center;
        color: var(--light-color);
        font-size: 14px;
        margin-inline-end: 1rem;
    }
    .blog-view-box .nav .nav-item:last-child{
        margin-inline-end: 0;
    }
    .blog-view-box .video-box{
        min-height: 200px;
    }
    .blog-view-box .blog-view-info{
        margin: 2rem 0;
        font-size: 16px;
        line-height: 30px;
        color: var(--normal-color);
    }

    .blog-comment .blog-comment-box{
        border-bottom: 1px solid rgb(34, 34, 34, .1);
        padding: 2rem 0;
    }
    .blog-comment .blog-comment-box:last-child{
        border-bottom: 0;
    }

    .blog-comment .blog-comment-box .comment-by{
        display: flex;
        margin-bottom: 1rem;
    }
    .blog-comment .blog-comment-box .comment-by .pic{
        min-width: 60px;
        width: 60px;
        height: 60px;
        border-radius: 50%;
        overflow: hidden;
        margin-inline-end: 1rem;
    }
    .blog-comment .blog-comment-box .comment-by .pic img{
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .blog-comment .blog-comment-box .comment-by .content .name{
        font-size: 16px;
        line-height: 30px;
        color: var(--dark-color);
        margin: 0;
    }
    .blog-comment .blog-comment-box .comment-by .content .date{
        font-size: 14px;
        line-height: 30px;
        color: var(--light-color);
        margin: 0;
    }
    .blog-comment .blog-comment-box .comment-text{
        font-size: 16px;
        line-height: 24px;
        color: var(--normal-color);
        margin: 0;
    }
    .blog-comment-form{
        position: relative;
        margin-top: 2rem;
    }
    .blog-comment-form .btn{
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        height: auto;
        line-height: unset;
    }
    [dir="ltr"] .blog-comment-form .btn{
        left: auto;
        right: 0;
    }
    [dir="ltr"] .blog-comment-form .btn img{
        transform: rotate(180deg);
    }
    .blog-comment-form .form-control{
        padding: 0;
        padding-inline-start: 2rem;
        padding-inline-end: 100px;
        border-color: transparent;
        box-shadow: none;
        color: var(--dark-color);
        min-height: 54px;
        padding-top: .75rem;
        background: #EFF3FA;
        border-radius: 37px;
        resize: none;
        overflow: hidden;
        font-family: "Almarai";
        font-weight: 800;
    }
    .blog-comment-form .form-control:focus{
        border-color: var(--main-color);
    }
    .blog-comment-form .form-control::placeholder{
        color: #9093A3;
        font-family: "Almarai";
        font-weight: 800;
    }

    .nav-share{
        position: sticky;
        top: 120px;
    }
    .nav-share .nav-link{
        padding: 0;
        width: 50px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        color: var(--white-color);
        border-radius: 50%;
    }
    .nav-share .nav-link.facebook{
        background-color: var(--facebook);
    }
    .nav-share .nav-link.twitter{
        background-color: var(--twitter);
    }
    .nav-share .nav-link.linkedin{
        background-color: var(--linkedin);
    }
    .nav-share .nav-link.whatsapp{
        background-color: var(--whatsapp);
    }
    .nav-share .nav-link.skype{
        background-color: var(--skype);
    }
    .nav-share .nav-link.telegram{
        background-color: var(--telegram);
    }

    /*------------------------------------------
        application
    ------------------------------------------*/

    .application-box{
        border-radius: var(--radius-lg);
        display: block;
        align-items: center;
        justify-content: space-between;
        padding: 2rem 5%;
        background: rgb(35,144,245);
        background-image: linear-gradient(-90deg, rgba(35,144,245,1) 0%, rgba(65,216,169,1) 100%), url(../img/dots.svg);
    }
    [dir="lrt"] .application-box{
        background-image: linear-gradient(90deg, rgba(35,144,245,1) 0%, rgba(65,216,169,1) 100%), url(../img/dots.svg);
    }
    .application-box .application-box-info{
        width: 100%;
        max-width: 450px;
    }
    .application-box .application-box-info .title{
        color: var(--white-color);
        font-size: 36px;
        line-height: 46px;
        margin: 0;
    }
    .application-box .application-box-info .info{
        color: var(--white-color);
        font-size: 18px;
        line-height: 28px;
        margin: 2rem 0 3rem;
    }
    .application-box .application-box-info .btns{
        display: block;
        align-items: center;
        gap: 2rem;
    }
    .application-box .application-box-info .btns .btn-app{
        display: flex;
        align-items: center;
        border-radius: var(--radius-sm);
        color: var(--white-color);
        background-color: var(--dark-color);
        transition: all .3s ease;
        padding: .5rem 1rem;
        min-width: 160px;
    }
    .application-box .application-box-info .btns .btn-app .icon{
        min-width: 24px;
        height: 24px;
        margin-inline-end: 1rem;
    }
    .application-box .application-box-info .btns .btn-app .content .avilable{
        font-size: 12px;
        color: var(--white-color);
        opacity: .80;
        margin-bottom: 0;
    }
    .application-box .application-box-info .btns .btn-app .content .avilable-in{
        font-size: 16px;
        line-height: 28px;
        color: var(--white-color);
        margin-bottom: 0;
    }

    [dir="ltr"] .application-box .application-pic{
        transform: rotateY(180deg);
    }

    /*------------------------------------------
        owl-partner
    ------------------------------------------*/

    .owl-partner .partner-box{
        display: flex;
        justify-content: center;
        align-items: center;
        min-width: 170px;
        width: 100%;
        height: 70px;
        background-color: #EEEEEE;
        border-radius: 35px;
        overflow: hidden;
        padding: 1rem;
    }
    .owl-partner .partner-box img{
        width: auto;
    }
    .owl-partner .owl-nav {
        margin-top: 0;
        width: calc(100% + 120px);
        display: flex;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        justify-content: space-between;
        z-index: -1;
    }
    .owl-partner .owl-nav [class*=owl-]:hover{
        background-color: transparent;
    }
    [dir="ltr"] .owl-partner .owl-nav .owl-prev,
    [dir="ltr"] .owl-partner .owl-nav .owl-next{
        transform: rotate(-180deg);
    }

    /*------------------------------------------
        Footer
    ------------------------------------------*/

    .footer{
        background-color: var(--black-color);
        padding: 3rem 0;
        color: #fff;
    }
    .footer-box{
        padding: 1rem 0;
    }
    .footer-about{
        font-size: 16px;
        line-height: 24px;
    }
    .footer-title{
        font-size: 16px;
        line-height: 35px;
    }
    .footer .nav-link{
        font-size: 16px;
        color: var(--white-color);
        transition: all .3s ease;
    }
    .footer .footer-social-media .nav-link:hover{
        transform: scale(1.2);
    }
    .footer-list .nav-link:hover{
        color: var(--main-color);
    }
    .footer .footer-list .nav-item{
        width: 50%;
    }
    .copyright{
        margin-top: 3rem;
        padding: 3rem 0 0;
        border-top: 1px solid #454E64 ;
        display: block;
        align-items: center;
        font-size: 14px;
        line-height: 24px;
        display: block;
        align-items: center;
        justify-content: space-between;
    }

    /*------------------------------------------
        Form
    ------------------------------------------*/

    .form .form-group{
        margin-bottom: 1rem;
    }
    .form .form-group .progress {
        height: .25rem;
    }
    .form .form-group .password-verdict {
        display: none;
    }
    .form .form-control{
        min-height: 44px;
        border-top: 0;
        border-right: 0;
        border-left: 0;
        border-radius: 0;
    }
    .form-check-input:checked {
        box-shadow: none;
        background-color: var(--main-color);
        border-color: var(--main-color);
    }
    .form-note{
        color: var(--light-color);
    }
    .form-note a{
        font-weight: 600;
        color: var(--dark-color);
    }

    /*------------------------------------------
        Contact
    ------------------------------------------*/

    @media (min-width: 786px) {
        .contact-info-box{
            display: flex;
            gap: 1rem;
            justify-content: center;
        }
    }

    .contact-info{
        display: flex;
        align-items: center;
        margin-bottom: 1.5rem;
    }
    .contact-info .icon{
        margin-inline-end: 1rem;
    }
    .contact-info .content p{
        margin-bottom: 0;
    }

    /*------------------------------------------
        login
    ------------------------------------------*/

    .profile-login{
        /* padding: 0; */
        background-repeat: no-repeat;
        background-position:  center left;
        background-size: 50%;
    }
    .login-pic{
        position: fixed;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
    }
    .login-pic img{
        max-width: 100%;
        max-height: 100;
    }

    .pincode input{
        border: 1px solid #CDCFD8 !important;
    }
    .pincode input:focus{
        border: 1px solid var(--main-color) !important;
    }
    /*------------------------------------------
        Responsive
    ------------------------------------------*/

    @media (max-width: 1400px){
        .navbar-container .main-nav {
            gap: 1.5rem;
        }
        .profile-login{
            padding: 0 !important;

        }
    }
    @media (max-width: 1200px){
        .profile-login{
            padding: 0 !important;

        }
        .navbar-collapse{
			position: fixed;
            z-index: 9;
        }
		.navbar-collapse.collapsing .navbar-nav {
			display: block;
			position: fixed;
			top: 0;
			bottom: 0;
			left: -300px;
			transition: all 0.2s ease;
			justify-content: start !important;
			height: 100%;
			overflow-y: scroll;
		}
        .navbar-container .main-nav{
            gap: 0;
        }
		.navbar-collapse.show .navbar-nav {
			background-color: #fff;
			position: fixed;
			top: 0;
			bottom: 0;
			left: 0;
			flex-direction: column;
			height: auto;
			width: 300px;
			padding: 1rem;
			transition: left 0.35s ease;
			box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.15);
			z-index: 99;
            overflow-y: scroll;
		}

		[dir="rtl"] .navbar-collapse.collapsing .navbar-nav {
			left: auto;
			right: -300px;
		}
		[dir="rtl"] .navbar-collapse.show .navbar-nav {
			left: auto;
			right: 0;
			transition: right 0.35s ease;
		}
		.navbar-collapse.show .navbar-nav .nav-link{
            font-family: "Almarai";
            font-weight: 800;
			color: var(--dark-color);
			font-size: 16px;
			padding: 1rem;
			border-bottom: 1px solid #f1f1f1;
		}
		.navbar-collapse.show .navbar-nav .nav-link.active{
			color: var(--main-color);
		}
		.navbar-collapse.show .navbar-nav li:last-child .nav-link{
			border-bottom: none;
		}
        .header-main .header-main-box .title{
            font-size: 60px;
            line-height: 120px;
        }
        .header-main{
            height: 700px;
        }
    }
    @media (max-width: 1024px) {

    }
    @media (max-width: 992px){
    }
    @media (max-width: 780px) {
    }
    @media (max-width: 600px) {
    }
    @media (max-width: 420px) {
        .btn{
            padding: 0px 1rem;
        }
        section{
            padding: 3rem 0;
        }
        .navbar-container{
            display: block;
        }
        .navbar-container .navbar-action{
            display: flex;
            width: 100%;
            justify-content: space-evenly;
        }
        .header-main .header-main-box .title{
            font-size: 32px;
        }
        .pincode input {
            width: 35px;
            height: 35px;
            font-size: 20px;
        }
        #img_mobile{
            display: block !important;
        }
        #img_mobile img{
            width: 35%;
        }
        .section-title .title {
            font-size: 24px;
            line-height: 40px;
        }



    }

    @media (min-width: 768px) {
        .animate {
          animation-duration: 0.3s;
          -webkit-animation-duration: 0.3s;
          animation-fill-mode: both;
          -webkit-animation-fill-mode: both;
        }

    }
    @keyframes slideIn {
        0% {
          transform: translateY(2rem);
          opacity: 0;
        }

        100% {
          transform: translateY(0rem);
          opacity: 1;
        }

        0% {
          transform: translateY(2rem);
          opacity: 0;
        }
      }

      @-webkit-keyframes slideIn {
        0% {
          -webkit-transform: transform;
          -webkit-opacity: 0;
        }

        100% {
          -webkit-transform: translateY(0);
          -webkit-opacity: 1;
        }

        0% {
          -webkit-transform: translateY(2rem);
          -webkit-opacity: 0;
        }
      }

    .slideIn {
        -webkit-animation-name: slideIn;
        animation-name: slideIn;
    }


.upDown {
    -webkit-animation: upDown-animation 2s infinite  alternate;
    animation: upDown-animation 2s infinite  alternate;
}

@keyframes upDown-animation {
    0% { transform: translateY(0); }
    100% { transform: translateY(-1rem); }
}
.mb-4 {
    margin-bottom: 1.4rem!important;
}

.form-control {

    padding: 0.2rem 0.75rem;
    font-size: 14px;
}
.invalid-feedback {

    font-size: 12px;
}
.form-label {
    font-size: 15px;
}

.form-control:focus {
    border-bottom: 1px solid var(--main-color) !important;
    box-shadow: none !important;
}


.input-container{
	position:relative;
	margin-bottom:25px;
}
.input-container label{
	position:absolute;
	top:0px;
	right:0px;
	font-size:16px;
	color:#222;
    pointer-event:none;
	transition: all 0.2s ease-out;
}
.input-container input{
  border:0;
  border-bottom:1px solid #CDCFD8 ;
  background:transparent;
  width:100%;
  padding:8px 0 5px 0;
  font-size:14px;
  color:#000;
}
.input-container input:focus{
 border:none;
 outline:none;
 border-bottom:1px solid  #2390F5 ;
}

.input-container input:focus ~ label,
.input-container input:valid ~ label{
	top:-12px;
	font-size:12px;
}