@use "../abstracts/variables" as vars;

/* ===========================
   About 2
   =========================== */
.about2 {
    background-color: vars.$color-white;


    .about2__subtitle {
        span {
            color: #878C8F;
        }
    }

    &__thumb-wrap {
        position: relative;
        border-radius: vars.rem(20);
        overflow: hidden;
        height: 100%;

        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: vars.rem(20);
            display: block;
        }

        @media (max-width: 991px) {
            max-height: vars.rem(460);
            margin-bottom: vars.rem(40);
        }
    }

    // ── Right column: content ───────────────────
    &__content {
        padding-left: vars.rem(20);

        @media (max-width: 991px) {
            padding-left: 0;
        }
    }

    .section-top {
        text-align: left;
        max-width: 501px;
        margin-bottom: vars.rem(20) !important;
    }

    .section-top__subtitle {
        color: vars.$color-heading;

        &::before {
            content: '>>>';
            color: #0073E6;
        }

        .text {
            color: #878C8F;
        }
    }

    .section-top__title {
        color: vars.$color-heading;
    }



    &__desc {
        font-family: vars.$font-family-base;
        font-weight: 400;
        font-size: vars.rem(16);
        line-height: vars.rem(28);
        color: vars.$color-secondary;
        margin-bottom: vars.rem(30);
        max-width: vars.rem(500);

        @media (max-width: 1199px) {
            font-size: 14px;
            line-height: 24px;
        }
    }

    // ── Skills / Progress card ──────────────────
    &__skills {
        background-color: #EFF3FA;
        border-radius: vars.rem(8);
        padding: 37px 45px 37px;
        margin-bottom: vars.rem(40);
    }

    &__skill-item {
        &:not(:last-child) {
            margin-bottom: vars.rem(30);
        }
    }

    &__skill-header {
        display: flex;
        gap: 30px;
        align-items: center;
        justify-content: space-between;
        margin-bottom: vars.rem(10);
    }

    &__skill-label {
        font-family: vars.$font-family-base;
        font-weight: 700;
        font-size: 18px;
        line-height: 100%;
        letter-spacing: 0%;
        color: vars.$color-heading;
        margin-bottom: 15px;
    }

    &__skill-percent {
        font-family: vars.$font-family-base;
        font-weight: 700;
        font-size: vars.rem(15);
        color: vars.$color-heading;
    }

    &__skill-track {
        width: 100%;
        height: vars.rem(6);
        background-color: #d5dce8;
        border-radius: vars.rem(10);
        overflow: hidden;
    }

    &__skill-fill {
        height: 100%;
        border-radius: vars.rem(10);

        &--blue {
            background-color: #0073E6;
        }

        &--dark {
            background-color: vars.$color-heading;
        }
    }

    // ── Feature checklist ───────────────────────
    &__features {
        list-style: none;
        padding: 0;
        margin: 0 0 vars.rem(32) 0;
        display: flex;
        flex-direction: column;
        gap: vars.rem(14);
    }

    &__feature-item {
        display: flex;
        align-items: center;
        gap: vars.rem(12);
        font-family: vars.$font-family-base;
        font-weight: 500;
        font-size: vars.rem(16);
        color: vars.$color-heading;

        i {
            color: #0073E6;
            font-size: vars.rem(14);
            flex-shrink: 0;
        }
    }

    // ── Bottom bar: button + phone CTA ──────────
    &__bottom {
        display: flex;
        align-items: center;
        gap: vars.rem(24);
        flex-wrap: wrap;
    }

    &__btn {
        background-color: #0073E6;
        color: vars.$color-white;
        padding: vars.rem(16) vars.rem(34);
        padding-right: vars.rem(80);
        border-radius: vars.rem(50);
        display: inline-flex;
        align-items: center;
        font-family: vars.$font-family-base;
        font-weight: 700;
        font-size: vars.rem(16);
        letter-spacing: 0.02em;
        text-transform: uppercase;
        position: relative;
        transition: all 0.3s ease;
        text-decoration: none;
        white-space: nowrap;

        span {
            position: relative;
            z-index: 2;
        }

        &::after {
            content: "\f061";
            font-family: "Font Awesome 6 Free";
            font-weight: 900;
            position: absolute;
            top: 50%;
            right: vars.rem(8);
            transform: translateY(-50%);
            width: vars.rem(54);
            height: vars.rem(54);
            background-color: vars.$color-black;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: vars.rem(18);
            color: vars.$color-white;
            transition: all 0.3s ease;
        }

        &:hover {
            background-color: vars.$color-black;
            color: vars.$color-white;
            text-decoration: none;

            &::after {
                background-color: #0073E6;
            }
        }
    }

    // ── Phone CTA card ───────────────────────────
    &__phone-cta {
        display: flex;
        align-items: center;
        gap: vars.rem(20);
        background-color: vars.$color-black;
        border-radius: vars.rem(10);
        padding: vars.rem(33) vars.rem(35);
        text-decoration: none;
        transition: background-color 0.3s ease;
        flex-shrink: 0;

        @media (max-width: 991px) {
            padding: vars.rem(23) vars.rem(25);
        }

        &:hover {
            background-color: #0073E6;
            text-decoration: none;
        }
    }

    &__phone-icon {
        width: vars.rem(58);
        height: vars.rem(58);
        border-radius: 50%;
        border: 2px solid rgba(255, 255, 255, 0.3);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        background: vars.$color-white;

        @media (max-width: 991px) {
            width: vars.rem(48);
            height: vars.rem(48);
        }

        i {
            font-size: vars.rem(32);
            color: vars.$color-black;

        }
    }

    &__phone-text {
        display: flex;
        flex-direction: column;
        gap: vars.rem(2);
    }

    &__phone-label {
        font-family: vars.$font-family-base;
        font-weight: 600;
        font-size: vars.rem(14);
        line-height: vars.rem(34);
        letter-spacing: 5%;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.6);
    }

    &__phone-number {
        font-family: vars.$font-family-base;
        font-weight: 700;
        font-size: vars.rem(24);
        line-height: vars.rem(34);
        letter-spacing: -2%;
        color: vars.$color-white;
    }
}