.typing-effect,
.typing-effect-2 {
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    width: 0
}

.merriweather-opensans p,
.question,
.themeht-btn,
body {
    font-family: 'Open Sans', sans-serif
}

.banner h1 span,
.banner-2 h1 span,
.banner-3 h1 span,
.theme-title h6 {
    background: linear-gradient(51deg, #0f9bd3, #0f9bd3, #0f9bd3);
    -webkit-text-fill-color: transparent
}

body {
    background-color: #56709a
}

.typing-effect {
    animation: 2.8s steps(30, end) forwards typing1
}

@keyframes typing1 {
    from {
        width: 0
    }

    to {
        width: 100%
    }
}

.typing-effect-2 {
    animation: 2.5s steps(25, end) forwards typing2;
    animation-delay: 3s;
    animation-fill-mode: forwards;
    opacity: 0
}

@keyframes typing2 {
    0% {
        width: 0;
        opacity: 1
    }

    100% {
        width: 100%;
        opacity: 1
    }
}

.fade-in {
    opacity: 0;
    transform: translateY(10px);
    animation: 1s ease-out forwards fadeIn
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

.fade-delay-1 {
    animation-delay: 6s
}

.fade-delay-2 {
    animation-delay: 7s
}

.fade-delay-3,
.slide-box .slide:nth-child(3) {
    animation-delay: 8s
}

.slide-in-right {
    opacity: 0;
    transform: translateX(100%);
    animation: .6s ease-out forwards slideLeftFade
}

@keyframes slideLeftFade {
    0% {
        opacity: 0;
        transform: translateX(100%)
    }

    100% {
        opacity: 1;
        transform: translateX(0)
    }
}

.hidden,
.step,
.ui-datepicker-calendar td:first-child,
.ui-datepicker-calendar td:nth-child(7),
.ui-datepicker-calendar th:first-child,
.ui-datepicker-calendar th:nth-child(7) {
    display: none
}

.step.active {
    display: block
}

.question::after {
    content: '|';
    animation: 1s infinite blink;
    margin-left: 4px
}

@keyframes blink {

    0%,
    100% {
        opacity: 1
    }

    50% {
        opacity: 0
    }
}

#loader {
    text-align: center !important;
    color: #fff !important
}

.spinner {
    animation: 1s linear infinite spin;
    display: inline-block;
    font-size: 2rem
}

@keyframes spin {
    100% {
        transform: rotate(360deg)
    }
}

.banner-2 {
    background-color: #fff;
    padding: 150px 0 300px
}

.banner h1 span,
.banner-2 h1 span,
.banner-3 h1 span {
    background-clip: border-box;
    -webkit-background-clip: text
}

.themeht-btn {
    background: linear-gradient(350deg, #0f9bd3, #0f9bd3, #0f9bd3);
    padding: 5px 40px;
    border-radius: 13px
}

.theme-title h6 {
    position: relative;
    display: inline-block;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 10px;
    background-clip: border-box;
    -webkit-background-clip: text
}

label {
    font-size: 14px;
    line-height: 1
}

.h1,
h1 {
    font-size: 55px
}

h1 {
    font-weight: 400;
    margin-top: 0;
    margin-bottom: 20px;
    font-style: normal;
    text-transform: capitalize;
    font-family: var(--themeht-secondary-font-family)
}

.logo img {
    height: auto
}

.form-control:focus {
    box-shadow: none;
    border-color: var(--themeht-primary-color)
}

.video-btn.is-play {
    background-color: #7f2c6c7d
}

.video-btn.is-play .video-btn-outer-circle {
    background: #ee2a7b70
}

.ui-datepicker {
    width: 100%;
    background: #0f9bd3
}

.ui-datepicker .ui-datepicker-header {
    background: #0f9bd3;
    color: #fff;
    border: none
}

.ui-widget.ui-widget-content {
    border: none
}

.ui-widget-content {
    border: 1px solid #ddd;
    background: #086c81e0;
    color: #fff
}

.ui-button,
.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default,
html .ui-button.ui-state-disabled:active,
html .ui-button.ui-state-disabled:hover {
    border: 1px solid #0f9bd3;
    background: #0f9bd3;
    color: #fff;
    text-align: center;
    font-weight: 600;
    padding: 8px
}

.ui-state-highlight {
    color: #007bff !important
}

.ui-state-active {
    background: #fff !important;
    color: #0f9bd3 !important
}

.slot-cs {
    background-color: #0f9bd3;
    color: #fff padding: 19px 0 0px 19px;
    text-align: center;
    width: 96%;
    margin-top: 7px
}

.slot-cs label {
    margin-top: 10px;
    color: #fff;
    font-weight: 600
}

.slot-cs span {
    color: #fff
}

.slot-parent {
    height: 348px;
    overflow-y: auto
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px
}

::-webkit-scrollbar-track {
    background: #f1f1f1
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(51deg, #ffc107, #ffff75, #957616);
    border-radius: 4px;
    border: 2px solid #f1f1f1
}

::-webkit-scrollbar-thumb:hover {
    background: #555
}

.progress-container {
    width: 100%;
    background-color: #eee;
    border-radius: 5px;
    overflow: hidden;
    height: 20px;
    margin: 20px 0
}

.progress-bar {
    width: 0;
    height: 100%;
    background-color: #4caf50;
    animation: 2s ease-in-out forwards loadProgress
}

@keyframes loadProgress {
    0% {
        width: 0
    }

    100% {
        width: 100%
    }
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: Merriweather, serif
}

.playfair-source h1 {
    font-family: 'Playfair Display', serif;
    font-weight: 600
}

.playfair-source p {
    font-family: 'Source Sans Pro', sans-serif
}

.libre-lato h1 {
    font-family: 'Libre Baskerville', serif;
    font-weight: 700
}

.libre-lato p {
    font-family: Lato, sans-serif;
    font-weight: 400
}

.poppins-roboto h1 {
    font-family: Poppins, sans-serif;
    font-weight: 600
}

.poppins-roboto p {
    font-family: Roboto, sans-serif
}

.merriweather-georgia h1,
.merriweather-opensans h1 {
    font-family: Merriweather, serif;
    font-weight: 700
}

.merriweather-georgia h3 {
    font-family: Georgia, serif;
    font-style: italic;
    font-weight: 400;
    color: #555
}

.merriweather-georgia p,
h5,
label {
    font-family: 'Open Sans', sans-serif
}

.merriweather-georgia p {
    font-weight: 400;
    color: #444
}

h5,
label {
    font-weight: 600 !important;
    color: #444 !important
}

.form-group input[type=radio],
input[type=email],
input[type=number],
input[type=text],
select,
textarea {
    color: #444 !important;
    font-family: 'Open Sans', sans-serif !important;
    font-weight: 600 !important
}

.form-group input[type=radio] {
    cursor: pointer
}

input::placeholder {
    font-family: 'Open Sans', sans-serif !important;
    font-weight: 600 !important
}

textarea::placeholder {
    font-family: 'Open Sans', sans-serif !important;
    font-weight: 600 !important
}

.slide-box {
    position: relative;
    overflow: hidden;
    height: 400px
}

@media (max-width:768px) {
    .slide-box {
        height: 500px
    }
}

.slide-box .slide {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 100%;
    animation: 12s infinite slideIn
}

.slide-box .slide:first-child {
    animation-delay: 0s
}

.slide-box .slide:nth-child(2) {
    animation-delay: 4s
}

@keyframes slideIn {
    0% {
        left: 100%;
        opacity: 0
    }

    10%,
    30% {
        left: 0;
        opacity: 1
    }

    100%,
    40% {
        left: -100%;
        opacity: 0
    }
}

.logo {
    width: 241px
}

input[type=checkbox],
input[type=checkbox]+label,
input[type=radio],
input[type=radio]+label {
    display: inline;
    vertical-align: middle
}

.shadow-box {
    box-shadow: 0 0 20px #0f9bd369 !important;
    border-radius: 10px;
    padding: 5px;
    margin-top: 10px;
    position: absolute;
    right: -10%;
    transform: translateY(-50%);
    width: 50%;
    top: 22%;
}

/* ✅ Mobile Styles */
@media (max-width: 768px) {
    .shadow-box {
        width: 90%;           /* Full width for small screens */
        right: 0%;            /* Slightly away from the edge */
        top: 15%;             /* Adjust vertical position */
        transform: translateY(0); /* Remove vertical center alignment */
        position: relative;   /* Switch from absolute to relative for stacking */
        margin: 20px auto;    /* Center it horizontally */
    }
}

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