a.logo img {
    max-height: 50px;
}

a.logo .text {
    margin-left: 16px;
    font-size: 22px;
    color: #fff;
}

@media (min-width: 576px) {
    .container-custom {
        max-width: 80%;
    }
}

@media (min-width: 1200px) {
    .sf-menu a {
        font-size: 16px;
    }
}

@media (max-width: 576px) {
    a.logo img {
        max-height: 40px;
    }
}    


/* form */
label {
    font-size: 16px;
}


/* slider */
@media (min-width: 992px) {
    .page_slider .intro_featured_word {
        font-size: 60px;
    }

    .page_slider .intro_after_featured_word {
        font-size: 24px;
    }
}



/* color */
.color-main2 {
    color: #beff4a !important;
}

.color-main3 {
    color: #21f1d4 !important;
}

.color-main4 {
    color: #ff8138 !important;
}

.color-main5 {
    color: #1580ff !important;
}


/* text */
.text-underline {
    position: relative;
}

.text-underline::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -10px;
    width: 60px;
    height: 2px;
    background-color: #FF9F3E;
}


/* heading */
.section-header .heading {
    font-size: 36px;
    font-weight: 700;
    line-height: 1.5;
}

.item-heading {
    font-size: 24px;
    line-height: 1.5;
}


/* section */
.section {
    padding-top: 60px;
    padding-bottom: 60px;
}


/* search */
.search-box {
    display: flex;
    align-items: center;
    background: #efefef;
}

.search-btn {
    width: 40px;
    height: 40px;
    background: transparent;
}

.search-box:hover > .search-btn {
    background: transparent;
}


/* btn */
.btn {
    font-size: 16px;
    padding: 22px 60px;
}

.button {
    display: inline-block;
    padding: 10px 60px;
    font-size: 16px;
    border-radius: 3px;
    color: #333;
}

.button:hover {
    color: #333;
}

.button-light {
    color: #333;
    background-color: #fff;
}

.button:hover {
    transform: translateY(-5px);
}


/* call to action */
.call-to-action {
    position: relative;
    text-align: center;
    background-color: #453EFF;
    color: #fff;
    padding: 50px 15px;
    font-size: 24px;
}

.call-to-action::before {
    content: "";
    position: absolute;
    top: -25px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 25px 25px 25px;
    border-color: transparent transparent #443eff transparent;
}


/* page breadcrumb */

 .page-breadcrumb {
    margin-top: 30px;
    margin-bottom: 10px;
} 

    .page-breadcrumb ul {
        padding-left: 0;
    }

        .page-breadcrumb li {
            display: inline;
            vertical-align: middle;
        }

            .page-breadcrumb li a {
                font-size: 15px;
            }

            .page-breadcrumb li a:hover {
                color: #000;
            }

            .page-breadcrumb li:last-child svg {
                display: none;
            }


/* teaser-contact-icon */
.teaser-contact-icon .corner.corner-inverse:before, 
.teaser-contact-icon .corner.corner-inverse:after {
    border-left: 50vw solid #f3f3f4;
    border-right: 50vw solid #f4f4f5;
}

.teaser-contact-icon .corner:after {
    border-top: 50px solid #1f2732;
}


/* page */
#canvas {
    overflow: unset;
}

.page .header_absolute .page_header, .page .header_absolute .page_header_wrapper {
    position: relative;
}

.page .header_absolute .page_topline, .page .header_absolute .page_toplogo, .page .header_absolute .page_header_wrapper, .page .header_absolute .page_title {
    background-color: rgb(31 39 50);
}


/* footer */
.footer-logo {
    width: 80px;
}

.page_footer .col-md-12 .widget_social_buttons {
    margin-bottom: 0;
}


.page_footer .media__line {
    position: fixed;
    right: 10px;
    bottom: 70px;
    width: unset;
}


