section.packages .package-box .pricebox span { 
      width: 150px;
      }
      .onload-dialog .professional-box .u1 {
      margin-left: 50px;
      text-align: center;
      }
      .modal-close-13.close {
      background: #fff;
      border: 0;
      float: right;
      border-radius: 30px;
      width: 36px;
      height: 35px;
      margin: -30px;
      } 
      /*.e-commerce, .all.e-commerce {*/
      /*float: left;*/
      /*opacity: 1 !important;*/
      /*padding: 10px;*/
      /*position: relative !important;*/
      /*left: 0 !important;*/
      /*transform: unset !important;  */
      /*transition-duration: unset !important;*/
      /*transition-property: unset !important;*/
      /*top: 0 !important;*/
      /*}*/
      .package-box h4 {
      text-align: left;
      color: #0340a8;
      font-weight: 600;
      }
      .accordion p {
    float: left;
    color: #fff;
    margin: 0;
}
      .package-box h5 {
      text-align: left;
      color: #0340a8;
      font-weight: 600;
      }
      .footer3 #send_message {
      position: absolute;
      width: 40px;
      height: 40px;
      opacity:0;
      }
      .customer-box .professional-box {
      border-radius: 0;
      }
      .customer-box .professional-box::before {
      display:none;
      }
      .video-animation-tab-box .element-item.col-md-4.automotive {
      float: left;
      opacity: 1;
      transform: unset !important;
      transition-duration: unset !important;
      transition-property: unset !important;
      position: relative !important;
      opacity: 1 !important;
      }
      .subscribe-button {
      position: relative;
      top: 7px;
      right: 97px;
      }
      .modal-dialog.onload-dialog {
      pointer-events: all;
      max-width: 420px;
      }
      #mySidenav a {
      position: absolute;
      right: -172px;
      transition: 0.3s;
      padding: 15px;
      width: 220px;
      text-decoration: none;
      font-size: 14px;
      color: white;
      border-radius: 5px 0 0 5px;
      }
      #mySidenav a:hover {
      right: 0;
      }
      #about {
      top: 20px;
      background-color: #0340a8;
      }
      #blog {
      top: 80px;
      background-color: #0340a8;
      }
      #projects {
      top: 226px;
      background-color: #0340a8;
      transform: rotate(-90deg);
      right: -90px !important;
      border-radius: 5px 5px 0px 0px !important;
      text-align: center;
      }
      #contact {
      top: 200px;
      background-color: #555
      }
      #mySidenav {
      position: absolute;
      top: 100px;
      right: 0;
      }
      .sidenav .fa {
      font-size: 24px;
      margin-right: 10px;
      }/*
      .new-pf .grid { 
      height: 800px !important;
      }*/
      #button {
      display: inline-block;
      background: rgb(0, 82, 143);
      width: 50px;
      height: 50px;
      text-align: center;
      text-decoration: none;
      border-radius: 200px;
      position: fixed;
      bottom: 10px;
      right: 160px;
      transition: background-color .3s, 
      opacity .5s, visibility .5s;
      opacity: 0;
      visibility: hidden; 
      z-index: 99999;
      }
      #button::after {
      content: "\f077";
      font-family: FontAwesome;
      font-weight: normal;
      font-style: normal;
      font-size: 1.5em;
      line-height: 50px;
      color: #fff;
      }
      #button:hover {
      cursor: pointer;
      background: rgb(0, 0, 0);
      }
      #button:active {
      background-color: #000;
      }
      #button.show {
      opacity: 1;
      visibility: visible;
      }
      .bg-black {
      background: #000;
      }
      .row.grid1 {
      height: 1060px !important;
      } 
      .element-item1.web-design {
      display: block !important;
      }
      #nav-tab.nav-tabs .nav-link { 
      border-radius: 5px !important; 
      padding: 11px 27px;
      background: #fff;
      margin-bottom: 8px;
      border: 1px solid #0064a1 !important;
      text-transform: uppercase;
      font-weight: 300; 
      -webkit-transition: all .2s ease-in; 
      }
      #nav-tab .nav-link {
      float: left;
      list-style: none;
      margin: 0 20px;
      }
      #nav-tab .nav-link.active {
      background: #0064a1 !important;
      color: #fff;
      border-bottom: 3px solid #000 !important;
      }
      @media only screen and (min-width: 320px) and (max-width: 767px) {
      .navbar-light .navbar-toggler { 
      border-color: #fff;
      }
      .navbar-light .navbar-toggler-icon {
      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
      }
      .modal-cloase-13.close { 
      left: 92% !important; 
      top: -15px !important;
      }
      .modal-close-13.close { 
      margin: 0;
      }
      .logo-box { 
      width: 80%;
      }
      .header-bg {
      /*background: #00285c url(../images/studio-bg.png);*/
      /*padding-bottom: 200px;*/
      }
      .slick-slide img { 
      width: 100%;
      margin: 0 10px;
      }
      .slick-slide { 
      float: left; 
      width: 100px !important;
      margin: 0 5px;
      }
      .navbar-light .navbar-nav .nav-link { 
      padding-top: 15px; 
      }
      .navbar .d-flex { 
      width: 100%;
      }
      .drop-menu {
      top: 100%;
      min-width: 100%;
      height: 430px;
      position:relative;
      }
button.accordion p {
    color: #fff;
    margin: 0;
    float: left;
}
      .sec2 .row.brand-service {
      margin-top: 20px;
      }
      .navbar-toggler:focus { 
      box-shadow: none;
      }
      .header-bg .navbar-nav .nav-item {
      margin-right: 0;
      }
      section.packages .package-box {
      width: 100%;
      height: 430px;
      }
      .row.grid1 {
      height: 100 !important;
      }
      .customer-detail h1 { 
      font-size: 32px;
      line-height: 40px;
      width: 100%; 
      }
      div#jm-project-manager img {
      width: 100%;
      }
      div#jm-project-manager h1 { 
      font-size: 32px; 
      line-height: 40px; 
      margin-top: 30px;
      }
      ul.jm-project-manager-list li { 
      width: 100%; 
      }
      /*#testimonil { */
      /*background-image: none !important;*/
      /*}*/
      /*div#testimonil h1 { */
      /*font-size: 32px; */
      /*margin-bottom: 40px;*/
      /*}*/
      .professional-box::after {
      display:none;
      }
      .sec-footer { 
      padding-top: 50px;
      padding-bottom: 50px; 
      padding-left: 30px;
      padding-right: 30px;
      }
      .de-flex { 
      display: flow-root;
      }
      ul.menu-simple li { 
      margin: 0 30px 0 0;
      }
      .form-border .u1 {
      margin-left: 0;
      }
      .element-item { 
      width: auto !important; 
      }
      #packagesd-3 .row.grid1 {
      height: 3050px !important;
      }
      /*.testimonil-box p { */
      /*font-size: 13px;*/
      /*line-height: 20px; */
      /*}*/
      /*.testimonil-box { */
      /*padding: 40px 15px;*/
      /*margin: 0 0px 20px 0; */
      /*}*/
      .footer1 img {
      width: 100%;
      }
      .social-icons a i {
      padding: 8px 8px;
      width: auto;
      }
      .footer3 a#btn-subscribe {
      left: -44px;
      }
      .footer-form {
      width: 82%;
      }
      .u1 {
      margin-left: 0;
      }
      .u3 h4 {
      font-size: 15px;
      }	  
      .professional-box.shadow {
      padding: 30px !important;
      }
      a.customer-detail1 { 
      padding: 10px 10px;
      }
      .actions2 .col-md-6 {
      width: 50%;
      } 
      .actions2 a span {
      font-size: 9px;
      }  
      section.packages .package-box .pricebox h3 {
      font-size: 32px;
      }
      section.packages .package-box .pricebox span {
      font-size: 16px;
      }
      section.packages .package-box .pricebox strike {
      font-size: 15px;
      }
      }
      @media only screen and (min-width: 768px) and (max-width: 1199px) {
      .banner-caption .col-md-6 {
      width: 100%;
      }
      .logo-box {
      width: 90%;
      }
      .navbar-light .navbar-toggler { 
      border-color: #fff;
      }
      .navbar-light .navbar-toggler-icon {
      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
      }
      .navbar-light .navbar-nav .nav-link { 
      padding-top: 15px; 
      }
      .navbar .d-flex { 
      width: 100%;
      }
      .drop-menu {
      top: 100%;
      min-width: 100%;
      height: 410px;
      position: relative;
      }
      .customer-detail h1 { 
      font-size: 32px;
      line-height: 50px;
      width: 100%; 
      }
      .navbar-toggler:focus { 
      box-shadow: none;
      }
      .header-bg .navbar-nav .nav-item {
      margin-right: 0;
      }
      .banner-caption h1 { 
      font-size: 42px;
      }
      .header-bg {   
      background-position: center -70px;
      height: 1240px;
      }
      .slick-slide img { 
      width: 100%; 
      padding: 0 10px;
      }
      .col-md-3.boxx {
      flex: 0 0 auto;
      width: 50%;
      float: left;
      }
      /* .search-section-box { 
      height: 100%; 
      padding-bottom: 50px;
      }*/
      section.packages a.grad-btn { 
      padding: 10px 15px; 
      }
      .actions a span {
      font-size: 11px; 
      }
      section.packages .col-md-4 { 
      width: 50% !important;  
      }
      #packagesd-3 .row.grid1 {
      height: 1660px !important;
      } 
      #jm-project-manager .col-md-6 {
      width: 100%;
      }
      #testimonil { 
      background-image: none;
      }
      .testimonil-box { 
      padding: 20px 20px;
      margin: 0 10px 20px 0; 
      }
      .testimonil-box p { 
      font-size: 13px;
      line-height: 23px; 
      } 
      .social-icons a i { 
      padding: 10px 10px; 
      margin: 0 auto 10px; 
      width: auto;
      } 
      .footer3 a#btn-subscribe {
      left: 80px;
      position: relative;
      top: -48px;
      } 
      .footer-form {
      width: 100%; 
      }
      .form-border .u1 {
      margin-left: 0;
      }.professional-box::after {
      display:none;
      }
      .sec-footer { 
      padding-top: 50px; 
      }
      .banner-caption h1 {
      margin-top: 100px;
      }
      .banner-caption {
      margin-top: 0px;
      }
      .header-bg {
      background-position: center 80px;
      height: 500px;
      padding-bottom: 0;
      }
      .banner-caption p {
      width: 60%;
      }
      #showMore { 
      margin-top: 20px;
      }
      .second-f a {
      font-size: 13px;
      }  
      .footer1 img {
      width: 80%;
      }
      .u3 h4 {
      font-size: 16px;
      }
      section.packages .package-box .pricebox h3 {
      font-size: 40px;
      }
      section.packages .package-box .pricebox strike {
      font-size: 16px; 
      }
      section.packages .package-box .pricebox span {
      font-size: 16px;
      }
      section.packages a.grad-btn {
      top: 50px;
      }
      .t1 h5 {
      font-size: 14px;
      }
      }
      @media only screen and (min-width: 1200px) and (max-width: 1400px) {
      .actions a span {
      font-size: 11px; 
      }
      section.packages a.grad-btn { 
      padding: 10px 15px; 
      font-size: 13px; 
      }
      section.packages .col-md-4 {
      margin: 0 0 40px;
      width: 33%;
      }
      #packagesd-3 .row.grid1 {
      height: 1660px !important;
      }
      #testimonil { 
      background-image: none;
      }
      .professional-box::after {
      display:none;
      }
      .sec-footer { 
      padding-top: 130px; 
      }
      .header-bg { 
      background-position: 0px 60px; 
      /*padding-bottom: 90px;*/
      }
      .banner-caption {
      margin-top: 0;
      }
      .banner-caption h1 { 
      margin-top: 150px;
      }
      }
      .professional-box { 
      border-radius: 22px; 
      }
      .professional-box::before {
      content: "";
      position: absolute;
      display: block;
      width: 104%;
      left: -8px;
      right: 0;
      top: -8px;
      border-radius: 22px;
      height: 126px;
      background: #00528f;
      z-index: -1;
      }
      .pl.u1 {
      margin-left: 60px;
      } 	  
      .modal-cloase-13.close {
      position: absolute;
      top: -10px;
      left: 397px;
      right: 0;
      color: #555;
      background: #fff;
      border: 0;
      font-size: 25px;
      cursor: pointer;
      z-index: 999999;
      margin: 0 auto;
      border-radius: 50px;
      width: 40px;
      }	  
      /*  
      #myModal .close {
      position: absolute;
      right: 0;
      left: 700px;
      margin: 0 auto;
      z-index: 999;
      color: #555;
      background: transparent;
      border: 0;
      font-size: 24px;
      cursor: pointer;
      float: right;
      top: 175px;
      }  
      */ 
      .professional-box .u1 {
      margin-left: 0;
      }	  
     
          .accordion {
      background-color: #00528f;  
      margin: 5px 0;
    }

    .accordion::after {
    content: '+';
    font-size: 24px;
    position: absolute;
    right: 20px;
    color: #fff;
    }

    .accordion.active::after {
      content: '-';
    }

    .panel {
      padding: 0 18px;
      display: none;
      background-color: white;
      overflow: hidden;
    }

   .faq {
    max-width: 100%;
    float: left;
    margin: 0;
    width: 100%;
}


