/********** Template CSS **********/
:root {
    --primary: #ff9e17;
    --secondary: #34AD54;
    --light: #EEF9FF;
    --dark: #091E3E;
}

.row {
    margin-left: 0;
    margin-right: 0;
}


/*** Spinner ***/
.spinner {
    width: 40px;
    height: 40px;
    background: var(--primary);
    margin: 100px auto;
    -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
    animation: sk-rotateplane 1.2s infinite ease-in-out;
}

@-webkit-keyframes sk-rotateplane {
    0% {
        -webkit-transform: perspective(120px)
    }
    50% {
        -webkit-transform: perspective(120px) rotateY(180deg)
    }
    100% {
        -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg)
    }
}

@keyframes sk-rotateplane {
    0% {
        transform: perspective(120px) rotateX(0deg) rotateY(0deg);
        -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)
    }
    50% {
        transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
        -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)
    }
    100% {
        transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
        -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    }
}

#spinner {
    opacity: 0;
    visibility: hidden;
    transition: opacity .5s ease-out, visibility 0s linear .5s;
    z-index: 99999;
}

#spinner.show {
    transition: opacity .5s ease-out, visibility 0s linear 0s;
    visibility: visible;
    opacity: 1;
}


/*** Heading ***/
h1,
h2,
.fw-bold {
    font-weight: 800 !important;
}

h3,
h4,
.fw-semi-bold {
    font-weight: 700 !important;
}

h5,
h6,
.fw-medium {
    font-weight: 600 !important;
}


/*** Button ***/
.btn {
    font-family: 'Nunito', sans-serif;
    font-weight: 600;
    transition: .5s;
}

.btn-primary,
.btn-secondary {
    color: #FFFFFF;
    box-shadow: inset 0 0 0 50px transparent;
}

.btn-primary:hover {
    box-shadow: inset 0 0 0 0 var(--primary);
}

.btn-secondary:hover {
    box-shadow: inset 0 0 0 0 var(--secondary);
}

.btn-square {
    width: 36px;
    height: 36px;
}

.btn-sm-square {
    width: 30px;
    height: 30px;
}

.btn-lg-square {
    width: 48px;
    height: 48px;
}

.btn-square,
.btn-sm-square,
.btn-lg-square {
    padding-left: 0;
    padding-right: 0;
    text-align: center;
}


/*** Header ***/
.novi-icon {
    position: absolute;
    z-index: 1;
    width: 15vw;
    top: 7%;
    transform: translate(30%, -50%);
}

.header-top {
    background-color: var(--primary);
}

.novi-icon img {
    width: 100%;
}

.header-caption {
    position: absolute;
    left: 0;
    top: 37%;
    right: 38%;
    transform: translate(50%, 50%);
    z-index: 0;
    color: #fff;
    text-align: center;
}

.header-caption span {
    font-size: 6rem;
    color: var(--primary);
}

@media only screen and (max-width: 767px) {
    .novi-icon {
        width: 25vw;
        transform: translate(12%, -28%);
    }

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

    .header-top .col-8 {
        font-size: 3vw;
        padding-left: 2vw;
    }

    .header-top .col-8 small {
        white-space: nowrap;
    }

    .header-top .col-4 a {
        font-size: 2.5vw;
        width: 6vw;
        height: 6vw;
    }

    .header-top .col-4 .align-items-center {
        margin-right: 2vw;
    }

    .header-top .d-inline-flex {
        height: 40px !important;
    }
}

@media (max-width: 576px) {
    .header-caption h1 {
        font-size: 24px;
        font-weight: 600 !important;
    }
}

/*** Plan ***/
.plan h4 {
    color: var(--dark);
}

.plan .text-light {
    color: #1e2125 !important;
}

.plan .title {
    color: white;
}

.plan .title-post {
    background-color: #a53b3b;
}

.plan .text-light span {
    font-weight: bold;
    margin-right: 5px;
    white-space: nowrap;
}

.plan .plan-item {
    height: inherit;
    background: var(--primary);
}

.accordion-body {
    color: black;
    font-weight: 600 !important;
    font-family: "Nunito",sans-serif;
}

.accordion-button {
    font-weight: bold;
    color: black;
}

.accordion-button:focus {
    box-shadow: none;
}

.accordion-item {
    margin-bottom: 6px;
    border-radius: 8px !important;
}

.accordion-item .accordion-button {
    border-radius: 8px !important;
}

.accordion-item .accordion-body .d-flex span {
    font-weight: bold;
    margin-right: 5px;
}

.accordion-item .accordion-body .fa-circle {
    margin-top: 7px;
    font-size: 0.6rem;
    margin-right: 8px;
}

