@import "normalize.css";

*,
*:after,
*:before {
    box-sizing: border-box;
}

@property --gradient-angle {
    syntax: "<angle>";
    initial-value: 90deg;
    inherits: false;
}

:root {
    --bg-background: #4c6caf;
    --clr-card: #ffffff;
    --clr-1: #f4f0f5;
    --clr-2: #f3e9f3;
    --clr-3: #f1e8ee;

    --clr2-card: #fdfdfd;
    --clr2-1: #eeeff5;
    --clr2-2: #edf0f7;
    --clr2-3: #e3e7f8;
}

body {
    min-height: 100vh;
    /* padding: 0 1rem; */
    font-family: "SF Pro Text", "SF Pro Icons", "AOS Icons", "Helvetica Neue", Helvetica, Arial, sans-serif, system-ui;
}



#about_mob {
    display: none !important;
}

:is(h1, h2) {
    margin: 0;
}

.bleed-canvas {
    width: 100vw;
    height: 100%;
    position: absolute;
}

.chopsticks {
    height: 20%;
    position: absolute;
    right: 0;
    top: 10%;
}

.veribear {
    width: 10vmin;
    position: absolute;
    bottom: 5%;
    right: 5%;
    rotate: -20deg;
}

.bento {
    position: absolute;
    bottom: 0%;
    left: 10%;
    rotate: 90deg;
    height: 40vmin;
}

@media (max-width: 768px) {
    .bento {
        height: 60vmin;
    }
}

h1 {
    font-size: clamp(2rem, 6vw + 1rem, 8rem);
    font-weight: 600;

    color: transparent;
    -webkit-background-clip: text;
}



#choose {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
}

.sticky {
    width: 50%;
    aspect-ratio: 1;
    position: sticky;
    bottom: 0;
}

.sticky img {
    width: 150%;
    position: absolute;
    bottom: 0;
    translate: -5% 0;
}

section {
    container-type: inline-size;
}

section:nth-of-type(2) p {
    font-weight: 600;
    font-size: clamp(1.5rem, 3vw + 1rem, 4rem);
    text-align: center;
    max-width: 90%;
    /* margin-top: 5vh auto; */
    margin: 5vh auto;

    background: linear-gradient(to right in oklab,
            oklch(63% 0.50 337) 0%, oklch(36% 0.50 340) 37% 37%, oklch(90% 0.5 200) 97% 97%);
    color: transparent;
    -webkit-background-clip: text;
}

.box {
    container-type: inline-size;
}

.box .logo {
    width: clamp(1rem, 4vw + 1rem, 4rem);
    aspect-ratio: 1;
    background: linear-gradient(90deg, oklch(36% 0.50 340), oklch(90% 0.5 200));
    justify-self: start;
    position: absolute;
    bottom: 100%;
    translate: 0 -25%;
    mask: url('data:image/svg+xml;utf8,<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6"><path fill-rule="evenodd" d="M9 4.5a.75.75 0 01.721.544l.813 2.846a3.75 3.75 0 002.576 2.576l2.846.813a.75.75 0 010 1.442l-2.846.813a3.75 3.75 0 00-2.576 2.576l-.813 2.846a.75.75 0 01-1.442 0l-.813-2.846a3.75 3.75 0 00-2.576-2.576l-2.846-.813a.75.75 0 010-1.442l2.846-.813A3.75 3.75 0 007.466 7.89l.813-2.846A.75.75 0 019 4.5zM18 1.5a.75.75 0 01.728.568l.258 1.036c.236.94.97 1.674 1.91 1.91l1.036.258a.75.75 0 010 1.456l-1.036.258c-.94.236-1.674.97-1.91 1.91l-.258 1.036a.75.75 0 01-1.456 0l-.258-1.036a2.625 2.625 0 00-1.91-1.91l-1.036-.258a.75.75 0 010-1.456l1.036-.258a2.625 2.625 0 001.91-1.91l.258-1.036A.75.75 0 0118 1.5zM16.5 15a.75.75 0 01.712.513l.394 1.183c.15.447.5.799.948.948l1.183.395a.75.75 0 010 1.422l-1.183.395c-.447.15-.799.5-.948.948l-.395 1.183a.75.75 0 01-1.422 0l-.395-1.183a1.5 1.5 0 00-.948-.948l-1.183-.395a.75.75 0 010-1.422l1.183-.395c.447-.15.799-.5.948-.948l.395-1.183A.75.75 0 0116.5 15z" clip-rule="evenodd" /></svg>') center/contain no-repeat;

}

