@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 "https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css";
    @import "../css/choices.min.css";
    @import "../css/owl.carousel.min.css";
    @import url('https://fonts.googleapis.com/css2?family=Almarai:wght@300;400;700;800&display=swap'); 

    :root{
        --main-color : #E1131B;
        --main-color-2 : 225, 19, 27;

        --dark-color: #21303B; 
        --normal-color: #21303B;
        --light-color: #818181;

        --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);
        --gray-color: 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: 16px;
        --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); 
    }

    h1, h2 ,h3 ,h4 ,h5, h6{
        font-weight: 700;
        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: 7px;
		transition: all ease-in-out .5s;
        outline: none !important;
        box-shadow: none !important;
        font-weight: 800;
	}
	.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(--white-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(--white-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: absolute;
        top: 0;
        z-index: 2;
        width: 100%;
        padding: 2rem 0;
    }
    .navbar .navbar-nav{
        gap: 70px;
    }
    .navbar .navbar-nav .nav-link{
        color: var(--white-color);
        font-size: 20px;
        padding: 0;
    }

    .navbar .btn-lang{
        color: var(--white-color);
        font-size: 20px;
        padding: 0;
        text-decoration: none;
    }

    /*------------------------------------------
        Navbar
    ------------------------------------------*/
    
    .header-container{
        position: relative;
        width: 100%;
        height: 749px;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .header-container::before{
        position: absolute;
        content: "";
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #2A2A2A;
        opacity: .78;
        z-index: 0;
    } 
    .header-container .header-pic{
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .header-container .header-box{
        position: absolute;
        max-width: 604px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 1;
        text-align: center;
        padding-top: 100px;
    }
    .header-container .header-box .title{
        font-size: 60px;
        color: var(--white-color);
        font-weight: 700;
        line-height: 93px;
    }
    .header-container .header-box .title span{
        padding: 0 .5rem;
        border-radius: 14px;
        background-color: var(--main-color);
    }
    .header-container .header-box .info{
        color: #F9F9F9;
        font-weight: 300;
        font-size: 24px;
        line-height: 113px;
        margin-bottom: 0;
    }

    #owl-header .owl-nav{
        max-width: 1320px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
        display: flex;
        justify-content: space-between;
        z-index: 3;
    }
    #owl-header .owl-nav button{
        color: var(--white-color);
        font-size: 40px;
        background: transparent !important;
    }
    #owl-header .owl-nav button.disabled{
        opacity: 0;
    }
    [dir="ltr"] #owl-header .owl-nav button{
        transform: rotate(180deg);
    }
    #owl-header .owl-dots{
        position: absolute;
        bottom: 24px;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        gap: 15px;
    }
    #owl-header .owl-dots .owl-dot span{
        width: 15px;
        height: 24px;
        display: block;
        background: transparent;
        border-radius: 4px;
        margin: 0;
        border: 4px solid var(--white-color);
    }
    #owl-header .owl-dots .owl-dot.active span,
    #owl-header .owl-dots .owl-dot:hover span{
        border: 4px solid var(--main-color);
    }

    .header-sub{
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 380px;
        background-image: url(../img/header.jpeg);
        background-repeat: no-repeat;
        background-size: cover;
    }
    .header-sub::before{
        position: absolute;
        content: "";
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background: #2A2A2A;
        opacity: .78;
        z-index: 0;
    }
    .header-sub .header-box{
        padding-top: 93px;
        position: relative;
        z-index: 1;
        text-align: center;
    }
    .header-sub .title{
        font-size: 30px;
        margin-bottom: 27px;
        color: var(--white-color);
    } 
    .header-sub .breadcrumb a,
    .header-sub .breadcrumb .breadcrumb-item{
        color: var(--white-color);
        font-size: 20px;
    } 

    /*------------------------------------------
        Footer
    ------------------------------------------*/
    
    footer{
        position: relative;
        background-color: var(--dark-color);
        background-image: url(../img/footer.jpeg);
        background-size: cover;
        z-index: 3;
        background-repeat: no-repeat;
         background-size: cover;
    }
    footer::before{
        position: absolute;
        content: "";
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #202529;
        opacity: .9;
        z-index: 0;
    } 
    footer .contact-info{
        position: relative;
        z-index: 1;
        border-bottom: 1px solid rgb(201, 201, 201, .30);
    }
    footer .contact-info .contact-box{
        display: block;
        align-items: center;
        min-height: 165px;
        border-inline-end: 1px solid rgb(201, 201, 201, .30);
    }
    footer .contact-info .row .col-md-4:last-child .contact-box{
        border-inline-end: 1px solid transparent;
    }
    footer .contact-info .contact-box .icon{
        margin-inline-end: 1rem;
    }
    footer .contact-info .contact-box .content .title{
        font-size: 18px;
        color: var(--white-color);
        margin-bottom: 11px;
        font-weight: 300;
    }
    footer .contact-info .contact-box .content .info{
        font-size: 20px;
        color: var(--white-color);
        margin-bottom: 0;
        font-weight: 300;
    }

    footer .links{
        position: relative;
        z-index: 1;
        margin: 70px 0;
        color: var(--white-color);
    }
    footer .links .nav-link{
        color: var(--white-color);
    }
    footer .copyright{
        position: relative;
        z-index: 1;
        color: var(--white-color);
        font-size: 16px;
        padding: 30px 0;
    }
    footer .copyright a{
        color: var(--white-color);
        transition: all .3s ease;
        font-size: 16px;
    }
    
    footer .links .nav-link:hover,
    footer .copyright a:hover{
        color: var(--main-color); 
    }

    /*------------------------------------------
        About Section
    ------------------------------------------*/
    
    .about-section.pattern{
        background-image: url(../img/pattern.png); 
        background-color: var(--gray-color);
    }
    .about-section.pattern::after{
        z-index: -1;
    }
    .about-section{
        position: relative;
        background: var(--gray-color); 
    }
    .about-section .container{
        position: relative;
        z-index: 2;
    }
    .about-section::after{
        position: absolute;
        content: "";
        display: block;
        width: 100%;
        height: 100%;
        top: 5%;
        -webkit-transform: skewY(-2deg);
        -moz-transform: skewY(-2deg);
        -ms-transform: skewY(-2deg);
        -o-transform: skewY(-2deg);
        transform: skewY(-2deg);
        background-color: var(--gray-color);
        z-index: 1;
    }

    .about-content .title{
        color: var(--main-color);
        background-color: rgb(var(--main-color-2), .2);
        border-radius: 14px;
        height: 50px;
        line-height: 50px;
        min-width: 120px;
        padding: 0 8px;
        margin-bottom: 30px;
        display: inline-block;
        font-size: 20px;
        text-align: center;
    }
    .about-content .sub-title{
        color: var(--dark-color);
        font-size: 35px;
        line-height: 75px;
        margin: 0;
    }
    .about-content .info{
        color: var(--dark-color);
        font-size: 24px;
        line-height: 60px;
        margin: 0;
    }
    .about-content .details{
        color: var(--dark-color);
        font-size: 24px;
        line-height: 60px;
        margin: 0;
    }
    .about-content ul{
        list-style-type: circle;
    }
    .about-content ul li::marker{
        color: var(--main-color);
        font-size: 2rem;
    }
    
    .about-content.terms .sub-title{
        color: var(--dark-color);
        font-size: 35px;
        line-height: 75px;
        margin-bottom: 45px;
    }
    .about-content.terms .info{
        color: var(--dark-color);
        font-size: 20px;
        line-height: 50px;
        margin: 0;
    }

    .about-section-2{
        background-color: var(--white-color);
    }
    .about-section-2::after{
        background-color: var(--white-color);
    }
    

    /*------------------------------------------
        Services Section
    ------------------------------------------*/

    .services-section.inner-page{
        background-color: #f3f3f3;
    }
    .services-content .title{
        color: var(--main-color);
        background-color: rgb(var(--main-color-2), .2);
        border-radius: 14px;
        height: 50px;
        line-height: 50px;
        min-width: 120px;
        padding: 0 8px;
        margin-bottom: 30px;
        display: inline-block;
        font-size: 20px;
        text-align: center; 
    }

    .services-content .sub-title{
        color: var(--dark-color);
        font-size: 35px;
        line-height: 75px;
        margin: 0;
    }

    .nav-services{
        border-bottom: 1px solid #DDDDDD;;
        gap: 69px;
        margin-top: 70px;
        margin-bottom: 40px;
    } 
    .nav-services .nav-link{
        padding: 28px 0;
        font-size: 24px;
        font-weight: 700;
        background-color: transparent !important;
        color: var(--dark-color);
        border-color: transparent;
        transition: all .3s ease;
    }
    .nav-services .nav-link:hover{
        color: var(--main-color);
        border-color: transparent;
    }
    .nav-services .nav-link:active,
    .nav-services .nav-link.active{
        color: var(--main-color);
        border-color: transparent;
        border-bottom: 3px solid var(--main-color);
    }


    @media (min-width: 1200px) {
        .services-section  .tab-pane .row .col-xl-2{
            max-width: 20%;
            width: 20%;
        }
    } 
    .services-box{ 
        border: 1px solid #DDDDDD;
        border-radius: 13px;
        padding: 40px 30px;
        transition: all .35s ease;
        margin-bottom: 1.5rem;
        text-align: center;
        background-color: var(--white-color);
        max-height: 330px;
        height: 330px;
    }
    .services-box:hover{ 
        border: 1px solid transparent;
        box-shadow: var(--shadow-hover);
        transform: translateY(-.5rem);
    }
    .services-box .icon{
        width: 76px;
        height: 76px;
        line-height: 76px;
        overflow: hidden;
        border-radius: 50%;
        margin: 0 auto 24px;
        background: #F1F1F1;
    }
    .services-box .icon img{
        max-width: 100%;
        max-height: 130%;
    }
    .services-box .content .title{
        color: var(--dark-color);
        font-size: 20px;
        line-height: 30px;
        margin-bottom: 18px;
    }
    .services-box .content .info{
        color: var(--light-color);
        font-size: 14px;
        line-height: 26px;
        margin: 0;
    }
    .btn-service-more{
        margin-top: calc(93px - 1.5rem);
        margin-bottom: 124px;
    }

    /*------------------------------------------
        contact-us-section
    ------------------------------------------*/

    .contact-us-section{
        position: relative;
        background-color: #EFEFF3 ;
    }
    .contact-us-section::after {
        position: absolute;
        content: "";
        display: block;
        width: 100%;
        height: 100%;
        top: -5%;
        -webkit-transform: skewY(2deg);
        -moz-transform: skewY(2deg);
        -ms-transform: skewY(2deg);
        -o-transform: skewY(2deg);
        transform: skewY(2deg);
        background-color: #EFEFF3;
        z-index: -1;
    } 
    .contact-us-content .sub-title{
        color: var(--dark-color);
        font-size: 35px;
        line-height: 75px;
        margin-bottom: 55px;
    }

    /*------------------------------------------
        branch
    ------------------------------------------*/
 
    .branch-section{
        padding-bottom: 10rem;
    }
    .branch-content .title{
        color: var(--dark-color);
        font-size: 35px;
        line-height: 75px;
        margin-bottom: 55px;
    }
    .branch-box{
        background: #F9F9F9;
        border-radius: 10px;
        padding: 30px;
        margin-bottom: 1.5rem;
    }
    .branch-box .title{
        color: var(--dark-color);
        font-size: 24px;
        margin-bottom: 30px;
    }
    .branch-box .info{
        color: var(--dark-color);
        font-size: 20px;
        line-height: 47px;
        margin-bottom: 0;
    } 
    .branch-box-map{ 
        height: 478px;
        margin-bottom: 1.5rem;
    }
    /*------------------------------------------
        form
    ------------------------------------------*/
    
    .form .form-group{
        margin-bottom: 24px;
    }
    .form .form-label{
        font-size: 18px;
        line-height: 24px;
        padding: 0 1rem;
        color: var(--dark-color);
        margin-bottom: 14px;
    }
    .form .form-control{
        min-height: 50px;
        border-color: #fff;
       border-radius: 10px;
    }
    .form textarea.form-control{
        min-height: 162px;
    }
    .form .btn-submit{
        min-width: 150px;
    }


    /*------------------------------------------
        career
    ------------------------------------------*/
    
    .career-content{
        margin-bottom: 60px;
        text-align: center;
    }
    .career-content .title{
        color: var(--main-color);
        background-color: rgb(var(--main-color-2), .2);
        border-radius: 14px;
        height: 50px;
        line-height: 50px;
        min-width: 120px;
        padding: 0 8px;
        margin-bottom: 30px;
        display: inline-block;
        font-size: 20px;
        text-align: center;
    }
    .career-content .sub-title{
        color: var(--dark-color);
        font-size: 35px;
        line-height: 75px;
        margin: 0;
    }

    .form-career {
        background: #F8F8FF;
        border: 1px solid #F1F2F3;
        border-radius: 20px;
        padding: 60px;
    }
    .form-career-alert{
        min-height: 587px;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
    }
    .form-career-alert img{
        width: 194px;
        margin: 0 auto 70px;
    }
    .form-career-alert .title{ 
        color: var(--dark-color);
        font-size: 35px;
        margin-bottom: 43px;
    }
    .form-career-alert .info{ 
        color: var(--dark-color);
        font-size: 22px;
        margin-bottom: 0;
    }
    .form-career .form-label{
        color: #535353;
        font-size: 18px;
        font-weight: 700;
        margin-bottom: 1rem;
    }
    .form-career .form-control{
        color: #535353;
        font-size: 18px;
        font-weight: 700;
        background-color: #fff;
        border-color: #fff;
        border-radius: 6px;
        min-height: 56px;
    }
    .form-career .form-control:focus{
        border-color: #96989D;
        box-shadow: none;
    }
    .form-career .form-control::placeholder{
        color: #96989D;
        font-size: 16px;
        font-weight: 300;
    }

    .datepicker:disabled,
    .datepicker[readonly] {
        background-color: #fff;
    } 

    .flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange, .flatpickr-day.selected.inRange, .flatpickr-day.startRange.inRange, .flatpickr-day.endRange.inRange, .flatpickr-day.selected:focus, .flatpickr-day.startRange:focus, .flatpickr-day.endRange:focus, .flatpickr-day.selected:hover, .flatpickr-day.startRange:hover, .flatpickr-day.endRange:hover, .flatpickr-day.selected.prevMonthDay, .flatpickr-day.startRange.prevMonthDay, .flatpickr-day.endRange.prevMonthDay, .flatpickr-day.selected.nextMonthDay, .flatpickr-day.startRange.nextMonthDay, .flatpickr-day.endRange.nextMonthDay {
        background: var(--main-color);
        border-color: var(--main-color);
    }

    .choices__inner { 
        vertical-align: middle; 
        background-color: #fff; 
        border-color: transparent;
    }
    .choices__list--dropdown .choices__item--selectable{
        padding: 0 1rem;
        font-size: 16px;
        line-height: 42px;
        color: rgba(150, 152, 157, 1);
    }
    .choices__list--dropdown .choices__item--selectable.is-highlighted {
        background-color: #f8f8ff;
        color: var(--second-color);
    } 
    .view-job-details{
        padding: 2rem 0;
    }
    .view-job-details .title{
        font-size: 20px;
        font-weight: 600;
        color: var(--second-color);
    }
    .view-job-details .info{
        font-size: 18px;
        line-height: 42px;
        color: #747474;
    }

    .btn-upload{
        width: 100%;
        border: 1px dashed var(--light-color);
        color: var(--normal-color);
        border-radius: 6px;
    } 
    .btn-upload:hover,
    .btn-upload:focus{ 
        background-color: var(--main-color);
        border-color: var(--main-color);
        color: var(--white-color) ;  
    } 

    .phone-box-input{
        position: relative;
        border-radius: 15px;
    }
    .phone-box-input .form-control{
        padding-left: 115px !important;
        font-weight: bold;
    }
    .phone-box-input .country-box{
        position: absolute;
        top: 1px;
        left: 2px; 
        color: var(--dark-color);
        height: 55px;
        padding: 1rem .75rem;
        direction: ltr;
        display: flex;
        align-items: center;
        border-radius: var(--radius-md) 0 0 var(--radius-md);
        font-weight: bold;
    }
    
    /*------------------------------------------
        Responsive
    ------------------------------------------*/
 
    @media (max-width: 1400px){
        .navbar-container .main-nav {
            gap: 1.5rem;
        }
    }
    @media (max-width: 1200px){
        .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 .navbar-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-container .header-box .title {
            font-size: 40px;
            line-height: 63px;
        }
        .header-container .header-box .info {
            font-size: 20px;
            line-height: 40px;
        }
        .about-content .sub-title,
        .services-content .sub-title,
        .branch-content .sub-title,
        .form-career-alert .title,
        .contact-us-content .sub-title {
            font-size: 30px !important;
        }
        .form-career-alert .info,
        .about-content .info,
        .about-content .details,
        .services-content .info,
        .branch-content .info { 
            font-size: 20px;
            line-height: 40px;
        }
        .nav-services .nav-link { 
            font-size: 20px;
        }
        .form-career .form-label {
            font-size: 16px;
        }
        .form-career-alert img {
            width: 150px;
        }
    }
    @media (max-width: 1024px) {
         
    }
    @media (max-width: 992px){
        .contact-box{
            padding: 1rem 2rem;
        }
        footer .contact-info .contact-box .content .info {
            font-size: 18px;
        }
        footer .links {
            margin: 30px 0 20px;
        }
    }
    @media (max-width: 780px) {
        footer .contact-info{
            padding-bottom: 1rem;
            margin-bottom: 1rem;
        }
        footer .contact-info .row .contact-box {
            border-inline-end: 1px solid transparent;
        }
        footer .contact-info .contact-box { 
            min-height: 90px; 
        }
    }
    @media (max-width: 600px) {
        
    }
    @media (max-width: 420px) {
        .navbar-brand .logo  img{
            height: 40px;
        }
        .btn{
            padding: 0px 1rem;
        }
        section{
            padding: 5rem 0;
        }
        .header-container .header-box{
            width: 100%;
        }
        #owl-header .owl-nav{
            display: none;
        }
        .header-container .header-box .title {
            font-size: 30px;
            line-height: 40px;
        }
        .header-container .header-box .info {
            font-size: 18px;
            line-height: 30px;
        }
        .about-content .sub-title,
        .services-content .sub-title,
        .branch-content .sub-title,
        .form-career-alert .title,
        .contact-us-content .sub-title {
            font-size: 20px !important;
            line-height: 40px;
        }
        .form-career-alert .info,
        .about-content .info,
        .about-content .details,
        .services-content .info,
        .branch-content .info { 
            font-size: 16px;
            line-height: 32px;
        }
        .nav-services { 
            gap: 1rem;
            margin: 30px 0;
            flex-wrap: nowrap;
        }
        .nav-services .nav-link{ 
            font-size: 16px;
            font-weight: 700;
            padding: 1rem 0;
        }
        .form-career .form-label {
            font-size: 16px;
        }
        .form-career-alert img {
            width: 120px;
        }
        .services-box { 
            padding: 1rem;
            margin-bottom: 0;
        }
        .services-box .content .title {
            font-size: 16px;
        }
        .services-box .content .info {
            font-size: 12px;
        }
        .tab-pane .row{
            --bs-gutter-x: .5rem;
            --bs-gutter-y: .5rem;
        } 
    } 
    
    @media (max-width: 330px) { 
        .nav-services .nav-link{ 
            font-size: 14px;
            font-weight: 700;
            padding: 1rem 0;
        }
    }

    @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); }
}

