:root {
  --f-size-26:26px;
  --gap-50:50px;
}
body{ overflow-x: hidden;}
body.theme-mackellar { 
  /* need this css */
   --tm-inner-ban-heading:  var(--brand-secondary);
   --tm-news-h3-color: var(--color-btn-primary);
   --tm-m-ventures-title: #00A0D8;
   --tm-equipment-link-color:var(--color-teal-dark);
}

.responsive-image-wraper{ position: relative; z-index: 1; overflow: hidden;}
.responsive-image-wraper img{ position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; object-fit: cover;}
.btn, a.btn{ background: var(--brand-primary); color: var(--color-white); border: none; border-radius: 7px; padding: 6px 16px; cursor: pointer; transition: var(--common-transition); }
.btn:hover, a.btn:hover { background: var(--color-black); color: var(--color-white);}

body.theme-mackellar .footer-newsletter-content p{ font-size: var(--f-size-S);}

.hero-section.inner-banner-section{ min-height: 695px;}
.inner-banner-section .inner-banner-title{ width: fit-content; background: var(--tm-inner-ban-heading ); padding: 16px 50px;}

.inner-banner-section .inner-banner-title h1{ margin-bottom: 0; color: var(--color-white); font-family: var(--font-family-primary); line-height: 1; font-weight: var(--fw-bold);}

button.play-btn { position: absolute; z-index: 3; inset: 0; margin: auto; background: transparent; padding: 0; border: 0; width: 55px; height: 55px; cursor: pointer; }
button.play-btn img{ display: block; width: auto; height: 100%;}
.modal-dialog{ max-width: 700px; width: calc(100% - 20px); margin-right: auto; margin-left: auto;}
.modal-content{ background: transparent; border: 0;}
.video-popup .modal-body { padding: 0; overflow: hidden;}
.modal-body button.btn-close { position: absolute; z-index: 15; top: 10px; right: 10px; width: 50px; height: 50px; padding: 0; background-color: var(--color-white); opacity: 1; border-radius: 50%; }

.video-popup .video-box{ position: relative; padding-bottom: 65%; border-radius: 20px; overflow: hidden;}
.video-popup .video-box iframe, .video-box video{ position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; object-fit: cover;}

.key-info-section{ background: var( --brand-primary);}
.key-info-section .info-wraper{ max-width: 870px;}
.key-info-section h3{ color: var(--color-white); font-size: var(--f-size-26); margin: 0;}
.indigenous-partnership-section .row{ align-items: inherit !important;}
.theme-mackellar .indigenous-partnership-img{ height: 100%;}
.theme-mackellar .indigenous-partnership-content{ display: flex; flex-direction: column; justify-content: center; height: 100%; padding-top: 50px; padding-bottom: 50px;}

