.circle-container {
  position: relative;
  display: inline-block; /* Keeps element inline without affecting alignment */
}

.circle-container::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 200px;
  background-color: white;
  border-radius: 50%;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  transform: translate(-50%, -50%);
  z-index: -1; /* ✅ places the circle behind the icon/image */
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.circle-container:hover::before {
  transform: translate(-50%, -50%) scale(1.05);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}


.zpdivider-container .zpdivider-common:before, .zpdivider-container .zpdivider-common:after {
    content: '';
    position: absolute;
    width: 1500px;
    inset-block-start: 50%;
    height: 1px;
    border-block-start-width: 4px;
    border-block-end-width: 0;
    border-inline-start-width: 0;
    border-inline-end-width: 0;
    border-style: solid;
}
.zpdivider-container.zpdivider-line.zpdivider-width10, .zpdivider-container.zpdivider-text.zpdivider-width10, .zpdivider-container.zpdivider-icon.zpdivider-width10 {
    width: 3%;
}

 <div class="circle-container">
  <span>+</span>
</div>

<style>
.circle-container {
  width: 110px;               /* size of circle */
  height: 110px;
  background-color: white;    /* default white circle */
  border-radius: 50%;         /* makes it circular */
  display: flex;              /* center icon/text */
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;  /* smooth hover */
  cursor: pointer;
}
/* Simple forced hover -- overrides most other rules */
.cname {
  background-color: #fff !important;    /* normal state white */
  color: #000 !important;               /* normal text black */
  transition: background-color .18s ease, color .18s ease, transform .12s ease;
  position: relative;                   /* keep normal stacking */
}

/* Hover/Focus state */
.cname:hover,
.cname:focus {
  background-color: #F42367 !important; /* pink fill */
  color: #fff !important;               /* white text */
  transform: translateY(-2px);
}

/* Ensure all child text inherits the white color on hover */
.cname:hover * {
  color: #fff !important;
}

/* Links inside .cname should also change */
.cname a { color: inherit; }
.cname:hover a { color: inherit !important; }
.hover-card {
  position: relative;
  width: 300px;       /* adjust as needed */
  height: 200px;      /* adjust as needed */
  background-color: #F42367; /* example background */
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  cursor: pointer;
  text-align: center;
  color: white;
  font-family: 'Poppins', sans-serif;
}

.hover-card h2,
.hover-card p {
  margin: 0;
  transition: transform 0.6s ease;
  color: white;
}

/* Heading */
.hover-card h2 {
  font-weight: 700; /* bold */
  font-size: 1.5rem; /* adjust as needed */
  line-height: 1.2;
}

 
.hover-card {
  position: relative;
  width: 300px;
  height: 200px;
  background-color: #F42367;
  overflow: hidden;
  cursor: pointer;
  font-family: 'Poppins', sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: white;
}

.hover-card .content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.hover-card h2,
.hover-card p {
  margin: 0;
  transition: transform 0.6s ease;
  color: white;
}

.hover-card h2 {
  font-weight: 700;
  font-size: 1.5rem;
}

.hover-card p {
  font-weight: 400;
  font-size: 1rem;
}

/* Diverging hover effect */
.hover-card:hover h2 {
  transform: translateY(-5px);
}

.hover-card:hover p {
  transform: translateY(5px);
}
.white-circle {
  width: 218px;          /* adjust size */
  height: 218px;
  background-color: #ffffff;
  border-radius: 50%;
  display: flex; /* ensures it takes its own space */
  align-items:center;
  justify-content:center;
  margin: 20px auto;     /* centers horizontally and adds spacing from other elements */
}
@media (max-width:991px) {
   .white-circle {
  width: 160px;          /* adjust size */
  height: 160px;
    }
}
.white-circle .zpelem-image {
 margin-block-start:0px !important;   
}
.zpimage-container figure {
    position: relative;
    width: 100%;
    height: 100%;
}

.zpimage-container  a.zpimage-anchor {
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    content: '';
    z-index: 99;
}
.zpimage-container picture{
    width:100%;
    height:100%;
    display:block;
}
.zpimage-caption.zpimage-caption-align-center{
    align-items: center;
    justify-content: center;
    display: flex !important;
}
 /* Wrapper animation */
