/**
* Template Name: thamburu
* Template URL: https://thamburu.com/
* Updated: May 26 2025 with Bootstrap v5.3.3
* Author: thamburu.com
* License: https://thamburu.com/license/
*/

/*--------------------------------------------------------------
# Font & Color Variables
# Help: https://thamburu.com/color-system/
--------------------------------------------------------------*/

 @media (max-width: 575.98px) { /*small devices (portrait phones, less than 576px)*/
}
@media (min-width: 576px) and ( max-width: 767.98px ) { /*small devices Small devices (landscape phones, 576px and up, less than 768px)*/
}
@media (min-width: 768px) and ( max-width: 991.98px ) { /* Medium devices (tablets, 768px and up)*/
}
@media (min-width: 992px) {    /*Large devices (desktops, 992px and up)*/
}





/* Pulsating Play Button
------------------------------*/







        /* Custom CSS for Pulsating Icon */

   /* Custom CSS for Direct Pulsating <i> Tag */

/* Keyframes for the icon's pulsation (scaling and opacity) */
@keyframes icon-pulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.15); /* Icon slightly larger */
        opacity: 0.7; /* Icon slightly transparent */
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Keyframes for the optional outer ring pulsation */
@keyframes pulsating-ring-effect {
    0% {
        transform: translate(-50%, -50%) scale(0); /* Start from the exact center, very small */
        opacity: 1; /* Fully visible at the start of its expansion */
    }
    100% {
        transform: translate(-50%, -50%) scale(1.5); /* Expand to full size (adjust as needed) */
        opacity: 0; /* Fade out completely */
    }
}

