@font-face {
        font-family: "black";
        src: url("../font/DINNextLTArabic-Black.ttf") format("truetype")
    }
    @font-face {
        font-family: "bold";
        src: url("../font/DINNextLTArabic-Bold.ttf") format("truetype")
    }
    @font-face {
        font-family: "heavy";
        src: url("../font/DINNextLTArabic-Heavy.ttf") format("truetype")
    }
    @font-face {
        font-family: "medium";
        src: url("../font/DINNextLTArabic-Medium.ttf") format("truetype")
    }
    @font-face {
        font-family: "regular";
        src: url("../font/DINNextLTArabic-Regular.ttf") format("truetype")
    }
    @font-face {
        font-family: "ultralight";
        src: url("../font/DINNextLTArabic-UltraLight.ttf") format("truetype")
    }
    @font-face {
        font-family: "light";
        src: url("../font/DINNEXTLTARABIC-LIGHT.ttf") format("truetype")
    }

    :root{
        --main-color : #2062AE; 
        --second-color : #0F2A4E;
        --normal-color: #747474;
        --light-color: #D2D2D2;
    }
    h1, h2 ,h3 ,h4 ,h5, h6{
        font-family: 'bold', sans-serif;
    }
    html, body { 
        font-family: 'medium', sans-serif;
        font-weight: 400;
        font-size: 16px;
        line-height: 1.5;
        color: var(--normal-color);
    }
    a{
        color: var(--normal-color);
    }
    a,a:hover {
        text-decoration: none;
        color: #2062AE;
    }
    section{ 
        position: relative;
        padding: 5rem 0;
    }
    .text-primary{
        color: var(--main-color) !important;
    }
    .text-dark{
        color: var(--second-color) !important;
    }

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

	.btn{ 
		position: relative;
		overflow: hidden; 
        padding: 0 2rem;
        font-family: 'medium', sans-serif; 
        min-width: 150px;
        height: 50px; 
        line-height: 45px; 
        border-radius: 25px;
		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-lang{
        min-width: 50px;
        width: 50px;
        height: 50px;
        text-align: center;
    }
    .btn-remove{
        width: 40px;
        height: 40px;
        line-height: 35px;
        text-align: center;
        border-radius: 50%;
    }
    .btn-primary{
        background-color: #2062AE;
        border-color: #2062AE;
    }
    .btn-primary:hover,
    .btn-primary:focus{
        background-color: var(--main-color-hover) !important;
        border-color: var(--main-color-hover) !important;
    } 
    .btn-light{
        background: #fff;
        border-color: var(--normal-color);
        color: var(--normal-color);
    }
    .btn-light:hover,
    .btn-light:active{
        background: var(--normal-color);
        border-color: var(--normal-color);
        color: #fff;
    }
    
    .btn-dark{
        background: var(--second-color);
        border-color: var(--second-color);
        color: #fff;
    } 
    .btn-dark:hover,
    .btn-dark:active{
        background: #2062AE;
        border-color: #2062AE;
    } 
    .btn-outline-dark{
        background-color: transparent;
        border-color: var(--second-color);
        color: var(--second-color);
    }
    .btn-outline-dark:hover,
    .btn-outline-dark:active{
        background-color: var(--second-color); 
        color: #fff;
    }
    .btn-outline-light{
        background-color: transparent;
        border-color: #fff;
        color: #fff;
    }
    .btn-outline-light:hover,
    .btn-outline-light:active{
        background-color: #fff; 
        color: var(--second-color);
    }
    
    .menu-btn{
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 80px;
        height: 80px;
        cursor: pointer;
        transition: all 0.5s ease-in-out;
        overflow: hidden;
    }
    .menu-btn .menu-btn-burger{
        width: 30px;
        height: 3px;
        background-color: var(--second-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(--second-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{
        position: sticky;
        top: 0;
        padding: 0;
        z-index: 999;
        background: #fff; 
        box-shadow: 0px 3px 6px #00000029;
    }
    .navbar-container{
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: 1rem 0 ;
    }
    .navbar-container .logo{
        width: 100px; 
    } 
    .navbar-container .main-nav .nav-link{
        color: var(--second-color);
        position: relative;
        padding: .5rem 1.5rem 1rem !important;
        font-family: "medium";
        font-size: 18px;
        text-transform: uppercase;
    }
    .navbar-container .main-nav .nav-link::before{
        position: absolute;
        content: "";
        width: 0;
        height: 2px;
        background-color: #2062AE;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        transition: all .35s ease;
    }
    .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);
    }
    .navbar-container .main-nav .nav-link:hover::before,
    .navbar-container .main-nav .nav-link.active::before,
    .navbar-container .main-nav .show>.nav-link::before{ 
        width: 30px;
    } 
    .navbar-container .navbar-option{
        display: flex;
        align-items: center;
    }
    .navbar-container .navbar-option .btn-dark{
        height: 40px;
        line-height: 35px;
    }
    .navbar-container .navbar-option .menu-btn{
        display: none;
    }
    .dropdown-menu{
        min-width: 200px;
        border-color: rgb(95 34 223 / 5%);
        padding: 1rem 0;
        box-shadow: 0 3px 10px rgb(95 34 223 / 5%);
        margin-top: 1rem;
    } 
    .dropdown-item {
        padding: .75rem 1rem;
    } 

    /*------------------------------------------
        header
    ------------------------------------------*/
    
    header{
        position: relative; 
    }
    .owl-box{
        position: relative; 
        width: 100%;
        height: 750px;
        overflow: hidden;
    }
    .owl-box::before{ 
        position: absolute;
        content: "";
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background-color: var(--second-color);
        opacity: .54;
    } 
    .owl-box img{
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: top;
    }
    .owl-box .owl-box-content{
        position: absolute;
        top: 50%;
        right: 0;
        display: block;
        width: 100%;
        transform: translateY(-50%);
    }
    .owl-box .header-box .title{
        color: #fff;
        font-family: "bold";
        font-size: 75px;
        line-height: 1.5;
        margin-bottom: 3rem;
    }

    .owl-theme .owl-nav.disabled+.owl-dots {
        position: absolute;
        bottom: 1rem;
        left: 50%;
        transform: translateX(-50%);
    }
    .owl-theme .owl-dots .owl-dot span { 
        background: var(--light-color);
        border: 1px solid var(--light-color);
        transition: all .3s ease;
        width: 20px;
        height: 20px;
    }
    .owl-theme .owl-dots .owl-dot.active span,
    .owl-theme .owl-dots .owl-dot:hover span {
        background: var(--main-color);
        border: 1px solid var(--main-color);
        width: 60px;
    } 

    
    .header-sub{
        width: 100%;
        height: 300px;
        position: relative;
        background-image: url(../img/header.png);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        display: flex;
        align-items: center;
    } 
    .header-sub::before{ 
        position: absolute;
        content: "";
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background-color: var(--second-color);
        opacity: .54;
    } 
    .header-sub-box{
        position: relative;
        z-index: 1;
        text-align: center;
    }
    .header-sub-box .bg-header-sub{
        position: absolute;
        top: 0;
        right: 0;
    }
    [dir="ltr"] .header-sub-box .bg-header-sub{ 
        right: auto;
        left: 0;
        transform: rotateY(180deg);
    }
    .header-sub-box .title{
        font-size: 30px;
        font-family: "medium";
        margin-bottom: 2rem;
        color: #F1F2F3;
    }
    .header-sub-box .breadcrumb{
        margin-bottom: 0;
        justify-content: center;
    }
    .breadcrumb-item+.breadcrumb-item::before, 
    .header-sub-box .breadcrumb .breadcrumb-item{
        color: #F1F2F3;
        font-family: "regular";
    }
    
    .breadcrumb-item+.breadcrumb-item::before{
        font-family: "Font Awesome 5 Free";
        font-weight: 900; 
        line-height: 30px;
        content: "\f100";
    }
    [dir="ltr"] .breadcrumb-item+.breadcrumb-item::before{
        content: "\f101";
    }

    /*------------------------------------------
        title-section
    ------------------------------------------*/
    
    .title-section {
        margin-bottom: 4rem;
    }
    .title-section .title{
        font-size: 28px; 
        color: var(--second-color);
        font-family: "bold";
    }
    .title-section .info{
        font-size: 16px;
        color: var(--light-color);
        font-family: "regular";
    }
    
    /*------------------------------------------
        about-box
    ------------------------------------------*/
    
    .about-box .title{
        font-size: 30px;
        color: var(--second-color);
        margin-bottom: 2rem;
        font-family: "medium";
    }
    .about-box .info{
        font-size: 18px;
        line-height: 2;
        font-family: "regular";
    }
    .about-box ul,
    .about-box ol{
        padding: 0;
        list-style: none;
        font-size: 18px;
        line-height: 2;
        font-family: "regular";
    }

    .about-box-content{
        position: relative;
        margin-bottom: 2rem;
        background-color: var(--second-color);
        color: var(--light-color);
        padding: 3rem;
        border-radius: 17px;
    }
    .about-box-content .about-icon{
        position: absolute;
        left: .5rem;
        bottom: .5rem;
    }
    [dir="ltr"] .about-box-content .about-icon{ 
        left: auto; 
        right: .5rem;
        transform: rotateY(-180deg);
    }
    .about-box-content .title{
        font-size: 30px;
        line-height: 0;
        margin-bottom: 2rem;
        color: #fff;
        font-family: "medium";
    }
    .about-box-content .info{
        font-size: 18px;
        line-height: 2;
        font-family: "regular";
        margin-bottom: 0;
    }

    /*------------------------------------------
        Services
    ------------------------------------------*/
    .service-section{
        position: relative;
    }
    .service-section .section-pic{
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        z-index: -1;
    }
    [dir="ltr"] .service-section .section-pic{
        left: auto;
        right: 0;
        transform: rotateY(-180deg);
    }
    .service-box{
        position: relative;
        padding: 2rem;
        text-align: center;
        border: 1px solid #F1F2F3;
        border-radius: 8px;
        margin-bottom: 2rem;
        transition: all 0.3s ease;
    }
    .service-box .icon{ 
        width: 76px;
        height: 76px;
        line-height: 70px;
        text-align: center;
        border-radius: 50%;
        overflow: hidden;
        margin: 0 auto 2rem;
        background-color: #F1F2F3;
        transition: all 0.5s ease;
    }
    .service-box .icon img{
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .service-box .content .title{
        font-size: 22px;
        color: var(--second-color);
        margin-bottom: 1rem;
        transition: all 0.5s ease;
    }
    .service-box .content .info{
        font-size: 16px;
        color: var(--normal-color);
        font-family: "regular";
    }
    .service-box .content .btn{
        min-width: 68px;
        height: 40px;
        line-height: 35px;
        margin: auto;
        color: #F1F2F3;
        border-color: #F1F2F3;
        background-color: transparent; 
        position: absolute; 
        opacity: 0;  
        transform: translateY(-3rem);
        transition: all 0.7s ease;
    }
    .service-box:hover{
        background-color: var(--second-color);
        box-shadow: 0 1rem 3rem rgba(0,0,0,.175) ;
        transform: translateY(-.5rem);
    }
    .service-box:hover .content .title,
    .service-box:hover .content .info{
        color: #fff;
    }
    .service-box:hover .content .btn{
        position: relative;
        opacity: 1;
        transform: translateY(0);
    }
    
    /*------------------------------------------
        Team-section
    ------------------------------------------*/

    .team-section{
        position: relative;
        background-color: var(--second-color);
    }
    .team-box{
        display: block;
        position: relative;
        margin-bottom: 2rem;
        transition: all .3s ease-in-out;
    }
    .team-box .pic{
        position: relative;
        max-width: 227px;
        width: 100%;
        height: 250px;
        overflow: hidden;
        border-radius: 6px;
        margin: auto;
        background-color: var(--second-color);
    }
    .team-box .pic .team-pic{
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: top;
        transition: all .3s ease-in-out;
    }
    .team-box:hover .pic .team-pic{
        opacity: .5;
        transform: scale(1.1);
    } 
    .team-box .pic .team-icon{
        position: absolute;
        top: 1rem;
        left: -100%;
        opacity: 0;
        transform: rotate(-180deg);
        transition: all .5s ease-in-out;
    }
    .team-box:hover .pic .team-icon{ 
        left: 1rem;
        opacity: 1;
        transform: rotate(0);
        z-index: 1;
    }
    .team-box .pic span{
        position: absolute;
        opacity: 0;
        bottom: -1rem;
        left: 50%;
        transform: translateX(-50%);
        color: #F1F2F3;
        border: 1px solid #F1F2F3;
        background-color: transparent;
        min-width: 150px;
        height: 40px;
        line-height: 35px;
        border-radius: 30px;
        text-align: center;
        font-family: "regular";
        transition: all .3s ease-in-out;
    } 
    .team-box .pic span:hover{
        color: var(--second-color);
        background-color: #F1F2F3; 
    } 
    .team-box:hover .pic span{
        bottom: 1rem;
        opacity: 1;
    }
    .team-box .content{
        padding: 1rem;
        color: #fff;
        text-align: center;
    } 
    .team-box .content .title{
        font-size: 20px;
    } 
    .team-box .content .info{
        font-size: 16px;
        font-family: "regular";
        color: var(--light-color);
    } 

    .team-inner-section{
        background-color: transparent;
    }
    .team-inner-section .team-box .title{
        color: var(--second-color);
    }
    .team-inner-section .team-box .info{
        color: var(--main-color);
    }
    .team-view .section-pic{
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        z-index: -1;
    }
    [dir="ltr"] .team-view .section-pic{
        left: auto;
        right: 0;
        transform: rotateY(-180deg);
    }
    .team-view .team-box{
        max-width: 260px;
        padding: 1rem;
        background-color: #F1F2F3;
    }
    .team-view .team-box .content .title{
        margin-bottom: 1rem;
    }
    .team-view .team-box .content .btn{
        height: 40px;
        line-height: 35px;
    }
    .team-view .team-details{
        width: 100%;
    }
    .team-view .team-details .title{
        font-size: 26px; 
        color: var(--second-color);
    }
    .team-view .team-details .info{
        font-size: 18px;
        color: var(--normal-color);
        line-height: 2;
        font-family: "regular";
    }

    /*------------------------------------------
        Branch
    ------------------------------------------*/

    .branch-section{
        position: relative;
        padding-top: 8rem;
        padding-bottom: 2rem;
    }
    .branch-section .section-pic{
        position: absolute;
        top: 50%;
        right: 0; 
        transform: rotateY(-180deg) translateY(-50%);
        z-index: -1;
    }
    [dir="ltr"] .branch-section .section-pic{
        right: auto;
        left: 0;
        transform: rotateY(0) translateY(-50%);
    }
    .branch-box{
        padding: 1rem 0;
        background-color: #fff;
    }
    .branch-box .title{
        color: var(--main-color);
        font-family: "medium";
        font-size: 20px;
        margin-bottom: 1rem;
    }
    .branch-box .nav-branch .nav-link {
        color: var(--normal-color);
        font-size: 18px;
        padding: .5rem;
        font-family: "regular";
    }
    .branch-box .nav-branch .nav-link i{
        color: var(--light-color);
    }
    .branch-box .nav-branch .nav-link:hover{
        color: var(--second-color);
    }
    .branch-box .nav-branch .nav-link:hover i{
        color: var(--main-color);
    }
    .form-box{
        position: relative;
        padding: 2rem;
        box-shadow: 0px 3px 6px #00000029;
        border: 1px solid #F1F2F3;
        border-radius: 20px; 
        margin-bottom: -5rem;
        background-color: #fff;
        z-index: 2;
    }
    .form-box .title-section{
        position: relative;
    }
    .form-box .title-section .title{
        position: relative;
        font-family: "medium";
    }
    .form-box .title-section .hr-dark{
        position: absolute;
        top: 50%;
        right: -2rem;
        transform: rotate(90deg) translateY(-50%);
    }
    [dir="ltr"] .form-box .title-section .hr-dark{
        right: auto;
        left: -2rem; 
    }
    .form-box .title-section .bg-form-box{
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
    }
    [dir="ltr"] .form-box .title-section .bg-form-box{
        left: auto;
        right: 0;
        transform: rotateY(-180deg) translateY(-50%);
    }
    .form-box .form-group{
        margin-bottom: 2rem;
    }
    .form-box .form-group label{
        color: var(--second-color);
        font-size: 18px;
        margin-bottom: 1rem;
        font-family: "medium";
    }
    .form-box .form-group .form-control{
        border-radius: 50px;
        min-height: 52px;
        border-color: #F1F2F3;
        background-color: #F1F2F3;
        color: #96989D;
        box-shadow: none;
        outline: none;
    }
    .form-box .form-group textarea.form-control{
        border-radius: 20px;
    }
    .form-box .form-group .form-control:focus{
        border-color: #96989D;
    }
    .form-box .form-group .form-control::placeholder{
        color: #96989D;
    }

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

    .footer{
        position: relative;
        padding: 3rem 0;
        background-color: var(--second-color);
    }
    .footer-custom{
        padding: 5rem 0 2rem;
    } 
    .footer .section-pic{
        position: absolute; 
        bottom: 0;
        right: 0; 
        z-index: 0;
    }
    [dir="ltr"] .footer .section-pic{
        left: 0;
        right: auto;
        transform: rotateY(-180deg);
    }
    .footer .footer-link .nav-link{
        color: #F1F2F3;
        font-family: "regular";
    }
    .footer .footer-link .nav-link:hover{
        color: var(--main-color); 
    }
    .logo-box .logo{
        margin-bottom: 2rem;
    }
    .logo-box .info{
        font-family: "regular";
        color: #F1F2F3;
        margin-bottom: 2rem;
        line-height: 2;
    }
    .contact-us-box .title{
        font-size: 20px;
        font-family: "regular";
        color: #F1F2F3;
        margin-bottom: 2rem;
        text-align: center;
    }
    .contact-us-box .nav .nav-link{
        color: #F1F2F3;
        padding: 0;
        width: 60px;
        height: 40px;
        line-height: 40px;
        font-size: 20px; 
        text-align: center;
        transition: all .3s ease;
    }
    .contact-us-box .nav .nav-link:hover{
        color: #00a2ff;
        transform: scale(1.1);
    }
    .copyright{
        padding-top: 2rem;
        border-top: 1px solid rgb(212, 212, 212, .15); 
    }
    .copyright .title{
        display: flex;
        justify-content: center;
        align-items: center;
        font-family: "regular";
        color: #F1F2F3;
        margin-bottom: 0;
    }

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

    .contact-section {
        position: relative;
    }
    .contact-section .form-box{ 
        border: 1px solid #F1F2F3;
        border-radius: 20px;
        margin: 0;
        box-shadow: none;
        padding: 5%;
        margin-bottom: 10rem;
    }
    .contact-section .branch-overlay{
        position: relative;
    }
    .contact-section .branch-overlay::before{
        position: absolute;
        content: "";
        width: 80%;
        height: 100%;
        top: 0%;
        right: 0;
        background-color: #F1F2F3; 
        border-radius: 20px;
        z-index: -1;
    }
    [dir="ltr"] .contact-section .branch-overlay::before{
        right: auto;
        left: 0;
    }
    .contact-section .branch-container{
        padding: 10%;
    }
    .contact-section .branch-container .branch-box{
        background-color: transparent;
        position: relative;
        padding: 0;
        padding-right: 2rem;
        margin-bottom: 2rem;
    } 
    [dir="ltr"] .contact-section .branch-box{
        padding-right: 0;
        padding-left: 2rem; 
    }
    
    .contact-section .branch-container .branch-box::before,
    .contact-section .branch-container .branch-box::after{
        position: absolute;
        content: "";
        width: 2px;
        height: 100%;
        top: 0;
        right: 0;
        background-color: #D4D4D4;
        z-index: 0;
    } 
    .contact-section .branch-container .branch-box::before{ 
        height: 30px;
        background-color: var(--second-color);
        z-index: 1;
    } 
    
    [dir="ltr"] .contact-section .branch-container .branch-box::before,
    [dir="ltr"] .contact-section .branch-container .branch-box::after{ 
        right: auto;
        left: 0;
    } 
    
    .contact-section .branch-container .branch-box .title,
    .contact-section .branch-container .branch-box .nav i{
        color: var(--second-color);
    } 
    
    .contact-section .branch-container .branch-box .nav .nav-link{
        font-size: 16px;
    }
    
    .contact-section .branch-container .branch-box:hover .title{
        color: var(--main-color);
    } 
    
    .contact-section .branch-container .branch-box:hover::before{  
        background-color: var(--main-color); 
    }
    .branch-map{
        width: 100%;
        height: 500px;
        border-radius: 14px;
        overflow: hidden;
    }

    /*------------------------------------------
        booking-section
    ------------------------------------------*/ 
    
    .booking-section .section-pic{
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        z-index: -1;
    }
    [dir="ltr"] .booking-section .section-pic{
        left: auto;
        right: 0;
        transform: rotateY(-180deg);
    }
    .booking-box{
        position: relative;
        padding: 5% 10%;
        background-color: var(--second-color);
        border-radius: 17px;
    }
    .booking-box .title-section .title{
        color: #F1F2F3;
        font-family: "medium";
    }
    .booking-box .form-group{
        margin-bottom: 2rem;
    }
    .booking-box .form-group label{
        color: #F1F2F3;
        font-size: 18px;
        margin-bottom: 1rem;
        font-family: "medium";
    }
    .booking-box .form-group .form-control{
        border-radius: 50px;
        min-height: 52px;
        border-color: #5c6071;
        background-color: #5c6071;
        color: #F1F2F3;
        box-shadow: none;
        outline: none;
    }
    .booking-box .form-group textarea.form-control{
        border-radius: 20px;
    }
    .booking-box .form-group .form-control:focus{
        border-color: #96989D;
    }
    .booking-box .form-group .form-control::placeholder{
        color: #96989D;
    }

    .phone-box-input{
        position: relative;
        border-radius: 15px;
    }
    .phone-box-input .form-control{
        padding-left: 120px !important;
        font-family: "medium";
    }
    .phone-box-input .country-box{
        position: absolute;
        top: 1px;
        left: 2px;
        background: #5c6071;
        color: #96989D;
        height: 50px;
        padding: 1rem;
        direction: ltr;
        display: flex;
        align-items: center;
        border-radius: 50px 0 0 50px;
        font-family: "medium";
        border-right: 1px solid #96989D;
    }

    .form-check-input {
        width: 1.2em;
        height: 1.2em;
        margin-top: .35em;
        border-color: #96989d;
        background-color: transparent;
    }
    .form-check-input:checked {
        background-color: #96989d;
        border-color: #96989d;
        box-shadow: none;
        outline: none;
    }
    .form-check-input:focus {
        border-color: #96989d;
        outline: 0;
        box-shadow: 0 0 0 0.25rem rgb(#96989d / 25%);
    }
    .booking-box .bg-booking{
        position: absolute;
        bottom: 0;
        left: 0;  
    }
    [dir="ltr"] .booking-box .bg-booking{
        left: auto;
        right: 0;
        transform: rotateY(-180deg);
    }

    .career-list-condition {
        margin-bottom: 2rem;
    }
    .career-list-condition .title{
        font-size: 18px;
        color: var(--second-color);
        font-family: "medium";
    }
    .career-list-condition ul li,
    .career-list-condition .info{
        font-size: 14px;
        color: var(--normal-color);
        font-family: "regular";
    }

    .career-box{
        padding: 5% 10%;
    }
    .career-box .phone-box-input .country-box { 
        background: #e1e1e1;
        border: none
    }

    
	.inputfile {
		width: 0.1px;
		height: 0.1px;
		opacity: 0;
		overflow: hidden;
		position: absolute;
		z-index: -1;
	} 
	.btn-upload{
        width: 100%;
        background: #fff;
		border: 1px dashed var(--second-color);
		color: var(--second-color);
	}
	.btn-upload:hover,
	.btn-upload:focus{
		background: var(--second-color) !important;  
		color: #fff !important;
	}
	.btn-upload:hover svg line,
	.btn-upload:focus  svg line,
	.btn-upload:hover svg path,
	.btn-upload:focus  svg path{ 
		stroke: #fff !important; 
	}

    /*------------------------------------------
        Responsive
    ------------------------------------------*/ 
 
    @media (max-width: 1200px) {
    }
    @media (max-width: 1024px) { 
        .owl-box{
            height: 600px; 
        } 
        .owl-box .owl-box-content .title{
            font-size: 50px;
            color: #fff;
        }
        .owl-theme .owl-dots .owl-dot span {
            width: 15px;
            height: 15px;
        }
        .owl-theme .owl-dots .owl-dot.active span {
            width: 30px; 
        }
        .branch-box .title { 
            margin-bottom: 1rem;
        }
        .branch-box .nav-branch .nav-link { 
            font-size: 14px;
        }
    }
    @media (max-width: 992px) {
        .navbar-container .navbar-option .menu-btn {
            display: flex;
        }
		.navbar-collapse.collapsing .navbar-nav {
			display: block;
			position: fixed;
			top: 0;
			bottom: 0;
			right: -300px;
			transition: all 0.2s ease; 
			justify-content: start !important;  
			height: 100%;
			overflow-y: scroll;
		} 
		.navbar-collapse.show .navbar-nav {
			background-color: #fff;
			position: fixed;
			top: 0;
			bottom: 0;
			right: 0;
			flex-direction: column;
			height: auto;
			width: 300px; 
			padding: 1rem;
			transition: right 0.35s ease;
			box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
			z-index: 99999999;
            overflow-y: scroll;
		} 
		.navbar-collapse.show .navbar-nav .nav-link{ 
			font-size: 16px;
			padding: 1rem !important;
			border-bottom: 1px solid #f1f1f1;
		}  
		.navbar-collapse.show .navbar-nav .nav-link::before{
			display: none;
		} 
		.navbar-collapse.show .navbar-nav li:last-child .nav-link{
			border-bottom: none;
		}
		[dir="ltr"] .navbar-collapse.collapsing .navbar-nav { 
			right: auto;
            left: -300px;
        }
		[dir="ltr"] .navbar-collapse.show .navbar-nav { 
			right: auto;
            left: 0;
        }
        .footer{
            text-align: center;
        }
        .contact-us-box{
            margin-top: 2rem;
            margin-bottom: 2rem;
        }
        .branch-overlay::before{
            display: none;
        }
        .contact-section .form-box{
            margin-bottom: 3rem;
        }
    }
    @media (max-width: 780px){
        .service-box { 
            padding: 1rem;
        }
        .service-box .content .title{ 
            font-size: 18px;
        }
        .service-box .content .info{ 
            font-size: 14px;
        }
        .booking-box .form-group label{ 
            font-size: 14px;
        }
    }
    @media (max-width: 600px) {
    }
    @media (max-width: 420px) {
        .navbar-option .btn:not(.btn-lang){ 
            min-width: 100px;
            height: 40px;
            line-height: 33px;
            font-family: "regular";
            padding: 0 1rem;
        }
        .navbar-option .btn-lang {
            min-width: 50px;
            width: 50px;
            height: 40px;
            line-height: 35px;
            padding: 0;
        }
        .navbar-option .menu-btn {
            width: 40px;
            height: 40px;
        }
        .owl-box {
            height: 500px;
        }
        .owl-box .owl-box-content{
            text-align: center;
        }
        .owl-box .owl-box-content .title {
            font-size: 42px;
        }
        .owl-theme .owl-dots .owl-dot span {
            width: 10px;
            height: 10px;
        }
        .owl-theme .owl-dots .owl-dot.active span {
            width: 25px;
        }
        .form-box { 
            padding: 1rem;
        }
        .footer .section-pic { 
            opacity: .2;
        } 
        .header-sub-box .bg-header-sub{
            width: 50px;
        }
    }
    

    @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(1rem);
          opacity: 0;
        }
      
        100% {
          transform: translateY(0rem);
          opacity: 1;
        }
      
        0% {
          transform: translateY(1rem);
          opacity: 0;
        }
    }
    @-webkit-keyframes slideIn {
        0% {
          -webkit-transform: transform;
          -webkit-opacity: 0;
        }
      
        100% {
          -webkit-transform: translateY(0);
          -webkit-opacity: 1;
        }
      
        0% {
          -webkit-transform: translateY(1rem);
          -webkit-opacity: 0;
        }
    }
      
    .slideIn {
        -webkit-animation-name: slideIn;
        animation-name: slideIn;
    }

    /*--------------------------------------------------
        Select 2
    --------------------------------------------------*/
    .select2-container--bootstrap-5 {
        width: 100% !important;
    }
   .select2-container--bootstrap-5 .select2-selection{ 
        border-radius: 50px !important;
        height: 50px;
        border-color: #F1F2F3;
        background-color: #F1F2F3;
        color: #96989D;
        box-shadow: none;
        outline: none;
    } 
    .select2-container--bootstrap-5.select2-container--focus .select2-selection,
    .select2-container--bootstrap-5.select2-container--open .select2-selection {
        border-color: #96989d;
        box-shadow: none;
    }
    .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered{
        color: #96989D !important;
        line-height: 35px;
    } 
    .select2-container--bootstrap-5.select2-container--open.select2-container--below .select2-selection {
        border-bottom: 1px solid #96989D;
        border-bottom-right-radius: 50px;
        border-bottom-left-radius: 50px;
    }
    .select2-container--bootstrap-5 .select2-dropdown.select2-dropdown--below { 
        margin-top: 1rem;
        background: #f1f2f3; 
        border-color: #f1f2f3;
        border-radius: 10px;
        font-family: "regular";
    }
    .select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option{
        border: none;
        border-right: 2px solid transparent;
        font-family: "regular";
    }
    [dir="ltr"] .select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option{
        border: none;
        border-left: 2px solid transparent;
    }
    .select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--disabled,
    .select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option[aria-disabled="true"] {
        color: #747474;
        font-family: "regular";
    }
    .select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--highlighted,
    .select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--selected,
    .select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option[aria-selected="true"] {
        color: var(--second-color);
        background-color: transparent;
        border-color: var(--second-color);
    } 

    /*
        Booking select 2 
    */
   
    .booking-box .select2-container--bootstrap-5 .select2-selection{ 
        border-radius: 50px;
        height: 50px;
        border-color: #5C6071;
        background-color: #5C6071;
        color: #96989D;
        box-shadow: none;
        outline: none;
    } 
    .booking-box .select2-container--bootstrap-5.select2-container--focus .select2-selection,
    .booking-box .select2-container--bootstrap-5.select2-container--open .select2-selection {
        border-color: #96989d;
        box-shadow: none;
    }
    .booking-box .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered{
        color: #F1F2F3 !important;
        line-height: 35px;
    } 
    .booking-box .select2-container--bootstrap-5.select2-container--open.select2-container--below .select2-selection {
        border-bottom: 1px solid #96989D;
        border-bottom-right-radius: 50px;
        border-bottom-left-radius: 50px;
    }
    .select2-container--bootstrap-5.select2-booking .select2-dropdown.select2-dropdown--below {
        background: #5C6071 !important; 
        border-color: #5C6071 !important;
        border-radius: 10px;
    }
    .select2-container--bootstrap-5.select2-booking .select2-dropdown .select2-results__options .select2-results__option{
        color: #D4D4D4;
        border: none;
        border-right: 2px solid transparent;
    }
    [dir="ltr"] .select2-container--bootstrap-5.select2-booking .select2-dropdown .select2-results__options .select2-results__option{
        border: none;
        border-left: 2px solid transparent;
    }
    .select2-container--bootstrap-5.select2-booking .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--disabled,
    .select2-container--bootstrap-5.select2-booking .select2-dropdown .select2-results__options .select2-results__option[aria-disabled="true"] {
        color: #D4D4D4;
    }
    .select2-container--bootstrap-5.select2-booking .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--highlighted,
    .select2-container--bootstrap-5.select2-booking .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--selected,
    .select2-container--bootstrap-5.select2-booking .select2-dropdown .select2-results__options .select2-results__option[aria-selected="true"] {
        color: #F1F2F3;
        background-color: transparent;
        border-color: #F1F2F3;
    }

    .hide{ display: none}

    /******* used for whatsapp icon *********/
.whats-app {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 40px;
    right: 15px;
    background-color: #25d366;
    color: #FFF;
    border-radius: 50px;
    text-align: center;
    font-size: 30px;
    box-shadow: 2px 2px 3px #999;
    z-index: 100;
}

.whats-app:hover {
    color: white;
}

.my-float {
    margin-top: 16px;
}

.health_programs .nav-subscrip {
    flex-wrap: nowrap;
    overflow-x: auto;
}
.health_programs .nav-subscrip .c_week {
    text-align: center;
}

@media (max-width: 600px) {
    .health_programs .nav-subscrip {
        flex-wrap: wrap !important;
        overflow: hidden;
        height: 50px;
    }
}