[dir='rtl'] .breadcrumb-item+.breadcrumb-item::before{
    padding-left: 0.5rem;
    float: right;
}

/* add this css code to the end of custom.css file in the project */
/* shadi */

.border-10 {
    border-radius: 10px;
}

.border-13 {
    border-radius: 13px;
}

.services-content .sub-title {
    line-height: 70px;
}

.entry-box-1 {
    position: relative;
    overflow: hidden;
    border-radius: 13px;
    transition: all 0.5s ease-in-out;
}

.entry-box-1 .entry-box-a:before {
    position: absolute;
    content: "";
    width: 100%;
    height: 20%;
    background: transparent linear-gradient(180deg, #0E0E0E00 0%, #202020 100%) 0 0 no-repeat padding-box;
    opacity: 1;
    bottom: 0;
    transition: all 0.5s ease-in-out;
}

.entry-box-1:hover .entry-box-a:before {
    height: 100%;
    transition: all 0.5s ease-in-out;
}

.entry-box-1 .labels {
    width: 100%;
    z-index: 4;
    -webkit-transform: translate(0%, -50%);
    transform: translate(0%, -50%);
    transition: all .2s ease-in-out;
    margin-bottom: 1.1rem;
}

.entry-box-1 .label.quality {
    font-size: 22px;
    color: #FFFFFF;
    font-weight: bold;
    transition: all 0.5s ease-in-out;
}

.entry-box-1 .entry-body {
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 5;
    opacity: 1;
    width: 100%;
    transform: translateY(70%);
    transition: all 0.5s ease-in-out;
}

.entry-box-1:hover .entry-body {
    opacity: 1;
    transform: translateY(0);
    transition: all 0.5s ease-in-out;
}

.entry-box-1 .entry-body a {
    color: #FFFFFF;
    text-align: right;
    font-size: 14px;
    transition: all 0.5s ease-in-out;
}

.entry-box-1:hover .entry-body a {
    color: #FFFFFF;
    text-align: right;
    font-size: 14px;
    transition: all 0.5s ease-in-out;
}

.card.card-branch {
    padding: 20px;
    border-radius: 10px;
}

.card.card-branch .card-body {
    padding: 14px 7px 0 7px;
}

.card.card-branch .card-body .branch-name {
    display: inline-block;
    font-size: 22px;
    font-weight: bold;
    line-height: 35px;
    color: #21303B;
    margin-bottom: 0;
}

.card.card-branch .card-body .svg-branch {
    margin-inline-end: 10px;
}

.card.card-branch .card-body .branch-details {
    padding-top: 1rem;
    color: #21303B;
    font-size: 18px;
    line-height: 35px;
}

.card.card-branch .card-body .go-to-the-map {
    display: flex;
    justify-content: end;
    align-items: center;
    font-size: 14px;
}
.advertisement-img {
    border-radius: 16px;
}

@media (max-width: 767px) {
    .services-content .sub-title {
        line-height: 45px;
    }
}