/*
    
CSS INDEX
=========

    Base CSS or Common CSS are in reset.css


  1. 	Start Header CSS
	2. 	Start Main Slider CSS
	3. 	Start Why Us CSS
	4. 	start we are best
	5. 	Start Get Quote Area
	7. 	Start Transport Features Area
	8. 	Start Client Says Area
	10. Start We Are Best At Area
	12. start About Us Page Area
	14. Start Footer CSS
	16. Start Services Page
	19. Start Contact Page Area
	20. Start 404 page Area
  23. start contact us page CSS
  24. Start Responsive CSS


==============================================*/


/* ============================================
1.               Start Header CSS
===============================================*/
/* ======================================================
   RESET
====================================================== */
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  list-style:none;
  text-decoration:none;
  font-family:Arial, Helvetica, sans-serif;
}

/* ======================================================
   HEADER / NAVIGATION
====================================================== */
header{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:65px;
  background:#ffffff;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 30px;
  box-shadow:0 2px 12px rgba(0,0,0,0.12);
  z-index:1000;
}

/* Logo */
header figure img{
  max-width:100px;
  margin-top: 10px;
}

/* Desktop Navigation */
header nav ul{
  display:flex;
  align-items:center;
  gap:30px;
}

header nav ul li a{
  color:#222;
  font-size:17px;
  font-weight:600;
  padding:8px 14px;
  border-radius:6px;
  transition:all 0.3s ease;
  position:relative;
}

/* Hover effect */
header nav ul li a::after{
  content:'';
  position:absolute;
  left:0;
  bottom:0;
  width:0;
  height:2px;
  background:#f8b652;
  transition:0.3s;
}

header nav ul li a:hover::after{
  width:100%;
}

header nav ul li a:hover{
  color:#f89436;
}

/* Mobile menu icon */
.mIcon{
  display:none !important;
  font-size:28px;
  cursor:pointer;
  color:#111;
}
.active{
  
  
  
color:#f89436;

}

/* ======================================================
   MOBILE NAVIGATION
====================================================== */
@media(max-width:575px){

  .mIcon{
    display:block !important;
    z-index:2000;
  }

  header nav{
    position:fixed;
    top:0;
    left:-100%;
    width:80%;
    height:100vh;
    background:#395168;
    padding-top:90px;
    transition:0.45s ease;
    z-index:1500;
  }

  header nav ul{
    flex-direction:column;
    align-items:flex-start;
    gap:22px;
    padding-left:25px;
  }

  header nav ul li a{
    color:#fff;
    font-size:20px;
    font-weight:500;
  }

  header nav ul li a::after{
    background:#ffffff;
  }

  /* Menu open */
  header nav.showMenu{
    left:0;
  }
}

/* ======================================================
   SLIDER FIXES
====================================================== */
/* Slide container */
.slide {
    position: relative;
}

/* Dark overlay */
.slide::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.55); /* Darkness level */
    z-index: 1;
}

/* Slide image */
.slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Keep text above overlay */
.slide-text {
    position: absolute;
    z-index: 2;
}


.main_slider_area{
  margin-top:65px;       
  height:90vh;
  position:relative;
  overflow:hidden;
}

.tp-banner{
  height:100%;
  position:relative;
}

/* Slides */
.slide{
  position:absolute;
  inset:0;
  opacity:0;
  transition:opacity 0.8s ease;
}

.slide.active{
  opacity:1;
  z-index:2;
}

/* Slide Image */
.slide img{
  width:100%;
  height:100%;
  object-fit:cover;
}

/* Slide Text */
.slide-text{
  position:absolute;
  top:50%;
  left:8%;
  transform:translateY(-50%);
  color:#fdfcfc;
  max-width:500px;
}

.slide-text h1{
  font-size:48px;
  font-weight:800;
  color: #fdfcfc;
}

.slide-text h2{
  font-size:48px;
  font-weight:800;
  color: #fdfcfc;
  margin-top: 15px;
 
}

.slide-text p{
  font-size:22px;
  margin-top:10px;
  color:#f3f0f0;
}

/* Button */
.slide-btn{
  display:inline-block;
  margin-top:22px;
  padding:12px 30px;
  background:#017cc0;
  color:#fff;
  font-weight:600;
  border-radius:4px;
  transition:0.3s;
}

.slide-btn:hover{
  background:#015a8d;
}

/* Text Animation */
.slide-text > *{
  opacity:0;
  transform:translateY(35px);
}

.slide.active .slide-text > *{
  animation:textUp 0.8s forwards;
}

.slide.active h2{animation-delay:0.2s;}
.slide.active p{animation-delay:0.4s;}
.slide.active a{animation-delay:0.6s;}

@keyframes textUp{
  to{
    opacity:1;
    transform:translateY(0);
  }
}

/* ======================================================
   SLIDER ARROWS
====================================================== */
.slider-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  background:rgba(0,0,0,0.6);
  color:#fff;
  padding:10px 14px;
  cursor:pointer;
  font-size:18px;
  border-radius:3px;
  z-index:10;
}

.prev{left:20px;}
.next{right:20px;}

/* ======================================================
   SLIDER RESPONSIVE
====================================================== */
@media(max-width:768px){

  .slide-text{
    left:5%;
    right:5%;
    text-align:center;
    max-width:100%;
  }

  .slide-text h1,
  .slide-text h2{
    font-size:30px;
  }
  

  .slide-text p{
    font-size:18px;
  }
}

@media(max-width:575px){
  .slider-arrow{
    padding:6px 10px;
    font-size:16px;
  }
}

/* ============================================
3.              Start Why Us CSS
===============================================*/
.single_why_us {
  position: relative;
  z-index: 1;
  background: #fff;
  -moz-transition: 0.5s;
  -o-transition: 0.5s;
  -webkit-transition: 0.5s;
  transition: 0.5s;
  padding: 30px;
  overflow: hidden;
}
.single_why_hover {
  background: rgb(236, 139, 59) none repeat scroll 0 0;
  height: 100%;
  position: absolute;
  width: 100%;
  z-index: -1;
  opacity: 0;
  left: 0;
  top: 0;
  -moz-transition: 0.5s;
  -o-transition: 0.5s;
  -webkit-transition: 0.5s;
  transition: 0.5s;

}
.single_why_us:hover .single_why_hover{
  opacity: 0.75;
  animation-name: fadeInUp;
  backface-visibility: visible !important;
  animation-duration: 1s;
  animation-fill-mode: both;
}
.single_why_us h5 {
  margin-top: 22px;
  margin-bottom: 21px;
}
.single_why_us p {
  line-height: 23px;
  color: #080808;
  font-weight: 200;
}


.single_why_us:hover h5, .single_why_us:hover  p{
  color: #fff;
}
.single_why_us .icon_one{
  display: inline-block;
  width: 74px;
  height: 114px;
  background: url(images/logistic-service.png) no-repeat center center;
  -moz-transition: 0.5s;
  -o-transition: 0.5s;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}
