:root {
    --masala: rgba(69, 64, 61, 1);
    --white: #ffffff;
    --questrial: "Questrial", sans-serif;
    --lightBgImg: linear-gradient(rgba(255, 255, 255, 0.2)), url('/themeimage/Brown/footerBg.jpg');
    --darkBgImg: linear-gradient(rgba(69, 64, 61, 0.8)), url(/themeimage/Brown/footerBg.jpg);
}

h1, h2, h3, h4, h5, h6, p, small, a, pre, li,button {
    font-family: var(--questrial) !important;
}

#navMainCol {
    min-height: 8vh;
    background-image: var(--darkBgImg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    box-shadow: rgba(61, 43, 31,0.8) 10px 10px 10px inset,rgba(61, 43, 31,0.8) -10px -10px 10px inset;
}

.emptyDiv {
    min-height: 1vh;
    background-image: linear-gradient(rgba(255,255,255, 0.2)), url('/themeimage/Brown/footerBg.jpg')
}

#indexImgContainer {
    height: 150px;
    width: 150px;
    clip-path: circle(50% at 50% 50%);
    background: rgba(255,255,255,0.7);
    animation: show 1s linear  forwards
}

#indexSubImgContainer {
    height: 140px;
    width: 140px;
    clip-path: circle(50% at 50% 50%);
}

#indexMainColumn {
    min-height: 80vh;
    /* background-image: linear-gradient(to right, rgba( 61, 43, 31, 0.5), rgba(61, 43, 31, 0.7)), url('/themeimage/Brown/maincolumnBg.jpg');*/
    background-image: linear-gradient(to right, rgba( 61, 43, 31, 0.5), rgba(61, 43, 31, 0.5)), url('/themeimage/Brown/homeMainSectionBg.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

    #indexMainColumn h1 {
        font-size: 28px !important;
        color: ghostwhite;
        text-shadow: 2px 1px 1px black !important;
        animation: show 1s linear forwards;
    }

    #indexMainColumn h5 {
        font-family: var(--questrial) !important;
        color: ghostwhite !important;
        letter-spacing: 1px;
        text-shadow: 2px 1px 1px black !important;
        line-height: 30px !important;
        font-size: 18px !important;
        font-weight: 200 !important;
        animation: show 1s linear forwards;
    }

    #indexMainColumn p {
        font-family: var(--questrial) !important;
        color: ghostwhite !important;
        letter-spacing: 0.5px;
        font-size: 17px !important;
        text-shadow: 2px 1px 1px black !important;
        animation: show 1s linear forwards;
    }

    #indexMainColumn span {
        font-family: var(--questrial) !important;
        color: ghostwhite !important;
        letter-spacing: 0.5px;
        font-size: 17px !important;
        text-shadow: 2px 1px 1px black !important
    }

    #indexMainColumn a {
        font-family: var(--questrial) !important;
        color: ghostwhite !important;
        letter-spacing: 0.5px;
        font-size: 17px !important;
        text-shadow: 2px 1px 1px black !important
    }

.brownBtn-Cta {
    background-image: linear-gradient(rgba(255,255,255, 0.2)), url('/themeimage/Brown/footerBg.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border: 1px solid white;
    color: ghostwhite;
    font-size: 20px;
    padding: 10px 20px;
    margin: 0 10px;
    text-shadow: 2px 2px 2px black;
    box-shadow: rgba(255,255,255,1) 1px 1px 5px,rgba(255,255,255,1) -1px -1px 5px;
    animation: show 1s linear forwards;
}

    .brownBtn-Cta:hover {
        color: ghostwhite;
        text-shadow: 2px 2px 2px black;
        transform: scale(1.1);
    }

@keyframes show {
    from {
        transform: scale(0);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

#indexSubColumn {
    min-height: 85vh !important
}

.menuIconBrown {
    font-size: 28px !important;
    color: var(--masala) !important;
}

.menuLinkDropdown {
    display: none;
}

#companyTitleBrown h4 {
    font-size: 30px !important;
    color: white !important;
    font-weight: 800;
    text-shadow: black 1.5px 1.5px 1px;
}

.naviLink a {
    text-decoration: none;
}

.naviLink {
    color: var(--white) !important;
    font-weight: 300;
    text-shadow: black 1.5px 1.5px 1px;
}

.userNaviLink {
    height: 28px;
    width: 28px;
    background-color: var(--white);
    border-radius: 28px
}

    .userNaviLink:hover {
        background-color: none;
        background-image: var(--lightBgImg) !important;
        color: white !important;
        border: 1px solid white !important
    }

    .userNaviLink h6 {
        font-size: 12px !important;
        color: var(--masala) !important;
        margin-top: 2px !important;
        font-weight: 300;
    }

        .userNaviLink h6:hover {
            color: var(--white) !important;
        }

.menuIconBrown {
    color: white !important
}

#chatDropdownMenuLink h6 {
    color: var(--white) !important;
    text-shadow: black 1.5px 1.5px 1px;
    text-decoration: none !important;
    font-weight: 300 !important
}

#footerMainRow {
    background-image: linear-gradient(to top,rgba(255, 255, 255, 0.2), rgba(100,65,23, 1)), url('/themeimage/Brown/footerBg.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

#companyColumnConTainer {
    background-image: var(--darkBgImg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 7vh !important
}

#companyFooterTitleLogo h5 {
    color: white !important;
    font-size: 25px !important;
    font-weight: 400 !important;
}

.companyFooterLogo {
    height: 55px;
    width: 55px;
}

.hl {
    height: 1px;
    width: 100%;
    background-color: gray;
    margin: 10px 0px;
}

.vl {
    border-left: 0.5px solid #cd9575;
    height: 100% !important;
    position: absolute;
    top: 0;
    left: 0;
}

#companyInfo h5 {
    color: wheat !important;
    font-weight: 300 !important;
}

#companyInfo p {
    color: white !important;
    font-size: 16px !important;
    font-weight: 300 !important
}

#companyInfo .mailLink {
    color: white !important;
    font-size: 16px !important;
    font-weight: 300 !important;
    font-family: "Quicksand", sans-serif !important;
}

    #companyInfo .mailLink:hover {
        color: gold !important;
    }

#FooterQL h5 {
    color: wheat !important;
    font-weight: 300 !important;
}

#FooterQL a {
    color: white !important;
    font-size: 16px !important;
    font-weight: 300 !important;
}

    #FooterQL a:hover {
        color: navajowhite !important;
        transform: scale(1.1);
    }

