/*
 Theme Name:     Astra Child
 Theme URI:      https://example.com/astra-child
 Description:  Child theme for Astra
 Author:         Your Name
 Template:       astra
 Version:        1.0.0
*/

/*─────────────────────────────────────────────────────────────────
  ULTRA GUIDE SLIDER STYLES
─────────────────────────────────────────────────────────────────*/

.ultra-guide-container {
  position: relative;
  /*padding: 2rem 40px; */
}

.ultra-guide-swiper .swiper-wrapper {
  align-items: center;
}

/* All slides semi-transparent and smaller by default */
.ultra-guide-swiper .swiper-slide {

  transform: scale(0.85);
  transition: transform .4s ease, opacity .4s ease;
}

/* Center slide fully opaque and scaled up */
.ultra-guide-swiper .swiper-slide-active {
  opacity: 1;
  transform: scale(1);
}

.ug-slide-inner {
  background: transparent; /* White background for the card */
  text-align: center;
  position: relative;
  overflow: hidden;
  /* box-shadow: 0 4px 12px rgba(0,0,0,0.08);  <-- This line is removed */
}

/* Add colored background panels behind the slide content */
.ug-slide-inner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 15px; /* Match the inner card's radius */
  z-index: -1; /* Place it behind the content */
}

/* Per-slide brand colors for the background panel */
.swiper-slide-active .ug-slide-inner.blue::before   { background: #0038FF; }
.swiper-slide-active .ug-slide-inner.red::before    { background: #E10600; }
.swiper-slide-active .ug-slide-inner.yellow::before { background: #FFD000; }

.ug-slide-inner img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

.ug-slide-inner h3 {
  margin: 1rem 0 0.25rem;
  color: #FF6E1F; /* Dark color for better readability */
  font-size: 30px;
  font-family: "Rubik-VariableFont_wght", Sans-serif ;
  /*letter-spacing: 2px;*/
  font-weight: 500;
}

.ug-slide-inner p {
  margin: 0;
  font-size: 1rem;
  color: #333333; /* Slightly lighter dark color */
}

/* --- Navigation & Pagination --- */

/* --- Navigation & Pagination --- */

/* Nav arrows */
/* Nav arrows */
.ultra-guide-prev,
.ultra-guide-next {
    position: absolute;
    top: 40%; /* Adjust vertical position if needed */
    transform: translateY(-50%);
    width: 44px;  /* Set a fixed width */
    height: 44px; /* Set a fixed height */
    z-index: 10;
    cursor: pointer;
  
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%; /* Adjusted icon size to fit nicely inside the circle */
    border-radius: 50%; /* Make it a circle */
  
    transition: opacity .2s ease;
    opacity: 0.9;
}

.ultra-guide-prev:hover,
.ultra-guide-next:hover {
    opacity: 1;
}

/* Remove the text inside the navigation divs */
.ultra-guide-prev, .ultra-guide-next {
    font-size: 0;
}

/* SVG icon for the 'previous' arrow */
/* style.css */

/* SVG icon for the 'previous' arrow */
.ultra-guide-prev {
    left: 0px; /* Changed from -22px for more spacing */
    background-image: url('http://riyanshplywood.samparksolution.com/wp-content/uploads/2025/07/Asset-10.png');
}

/* SVG icon for the 'next' arrow */
.ultra-guide-next {
    right: 0px; /* Changed from -22px for more spacing */
    background-image: url('http://riyanshplywood.samparksolution.com/wp-content/uploads/2025/07/Asset-11.png');
}
/* Pagination dashes */
.ultra-guide-pagination {
    margin-top: 2rem;
    position: static;
    text-align: center;
}

.ultra-guide-pagination .swiper-pagination-bullet {
    width: 12px;
    height: 4px;
    border-radius: 2px;
    background: gray;
    opacity: 1;
    margin: 0 4px !important;
    transition: all .3s ease; /* Animate both width and color */
}

/* Make the active pagination bullet wider */
.ultra-guide-pagination .swiper-pagination-bullet-active {
    width: 30px; /* Increased width for the active bullet */
    background: #FF6E1F; /* Active color */
}

@media (max-width: 767px) {
    .ultra-guide-prev,
.ultra-guide-next {
    bottom: -15px !important;
    top: inherit;
     font-size: 2em;
        width: 30px;
        height: 30px;
}

    
}