/**
 * GRPCMedia SVG Icon Styles
 * 
 * Global styling for SVG icons
 */

/* ============================================================================
   BASE SVG ICON STYLES
   ============================================================================ */

[class*="grpc-icon-"] {
	display: inline-block;
	vertical-align: middle;
	fill: currentColor;
	stroke: currentColor;
}

[class*="grpc-icon-"] svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* ============================================================================
   ICON SIZES
   ============================================================================ */

.grpc-icon--xs {
	width: 12px;
	height: 12px;
}

.grpc-icon--sm {
	width: 16px;
	height: 16px;
}

.grpc-icon--md {
	width: 24px;
	height: 24px;
}

.grpc-icon--lg {
	width: 32px;
	height: 32px;
}

.grpc-icon--xl {
	width: 48px;
	height: 48px;
}

/* ============================================================================
   ARROW ICONS
   ============================================================================ */

.grpc-icon-arrow-left,
.grpc-icon-arrow-right,
.grpc-icon-arrow-up,
.grpc-icon-arrow-down {
	width: 16px;
	height: 16px;
	transition: transform 0.3s ease;
}

.grpc-icon-arrow-left:hover {
	transform: translateX(-3px);
}

.grpc-icon-arrow-right:hover {
	transform: translateX(3px);
}

.grpc-icon-arrow-up:hover {
	transform: translateY(-3px);
}

.grpc-icon-arrow-down:hover {
	transform: translateY(3px);
}

/* ============================================================================
   MENU ICONS
   ============================================================================ */

.grpc-menu-arrow {
	width: 10px;
	height: 10px;
	margin-left: 6px;
	transition: transform 0.3s ease;
}

.menu-item-has-children:hover .grpc-menu-arrow {
	transform: rotate(180deg);
}

.grpc-mobile-menu-arrow {
	width: 12px;
	height: 12px;
	margin-left: auto;
}

.grpc-icon-menu {
	width: 24px;
	height: 24px;
}

.grpc-icon-close {
	width: 20px;
	height: 20px;
}

/* ============================================================================
   SLIDER ARROWS
   ============================================================================ */

.grpc-icon-slider-arrow-left,
.grpc-icon-slider-arrow-right {
	width: 40px;
	height: 40px;
	transition: all 0.3s ease;
}

.grpc-icon-slider-arrow-left:hover,
.grpc-icon-slider-arrow-right:hover {
	transform: scale(1.1);
}

/* ============================================================================
   SOCIAL ICONS
   ============================================================================ */

.grpc-icon-facebook,
.grpc-icon-twitter,
.grpc-icon-instagram,
.grpc-icon-linkedin,
.grpc-icon-youtube {
	width: 20px;
	height: 20px;
	transition: all 0.3s ease;
}

.grpc-icon-facebook:hover {
	color: #1877f2;
}

.grpc-icon-twitter:hover {
	color: #1da1f2;
}

.grpc-icon-instagram:hover {
	color: #e4405f;
}

.grpc-icon-linkedin:hover {
	color: #0077b5;
}

.grpc-icon-youtube:hover {
	color: #ff0000;
}

/* ============================================================================
   UI ICONS
   ============================================================================ */

.grpc-icon-search {
	width: 20px;
	height: 20px;
}

.grpc-icon-play {
	width: 48px;
	height: 48px;
}

.grpc-icon-spinner {
	width: 20px;
	height: 20px;
	animation: spin 1s linear infinite;
}

@keyframes spin {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

.grpc-icon-star {
	width: 18px;
	height: 18px;
	color: #ffc107;
}

.grpc-icon-check {
	width: 20px;
	height: 20px;
	color: #4caf50;
}

.grpc-icon-quote {
	width: 32px;
	height: 32px;
	opacity: 0.3;
}

/* ============================================================================
   CONTACT ICONS
   ============================================================================ */

.grpc-icon-phone,
.grpc-icon-email,
.grpc-icon-location {
	width: 20px;
	height: 20px;
}

/* ============================================================================
   READ MORE ICON
   ============================================================================ */

.grpc-read-more-icon {
	width: 14px;
	height: 14px;
	margin-left: 6px;
	transition: transform 0.3s ease;
}

.grpc-post-read-more:hover .grpc-read-more-icon {
	transform: translateX(4px);
}

/* ============================================================================
   RESPONSIVE
   ============================================================================ */

@media (max-width: 768px) {
	.grpc-icon-slider-arrow-left,
	.grpc-icon-slider-arrow-right {
		width: 32px;
		height: 32px;
	}
	
	.grpc-icon-play {
		width: 36px;
		height: 36px;
	}
}