/* Responsive CSS Document */





@media (min-width: 992px) {
	.container {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
}

@media (max-width: 1366px) {
  .scroll-top {bottom: 30px; right:30px;}
}
@media (max-width: 1199px) {
  .about-company .right-side {padding: 0;}
  .latest-news .row {margin-right: -15px;margin-left: -15px;}
  .latest-news .news-slider .item {margin-right: 15px;margin-left: 15px;}
  .theme-menu-two .main-menu {padding-left: 0;}
}
/*(max-width: 1199px)*/

@media (max-width: 991px) {
  .header-style-one .right-side .header-top-area .single-content {float: none;margin: 20px 18px 0 18px;display: inline-block;vertical-align: middle;text-align: left;}
  .header-style-one .right-side .header-top-area {text-align: center;margin-bottom: 20px;}
  .header-style-one .right-side {width: 100%;}
  .header-style-one .logo,.header-style-two .logo {float:none; text-align: center;margin-bottom: 20px;}
  .about-company .left-side,.company-info .left-side,.client-slider h4 {text-align: left;padding-bottom: 40px;padding-right: 0;}
  .about-company .left-side a {margin-top: 25px;}
  .about-company .single-box .number {font-size: 50px;}
  .recent-project .title-wrapper .nav-list-wrapper {width: 100%;margin-right: 0;padding-right: 115px;padding-top: 20px;}
  .client-slider .client-slider-wrapper {padding-left: 0;}
  .client-slider .owl-carousel .owl-controls {left:0; bottom: -40px;}
  .our-team .left-side {text-align: left;}
  .our-team .wrapper {padding-left: 0;margin-top: 30px;}
  footer .footer-logo,footer .footer-link,footer .footer-twitter-feed,footer .footer-address {padding-left: 20px;padding-right: 20px;margin-bottom: 60px;}
  footer .top-footer {margin: 0 -20px 0 -20px;}
  .contact-us-form {margin-top: 50px;}
  .header-style-two .bottom-header .right-side {float:none;}
  .theme-menu-two {position: relative;left:auto;bottom: auto;margin-bottom: -33px;}
  .about-company.about-us-page-fix .left-half,.about-company.about-us-page-fix .right-half,.about-company.about-us-page-fix .left-half .img-wrapper .single-img img {width: 100%;}
  .about-company.about-us-page-fix .right-half {padding: 0 0 40px 0;}
  .theme-large-grid,.service-details-page .service-details-content {width: 100%;padding-right: 0;padding-bottom: 60px;padding-left: 0;}
  footer .bottom-footer {margin-top: 0;}
  .contactUs-address {padding-left: 0;padding-top: 50px;}
}
/*(max-width: 991px)*/

@media (min-width: 992px) and (max-width: 1199px) {
  .header-style-one .logo,.header-style-two .logo {width: 25%;}
  .header-style-one .right-side {width: 72%;}
  .header-style-one .main-menu .navbar-nav > li> a {padding-left: 8px;padding-right: 8px;}
  .service-offer .service-single-content .img a {padding-left: 15px;}
  .about-company .left-side h4 {font-size: 30px;}
  .company-info .left-side h4 {font-size: 36px;}
  .company-info .right-side .single-box p {font-size: 19px;}
  .recent-project .title-wrapper .nav-list-wrapper .nav li a {padding: 0 9px;}
  .recent-project .title-wrapper .nav-list-wrapper {width: 54%;margin-right: 95px;}
  .latest-news .single-news .post a {font-size: 22px;}
  footer .footer-link ul:nth-child(2) {margin-right: 25px;}
  footer .footer-link {padding-left: 35px;}
  .header-style-two .bottom-header ul li form {width: 215px;}
  .header-style-two .bottom-header ul li {margin-left: 30px;}
  .header-style-two .bottom-header ul li.bar-fix {margin-left: 15px;}
  .theme-menu-two .main-menu .navbar-nav > li> a {padding: 0 15px;}
  .theme-large-grid {padding-right: 40px;}
  .shop-details-wrapper .product-history .img {width: 40%}
  .shop-details-wrapper .product-history .product-info {width: 60%;}
  .theme-sidebar .sidebar-recentNews .single-post .text {width: 71%;padding-left: 10px;}
  .shop-details-wrapper .related-product .item ul {width: 100%;}
  .shop-details-wrapper .related-product .item a.item-name {font-size: 20px;}
  .service-details-page .service-sidebar {width: 28%;}
  .service-details-page .service-details-content {width: 72%;padding-left: 40px;}
  .single-blog-page .blog-post-container .single-blog-post .post-text h4 a {font-size: 26px;}
  .blog-details-page .post-meta-content .comment-box-wrapper .comment {width: 83%;}
  .contactUs-address .single_address .text {width: 89%;}
}
/*(min-width: 992px) and (max-width: 1199px)*/

@media (min-width: 768px) and (max-width: 991px) {
  .header-style-one .main-menu .navbar-nav > li> a {padding-left: 10px;padding-right: 10px;}
  .service-offer .container>p {padding-right: 107px;}
  .about-company .single-box p {font-size: 16px;}
  .news-subscribe form button {width: 24%;}
  .news-subscribe .single-input {width: 38%;}
  footer .footer-logo,footer .footer-link,footer .footer-twitter-feed,footer .footer-address {width: 50%;}
  .header-style-two .bottom-header ul li {margin-left: 35px;}
  .header-style-two .bottom-header ul li.bar-fix {margin-left: 0;}
  .theme-menu-two .main-menu .request-quote {display: none;}
  .theme-menu-two .main-menu .navbar-nav > li> a {padding: 0 14px;}
  .theme-sidebar,.service-details-page .service-sidebar {width: 50%;}
  .our-project .gallery-menu-wrapper ul li {padding: 0 20px;}
  .blog-details-page .post-meta-content .comment-box-wrapper .comment {width: 85%;}
  #banner h1 {font-size: 45px;}
}
/*(min-width: 768px) and (max-width: 991px)*/

@media (max-width: 767px) {
  .scroll-top {bottom: 10px; right:5px;}
  footer .footer-logo,footer .footer-link,footer .footer-twitter-feed,footer .footer-address {width: 100%;}
  .header-style-one {position: relative; background: #2c2c2c;}
  .main-menu .navbar-nav,.header-style-one .main-menu .navbar-nav > li {margin:0;}
  .header-style-one .main-menu .navbar-nav > li> a>i,.theme-menu-two .main-menu .navbar-nav > li> a>i,.theme-menu-two .main-menu .navbar-nav > li> a:before {display: none;}
  .main-menu .navbar-nav > li> .fa {display: block;}
  .main-menu .navbar-collapse {box-shadow: none;border: none;}
  .main-menu .navbar-nav>li.dropdown-holder .sub-menu {
    display: none;
    width: 100%;
    position: static;
    opacity: 1;
    visibility: visible;
    -webkit-transition: none;
       -moz-transition: none;
        -ms-transition: none;
         -o-transition: none;
            transition: none;
  }
  .header-style-one .main-menu .navbar-nav > li> a,.theme-menu-two .main-menu .navbar-nav > li> a {padding: 0;line-height: 42px;}
  .service-offer .all-service-button {position: static;}
  .recent-project .title-wrapper .nav-list-wrapper {padding-right: 0;}
  .recent-project .owl-carousel .owl-controls {top:-45px;}
  .recent-project .title-wrapper .nav-list-wrapper .nav li {float:none;}
  .recent-project .title-wrapper .nav-list-wrapper .nav li a {border-right:1px solid #4a4a4a;}
  .our-team .team-member .single-member .img img,.latest-news .single-news .img img {width: 100%;}
  .our-team .team-member .single-member {margin-bottom: 30px;}
  .news-subscribe .single-input {width: 100%;}
  .news-subscribe .single-input.fix {padding: 0;margin: 20px 0;}
  .news-subscribe form button {width: 200px;}
  .header-style-two .bottom-header ul {text-align: center;}
  .header-style-two .bottom-header ul li {width: 100%;margin: 15px 0;}
  .header-style-two .bottom-header ul li.bar-fix {margin-left: 0; padding: 0;}
  .header-style-two .bottom-header ul li .ficon:before {position: static;}
  .header-style-two .bottom-header ul li form {margin: 0 auto;}
  .theme-menu-two .main-menu {padding-left: 15px;padding-right: 15px;}
  .theme-menu-two .main-menu .navbar-toggle {margin: 15px 0 16px 0;}
  .theme-sidebar,.service-details-page .service-sidebar {width: 100%;}
  .our-project .gallery-item-wrapper .single-project-item .opacity>div h4 {font-size: 20px;margin-bottom: 20px;}
  .our-project .gallery-menu-wrapper ul {display: block;border: none; text-align: center;}
  .single-blog-page .blog-post-container .single-blog-post .post-text ul li {margin-top: 8px;}
  .blog-details-page .post-meta-content .comment-box-wrapper .single-comment img {width: 14%;}
  #banner h1 {font-size: 35px; line-height: 48px;}
  #banner h3 {font-size: 20px;}
  .our-project .gallery-menu-wrapper ul li,.our-project .gallery-menu-wrapper ul li:last-child {float:none; display: inline-block; border: 1px solid #f0f0f0;margin: 6px 3px;}
}
/*(max-width: 767px)*/

@media (max-width: 650px) {
  .contact-us-form #success,
  .contact-us-form #error {
    width: 84%;
    height: auto;
    top: calc(50% - 50px);
    left: 8%;
    padding: 30px 10px;
    margin:0;
  }
  .shop-item-wrapper .single-item {width: 100%;}
}

@media (max-width: 600px) {
  .shop-details-wrapper .product-history .img,.shop-details-wrapper .product-history .product-info {width: 100%;}
  .shop-details-wrapper .product-history .product-info {padding: 40px 0 0 0;}
  .our-project #mixitup-list .col-xs-6,.our-project .gallery-item-wrapper .single-project-item img,.service-details-page .service-details-content .work-strategy img {width: 100%;}
  .service-details-page .service-details-content .work-strategy .text {width: 100%;padding-left: 0;padding-top: 25px;}
  #banner h1 {font-size: 30px;}
}

@media (max-width: 500px) {
  .header-style-two .top-header p,.header-style-two .top-header ul {float:none;text-align: center;}
  .header-style-two .top-header ul li {float:none; display: inline-block;margin-top: 10px; margin-bottom: 10px;}
  .header-style-two .top-header ul li a {border:1px solid #3e3e3e;}
  .single-blog-page .blog-post-container .single-blog-post .post-text h4 a {font-size: 25px;line-height: 34px;}
  .blog-details-page .post-meta-content .comment-box-wrapper .reply-comment {margin-left: 30px;}
  .blog-details-page .post-meta-content .comment-box-wrapper {padding-left: 10px;padding-right: 10px;}
}

@media (max-width: 480px) {
  .our-team.team-single-page .col-xs-6 {width: 100%;}
  .blog-details-page .post-meta-content .share-option ul {width: 100%;margin-top: 10px;}
  .blog-details-page .post-meta-content .share-option ul li {margin-right: 12px;margin-left: 0;}
  .contactUs-address .single_address .text {width: 100%;padding-left: 0;}
  #banner h1 {font-size: 25px;}
  #banner h3 {font-size: 16px;}
}

@media (max-width: 450px) {
   .contact-us-form form,.blog-details-page .post-meta-content .leave-reply form {padding-left: 20px;padding-right: 20px;}
   .inner-banner .opacity h2 {font-size: 45px;}
   .page-navigation .share {width: 100px;}
   .blog-details-page .post-meta-content .comment-box-wrapper .comment button {position: static; margin-top: 10px;}
}

@media (max-width: 380px) {
  .service-offer .service-single-content .img a h3 {font-size: 16px;}
  .service-offer .service-single-content .img a {padding-left: 20px;}
  .theme-title-style {font-size: 25px;}
  .theme-title-style:before {width: 160px;}
  .client-slider .client-slider-wrapper .name {padding-left: 0;padding-top: 20px; width: 100%;}
  .latest-news .owl-carousel .owl-controls {top:-50px;}
  .theme-menu-two .main-menu .request-quote {width: 215px;font-size: 18px;}
  .news-subscribe input {padding: 0 10px 0 15px;}
  .shop-item-wrapper .single-item a.add-cart {position: relative; margin-top: 15px;}
  .theme-sidebar .sidebar-recentNews .single-post .text {width: 72%;}
  .theme-sidebar form input {padding-left: 15px;}
  .shop-details-wrapper .related-product h4 {margin-bottom: 75px;}
  #banner .tp-caption {display: none;}
}



/* ===== Default desktop logo size ===== */
.header-style-one .logo img,
.header-style-two .logo img {
  max-width: 271px;   /* set a fixed max size for big screens */
  height: auto;
  display: inline-block;
}

/* ===== Fix header logo float/size for small screens ===== */
@media (max-width: 991px) {
  .header-style-one .logo,
  .header-style-two .logo {
    float: none !important;
    text-align: center;
    margin: 0 auto 20px;
    display: block;
  }

  .header-style-two .logo.float-left,
  .header-style-one .logo.float-left {
    float: none !important;
  }

  .header-style-two .logo img,
  .header-style-one .logo img {
    max-width: 336px;
  }
}

@media (max-width: 480px) {
  .header-style-two .logo img,
  .header-style-one .logo img {

    max-width: 300px !important;  /* was 110px */
    max-width: 300px;

  }
}

@media (max-width: 360px) {
  .header-style-two .logo img,
  .header-style-one .logo img {
    max-width: 130px !important;  /* was 90px */
  }
}

/* ===== Extra-large screens (like 1400px and above) ===== */
@media (min-width: 1400px) {
  .header-style-one .logo img,
  .header-style-two .logo img {
    max-width: 335px;  /* or 350px depending on how big you want */
  }
}
/* end */



/* ===== Fix mobile navbar z-index issue ===== */
/* This ensures the mobile menu appears above the banner and other elements */

/* ===== Search Dropdown Mobile Fix ===== */
@media (max-width: 991px) {
  /* Ensure search container has higher z-index on mobile */
  .search-container {
    position: relative;
    z-index: 10000 !important; /* Higher than mobile navbar's 9999 */
  }
  
  /* Search results dropdown */
  .search-results {
    position: absolute;
    top: 100%;
    left: 59px;
    width: 68%;
    z-index: 10001 !important; /* Even higher to be above everything */
  }
  
  /* Ensure mobile nav stays below search when open */
  .mobile-nav-links {
    position: relative;
    z-index: 9998 !important; /* Below search dropdown */
  }
}

/* END */


/* ===== Search Dropdown - Proper Width for All Devices ===== */

/* Desktop - dropdown matches search input width */
.search-container {
  position: relative;
  width: 250px; /* matches form width from style.css */
}

/* ====== SEARCH DROPDOWN (Desktop Style - White with Light Grey Text + Yellow Hover) ====== */
.search-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  width: auto;
  background: #ffffff; /* white background */
  border: 1px solid #e5e5e5; /* light border */
  border-radius: 6px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* subtle dropdown shadow */
  padding: 6px 0;
  margin-top: 5px;
  display: none;
  z-index: 10000 !important;
  opacity: 0;
  transform: translateY(-6px);
  transition: all 0.3s ease;
  box-sizing: border-box;
}

/* Show dropdown */
.search-results.show {
  opacity: 1;
  transform: translateY(0);
  display: block;
}

/* Each search result item */
.search-results a.result-item {
  display: block;
  padding: 10px 16px;
  font-size: 15px;
  color: #76808a; /* light grey text like menu dropdown */
  background: #fff;
  text-decoration: none;
  border-bottom: 1px solid #f2f2f2;
  transition: color 0.25s ease;
}

/* Hover - only text turns yellow */
.search-results a.result-item:hover {
  color: #fac800; /* yellow text on hover */
  font-weight: 600; /* slightly bold for clarity */
  background: #fff; /* stay white */
}

/* Remove border for last item */
.search-results a.result-item:last-child {
  border-bottom: none;
}

/* No results message */
.search-results .no-results {
  background: #fff;
  color: #777;
  font-style: italic;
  padding: 10px 16px;
}

/* ===== Responsive Adjustments ===== */

/* Desktop - dropdown matches search input width */
.search-container {
  position: relative;
  width: 250px; /* same as search input width */
}

/* Mobile - full width */
@media (max-width: 991px) {
  .search-container {
    position: relative;
    z-index: 10000 !important;
    width: 100%;
  }

  .search-results {
    max-height: 250px;
    overflow-y: auto;
    font-size: 14px;
    left: 0;
    right: 0;
    width: 100%;
  }

  .search-results a.result-item {
    padding: 8px 12px;
    font-size: 14px;
    line-height: 1.3;
  }

  .search-results .no-results {
    padding: 8px 12px;
    font-size: 14px;
  }
}

/* Very small phones */
@media (max-width: 480px) {
  .search-results {
    max-height: 200px;
    font-size: 13px;
  }

  .search-results a.result-item {
    padding: 6px 10px;
    font-size: 13px;
  }

  .search-results .no-results {
    padding: 6px 10px;
    font-size: 13px;
  }
}

/* Smooth fade-slide animation for dropdown items */
.search-results.show a.result-item {
  opacity: 0;
  transform: translateX(-6px);
  animation: fadeSlideIn 0.3s ease forwards;
}
.search-results.show a.result-item:nth-child(1) { animation-delay: 0.05s; }
.search-results.show a.result-item:nth-child(2) { animation-delay: 0.1s; }
.search-results.show a.result-item:nth-child(3) { animation-delay: 0.15s; }
.search-results.show a.result-item:nth-child(4) { animation-delay: 0.2s; }

@keyframes fadeSlideIn {
  0% { opacity: 0; transform: translateX(-6px); }
  100% { opacity: 1; transform: translateX(0); }
}



/* END */