#astroid-backtotop{background:rgba(113, 44, 249, 1);padding:15px;}#astroid-backtotop > i{font-size:20px;color:rgba(255, 255, 255, 1);width:20px;height:20px;line-height:20px;text-align:center;}[data-bs-theme=dark] #astroid-backtotop{background:rgba(148, 97, 251, 1);}[data-bs-theme=dark] #astroid-backtotop > i{color:rgba(255, 255, 255, 1);}.astroid-social-icons{font-size:16px;}.astroid-social-icons a{color:!important;}.astroid-social-icons a:hover{color:!important;}[data-bs-theme=dark] .astroid-social-icons a{color:!important;}[data-bs-theme=dark] .astroid-social-icons a:hover{color:!important;}#tb-60cd7e0c71de1c5436765{background-color:rgba(238, 238, 238, 1);}[data-bs-theme=dark] #tb-60cd7e0c71de1c5436765{background-color:rgba(35, 35, 35, 1);}.astroid-logo > .astroid-logo-default{max-height:90px;}.astroid-logo > .astroid-logo-mobile{max-height:25px;}.astroid-logo > .astroid-logo-sticky{max-height:50px;}.astroid-logo > .astroid-logo-mobile{max-height:25px;}#s-62893ba1bab6a842422623 .astroid-heading{font-family:"Gotham-Black";}#s-62893ba1bab6a842422623{border-radius:rounded-0px;}#s-62893ba1bab6a842422623 .carousel-item{height:450px;}#hm-6220aae01c9e0465651359{background-color:rgba(255, 255, 255, 1);}#n-60c87ff838c84419607639 .nav-link{color:rgba(110, 109, 122, 1);}#n-60c87ff838c84419607639 .nav-link:hover{color:rgba(113, 44, 249, 1);}[data-bs-theme=dark] #n-60c87ff838c84419607639 .nav-link{color:rgba(179, 179, 180, 1);}[data-bs-theme=dark] #n-60c87ff838c84419607639 .nav-link:hover{color:rgba(148, 97, 251, 1);}#n-60cc3c205abb0423166442 .nav-link{color:rgba(110, 109, 122, 1);}#n-60cc3c205abb0423166442 .nav-link:hover{color:rgba(113, 44, 249, 1);}[data-bs-theme=dark] #n-60cc3c205abb0423166442 .nav-link{color:rgba(179, 179, 180, 1);}[data-bs-theme=dark] #n-60cc3c205abb0423166442 .nav-link:hover{color:rgba(148, 97, 251, 1);}#i-60c743f8d0d97881129306 .astroid-icon-item{font-size:18px;}#i-60c743f8d0d97881129306 .astroid-icon-item > a{color:rgba(94, 94, 94, 1);}#i-60c743f8d0d97881129306 .astroid-icon-item > a:hover{color:rgba(113, 44, 249, 1);}[data-bs-theme=dark] #i-60c743f8d0d97881129306 .astroid-icon-item > a{color:rgba(235, 235, 235, 1);}[data-bs-theme=dark] #i-60c743f8d0d97881129306 .astroid-icon-item > a:hover{color:rgba(148, 97, 251, 1);}#d-60cd57b521903050966751 .divider-content{border-top:1px solid rgba(0, 0, 0, 0.1);}[data-bs-theme=dark] #d-60cd57b521903050966751 .divider-content{border-color:rgba(255, 255, 255, 0.1);}#n-60cd7bc3146df041317281 .nav-link{color:rgba(110, 109, 122, 1);padding:0px 20px 0px 0px}#n-60cd7bc3146df041317281 .nav-link:hover{color:rgba(113, 44, 249, 1);}[data-bs-theme=dark] #n-60cd7bc3146df041317281 .nav-link{color:rgba(179, 179, 180, 1);}[data-bs-theme=dark] #n-60cd7bc3146df041317281 .nav-link:hover{color:rgba(148, 97, 251, 1);}#fs-1528971627712{background-color:rgba(9, 30, 53, 1);color:rgba(255, 255, 255, 1);}[data-bs-theme=dark] #fs-1528971627712{background-color:rgba(35, 35, 35, 1);}#as-62220880cb012c62873944{background-color:rgba(9, 30, 53, 1);}.astroid-offcanvas {width: 320px;} .astroid-offcanvas .dropdown-menus {width: 320px !important;}.st-effect-2.astroid-offcanvas-open .astroid-content{-webkit-transform:translate3d(320px, 0, 0);transform:translate3d(320px, 0, 0);}.st-effect-2.astroid-offcanvas-open .st-effect-2.astroid-offcanvas{-webkit-transform:translate3d(0%, 0, 0);transform:translate3d(0%, 0, 0);}.astroid-offcanvas-opened .astroid-wrapper{background:rgb(173, 181, 189);}.st-effect-2.astroid-offcanvas{z-index:0 !important;}.st-effect-2.astroid-offcanvas-open .st-effect-2.astroid-offcanvas{visibility: visible; -webkit-transition:-webkit-transform 0.5s;transition:transform 0.5s;}.st-effect-2.astroid-offcanvas::after{display:none;}.offcanvasDirRight .st-effect-2.astroid-offcanvas-open .astroid-content{-webkit-transform:translate3d(-320px, 0, 0);transform:translate3d(-320px, 0, 0);}.mobilemenu-slide.astroid-mobilemenu{visibility:visible;-webkit-transform:translate3d(-100%, 0, 0);transform:translate3d(-100%, 0, 0);}.mobilemenu-slide.astroid-mobilemenu-open .mobilemenu-slide.astroid-mobilemenu {visibility:visible;-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);}.mobilemenu-slide.astroid-mobilemenu::after{display:none;}body, .body{font-weight:400;text-transform:none;font-size:16px;line-height:1.7em;font-family:Arial, Helvetica, sans-serif;}h1, .h1{font-weight:600;text-transform:none;font-size:2.5rem;line-height:1.2em;font-family:"Gotham-Bold", Arial, Helvetica, sans-serif;}h2, .h2{font-weight:600;text-transform:none;font-size:2.0814rem;line-height:1.2em;font-family:"Gotham-Bold", Arial, Helvetica, sans-serif;}h3, .h3{font-weight:600;text-transform:none;font-size:1.7329rem;line-height:1.2em;font-family:"Gotham-Bold", Arial, Helvetica, sans-serif;}h4, .h4{font-weight:600;text-transform:none;font-size:1.4427rem;line-height:1.2em;font-family:"Gotham-Black", Arial, Helvetica, sans-serif;}h5, .h5{font-weight:600;text-transform:none;font-size:1.2011rem;line-height:1.2em;font-family:"Gotham-Black", Arial, Helvetica, sans-serif;}h6, .h6{font-weight:400;text-transform:none;font-size:1.1rem;line-height:1.5em;font-family:"Gotham-Black", Arial, Helvetica, sans-serif;}.astroid-nav > li > .as-menu-item, .astroid-sidebar-menu > li > .nav-item-inner > .as-menu-item, .astroid-mobile-menu > .nav-item > .as-menu-item{font-weight:400;text-transform:none;font-size:15px;line-height:1.7em;font-family:"Gotham-Bold", Arial, Helvetica, sans-serif;}.nav-submenu-container .nav-submenu > li, .jddrop-content .megamenu-item .megamenu-menu li, .nav-submenu, .astroid-mobile-menu .nav-child .menu-go-back, .astroid-mobile-menu .nav-child .nav-item-submenu > .as-menu-item, .nav-item-submenu .as-menu-item{font-weight:400;text-transform:none;font-size:15px;line-height:2em;font-family:"Gotham-Black", Arial, Helvetica, sans-serif;}.top-bars{font-weight:400;text-transform:none;font-size:14px;line-height:1em;font-family:"Gotham-Book", Arial, Helvetica, sans-serif;}.container, .container-sm, .container-md, .container-lg, .container-xl, .container-fluid, .astroid-layout.astroid-layout-boxed .astroid-wrapper {max-width: 1920px;}:root, [data-bs-theme="light"]{--bs-body-bg:rgba(255, 255, 255, 1);--bs-body-color:rgba(110, 109, 122, 1);--bs-link-color:rgba(51, 51, 51, 1);--bs-link-hover-color:rgba(176, 148, 85, 1);--bs-heading-color:rgba(58, 58, 58, 1);--as-header-text-color:rgba(250, 250, 250, 1);--as-header-link-hover-color:rgba(217, 176, 0, 1);--as-header-bg:rgba(9, 30, 53, 1);--as-stick-header-bg-color:rgba(9, 30, 53, 1);--as-stick-header-menu-link-color:rgba(255, 255, 255, 1);--as-stick-header-menu-link-hover-color:rgba(214, 164, 0, 1);--as-stick-header-menu-link-active-color:rgba(214, 164, 0, 1);--as-main-menu-link-color:rgba(250, 250, 250, 1);--as-main-menu-link-hover-color:rgba(214, 164, 0, 1);--as-main-menu-link-active-color:rgba(214, 164, 0, 1);--as-dropdown-bg-color:rgba(253, 253, 253, 1);--as-dropdown-link-color:rgba(110, 109, 122, 1);--as-dropdown-menu-link-hover-color:rgba(113, 44, 249, 1);--as-dropdown-menu-active-link-color:rgba(0, 0, 0, 1);--as-mobile-menu-text-color:rgba(110, 109, 122, 1);--as-mobile-backgroundcolor:rgba(248, 247, 244, 1);--as-mobile-menu-link-color:rgba(110, 109, 122, 1);--as-mobile-menu-active-link-color:rgba(113, 44, 249, 1);--as-mobile-menu-active-icon-color:rgba(0, 0, 0, 1);--as-mobile-menu-icon-color:rgba(110, 109, 122, 1);--as-mobilemenu-backgroundcolor:rgba(248, 247, 244, 1);--as-mobilemenu-menu-text-color:rgba(110, 109, 122, 1);--as-mobilemenu-menu-link-color:rgba(110, 109, 122, 1);--as-mobilemenu-menu-active-link-color:rgba(113, 44, 249, 1);--as-mobilemenu-menu-icon-color:rgba(110, 109, 122, 1);--as-mobilemenu-menu-active-icon-color:rgba(54, 54, 54, 1);}[data-bs-theme="dark"]{--bs-body-bg:rgba(40, 41, 40, 1);--bs-body-color:rgba(179, 179, 180, 1);--bs-link-color:rgba(255, 255, 255, 1);--bs-link-hover-color:rgba(148, 97, 251, 1);--bs-heading-color:rgba(245, 245, 245, 1);--as-header-text-color:rgba(224, 224, 224, 1);--as-header-bg:rgba(51, 51, 51, 1);--as-stick-header-bg-color:rgba(51, 51, 51, 1);--as-stick-header-menu-link-color:rgba(184, 184, 185, 1);--as-stick-header-menu-link-hover-color:rgba(148, 97, 251, 1);--as-stick-header-menu-link-active-color:rgba(255, 255, 255, 1);--as-main-menu-link-color:rgba(180, 180, 181, 1);--as-main-menu-link-hover-color:rgba(148, 97, 251, 1);--as-main-menu-link-active-color:rgba(255, 255, 255, 1);--as-dropdown-bg-color:rgba(35, 35, 35, 1);--as-dropdown-link-color:rgba(172, 172, 173, 1);--as-dropdown-menu-link-hover-color:rgba(148, 97, 251, 1);--as-dropdown-menu-active-link-color:rgba(255, 255, 255, 1);--as-mobile-menu-text-color:rgba(162, 162, 163, 1);--as-mobile-backgroundcolor:rgba(51, 51, 51, 1);--as-mobile-menu-link-color:rgba(172, 172, 173, 1);--as-mobile-menu-active-link-color:rgba(148, 97, 251, 1);--as-mobile-menu-active-icon-color:rgba(255, 255, 255, 1);--as-mobile-menu-icon-color:rgba(183, 183, 185, 1);--as-mobilemenu-backgroundcolor:rgba(51, 51, 51, 1);--as-mobilemenu-menu-text-color:rgba(174, 174, 175, 1);--as-mobilemenu-menu-link-color:rgba(190, 190, 191, 1);--as-mobilemenu-menu-active-link-color:rgba(148, 97, 251, 1);--as-mobilemenu-menu-icon-color:rgba(186, 186, 187, 1);--as-mobilemenu-menu-active-icon-color:rgba(255, 255, 255, 1);}.items-leading .article-title .page-header h2{font-size:32px;}.items-row .article-title .page-header h2{font-size:26px;}.astroid-heading
{
  text-transform:uppercase;
  -webkit-text-stroke-color: #ffffff;
  -webkit-text-stroke-width: 2px;
}

