@import url(./variable.css);

/* Menu Start */
header nav.navbar {
    box-shadow: 0px 2px 7px rgba(0, 0, 0, 0.1);
    padding-bottom: 0px;
}

.header-logo {
    margin-bottom: 8px;
}

.navbar-expand-xl .navbar-nav .nav-link {
    font-size: var(--font-16);
    font-family: var(--lato_bold);
    color: var(--gray-20);
    padding: 10px 0px;
    margin-right: 24px;
    position: relative;
}
.navbar-expand-xl .navbar-nav .dropdown  .nav-link {
    color: var(--primary);
}
.navbar-expand-xl .navbar-nav .nav-item:last-child .nav-link {
    margin-right: 0px;
}

.navbar-expand-xl .navbar-nav .nav-link:hover,
.navbar-expand-xl .navbar-nav .nav-item.active .nav-link {
    color: var(--primary);
}

.navbar-expand-xl .navbar-nav.nav-center .nav-link::before, .billing-sec .nav-link::after {
    content: "";
    width: 0;
    height: 3px;
    display: inline-block;
    background-color: transparent;
    position: absolute;
    bottom: 0px;
    left: 0px;
    transition: all ease 0.5s;
}

.navbar-expand-xl .navbar-nav.nav-center .nav-link:hover::before,
.navbar-expand-xl .navbar-nav.nav-center .nav-item.active .nav-link::before,
.billing-sec .nav-link.active::after, .billing-sec .nav-link:hover::after {
    width: 100%;
    background-color: var(--secondary);
}

.navbar-right.navbar-nav .nav-link:hover::before,
.navbar-right.navbar-nav .nav-item.active .nav-link::before {
    content: none;
}

.fix-header {
    position: fixed;
    top: 0px;
    width: 100%;
    left: 0px;
    z-index: 1111;
}

header .dropdown-menu,
.filter-dropdow-main .dropdown-menu {
    border: 0px;
    background: #FFFFFF;
    box-shadow: 0px 2px 10px rgba(76, 78, 100, 0.22);
    border-radius: 8px;
    padding: 10px 0px;
}

.filter-dropdow-main .dropdown-menu .dropdown-item:active {
    background-color: #e9ecef;
}

header .dropdown-menu .dropdown-item,
.filter-dropdow-main .dropdown-menu .dropdown-item {
    padding: 8px 25px 8px 15px;
    font-size: 16px;
    color: #212529;
    font-family: 'lato_blod';
}

.close-toggle {
    display: none;
}

.navbar-toggler[aria-expanded="true"] .close-toggle {
    display: block;
}

.navbar-toggler[aria-expanded="true"] .toggler-icon {
    display: none;
}

header .dropdown-item.active, header .dropdown-item:active {
    background-color: transparent;
}

.navbar-expand-xl .navbar-nav .dropdown-menu {
    min-width: auto;
}

/* Menu End */

/* Login Start */
.login-page {
    background-image: url(../images/login_bg.png);
    background-position: center;
    background-size: cover;
    overflow: hidden;

}

.login-form-content, .login-form-wrapper {
    display: flex;
    justify-content: center;
    flex-direction: column;
    min-height: calc(100vh - 7px);
}

.login-form-content::before, .login-form-wrapper::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    mix-blend-mode: multiply;
}

.login-form-content::before {
    right: 100%;
    background: var(--primary);
}

.login-form-wrapper::before {
    left: 100%;
    background: var(--primary-100);
}

.login-form-content::after, .login-form-wrapper::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    mix-blend-mode: multiply;
}

.login-form-content::after {
    background: var(--primary);
}

.login-form-wrapper::after {
    background: var(--primary-100);
}

.login-logo {
    margin-bottom: 75px;
}

.login-form-inner {
    margin-left: 128px;
    max-width: 311px;
}

.or-span::after {
    content: "";
    display: inline-block;
    width: 100%;
    height: 1px;
    background: var(--gray);
    margin-left: 4px;
}

/* Login End */

/* Landing page Start */
.banner-section {
    padding: 70px 0px;
    background-image: url(../images/banner-bg.png);
    background-position: center;
    background-size: cover;
}

.how-we-help {
    padding: 48.5px 0px;
}

.how-we-help .card {
    padding: 40px 36px 23px 29px;
    background: #FFFFFF;
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.05);
    border-radius: 10px;
    border: 0px;
    height: 100%;
    position: relative;
}

.card-icon {
    margin-bottom: 20px;
}

.card-link {
    position: absolute;
    right: 36px;
    bottom: 23px;
}

/* Landing page End */

/* Subscribe Plan Start */
.subplans-sec .card {
    background: #FFFFFF;
    border: 2px solid #7DB3A2;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.15);
    border-radius: 10px;
    position: relative;
    padding: 0px 55px 30px;
}

.business-plan .card {
    border-color: var(--secondary);
}