#footerSocmed h5 {
    color: wheat !important;
    font-weight: 300 !important;
}

#footerSocmed i {
    color: white !important;
    font-size: 20px
}

    #footerSocmed i:hover {
        color: wheat !important;
        transform: scale(1.1);
    }


#storyBranding {
    background-image: linear-gradient(rgba(69, 64, 61, 0.8)), url('/themeimage/Brown/footerBg.jpg') !important;
    box-shadow: rgba(61, 43, 31,0.8) 10px 10px 10px inset,rgba(61, 43, 31,0.8) -10px -10px 10px inset !important;
}

    #storyBranding h2 {
        color: rgb(245, 222, 179) !important;
        text-shadow: rgba(0,0,0,1) 2px 2px !important;
        transform: scaleY(0);
        opacity: 0;
        animation: fadeins 1s linear forwards;
        animation-timeline: view();
        animation-range: entry 150px;
    }

    #storyBranding h5 {
        letter-spacing: 2px;
        line-height: 30px !important;
        text-shadow: rgba(0,0,0,1) 2px 2px !important;
        transform: scaleY(0);
        opacity: 0;
        animation: fadeins 1s linear forwards;
        animation-timeline: view();
        animation-range: entry 200px;
    }

@keyframes fadeins {

    to {
        opacity: 1;
        transform: scaleY(1);
    }
}

#profileShowcase {
    background-image: linear-gradient(rgba(69, 64, 61, 0.8)), url('/themeimage/Brown/footerBg.jpg');
    box-shadow: rgba(61, 43, 31,0.8) 10px 10px 10px inset,rgba(61, 43, 31,0.8) -10px -10px 10px inset;
}

    #profileShowcase h1 {
        color: rgb(245, 222, 179) !important;
        text-shadow: rgba(0,0,0,1) 2px 2px;
        opacity: 0;
        animation: showcasefade 1s linear forwards;
        animation-timeline: view();
        animation-range: entry 350px;
    }

    #profileShowcase h4 {
        letter-spacing: 2px;
        line-height: 30px !important;
        text-shadow: rgba(0,0,0,1) 2px 2px;
        opacity: 0;
        animation: showcasefade 1s linear forwards;
        animation-timeline: view();
        animation-range: entry 350px;
    }

#showcaseItemContainer {
    opacity: 0;
    animation: showcasefade 1s linear forwards;
    animation-timeline: view();
    animation-range: entry 350px;
}

    @keyframes showcasefade{
        to {
            opacity: 1;
        }
    }

.storyCard {
    background-image: var(--lightBgImg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    box-shadow: rgba(61, 43, 31,1) 7px 7px 8px;
}

.storyCardBtn {
    background: rgba( 166, 123, 91,1);
    color: ghostwhite;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: rgba(255, 255, 255,0.8) 3px 3px 5px;
    border-radius: 5px !important;
    padding: 5px 10px !important;
    font-size: 14px !important;
    text-shadow: rgba(0,0,0,1) 1px 1px;
    border-radius:100px!important
}

    .storyCardBtn:hover {
        background: rgba( 89, 39, 32,1);
        color: ghostwhite;
    }

#twoStoryContainer .storyCard img {
    min-height: 300px !important
}

#twoStoryContainer .storyCard iframe {
    min-height: 300px !important
}

#twoStoryContainer .cardColumn {
    height: 400px !important
}

#threeMainStory .storyCard {
    min-height: 250px
}

    #threeMainStory .storyCard iframe {
        height: 100%
    }

    #threeMainStory .storyCard img {
        height: 100%
    }

#threeSubStory .storyCard {
    min-height: 250px
}

#fourStoryContainer .swiper-wrapper {
    height: 320px
}

#fourStoryContainer .storyCard {
    height: 300px !important
}

.swiper {
    width: 100%;
    height: 100%;
}

.swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
}

.swiper-button-next:after, .swiper-button-prev:after {
    font-size: 25px !important;
    color: ghostwhite !important;
}

.swiperButtonNextOrder:after, .swiperButtonPrevOrder:after {
    font-size: 25px !important;
    color: ghostwhite !important;
}

#fourStoryContainer p {
    color: rgba(61, 43, 31,0.8) !important;
    font-size: 20px !important;
    font-weight: 100 !important;
}

#showcase h1 {
    color: rgb(245, 222, 179) !important;
    text-shadow: rgba(0,0,0,1) 2px 2px
}

#showcase h4 {
    color: white !important;
    text-shadow: rgba(0,0,0,1) 2px 2px
}

#showcaseItemContainer h3 {
    color: rgb(245, 222, 179) !important;
    letter-spacing: 1px !important;
    text-shadow: rgba(0,0,0,1) 2px 2px
}

#showcaseItemContainer p {
    color: ghostwhite !important;
    letter-spacing: 1px !important;
    text-shadow: rgba(0,0,0,1) 2px 1px
}

.iconShowcase {
    color: white !important;
    font-size: 50px !important;
    text-shadow: rgba(0,0,0,1) 3px 3px
}

#profileMaincard {
    background-image: var(--lightBgImg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    box-shadow: rgba(61, 43, 31,1) 7px 7px 8px;
    transform: scale(0);
    opacity: 0;
    animation: cardFade 2s linear forwards;
    animation-timeline: view();
    animation-range: entry 350px;
}

@keyframes cardFade{
    to {
        transform: scale(1);
        opacity: 1
    }
}

    #profileMaincard h4 {
        color: rgb(245, 222, 179) !important;
        letter-spacing: 1px;
        text-shadow: 2px 1px 1px black
    }

    #profileMaincard p {
        color: ghostwhite !important;
        letter-spacing: 1px;
        text-shadow: 2px 1px 1px black
    }

#profileInnerCard {
    background: rgba(0,0,0,0.5);
    box-shadow: rgba(61, 43, 31,1) 4px 4px 4px
}

    #profileInnerCard .btn {
        background-image: var(--lightBgImg);
        border-radius: 50px;
        padding: 4px 10px;
        color: ghostwhite;
        text-shadow: 1px 1px 1px black;
        box-shadow: rgba(0, 0, 0,1) 2px 4px 2px;
        font-size: 17px
    }

        #profileInnerCard .btn:hover {
            transform: scale(1.1);
        }

.grid-sizer {
    width: 100%
}

#profileMainCon, #storyMainCon {
    background-image: linear-gradient(rgba(255, 255, 255, 0.8)), url('/themeimage/Brown/pattern-8249757_1280.png');
}

