/* General informational paragraph styling */
.about-text .equal-text,
.voucher-info {
  text-align: justify;              /* Align text evenly on both sides */
  text-justify: inter-word;         /* Improves spacing for Bulgarian text */
  color: #333;                      /* Dark gray for readability */
  line-height: 1.8;                 /* Comfortable reading */
  font-size: 1rem;
  background: #fafafa;              /* Light neutral background */
  padding: 1.5rem;
  border-left: 5px solid #007bff;   /* Blue accent bar */
  border-radius: 0.6rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  margin-bottom: 1.5rem;
  transition: all 0.3s ease;        /* Smooth hover transition */
}

/* Hover effect: soft blue background + lift effect */
.about-text .equal-text:hover,
.voucher-info:hover {
  background: #f0f8ff;              /* Soft blue tint */
  transform: translateY(-2px);      /* Slight lift */
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.08); /* Stronger shadow */
}

/* Highlighted warning text inside paragraph */
.voucher-info .warning {
  display: inline-block;
  color: #d9534f;                   /* Bootstrap danger red */
  font-weight: 700;
  text-transform: uppercase;
  margin-top: 0.5rem;
}


/* Card styling */
.voucher-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.voucher-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.2);
}

/* Title styling with hover effect */
.voucher-title {
    font-weight: 700;
    font-size: 1.8rem;
    transition: color 0.3s ease;
}
.voucher-title:hover {
    color: #007bff;
    cursor: pointer;
}

/* Highlighted key info */
.highlight {
    text-decoration: underline;
    font-weight: 600;
    color: #d63384;
}

/* Text paragraph */
.voucher-text {
    font-size: 1rem;
    line-height: 1.7;
    transition: transform 0.3s ease, color 0.3s ease;
}
.voucher-text:hover {
    color: #007bff;
    transform: scale(1.02);
}

/* Justified text for nice alignment */
.text-justify {
    text-align: justify;
}

/* ================================================ */
/* Custom bullet list for Ваучери section           */
/* ================================================ */

/* ====================================================== */
/* Card styling for Ваучери section                       */
/* ====================================================== */

/* Select the main card container */
.voucher-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease; 
    /* When hovering, any change to transform or box-shadow will animate smoothly over 0.3s */
}

.voucher-card:hover {
    transform: translateY(-5px); 
    /* Moves the card up by 5px when hovered to create a "floating" effect */
    box-shadow: 0 15px 35px rgba(0,0,0,0.2); 
    /* Adds a shadow when hovering to make the card appear lifted */
}

/* ====================================================== */
/* Title styling and animation                             */
/* ====================================================== */
.voucher-title {
    font-weight: 700;                  
    /* Makes the title bold for emphasis */
    font-size: 1.8rem;                 
    /* Sets a large font size for readability and hierarchy */
    animation: pulse-text 3s infinite; 
    /* Applies a pulsing animation (defined later) to make the title subtly grow/shrink repeatedly */
}

.highlight {
    text-decoration: underline;        
    /* Underlines the text to emphasize key words */
    font-weight: 600;                  
    /* Slightly bold for emphasis */
    color: #d63384;                    
    /* Pink/purple color for highlighting */
}

/* ====================================================== */
/* Paragraph text styling and animation                   */
/* ====================================================== */
.voucher-text {
    font-size: 1rem;                   
    /* Sets a normal readable font size */
    line-height: 1.7;                  
    /* Provides spacing between lines for readability */
    animation: pulse-text 4s infinite; 
    /* Slower pulsing animation for paragraphs, making them subtly dynamic */
}

/* ====================================================== */
/* List styling for custom bullets                        */
/* ====================================================== */
.voucher-list {
    list-style: none;                  
    /* Removes the default browser bullets */
    padding-left: 0;                   
    /* Removes default padding added by browsers for <ul> */
    margin-bottom: 1.2rem;            
    /* Adds space below the list so it doesn’t stick to next element */
}

.voucher-list li {
    position: relative;                
    /* Needed to position custom bullets absolutely inside each li */
    padding-left: 1.5em;               
    /* Leaves space on the left for the custom bullet */
    margin-bottom: 0.8rem;             
    /* Space between each list item */
    line-height: 1.6;                  
    /* Good spacing for wrapped lines */
    text-align: justify;                
    /* Aligns text evenly on both sides */
    transition: color 0.3s ease;       
    /* Smooth color change when hovering over a list item */
    animation: pulse-text 5s infinite; 
    /* Subtle pulsing effect on each list item */
}

.voucher-list li::before {
    content: "•";                      
    /* The bullet character for custom bullets */
    position: absolute;                
    /* Positions bullet independently of text flow */
    left: 0;                            
    /* Aligns bullet to the left edge of the li */
    color: #007bff;                     
    /* Blue color for the bullet */
    font-size: 1.2em;                   
    /* Slightly bigger bullet for visibility */
    line-height: 1.6;                   
    /* Aligns bullet vertically with text */
}

.voucher-list li:hover {
    color: #007bff;                     
    /* Text color changes to blue when hovered for interactivity */
    cursor: pointer;                    
    /* Shows pointer cursor on hover to indicate clickable/interactive content */
}

