/********** Template CSS **********/
:root {
    --cs-green: #8BC34A;
    --cs-light-green: #F1F8E9;
    --cs-purple: #7E57C2;
    --cs-light-purple: #EDE7F6;
    --cs-grey: #78909C;
    --cs-light-grey: #ECEFF1;
    --cs-yellow: #FFC107;
    --cs-light-yellow: #FFFDE7;
}
.navbar-nav {
    flex-wrap: wrap;
}
.navbar-light .navbar-nav .nav-link {
    margin-right: 20px;
    padding: 10px 0;
}
.dropdown-item-header, .dropdown-item-header:hover, .dropdown-item-header:focus {
    background-color: #06BBCC;
    color: #ffffff;
}
.owl-carousel .owl-nav button.owl-next, .owl-carousel .owl-nav button.owl-prev, .owl-carousel button.owl-dot {
    color: #ffffff;
    border: 1px solid #CCCCCC;
}
body {
    /*background-image: linear-gradient(to top, #accbee 0%, #e7f0fd 100%);*/
    /*background-image: linear-gradient(to top, #c1dfc4 0%, #deecdd 100%);*/
    /*background-image: linear-gradient(60deg, #abecd6 0%, #fbed96 100%);*/
    /*background: url(../img/patternbg.webp);*/
    /*background-repeat: repeat;*/
    /*background-size: cover;*/
    background-color: #ffffff;
    /*opacity: 1.0;*/
    background: radial-gradient(circle, transparent 20%, #ffffff 20%, #ffffff 80%, transparent 80%, transparent), radial-gradient(circle, transparent 20%, #ffffff 20%, #ffffff 80%, transparent 80%, transparent) 25px 25px, linear-gradient(#F0FBFC 2px, transparent 2px) 0 -1px, linear-gradient(90deg, #F0FBFC 2px, #ffffff 2px) -1px 0;
    background-size: 50px 50px, 50px 50px, 25px 25px, 25px 25px;
}
.border-green {
    border-color: var(--cs-green) !important;
}
.border-purple {
    border-color: var(--cs-purple) !important;
}
.border-grey {
    border-color: var(--cs-grey) !important;
}
.border-yellow {
    border-color: var(--cs-yellow) !important;
}
/*** Service ***/
.service-item-green {
    background: var(--cs-light-green);
    transition: .5s;
}

.service-item-green:hover {
    margin-top: -10px;
    background: var(--cs-green);
}

.service-item-green * {
    color: var(--cs-green);
    transition: .5s;
}

.service-item-green:hover * {
    color: var(--cs-light-green) !important;
    border-color: var(--cs-light-green) !important;
}

.service-item-purple {
    background: var(--cs-light-purple);
    transition: .5s;
}

.service-item-purple:hover {
    margin-top: -10px;
    background: var(--cs-purple);
}

.service-item-purple * {
    color: var(--cs-purple);
    transition: .5s;
}

.service-item-purple:hover * {
    color: var(--cs-light-purple) !important;
    border-color: var(--cs-light-purple) !important;
}
.service-item-grey {
    background: var(--cs-light-grey);
    transition: .5s;
}

.service-item-grey:hover {
    margin-top: -10px;
    background: var(--cs-grey);
}

.service-item-grey * {
    color: var(--cs-grey);
    transition: .5s;
}

.service-item-grey:hover * {
    color: var(--cs-light-grey) !important;
    border-color: var(--cs-light-grey) !important;
}

.service-item-yellow {
    background: var(--cs-light-yellow);
    transition: .5s;
}

.service-item-yellow:hover {
    margin-top: -10px;
    background: var(--cs-yellow);
}

.service-item-yellow * {
    color: var(--cs-yellow);
    transition: .5s;
}

.service-item-yellow:hover * {
    color: var(--cs-light-yellow) !important;
    border-color: var(--cs-light-yellow) !important;
}
@keyframes customZoom {
    from {
        transform: scale3d(1.5, 1.5, 1.5);
    }    

    to {
        transform: scale3d(1, 1, 1);
    }
}

.customZoom {
    animation-name: customZoom;
    animation-duration: 1.5s;
}
.cu-totd {
    min-height: 200px;
    background-image: linear-gradient(to right, #4776e6, #8e54e9);
}

.cu-about {
    /*height: 200px;*/
    background-image: linear-gradient(to right, #4776e6, #8e54e9);
}
.page-header {
    /*display: none;*/
    background: #2F334B;
    background: radial-gradient(circle,rgba(47, 51, 75, 1) 0%, rgba(24, 29, 56, 1) 70%);   
}
.page-header img {
    height: 100px;
}

.rbi-main-slider {
    width: 100% !important;
    height: auto !important;
    max-height: calc(100vh - 75px) ;
}

/*** Header carousel ***/
@media (max-width: 768px) {
    .header-carousel .owl-carousel-item {
        position: relative;
        min-height: 200px;
    }
}