.btn-gold {
  color: #fff !important;
  background-color: #b09455 !important;
  border-color: #b09455 !important;
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 700;
  border-radius: 10px;
  padding: 10px;
  width: 100%;

}
.btn-gold:hover {

  background-color: #69c5d1 !important;
  border-color: #69c5d1 !important;


}

.btn-gold2:hover {

  background-color: #69c5d1 !important;
  border-color: #69c5d1 !important;


}
.btn-lightblue {
  color: #fff !important;
  background-color: #69c5d1 !important;
  border-color: #69c5d1 !important;
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 700;
  border-radius: 10px;
  padding: 10px;
  width: 100%;
  vertical-align: middle;
  text-shadow: none;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  transition: all 0.2s;
  text-align: center;
  margin-top: 10px;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 10px;
  padding-right: 10px;
  white-space: normal;
  display: inline-block !important;

}

.btn-gold2 {
  color: #fff !important;
  background-color: #b09455 !important;
  border-color: #b09455 !important;
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  border-radius: 10px;
  padding: 10px;
  width: 100%;
  margin-top: 5px;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 10px;
  padding-right: 10px;
  white-space: normal;
  display: inline-block !important;

}




.loginmod1 {
  width: 95%;
  padding: 15px 10px 15px 10px !important;
  background: rgba(9, 30, 53, 0.8);
  margin: 10px;
  border-radius: 5px;
  color: white;

}

