@import url("https://fonts.googleapis.com/css2?family=Brygada+1918:ital,wght@0,400;0,700;1,400;1,700&family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400;1,600;1,700&display=swap");

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

a {
  text-decoration: none;
}

:root {
  /* Global Colors */
  --primary-color: #192a30;
  --secondary-color: #000;
  --hover-color: #d1b096;

  /* Global Fonts */
  --font-primary: "Brygada 1918", serif;
  --font-secondary: "Open Sans", sans-serif;
}

.h-100 {
  height: 100%;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-primary);
  font-weight: 700;
  color: #000;
}

h1 {
  font-size: clamp(1.5rem, 1.4rem + 0.6vw, 2.1rem);
  line-height: clamp(2.1rem, 1.9rem + 1vw, 3.2rem);
}

h2 {
  font-size: clamp(1.2rem, 1.1rem + 0.5vw, 1.7rem);
  line-height: clamp(1.6rem, 1.4rem + 0.8vw, 2.4rem);
}

h3 {
  font-size: clamp(1.1rem, 1rem + 0.4vw, 1.45rem);  
  line-height: clamp(1.5rem, 1.3rem + 0.6vw, 2rem);
}

h4 {
  font-size: clamp(1rem, 0.95rem + 0.35vw, 1.25rem); 
  line-height: clamp(1.3rem, 1.2rem + 0.5vw, 1.7rem);
}

h5 {
  font-size: clamp(0.9rem, 0.85rem + 0.3vw, 1.1rem); 
  line-height: clamp(1.2rem, 1rem + 0.4vw, 1.5rem);
}

h6 {
  font-size: clamp(0.8rem, 0.75rem + 0.25vw, 0.95rem); 
  line-height: clamp(1rem, 0.9rem + 0.3vw, 1.3rem);
}