.career-opportunities-holder{ max-width: 985px;}
.career-opportunities-card{ padding: 25px 40px; border: 1px solid #E6E6E6; box-shadow: 4px 4px 4px 0px #00000024; }
.career-opportunities-card a.arrow-btn::after{ width: 22px; height: 22px;}
.theme-mackellar .career-opportunities-card a.arrow-btn{ color: var(--brand-secondary);}
.theme-mackellar .career-opportunities-card a.arrow-btn::after{     background-image: var(--arrow-icon-2);}
.career-opportunities-card:not(:last-child){ margin-bottom: 35px;}

/* M SAFETY CULTURE PAGE START HERE */
.safety-culture-section .section-title{ margin-bottom: var(--gap-50);}
.safety-culture-section .section-title h2{ margin-bottom: 0;}
.safety-culture-section .image-outer{ padding-right: 3%;}
.safety-culture-section .image-wraper{ padding-bottom: 90%;}
.safety-culture-section .info-wraper{ padding-left: 6%;}
.safety-culture-section .info-wraper p{ font-weight: var(--fw-semi-bold);}
.safety-culture-partnership-section{ background: var(--brand-primary);}

/* M NEWS PAGE START HERE */
body:has(.m-news-banner-section) .main-header{ border: 0;}
.m-news-banner-section{ background: var(--brand-secondary);}
.m-news-banner-section .info-holder { display: flex; align-items: center; padding-right: 12%; }
.m-news-banner-section .info-holder>div{ width: 100%;}
.m-news-banner-section h1, .m-news-banner-section p{ color: var(--color-white);}
.m-news-banner-section h3{ color: var(--tm-news-h3-color); font-family: var(--font-family-primary); font-weight: var(--fw-bold);}
.m-news-banner-section .arrow-btn::after{ width: 20px; height: 20px;}
.m-news-banner-section .image-outer { width: calc(50vw - 10px); max-width: 1150px; height: 100%;}
.m-news-banner-section .image-outer .image-wraper{ padding-bottom: 83%; height: 100%;}

.m-news-listing-section{ overflow: hidden;}
.m-news-card .news-card__image { position: relative; padding-bottom: 65%; margin-bottom: 20px; overflow: hidden;}
.m-news-card .news-card__image img{ position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: var(--common-transition);}

.m-news-card .news-card__title{ color: var(--color-body); font-family: var(--font-family-primary); font-weight: var(--fw-semi-bold); font-size: var(--f-size-M); margin-bottom: 10px;}
.m-news-card .news-card__meta{ margin-bottom: 25px; font-family: var(--font-family-primary); font-size: var(--f-size-XXS);}
.m-news-card:hover .news-card__image img{ transform: scale(1.1);}

.news-featured-list-row{ margin-bottom: var(--gap-50);}
.m-news-card--featured .news-card__image{ margin-right: 12px; margin-bottom: 0; padding-bottom: 56%;}
.m-news-card--featured .news-card__content { padding-left: 12%; }
.m-news-card--featured .news-card__content .news-card__meta, .m-news-card--featured .news-card__content .arrow-btn.small{ font-size: var( --f-size-XS);}

.news-listing__filter .nav-tabs { border: 0; border-bottom: 1px solid #919191; justify-content: center; margin-bottom: var(--gap-50); position: relative;}
.news-listing__filter .nav-tabs::before, .news-listing__filter .nav-tabs::after { content: ""; position: absolute; z-index: 1; bottom: -1px; width: 350%; background: #919191; height: 1px; }
.news-listing__filter .nav-tabs::before{ left: -350%;}
.news-listing__filter .nav-tabs::after{ right: -350%;}
.news-listing__filter .nav-tabs .nav-link { padding: 25px; line-height: 1; border: 0; color: var(--color-black); font-family: var(--font-family-primary); font-weight: var(--fw-light); font-size: var(--f-size-M); background: transparent; border-radius: 0; margin: 0; transition: var(--common-transition); }

.news-listing__filter .nav-tabs .nav-link.active { font-weight: var(--fw-semi-bold); }
.news-listing__grid .row{ --bs-gutter-x: 50px; row-gap: 25px;}

/* M INDIGENOUS PARTNERSHIP PAGE START HERE */
.media-content-section .media-image-holder{ padding-right: 10%;}
.media-content-section .media-image-holder .image-wraper{ padding-bottom: 125%;}
.media-content-section .media-content-wraper{ padding-left: 3%;}
.media-content-section .flex-row-reverse .media-image-holder{ padding-right: 0; padding-left: 10%;}
.media-content-section .flex-row-reverse .media-content-wraper{ padding-left: 0; padding-right: 3%;}
.section-divider-image { background-position: center !important; background-size: cover !important; background-repeat: no-repeat !important; padding-bottom: 25%; }

.m-ventures-section { background: var(--color-teal-medium);}
.m-ventures-section h2{ color: var(--tm-m-ventures-title);}
.m-ventures-section p{ color: var(--color-white);}
.arrow-btn.arrow-small::after { width: 20px; height: 20px; }
.m-ventures-section .item-row:nth-child(odd) .row{ flex-direction: row-reverse;}
.m-ventures-section .item-row:not(:last-child){ margin-bottom: var(--gap-50);}


/* M CAREERS PAGE START HERE */
.m-careers-section .image-wraper { padding-bottom: 58%; }
.m-careers-section h3{ font-family: var(--font-family-primary); font-weight: var(--fw-bold); line-height: 1.2; margin-bottom: 15px;}
.m-careers-section p{ color: var(--color-teal-dark);}
.opportunities-bar{ padding: 25px 35px; background: #F5F5F5; border-left: 17px solid var(--brand-primary); color: var(--color-black) ;}
.opportunities-bar .arrow-btn{ font-weight: var(--fw-bold); text-transform: uppercase;}

/* M CORE SERVICE PAGE START HERE */
.core-service-content-section{ background: var(--brand-secondary);}
.core-service-content-section p{ color: var(--color-white);}
.m-core-service-section .row{ row-gap: 25px;}
.common-card .common-card-image{ padding-bottom: 63%; margin-bottom: 25px; overflow: hidden;}
.common-card .common-card-image img{ transition: var(--common-transition);}
.common-card h3{ line-height: 1.2;}
.common-card:hover .common-card-image img{ transform: scale(1.1);}

/* M PROJECT PAGE START HERE */
.m-project-zigzag-section .section-title{ margin-bottom: var(--gap-50); max-width: 550px;}
.m-project-zigzag-section .section-title h2{ font-family: var(--font-family-primary); line-height: 1.2; font-weight: var(--fw-bold); margin-bottom: 10px;}
.m-project-zigzag-section .section-title p{ font-size: var(--f-size-M);}
.home-zigzag-section.m-project-zigzag-section .zigzag-row:nth-child(odd) { flex-direction: row-reverse; }
.home-zigzag-section.m-project-zigzag-section .zigzag-row:nth-child(even) { flex-direction: row; }
.home-zigzag-section.m-project-zigzag-section .zigzag-row:not(:last-child){ padding-bottom: 55px;  border-bottom: 1px solid #807F83;}
.border-full{ position: relative;}
.border-full::before,.border-full::after{ content: ""; position: absolute; z-index: 1; width: 350%; background: #919191; height: 1px; bottom: -1px;}
.border-full::before{ left: -350%;}
.border-full::after{ right: -350%;}
.home-zigzag-section.m-project-zigzag-section .zigzag-row:last-child::before, .home-zigzag-section.m-project-zigzag-section .zigzag-row:last-child::after{ display: none;}

/* M COMMUNITY PAGE START HERE */
.m-community-content-section .section-title { padding-right: 10%; }
.m-community-content-section h2{ line-height: 1.2; font-weight: var(--fw-bold); margin-bottom: 0;}
.indigenous-partnership-content li:not(:last-child){ margin-bottom: 20px;}
.indigenous-partnership-content ul, .indigenous-partnership-content ol{ padding-left: 18px; margin: 0;}
.indigenous-partnership-section.community-partnership-section{ background: #FAFAFA;}
.indigenous-partnership-section.community-partnership-section h2{ color: var(--color-teal-dark);}
.indigenous-partnership-section.community-partnership-section p, .indigenous-partnership-section.community-partnership-section li{ color: var(--color-black);}

.timeline-table table { border-collapse: separate; border-spacing: 25px; /* horizontal + vertical gap */ }
.timeline-table th, .timeline-table td { border: 0; }
.timeline-table th{ font-weight: var(--fw-bold); color: var(--color-black); padding: 0;}
.timeline-table td{ padding: 20px 35px; background: #F5F5F5; color: var(--color-black); font-weight: var(--fw-bold); text-align: center;}
.timeline-table tr td:first-child{ border-left: 13px solid var(--color-teal-dark);}

.m-partnership-aplication-section{ background: var(--color-teal-light);}
.m-application-guidelines-section .image-wraper { padding-bottom: 95%; }
.m-partnership-aplication-section .form-outer{ max-width: 865px;}
.m-partnership-aplication-section .section-title{ margin-bottom: var(--gap-50);}
.m-partnership-aplication-section .section-title h2{ color: var(--color-white);}
.form-group label{ display: block; margin-bottom: 10px;}
.m-partnership-aplication-form label{ color: var(--color-white);}
.m-partnership-aplication-form input[type="file"]{ color: var(--color-white);}
.m-partnership-aplication-form input[type="file"]::file-selector-button { background-color: #D9D9D9; color: #807F83; border: none; padding: 6px 25px; cursor: pointer; border-radius: 0; font-family: var(--font-family-primary); font-weight: var(--fw-light); }

/* M FLEET PAGE START HERE */
.gallery-showcase-section { overflow: hidden; }
.gallery-showcase-section .slider-holder { width: 85%; max-width: 1150px; }
.gallery-showcase-section .swiper{ overflow: visible; padding-bottom: 50px !important; }


.gallery-showcase-section .image-box { position: relative; padding-bottom: 55%; }
.gallery-showcase-section .image-box img { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.fleet-slider .swiper-pagination { bottom: 0 !important; }
.swiper-pagination-bullet { width: 20px; height: 20px; background: #D9D9D9; opacity: 1; margin: 0 6px !important; transition: var(--common-transition); }
.swiper-pagination-bullet-active { background: #A3A3A3; }
.gallery-showcase-section .section-title{ margin-bottom: var(--gap-50);}
.download-section h5{ color: var(--color-black);}

/* M DRY HIRE PAGE START HERE */
.available-hire-section { background: #F5F5F5;}
.available-hire-section h2{ color: var(--color-black);}

.equipment-filter-bar-outer{ margin-bottom: var(--gap-50); }
.equipment-filter-bar { display: flex; gap: 20px; overflow-x: auto; padding: 0 10px 15px; justify-content: flex-start; }
.equipment-filter-bar>*{ width: calc(11.11% - 20px*8/9); padding: 0;}
.equipment-filter-bar .catalog-filter-item{ min-width: 120px; flex: 0 0 auto;}
.equipment-filter-bar .filter-icon { width: 110px; height: 110px; background: #fff; position: relative; margin: 0 auto 20px;}
.equipment-filter-bar .filter-icon img { width: 100%; height: 100%; object-fit: cover; transition: var(--common-transition);}

.equipment-filter-bar .catalog-filter-item p{ font-weight: var(--fw-bold); color: var(--color-black); text-transform: uppercase;}
.equipment-filter-bar .catalog-filter-item:hover .filter-icon img:last-child{ transform: scale(1.1);}

.equipment-card { background: #F5F5F5; }
.equipment-card .equipment-image{ padding-bottom: 62%;}
.equipment-card .equipment-image img{ transition: var(--common-transition);}
.equipment-card .equipment-title{ background: var(--tm-inner-ban-heading); padding: 22px 18px;}
.equipment-card .equipment-title h4{ color: var(--color-white); margin: 0;}
.equipment-card .bottom-dis { padding: 20px; }
.equipment-card .equipment-specs{ margin-bottom: 15px;}
.equipment-card .equipment-specs-row { display: flex; margin-bottom: 5px; }
.equipment-card .equipment-specs-row  span{ display: block;}
.equipment-card .equipment-specs-row  span:first-child{ width: 70%;}
.equipment-card .arrow-btn{ text-transform: uppercase; color: var(--tm-equipment-link-color);}
.equipment-card .arrow-btn::after{ width: 25px; height: 20px; background-image: var(--arrow-icon-2);}
.equipment-grid .row{ row-gap: 25px;}


