@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
@font-face {
    font-family: 'Margin DEMO';
    src: url('font/MarginDEMO.woff2') format('woff2'),
        url('font/MarginDEMO.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
div {
    transition: all ease 0.5s;
}
body {
    font-family: "Lato", sans-serif;
    width: 100%;
    height: 100%;
}
p {
    margin-bottom: 0px;
}
a {
    text-decoration: none;
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-internal-autofill-previewed {
    -webkit-text-fill-color: #000;
    /* your desired text color */
    -webkit-box-shadow: 0 0 0px 1000px white inset;
    /* background override */
    transition: background-color 5000s ease-in-out 0s;
    /* trick to delay autofill color */
}
:focus-visible {
    outline: -webkit-focus-ring-color auto 0px;
}
header {
    /* background: rgba(244, 241, 235, 0.28); */
    background-image: url(../img/bg-img-hero.png); 
    background-repeat: no-repeat;
  background-size: cover;
}
.error{
    color: red;
}
.hero-sections{
    background-image: url(../img/bg-img-hero.png);
    padding-bottom: 90px;
    background-repeat: no-repeat;
    background-size: cover;
}
header.inner-page-header{
    background-image: unset;
    background: #F4F1EB;
}
.custom-logo {
    font-weight: bold;
    font-size: 1.5rem;
}
.custom-menu a {
    margin: 0 10px;
    font-weight: 500;
    color: #333;
}
.custom-auth .btn {
    margin-left: 10px;
}
.arrow-img-icon {
    width: 16px;
}
a.nav-link {
    color: #000;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    border-bottom: 2px solid #fcfbfa00;
}
a.nav-link:hover {
    color: #E65252;
    border-bottom: 2px solid #E65252;
}
.btn-txt {
    color: #000;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    background: transparent;
    border: none;
}
.btn-bg {
    border-radius: 15px;
    background: #E65252;
    padding: 8px 20px;
    color: #FFF;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    border: none;
}
.text-box-hero h1 {
    color: #292929;
    font-family: "Margin DEMO";
    font-size: 115px;
    font-style: normal;
    font-weight: 400;
    line-height: 0.8;
    position: relative;
    /* 0px */
}
.text-box-hero h1 span {
    color: #E65252;
}
.text-box-hero h4 {
    letter-spacing: 6px;
    font-size: 20px;
    margin-top: 30px;
}
.get-started {
    border-radius: 100px;
    background: #A0D4FC;
    color: #292929;
    text-align: center;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    padding: 20px 60px;
    box-shadow: 6px 6px 0px 0px;
    display: inline-block;
    margin-top: 50px;
}
.offer-img img {
    width: 100%;
}
.offer-img {
    width: 50%;
    border: 1px solid #ccc;
    border-radius: 10px;
    overflow: hidden;
}
.offer-disc {
    width: 100%;
}
/* Center menu for desktop, collapse to toggle for mobile */
@media (min-width: 992px) {
    .navbar-collapse {
        justify-content: center;
    }
}
.slider {
    width: 280px;
    height: 80vh;
    overflow: hidden;
    position: relative;
}
.slider-track {
    display: flex;
    flex-direction: column;
    gap: 20px;
    animation: scrollDown 30s linear infinite;
}
.slider.reverse .slider-track {
    animation: scrollUp 30s linear infinite;
}
.explore_card {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    height: 280px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.explore_card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.explore_card_info {
    position: absolute;
    bottom: 0;
    width: 100%;
    color: white;
    padding: 10px;
    border-radius: 0px 0px 15px 15px;
    background: rgba(0, 0, 0, 0.30);
    backdrop-filter: blur(10.094486236572266px);
}
.explore_card_info p {
    margin: 0;
    color: #FFF;
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    line-height: 16px;
    margin-bottom: 0px;
}
.explore_card_info small {
    color: #FFF;
    font-size: 11px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;
}
.arrow-icon {
    position: absolute;
    bottom: 20px;
    right: 20px;
}
@keyframes scrollDown {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-50%);
    }
}
@keyframes scrollUp {
    0% {
        transform: translateY(-50%);
    }
    100% {
        transform: translateY(0);
    }
}
.verticalSliders {
    display: flex;
    gap: 20px;
}
.explore-now {
    position: relative;
    overflow: hidden;
}
/* .explore-now::after {
    content: "";
    position: absolute;
    left: 0;
    top: -128px;
    right: 0;
    width: 100%;
    height: 240px;
    background: #FFF;
    filter: blur(30px);
}
.explore-now {
    position: relative;
}
.explore-now::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: -100px;
    right: 0;
    width: 100%;
    height: 210px;
    background: #FFF;
    filter: blur(30px);
    z-index: 99;
} */
.shape-sections-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
}
.shape-sections-top {
    position: absolute;
    right: 0;
    top: 0;
}
.explore-right-box h2 {
    color: var(--Dark-Blue-Design, #011632);
    font-size: 41px;
    font-style: normal;
    font-weight: 600;
    line-height: 125%; /* 51.25px */
    letter-spacing: 8.2px;
    text-transform: uppercase;
    margin-bottom: 20px; 
}
.heading h1 {
    color: var(--Dark-Blue-Design, #011632);
    text-align: center;
   font-size: 42px;
    font-style: normal;
    font-weight: 600;
    line-height: 125%; /* 52.5px */
    letter-spacing: 13.44px;
    text-transform: uppercase;
    position: relative;
    display: inline-block;
}
.heading h1 .text_shape {
    position: absolute;
    left: 0;
    bottom: -10px;
}
.img-box-hero img {
    width: 100%;
}
.features_box {
    border-radius: 50px;
    border: 1px solid #D9D9D9;
    background: #F9F9F9;
    padding: 40px 40px 0px;
    display: flex;
    align-items: center;
    gap: 20px;
}
.features_box .features_box_text h3 {
    text-align: center;
    font-family: "Margin DEMO";
    font-size: 58px;
    font-style: normal;
    font-weight: 400;
    line-height: 78%;
    letter-spacing: 0.87px;
}
.features_box .features_box_text p {
    color: #000;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 155%;
    /* 24.8px */
}
.features_box.large_box {
    flex-direction: column;
    height: 100%;
    justify-content: space-between;
}
.app_features {
    background-image: url(../img/bg-img-hero.png);
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    padding: 100px 0px;
}
.bg_shape_top {
    position: absolute;
    right: 0;
    top: 0;
}
.bg_shape_bottom {
    position: absolute;
    left: 0;
    bottom: 0;
}
.shop_away {
    padding: 100px 0px;
}
.shop_away .heading {
    text-align: left;
}
.hedai-disc {
    color: #6B7177;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}
.offer-box {
    border-radius: 17px;
    border: 1px solid #DEDEDE;
    background: #FFF;
    box-shadow: 0px 4px 15px 0px rgba(0, 0, 0, 0.08);
    padding: 15px 20px;
    display: flex;
    gap: 20px;
    align-items: center; 
}
.offer-disc h4 {
    color: #282828;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}
.offer-disc p {
    color: #707070;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;
    margin: 17px 0px;
}
.coupon-container {
    display: flex;
    align-items: center;
    gap: 10px;
}
.coupon-bx {
         width: 100%;
    position: relative;
}
.coupon-code {
    position: relative;
    border-radius: 20px;
    border: 1px dashed #C8C8C8;
    background: #FFF;
    color: #000;
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    text-transform: uppercase;
    padding: 7px 14px;
}
.coupon-bx.after-verify-rn .coupon-code:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.79);
    backdrop-filter: blur(3px);
    left: 0;
    top: 0;
}
.copy-btn {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 50px;
    background: #7A9BA2;
    color: #FFF;
    text-align: center;
    font-size: 13px;
    font-style: normal;
    font-weight: 600;
    line-height: 16px;
    /* 123.077% */
    padding: 6px 14px;
    border: none;
}
.share-btn button {
    background: transparent;
    border: none;
}
.shop_away .swiper {
    padding: 38px 0px;
}
.shop_away .swiper-pagination-bullet-active {
    width: 12px !important;
    height: 12px !important;
    background: #EFC3E8;
}
.shop_away .swiper-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
}

.faq {
    padding: 50px 0;
}
.faq .heading h1 img {
    width: 100%;
}
.faq-accordion .accordion-item {
    border: none;
    margin-bottom: 15px;
    overflow: hidden;
    background: transparent;
    border-radius: 25px;
border: 1px solid #D9D9D9;
background: #F9F9F9;
}
.faq-accordion .accordion-button {
    padding: 20px 60px 20px 20px;
    position: relative;
    border-bottom: 1px solid #CFCFCF;
    background: transparent;
    color: #011632;
    font-family: Lato;
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: 155%;
    letter-spacing: 0.45px;
}
.faq-accordion .accordion-button::after {
    content: "";
    background-image: url('../img/plus-icon.svg');
    /* ➕ icon */
    background-size: 24px;
    background-repeat: no-repeat;
    background-position: center;
    height: 24px;
    width: 24px;
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
}
.faq-accordion .accordion-button:not(.collapsed)::after {
    background-image: url('../img/mins-icon.svg');
    /* ➖ icon */
}
.faq-accordion .accordion-button:not(.collapsed) {
    background-color: #F9F9F9;
    border-radius: 20px 20px 0 0;
}
.faq-accordion .accordion-body {
    padding: 20px;
    background-color: #F9F9F9;
    border-radius: 0 0 20px 20px;
    color: #414141;
    font-family: Lato;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 155%;
    letter-spacing: 0.24px;
}
.accordion-button:focus {
    box-shadow: none;
}
@media (max-width: 576px) {
    .custom-logo img {
        height: 80px;
    }
    .faq-accordion .accordion-button {
        font-size: 16px;
        padding: 16px 50px 16px 16px;
    }
    .faq-accordion .accordion-body {
        font-size: 15px;
    }
}
footer {
    background: radial-gradient(255.17% 188.04% at 50% 121.69%, #FFDEF9 0%, #FFF 41.84%);
}
.footer-logo ul {
    padding: 0px;
    margin-bottom: 0px;
    margin-top: 20px;
}
.footer-logo ul li {
    display: inline-block;
    margin-right: 20px;
}

li.big-warp {
    margin-right: 13px !important;
}
.footer-logo p {
    color: #000;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}
.footer-heading {
    color: #000;
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}
ul {
    padding: 0;
    margin-bottom: 0px;
}
ul li {
    list-style: none;
}
.footer-links ul li a {
    color: #000;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-decoration: none;
    padding: 13px 0px;
    display: inline-block;
}
ul.contact-list li {
    color: #000;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    padding: 13px 0px;
}
.copytext {
    color: #000;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal; 
    padding: 20px 0px 0px;
}
sup {
    top: -.5em;
    position: absolute;
    top: 10%;
    right: 5%;
    font-size: 27px;
}
.wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url(../img/bg-img-hero.png);
    background-repeat: no-repeat;
    background-size: cover;
}
.left-side {
    color: white;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}
.left-side h2 {
    color: #E65252;
    font-size: 25px;
    font-style: normal;
    font-weight: 600;
    line-height: 135%;
    letter-spacing: 5px;
    text-transform: uppercase;
    margin-top: 73px;
}
.left-side p {
    color: #E65252;
    font-size: 47px;
    font-style: normal;
    font-weight: 300;
    line-height: 1;
    letter-spacing: -0.94px;
}
.right-side {
    padding: 40px;
}
.form-control {
    border-radius: 10px;
}
.copy-msg {
    position: absolute;
    width: 100%;
    font-size: 10px;
}
.loginform a {
    color: #000;
    text-decoration: underline;
}
@media (max-width: 768px) {
  
    .navbar-collapse { 
        position: absolute;
        top: 100%;
        background: #fff;
        left: 5%;
        right: 5%;
        z-index: 99;
        border-radius: 20px;
        padding: 10px;
    }
    .offer-box{
         flex-wrap: wrap;
    }
    .offer-img {
        width: 100%;
    }
    .left-side {
        display: none;
    }
       .right-side {
        padding: 0;
    }
    .wrapper { 
    background-size: cover;
}
.masonry-wrapper {
    padding: 0;
}
}
.loginform {
    border-radius: var(--24, 24px);
    border: 1px solid #D9D9D9;
    background: #FFF;
    padding: 44.5px 60px;
}
.input-group-text {
    background: transparent;
    border: none;
}
.loginform .form-control, .loginform select {
    border-radius: 10px;
    height: 60px;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;
    border: none;
}
.loginform .input-group {
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    width: 100%;
    border: 1px solid #D9D9D9;
    border-radius: 10px;
}
.form-control:focus, .loginform select:focus {
    box-shadow: none;
}
.loginform h3 {
    color: #292929;
    text-align: center;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: 32px;
    /* 133.333% */
}
.loginform p {
    color: #292929;
    text-align: center;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px;
    /* 157.143% */
}
.btn-theme {
    border-radius: 100px;
    background: #E65252;
    color: #FFF;
    text-align: center;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    padding: 20px 10px;
}
.login-oth p {
    color: rgba(41, 41, 41, 0.40);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
}
.login-oth p a {
    color: #E65252;
}
.btn-theme:hover {
    background: transparent;
    border-color: #E65252;
    color: #000;
}
.botm-ft {
    display: flex;
    justify-content: space-between;
}
.botm-ft .forgpas {
    color: #E65252;
    text-align: right;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}
.loginform .form-label {
    margin-bottom: .5rem;
    color: #292929;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 16px;
}
.loginform label {
    display: inline-block;
    color: #292929;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}
.code-receive a {
    color: #E65252;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;
    letter-spacing: -0.084px;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: none;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;
}
.code-receive p {
    color: #292929;
    text-align: center;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;
    letter-spacing: -0.084px;
}
.form-group.upload-img {
    border-radius: var(--24, 24px);
    border: 1px solid #D9D9D9;
    background: #F9F9F9;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.custom-upload-btn {
    cursor: pointer;
    display: inline-block;
    transition: 0.3s;
    text-align: center;
}
.upload-img {
    object-fit: contain;
    margin-bottom: 5px;
}
#preview-img {
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    max-height: 200px;
}
textarea.textarea-control {
    border-radius: 10px;
    border: 1px solid #DADADA;
    width: 100%;
    padding: 10px;
}
.top-heading-info {
    margin-bottom: 40px;
}
.top-heading-info p {
    text-align: left;
    color: #292929;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px;
}
.top-heading-info h3 {
    text-align: left;
    color: #292929;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: 32px;
}
.dashboard {
    display: flex;
    height: 100vh;
    padding: 30px;
    overflow-y: auto;
    background: #F4F1EB;
}
.sidebar {
    color: white;
    height: calc(100vh - 30px);
    position: fixed;
    left: 30px;
    top: 30px;
    bottom: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 50px;
    border: 1px solid #D9D9D9;
    background: #FFF;
    padding: 30px;
    overflow-y: auto;
     overflow-x: hidden;
}
.logo img {
    width: 100px;
    margin-bottom: 30px;
}
.menu {
    list-style-type: none;
    padding: 30px 0px;
    width: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    gap: 20px;
}
.content {
    margin-left: 200px;
    width: calc(100% - 200px);
    padding: 0px;
}
.top-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
    position: sticky;
    top: -30px;
    z-index: 99;
    background: #F4F1EB;
    padding: 20px;
    transition: all 0.3s ease;
}
.search-box {
    flex: 1;
    position: relative;
}
img.scr-icn-img {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
}
.search-box input {
    width: 100%;
    border-radius: 50px;
    border: 1px solid #D9D9D9;
    background: #FFF;
    padding: 15px 10px 15px 45px;
}
.profile {
    display: flex;
    align-items: center;
}
.profile-img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 10px;
    object-fit: cover;
}
.arrow {
    cursor: pointer;
}
.dropdown {
    position: relative;
}
.dropdown-menu {
    display: none;
    position: absolute;
    right: 0;
    top: 35px;
    color: black;
    border: 1px solid #ddd;
    min-width: 200px;
    border-radius: 14px 0px 14px 14px;
    background: #FFF;
    box-shadow: 0px 9px 40px 0px rgba(0, 0, 0, 0.15);
    padding: 0px;
    overflow: hidden;
}
.dropdown-menu ul {
    list-style-type: none;
}
.dropdown-menu ul li a {
    padding: 10px;
    cursor: pointer;
    color: #000;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    transition: all 0.3s ease;
    display: inline-block;
    width: 100%;
}
.dropdown-menu ul li a:hover {
    background: #e45956;
    color: #fff;
}
.dropdown-menu ul li:not(:last-child) {
    border-bottom: 1px solid #9797974f;
}
.dropdown-menu ul li:hover {
    background-color: #e45956;
    color: #fff;
}
.dropdown.open .dropdown-menu {
    display: block;
}
.menu-toggle {
    display: none;
    font-size: 28px;
    cursor: pointer;
}
.btn-theme:hover img {
    filter: brightness(0);
}
.masonry-wrapper {
    padding: 1rem;
}
.masonry-container {
    column-count: 1;
    column-gap: 1rem;
    /*display: grid;
      grid-template-columns: 1fr 1fr 1fr;
        align-items: self-start;*/
}
input.hidden-color-input {
    opacity: 0;
    margin-left: -10px;
}
.offer-box.lock-box {
    position: relative;
    overflow: hidden;
}
.lock-box:after {
    content: "";
    background: #ffffff00;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    backdrop-filter: blur(4px);
}
@media (min-width: 576px) {
    .masonry-container {
        column-count: 2;
    }
}
@media (min-width: 768px) {
    .masonry-container {
        column-count: 3;
    }
}
@media (min-width: 992px) {
    .masonry-container {
        column-count: 4;
    }
}
.masonry-item {
    background: #fff;
    display: inline-block;
    margin-bottom: 1rem;
    border-radius: 0.5rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    width: 100%;
}
.masonry-item img {
    width: 100%;
    height: auto;
    display: block;
}
.masonry-item .content {
    padding: 1rem 0px;
}
.masonry-wrapper {
    padding: 1rem;
}
@media (min-width: 576px) {
    .masonry-container {
        column-count: 2;
    }
}
@media (min-width: 768px) {
    .masonry-container {
        column-count: 3;
    }
}
@media (min-width: 992px) {
    .masonry-container {
        column-count: 4;
    }
}
.explore_card_masonry {
    break-inside: avoid;
    background: #fff;
    display: inline-block;
    margin-bottom: 1rem;
    border-radius: 15px;
    overflow: hidden;
    width: 100%;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    position: relative;
    cursor: pointer;
    transition: all 0.3s ease;
}
.explore_card_masonry::after {
    content: '';
    position: absolute;
    background: #e4595666;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    border-radius: 8px;
    z-index: 9;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}
.explore_card_masonry:hover::after {
    opacity: 1 !important;
}
.explore_card_masonry img {
    width: 100%;
    display: block;
    height: auto;
}
.explore_card_masonry .explore_card_info {
    padding: 1rem;
    font-size: 14px;
}
.explore_card_masonry .arrow-icon img {
    width: 16px;
    height: 16px;
}
.closeup-card {
    overflow: hidden;
    transition: all 0.3s ease-in-out;
    border-radius: 20px;
    border: 1px solid #D9D9D9;
    background: #FFF;
    padding: 30px;
}
.closeup-card img {
    width: 100%;
    height: auto;
    object-fit: cover;
}
.closeup-content {
    padding: 20px;
}
.closeup-title {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 10px;
}
.closeup-desc {
    color: #6c757d;
    font-size: 0.95rem;
    margin-bottom: 15px;
}
.post-img {
    position: relative;
}
.post-img img {
    width: 100%;
    border-radius: 20px;
    max-height: 500px;
    object-fit: contain;
    background: #000;
}
.closeup-price {
    font-size: 1.2rem;
    font-weight: 500;
    margin-bottom: 15px;
}
.closeup-btn {
    background-color: #ff4d4d;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    transition: background-color 0.3s;
}
.closeup-btn:hover {
    background-color: #e60000;
}
.user-info {
    display: flex;
    align-items: center;
    gap: 10px;
}
.user-info img {
    object-fit: cover;
    border-radius: 50%;
    width: 36.5px;
    height: 36.5px;
}
.comment-box {
    margin-top: 30px;
    padding-top: 0;
    max-height: 270px;
    overflow-y: auto;
}
.comment {
    display: flex;
    align-items: flex-start;
    margin-bottom: 15px;
    align-items: self-start;
}
.comment img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 10px;
    flex: 0 0 auto;
}
.comment-body {
    border-radius: 10px;
    display: flex;
    gap: 5px;
    flex-direction: column;
}
.comment-body h6 {
    margin: 0;
    color: #000;
    font-size: 13px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    text-transform: capitalize;
}
.comment-body p {
    margin: 0;
    color: rgba(0, 0, 0, 0.80);
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}
.comment-time a {
    color: #999;
    margin-left: 5px;
    color: rgba(0, 0, 0, 0.30);
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.24px;
}
.cmt-disc {
    display: flex;
    gap: 10px;
}
.closeup-content {
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}
.comment-footer {
    position: relative;
    display: flex;
    align-items: center;
    border-radius: 16px;
    background: #F4F1EC;
    padding: 0;
    gap: 10px;
}
.comment-footer  .form-control:focus { 
    background-color:transparent;
   
}
.commt-sections {
    width: 100%;
    position: relative;
}
.post-action-btn ul {
    display: flex;
    align-items: center;
    gap: 20px;
     border-radius: 16px 0px 0px 16px;
    background: #E65252;
    padding: 10px;
}
 
