@tailwind base;
@tailwind components;
@tailwind utilities;

@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');


:root {

    --primary-gradient: linear-gradient(180deg, #307FE2 0%, #EA27C2 100%);
    --secondary-gradient: linear-gradient(180deg, #2C2929 100%, #0B0B0B 0%);
    --heading-font: "Barlow Condensed", sans-serif;
    --body-text-color: #C9CDD3;
}

body {
    color: var(--body-text-color);
    font-family: 'Raleway', sans-serif;
    background-color: #000000;
}

@import url('navbar.css');
@import url('voices-icon.css');
@import url('loadingAnimation.css');

.hero h1 {
    font-family: var(--heading-font);
    font-weight: 500;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.hero p {
    font-size: 1rem;
    letter-spacing: 0.01em;
    font-family: "Raleway", sans-serif;
    font-weight: 200;
    margin-left: auto;
    margin-right: auto;
}

.pre-head {
    font-size: 1rem !important;
    font-weight: 200 !important;
    letter-spacing: 4px !important;
    color: #F4F5F6 !important;
    text-transform: uppercase;
}


.title,
h2 {
    color: #F4F5F6 !important;
    opacity: .9;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 500;
    font-size: 30px;
    text-transform: uppercase;
    letter-spacing: 1px;
    line-height: 1.1;
}


.title span,
h1 span,
h2 span {
    background: var(--primary-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

h3 {
    font-size: 1.5rem !important;
    font-weight: 500;
    color: #F4F5F6;
    opacity: .9;
    font-family: 'Barlow Condensed', sans-serif;
    text-transform: uppercase;
    letter-spacing: 1px;
}

@media (min-width: 992px) {

    .hero p {
        font-size: 1.5rem;
    }

    .pre-head {
        font-size: 1.4rem !important;
    }

    .title,
    h2 {
        font-size: 2rem;
        line-height: 1.3;
    }


    h3 {
        font-size: 2rem !important;
    }
}



/* @media (min-width: 768px) {
    .pre-head{
        font-size: 1.2rem !important;
    }
    .title, h2 {
        font-size: 2.5rem;
        line-height: 1.3;
    }
    h3{
        font-size: 1.8rem !important;
    }
} */
.blur-50px {
    filter: blur(50px);
}

.grayscale {
    filter: grayscale(100%);
}

#menuDrop a {
    transition: all 0.3s ease-in-out;
}

#menuDrop a:hover {
    background: -webkit-linear-gradient(180deg, #307FE2 0%, #EA27C2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.top-wave {
    background-image: url('../images/wave-top.svg'), url('../images/wave-top.svg');
    background-repeat: no-repeat, no-repeat;
    background-size: contain, contain;
    background-position: center -120px, center -120px;
    background-blend-mode: color-burn;
}

@media (min-width: 576px) {
    .top-wave {
        background-position: center -10rem, center -14rem;
    }
}

@media (min-width: 768px) {
    .top-wave {
        background-position: center -16rem, center -18rem;
    }
}

@media (min-width: 992px) {
    .top-wave {
        background-position: center -23rem, center -23rem;
    }
}

@media (min-width: 1200px) {
    .top-wave {
        background-size: cover, cover;
        background-position: center -70rem, center -36rem;
    }
}

.section-topWeav {
    background-image: url('../images/background-images/crp-challenges1.svg'), url('../images/background-images/crp-challenges2.svg');
    background-position: center -35rem, center -35rem !important;
    background-repeat: no-repeat, no-repeat;
    background-size: cover, cover;
    -webkit-min-device-pixel-ratio: 2;
}

.section-midWeav {
    background-image: url('../images/background-images/crp-challenges1bottom.svg'), url('../images/background-images/crp-challenges2bottom.svg');
    background-position: center 15rem, center 15rem !important;
    background-repeat: no-repeat, no-repeat;
    background-size: 100% 50rem, 100% 50rem;
    -webkit-min-device-pixel-ratio: 2;
}

.featureChallage {
    background-image:
        url('../images/background-images/crp-challenges1.svg'),
        url('../images/background-images/crp-challenges2.svg'),
        url('../images/background-images/crp-challenges1bottom.svg'),
        url('../images/background-images/crp-challenges2bottom.svg');
    background-position:
        center -45rem,
        center -45rem,
        center calc(100% + 50rem),
        center calc(100% + 50rem);
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
    background-size: cover, cover, cover, cover;
    -webkit-min-device-pixel-ratio: 2;
}

.benefits {
    background-image:
        url('../images/background-images/crp-challenges1.svg'),
        url('../images/background-images/crp-challenges2.svg'),
        url('../images/background-images/crp-challenges1bottom.svg'),
        url('../images/background-images/crp-challenges2bottom.svg');
    background-position:
        center -55rem,
        center -55rem,
        /* center calc(100% + 50rem), 
        center calc(100% + 50rem);  */
        center 25rem,
        center 25rem;
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
    /* background-size: cover, cover, cover, cover; */
    background-size: cover, cover, 100% 50rem, 100% 50rem;
    -webkit-min-device-pixel-ratio: 2;
}


@media (max-width: 992px) {
    .featureChallage {
        background-position: center -28rem, center -28rem;
    }
}

@media (min-width: 240px) {
    .benefits {
        background-position:
            center -45rem,
            center -45rem,
            center 25rem,
            center 25rem !important;
        background-size: cover, cover, cover, cover;
    }
}

@media (max-width: 991px) {
    .featureChallage {
        background-position:
            center -32rem,
            center -32rem,
            center calc(100% + 30rem),
            center calc(100% + 30rem);
    }

    .benefits {
        background-position:
            center -45rem,
            center -45rem,
            center 12rem,
            center 12rem;
        background-size: cover, cover, 100% 50rem, 100% 50rem;
    }
}

@media (min-width: 992px) {
    .featureChallage {
        background-position:
            center -20rem,
            center -20rem,
            center calc(100% + 20rem),
            center calc(100% + 20rem);
    }

    .benefits {
        background-position:
            center -50rem,
            center -50rem,
            center 20rem,
            center 20rem !important;
        background-size: cover, cover, 100% 50rem, 100% 50rem;
    }
}

@media (min-width: 1224px) {
    .featureChallage {
        background-position:
            center -30rem,
            center -30rem,
            center calc(100% + 30rem),
            center calc(100% + 30rem);
    }

    .benefits {
        background-position:
            center -55rem,
            center -55rem,
            center 30rem,
            center 30rem !important;
        background-size: cover, cover, 100% 50rem, 100% 50rem;
    }
}

@media (min-width: 1400px) {
    .top-wave {
        background-position: center -70rem, center -36rem;
    }

    .featureChallage {
        background-position:
            center -32rem,
            center -32rem,
            center calc(100% + 35rem),
            center calc(100% + 35rem);
    }

    .benefits {
        background-position:
            center -58rem,
            center -58rem,
            center 25rem,
            center 25rem !important;
        background-size: cover, cover, 100% 50rem, 100% 50rem;
    }
}

@media (min-width: 1600px) {
    .top-wave {
        background-position: center -70rem, center -40rem;
    }

    .featureChallage {
        background-position:
            center -38rem,
            center -38rem,
            center calc(100% + 42rem),
            center calc(100% + 42rem);
    }

    .benefits {
        background-position:
            center -55rem,
            center -55rem,
            center 25rem,
            center 25rem !important;
        background-size: cover, cover, 100% 50rem, 100% 50rem;
    }
}

@media (min-width: 1920px) {

    .featureChallage {
        background-position:
            center -45rem,
            center -45rem,
            center calc(100% + 48rem),
            center calc(100% + 48rem);
    }
}

/* .top-wave::before{
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 30%;
    pointer-events: none;
    background: linear-gradient(270deg, #307FE2 100%, #EA27C2 0%);
    filter: blur(100px);
} */

.contact-form-section::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 50%;
    height: 50%;
    transform: translate(-50%, -50%);
    background: var(--primary-gradient), var(--primary-gradient);
    background-size: 50% 50%, 125% 100%;
    background-position: center center, center -50%;
    background-repeat: no-repeat;
    border-radius: 50%;
    z-index: 0;
    filter: blur(100px);
    background-blend-mode: overlay, hard-light
}

#accridation img {
    height: 90px;
    /* or 100px/130px for md/lg screens as you use in your wrapper */
    width: auto;
    object-fit: contain;
    display: block;
}

/* Footer CSS START */
footer {
    transition: all 0.3s ease;
    /* background: var(--primary-gradient); */
    background-image: url('../images/footer-elipse.svg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

/* footer::after{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--primary-gradient);
} */

@media (min-width: 1030px) and (max-width: 1280px) {
    footer {
        padding-bottom: 0.8rem;
    }
}

@media (min-width: 1080px) and (max-width: 1120px) {
    footer {
        padding-bottom: 3rem;
    }
}

@media (min-width: 1121px) and (max-width: 1180px) {
    footer {
        padding-bottom: 4rem;
    }
}

@media (min-width: 1181px) and (max-width: 1280px) {
    footer {
        padding-bottom: 6rem;
    }
}

.footer-marquee {
    width: 100%;
    overflow: hidden;
    background: transparent;
    position: relative;
    display: flex;
    align-items: center;
}

.footer-marquee-track {
    display: flex;
    width: max-content;
    animation: marquee 40s linear infinite;
    gap: 3rem;
    /* space between items */
}

.footer-marquee-list {
    display: flex;
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-marquee-list li {
    display: flex;
    align-items: center;
    background: -webkit-linear-gradient(180deg, #307FE2 0%, #EA27C2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 2rem;
    padding: 0 1rem;
    letter-spacing: 0.02em;
    font-weight: 500;
    white-space: nowrap;
}

.footer-marquee-list li:not(:first-child)::before {
    content: '';
    display: inline-block;
    width: 32px;
    height: 32px;
    background: #6c63ff;
    margin-right: 2rem;
}

@keyframes marquee {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

footer .footer-nav p {
    font-family: 'Raleway', sans-serif;
    color: #F4F5F6;
    font-size: 1rem;
    margin-bottom: .8rem;
}

footer .footer-nav ul {
    list-style-type: none;
}

footer .footer-nav ul li {
    color: #88909F;
    font-family: 'Raleway', sans-serif;
    font-size: 0.95rem;
    font-weight: 400;
    line-height: 2rem;
}

footer .footer-nav ul li:hover {
    background: -webkit-linear-gradient(180deg, #307FE2 0%, #EA27C2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    cursor: pointer;
}

footer .copy-right-area p {
    color: #F4F5F6;
    font-size: 1rem;
    margin-bottom: .8rem;
}

/* Newsletter subscribe form styles */
.newsletter-form {
    display: flex;
    width: 100%;
    height: 48px;
    background: #f4f5f6;
    border-radius: 0;
    overflow: hidden;
}

.newsletter-btn {
    /* width: 48px;
    height: 48px; */
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #307FE2 0%, #EA27C2 100%);
    border: none;
    outline: none;
    cursor: pointer;
    padding: 0;
    transition: filter 0.2s;
}

.newsletter-btn:hover {
    filter: brightness(1.1);
}

.newsletter-btn img {
    rotate: 90deg;
}

.newsletter-input {
    flex: 1;
    height: 100%;
    background: transparent;
    border: none;
    outline: none;
    padding-left: 1.5rem;
    font-family: 'Raleway', sans-serif;
    color: #23272B;
    font-size: 1.2rem;
    font-weight: 400;
    letter-spacing: 0.01em;
}

.newsletter-input::placeholder {
    color: #23272B;
    opacity: 0.8;
    font-size: 1.1rem;
    font-family: 'Raleway', sans-serif;
    font-weight: 400;
}

footer .icon-bg {
    background: #3D434C;
    transition: all 0.3s ease-in-out;
}

footer .icon-bg:hover {
    background: linear-gradient(#307FE2 20%, #EA27C2 96%);
    /* -webkit-background-clip: text; */
    -webkit-text-fill-color: transparent;
    cursor: pointer;
    border: 1px solid #9e9e9e;
}

@media (min-width: 992px) {
    .footer-marquee-list li {
        font-size: 2.5rem;
        padding: 0 1.2rem;
    }

    .footer-marquee-list li:not(:first-child)::before {
        margin-right: 2.2rem;
    }
}

@media (min-width: 1200px) {
    .footer-marquee-list li {
        font-size: 3.5rem;
        padding: 0 2rem;
    }

    .footer-marquee-list li:not(:first-child)::before {
        margin-right: 3rem;
    }
}


/* Footer CSS END */
.boxes-corner-design-outer {
    clip-path: polygon(2% 0, 100% 0%, 100% 100%, 0 100%, 0 5%);
}


.boxes-corner-outer {
    clip-path: polygon(7% 0, 100% 0, 100% 94%, 94% 100%, 0 100%, 0 8%);
}

.top-bottom-left-right-cut {
    clip-path: polygon(5% 0, 100% 0, 100% 95%, 95% 100%, 0 100%, 0 5%);
}

#our-mission .top-bottom-left-right-cut {
    clip-path: polygon(2rem 0, 100% 0, 100% 93%, 94% 100%, 0 100%, 0 2rem) !important;
}

.boxes-corner-outer-second {
    clip-path: polygon(3% 0, 100% 0, 100% 94%, 97% 100%, 0 100%, 0 8%);
}

@media (min-width: 992px) {
    #our-mission .top-bottom-left-right-cut {
        clip-path: polygon(2rem 0, 100% 0, 100% 93%, 96% 100%, 0 100%, 0 2rem) !important;
    }
}

@media (min-width: 1200px) {
    #our-mission .top-bottom-left-right-cut {
        clip-path: polygon(2rem 0, 100% 0, 100% 93%, 97% 100%, 0 100%, 0 2rem) !important;
    }
}




.infinite-slider-wrapper img {
    flex-shrink: 0;
}


.transparent-box-clip {
    clip-path: polygon(7% 0, 100% 0, 100% 94%, 94% 100%, 0 100%, 0 8%);
    background-color: #ffffff0a;
}


.color-gradeint-effect {
    border-radius: 308.066px;
    background: var(--Primary-Gradient-1, linear-gradient(270deg, #307FE2 0%, #EA27C2 100%));
    mix-blend-mode: hard-light;
    filter: blur(106.8176040649414px);
}

.glassy-background {
    border-radius: 308.066px;
    /* background: var(--Primary-Gradient-1, linear-gradient(270deg, #307FE2 0%, #EA27C2 100%)); */
    background: linear-gradient(270deg, #1d18dd 20%, #EA27C2 80%);
    mix-blend-mode: hard-light;
    filter: blur(40px);
    width: 70%;
    height: 70%;
    left: 16%;
    top: 16%;
}

.right-crop-corner {
    clip-path: polygon(0 0, 96% 0, 100% 30px, 100% 100%, 0 100%);
}

.bottom-right-corner {
    --all: 0px;
    --b: #2f2d2d;
    --top-right: 20px;

    border: 2px solid var(--b);

    background:
        linear-gradient(45deg, var(--b) 0 calc(var(--bottom-left, var(--all)) + 0px), transparent 0) bottom left / 50% 50%,
        linear-gradient(-45deg, var(--b) 0 calc(var(--bottom-right, var(--all)) + 0px), transparent 0) bottom right / 50% 50%,
        linear-gradient(135deg, var(--b) 0 calc(var(--top-left, var(--all)) + 0px), transparent 0) top left / 50% 50%,
        linear-gradient(-135deg, var(--b) 0 calc(var(--top-right, var(--all)) + 2px), transparent 0) top right / 50% 50%,
        linear-gradient(219deg, rgb(28 27 27) 0%, rgba(8, 7, 7, 1) 60%);

    background-origin: border-box;
    background-repeat: no-repeat;

    -webkit-mask:
        linear-gradient(45deg, transparent 0 var(--bottom-left, var(--all)), #fff 0) bottom left,
        linear-gradient(-45deg, transparent 0 var(--bottom-right, var(--all)), #fff 0) bottom right,
        linear-gradient(135deg, transparent 0 var(--top-left, var(--all)), #fff 0) top left,
        linear-gradient(-135deg, transparent 0 var(--top-right, var(--all)), #fff 0) top right;

    -webkit-mask-size: 51.5% 50.5%;
    /* Updated from 50.5% to avoid overdraw */
    -webkit-mask-repeat: no-repeat;


}

.top-left-bottom-right-corner {
    --all: 0px;
    --b: #6a6a6a;
    --top-left: 20px;
    --bottom-right: 20px;

    border: 2px solid var(--b);

    background:
        linear-gradient(45deg, var(--b) 0 calc(var(--bottom-left, var(--all)) + 0px), transparent 0) bottom left / 50% 50%,
        linear-gradient(-45deg, var(--b) 0 calc(var(--bottom-right, var(--all)) + 2px), transparent 0) bottom right / 50% 50%,
        linear-gradient(135deg, var(--b) 0 calc(var(--top-left, var(--all)) + 2px), transparent 0) top left / 50% 50%,
        linear-gradient(-135deg, var(--b) 0 calc(var(--top-right, var(--all)) + 0px), transparent 0) top right / 50% 50%,
        linear-gradient(219deg, rgba(55, 45, 45, 0.19) 0%, rgb(0, 0, 0) 100%);

    background-origin: border-box;
    background-repeat: no-repeat;

    -webkit-mask:
        linear-gradient(45deg, transparent 0 var(--bottom-left, var(--all)), #fff 0) bottom left,
        linear-gradient(-45deg, transparent 0 var(--bottom-right, var(--all)), #fff 0) bottom right,
        linear-gradient(135deg, transparent 0 var(--top-left, var(--all)), #fff 0) top left,
        linear-gradient(-135deg, transparent 0 var(--top-right, var(--all)), #fff 0) top right;

    -webkit-mask-size: 51.5% 50.5%;
    /* Updated from 50.5% to avoid overdraw */
    -webkit-mask-repeat: no-repeat;


}

.top-left-bottom-right-corner-form-input {
    --all: 0px;
    --b: #6a6a6a;
    --top-left: 19px;
    --bottom-right: 19px;

    border: 2px solid var(--b);

    background:
        linear-gradient(45deg, var(--b) 0 calc(var(--bottom-left, var(--all)) + 0px), transparent 0) bottom left / 50% 50%,
        linear-gradient(-45deg, var(--b) 0 calc(var(--bottom-right, var(--all)) + 2px), transparent 0) bottom right / 50% 50%,
        linear-gradient(135deg, var(--b) 0 calc(var(--top-left, var(--all)) + 2px), transparent 0) top left / 50% 50%,
        linear-gradient(-135deg, var(--b) 0 calc(var(--top-right, var(--all)) + 0px), transparent 0) top right / 50% 50%,
        linear-gradient(117deg, rgba(62, 62, 62, 0.43) 3.67%, rgba(8, 7, 7, 0.43) 76.95%);

    background-origin: border-box;
    background-repeat: no-repeat;

    -webkit-mask:
        linear-gradient(45deg, transparent 0 var(--bottom-left, var(--all)), #fff 0) bottom left,
        linear-gradient(-45deg, transparent 0 var(--bottom-right, var(--all)), #fff 0) bottom right,
        linear-gradient(135deg, transparent 0 var(--top-left, var(--all)), #fff 0) top left,
        linear-gradient(-135deg, transparent 0 var(--top-right, var(--all)), #fff 0) top right;

    -webkit-mask-size: 51.5% 52.5%;
    /* Updated from 50.5% to avoid overdraw */
    -webkit-mask-repeat: no-repeat;


}

.color-btn-gradient-cut {
    --all: 0px;
    --b: #6a6a6a00;
    --top-left: 9px;
    --bottom-right: 9px;
    border: 2px solid var(--b);
    background: linear-gradient(45deg, var(--b) 0 calc(var(--bottom-left, var(--all)) + 0px), transparent 0) bottom left / 50% 50%, linear-gradient(-45deg, var(--b) 0 calc(var(--bottom-right, var(--all)) + 2px), transparent 0) bottom right / 50% 50%, linear-gradient(135deg, var(--b) 0 calc(var(--top-left, var(--all)) + 2px), transparent 0) top left / 50% 50%, linear-gradient(-135deg, var(--b) 0 calc(var(--top-right, var(--all)) + 0px), transparent 0) top right / 50% 50%, linear-gradient(270deg, #307FE2 0%, #EA27C2 100%);
    background-origin: border-box;
    background-repeat: no-repeat;
    -webkit-mask: linear-gradient(45deg, transparent 0 var(--bottom-left, var(--all)), #fff 0) bottom left, linear-gradient(-45deg, transparent 0 var(--bottom-right, var(--all)), #fff 0) bottom right, linear-gradient(135deg, transparent 0 var(--top-left, var(--all)), #fff 0) top left, linear-gradient(-135deg, transparent 0 var(--top-right, var(--all)), #fff 0) top right;
    -webkit-mask-size: 51.5% 52.5%;
    -webkit-mask-repeat: no-repeat;
    transition: all 0.3s ease-in-out;
}

.top-left-bottom-right-corner-form-input:focus {
    --b: #2354f7;
}

.color-btn-gradient-cut:hover {
    -all: 0px;
    --b: #d0d0d0;
    --top-left: 9px;
    --bottom-right: 9px;
    border: 2px solid var(--b);
    background: linear-gradient(45deg, var(--b) 0 calc(var(--bottom-left, var(--all)) + 0px), transparent 0) bottom left / 50% 50%, linear-gradient(-45deg, var(--b) 0 calc(var(--bottom-right, var(--all)) + 2px), transparent 0) bottom right / 50% 50%, linear-gradient(135deg, var(--b) 0 calc(var(--top-left, var(--all)) + 2px), transparent 0) top left / 50% 50%, linear-gradient(-135deg, var(--b) 0 calc(var(--top-right, var(--all)) + 0px), transparent 0) top right / 50% 50%, linear-gradient(18deg, #307FE2 0%, #EA27C2 100%);
    background-origin: border-box;
    background-repeat: no-repeat;
    -webkit-mask: linear-gradient(45deg, transparent 0 var(--bottom-left, var(--all)), #fff 0) bottom left, linear-gradient(-45deg, transparent 0 var(--bottom-right, var(--all)), #fff 0) bottom right, linear-gradient(135deg, transparent 0 var(--top-left, var(--all)), #fff 0) top left, linear-gradient(-135deg, transparent 0 var(--top-right, var(--all)), #fff 0) top right;
    -webkit-mask-size: 51.5% 52.5%;
    -webkit-mask-repeat: no-repeat;
}

:focus-visible {
    outline: none;
}



@media (max-width: 1280px) {
    .top-left-bottom-right-corner-form-input {
        --all: 0px;
        --b: #6a6a6a;
        --top-left: 15px;
        --bottom-right: 15px;

        border: 2px solid var(--b);

        background:
            linear-gradient(45deg, var(--b) 0 calc(var(--bottom-left, var(--all)) + 0px), transparent 0) bottom left / 50% 50%,
            linear-gradient(-45deg, var(--b) 0 calc(var(--bottom-right, var(--all)) + 2px), transparent 0) bottom right / 50% 50%,
            linear-gradient(135deg, var(--b) 0 calc(var(--top-left, var(--all)) + 2px), transparent 0) top left / 50% 50%,
            linear-gradient(-135deg, var(--b) 0 calc(var(--top-right, var(--all)) + 0px), transparent 0) top right / 50% 50%,
            linear-gradient(117deg, rgba(62, 62, 62, 0.43) 3.67%, rgba(8, 7, 7, 0.43) 76.95%);

        background-origin: border-box;
        background-repeat: no-repeat;

        -webkit-mask:
            linear-gradient(45deg, transparent 0 var(--bottom-left, var(--all)), #fff 0) bottom left,
            linear-gradient(-45deg, transparent 0 var(--bottom-right, var(--all)), #fff 0) bottom right,
            linear-gradient(135deg, transparent 0 var(--top-left, var(--all)), #fff 0) top left,
            linear-gradient(-135deg, transparent 0 var(--top-right, var(--all)), #fff 0) top right;

        -webkit-mask-size: 51.5% 52.5%;
        /* Updated from 50.5% to avoid overdraw */
        -webkit-mask-repeat: no-repeat;


    }

}

@media (max-width: 992px) {
    .top-left-bottom-right-corner-form-input {
        --all: 0px;
        --b: #6a6a6a;
        --top-left: 15px;
        --bottom-right: 15px;
        border: 2px solid var(--b);
        background: linear-gradient(45deg, var(--b) 0 calc(var(--bottom-left, var(--all)) + 0px), transparent 0) bottom left / 50% 50%, linear-gradient(-45deg, var(--b) 0 calc(var(--bottom-right, var(--all)) + 2px), transparent 0) bottom right / 50% 50%, linear-gradient(135deg, var(--b) 0 calc(var(--top-left, var(--all)) + 2px), transparent 0) top left / 50% 50%, linear-gradient(-135deg, var(--b) 0 calc(var(--top-right, var(--all)) + 0px), transparent 0) top right / 50% 50%, linear-gradient(117deg, rgba(62, 62, 62, 0.43) 3.67%, rgba(8, 7, 7, 0.43) 76.95%);
        background-origin: border-box;
        background-repeat: no-repeat;
        -webkit-mask: linear-gradient(45deg, transparent 0 var(--bottom-left, var(--all)), #fff 0) bottom left, linear-gradient(-45deg, transparent 0 var(--bottom-right, var(--all)), #fff 0) bottom right, linear-gradient(135deg, transparent 0 var(--top-left, var(--all)), #fff 0) top left, linear-gradient(-135deg, transparent 0 var(--top-right, var(--all)), #fff 0) top right;
        -webkit-mask-size: 51.5% 52.5%;
        -webkit-mask-repeat: no-repeat;
    }


}

@media (max-width: 640px) {
    .boxes-corner-outer-second {
        clip-path: polygon(9% 0, 100% 0, 100% 94%, 91% 100%, 0 100%, 0 8%);
    }
}

@media (max-width: 380px) {
    .boxes-corner-outer-second {
        clip-path: polygon(10% 0, 100% 0, 100% 94%, 91% 100%, 0 100%, 0 8%);
    }

}



#voiceContainerSecond {
    transition: transform 0.8s ease, bottom 0.8s ease, right 0.8s ease, opacity 0.8s ease;

}

.pinned {
    position: fixed !important;
    bottom: 50px !important;
    right: 0% !important;
    z-index: 50 !important;
    transform: translateY(0);
    /* Reset any translate if used before */
    opacity: 1;
}

#voiceContainerSecond:not(.pinned) {
    transform: translateY(30px);
    opacity: 0;
    pointer-events: none;
}

/* Custom positioning logic using transform instead of top/bottom directly */
.voice-container {
    opacity: 1;
    transform: translateY(0) translateX(0);
    transition: transform 0.4s ease, opacity 0.4s ease;
}

.voice-container.pinned {
    transform: translateY(calc(100vh - 50px - 136px)) translateX(calc(8% - 32%));
    opacity: 1;
}


/* Chrome-only background color override */
@media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution:.001dpcm) {
    .chrome-bg {
        background-color: #29293f !important;
        /* Your Chrome-only color */
    }
}



.industries-corner-box {
    --all: 0px;
    --b: #c6c6c6;
    --top-left: 9px;
    --bottom-right: 9px;
    border: 1px solid var(--b);
    background: linear-gradient(45deg, var(--b) 0 calc(var(--bottom-left, var(--all)) + 0px), transparent 0) bottom left / 50% 50%, linear-gradient(-45deg, var(--b) 0 calc(var(--bottom-right, var(--all)) + 1px), transparent 0) bottom right / 50% 50%, linear-gradient(135deg, var(--b) 0 calc(var(--top-left, var(--all)) + 1px), transparent 0) top left / 50% 50%, linear-gradient(-135deg, var(--b) 0 calc(var(--top-right, var(--all)) + 0px), transparent 0) top right / 50% 50%, linear-gradient(117deg, rgba(62, 62, 62, 0.21) 3.67%, rgba(255, 255, 255, 0.09) 76.95%);
    background-origin: border-box;
    background-repeat: no-repeat;
    -webkit-mask: linear-gradient(45deg, transparent 0 var(--bottom-left, var(--all)), #fff 0) bottom left, linear-gradient(-45deg, transparent 0 var(--bottom-right, var(--all)), #fff 0) bottom right, linear-gradient(135deg, transparent 0 var(--top-left, var(--all)), #fff 0) top left, linear-gradient(-135deg, transparent 0 var(--top-right, var(--all)), #fff 0) top right;
    -webkit-mask-size: 51.5% 52.5%;
    -webkit-mask-repeat: no-repeat;
}


.our-solution-corner-box {
    --all: 0px;
    --b: #737373;
    --top-left: 20px;
    --bottom-right: 20px;
    border: 2px solid var(--b);
    background: linear-gradient(45deg, var(--b) 0 calc(var(--bottom-left, var(--all)) + 0px), transparent 0) bottom left / 50% 50%, linear-gradient(-45deg, var(--b) 0 calc(var(--bottom-right, var(--all)) + 2px), transparent 0) bottom right / 50% 50%, linear-gradient(135deg, var(--b) 0 calc(var(--top-left, var(--all)) + 2px), transparent 0) top left / 50% 50%, linear-gradient(-135deg, var(--b) 0 calc(var(--top-right, var(--all)) + 0px), transparent 0) top right / 50% 50%, linear-gradient(117.09deg, #3E3E3ECC -17.33%, #080707 71.95%);
    background-origin: border-box;
    background-repeat: no-repeat;
    -webkit-mask: linear-gradient(45deg, transparent 0 var(--bottom-left, var(--all)), #fff 0) bottom left, linear-gradient(-45deg, transparent 0 var(--bottom-right, var(--all)), #fff 0) bottom right, linear-gradient(135deg, transparent 0 var(--top-left, var(--all)), #fff 0) top left, linear-gradient(-135deg, transparent 0 var(--top-right, var(--all)), #fff 0) top right;
    -webkit-mask-size: 51.5% 50.5%;
    -webkit-mask-repeat: no-repeat;
}


@keyframes smoothBlink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

#blinkingText {
    animation: smoothBlink 1.5s infinite;
}


/* Blinking Circle */



.circle-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    position: relative;
    /* needed only if you add animations or tooltips */
}

.outer-circle {
    width: 35px;
    height: 35px;
    background: rgba(234, 39, 194, 0.3);
    border-radius: 50%;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.inner-circle {
    width: 17px;
    height: 17px;
    background: rgba(234, 39, 194, 1);
    border-radius: 50%;
    z-index: 2;
}


/* .blink {
    animation: blink 1.2s infinite alternate;
}

@keyframes blink {
    0% {
        opacity: 0.9;
    }

    100% {
        opacity: 0.5;
    }
}

@keyframes icon-bounce {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}
.continue-bounce {
    animation: icon-bounce 0.5s infinite alternate;
} 
.group:hover img {
    animation: icon-bounce 0.5s;
} */

.gradientText {

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

/* .continue-bounce {
    animation: icon-bounce 0.5s infinite alternate;
} */