Architecture & Interior Website Using Elementor

IMPORTANT LINKS

Hero Banner Heading CSS


selector{
    min-width: 1200px;
}

@media screen and (max-width: 1300px) and (min-width: 1025px){
    selector .elementor-heading-title{
        font-size: 100px !important;
    }
}

Button Object CSS


selector .elementor-button-content-wrapper:after{
    content: "";
    height: 1px;
    display: inline-block;
    background-color: #fff;
    position: absolute;
    top: 31px;
    margin-left: 40px;
    width: 32px;
    transition: width .6s ease;
}


selector:hover  .elementor-button-content-wrapper:after{
    width: 70px;
}

Gallery Item CSS


selector .box-1, 
selector .box-2{
    opacity: 0 !important;
    transition: all 0.5s ease-out;
}

selector:hover .box-1, 
selector:hover .box-2{
    opacity: 1 !important;
    
}

Gallery Content CSS


selector{
    transform: rotate(-90deg);
    width: 320px;
}

selector:hover .item-2 .elementor-heading-title{
    color: #000;
}

selector:hover .item-1 .elementor-icon-list-text,
selector:hover .item-1 .elementor-icon-list-icon i{
    color: #000;
}

Gallery View CSS


selector:hover .elementor-icon{
    transform: rotate(45deg);
    
}

selector:hover .elementor-icon svg{
    fill: #000 !important;
}

Gallery Item CSS Classes


box-1
box-2
item-1
item-2
icon

Video Button CSS


selector i{
    font-size: 45px;
}

selector:after{
    content: "";
    height: 1px;
    display: inline-block;
    background-color: #fff;
    position: absolute;
    top: 44px;
    margin-left: 280px;
    width: 32px;
    transition: width .6s ease;
}


selector:hover:after{
    width: 100px;
}


@media screen and (max-width: 1023px){
    selector:after{
        top: 75px;
    }
}

@media screen and (max-width: 767px){
    selector:after{
        top: 60px;
        margin-left: 145px;
    }
    selector:hover:after{
    width: 60px;
}
}

Testimonial Hover Effect CSS


selector:hover .box-1 .elementor-heading-title{
        -webkit-text-stroke-color: #fff;
    stroke: #fff;
}

selector:hover .box-1 p{
    color: #fff;
    
}


selector:hover .box-2 .elementor-heading-title,
selector:hover .box-3 .elementor-heading-title{
    color: #fff;
}

selector:hover .box-2 .elementor-divider-separator{
    border-top-color: #fff;
}

Testimonial Quotation Mark


(“ “)

Blog Grid Hover Effect CSS


selector:hover .blog-item{
    background-color: #000!important;
}


selector:hover .blog-item .elementor-icon-list-text, selector:hover .blog-item .elementor-heading-title{
    color: #fff !important;
}

Blog Grid Hover Effect CSS Class


blog-item

Contact Form CSS


selector .elementor-button:after{
    content: "";
    height: 1px;
    display: inline-block;
    background-color: #fff;
    position: absolute;
    top: 33px;
    margin-left: 40px;
    width: 32px;
    transition: width .6s ease;
}



selector .elementor-button:hover:after{
    width: 80px !important;
}


selector .elementor-field-textual:focus {
    box-shadow: inset 0 0 0 0px rgba(0,0,0,.1);
    outline: 0;
}

Body Overflow-X Hidden

IMPORTANT LINKS

Animation Pulse CSS

Animation Pulse CSS Class


animation-pulse

Animation Wobble CSS


.animation-wobble{
  position: relative;
  animation: animation-wobble 3s linear infinite alternate;
}

@keyframes animation-wobble {
  0%   {transform: translateY(10px);}
  50% {transform: translateY(-10px);}
  100% {transform: translateY(10px);}
}

Animation Wobble CSS Class


animation-wobble

Mouse Animation CSS


.mouse-animation{
    position: relative;
    animation: mouse-animation 3s linear infinite alternate;
}
@keyframes mouse-animation {
  0%   {transform: translateY(2px);}
  50% {transform: translateY(-2px);}
  100% {transform: translateY(2px);}
}

Mouse Animation CSS Class


mouse-animation

