/*
Theme Name: Ruby Digital
Theme URI: https://www.rubydigital.co.za
Template: hello-elementor
Author: RubyWeb
Author URI: https://www.rubyweb.io
Description: Hello Elementor is a lightweight and minimalist WordPress theme that was built specifically to work seamlessly with the Elementor site builder plugin. The theme is free, open-source, and designed for users who want a flexible, easy-to-use, and customizable website. The theme, which is optimized for performance, provides a solid foundation for users to build their own unique designs using the Elementor drag-and-drop site builder. Its simplicity and flexibility make it a great choice for both beginners and experienced Web Creators.
Tags: accessibility-ready,flexible-header,custom-colors,custom-menu,custom-logo,featured-images,rtl-language-support,threaded-comments,translation-ready
Version: 3.4.4.1753081327
Updated: 2025-07-21 07:02:07

*/

/*--- Global Header ---*/

.global-header.scrolled{
	background-color: #3D001480 !important;
}

.folded-box {
	position: relative;
	filter: drop-shadow(5px 5px 15px #00000029);
	transition: background 0.3s ease, color 0.3s ease;
}

.folded-box-inner {
	flex: 1 !important;
	background-color: #ffffff;
	clip-path: polygon(0 0, calc(100% - 45px) 0, 100% 75px, 100% 100%, 0 100%);
}

.folded-corner {
	clip-path: polygon(0 0, calc(100% - 45px) 0, 100% 75px, 100% 100%, 0 100%);
}

.folded-box h2 {
	color: #FB203C;
	margin: 0;
	transition: color 0.3s ease;
}

.folded-box p {
	color: #747373;
	transition: color 0.3s ease;
}

/* Hover Effects */
.folded-box:hover {
	filter: unset;
}

.folded-box:hover .folded-box-inner {
	background: #ff1f41 !important;
}

.folded-box:hover h4 {
	color: #ffffff !important;
}

.folded-box:hover p {
	color: #fff;
}

.alphabet-cards .hover-img img{
	opacity: 0;
	margin-top: -10px;
	transition: 0.5s ease-in-out;
}

.alphabet-cards:hover .hover-img img{
	opacity: 1;
	margin-top: 0;
}

.alphabet-cards .alpha-box-text p{
	opacity: 0;
	margin-top: 10px;
	transition: 0.5s ease-in-out;
}

.alphabet-cards:hover .alpha-box-text p{
	opacity: 1;
	margin-top: 0;
}

.alphabet-cards{
	clip-path: polygon(0 0, 100% 0, 100% 85%, 90% 100%, 0 100%);
	position: relative;
}

.alphabet-cards::after {
	content: "";
	position: absolute;
	inset: 0;
	clip-path: inherit;
	width: 100px;
	pointer-events: none;
	background-color: #FF1F41;
	height: 2px;
	transform: rotate(120deg);
	top: auto;
	bottom: 0;
	left: auto;
	right: -27px;
}

.brand-slider .swiper-wrapper{
	transition-timing-function: linear !important; 
}

.hover-polygon-boxes{
	clip-path: polygon(0 0, calc(100% - 45px) 0, 100% 60px, 100% 100%, 0% 100%);
	position: relative;
	border: 1px solid #0000002b;
}

.hover-polygon-boxes:hover p{
	color: #ffffff !important;
}

.hover-polygon-boxes:hover h4{
	color: #ffffff !important;
}

.shape-cards{
	clip-path: polygon(0 0, calc(100% - 45px) 0, 100% 60px, 100% 100%, 0% 100%);
	border: 1px solid #0000002b;
}

/*---- Individual Loop ---*/

.individual-card {
	transition: 0.5s ease-in-out;
}

.individual-card .hidden-text{
	height: 0;
	overflow: hidden;
	transition: 0.5s ease-in-out;
}

.individual-card .hidden-button{
	height: 0;
	overflow: hidden;
}

.individual-card:hover .hidden-text{
	height: 100%;
	overflow: hidden;
}

.individual-card:hover .hidden-button{
	height: auto;
	overflow: hidden;
}

.individual-card:hover h4{
	color: #ffffff !important;
}

.individual-card:hover .hide-icon{
	display: none;

}

.individual-card:hover{
	clip-path: polygon(0 0, 87% 0%, 100% 15%, 100% 100%, 0 100%);
}

/*---- Services Loop ---*/

.services-card {
	transition: 0.5s ease-in-out;
}

.services-card.two {
	filter: drop-shadow(5px 5px 15px #00000029);
	transition: background 0.3s ease, color 0.3s ease;
	background-color: unset !important;
}

.services-card.two .services-card-inner {
	flex: 1 !important;
	background-color: #fff;
	clip-path: polygon(0 0, calc(100% - 45px) 0, 100% 75px, 100% 100%, 0 100%);
}

.services-card.two .services-card-inner:hover{
	background-color: #EE2D47;
}

.services-card .hidden-text{
	height: 0;
	overflow: hidden;
	transition: 0.5s ease-in-out;
}

.services-card .hidden-button{
	height: 0;
	overflow: hidden;
}

.services-card:hover .hidden-text{
	height: auto;
	overflow: hidden;
}

.services-card:hover .hidden-button{
	height: auto;
	overflow: hidden;
}

.services-card:hover h4{
	color: #ffffff !important;
}

.services-card:hover .hide-icon{
	display: none;
}

.services-card:hover{
	clip-path: polygon(0 0, 87% 0%, 100% 15%, 100% 100%, 0 100%);
	/* 	justify-content: flex-start; */
}


/*--- Blog Loop ---*/

.psacp-rdmr-btn:hover, .psacp-rdmr-btn:focus {
	background: transparent !important;
	color: #fff !important;
	border-color: inherit !important;
}

.psacp-post-margin-content:hover{
	border-color: #fff !important;
}

/*--- ---*/



/*---- Filter Css ---*/

.ruby-breadcrumb {
	font-size: 16px;
	font-family: Arial, sans-serif;
	color: #ee2d47;
}

.ruby-breadcrumb a {
	color: #ee2d47;
	text-decoration: none;
	transition: color 0.2s ease-in-out;
}

.ruby-breadcrumb a:hover {
	color: #ee2d47;
	text-decoration: underline;
}

.ruby-breadcrumb .ruby-separator {
	margin: 0 5px;
	color: #ee2d47;
}

.ruby-breadcrumb .ruby-current {
	color: #ee2d47;
}

/* case study filter */
.triple-filter-wrap {
	display: flex;
	width: 100%;
	gap: 50px;
}

.triple-filter-wrap > div {
	flex: 1;
}

.triple-filter-wrap label {
	display: block;
	margin-bottom: 6px;
	font: normal normal normal 20px Lexend;
	letter-spacing: 0px;
	color: #FFFFFF;
	opacity: 1;
}

/* Style the select */
.triple-filter-wrap select {
	width: 100%;
	padding: 20px;
	background-color: #fff; 
	color: #000;
	border: 1px solid #ccc;
	appearance: none;         
	-webkit-appearance: none;
	-moz-appearance: none; 
	background-image: none;  
}

.triple-filter-wrap input[type=text] {
	width: 100%;
	padding: 20px;
	background-color: #fff; 
	color: #000;
	border: 1px solid #ccc;
	appearance: none;         
	-webkit-appearance: none;
	-moz-appearance: none; 
	background-image: none;  
}


.triple-filter-wrap select:focus-visible {
	border: unset;
	outline: unset;
}

/* Change highlight background color when selecting an option */
.triple-filter-wrap select option:checked,
.triple-filter-wrap select option:hover {
	background-color: #8B0000 !important; /* dark red theme color */
	color: #fff; /* white text on dark red */
}



@media(max-width: 1366px){

	.triple-filter-wrap {
		gap: 35px !important;
	}
}


@media(max-width: 767px){

	.triple-filter-wrap {
		flex-direction: column;
	}

	.triple-filter-wrap {
		gap: 20px !important;
	}

	.hidebr br {display: none;}
}

.featured-casestudies .swiper-pagination {
	margin-top: 15px !important;
}

.featured-casestudies .swiper-pagination-bullet:not(.swiper-pagination-bullet-active) {
	background: transparent !important;
	border: 2px solid #fff !important;
}

.featured-casestudies .swiper-pagination-bullet:hover {
	background: #fff !important;
}

.e-n-accordion-item>.elementor-element ul {
	margin-top: 10px;
	margin-bottom: 10px;
}


/* Custom global styles */
.abstract-layer > .elementor-element:first-of-type h1,
div[data-elementor-post-type="service"] > .elementor-element:first-of-type h1,
div[data-elementor-post-type="industries"] > .elementor-element:first-of-type h1 {
	font-size: 3rem !important;
}

.abstract-layer > .elementor-element:first-of-type span.NormalTextRun,
div[data-elementor-post-type="service"] > .elementor-element:first-of-type span.NormalTextRun,
div[data-elementor-post-type="industries"] > .elementor-element:first-of-type span.NormalTextRun {
	font-size: 1.5625rem !important; /* ≈ 25px */
}

@media screen and (min-width: 1560px) {
	.abstract-layer > .elementor-element:first-of-type > .elementor-element:first-of-type,
	div[data-elementor-post-type="service"] > .elementor-element:first-of-type > .elementor-element:first-of-type,
	div[data-elementor-post-type="industries"] > .elementor-element:first-of-type > .elementor-element:first-of-type,
	#section-cta::before {
		background-position: 80% !important;
	}
}


.contact-bg-7 input[type=text],
.contact-bg-7 input[type=email],
.contact-bg-7 input[type=tel],
.contact-bg-7 textarea{
	background-color: rgba(255, 255, 255, 0.8) !important;
	border: none !important;
	padding: 30px !important;
	border-radius: 5px !important;
}

.contact-bg-7 .gform_button, .gfield-choice-toggle-all button {
	background-color: #FF2041 !important;
	padding: 10px 55px !important;
	border-radius: 5px !important;
}

.contact-bg-7 .gform_button:focus {
	outline: none !important;
	box-shadow: none !important;
	border: none !important;
}

.contact-bg-7 .gform-theme--foundation .gform_fields {
	row-gap: 15px !important;
}

.contact-bg-7 .gform_validation_errors {
	border: 1px solid #fff !important;
}

.contact-bg-7 .gform-icon--circle-error,
.contact-bg-7 .gform-icon--circle-error:before,
.contact-bg-7 .gform_validation_errors .gform_submission_error,
.contact-bg-7 .gform_validation_errors ol li,
.contact-bg-7 .gform_validation_errors ol li a.gform_validation_error_link,
.contact-bg-7 .gfield_validation_message {
	color: #fff !important;
}

.contact-bg-7 select,
.contact-bg-7 .gfield_select {
	color: #000 !important;                  /* normal text */
	-webkit-text-fill-color: #000 !important; /* Safari/iOS fix */
	background-color: rgba(255,255,255,0.8) !important;
	text-shadow: none !important;
	opacity: 1 !important;
	border: 0px !important;
	border-radius: 5px !important;
	height: 60px;
	padding: 10px 30px;
}
.contact-bg-7 select option[value=""],
.contact-bg-7 select option.gf_placeholder {
	color: #777 !important;   /* grey until user picks */
}

.services-card-inner.e-flex.e-con.e-child {
    min-height: 400px;
}

.services-card-inner.e-flex.e-con.e-child:hover {
    cursor: default !important
}