@media(min-width: 769px){
    .pd {
        padding: 150px 0px;
    }
}
@media(min-width: 1400px) {
  
 .inner-banner{
     margin-top:130px !important;
 }
}
.phone{
    display:none;
}
@media(max-width: 768px) {
    .phone{
    display:block;
}
.phone {
        position: absolute;
        z-index: 9999;
        width: 101%;
        top: 10px;


  Display: flex;
  justify-content: center;
  align-items: center;
  /*box-shadow: 30px 50px 100px #85888C;*/
}
.phone .content {

  border-radius: 20px;
  width: 94%;
  height: 91%;

  overflow: hidden;
}
.phone nav {

  /*height: 90vh;*/
}
.h-90{
    height:90vh;
}
.pd {
    padding: 55px 0px;
}
.phone #menuToggle {
  display: flex;
  flex-direction: column;
  position: relative;

  z-index: 1;
  -webkit-user-select: none;
  user-select: none;
}

.phone #menuToggle input
{
  display: flex;
  width: 40px;
  height: 32px;
  position: absolute;
  cursor: pointer;
  opacity: 0;
  z-index: 2;
}

.phone #menuToggle span
{
  display: flex;
  width: 29px;
  height: 2px;
  margin-bottom: 5px;
  position: relative;
  background:#03727d;
  border-radius: 3px;
  z-index: 1;
  transform-origin: 5px 0px;
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.55s ease;
}

.phone #menuToggle span:first-child
{
  transform-origin: 0% 0%;
}

.phone #menuToggle span:nth-last-child(2)
{
  transform-origin: 0% 100%;
}

.phone #menuToggle input:checked ~ span
{
  opacity: 1;
  transform: rotate(45deg) translate(-3px, -1px);
  background: #fff;
}
.phone #menuToggle input:checked ~ span:nth-last-child(3)
{
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
}

.phone #menuToggle input:checked ~ span:nth-last-child(2)
{
  transform: rotate(-45deg) translate(0, -1px);
}

.phone #menu
{
  position: absolute;
  width: 90vh;
  height: 90vh;
  box-shadow: 0 0 10px #85888C;
  margin: -50px 0 0 -50px;
  padding: 50px;
  padding-top: 125px;
  background-color:#05737e;
  -webkit-font-smoothing: antialiased;
  transform-origin: 0% 0%;
  transform: translate(-100%, 0);
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}
.phone  ul li a{
    font-size:16px;
}
.phone #menu li
{
  padding: 10px 0;
  transition-delay: 2s;
}




/* Navigation container */
.phone .nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
            background: rgba(250, 250, 250, 0.5);
}

/* Menu toggle (hamburger) stays on the left */
.phone #menuToggle {
    flex: 1;
}

/* Logo on the right */
.phone .logo img {
    max-width: 120px; /* Adjust logo size */
    height: auto;
}

/* Responsive: Adjust for smaller screens */

   .phone .logo img {
        max-width: 150px; /* Adjust logo size for small screens */
    }



/* Styles for the phone dropdown */
.phone-dropdown {
    position: relative;
}

.phone-dropdown-menu {
    display: none;
    position: absolute;
    left: 0;
    top: 100%;
    background: #fff;
    list-style: none;
    padding: 0;
    margin: 0;

    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}

.phone-dropdown-menu li {
    display: block;
}

.phone-dropdown-menu li a {
    display: block;
    padding: 10px;
    color: #333;
    text-decoration: none;
    background: #f9f9f9;
}

.phone-dropdown-menu li a:hover {
    background: #ddd;
}

/* Toggle class */
.phone-dropdown-menu.show {
    display: block;
}
.phone-dropdown ul li{
    padding:0 !important;
}







