﻿
@media (min-width:2501px) {
    #header:before {
        width: 40%;
    }
}



@media (min-width:1500px) and (max-width:2500px) {
    #header:before {
        width: 23%;
    }
}


@media (min-width:992px) and (max-width:1200px){
    .left-side-section .left-content h1 {
        font-size: 2em;
    }
      

}

@media (min-width:992px){
    .navbar .dropdown:hover>.dropdown-menu {
        display: block;
    }
    .navbar .dropdown>.dropdown-toggle:active {
        pointer-events: none;
    }/*Without this, clicking will make it sticky*/


    html[lang="ar"] .pr-lg-4, html[lang="ar"] .px-lg-4 {
        padding-right: inherit!important;
        padding-left: 1.5rem!important;
    } 
    html[lang="ar"] .pl-lg-4, html[lang="ar"] .px-lg-4 {
        padding-left: inherit!important;
        padding-right: 1.5rem!important;
    }
    html[lang="ar"] .offset-lg-3 {
        margin-left: unset;
        margin-right: 25% !important;
    }

}
@media (min-width: 768px){
    html[lang="ar"] .ml-md-auto, html[lang="ar"] .mx-md-auto {
        margin-right: auto!important;
        margin-left: unset !important;
    }
    html[lang="ar"] .text-md-right {
        text-align: left!important;
    }
    html[lang="ar"] .text-lg-left {
        text-align: right!important;
    }
    html[lang="ar"] .offset-md-4 {
        margin-left: unset;
        margin-right: 33.333333%;
    }
}

@media (max-width:991px){
    .navbar-nav {
        display: block !important;
        position: relative;
        overflow-y: auto;
        max-height: 70vh;
    }
    .navbar-nav:before {
        position: absolute;
        content: "";
        border-bottom: 15px solid #fff;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        top: -14px;
        right: 10px;
    }
    .navbar-light .navbar-nav .nav-link {
        color: #565656 !important;
        font-size: 16px;
        background-color: #fff;
        border-top: 1px solid #e8e8e8;
        padding: 12px 30px !important;
    }
    .navbar-light .navbar-nav .nav-item:last-child a{
        border-radius: 0px 0px 4px 4px;
    }
    .collapse.show {
        margin-top: 3px;
    }
    #header .navbar-nav .nav-item.buy-now-btn a {
        margin-bottom: 20px;
        margin-left: 25px;
        padding: 10px 70px !important;
    }
    .navbar-nav .style-dd .dropdown-menu {
        margin-top: 0px;
        padding-left: 29px;
        border: unset;
        box-shadow: unset;
    }
    html[lang="ar"] .navbar-nav .style-dd .dropdown-menu {
        padding-left: unset;
        padding-right: 29px;
        text-align: right;
    }
    .navbar-nav .style-dd .dropdown-menu .dropdown-menu {
        margin-top: 0px;
        padding-left: 25px;
        left: unset;
        right: 0;
        border: unset;
        box-shadow: unset;
    }
    .navbar-nav .style-dd .dropdown-menu:before {
        display: none;
    }
    .full-dd .container {
        width: 100%;
        padding: 0px;
        margin-left: -30px;
        padding-left: 30px;
    }
    html[lang="ar"] .full-dd .container {
        margin-left: unset;
        margin-right: -30px;
        padding-left: unset;
        padding-right: 30px;
    }
    .parallax .banner-text-5 {
        width: 95%;
    }
    .resume-footer {
        padding-left: 0%;
        padding-right: 0%;
    }
    html[lang="ar"] .navbar-nav {
        padding-right: 0;
        text-align: right;
    }
}



@media (min-width:768px) and (max-width:991px) {

    #header:before {
        height: 55px;
    }
    .triangle-topleft:before {
        top: 55px;
    }
    .parallax .banner-text {
        width: 80%;
    }
    .blog-design-one-item img {
        border-radius: 0px 0px 6px 6px;
    }
    html[lang="ar"] .blog-design-one-item img {
        border-radius: 0px 0px 6px 6px;
    }
    .left-side-section .left-content h1 {
        font-size: 2em;
    }
    .pricing-box-one .pricing-box-head-one h2 span {
        position: relative;
        top: 10px;
    }
}



@media (min-width:576px) and (max-width:991px) {
    .contact-form-one {
        padding: 30px 30px 20px;
    }
    .contact-info-one{
        padding-left: 30px;
    }
    .home-slider .carousel-caption h5 {
        font-size: 4em;
    }
  
}



