* {
    box-sizing: border-box;
}
.modal-busy{
	display: none;
	position: fixed;
	z-index: 999;
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
	background-color: black;
	filter: alpha(opacity=60);
	opacity: 0.6;
	-moz-opacity: 0.8;
}

.center-busy{
	z-index: 1000;
	margin: 300px auto;
	padding: 0px;
	width: 130px;
	filter: alpha(opacity=100);
	opacity: 1;
	-moz-opacity: 1;
}

.center-busy img{
	height: 80px;
	width: 80px;
}

.download-video iframe {
	width: 100%;
	height: 370px;
}


 .header-area,
 ul.nav-menu li ul li a,
 .searchbar .input-search,
 .text-animated li a,
 .slider-one .owl-nav .owl-prev,
 .slider-one .owl-nav .owl-next,
 .progress-gallery .bar-container .progress .progress-bar-custom,
 .choose-item:before,
 .feature-icon i,
 .feature-item:hover .feature-text,
 .bg-counterup,
 .portfolio-bg,
 .faq-header button.faq-button,
 .faq-header button.faq-button.collapsed:hover,
 .booking-area:before,
 .bg-booking,
 .team-carousel .owl-nav .owl-prev,
 .team-carousel .owl-nav .owl-next,
 .team-text,
 .team-social li a:hover,
 .price-header i,
 .button-df a,
 .bg-testimonial,
 .testimonial-carousel .owl-dots .owl-dot,
 .blog-carousel .owl-nav .owl-prev,
 .blog-carousel .owl-nav .owl-next,
 .blog-author li.blog-button a,
 .call-us:before,
 .footer-item h3:before,
 .footer-item h3:after,
 .footer-item .btn,
 .footer-item ul.footer-social li a,
 .scroll-top,
 .headstyle h4:before,
 .headstyle h4:after,
 .team-detail-text ul li a,
 .sidebar-item h3:before,
 .sidebar-item h3:after,
 .event-contact-item,
 .gallery-bg,
 .testimonial-grid .testimonial-description p:before,
 .testimonial-two-carousel .testimonial-description p:before,
 .form-button .btn,
 .project-carousel .owl-nav .owl-prev,
 .project-carousel .owl-nav .owl-next,
 .sidebar-item button,
 .contact-item:hover .contact-icon,
 .contact-form .btn,
 span.input-group-btn {
     background: #376FD1 !important;
 }

ul.nav-menu li:hover>a,
.searchbar .search-button:hover,
.text-animated li a:hover,
.text-animated li:last-child a:hover,
.slider-one .owl-nav .owl-prev:hover,
.slider-one .owl-nav .owl-next:hover,
.feature-item:hover .feature-icon i,
.services-text a:hover,
.portfolio-menu li.filtr-active,
.portfolio-menu li:hover,
.portfolio-text h3 a:hover,
.form-button .btn2:hover,
.blog-item h3 a:hover,
.blog-item span i,
.blog-author li a i,
.blog-author li a:hover,
.call-us .button a:hover,
.footer-item ul li a:hover,
.team-info ul li span,
li.event-header-left i,
.recent-text a:hover,
.event-contact-item:hover .event-contact-icon,
.service-sidebar-item ul li a:hover,
.portfolio-details ul li span,
.sidebar-item ul li a:hover,
.blog-one-text h3 a:hover,
.blog-one-text ul li i,
.single-blog ul li i,
.contact-icon {
    color: #376FD1 !important;
}

.text-animated li a,
.slider-one .owl-nav .owl-prev,
.slider-one .owl-nav .owl-next,
.feature-icon i,
.feature-item:hover .feature-text,
.footer-item .form-control,
.footer-item .btn,
.footer-item ul.footer-social li a,
.event-contact-item:hover .event-contact-icon,
.form-control:focus,
.sidebar-item button,
.contact-item:hover .contact-icon,
.contact-form .btn {
    border-color: #376FD1 !important;
}

.video-button span {
    border-left-color: #376FD1 !important;
}

.portfolio-menu li.filtr-active,
.team-social li a:hover {
    border-bottom-color: #376FD1 !important;
}

.portfolio-menu li.filtr-active:before,
.team-social li a:hover {
    border-top-color: #376FD1 !important;
}

ul.nav-menu li ul li:hover>a {
    background: #f1f1f1 !important;
}

.text-animated li a:hover,
.text-animated li:last-child a:hover,
.slider-one .owl-nav .owl-prev:hover,
.slider-one .owl-nav .owl-next:hover {
    background: #fff !important;
    border-color: #fff !important;
}

.text-animated li:last-child a {
    background: #313131 !important;
    border-color: #313131 !important;
}