/*** Section Title ***/
.section-title::before {
    position: absolute;
    content: "";
    width: 150px;
    height: 5px;
    left: 0;
    bottom: 0;
    background: var(--primary);
    border-radius: 2px;
}

.section-title.text-center::before {
    left: 50%;
    margin-left: -75px;
}

.section-title.section-title-sm::before {
    width: 90px;
    height: 3px;
}

.section-title::after {
    position: absolute;
    content: "";
    width: 6px;
    height: 5px;
    bottom: 0px;
    background: #FFFFFF;
    -webkit-animation: section-title-run 5s infinite linear;
    animation: section-title-run 5s infinite linear;
}

.section-title.section-title-sm::after {
    width: 4px;
    height: 3px;
}

.section-title.text-center::after {
    -webkit-animation: section-title-run-center 5s infinite linear;
    animation: section-title-run-center 5s infinite linear;
}

.section-title.section-title-sm::after {
    -webkit-animation: section-title-run-sm 5s infinite linear;
    animation: section-title-run-sm 5s infinite linear;
}

@-webkit-keyframes section-title-run {
    0% {
        left: 0;
    }
    50% {
        left: 145px;
    }
    100% {
        left: 0;
    }
}

@-webkit-keyframes section-title-run-center {
    0% {
        left: 50%;
        margin-left: -75px;
    }
    50% {
        left: 50%;
        margin-left: 45px;
    }
    100% {
        left: 50%;
        margin-left: -75px;
    }
}

@-webkit-keyframes section-title-run-sm {
    0% {
        left: 0;
    }
    50% {
        left: 85px;
    }
    100% {
        left: 0;
    }
}

/*** Service ***/
.service {
    background: var(--primary);
}

.service-item {
    position: relative;
    height: 60px;
    padding: 0 30px;
    transition: .5s;
    background: linear-gradient(288deg, rgb(239 168 124) 39%, rgba(142, 139, 255, 1) 87%);
    color: white;
    border-radius: 10px !important;
    margin-bottom: 1rem;
    margin-top: 2rem;
    box-shadow: 1px 3px 7px #8b8b8b;
    font-weight: bold;
}

.service-item .service-icon {
    margin-bottom: 30px;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(308deg, rgb(255 153 54) 39%, rgb(238 81 255) 61%, rgba(142, 139, 255, 1) 87%);
    border-radius: 2px;
    transform: rotate(-45deg);
}

.service-item .service-icon i {
    transform: rotate(45deg);
}

.service-item a.btn {
    position: absolute;
    width: 60px;
    bottom: -48px;
    left: 50%;
    margin-left: -30px;
    opacity: 0;
    background-color: var(--dark);
    color: white;
}

.service-item:hover a.btn {
    bottom: -24px;
    opacity: 1;
}

.service .section-title::before {
    background: var(--dark);
}

/*** feedback ***/
.feedback-carousel .owl-dots {
    margin-top: 15px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.feedback-carousel .owl-dot {
    position: relative;
    display: inline-block;
    margin: 0 5px;
    width: 15px;
    height: 15px;
    background: #DDDDDD;
    border-radius: 2px;
    transition: .5s;
}

.feedback-carousel .owl-dot.active {
    width: 30px;
    background: var(--primary);
}

.feedback-carousel .owl-item.center {
    position: relative;
    z-index: 1;
}

.feedback-carousel .owl-item .feedback-item {
    transition: .5s;
}

.feedback-carousel .owl-item.center .feedback-item {
    background: #FFFFFF !important;
    /*box-shadow: 0 0 30px #DDDDDD;*/
}

/*** Footer ***/
.footer {
    background-color: var(--primary);
}

.footer .section-title::before {
    background: var(--dark);
}

.back-to-top {
    position: fixed;
    display: none;
    right: 45px;
    bottom: 45px;
    z-index: 99;
}

@media (min-width: 767.98px) {
    .footer-about {
        margin-bottom: -75px;
    }
}

.container-fluid {
    padding: 0;
}

.container-fluid #google_translate_element {
    position: absolute;
    right: 0;
    z-index: 1;
}

.container-fluid .inner-header .image {
    text-align: center;
    position: absolute;
    font-size: 1.4rem;
    color: white;
    transform: translate(-50%, -50%);
    top: 75%;
    width: 28vw;
    left: 72%;
    z-index: 0;
    border-radius: 40%;
    overflow: hidden;
    box-shadow: 1px 0 12px #cdcdcd;
}

.container-fluid .inner-header .image img {
    width: 100%;
    height: 100%;
}

.container-fluid .text {
    position: absolute;
    font-size: 4vw;
}

