/*
  Theme Name: Fechweb Child Theme
  Theme URI: http://www.fechweb.com
  Version: 1.0.0
  Template: Divi
  Author: Fechweb Creations
  Author URI: http://www.fechweb.com
  Description: Divi Child Theme For Fechweb  Creations
  Text Domain: fechweb-child-theme
  License: GNU General Public License v2 or later
  License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/


/*Blog layout settings, adjust these values only*/

:root {
    --ds-white: #ffffff; /*The background colour for the post content and text colour for the second and third post content*/
    --ds-grid-2-item: 250px; /*Minimum column width for second grid, decrease this value for more columns*/
    --ds-grid-gap: 30px; /*The gap between posts*/
    --ds-title-background: rgba(0, 0, 0, .5); /*The background colour of the titles on the second and third posts*/
}


/******************************************************/
/*You should not need to edit anything below this line*/
/******************************************************/





/*Styling for the Pricing Page Starts here*/
.molti-active-switch-button.et_pb_button{
	color: #ff8057 !Important;
	background:#fff !Important;
	box-shadow: 0px 6px 18px 0px rgba(0,0,0,0.11);
}
/*Hehe, It ends here*/


/*Styling for Blog - Advanced Page Starts here*/
/*CSS for active switch*/
.active-blog.et_pb_button{
	color: #ff8057 !Important;
	background:#fff !Important;
	box-shadow: 0px 6px 18px 0px rgba(0,0,0,0.11);
}
/*Blog Wrapped Styling*/
/*move wrapped title, meta, and text up over the image*/
.molti-blog-content{
	position: absolute;
	bottom: -10%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	padding: 30px;
	z-index: 1;
}
/*keep the moved items positioned with their parent items*/
.molti-blog-latest .et_pb_blog_grid article {
	position: relative;
}
/*remove spacing around entire blog post*/
.molti-blog-latest .et_pb_blog_grid .et_pb_post {
	padding: 0px;
}
/*remove negative margins on blog featured image*/
.molti-blog-latest .et_pb_image_container {
	margin: 0;
}
/*remove the margin below the featured image frame*/
.molti-blog-latest .et_pb_post .entry-featured-image-url {
	margin: 0;
}
/*Adds overlay to the Latest Post Featured Image*/
.molti-blog-latest .entry-featured-image-url::before {
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.4);
}
@media only screen and ( max-width: 479px ) {
	.molti-blog-content{
		bottom:-45%;
	}
}
/*Blog List layout Styling*/
/*add media query so changes only affect tablet and desktop*/
/*set the image width*/
.molti-blog-list .entry-featured-image-url  {
width: 25%;
float: left;
margin-bottom: 0!important;
}
/*set the details width*/
.molti-blog-list .entry-title,
.molti-blog-list .post-meta,
.molti-blog-list .post-content {
width: 75%;
float: left;
padding-left: 10px;
margin-top:-5px;
}
/*To reduce bottom margin of the list blog*/
.molti-blog-list .et_pb_post {
margin-bottom: 27px;
	-webkit-animation: fade-in 0.5s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	animation: fade-in 0.5s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}