/* ICON LOADING EFFECT */
/* ICON LOAD REVEAL EFFECT */
.zpelem-icon.pink-icon .zpicon-container {
  position: relative;
  overflow: hidden;
}

/* Mask layer that reveals the icon */
.zpelem-icon.pink-icon .zpicon-container::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #ffffff; /* match section background */
  animation: zpIconReveal 1.2s ease forwards;
  z-index: 2;
  pointer-events: none;
}

/* Smooth fade + scale on load */
.zpelem-icon.pink-icon {
  animation: zpIconFade 0.6s ease-out forwards;
}

/* Animations */
@keyframes zpIconReveal {
  from {
    transform: translateY(0%);
  }
  to {
    transform: translateY(100%);
  }
}

@keyframes zpIconFade {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}


/* CUSTOM CSS */
body {
 line-height:28px;   
}
.zscustom-hero {
  position:relative;
  background: linear-gradient(180deg, #E1D6FA 0%, #ECD9DF 100%);
}
.zscustom-hero:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    background: url(../home-banner-dot.png) repeat 0 0;
    background-size: 16px auto;
    height: 100%;
    width: 100%;
}
.zscustom-listing ul {
 list-style:none;
 display:flex;
 flex-direction:row;
 flex-wrap:wrap;
 padding-inline-start:0px;
}
.zscustom-listing ul li {
 padding:0px;
 margin:0 5px 12px 5px; 
 flex:0 0 auto;
}
.zscustom-listing ul li a {
 border:1px solid #898989;
 padding:7px 11px;
 display:inline-block;
 cursor:pointer;
 color:#000;
 font-family:'Poppins', sans-serif;
 font-size:12px;
 font-weight:400;
 line-height:28px;
 border-radius:5px;
 background:#ffffff;
}
.zscustom-listing ul li:hover a {
  background:#000000;
  color:#ffffff;
  cursor:pointer;
}
.zscustom-portfolio-box {
  overflow:hidden;
  position:relative;
  min-height:410px;
}
.zscustom-portfolio-box:after {
 content:'';
 position:absolute;
 left:0px;
 right:0px;
 top:0px;
 bottom:0px;
 width:100%;
 height:100%;
 background:#f42367;
 opacity:0;
 z-index:1;
}
.zscustom-portfolio-box:hover:after, .zscustom-portfolio-box:hover .zscustom-portfolio-box-txt {
 opacity:1;
 transition: all ease-in-out 0.3s;
}
.zscustom-portfolio-box-txt {
 position:relative;
 z-index:2;
 opacity:0;
}
.zscustom-portfolio-box-txt a {
  color:#ffffff;  
}
@media (min-width:992px) {
.theme-navigation-and-icons .theme-menu-area .theme-menu ul li:hover ul {
 border-block-start:5px solid #f42367;
 border-radius:15px;
 padding-block-start:0px;
}
.theme-branding-info .theme-logo-parent a picture img {
 width:232px !important;
 height:32px !important;
}
.theme-header-animate .theme-branding-info .theme-logo-parent a picture img {
  width:186px !important;
 height:26px !important;
    }
.zphero h2 {
 line-height:68px;   
}
.theme-pages-full-stretch .zpcontainer {
    width: 100%;
    max-inline-size: 1320px;
    padding-inline-start: 15px;
    padding-inline-end: 15px;
 }
.theme-header .zpcontainer {
    max-inline-size:none;
    padding-inline-start:15px;
    padding-inline-end:15px;
}

.zpheader-style-04 .theme-navigation-and-icons .theme-menu-area .theme-menu ul {
    justify-content:center;
    }
.theme-navigation-and-icons .theme-menu-area .theme-menu ul li a {
    font-weight:500;
    }
.theme-banner.theme-pages-full-stretch .zphero .zphero-slides .zscustom-hero .zpcontainer {
    padding-inline-start: 100px;
    padding-inline-end: 100px;
    max-inline-size:none;
}

.zscustom-banner-box {
   max-width:565px;
   margin:0 auto;
}
.zscustom-listing ul li a {
 font-size:14px; 
 padding:7px 13px;
}
.zscustom-listing ul li {
 margin:0 7px 18px 7px; 
}
.theme-navigation-and-icons .theme-menu-area .theme-menu ul li a {
 padding:30px 0px;   
}
}