.container-fluid .text .display-1 {
    font-size: 3vw;
    line-height: 1.5;
}

.container-fluid .text div {
    animation: scale 2.5s infinite;
    background: linear-gradient(288deg, rgba(167, 0, 240, 0.9836309523809523) 7%, rgba(255, 146, 40, 1) 39%, rgb(230 72 247) 67%, rgba(142, 139, 255, 1) 87%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    /*-webkit-text-stroke: 2px black;*/
    font-family: "Rubik", sans-serif;
}

.container-fluid .header {
    position: relative;
    text-align: center;
    overflow: hidden;
    /*color: white;*/
    /*background: linear-gradient(0deg, rgb(170 179 244) 28%, rgb(177 187 251) 72%);*/
    /*background: linear-gradient(5deg, rgba(255,137,0,1) 0%, rgb(249 54 155) 52%, rgb(138 27 179) 75%, rgb(61 114 187) 100%);*/
    /*background: linear-gradient(5deg, rgb(255 137 0) 0%, rgb(249 54 155) 52%, rgb(165 52 207) 75%, rgb(89 143 219) 100%);*/
    /*background: linear-gradient(5deg, rgba(255,137,0,1) 25%, rgba(240,199,151,1) 100%);*/
    background: linear-gradient(5deg, rgb(245 228 208) 25%, rgb(255 255 255) 100%);
}

.container-fluid .header .logo {
    width: 50px;
    fill: white;
    padding-right: 15px;
    display: inline-block;
    vertical-align: middle;
}

.container-fluid .header .inner-header {
    height: 100vh;
    width: 100%;
    margin: -10vh 0 0 0;
    padding: 0;
}

.container-fluid .header .flex {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.container-fluid .header .waves {
    position: relative;
    width: 100%;
    height: 3vh;
    margin-bottom: -7px;
}

.container-fluid .header .waves .parallax > use {
    /*animation: move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;*/
}

.container-fluid .header .waves .parallax > use:nth-child(1) {
    animation-delay: -2s;
    animation-duration: 7s;
}

.container-fluid .header .waves .parallax > use:nth-child(2) {
    animation-delay: -3s;
    animation-duration: 10s;
}

.container-fluid .header .waves .parallax > use:nth-child(3) {
    animation-delay: -4s;
    animation-duration: 13s;
}

.container-fluid .header .waves .parallax > use:nth-child(4) {
    animation-delay: -5s;
    animation-duration: 20s;
}

.container-fluid .content {
    padding-top: 5px;
    position: relative;
    height: calc(20vh - 3.5rem + 6px);
    text-align: center;
    background-color: white;
    font-size: 1.1rem;
}

@keyframes scale {
    0% {
        transform: scale(1)
    }
    50% {
        transform: scale(1.5)
    }
    100% {
        transform: scale(1)
    }
}

/* Animation */
@keyframes move-forever {
    0% {
        transform: translate3d(-90px, 0, 0);
    }
    100% {
        transform: translate3d(85px, 0, 0);
    }
}

@media only screen and (max-width: 767px) {
    /*.container-fluid .text {*/
    /*    position: absolute;*/
    /*    transform: translate(-50%, -50%);*/
    /*    top: 46%;*/
    /*    width: 90%;*/
    /*    left: 50%;*/
    /*}*/
    .container-fluid .header .inner-header {
        margin-top: 0;
    }

    .header-caption {
        top: 42%;
    }

    .container-fluid .text div {
        font-size: 4vw;
    }

    .container-fluid .text .display-1 {
        font-size: 5vw;
        white-space: nowrap;
    }

    .container-fluid .image {
        top: 65%;
        width: 50vw;
        left: 50%;
    }

    .container-fluid .header .inner-header {
        height: fit-content;
    }
}

/*Introduce*/

.introduce .section-title {
    margin-bottom: 1rem;
}

.introduce .top .col-12.first {
    padding-right: 15px !important;
}

.introduce i, .introduce .phone {
    color: var(--primary);
}

.introduce .phone-icon, .blog .blog-icon {
    background: var(--primary);
}

.why  .why-icon {
    background: var(--primary);
}

.why .content-why {
    padding: 1rem;
    height: 150px;
    display: flex;
    align-items: center;
    position: relative;
    font-size: 1.3rem;
    line-height: 1.3;
}

.why .content-why i {
    border-radius: 50%;
    background-color: var(--primary);
    padding: 0.6rem;
    color: white;
    font-size: 1rem;
}

/*.why .left .content-why {*/
/*    padding: 1rem 1rem 1rem 55px;*/
/*}*/

/*.why .right .content-why {*/
/*    padding: 1rem 55px 1rem 1rem;*/
/*}*/

/*.why .content-why:after {*/
/*    content: '';*/
/*    width: 40px;*/
/*    height: 100%;*/
/*    background: var(--primary);*/
/*    position: absolute;*/
/*}*/

/*.why .right .content-why:after {*/
/*    right: 0;*/
/*    border-top-right-radius: 15px;*/
/*    border-bottom-right-radius: 15px;*/
/*}*/

/*.why .left .content-why:after {*/
/*    left: 0;*/
/*    border-top-left-radius: 15px;*/
/*    border-bottom-left-radius: 15px;*/
/*}*/

@media only screen and (max-width: 767px) {
    .introduce .top .col-12.first {
        padding-right: 0 !important;
    }

    .why .content-why {
        height: fit-content;
    }

    .why .left, .why .right {
        padding: 0;
    }

    .why .col-lg-4 img {
        object-fit: cover;
    }
}

/*Feedback*/
.feedback {
    /*background-color: var(--primary);*/
    /*padding-bottom: 6rem !important;*/
}

.feedback .row {
    height: 80vh;
}

.feedback-img {
    height: 100%;
}

.feedback-img img {
    object-fit: contain !important;
}

.feedback .owl-carousel {
    height: 100%;
}

.feedback-container img {
    width: 100%;
}

/*.feedback-container .section-title:before {*/
/*    background: var(--dark);*/
/*}*/

.feedback-background {
    position: relative;
    height: 91%;
    width: fit-content;
    margin: auto;
    top: 5%;
    /*transform: translateY(-50%);*/
}

.feedback-background .feedback-background-img {
    height: 100%;
}

.feedback-background .feedback-background-inner {
    position: absolute;
    height: 86%;
    width: 80%;
    transform: translate(-50%, -50%);
    top: 51%;
    left: 54%;
}

.feedback-carousel {
    position: relative;
}

.feedback-carousel .owl-prev {
    position: absolute;
    left: 0;
    top: 46%;
}

.feedback-carousel .owl-nav i {
    color: var(--primary);
    font-size: 1.5rem;
}

.feedback-carousel .owl-next {
    position: absolute;
    right: 0;
    top: 45%;
}

.feedback .owl-carousel .owl-stage-outer, .feedback .owl-carousel .owl-stage, .feedback .owl-carousel .owl-stage .owl-item,
.feedback .owl-carousel .owl-stage-outer .owl-item .feedback-item, .feedback .feedback-container,
.feedback .owl-carousel .owl-stage-outer .owl-item .feedback-item .align-items-center {
    height: 100%;
}


.feedback .owl-carousel .img-fluid {
    object-fit: contain;
}

@media only screen and (max-width: 767px) {
    .feedback {
        padding-top: 0 !important;
    }

    .feedback-img {
        height: 45vh;
    }

    .feedback-img img {
        margin-left: 3px;
    }

    .feedback .row {
        height: 100%;
        flex-direction: column-reverse;
    }

    .feedback .feedback-container {
        padding-left: 0;
        margin-left: -2px;
    }

    .feedback-background .feedback-background-inner {
        left: 53%;
    }
}

.blog-btn {
    outline: none;
    border: none;
    padding: 1.2vh 2vw;
    border-radius: 30px;
    color: white;
    box-shadow: 1px 1px 8px #959494;
    background: #637295;
    margin: 1rem 0;
}

@media only screen and (max-width: 767px) {
    .blog-btn {
        margin: 1rem 0;
    }

    .wave-container {
        position: absolute;
        bottom: 0px;
        width: 100%;
    }

    .container-fluid .header .waves {
        height: 2vh;
        margin-bottom: -8px;
    }
}

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

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

.blog-item {
    background-color: var(--primary);
    box-shadow: 2px 1px 8px #cbcaca;
}

.mobile-none {
    display: none;
}

.footer .section-title .text-dark {
    margin: 0 auto;
    width: 10vw;
}

.footer .section-title:before {
    width: 154px;
    height: 3px;
    left: 50%;
}

.footer .section-title:after {
    width: 4px;
    height: 3px;
}

@media only screen and (max-width: 767px) {
    .mobile-none {
        display: initial;
    }

    .introduce, .blog {
        padding: 0 !important;
    }

    .introduce .container .row .col-lg-4 {
        min-height: 60vh !important;
    }

    .introduce .container .row .col-lg-4 img {
        object-fit: contain !important;
    }

    .introduce .introduce-image {
        margin: 0;
    }

    .blog .container {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    .footer .section-title .text-dark {
        width: 40vw;
    }
}