/*Blog Grid layout Styling*/
/*make the parts of the blog post flexible*/
.molti-blog-grid .et_pb_post {
	display: flex;
	flex-direction: column;
    position: relative;
}
/*featured image*/
.molti-blog-grid .et_pb_image_container, .molti-blog-grid .entry-featured-image-url {
	order: 2;
}
/* post title*/
.molti-blog-grid .entry-title {
	order: 3;
}
/* post meta*/
.molti-blog-grid .post-meta {
	order: 1;
    z-index: 1;
    margin: -10px 0px -13px -5px;
}
/*This will give Blog Post & Portfolio Meta Link button looks of Molti Theme */
.molti-blog-grid .post-meta a, .et_pb_portfolio_item .post-meta a{
	background-image: linear-gradient(151deg,#FF8057 38%,#ff5c26 100%);
    padding: 6px 15px;
    color: #fff !IMPORTANT;
    border-radius: 5px;
    margin-left: -10px;
    margin-right: 10px;
    box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.3);
	transition:.2s ease;
	text-transform: uppercase;
    font-weight: bold;
    font-size: 10px;
}
/*Some adjustments for Meta links*/
.et_pb_portfolio_item .post-meta a{
    position: relative;
    left: 10px;
    top: 10px;
	margin-left: -6px !important;
    margin-right: 7px !important;
}
/*To add hover effect to meta links*/
.molti-blog-grid .post-meta a:hover, .et_pb_portfolio_item .post-meta a:hover{
	box-shadow: 0px 5px 20px 0px rgba(0,0,0,0.3);
}
/*To style the Post publish date for Blog Grid*/
.molti-blog-grid .published{
    background: #fff;
    position: absolute;
    padding: 15px;
    border-radius: 5px;
    box-shadow: 0px 5px 20px #0000001a;
    top: 155px;
    right: -18px;
    font-weight: bold;
    color: #000;
    letter-spacing: 1px;
}
/*Reordering the Blog Post Content*/
/*excerpt and button*/
.molti-blog-grid .post-content {
	order: 4;
}
/*For sidebar module*/
.molti-sidebar .widget_categories ul li a{
	color:#000 !Important;
}
.molti-sidebar .widget_categories ul li:hover a{
	color:#ff8057 !Important;
}
.molti-sidebar .widget_categories ul li {
    margin-bottom: .5em;
    font-size: 16px;
    font-weight: 600;
    border-bottom: 1px solid #eee;
    padding: 20px 20px;
	transition: .2s;
}
.molti-sidebar .widget_categories ul li:hover {
    padding: 20px 40px;
}
.molti-sidebar .widget_categories ul li a:before {
	font-family: 'ETmodules';
    content: "\24";
    font-size: 18px;
    position: absolute;
    opacity: 0;
    font-weight: 600;
    left: 0;
    transition: .1s;
}
.molti-sidebar .widget_categories ul li:hover a:before {
    opacity: 1;
    left: 15px;
    transition: .3s;
	color: #ff8057;
}
/*ENDS HERE*/

/*Styling for Single Post page starts here*/

/*To add button looks to the Cateofy and Tags*/
.molti-category a, .molti-tags a{
    background-image: linear-gradient(151deg,#FF8057 38%,#ff5c26 100%);
	color:#fff;
    padding: 6px 15px;
    border-radius: 5px;
    margin-left: -10px;
    margin-right: 20px;
    box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.2);
	transition:.2s ease;
}
/*hover effect*/
.molti-category a:hover, .molti-tags a:hover{
	box-shadow: 0px 5px 20px 0px rgba(0,0,0,0.3);
}
/*Adjusting the Tags positioning*/
.molti-tags a{
	margin:0 0 0 10px !Important
}
/*Post Navigation Module on single post page styling*/
.nav-label{
    position: relative;
    top: 13px;
    left: -2px;
}
@media only screen and ( max-width: 479px ) {
.nav-label{
    top: 0px;
}
/*Adjusting the the Comments section styling for single post page*/
#respond .comment-form-comment {
    width: 100% !Important;
	margin-right:0px;
}
/*To add active indicator to the current tab link on single post page*/

