OwlCyberSecurity - MANAGER

Edit File: custom.less

@bodyFont: 'Montserrat', sans-serif;
@titleFont: 'Montserrat', sans-serif;
@transition: all 0.3s ease 0s;
@primaryColor: #191821;
@secondaryColor: #CE1446;
@thirdColor: #BA1266;
@whiteColor: #ffffff;
@titleColor: #0a0a0a;
@menuColor: #000;
@btnColor: #ce1446;
@linkColor: #CE1446;
@hoverColor: #CE1446;
@globalColor: #444;
@bodyColor: #454545;
@formBg: #fc4073;
@lightColor: #969696;
@btnBgColor: #ce1446;
@btnHoverColor: #fff;

.animate-me{
    transition: all 500ms ease;
}

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

.cta-widget{
    background-image: linear-gradient(50deg, @secondaryColor 10%, @thirdColor 100%);
    padding: 70px 0;
    .title-cta{
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        h2{
            color: @whiteColor;
            margin: 0;
            max-width: 800px;
            line-height: 45px;
        }
        a.cta-button{
            color: @whiteColor;
            background-image: linear-gradient(50deg, @secondaryColor 10%, @thirdColor 100%);
            border-radius: 30px;
            padding: 14px 40px 14px 40px;
            transition: all .5s ease;
            font-weight: 600;
            margin-top: 20px;
            margin-bottom: 20px;
            &:hover{
                background-image: linear-gradient(90deg, #BA1266 10%, #CE1446 100%);
            }
        }
    }
}

#rs-header .menu-area .navbar ul li.sub-rights .sub-menu li ul {
    left: 100% !important;
    top: 0 !important;
}