.box svg path {
    fill: blue;
}

p {
    position: relative;
}

.box__content p strong {
    color: rgba(13, 14, 14, 0.781);
}


section:nth-of-type(3) h2 {
    font-size: clamp(2rem, 8vw + 1rem, 8rem);
    font-weight: 600;
    background: linear-gradient(90deg, oklch(36% 0.50 340), oklch(90% 0.5 200));
    color: transparent;
    -webkit-background-clip: text;
    margin-top: 25%;
}

section:nth-of-type(4) {
    display: grid;
    padding-top: 2rem;
    gap: 4rem;
}

section:nth-of-type(4) .box:first-of-type {
    margin-bottom: 8rem;
}


.about_img {
    margin-top: -75%;
}

/* Box styling */

.box {
    width: 100%;
    border-radius: 2rem;
    display: grid;
    grid-template-columns: 0.3fr 0.7fr;
    gap: 1rem;
    justify-content: end;
    padding: 1rem;

    backdrop-filter: blur(14px) saturate(200%);
    -webkit-backdrop-filter: blur(14px) saturate(200%);
    background-color: rgba(255, 255, 255, 0.07);
    border-radius: 12px;
    border: 1px solid rgba(209, 213, 219, 0.3);
}

.box_b1::after,
.box_b1::before {
    content: " ";
    position: absolute;
    z-index: -1;
    inset: .01rem;
    background: conic-gradient(from var(--gradient-angle),
            var(--clr-card),
            var(--clr-1),
            var(--clr-2),
            var(--clr-3),
            var(--clr-2),
            var(--clr-1),
            var(--clr-card));
    border-radius: inherit;
    animation: rotate 3.5s linear infinite;
    background-position: 10% -22% 0 0;
    background-size: 200%;
}

.box::after {
    filter: blur(.2rem);
}

.box_b2::after,
.box_b2::before {
    content: " ";
    position: absolute;
    z-index: -1;
    inset: .01rem;
    background: conic-gradient(from var(--gradient-angle),
            var(--clr2-card),
            var(--clr2-1),
            var(--clr2-2),
            var(--clr2-3),
            var(--clr2-2),
            var(--clr2-1),
            var(--clr2-card));
    border-radius: inherit;
    animation: b2_rotate 3.5s linear infinite;
    background-position: 10% 10% 0 -10%;
    background-size: 300%;
}

.box::after {
    filter: blur(.2rem);
}

@keyframes rotate {
    0% {
        --gradient-angle: 0deg;
    }


    100% {
        --gradient-angle: 360deg;
    }
}

@keyframes b2_rotate {
    0% {
        --gradient-angle: 0deg;
    }

    50% {
        --gradient-angle: -90deg;
    }

    50% {
        --gradient-angle: -180deg;
    }

    100% {
        --gradient-angle: -360deg;
    }
}


/* .box:hover {
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);

} */

.box__content {
    display: flex;
    /* place-items: center; */
    grid-column: 2;
    min-height: 10cqi;
    padding: 2rem 2rem;
    align-content: center;
    justify-items: center;
}

.box p {
    font-weight: 500;
    /* font-size: 18px; */
    color: hsl(0 0% 50%);
    font-size: clamp(0.875rem, 0.5vw + 1rem, 1rem);
}

.box--two {
    position: absolute;
    bottom: 0;
    z-index: -1;
}


.box--two p {
    font-size: clamp(1rem, 2vw + 1rem, 2.75rem);
    color: black;
    font-weight: 500;
}

.box--two p span {
    background: linear-gradient(90deg, oklch(36% 0.50 340), oklch(90% 0.5 200));
    color: transparent;
    -webkit-background-clip: text;
}