p {
  font-family: var(--font-secondary);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

strong {
  font-size: 18px;
  font-weight: 600;
}

p strong {
  font-size: 16px;
}

.button-primary {
  padding: 10px 18px;
  border-radius: 3px;
  font-family: var(--font-secondary);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #fff;
  background-color: var(--primary-color);
  border: 1px solid var(--primary-color);
}

.button-primary:hover {
  background-color: var(--hover-color);
  border: 1px solid var(--hover-color);
  color: var(--secondary-color);
}

.button-secondary {
  background-color: #d1b096;
  padding: 10px 18px;
  border-radius: 3px;
  font-family: var(--font-secondary);
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
}

.button-small {
  padding: 8px 14px;
  color: #fff;
  font-size: 12px;
  line-height: 18px;
}

.secondary-color {
  color: #d1b096;
}

.texture-background {
  background-image: url(assets/images/texture.png);
  background-repeat: repeat;
  background-position: center center;
  background-size: 15px auto;
}

/* Header Top Bar */
header .contact-info a {
  color: var(--secondary-color);
  text-decoration: none;
}

header .contact-info a:hover {
  color: var(--hover-color);
}

/* Header Navigation */
header section.navigation-menu {
  background-color: var(--primary-color);
  height: 64px;
}

header .header-logo img {
  width: 200px;
  height: 46px;
  object-fit: cover;
}

header .header-contact-icon {
  width: 25px;
  height: 25px;
  object-fit: cover;
  border-radius: 50%;
}

header section.navigation-menu ul a {
  font-family: var(--font-secondary);
  color: #fff !important;
}

header section.navigation-menu ul .dropdown li a {
  color: #000 !important;
}

header .custom-dropdown {
  background-color: transparent;
  border: 0;
  box-shadow: unset;
  color: #fff;
}

header section.navigation-menu a.btn {
  padding: 8px 20px !important;
  border-radius: 3px !important;
  font-family: var(--font-secondary);
}

header section.navigation-menu a.btn:hover {
  background-color: var(--hover-color) !important;
  color: var(--secondary-color) !important;
  border-color: var(--hover-color) !important;
}

header ul.dropdown-menu {
  border-radius: 0;
  padding: 0;
  background-color: #fff;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-bottom: 0;
}

header ul.dropdown-menu li {
  padding: 9px 12px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

header ul.dropdown-menu li:hover {
  background-color: rgba(0, 0, 0, 0.1);
}

header ul.dropdown-menu li a {
  padding: 0;
  font-size: 14px;
}

header ul.dropdown-menu li a:hover {
  background-color: transparent;
}

/* Hero Section */
main {
  height: 650px;
  background-image: url(assets/images/hero.webp);
  background-color: #192a30;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

main .hero-container {
  padding-top: 100px;
}

.hero-container h1 {
  font-size: clamp(1.5625rem, 1.3889rem + 0.9259vw, 2.5rem);
  line-height: clamp(1.8125rem, 1.6389rem + 0.9259vw, 2.75rem);
}

.hero-container h2 {
  font-size: clamp(1rem, 0.9306rem + 0.3704vw, 1.375rem);
  line-height: clamp(1.25rem, 1.1343rem + 0.6173vw, 1.875rem);
}

.hero-container p {
  font-size: clamp(0.75rem, 0.7037rem + 0.2469vw, 1rem);
}

.hero-container img {
  height: 450px;
  object-fit: contain;
}

/* Services */
.services-icon {
  width: 35px;
  height: 35px;
  object-fit: cover;
  border-radius: 50%;
}

.services-desc {
  font-size: 14px;
  text-align: justify;
  line-height: 21px;
  min-height: 220px;
}

/* About-us */
/* .about-us-container {
  max-width: 1140px;
} */

.about-us-container img {
  height: 400px;
  object-fit: cover;
}

.about-us-container p strong {
  font-weight: 700;
  font-size: 14px;
}

/* Trucks and Vans */
.truck-van-desc {
  max-width: 800px;
}

/* .trucks-vans-container {
  max-width: 1140px;
} */

.trucks-vans-container .card {
  border-radius: 10px;
}

.trucks-vans-container .card img {
  width: 100%;
  height: 210px;
  object-fit: cover;
  border-radius: 10px 10px 0 0;
}

.trucks-vans-container  p {
  font-size: 14px;
  min-height: 145px;
  text-align: justify;
}

.trucks-vans-container .card div  p:nth-of-type(2) {
  min-height: auto;
}

.meat-container p {
  min-height: 195px;
}

/* Fast Vhiller Van */
.fast-chiller-van {
  background-image: url(assets/images/fast-chiller-van.webp);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.fast-chiller-van h5 {
  font-weight: 400;
  max-width: 550px;
}

/* Contact Form */
.contact-form-container {
  max-width: 600px;
  width: 100%;
}

.footer-contact {
  max-width: 900px;
  width: 95%;
}

/* About Us Page */

.about-us-list li strong {
  font-size: 14px;
}

.about-us-container.experience {
  background-color: rgba(249, 249, 249, 1);
  border: 1px solid rgba(224, 224, 224, 1);
  border-radius: 3px;
}

.about-us-container.experience div.d-flex img {
  width: 54px;
  height: 54px;
  object-fit: contain;
}

.about-us-container.experience div.d-flex h6 {
  font-family: var(--font-secondary);
  font-size: 28px;
  font-weight: 700;
}

.about-us-container.experience div.d-flex {
  position: relative;
}

.about-us-container.experience div.d-flex::after {
  content: "";
  background-image: url(assets/images/experience.png);
  background-repeat: no-repeat;
  background-position: right center;
  width: 2px;
  height: 120px;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

.about-us-container.experience div.d-flex:last-child:after {
  all: unset;
}

/* Work Day and Night */
.work-day-night {
  /* max-width: 1140px; */
  width: 95%;
}

.work-day-night .work-desc {
  max-width: 900px;
  width: 95%;
}

.work-container {
  background-color: rgba(249, 249, 249, 1);
  border: 1px solid rgba(224, 224, 224, 1);
  border-radius: 3px;
  min-height: 225px;
}

.work-container p {
  font-size: 14px;
}

/* Pricing */
.pricing {
  max-width: 992px;
  width: 95%;
}

.pricing-container {
  background-color: rgba(249, 249, 249, 1);
  border: 1px solid rgba(222, 222, 222, 1);
  border-radius: 5px;
}

.pricing-header {
  background-color: var(--primary-color);
  border-radius: 5px 5px 0 0;
}

.pricing-body h5 sub {
  font-family: var(--font-secondary);
  font-weight: 400;
  position: relative;
  top: 0;
  font-size: 12px;
}

.pricing-body ul {
  list-style-type: none;
}

.pricing-body ul li img {
  width: 16px;
  height: 16px;
  object-fit: cover;
  border-radius: 50%;
}

.pricing-body ul li.checkmark span {
  font-size: 14px;
}

.pricing-body ul li.crossmark span {
  font-size: 14px;
  color: rgba(171, 171, 171, 1);
}

.pricing-footer a {
  padding: 6px 15px;
  border-radius: 5px;
  position: relative;
  width: 100%;
}

/* Services Page */

.services-container .card {
  border: 1px solid #b8b8b8;
}

.services-container .service-img {
  object-fit: cover;
  border-radius: 5px 0 0 5px;
}

.service-details p {
  font-size: 14px;
}

.services-container .specification-icon {
  width: 25px;
  height: 25px;
  object-fit: cover;
  border-radius: 50%;
}

.service-details strong {
  font-size: 14px;
}

.services-container .specification-container {
  border: 1px solid rgba(200, 200, 200, 1);
  border-radius: 3px;
  min-height: 30px;
}

.services-container .service-details {
  background-color: rgba(217, 217, 217, 0.2);
}

/* Contact Us Page */
.contact-container {
  max-width: 900px;
}

.contact-container .responsive-iframe {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  overflow: hidden;
}

.contact-container .responsive-iframe iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Single Service Page */


.singl-service-card {
  background-color: #fff;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.05);
  border: 1px solid #F1F1F1;
  min-height: 270px;
}

.singl-service-card div img {
  width: 40px;
  height: 40px;
  object-fit: cover;
}

.singl-service-card p {
  font-size: 14px;
}

/* Footer */
footer {
  background-color: var(--primary-color);
}

footer .footer-contact-icon {
  width: 50px;
  height: 50px;
  object-fit: cover;
}

footer .footer-logo img {
  width: 320px;
  height: 76px;
  object-fit: cover;
}

footer .footer-desc {
  font-weight: 300;
  font-size: 14px;
  text-align: justify;
}

footer .footer-angle-icon {
  width: 12px;
  height: 12px;
  object-fit: cover;
}

footer hr.secondary-color {
  border-top-width: 2px;
  opacity: 0.7;
  width: 105px;
}

footer hr.services-hr {
  width: 75px;
}

footer hr.contact-info {
  width: 110px;
}

footer .footer-contactinfo-icon {
  width: 25px;
  height: 25px;
  object-fit: cover;
  border-radius: 50%;
}


.footer-whatsapp {
  position: fixed;
  right: 20px;
  bottom: 30px;
  width: 40px;
  height: 40px;
  z-index: 999;
}

.footer-whatsapp img {
  width: 40px;
  height: 40px;
}
.footer-call {
  position: fixed;
  right: 20px;
  bottom: 80px;
  width: 40px;
  height: 40px;
  z-index: 999;
}

.footer-call img {
  width: 40px;
  height: 40px;
}

.card p strong,
.singl-service-card p strong {
  font-size: 14px;
}

ol li strong {
  font-size: 16px;
}

/* Media Quaries */

@media (max-width: 1200px) {
  footer .footer-logo img {
    width: 275px;
    object-fit: contain;
  }

  main .hero-container {
    padding: 70px 0;
  }
}

@media ( max-width: 992px ) {

  main {
    height: 800px;
  }

  .hero-container p {
    text-align: justify;
  }

  .hero-container img {
    height: 300px;
  }

}

@media ( max-width: 767px ) {
  .about-us-container.experience div.d-flex:nth-child(even)::after {
    all: unset;
  }

  .about-us-container.experience div.d-flex img {
    width: 40px;
    height: 40px;
  }
  
  .about-us-container.experience div.d-flex h6 {
    font-size: 22px;
  }

  .services-desc {
    min-height: 280px;
  }
}

@media (max-width: 575px) {
  header section.navigation-menu ul a {
    font-family: var(--font-secondary);
    color: #000 !important;
  }

  header section.navigation-menu ul.navbar-nav {
    background-color: #fff;
    gap: 10px 0;
  }

  header .custom-dropdown {
    color: #000;
  }

  main {
    height: 950px;
  }

  main .hero-container {
    padding: 50px 0 100px 0;
  }

  main .hero-container h1,
  main .hero-container h2,
  main .hero-container p {
    color: #fff;
  }

  .hero-container img {
    padding-top: 50px;
  }

  .services-desc {
    min-height: 120px;
  }

  .meat-container p {
    min-height: 150px;
  }

  .about-us-container img {
    height: 300px;
  }

  .services-container h1 + p,
  .services-container h1 + p + p {
    font-size: 14px;
    line-height: 20px;
  }

  .table th, .table td {
    white-space: nowrap;
    font-size: 14px;
    padding: 8px;
  }
}