/*--------------------------------------------------------------------------------------
Theme Name: Agencyfy
Theme URI: http://quomodosoft.com
Author URI: http://quomodosoft.com
Description: 100% Responsive, Highly Customizable, SEO Friendly Business HTML5 Template.
Author: Mehedi Hasan Nahid
Version: 1.0
----------------------------------------------------------------------------------------
    1. TOP AREA
        2.1. WELCOME TEXT AREA
    2. FEATURES AREA
    3. ABOUT AREA
    4. VIDEO BUTTON
    5. FUN FACT AREA
    6. TESTMONIAL AREA
    7. PORTFOLIO AREA
    8. CLIENT AREA
    9. SUBSCRIBER FORM
    10. FOOTER AREA
    11. SCROLL TO TOP AREA
    12. HOME TWO
    13. TESTMONIAL STYLE 7
    14. TEAM STYLE 1
    15. PRICE AERA
    16. HOME THREE
----------------------------------------------------------------------------------------*/
/*----------------------------
    1.1. WELCOME TEXT AREA
------------------------------*/

.welcome-text-area .area-bg::before {
    background: transparent;
}

.home-parallax-layers {
    height: 800px;
}

.parallax-layer-1 {
    height: 100%;
    left: -80px !important;
    position: absolute;
    top: 17px !important;
    width: 100%;
    z-index: 9;
}

.layer.parallax-layer-2 {
    top: 20px !important;
}

.parallax-layer-3 {
    position: absolute;
    right: -30px;
    text-align: right;
    top: -45px !important;
    z-index: -1;
}

/*--------------------------------
    2. FEATURES AREA
---------------------------------*/
.doul-warapper {
    background: rgba(0, 0, 0, 0) url("assets/img/bg-layers/gray-bg.png") no-repeat scroll center bottom / 100% 100%;
}

/*.features-area {
    background: rgba(0, 0, 0, 0) url("assets/img/bg-layers/gray-bg.png") no-repeat scroll 0 0 / 100% 100%;
    padding: 200px 0;
}*/
.home-alt .text-icon-box {
    overflow: hidden;
}

.features-top-area .features-box:hover,
.features-top-area .features-box.active {
    -webkit-box-shadow: 0 16px 32px rgba(0, 0, 0, 0.1);
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.1);
}

.home-alt .text-icon-box {
    overflow: hidden;
}

.features-box-icon {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-animation: 5s ease 0s normal none infinite running border_animate;
    animation: 5s ease 0s normal none infinite running border_animate;
    background: #d1fff6 none repeat scroll 0 0;
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 120px;
    margin: 0 auto 20px;
    overflow: hidden;
    padding: 30px;
    text-align: center;
    width: 120px;
}

.text-icon-box:hover .features-box-icon {
    -webkit-animation-play-state: paused;
    animation-play-state: paused;
}

@-webkit-keyframes border_animate {
    0% {
        border-radius: 30% 70% 70% 30%/30% 30% 70% 70%;
    }

    25% {
        border-radius: 58% 42% 75% 25%/76% 46% 54% 24%;
    }

    50% {
        border-radius: 50% 50% 33% 67%/55% 27% 73% 45%;
    }

    75% {
        border-radius: 33% 67% 58% 42%/63% 68% 32% 37%;
    }
}

@keyframes border_animate {
    0% {
        border-radius: 30% 70% 70% 30%/30% 30% 70% 70%;
    }

    25% {
        border-radius: 58% 42% 75% 25%/76% 46% 54% 24%;
    }

    50% {
        border-radius: 50% 50% 33% 67%/55% 27% 73% 45%;
    }

    75% {
        border-radius: 33% 67% 58% 42%/63% 68% 32% 37%;
    }
}

.talks-circle img {
    -webkit-animation: 90s linear 0s normal none infinite running big-spin;
    animation: 90s linear 0s normal none infinite running big-spin;
}

@-webkit-keyframes big-spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes big-spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

.features-area .text-icon-box {
    background: #ffffff none repeat scroll 0 0;
    -webkit-box-shadow: 0 16px 32px rgba(0, 0, 0, 0.1);
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.1);
    padding: 60px 30px;
}

.features-area .text-icon-box a {
    font-weight: 600;
    color: #71E8F6;
}

.features-area .box-icon {
    font-size: 50px;
    color: #233653;
}

.features-area .text-icon-box::before {
    background: #48d6ee none repeat scroll 0 0;
    content: "";
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    width: 100%;
    z-index: -1;
}

.features-area .text-icon-box:hover::before,
.features-area .text-icon-box.active::before,
.features-area .text-icon-box:hover,
.features-area .text-icon-box.active,
.features-area .text-icon-box:hover .subhidding,
.features-area .text-icon-box.active .subhidding,
.features-area .text-icon-box:hover .box-icon,
.features-area .text-icon-box.active .box-icon,
.features-area .text-icon-box:hover a,
.features-area .text-icon-box.active a {
    color: #fff;
    opacity: 1;
}