.single_why_us:hover .icon_one{
  background: url(images/logistic-service-hover.png) no-repeat center center; ;
}
.single_why_us .icon_two{
  display: inline-block;
  width: 74px;
  height: 114px;
  background: url(images/warehousing.png) no-repeat center center; 
  -moz-transition: 0.5s;
  -o-transition: 0.5s;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}
.single_why_us:hover .icon_two{
  background: url(images/warehousing-hover.png) no-repeat center center;
}
.single_why_us .icon_three{
  display: inline-block;
  width: 74px;
  height: 114px;
  background: url(images/customer-service.png) no-repeat center center; 
  -moz-transition: 0.5s;
  -o-transition: 0.5s;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}
.single_why_us:hover .icon_three{
  background: url(images/customer-service-hover.png) no-repeat center center; ;
}

/* ============================================
              End Why Us CSS
===============================================*/


/* ============================================
4.            start we are best
===============================================*/

.weare_best_left_service .single_weare_best > dl {
  float: left;
  text-align: right;
}
.weare_best_right_service .single_weare_best > dl {
  float: right;
  text-align: left;
}
.single_weare_best > dl {
  margin-bottom: 0;
  margin-right: 9px;
  width: 68%;
}
.single_weare_best i {
  line-height: 54px;
  text-align: center;
  width: 23%;
  display: inline-block;
}
.single_weare_best dt {
  color: #313131;
  font-family: "RobotoMedium";
  font-size: 18px;
  font-weight: 400;
  margin-bottom: 10px;
}
.single_weare_best dt, .single_weare_best dd{
  line-height: 25px;
}
.single_weare_best dd{
  color: #959595;
}
.weare_best_area .section_title {
  margin-bottom: 105px;
}



/* ============================================
                End we are best
===============================================*/



/* ============================================
5.              Start Get Quote Area
===============================================*/

.get_quote_area {
  background: rgba(0, 0, 0, 0) url("images/getqimg.jpg") no-repeat scroll 67% center / cover ;
  color: #fff;
  padding: 90px 0;
}
.get_quote_area .section_title > h4 {
  color: #fff;
}
.get_quote_area .section_title > p {
  color: #fdfcfc;
}
.get_quote_area .form-group select {
  width: 100%;
  -moz-appearance: none;
  -webkit-appearance: none;
  margin-bottom: 17px;
  height: 43px;
  font-family: "Open Sans",sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #959595;
  text-indent: 2px;
  border: 1px solid #ececec;
}
.get_quote_area .input-group {
  width: 100%;
}
.get_quote_area .form-group input[type="text"] {
  color: #959595;
  font-family: "Open Sans",sans-serif;
  font-size: 14px;
  font-weight: 400;
  height: 43px;
  margin-bottom: 17px;
  width: 100%;
  text-indent: 17px;
  border: 1px solid #ececec;
}
.get_quote_area .form-group input[type="submit"] {
  margin-bottom: 0;
}
.get_quote_area .form-group.submit{
  margin: 0;
}
.icon_arrow:after{
  color: #959595;
  content: "";
  font-family: "FontAwesome";
  font-size: 14px;
  line-height: 42px;
  position: absolute;
  right: 11%;
  top: 0%;
  z-index: 10;
}
.get_quote_area .form-group textarea{
  border: 1px solid #ececec;
  color: #959595;
  height: 133px;
  padding: 12px 20px;
  width: 100%;
  margin-bottom: 22px;
}


/* ============================================
              End Get Quote Area
===============================================*/


/* ============================================
7.            Start Transport Features Area
===============================================*/

.transport_features_area {
    padding: 80px 0;
    background: url("images/transportfeas.jpg") no-repeat center center/cover;
    position: relative;
    color: #000;
}

.transport_features_area::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0.1);
}

.transport_features_area .container {
    position: relative;
    z-index: 2;
}

/* TITLE */
.transport_features .section_title h4 {
    font-size: 32px;
    font-weight: 700;
    color: #000;
    margin-bottom: 12px;
}

.transport_features .section_title p {
    max-width: 480px;
    font-size: 16px;
    color: #fffdfd;
    line-height: 1.7;
}

/* PANEL */
.panel-group .panel {
    background: rgba(0,0,0,0.05);
    border-radius: 10px;
    margin-bottom: 12px;
    border: none;
    backdrop-filter: blur(2px);
    transition: background 0.3s ease;
}

.panel-group .panel:hover {
    background: rgba(0,0,0,0.1);
}

/* HEADER */
.panel-title a {
    display: block;
    padding: 16px 20px;
    font-size: 16px;
    font-weight: 600;
    color: #000;
    text-decoration: none;
    letter-spacing: 0.4px;
    position: relative;
    transition: all 0.4s;
}

.panel-title a:hover {
    color: #007ac6;
    padding-left: 28px;
}

/* ICON */
.panel-title a span {
    position: absolute;
    right: 22px;
    top: 50%;
    width: 12px;
    height: 12px;
    border-right: 2px solid #000;
    border-bottom: 2px solid #000;
    transform: translateY(-50%) rotate(45deg);
    transition: transform 0.35s;
}

.panel-title a[aria-expanded="true"] span {
    transform: translateY(-50%) rotate(225deg);
}

/* CONTENT */
.panel-body {
    padding: 18px 22px;
    background: rgba(0,0,0,0.03);
    font-size: 15.5px;
    color: #000;
    line-height: 1.7;
    border-top: 1px solid rgba(0,0,0,0.05);
    animation: fadeIn 0.35s ease-out;
}

/* ANIMATION */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* RESPONSIVE */
@media (max-width: 992px) {
    .col-sm-offset-6 {
        margin-left: 0;
    }
}

@media (max-width: 768px) {
    .transport_features_area {
        background-position: center;
        padding: 60px 0;
    }

    .transport_features .section_title p {
        max-width: 100%;
    }

    .panel-title a {
        font-size: 15px;
        padding: 14px 16px;
    }
}

@media (max-width: 768px) {

  /* target common arrow implementations: span arrow, glyphicon, font-icon, svg wrapper */
  .panel-title a span,
  .panel-title a .glyphicon,
  .panel-title a .fa,
  .panel-title a i,
  .panel-title a .icon,
  .single_feature i,
  .single_feature .feature_icon i {
    width: 18px !important;            /* fixed small box */
    height: 18px !important;
    line-height: 18px !important;
    font-size: 12px !important;        /* force small icon font */
    border-right-width: 2px !important;
    border-bottom-width: 2px !important;
    transform: translateY(-50%) rotate(45deg) !important;
    right: 12px !important;            /* push inward to avoid overlap */
    top: 50% !important;
    box-sizing: content-box !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-block !important;
  }

  /* make sure the arrow is absolutely positioned inside header */
  .panel-title a {
    position: relative !important;
    padding-right: 44px !important;   /* give space for arrow */
    display: block !important;
    word-break: break-word !important;
    white-space: normal !important;
  }

  /* ensure the arrow sits to the right vertically centered */
  .panel-title a span {
    position: absolute !important;
    right: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) rotate(45deg) !important;
  }

  /* reduce header padding so text wraps nicely */
  .panel-title a,
  .panel-title a:hover,
  .panel-title a:focus {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    font-size: 15px !important;
    line-height: 1.25 !important;
  }

  /* prevent collision: force multi-line and spacing */
  .panel-title a > * {
    display: inline-block !important;
    vertical-align: middle !important;
    max-width: calc(100% - 56px) !important; /* leaves room for arrow */
  }

  /* smaller body font for tight spaces */
  .panel-body {
    font-size: 14px !important;
    padding: 14px 16px !important;
  }

  /* fallback: if any inline transform/scale is applied remove it */
  .panel-title a span[style],
  .panel-title a i[style] {
    transform: none !important;
  }

  /* extra safety: override any bootstrap .collapse show related changes */
  .panel-group .panel {
    margin-bottom: 12px !important;
  }
}