#storyMainCon {
    min-height: 35vh;
    opacity: 0;
    animation: storyFade 2s linear forwards;
    animation-timeline: view();
    animation-range: entry 350px;
}

@keyframes storyFade {

    to {
        opacity: 1;
    }
}

#firstSectionImgCard {
    background-image: var(--lightBgImg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    box-shadow: rgba(255, 255, 255,1) 2px 2px 10px,rgba(255, 255, 255,1) -2px -2px 10px,rgba(255, 255, 255,1) -2px 2px 10px,rgba(255, 255, 255,1) 2px -2px 10px;
}

.aboutSliderColumn {
    height: 350px
}

#mainCard {
    background-image: var(--lightBgImg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    box-shadow: rgba(61, 43, 31,1) 7px 7px 8px
}

.serviceSubCard {
    background: rgba(0,0,0,0.5);
}

    .serviceSubCard h5 {
        color: rgb(245, 222, 179) !important;
        text-shadow: rgba(0, 0, 0,1) 2px 2px 2px;
    }

    .serviceSubCard p, pre {
        color: rgb(255, 255, 255) !important;
        text-shadow: rgba(0, 0, 0,1) 1px 2px 2px;
    }

    .serviceSubCard .btn {
        background-image: var(--lightBgImg);
        border-radius: 50px;
        padding: 4px 10px;
        color: ghostwhite;
        text-shadow: 1px 1px 1px black;
        box-shadow: rgba(0, 0, 0,1) 2px 4px 2px;
        font-size: 15px
    }

        .serviceSubCard .btn:hover {
            transform: scale(1.1);
        }

.bgDarkWood {
    background-image: var(--darkBgImg);
    background-position: center;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    box-shadow: rgba(61, 43, 31,1) 7px 7px 8px
}

.bgLightWood {
    background-image: var(--lightBgImg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    box-shadow: rgba(61, 43, 31,1) 7px 7px 8px
}

.bgDarkWoodOverlay {
    background: rgba(0,0,0,0.5);
}

.bgLightWoodOverlay {
    background: rgba(0,0,0,0.3);
}

/*about*/
#getToKnowBranding h3, #getToKnowBranding h5,
#aboutContact h3, #aboutContact h5,
#aboutHistory h3, #aboutHistory h5,
#aboutMeet h3, #aboutMeet h5,
#aboutMission h3, #aboutMission h5,
#aboutPartnership h3, #aboutPartnership h5 {
    color: rgba(61,43,31,0.8) !important;
}

#aboutMeet h6 {
    color: ghostwhite !important;
}

#aboutPartnership h6, #aboutPartnership p {
    color: ghostwhite !important;
}

.iPartnershipIcon {
    color: ghostwhite !important;
    text-shadow: 2px 2px 3px black
}

#aboutMeet .imgTeamIcon {
    color: ghostwhite !important;
    text-shadow: 2px 2px 3px black !important
}

#aboutMainPage .btn {
    background-image: var(--lightBgImg);
    border-radius: 50px;
    padding: 10px 20px;
    color: ghostwhite;
    text-shadow: 1px 1px 1px black;
    box-shadow: rgba(0, 0, 0,1) 2px 4px 7px;
    font-size: 20px;
    font-weight: 500 !important
}

    #aboutMainPage .btn:hover {
        transform: scale(1.1);
    }

#contactImgColumn {
    background: rgba( 0, 0, 0,0.3) !important;
}

    #contactImgColumn img {
        opacity: 0.5 !important
    }

#contactMainPage {
    min-height: 80vh !important;
}

    #contactMainPage h5 {
        color: ghostwhite !important;
        text-shadow: 1px 2px 1px black;
    }

    #contactMainPage label {
        color: ghostwhite !important
    }

    #contactMainPage .selectImgBtn {
        background-image: var(--lightBgImg);
        border-color: white !important
    }

    #contactMainPage .btn {
        background-image: var(--lightBgImg);
        border-radius: 50px;
        padding: 5px 10px;
        color: ghostwhite;
        text-shadow: 1px 1px 1px black;
        box-shadow: rgba(0, 0, 0,1) 2px 4px 7px;
        font-size: 14px;
    }

        #contactMainPage .btn:hover {
            transform: scale(1.1) !important
        }

#contactImgColumn h2 {
    text-shadow: 2px 2px 2px black
}

#loginPage {
    min-height: 61.3vh;
}

#loginCard {
    border-radius: 10px !important;
}

    #loginCard h3 {
        color: rgb(245, 222, 179) !important;
        text-shadow: 2px 2px 2px black;
    }

    #loginCard .card-body {
        border-radius: 10px !important;
    }

    #loginCard .bi-eye, .bi-eye-slash {
        color: white !important
    }

    #loginCard .pwLogin {
        border: 0.5px solid saddlebrown !important;
        background-color: saddlebrown !important;
    }

.bi-eye:hover, .bi-eye-slash:hover {
    color: white !important
}

#loginCard .pwLogin:hover {
    border-color: sandybrown !important;
    background-color: sandybrown !important;
}

#loginCard .btn {
    background-image: var(--lightBgImg);
    border-radius: 50px;
    padding: 5px 30px;
    color: ghostwhite;
    text-shadow: 1px 1px 1px black;
    box-shadow: rgba(0, 0, 0,1) 2px 4px 7px;
    font-size: 14px;
}

    #loginCard .btn:hover {
        transform: scale(1.1);
    }

#policyPage .heading2,
#policyStyle p,
#policyStyle .heading1,
#policyStyle .heading3,
#policyStyle strong,
#policyStyle li,
#policyStyle span {
    color: rgba(61,43,31,0.8) !important;
}

#policyStyle a b {
    color: sandybrown !important;
}

    #policyBrownStyle a b:hover {
        color: rgba(61,43,31,1) !important;
    }

.card_ActiveItem {
    color: rgb(245, 222, 179) !important;
}

#providerCardDetails .btn {
    background-image: var(--lightBgImg);
    border-radius: 50px;
    color: ghostwhite;
    text-shadow: 1px 1px 1px black;
    box-shadow: rgba(0, 0, 0,1) 2px 4px 7px;
    font-size: 14px;
}

    #providerCardDetails .btn:hover {
        transform: scale(1.1);
    }

.selectImgBtn {
    background-color: rgba(61,43,31,1) !important;
    border: none !important
}

    .selectImgBtn:hover {
        background-color: rgba(244, 164, 96,1) !important;
        border: none !important
    }