@media (max-width:767px) {
    .team-img {
        max-height: unset;
    }
    .right, .left {
        height: 100%;
    }
    .parallax .banner-text {
        width: 85%;
        padding: 60px 25px;
    }
    .parallax .banner-text h1 {
        font-size: 42px;
    }
    .contact-info-one{
        padding-left: 0px;
    }
    .process-box-one .process-box-head-one:after{
        left: 0px;
    }
    .process-box-two .process-box-head-two:after{
        left: 0px;
    }
    #header .top-bar .contact-info {
        display: none !important;
    }
    .left-side-section {
        position: relative;
    }
    .right-side-section {
        padding-left: 3%;
        padding-right: 3%;
    }
    .faq-search .input-group {
        width: 100%;
    }
    .career-search .input-group {
        width: 100%;
    }
    .career-search input {
        width: 100% !important;
        margin-bottom: 5px !important;
        border-radius: 3px !important;
    }
    .career-search select {
        width: 100% !important;
        margin-bottom: 5px !important;
        border-radius: 3px !important;
        border: unset !important;
    }
    .career-search .input-group-append {
        margin-left: 0px !important;
        border: unset !important;
        width: 100%;
    }
    .career-search button {
        width: 100% !important;
        border-radius: 3px !important;
    }
    .timeline-full {
        margin: 70px auto 70px;
    }
    .timeline-full::after {
        left: 5px;
        top: -30px;
        bottom: 30px;
    }
    .timeline-full-cont {
        width: 100%;
        padding-left: 40px;
        padding-right: 15px;
        padding-bottom: 30px;
    }
        .timeline-full-cont::before {
            left: 30px;
            border: medium #c19222  white;
            border-width: 10px 10px 10px 0;
            border-color: transparent #c19222 transparent transparent;
        }
    .timeline-full-left::after, .timeline-full-right::after {
        left: -8px;
    }
    .timeline-full-right {
        left: 0%;
    }
    .timeline-full-content ul span, .timeline-full-content ul i {
        float: left;
    }
    .timeline-full-end {
        margin: 70px 0px;
    }
    .login-form {
        display: block;
    }
    .process-box-three .process-box-head-three:after {
        display: none;
    }
    .process-box-four .process-box-head-four:after {
        display: none;
    }
    .process-box-five .process-box-head-five:after {
        display: none;
    }

    /*Elements start*/
    .cal-to-action-eight {
        padding: 40px 25px;
    }
    html[lang="ar"] .process-box-one .process-box-head-one:after {
        width: 85%;
    }
    html[lang="ar"] .process-box-two .process-box-head-two:after {
        width: 85%;
    }
    /*Elements end*/

}



@media (min-width:575px) and (max-width:767px) {



}



@media (max-width:575px) {

    .navbar-toggler {
        margin-right: 15px;
    }
    .lp {
        padding-left: 15px !important;
    }
    .rp {
        padding-right: 15px !important;
    }
    .none{
        display:none;
    }
    .modal-content {
        top: 30%;
    }
    #header .navbar {
        padding: 0 15px;
    }
    .notes{
        position: unset;
    }
    .contact-info-one {
        padding: 30px;
    }
    .parallax .banner-text-4 {
        width: 100%;
        padding: 0px 15px;
    }
    .parallax .banner-text-4 h1 {
        font-size: 56px;
    }
    .video-close {
        right: -8px;
        top: -18px;
    }
    .heading h2 {
        font-size: 2em;
    }
    .heading-left h2 {
        font-size: 2em;
    }
    .parallax .banner-text-5 h5 {
        font-size: 14px;
    }
    .parallax .banner-text-5 h1 {
        font-size: 2em;
    }
    .home-slider .carousel-caption h5 {
        font-size: 2em;
    }
    .intro-video .intro-video-text h2{
        font-size: 3em;
    }
    .portfolio {
        padding: 0px 15px;
    }
    .navigation {
        right: 5px;
    }
    .gray-bg{
        padding: 70px 0px;
    }
    .white-bg{
        padding: 70px 0px;
    }

    .error-bg h2 {
        font-size: 92px;
        line-height: 60px;
    }
    .error-bg h4 {
        font-size: 26px;
    }
    .error-bg h6 {
        font-size: 13px;
    }

    /*Elements start*/
    .testimonial-design-four-con {
        padding: 100px 30px 30px 30px;
    }
    .testimonial-design-four-con:before {
        left: 50%;
        top: 25px;
        transform: translateX(-50%);
    }
    html[lang="ar"] .testimonial-design-four-con {
        padding: 100px 30px 30px 30px;
    }
    html[lang="ar"] .testimonial-design-four-con:before {
        left: unset;
        right: 50%;
        top: 25px;
        transform: translateX(-50%);
    }
    
    .testimonial-design-five-con {
        padding: 30px 30px 100px 30px;
    }
    .testimonial-design-five-con:before {
        right: 30px;
        bottom: 20px;
        left: unset;
        top: unset;
    }
    html[lang="ar"] .testimonial-design-five-con {
        padding: 30px 30px 100px 30px;
    }
    html[lang="ar"] .testimonial-design-five-con:before {
        right: 30px;
        bottom: 20px;
        left: unset;
        top: unset;
    }

    .testimonial-design-six-con {
        padding: 30px 20px;
    }
    .cal-to-action{
        padding: 25px;
    }.cal-to-action-two h2 {
        font-size: 32px;
    }
    .cal-to-action-three{
        padding: 25px;
    }
    .blog-design-one-item img {
        border-radius: 0px 0px 6px 6px;
    }
    html[lang="ar"] .blog-design-one-item img {
        border-radius: 0px 0px 6px 6px;
    }

    /*Elements end*/
    
}



@media (max-width:497px) {
    .contact-form-one {
        padding: 30px 30px 20px;
    }
}