/*To move the active indicator to Discussion link */	
.active-link-discussion:after{
    left:155px;
}
	/*Adjusting Indicaot for different devices*/
}
@media only screen and ( min-width: 768px ) and ( max-width: 980px ) {
.active-link-discussion:after{
    left:200px;
}
}
@media only screen and ( min-width: 480px ) and ( max-width: 767px ) {
.active-link-discussion:after{
    left:155px;
}
}
/*End adjusting indicator*/
/*To change the post of next label of post navigation module*/
.nav-next .nav-label{
	left:-10px;
}
/*Adjusting animation for tabs*/
.molti-comments, .molti-article{
	animation:.3s
}
/*Adding animation to the Comment form fields*/
#commentform input[type=email], #commentform input[type=text], #commentform input[type=url], #commentform textarea{
	transition:.3s ease !Important;
}
/*To make the Comment field half the width*/
#respond .comment-form-comment {
    width: 50%;
    float: left;
	margin-right:30px;
}
/*To make the Comment field fullwidth for logged in user*/
.logged-in #respond .comment-form-comment {
    width: 100% !Important;
	margin-right:0;
}
/*To change the height of the textarea - comment feild*/
#commentform textarea {
    height: 195px!important;
}
/*To adjust the "save info" text position*/
.comment-form-cookies-consent{
margin-top:15px;	
}
/*This will add active indicator to the "Read Article".*/
.active-link-read:after{
	content:"";
	position:absolute;
    top:60px;
    left:13px;
	display:block;
	width:135px;
	border-radius:3px 3px 0px 0px;
	background: #ff8057;
    border:2px solid #ff8057; 
	transition:.3s ease;
}
/*This will add active indicator to the "Discussion"*/
.active-link-discussion:after{
	content:"";
	position:absolute;
    top:60px;
    right:124px;
	display:block;
	width:135px;
	border-radius:3px 3px 0px 0px;
	background: #ff8057;
    border:2px solid #ff8057; 
	transition:.3s ease;
}