@media(max-width: 768px) {
    .box--two {
        padding: 2rem 1rem;
    }

    .box--two p {
        font-size: clamp(0.875rem, 0.5vw + 1rem, 2rem);
    }
}

@media(min-width: 768px) {
    .box {
        padding: 2rem;
    }
}

section:nth-of-type(4) {
    z-index: 2;
    position: relative;
}

section:nth-of-type(5) {
    display: grid;
    gap: 2rem;
    grid-template-columns: 1fr;
    padding: 4rem 0 10vh 0;
    transform-style: preserve-3d;
}

section:nth-of-type(5)::before {
    content: "";
    z-index: -1;
    position: absolute;
    bottom: 0;
    height: calc(100% + 60cqi);
    width: 100vw;
    left: 50%;
    translate: -50% 0;

    background-color: #0f0f0f;
    background-image:
        radial-gradient(at 47% 33%, hsl(0.00, 4%, 6%) 0, transparent 59%),
        radial-gradient(at 82% 65%, hsl(284.62, 31%, 74%) 0, transparent 55%);

}

#choose {
    container-type: inline-size;
}

@container (max-width: 420px) {
    section:nth-of-type(5) {
        grid-auto-flow: row;
        grid-template-columns: 1fr;
    }

    section:nth-of-type(5)::before {
        height: calc(100% + 120cqi);
    }
}

section:nth-of-type(6) {
    min-height: 80vh;
    display: grid;
    place-items: center;
}

section:nth-of-type(6) h2 {
    font-size: clamp(2rem, 3vw + 1rem, 8rem);
}

section:nth-of-type(6) svg {
    width: 30%;
    position: absolute;
    stroke: hsl(0 0% 0%);
    right: 10%;
    bottom: 10%;
    rotate: 10deg;
}

.bento--mini {
    aspect-ratio: 1;
    background: hsl(0 0% 100%);
    border-radius: 2rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    place-items: center;
    position: relative;
}

:is(.bird, .bear) {
    width: 100%;
    rotate: -12deg;
    transition: scale 0.2s;
    position: absolute;
    top: 50%;
    left: 0%;
    translate: -50% -50%;
}

.bird {
    fill: #1D9BF0;
    translate: -40% -25%;
}

.bear {
    rotate: -26deg;
}

.bento--mini a {
    text-decoration: none;
    font-size: clamp(1.5rem, 2vw + 1rem, 2rem);
    font-weight: 600;
    color: hsl(0 0% 5%);
    position: relative;
}

.bento--mini:is(:hover, :focus-within) img {
    scale: 1.4;
}

.bento--mini a::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
}

.bento--mini a .logo {
    width: clamp(1rem, 4vw + 1rem, 2rem);
    aspect-ratio: 1;
    background: linear-gradient(90deg, purple, lightblue);
    justify-self: start;
    position: absolute;
    bottom: 100%;
    translate: 0 -25%;
    mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6"><path d="M2.25 2.25a.75.75 0 000 1.5h1.386c.17 0 .318.114.362.278l2.558 9.592a3.752 3.752 0 00-2.806 3.63c0 .414.336.75.75.75h15.75a.75.75 0 000-1.5H5.378A2.25 2.25 0 017.5 15h11.218a.75.75 0 00.674-.421 60.358 60.358 0 002.96-7.228.75.75 0 00-.525-.965A60.864 60.864 0 005.68 4.509l-.232-.867A1.875 1.875 0 003.636 2.25H2.25zM3.75 20.25a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0zM16.5 20.25a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0z" /></svg>') center/contain no-repeat;
}

.bento--mini:first-of-type a .logo {
    mask: url('data:image/svg+xml;utf8,<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>X</title><path d="M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z"/></svg>') center/contain no-repeat;

}

section:nth-of-type(4) .box:nth-of-type(2) {
    background: transparent;
}

