/**
* Global styles
*
* @since 1.0.0
*/

section .gradient-text {
  background: linear-gradient(90deg, #fc9c4b, #1955fd, #32d7fe);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

section p {
    font-family: 'Plus Jakarta Sans', sans-serif;
    color: rgba(255, 255, 255, 0.6);
}

section p span {
    color: #ffffff;
    font-weight: 700;
}

section .hero-banner__actions .work {
    background-color: #ffffff;
}

section .hero-banner__actions .our-services {
    color: #ffffff;
    background: linear-gradient(122.57deg, rgba(255, 255, 255, 0.2) 25.04%, rgba(255, 255, 255, 0) 71.67%);
    backdrop-filter: blur(42px)
}

/**
* Hero section
*
* @since 1.0.0
*/

.hero-banner {
    padding: 125px 0 85px;
}

.hero-banner .hero-banner__bg-image {
    top: 100px;
}

.hero-banner .hero-banner__heading {
    font-size: 70px;
    line-height: 115%;
    font-weight: 800;
}

/**
* Intro section
*
* @since 1.0.0
*/

.intro .row-border,
.values .values-card,
.why-choose-us .row-border,
.faqs .accordion-header {
    padding: 1px;
    background:
        radial-gradient(circle at top left, rgba(255, 255, 255, 0.5) 0%, transparent 70%),
        radial-gradient(circle at top left, rgba(64, 114, 253, 0.5) 0%, transparent 50%),
        radial-gradient(circle at top left, rgba(21, 21, 21, 0.05) 0%, transparent 40%),

        radial-gradient(circle at bottom right, rgba(255, 255, 255, 0.5) 0%, transparent 70%),
        radial-gradient(circle at bottom right, rgba(64, 114, 253, 0.5) 0%, transparent 50%),
        radial-gradient(circle at bottom right, rgba(21, 21, 21, 0.05) 0%, transparent 40%);
}

.intro .row,
.why-choose-us .row {
    background-color: #0F1420;
    padding: 80px;
    box-shadow: inset -32px -32px 60px rgba(218, 228, 230, 0.08);
    backdrop-filter: blur(42px);
}

.intro {
    color: #a8a8a8;
    line-height: 1.2;
}

.intro h2 {
    color: #ffffff;
    font-weight: 800;
}

.intro .intro__infographic,
.why-choose-us .why-choose-us-infographic {
    mix-blend-mode: luminosity;
}

/**
* Our Philosophy section
*
* @since 1.0.0
*/

.our-philosophy p {
    margin-bottom: 0;
}

.our-philosophy .our-philosophy__bg-image,
.faqs .faqs__bg-image {
    top: -80px;
}

.our-philosophy .row > .col-12:nth-child(2)::before,
.our-philosophy .row > .col-12:nth-child(3)::before {
    content: url("data:image/svg+xml,%3Csvg width='48' height='48' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='8 4 16 12 8 20' /%3E%3C/svg%3E");
    position: absolute;
    left: -80px;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 48px;
    height: 48px;
}

.our-philosophy .row,
.benefits .benefits-card .benefits-card-body,
.faqs .accordion-button,
.faqs .accordion-body,
.quiz .card {
    background: linear-gradient(152.97deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 100%);
    backdrop-filter: blur(21px);
}

/**
* Why Choose Us section
*
* @since 1.0.0
*/

.why-choose-us .blue-star {
    top: 60px;
    left: 400px;
}

.why-choose-us p {
    margin-bottom: 0;
}

.why-choose-us p:not(:last-of-type) {
    margin-bottom: 25px;
}

/**
* Testimonials section
*
* @since 1.0.0
*/

.testimonials .testimonials__bg-image {
    top: -700px;
}

/**
* Quiz section
*
* @since 1.0.0
*/

.quiz .quiz__bg-image {
    top: 260px;
}

/**
* FAQs section
*
* @since 1.0.0
*/

.faqs {
    padding: 60px 0;
}

.faqs .accordion-button {
    font-size: 24px;
}

.faqs .accordion-button,
.faqs .accordion-body {
    font-family: 'Plus Jakarta Sans', sans-serif;
}

.faqs .accordion-button::after {
    height: 25px;
}

/**
* Mobile Responsiveness
*
* @since 1.0.0
*/

@media screen and (min-width: 1400px) {
    .awards > .container,
    .contact-us > .container {
        max-width: 1265px;
    }
}

@media screen and (max-width: 1200px) {
    .our-philosophy .row > .col-12:nth-child(2)::before,
    .our-philosophy .row > .col-12:nth-child(3)::before {
        left: 50%;
        top: -40px;
        transform: translate(-50%, -50%) rotate(90deg);
    }
}

@media screen and (max-width: 1024px) {
    .hero-banner {
        padding: 115px 0 75px;
    }

    .hero-banner .bg-image {
        top: 90px;
    }

    .hero-banner .hero-banner__heading {
        font-size: 60px;
    }

    section p {
        font-size: 17px;
    }

    .intro .row,
    .why-choose-us .row {
        padding: 60px;
    }
}

@media screen and (max-width: 768px) {
    .hero-banner {
        padding: 105px 0 65px;
    }

    .hero-banner .bg-image {
        top: 80px;
    }

    .hero-banner .hero-banner__heading {
        font-size: 50px;
    }

    section p {
        font-size: 16px;
    }

    .intro .row,
    .why-choose-us .row {
        padding: 40px;
    }
}