//
// Your Custom Styles //
//
.hoverbox-8 {
	.content {
		background: transparent;
		}
	}

.hvrbox_background {
    width: 400px;
    height: 250px;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
1
2
3
4
5
6
7
.hvrbox_background {
    width: 400px;
    height: 250px;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
	/* Font Classes */
.headline, .logo-1archt-xl {
	font-family: 'Orbitron', sans-serif;font-size: 26px;
}
.headline, .logo-1archt-lg {
	font-family: 'Orbitron', sans-serif;font-size: 22px;
}
.logo-romans-lg {
	font-family: 'Uncial Antiqua', cursive;
	font-size: 22px;
}
.logo, .logo-1archt {	
	font-family: 'Orbitron', sans-serif;font-size: 18px;
}
.logo-1archt-sm {	
	font-family: 'Orbitron', sans-serif;font-size: 14px;
}
.architects-daughter {	
	font-family: 'Architects Daughter', cursive;
}
	/* Font ID's */
#logo-gr
{
	background: -webkit-linear-gradient(white, teal);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
    font-family: 'Orbitron';
}
#logo-bw
{
	background: -webkit-linear-gradient(white, black);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
    font-family: 'Orbitron';
}
#logo-wh
{
  color: white;
  font-family: 'Orbitron';  
}
#logo-colored
{
  color: darkorange;
  font-family: 'Orbitron'; 
}
#logofont-colored18px
{
  color: darkorange;
  font-family: 'Orbitron', sans-serif;font-size: 18px; 
}
#romans-colored
{
	background: -webkit-linear-gradient(orange, red);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	font-family:  'Uncial Antiqua';
}
#kreativfont-colored18px
{
	color: darkorange;
	font-family: 'Orbitron', sans-serif;
	font-size: 20px; 
}

	/* Text after H# Logo */
h3:after
{
    content:'   AI CHATBOT';
	font-family: 'Orbitron', sans-serif;
	font-size: 10px;
}	
h6:before
{
    content:'...';
	font-family: 'Orbitron', sans-serif;
	font-size: 20px;
}

	/* Transitions new_image */
.image {
    opacity: 1;
    transition: opacity 1s ease, transform 1s ease; /* Added transform for smoother transition */
    }


	/* Close icon */
.fm-close {
	position: absolute;
	top: 50px;
	right: 50px;
	width: 30px;
	height: 30px;
	span {
		display: block;
		width: 30px;
		height: 30px;
		&:before, &:after;
			content: '';
			position: absolute;
			top: 50%;
			left: 0;
			background: $color-white;
			width: 30px;
			height: 2px; 
		}
		&:before {
			@include transform(translateY(-50%) rotate(45deg));
		}
		&:after {
			@include transform(translateY(-50%) rotate(-45deg));
		}
	}

	/* 09270282389 */