.post-action-btn ul li a {
    display: flex;
    align-items: center;
    gap: 5px;
    color: rgba(255, 255, 255, 0.90);
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 18.17px;
}
.comment-input {
    border-radius: 16px;
    background: #F4F1EC;
    height: 59.465px;
    padding: 16px 66px;
    padding-right: 190px;
    border: none;
}
.cmt-profile img {
    position: absolute;
    left: 25px;
    top: 50%;
    transform: translateY(-50%);
    width: 27px;
    height: 26.229px;
    border-radius: 50%;
}
span.cmt-count {
    position: absolute;
    right: 75px;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 50%;
    color: #000;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 26px;
    /* 200% */
    letter-spacing: 0.39px;
}
button.cmt-btn-send {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    border-radius: 100px;
    background: #E65252;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.user-info small {
    color: #fff !important;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 18.17px;
}
.user-info h5 {
    color: #FFF;
    font-size: 17.161px;
    font-style: normal;
    font-weight: 500;
    line-height: 18.17px;
    letter-spacing: -0.412px;
    text-transform: capitalize;
}
.comment-box::-webkit-scrollbar {
    display: none;
}
.add-post .modal-dialog .modal-content {
    max-width: 668px;
}
.post-profile-image img {
    width: 60px;
    height: 60px;
    object-fit: cover;
}
.post-profile-image {
    padding: 40px 40px 0px 40px;
}
/*.post-disc {
    padding: 10px 40px 0px 40px;
}*/
.add-post textarea.form-control {
    border: 1px solid #ccc;
    padding: 10px;
    border-radius: 10px;
}
.upload-content {
    background: #FFF;
/*    filter: drop-shadow(0px 4px 20px rgba(0, 0, 0, 0.11));*/
    padding: 10px;
    display: flex;
    justify-content: space-between;
    margin-top: 0;
    border-radius: 30px;
}
.post-privew img {
    width: 100%;
    max-height: 150px;
    object-fit: contain;
}
.basic-info.loginform {
    border: none;
    padding: 0px;
}
.btn-ft-post {
    color: #292929;
    font-size: 17px;
    font-style: normal;
    font-weight: 500;
    line-height: 40px;
}
.btn-ft-post img {
    margin-right: 13px;
    width: 32px;
}
.post-btn {
    border-radius: 100px;
    background: #E65252;
    border: 1px solid #E65252;
    width: 127px;
    min-width: 127px;
    padding: 10px;
    color: #FFF;
    font-size: 16px;
    font-weight: 600;
    position: absolute;
    right: 20px;
    bottom: 5px;
    transition: all 0.3s ease-in-out;
}
.description_status {
    margin-top: 10px;
    border-bottom: 1px solid #cccccc96;
    padding: 0px 10px 6px;
}
.post-btn:hover {
    border-color: #E65252;
    background: transparent;
    color: #000;
}
.tabs {
    display: flex;
    justify-content: center;
    margin: 20px 0;
}
.tab {
    padding: 10px 25px;
    border-radius: 30px;
    margin: 0 10px;
    background: #f1f1f1;
    color: #000;
    cursor: pointer;
    transition: all 0.3s ease;
}
.tab.active {
    background: #ee6e61;
    color: white;
}
.calendar-scroll {
    max-height: calc(100vh - 100px);
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
}
.calendar-container {
    width: 100%;
    height: 100vh;
    margin: auto;
    border-radius: 20px;
    padding: 0 10px;
    overflow: hidden;
    scroll-snap-align: start;
    margin-bottom: 20px;
}
.calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    border-radius: 20px 20px 0px 0px;
    background: #D6D0F5;
    padding: 20px;
    position: relative;
}
/* .calendar-header h2 {
    color: #000;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    margin-bottom: 0px;
} */
 .calendar-header h2 {
    margin-bottom: 10px;
    color: #4A64B2;
    font-family: "Margin DEMO";
    font-size: 50px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}