/* Force wrap & prevent long-word overflow anywhere */
.panel-title,
.panel-title a,
.panel-title h4 {
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  hyphens: auto !important;
}
/* Prevent text overlap on mobile */
@media (max-width: 768px) {

    .single_feature {
        width: 100% !important;            /* full width */
        display: block !important;
        margin-bottom: 20px !important;
        padding: 10px 0 !important;
    }

    .single_feature .feature_icon,
    .single_feature i {
        display: block !important;
        margin: 0 auto 6px auto !important;
        font-size: 14px !important;
    }

    .single_feature h4,
    .single_feature p {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        white-space: normal !important;
        line-height: 1.4 !important;
    }

    .features_row {
        display: block !important;        /* break grid */
    }

    .col-md-3, .col-sm-3, .col-3 {
        width: 100% !important;          /* no side-by-side */
        float: none !important;
    }
}


/* ============================================
          End Transport Features Area
===============================================*/





/* ============================================
10.         Start We Are Best At Area
===============================================*/

.weare_best_at_area {
  background: rgba(0, 0, 0, 0) url("images/we-are-best-1.jpg") no-repeat scroll center center;
  background-size: cover;
}

/* ============================================
            End We Are Best At Area
===============================================*/


/* ============================================
11.         Start Breadcrumd Area
===============================================*/


.breadcrumb_main_area{
  background: url(images/breadcrumb-one.jpg) no-repeat center center / cover #000000;
  position: relative;
}
.breadcrumb_bg {
  background: rgba(51, 51, 51, 0.75) none repeat scroll 0 0;
  padding: 14px 0;
}
.breadcrumb_main_area .breadcrumb {
  background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
  border-radius: 0;
  margin: 0;
  padding: 0;
}
.breadcrumb_bg h6 {
  color: #cfcfcf;
  font-family: 'Oxygen';
  font-size: 12px;
}
.breadcrumb_main_area .breadcrumb a {
  color: #fff;
  font-size: 12px;
  padding: 6px;
  text-transform: uppercase;
}
.breadcrumb_main_area .breadcrumb li:last-child a{
  padding-right: 0;
}
.breadcrumb_main_area .breadcrumb a:hover{
  color: #017cc0;
}
.breadcrumb_main h1{
  color: #fff;
  font-family: "RobotoMedium";
  font-size: 50px;
  line-height: 30px;
  margin: 96px 0 32px;
}


/* ============================================
            End Breadcrumd Area
===============================================*/


/* ============================================
12.         start About Us Page Area
===============================================*/

/* =================================================
   ABOUT FEATURE BOX
================================================= */

.about-feature {
  background: #fff;
  padding: 25px 22px;
  border-radius: 15px;
  text-align: center;
  margin: 80px 0;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.about-feature:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 25px rgba(245,124,0,0.25);
}

.about-feature i {
  font-size: 42px;
  color: #ff8c42;
  margin-bottom: 12px;
  display: block;
}

.about-feature h5 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 10px;
}

.about-feature p {
  font-size: 15px;
  line-height: 1.6;
}

/* =========================
   ABOUT ALFFA SECTION
========================= */



/* =================================================
   WHY CHOOSE US
================================================= */

.why_choose_us_area {
  position: relative;
  padding: 80px 0;
  background: url("images/slideimg1.jpg") center/cover no-repeat;
}

.why_choose_us_area::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.5);
}

.why_choose_us_area .section_title,
.why_choose_us_area .section_content {
  position: relative;
  z-index: 2;
  color: #fff;
}

.why_choose_us_area h4 {
  font-size: 36px;
  font-weight: 700;
  color: white;
}

.single_who figure {
  border-radius: 10px;
  overflow: hidden;
  transition: transform 0.4s ease;
}

.single_who figure:hover {
  transform: translateY(-5px);
}

.single_who figure figcaption {
  background: rgba(0,0,0,0.6);
  padding: 25px;
}

.single_who figure h5 {
  font-size: 22px;
  margin-bottom: 10px;
}

.single_who figure p {
  font-size: 14px;
  line-height: 1.6;
}

/* =================================================
   WE ARE BEST AT
================================================= */

body#about_us .single_weare_best_at {
  margin-bottom: 35px;
}

body#about_us .single_weare_best_at > dl {
  float: right;
  width: 73%;
}

body#about_us .single_weare_best_at i {
  width: 21%;
  display: inline-block;
}

/* =================================================
   CLIENT AREA
================================================= */

.about_client_area .client_border {
  border-right: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  padding: 25px 0;
}

.about_client_area .section_title {
  margin-bottom: 65px;
}

/* =================================================
   ON PARKING AREA
================================================= */

.single_on_parking figure {
  position: relative;
}

.single_on_parking figcaption {
  background: #fff;
  position: absolute;
  bottom: -35px;
  margin: 0 20px;
  width: 85%;
  height: 35%;
  padding: 0 23px;
  transition: 0.4s;
}

.single_on_parking figure:hover figcaption {
  bottom: -20px;
  box-shadow: 1px 8px 16px rgba(0,0,0,0.4);
}

/* =================================================
   ANIMATIONS
================================================= */

@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(40px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes floatGlow {
  0%,100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(30px); }
}

/* =================================================
   RESPONSIVE FIXES
================================================= */

@media (max-width: 991px) {

  [class*="col-"] {
    float: none !important;
    width: 100% !important;
  }

  .about-content {
    padding: 45px 30px;
  }

  body#about_us .single_weare_best_at > dl {
    width: 100%;
    float: none;
  }

  body#about_us .single_weare_best_at i {
    display: none;
  }

  .single_on_parking figcaption {
    position: relative;
    width: 100%;
    margin: 0;
    bottom: 0;
    box-shadow: none;
  }
}

@media (max-width: 768px) {

  .about-alffa {
    padding: 60px 15px;
  }

  .about-content h1 {
    font-size: 26px;
  }

  .about-content p {
    font-size: 15px;
  }

  .why_choose_us_area {
    padding: 40px 15px;
  }
}

@media (max-width: 480px) {

  .about-content h1 {
    font-size: 22px;
  }

  .about-feature i {
    font-size: 34px;
  }
}


/* ============================================
          End About Us Page Area
===============================================*/