.cb_template,
.form-control-plaintext {
  color: #fff !important;
}

.loginmod1 h3 {
  color: white;
  text-align: center;
}

.homeh2 h2,
.dashboard h2 {
  color: white;
  background: rgba(9, 30, 53, 1);
  text-align: center;
  text-transform: uppercase;
  font-weight: 900;
}



.astroid-dashboard {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  /* Center the items horizontally */
  gap: 10px;
  margin: 0 auto;
  /* Center the entire container */
  max-width: 100%;
  /* Ensure the container does not overflow */
  padding: 20px;
  /* Optional padding */
}

.dashboard-button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 16%;
  /* Default width for larger screens */
  min-width: 150px;
  /* Minimum width to avoid too small buttons */
  aspect-ratio: 1 / 1;
  /* Maintain a width-to-height ratio */
  background-image: url('https://pps1.integritycomply.co.za/images/buttons/PPS_Circles.webp');
  /* Replace with the path to your background image */
  background-size: cover;
  background-position: center;
  color: white;
  /* Text color */
  text-decoration: none;
  text-align: center;
  font-size: calc(9px + 0.5vw);
  /* Dynamic font size */
  border-radius: 5px;
  /* Optional: rounded corners */
  margin: 10px;
  /* Spacing between buttons */
  position: relative;
  overflow: hidden;
}