/*Styling for Single Project Page*/
/*To style the scrollbar for Highlights section - You can add class "highlighs-section" to any section, row etc to style the Scrollbar*/
.highlights-section ::-webkit-scrollbar {
	width: 10px;
    height: 10px;
}
.highlights-section ::-webkit-scrollbar-thumb {
	background-color: #d8d3d3;
	border-radius: 100px
}
/*End styling scrollbar*/
/*Animation for the text shown on hover for image*/
@-webkit-keyframes slide-in-bottom {
  0% {
    -webkit-transform: translateY(20px);
            transform: translateY(20px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}
@keyframes slide-in-bottom {
  0% {
    -webkit-transform: translateY(20px);
            transform: translateY(20px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}

/*END HERE*/


/*Styling for Portfolio Page*/
/*To style the Portfolio Gird for both Portfolio Modules*/
/*To style the Portfolio Gird for both Portfolio Modules*/
.molti-portfolio .et_pb_portfolio_item, .molti-portfolio-2 .et_pb_grid_item{
    margin-right: 30px !IMPORTANT;
    border-radius:10px;
    box-shadow:0px 5px 20px rgb(0 0 0 / 6%);
    padding: 0 0 40px 0;
    transition:.2s ease;
    background: #fff;
}
/*Potfolio Modules 3 Column Width Settings*/
@media only screen and ( min-width: 768px ) {
.molti-portfolio .et_pb_grid_item, .molti-portfolio-2 .et_pb_grid_item {
width: 30.333% !important;
margin: 0 3.5% 3.5% 0 !important;
}
.molti-portfolio .et_pb_grid_item:nth-child(3n), .molti-portfolio-2 .et_pb_grid_item:nth-child(3n) {
margin-right: 0 !important;
}
.molti-portfolio .et_pb_grid_item:nth-child(3n+1), .molti-portfolio-2 .et_pb_grid_item:nth-child(3n+1) {
clear: left;
}
.molti-portfolio .et_pb_grid_item:nth-child(4n+1), .molti-portfolio-2 .et_pb_grid_item:nth-child(4n+1) {
clear: unset !important;
}
}
/*Adjusting the Portfolio for different screen sizes*/
@media only screen and ( max-width: 479px ) {
.molti-portfolio .et_pb_portfolio_item, .molti-portfolio-2 .et_pb_grid_item{
	width: 91%!important;
}
}
@media only screen and ( min-width: 480px ) and ( max-width: 555px ) {
.molti-portfolio .et_pb_portfolio_item, .molti-portfolio-2 .et_pb_grid_item{
	width: 43%!important;
}
}
@media only screen and ( min-width: 556px ) and ( max-width: 666px ) {
.molti-portfolio .et_pb_portfolio_item, .molti-portfolio-2 .et_pb_grid_item{
	width: 44%!important;
}
}
@media only screen and ( min-width: 667px ) and ( max-width: 767px ) {
.molti-portfolio .et_pb_portfolio_item, .molti-portfolio-2 .et_pb_grid_item{
	width: 45%!important;
}
}
@media only screen and ( min-width: 768px ) and ( max-width: 980px ) {
.molti-portfolio .et_pb_portfolio_item, .molti-portfolio-2 .et_pb_grid_item{
	width: 45%!important;
}
}
/*To add hover effect to Portfolio Grid*/
.molti-portfolio .et_pb_portfolio_item:hover, .molti-portfolio-2 .et_pb_grid_item:hover{
	box-shadow:0px 10px 50px rgb(0 0 0 / 15%);
	transform:translate(0%,-3%)
}
/*To add button on Hover for Portfolio Grid*/
.molti-portfolio .et_portfolio_image:hover:before, .molti-portfolio-2 .et_portfolio_image:hover:before{
	content: "View Details";
    position: absolute;
    top: 45%;
    left: 32%;
    z-index: 2;
    background: #fff;
    border-radius: 100px;
    padding: 10px 20px;
    color: #000;
    font-weight: bold;
    box-shadow: 0px 2px 25px #0000004a;
	-webkit-animation: fade-in-bottom 0.3s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	        animation: fade-in-bottom 0.3s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}
/*Animation keyframes for the button*/
@-webkit-keyframes fade-in-bottom {
  0% {
    -webkit-transform: translateY(20px);
            transform: translateY(20px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}
@keyframes fade-in-bottom {
  0% {
    -webkit-transform: translateY(20px);
            transform: translateY(20px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}
/*END Animation keyframes*/

/*Adjusting the Portfolio Filter buttons for Mobile*/
@media only screen and  (max-width: 767px){
.et_pb_filterable_portfolio .et_pb_portfolio_filters li {
    width: auto !Important;
}
.et_pb_portfolio_filters li a {
	padding: 7px 10px !important;
    margin: 0 5px !IMPORTANT;
    font-size: 10px !Important;
}
}
/*Styling the Portfolio Filter buttons*/
.et_pb_portfolio_filters li a {
    color: #ff8057 !Important;
    border: 2px solid #ff8057 !Important;
    border-radius: 5px !important;
    padding: 13px 25px !Important;
	margin: 0 7px !Important;
	transition:.3s ease;
	margin-bottom:10px !Important;
}
/*Hover for portflio buttons*/
.et_pb_portfolio_filters li a:hover {
   background-color: #ff80571a !Important;
}
/*For active Portfolio Filter Button*/
.et_pb_portfolio_filters li a.active {
    background-image: linear-gradient(151deg,#FF8057 38%,#ff5c26 100%);
    border-radius: 5px;
    color: #fff !Important;
    border: 2px solid #ff8057;
    box-shadow: 0px 5px 13px rgb(0 0 0 / 20%);
}
/*Styling the Portfolio Pagination*/
.et_pb_portofolio_pagination{
	border:none !important;
}
.et_pb_portofolio_pagination a {
    font-weight: 700;
    font-size: 15px;
    color: #000000!important;
    padding: 10px 15px;
    border: 2px solid #ff8057;
    border-radius: 5px;
	transition:.3s ease;
}
.et_pb_portofolio_pagination ul li a.active{
    background-image: linear-gradient(151deg,#FF8057 38%,#ff5c26 100%);
    color: #fff !IMPORTANT;
}
/*END HERE*/


/*CSS for Showcase Page*/
/*To hide the "View Demo" text by default*/
.demo-text{
  opacity:0;
}
/*To show it on hover*/
.image:hover .demo-text{
  opacity:1;
  transition: .2s ease;
}
mark-showcase{
  background: rgba(255,128,87,0.2);
  padding:9px 30px;
  border-radius:100px;
  color:#ff8057;
}
mark1-showcase{
  background: #ff8057;
  padding:9px 30px;
  border-radius:100px;
  color:#fff;
}
/*To add a close Icon when clicked on the Info Floating Icon on SHowcase Page*/
.open:before{
  content:"\4d";
  position:absolute;
  font-family:ETMOdules;
  z-index:999;
  background:#fff;
  padding:5px;
  font-size:30px;
  right:8px;
  color:#ff8057;
  font-weight:bold;
}
/*To Style the Video Play Button*/
.et_pb_video_play:before {
  font-family: ETmodules;
  content: "\45";
  background: #fff;
  color: #ff8057;
  font-size:60px;
  padding: 20px;
  border-radius:100px;
  box-shadow: 0px 0px 0px 10px rgba(255,255,255,0.47), 0px 2px 20px rgba(0,0,0,0.28); 
  transition:.3s ease;
}
/*Hover animation for the play button*/
.et_pb_video_play:hover:before {
  transform:scale(1.1) !Important;
  box-shadow: 0px 0px 0px 20px rgba(255,255,255,0.47), 0px 2px 40px rgba(0,0,0,0.28);  
}




:root {
  --green-1: #374c4a;
  --green-2: #354a48;
  --green-3: #364b49;
  --green-4: #425654;
  --green-5: #354b49;
  --green-6: #00bda3;
  --green-7: #00bca2;
  --green-8: #07bfa6;
  --green-9: #43cebb;
  --green-10: #97e4da;
}

/* Example usage */
.bg-green-1 {
  background-color: var(--green-1);
}
.text-green-1 {
  color: var(--green-1);
}

.bg-green-2 {
  background-color: var(--green-2);
}
.text-green-2 {
  color: var(--green-2);
}

.bg-green-3 {
  background-color: var(--green-3);
}
.text-green-3 {
  color: var(--green-3);
}

.bg-green-4 {
  background-color: var(--green-4);
}
.text-green-4 {
  color: var(--green-4);
}

.bg-green-5 {
  background-color: var(--green-5);
}
.text-green-5 {
  color: var(--green-5);
}

.bg-green-6 {
  background-color: var(--green-6);
}
.text-green-6 {
  color: var(--green-6);
}

.bg-green-7 {
  background-color: var(--green-7);
}
.text-green-7 {
  color: var(--green-7);
}

.bg-green-8 {
  background-color: var(--green-8);
}
.text-green-8 {
  color: var(--green-8);
}

.bg-green-9 {
  background-color: var(--green-9);
}
.text-green-9 {
  color: var(--green-9);
}

.bg-green-10 {
  background-color: var(--green-10);
}
.text-green-10 {
  color: var(--green-10);
}


.et-image-reveal-effect {
  position: relative;
  overflow: hidden; /* Crucial: Hides the overlay as it moves out */
}

.et-image-reveal-effect::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--reveal-color, #00a3ff); /* Default color, can be overridden */
  z-index: 2; /* Ensure it's above the image */
  transform-origin: left; /* For reveal from left */
  transform: scaleX(1); /* Initial state: covering the image */
  transition: transform 0.8s cubic-bezier(0.77, 0, 0.175, 1);
}

.et-image-reveal-effect img {
  display: block;
  width: 100%;
  height: auto;
  opacity: 0;
  transform: scale(1.05); /* Slight zoom out initially */
  transition: opacity 0.6s ease-out 0.4s, transform 0.8s ease-out 0.3s; /* Delay to start after overlay moves */
  will-change: transform, opacity; /* Hint for browser performance */
}

/* --- Triggered State --- */
.et-image-reveal-effect.is-visible::before {
  transform: scaleX(0); /* Slide the overlay out by scaling (reveals from left to right) */
}

/* If you prefer a slide-out to the right instead of scaling:
.et-image-reveal-effect.is-visible::before {
  transform: translateX(101%);
}
*/

.et-image-reveal-effect.is-visible img {
  opacity: 1;
  transform: scale(1);
}

/* --- Optional: Different Reveal Directions --- */

/* Reveal from Right (Overlay slides Left) */
/*
.et-image-reveal-effect.reveal-from-right::before {
  transform-origin: right;
  transform: scaleX(1);
}
.et-image-reveal-effect.reveal-from-right.is-visible::before {
  transform: scaleX(0);
}
*/

/* Reveal from Top (Overlay slides Up) */
/*
.et-image-reveal-effect.reveal-from-top::before {
  transform-origin: top;
  transform: scaleY(1);
}
.et-image-reveal-effect.reveal-from-top.is-visible::before {
  transform: scaleY(0);
}
*/

/* Reveal from Bottom (Overlay slides Down) */
/*
.et-image-reveal-effect.reveal-from-bottom::before {
  transform-origin: bottom;
  transform: scaleY(1);
}
.et-image-reveal-effect.reveal-from-bottom.is-visible::before {
  transform: scaleY(0);
}
*/

.feature-icon {
    position: relative;
    width: 60px;
    margin-bottom: 15px;
    flex-shrink: 0;
    margin-right: 12px
}

.feature-icon-md {
    width: 40px
}

.feature-icon-md-s2 {
    width: 80px
}

.feature-icon-xl {
    width: 120px
}

.feature-icon.dot:before {
    position: absolute;
    bottom: 0;
    right: 0;
    content: '';
    height: 30px;
    width: 30px;
    border-radius: 50%;
    background: rgba(134,107,254,0.5);
    z-index: 4
}

.tc-light .feature-icon .icon {
    color: #866bfe
}

.feature-icon .icon {
    position: relative;
    font-size: 3.75rem;
    color: #6e19c2;
    z-index: 5;
    margin-left: -5px
}

.feature-icon .icon.icon-circle {
    margin-left: 0
}

.feature-icon .icon-xs {
    font-size: 1rem
}

.feature-icon .icon-md {
    font-size: 2.75rem
}

.feature-icon .icon-rg {
    font-size: 4.35rem
}

.feature-icon .icon-lg {
    font-size: 5.75rem
}

.feature-icon .icon-lg-s2 {
    font-size: 5rem;
    padding-top: 15px
}

.feature-icon .icon-xl {
    font-size: 9rem
}

.feature-icon .icon-grd {
    background-image: linear-gradient(-75deg, #a158e9 0%, #6e19c2 60%, #3c1c94 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.feature-icon .icon-circle {
    position: relative;
    height: 36px;
    width: 36px;
    line-height: 36px;
    text-align: center;
    color: #2bc9b4;
    border-radius: 50%;
    background-image: linear-gradient(-45deg, #866bfe 0%, #2bc9b4 80%, #2bc9b4 100%)
}

.feature-icon .icon-circle:after {
    position: absolute;
    top: 2px;
    left: 2px;
    bottom: 2px;
    right: 2px;
    content: '';
    border-radius: 50%;
    background: #fff;
    z-index: -1
}

.bg-theme .feature-icon .icon-circle:after {
    background: #3c1c94
}

.bg-theme-alt .feature-icon .icon-circle:after {
    background: #6e19c2
}

.bg-theme-dark .feature-icon .icon-circle:after {
    background: #180747
}

.bg-theme-dark-alt .feature-icon .icon-circle:after {
    background: #2e186a
}

.feature-icon-s1 {
    text-align: center;
    margin-left: 10px;
    margin-bottom: 40px
}

.feature-icon-s1:after {
    position: absolute;
    content: "";
    left: 50%;
    top: 50%;
    width: 62px;
    height: 62px;
    border: 2px solid rgba(110,25,194,0.1);
    transform: translate(-50%, -50%) rotate(45deg);
    border-radius: 8px
}

.tc-light .feature-icon-s1:after {
    border: 2px solid rgba(110,25,194,0.8)
}

.feature-icon-s1 .icon {
    margin-left: 0;
    line-height: 48px
}

.feature-icon-s5 {
    width: 60px;
    height: 60px;
    text-align: center;
    line-height: 63px;
    border-radius: 50%;
    margin-bottom: 0
}

.feature-icon-s5 .icon {
    font-size: 1rem;
    width: 40px;
    height: 40px;
    background: #fff;
    line-height: 40px;
    border-radius: 50%;
    text-align: center;
    border: 1px solid;
    border-color: currentColor;
    margin-left: 0
}

.tc-light .feature-icon-s5 .icon {
    border-width: 0
}

.feature-icon-s5-1 {
    background: rgba(110,25,194,0.1)
}

.tc-light .feature-icon-s5-1 {
    background: rgba(110,25,194,0.6)
}

.feature-icon-s5-1 .icon {
    color: #6e19c2;
    background: linear-gradient(-90deg, #fff 0%, #e5d2f9 100%)
}

.tc-light .feature-icon-s5-1 .icon {
    color: #6e19c2
}

.feature-icon-s5-2 {
    background: rgba(43,201,180,0.1)
}

.tc-light .feature-icon-s5-2 {
    background: rgba(43,201,180,0.4)
}

.feature-icon-s5-2 .icon {
    color: #2bc9b4;
    background: linear-gradient(-90deg, #fff 0%, #e1f9f5 100%)
}

.tc-light .feature-icon-s5-2 .icon {
    color: #2bc9b4
}

.feature-icon-s5-3 {
    background: rgba(134,107,254,0.1)
}

.tc-light .feature-icon-s5-3 {
    background: rgba(134,107,254,0.4)
}

.feature-icon-s5-3 .icon {
    color: #866bfe;
    background: linear-gradient(-90deg, #fff 0%, #eeeaff 100%)
}

.tc-light .feature-icon-s5-3 .icon {
    color: #866bfe
}

.feature-icon-s5-4 {
    background: rgba(230,96,74,0.1)
}

.tc-light .feature-icon-s5-4 {
    background: rgba(230,96,74,0.4)
}

.feature-icon-s5-4 .icon {
    color: #e97460;
    background: linear-gradient(-90deg, #fff 0%, #fceeeb 100%)
}

.tc-light .feature-icon-s5-4 .icon {
    color: #e97460
}

.feature-icon-s6 {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(to right, #866bfe 0%, #2bc9b4 100%);
    text-align: center;
    line-height: 60px
}

.feature-icon-s6 .icon {
    font-size: 40px;
    color: #fff;
    opacity: 0.8;
    line-height: 60px;
    margin-left: 0
}

.tc-light .feature-icon-s6 .icon {
    color: #fff
}

.feature-icon-s6-bg {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: rgba(134,107,254,0.2);
    text-align: center;
    line-height: 60px
}

.feature-icon-s6-bg .icon {
    font-size: 40px;
    color: #866bfe;
    line-height: 60px;
    margin: 0 auto
}

.feature-icon-s7 {
    width: 65px;
    height: 65px;
    border-radius: 50%;
    text-align: center;
    line-height: 65px;
    background: #866bfe
}

.feature-icon-s7 .icon {
    font-size: 30px;
    margin-left: 0;
    line-height: inherit;
    color: #fff
}

.tc-light .feature-icon-s7 .icon {
    color: #fff
}

.feature-icon-s8 {
    width: 90%
}

.text-center .feature-icon-s8 {
    margin-left: auto;
    margin-right: auto
}

.feature-icon-auto {
    width: auto
}

.feature-icon-lg {
    width: 160px;
    margin-top: -15px;
    margin-bottom: 5px !important
}

.feature-icon-lg-s1 {
    width: 110px;
    margin-top: -10px;
    margin-bottom: 5px !important
}

.feature-icon-lg-s2 {
    width: 130px;
    margin-top: -12px;
    margin-bottom: 5px !important
}

.feature-icon-lg-s3 {
    width: 95px;
    margin-top: -8px;
    margin-bottom: 20px !important
}

.feature-icon-lg+.feature-text-s8 {
    padding-top: 25px
}

.feature-icon-sm {
    width: 60px
}

.feature-icon-bg {
    margin: 0;
    position: absolute;
    right: -15px;
    bottom: -15px;
    width: 121px;
    height: 121px;
    margin: 0;
    background: rgba(134,107,254,0.15);
    border-radius: 50%;
    box-shadow: 0px 0px 0px 10px rgba(134,107,254,0.06);
    text-align: center;
    line-height: 104px
}

.feature-icon-bg img {
    max-width: 60px
}

.feature-icon-bg-grd {
    background-position: center center;
    background-size: contain;
    min-height: 135px;
    min-width: 230px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center
}

.feature-icon-bg-grd-s1 {
    background-image: url(../../images/icons/icon-bg-a.png)
}

.feature-icon-bg-grd-s1 .icon-grd {
    background-image: linear-gradient(to top, #82ffdd 0%, #fff 70%)
}

.feature-icon-bg-grd-s2 {
    background-image: url(../../images/icons/icon-bg-a2.png)
}

.feature-icon-bg-grd-s2 .icon-grd {
    background-image: linear-gradient(to top, #82ffdd 0%, #fff 70%)
}

.feature-icon-bg-grd-s3 {
    background-image: url(../../images/icons/icon-bg-a3.png)
}

.feature-icon-bg-grd-s3 .icon-grd {
    background-image: linear-gradient(to top, #82ffdd 0%, #fff 70%)
}




/* SUPERFLY DEMO ONLY - SET TOP FADE IMAGE */
body.fadeNoPadding .et_pb_section_first:before, body.fadeWithPadding .et_pb_section_first:before, body.josefinPost .et_pb_section_first:before {
    background-image: url(/wp-content/uploads/sites/58/2019/01/glow.png);
}

/* JOSEFIN CSS CODE */

/* BLURB LINKS */
.josefinBlurbLink:after {
  content: 'Learn More ?';
}


a.more-link, .pagination a {
  font-family: 'Josefin Sans', sans-serif;
  font-weight: 700;
  padding: 0.6em 2em .3em !important;
  font-size: 16px;
  background-color: rgba(0, 0, 0, 1);
  border: 2px solid #000;
  color: #fff;
  letter-spacing: 5px;
  text-transform: uppercase;
  display: block;
  text-align: center;
  margin-top: 20px;
  -webkit-transition: all .3s ease-in-out;
  -moz-transition: all .3s ease-in-out;
  -o-transition: all .3s ease-in-out;
  -ms-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}
a.more-link:hover, .pagination a:hover {
  background-color: rgba(0, 0, 0, 0);
  color: #000;
}

/* END JOSEFIN CSS CODE */ 

/* SUPERFLY DEMO ONLY - SET TOP FADE IMAGE */
body.fadeNoPadding .et_pb_section_first:before, body.fadeWithPadding .et_pb_section_first:before, body.josefinPost .et_pb_section_first:before {
    background-image: url(/wp-content/uploads/2025/06/glow.png);
}

/* JOSEFIN CSS CODE */

/* BLURB LINKS */
.josefinBlurbLink:after {
  content: 'Learn More ?';
}


a.more-link, .pagination a {
  font-family: 'Josefin Sans', sans-serif;
  font-weight: 700;
  padding: 0.6em 2em .3em !important;
  font-size: 16px;
  background-color: rgba(0, 0, 0, 1);
  border: 2px solid #000;
  color: #fff;
  letter-spacing: 5px;
  text-transform: uppercase;
  display: block;
  text-align: center;
  margin-top: 20px;
  -webkit-transition: all .3s ease-in-out;
  -moz-transition: all .3s ease-in-out;
  -o-transition: all .3s ease-in-out;
  -ms-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}
a.more-link:hover, .pagination a:hover {
  background-color: rgba(0, 0, 0, 0);
  color: #000;
}

/* END JOSEFIN CSS CODE */