/*--------------------------------------------------------------
# Skill One
--------------------------------------------------------------*/

         :root {
            --primary-blue: #0A2540;
            --accent-orange: #E68A00;
            --light-bg: #F8FAFC;
            --card-border-gold: #D98E04;
        }

        .skill-one {position: relative;display: block;padding: 70px 0 70px;background-color: var(--tanspot-primary);overflow: hidden;z-index: 1;}
        .skill-one__bg {position: absolute;top: 0;right: 0;bottom: 0;width: calc((89% - 0px) / 2);clip-path: polygon(0 0, 100% 0%, 100% 100%, 20% 100%);background-repeat: no-repeat;background-position: center;background-size: cover;z-index: -1;}
        .skill-one__left {position: relative;display: block;}
        .skill-one__left .section-title {margin-bottom: 21px;}
        .skill-one__progress-box {position: relative;display: block;margin-top: 24px;margin-right: 60px;}
        .skill-one__progress-box .progress-box {position: relative;display: block;}
        .skill-one__progress-box .progress-box+.progress-box {margin-top: 14px;}
        .skill-one__progress-box .progress-box .bar-title {position: relative;font-size: 20px;font-weight: 600;line-height: 30px;text-transform: capitalize;letter-spacing: 1px;margin-bottom: 12px;font-family: var(--tanspot-font-two);color: var(--tanspot-black);}
        .skill-one__progress-box .progress-box .bar {position: relative;width: 100%;height: 7px;background-color: rgba(var(--tanspot-black-rgb), .10);border-radius: 4px;}
        .skill-one__progress-box .progress-box .bar-inner {position: relative;display: block;width: 0px;height: 7px;background: var(--tanspot-base);border-radius: 4px;-webkit-transition: all 1500ms ease;transition: all 1500ms ease;}
        .skill-one__progress-box .progress-box .count-box {position: absolute;right: 0px;margin-right: -35px;bottom: 18px;width: 40px;height: 22px;background: var(--tanspot-base);color: #ffffff;line-height: 22px;font-size: 14px;font-weight: 500;border-radius: 5px;text-align: center;letter-spacing: 0;opacity: 0;font-family: var(--tanspot-font);-webkit-transition: all 500ms ease;transition: all 500ms ease;}
        .skill-one__progress-box .progress-box .counted .count-box {opacity: 1;}
        .skill-one__progress-box .progress-box .count-box:after {content: "";position: absolute;left: 0;top: 100%;margin-top: -5px;border: 5px solid transparent;border-top: 5px solid var(--tanspot-base);border-left: 5px solid var(--tanspot-base);}
        .skill-one__btn-box {position: relative;display: block;margin-top: 40px;}

        .values-section {position: relative;overflow: hidden;}
        /* Subtitle Styling */
        .sub-title {color: var(--accent-orange);font-weight: 700;letter-spacing: 1px;font-size: 0.9rem;text-transform: uppercase;display: flex;align-items: center;gap: 8px;}
        .sub-title::before, .sub-title::after {content: "";display: inline-block;width: 20px;height: 2px;background-color: var(--accent-orange);}
        /* Section Heading */
        .main-heading {color: var(--primary-blue);font-weight: 800;font-size: 2.5rem;}
        .main-heading span {color: var(--accent-orange);}
        .section-desc {color: #6c757d;font-size: 0.95rem;}
        /* Card Custom Styling */
        .value-card {background: #ffffff;border: 1px solid #edf2f7;border-radius: 12px;padding: 24px;position: relative;box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);transition: transform 0.3s ease, box-shadow 0.3s ease;height: 100%;}
        .value-card:hover {transform: translateY(-5px);box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);}

        /* Left Accent Line */
        .value-card::before {content: "";position: absolute;left: 0;top: 23px;bottom: 148px;height: 55px;width: 6px;background-color: var(--card-border-gold);border-top-right-radius: 4px;border-bottom-right-radius: 4px;}

        /* Icon Container */
        .icon-box2 {width: 50px;height: 50px;border-radius: 50%;display: flex;align-items: center;justify-content: center;font-size: 1.25rem;margin-bottom: 15px;}
        .icon-blue {background-color: #EBF3FE;color: #1E6091;}
        .icon-gold {background-color: #FEF6E6;color: #D98E04;}
        .card-title {color: var(--primary-blue);font-weight: 700;font-size: 1.1rem;margin-bottom: 10px;}
        .card-text {color: #64748B;font-size: 0.88rem;line-height: 1.5;margin: 0;}
        /* Right Side Image Styling */
        .image-container {position: relative;height: 100%;min-height: 450px;clip-path: polygon(15% 0, 100% 0, 100% 100%, 0% 100%);border-radius: 0 20px 20px 0;overflow: hidden;}

        .image-container img {width: 100%;height: 100%;object-fit: cover;}

        @media (max-width: 991px) {
            .image-container {clip-path: none;min-height: 300px;margin-top: 30px;border-radius: 12px;}
        }


/*--------------------------------------------------------------
# End
--------------------------------------------------------------*/