*{
    font-family: SF Pro Text,SF Pro Icons,Helvetica Neue,Helvetica,Arial,sans-serif;
    
}

.font-family-revert{
    font-family: revert !important;
}

.line-height-inherit{
    line-height: inherit !important;
}

.faq-button{
    background: none !important;
    color: inherit !important;
    box-shadow: none !important;
}
.faq-button:focus{
    box-shadow: none !important;
}

.faq-button:not(.collapsed){
    box-shadow: none !important;
}

.property-name div{    
    background: rgba(50, 70, 80, 0.7) !important;
}

.property:hover .property-name {
    display: none !important;
}
.property:hover .property-details {
    display:block !important;
}

.professional-details:hover div {
    visibility: visible !important;
}

.text-webkit-center{
    text-align: -webkit-center !important;
}




/* For Service page */
/* .accordion-button:not(.collapsed) {
    color: inherit !important; 
    background-color: inherit !important;
    box-shadow: none;
}

.accordion-button::after{
    background-color: #e93e3e;
    border-radius: 50%;
} */


/* 

.service_carousel-container {
    display: flex;
    align-items: center;
    overflow: hidden;
    width: 100%;
    position: relative;
}

.service_carousel {
    display: flex;
    transition: transform 0.5s ease;
    will-change: transform;
}

.service_carousel-item {
    min-width: 50%; /* Adjust based on how many items you want to show */
    /* max-width: 50%;  */
    /* margin: 0 5px; */
    /* background-color: #007BFF; */
    /* color: white; */
    /* padding: 20px; */
    /* border-radius: 5px; */
    /* text-align: center; */
/* } */
/*
@media only screen and (max-width: 1023px) {
    .service_carousel-item {
        min-width: 25%; 
        max-width: 5%; comment
    }
  }

.service_carousel-button {
    background-color: rgba(255, 255, 255, 0.8);
    border: none;
    cursor: pointer;
    padding: 10px;
    border-radius: 5px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
}

.service_carousel-button.left {
    left: 10px;
}

.service_carousel-button.right {
    right: 10px;
}

.service_indicators {
    text-align: center;
    margin-top: 10px;
}

.service_indicator {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin: 0 5px;
    background-color: #ccc;
    border-radius: 50%;
    cursor: pointer;
}

.service_indicator.active {
    background-color: #FE0000;
}
 */






/* For Service page */

.homebanner{
    background-image: url(/static/images/User/IndexBanner.webp);
}
.aboutusbanner{
    background-image: url(/static/images/User/AboutBanner.webp);
}
.servicebanner{
    background-image: url(/static/images/User/ServiceBanner.webp);
}

.background-repeat-round{
    background-repeat: round;
}

.background-size-cover{
    background-size: cover;
}

.banner{
    background-size: cover;
    /* background-repeat: contain ; */
}

/* For Banner */
@media only screen and (min-width: 1024px) { 

    .banner{
        background-size: cover;
        background-repeat:no-repeat ;
        min-height: 500px;
    }

    .banner-overlay{
        /* min-height: 500px; */
    }
}

.gradient-overlay{
    /* Blue Overlay */
    /* background:rgba(29, 27, 78, 0.5); */
    /* Black Overlay */
    background: rgba(50, 70, 80, 0.5);



    /* background: rgba(50, 70, 80, 0.7); */
    /* background: rgb(49 86 105 / 70%); */
    overflow: hidden;
    height: 100%;
}

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

/* Button Animations  */
/* @keyframes whitebutton_animation {
    from {background-color: transparent !important; color: #ffffff !important; font-weight: normal;}
    to {background-color: #ffffff !important; color: #111111 !important; font-weight: bold;}
  } */

.navhover:hover{
    color: #EF5B5B !important;
    
}
.redhover:hover{
    color: #FE0000 !important;
}

.whitebgblackbutton:hover{
    background-color: #ffffff !important;
    color: #111111 !important;
    font-weight: bold;    
    transition: width 2s;
}

.blackborderhover:hover{    
    border: solid #111111 !important;
}



.whitebgredbutton:hover{
    background-color: #ffffff !important;
    color: #FE0000 !important;
    font-weight: bold;    
    transition: width 2s;
    border: solid #FE0000 !important;
}


.redbgwhitehover:hover{
     background-color: #FE0000 !important;
    color: #ffffff !important;
    /* border: solid #FE0000; */
    /* padding: 3px; */
    /* padding-inline: 5px; */
    border-radius: var(--bs-border-radius-pill) !important;
    font-weight: bold;    
    /* transition: width 2s; */

}

.redbgwhitehover:hover i{
    color: #ffffff !important;
}

.redbgwhitehover:hover span{
    color: #ffffff !important;
}


/* Button Animations  */





/* Positions */
.left-40per{
    left: 40% !important;
}
.left-75per{
    left: 75% !important;
}

@media only screen and (min-width: 768px) { 
    .left-lg-25per{
        left: 25% !important;
    }
}
/* Padding */

.pt-25per{
    padding-top: 25% !important;
}
.pt-15per{
    padding-top: 15% !important;
}
.pb-25per{
    padding-bottom: 25% !important;
}



.ms-6{    
    margin-left: 4rem !important;
}

.mt-n2 {
    margin-top: -1.25rem !important;
}

.mt-n4 {
    margin-top: -3.25rem !important;
}

.mt-n5 {
    margin-top: -4.25rem !important;
}

.mt-n7 {
    margin-top: -6.25rem !important;
}

.mt-n10 {
    margin-top: -9.25rem !important;
}

.me-n4 {
    margin-right: -3.25rem !important;
}