.free-trial .card {
    border-color: var(--gray-40);
}

.plan-header {
    text-transform: uppercase;
    border-radius: 10px;
    padding: 20px;
    position: absolute;
    top: -30px;
    left: 50%;
    width: 80%;
    transform: translate(-50%, 0);
}

.plan-details {
    padding-top: 70px;
    text-align: center;
}

.plan-prize, .plan-details {
    border-bottom: 1px solid #CAD6E2;
}

.plan-list li {
    list-style: none;
    margin-bottom: 20px;
    position: relative;
    padding-left: 25px;
}

.plan-list li div {
    content: '';
    position: absolute;
    left: 0px;
    top: 5px;
    width: 15px;
    height: 15px;
    background-image: url(../images/question-primary.svg);
    background-size: 15px;
    background-position: center;
    cursor: pointer;
}

.plan-list li div::before {
    content: attr(data-tooltip); /* Use the 'data-tooltip' attribute for the tooltip text */
    display: none;
    position: absolute;
    left: 0px; /* Adjust the position as needed */
    top: 20px;
    background-color: #333; /* Customize the background color */
    color: #fff; /* Customize the text color */
    padding: 5px;
    border-radius: 5px;
    z-index: 1;
    width: 200px;
}

.plan-list li div:hover::before {
    display: block; /* Show the tooltip on hover of the div */
}

.business-plan .plan-list li div {
    background-image: url(../images/question-secondary.svg);
}

.free-trial .plan-list li div {
    background-image: url(../images/question-gray.svg);
}

.plan-list .btn {
    font-size: 18px;
    text-transform: uppercase;
    border-radius: 10px;
    padding: 14px 60px;
}

.free-trial {
    margin-right: -60px;
}

.business-plan {
    margin-left: -60px;
}

.business-plan .card,
.free-trial .card {
    box-shadow: none;
}

.individual-plan {
    position: relative;
    z-index: 1;
}

/* Subscribe Plan End */
/* Thank You Start */
.thank-you-sec {
    width: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Thank You End */

/* Billing Details Start */
.billing-sec .nav-link {
    font-size: var(--font-20);
    font-family: var(--lato_bold);
    color: #A2A3B1;
    padding: 10px 0px;
    margin-right: 77px;
    position: relative;
}

.billing-sec .nav-link.active, .billing-sec .nav-link:hover {
    background: transparent;
    color: #474748;
}

.billing-sec .form-control, .billing-sec .form-select {
    background-color: transparent;
}

.order-summary-card {
    padding: 21px 32px 37px;
    background: #FFFFFF;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.05);
    border-radius: 4px;
    border: 0px;
}

.timer-span {
    position: absolute;
    right: 0px;
    top: 50%;
    color: #F26D6D;
    font-size: var(--font-11);
    transform: translate(0, -50%);
}
.form-label span {
    color: #E2574C;
}
/* Billing Details End */

/* Search Form Start */
.btn--secondary.fg-primary {
    color: var(--primary);
}

.search-form-sec .table {
    background: #FFFFFF;
    box-shadow: 0px 2px 10px rgba(76, 78, 100, 0.22);
}

.search-form-sec .table th {
    font-size: 14px;
    color: var(--gray-10);
    text-align: center;
    padding: 20px 15px;
    border-bottom: 2px solid rgba(63, 66, 84, 0.35);

}
 

.search-form-sec .table td {
    font-size: 14px;
    align-items: center;
    color: var(--gray-10);
    vertical-align: middle;
    padding:5px 8px;
    border-bottom: 1px solid rgba(63, 66, 84, 0.35);
    width: 2%;
}
.search-form-sec .table tr:nth-child(even) td {
    background: rgba(33, 37, 41, 0.03);
}
.search-form-sec .table tr:last-child td {
    border-bottom: none;
}
.pagination li {
    list-style: none;
}
.pagination li a {
    display: flex;
    width: 32px;
    height: 32px;
    font-size: 14px;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    background: var(--gray);
    border-radius: 4px;
    margin-right: 8px;
    color: #FFFFFF;
    line-height: 1;
}
.pagination li .next, .pagination li .prev {
    color: var(--gray); 
}
.pagination li a:hover, .pagination li a.active {
    background: var(--primary);
}
.filter-dropdown::after {
    content: none;
}
.pagination li .next {
    margin-right: 0px;
}

/* Search Form End */
.start-trial .free-trial {
    margin-right: 0px;
}
.presentations-list img {
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
}
.subplans-sec .card.activ-plan {
    background: #e9e9e9;
}

/* Forgot Password Start */
.forgot-password.modal-content
{
    background: var(--white );
    border-radius: 5px;
    border: none;
}
.forgot-password.modal-content .modal-header {
    border: none; 
    padding-right: 30px;
    padding-top: 30px;
}
.forgot-password.modal-content .modal-body {
    padding: 0px 60px 50px;
}
/* Forgot Password End */