/*
Theme Name: Astra Child
Theme URI: https://wpastra.com/
Author: Brainstorm Force
Author URI: https://wpastra.com/about/
Description: Astra is a fast, fully customizable & beautiful WordPress theme suitable for blog, personal portfolio, business website and WooCommerce storefront.
Version: 1.0.0
Template: astra
Text Domain: astra-child
Tags: custom-menu, custom-logo, entertainment, one-column, two-columns, left-sidebar, e-commerce, right-sidebar, custom-colors, editor-style, featured-images, full-width-template, microformats, post-formats, rtl-language-support, theme-options, threaded-comments, translation-ready, blog
*/

/* =============================================================================
   Add your custom styles below
   ============================================================================= */


p {
    margin-bottom: 0.6rem !important;
}

:root {
    --primary-color:  #ffb2aa;
    --secondary-color: #9000ff;
    --third-color: #08d9ff;
    --primary-color-rgb: 54, 48, 255;
    --secondary-color-rgb: 144, 0, 255;
    --third-color-rgb: 8, 217, 255;
    --link-color: #006cff;
    --link-color-hover: #1227b8;
    --link-color-active: #1227b8;
     --gradient-color-from: #ef6c5e;
    --gradient-color-to: #ffb2aa;
    --gradient-color-from-rgb: 36, 57, 255;
    --gradient-color-to-rgb: 144, 0, 255;
}

.cl-tl {
	color: var(--primary-color);
}

.ct-heading  span:after {
    content: '';
    background-color: var(--primary-color);
    width: 80px;
    height: 3px;
    position: absolute;
    top: 50%;
   margin-left:0.8rem;
    -webkit-transform: translate(0,-50%);
    -khtml-transform: translate(0,-50%);
    -moz-transform: translate(0,-50%);
    -ms-transform: translate(0,-50%);
    -o-transform: translate(0,-50%);
    transform: translate(0,-50%)
}


.ct-banner3 {
    height:auto;
    position: relative;
    z-index: 1;
    
}


@media screen and (max-width: 767px) {
    .ct-banner3 {
        margin-left:0;
        height: auto
    }
}

.ct-banner3:after {
    content: '';
    width: 100%;
    height: 70%;
    background-color: var(--gradient-color-from);
    background-image: -webkit-gradient(linear,left top,right top,from(var(--gradient-color-from)),to(var(--gradient-color-to)));
    background-image: -webkit-linear-gradient(to right,var(--gradient-color-from),var(--gradient-color-to));
    background-image: -moz-linear-gradient(to right,var(--gradient-color-from),var(--gradient-color-to));
    background-image: -ms-linear-gradient(to right,var(--gradient-color-from),var(--gradient-color-to));
    background-image: -o-linear-gradient(to right,var(--gradient-color-from),var(--gradient-color-to));
    background-image: linear-gradient(to right,var(--gradient-color-from),var(--gradient-color-to));
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='var(--gradient-color-from)',endColorStr='var(--gradient-color-to)',gradientType='1');
    position: absolute;
    bottom: 0;
    left: 0;
    -webkit-border-radius: 465px 0 5px 5px;
    -khtml-border-radius: 465px 0 5px 5px;
    -moz-border-radius: 465px 0 5px 5px;
    -ms-border-radius: 465px 0 5px 5px;
    -o-border-radius: 465px 0 5px 5px;
    border-radius: 465px 0 5px 5px;
    z-index: -2
}




@media screen and (max-width: 767px) {
    .ct-banner3:after {
        -webkit-border-radius:225px 0 5px 5px;
        -khtml-border-radius: 225px 0 5px 5px;
        -moz-border-radius: 225px 0 5px 5px;
        -ms-border-radius: 225px 0 5px 5px;
        -o-border-radius: 225px 0 5px 5px;
        border-radius: 225px 0 5px 5px
    }
}


@media screen and (max-width: 767px) {
    .ct-banner3 .ct-banner-image {
        left:0
    }
}


@media screen and (max-width: 767px) {
 
	.float-non {
        position: relative !important;
        left: 0 !important;
        width: 100%;
        right: 0;
        top: 0 !important;
        transform: none !important;
    }
}

/* circle */

 .ct-banner-inner:before {
    content: '';
    width: 550px;
    height: 550px;
    border: 66px solid var(--primary-color);
    position: absolute;
    top: 50%;  
    left: 50%; 
    transform: translate(-50%, -50%);
    z-index: -1;
    -webkit-border-radius: 100%;
    -khtml-border-radius: 100%;
    -moz-border-radius: 100%;
    -ms-border-radius: 100%;
    -o-border-radius: 100%;
    border-radius: 100%;
    animation: el-bounce 3s infinite linear alternate
}

@keyframes el-bounce {
    0% {
        transform: translate(-50%, -50%) scale(0.97);
    }
    100% {
        transform: translate(-50%, -50%) scale(1.03);
    }
}

@media screen and (max-width: 1199px) {
 .ct-banner-inner:before {
        width:360px;
        height: 360px;
        border-width: 40px;
        right: -30px
    }
}

@media screen and (max-width: 767px) {
   .ct-banner-inner:before {
        width:280px;
        height: 280px;
        border-width: 32px;
        right: -50px
    }
}