@import url("https://fonts.googleapis.com/css?family=Droid+Serif:400,400i");

.fab {
    font-family: "Font Awesome 5 Brands";
    font-weight: 400;
}

.far {
    font-family: "Font Awesome 5 Free";
    font-weight: 400;
}

.fa,
.fas {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
}

.navbar-brand img {
    height: 55px;
}

.navbar .navbar-brand {
    padding: 0 15px !important;
}

.page-header .filter::after {
    background-color: rgba(0, 0, 0, 0) !important;
}

.navbar-transparent .navbar-nav .nav-item .nav-link:not(.btn) {
    color: #313131;
}

.motto h1,
.motto h3 {
    color: #313131;
}

.motto h1 {
    font-size: 36px;
    font-weight: 600;
}

.motto h3 {
    font-size: 14px;
    font-weight: 400;
}

.btn-primary {
    background-color: #e52e32;
    border-color: #e52e32;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: #b82326 !important;
    border-color: #b82326 !important;
}

.icon-primary {
    color: #e52e32 !important;
}

h2.title {
    font-size: 30px !important;
    font-weight: 600 !important;
}

img.img-about {
    width: 100%;
}

h5.description {
    font-size: 14px;
    font-weight: 400 !important;
    color: #313131;
    line-height: 24px;
}

.description .info-title {
    font-weight: 600;
    font-size: 21px;
    margin-bottom: 10px;
}

.description p {
    font-weight: 400;
    color: #313131;
    font-size: 14px;
}

.section-gray-orca {
    background-color: #f7f7f7 !important;
}

.section-gray-orca img {
    width: 50%;
    display: block;
    margin: 0 auto;
}

.laptop img {
    width: 100%;
}

.featured-title h5 {
    font-size: 18px;
    font-weight: 600;
}

.laptop h5 {
    margin-top: 5em;
}

.featured-content p {
    font-weight: 400;
}

.row.left h5,
.row.left p {
    text-align: left;
}

.row.right h5,
.row.right p {
    text-align: right;
}

.copyright {
    font-weight: 600;
    text-align: center;
    display: block;
}

.modal-title {
    display: inline-block;
    font-weight: 600;
}

.section {
    padding: 45px 0 !important;
}

.modal-link {
    color: #e52e32;
    display: block;
    text-align: center;
    font-weight: 800;
    transition: 0.2s;
    margin-top: -20px;
    margin-bottom: 20px;
}

.modal-link:hover,
.modal-link:focus {
    color: #cc282b;
    text-decoration: underline;
}

.text-primary,
.text-primary:hover {
    color: #e52e32 !important;
}

#harga h1 small {
    font-size: 18px;
    font-weight: bold;
    color: #e52e32;
}

.description {
    margin-top: 16px;
}

.description p {
    color: #66615b;
    font-size: 12px;
    font-weight: 500;
    text-align: center;
    line-height: 24px;
}

#harga .description {
    margin-top: 20px;
    margin-bottom: 20px;
}

.txt-crt {
    text-decoration: line-through;
    color: #c4c4c4 !important;
}

.btn-primary.disabled,
.btn-primary.disabled:hover {
    background-color: #e52e32;
    border-color: #e52e32;
    cursor: not-allowed;
}

.font-size-14 {
    font-size: 14px !important;
}

/* font wight */

.font-size-14 {
    font-size: 14px !important;
}

.font-size-16 {
    font-size: 16px !important;
}

.font-size-18 {
    font-size: 18px !important;
}

.font-size-24 {
    font-size: 24px !important;
}

.font-size-48 {
    font-size: 48px !important;
}

.font-size-72 {
    font-size: 72px !important;
}

.font-weight-300 {
    font-weight: 300 !important;
}

.font-weight-400 {
    font-weight: 400 !important;
}

.font-weight-600 {
    font-weight: 600 !important;
}

.font-weight-700 {
    font-weight: 700 !important;
}

.font-weight-800 {
    font-weight: 800 !important;
}

/* end font weight */

.text-white {
    color: white !important;
}

.text-dark {
    color: #222 !important;
}

.text-gray-dark {
    color: #666 !important;
}