.features-area .text-icon-box .subhidding {
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.features-bg-layer {
    -webkit-animation: 5s ease 0s normal none infinite running border_animate;
    animation: 5s ease 0s normal none infinite running border_animate;
    background: #5580ff none repeat scroll 0 0;
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
    height: 50%;
    left: 50%;
    opacity: 0;
    position: absolute;
    top: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    width: 50%;
    z-index: -1;
}

.features-area .text-icon-box:hover .features-bg-layer,
.features-area .text-icon-box.active .features-bg-layer {
    opacity: 0.1;
}

/*------------------------------
    HOME ALT
-------------------------------*/
.bg-animate-layer {
    background: rgba(0, 0, 0, 0) -webkit-gradient(linear, left top, right top, from(#e46a6e), to(#1c33b4)) repeat scroll 0 0;
    background: rgba(0, 0, 0, 0) linear-gradient(to right, #e46a6e, #1c33b4) repeat scroll 0 0;
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    width: 100%;
    z-index: -1;
}

.bg-animate-layer::before,
.bg-animate-layer::after {
    content: "";
    position: absolute;
    z-index: -1;
    opacity: 0;
}

.bg-animate-layer::before {
    background: rgba(0, 0, 0, 0) -webkit-gradient(linear, right top, left top, from(#e46a6e), to(#1c33b4)) repeat scroll 0 0;
    background: rgba(0, 0, 0, 0) linear-gradient(to left, #e46a6e, #1c33b4) repeat scroll 0 0;
    border-radius: 50%;
    height: 20px;
    left: 0;
    top: 0;
    -webkit-transition: 0.3s;
    transition: 0.3s;
    width: 20px;
}

.bg-animate-layer::after {
    background: rgba(0, 0, 0, 0) -webkit-gradient(linear, left top, right top, from(#e46a6e), to(#1c33b4)) repeat scroll 0 0;
    background: rgba(0, 0, 0, 0) linear-gradient(to right, #e46a6e, #1c33b4) repeat scroll 0 0;
    border-radius: 50%;
    bottom: 0;
    height: 20px;
    right: 0;
    -webkit-transition: 0.4s;
    transition: 0.4s;
    width: 20px;
}

.text-icon-box:hover .bg-animate-layer::before,
.text-icon-box:hover .bg-animate-layer::after,
.text-icon-box.active .bg-animate-layer::before,
.text-icon-box.active .bg-animate-layer::after {
    height: 100%;
    -webkit-transform: scale(2);
    transform: scale(2);
    width: 100%;
}

.text-icon-box:hover .bg-animate-layer,
.text-icon-box:hover .bg-animate-layer,
.text-icon-box.active .bg-animate-layer,
.text-icon-box.active .bg-animate-layer {
    opacity: 1;
}

.features-top-area .features-box {
    padding: 60px 30px;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}

.home-alt .features-top-area .features-box img,
.home-alt .features-top-area .features-box h3 {
    -webkit-transition: 0.3s;
    transition: 0.3s;
}

.home-alt .features-top-area .features-box:hover,
.home-alt .features-top-area .features-box.active {
    -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
    color: #ffffff;
}

.home-alt .features-top-area .features-box:hover h3,
.home-alt .features-top-area .features-box.active h3 {
    color: #ffffff;
}

.home-alt .features-top-area .features-box:hover .more,
.home-alt .features-top-area .features-box.active .more {
    color: #ffffff;
}

.home-alt .features-top-area .features-box:hover .box-img-icon img,
.home-alt .features-top-area .features-box.active .box-img-icon img {
    -webkit-filter: invert(100%) sepia(100%) saturate(100%) hue-rotate(100deg) brightness(200%) contrast(100%);
    filter: invert(100%) sepia(100%) saturate(100%) hue-rotate(100deg) brightness(200%) contrast(100%);
}

.home-three .bg-animate-layer::before {
    background: rgba(0, 0, 0, 0) -webkit-gradient(linear, right top, left top, from(#ff8a73), to(#f9748f)) repeat scroll 0 0;
    background: rgba(0, 0, 0, 0) linear-gradient(to left, #ff8a73, #f9748f) repeat scroll 0 0;
}

.home-three .bg-animate-layer {
    background: rgba(0, 0, 0, 0) -webkit-gradient(linear, left top, right top, from(#f9748f), to(#ff8a73)) repeat scroll 0 0;
    background: rgba(0, 0, 0, 0) linear-gradient(to right, #f9748f, #ff8a73) repeat scroll 0 0;
}

.home-alt.home-three .features-top-area .features-box:hover .box-img-icon img,
.home-alt.home-three .features-top-area .features-box.active .box-img-icon img {
    -webkit-filter: sepia(100%) saturate(100%) hue-rotate(100deg) brightness(200%) contrast(100%);
    filter: sepia(100%) saturate(100%) hue-rotate(100deg) brightness(200%) contrast(100%);
}

/*---------------------------
    3. ABOUT AREA
----------------------------*/

.about-top-area {
    position: relative;
    padding: 200px 0;
}

.about-top-area about-mockup-bg {
    width: -43%;
}

.about-top-area .about-mockup-bg {
    width: 53%;
}

.about-mockup-bg {
    left: -80px;
    position: absolute;
    text-align: left;
    top: 0;
    width: 60%;
}

.about-content h3 {
    font-size: 25px;
}

.promo-button {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    color: #233653;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-weight: 600;
    margin-top: 40px;
    display: inline-block;
}

.read-more {
    border-radius: 5px;
    -webkit-box-shadow: 0 0 32px rgba(173, 124, 255, 0.7);
    box-shadow: 0 0 32px rgba(173, 124, 255, 0.7);
    color: #ffffff;
    display: inline-block;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 2px;
    overflow: hidden;
    padding: 15px 30px;
    position: relative;
    text-transform: capitalize;
    z-index: 9;
}

.read-more::before,
.read-more::after {
    background: rgba(0, 0, 0, 0) -webkit-gradient(linear, right top, left top, from(#ad7cff), to(#d2adff)) repeat scroll 0 0;
    background: rgba(0, 0, 0, 0) linear-gradient(to left, #ad7cff, #d2adff) repeat scroll 0 0;
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    width: 101%;
    z-index: -2;
}

.read-more::after {
    background: rgba(0, 0, 0, 0) -webkit-gradient(linear, left top, right top, from(#ad7cff), to(#d2adff)) repeat scroll 0 0;
    background: rgba(0, 0, 0, 0) linear-gradient(to right, #ad7cff, #d2adff) repeat scroll 0 0;
    z-index: -1;
    opacity: 0;
}

.read-more:hover:after {
    opacity: 1;
}

.read-more:hover {
    color: rgb(255, 255, 255);
}


.about-parallax-layers {
    position: absolute;
    left: 0;
    top: 0;
    width: 50%;
}

.about-layer-1 {
    top: 50%;
    left: 0;
    position: absolute;
    width: 30%;
}

.about-layer-2 {
    position: absolute;
    width: 90%;
}

.about-layer-3 {
    position: absolute;
    right: 0;
    top: 100px;
    z-index: -1;
}

.dot-layer {
    right: 0;
    position: absolute;
    max-width: 300px;
    z-index: -9;
}

@media only screen and (min-width:1920px) {

    /*    .about-mockup-bg {
        width: 50%;
    }*/
    .about-mockup-bg {
        width: 65%;
    }

    .about-layer-1 {
        width: 50%;
    }

    .about-layer-2 {
        width: 100%;
    }

    .about-layer-3 {
        position: absolute;
        right: 100px;
        right: 50px;
        z-index: -1;
    }

}

@media only screen and (min-width: 992px) and (max-width: 1200px) {

    .about-layer-3 {
        top: 50px !important;
        width: 50%;
    }

    .about-layer-1 {
        width: 50%;
        top: -100px;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .about-parallax-layers {
        height: 700px;
        position: relative;
        width: 100%;
    }

    .about-layer-2 {
        width: 100%;
    }

    .about-layer-1 {
        left: 0;
        top: 0 !important;
        width: 50%;
    }

    .about-layer-3 {
        bottom: 0 !important;
        right: 0;
        top: auto;
        width: 50%;
    }
}

/*--------------------------------
    4. VIDEO BUTTON
---------------------------------*/

.video-area-popup {
    background: #ad7cff none repeat scroll 0 0;
    border-radius: 50%;
    -webkit-box-shadow: 0 0 16px #ad7cff;
    box-shadow: 0 0 16px #ad7cff;
    color: #ffffff;
    cursor: pointer;
    display: inline-block;
    font-size: 18px;
    height: 60px;
    line-height: 1;
    margin-right: 30px;
    padding-left: 5px;
    padding-top: 21px;
    position: relative;
    text-align: center;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    width: 60px;
}

.video-area-popup:hover {
    background: #ffffff none repeat scroll 0 0;
    -webkit-box-shadow: 0 0 15px;
    box-shadow: 0 0 15px;
    color: #ad7cff;
}

/*----------------------------------
    5. FUN FACT AREA
----------------------------------*/
.about-fun-fact {
    position: relative;
    -webkit-transform: translateX(50px);
    transform: translateX(50px);
    z-index: 9;
        margin-left: -61px;
}

.single-fun-fact {
    position: relative;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    height: 130px;
        border-radius: 10px;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin: 14px;
    text-align: center;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    width: 130px;
}

.single-fun-fact h3 {
    font-size: 50px;
}

.single-fun-fact:first-child,
.single-fun-fact:nth-child(3) {
    /*-webkit-transform: translateY(-50px);
    transform: translateY(-50px);*/
    position: relative;
    top: -50px;
}

.single-fun-fact:first-child,
.single-fun-fact:nth-child(4) {
    /*-webkit-transform: translateY(-50px);
    transform: translateY(-50px);*/
    position: relative;
    top: -50px;
}


.single-fun-fact::before {
    background: rgba(0, 0, 0, 0) -webkit-gradient(linear, right bottom, left top, from(#48d6ee), to(#75eaf7)) repeat scroll 0 0;
    background: rgba(0, 0, 0, 0) linear-gradient(to left bottom, #673AB7, #00b0ff) repeat scroll 0 0;
    content: "";
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    width: 100%;
    z-index: -1;
}

.single-fun-fact:hover::before,
.single-fun-fact:hover,
.single-fun-fact:hover h3,
.single-fun-fact.active::before,
.single-fun-fact.active,
.single-fun-fact.active h3 {
    color: #fff;
    opacity: 1;
        border-radius: 10px;
}

.single-fun-fact:hover::before, .single-fun-fact:hover,
 .single-fun-fact:hover p, .single-fun-fact.active::before,
 .single-fun-fact.active, .single-fun-fact.active p{

 color: #fff;
    opacity: 1;
        border-radius: 10px;
    
 }

.single-fun-fact::after {
    background: #fff none repeat scroll 0 0;
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    width: 100%;
    z-index: -1;
}

.single-fun-fact:hover::after,
.single-fun-fact.active::after {
    opacity: 0;
}

/*---------------------------------
    6. TESTMONIAL AREA
----------------------------------*/

.testmonial-slider.owl-carousel .author-img {
    max-width: 90%;
}

.author-content {
    color: #233653;
    line-height: 1.6;
}

.testmonial-slider.owl-carousel {
    overflow: hidden;
}

.testmonial-slider.owl-carousel img {
    max-width: 100%;
    width: auto;
}

.author-name-designation h4 {
    margin-bottom: 5px;
    font-size: 16px;
}

.testmonial-area .owl-nav > div {
    background: #ad7cff none repeat scroll 0 0;
    border-radius: 50%;
    color: #ffffff;
    font-size: 30px;
    height: 40px;
    left: -30px;
    opacity: 0;
    padding-top: 4px;
    position: absolute;
    text-align: center;
    top: 30%;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    visibility: hidden;
    width: 40px;
}

.testmonial-area .owl-nav > div.owl-next {
    left: auto;
    right: -30px;
}

.testmonial-area .owl-nav > div:hover {
    background: #48d6ee none repeat scroll 0 0;
}

.owl-carousel:hover .owl-nav > div.owl-next {
    opacity: 1;
    right: 0;
    visibility: visible;
}

.owl-carousel:hover .owl-nav > div.owl-prev {
    left: 0;
    opacity: 1;
    visibility: visible;
}

.testmonial-area .owl-dots {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    bottom: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 20px;
    left: calc(50% + 75px);
    position: absolute;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 120px;
    z-index: 9;
}

.testmonial-area .owl-dots > div {
    background: #233653 none repeat scroll 0 0;
    border: 1px solid #586082;
    border-radius: 50%;
    display: inline-block;
    height: 10px;
    margin: 0 5px;
    overflow: hidden;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    width: 10px;
}

.testmonial-area .owl-dots > div.active {
    background: #4ad6ee none repeat scroll 0 0;
    border-color: #4ad6ee;
    height: 15px;
    width: 15px;
}

.home-alt .testmonial-area .owl-dots > div {
    background: #fff none repeat scroll 0 0;
    border: 0 none;
}

/*---------------------------------
    7. PORTFOLIO AREA
----------------------------------*/

.portfolio-slider-area {
    width: 100vw;
}

.portfolio-area {
    overflow: hidden;
}

.portfolio-slider .owl-item:nth-child(2n) {
    margin-top: 30px;
}

.portfolio-area .owl-controls {
    margin-top: 60px;
    text-align: center;
}

.portfolio-area .owl-nav > div {
    display: inline-flex;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    margin: 0 5px;
    overflow: hidden;
    position: relative;
}

.portfolio-area .owl-nav > div.owl-prev::before,
.portfolio-area .owl-nav > div.owl-next::after {
    border-bottom: 10px solid transparent;
    border-right: 10px solid #233653;
    border-top: 10px solid transparent;
    content: "";
    display: inline-block;
    position: relative;
    width: 0;
    height: 0;
    float: left;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}

.portfolio-area .owl-nav > div.owl-prev::after,
.portfolio-area .owl-nav > div.owl-next::before {
    background: #233653;
    content: "";
    display: inline-block;
    height: 3px;
    position: relative;
    width: 50px;
    float: right;
    top: 8px;
    left: 0;
    z-index: -1;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}

.portfolio-area .owl-nav > div.owl-next::after {
    border-left: 10px solid #233653;
    border-right: 0 solid transparent;
    float: right;
    left: auto;
    right: 0;
}

.portfolio-area .owl-nav > div.owl-next::before {
    top: 8px;
}

.portfolio-area .owl-nav > div.owl-next:hover::before {
    width: 100px;
    background: #4dd3ef none repeat scroll 0 0;
}

.portfolio-area .owl-nav > div.owl-prev:hover::after {
    width: 100px;
    background: #4dd3ef none repeat scroll 0 0;
}

.portfolio-area .owl-nav > div.owl-next:hover::after {
    border-left-color: #4dd3ef;
}

.portfolio-area .owl-nav > div.owl-prev:hover::before {
    border-right-color: #4dd3ef;
}

.single-portfolio .single-portfolio-details {
    overflow: hidden;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    position: relative;
}

.portfolio-details,
.portfolio-bottom-details {
    color: #ffffff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    height: 100%;
    left: 0;
    padding: 20px;
    position: absolute;
    top: 0;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    width: 100%;
}

.portfolio-details {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background: rgba(0, 0, 0, 0) -webkit-gradient(linear, right top, left top, from(#ad7cff), to(#d2adff)) repeat scroll 0 0;
    background: rgba(0, 0, 0, 0) linear-gradient(to left, #ad7cff, #d2adff) repeat scroll 0 0;
    opacity: 0;
    place-content: center;
    -webkit-transform: scale(2);
    transform: scale(2);
    -webkit-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
}

.portfolio-bottom-details {
    background: rgba(0, 0, 0, 0.6) none repeat scroll 0 0;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
}

.portfolio-details h4,
.portfolio-bottom-details h4 {
    color: #ffffff;
    font-weight: 600;
    margin-top: 5px;
}

.portfolio-details p {
    letter-spacing: 1px;
    text-transform: uppercase;
}

.single-portfolio:hover .portfolio-details {
    opacity: 1;
    visibility: visible;
    -webkit-transform: scale(1);
    transform: scale(1);
}

.single-portfolio:hover .portfolio-bottom-details {
    opacity: 0;
    visibility: hidden;
}

.portfolio-view-details a {
    background: #ffffff none repeat scroll 0 0;
    border-radius: 50%;
    color: #ad7cff;
    display: inline-block;
    height: 50px;
    margin: 0 5px;
    padding-top: 12px;
    text-align: center;
    width: 50px;
}

.portfolio-view-details {
    margin-bottom: 20px;
}

.portfolio-view-details a:hover,
.portfolio-big-thumb:focus {
    background: #ad7cff none repeat scroll 0 0;
    color: #ffffff;
}

/*---------------------------------
    8. CLIENT AREA
----------------------------------*/
.client-area {
    overflow: hidden;
    position: relative;
    z-index: 9;
}

.client-slider-content {
    overflow: hidden;
    position: relative;
}


.client-area .owl-item {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 80px;
    place-content: center;
}

.client-area .owl-item img {
    width: auto;
    opacity: .6;
}

.client-area .owl-nav > div {
    background: #233653 none repeat scroll 0 0;
    border-radius: 50%;
    color: #ffffff;
    font-size: 30px;
    height: 40px;
    left: -40px;
    margin-top: -20px;
    opacity: 0;
    padding-top: 4px;
    position: absolute;
    text-align: center;
    top: 50%;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    width: 40px;
}

.client-area .owl-nav > div.owl-next {
    left: auto;
    right: -40px;
}

.client-slider:hover .owl-nav > div {
    opacity: 1;
}

.client-slider:hover .owl-nav > div.owl-prev {
    left: 0;
}

.client-slider:hover .owl-nav > div.owl-next {
    right: 0;
}

.client-area .owl-nav > div:hover {
    background: #4dd3ef none repeat scroll 0 0;
    color: #ffffff;
}

/*------------------------
    9. SUBSCRIBER FORM
-------------------------*/


.subscriber-form input {
    border: 0 none;
    border-radius: 5px;
    color: black;
    height: 100%;
    left: 0;
    letter-spacing: 1px;
    padding: 10px 11% 10px 30px;
    top: 0;
    height: 60px;
    display: inline-block;
    width: 58%;
}

.subscriber-form button {
    border: 0 none;
    border-radius: 5px;
    font-size: 14px;
    height: 60px;
    letter-spacing: 2px;
    text-transform: capitalize;
    -webkit-transform: inherit !important;
    transform: inherit !important;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    display: inline-block;
    margin-left: 30px;
    padding: 15px 40px;
}


label.mt10 {
    bottom: -52px;
    left: 0;
    position: absolute;
    right: 0;
    text-align: center;
}

label.mt10.valid {
    bottom: 18px;
    color: #ad7cff;
    left: 0;
    position: absolute;
    right: 0;
    text-align: center;
}

.contact-form input,
.contact-form textarea {
    margin-bottom: 20px;
    min-height: 50px;
}

.contact-form button {
    border: 0 none;
    border-radius: 5px;
    color: #ad7cff;
    padding: 12px 30px;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.contact-form button:hover {
    background: #ad7cff none repeat scroll 0 0;
    color: #ffffff;
}

.contact-form input:focus,
.contact-form textarea:focus {
    border-color: #ad7cff;
    -webkit-box-shadow: 0 0 0;
    box-shadow: 0 0 0;
}

.contact-area .box-icon {
    border: 2px solid #ad7cff;
    border-radius: 50%;
    color: #ad7cff;
    display: inline-block;
    font-size: 30px;
    height: 60px;
    padding-top: 14px;
    text-align: center;
    width: 60px;
}

.contact-area .text-icon-box:hover .box-icon {
    background: #ad7cff none repeat scroll 0 0;
    border-color: #ad7cff;
    color: #ffffff;
}

.home-alt .subscriber-form input {
    border: 1px solid #EBEBEB;
}

/*---------------------------------
    10. FOOTER AREA
----------------------------------*/

.footer-area .area-bg {
    background: rgba(0, 0, 0, 0) url("assets/img/bg-layers/footer_bg.png") no-repeat scroll center bottom / 100% 100%;
}

.footer-separator {
    background: #3a5987 none repeat scroll 0 0;
    display: block;
    height: 1px;
    overflow: hidden;
    position: relative;
    z-index: 9;
}

.single-footer-widget,
.single-footer-widget a {
    color: rgba(255, 255, 255, 0.6);
}

.single-footer-widget a:hover,
.footer-copyright a:hover {
    color: #4DD3EF;
}

.single-footer-widget h3 {
    font-size: 20px;
    letter-spacing: 2px;
    margin-bottom: 40px;
}

.single-footer-widget ul {
    list-style: outside none none;
    margin: 0;
    padding: 0;
}

.single-footer-widget ul li {
    display: block;
    margin-bottom: 10px;
}

.single-footer-widget ul li a {
    display: block;
}

.footer-social-bookmark .social-bookmark li {
    display: inline-block;
}

.footer-social-bookmark .social-bookmark li a {
    background: #ffffff none repeat scroll 0 0;
    border-radius: 50%;
    color: #233653;
    height: 40px;
    margin-right: 5px;
    padding-top: 8px;
    text-align: center;
    width: 40px;
}

.footer-social-bookmark .social-bookmark li a:hover {
    background: #AD7CFF none repeat scroll 0 0;
    color: #ffffff;
}

.home-alt .footer-social-bookmark .social-bookmark li a:hover {
    background: rgba(0, 0, 0, 0) linear-gradient(to right, #e46a6e, #1c33b4) repeat scroll 0 0;
    color: #ffffff;
}

.home-alt.home-three .footer-social-bookmark .social-bookmark li a:hover {
    background: #FF8A73 none repeat scroll 0 0;
    color: #ffffff;
}

.footer-copyright {
    padding: 30px 0;
    color: rgba(255, 255, 255, .6);
}

/*---------------------------------
    11. SCROLL TO TOP AREA
----------------------------------*/

.scrolltotop {
    background: #404873 none repeat scroll 0 0;
    border-radius: 50%;
    bottom: 20px;
    color: #ffffff;
    display: none;
    font-size: 20px;
    height: 50px;
    padding-top: 11px;
    position: fixed;
    right: 20px;
    text-align: center;
    width: 50px;
    z-index: 9;
}

.scrolltotop:hover,
.scrolltotop:focus {
    -webkit-box-shadow: 0 0 0 25px #ad7cff inset;
    box-shadow: 0 0 0 25px #ad7cff inset;
    color: #ffffff;
}

/*----------------------------------
    12. HOME TWO
-----------------------------------*/
.home-alt ul#nav li a {
    font-weight: 600;
    color: #233653;
}

.home-alt ul#nav > li.active > a,
.home-alt ul#nav > li > a:hover {
    color: #1c33b4;
}

.home-alt h1,
.home-alt h2,
.home-alt h3,
.home-alt h4,
.home-alt h5,
.home-alt h6 {
    font-weight: 700;
}

.home-alt .sub_hidding {
    font-weight: 400;
}

.welcome-text {
    position: relative;
    z-index: 9;
}

.home-alt .top-area {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 100%;
}

.home-alt .header-action-button a::before {
    background: rgba(0, 0, 0, 0) -webkit-gradient(linear, right top, left top, from(#e46a6e), to(#1c33b4)) repeat scroll 0 0;
    background: rgba(0, 0, 0, 0) linear-gradient(to left, #e46a6e, #1c33b4) repeat scroll 0 0;
}

.home-alt .header-action-button a::after {
    background: rgba(0, 0, 0, 0) -webkit-gradient(linear, left top, right top, from(#e46a6e), to(#1c33b4)) repeat scroll 0 0;
    background: rgba(0, 0, 0, 0) linear-gradient(to right, #e46a6e, #1c33b4) repeat scroll 0 0;
}

.home-alt .home-button a::before {
    background: rgba(0, 0, 0, 0) -webkit-gradient(linear, right top, left top, from(#e46a6e), to(#1c33b4)) repeat scroll 0 0;
    background: rgba(0, 0, 0, 0) linear-gradient(to left, #e46a6e, #1c33b4) repeat scroll 0 0;
}

.home-alt .home-button a::after {
    background: rgba(0, 0, 0, 0) -webkit-gradient(linear, left top, right top, from(#e46a6e), to(#1c33b4)) repeat scroll 0 0;
    background: rgba(0, 0, 0, 0) linear-gradient(to right, #e46a6e, #1c33b4) repeat scroll 0 0;
}

.home-alt .read-more::before {
    background: rgba(0, 0, 0, 0) -webkit-gradient(linear, right top, left top, from(#e46a6e), to(#1c33b4)) repeat scroll 0 0;
    background: rgba(0, 0, 0, 0) linear-gradient(to left, #e46a6e, #1c33b4) repeat scroll 0 0;
}

.home-alt .read-more::after {
    background: rgba(0, 0, 0, 0) -webkit-gradient(linear, left top, right top, from(#e46a6e), to(#1c33b4)) repeat scroll 0 0;
    background: rgba(0, 0, 0, 0) linear-gradient(to right, #e46a6e, #1c33b4) repeat scroll 0 0;
}

.home-alt .welcome-text-area .area-bg {
    background: rgba(0, 0, 0, 0) url("assets/img/home/home_bg.png") no-repeat scroll center center / cover;
}

.home-alt .welcome-area {
    height: 100%;
}

.home-alt .welcome-mockup {
    position: absolute;
    right: 50px;
    top: 120px;
}

.home-alt .welcome-mockup {
    position: absolute;
    right: 50px;
    /*    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);*/
    width: 53%;
}

.area-bg-text {
    font-size: 80px;
    font-weight: 700;
    left: 50%;
    letter-spacing: 10px;
    line-height: 1;
    opacity: 0.1;
    position: absolute;
    top: 0;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}


.home-alt .box-img-icon img {
    height: 60px;
}

.text-icon-box.box-hover-1:hover {
    -webkit-box-shadow: 0 0 14px rgba(0, 0, 0, 0.1);
    box-shadow: 0 0 14px rgba(0, 0, 0, 0.1);
}

.text-icon-box.box-hover-1:hover:before {
    opacity: 0;
}

.more {
    color: #ff8a73;
    font-weight: 700;
}

.home-alt .about-mockup-bg {
    left: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 65%;
}

.about-middile {
    position: relative;
}

.about-middile.section-padding {
    padding: 200px 0;
}
.home-alt.home-three .about-middile.section-padding {
  padding: 130px 0;
}
.about-middile .about-mockup-bg {
    left: auto;
    right: 0;
}

.home-alt.home-three .about-middile .about-mockup-bg {
    right: -303px;
}

.single-fun-fact.color-two::before {
    background: rgba(0, 0, 0, 0) -webkit-gradient(linear, right top, left bottom, from(#1c33b4), to(#e46a6e)) repeat scroll 0 0;
    background: rgba(0, 0, 0, 0) linear-gradient(to left bottom, #1c33b4, #e46a6e) repeat scroll 0 0;
}

.home-alt .about-content h3 {
    font-weight: 700;
}

.home-alt .about-bottom-area {
    position: relative;
}

.home-alt .video-area-popup {
    background: rgba(0, 0, 0, 0) linear-gradient(to left, #e46a6e, #1c33b4) repeat scroll 0 0;
}

.home-alt .video-area-popup:hover {
    background: #fff;
    box-shadow: 0 0 16px #1c33b4;
    color: #1c33b4;
}

.home-alt .about-bottom-area .area-bg {
    background: rgba(0, 0, 0, 0) url("assets/img/bg-layers/about_bg_layers_3.png") no-repeat scroll left top / auto 100%;
    background-position: 0px 0px;
    background-repeat: repeat-x;
    -webkit-animation: animatedBackground 10s linear infinite alternate;
    animation: animatedBackground 10s linear infinite alternate;
    opacity: .3;
}

@-webkit-keyframes animatedBackground {
    from {
        background-position: 0 0;
    }

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

@keyframes animatedBackground {
    from {
        background-position: 0 0;
    }

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

.testmonial-and-tem-box .area-bg {
    background: rgba(0, 0, 0, 0) url("assets/img/testmonial/testmonial_bg.png") no-repeat scroll center center / cover;
}


.home-alt .footer-area .area-bg {
    background: transparent none repeat scroll 0 0;
    color: inherit;
    opacity: .3;
}

.home-alt .footer-area {
    color: inherit;
}

.home-alt .footer-area a {
    color: #326589;
}

.home-alt .footer-area .single-footer-widget {
    color: inherit;
}

.home-alt .testmonial-quote {
    display: inline-block;
    margin: 0 auto 20px;
    opacity: 0.3;
}

.footer-top-area {
    position: relative;
}

.home-alt .footer-top-area .area-bg {
    background: rgba(0, 0, 0, 0) url("assets/img/bg-layers/subscriber-bg.png") no-repeat scroll center center / contain;

    background-repeat: repeat-x;
    -webkit-animation: animatedBackground 10s linear infinite alternate;
    animation: animatedBackground 10s linear infinite alternate;
}

.home-alt .footer-separator {
    background: #f3f3f3 none repeat scroll 0 0;
}

.home-alt .footer-copyright {
    color: inherit;
}

/*----------------------------
    13. TESTMONIAL STYLE 7
------------------------------*/
.testmonial-and-tem-box {
    padding-bottom: 400px;
    padding-top: 223px;
}

.testmonial-and-tem-box .testmonial-area {
    position: relative;
}

/*.testmonial-and-tem-box.section-padding {
    margin-top: -100px;
    padding: 200px 0 320px;
}*/

.testmonial-and-tem-box .testmonial-area .area-bg {
    background: rgba(0, 0, 0, 0) url("assets/img/testmonial/testimonial.png") no-repeat scroll center center / contain;
}


.single-testmonial-seven .author-content {
    color: #fff;
}

.single-testmonial-seven {
    text-align: center;
}

.single-testmonial-seven .author-name-image {}

.single-testmonial-seven .author-img,
.single-testmonial-seven .author-name-designation {
    display: inline-block;
    height: 80px;
    overflow: hidden;
}

.home-alt .author-name-designation {
    padding-left: 20px;
    text-align: left;
}

.home-alt .testmonial-area .owl-dots {
    bottom: 0;
    left: 50%;
}

.home-alt.home-three .testmonial-quote img {
    -webkit-filter: brightness(219%) contrast(227%) drop-shadow(9px 10px 3px #000000);
    filter: brightness(219%) contrast(227%) drop-shadow(9px 10px 3px #000000);
}

/*-----------------------------
    14. TEAM STYLE 1
-------------------------------*/

.team-style-1 .member-image {
    margin-bottom: 30px;
}

.team-style-1 .member-image img {
    border-radius: 50%;
    height: 200px;
    width: 200px;
}

.team-style-1 .name-and-designation {
    margin-bottom: 20px;
}

.team-style-1 h4 {
    margin-bottom: 5px;
}

.team-style-1 .social-bookmark li a {
    border: 1px solid;
    border-radius: 50%;
    height: 35px;
    line-height: 2;
    width: 35px;
}

.team-style-1 .social-bookmark li a:hover {
    background: #8256ff none repeat scroll 0 0;
    border-color: #8256ff;
    color: #ffffff;
}

/*---------------------------------
    15. PRICE AERA
-----------------------------------*/

.price-menu {
    border-radius: 5px;
    display: inline-block;
    list-style: outside none none;
    margin: 0 auto 60px;
    overflow: hidden;
    padding: 0;
    text-align: center;
}

.price-menu li {
    background: #f6f7fb none repeat scroll 0 0;
    display: inline-block;
    margin: 0 -2px;
    position: relative;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.price-menu li a {
    display: block;
    padding: 15px 40px;
}

.price-menu li.active a {
    background: rgba(0, 0, 0, 0) -webkit-gradient(linear, left top, right top, from(#1c33b4), to(#e46a6e)) repeat scroll 0 0;
    background: rgba(0, 0, 0, 0) linear-gradient(to right, #1c33b4, #e46a6e) repeat scroll 0 0;
    color: #fff;
    font-weight: 700;
}

.single-price {
    border: 1px solid #f7f9fc;
    overflow: hidden;
    padding-top: 20px;
    position: relative;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    z-index: 1;
}

.price-hidding h3 {
    margin-bottom: 0;
}

.price-rate h3 {
    color: #ff8a73;
    font-size: 52px;
    line-height: 1;
    margin-bottom: 0;
}

.price-rate h3 sub,
.price-rate h3 sup {
    font-size: 24px;
    font-weight: 400;
}

.price-rate h3 sub {
    color: #4d557d;
    font-size: 16px;
}

.price-hidding h3 {
    margin-bottom: 0;
}

.price-details {
    margin: 50px 0;
}

.price-details ul {
    list-style: outside none none;
    margin: 0;
    padding: 0;
}

.price-details li {
    margin-bottom: 10px;
}

.purchase-button {
    background: #8256ff none repeat scroll 0 0;
    border: 2px solid #8256ff;
    border-radius: 5px;
    color: #ffffff;
    display: inline-block;
    letter-spacing: 1px;
    padding: 8px 30px;
}

.single-price:hover .purchase-button,
.single-price.active .purchase-button {
    background: #ffffff none repeat scroll 0 0;
    color: #8256ff;
}

.single-price:hover,
.box-hover-2.active::before,
.single-price.active {
    box-shadow: 5px 5px 50px rgba(185, 178, 178, 0.16);
    opacity: 1;
}

.single-price.box-hover-2.active:before {
    background: #FF8A73;
}

.single-price .read-more {
    border-radius: 50px;
}

/*---------------------------
    16. HOME THREE
----------------------------*/
.home-alt.home-three ul#nav > li.active > a,
.home-alt.home-three ul#nav > li > a:hover {
    color: #FF8A73;
}

.home-three .header-action-button a {
    box-shadow: 0 0 16px #FF8A73;
}

.home-three .home-button a {
    box-shadow: 0 0 16px #FF8A73;
}

.home-alt.home-three .video-area-popup {
    background: #FF8A73;
    box-shadow: 0 0 16px #FF8A73;
}

.home-alt.home-three .video-area-popup:hover {
    background: #fff;
    color: #FF8A73;
}

.area-bg-animate-layers {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1;
}

.area-bg-layer {
    background: rgba(0, 0, 0, 0) url("assets/img/bg-layers/about_bg_layers_3.png") no-repeat scroll center center;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    opacity: .5;
}

/*.home-alt.home-three .welcome-text-area .area-bg {
    background: rgba(0, 0, 0, 0) url("assets/img/home/home_three1.png") no-repeat scroll 380px center / cover;
}*/
.home-alt.home-three .welcome-text-area .area-bg {
    background: rgba(0, 0, 0, 0) url("assets/img/home/home_three.png") no-repeat scroll right -25% center / 58% auto;
    z-index: -1;
}

.home-alt.home-three .testmonial-and-tem-box > .area-bg {
    background: rgba(0, 0, 0, 0) url("assets/img/testmonial/testmonial_bg_2.png") no-repeat scroll center center / cover;
}

.home-alt .about-middile .about-mockup-bg {
    right: -100px;
}

.home-alt .about-top-area .about-mockup-bg {
    left: -150px;
}

.home-alt .about-area {
    overflow: hidden;
}

.home-alt.home-three .header-action-button a::before {
    background: #FF8A73;
}

.home-alt.home-three .header-action-button a::after {
    background: #F9748F;
}

.home-alt.home-three .home-button a::before {
    background: #FF8A73;
}

.home-alt.home-three .home-button a::after {
    background: #F9748F;
}

.home-alt.home-three .read-more::before {
    background: #FF8A73;
}

.home-alt.home-three .read-more::after {
    background: #F9748F;
}

.home-alt.home-three .single-fun-fact::before {
    background: rgba(0, 0, 0, 0) -webkit-gradient(linear, right top, left top, from(#f9748f), to(#fe9a8b)) repeat scroll 0 0;
    background: rgba(0, 0, 0, 0) linear-gradient(to left, #f9748f, #fe9a8b) repeat scroll 0 0;
}

.home-alt.home-three .testmonial-area .owl-dots > div {
    background: #fff none repeat scroll 0 0;
    border: 0 none;
}

.home-button {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.justify-center {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.home-alt.home-three .home-button a:last-child::before,
.home-alt.home-three .home-button a:last-child:hover:after {
    display: none;
    opacity: 0;
    background: inherit;
}

.home-alt.home-three .home-button a:last-child {
    -webkit-box-shadow: 0 0 0;
    box-shadow: 0 0 0;
    color: #233653;
}

.home-alt.home-three .home-button a:last-child .contact-no {
    color: #FF8A73;
}

.promo-button span:last-child {
    text-align: left;
}

/*--------------------------
    ANIMATION
---------------------------*/
span.bubble-ripple + span {
    -webkit-transition: -webkit-transform 0.3s ease 0s;
    transition: -webkit-transform 0.3s ease 0s;
    transition: transform 0.3s ease 0s;
    transition: transform 0.3s ease 0s, -webkit-transform 0.3s ease 0s;
    z-index: 100;
}

span.bubble-ripple {
    -webkit-animation: 1.5s linear 0s normal none infinite running bubble-ripple;
    animation: 1.5s linear 0s normal none infinite running bubble-ripple;
    background-color: #ad7cff;
    border-radius: 50%;
    bottom: 0;
    display: block;
    height: 60px;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    top: 0;
    width: 60px;
    z-index: -1;
    opacity: 0 !important;
    display: none;
}

.video-area-popup:hover span.bubble-ripple {
    opacity: 0.5 !important;
}

.bubble-ripple .bubble-ripple-inner {
    -webkit-animation: 1.5s linear 0s normal none infinite running bubble-ripple;
    animation: 1.5s linear 0s normal none infinite running bubble-ripple;
    background-color: #ad7cff;
    border-radius: 50%;
    bottom: 0;
    display: block;
    height: 60px;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    top: 0;
    width: 60px;
}

@-webkit-keyframes bubble-ripple {
    0% {
        opacity: 0.75;
        -webkit-transform: scale(1);
        transform: scale(1);
    }

    25% {
        opacity: 0.75;
        -webkit-transform: scale(1);
        transform: scale(1);
    }

    100% {
        opacity: 0;
        -webkit-transform: scale(1.5);
        transform: scale(1.5);
    }
}

@keyframes bubble-ripple {
    0% {
        opacity: 0.75;
        -webkit-transform: scale(1);
        transform: scale(1);
    }

    25% {
        opacity: 0.75;
        -webkit-transform: scale(1);
        transform: scale(1);
    }

    100% {
        opacity: 0;
        -webkit-transform: scale(1.5);
        transform: scale(1.5);
    }
}

/*-------------------------
    SINGLE PAGE
---------------------------*/
.barner-area {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background: #f7f8fb none repeat scroll 0 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 400px;
    padding-top: 100px;
    text-align: center;
}

.barner-area .area-bg {
    -webkit-animation: 50s ease 0s normal none infinite running big-spin;
    animation: 50s ease 0s normal none infinite running big-spin;
    background: rgba(0, 0, 0, 0) url("assets/img/bg-layers/subscriber-bg.png") repeat-x scroll 0 0;
}

.home-alt .read-more {
    -webkit-box-shadow: 0 0 15px rgba(28, 51, 180, 0.5);
    box-shadow: 0 0 15px rgba(28, 51, 180, 0.5);
}

.home-alt.home-three .read-more {
    -webkit-box-shadow: 0 0 32px rgba(255, 138, 115, 0.7);
    box-shadow: 0 0 32px rgba(255, 138, 115, 0.7);
}

/*-------------------------------
    24. PORTFOLIO DETAILS PAGE
--------------------------------*/

.border-line {
    border-bottom: 2px solid #f3f1ff;
}

.single-service-box-two.text-icon-box {
    border: 2px solid #E7E1FF;
    padding: 50px 30px;
}

.single-service-box-two .box-icon {
    border-radius: 50%;
    color: #ffffff;
    height: 120px;
    margin: 0 auto 40px;
    padding-top: 43px;
    text-align: center;
    width: 120px;
    background: #ad7cff none repeat scroll 0 0;
    box-shadow: 0 0 16px rgba(173, 124, 255, 0.2);
}

.single-service-box-two .box-title {
    font-size: 24px;
    margin-bottom: 30px;
}

/*----------------------------
    SERVICE DETAILS PAGE
-----------------------------*/

.area-content .area-title h2 {
    line-height: 1.3;
}

.area-content .area-title {
    margin-bottom: 30px;
}

.area-image-content {
    position: relative;
    z-index: 9;
}

.bottom-image {
    margin-left: -50px;
    margin-top: -50px;
    position: relative;
    z-index: 1;
}

.center-video-button .video-area-popup {
    left: 50%;
    position: absolute;
    top: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    z-index: 9;
}

.area-image-content .layer-bg {
    bottom: 0;
    left: inherit;
    position: absolute;
    right: 0;
    z-index: -9;
}

.service-top-area .area-image-content > img {
    border-radius: 200px 200px 0;
}

.detials-list ul {
    list-style: outside none none;
    margin: 0;
    padding: 0;
}

.detials-list ul li {
    margin-top: 20px;
}

.detials-list ul li i {
    background: #f8f8f8 none repeat scroll 0 0;
    border-radius: 50px;
    margin-right: 10px;
    padding: 8px;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.detials-list ul li:hover i,
.detials-list ul li.active i {
    background: #ad7cff none repeat scroll 0 0;
    color: #ffffff;
}

/*--------------------------------
    FAQS AREA
---------------------------------*/

.panel.panel-default {
    margin-bottom: 20px;
    border: 0;
}

.panel-default > .panel-heading {
    background-color: #ffffff;
}

.active .accordion-toggle {
    color: #ad7cff;
}

.panel-body {
    border-top: 0 none;
}

.accordion-toggle .panel-title .fa-angle-down {
    margin-top: 5px;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.accordion-toggle.collapsed .panel-title .fa-angle-down {
    -webkit-transform: rotate(-180deg);
    transform: rotate(-180deg);
}

/*-------------------------------
    SERVICE THREE
---------------------------------*/
.service-bottom-area .area-title h2 {
    line-height: 1.3;
}

.text-icon-box.single-service-box-three {
    background: #ffffff none repeat scroll 0 0;
    -webkit-box-shadow: 0 16px 32px rgba(181, 181, 255, 0.2);
    box-shadow: 0 16px 32px rgba(181, 181, 255, 0.2);
    margin-top: 50px;
    padding: 80px 30px 40px;
}

.single-service-box-three .box-icon {
    background: rgba(0, 0, 0, 0) -webkit-gradient(linear, right top, left top, from(#ad7cff), to(#d2adff)) repeat scroll 0 0;
    background: rgba(0, 0, 0, 0) linear-gradient(to left, #ad7cff, #d2adff) repeat scroll 0 0;
    border-radius: 50%;
    -webkit-box-shadow: 0 16px 32px rgba(173, 124, 255, 0.2);
    box-shadow: 0 16px 32px rgba(173, 124, 255, 0.2);
    color: #ffffff;
    font-size: 36px;
    height: 100px;
    left: 50%;
    margin: 0 auto 30px;
    padding-top: 30px;
    position: absolute;
    text-align: center;
    top: -50px;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 100px;
}

.single-service-box-three .box-title {
    font-size: 24px;
}