/* The class to apply to any <i> tag */
.pulsating-icon {
    display: inline-block; /* Essential for transform to work correctly on inline elements */
    position: relative; /* Needed for positioning pseudo-elements */
    animation: icon-pulse 1.5s infinite ease-in-out; /* Apply icon pulsation */
    font-size: 2rem; /* Example size for the icon */
    color: var(--accent-color, #0d6efd); /* Default accent color */
    margin: 15px; /* Add some space between icons for demonstration */
    z-index: 1; /* Ensure the icon stays above the ring */
}

/* The subtle outer pulsating ring effect using ::after pseudo-element */
.pulsating-icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    /* Initial transform is handled by the keyframes for origin from center */
    width: 100%; /* The ring will expand from this initial conceptual size */
    height: 100%; /* The ring will expand from this initial conceptual size */
    border: 2px solid var(--accent-color, #0d6efd); /* Color of the ring */
    border-radius: 50%;
    animation: pulsating-ring-effect 2s infinite ease-out; /* Apply ring pulsation */
    animation-delay: 0.5s; /* Start the ring pulsation slightly after the icon */
    pointer-events: none; /* Ensure it doesn't interfere with clicks */
    z-index: -1; /* Place it behind the icon */
}

/* Optional: Hover effect for the icon itself */
.pulsating-icon:hover {
    color: color-mix(in srgb, var(--accent-color, #0d6efd), black 20%);
    cursor: pointer;
}







.colortext {
            font-family: "Satisfy",  sans-serif !important;
            color: #f0a848;
        }

.customers-badge {
  position: absolute;
  bottom: 10px;
  right: 30px;
  background-color: var(--surface-color);
  padding: 1rem;
  border-radius: 10px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
  max-width: 300px;
  animation: float-badge 3s ease-in-out infinite;
  will-change: transform;
}

.customers-badge .customer-avatars {
  display: flex;
  align-items: center;
  margin-bottom: 0.5rem;
}

.customers-badge .avatar {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  border: 2px solid var(--surface-color);
  margin-left: -8px;
}

.customers-badge .avatar:first-child {
  margin-left: 0;
}

.customers-badge .avatar.more {
  background-color: var(--accent-color);
  color: var(--contrast-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 600;
}

.customers-badge p {
  font-size: 0.875rem;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
}

@media (max-width: 992px) {
.customers-badge {
    position: static;
    margin: 1rem auto;
    max-width: 250px;
  }
}

/*----------------typed js-----------------*/
          
.typed {
  letter-spacing: 1px;
  border-bottom: 2px solid var(--accent-color);
}
   

/*----------------side-social-links-----------------*/
.side-social-links {
    
    margin-bottom: 20px;
    position: fixed;
    bottom: 2rem;
    right: 0px;
    z-index: 99999;
    display: grid;
  place-items: center;
    
}
.side-social-links .side {
    color: #fff;
    font-family: "Font Awesome 5 Brands";
    font-size: 1em;
    text-align: center;
    line-height: 1em;
    vertical-align: middle;
    box-shadow: 0px 3px 3px rgba(0,0,0,.12);
    border-radius: .4em;
    transition: all 0.4s;
    margin: 0.2rem;
    display: flex;
    transition: 0.3s;
    padding: 0.25em;
}
.side-social-links .side:hover {
    transition: 0.6s;
}
.side-social-links .whatsapp {
    background: #25d366;
}    
.blinking-button {
  animation: blinker 1s linear infinite;
}
@keyframes blinker {
  50% {
    opacity: 0;
  }
}
.side-social-links .drive {
    background: conic-gradient(from -45deg, #ea4335 110deg, #4285f4 90deg 180deg, #34a853 180deg 270deg, #fbbc05 270deg) 73% 55%/150% 150% no-repeat;
}
.side-social-links .call {
    background: var(--accent-color);
}
.side-social-links .mail {
    background: #3b5998;
}
.side-social-links .backtotop {
    background: var(--accent-color);
}
@media (min-width: 1024px) {
.side-social-links .side {
    font-size: 1.55em;
}
}
.soft-blinking-button {
        animation: softBlink .5s ease-in-out infinite alternate;
      }
@keyframes softBlink {
        from {
          opacity: 0.6;
        }
        to {
          opacity: 1;
        }
      }



/*----------------side-social-links-----------------*/

.bg-gradient-primary-to-secondary {
  background: #1e30f3;
  background: linear-gradient(135deg, #1e30f3 0%, #e21e80 100%);
}

.theme-gradient {background:  #FBB03F;
background: linear-gradient(90deg, rgba(251, 176, 63, 1) 0%, rgba(87, 199, 133, 1) 50%, rgba(237, 221, 83, 1) 100%);}

.text-gradient {
  background: -webkit-linear-gradient(315deg, #1e30f3 0%, #e21e80 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.rounded-4 {
  border-radius: 1rem !important;
}






.solar-title-container {
  position: relative; /* Needed for absolute positioning of the lines */
  display: inline-block; /* Adjust as needed for your layout */
  padding: 1em; /* Add some padding around the text */
}

.solar-title-container h1 {
  position: relative; /* Ensure text stays on top of the lines */
  z-index: 1; /* Give the text a higher stacking order */
  color: #fff; /* Example text color */
  text-align: center; /* Center the text */
}

.solar-title-container::before,
.solar-title-container::after {
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2px; /* Adjust line thickness */
  height: 2px; /* Initial small size */
  background-color: #ffc107; /* Example line color (Bootstrap's yellow) */
  border-radius: 50%; /* Make the initial point a circle */
  opacity: 0.8;
  transform: translate(-50%, -50%); /* Center the starting point */
  animation: radiate 1.5s infinite ease-out; /* Apply the animation */
}

.solar-title-container::after {
  animation-delay: 0.5s; /* Offset the second set of lines for a staggered effect */
}

@keyframes radiate {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.8;
  }
  100% {
    transform: translate(-50%, -50%) scale(10); /* Adjust the final size of the lines */
    opacity: 0;
  }
}

/* Add more sets of lines for a denser effect */
.solar-title-container span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1px;
  height: 1px;
  background-color: #ffc107;
  border-radius: 50%;
  opacity: 0.7;
  transform: translate(-50%, -50%);
  animation: radiate-more 1.8s infinite ease-out;
}

.solar-title-container span:nth-child(1) { animation-delay: 0.2s; }
.solar-title-container span:nth-child(2) { animation-delay: 0.7s; }
.solar-title-container span:nth-child(3) { animation-delay: 1.1s; }
/* Add more spans with different animation-delays */

@keyframes radiate-more {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.7;
  }
  100% {
    transform: translate(-50%, -50%) scale(8);
    opacity: 0;
  }
}