@supports (animation-timeline: scroll()) {
    section {
        view-timeline-name: --section;
    }

    :is(.chopsticks, .bento) {
        animation: slide both linear;
        animation-timeline: --section;
        animation-range: exit 0 exit 25%;
    }

    .chopsticks {
        --x: 50%;
        --y: 100%;
        --opacity: 0;
    }

    .bento {
        --x: -100%;
        --y: 100%;
        --opacity: 0;
    }

    @keyframes slide {
        to {
            translate: var(--x, 0) var(--y, 0);
            opacity: var(--opacity, 1);
            scale: var(--scale, 1);
        }
    }

    section:nth-of-type(4) .box:nth-of-type(2) p {
        animation: slide both linear;
        animation-range: cover 15% cover 75%;
        animation-timeline: view();
        --opacity: 0;
        --y: -10%;
    }

    section:nth-of-type(5)::before {
        translate: -50% 10%;
        opacity: 0;
        animation: slide both linear;
        animation-range: entry 0 entry 25%;
        animation-timeline: --section;
        --opacity: 1;
        --y: 0;
        --x: -50%;
    }

    @keyframes slip {
        to {
            scale: 1;
            translate: -5% 0;
        }
    }

    .sticky img {
        scale: 1.5;
        translate: 30% 0;
        animation: slip both linear, slide both linear;
        animation-range: entry 50% entry 70%, exit 0% exit 15%;
        animation-timeline: --section;
        --y: 30%;
        --x: -5%;
    }

    section:nth-of-type(4) {
        padding-top: 8rem;
    }

    .sticky {
        clip-path: inset(-100% -100% 0 -100%);
    }

    .spacing-box {
        height: 35vh;
    }

    .veribear {
        animation: roll both linear;
        animation-timeline: --section;
        animation-range: exit;
    }

    @keyframes roll {
        to {
            rotate: 720deg;
            translate: 500% 0;
        }
    }
}

#about_large {
    display: grid;
}

@media screen and (min-width: 769px) and (max-width: 1024px) {
    #choose {
        padding: 2% 6% 0 6%;
    }

    .about_img {
        margin-top: -100%;
    }

    .sticky img {
        scale: 1.5;
        translate: 50% 0;
        animation: slip both linear, slide both linear;
        animation-range: entry 50% entry 70%, exit 0% exit 15%;
        animation-timeline: --section;
        --y: 50%;
        --x: -5%;
    }

    section:nth-of-type(4) {
        padding-top: 1rem;
    }

    section:nth-of-type(3) h2 {
        margin-top: 25%;
    }

    .sticky {
        clip-path: inset(-100% -100% 0 -100%);
    }

    .about-topic-card {
        height: 250px;
        width: 400px;
        background: rgb(255, 255, 255);
        background: linear-gradient(145deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.1) 100%);
        border-radius: 30px;
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border: 2px outset rgba(255, 255, 255, 0.3);
        box-shadow: 0px 1px 24px -1px rgba(0, 0, 0, 0.2);
    }

    .ball {
        border-radius: 50%;
        position: absolute;
        z-index: -5;
    }

    .ball1 {
        transform: translate(200px, -50px);
        height: 300px;
        width: 300px;
        background: linear-gradient(90deg, #0084ff, #0ff);
    }

    .ball2 {
        transform: translate(-160px, 100px);
        height: 150px;
        width: 150px;
        background: linear-gradient(90deg, #a200ff, #000dff);
    }

    .ball3 {
        transform: translate(-200px, -140px);
        height: 240px;
        width: 240px;
        background: linear-gradient(90deg, #00ffd9, #00ff84);
    }

    #about_large {
        display: none !important;
    }

    #about_mob {
        display: block !important;
    }

    #testimonials_large {
        display: none;
    }

    .about_mob_card {
        height: auto;
        min-height: 100%;
        top: 5%;
        padding: 5%;
        /* background-color: rgba(255, 255, 255, 0.06); */
        background-color: rgb(149 159 255 / 6%);
        -webkit-backdrop-filter: blur(20px);
        backdrop-filter: blur(20px);
        margin: auto;

        border-radius: 8px;
        -webkit-box-shadow: 20px 20px 22px rgba(0, 0, 0, 0.2);
        box-shadow: 20px 20px 22px rgba(0, 0, 0, 0.2);
    }

    .testimonials_mob_card {
        height: auto;
        min-height: 100%;
        top: 5%;
        padding: 5%;
        background-color: rgba(255, 255, 255, 0.06);
        -webkit-backdrop-filter: blur(20px);
        backdrop-filter: blur(20px);
        margin: auto;

        border-radius: 8px;
        -webkit-box-shadow: 20px 20px 22px rgba(0, 0, 0, 0.2);
        box-shadow: 20px 20px 22px rgba(0, 0, 0, 0.2);
    }

    .testimonials_mob_card p {
        color: #ffffff;
    }

    .about_mob_card p {
        color: white;
    }

    .testimonials {
        font-size: 24px;
        font-weight: 600 !important;
        background: linear-gradient(90deg, oklch(36% 0.50 340), oklch(90% 0.5 200)) !important;
        color: transparent !important;
        -webkit-background-clip: text !important;
    }

    .testimonials-desc {
        color: white;
    }

    .testimonial_box {
        margin-top: 10%;
    }

    .box--two {
        padding: 1rem;
        height: 200px;
    }

    .box__content {
        padding: 1rem;
    }

    section:nth-of-type(5)::before {
        display: none;
    }


    section:nth-of-type(5) {
        padding: 0rem 0 10vh 0 !important;
    }

    .testimonials-img {

        bottom: -15px;
        position: absolute;
    }

    .testimonials-img-src {
        height: 30%;
        width: 30%;
    }

    #mob-img {
        display: none;
    }
}