/* filters */
.filters {
    justify-content: center;
}

    .filters a {
        font-size: 15px;
        line-height: 2.5em;
        color: #6c6c6c;
        background-color: #ededed;
        border-radius: 25px;
        margin-left: 5px;
        margin-right: 5px;
        transition: none;
    }

    .filters .active {
        color: #fff;
        background-color: #ffb100;
    }

    .media-links:before {
        background-color: rgb(255 176 0);
    }

    .vertical-item.content-absolute .item-content {
        width: 100%;
        height: 100%;
        bottom: 0;
        padding: 0 !important;
    }

    .vertical-item.content-absolute .item-content .caption {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        height: 100%;
        font-size: 28px;
        padding-left: 15px;
        padding-right: 15px;
    }

    .vertical-item.content-absolute:hover .item-content .caption {
        color: #fff;
        font-weight: 700;
    }

    .vertical-item.content-absolute .item-content .caption > i {
        position: absolute;
        right: 15px;
        bottom: 15px;
        width: 50px;
        line-height: 50px;
        background-color: rgb(255 255 255 / 95%);
        color: #333;
        border-radius: 50%;
        font-size: 18px;
    }


    .item-gallery .item-content .caption {
        opacity: 0;
        -webkit-transform: scale(0);
        -ms-transform: scale(0);
        transform: scale(0);
        -webkit-transition: all 0.15s ease-in-out;
        transition: all 0.15s ease-in-out;
        z-index: 5;
    }

    .item-gallery:hover .item-content .caption {
        opacity: 1;
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
    }

    

.h-100 {
    height: 100%;
}



/* project */
.project-display img {
    margin-bottom: 40px;
    box-shadow: 0 2px 30px 0 rgb(0 0 0 / 20%);
}

.project-info-sticky {
    position: sticky;
    top: 110px;
}

.project-gallery .item-gallery:hover h6 {
    color: #333;
}



/* Image box */
 .image-box {
    position: relative;
    display: flex !important;
}

    .image-box-outer {
        width: 100%;
        padding-bottom: 100%;
        position: relative;
        overflow: hidden;
        margin: 0;
        line-height: 0;
    }

    .image-box-outer.vertical {
        padding-bottom: 110%;
    }

    .image-box-outer.ratio-3-2 {
        padding-bottom: 66.66%;
    }

    .image-box-outer.ratio-16-9 {
        padding-bottom: 56.25%;
    }

        .image-box-inner {
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            background: #f1f1f1;
        }

            .image-box-inner img {
                width: 100%;
                height: 100%;
                object-position: 50% 50%;
                object-fit: cover;
            }


/* image card */
.image-card {
    position: relative;
}

.image-card__caption {
    position: absolute;
    top: 50%;
    left: 8%;
    transform: translateY(-50%);
    color: #fff;
}

.image-card__heading {
    color: #fff !important;
    font-size: 40px;
}

.image-card__text {
    width: 60%;
    font-size: 18px;
    line-height: 1.5em;
}

@media(max-width: 991px) {
    .image-card__heading {
        font-size: 24px;
        margin-bottom: 0;
    }
    
    .image-card__text {
        font-size: 13px;
        width: 50%;
    }
}


/* page banner */
.page-banner {
    height: 570px;
}

.page-banner__content {
    display: flex;
    flex-direction: column;
    color: #fff;
}

    .page-banner__content .text-block {
        display: flex;
        flex-direction: column;
        height: 85%;
        padding: 100px 20px 40px 20px;
    }

        .page-banner__content .text-block .label {
            font-size: 24px;
            margin-bottom: 5px;
        }

        .page-banner__content .text-block .heading {
            font-size: 52px;
            font-weight: 700;
        }

        .page-banner__content .text-block p {
            margin-top: auto;
            font-size: 18px;
        }

    .page-banner__content .button-block {
        display: flex;
        height: 15%;
        background-color: #ffffff;
    }

        .page-banner__content .button-block a {
            display: flex;
            justify-content: center;
            align-items: center;
            flex: 1;
            padding: 20px;
        }

        .page-banner__content .button-block a:hover {
            opacity: 0.85;
        }

            .page-banner__content .button-block img {
                width: 50px;
                margin-left: 30px;
            }

            .page-banner__content .button-block a:not(.highlight) {
                color: #333;
                border-bottom: 1px solid #ddd;
            }

@media(min-width:769px) {
    .page-banner__content {
        width: 500px;
        margin-left: 10%;
    }

    .page-banner__content .text-block {
        padding: 100px 50px 40px 50px;
    }

    .page-banner__content .button-block img {
        width: 60px;
        margin-left: 40px;
    }

    .page-banner__content .text-block p {
        width: 80%;
    }

}


/* service */
.page-service .primary-bg {
    background-color: rgba(251, 138, 24, 0.9);;
}

.page-service .secondary-bg {
    color: #fff;
    background-color: #453EFF;
}

.page-service .call-to-action::before {
    border-color: transparent transparent #453EFF transparent;
}