.dashboard-button span {
  z-index: 1;
  position: relative;
}

/* Media queries for responsiveness */
@media (max-width: 1200px) {
  .dashboard-button {
    width: 30%;
    /* 3 items in a row */
  }
}

@media (max-width: 768px) {
  .dashboard-button {
    width: 45%;
    /* 2 items in a row */
  }
}

@media (max-width: 480px) {
  .dashboard-button {
    width: 100%;
    /* 1 item per row */
  }
}




.divTable {
  display: table;
  width: 100%;
}

.divTableRow {
  display: table-row;
}

.divTableHeading {
  background-color: #EEE;
  display: table-header-group;
}

.divTableCell,
.divTableHead {
  border: 1px solid #99999900;
  display: table-cell;
  padding: 3px 10px;
  background-color: rgba(9, 30, 53, 0.8);
  color: #b09455;
}

.divTableHeading {
  background-color: #EEE;
  display: table-header-group;
  font-weight: bold;
}

.divTableFoot {
  background-color: #EEE;
  display: table-footer-group;
  font-weight: bold;
}

.divTableBody {
  display: table-row-group;
}

.hikashop_subcontainer,
.hikashop_category_image_container {
  aspect-ratio: 1 / 1;
  /* Ensures the card is always square */
}


/* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */

.card-container {
  display: flex;
  flex-wrap: wrap;  /* Allows wrapping for smaller screens */
  justify-content: center;  /* Centers the cards horizontally */
  gap: 20px;  /* Space between cards */
  padding: 20px;
  width: 100%;
}
.card-container h3
{
  color: #fff;
  overflow: hidden;
    /* Ensures images and content stay circular */
}
.flip-card {
  background-color: transparent;
  width: 400px;  /* Fixed width for consistent shape */
  height: 400px; /* Ensure a fixed height to maintain circular shape */
  perspective: 1000px;
  border-radius: 50%;
  overflow: hidden; /* Ensures content inside remains circular */
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  backface-visibility: hidden;
  flex-direction: column;
  border-radius: 50%;
  overflow: hidden; /* Ensures images and content stay circular */
  padding: 15px;
}

