@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');

body{
    font-family: "Inter", sans-serif; color:#2A3544; margin: 0px;
}

/*-- color --*/
.base-color { color:#2A3544 }
.base-color-3 { color:#1D0005 }
.base-color-2 { color:#4B5563 }
.text-grey-90 { color:#919191 !important }
.text-blue { color:#0058D4 !important }
.text-green-30 { color:#00B036 }
.text-danger-40 { color:#DF4142 }

/*-- background color --*/
.bg-black { background-color: #200B0B; }
.bg-base { background:#2A3544 !important; }
.bg-red-60 { background: #DF4142 !important }
.bg-light-10 { background-color: #F6F6F6 !important; }

/*-- font-size --*/
.fs-12 { font-size: 12px !important; }
.fs-14 { font-size: 14px !important; }
.fs-16 { font-size: 16px !important; }
.fs-18 { font-size: 18px !important; }
.fs-20 { font-size: 20px !important; }
.fs-22 { font-size: 22px !important; }
.fs-24 { font-size: 24px !important; }
.fs-26 { font-size: 26px !important; }
.fs-28 { font-size: 28px !important; }
.fs-30 { font-size: 30px !important; }
.fs-32 { font-size: 32px !important; }
.fs-34 { font-size: 34px !important; }
.fs-36 { font-size: 36px !important; }
.fs-38 { font-size: 36px !important; }
/*-- font-weight --*/
.fw-semibold { font-weight: 600; }
/*-- form-control --*/
.form-control-lg { padding: 10px 18px; min-height: 54px; }
/*-- btn-css --*/
.btn-lg { height: 54px; align-items: center; display: flex; }
/*-- border --*/
.border-light { border:1px solid #F6F6F6 }
.border-light-20 { border:1px solid #EFEFEF }
.border-bottom-light { border-bottom: 1px solid #F6F6F6; }
.border-base { border:1px solid #2A3544 !important; }
.border-red { border: 1px solid #DF4142 }
.rounded-30 { border-radius: 30px !important; }
.border-custom { border:5px solid #2A3544 !important; }
.blur-9 { filter:blur(9px)}
.mt-72 { margin-top:72px }
/*-- height --*/
.h-80 { height: 80px; }
.h-200 { height:200px; }
.bg-black-section { height: 200px; }
/*-- toggle-switch --*/
.toogle-switch .form-check-input:checked {
    background-color: #00B036;
    border-color: #00B036;
}
/*-- padding --*/
.p-12 { padding: 0.75rem }
.py-12 { padding-top:0.75rem; padding-bottom: 0.75rem }

/* images */
.img-box{
    width: 100%;
    height: 240px;
    object-fit: cover;

}
/* radio  */
.radio input[type="radio"] {
    position: absolute;
    opacity: 0;
}
.radio input[type="radio"] + .radio-label{
    position: relative;
    display: flex;
    cursor: pointer;
    padding-right: 2.2rem;
}
.radio input[type="radio"] + .radio-label:after {
    content: '';
    background: #fff;
    border-radius: 100%;
    border: 1px solid #333;
    display: inline-block;
    width: 1.5em;
    height: 1.5em;
    position: absolute;
    top: 0em;
    margin-left: 0.75em;
    vertical-align: top;
    cursor: pointer;
    text-align: center;
    transition: all ease .5s;
    z-index: 1;
    right: 0;
}
.radio input[type="radio"]:checked + .radio-label:after {
    background-color: #DF4142 !important;
    box-shadow: inset 0 0 0 4px #fff !important;
    border-color: #DF4142 !important;
}
.radio input[type="radio"]:focus + .radio-label:after {
    outline: none;
    border-color: #DF4142;
}
.radio input[type="radio"]:disabled + .radio-label:after {
    box-shadow: none;
    border-color: rgba(128, 128, 128, 0.4);
    background: #fff;
}
.radio input[type="radio"] + .radio-label:empty:after {
    margin-left: 0;
}

.btn-group-custom .btn.active,
.btn-group-custom .btn:hover{
  background-color: #DF4142 !important;
  border-color: #DF4142 !important;
  color: #fff;
}
.btn-group-custom .btn{
    color: #333;
    border-color: #333;
    border-color: #333;
    position: relative;
    min-width: 7rem;
    padding: 0.5rem;
}
.btn-group-custom .btn input{
    position: absolute;
    opacity: 0;
    width: 100%;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    cursor: pointer;
}
/*-- login-form --*/
.login-form {  width: 60%; margin: 0 auto; }
.cursor-pointer { cursor: pointer; }
input::placeholder,
textarea::placeholder,
select::placeholder {
    font-size: 16px;
    color: #2A3544;
    opacity: 0.5;
}
/*-- textarea --*/
textarea.form-control-lg {
    min-height: 140px !important;
}
/* -- opacity --*/
.opacity-10 { opacity: 0.10; }
.opacity-20 { opacity: 0.20; }
.opacity-30 { opacity: 0.30; }
.opacity-40 { opacity: 0.40; }
.opacity-50 { opacity: 0.50; }
.opacity-60 { opacity: 0.60; }
.opacity-70 { opacity: 0.70; }
.opacity-80 { opacity: 0.80; }
.opacity-90 { opacity: 0.90; }


.user-prof.position-absolute {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: #fff;
    top: -60px;
    border: 8px solid #f6f6f6;
}

.main-content {
    margin-top: 100px;
    margin-bottom: 120px;
    height: calc(100% - 340px);
    overflow-y: auto;
    /* padding-top: 60px; */
}

.current-main-content {
    margin-top: 140px;
    margin-bottom: 150px;
    height: calc(100% - 340px);
    overflow-y: auto;
    padding-top: 60px;
}
.selectedPlanInner {
    z-index: 10;
}
.select-white {   border-radius: 0 100px 0 0;  }
.selectedPlanInner::after {
    position: absolute;
    content:"";
    width: 100%;
    height: 100%;
    border-radius: 0  100px 0 0;
    top: -24px;
    left: -24px;
    background: black !important;
    z-index: -2;
}

.planInner::after {
    position: absolute;
    content:"";
    width: 100%;
    height: 100%;
    border-radius: 0  100px 0 0;
    top: -24px;
    left: -24px;
    background: #efefef;
    z-index: -2;
}
.most-popular {
    top: -15px;
    left: 70px;
}

.navbar-expand-lg .navbar-nav .nav-link { color: #fff; }
.navbar-expand-lg .navbar-nav .nav-link.active, .navbar-expand-lg .navbar-nav .nav-link:hover {
    color: #DF4142;
    position: relative;
}
.navbar-expand-lg .navbar-nav .nav-link.active::after { 
    position:absolute;
    content: "";
    width: 100%;
    height: 2px;
    background-color: #DF4142;
    left: 0px;
    bottom: 0px;
 }
.navbar-expand-lg .navbar-nav .nav-item .nav-link { padding: 24px 10px; }

@media (max-width: 1280px) { 

    
}
@media (max-width: 992px) { 
    .login-form {  width: 70%; }
    .bg-black-section { height: 80px; background-color: transparent !important;  }
    .top-bar-logo { width:130px; margin-left: 56px; }
    .mobile-menu button.navbar-toggler { margin-top: -26px; }
    .mt-72 {  margin-top: 62px }
    .mobile-menu .navbar-nav .nav-item .nav-link {
        padding: 16px 10px;
    }
}

a {
    text-decoration: none;
}
.info {
    color: red;
}

.loader {
    position: fixed;
    background-color: rgba(0, 0, 0, 0.8);
    width: 100%;
    height: 100%;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 999999999;
}
.spinner {
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    position: absolute;
}
.spinner-grow {
    width: 4rem;
    height: 4rem;
}
.w-150 {
    width: 150px;
}