.text-white-gray {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* Footer */
.footer.footer-dark {
    background: #212121;
}

.footer.footer-dark h3 {
    color: #fff;
    margin-bottom: 20px;
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
}

.footer.footer-dark hr {
    border-top-color: rgba(255, 255, 255, 0.2);
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}

.footer .social-icons li {
    padding-right: 20px;
}

pa .footer .social-icons li:last-child {
    padding-right: 0;
}

.footer .social-icons li a {
    color: rgba(255, 255, 255, 0.6);
    font-size: 1rem;
    text-transform: capitalize;
}

.footer .social-icons li a i {
    position: relative;
    border-right: 1px solid rgba(255, 255, 255, 0.6);
    text-align: center;
    padding-right: 10px;
    margin-right: 10px;
}

.footer .social-icons li a:hover {
    color: white;
}

.footer h4 {
    display: inline-block;
    padding-right: 20px;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.8rem;
    margin-bottom: 30px;
    font-weight: 400;
    letter-spacing: 0;
}

.footer h4 i {
    margin-right: 8px;
}

.footer p {
    color: rgba(255, 255, 255, 0.6);
}

.footer a {
    color: #666;
}

.footer-list-item li {
    padding-left: 20px;
    padding-bottom: 10px;
    position: relative;
}

.footer-list-item li:last-child {
    padding-bottom: 0px;
}

.footer-list-item li:before {
    position: absolute;
    top: 0;
    left: 0;
    content: "f105";
    font-family: "Font Awesome 5 Free";
}

.footer-list-item li a {
    color: rgba(255, 255, 255, 0.8);
}

.footer-list-item li a:hover {
    color: #fff;
}

.footer-list-item li em {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
}

.footer-light.footer {
    background-color: #f5f5f5;
}

.footer-light.footer h3 {
    font-size: 1rem;
    margin-bottom: 20px;
}

.footer-light.footer .footer-list-item li a {
    color: #333;
}

.footer-light.footer .footer-list-item li a:hover {
    color: #3483de;
}

.footer-light.footer .footer-list-item li em {
    color: #999;
}

.footer-light.footer p {
    color: #666;
}

.footer-light.footer .contact-list-item li {
    color: #666;
}

.footer-light.footer .contact-list-item li i {
    color: #fff;
    background-color: #3483de;
    border-color: #3483de;
}

.footer-light.footer .social-icons li a {
    color: #999;
}

.footer-light.footer .social-icons li a:hover {
    color: #3483de;
}

.footer-light.footer .social-icons li a i {
    border-right: 1px solid #eee;
}

.footer-light.footer h4 {
    color: #999;
}

.footer-bottomAlt {
    padding: 15px 0;
    padding-top: 20px;
    background-color: #000;
}

.footer-bottomAlt span {
    display: block;
    text-align: right;
}

.find-us p {
    font-size: 14px;
    line-height: 1.9rem;
}

/* end footer */

strong,
b {
    font-weight: 700;
}

/* social icon */

.social-icon {
    margin: 0 5px 5px 0;
    width: 40px;
    height: 40px;
    font-size: 20px;
    line-height: 40px !important;
    color: #555;
    text-shadow: none;
    border-radius: 3px;
    overflow: hidden;
    display: block;
    float: left;
    text-align: center;
    border: 1px solid #aaa;
}

.social-icon:hover {
    border-color: transparent;
}

.social-icon i {
    display: block;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
    line-height: 40px;
    position: relative;
}

.social-icon i:last-child {
    color: #fff !important;
}

.social-icon:hover i:first-child {
    margin-top: -40px;
}

.social-icon-lg {
    margin: 0 5px 5px 0;
    width: 60px;
    height: 60px;
    font-size: 30px;
    line-height: 60px !important;
    color: #555;
    text-shadow: none;
    border-radius: 3px;
    overflow: hidden;
    display: block;
    float: left;
    text-align: center;
    border: 1px solid #aaa;
}

.social-icon-lg:hover {
    border-color: transparent;
}

.social-icon-lg i {
    display: block;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
    line-height: 60px;
    position: relative;
}

.social-icon-lg i:last-child {
    color: #fff !important;
}

.social-icon-lg:hover i:first-child {
    margin-top: -60px;
}

.social-icon-sm {
    margin: 0 5px 5px 0;
    width: 30px;
    height: 30px;
    font-size: 18px;
    line-height: 30px !important;
    color: #555;
    text-shadow: none;
    border-radius: 3px;
    overflow: hidden;
    display: block;
    float: left;
    text-align: center;
    border: 1px solid #aaa;
}

.social-icon-sm:hover {
    border-color: transparent;
}

.social-icon-sm i {
    display: block;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
    line-height: 30px;
    position: relative;
}

.social-icon-sm i:last-child {
    color: #fff !important;
}

.social-icon-sm:hover i:first-child {
    margin-top: -30px;
}

si-border {
    border: 1px solid #aaa !important;
}

.si-border-round {
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    border-radius: 50%;
}

.si-dark-round {
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    border-radius: 50%;
}

.si-gray-round {
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    border-radius: 50%;
}

.si-gray {
    background: #f3f3f3;
    border: 0px;
}

.si-dark {
    background-color: #333;
    border: 0px !important;
    color: #fff !important;
}

.si-colored-facebook,
.si-facebook:hover {
    background-color: #3b5998 !important;
}

.si-colored-twitter,
.si-twitter:hover {
    background-color: #00acee !important;
}

.si-colored-google-plus,
.si-g-plus:hover {
    background-color: #dd4b39 !important;
}

.si-colored-skype,
.si-skype:hover {
    background-color: #00aff0 !important;
}

.si-linkedin:hover,
.si-colored-linkedin {
    background-color: #0e76a8 !important;
}

.si-pin:hover,
.si-colored-pinterest {
    background-color: #c8232c !important;
}

.si-rss:hover,
.si-colored-rss {
    background-color: #ee802f !important;
}

.si-pinterest:hover,
.si-colored-pinterest {
    background-color: #c8232c !important;
}

.si-tumblr:hover,
.si-colored-tumblr {
    background-color: #34526f !important;
}

.si-vimeo:hover,
.si-colored-vimeo {
    background-color: #86c9ef !important;
}

.si-digg:hover,
.si-colored-digg {
    background-color: #191919 !important;
}

.si-instagram:hover,
.si-colored-instagram {
    background-color: #3f729b !important;
}

.si-flickr:hover,
.si-colored-flickr {
    background-color: #ff0084 !important;
}

.si-paypal:hover,
.si-colored-paypal {
    background-color: #00588b !important;
}

.si-yahoo:hover,
.si-colored-yahoo {
    background-color: #720e9e !important;
}

.si-android:hover,
.si-colored-andriod {
    background-color: #a4c639 !important;
}

.si-appstore:hover,
.si-colored-apple {
    background-color: #000 !important;
}

.si-dropbox:hover {
    background-color: #3d9ae8 !important;
}

.si-dribbble:hover,
.si-colored-dribbble {
    background-color: #ea4c89 !important;
}

.si-soundcloud:hover,
.si-colored-soundcoloud {
    background-color: #f70 !important;
}

.si-xing:hover,
.si-colored-xing {
    background-color: #126567 !important;
}

.si-phone:hover,
.si-colored-phone {
    background-color: #444 !important;
}

.si-behance:hover,
.si-colored-behance {
    background-color: #053eff !important;
}

.si-github:hover,
.si-colored-github {
    background-color: #171515 !important;
}

.si-stumbleupon:hover,
.si-colored-stumbleupon {
    background-color: #f74425 !important;
}

.si-email:hover,
.si-colored-email {
    background-color: #6567a5 !important;
}

.si-wordpress:hover,
.si-colored-wordpress {
    background-color: #1e8cbe !important;
}

/* end social icon */

.list-inline {
    padding-left: 0;
    list-style: none;
    margin-top: 20px;
}

.header-content {
    padding: 140px 0 80px 0;
}

.title.text-center {
    margin-bottom: 12px;
}

.text-description {
    text-align: center;
    color: #fff;
    font-weight: 600;
    margin-bottom: 50px;
}

#payment-invoice h1,
#payment-invoice h2,
#payment-invoice h3,
#payment-invoice h4,
#payment-invoice h5,
#payment-invoice p,
#payment-invoice li,
#payment-invoice td {
    font-weight: 400;
    /* color: #000000; */
}

