@import url(../../assets/fonts/OleoScript/OleoScript.css);
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@300&display=swap');
  
.header-cover-bg {

/*
    background-image: url(../../assets/images/main-page-header.png);
    height: 580px !important;
*/
    position: absolute;
    width: 100%;
    background-repeat: no-repeat;
    background-size: cover;

}

.row{
    margin-right: 0px !important;
    padding: 0px;
}
.user-profile .header-cover::after{
    background: transparent;
}
/* .head{height: 750px;} */

.banner-container {
    margin: 0rem !important;
    width: 100%;
    height: 100%;
    background-color: #18174F;
    padding-left: 3%;
    padding-top: 50px;
    padding-bottom: 50px;
    min-height: 600px;
    display: flex;
    align-items: center;
}
.dashboardbannerimg {
    max-width: 680px;
    max-height: 480px;
    width: 100%;
    border-radius: 15px;
    margin-right: 4rem;
}

.join-survey-btn:hover {
    color: white !important;
}
.login-survey-btn:hover {
    color: white !important;
}

.img-section img {
    /*width:180px;*/
    height: 250px;
}

.footer-getstarted img {
    width: 15px;
}

.learn-more-txt img {
    width: 15px;
}

/*Zoom In*/
.imgzoomanim {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
}

.imgzoomanim:hover {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}

.nav-tabs .nav-item .nav-link.active{
    background: transparent;
    border-bottom: 2px solid #397DD6;
}
#ui-widget-body{margin-top:2px;
    background: linear-gradient(180deg, #F4F9FF 26.56%, #E9F2FF 100%);
    box-shadow: 0px 4px 19px 2px rgba(0, 0, 0, 0.25);}
#bg-shape{
/*    background-image: url(../../assets/images/background-shape.png);*/
    background-repeat: no-repeat;
    background-size: cover;

}
.cost-plan{
    font-family: 'Roboto Mono';
    font-size: 56px;
    font-weight: 300;
}
.cost-plan sup {
    top: -2em;
}
.f-weight-400{
font-weight: 400;
}
.f-weight-500{
    font-weight: 500;
}

.font-fam-roboto{
    font-family: 'Roboto Mono';
}

.price-card{
    min-height: 536px;
    transition: transform .2s;
}
.enterprise-card{
    min-height: 336px;
    width: 80%
    transition: transform .2s;
}

.price-card:hover {
    transform: scale(1.1);
}
  