.ms-n18 {
    margin-left: -17.25rem !important;
}

.ms-n3 {
    margin-left: -2.25rem !important;
}

.ms-n4 {
    margin-left: -3.25rem !important;
}

.ms-n25p{
    margin-left: -25% !important;
}

@media only screen and (min-width: 768px) {    
    .ms-md-n25per{
        margin-left: -25% !important;
    } 
    .ms-md-n50per{
        margin-left: -50% !important;
    }
}

@media only screen and (min-width: 1024px) {    
    .ms-md-11{
        margin-left: 9rem !important;
    }
}



.font-impact{
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif !important;
}
.font-dangrek{
    font-family: "Dangrek", sans-serif !important;
}
.fw-300{
    font-weight: 300 !important;
}

.fs-xxxlarge{
    font-size: xxx-large !important;
}

.fs-small{
    font-size: small !important;
}

.fs-x-small{
    font-size: x-small !important;
}

@media only screen and (min-width: 1024px) {    
    .fs-md-1{
        font-size: calc(1.375rem + 1.5vw) !important;
    }
}

.object-fit-cover{
    object-fit: cover !important;
}

.object-fit-contain{
    object-fit: contain !important;
}



/* Width */

@media only screen and (min-width: 768px) {
    .w-md-50{
        width: 50% !important;
    }
}

.min-w-available {
    min-width: -webkit-fill-available !important;
}
.min-w-max-content {
    min-width:max-content !important;
}
.min-w-fit-content {
    min-width:fit-content !important;
}
.max-w-available {
    max-width: -webkit-fill-available !important;
}

.mw-maxcontent {
    min-width: max-content !important;
}

.maxw-300px {
    max-width: 300px !important;
}

.maxw-150px {
    max-width: 150px !important;
}

.maxw-100px {
    max-width: 100px !important;
}

.maxw-50px {
    max-width: 50px !important;
}

.maxw-70px {
    max-width: 70px !important;
}

.w-15p {
    width: 15% !important;
}

.w-20p {
    width: 20% !important;
}

.w-100px {
    width: 100px !important;
}

.h-100px {
    height: 100px !important;
}

.h-15p {
    height: 15% !important;
}

.h-20p {
    height: 20% !important;
}

.h-100 {
    height: 100% !important;
}

.maxh-100px {
    max-height: 100px !important;
}

.maxh-300px {
    max-height: 300px !important;
}

.maxh-350px {
    max-height: 350px !important;
}

.maxh-200px {
    max-height: 200px !important;
}

.maxh-250px {
    max-height: 250px !important;
}

.maxh-400px {
    max-height: 400px !important;
}


.maxh-750px {
    max-height: 750px !important;
}

.maxh-500px {
    max-height: 500px !important;
}

.h-300px {
    height: 300px !important;
}

.w-maxcontent {
    width: max-content !important;
}

.w-fit {
    width: fit-content !important;
}

.w-available {
    width: -webkit-fill-available !important;
}

.min-w-15{
    min-width: 15%;
}

.min-w-50{
    min-width: 50%;
}

.max-w-300{
    max-width: 300px;
}

.max-w-200{
    max-width: 200px !important;
}

.max-w-250{
    max-width: 250px !important;
}

.w-inherit{
    width: inherit;
}

.max-w-inherit{
    max-width: inherit;
}

.h-inherit{
    height: inherit;
}

.h-fit {
    height: fit-content !important;
}


.minh-available {
    min-height: -webkit-fill-available !important;
}

.h-available {
    height: -webkit-fill-available !important;
}

.h-30vw{
    height: 30vw !important;
}



@media only screen and (max-width: 1023px) {
    .h-md-40vw{
        height: 40vw !important;
    }
    .maxw-md-300px{
        max-width: 300px;
    }
}

@media only screen and (min-width: 768px) {
    .maxh-md-none {
        max-height: none !important;
    }

}


.min-h-100per{
    min-height: 100% !important;
}

.min-h-400{
    min-height: 400px !important;
}

.min-h-300{
    min-height: 300px !important;
}

.min-h-250{
    min-height: 250px !important;
}
.min-h-200{
    min-height: 200px !important;
}

.pinkbg{
    background-color: #fed4d4;
}

.darkpinkbg{
    background-color: #f9dede;
}


.purpleyellowgradient{
    background: linear-gradient(45deg, #DCD5FE, #FCFFA2);
}

.purpleredgradient{
    background: linear-gradient(45deg, #8E0090, #C82438, #C02601);
}

.redbluegradient{
    background: linear-gradient(180deg, #FFECEC, #E7EFFE);
}

.redyellowpinkgradient{
background: linear-gradient(180deg, #ED4F2D, #EE8F52, #FF6B85);
}

.bluegradient:hover{
    background: linear-gradient(180deg, #d8e6ec, #232d75);
}

.orangegradient{    
    background: linear-gradient(180deg, #F1E9F7, #FEECEC);
}




.darkgrayborder{
    border: #555555 !important;
}

.redbg{
    background-color: #FE0000;
}

.redborder{
    border-color: #FE0000 !important;
}

.redtext{
    color: #FE0000;
}

.graytext{
    color: #555555 !important;
}

.grayborder{
    border-color: #555555 !important;
}

.graybg{
    background-color: #827474 !important;
}

.lightgraybg{
    background-color: #f3f3f3;
}

.darkgraybg{
    background-color: #555555 !important;
}

.darkgraytext{
    color: darkgray !important;
}

.lightpinkbg{
    background-color: #fcf5f5;
}

.lightbluebg{
    background-color: #e5e9f9;
}

.bg-black{
    background-color: #111111;
}