.navbar-demo .nav-bar ul li {display: block;}

.navbar-demo .nav-bar ul {text-align: left; position: absolute; top: 20%; left: 0%;}

.navbar-demo .nav-bar ul li a {font-size: 16px; display: inline-block; text-align: left; text-decoration: none; color: #000; padding: 18px; text-transform: uppercase;}

.nav-bar {text-align: left; display:flex; flex-wrap:wrap; position: relative;}

.navbar-demo button.menu-btn {display:none;}



@media only screen and (max-width: 768px) {



    .navbar-collapse {

        position: fixed;

        top: 0;

        right: 0;

        padding-left: 15px;

        padding-right: 15px;

        padding-bottom: 15px;

        width: 75%;

        height: 100%;

    }



    .navbar-collapse.collapsing {

        right: -75%;

        transition: height 0s ease;

    }



    .navbar-collapse.show {

        right: 0;

        transition: right 300ms ease-in-out;

    }



    .navbar-toggler.collapsed ~ .navbar-collapse {

        transition: right 500ms ease-in-out;

    }



    .hide-for-desktop{display: block;}

    .hide-for-mobile{display: none;}

    .container{padding-right: 0px;}



    .navbar-demo  button.menu-btn {position: absolute; top: 0; right: 0; background-color: unset; border: 0; font-size: 26px; display:block; padding: 23px; color: #F2AA29; outline: none;}

    .navbar-demo{height: 100%; z-index: 999; position: fixed; top: 0%;}

    .navbar-demo .nav-bar {right: -950px; background-color: #000; transition: 1s; height: 100%;}

    .navbar-demo.open-nav .nav-bar{right: 0; width: 80%; transition: right 0.5s; height: 100%; position: absolute;}

    .navbar-demo .nav-bar ul li a {display: block; color: #fff;}

    .navbar-demo.open-nav button.menu-btn i:before {content: '\f00d ';}



    .navbar {transition: top 0.5s; background: url(../images/mobile/navbar-bg-mob.png) no-repeat right 100% #fff; background-size: 100% 100%; height: 5rem;}

    .navbar .navbar-brand{display: inline-block; padding-top: 0.3125rem; padding-bottom: 0.3125rem; margin-left: 1rem;}

    .navbar .navbar-brand img{width: 65%;}

    .navbar .navbar-nav .nav-item .nav-link{color: #fff; font-weight: 600; font-size: 16px; margin-right: 30px; padding: 6px 25px;}

    .navbar .navbar-nav .active>.nav-link{color: #000; background-color: #F2AA29; padding: 6px 25px; font-weight: 600; font-size: 16px;}

    .navbar .navbar-nav .nav-item .nav-link:hover{color: #000; background-color: #F2AA29; padding: 6px 25px; font-weight: 600; font-size: 16px; transition: color .3s ease-in-out,background-color .3s ease-in-out,border-color .3s ease-in-out,box-shadow .3s ease-in-out;}



    #home-banner{margin-top: 4rem; height: max-content; padding-top: 100px; padding-bottom: 100px; background:  url('../images/mobile/home/home-banner.webp') no-repeat; background-size: 100% 100%;}

    .banner-head{font-weight: 700; font-size: 26px; line-height: 30px; letter-spacing: 0.01em; color: #FFFFFF;}

    .banner-subhead{font-weight: 400; font-size: 14px; line-height: 16px; letter-spacing: 0.01em; color: #FFFFFF;}

    #home-banner .col-sm-10{width: 70%;}



    .btn-custom{background-color: #F2AA29; color: #000; font-weight: 600; font-size: 14px; text-align: center; padding: 10px 20px; border-radius: 0;}

    .btn-custom:hover{text-decoration: none; background-color: #fff; color: #000; font-weight: 600; font-size: 14px; text-align: center; border: 1px solid #F2AA29; transition: color .15s ease-in-out,background-color .3s ease-in-out,border-color .3s ease-in-out,box-shadow .3s ease-in-out;}

    .btn-black{background-color: #000; color: #fff; font-weight: 600; font-size: 14px; text-align: center; padding: 10px 20px; border-radius: 0;}

    .btn-black:hover{text-decoration: none; background-color: #fff; color: #000; font-weight: 600; font-size: 14px; text-align: center; border: 1px solid #000; transition: color .15s ease-in-out,background-color .3s ease-in-out,border-color .3s ease-in-out,box-shadow .3s ease-in-out;}



    .section-head{font-weight: 700; font-size: 16px; line-height: 19px; text-align: center; letter-spacing: 0.01em; color: #000000;}

    .section-text{font-weight: 400; font-size: 14px; line-height: 19px; color: #000; text-align: center; letter-spacing: 0.01em;}



    .custom-col-5{-ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; padding-left: 10px; padding-right: 10px;}



    .custom-card{background: #FFFFFF; box-shadow: 0px 4px 35px 18px rgba(198, 198, 198, 0.22); border-radius: 5px; min-height: 325px; height: 100%; z-index: 1;}

    .custom-card2{background: #FFFFFF; box-shadow: 0px 4px 35px 18px rgba(198, 198, 198, 0.22); border-radius: 5px; min-height: 320px;}

    .custom-card3{background: #FFFFFF; box-shadow: 0px 4px 35px 18px rgba(198, 198, 198, 0.22); border-radius: 5px; min-height: 330px;}

    .custom-card-body{padding: 15px;}

    .card-yellow{background: #F2AA29; border-radius: 5px 5px 0px 0px; height: 10px; width: 100%; transition: 0.15s ease-out;}

    .card-head{font-weight: 600; font-size: 16px; line-height: 26px;  letter-spacing: 0.01em;  color: #000000;}

    .card-head2{font-weight: 600; font-size: 18px; line-height: 26px;  letter-spacing: 0.01em;  color: #000000;}

    .card-text{font-weight: 400; font-size: 14px; line-height: 17px;  letter-spacing: 0.01em;    color: #000000;}

    .owl-carousel.what-we-do-slider .owl-item img{width: 40%;}

    .owl-carousel.what-we-do-slider .owl-stage-outer{padding: 50px 0px;}



    .custom-card:hover{transform-origin: top center; background: #fff; z-index: -1; transition: background-color .3s ease-in-out;}

    .custom-card2:hover{transform-origin: top center; background: #fff; z-index: -1; transition: background-color .3s ease-in-out;}

    .custom-card3:hover{transform-origin: top center; background: #fff; z-index: -1; transition: background-color .3s ease-in-out;}



    .custom-card-icon2{width: 15%;}



    #video1{padding: 10% 2%; background-color: #F2AA29; z-index: -999;}

    .glance-sec-mob{background: #FFFFFF; box-shadow: 0px 4px 35px 18px rgba(198, 198, 198, 0.22); border-radius: 5px; padding: 15px 10px 20px 25px;}

    .video-yellow-head{font-weight: 700; font-size: 20px; line-height: 26px;  letter-spacing: 0.01em;  color: #F2AA29;}

    video::-webkit-media-controls-overlay-play-button {

        display: none;

    }



    .dropdown-a{display: block; width: 100%; padding: 0.25rem 10px;color: #fff; font-size: 14px;}



    .pl-2rem{padding-left: 2rem;}

    .pr-2rem{padding-right: 2rem;}



    /* project slider - home */

    #project-slider{background: url('../images/mobile/home/project-slider-bg.webp') no-repeat center center; background-size: cover; padding: 2%;}

    .project-slider-head{font-weight: 700; font-size: 14px; line-height: 26px; color: #000000;}

    .project-slider-text{font-weight: 400; font-size: 14px; line-height: 17px; color: #000000;}

    .slider-blackbox{background-color: #000; padding: 10px; text-align: center;}

    .slider-blackbox-text{font-weight: 400; font-size: 14px; line-height: 17px; color: #FFFFFF;}

    #project-slider .btn-pos{}

    

    .client-logo{height: auto;}



    .testi-head{font-weight: 700; font-size: 16px; line-height: 19px; color: #F2AA29;}

    .testi-name{font-weight: 600; font-size: 16px; line-height: 26px; letter-spacing: 0.01em; color: #FFFFFF;}

    .testi-text{font-weight: 400; font-size: 14px; line-height: 24px; letter-spacing: 0.01em; color: #FFFFFF;}

    .testi-text-pos{padding: 0%; margin-top: 10%; margin-bottom: 15%;}

    .testi-slider .slide1 .testi-img{width: 30%; height: 85px; display: initial;}

    .owl-carousel.testi-slider .owl-dots {text-align: center; padding-top: 0px;}

    .owl-carousel.testi-slider .owl-dots .owl-dot {border-radius: 50%; width: 10px; height: 10px; margin-left: 4px; margin-right: 4px; background: #000; border: 1px solid #fff;}

    .owl-carousel.testi-slider .owl-dots .owl-dot.active, .owl-carousel.testi-slider .owl-dots .owl-dot:hover {background: #F2AA29;}

    .owl-carousel.testi-slider .arrow-left{display: none;}

    .owl-carousel.testi-slider .arrow-right{display: none;}



    /* About Us */

    .tab-navigation{padding: 3% 5%;}

    .tab-navigation .form-control{border: none; box-shadow: 0px 4px 35px 18px rgba(198, 198, 198, 0.22); border-radius: 4px;}



    .team-card{box-shadow: 0px 4px 60px 8px rgba(120, 120, 120, 0.22); border-radius: 6px;}

    .team-card-body{background-color: #F2AA29; padding: 15px 12px; border-radius: 4px 4px 4px 0px;}

    .team-bg{background-image: url('../images/team/team-bg.png'); min-height: max-content; border-radius: 6px;}

    .team-head{font-weight: 600; font-size: 16px; text-align: center; letter-spacing: 0.01em; color: #000;}

    .team-subhead{font-weight: 400; font-size: 14px; text-align: center; letter-spacing: 0.01em; color: #000000;}

    .team-card-body a{font-weight: 400; font-size: 14px; line-height: 26px; letter-spacing: 0.01em; text-decoration-line: underline; color: #000000;}

    .managing-team-card-img{border-radius: 4px;}

    .team-name{width: 100%; margin-top: -5%;}

    .service-bg{background: url('../images/services/service-bg.png'), #F2AA29 50%; padding: 40px 25px;}



    .owl-carousel.team-slider-mob .owl-dots {text-align: center; padding-top: 20px;}

    .owl-carousel.team-slider-mob .owl-dots .owl-dot {border-radius: 50%; width: 10px; height: 10px; margin-left: 4px; margin-right: 4px; background: #C0C0C0; border: 1px solid #fff;}

    .owl-carousel.team-slider-mob .owl-dots .owl-dot.active, .owl-carousel.team-slider-mob .owl-dots .owl-dot:hover {background: #F2AA29;}





    /* project page */

    .proj-blackbox{position: relative; bottom: 90px; left: 0%;}

    .owl-carousel.proj-slider-mob .owl-dots {text-align: center; padding-top: 10px; margin-top: -15%; z-index: 999;}

    .owl-carousel.proj-slider-mob .owl-dots .owl-dot {border-radius: 50%; width: 10px; height: 10px; margin-left: 4px; margin-right: 4px; background: #fff; border: 1px solid #AFAFAF;  z-index: 999;}

    .owl-carousel.proj-slider-mob .owl-dots .owl-dot.active, .owl-carousel.team-slider-mob .owl-dots .owl-dot:hover {background: #F2AA29;}



    .project-card{padding: 0%; border-radius: 8px 8px 0px 0px;}

    .project-card img{border-radius: 8px 8px 0px 0px;}

    .project-card-body{background-color: #0C0C0C; box-shadow: 0px 4px 35px 18px rgba(128, 128, 128, 0.22); padding: 10px 10px 10px 15px; border-radius: 0px 0px 8px 8px;}

    .project-head{font-weight: 600; font-size: 16px; line-height: 19px; letter-spacing: 0.01em; color: #FFFFFF;}

    .project-text{font-weight: 400; font-size: 14px; line-height: 14px; letter-spacing: 0.01em; color: #FFFFFF;}

    .project-card:hover img {

        filter: brightness(100%);

    }

      

    .single-proj-blackbox{position: relative; top: -35%;}

    .know-more-mob{margin-top: -7%;}

    #single-project-banner{margin-top: 5rem;}



    /* contact page */

    .contact-card{background-color: #fff; padding: 10px; min-height: 250px; box-shadow: 0px 4px 35px 18px rgba(198, 198, 198, 0.22); border-radius: 5px;}

    .card-head{font-weight: 600; font-size: 16px; line-height: 26px;  letter-spacing: 0.01em;  color: #000000;}

    .card-text{font-weight: 400; font-size: 13px; line-height: 17px;  letter-spacing: 0.01em;    color: #000000;}



    .footer-logo{width: 100%;}

    .footer-head{font-weight: 600; font-size: 14px; line-height: 17px; color: #000000;}

    .footer-text{font-weight: 400; font-size: 13px; line-height: 17px; color: #000000;}

    .footer-link{font-weight: 400; font-size: 14px; line-height: 14px; color: #000000;}

    .footer-link:hover{font-weight: 400; font-size: 15px; line-height: 14px; color: #000000; transition: .5s;}

    #footer .container{padding-right: 15px;}

    .social-circle li a {display: inline-block; position: relative; margin: 0 10px 0 auto; text-align: center; width: 32px; height: 32px; font-size: 20px; background-color: #F2AA29; color: #000;}



    .bottom-footer{width: 100%; background-color: #0C0C0C; padding: 20px 0;}

    .bottom-footer-text{font-weight: 400; font-size: 11px; color: #FFFFFF;}



    #video_container button{background-color: transparent; border: none; position: absolute; top: 35%; left: 40%;}

    

    #footer input#news-letter::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */

        font-size: 14px;

        color: #000;

    }

      

    #footer input#news-letter:-ms-input-placeholder { /* Internet Explorer 10-11 */

        font-size: 14px;

        color: #000;

    }

      

    #footer input#news-letter::-ms-input-placeholder { /* Microsoft Edge */

        font-size: 14px;

        color: #000;

    }





    #tabs select.custom-arrow{

        appearance: none;

        background: url('../images/mobile/down-arrow.png') no-repeat right;

        background-position-x: 92%;

    }



}