/* ======================================================= 
 *
 *      Project: CZM Social Chat Support
 *      Released On: April 14, 2020
 *      Version: 2.0
 *
 *      Author: CzmMedia
 *      Contact: https://codecanyon.net/user/czmmedia
 *
 *      Copyright (c) 2020, CZM Media. All rights reserved.
 *      Available only in http://codecanyon.net/
 *    
 *      ---------------------------------
 *      CONTENTS
 *      ---------------------------------
 *
 *      [01] GLOBAL
 *      [02] HEADER
 *      [03] FOOTER
 *      [04] WELCOME
 *      [05] EXAMPLES
 *      [06] FEATURES
 *      [07] GENERATOR
 *      [08] CHANGE BROWSER TITLE
 *      [09] RESPONSIVE
 *    
 * ======================================================= */

/* =======================================================
[01] GLOBAL
======================================================= */

body, html {
    font-family: 'Poppins', sans-serif;
    color: #4b4d50;
    font-size: 14px;
    line-height: 1.4;
    background-color: #fff;
}
h2 {
    font-size: 38px;
}
h3 {
    font-size: 28px;
}
p {
    font-size: 16px;
    line-height: 1.8;
}
/* =======================================================
[02] HEADER
======================================================= */

header .top {
    background-color: #3D4045;
    padding: 20px 0;
}
header .top .logo {
    width: 120px;
    height: 40px;
    background-image: url(../img/logo.png);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;
}
header.sticky .top {
    margin-bottom: 58px;
}
header .bottom {
    background-color: #505358;
}
header.sticky .bottom {
    -webkit-box-shadow: 0 12px 6px rgba(0,0,0,.06);
    -moz-box-shadow: 0 12px 6px rgba(0,0,0,.06);
    -ms-box-shadow: 0 12px 6px rgba(0,0,0,.06);
    -o-box-shadow: 0 12px 6px rgba(0,0,0,.06);
    box-shadow: 0 12px 6px rgba(0,0,0,.06);
    top: 0;
    position: fixed;
    width: 100%;
    z-index: 9999;
}
header .bottom nav {
    padding: 0;
}
header .bottom nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: block;
}
header .bottom nav ul>li a {
    display: block;
    color: #fff;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
    padding: 20px 25px!important;
    text-decoration: none;
}
header .bottom nav ul>li a:hover, header .bottom nav ul>li a.active {
    background-color: #3D4045;
}
header .bottom nav .navbar-toggler {
    padding: 10px 0;
}
header .bottom nav .navbar-toggler .animated-icon {
    width: 25px;
    height: 20px;
    position: relative;
    margin: 0px;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -ms-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
    cursor: pointer;
}
header .bottom nav .navbar-toggler .animated-icon span {
    display: block;
    position: absolute;
    background: #e3f2fd;
    height: 3px;
    width: 100%;
    border-radius: 10px;
    opacity: 1;
    left: 0;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .25s ease-in-out;
    -moz-transition: .25s ease-in-out;
    -ms-transition: .25s ease-in-out;
    -o-transition: .25s ease-in-out;
    transition: .25s ease-in-out;
}
header .bottom nav .navbar-toggler .animated-icon span:nth-child(1) {
    top: 0px;
}
header .bottom nav .navbar-toggler .animated-icon span:nth-child(2), header .bottom nav .navbar-toggler .animated-icon span:nth-child(3) {
    top: 8px;
}
header .bottom nav .navbar-toggler .animated-icon span:nth-child(4) {
    top: 16px;
}
header .bottom nav .navbar-toggler .animated-icon.open span:nth-child(1) {
    top: 11px;
    width: 0%;
    left: 50%;
}
header .bottom nav .navbar-toggler .animated-icon.open span:nth-child(2) {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}
header .bottom nav .navbar-toggler .animated-icon.open span:nth-child(3) {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
header .bottom nav .navbar-toggler .animated-icon.open span:nth-child(4) {
    top: 11px;
    width: 0%;
    left: 50%;
}
header .bottom nav .badge {
    font-weight: 500;
    margin-left: 2px;
}
header .bottom nav .mobile-code-generator {
    display: none;
    background-color: rgba(255,255,255,.1);
    padding: 5px;
    border-radius: 4px;
    color: #fff;
    text-decoration: none;
}
/* =======================================================
[03] FOOTER
======================================================= */

footer {
    background-color: #3D4045;
    color: #8c9094;
    padding: 40px 10px;
}
/* =======================================================
[04] WELCOME
======================================================= */

.welcome {
    text-align: center;
    padding: 60px 0;
    background-color: #f4f5f8;
}
.welcome strong {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 40px;
    display: block;
}
.welcome h2 span {
    font-weight: 700;
}
.welcome p {
    margin-bottom: 0;
}
.welcome .button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    height: 50px;
    padding: 0 30px;
    margin-top: 40px;
    background-color: #82b440;
    color: #fff;
    font-size: 18px;
    font-weight: 500;
    text-decoration: none;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}
.welcome .button:hover {
    background-color: #7aa93c;
}
/* =======================================================
[05] EXAMPLES
======================================================= */

