/* General responsive fixes for all screen sizes */
.horizontal-box {
    max-width: calc(100% - 120px);
}

@media (max-width:576px) and (min-width:0) {
  .scrollimg
  {  
    width: 100%;
    overflow: hidden;
    padding-top: 20px;
  }
  .scrollimg img
  {
    width: 90%;
    border-radius: 20px;
  }
  
  .scrollText
  {
    width: 230%;
    max-width: 100vw;
    padding: 10px;
    background: linear-gradient(to right, #004e92, #fdc830);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    white-space:nowrap;
    animation: scrolltext 6s linear infinite;
    overflow: hidden;
  }

  .scrollText::-webkit-scrollbar
  {
      display: none;
  }
  .scrollText h2
  {
      font-size: 30px;
      font-weight: 700;
      display: inline-block;
      letter-spacing: 2px;
  
  }
  @keyframes scrolltext {
      0%{
  transform: translateX(100%);
      }
      100%
      {
  transform: translateX(-100% );
      }
  }
  
  #header.scrolled {
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(255, 255, 255, 0.1); /* Semi-transparent */
    backdrop-filter: blur(10px); /* Blur effect */
    -webkit-backdrop-filter: blur(10px); /* Safari support */
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2); /* Soft shadow */
    color: black;
  }
  .provideSec
{
    color:white;margin-left: 15px;padding-top: 30px;
}
  .mapline
{
    width: 5px; height: 140px; background-color: rgb(79, 163, 243); margin-left: 10px; margin-top: 30px;
}
    .kamal-carrier-map-section
{
    color:white;padding-top: 35px; font-weight: 500; font-size: 30px; line-height: 30px;
}
.transport-map-section
{
    color:rgb(79, 163, 243);font-size: 22px; font-weight: 500; padding-left: 5px; line-height: 35px;
}
    .first-second-page
{
    padding:50px 20px;
    margin-top: 50px;
    background: linear-gradient(-120deg, rgba(11, 13, 16, 0.9) 10%, rgb(47, 144, 235) 30%, rgba(14, 18, 29, 0.9) 50%);
    position: relative;
}
.point
{
  width: 20px;
  height: 20px;
  border:1px solid rgb(79, 163, 243);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  animation:  pulse 2s  linear infinite ;

}
.pointfill
{
  width: 13px;
  height: 13px;
  background-color: rgb(79, 163, 243);
  border-radius: 50%;
}
.point1
{
    top: 156px;
    left: 231px;
}
.point2
{
    top: 98px;
    left: 284px;
}
.point3
{
top: 80px;
left:  71px;
}
.point4
{
    top: 162px;
    left: 141px;
}
.point5
{
    top: 57px;
    left: 154px;
}
.first-second-page img
{
    width:100%;
}
    header
    {
  box-shadow: 0px 0px 10px black;
    }
      header h3
      {
          font-size: 25px;
      }
      header #bar
      {
          font-size: 20px !important;
      }
      .headi
      {
        padding-top: 0px !important;
        margin-top: 0px !important;
      }

      .nav ul
      {
          position: fixed;
          z-index: 1000000000;
          top: 47px;
          left: -100%;
          display: flex;
          flex-direction: column;
          background-color:  #111111;
          width: 50%;
          height:100vh;
          padding: 40px;
          transition: 300ms;
        
  
      }
  
      .contact
      {
          display: none;
      }
      .first-page .left h1
      {
  font-size: 60px;
  line-height: 100px;
      }
      .first-page .left h1 span
      {
          font-size: 60px;
      }
      .first-page .left button
  
      {
          margin-top: 13px;
          margin-bottom: 20px;
      }
     .first-page .left p
      {
          font-size: 20px;
      }
      .first-page .left
      {
          padding: 10px;
      }
      .first-page{
          padding-bottom: 50px;
      }
      .first-page .right .image-box
      {
          width: 100%;
          margin-left: 0px;
          height: 550px;
      }
    .truck
    {
      left: -100px !important;
     height: 480px !important;
    }
    .first-image
    {
      width: 100%;
      max-width: 440px;
    }
    .first-image img
    {
      width: 100%;
      max-width: 440px;
    }
    .image-overlay
    {
      width: 100%;
      max-width: 440px;
    }
    .chose-section
    {
      width: 140px;
      height: 120px;
    }
    .chose-section img
    {
      width: 140px;
      height:110px;
    }
    .container h1
    {
      margin-top:10px !important;
      margin-bottom:10px !important;
    }
    .horizontal-box
    {
      width: 100% !important;
      max-width: 100% !important;
      height: auto !important;
      min-height: 400px;
      padding: 30px 20px !important;
      left: 0 !important;
      top: 0 !important;
      margin: 20px 0 !important;
      position: relative !important;
    }
    
    .vertical-box {
        width: 100% !important;
        max-width: 100% !important;
        min-height: auto !important;
        height: auto !important;
        padding: 20px 15px !important;
    }
    
    .experience-box {
        padding: 0 10px;
        margin: 20px 0;
    }
    
    .yearex {
        font-size: 80px !important;
        -webkit-text-stroke: 4px black !important;
        margin-bottom: 15px;
    }
    
    .years {
        font-size: 20px !important;
        margin-left: 0 !important;
        margin-top: 10px;
        padding: 0 10px;
    }
    
    #ex-box {
        margin-left: 0 !important;
        margin-top: 25px !important;
        padding: 0 10px;
    }
    
    .imgex {
        width: 60px !important;
        height: auto !important;
        margin-top: 0 !important;
    }
    
    .heading-1, .heading-2, .heading-3 {
        font-size: 22px !important;
        -webkit-text-stroke: 1.5px black !important;
    }
    
    .experience-text span {
        font-size: 14px !important;
    }
    
    .experience-content {
        padding: 15px !important;
    }
    
    #ex-box {
        margin-top: 20px !important;
    }
    
    .experience-icon img {
        width: 60px !important;
    }
    
    .whatsapp-button {
        width: 50px;
        height: 50px;
        bottom: 15px;
        right: 15px;
    }
    
    .whatsapp-button i {
        font-size: 26px;
    }
    .imgex{
      width: 70px !important;
      margin-top: 20px;
    }
    .years
    {
      font-size: 26px !important;
      margin-left: 12px !important;
  
    }
    .yearex {
      font-size: 70px !important;
      -webkit-text-stroke: 3px black;
      font-family: Verdana, Geneva, Tahoma, sans-serif;
    }
    #ex-box
    {
      margin-left: 10px !important;
    }
    .vertical-box {
      height: 593px !important;
   
  }
  .box-form
  {
      width: 95%;
      max-width: 380px;
      max-height: 85vh;
      background-color: white;
      position: fixed;
      border-radius: 15px;
      padding: 20px 15px;
      z-index: 99999;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      display: none;
      overflow-y: auto;
  }
  
  .box-form .form-control {
      padding: 7px 10px;
      font-size: 13px;
  }
  
  .box-form .form-label {
      font-size: 13px;
      margin-bottom: 5px;
  }
  
  .box-form .mb-3 {
      margin-bottom: 0.6rem;
  }
  
  .box-form .btn-primary {
      padding: 9px 20px;
      font-size: 13px;
  }
  
  .iconmost {
      top: 10px;
      right: 10px;
      width: 30px;
      height: 30px;
      font-size: 20px;
  }
  }
  @media (max-width:992px) and (min-width:577px) {
      .box-form {
          width: 85%;
          max-width: 400px;
          padding: 25px 20px;
      }
      
      .box-form .form-control {
          padding: 8px 12px;
          font-size: 14px;
      }
      
      .box-form .mb-3 {
          margin-bottom: 0.7rem;
      }
      
      .horizontal-box {
          width: 100% !important;
          padding: 35px 25px !important;
          margin: 30px 0 !important;
      }
      
      .yearex {
          font-size: 100px !important;
          -webkit-text-stroke: 6px black !important;
      }
      
      .years {
          font-size: 28px !important;
      }
      
      .experience-content {
          padding: 25px !important;
      }
      
      .experience-icon img {
          width: 70px !important;
      }
      
      .heading-1, .heading-2, .heading-3 {
          font-size: 26px !important;
      }
      .nav ul
      {
          position: fixed;
          top: 50px;
          left: -100%;
          display: flex;
          flex-direction: column;
          background-color: black;
          width: 50%;
          height: 100%;
          padding: 40px;
          transition: 300ms;
  
      }
      .contact
      {
          display: none;
      }
      .first-page .right
      {
          margin-left: 100px;
      }
      .first-page{
          padding-bottom: 50px;
      }
      .first-image
      {
        width: 100%;
        max-width: 340px;
      }
      .first-image img
      {
        width: 100%;
      }
      .image-overlay
      {
        width: 100%;
      }
  .first-image:hover .image-overlay
  {
      bottom: -200px;
  }
  .third-image
  {
      flex-grow: 1;
  }
  
  @media (max-width:1300px) and (min-width:577px) {
      .first-image
      {
        width: 100%;
        max-width: 330px;
      }
      .first-image img
      {
        width: 100%;
        max-width: 330px;
      }
      .image-overlay
      {
        width: 100%;
        max-width: 330px;
      }
      .first-image:hover .image-overlay
  {
      bottom: -200px;
    }
   
  }
  }