/* ====================================================== */
/* Image styling and hover + animation effects           */
/* ====================================================== */
.voucher-image {
    max-height: 400px;                  
    /* Limits image height to prevent it from being too tall */
    object-fit: cover;                  
    /* Ensures image fills its container without stretching or squashing */
    width: 100%;                        
    /* Image fills the width of its container */
    animation: pulse-image 6s infinite; 
    /* Slowly zooms the image in and out continuously */
    transition: transform 0.3s ease, filter 0.3s ease; 
    /* Smooth hover animation for scaling and brightness */
}

.voucher-image:hover {
    transform: scale(1.08);             
    /* Zooms the image slightly when hovered */
    filter: brightness(1.1);            
    /* Brightens the image a bit on hover */
}

/* ====================================================== */
/* Keyframe animations for text and image                */
/* ====================================================== */

/* Pulse animation for text elements */
@keyframes pulse-text {
    0%, 100% { transform: scale(1); }  
    /* Start and end with normal size */
    50% { transform: scale(1.02); }    
    /* Grow slightly in the middle of the animation */
}

/* Pulse/zoom animation for images */
@keyframes pulse-image {
    0%, 100% { transform: scale(1); }  
    /* Start and end at normal size */
    50% { transform: scale(1.03); }    
    /* Zoom in slightly at midpoint */
}

/* ====================================================== */
/* Media Queries for responsiveness                       */
/* ====================================================== */

/* Tablets and medium devices */
@media (max-width: 992px) {
    .voucher-title {
        font-size: 1.6rem;             
        /* Slightly smaller title on tablets */
    }
    .voucher-text {
        font-size: 0.95rem;            
        /* Slightly smaller paragraph text */
    }
    .voucher-image {
        max-height: 350px;             
        /* Slightly smaller image on tablets */
    }
}

/* Small devices / mobile */
@media (max-width: 768px) {
    .voucher-card {
        padding: 3rem 1.5rem;          
        /* Reduce card padding for smaller screens */
    }
    .voucher-title {
        font-size: 1.4rem;             
        /* Smaller title for mobile readability */
    }
    .voucher-text {
        font-size: 0.9rem;              
    }
    .voucher-list li {
        font-size: 0.9rem;              
        padding-left: 1.2em;            
        /* Reduce space for custom bullet on smaller screens */
    }
    .voucher-image {
        max-height: 250px;              
        /* Smaller image height for mobile */
    }
}

/* Extra small devices / phones */
@media (max-width: 576px) {
    .voucher-title {
        font-size: 1.2rem;             
        /* Tiny title for smallest screens */
    }
    .voucher-text {
        font-size: 0.85rem;            
    }
    .voucher-list li {
        font-size: 0.85rem;            
        padding-left: 1em;              
    }
    .voucher-image {
        max-height: 200px;              
    }
}


/* ====================================================== */
/* Accordion body general text styling                   */
/* ====================================================== */
.accordion-body {
    font-size: 1rem;            /* readable font size */
    line-height: 1.7;           /* spacing between lines */
    text-align: justify;         /* align text both sides */
    margin-bottom: 1rem;        /* space after paragraphs */
    color: #333;                /* standard text color */
    transition: color 0.3s ease, transform 0.3s ease; /* smooth hover effects */
}

/* ====================================================== */
/* Paragraph hover effect inside accordion               */
/* ====================================================== */
.accordion-body p:hover {
    color: #007bff;             /* change text color on hover */
    transform: scale(1.01);     /* subtle zoom effect */
}

/* ====================================================== */
/* Custom bullet styling for lists inside accordion      */
/* ====================================================== */
.accordion-body ul, 
.accordion-body ol {
    list-style: none;            /* remove default bullets/numbers */
    padding-left: 1.5em;         /* space for custom bullets */
    margin-bottom: 1rem;         /* spacing after list */
}

/* Custom bullets using ::before pseudo-element */
.accordion-body ul li::before {
    content: "•";                /* bullet character */
    color: #007bff;              /* bullet color */
    font-weight: bold;            /* emphasize bullet */
    display: inline-block;       /* inline-block to align properly */
    width: 1em;                  /* space for bullet */
    margin-left: -1.5em;         /* move bullet closer to text */
}

/* ====================================================== */
/* List items text styling                                */
/* ====================================================== */
.accordion-body ul li,
.accordion-body ol li {
    text-align: justify;         /* align text both sides */
    line-height: 1.6;            /* spacing between lines */
    margin-bottom: 0.5rem;       /* space between list items */
    padding-left: 0;             /* no extra padding */
    transition: color 0.3s ease; /* smooth hover color change */
}

/* Hover effect for list items */
.accordion-body ul li:hover,
.accordion-body ol li:hover {
    color: #d63384;              /* change text color on hover */
    cursor: pointer;             /* indicate interactivity */
}

/* ====================================================== */
/* Responsive adjustments for mobile/tablet               */
/* ====================================================== */
@media (max-width: 992px) {
    .accordion-body {
        font-size: 0.95rem;     /* slightly smaller text for tablets */
    }
    .accordion-body ul li::before {
        width: 0.9em;           /* adjust bullet spacing */
        margin-left: -1.4em;
    }
}

@media (max-width: 768px) {
    .accordion-body {
        font-size: 0.9rem;      /* smaller text for mobile */
    }
    .accordion-body ul li::before {
        width: 0.8em;           /* adjust bullet spacing */
        margin-left: -1.3em;
    }
}