.blog-author li.blog-button a,
.blog-author li.blog-button i,
.footer-item ul.footer-social li a:hover,
.contact-item:hover .contact-icon {
    color: #fff !important;
}

.feature-item:hover .feature-icon i,
.faq-header button.faq-button.collapsed {
    background: #fff !important;
}

.team-carousel .owl-nav .owl-prev:hover,
.team-carousel .owl-nav .owl-next:hover,
.blog-carousel .owl-nav .owl-prev:hover,
.blog-carousel .owl-nav .owl-next:hover,
.button-df a:hover,
.testimonial-carousel .owl-dots .owl-dot.active,
.blog-author li.blog-button a:hover,
.footer-item ul.footer-social li a:hover,
.team-detail-text ul li a:hover,
.form-button .btn:hover,
.project-carousel .owl-nav .owl-prev:hover,
.project-carousel .owl-nav .owl-next:hover,
.contact-form .btn:hover {
    background: #313131 !important;
}

.footer-item ul.footer-social li a:hover,
.contact-form .btn:hover {
    border-color: #313131 !important;
}

.event-contact-item:hover,
.faq-body,
.feature-item:hover .feature-icon i,
.faq-header button.faq-button.collapsed {
    background: #f5f5f5 !important;
}

.booking-form input:focus,
.booking-form textarea:focus {
    border-color: #fff !important;
}

.booking-form button[type="submit"] {
    background: #313131 !important;
    color: #fff !important;
}

.booking-form button[type="submit"]:hover {
    background: #fff !important;
    color: #313131 !important;
}
html {
    scroll-behavior: smooth;
}

@media screen and (max-width: 768px) {
    [data-aos-delay] {
        transition-delay: 0 !important;
    }
}


  /* --------------Time Line ---------------------------*/


.timeline {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
}

/* The actual timeline (the vertical ruler) */
.timeline::after {
    content: '';
    position: absolute;
    width: 6px;
    background-color: #5f5f5f;
    top: 0;
    bottom: 0;
    left: 50%;
    margin-left: -3px;
}

/* Container around content */
.timeline-container  {
    padding: 10px 40px;
    position: relative;
    background-color: inherit;
    width: 50%;
}





html[lang="ar"]{
.left {
    left: -50%;
}

.right {
    left: 0;
}

.description{
    direction: rtl;
    text-align: right;
}

}



html[lang="en"]{
.left {
    left: 0;
}

.right {
    left: 50%;
}

}

/* Add arrows to the left timeline-container  (pointing right) */
.left::before {
    content: " ";
    height: 0;
    position: absolute;
    top: 22px;
    width: 0;
    z-index: 1;
    right: 30px;
    border: medium solid #739adf;
    border-width: 10px 0 10px 10px;
    border-color: transparent transparent transparent #739adf;
}

/* Add arrows to the right timeline-container  (pointing left) */
.right::before {
    content: " ";
    height: 0;
    position: absolute;
    top: 22px;
    width: 0;
    z-index: 1;
    left: 30px;
    border: medium solid #739adf;
    border-width: 10px 10px 10px 0;
    border-color: transparent #739adf transparent transparent;
}

/* Fix the circle for timeline-container s on the right side */
.right::after {
    left: -16px;
}

/* The actual content */
.content {
    padding: 20px 30px;
    background-color: #739adf;
    color: #FFF;
    position: relative;
    border-radius: 6px;
}

/* Media queries - Responsive timeline on screens less than 600px wide */
@media screen and (max-width: 600px) {
    /* Place the timelime to the left */
    .timeline::after {
        left: 31px;
    }

    /* Full-width timeline-container s */
    .timeline-container  {
        width: 100%;
        padding-left: 70px;
        padding-right: 25px;
    }

    /* Make sure that all arrows are pointing leftwards */
    .timeline-container::before {
        left: 60px;
        border: medium solid #739adf;
        border-width: 10px 10px 10px 0;
        border-color: transparent #739adf transparent transparent;
    }

    /* Make sure all circles are at the same spot */
    .left::after, .right::after {
        left: 15px;
    }


    html[lang="en"] {
    .right {
        left: 0% !important;
    }
}

    html[lang="ar"] {
        .left {
            right: 0% !important;
        }
    }
}



/* -------------- End Time Line ---------------------------*/


.portfolio-footer{
    display: flex;
    color: #FFF;
    background: #739adf;
    justify-content: space-around;
    align-items: center;
}

.portfolio-footer p{
    margin: 0;
}


.owl-stage{
    display: flex;
    align-items: center;
}


.modal-body{
    padding: 1rem 2rem !important;
}