.zscustom-banner-row {
 justify-content:space-between !important;   
}
.zscustom-heading-decoration .zpheading-style-type1:after, .zscustom-heading-decoration .zpheading-style-type3:after{
  background:#F42367;
  width:47px;
  height:3px;
}
.zscustom-heading-decoration .zpheading-style-type3:after{
 height:100px;   
}

.theme-navigation-and-icons .theme-menu-area .theme-menu ul li ul li {
 background:transparent;   
}
.zpheader-style-04 .theme-header .zpcontainer {
 padding-block-start:0px;
 padding-block-end:0px;
}

.theme-navigation-and-icons .theme-menu-area .theme-menu ul li:first-child > a{
  border-top-left-radius:15px !important;
  border-top-right-radius:15px !important;
}
.theme-navigation-and-icons .theme-menu-area .theme-menu ul li:last-child a{
  border-bottom-left-radius:15px !important;
  border-bottom-right-radius:15px !important;
}
.zscustom-list ul li {
 padding-block-start:0;
 padding-block-start:15px;
}
.zscustom-list ul li::marker {
  color: #ff5834; 
}
.zscustom-hover-column:hover {
  border-color:transparent;
  background:#F42367;
  transition:all ease-in 0.3s;
  color:#ffffff !important;
}
.zscustom-hover-column:hover .zpelem-iconheadingtext h5, 
.zscustom-hover-column:hover .zpicon-container .zpicon-text-container, 
.zscustom-hover-column:hover .zpelem-iconheadingtext .zpicon-common svg,
.zscustom-hover-column:hover .zpicon-container .zpicon-common .custom-icon,
.zscustom-hover-column:hover .zpbutton.zpbutton-type-link {
 color:#ffffff !important;
 fill:#ffffff;
 stroke:#ffffff;
}
.zphero-banner-style-01 h1.zpheading, .zshero-banner-style-01 h1.zpheading {
  font-family: "Poppins",sans-serif;
  font-weight:500;
  line-height:1.2;
  font-size:50px;
}
.zphero-banner-style-01 .zpelem-text, .zshero-banner-style-01 .zpelem-text {
 font-family: "Poppins",sans-serif;
 font-weight:400;
 font-size:16px;
 line-height:28px;
}
.zscustom-footer-section {
    position:sticky;
    bottom:0px;
    left:0px;
    width:100%;
    z-index:1; 
}
.zsfooter-form-section {
    position:relative;
    z-index:2;
}
@media (max-width:640px) {
 .zsreorder {
 order:-1;  
}   
}

.zscustom-overlay-anchor-box {
  position:relative;
  overflow:hidden;
  border-radius:10px;
}
.zscustom-overlay-anchor-image {
 position:relative;
 z-index:1;
}
.zscustom-overlay-anchor-box:after {
 position:absolute;
 left:0px;
 opacity:0;
 right:0px;
 top:0px;
 bottom:0px;
 width:100%;
 height:100%;
 background:rgba(0,0,0,0);
 pointer-events: none;
 z-index:2;
}
.zscustom-overlay-anchor-box:hover:after {
 opacity:1; 
 transition:all ease-in-out 0.3s;
}
.zscustom-overlay-anchor-box:hover > .zscustom-overlay-anchor {
  opacity:1;
  transition:all ease-in-out 0.3s
}
.zscustom-overlay-anchor a {
 color:#ffffff;
}
.zscustom-overlay-anchor {
 cursor:pointer;
 display:flex;
 align-items:center;
 justify-content:center;
 position:absolute;
 padding-inline:35px;
 opacity:0;
 width:100%;
 top: 50%;
 z-index: 3; 
 font-size:18px;
 transform: translateY(-50%);
}

.blacklink {
  color: #333;
  font-size: 14px;
  line-height: 30px;
  text-decoration: none;
  transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.blacklink:hover {
  opacity: 0.85;
}

.footer-container .zpelem-col a {
    color: #000;
}

.footer-container .zpelem-col a:hover {
    color: #F42367;
}

.theme-blog-category-heading {
    font-size: 16px;
    font-weight:500;
}

a.theme-blog-side-menu-link, .theme-blog-count {
    font-size: 14px;
}
.theme-blog-part.theme-blog-post-header-area .theme-blog-heading{
    font-size:26px;
    font-weight: 500
}