Fahad is a talented web developer with a fantastic dimension of creativity and proactivity. He made the whole process very easy for me with excellent communication. I enjoyed the process and timely delivery. Thank you so much.
My goodness! Fahad!!! You're a magician. Oh my gosshh! I can't thank you more, Also thanks to Max for referring you! I'm super happy!
Subscribe To My YouTube Channel For More Upcoming Videos
***Solid Button Hover Class*** btn-style-one btn-style-skew ***Gradient Button Hover Class*** btn-style-one btn-style-two btn-style-skew
sub-title
/* sub-title After Border */
.sub-title .elementor-heading-title:before {
position: absolute;
left: 100%;
top: 50%;
margin-top: -4px;
height: 2px;
width: 26px;
margin-left: 10px;
background: var(--gradient-1);
content: "";
}
.sub-title .elementor-heading-title:after {
position: absolute;
left: 100%;
top: 50%;
margin-top: -6px;
height: 6px;
width: 6px;
margin-left: 36px;
background: var(--gradient-1);
content: "";
border-radius: 50%;
}
/*Service Section */
.inner-box .icon, .inner-box .image img, .inner-box .text, .inner-box .title .elementor-heading-title {
-webkit-transition: all 300ms ease;
transition: all 300ms ease;
}
.inner-box:hover .icon{
-webkit-transform: rotate(180deg) scale(-1);
transform: rotate(180deg) scale(-1) !important;
}
.inner-box:after {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
background-color: var(--bg-theme-color2);
-webkit-transform: scale(0);
transform: scale(0);
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
border-radius: 500px 0 0;
content: "";
-webkit-transition: all 300ms linear;
transition: all 300ms linear;
}
.inner-box:hover::after {
-webkit-transform: scale(1.5);
transform: scale(1.5);
}
.service-block-two.inner-box::after {
-webkit-transform-origin: left bottom!important;
transform-origin: left bottom!important;
border-radius: 0 500px 0 0!important;
}
.service-block-three.inner-box:after {
-webkit-transform-origin: right top;
transform-origin: right top;
border-radius: 0 0 0 500px;
}
.service-block-four.inner-box:after {
-webkit-transform-origin: left top;
transform-origin: left top;
border-radius: 0 0 500px 0;
}
.inner-box:hover .text, .inner-box:hover .title .elementor-heading-title{
color: #ffffff !important;
}
.inner-box:hover .image img {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
@media only screen and (max-width: 1024px){
.inner-box .service-block-image{
position: relative;
}
.elementor-absolute.icon{
position: relative !important;
}
}
***Service 1 Inner 2 Class*** service-block-one inner-box ***Service 2 Inner 2 Class*** service-block-two inner-box ***Service 3 Inner 2 Class*** service-block-three inner-box ***Service 4 Inner 2 Class*** service-block-four inner-box ***Service Inner 3 Class*** service-block-image ***Service Inner 3 Image Class*** image ***Service Icon Class*** icon ***Service H3 Class*** title ***Service Text Class*** text
/*Portfolio Section*/
.project-block .image-box .elementor-widget-container:after{
position: absolute;
left: 0;
bottom: 0;
height: 0;
width: 100%;
opacity: 0;
content: "";
background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), to #7243f2);
background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #7243f2 100%);
pointer-events: none;
z-index: 2;
-webkit-transition: all 500ms ease;
transition: all 500ms ease;
}
.project-block .image-box:hover .elementor-widget-container:after {
height: 100%;
opacity: 1;
}
.project-block .image-box::after {
position: absolute;
left: 0;
bottom: 0;
height: 0%;
width: 100%;
content: "";
background-color: #ffffff;
pointer-events: none;
z-index: 2;
-webkit-transition: all 500ms ease;
transition: all 500ms ease;
}
.project-block:hover .image-box:after {
height: 20px;
opacity: 1;
}
.project-block .image-box img, .project-block .content-box{
transition: all 0.4s ease !important;
}
.project-block:hover .image-box img{
-webkit-transform: scale(1.1);
transform: scale(1.1) !important;
-webkit-filter: grayscale(1);
filter: grayscale(1) !important;
}
.project-block:hover .content-box{
bottom: 0;
}
***Single Block Class*** project-block ***Single Block > ImageBox Class*** image-box ***Single Block > Contentbox Class*** content-box
/*FAQ Section*/
.upper-box::after {
position: absolute;
right: 0;
top: 100%;
margin-top: -280px;
height: 510px;
width: 510px;
background-color: #f5f5f9;
content: "";
z-index: -1;
border-radius: 0 0 0 500px;
}
.bg-inner-column:before {
position: absolute;
top: 0;
height: 100%;
left: -1000px;
right: 0;
width: auto!important;
background: linear-gradient(to left, #ae8fff, #7243f2);;
content: "";
}
.bg-inner-column .sub-title .elementor-heading-title:before {
background: #fff;
}
.bg-inner-column .sub-title .elementor-heading-title:after {
background: #fff;
}
upper-box
/*About Agency Section*/
.overlay-anim:after {
background: rgba(255, 255, 255, 0.3);
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 0;
opacity: 1;
z-index: 9;
pointer-events: none;
}
.overlay-anim:hover:after {
height: 100%;
opacity: 0;
-webkit-transition: all 400ms linear;
transition: all 400ms linear;
}
.founder-info img{
padding: 3px;
}
/*Breadcrumb Link CSS*/
.page-breadcrumb a .elementor-icon-list-text{
color: var(--theme-color2) !important;
}
.page-breadcrumb a:hover .elementor-icon-list-text{
color: var(--theme-color3) !important;
}
/*Breadcrumb Link CSS*/
.page-breadcrumb a .elementor-icon-list-text{
color: var(--theme-color2) !important;
}
.page-breadcrumb a:hover .elementor-icon-list-text{
color: var(--theme-color3) !important;
}
page-breadcrumb
/*Additional Service*/
.service-block .service-box:after {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
background-color: #ffffff;
content: "";
z-index: 0;
-webkit-transition: all 300ms linear;
transition: all 300ms linear;
}
.service-block .service-box .round, .service-block .service-box img, .service-block .service-box .elementor-heading-title{
transition: all 300ms linear;
}
.service-block .service-box:hover:after{
height: 0;
}
.service-block .service-box:hover .round{
opacity: 0.1!important;
}
.service-block .service-box:hover img{
filter: brightness(0) invert(1);;
}
.service-block .service-box:hover .elementor-heading-title{
color: #fff;
}
***Parent Container*** service-block ***Single Block*** service-box ***Spacer widget*** round
animationFramesOne contactSwimmer rotateme
animationFramesOne contactSwimmer rotateme
animationFramesOne contactSwimmer rotateme