/*
Theme Name: Ithemba Truck Bodies WordPress Child Theme
Description: Custom child theme for Ithemba Truck Bodies
Author: Bean Bag Solutions
Author URI: https://beanbagsolutions.co.za/
Version: 1.0.0
Template: Divi
*/

/* ---SCROLLBAR--- */
body::-webkit-scrollbar {
    width: 6px;
    background-color: #131313;
    outline: none;
}

body::-webkit-scrollbar-thumb {
    border-radius: 0px;
    background-color: #90BB34;
}

body::-webkit-scrollbar-track {
    background-color: #131313;
    border-radius: 0px;
}

/* ---FONTS--- */
@font-face {
	font-display: swap;
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 500;
	src: url('../ithemba-truck-bodies-child-theme/fonts/roboto-v32-latin-500.woff2') format('woff2'),
		 url('../ithemba-truck-bodies-child-theme/fonts/roboto-v32-latin-500.woff') format('woff');
}

@font-face {
	font-display: swap;
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 700;
	src: url('../ithemba-truck-bodies-child-theme/fonts/roboto-v32-latin-700.woff2') format('woff2'), 
		 url('../ithemba-truck-bodies-child-theme/fonts/roboto-v32-latin-700.woff') format('woff');
}

@font-face {
	font-display: swap;
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 900;
	src: url('../ithemba-truck-bodies-child-theme/fonts/roboto-v32-latin-900.woff2') format('woff2'),
		 url('../ithemba-truck-bodies-child-theme/fonts/roboto-v32-latin-900.woff') format('woff');
}
  
body {
	font-family: 'Roboto', sans-serif;
}
  
body h1 {
	font-size: clamp(2.5rem, calc(2.5rem + ((1vw - 0.2rem) * 1)), 3.5rem);
	font-weight: 900;
}

body h2,
body h3,
body h4 {
	font-weight: 700;
}

body h1,
body h2,
body h3 {
	line-height: 1;
}

body h2 {
	font-size: clamp(2rem, calc(2rem + ((1vw - 0.2rem) * 0.75)), 2.75rem);
}

body h3 {
	font-size: clamp(1.5rem, calc(1.5rem + ((1vw - 0.2rem) * 0.5)), 2rem);
}

body h4,
body .et_pb_blurb h4,
body .et_pb_text h4 {
	font-size: clamp(1.125rem, calc(1.125rem + ((1vw - 0.225rem) * 0.2564)), 1.375rem);
	line-height: 1.2;
}

body p,
body a, 
body li,
body .et_pb_button {
	font-size: clamp(1rem, calc(1rem + ((1vw - 0.2rem) * 0.125)), 1.125rem);
	font-weight: 500;
	line-height: 1.5;
}

/* ---DIVI STYLES--- */
body .et_pb_section.et_pb_section--with-menu {
	padding: 0;
}

body .et_pb_row.et_pb_row--with-menu {
	padding: 0.5rem 0;
}

body .et_pb_section {
	padding: 2.5rem 0;
}

body .et_pb_row {
	padding: 1.5rem 0;
	display: flex;
	justify-content: space-between;
	gap: 4rem;
}

body .et_pb_row::after {
	display: none;
}

body .et_pb_gutters3 .et_pb_column, 
body .et_pb_gutters3.et_pb_row .et_pb_column {
    margin: 0;
}

body .et_pb_gutters3 .et_pb_column .et_pb_module, 
body .et_pb_gutters3.et_pb_row .et_pb_column .et_pb_module {
    margin-bottom: 2rem;
}

body p {
    padding-bottom: 1rem;
}

body #page-container .et_pb_section a.et_pb_button {
	line-height: 1 !important;
	padding: 1em 2em !important;
}

body #page-container .et_pb_section a.et_pb_button:hover {
	padding: 1em 2em !important;
}

/* ---UTILITY STYLES--- */
.bbs-flex-wrap {
	flex-wrap: wrap;
}

.bbs-flex-align-center {
	align-items: center;
}

/* ---HOME PAGE STYLES - FEATURES SECTION--- */
.bbs-features-row.et_pb_row .et_pb_column {
	width: calc(50% - 2rem);
}

/* ---HOME PAGE STYLES - PRODUCT SECTION--- */
.bbs-products-row.et_pb_row .et_pb_column {
	width: calc((100% - 8rem) / 3);
}

/* ---HOME PAGE STYLES - TESTIMONIAL SECTION--- */
.et_pb_testimonial.swiper-slide {
	height: auto;
}

span.swiper-pagination-bullet-active {
    background: #cee49a;
}

span.swiper-pagination-bullet {
	background: #cee49a;
	opacity: 1;
}

/* ---PRODUCT PAGE STYLES --- */
.bbs-product-item .et_pb_text {
	transition: transform .3s ease-in;
}

.bbs-product-item:hover .et_pb_text {
    transform: translateY(0);
}

/* ---PRODUCT GALLERY STYLES--- */
.bbs-product-gallery-grid .et_pb_gallery_items {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
	gap: 0.5rem;
}

.et_pb_column .bbs-product-gallery-grid .et_pb_gallery_items .et_pb_grid_item {
	width: 100%;
    margin-right: 0;
    margin-bottom: 0;
}

.bbs-product-gallery-grid .et_pb_gallery_image,
.bbs-product-gallery-grid .et_pb_gallery_image a,
.bbs-product-gallery-grid .et_pb_gallery_image img {
	display: grid;
    height: 100%;
}