#company-registration-form h1,
#company-registration-form h2,
#company-registration-form h3,
#company-registration-form h4,
#company-registration-form h5,
#company-registration-form p,
#company-registration-form li,
#company-registration-form label {
    font-weight: 400;
    /* color: #000000; */
}

#form-insert h1,
#form-insert h2,
#form-insert h3,
#form-insert h4,
#form-insert h5,
#form-insert p,
#form-insert li,
#form-insert label {
    font-weight: 400;
    /* color: #000000; */
}

.plan-details h4,
.plan-details p {
    font-weight: 400;
}

/*	======== Radio Check Box ========== */

:root {
    --card-line-height: 1.2em;
    --card-padding: 1em;
    --card-radius: 0.5em;
    --color-green: #66615b;
    --color-gray: #e2ebf6;
    --color-dark-gray: #c4d1e1;
    --radio-border-width: 2px;
    --radio-size: 1.5em;
}

.list-fitur {
    font-size: 12px;
}

.card:hover {
    box-shadow: 5px 5px 10px #66615b;
}

.radio {
    font-size: inherit;
    margin: 0;
    position: absolute;
    right: calc(var(--card-padding) + var(--radio-border-width));
    top: calc(var(--card-padding) + var(--radio-border-width));
}

@supports (-webkit-appearance: none) or (-moz-appearance: none) {
    .radio {
        -webkit-appearance: none;
        -moz-appearance: none;
        background: #fff;
        border: var(--radio-border-width) solid var(--color-gray);
        border-radius: 50%;
        cursor: pointer;
        height: var(--radio-size);
        outline: none;
        transition: background 0.2s ease-out, border-color 0.2s ease-out;
        width: var(--radio-size);
    }

    .radio::after {
        border: var(--radio-border-width) solid #fff;
        border-top: 0;
        border-left: 0;
        content: "";
        display: block;
        height: 0.75rem;
        left: 25%;
        position: absolute;
        top: 50%;
        transform: rotate(45deg) translate(-50%, -50%);
        width: 0.375rem;
    }

    .radio:checked {
        background: var(--color-green);
        border-color: var(--color-green);

        box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.15);
    }

    .card:hover .radio {
        border-color: var(--color-dark-gray);
    }

    .card:hover .radio:checked {
        border-color: var(--color-green);
    }
}

