@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap");
* {margin: 0;padding: 0;box-sizing: border-box;font-family: "Poppins", sans-serif;}
h1,
h2,
h3,
h4,
h5,
h6,
p {margin: 0;}
ul {margin: 0;padding: 0;}
li {list-style: none;}
a {text-decoration: none;color: #000;transition: 0.5s;}
.custom-container {max-width: 1440px;}
body {background-color: #000;}
.section-spacing {margin-bottom: 80px;}
.title {font-size: 60px;font-weight: 600;color: #5bcad3;text-align: center;}
.about-span {color: #987b09;}
/* header section css */
header nav {display: flex;justify-content: space-between;align-items: center;}
header .header-logo img {max-width: 280px;}
header nav .main-menu {display: flex;align-items: center;}
header nav .main-menu li {padding-left: 30px;}
header nav .main-menu li a {color: #33baee;transition: 0.5s;}
header nav .main-menu li a:hover{color: #987b09;}
/*  title & description common css */
.sub-title {color: #987b09;margin-bottom: 10px;}
.heading {font-size: 40px;color: #5bcad3;margin-bottom: 20px;}
.description {color: #fff;letter-spacing: 1px;margin-bottom: 20px;}
/* service give section css */
.call-repire-section {background-image: url(../images/service.jpg);background-position: center;background-repeat: no-repeat;background-size: cover;padding: 100px 0;}
/* hero slide css */
.hero-service-content {max-width: 700px;}
.hero-slider .owl-nav {position: absolute;z-index: 1;top: 20px;right: 40px;}
.hero-slider .owl-nav .owl-prev {margin-right: 20px;}
.hero-slider .owl-dots {text-align: center;padding-top: 20px;}
.hero-slider .owl-dot.active {width: 40px;height: 7px;border-radius: 10px;background-color: #33baee !important;}
.hero-slider .owl-dot {width: 20px;height: 7px;border-radius: 10px;background-color: #5bcad3 !important;margin: 0 5px;transition: 0.5s;}
/* our service section css */
.service-content {background-color: #000000;border-bottom: 3px solid #987b09;border-radius: 10px;padding: 15px;max-width: 400px;width: 100%;margin: 0 auto;position: absolute;bottom: -20%;left: 50%;transform: translateX(-50%);}
.service-content .sub-title {font-size: 20px;}
.service-content .description {color: #33baee;}
.service-box {position: relative;margin-bottom: 100px;}
/* client slider section css */
.client-slider .item {border: 2px dotted #987b09;padding: 30px;border-radius: 10px;}
.client-slider .star {max-width: 120px;margin-bottom: 20px;}
.client-slider .client-profile img {max-width: 50px;margin-right: 15px;}
.client-slider .client-profile {display: flex;align-items: center;}
.client-slider .client-name {color: #5bcad3;}
.client-slider .owl-dots {text-align: center;padding-top: 20px;}
.client-slider .owl-dot.active {width: 40px;height: 7px;border-radius: 10px;background-color: #33baee !important;}
.client-slider .owl-dot {width: 20px;height: 7px;border-radius: 10px;background-color: #5bcad3 !important;margin: 0 5px;transition: 0.5s;}
/* call to action section css */
.call {display: flex;align-items: center;margin-bottom: 30px;}
.call .description {margin-bottom: 0;}
.call-icon {margin-right: 20px;}
/* footer css */
.footer-logo {max-width: 300px;}
.footer-heading {color: #987b09;margin-bottom: 30px;}
.footer-link li {padding-bottom: 20px;}
.footer-link li a {color: #5bcad3;font-size: 18px;transition: 0.5s;}
.footer-link li a:hover{color: #987b09;}
/*  inner hero section css & bredcrum css */
.inner-section {padding: 100px 0;}
.breadcrumb {justify-content: center;margin-top: 30px;}
.breadcrumb-item a {color: #5bcad3;font-size: 18px;}
.breadcrumb-item.active {color: #987b09;font-weight: 600;font-size: 18px;}
/* mini footer section css */
.mini-footer {padding: 20px;border-top: 2px dotted #987b09;margin-top: 40px;}
.copy-right {text-align: center;}
.compay-name {color: #5bcad3;font-size: 18px;font-weight: 600;transition: 0.5s;}
.compay-name:hover{color: #987b09;}
/* contact us section form css */
.contact-details {margin-top: 50px;margin-bottom: 50px;}
.contact-details .sub-title {font-size: 20px;display: block;margin-bottom: 20px;}
.contact-details .sub-title img {margin-right: 20px;}
.contact-form {padding: 30px;border: 2px dotted #987b09;border-radius: 10px;}
.form-group {margin-bottom: 30px;}
.form-group label {font-size: 18px;color: #987b09;margin-bottom: 10px;}
.form-control {background-color: transparent;border: 1px dotted #5bcad3;height: 50px;}
.form-control.text-area {height: 150px;}
.submit-btn {background-color: #987b09;color: #fff;padding: 12px 30px;border: 1px solid transparent;transition: 0.5s;}
.submit-btn:hover {background-color: transparent;border: 1px solid #987b09;color: #987b09;}
/* our work page gallery css */
.main .container {display: grid;grid-template-columns: repeat(3, 1fr);grid-gap: 1rem;justify-content: center;align-items: center;}
.main .card {color: #252a32;border-radius: 2px;background: #ffffff;box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.24);}
.main .card-image {position: relative;display: block;width: 100%;padding-top: 70%;background: #ffffff;}
.main .card-image img {display: block;position: absolute;top: 0;left: 0;width: 100%;height: 100%;object-fit: cover;}
@media only screen and (max-width: 600px) {
  .main .container {display: grid;grid-template-columns: 1fr;grid-gap: 1rem;}
}
/* tranding and rates section css */
.trnding-hours,
.rates {padding: 30px;border: 2px dotted #987b09;height: 90%;border-radius: 10px;background-color: #987b0940;}
/* safty policy page css */
.safety-list .description::before {content: url(../images/route-arrow.svg);vertical-align: middle;margin-right: 15px;}
/* related section css */
.related-services .sub-title {display: block;font-size: 20px;border: 2px dotted #987b09;padding: 12px 30px;border-radius: 50px;transition: 0.5s;}
.related-services .sub-title:hover {background-color: #987b09;border: 2px solid transparent;color: #fff;}
.related-services {padding: 30px;border: 2px dotted #5bcad3;border-radius: 10px;}
/* service details get in touch section css */
.get-in-touch {padding: 30px;border: 2px dotted #5bcad3;border-radius: 10px;margin-top: 30px;}
.get-in-touch .contact-details {margin: 0;}
.get-in-touch .contact-details .sub-title {display: inline-flex;transition: 0.5s;}
.get-in-touch .contact-details .sub-title:hover{
  color: #5bcad3;
}
/* toggle btn css */
.toggle {width: 38px;height: 38px;cursor: pointer;right: 0;position: relative;margin-left: 0;z-index: 1;display: none !important;}
.toggle-icon::before,
.toggle-icon::after {content: "";position: absolute;top: 0;right: 0;height: 10%;width: 70%;background: #987b09;transition: 0.3s linear;}
.toggle-icon::before {transform: translateX(0);}
.toggle-icon::after {top: 13px;width: 70%;}
/*  */
.products-detsilis-desc{margin-left: 50px;}
.products-detsilis-desc .description{list-style: disc;color: #987b09;}
/* all respobnsive media qureis */
@media (min-width: 1200px) and (max-width: 1500px) {
  .custom-container {max-width: 90%;}
  .service-content {max-width: 350px;}
  .heading {font-size: 36px;}
  .description {font-size: 16px;}
  .title {font-size: 52px;}
  .safety-list .description {display: flex;}
  .related-services .sub-title {font-size: 18px;padding: 12px 25px;}
  .get-in-touch {padding: 20px;}
  .contact-details .sub-title img {margin-right: 15px;max-width: 30px;}
  .contact-details .sub-title {font-size: 18px;}
  .inner-section {padding: 80px 0;}
}
@media (min-width: 768px) and (max-width: 1199px) {
  .custom-container {max-width: 90%;}
  header .header-logo img {max-width: 200px;}
  header nav .main-menu li {padding-left: 0;}
  .toggle {display: block !important;z-index: 6;top: 10px;}
  .closeMenu .toggle-icon::before {visibility: visible;opacity: 1;top: 0;transition: 0.3s linear;transform: rotate(135deg);background-color: #987b09;}
  .closeMenu .toggle-icon::after {top: 0;transition: 0.3s linear;transform: rotate(42deg);background-color: #987b09;}
  header nav .main-menu {flex-direction: column;position: absolute;top: 0;left: -100%;background: #000000;height: 100vh;width: 100%;justify-content: center;align-items: center;row-gap: 25px;transition: 0.3s;overflow: hidden;}
  header nav .main-menu li a {color: #5bcad3;font-size: 30px;}
  header nav ul li {padding-left: 0;}
  header nav .main-menu.show-menu {left: 0;z-index: 4;}
  .section-spacing {margin-bottom: 50px;}
  .about {display: none;}
  .service-content {max-width: 300px;}
  .call-repire-section {padding: 50px 0;}
  .title {font-size: 48px;}
  .breadcrumb {margin-top: 20px;}
  .safety-list .description {display: flex;}
  .contact-form {margin-top: 20px;}
}
@media (min-width: 320px) and (max-width: 767px) {
  .custom-container {max-width: 90%;}
  header .header-logo img {max-width: 200px;}
  header nav .main-menu li {padding-left: 0;}
  .toggle {display: block !important;z-index: 6;top: 10px;}
  .closeMenu .toggle-icon::before {visibility: visible;opacity: 1;top: 0;transition: 0.3s linear;transform: rotate(135deg);background-color: #987b09;}
  .closeMenu .toggle-icon::after {top: 0;transition: 0.3s linear;transform: rotate(42deg);background-color: #987b09;}
  header nav .main-menu {flex-direction: column;position: absolute;top: 0;left: -100%;background: #000000;height: 100vh;width: 100%;justify-content: center;align-items: center;row-gap: 25px;transition: 0.3s;overflow: hidden;}
  header nav .main-menu li a {color: #5bcad3;font-size: 30px;}
  header nav ul li {padding-left: 0;}
  header nav .main-menu.show-menu {left: 0;z-index: 4;}
  .section-spacing {margin-bottom: 50px;}
  .hero-section.section-spacing {margin-bottom: 30px;}
  .about {display: none;}
  .heading {font-size: 24px;}
  .description {font-size: 14px;margin-bottom: 10px;}
  .call-repire-section {padding: 30px 0;}
  .service-content {max-width: 270px;bottom: -30%;}
  .client-slider .item {padding: 20px;}
  .owl-nav {display: none;}
  .inner-section {padding: 50px 0;}
  .title {font-size: 36px;}
  .breadcrumb {margin-top: 10px;}
  .contact-form {padding: 15px;margin-top: 25px;}
  .safety-list .description {display: flex;}
  .related-services {padding: 15px;margin-top: 20px;}
  .related-services .sub-title {padding: 10px 15px;font-size: 16px;}
  .get-in-touch {padding: 15px;}
  .contact-details .sub-title {font-size: 14px;}
  .contact-details .sub-title img {margin-right: 10px;max-width: 30px;}
}