.userDetailsForm input, .userDetailsForm textarea {
    background-color: rgba(61,43,31,0.5) !important;
    border-color: rgba(61,43,31,0.6) !important;
    color: ghostwhite !important;
    text-shadow: 1px 2px 1px black
}

.userDetailsForm label {
    text-shadow: 1px 2px 1px black
}

.customerLiClass .dropdown-item:hover {
    background: rgba(0,0,0,0.5);
}

.chatContainerHeader {
    background: rgba(0,0,0,0.5) !important;
}

.messageContactName, .groupDescription {
    color: ghostwhite !important
}

#chatContainer .contactLabel {
    width: 25px !important;
    height: 25px !important;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px !important;
    border: none !important;
}

    #chatContainer .contactLabel span {
        color: ghostwhite !important
    }


#chatContainer .senderLabel {
    width: 25px !important;
    height: 25px !important;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px !important;
    border: none !important;
    color: ghostwhite !important;
}

    #chatContainer .senderLabel span {
        color: ghostwhite !important;
    }

.messageTextContainer p {
    font-size: 13px !important;
    letter-spacing: 1px !important
}

.customerWindow #chatMenu-Hm i {
    color: ghostwhite !important;
}

.customerWindow #chatMenuContainer {
    background-image: var(--lightBgImg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border: none !important;
    margin: -2px -2px 0px 0 !important
}

.customerWindow .chatIcon {
    color: ghostwhite !important;
    text-shadow: 2px 2px 2px black !important
}

#chatContainerMinimize .messageContactName {
    color: ghostwhite !important;
    text-shadow: 2px 2px 2px black !important
}

#chatContainerMinimize .chatIcon {
    color: ghostwhite !important;
    text-shadow: 2px 2px 2px black !important
}

#orderMenuBtn .btn, #loadMoreOrdersButton .btn {
    background-image: var(--lightBgImg);
    border-radius: 50px;
    color: ghostwhite;
    text-shadow: 1px 1px 1px black;
    box-shadow: rgba(0, 0, 0,1) 2px 4px 5px;
    font-size: 14px;
}

    #orderMenuBtn .btn:hover {
        transform: scale(1.1)
    }

.text-brown {
    color: rgba(61, 43, 31, .8) !important
}

#labelProviderOrders, #labelCustomerOrders {
    text-shadow: 1px 1px 2px black !important
}

input[type="radio"][name="radioUserCart"]:checked {
    background-color: rgba(61, 43, 31, .8) !important
}

html .form-check-input[type=checkbox]:checked {
    background-color: rgba(61, 43, 31, .8) !important;
    border: none !important;
}

.badgeText {
    color: ghostwhite !important
}

.badgeStat.statusActive {
    background-image: var(--lightBgImg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border: none !important;
    text-shadow: 1px 1px 2px black
}

.serviceCard h6 {
    text-shadow: 2px 2px 2px black
}

.serviceCard small {
    text-shadow: 2px 2px 2px black
}

#loadMoreOrdersButton {
    background-image: var(--lightBgImg);
    border-radius: 50px;
    color: ghostwhite;
    text-shadow: 1px 1px 1px black;
    box-shadow: rgba(0, 0, 0,1) 2px 4px 5px;
    font-size: 14px;
    text-shadow: 1px 1px 2px black
}

    #loadMoreOrdersButton:hover {
        transform: scale(1.1)
    }

#emptyOrderContainer #statMessage {
    color: rgba(61, 43, 31, .8) !important
}

#emptyOrderList {
    border-color: rgba(61, 43, 31, 0.2) !important
}

#orderExportBtn {
    background-image: var(--lightBgImg);
    border-radius: 50px;
    color: ghostwhite;
    text-shadow: 1px 1px 1px black;
    box-shadow: rgba(0, 0, 0,1) 2px 4px 5px;
    font-size: 14px;
    text-shadow: 1px 1px 2px black
}

    #orderExportBtn:hover {
        transform: scale(1.1)
    }

#orderBtnContainer .btn {
    background-image: var(--lightBgImg) !important;
    border-radius: 50px !important;
    color: ghostwhite !important;
    text-shadow: 1px 1px 1px black !important;
    box-shadow: rgba(0, 0, 0,1) 2px 4px 5px !important;
    font-size: 14px !important;
    text-shadow: 1px 1px 2px black !important;
    border: none !important;
    margin: 8px 0;
}

    #orderBtnContainer .btn:hover {
        transform: scale(1.1) !important
    }

#btnRejectCancel {
    color: ghostwhite !important;
    border: none !important;
    height: 35px !important;
    font-size: 13px !important
}

#pv-btnContainer .btn {
    background-image: var(--lightBgImg);
    border-radius: 50px;
    color: ghostwhite;
    text-shadow: 1px 1px 1px black;
    box-shadow: rgba(0, 0, 0,1) 2px 4px 5px;
    font-size: 14px;
    text-shadow: 1px 1px 2px black
}

    #pv-btnContainer .btn:hover {
        transform: scale(1.1) !important;
    }

#serviceCardHeader {
    background-image: linear-gradient(rgba(69, 64, 61, 0.4)), url(/themeimage/Brown/footerBg.jpg);
    background-position: center;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.fc .fc-toolbar.fc-header-toolbar {
    background-image: var(--lightBgImg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    box-shadow: rgba(61, 43, 31,1) 7px 7px 8px
}

.fc-prev-button, .fc-next-button {
    background-image: var(--darkBgImg);
    background-position: center;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    box-shadow: rgba(61, 43, 31,1) 7px 7px 8px;
    border: none !important;
    color: ghostwhite !important
}


.fc-todayButton-button, .fc-datePicker-button {
    background-image: var(--darkBgImg);
    background-position: center;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    box-shadow: rgba(61, 43, 31,1) 7px 7px 8px;
    border: none !important;
    color: ghostwhite !important
}

.fc .fc-toolbar.fc-header-toolbar {
    background-color: yellow !important;
}

.fc .fc-day-future {
    background-color: rgba(166, 123, 91,0.6);
}

.fc-day-past {
    background-color: rgba(175, 188, 197,0.5) !important;
    color: ghostwhite !important;
    pointer-events: none !important
}

.nonWorkingDays {
    background-color: rgba(175, 188, 197, 0.5) !important;
    color: ghostwhite !important;
    pointer-events: none !important
}

.fc-day-today {
    background-color: rgba( 159, 129, 112,1) !important
}

.fc .fc-daygrid-day-top .fc-daygrid-day-number {
    color: ghostwhite !important
}

.fc .fc-toolbar-title {
    color: ghostwhite !important;
    text-shadow: 2px 3px 2px black !important;
    font-size: 19px !important
}

.hasOrderEvent {
    background-color: rgba( 159, 129, 112,0.7) !important;
    text-shadow: 1px 2px 1px black !important;
}

.selectedCalendarDate {
    background: rgba(69, 64, 61,0.3) !important;
}

.rentalItem-toggle {
    color: white !important;
    font-size: 18px !important
}

#service-Input .btn {
    background-image: var(--lightBgImg);
    border-radius: 50px;
    color: ghostwhite;
    text-shadow: 1px 1px 1px black;
    box-shadow: rgba(0, 0, 0,1) 2px 4px 5px;
    font-size: 14px;
    text-shadow: 1px 1px 2px black
}

