/* Please ❤ this if you like it! */


/*@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap');*/

*,
*::before,
*::after {
	box-sizing: border-box;
}
::selection {
	color: white;
	background-color: var(--blue);
}
::-moz-selection {
	color: var(--yellow);
	background-color: var(--blue);
}


/* #Cursor
================================================== */
.cursor,
.cursor2,
.cursor3{
	position: fixed;
	border-radius: 50%;
	transform: translateX(-50%) translateY(-50%);
	pointer-events: none;
	left: -100px;
	top: 50%;
	z-index: 4;
	opacity: 0;
}
.cursor{
	background-color: var(--blue);
	height: 0;
	width: 0;
}
.cursor2,.cursor3{
	height: 50px;
	width: 50px;
	transition: all 200ms ease-out;
	background-position: center;
	background-size: 0 0;
}
.cursor2.hover,
.cursor3.hover{
	height: 220px;
	width: 320px;
	border:none;
	border-radius: 8px;
	opacity: 1;
}
.cursor2{
	border: 2px solid var(--blue);
	box-shadow: 0 0 12px rgba(16, 39, 112, 0.2);
}
.cursor2.hover{
	background-size: cover;
	box-shadow: 0 0 0 rgba(16, 39, 112, 0.2);
}
body.img-1-wrap .cursor2,.cursor3{
	background-image: url('../images/long-arrow-left.svg');
	background-size: 80%;
	background-repeat: no-repeat;
}
body.img-2-wrap .cursor2,.cursor3{
	background-image: url('../images/long-arrow-left.svg');
	background-size: 80%;
	background-repeat: no-repeat;
}
body.img-3-wrap .cursor2,.cursor3{
	background-repeat: no-repeat;
	background-image: url('../images/long-arrow-right.svg');
	background-size: 80%;
}
body.img-4-wrap .cursor2,.cursor3{
	background-repeat: no-repeat;
	background-image: url('../images/long-arrow-right.svg');
	background-size: 80%;
}
body.img-5-wrap .cursor2{
	width: 170px;
    height: 170px;
    border-radius: 50%;
    background: rgb(0,174,239);
    background: linear-gradient(133deg, rgba(0,174,239,1) 20%, rgba(0,168,134,1) 79%);
}
body.img-6-wrap .cursor2{}
body.img-7-wrap .cursor2{}
body.img-8-wrap .cursor2{}
body.img-9-wrap .cursor2{}
body.img-10-wrap .cursor2{}
body.img-11-wrap .cursor2{}
body.img-12-wrap .cursor2{}
body.img-13-wrap .cursor2{
    /*width: 170px;
    height: 170px;
    border-radius: 50%;
    background: rgb(0,174,239);
    background: linear-gradient(133deg, rgba(0,174,239,1) 20%, rgba(0,168,134,1) 79%);*/
}

body.img-5-wrap .cursor2::after{
	content: "VIEW PROFILE";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 25px;
	text-align: center;
	line-height: 1;
	font-family: 'DIN Next LT Arabic' !important;
	font-family: bold;
	color: var(--white);
}
body.img-14-wrap .cursor2{
	width: 170px;
    height: 170px;
    border-radius: 50%;
    background: rgb(0,174,239);
    background: linear-gradient(133deg, rgba(0,174,239,1) 20%, rgba(0,168,134,1) 79%);
}
body.img-14-wrap .cursor2::after{
	content: "VIEW PROFILE";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 25px;
	text-align: center;
	line-height: 1;
	font-family: 'DIN Next LT Arabic' !important;
	font-family: bold;
	color: var(--white);
}


body.img-6-wrap .cursor2::after{}
body.img-7-wrap .cursor2::after{}
body.img-8-wrap .cursor2::after{}
body.img-9-wrap .cursor2::after{}
body.img-10-wrap .cursor2::after{}
body.img-11-wrap .cursor2::after{}
body.img-12-wrap .cursor2::after{}
body.img-13-wrap .cursor2::after{

}
body.logo-wrap .cursor2,.cursor3{
	background-image: none;
	height: 36px;
	width: 36px;
}
body.logo-wrap .cursor2.hover,
body.logo-wrap .cursor3.hover{
	height: 36px;
	width: 36px;
	transform: scale(2) translateX(-25%) translateY(-25%);
	border-radius: 50%;
	background-color: var(--yellow);
}


.hover-target{
	position: relative;
	display: inline-block;
	text-decoration: none;
	transition: color 250ms ease;
}
.hover-target:before{
	position: absolute;
	content: '';
	height: 0;
	border-radius: 1px;
	bottom: 0;
	left: -10px;
	width: calc(100% + 20px);
	border-radius: 2px;
	display: block;
	background-color: var(--white);
	transition: height 250ms ease;
	mix-blend-mode: difference;
	opacity: 0.6;
	display: none;
}
.hover-target:hover:before{
	height: 100%;
}
.hover-target:hover{
	z-index: 5;
	color: var(--yellow);
}