/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */
html {
    overflow-x: hidden !important;
	 scroll-behavior: smooth;
}
body {
    overflow-x: hidden !important;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 3px;
}

::-webkit-scrollbar-track {
    background-color: #d9d9d9;
}

::-webkit-scrollbar-thumb {
    background-color: #1870f3;
}

/* Header */
.hide {
    display: none !important;
}
.show {
    display: block !important;
}

.disable-scroll {
  overflow: hidden;
}
.megamenu-services-item a:hover {
    color: #1870f3 !important;
}
.hl-primary-clr {
    color: #1870f3 !important;
}

.mobile-menu-accordion-top {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
.mobile-menu-accordion-top img {
    margin-right: 15px;
}
/* .mobile-menu-accordion .elementor-accordion-icon {
    position: absolute !important;
    top: 29px !important;
    right: 15px !important;
} */
.hl-small-text {
    font-size: 14px;
    font-weight: 400;
    line-height: 23px;
}
/* Elementor Button */
/* Primary btn */

/*
.hl-primary-btn a.elementor-button {
    position: relative;
	z-index: 1;
}
.hl-primary-btn a.elementor-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background-color: #1870f3;
    transition: width 0.3s ease;
    border-radius: 8px;
    z-index: -1;
}

.hl-primary-btn a.elementor-button:hover::before {
    width: 130%;
}
.hl-primary-btn a.elementor-button .elementor-button-icon{
	opacity: 0;
}
.hl-primary-btn a.elementor-button:hover .elementor-button-icon{
	opacity: 1;
}
*/
/* Secondary btn */
.hl-secondary-btn a.elementor-button {
    position: relative;
    z-index: 1;
}
.hl-secondary-btn a.elementor-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background-color: #000417;
    transition: width 0.3s ease;
    border-radius: 8px;
    z-index: -1;
}

.hl-secondary-btn a.elementor-button:hover::before {
    width: 115%;
}
.hl-secondary-btn a.elementor-button .elementor-button-icon {
    opacity: 0;
}
.hl-secondary-btn a.elementor-button:hover .elementor-button-icon {
    opacity: 1;
}

/* Primary button 2 */

.hl-primary-btn-new a {
    width: 62px !important;
    height: 62px;
    border-radius: 47px !important;
    outline: 1px solid #1870f3 !important;
    border: 3px solid #fff !important;
    padding-left: 16px !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: all 0.3s ease;
}
.hl-primary-btn-new-2 a {
    border-radius: 47px !important;
    outline: 1px solid #1870f3 !important;
    border: 3px solid #fff !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: all 0.3s ease;
    min-width: fit-content;
}

.hl-primary-btn-new .elementor-button-text {
    display: none;
}
.hl-primary-btn-new a:hover {
    min-width: fit-content;
    padding-right: 50px !important;
}
.hl-primary-btn-new a:hover .elementor-button-text {
    display: block;
}
.hl-primary-btn-new a:hover .elementor-button-icon {
    position: absolute;
    right: 0;
}
.hl-primary-btn-new .elementor-button-icon svg {
    width: 24px;
}
.hl-primary-btn-new .elementor-button-content-wrapper {
    align-items: center;
}
.hl-primary-btn-new.elementor-align-center a {
    margin-left: auto !important;
    margin-right: auto !important;
}
/* Menu butoon */
.hl-cta-btn-menu .hl-cta-btn {
    min-width: 140px !important;
    padding: 8px !important;
}
.hl-cta-btn-menu .hl-cb-circle {
    padding: 7px !important;
}

/* Iconbox Read more */
.read-more-link {
    color: #000;
    cursor: pointer;
    font-weight: 600;
}
.expandable-content {
    display: none;
    position: relative;
}

/* CTA Button */

