/*=========================================
CTA Section
=========================================*/

.cta-section{

    position:relative;

    padding:50px 0;

    overflow:hidden;

    background:linear-gradient(
        135deg,
        #8B0000,
        #A00000,
        #C62828,
        #F04F4E
    );

    background-size:300% 300%;

    animation:gradientMove 12s ease infinite;

}

@keyframes gradientMove{

    0%{background-position:0% 50%;}

    50%{background-position:100% 50%;}

    100%{background-position:0% 50%;}

}

/*=========================================
Glass Card
=========================================*/

.cta-wrapper{

    position:relative;

    z-index:5;

    max-width:950px;

    margin:auto;

    text-align:center;

    background:rgba(255,255,255,.08);

    backdrop-filter:blur(22px);

    border:1px solid rgba(255,255,255,.18);

    border-radius:40px;

    padding:70px;

    box-shadow:

        0 25px 60px rgba(0,0,0,.20),

        inset 0 1px 0 rgba(255,255,255,.20);

}

/*=========================================
Heading
=========================================*/

.cta-wrapper .section-tag{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:12px 22px;

    border-radius:50px;

    background:rgba(255,255,255,.12);

    color:#fff;

    margin-bottom:25px;

    border:1px solid rgba(255,255,255,.18);

}

.cta-wrapper h2{

    color:#fff;

    font-size:40px;

    line-height:1.15;

    margin-bottom:20px;

}

.cta-wrapper p{

    max-width:700px;

    margin:0 auto;

    color:rgba(255,255,255,.92);

    font-size:18px;

    line-height:1.8;

}

/*=========================================
Features
=========================================*/

.cta-features{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:18px;

    margin:45px 0;

}

.cta-features span{

    display:flex;

    align-items:center;

    gap:10px;

    padding:14px 24px;

    border-radius:50px;

    background:rgba(255,255,255,.10);

    color:#fff;

    border:1px solid rgba(255,255,255,.16);

    transition:.35s;

}

.cta-features span:hover{

    transform:translateY(-5px);

    background:rgba(255,255,255,.18);

}

.cta-features i{

    color:#FFD54F;

}

/*=========================================
Buttons
=========================================*/

.cta-buttons{

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;

}

.call-btn{

    position:relative;

    display:inline-flex;

    align-items:center;

    gap:12px;

    padding:12px 34px;

    border-radius:60px;

    background:rgba(255,255,255,.12);

    color:#fff;

    font-weight:700;

    border:1px solid rgba(255,255,255,.18);

    overflow:hidden;

    transition:.4s;

}

.call-btn:hover{

    transform:translateY(-6px);

    background:#fff;

    color:var(--primary-color);

    box-shadow:0 18px 40px rgba(0,0,0,.18);

}

/*=========================================
Floating Icons
=========================================*/

.shape{

    position:absolute;

    color:rgba(255,255,255,.12);

    animation:floatIcon 8s ease-in-out infinite;

    pointer-events:none;

}

.shape i{

    font-size:45px;

}

.shape-1{

    top:10%;

    left:8%;

}

.shape-2{

    top:18%;

    right:10%;

}

.shape-3{

    bottom:12%;

    left:15%;

}

.shape-4{

    bottom:20%;

    right:12%;

}

.shape-5{

    top:50%;

    left:50%;

}

@keyframes floatIcon{

    0%{

        transform:translateY(0) rotate(0);

    }

    50%{

        transform:translateY(-18px) rotate(10deg);

    }

    100%{

        transform:translateY(0) rotate(0);

    }

}

/*=========================================
Responsive
=========================================*/

@media(max-width:991px){

    .cta-wrapper{

        padding:50px 30px;

    }

    .cta-wrapper h2{

        font-size:42px;

    }

}

@media(max-width:767px){

    .cta-section{

        padding:80px 0;

    }

    .cta-wrapper{

        border-radius:25px;

        padding:40px 25px;

    }

    .cta-wrapper h2{

        font-size:32px;

    }

    .cta-wrapper p{

        font-size:16px;

    }

    .cta-features{

        flex-direction:column;

        align-items:center;

    }

    .cta-buttons{

        flex-direction:column;

    }

    .cta-buttons .hero-btn,

    .call-btn{

        width:100%;

        justify-content:center;

    }

}
.cta-wrapper::before{

    content:"";

    position:absolute;

    inset:-2px;

    border-radius:42px;

    background:linear-gradient(
        90deg,
        rgba(255,255,255,.6),
        transparent,
        rgba(255,255,255,.6)
    );

    background-size:300% 300%;

    animation:borderMove 8s linear infinite;

    z-index:-1;

}

@keyframes borderMove{

    0%{

        background-position:0% 50%;

    }

    100%{

        background-position:300% 50%;

    }

}
.cta-blob{

    position:absolute;

    border-radius:50%;

    filter:blur(90px);

    opacity:.35;

    animation:blobMove 12s ease-in-out infinite;

}

.blob-1{

    width:280px;

    height:280px;

    background:#ff8080;

    top:-80px;

    left:-80px;

}

.blob-2{

    width:240px;

    height:240px;

    background:#ffffff;

    opacity:.15;

    right:-80px;

    top:80px;

}

.blob-3{

    width:260px;

    height:260px;

    background:#ffb6b6;

    bottom:-100px;

    left:40%;

}

@keyframes blobMove{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-35px);

    }

}
.hero-btn,
.call-btn{

    position:relative;

    overflow:hidden;

}

.hero-btn::after,
.call-btn::after{

    content:"";

    position:absolute;

    top:-40%;

    left:-120%;

    width:60px;

    height:180%;

    background:rgba(255,255,255,.45);

    transform:rotate(25deg);

    transition:1s;

}

.hero-btn:hover::after,
.call-btn:hover::after{

    left:150%;

}
.particles span{

    position:absolute;

    width:8px;

    height:8px;

    background:rgba(255,255,255,.35);

    border-radius:50%;

    animation:particleFloat 8s linear infinite;

}

.particles span:nth-child(1){

    left:10%;

    top:20%;

}

.particles span:nth-child(2){

    left:28%;

    top:70%;

}

.particles span:nth-child(3){

    right:15%;

    top:25%;

}

.particles span:nth-child(4){

    right:25%;

    bottom:20%;

}

.particles span:nth-child(5){

    left:55%;

    top:15%;

}

.particles span:nth-child(6){

    left:75%;

    bottom:12%;

}

@keyframes particleFloat{

    0%{

        transform:translateY(0);

        opacity:.2;

    }

    50%{

        transform:translateY(-30px);

        opacity:1;

    }

    100%{

        transform:translateY(0);

        opacity:.2;

    }

}

.cta-wave{

    position:absolute;

    left:0;

    bottom:-2px;

    width:100%;

    line-height:0;

}

.cta-wave svg{

    width:100%;

    height:90px;

    display:block;

}