#ServiceRequestCardBody .btn {
    background-image: var(--lightBgImg);
    border-radius: 50px;
    color: ghostwhite;
    text-shadow: 1px 1px 1px black;
    box-shadow: rgba(0, 0, 0,1) 2px 4px 5px;
    font-size: 14px;
    text-shadow: 1px 1px 2px black;
    margin:5px 0;
}

#requestSummaryFooter .btn {
    background-image: var(--lightBgImg);
    border-radius: 50px;
    color: ghostwhite;
    text-shadow: 1px 1px 1px black;
    box-shadow: rgba(0, 0, 0,1) 2px 4px 5px;
    font-size: 14px;
    text-shadow: 1px 1px 2px black
}

.chatDropdownMenuLink .newMessageBadge {
    width: 28px;
    height: 14px;
    position: absolute;
    top: -8px !important;
    left: 90px !important;
    background-color: red !important;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    color: ghostwhite !important;
    font-size: 10px !important;
}

.chatDropdownMenuLink .newMessageBadgeSm {
    top: -4px !important;
    left: 20px !important;
}

.chatDropdownMenuLink i {
    font-size: 25px;
    color: white
}

#sendMessageBtn {
    background-image: var(--lightBgImg) !important;
    color: ghostwhite !important;
}

#cancelUpdateMessageBtn {
    background-image: var(--lightBgImg) !important;
    color: ghostwhite !important;
}

#sitepage {
    background-image: var(--lightBgImg);
    border-radius: 50px;
    color: ghostwhite;
    text-shadow: 1px 1px 1px black;
    box-shadow: rgba(0, 0, 0,1) 2px 4px 5px;
    font-size: 14px;
    text-shadow: 1px 1px 2px black
}

#participantBtnContainer .btn {
    background-image: var(--lightBgImg);
    border-radius: 50px;
    color: ghostwhite;
    text-shadow: 1px 1px 1px black;
    box-shadow: rgba(0, 0, 0,1) 2px 4px 5px;
    font-size: 18px;
    text-shadow: 1px 1px 2px black
}

    #participantBtnContainer .btn:hover {
        transform: scale(1.1)
    }

.svRibbon {
    position: absolute;
    left: -8px;
    top: 40px;
    z-index: 1;
    width: auto;
    height: 35px;
    padding: 0px 15px;
    text-align: right;
    background-color: navajowhite;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    border-bottom-left-radius: 0px
}

    .svRibbon::before, .svRibbon::after {
        content: "";
        position: absolute;
        top: 35px;
        left: 0px;
        width: 8px;
        height: 16px;
        border-bottom-left-radius: 8px
    }

    .svRibbon::before {
        background-color: navajowhite;
    }

    .svRibbon::after {
        background-color: saddlebrown;
        border-top-left-radius: 8px;
    }

.edit-buttons-container .btn {
    background-image: var(--lightBgImg);
    border-radius: 50px;
    color: ghostwhite;
    text-shadow: 1px 1px 1px black;
    box-shadow: rgba(0, 0, 0,1) 2px 4px 5px;
    font-size: 18px;
    text-shadow: 1px 1px 2px black
}

.lSPager {
    background-image: var(--lightBgImg);
}

.naviLink.active {
    background-image: var(--lightBgImg);
    padding: 3px 15px !important;
    border-radius: 100px !important;
    box-shadow: rgba(255,255,255,0.2) 0px 1px 1px,rgba(255,255,255,0.2) 0px -1px 1px,rgba(255,255,255,0.2) 1px 0px 1px,rgba(255,255,255,0.2) -1px 0px 1px;
    border: 1px solid rgba(255, 255, 255,1);
}

.naviLink:hover {
    background-image: var(--lightBgImg);
    padding: 6px 18px !important;
    border-radius: 100px !important;
}

.itemCountLabel {
    background-color: saddlebrown !important;
    color: white !important;
    font-size: 13px !important;
    border: none !important;
}


/*small devices*/
@media screen and (min-width: 577px) and (max-width: 767px) {
    #indexMainColumn h1 {
        font-size: 30px !important;
    }

    .grid-sizer {
        width: 100%
    }

    .imgIframeWrapper {
        width: 100% !important
    }
}

/*Medium devices*/
@media screen and (min-width: 768px) and (max-width: 991px) {

    #indexMainColumn h1 {
        font-size: 35px !important;
    }

    .grid-sizer {
        width: 100%
    }

    .imgIframeWrapper {
        width: 100% !important
    }
}

/*Large devices*/
@media screen and (min-width: 992px) and (max-width: 1199px) {

    #indexMainColumn {
        min-height: 50vh !important;
    }

        #indexMainColumn h1 {
            font-size: 40px !important;
        }

    #storyMainCon {
        min-height: 30vh
    }

    .grid-sizer {
        width: 100%
    }

    .chatDropdownMenuLink .newMessageBadge {
        top: -7px !important;
        left: 65px !important;
    }

    #userDetailsPage{
        min-height:60vh!important
    }

    .imgIframeWrapper {
        width: 50% !important
    }
}

/*X-Large devices*/
@media screen and (min-width: 1200px) and (max-width: 1512px) {
    #indexMainColumn h1 {
        font-size: 42px !important;
    }

    #storyMainCon {
        min-height: 35vh
    }

    .grid-sizer {
        width: 25%
    }

    .imgIframeWrapper {
        width: 50% !important
    }
}

@media screen and (min-width: 1513px) and (max-width: 1896px) {
    #indexMainColumn h1 {
        font-size: 40px !important;
    }

    #storyMainCon {
        min-height: 35vh
    }

    .grid-sizer {
        width: 25%
    }

    .imgIframeWrapper {
        width: 50% !important
    }
}