/* ============================================
14.         Start Footer CSS
===============================================*/

/* Dark Theme Footer */
.footerh{
  color: white;
}
.adata{
  color: white;
}
.footer_area {
    background-color: #1a1a1a; /* Dark background */
    color: #e0e0e0;
    padding: 20px 30px;
    border-top: 3px solid #f89571;
    font-size: 14px;
}

.footer_row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 15px;
}

/* Footer Columns */
.footer_col {
    flex: 1 1 30%;
    min-width: 220px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Contact Info Column */
.footer_col.contact_info span {
    display: flex;
    align-items: center;
    gap: 8px;
    color: white;
}

.footer_col.contact_info i {
    font-size: 16px;
    color: #f89571; /* Highlighted icons */
}

/* Newsletter Input */
.footer_col.newsletter input {
    width: 100%;
    max-width: 200px;
    padding: 5px 10px;
    border-radius: 10px;
    border: 1px solid #444;
    font-size: 13px;
    outline: none;
    color: #e0e0e0;
    background-color: #333;
}

.footer_col.newsletter input::placeholder {
    color: #dbd9d9;
}

.footer_col.newsletter input:focus {
    border-color: #f89571;
    box-shadow: 0 0 4px #f89571;
}

/* Social Icons */
.footer_social_icons {
    display: flex;
    gap: 5px;
    list-style: none;
    padding: 0;
    margin: 5px 0 0 0;
}

.footer_social_icons li a {
    display: block;
    width: 28px;
    height: 28px;
    line-height: 28px;
    text-align: center;
    border-radius: 50%;
    background: #f89571;
    color: #fff;
    font-size: 12px;
    transition: all 0.3s;
}

.footer_social_icons li a:hover {
    transform: translateY(-2px);
}

/* About Us Column */
.footer_col.about_us a {
    color: #f89571;
    text-decoration: none;
}

.footer_col.about_us a:hover {
    text-decoration: underline;
}

/* Responsive */
@media (max-width: 992px) {
    .footer_row {
        flex-direction: column;
        align-items: flex-start;
    }
    .footer_col {
        min-width: 100%;
    }
    .footer_col.newsletter input {
        max-width: 100%;
    }
}



/* ============================================
               End Footer CSS
===============================================*/


/* ============================================
16.         Start Services Page
===============================================*/
/* ============================================================
   BREADCRUMB SECTION
=========================================================== */
.breadcrumb_main_area {
    background: linear-gradient(rgba(0,0,0,0.55), rgba(0,0,0,0.55)),
                url('images/aboutbimg.jpg') center/cover no-repeat;
    padding: 90px 0;
    text-align: center;
    position: relative;
}

.breadcrumb_main {
    position: relative;
    z-index: 2;
}

.breadcrumb_main h1 {
    font-size: 50px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 1px;
    margin-bottom: 20px;
    animation: fadeInDown 0.8s ease;
}

.breadcrumb_main img {
    width: 160px;
    opacity: 0.85;
    animation: fadeIn 1s ease;
}

/* Smooth fade animations */
@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ============================================================
   RESPONSIVE DESIGN
=========================================================== */

@media (max-width: 768px) {
    .breadcrumb_main_area {
        padding: 70px 0;
    }
    .breadcrumb_main h3 {
        font-size: 32px;
    }
    .breadcrumb_main img {
        width: 130px;
    }
}

@media (max-width: 480px) {
    .breadcrumb_main_area {
        padding: 60px 15px;
    }
    .breadcrumb_main h3 {
        font-size: 26px;
        letter-spacing: 0;
    }
    .breadcrumb_main img {
        width: 110px;
    }
}




/* === SERVICE PAGE CARD CONTAINER === */
body#services_page .single_weoffer_best_container {
    display: flex;
    flex-wrap: wrap;
    gap: 35px;
    justify-content: center;
    margin-top: 50px;
    padding: 10px;
}

/* === SINGLE SERVICE CARD === */
body#services_page .single_weoffer_best {
    flex: 1 1 300px;
    max-width: 350px;
    position: relative;

   
    background: 
        linear-gradient(to bottom right, rgba(0,0,0,0.45), rgba(0,0,0,0.65)),
        url("images/back.jpg") center/cover no-repeat;

    border-radius: 20px;
    padding: 35px 25px 45px;
    color: #fff;
    overflow: hidden;

    /* Modern effects */
    box-shadow: 0 5px 25px rgba(0,0,0,0.25);
    backdrop-filter: blur(3px);

    transition: all 0.6s ease;
}

/* === CARD HOVER EFFECT === */
body#services_page .single_weoffer_best:hover {
    transform: translateY(-12px) scale(1.02);

    background:
        linear-gradient(to bottom right, rgba(0,0,0,0.75), rgba(0,0,0,0.85)),
        url("images/we-offer-bg.jpg") center/cover no-repeat;

    box-shadow: 0 25px 50px rgba(0,0,0,0.45);
}

/* === ICON STYLE === */
body#services_page .single_weoffer_best i {
    display: inline-block;
    width: 70px;
    height: 70px;
    line-height: 70px;
    text-align: center;

    font-size: 30px;
    color: #fff;
    border-radius: 50%;

    background: rgba(255,255,255,0.15);
    box-shadow: 0 4px 10px rgba(255,255,255,0.15);

    margin-bottom: 25px;

    transition: all 0.5s ease;
}

/* === ICON HOVER === */
body#services_page .single_weoffer_best:hover i {
    transform: scale(1.25) rotate(10deg);
    background:rgb(250, 158, 71);
    color: #222;
    box-shadow: 0 5px 25px rgb(241, 146, 36);
}

/* === TITLE === */
body#services_page .single_weoffer_best > dl > dt {
    font-family: 'Raleway', sans-serif;
    font-weight: 700;
    font-size: 22px;
    color: #fff;
    margin-bottom: 14px;

    letter-spacing: 0.5px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.4);

    transition: color 0.4s ease;
}

body#services_page .single_weoffer_best:hover > dl > dt {
    color: #fff;
}

/* === DESCRIPTION === */
body#services_page .single_weoffer_best > dl > dd {
    font-size: 16px;
    line-height: 26px;
    color: #e9e9e9;
    opacity: 0.9;

    transition: opacity 0.4s ease;
}

body#services_page .single_weoffer_best:hover > dl > dd {
    opacity: 1;
}

/* === RESPONSIVE === */
@media screen and (max-width: 991px) {
    body#services_page .single_weoffer_best {
        max-width: 45%;
    }
}

@media screen and (max-width: 767px) {
    body#services_page .single_weoffer_best {
        max-width: 90%;
    }
}

/* ============================
   INDUSTRY SUPPORT AREA
=============================== */
.industry_support_area {
    padding: 80px 0;
    background: #f7f9fc;
}

.industry_support_area .section_title h4 {
    font-size: 28px;
    font-weight: 700;
    color: #222;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: .5px;
}

/* Tabs */
.industry_support_area .nav-tabs {
    margin-top: 30px;
    border-bottom: none;
    display: flex;
    justify-content: center;
    gap: 15px;
}

