@font-face {
    font-family: 'Josefin Sans';
    src: url('../fonts/JosefinSans-Regular.ttf');
}
@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins-Regular.ttf');
}

:root {
    --primary-color: rgb(221, 8, 8);
    --primary-hover: #000;
    --secondary-color: #000;
    --secondary-hover: #000;
    /* Social */
    --fb: rgba(66,103,178,1);
    --tw: rgba(29,161,242,1);
    --line: rgba(40,103,178,1);
    --yt: rgba(255,0,0,1);
    --wa: rgba(74,201,89,1);
    --git: #333;
    --ggl: radial-gradient(circle at 30% 107%, #4285F4 0%, #DB4437 5%, #F4B400 45%,#4285F4 60%,#0F9D58 90%);
    --ig: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%);
}

a {
    color: var(--primary-color); }
    a:hover,
    a:focus {
        color: var(--primary-hover); }
    
header {
    min-height: 80px; }

section {
    background-color: #eee; }
    section.white {
        background-color: #fff; }
    section.grey {
        background-color: rgb(237 237 237); }

footer {
    background-color: #fff;
    color: #333;
    display: block;
    padding: 20px 0;
    text-align: center;
    width: 100%; }
    footer .developer a {
        color: #000;
        font-family: 'Poppins', cursive; }

#empty {
    align-items: center;
    display: flex;
    justify-content: center;
    position: relative;
    width: 100%;
    height: calc(100vh - 280px); }
    #empty::before {
        color: rgba(100,100,100,.3);
        font-size: 2em;
        font-family: 'Josefin Sans', cursive;
        content: '-Data belum tersedia-'; }

.font-josef {
    font-family: 'Josefin Sans', cursive; }

/* Origina IM */
.im-preload {
    align-items: center;
    background-color: #fff;
    display: flex;
    height: 100%;
    justify-content: center;
    position: fixed;
        top: 0;
        left: 0;
    z-index: 9999;
    width: 100%; }
    .im-preload > img {
        display: block;
        width: 100px; }
        
.navbar {
    padding-top: .1rem !important;
    padding-bottom: .1rem !important; }
    