.hl-cta-btn-wrapper {
    background: transparent !important;
    width: 100%;
    /* 	width: fit-content; */
    text-align: right;
}
.hl-cta-btn-wrapper a {
    text-decoration: none;
}
.hl-cta-btn {
    background: transparent;
    padding: 5px 5px 5px 30px;
    border-radius: 54px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    cursor: pointer;
    transition: all 0.1s ease-in;
    min-width: 220px;
    max-width: fit-content;
    z-index: 1;
}
.hl-cta-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #0e008b;
    /*                 background: #f7936f; */
    /* border: 1px solid transparent; */
    /* border-color: #f7936f; */
    border-radius: 54px;
    z-index: -1;
    animation: ctaSpreadIn 0.2s ease-in alternate;
}
.hl-cta-btn::after {
    content: '';
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    border: 1px solid transparent;
    border-color: #0e008b;
    /*                 border-color: #f7936f; */
    border-radius: 54px;
    z-index: -1;
}
.hl-cta-btn #hl-cb-text {
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    line-height: 24px; /* 171.429% */
    text-transform: capitalize;
    margin: 0;
    margin-right: 20px;
}
.hl-cb-circle {
    padding: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 22.5px;
    color: #fff;
    position: relative;
    overflow: hidden;
    transition: background-color 0.3s ease;
    z-index: 1;
}
.hl-cb-circle::before {
    position: absolute;
    content: '';
    background: #fff;
    /*                 background: #000417; */
    width: 100%;
    height: 100%;
    z-index: -1;
    animation: ctaGrow 0.2s ease-in alternate;
    border-radius: 54px;
}
.hl-cb-circle svg,
.hl-cb-circle svg path {
    fill: #000;
    stroke: #000;
}

/* Hover state */
.hl-cta-btn:hover::before {
    /* border-color: #1870f3; */
    animation: ctaShrink 0.3s ease-in alternate;
}
.hl-cta-btn:hover::after {
    border-color: #1870f3;
}
.hl-cta-btn:hover,
.hl-cta-btn:hover::before {
    background: transparent !important;
}
.hl-cta-btn:hover #hl-cb-text {
    color: #1870f3;
}
.hl-cta-btn:hover .hl-cb-circle svg,
.hl-cta-btn:hover .hl-cb-circle svg path {
    fill: #fff;
    stroke: #fff;
}
.hl-cta-btn:hover .hl-cb-circle {
    background: #1870f3;
    z-index: 2;
}
.hl-cta-btn:hover .hl-cb-circle::before {
    animation: ctaShrink 0.25s ease-in alternate;
    border-radius: 54px;
    /* background: #1870f3; */
    z-index: -1;
    width: 0;
    height: 0;
}

/* utils */
.hl-cb-right .hl-cta-btn {
    margin-left: auto;
}
.hl-cb-left .hl-cta-btn {
    margin-right: auto;
}
.hl-cb-center .hl-cta-btn {
    margin-left: auto;
    margin-right: auto;
}

/* Steps Tooltip - 2.1 */
.step-expandable-block,
.step-close-icon {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
    position: absolute;
    z-index: 1;
}
.step-expandable-block {
    box-shadow: 0px 8px 20px 5px rgba(163, 163, 163, 0.1);
}

.step-expandable-trigger:hover + .step-expandable-block,
.step-expandable-block:hover {
    opacity: 1;
    visibility: visible;
}
.step-close-icon {
    display: none;
}
.step-expandable-trigger:hover .step-close-icon {
    display: block;
    opacity: 1;
    visibility: visible;
}
.step-expandable-trigger:hover .step-expand-icon {
    display: none;
    opacity: 0;
    visibility: hidden;
}