.industry_support_area .nav-tabs > li > a {
    padding: 12px 25px;
    background: #fff;
    border-radius: 30px;
    border: 1px solid #ddd;
    font-size: 16px;
    font-weight: 600;
    color: #333;
    transition: all .4s ease;
}

.industry_support_area .nav-tabs > li.active > a,
.industry_support_area .nav-tabs > li > a:hover {
    background: linear-gradient(135deg, #fd9540, #fd9540);
    color: #fff !important;
    border-color: transparent;
    box-shadow: 0 6px 15px rgba(255, 158, 0, 0.4);
}

/* Content Panel */
.industry_support_area .tab-content {
    margin-top: 40px;
    background: #fff;
    padding: 30px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    transition: all .4s ease;
}

/* FIXED IMAGE SIZE */
.industry_support_area .tab-content img {
    width: 100%;
    max-height: 330px;     /* FIXED SIZE */
    object-fit: cover;     /* Avoid distortion */
    border-radius: 12px;
    margin-bottom: 20px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}

/* Text */
.industry_support_area .tab-content p {
    font-size: 15px;
    line-height: 28px;
    color: #444;
    margin-bottom: 18px;
}

/* ============================
   ULTIMATE PERFORMANCE AREA
=============================== */
.performance_area {
    background: linear-gradient(135deg, #f4f6f9, #ffffff);
    padding: 80px 0;
}

.performance_area .section_title h4 {
    font-size: 30px;
    color: #222;
    font-weight: 700;
}

.performance_area .section_title p {
    color: #666;
    font-size: 16px;
    margin-top: 10px;
}

/* Cards */
.performance_area .single_perform {
    background: #ffffff;
    padding: 35px 25px;
    border-radius: 20px;
    text-align: center;
    margin-bottom: 30px;
    transition: all .4s ease;
    box-shadow: 0 8px 25px rgba(0,0,0,0.08);
}

.performance_area .single_perform:hover {
    transform: translateY(-12px) scale(1.03);
    box-shadow: 0 18px 40px rgba(0,0,0,0.15);
}

/* Card Images */
.performance_area .single_perform img {
    width: 80px;
    margin-bottom: 20px;
    transition: all .4s ease;
}

.performance_area .single_perform:hover img {
    transform: scale(1.15);
}

/* Text inside cards */
.performance_area .single_perform h5 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 12px;
    color: #222;
}

.performance_area .single_perform p {
    font-size: 15px;
    color: #555;
    line-height: 26px;
}

/* Responsive */
@media screen and (max-width: 767px) {
    .industry_support_area .nav-tabs {
        flex-wrap: wrap;
        gap: 10px;
    }

    .industry_support_area .tab-content img {
        max-height: 220px;  /* smaller for mobile */
    }

    .performance_area .single_perform {
        margin-bottom: 25px;
    }
}




/* ============================================
                End Services Page
===============================================*/



/* ============================================
19.         Start Contact Page Area
===============================================*/


.our_address_contact .section_title {
  margin-bottom: 36px;
}
.our_address_contact .section_title h4{
  padding-bottom: 20px;
}
.our_branches ul{
  list-style: outside none none;
  margin: -8px 0 0;
  padding: 0;
}
.our_branches ul li i{
  color: #2f8bb5;
  margin-right: 20px;
}
.our_branches ul li{
  color: #999999;
  line-height: 45px;
}
.keep_quick dl, .keep_contact dl{
  float: right;
  margin-bottom: 0;
  text-align: left;
  width: 73%;
}
.keep_quick dl dt, .keep_contact dl dt {
  color: #313131;
  font-family: "Oxygen";
  font-size: 15px;
  font-weight: 600;
  line-height: 31px;
  letter-spacing: 1px;
}
.keep_quick dl dd, .keep_contact dl dd{
  color: #999;
}
.keep_quick i, .keep_contact i {
  display: inline-block;
  line-height: 54px;
  margin-right: 20px;
  text-align: center;
  width: 21%;
}
.keep_in_touch p {
  color: #959595;
  font-size: 15px;
  line-height: 27px;

}

/* ================================
   GOOGLE MAP AREA – CLEAN & RESPONSIVE
================================ */

.contact_google_map_area {
    width: 100%;
    padding: 0;
    margin: 0;
}

.contact_google_map {
    width: 100%;
    height: auto;
    position: relative;
}

/* Main Map Box */
#contactgoogleMap {
    width: 100%;
    height: 550px;    /* Desktop Height */
    border: none;
    display: block;
}

/* Responsive Adjustments */
@media (max-width: 991px) {
    #contactgoogleMap {
        height: 450px;
    }
}

@media (max-width: 767px) {
    #contactgoogleMap {
        height: 350px;
    }
}

@media (max-width: 480px) {
    #contactgoogleMap {
        height: 280px;
    }
}





/* ==========================================
   CONTACT INFO SECTION — MODERN STYLISH UI
============================================= */

.our_address_contact {
    padding: 80px 0;
    background: #f7f9fc;
}

.our_address_contact .section_title h4 {
    font-size: 24px;
    font-weight: 700;
    font-family: 'Poppins', sans-serif;
    position: relative;
    padding-bottom: 12px;
    color: #222;
}

/* Underline */
.our_address_contact .section_title h4::after {
    content: "";
    width: 50px;
    height: 3px;
    background: #0ea5e9;
    position: absolute;
    bottom: 0;
    left: 0;
    border-radius: 4px;
}

/* Text Description */
.keep_in_touch p {
    color: #6c6c6c;
    font-size: 15.5px;
    line-height: 26px;
    margin-top: 10px;
}

/* BRANCH LIST */
.our_branches ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.our_branches ul li {
    font-size: 16px;
    color: #555;
    margin: 14px 0;
    display: flex;
    align-items: center;
    transition: 0.3s ease;
}

.our_branches ul li i {
    color: #0ea5e9;
    margin-right: 12px;
    font-size: 18px;
}

/* Hover Effect */
.our_branches ul li:hover {
    color: #0ea5e9;
    transform: translateX(5px);
}

/* QUICK CONTACT BLOCK */
.keep_quick,
.keep_contact {
    display: flex;
    align-items: center;
    padding: 14px 0;
    margin-bottom: 15px;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.06);
    padding: 18px;
}

.keep_quick img,
.keep_contact img {
    width: 50px;
    height: 50px;
    object-fit: contain;
    margin-right: 15px;
}

/* Text part */
.keep_quick dl,
.keep_contact dl {
    margin: 0;
}

.keep_quick dt,
.keep_contact dt {
    font-size: 15px;
    font-weight: 600;
    color: #222;
    margin-bottom: 4px;
}

.keep_quick dd,
.keep_contact dd {
    margin: 0;
    font-size: 14px;
    color: #666;
}

/* --------------------------------------
   RESPONSIVE DESIGN
--------------------------------------- */

