/* Specialties Section Fixes - Tada' Yoga Studio */
/* Fixes for cut-off text, overlapping elements, and layout issues */

/* Fix the cut-off "OUR SPECIALTIES" heading */
.our_specialties_heading_content {
    text-align: center;
    padding-top: 40px; /* Increased padding to prevent cut-off */
    margin-bottom: 40px; /* Ensure proper spacing */
}

.our_specialties_heading_content h5 {
    text-transform: uppercase;
    color: var(--e-global-color-secondary);
    letter-spacing: 3.1px;
    margin-bottom: 15px; /* Increased from 12px */
    padding-top: 20px; /* Increased padding to prevent cut-off */
    font-size: 20px; /* Ensure proper font size */
    line-height: 1.4; /* Better line height */
}

.our_specialties_heading_content h2 {
    margin-bottom: 25px; /* Increased from 18px */
    color: var(--e-global-color-primary);
    font-size: 48px; /* Ensure proper font size */
    line-height: 1.2; /* Better line height */
}

.our_specialties_heading_content p {
    margin-bottom: 50px; /* Increased from 35px */
    padding: 0 50px; /* Reduced from 95px for better mobile */
    color: var(--e-global-color-text);
    font-size: 18px; /* Ensure readable font size */
    line-height: 1.6; /* Better line height for readability */
}

/* Fix specialty content boxes - make them larger and prevent text truncation */
.specialties_content {
    text-align: right;
    margin-bottom: 60px; /* Increased from 46px */
    position: relative;
    padding: 20px 80px 20px 20px; /* Add extra right padding for icon space */
    background: rgba(255, 255, 255, 0.9); /* Add subtle background */
    border-radius: 10px; /* Add rounded corners */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Add subtle shadow */
    min-height: 120px; /* Ensure minimum height */
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: visible; /* Prevent text truncation */
    white-space: normal; /* Allow text wrapping */
    word-wrap: break-word; /* Prevent overflow */
}

.specialties_content .specialties_name {
    font-family: 'Playfair Display', serif;
    font-size: 20px; /* Increased from 18px */
    line-height: 1.3; /* Better line height */
    font-weight: 700;
    color: var(--e-global-color-primary);
    margin-bottom: 10px; /* Increased from 6px */
}

.specialties_content .specialties_paragraph {
    font-size: 16px; /* Slightly reduced from 18px for better fit */
    line-height: 1.5; /* Better line height */
    font-weight: 400;
    color: var(--e-global-color-text);
    margin-bottom: 0;
    word-wrap: break-word; /* Prevent text overflow */
    overflow-wrap: break-word; /* Modern browsers */
}

/* Fix the right column specialty content */
.specialties_content2 {
    text-align: left; /* Changed from right to left for better readability */
    margin-bottom: 60px; /* Increased from 46px */
    position: relative;
    padding: 20px 20px 20px 80px; /* Add extra left padding for icon space */
    background: rgba(255, 255, 255, 0.9); /* Add subtle background */
    border-radius: 10px; /* Add rounded corners */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Add subtle shadow */
    min-height: 120px; /* Ensure minimum height */
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: visible; /* Prevent text truncation */
    white-space: normal; /* Allow text wrapping */
    word-wrap: break-word; /* Prevent overflow */
}

/* Fix decorative icons positioning - make them less intrusive */
.specialties_content::after,
.specialties_content2::after {
    content: "\f058";
    height: 60px; /* Reduced from 76px */
    width: 60px; /* Reduced from 76px */
    background-color: var(--e-global-color-secondary);
    position: absolute;
    border-radius: 100%;
    z-index: 2; /* Reduced from 1 to be less intrusive */
    text-align: center;
    padding: 8px; /* Reduced from 5px */
    font-weight: 400;
    font-size: 32px; /* Reduced from 42px */
    line-height: 44px; /* Adjusted for smaller size */
    color: var(--e-global-color-white);
    font-family: 'Font Awesome 6 Free';
    opacity: 0.8; /* Make them more subtle */
    transition: all 0.3s ease; /* Add smooth transitions */
}