@media screen and (min-width: 481px) and (max-width:768px) {
    #choose {
        padding: 2% 6% 0 6%;
    }

    .about_img {
        margin-top: -100%;
    }

    .sticky img {
        scale: 1.5;
        translate: 50% 0;
        animation: slip both linear, slide both linear;
        animation-range: entry 50% entry 70%, exit 0% exit 15%;
        animation-timeline: --section;
        --y: 50%;
        --x: -5%;
    }

    section:nth-of-type(4) {
        padding-top: 1rem;
    }

    .sticky {
        clip-path: inset(-100% -100% 0 -100%);
    }

    .about-topic-card {
        height: 250px;
        width: 400px;
        background: rgb(255, 255, 255);
        background: linear-gradient(145deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.1) 100%);
        border-radius: 30px;
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border: 2px outset rgba(255, 255, 255, 0.3);
        box-shadow: 0px 1px 24px -1px rgba(0, 0, 0, 0.2);
    }

    .ball {
        border-radius: 50%;
        position: absolute;
        z-index: -5;
    }

    .ball1 {
        transform: translate(200px, -50px);
        height: 300px;
        width: 300px;
        background: linear-gradient(90deg, #0084ff, #0ff);
    }

    .ball2 {
        transform: translate(-160px, 100px);
        height: 150px;
        width: 150px;
        background: linear-gradient(90deg, #a200ff, #000dff);
    }

    .ball3 {
        transform: translate(-200px, -140px);
        height: 240px;
        width: 240px;
        background: linear-gradient(90deg, #00ffd9, #00ff84);
    }

    #about_large {
        display: none !important;
    }

    #about_mob {
        display: block !important;
    }

    #testimonials_large {
        display: none;
    }

    .about_mob_card {
        height: auto;
        min-height: 100%;
        top: 5%;
        padding: 5%;
        /* background-color: rgba(255, 255, 255, 0.06); */
        background-color: rgb(149 159 255 / 6%);
        -webkit-backdrop-filter: blur(20px);
        backdrop-filter: blur(20px);
        margin: auto;

        border-radius: 8px;
        -webkit-box-shadow: 20px 20px 22px rgba(0, 0, 0, 0.2);
        box-shadow: 20px 20px 22px rgba(0, 0, 0, 0.2);
    }

    .testimonials_mob_card {
        height: auto;
        min-height: 100%;
        top: 5%;
        padding: 5%;
        background-color: rgba(255, 255, 255, 0.06);
        -webkit-backdrop-filter: blur(20px);
        backdrop-filter: blur(20px);
        margin: auto;

        border-radius: 8px;
        -webkit-box-shadow: 20px 20px 22px rgba(0, 0, 0, 0.2);
        box-shadow: 20px 20px 22px rgba(0, 0, 0, 0.2);
    }

    .testimonials_mob_card p {
        color: #ffffff;
    }

    .about_mob_card p {
        color: white;
    }

    .testimonials {
        font-size: 24px;
        font-weight: 600 !important;
        background: linear-gradient(90deg, oklch(36% 0.50 340), oklch(90% 0.5 200)) !important;
        color: transparent !important;
        -webkit-background-clip: text !important;
    }

    .testimonials-desc {
        color: white;
    }

    .testimonial_box {
        margin-top: 10%;
    }

    .box--two {
        padding: 1rem;
        height: 200px;
    }

    .box__content {
        padding: 1rem;
    }

    section:nth-of-type(5)::before {
        display: none;
    }

    section:nth-of-type(5) {
        padding: 0rem 0 6vh 0 !important;
    }

    .testimonials-img {

        bottom: -15px;
        position: absolute;
    }

    .testimonials-img-src {
        height: 30%;
        width: 30%;
    }

    #mob-img {
        display: none;
    }
}