.plan-details {
    border: var(--radio-border-width) solid var(--color-gray);
    border-radius: var(--card-radius);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    padding: var(--card-padding);
    transition: border-color 0.2s ease-out;
}

.card:hover .plan-details {
    border-color: var(--color-dark-gray);
}

.radio:checked~.plan-details {
    border-color: var(--color-green);
}

.radio:focus~.plan-details {
    box-shadow: 0 0 0 2px var(--color-dark-gray);
}

.radio:disabled~.plan-details {
    color: var(--color-dark-gray);
    cursor: default;
}

.radio:disabled~.plan-details .plan-type {
    color: var(--color-dark-gray);
}

.card:hover .radio:disabled~.plan-details {
    border-color: var(--color-gray);
    box-shadow: none;
}

.card:hover .radio:disabled {
    border-color: var(--color-gray);
}

/*	======== End of Radio Check Box ========== */

/* padding and margin */

.pt0 {
    padding-top: 0 !important;
}

.pt10 {
    padding-top: 10px !important;
}

.pt20 {
    padding-top: 20px !important;
}

.pt30 {
    padding-top: 30px !important;
}

.pt40 {
    padding-top: 40px !important;
}

.pt50 {
    padding-top: 50px !important;
}

.pt60 {
    padding-top: 60px !important;
}

.pt70 {
    padding-top: 70px !important;
}

.pt80 {
    padding-top: 80px !important;
}

.pt90 {
    padding-top: 90px !important;
}

.pt100 {
    padding-top: 100px !important;
}

.pb0 {
    padding-bottom: 0 !important;
}

.pb10 {
    padding-bottom: 10px !important;
}

.pb15 {
    padding-bottom: 15px !important;
}

.pb20 {
    padding-bottom: 20px !important;
}

.pb30 {
    padding-bottom: 30px !important;
}

.pb40 {
    padding-bottom: 40px !important;
}

.pb50 {
    padding-bottom: 50px !important;
}

.pb60 {
    padding-bottom: 60px !important;
}

.pb70 {
    padding-bottom: 70px !important;
}

.pb80 {
    padding-bottom: 80px !important;
}

.pb90 {
    padding-bottom: 90px !important;
}

.pb100 {
    padding-bottom: 100px !important;
}

.mb0 {
    margin-bottom: 0 !important;
}

.mb5 {
    margin-bottom: 5px !important;
}

.mb10 {
    margin-bottom: 10px !important;
}

.mb20 {
    margin-bottom: 20px !important;
}

.mb30 {
    margin-bottom: 30px !important;
}

.mb40 {
    margin-bottom: 40px !important;
}

.mb50 {
    margin-bottom: 50px !important;
}

.mb60 {
    margin-bottom: 60px !important;
}

.mb70 {
    margin-bottom: 70px !important;
}

.mb80 {
    margin-bottom: 80px !important;
}

.mb90 {
    margin-bottom: 90px !important;
}

.mb100 {
    margin-bottom: 100px !important;
}

.mt5 {
    margin-top: 5px !important;
}

/* end padding and margin */