.flip-card-front {
  border: #091E35 solid .7rem;
    padding: .3rem !important;
    background: rgb(137, 137, 137) !important;
  
}
.flip-card-front-content {

    position: relative;
    background: #091E35;
    border-radius: 50%;
    overflow: hidden;
    align-items: center;
    justify-content: center;
    display: flex;
    height: 100%;
    width: 100%;
    
    border: #091E35 solid .6rem;
  
  
}


.flip-card-back {
  background-color: #b09455;
  color: white;
  transform: rotateY(180deg);
}

/* Responsive layout for mobile screens */
@media (max-width: 768px) {
  .card-container {
    flex-direction: column;  /* Stack cards vertically on smaller screens */
    align-items: center;  /* Center cards when stacked */
  }
}

/* #################################################### */
/* ####               Hika Categories               ### */
/* #################################################### */

.hikashop_subcontainer {
  border-radius: 50% !important;
  border: #091E35 solid .7rem;
  padding: .3rem !important;
  background: rgb(137, 137, 137) !important;

}
.hk-row-fluid{justify-content: center !important;}

.category_pps {
  width: 100% !important;
  height: 100% !important;
}

/* #################################################### */
/* ####                  Quote Box                  ### */
/* #################################################### */

.quote-box {
   display: flex;
    position: relative;
    padding: 20px;
    font-size: 18px;
    font-style: italic;
    background-color: #366c7f;
    color:white;
    border-left: 5px solid #b09455;
  
    width: 60%;
    justify-content: center;
    border-radius: 3rem;
}

.quote-box::before {
    content: "“";
    font-size: 7rem;
    position: absolute;
    top: 3px;
    left: -10px;
    color: #b09455;
    
}

.quote-box::after {
    content: "”";
    font-size: 7rem;
    position: absolute;
    bottom: -15px;
    right: -2px;
    color: #b09455;
    font-weight: 400;
}
.quote-box::before, .quote-box::after {
    font-family: 'Gotham Black', sans-serif;
    font-weight: 900; /* Ensures extra bold styling */
    
}