@media (max-width: 991px) {
    .our_address_contact {
        padding: 50px 20px;
    }

    .keep_quick,
    .keep_contact {
        padding: 15px;
    }

    .our_branches ul li {
        font-size: 15px;
    }
}

@media (max-width: 767px) {
    .our_address_contact .section_title h4 {
        font-size: 20px;
    }

    .keep_quick img,
    .keep_contact img {
        width: 40px;
        height: 40px;
    }

    .keep_quick,
    .keep_contact {
        flex-direction: row;
        text-align: left;
        padding: 12px;
    }
}



/* =====================================
   LEAVE A MESSAGE — PREMIUM LARGE UI
======================================== */
.leave_message {
    background: linear-gradient(rgba(0, 0, 0, 0.55), rgba(0,0,0,0.55)),
                url("images/contactback.jpg") center/cover no-repeat;
    padding: 70px 15px;
    color: #fff;
    text-align: center;
}

/* TITLE */
.leave_message .section_title h4 {
  color: white;
    font-family: 'Raleway', sans-serif;
    font-size: 34px;
    font-weight: 700;
    margin-bottom: 10px;
}

.leave_message .section_title h4::after {
    content: "";
    width: 70px;
    height: 3px;
    background: #00c4ff;
    display: block;
    margin: 12px auto 0;
    border-radius: 5px;
}

.leave_message .section_title p {
    color: #fcf9f9;
    font-size: 16px;
    max-width: 720px;
    margin: 0 auto 45px;
    line-height: 1.6;
}

/* FORM GRID */
.leave_message form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 25px;
    max-width: 900px;
    margin: 0 auto;
}

/* INPUT + TEXTAREA — BIGGER & GLOSSY */
.leave_message form input,
.leave_message form textarea {
    width: 100%;
    padding: 10px 20px;
    font-size: 17px;
    border-radius: 10px;
    border: none;
    background: rgba(255, 255, 255, 0.92);
    font-family: 'Poppins', sans-serif;
    color: #333;
    transition: 0.25s ease;
    box-shadow: 0 6px 18px rgba(0,0,0,0.12);
}

/* ON FOCUS */
.leave_message form input:focus,
.leave_message form textarea:focus {
    outline: none;
    background: #fff;
    box-shadow: 0 8px 25px rgba(0,123,255,0.25);
    border: 1px solid #00a8e8;
    transform: translateY(-3px);
}

/* TEXTAREA */
.leave_message form textarea {
    min-height: 200px;
    resize: vertical;
    border-radius: 10px;
}

/* SUBMIT BUTTON */
.leave_message form input[type="submit"] {
    background: linear-gradient(45deg, #007ac6, #00c4ff);
    color: #fff;
    font-size: 18px;
    padding: 15px 0;
    border-radius: 40px;
    cursor: pointer;
    transition: 0.25s ease;
    border: none;
    max-width: 260px;
    margin: 4px auto 0;
    margin-left: 4px;
    display: block;
    font-weight: 600;
    box-shadow: 0 6px 20px rgba(0,0,0,0.25);
}

.leave_message form input[type="submit"]:hover {
    background: linear-gradient(45deg, #006aa8, #00a8e8);
    transform: translateY(-3px);
    box-shadow: 0 10px 28px rgba(0,0,0,0.35);
}

/* MOBILE RESPONSIVE */
@media (max-width: 767px) {
    .leave_message {
        padding: 60px 15px;
    }

    .leave_message .section_title h4 {
        font-size: 28px;
    }

    .leave_message form {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .leave_message form input,
    .leave_message form textarea {
        padding: 16px 20px;
        font-size: 16px;
    }

    .leave_message form textarea {
        min-height: 160px;
    }

    .leave_message form input[type="submit"] {
        width: 100%;
        font-size: 17px;
        padding: 14px 0;
    }
}
/* Contact Section Background Image */
.contact_map_section {
    width: 100%;
    height: 600px;
    background: url("images/contactbi.jpg") no-repeat center center/cover;
    position: relative;
    overflow: hidden;
    margin: 1px 0;
}

/* Dark Overlay for Better Text Visibility */
.contact_map_section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.45);
    backdrop-filter: blur(2px);
}

/* Text Content */
.map_overlay_content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #fff;
    z-index: 2;
    width: 90%;
}

.map_overlay_content h2 {
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 10px;
    letter-spacing: 1px;
    color: rgb(247, 246, 246);
}

.map_overlay_content p {
    font-size: 18px;
    opacity: 0.9;
    color: rgb(252, 251, 251);
}

/* Hover Zoom Effect */
.contact_map_section:hover {
    transform: scale(1.01);
    transition: 0.4s ease-in-out;
}

/* Responsive */
@media (max-width: 768px) {
    .contact_map_section {
        height: 350px;
    }
    .map_overlay_content h2 {
        font-size: 28px;
    }
    .map_overlay_content p {
        font-size: 16px;
    }
}

@media (max-width: 480px) {
    .contact_map_section {
        height: 280px;
    }
    .map_overlay_content h2 {
        font-size: 22px;
    }
}

/* Contact Section Wrapper */
.contact_map_section {
    width: 100%;
    height: 480px;
    background: url("images/contactbgimg.jpg") no-repeat center center/cover;
    position: relative;
    overflow: hidden;
    margin: 10px 0;
    box-shadow: 0 10px 30px rgba(0,0,0,0.25);
}

/* Overlay for readability */
.contact_map_section::before {
    content: "";
    position: absolute;
    inset: 0;
   
    z-index: 1;
}

/* Floating content */
.map_overlay_content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    color: #fff;
    text-align: center;

    /* smooth fade */
    animation: fadeUp 1.2s ease;
}

@keyframes fadeUp {
    from { opacity: 0; transform: translate(-50%, -40%); }
    to   { opacity: 1; transform: translate(-50%, -50%); }
}

.map_overlay_content h2 {
    font-size: 38px;
    font-weight: 800;
    letter-spacing: 1px;
    margin-bottom: 10px;
    text-shadow: 0 2px 6px rgba(0,0,0,0.5);
}

.map_overlay_content p {
    font-size: 18px;
    opacity: 0.95;
}

/* Hover effect - classy lift */
.contact_map_section:hover {
    transform: translateY(-6px);
    transition: 0.4s ease;
    box-shadow: 0 18px 40px rgba(0,0,0,0.35);
}

/* Responsive Design */
@media (max-width: 768px) {
    .contact_map_section { height: 360px; }
    .map_overlay_content h2 { font-size: 28px; }
}

@media (max-width: 480px) {
    .contact_map_section { height: 260px; }
    .map_overlay_content h2 { font-size: 22px; }
}




/* ============================================
            End Contact Page Area
===============================================*/


/* ============================================
20.         Start 404 page Area
===============================================*/

