/*
 Theme Name: DiviPerfect
 Theme URI: https://diviperfect.com
 Description: The Perfect Divi 5 Templates
 Author: DiviPerfect
 Template: Divi
 Version: 1.0.0
*/

/* ===== Custom CSS Starts Here ===== */

html,
body {
  overflow-x: clip;
}


/* ============================= */
/* VIDEO MODULE STYLING */
/* Makes the video fill its container like a background */
/* ============================= */
.et_pb_video{
  width: 100%; /* Video stretches full width of container */
  height: 100%; /* Video stretches full height of container */
  object-fit: cover; /* Keeps aspect ratio, crops edges if needed */
  pointer-events: none; /* Disables clicking / interaction on video */
  /* Change to 'contain' if you want the full video visible */
  /* Change to 'auto' if you want normal video interaction */
}

/* ============================= */
/* COLOURED WORD / TEXT HIGHLIGHT */
/* Apply this class to any word or text you want coloured */
/* ============================= */
.color-word {
	color: #FF3100; /* Change this hex code to update text colour */
}

/* ============================= */
/* CAROUSEL FLIP DIRECTION */
/* Flips the carousel horizontally to reverse movement */
/* ============================= */
.et_pb_group_carousel.flipped-rotate {
  transform: scaleX(-1) !important; /* Remove or set to 'none' to disable flip */
}

/* ============================= */
/* CAROUSEL MOVEMENT STYLE */
/* Makes the carousel scroll at a constant speed */
/* ============================= */
.et_pb_group_carousel_track {
  transition-timing-function: linear !important;
  /* Change to 'ease' or 'ease-in-out' for smoother start/stop */
}

/* ============================= */
/* CAROUSEL DOTS CONTAINER */
/* Styles the dot navigation bar inside pricing tables */
/* ============================= */
.pricing-table .et_pb_group_carousel_dots {
	background-color: #ff3100; /* Background colour behind dots */
	max-width: 100px; /* Max width of the dot container */
	width: auto; /* Allows container to size to content */
	border-radius: 100px; /* Creates pill-shaped container */
	padding: 2px !important; /* Space inside the container */
	margin: auto; /* Centers the dots horizontally */
	
	/* Increase max-width to make the dot bar longer */
	/* Set border-radius to 0 for square edges */
}

/* ============================= */
/* ACTIVE CAROUSEL DOT */
/* Styles the currently active slide indicator */
/* ============================= */
.pricing-table .et_pb_group_carousel_dot.et_pb_group_carousel_dot_active {
  width: 35px !important; /* Width of active dot */
	height: 35px !important; /* Height of active dot */
	margin: 0px; /* Removes extra spacing around active dot */
	
	/* Reduce width/height to make the active dot smaller */
}

/* ============================= */
/* DEFAULT DOT SPACING */
/* Controls space between all carousel dots */
/* ============================= */
.et_pb_group_carousel_dot {
	margin-right: 10px; /* Space to the right of each dot */
	margin-left: 10px; /* Space to the left of each dot */
	
	/* Increase values for wider spacing */
	/* Set to 0 to remove spacing */
}