/* ----------------------------------------------------------------
	Custom CSS

	Add all your Custom Styled CSS here for New Styles or
	Overwriting Default Theme Styles for Better Handling Updates
-----------------------------------------------------------------*/
.green-light{
	color: #00b900 !important;;
}
.green-dark{
	color: #198754 !important;;
}

.icon-green {
  color: #00b900;
  font-size: 1.5em;
}
.bg-gray{
    background-color: gainsboro !important;
    font-weight: bold;
}
.price {
    color: #303233;
    font-size: 2.25rem;
    line-height: 1;
    font-weight: 700;
    margin: 32px 0 16px;
}

span-grad {
            /*background: linear-gradient(to right, #ff2ed2, #35a4ff); cyan n mauve*/
			background: linear-gradient(to right, #198754, #35a4ff);
            background-clip:content-box;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            animation: textSlideIn 3s ease-out forwards;
}

.color-grad-2 {
    background: linear-gradient(to top, cyan, magenta);
    background-clip:content-box;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: textSlideIn 1s ease-out forwards;
}

@keyframes textSlideIn {
            from { transform: translateY(50px); opacity: 0; }
            to { transform: translateY(0); opacity: 1; }
}


.green-color {
    color: rgb(0, 147, 59);
}
.link-color {
    color: rgb(71, 71, 255);
}

.backcolor-google-4 {
    background: linear-gradient(to right, 
        rgb(2, 102, 200), 
        rgb(249, 1, 1), 
        rgb(242, 181, 15), 
        rgb(0, 147, 59));
    color: transparent;
}
.backcolor-cm {
    background: linear-gradient(to right, cyan, magenta);
        
    color: white;
}

.color-grad-4 {
    background: linear-gradient(to top, 
        rgb(2, 102, 200), 
        rgb(249, 1, 1), 
        rgb(242, 181, 15), 
        rgb(0, 147, 59));
    -webkit-background-clip: text;
    color: transparent;
}

/* Main wrapper */
.seupra-image-block {
  text-align: center;
  margin: 30px 0;
}

/* Shared styles */
.image-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  flex-wrap: nowrap;
  margin: 10px 0;
}

.image-col {
  display: flex;
  justify-content: center;
  margin-bottom: 15px;
}

.small-icon {
  width: 50px;
  height: 50px;
  object-fit: contain;
}

.big-banner {
  width: 75%;
  height: auto;
  max-width: 600px;
}

/* Responsive Layout Switching */
.desktop-layout {
  display: flex;
  justify-content: center;
}

.mobile-layout {
  display: none;
}

@media (max-width: 767px) {
  .desktop-layout {
    display: none;
  }

  .mobile-layout {
    display: block;
  }

  .image-row {
    flex-wrap: wrap;
    gap: 10px;
  }
}