.footer2 li {
    list-style: none;
    line-height: 40px;
    position: relative;   /* 👈 ye add karo */
    padding-left: 25px;   /* 👈 icon ke liye jagah */
}

.footer2 ul li:before {
    position: absolute;
    content: url(../images/f-b.png);
    left: 0;
    top: 50%;
    transform: translateY(-50%); /* center align vertically */
}

     /* parent row ko properly reset karo */
.row {
  margin-left: 0;
  margin-right: 0;
}

/* har col ko padding control */
.element-item1 {
  padding: 15px;
  box-sizing: border-box;
}

/* images, box ya content overflow ko rokna */
.package-box {
  width: 100%;
  overflow: hidden;
}

/* kisi bhi grid ka float clear karo */
.element-item1.col-md-4 {
  float: left;
}



/* Default dropdown */
.nav-item.menu-item .drop-menu {
    display: none;
    position: absolute;
    background: #000; /* dark background */
    list-style: none;
    padding: 0;
    margin: 0;
    z-index: 999;
}

/* Show first-level dropdown */
.nav-item.menu-item:hover > .drop-menu {
    display: block;
    top: 100%;          /* header ke bilkul neeche */
    margin-top: 0;      /* gap hata do */
    border-radius: 6px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

/* Items */
.nav-item.menu-item .drop-menu li {
    position: relative;
    width: 100%;
}

/* Links inside dropdown */
.nav-item.menu-item .drop-menu li a {
    color: #fff;
    text-decoration: none;
    border-bottom: 1px solid #333;
    height: 45px;
    padding: 0 15px;
    transition: all 0.3s ease;
    float: left;
    width: 100%;
    line-height: 45px;
}

/* Hover effect */
.nav-item.menu-item .drop-menu li a:hover {
    background: #111;
    padding-left: 20px;
    color: #1c87ba;
    border-bottom: 1px solid #1c87ba;
}

.navbar-nav .nav-link:hover {
    color: #1c87ba;
    border-bottom: 1px solid #1c87ba;
}

/* Submenu (Digital Marketing) */
.nav-item.menu-item .drop-menu .menu-item:hover > .drop-menu {
    display: block;
    top: 3px;
    left: 100%;
        /*margin-left: 8px;*/
    border-radius: 6px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

/* Arrow icon spacing */
.nav-item.menu-item .drop-menu .menu-item > a i {
    margin-left: 8px;   /* icon ka thoda gap */
    font-size: 14px;    /* chhota stylish icon */
    color: #ccc;        /* halka grey for style */
    transition: transform 0.3s ease;
}

/* Rotate icon on hover for effect */
.nav-item.menu-item .drop-menu .menu-item:hover > a i {
    transform: translateX(3px); 
    color: #fff;
}

.nav-link.active {
   color: #1c87ba !important; 

}
 #package-box-p{
    color: #0064a1;
}


/* Global navbar link styling */
.navbar-nav .nav-link {
  font-size: 16px;
  padding: 8px 12px;
  color: #fff;
  white-space: nowrap; /* ek line me rakhe */
}

/* Large screens (≥1200px) */
@media (min-width: 1200px) {
  .navbar-nav .nav-link {
    font-size: 16px;
  }
  .logo-box img {
    width: 200px;
  }
}

/* Medium screens (992px – 1199px) */
@media (min-width: 992px) and (max-width: 1199px) {
  .navbar-nav .nav-link {
    font-size: 14px;
    padding: 6px 10px;
  }
  .logo-box img {
    width: 160px; /* thoda chhota logo */
  }
}

/* Tablet screens (768px – 991px) */
@media (min-width: 768px) and (max-width: 991px) {
  .navbar-nav .nav-link {
    font-size: 14px;
    padding: 6px 8px;
    display: block;
    width: 100%;
  }
  .logo-box img {
    width: 140px;
  }
}

/* Mobile screens (≤767px) */
@media (max-width: 767px) {
  .navbar-nav .nav-link {
    font-size: 13px;
    padding: 10px 15px;
    display: block;
    width: 100%;
    border-bottom: 1px solid #222;
  }
  .logo-box img {
    width: 120px;
  }
  .drop-menu {
    position: static !important;
    background: #111;
    width: 100%;
  }
  .drop-menu li a {
    padding-left: 30px !important;
  }
}

.owl-nav {
  display: none !important;
}


/* Slide BG fix */
.slide-bg {
  min-height: 70vh;  /* Full screen height */
  background-size: cover !important;
  background-position: center center !important;
  padding: 60px 0;
  display: flex;
  position: relative;
  align-items: center;

  

}



.slide-content h1 {
  font-size: 48px;
  line-height: 1.3;
}

.slide-content p {
  font-size: 18px;
  color: #cfdfff;
}

.feature-box {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  transition: 0.3s;
}

.feature-box:hover {
  background: rgba(255, 255, 255, 0.2);
}

.icon-check {
  display: inline-block;
  background: #fff;
  color: #003d99;
  font-weight: bold;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  text-align: center;
  line-height: 28px;
  margin-right: 10px;
}
/* Banner image responsive */
.banner-img {
  max-width: 100%;     /* image container ke andar responsive */
  height: auto;        /* height automatically adjust hogi */
  object-fit: contain; /* distort na ho */
}


@media (max-width: 768px) {
  .banner-img {
    max-height: 40vh;  /* Mobile ke liye chhota */
  }
}


.slide-content {
  margin-top: 40px;
  padding-left: 50px; /* 👈 left side se push karega */
  padding-right: 30px;
}


.slide-content h1 {
  font-size: 48px;
  line-height: 1.2;
}

.slide-content p {
  font-size: 18px;
  color: #cfdfff;
}

.slide-content ul li {
  font-size: 16px;
  line-height: 1.6;
}

.bi-check2-square {
  font-size: 20px;
  vertical-align: middle;
}

.banner-img2 {
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

@media (max-width: 768px) {
  .slide-content {
    text-align: center;
    margin-bottom: 20px;
  }
  .banner-img {
    max-width: 80%;
    margin: 0 auto;
  }
}

.banner-image-box {
  background: url('./images/banner4.jpeg') no-repeat center center;
  background-size: cover;
  min-height: 100vh;  
  display: flex;
  align-items: center;
}

.banner-overlay-content {
  max-width: 600px;
}

/* Responsive fix */
@media (max-width: 768px) {
  .banner-image-box {
    min-height: 50vh;   /* chhota banner mobile pe */
    background-position: top center; /* mobile me center me image */
  }
  .banner-overlay-content {
    text-align: center; /* content center ho jaye mobile pe */
    margin: 0 auto;
  }
}


/* Tablets (medium screens) */
@media (max-width: 991px) {
  .slide-content {
    text-align: center;
    margin-top: 20px;
  }

  .banner-overlay-content {
    max-width: 90%;
    margin: auto;
    text-align: center;
  }
}

/* Mobiles (small screens) */
@media (max-width: 576px) {
  .slide-bg {
    min-height: 70vh; /* mobile par thoda kam height */
    padding: 20px 0;
  }

  .banner-img {
    max-width: 80%;
  }

  .banner-overlay-content {
    padding: 20px;
    font-size: 14px;
  }

  .banner-overlay-content h1 {
    font-size: 24px;
    line-height: 1.3;
  }
}


/* Overlay effect */
.carousel-item{
    
}
.carousel-item .overlay {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 80vh;
  z-index: 1;
}

/* Content above overlay */
.slide-content {
  position: relative;
  z-index: 2;
}

@media (max-width: 768px) {
  .slide-bg, 
  .banner-image-box {
    min-height: 60vh;   /* Mobile pe thoda chhota */
  }
  .banner-img {
    max-width: 80%;
    margin: 0 auto;
  }
}



.carousel-control-prev-icon,
.carousel-control-next-icon {
  background-size: 50%, 50%;
  background-color: rgba(0,0,0,0.4);
  border-radius: 50%;
  width: 40px;
  height: 40px;
}


.carousel-item,
.slide-bg {
    margin-top:10px;
  height: 80vh; /* Har slide puri screen ke barabar */
  min-height: 400px; /* chhoti screen ke liye safe height */
}



 /*Remove flex hack – Bootstrap already gives you 3 in a row */
/*#make-portfolio {*/
/*  margin-top: 20px;*/
/*}*/

/*#make-portfolio .element-item {*/
/*  margin-bottom: 20px;*/
/*}*/

/*#make-portfolio .element-item img {*/
/*  width: 100%;*/
/*  height: auto;*/
/*  display: block;*/
/*}*/


/*@media(max-width: 991px) {*/
/*  #make-portfolio .element-item { width: calc(50% - 10px); }*/
/*}*/
/*@media(max-width: 576px) {*/
/*  #make-portfolio .element-item { width: 100%; }*/
/*}*/

/*#make-portfolio .element-item img {*/
/*  width: 100%;*/
/*  height: auto;*/
/*  display: block;*/
/*}*/


 @media (max-width: 991px) {
  section.packages .package-box {
    height: 500px;
  }
}

/* ✅ Mobile */
@media (max-width: 575px) {
  section.packages .package-box {
    height: 500px;
  }
}
    
    
    /* Tablet */
@media (max-width: 991px) {
  .slide-content h1 {
    font-size: 2rem;
  }
  .slide-content p {
    font-size: 1rem;
  }
  .slide-content ul li {
    font-size: 0.95rem;
  }
}

/* Mobile */
@media (max-width: 767px) {
  .slide-content h1 {
    font-size: 1.5rem;
    line-height: 1.4;
  }
  .slide-content p {
    font-size: 0.9rem;
  }
  .slide-content ul li {
    font-size: 0.85rem;
  }
}

/* Extra Small Devices */
@media (max-width: 480px) {
  .slide-content h1 {
    font-size: 1.25rem;
  }
  .slide-content p,
  .slide-content ul li {
    font-size: 0.8rem;
  }
}