/*=========================================
            CTA SECTION START
=========================================*/

.cta{
    position: relative;
    overflow: hidden;
    padding: 30px 30px;
    margin: 0px auto;
    padding-bottom: -40px;
    background: linear-gradient(135deg,#69A41A 0%,#5A9416 35%,#4C8112 100%);
}

.cta .container{
    max-width: 1320px;
    margin: auto;
    position: relative;
    z-index: 1;
}

.cta-content{
    max-width: 850px;
    margin: auto;
    text-align: center;
}

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


.cta-content h2{

    font-size:42px;
    font-weight:800;
    color:#fff;
    margin-bottom:15px;
    white-space:nowrap;   /* Ek line me */
}

/*=========================
        Paragraph
=========================*/

.cta-content p{

    font-size:17px;
    line-height:1.7;
    max-width:720px;
    margin:auto;
    color:rgba(255,255,255,.95);

}

/*=========================
        Button
=========================*/

.cta-btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;

    margin-top: 30px;

    background: #fff;
    color: #69A41A;

    text-decoration: none;

    padding: 15px 20px;

    border-radius: 60px;

    font-size: 15px;
    font-weight: 700;

    transition: .35s;
}

.cta-btn i{
    transition: .35s;
}

/*=========================
      Hover Effect
=========================*/

.cta-btn:hover{

    background: #f5f5f5;

    transform: translateY(-4px);

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

}

.cta-btn:hover i{

    transform: translateX(6px);

}

/*=========================
      Decorative Circle
=========================*/

.cta-circle{

    position: absolute;

    border-radius: 50%;

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

    z-index: 1;

}

.cta-circle-left{

    width: 300px;
    height: 300px;

    left: -150px;
    top: -70px;

}

.cta-circle-right{

    width: 220px;
    height: 220px;

    right: -90px;
    bottom: -70px;

}




/*=========================================
        CTA RESPONSIVE START
=========================================*/

/* Large Laptop */

@media(max-width:1200px){

    .cta{
        padding:70px 20px;
    }

    .cta-content h2{
        font-size:52px;
    }

    .cta-content p{
        font-size:20px;
    }

}


/* Tablet */

@media(max-width:991px){

    .cta{
        padding:65px 20px;
        margin:70px 0;
    }

    .cta-content{
        max-width:700px;
    }

    .cta-content h2{
        font-size:42px;
        line-height:1.2;
    }

    .cta-content p{
        font-size:18px;
        line-height:1.7;
    }

    .cta-btn{

        padding:16px 34px;

        font-size:17px;
    }

    .cta-circle-left{

        width:220px;
        height:220px;

        left:-120px;
        top:-90px;

    }

    .cta-circle-right{

        width:180px;
        height:180px;

        right:-90px;
        bottom:-70px;

    }

}


/* Mobile */

@media(max-width:767px){

    .cta{

        padding:55px 18px;

        margin:0px 0;

    }

    .cta-content{

        max-width:100%;

    }

    .cta-content h2{

        font-size:34px;

        line-height:1.25;

        margin-bottom:16px;

    }

    .cta-content p{

        font-size:16px;

        line-height:1.8;

    }

    .cta-btn{

        margin-top:30px;

        padding:15px 30px;

        font-size:16px;

        gap:10px;

    }

    .cta-circle-left{

        width:170px;

        height:170px;

        left:-90px;

        top:-70px;

    }

    .cta-circle-right{

        width:150px;

        height:150px;

        right:-70px;

        bottom:-60px;

    }

}

@media(max-width:768px){

    .cta{

        padding:40px 18px;

    }

    .cta-content h2{

        font-size:20px;

        white-space:normal;

    }

    .cta-content p{

        font-size:16px;

    }

}


/* Small Mobile */

@media(max-width:480px){

    .cta{

        padding:50px 15px;

    }

    .cta-content h2{

        font-size:30px;

    }

    .cta-content p{

        font-size:15px;

    }

    .cta-btn{

        width:100%;

        max-width:240px;

        justify-content:center;

        padding:15px 22px;

        font-size:15px;

    }

}


/*=========================================
            SIMPLE FADE ANIMATION
=========================================*/

.cta{

    opacity:0;

    transform:translateY(60px);

    transition:all .8s ease;

}

.cta.show{

    opacity:1;

    transform:translateY(0);

}

/*=========================================
        CTA RESPONSIVE END
=========================================*/