.calendar {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 10px;
}
.day-name, .day {
    text-align: center;
    padding: 10px;
}
.day-name {
    color: #292929;
    text-align: center;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}
.day {
    max-height: 90px;
    height: 75px;
    display: flex;
    align-items: baseline;
    justify-content: flex-start;
    position: relative;
    color: #000;
    text-align: center;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    border-radius: 13px;
    background: #FFF;
}
.highlight-yellow {
    background: #f6e9a9;
}
.highlight-orange {
    background: #f3a373;
    color: white;
}
.highlight-purple {
    background: #b9a5d5;
    color: white;
}
.highlight-green {
    background: #81a6a7;
    color: white;
}
.day span.icon {
    margin-left: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    right: 0;
}
.day .icon img {
    width: 28px !important;
    position: absolute;
    bottom: 10px;
    right: 10px;
}
.you-indicator {
    position: absolute;
    bottom: 10px;
    left: 10px;
    border-radius: 90px;
    background: #EEE;
    padding: 6px 10px;
    color: #707070;
    text-align: center;
    font-family: Inter;
    font-size: 11px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}
.calendarTabs {
    width: max-content;
    padding: 6px 14px;
    border-radius: 50px;
    background: #FFF;
    margin: 0 auto;
        gap: 20px;
}
.calendarTabs button {
    border-radius: 50px;
    background: transparent;
    color: #1E1E1E;
    text-align: center;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;
    padding: 12px 60px;
}
.calendarTabs button.active {
    border: 1px solid #292929;
    color: #292929;
    text-align: center;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 16px;
    /* 100% */
}
.calendar-box {
    border-radius: 20px 20px 0px 0px;
    background: #D6D0F5;
    padding: 10px 20px;
    position: relative;
}
/* .calendar-box .add-button {
    position: absolute;
    right: 30px;
    top: 30px; 
} */
.menu li:last-child {
    margin-top: 140px;
    border-top: 1px solid #e7e7e7;
    padding-top: 30px;
}
.top-head-clns {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.calendarTabs a.nav-link.active { 
 background: #E65252;   
   border: 1px solid #E65252; 
   color: #fff;
}
.calendarTabs .nav-link {
    color: #292929;
    text-align: center;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;
    border-bottom: 0px;
     border-radius: 50px;
        border: 1px solid #fff;
       
}
.calendarTabs .nav-link:hover {
    border-radius: 50px;
    border: 1px solid #292929;
    color: #000;
}
.calendarTabs button:hover {
    color: inherit;
}
.manual-entry-container {
    padding: 20px 0px;
}
.manualEntry .modal-header h3 {
    color: #000;
    text-align: center;
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    margin-bottom: 0px;
}
.manualEntry .modal-header button.btn-close {
    right: 25px;
    top: 25px;
}
.closeup-card .user-left-info a {
    padding: 0px;
}
.closeup-card .user-left-info a:hover {
    background: none;
    color: #000;
}
.choose-shift-checkbox {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
    justify-content: space-between;
}
.shift-box {
    cursor: pointer;
    transition: border 0.3s;
    position: relative;
    border-radius: 15px;
    border: 1px solid #DEDEDE;
    background: #FFF;
    box-shadow: 0px 4px 15px 0px rgba(0, 0, 0, 0.08);
    flex-basis: 33%;
    text-align: center;
}
.shift-box input[type="radio"] {
    opacity: 0;
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    cursor: pointer;
    z-index: 2;
}
.shift-box .timesl {
    border: 1.5px solid transparent;
    z-index: 1;
    cursor: pointer;
    transition: border 0.3s;
    position: relative;
    display: inline-block;
    padding: 24px;
    color: #1E1E1E;
    text-align: center;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;
    width: 100%;
    border-radius: 15px;
}
.shift-box input[type="radio"]:checked+.timesl {
    border: 1.5px solid #7A9BA2;
    border-radius: 15px;
    height: 100%;
}
.shift-box input[type="radio"]:checked+.timesl .checked-icon {
    display: block !important;
}
.manualEntry .modal-content {
    border-radius: 45px;
    border: 1px solid #292929;
    background: #F4F1EB;
    max-width: 537px;
    padding: 20px;
    overflow: hidden;
}
.manualEntry .modal-dialog {
    max-width: 668px;
}
img.checked-icon {
    display: none !important;
    position: absolute;
    right: 7px;
    top: 7px;
}
.shift-box .timesl img {
    display: block;
    margin: 0 auto;
    margin-bottom: 10px;
}
.shift-select {
    width: 100%;
    padding: 0px 32px;
    font-size: 16px;
    border-radius: 15px;
    border: 1px solid #DEDEDE;
    background-color: #FFF;
    height: 50px;
    color: #000;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;
}
.time-slots {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
}
.time-slot {
    padding: 12px 24px;
    cursor: pointer;
    transition: background 0.3s;
    border-radius: 15px;
    border: 1px solid #DEDEDE;
    background: #FFF;
    box-shadow: 0px 4px 15px 0px rgba(0, 0, 0, 0.08);
    color: #1E1E1E;
    text-align: center;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;
}
.time-slot:hover {
   border-radius: 15px;
    background: #D1EDCC;
    box-shadow: 0px 4px 15px 0px rgba(0, 0, 0, 0.08);
    color: #7A9BA2;
}
.modal-heading h2 {
    color: #000;
    text-align: center;
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    margin-bottom: 50px;
}
.manual-entry-container h3 {
    color: #1E1E1E;
    font-size: 17px;
    font-style: normal;
    font-weight: 500;
    line-height: 16px;
    margin-bottom: 12px;
}
.shift-slot h4 {
    color: #1E1E1E;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 16px;
    margin-bottom: 12px;
    margin-top: 38px;
}
.tab-box-content {
    background: #fff;
    padding: 40px;
    border: 1px solid #D9D9D9;
    border-radius: 20px;
}
.colleagues-box a {
    display: inline-block;
    border-radius: 20px;
    border: 1px solid #D9D9D9;
    background: #FFF;
    padding: 32px;
    position: relative;
    width: 100%;
}
.arrow-card-clg {
    position: absolute;
    top: 32px;
    right: 32px;
    transform: rotate(-90deg);
}
.colleagues-box .colleagues-img {
    width: 94px;
    height: 94px;
    aspect-ratio: 1/1;
    border-radius: 20px;
    object-fit: cover;
    margin-bottom: 13px;
}
.colleagues-box h4 {
    color: #000;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 22.208px;
    /* 123.377% */
}
.colleagues-box p {
    color: #5C5C5C;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    word-break: break-all;
    /* 160% */
}
.tab-box-content h2, .top-heading-card h2 {
    color: #000;
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    margin-bottom: 0px;
}
.top-heading-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px;
}
.colleagues-box.friends-box a {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 15px;
    cursor: auto;
}
.colleagues-box.friends-box .colleagues-img {
    margin-bottom: 0px;
}
.colleagues-box.friends-box .arrow-card-clg {
    transform: rotate(0deg);
    top: 12px;
    right: 12px;
    z-index: 9;
}
.addfriend .manual-entry-container {
    padding: 30px;
}
.addfriend .btn-ft-post img {
    margin-right: 0;
    width: 100%;
}
.addfriend .btn-ft-post {
    width: 100%;
    text-align: center;
}
.addfriend .form-control {
    height: 60px;
}
.profile-content {
    border-radius: 20px;
    border: 1px solid #D9D9D9;
    background: #FFF;
    padding: 50px;
}
.profile-content .masonry-wrapper {
    padding: 0px;
}
.left-box-profile {
    display: flex;
    align-items: center;
    gap: 12px;
}
.left-box-profile .profile-big {
    border-radius: 100px;
    border: 3px solid #A0D4FC;
    background: url(<path-to-image>) lightgray -39.25px 0px / 162.504% 100% no-repeat;
    width: 125px;
    height: 125px;
    object-fit: cover;
}
.left-box-profile h2 {
    color: #000;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 22.208px;
    /* 123.377% */
    letter-spacing: -0.412px;
}
.left-box-profile p {
    color: #292929;
    font-size: 13.123px;
    font-style: normal;
    font-weight: 400;
    line-height: 22.208px;
    /* 169.231% */
    letter-spacing: -0.412px;
}
.left-box-profile span {
    color: #292929;
    font-size: 13.123px;
    font-style: normal;
    font-weight: 400;
    line-height: 22.208px;
    /* 169.231% */
    letter-spacing: -0.412px;
}
.right-box-profile ul {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.right-box-profile ul li h3 {
    color: #000;
    text-align: center;
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: 22.208px;
    /* 123.377% */
    letter-spacing: -0.412px;
    margin-bottom: 0px;
}
.right-box-profile ul li p {
    color: #000;
    text-align: center;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 22.208px;
    /* 138.799% */
    letter-spacing: -0.412px;
}
.right-box-profile .follow-btn {
    border-radius: 20.189px;
    background: #EFC3E8;
    padding: 10.094px 30px;
    border: none;
    color: #292929;
    text-align: center;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 22.208px;
    /* 138.799% */
    letter-spacing: -0.412px;
}
.my-profile-box {
    padding: 50px 0px;
    border-bottom: 1px solid #F4F1EB;
    margin-bottom: 30px;
}
.profile-content .nav.calendarTabs {
    margin: 0 auto;
}
.profile-content .nav.calendarTabs button {
    padding: 10px 40px;
}
.verify-rn-box p {
    color: #A0D4FC;
    text-align: center;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    /* 150% */
}
.verify-rn-box .verify-rn {
    display: inline-block;
    width: auto;
    margin: 0 auto;
    border-radius: 100px;
    background: #7A9BA2;
    color: #FFF;
    text-align: center;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    padding: 10px 20px;
    border: none;
    margin-top: 20px;
}
.color-row {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 15px;
    background-color: #fff;
    gap: 7px;
}
.color-row:before {
    content: "";
    position: absolute;
    right: 20px;
    background: url(../img/shift-color-shape.svg);
    height: 73%;
    width: 46px;
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 1;
    /* z-index: 9; */
}
.color-label {
    margin: 0;
    border-radius: 26px;
    border: 1px solid #D9D9D9;
    width: 100%;
    padding: 13px 23px;
    background: #fff;
    position: relative;
    z-index: 9;
    border-right: 0;
    color: #000;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: capitalize;
}
.color-circle {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #FFF;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 4px;
    border: 1px solid #D9D9D9;
    border-left: 0px;
}
.pen-edit {
    position: absolute;
}
.color-circle i {
    color: white;
    font-size: 14px;
}
.update-btn {
    width: 200px;
    border-radius: 30px;
    background-color: #e45048;
    color: white;
    padding: 10px;
    font-weight: bold;
    font-size: 16px;
    border: none;
    transition: 0.3s;
    display: inline-block;
    text-align: center;
}
.update-btn:hover {
    background-color: #d3423a;
}
.ntifications-box {
    position: relative;
    border-radius: 22px;
    margin-bottom: 4px;
    padding: 12px 12px 24px;
}

.Notifi-type {
    padding: 4px 12px;
    display: inline-block;
    border-radius: 9px;
    text-align: right;
    font-size: 10px;
    font-style: normal;
    font-weight: 500;
    line-height: 16px;
    /* 160% */
    letter-spacing: -0.2px;
    margin-bottom: 11px;
}
span.Notifi-type.greenbx {
    background: rgba(163, 177, 138, 0.15);
    color: #6f8843;
}
.ntifications-list {
    position: relative;
}
.ntifications-list h3 {
    color: #000;
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
    /* 160% */
    letter-spacing: -0.3px;
    padding-left: 23px;
    margin-bottom: 2px;
}
.ntifications-list p {
    color: var(--Color-Neutral-500, #6d6d6d);
    /* Text/Caption/Regular */
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;
    /* 123.077% */
    letter-spacing: -0.26px;
    padding-left: 23px;
    margin-bottom: 0;
}
.time-noti {
    position: absolute;
    right: 28px;
    top: 16px;
    color: #999;
    text-align: right;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;
    /* 133.333% */
    letter-spacing: -0.24px;
}
.bluebg {
    background: rgba(96, 139, 204, 0.15);
    color: #608bcc;
}
.orengbg {
    background: rgba(242, 127, 12, 0.15);
    color: #bf6517;
}
.bgyellow {
    background: rgba(249, 222, 133, 0.80);
    color: rgba(94, 75, 13, 0.80);
}
.clor-bg-1 {
    background: #E65252;
}
.clor-bg-2 {
    background: #EFC3E8;
}
.clor-bg-3 {
    background: #A0D4FC;
}
.features_box_text {
    text-align: center;
}
.features_box.clor-bg-1 h3 {
    color: #EFC3E8;
}
.features_box.clor-bg-1 p {
    color: #fff;
}
.features_box.clor-bg-2 h3 {
    color: #E65252;
}
.features_box.clor-bg-3 h3 {
    color: #4A64B2;
}
.contact-list p {
    color: #000;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-bottom: 13px;
}
.date-box {
    display: flex;
    align-items: end;
    justify-content: space-between;
}
.date-box .left-side-date h2 {
    color: #4A64B2;
    font-family: "Margin DEMO";
    font-size: 60px;
    font-style: normal;
    font-weight: 400;
    line-height: 1;
}
.date-box .left-side-date p {
    color: #4A64B2;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}
.date-box .right-side-date .shiftcolors, .clear-btn {
    border-radius: 109px;
    border: 1px solid #4A64B2;
    box-shadow: 0px 4px 15px 0px rgba(0, 0, 0, 0.08);
    display: inline-block;
    color: #4A64B2;
    text-align: center;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    text-transform: capitalize;
    padding: 4px 10px;
}
.closeup-card .dropdown-container {
    position: relative;
    display: inline-block;
}
.closeup-card .icon-button {
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    cursor: pointer;
    font-size: 32px;
    color: #fff;
    background: transparent;
}
.closeup-card .dropdown-menu {
    position: absolute;
    top: 50px;
    right: 0;
    background: #fff;
    border: 1px solid #ddd;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-radius: 6px;
    width: 160px;
    display: none;
    z-index: 99;
}
.closeup-card .dropdown-menu.active {
    display: block;
}
.closeup-card .dropdown-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.closeup-card .dropdown-menu ul li {
    padding: 10px 16px;
    cursor: pointer;
}
.closeup-card .dropdown-menu ul li:hover {
    background-color: #f2f2f2;
    color: #000;
}
.closeup-card .user-left-info {
    position: absolute;
    top: 0px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 20px 10px;
    border-radius: 20px 20px 0px 0px;
    background: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.00) 100%);
}
.post-action-btn img {
    width: auto;
    height: auto;
}
.comment-footer form.comment-form {
    width: 100%;
}
.reportModal-post .modal-content {
    padding: 20px;
}

.reportModal-post .modal-content  .report-textarea {
    border-radius: 10px;
    border: 1px solid #DADADA;
    width: 100%;
    padding: 20px;
}

.reportModal-post .modal-content  h3 {
    text-align: left;
    color: #292929;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: 32px;
    margin-bottom: 20px;
} 
.modal-content .btn-close {
    position: absolute;
    right: 15px;
    top: 15px;
}
.modal-header {
    padding: 0px;
    border: none;
}
.modal-shift-calendar-vertical {
    max-height: 30vh;
    overflow-y: auto;
    scroll-behavior: smooth;
    padding: 10px;
}
.modal-shift-calendar-vertical .day {
       height: 50px;
    
    border-radius: 13px;
    background: #FFF;
    justify-content: center;
    border: none;
}
.shift-calendarScroll-vertical {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

 .modal-shift-calendar-vertical .day-name {
 height: auto !important;
    background: transparent;
    color: #292929;
    text-align: center;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}
 .modal-shift-calendar-vertical .month-title {
    margin-bottom: 10px;
    color: #4A64B2;
    font-family: "Margin DEMO";
    font-size: 50px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.days-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
}

.day {
  text-align: center;
  padding: 5px; 
}

.day-name {
  font-weight: bold;
  color: #444;
}

.day-number {
  background: #fff;
  border: 1px solid #ddd;
}



.faq.faq-inner-page {
    background: #F4F1EB;
    position: relative;
}
.bg-inner header {
    background-image: unset;
}
.bg-inner {
    background: #F4F1EB;
    position: relative;
}
section.faq.faq-inner-page h1 {
    color: var(--Dark-Blue-Design, #011632);
    text-align: center;
    font-size: 42px;
    font-style: normal;
    font-weight: 400;
    line-height: 125%; /* 52.5px */
    letter-spacing: 13.44px;
    text-transform: uppercase;
}

.faq.faq-inner-page h2 p {
    color: #333;
    font-family: Lato;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 32px; /* 160% */
    letter-spacing: -0.4px;
}

.contact-us-form {
    border-radius: 40px;
    border: 1px solid #D9D9D9;
    background: linear-gradient(180deg, rgba(226, 226, 226, 0.00) 0%, rgba(255, 255, 255, 0.20) 100%);
    padding: 40px;
}

.contact-us-form h4 {
    color: #1A1A1A;
    font-family: Lato;
    font-size: 22px;
    font-style: normal;
    font-weight: 500;
    line-height: 32px; /* 145.455% */
    letter-spacing: -0.44px;
}

.contact-us-form p {
    color: #666;
    font-family: Lato;
    font-size: 17px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 141.176% */
    letter-spacing: -0.34px;
} 
.contact-us-form  .form-control {
    border-radius: 16px;
    border: 1px solid #979797;
    background: #FFF;
    padding: 15px 20px;
}
 
.contact-us-form select.form-select {
    border-radius: 16px;
    border: 1px solid #D7D7D7;
    color: #000;
    font-family: Lato;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    padding: 15px 20px;
}
.contact-us-form  .form-label {
    color: #333;
    font-family: Lato;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.contact-us-form  .form-label span {
    color: #FA3C36;
}
.form-select:focus {
   
    box-shadow: none;
}
.about-us-page h2 {
    color: var(--Dark-Blue-Design, #011632);
    text-align: center;
    font-size: 42px;
    font-style: normal;
    font-weight: 600;
    line-height: 125%;
    letter-spacing: 13.44px;
    text-transform: uppercase;
} 
.about-info h3 {
    color: rgba(0, 0, 0, 0.90);
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 28px; /* 175% */
}

.about-info p {
    color: rgba(0, 0, 0, 0.90);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 28px;
    margin-bottom: 20px;
}  

.content-box-stetic h3 {
    font-size: 24px;
    margin-top: 20px;
    font-weight: 500;
}
#suggestions-list {
    position: absolute;
    background: #fff;
    left: 0;
    right: 0;
    border-radius: 10px;
    padding: 15px;
}
/* #suggestions-list li a:not(:last-child) {
    border-bottom: 1px solid #ccc;
} */
#suggestions-list li {
    display: flex;
    justify-content: space-between; 
    padding: 5px 0px; 
     border-bottom: 1px solid #cccccc52;
    width: 100%;
}
#suggestions-list a {
    font-size: 16px;
    color: #000;
    text-transform: capitalize;
    display: inline-block;
    padding: 5px 0px;
   
}

.shareModal-post .modal-content {
    padding: 20px;
}

.shareModal-post .modal-content h3 {
    margin-bottom: 0px;
    font-size: 20px;
}
@media (max-width: 768px) {
    .day span.icon svg {
    width: 24px;
    position: relative;
    top: 10px;
}
    .main-content {
    margin-top: 17%;
}
    .manual-entry-container {
        padding: 20px;
    }
    .dashboard {
        padding: 0;
    }
    .calendarTabs button {
        font-size: 14px;
        padding: 11px 10px;
    }
    .day-name, .day {
        padding: 8px;
    }
    .calendar {
        gap: 1px;
    }
    .day {
        height: 65px;
    }
    .day-name {
        font-size: 14px;
    }
    .calendar-header h2 {
        font-size: 20px;
    }
    .shift-slot h4 {
        margin-top: 18px;
    }
    .sidebar {
        transform: translateX(-120%);
        z-index: 999;
    }
    .sidebar.open {
        transform: translateX(0);
        left: 10px;
        top: 60px;
        z-index: 999;
    }
    .menu li:last-child {
    margin-top: 0px; 
}
    .menu-toggle {
        display: block;
    }
    .content {
        margin-left: 0;
        width: 100%;
    }
 .search-box input {
    width: 100%;
    border-radius: 15px;
    border: 1px solid #D9D9D9;
    background: #FFF;
    padding: 5px 5px 5px 40px;
}
img.scr-icn-img { 
    width: 14px;
        left: 20px;
}
.search-box {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: #F4F1EB;
        padding: 10px;
    }
     .cmt-count { 
    display: none;
}
    .upload-content {
        padding: 10px;
    }
    .btn-ft-post img {
        margin-right: 8px;
        width: 24px;
        display: block;
    }
    .btn-ft-post {
        font-size: 14px;
    }
    .profile-content {
        padding: 20px;
    }
    .coupon-bx {
        flex-basis: 100%;
    }
       .calendarTabs {
        width: 98%;
        justify-content: space-around;
        padding: 10px;
        gap: 10px;
        border-radius: 20px;
        flex-wrap: nowrap;
    }
    /* .calendarTabs li.nav-item {
    width: 100%;
} */
    .tab-box-content {
        padding: 20px;
    }
    .left-box-profile .profile-big {
        flex: 0 0 auto;
    }
    .left-box-profile {
        flex-wrap: wrap;
        margin-bottom: 30px;
    }
    .profile-content .nav.calendarTabs button {
        padding: 10px 24px;
    }
    .colleagues-box a { 
    padding: 12px; 
}
  .my-profile-box {
        padding: 10px 0px;
    }
    .closeup-content {
        padding: 20px 0;
    }
    .cmt-disc {
        flex-wrap: wrap;
    }
    .comment {
        align-items: self-start;
    }
    .closeup-card {
        padding: 20px;
        margin-top: 20%;
    }
    .comment-input { 
    padding-right: 66px; 
}
    .masonry-container {
        column-count: 2;
        column-gap: 1rem;
    }
    .explore_card_masonry .explore_card_info {
        padding: 10px;
        font-size: 11px;
    }
    .top-header {
        top: 0px;
        padding: 10px 10px 0px 10px;
    }
    .comment-footer { 
    flex-wrap: wrap;
}
.post-action-btn {
    width: 100%;
}
.post-action-btn ul { 
    border-radius: 16px; 
    justify-content: space-between;
}
.post-img img { 
    max-height: 200px;
}
.text-box-hero h1 {  
    font-size: 40px; 
}
.get-started { 
    margin-top: 0px;
}
.features_box { 
    flex-wrap: wrap;
    justify-content: center;
    padding: 20px 20px 0px;
            margin-bottom: 20px;
}
.features_box .features_box_text h3 { 
    font-size: 32px; 
}
.features_box .features_box_text h3 br{ 
     display: none;
}
.features_box_img img {
    width: 150px;
}
.features_box.mb-3.clor-bg-1 .features_box_img {
    order: 2;
}
.features_box_text img {
    width: 90px;
    margin-bottom: 20px;
}
 .img-box-hero {
    margin-top: 40px;
}
.hero-sections { 
    padding-bottom: 0; 
}
header { 
    background-size: 292%;
}
.explore-right-box h2 {
        font-size: 24px;
        margin: 20px 0px;
        letter-spacing: 4.2px;
    }
.shape-sections-bottom, .shape-sections-top, .heading h1 .text_shape {
    display: none;
}
.dawold-app {
    display: flex;
    gap: 10px;
}
.dawold-app a img {
    width: 140px;
}
.app_features { 
    background-repeat: repeat;
    background-size: contain; 
}
.heading h2 {
        font-size: 24px;
        letter-spacing: 7.44px;
        line-height: 1.5;
    }
.copytext {
     
    padding: 20px 0px 0px;
    border-top: 1px solid #b9a8b6;
    margin-top: 20px;
}
.loginform { 
    padding: 20px;
}
}
.img-about-right {
    width: 100%;
    border-radius: 20px 20px 0px 0px;
}
.img-about-small-1{
 width: 100%;
    border-radius: 0px 0px 0px 20px;
}
.img-about-small-2{
 width: 100%;
    border-radius: 0px 0px 20px 0px;
}
.take-snapshot {
    border-radius: 100px;
    background: #E65252;
    color: #FFF;
    text-align: center;
    border: none;
    font-size: 16px;
    font-style: normal;
    line-height: 1;
    padding: 10px 15px;
}
video {
    width: 100% !important;
    height: 100% !important;
     border-radius: 10px;
}

#my_camera {
    width: 100% !important;
    height: 100% !important;
    padding: 0px 10px; 
    overflow: hidden;
}
#results {
    padding: 10px;
    overflow: hidden;
}

