.btn-badge {
    background: repeating-linear-gradient(90deg, #8e24aa, #8e24aa 10px, #fafafa 10px, #fafafa 600px);
    text-align: center;
}

.carousel-item {
    margin-top: -60px !important;
    min-height: 300px !important;
    overflow: hidden !important;
    background: no-repeat center center scroll !important;
    -webkit-background-size: cover !important;
    -moz-background-size: cover !important;
    -o-background-size: cover !important;
    background-size: cover !important;
}
.carousel-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 43% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 10 !important; /* Higher than carousel content */
    color: white !important; /* Ensure text is visible */
}

.carousel-inner {
    position: relative !important;
}

.image_carousel {
    /* background-size:cover; */
    /* background-position: center; */
    height: 100vh !important; /* Full-screen height for carousel */
    object-fit: contain !important;
    background-position: bottom !important;
}




.text_area_paragraph {
    white-space: pre-wrap;
    overflow-wrap: break-word;
}

.dashboard_text {
    font-weight: 900;
    font-size: 45px;
    line-height: 45px;
    margin-top: 40%;
}

.text-limited {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.screen_height {
    height: 85vh !important;
}

.image_home {
    margin-top: 125px;
    height: 560px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: auto;
}


.mt-inverse-2 {
    margin-top: -20px;
}

.h7 {
    font-size: 10px;
}

.text_bold {
    font-weight: 900;
}

.text_1 {
    font-size: 14px;
}

.capitalize {
    text-transform: capitalize
}

.height_bg {
    height: 100vh;
}

.icon-primary {
    color: #8e24aa
}

.mb-container-pages {
  margin-top: -15% !important;
}

.page-box-title {
  font-size:2vw;
  text-transform:uppercase;
  margin-top: 2px;
  margin-bottom: 2px;
}

.page-header-box {
  padding: 5px !important;
}

@media only screen and (max-width: 320px) and (min-width: 0px) {
    .dashboard_text {
        font-size: 20px;
        margin-top: 0%;
        margin-bottom: 100px;
        margin-top: 5%;

        line-height: 25px;
    }

    .mb-container {
        padding-bottom: 200px !important;
    }

    .height_bg {
        height: 100vh;
    }

    .image_home {
        height: 325px;
        margin-left: 25%;
    }

    .btn-mobile {
        background-color: #485494 !important;
    }

    .image_carousel {
        margin-bottom: 25%;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        background-position: right top;
        background-image: url('../img/home/mobile.jpg') !important;
    }
}


@media only screen and (max-width: 576px) and (min-width: 321px) {
    .dashboard_text {
        font-size: 24px;
        margin-top: 50%;
        line-height: 30px;
    }

    .screen_height {
        height: 100vh !important
    }

    .image_home {
        height: 390px;
        margin-left: 25%;
    }

    .image_carousel {
        margin-bottom: 25%;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        background-position: right top;
        background-image: url('../img/home/mobile.jpg') !important;
    }

    .btn-mobile {
        background-color: #485494 !important;
    }

    .login-page .container {
        padding-top: 25px !important;
    }

    .off-canvas-sidebar .page-header>.container {
        padding-bottom: 50px;
    }

    .height_bg {
        height: 100vh;
    }

    .footer_adjust {
        height: 21vh !important;
    }
}

@media only screen and (max-width: 810px) and (min-width: 577px) {
    .login-page .container {
        padding-top: 50px !important;
    }

    .dashboard_text {
        font-size: 35px;
        margin-top: 40%;
    }

    .image_home {
        height: 490px;
        width: auto;
    }

    .image_carousel {
        margin-bottom: -2.6%;
        background-size: 90% 60%;
        background-repeat: no-repeat;
        background-position: right center;
    }

    .off-canvas-sidebar .page-header>.container {
        padding-bottom: 0px;
    }
}

@media only screen and (min-width: 890px) and (min-height:900px) {
    .dashboard_text {
        margin-top: 40%;
    }

    .height_bg {
        height: 100vh;
    }

    .image_carousel {
        background-size: 90% 60%;
        background-repeat: no-repeat;
        background-position: right center;
    }
}

@media only screen and (min-width: 890px) and (max-width: 1500px) and (max-height:900px) {
    .image_home {
        height: 575px;
        width: auto;
    }

    .image_carousel {
        background-size: 90% 77%;
        background-repeat: no-repeat;
        background-position: right center;
    }
}

@media only screen and (min-width: 1600px) and (max-width: 5200px) {
    .image_home {
        margin-bottom: -400px;
        height: 720px;
    }

    .image_carousel {
        background-size: 80% 80%;
        background-repeat: no-repeat;
        background-position: right center;
    }
}

@media only screen and (min-width:1200px) {
    .dashboard_text {
        margin-top: 40%;
    }

    .footer_adjust {
        height: 12vh !important;
    }
}



@media only screen and (min-width: 800px) and (min-height:0px) and (max-height:450px) {

    .image_home {
        height: 450px;
    }

    .image_carousel {
        background-size: 80% 60%;
        background-repeat: no-repeat;
        background-position: right center;
    }

    .footer_adjust {
        height: 35vh !important;
    }
}

a {
    color: #bc327e;
    text-decoration: none;
    background-color: transparent;
    -webkit-text-decoration-skip: objects;
}

a:hover {
    color: #9c27b0;
    text-decoration: underline;
}

.bg-brand {
    background-color: #d1378c !important;
}

a.bg-brand:hover, a.bg-brand:focus, button.bg-brand:hover, button.bg-brand:focus {
    background-color: #bc327e !important;
}

.card .card-header-brand .card-icon, .card .card-header-brand .card-text, .card .card-header-brand:not(.card-header-icon):not(.card-header-text), .card.bg-brand, .card.card-rotate.bg-brand .front, .card.card-rotate.bg-brand .back {
    background: linear-gradient(60deg, #d1378c, #bc327e);
}

.btn-link {
    font-weight: 400;
    color: #d1378c;
    background-color: transparent;
}

.btn-link:hover {
    color: #9c27b0;
    text-decoration: underline;
    background-color: transparent;
    border-color: transparent;
}

.btn-link:focus, .btn-link.focus {
    text-decoration: underline;
    border-color: transparent;
    box-shadow: none;
}

.btn-link:disabled, .btn-link.disabled {
    color: #999999;
}

.btn.btn-brand.btn-link {
    background-color: transparent;
    color: #bc327e;
    box-shadow: none;
}

.btn.btn-brand.btn-link:hover, .btn.btn-brand.btn-link:focus, .btn.btn-brand.btn-link:active {
    background-color: transparent;
    color: #bc327e;
}

.btn-brand {
    color: #ffffff;
    background-color: #bc327e;
    border-color: #bc327e;
    box-shadow: none;
}

.btn-outline-brand {
    color: #d1378c;
    background-color: transparent;
    background-image: none;
    border-color: #d1378c;
    border: 3px solid;
    padding: 10px 25px 10px 25px;
    border-radius: 20px;
}

.btn-outline-brand:hover {
    color: #ffffff;
    background-color: #d1378c;
    border-color: #d1378c;
}

.btn-outline-brand:focus, .btn-outline-brand.focus {
    box-shadow: 0 0 0 0.2rem rgba(33, 150, 243, 0.5);
}

.btn-outline-brand.disabled, .btn-outline-brand:disabled {
    color: #d1378c;
    background-color: transparent;
}

.btn-outline-brand:not(:disabled):not(.disabled):active, .btn-outline-brand:not(:disabled):not(.disabled).active, .show>.btn-outline-brand.dropdown-toggle {
    color: #ffffff;
    background-color: #d1378c;
    border-color: #d1378c;
}

.btn-outline-brand:not(:disabled):not(.disabled):active:focus, .btn-outline-brand:not(:disabled):not(.disabled).active:focus, .show>.btn-outline-brand.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.2rem rgba(33, 150, 243, 0.5);
}

.copyright {
  min-width:30% !important;
}

.text-transform-none {
  text-transform: none !important;
}

.pagination a {
  color: #000000;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
  transition: background-color .3s;
  border-radius: 4px !important;
}

.pagination a.active {
  background-color: #d1378c;
  color: #ffffff;
}

.pagination a:hover:not(.active) {background-color: #ddd;}

.btn-file {
  position: relative;
  overflow: hidden;
}
.btn-file input[type=file] {
  position: absolute;
  top: 0;
  right: 0;
  min-width: 100%;
  min-height: 100%;
  font-size: 100px;
  text-align: right;
  filter: alpha(opacity=0);
  opacity: 0;
  outline: none;
  background: white;
  cursor: inherit;
  display: block;
}

.mt-6 {
  margin-top: 6% !important;
}

.mt-8 {
  margin-top: 8% !important;
}

.mt-10 {
  margin-top: 10% !important;
}

.material-icons {
  color:#d1378c;
}

    /* Button used to open the chat form - fixed at the bottom of the page */
.chat-button {
  background-color: #d1378c;
  color: #ffffff;
  padding: 16px 16px;
  border: none;
  cursor: pointer;
  opacity: 1;
  position: fixed;
  bottom: 23px;
  right: 28px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  z-index: 999999 !important;
}

.chat-button:hover {
  background: #485494;
}

.chat-button .badge {
  position: absolute;
  top: -10px;
  right: -10px;
  padding: 8px;
  border-radius: 50%;
  background: #485494;
  color: #ffffff;
}

.img-raised {
  width:140px !important;
  height:140px !important;
  border-radius:50% !important;
  padding: 2.5% !important;
  border:1px solid #485494 !important;
}

.img-raised img {
  width:100% !important;
  height:100% !important;
  border-radius:50% !important;
  border:1px solid #485494 !important;
}


.remove-decoration, .remove-transform {
  text-decoration: none !important;
  text-transform: none !important;
}

.contact-textarea {
  border-radius: 6px;
  padding: 10px;
  border: 1px solid #ccc !important;
  background: #F2F2F2;
}

/* The Modal (background) */
.modal-2 {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 9999999999999; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content-2 {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
border: 1px solid #d1378c;
width: 70%;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4s;
border-radius: 6px;
}

/* Add Animation */
@-webkit-keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}

@keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}

.close-modal {
  color: #ffffff;
  /* position: absolute; */
  font-size: 28px;
  font-weight: bold;
  margin-left: 86%;
  cursor: pointer;
  /* border: 1px solid #ffffff;
  border-radius: 50%;
  width: 30px;
  height: 30px; */
}

/* The Close Button */
.close {
color: #ffffff;
float: right;
font-size: 28px;
font-weight: bold;
}

.close:hover,
.close:focus {
color: #ffffff;
text-decoration: none;
cursor: pointer;
}

.modal-header-2 {
padding: 2px 16px;
background: linear-gradient(60deg, #d1378c, #bc327e);
color: #ffffff;
}

.modal-header-2 h5 {
margin-top: 1% !important;
}

.modal-body-2 {
padding: 2px 16px;
}

.modal-footer-2 {
padding: 2px 16px;
background: linear-gradient(60deg, #d1378c, #bc327e);
color: #ffffff;
}

.data-container {
  max-height:50vh;
  overflow-y: scroll;
  /* margin-left: -4% !important; */
}

.times-span {
  color: #d1378c;
}

.color-white {
  color:#ffffff;
}

.td-img {
  vertical-align: top;
}

.status-img {
  width:50px;
  height: 50px;
  border-radius:50%;
}

.mt-4 {
  margin-top: 8% !important;
}

@media only screen and (max-width: 600px) {
  .modal-content-2 {
    width: 85%;
  }
  .close-modal {
    margin-top: -4% !important;
    margin-left: 66%;
  }
}