.specialties_content::after:hover,
.specialties_content2::after:hover {
    opacity: 1; /* Full opacity on hover */
    transform: scale(1.1); /* Slight scale on hover */
}

/* Adjust positioning of decorative icons */
.s1::after {
    top: 20px; /* Adjusted positioning */
    right: -50px; /* Moved further away from text */
}

.s2::after {
    top: 20px; /* Adjusted positioning */
    right: -50px; /* Moved further away from text */
}

.s3::after {
    top: 20px; /* Adjusted positioning */
    right: -50px; /* Moved further away from text */
}

.s4::after {
    top: 20px; /* Adjusted positioning */
    right: -50px; /* Moved further away from text */
}

.s5::after {
    top: 20px; /* Adjusted positioning */
    left: -50px; /* Moved further away from text */
}

.s6::after {
    top: 20px; /* Adjusted positioning */
    left: -50px; /* Moved further away from text */
}

.s7::after {
    top: 20px; /* Adjusted positioning */
    left: -50px; /* Moved further away from text */
}

.s8::after {
    top: 20px; /* Adjusted positioning */
    left: -50px; /* Moved further away from text */
}

/* Fix the specialty content padding */
.s1, .s2, .s3, .s4 {
    padding-right: 50px; /* Reduced from 25px, 70px, 70px, 25px */
    padding-left: 20px; /* Add left padding */
}

.s5, .s6, .s7, .s8 {
    padding-left: 50px; /* Reduced from 110px, 74px, 74px, 24px */
    padding-right: 20px; /* Add right padding */
}

/* Fix the decorative lines - make them less prominent */
.specialties_left_line,
.specialties_right_line {
    position: absolute;
    top: 50%; /* Center vertically */
    opacity: 0.3; /* Make them more subtle */
    z-index: 1; /* Behind content */
}

.specialties_left_line {
    right: -30px; /* Adjusted positioning */
}

.specialties_right_line {
    left: -30px; /* Adjusted positioning */
}

.specialties_left_line img,
.specialties_right_line img {
    height: 300px; /* Reduced from 390px */
    opacity: 0.5; /* Make more subtle */
}

/* Improve the overall section spacing */
.our_specialties_section {
    padding: 100px 0 120px; /* Adjusted padding */
    position: relative;
    overflow: visible; /* Allow content to breathe */
}

/* Fix the central image positioning */
.our_specialties_section .specialties_image {
    text-align: center;
    animation: float_img 6s ease-in-out infinite;
    z-index: 1; /* Ensure it's behind content boxes */
    position: relative;
}

/* Responsive fixes for mobile */
@media (max-width: 768px) {
    .our_specialties_heading_content h5 {
        font-size: 16px;
        letter-spacing: 2px;
    }
    
    .our_specialties_heading_content h2 {
        font-size: 32px;
        line-height: 1.3;
    }
    
    .our_specialties_heading_content p {
        padding: 0 20px;
        font-size: 16px;
    }
    
    .specialties_content,
    .specialties_content2 {
        margin-bottom: 40px;
        padding: 15px;
        min-height: 100px;
    }
    
    .specialties_content::after,
    .specialties_content2::after {
        height: 40px;
        width: 40px;
        font-size: 20px;
        line-height: 20px;
    }
    
    .s1, .s2, .s3, .s4 {
        padding-right: 20px;
        padding-left: 10px;
    }
    
    .s5, .s6, .s7, .s8 {
        padding-left: 20px;
        padding-right: 10px;
    }
    
    .specialties_left_line,
    .specialties_right_line {
        display: none; /* Hide decorative lines on mobile */
    }
}

/* Additional mobile improvements */
@media (max-width: 480px) {
    .our_specialties_heading_content h2 {
        font-size: 28px;
    }
    
    .specialties_content .specialties_name {
        font-size: 18px;
    }
    
    .specialties_content .specialties_paragraph {
        font-size: 14px;
    }
}