.error_mail{
  background: #f1f1f1 none repeat scroll 0 0;
  padding: 60px 0;
}
.error_section input[type="submit"]{
  -moz-border-bottom-colors: none;
  -moz-border-left-colors: none;
  -moz-border-right-colors: none;
  -moz-border-top-colors: none;
  background: #363636 none repeat scroll 0 0;
  border-color: -moz-use-text-color -moz-use-text-color #252525;
  border-image: none;
  border-style: none none solid;
  border-width: medium medium 3px;
  color: #fff;
  font-family: "RobotoMedium";
  font-size: 14px;
  letter-spacing: 1px;
  padding: 17px 34px;
  text-transform: uppercase;
  -moz-transition: 0.5s;
  -o-transition: 0.5s;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}
.error_section input[type="submit"]:hover{
  background: #222 none repeat scroll 0 0;
}
.error_mail input[type="text"] {
  border: 0 none;
  border-radius: 0;
  height: 53px;
  line-height: 29px;
  margin-right: -3px;
  text-indent: 30px;
  width: calc(100% - 163px);
}
.error_mail input[type="submit"] {
  background: #0072a5 none repeat scroll 0 0;
  border: 0 none;
  color: #fff;
  float: right;
  font-family: "RobotoMedium";
  font-size: 14px;
  font-weight: 600;
  line-height: 29px;
  padding: 12px 52px;
  text-transform: uppercase;
  letter-spacing: 1px;
  -moz-transition: 0.5s;
  -o-transition: 0.5s;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}
.error_mail input[type="submit"]:hover{
  background: #004d6f;
}


/* ============================================
              End 404 page Area
===============================================*/



/* ============================================
21.         Start On Parking Page Area
===============================================*/

.all_parking_trucks .nav.nav-tabs {
  border-bottom: medium none;
  margin: 0 auto 40px;
  text-align: center;
}
.all_parking_trucks .nav.nav-tabs li {
  display: inline-block;
  float: none;
  margin-right: 24px;
}
.all_parking_trucks .nav.nav-tabs li a {
  color: #6b6b6b;
  font-family: "RobotoMedium";
  letter-spacing: 0.9px;
  line-height: 30px;
  padding: 0 20px;
  text-transform: none;
  border-radius: 0px;
}
.all_parking_trucks .nav.nav-tabs li.active a, .all_parking_trucks .nav.nav-tabs li:hover a {
  color: #0072a5;
  border: 1px solid #0072a5;
}
.all_parking_trucks .tab-content .single_truck{
  margin-bottom: 30px;
}
.all_parking_trucks .tab-content figure {
  position: relative;
  overflow: hidden;
  margin: 0;
}
.single_truck .truck_photo_caption {
  background: rgba(0, 0, 0, 0.6) none repeat scroll 0 0;
  height: 100%;
  left: 0;
  opacity: 0;
  position: absolute;
  text-align: center;
  top: 0;
  width: 100%;
  -moz-transition: all 0.5s ease 0s;
  -o-transition: all 0.5s ease 0s;
  -webkit-transition: all 0.5s ease 0s;
  transition: all 0.5s ease 0s;
}
.single_truck:hover .truck_photo_caption {
  opacity: 1;
}
.single_truck .truck_photo_caption a.lightbox {
  color: #fff;
  display: block;
  font-size: 90px;
  height: 30px;
  left: 50%;
  line-height: 30px;
  margin-left: -40px;
  margin-top: -40px;
  position: absolute;
  top: 50%;
  width: 30px;
  -moz-transition: all 0.5s ease 0s;
  -o-transition: all 0.5s ease 0s;
  -webkit-transition: all 0.5s ease 0s;
  transition: all 0.5s ease 0s;
}
.single_truck:hover .truck_photo_caption a.lightbox {
  font-size: 30px;
  margin-left: -15px;
  margin-top: -15px;
}
.single_truck .truck_photo_caption span {
  background: #0072a5 none repeat scroll 0 0;
  bottom: 0;
  color: #fff;
  font-family: "RobotoMedium";
  font-size: 18px;
  left: 0;
  padding: 15px 0;
  position: absolute;
  text-transform: uppercase;
  width: 100%;
}
.pagination_number nav ul{
  margin: 0;
}
.pagination_number nav ul li a{
  font-size: 15px;
  color: #999999;
  border: 1px solid #eeeeee;
  margin-right: 5px;
}
.pagination_number nav ul li a:hover{
  background-color: #fff;
}
.pagination_number nav ul li.active a {
  background-color: #0072a5;
}
.pagination_number nav ul li:last-child a, .pagination_number nav ul li:first-child a{
  border-radius: 0px;
}
.pagination_number nav ul li a, .pagination_number nav ul li.active a{
  padding: 9px 17px;
}


/* ============================================
            End On Parking Page Area
===============================================*/




/* --------------------------------------------------------
23.           start contact us page CSS
-----------------------------------------------------------*/
.send_mail .section_title h4, .contact_info .section_title h4{
  color: #515151;
  font-size: 18px;
}
.send_mail input, .send_mail textarea {
  border: 1px solid #e0e1e5;
  color: #666666;
  display: inline;
  font-size: 14px;
  line-height: 20px;
  padding: 20px;
  margin-bottom: 30px;
  outline: none;
  width: 100%;
  text-transform: uppercase;
}
.send_mail a.btn{
  text-transform: none;
}
.contact_info > ul > li{
  line-height: 25px;
  margin-bottom: 29px;
  font-size: 16px;
}
.contact_info > ul > li > i {
  float: left;
  font-size: 20px;
  margin-right: 15px;
  min-height: 40px;
  padding-top: 3px;
}
body#contact_us_page .contact_info .social_icons > ul > li > a, .contact_info > ul > li{
  color: #999999;
}
body#contact_us_page .contact_info .social_icons > ul > li > a{
  font-size: 20px;
  padding-right: 30px;
}
body#contact_us_page .contact_info .social_icons > ul > li > a:hover{
  color: #313a45;
}
.submit_btn {
  margin-top: 16px;
}
.thank_box {
  background: none repeat scroll 0 0 #eee;
  border-bottom: 5px solid #1774c1;
  font-size: 20px;
  height: 271px;
  margin: 100px auto 0;
  padding-top: 90px;
  text-align: center;
  width: 55%;
}
.thank_box a {
  background: #1774c1 none repeat scroll 0 0;
  border: 2px solid #fff;
  color: #fff;
  display: block;
  font-size: 13px;
  margin: 25px auto 0;
  padding: 15px 30px;
  text-decoration: none;
  text-transform: uppercase;
  width: 250px;
}
.thank_box a:hover {
  background: none repeat scroll 0 0 #fff;
  color: #1774c1;
  border:2px solid #1774c1;
  text-decoration:none;
}
.thank_box i {
  font-size: 12px;
  margin-right: 5px;
}
.send_mail .btn{
  text-transform: none;
}

/* --------------------------------------------------------
                End contact us page CSS
-----------------------------------------------------------*/       



/* --------------------------------------------------------
24.                Start Responsive CSS
-----------------------------------------------------------*/


/* ============================================
          Start Medium Layout: 1280px
===============================================*/

