/*--------------------------------------------------------------------------------------
Theme Name: Growth
Theme URI: http://quomodosoft.com
Author URI: http://quomodosoft.com
Description: 100% Responsive, Highly Customizable, SEO Friendly Business template using Twitter Bootstrap Latest, Search Engine Friendly.
Author: Mehedi Hasan Nahid
Version: 1.0
----------------------------------------------------------------------------------------
    1. THEME BG COLOR
    2. PRELOADER
    3. SCROLL TO TOP
    4. AREA BACKGROUND
    5. TOP AERA
    6. SECTION TITLE
    7. SLIDER CONTROL BUTTONS
    8. SERVICE BOX
    9. READ MORE BUTTON
    10. WELCOME TEXT AREA
    11. FEATURES AREA
    12. ABOUT AREA
    13. PROCESS AREA
    14. GOAL AREA
    15. VIDEO PROMO AREA
    16. SCREENSHOT SLIDER
    17. TESTMONIAL AREA
    18. PRICE AREA
    19. FAQS AREA
    20. BLOG AREA
    21. CONTACT AREA
    22. HOME TWO LAYERS
    23. HOME THREE
    24. HOME FOUR
    25. SINGLE PAGE
    26. PRODUCT PAGE
    27. SINGE PRODUCT PAGE
----------------------------------------------------------------------------------------*/
/*---------------------------
    1. THEME BG COLOR
-----------------------------*/
.overflow-xhidden {
    overflow-x: hidden;
    overflow-y: inherit;
}

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

/*--------------------------
    BUTTONS & BACKGROUND
----------------------------*/
.blue-btn {
    background: #ff3d46 none repeat scroll 0 0;
    color: #fff;
}

.blue-btn:hover {
    background: #ffffff none repeat scroll 0 0;
    color: #ff3d46;
}

.purple-btn {
    background: #4431a7 none repeat scroll 0 0;
    color: #ffffff;
}

.purple-btn:hover {
    background: #ffffff none repeat scroll 0 0;
    color: #4431a7;
}

.soft-purple-btn {
    background: #614dc7 none repeat scroll 0 0;
    color: #ffffff;
}

.soft-purple-btn:hover {
    background: #fff;
    color: #614dc7;
}

/*---------------------------
    2. PRELOADER
-----------------------------*/
.preeloader {
    background: #E3F9FC none repeat scroll 0 0;
    height: 100%;
    position: fixed;
    width: 100%;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
}
/*---------------------------------
    3. SCROLL TO TOP
----------------------------------*/

.scrolltotop {
    background: #ffc576;
    border-radius: 50%;
    bottom: 20px;
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.2);
    color: #ffffff;
    display: none;
    height: 60px;
    line-height: 60px;
    position: fixed;
    right: 20px;
    text-align: center;
    width: 60px;
    z-index: 99;
}

.scrolltotop:hover,
.scrolltotop:focus {
    background: #ffffff none repeat scroll 0 0;
    color: #ffc576;
}

/*---------------------------------
    4. AREA BACKGROUND
----------------------------------*/