/* Related Pages URLs box */
.rpu-item-box {
    position: relative;
}
.rpu-item-box::after{
    content: url(https://wordpress.hashlogics.com/wp-content/uploads/2023/11/Primary-Button.svg);
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    display: none;
}
.rpu-item:hover .rpu-item-box::after{
    display: block;
}

@media (max-width: 767px) {
    .hl-cta-btn {
        max-width: fit-content;
        padding: 5px;
        padding-left: 30px;
        max-height: 36px;
    }
    #hl-cb-text {
        margin-right: 20px !important;
    }
    .hl-cb-circle {
        padding: 10px;
    }
    .hl-cb-circle svg {
        width: 12px;
        height: 12px;
    }
    .hl-cb-center-mobile .hl-cta-btn {
        margin-left: auto;
        margin-right: auto;
    }
}
@keyframes ctaShrink {
    0% {
        width: 100%;
        height: 100%;
    }
    100% {
        width: 0;
        height: 0;
    }
}
@keyframes ctaGrow {
    0% {
        width: 0;
        height: 0;
    }
    50% {
        width: 50%;
        height: 50%;
    }
    100% {
        width: 100%;
        height: 100%;
    }
}
@keyframes ctaSpreadIn {
    0% {
        width: 20%;
        height: 10%;
        margin-left: auto;
        margin-right: auto;
        top: 100%;
        left: 50%;
        border-radius: 54px;
    }
    50% {
        width: 70%;
        height: 30%;
        border-radius: 54px;
        /* transform: scale(0.9); */
        /* top: 50; */
        /* left: 0; */
        /* transform: translateX(); */
    }
    100% {
        width: 100%;
        height: 100%;
        /* top: 0;
                    left: 0; */
    }
}
@keyframes ctaSpreadOut {
    0% {
        width: 100%;
        height: 100%;
        margin-left: auto;
        margin-right: auto;
        top: 0;
        left: 0;
    }
    50% {
        width: 70%;
        height: 50%;
        margin-left: auto;
        margin-right: auto;
        top: 50%;
        transform: translateY(-50%);
        left: 0;
    }
    100% {
        width: 70%;
        height: 20%;
        top: 100%;
        left: 0;
    }
}

/* CTA Secondary button */
/* Secondary CTA button */
.hl-cta-btn-secondary .hl-cta-btn::before {
    background: transparent !important;
}
.hl-cta-btn-secondary .hl-cta-btn::after {
    border-color: #1870f3 !important;
}
.hl-cta-btn-secondary .hl-cta-btn #hl-cb-text {
    color: #1870f3 !important;
}
.hl-cta-btn-secondary .hl-cb-circle::before {
    background: #1870f3;
}

.hl-cta-btn-secondary .hl-cb-circle svg,
.hl-cta-btn-secondary .hl-cb-circle svg path {
    fill: #fff;
    stroke: #fff;
}
/* Secondary CTA button White */
.hl-cta-btn-secondary-white .hl-cta-btn::before {
    background: transparent !important;
}
.hl-cta-btn-secondary-white .hl-cta-btn::after {
    border-color: #fff !important;
}
.hl-cta-btn-secondary-white .hl-cta-btn #hl-cb-text {
    color: #fff !important;
}
.hl-cta-btn-secondary-white .hl-cb-circle::before {
    background: #fff;
}

.hl-cta-btn-secondary-white .hl-cb-circle svg,
.hl-cta-btn-secondary-white .hl-cb-circle svg path {
    fill: #1870f3;
    stroke: #1870f3;
}

/* Secondary button Hover white */
.hl-cta-btn-hover-white .hl-cta-btn:hover::after{
	border-color: #fff;
}
.hl-cta-btn-hover-white .hl-cta-btn:hover::before{
	background: #fff !important;
}
.hl-cta-btn-hover-white .hl-cta-btn:hover::before{
	animation: none !important;
}

/* Secondary CTA button Dark */
.hl-cta-btn-secondary-dark .hl-cta-btn::before {
    background: transparent !important;
}
.hl-cta-btn-secondary-dark .hl-cta-btn::after {
    border-color: #061c3d !important;
}
.hl-cta-btn-secondary-dark .hl-cta-btn {
    background: #061c3d !important;
}
.hl-cta-btn-secondary-dark .hl-cta-btn #hl-cb-text {
    color: #fff !important;
}
.hl-cta-btn-secondary-dark .hl-cb-circle::before {
    background: #fff;
}