.examples {
    padding: 100px 0;
}
.examples p {
    color: #8B8B8B;
}
.examples .info {
    border: 1px solid #CDE2FF;
    background-color: #f7fcff;
    text-align: center;
    padding: 20px;
    font-size: 14px;
}
.examples .example-col {
    display: flex;
}
.examples .example {
    display: block;
    margin-bottom: 30px;
    padding: 10px;
    box-shadow: 0 15px 30px rgba(102, 113, 228, 0.13);
    width: 100%;
    background-color: #fff;
    border-radius: 10px;
    cursor: pointer;
}
.examples .example .image {
    display: block;
    background-color: #fff;
    border: 1px solid #f2f2f2;
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    box-sizing: border-box;
}
.examples .example .image img {
    width: 100%;
    height: auto;
}
.examples .example .text {
    padding: 20px 10px;
}
.examples .example .text .title {
    font-size: 1rem;
    font-weight: 500;
}
.examples .example .text .description {
    font-size: .8rem;
	color: #999;
}
.examples .czm-chat-support {
    margin: 10px 5px;
}
.examples hr {
    margin: 100px 0;
    border-color: #e7e7e7;
}
.examples .button-content {
    margin-bottom: 80px;
}
.examples .button-content:last-child {
    margin-bottom: 0;
}
/* =======================================================
[06] FEATURES
======================================================= */

.features {
    text-align: center;
    padding: 100px 0;
    background-color: #f4f5f8;
}
.features p {
    margin-bottom: 60px;
}
.features .feature-col {
    display: flex;
}
.features .feature {
    display: block;
    margin-bottom: 30px;
    box-shadow: 0 15px 30px rgba(102, 113, 228, 0.13);
    width: 100%;
    background-color: #fff;
    border-radius: 10px;
    padding: 10px;
}
.features .feature .icon {
    display: block;
    position: relative;
    text-align: center;
}
.features .feature .icon i {
    padding: 50px 0;
    font-size: 4.1rem;
    color: #9daebd;
}
.features .feature .text {
    padding: 15px 10px;
}
.features .feature .text h6 {
    margin-bottom: 0;
    text-align: center;
}
.features .feature .text .description {
    font-size: 13px;
    font-weight: 400;
    color: #B1B5C8;
    margin-top: 10px;
}
/* =======================================================
[07] GENERATOR
======================================================= */

.generator {
    padding: 100px 0;
}
.generator .title {
    margin-bottom: 60px;
}
.generator .generator-container {
    display: block;
    width: 100%;
    border: 1px solid #d8d8d8;
    background-color: #f3f3f3;
    padding: 25px;
    margin-bottom: 30px;
    box-sizing: border-box;
}
.generator .generator-container:last-child {
    margin-bottom: 0;
}
.generator .generator-container .czm-chat-support {
    margin-bottom: 20px;
}
.generator .form-group label {
    font-size: 13px;
    color: #B1B5C8;
    margin-bottom: 5px;
}
.generator .input-group-addon {
    padding: 6px 12px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1;
    color: #555;
    text-align: center;
    background-color: #eee;
    border: 1px solid #ccc;
    border-radius: 4px;
}
.generator .input-group-addon:last-child {
    border-left: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    display: flex;
    align-items: center;
    cursor: pointer;
}
.generator .bd-callout {
    padding: 10px;
    margin-top: 5px;
    font-size: 13px;
    background-color: #ffffff;
    border-radius: 4px;
}
.generator .divider {
    margin: 25px 0;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    width: 100%;
}
.generator .badge {
    font-weight: 500;
    cursor: pointer;
}
.generator .generate-code {
    display: none;
    margin-bottom: 20px;
}
.generator .generate-code h3 {
    font-size: 1.75rem;
}
.generator .generate-code p {
    font-size: 14px;
    line-height: 1.4;
}
.generator .generate-files {
    margin-top: 40px;
}
/* =======================================================
[08] CHANGE BROWSER TITLE
======================================================= */

.czm-cbt-content {
    background-color: #fff;
    border-radius: 10px;
    overflow: hidden;
    padding: 40px;
    border: 1px solid #ddd;
    margin-top: 50px;
    line-height: 0;
    display: block;
    text-decoration: none!important;
}
.czm-cbt-content img {
    width: 100%;
    height: auto;
}
/* =======================================================
[09] RESPONSIVE
======================================================= */

@media (min-width: 768px) {
    header .bottom nav ul>li {
        float: left;
        position: relative;
    }
    header .bottom nav .navbar-toggler {
        display: none;
    }
    header .bottom nav .collapse:not(.show) {
        display: block;
    }
}

@media (max-width: 768px) {
    p {
        font-size: 16px;
    }
    h2 {
        font-size: 32px;
    }
    .h4, h4 {
        font-size: 22px;
    }
    header .top {
        padding: 15px 0;
    }
    header .top .logo {
        width: 90px;
        height: 30px;
    }
    header .bottom ul>li a {
        padding: 12px 20px!important;
    }
    header .bottom nav .mobile-code-generator {
        display: block;
    }
    footer {
        font-size: 12px;
    }
    .welcome {
        padding: 40px 0;
    }
    .examples {
        padding: 60px 0;
    }
    .examples .subtitle {
        margin-top: 60px;
    }
    .features {
        padding: 60px 0;
    }
}