/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Jan 13 2026 | 16:00:46 */
html {margin: 0 !important;}
#wpadminbar{display: none;}


/**********************/
/* SVG logo Section */
/**********************/
.fikrah-logo-svg{
	transition: none !important;
	transform: scale(1);
	opacity: 1;
}


/**********************/
/* Home-About Section */
/**********************/

/* 1. the parent container */

.home-about-pin-section {
    min-height: 100vh;
	background-color: rgb(25, 16, 61);
	background-image: radial-gradient(circle at 75% 40%, rgba(243, 180, 202, 0.45), transparent 20%), radial-gradient(circle at 25% 65%, rgba(124, 28, 164, 0.5), transparent 20%), radial-gradient(circle at 20% 60%, rgba(252, 66, 132, 0.44), transparent 10%);
    position: relative; 
	transition: none !important;
	transform: translate(0,0);
}

/* 2. set the fixed container */
.home-about-pin-container {
    display: flex;
    transform: translate(0, 0);
    width: 100%;
    height: 100vh;
    z-index: 10;
    text-align: center;
    overflow: visible;
    flex-direction: column;
    justify-content: center;
}

/* 3. Set the Hero section */
.home-about-pin-container{
	opacity: 0;
}
.home-about-content {
	position: relative;
    color: white;
    opacity: 1;
	width: 100%;
	height: 40vh;
	margin: 0;
	z-index: 20;
}
h1.agency-title {
    color: #fff;
    font-family: 'Instrument Sans';
	text-align: center;
    font-size: calc(3vw + 1rem);
    font-weight: 400;
    line-height: 4.5vw;
    letter-spacing: 0;
}
/* 4. the words around Fikrah dot */
.fikrah-dot-left,
.fikrah-dot-right{
	color: #fff;
    font-family: 'Instrument Sans';
    font-size: calc(3vw + 1rem);
	font-weight: 400;
    line-height: 4.5vw;
    letter-spacing: 0;
	display: inline-block;
	margin-left: 30px;
    opacity: 1;
	transform: translate(0, 0);
}

/* 5. Fikrah dot */
.fikrah-dot {
    display: inline-block;
	position: absolute;
    width: 20px;
    height: 20px;
	top: 2vw;
	transform: scale(1);
    background-color: #f83e7d;
	background-image: radial-gradient(circle at 25% 40%, rgba(243, 180, 202, 0), transparent 20%), radial-gradient(circle at 75% 65%, rgba(124, 28, 164, 0), transparent 20%), radial-gradient(circle at 80% 60%, rgba(252, 66, 132, 0), transparent 10%);
	box-shadow: 0px 0px 0px 0px #f83e7d;
    border-radius: 50%;
    margin: 0 5px;
	z-index: 15;
}
.slogan-text {
    color: #fff;
    font-family: 'Instrument Sans';
    font-size: calc(0.8vw + 1rem);
    max-width: 500px;
    line-height: 2.5vw;
    margin: 0 auto;
	transform: translate(0, 0);
	opacity: 1;
}
.cta-btn{
	position: relative;
	padding: 10px 20px;
    border-radius: 10px;
    background: #ffffff40;
    color: #fff;
	font-family: 'Instrument Sans';
    font-size: calc(0.3vw + 1rem);
	line-height: 2.5vw;
	transform: translate(0, 0);
	opacity: 1;
	transition: box-shadow 0.6s ease-in-out;
}
a.cta-btn:hover {
    box-shadow: inset 500px 0 0 #fff;
}

.home-about-right {
	position: relative;
	transition: none !important;
	transform: translate(0, 0);
	opacity: 0;
}

/**********************/
/* Home-Vision Section */
/**********************/
.home-vision-section,
.slide-right-to-left,
.slide-left-to-right{
    transition: none !important;
}
.shadow-left-to-write{
	text-shadow: -20px 40px 10px rgba(255, 255, 255, 0.3333333) !important;
}

.home-vision-content{
	transition: none !important;
	position: relative;
	transform: translate(100vw, 0);
}
.home-vision-card{
	border: 1px solid #ffffff80;
	width: calc((3vw + 1rem) * 12);
}
.border-display-top-left {
    border: 5px solid #ff007f;
    padding: 20px;
    clip-path: inset(100% 100% 100% 100%); /* hide the border in the bigenning */
    box-sizing: border-box;
}

.ideas-galery-section{
	transition: none !important;
/*	opacity: 0;*/
	transform: translate(0,0);
}
.ideas-galery-right-col{
	/*background: #ffffff50;*/
	opacity: 0;
	transition: none !important;
	transform: translate(0,0);
	
}
/**************************/
/*  Home-Services Section */
/**************************/
.home-services-section{
	transition: none !important;
}
/*
.home-services-section .pixel-block-container{
	display: inline-block;
	position: absolute;
	width: 100vw;
	margin: 0;
	padding: 0;
	left:0;
	top:-10vw;
}
.home-services-section .pixel-block{
	display: inline-block;
	position: relative;
	width: 5vw;
	height: 5vw;
	margin: 0 -2px ;
	background: #fff;
	transform: translate(0, 0);
	box-shadow: 0 0 0;
	transition: none !important;
}
*/
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

.home-services-title h2,
.home-services-title span,
.home-services-section h1,
.home-services-section h2,
.home-services-section h3,
.home-services-section h4,{ 
    font-family: 'Press Start 2P', cursive !important;
}
.home-services-title {
    color: black; 
	transform: translate(0, 0);
	transition: none !important;
}

.home-services-title2 .split-word,
.home-services-title2 .split-char { 
    display: inline-block; /* essential for clip-path */
	opacity: 1;
    clip-path: inset(0% 0% 0% 0%); /* Hidden from right */
    /* Or inset(100% 0% 0% 0%) from bottom، Or inset(0% 0% 100% 0%) from top */
    transition: none !important; /* Remove any default transition */
}

/**********************/
/* Home Projects Section */
/**********************/
.home-projects-section{
    transition: none !important;
}
.home-projects-content{
	transition: none !important;
	position: relative;
	transform: translate(100vw, 0);
}
.home-projects-card{
	/*width: calc(32vw * 4);*/
}

.home-projects-website {
/*  for 3D effect
	margin: 0;
    padding: 0;
	transform: perspective(500px); rotateY(30deg);
*/
	-webkit-box-reflect: below 0px linear-gradient(transparent 55%, rgba(0, 0, 0, 0.4) 120%)
}
.home-projects-website  .home-projects-cover{
	overflow-y: scroll;
    width: 32vw;
    height: 20vw;
    border: 1vw solid #222;
    border-image-slice: 1;
    border-image-source: linear-gradient(to right, #222, #111, #444 90%);
    /* border-radius: 10px !important; */
    box-shadow: 0 0 1px #ccc;
}
.home-projects-website  .home-projects-cover:after{
	content: "";
	position: absolute;
	width: 50%;
	height: 50%;
}
.home-projects-website .home-projects-cover img{
	object-fit: cover;
	opacity: 1;
	transform: translate(0, 0) scaleY(1.0);
	transition: none !important;
}

.home-projects-website .home-projects-brand{
	width: 100%;
    margin: 0;
    padding: 0;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
	opacity:0.8;
	transition: opacity 0.3s ease-in-out;
}
.home-projects-website .home-projects-brand:hover{
	opacity:1;
}
.home-projects-website .home-projects-brand img{
	width: unset;
	height: 40px;
}