.hl-cta-btn-secondary-dark .hl-cb-circle svg,
.hl-cta-btn-secondary-dark .hl-cb-circle svg path {
    fill: #061c3d;
    stroke: #061c3d;
}
.hl-cta-btn-secondary-dark:hover .hl-cta-btn::after {
    border-color: #fff !important;
}
.hl-cta-btn-secondary-dark:hover .hl-cta-btn {
    background: transparent !important;
}
.hl-cta-btn-secondary-dark:hover .hl-cb-circle svg,
.hl-cta-btn-secondary-dark:hover .hl-cb-circle svg path {
    fill: #fff !important;
    stroke: #fff !important;
}
.hl-cta-btn-secondary-dark:hover .hl-cb-circle::before {
    background: #061c3d !important;
}

/* Hire Developers slick slider */
.hl-slick-slider {
    width: 100%;
    overflow: hidden;
}

/* Slider */
.hl-slick-box {
    padding: 24px;
    max-height: 263px;
    min-height: 263px !important;
    max-width: 310px;
    width: 100% !important;
    border-radius: 12px;
    border: 2px solid #1870f3;
    background: #fff;
    position: relative;
    overflow: hidden;
    margin: 11px;
    transition: all 0.3s ease-in-out;
}
.hl-sb-title {
    color: #061c3d;
    font-family: Inter;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.3em;
    text-transform: capitalize;
}
.hl-sb-icon {
    margin-top: 32px;
}
.hl-sb-btn-offset {
    margin-top: 93px;
    z-index: 2;
    position: relative;
    /* 	cursor: pointer; */
}
.hl-sb-btn {
    text-decoration: none;
    background: #1870f3;
    padding: 12px 20px;
    border-radius: 100px;
    display: inline-block;
    color: #fff;
    width: fit-content;
}
.hl-sb-btn {
    transform: translateX(-150px);
    display: none;
}
.hl-sb-btn a {
    text-decoration: none;
}

.hl-slick-box:hover .hl-sb-btn {
    display: block;
    -webkit-animation: hl-slick-slide-right 0.5s
        cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    animation: hl-slick-slide-right 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94)
        both;
    margin-bottom: 20px;
}
.hl-slick-box:hover .hl-sb-btn-offset {
    margin-top: 60px;
}
.hl-sb-cover-offset {
    position: absolute;
    right: 0;
    bottom: -150px;
    border-radius: 12px;
    overflow: hidden;
    display: none;
}
.hl-slick-box:hover .hl-sb-cover-offset {
    display: block;
    opacity: 0;
    z-index: 0;
    -webkit-animation: hl-slick-slide-top 0.5s
        cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    animation: hl-slick-slide-top 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

#hl-slick-slider-devs .slick-prev,
#hl-slick-slider-devs .slick-next {
    display: none !important;
}

.hl-sb-btn-offset a {
    text-decoration: none !important;
}
.hl-sb-btn-offset a:hover {
    color: #fff !important;
}

@media (max-width: 767px) {
    .hl-slick-box {
        max-width: 250px !important;
    }
    .hl-sb-title {
        font-size: 16px;
        line-height: 25px;
        font-weight: 600;
    }
}

@-webkit-keyframes hl-slick-slide-right {
    0% {
        -webkit-transform: translateX(-100px);
        transform: translateX(-100px);
    }
    100% {
        -webkit-transform: translateX(0px);
        transform: translateX(0px);
    }
}
@keyframes hl-slick-slide-right {
    0% {
        -webkit-transform: translateX(-100px);
        transform: translateX(-100px);
    }
    100% {
        -webkit-transform: translateX(0px);
        transform: translateX(0px);
    }
}

@-webkit-keyframes hl-slick-slide-top {
    0% {
        bottom: -150px;
        opacity: 1;
    }
    100% {
        bottom: -4.5px;
        opacity: 1;
    }
}
@keyframes hl-slick-slide-top {
    0% {
        bottom: -150px;
        opacity: 1;
    }
    100% {
        bottom: -4.5px;
        opacity: 1;
    }
}