@media (max-width: 480px) {
    #choose {
        padding: 2% 6% 0 6%;
    }

    .about_img {
        margin-top: -100%;
    }

    section:nth-of-type(3) h2 {
        margin-top: 25% !important;
    }

    .sticky img {
        scale: 1.5;
        translate: 50% 0;
        animation: slip both linear, slide both linear;
        animation-range: entry 50% entry 70%, exit 0% exit 15%;
        animation-timeline: --section;
        --y: 50%;
        --x: -5%;
    }

    section:nth-of-type(4) {
        padding-top: 1rem;
    }

    .sticky {
        clip-path: inset(-100% -100% 0 -100%);
    }

    .about-topic-card {
        height: 250px;
        width: 400px;
        background: rgb(255, 255, 255);
        background: linear-gradient(145deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.1) 100%);
        border-radius: 30px;
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border: 2px outset rgba(255, 255, 255, 0.3);
        box-shadow: 0px 1px 24px -1px rgba(0, 0, 0, 0.2);
    }


    #about_large {
        display: none !important;
    }

    #about_mob {
        display: block !important;
    }

    #testimonials_large {
        display: none;
    }

    .about_mob_card {
        height: auto;
        min-height: 100%;
        top: 5%;
        padding: 5%;
        background-color: rgb(149 159 255 / 6%);
        -webkit-backdrop-filter: blur(20px);
        backdrop-filter: blur(20px);
        margin: auto;

        border-radius: 8px;
        -webkit-box-shadow: 20px 20px 22px rgba(0, 0, 0, 0.2);
        box-shadow: 20px 20px 22px rgba(0, 0, 0, 0.2);
    }

    .testimonials_mob_card {
        height: 250px;
        min-height: 100%;
        top: 5%;
        padding: 5%;
        background-color: rgb(204 208 254 / 11%);
        -webkit-backdrop-filter: blur(20px);
        backdrop-filter: blur(20px);
        margin: auto;

        border-radius: 8px;
        -webkit-box-shadow: 20px 20px 22px rgba(0, 0, 0, 0.2);
        box-shadow: 20px 20px 22px rgba(0, 0, 0, 0.2);
    }

    .testimonials_mob_card p {
        color: #ffffff;
    }

    .about_mob_card p {
        color: white;
    }

    .testimonials {
        font-size: 24px;
        font-weight: 600 !important;
        background: linear-gradient(90deg, oklch(36% 0.50 340), oklch(90% 0.5 200)) !important;
        color: transparent !important;
        -webkit-background-clip: text !important;
    }

    .testimonials-desc {
        color: white;
    }

    .testimonial_box {
        margin-top: 10%;
    }

    .box--two {
        padding: 1rem;
        height: 200px;
    }

    .box__content {
        padding: 1rem;
    }

    section:nth-of-type(5)::before {
        display: none;
    }

    .testimonials-img {

        bottom: 40px;
        position: absolute;
    }

    .testimonials-img-src {
        height: 25%;
        width: 25%;
    }

    #mob-img {
        display: none;
    }

}

@media screen and (min-width:1025px) and (max-width: 1536px) and (max-height: 819px) {
    section:nth-of-type(3) h2 {
        margin-top: 10% !important;
    }
}