/*
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: #08afcd;
    --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: #17e8f2;
    --gradient-color-to: #07b5cb;
    --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::before {
    background-image: -webkit-gradient(linear, left top, right top, from(#2439FF), to(#9000FF));
    background-image: -webkit-linear-gradient(to left, #2439FF, #9000FF);
    background-image: -moz-linear-gradient(to left, #2439FF, #9000FF);
    background-image: -ms-linear-gradient(to left, #2439FF, #9000FF);
    background-image: -o-linear-gradient(to left, #2439FF, #9000FF);
    background-image: linear-gradient(to left, #2439FF, #9000FF);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#2439FF', endColorStr='#9000FF', gradientType='1');
}

.ct-banner3 {
    height: 590px;
    position: relative;
    z-index: 1;
    margin-left: 80px
}

@media screen and (max-width: 1199px) {
    .ct-banner3 {
        margin-left:48px
    }
}

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


.ct-banner1: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: 48px 0 48px 5px;
    z-index: -2;
}

.ct-banner3:before {
    content: '';
    width: 100%;
    height: 100%;
    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;
    top: 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:before {
        -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
    }
}

.ct-banner3:after {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 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: -1;
    overflow: hidden;
    /*background-image: url(../images/overlay-shape3.png);*/
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover
}

@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
    }
}

.ct-banner3 .ct-banner-image {
    position: absolute;
    top: 45px;
    left: -75px;
    right: 74px;
    border: 10px solid #fff;
    -webkit-border-radius: 100%;
    -khtml-border-radius: 100%;
    -moz-border-radius: 100%;
    -ms-border-radius: 100%;
    -o-border-radius: 100%;
    border-radius: 100%
}

.ct-banner3 .ct-banner-image img {
    -webkit-border-radius: 100%;
    -khtml-border-radius: 100%;
    -moz-border-radius: 100%;
    -ms-border-radius: 100%;
    -o-border-radius: 100%;
    border-radius: 100%
}

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

.ct-banner3 .ct-banner-counter {
    position: absolute;
    top: -10px;
    left: -90px;
    width: 170px;
    height: 170px;
    border: 10px solid #fff;
    border-radius: 170px;
    overflow: hidden;
    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');
    -webkit-box-shadow: 0 10px 60px rgba(0,10,80,.15);
    -khtml-box-shadow: 0 10px 60px rgba(0,10,80,.15);
    -moz-box-shadow: 0 10px 60px rgba(0,10,80,.15);
    -ms-box-shadow: 0 10px 60px rgba(0,10,80,.15);
    -o-box-shadow: 0 10px 60px rgba(0,10,80,.15);
    box-shadow: 0 10px 60px rgba(0,10,80,.15);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    text-align: center
}

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

.ct-banner3 .ct-banner-counter .ct-counter-title {
    font-size: 18px;
    text-transform: uppercase;
    color: #fff;
    line-height: 1;
    white-space: nowrap;
    margin-bottom: 10px
}

.ct-banner3 .ct-banner-counter .ct-counter-number-value {
    font-size: 44px;
    color: #fff;
    font-weight: 700;
    line-height: 1
}

.ct-banner3 .item--title {
    position: absolute;
    bottom: 50px;
    right: 18px;
    font-size: 24px;
    color: #fff;
    font-weight: 700;
    white-space: nowrap;
    -webkit-transform: rotate(-90deg)translate(100%,0);
    -khtml-transform: rotate(-90deg)translate(100%,0);
    -moz-transform: rotate(-90deg)translate(100%,0);
    -ms-transform: rotate(-90deg)translate(100%,0);
    -o-transform: rotate(-90deg)translate(100%,0);
    transform: rotate(-90deg)translate(100%,0);
    transform-origin: right bottom
}

@media screen and (max-width: 767px) {
    .ct-banner3 .item--title {
        right:0;
        left: 20px;
        white-space: inherit;
        -webkit-transform: rotate(0)translate(0%,0);
        -khtml-transform: rotate(0)translate(0%,0);
        -moz-transform: rotate(0)translate(0%,0);
        -ms-transform: rotate(0)translate(0%,0);
        -o-transform: rotate(0)translate(0%,0);
        transform: rotate(0)translate(0%,0);
        bottom: 30px;
        font-size: 20px;
        line-height: normal
    }
}