#results img {
    border-radius: 10px;
    margin-bottom: 10px;
}
.custom-upload-form {
    display: flex;
    justify-content: center; 
    gap: 15px;
}

.custom-upload-label {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 10px;
  background-color: #e45956;
  color: white;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 500;
  transition: background-color 0.3s ease;
}

.custom-upload-label:hover {
  background-color: #424242;
}

.upload-icon {
  font-size: 20px;
}

.upload-btn {
  padding: 10px 25px;
  background-color: #424242;
  color: white;
  border: none;
  border-radius: 6px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

input#custom_shift_hour {
    border-radius: 15px;
    border: 1px solid #DEDEDE;
    background: #FFF;
    height: 50px;
    color: #000;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;
}
#customShiftHour h4 {
    color: #1E1E1E;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 16px;
    margin-bottom: 12px;
    margin-top: 38px;
}
 
/* Hide native radio input */
.time-slot input[type="radio"] {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* When selected, change background */
.time-slot input[type="radio"]:checked + * {
  background-color: #D1EDCC;
  color: #fff;
  border-color: #7A9BA2;
}

/* Or use this version for better specificity */
.time-slot input[type="radio"]:checked ~ * {
  background-color: #D1EDCC;
  color: #7A9BA2;
}

/* Optional: hover effect */
.time-slot:hover {
  background-color: #e0e0e0;
}
.time-slot:has(input[type="radio"]:checked) {
  background-color: #D1EDCC;
  color: #7A9BA2;
  border-color: #D1EDCC;
}
.select2-container { 
    width: 100% !important;
}
.select2-container .select2-selection--multiple { 
    border: 0; 
}
.select2-container--default.select2-container--focus .select2-selection--multiple {
  
    border: 0px  !important;
    border-radius: 30px !important;
}
.nav.profil-tabs {
    border-radius: 50px;
    background: #EFEFEF;
}
.nav.profil-tabs button.active {
    border-radius: 50px;
    background: #E65252;
    border-color: #E65252 !important;
    color: #fff;
}
.addfriend .btn-ft-post #preview-image {
    max-width: 40%;
    height: 170px;
    object-fit: contain;
}
.addfriend .manual-entry-container .btn-ft-post img {
    min-width: 100% !important;
}
.blue-border {
    border: 4px solid #4A64B2 !important;
}
.calendar-scroll .calendar-container:nth-child(odd) .calendar-header {
 background: #D6D0F5;
}

