/* ============================================
   SERVICE SECTION - KEEP ORIGINAL DESIGN
   Only fix contrast and readability issues
   ============================================ */

/* Keep the original skewed design - just fix colors */
.service-style-one {
    background: #ffffff;
}

/* Service Card - Keep original structure - ENSURE VISIBILITY */
.service-style-one .service-data {
    width: 80%;
    margin: auto;
    position: relative;
    opacity: 1 !important; /* Force visibility */
    visibility: visible !important; /* Force visibility */
    z-index: 1;
    max-width: 280px; /* Match the skew background width */
    padding: 0 20px; /* Inner padding to prevent overflow */
}

/* Background skewed shape - Make it BIGGER and ALWAYS VISIBLE */
.service-style-one .service-data:before {
    content: "";
    width: 280px; /* Increased from 190px */
    height: 480px; /* Increased from 380px */
    background: #1a1a1a; /* Dark background - ALWAYS visible */
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) skew(-20deg, 0deg);
    z-index: -1;
    transition: all 0.3s ease;
    border: 2px solid #dc2626; /* RED border ALWAYS visible */
    box-shadow: 0 5px 20px rgba(220, 38, 38, 0.15); /* Subtle glow ALWAYS */
}

.service-style-one .service-data:hover:before {
    background: #000000;
    border-color: #dc2626;
    box-shadow: 0 10px 30px rgba(220, 38, 38, 0.3); /* Stronger glow on hover */
}

/* Icon container background - Make it BIGGER too - ALWAYS VISIBLE */
.service-style-one .service-data .svg-icon {
    width: 180px; /* Increased from 140px */
    height: 190px; /* Increased from 150px */
    position: relative;
    margin: auto auto 20px; /* Add margin bottom */
    z-index: 10; /* High z-index */
    opacity: 1 !important;
    visibility: visible !important;
}

.service-style-one .service-data .svg-icon:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    border: 3px solid #dc2626; /* Thicker RED border - ALWAYS visible */
    width: 100%;
    height: 100%;
    transform: skew(-20deg, 0deg);
    background: #0a0a0a; /* Very dark for icon contrast - ALWAYS visible */
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(220, 38, 38, 0.2); /* Glow ALWAYS visible */
}

.service-style-one .service-data:hover .svg-icon:before {
    background: #dc2626;
    border-color: #dc2626;
    box-shadow: 0 6px 25px rgba(220, 38, 38, 0.4); /* Stronger glow on hover */
}

/* Icon image - ALWAYS VISIBLE and prominent */
.service-style-one .service-data .svg-icon img {
    position: relative;
    width: 80px; /* Bigger icons */
    height: 80px;
    z-index: 11; /* Higher than container */
    filter: brightness(0) invert(1); /* White icons - ALWAYS visible */
    transition: all 0.3s ease;
    opacity: 1 !important; /* Full opacity ALWAYS - FORCE */
    visibility: visible !important; /* FORCE VISIBLE */
    display: block !important; /* FORCE DISPLAY */
}

.service-style-one .service-data:hover .svg-icon img {
    filter: brightness(0); /* Black icons on hover (yellow background) */
    transform: scale(1.1); /* Slightly bigger on hover */
}

/* Title - WHITE text - SMALLER to fit - ALWAYS VISIBLE - NEVER OVERFLOW */
.service-style-one .service-data h3 {
    margin-bottom: 15px;
    margin-top: 30px;
    position: relative;
    z-index: 10; /* High z-index */
    opacity: 1 !important;
    visibility: visible !important;
    font-size: 18px; /* Even smaller */
    line-height: 1.3;
    padding: 0 10px; /* Extra padding inside */
    max-width: 100%;
    overflow: hidden;
    text-align: center;
}

.service-style-one .service-data h3 a {
    color: #ffffff !important; /* WHITE text on dark background */
    font-weight: 700;
    transition: all 0.3s ease;
    text-shadow: none;
    opacity: 1 !important;
    visibility: visible !important;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Max 2 lines for title */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-height: 2.6em; /* 2 lines * 1.3 line-height */
}

.service-style-one .service-data:hover h3 a {
    color: #dc2626 !important; /* RED on hover */
}

/* Description turns BLACK on hover */
.service-style-one .service-data:hover p {
    color: #000000 !important; /* BLACK on hover */
}

/* Description - WHITE text - ALWAYS VISIBLE - STRICT BOUNDS - NEVER OVERFLOW */
.service-style-one .service-data p {
    margin-bottom: 20px;
    color: #e0e0e0 !important; /* Light gray/white for readability on dark */
    line-height: 1.5;
    position: relative;
    z-index: 10; /* High z-index */
    text-shadow: none;
    opacity: 1 !important;
    visibility: visible !important;
    font-size: 13px; /* Smaller font */
    word-wrap: break-word;
    overflow-wrap: break-word;
    /* Limit to 3 lines with ellipsis */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: 4.5em; /* 3 lines * 1.5 line-height */
    padding: 0 15px; /* Inner padding */
    max-width: 100%;
    text-align: center;
    hyphens: auto; /* Break long words */
    -webkit-hyphens: auto;
}

/* Arrow button - ALWAYS VISIBLE */
.service-style-one .service-data .icon {
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px solid #dc2626; /* RED border - ALWAYS visible */
    border-radius: 100%;
    margin: auto;
    background: transparent; /* Transparent by default */
    transform: translateX(0px); /* No offset - visible immediately */
    opacity: 1; /* ALWAYS visible */
    visibility: visible; /* ALWAYS visible */
    transition: all 0.3s ease;
    position: relative;
    z-index: 2;
}

.service-style-one .service-data:hover .icon {
    transform: translateX(5px) scale(1.1); /* Move and grow on hover */
    background: #dc2626; /* RED fill on hover */
    border-color: #dc2626;
    box-shadow: 0 4px 15px rgba(220, 38, 38, 0.4);
}

.service-style-one .service-data .icon i {
    color: #dc2626 !important; /* RED icon - visible on transparent */
    font-size: 14px;
    transition: all 0.3s ease;
}

.service-style-one .service-data:hover .icon i {
    color: #ffffff !important; /* White on RED background */
}

/* Light Mode Adjustments */
body.light-d .service-style-one {
    background: #f8f8f8;
}

body.light-d .service-style-one .service-data:before {
    background: #f5f5f5;
    border-color: #e0e0e0;
}

body.light-d .service-style-one .service-data:hover:before {
    background: #ffffff;
    border-color: #ffee02;
}

body.light-d .service-style-one .service-data .svg-icon:before {
    background: #ffffff;
    border-color: #ffee02;
}

body.light-d .service-style-one .service-data:hover .svg-icon:before {
    background: #ffee02;
}

body.light-d .service-style-one .service-data .svg-icon img {
    filter: brightness(0); /* Black icons on light background */
}

body.light-d .service-style-one .service-data:hover .svg-icon img {
    filter: brightness(0);
}

body.light-d .service-style-one .service-data h3 a {
    color: #1a1a1a !important;
    text-shadow: none;
}

body.light-d .service-style-one .service-data:hover h3 a {
    color: #000000 !important;
}

body.light-d .service-style-one .service-data p {
    color: #666666 !important;
    text-shadow: none;
}

body.light-d .service-style-one .service-data .icon {
    background: #ffee02;
    border-color: #ffee02;
}

body.light-d .service-style-one .service-data:hover .icon {
    background: #000000;
    border-color: #000000;
}

body.light-d .service-style-one .service-data .icon i {
    color: #000000 !important;
}

body.light-d .service-style-one .service-data:hover .icon i {
    color: #ffffff !important;
}