.page-service .text-underline::after {
    background-color: #FF9F3E;
}


.page-service.brand-design .primary-bg {
    color: #fff;
    background-color: rgba(255, 62, 158, 0.9);
}

.page-service.brand-design .secondary-bg {
    color: #fff;
    background-color: #3ED1FF;
}

.page-service.brand-design .call-to-action::before {
    border-color: transparent transparent #3ED1FF transparent;
}

.page-service.brand-design .text-underline::after {
    background-color: rgba(255, 62, 158, 0.9);
}


.page-service.seo .primary-bg {
    color: #fff;
    background-color: rgba(178, 62, 255, 0.9);
}

.page-service.seo .secondary-bg {
    color: #fff;
    background-color: #FF3385;
}

.page-service.seo .call-to-action::before {
    border-color: transparent transparent #FF3385 transparent;
}

.page-service.seo .text-underline::after {
    background-color: rgba(178, 62, 255, 0.9);
}


.page-service.cloud-hosting .primary-bg {
    color: #fff;
    background-color: rgba(0, 218, 242, 0.9);
}

.page-service.cloud-hosting .secondary-bg {
    color: #fff;
    background-color: #3E51FF;
}

.page-service.cloud-hosting .call-to-action::before {
    border-color: transparent transparent #3E51FF transparent;
}

.page-service.cloud-hosting .text-underline::after {
    background-color: rgba(0, 218, 242, 0.9);
}


.page-service.cloud-strategy .primary-bg {
    color: #fff;
    background-color: rgba(68, 62, 255, 0.9);
}

.page-service.cloud-strategy .secondary-bg {
    color: #fff;
    background-color: #FF9F3E;
}

.page-service.cloud-strategy .call-to-action::before {
    border-color: transparent transparent #FF9F3E transparent;
}

.page-service.cloud-strategy .text-underline::after {
    background-color: rgba(68, 62, 255, 0.9);
}

.wd {
    color: #fff;
    background-color: rgba(251, 138, 24, 0.9);
}

.button.wd:hover {
    color: #fff;
    background-color: #fb8a18;
}


/* media */
.media__line {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 170px;
    padding: 0px 15px 0px 5px;
    border-radius: 50px;
    color: #fff;
    border: 3px solid #91d791;
    background-color: #00b900;
    box-shadow: 0 3px 20px 5px rgb(36 157 57 / 20%);
}

.media__line:hover {
    color: #fff !important;
    opacity: 0.8 !important;
}

    .media__line img {
        width: 50px;
        margin-right: -1px;
    }




/* pricing */
.pricing-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-left: -20px;
    margin-right: -20px;
}

.pricing-card {
    border: 1px solid #D4D4D4;
    border-radius: 25px;
    padding: 40px;
    margin: 20px;
    width: 320px;
}

    .pricing-card__icon {
        display: flex;
        justify-content: center;
        align-items: center;
        color: #1580FF;
        background-color: #e8f2ff;
        width: 72px;
        height: 72px;
        border-radius: 50%;
        margin: 5px auto;
        font-size: 32px;
        overflow: hidden;
    }

    .pricing-card__title {
        text-align: center;
        font-size: 18px;
        margin-top: 10px;
    }

    .pricing-card__price {
        font-size: 36px;
        text-align: center;
        font-weight: 700;
        margin-top: 20px;
        margin-bottom: 20px;
        color: #212121;
    }

        .pricing-card__price .unit {
            font-size: 16px;
            font-weight: 400;
        }

    .pricing-card__info li {
        list-style: none;
    }

    .pricing-card__info li::before {
        content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16.243' height='11.871' viewBox='0 0 16.243 11.871'%3E%3Cpath id='Icon_feather-check' data-name='Icon feather-check' d='M18,9,9.75,17.25,6,13.5' transform='translate(-3.879 -6.879)' fill='none' stroke='%235ae7ff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3'/%3E%3C/svg%3E%0A");
        margin-right: 5px;
    }

    .pricing-card__button {
        display: block;
        border-radius: 25px;
        text-align: center;
        color: #fff;
        background: hsla(217, 100%, 50%, 1);
        background: linear-gradient(45deg, hsla(217, 100%, 50%, 1) 0%, hsla(186, 100%, 69%, 1) 100%);
        background: -moz-linear-gradient(45deg, hsla(217, 100%, 50%, 1) 0%, hsla(186, 100%, 69%, 1) 100%);
        background: -webkit-linear-gradient(45deg, hsla(217, 100%, 50%, 1) 0%, hsla(186, 100%, 69%, 1) 100%);
        border: none;
        font-size: 18px;
        padding: 12px 40px;
        letter-spacing: 0;
        transition: 0.3s;
    }

    .pricing-card__button:hover {
        transform: translateY(-5px);
        color: #fff;
        box-shadow: 0 3px 10px rgb(71 201 255 / 70%);
    }

    /* .pricing-card:hover {
        background: hsla(217, 100%, 50%, 1);
        background: linear-gradient(45deg, hsla(217, 100%, 50%, 1) 0%, hsla(186, 100%, 69%, 1) 100%);
        background: -moz-linear-gradient(45deg, hsla(217, 100%, 50%, 1) 0%, hsla(186, 100%, 69%, 1) 100%);
        background: -webkit-linear-gradient(45deg, hsla(217, 100%, 50%, 1) 0%, hsla(186, 100%, 69%, 1) 100%);
    } */