.flipster__button svg {
    color: #004DFF;
    font-size: 6px;
}
.flipster__item{
    height: 400px;
}
.flipster__item--current{
    height: 420px;
}
#flat .card{
    width: 400px;
}
#bg-rectangle{
    background-image: url('../images/rectangle-10.png');
    background-repeat: no-repeat;
    background-position: center;
    background-origin: content-box;
    border-radius: 6px;
    height: 167px;
    background-size: cover;
}
.hre{
  
    border-radius: 3px;
    height: 154px;
    min-width: 230px;
    text-align: center;
    justify-content: center;
    align-items: center;
    vertical-align: middle;

}
.hre img.img-fluid{
    width: 230px;
    height: 154px;
}
.hr-1{
    background: linear-gradient(
        180deg
        , #77E08E 0%, #77E0B4 100%);
    
}
.hr-2{
    background: linear-gradient(180deg, #77E0CD 0%, #77D3E0 100%);
    
}
.hr-3{
    background: linear-gradient(180deg, #55C2FF 0%, #5599FF 100%);
    
}
.hr-4{
    background: linear-gradient(180deg, #628DFB 0%, #6F62FB 100%);
    
}

.hr-department-icons {
    /*position:absolute;*/ margin:auto; left:0px; right:0px; bottom:0px; top:0px;    margin-top: 44px;
}
#shape-footer{
    background-image: url(../images/footer-shape.png);
    background-repeat: no-repeat;
    background-size: cover;
}
.flipster{
    max-height: 480px;
}
ul.flipster__container {
    min-height: 470px !important;
}
.thick-border{
    border: 2px solid;
}
.hvr-efft a:hover{
color: #397DD6;
}
.logo {width:177px; }

.tw-link, .fb-link, .yt-link {
    display: inline-block;
    position: relative;
    width: 30px;
}

.tw-link .tw-img-top, .fb-link .fb-img-top, .yt-link .yt-img-top {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 99;
}

.tw-link:hover .tw-img-top,  .fb-link:hover .fb-img-top, .yt-link:hover .yt-img-top {
    display: inline;
}

.clientC{
    display: flex;
    align-items: center;
    height: auto;
    box-shadow: none;
}

.clientC < ul{
    padding: 0px !important;
}


.clientC > img{
    max-height: 133px !important;
    margin-bottom: 0px !important;
}


.clientC > p{
    font-size: 10px !important;
    height: auto
}

/* hide clients */

.faded-box {
/*border: 1px #d8d8d8 dashed;
  font: 2em/1.6em Arial;*/
  position: relative;
}

.faded-box:after {
  content: "";
  position: absolute;
  z-index: 1;
  bottom: 0;
  left: 0;
  pointer-events: none;
  background-image: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255, 1) 90%);
  width: 100%;
  height: 30em;
}

.cross-rel {
    position: relative;
    opacity: 70%;
    font-size: 25px;
    color: #797979;
    line-height: 1;
}

.cross-icon-tow {
    border: 0px solid rgba(192, 24, 24, 0.5);
    background-color: rgba(192, 24, 24, 0.5);
    height: 3px;
    transform: rotate(156deg);
    width: 65px;
    position: absolute;
    top: 10px;
    right: -9px;
}

.cross-icon {
    /*border: 1px solid rgba(192, 24, 24, 0.5);
    transform: rotate(-162.07deg);
    width: 60px;
    position: absolute;
    top: 16px;
    right: -7px;*/
}

/*
.faded-box .fade { 
  position: absolute; 
  bottom: 0; 
  left: 0;
  width: 100%; 
  text-align: center; 
  margin: 0; padding: 300px 0; 
	
   "transparent" only works here because == rgba(0,0,0,0) 
  background-image: linear-gradient(to bottom, transparent, white);
}
*/

/* Participants Slider Style */
	.price-container{
		display:block;
		width:fit-content;
		margin:auto;
	}
	.badge-save {
		font-size: 12px;
		background-color: #38a250;
		color: white;
		border-radius: 24px;
		padding: 5px 10px;
		font-weight: 600;
		margin-bottom: 9px;
		width: fit-content;
		display:block;
		transition: opacity .2s;
	}
	.participants-input{
	    border: none; 
		outline: none; 
		padding: 5px 0; 
		margin: 0 0;
		width: 34px;
		background-color: white;
        font-weight: 700;
	}
	.participants-input:focus{
		border-bottom: 2px solid #000;
	}
  .slider-container {
    position: relative;
    width: 100%;
    height: 10px;
    background-color: #d7e2ec;
    border-radius: 5px;
	cursor:pointer;
    opacity: 0.8;
    -webkit-transition: .2s;
    transition: opacity .2s;
	margin-top: 15px;
  }
  .slider-container:hover{
    opacity: 1;
  }
  .slider-thumb {
    position: absolute;
    width: 25px;
    height: 25px;
    background-color: #EC5E5E;
    border: 4px solid #fff;
    border-radius: 50%;
    cursor: pointer;
    transform: translate(-50%, -50%);
    top: 50%;
	cursor:pointer;
	box-shadow: rgba(0, 0, 0, 0.35) 1px 2px 8px;
  }
  .slider-track {
	  position: absolute;
	  background-color: #18174F; /* Your desired color */
	  height: 100%;
	  border-top-left-radius: 5px;
	  border-bottom-left-radius: 5px;
	  z-index: 1; /* Ensure it's behind the thumb */
	}

	.slider-thumb {
	  /* ... your existing styles ... */
	  z-index: 2; /* Ensure the thumb is above the track */
	}

  .slider-labels {
    display: flex;
    justify-content: space-between;
    list-style-type: none;
    padding-left: 0;
    margin-top: 15px;
    font-size: 15px;
  }
  .slider-labels li{
	width:35px;
	cursor:pointer;
  }
  
  .sign-up-btn {
	background-color: #18174F;
    border: none;
    color: white;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    font-weight: 600;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 77px;
    margin: auto;
  }
  .participants-num{
	margin-bottom: 0.3rem;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
   }
/* Participants Slider Style Ends */


@media (max-width: 767px){
   
    .top-nav-bar-item {
        text-align: right !important;
        width: 100% !important;
    }
    #shape-footer {
        background-size: contain;
    }
    .navbar-toggler-icon{
        margin-top: -20px;
        margin-right: 10px;
    }
    .navbar-toggler .navbar-toggler-icon div{
        background: #214778;
        width: 25px;
        height: 2px;
        vertical-align: middle;
        content: "";
        margin-top: 4px;
    }

    .login-btn-block {
        width: 100%;
    }
    .mb-mrgn-top-0{
    margin-top: 0px !important;
    }
    .mb-mrgn-top-3 {
        margin-top : 0.75rem !important
    }
    .mb-mrgn-right-3{
        margin-right: 1rem !important;
        }
    .img-section img {
        /* width:150px; */
        height: 130px;
    }
    #ui-widget-body .card-body{
        display: unset !important;
    }
    #flat .card{
        width: 300px;
    }
    .text-left-m {
        text-align: left !important;
    }
    .text-center-m {
        text-align: center !important;
    }

    .justify-content-left-m {
        justify-content: left !important;
    }
    .w-100-m{
        width: 100% !important;
    }
    .mobile-btn{
        padding: 5px 20px !important;
    }
    .logo {width:100px; margin-bottom: 20px; }
    .hre{
    
        height: 118px;
        min-width: 180px;

    }.hr-department-icons{
        width: 50px;
        height: 50px;
        margin-top: 34px;
    }

}
/*@media (min-width: 992px){
.navbar-expand-lg .navbar-nav .nav-link {
    padding-right: 5rem;
    padding-left: 5rem;
}*/
}