@use "../utils" as *;

/*----------------------------------------*/
/*  2.0 Section Title  
/*----------------------------------------*/

.rs-section{
	&-title{
		color: var(--rs-title-primary);
		font-weight: var(--rs-fw-bold);
		font-family: var(--rs-ff-title);
		&.has-theme-blue{
			color: #0C3C61;
		}
		&.has-theme-light-blue{
			color: var(--rs-text-tertiary);
		}
		&.has-theme-green{
			color: var(--rs-theme-green);
		}
		&.elements-title{
			color: var( --rs-black) !important;
		}
	}
	&-subtitle{
		font-size: 16px;
		font-weight: 500;
		line-height: 25px;
		text-transform: uppercase;
		color: var( --rs-black);
		display: flex;
		align-items: center;
		gap: 8px;
		margin-bottom: 15px;
		justify-content: center;
		img{
			width: 30px;
			@media #{$sm,$xs}{
				width: 25px;
			}
			&.has-thumb{
				width: 24px;
			}
		}
		@media #{$sm,$xs}{
			font-size: 17px;
			line-height: 27px;
		}
		&.has-theme-orange{
			color: var(--rs-theme-orange);
		}
		&.has-theme-red{
			color: var(--rs-theme-red);
			svg{
				path{
					fill: var(--rs-theme-red);
				}
			}
		}
		&.has-theme-light-green{
			color: var(--rs-theme-light-green);
			svg{
				path{
					fill: var(--rs-theme-light-green);
				}
			}
		}
		&.has-theme-yellow{
			color: var(--rs-theme-yellow);
			svg{
				path{
					fill: var(--rs-theme-yellow);
				}
			}
		}
		&.has-bg-field{
			color: var(--rs-theme-red);
			background: rgba(238, 13, 8, 0.07);
			padding: 8px 14px 8px 14px;
			border-radius: 2px 2px 2px 2px;
			display: inline-flex;
			text-transform: capitalize;
			font-size: 18px;
			margin-bottom: 20px;
		}
		&.has-theme-blue{
			color: var(--rs-theme-blue);
		}
		&.has-theme-light-blue{
			color: var(--rs-theme-light-blue);
		}
		&.has-stroke{
			-webkit-text-stroke-color: rgba(234, 85, 1, 0.65);
			stroke: rgba(234, 85, 1, 0.65);
			letter-spacing: 4.6px;
			color: rgba(2, 1, 1, 0);
			-webkit-text-stroke-width: 1px;
			stroke-width: 1px;
		}
		&.has-theme-deep-blue{
			color: var(--rs-theme-deep-blue);
		}
		&.has-white{
			color: var(--rs-white);
			svg{
				path{
					fill: var(--rs-white);
				}
			}
		}
		&.has-theme-cyan{
			color: var(--rs-theme-cyan);
		}
		&.has-theme-medium-yellow{
			color: var(--rs-theme-medium-yellow);
		}
	}
}


// different border style
.rs-section-subtitle-wrapper{
	display: flex;
	position: relative;
	align-items: center;
	margin-bottom: 25px;
	.rs-section-subtitle{
		position: relative;
		padding-inline-end: 12px;
		flex: 0 0 auto;
		margin-bottom: 0;
	}
	.rs-section-border-line {
		position: relative;
		background: rgba(20, 35, 64, 0.2);
		width: 100%;
		height: 1px;
		left: 0%;
		top: 0%;
		right: 0%;
		bottom: auto;
	}
}