.calendar-scroll .calendar-container:nth-child(even) .calendar-header{
 background: #E65252;
    
}
.calendar-scroll .calendar-container:nth-child(even) .calendar-header h2{ 
    color: #EFC3E8;
}
.comparedd-btn {
    padding: 10px;
}
.scan-to-upload {
    border-radius: 20.189px;
    background: #A0D4FC;
    box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.15);
    padding: 11px 12px;
    position: fixed;
    z-index: 1;
    bottom: 11px;

}
.button-scan {
    max-width: 140px;
    margin: 0 auto;
    position: relative;
}
.scan-to-upload a {
    color: #292929;
    text-align: center;
/*    font-family: Inter;*/
    font-size: 13.123px;
    font-style: normal;
    font-weight: 600;
    line-height: 22.208px; /* 169.231% */
    letter-spacing: -0.412px;
    text-transform: capitalize;
    display: flex;
    align-items: center;
    gap: 10px;
}
#image-preview {
    text-align: center;
    margin: 0 auto;
}
@media (max-width: 768px) {
       .scan-to-upload {
        /* position: relative !important;
        width: max-content;
        top: 0 !important;
        left: 0 !important; */
    }
    .calendar-box .add-button {
        /* position: absolute;
        right: 30px;
        top: 40%; */
    }
    .calendar-box .nav-link {
    
    padding: 10px 7px;
        font-size: 14px;
}
    .calendarTabs .nav-link {
        font-size: 14px;
        padding: 0.5rem 0.5rem;
    }
.calendar-box { 
    padding: 20px 10px; 
}
}
#postModal .post-btn:hover {
    border-color: #E65252 !important;
    background: #E65252 !important;
    color: #fff;
}
#postModal .modal-content .btn-close 
 {
    position: absolute;
    right: 5px;
    top: 5px;
    background-color: #fff;
    z-index: 999;
}
select {
        appearance: none;         /* Remove default arrow (for custom control) */
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 30px;    
     background: url(../img/select-arrow.svg) no-repeat right 10px center;  
    background-size: 12px;
}
 
