html,
body {
    width: 100%;
    height: 100%;
    font-family: 'Muli', 'Helvetica', 'Arial', 'sans-serif';
    scrollbar-width: thin;
    scrollbar-color: #cccccc white;
}


/* scrollBar */


/* scrollBar width */

/* scrollBar Track */

 ::-webkit-scrollbar-track {
    background: linear-gradient(to top, #FDB766, #FD6688);
    border-radius: 10px;
    border: 4.3px solid white;
}


/* scrollBar Handle */

 ::-webkit-scrollbar-thumb {
    background: linear-gradient(to top, #FDB766, #FD6688);
    border-radius: 100px;
    border-left: 1px solid white;
    border-right: 1px solid white;
}


/* scrollBar Handle on hover */

 ::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(to top, #FD6688, #FDB766);
}

 ::-webkit-scrollbar-thumb:active {
    background: linear-gradient(to top, #FDB766, #FDB766);
}


/* end scrollBar */

a {
    color: #FD6688;
    transition: all .35s;
}

a:hover,
a:focus {
    color: #000000;
}

hr {
    max-width: 100px;
    margin: 25px auto 0;
    border-width: 1px;
    border-color: rgba(34, 34, 34, 0.1);
}

hr.light {
    border-color: white;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Catamaran', 'Helvetica', 'Arial', 'sans-serif';
    font-weight: 200;
    letter-spacing: 0.5px;
}

.bg-main {
    fill: #FDB766 !important;
}

section {
    padding: 100px 0;
}

#main_navbar {
    border-color: rgba(34, 34, 34, 0.05);
    background-color: white;
    transition: all .35s;
    font-family: 'Catamaran', 'Helvetica', 'Arial', 'sans-serif';
    font-weight: 200;
    letter-spacing: 1px;
}

#main_navbar .navbar-brand {
    color: #222222;
}

#main_navbar strong {
    font-weight: bold;
}

#main_navbar .navbar-brand:hover,
#main_navbar .navbar-brand:focus {
    color: #fc2020;
}

#main_navbar .navbar-toggler {
    font-size: 12px;
    padding: 8px 10px;
    color: #222222;
}

#main_navbar .navbar-nav>li>a {
    font-size: 14px;
    font-family: 'Arial', 'sans-serif';
    padding: 10px;
}

#main_navbar .navbar-nav>li>a.active {
    color: #FD6688 !important;
    background-color: transparent;
}

#main_navbar .navbar-nav>li>a.active:hover {
    background-color: transparent;
}

#main_navbar .navbar-nav>li>a,
#main_navbar .navbar-nav>li>a:focus {
    color: #222222;
}

#main_navbar .navbar-nav>li>a:hover,
#main_navbar .navbar-nav>li>a:focus:hover {
    color: #FD6688;
}

/*https://yoksel.github.io/url-encoder/*/
/*<svg id="header_background_svg" style="margin-top: -1px;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewbox="0 0 1440 100" xml:space="preserve">
  <defs>
    <linearGradient id="grad001" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color: #FDB766 !important; stop-opacity: 1 !important;"/>
      <stop offset="100%" style="stop-color: #FD6688 !important; stop-opacity: 1 !important;"/>
    </linearGradient>
  </defs>
  <rect width="100%" height="100%" fill="url(#grad001)" />
</svg>*/

.background_svg_to_left{
    background-image: url("data:image/svg+xml,%3Csvg id='header_background_svg' style='margin-top: -1px;' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewbox='0 0 1440 100' xml:space='preserve'%3E%3Cdefs%3E%3ClinearGradient id='grad001' x1='0%25' y1='0%25' x2='100%25' y2='0%25'%3E%3Cstop offset='0%25' style='stop-color: %23FDB766 !important; stop-opacity: 1 !important;'/%3E%3Cstop offset='100%25' style='stop-color: %23FD6688 !important; stop-opacity: 1 !important;'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='url(%23grad001)' /%3E%3C/svg%3E");
}
.background_svg_to_right{
background-image: url("data:image/svg+xml,%3Csvg id='header_background_svg' style='margin-top: -1px;' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewbox='0 0 1440 100' xml:space='preserve'%3E%3Cdefs%3E%3ClinearGradient id='grad001' x1='0%25' y1='0%25' x2='100%25' y2='0%25'%3E%3Cstop offset='0%25' style='stop-color: %23FD6688 !important; stop-opacity: 1 !important;'/%3E%3Cstop offset='100%25' style='stop-color: %23FDB766 !important; stop-opacity: 1 !important;'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='url(%23grad001)' /%3E%3C/svg%3E");
}

header.masthead {
    position: relative;
    width: 100%;
    padding-top: 150px;
    padding-bottom: 100px;
    margin-bottom: -2px;
    color: white;
    /* background: url("../images/bg-pattern.png"), #7b4397; */
    /* background: url("../images/bg-pattern.png"), linear-gradient(to left, #fc2020, #dc2430); */
    /* background: #FDB766; */
    /* background: linear-gradient(to left, #FD6688, #FDB766); */
}

header.masthead .header-content {
    max-width: 500px;
    margin-bottom: 100px;
    text-align: center;
}