Circle Animation CSS


.circle-animation{
    animation: rotate 20s linear infinite;
}
@-webkit-keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

Circle Animation CSS Class


circle-animation

Background Glass Effect CSS


.bg-glass-effect{
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

Background Glass Effect CSS Class


bg-glass-effect

Button Gradient Border CSS


.elementor-button,.blog-post .jkit-meta-readmore a{
    position: relative;
}

.elementor-button::before,.blog-post .jkit-meta-readmore a::before {
content: "";
  position: absolute;
  inset: 0;
  border-radius: 50px; 
  padding: 1px; 
  background:linear-gradient(90deg,#20D9A1,#5F39FF); 
  -webkit-mask: 
     linear-gradient(#fff 0 0) content-box, 
     linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  
}

Service Icon Box CSS


.service-box .service-icon .elementor-widget-container{
        transition: all .3s;
    }
.service-box:hover .service-icon .elementor-widget-container{
        background-color: transparent;
        background-image: linear-gradient(180deg, #20d9a1 0%, #5f39ff 100%);
    }

Service Icon Box CSS Classes


service-box
service-icon

Team Member Hover Effect CSS


.image-wraper-item{
        transform: scale(0);
        transition: transform  0.5s;
    }
.image-wraper:hover .image-wraper-item{
        transform: scale(1);
    }

Team Member Hover Effect CSS Classes


image-wraper
image-wraper-item

Service List CSS


.service-list svg{
        position: relative;
        top: 10px;
    }
    .elementor-icon-box-title{
        transition: all 0.3s;
    }
    .service-list:hover .elementor-icon-box-title{
        color: #5F39FF !important;
    }
    .service-list:hover .elementor-icon{
        fill: #5F39FF !important;
    }
    
    .circle{
        height: 350px;
        width: 350px;
    }

Service List CSS Class


service-list
circle

Blog Post CSS


.blog-post .by{
    margin-right: 5px;
}

Blog Post CSS Class


blog-post

IMPORTANT LINKS

Slider Area CSS

Slider Area Class


slider__area

Banner Object CSS


.slider__shapes{ 
    opacity: 0.27;
    
}

.slider__shapes .shapes {
    animation: shapeBlinker 1.5s linear infinite;
    opacity: 1;
    z-index: -1;
}
.slider__shapes .shapes-1 {
  animation-delay: 0.2s!important;
}

.slider__shapes .shapes-2 {
  animation-delay: 0.4s!important;
}

.slider__shapes .shapes-3{
  animation-delay: 0.2s!important;
}

.slider__shapes .shapes-4 {
  animation-delay: 0.6s!important;
}

@-webkit-keyframes shapeBlinker {
  50% {
    opacity: 0.59;
  }
}
@keyframes shapeBlinker {
  50% {
    opacity: 0.59;
  }
}

Banner Object Classes


slider__shapes
shapes-1
shapes-2
shapes-3
shapes-4

Title Style CSS


.tittle::after {
    content: "";
    display: block;
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 93.846% 100%, 6.154% 100%, 0% 0%);
    clip-path: polygon(0% 0%, 100% 0%, 93.846% 100%, 6.154% 100%, 0% 0%);
    width: 65px;
    height: 5px;
    margin: 20px auto 0;
    background: #45F882;
}

Title Style Class


tittle

Button Style CSS


.btn svg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.btn .cls-1 {
    fill: #45F882;
    stroke: #fff;
    stroke-width: 1.5px;
    -webkit-transition: all 0.3s ease-out 0s;
    -moz-transition: all 0.3s ease-out 0s;
    -ms-transition: all 0.3s ease-out 0s;
    -o-transition: all 0.3s ease-out 0s;
    transition: all 0.3s ease-out 0s;
}
.btn:hover .cls-1{
    fill: #fff;
}


.btn-1 path {
    stroke: #45F882;
}
.btn-2 path {
    stroke:  #FFBE18;
}
.btn-3 .cls-1 {
    fill: #FFBE18 !important;
    -webkit-transition: all 0.3s ease-out 0s;
    -moz-transition: all 0.3s ease-out 0s;
    -ms-transition: all 0.3s ease-out 0s;
    -o-transition: all 0.3s ease-out 0s;
    transition: all 0.3s ease-out 0s;}
    
.btn-3:hover .cls-1{
    fill: #45F882 !important
    
}

Button Style Classes


btn
cls-1
btn-2
btn-3

Timeline Border CSS


.Timeline-border::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 6px;
    height: 100%;
    background: -moz-linear-gradient(90deg, #10161c 0%, #45F882 100%);
    background: -webkit-linear-gradient(90deg, #10161c 0%, #45F882 100%);
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -o-border-radius: 5px;
    -ms-border-radius: 5px;
    border-radius: 5px;
}

Timeline Border Class


Timeline-border

Team Section CSS


.team__item{
    transition: 0.3s linear;
    
}

.team__item::before, .team__item::after {
    content: "";
    position: absolute;
    left: 0;
    top: -60px;
    width: 70px;
    height: 320px;
    background: #45F882;
    -webkit-transform: rotate(-55deg);
    -moz-transform: rotate(-55deg);
    -ms-transform: rotate(-55deg);
    -o-transform: rotate(-55deg);
    transform: rotate(-55deg);
    -webkit-transition: all 0.3s ease-out 0s;
    -moz-transition: all 0.3s ease-out 0s;
    -ms-transition: all 0.3s ease-out 0s;
    -o-transition: all 0.3s ease-out 0s;
    transition: all 0.3s ease-out 0s;
    opacity: 0.55;
    z-index: -1;
}

.team__item::after {
    left: auto;
    right: 0;
    -webkit-transform: rotate(55deg);
    -moz-transform: rotate(55deg);
    -ms-transform: rotate(55deg);
    -o-transform: rotate(55deg);
    transform: rotate(55deg);
}

.team__item:hover {
    -webkit-transform: translateY(-7px);
    -moz-transform: translateY(-7px);
    -ms-transform: translateY(-7px);
    -o-transform: translateY(-7px);
    transform: translateY(-7px);
} 

.team__item:hover::before, .team__item:hover::after {
    opacity: 1;
}

Team Section Class


team__item

Tab Section CSS




.tabs svg{
    border-radius: 50px;
}

.tabs .e-n-tab-title-text{
    display: none;
}

.tabs .e-n-tabs-heading{
    padding: 22px 0;
    position: relative;
    width: 83.33333333%;
    margin: auto!important;
}

.tabs .e-n-tabs-heading::before, .tabs .e-n-tabs-heading::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, var(--e-global-color-secondary) 50%, transparent 100%);
}

.tabs .e-n-tabs-heading::after{
    top: 123px!important;
}


.tabs .tab-content::after {
    content: "";
    position: absolute;
    left: 15px;
    bottom: 0;
    width: calc(100% - 30px);
    height: 1px;
    background: #45F882;
    background: linear-gradient(45deg, rgba(2, 0, 36, 0) 0%, #45F882 100%);
    opacity: 0.329;
    
}
.tabs .about__content-list{
    background-image: -moz-linear-gradient(0deg, #1f2935 0%, transparent 100%, #10181f 100%);
    background-image: -webkit-linear-gradient(0deg, #1f2935 0%, transparent 100%, #10181f 100%);
    background-image: -ms-linear-gradient(0deg, #1f2935 0%, transparent 100%, #10181f 100%);
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
    -webkit-transition: 0.3s linear;
    -moz-transition: 0.3s linear;
    -ms-transition: 0.3s linear;
    -o-transition: 0.3s linear;
    transition: 0.3s linear;
}

.tabs .about__content-list:hover{
    -webkit-transform: translateX(-10px);
    -moz-transform: translateX(-10px);
    -ms-transform: translateX(-10px);
    -o-transform: translateX(-10px);
    transform: translateX(-10px);
}
.tab-button-gradient .elementor-button{
    background-image: -moz-linear-gradient(90deg, #10181f 0%, transparent 0%, #141a20 100%);
    background-image: -webkit-linear-gradient(90deg, #10181f 0%, transparent 0%, #141a20 100%);
    background-image: -ms-linear-gradient(90deg, #10181f 0%, transparent 0%, #141a20 100%);
}

Tab Section Classes


tabs
tab-content
about__content-list
tab-button-gradient

Custom Carousel CSS


.custom-carousel .gallery__content{
    opacity: 0;
    -webkit-transition: all 0.3s ease-out 0s;
    -moz-transition: all 0.3s ease-out 0s;
    -ms-transition: all 0.3s ease-out 0s;
    -o-transition: all 0.3s ease-out 0s;
    transition: all 0.3s ease-out 0s;
    -webkit-transform: translateY(-40px);
    -moz-transform: translateY(-40px);
    -ms-transform: translateY(-40px);
    -o-transform: translateY(-40px);
    transform: translateY(-40px);
}

.custom-carousel .swiper-slide-next .gallery__content {
    opacity: 1;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -o-transform: translateY(0px);
    transform: translateY(0px);
}

.custom-carousel .gallery__item{
    -webkit-transition: all 0.3s ease-out 0s;
    -moz-transition: all 0.3s ease-out 0s;
    -ms-transition: all 0.3s ease-out 0s;
    -o-transition: all 0.3s ease-out 0s;
    transition: all 0.3s ease-out 0s;
    -webkit-transform: scale(0.9);
    -moz-transform: scale(0.9);
    -ms-transform: scale(0.9);
    -o-transform: scale(0.9);
    transform: scale(0.9);
}

.custom-carousel .swiper-slide-next .gallery__item{
        -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
}

@media (max-width: 766px) {

.custom-carousel .swiper-slide-active .gallery__content{
    opacity: 1;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -o-transform: translateY(0px);
    transform: translateY(0px);
} 

}

Custom Carousel Class


custom-carousel
gallery__item
gallery__content

Roadmap Style CSS


.roadMap-box.active::before {
    content: "";
    position: absolute;
    left: -42px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 20px 0 20px 18px;
    border-color: transparent transparent transparent #45F882;
    opacity: 0.9;
    z-index: -1;
}   
    
.roadMap__list svg{  
    
    position: a;
    border: 2px solid #262e38;
    border-radius: 500%;
    
}

.roadMap__list.active svg{
    border-color: #1b242e !important;
}

.roadMap-box img{
    -webkit-transition: all 0.3s ease-out 0s;
    -moz-transition: all 0.3s ease-out 0s;
    -ms-transition: all 0.3s ease-out 0s;
    -o-transition: all 0.3s ease-out 0s;
    transition: all 0.3s ease-out 0s;
}

.roadMap-box:hover img{
    opacity: 0.11!important;
}

Roadmap Style Classes


roadMap-box
roadMap__list

Trending Section CSS


.Nft__item .Nft-price .eth{
    color: var(--e-global-color-a5230b3);
    font-weight: 700;
    margin-left: 5px;
}

.Nft__item .Nft-price .elementor-icon-list-icon, .Nft-price .elementor-icon-list-icon svg{
    margin: 0;
}

.Nft__item .divider .elementor-divider-separator::before {
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, #383d44 50%, transparent 100%);
}

.heart-right{
        margin-left: auto;
}

Trending Section Classes


Nft__item
heart-right
divider

Responsive Area CSS


@media (max-width: 1500px){
.slider__area::before, .slider__area::after {
    height: 40px;
}
}

@media (max-width: 1024px){
.slider__area::before, .slider__area::after {
    height: 30px;
}
}


@media  (max-width: 767px){
    .tabs .tab-content::after{
    width: calc(100% - 15px);
    }
}

IMPORTANT LINKS

Main Heading (Gradient Color) CSS


selector{
    background-image: linear-gradient( 90deg, #F9E483 0%, #FFFFFF 100% );
    background-size: cover;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-fill-color: transparent;
    display: inline-block;
}

Slide Heading Container CSS


selector{
    display: flex;
    width: 100000px;
    transform: translateX(0px);
    animation: marquee 40s linear infinite;
}


@keyframes marquee {
    
    100%  {transform:translateX(-2799.31px)
       
   }
   
}

Video Button Icon CSS


selector .elementor-icon:before {
    content: '';
    display: inline-block;
    position: absolute;
    top: -2px;
    left: -2px;
    bottom: -2px;
    right: -2px;
    border-radius: inherit;
    border: 1px solid #98B854;
    -webkit-animation: btnIconRipple 2s cubic-bezier(0.23, 1, 0.32, 1) both infinite;
    animation: btnIconRipple 2s cubic-bezier(0.23, 1, 0.32, 1) both infinite;
    border-color: #98B854;
}


@keyframes btnIconRipple {                                                0% {
    border-width: 4px;
    transform: scale(1);
}

  80% {
    border-width: 1px;
    transform: scale(1.35);
    
    
    100% {
    opacity: 0;
  }

Pricing Table Title CSS


selector {
    background-image: linear-gradient( 90deg, #3FA542 0%, #D4B362 100% );
    background-size: cover;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-fill-color: transparent;
    display: inline-block;
}

IMPORTANT LINKS

Banner Icon Box


selector .elementor-icon:after {
    position: absolute;
    left: -10px;
    bottom: -10px;
    content: "";
    height: 60px;
    width: 60px;
    border-radius: 50%;
    background: #ffffff;
    z-index: 1;
    opacity: 0.1;
}

Working Process


selector:after {
    position: absolute;
    left: 20%;
    right: 20%;
    content: "";
    height: 1px;
    border-top: 2px dashed #5153ff;
    z-index: -1;
    top: 50%;
    transform: translateY(-50%);
}

@media only screen and (max-width: 1024px){
    selector:after {
        display: none;
    }    
}

Service Section Animated Icon


selector{
    animation: UpDown 4s linear infinite;
}

/* Infinite Up Down Animation */
@keyframes UpDown {
	0% {
		-webkit-transform: translateY(0px);
		transform: translateY(0px);
	}

	50% {
		-webkit-transform: translateY(-25px);
		transform: translateY(-25px);
	}

	100% {
		-webkit-transform: translateY(0px);
		transform: translateY(0px);
	}
}

Footer Background CSS

Footer Background Class


about

Button Hover Effect


.btn .elementor-button{
    border: 30px;
    position: relative;
    overflow: hidden;
    border: 2px solid #dddddd;
}
.btn .elementor-button:hover{
    border-color: #10393b;
    transition: all 0.25s ease-in-out;
}
.btn .elementor-button:after {
    position: absolute;
    top: inherit;
    right: inherit;
    bottom: inherit;
    left: -5%;
    content: "";
    height: 150px;
    width: 115%;
    z-index: 1;
    background-color: #10393b;
    -webkit-transition: all 0.25s ease-in-out;
    transition: all 0.25s ease-in-out;
    -webkit-transform: translateY(-45%) skew(25deg) scale(0);
    transform: translateY(-45%) skew(25deg) scale(0);
}
.btn .elementor-button:hover:after {
    -webkit-transform: translateY(-45%) skew(25deg) scale(1.2);
    transform: translateY(-45%) skew(25deg) scale(1.2);
}
.btn .elementor-button-text{
    z-index: 2;
}
.btn-white .elementor-button{
    border: 2px solid #fff;
}

IMPORTANT LINKS

Header CSS

Header Class


***Main Menu Class***
main-menu

IMPORTANT LINKS

Banner Background CSS

Banner Background Class


banner-bg

Animation CSS


.animation-1 {
  position: relative;
  animation-name: animation-1;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes animation-1 {
  0%   {top:10px;}
  100% {top:-40px;}
}

.animation-2 {
  position: relative;
  animation-name: animation-2;
  animation-duration: 3s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes animation-2 {
  0%   {bottom: -70px;}
  100% {bottom: -40px;}
}

.animation-3 {
  position: relative;
  animation-name: animation-3;
  animation-duration: 3s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes animation-3 {
  0%   {top: 430px;}
  100% {top: 460px;}
}

.animation-4 {
  position: relative;
  animation-name: animation-4;
  animation-duration: 3s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes animation-4 {
  0%   {top: 0px;}
  100% {top: -30px;}
}

.animation-5 {
  position: relative;
  animation-name: animation-5;
  animation-duration: 3s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes animation-5 {
  0%   {top: 160px;}
  100% {top: 130px;}
}

Animations Classes


animation-1
animation-2
animation-3
animation-4
animation-5

IMPORTANT LINKS

Header CSS

Header Class


***Main Menu Class***
main-menu

Home Page Marquee CSS

IMPORTANT LINKS

Button CSS

Button Classes


***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 Class


sub-title

Sub-Title Border


/* 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 Animation CSS


/*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 Classes


***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 Animation CSS


/*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;
}

Portfolio Classes


***Single Block Class***
project-block

***Single Block > ImageBox Class***
image-box

***Single Block > Contentbox Class***
content-box

FAQ CSS


/*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;
}

FAQ Class


upper-box

About Section CSS


/*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


/*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 IconList CSS


/*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 IconList Class


page-breadcrumb

Additional Service CSS


/*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;
}

Additional Service Classes


***Parent Container***
service-block

***Single Block***
service-box

***Spacer widget***
round

Animation Classes


animationFramesOne
contactSwimmer
rotateme

Animation Classes


animationFramesOne
contactSwimmer
rotateme

Animation Classes


animationFramesOne
contactSwimmer
rotateme

IMPORTANT LINKS

Preparation

1. Understanding Blog Structure & Design Plan
2. Install WP on new Domain via Hostinger
3. WordPress Basic Settings
4. Install Elementor Free
5. Install Elementor Pro
6. Preparing Global Colors & Fonts (Shades Generator)
7. Download Exercise Files (Optional)
8. Get Ready RecipePro Kit from Kitpapa (Optional)

Main 10 Steps

Step #1: The Header + Menu Import
Step #2: The Blogpost Lists
Step #3: The Sidebar
Step #4: The Footer
Step #5: A Category Page
Step #6: The Blogpost Page
Step #7: The Featured Post
Step #8: The Email Subscribe
Step #9: The Contact Page
Step #10: 404 Error Page

Excerpt & Title Line Count

/*Excerpt Line Count*/
selector .elementor-post__excerpt{ overflow: hidden; 
    width:100%; 
    display: -webkit-box; 
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical; 
}

/*Title Line Count*/
selector .elementor-post__title{ overflow: hidden; 
    width:100%;
    display: -webkit-box; 
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical; 
}

Get Ready Elementor Templates

Request A Quote

Jim Fahad

Define in Detail

For example:

Set a Delivery Time

Set Your Budget

Recent Projects

Jay Cooper 5.00

Client feedback:

Angela July 5.00

Client feedback:

Alex 5.00

Client feedback:

IMPORTANT LINKS

Hero Banner Heading CSS

Button Object CSS

Gallery Item CSS

Gallery Content CSS

Gallery View CSS

Gallery Item CSS Classes

Video Button CSS

Testimonial Hover Effect CSS

Testimonial Quotation Mark

Blog Grid Hover Effect CSS

Blog Grid Hover Effect CSS Class

Contact Form CSS

Body Overflow-X Hidden

IMPORTANT LINKS

Animation Pulse CSS

Animation Pulse CSS Class

Animation Wobble CSS

Animation Wobble CSS Class

Mouse Animation CSS

Mouse Animation CSS Class

Circle Animation CSS

Circle Animation CSS Class

Background Glass Effect CSS

Background Glass Effect CSS Class

Button Gradient Border CSS

Service Icon Box CSS

Service Icon Box CSS Classes

Team Member Hover Effect CSS

Team Member Hover Effect CSS Classes

Service List CSS

Service List CSS Class

Blog Post CSS

Blog Post CSS Class

IMPORTANT LINKS

Slider Area CSS

Slider Area Class

Banner Object CSS

Banner Object Classes

Title Style CSS

Title Style Class

Button Style CSS

Button Style Classes

Timeline Border CSS

Timeline Border Class

Team Section CSS

Team Section Class

Tab Section CSS

Tab Section Classes

Custom Carousel CSS

Custom Carousel Class

Roadmap Style CSS

Roadmap Style Classes

Trending Section CSS

Trending Section Classes

Responsive Area CSS

IMPORTANT LINKS

Main Heading (Gradient Color) CSS

Slide Heading Container CSS

Video Button Icon CSS

Pricing Table Title CSS

IMPORTANT LINKS

Banner Icon Box

Working Process

Service Section Animated Icon

Footer Background CSS