@-webkit-keyframes color-change-2x {
    0% {
/*         background: rgb(24, 112, 243); */
        background: linear-gradient(
            90deg,
            rgba(24, 112, 243, 1) 0%,
            rgba(0, 255, 214, 1) 100%
        );
    }
    100% {
/*         background: rgb(0, 0, 0); */
        background: linear-gradient(
            90deg,
            rgba(0, 0, 0, 1) 0%,
            rgba(50, 44, 44, 1) 50%,
            rgba(65, 94, 111, 1) 100%
        );
    }
}
@keyframes color-change-cta-btn {
    0% {
/*         background: rgb(24, 112, 243); */
        background: linear-gradient(
            90deg,
            rgba(24, 112, 243, 1) 0%,
            rgba(0, 255, 214, 1) 100%
        );
    }
    100% {
/*         background: rgb(0, 0, 0); */
        background: linear-gradient(
            90deg,
            rgba(0, 0, 0, 1) 0%,
            rgba(50, 44, 44, 1) 50%,
            rgba(65, 94, 111, 1) 100%
        );
    }
}

/* Blog Post Page */
.single.single-post.post-template-default .wp-block-image, .single.single-post.post-template-default .wp-block-gallery{
	margin-left: 0;
	margin-right: 0;
}

.hl-cta-btn-ai::after {
    border-color: #ffffff;
}

.hl-cta-btn-ai::before {
    background: #ffffff;
}

.hl-cb-circle-ai::before {
    background: #19297C;
}

.hl-cb-circle-ai svg,
.hl-cb-circle-ai svg path {
    fill: #ffffff;
    stroke: #ffffff;
}

.hl-cta-btn #hl-cb-text {
	font-family: inter;
}

.hl-cta-btn-ai #hl-cb-text {
	color: #19297C;
}


/* Custom HL Cursor */

body, html {
/*     cursor: none; */
}

.hl-Cursor {
    pointer-events: none;
    position: fixed;
    display: block;
    border-radius: 50%;
    background-color: white;
    transform-origin: center center;
    top: 0;
    left: 0;
    z-index: 10000;
    mix-blend-mode: difference;
}

.hl-Cursor span {
    position: absolute;
    display: block;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background-color: white;
    transform-origin: center center;
    transform: translate(-50%, -50%);
}

.page-id-41209 #site-header, .page-id-41871 #site-header{
	display: none;
}