header.masthead .header-content h1 {
    font-size: 30px;
}

header.masthead .device-container {
    max-width: 325px;
    margin-right: auto;
    margin-left: auto;
}

header.masthead .device-container .screen img {
    border-radius: 3px;
}

section.download {
    position: relative;
    width: 100%;
    padding-top: 150px;
    padding-bottom: 100px;
    color: white;
    /* background: #FDB766; */
    /* background: linear-gradient(to left, #FDB766, #FD6688); */
}

section.features .feature-item {
    max-width: 325px;
    margin: 0 auto;
}

section.features .feature-item {
    padding-top: 50px;
    padding-bottom: 0px;
    text-align: center;
}


/* contact */

section.contact {
    text-align: center;
}

section.contact h2 {
    margin-top: 0;
    margin-bottom: 25px;
}

section.contact h2 i {
    color: #dd4b39;
}

section.contact ul.list-social {
    margin-bottom: 0;
}

section.contact ul.list-social li a {
    font-size: 24px;
    line-height: 45px;
    display: block;
    width: 45px;
    height: 45px;
    color: white;
    border-radius: 100%;
}

section.contact ul.list-social li.social-telegram a {
    background-color: #1da1f2;
}

section.contact ul.list-social li.social-telegram a:hover {
    background-color: #0d95e8;
}

section.contact ul.list-social li.social-messenger a {
    background-color: #1da1f2;
}

section.contact ul.list-social li.social-messenger a:hover {
    background-color: #0d95e8;
}

section.contact ul.list-social li.social-facebook a {
    background-color: #3b5998;
}

section.contact ul.list-social li.social-facebook a:hover {
    background-color: #344e86;
}

section.contact ul.list-social li.social-youtube a {
    background-color: #dd4b39;
}

section.contact ul.list-social li.social-youtube a:hover {
    background-color: #d73925;
}


/* end contact */


/* buttons */

.btn-download-outline {
    color: white;
    border: 1px solid;
    border-color: white !important;
    border-radius: 300px;
    font-family: 'Lato', 'Helvetica', 'Arial', 'sans-serif';
    letter-spacing: 2px;
    text-transform: uppercase;
    font-size: 18px;
    padding: 15px 45px;
    /* background-color: #FDB766 !important; */
}

.btn-download-outline:hover,
.btn-download-outline:focus,
.btn-download-outline:active,
.btn-download-outline.active {
    color: white;
    border-color: white !important;
    background-color: #FD6688 !important;
}

.btn-download-bg {
    background-color: #FDB766 !important;
    /* background-image: linear-gradient(to left, #FD6688 0%, #FDB766 100%) !important; */
}


/* end buttons */


/* footer */

footer {
    margin-top: -2px;
    padding: 25px 0;
    padding-bottom:40px;
    text-align: center;
    color: white;
    /* background: #FDB766; */
    /* background: linear-gradient(to left, #FDB766, #FD6688); */
}

footer p {
    font-size: 12px;
    margin: 0;
}

footer ul {
    margin-bottom: 0;
}

footer ul li a {
    font-size: 12px;
    color: white;
}

footer ul li a:hover,
footer ul li a:focus,
footer ul li a:active,
footer ul li a.active {
    text-decoration: none;
}


/* end footer */


/* Small devices (landscape phones, 576px and up) */

@media (min-width: 360px) {
    #main_navbar .navbar-brand {
        color: #222222;
    }
    header.masthead .header-content h1 {
        font-size: 22px;
    }
}

@media (min-width: 576px) {
    #main_navbar .navbar-brand {
        color: #222222;
    }
    header.masthead .header-content h1 {
        font-size: 24px;
    }
}


/* Medium devices (tablets, 768px and up) */

@media (min-width: 768px) {
    #main_navbar .navbar-brand {
        color: #222222;
    }
    header.masthead .header-content h1 {
        font-size: 30px;
    }
}

/* for all other screen size */
.logo-light{
    display: none !important;
}
 .logo-dark{
    display: block !important;
}

/* Large devices (desktops, 992px and up) */