.phone #menuToggle input:checked ~ ul
{
  transform: none;
}
    .navbar-responsive{
        display:none;
    }
     #mainNavigation .active{
        color:#fff;
    }
   #mainNavigation ul li a{
        color:#fff !important;
    }
    .nav-item {
    min-width: 100%;
}
    .row.blogs-pr{
        padding:0;
    }
    .blog-thumb img{
        width:100%;
    }
    .single-blog-dtls-box img{
        width:100%;
    }
    .team__area-right-slide-item-content{
        padding:2px;
    }
        .team__area h4{
            padding:0 !important;
        text-align:center;
    }
        .team__area p{
                    text-align:center;
        }
        .team__area p {
    font-size: 12px !important;
}
    .dropdown:hover .dropdown-menu {
        display: block;
        margin-top: 0;
      }
   
    .service-box-content {
    padding: 7px 20px;
}
    .service-box a {
        left:43%;
    }
    .copyrights p{
  font-size: 14px;
  text-align:center;

}
    .owl-theme .owl-dots .owl-dot{
        display:none !important;
    }
    .navbar-dark .navbar-toggler{
        color:#037582 !important;
    }
    .socil_item_inner {
        padding:10px 0;
    }
    .socil_item_inner {
        margin:0 auto;
    }
    .contact_field {
        padding:10px 20px;
    }
    
      .contact_info_sec {
          border-radius:25px;
                 margin: 20px auto;
        position:static;
    }
  .project-details__details li:before{
    right: 13px;
  }
  .project-details__details-box{
    margin-right: 10px;
    margin-left: 10px;
  }
  .project-details__details{
    /* display: block; */
    padding: 15px 10px;
  }
  .service-two{
    padding: 10px 0;
  }
  .inner-content {
    margin-top: 100px;
}
  .project-single {
    width: 95%;
    margin: 0 auto;
}
    .fixed-menu {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 100%;
   background-color: rgba(0, 0, 0, 1);
   box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
    .logo-img{
        height:60px;
    }
.navbar-toggler .align-middle{
    color:#4b907d;
}

    .about-img img{
      width: 100%;
    }
    .section-title:before{
      display: none;
    }
    .section-title:after{
      display: none;
    }
    .section-title h2:before{
      display: none;
    }
    .section-title h2:after{
      display: none;
    }
    .part{
      display:block;
     }
     .category{
      display: none;
     }
     .about-img .client-count {
      display: none;
     }
     .service-box:after {
      left: 46%;
     }
     .tp-caption{
         padding:74px 10px !important;
     }
   .brand-info img{
        height:60px;
    }
    .footer .social-list{
        float:none;
    }
}
@media(min-width: 1200px) and (max-width: 1400px){
    .service-two{
        margin-top:86px !important;
    }
  
    .form-control{
        width:70% !imoortant;
    }
 input[type='text']{
       width:70% !important;
   }
    button.contact_form_submit {
        width:70%;
    }
    .contact_info_sec {
        width:313px;
        top:5%;
    }
    .contact_field {
        padding:30px;
    }
    .contact_inner{
             margin-top: 65px !important;
}
    .service-two {
   
    }
    .about-inner {
    margin-top: 127px !important;
}
    .projects-page {
        margin-top:93px !important;
}
    .project-details__details {
        padding:10px 60px;
        border-top-right-radius: 30px;
    border-bottom-left-radius: 30px;
    border-bottom-right-radius: 0px;
    }
  .project-three__img img {
    height: 300px;
  }
  .inner-content{
    margin-top: 36px;
  }

  .project-details__details-box {

    margin-left: 27px;
    margin-right: 27px;

}
  .project-details__details li:before {
    right:-25px
  }
  .project-single {
    width: 57%;
    margin: 0 auto;
}
.logo-img{
  height: 65px;
}
.services h5 {
  font-size: 12px;
}
ul.infoGraphic li{
  max-width: 21em;
}
ul.infoGraphic li .content h4{
  font-size: 1.3em;
}
ul.infoGraphic li img{
  width: 50px;
  height: 50px;
}
.section-title {
  font-size: 14px;
}
.section-title:after{
  /*left: 265px;*/
}
.section-title h2:before {
  left: 266px;
}
.services .section-title:after{
  left: 310px;
}
.services .section-title h2:before{
  left: 310px;
}
.team__area .section-title:after{
  left: 170px;
}
.team__area .section-title h2:before{
  left: 170px;
}
    .about-img img {
        width: 74%;
    }
    .brand-info img{
        height:60px;
    }
}


