body {
    animation: fadeInAnimation ease 3s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    height: 100vh;
}

@keyframes fadeInAnimation {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
ul,
li,
p,
a,
span {
    margin: 0 !important;
    padding: 0 !important;
}

.page-item {
    cursor: pointer;
}

a:focus,
input:focus-visible,
input:focus {
    outline: 0 auto -webkit-focus-ring-color;
}

ul li {
    list-style: none;
}

.form-control:focus {
    box-shadow: 0 0 0 0.25rem rgb(13 110 253/0%);
}

.login-card-back {
    background-color: #ffffff96;
}

.btn-check:focus + .btn,
.btn:focus {
    box-shadow: 0 0 0 0.25rem rgb(13 110 253/0%);
}

.form-select:focus {
    box-shadow: 0 0 0 0.25rem rgb(13 110 253/0%);
}

a {
    text-decoration: none !important;
    transition: all 0.5s ease-in-out;
}

a:hover,
:hover {
    text-decoration: none !important;
    transition: all 0.5s ease-in-out;
}

.font-10 {
    font-size: 10px !important;
}

.font-11 {
    font-size: 11px !important;
}

.font-12 {
    font-size: 12px !important;
}

.font-13 {
    font-size: 13px !important;
}

.font-14 {
    font-size: 14px !important;
}

.font-15 {
    font-size: 15px;
}

.font-16 {
    font-size: 16px;
}

.font-17 {
    font-size: 17px;
}

.font-18 {
    font-size: 18px;
}

.font-19 {
    font-size: 19px;
}
.font-20 {
    font-size: 20px;
}

.font-21 {
    font-size: 21px;
}

.font-22 {
    font-size: 22px;
}

.font-24 {
    font-size: 24px !important;
}

.font-27 {
    font-size: 27px !important;
}

.font-30 {
    font-size: 30px;
}

.font-40 {
    font-size: 40px;
}

.fw-800 {
    font-weight: 800 !important;
}

.font-50 {
    font-size: 50px;
}

.fw-600 {
    font-weight: 600 !important;
}

.fw-700 {
    font-weight: 700 !important;
}

.line-height-25 {
    line-height: 25px;
}

.font-dark-purple {
    color: #400040;
}

.border-dark-purple {
    border: solid 1px #400040 !important;
}

/* font family */
.montserrat-500 {
    font-family: "Montserrat", sans-serif;
    font-weight: 500;
    font-style: normal;
}

/* Header Section */
.action-button {
    border: solid 1px #400040 !important;
    color: #000 !important;
}

.action-button:hover {
    color: white !important;
    background: linear-gradient(90deg, #c1168b 0%, #400040 225%);
}

.logo-possition {
    margin-top: -2% !important;
}

.main-menu .active {
    color: #c1168b !important;
    border-bottom: solid 2px #400040;
}

.main-menu .nav-link:hover {
    color: #c1168b !important;
}

.mobile-naviigation .active {
    background-color: #48003e !important;
    border-radius: 50px;
    color: #fff !important;
}

.header-border-bottom {
    /* border-bottom: solid 1px #400040; */
    border-bottom: solid 1px #4000403d;
}

.sticky {
    background: url(/themes/default/images/home/header-bg.png) no-repeat !important;
    background-size: cover !important;
    background-position: center !important;
}

.sticky .logo-possition {
    width: 30%;
}

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

/* Footer Section */
.footer-section {
    background: linear-gradient(90deg, #000000 0%, #400040 80%);
    position: fixed;
    bottom: 0;
    width: 100%;
}

.home-page-bg {
    background: url(/themes/default/images/home/site-background.png) no-repeat;
    background-size: cover;
    background-position: right;
    height: 100vh;
}

.inner-pages-bg {
    background: url(/themes/default/images/home/inner-background.png) no-repeat !important;
    background-size: cover !important;
    background-position: center !important;
}

.intro-section {
    height: 94vh;
    justify-content: center;
    align-items: center;
    display: flex;
}

/* Home - Sections */
.support-icon {
    border: solid 3px #400040;
    background-color: white;
    padding: 15px !important;
}

.support-options {
    background: #ececec;
    box-shadow: 2px 2px 2px #00000047;
    border-radius: 80px;
    border: solid 3px white;
}

.support-options p {
    color: #000;
}

.support-options:hover p {
    color: #fff !important;
}

.support-options:hover {
    background: linear-gradient(90deg, #c1168b 0%, #400040 225%);
    border-color: #c1168b;
}

.options-bg {
    position: absolute;
    height: 25rem;
    width: 20rem !important;
    background: linear-gradient(357deg, #1d011d 0%, #c1168b 100%);
    left: 21%;
    border-radius: 30px;
    z-index: -000 !important;
}

.z-index-9 {
    z-index: 9;
}

.all-options {
    margin-left: -10rem;
}

.support-options:hover .support-icon {
    background: linear-gradient(180deg, #960a96 0%, #1f021f 131%);
    border-color: #c1168b;
    border: none;
}

.home-page-bg {
    height: 100vh;
}

.support-options:hover .onhover-icon {
    display: block !important;
}

.support-options:hover .onload-icon {
    display: none !important;
}

.not-emergency-call {
    width: 20% !important;
}

.emergency-call {
    width: 23% !important;
}

/* Social Icons */
.social-media {
    position: fixed;
    z-index: 10001;
    top: 27%;
    transform: translateY(-50%);
    right: 0%;
    background: #ffffff73;
    border-radius: 6px 0px 0px 6px;
}

.social-icons:hover {
    transform: scale(1.2) !important;
}

.hotline {
    position: fixed;
    z-index: 99;
    top: 63%;
    transform: translateY(-50%);
    right: 0%;
    background: #400040;
    border-radius: 50px 0px 0px 50px;
}

.hotline:hover {
    animation: hoverEffect 4s forwards; /* Play animation for 2 seconds */
}

/* Define the animation */
@keyframes hoverEffect {
    0% {
        background-color: #d1008f70; /* Initial state */
    }
    50% {
        background-color: #48003e5e; /* Hover state */
    }
    100% {
        background-color: #d1008f70; /* Return to the initial state */
    }
}

.bg-purple-gradient {
    background: linear-gradient(180deg, #7c087c 0%, #400040 100%);
    /* height: 100%; */
}

.bg-purple-gradient-wh {
    background: linear-gradient(180deg, #7c087c 0%, #400040 100%);
}

.border-dark-purple {
    border: 3px solid #400040 !important;
}

.hover-animate {
    transition: all 0.3s ease-in-out;
    transform: 0.3s ease-in-out;
}

.hover-animate:hover {
    transform: scale(0.95);
}

.cus-visit-logo{
    width: 100px;
    height: 67px;
}

/* Hide the default radio button */
.custom-radio input[type="radio"] {
    display: none;
}

/* Create a custom radio button appearance */
.custom-radio .custom-label {
    display: flex;
    align-items: center;
    padding: 10px 15px;
    background-color: #f8f9fa;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    font-weight: 500;
}

/* Add an empty circle for unselected radio buttons */
.custom-radio .custom-label::before {
    content: "";
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid #adb5bd;
    margin-right: 10px;
    transition: border-color 0.3s ease;
}

/* Change the background and border color when hovering */
.custom-radio .custom-label:hover {
    background-color: #e2e6ea;
}

/* Style for the selected radio button */
.custom-radio input[type="radio"]:checked + .custom-label {
    background-color: #dc3545;
    color: white;
}

/* Add a filled circle for selected radio buttons */
.custom-radio input[type="radio"]:checked + .custom-label::before {
    background-color: white;
    border-color: white;
    background-clip: content-box;
    padding: 4px;
    box-sizing: border-box;
}

/* Our Team */
.carousel-caption {
    bottom: 7.25rem !important;
}

/* About Us */
.border-dark-purple {
    border: solid 1px #400040 !important;
    padding: 4px 4px;
    border-radius: 90px;
    font-size: 12px !important;
}

.where-we-work-bg {
    background-color: #ffffff5e;
}

/* Contact Us */
.btn.btn-purple {
    background: #400040;
    color: white;
    font-weight: 600;
    font-size: 16px;
    border: solid 2px #400040;
}

.btn.btn-purple:hover {
    background: #ffffff00;
    border-color: #48003e;
    color: #48003e;
}

.page-top {
    padding-top: 10.4%;
}

.pt-200 {
    padding-top: 200px !important;
}

.pt-113 {
    padding-top: 8%;
}

/* Initial styling for the Button Hover */
.light-box {
    transition: box-shadow 0.3s ease-in-out; /* Smooth transition */
}

/* On hover, animate the box shadow */
.light-box:hover {
    box-shadow: 0 0 30px 10px #996282; /* Light effect */
}

/* Optionally, you can add a subtle hover transition for a glowing effect */
@keyframes light-glow {
    0% {
        box-shadow: 0 0 10px #e80089;
    }
    50% {
        box-shadow: 0 0 30px #e80089;
    }
    100% {
        box-shadow: 0 0 10px #e80089;
    }
}

.light-box:hover {
    animation: light-glow 1.5s infinite alternate; /* Glowing effect */
}

/* star rating begining */
.star-rating {
    display: flex;
    flex-direction: row-reverse; /* Ensure stars are displayed left-to-right */
}

.star-rating input[type="radio"] {
    display: none; /* Hide the actual radio buttons */
}

.star-rating .star {
    font-size: 5em;
    color: #ccc; /* Default gray color for unselected stars */
    cursor: pointer;
    transition: color 0.3s ease;
}

/* Highlight stars from left to right on hover */
.star-rating .star:hover ~ .star,
.star-rating input[type="radio"]:checked ~ .star {
    color: gold; /* Highlight only stars up to the hovered or selected one */
}

/* Highlight the stars before and including the hovered star */
.star-rating input[type="radio"]:checked + .star,
.star-rating input[type="radio"]:checked + .star ~ .star {
    color: gold; /* Change all stars before and after */
}
/* star rating ending */

/*question required start*/
.required-label::after {
    content: " *";
    color: red;
}
/*question required end*/