@media (min-width: 992px) {
    
    /* end of dark and light logo */
    .logo-light{
        display: block !important;
    }
     .logo-dark{
        display: none !important;
    }
     /* app logo light on dark and dark on light navbar */
     #main_navbar.main_navbar_shrink .logo-light {
        display: none !important;
    }
    #main_navbar.main_navbar_shrink .logo-dark {
        display: block !important;
    }

    /* hover states */
    .logo-light:hover {
        /* background: linear-gradient(to left, #FD6688, #FDB766);
        border: 1px solid;
        border-color: white !important;
        border-radius: 100px;
        padding: 8px 8px; */
        opacity: 0.8;
    }
    
    .logo-dark:hover {
        opacity: 0.8;
    }
    /* end of dark and light logo */

    #main_navbar .navbar-brand {
        color: #ffffff;
    }
    #main_navbar {
        border-color: transparent;
        background-color: transparent;
    }
    #main_navbar .navbar-brand {
        color: fade(white, 70%);
    }
    #main_navbar .navbar-brand:hover,
    #main_navbar .navbar-brand:focus {
        color: white;
    }
    #main_navbar .navbar-nav>li>a,
    #main_navbar .navbar-nav>li>a:focus {
        color: rgba(255, 255, 255, 0.904);
    }
    #main_navbar .navbar-nav>li>a:hover,
    #main_navbar .navbar-nav>li>a:focus:hover {
        color: #FDB766;
    }
    #main_navbar.main_navbar_shrink {
        border-color: rgba(34, 34, 34, 0.1);
        background-color: white;
    }
    #main_navbar.main_navbar_shrink .navbar-brand {
        color: #222222;
    }
    #main_navbar.main_navbar_shrink .navbar-brand:hover,
    #main_navbar.main_navbar_shrink .navbar-brand:focus {
        color: #FD6688;
    }
    #main_navbar.main_navbar_shrink .navbar-nav>li>a,
    #main_navbar.main_navbar_shrink .navbar-nav>li>a:focus {
        color: #222222;
    }
    #main_navbar.main_navbar_shrink .navbar-nav>li>a:hover,
    #main_navbar.main_navbar_shrink .navbar-nav>li>a:focus:hover {
        color: #FD6688;
    }
    /* header */
    header.masthead {
        height: 100vh;
        min-height: 775px;
        padding-top: 0;
        padding-bottom: 0;
    }
    header.masthead .header-content {
        margin-bottom: 0;
        text-align: left;
    }
    header.masthead .header-content h1 {
        font-size: 30px;
    }
    header.masthead .device-container {
        max-width: 325px;
    }
}


/* Extra large devices (large desktops, 1200px and up) */

@media (min-width: 1200px) {
    #main_navbar .navbar-brand {
        color: #ffffff;
    }
    header.masthead .header-content {
        margin-bottom: 0;
        text-align: left;
    }
    header.masthead .header-content h1 {
        font-size: 30px;
    }
}


/* svg fill color */

.svg-gradient-yellow-color {
    stop-color: #FD6688 !important;
    stop-opacity: 1 !important;
}

.svg-gradient-red-color {
    stop-color: #FDB766 !important;
    stop-opacity: 1 !important;
}


/* end svg fill color */


/* modal */

.bg-modal {
    background-image: linear-gradient(to bottom, #FD6688 0%, #FDB766 100%);
}

.modal-subtitle {
    font-size: 12px;
    font-weight: normal;
}

.modal-content-radius {
    border-radius: 14px
}


/* end modal */


/* social buttons */

.btn-facebook {
    color: #fff;
    background-color: #3b5998;
    width: 100%;
    margin-top: 10px;
    text-align: left;
}

.btn-facebook:hover {
    color: #fff;
    background-color: #FD6688;
}

.btn-messenger {
    color: #fff;
    background-color: #0084FF;
    width: 100%;
    margin-top: 10px;
    text-align: left;
}

.btn-messenger:hover {
    color: #fff;
    background-color: #FD6688;
}

.btn-youtube {
    color: #fff;
    background-color: #c4302b;
    width: 100%;
    margin-top: 10px;
    text-align: left;
}

.btn-youtube:hover {
    color: #fff;
    background-color: #FD6688;
}

.btn-telegram {
    color: #fff;
    background-color: #0088cc;
    width: 100%;
    margin-top: 10px;
    text-align: left;
}

.btn-telegram:hover {
    color: #fff;
    background-color: #FD6688;
}

.btn-email {
    color: #fff;
    background-color: #D44638;
    width: 100%;
    margin-top: 10px;
    text-align: left;
}

.btn-email:hover {
    color: #fff;
    background-color: #FD6688;
}

.btn-blogger {
    color: #fff;
    background-color: #f57d00;
    width: 100%;
    margin-top: 10px;
    text-align: left;
}

.btn-blogger:hover {
    color: #fff;
    background-color: #FD6688;
}


/*end of social buttons */

/*bd-callout style */
.bd-callout {
  padding: 1.25rem;
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;
  border: 1px solid #eee;
  border-left-width: .25rem;
  border-radius: .25rem
}

.bd-callout h4 {
  margin-top: 0;
  margin-bottom: .25rem
}

.bd-callout p:last-child {
  margin-bottom: 0
}

.bd-callout code {
  border-radius: .25rem
}

.bd-callout+.bd-callout {
  margin-top: -.25rem
}

.bd-callout-info {
  border-left-color: #5bc0de
}

.bd-callout-info h4 {
color: #5bc0de
}

.bd-callout-warning {
  border-left-color: #f0ad4e
}

.bd-callout-warning h4 {
color: #f0ad4e
}

.bd-callout-danger {
  border-left-color: #d9534f
}

.bd-callout-danger h4 {
  color: #d9534f
}

.bd-callout-primary{
  border-left-color: #007bff
}

.bd-callout-primaryh4 {
  color: #007bff
}

.bd-callout-success{
  border-left-color: #28a745
}

.bd-callout-successh4 {
  color: #28a745
}

.bd-callout-default{
  border-left-color: #6c757d
}

.bd-callout-defaulth4 {
  color: #6c757d
}
/*end bd-callout style */