@media(min-width: 767px) and (max-width: 991px) {
    .pricing-card {
        width: calc(50% - 40px);
    }
}

@media(max-width: 767px) {
    .pricing-card {
        margin-left: auto;
        margin-right: auto;
    }
}


.pricing-card:hover .icon {
    animation: flyaway 0.5s ease-in-out forwards;
}

@keyframes flyaway {
    0% {
        transform: translate(0,0);
    }
    20% {
        transform: translate(60px,-60px);
    }
    40% {
        transform: translate(60px,60px);
    }
    60% {
        transform: translate(-60px,60px);
    }
    100% {
        transform: translate(0,0);
    }
}


/**
 *  Tabs
 */

 .tab-nav {
    display: flex;
    width: 300px;
    margin-left: auto;
    margin-right: auto;
    border-radius: 25px;
    background-color: #fff;
    box-shadow: 0 3px 10px rgba(0,0,0,0.2);
}

    .tab-nav a {
        position: relative;
        display: block;
        padding: 8px 20px;
        margin: 5px;
        border-radius: 25px;
        text-align: center;
        flex: 1;
    }

    .tab-nav a:hover {
        color: #333;
        background-color: #cde3ff;
    }

    .tab-nav a.active {
        color: #ffffff;
        background-color: #1580ff;
    }


.tab-wrapper [data-tab-content] {
    display: none;
}

.tab-wrapper [data-tab-content].active {
    display: block;
}


/* table */
.pricing-table {
    color: #333;
}

.pricing-table-thead {
    text-align: center;
    background-color: #fff;
    font-size: 20px;
    font-weight: 700;
    z-index: 9;
}

.pricing-table-thead.sticky {
    position: sticky;
    top: 84px;
}

    .pricing-table th {
        position: relative;
        font-weight: 700;
        font-size: 20px;
        text-align: center;
    }

    .pricing-table th::after {
        content: "";
        position: absolute;
        top: 45px;
        left: 50%;
        transform: translateX(-50%);
        width: 72px;
        height: 3px;
        border-radius: 25px;
        background-color: #1580FF;
    }

    .pricing-table td {
        vertical-align: middle;
        text-align: center;
        padding-left: 15px;
        padding-right: 15px;
        width: 33.333333%;
        border: 1px solid #b4c5d5;
    }

    .pricing-table .pricing-card__button {
        margin: 15px 45px;
    }


.pricing-table.table-striped tbody tr:nth-of-type(odd) {
    background-color: #e2effb;
}

.pricing-table.table-striped tbody tr:nth-of-type(even) {
    background-color: #fbfbfb;
}

.pricing-table tr.optional {
    background-color: #f0f8ff !important;
}

.modal-message .btn-close {
    position: absolute;
    right: 8px;
    top: 8px;
    border: none;
    padding: 10px;
    background-color: transparent;
    z-index: 999;
    opacity: 1;
}

.modal-message .modal-content {
    border-radius: 8px;
    overflow: hidden;
    border: none;
}

.modal-message .modal-body {
    position: relative;
    color: #fff;
    background-color: #0055DC;
    padding: 40px 60px;
}