.bs-sidebar.dynamic-sidebar{
    .service-singles{
        list-style: none;
        padding: 0;
        box-shadow: none;
        .widget-title{
            padding: 0;
            &:after{
                display:none;
            }
        }
        .menu{
            li{
                border: none !important;
                margin-top: 0 !important;
                a{
					display: block;
					border: 2px solid #e8e8e8;
					padding: 16px 18px;
					transition: all .5s ease;
					border-radius: 5px;
					position: relative;
					font-size: 16px;
					font-weight: 700;
                    &:before{
                        content:"\f113";
                        position: absolute;
                        right: 12px;
                        top: 16px;
                        font-family: Flaticon;
                        color: @primaryColor;
                    }
                    &:hover{
                        background-image: linear-gradient(250deg, @secondaryColor 19%, @thirdColor 100%);
                        color: @whiteColor;
                        border-radius: 5px;
                        border-color: @secondaryColor;
                        &:before{
                         	color: @whiteColor;
                        }
                    }
                }
                &.current-menu-item{
                    a{
                        background-image: linear-gradient(250deg, @secondaryColor 19%, @thirdColor 100%);
                        color: @whiteColor;
                        &:before{
                            color: @whiteColor;
                        }
                    }
                }
                ul.sub-menu{
                    margin: 0;
                    li{
                        a{
                            display: block;
                            border: 2px solid #d3e1fb;
                            padding: 16px 18px;
                            transition: all .5s ease;
                            border-radius: 5px;
                            position: relative;
                            font-size: 16px;
                            font-weight: 700;
                            &:before{
                                content:"\f113";
                                position: absolute;
                                right: 12px;
                                top: 16px;
                                font-family: Flaticon;
                                color: @primaryColor;
                                display: block !important;
                            }
                            &:hover{
                                background:@secondaryColor;
                                color: @whiteColor;
                                border-radius: 5px;
                                border-color: @secondaryColor;
                                &:before{
                                    color: @whiteColor;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    .phones{
        .address-icon:before{
            opacity: .2 !important;
            visibility: visible !important;
        }
    }
}

.btm-cate li a:hover, .bs-sidebar ul a:hover{
    color: @secondaryColor;
}

.rs-footer .recent-post-widget .show-featured .post-desc i{
    color: @secondaryColor;
}

.team-grid-style6 .team-item .image-wrap img{
	-webkit-transform: scale(1);
	transform: scale(1);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}

.team-grid-style6 .team-item .image-wrap{
	overflow: hidden;
}

.team-grid-style6 .team-item:hover .image-wrap img{
	-webkit-transform: scale(1.2);
	transform: scale(1.2);
}

.rs-team-grid.team-grid-style1 .team-item img{
	-webkit-transform: scale(1.1);
	transform: scale(1.1);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}

.rs-team-grid.team-grid-style1 .team-item:hover img{
	-webkit-transform: scale(1);
	transform: scale(1);
}

.rs-team-grid.team-grid-style1 .team-item{
	overflow: hidden;
}

.rstbd{
    display: flex;
    justify-content: space-between;
    .tab-image{
        flex: 0 0 50%;
        img{
            padding-right:50px;
        }
    }
    .tab-contents{
        a.button{
            background:@secondaryColor;
            color: #fff;
            padding: 12px 32px 12px 32px;
            border-radius: 5px;
            transition: @transition;
            display: inline-block;
            &:hover{
                opacity: .8;
            }
        }
    }
}

.rs-portfolio-style1{
    .portfolio-item{
        .portfolio-img{
            i{
                width: 50px;
                height: 50px;
                background: red;
                text-align: center;
                line-height: 50px;
                border-radius: 50px;
                color: #ffffff;
                background: @secondaryColor;
                font-size: 24px;
                position: absolute;
                right: 30px;
                top: 30px; 
                opacity: 0;
                visibility: hidden;   
                transition: 0.4s;    
            }
        }
        &:hover{
            .portfolio-img{
                i{
                    opacity: 1;
                    visibility: visible;
                }
            }
        }
    }
}
.rs-portfolio-style7{
    .portfolio-item{
        position: relative;
        overflow: hidden;
        .portfolio-content{
            position: absolute;
            width: 100%;
            bottom: -105%;
            left: 40px;
            transition: 0.4s;
        }
    }
    .content-overlay{
        position: relative;
        .p-title{
            margin-bottom: 5px;
        }
        i{
            width: 50px;
            height: 50px;
            background: red;
            text-align: center;
            line-height: 50px;
            border-radius: 50px;
            color: #ffffff;
            background: @secondaryColor;
            font-size: 24px;
        }
        &:before{
            content: "";
            position: absolute;
            bottom: -105%;
            left: 0;
            width: 100%;
            height: 100%;
            background: #1273eb;
            transition: 0.4s;
        }
        &:hover{
            .portfolio-content{
                bottom: 40px;
            }
            &:before{
                bottom: 0;
                visibility: visible;
            }
        }
    }
}

.rstab-main{
    ul.nav{             
        margin: 0;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        &.bubble{
            li{
                a.active{
                    position: relative;
                    &:after{
                        top: 100%;
                        left: 15%;
                        border: solid transparent;
                        content: " ";
                        height: 0;
                        width: 0;
                        position: absolute;
                        pointer-events: none;
                        border-color: rgba(136, 183, 213, 0);
                        border-top-color: @primaryColor;
                        border-width: 12px;
                        margin-left: -30px;
                    }
                }
                
            }
        }
        li{ 
            margin-right: 20px;            
            a{ 
                background: #f1f1f1;
                padding: 10px;
                display: flex;
                align-items: center;
                justify-content: center;
                position: relative;
                top: 1px;               
                &.active{
                    background:@primaryColor;
                    color: #fff;                    
                }
                img.center{
                    margin: 0 auto 12px;
                }
                img.right{
                    margin: 0 0 12px auto;
                }
            }
            &:first-child{
                margin-left: 0 !important;
            }
            &:last-child{
                margin-right: 0 !important;
            }
            a:hover{
                background:@primaryColor;
            }
        }
        &.icon_top{
            li{
                a,
                a img,
                a i,{
                    display: block;
                }
            }
        }
    }
    .tab-content{
        background: #fff;
        padding: 10px;
        overflow: hidden;
        box-shadow: 0 0 20px #eee;
        p{
            &:last-child{
                margin: 0;
            }
        }
    }

&.vertical{
        display: flex;
        ul.nav{
            margin: 0 20px 0 0;
            display: block;
            &.bubble{
                li{
                    a.active{
                        position: relative;
                        &:after{
                            top: 100%;
                            left: auto;
                            right: -24px;
                            border: solid transparent;
                            content: " ";
                            height: 0;
                            width: 0;
                            position: absolute;
                            pointer-events: none;
                            border-color: rgba(136, 183, 213, 0);
                            border-left-color: @primaryColor;
                            border-width: 12px;
                            margin-left: -30px;
                        }
                    }
                }
            }
        }
    }
    .tab-pane.active {
        animation: slide-down 2s ease-out;
    }
    &.no_item_menu{
        ul{
            display: -webkit-inline-box;
            display: -ms-inline-flexbox;
            display: inline-flex;
        }
        &.left{
            text-align: left;
        }
        &.center{
            text-align: center;
        }
        &.right{
            text-align: right;
        }
    }

@keyframes slide-down {
        0% { opacity: 0; transform: translateY(50%); }
        50% { opacity: 1; transform: translateY(0); }
    }
}

.rs-heading{
    &.style14{
        .heading-line{
            height: 5px;
            width: 90px;
            background: @secondaryColor;
            margin: 0px;
            position: relative;
            border-radius: 30px;
            &:before{
                content: '';
                position: absolute;
                left: 0;
                top: -2.7px;
                height: 10px;
                width: 10px;
                border-radius: 50%;
                background: @primaryColor;
                -webkit-animation-duration: 3s;
                animation-duration: 3s;
                -webkit-animation-timing-function: linear;
                animation-timing-function: linear;
                -webkit-animation-iteration-count: infinite;
                animation-iteration-count: infinite;
                -webkit-animation-name: MOVE-Rs-Dot;
                animation-name: MOVE-Rs-Dot;
            }
        }
        &.center{
            .heading-line{
                margin: 20px auto;
            }
        }
        &.right{
            .heading-line{
                margin-left: auto;
                margin-right: 0;
            }
        }
    }
    &.style15{
        .title-inner{
            .sub-text{
                background:@secondaryColor;
                display: inline-block;
                padding: 6px 25px;
                color: @whiteColor;
                border-radius:30px;
            }
        }
    }
    &.style16{
        .title-inner{
            .sub-text{
                position: relative;
                padding-left: 95px;
                display: inline-block;
                &:before{
                    content: '';
                    position: absolute;
                    left: 0;
                    top: 12px;
                    height: 4px;
                    width: 76px;
                    background: @secondaryColor;
                } 
                &:after{
                    content: '';
                    position: absolute;
                    left: 15px;
                    top: 11px;
                    height: 6px;
                    width: 12px;
                    background: @whiteColor;
                }
            }
        }
    }
}

@-webkit-keyframes MOVE-Rs-Dot{
    from {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
    to {
        -webkit-transform: translateX(88px);
        transform: translateX(88px)
    }
}

@keyframes MOVE-Rs-Dot{
    from {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
    to {
        -webkit-transform: translateX(88px);
        transform: translateX(88px)
    }
}

.rs-grid-figure a img.hovers-logos{
    display: none;
}

.rsaddon-unique-slider .rs-addon-slider .slick-list {
    padding-top: 0;
}

.rs-contact-box .address-item .address-icon::before{
    opacity: 1;
    visibility: visible;
}

.rs-portfolio-style4 .rs-portfolio4 .portfolio-item .portfolio-inner .p-category {
    font-weight: 500;
}

.rs-addon-services{
    .hover-img{
        transform: scale(0);
    }
    &.services-style8{
        .services-icon{
            position:relative;
            transition: all .3s ease;
            margin-left: 0;
            &.image-hover{
                .hover-img{
                    position:absolute;
                    left: 5px;
                    top: 9px;
                    visibility: hidden;
                    opacity: 0;
                    transform: scale(0);
                    transition: all .3s ease;
                }
                .main-img{
                    transition: all .3s ease;
                }
            }            
        }
        .services-text{
            .services-titles{
                .title{
                    transition: 0.4s;
                    font-size: 20px;
                    line-height: 30px;
                    font-weight: 600;
                    margin: 0 0 12px;
                    color: @titleColor;
                    a{
                        color: @titleColor;
                    }
                }
            }
        }
        .services-part {
            &.image-align-left {
                display: flex;
                .services-icon {
                    margin: 0;
                    img {
                        width: unset;
                        height: unset;
                    }
                }
            }
        }
    }
}

.elementor-widget-rs-service-grid:hover{
    .rs-addon-services{    
        &.services-style8{
            .services-icon{
                &.image-hover{
                    .hover-img{
                        visibility: visible;
                        opacity: 1;
                        transform: scale(1);
                    }
                    .main-img{
                        transform: scale(0);
                    }
                }
            }
            .services-text{
                .services-titles{
                    .title{
                        color: @whiteColor;
                        a{
                            color: @whiteColor;
                        }
                    }
                }
            }
        }
    }
}

.rsl_style2{
    .grid-item{
        .rs-grid-figure{
            .logo-img{
                a{
                    overflow: hidden;
                    display: inline-block; 
                    position:relative; 
                    img{
                        -webkit-transition: 0.3s;
                        -o-transition: 0.3s;
                        -moz-transition: 0.3s;
                        transition: 0.3s;
                        filter: grayscale(100%);
                    }
                    img.hovers-logos{
                        display: block;
                        position: absolute;
                        z-index: 1;
                        top: 0;
                        left: 0;
                        visibility: hidden;                            
                        -webkit-transform: translateY(-100%);
                        -moz-transform: translateY(-100%);
                        -ms-transform: translateY(-100%);
                        -o-transform: translateY(-100%);                      
                    }                                          
                }                
            }
            &:hover{
                .logo-img{
                    a{          
                        img.mains-logos{
                            display: block;
                            visibility: hidden;                            
                            -webkit-transform: translateY(100%);
                            -moz-transform: translateY(100%);
                            -ms-transform: translateY(100%);
                            -o-transform: translateY(100%);
                            transform: translateY(100%);                        
                        }               
                        img.hovers-logos{ 
                            display: block;                          
                            opacity: 3;
                            visibility: visible;
                            -webkit-transform: translateY(0%);
                            -moz-transform: translateY(0%);
                            -ms-transform: translateY(0%);
                            -o-transform: translateY(0%);
                            transform: translateY(0%);
                            filter: grayscale(0%);                            
                        }                        
                    }
                }
            }
        }
    }
}

.elementor-widget.elementor-widget-rs-rain-animates{
    position: static;
    margin: 0px !important;
}

.rs-hours{
    .flaticon-location{
        position: relative;
        top: -2px;
    }
}
.sticky_form .search-input{
    border-radius:0px !important;
    &::-webkit-input-placeholder { /* Chrome/Opera/Safari */
      color: #fff;
      opacity: 1;
    }
    &::-moz-placeholder { /* Firefox 19+ */
      color: #fff;
      opacity: 1;
    }
    &:-ms-input-placeholder { /* IE 10+ */
      color: #fff;
      opacity: 1;
    }
    &:-moz-placeholder { /* Firefox 18- */
      color: #fff;
      opacity: 1;
    }
}

.rs-rain-animate{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    margin: auto;
    width: ~"calc(100%)";
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
    .line{
        position: absolute;
        width: 1px;
        height: 100%;
        top: 0;
        left: ~"calc(50%)";
        background: #F6F7F9;
        z-index: 1;
        &:after {
            content: "";
            display: block;
            position: absolute;
            height: 80px;
            width: 3px;
            top: -20%;
            left: -1px;
            background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 39%, @secondaryColor 130%, @secondaryColor 59%);
            -webkit-animation: rain-line 13s 0s linear infinite;
            animation: rain-line 13s 0s linear infinite;
        }
        &:nth-child(1) {
            left: 2px !important;
            &:after {
                -webkit-animation-delay: 2s;
                animation-delay: 2s;
            }
        }
        &:nth-child(3) {
            left: unset !important;
            right: 2px;
            &:after {
                -webkit-animation-delay: 2.5s;
                animation-delay: 2.5s;
            }
        }
    }
}

/* Rain Line Animation */
@keyframes rain-line {
    0% {
        top: -20%;
    }
    100% {
        top: 100%;
    }
}
@-webkit-keyframes rain-line {
    0% {
        top: -20%;
    }
    100% {
        top: 100%;
    }
}

.rs-addon-services{
    position:relative;
    .serial_number.enable_position{
        position:absolute;
    }
}

.rs-video{
    &.style2{
        .rs-icon-inners{
            .animate-border{
                .popup-border{
                    background: @secondaryColor;
                    width: 80px;
                    height: 80px;
                    line-height: 80px;
                    text-align: center;
                    display: inline-block;
                    border-radius: 50%;
                    position: absolute;
                    i{
                        color: @whiteColor;
                    }
                    &:before{
                        content: "";
                        border: 2px solid @secondaryColor;
                        position: absolute;
                        z-index: 0;
                        left: 50%;
                        top: 50%;
                        transform: translateX(-50%) translateY(-50%);
                        display: block;
                        width: 180px;
                        height: 180px;
                        border-radius: 50%;
                        animation: zoomBig 3.25s linear infinite;  
                        -webkit-animation-delay: .75s;
                        animation-delay: .75s;                      
                    }
                    &:after{
                        content: "";
                        border: 2px solid @secondaryColor;
                        position: absolute;
                        z-index: 0;
                        left: 50%;
                        top: 50%;
                        transform: translateX(-50%) translateY(-50%);
                        display: block;
                        width: 180px;
                        height: 180px;
                        border-radius: 50%;
                        animation: zoomBig 3.25s linear infinite; 
                        -webkit-animation-delay: 0s;
                        animation-delay: 0s;                       
                    }
                }
            }
        }
    }
}

@keyframes zoomBig {
  0% {
    transform: translate(-50%, -50%) scale(0.5);
    opacity: 1;
    border-width: 3px;
  }
  40% {
    opacity: .5;
    border-width: 2px;
  }
  65% {
    border-width: 1px;
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0;
    border-width: 1px;
  }
}

.rs-addon-accordion{
    .elementor-accordion-icon{        
        &.elementor-accordion-icon-left{
            float: left;
            width: 20px;
            text-align: left; 
        }
        &.elementor-accordion-icon-right{
            float: right;
            width: 20px;
            text-align: right; 
        }
    }
    .accordion-desc{
        clear: both;
        padding:25px;
        background:#f9f9f9;
        p{
            display: block;
        }
    }
    .ui-accordion-header{
        font-size: 20px;
        padding: 8px 25px;
        box-shadow: 0 0 10px #efefef;
        margin: 30px 0 0;
        cursor: pointer;
        outline: none;
        a{
            color: @titleColor;
            font-weight: 600;
            display: block;
        }

.elementor-accordion-icon-opened,
        .default-img{
            display: none;
        }
        .rights{
            float: right;
            clear: right;
        }
        .default-img, .active-img{
            img{
                width: 25px;
            }
        }
        .elementor-accordion-icon{
            color: @titleColor; 
        } 
        .elementor-accordion-icon-opened{
            i{
                font-size: 14px;
            }
        }
        .elementor-accordion-icon-closed{
            i{
                font-size: 14px;
            }
        }
        &.ui-accordion-header-active{
            background:@secondaryColor;
            a{
                color: #fff;
            }
            .elementor-accordion-icon{
                color: #fff; 
            }            
            .elementor-accordion-icon-closed,
            .active-img{
                display: none;
                i{
                    font-size: 14px;
                }
            }
            .default-img{
                display: inline-block;
            }
            .elementor-accordion-icon-opened{
                display: block;
                i{
                    font-size: 14px;
                }
            }
        }
    }
    &.accdstyle2{
        .elementor-accordion-icon{
            width: 35px;
            height: 35px;
            background:@secondaryColor;
            text-align: center;
            border-radius:100%;
        }
        .elementor-accordion-title{
            padding-left:30px;
        }
        .ui-accordion-header .elementor-accordion-icon{
            color: #fff;
            i{
                position: relative;
                top: -2px;
                left: 1px;
                font-size: 12px;
            }
        }
        .ui-accordion-header.ui-accordion-header-active .elementor-accordion-icon{
            color: #fff;
            i{
                position: relative;
                top: -2px;
                left: 1px;
            }
        }
    }
}

@media only screen and (max-width: 1199px) {
    .single-header.header-style5 .menu-area .navbar ul li {
        padding-left: 2px;
        padding-right: 2px;
    }
}