div#upload-loader {
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    top: 0;
    background: #000000ba;
    height: 100%;
    z-index: 999;

}

div#shift-upload-loader {
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    top: 0;
    background: #000000ba;
    height: 100%;
    z-index: 9999;
}

.loader-iner {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    height: 100%;
    color: #fff;
}
.loader-iner .spinner-border.text-primary {
    color: #E65252 !important;
}

@media (max-width: 900px) {
.you-indicator {
    top: 20px;
    right: 0;
    bottom: auto;
    left: auto;
}
}
@media screen and (min-width: 770px) and (max-width: 990px) {
    .loginform { 
        padding: 20px;
    }
    .right-side {
    padding: 0;
}
.wrapper { 
    background-size: cover;
}
   
}
.login-container input::-webkit-outer-spin-button,
.login-container input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
.login-container input[type=number] {
  -moz-appearance: textfield;
}

.otp-input-box .otp-input:not(:first-child) {
    border-left: 1px solid #e1dfdf !important;
}
.input-group.otp-input-box {
    overflow: hidden;
}
input.otp-input.form-control:focus{
     border:inherit;
     border-color:#e1dfdf  ;
     box-shadow: none;
}

.big-nitifications img {
    width: 50px;
    height: 50px;
    border-radius: 50px;
}