/* #################################################### */
/* ####               Kate AI Bot                   ### */
/* #################################################### */


 .avatar-container {
   position: relative;
   width: 90%;
  
   margin: auto;
   text-align: center;
 }

 .avatar-section {
  display: flex;
  align-items: flex-start; /* Align avatar and bubbles at the top */
  position: relative;
  width: 100%;
}

  
    .avatar {
      width: 30%;
      border-radius: 50%;
      display: block;
      border: #b09455 solid 8px;
      
    }
  
  .speech-container {
  display: flex;
  flex-direction: column; /* Stack speech bubbles vertically */
  align-items: flex-start; /* Align bubbles properly */
  margin-left: 15px; /* Space between avatar and speech bubbles */
}


  .speech-bubble {
  --r: 1em;  /* the radius */
  --t: 1.5em; /* the size of the tail */
  
  
  padding: 1em;
  border-inline: var(--t) solid #0000;
  border-radius: calc(var(--r) + var(--t))/var(--r);
  mask: 
    radial-gradient(100% 100% at var(--_p) 0,#0000 99%,#000 102%) 
      var(--_p) 100%/var(--t) var(--t) no-repeat,
    linear-gradient(#000 0 0) padding-box;
  background: linear-gradient(135deg,#366c7f,#091E35) border-box;
  color: #fff;
   opacity: 0;
   margin-bottom: 15px;
}
.left {
  --_p: 0;
  border-bottom-left-radius: 0 0;
  place-self: start;
}



  
    .speech-bubble::after {
      content: "";
      position: absolute;
      left: -10px;
      top: 50%;
      transform: translateY(-50%);
      border-width: 10px;
      border-style: solid;
      border-color: transparent white transparent transparent;
    }
  
    .avatar-section:hover .speech-bubble {
      opacity: 1;
    }
  
    @media (max-width: 600px) {
      .avatar-section {
        flex-direction: column;
        align-items: center;
      }
      .avatar {width:60%;}
  
      .speech-bubble {
        position: static;
        max-width: 90%;
        margin-top: 10px;
        opacity: 1;
      }
  
      .speech-bubble::after {
        display: none;
      }
    }

/* #################################################### */
/* ####               infographic                   ### */
/* #################################################### */

.infographic {
             display: flex;
            align-items: center;
            width: 50%;
            
            background: #fff;
            border-radius: 50px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            overflow: hidden;
            padding: 10px 20px;
            position: relative;
            border: 5px solid #366c7f;
        }
       .info-circle {
            width: 70px;
            height: 70px;
           
            background: #366c7f;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 24px;
            font-weight: bold;
            position: absolute;
            left: 0px;
            top: 50%;
            transform: translateY(-50%);
            border: 5px solid #fff;
            z-index: 10;
            color: #fff;
        }

        .info-content {
            padding-left: 80px;
            flex: 1;
        }
        .info-content p {
            margin: 10px 0 0;
            font-size: 14px;
            color: #000000;
        }
        @media (max-width: 768px) {
            .infographic {
                flex-direction: column;
                align-items: center;
                text-align: center;
                padding: 20px;
                width: 90%;
            }
       .info-circle {
        position: static;
        display: flex;              /* keep as flex to maintain centering */
        justify-content: center;    /* centers text horizontally */
        align-items: center;        /* centers text vertically */
        transform: none;
        margin: 0 auto 10px;        /* centers the circle within its container */
        width: 120px;
        height: 120px;
    }
           
            .info-content {
                padding-left: 0;
            }
        }
        .infographic.right .info-circle {
            
            background: #091E35;
        }
       
        .infographic.right {
           
            border: 5px solid #091E35;
        }





/* #################################################### */
/* ####               Circle Container              ### */
/* #################################################### */

.pps_circle_container {
  display: grid;
  grid-template-columns: repeat(5, 1fr); /* Default: 5 cards in a row */
  gap: 20px; /* Space between grid items */
  width: 100%;
}
.pps_circle_card1 {
  
  
  border: #091E35 solid .7rem;
    padding: .3rem !important;
    background: rgb(137, 137, 137) !important;
  
  position: relative;
  
  border-radius: 50%;
  overflow: hidden;
  text-align: center;
  aspect-ratio: 1 / 1;
  width: 100%;
  transition: transform 0.3s ease;
  

}

.pps_circle_card {
  position: relative;
  background: #091E35;
  border-radius: 50%;
  overflow: hidden;
  text-align: center;
  aspect-ratio: 1 / 1;
  
  transition: transform 0.3s ease;
  border: #091E35 solid .6rem;

}

.pps_circle_card:hover {
  transform: scale(1.05);
}

.pps_circle_card img {
  width: 100%;
  height: 50%;
  object-fit: cover;
  border-top-left-radius: 50%;
  border-top-right-radius: 50%;
}

.pps_circle_card_content {
  position: relative;
  padding: 10px;
  height: 50%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-size: 1.1rem;
  margin: 0;
  line-height: 1.2;
  color: #ffffff;
}

.pps_circle_card_content h3 {
  margin: 10px 0;
}
/*
.pps_circle_card_content .pps_circle_button {
  margin-top: auto;
  padding: 10px 15px;
  background: #007bff;
  color: white;
  border: none;
  border-radius: 20px;
  cursor: pointer;
  font-size: 16px;
  transition: background 0.3s;
}
*/
.pps_circle_card_content .pps_circle_button:hover {
  background: #0056b3;
}
.pps_circle_overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  opacity: 0;
  border-radius: 50%; /* Ensures circular shape */
  font-size: 0.8rem;
  transition: opacity 0.3s;
  overflow: hidden; /* Prevents text or content from spilling out */
  text-align: center; /* Centers the text horizontally */
}

.pps_circle_overlay p {
  padding: 10px; /* Adds space between text and edges */
  margin: 0; /* Avoid extra spacing */
  text-align: center;
  line-height: 1.2; /* Keeps text readable */
  word-wrap: break-word; /* Ensures long words wrap within the circle */
 
  max-width: 90%; /* Ensures text stays within circular boundary */
  box-sizing: border-box; /* Includes padding in width calculations */
}



.pps_circle_card:hover .pps_circle_overlay {
  opacity: 1;
}

@media (min-width: 650px) {
  .hkc-md-2, .pps_circle_card1 {
    width: 48% !important;
  }
    .pps_circle_container {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 992px) {
  .hkc-md-2, .pps_circle_card1 {
    width: 33% !important;
  }
   .pps_category_overlay {
   font-size: 12px !important;
  }
   .btn-gold2 {
  font-size: 10px;
}
    .pps_circle_container {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (min-width: 1500px) {
  .hkc-md-2, .pps_circle_card1 {
    width: 25% !important;
  }
   .pps_category_overlay {
   font-size: 14px !important;
  }
   .btn-gold2 {
  font-size: 14px;
}
    .pps_circle_container {
    grid-template-columns: repeat(4, 1fr);
  }

}
@media (min-width: 1900px) {
  .hkc-md-2, .pps_circle_card1 {
    width: 20% !important;
  }
  .pps_category_overlay {
   font-size: 15px !important;
  }
     .pps_circle_container {
    grid-template-columns: repeat(5, 1fr);
  }
  .btn-gold2 {
  font-size: 16px;
}
}@media (min-width: 768px) {#n-60cd7bc3146df041317281 .nav-link{padding:0px 20px 0px 0px}body, .body{font-size:16px;line-height:1.7em;}h1, .h1{font-size:2.5rem;line-height:1.2em;}h2, .h2{font-size:2.0814rem;line-height:1.2em;}h3, .h3{font-size:1.7329rem;line-height:1.2em;}h4, .h4{font-size:1.4427rem;line-height:1.2em;}h5, .h5{font-size:1.2011rem;line-height:1.2em;}h6, .h6{font-size:1.1rem;line-height:1.5em;}.astroid-nav > li > .as-menu-item, .astroid-sidebar-menu > li > .nav-item-inner > .as-menu-item, .astroid-mobile-menu > .nav-item > .as-menu-item{font-size:15px;line-height:1.7em;}.nav-submenu-container .nav-submenu > li, .jddrop-content .megamenu-item .megamenu-menu li, .nav-submenu, .astroid-mobile-menu .nav-child .menu-go-back, .astroid-mobile-menu .nav-child .nav-item-submenu > .as-menu-item, .nav-item-submenu .as-menu-item{font-size:15px;line-height:2em;}.top-bars{font-size:14px;line-height:1em;}}@media (min-width: 992px) {#ta-60cd7e26a16f8c82709685{padding:12px 0px 12px 0px}#tb-60cd7e4917694083373215{padding:12px 0px 12px 0px}#s-62893ba1bab6a842422623 .astroid-heading{font-size:4.09em;}#hm-6220ab12bac8c466871554{margin-right:2%;margin-left:2%;padding-top:5px;padding-bottom:5px}#n-60cc3cb71680a882586546{margin-bottom:10px}#n-60c87ff838c84419607639 .nav-link{padding:4px 0px 4px 0px}#ro-60cc3c0170384c66595637{margin-bottom:10px}#n-60cc3c205abb0423166442{margin-bottom:30px}#n-60cc3c205abb0423166442 .nav-link{padding:4px 0px 4px 0px}#i-60c743f8d0d97881129306{margin-bottom:30px}#d-60cd57b521903050966751{margin-top:70px;margin-bottom:30px}#d-60cd57b521903050966751 .divider-content{margin-top:70px;margin-bottom:30px}#n-60cd7bc3146df041317281 .nav-link{padding:0px 0px 0px 20px}#ar-1528971627712{margin-bottom:-40px}#fs-1528971627712{padding-top:70px;padding-bottom:70px}body, .body{font-size:16px;line-height:1.7em;}h1, .h1{font-size:2.5rem;line-height:1.2em;}h2, .h2{font-size:2.0814rem;line-height:1.2em;}h3, .h3{font-size:1.7329rem;line-height:1.2em;}h4, .h4{font-size:1.2rem;line-height:1.2em;}h5, .h5{font-size:1.2011rem;line-height:1.2em;}h6, .h6{font-size:0.8rem;line-height:1.5em;}.astroid-nav > li > .as-menu-item, .astroid-sidebar-menu > li > .nav-item-inner > .as-menu-item, .astroid-mobile-menu > .nav-item > .as-menu-item{font-size:15px;line-height:1.7em;}.nav-submenu-container .nav-submenu > li, .jddrop-content .megamenu-item .megamenu-menu li, .nav-submenu, .astroid-mobile-menu .nav-child .menu-go-back, .astroid-mobile-menu .nav-child .nav-item-submenu > .as-menu-item, .nav-item-submenu .as-menu-item{font-size:15px;line-height:2em;}.top-bars{font-size:14px;line-height:1em;}}