@charset "UTF-8";

@font-face {
  font-family: 'poppins';
  src: URL('../font/poppins/Poppins-Light.ttf') format('truetype');
}

* {
  margin: 0;
  padding: 0;
  font-family: "poppins";
}

:root {
  --bs-blue: #0d6efd;
  --bs-indigo: #6610f2;
  --bs-purple: #7464a1;
  --bs-pink: #d63384;
  --bs-red: #a16468;
  --bs-orange: #fd7e14;
  --bs-yellow: #e4c662;
  --bs-green: #67c29c;
  --bs-teal: #64a19d;
  --bs-cyan: #1cabc4;
  --bs-black: #000;
  --bs-white: #fff;
  --bs-gray: #6c757d;
  --bs-gray-dark: #343a40;
  --bs-gray-100: #f8f9fa;
  --bs-gray-200: #e9ecef;
  --bs-gray-300: #dee2e6;
  --bs-gray-400: #ced4da;
  --bs-gray-500: #adb5bd;
  --bs-gray-600: #6c757d;
  --bs-gray-700: #495057;
  --bs-gray-800: #343a40;
  --bs-gray-900: #212529;
  --bs-primary: #64a19d;
  --bs-secondary: #7464a1;
  --bs-success: #67c29c;
  --bs-info: #1cabc4;
  --bs-warning: #e4c662;
  --bs-danger: #a16468;
  --bs-light: #f8f9fa;
  --bs-dark: #212529;
  --bs-black: #000;
  --bs-white: #fff;
  --bs-primary-rgb: 100, 161, 157;
  --bs-secondary-rgb: 116, 100, 161;
  --bs-success-rgb: 103, 194, 156;
  --bs-info-rgb: 28, 171, 196;
  --bs-warning-rgb: 228, 198, 98;
  --bs-danger-rgb: 161, 100, 104;
  --bs-light-rgb: 248, 249, 250;
  --bs-dark-rgb: 33, 37, 41;
  --bs-black-rgb: 0, 0, 0;
  --bs-white-rgb: 255, 255, 255;
  --bs-white-rgb: 255, 255, 255;
  --bs-black-rgb: 0, 0, 0;
  --bs-body-color-rgb: 33, 37, 41;
  --bs-body-bg-rgb: 255, 255, 255;
  --bs-font-sans-serif: 'poppins';
  --bs-font-monospace: 'poppins';
  --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
  --bs-body-font-family: 'poppins';
  --bs-body-font-size: 1rem;
  --bs-body-font-weight: 400;
  --bs-body-line-height: 1.5;
  --bs-body-color: #212529;
  --bs-body-bg: #fff;
  --bs-border-width: 1px;
  --bs-border-style: solid;
  --bs-border-color: #dee2e6;
  --bs-border-color-translucent: rgba(0, 0, 0, 0.175);
  --bs-border-radius: 0.375rem;
  --bs-border-radius-sm: 0.25rem;
  --bs-border-radius-lg: 0.5rem;
  --bs-border-radius-xl: 1rem;
  --bs-border-radius-2xl: 2rem;
  --bs-border-radius-pill: 50rem;
  --bs-link-color: #64a19d;
  --bs-link-hover-color: #50817e;
  --bs-code-color: #d63384;
  --bs-highlight-bg: #faf4e0;

  --bs-navbar-bg: #f0de1c;
  --bs-navbar-color: white;
}

body,
html {
  height: 100%;
  margin: 0;
  color: #777;
}

body {
  margin: 0;
  font-family: var(--bs-body-font-family);
  font-size: var(--bs-body-font-size);
  font-weight: var(--bs-body-font-weight);
  line-height: var(--bs-body-line-height);
  color: var(--bs-body-color);
  text-align: var(--bs-body-text-align);
  background-color: var(--bs-body-bg);
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

hr {
  margin: 1rem 0;
  color: inherit;
  border: 0;
  border-top: 1px solid;
  opacity: 0.25;
}

/* change the background color */
.navbar-custom {
  background-color: var(--bs-navbar-bg);
}

/* change the brand and text color */
.navbar-custom .navbar-brand,
.navbar-custom .navbar-text {
  color: var(--bs-gray-800);
}

/* change the link color */
.navbar-custom .navbar-nav .nav-link {
  color: var(--bs-gray-800);
  font-weight: 600;
}

/* change the color of active or hovered links */
.navbar-custom .nav-item.active .nav-link,
.navbar-custom .nav-item:focus .nav-link,
.navbar-custom .nav-item:hover .nav-link {
  color: red;
}

.nav-item .active {
  color: red;
}

.title {
  font-weight: 800;
  font-size: 66px;

  span {
    color: var(--bs-navbar-bg);
  }
}

nav {
  position: sticky;

  img {
    width: 60px;
    height: 50px;
  }
}

.bgimg-1,
.bgimg-2,
.bgimg-3 {
  position: relative;
  opacity: 0.65;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.bgimg-1 {
  background-image: url("../image//truck/truck102.jpg");
  height: 88vh;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-size: 100% 100%;
}

.bgimg {
  background-image: url("../image//truck/truck102.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  height: 90vh;
}

.color-overlay {
  position: absolute;
  background: rgba(0, 0, 0, 0.8);
  width: 100%;
  height: 100%;
}

.color-overlay h1,
.color-overlay p {
  color: white;
}

.para {
  padding: 40px;
  background: #ff5959;
  color: white;
  /* border-radius: 90px; */
}

.para div {
  margin: auto;
  height: 100%;
  margin: auto;
  display: grid;
}


/* Call Section */
.call-sec {
  text-align: center;
  background: black;
  font-weight: 700;
  font-size: 22px;
  color: white;
  padding: 26px;
}

.call-sec a {
  color: var(--bs-body-bg);
}

/* about Section */
.about {
  padding: 32px;
  text-align: center;
}

.about img {
  width: 100%;
  border-radius: 240px 0px 210px 0px;
}

.about ul {
  text-align: left;
  font-weight: 600;
  list-style-type: none;
}

/* services section */
.services {

  /* height: 100vh; */
  .col {
    border: 1px solid;
    margin: 18px;
    padding: 12px;
  }

  img {
    width: 290px;
    margin: 6px;
    height: 200px;
    border-radius: 96px 0px 0px 51px;
  }
}

/* contact section */

.contact {
  padding: 24px;

  .col {
    border: 1px solid;
    margin: 10px;
    padding: 32px 26px 18px 26px;
    border-radius: 20px
  }
}

.bgimg-2 {
  background-image: linear-gradient(rgba(0, 0, 255, 0.5), rgba(255, 255, 0, 0.5)), url("../image/truck/truck7.jpg");
  min-height: 500px;
}

.bgimg-3 {
  background-image: url("../image/truck/truck3.jpg");
  min-height: 400px;
}

.caption {
  position: absolute;
  left: 0;
  top: 50%;
  padding-top: 18px;
  width: 100%;
  text-align: center;
  color: #000;
}

.caption span.border {
  background-color: #111;
  color: #fff;
  padding: 18px;
  font-size: 25px;
  letter-spacing: 10px;
}

h3 {
  letter-spacing: 5px;
  text-transform: uppercase;
  color: #f0de1c !important;;
}

.contact {
  background: #313333;
  color: white;
}

footer {
  background-color: #f0de1c !important;
  font-size: 24px;
  padding: 10px;
}