@media only screen and (min-width: 992px) and (max-width: 1199px) {
.container{
  width: 970px;
}
.header_we_are > dl {
  width: 67%;
}
.main_menu .navbar-default .navbar-nav > li > a {
  padding: 24px 31px;
}
.header_we_are dd, .header_we_are dd a {
  font-size: 12px;
}
.transport_features_area .panel-default > .panel-heading .panel-title a {
  font-size: 14px;
}
.transport_features {
  min-height: 850px;
}
.single_footer_widgets h4 {
  font-size: 22px;
}
.footer_social_icons i {
  margin-right: 7px;
}
.address_list dt, .address_list dd {
  font-size: 11px;
}
.single_who figure p {
  padding: 10px 30px 10px;
}
.single_on_parking figcaption {
  margin: 0 16px;
  padding: 0 10px;
}
.single_on_parking figcaption p {
  margin-left: 14px;
}
.keep_quick i, .keep_contact i {
  margin-right: 10px;
}
body#services_page .single_weoffer_best i {
  margin-right: 10px;
  width: 22%;
}
body#services_page .single_weoffer_best > dl > dt {
  font-size: 16px;
}
body#services_page .get_quote_area {
  background-position: 61.5% center;
}
.industry_support_area .tab-content p {
  line-height: 25px;
}
.single_blog_post ul li {
  padding: 0 10px;
}
.blog_feed_home li {
  margin-right: 15px;
  padding-right: 15px;
}
.blog_feed_home h6 a {
  font-size: 15px;
}
body#home_two .transport_features .section-content ul li {
  font-size: 13px;
}
body#home_two .transport_features .section-content ul li img {
  margin-right: 3px;
}


}
/* ============================================
          End Medium Layout: 1280px
===============================================*/


/* ============================================
          Start Tablet Layout: 768px
===============================================*/

@media only screen and (min-width: 768px) and (max-width: 991px) {
 .container{
  width:750px;
}
.header_we_are i {
  width: 22%;
}
.main_menu .navbar-default .navbar-nav > li > a {
  padding: 24px 21px;
}
.main_menu .dropdown-menu > li > a {
  font-size: 12px;
}
.transport_features_area .panel-default > .panel-heading .panel-title a {
  text-indent: 3px;
  font-size: 10px;
}
.single_footer_widgets {
  margin-bottom: 30px;
}
.single_who figure p {
  padding: 0 11px 5px;
}
.transport_features {
  min-height: 850px;
}
.get_quote_area {
  background: #000;
}
/*start about-us on parking*/
.single_on_parking {
  margin-bottom: 50px;
}
.single_on_parking figcaption {
  margin: 0 52px;
  padding: 0 29px;
  width: 70%;
}
/*End about-us on parking*/
.our_branches ul li i {
  margin-right: 1px;
}
.keep_quick i, .keep_contact i {
  margin-right: 10px;
}
.keep_in_touch p {
  font-size: 13px;
  line-height: 20px;
}
body#services_page .single_weoffer_best {
  margin-bottom: 60px;
}
body#services_page .single_perform{
  margin-bottom: 60px;
}
body#services_page .get_quote_area{
  background: #000;
}
.weare_best_at_area {
  background: #000 none repeat scroll 0 0;
}
.client_home_two_txt p {
  line-height: 19px;
  padding-bottom: 10px;
}
.blog_feed_home {
  margin-bottom: 30px;
}




}

/* ============================================
          Start Mobile Layout: 320px
===============================================*/

@media only screen and (max-width: 767px) {
.container {
  width:320px;
}
.why_us_area .single_why_us{
  margin-bottom: 30px;
}
.transport_features_area {
  background: #1874C1;
}
.transport_features_area .panel-title span {
  height: 40px;
  padding: 30px 5px;
  width: 40px;
}
.transport_features_area .panel-default > .panel-heading .panel-title a {
  font-size: 9px;
  text-indent: 4px;
}
.get_quote_area {
  background: #000;
}
.error_mail input[type="submit"] {
  padding: 12px 6px;
}
.error_mail input[type="text"] {
  text-indent: 5px;
  width: calc(100% - 75px);
}
.single_who figure p {
  margin-bottom: 30px;
  padding: 5px 30px;
}
.weare_best_at_area {
  background: #1D1C21;
}
.on_parking_area .single_on_parking {
  margin-top: 50px;
}
.about_client_area .client_border{
  border: none;
}
.all_parking_trucks .nav.nav-tabs li {
  margin-bottom: 20px;
  margin-right: 5px;
}
.all_parking_trucks .nav.nav-tabs li a {
  padding: 0 5px;
}
.pagination_number nav ul li a, .pagination_number nav ul li.active a {
  padding: 2px 11px;
}
.share-right span {
  margin-left: 5px;
}
.share-this {
  padding: 10px;
}
.share-left span.share-icon a {
  margin-left: 2px;
}
.single_blog_post ul li {
  border-right: none;
}
.single_blog_post figcaption{
  display: none;
}
.keep_quick i, .keep_contact i {
  margin-right: 10px;
}
.our_branches{
  margin-bottom: 30px;
  margin-top: 30px;
}
.all_frequent_accordion_queries .panel-default > .panel-heading .panel-title a{
  font-size: 14px;
  line-height: 50px;
}
body#services_page .single_weoffer_best i {
  margin-right: 10px;
}
body#services_page .single_weoffer_best > dl > dt {
  line-height: 23px;
}
body#services_page .single_weoffer_best{
  margin-bottom: 50px;
}
.industry_support_area .nav.nav-tabs li{
  margin-bottom: 30px;
}
.performance_area .single_perform{
  margin-bottom: 60px;
}
span.s-user-icon {
  float: left;
}
span.s-user-icon a i {
  margin-left: 5px;
}
.single_blog_post img {
  padding: 0; 
}
.comments-img {
  margin-left: 5px;
  margin-top: -18px;
}
.comments-user span.comments-name {
  font-size: 12px;
  width: 60%;
}
.comments-user span.comments-date {
  padding-left: 5px;
}
.comments-user span.comments-reply {
  text-align: left;
  width: 40%;
  padding: 0 5px;
}
.blog_details ul li img {
  padding: 0 10px;
}
.about_transport .btn.btn-see {
  font-size: 17px;
  padding: 10px;
}
body#home_two .single_whyhome_two_img {
  margin-bottom: 50px;
}
body#home_two .transport_features_area {
  background: #262b3f none repeat scroll 0 0;
}
body#home_two .owl-carousel .owl-item img {
  margin: 0 35px auto;
}
.client_home_two_txt h3 {
  margin: 10px;
}
.blog_feed_home li {
  margin-right: 15px;
  padding-right: 15px;
}
.blog_feed_home{
  margin-bottom: 30px;
}
body#home_two .single-counter {
  margin-bottom: 30px;
}


}
/* ============================================
          End Mobile Layout: 320px
===============================================*/


/* ============================================
          Start Wide Mobile Layout: 480px
===============================================*/

@media only screen and (min-width: 480px) and (max-width: 767px) {
.container {
  width:450px;
}


}
/* ============================================
          End Wide Mobile Layout: 480px
===============================================*/


/* --------------------------------------------------------
                End Responsive CSS
-----------------------------------------------------------*/