/*XX-Large devices*/
@media screen and (min-width: 1897px) {
    #indexMainColumn h1 {
        font-size: 45px !important;
    }

    #storyMainCon {
        min-height: 40vh
    }

    .grid-sizer {
        width: 25%
    }

    .imgIframeWrapper {
        width: 50% !important
    }
    
}

#serviceMainPage{
    min-height:53.5vh!important;
}

.login-link{
    color:goldenrod!important
}

.serviceHeaderCard{
    height:20px!important
}

.servicePriceRibbon {
    background-color: #d8bfa7 !important;
}

    .servicePriceRibbon::before {
        background-color: #d8bfa7 !important;
    }

    .servicePriceRibbon::after {
        background-color: #3d2c1b !important;
    }

.servicePriceRibbon small{
    color:var(--masala)!important
}

/*added style*/

#signupMainPage .main_CardHeader, #signupMainPage .main_CardFooter {
    background-image: var(--darkBgImg);
}

    #signupMainPage .main_CardHeader h5 {
        color: whitesmoke;
    }


#signupMainPage .cardItem-2 {
    color: whitesmoke !important;
}

#signupMainPage h6, #signupMainPage p, #signupMainPage label {
    color: white !important
}

#signupMainPage .card-body {
    background-image: var(--lightBgImg);
}

#signupMainPage #signUpForm .card-body {
    background-image: var(--darkBgImg);
}

#signupMainPage .btn {
    background-image: var(--lightBgImg) !important;
    border-radius: 50px !important;
    color: ghostwhite !important;
    text-shadow: 1px 1px 1px black !important;
    box-shadow: rgba(0, 0, 0,1) 2px 4px 5px !important;
    font-size: 14px !important;
    text-shadow: 1px 1px 2px black !important;
    border: none !important;
    margin: 8px 0;
}

    #signupMainPage .btn:hover {
        transform: scale(1.1) !important
    }

#signupMainPage .eulaCardArrow i {
    color: ghostwhite !important
}

#signupMainPage .eulaCheckBox {
    background-color: saddlebrown !important;
    color: var(--masala) !important
}

#signupMainPage .iti__arrow {
    border-top: 4px solid white;
}



#forgotMainPage .main_CardHeader, #forgotMainPage .main_CardFooter {
    background-image: var(--darkBgImg);
    padding: 14px 10px
}

#forgotMainPage h5, #forgotMainPage label {
    color: ghostwhite !important
}

#forgotMainPage .card-body {
    background-image: var(--lightBgImg);
}

#forgotMainPage .btn {
    background-image: var(--lightBgImg) !important;
    border-radius: 50px !important;
    color: ghostwhite !important;
    text-shadow: 1px 1px 1px black !important;
    box-shadow: rgba(0, 0, 0,1) 2px 4px 5px !important;
    font-size: 14px !important;
    text-shadow: 1px 1px 2px black !important;
    border: none !important;
    margin: 8px 0;
}

    #forgotMainPage .btn:hover {
        transform: scale(1.1) !important
    }

#forgotResponsePage {
    min-height:500px;
    display:flex;
    justify-content:center
}

#forgotResponsePage h6, #forgotResponsePage p {
    color:var(--masala)!important;
    letter-spacing:1px
}

#accountProviderPage .main_CardHeader, #accountProviderPage .main_CardFooter {
    background-image: var(--darkBgImg);
}

#accountProviderPage h6, #accountProviderPage label, #accountProviderPage a, #accountProviderPage span {
    color: ghostwhite !important
}

#accountProviderPage .card-body {
    background-image: var(--lightBgImg);
}

#accountProviderPage input {
    background-color: transparent !important;
    border-color: #efdecd;
    color: ghostwhite !important
}

#accountProviderPage .btn {
    background-image: var(--lightBgImg) !important;
    border-radius: 50px !important;
    color: ghostwhite !important;
    text-shadow: 1px 1px 1px black !important;
    box-shadow: rgba(0, 0, 0,1) 2px 4px 5px !important;
    font-size: 14px !important;
    text-shadow: 1px 1px 2px black !important;
    border: none !important;
    margin: 8px 0;
}

    #accountProviderPage .btn:hover {
        transform: scale(1.1) !important
    }

#accountProviderPage .input-group .biEye, #accountProviderPage .input-group .biEyeSlash {
    background-image: var(--darkBgImg) !important
}

#ResetPage h6{
    color:var(--masala)!important
}

#ResetPage h4 {
    color: ghostwhite !important
}

#ResetPage label {
    color: ghostwhite !important
}

#ResetPage .main_CardHeader, #ResetPage .main_CardFooter {
    background-image: var(--darkBgImg);
}

#ResetPage .card-body {
    background-image: var(--lightBgImg);
}

#ResetPage .input-group .biEye, #ResetPage .input-group .biEyeSlash {
    background-image: var(--darkBgImg) !important
}

#ResetPage .bi-question-circle-fill {
    color: var(--masala) !important
}

#ResetPage .btn {
    background-image: var(--lightBgImg) !important;
    border-radius: 50px !important;
    color: ghostwhite !important;
    text-shadow: 1px 1px 1px black !important;
    box-shadow: rgba(0, 0, 0,1) 2px 4px 5px !important;
    font-size: 14px !important;
    text-shadow: 1px 1px 2px black !important;
    border: none !important;
    margin: 8px 0;
}

    #ResetPage .btn:hover {
        transform: scale(1.1) !important
    }

#ResetPage .loginlink:hover {
    color: white;
    background: var(--masala);
    border: none;
}

#ResetPage input {
    background-color: transparent !important;
    border-color: #efdecd;
    color: ghostwhite !important
}

#ResetPage{
    display:flex;
    align-items:center;
    justify-content:center

}

#ResetConfirmationPage .main_CardHeader, #ResetConfirmationPage .main_CardFooter {
    background-image: var(--darkBgImg);
}

#ResetConfirmationPage .card-body {
    background-image: var(--lightBgImg);
}

#ResetConfirmationPage h5, #ResetConfirmationPage label {
    color: white;
}

#ResetConfirmationPage input {
    background-color: transparent !important;
    border-color: #efdecd;
    color: ghostwhite !important
}

#ResetConfirmationPage .btn {
    background-image: var(--lightBgImg) !important;
    border-radius: 50px !important;
    color: ghostwhite !important;
    text-shadow: 1px 1px 1px black !important;
    box-shadow: rgba(0, 0, 0,1) 2px 4px 5px !important;
    font-size: 14px !important;
    text-shadow: 1px 1px 2px black !important;
    border: none !important;
    margin: 8px 0;
}

    #ResetConfirmationPage .btn:hover {
        transform: scale(1.1) !important
    }