.modal-message .modal-body::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    background: url('../images/pricing/modal-message-bg.png');
    width: 100%;
    height: 100%;
}

    .modal-message .message-content {
        font-size: 28px;
        font-weight: 700;
        letter-spacing: 1px;
    }

    .modal-message .message-title {
        text-align: center;
        font-weight: 900;
        font-size: 48px;
        letter-spacing: 2px;
    }

        .modal-message .message-title .highlight {
            color: #54FFE8;
        }

        .modal-message .text-muted {
            font-size: 0.7em;
            font-weight: 400;
            opacity: 0.5;
            color: #fff !important;
        }

.modal-message .modal-footer {
    background-color: #E9F2FF;
    color: #0055DC;
    font-weight: 700;
    font-size: 24px;
    padding-top: 25px;
    padding-bottom: 25px;
}

.modal-backdrop.show {
    background-color: #2c2c2c;
    opacity: 0.6;
}

.modal-message .message-content li .highlight {
    position: relative;
    z-index: 1;
}

.modal-message .message-content li .highlight::before {
    content: '';
    position: absolute;
    bottom: 4px;
    left: -1%;
    width: 102%;
    height: 12px;
    background-color: #1FB3D9;
    border-radius: 3px;
    z-index: -1;
}



@media(max-width:991px) {
    .pricing-table .pricing-card__button {
        margin: 15px 0;
        font-size: 14px;
        padding: 12px 20px;
    }
}


.win {
    display: inline-block;
    color: #ff5050;
    border: 1px solid #ff5050;
    width: 32px;
    line-height: 32px;
    height: 32px;
    border-radius: 50%;
    transform: rotate(10deg);
    font-weight: 700;
    font-size: 20px;
}

.crown-wrapper {
    position: relative;
    display: table;
    margin-left: auto;
    margin-right: auto;
}

    .crown {
        position: absolute;
        top: -25px;
        right: -24px;
        color: #ffb100;
        font-size: 24px;
        transform: rotate(20deg);
    }

@media(max-width:576px) {
    .pricing-table th {
        font-size: 15px;
    }

    .pricing-table th::after {
        top: 38px;
    }

    .pricing-table td {
        font-size: 12px;
    }

    .pricing-table-thead.sticky {
        top: 60px;
    }
}


/* block expand */
.block-expand {
    position: relative;
    margin-top: 80px;
    margin-bottom: 80px;
    width: 100%;
    height: 1px;
    background-color: #ddd;
}

    .block-expand__arrow {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        width: 80px;
        height: 80px;
        border-radius: 50%;
        border: 1px solid #ddd;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #fff;
        font-size: 20px;
        color: #a9a9a9;
        transition: 0.3s;
    }

    .block-expand__arrow:hover {
        border-color: #1580FF;
        color: #1580FF;
    }




/* collapse */
.collapse__content {
    display: none;
}

.collapse__button {
    cursor: pointer;
}

    .collapse__button i {
        transition: 0.3s;
    }

.collapse__button.active i {
    transform: rotate(180deg);
}


/* embed */
@media(min-width: 992px) {
    .embed-responsive {
        height: 100vh;
    }
    
    .embed-responsive video {
        object-fit: cover;
        width: 100%;
        height: 100%;
    }
    
}


/* side menu */
.side-menu {
    width: 100%;
}

    .side-menu ul {
        padding-left: 0;
        list-style: none;
    }

    .side-menu > ul {
        margin-top: 0;
        background: #f4f4f5;
        padding: 5px 20px;
    }

        .side-menu a {
            display: block;
            padding: 10px 0;
            font-size: 15px;
            color: #333;
            border-bottom: 1px solid #ddd;
        }

        .side-menu a.active {
            color: #ffb100 !important;
        }

        .side-menu a > span {
            display: block;
            transition: 0.3s;
        }

        .side-menu a:hover span {
            transform: translateX(10px);
        }

        .side-menu ul > li:last-child > a {
            border-bottom: 0;
        }

        .side-menu .layer-1 > a:hover {
            color: #000;
        }
       

        .aside-label {
            color: #8D8D8D;
            font-size: 16px;
            margin-bottom: 5px;
        }

        .side-menu .collapse__button {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .side-menu .collapse__button ~ .collapse__content a {
            padding-left: 24px;
        }

            .side-menu a > svg {
                display: none;
            }

            .side-menu .collapse__button > svg {
                display: inline-block;
            }

@media(min-width: 991px) {  
    .side-menu {
        max-width: 230px;
    }
}

@media (max-width: 991px) {
    aside {
        margin: 60px auto;
        max-width: unset;
    }
}