/* Blog cards shortcode grid ai  */
  .hlai-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    padding: 24px;
    font-family: 'Onest', sans-serif;
  }

  .hlai-card {
	  height: 100% !important;
    background-color: #ffffff;
    border: 1px solid var(--Gray-300, #E2E8F0);
    border-radius: 40px;
    padding: 18px;
    box-sizing: border-box;
    transition: border 0.4s ease-in-out;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .hlai-image-wrapper {
    position: relative;
    width: 100%;
    height: 380px;
  }
  
  @media (max-width: 1600px){
   .hlai-image-wrapper {
    height: 320px;
  }   
  }
  
  @media (max-width: 1460px){
   .hlai-image-wrapper {
    height: 290px;
  }   
  }
  
    @media (max-width: 1360px){
   .hlai-image-wrapper {
    height: 250px;
  }   
  }
    @media (max-width: 1300px){
   .hlai-image-wrapper {
    height: 230px;
  }   
  }

  .hlai-image-container {
    height: 100%;
    overflow: hidden;
    border-radius: 26px;
    position: relative;
    transition: box-shadow 0.3s ease;
  /*clip-path: path('evenodd, M0,0 H380 V380 H0 Z M350,350 A30,30 0 0,1 380,380 A30,30 0 0,1 350,350 Z');*/

  }

  .hlai-image-container img {
    width: 100%;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 0.6s ease !important;
  }


  .hlai-heading {
    font-size: 20px;
    font-weight: 700;
    text-transform: uppercase;
    color: #1A202C;
    margin: 16px 0 8px 0;
    text-align: left;

    font-family: 'Onest', sans-serif !important;
  }

  .hlai-excerpt {
    font-size: 20px;
    font-weight: 400;
    color: #718096;
    text-align: left;
    margin: 0;
  }
  
  @media (max-width: 1400px){
.hlai-heading, .hlai-excerpt {
font-size: 16px !important;
line-height: 22px !important;
}
  }

  .hlai-card:hover {
    border: 1px solid #0B2EE8;
    
box-shadow: 0 8px 20px rgba(30, 50, 180, 0.4);

  }


/*image hover effect*/
.hlai-image-container img {
  transition: transform 0.6s ease-in-out;
  transform: scale(1);
}

  .hlai-card:hover .hlai-image-container img {
    /*animation: hlai-jelly 0.6s ease;*/
    
   /*animation: hlai-jelly 0.6s ease-in-out;*/
animation: hlai-jelly 1s ease-in-out forwards;

  }

  @keyframes hlai-jelly {
    0% { transform: scale(1); }
    30% { transform: scale(1.15); }
    50% { transform: scale(1.1); }
    70% { transform: scale(1.13); }
    85% { transform: scale(1.12); }
    100% { transform: scale(1.13); }
  }


/*arrow icon hover effect*/
.hlai-arrow-icon {
  position: absolute;
  bottom: -3px;
  right: -3px;
  width: 40px;
  height: 40px;
  background-image: url('https://wordpress.hashlogics.com/wp-content/uploads/2025/05/Frame-44060.png');
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0;
  transform: scale(0.3) rotate(20deg);
  transition: opacity 0.4s ease, transform 0.4s ease;
  z-index: 2;
  will-change: transform, opacity;
}

.hlai-card:hover .hlai-arrow-icon {
  animation: hlai-arrow-jiggle 0.9s ease-in-out forwards;
  opacity: 1;
}

 @keyframes hlai-arrow-jiggle {
  0% {
    transform: scale(0.3) rotate(20deg);
    opacity: 0;
  }
  20% {
    transform: scale(1.3) rotate(10deg);
    opacity: 1;
  }
  40% {
    transform: scale(1) rotate(-12deg);
  }
  60% {
    transform: scale(1.1) rotate(6deg);
  }
  80% {
    transform: scale(1.05) rotate(-3deg);
  }
  100% {
    transform: scale(1) rotate(0deg);
  }
}


  /*@media (max-width: 768px) {*/
    @media (max-width: 1024px) {
    .hlai-container {
      grid-template-columns: repeat(2, 1fr);
    }
    
   .hlai-image-wrapper {
    height: 380px;
  }  
  }


    @media (max-width: 900px) {

   .hlai-image-wrapper {
    height: 320px;
  }  
  }
  
      @media (max-width: 768px) {

   .hlai-image-wrapper {
    height: 260px;
  }  
  }
  
        @media (max-width: 600px) {

   .hlai-image-wrapper {
    height: 210px;
  }  
  }


  /*@media (max-width: 480px) {*/
   @media (max-width: 560px) {
    .hlai-container {
      grid-template-columns: 1fr;
    }


   .hlai-image-wrapper {
    height: 280px;
  }  
  
  }
  
  
/*circular cut shape*/
.hlai-image-circular-cut-shape{
background: #fff;
width: 60px;
height: 60px;
position: absolute;
bottom: -12px;
right: -12px;
border-radius: 50px;
}

.hlai-image-circular-cut-shape::after, .hlai-image-circular-cut-shape::before {
 content: "";
 width: 25px;
 height: 25px;
 position: absolute;
}

.hlai-image-circular-cut-shape::after{
background: transparent;
/*background: red;*/
top: -25px;
right: 12px;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
/*border-radius: 50px;*/

box-shadow: 12px 12px 0 #fff;
}

.hlai-image-circular-cut-shape::before{
background: transparent;
/*background: red;*/
bottom: 12px;
left: -25px;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
/*border-radius: 50px;*/

box-shadow: 12px 12px 0 #fff;
}


/* Show the circular cut shape on card hover */

.hlai-image-circular-cut-shape {
  opacity: 0;
  /*transition: opacity 0.3s ease 0.2s;*/
  transition: opacity 0.3s ease 0.2s;
}
.hlai-card:hover .hlai-image-circular-cut-shape {
  opacity: 1;
}