.big-nitifications {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.follow-btn2{
    border-radius: 20.189px;
    background: #a0d4f6;
    padding: 10.094px 30px;
    border: none;
    color: #292929;
    text-align: center;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 22.208px;
    letter-spacing: -0.412px;
        margin-right: 10px;
}
.Decline-btn{
        border-radius: 20.189px;
    background: #e65252;
    padding: 10.094px 30px;
    border: none;
    color: #fff;
    text-align: center;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 22.208px;
    letter-spacing: -0.412px;
}
.action-btn-noti a {
    display: inline-block;
    padding: 4px 16px;
}
.ntifications-box.bg-bx {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.action-btn-noti {
    display: flex;
    align-items: center;
    justify-content: end;
}
.ntifications-box.bg-bx:nth-child(odd) {
   background: #f9f9f9
}

.ntifications-box.bg-bx:nth-child(even) {
   background: transparent;
}
.colleagues-box.friends-box {
    position: relative;
}
.colleagues-box.friends-box button {
    background: transparent;
    border: none;
    padding: 0;
}
.form-check-input:checked {
    background-color: #e65252;
    border-color: #6c6c6c;
}
.form-check-input { 
    border-color: #6c6c6c !important;
}
.form-check-input:focus {
    border-color: #e65252;
    outline: 0;
    box-shadow: 0 0 0 .25rem #e652521f;
}

.modal-content {
    background: #fff;
    margin: 10% auto;
    padding: 20px;
    width: 90%;
    max-width: 400px;
    border-radius: 10px;
    position: relative;
}

span.multiple-indicator {
   
    position: absolute;
    left: auto;
    right: 45px;
    bottom: 14px;
}


input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

.edit_btn_bm {
    position: absolute;
    right: 10px;
    bottom: 10px;
    font-size: 14px; 
}

.edit_btn_bm button {
    color: #e65252;
}
@media (max-width: 770px) {
    .left-side {
        display: none;
    }
    .col-md-6.right-side.d-flex.align-items-center {
    width: 100%;
}
}

.btn-border-box {
    display: inline-block;
    border-radius: 100px;
    color: #FFF;
    text-align: center;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    padding: 20px 10px;
    border: 1px solid #e65252;

}