#requestConfirmationResponsePage label, #requestConfirmationResponsePage small {
    color: var(--masala) !important;
}

#signupResponsePage h6, #signupResponsePage p {
    color: var(--masala)!important;
    letter-spacing:1px;
    line-height:2
}

#verifyPage .main_CardHeader, #verifyPage .main_CardFooter {
    background-image: var(--darkBgImg);
}

#verifyPage .card-body {
    background-image: var(--lightBgImg);
}

#verifyPage h5, #verifyPage label {
    color: ghostwhite
}

#verifyPage input {
    background-color: transparent !important;
    border-color: #efdecd;
    color: ghostwhite !important
}

#verifyPage .btn {
    background-image: var(--lightBgImg) !important;
    border-radius: 50px !important;
    color: ghostwhite !important;
    text-shadow: 1px 1px 1px black !important;
    box-shadow: rgba(0, 0, 0,1) 2px 4px 5px !important;
    font-size: 14px !important;
    text-shadow: 1px 1px 2px black !important;
    border: none !important;
    margin: 8px 0;
}

    #verifyPage .btn:hover {
        transform: scale(1.1) !important
    }

#confirmPage h6{
    color:var(--masala);
}

#confirmPage h5, #confirmPage label {
    color: var(--white);
}

#confirmPage .main_CardHeader, #confirmPage .main_CardFooter {
    background-image: var(--darkBgImg);
}

#confirmPage .card-body {
    background-image: var(--lightBgImg);
}

#confirmPage .input-group .biEye, #confirmPage .input-group .biEyeSlash {
    background-image: var(--darkBgImg) !important
}

#confirmPage input {
    background-color: transparent !important;
    border-color: #efdecd;
    color: ghostwhite !important
}

#confirmPage .bi-question-circle-fill {
    color: var(--masala) !important
}

#confirmPage .btn {
    background-image: var(--lightBgImg) !important;
    border-radius: 50px !important;
    color: ghostwhite !important;
    text-shadow: 1px 1px 1px black !important;
    box-shadow: rgba(0, 0, 0,1) 2px 4px 5px !important;
    font-size: 14px !important;
    text-shadow: 1px 1px 2px black !important;
    border: none !important;
    margin: 8px 0;
}

    #confirmPage .btn:hover {
        transform: scale(1.1) !important
    }

#brownTloginPage .card {
    background-image: var(--lightBgImg) !important;
}

#brownTloginPage .card-body {
    background-image: var(--darkBgImg) !important;
}

#brownTloginPage .btn {
    background-image: var(--lightBgImg) !important;
    border-radius: 50px !important;
    color: ghostwhite !important;
    text-shadow: 1px 1px 1px black !important;
    box-shadow: rgba(0, 0, 0,1) 2px 4px 5px !important;
    font-size: 14px !important;
    text-shadow: 1px 1px 2px black !important;
    border: none !important;
    margin: 8px 0;
}

    #brownTloginPage .btn:hover {
        transform: scale(1.1) !important
    }

#brownTloginPage .biEye, #brownTloginPage .biEyeSlash {
    background-image: var(--darkBgImg) !important;
    height:25px;
    width:25px;
    border-radius:100px;
    display:flex;
    justify-content:center
}

#brownHomeTerms p, #brownHomeTerms h6 {
    color: rgba(61, 43, 31, .8) !important
}

#modalRequestCode .modal-header, #modalRequestCode .card-footer {
    background-image: var(--darkBgImg) !important;
}

#modalRequestCode .modal-body {
    background-image: var(--lightBgImg) !important;
}

#modalRequestCode #requestCodeLabel{
    color:ghostwhite!important;
}

#modalRequestCode label {
    color: ghostwhite !important;
}

#modalRequestCode .btn {
    background-image: var(--lightBgImg) !important;
    border-radius: 50px !important;
    color: ghostwhite !important;
    text-shadow: 1px 1px 1px black !important;
    box-shadow: rgba(0, 0, 0,1) 2px 4px 5px !important;
    font-size: 14px !important;
    text-shadow: 1px 1px 2px black !important;
    border: none !important;
    margin: 8px 0;
}

#modalRequestCode .btn:hover {
    transform:scale(1.1)
}

#modalRequestCode .card-footer:last-child{
    border-radius:0!important
}

#modalRequestCode .modal-header {
    border: 0 !important
}

#modalRequestCode #onetimeCode-container small, #modalRequestCode #onetimeCode-container span {
    color: ghostwhite !important
}




#modalOneTimeSignup .modal-header, #modalOneTimeSignup .card-footer {
    background-image: var(--darkBgImg) !important;
}

#modalOneTimeSignup .modal-body {
    background-image: var(--lightBgImg) !important;
}

#modalOneTimeSignup .card-footer:last-child {
    border-radius: 0 !important
}

#modalOneTimeSignup .modal-header {
    border: 0 !important
}

#modalOneTimeSignup label {
    color:ghostwhite;
}

#modalOneTimeSignup .btn {
    background-image: var(--lightBgImg) !important;
    border-radius: 50px !important;
    color: ghostwhite !important;
    text-shadow: 1px 1px 1px black !important;
    box-shadow: rgba(0, 0, 0,1) 2px 4px 5px !important;
    font-size: 14px !important;
    text-shadow: 1px 1px 2px black !important;
    border: none !important;
    margin: 8px 0;
}

#modalOneTimeSignup .btn:hover {
    transform:scale(1.1);
}

#modalOneTimeSignup .bi-arrow-down-circle-fill {
    color: rgba(69, 64, 61,0.6);
}

#modalOneTimeUserCreated .modal-header, #modalOneTimeUserCreated .card-footer {
    background-image: var(--darkBgImg) !important;
}

#modalOneTimeUserCreated .modal-body {
    background-image: var(--lightBgImg) !important;
}

#modalOneTimeUserCreated label {
    color: ghostwhite;
}

#modalOneTimeUserCreated .btn {
    background-image: var(--lightBgImg) !important;
    border-radius: 50px !important;
    color: ghostwhite !important;
    text-shadow: 1px 1px 1px black !important;
    box-shadow: rgba(0, 0, 0,1) 2px 4px 5px !important;
    font-size: 14px !important;
    text-shadow: 1px 1px 2px black !important;
    border: none !important;
    margin: 8px 0;
}

    #modalOneTimeUserCreated .btn:hover {
        transform: scale(1.1);
    }