.area-bg {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

.area-bg::after,
.area-bg::before {
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}


/*---------------------------------
    5. TOP AERA
----------------------------------*/

.top-area {
    position: relative;
    width: 100%;
    /*    height: 100%;*/
    background-color: #000;
}

.demos-area {
    padding-top: 30px;
}

.top-120 {
    padding-top: 120px;
}

.bottom-120 {
    padding-bottom: 120px;
}

.welcome-text-area {
    height: 100%;
    padding-top: 100px;
    width: 100%;
    color: #adadad;
    background-color: #1F2336;
}

/*---------------------------------
    6. SECTION TITLE
----------------------------------*/
.area-title {
    margin-bottom: 80px;
    position: relative;
}

.subtitle {
    color: #5368fd;
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 30px;
    overflow: hidden;
    text-transform: uppercase;
}

.subtitle .letter {
    -webkit-transform-origin: 0 100%;
    transform-origin: 0 100%;
    display: inline-block;
    line-height: 1em;
}

.area-title h2 {
    font-size: 48px;
    line-height: 1.2;
    margin-bottom: 20px;
    text-transform: capitalize;
    font-weight: 600;
}

.area-title h2 span {
    color: #5368fd;
}


@media only screen and (min-width: 992px) and (max-width: 1200px) {
    .top-area {
        overflow: hidden;
    }
}

@media (min-width: 768px) and (max-width: 991px) {}

@media only screen and (max-width: 767px) {
    .area-title {
        margin-bottom: 50px;
    }

    .area-title h2 {
        font-size: 28px;
    }
}


/*---------------------------------
    7. SLIDER CONTROL BUTTONS
---------------------------------*/
.owl-carousel .owl-item img {
    max-width: 100%;
    width: auto;
}

.owl-carousel .owl-nav > div {
    display: inline-block;
    font-size: 24px;
    height: 30px;
    padding-top: 3px;
    text-align: center;
    transition: all 0.3s ease 0s;
    width: 60px;
}

.owl-carousel .owl-nav > div:hover {
    background: #ffffff;
    color: #5368fd;
}

.owl-carousel .owl-dots {
    margin-top: 40px;
    text-align: center;
}

.owl-carousel .owl-dots > div {
    background: #bdc0f3 none repeat scroll 0 0;
    display: inline-block;
    height: 3px;
    margin: 0 5px;
    transition: all 0.3s ease 0s;
    width: 20px;
}



.owl-carousel .owl-dots > div.active {
    background: #ff911d none repeat scroll 0 0;
    width: 30px;
}

.read-more {
    background: #f0f1ff none repeat scroll 0 0;
    border: 0 none;
    border-radius: 50px;
    color: #252525;
    display: inline-block;
    font-size: 14px;
    font-weight: 700;
    height: 55px;
    margin-top: 50px;
    overflow: hidden;
    padding: 14px 40px;
    position: relative;
    text-transform: uppercase;
    transition: all 0.3s ease 0s;
    z-index: 1;
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.2);
}

.read-more:hover,
.read-more:focus,
.read-more.active {
    color: #ffffff;
}

.read-more::before {
    background: #ffc576;
    content: "";
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    transition: all 0.3s ease 0s;
    width: 100%;
    z-index: -1;
}

.read-more.active:before,
.read-more:hover::before {
    opacity: 1;
}

.read-more.active:hover::before {
    background: #ffffff;
}

.read-more.active:hover {
    color: #ffc576;
}

/*----------------------------
    10. WELCOME TEXT AREA
------------------------------*/
.welcome-text-area .area-bg {
    background: url('assets/img/header-bg.jpg') no-repeat fixed center center/ cover;
    opacity: 0.3;
}

.welcome-area {
    align-items: flex-end;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: center;
    width: 100%;
    padding-top: 150px;
    padding-bottom: 150px;
}

.welcome-text h4 {
    font-size: 36px;
    font-weight: 700;
}

.welcome-text h1 {
    font-size: 100px;
    margin-bottom: 30px;
    font-weight: 700;
    color: #fff;
}

.welcome-text h1 span {
    display: block;
    font-weight: 500;
    font-size: 30px;
}

a.bttn {
    display: inline-block;
    padding: 15px 50px;
    border-radius: 3px;
    box-shadow: 0px 10px 20px rgba(59, 132, 241, 0.1);
    background-color: #ffffff;
    font-weight: 500;
    position: relative;
    z-index: 1;
    overflow: hidden;
    color: #1f2235;
    margin: 0 15px;
}

.bttn:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    opacity: 1;
    transition: 0.3s;
    background-color: #ffc576
}

.bttn:hover:before {
    opacity: 0;
}

.bttn:hover {
    color: #ffc576;
}

.bttn.tr {
    border-radius: 3px;
    color: #ffc576;
    border: 1px solid #ffc576;
}

.bttn.tr:hover {
    color: #1f2235;
}

.bttn.tr:before {
    opacity: 0;
}

