/* =========================
LAYOUT & CONTENT
========================= */

.content-wrapper {
    max-width: 100%;
}

/* Feature layout */
.feature-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 20px;
}

/* Icon styling */
.feature-item .icon {
    width: 45px;
    height: 45px;
    min-width: 45px;
    border-radius: 50%;
    background: #0d6efd;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

/* Icon color variants */
.feature-item .icon.bg-orange {
    background: orange;
}

.feature-item .icon.bg-success {
    background: #198754;
}

/* Text block */
.feature-item .text {
    margin-left: 15px;
}

.feature-item h6 {
    margin-bottom: 5px;
}

.feature-item p {
    margin-bottom: 0;
    font-size: 14px;
}

/* Image */
.about-image {
    max-width: 85%;
    height: auto;
}

/* Mobile */
@media (max-width: 991px) {
    .about-image {
        margin-top: 30px;
    }
}


/* =========================
BACKGROUND PATTERNS
========================= */

.patterns-1,
.patterns-2,
.patterns-3,
.patterns-4,
.patterns-5,
.patterns-6,
.patterns-7,
.patterns-8,
.patterns-9 {
    position: absolute;
    z-index: -1;
}

/* Pattern 1 */
.patterns-1 {
    inset-inline-start: -10px;
    inset-block-end: 0;
    opacity: 0.4;
    width: 200px;
    height: 200px;
    transform: rotate(90deg);
}

.patterns-1.sub-pattern-1 {
    inset-block-start: 0;
    inset-block-end: inherit;
}

/* Pattern 2 */
.patterns-2 {
    inset-inline-end: 0;
    inset-block-start: -3px;
    opacity: 0.2;
    width: 200px;
    height: 200px;
    transform: rotate(270deg);
}

/* Pattern 3 */
.patterns-3 {
    inset-inline-start: 8%;
    inset-block-start: 18%;
    opacity: 0.15;
    width: 80px;
    height: 80px;
}

.patterns-3.sub-pattern-1 { inset-inline-start: 11%; }
.patterns-3.sub-pattern-2 { inset-inline-start: 14%; inset-block-start: 25%; }
.patterns-3.sub-pattern-3 { inset-inline-start: 14%; inset-block-start: 15%; width: 100px; height: 100px; }

/* Pattern 4 */
.patterns-4 {
    inset-inline-start: 8%;
    inset-block-start: 18%;
    opacity: 0.5;
    width: 80px;
    height: 80px;
}

.patterns-4.sub-pattern-1 {
    inset-inline-start: 31.7%;
    inset-block-start: 34%;
    filter: invert(1);
    opacity: 0.3;
}

.patterns-4.sub-pattern-2 {
    inset-inline-start: 28.7%;
    inset-block-start: 28%;
    filter: invert(1);
    opacity: 0.2;
}

.patterns-4.sub-pattern-3 {
    inset-inline-start: 12%;
    inset-block-start: 19%;
    width: 150px;
    height: 150px;
    opacity: 0.2;
}

/* Pattern 5–7 */
.patterns-5 {
    inset-inline-start: -3%;
    inset-block-end: -7%;
    opacity: 0.3;
    width: 200px;
    height: 200px;
}

.patterns-6 {
    inset-inline-end: 0;
    inset-block-start: -7%;
    opacity: 0.2;
    width: 200px;
    height: 200px;
}

.patterns-7 {
    inset-inline-end: 0;
    inset-block-start: 0;
    opacity: 0.1;
    width: 200px;
    height: 200px;
}

/* Pattern 8 */
.patterns-8 {
    inset-inline-start: 0;
    inset-block-end: 0;
    opacity: 0.3;
    width: 160px;
}

.patterns-8.sub-pattern-1 {
    inset-inline-end: 0;
    inset-inline-start: inherit;
    transform: rotate(270deg);
}

.patterns-8.sub-pattern-2 {
    inset-block-start: 30%;
    inset-inline-start: -3%;
    opacity: 0.1;
    width: 400px;
    height: 150px;
    transform: rotate(320deg);
}

.patterns-8.sub-pattern-3 {
    inset-inline-end: 0;
    inset-inline-start: inherit;
    transform: rotate(90deg);
}

/* Pattern 9 */
.patterns-9 {
    inset-inline-end: 32%;
    inset-block-start: -11%;
    transform: rotate(45deg);
    opacity: 0.3;
    width: 100px;
    height: 100px;
}

.patterns-9.sub-pattern-1 {
    inset-block-end: -11%;
    inset-inline-start: 32%;
}

.patterns-9.sub-pattern-2 {
    inset-inline-end: -4%;
    transform: rotate(0);
}

/* Pattern 10–11 */
.patterns-10,
.patterns-11 {
    position: absolute;
}

.patterns-10 {
    inset-inline-start: 0;
    inset-block-start: 0;
    width: 150px;
    height: 150px;
}

.patterns-11 {
    inset-inline-start: -6%;
    inset-block-start: 0;
    width: 100px;
    height: 100px;
}


/* =========================
BACKGROUND IMAGES
========================= */

.bg-pattern-1 {
    position: relative;
    z-index: 1;
}

.bg-pattern-1::before {
    content: "";
    position: absolute;
    inset: 0;
    background-size: cover;
}

.bg-pattern-1.bg-image1::before { background-image: url("../images/backgr/5.jpg"); opacity: 0.3; }
.bg-pattern-1.bg-image2::before { background-image: url("../images/backgr/6.jpg"); opacity: 0.1; }
.bg-pattern-1.bg-image3::before { background-image: url("../images/backgr/10.jpg"); opacity: 0.03; }
.bg-pattern-1.bg-image4::before { background-image: url("../images/backgr/13.jpg"); opacity: 0.05; }
.bg-pattern-1.bg-image5::before { background-image: url("../images/backgr/12.jpg"); opacity: 0.05; }
.bg-pattern-1.bg-image6::before { background-image: url("../images/backgr/29.jpg"); opacity: 0.05; }


/* =========================
FEATURE BACKGROUND EFFECT
========================= */

.feature-client-bg {
    position: relative;
}

.feature-client-bg::before {
    content: "";
    position: absolute;
    inset-inline-start: -17%;
    inset-block-end: -5%;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: linear-gradient(to right, #0d6efd 0%, transparent 100%);
}

.feature-client-bg.feature-bg-1::before,
.feature-client-bg.feature-bg-2::before {
    width: 250px;
    height: 250px;
    inset-inline-end: -20%;
    inset-inline-start: inherit;
    background: linear-gradient(to left, #0d6efd 0%, transparent 100%);
}


/* =========================
AVATAR
========================= */

.avatar {
    width: 2.625rem;
    height: 2.625rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.avatar-xs { width: 1.5rem; height: 1.5rem; }
.avatar-sm { width: 2rem; height: 2rem; }
.avatar-lg { width: 3.75rem; height: 3.75rem; }
.avatar-xl { width: 5.3rem; height: 5.3rem; }


/* =========================
SWIPER / TESTIMONIALS
========================= */

.testimonialSwiper .swiper-slide {
    background: #3b82f6;
    border-radius: 0.625rem;
}

.testimonialSwiper .card {
    background: #0661f3;
    color: #fff;
}

.swiper-button-next,
.swiper-button-prev {
    color: #fff;
    background: #e2e8f0;
    border-radius: 50px;
}


/* =========================
UTILITIES
========================= */

.text-shadow {
    text-shadow: 0 5px #0b2459;
}

.bg-gray-gradient {
    background: linear-gradient(to right, #739dd3, rgb(157, 190, 229));
}

.bg-blue-gradient {
    background: linear-gradient(to right, #3b82f6, rgba(59, 130, 246, 0.5));
}

.bg-primary-01 {
    background-color: #3b82f6 !important;
}


/* =========================
CLIENT TESTIMONIAL BLOCK
========================= */

.bg-client {
    background: #f6f6f7;
    padding: 60px 20px;
    border-radius: 20px;
}

.testimonialSwiper .card {
    backdrop-filter: blur(10px);
    border-radius: 15px;
}

.avatar-lg {
    width: 60px;
    height: 60px;
    border: 2px solid #3b82f6;
}

.review-quote {
    font-size: 2rem;
    color: #3b82f6;
    opacity: 0.5;
}

.swiper-pagination-bullet-active {
    background: #3b82f6 !important;
    width: 25px;
    border-radius: 5px;
}