#modalOneTimeUserCreated .modal-header, #modalOneTimeUserCreated .card-footer {
    background-image: var(--darkBgImg) !important;
}

#modalOneTimeUserCreated .modal-header, #modalOneTimeUserCreated .card-footer {
    background-image: var(--lightBgImg) !important;
}

    #modalOneTimeUserCreated .card-footer:last-child {
        border-radius: 0 !important
    }

#modalOneTimeUserCreated .modal-header {
    border: 0 !important
}

#modalOneTimeUserCreated label {
    color: ghostwhite;
}

#modalOneTimeUserCreated .btn {
    background-image: var(--lightBgImg) !important;
    border-radius: 50px !important;
    color: ghostwhite !important;
    text-shadow: 1px 1px 1px black !important;
    box-shadow: rgba(0, 0, 0,1) 2px 4px 5px !important;
    font-size: 14px !important;
    text-shadow: 1px 1px 2px black !important;
    border: none !important;
    margin: 8px 0;
}

    #modalOneTimeUserCreated .btn:hover {
        transform: scale(1.1);
    }

#userPasswordResetMdl .btn {
    background-image: var(--lightBgImg) !important;
    border-radius: 50px !important;
    color: ghostwhite !important;
    text-shadow: 1px 1px 1px black !important;
    box-shadow: rgba(0, 0, 0,1) 2px 4px 5px !important;
    font-size: 14px !important;
    text-shadow: 1px 1px 2px black !important;
    border: none !important;
    margin: 8px 0;
}

#userPasswordResetMdl .btn:hover {
    transform: scale(1.1);
}

#signupMainPage .terms-header {
    color: white !important;
}

#signupMainPage .terms-content {
    color: white !important;
    line-height: 1.5 !important;
}
    #signupMainPage .terms-content b {
        color: white !important;
    }
    #signupMainPage .terms-content span {
        color: white !important;
    }

#modalOneTimeSignup .terms-header {
    color: rgba(61, 43, 31, .8) !important;
}

#modalOneTimeSignup .terms-content {
    color: rgba(61, 43, 31, .8) !important;
    line-height: 1.5 !important;
}

    #modalOneTimeSignup .terms-content b {
        color: rgba(61, 43, 31, .8) !important;
    }

    #modalOneTimeSignup .terms-content span {
        color: rgba(61, 43, 31, .8) !important;
    }

#brownHomeTerms .terms-header {
    color: rgba(61, 43, 31, .8) !important;
}

#brownHomeTerms .terms-content {
    color: rgba(61, 43, 31, .8) !important;
    line-height: 1.5 !important;
}

    #brownHomeTerms .terms-content b {
        color: #f4a460 !important;
    }

    #brownHomeTerms .terms-content span {
        color: #f4a460 !important;
    }

#orderPaymentList.dataTable thead th {

}

#orderPaymentList.dataTable tbody td {
    background-image: var(--darkBgImg);
    background-position: center;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    box-shadow: rgba(61, 43, 31,1) 7px 7px 8px; 
    color: white !important;
}

.bgBrownBtn {
    background-image: var(--lightBgImg);
    border-radius: 50px;
    color: ghostwhite;
    text-shadow: 1px 1px 1px black;
    box-shadow: rgba(0, 0, 0,1) 2px 4px 5px;
    font-size: 14px;
    text-shadow: 1px 1px 2px black
}

    .bgBrownBtn:hover {
        transform: scale(1.1)
    }

.mainNewsFeed-wrapper {
    overflow: hidden !important;
}

.mainNewsFeed-floatContainer {
    display: block !important;
    overflow: hidden !important;
}

.mainNewsFeed-imgContainer {
    float: right !important;
    width: 50% !important;
    margin-right: 0px !important;
    margin-bottom: 0px !important;
}

.mainNewsFeed-textContainer {
    display: block !important;
}

@media (max-width: 768px) {
    .mainNewsFeed-imgContainer {
        float: none !important;
        width: 100% !important;
        margin-right: 0 !important;
    }

    .mainNewsFeed-textContainer {
        display: block !important;
    }
}

.mainNewsFeedContent * {
    color: white !important;
    margin-bottom: unset;
    font-family: var(--questrial) !important;
    font-size: calc(13px + .13vw) !important;
}

#fourProfileContainer p, #oneProfileContainer p, #threeProfileContainer p {
    text-align: center !important;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.subNewsFeedItemExtended h6, .subNewsFeedItemExtended p, .subNewsFeedItemExtended small {
    color: ghostwhite !important
}

.lSAction > a {
    opacity: 1;
}

#oneImgGallery {
    height: 400px !important;
}

#twoImgGallery {
    height: 350px !important;
}

#threeImgGallery {
    height: 260px !important;
}

#threeImgGalleryDesc {
    height: 120px !important;
    overflow-y: hidden !important;
}

#fourImgGallery {
    height: 300px !important;
}

/*Iphone SE*/
/*Iphone 12 pro*/
/*Samsung Galaxy s8+*/
@media (min-width: 360px) and (max-width: 390px) {
    #oneImgGallery {
        height: 180px !important;
    }

    #twoImgGallery {
        height: 170px !important;
    }

    #threeImgGallery {
        height: 180px !important;
    }

    #fourImgGallery {
        height: 200px !important;
        width: 100% !important;
    }

    .lSAction > a {
        margin-top: -70px;
    }
}

/*Iphone XR*/
/*Iphone 14 pro max*/
/*Samsung Galaxy S20 ultra*/
@media (min-width: 410px) and (max-width: 460px) {
    #oneImgGallery {
        height: 190px !important;
    }

    #twoImgGallery {
        height: 170px !important;
    }

    #threeImgGallery {
        height: 200px !important;
    }

    #fourImgGallery {
        height: 210px !important;
        width: 100% !important;
    }

    .lSAction > a {
        margin-top: -70px;
    }
}

/* iPad Landscape + Laptops (and even large iPads in portrait) */
@media (min-width: 768px) and (max-width: 1680px) {

 /*   #oneImgGallery {
        height: 200px; 
        object-fit: cover; 
    }*/

    #twoImgGallery {
        height: 170px !important;
    }

    #threeImgGallery {
        height: 170px !important;
    }


    #fourImgGallery {
        height: 220px !important;
        width: 100% !important;
    }

    .lSAction > a {
        margin-top: -70px;
    }
}