.bttn.tr:hover:before {
    opacity: 1;
}

.bttn i {
    transition: 0.3s;
}

.bttn:hover i {
    margin-left: 10px;
}

.welcome-layer-1 {
    width: 70%;
}

@media (min-width: 768px) and (max-width: 991px) {
    .welcome-text {
        text-align: center;
    }

    .top-area {
        height: auto;
    }
}

/*-------------------------------
    DEMO AREA
---------------------------------*/
section.demos-area .container-fluid {
    max-width: 1500px;
    margin: 0 auto;
}

.area-animate-text {
    font-size: 120px;
    margin-top: 40px;
    font-weight: 700;
    opacity: .1;
    display: block;
    line-height: 120px;
}

.demo-img-and-link {
    box-shadow: 8px 4px 40px rgba(41, 59, 95, 0.28);
    margin-bottom: 30px;
    position: relative;
    overflow: hidden;
    border-radius: 8px;
}

.demo-img-bg {
    height: 50px;
    position: absolute;
    right: 0;
    top: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
    transition: 0.6s ease-in-out 0s;
    width: 50px;
}

.single-demo:hover .demo-img-bg {
    -webkit-transform: scale(13);
    transform: scale(13);
}

.single-demo img {
    transition: 0.3s;
    -webkit-filter: blur(0px);
    filter: blur(0px)
}

.single-demo:hover img {
    -webkit-filter: blur(3px);
    filter: blur(3px)
}

.demo-link {
    background: #ffc576 none repeat scroll 0 0;
    color: #1f2235;
    opacity: 0;
    position: absolute;
    transition: all 0.5s ease 0s;
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.2);
    font-size: 16px;
    display: inline-block;
    padding: 15px 50px;
    text-align: center;
    border-radius: 3px;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%) scale(1.3);
    transform: translate(-50%, -50%) scale(1.3);
}

.single-demo:hover .demo-link {
    opacity: 1;
    -webkit-transform: scale(1) translate(-50%, -50%);
    transform: scale(1) translate(-50%, -50%);
    transition-delay: 0.1s;
}

.demo-link:hover {
    background: rgb(255, 255, 255) none repeat scroll 0 0;
    color: #ffc576;
}

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

@media only screen and (min-width: 992px) and (max-width: 1200px) {
    .area-animate-text {
        font-size: 150px;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .area-animate-text {
        font-size: 80px;
    }
}

@media only screen and (max-width: 767px) {
    .area-animate-text {
        font-size: 40px;
    }
}

@media only screen and (min-width: 480px) and (max-width: 767px) {}

/*----------------------------
    FEATURES
------------------------------*/
.features-slider {
    width: 100vw;
}

.single-features {
    box-shadow: 0 16px 32px rgba(199, 199, 199, 0.3);
    margin: 30px 20px;
    padding: 60px 20px;
    text-align: center;
}

.single-features .box-icon {
    background:#ffc576;
    border-radius: 50%;
    color: #fff;
    font-size: 28px;
    height: 80px;
    margin: 0 auto 20px;
    padding-top: 26px;
    width: 80px;
}

.single-features::after {
    background: #e4e7ff none repeat scroll 0 0;
    bottom: 70px;
    content: "";
    height: 3px;
    left: 50%;
    position: absolute;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 50px;
}

.single-features h3 {
    margin-bottom: 30px;
}

.features-slider .owl-nav {
    position: absolute;
    right: 30%;
    top: -170px;
}

/*-----------------------
    BOTTOM AERA
--------------------------*/
.bottom-content-area .area-bg {
    background: rgba(0, 0, 0, 0) url("assets/img/footer-bg.png") repeat scroll 0 0;
}

.default-logo:hover,
.default-logo {
    font-size: 40px;
    font-weight: 600;
    color: #ffffff;
    letter-spacing: -2px;
}
.default-logo img {
    max-width: 200px;
}

.single-demo {
    padding: 30px;
}

@media only screen and (max-width: 768px) {
    .welcome-text h1 {
        font-size: 46px;
    }
}