.im-navbar {
    align-items: center;
    background-color: #fff;
    box-shadow: 0 3px 7px rgba(0,0,0,.2);
    min-height: 100px;
    display: flex;
    position: relative;
    transition: all .3s;
    width: 100%;
    z-index: 999; }
    .im-navbar .navbar-brand > img {
        transition: all .3s;
        height: 50px;
        display: block; }
    .im-navbar .social-media {
        position: relative; }
        .im-navbar .social-media a {
            border-radius: 50%;
            height: 30px;
            line-height: 30px;
            margin: 0 3px;
            text-align: center;
            width: 30px;
            transition: all .2s;
            display: block; }
            .im-navbar .social-media a:hover,
            .im-navbar .social-media a:focus {
                opacity: .7;
                color: #fff !important; }
    .im-navbar .navbar-nav {
        padding: 0; }
        .im-navbar .navbar-nav > li > a {
            font-family: 'Poppins', cursive;
            transition: all .2s;
            color: #222; }
            .im-navbar .navbar-nav > li > a:hover,
            .im-navbar .navbar-nav > li > a:focus,
            .im-navbar .navbar-nav > li.active > a {
                color: var(--primary-color); }
.im-navbar.im-fixed {
    animation: slideIn .5s;
    min-height: 80px;
    position: fixed;
        left: 0;
        top: 0; }
    .im-navbar.im-fixed .navbar-brand > img {
        height: 70px; }
    
.im-yt-title {
    position: relative; }
    .im-yt-title > h1 {
        color: var(--primary-color); 
        font-size: 2.4rem; }
    .im-yt-title > p {
        font-size: 1.6rem; }
.im-yt-frame {
    position: relative; }
    .im-yt-frame::after {
        content: '';
        display: block;
        background: url('../images/tv-frame.png') top left no-repeat;
        background-size: 100% 100%;
        position: absolute;
        pointer-events: none;
        top: 0;
        height: 100%;
        width: 100%; }
    .im-yt-frame iframe {
        top: 5px !important;
        left: 7px !important;
        bottom: unset !important;
        width: calc(100% - 12px) !important;
        height: 85% !important; }
    
.im-catalogs {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    position: relative; }
.im-catalog {
    background-image: linear-gradient(to right, #fff0, #fff0, #ffff, rgb(243, 121, 8), var(--primary-color));
    background-position: left;
    background-size: 500%;
    border-radius: 10px;
    display: block;
    margin: 10px 0;
    transition: all .5s;
    padding: 10px; }
    .im-catalog > a {
        background-image: linear-gradient(to right, #fff0, #fffa, #ffff);
        background-size: 500%;
        background-position: right;
        border-radius: 10px;
        height: 100%;
        padding: 20px 0;
        transition: all .5s .2s;
        text-decoration: none;
        display: block; }
        .im-catalog > a > img {
            display: block;
            object-fit: contain;
            margin: auto;
            width: 70%; }
        .im-catalog > a > .name {
            display: block;
            padding: 10px 0 0 0;
            text-align: center; }
            .im-catalog > a > .name > h3 {
                color: #333;
                transition: all .2s;
                font-size: 20px; }
    .im-catalog:hover {
        background-position: right; }
        .im-catalog:hover > a {
            background-position: left; }
            .im-catalog:hover > a > .name > h3 {
                color: #fff; }
    
.im-pricing {
    background-color: #fff;
    border-radius: 15px;
    box-shadow: 0 0 5px rgba(0,0,0,.1);
    margin-bottom: 60px;
    position: relative;
    display: block; }
.im-pricing.pri-arm {
    transform: scale(1.1, 1.1);
    margin-bottom: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, .5); }
    .im-pricing .heading {
        background-image: linear-gradient(to top, rgba(50, 48, 48, 1), rgba(0, 0, 0, 1));
        border-bottom: 1px solid #ddd;
        border-top-right-radius: 15px;
        border-top-left-radius: 15px;
        color: #e1e1e1;
        font-size: 14px;
        display: block;
        padding: 40px 30px;
        text-align: center; }
        .im-pricing.pri-arm .heading::after {
            display: block;
            background: url('../images/recommend.png') center no-repeat;
            background-size: contain;
            height: 50px;
            width: 50px;
            position: absolute;
                top: -10px;
                right: -10px;
            content: ''; }
        .im-pricing .heading .title {
            color: #fff;
            font-weight: 700;
            font-size: 24px; }
            .im-pricing .heading .title::after {
                display: block;
                background-color: var(--primary-color);
                height: 2px;
                width: 40%;
                margin: 10px auto;
                content: ''; }
        .im-pricing .any-cam {
            padding: 20px 0;
            display: block; }
            .im-pricing .any-cam > .type-cam {
                color: #fff;
                font-family: 'Poppins', cursive;
                font-size: 2em;
                text-align: center; }
        .im-pricing .heading .price {
            font-size: 18px;
            display: block; }
            .im-pricing .heading .price > span {
                color: var(--green);
                display: block; }
                .im-pricing .heading .price > del {
                    color: var(--red); }
    .im-pricing .body {
        background-color: #fafafa;
        border-bottom: 1px solid #ddd; }
        .im-pricing .body > ul {
            margin: 0;
            padding: 5px 0; }
            .im-pricing .body > ul > li {
                align-items: center;
                border-bottom: 1px solid #eee;
                list-style-type: none;
                font-size: 14px;
                padding: 10px;
                display: flex;
                margin: 0; }
                .im-pricing .body > ul > li > div:first-child {
                    text-align: left;
                    flex: 0 0 calc(100% - 40px); }
                .im-pricing .body > ul > li > div:last-child {
                    text-align: right;
                    flex: 0 0 40px; }
    .im-pricing .action {
        display: block; }
        .im-pricing .action > a {
            background-color: var(--primary-color);
            border-bottom-right-radius: 15px;
            border-bottom-left-radius: 15px;
            color: #fff;
            font-weight: 700;
            padding: 10px;
            width: 100%;
            text-align: center;
            text-decoration: none;
            transition: all .2s;
            display: block; }
            .im-pricing .action > a:hover {
                background-color: var(--primary-hover); }

.im-client {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    column-gap: 5px;
    row-gap: 15px;
    padding: 0; }
    .im-client li {
        list-style-type: none;
        margin: 0; }
        .im-client li > a {
            display: block; }
            .im-client li > a > img {
                display: block;
                height: 140px;
                object-fit: contain;
                width: 140px; }

.im-testimony {
    margin: 0 20px 40px;
    display: block; }
    .im-testimony .stars {
        display: flex;
        margin: 10px 0 0 0;
        padding: 0; }
        .im-testimony .stars > li {
            margin: 0 2px;
            list-style-type: none; }
            .im-testimony .stars > li::after {
                content: '\f005';
                color: var(--yellow);
                font-family: 'Font Awesome 5 Free';
                font-size: 12px;
                font-weight: 600; }
    .im-testimony .message {
        background-color: #fff;
        padding: 10px;
        display: block; }
    .im-testimony .author {
        align-items: center;
        display: flex; }
        .im-testimony .author > img {
            border-radius: 50%;
            flex: 0 0 60px;
            height: 60px;
            object-fit: cover;
            width: 60px; }
        .im-testimony .author > .name {
            flex: 0 0 calc(100% - 100px);
            padding: 0 10px; }

.im-portfolio {
    background-color: #fff;
    display: block;
    position: relative;
    width: 100%; }
    .im-portfolio > img {
        display: block;
        width: 100%; }
    .im-portfolio .owl-prev,
    .im-portfolio .owl-next {
        outline: 0 !important;
        width: 30px;
        position: absolute;
            top: 30%;
        display: block; }
    .im-portfolio .owl-prev {
        left: -40px; }
    .im-portfolio .owl-next {
        right: -40px; }
    .im-portfolio .owl-prev > span,
    .im-portfolio .owl-next > span {
        color: #555;
        font-size: 6em; }
         
.im-portfolio-item {
    margin: 0 0 10px 0;
    box-shadow: 0 5px 10px rgba(0,0,0,.2);
    border-radius: 4px;
    background-color: #fff; }
    .im-portfolio-item > a {
        text-decoration: none; }
        .im-portfolio-item > a > h3 {
            color: #333;
            padding: 10px 10px 0 10px;
            font-size: 22px;
            margin-bottom: 0;
            transition: all .2s;
            font-weight: 600; }
        .im-portfolio-item > a > span {
            display: inline-block;
            color: #777;
            padding: 5px 10px;
            font-size: 14px; }
            .im-portfolio-item > a > span i {
                margin: 0 5px;
                color: #aaa; }
        .im-portfolio-item > a > .image > img {
            display: block;
            height: 210px;
            object-fit: cover;
            width: 100%; }
    .im-portfolio-item > a:hover > h3 {
        color: var(--primary-color); }

.im-portfolio-list {
    display: block; }
    .im-portfolio-list ul {
        background-color: #fff;
        position: relative;
        padding: 0;
        margin: 0; }
        .im-portfolio-list ul > li {
            list-style: none;
            margin: 0; }
            .im-portfolio-list ul > li:before {
                display: inline-block;
                background: url('../images/point-cctv.png') center no-repeat;
                background-size: contain;
                opacity: .3;
                position: absolute;
                    left: 0;
                height: 20px;
                width: 20px;
                content: ''; }
        .im-portfolio-list ul > li:hover::before {
            opacity: 1; }
            .im-portfolio-list ul > li > a {
                color: #333;
                display: block;
                padding: 10px 10px 10px 30px;
                transition: all .2s;
                border-bottom: 1px solid #eee; }
                .im-portfolio-list ul > li > a:hover {
                    color: var(--primary-color);
                    background-color: #eee; }

.im-portfolio-detail {
    display: block; }
    .im-portfolio-detail > h3 {
        margin: 0 0 20px 0; }
    .im-portfolio-detail > .content {
        background-color: #fff;
        padding: 10px;
        display: block; }
    .im-portfolio-detail .image {
        border-radius: 3px;
        border: 1px solid #eee;
        margin: 0 0 10px 0; }
        .im-portfolio-detail .image > img {
            width: 100%;
            display: block; }
            .im-portfolio-detail .image > span {
                display: block;
                padding: 5px; }

.im-search {
    align-items: center;
    display: flex;
    position: relative;
    width: 100%; }
    .im-search > input {
        width: 100%;
        outline: 0;
        padding: 7px 15px;
        border-radius: 5px;
        border: 1px solid var(--light); }
        .im-search > input:focus {
            border-color: var(--gray); }
        .im-search > button {
            position: absolute;
                right: 0;
            background-color: transparent;
            border: 1px solid transparent; }

.im-blog {
    display: flex;
    flex-flow: column;
    margin: 0 0 20px 0;
    box-shadow: 0 0 15px var(--light);
    position: relative; }
    .im-blog .img {
        position: relative; }
        .im-blog .img img {
            display: block;
            height: 200px;
            width: 100%;
            object-fit: cover; }
    .im-blog .title {
        background-color: var(--white);
        min-height: 180px;
        position: relative;
        padding: 15px 10px; }
        .im-blog .title::before {
            display: block;
            width: 100%;
            border-top: 6px dotted var(--gray);
            border-bottom: 5px dotted var(--light);
            position: absolute;
                top: -3px;
                left: 0;
            content: ''; }
        .im-blog .title > h3 {
            font-size: 18px; }
            .im-blog .title > h3 > a {
                color: var(--dark);
                transition: all.2s; }
        .im-blog .title > span {
            display: block;
            font-size: 12px;
            color: var(--gray); }
.im-blog-tags > ul {
    padding: 0;
    margin: 0 0 10px 0;
    list-style: none; }
    .im-blog-tags > ul > li {
        margin: 0 2px 2px 0;
        display: inline-block; } 
        .im-blog-tags > ul > li > a {
            display: inline-block;
            padding: 1px 5px;
            color: var(--primary);
            font-size: 14px;
            font-weight: 600;
            border-radius: 4px;
            background-color: var(--light); }
.im-blog-list {
    border-radius: 10px;
    background-color: var(--white);
    padding: 20px; }
.im-blog-detail {
    background-color: var(--white);
    border-radius: 10px;
    box-shadow: 0 0 10px var(--light);
    position: relative; }
    .im-blog-detail .title {
        border-bottom: 1px solid var(--light);
        padding: 20px; }
        .im-blog-detail .title > span {
            font-size: 14px;
            font-style: italic;
            margin: 0 10px 0 0;
            color: var(--gray); }
    .im-blog-detail .img {
        padding: 20px; }
        .im-blog-detail .img > img {
            display: block;
            border-radius: 10px;
            width: 100%; }
    .im-blog-detail .content {
        padding: 10px 20px; }

.im-item-package {
    background-color: #fff;
    border: 1px solid #eee;
    box-shadow: 0 5px 15px rgba(0,0,0,.2);
    margin: 20px 10px;
    display: block; }
    .im-item-package .heading {
        padding: 20px;
        display: block; }
        .im-item-package .heading .brand > img {
            margin: 10px 0;
            max-width: 180px;
            max-height: 80px;
            display: block; }
        .im-item-package .title {
            padding: 10px 0;
            align-items: center;
            display: flex; }
            .im-item-package .title .name {
                font-size: 20px;
                font-weight: 600;
                flex: 0 0 calc(100% - 180px); }
                .im-item-package .title .name > .price > span {
                    color: var(--primary-color);
                    display: block; }
                .im-item-package .title .name > .price > del {
                    color: #999;
                    font-size: 16px;
                    display: block; }
            .im-item-package .title .type {
                background-image: radial-gradient(circle at bottom left, rgb(243, 121, 8), var(--primary-color));;
                border-radius: 10px;
                box-shadow: 0 3px 10px rgba(0,0,0,.2);
                color: #fff;
                display: block;
                font-family: 'Poppins', cursive;
                font-size: 28px;
                font-weight: 800;
                text-align: center;
                padding: 15px 0;
                flex: 0 0 180px; }
    .im-item-package .body {
        display: block; }
        .im-item-package .body ul {
            padding: 0; }
            .im-item-package .body ul > li {
                margin: 0;
                justify-content: space-between;
                display: flex;
                padding: 10px 20px;
                transition: all .2s;
                list-style: none; }
                .im-item-package .body ul > li.heading-list {
                    background-color: #eee;
                    font-weight: 700;
                    text-transform: uppercase;
                    border-bottom: 2px solid #eee; }
                .im-item-package .body ul > li.row-list:nth-child(odd) {
                    background-color: #eee5; }
                .im-item-package .body ul > li.row-list:hover {
                    background-color: #eeea; }
                    .im-item-package .body ul > li.row-list > div:last-child {
                        text-align: center;
                        min-width: 40px; }
        .im-item-package .image {
        display: block; }
        .im-item-package .image > img {
            display: block;
            object-fit: cover;
            height: 200px;
            width: 100%; }
    .im-item-package .action {
        text-align: center;
        display: block; }
        .im-item-package .action > a {
            background-color: var(--primary-color);
            border-radius: 5px;
            color: #fff;
            display: block;
            font-weight: 600;
            padding: 10px 0;
            transition: all .2s;
            text-transform: uppercase;
            text-decoration: none;
            margin: 20px auto;
            max-width: 280px; }
            .im-item-package .action > a:hover {
                background-color: var(--primary-hover); }

.im-preview {
    position: relative; }
    .im-preview .overlay {
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        height: 100%;
        transition: all .2s;
        width: 100%;
        position: absolute;
            top: 0;
            left: 0;
        background-color: rgba(0,0,0,.5); }
        .im-preview .overlay > a {
            background-color: #fff;
            border-radius: 50%;
            color: #333;
            display: block;
            height: 40px;
            line-height: 40px;
            text-align: center;
            transition: all .2s;
            width: 40px; }
            .im-preview .overlay > a:hover {
                background-color: #fffa; }
    .im-preview:hover .overlay {
        opacity: 1; }

.im-stepOrder {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    row-gap: 80px;
    column-gap: 80px;
    position: relative; }
    .im-stepOrder .step-item {
        background-color: #f7f7f7;
        border-radius: 15px;
        box-shadow: 0 5px 10px rgba(0,0,0,.2);
        display: block;
        position: relative;
        border: 1px solid #eee; }
        .im-stepOrder .step-item::after {
            content: '\f0a4';
            color: #999;
            font-size: 2.5em;
            position: absolute;
                top: 50%;
                right: -60px;
            transition: all .2s;
            font-family: 'Font Awesome 5 Free';
            font-weight: 600; }
            .im-stepOrder .step-item:hover::after {
                color: var(--primary-color); }
            .im-stepOrder .step-item:nth-child(3)::after,
            .im-stepOrder .step-item:nth-child(6)::after,
            .im-stepOrder .step-item:nth-child(9)::after,
            .im-stepOrder .step-item:last-child::after {
                content: ''; }
        .im-stepOrder .step-item > .heading {
            height: 200px;
            display: block;
            overflow: hidden; }
            .im-stepOrder .step-item .image {
                align-items: center;
                padding: 40px 0;
                display: flex;
                position: relative;
                justify-content: center; }
                .im-stepOrder .step-item .image::before {
                    background-color: #fff;
                    border-radius: 50%;
                    display: block;
                    transform: scale(2, 2);
                    position: absolute;
                        bottom: 70px;
                    height: 180px;
                    width: 180px;
                    z-index: 0;
                    content: ''; }
                .im-stepOrder .step-item .image > img {
                    display: block;
                    height: 100px;
                    object-fit: contain;
                    z-index: 10;
                    width: 100px; }
        .im-stepOrder .step-item > .title {
            text-align: center;
            margin: 20px 0 10px 0;
            display: block; }
            .im-stepOrder .step-item > .title > h3 {
                color: #333;
                font-family: 'Josefin Sans', cursive;
                font-weight: 700;
                font-size: 22px; }
        .im-stepOrder .step-item > .content {
            color: #555;
            text-align: center;
            padding: 10px 20px;
            display: block; }

.im-business {
    background-color: #fff;
    display: block;
    padding: 10px; }
    .im-business > .image {
        margin: 0 0 20px 0; }
        .im-business > .image > img {
            display: block;
            width: 100%; }

/* Sama sih */
.facebook-color {
    color: #fff;
    background-color: var(--fb); }
.twitter-color {
    color: #fff;
    background-color: var(--tw); }
.instagram-color {
    color: #fff;
    background: var(--ig); }
.whatsapp-color {
    color: #fff;
    background-color: var(--wa); }
.line-color {
    color: #fff;
    background-color: var(--line); }
.youtube-color {
    color: #fff;
    background-color: var(--yt); }
.tiktok-color {
    background-color: #222;
    color: #fff;
    text-shadow: 2px 2px 0px #ff00e0; }
.google-color {
    background: var(--ggl);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; }

.sticky-one {
    top: 100px;
    position: sticky; }

.page-title {
    padding: 20px 0;
    margin-bottom: 20px;
    position: relative;
    z-index: 10;
    display: block; }
    .page-title .ill-back {
        background-color: #fff;
        border-radius: 5px;
        cursor: pointer;
        padding: 10px;
        border: 0 none;
        font-size: 24px;
        line-height: 1;
        margin: 0 10px;
        transition: all .2s;
        outline: 0; }
        .page-title .ill-back:hover {
            color: var(--primary-color);
            background-color: #fafafa; }
    .page-title > h1 {
        display: inline-block;
        font-size: 3em; }
    .page-title > h2 {
        display: inline-block;
        font-size: 2.4em; }
        .page-title h1::after,
        .page-title h2::after {
            content: '';
            background-color: var(--primary-color);
            display: block;
            height: 4px;
            width: 80%; }
        .page-title.text-center h1::after,
        .page-title.text-center h2::after {
            margin: auto;
        }
.compro.long {
    min-height: 100vh;
    position: relative; }
.compro.short {
    position: relative; }
    .compro.short .desc {}
    .compro.short .desc .title {
        font-size: 3em;
        margin: 20px 0; }
    .compro.short .desc > a {
        background: linear-gradient(64deg, var(--primary-color) 70%, #000 40%);
        background-position: center right;
        background-size: 320%;
        border-radius: 3px;
        color: #f0f0f0;
        font-weight: 600;
        padding: 7px 50px 7px 20px;
        text-decoration: none;
        transition: all .3s;
        display: inline-block; }
        .compro.short .desc > a:hover,
        .compro.short .desc > a:focus {
            color: #fff;
            background-position: center left;
            background-size: 180%; }
    .compro.long img,
    .compro.short img {
        box-shadow: 0 5px 10px rgba(0,0,0,.5);
        border-radius: 5px;
        display: block;
        width: 100%; }

.get-bg {
    background-image: var(--bg);
    background-size: cover;
}
.white-bg {
    background-color: #fff; }
.black-bg {
    background-color: #333; }
.bor-left-red {
    border-left: 5px solid var(--primary-color); }
.savin-bg {
    position: relative;
    background: url('../images/bg.png') bottom center no-repeat;
    background-attachment: fixed;
    background-size: cover; }
    .savin-bg::after {
        background: linear-gradient(to top, #ffff, #fff0);
        display: block;
        pointer-events: none;
        position: absolute;
            bottom: 0;
        height: 40px;
        width: 100%;
        content: ''; }
.text-bg {
    overflow: hidden;
    position: relative; }
    .text-bg::before {
        color: #ddd;
        display: block;
        font-family: 'Poppins', cursive;
        font-size: 12pc;
        font-weight: 1000;
        line-height: 1.2;
        text-transform: uppercase;
        position: absolute;
            bottom: 0;
            left: 0;
        z-index: 0;
        content: 'Inspira Mulia'; }
.text-bg-small {
    overflow: hidden;
    position: relative; }
    .text-bg-small::before {
        color: #ddd;
        display: block;
        font-family: 'Poppins', cursive;
        font-size: 3pc;
        font-weight: 1000;
        line-height: 1.2;
        text-transform: uppercase;
        position: absolute;
            bottom: 0;
            right: 0;
        z-index: 0;
        content: 'Inspira Mulia'; }

.map-frame > iframe {
    width: 100%;
    height: 360px;
    display: block; }

.right-liner {
    position: relative; }
    .right-liner::before {
        display: block;
        background-color: #ddd;
        height: 9px;
        width: 9px;
        border-radius: 50%;
        position: absolute;
            top: 0;
            right: -4px;
        content: ''; }
    .right-liner::after {
        display: block;
        background-color: #ddd;
        height: 100%;
        width: 1px;
        position: absolute;
            top: 0;
            right: 0;
        content: ''; }
.owl-banner .owl-item {
    position: relative; }
    .owl-banner .owl-item img {
        max-height: calc(100vh - 100px) !important;
        object-fit: cover !important; }
    .owl-banner .owl-item a {
        animation: pulseOut ease 2s infinite;
        background-color: var(--primary-color);
        border-radius: 45px;
        color: #fff;
        font-family: 'Josefin Sans', cursive;
        font-weight: 700;
        text-decoration: none;
        display: block;
        padding: 15px 20px;
        position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
        margin: auto;
        transition: all .2s;
        text-align: center;
        width: auto;
        max-width: 280px; }
        .owl-banner .owl-item a:hover {
            opacity: .7; }

.owl-dots {
    display: flex;
    margin-top: 10px;
    justify-content: center; }
    .owl-dots > .owl-dot {
        background-color: #ddd !important;
        border-radius: 5px;
        display: block;
        margin: 0 2px;
        height: 7px;
        z-index: 10;
        width: 10px; }
        .owl-dots > .owl-dot.active {
            background-color: var(--primary-color) !important;
            width: 20px; }

.big-contact {
    margin: 20px auto;
    max-width: 480px;
    display: block; }
    .big-contact > a {
        text-decoration: none;
        display: block; }
    .big-contact > a.big-whatsapp {
        align-items: center;
        position: relative;
        display: flex; }
        .big-contact > a.big-whatsapp > i {
            align-items: center;
            background-color: var(--wa);
            border: 5px solid #fafafa;
            border-radius: 50%;
            color: #fff;
            display: flex;
            height: 100px;
            justify-content: center;
            position: absolute;
                right: 50px;
            width: 100px;
            font-size: 4em;
            flex: 0 0 100px; }
        .big-contact > a.big-whatsapp > div {
            background-color: var(--wa);
            border-top-left-radius: 45px;
            border-bottom-left-radius: 45px;
            height: 80px;
            overflow: hidden;
            padding: 0 20px;
            flex: 0 0 calc(100% - 100px); }
            .big-contact > a.big-whatsapp > div > span {
                transition: all .3s;
                color: #fff;
                font-weight: 600;
                font-size: 24px;
                line-height: 80px;
                transform: translate(0, 0px);
                display: block; }
            .big-contact > a.big-whatsapp > div > span:nth-child(2) {
                color: #eee;
                text-shadow: 0 0 5px rgba(0,0,0,.2);
                font-size: 42px; }
    .big-contact > a:hover div > span {
        transform: translate(0, -80px); }

.newsletter {
    position: relative; }
    .newsletter h1 {
        font-size: 2rem;
        color: var(--white); }
    .newsletter form {
        align-items: center;
        display: flex; }
        .newsletter form > input {
            padding: 10px 20px;
            background-color: rgba(255,255,255,.75);
            border: 1px solid var(--secondary-color);
            border-right: 0 none;
            transition: all .2s;
            flex: calc(100% - 100px) 0 0; }
            .newsletter form > input::-webkit-input-placeholder {
                font-family: 'Josefin Sans', cursive; }
            .newsletter form > input:focus {
                background-color: rgba(255,255,255,1);
                box-shadow: -10px -10px 0 1px rgba(255,255,255,.5);
                outline: none; }
        .newsletter form > button {
            padding: 10px 0;
            background-color: var(--primary-color);
            border: 1px solid var(--primary-color);
            border-left: 0 none;
            cursor: pointer;
            color: var(--white);
            font-family: 'Josefin Sans', cursive;
            text-align: center;
            transition: all .2s;
            flex: 100px 0 0; }
            .newsletter form > button:hover,
            .newsletter form > button:focus {
                outline: none;
                background-color: var(--primary-hover);
                border-color: var(--primary-hover); }

@keyframes slideIn {
    0% {
        transform: translate(0, -100px);
    }
    100% {
        transform: translate(0, 0px);
    }
}
@keyframes pulseOut {
    0% {
        box-shadow: 0 0 0 0px rgba(255,255,255,1);
    }
    100% {
        box-shadow: 0 0 10px 20px rgba(255,255,255,0);
    }
}
@media screen and (max-width: 991px) {
    .text-bg {
        position: relative; }
        .text-bg::before {
            position: absolute;
                top: 0;
            font-size: 7pc; }
    .im-catalogs {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr; }
        
    .im-client {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr; }
}
@media screen and (max-width: 767px) {
    .text-bg {
        position: relative; }
        .text-bg::before {
            font-size: 5pc; }
    .compro.long {
        min-height: unset; }
    .compro.short .desc {
        margin: 20px 0; }
        .compro.short .desc > a {
            background-size: 101%;
            padding: 10px 0;
            display: block;
            text-align: center;
            border-radius: 45px; }

    .big-contact > a.big-whatsapp {
        position: relative; }
        .big-contact > a.big-whatsapp > div > span:nth-child(2) {
            font-size: 28px; }

    .im-blog {
        flex-flow: row; }
        .im-blog .img img {
            height: 150px;
            width: 150px; }
        .im-blog .title {
            flex: calc(100% - 150px) 0 0;
            padding: 10px; }
            .im-blog .title::before {
                display: none;
                visibility: hidden; }
            .im-blog .title > h3 {
                min-height: 34px;
                font-size: 16px; }
            .im-blog .title > a[rel=more] {
                margin: 0;
                position: absolute;
                    bottom: 10px;
                border-radius: 5px;
                padding: 3px 10px; }

    .im-item-package .title .name {
        flex: 0 0 calc(100% - 100px); }
    .im-item-package .title .type {
        padding: 10px 0;
        flex: 0 0 100px; }

    .im-catalogs {
        display: grid;
        grid-template-columns: 1fr 1fr; }
        
    .im-client {
        display: grid;
        grid-template-columns: 1fr 1fr; }
        
    .im-pricing,
    .im-pricing.pri-arm {
        margin-bottom: 40px;
        transform: scale(1, 1); }

    .im-portfolio-list {
        margin-top: 20px; }

    .im-stepOrder {
        grid-template-columns: 1fr; }
        .im-stepOrder .step-item {
            background-color: #fff;
            display: block;
            position: relative;
            border: 1px solid #eee; }
            .im-stepOrder .step-item:nth-child(3)::after,
            .im-stepOrder .step-item:nth-child(6)::after,
            .im-stepOrder .step-item:nth-child(9)::after,
            .im-stepOrder .step-item::after {
                content: '\f0a7';
                width: 100%;
                text-align: center;
                position: absolute;
                    bottom: -70px;
                    top: unset;
                    right: 0;
                    left: 0; }
                .im-stepOrder .step-item:hover::after {
                    color: var(--primary-color); }
                .im-stepOrder .step-item:last-child::after {
                    content: ''; }
            .im-stepOrder .step-item > .heading {
                height: 80px;
                display: block;
                overflow: hidden; }
                .im-stepOrder .step-item .image {
                    padding: 10px;
                    justify-content: left; }
                    .im-stepOrder .step-item .image::before {
                        background-color: #f7f7f7;
                        transform: scale(2, 2);
                        height: 80px;
                        width: 80px;
                        content: ''; }
                    .im-stepOrder .step-item .image > img {
                        height: 60px;
                        width: 60px; }
}