.bbs-product-gallery-grid .et_pb_grid_item:nth-child(1) {
	grid-column: 1 / span 2;
	grid-row: 1 / span 2;
}

.bbs-product-gallery-grid .et_pb_grid_item:nth-child(12) {
	grid-column: 3 / span 2;
	grid-row: 3 / span 2;
}

.bbs-product-gallery-grid .et_pb_grid_item:nth-child(24) {
	grid-column: 5 / span 2;
	grid-row: 5 / span 2;
}

.bbs-product-gallery-grid .et_pb_grid_item:nth-child(30) {
	grid-column: 3 / span 2;
	grid-row: 7 / span 2;
}

.bbs-product-gallery-grid .et_pb_grid_item:nth-child(37) {
	grid-column: 1 / span 2;
	grid-row: 9 / span 2;
}

/* ---FOOTER STYLES--- */
.bbs.copyright-info,
.bbs.credit-link p,
.bbs.credit-link a {
	font-size: clamp(0.75rem, calc(0.75rem + ((1vw - 0.225rem) * 0.1282)), 0.875rem);
}

/* ---MEDIA QUERIES--- */
@media (min-width: 981px) and (max-width: 1149px) {
	/* ---Divi Header Style Changes--- */
	.bbs.et_pb_menu .et_pb_menu_inner_container>.et_pb_menu__logo-wrap {
		width: 200px;
	}
}

@media screen and (max-width : 980px) {
	/* ---Divi Styles--- */
	body .et_pb_section {
		padding: 1.5rem 0;
	}

	body .et_pb_row {
		padding: 1rem 0;
		gap: 3rem;
	}

	body .et_pb_row_1-4_1-4>.et_pb_column.et_pb_column_1_4, 
	body .et_pb_row_1-4_1-4_1-2>.et_pb_column.et_pb_column_1_4, 
	body .et_pb_row_4col>.et_pb_column.et_pb_column_1_4 {
		width: calc(50% - 1.5rem);
		margin-right: 0;
	}

	/* ---Divi Header Style Changes--- */
	.et_pb_menu .mobile_nav.opened .mobile_menu_bar::before {
		content: '\4d';
	}

	ul.et_mobile_menu>li.menu-item-has-children {
		position: relative;
	}

	ul.et_mobile_menu li.menu-item-has-children .mobile-toggle {
		background-color: transparent;
		border: none;
		position: absolute;
		right: 0px;
		top: 0px;
		width: 2.5rem;
		height: 100%;
		padding: 0px;
		text-align: center;
		opacity: 1;
		z-index: 999;
	}

	.et_mobile_menu .menu-item-has-children>a {
		background-color: transparent;
	}

	ul.et_mobile_menu .menu-item-has-children .sub-menu {
		display: none !important;
		visibility: hidden !important;
	}

	ul.et_mobile_menu .menu-item-has-children .sub-menu.visible {
		display: block !important;
		visibility: visible !important;
	}

	ul.et_mobile_menu li.menu-item-has-children .mobile-toggle::after {
		content: '\35';
		color: #cee49a;
		font-family: "ETModules";
		font-size: 1.5rem;
		position: relative;
		top: 3px;
	}

	ul.et_mobile_menu li.menu-item-has-children.dt-open .mobile-toggle::after {
		content: '\33';
	}

	/* ---Home Page Styles - Features Section--- */
	.bbs-features-row.et_pb_row .et_pb_column {
		width: calc(50% - 1.5rem);
	}

	/* ---Home Page Styles - Product Section--- */
	.bbs-products-row.et_pb_row .et_pb_column {
		width: calc((100% - 6rem) / 3);
		margin: 0;
	}
}

@media screen and (max-width : 649px) {
	/* ---Divi Styles--- */
	body .et_pb_row {
		flex-direction: column;
		gap: 1rem;
	}

	body .et_pb_row_1-4_1-4>.et_pb_column.et_pb_column_1_4, 
	body .et_pb_row_1-4_1-4_1-2>.et_pb_column.et_pb_column_1_4, 
	body .et_pb_row_4col>.et_pb_column.et_pb_column_1_4 {
		width: 100%;
	}

	body #page-container .et_pb_section a.et_pb_button {
		width: 100%;
		text-align: center;
	}

	/* ---Home Page Styles - Hero Section--- */
	#bbs-home-pg-hero-section {
		flex-direction: column;
		height: auto;
	}

	#bbs-home-pg-hero-section .et_pb_module.et_pb_text {
		text-align: center;
		max-width: none;
	}

	#bbs-home-pg-hero-section .et_pb_button_module_wrapper {
		text-align: center;
	}

	#bbs-home-pg-hero-section .bbs-img-row {
		width: 80%;
		padding-top: 1rem !important;
		position: relative !important;
		inset: auto;
		transform: translateY(0);
	}

	/* ---Home Page Styles - Features & Products Section--- */
	.bbs-features-row.et_pb_row,
	.bbs-products-row.et_pb_row {
		flex-direction: row;
	}

	/* ---Home Page Styles - Features Section--- */
	.bbs-features-row.et_pb_row div.et_pb_column {
		width: calc(50% - 0.5rem);
	}

	/* ---Home Page Styles - Product Section--- */
	.bbs-products-row.et_pb_row .et_pb_column {
		width: calc((100% - 1rem) / 2);
	}
}

@media screen and (max-width : 479px) {
	/* ---Home Page Styles - Product Section--- */
	.bbs-products-row.et_pb_row .et_pb_column {
		width: calc((100% - 1rem) / 2) !important;
	}
}